@aziontech/theme 4.3.1 → 5.0.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,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;
@@ -835,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;
@@ -845,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;
@@ -1148,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);
@@ -1396,14 +1438,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); }
 }

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,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;
@@ -835,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;
@@ -845,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;
@@ -1148,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);
@@ -1396,14 +1438,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); }
 }

package/package.json

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

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,6 +28,34 @@ 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': {
         fontSize: {
             _: string;

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":"AAwBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqNE,8FAA8F;;;;;;;;;;;;;;;;;;EAkB/F"}

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

@@ -41,6 +41,46 @@ 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': {
     fontSize: { _: fontSize['3xl'], sm: fontSize['5xl'], md: fontSize['6xl'] },
     lineHeight: leading.tight,