pixelize-design-library 2.3.22 → 2.4.1-beta.1

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

@@ -0,0 +1,204 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+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.
+ */
+const derived = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const PRIMARY_500 = "#e4e4e7";
+const SECONDARY_500 = "#a1a1aa";
+const primary = {
+    50: "#18181b",
+    100: "#27272a",
+    200: "#3f3f46",
+    300: "#52525b",
+    400: "#a1a1aa",
+    500: PRIMARY_500,
+    600: "#fbfbfb",
+    700: "#fcfcfc",
+    800: "#fefefe",
+    900: "#ffffff",
+    opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
+};
+const secondary = {
+    50: "#18181b",
+    100: "#27272a",
+    200: "#3f3f46",
+    300: "#52525b",
+    400: "#71717a",
+    500: SECONDARY_500,
+    600: "#b4b4bb",
+    700: "#d4d4d8",
+    800: "#e4e4e7",
+    900: "#fafafa",
+    opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(SECONDARY_500),
+};
+// background[50] = the elevated surface (#0e0e11), resolved through a token, not a literal.
+const background = {
+    50: "#0e0e11",
+    100: "#131316",
+    200: "#18181b",
+    300: "#212124",
+    400: "#27272a",
+    500: "#3f3f46",
+    600: "#52525b",
+    700: "#71717a",
+    800: "#a1a1aa",
+    900: "#d4d4d8",
+};
+const text = {
+    50: "#71717a",
+    100: "#8a8a93",
+    200: "#a1a1aa",
+    300: "#b4b4bb",
+    400: "#d4d4d8",
+    500: "#fafafa",
+    600: "#fbfbfb",
+    700: "#fcfcfc",
+    800: "#fefefe",
+    900: "#ffffff",
+};
+const header = {
+    50: "#8a8a93",
+    100: "#a1a1aa",
+    200: "#c4c4c9",
+    300: "#d4d4d8",
+    400: "#e4e4e7",
+    500: "#fafafa",
+    600: "#fbfbfb",
+    700: "#fcfcfc",
+    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 #6b6b75 interactive border.
+const gray = {
+    50: "#18181b",
+    100: "#27272a",
+    200: "#3f3f46",
+    300: "#52525b",
+    400: "#6b6b75",
+    500: "#a1a1aa",
+    600: "#b4b4bb",
+    700: "#d4d4d8",
+    800: "#e4e4e7",
+    900: "#f4f4f5",
+};
+// border[200] = decorative (#27272a); border[500] = interactive outline (#6b6b75, 3.78:1 on canvas).
+const border = {
+    50: "#18181b",
+    100: "#212124",
+    200: "#27272a",
+    300: "#3f3f46",
+    400: "#52525b",
+    500: "#6b6b75",
+    600: "#8a8a93",
+    700: "#a1a1aa",
+    800: "#d4d4d8",
+    900: "#e4e4e7",
+};
+const boxborder = {
+    50: "#18181b",
+    100: "#212124",
+    200: "#27272a",
+    300: "#3f3f46",
+    400: "#52525b",
+    500: "#6b6b75",
+    600: "#8a8a93",
+    700: "#a1a1aa",
+    800: "#d4d4d8",
+    900: "#e4e4e7",
+};
+const placeholder = {
+    50: "#3f3f46",
+    100: "#52525b",
+    200: "#6b6b75",
+    300: "#71717a",
+    400: "#8a8a93",
+    500: "#a1a1aa",
+    600: "#b4b4bb",
+    700: "#c4c4c9",
+    800: "#d4d4d8",
+    900: "#e4e4e7",
+};
+const disabled = {
+    50: "#18181b",
+    100: "#212124",
+    200: "#27272a",
+    300: "#3f3f46",
+    400: "#4a4a52",
+    500: "#52525b",
+    600: "#6b6b75",
+    700: "#8a8a93",
+    800: "#a1a1aa",
+    900: "#d4d4d8",
+};
+const table = {
+    hover: {
+        50: "#0e0e11",
+        100: "#131316",
+        200: "#18181b",
+        300: "#1f1f22",
+        400: "#27272a",
+        500: "#2f2f33",
+        600: "#3f3f46",
+        700: "#52525b",
+        800: "#71717a",
+        900: "#a1a1aa",
+    },
+};
+const palette = {
+    ...derived,
+    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).
+    background,
+    text,
+    header,
+    gray,
+    border,
+    boxborder,
+    placeholder,
+    disabled,
+    table,
+    accentText: (0, accentText_1.pickAccentText)(primary, derived.backgroundColor.main, "dark"),
+    boxShadow: {
+        primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
+        error: derived.boxShadow.error,
+        default: "#00000080",
+    },
+};
+exports.default = palette;

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

@@ -0,0 +1,375 @@
+declare const palette: {
+    gradient: {
+        from: string;
+        to: string;
+    };
+    primary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        opacity: {
+            4: string;
+            8: string;
+            16: string;
+            24: string;
+            32: string;
+            40: string;
+            48: string;
+        };
+    };
+    secondary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        opacity: {
+            4: string;
+            8: string;
+            16: string;
+            24: string;
+            32: string;
+            40: string;
+            48: string;
+        };
+    };
+    tertiary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        opacity: {
+            4: string;
+            8: string;
+            16: string;
+            24: string;
+            32: string;
+            40: string;
+            48: string;
+        };
+    };
+    transparent: string;
+    black: string;
+    white: string;
+    semantic: {
+        success: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        error: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        warning: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        info: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    red: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    orange: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    yellow: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    green: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    teal: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    blue: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    cyan: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    purple: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    pink: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    backgroundColor: {
+        main: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+        light: string;
+        medium: string;
+        accent: string;
+        subtle: string;
+        muted: string;
+        neutral: string;
+        base: string;
+        tableHeader: string;
+    };
+    background: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    text: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    header: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    placeholder: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    boxShadow: {
+        primary: string;
+        error: string;
+        default: string;
+    };
+    sidebar: {
+        background: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    boxborder: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    border: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    table: {
+        hover: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    disabled: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+};
+export default palette;
+//# sourceMappingURL=palette.light.d.ts.map

package/dist/Theme/tokens/brands/zinc/palette.light.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.light.d.ts","sourceRoot":"","sources":["../../../../../src/Theme/tokens/brands/zinc/palette.light.ts"],"names":[],"mappings":"AAkXA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BZ,CAAC;AAEF,eAAe,OAAO,CAAC"}