@motion-proto/live-tokens 0.40.0 → 0.41.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 (89) hide show
  1. package/CHANGELOG.md +115 -0
  2. package/dist-plugin/{chunk-D77VD4Z6.js → chunk-H4TRUINI.js} +102 -13
  3. package/dist-plugin/index.cjs +288 -67
  4. package/dist-plugin/index.js +171 -55
  5. package/dist-plugin/tokensCssMigrations/index.cjs +102 -13
  6. package/dist-plugin/tokensCssMigrations/index.js +1 -1
  7. package/package.json +3 -2
  8. package/src/app/site.css +97 -20
  9. package/src/editor/core/palettes/colorHarmony.ts +228 -0
  10. package/src/editor/core/palettes/contrast.ts +128 -0
  11. package/src/editor/core/palettes/oklch.ts +8 -0
  12. package/src/editor/core/palettes/paletteDerivation.ts +267 -72
  13. package/src/editor/core/palettes/recommendText.ts +216 -0
  14. package/src/editor/core/palettes/solveTextContrast.ts +251 -0
  15. package/src/editor/core/store/editorCore.ts +2 -1
  16. package/src/editor/core/store/editorPersistence.ts +18 -1
  17. package/src/editor/core/store/editorStore.ts +20 -1
  18. package/src/editor/core/store/editorTypes.ts +4 -0
  19. package/src/editor/core/store/editorViewStore.ts +7 -3
  20. package/src/editor/core/themes/migrations/2026-06-05-palette-unification.ts +11 -9
  21. package/src/editor/core/themes/migrations/2026-07-21-palette-oklch-basis.ts +51 -0
  22. package/src/editor/core/themes/migrations/2026-07-24-base-anchor-placement.ts +37 -0
  23. package/src/editor/core/themes/migrations/2026-07-25-background-spot-to-base.ts +40 -0
  24. package/src/editor/core/themes/themeTypes.ts +23 -3
  25. package/src/editor/docs/CodeBlock.svelte +1 -1
  26. package/src/editor/docs/Docs.svelte +30 -13
  27. package/src/editor/pages/EditorShell.svelte +31 -3
  28. package/src/editor/ui/ColorEditPanel.svelte +22 -16
  29. package/src/editor/ui/EditorViewSwitcher.svelte +43 -9
  30. package/src/editor/ui/FontStackEditor.svelte +0 -1
  31. package/src/editor/ui/PaletteEditor.svelte +117 -155
  32. package/src/editor/ui/ProjectFontsSection.svelte +0 -3
  33. package/src/editor/ui/TextStylesSection.svelte +173 -0
  34. package/src/editor/ui/UILineHeightSelector.svelte +6 -5
  35. package/src/editor/ui/UIPaletteSelector.svelte +6 -1
  36. package/src/editor/ui/UITextTransformSelector.svelte +106 -0
  37. package/src/editor/ui/VariablesTab.svelte +23 -10
  38. package/src/editor/ui/colors/ColorReadouts.svelte +123 -0
  39. package/src/editor/ui/colors/ColorStory.svelte +375 -0
  40. package/src/editor/ui/colors/ColorWheel.svelte +740 -0
  41. package/src/editor/ui/colors/ColorsTab.svelte +508 -0
  42. package/src/editor/ui/colors/HarmonyAxesList.svelte +320 -0
  43. package/src/editor/ui/colors/LightnessBar.svelte +261 -0
  44. package/src/editor/ui/colors/PaletteStepStrip.svelte +142 -0
  45. package/src/editor/ui/colors/colorWheelMath.ts +9 -0
  46. package/src/editor/ui/colors/harmony-icons/analogous.svg +13 -0
  47. package/src/editor/ui/colors/harmony-icons/complementary.svg +10 -0
  48. package/src/editor/ui/colors/harmony-icons/compound.svg +15 -0
  49. package/src/editor/ui/colors/harmony-icons/custom.svg +10 -0
  50. package/src/editor/ui/colors/harmony-icons/monochromatic.svg +11 -0
  51. package/src/editor/ui/colors/harmony-icons/shades.svg +9 -0
  52. package/src/editor/ui/colors/harmony-icons/split-complementary.svg +13 -0
  53. package/src/editor/ui/colors/harmony-icons/square.svg +13 -0
  54. package/src/editor/ui/colors/harmony-icons/tetradic.svg +15 -0
  55. package/src/editor/ui/colors/harmony-icons/triadic.svg +13 -0
  56. package/src/editor/ui/colors/harmonyModeIcons.ts +23 -0
  57. package/src/editor/ui/colors/paletteBaseColor.ts +214 -0
  58. package/src/editor/ui/index.ts +0 -1
  59. package/src/editor/ui/palette/OverridesPanel.svelte +6 -3
  60. package/src/editor/ui/palette/PaletteBase.svelte +16 -8
  61. package/src/editor/ui/palette/dockMagnify.ts +22 -0
  62. package/src/editor/ui/palette/paletteEditorState.ts +5 -4
  63. package/src/editor/ui/palette/paletteMath.ts +93 -181
  64. package/src/editor/ui/sections/textStyles.ts +82 -0
  65. package/src/editor/ui/sections/tokenScales.ts +3 -3
  66. package/src/live-tokens/data/themes/default.json +3 -3
  67. package/src/live-tokens/data/tokens.generated.css +96 -95
  68. package/src/system/components/Badge.svelte +11 -11
  69. package/src/system/components/Button.svelte +7 -7
  70. package/src/system/components/Callout.svelte +8 -8
  71. package/src/system/components/Card.svelte +2 -2
  72. package/src/system/components/CodeSnippet.svelte +1 -1
  73. package/src/system/components/CollapsibleSection.svelte +7 -7
  74. package/src/system/components/CornerBadge.svelte +1 -1
  75. package/src/system/components/Dialog.svelte +2 -2
  76. package/src/system/components/FloatingTokenTags.css +6 -5
  77. package/src/system/components/Input.svelte +6 -6
  78. package/src/system/components/MenuSelect.svelte +4 -4
  79. package/src/system/components/Notification.svelte +8 -8
  80. package/src/system/components/ProgressBar.svelte +2 -2
  81. package/src/system/components/RadioButton.svelte +4 -4
  82. package/src/system/components/SectionDivider.svelte +6 -6
  83. package/src/system/components/SegmentedControl.svelte +5 -5
  84. package/src/system/components/SideNavigation.svelte +12 -12
  85. package/src/system/components/TabBar.svelte +4 -4
  86. package/src/system/components/Table.svelte +2 -2
  87. package/src/system/components/Tooltip.svelte +1 -1
  88. package/src/system/styles/tokens.css +59 -6
  89. package/src/editor/ui/TextTab.svelte +0 -203
package/src/editor/ui/TextTab.svelte DELETED
@@ -1,203 +0,0 @@
1
- <script lang="ts">
2
- interface TextColorGroup {
3
- title: string;
4
- colors: Array<{ name: string; variable: string; description: string }>;
5
- }
6
-
7
- const textColorGroups: TextColorGroup[] = [
8
- {
9
- title: 'Base Text Colors',
10
- colors: [
11
- { name: 'Primary', variable: '--text-primary', description: 'Main text color' },
12
- { name: 'Secondary', variable: '--text-secondary', description: 'Less prominent text' },
13
- { name: 'Tertiary', variable: '--text-tertiary', description: 'Subtle text' },
14
- { name: 'Muted', variable: '--text-muted', description: 'De-emphasized text' },
15
- { name: 'Disabled', variable: '--text-disabled', description: 'Disabled state text' },
16
- { name: 'Inverted', variable: '--text-inverted', description: 'Dark text for light backgrounds' }
17
- ]
18
- },
19
- {
20
- title: 'Brand Text Colors (Crimson)',
21
- colors: [
22
- { name: 'Brand', variable: '--text-brand', description: 'Primary - Main text color' },
23
- { name: 'Brand Secondary', variable: '--text-brand-secondary', description: 'Secondary - Less prominent' },
24
- { name: 'Brand Tertiary', variable: '--text-brand-tertiary', description: 'Tertiary - Subtle text' },
25
- { name: 'Brand Muted', variable: '--text-brand-muted', description: 'Muted - De-emphasized' },
26
- { name: 'Brand Disabled', variable: '--text-brand-disabled', description: 'Disabled - Disabled state' }
27
- ]
28
- },
29
- {
30
- title: 'Accent Text Colors (Amber)',
31
- colors: [
32
- { name: 'Accent', variable: '--text-accent', description: 'Primary - Main text color' },
33
- { name: 'Accent Secondary', variable: '--text-accent-secondary', description: 'Secondary - Less prominent' },
34
- { name: 'Accent Tertiary', variable: '--text-accent-tertiary', description: 'Tertiary - Subtle text' },
35
- { name: 'Accent Muted', variable: '--text-accent-muted', description: 'Muted - De-emphasized' },
36
- { name: 'Accent Disabled', variable: '--text-accent-disabled', description: 'Disabled - Disabled state' }
37
- ]
38
- },
39
- {
40
- title: 'Success Text Colors',
41
- colors: [
42
- { name: 'Success', variable: '--text-success', description: 'Primary - Main text color' },
43
- { name: 'Success Secondary', variable: '--text-success-secondary', description: 'Secondary - Less prominent' },
44
- { name: 'Success Tertiary', variable: '--text-success-tertiary', description: 'Tertiary - Subtle text' },
45
- { name: 'Success Muted', variable: '--text-success-muted', description: 'Muted - De-emphasized' },
46
- { name: 'Success Disabled', variable: '--text-success-disabled', description: 'Disabled - Disabled state' }
47
- ]
48
- },
49
- {
50
- title: 'Warning Text Colors',
51
- colors: [
52
- { name: 'Warning', variable: '--text-warning', description: 'Primary - Main text color' },
53
- { name: 'Warning Secondary', variable: '--text-warning-secondary', description: 'Secondary - Less prominent' },
54
- { name: 'Warning Tertiary', variable: '--text-warning-tertiary', description: 'Tertiary - Subtle text' },
55
- { name: 'Warning Muted', variable: '--text-warning-muted', description: 'Muted - De-emphasized' },
56
- { name: 'Warning Disabled', variable: '--text-warning-disabled', description: 'Disabled - Disabled state' }
57
- ]
58
- },
59
- {
60
- title: 'Info Text Colors',
61
- colors: [
62
- { name: 'Info', variable: '--text-info', description: 'Primary - Main text color' },
63
- { name: 'Info Secondary', variable: '--text-info-secondary', description: 'Secondary - Less prominent' },
64
- { name: 'Info Tertiary', variable: '--text-info-tertiary', description: 'Tertiary - Subtle text' },
65
- { name: 'Info Muted', variable: '--text-info-muted', description: 'Muted - De-emphasized' },
66
- { name: 'Info Disabled', variable: '--text-info-disabled', description: 'Disabled - Disabled state' }
67
- ]
68
- },
69
- {
70
- title: 'Danger Text Colors',
71
- colors: [
72
- { name: 'Danger', variable: '--text-danger', description: 'Primary - Main text color' },
73
- { name: 'Danger Secondary', variable: '--text-danger-secondary', description: 'Secondary - Less prominent' },
74
- { name: 'Danger Tertiary', variable: '--text-danger-tertiary', description: 'Tertiary - Subtle text' },
75
- { name: 'Danger Muted', variable: '--text-danger-muted', description: 'Muted - De-emphasized' },
76
- { name: 'Danger Disabled', variable: '--text-danger-disabled', description: 'Disabled - Disabled state' }
77
- ]
78
- }
79
- ];
80
-
81
- let copiedVar: string | null = $state(null);
82
- function copyVariable(v: string) {
83
- navigator.clipboard.writeText(v);
84
- copiedVar = v;
85
- setTimeout(() => { copiedVar = null; }, 1000);
86
- }
87
- </script>
88
-
89
- <div class="text-container">
90
- {#each textColorGroups as group}
91
- <section class="color-group">
92
- <h3 class="group-title">{group.title}</h3>
93
- <div class="text-colors-grid">
94
- {#each group.colors as color}
95
- <div class="text-color-card">
96
- <div
97
- class="text-color-preview"
98
- style="color: var({color.variable});"
99
- >
100
- Ag
101
- </div>
102
- <div class="text-color-info">
103
- <button class="text-color-name copyable" class:copied={copiedVar === color.variable} onclick={() => copyVariable(color.variable)}>{copiedVar === color.variable ? 'copied!' : color.name}</button>
104
- <div class="text-color-variable">{color.variable}</div>
105
- <div class="text-color-description">{color.description}</div>
106
- </div>
107
- </div>
108
- {/each}
109
- </div>
110
- </section>
111
- {/each}
112
- </div>
113
-
114
- <style>
115
- .text-container {
116
- display: flex;
117
- flex-direction: column;
118
- gap: var(--ui-space-24);
119
- }
120
-
121
- .color-group {
122
- display: flex;
123
- flex-direction: column;
124
- gap: var(--ui-space-12);
125
- }
126
-
127
- .group-title {
128
- font-size: var(--ui-font-size-lg);
129
- font-weight: var(--ui-font-weight-semibold);
130
- color: var(--ui-text-secondary);
131
- margin: 0;
132
- padding-bottom: var(--ui-space-4);
133
- border-bottom: 1px solid var(--ui-border-low);
134
- }
135
-
136
- .text-colors-grid {
137
- display: grid;
138
- grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
139
- gap: var(--ui-space-12);
140
- }
141
-
142
- .text-color-card {
143
- background: var(--ui-surface-low);
144
- border: 1px solid var(--ui-border-low);
145
- border-radius: var(--ui-radius-md);
146
- padding: var(--ui-space-12);
147
- display: flex;
148
- flex-direction: column;
149
- gap: var(--ui-space-8);
150
- align-items: center;
151
- }
152
-
153
- .text-color-preview {
154
- font-size: var(--font-size-4xl);
155
- font-weight: var(--ui-font-weight-bold);
156
- line-height: 1;
157
- }
158
-
159
- .text-color-info {
160
- display: flex;
161
- flex-direction: column;
162
- gap: var(--ui-space-2);
163
- align-items: center;
164
- text-align: center;
165
- }
166
-
167
- .text-color-name {
168
- font-size: var(--ui-font-size-sm);
169
- font-weight: var(--ui-font-weight-semibold);
170
- color: var(--ui-text-primary);
171
- }
172
-
173
- .text-color-name.copyable {
174
- all: unset;
175
- font-size: var(--ui-font-size-sm);
176
- font-weight: var(--ui-font-weight-semibold);
177
- color: var(--ui-text-primary);
178
- cursor: pointer;
179
- transition: color var(--ui-transition-fast);
180
- }
181
-
182
- .text-color-name.copyable:hover {
183
- color: var(--ui-text-accent);
184
- }
185
-
186
- .text-color-name.copyable.copied {
187
- color: var(--ui-text-success);
188
- }
189
-
190
- .text-color-variable {
191
- font-size: var(--ui-font-size-xs);
192
- color: var(--ui-text-tertiary);
193
- font-family: var(--ui-font-mono);
194
- background: var(--ui-surface-lowest);
195
- padding: var(--ui-space-2) var(--ui-space-4);
196
- border-radius: var(--ui-radius-sm);
197
- }
198
-
199
- .text-color-description {
200
- font-size: var(--ui-font-size-xs);
201
- color: var(--ui-text-muted);
202
- }
203
- </style>