pixelize-design-library 2.4.1-beta.11 → 2.4.1-beta.13

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

@@ -0,0 +1,134 @@
+import lavenderPalette from "../lavender/palette.light";
+import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens";
+const PRIMARY_500 = "#d16a7e"; // muted warm rose (not neon pink)
+const primary = {
+    50: "#fdf2f5",
+    100: "#f9d6de",
+    200: "#f2aaba",
+    300: "#ea7f96",
+    400: "#de627d",
+    500: PRIMARY_500,
+    600: "#b9556b",
+    700: "#984558",
+    800: "#763646",
+    900: "#552634",
+    opacity: buildPrimaryOpacity(PRIMARY_500),
+};
+const palette = {
+    ...lavenderPalette,
+    // 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.
+    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",
+        // 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.
+        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),
+        error: lavenderPalette.boxShadow.error,
+        default: lavenderPalette.boxShadow.default,
+    },
+};
+export default palette;

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

@@ -0,0 +1,8 @@
+import { buildDarkPalette } from "../../builders/buildDarkPalette";
+import light from "./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 = buildDarkPalette(light);
+export default palette;

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

@@ -0,0 +1,128 @@
+import lavenderPalette from "../lavender/palette.light";
+import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens";
+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 = {
+    ...lavenderPalette,
+    // `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.
+    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.
+        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),
+        error: lavenderPalette.boxShadow.error,
+        default: lavenderPalette.boxShadow.default,
+    },
+};
+export default palette;

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

@@ -0,0 +1,8 @@
+import { buildDarkPalette } from "../../builders/buildDarkPalette";
+import light from "./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 = buildDarkPalette(light);
+export default palette;

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

@@ -0,0 +1,132 @@
+import lavenderPalette from "../lavender/palette.light";
+import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens";
+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 = {
+    ...lavenderPalette,
+    // `to` stop retuned so white gradient-button text (onGradient, accentText.ts) clears AA — the
+    // original let white drop to 2.98 there (`from` already passed at 4.83, unchanged).
+    // Nudged one step further (4.520 -> 4.608): the first pass cleared AA by <0.02, too thin a
+    // margin to trust against rounding/rendering variance.
+    gradient: { from: "#6b7280", to: "#5664f6" }, // slate gray → indigo
+    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.
+        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: "#dfdfе2",
+            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),
+        error: lavenderPalette.boxShadow.error,
+        default: lavenderPalette.boxShadow.default,
+    },
+};
+export default palette;

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

@@ -0,0 +1,8 @@
+import { buildDarkPalette } from "../../builders/buildDarkPalette";
+import light from "./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 = buildDarkPalette(light);
+export default palette;

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

@@ -0,0 +1,122 @@
+import lavenderPalette from "../lavender/palette.light";
+import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens";
+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 = {
+    ...lavenderPalette,
+    // 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),
+        error: lavenderPalette.boxShadow.error,
+        default: lavenderPalette.boxShadow.default,
+    },
+};
+export default palette;