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

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

@@ -0,0 +1,321 @@
+import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens";
+const PRIMARY_500 = "#8B3FC8";
+const SECONDARY_ANCHOR = "#1e0f30";
+const primary = {
+    50: "#f7edfc",
+    100: "#eacff7",
+    200: "#d4a0ef",
+    300: "#bc70e6",
+    400: "#a552db",
+    500: PRIMARY_500,
+    600: "#7632b0",
+    700: "#5e2789",
+    800: "#481d69",
+    900: "#33154c",
+    opacity: buildPrimaryOpacity(PRIMARY_500),
+};
+const secondary = {
+    50: "#ede8f5",
+    100: "#d4c8e8",
+    200: "#b3a0d4",
+    300: "#8a6aaa",
+    400: "#6b4d8a",
+    500: SECONDARY_ANCHOR,
+    600: "#180b26",
+    700: "#12081c",
+    800: "#0d0514",
+    900: "#08030b",
+    opacity: buildPrimaryOpacity(SECONDARY_ANCHOR),
+};
+const tertiary = { ...secondary };
+const semantic = {
+    success: {
+        50: "#e9f8ef",
+        100: "#bbe9cc",
+        200: "#9adeb4",
+        300: "#6ccf92",
+        400: "#4fc67d",
+        500: "#23b85c",
+        600: "#20a754",
+        700: "#198341",
+        800: "#136533",
+        900: "#0f4d27",
+    },
+    error: {
+        50: "#feedeb",
+        100: "#fbc6c2",
+        200: "#f9aaa4",
+        300: "#f6837b",
+        400: "#f56b61",
+        500: "#f2463a",
+        600: "#dc4035",
+        700: "#ac3229",
+        800: "#852720",
+        900: "#661d18",
+    },
+    warning: {
+        50: "#fff4ef",
+        100: "#ffddce",
+        200: "#ffccb7",
+        300: "#ffb596",
+        400: "#ffa781",
+        500: "#ff9162",
+        600: "#e88459",
+        700: "#b56746",
+        800: "#8c5036",
+        900: "#6b3d29",
+    },
+    info: {
+        50: "#eff9fc",
+        100: "#cdedf5",
+        200: "#b5e4f0",
+        300: "#94d7e9",
+        400: "#7fd0e5",
+        500: "#5fc4de",
+        600: "#56b2ea",
+        700: "#438b9e",
+        800: "#346c78",
+        900: "#28525d",
+    },
+};
+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.
+    500: "#746499",
+    600: "#5e527a",
+    700: "#4a4060",
+    800: "#342d45",
+    900: "#221e2e",
+};
+// These global color scales stay unchanged — they are
+// utility palettes, not theme-specific
+const red = {
+    50: "#feedeb", 100: "#fbc6c2", 200: "#f9aaa4", 300: "#f6837b",
+    400: "#f56b61", 500: "#f2463a", 600: "#dc4035", 700: "#ac3229",
+    800: "#852720", 900: "#661d18",
+};
+const orange = {
+    50: "#fff4ef", 100: "#ffddce", 200: "#ffccb7", 300: "#ffb596",
+    400: "#ffa781", 500: "#ff9162", 600: "#e88459", 700: "#b56746",
+    800: "#8c5036", 900: "#6b3d29",
+};
+const yellow = {
+    50: "#fefbec", 100: "#fdf1c5", 200: "#fbeba9", 300: "#fae281",
+    400: "#f9dc69", 500: "#f7d343", 600: "#e1c03d", 700: "#af9630",
+    800: "#887425", 900: "#68591c",
+};
+const green = {
+    50: "#e9f8ef", 100: "#bbe9cc", 200: "#9adeb4", 300: "#6ccf92",
+    400: "#4fc67d", 500: "#23b85c", 600: "#20a754", 700: "#198341",
+    800: "#136533", 900: "#0f4d27",
+};
+const teal = {
+    50: "#eff9fc", 100: "#cdedf5", 200: "#b5e4f0", 300: "#94d7e9",
+    400: "#7fd0e5", 500: "#5fc4de", 600: "#56b2ea", 700: "#438b9e",
+    800: "#346c78", 900: "#28525d",
+};
+const blue = {
+    50: "#ebf8ff", 100: "#bee3f8", 200: "#90cdf4", 300: "#63b3ed",
+    400: "#4299e1", 500: "#3182ce", 600: "#2b6cb0", 700: "#2c5282",
+    800: "#2a4365", 900: "#1a365d",
+};
+const cyan = {
+    50: "#edfdfd", 100: "#c4f1f9", 200: "#9decf9", 300: "#76e4f7",
+    400: "#0bc5ea", 500: "#00b5d8", 600: "#00a3c4", 700: "#0987a0",
+    800: "#086f83", 900: "#065666",
+};
+const purple = {
+    50: "#faf5ff", 100: "#e9d8fd", 200: "#d6bcfa", 300: "#b794f4",
+    400: "#9f7aea", 500: "#805ad5", 600: "#6b46c1", 700: "#553c9a",
+    800: "#44337a", 900: "#322659",
+};
+const pink = {
+    50: "#fff5f7", 100: "#fed7e2", 200: "#fbb6ce", 300: "#f687b3",
+    400: "#ed64a6", 500: "#d53f8c", 600: "#b83280", 700: "#97266d",
+    800: "#702459", 900: "#521b41",
+};
+const backgroundColor = {
+    main: "#f9f7fc",
+    secondary: "#f2edf8",
+    tertiary: "#ebe3f4",
+    quaternary: "#e2d8ef",
+    // A card must read as lifted off the tinted canvas; the old #fdfcfe was 2% away from it.
+    light: "#ffffff",
+    medium: "#e8e0f2",
+    accent: "#e0d5ed",
+    subtle: "#f5f1fa",
+    muted: "#d8cde8",
+    neutral: "#e8e2f2",
+    base: "#fbfafd",
+    tableHeader: "#f2edf8",
+};
+const background = {
+    50: "#ffffff",
+    100: "#fdfcfe",
+    200: "#f8f5fc",
+    300: "#f2edf8",
+    400: "#ede6f4",
+    500: "#e7def0",
+    600: "#d2c8de",
+    700: "#a59ab0",
+    800: "#7c7386",
+    900: "#5e5867",
+};
+const text = {
+    50: "#f0eef5",
+    100: "#d4cee6",
+    200: "#bcb4d9",
+    300: "#9890c4",
+    400: "#8278b5",
+    500: "#5f5490",
+    600: "#564c83",
+    700: "#433b66",
+    800: "#332d4f",
+    900: "#26213c",
+};
+const header = {
+    50: "#edeaf4",
+    100: "#cdc8e2",
+    200: "#b4aed4",
+    300: "#9488be",
+    400: "#7e70b2",
+    500: "#5e5196",
+    600: "#564a89",
+    700: "#433a6b",
+    800: "#332d52",
+    900: "#26223f",
+};
+const placeholder = {
+    50: "#f2f0f7",
+    100: "#d8d3ea",
+    200: "#c4bde0",
+    300: "#a89ed0",
+    400: "#9690c5",
+    500: "#7a72b0",
+    600: "#6f68a0",
+    700: "#56507d",
+    800: "#423e60",
+    900: "#322f4a",
+};
+const boxShadow = {
+    primary: buildPrimaryShadowTint(PRIMARY_500),
+    error: "#F2463A47",
+    default: "#00000033",
+};
+const sidebar = {
+    background: {
+        50: "#e9eaf0",
+        100: "#d4d6e0",
+        200: "#212747",
+        300: "#7d84a2",
+        400: "#525b83",
+        500: "#161B32",
+        600: "#12162a",
+        700: "#0e1221",
+        800: "#0a0d19",
+        900: "#060911",
+    },
+};
+const boxborder = {
+    50: "#f5f3f9",
+    100: "#ece8f3",
+    200: "#dad4e8",
+    300: "#d1c9e2",
+    400: "#c7bcda",
+    500: "#bcb0d1",
+    600: "#a79ac3",
+    700: "#918ba1",
+    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.
+ */
+const border = {
+    50: "#f6f4f9",
+    100: "#ede9f4",
+    200: "#dcd5e9",
+    300: "#d3cbe3",
+    400: "#c9bedb",
+    500: "#beb2d2",
+    600: "#a99cc4",
+    700: "#938da3",
+    800: "#6f6a7c",
+    900: "#54505e",
+};
+const table = {
+    hover: {
+        50: "#fefefe",
+        100: "#faf8fd",
+        200: "#f5f1fb",
+        300: "#f0ebf8",
+        400: "#ebe5f5",
+        500: "#e5dff2",
+        600: "#d0cadf",
+        700: "#a49faf",
+        800: "#7c7886",
+        900: "#5d5a65",
+    },
+};
+const disabled = {
+    50: "#f5f3f9",
+    100: "#eae6f4",
+    200: "#dfd9ef",
+    300: "#d0c8e8",
+    400: "#c5bce2",
+    500: "#b5aadb",
+    600: "#a59bc7",
+    700: "#807898",
+    800: "#625d75",
+    900: "#4b4759",
+};
+// Two-tone brand gradient (violet → pink). Each theme overrides with its own pair.
+// `to` stop retuned so white gradient-button text (onGradient, accentText.ts) clears AA — the
+// original let white drop to 3.53 there (`from` already passed at 5.76, unchanged).
+// Nudged one step further (4.511 -> 4.609): the first pass cleared AA by <0.02, too thin a
+// margin to trust against rounding/rendering variance.
+const gradient = { from: "#8B3FC8", to: "#df187a" };
+const palette = {
+    gradient,
+    primary,
+    secondary,
+    tertiary,
+    transparent: "transparent",
+    black: "#000",
+    white: "#fff",
+    semantic,
+    gray,
+    red,
+    orange,
+    yellow,
+    green,
+    teal,
+    blue,
+    cyan,
+    purple,
+    pink,
+    backgroundColor,
+    background,
+    text,
+    header,
+    placeholder,
+    boxShadow,
+    sidebar,
+    boxborder,
+    border,
+    table,
+    disabled,
+};
+export default palette;

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

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

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

@@ -0,0 +1,128 @@
+import lavenderPalette from "../lavender/palette.light";
+import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens";
+const PRIMARY_500 = "#2d6a4f"; // was #2caa3d — deeper, forest-toned
+const primary = {
+    50: "#edf7f2",
+    100: "#d0edde",
+    200: "#a3d9bc",
+    300: "#6dbf96",
+    400: "#3fa872",
+    500: PRIMARY_500, // #2d6a4f
+    600: "#245840",
+    700: "#1b4531",
+    800: "#123223",
+    900: "#0a2016",
+    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.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.
+    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.
+        500: "#5c7369",
+        600: "#445f52",
+        700: "#344a3f",
+        800: "#24342b",
+        900: "#16221c",
+    },
+    backgroundColor: {
+        main: "#f4f8f6",
+        secondary: "#ecf3ef",
+        tertiary: "#e4ede7",
+        quaternary: "#dae7e1",
+        light: "#f8fbf9",
+        medium: "#e3eae6",
+        accent: "#d8e4de",
+        subtle: "#f1f6f3",
+        muted: "#d2ddd7",
+        neutral: "#e5ece8",
+        base: "#f9fcfa",
+        tableHeader: "#ecf3ef",
+    },
+    background: {
+        50: "#ffffff",
+        100: "#f8fbf9",
+        200: "#f2f7f4",
+        300: "#ecf3ef",
+        400: "#e5ede8",
+        500: "#dfe8e2",
+        600: "#c9d5ce",
+        700: "#9eada6",
+        800: "#768178",
+        900: "#586259",
+    },
+    border: {
+        50: "#fbfcfb",
+        100: "#f3f6f4",
+        200: "#ecefec",
+        300: "#e5eae5",
+        400: "#dfe5df",
+        500: "#d7ded8",
+        600: "#c3cbc4",
+        700: "#99a39b",
+        800: "#757c76",
+        900: "#5a5f5b",
+    },
+    boxborder: {
+        50: "#fbfcfb",
+        100: "#f2f5f3",
+        200: "#ebeef0",
+        300: "#e4e8e5",
+        400: "#dee3df",
+        500: "#d6dcd7",
+        600: "#c3c9c4",
+        700: "#989d99",
+        800: "#767a76",
+        900: "#5a5d5b",
+    },
+    table: {
+        hover: {
+            50: "#fefffe",
+            100: "#f8fbf9",
+            200: "#f2f7f3",
+            300: "#edf3ef",
+            400: "#e7efe9",
+            500: "#e1eae3",
+            600: "#cdd8cf",
+            700: "#a3aea4",
+            800: "#7d857f",
+            900: "#5f6561",
+        },
+    },
+    sidebar: {
+        background: {
+            50: "#e8f0eb",
+            100: "#d0e0d6",
+            200: "#244030", // slightly lighter surface
+            300: "#5f7d6c",
+            400: "#3a5a47",
+            500: "#0f2318", // main sidebar bg — very deep forest
+            600: "#0c1c13",
+            700: "#09150e",
+            800: "#060e09",
+            900: "#030705",
+        },
+    },
+    boxShadow: {
+        primary: buildPrimaryShadowTint(PRIMARY_500),
+        error: lavenderPalette.boxShadow.error,
+        default: lavenderPalette.boxShadow.default,
+    },
+};
+export default palette;

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

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

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

@@ -0,0 +1,130 @@
+import lavenderPalette from "../lavender/palette.light";
+import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens";
+const PRIMARY_500 = "#cf4e3a"; // warm red (terracotta leaning)
+const primary = {
+    50: "#fdf1ee",
+    100: "#f8d3cc",
+    200: "#f1a69a",
+    300: "#e97969",
+    400: "#dc5d4d",
+    500: PRIMARY_500,
+    600: "#b84533",
+    700: "#983628",
+    800: "#75281e",
+    900: "#531a14",
+    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 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.
+    gradient: { from: "#cd4733", to: "#a36807" }, // terracotta red → amber
+    primary,
+    // 🌫️ Neutral gray (slightly warm, not pink)
+    gray: {
+        50: "#f8f6f5",
+        100: "#efeae7",
+        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.
+        500: "#796861",
+        600: "#6e6058",
+        700: "#534841",
+        800: "#39312c",
+        900: "#27211d",
+    },
+    // 🧴 Warm background system (subtle red undertone)
+    backgroundColor: {
+        main: "#fdf8f6",
+        secondary: "#f6ebe7",
+        tertiary: "#efdfd9",
+        quaternary: "#e8d3cc",
+        light: "#fffafa",
+        medium: "#ecdcd6",
+        accent: "#e2cbc3",
+        subtle: "#fbf4f1",
+        muted: "#d9c2ba",
+        neutral: "#ecdcd6",
+        base: "#fefbfa",
+        tableHeader: "#f6ebe7",
+    },
+    background: {
+        50: "#ffffff",
+        100: "#fdf9f7",
+        200: "#f6ebe7",
+        300: "#efdfd9",
+        400: "#e8d3cc",
+        500: "#e0c7bf",
+        600: "#cab2aa",
+        700: "#a38f88",
+        800: "#7c6c66",
+        900: "#5e514c",
+    },
+    border: {
+        50: "#fffafa",
+        100: "#f6ede9",
+        200: "#eddeda",
+        300: "#e4cfc9",
+        400: "#dbc0b9",
+        500: "#d1b1a9",
+        600: "#bda098",
+        700: "#94817b",
+        800: "#70635e",
+        900: "#564b47",
+    },
+    boxborder: {
+        50: "#fffafa",
+        100: "#f5ece8",
+        200: "#ebdbd6",
+        300: "#e1cbc5",
+        400: "#d7bbb4",
+        500: "#cdaaa3",
+        600: "#b99993",
+        700: "#907a75",
+        800: "#6d5e5a",
+        900: "#534844",
+    },
+    table: {
+        hover: {
+            50: "#fffefe",
+            100: "#faf2ef",
+            200: "#f4e6e1",
+            300: "#eedad4",
+            400: "#e7cdc6",
+            500: "#e1c1b9",
+            600: "#caaea6",
+            700: "#a28d87",
+            800: "#7b6e69",
+            900: "#5d5450",
+        },
+    },
+    // 🌑 Sidebar (deep warm red-brown)
+    sidebar: {
+        background: {
+            50: "#f3e9e6",
+            100: "#e0c9c2",
+            200: "#7a5147",
+            300: "#9a6a5f",
+            400: "#5e3c34",
+            500: "#170c09", // deep warm red-black
+            600: "#120906",
+            700: "#0d0604",
+            800: "#090403",
+            900: "#050201",
+        },
+    },
+    boxShadow: {
+        primary: buildPrimaryShadowTint(PRIMARY_500),
+        error: lavenderPalette.boxShadow.error,
+        default: lavenderPalette.boxShadow.default,
+    },
+};
+export default palette;

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

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