feat(BaseButton): update prop names, add new colors, add contrast colors

shuriken-ui · Feb 21, 2024 · f1ad68c · f1ad68c
1 parent b61e307
commit f1ad68c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/.playground/pages/tests/base/button.vue b/.playground/pages/tests/base/button.vue
@@ -62,12 +62,14 @@ definePageMeta({
         <div class="flex flex-wrap items-end gap-4">
           <BaseButton variant="solid">Button</BaseButton>
           <BaseButton variant="solid" color="muted">Button</BaseButton>
-          <BaseButton variant="solid" color="light">Button</BaseButton>
           <BaseButton variant="solid" color="primary">Button</BaseButton>
           <BaseButton variant="solid" color="success">Button</BaseButton>
           <BaseButton variant="solid" color="info">Button</BaseButton>
           <BaseButton variant="solid" color="warning">Button</BaseButton>
           <BaseButton variant="solid" color="danger">Button</BaseButton>
+          <BaseButton variant="solid" color="light">Button</BaseButton>
+          <BaseButton variant="solid" color="dark">Button</BaseButton>
+          <BaseButton variant="solid" color="black">Button</BaseButton>
         </div>
       </NuiPreview>
 
@@ -83,6 +85,9 @@ definePageMeta({
           <BaseButton variant="pastel" color="info">Button</BaseButton>
           <BaseButton variant="pastel" color="warning">Button</BaseButton>
           <BaseButton variant="pastel" color="danger">Button</BaseButton>
+          <BaseButton variant="pastel" color="light">Button</BaseButton>
+          <BaseButton variant="pastel" color="dark">Button</BaseButton>
+          <BaseButton variant="pastel" color="black">Button</BaseButton>
         </div>
       </NuiPreview>
 
@@ -98,6 +103,9 @@ definePageMeta({
           <BaseButton variant="outline" color="info">Button</BaseButton>
           <BaseButton variant="outline" color="warning">Button</BaseButton>
           <BaseButton variant="outline" color="danger">Button</BaseButton>
+          <BaseButton variant="outline" color="light">Button</BaseButton>
+          <BaseButton variant="outline" color="dark">Button</BaseButton>
+          <BaseButton variant="outline" color="black">Button</BaseButton>
         </div>
       </NuiPreview>
 

diff --git a/components/base/BaseButton.vue b/components/base/BaseButton.vue
@@ -40,13 +40,17 @@ const props = withDefaults(
      */
     color?:
       | 'default'
+      | 'default-contrast'
+      | 'muted'
+      | 'muted-contrast'
+      | 'light'
+      | 'dark'
+      | 'black'
       | 'primary'
       | 'info'
       | 'success'
       | 'warning'
       | 'danger'
-      | 'light'
-      | 'muted'
       | 'none'
 
     /**
@@ -114,10 +118,10 @@ const sizes = {
 
 const radiuses = {
   none: '',
-  sm: 'nui-button-rounded',
-  md: 'nui-button-smooth',
-  lg: 'nui-button-curved',
-  full: 'nui-button-full',
+  sm: 'nui-button-rounded-sm',
+  md: 'nui-button-rounded-md',
+  lg: 'nui-button-rounded-lg',
+  full: 'nui-button-rounded-full',
 } as Record<string, string>
 
 const variants = {
@@ -129,13 +133,17 @@ const variants = {
 const colors = {
   none: '',
   default: 'nui-button-default',
+  'default-contrast': 'nui-button-default-contrast',
   primary: 'nui-button-primary',
   info: 'nui-button-info',
   success: 'nui-button-success',
   warning: 'nui-button-warning',
   danger: 'nui-button-danger',
-  light: 'nui-button-light',
   muted: 'nui-button-muted',
+  'muted-contrast': 'nui-button-muted-contrast',
+  light: 'nui-button-light',
+  dark: 'nui-button-dark',
+  black: 'nui-button-black',
 } as Record<string, string>
 
 const shadows = {