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

package/dist/{themes/_generator/tests → tests}/themes.stories.js

@@ -1,18 +1,21 @@
-import React from "react";
-import { Example } from "../../../utilities/storybook/index.js";
-import View from "../../../components/View/index.js";
-import Button from "../../../components/Button/index.js";
-import Badge from "../../../components/Badge/index.js";
-import Alert from "../../../components/Alert/index.js";
-import Card from "../../../components/Card/index.js";
-import Avatar from "../../../components/Avatar/index.js";
-import DropdownMenu from "../../../components/DropdownMenu/index.js";
-import TextField from "../../../components/TextField/index.js";
-import Theme from "../../../components/Theme/index.js";
-import IconZap from "../../../icons/Mic.js";
-import Link from "../../../components/Link/index.js";
-import Text from "../../../components/Text/index.js";
-import { getThemeCSS, generateThemeColors, baseThemeDefinition } from "../../index.js";
+import { useLayoutEffect, useState } from "react";
+import { Example } from "../utilities/storybook/index.js";
+import View from "../components/View/index.js";
+import Button from "../components/Button/index.js";
+import Badge from "../components/Badge/index.js";
+import Alert from "../components/Alert/index.js";
+import Card from "../components/Card/index.js";
+import Avatar from "../components/Avatar/index.js";
+import DropdownMenu from "../components/DropdownMenu/index.js";
+import TextField from "../components/TextField/index.js";
+import Theme, { useTheme } from "../components/Theme/index.js";
+import IconZap from "../icons/Mic.js";
+import Link from "../components/Link/index.js";
+import Text from "../components/Text/index.js";
+import { getThemeCSS, generateThemeColors, baseThemeDefinition } from "../themes/index.js";
+import ThemePlayground from "./ThemesPlayground.js";
+import Actionable from "../components/Actionable/index.js";
+import Switch from "../components/Switch/index.js";
 export default {
     title: "Internal/Themes",
     parameters: {
@@ -23,6 +26,62 @@ export default {
         },
     },
 };
+const colors = [
+    "#2563eb",
+    "#4f39f6",
+    "#4a8200",
+    "#0891b2",
+    "#34d399",
+    "#fe9a00",
+    "#be185d",
+    "#ff2056",
+    "#000000",
+];
+export const test = () => {
+    const { colorMode } = useTheme();
+    const [activeColor, setColor] = useState(colors[0]);
+    const [theme, setTheme] = useState("");
+    const [algo, setAlgo] = useState("wcag");
+    useLayoutEffect(() => {
+        setTheme(getThemeCSS("test", {
+            color: generateThemeColors({
+                primary: activeColor === colors[0] ? undefined : activeColor,
+            }),
+        }, {
+            colorContrastAlgorithm: algo,
+        }));
+    }, [activeColor, algo]);
+    return (<>
+			<style>{theme}</style>
+			<Theme name="test">
+				<View gap={4}>
+					<View direction="row" align="center" gap={4}>
+						{colors.map((color) => {
+            const hex = colorMode === "dark" && color === "#000000" ? "#ffffff" : color;
+            return (<Actionable key={color} onClick={() => setColor(color)} borderRadius="inherit">
+									<View width={5} height={5} borderRadius="circular" attributes={{
+                    style: {
+                        transition: `box-shadow var(--rs-duration-fast) var(--rs-easing-standard)`,
+                        background: hex,
+                        boxShadow: color === activeColor
+                            ? `0 0 0 3px var(--rs-color-background-elevation-base), 0 0 0 5px ${hex}`
+                            : undefined,
+                    },
+                }}/>
+								</Actionable>);
+        })}
+						<View.Item gapBefore="auto">
+							<Switch name="algo" onChange={(args) => setAlgo(args.checked ? "apca" : "wcag")}>
+								Use APCA
+							</Switch>
+						</View.Item>
+					</View>
+
+					<ThemePlayground />
+				</View>
+			</Theme>
+		</>);
+};
 const css = getThemeCSS("green", {
     color: {
         backgroundPrimary: { hex: "#1abc9c", hexDark: "#00E5C4" },

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

@@ -1,5 +1,5 @@
 import reshapedDefinition from "./reshaped.js";
-import generateColors from "../utilities/generateColors.js";
+import generateColors from "../tokens/color/utilities/generateColors.js";
 const theme = {
     ...reshapedDefinition,
     color: generateColors(),

package/dist/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/themes/_generator/tokens/color/color.transforms.js

@@ -1,18 +1,40 @@
-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;
 };
-export default transformedToken;
+export default transformToken;

package/dist/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/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/themes/_generator/tokens/color/utilities/a11y.js

@@ -0,0 +1,58 @@
+import { oklchToRgb } from "./convert.js";
+/**
+ * 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);
+}
+export const getOnColorWCAG = (args) => {
+    const { bgColor, lightColor, darkColor } = args;
+    const bgRgb = oklchToRgb(bgColor);
+    const lightRgb = oklchToRgb(lightColor);
+    return contrastWCAG([bgRgb.r, bgRgb.g, bgRgb.b], [lightRgb.r, lightRgb.g, lightRgb.b]) > 4.5
+        ? lightColor
+        : darkColor;
+};
+/**
+ * APCA
+ */
+function luminanceAPCA(oklch) {
+    const { r, g, b } = 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));
+}
+export 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;
+};
+/**
+ * General
+ */
+export const getOnColor = (args) => {
+    if (args.algorithm === "apca") {
+        return getOnColorAPCA(args);
+    }
+    else {
+        return getOnColorWCAG(args);
+    }
+};

package/dist/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/themes/_generator/tokens/color/utilities/convert.js

@@ -0,0 +1,27 @@
+import { useMode, modeOklch, formatHex, modeRgb } from "culori/fn";
+// eslint-disable-next-line react-hooks/rules-of-hooks
+const oklch = useMode(modeOklch);
+// eslint-disable-next-line react-hooks/rules-of-hooks
+const rgb = useMode(modeRgb);
+export const hexToOklch = (hex) => {
+    const result = oklch(formatHex(hex));
+    if (!result)
+        throw new Error(`[Reshaped] Can't convert ${hex} to oklch`);
+    return result;
+};
+export 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)),
+    };
+};
+export const tokenToOklchToken = (token) => {
+    const hexDarkFallback = token.hexDark ? hexToOklch(token.hexDark) : undefined;
+    return {
+        oklch: token.oklch ? { ...token.oklch, mode: "oklch" } : hexToOklch(token.hex),
+        oklchDark: token.oklchDark ? { ...token.oklchDark, mode: "oklch" } : hexDarkFallback,
+    };
+};

package/dist/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/themes/_generator/tokens/color/utilities/generateColors.js

@@ -0,0 +1,150 @@
+import { hexToOklch, tokenToOklchToken } from "./convert.js";
+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 = hexToOklch(hexLight);
+    const dark = hexDark ? 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 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"),
+    };
+};
+export default generateColors;

package/dist/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/themes/_generator/tokens/color/utilities/generateMetaColors.js

@@ -0,0 +1,66 @@
+import { capitalize } from "../../../../../utilities/string.js";
+import { bgWithDynamicForeground } from "../../../constants.js";
+import { hexToOklch, oklchToRgb, tokenToOklchToken } from "./convert.js";
+import { getOnColor } from "./a11y.js";
+const whiteColor = hexToOklch("#ffffff");
+const blackColor = 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${capitalize(tokenName)}`;
+        const generatedRGBName = `rgb${capitalize(tokenName)}`;
+        const generateOnColorsFor = [
+            ...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 = 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
+                ? hexToOklch(onColor.hexLight)
+                : onColor?.oklchLight || whiteColor;
+            const darkColor = onColor && "hexDark" in onColor
+                ? hexToOklch(onColor.hexDark)
+                : onColor?.oklchDark || blackColor;
+            const light = getOnColor({
+                bgColor: oklchBgToken.oklch,
+                lightColor: { ...lightColor, mode: "oklch" },
+                darkColor: { ...darkColor, mode: "oklch" },
+                algorithm: colorContrastAlgorithm,
+            });
+            const dark = oklchBgToken.oklchDark &&
+                getOnColor({
+                    bgColor: oklchBgToken.oklchDark,
+                    lightColor: { ...lightColor, mode: "oklch" },
+                    darkColor: { ...darkColor, mode: "oklch" },
+                    algorithm: colorContrastAlgorithm,
+                });
+            result[generatedForegroundName] = {
+                oklch: light,
+                oklchDark: dark,
+            };
+        }
+        if (needsRGB) {
+            const rgb = oklchToRgb(oklchBgToken.oklch);
+            const rgbDark = oklchBgToken.oklchDark && 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;
+};
+export default generateMetaColors;

package/dist/{cjs/themes/_generator/utilities → 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/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/themes/_generator/tokens/duration/duration.transforms.js

@@ -1,4 +1,4 @@
-const transformedToken = (name, token) => [
+const transformToken = (name, token) => [
     {
         name,
         tokenType: "duration",
@@ -6,4 +6,4 @@ const transformedToken = (name, token) => [
         value: `${token.ms}ms`,
     },
 ];
-export default transformedToken;
+export default transformToken;

package/dist/themes/_generator/tokens/easing/easing.transforms.d.ts

@@ -1,4 +1,4 @@
 import type * as T from "./easing.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/themes/_generator/tokens/easing/easing.transforms.js

@@ -1,4 +1,4 @@
-const transformedToken = (name, token) => [
+const transformToken = (name, token) => [
     {
         name,
         tokenType: "easing",
@@ -6,4 +6,4 @@ const transformedToken = (name, token) => [
         value: `cubic-bezier(${token.x1}, ${token.y1}, ${token.x2}, ${token.y2})`,
     },
 ];
-export default transformedToken;
+export default transformToken;

package/dist/themes/_generator/tokens/font/font.transforms.d.ts

@@ -1,4 +1,4 @@
 import type * as T from "./font.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/themes/_generator/tokens/font/font.transforms.js

@@ -1,6 +1,6 @@
-import { getVariableName } from "../../utilities/css.js";
+import { getVariableName } from "../css.js";
 const BASE_REM_SIZE = 16;
-const transformedToken = (name, token) => {
+const transformToken = (name, token) => {
     const result = [];
     result.push({
         name,
@@ -38,4 +38,4 @@ const transformedToken = (name, token) => {
     });
     return result;
 };
-export default transformedToken;
+export default transformToken;

package/dist/themes/_generator/tokens/fontFamily/fontFamily.transforms.d.ts

@@ -1,4 +1,4 @@
 import type * as T from "./fontFamily.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/themes/_generator/tokens/fontFamily/fontFamily.transforms.js

@@ -1,4 +1,4 @@
-const transformedToken = (name, token) => [
+const transformToken = (name, token) => [
     {
         name,
         tokenType: "fontFamily",
@@ -6,4 +6,4 @@ const transformedToken = (name, token) => [
         value: `${token.family}`,
     },
 ];
-export default transformedToken;
+export default transformToken;

package/dist/themes/_generator/tokens/fontWeight/fontWeight.transforms.d.ts

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