pixelize-design-library 3.0.1-beta.1 → 3.1.0

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

@@ -0,0 +1,123 @@
+import { neutralTokens, sharedBoxShadow } from "../neutrals.js";
+import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens.js";
+import { buildBrandInk } from "../../builders/brandInk.js";
+const PRIMARY_500 = "#cb6b94";
+const primary = {
+    50: "#fcf2f7",
+    100: "#f6d6e5",
+    200: "#edabc9",
+    300: "#e480ad",
+    400: "#d76398",
+    500: PRIMARY_500,
+    600: "#b35681",
+    700: "#93466a",
+    800: "#723754",
+    900: "#52273e",
+    opacity: buildPrimaryOpacity(PRIMARY_500),
+};
+const palette = {
+    ...neutralTokens,
+    ...buildBrandInk(PRIMARY_500),
+    // 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)
+    gray: {
+        50: "#f9f7f7",
+        100: "#f1ecec",
+        200: "#e4dada",
+        300: "#d0c1c1",
+        400: "#b4a2a2",
+        // 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",
+        800: "#3a3030",
+        900: "#272020",
+    },
+    // 🌸 Background system (soft rose tint)
+    backgroundColor: {
+        main: "#fdf8fa",
+        secondary: "#f6ecef",
+        tertiary: "#efe0e5",
+        quaternary: "#e8d4db",
+        light: "#fffafb",
+        medium: "#ecd9df",
+        accent: "#e2c7cf",
+        subtle: "#fbf4f7",
+        muted: "#d9bfc6",
+        neutral: "#ecd9df",
+        base: "#fefbfd",
+        tableHeader: "#f6ecef",
+    },
+    background: {
+        50: "#ffffff",
+        100: "#fdf9fb",
+        200: "#f6ecef",
+        300: "#efe0e5",
+        400: "#e8d4db",
+        500: "#e0c8d0",
+        600: "#cab3bc",
+        700: "#a38f97",
+        800: "#7c6b73",
+        900: "#5e5157",
+    },
+    border: {
+        50: "#fffafb",
+        100: "#f6edef",
+        200: "#eddcdf",
+        300: "#e4ccd0",
+        400: "#dbbcc1",
+        500: "#d1acb2",
+        600: "#bd9aa0",
+        700: "#948086",
+        800: "#706266",
+        900: "#564a4d",
+    },
+    boxborder: {
+        50: "#fffafb",
+        100: "#f5ecef",
+        200: "#ebdade",
+        300: "#e1c9ce",
+        400: "#d7b9bf",
+        500: "#cda8af",
+        600: "#b9979e",
+        700: "#90777f",
+        800: "#6d5a61",
+        900: "#534347",
+    },
+    table: {
+        hover: {
+            50: "#fffefe",
+            100: "#faf2f5",
+            200: "#f4e6ea",
+            300: "#eedadf",
+            400: "#e7cdd4",
+            500: "#e1c1c9",
+            600: "#caaeb6",
+            700: "#a28d94",
+            800: "#7b6e73",
+            900: "#5d5457",
+        },
+    },
+    // 🌑 Sidebar (charcoal rose, not black)
+    sidebar: {
+        background: {
+            50: "#f3eaed",
+            100: "#e0c9cf",
+            200: "#7a4f57",
+            300: "#9a6a73",
+            400: "#5e3a41",
+            500: "#1a1013", // rose-tinted charcoal
+            600: "#140c0e",
+            700: "#0f0809",
+            800: "#0a0506",
+            900: "#060303",
+        },
+    },
+    boxShadow: {
+        primary: buildPrimaryShadowTint(PRIMARY_500),
+        ...sharedBoxShadow,
+    },
+};
+export default palette;

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

@@ -0,0 +1,5 @@
+import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
+import light from "./palette.light.js";
+const palette = lazyPalette(light, () => buildDarkPalette(light));
+export default palette;

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

@@ -0,0 +1,120 @@
+import { neutralTokens, sharedBoxShadow } from "../neutrals.js";
+import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens.js";
+import { buildBrandInk } from "../../builders/brandInk.js";
+const PRIMARY_500 = "#1a3a6b"; // was #0088cc — deep navy
+const primary = {
+    50: "#e8ecf4",
+    100: "#c9d3e6",
+    200: "#9aaece",
+    300: "#6888b5",
+    400: "#3d649d",
+    500: PRIMARY_500, // #1a3a6b
+    600: "#152f58",
+    700: "#102446",
+    800: "#0b1a33",
+    900: "#071021",
+    opacity: buildPrimaryOpacity(PRIMARY_500),
+};
+const palette = {
+    ...neutralTokens,
+    ...buildBrandInk(PRIMARY_500),
+    // 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,
+    gray: {
+        50: "#f4f6fa",
+        100: "#e6eaf2",
+        200: "#d3dae8",
+        300: "#b0bcd4",
+        400: "#8094b0",
+        // 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",
+        800: "#202d3d",
+        900: "#151e29",
+    },
+    backgroundColor: {
+        main: "#f3f5fa",
+        secondary: "#e7ecf5",
+        tertiary: "#dce3f0",
+        quaternary: "#d0daeb",
+        light: "#f8f9fd",
+        medium: "#dfe6f2",
+        accent: "#d4dcec",
+        subtle: "#eef1f8",
+        muted: "#c8d2e4",
+        neutral: "#dce3ef",
+        base: "#f7f9fc",
+        tableHeader: "#e7ecf5",
+    },
+    background: {
+        50: "#ffffff",
+        100: "#f7f9fc",
+        200: "#eef2f8",
+        300: "#e4eaf3",
+        400: "#dae3ee",
+        500: "#d0dae9",
+        600: "#b8c4d8",
+        700: "#8d9cb4",
+        800: "#65748e",
+        900: "#4c5870",
+    },
+    border: {
+        50: "#fafbfd",
+        100: "#eef1f7",
+        200: "#e5eaf3",
+        300: "#dce3ee",
+        400: "#d3dbe9",
+        500: "#c9d2e3",
+        600: "#b4bfd5",
+        700: "#8a96ac",
+        800: "#677182",
+        900: "#4f5764",
+    },
+    boxborder: {
+        50: "#fafbfd",
+        100: "#edf0f6",
+        200: "#e3e8f2",
+        300: "#d9e0ed",
+        400: "#d0d8e8",
+        500: "#c6cfe2",
+        600: "#b2bcd4",
+        700: "#8891a8",
+        800: "#656d80",
+        900: "#4d5362",
+    },
+    table: {
+        hover: {
+            50: "#fdfeff",
+            100: "#f4f7fc",
+            200: "#ecf0f8",
+            300: "#e4eaf5",
+            400: "#dce3f1",
+            500: "#d4dced",
+            600: "#bec9de",
+            700: "#95a2b8",
+            800: "#707c90",
+            900: "#545e6e",
+        },
+    },
+    sidebar: {
+        background: {
+            50: "#e4e8f0",
+            100: "#c8d0e0",
+            200: "#1e2e45", // lighter surface for hover/items
+            300: "#4d6280",
+            400: "#2e4460",
+            500: "#0d1e33", // main sidebar — near-black navy
+            600: "#0a1829",
+            700: "#07111f",
+            800: "#050b14",
+            900: "#02060a",
+        },
+    },
+    boxShadow: {
+        primary: buildPrimaryShadowTint(PRIMARY_500),
+        ...sharedBoxShadow,
+    },
+};
+export default palette;

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

@@ -0,0 +1,5 @@
+import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
+import light from "./palette.light.js";
+const palette = lazyPalette(light, () => buildDarkPalette(light));
+export default palette;

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

@@ -0,0 +1,119 @@
+import { neutralTokens, sharedBoxShadow } from "../neutrals.js";
+import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens.js";
+import { buildBrandInk } from "../../builders/brandInk.js";
+const PRIMARY_500 = "#6b7280"; // was #475569 — pure neutral gray, no blue cast
+const primary = {
+    50: "#f9fafb",
+    100: "#f3f4f6",
+    200: "#e5e7eb",
+    300: "#d1d5db",
+    400: "#9ca3af",
+    500: PRIMARY_500, // #6b7280
+    600: "#4b5563",
+    700: "#374151",
+    800: "#1f2937",
+    900: "#111827",
+    opacity: buildPrimaryOpacity(PRIMARY_500),
+};
+const palette = {
+    ...neutralTokens,
+    ...buildBrandInk(PRIMARY_500),
+    gradient: { from: "#666d7a", to: "#4a4e59" },
+    primary,
+    gray: {
+        50: "#f9fafb",
+        100: "#f3f4f6",
+        200: "#e5e7eb",
+        300: "#d1d5db",
+        400: "#9ca3af",
+        // 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",
+        800: "#1f2937",
+        900: "#111827",
+    },
+    backgroundColor: {
+        main: "#f9fafb",
+        secondary: "#f3f4f6",
+        tertiary: "#edeef1",
+        quaternary: "#e5e7eb",
+        light: "#fcfcfd",
+        medium: "#eaebee",
+        accent: "#e1e3e7",
+        subtle: "#f5f6f7",
+        muted: "#d8dadf",
+        neutral: "#eeeef1",
+        base: "#fafafa",
+        tableHeader: "#f3f4f6",
+    },
+    background: {
+        50: "#ffffff",
+        100: "#fafafa",
+        200: "#f4f4f5",
+        300: "#f0f0f1",
+        400: "#eaeaec",
+        500: "#e4e4e7",
+        600: "#cdced2",
+        700: "#9a9ba1",
+        800: "#6b6d75",
+        900: "#4f5057",
+    },
+    border: {
+        50: "#fafafa",
+        100: "#f4f4f5",
+        200: "#ececee",
+        300: "#e4e4e7",
+        400: "#dcdcdf",
+        500: "#d4d4d8",
+        600: "#bebebf",
+        700: "#909096",
+        800: "#6b6b70",
+        900: "#505054",
+    },
+    boxborder: {
+        50: "#fafafa",
+        100: "#f3f3f4",
+        200: "#eaeaec",
+        300: "#e1e1e4",
+        400: "#d9d9dc",
+        500: "#d0d0d4",
+        600: "#bcbcc0",
+        700: "#8e8e93",
+        800: "#6a6a6e",
+        900: "#4f4f52",
+    },
+    table: {
+        hover: {
+            50: "#fefefe",
+            100: "#f7f7f8",
+            200: "#f1f1f3",
+            300: "#ebebed",
+            400: "#e5e5e8",
+            500: "#dfdfe2",
+            600: "#cbcbcf",
+            700: "#a0a0a5",
+            800: "#787880",
+            900: "#5a5a60",
+        },
+    },
+    sidebar: {
+        background: {
+            50: "#d4d4d8",
+            100: "#a1a1aa",
+            200: "#71717a", // hover surface
+            300: "#52525b",
+            400: "#3f3f46",
+            500: "#18181b", // ← near-black charcoal, pure gray no blue
+            600: "#141417",
+            700: "#101013",
+            800: "#0c0c0e",
+            900: "#08080a",
+        },
+    },
+    boxShadow: {
+        primary: buildPrimaryShadowTint(PRIMARY_500),
+        ...sharedBoxShadow,
+    },
+};
+export default palette;

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

@@ -0,0 +1,5 @@
+import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
+import light from "./palette.light.js";
+const palette = lazyPalette(light, () => buildDarkPalette(light));
+export default palette;

package/dist/esm/Theme/tokens/brands/storefront/palette.light.js

@@ -0,0 +1,123 @@
+import { neutralTokens, sharedBoxShadow } from "../neutrals.js";
+import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens.js";
+import { buildBrandInk } from "../../builders/brandInk.js";
+const PRIMARY_500 = "#004f4b"; // deep spruce teal — storefront/retail brand anchor
+const primary = {
+    50: "#eafaf9",
+    100: "#b7eeeb",
+    200: "#6de0da",
+    300: "#29ccc4",
+    400: "#168681",
+    500: PRIMARY_500,
+    600: "#00423f",
+    700: "#003532",
+    800: "#002927",
+    900: "#001d1c",
+    opacity: buildPrimaryOpacity(PRIMARY_500),
+};
+const palette = {
+    ...neutralTokens,
+    ...buildBrandInk(PRIMARY_500),
+    // Same hue as primary, darker stop for the "to" end — mirrors emerald's gradient pattern.
+    // White gradient-button text verified AA at both stops (4.98 / 6.96).
+    gradient: { from: "#0c7d77", to: "#095e90" }, // spruce teal → deep blue
+    primary,
+    // 🌫️ Neutral gray (cool, near-teal — same shape as emerald's gray, rehued)
+    gray: {
+        50: "#f6f8f8",
+        100: "#edf2f2",
+        200: "#dce5e5",
+        300: "#c3d2d1",
+        400: "#9fb3b2",
+        500: "#617473",
+        600: "#5e706f",
+        700: "#475554",
+        800: "#2f3a39",
+        900: "#1f2626",
+    },
+    // 🌊 Background system (very subtle teal tint)
+    backgroundColor: {
+        main: "#f7fbfb",
+        secondary: "#eef7f7",
+        tertiary: "#e5f1f0",
+        quaternary: "#dcebea",
+        light: "#fcfefe",
+        medium: "#e2efee",
+        accent: "#d5e7e6",
+        subtle: "#f4f9f9",
+        muted: "#cfe2e1",
+        neutral: "#e2efee",
+        base: "#fafdfd",
+        tableHeader: "#eef7f7",
+    },
+    background: {
+        50: "#ffffff",
+        100: "#fbfefe",
+        200: "#eef7f7",
+        300: "#e5f1f0",
+        400: "#dcebea",
+        500: "#d2e4e3",
+        600: "#bdd1d0",
+        700: "#96a9a8",
+        800: "#707f7e",
+        900: "#545f5e",
+    },
+    border: {
+        50: "#faffff",
+        100: "#edf5f5",
+        200: "#ddebea",
+        300: "#cde1e0",
+        400: "#bdd6d5",
+        500: "#accbc9",
+        600: "#99b7b5",
+        700: "#788f8e",
+        800: "#5b6e6d",
+        900: "#455453",
+    },
+    boxborder: {
+        50: "#faffff",
+        100: "#ecf4f4",
+        200: "#d9e7e6",
+        300: "#c6dad9",
+        400: "#b3cdcc",
+        500: "#a0c0be",
+        600: "#8dadab",
+        700: "#6e8786",
+        800: "#546867",
+        900: "#3f504f",
+    },
+    table: {
+        hover: {
+            50: "#fbfefe",
+            100: "#f0f7f7",
+            200: "#e6f1f0",
+            300: "#dceae9",
+            400: "#d2e3e2",
+            500: "#c8dcdb",
+            600: "#b4c7c6",
+            700: "#909f9e",
+            800: "#6c7776",
+            900: "#525b5b",
+        },
+    },
+    // 🌑 Sidebar (deep teal-black)
+    sidebar: {
+        background: {
+            50: "#eaf4f4",
+            100: "#cfe3e2",
+            200: "#3e6f6d",
+            300: "#5a8c8a",
+            400: "#2f5a58",
+            500: "#0e1f1e", // charcoal teal (instead of near-black)
+            600: "#0b1918",
+            700: "#081312",
+            800: "#060e0e",
+            900: "#040909",
+        },
+    },
+    boxShadow: {
+        primary: buildPrimaryShadowTint(PRIMARY_500),
+        ...sharedBoxShadow,
+    },
+};
+export default palette;

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

@@ -0,0 +1,145 @@
+import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { rotateScaleHue } from "../../builders/brandInk.js";
+import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens.js";
+import { pickAccentText, onFilled } from "../../builders/accentText.js";
+import { lazyPalette } from "../../builders/lazy.js";
+import light from "./palette.light.js";
+// 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 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: 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: buildPrimaryOpacity(SECONDARY_500),
+};
+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",
+};
+// 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 grayInk = {
+    300: "#52525b",
+    400: "#7a7a83",
+    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 buildPalette = () => {
+    const derived = buildDarkPalette(light);
+    return {
+        ...derived,
+        gradient: { from: PRIMARY_500, to: "#a1a1aa" },
+        primary,
+        secondary,
+        tertiary: { ...rotateScaleHue(secondary), opacity: secondary.opacity },
+        // NOTE: the planes (backgroundColor, background, table, gray fills) stay derived — they rise with the card.
+        text,
+        header,
+        gray: { ...derived.gray, ...grayInk },
+        border,
+        boxborder,
+        placeholder,
+        disabled,
+        accentText: pickAccentText(primary, derived.backgroundColor.main),
+        onPrimary: onFilled(PRIMARY_500, derived.white, derived.black),
+        boxShadow: {
+            primary: buildPrimaryShadowTint(PRIMARY_500),
+            error: derived.boxShadow.error,
+            default: "#00000080",
+        },
+    };
+};
+const palette = lazyPalette(light, buildPalette);
+export default palette;