@12-apps/ui 6.33.1 → 6.34.0

package/dist/types-native/components/layout/Card/Card.metrics.d.ts

@@ -10,7 +10,8 @@ import type { UiShadow } from '../../../tokens/shadow';
  * hands the same shadow objects to `boxShadow` and the same numbers to a
  * `StyleSheet`.
  *
- * Nothing here imports a renderer, a theme or a colour: a shadow's COLOUR is
+ * Nothing here imports a renderer or a theme — its fixed inks are the
+ * renderer-free absolutes of `src/tokens/ink.core` — and a variant shadow's COLOUR is
  * the caller's, because the two sides reach for the same arithmetic through
  * different doors (`alpha` from `@mui/material/styles` on the web, from
  * `src/tokens/color` natively — a port of it, asserted equal).
@@ -109,12 +110,12 @@ export declare function neumorphicShadows(lifted: boolean, near: string, far: st
  */
 export declare const CARD_SECTION_BACKGROUND: {
     readonly dark: {
-        readonly rest: "rgba(0, 0, 0, 0.2)";
-        readonly lifted: "rgba(0, 0, 0, 0.25)";
+        readonly rest: string;
+        readonly lifted: string;
     };
     readonly light: {
-        readonly rest: "rgba(0, 0, 0, 0.02)";
-        readonly lifted: "rgba(0, 0, 0, 0.04)";
+        readonly rest: string;
+        readonly lifted: string;
     };
 };
 /** `glow`: a haloed primary shadow that widens under the pointer. */

package/dist/types-native/components/layout/Card/Card.metrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Card/Card.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAEvD;;;;;;;;;;;;;;GAcG;AAIH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,gBAAgB,EAAE,MAAM,CAAC,EAAE,MAAM,CAM/E,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,gBAAgB,QAAQ,CAAC;AAEtC,gDAAgD;AAChD,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAInC,2FAA2F;AAC3F,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;AAElC;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,EAAE,SAAS,QAAQ,EAIhD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc;;;CAAkC,CAAC;AAI9D,sFAAsF;AACtF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAKb,CAAC;AAEX,iFAAiF;AACjF,eAAO,MAAM,aAAa;;;;;;;CAGhB,CAAC;AAEX,qEAAqE;AACrE,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;CAOlB,CAAC;AAEX;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,QAAQ,EAAE,CAOxF;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;CAG1B,CAAC;AAIX,qEAAqE;AACrE,eAAO,MAAM,SAAS;;;;;;;;;CAGZ,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,UAAU;;;;IAIrB,+DAA+D;;;CAGvD,CAAC;AAEX,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,IAAI,CAAC;AAEvC,yFAAyF;AACzF,eAAO,MAAM,YAAY;;;;CAAgE,CAAC;AAI1F,4DAA4D;AAC5D,eAAO,MAAM,0BAA0B;;;CAAmC,CAAC;AAE3E;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;CAId,CAAC;AAEX,qFAAqF;AACrF,eAAO,MAAM,kCAAkC,IAAI,CAAC;AAEpD;;;GAGG;AACH,eAAO,MAAM,YAAY;;;CAAkC,CAAC;AAE5D,oCAAoC;AACpC,eAAO,MAAM,iBAAiB,MAAM,CAAC"}
+{"version":3,"file":"Card.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Card/Card.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAEvD;;;;;;;;;;;;;;;GAeG;AAIH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,gBAAgB,EAAE,MAAM,CAAC,EAAE,MAAM,CAM/E,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,gBAAgB,QAAQ,CAAC;AAEtC,gDAAgD;AAChD,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAInC,2FAA2F;AAC3F,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;AAElC;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,EAAE,SAAS,QAAQ,EAIhD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc;;;CAAkC,CAAC;AAI9D,sFAAsF;AACtF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAKb,CAAC;AAEX,iFAAiF;AACjF,eAAO,MAAM,aAAa;;;;;;;CAGhB,CAAC;AAEX,qEAAqE;AACrE,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;CAOlB,CAAC;AAEX;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,QAAQ,EAAE,CAOxF;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;CAG1B,CAAC;AAIX,qEAAqE;AACrE,eAAO,MAAM,SAAS;;;;;;;;;CAGZ,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,UAAU;;;;IAIrB,+DAA+D;;;CAGvD,CAAC;AAEX,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,IAAI,CAAC;AAEvC,yFAAyF;AACzF,eAAO,MAAM,YAAY;;;;CAAgE,CAAC;AAI1F,4DAA4D;AAC5D,eAAO,MAAM,0BAA0B;;;CAAmC,CAAC;AAE3E;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;CAId,CAAC;AAEX,qFAAqF;AACrF,eAAO,MAAM,kCAAkC,IAAI,CAAC;AAEpD;;;GAGG;AACH,eAAO,MAAM,YAAY;;;CAAkC,CAAC;AAE5D,oCAAoC;AACpC,eAAO,MAAM,iBAAiB,MAAM,CAAC"}

package/dist/types-native/components/layout/Skeleton/Skeleton.metrics.d.ts

@@ -37,10 +37,11 @@ export declare const SHIMMER_ALPHA = 0.3;
 export declare const SHIMMER_DURATION_MS = 2000;
 /**
  * MUI's `palette.common`, which is a pair of fixed hexes rather than anything
- * derived — so the shared theme has no slot for them and they are named here.
+ * derived — so the shared theme has no slot for them: the renderer-free
+ * absolutes stand in (`src/tokens/ink.core.ts`).
  */
-export declare const COMMON_BLACK = "#000";
-export declare const COMMON_WHITE = "#fff";
+export declare const COMMON_BLACK: "#000";
+export declare const COMMON_WHITE: "#fff";
 /**
  * MUI's `pulseKeyframe`: opacity 1 → 0.4 → 1, `2s ease-in-out 0.5s infinite`.
  * The delay runs once on the web; native replays it each lap unless the

package/dist/types-native/components/layout/Skeleton/Skeleton.metrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Skeleton/Skeleton.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE1E;;;;;;;;;;;;;;GAcG;AAEH,oDAAoD;AACpD,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAIxE,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAC9C,eAAe,EACf;IAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,CAOvD,CAAC;AAIF,8EAA8E;AAC9E,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAC/C,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAC7C,eAAO,MAAM,aAAa,KAAK,CAAC;AAChC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,yCAAyC;AACzC,eAAO,MAAM,YAAY;;;;CAAgD,CAAC;AAI1E,2CAA2C;AAC3C,eAAO,MAAM,aAAa,MAAM,CAAC;AACjC,eAAO,MAAM,mBAAmB,OAAO,CAAC;AAExC;;;GAGG;AACH,eAAO,MAAM,YAAY,SAAS,CAAC;AACnC,eAAO,MAAM,YAAY,SAAS,CAAC;AAInC;;;;GAIG;AACH,eAAO,MAAM,KAAK;;;;CAAwD,CAAC;AAE3E,kFAAkF;AAClF,eAAO,MAAM,IAAI;;;CAA8C,CAAC;AAEhE;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,YAAY,MAAM,CAAC"}
+{"version":3,"file":"Skeleton.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Skeleton/Skeleton.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAG1E;;;;;;;;;;;;;;GAcG;AAEH,oDAAoD;AACpD,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAIxE,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAC9C,eAAe,EACf;IAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,CAOvD,CAAC;AAIF,8EAA8E;AAC9E,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAC/C,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAC7C,eAAO,MAAM,aAAa,KAAK,CAAC;AAChC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,yCAAyC;AACzC,eAAO,MAAM,YAAY;;;;CAAgD,CAAC;AAI1E,2CAA2C;AAC3C,eAAO,MAAM,aAAa,MAAM,CAAC;AACjC,eAAO,MAAM,mBAAmB,OAAO,CAAC;AAExC;;;;GAIG;AACH,eAAO,MAAM,YAAY,QAAqB,CAAC;AAC/C,eAAO,MAAM,YAAY,QAAqB,CAAC;AAI/C;;;;GAIG;AACH,eAAO,MAAM,KAAK;;;;CAAwD,CAAC;AAE3E,kFAAkF;AAClF,eAAO,MAAM,IAAI;;;CAA8C,CAAC;AAEhE;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,YAAY,MAAM,CAAC"}

package/dist/types-native/components/typography/Heading/Heading.metrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/typography/Heading/Heading.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,EAAgB,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACnE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAE7D;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAAgB,CAAC;AAE3E,eAAO,MAAM,qBAAqB,EAAE,YAAmB,CAAC;AACxD,eAAO,MAAM,sBAAsB,EAAE,aAAsB,CAAC;AAC5D,eAAO,MAAM,qBAAqB,EAAE,UAAsB,CAAC;AAE3D,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,YAAY,EAAE,WAAW,CAQ1D,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,MAAM,GAAI,OAAO,MAAM,GAAG,SAAS,KAAG,YAC8C,CAAC;AAIlG;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,MAAM,CAG1E;AAED,0CAA0C;AAC1C,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;CAAkC,CAAC;AAEtE,kEAAkE;AAClE,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,EAAE,IAAI,MAAM,KAAG,MACc,CAAC;AAE1E;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAWxF"}
+{"version":3,"file":"Heading.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/typography/Heading/Heading.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAEjF,OAAO,EAAgB,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACnE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAE7D;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAAgB,CAAC;AAE3E,eAAO,MAAM,qBAAqB,EAAE,YAAmB,CAAC;AACxD,eAAO,MAAM,sBAAsB,EAAE,aAAsB,CAAC;AAC5D,eAAO,MAAM,qBAAqB,EAAE,UAAsB,CAAC;AAE3D,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,YAAY,EAAE,WAAW,CAQ1D,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,MAAM,GAAI,OAAO,MAAM,GAAG,SAAS,KAAG,YAC8C,CAAC;AAIlG;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,MAAM,CAG1E;AAED,0CAA0C;AAC1C,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;CAAkC,CAAC;AAEtE,kEAAkE;AAClE,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,EAAE,IAAI,MAAM,KAAG,MACc,CAAC;AAE1E;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAWxF"}

package/dist/types-native/tokens/index.native.d.ts

@@ -9,4 +9,5 @@ export * from './theme';
 export * from './color';
 export { DEFAULT_FIELD_RADIUS } from './field-radius.core';
 export { DEFAULT_FIELD_HEIGHT, FIELD_BORDER_WIDTH, FIELD_HEIGHT_SCALE, fieldHeightPx, fieldHeightRem, } from './field-height.core';
+export * from './ink.core';
 //# sourceMappingURL=index.native.d.ts.map

package/dist/types-native/tokens/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/tokens/index.native.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,aAAa,EACb,cAAc,GACf,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/tokens/index.native.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,aAAa,EACb,cAAc,GACf,MAAM,qBAAqB,CAAC;AAE7B,cAAc,YAAY,CAAC"}

package/dist/types-native/tokens/ink.core.d.ts

@@ -0,0 +1,145 @@
+/**
+ * THE COLOURS THAT HAVE NO PALETTE ROLE, NAMED — with no renderer behind them.
+ *
+ * Every colour a component draws comes from the theme (FUT-2593, under
+ * FUT-2585). Most have a palette role — text, divider, a semantic main, a
+ * neutral tone (`./ink.ts`). These do not: a chart's neon series, a map's
+ * terrain, a code editor's syntax chrome, a vendor's brand. They were hex
+ * literals inside components; they are NAMED sets here, which a host can
+ * replace through `theme.uiInk` (`./ink.ts`), and each default is exactly the
+ * value the component drew before, so moving it here changed nothing on screen.
+ *
+ * This file imports nothing: `*.metrics.ts` tables, which the native renderer
+ * reads too, take their colours from it.
+ */
+/** The `neon` Chart variant: its series, its ground, its accent (`Chart`). */
+export declare const DATA_VIZ_NEON: {
+    readonly series: readonly ["#00ffff", "#ff00ff", "#ffff00", "#00ff00", "#ff0080", "#8000ff"];
+    readonly ground: "#000";
+    readonly accent: "#00ffff";
+};
+/** The phases a `TimingDiagram` bar is split into, in order. */
+export declare const TIMING_PHASES: {
+    readonly dns: "#9C27B0";
+    readonly connect: "#2196F3";
+    readonly tls: "#00BCD4";
+    readonly request: "#4CAF50";
+    readonly response: "#FF9800";
+};
+/** `MapPreview`'s ground for the terrain and satellite map types. */
+export declare const MAP_SURFACE: {
+    readonly terrainFrom: "#8BC34A";
+    readonly terrainTo: "#4CAF50";
+    readonly terrainTileFrom: "#7cb342";
+    readonly terrainTileTo: "#558b2f";
+    readonly satelliteTileFrom: "#1a1a1a";
+    readonly satelliteTileTo: "#2a2a2a";
+};
+/** `CodeEditor`'s Monaco chrome, per mode — GitHub's own light and dark. */
+export declare const CODE_EDITOR_CHROME: {
+    readonly light: {
+        readonly background: "#FFFFFF";
+        readonly foreground: "#24292E";
+        readonly lineHighlight: "#F6F8FA";
+        readonly lineNumber: "#959DA5";
+        readonly lineNumberActive: "#24292E";
+        readonly gutterBorder: "#D1D5DA";
+        readonly selection: "#C8E1FF";
+    };
+    readonly dark: {
+        readonly background: "#0D1117";
+        readonly foreground: "#C9D1D9";
+        readonly lineHighlight: "#161B22";
+        readonly lineNumber: "#8B949E";
+        readonly lineNumberActive: "#C9D1D9";
+        readonly gutterBorder: "#21262D";
+        readonly selection: "#3392FF44";
+    };
+};
+/**
+ * The social-login providers' OWN colours. Brand rules fix these — a host may
+ * not "theme" Google's button — so the override exists only for a provider that
+ * changes its guideline.
+ */
+export declare const SOCIAL_BRAND: {
+    readonly googleLogo: {
+        readonly blue: "#4285F4";
+        readonly green: "#34A853";
+        readonly yellow: "#FBBC05";
+        readonly red: "#EA4335";
+    };
+    readonly google: {
+        readonly background: "#ffffff";
+        readonly text: "#1f1f1f";
+        readonly border: "#dadce0";
+        readonly hover: "#f5f5f5";
+        readonly hoverBorder: "#dadce0";
+    };
+    readonly facebook: {
+        readonly background: "#1877F2";
+        readonly text: "#ffffff";
+        readonly hover: "#166fe5";
+        readonly logo: "#1877F2";
+    };
+    readonly apple: {
+        readonly background: "#000000";
+        readonly text: "#ffffff";
+        readonly hover: "#1a1a1a";
+    };
+};
+/** The two decorative gradients a completed step and a tutorial's call to action wear. */
+export declare const CELEBRATION_GRADIENTS: {
+    readonly mint: readonly ["#84fab0", "#8fd3f4"];
+    readonly violet: readonly ["#667eea", "#764ba2"];
+};
+/** A count that wants attention before it is read (`NavigationMenu`'s badge). */
+export declare const ATTENTION_INK: {
+    readonly from: "#ff5252";
+    readonly to: "#ff1744";
+    readonly glow: "rgb(255, 23, 68)";
+};
+/** A search hit inside a row label (`CategorySelect`). */
+export declare const HIGHLIGHT_MARK = "#fff2a8";
+/** The slate a frosted breadcrumb bar is tinted with in dark mode. */
+export declare const GLASS_SLATE = "rgb(17, 24, 39)";
+/** The ink of a raised floating panel's shadow (`CategorySelect`). */
+export declare const PANEL_SHADOW_INK = "rgb(16, 20, 35)";
+/**
+ * Glows that were drawn in a FIXED hue rather than the host's primary: MUI's
+ * default blue (`Checkbox`, `NavigationMenu`) and the platform's default indigo
+ * (`Breadcrumbs`). Kept as they are — moving them onto `palette.primary` would
+ * recolour them for every host — and named so that a host can.
+ */
+export declare const EFFECT_GLOW: {
+    readonly muiBlue: "rgb(25, 118, 210)";
+    readonly brandIndigo: "rgb(99, 102, 241)";
+};
+/**
+ * MUI's own elevation shadows 1, 2, 3 and 8 — what `theme.shadows[n]` holds at
+ * MUI's defaults — for the `*.metrics.ts` tables the native renderer reads.
+ */
+export declare const ELEVATION_SHADOWS: {
+    readonly 1: "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)";
+    readonly 2: "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)";
+    readonly 3: "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)";
+    readonly 8: "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)";
+};
+/** The two absolutes, for a renderer with no palette to read them from. */
+export declare const ABSOLUTE_INK: {
+    readonly black: "#000";
+    readonly white: "#fff";
+};
+/** The grey ramp's steps the neutral tones are drawn from (MUI's). */
+export declare const NEUTRAL_RAMP: {
+    readonly 50: "#fafafa";
+    readonly 100: "#f5f5f5";
+    readonly 200: "#eeeeee";
+    readonly 300: "#e0e0e0";
+    readonly 400: "#bdbdbd";
+    readonly 500: "#9e9e9e";
+    readonly 600: "#757575";
+    readonly 700: "#616161";
+    readonly 800: "#424242";
+    readonly 900: "#212121";
+};
+//# sourceMappingURL=ink.core.d.ts.map

package/dist/types-native/tokens/ink.core.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ink.core.d.ts","sourceRoot":"","sources":["../../../src/tokens/ink.core.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,8EAA8E;AAC9E,eAAO,MAAM,aAAa;;;;CAIhB,CAAC;AAEX,gEAAgE;AAChE,eAAO,MAAM,aAAa;;;;;;CAMhB,CAAC;AAEX,qEAAqE;AACrE,eAAO,MAAM,WAAW;;;;;;;CAOd,CAAC;AAEX,4EAA4E;AAC5E,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;CAmBrB,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;CAKf,CAAC;AAEX,0FAA0F;AAC1F,eAAO,MAAM,qBAAqB;;;CAGxB,CAAC;AAEX,iFAAiF;AACjF,eAAO,MAAM,aAAa;;;;CAAwE,CAAC;AAEnG,0DAA0D;AAC1D,eAAO,MAAM,cAAc,YAAY,CAAC;AAExC,sEAAsE;AACtE,eAAO,MAAM,WAAW,oBAAoB,CAAC;AAE7C,sEAAsE;AACtE,eAAO,MAAM,gBAAgB,oBAAoB,CAAC;AAElD;;;;;GAKG;AACH,eAAO,MAAM,WAAW;;;CAA8E,CAAC;AAEvG;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;CAKpB,CAAC;AAEX,2EAA2E;AAC3E,eAAO,MAAM,YAAY;;;CAA4C,CAAC;AAEtE,sEAAsE;AACtE,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC"}

package/dist/typography/Blockquote.js

@@ -1,6 +1,9 @@
 import {
   Blockquote
-} from "../chunk-4Y65XEGO.js";
+} from "../chunk-MH73XQHW.js";
+import "../chunk-FQ6UW7IY.js";
+import "../chunk-6JAIFIPW.js";
+import "../chunk-N3GAFIXG.js";
 import "../chunk-PZ5AY32C.js";
 export {
   Blockquote

package/dist/typography/Code.js

@@ -1,7 +1,10 @@
 import "../chunk-DURAH4VI.js";
 import {
   Code
-} from "../chunk-6I4BQRZ7.js";
+} from "../chunk-2LG5TEFV.js";
+import "../chunk-FQ6UW7IY.js";
+import "../chunk-6JAIFIPW.js";
+import "../chunk-N3GAFIXG.js";
 import "../chunk-PZ5AY32C.js";
 export {
   Code

package/dist/typography/Heading.js

@@ -1,9 +1,9 @@
 import "../chunk-6GP2DOOO.js";
 import {
   Heading
-} from "../chunk-7A3G4W52.js";
-import "../chunk-RAWQMBX6.js";
-import "../chunk-GXEB6MJA.js";
+} from "../chunk-IJFAF3A7.js";
+import "../chunk-5JSRM7WC.js";
+import "../chunk-LKMMJKXU.js";
 import "../chunk-TYJR4GOF.js";
 import "../chunk-PT6TCWIW.js";
 import "../chunk-PE4ZW3IA.js";
@@ -12,7 +12,9 @@ import "../chunk-AG66JBNH.js";
 import "../chunk-FZXKH2ZT.js";
 import "../chunk-PZBK3F52.js";
 import "../chunk-26X4CZVR.js";
+import "../chunk-FQ6UW7IY.js";
 import "../chunk-6JAIFIPW.js";
+import "../chunk-N3GAFIXG.js";
 import "../chunk-PZ5AY32C.js";
 export {
   Heading

package/dist/user-avatar.js

@@ -1,24 +1,24 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-5BW7NCM5.js";
+} from "./chunk-EIJC5DWG.js";
 import "./chunk-UDQSIRAP.js";
-import "./chunk-ZB6BX4GO.js";
+import "./chunk-L7Q5BH4A.js";
+import "./chunk-7IQDLEB5.js";
+import "./chunk-6ZZGK5DT.js";
 import "./chunk-3ZVUNSFF.js";
-import "./chunk-LB2G6SD6.js";
-import "./chunk-FAITHWIO.js";
 import "./chunk-XRMZMBE3.js";
 import "./chunk-VUHLNYAE.js";
 import "./chunk-2GSIEDGN.js";
-import "./chunk-AIRWM7KK.js";
-import "./chunk-BEBLRL5D.js";
-import "./chunk-6Q6T3FW5.js";
+import "./chunk-N6CSXHFJ.js";
 import "./chunk-FKUYRQSP.js";
+import "./chunk-LVEG6XQL.js";
+import "./chunk-JH7EEJEQ.js";
 import "./chunk-BA4RHQ3B.js";
 import "./chunk-73BEVJCS.js";
-import "./chunk-6MDBMCFK.js";
-import "./chunk-QRUCR4YZ.js";
-import "./chunk-K6FCXPTS.js";
+import "./chunk-3EDZU2H7.js";
+import "./chunk-BOU3HR4C.js";
+import "./chunk-LN46DSMF.js";
 import "./chunk-TAMIZE4Q.js";
 import "./chunk-H57ZS6W2.js";
 import "./chunk-U3PPLAFB.js";
@@ -33,7 +33,9 @@ import "./chunk-AG66JBNH.js";
 import "./chunk-FZXKH2ZT.js";
 import "./chunk-PZBK3F52.js";
 import "./chunk-26X4CZVR.js";
+import "./chunk-FQ6UW7IY.js";
 import "./chunk-6JAIFIPW.js";
+import "./chunk-N3GAFIXG.js";
 import "./chunk-PZ5AY32C.js";
 export {
   UserAvatar,

package/dist/utility/AnimatedIcon.js

@@ -1,10 +1,13 @@
 import "../chunk-H2PTB6FD.js";
 import {
   AnimatedIcon
-} from "../chunk-3CGLGOLO.js";
-import "../chunk-DBS74X2C.js";
+} from "../chunk-WXTXCJ5V.js";
+import "../chunk-63UQJVBW.js";
 import "../chunk-3T5Z5HXF.js";
 import "../chunk-HPK33ACY.js";
+import "../chunk-FQ6UW7IY.js";
+import "../chunk-6JAIFIPW.js";
+import "../chunk-N3GAFIXG.js";
 import "../chunk-PZ5AY32C.js";
 export {
   AnimatedIcon

package/dist/utility/WorkflowStep.js

@@ -1,10 +1,13 @@
 import "../chunk-IO36MEBD.js";
 import {
   WorkflowStep
-} from "../chunk-CSWNPIQD.js";
-import "../chunk-IRLUM7XB.js";
-import "../chunk-Y3ER5CJ2.js";
-import "../chunk-VXGCB3GY.js";
+} from "../chunk-7E4X4J2M.js";
+import "../chunk-CUN5RJTH.js";
+import "../chunk-WGFIIS6Q.js";
+import "../chunk-V5KKBMAT.js";
+import "../chunk-FQ6UW7IY.js";
+import "../chunk-6JAIFIPW.js";
+import "../chunk-N3GAFIXG.js";
 import "../chunk-PZ5AY32C.js";
 export {
   WorkflowStep,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.33.1",
+  "version": "6.34.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/data-display/Alert/Alert.metrics.ts

@@ -1,5 +1,6 @@
 import type { AlertVariant } from './Alert.base';
 import { alpha, darken, lighten } from '../../../tokens/color';
+import { NEUTRAL_RAMP } from '../../../tokens/ink.core';
 import { contrastText, type UiGreyStep, type UiTheme } from '../../../tokens/theme';
 
 /**
@@ -161,9 +162,9 @@ export function alertPalette(theme: UiTheme, key: string | undefined): AlertPale
       return theme.palette[key];
     case 'neutral':
       return {
-        main: theme.palette.grey[NEUTRAL_GREY.main],
-        light: theme.palette.grey[NEUTRAL_GREY.light],
-        dark: theme.palette.grey[NEUTRAL_GREY.dark],
+        main: NEUTRAL_RAMP[NEUTRAL_GREY.main],
+        light: NEUTRAL_RAMP[NEUTRAL_GREY.light],
+        dark: NEUTRAL_RAMP[NEUTRAL_GREY.dark],
       };
     default:
       return theme.palette.info;

package/src/components/data-display/Alert/Alert.styles.tsx

@@ -6,6 +6,8 @@ import { alpha, darken, keyframes, lighten } from '@mui/material/styles/index.js
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { sheen, softNeutral } from '../../../tokens/ink';
+
 import type { AlertVariant } from './Alert.base';
 import { VARIANT_ICON } from './Alert.helpers';
 import {
@@ -24,7 +26,6 @@ import {
   MESSAGE_FONT_SIZE,
   MESSAGE_GAP_UNITS,
   MESSAGE_LINE_HEIGHT,
-  NEUTRAL_GREY,
   PULSE,
   seconds,
   SEMANTIC_SURFACE,
@@ -116,6 +117,7 @@ export const iconRotate = keyframes`
 // The MUI-themed twin of `alertPalette` in `Alert.metrics.ts`: same names,
 // same three greys for `neutral`, same fallback to `info`.
 export const getColorFromTheme = (theme: Theme, variant: string): AlertPalette => {
+  const soft = softNeutral(theme);
   const colorMap: Record<string, AlertPalette> = {
     info: theme.palette.info,
     success: theme.palette.success,
@@ -123,11 +125,7 @@ export const getColorFromTheme = (theme: Theme, variant: string): AlertPalette =
     danger: theme.palette.error,
     primary: theme.palette.primary,
     secondary: theme.palette.secondary,
-    neutral: {
-      main: theme.palette.grey[NEUTRAL_GREY.main] || '#9E9E9E',
-      light: theme.palette.grey[NEUTRAL_GREY.light] || '#E0E0E0',
-      dark: theme.palette.grey[NEUTRAL_GREY.dark] || '#616161',
-    },
+    neutral: { main: soft.main, light: soft.light, dark: soft.dark },
   };
 
   return colorMap[variant] || theme.palette.info;
@@ -330,7 +328,7 @@ export const alertVariantStyles = (
       left: `-${GRADIENT.shimmerTravel}px`,
       width: '100%',
       height: '100%',
-      background: `linear-gradient(90deg, transparent, ${alpha(theme.palette.common.white, GRADIENT.shimmerAlpha)}, transparent)`,
+      background: `linear-gradient(90deg, transparent, ${sheen(theme, GRADIENT.shimmerAlpha)}, transparent)`,
       animation: `${shimmerAnimation} ${seconds(GRADIENT.shimmerMs)} infinite`,
     },
   }),

package/src/components/data-display/Alert/Alert.tsx

@@ -8,6 +8,8 @@ import { alpha, styled } from '@mui/material/styles/index.js';
 import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { absoluteInk, modeInk } from '../../../tokens/ink';
+
 import { resolveAlertProps, resolveAnnouncement, testIdFor } from './Alert.helpers';
 import type { AlertPalette } from './Alert.metrics';
 import {
@@ -69,7 +71,7 @@ function pointerShadow(
   // white-on-gradient fell to 2.90:1 on hover and 2.41:1 pressed, under the 3:1
   // floor and below its own idle. Every other variant's surface tracks the mode,
   // so for them the two rules agree.
-  const ink = variant === 'gradient' || theme.palette.mode === 'light' ? '#000000' : '#ffffff';
+  const ink = variant === 'gradient' ? absoluteInk(theme).black : modeInk(theme);
   const glowShadow = glow
     ? `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)}`
     : null;

package/src/components/data-display/AlertDialog/AlertDialog.tsx

@@ -14,6 +14,8 @@ import Typography from '@mui/material/Typography/index.js';
 import { alpha, keyframes, styled } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { neutralTones } from '../../../tokens/ink';
+
 import type { AlertDialogProps } from './AlertDialog.types';
 
 // Define pulse animation
@@ -145,7 +147,7 @@ const CloseButton = styled(IconButton)(({ theme }) => ({
   position: 'absolute',
   right: theme.spacing(1),
   top: theme.spacing(1),
-  color: theme.palette.grey[500],
+  color: neutralTones(theme).muted,
 }));
 
 /**

package/src/components/data-display/Avatar/Avatar.metrics.ts

@@ -1,4 +1,5 @@
 import type { AvatarSize, AvatarStatus } from './Avatar.base';
+import { ABSOLUTE_INK, NEUTRAL_RAMP } from '../../../tokens/ink.core';
 import type { UiTheme } from '../../../tokens/theme';
 import type { ColorValue } from '../../../tokens/vocabulary';
 
@@ -91,7 +92,7 @@ export function statusColor(theme: UiTheme, status: AvatarStatus): string {
   if (status === 'online') return theme.palette.success.main;
   if (status === 'away') return theme.palette.warning.main;
   if (status === 'busy') return theme.palette.danger.main;
-  return theme.palette.grey[500];
+  return NEUTRAL_RAMP[500];
 }
 
 export interface AvatarAccent {
@@ -105,7 +106,7 @@ export interface AvatarAccent {
  * and fell through to primary: a red avatar rendering blue, silently.
  */
 export function avatarAccent(theme: UiTheme, color: ColorValue): AvatarAccent {
-  if (color === 'neutral') return { main: theme.palette.grey[700], contrastText: '#fff' };
+  if (color === 'neutral') return { main: NEUTRAL_RAMP[700], contrastText: ABSOLUTE_INK.white };
   const accent = theme.palette[color];
-  return { main: accent.main, contrastText: accent.contrastText || '#fff' };
+  return { main: accent.main, contrastText: accent.contrastText || ABSOLUTE_INK.white };
 }

package/src/components/data-display/Avatar/Avatar.view.tsx

@@ -26,6 +26,7 @@ import {
   STATUS_DOT,
 } from './Avatar.metrics';
 import type { AvatarSize, AvatarStatus, ContentType } from './Avatar.types';
+import { absoluteInk, controlNeutral, neutralTones } from '../../../tokens/ink';
 import { px } from '../../../tokens/theme';
 
 export type { ContentType };
@@ -39,6 +40,7 @@ interface PaletteLike {
 }
 
 const getColorFromTheme = (theme: Theme, color: string): PaletteLike => {
+  const neutral = controlNeutral(theme);
   const colorMap: Record<string, PaletteLike> = {
     primary: theme.palette.primary,
     secondary: theme.palette.secondary,
@@ -49,7 +51,7 @@ const getColorFromTheme = (theme: Theme, color: string): PaletteLike => {
     // took the house one, so `danger` matched nothing and fell through to
     // primary — a red avatar rendering blue, silently.
     danger: theme.palette.error,
-    neutral: { main: theme.palette.grey[700], contrastText: '#fff' },
+    neutral: { main: neutral.main, contrastText: neutral.contrastText },
   };
 
   return colorMap[color] || theme.palette.primary;
@@ -77,7 +79,7 @@ const getStatusColor = (status: AvatarStatus, theme: Theme): string => {
   // against MUI's `Theme` rather than the shared one.
   const statusColorMap: Record<AvatarStatus, string> = {
     online: theme.palette.success.main,
-    offline: theme.palette.grey[500],
+    offline: neutralTones(theme).muted,
     away: theme.palette.warning.main,
     busy: theme.palette.error.main,
   };
@@ -210,7 +212,7 @@ const StyledAvatar = styled(MuiAvatar, {
       animation: `${scaleInAnimation} ${SCALE_IN_MS / 1000}s ease-out`,
       cursor: interactive ? 'pointer' : 'default',
       backgroundColor: hasError ? theme.palette.error.main : palette.main,
-      color: hasError ? theme.palette.error.contrastText : (palette.contrastText ?? '#fff'),
+      color: hasError ? theme.palette.error.contrastText : (palette.contrastText ?? absoluteInk(theme).white),
       ...interactiveStyles(interactive, palette.main),
       ...loadingStyles(isLoading, palette.main),
       ...variantRadius(customVariant, theme),

package/src/components/data-display/Badge/Badge.metrics.ts

@@ -1,5 +1,5 @@
 import type { BadgePosition, BadgeSize } from './Badge.base';
-import { contrastText, type UiPaletteColor, type UiTheme } from '../../../tokens/theme';
+import type { UiPaletteColor, UiTheme } from '../../../tokens/theme';
 import type { ColorValue } from '../../../tokens/vocabulary';
 
 /**
@@ -105,12 +105,8 @@ export const badgeAnchor = (position: BadgePosition): BadgeAnchor =>
  */
 export function badgePalette(theme: UiTheme, color: ColorValue): UiPaletteColor {
   if (color === 'neutral') {
-    return {
-      main: theme.palette.grey[600],
-      light: theme.palette.grey[400],
-      dark: theme.palette.grey[800],
-      contrastText: contrastText(theme.palette.grey[600]),
-    };
+    // Grey 600 / 400 / 800 under white ink: the shared theme's own `neutral`.
+    return theme.palette.neutral;
   }
   return theme.palette[color];
 }

package/src/components/data-display/Badge/Badge.styles.ts

@@ -25,6 +25,8 @@ import {
 } from './Badge.metrics';
 import { badgeVariantStyles } from './Badge.variants';
 import type { BadgeSize, BadgeVariant } from './Badge.types';
+import { sheen } from '../../../tokens/ink';
+import { accentFor } from '../../../tokens/scales';
 import { px } from '../../../tokens/theme';
 
 export type BadgePalette = {
@@ -45,11 +47,7 @@ const getColorFromTheme = (theme: Theme, color: string) => {
     // `danger`, the house word the prop actually takes. Keyed on MUI's `error`
     // it matched nothing and fell through to the default.
     danger: theme.palette.error,
-    neutral: {
-      main: theme.palette.grey[600],
-      light: theme.palette.grey[400],
-      dark: theme.palette.grey[800],
-      contrastText: theme.palette.getContrastText(theme.palette.grey[600]) } };
+    neutral: accentFor(theme, 'neutral') };
 
   return colorMap[color] || theme.palette.primary;
 };
@@ -180,7 +178,7 @@ const badgeAnimationStyles = ({
           background: `linear-gradient(
             90deg,
             transparent,
-            ${alpha(theme.palette.common.white, SHIMMER.alpha)},
+            ${sheen(theme, SHIMMER.alpha)},
             transparent
           )`,
           animation: `${shimmerAnimation} ${SHIMMER.durationMs / 1000}s infinite` } }) });

package/src/components/data-display/Badge/Badge.variants.ts

@@ -13,6 +13,7 @@ import {
   SECONDARY_BORDER_ALPHA,
 } from './Badge.metrics';
 import type { BadgePalette, BadgeSizeStyles } from './Badge.styles';
+import { absoluteInk, onMedia, sheen } from '../../../tokens/ink';
 
 const BADGE_VARIANTS: Record<
   string,
@@ -21,7 +22,7 @@ const BADGE_VARIANTS: Record<
   default: (theme, colorPalette, sizeStyles) => ({
         backgroundColor: colorPalette.main,
         color:
-          colorPalette.contrastText || theme.palette.getContrastText?.(colorPalette.main) || '#fff',
+          colorPalette.contrastText || theme.palette.getContrastText?.(colorPalette.main) || absoluteInk(theme).white,
         minWidth: sizeStyles.minWidth,
         height: sizeStyles.height,
         fontSize: sizeStyles.fontSize,
@@ -37,7 +38,7 @@ const BADGE_VARIANTS: Record<
   count: (theme, colorPalette, sizeStyles) => ({
         backgroundColor: colorPalette.main,
         color:
-          colorPalette.contrastText || theme.palette.getContrastText?.(colorPalette.main) || '#fff',
+          colorPalette.contrastText || theme.palette.getContrastText?.(colorPalette.main) || absoluteInk(theme).white,
         minWidth: sizeStyles.minWidth,
         height: sizeStyles.height,
         fontSize: sizeStyles.fontSize,
@@ -45,7 +46,7 @@ const BADGE_VARIANTS: Record<
         borderRadius: '50%' }),
   gradient: (theme, colorPalette, sizeStyles) => ({
         background: `linear-gradient(135deg, ${colorPalette.main} 0%, ${colorPalette.dark || colorPalette.main} 100%)`,
-        color: '#fff',
+        color: onMedia(theme),
         minWidth: sizeStyles.minWidth,
         height: sizeStyles.height,
         fontSize: sizeStyles.fontSize,
@@ -62,7 +63,7 @@ const BADGE_VARIANTS: Record<
         fontSize: sizeStyles.fontSize,
         padding: sizeStyles.padding,
         borderRadius: sizeStyles.height / 2,
-        boxShadow: `inset 0 1px 1px ${alpha(theme.palette.common.white, GLASS_INSET_HIGHLIGHT_ALPHA)}` }),
+        boxShadow: `inset 0 1px 1px ${sheen(theme, GLASS_INSET_HIGHLIGHT_ALPHA)}` }),
   outline: (theme, colorPalette, sizeStyles) => ({
         backgroundColor: 'transparent',
         border: `${OUTLINE_BORDER_WIDTH}px solid ${colorPalette.main}`,