@motion-proto/live-tokens 0.84.0 → 0.86.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 (87) hide show
  1. package/.claude/skills/live-tokens-create-component/references/token-naming.md +0 -1
  2. package/CHANGELOG.md +85 -0
  3. package/README.md +1 -1
  4. package/dist-plugin/{chunk-V2OVSC5Z.js → chunk-GWMEYBZ2.js} +22 -1
  5. package/dist-plugin/{chunk-FD4FVDOC.js → chunk-ONYAIXCZ.js} +74 -1
  6. package/dist-plugin/{chunk-M6BWSS6C.js → chunk-W5VQV32K.js} +1 -1
  7. package/dist-plugin/index.cjs +101 -7
  8. package/dist-plugin/index.js +3 -3
  9. package/dist-plugin/migrateData/index.cjs +78 -5
  10. package/dist-plugin/migrateData/index.js +2 -2
  11. package/dist-plugin/setColors/index.cjs +74 -1
  12. package/dist-plugin/setColors/index.js +1 -1
  13. package/dist-plugin/setGeometry/index.cjs +74 -4
  14. package/dist-plugin/setGeometry/index.d.cts +1 -1
  15. package/dist-plugin/setGeometry/index.d.ts +1 -1
  16. package/dist-plugin/setGeometry/index.js +1 -4
  17. package/dist-plugin/tokensCssMigrations/index.cjs +22 -1
  18. package/dist-plugin/tokensCssMigrations/index.js +1 -1
  19. package/package.json +1 -1
  20. package/src/editor/component-editor/DialogEditor.svelte +1 -2
  21. package/src/editor/component-editor/ImageLightboxEditor.svelte +1 -2
  22. package/src/editor/component-editor/SlidePagerEditor.svelte +118 -0
  23. package/src/editor/component-editor/VideoFrameEditor.svelte +73 -0
  24. package/src/editor/component-editor/VideoLightboxEditor.svelte +95 -0
  25. package/src/editor/component-editor/registry.ts +40 -1
  26. package/src/editor/component-editor/scaffolding/TokenLayout.svelte +1 -4
  27. package/src/editor/core/components/aliasKinds.ts +0 -4
  28. package/src/editor/core/sketch/sketchLayer.ts +8 -1
  29. package/src/editor/core/store/editorPersistence.ts +46 -23
  30. package/src/editor/core/store/editorStore.ts +1 -5
  31. package/src/editor/core/store/editorTypes.ts +11 -7
  32. package/src/editor/core/themes/migrations/2026-09-21-scrim-surface.ts +56 -0
  33. package/src/editor/core/themes/migrations/2026-09-21-wash-color-and-opacity.ts +51 -0
  34. package/src/editor/core/themes/migrations/index.ts +4 -0
  35. package/src/editor/core/themes/slices/washes.ts +59 -77
  36. package/src/editor/overlay/LiveEditorOverlay.svelte +45 -52
  37. package/src/editor/pages/ComponentEditorPage.svelte +1 -1
  38. package/src/editor/skill-atlas/skillSources.generated.ts +1 -1
  39. package/src/editor/ui/ThemePanel.svelte +9 -53
  40. package/src/editor/ui/UIPaletteSelector.svelte +5 -1
  41. package/src/editor/ui/UIVariantSelector.svelte +1 -1
  42. package/src/editor/ui/sections/WashesSection.svelte +100 -99
  43. package/src/editor/ui/variantScales.ts +0 -11
  44. package/src/live-tokens/data/colors-and-type/autumn.json +9 -7
  45. package/src/live-tokens/data/colors-and-type/default.json +9 -7
  46. package/src/live-tokens/data/colors-and-type/halloween.json +9 -7
  47. package/src/live-tokens/data/colors-and-type/midnight-study.json +9 -7
  48. package/src/live-tokens/data/colors-and-type/ocean.json +9 -7
  49. package/src/live-tokens/data/colors-and-type/royal-velvet.json +9 -7
  50. package/src/live-tokens/data/colors-and-type/sketchy.json +9 -7
  51. package/src/live-tokens/data/colors-and-type/spring-meadow.json +9 -7
  52. package/src/live-tokens/data/colors-and-type/sunset.json +9 -7
  53. package/src/live-tokens/data/themes/autumn.json +98 -12
  54. package/src/live-tokens/data/themes/halloween.json +98 -12
  55. package/src/live-tokens/data/themes/midnight-study.json +98 -12
  56. package/src/live-tokens/data/themes/ocean.json +98 -12
  57. package/src/live-tokens/data/themes/royal-velvet.json +98 -12
  58. package/src/live-tokens/data/themes/sketchy.json +98 -12
  59. package/src/live-tokens/data/themes/spring-meadow.json +98 -12
  60. package/src/live-tokens/data/themes/sunset.json +98 -12
  61. package/src/live-tokens/data/tokens.generated.css +8 -6
  62. package/src/system/assets/slide-04.webp +0 -0
  63. package/src/system/assets/slide-05.webp +0 -0
  64. package/src/system/assets/slide-06.webp +0 -0
  65. package/src/system/assets/watch-navigation-poster.webp +0 -0
  66. package/src/system/assets/watch-navigation.mp4 +0 -0
  67. package/src/system/components/Dialog.svelte +2 -7
  68. package/src/system/components/ImageLightbox.svelte +27 -39
  69. package/src/system/components/SlidePager.svelte +516 -0
  70. package/src/system/components/VideoFrame.svelte +284 -0
  71. package/src/system/components/VideoLightbox.svelte +381 -0
  72. package/src/system/styles/tokens.css +13 -8
  73. package/src/testing-js/{chunk-WQJ6QB6Y.js → chunk-OHU5BHGZ.js} +347 -9
  74. package/src/testing-js/chunk-OHU5BHGZ.js.map +1 -0
  75. package/src/testing-js/{chunk-XXABJNUU.js → chunk-Y6R7Z7VK.js} +10 -6
  76. package/src/testing-js/chunk-Y6R7Z7VK.js.map +1 -0
  77. package/src/testing-js/component-behavior.contract.js +1 -1
  78. package/src/testing-js/component-editor.contract.js +1 -1
  79. package/src/testing-js/component-render.contract.js +1 -1
  80. package/src/testing-js/index.d.ts +2 -2
  81. package/src/testing-js/index.js +2 -2
  82. package/src/testing-js/page-compliance.contract.js +1 -1
  83. package/src/testing-js/{vitest-BMLIbDs2.d.ts → vitest-5vWtqwWe.d.ts} +2 -2
  84. package/src/testing-js/vitest.d.ts +1 -1
  85. package/src/testing-js/vitest.js +2 -2
  86. package/src/testing-js/chunk-WQJ6QB6Y.js.map +0 -1
  87. package/src/testing-js/chunk-XXABJNUU.js.map +0 -1
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",
@@ -3994,7 +3994,93 @@
3994
3994
  "--slider-value-font-weight": "--font-weight-normal",
3995
3995
  "--slider-value-line-height": "--line-height-normal"
3996
3996
  }
3997
+ },
3998
+ "videolightbox": {
3999
+ "name": "autumn",
4000
+ "component": "videolightbox",
4001
+ "createdAt": "2026-09-21T17:00:00.000Z",
4002
+ "updatedAt": "2026-09-21T17:00:00.000Z",
4003
+ "aliases": {
4004
+ "--videolightbox-tile-surface": "--color-transparent",
4005
+ "--videolightbox-tile-border": "--color-transparent",
4006
+ "--videolightbox-tile-border-width": "--border-width-0",
4007
+ "--videolightbox-tile-radius": "--radius-4xl",
4008
+ "--videolightbox-tile-shadow": "--shadow-md",
4009
+ "--videolightbox-scrim-surface": "--scrim-high",
4010
+ "--videolightbox-overlay-padding": "--space-64",
4011
+ "--videolightbox-overlay-duration": "--duration-500",
4012
+ "--videolightbox-overlay-easing": "--ease-out-quad",
4013
+ "--videolightbox-chrome-surface": "--surface-neutral-low",
4014
+ "--videolightbox-chrome-border": "--border-brand",
4015
+ "--videolightbox-chrome-border-width": "--border-width-1",
4016
+ "--videolightbox-chrome-radius": "--radius-full",
4017
+ "--videolightbox-chrome-icon": "--text-primary",
4018
+ "--videolightbox-chrome-hover-surface": "--surface-brand-high"
4019
+ }
4020
+ },
4021
+ "videoframe": {
4022
+ "name": "autumn",
4023
+ "component": "videoframe",
4024
+ "createdAt": "2026-09-21T18:00:00.000Z",
4025
+ "updatedAt": "2026-09-21T18:00:00.000Z",
4026
+ "aliases": {
4027
+ "--videoframe-frame-surface": "--surface-neutral-lowest",
4028
+ "--videoframe-clip-surface": "--color-transparent",
4029
+ "--videoframe-frame-border": "--border-neutral",
4030
+ "--videoframe-frame-border-width": "--border-width-1",
4031
+ "--videoframe-frame-radius": "--radius-4xl",
4032
+ "--videoframe-badge-default-surface": "--surface-brand-lower",
4033
+ "--videoframe-badge-default-border": "--border-brand-medium",
4034
+ "--videoframe-badge-default-border-width": "--border-width-2",
4035
+ "--videoframe-badge-default-icon": "--text-primary",
4036
+ "--videoframe-badge-default-size": "--space-64",
4037
+ "--videoframe-badge-default-icon-size": "--icon-size-4xl",
4038
+ "--videoframe-badge-duration": "--duration-200",
4039
+ "--videoframe-badge-easing": "--ease-out-quad",
4040
+ "--videoframe-badge-hover-surface": "--surface-brand",
4041
+ "--videoframe-badge-hover-border": "--border-brand-strong",
4042
+ "--videoframe-badge-hover-icon": "--text-primary"
4043
+ }
4044
+ },
4045
+ "slidepager": {
4046
+ "name": "autumn",
4047
+ "component": "slidepager",
4048
+ "createdAt": "2026-09-21T18:00:00.000Z",
4049
+ "updatedAt": "2026-09-21T18:00:00.000Z",
4050
+ "aliases": {
4051
+ "--slidepager-frame-surface": "--surface-neutral-lower",
4052
+ "--slidepager-frame-border": "--border-neutral-subtle",
4053
+ "--slidepager-frame-border-width": "--border-width-1",
4054
+ "--slidepager-frame-radius": "--radius-4xl",
4055
+ "--slidepager-frame-shadow": "--shadow-md",
4056
+ "--slidepager-bar-gap": "--space-16",
4057
+ "--slidepager-bar-padding": "--space-12",
4058
+ "--slidepager-control-surface": "--surface-neutral-low",
4059
+ "--slidepager-control-border": "--border-neutral",
4060
+ "--slidepager-control-border-width": "--border-width-1",
4061
+ "--slidepager-control-radius": "--radius-full",
4062
+ "--slidepager-control-size": "--space-40",
4063
+ "--slidepager-control-icon": "--text-primary",
4064
+ "--slidepager-control-icon-size": "--icon-size-md",
4065
+ "--slidepager-control-hover-surface": "--surface-brand-high",
4066
+ "--slidepager-control-hover-border": "--border-brand",
4067
+ "--slidepager-control-hover-icon": "--text-inverted",
4068
+ "--slidepager-control-disabled-surface": "--surface-neutral-lower",
4069
+ "--slidepager-control-disabled-border": "--border-neutral-subtle",
4070
+ "--slidepager-control-disabled-icon": "--text-disabled",
4071
+ "--slidepager-counter-text": "--text-secondary",
4072
+ "--slidepager-counter-font-family": "--font-sans",
4073
+ "--slidepager-counter-font-size": "--font-size-lg",
4074
+ "--slidepager-counter-font-weight": "--font-weight-medium",
4075
+ "--slidepager-counter-line-height": "--line-height-normal",
4076
+ "--slidepager-counter-letter-spacing": "--letter-spacing-normal",
4077
+ "--slidepager-scrim-surface": "--scrim-high",
4078
+ "--slidepager-overlay-padding": "--space-64",
4079
+ "--slidepager-close-margin": "--space-24",
4080
+ "--slidepager-overlay-duration": "--duration-300",
4081
+ "--slidepager-overlay-easing": "--ease-out-quad"
4082
+ }
3997
4083
  }
3998
4084
  },
3999
- "componentSchemaVersion": 37
4085
+ "componentSchemaVersion": 38
4000
4086
  }
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",
@@ -4033,7 +4033,93 @@
4033
4033
  "--slider-value-font-weight": "--font-weight-normal",
4034
4034
  "--slider-value-line-height": "--line-height-normal"
4035
4035
  }
4036
+ },
4037
+ "videolightbox": {
4038
+ "name": "halloween",
4039
+ "component": "videolightbox",
4040
+ "createdAt": "2026-09-21T17:00:00.000Z",
4041
+ "updatedAt": "2026-09-21T17:00:00.000Z",
4042
+ "aliases": {
4043
+ "--videolightbox-tile-surface": "--color-transparent",
4044
+ "--videolightbox-tile-border": "--color-transparent",
4045
+ "--videolightbox-tile-border-width": "--border-width-2",
4046
+ "--videolightbox-tile-radius": "--radius-none",
4047
+ "--videolightbox-tile-shadow": "--shadow-md",
4048
+ "--videolightbox-scrim-surface": "--scrim-high",
4049
+ "--videolightbox-overlay-padding": "--space-64",
4050
+ "--videolightbox-overlay-duration": "--duration-500",
4051
+ "--videolightbox-overlay-easing": "--ease-out-quad",
4052
+ "--videolightbox-chrome-surface": "--surface-neutral-low",
4053
+ "--videolightbox-chrome-border": "--border-brand",
4054
+ "--videolightbox-chrome-border-width": "--border-width-3",
4055
+ "--videolightbox-chrome-radius": "--radius-none",
4056
+ "--videolightbox-chrome-icon": "--text-primary",
4057
+ "--videolightbox-chrome-hover-surface": "--surface-brand-high"
4058
+ }
4059
+ },
4060
+ "videoframe": {
4061
+ "name": "halloween",
4062
+ "component": "videoframe",
4063
+ "createdAt": "2026-09-21T18:00:00.000Z",
4064
+ "updatedAt": "2026-09-21T18:00:00.000Z",
4065
+ "aliases": {
4066
+ "--videoframe-frame-surface": "--surface-neutral-lowest",
4067
+ "--videoframe-clip-surface": "--color-transparent",
4068
+ "--videoframe-frame-border": "--border-neutral",
4069
+ "--videoframe-frame-border-width": "--border-width-3",
4070
+ "--videoframe-frame-radius": "--radius-none",
4071
+ "--videoframe-badge-default-surface": "--surface-brand-lower",
4072
+ "--videoframe-badge-default-border": "--border-brand-medium",
4073
+ "--videoframe-badge-default-border-width": "--border-width-2",
4074
+ "--videoframe-badge-default-icon": "--text-primary",
4075
+ "--videoframe-badge-default-size": "--space-64",
4076
+ "--videoframe-badge-default-icon-size": "--icon-size-4xl",
4077
+ "--videoframe-badge-duration": "--duration-200",
4078
+ "--videoframe-badge-easing": "--ease-out-quad",
4079
+ "--videoframe-badge-hover-surface": "--surface-brand",
4080
+ "--videoframe-badge-hover-border": "--border-brand-strong",
4081
+ "--videoframe-badge-hover-icon": "--text-primary"
4082
+ }
4083
+ },
4084
+ "slidepager": {
4085
+ "name": "halloween",
4086
+ "component": "slidepager",
4087
+ "createdAt": "2026-09-21T18:00:00.000Z",
4088
+ "updatedAt": "2026-09-21T18:00:00.000Z",
4089
+ "aliases": {
4090
+ "--slidepager-frame-surface": "--surface-neutral-lower",
4091
+ "--slidepager-frame-border": "--border-neutral-subtle",
4092
+ "--slidepager-frame-border-width": "--border-width-3",
4093
+ "--slidepager-frame-radius": "--radius-none",
4094
+ "--slidepager-frame-shadow": "--shadow-md",
4095
+ "--slidepager-bar-gap": "--space-16",
4096
+ "--slidepager-bar-padding": "--space-12",
4097
+ "--slidepager-control-surface": "--surface-neutral-low",
4098
+ "--slidepager-control-border": "--border-neutral",
4099
+ "--slidepager-control-border-width": "--border-width-3",
4100
+ "--slidepager-control-radius": "--radius-none",
4101
+ "--slidepager-control-size": "--space-40",
4102
+ "--slidepager-control-icon": "--text-primary",
4103
+ "--slidepager-control-icon-size": "--icon-size-md",
4104
+ "--slidepager-control-hover-surface": "--surface-brand-high",
4105
+ "--slidepager-control-hover-border": "--border-brand",
4106
+ "--slidepager-control-hover-icon": "--text-inverted",
4107
+ "--slidepager-control-disabled-surface": "--surface-neutral-lower",
4108
+ "--slidepager-control-disabled-border": "--border-neutral-subtle",
4109
+ "--slidepager-control-disabled-icon": "--text-disabled",
4110
+ "--slidepager-counter-text": "--text-secondary",
4111
+ "--slidepager-counter-font-family": "--font-sans",
4112
+ "--slidepager-counter-font-size": "--font-size-lg",
4113
+ "--slidepager-counter-font-weight": "--font-weight-medium",
4114
+ "--slidepager-counter-line-height": "--line-height-normal",
4115
+ "--slidepager-counter-letter-spacing": "--letter-spacing-normal",
4116
+ "--slidepager-scrim-surface": "--scrim-high",
4117
+ "--slidepager-overlay-padding": "--space-64",
4118
+ "--slidepager-close-margin": "--space-24",
4119
+ "--slidepager-overlay-duration": "--duration-300",
4120
+ "--slidepager-overlay-easing": "--ease-out-quad"
4121
+ }
4036
4122
  }
4037
4123
  },
4038
- "componentSchemaVersion": 37
4124
+ "componentSchemaVersion": 38
4039
4125
  }