pixelize-design-library 2.3.22 → 2.4.1-beta.2

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;

package/dist/Theme/tokens/brands/lavender/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;
+        };
+    };
+    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;
+        };
+    };
+    gray: {
+        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;
+    };
+    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;
+    };
+    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;
+    };
+    boxShadow: {
+        primary: string;
+        error: string;
+        default: string;
+    };
+    sidebar: {
+        background: {
+            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;
+    };
+    border: {
+        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;
+        };
+    };
+    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/lavender/palette.light.d.ts.map

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