reshaped 2.11.11 → 3.0.0

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

@@ -0,0 +1,89 @@
+/**
+ * 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 getOnColor: (args: {
+    bgHexColor: string;
+    lightHexColor?: string;
+    darkHexColor?: string;
+}) => string;
+export {};

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

@@ -0,0 +1,359 @@
+"use strict";
+/**
+ * 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOnColor = exports.getLuminanceDelta = exports.getDarkModeColor = exports.hslToHex = exports.hexToHsluv = exports.hexToHsl = exports.hsluvToHex = exports.hsluvToLch = exports.lchToHsluv = exports.lchToLuv = exports.luvToLch = exports.luvToXyz = exports.xyzToLuv = exports.lToY = exports.yToL = exports.xyzToRgb = exports.rgbToXyz = exports.fromLinear = exports.toLinear = exports.rgbToHex = exports.hslToRgb = exports.rgbToHsl = exports.calcMaxChromaHsluv = exports.distanceFromOriginAngle = exports.calculateBoundingLines = void 0;
+exports.hexToRgb = hexToRgb;
+exports.getRgbLuminance = getRgbLuminance;
+/**
+ * Constants
+ */
+const epsilon = 0.0088564516;
+const refY = 1.0;
+const refU = 0.19783000664283;
+const refV = 0.46831999493879;
+const kappa = 903.2962962;
+const mr0 = 3.240969941904521;
+const mr1 = -1.537383177570093;
+const mr2 = -0.498610760293;
+const mg0 = -0.96924363628087;
+const mg1 = 1.87596750150772;
+const mg2 = 0.041555057407175;
+const mb0 = 0.055630079696993;
+const mb1 = -0.20397695888897;
+const mb2 = 1.056971514242878;
+/**
+ * Color utilities
+ */
+const calculateBoundingLines = (l) => {
+    const sub1 = Math.pow(l + 16, 3) / 1560896;
+    const sub2 = sub1 > epsilon ? sub1 : l / kappa;
+    const s1r = sub2 * (284517 * mr0 - 94839 * mr2);
+    const s2r = sub2 * (838422 * mr2 + 769860 * mr1 + 731718 * mr0);
+    const s3r = sub2 * (632260 * mr2 - 126452 * mr1);
+    const s1g = sub2 * (284517 * mg0 - 94839 * mg2);
+    const s2g = sub2 * (838422 * mg2 + 769860 * mg1 + 731718 * mg0);
+    const s3g = sub2 * (632260 * mg2 - 126452 * mg1);
+    const s1b = sub2 * (284517 * mb0 - 94839 * mb2);
+    const s2b = sub2 * (838422 * mb2 + 769860 * mb1 + 731718 * mb0);
+    const s3b = sub2 * (632260 * mb2 - 126452 * mb1);
+    return {
+        r0s: s1r / s3r,
+        r0i: (s2r * l) / s3r,
+        r1s: s1r / (s3r + 126452),
+        r1i: ((s2r - 769860) * l) / (s3r + 126452),
+        g0s: s1g / s3g,
+        g0i: (s2g * l) / s3g,
+        g1s: s1g / (s3g + 126452),
+        g1i: ((s2g - 769860) * l) / (s3g + 126452),
+        b0s: s1b / s3b,
+        b0i: (s2b * l) / s3b,
+        b1s: s1b / (s3b + 126452),
+        b1i: ((s2b - 769860) * l) / (s3b + 126452),
+    };
+};
+exports.calculateBoundingLines = calculateBoundingLines;
+const distanceFromOriginAngle = (slope, intercept, angle) => {
+    const d = intercept / (Math.sin(angle) - slope * Math.cos(angle));
+    return d < 0 ? Infinity : d;
+};
+exports.distanceFromOriginAngle = distanceFromOriginAngle;
+const calcMaxChromaHsluv = (h, boundingLines) => {
+    const hueRad = (h / 360) * Math.PI * 2;
+    const r0 = (0, exports.distanceFromOriginAngle)(boundingLines.r0s, boundingLines.r0i, hueRad);
+    const r1 = (0, exports.distanceFromOriginAngle)(boundingLines.r1s, boundingLines.r1i, hueRad);
+    const g0 = (0, exports.distanceFromOriginAngle)(boundingLines.g0s, boundingLines.g0i, hueRad);
+    const g1 = (0, exports.distanceFromOriginAngle)(boundingLines.g1s, boundingLines.g1i, hueRad);
+    const b0 = (0, exports.distanceFromOriginAngle)(boundingLines.b0s, boundingLines.b0i, hueRad);
+    const b1 = (0, exports.distanceFromOriginAngle)(boundingLines.b1s, boundingLines.b1i, hueRad);
+    return Math.min(r0, r1, g0, g1, b0, b1);
+};
+exports.calcMaxChromaHsluv = calcMaxChromaHsluv;
+function hexToRgb(hex) {
+    hex = hex.replace("#", "");
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return { r, g, b };
+}
+const rgbToHsl = ({ r, g, b }) => {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const cmin = Math.min(r, g, b);
+    const cmax = Math.max(r, g, b);
+    const delta = cmax - cmin;
+    let h = 0;
+    let s = 0;
+    let l = 0;
+    if (delta == 0)
+        h = 0;
+    else if (cmax == r)
+        h = ((g - b) / delta) % 6;
+    else if (cmax == g)
+        h = (b - r) / delta + 2;
+    else
+        h = (r - g) / delta + 4;
+    h = Math.round(h * 60);
+    if (h < 0)
+        h += 360;
+    l = (cmax + cmin) / 2;
+    s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+    s = +(s * 100).toFixed(1);
+    l = +(l * 100).toFixed(1);
+    return { h, s: Math.round(s), l: Math.round(l) };
+};
+exports.rgbToHsl = rgbToHsl;
+const hslToRgb = ({ h, s, l }) => {
+    s /= 100;
+    l /= 100;
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+    const m = l - c / 2;
+    const isSector1 = 0 <= h && h < 60;
+    const isSector2 = 60 <= h && h < 120;
+    const isSector3 = 120 <= h && h < 180;
+    const isSector4 = 180 <= h && h < 240;
+    const isSector5 = 240 <= h && h < 300;
+    const isSector6 = 300 <= h && h < 360;
+    const r = isSector1 || isSector6 ? c : isSector2 || isSector5 ? x : 0;
+    const g = isSector1 || isSector4 ? x : isSector2 || isSector3 ? c : 0;
+    const b = isSector1 || isSector2 ? 0 : isSector3 || isSector6 ? x : c;
+    return {
+        r: Math.round((r + m) * 255),
+        g: Math.round((g + m) * 255),
+        b: Math.round((b + m) * 255),
+    };
+};
+exports.hslToRgb = hslToRgb;
+const rgbToHex = ({ r, g, b }) => {
+    const red = Math.round(r).toString(16).padStart(2, "0");
+    const green = Math.round(g).toString(16).padStart(2, "0");
+    const blue = Math.round(b).toString(16).padStart(2, "0");
+    return `#${red}${green}${blue}`;
+};
+exports.rgbToHex = rgbToHex;
+const toLinear = (c) => {
+    if (c > 0.04045)
+        return Math.pow((c + 0.055) / 1.055, 2.4);
+    return c / 12.92;
+};
+exports.toLinear = toLinear;
+const fromLinear = (c) => {
+    if (c <= 0.0031308)
+        return 12.92 * c;
+    return 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+};
+exports.fromLinear = fromLinear;
+const rgbToXyz = ({ r, g, b }) => {
+    const lr = (0, exports.toLinear)(r / 255);
+    const lg = (0, exports.toLinear)(g / 255);
+    const lb = (0, exports.toLinear)(b / 255);
+    return {
+        x: 0.41239079926595 * lr + 0.35758433938387 * lg + 0.18048078840183 * lb,
+        y: 0.21263900587151 * lr + 0.71516867876775 * lg + 0.072192315360733 * lb,
+        z: 0.019330818715591 * lr + 0.11919477979462 * lg + 0.95053215224966 * lb,
+    };
+};
+exports.rgbToXyz = rgbToXyz;
+const xyzToRgb = ({ x, y, z }) => {
+    return {
+        r: (0, exports.fromLinear)(mr0 * x + mr1 * y + mr2 * z) * 255,
+        g: (0, exports.fromLinear)(mg0 * x + mg1 * y + mg2 * z) * 255,
+        b: (0, exports.fromLinear)(mb0 * x + mb1 * y + mb2 * z) * 255,
+    };
+};
+exports.xyzToRgb = xyzToRgb;
+const yToL = (y) => {
+    if (y <= epsilon)
+        return (y / refY) * kappa;
+    return 116 * Math.pow(y / refY, 1 / 3) - 16;
+};
+exports.yToL = yToL;
+const lToY = (l) => {
+    if (l <= 8)
+        return (refY * l) / kappa;
+    return refY * Math.pow((l + 16) / 116, 3);
+};
+exports.lToY = lToY;
+const xyzToLuv = ({ x, y, z }) => {
+    const divider = x + 15 * y + 3 * z;
+    const varU = divider !== 0 ? (4 * x) / divider : NaN;
+    const varV = divider !== 0 ? (9 * y) / divider : NaN;
+    const l = (0, exports.yToL)(y);
+    return {
+        l,
+        u: l === 0 ? 0 : 13 * l * (varU - refU),
+        v: l === 0 ? 0 : 13 * l * (varV - refV),
+    };
+};
+exports.xyzToLuv = xyzToLuv;
+const luvToXyz = ({ l, u, v }) => {
+    if (l === 0)
+        return { x: 0, y: 0, z: 0 };
+    const varU = u / (13 * l) + refU;
+    const varV = v / (13 * l) + refV;
+    const y = (0, exports.lToY)(l);
+    const x = 0 - (9 * y * varU) / ((varU - 4) * varV - varU * varV);
+    const z = (9 * y - 15 * varV * y - varV * x) / (3 * varV);
+    return { x, y, z };
+};
+exports.luvToXyz = luvToXyz;
+const luvToLch = ({ l, u, v }) => {
+    const c = Math.sqrt(u * u + v * v);
+    let h;
+    if (c < 0.00000001) {
+        h = 0;
+    }
+    else {
+        const hrad = Math.atan2(v, u);
+        h = (hrad * 180.0) / Math.PI;
+        if (h < 0)
+            h = 360 + h;
+    }
+    return { l, c, h };
+};
+exports.luvToLch = luvToLch;
+const lchToLuv = ({ l, c, h }) => {
+    const hrad = (h / 180.0) * Math.PI;
+    return {
+        l,
+        u: Math.cos(hrad) * c,
+        v: Math.sin(hrad) * c,
+    };
+};
+exports.lchToLuv = lchToLuv;
+const lchToHsluv = ({ l, c, h }) => {
+    let s;
+    let newL;
+    if (l > 99.9999999) {
+        s = 0;
+        newL = 100;
+    }
+    else if (l < 0.00000001) {
+        s = 0;
+        newL = 0;
+    }
+    else {
+        const boundingLines = (0, exports.calculateBoundingLines)(l);
+        const max = (0, exports.calcMaxChromaHsluv)(h, boundingLines);
+        s = (c / max) * 100;
+        newL = l;
+    }
+    return { h, s, l: newL };
+};
+exports.lchToHsluv = lchToHsluv;
+const hsluvToLch = ({ h, s, l }) => {
+    let newL;
+    let c;
+    if (l > 99.9999999) {
+        newL = 100;
+        c = 0;
+    }
+    else if (l < 0.00000001) {
+        newL = 0;
+        c = 0;
+    }
+    else {
+        const boundingLines = (0, exports.calculateBoundingLines)(l);
+        const max = (0, exports.calcMaxChromaHsluv)(h, boundingLines);
+        newL = l;
+        c = (max / 100) * s;
+    }
+    return { l: newL, c, h };
+};
+exports.hsluvToLch = hsluvToLch;
+const hsluvToHex = (hsl) => {
+    const lch = (0, exports.hsluvToLch)(hsl);
+    const luv = (0, exports.lchToLuv)(lch);
+    const xyz = (0, exports.luvToXyz)(luv);
+    const rgb = (0, exports.xyzToRgb)(xyz);
+    return (0, exports.rgbToHex)(rgb);
+};
+exports.hsluvToHex = hsluvToHex;
+const hexToHsl = (H) => {
+    const rgb = hexToRgb(H);
+    return (0, exports.rgbToHsl)(rgb);
+};
+exports.hexToHsl = hexToHsl;
+const hexToHsluv = (hex) => {
+    const rgb = hexToRgb(hex);
+    const xyz = (0, exports.rgbToXyz)(rgb);
+    const luv = (0, exports.xyzToLuv)(xyz);
+    const lch = (0, exports.luvToLch)(luv);
+    return (0, exports.lchToHsluv)(lch);
+};
+exports.hexToHsluv = hexToHsluv;
+const hslToHex = (hsl) => {
+    const rgb = (0, exports.hslToRgb)(hsl);
+    return (0, exports.rgbToHex)(rgb);
+};
+exports.hslToHex = hslToHex;
+/**
+ * Normalizing utilities
+ */
+const getDarkModeColor = (hsl) => {
+    const { s, l } = hsl;
+    /**
+     * Colors with lower saturation should have bigger lightness delta, for example it can be
+     * Neutral: l: 97 -> l dark: 13
+     * Warning: l: 53 -> l dark: 47
+     *
+     * Therefor we calculate the dark mode lightness based on a saturation modifier, which should be between 0 and 1
+     * We take base saturation:
+     * Neutral: 20 -> 0.2 modifier, Warning: 96 -> 0.96 modifier
+     *
+     * And we also adjust that value with a modifier of 0.9-2 based on the saturation
+     * That way satured colors won't change much from its original value
+     */
+    const sModifier = (s / 100) * (0.96 + (100 - s) / 100);
+    return { ...hsl, s: Math.max(0, s - 7), l: l * sModifier };
+};
+exports.getDarkModeColor = getDarkModeColor;
+const getLuminanceDelta = (luminance) => {
+    return Math.max(0, luminance - 50) / 5;
+};
+exports.getLuminanceDelta = getLuminanceDelta;
+function getRgbLuminance({ r, g, b }) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const y = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    // The CIE standard states 0.008856 but 216/24389 is the intent for 0.008856451679036
+    if (y <= 216 / 24389) {
+        // The CIE standard states 903.3, but 24389/27 is the intent, making 903.296296296296296
+        return y * (24389 / 27);
+    }
+    else {
+        return Math.pow(y, 1 / 3) * 116 - 16;
+    }
+}
+const RED = 0.2126;
+const GREEN = 0.7152;
+const BLUE = 0.0722;
+const GAMMA = 2.4;
+function luminance(r, g, b) {
+    var a = [r, g, b].map((v) => {
+        v /= 255;
+        return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, GAMMA);
+    });
+    return a[0] * RED + a[1] * GREEN + a[2] * BLUE;
+}
+function contrast(rgb1, rgb2) {
+    var lum1 = luminance(...rgb1);
+    var lum2 = luminance(...rgb2);
+    var brightest = Math.max(lum1, lum2);
+    var darkest = Math.min(lum1, lum2);
+    return (brightest + 0.05) / (darkest + 0.05);
+}
+const getOnColor = (args) => {
+    const { bgHexColor, lightHexColor = "#ffffff", darkHexColor = "#000000" } = args;
+    const bgRgb = hexToRgb(bgHexColor);
+    const lightRgb = hexToRgb(lightHexColor);
+    return contrast([bgRgb.r, bgRgb.g, bgRgb.b], [lightRgb.r, lightRgb.g, lightRgb.b]) > 4.5
+        ? lightHexColor
+        : darkHexColor;
+};
+exports.getOnColor = getOnColor;

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

@@ -0,0 +1,57 @@
+"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,
+                ...onColorHexMap,
+            });
+            const hexDark = (0, color_1.getOnColor)({
+                bgHexColor: bgToken.hexDark || bgToken.hex,
+                ...onColorHexMap,
+            });
+            // eslint-disable-next-line no-param-reassign
+            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);
+            // eslint-disable-next-line no-param-reassign
+            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

@@ -0,0 +1,11 @@
+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?: string;
+}) => ThemeDefinition["color"];
+export default generate;

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

@@ -0,0 +1,177 @@
+"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(`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 = { ...okhsl, l: 0.94 + 0.045 * hueLightness };
+    const bgFadedHslDark = { ...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.06,
+        })
+        : okhslToHex({
+            ...bgFadedHsl,
+            s: 0.6 - 0.2 * hueLightness,
+            l: bgFadedHsl.l - 0.05,
+        });
+    const bdFadedHexDark = key === "neutral"
+        ? okhslToHex({
+            ...bgFadedHslDark,
+            l: 1,
+            alpha: 0.09,
+        })
+        : okhslToHex({
+            ...bgFadedHslDark,
+            l: bgFadedHslDark.l + 0.08,
+        });
+    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(`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: typeof color !== "string" ? validateHexColor(color.hexDark) : undefined,
+        });
+    };
+    return {
+        ...generateFor("primary", primary),
+        ...generateFor("critical", critical),
+        ...generateFor("warning", warning),
+        ...generateFor("positive", positive),
+        ...generateFor("neutral", neutral),
+        brand: { hex: brand || primary },
+        white: { hex: "#ffffff" },
+        black: { hex: "#000000" },
+    };
+};
+exports.default = generate;