@motion-proto/live-tokens 0.67.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 (138) 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 +239 -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/generate-theme.mjs +5 -4
  12. package/bin/lib/cssValues.mjs +50 -0
  13. package/bin/lib/findings.mjs +106 -0
  14. package/bin/lib/tokenVocabulary.mjs +213 -0
  15. package/dist-plugin/adjust/index.cjs +174 -23
  16. package/dist-plugin/adjust/index.d.cts +1 -1
  17. package/dist-plugin/adjust/index.d.ts +1 -1
  18. package/dist-plugin/adjust/index.js +68 -23
  19. package/dist-plugin/{chunk-J2JT4UEA.js → chunk-2YNERPXY.js} +26 -26
  20. package/dist-plugin/{chunk-NE6N66EE.js → chunk-GPIBU44G.js} +107 -1
  21. package/dist-plugin/{chunk-ZHPX7ZYQ.js → chunk-RFVYPNRO.js} +39 -1
  22. package/dist-plugin/{dataPaths-DZUzVv8H.d.ts → dataPaths-bJTCEO4H.d.cts} +1 -1
  23. package/dist-plugin/{dataPaths-DZUzVv8H.d.cts → dataPaths-bJTCEO4H.d.ts} +1 -1
  24. package/dist-plugin/fontPairing/index.d.cts +1 -1
  25. package/dist-plugin/fontPairing/index.d.ts +1 -1
  26. package/dist-plugin/generateColorsAndType/index.cjs +107 -1
  27. package/dist-plugin/generateColorsAndType/index.d.cts +1 -1
  28. package/dist-plugin/generateColorsAndType/index.d.ts +1 -1
  29. package/dist-plugin/generateColorsAndType/index.js +1 -1
  30. package/dist-plugin/index.cjs +173 -29
  31. package/dist-plugin/index.d.cts +1 -1
  32. package/dist-plugin/index.d.ts +1 -1
  33. package/dist-plugin/index.js +7 -7
  34. package/dist-plugin/migrateData/index.cjs +132 -26
  35. package/dist-plugin/migrateData/index.d.cts +1 -1
  36. package/dist-plugin/migrateData/index.d.ts +1 -1
  37. package/dist-plugin/migrateData/index.js +2 -2
  38. package/dist-plugin/tokensCssMigrations/index.cjs +39 -1
  39. package/dist-plugin/tokensCssMigrations/index.d.cts +1 -1
  40. package/dist-plugin/tokensCssMigrations/index.d.ts +1 -1
  41. package/dist-plugin/tokensCssMigrations/index.js +1 -1
  42. package/package.json +6 -5
  43. package/src/app/site.css +4 -4
  44. package/src/editor/bootstrap.ts +6 -6
  45. package/src/editor/component-editor/ButtonEditor.svelte +71 -4
  46. package/src/editor/component-editor/CardEditor.svelte +6 -6
  47. package/src/editor/component-editor/DialogEditor.svelte +3 -3
  48. package/src/editor/component-editor/IconButtonEditor.svelte +68 -3
  49. package/src/editor/component-editor/ImageEditor.svelte +8 -8
  50. package/src/editor/component-editor/ImageLightboxEditor.svelte +13 -2
  51. package/src/editor/component-editor/MenuSelectEditor.svelte +63 -3
  52. package/src/editor/component-editor/SegmentedControlEditor.svelte +63 -3
  53. package/src/editor/component-editor/SideNavigationEditor.svelte +67 -3
  54. package/src/editor/component-editor/SliderEditor.svelte +186 -0
  55. package/src/editor/component-editor/TabBarEditor.svelte +63 -3
  56. package/src/editor/component-editor/registry.ts +10 -0
  57. package/src/editor/component-editor/scaffolding/ComponentFileManager.svelte +4 -4
  58. package/src/editor/core/components/aliasKinds.ts +51 -28
  59. package/src/editor/core/fonts/fontLoader.ts +2 -2
  60. package/src/editor/core/preview/{lookPreview.ts → themePreview.ts} +27 -27
  61. package/src/editor/core/productionPulse.ts +3 -3
  62. package/src/editor/core/sketch/index.ts +52 -44
  63. package/src/editor/core/sketch/maskField.ts +9 -9
  64. package/src/editor/core/sketch/sketchLayer.ts +25 -9
  65. package/src/editor/core/sketch/sketchRegistry.ts +34 -34
  66. package/src/editor/core/sketch/sketchStore.ts +98 -83
  67. package/src/editor/core/sketch/sketchStyleService.ts +4 -4
  68. package/src/editor/core/sketch/sketchStyles.ts +28 -28
  69. package/src/editor/core/store/editorPersistence.ts +44 -1
  70. package/src/editor/core/store/editorRenderer.ts +2 -2
  71. package/src/editor/core/store/editorStore.ts +18 -18
  72. package/src/editor/core/store/editorTypes.ts +7 -6
  73. package/src/editor/core/themes/colorsAndTypeService.ts +1 -1
  74. package/src/editor/core/themes/loadRows.ts +8 -8
  75. package/src/editor/core/themes/migrations/2026-09-01-gate-suffix-enabled.ts +31 -0
  76. package/src/editor/core/themes/migrations/2026-09-01-scrim-rename.ts +52 -0
  77. package/src/editor/core/themes/migrations/2026-09-01-tabbar-active-tint.ts +27 -0
  78. package/src/editor/core/themes/migrations/2026-09-01-tint-rename.ts +42 -0
  79. package/src/editor/core/themes/migrations/index.ts +16 -0
  80. package/src/editor/core/themes/slices/domainVars.ts +2 -2
  81. package/src/editor/core/themes/slices/washes.ts +107 -0
  82. package/src/editor/core/themes/themeDocumentSync.ts +2 -2
  83. package/src/editor/core/themes/themeInit.ts +2 -2
  84. package/src/editor/core/themes/themeService.ts +17 -17
  85. package/src/editor/core/themes/{lookSummary.ts → themeSummary.ts} +9 -9
  86. package/src/editor/core/themes/themeTypes.ts +10 -6
  87. package/src/editor/docs/content/editing-tokens.md +5 -3
  88. package/src/editor/docs/content/getting-started.md +1 -1
  89. package/src/editor/docs/content/sketch-mode.md +22 -17
  90. package/src/editor/docs/content/themes-workflow.md +11 -11
  91. package/src/editor/docs/content/where-themes-live.md +6 -6
  92. package/src/editor/docs/content.generated.ts +5 -5
  93. package/src/editor/index.ts +2 -2
  94. package/src/editor/pages/EditorShell.svelte +1 -1
  95. package/src/editor/ui/SurfacesTab.svelte +3 -3
  96. package/src/editor/ui/ThemePanel.svelte +52 -52
  97. package/src/editor/ui/UITokenSelector.svelte +1 -0
  98. package/src/editor/ui/VariablesTab.svelte +2 -2
  99. package/src/editor/ui/sections/{OverlaysSection.svelte → WashesSection.svelte} +44 -43
  100. package/src/editor/ui/sketch/SketchPreview.svelte +2 -2
  101. package/src/editor/ui/sketch/SketchTab.svelte +64 -38
  102. package/src/live-tokens/data/colors-and-type/autumn.json +6 -6
  103. package/src/live-tokens/data/colors-and-type/default.json +6 -6
  104. package/src/live-tokens/data/colors-and-type/halloween.json +6 -6
  105. package/src/live-tokens/data/colors-and-type/midnight-study.json +6 -6
  106. package/src/live-tokens/data/colors-and-type/ocean.json +6 -6
  107. package/src/live-tokens/data/colors-and-type/royal-velvet.json +6 -6
  108. package/src/live-tokens/data/colors-and-type/sketchy.json +6 -6
  109. package/src/live-tokens/data/colors-and-type/spring-meadow.json +6 -6
  110. package/src/live-tokens/data/colors-and-type/sunset.json +6 -6
  111. package/src/live-tokens/data/sketch-styles/dry.json +5 -5
  112. package/src/live-tokens/data/sketch-styles/hatched.json +9 -9
  113. package/src/live-tokens/data/themes/autumn.json +82 -14
  114. package/src/live-tokens/data/themes/halloween.json +82 -14
  115. package/src/live-tokens/data/themes/midnight-study.json +82 -14
  116. package/src/live-tokens/data/themes/ocean.json +82 -14
  117. package/src/live-tokens/data/themes/royal-velvet.json +82 -14
  118. package/src/live-tokens/data/themes/sketchy.json +82 -14
  119. package/src/live-tokens/data/themes/spring-meadow.json +82 -14
  120. package/src/live-tokens/data/themes/sunset.json +82 -14
  121. package/src/live-tokens/data/tokens.generated.css +6 -6
  122. package/src/system/backdrop/backdrop.ts +1 -1
  123. package/src/system/components/Button.svelte +28 -10
  124. package/src/system/components/Card.svelte +6 -6
  125. package/src/system/components/Dialog.svelte +3 -3
  126. package/src/system/components/IconButton.svelte +23 -7
  127. package/src/system/components/Image.svelte +6 -6
  128. package/src/system/components/MenuSelect.svelte +17 -1
  129. package/src/system/components/SectionDivider.svelte +1 -1
  130. package/src/system/components/SegmentedControl.svelte +20 -2
  131. package/src/system/components/SideNavigation.svelte +22 -2
  132. package/src/system/components/Slider.svelte +348 -0
  133. package/src/system/components/TabBar.svelte +20 -2
  134. package/src/system/styles/CONVENTIONS.md +2 -2
  135. package/src/system/styles/tokens.css +12 -4
  136. package/template/package.json +3 -2
  137. package/template/src/pages/Home.svelte +1 -1
  138. package/src/editor/core/themes/slices/overlays.ts +0 -101
package/src/live-tokens/data/themes/ocean.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "Ocean",
3
3
  "createdAt": "2026-08-13T10:21:46.867Z",
4
4
  "updatedAt": "2026-08-19T22:39:32.785Z",
5
- "schemaVersion": 4,
5
+ "schemaVersion": 5,
6
6
  "colorsAndType": {
7
7
  "name": "Ocean",
8
8
  "createdAt": "2026-08-12T20:13:46.322Z",
@@ -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.2)",
2274
2274
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.2)",
2275
2275
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.2)",
@@ -2654,6 +2654,9 @@
2654
2654
  "createdAt": "2026-05-10T19:28:06.893Z",
2655
2655
  "updatedAt": "2026-08-19T22:39:32.785Z",
2656
2656
  "aliases": {
2657
+ "--button-hover-tint": "--tint",
2658
+ "--button-hover-tint-enabled": "--color-transparent",
2659
+ "--button-shimmer": "--shimmer-on",
2657
2660
  "--button-primary-surface": "--surface-brand",
2658
2661
  "--button-primary-text": "--text-primary",
2659
2662
  "--button-primary-text-font-family": "--font-sans",
@@ -2701,7 +2704,7 @@
2701
2704
  "--button-outline-hover-surface": "--surface-neutral-lower",
2702
2705
  "--button-outline-hover-text": "--text-primary",
2703
2706
  "--button-outline-hover-border": "--border-neutral-strong",
2704
- "--button-outline-active-surface": "--hover",
2707
+ "--button-outline-active-surface": "--tint",
2705
2708
  "--button-outline-disabled-surface": "--color-transparent",
2706
2709
  "--button-outline-disabled-text": "--text-tertiary",
2707
2710
  "--button-outline-disabled-border": "--border-neutral-faint",
@@ -2873,8 +2876,8 @@
2873
2876
  "--card-default-body-line-height": "--line-height-normal",
2874
2877
  "--card-hover-border": "--border-neutral-strong",
2875
2878
  "--card-hover-shadow": "--shadow-md",
2876
- "--card-hover-border-active": "--card-default-border",
2877
- "--card-hover-shadow-active": "--card-default-shadow"
2879
+ "--card-hover-border-enabled": "--card-default-border",
2880
+ "--card-hover-shadow-enabled": "--card-default-shadow"
2878
2881
  }
2879
2882
  },
2880
2883
  "codesnippet": {
@@ -3028,7 +3031,7 @@
3028
3031
  "createdAt": "2026-05-10T20:05:24.719Z",
3029
3032
  "updatedAt": "2026-08-19T22:39:32.785Z",
3030
3033
  "aliases": {
3031
- "--dialog-overlay-surface": "--overlay-high",
3034
+ "--dialog-scrim-surface": "--scrim-high",
3032
3035
  "--dialog-surface": "--surface-neutral-lowest",
3033
3036
  "--dialog-border": "--border-neutral-strong",
3034
3037
  "--dialog-border-width": "--border-width-2",
@@ -3063,6 +3066,8 @@
3063
3066
  "createdAt": "2026-06-14T00:00:00.000Z",
3064
3067
  "updatedAt": "2026-08-19T22:39:32.785Z",
3065
3068
  "aliases": {
3069
+ "--iconbutton-hover-tint": "--tint",
3070
+ "--iconbutton-hover-tint-enabled": "--color-transparent",
3066
3071
  "--iconbutton-primary-surface": "--surface-brand",
3067
3072
  "--iconbutton-primary-icon": "--text-primary",
3068
3073
  "--iconbutton-primary-border": "--border-brand",
@@ -3099,7 +3104,7 @@
3099
3104
  "--iconbutton-outline-hover-surface": "--surface-neutral-lower",
3100
3105
  "--iconbutton-outline-hover-icon": "--text-primary",
3101
3106
  "--iconbutton-outline-hover-border": "--border-neutral-strong",
3102
- "--iconbutton-outline-active-surface": "--hover",
3107
+ "--iconbutton-outline-active-surface": "--tint",
3103
3108
  "--iconbutton-outline-disabled-surface": "--color-transparent",
3104
3109
  "--iconbutton-outline-disabled-icon": "--text-tertiary",
3105
3110
  "--iconbutton-outline-disabled-border": "--border-neutral-faint",
@@ -3279,6 +3284,8 @@
3279
3284
  "createdAt": "2026-05-16T00:00:00.000Z",
3280
3285
  "updatedAt": "2026-08-19T22:39:32.785Z",
3281
3286
  "aliases": {
3287
+ "--menuselect-hover-tint": "--tint",
3288
+ "--menuselect-hover-tint-enabled": "--color-transparent",
3282
3289
  "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 95%, transparent)",
3283
3290
  "--menuselect-menu-border": "--border-neutral-medium",
3284
3291
  "--menuselect-menu-border-width": "--border-width-1",
@@ -3597,6 +3604,8 @@
3597
3604
  "createdAt": "2026-04-28T21:13:17.669Z",
3598
3605
  "updatedAt": "2026-08-19T22:39:32.785Z",
3599
3606
  "aliases": {
3607
+ "--segmentedcontrol-hover-tint": "--tint",
3608
+ "--segmentedcontrol-hover-tint-enabled": "--color-transparent",
3600
3609
  "--segmentedcontrol-bar-surface": "color-mix(in srgb, var(--surface-neutral-lowest) 75%, transparent)",
3601
3610
  "--segmentedcontrol-bar-border": "--border-neutral",
3602
3611
  "--segmentedcontrol-bar-border-width": "--border-width-1",
@@ -3657,6 +3666,8 @@
3657
3666
  "createdAt": "2026-05-25T19:34:09.771Z",
3658
3667
  "updatedAt": "2026-08-19T22:39:32.785Z",
3659
3668
  "aliases": {
3669
+ "--sidenavigation-hover-tint": "--tint",
3670
+ "--sidenavigation-hover-tint-enabled": "--color-transparent",
3660
3671
  "--sidenavigation-panel-surface": "--surface-canvas-lower",
3661
3672
  "--sidenavigation-panel-border": "--border-canvas-faint",
3662
3673
  "--sidenavigation-panel-border-width": "--border-width-1",
@@ -3817,6 +3828,8 @@
3817
3828
  "createdAt": "2026-05-12T01:57:26.390Z",
3818
3829
  "updatedAt": "2026-08-19T22:39:32.785Z",
3819
3830
  "aliases": {
3831
+ "--tabbar-hover-tint": "--tint",
3832
+ "--tabbar-hover-tint-enabled": "--color-transparent",
3820
3833
  "--tabbar-bar-divider": "--border-neutral-subtle",
3821
3834
  "--tabbar-bar-divider-thickness": "--border-width-1",
3822
3835
  "--tabbar-bar-top-margin": "--space-2",
@@ -3853,7 +3866,7 @@
3853
3866
  "--tabbar-hover-indicator-border-width": "--border-width-2",
3854
3867
  "--tabbar-active-text": "--text-primary",
3855
3868
  "--tabbar-active-border": "--color-brand-500",
3856
- "--tabbar-active-surface": "--overlay-low",
3869
+ "--tabbar-active-surface": "--tint-low",
3857
3870
  "--tabbar-active-text-font-family": "--font-sans",
3858
3871
  "--tabbar-active-text-font-size": "--font-size-md",
3859
3872
  "--tabbar-active-text-font-weight": "--font-weight-light",
@@ -3965,7 +3978,62 @@
3965
3978
  "--tooltip-padding": "--space-8",
3966
3979
  "--tooltip-shadow": "--shadow-md"
3967
3980
  }
3981
+ },
3982
+ "slider": {
3983
+ "name": "ocean",
3984
+ "component": "slider",
3985
+ "createdAt": "2026-09-02T10:55:50.831Z",
3986
+ "updatedAt": "2026-09-02T10:55:50.831Z",
3987
+ "aliases": {
3988
+ "--slider-single-track-surface": "--surface-neutral-lowest",
3989
+ "--slider-single-track-border": "--border-neutral-subtle",
3990
+ "--slider-single-track-border-width": "--border-width-1",
3991
+ "--slider-single-track-height": "--space-8",
3992
+ "--slider-single-track-radius": "--radius-full",
3993
+ "--slider-single-fill": "--surface-brand-high",
3994
+ "--slider-single-thumb-surface": "--surface-neutral-highest",
3995
+ "--slider-single-thumb-border": "--border-brand",
3996
+ "--slider-single-thumb-border-width": "--border-width-2",
3997
+ "--slider-single-thumb-size": "--font-size-lg",
3998
+ "--slider-single-thumb-radius": "--radius-full",
3999
+ "--slider-single-thumb-shadow": "--shadow-sm",
4000
+ "--slider-single-hover-thumb-surface": "--surface-brand-high",
4001
+ "--slider-single-hover-thumb-border": "--border-brand-strong",
4002
+ "--slider-single-disabled-track-surface": "--surface-neutral-lower",
4003
+ "--slider-single-disabled-fill": "--surface-neutral",
4004
+ "--slider-single-disabled-thumb-surface": "--surface-neutral-lower",
4005
+ "--slider-single-disabled-thumb-border": "--border-neutral",
4006
+ "--slider-range-track-surface": "--surface-neutral-lowest",
4007
+ "--slider-range-track-border": "--border-neutral-subtle",
4008
+ "--slider-range-track-border-width": "--border-width-1",
4009
+ "--slider-range-track-height": "--space-8",
4010
+ "--slider-range-track-radius": "--radius-full",
4011
+ "--slider-range-fill": "--surface-brand-high",
4012
+ "--slider-range-thumb-surface": "--surface-neutral-highest",
4013
+ "--slider-range-thumb-border": "--border-brand",
4014
+ "--slider-range-thumb-border-width": "--border-width-2",
4015
+ "--slider-range-thumb-size": "--font-size-lg",
4016
+ "--slider-range-thumb-radius": "--radius-full",
4017
+ "--slider-range-thumb-shadow": "--shadow-sm",
4018
+ "--slider-range-hover-thumb-surface": "--surface-brand-high",
4019
+ "--slider-range-hover-thumb-border": "--border-brand-strong",
4020
+ "--slider-range-disabled-track-surface": "--surface-neutral-lower",
4021
+ "--slider-range-disabled-fill": "--surface-neutral",
4022
+ "--slider-range-disabled-thumb-surface": "--surface-neutral-lower",
4023
+ "--slider-range-disabled-thumb-border": "--border-neutral",
4024
+ "--slider-label-gap": "--space-6",
4025
+ "--slider-label": "--text-secondary",
4026
+ "--slider-label-font-family": "--font-sans",
4027
+ "--slider-label-font-size": "--font-size-md",
4028
+ "--slider-label-font-weight": "--font-weight-normal",
4029
+ "--slider-label-line-height": "--line-height-normal",
4030
+ "--slider-value": "--text-tertiary",
4031
+ "--slider-value-font-family": "--font-mono",
4032
+ "--slider-value-font-size": "--font-size-md",
4033
+ "--slider-value-font-weight": "--font-weight-normal",
4034
+ "--slider-value-line-height": "--line-height-normal"
4035
+ }
3968
4036
  }
3969
4037
  },
3970
- "componentSchemaVersion": 21
4038
+ "componentSchemaVersion": 25
3971
4039
  }
package/src/live-tokens/data/themes/royal-velvet.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "Royal Velvet",
3
3
  "createdAt": "2026-08-13T10:21:46.867Z",
4
4
  "updatedAt": "2026-08-19T22:39:32.785Z",
5
- "schemaVersion": 4,
5
+ "schemaVersion": 5,
6
6
  "colorsAndType": {
7
7
  "name": "Royal Velvet",
8
8
  "createdAt": "2026-08-12T20:26:16.137Z",
@@ -2296,12 +2296,12 @@
2296
2296
  "--columns-max-width": "1440px",
2297
2297
  "--columns-gutter": "32px",
2298
2298
  "--columns-margin": "0px",
2299
- "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2300
- "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2301
- "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2302
- "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2303
- "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2304
- "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2299
+ "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2300
+ "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2301
+ "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2302
+ "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2303
+ "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2304
+ "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2305
2305
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
2306
2306
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
2307
2307
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
@@ -2685,6 +2685,9 @@
2685
2685
  "createdAt": "2026-05-10T19:28:06.893Z",
2686
2686
  "updatedAt": "2026-08-19T22:39:32.785Z",
2687
2687
  "aliases": {
2688
+ "--button-hover-tint": "--tint",
2689
+ "--button-hover-tint-enabled": "--color-transparent",
2690
+ "--button-shimmer": "--shimmer-on",
2688
2691
  "--button-primary-surface": "--surface-brand",
2689
2692
  "--button-primary-text": "--text-primary",
2690
2693
  "--button-primary-text-font-family": "--font-sans",
@@ -2732,7 +2735,7 @@
2732
2735
  "--button-outline-hover-surface": "--surface-neutral-lower",
2733
2736
  "--button-outline-hover-text": "--text-primary",
2734
2737
  "--button-outline-hover-border": "--border-neutral-strong",
2735
- "--button-outline-active-surface": "--hover",
2738
+ "--button-outline-active-surface": "--tint",
2736
2739
  "--button-outline-disabled-surface": "--color-transparent",
2737
2740
  "--button-outline-disabled-text": "--text-tertiary",
2738
2741
  "--button-outline-disabled-border": "--border-neutral-faint",
@@ -2904,8 +2907,8 @@
2904
2907
  "--card-default-body-line-height": "--line-height-normal",
2905
2908
  "--card-hover-border": "--border-neutral-strong",
2906
2909
  "--card-hover-shadow": "--shadow-md",
2907
- "--card-hover-border-active": "--card-default-border",
2908
- "--card-hover-shadow-active": "--card-default-shadow"
2910
+ "--card-hover-border-enabled": "--card-default-border",
2911
+ "--card-hover-shadow-enabled": "--card-default-shadow"
2909
2912
  }
2910
2913
  },
2911
2914
  "codesnippet": {
@@ -3059,7 +3062,7 @@
3059
3062
  "createdAt": "2026-05-10T20:05:24.719Z",
3060
3063
  "updatedAt": "2026-08-19T22:39:32.785Z",
3061
3064
  "aliases": {
3062
- "--dialog-overlay-surface": "--overlay-high",
3065
+ "--dialog-scrim-surface": "--scrim-high",
3063
3066
  "--dialog-surface": "--surface-neutral-lowest",
3064
3067
  "--dialog-border": "--border-neutral-strong",
3065
3068
  "--dialog-border-width": "--border-width-3",
@@ -3094,6 +3097,8 @@
3094
3097
  "createdAt": "2026-06-14T00:00:00.000Z",
3095
3098
  "updatedAt": "2026-08-19T22:39:32.785Z",
3096
3099
  "aliases": {
3100
+ "--iconbutton-hover-tint": "--tint",
3101
+ "--iconbutton-hover-tint-enabled": "--color-transparent",
3097
3102
  "--iconbutton-primary-surface": "--surface-brand",
3098
3103
  "--iconbutton-primary-icon": "--text-primary",
3099
3104
  "--iconbutton-primary-border": "--border-brand",
@@ -3130,7 +3135,7 @@
3130
3135
  "--iconbutton-outline-hover-surface": "--surface-neutral-lower",
3131
3136
  "--iconbutton-outline-hover-icon": "--text-primary",
3132
3137
  "--iconbutton-outline-hover-border": "--border-neutral-strong",
3133
- "--iconbutton-outline-active-surface": "--hover",
3138
+ "--iconbutton-outline-active-surface": "--tint",
3134
3139
  "--iconbutton-outline-disabled-surface": "--color-transparent",
3135
3140
  "--iconbutton-outline-disabled-icon": "--text-tertiary",
3136
3141
  "--iconbutton-outline-disabled-border": "--border-neutral-faint",
@@ -3310,6 +3315,8 @@
3310
3315
  "createdAt": "2026-05-16T00:00:00.000Z",
3311
3316
  "updatedAt": "2026-08-19T22:39:32.785Z",
3312
3317
  "aliases": {
3318
+ "--menuselect-hover-tint": "--tint",
3319
+ "--menuselect-hover-tint-enabled": "--color-transparent",
3313
3320
  "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 95%, transparent)",
3314
3321
  "--menuselect-menu-border": "--border-neutral-medium",
3315
3322
  "--menuselect-menu-border-width": "--border-width-2",
@@ -3628,6 +3635,8 @@
3628
3635
  "createdAt": "2026-04-28T21:13:17.669Z",
3629
3636
  "updatedAt": "2026-08-19T22:39:32.785Z",
3630
3637
  "aliases": {
3638
+ "--segmentedcontrol-hover-tint": "--tint",
3639
+ "--segmentedcontrol-hover-tint-enabled": "--color-transparent",
3631
3640
  "--segmentedcontrol-bar-surface": "color-mix(in srgb, var(--surface-neutral-lowest) 75%, transparent)",
3632
3641
  "--segmentedcontrol-bar-border": "--border-neutral",
3633
3642
  "--segmentedcontrol-bar-border-width": "--border-width-2",
@@ -3688,6 +3697,8 @@
3688
3697
  "createdAt": "2026-05-25T19:34:09.771Z",
3689
3698
  "updatedAt": "2026-08-19T22:39:32.785Z",
3690
3699
  "aliases": {
3700
+ "--sidenavigation-hover-tint": "--tint",
3701
+ "--sidenavigation-hover-tint-enabled": "--color-transparent",
3691
3702
  "--sidenavigation-panel-surface": "--surface-canvas-lower",
3692
3703
  "--sidenavigation-panel-border": "--border-canvas-faint",
3693
3704
  "--sidenavigation-panel-border-width": "--border-width-2",
@@ -3848,6 +3859,8 @@
3848
3859
  "createdAt": "2026-05-12T01:57:26.390Z",
3849
3860
  "updatedAt": "2026-08-19T22:39:32.785Z",
3850
3861
  "aliases": {
3862
+ "--tabbar-hover-tint": "--tint",
3863
+ "--tabbar-hover-tint-enabled": "--color-transparent",
3851
3864
  "--tabbar-bar-divider": "--border-neutral-subtle",
3852
3865
  "--tabbar-bar-divider-thickness": "--border-width-1",
3853
3866
  "--tabbar-bar-top-margin": "--space-4",
@@ -3884,7 +3897,7 @@
3884
3897
  "--tabbar-hover-indicator-border-width": "--border-width-3",
3885
3898
  "--tabbar-active-text": "--text-primary",
3886
3899
  "--tabbar-active-border": "--color-brand-500",
3887
- "--tabbar-active-surface": "--overlay-low",
3900
+ "--tabbar-active-surface": "--tint-low",
3888
3901
  "--tabbar-active-text-font-family": "--font-sans",
3889
3902
  "--tabbar-active-text-font-size": "--font-size-md",
3890
3903
  "--tabbar-active-text-font-weight": "--font-weight-light",
@@ -3996,7 +4009,62 @@
3996
4009
  "--tooltip-padding": "--space-10",
3997
4010
  "--tooltip-shadow": "--shadow-md"
3998
4011
  }
4012
+ },
4013
+ "slider": {
4014
+ "name": "royal-velvet",
4015
+ "component": "slider",
4016
+ "createdAt": "2026-09-02T10:55:50.831Z",
4017
+ "updatedAt": "2026-09-02T10:55:50.831Z",
4018
+ "aliases": {
4019
+ "--slider-single-track-surface": "--surface-neutral-lowest",
4020
+ "--slider-single-track-border": "--border-neutral-subtle",
4021
+ "--slider-single-track-border-width": "--border-width-1",
4022
+ "--slider-single-track-height": "--space-8",
4023
+ "--slider-single-track-radius": "--radius-full",
4024
+ "--slider-single-fill": "--surface-brand-high",
4025
+ "--slider-single-thumb-surface": "--surface-neutral-highest",
4026
+ "--slider-single-thumb-border": "--border-brand",
4027
+ "--slider-single-thumb-border-width": "--border-width-2",
4028
+ "--slider-single-thumb-size": "--font-size-lg",
4029
+ "--slider-single-thumb-radius": "--radius-full",
4030
+ "--slider-single-thumb-shadow": "--shadow-sm",
4031
+ "--slider-single-hover-thumb-surface": "--surface-brand-high",
4032
+ "--slider-single-hover-thumb-border": "--border-brand-strong",
4033
+ "--slider-single-disabled-track-surface": "--surface-neutral-lower",
4034
+ "--slider-single-disabled-fill": "--surface-neutral",
4035
+ "--slider-single-disabled-thumb-surface": "--surface-neutral-lower",
4036
+ "--slider-single-disabled-thumb-border": "--border-neutral",
4037
+ "--slider-range-track-surface": "--surface-neutral-lowest",
4038
+ "--slider-range-track-border": "--border-neutral-subtle",
4039
+ "--slider-range-track-border-width": "--border-width-1",
4040
+ "--slider-range-track-height": "--space-8",
4041
+ "--slider-range-track-radius": "--radius-full",
4042
+ "--slider-range-fill": "--surface-brand-high",
4043
+ "--slider-range-thumb-surface": "--surface-neutral-highest",
4044
+ "--slider-range-thumb-border": "--border-brand",
4045
+ "--slider-range-thumb-border-width": "--border-width-2",
4046
+ "--slider-range-thumb-size": "--font-size-lg",
4047
+ "--slider-range-thumb-radius": "--radius-full",
4048
+ "--slider-range-thumb-shadow": "--shadow-sm",
4049
+ "--slider-range-hover-thumb-surface": "--surface-brand-high",
4050
+ "--slider-range-hover-thumb-border": "--border-brand-strong",
4051
+ "--slider-range-disabled-track-surface": "--surface-neutral-lower",
4052
+ "--slider-range-disabled-fill": "--surface-neutral",
4053
+ "--slider-range-disabled-thumb-surface": "--surface-neutral-lower",
4054
+ "--slider-range-disabled-thumb-border": "--border-neutral",
4055
+ "--slider-label-gap": "--space-6",
4056
+ "--slider-label": "--text-secondary",
4057
+ "--slider-label-font-family": "--font-sans",
4058
+ "--slider-label-font-size": "--font-size-md",
4059
+ "--slider-label-font-weight": "--font-weight-normal",
4060
+ "--slider-label-line-height": "--line-height-normal",
4061
+ "--slider-value": "--text-tertiary",
4062
+ "--slider-value-font-family": "--font-mono",
4063
+ "--slider-value-font-size": "--font-size-md",
4064
+ "--slider-value-font-weight": "--font-weight-normal",
4065
+ "--slider-value-line-height": "--line-height-normal"
4066
+ }
3999
4067
  }
4000
4068
  },
4001
- "componentSchemaVersion": 21
4069
+ "componentSchemaVersion": 25
4002
4070
  }
package/src/live-tokens/data/themes/sketchy.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "Sketchy",
3
3
  "createdAt": "2026-08-25T01:11:16.870Z",
4
4
  "updatedAt": "2026-08-26T10:04:53.000Z",
5
- "schemaVersion": 4,
5
+ "schemaVersion": 5,
6
6
  "colorsAndType": {
7
7
  "name": "Sketchy",
8
8
  "createdAt": "2026-08-25T01:21:09.181Z",
@@ -2250,12 +2250,12 @@
2250
2250
  "--columns-max-width": "1440px",
2251
2251
  "--columns-gutter": "32px",
2252
2252
  "--columns-margin": "0px",
2253
- "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2254
- "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2255
- "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2256
- "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2257
- "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2258
- "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2253
+ "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2254
+ "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2255
+ "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2256
+ "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2257
+ "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2258
+ "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2259
2259
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.2)",
2260
2260
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.2)",
2261
2261
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.2)",
@@ -2668,6 +2668,9 @@
2668
2668
  "createdAt": "2026-05-10T19:28:06.893Z",
2669
2669
  "updatedAt": "2026-08-25T01:13:11.520Z",
2670
2670
  "aliases": {
2671
+ "--button-hover-tint": "--tint",
2672
+ "--button-hover-tint-enabled": "--color-transparent",
2673
+ "--button-shimmer": "--shimmer-on",
2671
2674
  "--button-primary-surface": "--surface-brand",
2672
2675
  "--button-primary-text": "--text-primary",
2673
2676
  "--button-primary-text-font-family": "--font-sans",
@@ -2715,7 +2718,7 @@
2715
2718
  "--button-outline-hover-surface": "--surface-neutral-lower",
2716
2719
  "--button-outline-hover-text": "--text-primary",
2717
2720
  "--button-outline-hover-border": "--border-neutral-strong",
2718
- "--button-outline-active-surface": "--hover",
2721
+ "--button-outline-active-surface": "--tint",
2719
2722
  "--button-outline-disabled-surface": "--color-transparent",
2720
2723
  "--button-outline-disabled-text": "--text-tertiary",
2721
2724
  "--button-outline-disabled-border": "--border-neutral-faint",
@@ -2887,8 +2890,8 @@
2887
2890
  "--card-default-body-line-height": "--line-height-normal",
2888
2891
  "--card-hover-border": "--border-neutral-strong",
2889
2892
  "--card-hover-shadow": "--shadow-md",
2890
- "--card-hover-border-active": "--card-default-border",
2891
- "--card-hover-shadow-active": "--card-default-shadow"
2893
+ "--card-hover-border-enabled": "--card-default-border",
2894
+ "--card-hover-shadow-enabled": "--card-default-shadow"
2892
2895
  }
2893
2896
  },
2894
2897
  "codesnippet": {
@@ -3042,7 +3045,7 @@
3042
3045
  "createdAt": "2026-05-10T20:05:24.719Z",
3043
3046
  "updatedAt": "2026-08-25T01:13:11.520Z",
3044
3047
  "aliases": {
3045
- "--dialog-overlay-surface": "--overlay-high",
3048
+ "--dialog-scrim-surface": "--scrim-high",
3046
3049
  "--dialog-surface": "--surface-neutral-lowest",
3047
3050
  "--dialog-border": "--border-neutral-strong",
3048
3051
  "--dialog-border-width": "--border-width-2",
@@ -3077,6 +3080,8 @@
3077
3080
  "createdAt": "2026-06-14T00:00:00.000Z",
3078
3081
  "updatedAt": "2026-08-25T01:13:11.520Z",
3079
3082
  "aliases": {
3083
+ "--iconbutton-hover-tint": "--tint",
3084
+ "--iconbutton-hover-tint-enabled": "--color-transparent",
3080
3085
  "--iconbutton-primary-surface": "--surface-brand",
3081
3086
  "--iconbutton-primary-icon": "--text-primary",
3082
3087
  "--iconbutton-primary-border": "--border-brand",
@@ -3113,7 +3118,7 @@
3113
3118
  "--iconbutton-outline-hover-surface": "--surface-neutral-lower",
3114
3119
  "--iconbutton-outline-hover-icon": "--text-primary",
3115
3120
  "--iconbutton-outline-hover-border": "--border-neutral-strong",
3116
- "--iconbutton-outline-active-surface": "--hover",
3121
+ "--iconbutton-outline-active-surface": "--tint",
3117
3122
  "--iconbutton-outline-disabled-surface": "--color-transparent",
3118
3123
  "--iconbutton-outline-disabled-icon": "--text-tertiary",
3119
3124
  "--iconbutton-outline-disabled-border": "--border-neutral-faint",
@@ -3293,6 +3298,8 @@
3293
3298
  "createdAt": "2026-05-16T00:00:00.000Z",
3294
3299
  "updatedAt": "2026-08-25T01:13:11.520Z",
3295
3300
  "aliases": {
3301
+ "--menuselect-hover-tint": "--tint",
3302
+ "--menuselect-hover-tint-enabled": "--color-transparent",
3296
3303
  "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 95%, transparent)",
3297
3304
  "--menuselect-menu-border": "--border-neutral-medium",
3298
3305
  "--menuselect-menu-border-width": "--border-width-1",
@@ -3611,6 +3618,8 @@
3611
3618
  "createdAt": "2026-04-28T21:13:17.669Z",
3612
3619
  "updatedAt": "2026-08-25T01:13:11.520Z",
3613
3620
  "aliases": {
3621
+ "--segmentedcontrol-hover-tint": "--tint",
3622
+ "--segmentedcontrol-hover-tint-enabled": "--color-transparent",
3614
3623
  "--segmentedcontrol-bar-surface": "color-mix(in srgb, var(--surface-neutral-lowest) 75%, transparent)",
3615
3624
  "--segmentedcontrol-bar-border": "--border-neutral",
3616
3625
  "--segmentedcontrol-bar-border-width": "--border-width-1",
@@ -3671,6 +3680,8 @@
3671
3680
  "createdAt": "2026-05-25T19:34:09.771Z",
3672
3681
  "updatedAt": "2026-08-25T01:13:11.520Z",
3673
3682
  "aliases": {
3683
+ "--sidenavigation-hover-tint": "--tint",
3684
+ "--sidenavigation-hover-tint-enabled": "--color-transparent",
3674
3685
  "--sidenavigation-panel-surface": "--surface-canvas-lower",
3675
3686
  "--sidenavigation-panel-border": "--border-canvas-faint",
3676
3687
  "--sidenavigation-panel-border-width": "--border-width-1",
@@ -3831,6 +3842,8 @@
3831
3842
  "createdAt": "2026-05-12T01:57:26.390Z",
3832
3843
  "updatedAt": "2026-08-25T01:13:11.520Z",
3833
3844
  "aliases": {
3845
+ "--tabbar-hover-tint": "--tint",
3846
+ "--tabbar-hover-tint-enabled": "--color-transparent",
3834
3847
  "--tabbar-bar-divider": "--border-neutral-subtle",
3835
3848
  "--tabbar-bar-divider-thickness": "--border-width-1",
3836
3849
  "--tabbar-bar-top-margin": "--space-2",
@@ -3867,7 +3880,7 @@
3867
3880
  "--tabbar-hover-indicator-border-width": "--border-width-2",
3868
3881
  "--tabbar-active-text": "--text-primary",
3869
3882
  "--tabbar-active-border": "--color-brand-500",
3870
- "--tabbar-active-surface": "--overlay-low",
3883
+ "--tabbar-active-surface": "--tint-low",
3871
3884
  "--tabbar-active-text-font-family": "--font-sans",
3872
3885
  "--tabbar-active-text-font-size": "--font-size-md",
3873
3886
  "--tabbar-active-text-font-weight": "--font-weight-light",
@@ -3979,7 +3992,62 @@
3979
3992
  "--tooltip-padding": "--space-8",
3980
3993
  "--tooltip-shadow": "--shadow-md"
3981
3994
  }
3995
+ },
3996
+ "slider": {
3997
+ "name": "sketchy",
3998
+ "component": "slider",
3999
+ "createdAt": "2026-09-02T10:55:50.831Z",
4000
+ "updatedAt": "2026-09-02T10:55:50.831Z",
4001
+ "aliases": {
4002
+ "--slider-single-track-surface": "--surface-neutral-lowest",
4003
+ "--slider-single-track-border": "--border-neutral-subtle",
4004
+ "--slider-single-track-border-width": "--border-width-1",
4005
+ "--slider-single-track-height": "--space-8",
4006
+ "--slider-single-track-radius": "--radius-full",
4007
+ "--slider-single-fill": "--surface-brand-high",
4008
+ "--slider-single-thumb-surface": "--surface-neutral-highest",
4009
+ "--slider-single-thumb-border": "--border-brand",
4010
+ "--slider-single-thumb-border-width": "--border-width-2",
4011
+ "--slider-single-thumb-size": "--font-size-lg",
4012
+ "--slider-single-thumb-radius": "--radius-full",
4013
+ "--slider-single-thumb-shadow": "--shadow-sm",
4014
+ "--slider-single-hover-thumb-surface": "--surface-brand-high",
4015
+ "--slider-single-hover-thumb-border": "--border-brand-strong",
4016
+ "--slider-single-disabled-track-surface": "--surface-neutral-lower",
4017
+ "--slider-single-disabled-fill": "--surface-neutral",
4018
+ "--slider-single-disabled-thumb-surface": "--surface-neutral-lower",
4019
+ "--slider-single-disabled-thumb-border": "--border-neutral",
4020
+ "--slider-range-track-surface": "--surface-neutral-lowest",
4021
+ "--slider-range-track-border": "--border-neutral-subtle",
4022
+ "--slider-range-track-border-width": "--border-width-1",
4023
+ "--slider-range-track-height": "--space-8",
4024
+ "--slider-range-track-radius": "--radius-full",
4025
+ "--slider-range-fill": "--surface-brand-high",
4026
+ "--slider-range-thumb-surface": "--surface-neutral-highest",
4027
+ "--slider-range-thumb-border": "--border-brand",
4028
+ "--slider-range-thumb-border-width": "--border-width-2",
4029
+ "--slider-range-thumb-size": "--font-size-lg",
4030
+ "--slider-range-thumb-radius": "--radius-full",
4031
+ "--slider-range-thumb-shadow": "--shadow-sm",
4032
+ "--slider-range-hover-thumb-surface": "--surface-brand-high",
4033
+ "--slider-range-hover-thumb-border": "--border-brand-strong",
4034
+ "--slider-range-disabled-track-surface": "--surface-neutral-lower",
4035
+ "--slider-range-disabled-fill": "--surface-neutral",
4036
+ "--slider-range-disabled-thumb-surface": "--surface-neutral-lower",
4037
+ "--slider-range-disabled-thumb-border": "--border-neutral",
4038
+ "--slider-label-gap": "--space-6",
4039
+ "--slider-label": "--text-secondary",
4040
+ "--slider-label-font-family": "--font-sans",
4041
+ "--slider-label-font-size": "--font-size-md",
4042
+ "--slider-label-font-weight": "--font-weight-normal",
4043
+ "--slider-label-line-height": "--line-height-normal",
4044
+ "--slider-value": "--text-tertiary",
4045
+ "--slider-value-font-family": "--font-mono",
4046
+ "--slider-value-font-size": "--font-size-md",
4047
+ "--slider-value-font-weight": "--font-weight-normal",
4048
+ "--slider-value-line-height": "--line-height-normal"
4049
+ }
3982
4050
  }
3983
4051
  },
3984
- "componentSchemaVersion": 21
4052
+ "componentSchemaVersion": 25
3985
4053
  }