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

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

@@ -0,0 +1,201 @@
+import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens.js";
+import { rotateScaleHue } from "../../builders/brandInk.js";
+import { neutralTokens, sharedBoxShadow } from "../neutrals.js";
+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 = { ...rotateScaleHue(secondary), opacity: secondary.opacity };
+const gray = {
+    50: "#f9f7fb",
+    100: "#f0eaf6",
+    200: "#e4d9f0",
+    300: "#cdbde3",
+    400: "#a897cc",
+    // 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",
+    800: "#342d45",
+    900: "#221e2e",
+};
+// These global color scales stay unchanged — they are
+// utility palettes, not theme-specific
+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),
+    ...sharedBoxShadow,
+};
+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",
+};
+// NOTE: 200 lifted to L88 (was L94, invisible against an L98 canvas) — matches Chakra's gray.200 hairline.
+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",
+};
+// Single-hue gradient: white clears AA by margin, not by hundredths. See gradientTone.test.ts.
+const gradient = { from: "#8b3fc8", to: "#762d9d" };
+const palette = {
+    gradient,
+    primary,
+    secondary,
+    tertiary,
+    ...neutralTokens,
+    gray,
+    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,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/meadow/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 = "#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 = {
+    ...neutralTokens,
+    ...buildBrandInk(PRIMARY_500),
+    // 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,
+    gray: {
+        50: "#f6f9f7",
+        100: "#ecf1ee",
+        200: "#dce5e0",
+        300: "#c4d2cb",
+        400: "#93a99f",
+        // 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",
+        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),
+        ...sharedBoxShadow,
+    },
+};
+export default palette;

package/dist/esm/Theme/tokens/brands/neutrals.js

@@ -0,0 +1,116 @@
+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 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",
+};
+/** Non-brand shadow tints. Only `primary` is brand-derived. */
+export const sharedBoxShadow = {
+    error: "#F2463A47",
+    default: "#00000033",
+};
+/** Utility scales shared by every brand — never theme-specific. */
+export const neutralTokens = {
+    transparent: "transparent",
+    black: "#000",
+    white: "#fff",
+    semantic,
+    red,
+    orange,
+    yellow,
+    green,
+    teal,
+    blue,
+    cyan,
+    purple,
+    pink,
+};

package/dist/esm/Theme/tokens/brands/radiant/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/radiant/palette.light.js

@@ -0,0 +1,138 @@
+import { neutralTokens, sharedBoxShadow } from "../neutrals.js";
+import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens.js";
+import { buildBrandInk } from "../../builders/brandInk.js";
+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 danger = {
+    50: "#fcedf3",
+    100: "#f5c5db",
+    200: "#f1a9ca",
+    300: "#ec82b4",
+    400: "#ea69a7",
+    500: "#e74494",
+    600: "#d23e87",
+    700: "#a43069",
+    800: "#7f2651",
+    900: "#611c3e",
+};
+const palette = {
+    ...neutralTokens,
+    red: danger,
+    semantic: { ...neutralTokens.semantic, error: danger },
+    ...buildBrandInk(PRIMARY_500),
+    // 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)
+    gray: {
+        50: "#f8f6f5",
+        100: "#efeae7",
+        200: "#e2dad5",
+        300: "#cec2bb",
+        400: "#b3a39a",
+        // 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",
+        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),
+        ...sharedBoxShadow,
+        error: `${danger[500]}47`,
+    },
+};
+export default palette;

package/dist/esm/Theme/tokens/brands/rosewood/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;