feat(clerk-js): Retheme primary, alpha and danger color scales (#2302)

clerk · Dec 10, 2023 · 45f79ea · 45f79ea
1 parent 8f193ae
commit 45f79ea
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 20 deletions.
diff --git a/.changeset/hip-eagles-clap.md b/.changeset/hip-eagles-clap.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui.retheme/foundations/colors.ts b/packages/clerk-js/src/ui.retheme/foundations/colors.ts
@@ -2,28 +2,36 @@ export const whiteAlpha = Object.freeze({
   whiteAlpha20: 'hsla(0, 0%, 100%, 0.02)',
   whiteAlpha50: 'hsla(0, 0%, 100%, 0.04)',
   whiteAlpha100: 'hsla(0, 0%, 100%, 0.06)',
+  whiteAlpha150: 'hsla(0, 0%, 100%, 0.07)',
   whiteAlpha200: 'hsla(0, 0%, 100%, 0.08)',
   whiteAlpha300: 'hsla(0, 0%, 100%, 0.16)',
   whiteAlpha400: 'hsla(0, 0%, 100%, 0.24)',
   whiteAlpha500: 'hsla(0, 0%, 100%, 0.36)',
   whiteAlpha600: 'hsla(0, 0%, 100%, 0.48)',
   whiteAlpha700: 'hsla(0, 0%, 100%, 0.64)',
+  whiteAlpha750: 'hsla(0, 0%, 100%, 0.72)',
   whiteAlpha800: 'hsla(0, 0%, 100%, 0.80)',
+  whiteAlpha850: 'hsla(0, 0%, 100%, 0.86)',
   whiteAlpha900: 'hsla(0, 0%, 100%, 0.92)',
+  whiteAlpha950: 'hsla(0, 0%, 100%, 0.96)',
 } as const);
 
 export const blackAlpha = Object.freeze({
   blackAlpha20: 'hsla(0, 0%, 0%, 0.02)',
   blackAlpha50: 'hsla(0, 0%, 0%, 0.04)',
   blackAlpha100: 'hsla(0, 0%, 0%, 0.06)',
+  blackAlpha150: 'hsla(0, 0%, 0%, 0.07)',
   blackAlpha200: 'hsla(0, 0%, 0%, 0.08)',
   blackAlpha300: 'hsla(0, 0%, 0%, 0.16)',
   blackAlpha400: 'hsla(0, 0%, 0%, 0.24)',
   blackAlpha500: 'hsla(0, 0%, 0%, 0.36)',
   blackAlpha600: 'hsla(0, 0%, 0%, 0.48)',
   blackAlpha700: 'hsla(0, 0%, 0%, 0.64)',
+  blackAlpha750: 'hsla(0, 0%, 0%, 0.72)',
   blackAlpha800: 'hsla(0, 0%, 0%, 0.80)',
+  blackAlpha850: 'hsla(0, 0%, 0%, 0.86)',
   blackAlpha900: 'hsla(0, 0%, 0%, 0.92)',
+  blackAlpha950: 'hsla(0, 0%, 0%, 0.96)',
 } as const);
 
 export const colors = Object.freeze({
@@ -45,26 +53,27 @@ export const colors = Object.freeze({
   transparent: 'transparent',
   white: 'white',
   black: 'black',
-  primary50: '#F7F7F8',
-  primary100: '#EEEEF0',
-  primary200: '#D9D9DE',
-  primary300: '#B7B8C2',
-  primary400: '#9394A1',
-  primary500: '#747686',
-  primary600: '#5E5F6E',
-  primary700: '#42434D',
-  primary800: '#2F3037',
-  primary900: '#212126',
-  danger50: '#FEF3F2',
-  danger100: '#FEE4E2',
-  danger200: '#FECDCA',
-  danger300: '#FDA29B',
-  danger400: '#F97066',
-  danger500: '#F04438',
-  danger600: '#D92D20',
-  danger700: '#B42318',
-  danger800: '#912018',
-  danger900: '#7A271A',
+  primary50: '#B9BDBC',
+  primary100: '#9EA1A2',
+  primary200: '#828687',
+  primary300: '#66696D',
+  primary400: '#4B4D52',
+  primary500: '#2F3037',
+  primary600: '#2A2930',
+  primary700: '#25232A',
+  primary800: '#201D23',
+  primary900: '#1B171C',
+  danger50: '#FEF2F2',
+  danger100: '#FEE5E5',
+  danger200: '#FECACA',
+  danger300: '#FCA5A5',
+  danger400: '#F87171',
+  danger500: '#EF4444',
+  danger600: '#DC2626',
+  danger700: '#B91C1C',
+  danger800: '#991B1B',
+  danger900: '#7F1D1D',
+  danger950: '#450A0A',
   warning50: '#FFFAEB',
   warning100: '#FEF0C7',
   warning200: '#FEDF89',