feat(Message): add contrast colors

shuriken-ui · Feb 20, 2024 · 9b85f2c · 9b85f2c
1 parent c3bb575
commit 9b85f2c
Show file tree

Hide file tree

Showing 6 changed files with 270 additions and 0 deletions.
diff --git a/src/plugins/components/message/index.ts b/src/plugins/components/message/index.ts
@@ -127,6 +127,44 @@ export default plugin(({ addComponents, theme }) => {
             {},
         },
       },
+      //Color:default-contrast
+      '&.nui-message-default-contrast': {
+        //Border
+        [`@apply border-${config.color.defaultContrast.border.light} dark:border-${config.color.defaultContrast.border.dark}`]:
+          {},
+        //Background
+        [`@apply bg-${config.color.defaultContrast.background.light} dark:bg-${config.color.defaultContrast.background.dark}`]:
+          {},
+        //Icon:outer
+        '.nui-message-icon-outer': {
+          //Color
+          [`@apply text-${config.color.defaultContrast.outer.color.light} dark:text-${config.color.defaultContrast.outer.color.dark}`]:
+            {},
+          //Background
+          [`@apply bg-${config.color.defaultContrast.outer.background.light} dark:bg-${config.color.defaultContrast.outer.background.dark}`]:
+            {},
+        },
+        //Inner:text
+        '.nui-message-inner-text': {
+          [`@apply text-${config.color.defaultContrast.inner.color.light} dark:text-${config.color.defaultContrast.inner.color.dark}`]:
+            {},
+        },
+        //Message:close
+        '.nui-message-close': {
+          //Color
+          [`@apply text-${config.color.defaultContrast.close.color.light} dark:text-${config.color.defaultContrast.close.color.dark}`]:
+            {},
+          //Background:hover
+          [`@apply hover:enabled:bg-${config.color.defaultContrast.close.background.hover.light} dark:hover:enabled:bg-${config.color.defaultContrast.close.background.hover.dark}`]:
+            {},
+          //Background:focus
+          [`@apply focus-visible:bg-${config.color.defaultContrast.close.background.focus.light} dark:focus-visible:bg-${config.color.defaultContrast.close.background.focus.dark}`]:
+            {},
+          //Background:active
+          [`@apply active:enabled:bg-${config.color.defaultContrast.close.background.active.light} dark:active:enabled:bg-${config.color.defaultContrast.close.background.active.dark}`]:
+            {},
+        },
+      },
       //Color:muted
       '&.nui-message-muted': {
         //Border
@@ -165,6 +203,44 @@ export default plugin(({ addComponents, theme }) => {
             {},
         },
       },
+      //Color:muted-contrast
+      '&.nui-message-muted-contrast': {
+        //Border
+        [`@apply border-${config.color.mutedContrast.border.light} dark:border-${config.color.mutedContrast.border.dark}`]:
+          {},
+        //Background
+        [`@apply bg-${config.color.mutedContrast.background.light} dark:bg-${config.color.mutedContrast.background.dark}`]:
+          {},
+        //Icon:outer
+        '.nui-message-icon-outer': {
+          //Color
+          [`@apply text-${config.color.mutedContrast.outer.color.light} dark:text-${config.color.mutedContrast.outer.color.dark}`]:
+            {},
+          //Background
+          [`@apply bg-${config.color.mutedContrast.outer.background.light} dark:bg-${config.color.mutedContrast.outer.background.dark}`]:
+            {},
+        },
+        //Inner:text
+        '.nui-message-inner-text': {
+          [`@apply text-${config.color.mutedContrast.inner.color.light} dark:text-${config.color.mutedContrast.inner.color.dark}`]:
+            {},
+        },
+        //Message:close
+        '.nui-message-close': {
+          //Color
+          [`@apply text-${config.color.mutedContrast.close.color.light} dark:text-${config.color.mutedContrast.close.color.dark}`]:
+            {},
+          //Background:hover
+          [`@apply hover:enabled:bg-${config.color.mutedContrast.close.background.hover.light} dark:hover:enabled:bg-${config.color.mutedContrast.close.background.hover.dark}`]:
+            {},
+          //Background:focus
+          [`@apply focus-visible:bg-${config.color.mutedContrast.close.background.focus.light} dark:focus-visible:bg-${config.color.mutedContrast.close.background.focus.dark}`]:
+            {},
+          //Background:active
+          [`@apply active:enabled:bg-${config.color.mutedContrast.close.background.active.light} dark:active:enabled:bg-${config.color.mutedContrast.close.background.active.dark}`]:
+            {},
+        },
+      },
       //Color:primary
       '&.nui-message-primary': {
         //Border

diff --git a/src/plugins/components/message/message.config.ts b/src/plugins/components/message/message.config.ts
@@ -91,6 +91,52 @@ export const defaultConfig = {
         },
       },
     },
+    defaultContrast: {
+      background: {
+        light: 'white',
+        dark: 'muted-950',
+      },
+      border: {
+        light: 'muted-200',
+        dark: 'muted-800',
+      },
+      outer: {
+        background: {
+          light: 'muted-600',
+          dark: 'muted-900',
+        },
+        color: {
+          light: 'white',
+          dark: 'white',
+        },
+      },
+      inner: {
+        color: {
+          light: 'muted-500',
+          dark: 'muted-400',
+        },
+      },
+      close: {
+        color: {
+          light: 'muted-500',
+          dark: 'muted-500',
+        },
+        background: {
+          hover: {
+            light: 'muted-300/50',
+            dark: 'muted-500/30',
+          },
+          focus: {
+            light: 'muted-300/50',
+            dark: 'muted-500/30',
+          },
+          active: {
+            light: 'muted-300/20',
+            dark: 'muted-500/20',
+          },
+        },
+      },
+    },
     muted: {
       background: {
         light: 'muted-100',
@@ -137,6 +183,52 @@ export const defaultConfig = {
         },
       },
     },
+    mutedContrast: {
+      background: {
+        light: 'muted-100',
+        dark: 'muted-950',
+      },
+      border: {
+        light: 'muted-200',
+        dark: 'muted-800',
+      },
+      outer: {
+        background: {
+          light: 'muted-400',
+          dark: 'muted-900',
+        },
+        color: {
+          light: 'white',
+          dark: 'white',
+        },
+      },
+      inner: {
+        color: {
+          light: 'muted-500',
+          dark: 'muted-500',
+        },
+      },
+      close: {
+        color: {
+          light: 'muted-500',
+          dark: 'muted-500',
+        },
+        background: {
+          hover: {
+            light: 'muted-300/50',
+            dark: 'muted-500/30',
+          },
+          focus: {
+            light: 'muted-300/50',
+            dark: 'muted-500/30',
+          },
+          active: {
+            light: 'muted-300/20',
+            dark: 'muted-500/20',
+          },
+        },
+      },
+    },
     primary: {
       background: {
         light: 'primary-100',

diff --git a/src/plugins/components/message/message.doc.mdx b/src/plugins/components/message/message.doc.mdx
@@ -41,7 +41,9 @@ Messages can have different types. The following example shows the available typ
 <div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
   <div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-4xl">
     <Story of={MessageStories.TypeDefault} />
+    <Story of={MessageStories.TypeDefaultContrast} />
     <Story of={MessageStories.TypeMuted} />
+    <Story of={MessageStories.TypeMutedContrast} />
     <Story of={MessageStories.TypePrimary} />
     <Story of={MessageStories.TypeInfo} />
     <Story of={MessageStories.TypeSuccess} />
@@ -62,7 +64,9 @@ Messages can have a close button.
 <div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
   <div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-4xl">
     <Story of={MessageStories.ClosableDefault} />
+    <Story of={MessageStories.ClosableDefaultContrast} />
     <Story of={MessageStories.ClosableMuted} />
+    <Story of={MessageStories.ClosableMutedContrast} />
     <Story of={MessageStories.ClosablePrimary} />
     <Story of={MessageStories.ClosableInfo} />
     <Story of={MessageStories.ClosableSuccess} />
@@ -83,7 +87,9 @@ Messages have an icon slot you can use to display an icon.
 <div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
   <div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-4xl">
     <Story of={MessageStories.SlotIconDefault} />
+    <Story of={MessageStories.SlotIconDefaultContrast} />
     <Story of={MessageStories.SlotIconMuted} />
+    <Story of={MessageStories.SlotIconMutedContrast} />
     <Story of={MessageStories.SlotIconPrimary} />
     <Story of={MessageStories.SlotIconInfo} />
     <Story of={MessageStories.SlotIconSuccess} />

diff --git a/src/plugins/components/message/message.stories.ts b/src/plugins/components/message/message.stories.ts
@@ -18,7 +18,9 @@ const meta = {
       control: { type: 'select' },
       options: [
         'default',
+        'default-contrast',
         'muted',
+        'muted-contrast',
         'primary',
         'info',
         'success',
@@ -114,6 +116,15 @@ export const TypeDefault: Story = {
   },
 }
 
+export const TypeDefaultContrast: Story = {
+  name: 'Type: default-contrast',
+  args: {
+    type: 'default-contrast',
+    rounded: 'sm',
+    message: 'Some nice message text',
+  },
+}
+
 export const TypeMuted: Story = {
   name: 'Type: muted',
   args: {
@@ -123,6 +134,15 @@ export const TypeMuted: Story = {
   },
 }
 
+export const TypeMutedContrast: Story = {
+  name: 'Type: muted-contrast',
+  args: {
+    type: 'muted-contrast',
+    rounded: 'sm',
+    message: 'Some nice message text',
+  },
+}
+
 export const TypePrimary: Story = {
   name: 'Type: primary',
   args: {
@@ -180,6 +200,16 @@ export const ClosableDefault: Story = {
   },
 }
 
+export const ClosableDefaultContrast: Story = {
+  name: 'Closable: default-contrast',
+  args: {
+    type: 'default-contrast',
+    rounded: 'sm',
+    closable: true,
+    message: 'Some nice message text',
+  },
+}
+
 export const ClosableMuted: Story = {
   name: 'Closable: muted',
   args: {
@@ -190,6 +220,16 @@ export const ClosableMuted: Story = {
   },
 }
 
+export const ClosableMutedContrast: Story = {
+  name: 'Closable: muted-contrast',
+  args: {
+    type: 'muted-contrast',
+    rounded: 'sm',
+    closable: true,
+    message: 'Some nice message text',
+  },
+}
+
 export const ClosablePrimary: Story = {
   name: 'Closable: primary',
   args: {
@@ -268,6 +308,32 @@ export const SlotIconDefault: Story = {
   },
 }
 
+export const SlotIconDefaultContrast: Story = {
+  name: 'Slot icon: default-contrast',
+  args: {
+    type: 'default-contrast',
+    rounded: 'sm',
+    closable: true,
+    icon: html`
+      <svg
+        class="nui-message-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="currentColor"
+          fill-rule="evenodd"
+          d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1Zm-.5 5a1 1 0 1 0 0 2h.5a1 1 0 1 0 0-2h-.5ZM10 10a1 1 0 1 0 0 2h1v3h-1a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2h-1v-4a1 1 0 0 0-1-1h-2Z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    `,
+    message: 'Some nice message text',
+  },
+}
+
 export const SlotIconMuted: Story = {
   name: 'Slot icon: muted',
   args: {
@@ -294,6 +360,32 @@ export const SlotIconMuted: Story = {
   },
 }
 
+export const SlotIconMutedContrast: Story = {
+  name: 'Slot icon: muted-contrast',
+  args: {
+    type: 'muted-contrast',
+    rounded: 'sm',
+    closable: true,
+    icon: html`
+      <svg
+        class="nui-message-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="currentColor"
+          fill-rule="evenodd"
+          d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1Zm-.5 5a1 1 0 1 0 0 2h.5a1 1 0 1 0 0-2h-.5ZM10 10a1 1 0 1 0 0 2h1v3h-1a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2h-1v-4a1 1 0 0 0-1-1h-2Z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    `,
+    message: 'Some nice message text',
+  },
+}
+
 export const SlotIconPrimary: Story = {
   name: 'Slot icon: primary',
   args: {

diff --git a/src/plugins/components/message/message.types.ts b/src/plugins/components/message/message.types.ts
@@ -3,7 +3,9 @@ import type { PropertyVariant } from '~/types/utils'
 export interface MessageProps extends Record<string, unknown> {
   type?:
     | 'default'
+    | 'default-contrast'
     | 'muted'
+    | 'muted-contrast'
     | 'primary'
     | 'info'
     | 'success'

diff --git a/src/plugins/components/message/message.variants.ts b/src/plugins/components/message/message.variants.ts
@@ -10,7 +10,9 @@ export const rounded = {
 
 export const type = {
   default: 'nui-message-default',
+  'default-contrast': 'nui-message-default-contrast',
   muted: 'nui-message-muted',
+  'muted-contrast': 'nui-message-muted-contrast',
   primary: 'nui-message-primary',
   info: 'nui-message-info',
   success: 'nui-message-success',