@evolve.ui/theme-system 1.0.1 → 1.2.0

package/src/effects/vocabulary.ts

@@ -0,0 +1,32 @@
+import type { EffectRule } from './rules';
+
+/**
+ * Recipes emitted into every effect brand file before that brand's own bindings.
+ * Materials come first so `hui-fx-glass hui-fx-featured` composes in source order.
+ * CTA ink is a channel remap, so a component's own `color` utilities still apply when the guard matches.
+ */
+import { effectClasses } from './classes';
+import { fx } from './tokens';
+
+const NOT_INTERACTIVE = ':disabled, [aria-disabled="true"]';
+
+/** Opt-in glass remaps the same text colours as the catalog hooks, so `hui-fx-glass` text reads the same everywhere. */
+const GLASS_TEXT = { '--color-text-secondary': fx.textMutedRgb, '--color-text-success': fx.textSuccessRgb } as const;
+
+export const vocabularyRules: readonly EffectRule[] = [
+    { on: effectClasses.glass, material: 'surface', radius: 'surface-radius', vars: GLASS_TEXT },
+    { on: effectClasses.glassRaised, material: 'raised', radius: 'surface-radius', vars: GLASS_TEXT },
+    { on: effectClasses.featured, shadow: 'featured' },
+    { on: effectClasses.halo, shadow: 'halo' },
+    { on: effectClasses.glow, shadow: 'glow' },
+    {
+        on: effectClasses.cta,
+        unless: NOT_INTERACTIVE,
+        paint: { background: fx.ctaFill },
+        vars: { '--color-text-inverse': fx.ctaInkRgb, '--color-icon-inverse': fx.ctaInkRgb },
+    },
+    { on: effectClasses.cta, when: 'hover', unless: NOT_INTERACTIVE, paint: { background: fx.ctaFillHover } },
+    { on: effectClasses.accentFont, paint: { fontFamily: fx.fontAccent } },
+    { on: effectClasses.serif, vars: { '--effect-font-accent': fx.fontSerif } },
+    { on: effectClasses.backdrop, paint: { background: fx.backdrop } },
+];

package/src/index.ts

@@ -0,0 +1,40 @@
+// Tailwind plugin (primary export — includes complete theme config)
+export { themePlugin } from './tailwind/plugin';
+
+// Tailwind configuration modules
+export * from './tailwind/animation';
+export * from './tailwind/reducedMotion';
+export * from './tailwind/colors';
+export * from './tailwind/screens';
+export * from './tailwind/spacing';
+export * from './tailwind/fontFamily';
+export * from './tailwind/text';
+
+// CSS variable constants
+export * from './tailwind/cssVars';
+
+// Variable wrapping utilities
+export * from './utils/wrapVar';
+
+// Color generation utilities
+export * from './utils/color';
+
+// Brand theme definitions
+export * from './themes/brands';
+export * from './themes/themeType';
+export {
+    breakpoints as runtimeBreakpoints,
+    radius as runtimeRadius,
+    spacing as runtimeSpacing,
+    width as runtimeBorderWidth,
+} from './themes/common';
+export * from './themes/allThemes';
+export * from './themes/semanticColorTokenSteps';
+export * from './themes/runtime/buildTheme';
+export * from './themes/runtime/default';
+export * from './themes/runtime/basketballTraining';
+export * from './themes/runtime/professionalBrand';
+export * from './themes/runtime/everydayHarbor';
+
+// Class name utility
+export { cn } from './utils/cn';

package/src/tailwind/animation.ts

@@ -0,0 +1,30 @@
+/**
+ * Animation registry for the theme system
+ *
+ * The `animate-*` utilities this library registers, extracted from `plugin.ts` so the
+ * reduced-motion policy can be checked against them (see `./reducedMotion`). These sit under
+ * `theme.extend`, so Tailwind's own defaults (`spin`, `ping`, `pulse`, `bounce`, `none`) survive
+ * alongside them — the resolved registry is this object layered over `defaultTheme.animation`,
+ * and the policy must cover both.
+ *
+ * Keyframes stay in `plugin.ts` next to the `addBase` block that emits some of them.
+ */
+export const animation = {
+    fadeIn: 'fadeIn .2s ease-in-out',
+    fadeInOpacity: 'fadeInOpacity 0.5s ease-in-out',
+    fadeInScaled: 'fadeInScaled .2s ease-in',
+    fadeOut: 'fadeOut .2s ease-in-out',
+    loading: 'loading 1.4s infinite ease-in-out',
+    'progress-completion': 'shrink 0.15s ease-in-out both, grow 0.15s ease-in-out 0.15s both',
+    'progress-icon-fade-in': 'fadeInOpacity 0.15s ease-in-out 0.15s both',
+    'progress-wave':
+        'progressWave 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, progressWaveRotate 1568ms linear infinite both',
+    saveButtonPulse: 'saveButtonPulse 500ms cubic-bezier(0.34, 1.56, 0.64, 1)',
+    saveButtonWiggle: 'saveButtonWiggle 500ms ease-in-out',
+    saveHeartColorFlash: 'saveHeartColorFlash 500ms cubic-bezier(0.45, 0, 0.55, 1)',
+    saveHeartPop: 'saveHeartPop 480ms cubic-bezier(0.34, 1.56, 0.64, 1)',
+    saveHeartTwirlBloom: 'saveHeartTwirlBloom 500ms cubic-bezier(0.45, 0, 0.55, 1)',
+    saveLabelShimmer: 'saveLabelShimmer 500ms ease-in-out',
+    slideDown: 'slideDown 0.3s ease-in forwards',
+    slideUp: 'slideUp 0.3s ease-out forwards',
+};

package/src/tailwind/borderRadius.ts

@@ -0,0 +1,32 @@
+/**
+ * Border radius configuration for Tailwind CSS
+ *
+ * Internal reference: Hammer UI patterns
+ * Ported from the upstream theme system.
+ */
+
+// @see https://tailwindcss.com/docs/customizing-colors#using-css-variables
+
+import { wrapVar } from '../utils/wrapVar';
+import {
+    buttonBorderRadius,
+    checkboxBorderRadius,
+    containerBorderRadius,
+    inputBorderRadius,
+    searchInputBorderRadius,
+} from './cssVars';
+
+export const borderRadius = {
+    button: wrapVar(buttonBorderRadius),
+    checkbox: wrapVar(checkboxBorderRadius),
+    container: wrapVar(containerBorderRadius),
+    full: '9999px',
+    input: wrapVar(inputBorderRadius),
+    lg: '16px',
+    md: '8px',
+    none: '0',
+    'search-input': wrapVar(searchInputBorderRadius),
+    sm: '4px',
+    xl: '32px',
+    xs: '2px',
+} as const;

package/src/tailwind/borderWidth.ts

@@ -0,0 +1,14 @@
+/**
+ * Border width scale the theme ships.
+ *
+ * These match the widths Tailwind uses when a plugin does not replace `borderWidth`.
+ * They sit on the theme object so the value snapshot locks the same scale.
+ */
+
+export const borderWidth = {
+    DEFAULT: '1px',
+    0: '0px',
+    2: '2px',
+    4: '4px',
+    8: '8px',
+};

package/src/tailwind/boxShadow.ts

@@ -0,0 +1,19 @@
+/**
+ * Box shadow configuration for Tailwind CSS
+ *
+ * Internal reference: Hammer UI patterns
+ * Ported from the upstream theme system.
+ */
+
+import { wrapVar } from '../utils/wrapVar';
+import { shadow01, shadow02, shadow03, shadow04, shadow05 } from './cssVars';
+
+// @see https://tailwindcss.com/docs/customizing-colors#using-css-variables
+
+export const boxShadow: Record<string, string> = {
+    '01': wrapVar(shadow01),
+    '02': wrapVar(shadow02),
+    '03': wrapVar(shadow03),
+    '04': wrapVar(shadow04),
+    '05': wrapVar(shadow05),
+};

package/src/tailwind/colors.ts

@@ -0,0 +1,332 @@
+/**
+ * Color configuration for Tailwind CSS
+ *
+ * Maps CSS custom properties to Tailwind color utilities using nested objects.
+ * Uses wrapVariableOpacity() for dynamic alpha support (e.g., `bg-primary-500/50`)
+ * and wrapOpacity() for fixed opacity values.
+ *
+ * @see https://tailwindcss.com/docs/customizing-colors#using-css-variables
+ * Internal reference: Hammer UI patterns
+ * Ported from the upstream theme system.
+ */
+
+import { wrapOpacity, wrapVar, wrapVariableOpacity } from '../utils/wrapVar';
+import {
+    colorBackgroundCriticalDark,
+    colorBackgroundCriticalLight,
+    colorBackgroundDisabled,
+    colorBackgroundHover,
+    colorBackgroundHoverInverse,
+    colorBackgroundInfoDark,
+    colorBackgroundInfoLight,
+    colorBackgroundInverse,
+    colorBackgroundOverlay,
+    colorBackgroundPressed,
+    colorBackgroundPressedInverse,
+    colorBackgroundPrimary,
+    colorBackgroundSecondary,
+    colorBackgroundSubdued,
+    colorBackgroundSuccessDark,
+    colorBackgroundSuccessLight,
+    colorBackgroundTertiary,
+    colorBackgroundWarningDark,
+    colorBackgroundWarningLight,
+    colorBorderBlack,
+    colorBorderCritical,
+    colorBorderDisabled,
+    colorBorderHover,
+    colorBorderInfo,
+    colorBorderInverse,
+    colorBorderPrimary,
+    colorBorderSecondary,
+    colorBorderSelected,
+    colorBorderSuccess,
+    colorBorderTertiary,
+    colorBorderWarning,
+    colorCritical100,
+    colorCritical200,
+    colorCritical300,
+    colorCritical400,
+    colorCritical50,
+    colorCritical500,
+    colorCritical600,
+    colorCritical700,
+    colorCritical800,
+    colorCritical900,
+    colorFocusInverse,
+    colorFocusPrimary,
+    colorIconCritical,
+    colorIconDisabled,
+    colorIconInfo,
+    colorIconInverse,
+    colorIconPrimary,
+    colorIconSecondary,
+    colorIconSuccess,
+    colorIconWarning,
+    colorInfo100,
+    colorInfo200,
+    colorInfo300,
+    colorInfo400,
+    colorInfo50,
+    colorInfo500,
+    colorInfo600,
+    colorInfo700,
+    colorInfo800,
+    colorInfo900,
+    colorLinkDisabled,
+    colorLinkHover,
+    colorLinkInverse,
+    colorLinkInverseDisabled,
+    colorLinkInverseHover,
+    colorLinkInversePressed,
+    colorLinkMonochrome,
+    colorLinkPressed,
+    colorLinkPrimary,
+    colorLinkSecondary,
+    colorPrimary100,
+    colorPrimary200,
+    colorPrimary300,
+    colorPrimary400,
+    colorPrimary50,
+    colorPrimary500,
+    colorPrimary600,
+    colorPrimary700,
+    colorPrimary800,
+    colorPrimary900,
+    colorSecondary100,
+    colorSecondary200,
+    colorSecondary300,
+    colorSecondary400,
+    colorSecondary50,
+    colorSecondary500,
+    colorSecondary600,
+    colorSecondary700,
+    colorSecondary800,
+    colorSecondary900,
+    colorSuccess100,
+    colorSuccess200,
+    colorSuccess300,
+    colorSuccess400,
+    colorSuccess50,
+    colorSuccess500,
+    colorSuccess600,
+    colorSuccess700,
+    colorSuccess800,
+    colorSuccess900,
+    colorSurface100,
+    colorSurface200,
+    colorSurface300,
+    colorSurface400,
+    colorSurface50,
+    colorSurface500,
+    colorSurface600,
+    colorSurface700,
+    colorSurface800,
+    colorSurface900,
+    colorTertiary100,
+    colorTertiary200,
+    colorTertiary300,
+    colorTertiary400,
+    colorTertiary50,
+    colorTertiary500,
+    colorTertiary600,
+    colorTertiary700,
+    colorTertiary800,
+    colorTertiary900,
+    colorTextCritical,
+    colorTextDisabled,
+    colorTextInactive,
+    colorTextInfo,
+    colorTextInverse,
+    colorTextPrimary,
+    colorTextSecondary,
+    colorTextSuccess,
+    colorTextWarning,
+    colorWarning100,
+    colorWarning200,
+    colorWarning300,
+    colorWarning400,
+    colorWarning50,
+    colorWarning500,
+    colorWarning600,
+    colorWarning700,
+    colorWarning800,
+    colorWarning900,
+} from './cssVars';
+
+export const colors: Record<string, Record<string, string> | string> = {
+    background: {
+        'critical-dark': wrapVariableOpacity(wrapVar(colorBackgroundCriticalDark)),
+        'critical-light': wrapVariableOpacity(wrapVar(colorBackgroundCriticalLight)),
+        disabled: wrapVariableOpacity(wrapVar(colorBackgroundDisabled)),
+        hover: wrapOpacity(wrapVar(colorBackgroundHover), 5),
+        'hover-inverse': wrapOpacity(wrapVar(colorBackgroundHoverInverse), 5),
+        'info-dark': wrapVariableOpacity(wrapVar(colorBackgroundInfoDark)),
+        'info-light': wrapVariableOpacity(wrapVar(colorBackgroundInfoLight)),
+        inverse: wrapVariableOpacity(wrapVar(colorBackgroundInverse)),
+        overlay: wrapOpacity(wrapVar(colorBackgroundOverlay), 40),
+        pressed: wrapOpacity(wrapVar(colorBackgroundPressed), 20),
+        'pressed-inverse': wrapOpacity(wrapVar(colorBackgroundPressedInverse), 20),
+        primary: wrapVariableOpacity(wrapVar(colorBackgroundPrimary)),
+        secondary: wrapVariableOpacity(wrapVar(colorBackgroundSecondary)),
+        subdued: wrapVariableOpacity(wrapVar(colorBackgroundSubdued)),
+        'success-dark': wrapVariableOpacity(wrapVar(colorBackgroundSuccessDark)),
+        'success-light': wrapVariableOpacity(wrapVar(colorBackgroundSuccessLight)),
+        tertiary: wrapVariableOpacity(wrapVar(colorBackgroundTertiary)),
+        'warning-dark': wrapVariableOpacity(wrapVar(colorBackgroundWarningDark)),
+        'warning-light': wrapVariableOpacity(wrapVar(colorBackgroundWarningLight)),
+    },
+    border: {
+        black: wrapVariableOpacity(wrapVar(colorBorderBlack)),
+        critical: wrapVariableOpacity(wrapVar(colorBorderCritical)),
+        disabled: wrapVariableOpacity(wrapVar(colorBorderDisabled)),
+        hover: wrapVariableOpacity(wrapVar(colorBorderHover)),
+        info: wrapVariableOpacity(wrapVar(colorBorderInfo)),
+        inverse: wrapVariableOpacity(wrapVar(colorBorderInverse)),
+        primary: wrapVariableOpacity(wrapVar(colorBorderPrimary)),
+        secondary: wrapVariableOpacity(wrapVar(colorBorderSecondary)),
+        selected: wrapVariableOpacity(wrapVar(colorBorderSelected)),
+        success: wrapVariableOpacity(wrapVar(colorBorderSuccess)),
+        tertiary: wrapVariableOpacity(wrapVar(colorBorderTertiary)),
+        warning: wrapVariableOpacity(wrapVar(colorBorderWarning)),
+    },
+    critical: {
+        '100': wrapVariableOpacity(wrapVar(colorCritical100)),
+        '200': wrapVariableOpacity(wrapVar(colorCritical200)),
+        '300': wrapVariableOpacity(wrapVar(colorCritical300)),
+        '400': wrapVariableOpacity(wrapVar(colorCritical400)),
+        '50': wrapVariableOpacity(wrapVar(colorCritical50)),
+        '500': wrapVariableOpacity(wrapVar(colorCritical500)),
+        '600': wrapVariableOpacity(wrapVar(colorCritical600)),
+        '700': wrapVariableOpacity(wrapVar(colorCritical700)),
+        '800': wrapVariableOpacity(wrapVar(colorCritical800)),
+        '900': wrapVariableOpacity(wrapVar(colorCritical900)),
+    },
+    current: 'currentColor',
+    focus: {
+        inverse: wrapOpacity(wrapVar(colorFocusInverse), 50),
+        primary: wrapOpacity(wrapVar(colorFocusPrimary), 50),
+    },
+    'focus-inverse': wrapVariableOpacity(wrapVar(colorFocusInverse)),
+    'focus-primary': wrapVariableOpacity(wrapVar(colorFocusPrimary)),
+    icon: {
+        critical: wrapVariableOpacity(wrapVar(colorIconCritical)),
+        default: wrapVariableOpacity(wrapVar(colorIconPrimary)),
+        disabled: wrapVariableOpacity(wrapVar(colorIconDisabled)),
+        hover: wrapVariableOpacity(wrapVar(colorIconSecondary)),
+        info: wrapVariableOpacity(wrapVar(colorIconInfo)),
+        inverse: wrapVariableOpacity(wrapVar(colorIconInverse)),
+        primary: wrapVariableOpacity(wrapVar(colorIconPrimary)),
+        secondary: wrapVariableOpacity(wrapVar(colorIconSecondary)),
+        success: wrapVariableOpacity(wrapVar(colorIconSuccess)),
+        warning: wrapVariableOpacity(wrapVar(colorIconWarning)),
+    },
+    info: {
+        '100': wrapVariableOpacity(wrapVar(colorInfo100)),
+        '200': wrapVariableOpacity(wrapVar(colorInfo200)),
+        '300': wrapVariableOpacity(wrapVar(colorInfo300)),
+        '400': wrapVariableOpacity(wrapVar(colorInfo400)),
+        '50': wrapVariableOpacity(wrapVar(colorInfo50)),
+        '500': wrapVariableOpacity(wrapVar(colorInfo500)),
+        '600': wrapVariableOpacity(wrapVar(colorInfo600)),
+        '700': wrapVariableOpacity(wrapVar(colorInfo700)),
+        '800': wrapVariableOpacity(wrapVar(colorInfo800)),
+        '900': wrapVariableOpacity(wrapVar(colorInfo900)),
+    },
+    link: {
+        disabled: wrapVariableOpacity(wrapVar(colorLinkDisabled)),
+        hover: wrapVariableOpacity(wrapVar(colorLinkHover)),
+        inverse: wrapVariableOpacity(wrapVar(colorLinkInverse)),
+        'inverse-disabled': wrapVariableOpacity(wrapVar(colorLinkInverseDisabled)),
+        'inverse-hover': wrapVariableOpacity(wrapVar(colorLinkInverseHover)),
+        'inverse-pressed': wrapVariableOpacity(wrapVar(colorLinkInversePressed)),
+        monochrome: wrapVariableOpacity(wrapVar(colorLinkMonochrome)),
+        pressed: wrapVariableOpacity(wrapVar(colorLinkPressed)),
+        primary: wrapVariableOpacity(wrapVar(colorLinkPrimary)),
+        secondary: wrapVariableOpacity(wrapVar(colorLinkSecondary)),
+    },
+    primary: {
+        '100': wrapVariableOpacity(wrapVar(colorPrimary100)),
+        '200': wrapVariableOpacity(wrapVar(colorPrimary200)),
+        '300': wrapVariableOpacity(wrapVar(colorPrimary300)),
+        '400': wrapVariableOpacity(wrapVar(colorPrimary400)),
+        '50': wrapVariableOpacity(wrapVar(colorPrimary50)),
+        '500': wrapVariableOpacity(wrapVar(colorPrimary500)),
+        '600': wrapVariableOpacity(wrapVar(colorPrimary600)),
+        '700': wrapVariableOpacity(wrapVar(colorPrimary700)),
+        '800': wrapVariableOpacity(wrapVar(colorPrimary800)),
+        '900': wrapVariableOpacity(wrapVar(colorPrimary900)),
+    },
+    secondary: {
+        '100': wrapVariableOpacity(wrapVar(colorSecondary100)),
+        '200': wrapVariableOpacity(wrapVar(colorSecondary200)),
+        '300': wrapVariableOpacity(wrapVar(colorSecondary300)),
+        '400': wrapVariableOpacity(wrapVar(colorSecondary400)),
+        '50': wrapVariableOpacity(wrapVar(colorSecondary50)),
+        '500': wrapVariableOpacity(wrapVar(colorSecondary500)),
+        '600': wrapVariableOpacity(wrapVar(colorSecondary600)),
+        '700': wrapVariableOpacity(wrapVar(colorSecondary700)),
+        '800': wrapVariableOpacity(wrapVar(colorSecondary800)),
+        '900': wrapVariableOpacity(wrapVar(colorSecondary900)),
+    },
+    success: {
+        '100': wrapVariableOpacity(wrapVar(colorSuccess100)),
+        '200': wrapVariableOpacity(wrapVar(colorSuccess200)),
+        '300': wrapVariableOpacity(wrapVar(colorSuccess300)),
+        '400': wrapVariableOpacity(wrapVar(colorSuccess400)),
+        '50': wrapVariableOpacity(wrapVar(colorSuccess50)),
+        '500': wrapVariableOpacity(wrapVar(colorSuccess500)),
+        '600': wrapVariableOpacity(wrapVar(colorSuccess600)),
+        '700': wrapVariableOpacity(wrapVar(colorSuccess700)),
+        '800': wrapVariableOpacity(wrapVar(colorSuccess800)),
+        '900': wrapVariableOpacity(wrapVar(colorSuccess900)),
+    },
+    surface: {
+        '100': wrapVariableOpacity(wrapVar(colorSurface100)),
+        '200': wrapVariableOpacity(wrapVar(colorSurface200)),
+        '300': wrapVariableOpacity(wrapVar(colorSurface300)),
+        '400': wrapVariableOpacity(wrapVar(colorSurface400)),
+        '50': wrapVariableOpacity(wrapVar(colorSurface50)),
+        '500': wrapVariableOpacity(wrapVar(colorSurface500)),
+        '600': wrapVariableOpacity(wrapVar(colorSurface600)),
+        '700': wrapVariableOpacity(wrapVar(colorSurface700)),
+        '800': wrapVariableOpacity(wrapVar(colorSurface800)),
+        '900': wrapVariableOpacity(wrapVar(colorSurface900)),
+    },
+    tertiary: {
+        '100': wrapVariableOpacity(wrapVar(colorTertiary100)),
+        '200': wrapVariableOpacity(wrapVar(colorTertiary200)),
+        '300': wrapVariableOpacity(wrapVar(colorTertiary300)),
+        '400': wrapVariableOpacity(wrapVar(colorTertiary400)),
+        '50': wrapVariableOpacity(wrapVar(colorTertiary50)),
+        '500': wrapVariableOpacity(wrapVar(colorTertiary500)),
+        '600': wrapVariableOpacity(wrapVar(colorTertiary600)),
+        '700': wrapVariableOpacity(wrapVar(colorTertiary700)),
+        '800': wrapVariableOpacity(wrapVar(colorTertiary800)),
+        '900': wrapVariableOpacity(wrapVar(colorTertiary900)),
+    },
+    text: {
+        critical: wrapVariableOpacity(wrapVar(colorTextCritical)),
+        disabled: wrapVariableOpacity(wrapVar(colorTextDisabled)),
+        inactive: wrapVariableOpacity(wrapVar(colorTextInactive)),
+        info: wrapVariableOpacity(wrapVar(colorTextInfo)),
+        inverse: wrapVariableOpacity(wrapVar(colorTextInverse)),
+        primary: wrapVariableOpacity(wrapVar(colorTextPrimary)),
+        secondary: wrapVariableOpacity(wrapVar(colorTextSecondary)),
+        success: wrapVariableOpacity(wrapVar(colorTextSuccess)),
+        warning: wrapVariableOpacity(wrapVar(colorTextWarning)),
+    },
+    transparent: 'transparent',
+    warning: {
+        '100': wrapVariableOpacity(wrapVar(colorWarning100)),
+        '200': wrapVariableOpacity(wrapVar(colorWarning200)),
+        '300': wrapVariableOpacity(wrapVar(colorWarning300)),
+        '400': wrapVariableOpacity(wrapVar(colorWarning400)),
+        '50': wrapVariableOpacity(wrapVar(colorWarning50)),
+        '500': wrapVariableOpacity(wrapVar(colorWarning500)),
+        '600': wrapVariableOpacity(wrapVar(colorWarning600)),
+        '700': wrapVariableOpacity(wrapVar(colorWarning700)),
+        '800': wrapVariableOpacity(wrapVar(colorWarning800)),
+        '900': wrapVariableOpacity(wrapVar(colorWarning900)),
+    },
+};