@aziontech/theme 4.3.0 → 5.0.0

package/dist/v4/globals.scss

@@ -173,7 +173,7 @@
 
 
 /*
- * `@aziontech/webkit` components use arbitrary values (`bg-[var(--x)]`) that
+ * `@aziontech/webkit` components use arbitrary values (`bg-(--x)`) that
  * Tailwind v4 only picks up when the source files are inside the scan.
  * Auto-detect scans the CWD only, so we point `@source` at the webkit
  * package via a monorepo-relative path (this file is under
@@ -197,12 +197,16 @@
   --color-blue-950: #000C1A;
   --color-gray-50: #FAFAFA;
   --color-gray-100: #F5F5F5;
+  --color-gray-150: #ECECEC;
   --color-gray-200: #E5E5E5;
+  --color-gray-250: #DADADA;
   --color-gray-300: #B2B2B2;
   --color-gray-400: #999999;
   --color-gray-500: #808080;
   --color-gray-600: #666666;
   --color-gray-700: #4D4D4D;
+  --color-gray-750: #2B2B2B;
+  --color-gray-775: #242424;
   --color-gray-800: #1A1A1A;
   --color-gray-900: #141414;
   --color-gray-950: #0A0A0A;
@@ -404,7 +408,9 @@
   --animate-fade-in: fadeIn 220ms ease-in-out;
   --animate-fade-out: fadeOut 220ms ease-in-out;
   --animate-slide-down: slideDown 220ms ease-in-out;
-  --animate-highlight-fade: highlight ease-in forwards;
+  --animate-highlight-fade: highlight 1100ms ease-in forwards;
+  --animate-page-enter: pageEnter 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
+  --animate-content-enter: contentEnter 240ms cubic-bezier(0.39, 0.57, 0.56, 1) var(--content-enter-delay, 0s) backwards;
   --animate-popup-scale-in: popupScaleIn 150ms cubic-bezier(0.39, 0.57, 0.56, 1);
   --animate-popup-scale-out: popupScaleOut 110ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
   --animate-slide-in-left: slideInLeft 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
@@ -663,7 +669,9 @@
   --animate-fade-in: fadeIn 220ms ease-in-out;
   --animate-fade-out: fadeOut 220ms ease-in-out;
   --animate-slide-down: slideDown 220ms ease-in-out;
-  --animate-highlight-fade: highlight ease-in forwards;
+  --animate-highlight-fade: highlight 1100ms ease-in forwards;
+  --animate-page-enter: pageEnter 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
+  --animate-content-enter: contentEnter 240ms cubic-bezier(0.39, 0.57, 0.56, 1) var(--content-enter-delay, 0s) backwards;
   --animate-popup-scale-in: popupScaleIn 150ms cubic-bezier(0.39, 0.57, 0.56, 1);
   --animate-popup-scale-out: popupScaleOut 110ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
   --animate-slide-in-left: slideInLeft 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
@@ -687,6 +695,19 @@
   --z-input-field: 1;
   --z-input-popup: 10;
   --z-input-overlay: 1100;
+  --layout-boundary-inline: var(--spacing-lg);
+  --layout-boundary-end: var(--spacing-lg);
+  --layout-boundary-start: var(--spacing-lg);
+  --layout-section-gap: var(--spacing-xl);
+  --layout-group-gap: var(--spacing-md);
+  --layout-measure: var(--container-7xl);
+  --layout-measure-focused: var(--container-4xl);
+  --layout-measure-form: var(--container-4xl);
+  --layout-measure-form-create: 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;
   --text-big-number-md-font-weight: 400;
@@ -699,6 +720,20 @@
   --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-font-size: 1.875rem;
   --text-heading-2xl-line-height: 1.25;
   --text-heading-2xl-font-weight: 400;
@@ -734,6 +769,12 @@
   --text-label-code-sm-line-height: 1;
   --text-label-code-sm-font-weight: 400;
   --text-label-code-sm-letter-spacing: 0;
+  --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-label-code-md-font-family: Roboto Mono;
   --text-label-code-md-font-size: 0.875rem;
   --text-label-code-md-line-height: 1;
@@ -745,21 +786,29 @@
   --text-label-code-lg-font-weight: 400;
   --text-label-code-lg-letter-spacing: 0;
   --text-body-lg-font-size: 1rem;
-  --text-body-lg-line-height: 1.5;
+  --text-body-lg-font-weight: 400;
+  --text-body-lg-line-height: 1.375;
   --text-body-md-font-size: 1rem;
-  --text-body-md-line-height: 1.5;
+  --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-font-size: 0.875rem;
-  --text-body-sm-line-height: 1.5;
+  --text-body-sm-font-weight: 400;
+  --text-body-sm-line-height: 1.375;
   --text-body-xs-font-size: 0.75rem;
-  --text-body-xs-line-height: 1.5;
+  --text-body-xs-font-weight: 400;
+  --text-body-xs-line-height: 1.375;
+  --text-body-xxs-font-size: 0.75rem;
+  --text-body-xxs-font-weight: 400;
+  --text-body-xxs-line-height: 1.5;
   --text-tag-sm-font-size: 0.75rem;
   --text-tag-sm-line-height: 1.25;
-  --text-tag-sm-font-weight: 600;
+  --text-tag-sm-font-weight: 400;
   --text-tag-md-font-size: 0.75rem;
   --text-tag-md-line-height: 1.25;
-  --text-tag-md-font-weight: 600;
-  --text-body-xxs-font-size: 0.75rem;
-  --text-body-xxs-line-height: 1.5;
+  --text-tag-md-font-weight: 400;
   --text-overline-md-font-family: Proto Mono;
   --text-overline-md-font-size: 0.75rem;
   --text-overline-md-line-height: 1.375;
@@ -801,6 +850,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;
@@ -811,6 +862,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;
@@ -833,12 +886,16 @@
   --surface-0: #FFFFFF;
   --surface-50: #FAFAFA;
   --surface-100: #F5F5F5;
+  --surface-150: #ECECEC;
   --surface-200: #E5E5E5;
+  --surface-250: #DADADA;
   --surface-300: #B2B2B2;
   --surface-400: #999999;
   --surface-500: #808080;
   --surface-600: #666666;
   --surface-700: #4D4D4D;
+  --surface-750: #2B2B2B;
+  --surface-775: #242424;
   --surface-800: #1A1A1A;
   --surface-900: #141414;
   --surface-950: #0A0A0A;
@@ -867,8 +924,8 @@
   --bg-selected: #E5E5E5;
   --bg-contrast: #141414;
   --bg-disabled: #E5E5E5;
-  --border-default: #00000014;
-  --border-muted: #00000014;
+  --border-default: #DADADA;
+  --border-muted: #ECECEC;
   --border-strong: #000000;
   --border-selected: #F3652B;
   --text-default: #141414;
@@ -904,12 +961,16 @@
   --surface-0: #FFFFFF;
   --surface-50: #FAFAFA;
   --surface-100: #F5F5F5;
+  --surface-150: #ECECEC;
   --surface-200: #E5E5E5;
+  --surface-250: #DADADA;
   --surface-300: #B2B2B2;
   --surface-400: #999999;
   --surface-500: #808080;
   --surface-600: #666666;
   --surface-700: #4D4D4D;
+  --surface-750: #2B2B2B;
+  --surface-775: #242424;
   --surface-800: #1A1A1A;
   --surface-900: #141414;
   --surface-950: #0A0A0A;
@@ -938,8 +999,8 @@
   --bg-selected: #1A1A1A;
   --bg-contrast: #FAFAFA;
   --bg-disabled: #1A1A1A;
-  --border-default: #FFFFFF1A;
-  --border-muted: #FFFFFF0D;
+  --border-default: #2B2B2B;
+  --border-muted: #242424;
   --border-strong: #FFFFFF;
   --border-selected: #F3652B;
   --text-default: #FAFAFA;
@@ -992,8 +1053,8 @@
 }
 
 @keyframes highlight {
-  0% { background-color: var(--surface-hover); font-weight: 500; }
-  100% { background-color: var(--surface-hover); font-weight: 500; }
+  0%, 40% { background-color: var(--surface-hover); font-weight: 500; }
+  100% { background-color: transparent; font-weight: 400; }
 }
 
 @keyframes shimmer {
@@ -1001,6 +1062,16 @@
   100% { background-position: -200% 0; }
 }
 
+@keyframes pageEnter {
+  0% { opacity: 0; translate: calc(var(--page-enter-distance, var(--layout-boundary-inline)) * -1) 0; }
+  100% { opacity: 1; translate: 0 0; }
+}
+
+@keyframes contentEnter {
+  0% { opacity: 0; translate: 0 var(--spacing-xs); }
+  100% { opacity: 1; translate: 0 0; }
+}
+
 @keyframes popupScaleIn {
   0% { opacity: 0; transform: scale(0.9); }
   100% { opacity: 1; transform: scale(1); }
@@ -1096,6 +1167,29 @@
   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 {
   font-size: var(--text-heading-2xl-font-size);
   line-height: var(--text-heading-2xl-line-height);
@@ -1164,6 +1258,15 @@
   letter-spacing: var(--text-label-code-sm-letter-spacing);
 }
 
+@utility text-body-code-sm {
+  text-wrap-style: var(--text-body-code-sm-text-wrap-style);
+  font-family: var(--text-body-code-sm-font-family);
+  font-size: var(--text-body-code-sm-font-size);
+  line-height: var(--text-body-code-sm-line-height);
+  font-weight: var(--text-body-code-sm-font-weight);
+  letter-spacing: var(--text-body-code-sm-letter-spacing);
+}
+
 @utility text-label-code-md {
   font-family: var(--text-label-code-md-font-family);
   font-size: var(--text-label-code-md-font-size);
@@ -1182,24 +1285,40 @@
 
 @utility text-body-lg {
   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 {
   font-size: var(--text-body-md-font-size);
+  font-weight: var(--text-body-md-font-weight);
   line-height: var(--text-body-md-line-height);
 }
 
+@utility text-body-prose-md {
+  font-size: var(--text-body-prose-md-font-size);
+  font-weight: var(--text-body-prose-md-font-weight);
+  line-height: var(--text-body-prose-md-line-height);
+}
+
 @utility text-body-sm {
   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 {
   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 {
+  font-size: var(--text-body-xxs-font-size);
+  font-weight: var(--text-body-xxs-font-weight);
+  line-height: var(--text-body-xxs-line-height);
+}
+
 @utility text-tag-sm {
   font-size: var(--text-tag-sm-font-size);
   line-height: var(--text-tag-sm-line-height);
@@ -1212,11 +1331,6 @@
   font-weight: var(--text-tag-md-font-weight);
 }
 
-@utility text-body-xxs {
-  font-size: var(--text-body-xxs-font-size);
-  line-height: var(--text-body-xxs-line-height);
-}
-
 @utility text-overline-md {
   font-family: var(--text-overline-md-font-family);
   font-size: var(--text-overline-md-font-size);
@@ -1271,6 +1385,77 @@
   .text-link { transition: none; }
 }
 
+@utility layout-boundary {
+  padding-inline: var(--layout-boundary-inline);
+  padding-block-start: var(--layout-boundary-start);
+  padding-block-end: var(--layout-boundary-end);
+}
+
+@utility layout-boundary-inline {
+  padding-inline: var(--layout-boundary-inline);
+}
+
+@utility layout-section-start {
+  margin-block-start: var(--layout-boundary-start);
+  &:first-child { margin-block-start: 0; }
+}
+
+@utility layout-group-start {
+  margin-block-start: var(--layout-group-gap);
+  &:first-child { margin-block-start: 0; }
+}
+
+@utility layout-column {
+  --layout-column-measure: var(--layout-measure);
+  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-focused {
+  --layout-column-measure: var(--layout-measure-focused);
+  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-form {
+  --layout-column-measure: var(--layout-measure-form);
+  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-form-create {
+  --layout-column-measure: var(--layout-measure-form-create);
+  --layout-measure-control: var(--container-md);
+  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-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); }
+}
+
 @utility bg-surface-0 { background-color: var(--surface-0); }
 @utility text-surface-0 { color: var(--surface-0); }
 @utility border-surface-0 { border-color: var(--surface-0); }
@@ -1280,9 +1465,15 @@
 @utility bg-surface-100 { background-color: var(--surface-100); }
 @utility text-surface-100 { color: var(--surface-100); }
 @utility border-surface-100 { border-color: var(--surface-100); }
+@utility bg-surface-150 { background-color: var(--surface-150); }
+@utility text-surface-150 { color: var(--surface-150); }
+@utility border-surface-150 { border-color: var(--surface-150); }
 @utility bg-surface-200 { background-color: var(--surface-200); }
 @utility text-surface-200 { color: var(--surface-200); }
 @utility border-surface-200 { border-color: var(--surface-200); }
+@utility bg-surface-250 { background-color: var(--surface-250); }
+@utility text-surface-250 { color: var(--surface-250); }
+@utility border-surface-250 { border-color: var(--surface-250); }
 @utility bg-surface-300 { background-color: var(--surface-300); }
 @utility text-surface-300 { color: var(--surface-300); }
 @utility border-surface-300 { border-color: var(--surface-300); }
@@ -1298,6 +1489,12 @@
 @utility bg-surface-700 { background-color: var(--surface-700); }
 @utility text-surface-700 { color: var(--surface-700); }
 @utility border-surface-700 { border-color: var(--surface-700); }
+@utility bg-surface-750 { background-color: var(--surface-750); }
+@utility text-surface-750 { color: var(--surface-750); }
+@utility border-surface-750 { border-color: var(--surface-750); }
+@utility bg-surface-775 { background-color: var(--surface-775); }
+@utility text-surface-775 { color: var(--surface-775); }
+@utility border-surface-775 { border-color: var(--surface-775); }
 @utility bg-surface-800 { background-color: var(--surface-800); }
 @utility text-surface-800 { color: var(--surface-800); }
 @utility border-surface-800 { border-color: var(--surface-800); }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aziontech/theme",
   "type": "module",
-  "version": "4.3.0",
+  "version": "5.0.0",
   "author": "aziontech",
   "license": "MIT",
   "repository": {
@@ -44,6 +44,7 @@
     ".": "./dist/v4/globals.css",
     "./animations": "./src/tokens/primitives/animations/animate.js",
     "./colors": "./src/tokens/primitives/colors/colors.js",
+    "./layouts": "./src/tokens/semantic/layouts.data.js",
     "./texts": "./src/tokens/semantic/texts.data.js",
     "./theme-colors": "./src/scripts/compile-theme.js"
   }

package/src/scripts/build-tokens.mjs

@@ -14,6 +14,10 @@
  *                               typography, breakpoints, animations, …)
  *   - `tokens/semantic/{containers,spacings,texts}.data.js`
  *                               responsive-shaped semantic tokens
+ *   - `tokens/semantic/layouts.data.js`
+ *                               layout tokens (all derived from --spacing-* /
+ *                               --container-*) + the `@utility` blocks that
+ *                               build the container system on them
  *   - `tokens/primitives/animations/{animate,keyframes}.js`
  *                               animation utilities (`--animate-*`) + `@keyframes`
  *                               definitions + extra CSS (transform-origin) for
@@ -32,6 +36,7 @@ import { breakpoints } from '../tokens/primitives/breakpoints.js';
 import { compilePrimitivesVars } from './compile-primitives.js';
 import { compileThemeCss, compileThemeVars } from './compile-theme.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';
@@ -92,6 +97,7 @@ const buildFlatModel = () => ({
   containers: flattenSingleValue(containersData, (k) => `--container-${k}`),
   spacings: flattenSingleValue(spacingsData, (k) => `--${k}`),
   zIndices: flattenSingleValue(zIndicesData, (k) => `--${k}`),
+  layouts: flattenSingleValue(layoutsData, (k) => `--${k}`),
   texts: flattenBundle(textsData),
 });
 
@@ -234,6 +240,33 @@ const emitSemanticColorUtilities = () => {
  * interactive element loses the hand cursor unless a component overrides it.
  * Disabled controls keep the default cursor.
  */
+/**
+ * Emit a map of `@utility` blocks. A string value is a plain declaration; an object
+ * value is a nested rule keyed by a literal selector (`&:first-child { … }`), the way
+ * the typography utilities nest their `&:hover`.
+ */
+const emitUtilities = (utilities) =>
+  Object.entries(utilities)
+    .map(([name, decls]) => {
+      const body = Object.entries(decls)
+        .map(([prop, value]) =>
+          typeof value === 'object'
+            ? `  ${prop} { ${formatStateDecls(value)}; }`
+            : `  ${prop}: ${value};`,
+        )
+        .join('\n');
+      return `@utility ${name} {\n${body}\n}`;
+    })
+    .join('\n\n');
+
+/**
+ * The container system as `@utility` blocks — same reason as the typography
+ * utilities: `@layer components` classes are opaque to the variant resolver, and a
+ * layout class is exactly the kind a consumer wants behind a variant
+ * (`md:layout-column`).
+ */
+const emitLayoutUtilities = () => emitUtilities(layoutsUtilities);
+
 const emitBaseLayer = () =>
   [
     '@layer base {',
@@ -310,6 +343,7 @@ const emitCssV4 = () => {
     ...(m.containers._ || {}),
     ...(m.spacings._ || {}),
     ...(m.zIndices._ || {}),
+    ...(m.layouts._ || {}),
     ...(m.texts._ || {}),
   };
 
@@ -319,6 +353,7 @@ const emitCssV4 = () => {
       ...(m.containers[bp] || {}),
       ...(m.spacings[bp] || {}),
       ...(m.zIndices[bp] || {}),
+      ...(m.layouts[bp] || {}),
       ...(m.texts[bp] || {}),
     };
     if (Object.keys(merged).length === 0) continue;
@@ -337,7 +372,7 @@ const emitCssV4 = () => {
     '@import "tailwindcss";',
     '',
     '/*',
-    ' * `@aziontech/webkit` components use arbitrary values (`bg-[var(--x)]`) that',
+    ' * `@aziontech/webkit` components use arbitrary values (`bg-(--x)`) that',
     ' * Tailwind v4 only picks up when the source files are inside the scan.',
     ' * Auto-detect scans the CWD only, so we point `@source` at the webkit',
     ' * package via a monorepo-relative path (this file is under',
@@ -366,6 +401,8 @@ const emitCssV4 = () => {
     '',
     emitTextUtilities(),
     '',
+    emitLayoutUtilities(),
+    '',
     emitSemanticColorUtilities(),
     '',
     emitBaseLayer(),

package/src/tokens/README.md

@@ -179,7 +179,31 @@ export const spacingsData = {
 }
 ```
 
-`_` is the base value emitted in `:root`; the breakpoint keys (`sm`, `md`, `lg`, `xl`, `2xl`) become media-query overrides.
+`_` is the base value emitted in `:root`; the breakpoint keys (`sm`, `md`, `lg`, `xl`, `2xl`) become media-query overrides. A bare string is accepted as shorthand for `{ _: value }`.
+
+### Derived groups (`layouts.data.js`)
+
+`semantic/layouts` is a **derived** group: every value is a `var()` reference to `--spacing-*` /
+`--container-*`, never a literal length.
+
+```js
+// tokens/semantic/layouts.data.js
+export const layoutsData = {
+  'layout-boundary-inline': 'var(--spacing-lg)',
+  'layout-measure': 'var(--container-7xl)'
+  // …
+}
+```
+
+That indirection is the whole point, and it is why these carry no breakpoint map of their own: the
+spacing scale is already responsive (`--spacing-lg` is `1rem`, then `1.5rem` from `sm`), and a `var()`
+is substituted at **use** time on the element — so a layout token follows the breakpoint override for
+free. Giving it its own map would duplicate the spacing scale into layout and let the two drift.
+
+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'`).
 
 ---
 

package/src/tokens/primitives/animations/animate.d.ts

@@ -25,6 +25,8 @@ export const animate: {
     'fade-out': string;
     'slide-down': string;
     'highlight-fade': string;
+    'page-enter': string;
+    'content-enter': string;
     'popup-scale-in': string;
     'popup-scale-out': string;
     'slide-in-left': string;
@@ -36,6 +38,8 @@ export const animate: {
     'flow-dash': string;
 };
 export const useWhen: {
+    'page-enter': string;
+    'content-enter': string;
     spin: string;
     ping: string;
     pulse: string;

package/src/tokens/primitives/animations/animate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["animate.js"],"names":[],"mappings":"AAAA;;;;;EAKC;AAED;;;;;;;;;EASC;AAED;;;;;;;;;;;;;;;;;;;;EAsBC;AAED;;;;;;;;;;;;;;;;;;;;EAwBC"}
+{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["animate.js"],"names":[],"mappings":"AAAA;;;;;EAKC;AAED;;;;;;;;;EASC;AAED;;;;;;;;;;;;;;;;;;;;;;EAwBC;AAED;;;;;;;;;;;;;;;;;;;;;;EA4BC"}

package/src/tokens/primitives/animations/animate.js

@@ -26,7 +26,9 @@ export const animate = {
   'fade-in': 'fadeIn 220ms ease-in-out',
   'fade-out': 'fadeOut 220ms ease-in-out',
   'slide-down': 'slideDown 220ms ease-in-out',
-  'highlight-fade': 'highlight ease-in forwards',
+  'highlight-fade': `highlight ${duration['slow-03']} ease-in forwards`,
+  'page-enter': `pageEnter ${duration['moderate-02']} ${curve['productive-entrance']}`,
+  'content-enter': `contentEnter ${duration['moderate-02']} ${curve['productive-entrance']} var(--content-enter-delay, 0s) backwards`,
   'popup-scale-in': `popupScaleIn ${duration['moderate-01']} ${curve['productive-entrance']}`,
   'popup-scale-out': `popupScaleOut ${duration['fast-02']} ${curve['productive-exit']}`,
   'slide-in-left': `slideInLeft ${duration['moderate-02']} ${curve['productive-entrance']}`,
@@ -41,6 +43,10 @@ export const animate = {
 }
 
 export const useWhen = {
+  'page-enter':
+    'A page arriving on a route change — on the CONTENT ZONE only, never the shell. The chrome is the same before and after, and sliding it announces a reload that did not happen. Key it on the route path so a component serving several paths still replays it. Nothing inside the page may animate on mount at the same time: the two run in lockstep and read as one element travelling on a diagonal.',
+  'content-enter':
+    'Content settling INSIDE a page that is already on screen — a loading window resolving, a filtered list swapping, a step changing. Never on first paint of a page whose own entrance is already running (use it after that entrance, or after a wire). Stagger a follower with --content-enter-delay.',
   spin: 'Indeterminate circular spinners (loading icons).',
   ping: 'One-off attention ring radiating from a small element (notification dot).',
   pulse: 'Skeleton/placeholder opacity pulse while content loads.',

package/src/tokens/primitives/animations/keyframes.d.ts

@@ -16,13 +16,21 @@ export namespace keyframes {
         '50%': string;
     };
     let highlight: {
-        '0%': string;
+        '0%, 40%': string;
         '100%': string;
     };
     let shimmer: {
         '0%': string;
         '100%': string;
     };
+    let pageEnter: {
+        '0%': string;
+        '100%': string;
+    };
+    let contentEnter: {
+        '0%': string;
+        '100%': string;
+    };
     let popupScaleIn: {
         '0%': string;
         '100%': string;

package/src/tokens/primitives/animations/keyframes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyframes.d.ts","sourceRoot":"","sources":["keyframes.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmFA;;;;GAIG;AACH;;;;;;;EAGC"}
+{"version":3,"file":"keyframes.d.ts","sourceRoot":"","sources":["keyframes.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6FA;;;;GAIG;AACH;;;;;;;EAGC"}

package/src/tokens/primitives/animations/keyframes.js

@@ -28,14 +28,24 @@ export const keyframes = {
     '0%, 100%': 'opacity: 1',
     '50%': 'opacity: 0'
   },
+  // Holds the highlight for the first 40% of the run, then fades it back to
+  // normal over the remaining 60% — a row-flash, not a permanent tint.
   highlight: {
-    '0%': 'background-color: var(--surface-hover); font-weight: 500',
-    '100%': 'background-color: var(--surface-hover); font-weight: 500'
+    '0%, 40%': 'background-color: var(--surface-hover); font-weight: 500',
+    '100%': 'background-color: transparent; font-weight: 400'
   },
   shimmer: {
     '0%': 'background-position: 200% 0',
     '100%': 'background-position: -200% 0'
   },
+  pageEnter: {
+    '0%': 'opacity: 0; translate: calc(var(--page-enter-distance, var(--layout-boundary-inline)) * -1) 0',
+    '100%': 'opacity: 1; translate: 0 0'
+  },
+  contentEnter: {
+    '0%': 'opacity: 0; translate: 0 var(--spacing-xs)',
+    '100%': 'opacity: 1; translate: 0 0'
+  },
   popupScaleIn: {
     '0%': 'opacity: 0; transform: scale(0.9)',
     '100%': 'opacity: 1; transform: scale(1)'