@motion-proto/live-tokens 0.7.1 → 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 (85) hide show
  1. package/dist-plugin/index.cjs +707 -90
  2. package/dist-plugin/index.d.cts +1 -0
  3. package/dist-plugin/index.d.ts +1 -0
  4. package/dist-plugin/index.js +707 -90
  5. package/package.json +2 -1
  6. package/src/app/site.css +1 -1
  7. package/src/editor/component-editor/CollapsibleSectionEditor.svelte +34 -27
  8. package/src/editor/component-editor/DialogEditor.svelte +4 -4
  9. package/src/editor/component-editor/NotificationEditor.svelte +3 -1
  10. package/src/editor/component-editor/SectionDividerEditor.svelte +439 -112
  11. package/src/editor/component-editor/StandardButtonsEditor.svelte +13 -1
  12. package/src/editor/component-editor/editors.d.ts +10 -0
  13. package/src/editor/component-editor/scaffolding/AngleDial.svelte +52 -13
  14. package/src/editor/component-editor/scaffolding/ComponentFileManager.svelte +10 -11
  15. package/src/editor/component-editor/scaffolding/LinkedBlock.svelte +0 -1
  16. package/src/editor/component-editor/scaffolding/RadialShapePad.svelte +483 -0
  17. package/src/editor/component-editor/scaffolding/ShadowBackdrop.svelte +15 -2
  18. package/src/editor/component-editor/scaffolding/StateBlock.svelte +103 -15
  19. package/src/editor/component-editor/scaffolding/TokenLayout.svelte +9 -6
  20. package/src/editor/component-editor/scaffolding/TypeEditor.svelte +13 -1
  21. package/src/editor/component-editor/scaffolding/VariantGroup.svelte +239 -25
  22. package/src/editor/component-editor/scaffolding/buildTypeGroupTokens.ts +1 -0
  23. package/src/editor/component-editor/scaffolding/types.ts +11 -0
  24. package/src/editor/core/components/componentConfigKeys.ts +8 -0
  25. package/src/editor/core/components/componentConfigService.ts +2 -2
  26. package/src/editor/core/components/componentPersist.ts +7 -5
  27. package/src/editor/core/manifests/manifestService.ts +58 -3
  28. package/src/editor/core/palettes/familySwap.ts +99 -0
  29. package/src/editor/core/palettes/paletteDerivation.ts +69 -0
  30. package/src/editor/core/palettes/tokenRegistry.ts +4 -1
  31. package/src/editor/core/store/editorStore.ts +206 -12
  32. package/src/editor/core/store/editorTypes.ts +55 -12
  33. package/src/editor/core/store/gradientSource.ts +192 -0
  34. package/src/editor/core/themes/migrations/2026-05-19-collapsiblesection-drop-frame-surface.ts +28 -0
  35. package/src/editor/core/themes/migrations/2026-05-19-sectiondivider-rich-gradient.ts +35 -0
  36. package/src/editor/core/themes/migrations/2026-05-20-sectiondivider-slim-variants.ts +82 -0
  37. package/src/editor/core/themes/migrations/2026-05-21-sectiondivider-spacing-to-padding.ts +24 -0
  38. package/src/editor/core/themes/migrations/2026-05-22-sectiondivider-intrinsics-to-css.ts +81 -0
  39. package/src/editor/core/themes/migrations/index.ts +10 -0
  40. package/src/editor/core/themes/slices/components.ts +18 -4
  41. package/src/editor/core/themes/slices/gradients.ts +88 -13
  42. package/src/editor/core/themes/themeInit.ts +2 -2
  43. package/src/editor/core/themes/themeTypes.ts +56 -1
  44. package/src/editor/overlay/ColumnsOverlay.svelte +0 -1
  45. package/src/editor/overlay/LiveEditorOverlay.svelte +1 -4
  46. package/src/editor/styles/ui-editor.css +1 -0
  47. package/src/editor/styles/ui-form-controls.css +19 -20
  48. package/src/editor/ui/BezierCurveEditor.svelte +114 -63
  49. package/src/editor/ui/EditorViewSwitcher.svelte +0 -1
  50. package/src/editor/ui/FileLoadList.svelte +22 -5
  51. package/src/editor/ui/FontStackEditor.svelte +214 -76
  52. package/src/editor/ui/GradientEditor.svelte +435 -215
  53. package/src/editor/ui/GradientStopPicker.svelte +11 -3
  54. package/src/editor/ui/ManifestFileManager.svelte +71 -4
  55. package/src/editor/ui/PaletteEditor.svelte +52 -79
  56. package/src/editor/ui/ProjectFontsSection.svelte +328 -293
  57. package/src/editor/ui/ThemeFileManager.svelte +0 -4
  58. package/src/editor/ui/UIFontFamilySelector.svelte +0 -1
  59. package/src/editor/ui/UIFontSizeSelector.svelte +3 -0
  60. package/src/editor/ui/UIInfoPopover.svelte +0 -1
  61. package/src/editor/ui/UILetterSpacingSelector.svelte +65 -0
  62. package/src/editor/ui/UIPaletteSelector.svelte +31 -4
  63. package/src/editor/ui/UIPillButton.svelte +33 -3
  64. package/src/editor/ui/UISegmentedControl.svelte +114 -0
  65. package/src/editor/ui/UITokenSelector.svelte +4 -1
  66. package/src/editor/ui/VariablesTab.svelte +41 -35
  67. package/src/editor/ui/palette/OverridesPanel.svelte +14 -37
  68. package/src/editor/ui/palette/PaletteBase.svelte +3 -3
  69. package/src/editor/ui/sections/ColumnsSection.svelte +1 -2
  70. package/src/editor/ui/sections/GradientsSection.svelte +1 -1
  71. package/src/editor/ui/sections/OverlaysSection.svelte +1 -1
  72. package/src/editor/ui/sections/ShadowsSection.svelte +1 -1
  73. package/src/system/components/Button.svelte +2 -2
  74. package/src/system/components/Card.svelte +29 -1
  75. package/src/system/components/CollapsibleSection.svelte +25 -2
  76. package/src/system/components/FloatingTokenTags.css +43 -24
  77. package/src/system/components/FloatingTokenTags.svelte +88 -137
  78. package/src/system/components/Notification.svelte +8 -1
  79. package/src/system/components/SectionDivider.svelte +456 -379
  80. package/src/system/styles/CONVENTIONS.md +1 -1
  81. package/src/system/styles/fonts.css +3 -16
  82. package/src/system/styles/tokens.css +356 -1199
  83. package/src/system/styles/tokens.generated.css +544 -0
  84. package/src/editor/component-editor/scaffolding/DividerEditor.svelte +0 -94
  85. package/src/editor/component-editor/scaffolding/GradientCard.svelte +0 -296
package/src/system/components/SectionDivider.svelte CHANGED
@@ -3,13 +3,26 @@
3
3
 
4
4
  import { onMount, tick } from 'svelte';
5
5
 
6
+ /** Size variant. Each variant owns everything that defines its look:
7
+ * typography, geometry, colors AND the intrinsic display properties
8
+ * (alignment, eyebrow visibility, description visibility, hairline
9
+ * position). Every intrinsic flows through `:root` CSS vars so a designer
10
+ * edit cascades to every consumer instance without per-call wiring. */
11
+ type Variant = 'lg' | 'md' | 'sm';
12
+
6
13
  interface Props {
7
14
  title: string;
8
15
  description?: string | undefined;
9
- variant?: 'canvas' | 'neutral' | 'alternate' | 'primary' | 'accent' | 'special';
16
+ eyebrow?: string | undefined;
17
+ variant?: Variant;
10
18
  }
11
19
 
12
- let { title, description = undefined, variant = 'canvas' }: Props = $props();
20
+ let {
21
+ title,
22
+ description = undefined,
23
+ eyebrow = undefined,
24
+ variant = 'md',
25
+ }: Props = $props();
13
26
 
14
27
  let svgEl: SVGSVGElement | undefined = $state();
15
28
  let svgTextEl: SVGTextElement | undefined = $state();
@@ -18,37 +31,25 @@
18
31
  let svgX = $state(0);
19
32
  let svgY = $state(0);
20
33
 
21
- // feMorphology radius and feFlood flood-color are non-presentation attributes:
22
- // they can't read CSS vars. We read the resolved values off the SVG element
23
- // and push them onto the filter primitives, refreshing whenever the editor
24
- // mutates inline CSS vars on documentElement. Reading the variant-scoped
25
- // internal `--_divider-title-*` vars (set by the .variant-{v} class) keeps
26
- // this independent of the variant prop.
34
+ // feMorphology radius and feFlood flood-color are non-presentation attributes
35
+ // and can't read CSS vars. Read resolved values off the SVG element and push
36
+ // them onto the filter primitives, refreshing on doc-level inline-var changes.
27
37
  let outlineRadius = $state('0');
28
38
  let outlineColor = $state('#000');
29
- // Stable per-instance id so multiple SectionDividers on the same page each
30
- // bind their <text> to their own filter.
31
39
  const filterId = `sd-outline-${Math.random().toString(36).slice(2, 10)}`;
32
40
 
33
41
  function syncFilter(): void {
34
42
  if (!svgEl) return;
35
43
  const cs = getComputedStyle(svgEl);
36
- const wPx = parseFloat(cs.getPropertyValue('--_divider-title-border-width'));
37
- // SVG stroke extends `width/2` on each side; feMorphology radius dilates
38
- // by `radius` outward — so radius = width/2 gives the same visible outline.
44
+ const wPx = parseFloat(cs.getPropertyValue('--_divider-title-outline-width'));
39
45
  outlineRadius = String(Number.isFinite(wPx) ? wPx / 2 : 0);
40
- const c = cs.getPropertyValue('--_divider-title-stroke-color').trim();
46
+ const c = cs.getPropertyValue('--_divider-title-outline-color').trim();
41
47
  outlineColor = c || '#000';
42
48
  }
43
49
 
44
50
  function measure(): void {
45
51
  if (!svgTextEl) return;
46
52
  const bb = svgTextEl.getBBox();
47
- // Size the SVG to the glyph bbox exactly and map that bbox onto the
48
- // canvas via viewBox. Otherwise svgH = bb.y + bb.height carries any
49
- // empty band between y=0 and the glyph top (and any extra at the
50
- // bottom of the bbox), leaving the title vertically unbalanced inside
51
- // the container's symmetric top/bottom padding.
52
53
  svgX = bb.x;
53
54
  svgY = bb.y;
54
55
  svgW = Math.ceil(bb.width);
@@ -64,9 +65,6 @@
64
65
  onMount(() => {
65
66
  measure();
66
67
  syncFilter();
67
- // CSS-var edits (font-size/family/weight) change the rendered bbox but
68
- // never change the `title` prop — so re-measure on every style mutation
69
- // alongside the filter sync.
70
68
  const obs = new MutationObserver(() => { measure(); syncFilter(); });
71
69
  obs.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
72
70
  return () => obs.disconnect();
@@ -74,386 +72,382 @@
74
72
  </script>
75
73
 
76
74
  <div class="section-divider variant-{variant}">
77
- <svg
78
- bind:this={svgEl}
79
- class="divider-label"
80
- width={svgW || undefined}
81
- height={svgH || undefined}
82
- viewBox={svgW && svgH ? `${svgX} ${svgY} ${svgW} ${svgH}` : undefined}
83
- aria-label={title}
84
- role="img"
85
- >
86
- <defs>
87
- <filter id={filterId} x="-50%" y="-50%" width="200%" height="200%">
88
- <feMorphology in="SourceAlpha" operator="dilate" radius={outlineRadius} result="dilated" />
89
- <feFlood flood-color={outlineColor} result="color" />
90
- <feComposite in="color" in2="dilated" operator="in" result="outline" />
91
- <feComposite in="SourceGraphic" in2="outline" operator="over" />
92
- </filter>
93
- </defs>
94
- <text
95
- bind:this={svgTextEl}
96
- x="0"
97
- y="0"
98
- dominant-baseline="hanging"
99
- filter="url(#{filterId})"
100
- >{title}</text>
101
- </svg>
102
- {#if description}
103
- <p class="divider-description">{description}</p>
104
- {/if}
75
+ <span class="divider-eyebrow">{eyebrow ?? ''}</span>
76
+ <span class="sd-hairline sd-hairline--row sd-hairline-above-label" aria-hidden="true"></span>
77
+ <div class="title-row">
78
+ <span class="sd-hairline sd-hairline--side sd-hairline-through-label" aria-hidden="true"></span>
79
+ <span class="title-inline">
80
+ <svg
81
+ bind:this={svgEl}
82
+ class="divider-label"
83
+ width={svgW || undefined}
84
+ height={svgH || undefined}
85
+ viewBox={svgW && svgH ? `${svgX} ${svgY} ${svgW} ${svgH}` : undefined}
86
+ aria-label={title}
87
+ role="img"
88
+ >
89
+ <defs>
90
+ <filter id={filterId} x="-50%" y="-50%" width="200%" height="200%">
91
+ <feMorphology in="SourceAlpha" operator="dilate" radius={outlineRadius} result="dilated" />
92
+ <feFlood flood-color={outlineColor} result="color" />
93
+ <feComposite in="color" in2="dilated" operator="in" result="outline" />
94
+ <feComposite in="SourceGraphic" in2="outline" operator="over" />
95
+ </filter>
96
+ </defs>
97
+ <text
98
+ bind:this={svgTextEl}
99
+ x="0"
100
+ y="0"
101
+ dominant-baseline="hanging"
102
+ filter="url(#{filterId})"
103
+ >{title}</text>
104
+ </svg>
105
+ </span>
106
+ <span class="sd-hairline sd-hairline--side sd-hairline-through-label" aria-hidden="true"></span>
107
+ </div>
108
+ <span class="sd-hairline sd-hairline--row sd-hairline-below-label" aria-hidden="true"></span>
109
+ <span class="sd-hairline sd-hairline--row sd-hairline-above-description" aria-hidden="true"></span>
110
+ <div class="description-row">
111
+ <span class="sd-hairline sd-hairline--side sd-hairline-through-description" aria-hidden="true"></span>
112
+ <span class="description-inline">
113
+ <p class="divider-description">{description ?? ''}</p>
114
+ </span>
115
+ <span class="sd-hairline sd-hairline--side sd-hairline-through-description" aria-hidden="true"></span>
116
+ </div>
117
+ <span class="sd-hairline sd-hairline--row sd-hairline-below-description" aria-hidden="true"></span>
105
118
  </div>
106
119
 
107
120
  <style>
108
- /* Per-variant slots. Properties the editor links across variants
109
- (typography, padding, outline, radius) ship with identical defaults so
110
- they read as one linked group out of the box; gradient angle, stop
111
- colors, and stop positions are authored per variant and are not linked. */
121
+ /* Each size variant owns its full token set: typography, geometry, colors
122
+ AND intrinsic display properties (alignment, eyebrow/description
123
+ visibility, hairline position, eyebrow text-transform). There is no
124
+ separate color axis — variants are full presets the designer composes
125
+ in the editor. The instance picks one variant; that's it. */
112
126
  :global(:root) {
113
- /* Canvas */
114
- --sectiondivider-canvas-padding: var(--space-16);
115
- --sectiondivider-canvas-title: var(--text-primary);
116
- --sectiondivider-canvas-title-font-family: var(--font-display);
117
- --sectiondivider-canvas-title-font-size: var(--font-size-5xl);
118
- --sectiondivider-canvas-title-font-weight: var(--font-weight-normal);
119
- --sectiondivider-canvas-title-line-height: var(--line-height-xs);
120
- --sectiondivider-canvas-title-border-width: var(--border-width-4);
121
- --sectiondivider-canvas-title-stroke-color: var(--surface-canvas-lowest);
122
- /* Title stroke defaults intentionally diverge per variant — the property
123
- is linkable but ships unlinked, with each variant matching its own
124
- surface-lowest so stroke + gradient read as one family. */
125
- --sectiondivider-canvas-description: var(--text-secondary);
126
- --sectiondivider-canvas-description-font-family: var(--font-sans);
127
- --sectiondivider-canvas-description-font-size: var(--font-size-md);
128
- --sectiondivider-canvas-description-font-weight: var(--font-weight-normal);
129
- --sectiondivider-canvas-description-line-height: var(--line-height-md);
130
- --sectiondivider-canvas-gradient-angle: var(--gradient-angle-diagonal);
131
- --sectiondivider-canvas-gradient-stop-1-color: var(--surface-canvas-highest);
132
- --sectiondivider-canvas-gradient-stop-1-position: var(--gradient-stop-start);
133
- --sectiondivider-canvas-gradient-stop-2-color: var(--surface-canvas-higher);
134
- --sectiondivider-canvas-gradient-stop-2-position: var(--gradient-stop-mid);
135
- --sectiondivider-canvas-gradient-stop-3-color: var(--surface-canvas);
136
- --sectiondivider-canvas-gradient-stop-3-position: var(--gradient-stop-end);
137
- --sectiondivider-canvas-radius: var(--radius-lg);
138
- --sectiondivider-canvas-border: var(--color-transparent);
139
- --sectiondivider-canvas-border-width: var(--border-width-0);
140
- --sectiondivider-canvas-shadow: var(--shadow-none);
141
-
142
- /* Neutral */
143
- --sectiondivider-neutral-padding: var(--space-16);
144
- --sectiondivider-neutral-title: var(--text-primary);
145
- --sectiondivider-neutral-title-font-family: var(--font-display);
146
- --sectiondivider-neutral-title-font-size: var(--font-size-5xl);
147
- --sectiondivider-neutral-title-font-weight: var(--font-weight-normal);
148
- --sectiondivider-neutral-title-line-height: var(--line-height-xs);
149
- --sectiondivider-neutral-title-border-width: var(--border-width-4);
150
- --sectiondivider-neutral-title-stroke-color: var(--surface-neutral-lowest);
151
- --sectiondivider-neutral-description: var(--text-secondary);
152
- --sectiondivider-neutral-description-font-family: var(--font-sans);
153
- --sectiondivider-neutral-description-font-size: var(--font-size-md);
154
- --sectiondivider-neutral-description-font-weight: var(--font-weight-normal);
155
- --sectiondivider-neutral-description-line-height: var(--line-height-md);
156
- --sectiondivider-neutral-gradient-angle: var(--gradient-angle-diagonal);
157
- --sectiondivider-neutral-gradient-stop-1-color: var(--surface-neutral-highest);
158
- --sectiondivider-neutral-gradient-stop-1-position: var(--gradient-stop-start);
159
- --sectiondivider-neutral-gradient-stop-2-color: var(--surface-neutral-higher);
160
- --sectiondivider-neutral-gradient-stop-2-position: var(--gradient-stop-mid);
161
- --sectiondivider-neutral-gradient-stop-3-color: var(--surface-neutral);
162
- --sectiondivider-neutral-gradient-stop-3-position: var(--gradient-stop-end);
163
- --sectiondivider-neutral-radius: var(--radius-lg);
164
- --sectiondivider-neutral-border: var(--color-transparent);
165
- --sectiondivider-neutral-border-width: var(--border-width-0);
166
- --sectiondivider-neutral-shadow: var(--shadow-none);
167
-
168
- /* Alternate */
169
- --sectiondivider-alternate-padding: var(--space-16);
170
- --sectiondivider-alternate-title: var(--text-primary);
171
- --sectiondivider-alternate-title-font-family: var(--font-display);
172
- --sectiondivider-alternate-title-font-size: var(--font-size-5xl);
173
- --sectiondivider-alternate-title-font-weight: var(--font-weight-normal);
174
- --sectiondivider-alternate-title-line-height: var(--line-height-xs);
175
- --sectiondivider-alternate-title-border-width: var(--border-width-4);
176
- --sectiondivider-alternate-title-stroke-color: var(--surface-alternate-lowest);
177
- --sectiondivider-alternate-description: var(--text-secondary);
178
- --sectiondivider-alternate-description-font-family: var(--font-sans);
179
- --sectiondivider-alternate-description-font-size: var(--font-size-md);
180
- --sectiondivider-alternate-description-font-weight: var(--font-weight-normal);
181
- --sectiondivider-alternate-description-line-height: var(--line-height-md);
182
- --sectiondivider-alternate-gradient-angle: var(--gradient-angle-diagonal);
183
- --sectiondivider-alternate-gradient-stop-1-color: var(--surface-alternate-highest);
184
- --sectiondivider-alternate-gradient-stop-1-position: var(--gradient-stop-start);
185
- --sectiondivider-alternate-gradient-stop-2-color: var(--surface-alternate-higher);
186
- --sectiondivider-alternate-gradient-stop-2-position: var(--gradient-stop-mid);
187
- --sectiondivider-alternate-gradient-stop-3-color: var(--surface-alternate);
188
- --sectiondivider-alternate-gradient-stop-3-position: var(--gradient-stop-end);
189
- --sectiondivider-alternate-radius: var(--radius-lg);
190
- --sectiondivider-alternate-border: var(--color-transparent);
191
- --sectiondivider-alternate-border-width: var(--border-width-0);
192
- --sectiondivider-alternate-shadow: var(--shadow-none);
127
+ /* Large */
128
+ --sectiondivider-lg-title-font-family: var(--font-display);
129
+ --sectiondivider-lg-title-font-weight: var(--font-weight-normal);
130
+ --sectiondivider-lg-title-font-size: var(--font-size-5xl);
131
+ --sectiondivider-lg-title-line-height: var(--line-height-xs);
132
+ --sectiondivider-lg-title-letter-spacing: var(--letter-spacing-normal);
133
+ --sectiondivider-lg-title-outline-width: var(--border-width-4);
134
+ --sectiondivider-lg-description-font-family: var(--font-sans);
135
+ --sectiondivider-lg-description-font-weight: var(--font-weight-normal);
136
+ --sectiondivider-lg-description-font-size: var(--font-size-lg);
137
+ --sectiondivider-lg-description-line-height: var(--line-height-md);
138
+ --sectiondivider-lg-eyebrow-font-family: var(--font-sans);
139
+ --sectiondivider-lg-eyebrow-font-weight: var(--font-weight-medium);
140
+ --sectiondivider-lg-eyebrow-font-size: var(--font-size-md);
141
+ --sectiondivider-lg-eyebrow-letter-spacing: var(--letter-spacing-wide);
142
+ --sectiondivider-lg-padding: var(--space-16);
143
+ --sectiondivider-lg-title-padding: var(--space-0);
144
+ --sectiondivider-lg-description-padding: var(--space-0);
145
+ --sectiondivider-lg-eyebrow-padding: var(--space-0);
146
+ --sectiondivider-lg-radius: var(--radius-lg);
147
+ --sectiondivider-lg-border-width: var(--border-width-0);
148
+ --sectiondivider-lg-shadow: var(--shadow-none);
149
+ --sectiondivider-lg-hairline-thickness: var(--border-width-1);
150
+ --sectiondivider-lg-background: linear-gradient(135deg, var(--surface-canvas-highest) 0%, var(--surface-canvas-higher) 50%, var(--surface-canvas) 100%);
151
+ --sectiondivider-lg-title: var(--text-primary);
152
+ --sectiondivider-lg-description: var(--text-secondary);
153
+ --sectiondivider-lg-eyebrow: var(--text-tertiary);
154
+ --sectiondivider-lg-border: var(--color-transparent);
155
+ --sectiondivider-lg-title-outline-color: var(--surface-canvas-lowest);
156
+ --sectiondivider-lg-hairline-color: var(--border-canvas-medium);
193
157
 
194
- /* Primary */
195
- --sectiondivider-primary-padding: var(--space-16);
196
- --sectiondivider-primary-title: var(--text-primary);
197
- --sectiondivider-primary-title-font-family: var(--font-display);
198
- --sectiondivider-primary-title-font-size: var(--font-size-5xl);
199
- --sectiondivider-primary-title-font-weight: var(--font-weight-normal);
200
- --sectiondivider-primary-title-line-height: var(--line-height-xs);
201
- --sectiondivider-primary-title-border-width: var(--border-width-4);
202
- --sectiondivider-primary-title-stroke-color: var(--surface-brand-lowest);
203
- --sectiondivider-primary-description: var(--text-secondary);
204
- --sectiondivider-primary-description-font-family: var(--font-sans);
205
- --sectiondivider-primary-description-font-size: var(--font-size-md);
206
- --sectiondivider-primary-description-font-weight: var(--font-weight-normal);
207
- --sectiondivider-primary-description-line-height: var(--line-height-md);
208
- --sectiondivider-primary-gradient-angle: var(--gradient-angle-diagonal);
209
- --sectiondivider-primary-gradient-stop-1-color: var(--surface-brand-highest);
210
- --sectiondivider-primary-gradient-stop-1-position: var(--gradient-stop-start);
211
- --sectiondivider-primary-gradient-stop-2-color: var(--surface-brand-higher);
212
- --sectiondivider-primary-gradient-stop-2-position: var(--gradient-stop-mid);
213
- --sectiondivider-primary-gradient-stop-3-color: var(--surface-brand);
214
- --sectiondivider-primary-gradient-stop-3-position: var(--gradient-stop-end);
215
- --sectiondivider-primary-radius: var(--radius-lg);
216
- --sectiondivider-primary-border: var(--color-transparent);
217
- --sectiondivider-primary-border-width: var(--border-width-0);
218
- --sectiondivider-primary-shadow: var(--shadow-none);
158
+ /* Medium */
159
+ --sectiondivider-md-title-font-family: var(--font-display);
160
+ --sectiondivider-md-title-font-weight: var(--font-weight-normal);
161
+ --sectiondivider-md-title-font-size: var(--font-size-4xl);
162
+ --sectiondivider-md-title-line-height: var(--line-height-xs);
163
+ --sectiondivider-md-title-letter-spacing: var(--letter-spacing-normal);
164
+ --sectiondivider-md-title-outline-width: var(--border-width-3);
165
+ --sectiondivider-md-description-font-family: var(--font-sans);
166
+ --sectiondivider-md-description-font-weight: var(--font-weight-normal);
167
+ --sectiondivider-md-description-font-size: var(--font-size-md);
168
+ --sectiondivider-md-description-line-height: var(--line-height-md);
169
+ --sectiondivider-md-eyebrow-font-family: var(--font-sans);
170
+ --sectiondivider-md-eyebrow-font-weight: var(--font-weight-medium);
171
+ --sectiondivider-md-eyebrow-font-size: var(--font-size-sm);
172
+ --sectiondivider-md-eyebrow-letter-spacing: var(--letter-spacing-wide);
173
+ --sectiondivider-md-padding: var(--space-12);
174
+ --sectiondivider-md-title-padding: var(--space-0);
175
+ --sectiondivider-md-description-padding: var(--space-0);
176
+ --sectiondivider-md-eyebrow-padding: var(--space-0);
177
+ --sectiondivider-md-radius: var(--radius-md);
178
+ --sectiondivider-md-border-width: var(--border-width-0);
179
+ --sectiondivider-md-shadow: var(--shadow-none);
180
+ --sectiondivider-md-hairline-thickness: var(--border-width-1);
181
+ --sectiondivider-md-background: linear-gradient(135deg, var(--surface-canvas-highest) 0%, var(--surface-canvas-higher) 50%, var(--surface-canvas) 100%);
182
+ --sectiondivider-md-title: var(--text-primary);
183
+ --sectiondivider-md-description: var(--text-secondary);
184
+ --sectiondivider-md-eyebrow: var(--text-tertiary);
185
+ --sectiondivider-md-border: var(--color-transparent);
186
+ --sectiondivider-md-title-outline-color: var(--surface-canvas-lowest);
187
+ --sectiondivider-md-hairline-color: var(--border-canvas-medium);
219
188
 
220
- /* Accent */
221
- --sectiondivider-accent-padding: var(--space-16);
222
- --sectiondivider-accent-title: var(--text-primary);
223
- --sectiondivider-accent-title-font-family: var(--font-display);
224
- --sectiondivider-accent-title-font-size: var(--font-size-5xl);
225
- --sectiondivider-accent-title-font-weight: var(--font-weight-normal);
226
- --sectiondivider-accent-title-line-height: var(--line-height-xs);
227
- --sectiondivider-accent-title-border-width: var(--border-width-4);
228
- --sectiondivider-accent-title-stroke-color: var(--surface-accent-lowest);
229
- --sectiondivider-accent-description: var(--text-secondary);
230
- --sectiondivider-accent-description-font-family: var(--font-sans);
231
- --sectiondivider-accent-description-font-size: var(--font-size-md);
232
- --sectiondivider-accent-description-font-weight: var(--font-weight-normal);
233
- --sectiondivider-accent-description-line-height: var(--line-height-md);
234
- --sectiondivider-accent-gradient-angle: var(--gradient-angle-diagonal);
235
- --sectiondivider-accent-gradient-stop-1-color: var(--surface-accent-highest);
236
- --sectiondivider-accent-gradient-stop-1-position: var(--gradient-stop-start);
237
- --sectiondivider-accent-gradient-stop-2-color: var(--surface-accent-higher);
238
- --sectiondivider-accent-gradient-stop-2-position: var(--gradient-stop-mid);
239
- --sectiondivider-accent-gradient-stop-3-color: var(--surface-accent);
240
- --sectiondivider-accent-gradient-stop-3-position: var(--gradient-stop-end);
241
- --sectiondivider-accent-radius: var(--radius-lg);
242
- --sectiondivider-accent-border: var(--color-transparent);
243
- --sectiondivider-accent-border-width: var(--border-width-0);
244
- --sectiondivider-accent-shadow: var(--shadow-none);
189
+ /* Small */
190
+ --sectiondivider-sm-title-font-family: var(--font-display);
191
+ --sectiondivider-sm-title-font-weight: var(--font-weight-normal);
192
+ --sectiondivider-sm-title-font-size: var(--font-size-3xl);
193
+ --sectiondivider-sm-title-line-height: var(--line-height-xs);
194
+ --sectiondivider-sm-title-letter-spacing: var(--letter-spacing-normal);
195
+ --sectiondivider-sm-title-outline-width: var(--border-width-2);
196
+ --sectiondivider-sm-description-font-family: var(--font-sans);
197
+ --sectiondivider-sm-description-font-weight: var(--font-weight-normal);
198
+ --sectiondivider-sm-description-font-size: var(--font-size-sm);
199
+ --sectiondivider-sm-description-line-height: var(--line-height-md);
200
+ --sectiondivider-sm-eyebrow-font-family: var(--font-sans);
201
+ --sectiondivider-sm-eyebrow-font-weight: var(--font-weight-medium);
202
+ --sectiondivider-sm-eyebrow-font-size: var(--font-size-xs);
203
+ --sectiondivider-sm-eyebrow-letter-spacing: var(--letter-spacing-wide);
204
+ --sectiondivider-sm-padding: var(--space-8);
205
+ --sectiondivider-sm-title-padding: var(--space-0);
206
+ --sectiondivider-sm-description-padding: var(--space-0);
207
+ --sectiondivider-sm-eyebrow-padding: var(--space-0);
208
+ --sectiondivider-sm-radius: var(--radius-sm);
209
+ --sectiondivider-sm-border-width: var(--border-width-0);
210
+ --sectiondivider-sm-shadow: var(--shadow-none);
211
+ --sectiondivider-sm-hairline-thickness: var(--border-width-1);
212
+ --sectiondivider-sm-background: linear-gradient(135deg, var(--surface-canvas-highest) 0%, var(--surface-canvas-higher) 50%, var(--surface-canvas) 100%);
213
+ --sectiondivider-sm-title: var(--text-primary);
214
+ --sectiondivider-sm-description: var(--text-secondary);
215
+ --sectiondivider-sm-eyebrow: var(--text-tertiary);
216
+ --sectiondivider-sm-border: var(--color-transparent);
217
+ --sectiondivider-sm-title-outline-color: var(--surface-canvas-lowest);
218
+ --sectiondivider-sm-hairline-color: var(--border-canvas-medium);
245
219
 
246
- /* Special */
247
- --sectiondivider-special-padding: var(--space-16);
248
- --sectiondivider-special-title: var(--text-primary);
249
- --sectiondivider-special-title-font-family: var(--font-display);
250
- --sectiondivider-special-title-font-size: var(--font-size-5xl);
251
- --sectiondivider-special-title-font-weight: var(--font-weight-normal);
252
- --sectiondivider-special-title-line-height: var(--line-height-xs);
253
- --sectiondivider-special-title-border-width: var(--border-width-4);
254
- --sectiondivider-special-title-stroke-color: var(--surface-special-lowest);
255
- --sectiondivider-special-description: var(--text-secondary);
256
- --sectiondivider-special-description-font-family: var(--font-sans);
257
- --sectiondivider-special-description-font-size: var(--font-size-md);
258
- --sectiondivider-special-description-font-weight: var(--font-weight-normal);
259
- --sectiondivider-special-description-line-height: var(--line-height-md);
260
- --sectiondivider-special-gradient-angle: var(--gradient-angle-diagonal);
261
- --sectiondivider-special-gradient-stop-1-color: var(--surface-special-highest);
262
- --sectiondivider-special-gradient-stop-1-position: var(--gradient-stop-start);
263
- --sectiondivider-special-gradient-stop-2-color: var(--surface-special-higher);
264
- --sectiondivider-special-gradient-stop-2-position: var(--gradient-stop-mid);
265
- --sectiondivider-special-gradient-stop-3-color: var(--surface-special);
266
- --sectiondivider-special-gradient-stop-3-position: var(--gradient-stop-end);
267
- --sectiondivider-special-radius: var(--radius-lg);
268
- --sectiondivider-special-border: var(--color-transparent);
269
- --sectiondivider-special-border-width: var(--border-width-0);
270
- --sectiondivider-special-shadow: var(--shadow-none);
220
+ /* Intrinsic defaults. These keys cascade to `:root` via the editor's
221
+ alias bucket; un-edited variants fall back to these. The defaults
222
+ match the legacy "config bucket" semantics: center alignment, hidden
223
+ eyebrow, visible description, hidden hairline, normal-case eyebrow. */
224
+ --sectiondivider-lg-align: center;
225
+ --sectiondivider-md-align: center;
226
+ --sectiondivider-sm-align: center;
227
+ --sectiondivider-lg-eyebrow-display: none;
228
+ --sectiondivider-md-eyebrow-display: none;
229
+ --sectiondivider-sm-eyebrow-display: none;
230
+ --sectiondivider-lg-description-display: flex;
231
+ --sectiondivider-md-description-display: flex;
232
+ --sectiondivider-sm-description-display: flex;
233
+ --sectiondivider-lg-hairline: none;
234
+ --sectiondivider-md-hairline: none;
235
+ --sectiondivider-sm-hairline: none;
236
+ --sectiondivider-lg-eyebrow-text-transform: none;
237
+ --sectiondivider-md-eyebrow-text-transform: none;
238
+ --sectiondivider-sm-eyebrow-text-transform: none;
271
239
  }
272
240
 
273
241
  .section-divider {
242
+ /* `container-name` lets the per-variant intrinsic vars below drive
243
+ style-query rules that reveal exactly one hairline and react to the
244
+ align/description-display values. No `container-type` is set so the
245
+ column layout stays in normal flow — style queries don't require it. */
246
+ container-name: sd;
247
+ position: relative;
274
248
  margin: var(--space-24) 0;
275
- padding: var(--_divider-padding) calc(var(--_divider-padding) * 1.5);
249
+ padding:
250
+ var(--_divider-padding-top)
251
+ var(--_divider-padding-right)
252
+ var(--_divider-padding-bottom)
253
+ var(--_divider-padding-left);
276
254
  border-radius: var(--_divider-radius);
277
255
  border: var(--_divider-border-width) solid var(--_divider-border);
278
256
  box-shadow: var(--_divider-shadow);
279
- background: linear-gradient(
280
- var(--_divider-gradient-angle),
281
- var(--_divider-stop-1-color) var(--_divider-stop-1-position),
282
- var(--_divider-stop-2-color) var(--_divider-stop-2-position),
283
- var(--_divider-stop-3-color) var(--_divider-stop-3-position)
284
- );
257
+ background: var(--_divider-bg);
258
+ display: flex;
259
+ flex-direction: column;
260
+ align-items: var(--_divider-align);
261
+ text-align: var(--_divider-align);
262
+ --_divider-justify: var(--_divider-align);
285
263
  }
286
264
 
287
- /* Each variant class collapses its per-variant slots onto one set of
288
- internal `--_divider-*` vars; the rest of the styles only consume those,
289
- so adding a variant means adding a class and a :root block. */
290
- .variant-canvas {
291
- --_divider-padding: var(--sectiondivider-canvas-padding);
292
- --_divider-radius: var(--sectiondivider-canvas-radius);
293
- --_divider-border: var(--sectiondivider-canvas-border);
294
- --_divider-border-width: var(--sectiondivider-canvas-border-width);
295
- --_divider-shadow: var(--sectiondivider-canvas-shadow);
296
- --_divider-gradient-angle: var(--sectiondivider-canvas-gradient-angle);
297
- --_divider-stop-1-color: var(--sectiondivider-canvas-gradient-stop-1-color);
298
- --_divider-stop-1-position: var(--sectiondivider-canvas-gradient-stop-1-position);
299
- --_divider-stop-2-color: var(--sectiondivider-canvas-gradient-stop-2-color);
300
- --_divider-stop-2-position: var(--sectiondivider-canvas-gradient-stop-2-position);
301
- --_divider-stop-3-color: var(--sectiondivider-canvas-gradient-stop-3-color);
302
- --_divider-stop-3-position: var(--sectiondivider-canvas-gradient-stop-3-position);
303
- --_divider-title: var(--sectiondivider-canvas-title);
304
- --_divider-title-font-family: var(--sectiondivider-canvas-title-font-family);
305
- --_divider-title-font-size: var(--sectiondivider-canvas-title-font-size);
306
- --_divider-title-font-weight: var(--sectiondivider-canvas-title-font-weight);
307
- --_divider-title-line-height: var(--sectiondivider-canvas-title-line-height);
308
- --_divider-title-border-width: var(--sectiondivider-canvas-title-border-width);
309
- --_divider-title-stroke-color: var(--sectiondivider-canvas-title-stroke-color);
310
- --_divider-description: var(--sectiondivider-canvas-description);
311
- --_divider-description-font-family: var(--sectiondivider-canvas-description-font-family);
312
- --_divider-description-font-size: var(--sectiondivider-canvas-description-font-size);
313
- --_divider-description-font-weight: var(--sectiondivider-canvas-description-font-weight);
314
- --_divider-description-line-height: var(--sectiondivider-canvas-description-line-height);
265
+ /* Variant pipes — one full token set per variant, including the intrinsics
266
+ that now cascade through CSS vars instead of runtime props. */
267
+ .variant-lg {
268
+ --_divider-title-font-family: var(--sectiondivider-lg-title-font-family);
269
+ --_divider-title-font-weight: var(--sectiondivider-lg-title-font-weight);
270
+ --_divider-title-font-size: var(--sectiondivider-lg-title-font-size);
271
+ --_divider-title-line-height: var(--sectiondivider-lg-title-line-height);
272
+ --_divider-title-letter-spacing: var(--sectiondivider-lg-title-letter-spacing);
273
+ --_divider-title-outline-width: var(--sectiondivider-lg-title-outline-width);
274
+ --_divider-description-font-family: var(--sectiondivider-lg-description-font-family);
275
+ --_divider-description-font-weight: var(--sectiondivider-lg-description-font-weight);
276
+ --_divider-description-font-size: var(--sectiondivider-lg-description-font-size);
277
+ --_divider-description-line-height: var(--sectiondivider-lg-description-line-height);
278
+ --_divider-eyebrow-font-family: var(--sectiondivider-lg-eyebrow-font-family);
279
+ --_divider-eyebrow-font-weight: var(--sectiondivider-lg-eyebrow-font-weight);
280
+ --_divider-eyebrow-font-size: var(--sectiondivider-lg-eyebrow-font-size);
281
+ --_divider-eyebrow-letter-spacing: var(--sectiondivider-lg-eyebrow-letter-spacing);
282
+ --_divider-padding-top: var(--sectiondivider-lg-padding-top, var(--sectiondivider-lg-padding));
283
+ --_divider-padding-right: var(--sectiondivider-lg-padding-right, calc(var(--sectiondivider-lg-padding) * 1.5));
284
+ --_divider-padding-bottom: var(--sectiondivider-lg-padding-bottom, var(--sectiondivider-lg-padding));
285
+ --_divider-padding-left: var(--sectiondivider-lg-padding-left, calc(var(--sectiondivider-lg-padding) * 1.5));
286
+ --_divider-radius: var(--sectiondivider-lg-radius);
287
+ --_divider-border-width: var(--sectiondivider-lg-border-width);
288
+ --_divider-shadow: var(--sectiondivider-lg-shadow);
289
+ --_divider-hairline-thickness: var(--sectiondivider-lg-hairline-thickness);
290
+ --_divider-bg: var(--sectiondivider-lg-background);
291
+ --_divider-title: var(--sectiondivider-lg-title);
292
+ --_divider-description: var(--sectiondivider-lg-description);
293
+ --_divider-eyebrow: var(--sectiondivider-lg-eyebrow);
294
+ --_divider-border: var(--sectiondivider-lg-border);
295
+ --_divider-title-outline-color: var(--sectiondivider-lg-title-outline-color);
296
+ --_divider-hairline-color: var(--sectiondivider-lg-hairline-color);
297
+ --_divider-align: var(--sectiondivider-lg-align);
298
+ --_divider-eyebrow-display: var(--sectiondivider-lg-eyebrow-display);
299
+ --_divider-description-display: var(--sectiondivider-lg-description-display);
300
+ --_divider-hairline: var(--sectiondivider-lg-hairline);
301
+ --_divider-eyebrow-text-transform: var(--sectiondivider-lg-eyebrow-text-transform);
315
302
  }
316
303
 
317
- .variant-neutral {
318
- --_divider-padding: var(--sectiondivider-neutral-padding);
319
- --_divider-radius: var(--sectiondivider-neutral-radius);
320
- --_divider-border: var(--sectiondivider-neutral-border);
321
- --_divider-border-width: var(--sectiondivider-neutral-border-width);
322
- --_divider-shadow: var(--sectiondivider-neutral-shadow);
323
- --_divider-gradient-angle: var(--sectiondivider-neutral-gradient-angle);
324
- --_divider-stop-1-color: var(--sectiondivider-neutral-gradient-stop-1-color);
325
- --_divider-stop-1-position: var(--sectiondivider-neutral-gradient-stop-1-position);
326
- --_divider-stop-2-color: var(--sectiondivider-neutral-gradient-stop-2-color);
327
- --_divider-stop-2-position: var(--sectiondivider-neutral-gradient-stop-2-position);
328
- --_divider-stop-3-color: var(--sectiondivider-neutral-gradient-stop-3-color);
329
- --_divider-stop-3-position: var(--sectiondivider-neutral-gradient-stop-3-position);
330
- --_divider-title: var(--sectiondivider-neutral-title);
331
- --_divider-title-font-family: var(--sectiondivider-neutral-title-font-family);
332
- --_divider-title-font-size: var(--sectiondivider-neutral-title-font-size);
333
- --_divider-title-font-weight: var(--sectiondivider-neutral-title-font-weight);
334
- --_divider-title-line-height: var(--sectiondivider-neutral-title-line-height);
335
- --_divider-title-border-width: var(--sectiondivider-neutral-title-border-width);
336
- --_divider-title-stroke-color: var(--sectiondivider-neutral-title-stroke-color);
337
- --_divider-description: var(--sectiondivider-neutral-description);
338
- --_divider-description-font-family: var(--sectiondivider-neutral-description-font-family);
339
- --_divider-description-font-size: var(--sectiondivider-neutral-description-font-size);
340
- --_divider-description-font-weight: var(--sectiondivider-neutral-description-font-weight);
341
- --_divider-description-line-height: var(--sectiondivider-neutral-description-line-height);
304
+ .variant-md {
305
+ --_divider-title-font-family: var(--sectiondivider-md-title-font-family);
306
+ --_divider-title-font-weight: var(--sectiondivider-md-title-font-weight);
307
+ --_divider-title-font-size: var(--sectiondivider-md-title-font-size);
308
+ --_divider-title-line-height: var(--sectiondivider-md-title-line-height);
309
+ --_divider-title-letter-spacing: var(--sectiondivider-md-title-letter-spacing);
310
+ --_divider-title-outline-width: var(--sectiondivider-md-title-outline-width);
311
+ --_divider-description-font-family: var(--sectiondivider-md-description-font-family);
312
+ --_divider-description-font-weight: var(--sectiondivider-md-description-font-weight);
313
+ --_divider-description-font-size: var(--sectiondivider-md-description-font-size);
314
+ --_divider-description-line-height: var(--sectiondivider-md-description-line-height);
315
+ --_divider-eyebrow-font-family: var(--sectiondivider-md-eyebrow-font-family);
316
+ --_divider-eyebrow-font-weight: var(--sectiondivider-md-eyebrow-font-weight);
317
+ --_divider-eyebrow-font-size: var(--sectiondivider-md-eyebrow-font-size);
318
+ --_divider-eyebrow-letter-spacing: var(--sectiondivider-md-eyebrow-letter-spacing);
319
+ --_divider-padding-top: var(--sectiondivider-md-padding-top, var(--sectiondivider-md-padding));
320
+ --_divider-padding-right: var(--sectiondivider-md-padding-right, calc(var(--sectiondivider-md-padding) * 1.5));
321
+ --_divider-padding-bottom: var(--sectiondivider-md-padding-bottom, var(--sectiondivider-md-padding));
322
+ --_divider-padding-left: var(--sectiondivider-md-padding-left, calc(var(--sectiondivider-md-padding) * 1.5));
323
+ --_divider-radius: var(--sectiondivider-md-radius);
324
+ --_divider-border-width: var(--sectiondivider-md-border-width);
325
+ --_divider-shadow: var(--sectiondivider-md-shadow);
326
+ --_divider-hairline-thickness: var(--sectiondivider-md-hairline-thickness);
327
+ --_divider-bg: var(--sectiondivider-md-background);
328
+ --_divider-title: var(--sectiondivider-md-title);
329
+ --_divider-description: var(--sectiondivider-md-description);
330
+ --_divider-eyebrow: var(--sectiondivider-md-eyebrow);
331
+ --_divider-border: var(--sectiondivider-md-border);
332
+ --_divider-title-outline-color: var(--sectiondivider-md-title-outline-color);
333
+ --_divider-hairline-color: var(--sectiondivider-md-hairline-color);
334
+ --_divider-align: var(--sectiondivider-md-align);
335
+ --_divider-eyebrow-display: var(--sectiondivider-md-eyebrow-display);
336
+ --_divider-description-display: var(--sectiondivider-md-description-display);
337
+ --_divider-hairline: var(--sectiondivider-md-hairline);
338
+ --_divider-eyebrow-text-transform: var(--sectiondivider-md-eyebrow-text-transform);
342
339
  }
343
340
 
344
- .variant-alternate {
345
- --_divider-padding: var(--sectiondivider-alternate-padding);
346
- --_divider-radius: var(--sectiondivider-alternate-radius);
347
- --_divider-border: var(--sectiondivider-alternate-border);
348
- --_divider-border-width: var(--sectiondivider-alternate-border-width);
349
- --_divider-shadow: var(--sectiondivider-alternate-shadow);
350
- --_divider-gradient-angle: var(--sectiondivider-alternate-gradient-angle);
351
- --_divider-stop-1-color: var(--sectiondivider-alternate-gradient-stop-1-color);
352
- --_divider-stop-1-position: var(--sectiondivider-alternate-gradient-stop-1-position);
353
- --_divider-stop-2-color: var(--sectiondivider-alternate-gradient-stop-2-color);
354
- --_divider-stop-2-position: var(--sectiondivider-alternate-gradient-stop-2-position);
355
- --_divider-stop-3-color: var(--sectiondivider-alternate-gradient-stop-3-color);
356
- --_divider-stop-3-position: var(--sectiondivider-alternate-gradient-stop-3-position);
357
- --_divider-title: var(--sectiondivider-alternate-title);
358
- --_divider-title-font-family: var(--sectiondivider-alternate-title-font-family);
359
- --_divider-title-font-size: var(--sectiondivider-alternate-title-font-size);
360
- --_divider-title-font-weight: var(--sectiondivider-alternate-title-font-weight);
361
- --_divider-title-line-height: var(--sectiondivider-alternate-title-line-height);
362
- --_divider-title-border-width: var(--sectiondivider-alternate-title-border-width);
363
- --_divider-title-stroke-color: var(--sectiondivider-alternate-title-stroke-color);
364
- --_divider-description: var(--sectiondivider-alternate-description);
365
- --_divider-description-font-family: var(--sectiondivider-alternate-description-font-family);
366
- --_divider-description-font-size: var(--sectiondivider-alternate-description-font-size);
367
- --_divider-description-font-weight: var(--sectiondivider-alternate-description-font-weight);
368
- --_divider-description-line-height: var(--sectiondivider-alternate-description-line-height);
341
+ .variant-sm {
342
+ --_divider-title-font-family: var(--sectiondivider-sm-title-font-family);
343
+ --_divider-title-font-weight: var(--sectiondivider-sm-title-font-weight);
344
+ --_divider-title-font-size: var(--sectiondivider-sm-title-font-size);
345
+ --_divider-title-line-height: var(--sectiondivider-sm-title-line-height);
346
+ --_divider-title-letter-spacing: var(--sectiondivider-sm-title-letter-spacing);
347
+ --_divider-title-outline-width: var(--sectiondivider-sm-title-outline-width);
348
+ --_divider-description-font-family: var(--sectiondivider-sm-description-font-family);
349
+ --_divider-description-font-weight: var(--sectiondivider-sm-description-font-weight);
350
+ --_divider-description-font-size: var(--sectiondivider-sm-description-font-size);
351
+ --_divider-description-line-height: var(--sectiondivider-sm-description-line-height);
352
+ --_divider-eyebrow-font-family: var(--sectiondivider-sm-eyebrow-font-family);
353
+ --_divider-eyebrow-font-weight: var(--sectiondivider-sm-eyebrow-font-weight);
354
+ --_divider-eyebrow-font-size: var(--sectiondivider-sm-eyebrow-font-size);
355
+ --_divider-eyebrow-letter-spacing: var(--sectiondivider-sm-eyebrow-letter-spacing);
356
+ --_divider-padding-top: var(--sectiondivider-sm-padding-top, var(--sectiondivider-sm-padding));
357
+ --_divider-padding-right: var(--sectiondivider-sm-padding-right, calc(var(--sectiondivider-sm-padding) * 1.5));
358
+ --_divider-padding-bottom: var(--sectiondivider-sm-padding-bottom, var(--sectiondivider-sm-padding));
359
+ --_divider-padding-left: var(--sectiondivider-sm-padding-left, calc(var(--sectiondivider-sm-padding) * 1.5));
360
+ --_divider-radius: var(--sectiondivider-sm-radius);
361
+ --_divider-border-width: var(--sectiondivider-sm-border-width);
362
+ --_divider-shadow: var(--sectiondivider-sm-shadow);
363
+ --_divider-hairline-thickness: var(--sectiondivider-sm-hairline-thickness);
364
+ --_divider-bg: var(--sectiondivider-sm-background);
365
+ --_divider-title: var(--sectiondivider-sm-title);
366
+ --_divider-description: var(--sectiondivider-sm-description);
367
+ --_divider-eyebrow: var(--sectiondivider-sm-eyebrow);
368
+ --_divider-border: var(--sectiondivider-sm-border);
369
+ --_divider-title-outline-color: var(--sectiondivider-sm-title-outline-color);
370
+ --_divider-hairline-color: var(--sectiondivider-sm-hairline-color);
371
+ --_divider-align: var(--sectiondivider-sm-align);
372
+ --_divider-eyebrow-display: var(--sectiondivider-sm-eyebrow-display);
373
+ --_divider-description-display: var(--sectiondivider-sm-description-display);
374
+ --_divider-hairline: var(--sectiondivider-sm-hairline);
375
+ --_divider-eyebrow-text-transform: var(--sectiondivider-sm-eyebrow-text-transform);
369
376
  }
370
377
 
371
- .variant-primary {
372
- --_divider-padding: var(--sectiondivider-primary-padding);
373
- --_divider-radius: var(--sectiondivider-primary-radius);
374
- --_divider-border: var(--sectiondivider-primary-border);
375
- --_divider-border-width: var(--sectiondivider-primary-border-width);
376
- --_divider-shadow: var(--sectiondivider-primary-shadow);
377
- --_divider-gradient-angle: var(--sectiondivider-primary-gradient-angle);
378
- --_divider-stop-1-color: var(--sectiondivider-primary-gradient-stop-1-color);
379
- --_divider-stop-1-position: var(--sectiondivider-primary-gradient-stop-1-position);
380
- --_divider-stop-2-color: var(--sectiondivider-primary-gradient-stop-2-color);
381
- --_divider-stop-2-position: var(--sectiondivider-primary-gradient-stop-2-position);
382
- --_divider-stop-3-color: var(--sectiondivider-primary-gradient-stop-3-color);
383
- --_divider-stop-3-position: var(--sectiondivider-primary-gradient-stop-3-position);
384
- --_divider-title: var(--sectiondivider-primary-title);
385
- --_divider-title-font-family: var(--sectiondivider-primary-title-font-family);
386
- --_divider-title-font-size: var(--sectiondivider-primary-title-font-size);
387
- --_divider-title-font-weight: var(--sectiondivider-primary-title-font-weight);
388
- --_divider-title-line-height: var(--sectiondivider-primary-title-line-height);
389
- --_divider-title-border-width: var(--sectiondivider-primary-title-border-width);
390
- --_divider-title-stroke-color: var(--sectiondivider-primary-title-stroke-color);
391
- --_divider-description: var(--sectiondivider-primary-description);
392
- --_divider-description-font-family: var(--sectiondivider-primary-description-font-family);
393
- --_divider-description-font-size: var(--sectiondivider-primary-description-font-size);
394
- --_divider-description-font-weight: var(--sectiondivider-primary-description-font-weight);
395
- --_divider-description-line-height: var(--sectiondivider-primary-description-line-height);
378
+ /* Per-element padding. Each type element (title / description / eyebrow) owns
379
+ its own padding tokens, replacing the section-level `gap`. The user gets
380
+ explicit per-side control via the editor's padding selector. Falls back
381
+ through: side var → single-value var → 0. Variant-scoped so each preset
382
+ can carry its own per-element rhythm. */
383
+ .variant-lg .title-row {
384
+ padding:
385
+ var(--sectiondivider-lg-title-padding-top, var(--sectiondivider-lg-title-padding, 0))
386
+ var(--sectiondivider-lg-title-padding-right, var(--sectiondivider-lg-title-padding, 0))
387
+ var(--sectiondivider-lg-title-padding-bottom, var(--sectiondivider-lg-title-padding, 0))
388
+ var(--sectiondivider-lg-title-padding-left, var(--sectiondivider-lg-title-padding, 0));
396
389
  }
397
-
398
- .variant-accent {
399
- --_divider-padding: var(--sectiondivider-accent-padding);
400
- --_divider-radius: var(--sectiondivider-accent-radius);
401
- --_divider-border: var(--sectiondivider-accent-border);
402
- --_divider-border-width: var(--sectiondivider-accent-border-width);
403
- --_divider-shadow: var(--sectiondivider-accent-shadow);
404
- --_divider-gradient-angle: var(--sectiondivider-accent-gradient-angle);
405
- --_divider-stop-1-color: var(--sectiondivider-accent-gradient-stop-1-color);
406
- --_divider-stop-1-position: var(--sectiondivider-accent-gradient-stop-1-position);
407
- --_divider-stop-2-color: var(--sectiondivider-accent-gradient-stop-2-color);
408
- --_divider-stop-2-position: var(--sectiondivider-accent-gradient-stop-2-position);
409
- --_divider-stop-3-color: var(--sectiondivider-accent-gradient-stop-3-color);
410
- --_divider-stop-3-position: var(--sectiondivider-accent-gradient-stop-3-position);
411
- --_divider-title: var(--sectiondivider-accent-title);
412
- --_divider-title-font-family: var(--sectiondivider-accent-title-font-family);
413
- --_divider-title-font-size: var(--sectiondivider-accent-title-font-size);
414
- --_divider-title-font-weight: var(--sectiondivider-accent-title-font-weight);
415
- --_divider-title-line-height: var(--sectiondivider-accent-title-line-height);
416
- --_divider-title-border-width: var(--sectiondivider-accent-title-border-width);
417
- --_divider-title-stroke-color: var(--sectiondivider-accent-title-stroke-color);
418
- --_divider-description: var(--sectiondivider-accent-description);
419
- --_divider-description-font-family: var(--sectiondivider-accent-description-font-family);
420
- --_divider-description-font-size: var(--sectiondivider-accent-description-font-size);
421
- --_divider-description-font-weight: var(--sectiondivider-accent-description-font-weight);
422
- --_divider-description-line-height: var(--sectiondivider-accent-description-line-height);
390
+ .variant-lg .description-row {
391
+ padding:
392
+ var(--sectiondivider-lg-description-padding-top, var(--sectiondivider-lg-description-padding, 0))
393
+ var(--sectiondivider-lg-description-padding-right, var(--sectiondivider-lg-description-padding, 0))
394
+ var(--sectiondivider-lg-description-padding-bottom, var(--sectiondivider-lg-description-padding, 0))
395
+ var(--sectiondivider-lg-description-padding-left, var(--sectiondivider-lg-description-padding, 0));
423
396
  }
424
-
425
- .variant-special {
426
- --_divider-padding: var(--sectiondivider-special-padding);
427
- --_divider-radius: var(--sectiondivider-special-radius);
428
- --_divider-border: var(--sectiondivider-special-border);
429
- --_divider-border-width: var(--sectiondivider-special-border-width);
430
- --_divider-shadow: var(--sectiondivider-special-shadow);
431
- --_divider-gradient-angle: var(--sectiondivider-special-gradient-angle);
432
- --_divider-stop-1-color: var(--sectiondivider-special-gradient-stop-1-color);
433
- --_divider-stop-1-position: var(--sectiondivider-special-gradient-stop-1-position);
434
- --_divider-stop-2-color: var(--sectiondivider-special-gradient-stop-2-color);
435
- --_divider-stop-2-position: var(--sectiondivider-special-gradient-stop-2-position);
436
- --_divider-stop-3-color: var(--sectiondivider-special-gradient-stop-3-color);
437
- --_divider-stop-3-position: var(--sectiondivider-special-gradient-stop-3-position);
438
- --_divider-title: var(--sectiondivider-special-title);
439
- --_divider-title-font-family: var(--sectiondivider-special-title-font-family);
440
- --_divider-title-font-size: var(--sectiondivider-special-title-font-size);
441
- --_divider-title-font-weight: var(--sectiondivider-special-title-font-weight);
442
- --_divider-title-line-height: var(--sectiondivider-special-title-line-height);
443
- --_divider-title-border-width: var(--sectiondivider-special-title-border-width);
444
- --_divider-title-stroke-color: var(--sectiondivider-special-title-stroke-color);
445
- --_divider-description: var(--sectiondivider-special-description);
446
- --_divider-description-font-family: var(--sectiondivider-special-description-font-family);
447
- --_divider-description-font-size: var(--sectiondivider-special-description-font-size);
448
- --_divider-description-font-weight: var(--sectiondivider-special-description-font-weight);
449
- --_divider-description-line-height: var(--sectiondivider-special-description-line-height);
397
+ .variant-lg .divider-eyebrow {
398
+ padding:
399
+ var(--sectiondivider-lg-eyebrow-padding-top, var(--sectiondivider-lg-eyebrow-padding, 0))
400
+ var(--sectiondivider-lg-eyebrow-padding-right, var(--sectiondivider-lg-eyebrow-padding, 0))
401
+ var(--sectiondivider-lg-eyebrow-padding-bottom, var(--sectiondivider-lg-eyebrow-padding, 0))
402
+ var(--sectiondivider-lg-eyebrow-padding-left, var(--sectiondivider-lg-eyebrow-padding, 0));
403
+ }
404
+ .variant-md .title-row {
405
+ padding:
406
+ var(--sectiondivider-md-title-padding-top, var(--sectiondivider-md-title-padding, 0))
407
+ var(--sectiondivider-md-title-padding-right, var(--sectiondivider-md-title-padding, 0))
408
+ var(--sectiondivider-md-title-padding-bottom, var(--sectiondivider-md-title-padding, 0))
409
+ var(--sectiondivider-md-title-padding-left, var(--sectiondivider-md-title-padding, 0));
410
+ }
411
+ .variant-md .description-row {
412
+ padding:
413
+ var(--sectiondivider-md-description-padding-top, var(--sectiondivider-md-description-padding, 0))
414
+ var(--sectiondivider-md-description-padding-right, var(--sectiondivider-md-description-padding, 0))
415
+ var(--sectiondivider-md-description-padding-bottom, var(--sectiondivider-md-description-padding, 0))
416
+ var(--sectiondivider-md-description-padding-left, var(--sectiondivider-md-description-padding, 0));
417
+ }
418
+ .variant-md .divider-eyebrow {
419
+ padding:
420
+ var(--sectiondivider-md-eyebrow-padding-top, var(--sectiondivider-md-eyebrow-padding, 0))
421
+ var(--sectiondivider-md-eyebrow-padding-right, var(--sectiondivider-md-eyebrow-padding, 0))
422
+ var(--sectiondivider-md-eyebrow-padding-bottom, var(--sectiondivider-md-eyebrow-padding, 0))
423
+ var(--sectiondivider-md-eyebrow-padding-left, var(--sectiondivider-md-eyebrow-padding, 0));
424
+ }
425
+ .variant-sm .title-row {
426
+ padding:
427
+ var(--sectiondivider-sm-title-padding-top, var(--sectiondivider-sm-title-padding, 0))
428
+ var(--sectiondivider-sm-title-padding-right, var(--sectiondivider-sm-title-padding, 0))
429
+ var(--sectiondivider-sm-title-padding-bottom, var(--sectiondivider-sm-title-padding, 0))
430
+ var(--sectiondivider-sm-title-padding-left, var(--sectiondivider-sm-title-padding, 0));
431
+ }
432
+ .variant-sm .description-row {
433
+ padding:
434
+ var(--sectiondivider-sm-description-padding-top, var(--sectiondivider-sm-description-padding, 0))
435
+ var(--sectiondivider-sm-description-padding-right, var(--sectiondivider-sm-description-padding, 0))
436
+ var(--sectiondivider-sm-description-padding-bottom, var(--sectiondivider-sm-description-padding, 0))
437
+ var(--sectiondivider-sm-description-padding-left, var(--sectiondivider-sm-description-padding, 0));
438
+ }
439
+ .variant-sm .divider-eyebrow {
440
+ padding:
441
+ var(--sectiondivider-sm-eyebrow-padding-top, var(--sectiondivider-sm-eyebrow-padding, 0))
442
+ var(--sectiondivider-sm-eyebrow-padding-right, var(--sectiondivider-sm-eyebrow-padding, 0))
443
+ var(--sectiondivider-sm-eyebrow-padding-bottom, var(--sectiondivider-sm-eyebrow-padding, 0))
444
+ var(--sectiondivider-sm-eyebrow-padding-left, var(--sectiondivider-sm-eyebrow-padding, 0));
450
445
  }
451
446
 
452
447
  /* Title rendered as a single <text> through a feMorphology dilate + flood +
453
448
  composite filter. Dilating the alpha treats all glyphs as one combined
454
449
  shape, so neighbor-glyph overlaps (CQ, AC etc.) merge into a single
455
- outline instead of double-stacking. Filter values are pushed onto
456
- <feMorphology>/<feFlood> from JS — those attrs can't read CSS vars. */
450
+ outline instead of double-stacking. */
457
451
  svg.divider-label {
458
452
  display: block;
459
453
  overflow: visible;
@@ -461,23 +455,106 @@
461
455
  }
462
456
  svg.divider-label text {
463
457
  font-family: var(--_divider-title-font-family);
464
- font-size: var(--_divider-title-font-size);
465
458
  font-weight: var(--_divider-title-font-weight);
459
+ font-size: var(--_divider-title-font-size);
460
+ letter-spacing: var(--_divider-title-letter-spacing);
466
461
  fill: currentColor;
467
462
  }
468
463
 
464
+ .title-row {
465
+ display: flex;
466
+ width: 100%;
467
+ justify-content: var(--_divider-justify);
468
+ align-items: center;
469
+ gap: 0.75em;
470
+ }
471
+ .title-inline {
472
+ display: inline-flex;
473
+ }
474
+
475
+ /* Eyebrow visibility + uppercase flow from per-variant CSS vars. */
476
+ .divider-eyebrow {
477
+ display: var(--_divider-eyebrow-display);
478
+ font-family: var(--_divider-eyebrow-font-family);
479
+ font-weight: var(--_divider-eyebrow-font-weight);
480
+ font-size: var(--_divider-eyebrow-font-size);
481
+ letter-spacing: var(--_divider-eyebrow-letter-spacing);
482
+ color: var(--_divider-eyebrow);
483
+ text-transform: var(--_divider-eyebrow-text-transform);
484
+ }
485
+
486
+ /* Description visibility from the per-variant `description-display` var.
487
+ The row keeps its flex layout when shown; `none` removes it from the
488
+ flow entirely. */
489
+ .description-row {
490
+ display: var(--_divider-description-display);
491
+ width: 100%;
492
+ justify-content: var(--_divider-justify);
493
+ align-items: center;
494
+ gap: 0.75em;
495
+ }
496
+ .description-inline {
497
+ display: inline-flex;
498
+ }
469
499
  .divider-description {
470
- margin: var(--space-4) 0 0;
500
+ margin: 0;
471
501
  font-family: var(--_divider-description-font-family);
472
- font-size: var(--_divider-description-font-size);
473
502
  font-weight: var(--_divider-description-font-weight);
503
+ font-size: var(--_divider-description-font-size);
474
504
  line-height: var(--_divider-description-line-height);
475
505
  color: var(--_divider-description);
506
+ font-style: italic;
507
+ }
508
+
509
+ /* Hairlines: all six render unconditionally; container style queries
510
+ reveal exactly one per the variant's `--_divider-hairline` value. */
511
+ .sd-hairline {
512
+ display: none;
513
+ background: var(--_divider-hairline-color);
514
+ height: var(--_divider-hairline-thickness);
515
+ }
516
+ .sd-hairline--row {
517
+ width: 100%;
518
+ }
519
+ .sd-hairline--side {
520
+ flex: 1;
521
+ min-width: 0;
522
+ }
523
+
524
+ @container sd style(--_divider-hairline: above-label) {
525
+ .sd-hairline-above-label { display: block; }
526
+ }
527
+ @container sd style(--_divider-hairline: through-label) {
528
+ .sd-hairline-through-label { display: block; }
529
+ }
530
+ @container sd style(--_divider-hairline: below-label) {
531
+ .sd-hairline-below-label { display: block; }
532
+ }
533
+ @container sd style(--_divider-hairline: above-description) {
534
+ .sd-hairline-above-description { display: block; }
535
+ }
536
+ @container sd style(--_divider-hairline: through-description) {
537
+ .sd-hairline-through-description { display: block; }
538
+ }
539
+ @container sd style(--_divider-hairline: below-description) {
540
+ .sd-hairline-below-description { display: block; }
541
+ }
542
+
543
+ /* When description is hidden, any description-targeted hairline is hidden
544
+ too — the gap follows the description. No editor-side snap logic needed. */
545
+ @container sd style(--_divider-description-display: none) {
546
+ .sd-hairline-above-description,
547
+ .sd-hairline-through-description,
548
+ .sd-hairline-below-description { display: none; }
476
549
  }
477
550
 
478
- @media (max-width: 600px) {
479
- .section-divider {
480
- padding: var(--space-12) var(--space-16);
551
+ /* In start alignment the text hugs the left edge, so the leading side
552
+ hairline would have zero width — hide it and let the trailing one
553
+ stretch to the right edge. Container style query rather than a class. */
554
+ @container sd style(--_divider-align: start) {
555
+ .title-row .sd-hairline--side:first-child,
556
+ .description-row .sd-hairline--side:first-child {
557
+ display: none;
481
558
  }
482
559
  }
483
560
  </style>