diff --git a/docs/THEME_COLOUR_GENERATION.md b/docs/THEME_COLOUR_GENERATION.md index 11536aaa..ae806e98 100644 --- a/docs/THEME_COLOUR_GENERATION.md +++ b/docs/THEME_COLOUR_GENERATION.md @@ -35,15 +35,15 @@ independently, so **every generated colour value can move**, even where the prev looked visually similar. This is a property of switching generators, not a regression in any one token. -Two fixture sets document the transition and stay in the repo permanently: +The v2 pipeline output is pinned in a regression golden: -- `theme/__fixtures__/compat-goldens/*.pre-v2.css` — the exact `buildTheme` output for the bundled - themes captured before the v2 rewrite (frozen once, byte-identical to the original solver). -- `theme/__fixtures__/v2-goldens/*.v2.css` — the exact output under the v2 pipeline. +- `theme/__fixtures__/v2-goldens/*.v2.css` — the exact `buildTheme` output under the v2 pipeline, + asserted byte-identical in `build-theme.test.ts` so any later generator change is a reviewed, + deliberate diff. -`build-theme.test.ts` asserts the v2 output differs from the pre-v2 goldens (the repaint happened) -and pins the v2 goldens for future regressions. Re-generate the v2 goldens deliberately, reviewing -the diff, when a later engine change intentionally repaints again — never to silence a failing test. +The pre-v2 output is recoverable from git history (commit `cef0076`) and no longer committed to the +repo. Re-generate the v2 goldens deliberately, reviewing the diff, when a later engine change +intentionally repaints again — never to silence a failing test. ## Private ≠ non-breaking diff --git a/packages/@luke-ui/react/src/theme/__fixtures__/compat-goldens/paper.pre-v2.css b/packages/@luke-ui/react/src/theme/__fixtures__/compat-goldens/paper.pre-v2.css deleted file mode 100644 index 27e41641..00000000 --- a/packages/@luke-ui/react/src/theme/__fixtures__/compat-goldens/paper.pre-v2.css +++ /dev/null @@ -1,318 +0,0 @@ -/* Generated by buildTheme from @luke-ui/react. Do not edit. */ -.luke-ui-theme-paper { - --luke-font-100-baseline-trim: -0.3029em; - --luke-font-100-cap-height-trim: -0.3029em; - --luke-font-100-font-size: 12px; - --luke-font-100-letter-spacing: 0.0025em; - --luke-font-100-line-height: 16px; - --luke-font-200-baseline-trim: -0.3505em; - --luke-font-200-cap-height-trim: -0.3505em; - --luke-font-200-font-size: 14px; - --luke-font-200-letter-spacing: 0; - --luke-font-200-line-height: 20px; - --luke-font-300-baseline-trim: -0.3862em; - --luke-font-300-cap-height-trim: -0.3862em; - --luke-font-300-font-size: 16px; - --luke-font-300-letter-spacing: 0; - --luke-font-300-line-height: 24px; - --luke-font-400-baseline-trim: -0.3585em; - --luke-font-400-cap-height-trim: -0.3585em; - --luke-font-400-font-size: 18px; - --luke-font-400-letter-spacing: -0.0025em; - --luke-font-400-line-height: 26px; - --luke-font-500-baseline-trim: -0.3362em; - --luke-font-500-cap-height-trim: -0.3362em; - --luke-font-500-font-size: 20px; - --luke-font-500-letter-spacing: -0.005em; - --luke-font-500-line-height: 28px; - --luke-font-600-baseline-trim: -0.2612em; - --luke-font-600-cap-height-trim: -0.2612em; - --luke-font-600-font-size: 24px; - --luke-font-600-letter-spacing: -0.00625em; - --luke-font-600-line-height: 30px; - --luke-font-700-baseline-trim: -0.2791em; - --luke-font-700-cap-height-trim: -0.2791em; - --luke-font-700-font-size: 28px; - --luke-font-700-letter-spacing: -0.0075em; - --luke-font-700-line-height: 36px; - --luke-font-800-baseline-trim: -0.2077em; - --luke-font-800-cap-height-trim: -0.2077em; - --luke-font-800-font-size: 35px; - --luke-font-800-letter-spacing: -0.01em; - --luke-font-800-line-height: 40px; - --luke-font-900-baseline-trim: -0.1362em; - --luke-font-900-cap-height-trim: -0.1362em; - --luke-font-900-font-size: 60px; - --luke-font-900-letter-spacing: -0.025em; - --luke-font-900-line-height: 60px; - --luke-font-family: 'Inter', system-ui, sans-serif; - --luke-font-weight-body: 400; - --luke-font-weight-label: 500; - --luke-font-weight-heading: 600; - --luke-font-weight-emphasis: 700; - --luke-radius-detail: 4px; - --luke-radius-control: 4px; - --luke-radius-surface: 12px; - --luke-radius-overlay: 16px; - --luke-radius-full: 9999px; - --luke-space-100: 4px; - --luke-space-200: 8px; - --luke-space-300: 12px; - --luke-space-400: 16px; - --luke-space-600: 24px; - --luke-space-800: 32px; - --luke-space-1000: 40px; - --luke-space-1200: 48px; - --luke-space-1600: 64px; - --luke-control-size-small: 32px; - --luke-control-size-medium: 40px; - --luke-icon-size-xsmall: 16px; - --luke-icon-size-small: 20px; - --luke-icon-size-medium: 24px; - --luke-icon-size-large: 32px; - --luke-motion-duration-fast: 120ms; - --luke-motion-easing-standard: cubic-bezier(0, 0, 0.4, 1); - --luke-motion-easing-exit: cubic-bezier(0.3, 0, 1, 1); -} - -.luke-ui-theme-paper { - color-scheme: light; - --luke-color-surface-canvas: oklch(1 0 0); - --luke-color-surface-recessed: oklch(1 0 0); - --luke-color-surface-floating: oklch(1 0 0); - --luke-color-surface-overlay: oklch(1 0 0); - --luke-color-scrim: oklch(0 0 0 / 0.2); - --luke-color-loading-skeleton: oklch(0.8768 0 0); - --luke-color-text-primary: oklch(0.225 0 0); - --luke-color-text-secondary: oklch(0.41 0 0); - --luke-color-text-disabled: oklch(0.68 0 0); - --luke-color-border-decorative: oklch(0.92 0 0); - --luke-color-border-control: oklch(0.6651 0 0); - --luke-color-border-focus: oklch(0.55 0.17 255); - --luke-color-intent-neutral-surface-subtle: oklch(0.955 0 0); - --luke-color-intent-neutral-surface-subtle-hover: oklch(0.93 0 0); - --luke-color-intent-neutral-surface-subtle-pressed: oklch(0.9 0 0); - --luke-color-intent-neutral-surface-solid: oklch(0.32 0 0); - --luke-color-intent-neutral-surface-solid-hover: oklch(0.27 0 0); - --luke-color-intent-neutral-surface-solid-pressed: oklch(0.23 0 0); - --luke-color-intent-neutral-on-solid: oklch(0.985 0 0); - --luke-color-intent-accent-surface-subtle: oklch(0.955 0.0226 247.47); - --luke-color-intent-accent-surface-subtle-hover: oklch(0.93 0.0341 247.47); - --luke-color-intent-accent-surface-subtle-pressed: oklch(0.9 0.0341 247.47); - --luke-color-intent-accent-surface-solid: oklch(0.4264 0.0975 247.47); - --luke-color-intent-accent-surface-solid-hover: oklch(0.3764 0.0975 247.47); - --luke-color-intent-accent-surface-solid-pressed: oklch(0.3364 0.0894 247.47); - --luke-color-intent-accent-border: oklch(0.6631 0.0975 247.47); - --luke-color-intent-accent-text: oklch(0.4264 0.0975 247.47); - --luke-color-intent-accent-text-hover: oklch(0.3664 0.0974 247.47); - --luke-color-intent-accent-on-solid: oklch(0.985 0 247.47); - --luke-color-intent-danger-surface-subtle: oklch(0.955 0.0223 24.44); - --luke-color-intent-danger-surface-subtle-hover: oklch(0.93 0.0354 24.44); - --luke-color-intent-danger-surface-subtle-pressed: oklch(0.9 0.0519 24.44); - --luke-color-intent-danger-surface-solid: oklch(0.5269 0.1889 24.44); - --luke-color-intent-danger-surface-solid-hover: oklch(0.4769 0.1889 24.44); - --luke-color-intent-danger-surface-solid-pressed: oklch(0.4369 0.1769 24.44); - --luke-color-intent-danger-border: oklch(0.6791 0.12 24.44); - --luke-color-intent-danger-text: oklch(0.5061 0.13 24.44); - --luke-color-intent-danger-on-solid: oklch(0.985 0 24.44); - --luke-color-intent-info-surface-subtle: oklch(0.955 0.0212 266.66); - --luke-color-intent-info-border: oklch(0.6685 0.12 266.66); - --luke-color-intent-info-text: oklch(0.4326 0.13 266.66); - --luke-color-intent-success-surface-subtle: oklch(0.955 0.0419 137.4); - --luke-color-intent-success-border: oklch(0.6541 0.1197 137.4); - --luke-color-intent-success-text: oklch(0.4475 0.1197 137.4); - --luke-color-intent-warning-surface-subtle: oklch(0.955 0.0376 76.41); - --luke-color-intent-warning-border: oklch(0.6695 0.12 76.41); - --luke-color-intent-warning-text: oklch(0.4981 0.1044 76.41); - --luke-depth-recessed: none; - --luke-depth-resting: 0 1px 3px oklch(0.2 0.01 250 / 0.04), 0 1px 2px oklch(0.2 0.01 250 / 0.02); - --luke-depth-raised: 0 2px 6px oklch(0.2 0.01 250 / 0.05), 0 1px 3px oklch(0.2 0.01 250 / 0.035); - --luke-depth-floating: 0 4px 14px oklch(0.2 0.01 250 / 0.12); - --luke-depth-overlay: 0 12px 36px oklch(0.2 0.01 250 / 0.16); - --luke-action-control-finish-recessed: radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.08) 0%, transparent 100%); - --luke-action-control-finish-resting: radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.16) 0%, transparent 100%), radial-gradient(80% 50% at 50% 110%, rgb(255 255 255 / 0.07) 0%, transparent 70%); - --luke-action-control-finish-raised: radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.2) 0%, transparent 100%), radial-gradient(80% 50% at 50% 110%, rgb(255 255 255 / 0.1) 0%, transparent 70%); -} - -@media (prefers-color-scheme: dark) { - .luke-ui-theme-paper { - color-scheme: dark; - --luke-color-surface-canvas: oklch(0.22 0.01 250); - --luke-color-surface-recessed: oklch(0.195 0.01 250); - --luke-color-surface-floating: oklch(0.29 0.01 250); - --luke-color-surface-overlay: oklch(0.31 0.01 250); - --luke-color-scrim: oklch(0 0 0 / 0.4); - --luke-color-loading-skeleton: oklch(0.3895 0.01 250); - --luke-color-text-primary: oklch(0.89 0.01 250); - --luke-color-text-secondary: oklch(0.78 0.01 250); - --luke-color-text-disabled: oklch(0.55 0.01 250); - --luke-color-border-decorative: oklch(0.32 0.01 250); - --luke-color-border-control: oklch(0.5383 0.01 250); - --luke-color-border-focus: oklch(0.72 0.13 255); - --luke-color-intent-neutral-surface-subtle: oklch(0.32 0.0035 250); - --luke-color-intent-neutral-surface-subtle-hover: oklch(0.38 0.0035 250); - --luke-color-intent-neutral-surface-subtle-pressed: oklch(0.42 0.0035 250); - --luke-color-intent-neutral-surface-solid: oklch(0.85 0.01 250); - --luke-color-intent-neutral-surface-solid-hover: oklch(0.9 0.01 250); - --luke-color-intent-neutral-surface-solid-pressed: oklch(0.94 0.01 250); - --luke-color-intent-neutral-on-solid: oklch(0.18 0.01 250); - --luke-color-intent-accent-surface-subtle: oklch(0.32 0.0385 250); - --luke-color-intent-accent-surface-subtle-hover: oklch(0.38 0.0385 250); - --luke-color-intent-accent-surface-subtle-pressed: oklch(0.42 0.0385 250); - --luke-color-intent-accent-surface-solid: oklch(0.7 0.11 250); - --luke-color-intent-accent-surface-solid-hover: oklch(0.75 0.11 250); - --luke-color-intent-accent-surface-solid-pressed: oklch(0.79 0.11 250); - --luke-color-intent-accent-border: oklch(0.5378 0.11 250); - --luke-color-intent-accent-text: oklch(0.8006 0.1046 250); - --luke-color-intent-accent-text-hover: oklch(0.8606 0.0714 250); - --luke-color-intent-accent-on-solid: oklch(0.18 0.01 250); - --luke-color-intent-danger-surface-subtle: oklch(0.32 0.056 25); - --luke-color-intent-danger-surface-subtle-hover: oklch(0.38 0.056 25); - --luke-color-intent-danger-surface-subtle-pressed: oklch(0.42 0.056 25); - --luke-color-intent-danger-surface-solid: oklch(0.72 0.16 25); - --luke-color-intent-danger-surface-solid-hover: oklch(0.77 0.1356 25); - --luke-color-intent-danger-surface-solid-pressed: oklch(0.81 0.1075 25); - --luke-color-intent-danger-border: oklch(0.5527 0.12 25); - --luke-color-intent-danger-text: oklch(0.806 0.1102 25); - --luke-color-intent-danger-on-solid: oklch(0.18 0.01 25); - --luke-color-intent-info-surface-subtle: oklch(0.32 0.0455 255); - --luke-color-intent-info-border: oklch(0.5394 0.12 255); - --luke-color-intent-info-text: oklch(0.8012 0.1018 255); - --luke-color-intent-success-surface-subtle: oklch(0.32 0.0455 150); - --luke-color-intent-success-border: oklch(0.5255 0.12 150); - --luke-color-intent-success-text: oklch(0.7934 0.13 150); - --luke-color-intent-warning-surface-subtle: oklch(0.32 0.0455 80); - --luke-color-intent-warning-border: oklch(0.5422 0.1123 80); - --luke-color-intent-warning-text: oklch(0.8036 0.13 80); - --luke-depth-recessed: inset 0 1px 2px oklch(0.12 0.01 250 / 0.22); - --luke-depth-resting: 0 1px 3px oklch(0.12 0.01 250 / 0.12), 0 1px 2px oklch(0.12 0.01 250 / 0.06); - --luke-depth-raised: 0 2px 6px oklch(0.12 0.01 250 / 0.18), 0 1px 3px oklch(0.12 0.01 250 / 0.12); - --luke-depth-floating: 0 4px 14px oklch(0.12 0.01 250 / 0.25); - --luke-depth-overlay: 0 12px 36px oklch(0.12 0.01 250 / 0.32); - --luke-action-control-finish-recessed: radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.04) 0%, transparent 100%); - --luke-action-control-finish-resting: radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.07) 0%, transparent 100%), radial-gradient(80% 50% at 50% 110%, rgb(255 255 255 / 0.03) 0%, transparent 70%); - --luke-action-control-finish-raised: radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.1) 0%, transparent 100%), radial-gradient(80% 50% at 50% 110%, rgb(255 255 255 / 0.05) 0%, transparent 70%); - } -} - -.luke-ui-theme-paper[data-color-mode='light'], -.luke-ui-theme-paper [data-color-mode='light'], -[data-color-mode='light'] .luke-ui-theme-paper { - color-scheme: light; - --luke-color-surface-canvas: oklch(1 0 0); - --luke-color-surface-recessed: oklch(1 0 0); - --luke-color-surface-floating: oklch(1 0 0); - --luke-color-surface-overlay: oklch(1 0 0); - --luke-color-scrim: oklch(0 0 0 / 0.2); - --luke-color-loading-skeleton: oklch(0.8768 0 0); - --luke-color-text-primary: oklch(0.225 0 0); - --luke-color-text-secondary: oklch(0.41 0 0); - --luke-color-text-disabled: oklch(0.68 0 0); - --luke-color-border-decorative: oklch(0.92 0 0); - --luke-color-border-control: oklch(0.6651 0 0); - --luke-color-border-focus: oklch(0.55 0.17 255); - --luke-color-intent-neutral-surface-subtle: oklch(0.955 0 0); - --luke-color-intent-neutral-surface-subtle-hover: oklch(0.93 0 0); - --luke-color-intent-neutral-surface-subtle-pressed: oklch(0.9 0 0); - --luke-color-intent-neutral-surface-solid: oklch(0.32 0 0); - --luke-color-intent-neutral-surface-solid-hover: oklch(0.27 0 0); - --luke-color-intent-neutral-surface-solid-pressed: oklch(0.23 0 0); - --luke-color-intent-neutral-on-solid: oklch(0.985 0 0); - --luke-color-intent-accent-surface-subtle: oklch(0.955 0.0226 247.47); - --luke-color-intent-accent-surface-subtle-hover: oklch(0.93 0.0341 247.47); - --luke-color-intent-accent-surface-subtle-pressed: oklch(0.9 0.0341 247.47); - --luke-color-intent-accent-surface-solid: oklch(0.4264 0.0975 247.47); - --luke-color-intent-accent-surface-solid-hover: oklch(0.3764 0.0975 247.47); - --luke-color-intent-accent-surface-solid-pressed: oklch(0.3364 0.0894 247.47); - --luke-color-intent-accent-border: oklch(0.6631 0.0975 247.47); - --luke-color-intent-accent-text: oklch(0.4264 0.0975 247.47); - --luke-color-intent-accent-text-hover: oklch(0.3664 0.0974 247.47); - --luke-color-intent-accent-on-solid: oklch(0.985 0 247.47); - --luke-color-intent-danger-surface-subtle: oklch(0.955 0.0223 24.44); - --luke-color-intent-danger-surface-subtle-hover: oklch(0.93 0.0354 24.44); - --luke-color-intent-danger-surface-subtle-pressed: oklch(0.9 0.0519 24.44); - --luke-color-intent-danger-surface-solid: oklch(0.5269 0.1889 24.44); - --luke-color-intent-danger-surface-solid-hover: oklch(0.4769 0.1889 24.44); - --luke-color-intent-danger-surface-solid-pressed: oklch(0.4369 0.1769 24.44); - --luke-color-intent-danger-border: oklch(0.6791 0.12 24.44); - --luke-color-intent-danger-text: oklch(0.5061 0.13 24.44); - --luke-color-intent-danger-on-solid: oklch(0.985 0 24.44); - --luke-color-intent-info-surface-subtle: oklch(0.955 0.0212 266.66); - --luke-color-intent-info-border: oklch(0.6685 0.12 266.66); - --luke-color-intent-info-text: oklch(0.4326 0.13 266.66); - --luke-color-intent-success-surface-subtle: oklch(0.955 0.0419 137.4); - --luke-color-intent-success-border: oklch(0.6541 0.1197 137.4); - --luke-color-intent-success-text: oklch(0.4475 0.1197 137.4); - --luke-color-intent-warning-surface-subtle: oklch(0.955 0.0376 76.41); - --luke-color-intent-warning-border: oklch(0.6695 0.12 76.41); - --luke-color-intent-warning-text: oklch(0.4981 0.1044 76.41); - --luke-depth-recessed: none; - --luke-depth-resting: 0 1px 3px oklch(0.2 0.01 250 / 0.04), 0 1px 2px oklch(0.2 0.01 250 / 0.02); - --luke-depth-raised: 0 2px 6px oklch(0.2 0.01 250 / 0.05), 0 1px 3px oklch(0.2 0.01 250 / 0.035); - --luke-depth-floating: 0 4px 14px oklch(0.2 0.01 250 / 0.12); - --luke-depth-overlay: 0 12px 36px oklch(0.2 0.01 250 / 0.16); - --luke-action-control-finish-recessed: radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.08) 0%, transparent 100%); - --luke-action-control-finish-resting: radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.16) 0%, transparent 100%), radial-gradient(80% 50% at 50% 110%, rgb(255 255 255 / 0.07) 0%, transparent 70%); - --luke-action-control-finish-raised: radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.2) 0%, transparent 100%), radial-gradient(80% 50% at 50% 110%, rgb(255 255 255 / 0.1) 0%, transparent 70%); -} - -.luke-ui-theme-paper[data-color-mode='dark'], -.luke-ui-theme-paper [data-color-mode='dark'], -[data-color-mode='dark'] .luke-ui-theme-paper { - color-scheme: dark; - --luke-color-surface-canvas: oklch(0.22 0.01 250); - --luke-color-surface-recessed: oklch(0.195 0.01 250); - --luke-color-surface-floating: oklch(0.29 0.01 250); - --luke-color-surface-overlay: oklch(0.31 0.01 250); - --luke-color-scrim: oklch(0 0 0 / 0.4); - --luke-color-loading-skeleton: oklch(0.3895 0.01 250); - --luke-color-text-primary: oklch(0.89 0.01 250); - --luke-color-text-secondary: oklch(0.78 0.01 250); - --luke-color-text-disabled: oklch(0.55 0.01 250); - --luke-color-border-decorative: oklch(0.32 0.01 250); - --luke-color-border-control: oklch(0.5383 0.01 250); - --luke-color-border-focus: oklch(0.72 0.13 255); - --luke-color-intent-neutral-surface-subtle: oklch(0.32 0.0035 250); - --luke-color-intent-neutral-surface-subtle-hover: oklch(0.38 0.0035 250); - --luke-color-intent-neutral-surface-subtle-pressed: oklch(0.42 0.0035 250); - --luke-color-intent-neutral-surface-solid: oklch(0.85 0.01 250); - --luke-color-intent-neutral-surface-solid-hover: oklch(0.9 0.01 250); - --luke-color-intent-neutral-surface-solid-pressed: oklch(0.94 0.01 250); - --luke-color-intent-neutral-on-solid: oklch(0.18 0.01 250); - --luke-color-intent-accent-surface-subtle: oklch(0.32 0.0385 250); - --luke-color-intent-accent-surface-subtle-hover: oklch(0.38 0.0385 250); - --luke-color-intent-accent-surface-subtle-pressed: oklch(0.42 0.0385 250); - --luke-color-intent-accent-surface-solid: oklch(0.7 0.11 250); - --luke-color-intent-accent-surface-solid-hover: oklch(0.75 0.11 250); - --luke-color-intent-accent-surface-solid-pressed: oklch(0.79 0.11 250); - --luke-color-intent-accent-border: oklch(0.5378 0.11 250); - --luke-color-intent-accent-text: oklch(0.8006 0.1046 250); - --luke-color-intent-accent-text-hover: oklch(0.8606 0.0714 250); - --luke-color-intent-accent-on-solid: oklch(0.18 0.01 250); - --luke-color-intent-danger-surface-subtle: oklch(0.32 0.056 25); - --luke-color-intent-danger-surface-subtle-hover: oklch(0.38 0.056 25); - --luke-color-intent-danger-surface-subtle-pressed: oklch(0.42 0.056 25); - --luke-color-intent-danger-surface-solid: oklch(0.72 0.16 25); - --luke-color-intent-danger-surface-solid-hover: oklch(0.77 0.1356 25); - --luke-color-intent-danger-surface-solid-pressed: oklch(0.81 0.1075 25); - --luke-color-intent-danger-border: oklch(0.5527 0.12 25); - --luke-color-intent-danger-text: oklch(0.806 0.1102 25); - --luke-color-intent-danger-on-solid: oklch(0.18 0.01 25); - --luke-color-intent-info-surface-subtle: oklch(0.32 0.0455 255); - --luke-color-intent-info-border: oklch(0.5394 0.12 255); - --luke-color-intent-info-text: oklch(0.8012 0.1018 255); - --luke-color-intent-success-surface-subtle: oklch(0.32 0.0455 150); - --luke-color-intent-success-border: oklch(0.5255 0.12 150); - --luke-color-intent-success-text: oklch(0.7934 0.13 150); - --luke-color-intent-warning-surface-subtle: oklch(0.32 0.0455 80); - --luke-color-intent-warning-border: oklch(0.5422 0.1123 80); - --luke-color-intent-warning-text: oklch(0.8036 0.13 80); - --luke-depth-recessed: inset 0 1px 2px oklch(0.12 0.01 250 / 0.22); - --luke-depth-resting: 0 1px 3px oklch(0.12 0.01 250 / 0.12), 0 1px 2px oklch(0.12 0.01 250 / 0.06); - --luke-depth-raised: 0 2px 6px oklch(0.12 0.01 250 / 0.18), 0 1px 3px oklch(0.12 0.01 250 / 0.12); - --luke-depth-floating: 0 4px 14px oklch(0.12 0.01 250 / 0.25); - --luke-depth-overlay: 0 12px 36px oklch(0.12 0.01 250 / 0.32); - --luke-action-control-finish-recessed: radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.04) 0%, transparent 100%); - --luke-action-control-finish-resting: radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.07) 0%, transparent 100%), radial-gradient(80% 50% at 50% 110%, rgb(255 255 255 / 0.03) 0%, transparent 70%); - --luke-action-control-finish-raised: radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.1) 0%, transparent 100%), radial-gradient(80% 50% at 50% 110%, rgb(255 255 255 / 0.05) 0%, transparent 70%); -} diff --git a/packages/@luke-ui/react/src/theme/__fixtures__/compat-goldens/tactile.pre-v2.css b/packages/@luke-ui/react/src/theme/__fixtures__/compat-goldens/tactile.pre-v2.css deleted file mode 100644 index 442c1289..00000000 --- a/packages/@luke-ui/react/src/theme/__fixtures__/compat-goldens/tactile.pre-v2.css +++ /dev/null @@ -1,318 +0,0 @@ -/* Generated by buildTheme from @luke-ui/react. Do not edit. */ -.luke-ui-theme-tactile { - --luke-font-100-baseline-trim: -0.3029em; - --luke-font-100-cap-height-trim: -0.3029em; - --luke-font-100-font-size: 12px; - --luke-font-100-letter-spacing: 0.0025em; - --luke-font-100-line-height: 16px; - --luke-font-200-baseline-trim: -0.3505em; - --luke-font-200-cap-height-trim: -0.3505em; - --luke-font-200-font-size: 14px; - --luke-font-200-letter-spacing: 0; - --luke-font-200-line-height: 20px; - --luke-font-300-baseline-trim: -0.3862em; - --luke-font-300-cap-height-trim: -0.3862em; - --luke-font-300-font-size: 16px; - --luke-font-300-letter-spacing: 0; - --luke-font-300-line-height: 24px; - --luke-font-400-baseline-trim: -0.3585em; - --luke-font-400-cap-height-trim: -0.3585em; - --luke-font-400-font-size: 18px; - --luke-font-400-letter-spacing: -0.0025em; - --luke-font-400-line-height: 26px; - --luke-font-500-baseline-trim: -0.3362em; - --luke-font-500-cap-height-trim: -0.3362em; - --luke-font-500-font-size: 20px; - --luke-font-500-letter-spacing: -0.005em; - --luke-font-500-line-height: 28px; - --luke-font-600-baseline-trim: -0.2612em; - --luke-font-600-cap-height-trim: -0.2612em; - --luke-font-600-font-size: 24px; - --luke-font-600-letter-spacing: -0.00625em; - --luke-font-600-line-height: 30px; - --luke-font-700-baseline-trim: -0.2791em; - --luke-font-700-cap-height-trim: -0.2791em; - --luke-font-700-font-size: 28px; - --luke-font-700-letter-spacing: -0.0075em; - --luke-font-700-line-height: 36px; - --luke-font-800-baseline-trim: -0.2077em; - --luke-font-800-cap-height-trim: -0.2077em; - --luke-font-800-font-size: 35px; - --luke-font-800-letter-spacing: -0.01em; - --luke-font-800-line-height: 40px; - --luke-font-900-baseline-trim: -0.1362em; - --luke-font-900-cap-height-trim: -0.1362em; - --luke-font-900-font-size: 60px; - --luke-font-900-letter-spacing: -0.025em; - --luke-font-900-line-height: 60px; - --luke-font-family: 'Inter', system-ui, sans-serif; - --luke-font-weight-body: 400; - --luke-font-weight-label: 500; - --luke-font-weight-heading: 600; - --luke-font-weight-emphasis: 700; - --luke-radius-detail: 4px; - --luke-radius-control: 8px; - --luke-radius-surface: 12px; - --luke-radius-overlay: 16px; - --luke-radius-full: 9999px; - --luke-space-100: 4px; - --luke-space-200: 8px; - --luke-space-300: 12px; - --luke-space-400: 16px; - --luke-space-600: 24px; - --luke-space-800: 32px; - --luke-space-1000: 40px; - --luke-space-1200: 48px; - --luke-space-1600: 64px; - --luke-control-size-small: 32px; - --luke-control-size-medium: 40px; - --luke-icon-size-xsmall: 16px; - --luke-icon-size-small: 20px; - --luke-icon-size-medium: 24px; - --luke-icon-size-large: 32px; - --luke-motion-duration-fast: 120ms; - --luke-motion-easing-standard: cubic-bezier(0, 0, 0.4, 1); - --luke-motion-easing-exit: cubic-bezier(0.3, 0, 1, 1); -} - -.luke-ui-theme-tactile { - color-scheme: light; - --luke-color-surface-canvas: oklch(0.985 0 0); - --luke-color-surface-recessed: oklch(1 0 0); - --luke-color-surface-floating: oklch(0.997 0 0); - --luke-color-surface-overlay: oklch(1 0 0); - --luke-color-scrim: oklch(0 0 0 / 0.2); - --luke-color-loading-skeleton: oklch(0.8634 0 0); - --luke-color-text-primary: oklch(0.225 0 0); - --luke-color-text-secondary: oklch(0.41 0 0); - --luke-color-text-disabled: oklch(0.665 0 0); - --luke-color-border-decorative: oklch(0.905 0 0); - --luke-color-border-control: oklch(0.654 0 0); - --luke-color-border-focus: oklch(0.55 0.17 255); - --luke-color-intent-neutral-surface-subtle: oklch(0.94 0 0); - --luke-color-intent-neutral-surface-subtle-hover: oklch(0.915 0 0); - --luke-color-intent-neutral-surface-subtle-pressed: oklch(0.885 0 0); - --luke-color-intent-neutral-surface-solid: oklch(0.32 0 0); - --luke-color-intent-neutral-surface-solid-hover: oklch(0.27 0 0); - --luke-color-intent-neutral-surface-solid-pressed: oklch(0.23 0 0); - --luke-color-intent-neutral-on-solid: oklch(0.985 0 0); - --luke-color-intent-accent-surface-subtle: oklch(0.94 0.0309 200); - --luke-color-intent-accent-surface-subtle-hover: oklch(0.915 0.0309 200); - --luke-color-intent-accent-surface-subtle-pressed: oklch(0.885 0.0309 200); - --luke-color-intent-accent-surface-solid: oklch(0.52 0.0884 200); - --luke-color-intent-accent-surface-solid-hover: oklch(0.47 0.0799 200); - --luke-color-intent-accent-surface-solid-pressed: oklch(0.43 0.0731 200); - --luke-color-intent-accent-border: oklch(0.6441 0.0884 200); - --luke-color-intent-accent-text: oklch(0.4775 0.0812 200); - --luke-color-intent-accent-text-hover: oklch(0.4175 0.071 200); - --luke-color-intent-accent-on-solid: oklch(0.985 0 200); - --luke-color-intent-danger-surface-subtle: oklch(0.94 0.0301 27); - --luke-color-intent-danger-surface-subtle-hover: oklch(0.915 0.0436 27); - --luke-color-intent-danger-surface-subtle-pressed: oklch(0.885 0.06 27); - --luke-color-intent-danger-surface-solid: oklch(0.52 0.18 27); - --luke-color-intent-danger-surface-solid-hover: oklch(0.47 0.18 27); - --luke-color-intent-danger-surface-solid-pressed: oklch(0.43 0.1752 27); - --luke-color-intent-danger-border: oklch(0.6677 0.12 27); - --luke-color-intent-danger-text: oklch(0.4943 0.13 27); - --luke-color-intent-danger-on-solid: oklch(0.985 0 27); - --luke-color-intent-info-surface-subtle: oklch(0.94 0.0291 255); - --luke-color-intent-info-border: oklch(0.6542 0.12 255); - --luke-color-intent-info-text: oklch(0.4861 0.13 255); - --luke-color-intent-success-surface-subtle: oklch(0.94 0.0455 150); - --luke-color-intent-success-border: oklch(0.6408 0.12 150); - --luke-color-intent-success-text: oklch(0.4738 0.13 150); - --luke-color-intent-warning-surface-subtle: oklch(0.94 0.0489 75); - --luke-color-intent-warning-border: oklch(0.6587 0.12 75); - --luke-color-intent-warning-text: oklch(0.4873 0.1028 75); - --luke-depth-recessed: inset 0 2px 3px oklch(0.3 0.03 220 / 0.18), inset 0 -1px 0 oklch(0.98 0.03 220 / 0.65); - --luke-depth-resting: 0 2px 0 oklch(0.3 0.03 220 / 0.28), 0 3px 5px -1px oklch(0.3 0.03 220 / 0.16); - --luke-depth-raised: 0 3px 0 oklch(0.3 0.03 220 / 0.3), 0 5px 8px -2px oklch(0.3 0.03 220 / 0.2); - --luke-depth-floating: 0 4px 12px oklch(0.3 0.03 220 / 0.16), 0 2px 4px oklch(0.3 0.03 220 / 0.1); - --luke-depth-overlay: 0 12px 32px oklch(0.3 0.03 220 / 0.2), 0 4px 12px oklch(0.3 0.03 220 / 0.12); - --luke-action-control-finish-recessed: radial-gradient(80% 70% at 50% 0%, rgb(255 255 255 / 0.12) 0%, transparent 100%), radial-gradient(70% 45% at 50% 110%, rgb(255 255 255 / 0.06) 0%, transparent 70%); - --luke-action-control-finish-resting: radial-gradient(80% 70% at 50% 0%, rgb(255 255 255 / 0.24) 0%, transparent 100%), radial-gradient(70% 45% at 50% 110%, rgb(255 255 255 / 0.12) 0%, transparent 70%); - --luke-action-control-finish-raised: radial-gradient(80% 70% at 50% 0%, rgb(255 255 255 / 0.3) 0%, transparent 100%), radial-gradient(70% 45% at 50% 110%, rgb(255 255 255 / 0.16) 0%, transparent 70%); -} - -@media (prefers-color-scheme: dark) { - .luke-ui-theme-tactile { - color-scheme: dark; - --luke-color-surface-canvas: oklch(0.25 0.015 210); - --luke-color-surface-recessed: oklch(0.225 0.015 210); - --luke-color-surface-floating: oklch(0.32 0.015 210); - --luke-color-surface-overlay: oklch(0.34 0.015 210); - --luke-color-scrim: oklch(0 0 0 / 0.4); - --luke-color-loading-skeleton: oklch(0.4084 0.01 210); - --luke-color-text-primary: oklch(0.89 0.015 210); - --luke-color-text-secondary: oklch(0.78 0.015 210); - --luke-color-text-disabled: oklch(0.58 0.01 210); - --luke-color-border-decorative: oklch(0.35 0.015 210); - --luke-color-border-control: oklch(0.5611 0.015 210); - --luke-color-border-focus: oklch(0.72 0.13 255); - --luke-color-intent-neutral-surface-subtle: oklch(0.35 0.0052 210); - --luke-color-intent-neutral-surface-subtle-hover: oklch(0.41 0.0052 210); - --luke-color-intent-neutral-surface-subtle-pressed: oklch(0.45 0.0052 210); - --luke-color-intent-neutral-surface-solid: oklch(0.85 0.015 210); - --luke-color-intent-neutral-surface-solid-hover: oklch(0.9 0.015 210); - --luke-color-intent-neutral-surface-solid-pressed: oklch(0.94 0.015 210); - --luke-color-intent-neutral-on-solid: oklch(0.18 0.01 210); - --luke-color-intent-accent-surface-subtle: oklch(0.35 0.035 200); - --luke-color-intent-accent-surface-subtle-hover: oklch(0.41 0.035 200); - --luke-color-intent-accent-surface-subtle-pressed: oklch(0.45 0.035 200); - --luke-color-intent-accent-surface-solid: oklch(0.75 0.1 200); - --luke-color-intent-accent-surface-solid-hover: oklch(0.8 0.1 200); - --luke-color-intent-accent-surface-solid-pressed: oklch(0.84 0.1 200); - --luke-color-intent-accent-border: oklch(0.5522 0.0939 200); - --luke-color-intent-accent-text: oklch(0.8337 0.1 200); - --luke-color-intent-accent-text-hover: oklch(0.8937 0.1 200); - --luke-color-intent-accent-on-solid: oklch(0.18 0.01 200); - --luke-color-intent-danger-surface-subtle: oklch(0.35 0.056 25); - --luke-color-intent-danger-surface-subtle-hover: oklch(0.41 0.056 25); - --luke-color-intent-danger-surface-subtle-pressed: oklch(0.45 0.056 25); - --luke-color-intent-danger-surface-solid: oklch(0.72 0.16 25); - --luke-color-intent-danger-surface-solid-hover: oklch(0.77 0.1356 25); - --luke-color-intent-danger-surface-solid-pressed: oklch(0.81 0.1075 25); - --luke-color-intent-danger-border: oklch(0.5766 0.12 25); - --luke-color-intent-danger-text: oklch(0.8413 0.0871 25); - --luke-color-intent-danger-on-solid: oklch(0.18 0.01 25); - --luke-color-intent-info-surface-subtle: oklch(0.35 0.0455 255); - --luke-color-intent-info-border: oklch(0.5632 0.12 255); - --luke-color-intent-info-text: oklch(0.8395 0.081 255); - --luke-color-intent-success-surface-subtle: oklch(0.35 0.0455 150); - --luke-color-intent-success-border: oklch(0.5495 0.12 150); - --luke-color-intent-success-text: oklch(0.832 0.13 150); - --luke-color-intent-warning-surface-subtle: oklch(0.35 0.0455 80); - --luke-color-intent-warning-border: oklch(0.5663 0.1173 80); - --luke-color-intent-warning-text: oklch(0.8419 0.13 80); - --luke-depth-recessed: inset 0 2px 4px oklch(0.05 0.01 220 / 0.45), inset 0 -1px 0 oklch(0.8 0.01 220 / 0.12); - --luke-depth-resting: 0 2px 0 oklch(0.05 0.01 220 / 0.5), 0 3px 5px -1px oklch(0.05 0.01 220 / 0.26); - --luke-depth-raised: 0 3px 0 oklch(0.05 0.01 220 / 0.55), 0 5px 8px -2px oklch(0.05 0.01 220 / 0.32); - --luke-depth-floating: 0 4px 12px oklch(0.05 0.01 220 / 0.38), 0 2px 4px oklch(0.05 0.01 220 / 0.22); - --luke-depth-overlay: 0 12px 32px oklch(0.05 0.01 220 / 0.5), 0 4px 12px oklch(0.05 0.01 220 / 0.28); - --luke-action-control-finish-recessed: radial-gradient(80% 70% at 50% 0%, rgb(255 255 255 / 0.08) 0%, transparent 100%), radial-gradient(70% 45% at 50% 110%, rgb(255 255 255 / 0.04) 0%, transparent 70%); - --luke-action-control-finish-resting: radial-gradient(80% 70% at 50% 0%, rgb(255 255 255 / 0.14) 0%, transparent 100%), radial-gradient(70% 45% at 50% 110%, rgb(255 255 255 / 0.07) 0%, transparent 70%); - --luke-action-control-finish-raised: radial-gradient(80% 70% at 50% 0%, rgb(255 255 255 / 0.18) 0%, transparent 100%), radial-gradient(70% 45% at 50% 110%, rgb(255 255 255 / 0.1) 0%, transparent 70%); - } -} - -.luke-ui-theme-tactile[data-color-mode='light'], -.luke-ui-theme-tactile [data-color-mode='light'], -[data-color-mode='light'] .luke-ui-theme-tactile { - color-scheme: light; - --luke-color-surface-canvas: oklch(0.985 0 0); - --luke-color-surface-recessed: oklch(1 0 0); - --luke-color-surface-floating: oklch(0.997 0 0); - --luke-color-surface-overlay: oklch(1 0 0); - --luke-color-scrim: oklch(0 0 0 / 0.2); - --luke-color-loading-skeleton: oklch(0.8634 0 0); - --luke-color-text-primary: oklch(0.225 0 0); - --luke-color-text-secondary: oklch(0.41 0 0); - --luke-color-text-disabled: oklch(0.665 0 0); - --luke-color-border-decorative: oklch(0.905 0 0); - --luke-color-border-control: oklch(0.654 0 0); - --luke-color-border-focus: oklch(0.55 0.17 255); - --luke-color-intent-neutral-surface-subtle: oklch(0.94 0 0); - --luke-color-intent-neutral-surface-subtle-hover: oklch(0.915 0 0); - --luke-color-intent-neutral-surface-subtle-pressed: oklch(0.885 0 0); - --luke-color-intent-neutral-surface-solid: oklch(0.32 0 0); - --luke-color-intent-neutral-surface-solid-hover: oklch(0.27 0 0); - --luke-color-intent-neutral-surface-solid-pressed: oklch(0.23 0 0); - --luke-color-intent-neutral-on-solid: oklch(0.985 0 0); - --luke-color-intent-accent-surface-subtle: oklch(0.94 0.0309 200); - --luke-color-intent-accent-surface-subtle-hover: oklch(0.915 0.0309 200); - --luke-color-intent-accent-surface-subtle-pressed: oklch(0.885 0.0309 200); - --luke-color-intent-accent-surface-solid: oklch(0.52 0.0884 200); - --luke-color-intent-accent-surface-solid-hover: oklch(0.47 0.0799 200); - --luke-color-intent-accent-surface-solid-pressed: oklch(0.43 0.0731 200); - --luke-color-intent-accent-border: oklch(0.6441 0.0884 200); - --luke-color-intent-accent-text: oklch(0.4775 0.0812 200); - --luke-color-intent-accent-text-hover: oklch(0.4175 0.071 200); - --luke-color-intent-accent-on-solid: oklch(0.985 0 200); - --luke-color-intent-danger-surface-subtle: oklch(0.94 0.0301 27); - --luke-color-intent-danger-surface-subtle-hover: oklch(0.915 0.0436 27); - --luke-color-intent-danger-surface-subtle-pressed: oklch(0.885 0.06 27); - --luke-color-intent-danger-surface-solid: oklch(0.52 0.18 27); - --luke-color-intent-danger-surface-solid-hover: oklch(0.47 0.18 27); - --luke-color-intent-danger-surface-solid-pressed: oklch(0.43 0.1752 27); - --luke-color-intent-danger-border: oklch(0.6677 0.12 27); - --luke-color-intent-danger-text: oklch(0.4943 0.13 27); - --luke-color-intent-danger-on-solid: oklch(0.985 0 27); - --luke-color-intent-info-surface-subtle: oklch(0.94 0.0291 255); - --luke-color-intent-info-border: oklch(0.6542 0.12 255); - --luke-color-intent-info-text: oklch(0.4861 0.13 255); - --luke-color-intent-success-surface-subtle: oklch(0.94 0.0455 150); - --luke-color-intent-success-border: oklch(0.6408 0.12 150); - --luke-color-intent-success-text: oklch(0.4738 0.13 150); - --luke-color-intent-warning-surface-subtle: oklch(0.94 0.0489 75); - --luke-color-intent-warning-border: oklch(0.6587 0.12 75); - --luke-color-intent-warning-text: oklch(0.4873 0.1028 75); - --luke-depth-recessed: inset 0 2px 3px oklch(0.3 0.03 220 / 0.18), inset 0 -1px 0 oklch(0.98 0.03 220 / 0.65); - --luke-depth-resting: 0 2px 0 oklch(0.3 0.03 220 / 0.28), 0 3px 5px -1px oklch(0.3 0.03 220 / 0.16); - --luke-depth-raised: 0 3px 0 oklch(0.3 0.03 220 / 0.3), 0 5px 8px -2px oklch(0.3 0.03 220 / 0.2); - --luke-depth-floating: 0 4px 12px oklch(0.3 0.03 220 / 0.16), 0 2px 4px oklch(0.3 0.03 220 / 0.1); - --luke-depth-overlay: 0 12px 32px oklch(0.3 0.03 220 / 0.2), 0 4px 12px oklch(0.3 0.03 220 / 0.12); - --luke-action-control-finish-recessed: radial-gradient(80% 70% at 50% 0%, rgb(255 255 255 / 0.12) 0%, transparent 100%), radial-gradient(70% 45% at 50% 110%, rgb(255 255 255 / 0.06) 0%, transparent 70%); - --luke-action-control-finish-resting: radial-gradient(80% 70% at 50% 0%, rgb(255 255 255 / 0.24) 0%, transparent 100%), radial-gradient(70% 45% at 50% 110%, rgb(255 255 255 / 0.12) 0%, transparent 70%); - --luke-action-control-finish-raised: radial-gradient(80% 70% at 50% 0%, rgb(255 255 255 / 0.3) 0%, transparent 100%), radial-gradient(70% 45% at 50% 110%, rgb(255 255 255 / 0.16) 0%, transparent 70%); -} - -.luke-ui-theme-tactile[data-color-mode='dark'], -.luke-ui-theme-tactile [data-color-mode='dark'], -[data-color-mode='dark'] .luke-ui-theme-tactile { - color-scheme: dark; - --luke-color-surface-canvas: oklch(0.25 0.015 210); - --luke-color-surface-recessed: oklch(0.225 0.015 210); - --luke-color-surface-floating: oklch(0.32 0.015 210); - --luke-color-surface-overlay: oklch(0.34 0.015 210); - --luke-color-scrim: oklch(0 0 0 / 0.4); - --luke-color-loading-skeleton: oklch(0.4084 0.01 210); - --luke-color-text-primary: oklch(0.89 0.015 210); - --luke-color-text-secondary: oklch(0.78 0.015 210); - --luke-color-text-disabled: oklch(0.58 0.01 210); - --luke-color-border-decorative: oklch(0.35 0.015 210); - --luke-color-border-control: oklch(0.5611 0.015 210); - --luke-color-border-focus: oklch(0.72 0.13 255); - --luke-color-intent-neutral-surface-subtle: oklch(0.35 0.0052 210); - --luke-color-intent-neutral-surface-subtle-hover: oklch(0.41 0.0052 210); - --luke-color-intent-neutral-surface-subtle-pressed: oklch(0.45 0.0052 210); - --luke-color-intent-neutral-surface-solid: oklch(0.85 0.015 210); - --luke-color-intent-neutral-surface-solid-hover: oklch(0.9 0.015 210); - --luke-color-intent-neutral-surface-solid-pressed: oklch(0.94 0.015 210); - --luke-color-intent-neutral-on-solid: oklch(0.18 0.01 210); - --luke-color-intent-accent-surface-subtle: oklch(0.35 0.035 200); - --luke-color-intent-accent-surface-subtle-hover: oklch(0.41 0.035 200); - --luke-color-intent-accent-surface-subtle-pressed: oklch(0.45 0.035 200); - --luke-color-intent-accent-surface-solid: oklch(0.75 0.1 200); - --luke-color-intent-accent-surface-solid-hover: oklch(0.8 0.1 200); - --luke-color-intent-accent-surface-solid-pressed: oklch(0.84 0.1 200); - --luke-color-intent-accent-border: oklch(0.5522 0.0939 200); - --luke-color-intent-accent-text: oklch(0.8337 0.1 200); - --luke-color-intent-accent-text-hover: oklch(0.8937 0.1 200); - --luke-color-intent-accent-on-solid: oklch(0.18 0.01 200); - --luke-color-intent-danger-surface-subtle: oklch(0.35 0.056 25); - --luke-color-intent-danger-surface-subtle-hover: oklch(0.41 0.056 25); - --luke-color-intent-danger-surface-subtle-pressed: oklch(0.45 0.056 25); - --luke-color-intent-danger-surface-solid: oklch(0.72 0.16 25); - --luke-color-intent-danger-surface-solid-hover: oklch(0.77 0.1356 25); - --luke-color-intent-danger-surface-solid-pressed: oklch(0.81 0.1075 25); - --luke-color-intent-danger-border: oklch(0.5766 0.12 25); - --luke-color-intent-danger-text: oklch(0.8413 0.0871 25); - --luke-color-intent-danger-on-solid: oklch(0.18 0.01 25); - --luke-color-intent-info-surface-subtle: oklch(0.35 0.0455 255); - --luke-color-intent-info-border: oklch(0.5632 0.12 255); - --luke-color-intent-info-text: oklch(0.8395 0.081 255); - --luke-color-intent-success-surface-subtle: oklch(0.35 0.0455 150); - --luke-color-intent-success-border: oklch(0.5495 0.12 150); - --luke-color-intent-success-text: oklch(0.832 0.13 150); - --luke-color-intent-warning-surface-subtle: oklch(0.35 0.0455 80); - --luke-color-intent-warning-border: oklch(0.5663 0.1173 80); - --luke-color-intent-warning-text: oklch(0.8419 0.13 80); - --luke-depth-recessed: inset 0 2px 4px oklch(0.05 0.01 220 / 0.45), inset 0 -1px 0 oklch(0.8 0.01 220 / 0.12); - --luke-depth-resting: 0 2px 0 oklch(0.05 0.01 220 / 0.5), 0 3px 5px -1px oklch(0.05 0.01 220 / 0.26); - --luke-depth-raised: 0 3px 0 oklch(0.05 0.01 220 / 0.55), 0 5px 8px -2px oklch(0.05 0.01 220 / 0.32); - --luke-depth-floating: 0 4px 12px oklch(0.05 0.01 220 / 0.38), 0 2px 4px oklch(0.05 0.01 220 / 0.22); - --luke-depth-overlay: 0 12px 32px oklch(0.05 0.01 220 / 0.5), 0 4px 12px oklch(0.05 0.01 220 / 0.28); - --luke-action-control-finish-recessed: radial-gradient(80% 70% at 50% 0%, rgb(255 255 255 / 0.08) 0%, transparent 100%), radial-gradient(70% 45% at 50% 110%, rgb(255 255 255 / 0.04) 0%, transparent 70%); - --luke-action-control-finish-resting: radial-gradient(80% 70% at 50% 0%, rgb(255 255 255 / 0.14) 0%, transparent 100%), radial-gradient(70% 45% at 50% 110%, rgb(255 255 255 / 0.07) 0%, transparent 70%); - --luke-action-control-finish-raised: radial-gradient(80% 70% at 50% 0%, rgb(255 255 255 / 0.18) 0%, transparent 100%), radial-gradient(70% 45% at 50% 110%, rgb(255 255 255 / 0.1) 0%, transparent 70%); -} diff --git a/packages/@luke-ui/react/src/theme/build-theme.test.ts b/packages/@luke-ui/react/src/theme/build-theme.test.ts index ed818c7b..7c657d57 100644 --- a/packages/@luke-ui/react/src/theme/build-theme.test.ts +++ b/packages/@luke-ui/react/src/theme/build-theme.test.ts @@ -641,8 +641,7 @@ describe('bundled theme identity', () => { // v2 regression goldens: the exact `buildTheme` output for the bundled themes under the wired-in // scale/elevation/semantic-map pipeline (Stage 6, #238). Asserted byte-identical so any later -// generator change is a reviewed, deliberate diff. Committed alongside — not overwriting — the -// permanent pre-v2 compatibility fixtures below. +// generator change is a reviewed, deliberate diff. describe('v2 regression goldens', () => { const v2Goldens = { paper: new URL('./__fixtures__/v2-goldens/paper.v2.css', import.meta.url), @@ -657,29 +656,3 @@ describe('v2 regression goldens', () => { expect(buildTheme(paperFoundation)).toBe(goldenPaper); }); }); - -// Permanent compatibility (pre-v2) goldens: the exact `buildTheme` output captured before the -// theme-v2 generator work (wayfinder #232). They are a frozen historical reference — NOT asserted -// equal to live output, which the v2 pipeline has deliberately changed — kept so the pre-v2 → v2 -// diff always has an unmodified baseline until the epic tears them down (#240). -describe('compatibility (pre-v2) goldens', () => { - const compatGoldens = { - paper: new URL('./__fixtures__/compat-goldens/paper.pre-v2.css', import.meta.url), - tactile: new URL('./__fixtures__/compat-goldens/tactile.pre-v2.css', import.meta.url), - } as const; - - it('remains a readable frozen pre-v2 reference the live output has since diverged from', async () => { - const goldenTactile = await readFile(compatGoldens.tactile, 'utf8'); - const goldenPaper = await readFile(compatGoldens.paper, 'utf8'); - - // Sanity: the frozen fixtures are the pre-v2 shape (same header, same identity class) but no - // longer match live output, which the wired-in v2 pipeline repainted. - expect(goldenTactile).toContain( - '/* Generated by buildTheme from @luke-ui/react. Do not edit. */', - ); - expect(goldenTactile).toContain('.luke-ui-theme-tactile {'); - expect(goldenPaper).toContain('.luke-ui-theme-paper {'); - expect(buildTheme(tactileFoundation)).not.toBe(goldenTactile); - expect(buildTheme(paperFoundation)).not.toBe(goldenPaper); - }); -}); diff --git a/vite.config.ts b/vite.config.ts index 3865d37c..c43dcc10 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -16,7 +16,6 @@ export default defineConfig({ '**/storybook-static/**', // Golden fixtures are frozen `buildTheme` output, asserted byte-identical in tests; they must // never be reformatted. - '**/__fixtures__/compat-goldens/**', '**/__fixtures__/v2-goldens/**', 'node_modules', ],