@motion-proto/live-tokens 0.6.2 → 0.8.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 (232) hide show
  1. package/README.md +14 -13
  2. package/dist-plugin/index.cjs +854 -226
  3. package/dist-plugin/index.d.cts +2 -1
  4. package/dist-plugin/index.d.ts +2 -1
  5. package/dist-plugin/index.js +852 -225
  6. package/package.json +26 -40
  7. package/src/{styles → app}/site.css +1 -1
  8. package/src/{component-editor → editor/component-editor}/BadgeEditor.svelte +8 -82
  9. package/src/{component-editor → editor/component-editor}/CalloutEditor.svelte +4 -4
  10. package/src/{component-editor → editor/component-editor}/CardEditor.svelte +28 -76
  11. package/src/{component-editor → editor/component-editor}/CollapsibleSectionEditor.svelte +37 -30
  12. package/src/{component-editor → editor/component-editor}/CornerBadgeEditor.svelte +31 -93
  13. package/src/{component-editor → editor/component-editor}/DialogEditor.svelte +60 -57
  14. package/src/editor/component-editor/ImageEditor.svelte +30 -0
  15. package/src/{component-editor → editor/component-editor}/InlineEditActionsEditor.svelte +6 -4
  16. package/src/editor/component-editor/MenuSelectEditor.svelte +160 -0
  17. package/src/{component-editor → editor/component-editor}/NotificationEditor.svelte +67 -38
  18. package/src/{component-editor → editor/component-editor}/ProgressBarEditor.svelte +5 -4
  19. package/src/{component-editor → editor/component-editor}/RadioButtonEditor.svelte +3 -3
  20. package/src/editor/component-editor/SectionDividerEditor.svelte +565 -0
  21. package/src/{component-editor → editor/component-editor}/SegmentedControlEditor.svelte +2 -2
  22. package/src/{component-editor → editor/component-editor}/StandardButtonsEditor.svelte +29 -21
  23. package/src/{component-editor → editor/component-editor}/TabBarEditor.svelte +9 -14
  24. package/src/{component-editor → editor/component-editor}/TableEditor.svelte +9 -18
  25. package/src/{component-editor → editor/component-editor}/TooltipEditor.svelte +11 -47
  26. package/src/editor/component-editor/editors.d.ts +10 -0
  27. package/src/{component-editor → editor/component-editor}/registry.ts +28 -18
  28. package/src/{component-editor → editor/component-editor}/scaffolding/AngleDial.svelte +54 -15
  29. package/src/{component-editor → editor/component-editor}/scaffolding/ComponentEditorBase.svelte +3 -51
  30. package/src/{component-editor → editor/component-editor}/scaffolding/ComponentFileManager.svelte +151 -424
  31. package/src/{component-editor → editor/component-editor}/scaffolding/ComponentFileMenu.svelte +18 -170
  32. package/src/{component-editor → editor/component-editor}/scaffolding/ComponentsTab.svelte +2 -2
  33. package/src/{component-editor → editor/component-editor}/scaffolding/CopyFromMenu.svelte +44 -4
  34. package/src/{component-editor → editor/component-editor}/scaffolding/FieldsetWrapper.svelte +1 -1
  35. package/src/{component-editor → editor/component-editor}/scaffolding/LinkageChart.svelte +6 -6
  36. package/src/{component-editor → editor/component-editor}/scaffolding/LinkedBlock.svelte +6 -12
  37. package/src/editor/component-editor/scaffolding/NonStylableConfig.svelte +38 -0
  38. package/src/editor/component-editor/scaffolding/RadialShapePad.svelte +483 -0
  39. package/src/{component-editor → editor/component-editor}/scaffolding/SaveAsDialog.svelte +66 -12
  40. package/src/editor/component-editor/scaffolding/ShadowBackdrop.svelte +85 -0
  41. package/src/editor/component-editor/scaffolding/ShadowBackdropControls.svelte +132 -0
  42. package/src/editor/component-editor/scaffolding/StateBlock.svelte +345 -0
  43. package/src/{component-editor → editor/component-editor}/scaffolding/TokenLayout.svelte +17 -12
  44. package/src/{component-editor → editor/component-editor}/scaffolding/TypeEditor.svelte +13 -1
  45. package/src/editor/component-editor/scaffolding/VariantGroup.svelte +858 -0
  46. package/src/{component-editor → editor/component-editor}/scaffolding/buildTypeGroupTokens.ts +1 -0
  47. package/src/{component-editor → editor/component-editor}/scaffolding/editorContext.ts +19 -9
  48. package/src/{component-editor → editor/component-editor}/scaffolding/linkedBlock.ts +2 -2
  49. package/src/{component-editor → editor/component-editor}/scaffolding/types.ts +25 -0
  50. package/src/{lib → editor/core/components}/componentConfigKeys.ts +8 -0
  51. package/src/{lib → editor/core/components}/componentConfigService.ts +3 -3
  52. package/src/{lib → editor/core/components}/componentPersist.ts +11 -9
  53. package/src/editor/core/flashStatus.ts +30 -0
  54. package/src/{lib → editor/core/fonts}/fontLoader.ts +2 -2
  55. package/src/{lib → editor/core/fonts}/fontMigration.ts +4 -4
  56. package/src/{lib → editor/core/fonts}/fontParse.ts +1 -1
  57. package/src/editor/core/manifests/manifestService.ts +171 -0
  58. package/src/editor/core/palettes/familySwap.ts +99 -0
  59. package/src/{lib → editor/core/palettes}/paletteDerivation.ts +71 -2
  60. package/src/{lib → editor/core/palettes}/tokenRegistry.ts +9 -6
  61. package/src/editor/core/productionPulse.ts +37 -0
  62. package/src/{lib → editor/core/routing}/router.ts +1 -1
  63. package/src/{lib/files/versionedFileResource.ts → editor/core/storage/files/versionedFileResourceClient.ts} +8 -1
  64. package/src/{lib → editor/core/store}/editorCore.ts +24 -8
  65. package/src/{lib → editor/core/store}/editorPersistence.ts +3 -3
  66. package/src/{lib → editor/core/store}/editorRenderer.ts +2 -2
  67. package/src/{lib → editor/core/store}/editorStore.ts +222 -28
  68. package/src/{lib → editor/core/store}/editorTypes.ts +56 -13
  69. package/src/editor/core/store/gradientSource.ts +192 -0
  70. package/src/editor/core/themes/migrations/2026-05-19-collapsiblesection-drop-frame-surface.ts +28 -0
  71. package/src/editor/core/themes/migrations/2026-05-19-sectiondivider-rich-gradient.ts +35 -0
  72. package/src/editor/core/themes/migrations/2026-05-20-sectiondivider-slim-variants.ts +82 -0
  73. package/src/editor/core/themes/migrations/2026-05-21-sectiondivider-spacing-to-padding.ts +24 -0
  74. package/src/editor/core/themes/migrations/2026-05-22-sectiondivider-intrinsics-to-css.ts +81 -0
  75. package/src/{lib → editor/core/themes}/migrations/index.ts +10 -0
  76. package/src/{lib → editor/core/themes}/slices/columns.ts +2 -2
  77. package/src/{lib → editor/core/themes}/slices/components.ts +20 -6
  78. package/src/{lib → editor/core/themes}/slices/fonts.ts +1 -1
  79. package/src/{lib → editor/core/themes}/slices/gradients.ts +89 -14
  80. package/src/{lib → editor/core/themes}/slices/overlays.ts +1 -1
  81. package/src/{lib → editor/core/themes}/slices/palettes.ts +1 -1
  82. package/src/{lib → editor/core/themes}/slices/shadows.ts +3 -3
  83. package/src/{lib → editor/core/themes}/themeInit.ts +8 -8
  84. package/src/{lib → editor/core/themes}/themeService.ts +6 -6
  85. package/src/{lib → editor/core/themes}/themeTypes.ts +67 -8
  86. package/src/editor/index.ts +69 -0
  87. package/src/{lib → editor/overlay}/ColumnsOverlay.svelte +0 -1
  88. package/src/{lib → editor/overlay}/LiveEditorOverlay.svelte +80 -129
  89. package/src/{lib → editor/overlay}/columnsOverlay.ts +2 -2
  90. package/src/{pages → editor/pages}/ComponentEditorPage.svelte +12 -12
  91. package/src/{pages → editor/pages}/Editor.svelte +4 -4
  92. package/src/{pages → editor/pages}/EditorShell.svelte +18 -36
  93. package/src/{styles → editor/styles}/ui-editor.css +43 -22
  94. package/src/{styles → editor/styles}/ui-form-controls.css +23 -24
  95. package/src/{ui → editor/ui}/BezierCurveEditor.svelte +119 -68
  96. package/src/{ui → editor/ui}/ColorEditPanel.svelte +13 -13
  97. package/src/{ui → editor/ui}/EditorViewSwitcher.svelte +7 -6
  98. package/src/editor/ui/FileLoadList.svelte +367 -0
  99. package/src/editor/ui/FilePill.svelte +80 -0
  100. package/src/editor/ui/FontStackEditor.svelte +499 -0
  101. package/src/editor/ui/GradientEditor.svelte +690 -0
  102. package/src/{ui → editor/ui}/GradientStopPicker.svelte +12 -4
  103. package/src/editor/ui/ManifestFileManager.svelte +438 -0
  104. package/src/{ui → editor/ui}/PaletteEditor.svelte +180 -673
  105. package/src/editor/ui/ProjectFontsSection.svelte +638 -0
  106. package/src/{ui → editor/ui}/SurfacesTab.svelte +3 -3
  107. package/src/{ui → editor/ui}/TextTab.svelte +3 -3
  108. package/src/editor/ui/ThemeFileManager.svelte +783 -0
  109. package/src/{ui → editor/ui}/UICopyPopover.svelte +4 -4
  110. package/src/{ui → editor/ui}/UIFontFamilySelector.svelte +6 -7
  111. package/src/{ui → editor/ui}/UIFontSizeSelector.svelte +4 -1
  112. package/src/editor/ui/UIInfoPopover.svelte +243 -0
  113. package/src/editor/ui/UILetterSpacingSelector.svelte +65 -0
  114. package/src/{ui → editor/ui}/UILineHeightSelector.svelte +5 -5
  115. package/src/{ui → editor/ui}/UILinkToggle.svelte +2 -2
  116. package/src/{ui → editor/ui}/UIPaddingSelector.svelte +6 -6
  117. package/src/{ui → editor/ui}/UIPaletteSelector.svelte +57 -30
  118. package/src/editor/ui/UIPillButton.svelte +168 -0
  119. package/src/{ui → editor/ui}/UIRadio.svelte +2 -2
  120. package/src/{ui → editor/ui}/UIRelinkConfirmPopover.svelte +4 -4
  121. package/src/editor/ui/UISegmentedControl.svelte +114 -0
  122. package/src/editor/ui/UISquareButton.svelte +172 -0
  123. package/src/{ui → editor/ui}/UITokenSelector.svelte +14 -11
  124. package/src/{ui → editor/ui}/UIVariantSelector.svelte +1 -1
  125. package/src/{ui → editor/ui}/VariablesTab.svelte +46 -17
  126. package/src/{ui → editor/ui}/palette/GradientStopEditor.svelte +13 -13
  127. package/src/{ui → editor/ui}/palette/OverridesPanel.svelte +24 -47
  128. package/src/{ui → editor/ui}/palette/PaletteBase.svelte +11 -8
  129. package/src/{ui → editor/ui}/palette/paletteEditorState.ts +1 -1
  130. package/src/editor/ui/palette/paletteMath.ts +275 -0
  131. package/src/{ui → editor/ui}/sections/ColumnsSection.svelte +137 -18
  132. package/src/{ui → editor/ui}/sections/GradientsSection.svelte +8 -8
  133. package/src/{ui → editor/ui}/sections/OverlaysSection.svelte +18 -18
  134. package/src/{ui → editor/ui}/sections/ShadowsSection.svelte +23 -23
  135. package/src/{ui → editor/ui}/sections/TokenScaleTable.svelte +3 -3
  136. package/src/{components → system/components}/Badge.svelte +0 -36
  137. package/src/{components → system/components}/Button.svelte +2 -2
  138. package/src/{components → system/components}/Card.svelte +34 -60
  139. package/src/{components → system/components}/CollapsibleSection.svelte +25 -2
  140. package/src/{components → system/components}/CornerBadge.svelte +8 -24
  141. package/src/{components → system/components}/Dialog.svelte +1 -1
  142. package/src/system/components/FloatingTokenTags.css +275 -0
  143. package/src/system/components/FloatingTokenTags.svelte +543 -0
  144. package/src/{components → system/components}/InlineEditActions.svelte +6 -4
  145. package/src/system/components/MenuSelect.svelte +229 -0
  146. package/src/{components → system/components}/Notification.svelte +8 -1
  147. package/src/{components → system/components}/ProgressBar.svelte +29 -11
  148. package/src/system/components/SectionDivider.svelte +560 -0
  149. package/src/{components → system/components}/SegmentedControl.svelte +49 -43
  150. package/src/{components → system/components}/TabBar.svelte +81 -65
  151. package/src/{components → system/components}/Table.svelte +17 -3
  152. package/src/{components → system/components}/Tooltip.svelte +6 -4
  153. package/src/system/styles/CONVENTIONS.md +178 -0
  154. package/src/system/styles/fonts.css +20 -0
  155. package/src/system/styles/tokens.css +601 -0
  156. package/src/system/styles/tokens.generated.css +544 -0
  157. package/src/component-editor/ImageEditor.svelte +0 -74
  158. package/src/component-editor/SectionDividerEditor.svelte +0 -265
  159. package/src/component-editor/scaffolding/DividerEditor.svelte +0 -94
  160. package/src/component-editor/scaffolding/GradientCard.svelte +0 -296
  161. package/src/component-editor/scaffolding/NonStylableConfig.svelte +0 -62
  162. package/src/component-editor/scaffolding/ShadowBackdrop.svelte +0 -37
  163. package/src/component-editor/scaffolding/ShadowBackdropControls.svelte +0 -61
  164. package/src/component-editor/scaffolding/StateBlock.svelte +0 -132
  165. package/src/component-editor/scaffolding/VariantGroup.svelte +0 -310
  166. package/src/components/SectionDivider.svelte +0 -483
  167. package/src/data/google-fonts.json +0 -75
  168. package/src/lib/index.ts +0 -68
  169. package/src/lib/presetService.ts +0 -214
  170. package/src/lib/productionPulse.ts +0 -32
  171. package/src/styles/fonts.css +0 -30
  172. package/src/styles/tokens.css +0 -1324
  173. package/src/ui/FontStackEditor.svelte +0 -361
  174. package/src/ui/GradientEditor.svelte +0 -470
  175. package/src/ui/PresetFileManager.svelte +0 -1116
  176. package/src/ui/ProjectFontsSection.svelte +0 -645
  177. package/src/ui/ThemeFileManager.svelte +0 -1020
  178. package/src/ui/UnsavedComponentsDialog.svelte +0 -315
  179. /package/src/{component-editor → editor/component-editor}/index.ts +0 -0
  180. /package/src/{component-editor → editor/component-editor}/scaffolding/DemoHeader.svelte +0 -0
  181. /package/src/{component-editor → editor/component-editor}/scaffolding/componentSectionType.ts +0 -0
  182. /package/src/{component-editor → editor/component-editor}/scaffolding/componentSources.ts +0 -0
  183. /package/src/{component-editor → editor/component-editor}/scaffolding/defaultSections.ts +0 -0
  184. /package/src/{component-editor → editor/component-editor}/scaffolding/siblings.ts +0 -0
  185. /package/src/{lib → editor/core}/cssVarSync.ts +0 -0
  186. /package/src/{lib → editor/core/palettes}/oklch.ts +0 -0
  187. /package/src/{lib → editor/core/routing}/navLinkTypes.ts +0 -0
  188. /package/src/{lib → editor/core/routing}/parentRouteStore.ts +0 -0
  189. /package/src/{lib → editor/core/storage}/storage.ts +0 -0
  190. /package/src/{lib → editor/core/store}/editorConfig.ts +0 -0
  191. /package/src/{lib → editor/core/store}/editorConfigStore.ts +0 -0
  192. /package/src/{lib → editor/core/store}/editorKeybindings.ts +0 -0
  193. /package/src/{lib → editor/core/store}/editorViewStore.ts +0 -0
  194. /package/src/{lib → editor/core/themes}/migrations/2026-04-24-component-prefix-and-suffix-renames.ts +0 -0
  195. /package/src/{lib → editor/core/themes}/migrations/2026-04-24-legacy-keys-and-bg-to-canvas.ts +0 -0
  196. /package/src/{lib → editor/core/themes}/migrations/2026-04-27-segmentedcontrol-disabled-flatten.ts +0 -0
  197. /package/src/{lib → editor/core/themes}/migrations/2026-05-08-collapsiblesection-frame-and-cleanup.ts +0 -0
  198. /package/src/{lib → editor/core/themes}/migrations/2026-05-08-collapsiblesection-variant-namespace.ts +0 -0
  199. /package/src/{lib → editor/core/themes}/migrations/2026-05-10-sectiondivider-gradient-stops.ts +0 -0
  200. /package/src/{lib → editor/core/themes}/migrations/2026-05-13-primary-to-brand.ts +0 -0
  201. /package/src/{lib → editor/core/themes}/parsers/globalRootBlock.ts +0 -0
  202. /package/src/{lib → editor/core/themes}/slices/domainVars.ts +0 -0
  203. /package/src/{lib → editor/overlay}/overlayState.ts +0 -0
  204. /package/src/{pages → editor/pages}/ComponentEditorPage.svelte.d.ts +0 -0
  205. /package/src/{pages → editor/pages}/Editor.svelte.d.ts +0 -0
  206. /package/src/{ui → editor/ui}/Toggle.svelte +0 -0
  207. /package/src/{ui → editor/ui}/UIDialog.svelte +0 -0
  208. /package/src/{ui → editor/ui}/UIFontWeightSelector.svelte +0 -0
  209. /package/src/{ui → editor/ui}/UIOptionItem.svelte +0 -0
  210. /package/src/{ui → editor/ui}/UIOptionList.svelte +0 -0
  211. /package/src/{ui → editor/ui}/UIRadioGroup.svelte +0 -0
  212. /package/src/{lib → editor/ui}/copyPopover.ts +0 -0
  213. /package/src/{ui → editor/ui}/curveEngine.ts +0 -0
  214. /package/src/{ui → editor/ui}/index.ts +0 -0
  215. /package/src/{ui → editor/ui}/keepInViewport.ts +0 -0
  216. /package/src/{ui → editor/ui}/palette/ScaleCurveEditor.svelte +0 -0
  217. /package/src/{lib → editor/ui}/scrollSection.ts +0 -0
  218. /package/src/{ui → editor/ui}/sections/tokenScales.ts +0 -0
  219. /package/src/{ui → editor/ui}/variantScales.ts +0 -0
  220. /package/src/{assets → system/assets}/newspaper.webp +0 -0
  221. /package/src/{assets → system/assets}/offering.webp +0 -0
  222. /package/src/{components → system/components}/Callout.svelte +0 -0
  223. /package/src/{components → system/components}/Image.svelte +0 -0
  224. /package/src/{components → system/components}/RadioButton.svelte +0 -0
  225. /package/src/{components → system/components}/types.ts +0 -0
  226. /package/src/{styles → system/styles}/_padding.scss +0 -0
  227. /package/src/{styles → system/styles}/fonts/Fraunces/Fraunces-italic-latin-ext.woff2 +0 -0
  228. /package/src/{styles → system/styles}/fonts/Fraunces/Fraunces-italic-latin.woff2 +0 -0
  229. /package/src/{styles → system/styles}/fonts/Fraunces/Fraunces-roman-latin-ext.woff2 +0 -0
  230. /package/src/{styles → system/styles}/fonts/Fraunces/Fraunces-roman-latin.woff2 +0 -0
  231. /package/src/{styles → system/styles}/fonts/Manrope/Manrope-latin-ext.woff2 +0 -0
  232. /package/src/{styles → system/styles}/fonts/Manrope/Manrope-latin.woff2 +0 -0
package/src/styles/tokens.css DELETED
@@ -1,1324 +0,0 @@
1
- /* RuneGoblin - Design System Variables */
2
- /* Simple CSS variables for consistent theming */
3
- /* Note: Font declarations moved to fonts.css which is copied directly without processing */
4
- /* Convention: no component-scoped tokens in this file; those belong in component-configs/*. */
5
-
6
- /* Global font fallback for all module content (excludes Font Awesome icons) */
7
- /* Using :where() for 0 specificity - component styles can override naturally */
8
- :where(*:not([class*="fa-"])) {
9
- font-family: var(--font-sans);
10
- }
11
-
12
- :root {
13
- /* ═══════════════════════════════════════════════════════
14
- COLOR RAMPS — Base palette swatches (100–950)
15
- Each ramp is driven by its PaletteEditor in the editor.
16
- Values here are static defaults; runtime overrides via JS.
17
- ═══════════════════════════════════════════════════════ */
18
-
19
- /* Neutral (gray mode) */
20
- --color-neutral-100: #ece3dd;
21
- --color-neutral-200: #d3cac4;
22
- --color-neutral-300: #b6ada8;
23
- --color-neutral-400: #99918c;
24
- --color-neutral-500: #7d7570;
25
- --color-neutral-600: #625a56;
26
- --color-neutral-700: #48413d;
27
- --color-neutral-800: #302925;
28
- --color-neutral-850: #1a1410;
29
- --color-neutral-900: #070302;
30
- --color-neutral-950: #000000;
31
-
32
- /* Alternate (gray mode) */
33
- --color-alternate-100: #e3e5e4;
34
- --color-alternate-200: #cccdcd;
35
- --color-alternate-300: #b1b2b2;
36
- --color-alternate-400: #969797;
37
- --color-alternate-500: #7c7d7d;
38
- --color-alternate-600: #626363;
39
- --color-alternate-700: #4a4b4b;
40
- --color-alternate-800: #333434;
41
- --color-alternate-850: #1e1f1e;
42
- --color-alternate-900: #0b0c0c;
43
- --color-alternate-950: #010202;
44
-
45
- /* Background */
46
- --color-canvas-100: #d3f7f3;
47
- --color-canvas-200: #b6d9d4;
48
- --color-canvas-300: #94b6b2;
49
- --color-canvas-400: #7a9b97;
50
- --color-canvas-500: #6f908c;
51
- --color-canvas-600: #62827e;
52
- --color-canvas-700: #496966;
53
- --color-canvas-800: #2e4d49;
54
- --color-canvas-850: #10302d;
55
- --color-canvas-900: #001412;
56
- --color-canvas-950: #000202;
57
-
58
- /* Brand */
59
- --color-brand-100: #ffe6f9;
60
- --color-brand-200: #ffb7f0;
61
- --color-brand-300: #ff74e9;
62
- --color-brand-400: #f828e0;
63
- --color-brand-500: #eb0ad4;
64
- --color-brand-600: #d500c0;
65
- --color-brand-700: #ac009b;
66
- --color-brand-800: #7d0070;
67
- --color-brand-850: #4e0046;
68
- --color-brand-900: #23001f;
69
- --color-brand-950: #060005;
70
-
71
- /* Accent */
72
- --color-accent-100: #ffeaab;
73
- --color-accent-200: #f1d479;
74
- --color-accent-300: #d6b95c;
75
- --color-accent-400: #bb9d38;
76
- --color-accent-500: #9d7f00;
77
- --color-accent-600: #685300;
78
- --color-accent-700: #4b3c00;
79
- --color-accent-800: #382c00;
80
- --color-accent-850: #2b2100;
81
- --color-accent-900: #221900;
82
- --color-accent-950: #1d1500;
83
-
84
- /* Special */
85
- --color-special-100: #efecff;
86
- --color-special-200: #cfc5ff;
87
- --color-special-300: #ae96ff;
88
- --color-special-400: #966cff;
89
- --color-special-500: #8b5cf6;
90
- --color-special-600: #7f4de7;
91
- --color-special-700: #6830ca;
92
- --color-special-800: #4f00a6;
93
- --color-special-850: #30006a;
94
- --color-special-900: #130033;
95
- --color-special-950: #03000d;
96
-
97
- /* Success */
98
- --color-success-100: #c7ffd1;
99
- --color-success-200: #73ec91;
100
- --color-success-300: #49c66d;
101
- --color-success-400: #21a951;
102
- --color-success-500: #009c45;
103
- --color-success-600: #008d3e;
104
- --color-success-700: #007130;
105
- --color-success-800: #005221;
106
- --color-success-850: #003211;
107
- --color-success-900: #001404;
108
- --color-success-950: #000300;
109
-
110
- /* Warning */
111
- --color-warning-100: #ffeadf;
112
- --color-warning-200: #ffbe9c;
113
- --color-warning-300: #fa8640;
114
- --color-warning-400: #db691c;
115
- --color-warning-500: #cd5d00;
116
- --color-warning-600: #b95300;
117
- --color-warning-700: #964200;
118
- --color-warning-800: #6d2e00;
119
- --color-warning-850: #441a00;
120
- --color-warning-900: #1f0700;
121
- --color-warning-950: #060000;
122
-
123
- /* Info */
124
- --color-info-100: #cff7ff;
125
- --color-info-200: #8ad4e3;
126
- --color-info-300: #5ca6b4;
127
- --color-info-400: #388391;
128
- --color-info-500: #277482;
129
- --color-info-600: #196977;
130
- --color-info-700: #005562;
131
- --color-info-800: #003d47;
132
- --color-info-850: #00252c;
133
- --color-info-900: #000f13;
134
- --color-info-950: #000203;
135
-
136
- /* Danger */
137
- --color-danger-100: #ffe8e8;
138
- --color-danger-200: #ffbabb;
139
- --color-danger-300: #ff7a83;
140
- --color-danger-400: #f63f59;
141
- --color-danger-500: #e72e4e;
142
- --color-danger-600: #d71641;
143
- --color-danger-700: #b00031;
144
- --color-danger-800: #810021;
145
- --color-danger-850: #520012;
146
- --color-danger-900: #260004;
147
- --color-danger-950: #080000;
148
-
149
- /* Semantic color primitives (for component tokens that need the CSS
150
- keyword "transparent" as a no-fill slot rather than a palette swatch). */
151
- --color-transparent: transparent;
152
-
153
- /* Display toggles — alias targets for boolean visibility slots
154
- (e.g. `--button-shimmer` aliases to one of these). */
155
- --shimmer-on: block;
156
- --shimmer-off: none;
157
-
158
- /* ═══════════════════════════════════════════════════════
159
- PAGE BACKGROUND — the canvas behind all UI surfaces.
160
- Editor writes these via the Palette "empty selector".
161
- ═══════════════════════════════════════════════════════ */
162
-
163
- --page-bg: #10302d;
164
- --page-bg-attachment: scroll;
165
-
166
- /* ═══════════════════════════════════════════════════════
167
- SURFACES — 7-point scales (lowest → highest)
168
- ═══════════════════════════════════════════════════════ */
169
-
170
- /* Neutral surfaces (base UI panels) */
171
- --surface-neutral-lowest: #0f0a07;
172
- --surface-neutral-lower: #1a1410;
173
- --surface-neutral-low: #28211d;
174
- --surface-neutral: #362f2a;
175
- --surface-neutral-high: #443d39;
176
- --surface-neutral-higher: #534c47;
177
- --surface-neutral-highest: #615954;
178
-
179
- /* Alternate surfaces */
180
- --surface-alternate-lowest: #0b0b0b;
181
- --surface-alternate-lower: #151616;
182
- --surface-alternate-low: #222323;
183
- --surface-alternate: #303030;
184
- --surface-alternate-high: #3e3f3f;
185
- --surface-alternate-higher: #4d4d4d;
186
- --surface-alternate-highest: #5a5b5b;
187
-
188
- /* Background */
189
- --surface-canvas-lowest: #000f0d;
190
- --surface-canvas-lower: #001b18;
191
- --surface-canvas-low: #082826;
192
- --surface-canvas: #173633;
193
- --surface-canvas-high: #264542;
194
- --surface-canvas-higher: #355451;
195
- --surface-canvas-highest: #42625e;
196
-
197
- /* Brand */
198
- --surface-brand-lowest: #1a0017;
199
- --surface-brand-lower: #2b0026;
200
- --surface-brand-low: #400038;
201
- --surface-brand: #55004c;
202
- --surface-brand-high: #6c0061;
203
- --surface-brand-higher: #840076;
204
- --surface-brand-highest: #99008a;
205
-
206
- /* Accent */
207
- --surface-accent-lowest: #100a00;
208
- --surface-accent-lower: #1c1500;
209
- --surface-accent-low: #2c2100;
210
- --surface-accent: #3c2f00;
211
- --surface-accent-high: #4d3d00;
212
- --surface-accent-higher: #5e4b00;
213
- --surface-accent-highest: #6e5800;
214
-
215
- /* Special */
216
- --surface-special-lowest: #0f002b;
217
- --surface-special-lower: #1b0042;
218
- --surface-special-low: #2a005e;
219
- --surface-special: #39007d;
220
- --surface-special-high: #4a009d;
221
- --surface-special-higher: #5915b6;
222
- --surface-special-highest: #662cc7;
223
-
224
- /* Success */
225
- --surface-success-lowest: #001003;
226
- --surface-success-lower: #001c07;
227
- --surface-success-low: #002b0e;
228
- --surface-success: #003c16;
229
- --surface-success-high: #004d1e;
230
- --surface-success-higher: #005e27;
231
- --surface-success-highest: #006e2e;
232
-
233
- /* Warning */
234
- --surface-warning-lowest: #190500;
235
- --surface-warning-lower: #280c00;
236
- --surface-warning-low: #3c1600;
237
- --surface-warning: #512000;
238
- --surface-warning-high: #662b00;
239
- --surface-warning-higher: #7d3600;
240
- --surface-warning-highest: #914000;
241
-
242
- /* Info */
243
- --surface-info-lowest: #000e12;
244
- --surface-info-lower: #001a1f;
245
- --surface-info-low: #02282e;
246
- --surface-info: #12363d;
247
- --surface-info-high: #21454c;
248
- --surface-info-higher: #30545b;
249
- --surface-info-highest: #3e6169;
250
-
251
- /* Danger */
252
- --surface-danger-lowest: #1f0003;
253
- --surface-danger-lower: #310007;
254
- --surface-danger-low: #48000e;
255
- --surface-danger: #600016;
256
- --surface-danger-high: #7a001f;
257
- --surface-danger-higher: #930028;
258
- --surface-danger-highest: #ab002f;
259
-
260
- /* Semi-Transparent Overlays - 7-point scale */
261
- --overlay-lowest: rgba(20, 3, 0, 0.12);
262
- --overlay-lower: rgba(20, 3, 0, 0.25);
263
- --overlay-low: rgba(20, 3, 0, 0.38);
264
- --overlay: rgba(20, 3, 0, 0.51);
265
- --overlay-high: rgba(20, 3, 0, 0.64);
266
- --overlay-higher: rgba(20, 3, 0, 0.77);
267
- --overlay-highest: rgba(20, 3, 0, 0.9);
268
-
269
- /* ═══════════════════════════════════════════════════════
270
- BORDERS — 5-point scales (faint → strong)
271
- ═══════════════════════════════════════════════════════ */
272
-
273
- /* Neutral borders */
274
- --border-neutral-faint: #27201c;
275
- --border-neutral-subtle: #48413c;
276
- --border-neutral: #656b6f;
277
- --border-neutral-medium: #9b938e;
278
- --border-neutral-strong: #c4bcb6;
279
-
280
- /* Alternate borders */
281
- --border-alternate-faint: #212222;
282
- --border-alternate-subtle: #424343;
283
- --border-alternate: #696a6a;
284
- --border-alternate-medium: #949595;
285
- --border-alternate-strong: #bdbebe;
286
-
287
- /* Background */
288
- --border-canvas-faint: #072725;
289
- --border-canvas-subtle: #2a4946;
290
- --border-canvas: #52726e;
291
- --border-canvas-medium: #7b9d99;
292
- --border-canvas-strong: #a3c6c2;
293
-
294
- /* Brand */
295
- --border-brand-faint: #3e0037;
296
- --border-brand-subtle: #730067;
297
- --border-brand: #b200a0;
298
- --border-brand-medium: #f31fdb;
299
- --border-brand-strong: #ff90eb;
300
-
301
- /* Accent */
302
- --border-accent-faint: #2a2000;
303
- --border-accent-subtle: #514100;
304
- --border-accent: #816800;
305
- --border-accent-medium: #b09227;
306
- --border-accent-strong: #dabb57;
307
-
308
- /* Special */
309
- --border-special-faint: #29005c;
310
- --border-special-subtle: #4e00a6;
311
- --border-special: #7441da;
312
- --border-special-medium: #9c77ff;
313
- --border-special-strong: #c0b0ff;
314
-
315
- /* Success */
316
- --border-success-faint: #002a0d;
317
- --border-success-subtle: #005120;
318
- --border-success: #008037;
319
- --border-success-medium: #2eb058;
320
- --border-success-strong: #61db80;
321
-
322
- /* Warning */
323
- --border-warning-faint: #3a1500;
324
- --border-warning-subtle: #6c2e00;
325
- --border-warning: #a84b00;
326
- --border-warning-medium: #e27026;
327
- --border-warning-strong: #ffa473;
328
-
329
- /* Info */
330
- --border-info-faint: #00272e;
331
- --border-info-subtle: #004c57;
332
- --border-info: #297684;
333
- --border-info-medium: #58a2b0;
334
- --border-info-strong: #82cbda;
335
-
336
- /* Danger */
337
- --border-danger-faint: #46000e;
338
- --border-danger-subtle: #800021;
339
- --border-danger: #c70039;
340
- --border-danger-medium: #fe4860;
341
- --border-danger-strong: #ff9fa2;
342
-
343
- /* ═══════════════════════════════════════════════════════
344
- TEXT — 5-point hierarchy (primary → disabled)
345
- ═══════════════════════════════════════════════════════ */
346
-
347
- /* Base text (uses neutral ramp) */
348
- --text-primary: #fff5f0;
349
- --text-secondary: #b0a9a4;
350
- --text-tertiary: #86817e;
351
- --text-muted: #5e5c5b;
352
- --text-disabled: #3a3939;
353
- --text-inverted: var(--color-neutral-900);
354
-
355
- /* Background */
356
- --text-canvas: #95b7b3;
357
- --text-canvas-secondary: #84a09d;
358
- --text-canvas-tertiary: #647673;
359
- --text-canvas-muted: #454d4c;
360
- --text-canvas-disabled: #363a3a;
361
-
362
- /* Brand */
363
- --text-brand: #ff8eeb;
364
- --text-brand-secondary: #fe5be7;
365
- --text-brand-tertiary: #b753a7;
366
- --text-brand-muted: #7a4b71;
367
- --text-brand-disabled: #5a4355;
368
-
369
- /* Accent */
370
- --text-accent: #c3a43e;
371
- --text-accent-secondary: #aa913e;
372
- --text-accent-tertiary: #7b6b39;
373
- --text-accent-muted: #4f4731;
374
- --text-accent-disabled: #3a362c;
375
-
376
- /* Special */
377
- --text-special: #ab92ff;
378
- --text-special-secondary: #9976f9;
379
- --text-special-tertiary: #6f5bad;
380
- --text-special-muted: #484167;
381
- --text-special-disabled: #363346;
382
-
383
- /* Success */
384
- --text-success: #46c36a;
385
- --text-success-secondary: #44aa60;
386
- --text-success-tertiary: #3e7b4c;
387
- --text-success-muted: #344f39;
388
- --text-success-disabled: #2d3a2f;
389
-
390
- /* Warning */
391
- --text-warning: #f7833d;
392
- --text-warning-secondary: #d7763d;
393
- --text-warning-tertiary: #985b39;
394
- --text-warning-muted: #5d4031;
395
- --text-warning-disabled: #41332b;
396
-
397
- /* Info */
398
- --text-info: #bef4ff;
399
- --text-info-secondary: #60c8dc;
400
- --text-info-tertiary: #5092a0;
401
- --text-info-muted: #3e6067;
402
- --text-info-disabled: #203438;
403
-
404
- /* Danger */
405
- --text-danger: #ff757e;
406
- --text-danger-secondary: #ef5766;
407
- --text-danger-tertiary: #a84950;
408
- --text-danger-muted: #65393b;
409
- --text-danger-disabled: #463030;
410
-
411
- /* Border Radius */
412
- --radius-none: 0;
413
- --radius-sm: 0.125rem; /* 2px */
414
- --radius-md: 0.25rem; /* 4px */
415
- --radius-lg: 0.375rem; /* 6px */
416
- --radius-xl: 0.5rem; /* 8px */
417
- --radius-2xl: 0.625rem; /* 10px */
418
- --radius-3xl: 0.75rem; /* 12px */
419
- --radius-4xl: 1.25rem; /* 20px */
420
- --radius-full: 9999px;
421
-
422
- /* Border Width */
423
- --border-width-0: 0;
424
- --border-width-1: 1px;
425
- --border-width-2: 2px;
426
- --border-width-3: 3px;
427
- --border-width-4: 4px;
428
- --border-width-5: 5px;
429
- --border-width-6: 6px;
430
- --border-width-8: 8px;
431
- --border-width-10: 10px;
432
- --border-width-12: 12px;
433
- --border-width-16: 16px;
434
- --border-width-20: 20px;
435
- --border-width-24: 24px;
436
-
437
- /* Icon Sizing — square icon-button & decorative icon dimensions */
438
- --size-icon-sm: 1rem; /* 16px */
439
- --size-icon-md: 1.25rem; /* 20px */
440
- --size-icon-lg: 1.5rem; /* 24px */
441
- --size-icon-xl: 2rem; /* 32px */
442
- --size-icon-2xl: 4rem; /* 64px */
443
- --size-icon-3xl: 6rem; /* 96px */
444
- --size-icon-4xl: 8rem; /* 128px */
445
-
446
- /* Spacing */
447
- --space-0: 0;
448
- --space-2: 0.125rem; /* 2px */
449
- --space-4: 0.25rem; /* 4px */
450
- --space-6: 0.375rem; /* 6px */
451
- --space-8: 0.5rem; /* 8px */
452
- --space-10: 0.625rem; /* 10px */
453
- --space-12: 0.75rem; /* 12px */
454
- --space-16: 1rem; /* 16px */
455
- --space-20: 1.25rem; /* 20px */
456
- --space-24: 1.5rem; /* 24px */
457
- --space-32: 2rem; /* 32px */
458
- --space-48: 3rem; /* 48px */
459
- --space-full: 100%;
460
-
461
- /* Dot fill ratios — used by radio/checkbox-style indicators where the
462
- inner dot occupies a percentage of the outer ring. */
463
- --dot-size-0: 0%;
464
- --dot-size-25: 25%;
465
- --dot-size-50: 50%;
466
- --dot-size-75: 75%;
467
- --dot-size-100: 100%;
468
-
469
- /* Backdrop blur radii — feed `backdrop-filter: blur(var(--blur-*))`. */
470
- --blur-none: 0;
471
- --blur-sm: 4px;
472
- --blur-md: 8px;
473
- --blur-lg: 16px;
474
- --blur-xl: 24px;
475
- --blur-2xl: 32px;
476
-
477
- /* ═══════════════════════════════════════════════════════
478
- COLUMN LAYOUT
479
- 12-column layout tokens. Drive the dev columns overlay
480
- (toggled from the editor bar) and can be consumed by any
481
- component via:
482
- grid-template-columns: repeat(var(--columns-count), 1fr);
483
- gap: var(--columns-gutter);
484
- padding-inline: var(--columns-margin);
485
- max-width: var(--columns-max-width);
486
- --columns-gutter is the space between columns;
487
- --columns-margin is the optional outer page padding
488
- outside the N cols (a.k.a. side gutters) — defaults to 0
489
- so layouts are flush to the container edge; dial it up
490
- to add side gutters.
491
- ═══════════════════════════════════════════════════════ */
492
- --columns-count: 12;
493
- --columns-max-width: 1440px;
494
- --columns-gutter: clamp(0.5rem, 1.5vw, 1.5rem);
495
- --columns-margin: 0;
496
-
497
- /* Font Families */
498
- --font-display: "Fraunces", serif;
499
- --font-sans: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, sans-serif;
500
- --font-serif: "Fraunces", serif;
501
- --font-mono: "fira-code", ui-monospace, "SF Mono", Menlo, Consolas, monospace, monospace;
502
-
503
- /* Font Sizes */
504
- --font-size-xs: 0.875rem; /* 14px */
505
- --font-size-sm: 1rem; /* 16px */
506
- --font-size-md: 1.125rem; /* 18px */
507
- --font-size-lg: 1.25rem; /* 20px */
508
- --font-size-xl: 1.375rem; /* 22px */
509
- --font-size-2xl: 1.625rem; /* 26px */
510
- --font-size-3xl: 2rem; /* 32px */
511
- --font-size-4xl: 2.5rem; /* 40px */
512
- --font-size-5xl: 3rem; /* 48px */
513
- --font-size-6xl: 3.5rem; /* 56px */
514
-
515
- /* Icon Sizes — for inline icon glyphs (e.g. Font Awesome <i>),
516
- parallel to the type scale so icons can size with surrounding text. */
517
- --icon-size-xs: 0.875rem; /* 14px */
518
- --icon-size-sm: 1rem; /* 16px */
519
- --icon-size-md: 1.125rem; /* 18px */
520
- --icon-size-lg: 1.25rem; /* 20px */
521
- --icon-size-xl: 1.375rem; /* 22px */
522
- --icon-size-2xl: 1.625rem; /* 26px */
523
- --icon-size-3xl: 2rem; /* 32px */
524
- --icon-size-4xl: 2.5rem; /* 40px */
525
- --icon-size-5xl: 3rem; /* 48px */
526
- --icon-size-6xl: 3.5rem; /* 56px */
527
-
528
- /* Font Weights (OpenType numeric ↔ name mapping per CSS spec) */
529
- --font-weight-thin: 100;
530
- --font-weight-extralight: 200;
531
- --font-weight-light: 300;
532
- --font-weight-normal: 400;
533
- --font-weight-medium: 500;
534
- --font-weight-semibold: 600;
535
- --font-weight-bold: 700;
536
- --font-weight-extrabold: 800;
537
- --font-weight-black: 900;
538
-
539
- /* Gradients — runtime values come from the editor store; the static
540
- declarations below are fallbacks so the variables resolve before JS
541
- hydrates. Match the defaults seeded in `makeDefaultGradients()`. */
542
- --gradient-1: linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%);
543
- --gradient-2: linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-special-500) 100%);
544
- --gradient-3: linear-gradient(90deg, var(--color-success-500) 0%, var(--color-info-500) 100%);
545
- --gradient-4: linear-gradient(45deg, var(--color-danger-500) 0%, var(--color-warning-500) 100%);
546
-
547
- /* Gradient axis primitives — angles and stop positions. Layer-2 component
548
- tokens point through these so editor-exposed gradient props follow the
549
- same var()-alias pattern as every other token. */
550
- --gradient-angle-horizontal: 90deg;
551
- --gradient-angle-diagonal: 135deg;
552
- --gradient-angle-vertical: 180deg;
553
- --gradient-stop-start: 0%;
554
- --gradient-stop-mid: 50%;
555
- --gradient-stop-end: 100%;
556
-
557
- /* Shadows (elevation scale) */
558
- --shadow-none: none;
559
- --shadow-sm: 1px 1px 2px 0px hsla(237, 18%, 3%, 0.9);
560
- --shadow-md: 3px 3px 6px 0px hsla(237, 18%, 3%, 0.9);
561
- --shadow-lg: 5px 5px 9px 0px hsla(237, 18%, 3%, 0.9);
562
- --shadow-xl: 6px 7px 13px 0px hsla(237, 18%, 3%, 0.9);
563
- --shadow-2xl: 8px 9px 16px 0px hsla(237, 18%, 3%, 0.9);
564
-
565
- /* Focus Rings (box-shadow-as-outline: only spread + color varies) */
566
- --ring-focus-sm: 0 0 0 2px hsla(0, 78%, 60%, 0.1);
567
- --ring-focus-md: 0 0 0 3px hsla(0, 78%, 60%, 0.1);
568
- --ring-focus-lg: 0 0 0 4px hsla(0, 78%, 60%, 0.1);
569
-
570
- /* Durations */
571
- --duration-75: 75ms;
572
- --duration-150: 150ms;
573
- --duration-200: 200ms;
574
- --duration-300: 300ms;
575
- --duration-500: 500ms;
576
- --duration-750: 750ms;
577
- --duration-1000: 1000ms;
578
-
579
- /* Z-Index Layers */
580
- --z-base: 0;
581
- --z-dropdown: 100;
582
- --z-sticky: 200;
583
- --z-overlay: 1000;
584
- --z-modal: 1100;
585
- --z-popover: 1200;
586
- --z-tooltip: 1300;
587
-
588
- /* Line Heights */
589
- --line-height-xs: 1;
590
- --line-height-sm: 1.25;
591
- --line-height-md: 1.5;
592
- --line-height-lg: 1.75;
593
- --line-height-xl: 2;
594
-
595
- /* Exported token additions */
596
- --text-alternate: #9fa1a1;
597
- --text-alternate-secondary: #8c8d8d;
598
- --text-alternate-tertiary: #676868;
599
- --text-alternate-muted: #444444;
600
- --text-alternate-disabled: #343434;
601
- }
602
-
603
- /* ═══════════════════════════════════════════════════════
604
- RESPONSIVE TYPE SCALE
605
- Font size variables ramp down on smaller viewports so
606
- every heading + body style that references them adapts
607
- automatically. Body text (--font-size-md) collapses to 16px
608
- on mobile for improved readability.
609
- ═══════════════════════════════════════════════════════ */
610
-
611
- @media (max-width: 768px) {
612
- :root {
613
- --font-size-xs: 0.8125rem; /* 13px */
614
- --font-size-sm: 0.9375rem; /* 15px */
615
- --font-size-md: 1rem; /* 16px */
616
- --font-size-lg: 1.125rem; /* 18px */
617
- --font-size-xl: 1.25rem; /* 20px */
618
- --font-size-2xl: 1.4375rem; /* 23px */
619
- --font-size-3xl: 1.625rem; /* 26px */
620
- --font-size-4xl: 1.875rem; /* 30px */
621
- --font-size-5xl: 2.25rem; /* 36px */
622
- --font-size-6xl: 2.5rem; /* 40px */
623
-
624
- --icon-size-xs: 0.8125rem; /* 13px */
625
- --icon-size-sm: 0.9375rem; /* 15px */
626
- --icon-size-md: 1rem; /* 16px */
627
- --icon-size-lg: 1.125rem; /* 18px */
628
- --icon-size-xl: 1.25rem; /* 20px */
629
- --icon-size-2xl: 1.4375rem; /* 23px */
630
- --icon-size-3xl: 1.625rem; /* 26px */
631
- --icon-size-4xl: 1.875rem; /* 30px */
632
- --icon-size-5xl: 2.25rem; /* 36px */
633
- --icon-size-6xl: 2.5rem; /* 40px */
634
- }
635
- }
636
-
637
- @media (max-width: 480px) {
638
- :root {
639
- --font-size-2xl: 1.3125rem; /* 21px */
640
- --font-size-3xl: 1.5rem; /* 24px */
641
- --font-size-4xl: 1.625rem; /* 26px */
642
- --font-size-5xl: 1.875rem; /* 30px */
643
- --font-size-6xl: 2.125rem; /* 34px */
644
-
645
- --icon-size-2xl: 1.3125rem; /* 21px */
646
- --icon-size-3xl: 1.5rem; /* 24px */
647
- --icon-size-4xl: 1.625rem; /* 26px */
648
- --icon-size-5xl: 1.875rem; /* 30px */
649
- --icon-size-6xl: 2.125rem; /* 34px */
650
- }
651
-
652
- /* Token additions */
653
- --badge-trait-surface: var(--surface-brand);
654
- --badge-trait-text: var(--text-brand);
655
- --badge-trait-text-font-family: var(--font-sans);
656
- --badge-trait-text-font-size: var(--font-size-sm);
657
- --badge-trait-text-font-weight: var(--font-weight-light);
658
- --badge-trait-text-line-height: var(--line-height-xs);
659
- --badge-trait-border: var(--border-brand-medium);
660
- --badge-trait-border-width: var(--border-width-1);
661
- --badge-trait-radius: var(--radius-full);
662
- --badge-trait-padding: var(--space-6);
663
- --badge-trait-shadow: transparent;
664
- --card-default-surface: color-mix(in srgb, var(--surface-neutral-lower) 90%, transparent);
665
- --card-default-border: var(--border-neutral);
666
- --card-default-title: var(--text-primary);
667
- --card-default-body: var(--text-secondary);
668
- --card-default-radius: var(--radius-lg);
669
- --card-hover-surface: color-mix(in srgb, var(--surface-neutral-lower) 90%, transparent);
670
- --card-hover-border: var(--border-neutral);
671
- --card-hover-title: var(--text-primary);
672
- --card-hover-body: var(--text-secondary);
673
- --card-hover-radius: var(--radius-lg);
674
- --card-hover-shadow: var(--shadow-sm);
675
- --card-default-shadow: var(--shadow-sm);
676
- --card-hover-header-surface: var(--surface-neutral-high);
677
- --card-default-header-surface: var(--surface-neutral);
678
- --card-hover-border-width: var(--border-width-1);
679
- --card-default-border-width: var(--border-width-1);
680
- --collapsiblesection-container-frame-surface: var(--surface-canvas-high);
681
- --collapsiblesection-container-frame-border-width: var(--border-width-3);
682
- --collapsiblesection-container-frame-radius: var(--radius-none);
683
- --collapsiblesection-container-default-surface: var(--surface-canvas-high);
684
- --collapsiblesection-container-default-padding: var(--space-4);
685
- --collapsiblesection-container-default-label: var(--text-primary);
686
- --collapsiblesection-container-default-label-font-family: var(--font-sans);
687
- --collapsiblesection-container-default-label-font-size: var(--font-size-md);
688
- --collapsiblesection-container-default-label-font-weight: var(--font-weight-bold);
689
- --collapsiblesection-container-default-label-line-height: var(--line-height-md);
690
- --collapsiblesection-container-default-icon: var(--text-primary);
691
- --collapsiblesection-container-default-icon-size: var(--icon-size-xs);
692
- --collapsiblesection-container-hover-surface: var(--surface-canvas);
693
- --collapsiblesection-container-hover-padding: var(--space-4);
694
- --collapsiblesection-container-hover-label: var(--text-primary);
695
- --collapsiblesection-container-hover-label-font-family: var(--font-sans);
696
- --collapsiblesection-container-hover-label-font-size: var(--font-size-md);
697
- --collapsiblesection-container-hover-label-font-weight: var(--font-weight-bold);
698
- --collapsiblesection-container-hover-label-line-height: var(--line-height-md);
699
- --collapsiblesection-container-hover-icon: var(--text-muted);
700
- --collapsiblesection-container-hover-icon-size: var(--icon-size-xs);
701
- --collapsiblesection-container-active-surface: var(--surface-canvas-low);
702
- --collapsiblesection-container-active-padding: var(--space-4);
703
- --collapsiblesection-container-active-label: var(--text-primary);
704
- --collapsiblesection-container-active-label-font-family: var(--font-sans);
705
- --collapsiblesection-container-active-label-font-size: var(--font-size-md);
706
- --collapsiblesection-container-active-label-font-weight: var(--font-weight-bold);
707
- --collapsiblesection-container-active-label-line-height: var(--line-height-md);
708
- --collapsiblesection-container-active-icon: var(--text-muted);
709
- --collapsiblesection-container-active-icon-size: var(--icon-size-xs);
710
- --button-primary-text: var(--text-primary);
711
- --button-primary-text-font-family: var(--font-sans);
712
- --button-primary-text-font-size: var(--font-size-sm);
713
- --button-primary-text-font-weight: var(--font-weight-light);
714
- --button-primary-text-line-height: var(--line-height-sm);
715
- --button-primary-border: var(--border-brand);
716
- --button-primary-border-width: var(--border-width-1);
717
- --button-primary-radius: var(--radius-md);
718
- --button-primary-padding: var(--space-8);
719
- --button-primary-hover-surface: var(--surface-brand-higher);
720
- --button-primary-hover-text: var(--text-primary);
721
- --button-primary-hover-border: var(--border-brand-strong);
722
- --button-primary-hover-border-width: var(--border-width-1);
723
- --button-primary-hover-radius: var(--radius-md);
724
- --button-primary-hover-padding: var(--space-8);
725
- --button-primary-disabled-surface: var(--color-neutral-700);
726
- --button-primary-disabled-text: var(--text-tertiary);
727
- --button-primary-disabled-border: var(--border-neutral-faint);
728
- --button-primary-disabled-border-width: var(--border-width-1);
729
- --button-primary-disabled-radius: var(--radius-md);
730
- --button-primary-disabled-padding: var(--space-8);
731
- --button-secondary-surface: var(--surface-neutral-high);
732
- --button-secondary-text: var(--text-primary);
733
- --button-secondary-text-font-family: var(--font-sans);
734
- --button-secondary-text-font-size: var(--font-size-sm);
735
- --button-secondary-text-font-weight: var(--font-weight-light);
736
- --button-secondary-text-line-height: var(--line-height-sm);
737
- --button-secondary-border: var(--border-neutral);
738
- --button-secondary-border-width: var(--border-width-1);
739
- --button-secondary-radius: var(--radius-md);
740
- --button-secondary-padding: var(--space-8);
741
- --button-secondary-hover-surface: var(--surface-neutral-higher);
742
- --button-secondary-hover-text: var(--text-primary);
743
- --button-secondary-hover-border: var(--border-neutral-strong);
744
- --button-secondary-hover-border-width: var(--border-width-1);
745
- --button-secondary-hover-radius: var(--radius-md);
746
- --button-secondary-hover-padding: var(--space-8);
747
- --button-secondary-disabled-surface: var(--color-neutral-700);
748
- --button-secondary-disabled-text: var(--text-tertiary);
749
- --button-secondary-disabled-border: var(--border-neutral-faint);
750
- --button-secondary-disabled-border-width: var(--border-width-1);
751
- --button-secondary-disabled-radius: var(--radius-md);
752
- --button-secondary-disabled-padding: var(--space-8);
753
- --button-outline-surface: var(--color-transparent);
754
- --button-outline-text: var(--text-primary);
755
- --button-outline-text-font-family: var(--font-sans);
756
- --button-outline-text-font-size: var(--font-size-sm);
757
- --button-outline-text-font-weight: var(--font-weight-light);
758
- --button-outline-text-line-height: var(--line-height-sm);
759
- --button-outline-border: var(--border-neutral);
760
- --button-outline-border-width: var(--border-width-1);
761
- --button-outline-radius: var(--radius-md);
762
- --button-outline-padding: var(--space-8);
763
- --button-outline-hover-surface: var(--surface-neutral-lower);
764
- --button-outline-hover-text: var(--text-primary);
765
- --button-outline-hover-border: var(--border-neutral-strong);
766
- --button-outline-hover-border-width: var(--border-width-1);
767
- --button-outline-hover-radius: var(--radius-md);
768
- --button-outline-hover-padding: var(--space-8);
769
- --button-outline-disabled-surface: var(--color-transparent);
770
- --button-outline-disabled-text: var(--text-tertiary);
771
- --button-outline-disabled-border: var(--border-neutral-faint);
772
- --button-outline-disabled-border-width: var(--border-width-1);
773
- --button-outline-disabled-radius: var(--radius-md);
774
- --button-outline-disabled-padding: var(--space-8);
775
- --button-success-surface: var(--surface-success-low);
776
- --button-success-text: var(--text-success);
777
- --button-success-text-font-family: var(--font-sans);
778
- --button-success-text-font-size: var(--font-size-sm);
779
- --button-success-text-font-weight: var(--font-weight-light);
780
- --button-success-text-line-height: var(--line-height-sm);
781
- --button-success-border: var(--border-success);
782
- --button-success-border-width: var(--border-width-1);
783
- --button-success-radius: var(--radius-md);
784
- --button-success-padding: var(--space-8);
785
- --button-success-hover-surface: var(--surface-success-higher);
786
- --button-success-hover-text: var(--text-primary);
787
- --button-success-hover-border: var(--border-success-strong);
788
- --button-success-hover-border-width: var(--border-width-1);
789
- --button-success-hover-radius: var(--radius-md);
790
- --button-success-hover-padding: var(--space-8);
791
- --button-success-disabled-surface: var(--color-neutral-700);
792
- --button-success-disabled-text: var(--text-tertiary);
793
- --button-success-disabled-border: var(--border-neutral-faint);
794
- --button-success-disabled-border-width: var(--border-width-1);
795
- --button-success-disabled-radius: var(--radius-md);
796
- --button-success-disabled-padding: var(--space-8);
797
- --button-danger-surface: var(--surface-danger-low);
798
- --button-danger-text: var(--text-danger);
799
- --button-danger-text-font-family: var(--font-sans);
800
- --button-danger-text-font-size: var(--font-size-sm);
801
- --button-danger-text-font-weight: var(--font-weight-light);
802
- --button-danger-text-line-height: var(--line-height-sm);
803
- --button-danger-border: var(--border-danger);
804
- --button-danger-border-width: var(--border-width-1);
805
- --button-danger-radius: var(--radius-md);
806
- --button-danger-padding: var(--space-8);
807
- --button-danger-hover-surface: var(--surface-danger-high);
808
- --button-danger-hover-text: var(--text-primary);
809
- --button-danger-hover-border: var(--border-danger-medium);
810
- --button-danger-hover-border-width: var(--border-width-1);
811
- --button-danger-hover-radius: var(--radius-md);
812
- --button-danger-hover-padding: var(--space-8);
813
- --button-danger-disabled-surface: var(--color-neutral-700);
814
- --button-danger-disabled-text: var(--text-tertiary);
815
- --button-danger-disabled-border: var(--border-neutral-faint);
816
- --button-danger-disabled-border-width: var(--border-width-1);
817
- --button-danger-disabled-radius: var(--radius-md);
818
- --button-danger-disabled-padding: var(--space-8);
819
- --button-warning-surface: var(--surface-warning-low);
820
- --button-warning-text: var(--text-warning);
821
- --button-warning-text-font-family: var(--font-sans);
822
- --button-warning-text-font-size: var(--font-size-sm);
823
- --button-warning-text-font-weight: var(--font-weight-light);
824
- --button-warning-text-line-height: var(--line-height-sm);
825
- --button-warning-border: var(--border-warning);
826
- --button-warning-border-width: var(--border-width-1);
827
- --button-warning-radius: var(--radius-md);
828
- --button-warning-padding: var(--space-8);
829
- --button-warning-hover-surface: var(--surface-warning-high);
830
- --button-warning-hover-text: var(--text-primary);
831
- --button-warning-hover-border: var(--border-warning-medium);
832
- --button-warning-hover-border-width: var(--border-width-1);
833
- --button-warning-hover-radius: var(--radius-md);
834
- --button-warning-hover-padding: var(--space-8);
835
- --button-warning-disabled-surface: var(--color-neutral-700);
836
- --button-warning-disabled-text: var(--text-tertiary);
837
- --button-warning-disabled-border: var(--border-neutral-faint);
838
- --button-warning-disabled-border-width: var(--border-width-1);
839
- --button-warning-disabled-radius: var(--radius-md);
840
- --button-warning-disabled-padding: var(--space-8);
841
- --button-primary-surface: var(--surface-brand-high);
842
- --dialog-overlay-surface: color-mix(in srgb, var(--color-neutral-950) 75%, transparent);
843
- --dialog-surface: var(--surface-neutral-lowest);
844
- --dialog-border: var(--border-neutral-strong);
845
- --dialog-border-width: var(--border-width-2);
846
- --dialog-radius: var(--radius-lg);
847
- --dialog-shadow: var(--shadow-2xl);
848
- --dialog-header-surface: var(--surface-brand-low);
849
- --dialog-header-border: var(--border-brand-subtle);
850
- --dialog-header-border-width: var(--border-width-1);
851
- --dialog-header-padding: var(--space-8);
852
- --dialog-title: var(--text-primary);
853
- --dialog-title-font-family: var(--font-sans);
854
- --dialog-title-font-size: var(--font-size-2xl);
855
- --dialog-title-font-weight: var(--font-weight-normal);
856
- --dialog-title-line-height: var(--line-height-sm);
857
- --dialog-close-icon: var(--text-secondary);
858
- --dialog-close-icon-size: var(--icon-size-xl);
859
- --dialog-body-padding: var(--space-16);
860
- --dialog-footer-border: var(--border-neutral-subtle);
861
- --dialog-footer-border-width: var(--border-width-1);
862
- --dialog-footer-padding: var(--space-16);
863
- --dialog-primary-default-surface: var(--surface-neutral-high);
864
- --dialog-primary-default-text: var(--text-primary);
865
- --dialog-primary-default-border: var(--border-neutral-medium);
866
- --dialog-primary-default-border-width: var(--border-width-1);
867
- --dialog-primary-default-radius: var(--radius-md);
868
- --dialog-primary-default-padding: var(--space-8);
869
- --dialog-primary-hover-surface: var(--surface-neutral-higher);
870
- --dialog-primary-hover-text: var(--text-primary);
871
- --dialog-primary-hover-border: var(--border-neutral-strong);
872
- --dialog-primary-hover-border-width: var(--border-width-1);
873
- --dialog-primary-hover-radius: var(--radius-md);
874
- --dialog-primary-hover-padding: var(--space-8);
875
- --dialog-secondary-default-text: var(--text-primary);
876
- --dialog-secondary-default-border: var(--border-neutral-medium);
877
- --dialog-secondary-default-border-width: var(--border-width-1);
878
- --dialog-secondary-default-radius: var(--radius-md);
879
- --dialog-secondary-default-padding: var(--space-8);
880
- --dialog-secondary-hover-surface: var(--surface-neutral-lower);
881
- --dialog-secondary-hover-text: var(--text-primary);
882
- --dialog-secondary-hover-border: var(--border-neutral-strong);
883
- --dialog-secondary-hover-border-width: var(--border-width-1);
884
- --dialog-secondary-hover-radius: var(--radius-md);
885
- --dialog-secondary-hover-padding: var(--space-8);
886
- --image-default-radius: var(--radius-xl);
887
- --image-default-border: var(--border-neutral);
888
- --image-default-border-width: var(--border-width-1);
889
- --image-default-shadow: var(--shadow-md);
890
- --radiobutton-default-dot-border-color: var(--border-neutral);
891
- --radiobutton-default-dot-border-width: var(--border-width-2);
892
- --radiobutton-default-dot-fill: var(--text-secondary);
893
- --radiobutton-default-dot-size: var(--dot-size-0);
894
- --radiobutton-default-label: var(--text-primary);
895
- --radiobutton-default-label-font-family: var(--font-sans);
896
- --radiobutton-default-label-font-size: var(--font-size-md);
897
- --radiobutton-default-label-font-weight: var(--font-weight-semibold);
898
- --radiobutton-default-label-line-height: var(--line-height-xs);
899
- --radiobutton-hover-dot-border-color: var(--border-neutral);
900
- --radiobutton-hover-dot-border-width: var(--border-width-2);
901
- --radiobutton-hover-dot-fill: var(--surface-neutral);
902
- --radiobutton-hover-dot-size: var(--dot-size-100);
903
- --radiobutton-hover-label: var(--text-primary);
904
- --radiobutton-hover-label-font-family: var(--font-sans);
905
- --radiobutton-hover-label-font-size: var(--font-size-md);
906
- --radiobutton-hover-label-font-weight: var(--font-weight-semibold);
907
- --radiobutton-hover-label-line-height: var(--line-height-xs);
908
- --radiobutton-active-dot-border-color: var(--border-neutral);
909
- --radiobutton-active-dot-border-width: var(--border-width-2);
910
- --radiobutton-active-dot-fill: var(--color-brand-500);
911
- --radiobutton-active-dot-size: var(--dot-size-75);
912
- --radiobutton-active-label: var(--text-primary);
913
- --radiobutton-active-label-font-family: var(--font-sans);
914
- --radiobutton-active-label-font-size: var(--font-size-md);
915
- --radiobutton-active-label-font-weight: var(--font-weight-semibold);
916
- --radiobutton-active-label-line-height: var(--line-height-xs);
917
- --notification-info-surface: var(--surface-info);
918
- --notification-info-border: var(--border-info);
919
- --notification-info-border-width: var(--border-width-1);
920
- --notification-info-radius: var(--radius-md);
921
- --notification-info-padding: var(--space-12);
922
- --notification-info-icon: var(--text-info);
923
- --notification-info-icon-size: var(--icon-size-md);
924
- --notification-info-title: var(--text-info);
925
- --notification-info-title-font-family: var(--font-sans);
926
- --notification-info-title-font-size: var(--font-size-lg);
927
- --notification-info-title-font-weight: var(--font-weight-normal);
928
- --notification-info-title-line-height: var(--line-height-sm);
929
- --notification-info-text: var(--text-primary);
930
- --notification-info-text-font-family: var(--font-sans);
931
- --notification-info-text-font-size: var(--font-size-md);
932
- --notification-info-text-font-weight: var(--font-weight-extralight);
933
- --notification-info-text-line-height: var(--line-height-md);
934
- --notification-success-surface: var(--surface-success);
935
- --notification-success-border: var(--border-success);
936
- --notification-success-border-width: var(--border-width-1);
937
- --notification-success-radius: var(--radius-md);
938
- --notification-success-padding: var(--space-12);
939
- --notification-success-icon: var(--text-success);
940
- --notification-success-icon-size: var(--icon-size-md);
941
- --notification-success-title: var(--text-success);
942
- --notification-success-title-font-family: var(--font-sans);
943
- --notification-success-title-font-size: var(--font-size-lg);
944
- --notification-success-title-font-weight: var(--font-weight-normal);
945
- --notification-success-title-line-height: var(--line-height-sm);
946
- --notification-success-text: var(--text-primary);
947
- --notification-success-text-font-family: var(--font-sans);
948
- --notification-success-text-font-size: var(--font-size-md);
949
- --notification-success-text-font-weight: var(--font-weight-extralight);
950
- --notification-success-text-line-height: var(--line-height-md);
951
- --notification-warning-surface: var(--surface-warning);
952
- --notification-warning-border: var(--border-warning);
953
- --notification-warning-border-width: var(--border-width-1);
954
- --notification-warning-radius: var(--radius-md);
955
- --notification-warning-padding: var(--space-12);
956
- --notification-warning-icon: var(--text-warning);
957
- --notification-warning-icon-size: var(--icon-size-md);
958
- --notification-warning-title: var(--text-warning);
959
- --notification-warning-title-font-family: var(--font-sans);
960
- --notification-warning-title-font-size: var(--font-size-lg);
961
- --notification-warning-title-font-weight: var(--font-weight-normal);
962
- --notification-warning-title-line-height: var(--line-height-sm);
963
- --notification-warning-text: var(--text-primary);
964
- --notification-warning-text-font-family: var(--font-sans);
965
- --notification-warning-text-font-size: var(--font-size-md);
966
- --notification-warning-text-font-weight: var(--font-weight-extralight);
967
- --notification-warning-text-line-height: var(--line-height-md);
968
- --notification-danger-surface: var(--surface-danger);
969
- --notification-danger-border: var(--border-danger);
970
- --notification-danger-border-width: var(--border-width-1);
971
- --notification-danger-radius: var(--radius-md);
972
- --notification-danger-padding: var(--space-12);
973
- --notification-danger-icon: var(--text-danger);
974
- --notification-danger-icon-size: var(--icon-size-md);
975
- --notification-danger-title: var(--text-danger);
976
- --notification-danger-title-font-family: var(--font-sans);
977
- --notification-danger-title-font-size: var(--font-size-lg);
978
- --notification-danger-title-font-weight: var(--font-weight-normal);
979
- --notification-danger-title-line-height: var(--line-height-sm);
980
- --notification-danger-text: var(--text-primary);
981
- --notification-danger-text-font-family: var(--font-sans);
982
- --notification-danger-text-font-size: var(--font-size-md);
983
- --notification-danger-text-font-weight: var(--font-weight-extralight);
984
- --notification-danger-text-line-height: var(--line-height-md);
985
- --progressbar-primary-track-surface: var(--surface-neutral-lower);
986
- --progressbar-primary-track-border: var(--border-neutral-subtle);
987
- --progressbar-primary-track-border-width: var(--border-width-1);
988
- --progressbar-primary-track-height: var(--space-10);
989
- --progressbar-primary-radius: var(--radius-full);
990
- --progressbar-primary-fill: var(--color-brand-700);
991
- --progressbar-primary-label: var(--text-secondary);
992
- --progressbar-primary-label-font-family: var(--font-sans);
993
- --progressbar-primary-label-font-size: var(--font-size-sm);
994
- --progressbar-primary-label-font-weight: var(--font-weight-light);
995
- --progressbar-primary-label-line-height: var(--line-height-md);
996
- --progressbar-primary-value: var(--text-tertiary);
997
- --progressbar-primary-value-font-family: var(--font-mono);
998
- --progressbar-primary-value-font-size: var(--font-size-xs);
999
- --progressbar-primary-value-font-weight: var(--font-weight-light);
1000
- --progressbar-primary-value-line-height: var(--line-height-md);
1001
- --progressbar-success-track-surface: var(--surface-neutral-low);
1002
- --progressbar-success-track-border: var(--border-neutral-faint);
1003
- --progressbar-success-track-border-width: var(--border-width-1);
1004
- --progressbar-success-track-height: var(--space-10);
1005
- --progressbar-success-radius: var(--radius-full);
1006
- --progressbar-success-fill: var(--border-success);
1007
- --progressbar-success-label: var(--text-secondary);
1008
- --progressbar-success-label-font-family: var(--font-sans);
1009
- --progressbar-success-label-font-size: var(--font-size-sm);
1010
- --progressbar-success-label-font-weight: var(--font-weight-light);
1011
- --progressbar-success-label-line-height: var(--line-height-md);
1012
- --progressbar-success-value: var(--text-tertiary);
1013
- --progressbar-success-value-font-family: var(--font-mono);
1014
- --progressbar-success-value-font-size: var(--font-size-xs);
1015
- --progressbar-success-value-font-weight: var(--font-weight-light);
1016
- --progressbar-success-value-line-height: var(--line-height-md);
1017
- --progressbar-warning-track-surface: var(--surface-neutral-low);
1018
- --progressbar-warning-track-border: var(--border-neutral-faint);
1019
- --progressbar-warning-track-border-width: var(--border-width-1);
1020
- --progressbar-warning-track-height: var(--space-10);
1021
- --progressbar-warning-radius: var(--radius-full);
1022
- --progressbar-warning-fill: var(--border-warning);
1023
- --progressbar-warning-label: var(--text-secondary);
1024
- --progressbar-warning-label-font-family: var(--font-sans);
1025
- --progressbar-warning-label-font-size: var(--font-size-sm);
1026
- --progressbar-warning-label-font-weight: var(--font-weight-light);
1027
- --progressbar-warning-label-line-height: var(--line-height-md);
1028
- --progressbar-warning-value: var(--text-tertiary);
1029
- --progressbar-warning-value-font-family: var(--font-mono);
1030
- --progressbar-warning-value-font-size: var(--font-size-xs);
1031
- --progressbar-warning-value-font-weight: var(--font-weight-light);
1032
- --progressbar-warning-value-line-height: var(--line-height-md);
1033
- --progressbar-danger-track-surface: var(--surface-neutral-low);
1034
- --progressbar-danger-track-border: var(--border-neutral-faint);
1035
- --progressbar-danger-track-border-width: var(--border-width-1);
1036
- --progressbar-danger-track-height: var(--space-10);
1037
- --progressbar-danger-radius: var(--radius-full);
1038
- --progressbar-danger-fill: var(--border-danger);
1039
- --progressbar-danger-label: var(--text-secondary);
1040
- --progressbar-danger-label-font-family: var(--font-sans);
1041
- --progressbar-danger-label-font-size: var(--font-size-sm);
1042
- --progressbar-danger-label-font-weight: var(--font-weight-light);
1043
- --progressbar-danger-label-line-height: var(--line-height-md);
1044
- --progressbar-danger-value: var(--text-tertiary);
1045
- --progressbar-danger-value-font-family: var(--font-mono);
1046
- --progressbar-danger-value-font-size: var(--font-size-xs);
1047
- --progressbar-danger-value-font-weight: var(--font-weight-light);
1048
- --progressbar-danger-value-line-height: var(--line-height-md);
1049
- --progressbar-info-track-surface: var(--surface-neutral-low);
1050
- --progressbar-info-track-border: var(--border-neutral-faint);
1051
- --progressbar-info-track-border-width: var(--border-width-1);
1052
- --progressbar-info-track-height: var(--space-10);
1053
- --progressbar-info-radius: var(--radius-full);
1054
- --progressbar-info-fill: var(--border-info);
1055
- --progressbar-info-label: var(--text-secondary);
1056
- --progressbar-info-label-font-family: var(--font-sans);
1057
- --progressbar-info-label-font-size: var(--font-size-sm);
1058
- --progressbar-info-label-font-weight: var(--font-weight-light);
1059
- --progressbar-info-label-line-height: var(--line-height-md);
1060
- --progressbar-info-value: var(--text-tertiary);
1061
- --progressbar-info-value-font-family: var(--font-mono);
1062
- --progressbar-info-value-font-size: var(--font-size-xs);
1063
- --progressbar-info-value-font-weight: var(--font-weight-light);
1064
- --progressbar-info-value-line-height: var(--line-height-md);
1065
- --sectiondivider-padding: var(--space-16);
1066
- --sectiondivider-title: var(--text-primary);
1067
- --sectiondivider-title-font-family: var(--font-display);
1068
- --sectiondivider-title-font-size: var(--font-size-5xl);
1069
- --sectiondivider-title-font-weight: var(--font-weight-normal);
1070
- --sectiondivider-title-line-height: var(--line-height-xs);
1071
- --sectiondivider-title-border-width: var(--border-width-4);
1072
- --sectiondivider-title-stroke-color: var(--surface-canvas-lowest);
1073
- --sectiondivider-description: var(--text-secondary);
1074
- --sectiondivider-description-font-family: var(--font-sans);
1075
- --sectiondivider-description-font-size: var(--font-size-md);
1076
- --sectiondivider-description-font-weight: var(--font-weight-normal);
1077
- --sectiondivider-description-line-height: var(--line-height-md);
1078
- --sectiondivider-canvas-gradient-stop-1: var(--surface-canvas-highest);
1079
- --sectiondivider-canvas-gradient-stop-2: var(--surface-canvas-higher);
1080
- --sectiondivider-canvas-gradient-stop-3: var(--surface-canvas-high);
1081
- --sectiondivider-canvas-gradient-stop-4: var(--surface-canvas);
1082
- --sectiondivider-canvas-radius: var(--radius-lg);
1083
- --sectiondivider-neutral-gradient-stop-1: var(--surface-neutral-highest);
1084
- --sectiondivider-neutral-gradient-stop-2: var(--surface-neutral-higher);
1085
- --sectiondivider-neutral-gradient-stop-3: var(--surface-neutral-high);
1086
- --sectiondivider-neutral-gradient-stop-4: var(--surface-neutral);
1087
- --sectiondivider-neutral-radius: var(--radius-lg);
1088
- --sectiondivider-alternate-gradient-stop-1: var(--surface-alternate-highest);
1089
- --sectiondivider-alternate-gradient-stop-2: var(--surface-alternate-higher);
1090
- --sectiondivider-alternate-gradient-stop-3: var(--surface-alternate-high);
1091
- --sectiondivider-alternate-gradient-stop-4: var(--surface-alternate);
1092
- --sectiondivider-alternate-radius: var(--radius-lg);
1093
- --sectiondivider-primary-gradient-stop-1: var(--surface-brand-highest);
1094
- --sectiondivider-primary-gradient-stop-2: var(--surface-brand-higher);
1095
- --sectiondivider-primary-gradient-stop-3: var(--surface-brand-high);
1096
- --sectiondivider-primary-gradient-stop-4: var(--surface-brand);
1097
- --sectiondivider-primary-radius: var(--radius-lg);
1098
- --sectiondivider-accent-gradient-stop-1: var(--surface-accent-highest);
1099
- --sectiondivider-accent-gradient-stop-2: var(--surface-accent-higher);
1100
- --sectiondivider-accent-gradient-stop-3: var(--surface-accent-high);
1101
- --sectiondivider-accent-gradient-stop-4: var(--surface-accent);
1102
- --sectiondivider-accent-radius: var(--radius-lg);
1103
- --sectiondivider-special-gradient-stop-1: var(--surface-special-highest);
1104
- --sectiondivider-special-gradient-stop-2: var(--surface-special-higher);
1105
- --sectiondivider-special-gradient-stop-3: var(--surface-special-high);
1106
- --sectiondivider-special-gradient-stop-4: var(--surface-special);
1107
- --sectiondivider-special-radius: var(--radius-lg);
1108
- --tabbar-bar-divider: var(--border-neutral-subtle);
1109
- --tabbar-bar-divider-thickness: var(--border-width-1);
1110
- --tabbar-bar-radius: var(--radius-md);
1111
- --tabbar-bar-padding: var(--space-8);
1112
- --tabbar-default-text: var(--text-tertiary);
1113
- --tabbar-default-text-font-family: var(--font-sans);
1114
- --tabbar-default-text-font-size: var(--font-size-md);
1115
- --tabbar-default-text-font-weight: var(--font-weight-light);
1116
- --tabbar-default-text-line-height: var(--line-height-md);
1117
- --tabbar-default-icon-size: var(--icon-size-md);
1118
- --tabbar-default-padding: var(--space-8);
1119
- --tabbar-default-border-width: var(--border-width-2);
1120
- --tabbar-hover-text: var(--text-secondary);
1121
- --tabbar-hover-surface: var(--surface-neutral-lower);
1122
- --tabbar-hover-text-font-family: var(--font-sans);
1123
- --tabbar-hover-text-font-size: var(--font-size-md);
1124
- --tabbar-hover-text-font-weight: var(--font-weight-light);
1125
- --tabbar-hover-text-line-height: var(--line-height-md);
1126
- --tabbar-hover-icon-size: var(--icon-size-md);
1127
- --tabbar-hover-padding: var(--space-8);
1128
- --tabbar-hover-border-width: var(--border-width-2);
1129
- --tabbar-active-text: var(--text-primary);
1130
- --tabbar-active-border: var(--color-brand-500);
1131
- --tabbar-active-surface: var(--overlay-lowest);
1132
- --tabbar-active-text-font-family: var(--font-sans);
1133
- --tabbar-active-text-font-size: var(--font-size-md);
1134
- --tabbar-active-text-font-weight: var(--font-weight-light);
1135
- --tabbar-active-text-line-height: var(--line-height-md);
1136
- --tabbar-active-icon-size: var(--icon-size-md);
1137
- --tabbar-active-padding: var(--space-8);
1138
- --tabbar-active-border-width: var(--border-width-2);
1139
- --inlineeditactions-save-default-surface: var(--surface-success-low);
1140
- --inlineeditactions-save-default-text: var(--text-success);
1141
- --inlineeditactions-save-default-border: var(--border-success);
1142
- --inlineeditactions-save-default-border-width: var(--border-width-1);
1143
- --inlineeditactions-save-default-radius: var(--radius-md);
1144
- --inlineeditactions-save-default-padding: var(--space-4);
1145
- --inlineeditactions-save-default-icon-size: var(--icon-size-md);
1146
- --inlineeditactions-save-hover-surface: var(--surface-success-high);
1147
- --inlineeditactions-save-hover-text: var(--text-primary);
1148
- --inlineeditactions-save-hover-border: var(--border-success);
1149
- --inlineeditactions-save-hover-border-width: var(--border-width-1);
1150
- --inlineeditactions-save-hover-radius: var(--radius-md);
1151
- --inlineeditactions-save-hover-padding: var(--space-4);
1152
- --inlineeditactions-save-hover-icon-size: var(--icon-size-md);
1153
- --inlineeditactions-cancel-default-surface: var(--surface-danger-low);
1154
- --inlineeditactions-cancel-default-text: var(--text-danger);
1155
- --inlineeditactions-cancel-default-border: var(--border-danger);
1156
- --inlineeditactions-cancel-default-border-width: var(--border-width-1);
1157
- --inlineeditactions-cancel-default-radius: var(--radius-md);
1158
- --inlineeditactions-cancel-default-padding: var(--space-4);
1159
- --inlineeditactions-cancel-default-icon-size: var(--icon-size-md);
1160
- --inlineeditactions-cancel-hover-surface: var(--surface-danger-high);
1161
- --inlineeditactions-cancel-hover-text: var(--text-primary);
1162
- --inlineeditactions-cancel-hover-border: var(--border-danger);
1163
- --inlineeditactions-cancel-hover-border-width: var(--border-width-1);
1164
- --inlineeditactions-cancel-hover-radius: var(--radius-md);
1165
- --inlineeditactions-cancel-hover-padding: var(--space-4);
1166
- --inlineeditactions-cancel-hover-icon-size: var(--icon-size-md);
1167
- --tooltip-surface: var(--surface-neutral-highest);
1168
- --tooltip-text: var(--text-primary);
1169
- --tooltip-text-font-family: var(--font-sans);
1170
- --tooltip-text-font-size: var(--font-size-sm);
1171
- --tooltip-text-font-weight: var(--font-weight-normal);
1172
- --tooltip-text-line-height: var(--line-height-md);
1173
- --tooltip-border: var(--border-neutral);
1174
- --tooltip-border-width: var(--border-width-0);
1175
- --tooltip-radius: var(--radius-md);
1176
- --tooltip-padding: var(--space-6);
1177
- --tooltip-shadow: var(--shadow-md);
1178
- --segmentedcontrol-bar-surface: color-mix(in srgb, var(--surface-neutral-lowest) 85%, transparent);
1179
- --segmentedcontrol-bar-border: var(--border-neutral);
1180
- --segmentedcontrol-bar-border-width: var(--border-width-1);
1181
- --segmentedcontrol-bar-radius: var(--radius-xl);
1182
- --segmentedcontrol-bar-padding: var(--space-4);
1183
- --segmentedcontrol-divider-color: var(--border-neutral);
1184
- --segmentedcontrol-divider-thickness: var(--border-width-1);
1185
- --segmentedcontrol-divider-height: var(--space-20);
1186
- --segmentedcontrol-option-text: var(--text-primary);
1187
- --segmentedcontrol-option-text-font-family: var(--font-sans);
1188
- --segmentedcontrol-option-text-font-size: var(--font-size-sm);
1189
- --segmentedcontrol-option-text-font-weight: var(--font-weight-normal);
1190
- --segmentedcontrol-option-text-line-height: var(--line-height-md);
1191
- --segmentedcontrol-option-icon: var(--text-secondary);
1192
- --segmentedcontrol-option-hover-surface: var(--surface-neutral-higher);
1193
- --segmentedcontrol-option-hover-text: var(--text-primary);
1194
- --segmentedcontrol-option-hover-text-font-family: var(--font-sans);
1195
- --segmentedcontrol-option-hover-text-font-size: var(--font-size-sm);
1196
- --segmentedcontrol-option-hover-text-font-weight: var(--font-weight-normal);
1197
- --segmentedcontrol-option-hover-text-line-height: var(--line-height-md);
1198
- --segmentedcontrol-option-hover-icon: var(--text-secondary);
1199
- --segmentedcontrol-selected-surface: var(--surface-brand);
1200
- --segmentedcontrol-selected-text: var(--text-primary);
1201
- --segmentedcontrol-selected-text-font-family: var(--font-sans);
1202
- --segmentedcontrol-selected-text-font-size: var(--font-size-sm);
1203
- --segmentedcontrol-selected-text-font-weight: var(--font-weight-semibold);
1204
- --segmentedcontrol-selected-text-line-height: var(--line-height-md);
1205
- --segmentedcontrol-selected-icon: var(--text-primary);
1206
- --segmentedcontrol-selected-border: var(--border-brand);
1207
- --segmentedcontrol-selected-border-width: var(--border-width-1);
1208
- --segmentedcontrol-selected-radius: var(--radius-md);
1209
- --segmentedcontrol-disabled-surface: var(--surface-neutral-low);
1210
- --segmentedcontrol-disabled-text: var(--text-tertiary);
1211
- --segmentedcontrol-disabled-text-font-family: var(--font-sans);
1212
- --segmentedcontrol-disabled-text-font-size: var(--font-size-sm);
1213
- --segmentedcontrol-disabled-text-font-weight: var(--font-weight-light);
1214
- --segmentedcontrol-disabled-text-line-height: var(--line-height-md);
1215
- --segmentedcontrol-disabled-icon: var(--text-tertiary);
1216
- --segmentedcontrol-bar-gap: var(--space-8);
1217
- --hover-low: rgba(255, 255, 255, 0.05);
1218
- --hover: rgba(255, 255, 255, 0.1);
1219
- --hover-high: rgba(255, 255, 255, 0.15);
1220
-
1221
- /* Token additions */
1222
- --sectiondivider-canvas-padding: var(--space-16);
1223
- --sectiondivider-canvas-title: var(--text-primary);
1224
- --sectiondivider-canvas-title-font-family: var(--font-display);
1225
- --sectiondivider-canvas-title-font-size: var(--font-size-5xl);
1226
- --sectiondivider-canvas-title-font-weight: var(--font-weight-normal);
1227
- --sectiondivider-canvas-title-line-height: var(--line-height-xs);
1228
- --sectiondivider-canvas-title-border-width: var(--border-width-4);
1229
- --sectiondivider-canvas-title-stroke-color: var(--surface-canvas-lowest);
1230
- --sectiondivider-canvas-description: var(--text-secondary);
1231
- --sectiondivider-canvas-description-font-family: var(--font-sans);
1232
- --sectiondivider-canvas-description-font-size: var(--font-size-md);
1233
- --sectiondivider-canvas-description-font-weight: var(--font-weight-normal);
1234
- --sectiondivider-canvas-description-line-height: var(--line-height-md);
1235
- --sectiondivider-neutral-padding: var(--space-16);
1236
- --sectiondivider-neutral-title: var(--text-primary);
1237
- --sectiondivider-neutral-title-font-family: var(--font-display);
1238
- --sectiondivider-neutral-title-font-size: var(--font-size-5xl);
1239
- --sectiondivider-neutral-title-font-weight: var(--font-weight-normal);
1240
- --sectiondivider-neutral-title-line-height: var(--line-height-xs);
1241
- --sectiondivider-neutral-title-border-width: var(--border-width-4);
1242
- --sectiondivider-neutral-title-stroke-color: var(--surface-neutral-lowest);
1243
- --sectiondivider-neutral-description: var(--text-secondary);
1244
- --sectiondivider-neutral-description-font-family: var(--font-sans);
1245
- --sectiondivider-neutral-description-font-size: var(--font-size-md);
1246
- --sectiondivider-neutral-description-font-weight: var(--font-weight-normal);
1247
- --sectiondivider-neutral-description-line-height: var(--line-height-md);
1248
- --sectiondivider-alternate-padding: var(--space-16);
1249
- --sectiondivider-alternate-title: var(--text-primary);
1250
- --sectiondivider-alternate-title-font-family: var(--font-display);
1251
- --sectiondivider-alternate-title-font-size: var(--font-size-5xl);
1252
- --sectiondivider-alternate-title-font-weight: var(--font-weight-normal);
1253
- --sectiondivider-alternate-title-line-height: var(--line-height-xs);
1254
- --sectiondivider-alternate-title-border-width: var(--border-width-4);
1255
- --sectiondivider-alternate-title-stroke-color: var(--surface-alternate-lowest);
1256
- --sectiondivider-alternate-description: var(--text-secondary);
1257
- --sectiondivider-alternate-description-font-family: var(--font-sans);
1258
- --sectiondivider-alternate-description-font-size: var(--font-size-md);
1259
- --sectiondivider-alternate-description-font-weight: var(--font-weight-normal);
1260
- --sectiondivider-alternate-description-line-height: var(--line-height-md);
1261
- --sectiondivider-primary-padding: var(--space-16);
1262
- --sectiondivider-primary-title: var(--text-primary);
1263
- --sectiondivider-primary-title-font-family: var(--font-display);
1264
- --sectiondivider-primary-title-font-size: var(--font-size-5xl);
1265
- --sectiondivider-primary-title-font-weight: var(--font-weight-normal);
1266
- --sectiondivider-primary-title-line-height: var(--line-height-xs);
1267
- --sectiondivider-primary-title-border-width: var(--border-width-4);
1268
- --sectiondivider-primary-title-stroke-color: var(--surface-brand-lowest);
1269
- --sectiondivider-primary-description: var(--text-secondary);
1270
- --sectiondivider-primary-description-font-family: var(--font-sans);
1271
- --sectiondivider-primary-description-font-size: var(--font-size-md);
1272
- --sectiondivider-primary-description-font-weight: var(--font-weight-normal);
1273
- --sectiondivider-primary-description-line-height: var(--line-height-md);
1274
- --sectiondivider-accent-padding: var(--space-16);
1275
- --sectiondivider-accent-title: var(--text-primary);
1276
- --sectiondivider-accent-title-font-family: var(--font-display);
1277
- --sectiondivider-accent-title-font-size: var(--font-size-5xl);
1278
- --sectiondivider-accent-title-font-weight: var(--font-weight-normal);
1279
- --sectiondivider-accent-title-line-height: var(--line-height-xs);
1280
- --sectiondivider-accent-title-border-width: var(--border-width-4);
1281
- --sectiondivider-accent-title-stroke-color: var(--surface-accent-lowest);
1282
- --sectiondivider-accent-description: var(--text-secondary);
1283
- --sectiondivider-accent-description-font-family: var(--font-sans);
1284
- --sectiondivider-accent-description-font-size: var(--font-size-md);
1285
- --sectiondivider-accent-description-font-weight: var(--font-weight-normal);
1286
- --sectiondivider-accent-description-line-height: var(--line-height-md);
1287
- --sectiondivider-special-padding: var(--space-16);
1288
- --sectiondivider-special-title: var(--text-primary);
1289
- --sectiondivider-special-title-font-family: var(--font-display);
1290
- --sectiondivider-special-title-font-size: var(--font-size-5xl);
1291
- --sectiondivider-special-title-font-weight: var(--font-weight-normal);
1292
- --sectiondivider-special-title-line-height: var(--line-height-xs);
1293
- --sectiondivider-special-title-border-width: var(--border-width-4);
1294
- --sectiondivider-special-title-stroke-color: var(--surface-special-lowest);
1295
- --sectiondivider-special-description: var(--text-secondary);
1296
- --sectiondivider-special-description-font-family: var(--font-sans);
1297
- --sectiondivider-special-description-font-size: var(--font-size-md);
1298
- --sectiondivider-special-description-font-weight: var(--font-weight-normal);
1299
- --sectiondivider-special-description-line-height: var(--line-height-md);
1300
- }
1301
-
1302
- /* component-aliases:start */
1303
- :root:root {
1304
- /* button (default_01) */
1305
- --button-primary-radius: var(--radius-full);
1306
- --button-primary-hover-radius: var(--radius-full);
1307
- --button-primary-disabled-radius: var(--radius-full);
1308
- --button-secondary-radius: var(--radius-full);
1309
- --button-secondary-hover-radius: var(--radius-full);
1310
- --button-secondary-disabled-radius: var(--radius-full);
1311
- --button-outline-radius: var(--radius-full);
1312
- --button-outline-hover-radius: var(--radius-full);
1313
- --button-outline-disabled-radius: var(--radius-full);
1314
- --button-success-radius: var(--radius-full);
1315
- --button-success-hover-radius: var(--radius-full);
1316
- --button-success-disabled-radius: var(--radius-full);
1317
- --button-danger-radius: var(--radius-full);
1318
- --button-danger-hover-radius: var(--radius-full);
1319
- --button-danger-disabled-radius: var(--radius-full);
1320
- --button-warning-radius: var(--radius-full);
1321
- --button-warning-hover-radius: var(--radius-full);
1322
- --button-warning-disabled-radius: var(--radius-full);
1323
- }
1324
- /* component-aliases:end */