lukebennett.dev / luke-ui
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. luke-ui.netlify.app/
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

Freeze pre-v2 theme goldens and add generator version (#241)

* Freeze pre-v2 theme goldens and add generator version

Snapshot the tactile and paper theme CSS as permanent pre-v2 compatibility
fixtures before the v2 generator rewrite, and add THEME_GENERATOR_VERSION
threaded into the stylesheet header. Token values stay byte-identical; only
the header line is excluded from the golden comparison.

Part of #231 (#232).

* Drop generator versioning from theme build

Revert the stylesheet header to its original string per PR review;
versioning is deferred until v1. With the header unchanged, the pre-v2
compatibility goldens now match emitted output verbatim, so the golden
tests compare full output directly and the header-diff test is removed.

authored by

Luke Bennett and committed by
GitHub (Jul 24, 2026, 2:54 PM +1000) cef0076e 76ed6aec

+663
+3
vite.config.ts
··· 14 14 '**/dist/**', 15 15 '**/routeTree.gen.ts', 16 16 '**/storybook-static/**', 17 + // Golden fixtures are frozen `buildTheme` output, asserted byte-identical in tests; they must 18 + // never be reformatted. 19 + '**/__fixtures__/compat-goldens/**', 17 20 'node_modules', 18 21 ], 19 22 jsxSingleQuote: false,
+24
packages/@luke-ui/react/src/theme/build-theme.test.ts
··· 1 + import { readFile } from 'node:fs/promises'; 1 2 import { describe, expect, it } from 'vite-plus/test'; 2 3 import { paperThemeClassName, tactileThemeClassName } from '../themes/index.js'; 3 4 import { buildTheme, ThemeContrastError, themeClassName } from './build-theme.js'; ··· 572 573 expect(() => themeClassName('double--hyphen')).toThrow(/kebab-case/); 573 574 expect(() => themeClassName('9lives')).toThrow(/kebab-case/); 574 575 expect(themeClassName('tactile')).toBe('luke-ui-theme-tactile'); 576 + }); 577 + }); 578 + 579 + // Permanent compatibility (pre-v2) goldens: the exact `buildTheme` output for the bundled themes, 580 + // captured before the theme-v2 generator work (wayfinder #232) touched anything. They are a fixed 581 + // historical reference — unlike a future Stage 6 "v2 regression goldens" set, these are never 582 + // re-frozen, so a real Stage 6 visual diff always has an unmodified pre-v2 baseline to compare 583 + // against. Every generated colour, depth, and identity value below (including the header line) 584 + // must stay byte-identical to today. 585 + describe('compatibility (pre-v2) goldens', () => { 586 + const compatGoldens = { 587 + paper: new URL('./__fixtures__/compat-goldens/paper.pre-v2.css', import.meta.url), 588 + tactile: new URL('./__fixtures__/compat-goldens/tactile.pre-v2.css', import.meta.url), 589 + } as const; 590 + 591 + it('keeps every generated token byte-identical to the pre-v2 baseline', async () => { 592 + const goldenTactile = await readFile(compatGoldens.tactile, 'utf8'); 593 + const goldenPaper = await readFile(compatGoldens.paper, 'utf8'); 594 + const currentTactile = buildTheme(tactileFoundation); 595 + const currentPaper = buildTheme(paperFoundation); 596 + 597 + expect(currentTactile).toBe(goldenTactile); 598 + expect(currentPaper).toBe(goldenPaper); 575 599 }); 576 600 });
+318
packages/@luke-ui/react/src/theme/__fixtures__/compat-goldens/paper.pre-v2.css
··· 1 + /* Generated by buildTheme from @luke-ui/react. Do not edit. */ 2 + .luke-ui-theme-paper { 3 + --luke-font-100-baseline-trim: -0.3029em; 4 + --luke-font-100-cap-height-trim: -0.3029em; 5 + --luke-font-100-font-size: 12px; 6 + --luke-font-100-letter-spacing: 0.0025em; 7 + --luke-font-100-line-height: 16px; 8 + --luke-font-200-baseline-trim: -0.3505em; 9 + --luke-font-200-cap-height-trim: -0.3505em; 10 + --luke-font-200-font-size: 14px; 11 + --luke-font-200-letter-spacing: 0; 12 + --luke-font-200-line-height: 20px; 13 + --luke-font-300-baseline-trim: -0.3862em; 14 + --luke-font-300-cap-height-trim: -0.3862em; 15 + --luke-font-300-font-size: 16px; 16 + --luke-font-300-letter-spacing: 0; 17 + --luke-font-300-line-height: 24px; 18 + --luke-font-400-baseline-trim: -0.3585em; 19 + --luke-font-400-cap-height-trim: -0.3585em; 20 + --luke-font-400-font-size: 18px; 21 + --luke-font-400-letter-spacing: -0.0025em; 22 + --luke-font-400-line-height: 26px; 23 + --luke-font-500-baseline-trim: -0.3362em; 24 + --luke-font-500-cap-height-trim: -0.3362em; 25 + --luke-font-500-font-size: 20px; 26 + --luke-font-500-letter-spacing: -0.005em; 27 + --luke-font-500-line-height: 28px; 28 + --luke-font-600-baseline-trim: -0.2612em; 29 + --luke-font-600-cap-height-trim: -0.2612em; 30 + --luke-font-600-font-size: 24px; 31 + --luke-font-600-letter-spacing: -0.00625em; 32 + --luke-font-600-line-height: 30px; 33 + --luke-font-700-baseline-trim: -0.2791em; 34 + --luke-font-700-cap-height-trim: -0.2791em; 35 + --luke-font-700-font-size: 28px; 36 + --luke-font-700-letter-spacing: -0.0075em; 37 + --luke-font-700-line-height: 36px; 38 + --luke-font-800-baseline-trim: -0.2077em; 39 + --luke-font-800-cap-height-trim: -0.2077em; 40 + --luke-font-800-font-size: 35px; 41 + --luke-font-800-letter-spacing: -0.01em; 42 + --luke-font-800-line-height: 40px; 43 + --luke-font-900-baseline-trim: -0.1362em; 44 + --luke-font-900-cap-height-trim: -0.1362em; 45 + --luke-font-900-font-size: 60px; 46 + --luke-font-900-letter-spacing: -0.025em; 47 + --luke-font-900-line-height: 60px; 48 + --luke-font-family: 'Inter', system-ui, sans-serif; 49 + --luke-font-weight-body: 400; 50 + --luke-font-weight-label: 500; 51 + --luke-font-weight-heading: 600; 52 + --luke-font-weight-emphasis: 700; 53 + --luke-radius-detail: 4px; 54 + --luke-radius-control: 4px; 55 + --luke-radius-surface: 12px; 56 + --luke-radius-overlay: 16px; 57 + --luke-radius-full: 9999px; 58 + --luke-space-100: 4px; 59 + --luke-space-200: 8px; 60 + --luke-space-300: 12px; 61 + --luke-space-400: 16px; 62 + --luke-space-600: 24px; 63 + --luke-space-800: 32px; 64 + --luke-space-1000: 40px; 65 + --luke-space-1200: 48px; 66 + --luke-space-1600: 64px; 67 + --luke-control-size-small: 32px; 68 + --luke-control-size-medium: 40px; 69 + --luke-icon-size-xsmall: 16px; 70 + --luke-icon-size-small: 20px; 71 + --luke-icon-size-medium: 24px; 72 + --luke-icon-size-large: 32px; 73 + --luke-motion-duration-fast: 120ms; 74 + --luke-motion-easing-standard: cubic-bezier(0, 0, 0.4, 1); 75 + --luke-motion-easing-exit: cubic-bezier(0.3, 0, 1, 1); 76 + } 77 + 78 + .luke-ui-theme-paper { 79 + color-scheme: light; 80 + --luke-color-surface-canvas: oklch(1 0 0); 81 + --luke-color-surface-recessed: oklch(1 0 0); 82 + --luke-color-surface-floating: oklch(1 0 0); 83 + --luke-color-surface-overlay: oklch(1 0 0); 84 + --luke-color-scrim: oklch(0 0 0 / 0.2); 85 + --luke-color-loading-skeleton: oklch(0.8768 0 0); 86 + --luke-color-text-primary: oklch(0.225 0 0); 87 + --luke-color-text-secondary: oklch(0.41 0 0); 88 + --luke-color-text-disabled: oklch(0.68 0 0); 89 + --luke-color-border-decorative: oklch(0.92 0 0); 90 + --luke-color-border-control: oklch(0.6651 0 0); 91 + --luke-color-border-focus: oklch(0.55 0.17 255); 92 + --luke-color-intent-neutral-surface-subtle: oklch(0.955 0 0); 93 + --luke-color-intent-neutral-surface-subtle-hover: oklch(0.93 0 0); 94 + --luke-color-intent-neutral-surface-subtle-pressed: oklch(0.9 0 0); 95 + --luke-color-intent-neutral-surface-solid: oklch(0.32 0 0); 96 + --luke-color-intent-neutral-surface-solid-hover: oklch(0.27 0 0); 97 + --luke-color-intent-neutral-surface-solid-pressed: oklch(0.23 0 0); 98 + --luke-color-intent-neutral-on-solid: oklch(0.985 0 0); 99 + --luke-color-intent-accent-surface-subtle: oklch(0.955 0.0226 247.47); 100 + --luke-color-intent-accent-surface-subtle-hover: oklch(0.93 0.0341 247.47); 101 + --luke-color-intent-accent-surface-subtle-pressed: oklch(0.9 0.0341 247.47); 102 + --luke-color-intent-accent-surface-solid: oklch(0.4264 0.0975 247.47); 103 + --luke-color-intent-accent-surface-solid-hover: oklch(0.3764 0.0975 247.47); 104 + --luke-color-intent-accent-surface-solid-pressed: oklch(0.3364 0.0894 247.47); 105 + --luke-color-intent-accent-border: oklch(0.6631 0.0975 247.47); 106 + --luke-color-intent-accent-text: oklch(0.4264 0.0975 247.47); 107 + --luke-color-intent-accent-text-hover: oklch(0.3664 0.0974 247.47); 108 + --luke-color-intent-accent-on-solid: oklch(0.985 0 247.47); 109 + --luke-color-intent-danger-surface-subtle: oklch(0.955 0.0223 24.44); 110 + --luke-color-intent-danger-surface-subtle-hover: oklch(0.93 0.0354 24.44); 111 + --luke-color-intent-danger-surface-subtle-pressed: oklch(0.9 0.0519 24.44); 112 + --luke-color-intent-danger-surface-solid: oklch(0.5269 0.1889 24.44); 113 + --luke-color-intent-danger-surface-solid-hover: oklch(0.4769 0.1889 24.44); 114 + --luke-color-intent-danger-surface-solid-pressed: oklch(0.4369 0.1769 24.44); 115 + --luke-color-intent-danger-border: oklch(0.6791 0.12 24.44); 116 + --luke-color-intent-danger-text: oklch(0.5061 0.13 24.44); 117 + --luke-color-intent-danger-on-solid: oklch(0.985 0 24.44); 118 + --luke-color-intent-info-surface-subtle: oklch(0.955 0.0212 266.66); 119 + --luke-color-intent-info-border: oklch(0.6685 0.12 266.66); 120 + --luke-color-intent-info-text: oklch(0.4326 0.13 266.66); 121 + --luke-color-intent-success-surface-subtle: oklch(0.955 0.0419 137.4); 122 + --luke-color-intent-success-border: oklch(0.6541 0.1197 137.4); 123 + --luke-color-intent-success-text: oklch(0.4475 0.1197 137.4); 124 + --luke-color-intent-warning-surface-subtle: oklch(0.955 0.0376 76.41); 125 + --luke-color-intent-warning-border: oklch(0.6695 0.12 76.41); 126 + --luke-color-intent-warning-text: oklch(0.4981 0.1044 76.41); 127 + --luke-depth-recessed: none; 128 + --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); 129 + --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); 130 + --luke-depth-floating: 0 4px 14px oklch(0.2 0.01 250 / 0.12); 131 + --luke-depth-overlay: 0 12px 36px oklch(0.2 0.01 250 / 0.16); 132 + --luke-action-control-finish-recessed: radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.08) 0%, transparent 100%); 133 + --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%); 134 + --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%); 135 + } 136 + 137 + @media (prefers-color-scheme: dark) { 138 + .luke-ui-theme-paper { 139 + color-scheme: dark; 140 + --luke-color-surface-canvas: oklch(0.22 0.01 250); 141 + --luke-color-surface-recessed: oklch(0.195 0.01 250); 142 + --luke-color-surface-floating: oklch(0.29 0.01 250); 143 + --luke-color-surface-overlay: oklch(0.31 0.01 250); 144 + --luke-color-scrim: oklch(0 0 0 / 0.4); 145 + --luke-color-loading-skeleton: oklch(0.3895 0.01 250); 146 + --luke-color-text-primary: oklch(0.89 0.01 250); 147 + --luke-color-text-secondary: oklch(0.78 0.01 250); 148 + --luke-color-text-disabled: oklch(0.55 0.01 250); 149 + --luke-color-border-decorative: oklch(0.32 0.01 250); 150 + --luke-color-border-control: oklch(0.5383 0.01 250); 151 + --luke-color-border-focus: oklch(0.72 0.13 255); 152 + --luke-color-intent-neutral-surface-subtle: oklch(0.32 0.0035 250); 153 + --luke-color-intent-neutral-surface-subtle-hover: oklch(0.38 0.0035 250); 154 + --luke-color-intent-neutral-surface-subtle-pressed: oklch(0.42 0.0035 250); 155 + --luke-color-intent-neutral-surface-solid: oklch(0.85 0.01 250); 156 + --luke-color-intent-neutral-surface-solid-hover: oklch(0.9 0.01 250); 157 + --luke-color-intent-neutral-surface-solid-pressed: oklch(0.94 0.01 250); 158 + --luke-color-intent-neutral-on-solid: oklch(0.18 0.01 250); 159 + --luke-color-intent-accent-surface-subtle: oklch(0.32 0.0385 250); 160 + --luke-color-intent-accent-surface-subtle-hover: oklch(0.38 0.0385 250); 161 + --luke-color-intent-accent-surface-subtle-pressed: oklch(0.42 0.0385 250); 162 + --luke-color-intent-accent-surface-solid: oklch(0.7 0.11 250); 163 + --luke-color-intent-accent-surface-solid-hover: oklch(0.75 0.11 250); 164 + --luke-color-intent-accent-surface-solid-pressed: oklch(0.79 0.11 250); 165 + --luke-color-intent-accent-border: oklch(0.5378 0.11 250); 166 + --luke-color-intent-accent-text: oklch(0.8006 0.1046 250); 167 + --luke-color-intent-accent-text-hover: oklch(0.8606 0.0714 250); 168 + --luke-color-intent-accent-on-solid: oklch(0.18 0.01 250); 169 + --luke-color-intent-danger-surface-subtle: oklch(0.32 0.056 25); 170 + --luke-color-intent-danger-surface-subtle-hover: oklch(0.38 0.056 25); 171 + --luke-color-intent-danger-surface-subtle-pressed: oklch(0.42 0.056 25); 172 + --luke-color-intent-danger-surface-solid: oklch(0.72 0.16 25); 173 + --luke-color-intent-danger-surface-solid-hover: oklch(0.77 0.1356 25); 174 + --luke-color-intent-danger-surface-solid-pressed: oklch(0.81 0.1075 25); 175 + --luke-color-intent-danger-border: oklch(0.5527 0.12 25); 176 + --luke-color-intent-danger-text: oklch(0.806 0.1102 25); 177 + --luke-color-intent-danger-on-solid: oklch(0.18 0.01 25); 178 + --luke-color-intent-info-surface-subtle: oklch(0.32 0.0455 255); 179 + --luke-color-intent-info-border: oklch(0.5394 0.12 255); 180 + --luke-color-intent-info-text: oklch(0.8012 0.1018 255); 181 + --luke-color-intent-success-surface-subtle: oklch(0.32 0.0455 150); 182 + --luke-color-intent-success-border: oklch(0.5255 0.12 150); 183 + --luke-color-intent-success-text: oklch(0.7934 0.13 150); 184 + --luke-color-intent-warning-surface-subtle: oklch(0.32 0.0455 80); 185 + --luke-color-intent-warning-border: oklch(0.5422 0.1123 80); 186 + --luke-color-intent-warning-text: oklch(0.8036 0.13 80); 187 + --luke-depth-recessed: inset 0 1px 2px oklch(0.12 0.01 250 / 0.22); 188 + --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); 189 + --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); 190 + --luke-depth-floating: 0 4px 14px oklch(0.12 0.01 250 / 0.25); 191 + --luke-depth-overlay: 0 12px 36px oklch(0.12 0.01 250 / 0.32); 192 + --luke-action-control-finish-recessed: radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.04) 0%, transparent 100%); 193 + --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%); 194 + --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%); 195 + } 196 + } 197 + 198 + .luke-ui-theme-paper[data-color-mode='light'], 199 + .luke-ui-theme-paper [data-color-mode='light'], 200 + [data-color-mode='light'] .luke-ui-theme-paper { 201 + color-scheme: light; 202 + --luke-color-surface-canvas: oklch(1 0 0); 203 + --luke-color-surface-recessed: oklch(1 0 0); 204 + --luke-color-surface-floating: oklch(1 0 0); 205 + --luke-color-surface-overlay: oklch(1 0 0); 206 + --luke-color-scrim: oklch(0 0 0 / 0.2); 207 + --luke-color-loading-skeleton: oklch(0.8768 0 0); 208 + --luke-color-text-primary: oklch(0.225 0 0); 209 + --luke-color-text-secondary: oklch(0.41 0 0); 210 + --luke-color-text-disabled: oklch(0.68 0 0); 211 + --luke-color-border-decorative: oklch(0.92 0 0); 212 + --luke-color-border-control: oklch(0.6651 0 0); 213 + --luke-color-border-focus: oklch(0.55 0.17 255); 214 + --luke-color-intent-neutral-surface-subtle: oklch(0.955 0 0); 215 + --luke-color-intent-neutral-surface-subtle-hover: oklch(0.93 0 0); 216 + --luke-color-intent-neutral-surface-subtle-pressed: oklch(0.9 0 0); 217 + --luke-color-intent-neutral-surface-solid: oklch(0.32 0 0); 218 + --luke-color-intent-neutral-surface-solid-hover: oklch(0.27 0 0); 219 + --luke-color-intent-neutral-surface-solid-pressed: oklch(0.23 0 0); 220 + --luke-color-intent-neutral-on-solid: oklch(0.985 0 0); 221 + --luke-color-intent-accent-surface-subtle: oklch(0.955 0.0226 247.47); 222 + --luke-color-intent-accent-surface-subtle-hover: oklch(0.93 0.0341 247.47); 223 + --luke-color-intent-accent-surface-subtle-pressed: oklch(0.9 0.0341 247.47); 224 + --luke-color-intent-accent-surface-solid: oklch(0.4264 0.0975 247.47); 225 + --luke-color-intent-accent-surface-solid-hover: oklch(0.3764 0.0975 247.47); 226 + --luke-color-intent-accent-surface-solid-pressed: oklch(0.3364 0.0894 247.47); 227 + --luke-color-intent-accent-border: oklch(0.6631 0.0975 247.47); 228 + --luke-color-intent-accent-text: oklch(0.4264 0.0975 247.47); 229 + --luke-color-intent-accent-text-hover: oklch(0.3664 0.0974 247.47); 230 + --luke-color-intent-accent-on-solid: oklch(0.985 0 247.47); 231 + --luke-color-intent-danger-surface-subtle: oklch(0.955 0.0223 24.44); 232 + --luke-color-intent-danger-surface-subtle-hover: oklch(0.93 0.0354 24.44); 233 + --luke-color-intent-danger-surface-subtle-pressed: oklch(0.9 0.0519 24.44); 234 + --luke-color-intent-danger-surface-solid: oklch(0.5269 0.1889 24.44); 235 + --luke-color-intent-danger-surface-solid-hover: oklch(0.4769 0.1889 24.44); 236 + --luke-color-intent-danger-surface-solid-pressed: oklch(0.4369 0.1769 24.44); 237 + --luke-color-intent-danger-border: oklch(0.6791 0.12 24.44); 238 + --luke-color-intent-danger-text: oklch(0.5061 0.13 24.44); 239 + --luke-color-intent-danger-on-solid: oklch(0.985 0 24.44); 240 + --luke-color-intent-info-surface-subtle: oklch(0.955 0.0212 266.66); 241 + --luke-color-intent-info-border: oklch(0.6685 0.12 266.66); 242 + --luke-color-intent-info-text: oklch(0.4326 0.13 266.66); 243 + --luke-color-intent-success-surface-subtle: oklch(0.955 0.0419 137.4); 244 + --luke-color-intent-success-border: oklch(0.6541 0.1197 137.4); 245 + --luke-color-intent-success-text: oklch(0.4475 0.1197 137.4); 246 + --luke-color-intent-warning-surface-subtle: oklch(0.955 0.0376 76.41); 247 + --luke-color-intent-warning-border: oklch(0.6695 0.12 76.41); 248 + --luke-color-intent-warning-text: oklch(0.4981 0.1044 76.41); 249 + --luke-depth-recessed: none; 250 + --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); 251 + --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); 252 + --luke-depth-floating: 0 4px 14px oklch(0.2 0.01 250 / 0.12); 253 + --luke-depth-overlay: 0 12px 36px oklch(0.2 0.01 250 / 0.16); 254 + --luke-action-control-finish-recessed: radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.08) 0%, transparent 100%); 255 + --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%); 256 + --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%); 257 + } 258 + 259 + .luke-ui-theme-paper[data-color-mode='dark'], 260 + .luke-ui-theme-paper [data-color-mode='dark'], 261 + [data-color-mode='dark'] .luke-ui-theme-paper { 262 + color-scheme: dark; 263 + --luke-color-surface-canvas: oklch(0.22 0.01 250); 264 + --luke-color-surface-recessed: oklch(0.195 0.01 250); 265 + --luke-color-surface-floating: oklch(0.29 0.01 250); 266 + --luke-color-surface-overlay: oklch(0.31 0.01 250); 267 + --luke-color-scrim: oklch(0 0 0 / 0.4); 268 + --luke-color-loading-skeleton: oklch(0.3895 0.01 250); 269 + --luke-color-text-primary: oklch(0.89 0.01 250); 270 + --luke-color-text-secondary: oklch(0.78 0.01 250); 271 + --luke-color-text-disabled: oklch(0.55 0.01 250); 272 + --luke-color-border-decorative: oklch(0.32 0.01 250); 273 + --luke-color-border-control: oklch(0.5383 0.01 250); 274 + --luke-color-border-focus: oklch(0.72 0.13 255); 275 + --luke-color-intent-neutral-surface-subtle: oklch(0.32 0.0035 250); 276 + --luke-color-intent-neutral-surface-subtle-hover: oklch(0.38 0.0035 250); 277 + --luke-color-intent-neutral-surface-subtle-pressed: oklch(0.42 0.0035 250); 278 + --luke-color-intent-neutral-surface-solid: oklch(0.85 0.01 250); 279 + --luke-color-intent-neutral-surface-solid-hover: oklch(0.9 0.01 250); 280 + --luke-color-intent-neutral-surface-solid-pressed: oklch(0.94 0.01 250); 281 + --luke-color-intent-neutral-on-solid: oklch(0.18 0.01 250); 282 + --luke-color-intent-accent-surface-subtle: oklch(0.32 0.0385 250); 283 + --luke-color-intent-accent-surface-subtle-hover: oklch(0.38 0.0385 250); 284 + --luke-color-intent-accent-surface-subtle-pressed: oklch(0.42 0.0385 250); 285 + --luke-color-intent-accent-surface-solid: oklch(0.7 0.11 250); 286 + --luke-color-intent-accent-surface-solid-hover: oklch(0.75 0.11 250); 287 + --luke-color-intent-accent-surface-solid-pressed: oklch(0.79 0.11 250); 288 + --luke-color-intent-accent-border: oklch(0.5378 0.11 250); 289 + --luke-color-intent-accent-text: oklch(0.8006 0.1046 250); 290 + --luke-color-intent-accent-text-hover: oklch(0.8606 0.0714 250); 291 + --luke-color-intent-accent-on-solid: oklch(0.18 0.01 250); 292 + --luke-color-intent-danger-surface-subtle: oklch(0.32 0.056 25); 293 + --luke-color-intent-danger-surface-subtle-hover: oklch(0.38 0.056 25); 294 + --luke-color-intent-danger-surface-subtle-pressed: oklch(0.42 0.056 25); 295 + --luke-color-intent-danger-surface-solid: oklch(0.72 0.16 25); 296 + --luke-color-intent-danger-surface-solid-hover: oklch(0.77 0.1356 25); 297 + --luke-color-intent-danger-surface-solid-pressed: oklch(0.81 0.1075 25); 298 + --luke-color-intent-danger-border: oklch(0.5527 0.12 25); 299 + --luke-color-intent-danger-text: oklch(0.806 0.1102 25); 300 + --luke-color-intent-danger-on-solid: oklch(0.18 0.01 25); 301 + --luke-color-intent-info-surface-subtle: oklch(0.32 0.0455 255); 302 + --luke-color-intent-info-border: oklch(0.5394 0.12 255); 303 + --luke-color-intent-info-text: oklch(0.8012 0.1018 255); 304 + --luke-color-intent-success-surface-subtle: oklch(0.32 0.0455 150); 305 + --luke-color-intent-success-border: oklch(0.5255 0.12 150); 306 + --luke-color-intent-success-text: oklch(0.7934 0.13 150); 307 + --luke-color-intent-warning-surface-subtle: oklch(0.32 0.0455 80); 308 + --luke-color-intent-warning-border: oklch(0.5422 0.1123 80); 309 + --luke-color-intent-warning-text: oklch(0.8036 0.13 80); 310 + --luke-depth-recessed: inset 0 1px 2px oklch(0.12 0.01 250 / 0.22); 311 + --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); 312 + --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); 313 + --luke-depth-floating: 0 4px 14px oklch(0.12 0.01 250 / 0.25); 314 + --luke-depth-overlay: 0 12px 36px oklch(0.12 0.01 250 / 0.32); 315 + --luke-action-control-finish-recessed: radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.04) 0%, transparent 100%); 316 + --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%); 317 + --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%); 318 + }
+318
packages/@luke-ui/react/src/theme/__fixtures__/compat-goldens/tactile.pre-v2.css
··· 1 + /* Generated by buildTheme from @luke-ui/react. Do not edit. */ 2 + .luke-ui-theme-tactile { 3 + --luke-font-100-baseline-trim: -0.3029em; 4 + --luke-font-100-cap-height-trim: -0.3029em; 5 + --luke-font-100-font-size: 12px; 6 + --luke-font-100-letter-spacing: 0.0025em; 7 + --luke-font-100-line-height: 16px; 8 + --luke-font-200-baseline-trim: -0.3505em; 9 + --luke-font-200-cap-height-trim: -0.3505em; 10 + --luke-font-200-font-size: 14px; 11 + --luke-font-200-letter-spacing: 0; 12 + --luke-font-200-line-height: 20px; 13 + --luke-font-300-baseline-trim: -0.3862em; 14 + --luke-font-300-cap-height-trim: -0.3862em; 15 + --luke-font-300-font-size: 16px; 16 + --luke-font-300-letter-spacing: 0; 17 + --luke-font-300-line-height: 24px; 18 + --luke-font-400-baseline-trim: -0.3585em; 19 + --luke-font-400-cap-height-trim: -0.3585em; 20 + --luke-font-400-font-size: 18px; 21 + --luke-font-400-letter-spacing: -0.0025em; 22 + --luke-font-400-line-height: 26px; 23 + --luke-font-500-baseline-trim: -0.3362em; 24 + --luke-font-500-cap-height-trim: -0.3362em; 25 + --luke-font-500-font-size: 20px; 26 + --luke-font-500-letter-spacing: -0.005em; 27 + --luke-font-500-line-height: 28px; 28 + --luke-font-600-baseline-trim: -0.2612em; 29 + --luke-font-600-cap-height-trim: -0.2612em; 30 + --luke-font-600-font-size: 24px; 31 + --luke-font-600-letter-spacing: -0.00625em; 32 + --luke-font-600-line-height: 30px; 33 + --luke-font-700-baseline-trim: -0.2791em; 34 + --luke-font-700-cap-height-trim: -0.2791em; 35 + --luke-font-700-font-size: 28px; 36 + --luke-font-700-letter-spacing: -0.0075em; 37 + --luke-font-700-line-height: 36px; 38 + --luke-font-800-baseline-trim: -0.2077em; 39 + --luke-font-800-cap-height-trim: -0.2077em; 40 + --luke-font-800-font-size: 35px; 41 + --luke-font-800-letter-spacing: -0.01em; 42 + --luke-font-800-line-height: 40px; 43 + --luke-font-900-baseline-trim: -0.1362em; 44 + --luke-font-900-cap-height-trim: -0.1362em; 45 + --luke-font-900-font-size: 60px; 46 + --luke-font-900-letter-spacing: -0.025em; 47 + --luke-font-900-line-height: 60px; 48 + --luke-font-family: 'Inter', system-ui, sans-serif; 49 + --luke-font-weight-body: 400; 50 + --luke-font-weight-label: 500; 51 + --luke-font-weight-heading: 600; 52 + --luke-font-weight-emphasis: 700; 53 + --luke-radius-detail: 4px; 54 + --luke-radius-control: 8px; 55 + --luke-radius-surface: 12px; 56 + --luke-radius-overlay: 16px; 57 + --luke-radius-full: 9999px; 58 + --luke-space-100: 4px; 59 + --luke-space-200: 8px; 60 + --luke-space-300: 12px; 61 + --luke-space-400: 16px; 62 + --luke-space-600: 24px; 63 + --luke-space-800: 32px; 64 + --luke-space-1000: 40px; 65 + --luke-space-1200: 48px; 66 + --luke-space-1600: 64px; 67 + --luke-control-size-small: 32px; 68 + --luke-control-size-medium: 40px; 69 + --luke-icon-size-xsmall: 16px; 70 + --luke-icon-size-small: 20px; 71 + --luke-icon-size-medium: 24px; 72 + --luke-icon-size-large: 32px; 73 + --luke-motion-duration-fast: 120ms; 74 + --luke-motion-easing-standard: cubic-bezier(0, 0, 0.4, 1); 75 + --luke-motion-easing-exit: cubic-bezier(0.3, 0, 1, 1); 76 + } 77 + 78 + .luke-ui-theme-tactile { 79 + color-scheme: light; 80 + --luke-color-surface-canvas: oklch(0.985 0 0); 81 + --luke-color-surface-recessed: oklch(1 0 0); 82 + --luke-color-surface-floating: oklch(0.997 0 0); 83 + --luke-color-surface-overlay: oklch(1 0 0); 84 + --luke-color-scrim: oklch(0 0 0 / 0.2); 85 + --luke-color-loading-skeleton: oklch(0.8634 0 0); 86 + --luke-color-text-primary: oklch(0.225 0 0); 87 + --luke-color-text-secondary: oklch(0.41 0 0); 88 + --luke-color-text-disabled: oklch(0.665 0 0); 89 + --luke-color-border-decorative: oklch(0.905 0 0); 90 + --luke-color-border-control: oklch(0.654 0 0); 91 + --luke-color-border-focus: oklch(0.55 0.17 255); 92 + --luke-color-intent-neutral-surface-subtle: oklch(0.94 0 0); 93 + --luke-color-intent-neutral-surface-subtle-hover: oklch(0.915 0 0); 94 + --luke-color-intent-neutral-surface-subtle-pressed: oklch(0.885 0 0); 95 + --luke-color-intent-neutral-surface-solid: oklch(0.32 0 0); 96 + --luke-color-intent-neutral-surface-solid-hover: oklch(0.27 0 0); 97 + --luke-color-intent-neutral-surface-solid-pressed: oklch(0.23 0 0); 98 + --luke-color-intent-neutral-on-solid: oklch(0.985 0 0); 99 + --luke-color-intent-accent-surface-subtle: oklch(0.94 0.0309 200); 100 + --luke-color-intent-accent-surface-subtle-hover: oklch(0.915 0.0309 200); 101 + --luke-color-intent-accent-surface-subtle-pressed: oklch(0.885 0.0309 200); 102 + --luke-color-intent-accent-surface-solid: oklch(0.52 0.0884 200); 103 + --luke-color-intent-accent-surface-solid-hover: oklch(0.47 0.0799 200); 104 + --luke-color-intent-accent-surface-solid-pressed: oklch(0.43 0.0731 200); 105 + --luke-color-intent-accent-border: oklch(0.6441 0.0884 200); 106 + --luke-color-intent-accent-text: oklch(0.4775 0.0812 200); 107 + --luke-color-intent-accent-text-hover: oklch(0.4175 0.071 200); 108 + --luke-color-intent-accent-on-solid: oklch(0.985 0 200); 109 + --luke-color-intent-danger-surface-subtle: oklch(0.94 0.0301 27); 110 + --luke-color-intent-danger-surface-subtle-hover: oklch(0.915 0.0436 27); 111 + --luke-color-intent-danger-surface-subtle-pressed: oklch(0.885 0.06 27); 112 + --luke-color-intent-danger-surface-solid: oklch(0.52 0.18 27); 113 + --luke-color-intent-danger-surface-solid-hover: oklch(0.47 0.18 27); 114 + --luke-color-intent-danger-surface-solid-pressed: oklch(0.43 0.1752 27); 115 + --luke-color-intent-danger-border: oklch(0.6677 0.12 27); 116 + --luke-color-intent-danger-text: oklch(0.4943 0.13 27); 117 + --luke-color-intent-danger-on-solid: oklch(0.985 0 27); 118 + --luke-color-intent-info-surface-subtle: oklch(0.94 0.0291 255); 119 + --luke-color-intent-info-border: oklch(0.6542 0.12 255); 120 + --luke-color-intent-info-text: oklch(0.4861 0.13 255); 121 + --luke-color-intent-success-surface-subtle: oklch(0.94 0.0455 150); 122 + --luke-color-intent-success-border: oklch(0.6408 0.12 150); 123 + --luke-color-intent-success-text: oklch(0.4738 0.13 150); 124 + --luke-color-intent-warning-surface-subtle: oklch(0.94 0.0489 75); 125 + --luke-color-intent-warning-border: oklch(0.6587 0.12 75); 126 + --luke-color-intent-warning-text: oklch(0.4873 0.1028 75); 127 + --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); 128 + --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); 129 + --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); 130 + --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); 131 + --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); 132 + --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%); 133 + --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%); 134 + --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%); 135 + } 136 + 137 + @media (prefers-color-scheme: dark) { 138 + .luke-ui-theme-tactile { 139 + color-scheme: dark; 140 + --luke-color-surface-canvas: oklch(0.25 0.015 210); 141 + --luke-color-surface-recessed: oklch(0.225 0.015 210); 142 + --luke-color-surface-floating: oklch(0.32 0.015 210); 143 + --luke-color-surface-overlay: oklch(0.34 0.015 210); 144 + --luke-color-scrim: oklch(0 0 0 / 0.4); 145 + --luke-color-loading-skeleton: oklch(0.4084 0.01 210); 146 + --luke-color-text-primary: oklch(0.89 0.015 210); 147 + --luke-color-text-secondary: oklch(0.78 0.015 210); 148 + --luke-color-text-disabled: oklch(0.58 0.01 210); 149 + --luke-color-border-decorative: oklch(0.35 0.015 210); 150 + --luke-color-border-control: oklch(0.5611 0.015 210); 151 + --luke-color-border-focus: oklch(0.72 0.13 255); 152 + --luke-color-intent-neutral-surface-subtle: oklch(0.35 0.0052 210); 153 + --luke-color-intent-neutral-surface-subtle-hover: oklch(0.41 0.0052 210); 154 + --luke-color-intent-neutral-surface-subtle-pressed: oklch(0.45 0.0052 210); 155 + --luke-color-intent-neutral-surface-solid: oklch(0.85 0.015 210); 156 + --luke-color-intent-neutral-surface-solid-hover: oklch(0.9 0.015 210); 157 + --luke-color-intent-neutral-surface-solid-pressed: oklch(0.94 0.015 210); 158 + --luke-color-intent-neutral-on-solid: oklch(0.18 0.01 210); 159 + --luke-color-intent-accent-surface-subtle: oklch(0.35 0.035 200); 160 + --luke-color-intent-accent-surface-subtle-hover: oklch(0.41 0.035 200); 161 + --luke-color-intent-accent-surface-subtle-pressed: oklch(0.45 0.035 200); 162 + --luke-color-intent-accent-surface-solid: oklch(0.75 0.1 200); 163 + --luke-color-intent-accent-surface-solid-hover: oklch(0.8 0.1 200); 164 + --luke-color-intent-accent-surface-solid-pressed: oklch(0.84 0.1 200); 165 + --luke-color-intent-accent-border: oklch(0.5522 0.0939 200); 166 + --luke-color-intent-accent-text: oklch(0.8337 0.1 200); 167 + --luke-color-intent-accent-text-hover: oklch(0.8937 0.1 200); 168 + --luke-color-intent-accent-on-solid: oklch(0.18 0.01 200); 169 + --luke-color-intent-danger-surface-subtle: oklch(0.35 0.056 25); 170 + --luke-color-intent-danger-surface-subtle-hover: oklch(0.41 0.056 25); 171 + --luke-color-intent-danger-surface-subtle-pressed: oklch(0.45 0.056 25); 172 + --luke-color-intent-danger-surface-solid: oklch(0.72 0.16 25); 173 + --luke-color-intent-danger-surface-solid-hover: oklch(0.77 0.1356 25); 174 + --luke-color-intent-danger-surface-solid-pressed: oklch(0.81 0.1075 25); 175 + --luke-color-intent-danger-border: oklch(0.5766 0.12 25); 176 + --luke-color-intent-danger-text: oklch(0.8413 0.0871 25); 177 + --luke-color-intent-danger-on-solid: oklch(0.18 0.01 25); 178 + --luke-color-intent-info-surface-subtle: oklch(0.35 0.0455 255); 179 + --luke-color-intent-info-border: oklch(0.5632 0.12 255); 180 + --luke-color-intent-info-text: oklch(0.8395 0.081 255); 181 + --luke-color-intent-success-surface-subtle: oklch(0.35 0.0455 150); 182 + --luke-color-intent-success-border: oklch(0.5495 0.12 150); 183 + --luke-color-intent-success-text: oklch(0.832 0.13 150); 184 + --luke-color-intent-warning-surface-subtle: oklch(0.35 0.0455 80); 185 + --luke-color-intent-warning-border: oklch(0.5663 0.1173 80); 186 + --luke-color-intent-warning-text: oklch(0.8419 0.13 80); 187 + --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); 188 + --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); 189 + --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); 190 + --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); 191 + --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); 192 + --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%); 193 + --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%); 194 + --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%); 195 + } 196 + } 197 + 198 + .luke-ui-theme-tactile[data-color-mode='light'], 199 + .luke-ui-theme-tactile [data-color-mode='light'], 200 + [data-color-mode='light'] .luke-ui-theme-tactile { 201 + color-scheme: light; 202 + --luke-color-surface-canvas: oklch(0.985 0 0); 203 + --luke-color-surface-recessed: oklch(1 0 0); 204 + --luke-color-surface-floating: oklch(0.997 0 0); 205 + --luke-color-surface-overlay: oklch(1 0 0); 206 + --luke-color-scrim: oklch(0 0 0 / 0.2); 207 + --luke-color-loading-skeleton: oklch(0.8634 0 0); 208 + --luke-color-text-primary: oklch(0.225 0 0); 209 + --luke-color-text-secondary: oklch(0.41 0 0); 210 + --luke-color-text-disabled: oklch(0.665 0 0); 211 + --luke-color-border-decorative: oklch(0.905 0 0); 212 + --luke-color-border-control: oklch(0.654 0 0); 213 + --luke-color-border-focus: oklch(0.55 0.17 255); 214 + --luke-color-intent-neutral-surface-subtle: oklch(0.94 0 0); 215 + --luke-color-intent-neutral-surface-subtle-hover: oklch(0.915 0 0); 216 + --luke-color-intent-neutral-surface-subtle-pressed: oklch(0.885 0 0); 217 + --luke-color-intent-neutral-surface-solid: oklch(0.32 0 0); 218 + --luke-color-intent-neutral-surface-solid-hover: oklch(0.27 0 0); 219 + --luke-color-intent-neutral-surface-solid-pressed: oklch(0.23 0 0); 220 + --luke-color-intent-neutral-on-solid: oklch(0.985 0 0); 221 + --luke-color-intent-accent-surface-subtle: oklch(0.94 0.0309 200); 222 + --luke-color-intent-accent-surface-subtle-hover: oklch(0.915 0.0309 200); 223 + --luke-color-intent-accent-surface-subtle-pressed: oklch(0.885 0.0309 200); 224 + --luke-color-intent-accent-surface-solid: oklch(0.52 0.0884 200); 225 + --luke-color-intent-accent-surface-solid-hover: oklch(0.47 0.0799 200); 226 + --luke-color-intent-accent-surface-solid-pressed: oklch(0.43 0.0731 200); 227 + --luke-color-intent-accent-border: oklch(0.6441 0.0884 200); 228 + --luke-color-intent-accent-text: oklch(0.4775 0.0812 200); 229 + --luke-color-intent-accent-text-hover: oklch(0.4175 0.071 200); 230 + --luke-color-intent-accent-on-solid: oklch(0.985 0 200); 231 + --luke-color-intent-danger-surface-subtle: oklch(0.94 0.0301 27); 232 + --luke-color-intent-danger-surface-subtle-hover: oklch(0.915 0.0436 27); 233 + --luke-color-intent-danger-surface-subtle-pressed: oklch(0.885 0.06 27); 234 + --luke-color-intent-danger-surface-solid: oklch(0.52 0.18 27); 235 + --luke-color-intent-danger-surface-solid-hover: oklch(0.47 0.18 27); 236 + --luke-color-intent-danger-surface-solid-pressed: oklch(0.43 0.1752 27); 237 + --luke-color-intent-danger-border: oklch(0.6677 0.12 27); 238 + --luke-color-intent-danger-text: oklch(0.4943 0.13 27); 239 + --luke-color-intent-danger-on-solid: oklch(0.985 0 27); 240 + --luke-color-intent-info-surface-subtle: oklch(0.94 0.0291 255); 241 + --luke-color-intent-info-border: oklch(0.6542 0.12 255); 242 + --luke-color-intent-info-text: oklch(0.4861 0.13 255); 243 + --luke-color-intent-success-surface-subtle: oklch(0.94 0.0455 150); 244 + --luke-color-intent-success-border: oklch(0.6408 0.12 150); 245 + --luke-color-intent-success-text: oklch(0.4738 0.13 150); 246 + --luke-color-intent-warning-surface-subtle: oklch(0.94 0.0489 75); 247 + --luke-color-intent-warning-border: oklch(0.6587 0.12 75); 248 + --luke-color-intent-warning-text: oklch(0.4873 0.1028 75); 249 + --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); 250 + --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); 251 + --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); 252 + --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); 253 + --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); 254 + --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%); 255 + --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%); 256 + --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%); 257 + } 258 + 259 + .luke-ui-theme-tactile[data-color-mode='dark'], 260 + .luke-ui-theme-tactile [data-color-mode='dark'], 261 + [data-color-mode='dark'] .luke-ui-theme-tactile { 262 + color-scheme: dark; 263 + --luke-color-surface-canvas: oklch(0.25 0.015 210); 264 + --luke-color-surface-recessed: oklch(0.225 0.015 210); 265 + --luke-color-surface-floating: oklch(0.32 0.015 210); 266 + --luke-color-surface-overlay: oklch(0.34 0.015 210); 267 + --luke-color-scrim: oklch(0 0 0 / 0.4); 268 + --luke-color-loading-skeleton: oklch(0.4084 0.01 210); 269 + --luke-color-text-primary: oklch(0.89 0.015 210); 270 + --luke-color-text-secondary: oklch(0.78 0.015 210); 271 + --luke-color-text-disabled: oklch(0.58 0.01 210); 272 + --luke-color-border-decorative: oklch(0.35 0.015 210); 273 + --luke-color-border-control: oklch(0.5611 0.015 210); 274 + --luke-color-border-focus: oklch(0.72 0.13 255); 275 + --luke-color-intent-neutral-surface-subtle: oklch(0.35 0.0052 210); 276 + --luke-color-intent-neutral-surface-subtle-hover: oklch(0.41 0.0052 210); 277 + --luke-color-intent-neutral-surface-subtle-pressed: oklch(0.45 0.0052 210); 278 + --luke-color-intent-neutral-surface-solid: oklch(0.85 0.015 210); 279 + --luke-color-intent-neutral-surface-solid-hover: oklch(0.9 0.015 210); 280 + --luke-color-intent-neutral-surface-solid-pressed: oklch(0.94 0.015 210); 281 + --luke-color-intent-neutral-on-solid: oklch(0.18 0.01 210); 282 + --luke-color-intent-accent-surface-subtle: oklch(0.35 0.035 200); 283 + --luke-color-intent-accent-surface-subtle-hover: oklch(0.41 0.035 200); 284 + --luke-color-intent-accent-surface-subtle-pressed: oklch(0.45 0.035 200); 285 + --luke-color-intent-accent-surface-solid: oklch(0.75 0.1 200); 286 + --luke-color-intent-accent-surface-solid-hover: oklch(0.8 0.1 200); 287 + --luke-color-intent-accent-surface-solid-pressed: oklch(0.84 0.1 200); 288 + --luke-color-intent-accent-border: oklch(0.5522 0.0939 200); 289 + --luke-color-intent-accent-text: oklch(0.8337 0.1 200); 290 + --luke-color-intent-accent-text-hover: oklch(0.8937 0.1 200); 291 + --luke-color-intent-accent-on-solid: oklch(0.18 0.01 200); 292 + --luke-color-intent-danger-surface-subtle: oklch(0.35 0.056 25); 293 + --luke-color-intent-danger-surface-subtle-hover: oklch(0.41 0.056 25); 294 + --luke-color-intent-danger-surface-subtle-pressed: oklch(0.45 0.056 25); 295 + --luke-color-intent-danger-surface-solid: oklch(0.72 0.16 25); 296 + --luke-color-intent-danger-surface-solid-hover: oklch(0.77 0.1356 25); 297 + --luke-color-intent-danger-surface-solid-pressed: oklch(0.81 0.1075 25); 298 + --luke-color-intent-danger-border: oklch(0.5766 0.12 25); 299 + --luke-color-intent-danger-text: oklch(0.8413 0.0871 25); 300 + --luke-color-intent-danger-on-solid: oklch(0.18 0.01 25); 301 + --luke-color-intent-info-surface-subtle: oklch(0.35 0.0455 255); 302 + --luke-color-intent-info-border: oklch(0.5632 0.12 255); 303 + --luke-color-intent-info-text: oklch(0.8395 0.081 255); 304 + --luke-color-intent-success-surface-subtle: oklch(0.35 0.0455 150); 305 + --luke-color-intent-success-border: oklch(0.5495 0.12 150); 306 + --luke-color-intent-success-text: oklch(0.832 0.13 150); 307 + --luke-color-intent-warning-surface-subtle: oklch(0.35 0.0455 80); 308 + --luke-color-intent-warning-border: oklch(0.5663 0.1173 80); 309 + --luke-color-intent-warning-text: oklch(0.8419 0.13 80); 310 + --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); 311 + --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); 312 + --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); 313 + --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); 314 + --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); 315 + --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%); 316 + --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%); 317 + --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%); 318 + }