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

…ult-contrast, fix shadow prop
shuriken-ui · Feb 20, 2024 · d3f2571 · d3f2571
1 parent 9b85f2c
commit d3f2571
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 36 deletions.
diff --git a/src/plugins/components/card/card.component.ts b/src/plugins/components/card/card.component.ts
@@ -8,9 +8,8 @@ import * as variants from './card.variants'
  * Primary UI component for user interaction
  */
 export const Card = ({
-  color = 'white',
-  elevated,
-  elevatedHover,
+  color = 'default',
+  shadow,
   rounded = 'sm',
   classes,
   children,
@@ -22,8 +21,8 @@ export const Card = ({
         'nui-card',
         color && variants.color[color],
         rounded && variants.rounded[rounded],
-        elevated && 'nui-card-shadow',
-        elevatedHover && 'nui-card-shadow-hover',
+        shadow === 'flat' && 'nui-card-shadow',
+        shadow === 'hover' && 'nui-card-shadow-hover',
         classes?.wrapper,
       ]
         .filter(Boolean)

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

diff --git a/src/plugins/components/card/card.stories.ts b/src/plugins/components/card/card.stories.ts
@@ -14,8 +14,8 @@ const meta = {
     color: {
       control: { type: 'select' },
       options: [
-        'white',
-        'white-contrast',
+        'default',
+        'default-contrast',
         'muted',
         'muted-contrast',
         'dark',
@@ -27,7 +27,7 @@ const meta = {
         'danger',
         'none',
       ],
-      defaultValue: 'white',
+      defaultValue: 'default',
     },
     elevated: {
       name: 'Elevated',
@@ -52,7 +52,7 @@ export const Main: Story = {
   name: 'Main example',
   args: {
     // set default values used for UI preview
-    color: 'white',
+    color: 'default',
     children: html`
       <h6
         class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
@@ -70,12 +70,12 @@ export const Main: Story = {
 }
 // #endregion
 
-// #region Color: white
+// #region Color: default
 export const ColorWhite: Story = {
-  name: 'Color: white',
+  name: 'Color: default',
   args: {
     // set default values used for UI preview
-    color: 'white',
+    color: 'default',
     children: html`
       <h6
         class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
@@ -93,12 +93,12 @@ export const ColorWhite: Story = {
 }
 // #endregion
 
-// #region Color: white
+// #region Color: default-contrast
 export const ColorWhiteContrast: Story = {
-  name: 'Color: white contrast',
+  name: 'Color: default contrast',
   args: {
     // set default values used for UI preview
-    color: 'white-contrast',
+    color: 'default-contrast',
     children: html`
       <h6
         class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
@@ -324,7 +324,7 @@ export const ShadowFlat: Story = {
   name: 'Shadow: flat',
   args: {
     // set default values used for UI preview
-    color: 'white',
+    color: 'default',
     elevated: true,
     children: html`
       <h6
@@ -348,7 +348,7 @@ export const ShadowHover: Story = {
   name: 'Shadow: hover',
   args: {
     // set default values used for UI preview
-    color: 'white',
+    color: 'default',
     elevatedHover: true,
     children: html`
       <h6
@@ -372,7 +372,7 @@ export const Slot: Story = {
   name: 'Slot: default',
   args: {
     // set default values used for UI preview
-    color: 'white',
+    color: 'default',
     elevatedHover: true,
     children: html`
       <div class="flex items-center gap-2">
@@ -403,7 +403,7 @@ export const Slot2: Story = {
   name: 'Slot: default',
   args: {
     // set default values used for UI preview
-    color: 'white',
+    color: 'default',
     elevatedHover: true,
     children: html`
       <div class="flex items-center gap-2">
@@ -434,7 +434,7 @@ export const Slot3: Story = {
   name: 'Slot: default',
   args: {
     // set default values used for UI preview
-    color: 'white',
+    color: 'default',
     elevatedHover: true,
     children: html`
       <div class="flex items-center gap-2">

diff --git a/src/plugins/components/card/card.types.ts b/src/plugins/components/card/card.types.ts
@@ -2,11 +2,10 @@ import type { PropertyVariant } from '~/types/utils'
 
 export interface CardProps extends Record<string, unknown> {
   rounded?: 'none' | 'sm' | 'md' | 'lg'
-  elevated?: boolean
-  elevatedHover?: boolean
+  shadow?: 'flat' | 'hover'
   color?:
-    | 'white'
-    | 'white-contrast'
+    | 'default'
+    | 'default-contrast'
     | 'muted'
     | 'muted-contrast'
     | 'dark'

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

diff --git a/src/plugins/components/card/index.ts b/src/plugins/components/card/index.ts
@@ -17,22 +17,22 @@ export default plugin(({ addComponents, theme }) => {
       //Base
       [`@apply relative w-${config.width} transition-${config.transition.property} duration-${config.transition.duration}`]:
         {},
-      //Color:white
-      '&.nui-card-white': {
+      //Color:default
+      '&.nui-card-default': {
         //Border
-        [`@apply border border-${config.color.white.border.light} dark:border-${config.color.white.border.dark}`]:
+        [`@apply border border-${config.color.default.border.light} dark:border-${config.color.default.border.dark}`]:
           {},
         //Background
-        [`@apply bg-${config.color.white.background.light} dark:bg-${config.color.white.background.dark}`]:
+        [`@apply bg-${config.color.default.background.light} dark:bg-${config.color.default.background.dark}`]:
           {},
       },
-      //Color:whiteContrast
-      '&.nui-card-white-contrast': {
+      //Color:defaultContrast
+      '&.nui-card-default-contrast': {
         //Border
-        [`@apply border border-${config.color.whiteContrast.border.light} dark:border-${config.color.whiteContrast.border.dark}`]:
+        [`@apply border border-${config.color.defaultContrast.border.light} dark:border-${config.color.defaultContrast.border.dark}`]:
           {},
         //Background
-        [`@apply bg-${config.color.whiteContrast.background.light} dark:bg-${config.color.whiteContrast.background.dark}`]:
+        [`@apply bg-${config.color.defaultContrast.background.light} dark:bg-${config.color.defaultContrast.background.dark}`]:
           {},
       },
       //Color:muted