reshaped 3.6.0-canary.4 → 3.6.0-canary.6

package/dist/cjs/themes/_generator/utilities/generateBackgroundColors.js

@@ -1,59 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const color_1 = require("./color");
-const constants_1 = require("../constants");
-const string_1 = require("../../../utilities/string");
-const generateBackgroundColors = (definition, themeOptions) => {
-    if (!definition.color)
-        return;
-    Object.keys(definition.color).forEach((tokenName) => {
-        const bgToken = definition.color?.[tokenName];
-        const generatedForegroundName = `on${(0, string_1.capitalize)(tokenName)}`;
-        const generatedRGBName = `rgb${(0, string_1.capitalize)(tokenName)}`;
-        const generateOnColorsFor = [
-            ...constants_1.bgWithDynamicForeground,
-            ...(themeOptions?.generateOnColorsFor || []),
-        ];
-        const needsDynamicForeground = generateOnColorsFor.includes(tokenName) && !definition.color?.[generatedForegroundName];
-        const needsRGB = tokenName.startsWith("background") ||
-            tokenName.endsWith("black") ||
-            tokenName.endsWith("white");
-        if (!bgToken)
-            return;
-        if (needsDynamicForeground) {
-            const overrideKeys = themeOptions?.onColorValues && Object.keys(themeOptions?.onColorValues);
-            const onColorKey = overrideKeys && overrideKeys.find((key) => tokenName.toLowerCase().includes(key));
-            const onColorHexMap = {
-                lightHexColor: (onColorKey && themeOptions?.onColorValues?.[onColorKey]?.hexLight) ||
-                    definition?.color?.white?.hex,
-                darkHexColor: (onColorKey && themeOptions?.onColorValues?.[onColorKey]?.hexDark) ||
-                    definition?.color?.black?.hex,
-            };
-            const hex = (0, color_1.getOnColor)({
-                bgHexColor: bgToken.hex,
-                mode: "light",
-                algorithm: themeOptions?.colorContrastAlgorithm,
-                ...onColorHexMap,
-            });
-            const hexDark = (0, color_1.getOnColor)({
-                bgHexColor: bgToken.hexDark || bgToken.hex,
-                mode: "dark",
-                algorithm: themeOptions?.colorContrastAlgorithm,
-                ...onColorHexMap,
-            });
-            definition.color[generatedForegroundName] = {
-                hex,
-                hexDark: hex !== hexDark ? hexDark : undefined,
-            };
-        }
-        if (needsRGB) {
-            const rgb = (0, color_1.hexToRgb)(bgToken.hex);
-            const rgbDark = bgToken.hexDark && (0, color_1.hexToRgb)(bgToken.hexDark);
-            definition.color[generatedRGBName] = {
-                hex: `${rgb.r}, ${rgb.g}, ${rgb.b}`,
-                hexDark: rgbDark && `${rgbDark.r}, ${rgbDark.g}, ${rgbDark.b}`,
-            };
-        }
-    });
-};
-exports.default = generateBackgroundColors;

package/dist/cjs/themes/_generator/utilities/generateColors.d.ts

@@ -1,11 +0,0 @@
-import type { ThemeDefinition } from "../tokens/types";
-import type { Color } from "../types";
-declare const generate: (args?: {
-    primary?: Color;
-    critical?: Color;
-    warning?: Color;
-    positive?: Color;
-    neutral?: Color;
-    brand?: Color;
-}) => ThemeDefinition["color"];
-export default generate;

package/dist/cjs/themes/_generator/utilities/generateColors.js

@@ -1,178 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const fn_1 = require("culori/require");
-const hexToOkHsl = (hex) => {
-    const rgb = (0, fn_1.parseHex)(hex);
-    if (!rgb)
-        throw new Error(`[Reshaped] Can't generate rgb from ${hex} color`);
-    const lrgb = (0, fn_1.convertRgbToLrgb)(rgb);
-    const oklab = (0, fn_1.convertLrgbToOklab)(lrgb);
-    const okhsl = (0, fn_1.convertOklabToOkhsl)(oklab);
-    return okhsl;
-};
-const okhslToHex = (okhsl) => {
-    const oklab = (0, fn_1.convertOkhslToOklab)(okhsl);
-    const lrgb = (0, fn_1.convertOklabToLrgb)(oklab);
-    const rgb = (0, fn_1.convertLrgbToRgb)(lrgb);
-    return !okhsl.alpha || okhsl.alpha === 1 ? (0, fn_1.serializeHex)(rgb) : (0, fn_1.serializeHex8)(rgb);
-};
-const getDarkModeColor = (hsl) => {
-    const { l } = hsl;
-    const mid = 0.5;
-    const lDelta = 1 - (l - mid) / (1 - mid);
-    return { ...hsl, l: l < mid ? l : 1 - l * lDelta };
-};
-const generateColorValues = (args) => {
-    const { key, hex, hexDark } = args;
-    const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
-    const okhsl = hexToOkHsl(hex);
-    /**
-     * Calculate hue perceptual lighness (yellow, cyan, )
-     */
-    const hueStep = 120;
-    const normalizedHue = ((okhsl.h + 150) % 360) / 360;
-    const hueLightness = Math.cos((2 * Math.PI) / hueStep) * normalizedHue;
-    const okhslDark = key === "neutral"
-        ? { ...okhsl, l: 1 - okhsl.l + 0.16, s: 0.1 }
-        : (hexDark && hexToOkHsl(hexDark)) || getDarkModeColor(okhsl);
-    /**
-     * Background
-     */
-    const bgHex = hex;
-    const bgHexDark = okhslToHex(okhslDark);
-    const bgFadedHsl = key === "neutral" ? { ...okhsl, l: 0.96 } : { ...okhsl, l: 0.94 + 0.045 * hueLightness };
-    const bgFadedHslDark = key === "neutral" ? { ...okhslDark, l: 0.15 } : { ...okhslDark, l: 0.16, s: okhslDark.s / 2 };
-    const bgFadedHex = okhslToHex(bgFadedHsl);
-    const bgFadedHexDark = okhslToHex(bgFadedHslDark);
-    /**
-     * Foreground
-     */
-    const fgOkhsl = key === "neutral" ? { ...okhsl, l: 0.2 } : { ...okhsl, l: 0.45 };
-    // Lighter colors need smaller lightness increase for fg colors
-    const fgDarkLDelta = 0.16 / (1 + Math.max(0, okhslDark.l - 0.5));
-    const fgOkhslDark = key === "neutral"
-        ? { ...okhsl, l: 0.96 }
-        : { ...okhslDark, l: okhslDark.l + fgDarkLDelta, s: 0.7 };
-    const fgHex = okhslToHex(fgOkhsl);
-    const fgHexDark = okhslToHex(fgOkhslDark);
-    /**
-     * Border
-     */
-    const bdHex = key === "neutral" ? okhslToHex({ ...fgOkhsl, l: 0, alpha: 0.12 }) : fgHex;
-    const bdHexDark = key === "neutral" ? okhslToHex({ ...fgOkhslDark, l: 1, alpha: 0.14 }) : fgHexDark;
-    const bdFadedHex = key === "neutral"
-        ? okhslToHex({
-            ...bgFadedHsl,
-            l: 0,
-            alpha: 0.08,
-        })
-        : okhslToHex({
-            ...bgFadedHsl,
-            s: 0.6 - 0.2 * hueLightness,
-            l: bgFadedHsl.l - 0.07,
-        });
-    const bdFadedHexDark = key === "neutral"
-        ? okhslToHex({
-            ...bgFadedHslDark,
-            l: 1,
-            alpha: 0.08,
-        })
-        : okhslToHex({
-            ...bgFadedHslDark,
-            l: bgFadedHslDark.l + 0.1,
-        });
-    const output = {
-        [`background${capitalizedKey}`]: {
-            hex: bgHex,
-            hexDark: bgHexDark,
-        },
-        [`background${capitalizedKey}Faded`]: {
-            hex: bgFadedHex,
-            hexDark: bgFadedHexDark,
-        },
-        [`border${capitalizedKey}`]: {
-            hex: bdHex,
-            hexDark: bdHexDark,
-        },
-        [`border${capitalizedKey}Faded`]: {
-            hex: bdFadedHex,
-            hexDark: bdFadedHexDark,
-        },
-        [`foreground${capitalizedKey}`]: {
-            hex: fgHex,
-            hexDark: fgHexDark,
-        },
-    };
-    if (key === "neutral") {
-        output[`foreground${capitalizedKey}Faded`] = {
-            hex: okhslToHex({ ...fgOkhsl, l: fgOkhsl.l + 0.25 }),
-            hexDark: okhslToHex({ ...fgOkhslDark, l: fgOkhslDark.l - 0.15 }),
-        };
-        output[`backgroundDisabled`] = {
-            hex: okhslToHex({ ...okhsl, s: 0.04, l: 0.94 }),
-            hexDark: okhslToHex({ ...okhslDark, s: 0.04, l: 0.16 }),
-        };
-        output[`backgroundDisabledFaded`] = {
-            hex: okhslToHex({ ...okhsl, l: 0.97, s: 0.04 }),
-            hexDark: okhslToHex({ ...okhslDark, l: 0.12, s: 0.04 }),
-        };
-        output[`borderDisabled`] = {
-            hex: okhslToHex({ ...okhsl, l: 0.9, s: 0.04 }),
-            hexDark: okhslToHex({ ...okhslDark, l: 0.17, s: 0.04 }),
-        };
-        output[`foregroundDisabled`] = {
-            hex: okhslToHex({ ...okhsl, l: 0.82, s: 0.04 }),
-            hexDark: okhslToHex({ ...okhslDark, l: 0.32, s: 0.04 }),
-        };
-        output[`backgroundElevationBase`] = {
-            hex: "#ffffff",
-            hexDark: okhslToHex({ ...okhslDark, s: 0.03, l: 0.1 }),
-        };
-        output[`backgroundElevationRaised`] = {
-            hex: "#ffffff",
-            hexDark: okhslToHex({ ...okhslDark, s: 0.04, l: 0.11 }),
-        };
-        output[`backgroundElevationOverlay`] = {
-            hex: "#ffffff",
-            hexDark: okhslToHex({ ...okhslDark, s: 0.04, l: 0.13 }),
-        };
-        output[`backgroundPage`] = {
-            hex: "#ffffff",
-            hexDark: okhslToHex({ ...okhslDark, l: 0.07, s: 0.02 }),
-        };
-        output[`backgroundPageFaded`] = {
-            hex: okhslToHex({ ...okhsl, l: 0.985 }),
-            hexDark: okhslToHex({ ...okhslDark, l: 0.09, s: 0.02 }),
-        };
-    }
-    return output;
-};
-const validateHexColor = (color) => {
-    const hexColorRegex = /^#([A-Fa-f0-9]{3}){2}$/;
-    if (!hexColorRegex.test(color)) {
-        throw new Error(`[Reshaped] Invalid hex color: ${color}`);
-    }
-    return color;
-};
-const generate = (args = {}) => {
-    const { primary = "#2563eb", critical = "#e22c2c", warning = "#facc15", positive = "#118850", neutral = "#e3e4e8", brand, } = args;
-    const generateFor = (key, color) => {
-        return generateColorValues({
-            key,
-            hex: validateHexColor(typeof color === "string" ? color : color.hex),
-            hexDark: validateHexColor(typeof color === "string" ? color : (color.hexDark ?? color.hex)),
-        });
-    };
-    const brandColor = brand || primary;
-    return {
-        ...generateFor("primary", primary),
-        ...generateFor("critical", critical),
-        ...generateFor("warning", warning),
-        ...generateFor("positive", positive),
-        ...generateFor("neutral", neutral),
-        brand: typeof brandColor === "string" ? { hex: brandColor } : brandColor,
-        white: { hex: "#ffffff" },
-        black: { hex: "#000000" },
-    };
-};
-exports.default = generate;

package/dist/cjs/themes/_generator/utilities/generateUnits.d.ts

@@ -1,4 +0,0 @@
-import type * as T from "../types";
-import type { FullThemeDefinition } from "../tokens/types";
-declare const generateUnits: (definition: T.PartialDeep<FullThemeDefinition>) => void;
-export default generateUnits;

package/dist/cjs/themes/_generator/utilities/mergeDeep.d.ts

@@ -1,5 +0,0 @@
-type Obj = {
-    [key: string]: unknown;
-};
-declare const mergeDeep: (target: Obj, ...sources: Obj[]) => Obj;
-export default mergeDeep;

package/dist/cjs/themes/_generator/utilities/mergeDeep.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const isObject = (item) => {
-    return !!item && typeof item === "object" && !Array.isArray(item);
-};
-const mergeDeep = (target, ...sources) => {
-    if (!sources.length)
-        return target;
-    const source = sources.shift();
-    if (isObject(target) && isObject(source)) {
-        Object.keys(source).forEach((key) => {
-            if (isObject(source[key]) && isObject(target[key])) {
-                if (!target[key])
-                    Object.assign(target, { [key]: {} });
-                mergeDeep(target[key], source[key]);
-            }
-            else {
-                Object.assign(target, { [key]: source[key] });
-            }
-        });
-    }
-    return mergeDeep(target, ...sources);
-};
-exports.default = mergeDeep;

package/dist/cjs/themes/_generator/utilities/resolveTokenReference.d.ts

@@ -1,3 +0,0 @@
-import type * as T from "../tokens/types";
-declare const resolveTokenReference: <ReferencedToken>(theme: T.ThemeDefinition, tokenType: T.TokenType, ref: string) => ReferencedToken;
-export default resolveTokenReference;

package/dist/cjs/themes/_generator/utilities/resolveTokenReference.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const resolveTokenReference = (theme, tokenType, ref) => {
-    const tokenGroup = theme[tokenType];
-    let referencedToken = null;
-    Object.keys(tokenGroup).forEach((tokenName) => {
-        if (referencedToken)
-            return;
-        // Relaxed runtime group resolving
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        if (tokenName === ref)
-            referencedToken = tokenGroup[tokenName];
-    });
-    if (!referencedToken)
-        throw new Error(`[Reshaped] Referenced token not found for: ${ref}`);
-    return referencedToken;
-};
-exports.default = resolveTokenReference;

package/dist/cjs/themes/_generator/utilities/tests/color.test.js

@@ -1,81 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const vitest_1 = require("vitest");
-const color_1 = require("../color");
-(0, vitest_1.describe)("cli/utilities/color", () => {
-    (0, vitest_1.describe)("wcag", () => {
-        (0, vitest_1.test)("returns white for black background", () => {
-            (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#000000", mode: "light" })).toBe("#ffffff");
-        });
-        (0, vitest_1.test)("returns white for dark colored background", () => {
-            (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#aa0000", mode: "light" })).toBe("#ffffff");
-        });
-        (0, vitest_1.test)("returns black for white background", () => {
-            (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#ffffff", mode: "light" })).toBe("#000000");
-        });
-        (0, vitest_1.test)("returns white for light colored background", () => {
-            (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#dedede", mode: "light" })).toBe("#000000");
-        });
-        (0, vitest_1.test)("returns #999 for white background", () => {
-            (0, vitest_1.expect)((0, color_1.getOnColor)({
-                bgHexColor: "#ffffff",
-                lightHexColor: "#eeeeee",
-                darkHexColor: "#999999",
-                mode: "dark",
-            })).toBe("#999999");
-        });
-        (0, vitest_1.test)("returns #eee for black background", () => {
-            (0, vitest_1.expect)((0, color_1.getOnColor)({
-                bgHexColor: "#000000",
-                lightHexColor: "#eeeeee",
-                darkHexColor: "#999999",
-                mode: "dark",
-            })).toBe("#eeeeee");
-        });
-        (0, vitest_1.test)("returns black for muted green background", () => {
-            (0, vitest_1.expect)((0, color_1.getOnColor)({
-                bgHexColor: "#1abc9c",
-                mode: "dark",
-            })).toBe("#000000");
-        });
-    });
-    (0, vitest_1.describe)("apca", () => {
-        (0, vitest_1.test)("returns white for black background", () => {
-            (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#000000", mode: "light", algorithm: "apca" })).toBe("#ffffff");
-        });
-        (0, vitest_1.test)("returns white for dark colored background", () => {
-            (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#aa0000", mode: "light", algorithm: "apca" })).toBe("#ffffff");
-        });
-        (0, vitest_1.test)("returns black for white background", () => {
-            (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#ffffff", mode: "light", algorithm: "apca" })).toBe("#000000");
-        });
-        (0, vitest_1.test)("returns white for light colored background", () => {
-            (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#dedede", mode: "light", algorithm: "apca" })).toBe("#000000");
-        });
-        (0, vitest_1.test)("returns #999 for white background", () => {
-            (0, vitest_1.expect)((0, color_1.getOnColor)({
-                bgHexColor: "#ffffff",
-                lightHexColor: "#eeeeee",
-                darkHexColor: "#999999",
-                mode: "dark",
-                algorithm: "apca",
-            })).toBe("#999999");
-        });
-        (0, vitest_1.test)("returns #eee for black background", () => {
-            (0, vitest_1.expect)((0, color_1.getOnColor)({
-                bgHexColor: "#000000",
-                lightHexColor: "#eeeeee",
-                darkHexColor: "#999999",
-                mode: "dark",
-                algorithm: "apca",
-            })).toBe("#eeeeee");
-        });
-        (0, vitest_1.test)("returns white for muted green background", () => {
-            (0, vitest_1.expect)((0, color_1.getOnColor)({
-                bgHexColor: "#1abc9c",
-                mode: "dark",
-                algorithm: "apca",
-            })).toBe("#ffffff");
-        });
-    });
-});

package/dist/themes/_generator/tests/themes.stories.d.ts

@@ -1,16 +0,0 @@
-import React from "react";
-declare const _default: {
-    title: string;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        a11y: {
-            disable: boolean;
-        };
-    };
-};
-export default _default;
-export declare const base: () => React.JSX.Element;
-export declare const generation: () => React.JSX.Element;
-export declare const onColors: () => React.JSX.Element;

package/dist/themes/_generator/utilities/color.d.ts

@@ -1,105 +0,0 @@
-/**
- * Some of the color conversion utilities are taken from https://github.com/hsluv/hsluv-javascript
- * They have been rewritten for easier color transformations in the theme generation case
- */
-type RgbColor = {
-    r: number;
-    g: number;
-    b: number;
-};
-type HslColor = {
-    h: number;
-    s: number;
-    l: number;
-};
-type XyzColor = {
-    x: number;
-    y: number;
-    z: number;
-};
-type LuvColor = {
-    l: number;
-    u: number;
-    v: number;
-};
-type LchColor = {
-    l: number;
-    c: number;
-    h: number;
-};
-type BoundingLines = {
-    r0s: number;
-    r0i: number;
-    r1s: number;
-    r1i: number;
-    g0s: number;
-    g0i: number;
-    g1s: number;
-    g1i: number;
-    b0s: number;
-    b0i: number;
-    b1s: number;
-    b1i: number;
-};
-/**
- * Color utilities
- */
-export declare const calculateBoundingLines: (l: number) => BoundingLines;
-export declare const distanceFromOriginAngle: (slope: number, intercept: number, angle: number) => number;
-export declare const calcMaxChromaHsluv: (h: number, boundingLines: BoundingLines) => number;
-export declare function hexToRgb(hex: string): RgbColor;
-export declare const rgbToHsl: ({ r, g, b }: RgbColor) => HslColor;
-export declare const hslToRgb: ({ h, s, l }: HslColor) => RgbColor;
-export declare const rgbToHex: ({ r, g, b }: RgbColor) => string;
-export declare const toLinear: (c: number) => number;
-export declare const fromLinear: (c: number) => number;
-export declare const rgbToXyz: ({ r, g, b }: RgbColor) => {
-    x: number;
-    y: number;
-    z: number;
-};
-export declare const xyzToRgb: ({ x, y, z }: XyzColor) => RgbColor;
-export declare const yToL: (y: number) => number;
-export declare const lToY: (l: number) => number;
-export declare const xyzToLuv: ({ x, y, z }: XyzColor) => LuvColor;
-export declare const luvToXyz: ({ l, u, v }: LuvColor) => XyzColor;
-export declare const luvToLch: ({ l, u, v }: LuvColor) => LchColor;
-export declare const lchToLuv: ({ l, c, h }: LchColor) => LuvColor;
-export declare const lchToHsluv: ({ l, c, h }: LchColor) => HslColor;
-export declare const hsluvToLch: ({ h, s, l }: HslColor) => LchColor;
-export declare const hsluvToHex: (hsl: HslColor) => string;
-export declare const hexToHsl: (H: string) => HslColor;
-export declare const hexToHsluv: (hex: string) => HslColor;
-export declare const hslToHex: (hsl: HslColor) => string;
-/**
- * Normalizing utilities
- */
-export declare const getDarkModeColor: (hsl: HslColor) => {
-    s: number;
-    l: number;
-    h: number;
-};
-export declare const getLuminanceDelta: (luminance: number) => number;
-export declare function getRgbLuminance({ r, g, b }: RgbColor): number;
-export declare const getOnColorWCAG: (args: {
-    bgHexColor: string;
-    lightHexColor?: string;
-    darkHexColor?: string;
-}) => string;
-export declare const getOnColorAPCA: (args: {
-    bgHexColor: string;
-    mode: "light" | "dark";
-    lightHexColor?: string;
-    darkHexColor?: string;
-}) => string;
-/**
- * On color resolver
- */
-export declare const getOnColor: (args: {
-    bgHexColor: string;
-    lightHexColor?: string;
-    darkHexColor?: string;
-    mode: "light" | "dark";
-    algorithm?: "wcag" | "apca";
-}) => string;
-export {};