@aziontech/theme 4.3.0 → 5.0.0

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,
@@ -98,6 +138,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 +162,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;