@fusion.dev/helix-templates 0.228.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 (32) hide show
  1. package/package.json +1 -1
  2. package/templates/angular/angular.json +1 -1
  3. package/templates/angular/src/app/landing.html +14 -14
  4. package/templates/angular/src/app/overview.html +5 -5
  5. package/templates/angular/src/app/signup-form.html +8 -8
  6. package/templates/angular/src/app/site-header.html +1 -1
  7. package/templates/angular/src/app.css +17 -3
  8. package/templates/react-nextjs/app/app.css +17 -3
  9. package/templates/react-nextjs/app/landing.tsx +14 -14
  10. package/templates/react-nextjs/app/overview.tsx +5 -5
  11. package/templates/react-nextjs/app/signup-form.tsx +8 -8
  12. package/templates/react-nextjs/app/site-header.tsx +1 -1
  13. package/templates/react-vite/src/app.css +17 -3
  14. package/templates/react-vite/src/landing.tsx +14 -14
  15. package/templates/react-vite/src/overview.tsx +5 -5
  16. package/templates/react-vite/src/signup-form.tsx +8 -8
  17. package/templates/react-vite/src/site-header.tsx +1 -1
  18. package/templates/solid-vite/src/app.css +17 -3
  19. package/templates/solid-vite/src/landing.tsx +14 -14
  20. package/templates/solid-vite/src/overview.tsx +5 -5
  21. package/templates/solid-vite/src/signup-form.tsx +8 -8
  22. package/templates/solid-vite/src/site-header.tsx +1 -1
  23. package/templates/svelte-vite/src/Landing.svelte +14 -14
  24. package/templates/svelte-vite/src/Overview.svelte +5 -5
  25. package/templates/svelte-vite/src/SignupForm.svelte +8 -8
  26. package/templates/svelte-vite/src/SiteHeader.svelte +1 -1
  27. package/templates/svelte-vite/src/app.css +17 -3
  28. package/templates/vue-vite/src/LandingPage.vue +14 -14
  29. package/templates/vue-vite/src/OverviewPage.vue +5 -5
  30. package/templates/vue-vite/src/SignupForm.vue +8 -8
  31. package/templates/vue-vite/src/SiteHeader.vue +1 -1
  32. package/templates/vue-vite/src/app.css +17 -3
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.228.0",
4
+ "version": "0.229.1",
5
5
  "license": "MIT",
6
6
  "author": "Fusion Development Group",
7
7
  "repository": {
package/templates/angular/angular.json CHANGED
@@ -25,7 +25,7 @@
25
25
  "budgets": [
26
26
  {
27
27
  "maximumError": "5MB",
28
- "maximumWarning": "2MB",
28
+ "maximumWarning": "3MB",
29
29
  "type": "initial"
30
30
  }
31
31
  ],
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" data-layer [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,35 +40,35 @@
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
47
47
  is neither valid nor reachable. -->
48
48
  <div class="features">
49
- <a class="feature" data-card [href]="docs.elements">
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>
57
57
  </a>
58
- <a class="feature" data-card [href]="docs.tokens">
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>
66
66
  </a>
67
- <a class="feature" data-card [href]="docs.parts">
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/angular/src/app.css CHANGED
@@ -43,10 +43,15 @@
43
43
  *
44
44
  * `flex-grow` gives the spare height to the page, and the footer keeps its own.
45
45
  */
46
+ :root {
47
+ --page-measure: 56rem;
48
+ }
49
+
46
50
  .page {
47
51
  flex-grow: 1;
52
+ inline-size: 100%;
48
53
  margin-inline: auto;
49
- max-inline-size: 56rem;
54
+ max-inline-size: var(--page-measure);
50
55
  padding-block: var(--helix-space-2xl) var(--helix-space-3xl);
51
56
  padding-inline: var(--helix-space-lg);
52
57
  }
@@ -60,7 +65,7 @@
60
65
  */
61
66
  helix-app-header {
62
67
  --app-header-border-color: var(--helix-color-border);
63
- --app-header-max-inline-size: 56rem;
68
+ --app-header-max-inline-size: var(--page-measure);
64
69
  }
65
70
 
66
71
  /* The wordmark, a word for now, in the foreground: a quiet link is muted until
@@ -296,7 +301,7 @@ helix-app-header {
296
301
  gap: var(--helix-space-md);
297
302
  justify-content: space-between;
298
303
  margin-inline: auto;
299
- max-inline-size: 56rem;
304
+ max-inline-size: var(--page-measure);
300
305
  padding-block: var(--helix-space-lg);
301
306
  padding-inline: var(--helix-space-lg);
302
307
  }
@@ -326,6 +331,10 @@ helix-app-header {
326
331
  .footer-row {
327
332
  padding-inline: var(--helix-space-md);
328
333
  }
334
+
335
+ helix-app-header {
336
+ --app-header-padding: var(--helix-space-md);
337
+ }
329
338
  }
330
339
 
331
340
  /*
@@ -354,3 +363,8 @@ helix-data-table::part(select-selected) {
354
363
  helix-data-table::part(cell-selected) {
355
364
  font-weight: var(--helix-weight-semibold);
356
365
  }
366
+
367
+ /* A path in a sentence stays whole. */
368
+ helix-code {
369
+ white-space: nowrap;
370
+ }
package/templates/react-nextjs/app/app.css CHANGED
@@ -43,10 +43,15 @@
43
43
  *
44
44
  * `flex-grow` gives the spare height to the page, and the footer keeps its own.
45
45
  */
46
+ :root {
47
+ --page-measure: 56rem;
48
+ }
49
+
46
50
  .page {
47
51
  flex-grow: 1;
52
+ inline-size: 100%;
48
53
  margin-inline: auto;
49
- max-inline-size: 56rem;
54
+ max-inline-size: var(--page-measure);
50
55
  padding-block: var(--helix-space-2xl) var(--helix-space-3xl);
51
56
  padding-inline: var(--helix-space-lg);
52
57
  }
@@ -60,7 +65,7 @@
60
65
  */
61
66
  helix-app-header {
62
67
  --app-header-border-color: var(--helix-color-border);
63
- --app-header-max-inline-size: 56rem;
68
+ --app-header-max-inline-size: var(--page-measure);
64
69
  }
65
70
 
66
71
  /* The wordmark, a word for now, in the foreground: a quiet link is muted until
@@ -296,7 +301,7 @@ helix-app-header {
296
301
  gap: var(--helix-space-md);
297
302
  justify-content: space-between;
298
303
  margin-inline: auto;
299
- max-inline-size: 56rem;
304
+ max-inline-size: var(--page-measure);
300
305
  padding-block: var(--helix-space-lg);
301
306
  padding-inline: var(--helix-space-lg);
302
307
  }
@@ -326,6 +331,10 @@ helix-app-header {
326
331
  .footer-row {
327
332
  padding-inline: var(--helix-space-md);
328
333
  }
334
+
335
+ helix-app-header {
336
+ --app-header-padding: var(--helix-space-md);
337
+ }
329
338
  }
330
339
 
331
340
  /*
@@ -354,3 +363,8 @@ helix-data-table::part(select-selected) {
354
363
  helix-data-table::part(cell-selected) {
355
364
  font-weight: var(--helix-weight-semibold);
356
365
  }
366
+
367
+ /* A path in a sentence stays whole. */
368
+ helix-code {
369
+ white-space: nowrap;
370
+ }
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" data-layer 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
@@ -83,41 +83,41 @@ export function Landing() {
83
83
  and leaves focus alone. Nothing inside may be interactive, since a
84
84
  link inside a link is neither valid nor reachable. */}
85
85
  <div className="features">
86
- <a className="feature" data-card href={DOCS.elements}>
86
+ <a data-card href={DOCS.elements}>
87
87
  <helix-card separation="outlined">
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>
98
98
  </a>
99
- <a className="feature" data-card href={DOCS.tokens}>
99
+ <a data-card href={DOCS.tokens}>
100
100
  <helix-card separation="outlined">
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>
111
111
  </a>
112
- <a className="feature" data-card href={DOCS.parts}>
112
+ <a data-card href={DOCS.parts}>
113
113
  <helix-card separation="outlined">
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/app.css CHANGED
@@ -43,10 +43,15 @@
43
43
  *
44
44
  * `flex-grow` gives the spare height to the page, and the footer keeps its own.
45
45
  */
46
+ :root {
47
+ --page-measure: 56rem;
48
+ }
49
+
46
50
  .page {
47
51
  flex-grow: 1;
52
+ inline-size: 100%;
48
53
  margin-inline: auto;
49
- max-inline-size: 56rem;
54
+ max-inline-size: var(--page-measure);
50
55
  padding-block: var(--helix-space-2xl) var(--helix-space-3xl);
51
56
  padding-inline: var(--helix-space-lg);
52
57
  }
@@ -60,7 +65,7 @@
60
65
  */
61
66
  helix-app-header {
62
67
  --app-header-border-color: var(--helix-color-border);
63
- --app-header-max-inline-size: 56rem;
68
+ --app-header-max-inline-size: var(--page-measure);
64
69
  }
65
70
 
66
71
  /* The wordmark, a word for now, in the foreground: a quiet link is muted until
@@ -296,7 +301,7 @@ helix-app-header {
296
301
  gap: var(--helix-space-md);
297
302
  justify-content: space-between;
298
303
  margin-inline: auto;
299
- max-inline-size: 56rem;
304
+ max-inline-size: var(--page-measure);
300
305
  padding-block: var(--helix-space-lg);
301
306
  padding-inline: var(--helix-space-lg);
302
307
  }
@@ -326,6 +331,10 @@ helix-app-header {
326
331
  .footer-row {
327
332
  padding-inline: var(--helix-space-md);
328
333
  }
334
+
335
+ helix-app-header {
336
+ --app-header-padding: var(--helix-space-md);
337
+ }
329
338
  }
330
339
 
331
340
  /*
@@ -354,3 +363,8 @@ helix-data-table::part(select-selected) {
354
363
  helix-data-table::part(cell-selected) {
355
364
  font-weight: var(--helix-weight-semibold);
356
365
  }
366
+
367
+ /* A path in a sentence stays whole. */
368
+ helix-code {
369
+ white-space: nowrap;
370
+ }
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" data-layer 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
@@ -83,41 +83,41 @@ export function Landing() {
83
83
  and leaves focus alone. Nothing inside may be interactive, since a
84
84
  link inside a link is neither valid nor reachable. */}
85
85
  <div className="features">
86
- <a className="feature" data-card href={DOCS.elements}>
86
+ <a data-card href={DOCS.elements}>
87
87
  <helix-card separation="outlined">
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>
98
98
  </a>
99
- <a className="feature" data-card href={DOCS.tokens}>
99
+ <a data-card href={DOCS.tokens}>
100
100
  <helix-card separation="outlined">
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>
111
111
  </a>
112
- <a className="feature" data-card href={DOCS.parts}>
112
+ <a data-card href={DOCS.parts}>
113
113
  <helix-card separation="outlined">
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}>