@motion-proto/live-tokens 0.68.1 → 0.69.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 (93) hide show
  1. package/.claude/skills/live-tokens-build-page/SKILL.md +16 -5
  2. package/.claude/skills/live-tokens-create-component/SKILL.md +43 -8
  3. package/.claude/skills/live-tokens-create-component/references/token-naming.md +30 -1
  4. package/.claude/skills/live-tokens-fix-findings/SKILL.md +131 -0
  5. package/.claude/skills/live-tokens-pick-component/SKILL.md +2 -1
  6. package/CHANGELOG.md +207 -0
  7. package/README.md +11 -4
  8. package/bin/check-component.mjs +367 -63
  9. package/bin/check-page.mjs +409 -0
  10. package/bin/cli.mjs +57 -8
  11. package/bin/lib/cssValues.mjs +50 -0
  12. package/bin/lib/findings.mjs +106 -0
  13. package/bin/lib/tokenVocabulary.mjs +213 -0
  14. package/dist-plugin/adjust/index.cjs +174 -23
  15. package/dist-plugin/adjust/index.js +68 -23
  16. package/dist-plugin/{chunk-2UX6EVVA.js → chunk-2YNERPXY.js} +1 -1
  17. package/dist-plugin/{chunk-NE6N66EE.js → chunk-GPIBU44G.js} +107 -1
  18. package/dist-plugin/{chunk-ZHPX7ZYQ.js → chunk-RFVYPNRO.js} +39 -1
  19. package/dist-plugin/generateColorsAndType/index.cjs +107 -1
  20. package/dist-plugin/generateColorsAndType/index.js +1 -1
  21. package/dist-plugin/index.cjs +146 -2
  22. package/dist-plugin/index.js +3 -3
  23. package/dist-plugin/migrateData/index.cjs +107 -1
  24. package/dist-plugin/migrateData/index.js +2 -2
  25. package/dist-plugin/tokensCssMigrations/index.cjs +39 -1
  26. package/dist-plugin/tokensCssMigrations/index.js +1 -1
  27. package/package.json +3 -2
  28. package/src/app/site.css +4 -4
  29. package/src/editor/component-editor/ButtonEditor.svelte +71 -4
  30. package/src/editor/component-editor/CardEditor.svelte +6 -6
  31. package/src/editor/component-editor/DialogEditor.svelte +3 -3
  32. package/src/editor/component-editor/IconButtonEditor.svelte +68 -3
  33. package/src/editor/component-editor/ImageEditor.svelte +8 -8
  34. package/src/editor/component-editor/ImageLightboxEditor.svelte +12 -1
  35. package/src/editor/component-editor/MenuSelectEditor.svelte +63 -3
  36. package/src/editor/component-editor/SegmentedControlEditor.svelte +63 -3
  37. package/src/editor/component-editor/SideNavigationEditor.svelte +67 -3
  38. package/src/editor/component-editor/SliderEditor.svelte +186 -0
  39. package/src/editor/component-editor/TabBarEditor.svelte +63 -3
  40. package/src/editor/component-editor/registry.ts +10 -0
  41. package/src/editor/core/components/aliasKinds.ts +51 -28
  42. package/src/editor/core/sketch/sketchLayer.ts +16 -0
  43. package/src/editor/core/store/editorPersistence.ts +44 -1
  44. package/src/editor/core/store/editorRenderer.ts +2 -2
  45. package/src/editor/core/store/editorStore.ts +18 -18
  46. package/src/editor/core/store/editorTypes.ts +7 -6
  47. package/src/editor/core/themes/migrations/2026-09-01-gate-suffix-enabled.ts +31 -0
  48. package/src/editor/core/themes/migrations/2026-09-01-scrim-rename.ts +52 -0
  49. package/src/editor/core/themes/migrations/2026-09-01-tabbar-active-tint.ts +27 -0
  50. package/src/editor/core/themes/migrations/2026-09-01-tint-rename.ts +42 -0
  51. package/src/editor/core/themes/migrations/index.ts +16 -0
  52. package/src/editor/core/themes/slices/domainVars.ts +2 -2
  53. package/src/editor/core/themes/slices/washes.ts +107 -0
  54. package/src/editor/docs/content/editing-tokens.md +5 -3
  55. package/src/editor/docs/content.generated.ts +1 -1
  56. package/src/editor/pages/EditorShell.svelte +1 -1
  57. package/src/editor/ui/SurfacesTab.svelte +3 -3
  58. package/src/editor/ui/UITokenSelector.svelte +1 -0
  59. package/src/editor/ui/VariablesTab.svelte +2 -2
  60. package/src/editor/ui/sections/{OverlaysSection.svelte → WashesSection.svelte} +44 -43
  61. package/src/live-tokens/data/colors-and-type/autumn.json +6 -6
  62. package/src/live-tokens/data/colors-and-type/default.json +6 -6
  63. package/src/live-tokens/data/colors-and-type/halloween.json +6 -6
  64. package/src/live-tokens/data/colors-and-type/midnight-study.json +6 -6
  65. package/src/live-tokens/data/colors-and-type/ocean.json +6 -6
  66. package/src/live-tokens/data/colors-and-type/royal-velvet.json +6 -6
  67. package/src/live-tokens/data/colors-and-type/sketchy.json +6 -6
  68. package/src/live-tokens/data/colors-and-type/spring-meadow.json +6 -6
  69. package/src/live-tokens/data/colors-and-type/sunset.json +6 -6
  70. package/src/live-tokens/data/themes/autumn.json +81 -13
  71. package/src/live-tokens/data/themes/halloween.json +81 -13
  72. package/src/live-tokens/data/themes/midnight-study.json +81 -13
  73. package/src/live-tokens/data/themes/ocean.json +81 -13
  74. package/src/live-tokens/data/themes/royal-velvet.json +81 -13
  75. package/src/live-tokens/data/themes/sketchy.json +81 -13
  76. package/src/live-tokens/data/themes/spring-meadow.json +81 -13
  77. package/src/live-tokens/data/themes/sunset.json +81 -13
  78. package/src/live-tokens/data/tokens.generated.css +6 -6
  79. package/src/system/components/Button.svelte +28 -10
  80. package/src/system/components/Card.svelte +6 -6
  81. package/src/system/components/Dialog.svelte +3 -3
  82. package/src/system/components/IconButton.svelte +23 -7
  83. package/src/system/components/Image.svelte +6 -6
  84. package/src/system/components/MenuSelect.svelte +17 -1
  85. package/src/system/components/SegmentedControl.svelte +20 -2
  86. package/src/system/components/SideNavigation.svelte +22 -2
  87. package/src/system/components/Slider.svelte +348 -0
  88. package/src/system/components/TabBar.svelte +20 -2
  89. package/src/system/styles/CONVENTIONS.md +2 -2
  90. package/src/system/styles/tokens.css +12 -4
  91. package/template/package.json +3 -2
  92. package/template/src/pages/Home.svelte +1 -1
  93. package/src/editor/core/themes/slices/overlays.ts +0 -101
package/src/live-tokens/data/colors-and-type/default.json CHANGED
@@ -2290,12 +2290,12 @@
2290
2290
  "--columns-max-width": "1440px",
2291
2291
  "--columns-gutter": "32px",
2292
2292
  "--columns-margin": "0px",
2293
- "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2294
- "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2295
- "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2296
- "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2297
- "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2298
- "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2293
+ "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2294
+ "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2295
+ "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2296
+ "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2297
+ "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2298
+ "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2299
2299
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
2300
2300
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
2301
2301
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
package/src/live-tokens/data/colors-and-type/halloween.json CHANGED
@@ -2306,12 +2306,12 @@
2306
2306
  "--columns-max-width": "1440px",
2307
2307
  "--columns-gutter": "32px",
2308
2308
  "--columns-margin": "0px",
2309
- "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2310
- "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2311
- "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2312
- "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2313
- "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2314
- "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2309
+ "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2310
+ "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2311
+ "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2312
+ "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2313
+ "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2314
+ "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2315
2315
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
2316
2316
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
2317
2317
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
package/src/live-tokens/data/colors-and-type/midnight-study.json CHANGED
@@ -2302,12 +2302,12 @@
2302
2302
  "--columns-max-width": "1440px",
2303
2303
  "--columns-gutter": "32px",
2304
2304
  "--columns-margin": "0px",
2305
- "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2306
- "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2307
- "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2308
- "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2309
- "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2310
- "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2305
+ "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2306
+ "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2307
+ "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2308
+ "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2309
+ "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2310
+ "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2311
2311
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
2312
2312
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
2313
2313
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
package/src/live-tokens/data/colors-and-type/ocean.json CHANGED
@@ -2259,12 +2259,12 @@
2259
2259
  "--columns-max-width": "1440px",
2260
2260
  "--columns-gutter": "32px",
2261
2261
  "--columns-margin": "0px",
2262
- "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2263
- "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2264
- "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2265
- "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2266
- "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2267
- "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2262
+ "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2263
+ "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2264
+ "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2265
+ "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2266
+ "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2267
+ "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2268
2268
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.2)",
2269
2269
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.2)",
2270
2270
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.2)",
package/src/live-tokens/data/colors-and-type/royal-velvet.json CHANGED
@@ -2291,12 +2291,12 @@
2291
2291
  "--columns-max-width": "1440px",
2292
2292
  "--columns-gutter": "32px",
2293
2293
  "--columns-margin": "0px",
2294
- "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2295
- "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2296
- "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2297
- "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2298
- "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2299
- "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2294
+ "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2295
+ "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2296
+ "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2297
+ "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2298
+ "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2299
+ "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2300
2300
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
2301
2301
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
2302
2302
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
package/src/live-tokens/data/colors-and-type/sketchy.json CHANGED
@@ -2245,12 +2245,12 @@
2245
2245
  "--columns-max-width": "1440px",
2246
2246
  "--columns-gutter": "32px",
2247
2247
  "--columns-margin": "0px",
2248
- "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2249
- "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2250
- "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2251
- "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2252
- "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2253
- "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2248
+ "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2249
+ "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2250
+ "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2251
+ "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2252
+ "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2253
+ "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2254
2254
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.2)",
2255
2255
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.2)",
2256
2256
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.2)",
package/src/live-tokens/data/colors-and-type/spring-meadow.json CHANGED
@@ -2245,12 +2245,12 @@
2245
2245
  "--columns-max-width": "1440px",
2246
2246
  "--columns-gutter": "32px",
2247
2247
  "--columns-margin": "0px",
2248
- "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2249
- "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2250
- "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2251
- "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2252
- "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2253
- "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2248
+ "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2249
+ "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2250
+ "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2251
+ "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2252
+ "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2253
+ "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2254
2254
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.2)",
2255
2255
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.2)",
2256
2256
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.2)",
package/src/live-tokens/data/colors-and-type/sunset.json CHANGED
@@ -2306,12 +2306,12 @@
2306
2306
  "--columns-max-width": "1440px",
2307
2307
  "--columns-gutter": "32px",
2308
2308
  "--columns-margin": "0px",
2309
- "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2310
- "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2311
- "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2312
- "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2313
- "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2314
- "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2309
+ "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2310
+ "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2311
+ "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2312
+ "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2313
+ "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2314
+ "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2315
2315
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
2316
2316
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
2317
2317
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
package/src/live-tokens/data/themes/autumn.json CHANGED
@@ -2264,12 +2264,12 @@
2264
2264
  "--columns-max-width": "1440px",
2265
2265
  "--columns-gutter": "32px",
2266
2266
  "--columns-margin": "0px",
2267
- "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2268
- "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2269
- "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2270
- "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2271
- "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2272
- "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2267
+ "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2268
+ "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2269
+ "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2270
+ "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2271
+ "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2272
+ "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2273
2273
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.25)",
2274
2274
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.25)",
2275
2275
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.25)",
@@ -2655,6 +2655,9 @@
2655
2655
  "createdAt": "2026-05-10T19:28:06.893Z",
2656
2656
  "updatedAt": "2026-08-19T22:39:32.785Z",
2657
2657
  "aliases": {
2658
+ "--button-hover-tint": "--tint",
2659
+ "--button-hover-tint-enabled": "--color-transparent",
2660
+ "--button-shimmer": "--shimmer-on",
2658
2661
  "--button-primary-surface": "--surface-brand",
2659
2662
  "--button-primary-text": "--text-primary",
2660
2663
  "--button-primary-text-font-family": "--font-sans",
@@ -2702,7 +2705,7 @@
2702
2705
  "--button-outline-hover-surface": "--surface-neutral-lower",
2703
2706
  "--button-outline-hover-text": "--text-primary",
2704
2707
  "--button-outline-hover-border": "--border-neutral-strong",
2705
- "--button-outline-active-surface": "--hover",
2708
+ "--button-outline-active-surface": "--tint",
2706
2709
  "--button-outline-disabled-surface": "--color-transparent",
2707
2710
  "--button-outline-disabled-text": "--text-tertiary",
2708
2711
  "--button-outline-disabled-border": "--border-neutral-faint",
@@ -2874,8 +2877,8 @@
2874
2877
  "--card-default-body-line-height": "--line-height-normal",
2875
2878
  "--card-hover-border": "--border-neutral-strong",
2876
2879
  "--card-hover-shadow": "--shadow-md",
2877
- "--card-hover-border-active": "--card-default-border",
2878
- "--card-hover-shadow-active": "--card-default-shadow"
2880
+ "--card-hover-border-enabled": "--card-default-border",
2881
+ "--card-hover-shadow-enabled": "--card-default-shadow"
2879
2882
  }
2880
2883
  },
2881
2884
  "codesnippet": {
@@ -3029,7 +3032,7 @@
3029
3032
  "createdAt": "2026-05-10T20:05:24.719Z",
3030
3033
  "updatedAt": "2026-08-19T22:39:32.785Z",
3031
3034
  "aliases": {
3032
- "--dialog-overlay-surface": "--overlay-high",
3035
+ "--dialog-scrim-surface": "--scrim-high",
3033
3036
  "--dialog-surface": "--surface-neutral-lowest",
3034
3037
  "--dialog-border": "--border-neutral-strong",
3035
3038
  "--dialog-border-width": "--border-width-2",
@@ -3064,6 +3067,8 @@
3064
3067
  "createdAt": "2026-06-14T00:00:00.000Z",
3065
3068
  "updatedAt": "2026-08-19T22:39:32.785Z",
3066
3069
  "aliases": {
3070
+ "--iconbutton-hover-tint": "--tint",
3071
+ "--iconbutton-hover-tint-enabled": "--color-transparent",
3067
3072
  "--iconbutton-primary-surface": "--surface-brand",
3068
3073
  "--iconbutton-primary-icon": "--text-primary",
3069
3074
  "--iconbutton-primary-border": "--border-brand",
@@ -3100,7 +3105,7 @@
3100
3105
  "--iconbutton-outline-hover-surface": "--surface-neutral-lower",
3101
3106
  "--iconbutton-outline-hover-icon": "--text-primary",
3102
3107
  "--iconbutton-outline-hover-border": "--border-neutral-strong",
3103
- "--iconbutton-outline-active-surface": "--hover",
3108
+ "--iconbutton-outline-active-surface": "--tint",
3104
3109
  "--iconbutton-outline-disabled-surface": "--color-transparent",
3105
3110
  "--iconbutton-outline-disabled-icon": "--text-tertiary",
3106
3111
  "--iconbutton-outline-disabled-border": "--border-neutral-faint",
@@ -3280,6 +3285,8 @@
3280
3285
  "createdAt": "2026-05-16T00:00:00.000Z",
3281
3286
  "updatedAt": "2026-08-19T22:39:32.785Z",
3282
3287
  "aliases": {
3288
+ "--menuselect-hover-tint": "--tint",
3289
+ "--menuselect-hover-tint-enabled": "--color-transparent",
3283
3290
  "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 95%, transparent)",
3284
3291
  "--menuselect-menu-border": "--border-neutral-medium",
3285
3292
  "--menuselect-menu-border-width": "--border-width-1",
@@ -3598,6 +3605,8 @@
3598
3605
  "createdAt": "2026-04-28T21:13:17.669Z",
3599
3606
  "updatedAt": "2026-08-19T22:39:32.785Z",
3600
3607
  "aliases": {
3608
+ "--segmentedcontrol-hover-tint": "--tint",
3609
+ "--segmentedcontrol-hover-tint-enabled": "--color-transparent",
3601
3610
  "--segmentedcontrol-bar-surface": "color-mix(in srgb, var(--surface-neutral-lowest) 75%, transparent)",
3602
3611
  "--segmentedcontrol-bar-border": "--border-neutral",
3603
3612
  "--segmentedcontrol-bar-border-width": "--border-width-1",
@@ -3658,6 +3667,8 @@
3658
3667
  "createdAt": "2026-05-25T19:34:09.771Z",
3659
3668
  "updatedAt": "2026-08-19T22:39:32.785Z",
3660
3669
  "aliases": {
3670
+ "--sidenavigation-hover-tint": "--tint",
3671
+ "--sidenavigation-hover-tint-enabled": "--color-transparent",
3661
3672
  "--sidenavigation-panel-surface": "--surface-canvas-lower",
3662
3673
  "--sidenavigation-panel-border": "--border-canvas-faint",
3663
3674
  "--sidenavigation-panel-border-width": "--border-width-1",
@@ -3818,6 +3829,8 @@
3818
3829
  "createdAt": "2026-05-12T01:57:26.390Z",
3819
3830
  "updatedAt": "2026-08-19T22:39:32.785Z",
3820
3831
  "aliases": {
3832
+ "--tabbar-hover-tint": "--tint",
3833
+ "--tabbar-hover-tint-enabled": "--color-transparent",
3821
3834
  "--tabbar-bar-divider": "--border-neutral-subtle",
3822
3835
  "--tabbar-bar-divider-thickness": "--border-width-1",
3823
3836
  "--tabbar-bar-top-margin": "--space-4",
@@ -3854,7 +3867,7 @@
3854
3867
  "--tabbar-hover-indicator-border-width": "--border-width-2",
3855
3868
  "--tabbar-active-text": "--text-primary",
3856
3869
  "--tabbar-active-border": "--color-brand-500",
3857
- "--tabbar-active-surface": "--overlay-low",
3870
+ "--tabbar-active-surface": "--tint-low",
3858
3871
  "--tabbar-active-text-font-family": "--font-sans",
3859
3872
  "--tabbar-active-text-font-size": "--font-size-md",
3860
3873
  "--tabbar-active-text-font-weight": "--font-weight-light",
@@ -3966,7 +3979,62 @@
3966
3979
  "--tooltip-padding": "--space-10",
3967
3980
  "--tooltip-shadow": "--shadow-md"
3968
3981
  }
3982
+ },
3983
+ "slider": {
3984
+ "name": "autumn",
3985
+ "component": "slider",
3986
+ "createdAt": "2026-09-02T10:55:50.831Z",
3987
+ "updatedAt": "2026-09-02T10:55:50.831Z",
3988
+ "aliases": {
3989
+ "--slider-single-track-surface": "--surface-neutral-lowest",
3990
+ "--slider-single-track-border": "--border-neutral-subtle",
3991
+ "--slider-single-track-border-width": "--border-width-1",
3992
+ "--slider-single-track-height": "--space-8",
3993
+ "--slider-single-track-radius": "--radius-full",
3994
+ "--slider-single-fill": "--surface-brand-high",
3995
+ "--slider-single-thumb-surface": "--surface-neutral-highest",
3996
+ "--slider-single-thumb-border": "--border-brand",
3997
+ "--slider-single-thumb-border-width": "--border-width-2",
3998
+ "--slider-single-thumb-size": "--font-size-lg",
3999
+ "--slider-single-thumb-radius": "--radius-full",
4000
+ "--slider-single-thumb-shadow": "--shadow-sm",
4001
+ "--slider-single-hover-thumb-surface": "--surface-brand-high",
4002
+ "--slider-single-hover-thumb-border": "--border-brand-strong",
4003
+ "--slider-single-disabled-track-surface": "--surface-neutral-lower",
4004
+ "--slider-single-disabled-fill": "--surface-neutral",
4005
+ "--slider-single-disabled-thumb-surface": "--surface-neutral-lower",
4006
+ "--slider-single-disabled-thumb-border": "--border-neutral",
4007
+ "--slider-range-track-surface": "--surface-neutral-lowest",
4008
+ "--slider-range-track-border": "--border-neutral-subtle",
4009
+ "--slider-range-track-border-width": "--border-width-1",
4010
+ "--slider-range-track-height": "--space-8",
4011
+ "--slider-range-track-radius": "--radius-full",
4012
+ "--slider-range-fill": "--surface-brand-high",
4013
+ "--slider-range-thumb-surface": "--surface-neutral-highest",
4014
+ "--slider-range-thumb-border": "--border-brand",
4015
+ "--slider-range-thumb-border-width": "--border-width-2",
4016
+ "--slider-range-thumb-size": "--font-size-lg",
4017
+ "--slider-range-thumb-radius": "--radius-full",
4018
+ "--slider-range-thumb-shadow": "--shadow-sm",
4019
+ "--slider-range-hover-thumb-surface": "--surface-brand-high",
4020
+ "--slider-range-hover-thumb-border": "--border-brand-strong",
4021
+ "--slider-range-disabled-track-surface": "--surface-neutral-lower",
4022
+ "--slider-range-disabled-fill": "--surface-neutral",
4023
+ "--slider-range-disabled-thumb-surface": "--surface-neutral-lower",
4024
+ "--slider-range-disabled-thumb-border": "--border-neutral",
4025
+ "--slider-label-gap": "--space-6",
4026
+ "--slider-label": "--text-secondary",
4027
+ "--slider-label-font-family": "--font-sans",
4028
+ "--slider-label-font-size": "--font-size-md",
4029
+ "--slider-label-font-weight": "--font-weight-normal",
4030
+ "--slider-label-line-height": "--line-height-normal",
4031
+ "--slider-value": "--text-tertiary",
4032
+ "--slider-value-font-family": "--font-mono",
4033
+ "--slider-value-font-size": "--font-size-md",
4034
+ "--slider-value-font-weight": "--font-weight-normal",
4035
+ "--slider-value-line-height": "--line-height-normal"
4036
+ }
3969
4037
  }
3970
4038
  },
3971
- "componentSchemaVersion": 21
4039
+ "componentSchemaVersion": 25
3972
4040
  }
package/src/live-tokens/data/themes/halloween.json CHANGED
@@ -2311,12 +2311,12 @@
2311
2311
  "--columns-max-width": "1440px",
2312
2312
  "--columns-gutter": "32px",
2313
2313
  "--columns-margin": "0px",
2314
- "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2315
- "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2316
- "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2317
- "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2318
- "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2319
- "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2314
+ "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2315
+ "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2316
+ "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2317
+ "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2318
+ "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2319
+ "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2320
2320
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
2321
2321
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
2322
2322
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
@@ -2694,6 +2694,9 @@
2694
2694
  "createdAt": "2026-05-10T19:28:06.893Z",
2695
2695
  "updatedAt": "2026-08-19T22:39:32.785Z",
2696
2696
  "aliases": {
2697
+ "--button-hover-tint": "--tint",
2698
+ "--button-hover-tint-enabled": "--color-transparent",
2699
+ "--button-shimmer": "--shimmer-on",
2697
2700
  "--button-primary-surface": "--surface-brand",
2698
2701
  "--button-primary-text": "--text-primary",
2699
2702
  "--button-primary-text-font-family": "--font-sans",
@@ -2741,7 +2744,7 @@
2741
2744
  "--button-outline-hover-surface": "--surface-neutral-lower",
2742
2745
  "--button-outline-hover-text": "--text-primary",
2743
2746
  "--button-outline-hover-border": "--border-neutral-strong",
2744
- "--button-outline-active-surface": "--hover",
2747
+ "--button-outline-active-surface": "--tint",
2745
2748
  "--button-outline-disabled-surface": "--color-transparent",
2746
2749
  "--button-outline-disabled-text": "--text-tertiary",
2747
2750
  "--button-outline-disabled-border": "--border-neutral-faint",
@@ -2913,8 +2916,8 @@
2913
2916
  "--card-default-body-line-height": "--line-height-normal",
2914
2917
  "--card-hover-border": "--border-neutral-strong",
2915
2918
  "--card-hover-shadow": "--shadow-md",
2916
- "--card-hover-border-active": "--card-default-border",
2917
- "--card-hover-shadow-active": "--card-default-shadow"
2919
+ "--card-hover-border-enabled": "--card-default-border",
2920
+ "--card-hover-shadow-enabled": "--card-default-shadow"
2918
2921
  }
2919
2922
  },
2920
2923
  "codesnippet": {
@@ -3068,7 +3071,7 @@
3068
3071
  "createdAt": "2026-05-10T20:05:24.719Z",
3069
3072
  "updatedAt": "2026-08-19T22:39:32.785Z",
3070
3073
  "aliases": {
3071
- "--dialog-overlay-surface": "--overlay-high",
3074
+ "--dialog-scrim-surface": "--scrim-high",
3072
3075
  "--dialog-surface": "--surface-neutral-lowest",
3073
3076
  "--dialog-border": "--border-neutral-strong",
3074
3077
  "--dialog-border-width": "--border-width-4",
@@ -3103,6 +3106,8 @@
3103
3106
  "createdAt": "2026-06-14T00:00:00.000Z",
3104
3107
  "updatedAt": "2026-08-19T22:39:32.785Z",
3105
3108
  "aliases": {
3109
+ "--iconbutton-hover-tint": "--tint",
3110
+ "--iconbutton-hover-tint-enabled": "--color-transparent",
3106
3111
  "--iconbutton-primary-surface": "--surface-brand",
3107
3112
  "--iconbutton-primary-icon": "--text-primary",
3108
3113
  "--iconbutton-primary-border": "--border-brand",
@@ -3139,7 +3144,7 @@
3139
3144
  "--iconbutton-outline-hover-surface": "--surface-neutral-lower",
3140
3145
  "--iconbutton-outline-hover-icon": "--text-primary",
3141
3146
  "--iconbutton-outline-hover-border": "--border-neutral-strong",
3142
- "--iconbutton-outline-active-surface": "--hover",
3147
+ "--iconbutton-outline-active-surface": "--tint",
3143
3148
  "--iconbutton-outline-disabled-surface": "--color-transparent",
3144
3149
  "--iconbutton-outline-disabled-icon": "--text-tertiary",
3145
3150
  "--iconbutton-outline-disabled-border": "--border-neutral-faint",
@@ -3319,6 +3324,8 @@
3319
3324
  "createdAt": "2026-05-16T00:00:00.000Z",
3320
3325
  "updatedAt": "2026-08-19T22:39:32.785Z",
3321
3326
  "aliases": {
3327
+ "--menuselect-hover-tint": "--tint",
3328
+ "--menuselect-hover-tint-enabled": "--color-transparent",
3322
3329
  "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 95%, transparent)",
3323
3330
  "--menuselect-menu-border": "--border-neutral-medium",
3324
3331
  "--menuselect-menu-border-width": "--border-width-3",
@@ -3637,6 +3644,8 @@
3637
3644
  "createdAt": "2026-04-28T21:13:17.669Z",
3638
3645
  "updatedAt": "2026-08-19T22:39:32.785Z",
3639
3646
  "aliases": {
3647
+ "--segmentedcontrol-hover-tint": "--tint",
3648
+ "--segmentedcontrol-hover-tint-enabled": "--color-transparent",
3640
3649
  "--segmentedcontrol-bar-surface": "color-mix(in srgb, var(--surface-neutral-lowest) 75%, transparent)",
3641
3650
  "--segmentedcontrol-bar-border": "--border-neutral",
3642
3651
  "--segmentedcontrol-bar-border-width": "--border-width-3",
@@ -3697,6 +3706,8 @@
3697
3706
  "createdAt": "2026-05-25T19:34:09.771Z",
3698
3707
  "updatedAt": "2026-08-19T22:39:32.785Z",
3699
3708
  "aliases": {
3709
+ "--sidenavigation-hover-tint": "--tint",
3710
+ "--sidenavigation-hover-tint-enabled": "--color-transparent",
3700
3711
  "--sidenavigation-panel-surface": "--surface-canvas-lower",
3701
3712
  "--sidenavigation-panel-border": "--border-canvas-faint",
3702
3713
  "--sidenavigation-panel-border-width": "--border-width-3",
@@ -3857,6 +3868,8 @@
3857
3868
  "createdAt": "2026-05-12T01:57:26.390Z",
3858
3869
  "updatedAt": "2026-08-19T22:39:32.785Z",
3859
3870
  "aliases": {
3871
+ "--tabbar-hover-tint": "--tint",
3872
+ "--tabbar-hover-tint-enabled": "--color-transparent",
3860
3873
  "--tabbar-bar-divider": "--border-neutral-subtle",
3861
3874
  "--tabbar-bar-divider-thickness": "--border-width-1",
3862
3875
  "--tabbar-bar-top-margin": "--space-0",
@@ -3893,7 +3906,7 @@
3893
3906
  "--tabbar-hover-indicator-border-width": "--border-width-4",
3894
3907
  "--tabbar-active-text": "--text-primary",
3895
3908
  "--tabbar-active-border": "--color-brand-500",
3896
- "--tabbar-active-surface": "--overlay-low",
3909
+ "--tabbar-active-surface": "--tint-low",
3897
3910
  "--tabbar-active-text-font-family": "--font-sans",
3898
3911
  "--tabbar-active-text-font-size": "--font-size-md",
3899
3912
  "--tabbar-active-text-font-weight": "--font-weight-light",
@@ -4005,7 +4018,62 @@
4005
4018
  "--tooltip-padding": "--space-4",
4006
4019
  "--tooltip-shadow": "--shadow-md"
4007
4020
  }
4021
+ },
4022
+ "slider": {
4023
+ "name": "halloween",
4024
+ "component": "slider",
4025
+ "createdAt": "2026-09-02T10:55:50.831Z",
4026
+ "updatedAt": "2026-09-02T10:55:50.831Z",
4027
+ "aliases": {
4028
+ "--slider-single-track-surface": "--surface-neutral-lowest",
4029
+ "--slider-single-track-border": "--border-neutral-subtle",
4030
+ "--slider-single-track-border-width": "--border-width-1",
4031
+ "--slider-single-track-height": "--space-8",
4032
+ "--slider-single-track-radius": "--radius-full",
4033
+ "--slider-single-fill": "--surface-brand-high",
4034
+ "--slider-single-thumb-surface": "--surface-neutral-highest",
4035
+ "--slider-single-thumb-border": "--border-brand",
4036
+ "--slider-single-thumb-border-width": "--border-width-2",
4037
+ "--slider-single-thumb-size": "--font-size-lg",
4038
+ "--slider-single-thumb-radius": "--radius-full",
4039
+ "--slider-single-thumb-shadow": "--shadow-sm",
4040
+ "--slider-single-hover-thumb-surface": "--surface-brand-high",
4041
+ "--slider-single-hover-thumb-border": "--border-brand-strong",
4042
+ "--slider-single-disabled-track-surface": "--surface-neutral-lower",
4043
+ "--slider-single-disabled-fill": "--surface-neutral",
4044
+ "--slider-single-disabled-thumb-surface": "--surface-neutral-lower",
4045
+ "--slider-single-disabled-thumb-border": "--border-neutral",
4046
+ "--slider-range-track-surface": "--surface-neutral-lowest",
4047
+ "--slider-range-track-border": "--border-neutral-subtle",
4048
+ "--slider-range-track-border-width": "--border-width-1",
4049
+ "--slider-range-track-height": "--space-8",
4050
+ "--slider-range-track-radius": "--radius-full",
4051
+ "--slider-range-fill": "--surface-brand-high",
4052
+ "--slider-range-thumb-surface": "--surface-neutral-highest",
4053
+ "--slider-range-thumb-border": "--border-brand",
4054
+ "--slider-range-thumb-border-width": "--border-width-2",
4055
+ "--slider-range-thumb-size": "--font-size-lg",
4056
+ "--slider-range-thumb-radius": "--radius-full",
4057
+ "--slider-range-thumb-shadow": "--shadow-sm",
4058
+ "--slider-range-hover-thumb-surface": "--surface-brand-high",
4059
+ "--slider-range-hover-thumb-border": "--border-brand-strong",
4060
+ "--slider-range-disabled-track-surface": "--surface-neutral-lower",
4061
+ "--slider-range-disabled-fill": "--surface-neutral",
4062
+ "--slider-range-disabled-thumb-surface": "--surface-neutral-lower",
4063
+ "--slider-range-disabled-thumb-border": "--border-neutral",
4064
+ "--slider-label-gap": "--space-6",
4065
+ "--slider-label": "--text-secondary",
4066
+ "--slider-label-font-family": "--font-sans",
4067
+ "--slider-label-font-size": "--font-size-md",
4068
+ "--slider-label-font-weight": "--font-weight-normal",
4069
+ "--slider-label-line-height": "--line-height-normal",
4070
+ "--slider-value": "--text-tertiary",
4071
+ "--slider-value-font-family": "--font-mono",
4072
+ "--slider-value-font-size": "--font-size-md",
4073
+ "--slider-value-font-weight": "--font-weight-normal",
4074
+ "--slider-value-line-height": "--line-height-normal"
4075
+ }
4008
4076
  }
4009
4077
  },
4010
- "componentSchemaVersion": 21
4078
+ "componentSchemaVersion": 25
4011
4079
  }