fix(Dropdown): rename white and white-contrast colors to default and …

…default-contrast
shuriken-ui · Feb 20, 2024 · b0f2290 · b0f2290
1 parent d3f2571
commit b0f2290
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 28 deletions.
diff --git a/src/plugins/components/dropdown/dropdown.component.ts b/src/plugins/components/dropdown/dropdown.component.ts
@@ -16,7 +16,7 @@ export const Dropdown = ({
   variant = 'button',
   rounded = 'sm',
   orientation = 'start',
-  color = 'white',
+  color = 'default',
   size = 'lg',
   classes,
   children,

diff --git a/src/plugins/components/dropdown/dropdown.config.ts b/src/plugins/components/dropdown/dropdown.config.ts
@@ -84,7 +84,7 @@ export const defaultConfig = {
       lg: 'rounded-xl',
     },
     color: {
-      white: {
+      default: {
         background: {
           light: 'white',
           dark: 'muted-800',
@@ -94,7 +94,7 @@ export const defaultConfig = {
           dark: 'muted-700',
         },
       },
-      whiteContrast: {
+      defaultContrast: {
         background: {
           light: 'white',
           dark: 'muted-950',

diff --git a/src/plugins/components/dropdown/dropdown.stories.ts b/src/plugins/components/dropdown/dropdown.stories.ts
@@ -30,8 +30,8 @@ const meta = {
     color: {
       control: { type: 'select' },
       options: [
-        'white',
-        'white-contrast',
+        'default',
+        'default-contrast',
         'muted',
         'muted-contrast',
         'primary',
@@ -91,7 +91,7 @@ export const Main: Story = {
   name: 'Main example',
   args: {
     // set default values used for UI preview
-    color: 'white',
+    color: 'default',
     label: 'Dropdown',
     variant: 'button',
     orientation: 'start',
@@ -137,7 +137,7 @@ export const Main: Story = {
 export const ButtonEnd: Story = {
   name: 'Main example',
   args: {
-    color: 'white',
+    color: 'default',
     label: 'Dropdown',
     variant: 'button',
     orientation: 'end',
@@ -183,7 +183,7 @@ export const ButtonEnd: Story = {
 export const ContextStart: Story = {
   name: 'Context: start',
   args: {
-    color: 'white',
+    color: 'default',
     label: 'Dropdown',
     variant: 'context',
     orientation: 'start',
@@ -227,7 +227,7 @@ export const ContextStart: Story = {
 export const ContextEnd: Story = {
   name: 'Context: end',
   args: {
-    color: 'white',
+    color: 'default',
     label: 'Dropdown',
     variant: 'context',
     orientation: 'end',
@@ -273,7 +273,7 @@ export const ContextEnd: Story = {
 export const TextStart: Story = {
   name: 'Text: start',
   args: {
-    color: 'white',
+    color: 'default',
     label: 'Dropdown',
     variant: 'text',
     orientation: 'start',
@@ -317,7 +317,7 @@ export const TextStart: Story = {
 export const TextEnd: Story = {
   name: 'Text: end',
   args: {
-    color: 'white',
+    color: 'default',
     label: 'Dropdown',
     variant: 'text',
     orientation: 'end',
@@ -363,7 +363,7 @@ export const TextEnd: Story = {
 export const ButtonColor: Story = {
   name: 'Button: color',
   args: {
-    color: 'white',
+    color: 'default',
     label: 'Dropdown',
     variant: 'button',
     buttonColor: 'primary',
@@ -410,7 +410,7 @@ export const ButtonColor: Story = {
 export const Divider: Story = {
   name: 'Dropdown: divider',
   args: {
-    color: 'white',
+    color: 'default',
     label: 'Dropdown',
     variant: 'button',
     orientation: 'start',
@@ -458,7 +458,7 @@ export const Divider: Story = {
 export const SlotIcon: Story = {
   name: 'Slot: icon',
   args: {
-    color: 'white',
+    color: 'default',
     label: 'Dropdown',
     variant: 'context',
     orientation: 'start',
@@ -577,7 +577,7 @@ export const SlotIcon: Story = {
 export const SlotAvatar: Story = {
   name: 'Slot: avatar',
   args: {
-    color: 'white',
+    color: 'default',
     label: 'Dropdown',
     variant: 'button',
     orientation: 'start',
@@ -647,7 +647,7 @@ export const SlotAvatar: Story = {
 export const SlotAction: Story = {
   name: 'Slot: action',
   args: {
-    color: 'white',
+    color: 'default',
     label: 'Dropdown',
     variant: 'button',
     orientation: 'start',

diff --git a/src/plugins/components/dropdown/dropdown.types.ts b/src/plugins/components/dropdown/dropdown.types.ts
@@ -13,8 +13,8 @@ export interface DropdownProps extends Record<string, unknown> {
     | 'muted'
     | 'none'
   color?:
-    | 'white'
-    | 'white-contrast'
+    | 'default'
+    | 'default-contrast'
     | 'muted'
     | 'muted-contrast'
     | 'primary'

diff --git a/src/plugins/components/dropdown/dropdown.variants.ts b/src/plugins/components/dropdown/dropdown.variants.ts
@@ -19,8 +19,8 @@ export const rounded = {
 } as const satisfies DropdownVariant<'rounded'>
 
 export const color = {
-  white: 'nui-menu-white',
-  'white-contrast': 'nui-menu-white-contrast',
+  default: 'nui-menu-default',
+  'default-contrast': 'nui-menu-default-contrast',
   muted: 'nui-menu-muted',
   'muted-contrast': 'nui-menu-muted-contrast',
   primary: 'nui-menu-primary',

diff --git a/src/plugins/components/dropdown/index.ts b/src/plugins/components/dropdown/index.ts
@@ -134,22 +134,22 @@ export default plugin(({ addComponents, theme }) => {
         '&.nui-menu-curved': {
           [`@apply ${config.menu.rounded.lg}`]: {},
         },
-        //Color:white
-        '&.nui-menu-white': {
+        //Color:default
+        '&.nui-menu-default': {
           //Border
-          [`@apply border border-${config.menu.color.white.border.light} dark:border-${config.menu.color.white.border.dark}`]:
+          [`@apply border border-${config.menu.color.default.border.light} dark:border-${config.menu.color.default.border.dark}`]:
             {},
           //Background
-          [`@apply bg-${config.menu.color.white.background.light} dark:bg-${config.menu.color.white.background.dark}`]:
+          [`@apply bg-${config.menu.color.default.background.light} dark:bg-${config.menu.color.default.background.dark}`]:
             {},
         },
-        //Color:white-contrast
-        '&.nui-menu-white-contrast': {
+        //Color:default-contrast
+        '&.nui-menu-default-contrast': {
           //Border
-          [`@apply border border-${config.menu.color.whiteContrast.border.light} dark:border-${config.menu.color.whiteContrast.border.dark}`]:
+          [`@apply border border-${config.menu.color.defaultContrast.border.light} dark:border-${config.menu.color.defaultContrast.border.dark}`]:
             {},
           //Background
-          [`@apply bg-${config.menu.color.whiteContrast.background.light} dark:bg-${config.menu.color.whiteContrast.background.dark}`]:
+          [`@apply bg-${config.menu.color.defaultContrast.background.light} dark:bg-${config.menu.color.defaultContrast.background.dark}`]:
             {},
         },
         //Color:muted