fix(clerk-js): Color typing

Author: tmilewski

packages/clerk-js/src/ui/foundations/colors.ts

@@ -1,42 +1,50 @@
 import { createAlphaScaleWithTransparentize, transparentize } from '../utils/colorMix';
 
-export const whiteAlpha = Object.freeze({
-  whiteAlpha25: transparentize('white', '2%'),
-  whiteAlpha50: transparentize('white', '3%'),
-  whiteAlpha100: transparentize('white', '7%'),
-  whiteAlpha150: transparentize('white', '11%'),
-  whiteAlpha200: transparentize('white', '15%'),
-  whiteAlpha300: transparentize('white', '28%'),
-  whiteAlpha400: transparentize('white', '41%'),
-  whiteAlpha500: transparentize('white', '53%'),
-  whiteAlpha600: transparentize('white', '62%'),
-  whiteAlpha700: transparentize('white', '73%'),
-  whiteAlpha750: transparentize('white', '78%'),
-  whiteAlpha800: transparentize('white', '81%'),
-  whiteAlpha850: transparentize('white', '84%'),
-  whiteAlpha900: transparentize('white', '87%'),
-  whiteAlpha950: transparentize('white', '92%'),
-} as const);
+type ColorScale<Prefix extends string> = {
+  [K in `${Prefix}${'50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950'}`]: string;
+};
 
-export const neutralAlpha = Object.freeze({
-  neutralAlpha25: transparentize('black', '2%'),
-  neutralAlpha50: transparentize('black', '3%'),
-  neutralAlpha100: transparentize('black', '7%'),
-  neutralAlpha150: transparentize('black', '11%'),
-  neutralAlpha200: transparentize('black', '15%'),
-  neutralAlpha300: transparentize('black', '28%'),
-  neutralAlpha400: transparentize('black', '41%'),
-  neutralAlpha500: transparentize('black', '53%'),
-  neutralAlpha600: transparentize('black', '62%'),
-  neutralAlpha700: transparentize('black', '73%'),
-  neutralAlpha750: transparentize('black', '78%'),
-  neutralAlpha800: transparentize('black', '81%'),
-  neutralAlpha850: transparentize('black', '84%'),
-  neutralAlpha900: transparentize('black', '87%'),
-  neutralAlpha950: transparentize('black', '92%'),
-} as const);
+// Create alpha scales separately to preserve types
+export const whiteAlpha = createAlphaScaleWithTransparentize('white', 'whiteAlpha');
+export const neutralAlpha = createAlphaScaleWithTransparentize('black', 'neutralAlpha');
+
+const primaryAlpha = createAlphaScaleWithTransparentize('#2F3037', 'primaryAlpha');
+const dangerAlpha = createAlphaScaleWithTransparentize('#EF4444', 'dangerAlpha');
+const warningAlpha = createAlphaScaleWithTransparentize('#F36B16', 'warningAlpha');
+const successAlpha = createAlphaScaleWithTransparentize('#22C543', 'successAlpha');
+
+// Define the base colors object type
+type BaseColors = {
+  avatarBorder: string;
+  avatarBackground: string;
+  modalBackdrop: string;
+  colorBackground: string;
+  colorInputBackground: string;
+  colorText: string;
+  colorTextSecondary: string;
+  colorInputText: string;
+  colorTextOnPrimaryBackground: string;
+  colorShimmer: string;
+  transparent: string;
+  white: string;
+  black: string;
+  primaryHover: string;
+};
+
+// Combine all types
+type Colors = BaseColors &
+  ColorScale<'primary'> &
+  ColorScale<'danger'> &
+  ColorScale<'warning'> &
+  ColorScale<'success'> &
+  typeof neutralAlpha &
+  typeof whiteAlpha &
+  typeof primaryAlpha &
+  typeof dangerAlpha &
+  typeof warningAlpha &
+  typeof successAlpha;
 
-export const colors = Object.freeze({
+export const colors: Colors = Object.freeze({
   avatarBorder: neutralAlpha.neutralAlpha200,
   avatarBackground: neutralAlpha.neutralAlpha400,
   modalBackdrop: neutralAlpha.neutralAlpha700,
@@ -63,8 +71,9 @@ export const colors = Object.freeze({
   primary700: '#25232A',
   primary800: '#201D23',
   primary900: '#1B171C',
-  primaryHover: '#3B3C45', //primary 500 adjusted for lightness
-  ...createAlphaScaleWithTransparentize('#2F3037', 'primaryAlpha'),
+  primary950: '#0F0D12',
+  primaryHover: '#3B3C45', // primary 500 adjusted for lightness
+  ...primaryAlpha,
   danger50: '#FEF2F2',
   danger100: '#FEE5E5',
   danger200: '#FECACA',
@@ -76,7 +85,7 @@ export const colors = Object.freeze({
   danger800: '#991B1B',
   danger900: '#7F1D1D',
   danger950: '#450A0A',
-  ...createAlphaScaleWithTransparentize('#EF4444', 'dangerAlpha'),
+  ...dangerAlpha,
   warning50: '#FFF6ED',
   warning100: '#FFEBD5',
   warning200: '#FED1AA',
@@ -88,7 +97,7 @@ export const colors = Object.freeze({
   warning800: '#9A2F12',
   warning900: '#7C2912',
   warning950: '#431207',
-  ...createAlphaScaleWithTransparentize('#F36B16', 'warningAlpha'),
+  ...warningAlpha,
   success50: '#F0FDF2',
   success100: '#DCFCE2',
   success200: '#BBF7C6',
@@ -100,5 +109,5 @@ export const colors = Object.freeze({
   success800: '#166527',
   success900: '#145323',
   success950: '#052E0F',
-  ...createAlphaScaleWithTransparentize('#22C543', 'successAlpha'),
+  ...successAlpha,
 } as const);

packages/clerk-js/src/ui/primitives/Badge.tsx

@@ -54,7 +54,6 @@ const { applyVariants, filterProps } = createVariants(theme => ({
   },
 }));
 
-// @ts-ignore
 export type BadgeProps = PropsOfComponent<typeof Flex> & StyleVariants<typeof applyVariants>;
 
 export const Badge = (props: BadgeProps) => {

packages/clerk-js/src/ui/utils/colorMix.ts

@@ -4,6 +4,39 @@
  */
 type Percentage = `${number}%`;
 
+/**
+ * A default key for a shade of a color/lightness/etc
+ * @example '25'
+ */
+type DefaultShadeKey =
+  | '25'
+  | '50'
+  | '100'
+  | '150'
+  | '200'
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '700'
+  | '750'
+  | '800'
+  | '850'
+  | '900'
+  | '950';
+
+/**
+ * A key for a shade of an alpha color
+ * @example '25'
+ */
+type AlphaShadeKey = DefaultShadeKey;
+
+/**
+ * A key for a shade of a lightness color
+ * @example '25'
+ */
+type LightnessShadeKey = DefaultShadeKey;
+
 /**
  * Mix a color with a color tint
  * @param color - The color to mix
@@ -48,7 +81,7 @@ export function darken(color: string, percentage: Percentage) {
 /**
  * A map of alpha shades to percentages
  */
-const ALPHA_SHADES_MAP: Record<string, string> = {
+const ALPHA_SHADES_MAP: Record<AlphaShadeKey, Percentage> = {
   '25': '2%',
   '50': '3%',
   '100': '7%',
@@ -64,7 +97,7 @@ const ALPHA_SHADES_MAP: Record<string, string> = {
   '850': '84%',
   '900': '87%',
   '950': '92%',
-};
+} as const;
 
 /**
  * Create an alpha scale with transparentize
@@ -75,19 +108,16 @@ const ALPHA_SHADES_MAP: Record<string, string> = {
 export function createAlphaScaleWithTransparentize<P extends string>(
   baseColor: string,
   prefix: P,
-): Record<`${P}${keyof typeof ALPHA_SHADES_MAP}`, string> {
-  const scale = {} as Record<`${P}${keyof typeof ALPHA_SHADES_MAP}`, string>;
-  for (const shadeKey in ALPHA_SHADES_MAP) {
-    if (Object.prototype.hasOwnProperty.call(ALPHA_SHADES_MAP, shadeKey)) {
-      const percentage = ALPHA_SHADES_MAP[shadeKey];
-      // @ts-expect-error - TODO: align percentage type
-      scale[`${prefix}${shadeKey}`] = transparentize(baseColor, percentage);
-    }
-  }
-  return scale;
+): Record<`${P}${AlphaShadeKey}`, string> {
+  return Object.fromEntries(
+    Object.entries(ALPHA_SHADES_MAP).map(([shadeKey, percentage]) => [
+      `${prefix}${shadeKey}`,
+      transparentize(baseColor, percentage),
+    ]),
+  ) as Record<`${P}${AlphaShadeKey}`, string>;
 }
 
-const LIGHTNESS_SHADES_DEF: Record<string, { type: 'lighten' | 'darken' | 'base'; amount: Percentage }> = {
+const LIGHTNESS_SHADES_DEF: Record<LightnessShadeKey, { type: 'lighten' | 'darken' | 'base'; amount: Percentage }> = {
   '25': { type: 'lighten', amount: '92%' },
   '50': { type: 'lighten', amount: '85%' },
   '100': { type: 'lighten', amount: '70%' },
@@ -105,7 +135,7 @@ const LIGHTNESS_SHADES_DEF: Record<string, { type: 'lighten' | 'darken' | 'base'
   '950': { type: 'darken', amount: '92%' },
 };
 
-const ALL_LIGHTNESS_SHADE_KEYS = Object.keys(LIGHTNESS_SHADES_DEF);
+const ALL_LIGHTNESS_SHADE_KEYS = Object.keys(LIGHTNESS_SHADES_DEF) as LightnessShadeKey[];
 
 /**
  * Creates a full lightness color scale (shades 25-950) using color-mix lighten/darken.
@@ -114,15 +144,15 @@ const ALL_LIGHTNESS_SHADE_KEYS = Object.keys(LIGHTNESS_SHADES_DEF);
  * @returns A prefixed color scale object, or undefined if colorOption is undefined.
  */
 export function createColorMixLightnessScale<P extends string>(
-  colorOption: string | Partial<Record<keyof typeof LIGHTNESS_SHADES_DEF, string>> | undefined,
+  colorOption: string | Partial<Record<LightnessShadeKey, string>> | undefined,
   prefix: P,
-): Record<`${P}${keyof typeof LIGHTNESS_SHADES_DEF}`, string> | undefined {
+): Record<`${P}${LightnessShadeKey}`, string> | undefined {
   if (!colorOption) {
     return undefined;
   }
 
   let baseFor500: string;
-  const userProvidedShades: Partial<Record<keyof typeof LIGHTNESS_SHADES_DEF, string>> = {};
+  const userProvidedShades: Partial<Record<LightnessShadeKey, string>> = {};
 
   if (typeof colorOption === 'string') {
     baseFor500 = colorOption;
@@ -140,7 +170,7 @@ export function createColorMixLightnessScale<P extends string>(
     }
   }
 
-  const generatedScale: Partial<Record<keyof typeof LIGHTNESS_SHADES_DEF, string>> = {};
+  const generatedScale: Partial<Record<LightnessShadeKey, string>> = {};
   for (const shadeKey of ALL_LIGHTNESS_SHADE_KEYS) {
     const definition = LIGHTNESS_SHADES_DEF[shadeKey];
     switch (definition.type) {
@@ -158,7 +188,7 @@ export function createColorMixLightnessScale<P extends string>(
 
   const mergedScale = { ...generatedScale, ...userProvidedShades };
 
-  const resultScale = {} as Record<`${P}${keyof typeof LIGHTNESS_SHADES_DEF}`, string>;
+  const resultScale = {} as Record<`${P}${LightnessShadeKey}`, string>;
   for (const key of ALL_LIGHTNESS_SHADE_KEYS) {
     if (mergedScale[key]) {
       resultScale[`${prefix}${key}`] = mergedScale[key];

packages/clerk-js/src/ui/utils/colors.ts

@@ -256,7 +256,7 @@ const hslaColorToHslaString = ({ h, s, l, a }: HslaColor): HslaColorString => {
 
 const parse = (str: string): ParsedResult => {
   // TODO(Colors): This is a temporary fix to allow for custom colors to be passed in as variables
-  return str;
+  return str as unknown as ParsedResult;
   const prefix = str.substr(0, 3).toLowerCase();
   let res;
   if (prefix === 'hsl') {