@aziontech/theme 4.3.0 → 4.3.1

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

@@ -0,0 +1,65 @@
+/**
+ * Layout tokens — the console's container system.
+ *
+ * Three decisions, expressed once: how far content sits from the app chrome
+ * (BOUNDARY), how far things sit from each other (RHYTHM), and how wide a reading
+ * column may get (MEASURE).
+ *
+ * A DERIVED GROUP: every value here is a `var()` reference to `--spacing-*` /
+ * `--container-*`. Never write a literal length in this file. That indirection is the
+ * whole point — the spacing scale is already fluid (`--spacing-lg` is 1rem, then
+ * 1.5rem from `sm`), and `var()` is substituted at USE time on the element, so a
+ * layout token follows the breakpoint override without owning a breakpoint map of its
+ * own. Giving these their own maps would duplicate the spacing scale into layout and
+ * let the two drift.
+ */
+export const layoutsData: {
+    'layout-boundary-inline': string;
+    'layout-boundary-end': string;
+    'layout-boundary-start': string;
+    'layout-section-gap': string;
+    'layout-group-gap': string;
+    'layout-measure': string;
+    'layout-measure-focused': string;
+    'layout-measure-form': string;
+    'layout-measure-form-create': string;
+    'layout-measure-docs': string;
+    'container-site': string;
+    'layout-measure-control': string;
+};
+export const layoutsUtilities: {
+    'layout-field-control': {
+        '&:not(#\\#)': {
+            display: string;
+            flex: string;
+            'justify-content': string;
+            'max-width': string;
+        };
+    };
+    'layout-boundary': {
+        'padding-inline': string;
+        'padding-block-start': string;
+        'padding-block-end': string;
+    };
+    'layout-boundary-inline': {
+        'padding-inline': string;
+    };
+    'layout-section-start': {
+        'margin-block-start': string;
+        '&:first-child': {
+            'margin-block-start': string;
+        };
+    };
+    'layout-group-start': {
+        'margin-block-start': string;
+        '&:first-child': {
+            'margin-block-start': string;
+        };
+    };
+};
+declare namespace _default {
+    export { layoutsData };
+    export { layoutsUtilities };
+}
+export default _default;
+//# sourceMappingURL=layouts.data.d.ts.map

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

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

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

@@ -0,0 +1,282 @@
+/**
+ * Layout tokens — the console's container system.
+ *
+ * Three decisions, expressed once: how far content sits from the app chrome
+ * (BOUNDARY), how far things sit from each other (RHYTHM), and how wide a reading
+ * column may get (MEASURE).
+ *
+ * A DERIVED GROUP: every value here is a `var()` reference to `--spacing-*` /
+ * `--container-*`. Never write a literal length in this file. That indirection is the
+ * whole point — the spacing scale is already fluid (`--spacing-lg` is 1rem, then
+ * 1.5rem from `sm`), and `var()` is substituted at USE time on the element, so a
+ * layout token follows the breakpoint override without owning a breakpoint map of its
+ * own. Giving these their own maps would duplicate the spacing scale into layout and
+ * let the two drift.
+ */
+export const layoutsData = {
+  // BOUNDARY — content ↔ app chrome.
+  'layout-boundary-inline': 'var(--spacing-lg)',
+  'layout-boundary-end': 'var(--spacing-lg)',
+  'layout-boundary-start': 'var(--spacing-lg)',
+
+  /*
+   * RHYTHM — two levels, nothing else.
+   *
+   * THE PAGE SHAPE. The page stack never carries a vertical `gap`. It holds the
+   * heading and ONE element below it, and that element carries the BAND step:
+   *
+   *   <div class="layout-column layout-boundary flex min-w-0 flex-col">
+   *     <PageHeading />
+   *     <section class="layout-section-start flex flex-col
+   *                     gap-(--layout-section-gap)">      the bands
+   *       <section class="flex flex-col gap-(--layout-group-gap)">…</section>
+   *       <form    class="flex flex-col gap-(--layout-group-gap)">…</form>
+   *     </section>
+   *   </div>
+   *
+   * So there are exactly three levels, each owning one decision: the BOUNDARY sets the
+   * page's top inset, the PARENT SECTION spaces the sections inside it with
+   * --layout-section-gap, and each of those sections spaces its own parts with
+   * --layout-group-gap (its title over its card, its controls over the table they
+   * narrow). Every page carries the parent section, whether it holds one section or
+   * seven, so the shape is the same to read and a second section needs no rework.
+   *
+   * TWO TOKENS, TUNED SEPARATELY. The space above the first section belongs to the
+   * BOUNDARY (--layout-boundary-start) and the space between sections belongs to the
+   * PARENT (--layout-section-gap), so either moves without the other. Today the
+   * section step is one stop larger than the boundary step: the page opens tight under
+   * its heading and then separates its sections more firmly than the parts inside any
+   * one of them. Retune either here and every page follows — no page restates a step.
+   *
+   * A `gap` is right on the parent section and inside a section, and wrong on the page
+   * stack: within the parent every child IS a section, so one rule spaces them all; on
+   * the page stack the heading and the parent are different kinds of thing.
+   * `.layout-group-start` covers the one case a parent cannot: a group whose parts are
+   * already direct siblings of the page stack.
+   */
+  'layout-section-gap': 'var(--spacing-xl)', // between sections of a parent
+  'layout-group-gap': 'var(--spacing-md)', // within a band
+
+  /*
+   * MEASURE — the widest a page column may get, by context. Five values, because the
+   * reason a column is capped differs with how wide its payload actually is.
+   *
+   * DATA pages (lists, detail dashboards) are capped so a table that runs to the
+   * viewport edge on an ultrawide screen doesn't put its row actions a head-turn away
+   * from the name that identifies the row. They still want every pixel they can get:
+   * more columns visible is the point.
+   *
+   * FOCUSED pages (home, the create flows) are one task, but that task still goes
+   * multi-column — home is a rail plus a card grid — so they stay wide enough for
+   * those bands to breathe, and no wider.
+   *
+   * FORM pages (settings, in-page edit forms) are a single stacked column of fields.
+   * Past ~1200px the extra width lands entirely inside the controls: a label sits at
+   * 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.
+   */
+  '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
+
+  /*
+   * MEASURE (site) — the marketing site's content column, and the one measure in this
+   * file that is not a console page's.
+   *
+   * 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.
+   *
+   * 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.
+   */
+  'container-site': 'var(--container-5xl)', // 1192px — the marketing site column
+  /*
+   * 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 +
+   * guidance) on the left, the actions hold the control on the right. That right side
+   * is `flex-1` + `justify-end`, so this cap is what decides where the control
+   * actually sits — raise it and the control grows leftward, toward the label that
+   * names it; lower it and the control pins to the right edge with the gap opening up
+   * in between.
+   *
+   * The default is deliberately tight: a settings row reads as "name → current value",
+   * and a narrow value column keeps a scannable right edge down the whole card. A
+   * create form inverts that priority — the fields ARE the page's payload, several are
+   * radio blocks carrying their own descriptions, and the user is filling them in
+   * rather than scanning them — so the create band opens this up (see
+   * `.layout-form-create`). One token, retuned per band, instead of the cap being
+   * re-typed on every row.
+   */
+  'layout-measure-control': 'var(--container-3xs)' // 256px — settings rows
+}
+
+/*
+ * --layout-column-measure is deliberately NOT a token: it is a per-class local that
+ * each column utility declares and the shared geometry below reads, so a fifth column
+ * class inherits the whole behaviour by naming one measure.
+ */
+const COLUMN_MEASURE = {
+  'layout-column': 'var(--layout-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)'
+}
+
+/**
+ * A centered column at the measure — every page carries one of these, list pages
+ * included. Full-bleed is the absence of all five classes, not a `w-full`.
+ *
+ * THE BOUNDARY IS NOT PART OF THE MEASURE. A `padded` page gets its boundary from the
+ * app shell, on the scroll box OUTSIDE the capped block, so the measure lands as
+ * CONTENT width. A page that carries the boundary ITSELF puts it on the same block as
+ * the measure, and there `box-sizing: border-box` makes the cap swallow the inset:
+ * 1620px of cap minus 24px a side is a 1572px content column, 48px narrower than the
+ * same measure gives a padded page. That is the measure describing something other
+ * than content, which is the one job it has.
+ *
+ * So when the boundary rides along, the cap grows by exactly the inset it now
+ * contains, and both shapes resolve to the same content column at every viewport.
+ * Which means a page can gain or lose its own boundary — pick up a tab bar, drop one,
+ * move from padded to self-padded — without moving a pixel.
+ *
+ * The widening nests HERE, on the column, rather than on the boundary utilities.
+ * Specificity is (0,2,0) either way, so correctness does not decide it; three things
+ * do. Both declarations that can set `max-width` stay in one block, in reading order.
+ * `.layout-boundary` stays what its name says — three padding declarations — instead
+ * of shipping a four-way `:is()` into every consumer that uses it with no column
+ * anywhere. And a fifth column class still costs one line, because these are generated
+ * from COLUMN_MEASURE and the nested rule comes along with it.
+ */
+const columnUtility = (measure, extra) => ({
+  '--layout-column-measure': measure,
+  ...extra,
+  '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))'
+  }
+})
+
+export const layoutsUtilities = {
+  /*
+   * The page boundary. Padding, never margin: a top margin on an `h-full` child of a
+   * padded scroll box overflows by exactly the margin (h-full resolves against the
+   * parent's content box, the margin sits outside it) and the overflow lands as a
+   * silent clip at the bottom of a table.
+   */
+  'layout-boundary': {
+    'padding-inline': 'var(--layout-boundary-inline)',
+    'padding-block-start': 'var(--layout-boundary-start)',
+    'padding-block-end': 'var(--layout-boundary-end)'
+  },
+
+  /*
+   * The inline half of the boundary, alone — for a band that takes the page's side
+   * inset but owns its own vertical padding: a create flow's sticky action bar, whose
+   * `py` is a bar height, not a page boundary. Naming it is what lets the MEASURE rule
+   * above see a self-inset band and treat it exactly like the scrolling body it sits
+   * under, which is the whole point of a sticky bar.
+   */
+  'layout-boundary-inline': {
+    'padding-inline': 'var(--layout-boundary-inline)'
+  },
+
+  /*
+   * The BOUNDARY step, as a margin — carried by the PARENT SECTION that sits directly
+   * below the heading. Exactly ONE element per page stack carries it. Never put it on
+   * a section INSIDE the parent: `gap` and `margin` both apply in a flex column, so
+   * the two add up and that section lands at twice the step.
+   *
+   * The `:first-child` rule zeroes the margin when the element that carries it happens
+   * to render first (a page with no heading; a stack whose opening band is
+   * conditional) — the boundary's padding is that band's top space, so the class is
+   * safe to carry unconditionally. This is what makes the margin model safe when the
+   * band ABOVE is conditional: a module list renders its controls row only when it has
+   * rows, so on an empty account the empty-state band becomes the first child and
+   * opens at exactly the boundary step. `v-if` bands are absent from the DOM, so
+   * `:first-child` reads the rendered truth.
+   *
+   * `margin-block-start` (not `margin-top`) to stay on the logical axis the boundary
+   * tokens use. Safe here because these stacks are flex containers, where a child's
+   * margin never collapses out of its parent.
+   */
+  'layout-section-start': {
+    'margin-block-start': 'var(--layout-boundary-start)',
+    '&:first-child': { 'margin-block-start': '0' }
+  },
+
+  /*
+   * The GROUP step, as a margin — the fallback for a group whose parts are already
+   * direct siblings of the page stack, where a wrapper is the wrong answer. The band
+   * element normally IS that wrapper (`gap: var(--layout-group-gap)`), and that is the
+   * form to prefer: it names the group in the markup.
+   */
+  'layout-group-start': {
+    'margin-block-start': 'var(--layout-group-gap)',
+    '&:first-child': { 'margin-block-start': '0' }
+  },
+
+  ...Object.fromEntries(
+    Object.entries(COLUMN_MEASURE).map(([name, measure]) => [
+      name,
+      columnUtility(
+        measure,
+        // The create band retunes the control cap for everything inside it. On a
+        // 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
+      )
+    ])
+  ),
+
+  /*
+   * 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
+   * all of its rows at once.
+   *
+   * `flex-1` + `justify-end` rather than a fixed width: the row stays two-column at
+   * every viewport (the control side yields to a long field name instead of wrapping),
+   * and controls inside still pass `w-full` to fill the cap.
+   *
+   * THE `:not(#\#)` IS LOAD-BEARING, and it is the one place in this file that needs a
+   * specificity hack. This class is applied to a component whose own root already
+   * carries `shrink-0`, and Vue merges both class lists onto one element. As plain
+   * unlayered CSS this rule won this tie; as an `@utility` it sorts BEFORE the core
+   * utilities, so `shrink-0` would win and the control side could no longer yield to a
+   * long field name. `#\#` is an id no element can carry, so the selector always
+   * matches while reading (1,1,0) — Tailwind's own important-strategy idiom. It stays
+   * variant-safe (`.md\:layout-field-control:not(#\#)`), unlike an `&:is(…)` bump.
+   * Applied to this utility ONLY: the other eight have no live conflict, and the hack
+   * would needlessly outrank legitimate consumer overrides.
+   */
+  'layout-field-control': {
+    '&:not(#\\#)': {
+      display: 'flex',
+      flex: '1 1 0%',
+      'justify-content': 'flex-end',
+      'max-width': 'var(--layout-measure-control)'
+    }
+  }
+}
+
+export default { layoutsData, layoutsUtilities }

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

@@ -104,6 +104,14 @@ export const textsData: {
         fontWeight: number;
         letterSpacing: string;
     };
+    'text-body-code-sm': {
+        textWrapStyle: string;
+        fontFamily: string;
+        fontSize: string;
+        lineHeight: number;
+        fontWeight: number;
+        letterSpacing: string;
+    };
     'text-label-code-md': {
         fontFamily: string;
         fontSize: string;
@@ -123,33 +131,43 @@ export const textsData: {
             _: string;
             md: string;
         };
+        fontWeight: number;
         lineHeight: number;
     };
     'text-body-md': {
         fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+    };
+    'text-body-prose-md': {
+        fontSize: string;
+        fontWeight: number;
         lineHeight: number;
     };
     'text-body-sm': {
         fontSize: string;
+        fontWeight: number;
         lineHeight: number;
     };
     'text-body-xs': {
         fontSize: string;
+        fontWeight: number;
         lineHeight: number;
     };
-    'text-tag-sm': {
+    'text-body-xxs': {
         fontSize: string;
-        lineHeight: number;
         fontWeight: number;
+        lineHeight: number;
     };
-    'text-tag-md': {
+    'text-tag-sm': {
         fontSize: string;
         lineHeight: number;
         fontWeight: number;
     };
-    'text-body-xxs': {
+    'text-tag-md': {
         fontSize: string;
         lineHeight: number;
+        fontWeight: number;
     };
     'text-overline-md': {
         fontFamily: 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2JE,8FAA8F;;;;;;;;;;;;;;;;;;EAkB/F"}
+{"version":3,"file":"texts.data.d.ts","sourceRoot":"","sources":["texts.data.js"],"names":[],"mappings":"AAwBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6KE,8FAA8F;;;;;;;;;;;;;;;;;;EAkB/F"}

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

@@ -98,6 +98,14 @@ export const textsData = {
     fontWeight: fontWeight.normal,
     letterSpacing: tracking.normal
   },
+  'text-body-code-sm': {
+    textWrapStyle: 'pretty',
+    fontFamily: fontFamily.code,
+    fontSize: fontSize.xs,
+    lineHeight: leading.relaxed,
+    fontWeight: fontWeight.normal,
+    letterSpacing: tracking.normal
+  },
   'text-label-code-md': {
     fontFamily: fontFamily.code,
     fontSize: fontSize.sm,
@@ -114,33 +122,43 @@ export const textsData = {
   },
   'text-body-lg': {
     fontSize: { _: fontSize.base, md: fontSize.lg },
-    lineHeight: leading.normal
+    fontWeight: fontWeight.normal,
+    lineHeight: leading.snug
   },
   'text-body-md': {
     fontSize: fontSize.base,
-    lineHeight: leading.normal
+    fontWeight: fontWeight.normal,
+    lineHeight: leading.snug
+  },
+  'text-body-prose-md': {
+    fontSize: fontSize.base,
+    fontWeight: fontWeight.normal,
+    lineHeight: leading.relaxed
   },
   'text-body-sm': {
     fontSize: fontSize.sm,
-    lineHeight: leading.normal
+    fontWeight: fontWeight.normal,
+    lineHeight: leading.snug
   },
   'text-body-xs': {
     fontSize: fontSize.xs,
+    fontWeight: fontWeight.normal,
+    lineHeight: leading.snug
+  },
+  'text-body-xxs': {
+    fontSize: fontSize.xs,
+    fontWeight: fontWeight.normal,
     lineHeight: leading.normal
   },
   'text-tag-sm': {
     fontSize: fontSize.xs,
     lineHeight: leading.tight,
-    fontWeight: fontWeight.semibold
+    fontWeight: fontWeight.normal
   },
   'text-tag-md': {
     fontSize: fontSize.xs,
     lineHeight: leading.tight,
-    fontWeight: fontWeight.semibold
-  },
-  'text-body-xxs': {
-    fontSize: fontSize.xs,
-    lineHeight: leading.normal
+    fontWeight: fontWeight.normal
   },
   'text-overline-md': {
     fontFamily: fontFamily.display,

package/src/tokens/semantic/z-indices.data.d.ts

@@ -17,7 +17,7 @@
  *                          such as drawers, modals, and fixed headers.
  *
  * Values are intentionally small and well-spaced to make future additions
- * obvious. Consume as `z-[var(--z-input-*)]` in components — do not
+ * obvious. Consume as `z-(--z-input-*)` in components — do not
  * introduce ad-hoc numeric z-index in input `.vue` files.
  */
 export const zIndicesData: {

package/src/tokens/semantic/z-indices.data.js

@@ -17,7 +17,7 @@
  *                          such as drawers, modals, and fixed headers.
  *
  * Values are intentionally small and well-spaced to make future additions
- * obvious. Consume as `z-[var(--z-input-*)]` in components — do not
+ * obvious. Consume as `z-(--z-input-*)` in components — do not
  * introduce ad-hoc numeric z-index in input `.vue` files.
  */
 

package/src/tokens/theme/border.js

@@ -1,15 +1,37 @@
 import { tokenRef } from '../../scripts/refs.js'
 
+// The neutral rules are OPAQUE steps of the surface palette, not alpha.
+//
+// They used to be `alpha.black.100` / `alpha.white.100` / `alpha.white.50`, which meant one
+// token painted a different colour on every backdrop — the same hairline read four different
+// ways across canvas / surface / raised / overlay — and two rules meeting composited into a
+// 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` /
+// `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
+//   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
+//
+// `muted` sits closer to the background than `default` in BOTH themes — lighter in light,
+// darker in dark. It is a subtler rule, not a second default; it is drawn on `--bg-surface` /
+// `--bg-canvas` (the segmented-button track, the tab-view list, a flow node), never on a
+// selected or disabled fill, which is what lets the light step go as light as it does. Dark
+// cannot go proportionally as subtle: `--bg-surface-raised` sits at 20 and would swallow it.
 export const border = {
   light: {
-    'border-default': tokenRef('primitives.alpha.black.100'),
-    'border-muted': tokenRef('primitives.alpha.black.100'),
+    'border-default': tokenRef('theme.surfaces.surface-250'),
+    'border-muted': tokenRef('theme.surfaces.surface-150'),
     'border-strong': tokenRef('primitives.base.black'),
     'border-selected': tokenRef('brand.primary.primary-500')
   },
   dark: {
-    'border-default': tokenRef('primitives.alpha.white.100'),
-    'border-muted': tokenRef('primitives.alpha.white.50'),
+    'border-default': tokenRef('theme.surfaces.surface-750'),
+    'border-muted': tokenRef('theme.surfaces.surface-775'),
     'border-strong': tokenRef('primitives.base.white'),
     'border-selected': tokenRef('brand.primary.primary-500')
   }

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

@@ -16,9 +16,15 @@ declare const shared: {
     'surface-100': {
         __ref: any;
     };
+    'surface-150': {
+        __ref: any;
+    };
     'surface-200': {
         __ref: any;
     };
+    'surface-250': {
+        __ref: any;
+    };
     'surface-300': {
         __ref: any;
     };
@@ -34,6 +40,12 @@ declare const shared: {
     'surface-700': {
         __ref: any;
     };
+    'surface-750': {
+        __ref: any;
+    };
+    'surface-775': {
+        __ref: any;
+    };
     'surface-800': {
         __ref: any;
     };

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

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

package/src/tokens/theme/surfaces.js

@@ -4,12 +4,16 @@ const shared = {
   'surface-0': tokenRef('primitives.base.white'),
   'surface-50': tokenRef('primitives.gray.50'),
   'surface-100': tokenRef('primitives.gray.100'),
+  'surface-150': tokenRef('primitives.gray.150'),
   'surface-200': tokenRef('primitives.gray.200'),
+  'surface-250': tokenRef('primitives.gray.250'),
   'surface-300': tokenRef('primitives.gray.300'),
   'surface-400': tokenRef('primitives.gray.400'),
   'surface-500': tokenRef('primitives.gray.500'),
   'surface-600': tokenRef('primitives.gray.600'),
   'surface-700': tokenRef('primitives.gray.700'),
+  'surface-750': tokenRef('primitives.gray.750'),
+  'surface-775': tokenRef('primitives.gray.775'),
   'surface-800': tokenRef('primitives.gray.800'),
   'surface-900': tokenRef('primitives.gray.900'),
   'surface-950': tokenRef('primitives.gray.950')

package/src/tokens/theme.d.ts

@@ -77,12 +77,16 @@ export namespace theme {
             let gray: {
                 50: string;
                 100: string;
+                150: string;
                 200: string;
+                250: string;
                 300: string;
                 400: string;
                 500: string;
                 600: string;
                 700: string;
+                750: string;
+                775: string;
                 800: string;
                 900: string;
                 950: string;