@motion-proto/live-tokens 0.83.0 → 0.85.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/.claude/skills/live-tokens-create-component/references/token-naming.md +0 -1
  2. package/CHANGELOG.md +72 -0
  3. package/dist-plugin/{chunk-RFVYPNRO.js → chunk-GWMEYBZ2.js} +43 -1
  4. package/dist-plugin/{chunk-6JKUYCPL.js → chunk-ONYAIXCZ.js} +104 -1
  5. package/dist-plugin/{chunk-LBZISJPG.js → chunk-W5VQV32K.js} +1 -1
  6. package/dist-plugin/index.cjs +152 -7
  7. package/dist-plugin/index.js +3 -3
  8. package/dist-plugin/migrateData/index.cjs +108 -5
  9. package/dist-plugin/migrateData/index.js +2 -2
  10. package/dist-plugin/setColors/index.cjs +104 -1
  11. package/dist-plugin/setColors/index.js +1 -1
  12. package/dist-plugin/setGeometry/index.cjs +105 -3
  13. package/dist-plugin/setGeometry/index.js +2 -3
  14. package/dist-plugin/tokensCssMigrations/index.cjs +43 -1
  15. package/dist-plugin/tokensCssMigrations/index.js +1 -1
  16. package/package.json +1 -1
  17. package/src/editor/core/components/aliasKinds.ts +1 -1
  18. package/src/editor/core/store/editorPersistence.ts +46 -23
  19. package/src/editor/core/store/editorStore.ts +1 -5
  20. package/src/editor/core/store/editorTypes.ts +11 -7
  21. package/src/editor/core/themes/migrations/2026-09-20-scrim-color-and-opacity.ts +45 -0
  22. package/src/editor/core/themes/migrations/2026-09-21-scrim-surface.ts +56 -0
  23. package/src/editor/core/themes/migrations/2026-09-21-wash-color-and-opacity.ts +51 -0
  24. package/src/editor/core/themes/migrations/index.ts +6 -0
  25. package/src/editor/core/themes/slices/washes.ts +59 -77
  26. package/src/editor/skill-atlas/skillSources.generated.ts +1 -1
  27. package/src/editor/ui/UIPaletteSelector.svelte +5 -1
  28. package/src/editor/ui/sections/WashesSection.svelte +100 -99
  29. package/src/live-tokens/data/colors-and-type/autumn.json +9 -7
  30. package/src/live-tokens/data/colors-and-type/default.json +9 -7
  31. package/src/live-tokens/data/colors-and-type/halloween.json +9 -7
  32. package/src/live-tokens/data/colors-and-type/midnight-study.json +9 -7
  33. package/src/live-tokens/data/colors-and-type/ocean.json +9 -7
  34. package/src/live-tokens/data/colors-and-type/royal-velvet.json +9 -7
  35. package/src/live-tokens/data/colors-and-type/sketchy.json +9 -7
  36. package/src/live-tokens/data/colors-and-type/spring-meadow.json +9 -7
  37. package/src/live-tokens/data/colors-and-type/sunset.json +9 -7
  38. package/src/live-tokens/data/themes/autumn.json +11 -9
  39. package/src/live-tokens/data/themes/halloween.json +11 -9
  40. package/src/live-tokens/data/themes/midnight-study.json +11 -9
  41. package/src/live-tokens/data/themes/ocean.json +11 -9
  42. package/src/live-tokens/data/themes/royal-velvet.json +11 -9
  43. package/src/live-tokens/data/themes/sketchy.json +11 -9
  44. package/src/live-tokens/data/themes/spring-meadow.json +11 -9
  45. package/src/live-tokens/data/themes/sunset.json +11 -9
  46. package/src/live-tokens/data/tokens.generated.css +8 -6
  47. package/src/system/components/ImageLightbox.svelte +5 -19
  48. package/src/system/styles/tokens.css +22 -9
package/src/editor/ui/sections/WashesSection.svelte CHANGED
@@ -1,18 +1,15 @@
1
1
  <script lang="ts">
2
2
  /**
3
- * Scrim + tint stops. A scrim dims what sits behind it; a tint shades the
4
- * surface it sits on. Each stop binds an existing color token through
5
- * `UIPaletteSelector`; the picker handles family/step selection and opacity,
6
- * and writes route through `onwrite` into the washes slice
7
- * (see editorStore.makeDefaultWashesState). The slice fans the resulting
8
- * color-mix expressions out to :root.
3
+ * Scrim and tint scales. Each family has one colour, bound to an existing
4
+ * color token through `UIPaletteSelector`, and three opacity stops. The
5
+ * slice emits the colour and the stops; tokens.css composes the `--scrim-*`
6
+ * and `--tint-*` fills that the swatches show.
9
7
  */
10
- import { editorState, mutate } from '../../core/store/editorStore';
11
- import type { WashToken } from '../../core/store/editorTypes';
8
+ import { editorState, mutate, beginSliderGesture } from '../../core/store/editorStore';
12
9
  import {
13
- makeDefaultScrimTokens,
14
- makeDefaultTintTokens,
15
- parseWashCss,
10
+ makeDefaultWashScale,
11
+ washColorVar,
12
+ type WashFamily,
16
13
  } from '../../core/themes/slices/washes';
17
14
  import UIPaletteSelector from '../UIPaletteSelector.svelte';
18
15
 
@@ -23,107 +20,92 @@
23
20
 
24
21
  let { copiedVar = null, oncopy }: Props = $props();
25
22
 
26
- type Channel = 'scrim' | 'tint';
23
+ const FAMILIES: { family: WashFamily; title: string }[] = [
24
+ { family: 'scrim', title: 'Scrims' },
25
+ { family: 'tint', title: 'Tints' },
26
+ ];
27
27
 
28
28
  function copy(v: string) { oncopy?.(v); }
29
29
 
30
- /** Translate a UITokenSelector write payload into a slice mutation.
31
- * - `null` → restore this stop's default alias + opacity (reset).
32
- * - bare `--name` → 100% opacity on that alias.
33
- * - `color-mix(in srgb, var(--name) N%, transparent)` → alias + N%.
34
- * - other (incl. `transparent`) → ignored; the picker's "None" option
35
- * doesn't apply to a wash. */
36
- function handleWrite(channel: Channel, idx: number, value: string | null) {
37
- mutate(`${channel} ${idx} edit`, (s) => {
38
- const arr = channel === 'scrim' ? s.washes.scrims : s.washes.tints;
39
- const t = arr[idx];
40
- if (!t) return;
41
- if (value === null) {
42
- const defaults = channel === 'scrim' ? makeDefaultScrimTokens() : makeDefaultTintTokens();
43
- const d = defaults[idx];
44
- if (d) { t.alias = d.alias; t.opacity = d.opacity; }
45
- return;
46
- }
47
- if (value.startsWith('--')) { t.alias = value; t.opacity = 1; return; }
48
- const parsed = parseWashCss(value);
49
- if (parsed) { t.alias = parsed.alias; t.opacity = parsed.opacity; }
30
+ /** The fill a stop composes: `--scrim-opacity-low` → `--scrim-low`. */
31
+ const fillVar = (opacityVar: string) => opacityVar.replace('-opacity', '');
32
+
33
+ /** `null` restores the default colour; the picker's full-strength writes are
34
+ * bare `--name`s. */
35
+ function writeColor(family: WashFamily, value: string | null) {
36
+ mutate(`${family} color edit`, (s) => {
37
+ if (value === null) s.washes[family].color = makeDefaultWashScale(family).color;
38
+ else if (value.startsWith('--')) s.washes[family].color = value;
50
39
  });
51
40
  }
52
41
 
53
- function copyCss(t: WashToken): string {
54
- const pct = Math.round(t.opacity * 100);
55
- return pct >= 100 ? `var(${t.alias})` : `color-mix(in srgb, var(${t.alias}) ${pct}%, transparent)`;
42
+ function writeOpacity(family: WashFamily, idx: number, pct: number) {
43
+ if (!Number.isFinite(pct)) return;
44
+ mutate(`${family} opacity edit`, (s) => {
45
+ const stop = s.washes[family].stops[idx];
46
+ if (stop) stop.opacity = Math.max(0, Math.min(100, Math.round(pct))) / 100;
47
+ });
56
48
  }
57
49
  </script>
58
50
 
59
51
  <section class="section" id="washes">
60
52
  <h2 class="section-title">Washes</h2>
61
53
 
62
- <h3 class="group-title">Scrims</h3>
63
- <div class="washes-grid">
64
- {#each $editorState.washes.scrims as token, i (token.variable)}
54
+ {#each FAMILIES as { family, title } (family)}
55
+ {@const scale = $editorState.washes[family]}
56
+ {@const colorVar = washColorVar(family)}
57
+ <h3 class="group-title">{title}</h3>
58
+ <div class="washes-grid">
65
59
  <div class="wash-row">
66
- <div class="wash-swatch-wrap">
67
- <div class="wash-swatch" style="background: var({token.variable});"></div>
60
+ <div class="wash-swatch-wrap" class:wash-swatch-wrap--dark={family === 'tint'}>
61
+ <div class="wash-swatch" style="background: var({colorVar});"></div>
68
62
  </div>
69
63
  <div class="wash-meta">
70
64
  <button
71
65
  class="token-variable copyable"
72
- class:copied={copiedVar === token.variable}
73
- onclick={() => copy(token.variable)}
74
- >{copiedVar === token.variable ? 'copied!' : token.variable}</button>
75
- <span class="token-value">{token.label} — {Math.round(token.opacity * 100)}%</span>
66
+ class:copied={copiedVar === colorVar}
67
+ onclick={() => copy(colorVar)}
68
+ >{copiedVar === colorVar ? 'copied!' : colorVar}</button>
69
+ <span class="token-value">Colour</span>
76
70
  </div>
77
- <div class="wash-picker">
71
+ <div class="wash-control">
78
72
  <UIPaletteSelector
79
- variable={token.variable}
73
+ variable={colorVar}
80
74
  showNone={false}
81
- onwrite={(v) => handleWrite('scrim', i, v)}
75
+ showOpacity={false}
76
+ onwrite={(v) => writeColor(family, v)}
82
77
  />
83
78
  </div>
84
- <button
85
- class="copy-css-btn"
86
- title="Copy resolved CSS"
87
- onclick={() => copy(copyCss(token))}
88
- >
89
- {copiedVar === copyCss(token) ? 'copied!' : 'copy css'}
90
- </button>
91
79
  </div>
92
- {/each}
93
- </div>
94
-
95
- <h3 class="group-title">Tints</h3>
96
- <div class="washes-grid">
97
- {#each $editorState.washes.tints as token, i (token.variable)}
98
- <div class="wash-row">
99
- <div class="wash-swatch-wrap wash-swatch-wrap--dark">
100
- <div class="wash-swatch" style="background: var({token.variable});"></div>
101
- </div>
102
- <div class="wash-meta">
103
- <button
104
- class="token-variable copyable"
105
- class:copied={copiedVar === token.variable}
106
- onclick={() => copy(token.variable)}
107
- >{copiedVar === token.variable ? 'copied!' : token.variable}</button>
108
- <span class="token-value">{token.label} — {Math.round(token.opacity * 100)}%</span>
80
+ {#each scale.stops as stop, i (stop.variable)}
81
+ {@const pct = Math.round(stop.opacity * 100)}
82
+ {@const fill = fillVar(stop.variable)}
83
+ <div class="wash-row">
84
+ <div class="wash-swatch-wrap" class:wash-swatch-wrap--dark={family === 'tint'}>
85
+ <div class="wash-swatch" style="background: var({fill});"></div>
86
+ </div>
87
+ <div class="wash-meta">
88
+ <button
89
+ class="token-variable copyable"
90
+ class:copied={copiedVar === fill}
91
+ onclick={() => copy(fill)}
92
+ >{copiedVar === fill ? 'copied!' : fill}</button>
93
+ <span class="token-value">{stop.label}, {stop.variable}</span>
94
+ </div>
95
+ <div class="wash-control wash-opacity">
96
+ <input type="range" min="0" max="100" value={pct}
97
+ aria-label="{fill} opacity"
98
+ onpointerdown={() => beginSliderGesture(`edit ${family} opacity`)}
99
+ oninput={(e) => writeOpacity(family, i, +e.currentTarget.value)} />
100
+ <input class="wash-opacity-input" type="number" min="0" max="100" value={pct}
101
+ aria-label="{fill} opacity, percent"
102
+ onchange={(e) => writeOpacity(family, i, +e.currentTarget.value)} />
103
+ <span class="wash-opacity-unit">%</span>
104
+ </div>
109
105
  </div>
110
- <div class="wash-picker">
111
- <UIPaletteSelector
112
- variable={token.variable}
113
- showNone={false}
114
- onwrite={(v) => handleWrite('tint', i, v)}
115
- />
116
- </div>
117
- <button
118
- class="copy-css-btn"
119
- title="Copy resolved CSS"
120
- onclick={() => copy(copyCss(token))}
121
- >
122
- {copiedVar === copyCss(token) ? 'copied!' : 'copy css'}
123
- </button>
124
- </div>
125
- {/each}
126
- </div>
106
+ {/each}
107
+ </div>
108
+ {/each}
127
109
  </section>
128
110
 
129
111
  <style>
@@ -157,7 +139,7 @@
157
139
 
158
140
  .wash-row {
159
141
  display: grid;
160
- grid-template-columns: 3.5rem minmax(10rem, 1fr) minmax(14rem, 1.5fr) auto;
142
+ grid-template-columns: 3.5rem minmax(10rem, 1fr) minmax(14rem, 1.5fr);
161
143
  gap: var(--ui-space-12);
162
144
  align-items: center;
163
145
  padding: var(--ui-space-8) var(--ui-space-12);
@@ -221,21 +203,40 @@
221
203
  color: var(--ui-text-muted);
222
204
  }
223
205
 
224
- .wash-picker { min-width: 0; }
206
+ .wash-control { min-width: 0; }
225
207
 
226
- .copy-css-btn {
227
- all: unset;
228
- font-size: var(--ui-font-size-xs);
229
- color: var(--ui-text-muted);
208
+ .wash-opacity {
209
+ display: flex;
210
+ align-items: center;
211
+ gap: var(--ui-space-8);
212
+ }
213
+
214
+ .wash-opacity input[type="range"] {
215
+ flex: 1;
216
+ min-width: 4rem;
217
+ accent-color: var(--ui-text-accent);
230
218
  cursor: pointer;
231
- padding: var(--ui-space-2) var(--ui-space-6);
219
+ }
220
+
221
+ .wash-opacity-input {
222
+ font-size: var(--ui-font-size-xs);
223
+ color: var(--ui-text-primary);
224
+ font-family: var(--ui-font-mono);
225
+ width: 2.5rem;
226
+ text-align: right;
227
+ flex-shrink: 0;
228
+ background: var(--ui-surface-lowest);
232
229
  border: 1px solid var(--ui-border-low);
233
230
  border-radius: var(--ui-radius-sm);
234
- transition: color var(--ui-transition-fast), border-color var(--ui-transition-fast);
231
+ padding: var(--ui-space-2) var(--ui-space-4);
232
+ -moz-appearance: textfield;
233
+ appearance: textfield;
235
234
  }
236
235
 
237
- .copy-css-btn:hover {
238
- color: var(--ui-text-primary);
239
- border-color: var(--ui-border-high);
236
+ .wash-opacity-unit {
237
+ font-size: var(--ui-font-size-xs);
238
+ color: var(--ui-text-muted);
239
+ font-family: var(--ui-font-mono);
240
+ flex-shrink: 0;
240
241
  }
241
242
  </style>
package/src/live-tokens/data/colors-and-type/autumn.json CHANGED
@@ -2223,12 +2223,14 @@
2223
2223
  "--columns-max-width": "1440px",
2224
2224
  "--columns-gutter": "32px",
2225
2225
  "--columns-margin": "0px",
2226
- "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2227
- "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2228
- "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2229
- "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2230
- "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2231
- "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2226
+ "--scrim-color": "var(--surface-neutral-lowest)",
2227
+ "--scrim-opacity-low": "0.7",
2228
+ "--scrim-opacity": "0.8",
2229
+ "--scrim-opacity-high": "0.9",
2230
+ "--tint-color": "var(--text-primary)",
2231
+ "--tint-opacity-low": "0.05",
2232
+ "--tint-opacity": "0.1",
2233
+ "--tint-opacity-high": "0.15",
2232
2234
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.25)",
2233
2235
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.25)",
2234
2236
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.25)",
@@ -2405,7 +2407,7 @@
2405
2407
  "family": null
2406
2408
  }
2407
2409
  ],
2408
- "schemaVersion": 8,
2410
+ "schemaVersion": 9,
2409
2411
  "gradients": [
2410
2412
  {
2411
2413
  "variable": "--gradient-1",
package/src/live-tokens/data/colors-and-type/default.json CHANGED
@@ -2254,12 +2254,14 @@
2254
2254
  "--columns-max-width": "1440px",
2255
2255
  "--columns-gutter": "32px",
2256
2256
  "--columns-margin": "0px",
2257
- "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2258
- "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2259
- "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2260
- "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2261
- "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2262
- "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2257
+ "--scrim-color": "var(--surface-neutral-lowest)",
2258
+ "--scrim-opacity-low": "0.7",
2259
+ "--scrim-opacity": "0.8",
2260
+ "--scrim-opacity-high": "0.9",
2261
+ "--tint-color": "var(--text-primary)",
2262
+ "--tint-opacity-low": "0.05",
2263
+ "--tint-opacity": "0.1",
2264
+ "--tint-opacity-high": "0.15",
2263
2265
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
2264
2266
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
2265
2267
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
@@ -2415,5 +2417,5 @@
2415
2417
  ]
2416
2418
  }
2417
2419
  ],
2418
- "schemaVersion": 8
2420
+ "schemaVersion": 9
2419
2421
  }
package/src/live-tokens/data/colors-and-type/halloween.json CHANGED
@@ -2270,12 +2270,14 @@
2270
2270
  "--columns-max-width": "1440px",
2271
2271
  "--columns-gutter": "32px",
2272
2272
  "--columns-margin": "0px",
2273
- "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2274
- "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2275
- "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2276
- "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2277
- "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2278
- "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2273
+ "--scrim-color": "var(--surface-neutral-lowest)",
2274
+ "--scrim-opacity-low": "0.7",
2275
+ "--scrim-opacity": "0.8",
2276
+ "--scrim-opacity-high": "0.9",
2277
+ "--tint-color": "var(--text-primary)",
2278
+ "--tint-opacity-low": "0.05",
2279
+ "--tint-opacity": "0.1",
2280
+ "--tint-opacity-high": "0.15",
2279
2281
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
2280
2282
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
2281
2283
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
@@ -2444,7 +2446,7 @@
2444
2446
  "family": null
2445
2447
  }
2446
2448
  ],
2447
- "schemaVersion": 8,
2449
+ "schemaVersion": 9,
2448
2450
  "gradients": [
2449
2451
  {
2450
2452
  "variable": "--gradient-1",
package/src/live-tokens/data/colors-and-type/midnight-study.json CHANGED
@@ -2266,12 +2266,14 @@
2266
2266
  "--columns-max-width": "1440px",
2267
2267
  "--columns-gutter": "32px",
2268
2268
  "--columns-margin": "0px",
2269
- "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2270
- "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2271
- "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2272
- "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2273
- "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2274
- "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2269
+ "--scrim-color": "var(--surface-neutral-lowest)",
2270
+ "--scrim-opacity-low": "0.7",
2271
+ "--scrim-opacity": "0.8",
2272
+ "--scrim-opacity-high": "0.9",
2273
+ "--tint-color": "var(--text-primary)",
2274
+ "--tint-opacity-low": "0.05",
2275
+ "--tint-opacity": "0.1",
2276
+ "--tint-opacity-high": "0.15",
2275
2277
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
2276
2278
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
2277
2279
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
@@ -2523,5 +2525,5 @@
2523
2525
  "family": null
2524
2526
  }
2525
2527
  ],
2526
- "schemaVersion": 8
2528
+ "schemaVersion": 9
2527
2529
  }
package/src/live-tokens/data/colors-and-type/ocean.json CHANGED
@@ -2223,12 +2223,14 @@
2223
2223
  "--columns-max-width": "1440px",
2224
2224
  "--columns-gutter": "32px",
2225
2225
  "--columns-margin": "0px",
2226
- "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2227
- "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2228
- "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2229
- "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2230
- "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2231
- "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2226
+ "--scrim-color": "var(--surface-neutral-lowest)",
2227
+ "--scrim-opacity-low": "0.7",
2228
+ "--scrim-opacity": "0.8",
2229
+ "--scrim-opacity-high": "0.9",
2230
+ "--tint-color": "var(--text-primary)",
2231
+ "--tint-opacity-low": "0.05",
2232
+ "--tint-opacity": "0.1",
2233
+ "--tint-opacity-high": "0.15",
2232
2234
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.2)",
2233
2235
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.2)",
2234
2236
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.2)",
@@ -2404,7 +2406,7 @@
2404
2406
  "family": null
2405
2407
  }
2406
2408
  ],
2407
- "schemaVersion": 8,
2409
+ "schemaVersion": 9,
2408
2410
  "gradients": [
2409
2411
  {
2410
2412
  "variable": "--gradient-1",
package/src/live-tokens/data/colors-and-type/royal-velvet.json CHANGED
@@ -2255,12 +2255,14 @@
2255
2255
  "--columns-max-width": "1440px",
2256
2256
  "--columns-gutter": "32px",
2257
2257
  "--columns-margin": "0px",
2258
- "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2259
- "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2260
- "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2261
- "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2262
- "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2263
- "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2258
+ "--scrim-color": "var(--surface-neutral-lowest)",
2259
+ "--scrim-opacity-low": "0.7",
2260
+ "--scrim-opacity": "0.8",
2261
+ "--scrim-opacity-high": "0.9",
2262
+ "--tint-color": "var(--text-primary)",
2263
+ "--tint-opacity-low": "0.05",
2264
+ "--tint-opacity": "0.1",
2265
+ "--tint-opacity-high": "0.15",
2264
2266
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
2265
2267
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
2266
2268
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
@@ -2435,7 +2437,7 @@
2435
2437
  "family": null
2436
2438
  }
2437
2439
  ],
2438
- "schemaVersion": 8,
2440
+ "schemaVersion": 9,
2439
2441
  "gradients": [
2440
2442
  {
2441
2443
  "variable": "--gradient-1",
package/src/live-tokens/data/colors-and-type/sketchy.json CHANGED
@@ -2209,12 +2209,14 @@
2209
2209
  "--columns-max-width": "1440px",
2210
2210
  "--columns-gutter": "32px",
2211
2211
  "--columns-margin": "0px",
2212
- "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2213
- "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2214
- "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2215
- "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2216
- "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2217
- "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2212
+ "--scrim-color": "var(--surface-neutral-lowest)",
2213
+ "--scrim-opacity-low": "0.7",
2214
+ "--scrim-opacity": "0.8",
2215
+ "--scrim-opacity-high": "0.9",
2216
+ "--tint-color": "var(--text-primary)",
2217
+ "--tint-opacity-low": "0.05",
2218
+ "--tint-opacity": "0.1",
2219
+ "--tint-opacity-high": "0.15",
2218
2220
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.2)",
2219
2221
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.2)",
2220
2222
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.2)",
@@ -2480,5 +2482,5 @@
2480
2482
  "family": null
2481
2483
  }
2482
2484
  ],
2483
- "schemaVersion": 8
2485
+ "schemaVersion": 9
2484
2486
  }
package/src/live-tokens/data/colors-and-type/spring-meadow.json CHANGED
@@ -2209,12 +2209,14 @@
2209
2209
  "--columns-max-width": "1440px",
2210
2210
  "--columns-gutter": "32px",
2211
2211
  "--columns-margin": "0px",
2212
- "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2213
- "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2214
- "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2215
- "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2216
- "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2217
- "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2212
+ "--scrim-color": "var(--surface-neutral-lowest)",
2213
+ "--scrim-opacity-low": "0.7",
2214
+ "--scrim-opacity": "0.8",
2215
+ "--scrim-opacity-high": "0.9",
2216
+ "--tint-color": "var(--text-primary)",
2217
+ "--tint-opacity-low": "0.05",
2218
+ "--tint-opacity": "0.1",
2219
+ "--tint-opacity-high": "0.15",
2218
2220
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.2)",
2219
2221
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.2)",
2220
2222
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.2)",
@@ -2391,7 +2393,7 @@
2391
2393
  "family": null
2392
2394
  }
2393
2395
  ],
2394
- "schemaVersion": 8,
2396
+ "schemaVersion": 9,
2395
2397
  "gradients": [
2396
2398
  {
2397
2399
  "variable": "--gradient-1",
package/src/live-tokens/data/colors-and-type/sunset.json CHANGED
@@ -2270,12 +2270,14 @@
2270
2270
  "--columns-max-width": "1440px",
2271
2271
  "--columns-gutter": "32px",
2272
2272
  "--columns-margin": "0px",
2273
- "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2274
- "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2275
- "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2276
- "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2277
- "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2278
- "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2273
+ "--scrim-color": "var(--surface-neutral-lowest)",
2274
+ "--scrim-opacity-low": "0.7",
2275
+ "--scrim-opacity": "0.8",
2276
+ "--scrim-opacity-high": "0.9",
2277
+ "--tint-color": "var(--text-primary)",
2278
+ "--tint-opacity-low": "0.05",
2279
+ "--tint-opacity": "0.1",
2280
+ "--tint-opacity-high": "0.15",
2279
2281
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
2280
2282
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
2281
2283
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
@@ -2443,7 +2445,7 @@
2443
2445
  "family": null
2444
2446
  }
2445
2447
  ],
2446
- "schemaVersion": 8,
2448
+ "schemaVersion": 9,
2447
2449
  "gradients": [
2448
2450
  {
2449
2451
  "variable": "--gradient-1",
package/src/live-tokens/data/themes/autumn.json CHANGED
@@ -2228,12 +2228,14 @@
2228
2228
  "--columns-max-width": "1440px",
2229
2229
  "--columns-gutter": "32px",
2230
2230
  "--columns-margin": "0px",
2231
- "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2232
- "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2233
- "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2234
- "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2235
- "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2236
- "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2231
+ "--scrim-color": "var(--surface-neutral-lowest)",
2232
+ "--scrim-opacity-low": "0.7",
2233
+ "--scrim-opacity": "0.8",
2234
+ "--scrim-opacity-high": "0.9",
2235
+ "--tint-color": "var(--text-primary)",
2236
+ "--tint-opacity-low": "0.05",
2237
+ "--tint-opacity": "0.1",
2238
+ "--tint-opacity-high": "0.15",
2237
2239
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.25)",
2238
2240
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.25)",
2239
2241
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.25)",
@@ -2410,7 +2412,7 @@
2410
2412
  "family": null
2411
2413
  }
2412
2414
  ],
2413
- "schemaVersion": 8,
2415
+ "schemaVersion": 9,
2414
2416
  "gradients": [
2415
2417
  {
2416
2418
  "variable": "--gradient-1",
@@ -3140,7 +3142,7 @@
3140
3142
  "--imagelightbox-tile-border": "--color-transparent",
3141
3143
  "--imagelightbox-tile-border-width": "--border-width-0",
3142
3144
  "--imagelightbox-tile-shadow": "--shadow-md",
3143
- "--imagelightbox-scrim-surface": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
3145
+ "--imagelightbox-scrim-surface": "--scrim-high",
3144
3146
  "--imagelightbox-chrome-surface": "--surface-neutral-low",
3145
3147
  "--imagelightbox-chrome-border": "--border-brand",
3146
3148
  "--imagelightbox-chrome-border-width": "--border-width-1",
@@ -3994,5 +3996,5 @@
3994
3996
  }
3995
3997
  }
3996
3998
  },
3997
- "componentSchemaVersion": 36
3999
+ "componentSchemaVersion": 38
3998
4000
  }
package/src/live-tokens/data/themes/halloween.json CHANGED
@@ -2275,12 +2275,14 @@
2275
2275
  "--columns-max-width": "1440px",
2276
2276
  "--columns-gutter": "32px",
2277
2277
  "--columns-margin": "0px",
2278
- "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2279
- "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2280
- "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2281
- "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2282
- "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2283
- "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2278
+ "--scrim-color": "var(--surface-neutral-lowest)",
2279
+ "--scrim-opacity-low": "0.7",
2280
+ "--scrim-opacity": "0.8",
2281
+ "--scrim-opacity-high": "0.9",
2282
+ "--tint-color": "var(--text-primary)",
2283
+ "--tint-opacity-low": "0.05",
2284
+ "--tint-opacity": "0.1",
2285
+ "--tint-opacity-high": "0.15",
2284
2286
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
2285
2287
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
2286
2288
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
@@ -2449,7 +2451,7 @@
2449
2451
  "family": null
2450
2452
  }
2451
2453
  ],
2452
- "schemaVersion": 8,
2454
+ "schemaVersion": 9,
2453
2455
  "gradients": [
2454
2456
  {
2455
2457
  "variable": "--gradient-1",
@@ -3179,7 +3181,7 @@
3179
3181
  "--imagelightbox-tile-border": "--color-transparent",
3180
3182
  "--imagelightbox-tile-border-width": "--border-width-2",
3181
3183
  "--imagelightbox-tile-shadow": "--shadow-md",
3182
- "--imagelightbox-scrim-surface": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
3184
+ "--imagelightbox-scrim-surface": "--scrim-high",
3183
3185
  "--imagelightbox-chrome-surface": "--surface-neutral-low",
3184
3186
  "--imagelightbox-chrome-border": "--border-brand",
3185
3187
  "--imagelightbox-chrome-border-width": "--border-width-3",
@@ -4033,5 +4035,5 @@
4033
4035
  }
4034
4036
  }
4035
4037
  },
4036
- "componentSchemaVersion": 36
4038
+ "componentSchemaVersion": 38
4037
4039
  }