@aziontech/theme 5.0.0 → 5.1.0

package/dist/v4/globals.css

@@ -734,72 +734,94 @@
   --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;
@@ -1191,63 +1213,80 @@
 }
 
 @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 {
@@ -1284,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);
@@ -1302,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);
@@ -1601,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

@@ -734,72 +734,94 @@
   --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;
@@ -1191,63 +1213,80 @@
 }
 
 @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 {
@@ -1284,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);
@@ -1302,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);
@@ -1601,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": "5.0.0",
+  "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/texts.data.d.ts

@@ -57,6 +57,7 @@ export const textsData: {
         letterSpacing: string;
     };
     'text-heading-2xl': {
+        textWrapStyle: string;
         fontSize: {
             _: string;
             sm: string;
@@ -64,8 +65,10 @@ export const textsData: {
         };
         lineHeight: number;
         fontWeight: number;
+        letterSpacing: string;
     };
     'text-heading-xl': {
+        textWrapStyle: string;
         fontSize: {
             _: string;
             sm: string;
@@ -73,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;
@@ -90,8 +97,10 @@ export const textsData: {
         };
         lineHeight: number;
         fontWeight: number;
+        letterSpacing: string;
     };
     'text-heading-sm': {
+        textWrapStyle: string;
         fontSize: {
             _: string;
             sm: string;
@@ -99,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;
@@ -155,6 +172,7 @@ export const textsData: {
         letterSpacing: string;
     };
     'text-body-lg': {
+        textWrapStyle: string;
         fontSize: {
             _: string;
             md: string;
@@ -163,6 +181,7 @@ export const textsData: {
         lineHeight: number;
     };
     'text-body-md': {
+        textWrapStyle: string;
         fontSize: string;
         fontWeight: number;
         lineHeight: number;
@@ -173,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqNE,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)
@@ -82,61 +92,78 @@ export const textsData = {
     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',
@@ -144,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
@@ -176,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