feat(BaseButtonIcon): add colors, add contrast colors, update class b…

…indings
shuriken-ui · Feb 21, 2024 · d6d5853 · d6d5853
1 parent 007f08d
commit d6d5853
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 4 deletions.
diff --git a/.playground/pages/tests/base/button-icon.vue b/.playground/pages/tests/base/button-icon.vue
@@ -205,6 +205,75 @@ definePageMeta({
         </div>
       </NuiPreview>
 
+      <NuiPreview
+        title="Color: light"
+        description="Button icon component light color"
+      >
+        <div class="flex flex-wrap items-end gap-2">
+          <BaseButtonIcon rounded="none" color="light">
+            <Icon name="ph:moon-duotone" class="h-5 w-5" />
+          </BaseButtonIcon>
+          <BaseButtonIcon rounded="sm" color="light">
+            <Icon name="ph:github-logo-duotone" class="h-5 w-5" />
+          </BaseButtonIcon>
+          <BaseButtonIcon rounded="md" color="light">
+            <Icon name="ph:game-controller-duotone" class="h-5 w-5" />
+          </BaseButtonIcon>
+          <BaseButtonIcon rounded="lg" color="light">
+            <Icon name="ph:alien-duotone" class="h-5 w-5" />
+          </BaseButtonIcon>
+          <BaseButtonIcon rounded="full" color="light">
+            <Icon name="ph:heart-duotone" class="h-5 w-5" />
+          </BaseButtonIcon>
+        </div>
+      </NuiPreview>
+
+      <NuiPreview
+        title="Color: dark"
+        description="Button icon component dark color"
+      >
+        <div class="flex flex-wrap items-end gap-2">
+          <BaseButtonIcon rounded="none" color="dark">
+            <Icon name="ph:moon-duotone" class="h-5 w-5" />
+          </BaseButtonIcon>
+          <BaseButtonIcon rounded="sm" color="dark">
+            <Icon name="ph:github-logo-duotone" class="h-5 w-5" />
+          </BaseButtonIcon>
+          <BaseButtonIcon rounded="md" color="dark">
+            <Icon name="ph:game-controller-duotone" class="h-5 w-5" />
+          </BaseButtonIcon>
+          <BaseButtonIcon rounded="lg" color="dark">
+            <Icon name="ph:alien-duotone" class="h-5 w-5" />
+          </BaseButtonIcon>
+          <BaseButtonIcon rounded="full" color="dark">
+            <Icon name="ph:heart-duotone" class="h-5 w-5" />
+          </BaseButtonIcon>
+        </div>
+      </NuiPreview>
+
+      <NuiPreview
+        title="Color: black"
+        description="Button icon component black color"
+      >
+        <div class="flex flex-wrap items-end gap-2">
+          <BaseButtonIcon rounded="none" color="black">
+            <Icon name="ph:moon-duotone" class="h-5 w-5" />
+          </BaseButtonIcon>
+          <BaseButtonIcon rounded="sm" color="black">
+            <Icon name="ph:github-logo-duotone" class="h-5 w-5" />
+          </BaseButtonIcon>
+          <BaseButtonIcon rounded="md" color="black">
+            <Icon name="ph:game-controller-duotone" class="h-5 w-5" />
+          </BaseButtonIcon>
+          <BaseButtonIcon rounded="lg" color="black">
+            <Icon name="ph:alien-duotone" class="h-5 w-5" />
+          </BaseButtonIcon>
+          <BaseButtonIcon rounded="full" color="black">
+            <Icon name="ph:heart-duotone" class="h-5 w-5" />
+          </BaseButtonIcon>
+        </div>
+      </NuiPreview>
+
       <NuiPreview
         title="State: loading"
         description="Button icon component in loading state"

diff --git a/components/base/BaseButtonIcon.vue b/components/base/BaseButtonIcon.vue
@@ -44,7 +44,12 @@ const props = withDefaults(
      */
     color?:
       | 'default'
+      | 'default-contrast'
       | 'muted'
+      | 'muted-contrast'
+      | 'light'
+      | 'dark'
+      | 'black'
       | 'primary'
       | 'info'
       | 'success'
@@ -88,10 +93,10 @@ const size = useNuiDefaultProperty(props, 'BaseButtonIcon', 'size')
 
 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 sizes = {
@@ -102,7 +107,12 @@ const sizes = {
 
 const colors = {
   default: 'nui-button-default',
+  'default-contrast': 'nui-button-default-contrast',
   muted: 'nui-button-muted',
+  'muted-contrast': 'nui-button-muted-contrast',
+  light: 'nui-button-light',
+  dark: 'nui-button-dark',
+  black: 'nui-button-black',
   primary: 'nui-button-primary',
   info: 'nui-button-info',
   success: 'nui-button-success',