@evolve.ui/theme-system 1.0.0 → 1.1.0

package/src/themes/ProfessionalBrand.ts

@@ -0,0 +1,166 @@
+import {
+    colorCritical400,
+    colorCritical50,
+    colorCritical500,
+    colorInfo400,
+    colorInfo50,
+    colorInfo600,
+    colorInfo700,
+    colorPrimary500,
+    colorPrimary700,
+    colorPrimary900,
+    colorSecondary50,
+    colorSuccess300,
+    colorSuccess50,
+    colorSuccess700,
+    colorSuccess900,
+    colorSurface100,
+    colorSurface200,
+    colorSurface300,
+    colorSurface50,
+    colorSurface500,
+    colorSurface900,
+    colorTertiary50,
+    colorWarning300,
+    colorWarning50,
+    colorWarning500,
+    colorWarning600,
+    colorWarning800,
+} from '../tailwind/cssVars';
+import { colorStepArrayToObject, generateNormalColorSteps, generateSurfaceColorSteps } from '../utils/color';
+import { wrapOpacity, wrapVar } from '../utils/wrapVar';
+import { ColorAliasesObject, NonColorCSSVariables } from './generateCSSVars';
+
+// "Boardroom Blue" palette (DS-83, approved 2026-07-12): deep corporate-blue primary that is no
+// longer identical to the info status — info moves to its own cyan family (additive key). Key
+// names are stable API (buildTheme exposes them); comments give the actual hue.
+export const coreColors = {
+    amber: colorStepArrayToObject(generateNormalColorSteps('#B45309')), // burnt amber
+    blue: colorStepArrayToObject(generateNormalColorSteps('#1D4ED8')), // corporate blue
+    cyan: colorStepArrayToObject(generateNormalColorSteps('#0C6478')), // info cyan
+    green: colorStepArrayToObject(generateNormalColorSteps('#047857')), // deep green
+    indigo: colorStepArrayToObject(generateNormalColorSteps('#4F46E5')), // refined indigo
+    neutral: colorStepArrayToObject(generateSurfaceColorSteps('#525B6E', true)), // cool slate-gray
+    red: colorStepArrayToObject(generateNormalColorSteps('#D42424')), // signal red
+    slate: colorStepArrayToObject(generateNormalColorSteps('#475569')), // slate
+};
+
+export const colorAliases = {
+    critical: coreColors.red,
+    info: coreColors.cyan,
+    primary: coreColors.blue,
+    secondary: coreColors.slate,
+    success: coreColors.green,
+    surface: coreColors.neutral,
+    tertiary: coreColors.indigo,
+    warning: coreColors.amber,
+} satisfies ColorAliasesObject;
+
+export const nonColorVariables = {
+    '--box-shadow-01': `0px 4px 4px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
+    '--box-shadow-02': `0px 1px 4px ${wrapOpacity(wrapVar(colorSurface300), 50)}, 0px 1px 8px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
+    '--box-shadow-03': `0px 2px 8px ${wrapOpacity(wrapVar(colorSurface300), 50)}, 0px 4px 16px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
+    '--box-shadow-04': `0px 3px 12px ${wrapOpacity(wrapVar(colorSurface500), 50)}, 0px 6px 24px ${wrapOpacity(wrapVar(colorSurface300), 50)}`,
+    '--box-shadow-05': `0px -4px 4px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
+    '--button-border-radius': '8px',
+    '--checkbox-border-radius': '4px',
+    '--color-background-critical-dark': wrapVar(colorCritical500),
+    '--color-background-critical-light': wrapVar(colorCritical50),
+    '--color-background-disabled': wrapVar(colorSurface200),
+    '--color-background-hover': wrapVar(colorSurface900),
+    '--color-background-hover-inverse': wrapVar(colorSurface50),
+    '--color-background-info-dark': wrapVar(colorInfo600),
+    '--color-background-info-light': wrapVar(colorInfo50),
+    '--color-background-inverse': wrapVar(colorPrimary900),
+    '--color-background-overlay': wrapVar(colorSurface900),
+    '--color-background-pressed': wrapVar(colorSurface900),
+    '--color-background-pressed-inverse': wrapVar(colorSurface50),
+    '--color-background-primary': wrapVar(colorSurface50),
+    '--color-background-secondary': wrapVar(colorSecondary50),
+    '--color-background-subdued': wrapVar(colorSurface100),
+    '--color-background-success-dark': wrapVar(colorSuccess900),
+    '--color-background-success-light': wrapVar(colorSuccess50),
+    '--color-background-tertiary': wrapVar(colorTertiary50),
+    '--color-background-warning-dark': wrapVar(colorWarning500),
+    '--color-background-warning-light': wrapVar(colorWarning50),
+    '--color-border-black': wrapVar(colorSurface900),
+    '--color-border-critical': wrapVar(colorCritical400),
+    '--color-border-disabled': wrapVar(colorSurface300),
+    '--color-border-hover': wrapVar(colorPrimary700),
+    '--color-border-info': wrapVar(colorInfo400),
+    '--color-border-inverse': wrapVar(colorSurface50),
+    '--color-border-primary': wrapVar(colorSurface300),
+    '--color-border-secondary': wrapVar(colorSurface200),
+    '--color-border-selected': wrapVar(colorPrimary500),
+    '--color-border-success': wrapVar(colorSuccess300),
+    '--color-border-tertiary': wrapVar(colorSurface100),
+    '--color-border-warning': wrapVar(colorWarning300),
+    '--color-focus-inverse': wrapVar(colorSurface50),
+    '--color-focus-primary': wrapVar(colorPrimary500),
+    '--color-icon-critical': wrapVar(colorCritical400),
+    '--color-icon-disabled': wrapVar(colorSurface300),
+    '--color-icon-info': wrapVar(colorInfo400),
+    '--color-icon-inverse': wrapVar(colorSurface50),
+    '--color-icon-primary': wrapVar(colorSurface500),
+    '--color-icon-secondary': wrapVar(colorPrimary500),
+    '--color-icon-success': wrapVar(colorSuccess700),
+    '--color-icon-warning': wrapVar(colorWarning600),
+    '--color-link-disabled': wrapVar(colorSurface300),
+    '--color-link-hover': wrapVar(colorPrimary700),
+    '--color-link-inverse': wrapVar(colorSurface50),
+    '--color-link-inverse-disabled': wrapVar(colorSurface300),
+    '--color-link-inverse-hover': wrapVar(colorSurface100),
+    '--color-link-inverse-pressed': wrapVar(colorSurface200),
+    '--color-link-monochrome': wrapVar(colorSurface900),
+    '--color-link-pressed': wrapVar(colorPrimary900),
+    '--color-link-primary': wrapVar(colorPrimary500),
+    '--color-link-secondary': wrapVar(colorSurface500),
+    '--color-text-critical': wrapVar(colorCritical500),
+    '--color-text-disabled': wrapVar(colorSurface300),
+    '--color-text-inactive': wrapVar(colorSurface300),
+    '--color-text-info': wrapVar(colorInfo700),
+    '--color-text-inverse': wrapVar(colorSurface50),
+    '--color-text-primary': wrapVar(colorSurface900),
+    '--color-text-secondary': wrapVar(colorSurface500),
+    '--color-text-success': wrapVar(colorSuccess900),
+    '--color-text-warning': wrapVar(colorWarning800),
+    '--container-border-radius': '12px',
+    '--font-family-primary': "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    '--font-family-secondary': "'Georgia', serif",
+    '--font-size-button-100': '14px',
+    '--font-size-button-200': '12px',
+    '--font-weight-body-primary': '400',
+    '--font-weight-body-secondary': '400',
+    '--font-weight-button': '600',
+    '--font-weight-caption': '400',
+    '--font-weight-h1': '400',
+    '--font-weight-h2': '400',
+    '--font-weight-h3': '400',
+    '--font-weight-h4': '400',
+    '--font-weight-h5': '600',
+    '--font-weight-h6': '600',
+    '--font-weight-label-mini': '400',
+    '--font-weight-label-strong': '600',
+    '--input-border-radius': '6px',
+    '--letter-spacing-body-primary': '0.2px',
+    '--letter-spacing-body-secondary': '0.2px',
+    '--letter-spacing-button': '1px',
+    '--letter-spacing-caption': '0.2px',
+    '--letter-spacing-h1': '0.2px',
+    '--letter-spacing-h1-mobile': '0.2px',
+    '--letter-spacing-h2': '0.2px',
+    '--letter-spacing-h2-mobile': '0.2px',
+    '--letter-spacing-h3': '0.2px',
+    '--letter-spacing-h3-mobile': '0.2px',
+    '--letter-spacing-h4': '0.2px',
+    '--letter-spacing-h5': '0.2px',
+    '--letter-spacing-h6': '1px',
+    '--letter-spacing-label-mini': '1px',
+    '--letter-spacing-label-strong': '0.2px',
+    '--search-input-border-radius': '24px',
+    '--text-transform-button': 'uppercase',
+    '--text-transform-h6': 'uppercase',
+    '--text-transform-label-mini': 'uppercase',
+    '--width-dense': '1200px',
+    '--width-page': '1644px',
+} satisfies Record<NonColorCSSVariables, string>;

package/src/themes/allThemes.ts

@@ -0,0 +1,12 @@
+import type { Brands } from './brands';
+import type { CleanTheme } from './themeType';
+
+import { basketballTrainingTheme } from './runtime/basketballTraining';
+import { defaultTheme } from './runtime/default';
+import { professionalBrandTheme } from './runtime/professionalBrand';
+
+export const allThemes = {
+    BasketballTraining: basketballTrainingTheme,
+    Default: defaultTheme,
+    ProfessionalBrand: professionalBrandTheme,
+} as const satisfies Record<Brands, CleanTheme>;

package/src/themes/brands.ts

@@ -0,0 +1,37 @@
+export type Brands = 'BasketballTraining' | 'ProfessionalBrand' | 'Default';
+
+export const brands: Brands[] = ['BasketballTraining', 'ProfessionalBrand', 'Default'];
+
+export const brandsToCSS: Record<Brands, string> = {
+    BasketballTraining: 'brand-basketball',
+    Default: 'brand-default',
+    ProfessionalBrand: 'brand-professional',
+};
+
+export type BrandRegistryEntry = {
+    cssClass: string;
+    label: string;
+    storybookKey: Brands;
+    themeKey: Brands;
+};
+
+export const brandRegistry = {
+    BasketballTraining: {
+        cssClass: brandsToCSS.BasketballTraining,
+        label: 'Basketball Training',
+        storybookKey: 'BasketballTraining',
+        themeKey: 'BasketballTraining',
+    },
+    Default: {
+        cssClass: brandsToCSS.Default,
+        label: 'Default (Neutral)',
+        storybookKey: 'Default',
+        themeKey: 'Default',
+    },
+    ProfessionalBrand: {
+        cssClass: brandsToCSS.ProfessionalBrand,
+        label: 'Professional Brand',
+        storybookKey: 'ProfessionalBrand',
+        themeKey: 'ProfessionalBrand',
+    },
+} as const satisfies Record<Brands, BrandRegistryEntry>;

package/src/themes/common.ts

@@ -0,0 +1,65 @@
+import type { Theme } from './themeType';
+
+import { borderRadius } from '../tailwind/borderRadius';
+import { screens } from '../tailwind/screens';
+import { spacing as tailwindSpacing } from '../tailwind/spacing';
+
+const parsePx = (value: string): number => Number(value.replace('px', ''));
+
+export const spacing = {
+    lg: tailwindSpacing.lg,
+    lgValue: parsePx(tailwindSpacing.lg),
+    md: tailwindSpacing.md,
+    mdValue: parsePx(tailwindSpacing.md),
+    sm: tailwindSpacing.sm,
+    smValue: parsePx(tailwindSpacing.sm),
+    xl: tailwindSpacing.xl,
+    xlValue: parsePx(tailwindSpacing.xl),
+    xs: tailwindSpacing.xs,
+    xsValue: parsePx(tailwindSpacing.xs),
+    xxl: tailwindSpacing['2xl'],
+    xxlValue: parsePx(tailwindSpacing['2xl']),
+    xxs: tailwindSpacing['2xs'],
+    xxsValue: parsePx(tailwindSpacing['2xs']),
+    xxxl: tailwindSpacing['3xl'],
+    xxxlValue: parsePx(tailwindSpacing['3xl']),
+    xxxs: tailwindSpacing['3xs'],
+    xxxsValue: parsePx(tailwindSpacing['3xs']),
+} as const satisfies Theme['spacing'];
+
+export const breakpoints = {
+    lgMax: screens.lgMax.max,
+    lgMaxValue: parsePx(screens.lgMax.max),
+    lgMin: screens.lgMin.min,
+    lgMinValue: parsePx(screens.lgMin.min),
+    mdMax: screens.mdMax.max,
+    mdMaxValue: parsePx(screens.mdMax.max),
+    mdMin: screens.mdMin.min,
+    mdMinValue: parsePx(screens.mdMin.min),
+    smMax: screens.smMax.max,
+    smMaxValue: parsePx(screens.smMax.max),
+    smMin: screens.smMin.min,
+    smMinValue: parsePx(screens.smMin.min),
+    xlMin: screens.xlMin.min,
+    xlMinValue: parsePx(screens.xlMin.min),
+    xsMax: screens.xsMax.max,
+    xsMaxValue: parsePx(screens.xsMax.max),
+} as const satisfies Theme['breakpoints'];
+
+export const radius = {
+    circle: '50%',
+    lg: borderRadius.lg,
+    md: borderRadius.md,
+    sm: borderRadius.sm,
+    xl: borderRadius.xl,
+    xs: borderRadius.xs,
+    zero: borderRadius.none,
+} as const satisfies Theme['border']['radius'];
+
+export const width = {
+    lg: '8px',
+    md: '4px',
+    sm: '2px',
+    xs: '1px',
+    xxs: '0.5px',
+} as const satisfies Theme['border']['width'];

package/src/themes/generate.ts

@@ -0,0 +1,46 @@
+/**
+ * CSS Generation Script
+ *
+ * Generates brand theme CSS files from TypeScript definitions.
+ * Run after tsup build: `node dist/themes/generate.js`
+ *
+ * Output: dist/css/<BrandName>.css for each brand
+ */
+
+import { mkdirSync } from 'fs';
+
+import {
+    nonColorVariables as BasketballTraining,
+    colorAliases as BasketballTrainingAliases,
+} from './BasketballTraining';
+import { nonColorVariables as Default, colorAliases as DefaultAliases } from './Default';
+import { generateCSSVars, makeColorCSSVarsFromObject } from './generateCSSVars';
+import { nonColorVariables as ProfessionalBrand, colorAliases as ProfessionalBrandAliases } from './ProfessionalBrand';
+import { writeToCSSFile } from './writeToCSSFile';
+
+const distDir = `${__dirname}/../css`;
+mkdirSync(distDir, { recursive: true });
+
+writeToCSSFile(
+    generateCSSVars(
+        { ...BasketballTraining, ...makeColorCSSVarsFromObject(BasketballTrainingAliases) },
+        'brand-basketball'
+    ),
+    `${distDir}/BasketballTraining.css`
+);
+
+writeToCSSFile(
+    generateCSSVars(
+        { ...ProfessionalBrand, ...makeColorCSSVarsFromObject(ProfessionalBrandAliases) },
+        'brand-professional'
+    ),
+    `${distDir}/ProfessionalBrand.css`
+);
+
+writeToCSSFile(
+    generateCSSVars({ ...Default, ...makeColorCSSVarsFromObject(DefaultAliases) }, 'brand-default'),
+    `${distDir}/Default.css`
+);
+
+// eslint-disable-next-line no-console
+console.log('✅ Generated theme CSS files in dist/css/');

package/src/themes/generateCSSVars.ts

@@ -0,0 +1,123 @@
+import type * as CSSVars from '../tailwind/cssVars';
+
+import { StepObject, steps } from '../utils/color';
+
+export type CSSVariables = (typeof CSSVars)[keyof typeof CSSVars];
+export type NonColorCSSVariables = Exclude<
+    CSSVariables,
+    | '--color-primary-50'
+    | '--color-primary-100'
+    | '--color-primary-200'
+    | '--color-primary-300'
+    | '--color-primary-400'
+    | '--color-primary-500'
+    | '--color-primary-600'
+    | '--color-primary-700'
+    | '--color-primary-800'
+    | '--color-primary-900'
+    | '--color-secondary-50'
+    | '--color-secondary-100'
+    | '--color-secondary-200'
+    | '--color-secondary-300'
+    | '--color-secondary-400'
+    | '--color-secondary-500'
+    | '--color-secondary-600'
+    | '--color-secondary-700'
+    | '--color-secondary-800'
+    | '--color-secondary-900'
+    | '--color-tertiary-50'
+    | '--color-tertiary-100'
+    | '--color-tertiary-200'
+    | '--color-tertiary-300'
+    | '--color-tertiary-400'
+    | '--color-tertiary-500'
+    | '--color-tertiary-600'
+    | '--color-tertiary-700'
+    | '--color-tertiary-800'
+    | '--color-tertiary-900'
+    | '--color-info-50'
+    | '--color-info-100'
+    | '--color-info-200'
+    | '--color-info-300'
+    | '--color-info-400'
+    | '--color-info-500'
+    | '--color-info-600'
+    | '--color-info-700'
+    | '--color-info-800'
+    | '--color-info-900'
+    | '--color-success-50'
+    | '--color-success-100'
+    | '--color-success-200'
+    | '--color-success-300'
+    | '--color-success-400'
+    | '--color-success-500'
+    | '--color-success-600'
+    | '--color-success-700'
+    | '--color-success-800'
+    | '--color-success-900'
+    | '--color-critical-50'
+    | '--color-critical-100'
+    | '--color-critical-200'
+    | '--color-critical-300'
+    | '--color-critical-400'
+    | '--color-critical-500'
+    | '--color-critical-600'
+    | '--color-critical-700'
+    | '--color-critical-800'
+    | '--color-critical-900'
+    | '--color-warning-50'
+    | '--color-warning-100'
+    | '--color-warning-200'
+    | '--color-warning-300'
+    | '--color-warning-400'
+    | '--color-warning-500'
+    | '--color-warning-600'
+    | '--color-warning-700'
+    | '--color-warning-800'
+    | '--color-warning-900'
+    | '--color-surface-50'
+    | '--color-surface-100'
+    | '--color-surface-200'
+    | '--color-surface-300'
+    | '--color-surface-400'
+    | '--color-surface-500'
+    | '--color-surface-600'
+    | '--color-surface-700'
+    | '--color-surface-800'
+    | '--color-surface-900'
+>;
+
+export type ColorAliases =
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'critical'
+    | 'surface';
+export type ColorAliasesObject = Record<ColorAliases, StepObject>;
+
+export const makeColorCSSVarsFromObject = (colors: ColorAliasesObject): Record<string, string> => {
+    const colorVars: Record<string, string> = {};
+    for (const [key, value] of Object.entries(colors)) {
+        for (const shade of steps) {
+            const varName = `--color-${key}-${shade}`;
+            colorVars[varName] = `${value[shade]}`;
+        }
+    }
+
+    return colorVars;
+};
+
+export const generateCSSVars = (vars: Record<string, string>, className: string): string => {
+    const classBlock = `.${className} {\n${Object.entries(vars)
+        .map(([key, value]) => `    ${key}: ${value};`)
+        .join('\n')}\n}`;
+
+    const rootBlock = `:root {\n${Object.entries(vars)
+        .map(([key, value]) => `    ${key}: ${value};`)
+        .join('\n')}\n}`;
+
+    return `${classBlock}\n\n${rootBlock}`;
+};

package/src/themes/runtime/basketballTraining.ts

@@ -0,0 +1,3 @@
+import { buildRuntimeTheme } from './buildTheme';
+
+export const basketballTrainingTheme = buildRuntimeTheme('BasketballTraining');