feat(BaseTag): add colors, update class bindings

shuriken-ui · Feb 22, 2024 · 5d7bcf6 · 5d7bcf6
1 parent 7809472
commit 5d7bcf6
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/.playground/pages/tests/base/tag.vue b/.playground/pages/tests/base/tag.vue
@@ -39,6 +39,9 @@ definePageMeta({
           <BaseTag rounded="md" variant="solid" color="info">Label</BaseTag>
           <BaseTag rounded="md" variant="solid" color="warning">Label</BaseTag>
           <BaseTag rounded="md" variant="solid" color="danger">Label</BaseTag>
+          <BaseTag rounded="md" variant="solid" color="light">Label</BaseTag>
+          <BaseTag rounded="md" variant="solid" color="dark">Label</BaseTag>
+          <BaseTag rounded="md" variant="solid" color="black">Label</BaseTag>
         </div>
       </NuiPreview>
 
@@ -54,6 +57,9 @@ definePageMeta({
           <BaseTag rounded="md" variant="pastel" color="info">Label</BaseTag>
           <BaseTag rounded="md" variant="pastel" color="warning">Label</BaseTag>
           <BaseTag rounded="md" variant="pastel" color="danger">Label</BaseTag>
+          <BaseTag rounded="md" variant="pastel" color="light">Label</BaseTag>
+          <BaseTag rounded="md" variant="pastel" color="dark">Label</BaseTag>
+          <BaseTag rounded="md" variant="pastel" color="black">Label</BaseTag>
         </div>
       </NuiPreview>
 
@@ -77,6 +83,9 @@ definePageMeta({
             Label
           </BaseTag>
           <BaseTag rounded="md" variant="outline" color="danger">Label</BaseTag>
+          <BaseTag rounded="md" variant="outline" color="light">Label</BaseTag>
+          <BaseTag rounded="md" variant="outline" color="dark">Label</BaseTag>
+          <BaseTag rounded="md" variant="outline" color="black">Label</BaseTag>
         </div>
       </NuiPreview>
 

diff --git a/components/base/BaseTag.vue b/components/base/BaseTag.vue
@@ -16,7 +16,12 @@ const props = withDefaults(
      */
     color?:
       | 'default'
+      | 'default-contrast'
       | 'muted'
+      | 'muted-contrast'
+      | 'light'
+      | 'dark'
+      | 'black'
       | 'primary'
       | 'info'
       | 'success'
@@ -65,15 +70,20 @@ const variants = {
 
 const radiuses = {
   none: '',
-  sm: 'nui-tag-rounded',
-  md: 'nui-tag-smooth',
-  lg: 'nui-tag-curved',
-  full: 'nui-tag-full',
+  sm: 'nui-tag-rounded-sm',
+  md: 'nui-tag-rounded-md',
+  lg: 'nui-tag-rounded-lg',
+  full: 'nui-tag-rounded-full',
 } as Record<string, string>
 
 const colors = {
   default: 'nui-tag-default',
+  'default-contrast': 'nui-tag-default-contrast',
   muted: 'nui-tag-muted',
+  'muted-contrast': 'nui-tag-muted-contrast',
+  light: 'nui-tag-light',
+  dark: 'nui-tag-dark',
+  black: 'nui-tag-black',
   primary: 'nui-tag-primary',
   info: 'nui-tag-info',
   success: 'nui-tag-success',