reshaped 3.6.0-canary.3 → 3.6.0-canary.5

package/dist/cjs/cli/theming/index.d.ts

@@ -1,4 +1,4 @@
-import type { PartialThemeDefinition } from "../../themes/_generator/tokens/types";
+import type { PassedThemeDefinition } from "../../themes/_generator/tokens/types";
 import type * as T from "../../themes/_generator/types";
-export declare const addThemeFragment: (name: string, definition: PartialThemeDefinition, options: T.CLIOptions) => void;
-export declare const addTheme: (name: string, definition: PartialThemeDefinition, options: T.CLIOptions) => void;
+export declare const addThemeFragment: (name: string, definition: PassedThemeDefinition, options: T.CLIOptions) => void;
+export declare const addTheme: (name: string, definition: PassedThemeDefinition, options: T.CLIOptions) => void;

package/dist/cjs/cli/theming/index.js

@@ -23,8 +23,8 @@ const transformDefinition = (name, definition, options) => {
     const themeJsonPath = path_1.default.resolve(themeFolderPath, "theme.json");
     fs_1.default.mkdirSync(themeFolderPath, { recursive: true });
     fs_1.default.writeFileSync(themePath, code.variables);
-    fs_1.default.writeFileSync(themeJsonPath, JSON.stringify(definition));
-    fs_1.default.writeFileSync(twPath, (0, tailwind_1.transformToTailwind)(definition));
+    fs_1.default.writeFileSync(themeJsonPath, JSON.stringify(code.theme));
+    fs_1.default.writeFileSync(twPath, (0, tailwind_1.transformToTailwind)(code.theme));
     if (code.media)
         fs_1.default.writeFileSync(themeMediaPath, code.media);
     const logOutput = `Compiled ${chalk_1.default.bold(name)} theme${isFragment ? " fragment" : ""}`;

package/dist/cjs/cli/theming/tailwind.d.ts

@@ -1,3 +1,2 @@
-import type { FullThemeDefinition } from "../../themes/_generator/tokens/types";
-import type * as T from "../../themes/_generator/types";
-export declare const transformToTailwind: (theme?: T.PartialDeep<FullThemeDefinition>) => string;
+import type { GeneratedThemeDefinition } from "../../themes/_generator/tokens/types";
+export declare const transformToTailwind: (theme?: GeneratedThemeDefinition) => string;

package/dist/cjs/themes/_generator/definitions/slate.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const reshaped_1 = __importDefault(require("./reshaped"));
-const generateColors_1 = __importDefault(require("../utilities/generateColors"));
+const generateColors_1 = __importDefault(require("../tokens/color/utilities/generateColors"));
 const theme = {
     ...reshaped_1.default,
     color: (0, generateColors_1.default)(),

package/dist/cjs/themes/_generator/tokens/color/color.transforms.d.ts

@@ -1,4 +1,4 @@
 import type * as T from "./color.types";
 import type { Transformer } from "../types";
-declare const transformedToken: Transformer<T.Token>;
-export default transformedToken;
+declare const transformToken: Transformer<T.Token>;
+export default transformToken;

package/dist/cjs/themes/_generator/tokens/color/color.transforms.js

@@ -1,20 +1,42 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const transformedToken = (name, token) => {
-    const hasDarkMode = !!token.hexDark;
-    const defaultMode = hasDarkMode ? "light" : undefined;
+const transformTokenForMode = (args) => {
+    const { hex, oklch } = args;
+    if (oklch) {
+        const components = `${Number(oklch.l.toFixed(4))} ${Number(oklch.c.toFixed(4))} ${Number(oklch.h?.toFixed(4) || 0)}`;
+        const alphaSuffix = oklch?.alpha === undefined ? "" : ` / ${Number(oklch.alpha.toFixed(4))}`;
+        return `oklch(${components}${alphaSuffix})`;
+    }
+    if (hex)
+        return hex;
+    throw new Error(`[Reshaped] ${JSON.stringify(args)} is missing a color value`);
+};
+const transformToken = (name, token) => {
+    const { hex, hexDark, oklch, oklchDark } = token;
+    // Apply color to both modes if dark mode is not available
+    const hasDark = !!hexDark || !!oklchDark;
+    const value = transformTokenForMode({ oklch, hex });
+    const darkValue = hasDark ? transformTokenForMode({ oklch: oklchDark, hex: hexDark }) : undefined;
+    const separateModes = hasDark && value !== darkValue;
+    const defaultMode = separateModes ? "light" : undefined;
     const result = [
-        { name, tokenType: "color", type: "variable", value: token.hex, mode: defaultMode },
+        {
+            name,
+            tokenType: "color",
+            type: "variable",
+            value,
+            mode: defaultMode,
+        },
     ];
-    if (token.hexDark) {
+    if (darkValue && separateModes) {
         result.push({
             name,
             tokenType: "color",
             type: "variable",
-            value: token.hexDark,
+            value: darkValue,
             mode: "dark",
         });
     }
     return result;
 };
-exports.default = transformedToken;
+exports.default = transformToken;

package/dist/cjs/themes/_generator/tokens/color/color.types.d.ts

@@ -1,7 +1,32 @@
+import type { Oklch } from "culori/fn";
+export type Hue = "primary" | "positive" | "critical" | "warning" | "neutral" | "brand";
 export type Name = "foregroundNeutral" | "foregroundNeutralFaded" | "foregroundDisabled" | "foregroundPrimary" | "foregroundCritical" | "foregroundWarning" | "foregroundPositive" | "borderNeutral" | "borderNeutralFaded" | "borderDisabled" | "borderPrimary" | "borderPrimaryFaded" | "borderCritical" | "borderCriticalFaded" | "borderWarning" | "borderWarningFaded" | "borderPositive" | "borderPositiveFaded" | "backgroundNeutral" | "backgroundNeutralFaded" | "backgroundDisabled" | "backgroundDisabledFaded" | "backgroundPrimary" | "backgroundPrimaryFaded" | "backgroundCritical" | "backgroundCriticalFaded" | "backgroundWarning" | "backgroundWarningFaded" | "backgroundPositive" | "backgroundPositiveFaded" | "backgroundPage" | "backgroundPageFaded" | "backgroundElevationBase" | "backgroundElevationRaised" | "backgroundElevationOverlay" | "brand" | "white" | "black";
 export type GeneratedOnName = "onBackgroundNeutral" | "onBackgroundPrimary" | "onBackgroundPositive" | "onBackgroundWarning" | "onBackgroundCritical";
 export type GeneratedRGBName = "rgbBackgroundNeutral" | "rgbBackgroundNeutralFaded" | "rgbBackgroundDisabled" | "rgbBackgroundDisabledFaded" | "rgbBackgroundPrimary" | "rgbBackgroundPrimaryFaded" | "rgbBackgroundCritical" | "rgbBackgroundCriticalFaded" | "rgbBackgroundWarning" | "rgbBackgroundWarningFaded" | "rgbBackgroundPositive" | "rgbBackgroundPositiveFaded" | "rgbBackgroundPage" | "rgbBackgroundPageFaded" | "rgbBackgroundElevationBase" | "rgbBackgroundElevationRaised" | "rgbBackgroundElevationOverlay";
-export type Token = {
-    hex: string;
-    hexDark?: string;
+export type RgbColor = {
+    r: number;
+    g: number;
+    b: number;
+};
+export type OklchColor = Omit<Oklch, "mode">;
+export type HexColor = string;
+export type ColorValue = HexColor | Token;
+export type OklchOnlyToken = {
+    oklch: OklchColor;
+    oklchDark?: OklchColor;
+};
+export type OklchToken = OklchOnlyToken & {
+    hex?: never;
+    hexDark?: never;
+};
+export type HexToken = {
+    hex: HexColor;
+    hexDark?: HexColor;
+    oklch?: never;
+    oklchDark?: never;
+};
+export type Token = OklchToken | HexToken;
+export type InternalToken = {
+    oklch: Oklch;
+    oklchDark?: Oklch;
 };

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

@@ -0,0 +1,20 @@
+import { type Oklch } from "culori/fn";
+export declare const getOnColorWCAG: (args: {
+    bgColor: Oklch;
+    lightColor: Oklch;
+    darkColor: Oklch;
+}) => Oklch;
+export declare const getOnColorAPCA: (args: {
+    bgColor: Oklch;
+    lightColor: Oklch;
+    darkColor: Oklch;
+}) => Oklch;
+/**
+ * General
+ */
+export declare const getOnColor: (args: {
+    bgColor: Oklch;
+    lightColor: Oklch;
+    darkColor: Oklch;
+    algorithm?: "wcag" | "apca";
+}) => Oklch;

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

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOnColor = exports.getOnColorAPCA = exports.getOnColorWCAG = void 0;
+const convert_1 = require("./convert");
+/**
+ * WCAG
+ */
+const RED = 0.2126;
+const GREEN = 0.7152;
+const BLUE = 0.0722;
+const GAMMA = 2.4;
+function luminanceWCAG(r, g, b) {
+    const a = [r, g, b].map((v) => {
+        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 contrastWCAG(rgb1, rgb2) {
+    const lum1 = luminanceWCAG(...rgb1);
+    const lum2 = luminanceWCAG(...rgb2);
+    const brightest = Math.max(lum1, lum2);
+    const darkest = Math.min(lum1, lum2);
+    return (brightest + 0.05) / (darkest + 0.05);
+}
+const getOnColorWCAG = (args) => {
+    const { bgColor, lightColor, darkColor } = args;
+    const bgRgb = (0, convert_1.oklchToRgb)(bgColor);
+    const lightRgb = (0, convert_1.oklchToRgb)(lightColor);
+    return contrastWCAG([bgRgb.r, bgRgb.g, bgRgb.b], [lightRgb.r, lightRgb.g, lightRgb.b]) > 4.5
+        ? lightColor
+        : darkColor;
+};
+exports.getOnColorWCAG = getOnColorWCAG;
+/**
+ * APCA
+ */
+function luminanceAPCA(oklch) {
+    const { r, g, b } = (0, convert_1.oklchToRgb)(oklch);
+    return (0.2126 * Math.pow(r / 255, 2.2) +
+        0.7152 * Math.pow(g / 255, 2.2) +
+        0.0722 * Math.pow(b / 255, 2.2));
+}
+const getOnColorAPCA = (args) => {
+    const { bgColor, lightColor, darkColor } = args;
+    const backgroundLuminance = luminanceAPCA(bgColor);
+    const lightLuminance = luminanceAPCA(lightColor);
+    const darkLuminance = luminanceAPCA(darkColor);
+    const contrastWithLight = Math.abs(lightLuminance - backgroundLuminance);
+    const contrastWithDark = Math.abs(darkLuminance - backgroundLuminance);
+    return contrastWithLight > contrastWithDark ? lightColor : darkColor;
+};
+exports.getOnColorAPCA = getOnColorAPCA;
+/**
+ * General
+ */
+const getOnColor = (args) => {
+    if (args.algorithm === "apca") {
+        return (0, exports.getOnColorAPCA)(args);
+    }
+    else {
+        return (0, exports.getOnColorWCAG)(args);
+    }
+};
+exports.getOnColor = getOnColor;

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

@@ -0,0 +1,11 @@
+import { type Oklch } from "culori/fn";
+import type * as TColor from "../color.types";
+export declare const hexToOklch: (hex: string) => Oklch;
+export declare const oklchToRgb: (oklch: Oklch) => {
+    r: number;
+    g: number;
+    b: number;
+    mode: "rgb";
+    alpha?: number;
+};
+export declare const tokenToOklchToken: (token: TColor.Token) => TColor.InternalToken;

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tokenToOklchToken = exports.oklchToRgb = exports.hexToOklch = void 0;
+const fn_1 = require("culori/require");
+// eslint-disable-next-line react-hooks/rules-of-hooks
+const oklch = (0, fn_1.useMode)(fn_1.modeOklch);
+// eslint-disable-next-line react-hooks/rules-of-hooks
+const rgb = (0, fn_1.useMode)(fn_1.modeRgb);
+const hexToOklch = (hex) => {
+    const result = oklch((0, fn_1.formatHex)(hex));
+    if (!result)
+        throw new Error(`[Reshaped] Can't convert ${hex} to oklch`);
+    return result;
+};
+exports.hexToOklch = hexToOklch;
+const oklchToRgb = (oklch) => {
+    const value = rgb(oklch);
+    return {
+        ...value,
+        r: Number(value.r.toFixed(4)),
+        g: Number(value.g.toFixed(4)),
+        b: Number(value.b.toFixed(4)),
+    };
+};
+exports.oklchToRgb = oklchToRgb;
+const tokenToOklchToken = (token) => {
+    const hexDarkFallback = token.hexDark ? (0, exports.hexToOklch)(token.hexDark) : undefined;
+    return {
+        oklch: token.oklch ? { ...token.oklch, mode: "oklch" } : (0, exports.hexToOklch)(token.hex),
+        oklchDark: token.oklchDark ? { ...token.oklchDark, mode: "oklch" } : hexDarkFallback,
+    };
+};
+exports.tokenToOklchToken = tokenToOklchToken;

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

@@ -0,0 +1,4 @@
+import type { ThemeDefinition } from "../../types";
+import { type ColorValue, Hue } from "../color.types";
+declare const generateColors: (args?: Partial<Record<Hue, ColorValue>>) => ThemeDefinition["color"];
+export default generateColors;

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

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const convert_1 = require("./convert");
+const parseColor = (color) => {
+    const isString = typeof color === "string";
+    if (!isString && "oklch" in color && color.oklch) {
+        return {
+            light: color.oklch,
+            dark: color.oklchDark,
+        };
+    }
+    const hexLight = isString ? color : color.hex;
+    const hexDark = isString ? undefined : color.hexDark;
+    const light = (0, convert_1.hexToOklch)(hexLight);
+    const dark = hexDark ? (0, convert_1.hexToOklch)(hexDark) : undefined;
+    if (!light) {
+        throw new Error(`[Reshaped] Failed when parsing color: ${JSON.stringify(color)}`);
+    }
+    return { light, dark };
+};
+const getDarkModeColor = (lch) => {
+    const { l, c } = lch;
+    // Top boundary at which background colors are perceived as vibrant
+    const vibrancyThreshold = 0.25;
+    // A linear modifier of how gray a color is, gray = 1, vibrant = 0
+    const neutralFactor = Math.min(1, Math.max(0, (vibrancyThreshold - c) / vibrancyThreshold));
+    // Non-linear modification to make gray color inversion progress faster
+    const easedVibrancy = 1 - Math.pow(neutralFactor, 2);
+    const invertedL = 1 - l;
+    // Take plain inversion and increase it back by vibrancy modifier
+    // Vibrant colors should get back to almost the original value
+    // while non-briant colors should lean towards full inversion
+    // Example:
+    // Black should become white in dark mode
+    // Light gray should become dark gray
+    // Vibrant blue should stay vibrant blue
+    const darkL = invertedL + (l - invertedL) * easedVibrancy;
+    // Make sure dark mode value doesn't become too dark and is still visible on dark page background
+    const clampedDarkL = Math.max(0.36, darkL);
+    return { ...lch, c: c * 0.8, l: clampedDarkL };
+};
+const generateColorValues = (key, token) => {
+    const { light: bg, dark } = parseColor(token);
+    const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
+    const neutral = key === "neutral";
+    const warning = key === "warning";
+    const bgDark = dark || getDarkModeColor(bg);
+    const bgFaded = {
+        ...bg,
+        l: 0.97,
+        c: neutral ? 0.005 : warning ? 0.04 : 0.02,
+    };
+    const bgFadedDark = {
+        ...bgDark,
+        l: 0.25,
+        // For primary color with low chroma, we still have to make sure it stays low
+        c: neutral ? 0.01 : bgDark.c / 5,
+    };
+    const fg = neutral ? { ...bg, l: 0.2 } : { ...bg, l: 0.5 };
+    const fgDark = neutral ? { ...bgDark, l: 0.96 } : { ...bgDark, l: 0.75, c: bg.c * 0.85 };
+    const bd = neutral ? { ...bg, l: 0, alpha: 0.12 } : { ...bg, l: bg.l - 0.08 };
+    const bdDark = neutral ? { ...bgDark, l: 1, alpha: 0.16 } : { ...bgDark, l: bgDark.l + 0.08 };
+    const bdFaded = neutral
+        ? { ...bgFaded, l: 0, alpha: 0.08 }
+        : { ...bgFaded, l: bgFaded.l - 0.05, c: bgFaded.c + 0.01 };
+    const bdFadedDark = neutral
+        ? { ...bgFadedDark, l: 1, alpha: 0.08 }
+        : { ...bgFadedDark, l: bgFadedDark.l + 0.1 };
+    const output = {
+        [`background${capitalizedKey}`]: {
+            oklch: bg,
+            oklchDark: bgDark,
+        },
+        [`background${capitalizedKey}Faded`]: {
+            oklch: bgFaded,
+            oklchDark: bgFadedDark,
+        },
+        [`border${capitalizedKey}`]: {
+            oklch: bd,
+            oklchDark: bdDark,
+        },
+        [`border${capitalizedKey}Faded`]: {
+            oklch: bdFaded,
+            oklchDark: bdFadedDark,
+        },
+        [`foreground${capitalizedKey}`]: {
+            oklch: fg,
+            oklchDark: fgDark,
+        },
+    };
+    if (neutral) {
+        output[`foreground${capitalizedKey}Faded`] = {
+            oklch: { ...fg, l: fg.l + 0.25 },
+            oklchDark: { ...fgDark, l: fgDark.l - 0.15 },
+        };
+        output[`backgroundDisabled`] = {
+            oklch: { ...bg, l: 0.95, c: 0 },
+            oklchDark: { ...bgDark, l: 0.28, c: 0 },
+        };
+        output[`backgroundDisabledFaded`] = {
+            oklch: { ...bg, l: 0.98, c: 0 },
+            oklchDark: { ...bgDark, l: 0.23, c: 0 },
+        };
+        output[`borderDisabled`] = {
+            oklch: { ...bd, alpha: 0.06 },
+            oklchDark: { ...bgDark, l: 0.28, c: 0 },
+        };
+        output[`foregroundDisabled`] = {
+            oklch: { ...fg, l: 0.84, c: 0 },
+            oklchDark: { ...fgDark, l: 0.4, c: 0 },
+        };
+        output[`backgroundElevationBase`] = {
+            oklch: { ...bg, l: 1, c: 0 },
+            oklchDark: { ...bgDark, l: 0.2, c: 0 },
+        };
+        output[`backgroundElevationRaised`] = {
+            oklch: { ...bg, l: 1, c: 0 },
+            oklchDark: { ...bgDark, l: 0.21, c: 0 },
+        };
+        output[`backgroundElevationOverlay`] = {
+            oklch: { ...bg, l: 1, c: 0 },
+            oklchDark: { ...bgDark, l: 0.22, c: 0 },
+        };
+        output[`backgroundPage`] = {
+            oklch: { ...bg, l: 1, c: 0 },
+            oklchDark: { ...bgDark, l: 0.16, c: 0 },
+        };
+        output[`backgroundPageFaded`] = {
+            oklch: { ...bg, l: 0.97, c: 0 },
+            oklchDark: { ...bgDark, l: 0.18, c: 0 },
+        };
+    }
+    return output;
+};
+const getOklchToken = (color) => {
+    const token = typeof color === "string" ? { hex: color } : color;
+    return (0, convert_1.tokenToOklchToken)(token);
+};
+const generateColors = (args = {}) => {
+    const { primary = { oklch: { l: 0.55, c: 0.24, h: 262.67 } }, critical = { oklch: { l: 0.59, c: 0.22, h: 26.97 } }, warning = { oklch: { l: 0.86, c: 0.18, h: 89.84 } }, positive = { oklch: { l: 0.53, c: 0.13, h: 153.78 } }, neutral = { oklch: { l: 0.92, c: 0.01, h: 262.67 } }, brand, } = args;
+    return {
+        ...generateColorValues("primary", getOklchToken(primary)),
+        ...generateColorValues("critical", getOklchToken(critical)),
+        ...generateColorValues("warning", getOklchToken(warning)),
+        ...generateColorValues("positive", getOklchToken(positive)),
+        ...generateColorValues("neutral", getOklchToken(neutral)),
+        brand: getOklchToken(brand || primary),
+        white: getOklchToken("#ffffff"),
+        black: getOklchToken("#000000"),
+    };
+};
+exports.default = generateColors;

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

@@ -0,0 +1,4 @@
+import type * as T from "../../../types";
+import { GeneratedThemeDefinition, PassedThemeDefinition } from "../../types";
+declare const generateMetaColors: (definition: PassedThemeDefinition, themeOptions?: T.PublicOptions["themeOptions"]) => GeneratedThemeDefinition["color"] | undefined;
+export default generateMetaColors;

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

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const string_1 = require("../../../../../utilities/string");
+const constants_1 = require("../../../constants");
+const convert_1 = require("./convert");
+const a11y_1 = require("./a11y");
+const whiteColor = (0, convert_1.hexToOklch)("#ffffff");
+const blackColor = (0, convert_1.hexToOklch)("#000000");
+const generateMetaColors = (definition, themeOptions = {}) => {
+    if (!definition.color)
+        return;
+    const { onColorValues = {}, colorContrastAlgorithm } = themeOptions;
+    const result = {};
+    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;
+        const oklchBgToken = (0, convert_1.tokenToOklchToken)(bgToken);
+        if (needsDynamicForeground) {
+            const overrideKeys = Object.keys(onColorValues);
+            const onColorKey = overrideKeys.find((key) => tokenName.toLowerCase().includes(key));
+            const onColor = onColorKey && onColorValues[onColorKey];
+            const lightColor = onColor && "hexLight" in onColor
+                ? (0, convert_1.hexToOklch)(onColor.hexLight)
+                : onColor?.oklchLight || whiteColor;
+            const darkColor = onColor && "hexDark" in onColor
+                ? (0, convert_1.hexToOklch)(onColor.hexDark)
+                : onColor?.oklchDark || blackColor;
+            const light = (0, a11y_1.getOnColor)({
+                bgColor: oklchBgToken.oklch,
+                lightColor: { ...lightColor, mode: "oklch" },
+                darkColor: { ...darkColor, mode: "oklch" },
+                algorithm: colorContrastAlgorithm,
+            });
+            const dark = oklchBgToken.oklchDark &&
+                (0, a11y_1.getOnColor)({
+                    bgColor: oklchBgToken.oklchDark,
+                    lightColor: { ...lightColor, mode: "oklch" },
+                    darkColor: { ...darkColor, mode: "oklch" },
+                    algorithm: colorContrastAlgorithm,
+                });
+            result[generatedForegroundName] = {
+                oklch: light,
+                oklchDark: dark,
+            };
+        }
+        if (needsRGB) {
+            const rgb = (0, convert_1.oklchToRgb)(oklchBgToken.oklch);
+            const rgbDark = oklchBgToken.oklchDark && (0, convert_1.oklchToRgb)(oklchBgToken.oklchDark);
+            result[generatedRGBName] = {
+                hex: `${rgb.r * 255}, ${rgb.g * 255}, ${rgb.b * 255}`,
+                hexDark: rgbDark && `${rgbDark.r * 255}, ${rgbDark.g * 255}, ${rgbDark.b * 255}`,
+            };
+        }
+    });
+    return result;
+};
+exports.default = generateMetaColors;

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const a11y_1 = require("../a11y");
+const white = { l: 1, c: 0, h: 0, mode: "oklch" };
+const black = { l: 0, c: 0, h: 0, mode: "oklch" };
+const blue = { l: 0.55, c: 0.24, h: 262.67, mode: "oklch" };
+const rose = { l: 0.64, c: 0.2, h: 16.5, mode: "oklch" };
+(0, vitest_1.describe)("themes/tokens/color/utilities/a11y", () => {
+    (0, vitest_1.describe)("wcag", () => {
+        (0, vitest_1.test)("returns white for black background", () => {
+            (0, vitest_1.expect)((0, a11y_1.getOnColor)({ bgColor: black, lightColor: white, darkColor: black })).toBe(white);
+        });
+        (0, vitest_1.test)("returns black for white background", () => {
+            (0, vitest_1.expect)((0, a11y_1.getOnColor)({ bgColor: white, lightColor: white, darkColor: black })).toBe(black);
+        });
+        (0, vitest_1.test)("returns white for blue background", () => {
+            (0, vitest_1.expect)((0, a11y_1.getOnColor)({ bgColor: blue, lightColor: white, darkColor: black })).toBe(white);
+        });
+        (0, vitest_1.test)("returns black for rose background", () => {
+            (0, vitest_1.expect)((0, a11y_1.getOnColor)({ bgColor: rose, lightColor: white, darkColor: black })).toBe(black);
+        });
+    });
+    (0, vitest_1.describe)("apca", () => {
+        (0, vitest_1.test)("returns white for black background", () => {
+            (0, vitest_1.expect)((0, a11y_1.getOnColor)({ bgColor: black, lightColor: white, darkColor: black, algorithm: "apca" })).toBe(white);
+        });
+        (0, vitest_1.test)("returns black for white background", () => {
+            (0, vitest_1.expect)((0, a11y_1.getOnColor)({ bgColor: white, lightColor: white, darkColor: black, algorithm: "apca" })).toBe(black);
+        });
+        (0, vitest_1.test)("returns white for blue background", () => {
+            (0, vitest_1.expect)((0, a11y_1.getOnColor)({ bgColor: blue, lightColor: white, darkColor: black, algorithm: "apca" })).toBe(white);
+        });
+        (0, vitest_1.test)("returns white for rose background", () => {
+            (0, vitest_1.expect)((0, a11y_1.getOnColor)({ bgColor: rose, lightColor: white, darkColor: black, algorithm: "apca" })).toBe(white);
+        });
+    });
+});

package/dist/cjs/themes/_generator/tokens/color/utilities/tests/convert.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const convert_1 = require("../convert");
+const white = (0, convert_1.hexToOklch)("#ffffff");
+const black = (0, convert_1.hexToOklch)("#000000");
+const red = (0, convert_1.hexToOklch)("#ff0000");
+(0, vitest_1.describe)("themes/tokens/color/utilities/convert", () => {
+    (0, vitest_1.describe)("hexToOklch", () => {
+        (0, vitest_1.test)("white", () => {
+            (0, vitest_1.expect)(white).toMatchSnapshot();
+        });
+        (0, vitest_1.test)("black", () => {
+            (0, vitest_1.expect)(black).toMatchSnapshot();
+        });
+        (0, vitest_1.test)("red", () => {
+            (0, vitest_1.expect)(red).toMatchSnapshot();
+        });
+        (0, vitest_1.test)("white, short", () => {
+            (0, vitest_1.expect)((0, convert_1.hexToOklch)("#fff")).toEqual(white);
+        });
+    });
+    (0, vitest_1.describe)("oklchToRgb", () => {
+        (0, vitest_1.test)("white", () => {
+            (0, vitest_1.expect)((0, convert_1.oklchToRgb)(white)).toMatchSnapshot();
+        });
+        (0, vitest_1.test)("black", () => {
+            (0, vitest_1.expect)((0, convert_1.oklchToRgb)(black)).toMatchSnapshot();
+        });
+        (0, vitest_1.test)("red", () => {
+            (0, vitest_1.expect)((0, convert_1.oklchToRgb)(red)).toMatchSnapshot();
+        });
+    });
+    (0, vitest_1.describe)("tokenToOklchToken", () => {
+        (0, vitest_1.test)("hex", () => {
+            (0, vitest_1.expect)((0, convert_1.tokenToOklchToken)({ hex: "#ffffff" })).toMatchSnapshot();
+        });
+        (0, vitest_1.test)("hex and hexDark", () => {
+            (0, vitest_1.expect)((0, convert_1.tokenToOklchToken)({ hex: "#ffffff", hexDark: "#000000" })).toMatchSnapshot();
+        });
+        (0, vitest_1.test)("oklch", () => {
+            (0, vitest_1.expect)((0, convert_1.tokenToOklchToken)({ oklch: white })).toMatchSnapshot();
+        });
+        (0, vitest_1.test)("oklch and oklchDark", () => {
+            (0, vitest_1.expect)((0, convert_1.tokenToOklchToken)({ oklch: white, oklchDark: black })).toMatchSnapshot();
+        });
+    });
+});

package/dist/cjs/themes/_generator/tokens/color/utilities/tests/generateColors.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const generateColors_1 = __importDefault(require("../generateColors"));
+(0, vitest_1.describe)("themes/tokens/color/utilities/generateColors", () => {
+    (0, vitest_1.test)("with default values", () => {
+        (0, vitest_1.expect)((0, generateColors_1.default)()).toMatchSnapshot();
+    });
+    (0, vitest_1.test)("with a passed value", () => {
+        const black = { l: 0, c: 0, h: 0 };
+        const colors = (0, generateColors_1.default)({ primary: { oklch: black } });
+        (0, vitest_1.expect)(colors).toMatchSnapshot();
+        (0, vitest_1.expect)(colors.backgroundPrimary).toEqual({
+            oklch: { ...black, mode: "oklch" },
+            oklchDark: { ...black, l: 1, mode: "oklch" },
+        });
+    });
+});

package/dist/{themes/_generator/utilities → cjs/themes/_generator/tokens}/css.d.ts

@@ -1,4 +1,4 @@
-import type * as T from "../tokens/types";
+import type * as T from "./types";
 export declare const getVariableName: (tokenName: string, tokenType?: string) => string;
 export declare const createVariable: (token: T.TransformedToken) => string;
 export declare const createMedia: (token: T.TransformedToken) => string;

package/dist/cjs/themes/_generator/tokens/duration/duration.transforms.d.ts

@@ -1,4 +1,4 @@
 import type * as T from "./duration.types";
 import type { Transformer } from "../types";
-declare const transformedToken: Transformer<T.Token>;
-export default transformedToken;
+declare const transformToken: Transformer<T.Token>;
+export default transformToken;

package/dist/cjs/themes/_generator/tokens/duration/duration.transforms.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const transformedToken = (name, token) => [
+const transformToken = (name, token) => [
     {
         name,
         tokenType: "duration",
@@ -8,4 +8,4 @@ const transformedToken = (name, token) => [
         value: `${token.ms}ms`,
     },
 ];
-exports.default = transformedToken;
+exports.default = transformToken;