fix(clerk-js): Also align new shades with colorAlphaShade (#2465)

clerk · Jan 3, 2024 · 7af77f6 · 7af77f6
1 parent 2bcf63a
commit 7af77f6
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/.changeset/olive-bags-reflect.md b/.changeset/olive-bags-reflect.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/customizables/colorOptionToHslaScale.ts b/packages/clerk-js/src/ui/customizables/colorOptionToHslaScale.ts
@@ -4,24 +4,29 @@ import { colors, fromEntries } from '../utils';
 
 type InternalColorScale<T> = ColorScale<T> & Partial<Record<20, T>>;
 
-const LIGHT_SHADES = ['50', '100', '200', '300', '400'].reverse();
-const DARK_SHADES = ['600', '700', '800', '900'];
+const LIGHT_SHADES = ['25', '50', '100', '150', '200', '300', '400'].reverse();
+const DARK_SHADES = ['600', '700', '750', '800', '850', '900', '950'];
 
 const TARGET_L_50_SHADE = 97;
 const TARGET_L_900_SHADE = 12;
 
 function createEmptyColorScale<T = undefined>(): InternalColorScale<T | undefined> {
   return {
+    '25': undefined,
     '50': undefined,
     '100': undefined,
+    '150': undefined,
     '200': undefined,
     '300': undefined,
     '400': undefined,
     '500': undefined,
     '600': undefined,
     '700': undefined,
+    '750': undefined,
     '800': undefined,
+    '850': undefined,
     '900': undefined,
+    '950': undefined,
   };
 }
 

diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
@@ -24,7 +24,22 @@ interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudos {}
 
 type UserDefinedStyle = string | CSSObject;
 
-type Shade = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+type Shade =
+  | '25'
+  | '50'
+  | '100'
+  | '150'
+  | '200'
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '700'
+  | '750'
+  | '800'
+  | '850'
+  | '900'
+  | '950';
 export type ColorScale<T = string> = Record<Shade, T>;
 export type AlphaColorScale<T = string> = Record<'20' | Shade, T>;