feat(clerk-js): Update color logic utils to support CSS variable usage

.changeset/chubby-parts-try.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+TODO

packages/clerk-js/bundlewatch.config.json

@@ -1,10 +1,10 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "612kB" },
+    { "path": "./dist/clerk.js", "maxSize": "613.2kB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "72.2KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "115KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "110KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "110.6KB" },
     { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

packages/clerk-js/src/ui/customizables/parseVariables.ts

@@ -2,48 +2,47 @@ import type { Theme } from '@clerk/types';
 
 import { spaceScaleKeys } from '../foundations/sizes';
 import type { fontSizes, fontWeights } from '../foundations/typography';
-import { colorOptionToHslaAlphaScale, colorOptionToHslaLightnessScale } from '../utils/colorOptionToHslaScale';
 import { colors } from '../utils/colors';
+import { colorOptionToThemedAlphaScale, colorOptionToThemedLightnessScale } from '../utils/colors/scales';
 import { fromEntries } from '../utils/fromEntries';
 import { removeUndefinedProps } from '../utils/removeUndefinedProps';
 
 export const createColorScales = (theme: Theme) => {
   const variables = theme.variables || {};
 
-  const primaryScale = colorOptionToHslaLightnessScale(variables.colorPrimary, 'primary');
-  const primaryAlphaScale = colorOptionToHslaAlphaScale(primaryScale?.primary500, 'primaryAlpha');
-  const dangerScale = colorOptionToHslaLightnessScale(variables.colorDanger, 'danger');
-  const dangerAlphaScale = colorOptionToHslaAlphaScale(dangerScale?.danger500, 'dangerAlpha');
-  const successScale = colorOptionToHslaLightnessScale(variables.colorSuccess, 'success');
-  const successAlphaScale = colorOptionToHslaAlphaScale(successScale?.success500, 'successAlpha');
-  const warningScale = colorOptionToHslaLightnessScale(variables.colorWarning, 'warning');
-  const warningAlphaScale = colorOptionToHslaAlphaScale(warningScale?.warning500, 'warningAlpha');
+  const dangerScale = colorOptionToThemedLightnessScale(variables.colorDanger, 'danger');
+  const primaryScale = colorOptionToThemedLightnessScale(variables.colorPrimary, 'primary');
+  const successScale = colorOptionToThemedLightnessScale(variables.colorSuccess, 'success');
+  const warningScale = colorOptionToThemedLightnessScale(variables.colorWarning, 'warning');
+
+  const dangerAlphaScale = colorOptionToThemedAlphaScale(dangerScale?.danger500, 'dangerAlpha');
+  const neutralAlphaScale = colorOptionToThemedAlphaScale(variables.colorNeutral, 'neutralAlpha');
+  const primaryAlphaScale = colorOptionToThemedAlphaScale(primaryScale?.primary500, 'primaryAlpha');
+  const successAlphaScale = colorOptionToThemedAlphaScale(successScale?.success500, 'successAlpha');
+  const warningAlphaScale = colorOptionToThemedAlphaScale(warningScale?.warning500, 'warningAlpha');
 
   return removeUndefinedProps({
-    ...primaryScale,
-    ...primaryAlphaScale,
     ...dangerScale,
-    ...dangerAlphaScale,
+    ...primaryScale,
     ...successScale,
-    ...successAlphaScale,
     ...warningScale,
+    ...dangerAlphaScale,
+    ...neutralAlphaScale,
+    ...primaryAlphaScale,
+    ...successAlphaScale,
     ...warningAlphaScale,
-    ...colorOptionToHslaAlphaScale(variables.colorNeutral, 'neutralAlpha'),
     primaryHover: colors.adjustForLightness(primaryScale?.primary500),
-    colorTextOnPrimaryBackground: toHSLA(variables.colorTextOnPrimaryBackground),
-    colorText: toHSLA(variables.colorText),
-    colorTextSecondary: toHSLA(variables.colorTextSecondary) || colors.makeTransparent(variables.colorText, 0.35),
-    colorInputText: toHSLA(variables.colorInputText),
-    colorBackground: toHSLA(variables.colorBackground),
-    colorInputBackground: toHSLA(variables.colorInputBackground),
-    colorShimmer: toHSLA(variables.colorShimmer),
+    colorTextOnPrimaryBackground: colors.toHslaString(variables.colorTextOnPrimaryBackground),
+    colorText: colors.toHslaString(variables.colorText),
+    colorTextSecondary:
+      colors.toHslaString(variables.colorTextSecondary) || colors.makeTransparent(variables.colorText, 35),
+    colorInputText: colors.toHslaString(variables.colorInputText),
+    colorBackground: colors.toHslaString(variables.colorBackground),
+    colorInputBackground: colors.toHslaString(variables.colorInputBackground),
+    colorShimmer: colors.toHslaString(variables.colorShimmer),
   });
 };
 
-export const toHSLA = (str: string | undefined) => {
-  return str ? colors.toHslaString(str) : undefined;
-};
-
 export const createRadiiUnits = (theme: Theme) => {
   const { borderRadius } = theme.variables || {};
   if (borderRadius === undefined) {

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

@@ -1,4 +1,4 @@
-import { colorOptionToHslaAlphaScale } from '../utils/colorOptionToHslaScale';
+import { colorOptionToThemedAlphaScale } from '../utils/colors/scales';
 
 export const whiteAlpha = Object.freeze({
   whiteAlpha25: 'hsla(0, 0%, 100%, 0.02)',
@@ -65,7 +65,7 @@ export const colors = Object.freeze({
   primary900: '#1B171C',
   primaryHover: '#3B3C45', //primary 500 adjusted for lightness
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  ...colorOptionToHslaAlphaScale('#2F3037', 'primaryAlpha')!,
+  ...colorOptionToThemedAlphaScale('#2F3037', 'primaryAlpha')!,
   danger50: '#FEF2F2',
   danger100: '#FEE5E5',
   danger200: '#FECACA',
@@ -78,7 +78,7 @@ export const colors = Object.freeze({
   danger900: '#7F1D1D',
   danger950: '#450A0A',
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  ...colorOptionToHslaAlphaScale('#EF4444', 'dangerAlpha')!,
+  ...colorOptionToThemedAlphaScale('#EF4444', 'dangerAlpha')!,
   warning50: '#FFF6ED',
   warning100: '#FFEBD5',
   warning200: '#FED1AA',
@@ -91,7 +91,7 @@ export const colors = Object.freeze({
   warning900: '#7C2912',
   warning950: '#431207',
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  ...colorOptionToHslaAlphaScale('#F36B16', 'warningAlpha')!,
+  ...colorOptionToThemedAlphaScale('#F36B16', 'warningAlpha')!,
   success50: '#F0FDF2',
   success100: '#DCFCE2',
   success200: '#BBF7C6',
@@ -104,5 +104,5 @@ export const colors = Object.freeze({
   success900: '#145323',
   success950: '#052E0F',
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  ...colorOptionToHslaAlphaScale('#22C543', 'successAlpha')!,
+  ...colorOptionToThemedAlphaScale('#22C543', 'successAlpha')!,
 } as const);

packages/clerk-js/src/ui/utils/__tests__/cssSupports.test.ts

@@ -0,0 +1,42 @@
+import { clearCache, cssSupports } from '../cssSupports';
+
+// Mock CSS.supports
+const originalCSSSupports = CSS.supports;
+
+beforeAll(() => {
+  CSS.supports = jest.fn(feature => {
+    if (feature === 'color: hsl(from white h s l)') return true;
+    if (feature === 'color: color-mix(in srgb, white, black)') return false;
+    return false;
+  });
+});
+
+afterAll(() => {
+  CSS.supports = originalCSSSupports;
+});
+
+beforeEach(() => {
+  clearCache();
+  (CSS.supports as jest.Mock).mockClear();
+});
+
+describe('cssSupports', () => {
+  test('relativeColorSyntax should return true when supported', () => {
+    expect(cssSupports.relativeColorSyntax()).toBe(true);
+  });
+
+  test('colorMix should return false when not supported', () => {
+    expect(cssSupports.colorMix()).toBe(false);
+  });
+
+  test('modernColor should return true when at least one feature is supported', () => {
+    expect(cssSupports.modernColor()).toBe(true);
+  });
+
+  test('caching works correctly', () => {
+    cssSupports.relativeColorSyntax();
+    expect(CSS.supports).toHaveBeenCalledTimes(1);
+    cssSupports.relativeColorSyntax();
+    expect(CSS.supports).toHaveBeenCalledTimes(1); // Should not call again due to caching
+  });
+});