@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/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/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/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" data-layer 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
@@ -80,41 +80,41 @@ export function Landing() {
80
80
  and leaves focus alone. Nothing inside may be interactive, since a
81
81
  link inside a link is neither valid nor reachable. */}
82
82
  <div class="features">
83
- <a class="feature" data-card href={DOCS.elements}>
83
+ <a data-card href={DOCS.elements}>
84
84
  <helix-card separation="outlined">
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>
95
95
  </a>
96
- <a class="feature" data-card href={DOCS.tokens}>
96
+ <a data-card href={DOCS.tokens}>
97
97
  <helix-card separation="outlined">
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>
108
108
  </a>
109
- <a class="feature" data-card href={DOCS.parts}>
109
+ <a data-card href={DOCS.parts}>
110
110
  <helix-card separation="outlined">
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" data-layer 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,35 +62,35 @@
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
69
69
  is neither valid nor reachable. -->
70
70
  <div class="features">
71
- <a class="feature" data-card href={DOCS.elements}>
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>
79
79
  </a>
80
- <a class="feature" data-card href={DOCS.tokens}>
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>
88
88
  </a>
89
- <a class="feature" data-card href={DOCS.parts}>
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/svelte-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/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" data-layer :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,35 +63,35 @@ 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
70
70
  is neither valid nor reachable. -->
71
71
  <div class="features">
72
- <a class="feature" data-card :href="DOCS.elements">
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>
80
80
  </a>
81
- <a class="feature" data-card :href="DOCS.tokens">
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>
89
89
  </a>
90
- <a class="feature" data-card :href="DOCS.parts">
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>.