@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/themes/midnight-study.json CHANGED
@@ -2307,12 +2307,12 @@
2307
2307
  "--columns-max-width": "1440px",
2308
2308
  "--columns-gutter": "32px",
2309
2309
  "--columns-margin": "0px",
2310
- "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2311
- "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2312
- "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2313
- "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2314
- "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2315
- "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2310
+ "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
2311
+ "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
2312
+ "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
2313
+ "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
2314
+ "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
2315
+ "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
2316
2316
  "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
2317
2317
  "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
2318
2318
  "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
@@ -2711,6 +2711,9 @@
2711
2711
  "createdAt": "2026-05-10T19:28:06.893Z",
2712
2712
  "updatedAt": "2026-08-20T00:00:00.000Z",
2713
2713
  "aliases": {
2714
+ "--button-hover-tint": "--tint",
2715
+ "--button-hover-tint-enabled": "--color-transparent",
2716
+ "--button-shimmer": "--shimmer-on",
2714
2717
  "--button-primary-surface": "--surface-brand",
2715
2718
  "--button-primary-text": "--text-primary",
2716
2719
  "--button-primary-text-font-family": "--font-sans",
@@ -2758,7 +2761,7 @@
2758
2761
  "--button-outline-hover-surface": "--surface-neutral-lower",
2759
2762
  "--button-outline-hover-text": "--text-primary",
2760
2763
  "--button-outline-hover-border": "--border-neutral-strong",
2761
- "--button-outline-active-surface": "--hover",
2764
+ "--button-outline-active-surface": "--tint",
2762
2765
  "--button-outline-disabled-surface": "--color-transparent",
2763
2766
  "--button-outline-disabled-text": "--text-tertiary",
2764
2767
  "--button-outline-disabled-border": "--border-neutral-faint",
@@ -2930,8 +2933,8 @@
2930
2933
  "--card-default-body-line-height": "--line-height-normal",
2931
2934
  "--card-hover-border": "--border-neutral-strong",
2932
2935
  "--card-hover-shadow": "--shadow-md",
2933
- "--card-hover-border-active": "--card-default-border",
2934
- "--card-hover-shadow-active": "--card-default-shadow"
2936
+ "--card-hover-border-enabled": "--card-default-border",
2937
+ "--card-hover-shadow-enabled": "--card-default-shadow"
2935
2938
  },
2936
2939
  "config": {}
2937
2940
  },
@@ -3086,7 +3089,7 @@
3086
3089
  "createdAt": "2026-05-10T20:05:24.719Z",
3087
3090
  "updatedAt": "2026-08-19T22:39:32.785Z",
3088
3091
  "aliases": {
3089
- "--dialog-overlay-surface": "--overlay-high",
3092
+ "--dialog-scrim-surface": "--scrim-high",
3090
3093
  "--dialog-surface": "--surface-neutral-lowest",
3091
3094
  "--dialog-border": "--border-neutral-strong",
3092
3095
  "--dialog-border-width": "--border-width-2",
@@ -3121,6 +3124,8 @@
3121
3124
  "createdAt": "2026-06-14T00:00:00.000Z",
3122
3125
  "updatedAt": "2026-08-19T22:39:32.785Z",
3123
3126
  "aliases": {
3127
+ "--iconbutton-hover-tint": "--tint",
3128
+ "--iconbutton-hover-tint-enabled": "--color-transparent",
3124
3129
  "--iconbutton-primary-surface": "--surface-brand",
3125
3130
  "--iconbutton-primary-icon": "--text-primary",
3126
3131
  "--iconbutton-primary-border": "--border-brand",
@@ -3157,7 +3162,7 @@
3157
3162
  "--iconbutton-outline-hover-surface": "--surface-neutral-lower",
3158
3163
  "--iconbutton-outline-hover-icon": "--text-primary",
3159
3164
  "--iconbutton-outline-hover-border": "--border-neutral-strong",
3160
- "--iconbutton-outline-active-surface": "--hover",
3165
+ "--iconbutton-outline-active-surface": "--tint",
3161
3166
  "--iconbutton-outline-disabled-surface": "--color-transparent",
3162
3167
  "--iconbutton-outline-disabled-icon": "--text-tertiary",
3163
3168
  "--iconbutton-outline-disabled-border": "--border-neutral-faint",
@@ -3337,6 +3342,8 @@
3337
3342
  "createdAt": "2026-05-16T00:00:00.000Z",
3338
3343
  "updatedAt": "2026-08-19T22:39:32.785Z",
3339
3344
  "aliases": {
3345
+ "--menuselect-hover-tint": "--tint",
3346
+ "--menuselect-hover-tint-enabled": "--color-transparent",
3340
3347
  "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 95%, transparent)",
3341
3348
  "--menuselect-menu-border": "--border-neutral-medium",
3342
3349
  "--menuselect-menu-border-width": "--border-width-1",
@@ -3656,6 +3663,8 @@
3656
3663
  "createdAt": "2026-04-28T21:13:17.669Z",
3657
3664
  "updatedAt": "2026-08-20T00:00:00.000Z",
3658
3665
  "aliases": {
3666
+ "--segmentedcontrol-hover-tint": "--tint",
3667
+ "--segmentedcontrol-hover-tint-enabled": "--color-transparent",
3659
3668
  "--segmentedcontrol-bar-surface": "color-mix(in srgb, var(--surface-neutral-lowest) 75%, transparent)",
3660
3669
  "--segmentedcontrol-bar-border": "--border-neutral",
3661
3670
  "--segmentedcontrol-bar-border-width": "--border-width-1",
@@ -3716,6 +3725,8 @@
3716
3725
  "createdAt": "2026-05-25T19:34:09.771Z",
3717
3726
  "updatedAt": "2026-08-20T00:00:00.000Z",
3718
3727
  "aliases": {
3728
+ "--sidenavigation-hover-tint": "--tint",
3729
+ "--sidenavigation-hover-tint-enabled": "--color-transparent",
3719
3730
  "--sidenavigation-panel-surface": "--surface-canvas-lower",
3720
3731
  "--sidenavigation-panel-border": "--border-canvas-faint",
3721
3732
  "--sidenavigation-panel-border-width": "--border-width-1",
@@ -3876,6 +3887,8 @@
3876
3887
  "createdAt": "2026-05-12T01:57:26.390Z",
3877
3888
  "updatedAt": "2026-08-20T00:00:00.000Z",
3878
3889
  "aliases": {
3890
+ "--tabbar-hover-tint": "--tint",
3891
+ "--tabbar-hover-tint-enabled": "--color-transparent",
3879
3892
  "--tabbar-bar-divider": "--border-neutral-subtle",
3880
3893
  "--tabbar-bar-divider-thickness": "--border-width-1",
3881
3894
  "--tabbar-bar-top-margin": "--space-0",
@@ -3912,7 +3925,7 @@
3912
3925
  "--tabbar-hover-indicator-border-width": "--border-width-2",
3913
3926
  "--tabbar-active-text": "--text-primary",
3914
3927
  "--tabbar-active-border": "--color-brand-500",
3915
- "--tabbar-active-surface": "--overlay-low",
3928
+ "--tabbar-active-surface": "--tint-low",
3916
3929
  "--tabbar-active-text-font-family": "--font-sans",
3917
3930
  "--tabbar-active-text-font-size": "--font-size-md",
3918
3931
  "--tabbar-active-text-font-weight": "--font-weight-light",
@@ -4024,7 +4037,62 @@
4024
4037
  "--tooltip-padding": "--space-6",
4025
4038
  "--tooltip-shadow": "--shadow-md"
4026
4039
  }
4040
+ },
4041
+ "slider": {
4042
+ "name": "midnight-study",
4043
+ "component": "slider",
4044
+ "createdAt": "2026-09-02T10:55:50.831Z",
4045
+ "updatedAt": "2026-09-02T10:55:50.831Z",
4046
+ "aliases": {
4047
+ "--slider-single-track-surface": "--surface-neutral-lowest",
4048
+ "--slider-single-track-border": "--border-neutral-subtle",
4049
+ "--slider-single-track-border-width": "--border-width-1",
4050
+ "--slider-single-track-height": "--space-8",
4051
+ "--slider-single-track-radius": "--radius-full",
4052
+ "--slider-single-fill": "--surface-brand-high",
4053
+ "--slider-single-thumb-surface": "--surface-neutral-highest",
4054
+ "--slider-single-thumb-border": "--border-brand",
4055
+ "--slider-single-thumb-border-width": "--border-width-2",
4056
+ "--slider-single-thumb-size": "--font-size-lg",
4057
+ "--slider-single-thumb-radius": "--radius-full",
4058
+ "--slider-single-thumb-shadow": "--shadow-sm",
4059
+ "--slider-single-hover-thumb-surface": "--surface-brand-high",
4060
+ "--slider-single-hover-thumb-border": "--border-brand-strong",
4061
+ "--slider-single-disabled-track-surface": "--surface-neutral-lower",
4062
+ "--slider-single-disabled-fill": "--surface-neutral",
4063
+ "--slider-single-disabled-thumb-surface": "--surface-neutral-lower",
4064
+ "--slider-single-disabled-thumb-border": "--border-neutral",
4065
+ "--slider-range-track-surface": "--surface-neutral-lowest",
4066
+ "--slider-range-track-border": "--border-neutral-subtle",
4067
+ "--slider-range-track-border-width": "--border-width-1",
4068
+ "--slider-range-track-height": "--space-8",
4069
+ "--slider-range-track-radius": "--radius-full",
4070
+ "--slider-range-fill": "--surface-brand-high",
4071
+ "--slider-range-thumb-surface": "--surface-neutral-highest",
4072
+ "--slider-range-thumb-border": "--border-brand",
4073
+ "--slider-range-thumb-border-width": "--border-width-2",
4074
+ "--slider-range-thumb-size": "--font-size-lg",
4075
+ "--slider-range-thumb-radius": "--radius-full",
4076
+ "--slider-range-thumb-shadow": "--shadow-sm",
4077
+ "--slider-range-hover-thumb-surface": "--surface-brand-high",
4078
+ "--slider-range-hover-thumb-border": "--border-brand-strong",
4079
+ "--slider-range-disabled-track-surface": "--surface-neutral-lower",
4080
+ "--slider-range-disabled-fill": "--surface-neutral",
4081
+ "--slider-range-disabled-thumb-surface": "--surface-neutral-lower",
4082
+ "--slider-range-disabled-thumb-border": "--border-neutral",
4083
+ "--slider-label-gap": "--space-6",
4084
+ "--slider-label": "--text-secondary",
4085
+ "--slider-label-font-family": "--font-sans",
4086
+ "--slider-label-font-size": "--font-size-md",
4087
+ "--slider-label-font-weight": "--font-weight-normal",
4088
+ "--slider-label-line-height": "--line-height-normal",
4089
+ "--slider-value": "--text-tertiary",
4090
+ "--slider-value-font-family": "--font-mono",
4091
+ "--slider-value-font-size": "--font-size-md",
4092
+ "--slider-value-font-weight": "--font-weight-normal",
4093
+ "--slider-value-line-height": "--line-height-normal"
4094
+ }
4027
4095
  }
4028
4096
  },
4029
- "componentSchemaVersion": 21
4097
+ "componentSchemaVersion": 25
4030
4098
  }
package/src/live-tokens/data/themes/ocean.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.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
@@ -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
  }