[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui.
luke-ui.netlify.app/
Drop the pre-v2 theme compatibility goldens (#251)
The fixtures existed only to diff the pre-v2 to v2 colour repaint, which has
shipped. The v2 goldens remain the live regression baseline, and the pre-v2
output stays recoverable from git history at cef0076.
Part of #231 (#240).
authored by
Luke Bennett
and committed by
GitHub
(Jul 25, 2026, 1:19 PM +1000)
cb796bcd
cd86d933
+8
-672
-1
vite.config.ts
-1
vite.config.ts
+7
-7
docs/THEME_COLOUR_GENERATION.md
+7
-7
docs/THEME_COLOUR_GENERATION.md
···
35
35
looked visually similar. This is a property of switching generators, not a regression in any one
36
36
token.
37
37
38
-
Two fixture sets document the transition and stay in the repo permanently:
38
+
The v2 pipeline output is pinned in a regression golden:
39
39
40
-
- `theme/__fixtures__/compat-goldens/*.pre-v2.css` — the exact `buildTheme` output for the bundled
41
-
themes captured before the v2 rewrite (frozen once, byte-identical to the original solver).
42
-
- `theme/__fixtures__/v2-goldens/*.v2.css` — the exact output under the v2 pipeline.
40
+
- `theme/__fixtures__/v2-goldens/*.v2.css` — the exact `buildTheme` output under the v2 pipeline,
41
+
asserted byte-identical in `build-theme.test.ts` so any later generator change is a reviewed,
42
+
deliberate diff.
43
43
44
-
`build-theme.test.ts` asserts the v2 output differs from the pre-v2 goldens (the repaint happened)
45
-
and pins the v2 goldens for future regressions. Re-generate the v2 goldens deliberately, reviewing
46
-
the diff, when a later engine change intentionally repaints again — never to silence a failing test.
44
+
The pre-v2 output is recoverable from git history (commit `cef0076`) and no longer committed to the
45
+
repo. Re-generate the v2 goldens deliberately, reviewing the diff, when a later engine change
46
+
intentionally repaints again — never to silence a failing test.
47
47
48
48
## Private ≠ non-breaking
49
49
+1
-28
packages/@luke-ui/react/src/theme/build-theme.test.ts
+1
-28
packages/@luke-ui/react/src/theme/build-theme.test.ts
···
641
641
642
642
// v2 regression goldens: the exact `buildTheme` output for the bundled themes under the wired-in
643
643
// scale/elevation/semantic-map pipeline (Stage 6, #238). Asserted byte-identical so any later
644
-
// generator change is a reviewed, deliberate diff. Committed alongside — not overwriting — the
645
-
// permanent pre-v2 compatibility fixtures below.
644
+
// generator change is a reviewed, deliberate diff.
646
645
describe('v2 regression goldens', () => {
647
646
const v2Goldens = {
648
647
paper: new URL('./__fixtures__/v2-goldens/paper.v2.css', import.meta.url),
···
655
654
656
655
expect(buildTheme(tactileFoundation)).toBe(goldenTactile);
657
656
expect(buildTheme(paperFoundation)).toBe(goldenPaper);
658
-
});
659
-
});
660
-
661
-
// Permanent compatibility (pre-v2) goldens: the exact `buildTheme` output captured before the
662
-
// theme-v2 generator work (wayfinder #232). They are a frozen historical reference — NOT asserted
663
-
// equal to live output, which the v2 pipeline has deliberately changed — kept so the pre-v2 → v2
664
-
// diff always has an unmodified baseline until the epic tears them down (#240).
665
-
describe('compatibility (pre-v2) goldens', () => {
666
-
const compatGoldens = {
667
-
paper: new URL('./__fixtures__/compat-goldens/paper.pre-v2.css', import.meta.url),
668
-
tactile: new URL('./__fixtures__/compat-goldens/tactile.pre-v2.css', import.meta.url),
669
-
} as const;
670
-
671
-
it('remains a readable frozen pre-v2 reference the live output has since diverged from', async () => {
672
-
const goldenTactile = await readFile(compatGoldens.tactile, 'utf8');
673
-
const goldenPaper = await readFile(compatGoldens.paper, 'utf8');
674
-
675
-
// Sanity: the frozen fixtures are the pre-v2 shape (same header, same identity class) but no
676
-
// longer match live output, which the wired-in v2 pipeline repainted.
677
-
expect(goldenTactile).toContain(
678
-
'/* Generated by buildTheme from @luke-ui/react. Do not edit. */',
679
-
);
680
-
expect(goldenTactile).toContain('.luke-ui-theme-tactile {');
681
-
expect(goldenPaper).toContain('.luke-ui-theme-paper {');
682
-
expect(buildTheme(tactileFoundation)).not.toBe(goldenTactile);
683
-
expect(buildTheme(paperFoundation)).not.toBe(goldenPaper);
684
657
});
685
658
});
-318
packages/@luke-ui/react/src/theme/__fixtures__/compat-goldens/paper.pre-v2.css
-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
-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
-
}