@fusion.dev/helix-templates 0.229.0 → 0.229.1

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 (25) hide show
  1. package/package.json +1 -1
  2. package/templates/angular/src/app/landing.html +11 -11
  3. package/templates/angular/src/app/overview.html +5 -5
  4. package/templates/angular/src/app/signup-form.html +8 -8
  5. package/templates/angular/src/app/site-header.html +1 -1
  6. package/templates/react-nextjs/app/landing.tsx +11 -11
  7. package/templates/react-nextjs/app/overview.tsx +5 -5
  8. package/templates/react-nextjs/app/signup-form.tsx +8 -8
  9. package/templates/react-nextjs/app/site-header.tsx +1 -1
  10. package/templates/react-vite/src/landing.tsx +11 -11
  11. package/templates/react-vite/src/overview.tsx +5 -5
  12. package/templates/react-vite/src/signup-form.tsx +8 -8
  13. package/templates/react-vite/src/site-header.tsx +1 -1
  14. package/templates/solid-vite/src/landing.tsx +11 -11
  15. package/templates/solid-vite/src/overview.tsx +5 -5
  16. package/templates/solid-vite/src/signup-form.tsx +8 -8
  17. package/templates/solid-vite/src/site-header.tsx +1 -1
  18. package/templates/svelte-vite/src/Landing.svelte +11 -11
  19. package/templates/svelte-vite/src/Overview.svelte +5 -5
  20. package/templates/svelte-vite/src/SignupForm.svelte +8 -8
  21. package/templates/svelte-vite/src/SiteHeader.svelte +1 -1
  22. package/templates/vue-vite/src/LandingPage.vue +11 -11
  23. package/templates/vue-vite/src/OverviewPage.vue +5 -5
  24. package/templates/vue-vite/src/SignupForm.vue +8 -8
  25. package/templates/vue-vite/src/SiteHeader.vue +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fusion.dev/helix-templates",
3
3
  "description": "Starter templates for Helix, as data. Read by `helix new` and by `npm create @fusion.dev/helix-app`.",
4
- "version": "0.229.0",
4
+ "version": "0.229.1",
5
5
  "license": "MIT",
6
6
  "author": "Fusion Development Group",
7
7
  "repository": {
package/templates/angular/src/app/landing.html CHANGED
@@ -3,11 +3,11 @@
3
3
  the theme's colors, so a new brand color relights it. It shows one still
4
4
  frame where motion is reduced, and a gradient where the browser draws
5
5
  without a GPU. -->
6
- <helix-aura class="first-light" [speed]="0.4" [terminus]="0.8" variant="braid"></helix-aura>
6
+ <helix-aura class="first-light" [speed]="0.4" [terminus]="0.8" pattern="braid"></helix-aura>
7
7
  <div class="hero">
8
8
  <helix-tag emphasis="subtle" tone="primary">Starter</helix-tag>
9
- <helix-text as="h1" variant="display">Helix design system</helix-text>
10
- <helix-text as="p" class="lede" variant="body">
9
+ <helix-text as="h1" scale="display">Helix design system</helix-text>
10
+ <helix-text as="p" class="lede" scale="body">
11
11
  Web components in your brand's colors, drawn from one set of tokens.
12
12
  </helix-text>
13
13
  <div class="actions">
@@ -21,7 +21,7 @@
21
21
  is the app itself, on glass over the light. It has no link of its own:
22
22
  the button beside it goes to the same page. -->
23
23
  <helix-card class="specimen" material="glass" separation="outlined">
24
- <helix-text as="h2" slot="header" variant="title">Roster</helix-text>
24
+ <helix-text as="h2" slot="header" scale="title">Roster</helix-text>
25
25
  <helix-stat-group>
26
26
  <helix-stat>
27
27
  {{ roster.people }}
@@ -40,7 +40,7 @@
40
40
  </header>
41
41
 
42
42
  <section class="section">
43
- <helix-text as="h2" variant="subheading">What you have</helix-text>
43
+ <helix-text as="h2" scale="subheading">What you have</helix-text>
44
44
  <!-- **Each tile is a link, which is what `data-card` is for.** The base layer
45
45
  draws the ring, moves the card's border to the brand on hover, and leaves
46
46
  focus alone. Nothing inside may be interactive, since a link inside a link
@@ -49,8 +49,8 @@
49
49
  <a data-card [href]="docs.elements">
50
50
  <helix-card separation="outlined">
51
51
  <span class="feature-mark"><helix-icon name="cube"></helix-icon></span>
52
- <helix-text as="h3" variant="title">Custom elements</helix-text>
53
- <helix-text as="p" emphasis="muted" variant="body">
52
+ <helix-text as="h3" scale="title">Custom elements</helix-text>
53
+ <helix-text as="p" emphasis="muted" scale="body">
54
54
  One import in <helix-code>src/main.ts</helix-code> registers every tag.
55
55
  </helix-text>
56
56
  </helix-card>
@@ -58,8 +58,8 @@
58
58
  <a data-card [href]="docs.tokens">
59
59
  <helix-card separation="outlined">
60
60
  <span class="feature-mark"><helix-icon name="palette"></helix-icon></span>
61
- <helix-text as="h3" variant="title">One set of tokens</helix-text>
62
- <helix-text as="p" emphasis="muted" variant="body">
61
+ <helix-text as="h3" scale="title">One set of tokens</helix-text>
62
+ <helix-text as="p" emphasis="muted" scale="body">
63
63
  Every color, size, and space, in light and dark.
64
64
  </helix-text>
65
65
  </helix-card>
@@ -67,8 +67,8 @@
67
67
  <a data-card [href]="docs.parts">
68
68
  <helix-card separation="outlined">
69
69
  <span class="feature-mark"><helix-icon name="sliders-horizontal"></helix-icon></span>
70
- <helix-text as="h3" variant="title">Parts to style</helix-text>
71
- <helix-text as="p" emphasis="muted" variant="body">
70
+ <helix-text as="h3" scale="title">Parts to style</helix-text>
71
+ <helix-text as="p" emphasis="muted" scale="body">
72
72
  Reach inside a component with <helix-code>::part()</helix-code>.
73
73
  </helix-text>
74
74
  </helix-card>
package/templates/angular/src/app/overview.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <header class="hero">
2
- <helix-text emphasis="muted" variant="label">Data view</helix-text>
3
- <helix-text as="h1" variant="heading">Roster</helix-text>
4
- <helix-text as="p" class="lede" emphasis="muted" variant="body">
2
+ <helix-text emphasis="muted" scale="label">Data view</helix-text>
3
+ <helix-text as="h1" scale="heading">Roster</helix-text>
4
+ <helix-text as="p" class="lede" emphasis="muted" scale="body">
5
5
  Twelve people from a local module. Sort a column, turn a page, or tick a row and watch the
6
6
  rule in <helix-code>src/app.css</helix-code> paint it.
7
7
  </helix-text>
@@ -48,13 +48,13 @@
48
48
 
49
49
  <!-- The footer is a row across the table: anything you slot goes at the
50
50
  start, and the table's own pagination sits at the end. -->
51
- <helix-text emphasis="muted" slot="footer" variant="caption">
51
+ <helix-text emphasis="muted" slot="footer" scale="caption">
52
52
  {{ members.length }} people
53
53
  </helix-text>
54
54
  </helix-data-table>
55
55
 
56
56
  <!-- A footnote to the table, so it takes the section's gap. -->
57
- <helix-text as="p" emphasis="muted" variant="caption">
57
+ <helix-text as="p" emphasis="muted" scale="caption">
58
58
  Filtering, column reordering, resizing, virtualized rows, and a server mode for large results
59
59
  are on
60
60
  <a data-link [href]="docs.table">the component's own page</a>.
package/templates/angular/src/app/signup-form.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <header class="hero">
2
- <helix-text emphasis="muted" variant="label">Form</helix-text>
3
- <helix-text as="h1" variant="heading">Join the roster</helix-text>
4
- <helix-text as="p" class="lede" emphasis="muted" variant="body">
2
+ <helix-text emphasis="muted" scale="label">Form</helix-text>
3
+ <helix-text as="h1" scale="heading">Join the roster</helix-text>
4
+ <helix-text as="p" class="lede" emphasis="muted" scale="body">
5
5
  Five controls, and a <helix-code>&lt;form&gt;</helix-code> reads every one of them the way
6
6
  it reads an <helix-code>input</helix-code>.
7
7
  </helix-text>
@@ -55,13 +55,13 @@
55
55
  <helix-callout tone="neutral">
56
56
  The form posts nothing. Submit it, and a message shows exactly what a server would receive.
57
57
  </helix-callout>
58
- <helix-text as="h2" variant="title">What the form shows</helix-text>
59
- <helix-text as="p" emphasis="muted" variant="body">
58
+ <helix-text as="h2" scale="title">What the form shows</helix-text>
59
+ <helix-text as="p" emphasis="muted" scale="body">
60
60
  Every control is a form-associated custom element, so the submit reads them all with
61
61
  <helix-code>new FormData(form)</helix-code>. Reset the form and they all go back,
62
62
  the way an <helix-code>input</helix-code> does.
63
63
  </helix-text>
64
- <helix-text as="p" emphasis="muted" variant="body">
64
+ <helix-text as="p" emphasis="muted" scale="body">
65
65
  Leave the email wrong and the browser shows its own message, in your language. Handle is the
66
66
  controlled field: the page refuses each change and writes back a cleaned value.
67
67
  </helix-text>
@@ -82,8 +82,8 @@
82
82
  (helix-dismiss)="dismiss(message.id)"
83
83
  >
84
84
  <helix-flex direction="column" gap="2xs">
85
- <helix-text variant="body-strong">Read by the form</helix-text>
86
- <helix-text variant="code">{{ message.text }}</helix-text>
85
+ <helix-text scale="body-strong">Read by the form</helix-text>
86
+ <helix-text scale="code">{{ message.text }}</helix-text>
87
87
  </helix-flex>
88
88
  </helix-toast-item>
89
89
  }
package/templates/angular/src/app/site-header.html CHANGED
@@ -3,7 +3,7 @@
3
3
  destination in the bar saying the same thing. It names the library the
4
4
  starter is built on, and it is the place for your own name or logo. -->
5
5
  <a class="wordmark" data-link="quiet" href="#/" slot="start">
6
- <helix-text variant="body-strong">Helix</helix-text>
6
+ <helix-text scale="body-strong">Helix</helix-text>
7
7
  </a>
8
8
 
9
9
  <!-- The links are yours. Navigation owns the marker that travels between
package/templates/react-nextjs/app/landing.tsx CHANGED
@@ -30,15 +30,15 @@ export function Landing() {
30
30
  in the theme's colors, so a new brand color relights it. It shows
31
31
  one still frame where motion is reduced, and a gradient where the
32
32
  browser draws without a GPU. */}
33
- <helix-aura className="first-light" speed={0.4} terminus={0.8} variant="braid" />
33
+ <helix-aura className="first-light" speed={0.4} terminus={0.8} pattern="braid" />
34
34
  <div className="hero">
35
35
  <helix-tag emphasis="subtle" tone="primary">
36
36
  Starter
37
37
  </helix-tag>
38
- <helix-text as="h1" variant="display">
38
+ <helix-text as="h1" scale="display">
39
39
  Helix design system
40
40
  </helix-text>
41
- <helix-text as="p" className="lede" variant="body">
41
+ <helix-text as="p" className="lede" scale="body">
42
42
  Web components in your brand's colors, drawn from one set of tokens.
43
43
  </helix-text>
44
44
  <div className="actions">
@@ -56,7 +56,7 @@ export function Landing() {
56
56
  is the app itself, on glass over the light. It has no link of its own:
57
57
  the button beside it goes to the same page. */}
58
58
  <helix-card className="specimen" material="glass" separation="outlined">
59
- <helix-text as="h2" slot="header" variant="title">Roster</helix-text>
59
+ <helix-text as="h2" slot="header" scale="title">Roster</helix-text>
60
60
  <helix-stat-group>
61
61
  <helix-stat>
62
62
  {roster.people}
@@ -75,7 +75,7 @@ export function Landing() {
75
75
  </header>
76
76
 
77
77
  <section className="section">
78
- <helix-text as="h2" variant="subheading">
78
+ <helix-text as="h2" scale="subheading">
79
79
  What you have
80
80
  </helix-text>
81
81
  {/* **Each tile is a link, which is what `data-card` is for.** The base
@@ -88,10 +88,10 @@ export function Landing() {
88
88
  <span className="feature-mark">
89
89
  <helix-icon name="cube" />
90
90
  </span>
91
- <helix-text as="h3" variant="title">
91
+ <helix-text as="h3" scale="title">
92
92
  Custom elements
93
93
  </helix-text>
94
- <helix-text as="p" emphasis="muted" variant="body">
94
+ <helix-text as="p" emphasis="muted" scale="body">
95
95
  One import in <helix-code>app/helix-elements.tsx</helix-code> registers every tag.
96
96
  </helix-text>
97
97
  </helix-card>
@@ -101,10 +101,10 @@ export function Landing() {
101
101
  <span className="feature-mark">
102
102
  <helix-icon name="palette" />
103
103
  </span>
104
- <helix-text as="h3" variant="title">
104
+ <helix-text as="h3" scale="title">
105
105
  One set of tokens
106
106
  </helix-text>
107
- <helix-text as="p" emphasis="muted" variant="body">
107
+ <helix-text as="p" emphasis="muted" scale="body">
108
108
  Every color, size, and space, in light and dark.
109
109
  </helix-text>
110
110
  </helix-card>
@@ -114,10 +114,10 @@ export function Landing() {
114
114
  <span className="feature-mark">
115
115
  <helix-icon name="sliders-horizontal" />
116
116
  </span>
117
- <helix-text as="h3" variant="title">
117
+ <helix-text as="h3" scale="title">
118
118
  Parts to style
119
119
  </helix-text>
120
- <helix-text as="p" emphasis="muted" variant="body">
120
+ <helix-text as="p" emphasis="muted" scale="body">
121
121
  Reach inside a component with <helix-code>::part()</helix-code>.
122
122
  </helix-text>
123
123
  </helix-card>
package/templates/react-nextjs/app/overview.tsx CHANGED
@@ -23,13 +23,13 @@ export function Overview() {
23
23
  return (
24
24
  <div className="stack">
25
25
  <header className="hero">
26
- <helix-text emphasis="muted" variant="label">
26
+ <helix-text emphasis="muted" scale="label">
27
27
  Data view
28
28
  </helix-text>
29
- <helix-text as="h1" variant="heading">
29
+ <helix-text as="h1" scale="heading">
30
30
  Roster
31
31
  </helix-text>
32
- <helix-text as="p" className="lede" emphasis="muted" variant="body">
32
+ <helix-text as="p" className="lede" emphasis="muted" scale="body">
33
33
  Twelve people from a local module. Sort a column, turn a page, or tick a row and watch the
34
34
  rule in <helix-code>app/app.css</helix-code> paint it.
35
35
  </helix-text>
@@ -86,13 +86,13 @@ export function Overview() {
86
86
 
87
87
  {/* The footer is a row across the table: anything you slot goes at the
88
88
  start, and the table's own pagination sits at the end. */}
89
- <helix-text emphasis="muted" slot="footer" variant="caption">
89
+ <helix-text emphasis="muted" slot="footer" scale="caption">
90
90
  {members.length} people
91
91
  </helix-text>
92
92
  </helix-data-table>
93
93
 
94
94
  {/* A footnote to the table, so it takes the section's gap. */}
95
- <helix-text as="p" emphasis="muted" variant="caption">
95
+ <helix-text as="p" emphasis="muted" scale="caption">
96
96
  Filtering, column reordering, resizing, virtualized rows, and a server mode for large
97
97
  results are on{' '}
98
98
  <a data-link href={DOCS.table}>
package/templates/react-nextjs/app/signup-form.tsx CHANGED
@@ -47,13 +47,13 @@ export function SignupForm() {
47
47
  return (
48
48
  <div className="stack">
49
49
  <header className="hero">
50
- <helix-text emphasis="muted" variant="label">
50
+ <helix-text emphasis="muted" scale="label">
51
51
  Form
52
52
  </helix-text>
53
- <helix-text as="h1" variant="heading">
53
+ <helix-text as="h1" scale="heading">
54
54
  Join the roster
55
55
  </helix-text>
56
- <helix-text as="p" className="lede" emphasis="muted" variant="body">
56
+ <helix-text as="p" className="lede" emphasis="muted" scale="body">
57
57
  Five controls, and a <helix-code>&lt;form&gt;</helix-code> reads every one of them the way
58
58
  it reads an <helix-code>input</helix-code>.
59
59
  </helix-text>
@@ -132,15 +132,15 @@ export function SignupForm() {
132
132
  The form posts nothing. Submit it, and a message shows exactly what a server would
133
133
  receive.
134
134
  </helix-callout>
135
- <helix-text as="h2" variant="title">
135
+ <helix-text as="h2" scale="title">
136
136
  What the form shows
137
137
  </helix-text>
138
- <helix-text as="p" emphasis="muted" variant="body">
138
+ <helix-text as="p" emphasis="muted" scale="body">
139
139
  Every control is a form-associated custom element, so the submit reads them all
140
140
  with <helix-code>new FormData(form)</helix-code>. Reset the form and they all go back,
141
141
  the way an <helix-code>input</helix-code> does.
142
142
  </helix-text>
143
- <helix-text as="p" emphasis="muted" variant="body">
143
+ <helix-text as="p" emphasis="muted" scale="body">
144
144
  Leave the email wrong and the browser shows its own message, in your language. Handle is
145
145
  the controlled field: the page refuses each change and writes back a cleaned value.
146
146
  </helix-text>
@@ -167,8 +167,8 @@ export function SignupForm() {
167
167
  tone="success"
168
168
  >
169
169
  <helix-flex direction="column" gap="2xs">
170
- <helix-text variant="body-strong">Read by the form</helix-text>
171
- <helix-text variant="code">{message.text}</helix-text>
170
+ <helix-text scale="body-strong">Read by the form</helix-text>
171
+ <helix-text scale="code">{message.text}</helix-text>
172
172
  </helix-flex>
173
173
  </helix-toast-item>
174
174
  ))}
package/templates/react-nextjs/app/site-header.tsx CHANGED
@@ -56,7 +56,7 @@ export function SiteHeader() {
56
56
  It names the library the starter is built on, and it is the place for
57
57
  your own name or logo. */}
58
58
  <Link className="wordmark" data-link="quiet" href="/" slot="start">
59
- <helix-text variant="body-strong">Helix</helix-text>
59
+ <helix-text scale="body-strong">Helix</helix-text>
60
60
  </Link>
61
61
 
62
62
  {/* The links are yours. Navigation owns the marker that travels between
package/templates/react-vite/src/landing.tsx CHANGED
@@ -30,15 +30,15 @@ export function Landing() {
30
30
  in the theme's colors, so a new brand color relights it. It shows
31
31
  one still frame where motion is reduced, and a gradient where the
32
32
  browser draws without a GPU. */}
33
- <helix-aura className="first-light" speed={0.4} terminus={0.8} variant="braid" />
33
+ <helix-aura className="first-light" speed={0.4} terminus={0.8} pattern="braid" />
34
34
  <div className="hero">
35
35
  <helix-tag emphasis="subtle" tone="primary">
36
36
  Starter
37
37
  </helix-tag>
38
- <helix-text as="h1" variant="display">
38
+ <helix-text as="h1" scale="display">
39
39
  Helix design system
40
40
  </helix-text>
41
- <helix-text as="p" className="lede" variant="body">
41
+ <helix-text as="p" className="lede" scale="body">
42
42
  Web components in your brand's colors, drawn from one set of tokens.
43
43
  </helix-text>
44
44
  <div className="actions">
@@ -56,7 +56,7 @@ export function Landing() {
56
56
  is the app itself, on glass over the light. It has no link of its own:
57
57
  the button beside it goes to the same page. */}
58
58
  <helix-card className="specimen" material="glass" separation="outlined">
59
- <helix-text as="h2" slot="header" variant="title">Roster</helix-text>
59
+ <helix-text as="h2" slot="header" scale="title">Roster</helix-text>
60
60
  <helix-stat-group>
61
61
  <helix-stat>
62
62
  {roster.people}
@@ -75,7 +75,7 @@ export function Landing() {
75
75
  </header>
76
76
 
77
77
  <section className="section">
78
- <helix-text as="h2" variant="subheading">
78
+ <helix-text as="h2" scale="subheading">
79
79
  What you have
80
80
  </helix-text>
81
81
  {/* **Each tile is a link, which is what `data-card` is for.** The base
@@ -88,10 +88,10 @@ export function Landing() {
88
88
  <span className="feature-mark">
89
89
  <helix-icon name="cube" />
90
90
  </span>
91
- <helix-text as="h3" variant="title">
91
+ <helix-text as="h3" scale="title">
92
92
  Custom elements
93
93
  </helix-text>
94
- <helix-text as="p" emphasis="muted" variant="body">
94
+ <helix-text as="p" emphasis="muted" scale="body">
95
95
  One import in <helix-code>src/main.tsx</helix-code> registers every tag.
96
96
  </helix-text>
97
97
  </helix-card>
@@ -101,10 +101,10 @@ export function Landing() {
101
101
  <span className="feature-mark">
102
102
  <helix-icon name="palette" />
103
103
  </span>
104
- <helix-text as="h3" variant="title">
104
+ <helix-text as="h3" scale="title">
105
105
  One set of tokens
106
106
  </helix-text>
107
- <helix-text as="p" emphasis="muted" variant="body">
107
+ <helix-text as="p" emphasis="muted" scale="body">
108
108
  Every color, size, and space, in light and dark.
109
109
  </helix-text>
110
110
  </helix-card>
@@ -114,10 +114,10 @@ export function Landing() {
114
114
  <span className="feature-mark">
115
115
  <helix-icon name="sliders-horizontal" />
116
116
  </span>
117
- <helix-text as="h3" variant="title">
117
+ <helix-text as="h3" scale="title">
118
118
  Parts to style
119
119
  </helix-text>
120
- <helix-text as="p" emphasis="muted" variant="body">
120
+ <helix-text as="p" emphasis="muted" scale="body">
121
121
  Reach inside a component with <helix-code>::part()</helix-code>.
122
122
  </helix-text>
123
123
  </helix-card>
package/templates/react-vite/src/overview.tsx CHANGED
@@ -23,13 +23,13 @@ export function Overview() {
23
23
  return (
24
24
  <div className="stack">
25
25
  <header className="hero">
26
- <helix-text emphasis="muted" variant="label">
26
+ <helix-text emphasis="muted" scale="label">
27
27
  Data view
28
28
  </helix-text>
29
- <helix-text as="h1" variant="heading">
29
+ <helix-text as="h1" scale="heading">
30
30
  Roster
31
31
  </helix-text>
32
- <helix-text as="p" className="lede" emphasis="muted" variant="body">
32
+ <helix-text as="p" className="lede" emphasis="muted" scale="body">
33
33
  Twelve people from a local module. Sort a column, turn a page, or tick a row and watch the
34
34
  rule in <helix-code>src/app.css</helix-code> paint it.
35
35
  </helix-text>
@@ -86,13 +86,13 @@ export function Overview() {
86
86
 
87
87
  {/* The footer is a row across the table: anything you slot goes at the
88
88
  start, and the table's own pagination sits at the end. */}
89
- <helix-text emphasis="muted" slot="footer" variant="caption">
89
+ <helix-text emphasis="muted" slot="footer" scale="caption">
90
90
  {members.length} people
91
91
  </helix-text>
92
92
  </helix-data-table>
93
93
 
94
94
  {/* A footnote to the table, so it takes the section's gap. */}
95
- <helix-text as="p" emphasis="muted" variant="caption">
95
+ <helix-text as="p" emphasis="muted" scale="caption">
96
96
  Filtering, column reordering, resizing, virtualized rows, and a server mode for large
97
97
  results are on{' '}
98
98
  <a data-link href={DOCS.table}>
package/templates/react-vite/src/signup-form.tsx CHANGED
@@ -38,13 +38,13 @@ export function SignupForm() {
38
38
  return (
39
39
  <div className="stack">
40
40
  <header className="hero">
41
- <helix-text emphasis="muted" variant="label">
41
+ <helix-text emphasis="muted" scale="label">
42
42
  Form
43
43
  </helix-text>
44
- <helix-text as="h1" variant="heading">
44
+ <helix-text as="h1" scale="heading">
45
45
  Join the roster
46
46
  </helix-text>
47
- <helix-text as="p" className="lede" emphasis="muted" variant="body">
47
+ <helix-text as="p" className="lede" emphasis="muted" scale="body">
48
48
  Five controls, and a <helix-code>&lt;form&gt;</helix-code> reads every one of them the way
49
49
  it reads an <helix-code>input</helix-code>.
50
50
  </helix-text>
@@ -123,15 +123,15 @@ export function SignupForm() {
123
123
  The form posts nothing. Submit it, and a message shows exactly what a server would
124
124
  receive.
125
125
  </helix-callout>
126
- <helix-text as="h2" variant="title">
126
+ <helix-text as="h2" scale="title">
127
127
  What the form shows
128
128
  </helix-text>
129
- <helix-text as="p" emphasis="muted" variant="body">
129
+ <helix-text as="p" emphasis="muted" scale="body">
130
130
  Every control is a form-associated custom element, so the submit reads them all
131
131
  with <helix-code>new FormData(form)</helix-code>. Reset the form and they all go back,
132
132
  the way an <helix-code>input</helix-code> does.
133
133
  </helix-text>
134
- <helix-text as="p" emphasis="muted" variant="body">
134
+ <helix-text as="p" emphasis="muted" scale="body">
135
135
  Leave the email wrong and the browser shows its own message, in your language. Handle is
136
136
  the controlled field: the page refuses each change and writes back a cleaned value.
137
137
  </helix-text>
@@ -158,8 +158,8 @@ export function SignupForm() {
158
158
  tone="success"
159
159
  >
160
160
  <helix-flex direction="column" gap="2xs">
161
- <helix-text variant="body-strong">Read by the form</helix-text>
162
- <helix-text variant="code">{message.text}</helix-text>
161
+ <helix-text scale="body-strong">Read by the form</helix-text>
162
+ <helix-text scale="code">{message.text}</helix-text>
163
163
  </helix-flex>
164
164
  </helix-toast-item>
165
165
  ))}
package/templates/react-vite/src/site-header.tsx CHANGED
@@ -46,7 +46,7 @@ export function SiteHeader() {
46
46
  It names the library the starter is built on, and it is the place for
47
47
  your own name or logo. */}
48
48
  <Link className="wordmark" data-link="quiet" href="/" slot="start">
49
- <helix-text variant="body-strong">Helix</helix-text>
49
+ <helix-text scale="body-strong">Helix</helix-text>
50
50
  </Link>
51
51
 
52
52
  {/* The links are yours. Navigation owns the marker that travels between
package/templates/solid-vite/src/landing.tsx CHANGED
@@ -27,15 +27,15 @@ export function Landing() {
27
27
  in the theme's colors, so a new brand color relights it. It shows
28
28
  one still frame where motion is reduced, and a gradient where the
29
29
  browser draws without a GPU. */}
30
- <helix-aura class="first-light" speed={0.4} terminus={0.8} variant="braid" />
30
+ <helix-aura class="first-light" speed={0.4} terminus={0.8} pattern="braid" />
31
31
  <div class="hero">
32
32
  <helix-tag emphasis="subtle" tone="primary">
33
33
  Starter
34
34
  </helix-tag>
35
- <helix-text as="h1" variant="display">
35
+ <helix-text as="h1" scale="display">
36
36
  Helix design system
37
37
  </helix-text>
38
- <helix-text as="p" class="lede" variant="body">
38
+ <helix-text as="p" class="lede" scale="body">
39
39
  Web components in your brand's colors, drawn from one set of tokens.
40
40
  </helix-text>
41
41
  <div class="actions">
@@ -53,7 +53,7 @@ export function Landing() {
53
53
  is the app itself, on glass over the light. It has no link of its own:
54
54
  the button beside it goes to the same page. */}
55
55
  <helix-card class="specimen" material="glass" separation="outlined">
56
- <helix-text as="h2" slot="header" variant="title">Roster</helix-text>
56
+ <helix-text as="h2" slot="header" scale="title">Roster</helix-text>
57
57
  <helix-stat-group>
58
58
  <helix-stat>
59
59
  {roster.people}
@@ -72,7 +72,7 @@ export function Landing() {
72
72
  </header>
73
73
 
74
74
  <section class="section">
75
- <helix-text as="h2" variant="subheading">
75
+ <helix-text as="h2" scale="subheading">
76
76
  What you have
77
77
  </helix-text>
78
78
  {/* **Each tile is a link, which is what `data-card` is for.** The base
@@ -85,10 +85,10 @@ export function Landing() {
85
85
  <span class="feature-mark">
86
86
  <helix-icon name="cube" />
87
87
  </span>
88
- <helix-text as="h3" variant="title">
88
+ <helix-text as="h3" scale="title">
89
89
  Custom elements
90
90
  </helix-text>
91
- <helix-text as="p" emphasis="muted" variant="body">
91
+ <helix-text as="p" emphasis="muted" scale="body">
92
92
  One import in <helix-code>src/main.tsx</helix-code> registers every tag.
93
93
  </helix-text>
94
94
  </helix-card>
@@ -98,10 +98,10 @@ export function Landing() {
98
98
  <span class="feature-mark">
99
99
  <helix-icon name="palette" />
100
100
  </span>
101
- <helix-text as="h3" variant="title">
101
+ <helix-text as="h3" scale="title">
102
102
  One set of tokens
103
103
  </helix-text>
104
- <helix-text as="p" emphasis="muted" variant="body">
104
+ <helix-text as="p" emphasis="muted" scale="body">
105
105
  Every color, size, and space, in light and dark.
106
106
  </helix-text>
107
107
  </helix-card>
@@ -111,10 +111,10 @@ export function Landing() {
111
111
  <span class="feature-mark">
112
112
  <helix-icon name="sliders-horizontal" />
113
113
  </span>
114
- <helix-text as="h3" variant="title">
114
+ <helix-text as="h3" scale="title">
115
115
  Parts to style
116
116
  </helix-text>
117
- <helix-text as="p" emphasis="muted" variant="body">
117
+ <helix-text as="p" emphasis="muted" scale="body">
118
118
  Reach inside a component with <helix-code>::part()</helix-code>.
119
119
  </helix-text>
120
120
  </helix-card>
package/templates/solid-vite/src/overview.tsx CHANGED
@@ -22,13 +22,13 @@ export function Overview() {
22
22
  return (
23
23
  <div class="stack">
24
24
  <header class="hero">
25
- <helix-text emphasis="muted" variant="label">
25
+ <helix-text emphasis="muted" scale="label">
26
26
  Data view
27
27
  </helix-text>
28
- <helix-text as="h1" variant="heading">
28
+ <helix-text as="h1" scale="heading">
29
29
  Roster
30
30
  </helix-text>
31
- <helix-text as="p" class="lede" emphasis="muted" variant="body">
31
+ <helix-text as="p" class="lede" emphasis="muted" scale="body">
32
32
  Twelve people from a local module. Sort a column, turn a page, or tick a row and watch the
33
33
  rule in <helix-code>src/app.css</helix-code> paint it.
34
34
  </helix-text>
@@ -77,13 +77,13 @@ export function Overview() {
77
77
 
78
78
  {/* The footer is a row across the table: anything you slot goes at the
79
79
  start, and the table's own pagination sits at the end. */}
80
- <helix-text emphasis="muted" slot="footer" variant="caption">
80
+ <helix-text emphasis="muted" slot="footer" scale="caption">
81
81
  {members.length} people
82
82
  </helix-text>
83
83
  </helix-data-table>
84
84
 
85
85
  {/* A footnote to the table, so it takes the section's gap. */}
86
- <helix-text as="p" emphasis="muted" variant="caption">
86
+ <helix-text as="p" emphasis="muted" scale="caption">
87
87
  Filtering, column reordering, resizing, virtualized rows, and a server mode for large
88
88
  results are on{' '}
89
89
  <a data-link href={DOCS.table}>
package/templates/solid-vite/src/signup-form.tsx CHANGED
@@ -37,13 +37,13 @@ export function SignupForm() {
37
37
  return (
38
38
  <div class="stack">
39
39
  <header class="hero">
40
- <helix-text emphasis="muted" variant="label">
40
+ <helix-text emphasis="muted" scale="label">
41
41
  Form
42
42
  </helix-text>
43
- <helix-text as="h1" variant="heading">
43
+ <helix-text as="h1" scale="heading">
44
44
  Join the roster
45
45
  </helix-text>
46
- <helix-text as="p" class="lede" emphasis="muted" variant="body">
46
+ <helix-text as="p" class="lede" emphasis="muted" scale="body">
47
47
  Five controls, and a <helix-code>&lt;form&gt;</helix-code> reads every one of them the way
48
48
  it reads an <helix-code>input</helix-code>.
49
49
  </helix-text>
@@ -105,15 +105,15 @@ export function SignupForm() {
105
105
  The form posts nothing. Submit it, and a message shows exactly what a server would
106
106
  receive.
107
107
  </helix-callout>
108
- <helix-text as="h2" variant="title">
108
+ <helix-text as="h2" scale="title">
109
109
  What the form shows
110
110
  </helix-text>
111
- <helix-text as="p" emphasis="muted" variant="body">
111
+ <helix-text as="p" emphasis="muted" scale="body">
112
112
  Every control is a form-associated custom element, so the submit reads them all
113
113
  with <helix-code>new FormData(form)</helix-code>. Reset the form and they all go back,
114
114
  the way an <helix-code>input</helix-code> does.
115
115
  </helix-text>
116
- <helix-text as="p" emphasis="muted" variant="body">
116
+ <helix-text as="p" emphasis="muted" scale="body">
117
117
  Leave the email wrong and the browser shows its own message, in your language. Handle is
118
118
  the controlled field: the page refuses each change and writes back a cleaned value.
119
119
  </helix-text>
@@ -139,8 +139,8 @@ export function SignupForm() {
139
139
  tone="success"
140
140
  >
141
141
  <helix-flex direction="column" gap="2xs">
142
- <helix-text variant="body-strong">Read by the form</helix-text>
143
- <helix-text variant="code">{message.text}</helix-text>
142
+ <helix-text scale="body-strong">Read by the form</helix-text>
143
+ <helix-text scale="code">{message.text}</helix-text>
144
144
  </helix-flex>
145
145
  </helix-toast-item>
146
146
  )}
package/templates/solid-vite/src/site-header.tsx CHANGED
@@ -43,7 +43,7 @@ export function SiteHeader() {
43
43
  destination in the bar saying the same thing. It names the library the
44
44
  starter is built on, and it is the place for your own name or logo. */}
45
45
  <a class="wordmark" data-link="quiet" href="#/" slot="start">
46
- <helix-text variant="body-strong">Helix</helix-text>
46
+ <helix-text scale="body-strong">Helix</helix-text>
47
47
  </a>
48
48
 
49
49
  {/* The links are yours. Navigation owns the marker that travels between
package/templates/svelte-vite/src/Landing.svelte CHANGED
@@ -25,11 +25,11 @@
25
25
  the theme's colors, so a new brand color relights it. It shows one still
26
26
  frame where motion is reduced, and a gradient where the browser draws
27
27
  without a GPU. -->
28
- <helix-aura class="first-light" speed={0.4} terminus={0.8} variant="braid"></helix-aura>
28
+ <helix-aura class="first-light" speed={0.4} terminus={0.8} pattern="braid"></helix-aura>
29
29
  <div class="hero">
30
30
  <helix-tag emphasis="subtle" tone="primary">Starter</helix-tag>
31
- <helix-text as="h1" variant="display">Helix design system</helix-text>
32
- <helix-text as="p" class="lede" variant="body">
31
+ <helix-text as="h1" scale="display">Helix design system</helix-text>
32
+ <helix-text as="p" class="lede" scale="body">
33
33
  Web components in your brand's colors, drawn from one set of tokens.
34
34
  </helix-text>
35
35
  <div class="actions">
@@ -43,7 +43,7 @@
43
43
  is the app itself, on glass over the light. It has no link of its own:
44
44
  the button beside it goes to the same page. -->
45
45
  <helix-card class="specimen" material="glass" separation="outlined">
46
- <helix-text as="h2" slot="header" variant="title">Roster</helix-text>
46
+ <helix-text as="h2" slot="header" scale="title">Roster</helix-text>
47
47
  <helix-stat-group>
48
48
  <helix-stat>
49
49
  {roster.people}
@@ -62,7 +62,7 @@
62
62
  </header>
63
63
 
64
64
  <section class="section">
65
- <helix-text as="h2" variant="subheading">What you have</helix-text>
65
+ <helix-text as="h2" scale="subheading">What you have</helix-text>
66
66
  <!-- **Each tile is a link, which is what `data-card` is for.** The base layer
67
67
  draws the ring, moves the card's border to the brand on hover, and leaves
68
68
  focus alone. Nothing inside may be interactive, since a link inside a link
@@ -71,8 +71,8 @@
71
71
  <a data-card href={DOCS.elements}>
72
72
  <helix-card separation="outlined">
73
73
  <span class="feature-mark"><helix-icon name="cube"></helix-icon></span>
74
- <helix-text as="h3" variant="title">Custom elements</helix-text>
75
- <helix-text as="p" emphasis="muted" variant="body">
74
+ <helix-text as="h3" scale="title">Custom elements</helix-text>
75
+ <helix-text as="p" emphasis="muted" scale="body">
76
76
  One import in <helix-code>src/main.ts</helix-code> registers every tag.
77
77
  </helix-text>
78
78
  </helix-card>
@@ -80,8 +80,8 @@
80
80
  <a data-card href={DOCS.tokens}>
81
81
  <helix-card separation="outlined">
82
82
  <span class="feature-mark"><helix-icon name="palette"></helix-icon></span>
83
- <helix-text as="h3" variant="title">One set of tokens</helix-text>
84
- <helix-text as="p" emphasis="muted" variant="body">
83
+ <helix-text as="h3" scale="title">One set of tokens</helix-text>
84
+ <helix-text as="p" emphasis="muted" scale="body">
85
85
  Every color, size, and space, in light and dark.
86
86
  </helix-text>
87
87
  </helix-card>
@@ -89,8 +89,8 @@
89
89
  <a data-card href={DOCS.parts}>
90
90
  <helix-card separation="outlined">
91
91
  <span class="feature-mark"><helix-icon name="sliders-horizontal"></helix-icon></span>
92
- <helix-text as="h3" variant="title">Parts to style</helix-text>
93
- <helix-text as="p" emphasis="muted" variant="body">
92
+ <helix-text as="h3" scale="title">Parts to style</helix-text>
93
+ <helix-text as="p" emphasis="muted" scale="body">
94
94
  Reach inside a component with <helix-code>::part()</helix-code>.
95
95
  </helix-text>
96
96
  </helix-card>
package/templates/svelte-vite/src/Overview.svelte CHANGED
@@ -16,9 +16,9 @@
16
16
 
17
17
  <div class="stack">
18
18
  <header class="hero">
19
- <helix-text emphasis="muted" variant="label">Data view</helix-text>
20
- <helix-text as="h1" variant="heading">Roster</helix-text>
21
- <helix-text as="p" class="lede" emphasis="muted" variant="body">
19
+ <helix-text emphasis="muted" scale="label">Data view</helix-text>
20
+ <helix-text as="h1" scale="heading">Roster</helix-text>
21
+ <helix-text as="p" class="lede" emphasis="muted" scale="body">
22
22
  Twelve people from a local module. Sort a column, turn a page, or tick a row and watch the
23
23
  rule in <helix-code>src/app.css</helix-code> paint it.
24
24
  </helix-text>
@@ -65,13 +65,13 @@
65
65
 
66
66
  <!-- The footer is a row across the table: anything you slot goes at the
67
67
  start, and the table's own pagination sits at the end. -->
68
- <helix-text emphasis="muted" slot="footer" variant="caption">
68
+ <helix-text emphasis="muted" slot="footer" scale="caption">
69
69
  {members.length} people
70
70
  </helix-text>
71
71
  </helix-data-table>
72
72
 
73
73
  <!-- A footnote to the table, so it takes the section's gap. -->
74
- <helix-text as="p" emphasis="muted" variant="caption">
74
+ <helix-text as="p" emphasis="muted" scale="caption">
75
75
  Filtering, column reordering, resizing, virtualized rows, and a server mode for large results
76
76
  are on
77
77
  <a data-link href={DOCS.table}>the component's own page</a>.
package/templates/svelte-vite/src/SignupForm.svelte CHANGED
@@ -55,9 +55,9 @@
55
55
 
56
56
  <div class="stack">
57
57
  <header class="hero">
58
- <helix-text emphasis="muted" variant="label">Form</helix-text>
59
- <helix-text as="h1" variant="heading">Join the roster</helix-text>
60
- <helix-text as="p" class="lede" emphasis="muted" variant="body">
58
+ <helix-text emphasis="muted" scale="label">Form</helix-text>
59
+ <helix-text as="h1" scale="heading">Join the roster</helix-text>
60
+ <helix-text as="p" class="lede" emphasis="muted" scale="body">
61
61
  Five controls, and a <helix-code>&lt;form&gt;</helix-code> reads every one of them the way
62
62
  it reads an <helix-code>input</helix-code>.
63
63
  </helix-text>
@@ -111,13 +111,13 @@
111
111
  <helix-callout tone="neutral">
112
112
  The form posts nothing. Submit it, and a message shows exactly what a server would receive.
113
113
  </helix-callout>
114
- <helix-text as="h2" variant="title">What the form shows</helix-text>
115
- <helix-text as="p" emphasis="muted" variant="body">
114
+ <helix-text as="h2" scale="title">What the form shows</helix-text>
115
+ <helix-text as="p" emphasis="muted" scale="body">
116
116
  Every control is a form-associated custom element, so the submit reads them all with
117
117
  <helix-code>new FormData(form)</helix-code>. Reset the form and they all go back,
118
118
  the way an <helix-code>input</helix-code> does.
119
119
  </helix-text>
120
- <helix-text as="p" emphasis="muted" variant="body">
120
+ <helix-text as="p" emphasis="muted" scale="body">
121
121
  Leave the email wrong and the browser shows its own message, in your language. Handle is the
122
122
  controlled field: the page refuses each change and writes back a cleaned value.
123
123
  </helix-text>
@@ -138,8 +138,8 @@
138
138
  tone="success"
139
139
  >
140
140
  <helix-flex direction="column" gap="2xs">
141
- <helix-text variant="body-strong">Read by the form</helix-text>
142
- <helix-text variant="code">{message.text}</helix-text>
141
+ <helix-text scale="body-strong">Read by the form</helix-text>
142
+ <helix-text scale="code">{message.text}</helix-text>
143
143
  </helix-flex>
144
144
  </helix-toast-item>
145
145
  {/each}
package/templates/svelte-vite/src/SiteHeader.svelte CHANGED
@@ -40,7 +40,7 @@
40
40
  destination in the bar saying the same thing. It names the library the
41
41
  starter is built on, and it is the place for your own name or logo. -->
42
42
  <a class="wordmark" data-link="quiet" href="#/" slot="start">
43
- <helix-text variant="body-strong">Helix</helix-text>
43
+ <helix-text scale="body-strong">Helix</helix-text>
44
44
  </a>
45
45
 
46
46
  <!-- The links are yours. Navigation owns the marker that travels between them
package/templates/vue-vite/src/LandingPage.vue CHANGED
@@ -26,11 +26,11 @@ const figure = new Intl.NumberFormat('en-US')
26
26
  the theme's colors, so a new brand color relights it. It shows one still
27
27
  frame where motion is reduced, and a gradient where the browser draws
28
28
  without a GPU. -->
29
- <helix-aura class="first-light" :speed="0.4" :terminus="0.8" variant="braid" />
29
+ <helix-aura class="first-light" :speed="0.4" :terminus="0.8" pattern="braid" />
30
30
  <div class="hero">
31
31
  <helix-tag emphasis="subtle" tone="primary">Starter</helix-tag>
32
- <helix-text as="h1" variant="display">Helix design system</helix-text>
33
- <helix-text as="p" class="lede" variant="body">
32
+ <helix-text as="h1" scale="display">Helix design system</helix-text>
33
+ <helix-text as="p" class="lede" scale="body">
34
34
  Web components in your brand's colors, drawn from one set of tokens.
35
35
  </helix-text>
36
36
  <div class="actions">
@@ -44,7 +44,7 @@ const figure = new Intl.NumberFormat('en-US')
44
44
  is the app itself, on glass over the light. It has no link of its own:
45
45
  the button beside it goes to the same page. -->
46
46
  <helix-card class="specimen" material="glass" separation="outlined">
47
- <helix-text as="h2" slot="header" variant="title">Roster</helix-text>
47
+ <helix-text as="h2" slot="header" scale="title">Roster</helix-text>
48
48
  <helix-stat-group>
49
49
  <helix-stat>
50
50
  {{ roster.people }}
@@ -63,7 +63,7 @@ const figure = new Intl.NumberFormat('en-US')
63
63
  </header>
64
64
 
65
65
  <section class="section">
66
- <helix-text as="h2" variant="subheading">What you have</helix-text>
66
+ <helix-text as="h2" scale="subheading">What you have</helix-text>
67
67
  <!-- **Each tile is a link, which is what `data-card` is for.** The base layer
68
68
  draws the ring, moves the card's border to the brand on hover, and leaves
69
69
  focus alone. Nothing inside may be interactive, since a link inside a link
@@ -72,8 +72,8 @@ const figure = new Intl.NumberFormat('en-US')
72
72
  <a data-card :href="DOCS.elements">
73
73
  <helix-card separation="outlined">
74
74
  <span class="feature-mark"><helix-icon name="cube" /></span>
75
- <helix-text as="h3" variant="title">Custom elements</helix-text>
76
- <helix-text as="p" emphasis="muted" variant="body">
75
+ <helix-text as="h3" scale="title">Custom elements</helix-text>
76
+ <helix-text as="p" emphasis="muted" scale="body">
77
77
  One import in <helix-code>src/main.ts</helix-code> registers every tag.
78
78
  </helix-text>
79
79
  </helix-card>
@@ -81,8 +81,8 @@ const figure = new Intl.NumberFormat('en-US')
81
81
  <a data-card :href="DOCS.tokens">
82
82
  <helix-card separation="outlined">
83
83
  <span class="feature-mark"><helix-icon name="palette" /></span>
84
- <helix-text as="h3" variant="title">One set of tokens</helix-text>
85
- <helix-text as="p" emphasis="muted" variant="body">
84
+ <helix-text as="h3" scale="title">One set of tokens</helix-text>
85
+ <helix-text as="p" emphasis="muted" scale="body">
86
86
  Every color, size, and space, in light and dark.
87
87
  </helix-text>
88
88
  </helix-card>
@@ -90,8 +90,8 @@ const figure = new Intl.NumberFormat('en-US')
90
90
  <a data-card :href="DOCS.parts">
91
91
  <helix-card separation="outlined">
92
92
  <span class="feature-mark"><helix-icon name="sliders-horizontal" /></span>
93
- <helix-text as="h3" variant="title">Parts to style</helix-text>
94
- <helix-text as="p" emphasis="muted" variant="body">
93
+ <helix-text as="h3" scale="title">Parts to style</helix-text>
94
+ <helix-text as="p" emphasis="muted" scale="body">
95
95
  Reach inside a component with <helix-code>::part()</helix-code>.
96
96
  </helix-text>
97
97
  </helix-card>
package/templates/vue-vite/src/OverviewPage.vue CHANGED
@@ -17,9 +17,9 @@ import { DOCS } from './docs.ts'
17
17
  <template>
18
18
  <div class="stack">
19
19
  <header class="hero">
20
- <helix-text emphasis="muted" variant="label">Data view</helix-text>
21
- <helix-text as="h1" variant="heading">Roster</helix-text>
22
- <helix-text as="p" class="lede" emphasis="muted" variant="body">
20
+ <helix-text emphasis="muted" scale="label">Data view</helix-text>
21
+ <helix-text as="h1" scale="heading">Roster</helix-text>
22
+ <helix-text as="p" class="lede" emphasis="muted" scale="body">
23
23
  Twelve people from a local module. Sort a column, turn a page, or tick a row and watch the
24
24
  rule in <helix-code>src/app.css</helix-code> paint it.
25
25
  </helix-text>
@@ -64,13 +64,13 @@ import { DOCS } from './docs.ts'
64
64
 
65
65
  <!-- The footer is a row across the table: anything you slot goes at the
66
66
  start, and the table's own pagination sits at the end. -->
67
- <helix-text emphasis="muted" slot="footer" variant="caption">
67
+ <helix-text emphasis="muted" slot="footer" scale="caption">
68
68
  {{ members.length }} people
69
69
  </helix-text>
70
70
  </helix-data-table>
71
71
 
72
72
  <!-- A footnote to the table, so it takes the section's gap. -->
73
- <helix-text as="p" emphasis="muted" variant="caption">
73
+ <helix-text as="p" emphasis="muted" scale="caption">
74
74
  Filtering, column reordering, resizing, virtualized rows, and a server mode for large
75
75
  results are on
76
76
  <a data-link :href="DOCS.table">the component's own page</a>.
package/templates/vue-vite/src/SignupForm.vue CHANGED
@@ -57,9 +57,9 @@ const dismiss = (id: number) => {
57
57
  <template>
58
58
  <div class="stack">
59
59
  <header class="hero">
60
- <helix-text emphasis="muted" variant="label">Form</helix-text>
61
- <helix-text as="h1" variant="heading">Join the roster</helix-text>
62
- <helix-text as="p" class="lede" emphasis="muted" variant="body">
60
+ <helix-text emphasis="muted" scale="label">Form</helix-text>
61
+ <helix-text as="h1" scale="heading">Join the roster</helix-text>
62
+ <helix-text as="p" class="lede" emphasis="muted" scale="body">
63
63
  Five controls, and a <helix-code>&lt;form&gt;</helix-code> reads every one of them the way
64
64
  it reads an <helix-code>input</helix-code>.
65
65
  </helix-text>
@@ -112,13 +112,13 @@ const dismiss = (id: number) => {
112
112
  The form posts nothing. Submit it, and a message shows exactly what a server would
113
113
  receive.
114
114
  </helix-callout>
115
- <helix-text as="h2" variant="title">What the form shows</helix-text>
116
- <helix-text as="p" emphasis="muted" variant="body">
115
+ <helix-text as="h2" scale="title">What the form shows</helix-text>
116
+ <helix-text as="p" emphasis="muted" scale="body">
117
117
  Every control is a form-associated custom element, so the submit reads them all with
118
118
  <helix-code>new FormData(form)</helix-code>. Reset the form and they all go back,
119
119
  the way an <helix-code>input</helix-code> does.
120
120
  </helix-text>
121
- <helix-text as="p" emphasis="muted" variant="body">
121
+ <helix-text as="p" emphasis="muted" scale="body">
122
122
  Leave the email wrong and the browser shows its own message, in your language. Handle is
123
123
  the controlled field: the page refuses each change and writes back a cleaned value.
124
124
  </helix-text>
@@ -140,8 +140,8 @@ const dismiss = (id: number) => {
140
140
  @helix-dismiss="dismiss(message.id)"
141
141
  >
142
142
  <helix-flex direction="column" gap="2xs">
143
- <helix-text variant="body-strong">Read by the form</helix-text>
144
- <helix-text variant="code">{{ message.text }}</helix-text>
143
+ <helix-text scale="body-strong">Read by the form</helix-text>
144
+ <helix-text scale="code">{{ message.text }}</helix-text>
145
145
  </helix-flex>
146
146
  </helix-toast-item>
147
147
  </helix-toast>
package/templates/vue-vite/src/SiteHeader.vue CHANGED
@@ -43,7 +43,7 @@ const cycle = () => {
43
43
  destination in the bar saying the same thing. It names the library the
44
44
  starter is built on, and it is the place for your own name or logo. -->
45
45
  <a class="wordmark" data-link="quiet" href="#/" slot="start">
46
- <helix-text variant="body-strong">Helix</helix-text>
46
+ <helix-text scale="body-strong">Helix</helix-text>
47
47
  </a>
48
48
 
49
49
  <!-- The links are yours. Navigation owns the marker that travels between