pixelize-design-library 2.3.22 → 2.4.1

package/dist/Theme/tokens/brands/emerald/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;
+        };
+    };
+    gray: {
+        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;
+    };
+    border: {
+        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;
+    };
+    table: {
+        hover: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    sidebar: {
+        background: {
+            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;
+    };
+    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;
+        };
+    };
+    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;
+    };
+    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;
+    };
+    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/emerald/palette.light.d.ts.map

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

package/dist/Theme/tokens/brands/emerald/palette.light.js

@@ -0,0 +1,135 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const palette_light_1 = __importDefault(require("../lavender/palette.light"));
+const buildBrandTokens_1 = require("../../builders/buildBrandTokens");
+const PRIMARY_500 = "#0f9d8a"; // teal-emerald core (balanced, not too green/blue)
+const primary = {
+    50: "#e6f7f5",
+    100: "#c2ebe6",
+    200: "#8eddd4",
+    300: "#5acfc2",
+    400: "#2fb7a9",
+    500: PRIMARY_500,
+    600: "#0c8575",
+    700: "#096b5e",
+    800: "#065248",
+    900: "#043b35",
+    opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
+};
+const palette = {
+    ...palette_light_1.default,
+    // Stops retuned so white gradient-button text (onGradient, accentText.ts) clears AA at both
+    // ends — the original pair let white drop to 3.38/2.43 against from/to. Same hue, darker.
+    // Both nudged one step further (4.537/4.515 -> 4.618/4.616): the first pass cleared AA by
+    // <0.02, too thin a margin to trust against rounding/rendering variance.
+    gradient: { from: "#0d8474", to: "#048096" }, // teal → cyan
+    primary,
+    // 🌫️ Neutral gray (slightly cool to match teal)
+    gray: {
+        50: "#f6f8f8",
+        100: "#edf2f2",
+        200: "#dce5e5",
+        300: "#c3d2d2",
+        400: "#9fb3b3",
+        // 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: "#617474",
+        600: "#5e7070",
+        700: "#475555",
+        800: "#2f3a3a",
+        900: "#1f2626",
+    },
+    // 🌊 Background system (very subtle teal tint)
+    backgroundColor: {
+        main: "#f7fbfb",
+        secondary: "#eef7f6",
+        tertiary: "#e5f1ef",
+        quaternary: "#dcebea",
+        light: "#fcfefe",
+        medium: "#e2efee",
+        accent: "#d5e7e5",
+        subtle: "#f4f9f9",
+        muted: "#cfe2e0",
+        neutral: "#e2efee",
+        base: "#fafdfd",
+        tableHeader: "#eef7f6",
+    },
+    background: {
+        50: "#ffffff",
+        100: "#fbfefe",
+        200: "#eef7f6",
+        300: "#e5f1ef",
+        400: "#dcebea",
+        500: "#d2e4e2",
+        600: "#bdd1cf",
+        700: "#96a9a7",
+        800: "#707f7e",
+        900: "#545f5f",
+    },
+    border: {
+        50: "#fafeff",
+        100: "#edf5f4",
+        200: "#ddebea",
+        300: "#cde1df",
+        400: "#bdd6d4",
+        500: "#accbc9",
+        600: "#99b7b5",
+        700: "#788f8e",
+        800: "#5b6e6d",
+        900: "#455454",
+    },
+    boxborder: {
+        50: "#fafeff",
+        100: "#ecf4f3",
+        200: "#d9e7e5",
+        300: "#c6dad8",
+        400: "#b3cdcb",
+        500: "#a0c0be",
+        600: "#8dadab",
+        700: "#6e8786",
+        800: "#546868",
+        900: "#3f5050",
+    },
+    table: {
+        hover: {
+            50: "#fbfefe",
+            100: "#f0f7f7",
+            200: "#e6f1f1",
+            300: "#dceaea",
+            400: "#d2e3e3",
+            500: "#c8dcdc",
+            600: "#b4c7c7",
+            700: "#909f9f",
+            800: "#6c7777",
+            900: "#525b5b",
+        },
+    },
+    // 🌑 Sidebar (deep teal-black)
+    sidebar: {
+        background: {
+            50: "#eaf4f3",
+            100: "#cfe3e1",
+            200: "#3e6f6a",
+            300: "#5a8c86",
+            400: "#2f5a55",
+            500: "#0e1f1e", // charcoal teal (instead of near-black)
+            600: "#0b1918",
+            700: "#081312",
+            800: "#060e0d",
+            900: "#040908",
+        },
+    },
+    boxShadow: {
+        primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
+        error: palette_light_1.default.boxShadow.error,
+        default: palette_light_1.default.boxShadow.default,
+    },
+};
+exports.default = palette;

package/dist/Theme/tokens/brands/index.d.ts

@@ -0,0 +1,28 @@
+import lavender from "./lavender/palette.light";
+import meadow from "./meadow/palette.light";
+import radiant from "./radiant/palette.light";
+import skyline from "./skyline/palette.light";
+import slate from "./slate/palette.light";
+import emerald from "./emerald/palette.light";
+import rosewood from "./rosewood/palette.light";
+import storefront from "./storefront/palette.light";
+import zinc from "./zinc/palette.light";
+import lavenderDark from "./lavender/palette.dark";
+import meadowDark from "./meadow/palette.dark";
+import radiantDark from "./radiant/palette.dark";
+import skylineDark from "./skyline/palette.dark";
+import slateDark from "./slate/palette.dark";
+import emeraldDark from "./emerald/palette.dark";
+import rosewoodDark from "./rosewood/palette.dark";
+import storefrontDark from "./storefront/palette.dark";
+import zincDark from "./zinc/palette.dark";
+import type { PaletteProps, ResolvedColorMode, ThemeName } from "../types";
+export { lavender, meadow, radiant, skyline, slate, emerald, rosewood, storefront, zinc };
+export { lavenderDark, meadowDark, radiantDark, skylineDark, slateDark, emeraldDark, rosewoodDark, storefrontDark, zincDark, };
+/** Light palette per brand. `lavender` is the base the other six extend. */
+export declare const lightPalettes: Record<ThemeName, PaletteProps>;
+/** Dark palette per brand, derived from the matching light palette. */
+export declare const darkPalettes: Record<ThemeName, PaletteProps>;
+export declare const palettes: Record<ThemeName, Record<ResolvedColorMode, PaletteProps>>;
+export declare const themeNames: ThemeName[];
+//# sourceMappingURL=index.d.ts.map

package/dist/Theme/tokens/brands/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/brands/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAC1C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,UAAU,MAAM,4BAA4B,CAAC;AACpD,OAAO,IAAI,MAAM,sBAAsB,CAAC;AAExC,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,UAAU,MAAM,uBAAuB,CAAC;AAC/C,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,cAAc,MAAM,2BAA2B,CAAC;AACvD,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAE3C,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAe3E,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;AAC1F,OAAO,EACL,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,WAAW,EACX,YAAY,EACZ,cAAc,EACd,QAAQ,GACT,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CAUzD,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CAUxD,CAAC;AAIF,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAU/E,CAAC;AAEF,eAAO,MAAM,UAAU,EAAiC,SAAS,EAAE,CAAC"}

package/dist/Theme/tokens/brands/index.js

@@ -0,0 +1,93 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = exports.zincDark = exports.storefrontDark = exports.rosewoodDark = exports.emeraldDark = exports.slateDark = exports.skylineDark = exports.radiantDark = exports.meadowDark = exports.lavenderDark = exports.zinc = exports.storefront = exports.rosewood = exports.emerald = exports.slate = exports.skyline = exports.radiant = exports.meadow = exports.lavender = void 0;
+const palette_light_1 = __importDefault(require("./lavender/palette.light"));
+exports.lavender = palette_light_1.default;
+const palette_light_2 = __importDefault(require("./meadow/palette.light"));
+exports.meadow = palette_light_2.default;
+const palette_light_3 = __importDefault(require("./radiant/palette.light"));
+exports.radiant = palette_light_3.default;
+const palette_light_4 = __importDefault(require("./skyline/palette.light"));
+exports.skyline = palette_light_4.default;
+const palette_light_5 = __importDefault(require("./slate/palette.light"));
+exports.slate = palette_light_5.default;
+const palette_light_6 = __importDefault(require("./emerald/palette.light"));
+exports.emerald = palette_light_6.default;
+const palette_light_7 = __importDefault(require("./rosewood/palette.light"));
+exports.rosewood = palette_light_7.default;
+const palette_light_8 = __importDefault(require("./storefront/palette.light"));
+exports.storefront = palette_light_8.default;
+const palette_light_9 = __importDefault(require("./zinc/palette.light"));
+exports.zinc = palette_light_9.default;
+const palette_dark_1 = __importDefault(require("./lavender/palette.dark"));
+exports.lavenderDark = palette_dark_1.default;
+const palette_dark_2 = __importDefault(require("./meadow/palette.dark"));
+exports.meadowDark = palette_dark_2.default;
+const palette_dark_3 = __importDefault(require("./radiant/palette.dark"));
+exports.radiantDark = palette_dark_3.default;
+const palette_dark_4 = __importDefault(require("./skyline/palette.dark"));
+exports.skylineDark = palette_dark_4.default;
+const palette_dark_5 = __importDefault(require("./slate/palette.dark"));
+exports.slateDark = palette_dark_5.default;
+const palette_dark_6 = __importDefault(require("./emerald/palette.dark"));
+exports.emeraldDark = palette_dark_6.default;
+const palette_dark_7 = __importDefault(require("./rosewood/palette.dark"));
+exports.rosewoodDark = palette_dark_7.default;
+const palette_dark_8 = __importDefault(require("./storefront/palette.dark"));
+exports.storefrontDark = palette_dark_8.default;
+const palette_dark_9 = __importDefault(require("./zinc/palette.dark"));
+exports.zincDark = palette_dark_9.default;
+const accentText_1 = require("../builders/accentText");
+/**
+ * Derived here rather than hand-written into each brand's literal: it must track that brand's
+ * own primary scale and canvas, and a stale hand-copied hex would silently fail AA.
+ * Dark palettes get theirs inside `buildDarkPalette`.
+ */
+const withAccentText = (palette) => {
+    var _a;
+    return ({
+        ...palette,
+        accentText: (_a = palette.accentText) !== null && _a !== void 0 ? _a : (0, accentText_1.pickAccentText)(palette.primary, palette.backgroundColor.main, "light"),
+    });
+};
+/** Light palette per brand. `lavender` is the base the other six extend. */
+exports.lightPalettes = {
+    lavender: withAccentText(palette_light_1.default),
+    meadow: withAccentText(palette_light_2.default),
+    radiant: withAccentText(palette_light_3.default),
+    skyline: withAccentText(palette_light_4.default),
+    slate: withAccentText(palette_light_5.default),
+    emerald: withAccentText(palette_light_6.default),
+    rosewood: withAccentText(palette_light_7.default),
+    storefront: withAccentText(palette_light_8.default),
+    zinc: withAccentText(palette_light_9.default),
+};
+/** Dark palette per brand, derived from the matching light palette. */
+exports.darkPalettes = {
+    lavender: palette_dark_1.default,
+    meadow: palette_dark_2.default,
+    radiant: palette_dark_3.default,
+    skyline: palette_dark_4.default,
+    slate: palette_dark_5.default,
+    emerald: palette_dark_6.default,
+    rosewood: palette_dark_7.default,
+    storefront: palette_dark_8.default,
+    zinc: palette_dark_9.default,
+};
+// Built from lightPalettes/darkPalettes (not the raw literals) so accentText can never be
+// present on one map and missing on the other.
+exports.palettes = {
+    lavender: { light: exports.lightPalettes.lavender, dark: exports.darkPalettes.lavender },
+    meadow: { light: exports.lightPalettes.meadow, dark: exports.darkPalettes.meadow },
+    radiant: { light: exports.lightPalettes.radiant, dark: exports.darkPalettes.radiant },
+    skyline: { light: exports.lightPalettes.skyline, dark: exports.darkPalettes.skyline },
+    slate: { light: exports.lightPalettes.slate, dark: exports.darkPalettes.slate },
+    emerald: { light: exports.lightPalettes.emerald, dark: exports.darkPalettes.emerald },
+    rosewood: { light: exports.lightPalettes.rosewood, dark: exports.darkPalettes.rosewood },
+    storefront: { light: exports.lightPalettes.storefront, dark: exports.darkPalettes.storefront },
+    zinc: { light: exports.lightPalettes.zinc, dark: exports.darkPalettes.zinc },
+};
+exports.themeNames = Object.keys(exports.lightPalettes);

package/dist/Theme/tokens/brands/lavender/palette.dark.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Dark palette for the lavender 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.
+ */
+declare const palette: import("../..").PaletteProps;
+export default palette;
+//# sourceMappingURL=palette.dark.d.ts.map

package/dist/Theme/tokens/brands/lavender/palette.dark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.dark.d.ts","sourceRoot":"","sources":["../../../../../src/Theme/tokens/brands/lavender/palette.dark.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,QAAA,MAAM,OAAO,8BAA0B,CAAC;AAExC,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,13 @@
+"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 palette_light_1 = __importDefault(require("./palette.light"));
+/**
+ * Dark palette for the lavender 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 = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+exports.default = palette;