feat(Badge): rename outline to subtle + add soft variants

nuxt · Jul 27, 2023 · 5bd5dc2 · 5bd5dc2
1 parent 572b7a5
commit 5bd5dc2
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/docs/content/2.elements/4.badge.md b/docs/content/2.elements/4.badge.md
@@ -31,6 +31,8 @@ props:
 
 Use the `color` and `variant` props to change the visual style of the Badge.
 
+- `variant` can be `solid` (default), `outline`, `soft` or `subtle`.
+
 ::component-card
 ---
 props:

diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
@@ -132,7 +132,9 @@ const badge = {
   },
   variant: {
     solid: 'bg-{color}-500 dark:bg-{color}-400 text-white dark:text-gray-900',
-    outline: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-10 dark:ring-opacity-20'
+    outline: 'text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400',
+    soft: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400',
+    subtle: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-25 dark:ring-opacity-25'
   },
   default: {
     size: 'sm',