@motion-proto/live-tokens 0.1.1 → 0.3.2

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 (224) hide show
  1. package/README.md +168 -21
  2. package/dist-plugin/index.cjs +823 -336
  3. package/dist-plugin/index.d.cts +9 -7
  4. package/dist-plugin/index.d.ts +9 -7
  5. package/dist-plugin/index.js +822 -335
  6. package/package.json +46 -20
  7. package/src/assets/newspaper.webp +0 -0
  8. package/src/assets/offering.webp +0 -0
  9. package/src/component-editor/BadgeEditor.svelte +170 -0
  10. package/src/component-editor/CalloutEditor.svelte +103 -0
  11. package/src/component-editor/CardEditor.svelte +184 -0
  12. package/src/component-editor/CollapsibleSectionEditor.svelte +167 -0
  13. package/src/component-editor/CornerBadgeEditor.svelte +207 -0
  14. package/src/component-editor/DialogEditor.svelte +172 -0
  15. package/src/component-editor/ImageEditor.svelte +72 -0
  16. package/src/component-editor/InlineEditActionsEditor.svelte +83 -0
  17. package/src/component-editor/NotificationEditor.svelte +160 -0
  18. package/src/component-editor/ProgressBarEditor.svelte +124 -0
  19. package/src/component-editor/RadioButtonEditor.svelte +140 -0
  20. package/src/component-editor/SectionDividerEditor.svelte +263 -0
  21. package/src/component-editor/SegmentedControlEditor.svelte +154 -0
  22. package/src/component-editor/StandardButtonsEditor.svelte +178 -0
  23. package/src/component-editor/TabBarEditor.svelte +137 -0
  24. package/src/component-editor/TableEditor.svelte +128 -0
  25. package/src/component-editor/TooltipEditor.svelte +122 -0
  26. package/src/component-editor/editorTokens.test.ts +93 -0
  27. package/src/component-editor/groupKeySlots.test.ts +67 -0
  28. package/src/component-editor/groupKeySnapshot.test.ts +52 -0
  29. package/src/component-editor/index.ts +5 -0
  30. package/src/component-editor/registry.ts +246 -0
  31. package/src/component-editor/scaffolding/AngleDial.svelte +185 -0
  32. package/src/component-editor/scaffolding/ComponentEditorBase.svelte +96 -0
  33. package/src/component-editor/scaffolding/ComponentFileManager.svelte +682 -0
  34. package/src/component-editor/scaffolding/ComponentFileMenu.svelte +312 -0
  35. package/src/component-editor/scaffolding/ComponentsTab.svelte +69 -0
  36. package/src/component-editor/scaffolding/CopyFromMenu.svelte +246 -0
  37. package/src/component-editor/scaffolding/DemoHeader.svelte +21 -0
  38. package/src/component-editor/scaffolding/DividerEditor.svelte +81 -0
  39. package/src/component-editor/scaffolding/FieldsetWrapper.svelte +46 -0
  40. package/src/component-editor/scaffolding/GradientCard.svelte +291 -0
  41. package/src/component-editor/scaffolding/LinkageChart.svelte +297 -0
  42. package/src/component-editor/scaffolding/LinkedBlock.svelte +418 -0
  43. package/src/component-editor/scaffolding/NonStylableConfig.svelte +57 -0
  44. package/src/component-editor/scaffolding/SaveAsDialog.svelte +177 -0
  45. package/src/component-editor/scaffolding/ShadowBackdrop.svelte +25 -0
  46. package/src/component-editor/scaffolding/ShadowBackdropControls.svelte +56 -0
  47. package/src/component-editor/scaffolding/StateBlock.svelte +115 -0
  48. package/src/component-editor/scaffolding/TokenLayout.svelte +511 -0
  49. package/src/component-editor/scaffolding/TypeEditor.svelte +82 -0
  50. package/src/component-editor/scaffolding/VariantGroup.svelte +277 -0
  51. package/src/component-editor/scaffolding/buildTypeGroupTokens.ts +97 -0
  52. package/src/component-editor/scaffolding/componentSectionType.ts +8 -0
  53. package/src/component-editor/scaffolding/componentSources.ts +9 -0
  54. package/src/component-editor/scaffolding/defaultSections.ts +16 -0
  55. package/src/component-editor/scaffolding/editorContext.ts +44 -0
  56. package/src/component-editor/scaffolding/linkedBlock.ts +226 -0
  57. package/src/component-editor/scaffolding/siblings.ts +33 -0
  58. package/src/component-editor/scaffolding/types.ts +39 -0
  59. package/src/components/Badge.svelte +231 -42
  60. package/src/components/Button.svelte +324 -124
  61. package/src/components/Callout.svelte +145 -0
  62. package/src/components/Card.svelte +123 -25
  63. package/src/components/CollapsibleSection.svelte +213 -35
  64. package/src/components/CornerBadge.svelte +224 -0
  65. package/src/components/Dialog.svelte +137 -114
  66. package/src/components/Image.svelte +43 -0
  67. package/src/components/InlineEditActions.svelte +74 -14
  68. package/src/components/Notification.svelte +184 -163
  69. package/src/components/ProgressBar.svelte +216 -22
  70. package/src/components/RadioButton.svelte +110 -40
  71. package/src/components/SectionDivider.svelte +428 -74
  72. package/src/components/SegmentedControl.svelte +203 -0
  73. package/src/components/TabBar.svelte +146 -21
  74. package/src/components/Table.svelte +102 -0
  75. package/src/components/Tooltip.svelte +45 -19
  76. package/src/components/types.ts +51 -0
  77. package/src/data/google-fonts.json +75 -0
  78. package/src/lib/ColumnsOverlay.svelte +20 -7
  79. package/src/lib/LiveEditorOverlay.svelte +257 -78
  80. package/src/lib/columnsOverlay.ts +21 -17
  81. package/src/lib/componentConfig.test.ts +204 -0
  82. package/src/lib/componentConfigKeys.ts +19 -0
  83. package/src/lib/componentConfigService.ts +88 -0
  84. package/src/lib/copyPopover.ts +30 -0
  85. package/src/lib/cssVarSync.ts +59 -7
  86. package/src/lib/editorConfigStore.ts +0 -10
  87. package/src/lib/editorCore.ts +402 -0
  88. package/src/lib/editorKeybindings.ts +52 -0
  89. package/src/lib/editorPersistence.ts +106 -0
  90. package/src/lib/editorRenderer.ts +74 -0
  91. package/src/lib/editorStore.test.ts +328 -0
  92. package/src/lib/editorStore.ts +412 -0
  93. package/src/lib/editorTypes.ts +100 -0
  94. package/src/lib/editorViewStore.ts +55 -0
  95. package/src/lib/files/versionedFileResource.ts +140 -0
  96. package/src/lib/fontLoader.ts +130 -0
  97. package/src/lib/fontMigration.ts +140 -0
  98. package/src/lib/fontParse.ts +168 -0
  99. package/src/lib/index.ts +48 -30
  100. package/src/lib/lazyConfig.test.ts +54 -0
  101. package/src/lib/migrations/2026-04-24-component-prefix-and-suffix-renames.ts +64 -0
  102. package/src/lib/migrations/2026-04-24-legacy-keys-and-bg-to-canvas.ts +71 -0
  103. package/src/lib/migrations/2026-04-27-segmentedcontrol-disabled-flatten.ts +43 -0
  104. package/src/lib/migrations/2026-05-08-collapsiblesection-frame-and-cleanup.ts +68 -0
  105. package/src/lib/migrations/2026-05-08-collapsiblesection-variant-namespace.ts +35 -0
  106. package/src/lib/migrations/2026-05-10-sectiondivider-gradient-stops.ts +50 -0
  107. package/src/lib/migrations/2026-05-13-primary-to-brand.ts +90 -0
  108. package/src/lib/migrations/index.ts +93 -0
  109. package/src/lib/migrations/migrations.test.ts +341 -0
  110. package/src/lib/navLinkTypes.ts +1 -0
  111. package/src/lib/overlayState.ts +3 -0
  112. package/src/lib/paletteDerivation.ts +300 -0
  113. package/src/lib/parentRouteStore.ts +42 -0
  114. package/src/lib/parsers/globalRootBlock.ts +32 -0
  115. package/src/lib/presetService.ts +94 -0
  116. package/src/lib/router.ts +42 -10
  117. package/src/lib/scrollSection.ts +45 -0
  118. package/src/lib/slices/columns.ts +59 -0
  119. package/src/lib/slices/components.ts +362 -0
  120. package/src/lib/slices/domainVars.ts +15 -0
  121. package/src/lib/slices/fonts.ts +30 -0
  122. package/src/lib/slices/gradients.ts +153 -0
  123. package/src/lib/slices/overlays.ts +132 -0
  124. package/src/lib/slices/palettes.ts +26 -0
  125. package/src/lib/slices/shadows.ts +123 -0
  126. package/src/lib/storage.ts +88 -0
  127. package/src/lib/themeInit.ts +74 -0
  128. package/src/lib/themeService.ts +101 -0
  129. package/src/lib/themeTypes.ts +146 -0
  130. package/src/lib/tokenRegistry.ts +148 -0
  131. package/src/pages/ComponentEditorPage.svelte +384 -0
  132. package/src/pages/ComponentEditorPage.svelte.d.ts +2 -0
  133. package/src/pages/Editor.svelte +98 -0
  134. package/src/pages/Editor.svelte.d.ts +2 -0
  135. package/src/pages/EditorShell.svelte +348 -0
  136. package/src/styles/_padding.scss +34 -0
  137. package/src/styles/fonts/Fraunces/Fraunces-italic-latin-ext.woff2 +0 -0
  138. package/src/styles/fonts/Fraunces/Fraunces-italic-latin.woff2 +0 -0
  139. package/src/styles/fonts/Fraunces/Fraunces-roman-latin-ext.woff2 +0 -0
  140. package/src/styles/fonts/Fraunces/Fraunces-roman-latin.woff2 +0 -0
  141. package/src/styles/fonts/Manrope/Manrope-latin-ext.woff2 +0 -0
  142. package/src/styles/fonts/Manrope/Manrope-latin.woff2 +0 -0
  143. package/src/styles/fonts.css +22 -10
  144. package/src/styles/form-controls.css +14 -16
  145. package/src/styles/tokens.css +1322 -0
  146. package/src/styles/ui-editor.css +126 -0
  147. package/src/{showcase → ui}/BezierCurveEditor.svelte +14 -14
  148. package/src/{showcase → ui}/ColorEditPanel.svelte +42 -36
  149. package/src/ui/EditorViewSwitcher.svelte +180 -0
  150. package/src/ui/FontStackEditor.svelte +360 -0
  151. package/src/ui/GradientEditor.svelte +461 -0
  152. package/src/ui/GradientStopPicker.svelte +74 -0
  153. package/src/ui/PaletteEditor.svelte +1590 -0
  154. package/src/ui/PaletteEditor.test.ts +108 -0
  155. package/src/ui/PresetFileManager.svelte +567 -0
  156. package/src/ui/ProjectFontsSection.svelte +645 -0
  157. package/src/{showcase → ui}/SurfacesTab.svelte +39 -39
  158. package/src/{showcase → ui}/TextTab.svelte +27 -27
  159. package/src/{showcase/TokenFileManager.svelte → ui/ThemeFileManager.svelte} +196 -112
  160. package/src/ui/Toggle.svelte +108 -0
  161. package/src/ui/UICopyPopover.svelte +78 -0
  162. package/src/{showcase/EditorDialog.svelte → ui/UIDialog.svelte} +66 -25
  163. package/src/ui/UIFontFamilySelector.svelte +309 -0
  164. package/src/ui/UIFontSizeSelector.svelte +165 -0
  165. package/src/ui/UIFontWeightSelector.svelte +52 -0
  166. package/src/ui/UILineHeightSelector.svelte +47 -0
  167. package/src/ui/UILinkToggle.svelte +60 -0
  168. package/src/ui/UIOptionItem.svelte +74 -0
  169. package/src/ui/UIOptionList.svelte +27 -0
  170. package/src/ui/UIPaddingSelector.svelte +661 -0
  171. package/src/ui/UIPaletteSelector.svelte +1084 -0
  172. package/src/ui/UIRadio.svelte +72 -0
  173. package/src/ui/UIRadioGroup.svelte +59 -0
  174. package/src/ui/UIRelinkConfirmPopover.svelte +235 -0
  175. package/src/ui/UITokenSelector.svelte +509 -0
  176. package/src/ui/UIVariantSelector.svelte +145 -0
  177. package/src/ui/VariablesTab.svelte +252 -0
  178. package/src/ui/index.ts +31 -0
  179. package/src/ui/keepInViewport.ts +84 -0
  180. package/src/ui/palette/GradientStopEditor.svelte +482 -0
  181. package/src/ui/palette/OverridesPanel.svelte +526 -0
  182. package/src/ui/palette/PaletteBase.svelte +165 -0
  183. package/src/ui/palette/ScaleCurveEditor.svelte +38 -0
  184. package/src/ui/palette/paletteEditorState.ts +89 -0
  185. package/src/ui/sections/ColumnsSection.svelte +273 -0
  186. package/src/ui/sections/GradientsSection.svelte +147 -0
  187. package/src/ui/sections/OverlaysSection.svelte +670 -0
  188. package/src/ui/sections/ShadowsSection.svelte +1250 -0
  189. package/src/ui/sections/TokenScaleTable.svelte +332 -0
  190. package/src/ui/sections/tokenScales.ts +81 -0
  191. package/src/ui/variantScales.ts +108 -0
  192. package/src/components/DetailNav.svelte +0 -78
  193. package/src/components/Toggle.svelte +0 -86
  194. package/src/lib/tokenInit.ts +0 -29
  195. package/src/lib/tokenService.ts +0 -144
  196. package/src/lib/tokenTypes.ts +0 -45
  197. package/src/pages/Admin.svelte +0 -100
  198. package/src/pages/ShowcasePage.svelte +0 -144
  199. package/src/showcase/BackupBrowser.svelte +0 -617
  200. package/src/showcase/ComponentsTab.svelte +0 -105
  201. package/src/showcase/PaletteEditor.svelte +0 -2579
  202. package/src/showcase/PaletteSelector.svelte +0 -627
  203. package/src/showcase/TokenMap.svelte +0 -54
  204. package/src/showcase/VariablesTab.svelte +0 -2655
  205. package/src/showcase/VisualsTab.svelte +0 -231
  206. package/src/showcase/demos/BadgeDemo.svelte +0 -56
  207. package/src/showcase/demos/CardDemo.svelte +0 -50
  208. package/src/showcase/demos/ChoiceButtonsDemo.svelte +0 -192
  209. package/src/showcase/demos/CollapsibleSectionDemo.svelte +0 -54
  210. package/src/showcase/demos/DialogDemo.svelte +0 -42
  211. package/src/showcase/demos/InlineEditActionsDemo.svelte +0 -25
  212. package/src/showcase/demos/NotificationDemo.svelte +0 -147
  213. package/src/showcase/demos/ProgressBarDemo.svelte +0 -54
  214. package/src/showcase/demos/RadioButtonDemo.svelte +0 -56
  215. package/src/showcase/demos/SectionDividerDemo.svelte +0 -77
  216. package/src/showcase/demos/StandardButtonsDemo.svelte +0 -455
  217. package/src/showcase/demos/TabBarDemo.svelte +0 -58
  218. package/src/showcase/demos/TooltipDemo.svelte +0 -52
  219. package/src/showcase/editor.css +0 -93
  220. package/src/showcase/index.ts +0 -17
  221. package/src/styles/fonts/Domine/Domine-VariableFont_wght.ttf +0 -0
  222. package/src/styles/fonts/Domine/OFL.txt +0 -97
  223. package/src/styles/fonts/Domine/README.txt +0 -66
  224. /package/src/{showcase → ui}/curveEngine.ts +0 -0
package/src/{showcase → ui}/SurfacesTab.svelte RENAMED
@@ -41,15 +41,15 @@
41
41
  ]
42
42
  },
43
43
  {
44
- title: 'Primary (Crimson)',
44
+ title: 'Brand (Crimson)',
45
45
  swatches: [
46
- { name: 'Lowest', variable: '--surface-primary-lowest', description: 'Deepest' },
47
- { name: 'Lower', variable: '--surface-primary-lower', description: 'Barely perceptible' },
48
- { name: 'Low', variable: '--surface-primary-low', description: 'Subtle' },
49
- { name: 'Primary', variable: '--surface-primary', description: 'Default' },
50
- { name: 'High', variable: '--surface-primary-high', description: 'More prominent' },
51
- { name: 'Higher', variable: '--surface-primary-higher', description: 'Very prominent' },
52
- { name: 'Highest', variable: '--surface-primary-highest', description: 'Most prominent' }
46
+ { name: 'Lowest', variable: '--surface-brand-lowest', description: 'Deepest' },
47
+ { name: 'Lower', variable: '--surface-brand-lower', description: 'Barely perceptible' },
48
+ { name: 'Low', variable: '--surface-brand-low', description: 'Subtle' },
49
+ { name: 'Brand', variable: '--surface-brand', description: 'Default' },
50
+ { name: 'High', variable: '--surface-brand-high', description: 'More prominent' },
51
+ { name: 'Higher', variable: '--surface-brand-higher', description: 'Very prominent' },
52
+ { name: 'Highest', variable: '--surface-brand-highest', description: 'Most prominent' }
53
53
  ]
54
54
  },
55
55
  {
@@ -139,19 +139,19 @@
139
139
  borders: [
140
140
  { name: 'Faint', variable: '--border-neutral-faint' },
141
141
  { name: 'Subtle', variable: '--border-neutral-subtle' },
142
- { name: 'Default', variable: '--border-neutral-default' },
142
+ { name: 'Default', variable: '--border-neutral' },
143
143
  { name: 'Medium', variable: '--border-neutral-medium' },
144
144
  { name: 'Strong', variable: '--border-neutral-strong' }
145
145
  ]
146
146
  },
147
147
  {
148
- title: 'Primary (Crimson)',
148
+ title: 'Brand (Crimson)',
149
149
  borders: [
150
- { name: 'Faint', variable: '--border-primary-faint' },
151
- { name: 'Subtle', variable: '--border-primary-subtle' },
152
- { name: 'Primary', variable: '--border-primary' },
153
- { name: 'Medium', variable: '--border-primary-medium' },
154
- { name: 'Strong', variable: '--border-primary-strong' }
150
+ { name: 'Faint', variable: '--border-brand-faint' },
151
+ { name: 'Subtle', variable: '--border-brand-subtle' },
152
+ { name: 'Brand', variable: '--border-brand' },
153
+ { name: 'Medium', variable: '--border-brand-medium' },
154
+ { name: 'Strong', variable: '--border-brand-strong' }
155
155
  ]
156
156
  },
157
157
  {
@@ -262,40 +262,40 @@
262
262
  .surfaces-container {
263
263
  display: flex;
264
264
  flex-direction: column;
265
- gap: var(--space-32);
265
+ gap: var(--ui-space-32);
266
266
  }
267
267
 
268
268
  .section {
269
269
  display: flex;
270
270
  flex-direction: column;
271
- gap: var(--space-16);
271
+ gap: var(--ui-space-16);
272
272
  }
273
273
 
274
274
  .section-title {
275
- font-size: var(--font-lg);
276
- font-weight: var(--font-weight-semibold);
275
+ font-size: var(--ui-font-size-lg);
276
+ font-weight: var(--ui-font-weight-semibold);
277
277
  color: var(--ui-text-primary);
278
278
  margin: 0;
279
- padding-bottom: var(--space-8);
279
+ padding-bottom: var(--ui-space-8);
280
280
  border-bottom: 1px solid var(--ui-border-subtle);
281
281
  }
282
282
 
283
283
  .swatch-groups-grid {
284
284
  display: grid;
285
285
  grid-template-columns: repeat(auto-fill, minmax(min(28rem, 100%), 1fr));
286
- gap: var(--space-24);
286
+ gap: var(--ui-space-24);
287
287
  }
288
288
 
289
289
  .swatch-group {
290
290
  display: flex;
291
291
  flex-direction: column;
292
- gap: var(--space-8);
292
+ gap: var(--ui-space-8);
293
293
  min-width: 0;
294
294
  }
295
295
 
296
296
  .group-title {
297
- font-size: var(--font-sm);
298
- font-weight: var(--font-weight-semibold);
297
+ font-size: var(--ui-font-size-sm);
298
+ font-weight: var(--ui-font-weight-semibold);
299
299
  color: var(--ui-text-secondary);
300
300
  margin: 0;
301
301
  }
@@ -303,21 +303,21 @@
303
303
  .swatches-row {
304
304
  display: grid;
305
305
  grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
306
- gap: var(--space-8);
307
- max-width: calc(7 * 3.5rem + 6 * var(--space-8));
306
+ gap: var(--ui-space-8);
307
+ max-width: calc(7 * 3.5rem + 6 * var(--ui-space-8));
308
308
  }
309
309
 
310
310
  .swatch-card {
311
311
  display: flex;
312
312
  flex-direction: column;
313
- gap: var(--space-4);
313
+ gap: var(--ui-space-4);
314
314
  align-items: center;
315
315
  }
316
316
 
317
317
  .swatch-box {
318
318
  width: 3.5rem;
319
319
  height: 3.5rem;
320
- border-radius: var(--radius-md);
320
+ border-radius: var(--ui-radius-md);
321
321
  flex-shrink: 0;
322
322
  }
323
323
 
@@ -326,18 +326,18 @@
326
326
  }
327
327
 
328
328
  .swatch-name {
329
- font-size: var(--font-xs);
329
+ font-size: var(--ui-font-size-xs);
330
330
  color: var(--ui-text-tertiary);
331
331
  text-align: center;
332
332
  }
333
333
 
334
334
  .swatch-name.copyable {
335
335
  all: unset;
336
- font-size: var(--font-xs);
336
+ font-size: var(--ui-font-size-xs);
337
337
  color: var(--ui-text-tertiary);
338
338
  text-align: center;
339
339
  cursor: pointer;
340
- transition: color var(--transition-fast);
340
+ transition: color var(--ui-transition-fast);
341
341
  }
342
342
 
343
343
  .swatch-name.copyable:hover {
@@ -351,26 +351,26 @@
351
351
  .border-groups-grid {
352
352
  display: grid;
353
353
  grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
354
- gap: var(--space-24);
354
+ gap: var(--ui-space-24);
355
355
  }
356
356
 
357
357
  .border-group {
358
358
  display: flex;
359
359
  flex-direction: column;
360
- gap: var(--space-8);
360
+ gap: var(--ui-space-8);
361
361
  min-width: 0;
362
362
  }
363
363
 
364
364
  .borders-row {
365
365
  display: flex;
366
- gap: var(--space-8);
366
+ gap: var(--ui-space-8);
367
367
  flex-wrap: wrap;
368
368
  }
369
369
 
370
370
  .border-card {
371
371
  display: flex;
372
372
  flex-direction: column;
373
- gap: var(--space-4);
373
+ gap: var(--ui-space-4);
374
374
  align-items: center;
375
375
  }
376
376
 
@@ -378,23 +378,23 @@
378
378
  width: 3.5rem;
379
379
  height: 3.5rem;
380
380
  background: var(--ui-surface-low);
381
- border-radius: var(--radius-md);
381
+ border-radius: var(--ui-radius-md);
382
382
  flex-shrink: 0;
383
383
  }
384
384
 
385
385
  .border-name {
386
- font-size: var(--font-xs);
386
+ font-size: var(--ui-font-size-xs);
387
387
  color: var(--ui-text-tertiary);
388
388
  text-align: center;
389
389
  }
390
390
 
391
391
  .border-name.copyable {
392
392
  all: unset;
393
- font-size: var(--font-xs);
393
+ font-size: var(--ui-font-size-xs);
394
394
  color: var(--ui-text-tertiary);
395
395
  text-align: center;
396
396
  cursor: pointer;
397
- transition: color var(--transition-fast);
397
+ transition: color var(--ui-transition-fast);
398
398
  }
399
399
 
400
400
  .border-name.copyable:hover {
package/src/{showcase → ui}/TextTab.svelte RENAMED
@@ -17,13 +17,13 @@
17
17
  ]
18
18
  },
19
19
  {
20
- title: 'Primary Text Colors (Crimson)',
20
+ title: 'Brand Text Colors (Crimson)',
21
21
  colors: [
22
- { name: 'Primary', variable: '--text-primary-color', description: 'Primary - Main text color' },
23
- { name: 'Primary Secondary', variable: '--text-primary-secondary', description: 'Secondary - Less prominent' },
24
- { name: 'Primary Tertiary', variable: '--text-primary-tertiary', description: 'Tertiary - Subtle text' },
25
- { name: 'Primary Muted', variable: '--text-primary-muted', description: 'Muted - De-emphasized' },
26
- { name: 'Primary Disabled', variable: '--text-primary-disabled', description: 'Disabled - Disabled state' }
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
27
  ]
28
28
  },
29
29
  {
@@ -115,68 +115,68 @@
115
115
  .text-container {
116
116
  display: flex;
117
117
  flex-direction: column;
118
- gap: var(--space-24);
118
+ gap: var(--ui-space-24);
119
119
  }
120
120
 
121
121
  .color-group {
122
122
  display: flex;
123
123
  flex-direction: column;
124
- gap: var(--space-12);
124
+ gap: var(--ui-space-12);
125
125
  }
126
126
 
127
127
  .group-title {
128
- font-size: var(--font-sm);
129
- font-weight: var(--font-weight-semibold);
128
+ font-size: var(--ui-font-size-sm);
129
+ font-weight: var(--ui-font-weight-semibold);
130
130
  color: var(--ui-text-secondary);
131
131
  margin: 0;
132
- padding-bottom: var(--space-4);
132
+ padding-bottom: var(--ui-space-4);
133
133
  border-bottom: 1px solid var(--ui-border-faint);
134
134
  }
135
135
 
136
136
  .text-colors-grid {
137
137
  display: grid;
138
138
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
139
- gap: var(--space-12);
139
+ gap: var(--ui-space-12);
140
140
  }
141
141
 
142
142
  .text-color-card {
143
143
  background: var(--ui-surface-low);
144
144
  border: 1px solid var(--ui-border-subtle);
145
- border-radius: var(--radius-md);
146
- padding: var(--space-12);
145
+ border-radius: var(--ui-radius-md);
146
+ padding: var(--ui-space-12);
147
147
  display: flex;
148
148
  flex-direction: column;
149
- gap: var(--space-8);
149
+ gap: var(--ui-space-8);
150
150
  align-items: center;
151
151
  }
152
152
 
153
153
  .text-color-preview {
154
- font-size: var(--font-4xl);
155
- font-weight: var(--font-weight-bold);
154
+ font-size: var(--font-size-4xl);
155
+ font-weight: var(--ui-font-weight-bold);
156
156
  line-height: 1;
157
157
  }
158
158
 
159
159
  .text-color-info {
160
160
  display: flex;
161
161
  flex-direction: column;
162
- gap: var(--space-2);
162
+ gap: var(--ui-space-2);
163
163
  align-items: center;
164
164
  text-align: center;
165
165
  }
166
166
 
167
167
  .text-color-name {
168
- font-size: var(--font-sm);
169
- font-weight: var(--font-weight-semibold);
168
+ font-size: var(--ui-font-size-sm);
169
+ font-weight: var(--ui-font-weight-semibold);
170
170
  color: var(--ui-text-primary);
171
171
  }
172
172
 
173
173
  .text-color-name.copyable {
174
174
  all: unset;
175
- font-size: var(--font-sm);
176
- font-weight: var(--font-weight-semibold);
175
+ font-size: var(--ui-font-size-sm);
176
+ font-weight: var(--ui-font-weight-semibold);
177
177
  color: var(--ui-text-primary);
178
178
  cursor: pointer;
179
- transition: color var(--transition-fast);
179
+ transition: color var(--ui-transition-fast);
180
180
  }
181
181
 
182
182
  .text-color-name.copyable:hover {
@@ -188,16 +188,16 @@
188
188
  }
189
189
 
190
190
  .text-color-variable {
191
- font-size: var(--font-xs);
191
+ font-size: var(--ui-font-size-xs);
192
192
  color: var(--ui-text-tertiary);
193
193
  font-family: var(--ui-font-mono);
194
194
  background: var(--ui-surface-lowest);
195
- padding: var(--space-2) var(--space-4);
196
- border-radius: var(--radius-sm);
195
+ padding: var(--ui-space-2) var(--ui-space-4);
196
+ border-radius: var(--ui-radius-sm);
197
197
  }
198
198
 
199
199
  .text-color-description {
200
- font-size: var(--font-xs);
200
+ font-size: var(--ui-font-size-xs);
201
201
  color: var(--ui-text-muted);
202
202
  }
203
203
  </style>