@aziontech/theme 4.3.1 → 5.1.0

package/dist/v4/globals.css

@@ -704,8 +704,9 @@
   --layout-measure-focused: var(--container-4xl);
   --layout-measure-form: var(--container-4xl);
   --layout-measure-form-create: var(--container-5xl);
-  --layout-measure-docs: var(--container-4xl);
-  --container-site: var(--container-5xl);
+  --layout-measure-content: var(--container-3xl);
+  --layout-measure-site: var(--container-6xl);
+  --layout-measure-site-header: var(--container-7xl);
   --layout-measure-control: var(--container-3xs);
   --text-big-number-md-font-size: 1.25rem;
   --text-big-number-md-line-height: 1.25;
@@ -719,72 +720,108 @@
   --text-big-number-lg-line-height: 1.25;
   --text-big-number-lg-font-weight: 400;
   --text-big-number-lg-font-family: Proto Mono;
+  --text-amount-lg-text-wrap-style: balance;
+  --text-amount-lg-font-size: 1.875rem;
+  --text-amount-lg-line-height: 1.25;
+  --text-amount-lg-font-weight: 400;
+  --text-amount-lg-letter-spacing: -0.08em;
+  --text-amount-md-text-wrap-style: balance;
+  --text-amount-md-font-size: 1rem;
+  --text-amount-md-line-height: 1.25;
+  --text-amount-md-font-weight: 400;
+  --text-amount-md-letter-spacing: -0.08em;
+  --text-amount-sm-font-size: 1rem;
+  --text-amount-sm-line-height: 1.5;
+  --text-amount-sm-font-weight: 400;
+  --text-amount-sm-letter-spacing: -0.08em;
+  --text-heading-2xl-text-wrap-style: balance;
   --text-heading-2xl-font-size: 1.875rem;
   --text-heading-2xl-line-height: 1.25;
   --text-heading-2xl-font-weight: 400;
+  --text-heading-2xl-letter-spacing: -0.05rem;
+  --text-heading-xl-text-wrap-style: balance;
   --text-heading-xl-font-size: 1.25rem;
   --text-heading-xl-line-height: 1.25;
   --text-heading-xl-font-weight: 400;
+  --text-heading-xl-letter-spacing: -0.05rem;
+  --text-heading-lg-text-wrap-style: balance;
   --text-heading-lg-font-size: 1.125rem;
   --text-heading-lg-line-height: 1.25;
   --text-heading-lg-font-weight: 400;
+  --text-heading-lg-letter-spacing: -0.05rem;
+  --text-heading-md-text-wrap-style: balance;
   --text-heading-md-font-size: 1rem;
   --text-heading-md-line-height: 1.25;
   --text-heading-md-font-weight: 400;
+  --text-heading-md-letter-spacing: -0.05rem;
+  --text-heading-sm-text-wrap-style: balance;
   --text-heading-sm-font-size: 0.875rem;
   --text-heading-sm-line-height: 1.375;
   --text-heading-sm-font-weight: 400;
+  --text-heading-sm-letter-spacing: -0.05rem;
+  --text-heading-xs-text-wrap-style: balance;
   --text-heading-xs-font-size: 1rem;
   --text-heading-xs-line-height: 1.375;
   --text-heading-xs-font-weight: 400;
+  --text-heading-xs-letter-spacing: -0.05rem;
+  --text-heading-xxs-text-wrap-style: balance;
   --text-heading-xxs-font-size: 0.875rem;
   --text-heading-xxs-line-height: 1.375;
   --text-heading-xxs-font-weight: 400;
+  --text-heading-xxs-letter-spacing: -0.05rem;
   --text-label-lg-font-size: 1rem;
   --text-label-lg-line-height: 1.5;
   --text-label-lg-font-weight: 400;
+  --text-label-lg-letter-spacing: -0.025rem;
   --text-label-md-font-size: 0.875rem;
   --text-label-md-line-height: 1.5;
   --text-label-md-font-weight: 400;
+  --text-label-md-letter-spacing: -0.025rem;
   --text-label-sm-font-size: 0.75rem;
   --text-label-sm-line-height: 1.5;
   --text-label-sm-font-weight: 400;
+  --text-label-sm-letter-spacing: -0.025rem;
   --text-label-code-sm-font-family: Roboto Mono;
   --text-label-code-sm-font-size: 0.75rem;
   --text-label-code-sm-line-height: 1;
   --text-label-code-sm-font-weight: 400;
-  --text-label-code-sm-letter-spacing: 0;
+  --text-label-code-sm-letter-spacing: 0.025rem;
   --text-body-code-sm-text-wrap-style: pretty;
   --text-body-code-sm-font-family: Roboto Mono;
   --text-body-code-sm-font-size: 0.75rem;
   --text-body-code-sm-line-height: 1.625;
   --text-body-code-sm-font-weight: 400;
-  --text-body-code-sm-letter-spacing: 0;
+  --text-body-code-sm-letter-spacing: 0.025rem;
   --text-label-code-md-font-family: Roboto Mono;
   --text-label-code-md-font-size: 0.875rem;
   --text-label-code-md-line-height: 1;
   --text-label-code-md-font-weight: 400;
-  --text-label-code-md-letter-spacing: 0;
+  --text-label-code-md-letter-spacing: 0.025rem;
   --text-label-code-lg-font-family: Roboto Mono;
   --text-label-code-lg-font-size: 1rem;
   --text-label-code-lg-line-height: 1;
   --text-label-code-lg-font-weight: 400;
-  --text-label-code-lg-letter-spacing: 0;
+  --text-label-code-lg-letter-spacing: 0.025rem;
+  --text-body-lg-text-wrap-style: pretty;
   --text-body-lg-font-size: 1rem;
   --text-body-lg-font-weight: 400;
   --text-body-lg-line-height: 1.375;
+  --text-body-md-text-wrap-style: pretty;
   --text-body-md-font-size: 1rem;
   --text-body-md-font-weight: 400;
   --text-body-md-line-height: 1.375;
   --text-body-prose-md-font-size: 1rem;
   --text-body-prose-md-font-weight: 400;
   --text-body-prose-md-line-height: 1.625;
+  --text-body-sm-text-wrap-style: pretty;
   --text-body-sm-font-size: 0.875rem;
   --text-body-sm-font-weight: 400;
   --text-body-sm-line-height: 1.375;
+  --text-body-xs-text-wrap-style: pretty;
   --text-body-xs-font-size: 0.75rem;
   --text-body-xs-font-weight: 400;
   --text-body-xs-line-height: 1.375;
+  --text-body-xxs-text-wrap-style: pretty;
   --text-body-xxs-font-size: 0.75rem;
   --text-body-xxs-font-weight: 400;
   --text-body-xxs-line-height: 1.5;
@@ -835,6 +872,8 @@
     --text-big-number-md-font-size: 1.5rem;
     --text-big-number-sm-font-size: 1.25rem;
     --text-big-number-lg-font-size: 2.25rem;
+    --text-amount-lg-font-size: 3rem;
+    --text-amount-md-font-size: 1.25rem;
     --text-heading-2xl-font-size: 3rem;
     --text-heading-xl-font-size: 1.875rem;
     --text-heading-md-font-size: 1.25rem;
@@ -845,6 +884,8 @@
   @media (min-width: 768px) {
     --text-big-number-md-font-size: 2.25rem;
     --text-big-number-lg-font-size: 3.5rem;
+    --text-amount-lg-font-size: 3.5rem;
+    --text-amount-md-font-size: 1.5rem;
     --text-heading-2xl-font-size: 3.5rem;
     --text-heading-xl-font-size: 2.25rem;
     --text-heading-lg-font-size: 1.875rem;
@@ -1148,64 +1189,104 @@
   font-family: var(--text-big-number-lg-font-family);
 }
 
+@utility text-amount-lg {
+  text-wrap-style: var(--text-amount-lg-text-wrap-style);
+  font-size: var(--text-amount-lg-font-size);
+  line-height: var(--text-amount-lg-line-height);
+  font-weight: var(--text-amount-lg-font-weight);
+  letter-spacing: var(--text-amount-lg-letter-spacing);
+}
+
+@utility text-amount-md {
+  text-wrap-style: var(--text-amount-md-text-wrap-style);
+  font-size: var(--text-amount-md-font-size);
+  line-height: var(--text-amount-md-line-height);
+  font-weight: var(--text-amount-md-font-weight);
+  letter-spacing: var(--text-amount-md-letter-spacing);
+}
+
+@utility text-amount-sm {
+  font-size: var(--text-amount-sm-font-size);
+  line-height: var(--text-amount-sm-line-height);
+  font-weight: var(--text-amount-sm-font-weight);
+  letter-spacing: var(--text-amount-sm-letter-spacing);
+}
+
 @utility text-heading-2xl {
+  text-wrap-style: var(--text-heading-2xl-text-wrap-style);
   font-size: var(--text-heading-2xl-font-size);
   line-height: var(--text-heading-2xl-line-height);
   font-weight: var(--text-heading-2xl-font-weight);
+  letter-spacing: var(--text-heading-2xl-letter-spacing);
 }
 
 @utility text-heading-xl {
+  text-wrap-style: var(--text-heading-xl-text-wrap-style);
   font-size: var(--text-heading-xl-font-size);
   line-height: var(--text-heading-xl-line-height);
   font-weight: var(--text-heading-xl-font-weight);
+  letter-spacing: var(--text-heading-xl-letter-spacing);
 }
 
 @utility text-heading-lg {
+  text-wrap-style: var(--text-heading-lg-text-wrap-style);
   font-size: var(--text-heading-lg-font-size);
   line-height: var(--text-heading-lg-line-height);
   font-weight: var(--text-heading-lg-font-weight);
+  letter-spacing: var(--text-heading-lg-letter-spacing);
 }
 
 @utility text-heading-md {
+  text-wrap-style: var(--text-heading-md-text-wrap-style);
   font-size: var(--text-heading-md-font-size);
   line-height: var(--text-heading-md-line-height);
   font-weight: var(--text-heading-md-font-weight);
+  letter-spacing: var(--text-heading-md-letter-spacing);
 }
 
 @utility text-heading-sm {
+  text-wrap-style: var(--text-heading-sm-text-wrap-style);
   font-size: var(--text-heading-sm-font-size);
   line-height: var(--text-heading-sm-line-height);
   font-weight: var(--text-heading-sm-font-weight);
+  letter-spacing: var(--text-heading-sm-letter-spacing);
 }
 
 @utility text-heading-xs {
+  text-wrap-style: var(--text-heading-xs-text-wrap-style);
   font-size: var(--text-heading-xs-font-size);
   line-height: var(--text-heading-xs-line-height);
   font-weight: var(--text-heading-xs-font-weight);
+  letter-spacing: var(--text-heading-xs-letter-spacing);
 }
 
 @utility text-heading-xxs {
+  text-wrap-style: var(--text-heading-xxs-text-wrap-style);
   font-size: var(--text-heading-xxs-font-size);
   line-height: var(--text-heading-xxs-line-height);
   font-weight: var(--text-heading-xxs-font-weight);
+  letter-spacing: var(--text-heading-xxs-letter-spacing);
 }
 
 @utility text-label-lg {
   font-size: var(--text-label-lg-font-size);
   line-height: var(--text-label-lg-line-height);
   font-weight: var(--text-label-lg-font-weight);
+  letter-spacing: var(--text-label-lg-letter-spacing);
 }
 
 @utility text-label-md {
   font-size: var(--text-label-md-font-size);
   line-height: var(--text-label-md-line-height);
   font-weight: var(--text-label-md-font-weight);
+  letter-spacing: var(--text-label-md-letter-spacing);
 }
 
 @utility text-label-sm {
   font-size: var(--text-label-sm-font-size);
   line-height: var(--text-label-sm-line-height);
   font-weight: var(--text-label-sm-font-weight);
+  letter-spacing: var(--text-label-sm-letter-spacing);
 }
 
 @utility text-label-code-sm {
@@ -1242,12 +1323,14 @@
 }
 
 @utility text-body-lg {
+  text-wrap-style: var(--text-body-lg-text-wrap-style);
   font-size: var(--text-body-lg-font-size);
   font-weight: var(--text-body-lg-font-weight);
   line-height: var(--text-body-lg-line-height);
 }
 
 @utility text-body-md {
+  text-wrap-style: var(--text-body-md-text-wrap-style);
   font-size: var(--text-body-md-font-size);
   font-weight: var(--text-body-md-font-weight);
   line-height: var(--text-body-md-line-height);
@@ -1260,18 +1343,21 @@
 }
 
 @utility text-body-sm {
+  text-wrap-style: var(--text-body-sm-text-wrap-style);
   font-size: var(--text-body-sm-font-size);
   font-weight: var(--text-body-sm-font-weight);
   line-height: var(--text-body-sm-line-height);
 }
 
 @utility text-body-xs {
+  text-wrap-style: var(--text-body-xs-text-wrap-style);
   font-size: var(--text-body-xs-font-size);
   font-weight: var(--text-body-xs-font-weight);
   line-height: var(--text-body-xs-line-height);
 }
 
 @utility text-body-xxs {
+  text-wrap-style: var(--text-body-xxs-text-wrap-style);
   font-size: var(--text-body-xxs-font-size);
   font-weight: var(--text-body-xxs-font-weight);
   line-height: var(--text-body-xxs-line-height);
@@ -1396,14 +1482,20 @@
   &:is(.layout-boundary, .layout-boundary-inline) { max-width: calc(var(--layout-column-measure) + 2 * var(--layout-boundary-inline)); }
 }
 
-@utility layout-column-docs {
-  --layout-column-measure: var(--layout-measure-docs);
+@utility layout-column-content {
+  --layout-column-measure: var(--layout-measure-content);
   margin-inline: auto;
   width: 100%;
   max-width: var(--layout-column-measure);
   &:is(.layout-boundary, .layout-boundary-inline) { max-width: calc(var(--layout-column-measure) + 2 * var(--layout-boundary-inline)); }
 }
 
+@utility layout-column-site {
+  margin-inline: auto;
+  width: 100%;
+  max-width: min(var(--layout-measure-site), 100% - 2 * var(--layout-boundary-inline));
+}
+
 @utility layout-field-control {
   &:not(#\#) { display: flex; flex: 1 1 0%; justify-content: flex-end; max-width: var(--layout-measure-control); }
 }
@@ -1553,6 +1645,11 @@
 @utility border-info-contrast { border-color: var(--info-contrast); }
 
 @layer base {
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
   button:not(:disabled),
   [role="button"]:not([aria-disabled="true"]),
   summary {

package/dist/v4/globals.scss

@@ -704,8 +704,9 @@
   --layout-measure-focused: var(--container-4xl);
   --layout-measure-form: var(--container-4xl);
   --layout-measure-form-create: var(--container-5xl);
-  --layout-measure-docs: var(--container-4xl);
-  --container-site: var(--container-5xl);
+  --layout-measure-content: var(--container-3xl);
+  --layout-measure-site: var(--container-6xl);
+  --layout-measure-site-header: var(--container-7xl);
   --layout-measure-control: var(--container-3xs);
   --text-big-number-md-font-size: 1.25rem;
   --text-big-number-md-line-height: 1.25;
@@ -719,72 +720,108 @@
   --text-big-number-lg-line-height: 1.25;
   --text-big-number-lg-font-weight: 400;
   --text-big-number-lg-font-family: Proto Mono;
+  --text-amount-lg-text-wrap-style: balance;
+  --text-amount-lg-font-size: 1.875rem;
+  --text-amount-lg-line-height: 1.25;
+  --text-amount-lg-font-weight: 400;
+  --text-amount-lg-letter-spacing: -0.08em;
+  --text-amount-md-text-wrap-style: balance;
+  --text-amount-md-font-size: 1rem;
+  --text-amount-md-line-height: 1.25;
+  --text-amount-md-font-weight: 400;
+  --text-amount-md-letter-spacing: -0.08em;
+  --text-amount-sm-font-size: 1rem;
+  --text-amount-sm-line-height: 1.5;
+  --text-amount-sm-font-weight: 400;
+  --text-amount-sm-letter-spacing: -0.08em;
+  --text-heading-2xl-text-wrap-style: balance;
   --text-heading-2xl-font-size: 1.875rem;
   --text-heading-2xl-line-height: 1.25;
   --text-heading-2xl-font-weight: 400;
+  --text-heading-2xl-letter-spacing: -0.05rem;
+  --text-heading-xl-text-wrap-style: balance;
   --text-heading-xl-font-size: 1.25rem;
   --text-heading-xl-line-height: 1.25;
   --text-heading-xl-font-weight: 400;
+  --text-heading-xl-letter-spacing: -0.05rem;
+  --text-heading-lg-text-wrap-style: balance;
   --text-heading-lg-font-size: 1.125rem;
   --text-heading-lg-line-height: 1.25;
   --text-heading-lg-font-weight: 400;
+  --text-heading-lg-letter-spacing: -0.05rem;
+  --text-heading-md-text-wrap-style: balance;
   --text-heading-md-font-size: 1rem;
   --text-heading-md-line-height: 1.25;
   --text-heading-md-font-weight: 400;
+  --text-heading-md-letter-spacing: -0.05rem;
+  --text-heading-sm-text-wrap-style: balance;
   --text-heading-sm-font-size: 0.875rem;
   --text-heading-sm-line-height: 1.375;
   --text-heading-sm-font-weight: 400;
+  --text-heading-sm-letter-spacing: -0.05rem;
+  --text-heading-xs-text-wrap-style: balance;
   --text-heading-xs-font-size: 1rem;
   --text-heading-xs-line-height: 1.375;
   --text-heading-xs-font-weight: 400;
+  --text-heading-xs-letter-spacing: -0.05rem;
+  --text-heading-xxs-text-wrap-style: balance;
   --text-heading-xxs-font-size: 0.875rem;
   --text-heading-xxs-line-height: 1.375;
   --text-heading-xxs-font-weight: 400;
+  --text-heading-xxs-letter-spacing: -0.05rem;
   --text-label-lg-font-size: 1rem;
   --text-label-lg-line-height: 1.5;
   --text-label-lg-font-weight: 400;
+  --text-label-lg-letter-spacing: -0.025rem;
   --text-label-md-font-size: 0.875rem;
   --text-label-md-line-height: 1.5;
   --text-label-md-font-weight: 400;
+  --text-label-md-letter-spacing: -0.025rem;
   --text-label-sm-font-size: 0.75rem;
   --text-label-sm-line-height: 1.5;
   --text-label-sm-font-weight: 400;
+  --text-label-sm-letter-spacing: -0.025rem;
   --text-label-code-sm-font-family: Roboto Mono;
   --text-label-code-sm-font-size: 0.75rem;
   --text-label-code-sm-line-height: 1;
   --text-label-code-sm-font-weight: 400;
-  --text-label-code-sm-letter-spacing: 0;
+  --text-label-code-sm-letter-spacing: 0.025rem;
   --text-body-code-sm-text-wrap-style: pretty;
   --text-body-code-sm-font-family: Roboto Mono;
   --text-body-code-sm-font-size: 0.75rem;
   --text-body-code-sm-line-height: 1.625;
   --text-body-code-sm-font-weight: 400;
-  --text-body-code-sm-letter-spacing: 0;
+  --text-body-code-sm-letter-spacing: 0.025rem;
   --text-label-code-md-font-family: Roboto Mono;
   --text-label-code-md-font-size: 0.875rem;
   --text-label-code-md-line-height: 1;
   --text-label-code-md-font-weight: 400;
-  --text-label-code-md-letter-spacing: 0;
+  --text-label-code-md-letter-spacing: 0.025rem;
   --text-label-code-lg-font-family: Roboto Mono;
   --text-label-code-lg-font-size: 1rem;
   --text-label-code-lg-line-height: 1;
   --text-label-code-lg-font-weight: 400;
-  --text-label-code-lg-letter-spacing: 0;
+  --text-label-code-lg-letter-spacing: 0.025rem;
+  --text-body-lg-text-wrap-style: pretty;
   --text-body-lg-font-size: 1rem;
   --text-body-lg-font-weight: 400;
   --text-body-lg-line-height: 1.375;
+  --text-body-md-text-wrap-style: pretty;
   --text-body-md-font-size: 1rem;
   --text-body-md-font-weight: 400;
   --text-body-md-line-height: 1.375;
   --text-body-prose-md-font-size: 1rem;
   --text-body-prose-md-font-weight: 400;
   --text-body-prose-md-line-height: 1.625;
+  --text-body-sm-text-wrap-style: pretty;
   --text-body-sm-font-size: 0.875rem;
   --text-body-sm-font-weight: 400;
   --text-body-sm-line-height: 1.375;
+  --text-body-xs-text-wrap-style: pretty;
   --text-body-xs-font-size: 0.75rem;
   --text-body-xs-font-weight: 400;
   --text-body-xs-line-height: 1.375;
+  --text-body-xxs-text-wrap-style: pretty;
   --text-body-xxs-font-size: 0.75rem;
   --text-body-xxs-font-weight: 400;
   --text-body-xxs-line-height: 1.5;
@@ -835,6 +872,8 @@
     --text-big-number-md-font-size: 1.5rem;
     --text-big-number-sm-font-size: 1.25rem;
     --text-big-number-lg-font-size: 2.25rem;
+    --text-amount-lg-font-size: 3rem;
+    --text-amount-md-font-size: 1.25rem;
     --text-heading-2xl-font-size: 3rem;
     --text-heading-xl-font-size: 1.875rem;
     --text-heading-md-font-size: 1.25rem;
@@ -845,6 +884,8 @@
   @media (min-width: 768px) {
     --text-big-number-md-font-size: 2.25rem;
     --text-big-number-lg-font-size: 3.5rem;
+    --text-amount-lg-font-size: 3.5rem;
+    --text-amount-md-font-size: 1.5rem;
     --text-heading-2xl-font-size: 3.5rem;
     --text-heading-xl-font-size: 2.25rem;
     --text-heading-lg-font-size: 1.875rem;
@@ -1148,64 +1189,104 @@
   font-family: var(--text-big-number-lg-font-family);
 }
 
+@utility text-amount-lg {
+  text-wrap-style: var(--text-amount-lg-text-wrap-style);
+  font-size: var(--text-amount-lg-font-size);
+  line-height: var(--text-amount-lg-line-height);
+  font-weight: var(--text-amount-lg-font-weight);
+  letter-spacing: var(--text-amount-lg-letter-spacing);
+}
+
+@utility text-amount-md {
+  text-wrap-style: var(--text-amount-md-text-wrap-style);
+  font-size: var(--text-amount-md-font-size);
+  line-height: var(--text-amount-md-line-height);
+  font-weight: var(--text-amount-md-font-weight);
+  letter-spacing: var(--text-amount-md-letter-spacing);
+}
+
+@utility text-amount-sm {
+  font-size: var(--text-amount-sm-font-size);
+  line-height: var(--text-amount-sm-line-height);
+  font-weight: var(--text-amount-sm-font-weight);
+  letter-spacing: var(--text-amount-sm-letter-spacing);
+}
+
 @utility text-heading-2xl {
+  text-wrap-style: var(--text-heading-2xl-text-wrap-style);
   font-size: var(--text-heading-2xl-font-size);
   line-height: var(--text-heading-2xl-line-height);
   font-weight: var(--text-heading-2xl-font-weight);
+  letter-spacing: var(--text-heading-2xl-letter-spacing);
 }
 
 @utility text-heading-xl {
+  text-wrap-style: var(--text-heading-xl-text-wrap-style);
   font-size: var(--text-heading-xl-font-size);
   line-height: var(--text-heading-xl-line-height);
   font-weight: var(--text-heading-xl-font-weight);
+  letter-spacing: var(--text-heading-xl-letter-spacing);
 }
 
 @utility text-heading-lg {
+  text-wrap-style: var(--text-heading-lg-text-wrap-style);
   font-size: var(--text-heading-lg-font-size);
   line-height: var(--text-heading-lg-line-height);
   font-weight: var(--text-heading-lg-font-weight);
+  letter-spacing: var(--text-heading-lg-letter-spacing);
 }
 
 @utility text-heading-md {
+  text-wrap-style: var(--text-heading-md-text-wrap-style);
   font-size: var(--text-heading-md-font-size);
   line-height: var(--text-heading-md-line-height);
   font-weight: var(--text-heading-md-font-weight);
+  letter-spacing: var(--text-heading-md-letter-spacing);
 }
 
 @utility text-heading-sm {
+  text-wrap-style: var(--text-heading-sm-text-wrap-style);
   font-size: var(--text-heading-sm-font-size);
   line-height: var(--text-heading-sm-line-height);
   font-weight: var(--text-heading-sm-font-weight);
+  letter-spacing: var(--text-heading-sm-letter-spacing);
 }
 
 @utility text-heading-xs {
+  text-wrap-style: var(--text-heading-xs-text-wrap-style);
   font-size: var(--text-heading-xs-font-size);
   line-height: var(--text-heading-xs-line-height);
   font-weight: var(--text-heading-xs-font-weight);
+  letter-spacing: var(--text-heading-xs-letter-spacing);
 }
 
 @utility text-heading-xxs {
+  text-wrap-style: var(--text-heading-xxs-text-wrap-style);
   font-size: var(--text-heading-xxs-font-size);
   line-height: var(--text-heading-xxs-line-height);
   font-weight: var(--text-heading-xxs-font-weight);
+  letter-spacing: var(--text-heading-xxs-letter-spacing);
 }
 
 @utility text-label-lg {
   font-size: var(--text-label-lg-font-size);
   line-height: var(--text-label-lg-line-height);
   font-weight: var(--text-label-lg-font-weight);
+  letter-spacing: var(--text-label-lg-letter-spacing);
 }
 
 @utility text-label-md {
   font-size: var(--text-label-md-font-size);
   line-height: var(--text-label-md-line-height);
   font-weight: var(--text-label-md-font-weight);
+  letter-spacing: var(--text-label-md-letter-spacing);
 }
 
 @utility text-label-sm {
   font-size: var(--text-label-sm-font-size);
   line-height: var(--text-label-sm-line-height);
   font-weight: var(--text-label-sm-font-weight);
+  letter-spacing: var(--text-label-sm-letter-spacing);
 }
 
 @utility text-label-code-sm {
@@ -1242,12 +1323,14 @@
 }
 
 @utility text-body-lg {
+  text-wrap-style: var(--text-body-lg-text-wrap-style);
   font-size: var(--text-body-lg-font-size);
   font-weight: var(--text-body-lg-font-weight);
   line-height: var(--text-body-lg-line-height);
 }
 
 @utility text-body-md {
+  text-wrap-style: var(--text-body-md-text-wrap-style);
   font-size: var(--text-body-md-font-size);
   font-weight: var(--text-body-md-font-weight);
   line-height: var(--text-body-md-line-height);
@@ -1260,18 +1343,21 @@
 }
 
 @utility text-body-sm {
+  text-wrap-style: var(--text-body-sm-text-wrap-style);
   font-size: var(--text-body-sm-font-size);
   font-weight: var(--text-body-sm-font-weight);
   line-height: var(--text-body-sm-line-height);
 }
 
 @utility text-body-xs {
+  text-wrap-style: var(--text-body-xs-text-wrap-style);
   font-size: var(--text-body-xs-font-size);
   font-weight: var(--text-body-xs-font-weight);
   line-height: var(--text-body-xs-line-height);
 }
 
 @utility text-body-xxs {
+  text-wrap-style: var(--text-body-xxs-text-wrap-style);
   font-size: var(--text-body-xxs-font-size);
   font-weight: var(--text-body-xxs-font-weight);
   line-height: var(--text-body-xxs-line-height);
@@ -1396,14 +1482,20 @@
   &:is(.layout-boundary, .layout-boundary-inline) { max-width: calc(var(--layout-column-measure) + 2 * var(--layout-boundary-inline)); }
 }
 
-@utility layout-column-docs {
-  --layout-column-measure: var(--layout-measure-docs);
+@utility layout-column-content {
+  --layout-column-measure: var(--layout-measure-content);
   margin-inline: auto;
   width: 100%;
   max-width: var(--layout-column-measure);
   &:is(.layout-boundary, .layout-boundary-inline) { max-width: calc(var(--layout-column-measure) + 2 * var(--layout-boundary-inline)); }
 }
 
+@utility layout-column-site {
+  margin-inline: auto;
+  width: 100%;
+  max-width: min(var(--layout-measure-site), 100% - 2 * var(--layout-boundary-inline));
+}
+
 @utility layout-field-control {
   &:not(#\#) { display: flex; flex: 1 1 0%; justify-content: flex-end; max-width: var(--layout-measure-control); }
 }
@@ -1553,6 +1645,11 @@
 @utility border-info-contrast { border-color: var(--info-contrast); }
 
 @layer base {
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
   button:not(:disabled),
   [role="button"]:not([aria-disabled="true"]),
   summary {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aziontech/theme",
   "type": "module",
-  "version": "4.3.1",
+  "version": "5.1.0",
   "author": "aziontech",
   "license": "MIT",
   "repository": {

package/src/scripts/build-tokens.mjs

@@ -35,11 +35,13 @@ import { animateExtras, keyframes } from '../tokens/primitives/animations/keyfra
 import { breakpoints } from '../tokens/primitives/breakpoints.js';
 import { compilePrimitivesVars } from './compile-primitives.js';
 import { compileThemeCss, compileThemeVars } from './compile-theme.js';
+import { container } from '../tokens/primitives/shape/container.js';
 import { containersData } from '../tokens/semantic/containers.data.js';
 import { layoutsData, layoutsUtilities } from '../tokens/semantic/layouts.data.js';
 import { spacingsData } from '../tokens/semantic/spacings.data.js';
 import { textsData } from '../tokens/semantic/texts.data.js';
 import { zIndicesData } from '../tokens/semantic/z-indices.data.js';
+import { assertMeasureCommentsMatch } from './measure-comment.mjs';
 import { assertNoZeroWithUnit } from './zero-unit.mjs';
 
 const BREAKPOINT_ORDER = ['sm', 'md', 'lg', 'xl', '2xl'];
@@ -270,6 +272,11 @@ const emitLayoutUtilities = () => emitUtilities(layoutsUtilities);
 const emitBaseLayer = () =>
   [
     '@layer base {',
+    '  html {',
+    '    -webkit-font-smoothing: antialiased;',
+    '    -moz-osx-font-smoothing: grayscale;',
+    '  }',
+    '',
     '  button:not(:disabled),',
     '  [role="button"]:not([aria-disabled="true"]),',
     '  summary {',
@@ -431,6 +438,11 @@ const importIdx = rawCss.indexOf(IMPORT_LINE);
 if (importIdx === -1) throw new Error('emitCssV4 output is missing the tailwind import line');
 const afterImport = importIdx + IMPORT_LINE.length;
 const css = `${rawCss.slice(0, afterImport)}\n\n${fontsCss}${rawCss.slice(afterImport)}`;
+assertMeasureCommentsMatch(
+  await readFile(resolve(__dirname, '../tokens/semantic/layouts.data.js'), 'utf8'),
+  container,
+  'tokens/semantic/layouts.data.js',
+);
 assertNoZeroWithUnit(css, 'globals.css');
 await writeFile(resolve(dir, 'globals.css'), css, 'utf8');
 await writeFile(resolve(dir, 'globals.scss'), css, 'utf8');

package/src/scripts/compile-primitives.js

@@ -7,11 +7,11 @@
  * but for primitives only — no semantic light/dark split.
  */
 
-import { primitives as colorPrimitives } from '../tokens/primitives/colors/colors.js'
 import { animate } from '../tokens/primitives/animations/animate.js'
 import { ease } from '../tokens/primitives/animations/ease.js'
 import { borderWidths } from '../tokens/primitives/border-widths.js'
 import { breakpoints } from '../tokens/primitives/breakpoints.js'
+import { primitives as colorPrimitives } from '../tokens/primitives/colors/colors.js'
 import { blur } from '../tokens/primitives/effects/blur.js'
 import { dropShadow } from '../tokens/primitives/effects/drop-shadow.js'
 import { insetShadow } from '../tokens/primitives/effects/inset-shadow.js'

package/src/scripts/compile-theme.js

@@ -13,8 +13,8 @@ import {
 } from '../tokens/primitives/colors/colors.js'
 import { accent } from '../tokens/theme/accent.js'
 import { background } from '../tokens/theme/background.js'
-import { codeSintax } from '../tokens/theme/code-sintax.js'
 import { border } from '../tokens/theme/border.js'
+import { codeSintax } from '../tokens/theme/code-sintax.js'
 import { danger } from '../tokens/theme/feedback/danger.js'
 import { info } from '../tokens/theme/feedback/info.js'
 import { success } from '../tokens/theme/feedback/success.js'

package/src/scripts/measure-comment.mjs

@@ -0,0 +1,47 @@
+/**
+ * Measure-comment gate for the layout tokens — the check that keeps a `// 1620px`
+ * annotation honest against the `var(--container-*)` it annotates. The VALUE is the
+ * source of truth; the comment is a reader's convenience, and a comment that disagrees
+ * with it is worse than no comment at all.
+ *
+ * Nothing else sees this: the annotation is a JS comment, so it never reaches the
+ * compiled CSS the zero-unit gate reads, and no linter resolves a `var()` back to the
+ * rung it names. A value can therefore be changed — or reverted — under a comment that
+ * still describes the old one, with every gate green. Pure: node built-ins only.
+ */
+
+const MEASURE_LINE = /'([\w-]+)':\s*'var\(--container-([\w]+)\)',?\s*\/\/\s*(\d+)px/
+
+/** Every `'token': 'var(--container-X)', // Npx` line, as `{ token, rung, claimed, n }`. */
+export const findMeasureComments = (sourceText) =>
+  sourceText.split('\n').flatMap((line, i) => {
+    const m = line.match(MEASURE_LINE)
+    return m ? [{ token: m[1], rung: m[2], claimed: Number(m[3]), n: i + 1 }] : []
+  })
+
+/**
+ * Throw when a measure comment disagrees with the container rung it annotates, or names
+ * a rung that does not exist. `container` is the rung table; `source` names the artifact.
+ */
+export const assertMeasureCommentsMatch = (sourceText, container, source = 'layouts.data.js') => {
+  const rows = findMeasureComments(sourceText)
+  const wrong = rows.flatMap(({ token, rung, claimed, n }) => {
+    const real = container[rung]
+    if (real === undefined) return [{ token, rung, claimed, n, real: null }]
+    return parseInt(real, 10) === claimed ? [] : [{ token, rung, claimed, n, real }]
+  })
+  if (wrong.length === 0) return
+
+  const detail = wrong
+    .map(({ token, rung, claimed, n, real }) =>
+      real === null
+        ? `  ${source}:${n}  ${token} → --container-${rung} is not a rung of the ladder`
+        : `  ${source}:${n}  ${token} → --container-${rung} is ${real}, comment says ${claimed}px`
+    )
+    .join('\n')
+  throw new Error(
+    `build:tokens — ${wrong.length} measure comment(s) disagree with the token value.\n${detail}\n` +
+      'The value is the source of truth: fix the comment to match it, or change the rung if the ' +
+      'value is what is wrong. Rungs live in src/tokens/primitives/shape/container.js.'
+  )
+}

package/src/tokens/README.md

@@ -117,6 +117,8 @@ src/
     ├── refs.js                  # tokenRef helper + isTokenRef guard + assertResolvedRefs
     ├── compile-primitives.js    # flattens primitive trees into CSS vars
     ├── compile-theme.js         # semantic light/dark compiler (exported as ./theme-colors)
+    ├── zero-unit.mjs            # build gate: a zero length carries no unit
+    ├── measure-comment.mjs      # build gate: a `// Npx` comment matches its rung
     └── build-tokens.mjs         # main entrypoint: emits the dist/v4 bundle
 ```
 
@@ -202,8 +204,14 @@ free. Giving it its own map would duplicate the spacing scale into layout and le
 
 The group also ships `layoutsUtilities`, the container-system classes (`.layout-column`,
 `.layout-boundary`, …) emitted as Tailwind v4 `@utility` blocks so they support variants
-(`md:layout-column`). Utilities are shaped exactly like `illustrationsUtilities`: a string value is a
-declaration, an object value is a nested rule keyed by a literal selector (`'&:first-child'`).
+(`md:layout-column`). Each entry is a rule body: a string value is a declaration, an object value is
+a nested rule keyed by a literal selector (`'&:first-child'`).
+
+A measure carries a `// 1620px` annotation for the reader, and **the token value is the source of
+truth for it** — the comment is a convenience, never the decision. `measure-comment.mjs` resolves
+every annotated `var(--container-*)` back to its rung and **fails the build** when the two disagree,
+because nothing else can see this: the annotation is a JS comment, so it never reaches the compiled
+CSS, and no linter resolves a `var()` to the value it names.
 
 ---
 

package/src/tokens/primitives/shape/shape.js

@@ -1,5 +1,5 @@
-import { radius } from './radius.js'
 import { borderWidths } from '../border-widths.js'
+import { radius } from './radius.js'
 
 export const shape = {
   'shape-flat': radius.none,

package/src/tokens/semantic/layouts.data.d.ts

@@ -23,11 +23,17 @@ export const layoutsData: {
     'layout-measure-focused': string;
     'layout-measure-form': string;
     'layout-measure-form-create': string;
-    'layout-measure-docs': string;
-    'container-site': string;
+    'layout-measure-content': string;
+    'layout-measure-site': string;
+    'layout-measure-site-header': string;
     'layout-measure-control': string;
 };
 export const layoutsUtilities: {
+    'layout-column-site': {
+        'margin-inline': string;
+        width: string;
+        'max-width': string;
+    };
     'layout-field-control': {
         '&:not(#\\#)': {
             display: string;

package/src/tokens/semantic/layouts.data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layouts.data.d.ts","sourceRoot":"","sources":["layouts.data.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH;;;;;;;;;;;;;EAgHC;AAmDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqGC"}
+{"version":3,"file":"layouts.data.d.ts","sourceRoot":"","sources":["layouts.data.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH;;;;;;;;;;;;;;EAuIC;AAmDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2IC"}

package/src/tokens/semantic/layouts.data.js

@@ -75,38 +75,61 @@ export const layoutsData = {
    * the far left of a 1600px row from the input it names, and the eye has to travel
    * the whole measure to pair them.
    *
-   * DOCS pages are the one column capped by TYPOGRAPHY rather than by layout. Prose is
-   * read line by line, and past ~90 characters the eye loses the start of the next line
-   * on the return sweep — a limit that has nothing to do with how wide the payload is,
-   * which is why it is far tighter than every other measure here and why it does not
-   * move when a rail collapses and frees up room. A docs page is already flanked by two
-   * rails; this caps what is between them.
+   * CONTENT pages are the one column capped by TYPOGRAPHY rather than by layout. Prose
+   * is read line by line, and past ~90 characters the eye loses the start of the next
+   * line on the return sweep — a limit that has nothing to do with how wide the payload
+   * is, which is why it is far tighter than every other measure here and why it does not
+   * move when a rail collapses and frees up room. A documentation page is already
+   * flanked by two rails; this caps what is between them.
+   *
+   * IT IS NAMED FOR THE PAYLOAD, NOT FOR THE SECTION. The cap is a line length, so every
+   * page whose payload is flowing copy takes it — documentation today, the blog and any
+   * other article page next — and none of them has to re-derive the same limit under a
+   * name that says "docs". By the same rule, a page inside the documentation that is NOT
+   * read line by line (its home, a directory of cards) takes a wider measure: what picks
+   * the column is the payload, never the URL.
    */
   'layout-measure': 'var(--container-7xl)', // 1620px — data pages
   'layout-measure-focused': 'var(--container-4xl)', // 1024px — home
   'layout-measure-form': 'var(--container-4xl)', // 1024px — settings, forms
   'layout-measure-form-create': 'var(--container-5xl)', // 1192px — create flows
-  'layout-measure-docs': 'var(--container-4xl)', // 1192px — documentation prose
+  'layout-measure-content': 'var(--container-3xl)', // 876px — prose columns (docs, blog)
 
   /*
-   * MEASURE (site) — the marketing site's content column, and the one measure in this
-   * file that is not a console page's.
+   * MEASURE (site) — the marketing site's columns, and the only measures in this file
+   * that are not a console page's. There are TWO, because the page and the bar above it
+   * do not answer the same question.
+   *
+   * --layout-measure-site IS THE PAGE'S FRAME. The azion.com pages are a single
+   * vertical frame: the hero's inner column, every section below it, the docs home and
+   * the footer all sit on the SAME centred column, and the border-x that runs down the
+   * page is only continuous because they agree to the pixel. That is why this is a token
+   * rather than a width re-typed per band — the frame is one decision, and one place is
+   * where it has to live.
+   *
+   * --layout-measure-site-header IS THE BAR'S, AND IT IS DELIBERATELY ONE RUNG WIDER.
+   * A bar is chrome, not content: it carries the brand at one end of the window and the
+   * account actions at the other, held apart by a navigation region in the middle, so it
+   * wants the room a reading frame deliberately refuses. Held to the page's measure that
+   * middle region ran out of room on a laptop long before the page did. The bar is the
+   * ONE band allowed outside the frame, and it says so in a token of its own — which is
+   * also what keeps the exception reviewable in both directions: nobody widens the bar by
+   * retuning the page, and nobody widens the page by retuning the bar.
    *
-   * The azion.com pages are a single vertical frame: the nav bar, the hero's inner
-   * column, every section below it and the footer all sit on the SAME centred column,
-   * and the border-x that runs down the page is only continuous because those four
-   * agree to the pixel. That is why this is a token rather than a width re-typed per
-   * band — the frame is one decision, and one place is where it has to live.
+   * The two part company only above the caps, and by a fixed step. Measured against the
+   * page frame: one shared inset up to 1280, 2px apart at 1440 (the frame has just
+   * capped), 82 at 1600, and a flat 92 from 1668 up, where the bar caps too — half the
+   * 232px between the two measures, less the boundary the bar keeps.
    *
-   * It is `5xl` (1192px) — a rung of the shared container ladder
-   * (primitives/shape/container.js), not a number chosen for this page. The page snaps
-   * to the scale, the scale does not bend to the page, which is the same rule
-   * --layout-measure follows. It is its own token rather than a reference to one of the
-   * console measures because the two answer different questions: a console measure caps
-   * a payload (a table, a form), while this one is the width of a FRAME whose four bands
-   * have to line up. Retuning either must not move the other.
+   * Both are rungs of the shared container ladder (primitives/shape/container.js), not
+   * numbers chosen for a page. The page snaps to the scale, the scale does not bend to
+   * the page, which is the same rule --layout-measure follows. They are their own tokens
+   * rather than references to a console measure because the questions differ: a console
+   * measure caps a PAYLOAD (a table, a form), while these are the widths of a FRAME and
+   * of the chrome above it. Retuning any of the three must not move the others.
    */
-  'container-site': 'var(--container-5xl)', // 1192px — the marketing site column
+  'layout-measure-site': 'var(--container-6xl)', // 1388px — the marketing site column
+  'layout-measure-site-header': 'var(--container-7xl)', // 1620px — the site bar, one rung wider
   /*
    * MEASURE (control) — the widest the *right side* of an item-group field row may
    * get. An ItemGroup row is two columns: the content names the field (title +
@@ -137,7 +160,7 @@ const COLUMN_MEASURE = {
   'layout-column-focused': 'var(--layout-measure-focused)',
   'layout-column-form': 'var(--layout-measure-form)',
   'layout-form-create': 'var(--layout-measure-form-create)',
-  'layout-column-docs': 'var(--layout-measure-docs)'
+  'layout-column-content': 'var(--layout-measure-content)'
 }
 
 /**
@@ -244,11 +267,49 @@ export const layoutsUtilities = {
         // 1192px column a 256px control side left every input pinned to the far right,
         // a head-turn away from the label naming it; 472px pulls the control back
         // toward its label and gives the radio blocks room to read.
-        name === 'layout-form-create' ? { '--layout-measure-control': 'var(--container-md)' } : undefined
+        name === 'layout-form-create'
+          ? { '--layout-measure-control': 'var(--container-md)' }
+          : undefined
       )
     ])
   ),
 
+  /*
+   * THE SITE FRAME — the marketing page's column, and the one column in this file whose
+   * cap is a FRAME width rather than a content width.
+   *
+   * IT IS INSET FROM THE WINDOW AT EVERY WIDTH, and that is the whole reason it exists as
+   * a utility. On a wide screen the inset is free: --layout-measure-site is narrower than
+   * the window, `margin-inline: auto` centres the column, and its rules read as the page's
+   * vertical frame with canvas either side. Below the cap that stops doing anything — the
+   * column becomes the window — and the two rules land ON the window edges, where a
+   * hairline is not a frame, it is a seam against the bezel. So the frame that organises
+   * the whole desktop layout simply ceased to exist on a phone, and the headline above it
+   * (which pads by the boundary) opened a boundary inside a rule drawn at x=0.
+   *
+   * ONE `min()` COVERS THE WHOLE RANGE, WITH NO BREAKPOINT. The cap is whichever binds
+   * first: the measure, or the window less a boundary a side. While the measure is the
+   * smaller the column is capped and centred and the boundary term is inert; once the
+   * window is narrower than the measure — precisely where the cap has stopped working —
+   * the boundary term takes over and IS the inset. The two mechanisms hand off to each
+   * other, so a phone gets the same framed column a desktop gets, one boundary in from
+   * each edge.
+   *
+   * NO PADDING, DELIBERATELY. The inset belongs to the frame, not to the copy: the bands
+   * inside are grids whose `gap-px` rules have to reach the frame's own verticals, and a
+   * padding here would pull them off it. A band that wants its content inset too adds
+   * `layout-boundary-inline` on top (that is what SectionContainer's `padded` does).
+   *
+   * This is the shape /site/pricing worked out band by band and carried in a wrapper div;
+   * as a utility it is one element, pixel-identical at every width, and every other page
+   * and the footer get it by naming the column instead of re-deriving it.
+   */
+  'layout-column-site': {
+    'margin-inline': 'auto',
+    width: '100%',
+    'max-width': 'min(var(--layout-measure-site), 100% - 2 * var(--layout-boundary-inline))'
+  },
+
   /*
    * The control side of an item-group field row: the same geometry every settings row
    * hand-repeated, with the cap coming from --layout-measure-control so a band retunes

package/src/tokens/semantic/texts.data.d.ts

@@ -28,7 +28,36 @@ export const textsData: {
         fontWeight: number;
         fontFamily: string;
     };
+    'text-amount-lg': {
+        textWrapStyle: string;
+        fontSize: {
+            _: string;
+            sm: string;
+            md: string;
+        };
+        lineHeight: number;
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    'text-amount-md': {
+        textWrapStyle: string;
+        fontSize: {
+            _: string;
+            sm: string;
+            md: string;
+        };
+        lineHeight: number;
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    'text-amount-sm': {
+        fontSize: string;
+        lineHeight: number;
+        fontWeight: number;
+        letterSpacing: string;
+    };
     'text-heading-2xl': {
+        textWrapStyle: string;
         fontSize: {
             _: string;
             sm: string;
@@ -36,8 +65,10 @@ export const textsData: {
         };
         lineHeight: number;
         fontWeight: number;
+        letterSpacing: string;
     };
     'text-heading-xl': {
+        textWrapStyle: string;
         fontSize: {
             _: string;
             sm: string;
@@ -45,16 +76,20 @@ export const textsData: {
         };
         lineHeight: number;
         fontWeight: number;
+        letterSpacing: string;
     };
     'text-heading-lg': {
+        textWrapStyle: string;
         fontSize: {
             _: string;
             md: string;
         };
         lineHeight: number;
         fontWeight: number;
+        letterSpacing: string;
     };
     'text-heading-md': {
+        textWrapStyle: string;
         fontSize: {
             _: string;
             sm: string;
@@ -62,8 +97,10 @@ export const textsData: {
         };
         lineHeight: number;
         fontWeight: number;
+        letterSpacing: string;
     };
     'text-heading-sm': {
+        textWrapStyle: string;
         fontSize: {
             _: string;
             sm: string;
@@ -71,31 +108,39 @@ export const textsData: {
         };
         lineHeight: number;
         fontWeight: number;
+        letterSpacing: string;
     };
     'text-heading-xs': {
+        textWrapStyle: string;
         fontSize: string;
         lineHeight: number;
         fontWeight: number;
+        letterSpacing: string;
     };
     'text-heading-xxs': {
+        textWrapStyle: string;
         fontSize: string;
         lineHeight: number;
         fontWeight: number;
+        letterSpacing: string;
     };
     'text-label-lg': {
         fontSize: string;
         lineHeight: number;
         fontWeight: number;
+        letterSpacing: string;
     };
     'text-label-md': {
         fontSize: string;
         lineHeight: number;
         fontWeight: number;
+        letterSpacing: string;
     };
     'text-label-sm': {
         fontSize: string;
         lineHeight: number;
         fontWeight: number;
+        letterSpacing: string;
     };
     'text-label-code-sm': {
         fontFamily: string;
@@ -127,6 +172,7 @@ export const textsData: {
         letterSpacing: string;
     };
     'text-body-lg': {
+        textWrapStyle: string;
         fontSize: {
             _: string;
             md: string;
@@ -135,6 +181,7 @@ export const textsData: {
         lineHeight: number;
     };
     'text-body-md': {
+        textWrapStyle: string;
         fontSize: string;
         fontWeight: number;
         lineHeight: number;
@@ -145,16 +192,19 @@ export const textsData: {
         lineHeight: number;
     };
     'text-body-sm': {
+        textWrapStyle: string;
         fontSize: string;
         fontWeight: number;
         lineHeight: number;
     };
     'text-body-xs': {
+        textWrapStyle: string;
         fontSize: string;
         fontWeight: number;
         lineHeight: number;
     };
     'text-body-xxs': {
+        textWrapStyle: string;
         fontSize: string;
         fontWeight: number;
         lineHeight: number;

package/src/tokens/semantic/texts.data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"texts.data.d.ts","sourceRoot":"","sources":["texts.data.js"],"names":[],"mappings":"AAwBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6KE,8FAA8F;;;;;;;;;;;;;;;;;;EAkB/F"}
+{"version":3,"file":"texts.data.d.ts","sourceRoot":"","sources":["texts.data.js"],"names":[],"mappings":"AAkCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2OE,8FAA8F;;;;;;;;;;;;;;;;;;EAkB/F"}

package/src/tokens/semantic/texts.data.js

@@ -9,6 +9,16 @@
  * Optional `states` emits pseudo-class rules (e.g. `.text-link:hover`). Bundles
  * with `fontSize: 'inherit'` are omitted from the Tailwind `fontSize` preset.
  *
+ * `textWrapStyle` — the LONGHAND, never the `textWrap` shorthand. `text-wrap: pretty`
+ * is `text-wrap-mode: wrap` + `text-wrap-style: pretty`, so a typography utility
+ * written that way does not just choose how lines break: it decides THAT the text
+ * wraps, and it beats `truncate` / `whitespace-nowrap` on the same element (equal
+ * specificity, and this utility sorts later). Every `truncate text-body-sm` in the
+ * codebase therefore wrapped to two lines with an ellipsis that never appeared —
+ * measurably, table rows grew from 48px to 56px wherever a cell's text was longer
+ * than its column. The longhand keeps the balance/pretty intent and leaves wrapping
+ * to whoever owns the element.
+ *
  * Mapping used during the port:
  *   old `large`  (≤640) → `_`
  *   old `medium` (≤768) → `sm` (≥640)
@@ -41,62 +51,119 @@ export const textsData = {
     fontWeight: fontWeight.normal,
     fontFamily: fontFamily.display
   },
+  // ── The amount ladder (Currency) ─────────────────────────────────────────
+  //
+  // The three sizes `Currency` typesets a monetary amount at, one per reading
+  // distance: `sm` inside a table row or list cell, `md` an amount stated as a fact on
+  // a card, `lg` the headline figure of a pricing card. Each MIRRORS the heading/label
+  // token it used to borrow (`text-label-lg`, `text-heading-md`, `text-heading-2xl`) —
+  // same size ramp, same leading, same weight — and adds the one thing that made
+  // borrowing wrong: the amount's negative tracking.
+  //
+  // `-0.08em` is PROPORTIONAL, and deliberately so, which is why it lives here and not
+  // in `tracking.js`. That scale is absolute (`rem`) on purpose so a step resolves to a
+  // fixed measure at any font size (see its docstring), and it therefore holds no
+  // `-0.08em`-equivalent step. A figure is the one place where the tracking has to
+  // scale WITH the glyphs: the Figma amount specifies −1.28px @16px, −1.92px @24px and
+  // −4.48px @56px, which is one ratio, not three steps. Expressing it as `em` is what
+  // makes a single declaration correct at all three sizes and at every breakpoint of
+  // `lg`'s responsive ramp.
+  //
+  // Dedicated tokens rather than tracking added to the borrowed ones: `text-heading-2xl`
+  // sets every hero headline in the system, and a hero is prose, not a numeral.
+  'text-amount-lg': {
+    textWrapStyle: 'balance',
+    fontSize: { _: fontSize['3xl'], sm: fontSize['5xl'], md: fontSize['6xl'] },
+    lineHeight: leading.tight,
+    fontWeight: fontWeight.normal,
+    letterSpacing: '-0.08em'
+  },
+  'text-amount-md': {
+    textWrapStyle: 'balance',
+    fontSize: { _: fontSize.base, sm: fontSize.xl, md: fontSize['2xl'] },
+    lineHeight: leading.tight,
+    fontWeight: fontWeight.normal,
+    letterSpacing: '-0.08em'
+  },
+  'text-amount-sm': {
+    fontSize: fontSize.base,
+    lineHeight: leading.normal,
+    fontWeight: fontWeight.normal,
+    letterSpacing: '-0.08em'
+  },
   'text-heading-2xl': {
+    textWrapStyle: 'balance',
     fontSize: { _: fontSize['3xl'], sm: fontSize['5xl'], md: fontSize['6xl'] },
     lineHeight: leading.tight,
-    fontWeight: fontWeight.normal
+    fontWeight: fontWeight.normal,
+    letterSpacing: tracking.tighter
   },
   'text-heading-xl': {
+    textWrapStyle: 'balance',
     fontSize: { _: fontSize.xl, sm: fontSize['3xl'], md: fontSize['4xl'] },
     lineHeight: leading.tight,
-    fontWeight: fontWeight.normal
+    fontWeight: fontWeight.normal,
+    letterSpacing: tracking.tighter
   },
   'text-heading-lg': {
+    textWrapStyle: 'balance',
     fontSize: { _: fontSize.lg, md: fontSize['3xl'] },
     lineHeight: leading.tight,
-    fontWeight: fontWeight.normal
+    fontWeight: fontWeight.normal,
+    letterSpacing: tracking.tighter
   },
   'text-heading-md': {
+    textWrapStyle: 'balance',
     fontSize: { _: fontSize.base, sm: fontSize.xl, md: fontSize['2xl'] },
     lineHeight: leading.tight,
-    fontWeight: fontWeight.normal
+    fontWeight: fontWeight.normal,
+    letterSpacing: tracking.tighter
   },
   'text-heading-sm': {
+    textWrapStyle: 'balance',
     fontSize: { _: fontSize.sm, sm: fontSize.base, md: fontSize.lg },
     lineHeight: leading.snug,
-    fontWeight: fontWeight.normal
+    fontWeight: fontWeight.normal,
+    letterSpacing: tracking.tighter
   },
   'text-heading-xs': {
+    textWrapStyle: 'balance',
     fontSize: fontSize.base,
     lineHeight: leading.snug,
-    fontWeight: fontWeight.normal
+    fontWeight: fontWeight.normal,
+    letterSpacing: tracking.tighter
   },
   'text-heading-xxs': {
+    textWrapStyle: 'balance',
     fontSize: fontSize.sm,
     lineHeight: leading.snug,
-    fontWeight: fontWeight.normal
+    fontWeight: fontWeight.normal,
+    letterSpacing: tracking.tighter
   },
   'text-label-lg': {
     fontSize: fontSize.base,
     lineHeight: leading.normal,
-    fontWeight: fontWeight.normal
+    fontWeight: fontWeight.normal,
+    letterSpacing: tracking.tight
   },
   'text-label-md': {
     fontSize: fontSize.sm,
     lineHeight: leading.normal,
-    fontWeight: fontWeight.normal
+    fontWeight: fontWeight.normal,
+    letterSpacing: tracking.tight
   },
   'text-label-sm': {
     fontSize: fontSize.xs,
     lineHeight: leading.normal,
-    fontWeight: fontWeight.normal
+    fontWeight: fontWeight.normal,
+    letterSpacing: tracking.tight
   },
   'text-label-code-sm': {
     fontFamily: fontFamily.code,
     fontSize: fontSize.xs,
     lineHeight: leading.none,
     fontWeight: fontWeight.normal,
-    letterSpacing: tracking.normal
+    letterSpacing: tracking.wide
   },
   'text-body-code-sm': {
     textWrapStyle: 'pretty',
@@ -104,28 +171,30 @@ export const textsData = {
     fontSize: fontSize.xs,
     lineHeight: leading.relaxed,
     fontWeight: fontWeight.normal,
-    letterSpacing: tracking.normal
+    letterSpacing: tracking.wide
   },
   'text-label-code-md': {
     fontFamily: fontFamily.code,
     fontSize: fontSize.sm,
     lineHeight: leading.none,
     fontWeight: fontWeight.normal,
-    letterSpacing: tracking.normal
+    letterSpacing: tracking.wide
   },
   'text-label-code-lg': {
     fontFamily: fontFamily.code,
     fontSize: fontSize.base,
     lineHeight: leading.none,
     fontWeight: fontWeight.normal,
-    letterSpacing: tracking.normal
+    letterSpacing: tracking.wide
   },
   'text-body-lg': {
+    textWrapStyle: 'pretty',
     fontSize: { _: fontSize.base, md: fontSize.lg },
     fontWeight: fontWeight.normal,
     lineHeight: leading.snug
   },
   'text-body-md': {
+    textWrapStyle: 'pretty',
     fontSize: fontSize.base,
     fontWeight: fontWeight.normal,
     lineHeight: leading.snug
@@ -136,16 +205,19 @@ export const textsData = {
     lineHeight: leading.relaxed
   },
   'text-body-sm': {
+    textWrapStyle: 'pretty',
     fontSize: fontSize.sm,
     fontWeight: fontWeight.normal,
     lineHeight: leading.snug
   },
   'text-body-xs': {
+    textWrapStyle: 'pretty',
     fontSize: fontSize.xs,
     fontWeight: fontWeight.normal,
     lineHeight: leading.snug
   },
   'text-body-xxs': {
+    textWrapStyle: 'pretty',
     fontSize: fontSize.xs,
     fontWeight: fontWeight.normal,
     lineHeight: leading.normal