feat(Card): add new colors

shuriken-ui · Feb 19, 2024 · d17f799 · d17f799
1 parent 081791e
commit d17f799
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 0 deletions.
diff --git a/src/plugins/components/card/card.config.ts b/src/plugins/components/card/card.config.ts
@@ -54,6 +54,26 @@ export const defaultConfig = {
         dark: 'muted-800',
       },
     },
+    dark: {
+      background: {
+        light: 'muted-900',
+        dark: 'muted-100',
+      },
+      border: {
+        light: 'muted-800',
+        dark: 'muted-50',
+      },
+    },
+    black: {
+      background: {
+        light: 'black',
+        dark: 'white',
+      },
+      border: {
+        light: 'black',
+        dark: 'white',
+      },
+    },
     primary: {
       background: {
         light: 'primary-500/10',

diff --git a/src/plugins/components/card/card.doc.mdx b/src/plugins/components/card/card.doc.mdx
@@ -33,6 +33,8 @@ Cards can have different colors. The below example shows all the available color
     <Story of={CardStories.ColorSuccess} />
     <Story of={CardStories.ColorWarning} />
     <Story of={CardStories.ColorDanger} />
+    <Story of={CardStories.ColorDark} />
+    <Story of={CardStories.ColorBlack} />
   </div>
 </div>
 

diff --git a/src/plugins/components/card/card.stories.ts b/src/plugins/components/card/card.stories.ts
@@ -18,6 +18,8 @@ const meta = {
         'white-contrast',
         'muted',
         'muted-contrast',
+        'dark',
+        'black',
         'primary',
         'info',
         'success',
@@ -160,6 +162,48 @@ export const ColorMutedContrast: Story = {
 }
 // #endregion
 
+// #region Color: dark
+export const ColorDark: Story = {
+  name: 'Color: dark',
+  args: {
+    // set default values used for UI preview
+    color: 'dark',
+    children: html`
+      <h6 class="nui-heading nui-weight-medium text-white dark:text-muted-900">
+        Iam a card title
+      </h6>
+      <p
+        class="nui-paragraph nui-paragraph-xs text-muted-200 dark:text-muted-500"
+      >
+        Iam a nice and lengthy card subtitle
+      </p>
+    `,
+    style: 'padding: 1.5rem; max-width: 340px;',
+  },
+}
+// #endregion
+
+// #region Color: black
+export const ColorBlack: Story = {
+  name: 'Color: black',
+  args: {
+    // set default values used for UI preview
+    color: 'black',
+    children: html`
+      <h6 class="nui-heading nui-weight-medium text-white dark:text-muted-900">
+        Iam a card title
+      </h6>
+      <p
+        class="nui-paragraph nui-paragraph-xs text-muted-200 dark:text-muted-500"
+      >
+        Iam a nice and lengthy card subtitle
+      </p>
+    `,
+    style: 'padding: 1.5rem; max-width: 340px;',
+  },
+}
+// #endregion
+
 // #region Color: primary
 export const ColorPrimary: Story = {
   name: 'Color: primary',

diff --git a/src/plugins/components/card/card.types.ts b/src/plugins/components/card/card.types.ts
@@ -9,6 +9,8 @@ export interface CardProps extends Record<string, unknown> {
     | 'white-contrast'
     | 'muted'
     | 'muted-contrast'
+    | 'dark'
+    | 'black'
     | 'primary'
     | 'info'
     | 'success'

diff --git a/src/plugins/components/card/card.variants.ts b/src/plugins/components/card/card.variants.ts
@@ -12,6 +12,8 @@ export const color = {
   'white-contrast': 'nui-card-white-contrast',
   muted: 'nui-card-muted',
   'muted-contrast': 'nui-card-muted-contrast',
+  dark: 'nui-card-dark',
+  black: 'nui-card-black',
   primary: 'nui-card-primary',
   info: 'nui-card-info',
   success: 'nui-card-success',

diff --git a/src/plugins/components/card/index.ts b/src/plugins/components/card/index.ts
@@ -53,6 +53,24 @@ export default plugin(({ addComponents, theme }) => {
         [`@apply bg-${config.color.mutedContrast.background.light} dark:bg-${config.color.mutedContrast.background.dark}`]:
           {},
       },
+      //Color:dark
+      '&.nui-card-dark': {
+        //Border
+        [`@apply border border-${config.color.dark.border.light} dark:border-${config.color.dark.border.dark}`]:
+          {},
+        //Background
+        [`@apply bg-${config.color.dark.background.light} dark:bg-${config.color.dark.background.dark}`]:
+          {},
+      },
+      //Color:black
+      '&.nui-card-black': {
+        //Border
+        [`@apply border border-${config.color.black.border.light} dark:border-${config.color.black.border.dark}`]:
+          {},
+        //Background
+        [`@apply bg-${config.color.black.background.light} dark:bg-${config.color.black.background.dark}`]:
+          {},
+      },
       //Color:primary
       '&.nui-card-primary': {
         //Border