@motion-proto/live-tokens 0.84.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 (67) hide show
  1. package/.claude/skills/live-tokens-create-component/references/token-naming.md +0 -1
  2. package/CHANGELOG.md +41 -0
  3. package/dist-plugin/{chunk-V2OVSC5Z.js → chunk-GWMEYBZ2.js} +22 -1
  4. package/dist-plugin/{chunk-FD4FVDOC.js → chunk-ONYAIXCZ.js} +74 -1
  5. package/dist-plugin/{chunk-M6BWSS6C.js → chunk-W5VQV32K.js} +1 -1
  6. package/dist-plugin/index.cjs +101 -7
  7. package/dist-plugin/index.js +3 -3
  8. package/dist-plugin/migrateData/index.cjs +78 -5
  9. package/dist-plugin/migrateData/index.js +2 -2
  10. package/dist-plugin/setColors/index.cjs +74 -1
  11. package/dist-plugin/setColors/index.js +1 -1
  12. package/dist-plugin/setGeometry/index.cjs +74 -4
  13. package/dist-plugin/setGeometry/index.d.cts +1 -1
  14. package/dist-plugin/setGeometry/index.d.ts +1 -1
  15. package/dist-plugin/setGeometry/index.js +1 -4
  16. package/dist-plugin/tokensCssMigrations/index.cjs +22 -1
  17. package/dist-plugin/tokensCssMigrations/index.js +1 -1
  18. package/package.json +1 -1
  19. package/src/editor/component-editor/DialogEditor.svelte +1 -2
  20. package/src/editor/component-editor/ImageLightboxEditor.svelte +1 -2
  21. package/src/editor/component-editor/scaffolding/TokenLayout.svelte +1 -4
  22. package/src/editor/core/components/aliasKinds.ts +0 -4
  23. package/src/editor/core/sketch/sketchLayer.ts +1 -1
  24. package/src/editor/core/store/editorPersistence.ts +46 -23
  25. package/src/editor/core/store/editorStore.ts +1 -5
  26. package/src/editor/core/store/editorTypes.ts +11 -7
  27. package/src/editor/core/themes/migrations/2026-09-21-scrim-surface.ts +56 -0
  28. package/src/editor/core/themes/migrations/2026-09-21-wash-color-and-opacity.ts +51 -0
  29. package/src/editor/core/themes/migrations/index.ts +4 -0
  30. package/src/editor/core/themes/slices/washes.ts +59 -77
  31. package/src/editor/skill-atlas/skillSources.generated.ts +1 -1
  32. package/src/editor/ui/UIPaletteSelector.svelte +5 -1
  33. package/src/editor/ui/UIVariantSelector.svelte +1 -1
  34. package/src/editor/ui/sections/WashesSection.svelte +100 -99
  35. package/src/editor/ui/variantScales.ts +0 -11
  36. package/src/live-tokens/data/colors-and-type/autumn.json +9 -7
  37. package/src/live-tokens/data/colors-and-type/default.json +9 -7
  38. package/src/live-tokens/data/colors-and-type/halloween.json +9 -7
  39. package/src/live-tokens/data/colors-and-type/midnight-study.json +9 -7
  40. package/src/live-tokens/data/colors-and-type/ocean.json +9 -7
  41. package/src/live-tokens/data/colors-and-type/royal-velvet.json +9 -7
  42. package/src/live-tokens/data/colors-and-type/sketchy.json +9 -7
  43. package/src/live-tokens/data/colors-and-type/spring-meadow.json +9 -7
  44. package/src/live-tokens/data/colors-and-type/sunset.json +9 -7
  45. package/src/live-tokens/data/themes/autumn.json +12 -12
  46. package/src/live-tokens/data/themes/halloween.json +12 -12
  47. package/src/live-tokens/data/themes/midnight-study.json +12 -12
  48. package/src/live-tokens/data/themes/ocean.json +12 -12
  49. package/src/live-tokens/data/themes/royal-velvet.json +12 -12
  50. package/src/live-tokens/data/themes/sketchy.json +12 -12
  51. package/src/live-tokens/data/themes/spring-meadow.json +12 -12
  52. package/src/live-tokens/data/themes/sunset.json +12 -12
  53. package/src/live-tokens/data/tokens.generated.css +8 -6
  54. package/src/system/components/Dialog.svelte +2 -7
  55. package/src/system/components/ImageLightbox.svelte +7 -18
  56. package/src/system/styles/tokens.css +13 -8
  57. package/src/testing-js/{chunk-WQJ6QB6Y.js → chunk-RDHCBQ6I.js} +4 -8
  58. package/src/testing-js/chunk-RDHCBQ6I.js.map +1 -0
  59. package/src/testing-js/{chunk-XXABJNUU.js → chunk-XV5CYADO.js} +2 -2
  60. package/src/testing-js/component-behavior.contract.js +1 -1
  61. package/src/testing-js/component-editor.contract.js +1 -1
  62. package/src/testing-js/component-render.contract.js +1 -1
  63. package/src/testing-js/index.js +2 -2
  64. package/src/testing-js/page-compliance.contract.js +1 -1
  65. package/src/testing-js/vitest.js +2 -2
  66. package/src/testing-js/chunk-WQJ6QB6Y.js.map +0 -1
  67. /package/src/testing-js/{chunk-XXABJNUU.js.map → chunk-XV5CYADO.js.map} +0 -0
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",
@@ -2996,8 +2998,7 @@
2996
2998
  "createdAt": "2026-05-10T20:05:24.719Z",
2997
2999
  "updatedAt": "2026-08-19T22:39:32.785Z",
2998
3000
  "aliases": {
2999
- "--dialog-scrim-color": "--scrim-color",
3000
- "--dialog-scrim-opacity": "--scrim-opacity-high",
3001
+ "--dialog-scrim-surface": "--scrim-high",
3001
3002
  "--dialog-surface": "--surface-neutral-lowest",
3002
3003
  "--dialog-border": "--border-neutral-strong",
3003
3004
  "--dialog-border-width": "--border-width-2",
@@ -3141,8 +3142,7 @@
3141
3142
  "--imagelightbox-tile-border": "--color-transparent",
3142
3143
  "--imagelightbox-tile-border-width": "--border-width-0",
3143
3144
  "--imagelightbox-tile-shadow": "--shadow-md",
3144
- "--imagelightbox-scrim-color": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
3145
- "--imagelightbox-scrim-opacity": "1",
3145
+ "--imagelightbox-scrim-surface": "--scrim-high",
3146
3146
  "--imagelightbox-chrome-surface": "--surface-neutral-low",
3147
3147
  "--imagelightbox-chrome-border": "--border-brand",
3148
3148
  "--imagelightbox-chrome-border-width": "--border-width-1",
@@ -3996,5 +3996,5 @@
3996
3996
  }
3997
3997
  }
3998
3998
  },
3999
- "componentSchemaVersion": 37
3999
+ "componentSchemaVersion": 38
4000
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",
@@ -3035,8 +3037,7 @@
3035
3037
  "createdAt": "2026-05-10T20:05:24.719Z",
3036
3038
  "updatedAt": "2026-08-19T22:39:32.785Z",
3037
3039
  "aliases": {
3038
- "--dialog-scrim-color": "--scrim-color",
3039
- "--dialog-scrim-opacity": "--scrim-opacity-high",
3040
+ "--dialog-scrim-surface": "--scrim-high",
3040
3041
  "--dialog-surface": "--surface-neutral-lowest",
3041
3042
  "--dialog-border": "--border-neutral-strong",
3042
3043
  "--dialog-border-width": "--border-width-4",
@@ -3180,8 +3181,7 @@
3180
3181
  "--imagelightbox-tile-border": "--color-transparent",
3181
3182
  "--imagelightbox-tile-border-width": "--border-width-2",
3182
3183
  "--imagelightbox-tile-shadow": "--shadow-md",
3183
- "--imagelightbox-scrim-color": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
3184
- "--imagelightbox-scrim-opacity": "1",
3184
+ "--imagelightbox-scrim-surface": "--scrim-high",
3185
3185
  "--imagelightbox-chrome-surface": "--surface-neutral-low",
3186
3186
  "--imagelightbox-chrome-border": "--border-brand",
3187
3187
  "--imagelightbox-chrome-border-width": "--border-width-3",
@@ -4035,5 +4035,5 @@
4035
4035
  }
4036
4036
  }
4037
4037
  },
4038
- "componentSchemaVersion": 37
4038
+ "componentSchemaVersion": 38
4039
4039
  }
package/src/live-tokens/data/themes/midnight-study.json CHANGED
@@ -2271,12 +2271,14 @@
2271
2271
  "--columns-max-width": "1440px",
2272
2272
  "--columns-gutter": "32px",
2273
2273
  "--columns-margin": "0px",
2274
- "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2275
- "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2276
- "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2277
- "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2278
- "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2279
- "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2274
+ "--scrim-color": "var(--surface-neutral-lowest)",
2275
+ "--scrim-opacity-low": "0.7",
2276
+ "--scrim-opacity": "0.8",
2277
+ "--scrim-opacity-high": "0.9",
2278
+ "--tint-color": "var(--text-primary)",
2279
+ "--tint-opacity-low": "0.05",
2280
+ "--tint-opacity": "0.1",
2281
+ "--tint-opacity-high": "0.15",
2280
2282
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
2281
2283
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
2282
2284
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
@@ -2528,7 +2530,7 @@
2528
2530
  "family": null
2529
2531
  }
2530
2532
  ],
2531
- "schemaVersion": 8
2533
+ "schemaVersion": 9
2532
2534
  },
2533
2535
  "componentConfigs": {
2534
2536
  "badge": {
@@ -3053,8 +3055,7 @@
3053
3055
  "createdAt": "2026-05-10T20:05:24.719Z",
3054
3056
  "updatedAt": "2026-08-19T22:39:32.785Z",
3055
3057
  "aliases": {
3056
- "--dialog-scrim-color": "--scrim-color",
3057
- "--dialog-scrim-opacity": "--scrim-opacity-high",
3058
+ "--dialog-scrim-surface": "--scrim-high",
3058
3059
  "--dialog-surface": "--surface-neutral-lowest",
3059
3060
  "--dialog-border": "--border-neutral-strong",
3060
3061
  "--dialog-border-width": "--border-width-2",
@@ -3198,8 +3199,7 @@
3198
3199
  "--imagelightbox-tile-border": "--color-transparent",
3199
3200
  "--imagelightbox-tile-border-width": "--border-width-0",
3200
3201
  "--imagelightbox-tile-shadow": "--shadow-md",
3201
- "--imagelightbox-scrim-color": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
3202
- "--imagelightbox-scrim-opacity": "1",
3202
+ "--imagelightbox-scrim-surface": "--scrim-high",
3203
3203
  "--imagelightbox-chrome-surface": "--surface-neutral-low",
3204
3204
  "--imagelightbox-chrome-border": "--border-brand",
3205
3205
  "--imagelightbox-chrome-border-width": "--border-width-1",
@@ -4054,5 +4054,5 @@
4054
4054
  }
4055
4055
  }
4056
4056
  },
4057
- "componentSchemaVersion": 37
4057
+ "componentSchemaVersion": 38
4058
4058
  }
package/src/live-tokens/data/themes/ocean.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.2)",
2238
2240
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.2)",
2239
2241
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.2)",
@@ -2409,7 +2411,7 @@
2409
2411
  "family": null
2410
2412
  }
2411
2413
  ],
2412
- "schemaVersion": 8,
2414
+ "schemaVersion": 9,
2413
2415
  "gradients": [
2414
2416
  {
2415
2417
  "variable": "--gradient-1",
@@ -2995,8 +2997,7 @@
2995
2997
  "createdAt": "2026-05-10T20:05:24.719Z",
2996
2998
  "updatedAt": "2026-08-19T22:39:32.785Z",
2997
2999
  "aliases": {
2998
- "--dialog-scrim-color": "--scrim-color",
2999
- "--dialog-scrim-opacity": "--scrim-opacity-high",
3000
+ "--dialog-scrim-surface": "--scrim-high",
3000
3001
  "--dialog-surface": "--surface-neutral-lowest",
3001
3002
  "--dialog-border": "--border-neutral-strong",
3002
3003
  "--dialog-border-width": "--border-width-2",
@@ -3140,8 +3141,7 @@
3140
3141
  "--imagelightbox-tile-border": "--color-transparent",
3141
3142
  "--imagelightbox-tile-border-width": "--border-width-0",
3142
3143
  "--imagelightbox-tile-shadow": "--shadow-md",
3143
- "--imagelightbox-scrim-color": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
3144
- "--imagelightbox-scrim-opacity": "1",
3144
+ "--imagelightbox-scrim-surface": "--scrim-high",
3145
3145
  "--imagelightbox-chrome-surface": "--surface-neutral-low",
3146
3146
  "--imagelightbox-chrome-border": "--border-brand",
3147
3147
  "--imagelightbox-chrome-border-width": "--border-width-1",
@@ -3995,5 +3995,5 @@
3995
3995
  }
3996
3996
  }
3997
3997
  },
3998
- "componentSchemaVersion": 37
3998
+ "componentSchemaVersion": 38
3999
3999
  }
package/src/live-tokens/data/themes/royal-velvet.json CHANGED
@@ -2260,12 +2260,14 @@
2260
2260
  "--columns-max-width": "1440px",
2261
2261
  "--columns-gutter": "32px",
2262
2262
  "--columns-margin": "0px",
2263
- "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2264
- "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2265
- "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2266
- "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2267
- "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2268
- "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2263
+ "--scrim-color": "var(--surface-neutral-lowest)",
2264
+ "--scrim-opacity-low": "0.7",
2265
+ "--scrim-opacity": "0.8",
2266
+ "--scrim-opacity-high": "0.9",
2267
+ "--tint-color": "var(--text-primary)",
2268
+ "--tint-opacity-low": "0.05",
2269
+ "--tint-opacity": "0.1",
2270
+ "--tint-opacity-high": "0.15",
2269
2271
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
2270
2272
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
2271
2273
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
@@ -2440,7 +2442,7 @@
2440
2442
  "family": null
2441
2443
  }
2442
2444
  ],
2443
- "schemaVersion": 8,
2445
+ "schemaVersion": 9,
2444
2446
  "gradients": [
2445
2447
  {
2446
2448
  "variable": "--gradient-1",
@@ -3026,8 +3028,7 @@
3026
3028
  "createdAt": "2026-05-10T20:05:24.719Z",
3027
3029
  "updatedAt": "2026-08-19T22:39:32.785Z",
3028
3030
  "aliases": {
3029
- "--dialog-scrim-color": "--scrim-color",
3030
- "--dialog-scrim-opacity": "--scrim-opacity-high",
3031
+ "--dialog-scrim-surface": "--scrim-high",
3031
3032
  "--dialog-surface": "--surface-neutral-lowest",
3032
3033
  "--dialog-border": "--border-neutral-strong",
3033
3034
  "--dialog-border-width": "--border-width-3",
@@ -3171,8 +3172,7 @@
3171
3172
  "--imagelightbox-tile-border": "--color-transparent",
3172
3173
  "--imagelightbox-tile-border-width": "--border-width-1",
3173
3174
  "--imagelightbox-tile-shadow": "--shadow-md",
3174
- "--imagelightbox-scrim-color": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
3175
- "--imagelightbox-scrim-opacity": "1",
3175
+ "--imagelightbox-scrim-surface": "--scrim-high",
3176
3176
  "--imagelightbox-chrome-surface": "--surface-neutral-low",
3177
3177
  "--imagelightbox-chrome-border": "--border-brand",
3178
3178
  "--imagelightbox-chrome-border-width": "--border-width-2",
@@ -4026,5 +4026,5 @@
4026
4026
  }
4027
4027
  }
4028
4028
  },
4029
- "componentSchemaVersion": 37
4029
+ "componentSchemaVersion": 38
4030
4030
  }
package/src/live-tokens/data/themes/sketchy.json CHANGED
@@ -2214,12 +2214,14 @@
2214
2214
  "--columns-max-width": "1440px",
2215
2215
  "--columns-gutter": "32px",
2216
2216
  "--columns-margin": "0px",
2217
- "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2218
- "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2219
- "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2220
- "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2221
- "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2222
- "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2217
+ "--scrim-color": "var(--surface-neutral-lowest)",
2218
+ "--scrim-opacity-low": "0.7",
2219
+ "--scrim-opacity": "0.8",
2220
+ "--scrim-opacity-high": "0.9",
2221
+ "--tint-color": "var(--text-primary)",
2222
+ "--tint-opacity-low": "0.05",
2223
+ "--tint-opacity": "0.1",
2224
+ "--tint-opacity-high": "0.15",
2223
2225
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.2)",
2224
2226
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.2)",
2225
2227
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.2)",
@@ -2485,7 +2487,7 @@
2485
2487
  "family": null
2486
2488
  }
2487
2489
  ],
2488
- "schemaVersion": 8
2490
+ "schemaVersion": 9
2489
2491
  },
2490
2492
  "componentConfigs": {
2491
2493
  "badge": {
@@ -3009,8 +3011,7 @@
3009
3011
  "createdAt": "2026-05-10T20:05:24.719Z",
3010
3012
  "updatedAt": "2026-08-25T01:13:11.520Z",
3011
3013
  "aliases": {
3012
- "--dialog-scrim-color": "--scrim-color",
3013
- "--dialog-scrim-opacity": "--scrim-opacity-high",
3014
+ "--dialog-scrim-surface": "--scrim-high",
3014
3015
  "--dialog-surface": "--surface-neutral-lowest",
3015
3016
  "--dialog-border": "--border-neutral-strong",
3016
3017
  "--dialog-border-width": "--border-width-2",
@@ -3154,8 +3155,7 @@
3154
3155
  "--imagelightbox-tile-border": "--color-transparent",
3155
3156
  "--imagelightbox-tile-border-width": "--border-width-1",
3156
3157
  "--imagelightbox-tile-shadow": "--shadow-md",
3157
- "--imagelightbox-scrim-color": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
3158
- "--imagelightbox-scrim-opacity": "1",
3158
+ "--imagelightbox-scrim-surface": "--scrim-high",
3159
3159
  "--imagelightbox-chrome-surface": "--surface-neutral-low",
3160
3160
  "--imagelightbox-chrome-border": "--border-brand",
3161
3161
  "--imagelightbox-chrome-border-width": "--border-width-1",
@@ -4009,5 +4009,5 @@
4009
4009
  }
4010
4010
  }
4011
4011
  },
4012
- "componentSchemaVersion": 37
4012
+ "componentSchemaVersion": 38
4013
4013
  }