From 5bd5dc2bcaeb59d4b0a1aea802bd3e2b2160ad53 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Thu, 27 Jul 2023 18:17:22 +0200 Subject: [PATCH] feat(Badge): rename `outline` to `subtle` + add `soft` variants --- docs/content/2.elements/4.badge.md | 2 ++ src/runtime/app.config.ts | 4 +++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/content/2.elements/4.badge.md b/docs/content/2.elements/4.badge.md index 0aff3869..ebc4b937 100644 --- 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 index 81f57de7..6b127048 100644 --- 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',