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

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;

package/dist/themes/_generator/tokens/fontWeight/fontWeight.transforms.js

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

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

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

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

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

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

package/dist/themes/_generator/tokens/shadow/shadow.transforms.js

@@ -1,5 +1,5 @@
-import { hexToRgb } from "../../utilities/color.js";
-const transformedToken = (name, token, theme) => [
+import { hexToOklch, oklchToRgb } from "../color/utilities/convert.js";
+const transformToken = (name, token, theme) => [
     {
         name,
         tokenType: "shadow",
@@ -9,7 +9,7 @@ const transformedToken = (name, token, theme) => [
             const blur = ` ${value.blurRadius || 0}px`;
             const spread = ` ${value.spreadRadius || 0}px`;
             const colorRef = theme.color[value.colorToken];
-            const rgb = hexToRgb(colorRef.hex);
+            const rgb = oklchToRgb(hexToOklch(colorRef?.hex || "#000000"));
             const rgbString = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
             const color = `rgba(${rgbString}, ${value.opacity || 1})`;
             return `${value.offsetX}px ${value.offsetY}px${blur}${spread} ${color}`;
@@ -17,4 +17,4 @@ const transformedToken = (name, token, theme) => [
             .join(", "),
     },
 ];
-export default transformedToken;
+export default transformToken;

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

@@ -8,11 +8,14 @@ import type * as TShadow from "./shadow/shadow.types";
 import type * as TUnit from "./unit/unit.types";
 import type * as TRadius from "./radius/radius.types";
 import type * as TViewport from "./viewport/viewport.types";
+import { PartialDeep } from "../types";
 export type TokenType = "fontFamily" | "fontWeight" | "unit" | "radius" | "viewport" | "font" | "color" | "duration" | "easing" | "shadow";
-export type ColorHue = "primary" | "positive" | "critical" | "neutral";
 type TokenSet<Name extends string, Token> = Record<Name, Token> & {
     [tokenName: string]: Token;
 };
+/**
+ * Internal theme definition with all required tokens
+ */
 export type ThemeDefinition = {
     unit: TokenSet<TUnit.Name, TUnit.Token>;
     radius: TokenSet<TRadius.Name, TRadius.Token>;
@@ -25,22 +28,21 @@ export type ThemeDefinition = {
     shadow: TokenSet<TShadow.Name, TShadow.Token>;
     viewport: Record<Exclude<TViewport.Name, "s">, TViewport.Token>;
 };
-export type PartialThemeDefinition = {
-    unit?: Partial<ThemeDefinition["unit"]>;
-    radius?: Partial<ThemeDefinition["radius"]>;
-    fontFamily?: Partial<ThemeDefinition["fontFamily"]>;
-    fontWeight?: Partial<ThemeDefinition["fontWeight"]>;
-    font?: Partial<ThemeDefinition["font"]>;
-    color?: Partial<ThemeDefinition["color"]>;
-    duration?: Partial<ThemeDefinition["duration"]>;
-    easing?: Partial<ThemeDefinition["easing"]>;
-    shadow?: Partial<ThemeDefinition["shadow"]>;
-    viewport?: Partial<ThemeDefinition["viewport"]>;
+/**
+ * Externally configured theme which might override just some of the tokens
+ * but also might include custom "on" colors
+ */
+export type PassedThemeDefinition = Omit<PartialDeep<ThemeDefinition>, "color"> & {
+    color?: Partial<TokenSet<TColor.Name | TColor.GeneratedOnName, TColor.Token>>;
 };
-export type FullThemeDefinition = ThemeDefinition & {
-    color: Record<TColor.GeneratedOnName | TColor.GeneratedRGBName | TColor.Name, TColor.Token>;
-    unit: Record<TUnit.GeneratedName | TUnit.Name, TUnit.Token>;
-    viewport: Record<TViewport.Name, TViewport.Token | TViewport.SToken>;
+/**
+ * Theme generation output which includes all generated tokens
+ * but might not include some of the tokens when used for theme fragments
+ */
+export type GeneratedThemeDefinition = Omit<PassedThemeDefinition, "color" | "unit" | "viewport"> & {
+    color: Partial<TokenSet<TColor.GeneratedOnName | TColor.GeneratedRGBName | TColor.Name, TColor.Token>>;
+    unit: Partial<TokenSet<TUnit.GeneratedName | TUnit.Name, TUnit.Token>>;
+    viewport: Partial<TokenSet<TViewport.Name, TViewport.Token | TViewport.SToken>>;
 };
 export type TransformedToken = {
     name: string;
@@ -51,5 +53,5 @@ export type TransformedToken = {
     private?: boolean;
     viewport?: string;
 };
-export type Transformer<Token> = (name: string, token: Token, theme: FullThemeDefinition) => TransformedToken[];
+export type Transformer<Token> = (name: string, token: Token, theme: GeneratedThemeDefinition) => TransformedToken[];
 export {};

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

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

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

package/dist/themes/_generator/tokens/unit/utilities/generate.d.ts

@@ -0,0 +1,5 @@
+import type { PassedThemeDefinition } from "../../types";
+import type { GeneratedName as GeneratedUnitName } from "../unit.types";
+export declare const generateUnits: (definition: PassedThemeDefinition) => Partial<Partial<Record<"base" | GeneratedUnitName, import("../unit.types").Token> & {
+    [tokenName: string]: import("../unit.types").Token;
+}>> | undefined;

package/dist/themes/_generator/{utilities/generateUnits.js → tokens/unit/utilities/generate.js}

@@ -1,13 +1,12 @@
-const generateUnits = (definition) => {
+export const generateUnits = (definition) => {
+    const result = {};
     const baseValue = definition.unit?.base?.px;
     // If base value hasn't changed, we don't need to regenerate tokens
     if (!baseValue)
         return;
     for (let i = 1; i <= 10; i += 1) {
         const generatedName = `x${i}`;
-        definition.unit[generatedName] = {
-            px: baseValue * i,
-        };
+        result[generatedName] = { px: baseValue * i };
     }
+    return result;
 };
-export default generateUnits;

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

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

package/dist/themes/_generator/tokens/viewport/viewport.transforms.js

@@ -1,4 +1,4 @@
-const transformedToken = (name, token) => {
+const transformToken = (name, token) => {
     const value = [];
     if (token.minPx)
         value.push(`(min-width: ${token.minPx}px)`);
@@ -22,4 +22,4 @@ const transformedToken = (name, token) => {
     }
     return result;
 };
-export default transformedToken;
+export default transformToken;

package/dist/themes/_generator/transform.d.ts

@@ -1,7 +1,8 @@
 import type * as T from "./types";
-import type { FullThemeDefinition } from "./tokens/types";
-declare const transform: (name: string, definition: T.PartialDeep<FullThemeDefinition>, options: T.PrivateOptions) => {
+import type { PassedThemeDefinition, GeneratedThemeDefinition } from "./tokens/types";
+declare const transform: (name: string, definition: PassedThemeDefinition, options: T.PrivateOptions) => {
     variables: string;
     media: string | undefined;
+    theme: GeneratedThemeDefinition;
 };
 export default transform;

package/dist/themes/_generator/transform.js

@@ -1,25 +1,52 @@
 import * as transforms from "./tokens/transforms.js";
-import { variablesTemplate, mediaTemplate } from "./utilities/css.js";
-import generateBackgroundColors from "./utilities/generateBackgroundColors.js";
-import generateUnits from "./utilities/generateUnits.js";
+import { variablesTemplate, mediaTemplate } from "./tokens/css.js";
+import { generateUnits } from "./tokens/unit/utilities/generate.js";
+import generateMetaColors from "./tokens/color/utilities/generateMetaColors.js";
+import { formatHex } from "culori/fn";
 const transform = (name, definition, options) => {
     const { isFragment, themeOptions } = options;
-    generateBackgroundColors(definition, themeOptions);
-    generateUnits(definition);
-    // Generate s viewport
-    if (definition.viewport?.m?.minPx) {
-        definition.viewport.s = { maxPx: definition.viewport.m.minPx - 1 };
-    }
+    const generatedUnits = isFragment ? {} : generateUnits(definition);
+    const generatedViewports = definition.viewport?.m?.minPx
+        ? { s: { maxPx: definition.viewport.m.minPx - 1 } }
+        : {};
+    const generatedMetaColors = generateMetaColors(definition, themeOptions);
+    const generatedColors = Object.entries({
+        ...definition.color,
+        ...generatedMetaColors,
+    }).reduce((res, [key, token]) => {
+        const next = { ...token };
+        if (!token)
+            return res;
+        if (!token.hex && token.oklch) {
+            next.hex = formatHex({ ...token.oklch, mode: "oklch" });
+        }
+        if (!token.hexDark && token.oklchDark) {
+            next.hexDark = formatHex({ ...token.oklchDark, mode: "oklch" });
+        }
+        return { ...res, [key]: next };
+    }, {});
+    const theme = {
+        ...definition,
+        color: generatedColors,
+        unit: {
+            ...definition.unit,
+            ...generatedUnits,
+        },
+        viewport: {
+            ...definition.viewport,
+            ...generatedViewports,
+        },
+    };
     const transformedStorage = {
         variable: [],
         media: [],
     };
-    Object.entries(definition).forEach(([tokenType, tokenValues]) => {
+    Object.entries(theme).forEach(([tokenType, tokenValues]) => {
         if (!tokenValues)
             return;
         const transform = transforms.css[tokenType];
         Object.entries(tokenValues).forEach(([tokenName, token]) => {
-            const transformedTokens = transform(tokenName, token, definition);
+            const transformedTokens = transform(tokenName, token, theme);
             transformedTokens.forEach((transformedToken) => {
                 transformedStorage[transformedToken.type].push(transformedToken);
             });
@@ -28,6 +55,7 @@ const transform = (name, definition, options) => {
     return {
         variables: variablesTemplate(name, transformedStorage.variable),
         media: !isFragment ? mediaTemplate(transformedStorage.media) : undefined,
+        theme,
     };
 };
 export default transform;