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

This commit is contained in:
Benjamin Canac
2023-07-27 18:17:22 +02:00
parent 572b7a5984
commit 5bd5dc2bca
2 changed files with 5 additions and 1 deletions

View File

@@ -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:

View File

@@ -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',