diff --git a/.changeset/warm-pens-tickle.md b/.changeset/warm-pens-tickle.md
new file mode 100644
index 00000000000..9e8e2deda51
--- /dev/null
+++ b/.changeset/warm-pens-tickle.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+[TODO]
diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts
index 707b52b1674..e2e66d09256 100644
--- a/packages/clerk-js/sandbox/app.ts
+++ b/packages/clerk-js/sandbox/app.ts
@@ -345,7 +345,7 @@ void (async () => {
       signUpUrl: '/sign-up',
     });
     renderCurrentRoute();
-    updateVariables();
+    // updateVariables(); // Commented out as it overrides css variables
     updateOtherOptions();
   } else {
     console.error(`Unknown route: "${route}".`);
diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html
index c89ff47aa73..281cda1714e 100644
--- a/packages/clerk-js/sandbox/template.html
+++ b/packages/clerk-js/sandbox/template.html
@@ -7,6 +7,27 @@
       name="viewport"
       content="width=device-width,initial-scale=1"
     />
+    <style>
+      :root {
+        --clerk-primary: #2F3037; /* default: #2F3037 */
+        --clerk-foreground: #212126; /* default: #212126 */
+        --clerk-background: white; /* default: white */
+        --clerk-primary-foreground: white; /* default: white */
+        --clerk-secondary-foreground: #747686; /* default: #747686 */
+        --clerk-danger: #EF4444; /* default: #EF4444 */
+        --clerk-input: white; /* default: white */
+        --clerk-neutral: black; /* default: black */
+
+        --clerk-line-height: normal; /* default: normal */
+        --clerk-spacing: 1rem; /* default: 1rem */
+        --clerk-border-width: 1px; /* default: 1px */
+        --clerk-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* default: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" */
+        --clerk-font-size: 0.8125rem; /* default: 0.8125rem */
+        --clerk-font-weight: 400; /* default: 400 */
+        --clerk-letter-spacing: normal; /* default: normal */
+        --clerk-border-radius: 0.375rem; /* default: 0.375rem */
+      }
+    </style>
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
       tailwind.config = {
diff --git a/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx b/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx
index 6e170671460..b4d14c04d6c 100644
--- a/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx
+++ b/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx
@@ -13,8 +13,7 @@ import { Tooltip } from '@/ui/elements/Tooltip';
 import { LockDottedCircle } from '@/ui/icons';
 import { Textarea } from '@/ui/primitives';
 import type { ThemableCssProp } from '@/ui/styledSystem';
-import { common } from '@/ui/styledSystem';
-import * as utils from '@/ui/utils';
+import { colorMix } from '@/ui/utils/colorMix';
 
 export function OAuthConsentInternal() {
   const { scopes, oAuthApplicationName, oAuthApplicationLogoUrl, redirectUrl, onDeny, onAllow } =
@@ -121,10 +120,7 @@ export function OAuthConsentInternal() {
             <Box
               sx={t => ({
                 padding: t.space.$3,
-                background: common.mergedColorsBackground(
-                  utils.colors.setAlpha(t.colors.$colorBackground, 1),
-                  t.colors.$neutralAlpha50,
-                ),
+                backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
               })}
             >
               <Text
@@ -333,10 +329,7 @@ function ConnectionIcon({ size = 'md', sx }: { size?: 'sm' | 'md'; sx?: Themable
     <Box
       sx={t => [
         {
-          background: common.mergedColorsBackground(
-            utils.colors.setAlpha(t.colors.$colorBackground, 1),
-            t.colors.$neutralAlpha50,
-          ),
+          backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
           borderRadius: t.radii.$circle,
           borderWidth: t.borderWidths.$normal,
           borderStyle: t.borderStyles.$solid,
diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index 90439286110..1c283b9b182 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import { Switch } from '@/ui/elements/Switch';
 import { Tooltip } from '@/ui/elements/Tooltip';
+import { colorMix } from '@/ui/utils/colorMix';
 
 import { useProtect } from '../../common';
 import { usePlansContext, usePricingTableContext, useSubscriberTypeContext } from '../../contexts';
@@ -22,8 +23,8 @@ import {
   Text,
 } from '../../customizables';
 import { Check, Plus } from '../../icons';
-import { common, InternalThemeProvider } from '../../styledSystem';
-import { colors, getClosestProfileScrollBox } from '../../utils';
+import { InternalThemeProvider } from '../../styledSystem';
+import { getClosestProfileScrollBox } from '../../utils';
 
 interface PricingTableDefaultProps {
   plans?: CommercePlanResource[] | null;
@@ -167,10 +168,7 @@ function Card(props: CardProps) {
         gap: 0,
         gridTemplateRows: 'subgrid',
         gridRow: 'span 5',
-        background: common.mergedColorsBackground(
-          colors.setAlpha(t.colors.$colorBackground, 1),
-          t.colors.$neutralAlpha50,
-        ),
+        backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
         borderWidth: t.borderWidths.$normal,
         borderStyle: t.borderStyles.$solid,
         borderColor: t.colors.$neutralAlpha100,
diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx
index 1024c9aa267..c11b53ff7ed 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 
 import { Avatar } from '@/ui/elements/Avatar';
 import { SegmentedControl } from '@/ui/elements/SegmentedControl';
+import { colorMix } from '@/ui/utils/colorMix';
 
 import { usePlansContext } from '../../contexts';
 import {
@@ -21,8 +22,7 @@ import {
 } from '../../customizables';
 import { usePrefersReducedMotion } from '../../hooks';
 import { Check, InformationCircle } from '../../icons';
-import { common, InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';
-import { colors } from '../../utils';
+import { InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';
 
 interface PricingTableMatrixProps {
   plans: CommercePlanResource[] | undefined;
@@ -55,7 +55,7 @@ export function PricingTableMatrix({
   });
 
   const highlightBackgroundColor: ThemableCssProp = t => ({
-    background: common.mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha25),
+    background: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha25),
   });
 
   const gridTemplateColumns = React.useMemo(() => `repeat(${plans.length + 1}, minmax(9.375rem,1fr))`, [plans.length]);
diff --git a/packages/clerk-js/src/ui/customizables/parseVariables.ts b/packages/clerk-js/src/ui/customizables/parseVariables.ts
index 4a59c039886..10d5a724ef7 100644
--- a/packages/clerk-js/src/ui/customizables/parseVariables.ts
+++ b/packages/clerk-js/src/ui/customizables/parseVariables.ts
@@ -2,25 +2,33 @@ import type { Theme } from '@clerk/types';
 
 import { spaceScaleKeys } from '../foundations/sizes';
 import type { fontSizes, fontWeights } from '../foundations/typography';
+import { fromEntries, removeUndefinedProps } from '../utils';
 import {
-  colorOptionToHslaAlphaScale,
-  colorOptionToHslaLightnessScale,
-  colors,
-  fromEntries,
-  removeUndefinedProps,
-} from '../utils';
+  createAlphaScaleWithTransparentize,
+  createColorMixLightnessScale,
+  lighten,
+  transparentize,
+} from '../utils/colorMix';
 
 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 primaryScale = createColorMixLightnessScale(variables.colorPrimary, 'primary');
+  const primaryBase = primaryScale?.primary500;
+  const primaryAlphaScale = primaryBase ? createAlphaScaleWithTransparentize(primaryBase, 'primaryAlpha') : undefined;
+  const dangerScale = createColorMixLightnessScale(variables.colorDanger, 'danger');
+  const dangerBase = dangerScale?.danger500;
+  const dangerAlphaScale = dangerBase ? createAlphaScaleWithTransparentize(dangerBase, 'dangerAlpha') : undefined;
+  const successScale = createColorMixLightnessScale(variables.colorSuccess, 'success');
+  const successBase = successScale?.success500;
+  const successAlphaScale = successBase ? createAlphaScaleWithTransparentize(successBase, 'successAlpha') : undefined;
+  const warningScale = createColorMixLightnessScale(variables.colorWarning, 'warning');
+  const warningBase = warningScale?.warning500;
+  const warningAlphaScale = warningBase ? createAlphaScaleWithTransparentize(warningBase, 'warningAlpha') : undefined;
+  const neutralAlphaScales =
+    typeof variables.colorNeutral === 'string' && variables.colorNeutral
+      ? createAlphaScaleWithTransparentize(variables.colorNeutral, 'neutralAlpha')
+      : {};
 
   return removeUndefinedProps({
     ...primaryScale,
@@ -31,22 +39,20 @@ export const createColorScales = (theme: Theme) => {
     ...successAlphaScale,
     ...warningScale,
     ...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),
+    ...neutralAlphaScales,
+    // TODO(Colors): We are not adjusting the lightness based on the colorPrimary lightness
+    primaryHover: primaryBase ? lighten(primaryBase, '90%') : undefined,
+    colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,
+    colorText: variables.colorText,
+    colorTextSecondary:
+      variables.colorTextSecondary || (variables.colorText ? transparentize(variables.colorText, '35%') : undefined),
+    colorInputText: variables.colorInputText,
+    colorBackground: variables.colorBackground,
+    colorInputBackground: variables.colorInputBackground,
+    colorShimmer: 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) {
diff --git a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
index 007f851d43d..a0bafadfbed 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 
+import { colorMix } from '@/ui/utils/colorMix';
+
 import { useEnvironment } from '../../contexts';
 import { descriptors, Flex, Link, localizationKeys, useAppearance } from '../../customizables';
 import { useDevMode } from '../../hooks/useDevMode';
 import type { InternalTheme, PropsOfComponent } from '../../styledSystem';
-import { common, mqu } from '../../styledSystem';
-import { colors } from '../../utils';
+import { mqu } from '../../styledSystem';
 import { Card } from '.';
 
 type CardFooterProps = PropsOfComponent<typeof Flex> & {
@@ -50,10 +51,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
         t => ({
           marginTop: `-${t.space.$2}`,
           paddingTop: t.space.$2,
-          background: common.mergedColorsBackground(
-            colors.setAlpha(t.colors.$colorBackground, 1),
-            t.colors.$neutralAlpha50,
-          ),
+          backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
           '&:empty': {
             padding: 0,
             marginTop: 0,
diff --git a/packages/clerk-js/src/ui/elements/Disclosure.tsx b/packages/clerk-js/src/ui/elements/Disclosure.tsx
index cf1a4a31749..4ab64e45817 100644
--- a/packages/clerk-js/src/ui/elements/Disclosure.tsx
+++ b/packages/clerk-js/src/ui/elements/Disclosure.tsx
@@ -5,8 +5,7 @@ import { Box, descriptors, Icon, SimpleButton, Span, useAppearance } from '../cu
 import { usePrefersReducedMotion } from '../hooks';
 import { ChevronDown } from '../icons';
 import type { ThemableCssProp } from '../styledSystem';
-import { common } from '../styledSystem';
-import { colors } from '../utils';
+import { colorMix } from '../utils/colorMix';
 
 /* -------------------------------------------------------------------------------------------------
  * Disclosure Context
@@ -168,10 +167,7 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, re
             borderWidth: t.borderWidths.$normal,
             borderStyle: t.borderStyles.$solid,
             borderColor: t.colors.$neutralAlpha100,
-            background: common.mergedColorsBackground(
-              colors.setAlpha(t.colors.$colorBackground, 1),
-              t.colors.$neutralAlpha50,
-            ),
+            backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
           })}
         >
           {children}
diff --git a/packages/clerk-js/src/ui/elements/Drawer.tsx b/packages/clerk-js/src/ui/elements/Drawer.tsx
index 5017d6513b5..236fde166b8 100644
--- a/packages/clerk-js/src/ui/elements/Drawer.tsx
+++ b/packages/clerk-js/src/ui/elements/Drawer.tsx
@@ -19,8 +19,7 @@ import { Box, descriptors, Flex, Heading, Icon, Span, useAppearance } from '../c
 import { useDirection, usePrefersReducedMotion, useScrollLock } from '../hooks';
 import { Close as CloseIcon } from '../icons';
 import type { ThemableCssProp } from '../styledSystem';
-import { common } from '../styledSystem';
-import { colors } from '../utils';
+import { colorMix, transparentize } from '../utils/colorMix';
 import { IconButton } from './IconButton';
 
 type FloatingPortalProps = React.ComponentProps<typeof FloatingPortal>;
@@ -151,7 +150,7 @@ export const FloatingOverlay = React.forwardRef(function FloatingOverlay(
       sx={[
         t => ({
           inset: 0,
-          backgroundColor: colors.setAlpha(t.colors.$colorBackground, 0.28),
+          backgroundColor: transparentize(t.colors.$colorBackground, '28%'),
         }),
         props.sx,
       ]}
@@ -298,10 +297,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>(({ title, children,
       sx={[
         t => ({
           display: 'flex',
-          background: common.mergedColorsBackground(
-            colors.setAlpha(t.colors.$colorBackground, 1),
-            t.colors.$neutralAlpha50,
-          ),
+          backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
           borderBlockEndWidth: t.borderWidths.$normal,
           borderBlockEndStyle: t.borderStyles.$solid,
           borderBlockEndColor: t.colors.$neutralAlpha100,
@@ -378,10 +374,7 @@ const Footer = React.forwardRef<HTMLDivElement, FooterProps>(({ children, sx, ..
         t => ({
           display: 'flex',
           flexDirection: 'column',
-          background: common.mergedColorsBackground(
-            colors.setAlpha(t.colors.$colorBackground, 1),
-            t.colors.$neutralAlpha50,
-          ),
+          backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
           borderBlockStartWidth: t.borderWidths.$normal,
           borderBlockStartStyle: t.borderStyles.$solid,
           borderBlockStartColor: t.colors.$neutralAlpha100,
@@ -496,7 +489,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
           sx={t => ({
             position: 'absolute',
             inset: 0,
-            backgroundImage: `linear-gradient(to bottom, ${colors.setAlpha(t.colors.$colorBackground, 0.28)}, ${t.colors.$colorBackground})`,
+            backgroundImage: `linear-gradient(to bottom, ${transparentize(t.colors.$colorBackground, '28%')}, ${t.colors.$colorBackground})`,
           })}
         />
 
@@ -521,10 +514,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
               bottom: 0,
               left: 0,
               right: 0,
-              background: common.mergedColorsBackground(
-                colors.setAlpha(t.colors.$colorBackground, 1),
-                t.colors.$neutralAlpha50,
-              ),
+              backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
               padding: t.space.$4,
               borderStartStartRadius: t.radii.$md,
               borderStartEndRadius: t.radii.$md,
diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx
index fa02d6e4c53..b2b1d547c48 100644
--- a/packages/clerk-js/src/ui/elements/Navbar.tsx
+++ b/packages/clerk-js/src/ui/elements/Navbar.tsx
@@ -8,8 +8,9 @@ import { useNavigateToFlowStart, usePopover } from '../hooks';
 import { Menu } from '../icons';
 import { useRouter } from '../router';
 import type { PropsOfComponent } from '../styledSystem';
-import { animations, common, mqu } from '../styledSystem';
+import { animations, mqu } from '../styledSystem';
 import { colors } from '../utils';
+import { colorMix } from '../utils/colorMix';
 import { Card } from './Card';
 import { withFloatingTree } from './contexts';
 import { DevModeOverlay } from './DevModeNotice';
@@ -146,10 +147,7 @@ const NavbarContainer = (
         width: t.sizes.$57,
         position: 'relative',
         maxWidth: t.space.$57,
-        background: common.mergedColorsBackground(
-          colors.setAlpha(t.colors.$colorBackground, 1),
-          t.colors.$neutralAlpha50,
-        ),
+        backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
         padding: `${t.space.$6} ${t.space.$5} ${t.space.$4} ${t.space.$3}`,
         marginRight: `-${t.space.$2}`,
         color: t.colors.$colorText,
@@ -319,10 +317,7 @@ export const NavbarMenuButtonRow = ({ navbarTitleLocalizationKey, ...props }: Na
       elementDescriptor={descriptors.navbarMobileMenuRow}
       sx={t => ({
         display: 'none',
-        background: common.mergedColorsBackground(
-          colors.setAlpha(t.colors.$colorBackground, 1),
-          t.colors.$neutralAlpha50,
-        ),
+        backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
         padding: `${t.space.$2} ${t.space.$3} ${t.space.$4} ${t.space.$3}`,
         marginBottom: `-${t.space.$2}`,
         [mqu.md]: {
diff --git a/packages/clerk-js/src/ui/elements/PopoverCard.tsx b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
index 41886231cc1..30569578458 100644
--- a/packages/clerk-js/src/ui/elements/PopoverCard.tsx
+++ b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
@@ -4,8 +4,8 @@ import { useEnvironment } from '../contexts';
 import { Col, descriptors, Flex, Flow, useAppearance } from '../customizables';
 import type { ElementDescriptor } from '../customizables/elementDescriptors';
 import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
-import { animations, common } from '../styledSystem';
-import { colors } from '../utils';
+import { animations } from '../styledSystem';
+import { colorMix } from '../utils/colorMix';
 import { Card } from './Card';
 
 const PopoverCardRoot = React.forwardRef<
@@ -81,10 +81,7 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
       justify='between'
       sx={[
         t => ({
-          background: common.mergedColorsBackground(
-            colors.setAlpha(t.colors.$colorBackground, 1),
-            t.colors.$neutralAlpha50,
-          ),
+          backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
           marginTop: `-${t.space.$2}`,
           paddingTop: t.space.$2,
           '&:empty': {
diff --git a/packages/clerk-js/src/ui/foundations/borders.ts b/packages/clerk-js/src/ui/foundations/borders.ts
index db5c06e5ba3..9031341e560 100644
--- a/packages/clerk-js/src/ui/foundations/borders.ts
+++ b/packages/clerk-js/src/ui/foundations/borders.ts
@@ -1,9 +1,12 @@
+import { clerkCssVar } from '../utils/css';
+
 export const borderStyles = Object.freeze({
   solid: 'solid',
   dashed: 'dashed',
 } as const);
 
+const borderWidthDefaultVar = clerkCssVar('border-width', '1px');
 export const borderWidths = Object.freeze({
-  normal: '1px',
-  heavy: '2px',
+  normal: clerkCssVar('border-width-normal', borderWidthDefaultVar),
+  heavy: clerkCssVar('border-width-heavy', `calc(${borderWidthDefaultVar} * 2)`),
 });
diff --git a/packages/clerk-js/src/ui/foundations/colors.ts b/packages/clerk-js/src/ui/foundations/colors.ts
index 2b949f0f2d3..ac34e28abc7 100644
--- a/packages/clerk-js/src/ui/foundations/colors.ts
+++ b/packages/clerk-js/src/ui/foundations/colors.ts
@@ -1,108 +1,85 @@
-import { colorOptionToHslaAlphaScale } from '../utils/colorOptionToHslaScale';
+import {
+  createAlphaScaleWithTransparentize,
+  createColorMixLightnessScale,
+  lighten,
+  transparentize,
+} from '../utils/colorMix';
+import { clerkCssVar } from '../utils/css';
 
-export const whiteAlpha = Object.freeze({
-  whiteAlpha25: 'hsla(0, 0%, 100%, 0.02)',
-  whiteAlpha50: 'hsla(0, 0%, 100%, 0.03)',
-  whiteAlpha100: 'hsla(0, 0%, 100%, 0.07)',
-  whiteAlpha150: 'hsla(0, 0%, 100%, 0.11)',
-  whiteAlpha200: 'hsla(0, 0%, 100%, 0.15)',
-  whiteAlpha300: 'hsla(0, 0%, 100%, 0.28)',
-  whiteAlpha400: 'hsla(0, 0%, 100%, 0.41)',
-  whiteAlpha500: 'hsla(0, 0%, 100%, 0.53)',
-  whiteAlpha600: 'hsla(0, 0%, 100%, 0.62)',
-  whiteAlpha700: 'hsla(0, 0%, 100%, 0.73)',
-  whiteAlpha750: 'hsla(0, 0%, 100%, 0.78)',
-  whiteAlpha800: 'hsla(0, 0%, 100%, 0.81)',
-  whiteAlpha850: 'hsla(0, 0%, 100%, 0.84)',
-  whiteAlpha900: 'hsla(0, 0%, 100%, 0.87)',
-  whiteAlpha950: 'hsla(0, 0%, 100%, 0.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: 'hsla(0, 0%, 0%, 0.02)',
-  neutralAlpha50: 'hsla(0, 0%, 0%, 0.03)',
-  neutralAlpha100: 'hsla(0, 0%, 0%, 0.07)',
-  neutralAlpha150: 'hsla(0, 0%, 0%, 0.11)',
-  neutralAlpha200: 'hsla(0, 0%, 0%, 0.15)',
-  neutralAlpha300: 'hsla(0, 0%, 0%, 0.28)',
-  neutralAlpha400: 'hsla(0, 0%, 0%, 0.41)',
-  neutralAlpha500: 'hsla(0, 0%, 0%, 0.53)',
-  neutralAlpha600: 'hsla(0, 0%, 0%, 0.62)',
-  neutralAlpha700: 'hsla(0, 0%, 0%, 0.73)',
-  neutralAlpha750: 'hsla(0, 0%, 0%, 0.78)',
-  neutralAlpha800: 'hsla(0, 0%, 0%, 0.81)',
-  neutralAlpha850: 'hsla(0, 0%, 0%, 0.84)',
-  neutralAlpha900: 'hsla(0, 0%, 0%, 0.87)',
-  neutralAlpha950: 'hsla(0, 0%, 0%, 0.92)',
-} as const);
+// Create alpha scales separately to preserve types
+export const whiteAlpha = createAlphaScaleWithTransparentize('white', 'whiteAlpha');
+export const neutralAlpha = createAlphaScaleWithTransparentize(clerkCssVar('neutral', 'black'), 'neutralAlpha');
+
+const primaryAlpha = createAlphaScaleWithTransparentize(clerkCssVar('primary', '#2F3037'), 'primaryAlpha');
+const dangerAlpha = createAlphaScaleWithTransparentize(clerkCssVar('danger', '#EF4444'), 'dangerAlpha');
+const warningAlpha = createAlphaScaleWithTransparentize(clerkCssVar('warning', '#F36B16'), 'warningAlpha');
+const successAlpha = createAlphaScaleWithTransparentize(clerkCssVar('success', '#22C543'), 'successAlpha');
+
+const primaryScale = createColorMixLightnessScale(clerkCssVar('primary', '#2F3037'), 'primary');
+const dangerScale = createColorMixLightnessScale(clerkCssVar('danger', '#EF4444'), 'danger');
+const warningScale = createColorMixLightnessScale(clerkCssVar('warning', '#F36B16'), 'warning');
+const successScale = createColorMixLightnessScale(clerkCssVar('success', '#22C543'), 'success');
+
+// 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,
   // Themable colors
   ...neutralAlpha,
   ...whiteAlpha,
-  colorBackground: 'white',
-  colorInputBackground: 'white',
-  colorText: '#212126',
-  colorTextSecondary: '#747686',
-  colorInputText: '#131316',
-  colorTextOnPrimaryBackground: 'white',
-  colorShimmer: 'rgba(255, 255, 255, 0.36)',
+  colorBackground: clerkCssVar('background', 'white'),
+  colorInputBackground: clerkCssVar('input', 'white'),
+  colorText: clerkCssVar('foreground', '#212126'),
+  colorTextSecondary: clerkCssVar('secondary-foreground', '#747686'),
+  colorInputText: clerkCssVar('input-foreground', '#131316'),
+  colorTextOnPrimaryBackground: clerkCssVar('primary-foreground', 'white'),
+  colorShimmer: clerkCssVar('shimmer', transparentize('white', '36%')),
   transparent: 'transparent',
   white: 'white',
   black: 'black',
-  primary50: '#B9BDBC',
-  primary100: '#9EA1A2',
-  primary200: '#828687',
-  primary300: '#66696D',
-  primary400: '#4B4D52',
-  primary500: '#2F3037',
-  primary600: '#2A2930',
-  primary700: '#25232A',
-  primary800: '#201D23',
-  primary900: '#1B171C',
-  primaryHover: '#3B3C45', //primary 500 adjusted for lightness
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  ...colorOptionToHslaAlphaScale('#2F3037', 'primaryAlpha')!,
-  danger50: '#FEF2F2',
-  danger100: '#FEE5E5',
-  danger200: '#FECACA',
-  danger300: '#FCA5A5',
-  danger400: '#F87171',
-  danger500: '#EF4444',
-  danger600: '#DC2626',
-  danger700: '#B91C1C',
-  danger800: '#991B1B',
-  danger900: '#7F1D1D',
-  danger950: '#450A0A',
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  ...colorOptionToHslaAlphaScale('#EF4444', 'dangerAlpha')!,
-  warning50: '#FFF6ED',
-  warning100: '#FFEBD5',
-  warning200: '#FED1AA',
-  warning300: '#FDB674',
-  warning400: '#F98C49',
-  warning500: '#F36B16',
-  warning600: '#EA520C',
-  warning700: '#C23A0C',
-  warning800: '#9A2F12',
-  warning900: '#7C2912',
-  warning950: '#431207',
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  ...colorOptionToHslaAlphaScale('#F36B16', 'warningAlpha')!,
-  success50: '#F0FDF2',
-  success100: '#DCFCE2',
-  success200: '#BBF7C6',
-  success300: '#86EF9B',
-  success400: '#4ADE68',
-  success500: '#22C543',
-  success600: '#16A332',
-  success700: '#15802A',
-  success800: '#166527',
-  success900: '#145323',
-  success950: '#052E0F',
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  ...colorOptionToHslaAlphaScale('#22C543', 'successAlpha')!,
+  ...primaryScale,
+  // TODO(Colors): We are not adjusting the lightness based on the colorPrimary lightness
+  primaryHover: lighten(clerkCssVar('primary', '#2F3037'), '25%'), // primary 500 adjusted for lightness
+  ...primaryAlpha,
+  ...dangerScale,
+  ...dangerAlpha,
+  ...warningScale,
+  ...warningAlpha,
+  ...successScale,
+  ...successAlpha,
 } as const);
diff --git a/packages/clerk-js/src/ui/foundations/opacity.ts b/packages/clerk-js/src/ui/foundations/opacity.ts
index 57597c72055..885bfee9a16 100644
--- a/packages/clerk-js/src/ui/foundations/opacity.ts
+++ b/packages/clerk-js/src/ui/foundations/opacity.ts
@@ -1,5 +1,7 @@
+import { clerkCssVar } from '../utils/css';
+
 export const opacity = Object.freeze({
-  sm: '24%',
-  disabled: '50%',
-  inactive: '62%',
+  sm: clerkCssVar('opacity-sm', '24%'),
+  disabled: clerkCssVar('opacity-disabled', '50%'),
+  inactive: clerkCssVar('opacity-inactive', '62%'),
 } as const);
diff --git a/packages/clerk-js/src/ui/foundations/sizes.ts b/packages/clerk-js/src/ui/foundations/sizes.ts
index 9faf2dded28..d0bfa5fa873 100644
--- a/packages/clerk-js/src/ui/foundations/sizes.ts
+++ b/packages/clerk-js/src/ui/foundations/sizes.ts
@@ -1,56 +1,61 @@
+import { clerkCssVar } from '../utils/css';
+
 const baseSpaceUnits = Object.freeze({
   none: '0',
   xxs: '0.5px',
   px: '1px',
 } as const);
 
+const dynamicSpaceUnitsDefaultVar = clerkCssVar('spacing', '1rem');
+const calcDynamicSpaceUnits = (num: number) => `calc(${dynamicSpaceUnitsDefaultVar} * ((${num} / 0.5) * 0.125))`;
+
 const dynamicSpaceUnits = Object.freeze({
-  '0x25': '0.0625rem',
-  '0x5': '0.125rem',
-  '1': '0.25rem',
-  '1x5': '0.375rem',
-  '2': '0.5rem',
-  '2x5': '0.625rem',
-  '3': '0.75rem',
-  '3x25': '0.8125rem',
-  '3x5': '0.875rem',
-  '4': '1rem',
-  '4x25': '1.0625rem',
-  '5': '1.25rem',
-  '5x5': '1.375rem',
-  '6': '1.5rem',
-  '7': '1.75rem',
-  '7x5': '1.875rem',
-  '8': '2rem',
-  '8x5': '2.125rem',
-  '8x75': '2.1875rem',
-  '9': '2.25rem',
-  '10': '2.5rem',
-  '12': '3rem',
-  '13': '3.5rem',
-  '16': '4rem',
-  '17': '4.25rem',
-  '20': '5rem',
-  '24': '6rem',
-  '28': '7rem',
-  '32': '8rem',
-  '36': '9rem',
-  '40': '10rem',
-  '44': '11rem',
-  '48': '12rem',
-  '52': '13rem',
-  '56': '14rem',
-  '57': '14.25rem',
-  '60': '15rem',
-  '66': '16.5rem',
-  '94': '23.5rem',
-  '100': '25rem',
-  '108': '27rem',
-  '120': '30rem',
-  '140': '35rem',
-  '160': '40rem',
-  '176': '44rem',
-  '220': '55rem',
+  '0x25': calcDynamicSpaceUnits(0.25), // 0.0625rem
+  '0x5': calcDynamicSpaceUnits(0.5), // 0.125rem
+  '1': calcDynamicSpaceUnits(1), // 0.25rem
+  '1x5': calcDynamicSpaceUnits(1.5), // 0.375rem
+  '2': calcDynamicSpaceUnits(2), // 0.5rem
+  '2x5': calcDynamicSpaceUnits(2.5), // 0.625rem
+  '3': calcDynamicSpaceUnits(3), // 0.75rem
+  '3x25': calcDynamicSpaceUnits(3.25), // 0.8125rem
+  '3x5': calcDynamicSpaceUnits(3.5), // 0.875rem
+  '4': dynamicSpaceUnitsDefaultVar, // 1rem
+  '4x25': calcDynamicSpaceUnits(4.5), // 1.0625rem
+  '5': calcDynamicSpaceUnits(5), // 1.25rem
+  '5x5': calcDynamicSpaceUnits(5.5), // 1.375rem
+  '6': calcDynamicSpaceUnits(6), // 1.5rem
+  '7': calcDynamicSpaceUnits(7), // 1.75rem
+  '7x5': calcDynamicSpaceUnits(7.5), // 1.875rem
+  '8': calcDynamicSpaceUnits(8), // 2rem
+  '8x5': calcDynamicSpaceUnits(8.5), // 2.125rem
+  '8x75': calcDynamicSpaceUnits(8.75), // 2.1875rem
+  '9': calcDynamicSpaceUnits(9), // 2.25rem
+  '10': calcDynamicSpaceUnits(10), // 2.5rem
+  '12': calcDynamicSpaceUnits(12), // 3rem
+  '13': calcDynamicSpaceUnits(13), // 3.5rem
+  '16': calcDynamicSpaceUnits(16), // 4rem
+  '17': calcDynamicSpaceUnits(17), // 4.25rem
+  '20': calcDynamicSpaceUnits(20), // 5rem
+  '24': calcDynamicSpaceUnits(24), // 6rem
+  '28': calcDynamicSpaceUnits(28), // 7rem
+  '32': calcDynamicSpaceUnits(32), // 8rem
+  '36': calcDynamicSpaceUnits(36), // 9rem
+  '40': calcDynamicSpaceUnits(40), // 10rem
+  '44': calcDynamicSpaceUnits(44), // 11rem
+  '48': calcDynamicSpaceUnits(48), // 12rem
+  '52': calcDynamicSpaceUnits(52), // 13rem
+  '56': calcDynamicSpaceUnits(56), // 14rem
+  '57': calcDynamicSpaceUnits(57), // 14.25rem
+  '60': calcDynamicSpaceUnits(60), // 15rem
+  '66': calcDynamicSpaceUnits(66), // 16.5rem
+  '94': calcDynamicSpaceUnits(94), // 23.5rem
+  '100': calcDynamicSpaceUnits(100), // 25rem
+  '108': calcDynamicSpaceUnits(108), // 27rem
+  '120': calcDynamicSpaceUnits(120), // 30rem
+  '140': calcDynamicSpaceUnits(140), // 35rem
+  '160': calcDynamicSpaceUnits(160), // 40rem
+  '176': calcDynamicSpaceUnits(176), // 44rem
+  '220': calcDynamicSpaceUnits(220), // 55rem
 } as const);
 
 /**
@@ -64,14 +69,15 @@ const space = Object.freeze({
 
 const sizes = Object.freeze({ ...space } as const);
 
+const radiiDefaultVar = clerkCssVar('radius', '0.375rem');
 const radii = Object.freeze({
   none: '0px',
   circle: '50%',
-  avatar: '0.375rem',
-  sm: '0.25rem',
-  md: '0.375rem',
-  lg: '0.5rem',
-  xl: '0.75rem',
+  avatar: clerkCssVar('radius-avatar', radiiDefaultVar), // 0.375rem
+  sm: clerkCssVar('radius-sm', `calc(${radiiDefaultVar} * 0.666)`), // 0.25rem
+  md: clerkCssVar('radius-md', radiiDefaultVar), // 0.375rem
+  lg: clerkCssVar('radius-lg', `calc(${radiiDefaultVar} * 1.333)`), // 0.5rem
+  xl: clerkCssVar('radius-xl', `calc(${radiiDefaultVar} * 2)`), // 0.75rem
   halfHeight: '99999px',
 } as const);
 
diff --git a/packages/clerk-js/src/ui/foundations/typography.ts b/packages/clerk-js/src/ui/foundations/typography.ts
index fdf4f87e109..56d51062562 100644
--- a/packages/clerk-js/src/ui/foundations/typography.ts
+++ b/packages/clerk-js/src/ui/foundations/typography.ts
@@ -1,40 +1,44 @@
+import { clerkCssVar } from '../utils/css';
+
 const fontWeights = Object.freeze({
-  normal: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700,
+  normal: clerkCssVar('font-weight-normal', clerkCssVar('font-weight', '400')),
+  medium: clerkCssVar('font-weight-medium', '500'),
+  semibold: clerkCssVar('font-weight-semibold', '600'),
+  bold: clerkCssVar('font-weight-bold', '700'),
 } as const);
 
+const lineHeightsDefaultVar = clerkCssVar('line-height', 'normal');
 const lineHeights = Object.freeze({
-  normal: 'normal',
-  extraSmall: '1.33333',
-  small: '1.38462',
-  medium: '1.41176',
-  large: '1.45455',
+  normal: clerkCssVar('line-height-normal', lineHeightsDefaultVar),
+  extraSmall: clerkCssVar('line-height-xs', `calc(${lineHeightsDefaultVar} * 1.33333)`), // 1.33333
+  small: clerkCssVar('line-height-sm', `calc(${lineHeightsDefaultVar} * 1.38462)`), // 1.38462
+  medium: clerkCssVar('line-height-md', `calc(${lineHeightsDefaultVar} * 1.41176)`), // 1.41176
+  large: clerkCssVar('line-height-lg', `calc(${lineHeightsDefaultVar} * 1.45455)`), // 1.45455
 } as const);
 
 const letterSpacings = Object.freeze({
-  normal: 'normal',
+  normal: clerkCssVar('letter-spacing-normal', clerkCssVar('letter-spacing', 'normal')),
 } as const);
 
 // We want to achieve the md size to be 13px for root font size of 16px
 // This is directly related to the createFontSizeScale function in the theme
 // ref: src/ui/customizables/parseVariables.ts
+const fontSizesDefaultVar = clerkCssVar('font-size', '0.8125rem');
 const fontSizes = Object.freeze({
-  xs: '0.6875rem',
-  sm: '0.75rem',
-  md: '0.8125rem',
-  lg: '1.0625rem',
-  xl: '1.5rem',
+  xs: clerkCssVar('font-size-xs', `calc(${fontSizesDefaultVar} * 0.8)`), // 0.6875rem
+  sm: clerkCssVar('font-size-sm', `calc(${fontSizesDefaultVar} * 0.9)`), // 0.75rem
+  md: clerkCssVar('font-size-md', fontSizesDefaultVar),
+  lg: clerkCssVar('font-size-lg', `calc(${fontSizesDefaultVar} * 1.3)`), // 1.0625rem
+  xl: clerkCssVar('font-size-xl', `calc(${fontSizesDefaultVar} * 1.85)`), // 1.5rem
 } as const);
 
 const fontStyles = Object.freeze({
-  normal: 'normal',
+  normal: clerkCssVar('font-style-normal', clerkCssVar('font-style', 'normal')),
 } as const);
 
 const fonts = Object.freeze({
-  main: 'inherit',
-  buttons: 'inherit',
+  main: clerkCssVar('font-family', 'inherit'),
+  buttons: clerkCssVar('font-family-buttons', clerkCssVar('font-family', 'inherit')),
 } as const);
 
 export { fontSizes, fontWeights, letterSpacings, lineHeights, fonts, fontStyles };
diff --git a/packages/clerk-js/src/ui/primitives/Badge.tsx b/packages/clerk-js/src/ui/primitives/Badge.tsx
index f0636b485d4..a9accdf7f51 100644
--- a/packages/clerk-js/src/ui/primitives/Badge.tsx
+++ b/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) => {
diff --git a/packages/clerk-js/src/ui/primitives/Th.tsx b/packages/clerk-js/src/ui/primitives/Th.tsx
index 320dace655f..eec38663685 100644
--- a/packages/clerk-js/src/ui/primitives/Th.tsx
+++ b/packages/clerk-js/src/ui/primitives/Th.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { PrimitiveProps, StyleVariants } from '../styledSystem';
 import { createVariants } from '../styledSystem';
-import { colors } from '../utils';
+import { transparentize } from '../utils/colorMix';
 import type { BoxProps } from './Box';
 import { Box } from './Box';
 
@@ -11,7 +11,7 @@ const { applyVariants, filterProps } = createVariants(theme => ({
     textAlign: 'left',
     fontSize: theme.fontSizes.$sm,
     fontWeight: theme.fontWeights.$normal,
-    color: colors.setAlpha(theme.colors.$colorText, 0.62),
+    color: transparentize(theme.colors.$colorText, '62%'),
     padding: `${theme.space.$2} ${theme.space.$4}`,
   },
   variants: {},
diff --git a/packages/clerk-js/src/ui/styledSystem/common.ts b/packages/clerk-js/src/ui/styledSystem/common.ts
index 471711397ab..648c1b9adf1 100644
--- a/packages/clerk-js/src/ui/styledSystem/common.ts
+++ b/packages/clerk-js/src/ui/styledSystem/common.ts
@@ -100,7 +100,7 @@ const borderVariants = (t: InternalTheme, props?: any) => {
               hoverBoxShadow,
               t.shadows.$focusRing.replace(
                 '{{color}}',
-                !props?.hasError ? t.colors.$neutralAlpha150 : (t.colors.$dangerAlpha200 as string),
+                !props?.hasError ? t.colors.$neutralAlpha150 : t.colors.$dangerAlpha200,
               ),
             ].toString(),
           },
@@ -186,10 +186,6 @@ const maxHeightScroller = (t: InternalTheme) =>
     ...unstyledScrollbar(t),
   }) as const;
 
-const mergedColorsBackground = (colorBack: string, colorFront: string) => {
-  return `linear-gradient(${colorFront},${colorFront}), linear-gradient(${colorBack}, ${colorBack})`;
-};
-
 const visuallyHidden = () =>
   ({
     clip: 'rect(0 0 0 0)',
@@ -211,6 +207,5 @@ export const common = {
   centeredFlex,
   maxHeightScroller,
   unstyledScrollbar,
-  mergedColorsBackground,
   visuallyHidden,
 };
diff --git a/packages/clerk-js/src/ui/utils/colorMix.ts b/packages/clerk-js/src/ui/utils/colorMix.ts
new file mode 100644
index 00000000000..6dc3fe575ca
--- /dev/null
+++ b/packages/clerk-js/src/ui/utils/colorMix.ts
@@ -0,0 +1,206 @@
+/**
+ * A percentage string
+ * @example '10%'
+ */
+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
+ * @param percentage - The percentage to mix the color with
+ * @param colorTint - The color to mix the color with
+ * @returns The mixed color
+ */
+export function colorMix(colorOne: string, colorTwo: string) {
+  return `color-mix(in oklch, ${colorOne}, ${colorTwo})`;
+}
+
+/**
+ * Transparentize a color by a percentage
+ * @param color - The color to transparentize
+ * @param percentage - The percentage to transparentize the color by
+ * @returns The transparentized color
+ */
+export function transparentize(color: string, percentage: Percentage) {
+  return colorMix(`${color} ${percentage}`, 'transparent');
+}
+
+/**
+ * Lighten a color by a percentage
+ * @param color - The color to lighten
+ * @param percentage - The percentage to lighten the color by
+ * @returns The lightened color
+ */
+export function lighten(color: string, percentage: Percentage) {
+  return colorMix(`${color} ${percentage}`, 'white');
+}
+
+/**
+ * Darken a color by a percentage
+ * @param color - The color to darken
+ * @param percentage - The percentage to darken the color by
+ * @returns The darkened color
+ */
+export function darken(color: string, percentage: Percentage) {
+  return colorMix(`${color} ${percentage}`, 'black');
+}
+
+/**
+ * A map of alpha shades to percentages
+ */
+const ALPHA_SHADES_MAP: Record<AlphaShadeKey, Percentage> = {
+  '25': '2%',
+  '50': '3%',
+  '100': '7%',
+  '150': '11%',
+  '200': '15%',
+  '300': '28%',
+  '400': '41%',
+  '500': '53%',
+  '600': '62%',
+  '700': '73%',
+  '750': '78%',
+  '800': '81%',
+  '850': '84%',
+  '900': '87%',
+  '950': '92%',
+} as const;
+
+/**
+ * Create an alpha scale with transparentize
+ * @param baseColor - The base color
+ * @param prefix - The prefix for the scale
+ * @returns The alpha scale
+ */
+export function createAlphaScaleWithTransparentize<P extends string>(
+  baseColor: string,
+  prefix: P,
+): 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<LightnessShadeKey, { type: 'lighten' | 'darken' | 'base'; amount: Percentage }> = {
+  '25': { type: 'lighten', amount: '92%' },
+  '50': { type: 'lighten', amount: '85%' },
+  '100': { type: 'lighten', amount: '70%' },
+  '150': { type: 'lighten', amount: '55%' },
+  '200': { type: 'lighten', amount: '40%' },
+  '300': { type: 'lighten', amount: '25%' },
+  '400': { type: 'lighten', amount: '10%' },
+  '500': { type: 'base', amount: '0%' },
+  '600': { type: 'darken', amount: '10%' },
+  '700': { type: 'darken', amount: '25%' },
+  '750': { type: 'darken', amount: '40%' },
+  '800': { type: 'darken', amount: '55%' },
+  '850': { type: 'darken', amount: '70%' },
+  '900': { type: 'darken', amount: '85%' },
+  '950': { type: 'darken', amount: '92%' },
+};
+
+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.
+ * @param colorOption The base color string (used as 500 shade) or a partial scale object.
+ * @param prefix The prefix for the scale keys (e.g., 'primary').
+ * @returns A prefixed color scale object, or undefined if colorOption is undefined.
+ */
+export function createColorMixLightnessScale<P extends string>(
+  colorOption: string | Partial<Record<LightnessShadeKey, string>>,
+  prefix: P,
+): Record<`${P}${LightnessShadeKey}`, string>;
+export function createColorMixLightnessScale<P extends string>(
+  colorOption: string | Partial<Record<LightnessShadeKey, string>> | undefined,
+  prefix: P,
+): Record<`${P}${LightnessShadeKey}`, string> | undefined;
+export function createColorMixLightnessScale<P extends string>(
+  colorOption: string | Partial<Record<LightnessShadeKey, string>> | undefined,
+  prefix: P,
+): Record<`${P}${LightnessShadeKey}`, string> | undefined {
+  if (!colorOption) {
+    return undefined;
+  }
+
+  let baseFor500: string;
+  const userProvidedShades: Partial<Record<LightnessShadeKey, string>> = {};
+
+  if (typeof colorOption === 'string') {
+    baseFor500 = colorOption;
+  } else {
+    if (!colorOption['500']) {
+      throw new Error(
+        `Color scale generation for prefix '${prefix}' failed: The '500' shade is required in the colorOption object.`,
+      );
+    }
+    baseFor500 = colorOption['500'];
+    for (const key of ALL_LIGHTNESS_SHADE_KEYS) {
+      if (colorOption[key]) {
+        userProvidedShades[key] = colorOption[key];
+      }
+    }
+  }
+
+  const generatedScale: Partial<Record<LightnessShadeKey, string>> = {};
+  for (const shadeKey of ALL_LIGHTNESS_SHADE_KEYS) {
+    const definition = LIGHTNESS_SHADES_DEF[shadeKey];
+    switch (definition.type) {
+      case 'base':
+        generatedScale[shadeKey] = baseFor500;
+        break;
+      case 'lighten':
+        generatedScale[shadeKey] = lighten(baseFor500, definition.amount);
+        break;
+      case 'darken':
+        generatedScale[shadeKey] = darken(baseFor500, definition.amount);
+        break;
+    }
+  }
+
+  const mergedScale = { ...generatedScale, ...userProvidedShades };
+
+  const resultScale = {} as Record<`${P}${LightnessShadeKey}`, string>;
+  for (const key of ALL_LIGHTNESS_SHADE_KEYS) {
+    if (mergedScale[key]) {
+      resultScale[`${prefix}${key}`] = mergedScale[key];
+    }
+  }
+  return resultScale;
+}
diff --git a/packages/clerk-js/src/ui/utils/colors.ts b/packages/clerk-js/src/ui/utils/colors.ts
index d3ee83e7550..8d27a272c0d 100644
--- a/packages/clerk-js/src/ui/utils/colors.ts
+++ b/packages/clerk-js/src/ui/utils/colors.ts
@@ -255,6 +255,8 @@ 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 as unknown as ParsedResult;
   const prefix = str.substr(0, 3).toLowerCase();
   let res;
   if (prefix === 'hsl') {
diff --git a/packages/clerk-js/src/ui/utils/css.ts b/packages/clerk-js/src/ui/utils/css.ts
new file mode 100644
index 00000000000..f4c9b5e65ae
--- /dev/null
+++ b/packages/clerk-js/src/ui/utils/css.ts
@@ -0,0 +1 @@
+export const clerkCssVar = (name: string, defaultValue: string) => `var(--clerk-${name}, ${defaultValue})`;