@aziontech/theme 5.0.0 → 5.2.0

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/animations/animate.d.ts

@@ -36,6 +36,9 @@ export const animate: {
     'progress-indeterminate': string;
     'progress-indeterminate-short': string;
     'flow-dash': string;
+    'texture-wave-a': string;
+    'texture-wave-b': string;
+    'brand-marquee': string;
 };
 export const useWhen: {
     'page-enter': string;
@@ -59,6 +62,9 @@ export const useWhen: {
     'progress-indeterminate': string;
     'progress-indeterminate-short': string;
     'flow-dash': string;
+    'texture-wave-a': string;
+    'texture-wave-b': string;
+    'brand-marquee': string;
 };
 declare namespace _default {
     export { animate };

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;;;;;;;;;;;;;;;;;;;;;;EAwBC;AAED;;;;;;;;;;;;;;;;;;;;;;EA4BC"}
+{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["animate.js"],"names":[],"mappings":"AAAA;;;;;EAKC;AAED;;;;;;;;;EASC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;EA2BC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;EAkCC"}

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

@@ -39,7 +39,10 @@ export const animate = {
   'progress-indeterminate-short': `progressIndeterminateShort ${duration['slow-04']} ${curve['expressive-entrance']} ${duration['slow-03']} infinite`,
   // `linear` (not a curve token) for the same reason as spin/shimmer: an endlessly
   // looping animation must not accelerate, or the seam between repeats is visible.
-  'flow-dash': `flowDash ${duration['slow-02']} linear infinite`
+  'flow-dash': `flowDash ${duration['slow-02']} linear infinite`,
+  'texture-wave-a': 'textureWaveA 13s linear infinite',
+  'texture-wave-b': 'textureWaveB 19s linear infinite',
+  'brand-marquee': 'brandMarquee 59s linear infinite'
 }
 
 export const useWhen = {
@@ -69,7 +72,13 @@ export const useWhen = {
   'progress-indeterminate': 'Indeterminate linear progress bar (primary sweep).',
   'progress-indeterminate-short': 'Indeterminate linear progress bar (secondary short sweep).',
   'flow-dash':
-    'Flowing connection along an SVG connector stroke in a node-based / network diagram. Set a stroke-dasharray whose cycle divides 24 (e.g. 4 4) so the loop is seamless.'
+    'Flowing connection along an SVG connector stroke in a node-based / network diagram. Set a stroke-dasharray whose cycle divides 24 (e.g. 4 4) so the loop is seamless.',
+  'texture-wave-a':
+    'One of the two crossing bands of a pixelate texture, travelling left. Set --texture-wave-shift on the element to one period of its banding measured along X, and overhang the element by that much on the side it travels toward, or the field uncovers mid-cycle.',
+  'texture-wave-b':
+    'The counter-travelling band of that pair (pair of texture-wave-a; same --texture-wave-shift contract, opposite direction).',
+  'brand-marquee':
+    'A strip of logos looping forever (client trust strips, framework strips). Apply to a track holding its row exactly twice, the duplicate aria-hidden, and set animation-duration ON THE ELEMENT from the mark count so every strip on a site moves at one speed rather than one duration — a var in this shorthand would resolve at :root and never see it. Pause it on hover and focus-within so a linked mark can be reached.'
 }
 
 export default { animate, curve, duration, useWhen }

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

@@ -69,6 +69,17 @@ export namespace keyframes {
         '0%': string;
         '100%': string;
     };
+    namespace textureWaveA {
+        let to: string;
+    }
+    namespace textureWaveB {
+        let to_1: string;
+        export { to_1 as to };
+    }
+    let brandMarquee: {
+        '0%': string;
+        '100%': string;
+    };
 }
 /**
  * Utilities that need CSS properties beyond the `animation` shorthand

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

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

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

@@ -88,6 +88,16 @@ export const keyframes = {
   flowDash: {
     '0%': 'stroke-dashoffset: 24',
     '100%': 'stroke-dashoffset: 0'
+  },
+  textureWaveA: {
+    to: 'transform: translate3d(calc(-1 * var(--texture-wave-shift)), 0, 0)'
+  },
+  textureWaveB: {
+    to: 'transform: translate3d(var(--texture-wave-shift), 0, 0)'
+  },
+  brandMarquee: {
+    '0%': 'transform: translateX(0)',
+    '100%': 'transform: translateX(-50%)'
   }
 }
 

package/src/tokens/primitives/colors/colors.d.ts

@@ -23,10 +23,12 @@ export namespace primitives {
         150: string;
         200: string;
         250: string;
+        275: string;
         300: string;
         400: string;
         500: string;
         600: string;
+        650: string;
         700: string;
         750: string;
         775: string;

package/src/tokens/primitives/colors/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["colors.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCACuC,YAAY;sBAAZ,YAAY;sBAD7B,YAAY"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["colors.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCACuC,YAAY;sBAAZ,YAAY;sBAD7B,YAAY"}

package/src/tokens/primitives/colors/colors.js

@@ -32,10 +32,12 @@ export const primitives = {
     150: '#ECECEC',
     200: '#E5E5E5',
     250: '#DADADA',
+    275: '#D1D1D1',
     300: '#B2B2B2',
     400: '#999999',
     500: '#808080',
     600: '#666666',
+    650: '#535353',
     700: '#4D4D4D',
     750: '#2B2B2B',
     775: '#242424',

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/primitives/typography/tracking.js

@@ -5,7 +5,7 @@
  * resolves to a fixed 1.6px instead of 10% of the element's font size.
  */
 export const tracking = {
-  tighter: '-0.05rem',
+  tighter: '-0.16rem',
   tight: '-0.025rem',
   normal: '0',
   wide: '0.025rem',

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

@@ -56,7 +56,19 @@ export const textsData: {
         fontWeight: number;
         letterSpacing: string;
     };
+    'text-heading-3xl': {
+        textWrapStyle: string;
+        fontSize: {
+            _: string;
+            sm: string;
+            md: string;
+        };
+        lineHeight: number;
+        fontWeight: number;
+        letterSpacing: string;
+    };
     'text-heading-2xl': {
+        textWrapStyle: string;
         fontSize: {
             _: string;
             sm: string;
@@ -64,8 +76,10 @@ export const textsData: {
         };
         lineHeight: number;
         fontWeight: number;
+        letterSpacing: string;
     };
     'text-heading-xl': {
+        textWrapStyle: string;
         fontSize: {
             _: string;
             sm: string;
@@ -73,16 +87,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 +108,10 @@ export const textsData: {
         };
         lineHeight: number;
         fontWeight: number;
+        letterSpacing: string;
     };
     'text-heading-sm': {
+        textWrapStyle: string;
         fontSize: {
             _: string;
             sm: string;
@@ -99,31 +119,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 +183,7 @@ export const textsData: {
         letterSpacing: string;
     };
     'text-body-lg': {
+        textWrapStyle: string;
         fontSize: {
             _: string;
             md: string;
@@ -163,6 +192,7 @@ export const textsData: {
         lineHeight: number;
     };
     'text-body-md': {
+        textWrapStyle: string;
         fontSize: string;
         fontWeight: number;
         lineHeight: number;
@@ -173,16 +203,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkPE,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)
@@ -46,7 +56,7 @@ export const textsData = {
   // 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`) —
+  // token it used to borrow (`text-label-lg`, `text-heading-md`, `text-heading-3xl`) —
   // same size ramp, same leading, same weight — and adds the one thing that made
   // borrowing wrong: the amount's negative tracking.
   //
@@ -59,7 +69,7 @@ export const textsData = {
   // 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`
+  // Dedicated tokens rather than tracking added to the borrowed ones: `text-heading-3xl`
   // sets every hero headline in the system, and a hero is prose, not a numeral.
   'text-amount-lg': {
     textWrapStyle: 'balance',
@@ -81,62 +91,86 @@ export const textsData = {
     fontWeight: fontWeight.normal,
     letterSpacing: '-0.08em'
   },
-  'text-heading-2xl': {
+  'text-heading-3xl': {
+    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-2xl': {
+    textWrapStyle: 'balance',
+    fontSize: { _: fontSize['3xl'], sm: fontSize['4xl'], md: fontSize['5xl'] },
+    lineHeight: leading.none,
+    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.normal
   },
   'text-heading-lg': {
+    textWrapStyle: 'balance',
     fontSize: { _: fontSize.lg, md: fontSize['3xl'] },
     lineHeight: leading.tight,
-    fontWeight: fontWeight.normal
+    fontWeight: fontWeight.normal,
+    letterSpacing: tracking.normal
   },
   '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.normal
   },
   '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.normal
   },
   'text-heading-xs': {
+    textWrapStyle: 'balance',
     fontSize: fontSize.base,
     lineHeight: leading.snug,
-    fontWeight: fontWeight.normal
+    fontWeight: fontWeight.normal,
+    letterSpacing: tracking.normal
   },
   'text-heading-xxs': {
+    textWrapStyle: 'balance',
     fontSize: fontSize.sm,
     lineHeight: leading.snug,
-    fontWeight: fontWeight.normal
+    fontWeight: fontWeight.normal,
+    letterSpacing: tracking.normal
   },
   '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 +178,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 +212,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

package/src/tokens/theme/background.js

@@ -2,7 +2,7 @@ import { tokenRef } from '../../scripts/refs.js'
 
 export const background = {
   light: {
-    'bg-canvas': tokenRef('theme.surfaces.surface-50'),
+    'bg-canvas': tokenRef('theme.surfaces.surface-100'),
     'bg-surface': tokenRef('theme.surfaces.surface-0'),
     'bg-surface-raised': tokenRef('theme.surfaces.surface-0'),
     'bg-mask': tokenRef('primitives.alpha.black.50'),

package/src/tokens/theme/border.js

@@ -8,12 +8,12 @@ import { tokenRef } from '../../scripts/refs.js'
 // brighter line, so any stacked or abutting border doubled. An opaque step gives a rule one
 // identity wherever it is drawn, and makes overlap a no-op.
 //
-// The steps are ones added to fill the ramp's gaps (`gray.150` / `gray.250` / `gray.750` /
+// The steps are ones added to fill the ramp's gaps (`gray.150` / `gray.275` / `gray.750` /
 // `gray.775`), NOT the steps that bracket them — `surface-200` (light) and `surface-800` (dark)
 // are what `--bg-selected` and `--bg-disabled` already use, so a border drawn there is exactly
 // its own fill and vanishes. Every pairing a component can produce now clears zero:
-//   light default  surface-250  vs canvas 32 · surface 37 · selected/disabled 11
-//   light muted    surface-150  vs canvas 14 · surface 19 · selected/disabled 7
+//   light default  surface-275  vs canvas 36 · surface 46 · selected/disabled 20
+//   light muted    surface-150  vs canvas 9 · surface 19 · selected/disabled 7
 //   dark  default  surface-750  vs canvas 43 · surface 33 · raised 23 · selected 17
 //   dark  muted    surface-775  vs canvas 36 · surface 26 · raised 16 · selected 10
 //
@@ -24,7 +24,7 @@ import { tokenRef } from '../../scripts/refs.js'
 // cannot go proportionally as subtle: `--bg-surface-raised` sits at 20 and would swallow it.
 export const border = {
   light: {
-    'border-default': tokenRef('theme.surfaces.surface-250'),
+    'border-default': tokenRef('theme.surfaces.surface-275'),
     'border-muted': tokenRef('theme.surfaces.surface-150'),
     'border-strong': tokenRef('primitives.base.black'),
     'border-selected': tokenRef('brand.primary.primary-500')

package/src/tokens/theme/illustration.d.ts

@@ -0,0 +1,74 @@
+export namespace illustration {
+    export { aliases as light };
+    export { aliases as dark };
+}
+declare namespace _default {
+    export { illustration };
+}
+export default _default;
+declare const aliases: {
+    'illustration-ground': {
+        __ref: any;
+    };
+    'illustration-surface': {
+        __ref: any;
+    };
+    'illustration-surface-raised': {
+        __ref: any;
+    };
+    'illustration-block': {
+        __ref: any;
+    };
+    'illustration-line': {
+        __ref: any;
+    };
+    'illustration-line-muted': {
+        __ref: any;
+    };
+    'illustration-line-strong': {
+        __ref: any;
+    };
+    'illustration-highlight': {
+        __ref: any;
+    };
+    'illustration-ink': {
+        __ref: any;
+    };
+    'illustration-ink-muted': {
+        __ref: any;
+    };
+    'illustration-primary': {
+        __ref: any;
+    };
+    'illustration-accent': {
+        __ref: any;
+    };
+    'illustration-code-punctuation': {
+        __ref: any;
+    };
+    'illustration-code-keyword': {
+        __ref: any;
+    };
+    'illustration-success': {
+        __ref: any;
+    };
+    'illustration-success-surface': {
+        __ref: any;
+    };
+    'illustration-danger': {
+        __ref: any;
+    };
+    'illustration-warning': {
+        __ref: any;
+    };
+    'illustration-warning-surface': {
+        __ref: any;
+    };
+    'illustration-info': {
+        __ref: any;
+    };
+    'illustration-info-surface': {
+        __ref: any;
+    };
+};
+//# sourceMappingURL=illustration.d.ts.map

package/src/tokens/theme/illustration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"illustration.d.ts","sourceRoot":"","sources":["illustration.js"],"names":[],"mappings":";;;;;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBC"}

package/src/tokens/theme/illustration.js

@@ -0,0 +1,32 @@
+import { tokenRef } from '../../scripts/refs.js'
+
+const aliases = {
+  'illustration-ground': tokenRef('theme.background.bg-canvas'),
+  'illustration-surface': tokenRef('theme.background.bg-surface'),
+  'illustration-surface-raised': tokenRef('theme.background.bg-surface-raised'),
+  'illustration-block': tokenRef('theme.background.bg-selected'),
+  'illustration-line': tokenRef('theme.border.border-default'),
+  'illustration-line-muted': tokenRef('theme.border.border-muted'),
+  'illustration-line-strong': tokenRef('theme.text.text-disabled'),
+  'illustration-highlight': tokenRef('theme.border.border-strong'),
+  'illustration-ink': tokenRef('theme.text.text-default'),
+  'illustration-ink-muted': tokenRef('theme.text.text-muted'),
+  'illustration-primary': tokenRef('theme.primary.primary'),
+  'illustration-accent': tokenRef('theme.accent.accent'),
+  'illustration-code-punctuation': tokenRef('theme.codeSintax.code-sintax-punctuation'),
+  'illustration-code-keyword': tokenRef('theme.codeSintax.code-sintax-keyword'),
+  'illustration-success': tokenRef('theme.success.success-contrast'),
+  'illustration-success-surface': tokenRef('theme.success.success'),
+  'illustration-danger': tokenRef('theme.danger.danger-contrast'),
+  'illustration-warning': tokenRef('theme.warning.warning-contrast'),
+  'illustration-warning-surface': tokenRef('theme.warning.warning'),
+  'illustration-info': tokenRef('theme.info.info-contrast'),
+  'illustration-info-surface': tokenRef('theme.info.info')
+}
+
+export const illustration = {
+  light: aliases,
+  dark: aliases
+}
+
+export default { illustration }

package/src/tokens/theme/surfaces.d.ts

@@ -25,6 +25,9 @@ declare const shared: {
     'surface-250': {
         __ref: any;
     };
+    'surface-275': {
+        __ref: any;
+    };
     'surface-300': {
         __ref: any;
     };
@@ -37,6 +40,9 @@ declare const shared: {
     'surface-600': {
         __ref: any;
     };
+    'surface-650': {
+        __ref: any;
+    };
     'surface-700': {
         __ref: any;
     };