feat(Tag): add new colors and contrast colors

shuriken-ui · Feb 19, 2024 · 0e3327a · 0e3327a
1 parent 05eaee7
commit 0e3327a
Show file tree

Hide file tree

Showing 5 changed files with 375 additions and 0 deletions.
diff --git a/src/plugins/components/tag/tag.config.ts b/src/plugins/components/tag/tag.config.ts
@@ -52,6 +52,25 @@ export const defaultConfig = {
           size: 'xl',
         },
       },
+      defaultContrast: {
+        font: {
+          color: {
+            light: 'muted-600',
+            dark: 'muted-100',
+          },
+        },
+        background: {
+          light: 'white',
+          dark: 'muted-950',
+        },
+        border: {
+          light: 'muted-300',
+          dark: 'muted-800',
+        },
+        shadow: {
+          size: 'xl',
+        },
+      },
       muted: {
         font: {
           color: {
@@ -67,6 +86,66 @@ export const defaultConfig = {
           size: 'xl',
         },
       },
+      mutedContrast: {
+        font: {
+          color: {
+            light: 'muted-500',
+            dark: 'muted-200',
+          },
+        },
+        background: {
+          light: 'muted-100',
+          dark: 'muted-950',
+        },
+        shadow: {
+          size: 'xl',
+        },
+      },
+      light: {
+        font: {
+          color: {
+            light: 'muted-500',
+            dark: 'muted-100',
+          },
+        },
+        background: {
+          light: 'muted-200',
+          dark: 'muted-700',
+        },
+        shadow: {
+          size: 'xl',
+        },
+      },
+      dark: {
+        font: {
+          color: {
+            light: 'muted-100',
+            dark: 'muted-900',
+          },
+        },
+        background: {
+          light: 'muted-900',
+          dark: 'muted-100',
+        },
+        shadow: {
+          size: 'xl',
+        },
+      },
+      black: {
+        font: {
+          color: {
+            light: 'white',
+            dark: 'black',
+          },
+        },
+        background: {
+          light: 'black',
+          dark: 'white',
+        },
+        shadow: {
+          size: 'xl',
+        },
+      },
       primary: {
         font: {
           color: {
@@ -154,6 +233,81 @@ export const defaultConfig = {
       },
     },
     pastel: {
+      default: {
+        font: {
+          color: {
+            light: 'muted-500',
+            dark: 'muted-100',
+          },
+        },
+        background: {
+          light: 'muted-100',
+          dark: 'muted-100/10',
+        },
+        shadow: {
+          size: 'xl',
+        },
+      },
+      muted: {
+        font: {
+          color: {
+            light: 'muted-500',
+            dark: 'muted-200',
+          },
+        },
+        background: {
+          light: 'muted-100',
+          dark: 'muted-800',
+        },
+        shadow: {
+          size: 'xl',
+        },
+      },
+      light: {
+        font: {
+          color: {
+            light: 'muted-800',
+            dark: 'muted-100',
+          },
+        },
+        background: {
+          light: 'white/30',
+          dark: 'white/20',
+        },
+        shadow: {
+          size: 'xl',
+        },
+      },
+      dark: {
+        font: {
+          color: {
+            light: 'muted-100',
+            dark: 'muted-900',
+          },
+        },
+        background: {
+          light: 'muted-900',
+          dark: 'muted-100',
+        },
+        shadow: {
+          size: 'xl',
+        },
+      },
+      black: {
+        font: {
+          color: {
+            light: 'white',
+            dark: 'black',
+          },
+        },
+        background: {
+          light: 'black',
+          dark: 'white',
+        },
+        shadow: {
+          size: 'xl',
+        },
+      },
       primary: {
         background: {
           light: 'primary-500/20',
@@ -216,6 +370,86 @@ export const defaultConfig = {
       },
     },
     outline: {
+      default: {
+        background: {
+          light: 'transparent',
+          dark: 'transparent',
+        },
+        border: {
+          light: 'muted-500',
+          dark: 'muted-100',
+        },
+        font: {
+          color: {
+            light: 'muted-500',
+            dark: 'muted-100',
+          },
+        },
+      },
+      muted: {
+        background: {
+          light: 'transparent',
+          dark: 'transparent',
+        },
+        border: {
+          light: 'muted-400',
+          dark: 'muted-100',
+        },
+        font: {
+          color: {
+            light: 'muted-400',
+            dark: 'muted-100',
+          },
+        },
+      },
+      light: {
+        background: {
+          light: 'transparent',
+          dark: 'transparent',
+        },
+        border: {
+          light: 'muted-100',
+          dark: 'muted-100',
+        },
+        font: {
+          color: {
+            light: 'muted-100',
+            dark: 'muted-100',
+          },
+        },
+      },
+      dark: {
+        background: {
+          light: 'transparent',
+          dark: 'transparent',
+        },
+        border: {
+          light: 'muted-900',
+          dark: 'muted-100',
+        },
+        font: {
+          color: {
+            light: 'muted-900',
+            dark: 'muted-100',
+          },
+        },
+      },
+      black: {
+        background: {
+          light: 'transparent',
+          dark: 'transparent',
+        },
+        border: {
+          light: 'black',
+          dark: 'white',
+        },
+        font: {
+          color: {
+            light: 'black',
+            dark: 'white',
+          },
+        },
+      },
       primary: {
         background: {
           light: 'transparent',

diff --git a/src/plugins/components/tag/tag.doc.mdx b/src/plugins/components/tag/tag.doc.mdx
@@ -55,6 +55,9 @@ Tags can have different colors. Below are examples of solid colors.
   <Story of={TagStories.SolidSuccess} />
   <Story of={TagStories.SolidWarning} />
   <Story of={TagStories.SolidDanger} />
+  <Story of={TagStories.SolidLight} />
+  <Story of={TagStories.SolidDark} />
+  <Story of={TagStories.SolidBlack} />
 </div>
 
 <br />
@@ -71,6 +74,9 @@ Tags can have different colors. Below are examples of pastel colors.
   <Story of={TagStories.PastelSuccess} />
   <Story of={TagStories.PastelWarning} />
   <Story of={TagStories.PastelDanger} />
+  <Story of={TagStories.PastelLight} />
+  <Story of={TagStories.PastelDark} />
+  <Story of={TagStories.PastelBlack} />
 </div>
 
 <br />
@@ -87,6 +93,9 @@ Tags can have different colors. Below are examples of outline colors.
   <Story of={TagStories.OutlineSuccess} />
   <Story of={TagStories.OutlineWarning} />
   <Story of={TagStories.OutlineDanger} />
+  <Story of={TagStories.OutlineLight} />
+  <Story of={TagStories.OutlineDark} />
+  <Story of={TagStories.OutlineBlack} />
 </div>
 
 <br />