@100mslive/hms-ai-ui

import { mergeDeep } from "./lib/utils"; export interface ThemeTokens { [key: string]: string; } export interface Theme { type: "light" | "dark"; name: string; tokens: ThemeTokens; } interface ColorScale { 25: string; 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; } export interface BaseTokens { "base-white": string; "base-black": string; "base-transparent": string; black: string; "gray-light": ColorScale; "gray-dark": ColorScale; brand: ColorScale; error: ColorScale; warning: ColorScale; success: ColorScale; blue: ColorScale; purple: ColorScale; teal: ColorScale; } // Base color tokens export const baseTokens: BaseTokens = { "base-white": "#FFFFFF", "base-black": "#000000", "base-transparent": "#FFFFFF00", black: "#000000", // Gray scale "gray-light": { 25: "#fdfdfd", 50: "#fafafa", 100: "#f5f5f5", 200: "#e9eaeb", 300: "#d1d1d6", 400: "#a0a0ab", 500: "#70707b", 600: "#51525c", 700: "#3f3f46", 800: "#26272b", 900: "#1a1a1e", 950: "#131316", }, // Gray dark mode "gray-dark": { 25: "#fafafa", 50: "#f7f7f7", 100: "#f0f0f1", 200: "#ececed", 300: "#d1d1d6", 400: "#a0a0ab", 500: "#70707b", 600: "#51525c", 700: "#3f3f46", 800: "#26272b", 900: "#1a1a1e", 950: "#131316", }, brand: { 25: "#fafffe", 50: "#e7f2f0", 100: "#bddbd6", 200: "#99c1b8", 300: "#74b4a5", 400: "#4e9985", 500: "#0f7d64", 600: "#0b8166", 700: "#0b5846", 800: "#094c3d", 900: "#084235", 950: "#06352a", }, // Error colors error: { 25: "#fffbfa", 50: "#fef3f2", 100: "#fee4e2", 200: "#fecdca", 300: "#fda29b", 400: "#f97066", 500: "#f04438", 600: "#d92d20", 700: "#b42318", 800: "#912018", 900: "#7a271a", 950: "#55160c", }, // Warning colors warning: { 25: "#fffcf5", 50: "#fffaeb", 100: "#fef0c7", 200: "#fedf89", 300: "#fec84b", 400: "#fdb022", 500: "#f79009", 600: "#dc6803", 700: "#b54708", 800: "#93370d", 900: "#7a2e0e", 950: "#4e1d09", }, // Success colors success: { 25: "#f6fef9", 50: "#ecfdf3", 100: "#dcfae6", 200: "#abefc6", 300: "#75e0a7", 400: "#47cd89", 500: "#17b26a", 600: "#079455", 700: "#067647", 800: "#085d3a", 900: "#074d31", 950: "#053321", }, blue: { "25": "#f5faff", "50": "#eff8ff", "100": "#d1e9ff", "200": "#b2ddff", "300": "#84caff", "400": "#53b1fd", "500": "#2e90fa", "600": "#1570ef", "700": "#175cd3", "800": "#1849a9", "900": "#194185", "950": "#102a56", }, purple: { "25": "#fafaff", "50": "#f4f3ff", "100": "#ebe9fe", "200": "#d9d6fe", "300": "#bdb4fe", "400": "#9b8afb", "500": "#7a5af8", "600": "#6938ef", "700": "#5925dc", "800": "#4a1fb8", "900": "#3e1c96", "950": "#27115f", }, teal: { "25": "#f6fefc", "50": "#f0fdf9", "100": "#ccfbef", "200": "#99f6e0", "300": "#5fe9d0", "400": "#2ed3b7", "500": "#15b79e", "600": "#0e9384", "700": "#107569", "800": "#125d56", "900": "#134e48", "950": "#0a2926", }, }; export function buildLightTheme(overrides?: Partial<BaseTokens>): Theme { const modifiedTokens = mergeDeep(baseTokens, overrides || {}); return { type: "light", name: `light-${new Date().toISOString}`, tokens: { // Merge baseTokens and any token overrides here "--txt-primary": modifiedTokens["gray-light"][900], "--txt-primary-on-brand": modifiedTokens["base-white"], "--txt-secondary": modifiedTokens["gray-light"][700], "--txt-secondary-on-brand": modifiedTokens["brand"][200], "--txt-secondary-hover": modifiedTokens["gray-light"][800], "--txt-tertiary": modifiedTokens["gray-light"][600], "--txt-tertiary-on-brand": modifiedTokens["brand"][200], "--txt-tertiary-hover": modifiedTokens["gray-light"][700], "--txt-quaternary": modifiedTokens["gray-light"][500], "--txt-quaternary-on-brand": modifiedTokens["brand"][300], "--txt-disabled": modifiedTokens["gray-light"][500], "--txt-placeholder": modifiedTokens["gray-light"][500], "--txt-placeholder-subtle": modifiedTokens["gray-light"][300], "--txt-brand-primary": modifiedTokens["brand"][900], "--txt-brand-secondary": modifiedTokens["brand"][700], "--txt-brand-tertiary": modifiedTokens["brand"][600], "--txt-brand-tertiary-alt": modifiedTokens["brand"][600], "--txt-error-primary": modifiedTokens["error"][600], "--txt-warning-primary": modifiedTokens["warning"][600], "--txt-success-primary": modifiedTokens["success"][600], "--border-primary": modifiedTokens["gray-light"][300], "--border-secondary": modifiedTokens["gray-light"][200], "--border-tertiary": modifiedTokens["gray-light"][100], "--border-disabled": modifiedTokens["gray-light"][300], "--border-disabled-subtle": modifiedTokens["gray-light"][200], "--border-brand-subtle": modifiedTokens["brand"][200], "--border-brand": modifiedTokens["brand"][500], "--border-brand-alt": modifiedTokens["brand"][600], "--border-error": modifiedTokens["error"][500], "--border-error-subtle": modifiedTokens["error"][300], "--fg-primary": modifiedTokens["gray-light"][900], "--fg-secondary": modifiedTokens["gray-light"][700], "--fg-secondary-hover": modifiedTokens["gray-light"][800], "--fg-tertiary": modifiedTokens["gray-light"][600], "--fg-tertiary-hover": modifiedTokens["gray-light"][700], "--fg-quaternary": modifiedTokens["gray-light"][500], "--fg-quaternary-hover": modifiedTokens["gray-light"][600], "--fg-quinary": modifiedTokens["gray-light"][400], "--fg-quinary-hover": modifiedTokens["gray-light"][500], "--fg-senary": modifiedTokens["gray-light"][300], "--fg-white": modifiedTokens["base-white"], "--fg-disabled": modifiedTokens["gray-light"][400], "--fg-disabled-subtle": modifiedTokens["gray-light"][300], "--fg-brand-primary": modifiedTokens["brand"][600], "--fg-brand-primary-alt": modifiedTokens["brand"][600], "--fg-brand-secondary": modifiedTokens["brand"][500], "--fg-error-primary": modifiedTokens["error"][600], "--fg-error-secondary": modifiedTokens["error"][500], "--fg-warning-primary": modifiedTokens["warning"][600], "--fg-warning-secondary": modifiedTokens["warning"][500], "--fg-success-primary": modifiedTokens["success"][600], "--fg-success-secondary": modifiedTokens["success"][500], "--bg-primary": modifiedTokens["base-white"], "--bg-primary-alt": modifiedTokens["base-white"], "--bg-primary-hover": modifiedTokens["gray-light"][50], "--bg-primary-solid": modifiedTokens["gray-light"][950], "--bg-secondary": modifiedTokens["gray-light"][50], "--bg-secondary-alt": modifiedTokens["gray-light"][50], "--bg-secondary-hover": modifiedTokens["gray-light"][100], "--bg-secondary-subtle": modifiedTokens["gray-light"][25], "--bg-secondary-solid": modifiedTokens["gray-light"][600], "--bg-tertiary": modifiedTokens["gray-light"][100], "--bg-quaternary": modifiedTokens["gray-light"][200], "--bg-active": modifiedTokens["gray-light"][50], "--bg-disabled": modifiedTokens["gray-light"][100], "--bg-disabled-subtle": modifiedTokens["gray-light"][50], "--bg-overlay": modifiedTokens["gray-light"][950], "--bg-brand-primary": modifiedTokens["brand"][50], "--bg-brand-primary-alt": modifiedTokens["brand"][50], "--bg-brand-secondary": modifiedTokens["brand"][100], "--bg-brand-solid": modifiedTokens["brand"][600], "--bg-brand-solid-hover": modifiedTokens["brand"][700], "--bg-brand-section": modifiedTokens["brand"][800], "--bg-brand-section-subtle": modifiedTokens["brand"][700], "--bg-error-primary": modifiedTokens["error"][50], "--bg-error-secondary": modifiedTokens["error"][100], "--bg-error-solid": modifiedTokens["error"][600], "--bg-warning-primary": modifiedTokens["warning"][50], "--bg-warning-secondary": modifiedTokens["warning"][100], "--bg-warning-solid": modifiedTokens["warning"][600], "--bg-success-primary": modifiedTokens["success"][50], "--bg-success-secondary": modifiedTokens["success"][100], "--bg-success-solid": modifiedTokens["success"][600], "--utility-gray-50": modifiedTokens["gray-light"][50], "--utility-gray-100": modifiedTokens["gray-light"][100], "--utility-gray-200": modifiedTokens["gray-light"][200], "--utility-gray-300": modifiedTokens["gray-light"][300], "--utility-gray-400": modifiedTokens["gray-light"][400], "--utility-gray-500": modifiedTokens["gray-light"][500], "--utility-gray-600": modifiedTokens["gray-light"][600], "--utility-gray-700": modifiedTokens["gray-light"][700], "--utility-gray-800": modifiedTokens["gray-light"][800], "--utility-gray-900": modifiedTokens["gray-light"][900], "--utility-brand-50": modifiedTokens["brand"][50], "--utility-brand-50-alt": modifiedTokens["brand"][50], "--utility-brand-100": modifiedTokens["brand"][100], "--utility-brand-100-alt": modifiedTokens["brand"][100], "--utility-brand-200": modifiedTokens["brand"][200], "--utility-brand-200-alt": modifiedTokens["brand"][200], "--utility-brand-300": modifiedTokens["brand"][300], "--utility-brand-300-alt": modifiedTokens["brand"][300], "--utility-brand-400": modifiedTokens["brand"][400], "--utility-brand-400-alt": modifiedTokens["brand"][400], "--utility-brand-500": modifiedTokens["brand"][500], "--utility-brand-500-alt": modifiedTokens["brand"][500], "--utility-brand-600": modifiedTokens["brand"][600], "--utility-brand-600-alt": modifiedTokens["brand"][600], "--utility-brand-700": modifiedTokens["brand"][700], "--utility-brand-700-alt": modifiedTokens["brand"][700], "--utility-brand-800": modifiedTokens["brand"][800], "--utility-brand-800-alt": modifiedTokens["brand"][800], "--utility-brand-900": modifiedTokens["brand"][900], "--utility-brand-900-alt": modifiedTokens["brand"][900], "--utility-error-50": modifiedTokens["error"][50], "--utility-error-100": modifiedTokens["error"][100], "--utility-error-200": modifiedTokens["error"][200], "--utility-error-300": modifiedTokens["error"][300], "--utility-error-400": modifiedTokens["error"][400], "--utility-error-500": modifiedTokens["error"][500], "--utility-error-600": modifiedTokens["error"][600], "--utility-error-700": modifiedTokens["error"][700], "--utility-warning-50": modifiedTokens["warning"][50], "--utility-warning-100": modifiedTokens["warning"][100], "--utility-warning-200": modifiedTokens["warning"][200], "--utility-warning-300": modifiedTokens["warning"][300], "--utility-warning-400": modifiedTokens["warning"][400], "--utility-warning-500": modifiedTokens["warning"][500], "--utility-warning-600": modifiedTokens["warning"][600], "--utility-warning-700": modifiedTokens["warning"][700], "--utility-success-50": modifiedTokens["success"][50], "--utility-success-100": modifiedTokens["success"][100], "--utility-success-200": modifiedTokens["success"][200], "--utility-success-300": modifiedTokens["success"][300], "--utility-success-400": modifiedTokens["success"][400], "--utility-success-500": modifiedTokens["success"][500], "--utility-success-600": modifiedTokens["success"][600], "--utility-success-700": modifiedTokens["success"][700], "--utility-blue-50": modifiedTokens["blue"][50], "--utility-blue-100": modifiedTokens["blue"][100], "--utility-blue-200": modifiedTokens["blue"][200], "--utility-blue-300": modifiedTokens["blue"][300], "--utility-blue-400": modifiedTokens["blue"][400], "--utility-blue-500": modifiedTokens["blue"][500], "--utility-blue-600": modifiedTokens["blue"][600], "--utility-blue-700": modifiedTokens["blue"][700], "--utility-purple-50": modifiedTokens["purple"][50], "--utility-purple-100": modifiedTokens["purple"][100], "--utility-purple-200": modifiedTokens["purple"][200], "--utility-purple-300": modifiedTokens["purple"][300], "--utility-purple-400": modifiedTokens["purple"][400], "--utility-purple-500": modifiedTokens["purple"][500], "--utility-purple-600": modifiedTokens["purple"][600], "--utility-purple-700": modifiedTokens["purple"][700], "--utility-teal-50": modifiedTokens["teal"][50], "--utility-teal-100": modifiedTokens["teal"][100], "--utility-teal-200": modifiedTokens["teal"][200], "--utility-teal-300": modifiedTokens["teal"][300], "--utility-teal-400": modifiedTokens["teal"][400], "--utility-teal-500": modifiedTokens["teal"][500], "--utility-teal-600": modifiedTokens["teal"][600], "--utility-teal-700": modifiedTokens["teal"][700], "--alpha-white-10": modifiedTokens["base-white"] + "19", "--alpha-white-20": modifiedTokens["base-white"] + "33", "--alpha-white-30": modifiedTokens["base-white"] + "4D", "--alpha-white-40": modifiedTokens["base-white"] + "66", "--alpha-white-50": modifiedTokens["base-white"] + "80", "--alpha-white-60": modifiedTokens["base-white"] + "99", "--alpha-white-70": modifiedTokens["base-white"] + "B3", "--alpha-white-80": modifiedTokens["base-white"] + "CC", "--alpha-white-90": modifiedTokens["base-white"] + "E6", "--alpha-white-100": modifiedTokens["base-white"] + "FF", "--alpha-black-10": modifiedTokens["base-black"] + "19", "--alpha-black-20": modifiedTokens["base-black"] + "33", "--alpha-black-30": modifiedTokens["base-black"] + "4D", "--alpha-black-40": modifiedTokens["base-black"] + "66", "--alpha-black-50": modifiedTokens["base-black"] + "80", "--alpha-black-60": modifiedTokens["base-black"] + "99", "--alpha-black-70": modifiedTokens["base-black"] + "B3", "--alpha-black-80": modifiedTokens["base-black"] + "CC", "--alpha-black-90": modifiedTokens["base-black"] + "E6", "--alpha-black-100": modifiedTokens["base-black"] + "FF", }, }; } export function buildDarkTheme(overrides?: Partial<BaseTokens>): Theme { const modifiedTokens = mergeDeep(baseTokens, overrides || {}); return { type: "dark", name: `dark-${new Date().toISOString}`, tokens: { "--txt-primary": modifiedTokens["gray-light"][50], "--txt-primary-on-brand": modifiedTokens["gray-light"][50], "--txt-secondary": modifiedTokens["gray-light"][300], "--txt-secondary-on-brand": modifiedTokens["gray-light"][300], "--txt-secondary-hover": modifiedTokens["gray-light"][200], "--txt-tertiary": modifiedTokens["gray-light"][400], "--txt-tertiary-on-brand": modifiedTokens["gray-light"][400], "--txt-tertiary-hover": modifiedTokens["gray-light"][300], "--txt-quaternary": modifiedTokens["gray-light"][400], "--txt-quaternary-on-brand": modifiedTokens["brand"][400], "--txt-disabled": modifiedTokens["gray-light"][500], "--txt-placeholder": modifiedTokens["gray-light"][400], "--txt-placeholder-subtle": modifiedTokens["gray-light"][700], "--txt-brand-primary": modifiedTokens["gray-light"][50], "--txt-brand-secondary": modifiedTokens["gray-light"][300], "--txt-brand-tertiary": modifiedTokens["gray-light"][400], "--txt-brand-tertiary-alt": modifiedTokens["gray-light"][50], "--txt-error-primary": modifiedTokens["error"][400], "--txt-warning-primary": modifiedTokens["warning"][400], "--txt-success-primary": modifiedTokens["success"][400], "--border-primary": modifiedTokens["gray-dark"][700], "--border-secondary": modifiedTokens["gray-dark"][800], "--border-tertiary": modifiedTokens["gray-dark"][800], "--border-disabled": modifiedTokens["gray-dark"][700], "--border-disabled-subtle": modifiedTokens["gray-dark"][800], "--border-brand": modifiedTokens["brand"][400], "--border-brand-alt": modifiedTokens["gray-dark"][700], "--border-brand-subtle": modifiedTokens["brand"][300], "--border-error": modifiedTokens["error"][400], "--border-error-subtle": modifiedTokens["error"][400], "--fg-primary": modifiedTokens["base-white"], "--fg-secondary": modifiedTokens["gray-dark"][300], "--fg-secondary-hover": modifiedTokens["gray-dark"][200], "--fg-tertiary": modifiedTokens["gray-dark"][400], "--fg-tertiary-hover": modifiedTokens["gray-dark"][300], "--fg-quaternary": modifiedTokens["gray-dark"][400], "--fg-quaternary-hover": modifiedTokens["gray-dark"][300], "--fg-quinary": modifiedTokens["gray-dark"][500], "--fg-quinary-hover": modifiedTokens["gray-dark"][400], "--fg-senary": modifiedTokens["gray-dark"][600], "--fg-white": modifiedTokens["base-white"], "--fg-disabled": modifiedTokens["gray-dark"][500], "--fg-disabled-subtle": modifiedTokens["gray-dark"][600], "--fg-brand-primary": modifiedTokens["brand"][500], "--fg-brand-primary-alt": modifiedTokens["gray-dark"][300], "--fg-brand-secondary": modifiedTokens["brand"][500], "--fg-error-primary": modifiedTokens["error"][500], "--fg-error-secondary": modifiedTokens["error"][400], "--fg-warning-primary": modifiedTokens["warning"][500], "--fg-warning-secondary": modifiedTokens["warning"][400], "--fg-success-primary": modifiedTokens["success"][500], "--fg-success-secondary": modifiedTokens["success"][400], "--bg-primary": modifiedTokens["gray-dark"][950], "--bg-primary-alt": modifiedTokens["base-white"][900], "--bg-primary-hover": modifiedTokens["gray-dark"][800], "--bg-primary-solid": modifiedTokens["gray-dark"][900], "--bg-secondary": modifiedTokens["gray-dark"][900], "--bg-secondary-alt": modifiedTokens["gray-dark"][950], "--bg-secondary-hover": modifiedTokens["gray-dark"][800], "--bg-secondary-subtle": modifiedTokens["gray-dark"][900], "--bg-secondary-solid": modifiedTokens["gray-dark"][600], "--bg-tertiary": modifiedTokens["gray-dark"][800], "--bg-quaternary": modifiedTokens["gray-dark"][700], "--bg-active": modifiedTokens["gray-dark"][800], "--bg-disabled": modifiedTokens["gray-dark"][800], "--bg-disabled-subtle": modifiedTokens["gray-dark"][900], "--bg-overlay": modifiedTokens["gray-dark"][800], "--bg-brand-primary": modifiedTokens["brand"][500], "--bg-brand-primary-alt": modifiedTokens["gray-dark"][800], "--bg-brand-secondary": modifiedTokens["brand"][600], "--bg-brand-solid": modifiedTokens["brand"][600], "--bg-brand-solid-hover": modifiedTokens["brand"][500], "--bg-brand-section": modifiedTokens["gray-dark"][800], "--bg-brand-section-subtle": modifiedTokens["gray-dark"][950], "--bg-error-primary": modifiedTokens["error"][500], "--bg-error-secondary": modifiedTokens["error"][600], "--bg-error-solid": modifiedTokens["error"][600], "--bg-warning-primary": modifiedTokens["warning"][500], "--bg-warning-secondary": modifiedTokens["warning"][600], "--bg-warning-solid": modifiedTokens["warning"][600], "--bg-success-primary": modifiedTokens["success"][500], "--bg-success-secondary": modifiedTokens["success"][600], "--bg-success-solid": modifiedTokens["success"][600], "--utility-gray-50": modifiedTokens["gray-dark"][900], "--utility-gray-100": modifiedTokens["gray-dark"][800], "--utility-gray-200": modifiedTokens["gray-dark"][700], "--utility-gray-300": modifiedTokens["gray-dark"][700], "--utility-gray-400": modifiedTokens["gray-dark"][600], "--utility-gray-500": modifiedTokens["gray-dark"][500], "--utility-gray-600": modifiedTokens["gray-dark"][400], "--utility-gray-700": modifiedTokens["gray-dark"][300], "--utility-gray-800": modifiedTokens["gray-dark"][200], "--utility-gray-900": modifiedTokens["gray-dark"][100], "--utility-brand-50": modifiedTokens["brand"][950], "--utility-brand-50-alt": modifiedTokens["gray-dark"][900], "--utility-brand-100": modifiedTokens["brand"][900], "--utility-brand-100-alt": modifiedTokens["gray-dark"][800], "--utility-brand-200": modifiedTokens["brand"][800], "--utility-brand-200-alt": modifiedTokens["gray-dark"][700], "--utility-brand-300": modifiedTokens["brand"][700], "--utility-brand-300-alt": modifiedTokens["gray-dark"][700], "--utility-brand-400": modifiedTokens["brand"][600], "--utility-brand-400-alt": modifiedTokens["gray-dark"][600], "--utility-brand-500": modifiedTokens["brand"][500], "--utility-brand-500-alt": modifiedTokens["gray-dark"][500], "--utility-brand-600": modifiedTokens["brand"][400], "--utility-brand-600-alt": modifiedTokens["gray-dark"][400], "--utility-brand-700": modifiedTokens["brand"][300], "--utility-brand-700-alt": modifiedTokens["gray-dark"][300], "--utility-brand-800": modifiedTokens["brand"][200], "--utility-brand-800-alt": modifiedTokens["gray-dark"][200], "--utility-brand-900": modifiedTokens["brand"][100], "--utility-brand-900-alt": modifiedTokens["gray-dark"][100], "--utility-error-50": modifiedTokens["error"][950], "--utility-error-100": modifiedTokens["error"][900], "--utility-error-200": modifiedTokens["error"][800], "--utility-error-300": modifiedTokens["error"][700], "--utility-error-400": modifiedTokens["error"][600], "--utility-error-500": modifiedTokens["error"][500], "--utility-error-600": modifiedTokens["error"][400], "--utility-error-700": modifiedTokens["error"][300], "--utility-warning-50": modifiedTokens["warning"][950], "--utility-warning-100": modifiedTokens["warning"][900], "--utility-warning-200": modifiedTokens["warning"][800], "--utility-warning-300": modifiedTokens["warning"][700], "--utility-warning-400": modifiedTokens["warning"][600], "--utility-warning-500": modifiedTokens["warning"][500], "--utility-warning-600": modifiedTokens["warning"][400], "--utility-warning-700": modifiedTokens["warning"][300], "--utility-success-50": modifiedTokens["success"][50], "--utility-success-100": modifiedTokens["success"][900], "--utility-success-200": modifiedTokens["success"][800], "--utility-success-300": modifiedTokens["success"][700], "--utility-success-400": modifiedTokens["success"][600], "--utility-success-500": modifiedTokens["success"][500], "--utility-success-600": modifiedTokens["success"][400], "--utility-success-700": modifiedTokens["success"][300], "--utility-blue-50": modifiedTokens["blue"][50], "--utility-blue-100": modifiedTokens["blue"][900], "--utility-blue-200": modifiedTokens["blue"][800], "--utility-blue-300": modifiedTokens["blue"][700], "--utility-blue-400": modifiedTokens["blue"][600], "--utility-blue-500": modifiedTokens["blue"][500], "--utility-blue-600": modifiedTokens["blue"][400], "--utility-blue-700": modifiedTokens["blue"][300], "--utility-teal-50": modifiedTokens["teal"][50], "--utility-teal-100": modifiedTokens["teal"][900], "--utility-teal-200": modifiedTokens["teal"][800], "--utility-teal-300": modifiedTokens["teal"][700], "--utility-teal-400": modifiedTokens["teal"][600], "--utility-teal-500": modifiedTokens["teal"][500], "--utility-teal-600": modifiedTokens["teal"][400], "--utility-teal-700": modifiedTokens["teal"][300], "--utility-purple-50": modifiedTokens["purple"][50], "--utility-purple-100": modifiedTokens["purple"][900], "--utility-purple-200": modifiedTokens["purple"][800], "--utility-purple-300": modifiedTokens["purple"][700], "--utility-purple-400": modifiedTokens["purple"][600], "--utility-purple-500": modifiedTokens["purple"][500], "--utility-purple-600": modifiedTokens["purple"][400], "--utility-purple-700": modifiedTokens["purple"][300], "--alpha-white-10": modifiedTokens["gray-dark"]["950"] + "19", "--alpha-white-20": modifiedTokens["gray-dark"]["950"] + "33", "--alpha-white-30": modifiedTokens["gray-dark"]["950"] + "4D", "--alpha-white-40": modifiedTokens["gray-dark"]["950"] + "66", "--alpha-white-50": modifiedTokens["gray-dark"]["950"] + "80", "--alpha-white-60": modifiedTokens["gray-dark"]["950"] + "99", "--alpha-white-70": modifiedTokens["gray-dark"]["950"] + "B3", "--alpha-white-80": modifiedTokens["gray-dark"]["950"] + "CC", "--alpha-white-90": modifiedTokens["gray-dark"]["950"] + "E6", "--alpha-white-100": modifiedTokens["gray-dark"]["950"] + "FF", "--alpha-black-10": modifiedTokens["base-white"] + "19", "--alpha-black-20": modifiedTokens["base-white"] + "33", "--alpha-black-30": modifiedTokens["base-white"] + "4D", "--alpha-black-40": modifiedTokens["base-white"] + "66", "--alpha-black-50": modifiedTokens["base-white"] + "80", "--alpha-black-60": modifiedTokens["base-white"] + "99", "--alpha-black-70": modifiedTokens["base-white"] + "B3", "--alpha-black-80": modifiedTokens["base-white"] + "CC", "--alpha-black-90": modifiedTokens["base-white"] + "E6", "--alpha-black-100": modifiedTokens["base-white"] + "FF", }, }; }