@fusion.dev/helix-templates 0.140.0 → 0.141.0

package/dist/index.js

@@ -2,37 +2,37 @@ export const templates = [
     {
         description: 'React and TypeScript on Vite. The shortest path to a running app.',
         id: 'react-vite',
-        named: ['index.html', 'package.json', 'src/site-header.tsx'],
+        named: ['index.html', 'package.json'],
         title: 'React (Vite)',
     },
     {
         description: 'React and TypeScript on the Next.js App Router, with the three pages as real routes.',
         id: 'react-nextjs',
-        named: ['app/layout.tsx', 'app/site-header.tsx', 'package.json'],
+        named: ['app/layout.tsx', 'package.json'],
         title: 'React (Next.js)',
     },
     {
         description: 'Vue and TypeScript on Vite.',
         id: 'vue-vite',
-        named: ['index.html', 'package.json', 'src/SiteHeader.vue'],
+        named: ['index.html', 'package.json'],
         title: 'Vue (Vite)',
     },
     {
         description: 'Angular and TypeScript on the Angular CLI.',
         id: 'angular',
-        named: ['angular.json', 'package.json', 'src/app/site-header.html', 'src/index.html'],
+        named: ['angular.json', 'package.json', 'src/index.html'],
         title: 'Angular',
     },
     {
         description: 'Svelte and TypeScript on Vite.',
         id: 'svelte-vite',
-        named: ['index.html', 'package.json', 'src/SiteHeader.svelte'],
+        named: ['index.html', 'package.json'],
         title: 'Svelte (Vite)',
     },
     {
         description: 'Solid and TypeScript on Vite.',
         id: 'solid-vite',
-        named: ['index.html', 'package.json', 'src/site-header.tsx'],
+        named: ['index.html', 'package.json'],
         title: 'Solid (Vite)',
     },
 ];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-templates",
   "description": "Starter templates for Helix, as data. Read by `helix new` and by `npm create @fusion.dev/helix-app`.",
-  "version": "0.140.0",
+  "version": "0.141.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {

package/templates/angular/src/app/landing.html

@@ -16,12 +16,13 @@
     </div>
   </div>
 
-  <!-- **The library at work, on the first screen.** The figures are the roster
-       the data view draws, read from the same module, so the panel is the app
-       itself, on glass over the light. -->
+  <!-- **The library at work, on the first screen.** The figures are the
+       roster the data view draws, read from the same module, so the panel
+       is the app itself, on glass over the light. It has no link of its own:
+       the button beside it goes to the same page. -->
   <helix-card class="specimen" material="glass" separation="outlined">
-    <helix-text as="h2" slot="header" variant="title">The roster, in three figures</helix-text>
-    <helix-stat-group divided>
+    <helix-text as="h2" slot="header" variant="title">Roster</helix-text>
+    <helix-stat-group>
       <helix-stat>
         {{ roster.people }}
         <span slot="label">People</span>
@@ -35,7 +36,6 @@
         <span slot="label">Reviews</span>
       </helix-stat>
     </helix-stat-group>
-    <a data-link href="#/overview" slot="footer">Open the data view</a>
   </helix-card>
 </header>
 

package/templates/angular/src/app/signup-form.html

@@ -49,10 +49,10 @@
 
   <aside class="notes">
     <!-- The one fact you need before typing your name into a page you have
-         had for five minutes, so it is a callout. `tone` is the meaning,
-         and the component draws it with a tint and a bar on the inline
-         start, so it survives being read in grayscale. -->
-    <helix-callout tone="info">
+         had for five minutes, so it is a callout. `neutral` is a note that
+         reports no status, drawn in the muted ink with a bar on the inline
+         start, so it stays in the palette, ink or brand. -->
+    <helix-callout tone="neutral">
       The form posts nothing. Submit it, and a message shows exactly what a server would receive.
     </helix-callout>
     <helix-text as="h2" variant="title">What the form shows</helix-text>

package/templates/angular/src/app/site-footer.html

@@ -1,10 +1,7 @@
 <div class="footer-row">
-  <helix-text as="p" emphasis="subtle" variant="caption">
-    Every component here has a page, with its API, its parts, and its examples.
-  </helix-text>
   <div class="footer-links">
-    <a data-link="subtle" [href]="docs.gallery">Components</a>
-    <a data-link="subtle" [href]="docs.elements">Documentation</a>
-    <a data-link="subtle" [href]="docs.angular">Angular</a>
+    <a data-link="quiet" [href]="docs.gallery">Components</a>
+    <a data-link="quiet" [href]="docs.elements">Documentation</a>
+    <a data-link="quiet" [href]="docs.angular">Angular</a>
   </div>
 </div>

package/templates/angular/src/app/site-footer.ts

@@ -8,8 +8,8 @@ import { DOCS } from './docs'
  * and a caption, which on a tall window left the bottom third of the screen
  * empty. The footer is also where the links you want once belong.
  *
- * `data-link="subtle"` reads as body text until it is hovered, which suits a
- * row of links under a rule.
+ * `data-link="quiet"` sets a link in the muted ink with no underline, and it
+ * takes the foreground on hover, which suits a row of links under a rule.
  */
 @Component({
   host: { class: 'site-footer' },

package/templates/angular/src/app/site-header.html

@@ -1,12 +1,9 @@
 <helix-app-header material="glass" sticky>
   <!-- The wordmark is the way back to the first page, so there is no third
-       destination in the bar saying the same thing. It is also the only name
-       of the project on the screen. The mark is a placeholder for your own,
-       drawn in `--helix-color-brand-mark`, the token for the brand as a
-       graphic. -->
+       destination in the bar saying the same thing. It names the library the
+       starter is built on, and it is the place for your own name or logo. -->
   <a class="wordmark" data-link="quiet" href="#/" slot="start">
-    <helix-icon name="cube"></helix-icon>
-    <helix-text variant="body-strong">__PROJECT_NAME__</helix-text>
+    <helix-text variant="body-strong">Helix</helix-text>
   </a>
 
   <!-- The links are yours. Navigation owns the marker that travels between

package/templates/angular/src/app.css

@@ -6,10 +6,14 @@
  * open. Everything below is a Helix token or a documented hook, so a theme
  * changes it, and both color modes follow from one copy.
  *
- * **Color appears in two places, and both are named.** The wordmark takes
- * `--helix-color-brand-mark`, the token for the brand as a graphic, and a
- * chosen row takes `--helix-color-primary-subtle` through the parts the table
- * publishes. Everywhere else the page is ink on the background, and the
+ * **Your brand color is one line.** With no brand set, Helix draws in ink,
+ * near-black in light mode and near-white in dark. Set `--helix-seed-brand` on
+ * `:root`, and every token follows it.
+ *
+ * **Color appears in two places, and both are named.** Each tile's icon takes
+ * `--helix-color-primary` on `--helix-color-primary-subtle`, and a chosen row
+ * takes `--helix-color-primary-subtle` through the parts the table publishes.
+ * Everywhere else the page is the foreground on the background, and the
  * components carry their own color.
  */
 
@@ -59,20 +63,18 @@ helix-app-header {
   --app-header-max-inline-size: 56rem;
 }
 
-/* The mark beside the project's name, the one graphic on the page and the
-   reason `--helix-color-brand-mark` exists. WCAG asks 3:1 of a graphic and 4.5:1
-   of text, so a mark can sit closer to a theme's brand color than any text
-   color can. Swap the glyph, or replace the whole element with your own logo. */
+/* The wordmark, a word for now, in the foreground: a quiet link is muted until
+   it is pointed at, and the name is the strongest thing in the bar. Give it your
+   own name, or put your logo beside it in `--helix-color-brand-mark`, the token
+   for the brand as a graphic: WCAG asks 3:1 of a graphic and 4.5:1 of text, so a
+   mark can sit closer to a theme's brand color than any text color can. */
 .wordmark {
   align-items: center;
+  color: var(--helix-color-foreground);
   display: inline-flex;
   gap: var(--helix-space-xs);
 }
 
-.wordmark helix-icon {
-  color: var(--helix-color-brand-mark);
-}
-
 /*
  * One rhythm between the blocks of a page, so no page sets its own.
  *
@@ -185,12 +187,11 @@ helix-app-header {
  * **The panel is the library at work**, so all it needs from here is room. Two
  * documented hooks: the figures come down a step from the display size, which
  * suits one figure on its own and is too loud for three in an 18rem column, and
- * the gap around the rule between them comes in from `2xl`, which `divided`
- * doubles, leaving no room for a number.
+ * the gap between them is wide enough to set them apart with no rule.
  */
 .specimen {
-  --stat-group-gap: var(--helix-space-md);
-  --stat-value-size: var(--helix-text-xl);
+  --stat-group-gap: var(--helix-space-xl);
+  --stat-value-size: var(--helix-text-2xl);
 }
 
 /* A section is its heading and its one block, closer together than two sections
@@ -341,9 +342,9 @@ helix-app-header {
  * left of every chosen row.
  *
  * The values are still the library's, so a theme carries them like everything
- * else. `primary-subtle`, because `primary-surface` is the solid accent a
- * button stands on, made for white text, so a row painted with it would put the
- * table's own ink on a saturated fill.
+ * else. `primary-subtle`, because `primary-surface` is the solid fill a
+ * button stands on, made for its own label, so a row painted with it would put
+ * the table's own ink on a solid fill.
  */
 helix-data-table::part(cell-selected),
 helix-data-table::part(select-selected) {

package/templates/react-nextjs/app/app.css

@@ -6,10 +6,14 @@
  * open. Everything below is a Helix token or a documented hook, so a theme
  * changes it, and both color modes follow from one copy.
  *
- * **Color appears in two places, and both are named.** The wordmark takes
- * `--helix-color-brand-mark`, the token for the brand as a graphic, and a
- * chosen row takes `--helix-color-primary-subtle` through the parts the table
- * publishes. Everywhere else the page is ink on the background, and the
+ * **Your brand color is one line.** With no brand set, Helix draws in ink,
+ * near-black in light mode and near-white in dark. Set `--helix-seed-brand` on
+ * `:root`, and every token follows it.
+ *
+ * **Color appears in two places, and both are named.** Each tile's icon takes
+ * `--helix-color-primary` on `--helix-color-primary-subtle`, and a chosen row
+ * takes `--helix-color-primary-subtle` through the parts the table publishes.
+ * Everywhere else the page is the foreground on the background, and the
  * components carry their own color.
  */
 
@@ -59,20 +63,18 @@ helix-app-header {
   --app-header-max-inline-size: 56rem;
 }
 
-/* The mark beside the project's name, the one graphic on the page and the
-   reason `--helix-color-brand-mark` exists. WCAG asks 3:1 of a graphic and 4.5:1
-   of text, so a mark can sit closer to a theme's brand color than any text
-   color can. Swap the glyph, or replace the whole element with your own logo. */
+/* The wordmark, a word for now, in the foreground: a quiet link is muted until
+   it is pointed at, and the name is the strongest thing in the bar. Give it your
+   own name, or put your logo beside it in `--helix-color-brand-mark`, the token
+   for the brand as a graphic: WCAG asks 3:1 of a graphic and 4.5:1 of text, so a
+   mark can sit closer to a theme's brand color than any text color can. */
 .wordmark {
   align-items: center;
+  color: var(--helix-color-foreground);
   display: inline-flex;
   gap: var(--helix-space-xs);
 }
 
-.wordmark helix-icon {
-  color: var(--helix-color-brand-mark);
-}
-
 /*
  * One rhythm between the blocks of a page, so no page sets its own.
  *
@@ -185,12 +187,11 @@ helix-app-header {
  * **The panel is the library at work**, so all it needs from here is room. Two
  * documented hooks: the figures come down a step from the display size, which
  * suits one figure on its own and is too loud for three in an 18rem column, and
- * the gap around the rule between them comes in from `2xl`, which `divided`
- * doubles, leaving no room for a number.
+ * the gap between them is wide enough to set them apart with no rule.
  */
 .specimen {
-  --stat-group-gap: var(--helix-space-md);
-  --stat-value-size: var(--helix-text-xl);
+  --stat-group-gap: var(--helix-space-xl);
+  --stat-value-size: var(--helix-text-2xl);
 }
 
 /* A section is its heading and its one block, closer together than two sections
@@ -341,9 +342,9 @@ helix-app-header {
  * left of every chosen row.
  *
  * The values are still the library's, so a theme carries them like everything
- * else. `primary-subtle`, because `primary-surface` is the solid accent a
- * button stands on, made for white text, so a row painted with it would put the
- * table's own ink on a saturated fill.
+ * else. `primary-subtle`, because `primary-surface` is the solid fill a
+ * button stands on, made for its own label, so a row painted with it would put
+ * the table's own ink on a solid fill.
  */
 helix-data-table::part(cell-selected),
 helix-data-table::part(select-selected) {

package/templates/react-nextjs/app/landing.tsx

@@ -53,12 +53,11 @@ export function Landing() {
 
         {/* **The library at work, on the first screen.** The figures are the
             roster the data view draws, read from the same module, so the panel
-            is the app itself, on glass over the light. */}
+            is the app itself, on glass over the light. It has no link of its own:
+            the button beside it goes to the same page. */}
         <helix-card className="specimen" material="glass" separation="outlined">
-          <helix-text as="h2" slot="header" variant="title">
-            The roster, in three figures
-          </helix-text>
-          <helix-stat-group divided>
+          <helix-text as="h2" slot="header" variant="title">Roster</helix-text>
+          <helix-stat-group>
             <helix-stat>
               {roster.people}
               <span slot="label">People</span>
@@ -72,9 +71,6 @@ export function Landing() {
               <span slot="label">Reviews</span>
             </helix-stat>
           </helix-stat-group>
-          <Link data-link href="/overview" slot="footer">
-            Open the data view
-          </Link>
         </helix-card>
       </header>
 

package/templates/react-nextjs/app/signup-form.tsx

@@ -114,11 +114,10 @@ export function SignupForm() {
 
         <aside className="notes">
           {/* The one fact you need before typing your name into a page you have
-              had for five minutes, so it is a callout. `tone` is the meaning,
-              and the component draws it with a tint mixed from the status color
-              and a bar on the inline start, so it survives being read in
-              grayscale. */}
-          <helix-callout tone="info">
+              had for five minutes, so it is a callout. `neutral` is a note that
+              reports no status, drawn in the muted ink with a bar on the inline
+              start, so it stays in the palette, ink or brand. */}
+          <helix-callout tone="neutral">
             The form posts nothing. Submit it, and a message shows exactly what a server would
             receive.
           </helix-callout>

package/templates/react-nextjs/app/site-footer.tsx

@@ -8,24 +8,21 @@ import { DOCS } from './docs'
  * empty, as if the layout had run out. The footer is also where the links you
  * want once belong, so the landing page no longer carries them.
  *
- * `data-link="subtle"` reads as body text until it is hovered, which suits a
- * row of links under a rule.
+ * `data-link="quiet"` sets a link in the muted ink with no underline, and it
+ * takes the foreground on hover, which suits a row of links under a rule.
  */
 export function SiteFooter() {
   return (
     <footer className="site-footer">
       <div className="footer-row">
-        <helix-text as="p" emphasis="subtle" variant="caption">
-          Every component here has a page, with its API, its parts, and its examples.
-        </helix-text>
         <div className="footer-links">
-          <a data-link="subtle" href={DOCS.gallery}>
+          <a data-link="quiet" href={DOCS.gallery}>
             Components
           </a>
-          <a data-link="subtle" href={DOCS.elements}>
+          <a data-link="quiet" href={DOCS.elements}>
             Documentation
           </a>
-          <a data-link="subtle" href={DOCS.react}>
+          <a data-link="quiet" href={DOCS.react}>
             React
           </a>
         </div>

package/templates/react-nextjs/app/site-header.tsx

@@ -53,14 +53,10 @@ export function SiteHeader() {
     <helix-app-header material="glass" sticky>
       {/* The wordmark is the way back to the first page, as a wordmark usually
           is, so there is no third destination in the bar saying the same thing.
-          It is also the only name of the project on the screen: the landing
-          page leads with what the starter is.
-
-          The mark is a placeholder for your own, and it is drawn in
-          `--helix-color-brand-mark`, the token for the brand as a graphic. */}
+          It names the library the starter is built on, and it is the place for
+          your own name or logo. */}
       <Link className="wordmark" data-link="quiet" href="/" slot="start">
-        <helix-icon name="cube" />
-        <helix-text variant="body-strong">__PROJECT_NAME__</helix-text>
+        <helix-text variant="body-strong">Helix</helix-text>
       </Link>
 
       {/* The links are yours. Navigation owns the marker that travels between

package/templates/react-nextjs/tsconfig.json

@@ -1,6 +1,8 @@
 {
   "compilerOptions": {
-    "jsx": "preserve",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
     "lib": [
       "DOM",
       "DOM.Iterable",
@@ -27,6 +29,7 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
     "helix-jsx.d.ts"
   ],
   "exclude": [

package/templates/react-vite/src/app.css

@@ -6,10 +6,14 @@
  * open. Everything below is a Helix token or a documented hook, so a theme
  * changes it, and both color modes follow from one copy.
  *
- * **Color appears in two places, and both are named.** The wordmark takes
- * `--helix-color-brand-mark`, the token for the brand as a graphic, and a
- * chosen row takes `--helix-color-primary-subtle` through the parts the table
- * publishes. Everywhere else the page is ink on the background, and the
+ * **Your brand color is one line.** With no brand set, Helix draws in ink,
+ * near-black in light mode and near-white in dark. Set `--helix-seed-brand` on
+ * `:root`, and every token follows it.
+ *
+ * **Color appears in two places, and both are named.** Each tile's icon takes
+ * `--helix-color-primary` on `--helix-color-primary-subtle`, and a chosen row
+ * takes `--helix-color-primary-subtle` through the parts the table publishes.
+ * Everywhere else the page is the foreground on the background, and the
  * components carry their own color.
  */
 
@@ -59,20 +63,18 @@ helix-app-header {
   --app-header-max-inline-size: 56rem;
 }
 
-/* The mark beside the project's name, the one graphic on the page and the
-   reason `--helix-color-brand-mark` exists. WCAG asks 3:1 of a graphic and 4.5:1
-   of text, so a mark can sit closer to a theme's brand color than any text
-   color can. Swap the glyph, or replace the whole element with your own logo. */
+/* The wordmark, a word for now, in the foreground: a quiet link is muted until
+   it is pointed at, and the name is the strongest thing in the bar. Give it your
+   own name, or put your logo beside it in `--helix-color-brand-mark`, the token
+   for the brand as a graphic: WCAG asks 3:1 of a graphic and 4.5:1 of text, so a
+   mark can sit closer to a theme's brand color than any text color can. */
 .wordmark {
   align-items: center;
+  color: var(--helix-color-foreground);
   display: inline-flex;
   gap: var(--helix-space-xs);
 }
 
-.wordmark helix-icon {
-  color: var(--helix-color-brand-mark);
-}
-
 /*
  * One rhythm between the blocks of a page, so no page sets its own.
  *
@@ -185,12 +187,11 @@ helix-app-header {
  * **The panel is the library at work**, so all it needs from here is room. Two
  * documented hooks: the figures come down a step from the display size, which
  * suits one figure on its own and is too loud for three in an 18rem column, and
- * the gap around the rule between them comes in from `2xl`, which `divided`
- * doubles, leaving no room for a number.
+ * the gap between them is wide enough to set them apart with no rule.
  */
 .specimen {
-  --stat-group-gap: var(--helix-space-md);
-  --stat-value-size: var(--helix-text-xl);
+  --stat-group-gap: var(--helix-space-xl);
+  --stat-value-size: var(--helix-text-2xl);
 }
 
 /* A section is its heading and its one block, closer together than two sections
@@ -341,9 +342,9 @@ helix-app-header {
  * left of every chosen row.
  *
  * The values are still the library's, so a theme carries them like everything
- * else. `primary-subtle`, because `primary-surface` is the solid accent a
- * button stands on, made for white text, so a row painted with it would put the
- * table's own ink on a saturated fill.
+ * else. `primary-subtle`, because `primary-surface` is the solid fill a
+ * button stands on, made for its own label, so a row painted with it would put
+ * the table's own ink on a solid fill.
  */
 helix-data-table::part(cell-selected),
 helix-data-table::part(select-selected) {

package/templates/react-vite/src/landing.tsx

@@ -53,12 +53,11 @@ export function Landing() {
 
         {/* **The library at work, on the first screen.** The figures are the
             roster the data view draws, read from the same module, so the panel
-            is the app itself, on glass over the light. */}
+            is the app itself, on glass over the light. It has no link of its own:
+            the button beside it goes to the same page. */}
         <helix-card className="specimen" material="glass" separation="outlined">
-          <helix-text as="h2" slot="header" variant="title">
-            The roster, in three figures
-          </helix-text>
-          <helix-stat-group divided>
+          <helix-text as="h2" slot="header" variant="title">Roster</helix-text>
+          <helix-stat-group>
             <helix-stat>
               {roster.people}
               <span slot="label">People</span>
@@ -72,9 +71,6 @@ export function Landing() {
               <span slot="label">Reviews</span>
             </helix-stat>
           </helix-stat-group>
-          <Link data-link href="/overview" slot="footer">
-            Open the data view
-          </Link>
         </helix-card>
       </header>
 

package/templates/react-vite/src/signup-form.tsx

@@ -105,11 +105,10 @@ export function SignupForm() {
 
         <aside className="notes">
           {/* The one fact you need before typing your name into a page you have
-              had for five minutes, so it is a callout. `tone` is the meaning,
-              and the component draws it with a tint mixed from the status color
-              and a bar on the inline start, so it survives being read in
-              grayscale. */}
-          <helix-callout tone="info">
+              had for five minutes, so it is a callout. `neutral` is a note that
+              reports no status, drawn in the muted ink with a bar on the inline
+              start, so it stays in the palette, ink or brand. */}
+          <helix-callout tone="neutral">
             The form posts nothing. Submit it, and a message shows exactly what a server would
             receive.
           </helix-callout>

package/templates/react-vite/src/site-footer.tsx

@@ -8,24 +8,21 @@ import { DOCS } from './docs.js'
  * empty, as if the layout had run out. The footer is also where the links you
  * want once belong, so the landing page no longer carries them.
  *
- * `data-link="subtle"` reads as body text until it is hovered, which suits a
- * row of links under a rule.
+ * `data-link="quiet"` sets a link in the muted ink with no underline, and it
+ * takes the foreground on hover, which suits a row of links under a rule.
  */
 export function SiteFooter() {
   return (
     <footer className="site-footer">
       <div className="footer-row">
-        <helix-text as="p" emphasis="subtle" variant="caption">
-          Every component here has a page, with its API, its parts, and its examples.
-        </helix-text>
         <div className="footer-links">
-          <a data-link="subtle" href={DOCS.gallery}>
+          <a data-link="quiet" href={DOCS.gallery}>
             Components
           </a>
-          <a data-link="subtle" href={DOCS.elements}>
+          <a data-link="quiet" href={DOCS.elements}>
             Documentation
           </a>
-          <a data-link="subtle" href={DOCS.react}>
+          <a data-link="quiet" href={DOCS.react}>
             React
           </a>
         </div>

package/templates/react-vite/src/site-header.tsx

@@ -43,14 +43,10 @@ export function SiteHeader() {
     <helix-app-header material="glass" sticky>
       {/* The wordmark is the way back to the first page, as a wordmark usually
           is, so there is no third destination in the bar saying the same thing.
-          It is also the only name of the project on the screen: the landing
-          page leads with what the starter is.
-
-          The mark is a placeholder for your own, and it is drawn in
-          `--helix-color-brand-mark`, the token for the brand as a graphic. */}
+          It names the library the starter is built on, and it is the place for
+          your own name or logo. */}
       <Link className="wordmark" data-link="quiet" href="/" slot="start">
-        <helix-icon name="cube" />
-        <helix-text variant="body-strong">__PROJECT_NAME__</helix-text>
+        <helix-text variant="body-strong">Helix</helix-text>
       </Link>
 
       {/* The links are yours. Navigation owns the marker that travels between

package/templates/solid-vite/src/app.css

@@ -6,10 +6,14 @@
  * open. Everything below is a Helix token or a documented hook, so a theme
  * changes it, and both color modes follow from one copy.
  *
- * **Color appears in two places, and both are named.** The wordmark takes
- * `--helix-color-brand-mark`, the token for the brand as a graphic, and a
- * chosen row takes `--helix-color-primary-subtle` through the parts the table
- * publishes. Everywhere else the page is ink on the background, and the
+ * **Your brand color is one line.** With no brand set, Helix draws in ink,
+ * near-black in light mode and near-white in dark. Set `--helix-seed-brand` on
+ * `:root`, and every token follows it.
+ *
+ * **Color appears in two places, and both are named.** Each tile's icon takes
+ * `--helix-color-primary` on `--helix-color-primary-subtle`, and a chosen row
+ * takes `--helix-color-primary-subtle` through the parts the table publishes.
+ * Everywhere else the page is the foreground on the background, and the
  * components carry their own color.
  */
 
@@ -59,20 +63,18 @@ helix-app-header {
   --app-header-max-inline-size: 56rem;
 }
 
-/* The mark beside the project's name, the one graphic on the page and the
-   reason `--helix-color-brand-mark` exists. WCAG asks 3:1 of a graphic and 4.5:1
-   of text, so a mark can sit closer to a theme's brand color than any text
-   color can. Swap the glyph, or replace the whole element with your own logo. */
+/* The wordmark, a word for now, in the foreground: a quiet link is muted until
+   it is pointed at, and the name is the strongest thing in the bar. Give it your
+   own name, or put your logo beside it in `--helix-color-brand-mark`, the token
+   for the brand as a graphic: WCAG asks 3:1 of a graphic and 4.5:1 of text, so a
+   mark can sit closer to a theme's brand color than any text color can. */
 .wordmark {
   align-items: center;
+  color: var(--helix-color-foreground);
   display: inline-flex;
   gap: var(--helix-space-xs);
 }
 
-.wordmark helix-icon {
-  color: var(--helix-color-brand-mark);
-}
-
 /*
  * One rhythm between the blocks of a page, so no page sets its own.
  *
@@ -185,12 +187,11 @@ helix-app-header {
  * **The panel is the library at work**, so all it needs from here is room. Two
  * documented hooks: the figures come down a step from the display size, which
  * suits one figure on its own and is too loud for three in an 18rem column, and
- * the gap around the rule between them comes in from `2xl`, which `divided`
- * doubles, leaving no room for a number.
+ * the gap between them is wide enough to set them apart with no rule.
  */
 .specimen {
-  --stat-group-gap: var(--helix-space-md);
-  --stat-value-size: var(--helix-text-xl);
+  --stat-group-gap: var(--helix-space-xl);
+  --stat-value-size: var(--helix-text-2xl);
 }
 
 /* A section is its heading and its one block, closer together than two sections
@@ -341,9 +342,9 @@ helix-app-header {
  * left of every chosen row.
  *
  * The values are still the library's, so a theme carries them like everything
- * else. `primary-subtle`, because `primary-surface` is the solid accent a
- * button stands on, made for white text, so a row painted with it would put the
- * table's own ink on a saturated fill.
+ * else. `primary-subtle`, because `primary-surface` is the solid fill a
+ * button stands on, made for its own label, so a row painted with it would put
+ * the table's own ink on a solid fill.
  */
 helix-data-table::part(cell-selected),
 helix-data-table::part(select-selected) {

package/templates/solid-vite/src/landing.tsx

@@ -50,12 +50,11 @@ export function Landing() {
 
         {/* **The library at work, on the first screen.** The figures are the
             roster the data view draws, read from the same module, so the panel
-            is the app itself, on glass over the light. */}
+            is the app itself, on glass over the light. It has no link of its own:
+            the button beside it goes to the same page. */}
         <helix-card class="specimen" material="glass" separation="outlined">
-          <helix-text as="h2" slot="header" variant="title">
-            The roster, in three figures
-          </helix-text>
-          <helix-stat-group divided>
+          <helix-text as="h2" slot="header" variant="title">Roster</helix-text>
+          <helix-stat-group>
             <helix-stat>
               {roster.people}
               <span slot="label">People</span>
@@ -69,9 +68,6 @@ export function Landing() {
               <span slot="label">Reviews</span>
             </helix-stat>
           </helix-stat-group>
-          <a data-link href="#/overview" slot="footer">
-            Open the data view
-          </a>
         </helix-card>
       </header>
 

package/templates/solid-vite/src/signup-form.tsx

@@ -98,10 +98,10 @@ export function SignupForm() {
 
         <aside class="notes">
           {/* The one fact you need before typing your name into a page you have
-              had for five minutes, so it is a callout. `tone` is the meaning,
-              and the component draws it with a tint and a bar on the inline
-              start, so it survives being read in grayscale. */}
-          <helix-callout tone="info">
+              had for five minutes, so it is a callout. `neutral` is a note that
+              reports no status, drawn in the muted ink with a bar on the inline
+              start, so it stays in the palette, ink or brand. */}
+          <helix-callout tone="neutral">
             The form posts nothing. Submit it, and a message shows exactly what a server would
             receive.
           </helix-callout>

package/templates/solid-vite/src/site-footer.tsx

@@ -7,24 +7,21 @@ import { DOCS } from './docs.ts'
  * and a caption, which on a tall window left the bottom third of the screen
  * empty. The footer is also where the links you want once belong.
  *
- * `data-link="subtle"` reads as body text until it is hovered, which suits a
- * row of links under a rule.
+ * `data-link="quiet"` sets a link in the muted ink with no underline, and it
+ * takes the foreground on hover, which suits a row of links under a rule.
  */
 export function SiteFooter() {
   return (
     <footer class="site-footer">
       <div class="footer-row">
-        <helix-text as="p" emphasis="subtle" variant="caption">
-          Every component here has a page, with its API, its parts, and its examples.
-        </helix-text>
         <div class="footer-links">
-          <a data-link="subtle" href={DOCS.gallery}>
+          <a data-link="quiet" href={DOCS.gallery}>
             Components
           </a>
-          <a data-link="subtle" href={DOCS.elements}>
+          <a data-link="quiet" href={DOCS.elements}>
             Documentation
           </a>
-          <a data-link="subtle" href={DOCS.solid}>
+          <a data-link="quiet" href={DOCS.solid}>
             Solid
           </a>
         </div>

package/templates/solid-vite/src/site-header.tsx

@@ -40,13 +40,10 @@ export function SiteHeader() {
   return (
     <helix-app-header material="glass" sticky>
       {/* The wordmark is the way back to the first page, so there is no third
-          destination in the bar saying the same thing. It is also the only name
-          of the project on the screen. The mark is a placeholder for your own,
-          drawn in `--helix-color-brand-mark`, the token for the brand as a
-          graphic. */}
+          destination in the bar saying the same thing. It names the library the
+          starter is built on, and it is the place for your own name or logo. */}
       <a class="wordmark" data-link="quiet" href="#/" slot="start">
-        <helix-icon name="cube" />
-        <helix-text variant="body-strong">__PROJECT_NAME__</helix-text>
+        <helix-text variant="body-strong">Helix</helix-text>
       </a>
 
       {/* The links are yours. Navigation owns the marker that travels between

package/templates/svelte-vite/src/Landing.svelte

@@ -38,12 +38,13 @@
       </div>
     </div>
 
-    <!-- **The library at work, on the first screen.** The figures are the roster
-         the data view draws, read from the same module, so the panel is the app
-         itself, on glass over the light. -->
+    <!-- **The library at work, on the first screen.** The figures are the
+         roster the data view draws, read from the same module, so the panel
+         is the app itself, on glass over the light. It has no link of its own:
+         the button beside it goes to the same page. -->
     <helix-card class="specimen" material="glass" separation="outlined">
-      <helix-text as="h2" slot="header" variant="title">The roster, in three figures</helix-text>
-      <helix-stat-group divided>
+      <helix-text as="h2" slot="header" variant="title">Roster</helix-text>
+      <helix-stat-group>
         <helix-stat>
           {roster.people}
           <span slot="label">People</span>
@@ -57,7 +58,6 @@
           <span slot="label">Reviews</span>
         </helix-stat>
       </helix-stat-group>
-      <a data-link href="#/overview" slot="footer">Open the data view</a>
     </helix-card>
   </header>
 

package/templates/svelte-vite/src/SignupForm.svelte

@@ -105,10 +105,10 @@
 
     <aside class="notes">
       <!-- The one fact you need before typing your name into a page you have
-           had for five minutes, so it is a callout. `tone` is the meaning,
-           and the component draws it with a tint and a bar on the inline
-           start, so it survives being read in grayscale. -->
-      <helix-callout tone="info">
+           had for five minutes, so it is a callout. `neutral` is a note that
+           reports no status, drawn in the muted ink with a bar on the inline
+           start, so it stays in the palette, ink or brand. -->
+      <helix-callout tone="neutral">
         The form posts nothing. Submit it, and a message shows exactly what a server would receive.
       </helix-callout>
       <helix-text as="h2" variant="title">What the form shows</helix-text>

package/templates/svelte-vite/src/SiteFooter.svelte

@@ -5,8 +5,8 @@
   and a caption, which on a tall window left the bottom third of the screen
   empty. The footer is also where the links you want once belong.
 
-  `data-link="subtle"` reads as body text until it is hovered, which suits a
-  row of links under a rule.
+  `data-link="quiet"` sets a link in the muted ink with no underline, and it
+  takes the foreground on hover, which suits a row of links under a rule.
 -->
 <script lang="ts">
   import { DOCS } from './docs.ts'
@@ -14,13 +14,10 @@
 
 <footer class="site-footer">
   <div class="footer-row">
-    <helix-text as="p" emphasis="subtle" variant="caption">
-      Every component here has a page, with its API, its parts, and its examples.
-    </helix-text>
     <div class="footer-links">
-      <a data-link="subtle" href={DOCS.gallery}>Components</a>
-      <a data-link="subtle" href={DOCS.elements}>Documentation</a>
-      <a data-link="subtle" href={DOCS.svelte}>Svelte</a>
+      <a data-link="quiet" href={DOCS.gallery}>Components</a>
+      <a data-link="quiet" href={DOCS.elements}>Documentation</a>
+      <a data-link="quiet" href={DOCS.svelte}>Svelte</a>
     </div>
   </div>
 </footer>

package/templates/svelte-vite/src/SiteHeader.svelte

@@ -37,12 +37,10 @@
 
 <helix-app-header material="glass" sticky>
   <!-- The wordmark is the way back to the first page, so there is no third
-       destination in the bar saying the same thing. It is also the only name of
-       the project on the screen. The mark is a placeholder for your own, drawn
-       in `--helix-color-brand-mark`, the token for the brand as a graphic. -->
+       destination in the bar saying the same thing. It names the library the
+       starter is built on, and it is the place for your own name or logo. -->
   <a class="wordmark" data-link="quiet" href="#/" slot="start">
-    <helix-icon name="cube"></helix-icon>
-    <helix-text variant="body-strong">__PROJECT_NAME__</helix-text>
+    <helix-text variant="body-strong">Helix</helix-text>
   </a>
 
   <!-- The links are yours. Navigation owns the marker that travels between them

package/templates/svelte-vite/src/app.css

@@ -6,10 +6,14 @@
  * open. Everything below is a Helix token or a documented hook, so a theme
  * changes it, and both color modes follow from one copy.
  *
- * **Color appears in two places, and both are named.** The wordmark takes
- * `--helix-color-brand-mark`, the token for the brand as a graphic, and a
- * chosen row takes `--helix-color-primary-subtle` through the parts the table
- * publishes. Everywhere else the page is ink on the background, and the
+ * **Your brand color is one line.** With no brand set, Helix draws in ink,
+ * near-black in light mode and near-white in dark. Set `--helix-seed-brand` on
+ * `:root`, and every token follows it.
+ *
+ * **Color appears in two places, and both are named.** Each tile's icon takes
+ * `--helix-color-primary` on `--helix-color-primary-subtle`, and a chosen row
+ * takes `--helix-color-primary-subtle` through the parts the table publishes.
+ * Everywhere else the page is the foreground on the background, and the
  * components carry their own color.
  */
 
@@ -59,20 +63,18 @@ helix-app-header {
   --app-header-max-inline-size: 56rem;
 }
 
-/* The mark beside the project's name, the one graphic on the page and the
-   reason `--helix-color-brand-mark` exists. WCAG asks 3:1 of a graphic and 4.5:1
-   of text, so a mark can sit closer to a theme's brand color than any text
-   color can. Swap the glyph, or replace the whole element with your own logo. */
+/* The wordmark, a word for now, in the foreground: a quiet link is muted until
+   it is pointed at, and the name is the strongest thing in the bar. Give it your
+   own name, or put your logo beside it in `--helix-color-brand-mark`, the token
+   for the brand as a graphic: WCAG asks 3:1 of a graphic and 4.5:1 of text, so a
+   mark can sit closer to a theme's brand color than any text color can. */
 .wordmark {
   align-items: center;
+  color: var(--helix-color-foreground);
   display: inline-flex;
   gap: var(--helix-space-xs);
 }
 
-.wordmark helix-icon {
-  color: var(--helix-color-brand-mark);
-}
-
 /*
  * One rhythm between the blocks of a page, so no page sets its own.
  *
@@ -185,12 +187,11 @@ helix-app-header {
  * **The panel is the library at work**, so all it needs from here is room. Two
  * documented hooks: the figures come down a step from the display size, which
  * suits one figure on its own and is too loud for three in an 18rem column, and
- * the gap around the rule between them comes in from `2xl`, which `divided`
- * doubles, leaving no room for a number.
+ * the gap between them is wide enough to set them apart with no rule.
  */
 .specimen {
-  --stat-group-gap: var(--helix-space-md);
-  --stat-value-size: var(--helix-text-xl);
+  --stat-group-gap: var(--helix-space-xl);
+  --stat-value-size: var(--helix-text-2xl);
 }
 
 /* A section is its heading and its one block, closer together than two sections
@@ -341,9 +342,9 @@ helix-app-header {
  * left of every chosen row.
  *
  * The values are still the library's, so a theme carries them like everything
- * else. `primary-subtle`, because `primary-surface` is the solid accent a
- * button stands on, made for white text, so a row painted with it would put the
- * table's own ink on a saturated fill.
+ * else. `primary-subtle`, because `primary-surface` is the solid fill a
+ * button stands on, made for its own label, so a row painted with it would put
+ * the table's own ink on a solid fill.
  */
 helix-data-table::part(cell-selected),
 helix-data-table::part(select-selected) {

package/templates/vue-vite/src/LandingPage.vue

@@ -39,12 +39,13 @@ const figure = new Intl.NumberFormat('en-US')
         </div>
       </div>
 
-      <!-- **The library at work, on the first screen.** The figures are the roster
-           the data view draws, read from the same module, so the panel is the app
-           itself, on glass over the light. -->
+      <!-- **The library at work, on the first screen.** The figures are the
+           roster the data view draws, read from the same module, so the panel
+           is the app itself, on glass over the light. It has no link of its own:
+           the button beside it goes to the same page. -->
       <helix-card class="specimen" material="glass" separation="outlined">
-        <helix-text as="h2" slot="header" variant="title">The roster, in three figures</helix-text>
-        <helix-stat-group divided>
+        <helix-text as="h2" slot="header" variant="title">Roster</helix-text>
+        <helix-stat-group>
           <helix-stat>
             {{ roster.people }}
             <span slot="label">People</span>
@@ -58,7 +59,6 @@ const figure = new Intl.NumberFormat('en-US')
             <span slot="label">Reviews</span>
           </helix-stat>
         </helix-stat-group>
-        <a data-link href="#/overview" slot="footer">Open the data view</a>
       </helix-card>
     </header>
 

package/templates/vue-vite/src/SignupForm.vue

@@ -105,10 +105,10 @@ const dismiss = (id: number) => {
 
       <aside class="notes">
         <!-- The one fact you need before typing your name into a page you have
-             had for five minutes, so it is a callout. `tone` is the meaning,
-             and the component draws it with a tint and a bar on the inline
-             start, so it survives being read in grayscale. -->
-        <helix-callout tone="info">
+             had for five minutes, so it is a callout. `neutral` is a note that
+             reports no status, drawn in the muted ink with a bar on the inline
+             start, so it stays in the palette, ink or brand. -->
+        <helix-callout tone="neutral">
           The form posts nothing. Submit it, and a message shows exactly what a server would
           receive.
         </helix-callout>

package/templates/vue-vite/src/SiteFooter.vue

@@ -9,19 +9,16 @@ import { DOCS } from './docs.ts'
   and a caption, which on a tall window left the bottom third of the screen
   empty. The footer is also where the links you want once belong.
 
-  `data-link="subtle"` reads as body text until it is hovered, which suits a
-  row of links under a rule.
+  `data-link="quiet"` sets a link in the muted ink with no underline, and it
+  takes the foreground on hover, which suits a row of links under a rule.
 -->
 <template>
   <footer class="site-footer">
     <div class="footer-row">
-      <helix-text as="p" emphasis="subtle" variant="caption">
-        Every component here has a page, with its API, its parts, and its examples.
-      </helix-text>
       <div class="footer-links">
-        <a data-link="subtle" :href="DOCS.gallery">Components</a>
-        <a data-link="subtle" :href="DOCS.elements">Documentation</a>
-        <a data-link="subtle" :href="DOCS.vue">Vue</a>
+        <a data-link="quiet" :href="DOCS.gallery">Components</a>
+        <a data-link="quiet" :href="DOCS.elements">Documentation</a>
+        <a data-link="quiet" :href="DOCS.vue">Vue</a>
       </div>
     </div>
   </footer>

package/templates/vue-vite/src/SiteHeader.vue

@@ -40,13 +40,10 @@ const cycle = () => {
 <template>
   <helix-app-header material="glass" sticky>
     <!-- The wordmark is the way back to the first page, so there is no third
-         destination in the bar saying the same thing. It is also the only name
-         of the project on the screen. The mark is a placeholder for your own,
-         drawn in `--helix-color-brand-mark`, the token for the brand as a
-         graphic. -->
+         destination in the bar saying the same thing. It names the library the
+         starter is built on, and it is the place for your own name or logo. -->
     <a class="wordmark" data-link="quiet" href="#/" slot="start">
-      <helix-icon name="cube" />
-      <helix-text variant="body-strong">__PROJECT_NAME__</helix-text>
+      <helix-text variant="body-strong">Helix</helix-text>
     </a>
 
     <!-- The links are yours. Navigation owns the marker that travels between

package/templates/vue-vite/src/app.css

@@ -6,10 +6,14 @@
  * open. Everything below is a Helix token or a documented hook, so a theme
  * changes it, and both color modes follow from one copy.
  *
- * **Color appears in two places, and both are named.** The wordmark takes
- * `--helix-color-brand-mark`, the token for the brand as a graphic, and a
- * chosen row takes `--helix-color-primary-subtle` through the parts the table
- * publishes. Everywhere else the page is ink on the background, and the
+ * **Your brand color is one line.** With no brand set, Helix draws in ink,
+ * near-black in light mode and near-white in dark. Set `--helix-seed-brand` on
+ * `:root`, and every token follows it.
+ *
+ * **Color appears in two places, and both are named.** Each tile's icon takes
+ * `--helix-color-primary` on `--helix-color-primary-subtle`, and a chosen row
+ * takes `--helix-color-primary-subtle` through the parts the table publishes.
+ * Everywhere else the page is the foreground on the background, and the
  * components carry their own color.
  */
 
@@ -59,20 +63,18 @@ helix-app-header {
   --app-header-max-inline-size: 56rem;
 }
 
-/* The mark beside the project's name, the one graphic on the page and the
-   reason `--helix-color-brand-mark` exists. WCAG asks 3:1 of a graphic and 4.5:1
-   of text, so a mark can sit closer to a theme's brand color than any text
-   color can. Swap the glyph, or replace the whole element with your own logo. */
+/* The wordmark, a word for now, in the foreground: a quiet link is muted until
+   it is pointed at, and the name is the strongest thing in the bar. Give it your
+   own name, or put your logo beside it in `--helix-color-brand-mark`, the token
+   for the brand as a graphic: WCAG asks 3:1 of a graphic and 4.5:1 of text, so a
+   mark can sit closer to a theme's brand color than any text color can. */
 .wordmark {
   align-items: center;
+  color: var(--helix-color-foreground);
   display: inline-flex;
   gap: var(--helix-space-xs);
 }
 
-.wordmark helix-icon {
-  color: var(--helix-color-brand-mark);
-}
-
 /*
  * One rhythm between the blocks of a page, so no page sets its own.
  *
@@ -185,12 +187,11 @@ helix-app-header {
  * **The panel is the library at work**, so all it needs from here is room. Two
  * documented hooks: the figures come down a step from the display size, which
  * suits one figure on its own and is too loud for three in an 18rem column, and
- * the gap around the rule between them comes in from `2xl`, which `divided`
- * doubles, leaving no room for a number.
+ * the gap between them is wide enough to set them apart with no rule.
  */
 .specimen {
-  --stat-group-gap: var(--helix-space-md);
-  --stat-value-size: var(--helix-text-xl);
+  --stat-group-gap: var(--helix-space-xl);
+  --stat-value-size: var(--helix-text-2xl);
 }
 
 /* A section is its heading and its one block, closer together than two sections
@@ -341,9 +342,9 @@ helix-app-header {
  * left of every chosen row.
  *
  * The values are still the library's, so a theme carries them like everything
- * else. `primary-subtle`, because `primary-surface` is the solid accent a
- * button stands on, made for white text, so a row painted with it would put the
- * table's own ink on a saturated fill.
+ * else. `primary-subtle`, because `primary-surface` is the solid fill a
+ * button stands on, made for its own label, so a row painted with it would put
+ * the table's own ink on a solid fill.
  */
 helix-data-table::part(cell-selected),
 helix-data-table::part(select-selected) {

package/templates.json

@@ -6,8 +6,7 @@
       "id": "react-vite",
       "named": [
         "index.html",
-        "package.json",
-        "src/site-header.tsx"
+        "package.json"
       ],
       "title": "React (Vite)"
     },
@@ -16,7 +15,6 @@
       "id": "react-nextjs",
       "named": [
         "app/layout.tsx",
-        "app/site-header.tsx",
         "package.json"
       ],
       "title": "React (Next.js)"
@@ -26,8 +24,7 @@
       "id": "vue-vite",
       "named": [
         "index.html",
-        "package.json",
-        "src/SiteHeader.vue"
+        "package.json"
       ],
       "title": "Vue (Vite)"
     },
@@ -37,7 +34,6 @@
       "named": [
         "angular.json",
         "package.json",
-        "src/app/site-header.html",
         "src/index.html"
       ],
       "title": "Angular"
@@ -47,8 +43,7 @@
       "id": "svelte-vite",
       "named": [
         "index.html",
-        "package.json",
-        "src/SiteHeader.svelte"
+        "package.json"
       ],
       "title": "Svelte (Vite)"
     },
@@ -57,8 +52,7 @@
       "id": "solid-vite",
       "named": [
         "index.html",
-        "package.json",
-        "src/site-header.tsx"
+        "package.json"
       ],
       "title": "Solid (Vite)"
     }