@fusion.dev/helix-templates 0.228.0 → 0.229.1

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

@@ -57,9 +57,9 @@ const dismiss = (id: number) => {
 <template>
   <div class="stack">
     <header class="hero">
-      <helix-text emphasis="muted" variant="label">Form</helix-text>
-      <helix-text as="h1" variant="heading">Join the roster</helix-text>
-      <helix-text as="p" class="lede" emphasis="muted" variant="body">
+      <helix-text emphasis="muted" scale="label">Form</helix-text>
+      <helix-text as="h1" scale="heading">Join the roster</helix-text>
+      <helix-text as="p" class="lede" emphasis="muted" scale="body">
         Five controls, and a <helix-code>&lt;form&gt;</helix-code> reads every one of them the way
         it reads an <helix-code>input</helix-code>.
       </helix-text>
@@ -112,13 +112,13 @@ const dismiss = (id: number) => {
           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>
-        <helix-text as="p" emphasis="muted" variant="body">
+        <helix-text as="h2" scale="title">What the form shows</helix-text>
+        <helix-text as="p" emphasis="muted" scale="body">
           Every control is a form-associated custom element, so the submit reads them all with
           <helix-code>new FormData(form)</helix-code>. Reset the form and they all go back,
           the way an <helix-code>input</helix-code> does.
         </helix-text>
-        <helix-text as="p" emphasis="muted" variant="body">
+        <helix-text as="p" emphasis="muted" scale="body">
           Leave the email wrong and the browser shows its own message, in your language. Handle is
           the controlled field: the page refuses each change and writes back a cleaned value.
         </helix-text>
@@ -140,8 +140,8 @@ const dismiss = (id: number) => {
         @helix-dismiss="dismiss(message.id)"
       >
         <helix-flex direction="column" gap="2xs">
-          <helix-text variant="body-strong">Read by the form</helix-text>
-          <helix-text variant="code">{{ message.text }}</helix-text>
+          <helix-text scale="body-strong">Read by the form</helix-text>
+          <helix-text scale="code">{{ message.text }}</helix-text>
         </helix-flex>
       </helix-toast-item>
     </helix-toast>

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

@@ -43,7 +43,7 @@ const cycle = () => {
          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-text variant="body-strong">Helix</helix-text>
+      <helix-text scale="body-strong">Helix</helix-text>
     </a>
 
     <!-- The links are yours. Navigation owns the marker that travels between

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

@@ -43,10 +43,15 @@
  *
  * `flex-grow` gives the spare height to the page, and the footer keeps its own.
  */
+:root {
+  --page-measure: 56rem;
+}
+
 .page {
   flex-grow: 1;
+  inline-size: 100%;
   margin-inline: auto;
-  max-inline-size: 56rem;
+  max-inline-size: var(--page-measure);
   padding-block: var(--helix-space-2xl) var(--helix-space-3xl);
   padding-inline: var(--helix-space-lg);
 }
@@ -60,7 +65,7 @@
  */
 helix-app-header {
   --app-header-border-color: var(--helix-color-border);
-  --app-header-max-inline-size: 56rem;
+  --app-header-max-inline-size: var(--page-measure);
 }
 
 /* The wordmark, a word for now, in the foreground: a quiet link is muted until
@@ -296,7 +301,7 @@ helix-app-header {
   gap: var(--helix-space-md);
   justify-content: space-between;
   margin-inline: auto;
-  max-inline-size: 56rem;
+  max-inline-size: var(--page-measure);
   padding-block: var(--helix-space-lg);
   padding-inline: var(--helix-space-lg);
 }
@@ -326,6 +331,10 @@ helix-app-header {
   .footer-row {
     padding-inline: var(--helix-space-md);
   }
+
+  helix-app-header {
+    --app-header-padding: var(--helix-space-md);
+  }
 }
 
 /*
@@ -354,3 +363,8 @@ helix-data-table::part(select-selected) {
 helix-data-table::part(cell-selected) {
   font-weight: var(--helix-weight-semibold);
 }
+
+/* A path in a sentence stays whole. */
+helix-code {
+  white-space: nowrap;
+}