pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.44

package/dist/Theme/provider/ThemeSwitcher.js

@@ -19,21 +19,13 @@ const SIZES = {
     lg: { control: "lg", icon: 18 },
 };
 const toBrandLabel = (brand) => brand.charAt(0).toUpperCase() + brand.slice(1);
-/**
- * Same swatch each brand's own theme carries at `colors.primary[500]` (the
- * anchor a filled button reads) — resolved per brand from its OWN palette so
- * the dot always matches what selecting that brand actually looks like,
- * regardless of which brand/mode is currently active.
- */
+// NOTE: resolved from each brand's OWN palette so the dot matches that brand, regardless of the active one.
 const brandSwatchColor = (brand) => index_1.brandThemes[brand].light.colors.primary[500];
 const BrandSwatch = ({ brand }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-block", w: "0.625rem", h: "0.625rem", borderRadius: "full", bg: brandSwatchColor(brand), border: "1px solid", borderColor: colors.boxborder[200], flexShrink: 0 }));
 };
-/**
- * Palette values already differ per color mode (`brandThemes[brand].light|dark`), so tokens
- * are read straight from the active theme — no `useColorModeValue` pairing needed here.
- */
+// Palette already differs per mode, so tokens read straight from the active theme — no useColorModeValue needed.
 const useSwitcherColors = () => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return {

package/dist/Theme/provider/colorModeStorage.js

@@ -2,10 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.subscribeToSystemColorMode = exports.getSystemColorMode = exports.writeStoredTheme = exports.readStoredTheme = void 0;
 const DARK_QUERY = "(prefers-color-scheme: dark)";
-/**
- * Stored values are untrusted input — a stale or hand-edited entry must never reach
- * `brandThemes[brand]` and hand Chakra an `undefined` theme.
- */
+// NOTE: stored values are untrusted — a stale/hand-edited entry must never reach brandThemes[brand] as undefined.
 const VALID_MODES = ["light", "dark", "system"];
 const VALID_BRANDS = [
     "lavender",

package/dist/Theme/tokens/brands/emerald/palette.dark.d.ts

@@ -1,6 +1,2 @@
-/**
- * Dark palette for the emerald brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 declare const palette: import("../..").PaletteProps;
 export default palette;

package/dist/Theme/tokens/brands/emerald/palette.dark.js

@@ -5,9 +5,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
 const palette_light_1 = __importDefault(require("./palette.light"));
-/**
- * Dark palette for the emerald brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
 exports.default = palette;

package/dist/Theme/tokens/brands/emerald/palette.light.js

@@ -20,10 +20,7 @@ const primary = {
 const palette = {
     ...neutrals_1.neutralTokens,
     ...(0, brandInk_1.buildBrandInk)(PRIMARY_500),
-    // Stops retuned so white gradient-button text (onGradient, accentText.ts) clears AA at both
-    // ends — the original pair let white drop to 3.38/2.43 against from/to. Same hue, darker.
-    // Both nudged one step further (4.537/4.515 -> 4.618/4.616): the first pass cleared AA by
-    // <0.02, too thin a margin to trust against rounding/rendering variance.
+    // NOTE: stops retuned so white gradient-button text clears AA at both ends — original let it drop to 3.38/2.43.
     gradient: { from: "#0d8474", to: "#048096" }, // teal → cyan
     primary,
     // 🌫️ Neutral gray (slightly cool to match teal)
@@ -33,12 +30,7 @@ const palette = {
         200: "#dce5e5",
         300: "#c3d2d2",
         400: "#9fb3b3",
-        // Retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff — a value that
-        // clears AA by <0.02 is treated as failing, see Wave D QA follow-up) against every
-        // backgroundColor surface it's actually rendered on (main/secondary/light/subtle —
-        // verified via usage grep). muted/accent/tertiary/etc. have 0-1 live call sites today and
-        // none pair them with gray[500] text; going dark enough to also clear those would push
-        // past gray[600]'s own lightness and break the ramp order.
+        // NOTE: retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff) against live backgroundColor surfaces.
         500: "#617474",
         600: "#5e7070",
         700: "#475555",

package/dist/Theme/tokens/brands/index.js

@@ -48,6 +48,7 @@ const semanticText_1 = require("../builders/semanticText");
 const resolvedRungs_1 = require("../builders/resolvedRungs");
 const focusRing_1 = require("../builders/focusRing");
 const surfaceRungs_1 = require("../builders/surfaceRungs");
+const surfaceRaised_1 = require("../builders/surfaceRaised");
 /** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
 const finalizeLightPalette = (source) => ({
     ...source,
@@ -58,12 +59,11 @@ const finalizeLightPalette = (source) => ({
     onPrimary: (0, accentText_1.onFilled)(source.primary[500], source.white, source.black),
     onSemantic: (0, semanticText_1.buildOnSemantic)(source.semantic, source.white, source.black),
     focusRing: (0, focusRing_1.buildFocusRing)(source),
+    surfaceRaised: (0, surfaceRaised_1.buildSurfaceRaised)(source),
 });
 exports.finalizeLightPalette = finalizeLightPalette;
-// `withFocusRing` is outermost: it is the only step that reads `primary` and the surfaces
-// TOGETHER, so it must see both after every earlier step — and after a brand file's own
-// post-derivation overrides (zinc dark replaces `primary` and `background` wholesale).
-const resolveRungs = (palette) => (0, focusRing_1.withFocusRing)((0, surfaceRungs_1.withSurfaceRungs)((0, resolvedRungs_1.withTableHoverRung)((0, resolvedRungs_1.withPlaceholderRung)((0, outlineRung_1.withOutlineRung)(palette)))));
+// NOTE: withFocusRing is outermost — it must see primary and surfaces together, after every earlier step.
+const resolveRungs = (palette) => (0, focusRing_1.withFocusRing)((0, surfaceRungs_1.withSurfaceRungs)((0, surfaceRaised_1.withSurfaceRaised)((0, resolvedRungs_1.withTableHoverRung)((0, resolvedRungs_1.withPlaceholderRung)((0, outlineRung_1.withOutlineRung)(palette))))));
 const lightBrand = (source) => resolveRungs((0, exports.finalizeLightPalette)(source));
 /** Light palette per brand. `lavender` is the base the other six extend. */
 exports.lightPalettes = {

package/dist/Theme/tokens/brands/lavender/palette.dark.d.ts

@@ -1,6 +1,2 @@
-/**
- * Dark palette for the lavender brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 declare const palette: import("../..").PaletteProps;
 export default palette;

package/dist/Theme/tokens/brands/lavender/palette.dark.js

@@ -5,9 +5,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
 const palette_light_1 = __importDefault(require("./palette.light"));
-/**
- * Dark palette for the lavender brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
 exports.default = palette;

package/dist/Theme/tokens/brands/lavender/palette.light.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildBrandTokens_1 = require("../../builders/buildBrandTokens");
+const brandInk_1 = require("../../builders/brandInk");
 const neutrals_1 = require("../neutrals");
 const PRIMARY_500 = "#8B3FC8";
 const SECONDARY_ANCHOR = "#1e0f30";
@@ -30,19 +31,14 @@ const secondary = {
     900: "#08030b",
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(SECONDARY_ANCHOR),
 };
-const tertiary = { ...secondary };
+const tertiary = { ...(0, brandInk_1.rotateScaleHue)(secondary), opacity: secondary.opacity };
 const gray = {
     50: "#f9f7fb",
     100: "#f0eaf6",
     200: "#e4d9f0",
     300: "#cdbde3",
     400: "#a897cc",
-    // Retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff — a value that
-    // clears AA by <0.02 is treated as failing, see Wave D QA follow-up) against every
-    // backgroundColor surface it's actually rendered on (main/secondary/light/subtle —
-    // verified via usage grep). muted/accent/tertiary/etc. have 0-1 live call sites today and
-    // none pair them with gray[500] text; going dark enough to also clear those would push
-    // past gray[600]'s own lightness and break the ramp order.
+    // NOTE: retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff) against live backgroundColor surfaces.
     500: "#746499",
     600: "#5e527a",
     700: "#4a4060",
@@ -144,12 +140,7 @@ const boxborder = {
     800: "#6d6879",
     900: "#52505b",
 };
-/**
- * The low rungs sat two steps too pale to draw anything: `200` — the default hairline for
- * cards, dividers and inputs — was L94 against a L98 canvas, so a card had no visible edge.
- * It now lands at L88, contrast 1.22 against a white card, matching Chakra's gray.200 hairline.
- * Rungs 700+ are unchanged; they were never the problem.
- */
+// NOTE: 200 lifted to L88 (was L94, invisible against an L98 canvas) — matches Chakra's gray.200 hairline.
 const border = {
     50: "#f6f4f9",
     100: "#ede9f4",

package/dist/Theme/tokens/brands/meadow/palette.dark.d.ts

@@ -1,6 +1,2 @@
-/**
- * Dark palette for the meadow brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 declare const palette: import("../..").PaletteProps;
 export default palette;

package/dist/Theme/tokens/brands/meadow/palette.dark.js

@@ -5,9 +5,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
 const palette_light_1 = __importDefault(require("./palette.light"));
-/**
- * Dark palette for the meadow brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
 exports.default = palette;

package/dist/Theme/tokens/brands/meadow/palette.light.js

@@ -20,25 +20,16 @@ const primary = {
 const palette = {
     ...neutrals_1.neutralTokens,
     ...(0, brandInk_1.buildBrandInk)(PRIMARY_500),
-    // `to` stop retuned so white gradient-button text (onGradient, accentText.ts) clears AA — the
-    // original let white drop to 2.49 there (`from` already passed at 6.39, unchanged).
-    // Nudged one step further (4.519 -> 4.627): the first pass cleared AA by <0.02, too thin a
-    // margin to trust against rounding/rendering variance.
+    // NOTE: `to` stop retuned so white gradient-button text clears AA — original let it drop to 2.49.
     gradient: { from: "#2d6a4f", to: "#0f8376" }, // forest green → teal
     primary,
-    tertiary: { ...primary },
     gray: {
         50: "#f6f9f7",
         100: "#ecf1ee",
         200: "#dce5e0",
         300: "#c4d2cb",
         400: "#93a99f",
-        // Retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff — a value that
-        // clears AA by <0.02 is treated as failing, see Wave D QA follow-up) against every
-        // backgroundColor surface it's actually rendered on (main/secondary/light/subtle —
-        // verified via usage grep). muted/accent/tertiary/etc. have 0-1 live call sites today and
-        // none pair them with gray[500] text; going dark enough to also clear those would push
-        // past gray[600]'s own lightness and break the ramp order.
+        // NOTE: retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff) against live backgroundColor surfaces.
         500: "#5c7369",
         600: "#445f52",
         700: "#344a3f",

package/dist/Theme/tokens/brands/radiant/palette.dark.d.ts

@@ -1,6 +1,2 @@
-/**
- * Dark palette for the radiant brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 declare const palette: import("../..").PaletteProps;
 export default palette;

package/dist/Theme/tokens/brands/radiant/palette.dark.js

@@ -5,9 +5,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
 const palette_light_1 = __importDefault(require("./palette.light"));
-/**
- * Dark palette for the radiant brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
 exports.default = palette;

package/dist/Theme/tokens/brands/radiant/palette.light.js

@@ -20,10 +20,7 @@ const primary = {
 const palette = {
     ...neutrals_1.neutralTokens,
     ...(0, brandInk_1.buildBrandInk)(PRIMARY_500),
-    // Stops retuned so white gradient-button text (onGradient, accentText.ts) clears AA at both
-    // ends — the original pair let white drop to 4.37/2.15 against from/to. Same hue, darker.
-    // Both nudged one step further (4.509/4.502 -> 4.601/4.617): the first pass cleared AA by
-    // <0.01, too thin a margin to trust against rounding/rendering variance.
+    // NOTE: stops retuned so white gradient-button text clears AA at both ends — original let it drop to 4.37/2.15.
     gradient: { from: "#cd4733", to: "#a36807" }, // terracotta red → amber
     primary,
     // 🌫️ Neutral gray (slightly warm, not pink)
@@ -33,12 +30,7 @@ const palette = {
         200: "#e2dad5",
         300: "#cec2bb",
         400: "#b3a39a",
-        // Retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff — a value that
-        // clears AA by <0.02 is treated as failing, see Wave D QA follow-up) against every
-        // backgroundColor surface it's actually rendered on (main/secondary/light/subtle —
-        // verified via usage grep). muted/accent/tertiary/etc. have 0-1 live call sites today and
-        // none pair them with gray[500] text; going dark enough to also clear those would push
-        // past gray[600]'s own lightness and break the ramp order.
+        // NOTE: retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff) against live backgroundColor surfaces.
         500: "#796861",
         600: "#6e6058",
         700: "#534841",

package/dist/Theme/tokens/brands/rosewood/palette.dark.d.ts

@@ -1,6 +1,2 @@
-/**
- * Dark palette for the rosewood brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 declare const palette: import("../..").PaletteProps;
 export default palette;

package/dist/Theme/tokens/brands/rosewood/palette.dark.js

@@ -5,9 +5,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
 const palette_light_1 = __importDefault(require("./palette.light"));
-/**
- * Dark palette for the rosewood brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
 exports.default = palette;

package/dist/Theme/tokens/brands/rosewood/palette.light.js

@@ -20,10 +20,7 @@ const primary = {
 const palette = {
     ...neutrals_1.neutralTokens,
     ...(0, brandInk_1.buildBrandInk)(PRIMARY_500),
-    // Stops retuned so white gradient-button text (onGradient, accentText.ts) clears AA at both
-    // ends — the original pair let white drop to 3.46/2.69 against from/to. Same hue, darker.
-    // Both nudged one step further (4.520/4.505 -> 4.609/4.607): the first pass cleared AA by
-    // <0.02, too thin a margin to trust against rounding/rendering variance.
+    // NOTE: stops retuned so white gradient-button text clears AA at both ends — original let it drop to 3.46/2.69.
     gradient: { from: "#c74962", to: "#ea0727" }, // rose → coral pink
     primary,
     // 🌫️ Neutral gray (slightly warm, avoids purple tint)
@@ -33,16 +30,7 @@ const palette = {
         200: "#e4dada",
         300: "#d0c1c1",
         400: "#b4a2a2",
-        // Retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff — a value that
-        // clears AA by <0.02 is treated as failing, see Wave D QA follow-up) against every
-        // backgroundColor surface it's actually rendered on (main/secondary/light/subtle —
-        // verified via usage grep). muted/accent/tertiary/etc. have 0-1 live call sites today and
-        // none pair them with gray[500] text; going dark enough to also clear those would push
-        // past gray[600]'s own lightness and break the ramp order.
-        //
-        // First pass (#7b6868) measured 4.516 against `secondary` — a 0.016 margin, too thin to
-        // trust (same failure mode as the gradient-stop retune). Darkened ~0.7 lightness points
-        // (hue/saturation preserved) to restore the safe margin below.
+        // NOTE: retuned to a safe >=4.6 AA margin — first pass (#7b6868) measured 4.516, too thin a margin to trust.
         500: "#796666",
         600: "#6e5e5e",
         700: "#534747",

package/dist/Theme/tokens/brands/skyline/palette.dark.d.ts

@@ -1,6 +1,2 @@
-/**
- * Dark palette for the skyline brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 declare const palette: import("../..").PaletteProps;
 export default palette;

package/dist/Theme/tokens/brands/skyline/palette.dark.js

@@ -5,9 +5,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
 const palette_light_1 = __importDefault(require("./palette.light"));
-/**
- * Dark palette for the skyline brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
 exports.default = palette;

package/dist/Theme/tokens/brands/skyline/palette.light.js

@@ -20,25 +20,16 @@ const primary = {
 const palette = {
     ...neutrals_1.neutralTokens,
     ...(0, brandInk_1.buildBrandInk)(PRIMARY_500),
-    // `to` stop retuned so white gradient-button text (onGradient, accentText.ts) clears AA — the
-    // original let white drop to 2.14 there (`from` already passed at 11.28, unchanged).
-    // Nudged one step further (4.515 -> 4.600): the first pass cleared AA by <0.02, too thin a
-    // margin to trust against rounding/rendering variance.
+    // NOTE: `to` stop retuned so white gradient-button text clears AA — original let it drop to 2.14.
     gradient: { from: "#1a3a6b", to: "#067db2" }, // deep navy → sky blue
     primary,
-    tertiary: { ...primary },
     gray: {
         50: "#f4f6fa",
         100: "#e6eaf2",
         200: "#d3dae8",
         300: "#b0bcd4",
         400: "#8094b0",
-        // Retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff — a value that
-        // clears AA by <0.02 is treated as failing, see Wave D QA follow-up) against every
-        // backgroundColor surface it's actually rendered on (main/secondary/light/subtle —
-        // verified via usage grep). muted/accent/tertiary/etc. have 0-1 live call sites today and
-        // none pair them with gray[500] text; going dark enough to also clear those would push
-        // past gray[600]'s own lightness and break the ramp order.
+        // NOTE: retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff) against live backgroundColor surfaces.
         500: "#566c8b",
         600: "#3d526b",
         700: "#2e3f54",

package/dist/Theme/tokens/brands/slate/palette.dark.d.ts

@@ -1,6 +1,2 @@
-/**
- * Dark palette for the slate brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 declare const palette: import("../..").PaletteProps;
 export default palette;

package/dist/Theme/tokens/brands/slate/palette.dark.js

@@ -5,9 +5,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
 const palette_light_1 = __importDefault(require("./palette.light"));
-/**
- * Dark palette for the slate brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
 exports.default = palette;

package/dist/Theme/tokens/brands/slate/palette.light.js

@@ -22,23 +22,13 @@ const palette = {
     ...(0, brandInk_1.buildBrandInk)(PRIMARY_500),
     gradient: { from: "#666d7a", to: "#4a4e59" },
     primary,
-    tertiary: { ...primary },
     gray: {
         50: "#f9fafb",
         100: "#f3f4f6",
         200: "#e5e7eb",
         300: "#d1d5db",
         400: "#9ca3af",
-        // Retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff — a value that
-        // clears AA by <0.02 is treated as failing, see Wave D QA follow-up) against every
-        // backgroundColor surface it's actually rendered on (main/secondary/light/subtle —
-        // verified via usage grep). muted/accent/tertiary/etc. have 0-1 live call sites today and
-        // none pair them with gray[500] text; going dark enough to also clear those would push
-        // past gray[600]'s own lightness and break the ramp order.
-        //
-        // First pass (#6a707e) measured 4.509 against `secondary` — a 0.009 margin, too thin to
-        // trust (same failure mode as the gradient-stop retune). Darkened ~0.7 lightness points
-        // (hue/saturation preserved) to restore the safe margin below.
+        // NOTE: retuned to a safe >=4.6 AA margin — first pass (#6a707e) measured 4.509, too thin a margin to trust.
         500: "#686e7c",
         600: "#4b5563",
         700: "#374151",

package/dist/Theme/tokens/brands/storefront/palette.dark.d.ts

@@ -1,6 +1,2 @@
-/**
- * Dark palette for the storefront brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 declare const palette: import("../..").PaletteProps;
 export default palette;

package/dist/Theme/tokens/brands/storefront/palette.dark.js

@@ -5,9 +5,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
 const palette_light_1 = __importDefault(require("./palette.light"));
-/**
- * Dark palette for the storefront brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
 exports.default = palette;

package/dist/Theme/tokens/brands/zinc/palette.dark.d.ts

@@ -46,6 +46,15 @@ declare const palette: {
         };
     };
     tertiary: {
+        opacity: {
+            4: string;
+            8: string;
+            16: string;
+            24: string;
+            32: string;
+            40: string;
+            48: string;
+        };
         50: string;
         100: string;
         200: string;
@@ -56,15 +65,6 @@ declare const palette: {
         700: string;
         800: string;
         900: string;
-        opacity: {
-            4: string;
-            8: string;
-            16: string;
-            24: string;
-            32: string;
-            40: string;
-            48: string;
-        };
     };
     background: {
         50: string;
@@ -202,5 +202,6 @@ declare const palette: {
     semanticText: import("../..").SemanticTextTokens;
     textMuted: string;
     onSemantic: import("../..").SemanticTextTokens;
+    surfaceRaised: string;
 };
 export default palette;

package/dist/Theme/tokens/brands/zinc/palette.dark.js

@@ -4,28 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const brandInk_1 = require("../../builders/brandInk");
 const buildBrandTokens_1 = require("../../builders/buildBrandTokens");
 const accentText_1 = require("../../builders/accentText");
 const palette_light_1 = __importDefault(require("./palette.light"));
-/**
- * zinc dark is the shadcn dark look and INVERTS the primary: the filled button is near-white
- * `#e4e4e7` carrying a `#18181b` label (13.96:1) — the opposite of every other brand, whose dark
- * primary stays a lifted version of its own hue. `#e4e4e7` is shadcn's actual dark-mode `--primary`
- * (verified against shadcn's live zinc theme registry, 2026-07-18) — a shade dimmer than pure
- * `#fafafa`, which is shadcn's `--foreground` (default body text), not `--primary`. The generic
- * `buildDarkPalette` derivation would only lift zinc's near-black accent to a mid grey (a light
- * label's floor), so `primary`/`secondary`/`background` (numeric ramp)/`text`/`header`/`gray`/
- * `border`/`boxborder`/`placeholder`/`disabled`/`table` are pinned here as explicit literals ported
- * verbatim from Mobile-Components, matching shadcn's own dark palette as closely as web's token
- * shape allows.
- *
- * `backgroundColor` (named surfaces) and `sidebar` are the two fields left to `...derived` instead
- * of a literal port — see the comment above the `palette` object for why.
- *
- * `accentText` is recomputed against the OVERRIDDEN `primary` and `derived.backgroundColor.main`,
- * not spread from `derived` — the generic derivation's `accentText` was picked for the generic
- * (wrong) lifted primary and would be stale once `primary` is replaced below.
- */
+// NOTE: zinc dark INVERTS the primary (near-white fill, dark label) to match shadcn — every other brand lifts its own hue instead. Most ramps below are literals ported from Mobile-Components.
 const derived = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
 const PRIMARY_500 = "#e4e4e7";
 const SECONDARY_500 = "#a1a1aa";
@@ -92,11 +75,7 @@ const header = {
     800: "#fefefe",
     900: "#ffffff",
 };
-// muted-foreground = gray[500] = #a1a1aa (5.81:1 on the #27272a muted surface); it also serves
-// as the focus ring on the #09090b canvas (7.76:1). gray[400] = the interactive border/icon rung,
-// and is the one value here NOT ported verbatim: it is pinned to whatever clears the 3:1 non-text
-// bar on the LIGHTEST named surface, which is derived rather than ported. shadcn's own #71717a
-// measures 2.81 there, so this sits two steps lighter (3.19).
+// NOTE: gray[400] is the one value here NOT ported verbatim — pinned to clear the 3:1 non-text bar (shadcn's own measures 2.81).
 const gray = {
     50: "#18181b",
     100: "#27272a",
@@ -177,17 +156,8 @@ const palette = {
     gradient: { from: PRIMARY_500, to: "#a1a1aa" },
     primary,
     secondary,
-    tertiary: { ...secondary },
-    // `backgroundColor` (named surfaces) and `sidebar` are deliberately NOT overridden with
-    // mobile's literal values: mobile's zinc names 5 groups of surfaces onto the same hex each
-    // (e.g. quaternary/medium/neutral all "#18181b"), which violates web's "every named surface
-    // is a visually distinct elevation step" invariant (`darkSurfaces.test.ts`) that every other
-    // brand is held to. Falling through to `...derived` runs zinc through the SAME generic
-    // `NAMED_SURFACE_L` staircase every other brand uses — zinc's hue is ~240deg/near-zero
-    // saturation, so the result is visually the same cool neutral, just with distinct steps.
-    // `sidebar` similarly falls through to `derived.sidebar` (== `light.sidebar`, non-inverting)
-    // rather than mobile's separately-tuned dark sidebar, matching the "sidebar never inverts"
-    // invariant every other web brand relies on (including this session's own SideBar accent fix).
+    tertiary: { ...(0, brandInk_1.rotateScaleHue)(secondary), opacity: secondary.opacity },
+    // NOTE: backgroundColor/sidebar fall through to `...derived` — mobile's literals collapse distinct elevation steps, breaking darkSurfaces.test.ts.
     background,
     text,
     header,

package/dist/Theme/tokens/brands/zinc/palette.light.js

@@ -1,17 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildBrandTokens_1 = require("../../builders/buildBrandTokens");
-/**
- * zinc — the shadcn-clone brand already shipped on Mobile-Components (the mobile design
- * library's own default brand). These exact hexes are ported verbatim from mobile's
- * `src/theme/tokens/brands/zinc/palette.light.ts` — the mobile file's own comment calls them
- * "the shared source of truth: web is adopting them verbatim" — so every rung here is
- * authoritative, not an approximation or a rehue.
- *
- * Unlike every other web brand, zinc's filled primary is the near-black anchor itself:
- * `primary[500]` is `#18181b`, a white label lands at 16.97:1. `background[50]` is the literal
- * canvas white as a real surface token, never a hardcoded `"white"`.
- */
+const brandInk_1 = require("../../builders/brandInk");
+// NOTE: hexes ported verbatim from Mobile-Components' zinc (the shadcn-clone brand) — authoritative, not an approximation.
 const PRIMARY_500 = "#18181b";
 const SECONDARY_500 = "#71717a";
 const primary = {
@@ -40,7 +31,7 @@ const secondary = {
     900: "#18181b",
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(SECONDARY_500),
 };
-const tertiary = { ...secondary };
+const tertiary = { ...(0, brandInk_1.rotateScaleHue)(secondary), opacity: secondary.opacity };
 // Shared status ramps — identical across every brand (status is universal, brand is the hue).
 const semantic = {
     success: {

package/dist/Theme/tokens/builders/accentText.d.ts

@@ -1,23 +1,6 @@
 import type { ColorScale } from "../types";
 /** WCAG AA for normal-size text. Accent-as-text must clear this against the canvas. */
 declare const AA_NORMAL_TEXT = 4.5;
-/**
- * Pick the accent rung to use for accent-COLORED TEXT sitting on the canvas.
- *
- * `primary[500]` cannot serve both roles: it must stay dark enough for a white label on a
- * filled button (>=4.5) yet be light enough to read as text on a dark canvas (>=4.5). Those
- * constraints are mutually exclusive at a single lightness, so text gets its own token.
- *
- * Falls back to the most extreme rung when no candidate clears AA, so the result is always a
- * real brand color rather than a throw. If `primary` itself is missing (a caller rendered
- * outside a Pixelize theme, so the scale never got merged in), there is no brand rung to pick
- * from at all — fall back to whichever of white/black clears AA against `canvas`, using the
- * same proven-always-safe math as `onFilled` below, rather than throwing on `primary[rung]`.
- *
- * `ColorScale` requires every rung 50-900, but a caller can still hand in a partial object (a
- * sparse test theme mock, a hand-built scale) — treat a missing rung as "doesn't clear AA" and
- * keep walking rather than crashing `contrastRatio` on `undefined`.
- */
 export declare const pickAccentText: (primary: ColorScale, canvas: string) => string;
 /** Canvas assumed when no Pixelize theme is mounted. Never painted; only fed to contrast math. */
 export declare const DEFAULT_CANVAS = "#ffffff";
@@ -28,33 +11,7 @@ export declare const DEFAULT_BLACK = "#000000";
 declare const DARK_CANVAS_LUMINANCE = 0.2;
 /** True when `canvas` is a dark surface. Lets style configs branch without threading color mode. */
 export declare const isDarkCanvas: (canvas: string) => boolean;
-/**
- * Accent text color for any scale (primary, secondary, red, …) drawn on `canvas`.
- *
- * Held to AA in BOTH modes. This deliberately no longer returns light's `[500]` untouched: that
- * concession existed only while light mode was frozen for consumers, and it shipped known AA
- * failures (radiant 4.15, emerald 3.24, rosewood 3.29). Those brands now step to the nearest rung
- * that clears AA, which changes their light pixels — the accepted cost of meeting WCAG.
- */
 export declare const accentTextOnCanvas: (scale: ColorScale, canvas: string) => string;
-/**
- * Ink for text drawn ON a filled swatch (a button/tag/badge fill), not the canvas. `white`/`black`
- * must be the mode-stable absolutes (`theme.colors.white` / `theme.colors.black`) — NOT a
- * mode-adaptive token like `text[900]`, which is dark ink in light mode but near-white in dark and
- * would silently flip which candidate is "the dark one" depending on mode.
- *
- * Provably always clears AA: brute-forcing the sRGB cube shows `max(contrast(white,X),
- * contrast(black,X)) >= 4.583` for every X, so whichever of the two fails, the other clears 4.5 —
- * this never needs to step the fill's rung. Prefers white first (brand-conventional look) and
- * only falls back to black when white itself fails.
- */
 export declare const onFilled: (fill: string, white: string, black: string) => string;
-/**
- * Ink for text on a two-stop gradient fill. Picks `onFilled` against whichever stop is LIGHTER —
- * the harder case for either ink to clear. Each brand's `gradient` token is tuned so this
- * resolves to the same ink at both ends (see palette.light.ts `gradient` comments); a caller
- * that overrides the gradient (e.g. `UpgradeButton`'s `gradient` prop) isn't guaranteed the same
- * safety, since an arbitrary pair can still need different inks at each end.
- */
 export declare const onGradient: (from: string, to: string, white: string, black: string) => string;
 export { AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE };