@evolve.ui/theme-system 1.0.1 → 1.2.0

package/src/themes/runtime/buildTheme.ts

@@ -0,0 +1,411 @@
+import type { Brands } from '../brands';
+import type { CleanTheme, Theme, TypographySpec } from '../themeType';
+
+import { boxShadow } from '../../tailwind/boxShadow';
+import * as cssVars from '../../tailwind/cssVars';
+import { fontFamily } from '../../tailwind/fontFamily';
+import { brandSources } from '../brandSources';
+import { breakpoints, radius, spacing, width } from '../common';
+
+const variable = (name: string): string => `var(${name})`;
+
+type TextSpecInput = Omit<TypographySpec, 'family' | 'style'> & {
+    family?: TypographySpec['family'];
+};
+
+const textSpec = ({
+    family = fontFamily.primary,
+    height,
+    size,
+    spacing: letterSpacing,
+    transform,
+    weight,
+}: TextSpecInput): TypographySpec => ({
+    family,
+    height,
+    size,
+    spacing: letterSpacing,
+    style: 'normal',
+    transform,
+    weight,
+});
+
+const buildTypography = (): Theme['typography'] => {
+    const bodyPrimary = textSpec({
+        height: '24px',
+        size: '16px',
+        spacing: variable(cssVars.letterSpacingBodyPrimary),
+        weight: variable(cssVars.fontWeightBodyPrimary),
+    });
+    const bodySecondary = textSpec({
+        height: '22px',
+        size: '14px',
+        spacing: variable(cssVars.letterSpacingBodySecondary),
+        weight: variable(cssVars.fontWeightBodySecondary),
+    });
+
+    return {
+        body: {
+            primary: bodyPrimary,
+            secondary: bodySecondary,
+        },
+        button: {
+            '100': textSpec({
+                height: '20px',
+                size: variable(cssVars.fontSizeButton100),
+                spacing: variable(cssVars.letterSpacingButton),
+                transform: variable(cssVars.textTransformButton),
+                weight: variable(cssVars.fontWeightButton),
+            }),
+            '200': textSpec({
+                height: '18px',
+                size: variable(cssVars.fontSizeButton200),
+                spacing: variable(cssVars.letterSpacingButton),
+                transform: variable(cssVars.textTransformButton),
+                weight: variable(cssVars.fontWeightButton),
+            }),
+        },
+        caption: {
+            '100': textSpec({
+                height: '18px',
+                size: '12px',
+                spacing: variable(cssVars.letterSpacingCaption),
+                weight: variable(cssVars.fontWeightCaption),
+            }),
+        },
+        heading: {
+            '000': textSpec({
+                family: fontFamily.secondary,
+                height: '56px',
+                size: '40px',
+                spacing: variable(cssVars.letterSpacingH1),
+                weight: variable(cssVars.fontWeightH1),
+            }),
+            '100': {
+                ...textSpec({
+                    family: fontFamily.secondary,
+                    height: '48px',
+                    size: '32px',
+                    spacing: variable(cssVars.letterSpacingH1),
+                    weight: variable(cssVars.fontWeightH1),
+                }),
+                mobile: textSpec({
+                    family: fontFamily.secondary,
+                    height: '36px',
+                    size: '24px',
+                    spacing: variable(cssVars.letterSpacingH1Mobile),
+                    weight: variable(cssVars.fontWeightH1),
+                }),
+            },
+            '200': {
+                ...textSpec({
+                    family: fontFamily.secondary,
+                    height: '36px',
+                    size: '24px',
+                    spacing: variable(cssVars.letterSpacingH2),
+                    weight: variable(cssVars.fontWeightH2),
+                }),
+                mobile: textSpec({
+                    family: fontFamily.secondary,
+                    height: '30px',
+                    size: '20px',
+                    spacing: variable(cssVars.letterSpacingH2Mobile),
+                    weight: variable(cssVars.fontWeightH2),
+                }),
+            },
+            '300': {
+                ...textSpec({
+                    family: fontFamily.secondary,
+                    height: '30px',
+                    size: '20px',
+                    spacing: variable(cssVars.letterSpacingH3),
+                    weight: variable(cssVars.fontWeightH3),
+                }),
+                // Mirrors `.hui-text-h3`'s mobile block in `tailwind/text.ts` — keep in lockstep
+                // (DS-97 / SA-04; `tailwind/text.spec.ts` binds the two).
+                mobile: textSpec({
+                    family: fontFamily.secondary,
+                    height: '27px',
+                    size: '18px',
+                    spacing: variable(cssVars.letterSpacingH3Mobile),
+                    weight: variable(cssVars.fontWeightH3),
+                }),
+            },
+            '400': textSpec({
+                family: fontFamily.secondary,
+                height: '24px',
+                size: '16px',
+                spacing: variable(cssVars.letterSpacingH4),
+                weight: variable(cssVars.fontWeightH4),
+            }),
+            '500': textSpec({
+                height: '24px',
+                size: '16px',
+                spacing: variable(cssVars.letterSpacingH5),
+                weight: variable(cssVars.fontWeightH5),
+            }),
+            '600': textSpec({
+                height: '22px',
+                size: '14px',
+                spacing: variable(cssVars.letterSpacingH6),
+                transform: variable(cssVars.textTransformH6),
+                weight: variable(cssVars.fontWeightH6),
+            }),
+        },
+        label: {
+            mini: textSpec({
+                height: '14px',
+                size: '12px',
+                spacing: variable(cssVars.letterSpacingLabelMini),
+                transform: variable(cssVars.textTransformLabelMini),
+                weight: variable(cssVars.fontWeightLabelMini),
+            }),
+            strong: textSpec({
+                height: '22px',
+                size: '14px',
+                spacing: variable(cssVars.letterSpacingLabelStrong),
+                weight: variable(cssVars.fontWeightLabelStrong),
+            }),
+        },
+    };
+};
+
+export const buildRuntimeTheme = (brand: Brands): CleanTheme => {
+    const source = brandSources[brand];
+    const v = variable;
+
+    return {
+        border: {
+            radius,
+            width,
+        },
+        brand,
+        breakpoints,
+        button: {
+            border: { radius: v(cssVars.buttonBorderRadius) },
+            favorite: {
+                default: {
+                    color: { background: v(cssVars.colorBackgroundPrimary), border: v(cssVars.colorBorderPrimary) },
+                },
+                disabled: {
+                    color: { background: v(cssVars.colorBackgroundDisabled), border: v(cssVars.colorBorderDisabled) },
+                },
+                hover: { color: { background: v(cssVars.colorBackgroundHover), border: v(cssVars.colorBorderHover) } },
+                pressed: {
+                    color: { background: v(cssVars.colorBackgroundPressed), border: v(cssVars.colorBorderSelected) },
+                },
+                selected: {
+                    color: { background: v(cssVars.colorBackgroundPrimary), border: v(cssVars.colorBorderSelected) },
+                },
+            },
+            inline: {
+                alt: {
+                    default: { color: { text: v(cssVars.colorLinkInverse) } },
+                    hover: { color: { text: v(cssVars.colorLinkInverseHover) } },
+                    pressed: { color: { text: v(cssVars.colorLinkInversePressed) } },
+                },
+                default: { color: { text: v(cssVars.colorLinkPrimary) } },
+                hover: { color: { text: v(cssVars.colorLinkHover) } },
+                inverse: { color: { text: v(cssVars.colorLinkInverse) } },
+                pressed: { color: { text: v(cssVars.colorLinkPressed) } },
+                weak: { color: { text: v(cssVars.colorLinkSecondary) } },
+            },
+            primary: {
+                alt: {
+                    color: {
+                        background: v(cssVars.colorBackgroundInverse),
+                        border: v(cssVars.colorBorderInverse),
+                        text: v(cssVars.colorTextInverse),
+                    },
+                    focused: { color: { background: v(cssVars.colorBackgroundHoverInverse) } },
+                    hover: {
+                        color: {
+                            background: v(cssVars.colorBackgroundHoverInverse),
+                            border: v(cssVars.colorBorderInverse),
+                        },
+                    },
+                    pressed: {
+                        color: {
+                            background: v(cssVars.colorBackgroundPressedInverse),
+                            border: v(cssVars.colorBorderInverse),
+                        },
+                    },
+                },
+                color: { background: v(cssVars.colorLinkPrimary), text: v(cssVars.colorTextInverse) },
+                focused: { color: { background: v(cssVars.colorLinkHover) } },
+                hover: { color: { background: v(cssVars.colorLinkHover) } },
+                pressed: { color: { background: v(cssVars.colorLinkPressed) } },
+            },
+            secondary: {
+                alt: {
+                    color: {
+                        background: v(cssVars.colorBackgroundPrimary),
+                        border: v(cssVars.colorBorderInverse),
+                        text: v(cssVars.colorTextInverse),
+                    },
+                    focused: {
+                        color: {
+                            background: v(cssVars.colorBackgroundHoverInverse),
+                            text: v(cssVars.colorTextPrimary),
+                        },
+                    },
+                    hover: {
+                        color: {
+                            background: v(cssVars.colorBackgroundHoverInverse),
+                            border: v(cssVars.colorBorderInverse),
+                            text: v(cssVars.colorTextPrimary),
+                        },
+                    },
+                    pressed: {
+                        color: {
+                            background: v(cssVars.colorBackgroundPressedInverse),
+                            border: v(cssVars.colorBorderInverse),
+                        },
+                    },
+                },
+                color: {
+                    background: v(cssVars.colorBackgroundPrimary),
+                    border: v(cssVars.colorBorderPrimary),
+                    text: v(cssVars.colorTextPrimary),
+                },
+                focused: { color: { background: v(cssVars.colorBackgroundHover) } },
+                hover: {
+                    color: {
+                        background: v(cssVars.colorBackgroundHover),
+                        border: v(cssVars.colorBorderHover),
+                        text: v(cssVars.colorTextInverse),
+                    },
+                },
+                pressed: {
+                    color: { background: v(cssVars.colorBackgroundPressed), border: v(cssVars.colorBorderSelected) },
+                },
+            },
+            tertiary: {
+                color: { text: v(cssVars.colorLinkPrimary) },
+                hover: { color: { background: v(cssVars.colorBackgroundHover) } },
+                pressed: { color: { background: v(cssVars.colorBackgroundPressed) } },
+            },
+        },
+        checkbox: { border: { radius: v(cssVars.checkboxBorderRadius) } },
+        color: {
+            background: {
+                critical: {
+                    dark: v(cssVars.colorBackgroundCriticalDark),
+                    light: v(cssVars.colorBackgroundCriticalLight),
+                },
+                decorative: v(cssVars.colorBackgroundTertiary),
+                disabled: v(cssVars.colorBackgroundDisabled),
+                field: { default: v(cssVars.colorBackgroundPrimary) },
+                hover: v(cssVars.colorBackgroundHover),
+                info: { dark: v(cssVars.colorBackgroundInfoDark), light: v(cssVars.colorBackgroundInfoLight) },
+                inverse: v(cssVars.colorBackgroundInverse),
+                neutral: { dark: v(cssVars.colorBackgroundInverse), light: v(cssVars.colorBackgroundSubdued) },
+                pressed: v(cssVars.colorBackgroundPressed),
+                primary: v(cssVars.colorBackgroundPrimary),
+                secondary: v(cssVars.colorBackgroundSecondary),
+                subdued: v(cssVars.colorBackgroundSubdued),
+                success: { dark: v(cssVars.colorBackgroundSuccessDark), light: v(cssVars.colorBackgroundSuccessLight) },
+                tertiary: v(cssVars.colorBackgroundTertiary),
+                warning: { dark: v(cssVars.colorBackgroundWarningDark), light: v(cssVars.colorBackgroundWarningLight) },
+            },
+            border: {
+                critical: v(cssVars.colorBorderCritical),
+                disabled: v(cssVars.colorBorderDisabled),
+                divider: {
+                    black: v(cssVars.colorBorderBlack),
+                    dark: v(cssVars.colorBorderPrimary),
+                    default: v(cssVars.colorBorderSecondary),
+                    inverse: v(cssVars.colorBorderInverse),
+                    light: v(cssVars.colorBorderTertiary),
+                },
+                focused: { default: v(cssVars.colorFocusPrimary), inverse: v(cssVars.colorFocusInverse) },
+                hover: v(cssVars.colorBorderHover),
+                info: v(cssVars.colorBorderInfo),
+                inverse: v(cssVars.colorBorderInverse),
+                primary: v(cssVars.colorBorderPrimary),
+                secondary: v(cssVars.colorBorderSecondary),
+                selected: v(cssVars.colorBorderSelected),
+                success: v(cssVars.colorBorderSuccess),
+                warning: v(cssVars.colorBorderWarning),
+            },
+            icon: {
+                active: v(cssVars.colorIconPrimary),
+                alt: {
+                    active: v(cssVars.colorIconInverse),
+                    default: v(cssVars.colorIconInverse),
+                    hover: v(cssVars.colorIconSecondary),
+                },
+                critical: v(cssVars.colorIconCritical),
+                decorative: {
+                    alt: v(cssVars.colorIconSecondary),
+                    default: v(cssVars.colorIconPrimary),
+                    light: v(cssVars.colorIconDisabled),
+                },
+                default: v(cssVars.colorIconPrimary),
+                disabled: v(cssVars.colorIconDisabled),
+                hover: v(cssVars.colorIconSecondary),
+                info: v(cssVars.colorIconInfo),
+                inverse: v(cssVars.colorIconInverse),
+                primary: {
+                    alt: {
+                        active: v(cssVars.colorIconInverse),
+                        default: v(cssVars.colorIconSecondary),
+                        hover: v(cssVars.colorIconPrimary),
+                    },
+                    default: v(cssVars.colorIconPrimary),
+                },
+                success: v(cssVars.colorIconSuccess),
+                warning: { default: v(cssVars.colorIconWarning), light: v(cssVars.colorBackgroundWarningLight) },
+            },
+            keyboardFocus: v(cssVars.colorFocusPrimary),
+            keyboardFocusInverse: v(cssVars.colorFocusInverse),
+            shadow: {
+                '01': boxShadow['01'],
+                '02': boxShadow['02'],
+                '03': boxShadow['03'],
+            },
+            skeleton: { default: v(cssVars.colorBackgroundSubdued) },
+            text: {
+                alt: v(cssVars.colorTextInverse),
+                critical: v(cssVars.colorTextCritical),
+                disabled: v(cssVars.colorTextDisabled),
+                error: v(cssVars.colorTextCritical),
+                inactive: v(cssVars.colorTextInactive),
+                info: v(cssVars.colorTextInfo),
+                inverse: v(cssVars.colorTextInverse),
+                link: {
+                    active: v(cssVars.colorLinkPressed),
+                    default: v(cssVars.colorLinkPrimary),
+                    disabled: v(cssVars.colorLinkDisabled),
+                    focused: v(cssVars.colorLinkHover),
+                    hover: v(cssVars.colorLinkHover),
+                    inverse: v(cssVars.colorLinkInverse),
+                    monochrome: v(cssVars.colorLinkMonochrome),
+                    weak: v(cssVars.colorLinkSecondary),
+                },
+                primary: v(cssVars.colorTextPrimary),
+                secondary: v(cssVars.colorTextSecondary),
+                standard: v(cssVars.colorTextPrimary),
+                success: v(cssVars.colorTextSuccess),
+                warning: { default: v(cssVars.colorTextWarning), light: v(cssVars.colorBackgroundWarningLight) },
+                weak: v(cssVars.colorTextSecondary),
+            },
+            transparent00: 'rgb(0 0 0 / 0%)',
+            transparent05: 'rgb(0 0 0 / 5%)',
+            transparent20: 'rgb(0 0 0 / 20%)',
+            transparent40: 'rgb(0 0 0 / 40%)',
+        },
+        core: Object.fromEntries(Object.entries(source.coreColors).map(([key]) => [key, key])),
+        elevation: {
+            '01': v(cssVars.shadow01),
+            '02': v(cssVars.shadow02),
+            '03': v(cssVars.shadow03),
+            '04': v(cssVars.shadow04),
+            '05': v(cssVars.shadow05),
+        },
+        input: { border: { radius: v(cssVars.inputBorderRadius) } },
+        spacing,
+        toggle: { border: { radius: v(cssVars.buttonBorderRadius) } },
+        typography: buildTypography(),
+    };
+};

package/src/themes/runtime/default.ts

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

package/src/themes/runtime/everydayHarbor.ts

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

package/src/themes/runtime/professionalBrand.ts

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

package/src/themes/semanticColorTokenSteps.ts

@@ -0,0 +1,23 @@
+import { nonColorVariables } from './Default';
+
+/**
+ * Maps each semantic color token (e.g. `text-critical`) to the core palette step
+ * it resolves to (e.g. `critical-500`), parsed from the Default brand's
+ * `nonColorVariables`. The semantic → step mapping is identical across the paper
+ * brands (only the core hex values differ per brand), so Default is canonical.
+ * Ink brands reuse this map on reversed ramps and rebind a handful of tokens
+ * (EverydayHarbor: `everydayHarborOverrides`), so this table describes Default and
+ * is not valid for them.
+ *
+ * Single source of truth for docs/tooling that need to show which step a semantic
+ * token points at — derive from this rather than hand-maintaining a duplicate table.
+ */
+export const semanticColorTokenSteps: Record<string, string> = Object.fromEntries(
+    Object.entries(nonColorVariables).flatMap(([key, value]) => {
+        if (!key.startsWith('--color-')) {
+            return [];
+        }
+        const match = /^var\(--color-(.+)\)$/.exec(value);
+        return match ? [[key.slice('--color-'.length), match[1]]] : [];
+    })
+);

package/src/themes/themeType.ts

@@ -0,0 +1,169 @@
+import type { Brands } from './brands';
+
+type TokenValue = string;
+type Px = string;
+
+export type TypographySpec = {
+    family: TokenValue;
+    height: Px;
+    size: Px;
+    spacing: Px;
+    style: string;
+    transform?: string;
+    weight: number | TokenValue;
+};
+
+type Typography = {
+    body: Record<'primary' | 'secondary', TypographySpec>;
+    button: Record<'100' | '200', TypographySpec>;
+    caption: Record<'100', TypographySpec>;
+    heading: Record<'000' | '400' | '500' | '600', TypographySpec> &
+        Record<'100' | '200' | '300', TypographySpec & { mobile: TypographySpec }>;
+    label: Record<'mini' | 'strong', TypographySpec>;
+};
+
+type Color = {
+    background: {
+        critical: Record<'dark' | 'light', TokenValue>;
+        decorative: TokenValue;
+        disabled: TokenValue;
+        field: { default: TokenValue };
+        hover: TokenValue;
+        info: Record<'dark' | 'light', TokenValue>;
+        inverse: TokenValue;
+        neutral: Record<'dark' | 'light', TokenValue>;
+        pressed: TokenValue;
+        primary: TokenValue;
+        secondary: TokenValue;
+        subdued: TokenValue;
+        success: Record<'dark' | 'light', TokenValue>;
+        tertiary: TokenValue;
+        warning: Record<'dark' | 'light', TokenValue>;
+    };
+    border: {
+        critical: TokenValue;
+        disabled: TokenValue;
+        divider: Record<'black' | 'dark' | 'default' | 'inverse' | 'light', TokenValue>;
+        focused: Record<'default' | 'inverse', TokenValue>;
+        hover: TokenValue;
+        info: TokenValue;
+        inverse: TokenValue;
+        primary: TokenValue;
+        secondary: TokenValue;
+        selected: TokenValue;
+        success: TokenValue;
+        warning: TokenValue;
+    };
+    icon: {
+        active: TokenValue;
+        alt: Record<'active' | 'default' | 'hover', TokenValue>;
+        critical: TokenValue;
+        decorative: Record<'alt' | 'default' | 'light', TokenValue>;
+        default: TokenValue;
+        disabled: TokenValue;
+        hover: TokenValue;
+        info: TokenValue;
+        inverse: TokenValue;
+        primary: { alt: { active: TokenValue; default: TokenValue; hover: TokenValue }; default: TokenValue };
+        success: TokenValue;
+        warning: { default: TokenValue; light: TokenValue };
+    };
+    keyboardFocus: TokenValue;
+    keyboardFocusInverse: TokenValue;
+    shadow: Record<'01' | '02' | '03', TokenValue>;
+    skeleton: Record<'default', TokenValue>;
+    text: {
+        alt: TokenValue;
+        critical: TokenValue;
+        disabled: TokenValue;
+        error: TokenValue;
+        inactive: TokenValue;
+        info: TokenValue;
+        inverse: TokenValue;
+        link: {
+            active: TokenValue;
+            default: TokenValue;
+            disabled: TokenValue;
+            focused: TokenValue;
+            hover: TokenValue;
+            inverse: TokenValue;
+            monochrome: TokenValue;
+            weak: TokenValue;
+        };
+        primary: TokenValue;
+        secondary: TokenValue;
+        standard: TokenValue;
+        success: TokenValue;
+        warning: Record<'default' | 'light', TokenValue>;
+        weak: TokenValue;
+    };
+    transparent00: TokenValue;
+    transparent05: TokenValue;
+    transparent20: TokenValue;
+    transparent40: TokenValue;
+};
+
+type StrAndValue<Keys extends string> = Record<Keys, Px> & Record<`${Keys}Value`, number>;
+
+type Spacing = StrAndValue<'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs' | 'xxxl' | 'xxxs'>;
+type Breakpoints = StrAndValue<'lgMax' | 'lgMin' | 'mdMax' | 'mdMin' | 'smMax' | 'smMin' | 'xlMin' | 'xsMax'>;
+
+type ButtonTheme = {
+    border: { radius: Px };
+    favorite: Record<
+        'default' | 'disabled' | 'hover' | 'pressed' | 'selected',
+        { color: { background: TokenValue; border: TokenValue } }
+    >;
+    inline: Record<'default' | 'hover' | 'inverse' | 'pressed' | 'weak', { color: { text: TokenValue } }> & {
+        alt: Record<'default' | 'hover' | 'pressed', { color: { text: TokenValue } }>;
+    };
+    primary: {
+        alt: {
+            color: { background: TokenValue; border: TokenValue; text: TokenValue };
+            focused: { color: { background: TokenValue } };
+            hover: { color: { background: TokenValue; border: TokenValue } };
+            pressed: { color: { background: TokenValue; border: TokenValue } };
+        };
+        color: { background: TokenValue; text: TokenValue };
+        focused: { color: { background: TokenValue } };
+        hover: { color: { background: TokenValue } };
+        pressed: { color: { background: TokenValue } };
+    };
+    secondary: {
+        alt: {
+            color: { background: TokenValue; border: TokenValue; text: TokenValue };
+            focused: { color: { background: TokenValue; text: TokenValue } };
+            hover: { color: { background: TokenValue; border: TokenValue; text: TokenValue } };
+            pressed: { color: { background: TokenValue; border: TokenValue } };
+        };
+        color: { background: TokenValue; border: TokenValue; text: TokenValue };
+        focused: { color: { background: TokenValue } };
+        hover: { color: { background: TokenValue; border: TokenValue; text: TokenValue } };
+        pressed: { color: { background: TokenValue; border: TokenValue } };
+    };
+    tertiary: {
+        color: { text: TokenValue };
+        hover: { color: { background: TokenValue } };
+        pressed: { color: { background: TokenValue } };
+    };
+};
+
+export type Theme = {
+    border: {
+        radius: Record<'circle' | 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'zero', string>;
+        width: Record<'lg' | 'md' | 'sm' | 'xs' | 'xxs', string>;
+    };
+    brand: Brands;
+    breakpoints: Breakpoints;
+    button: ButtonTheme;
+    checkbox: { border: { radius: Px } };
+    color: Color;
+    core: Record<string, TokenValue>;
+    elevation: Record<'01' | '02' | '03' | '04' | '05', string>;
+    input: { border: { radius: string } };
+    spacing: Spacing;
+    toggle: { border: { radius: string } };
+    typography: Typography;
+};
+
+export type CleanTheme = Theme;