reshaped 2.2.0 → 2.3.0

package/components/_private/Portal/tests/Portal.stories.js

@@ -3,16 +3,15 @@ import Portal from "../index.js";
 export default { title: "Utilities/Internal/Portal" };
 export const base = () => {
     const ref = React.useRef(null);
-    return (<div style={{ border: "2px solid #333", padding: 16 }}>
-			App
-			<Portal scopeRef={ref}>
-				<div ref={ref} style={{ border: "2px solid green", padding: 16 }}>
-					Portal scope
-					<div style={{ border: "2px solid red", padding: 16 }}>
-						Stays in red
-						<Portal>Ported to green</Portal>
-					</div>
-				</div>
-			</Portal>
-		</div>);
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => {
+        setMounted(true);
+    }, []);
+    return (<>
+			<div style={{ border: "2px solid #333", padding: 16 }}>
+				App
+				{mounted && <Portal targetRef={ref}>Ported to green</Portal>}
+			</div>
+			<div ref={ref} style={{ border: "2px solid green", padding: 16 }}/>
+		</>);
 };

package/config/next.d.ts

@@ -1,5 +1,4 @@
-export declare const config: {
-    modularizeImports: {
-        reshaped: string[][];
-    };
-};
+/**
+ * TODO: Work in progress
+ * Needs named exports support before we can use it
+ */

package/config/next.js

@@ -1,8 +1,22 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.config = void 0;
-exports.config = {
-    modularizeImports: {
-        reshaped: [[""]],
-    },
-};
+/**
+ * TODO: Work in progress
+ * Needs named exports support before we can use it
+ */
+// export const config = {
+// 	modularizeImports: {
+// 		reshaped: {
+// 			transform: {
+// 				// Utilities
+// 				// classNames: "reshaped/utilities/classNames",
+// 				// Hooks
+// 				useToast: "reshaped/components/Toast",
+// 				useFormControl: "reshaped/components/FormControl",
+// 				useTheme: "reshaped/components/Theme",
+// 				"use.*": "reshaped/hooks/{{ member }}",
+// 				// Components
+// 				"*": "reshaped/components/{{ member }}",
+// 			},
+// 		},
+// 	},
+// };

package/config/tailwind.d.ts

@@ -1,2 +1,2 @@
-import { UserThemeDefinition } from "../cli/theming/tokens/types";
+import { UserThemeDefinition } from "../themes/_generator/tokens/types";
 export declare const getTheme: (theme?: UserThemeDefinition) => Record<"backgroundColor" | "textColor" | "borderColor" | "colors" | "borderRadius" | "spacing" | "boxShadow" | "screens", Record<string, string>>;

package/config/tailwind.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTheme = void 0;
 const reshaped_1 = __importDefault(require("../cli/theming/definitions/reshaped"));
 const base_1 = __importDefault(require("../cli/theming/definitions/base"));
-const string_1 = require("../cli/utilities/string");
-const color_1 = require("../cli/utilities/color");
-const mergeDefinitions_1 = __importDefault(require("../cli/theming/utilities/mergeDefinitions"));
+const string_1 = require("../utilities/string");
+const color_1 = require("../utilities/color");
+const mergeDefinitions_1 = __importDefault(require("../themes/_generator/utilities/mergeDefinitions"));
 const getTheme = (theme) => {
     const config = {
         backgroundColor: {},

package/hooks/_private/useFlyout.js

@@ -1,7 +1,7 @@
 import React from "react";
 import useRTL from "../useRTL.js";
-import { usePortal } from "../../components/_private/Portal/index.js";
 import { onNextFrame } from "../../utilities/animation.js";
+import { getClosestScrollableParent } from "../../utilities/dom.js";
 const SCREEN_OFFSET = 16;
 const topPos = ["top-start", "top", "top-end"];
 const bottomPos = ["bottom-start", "bottom", "bottom-end"];
@@ -51,8 +51,8 @@ const fullyVisible = (bounds) => {
 /**
  * Calculate styles for the current position
  */
-const calculatePosition = (originBounds, targetBounds, options) => {
-    const { position: passedPosition, rtl, width, isInsidePortal } = options;
+const calculatePosition = (originBounds, targetBounds, parentOffset, options) => {
+    const { position: passedPosition, rtl, width } = options;
     let left = 0;
     let top = 0;
     let position = passedPosition;
@@ -116,9 +116,8 @@ const calculatePosition = (originBounds, targetBounds, options) => {
     if (top === undefined || left === undefined) {
         throw Error(`[Reshaped, flyout]: ${position} position is not valid`);
     }
-    // When rendered inside portal, we don't need to accommodate for the page scroll
-    top = Math.round(top + (isInsidePortal ? 0 : window.pageYOffset || 0));
-    left = Math.round(left + (isInsidePortal ? 0 : window.pageXOffset || 0));
+    top = Math.round(top + (window.scrollY || 0) - parentOffset.top);
+    left = Math.round(left + (window.scrollX || 0) - parentOffset.left);
     let widthStyle = Math.ceil(targetBounds.width);
     const height = Math.ceil(targetBounds.height);
     if (width === "full") {
@@ -175,7 +174,13 @@ const flyout = (origin, target, options) => {
     }
     document.body.appendChild(targetClone);
     const targetBounds = targetClone.getBoundingClientRect();
-    let calculated = calculatePosition(originBounds, targetBounds, options);
+    const scrollableParent = getClosestScrollableParent(origin);
+    const boundsDelta = scrollableParent.getBoundingClientRect();
+    const parentOffset = {
+        top: boundsDelta.top + document.documentElement.scrollTop - scrollableParent.scrollTop,
+        left: boundsDelta.left + document.documentElement.scrollLeft - scrollableParent.scrollLeft,
+    };
+    let calculated = calculatePosition(originBounds, targetBounds, parentOffset, options);
     if (!fullyVisible(calculated.styles) && !forcePosition) {
         const order = getPositionOrder(position);
         const mobileOrder = order.filter((position) => position === "top" || position === "bottom");
@@ -183,7 +188,7 @@ const flyout = (origin, target, options) => {
             const { fullWidth } = extraOptions;
             testOrder.some((currentPosition) => {
                 const calculateOptions = Object.assign(Object.assign({}, options), { width: fullWidth ? "full" : options.width, position: currentPosition });
-                const tested = calculatePosition(originBounds, targetBounds, calculateOptions);
+                const tested = calculatePosition(originBounds, targetBounds, parentOffset, calculateOptions);
                 if (fullyVisible(tested.styles)) {
                     calculated = tested;
                     return true;
@@ -202,7 +207,8 @@ const flyout = (origin, target, options) => {
 const flyoutReducer = (state, action) => {
     switch (action.type) {
         case "render":
-            return Object.assign(Object.assign({}, state), { status: "rendered" });
+            // Disable events before it's positioned to avoid mouseleave getting triggered
+            return Object.assign(Object.assign({}, state), { status: "rendered", styles: { pointerEvents: "none" } });
         case "position":
             return Object.assign(Object.assign({}, state), { status: state.status === "visible" ? "visible" : "positioned", position: action.payload.position, styles: Object.assign(Object.assign({}, defaultStyles), action.payload.styles) });
         case "show":
@@ -217,8 +223,6 @@ const flyoutReducer = (state, action) => {
 };
 const useFlyout = (originRef, targetRef, options) => {
     const { position: defaultPosition = "bottom", forcePosition, width } = options;
-    const { scopeRef } = usePortal();
-    const isInsidePortal = !!(scopeRef === null || scopeRef === void 0 ? void 0 : scopeRef.current);
     const [isRTL] = useRTL();
     const [state, dispatch] = React.useReducer(flyoutReducer, {
         position: defaultPosition,
@@ -245,10 +249,9 @@ const useFlyout = (originRef, targetRef, options) => {
             position: defaultPosition,
             forcePosition,
             rtl: isRTL,
-            isInsidePortal,
         });
         dispatch({ type: "position", payload: nextFlyoutData });
-    }, [originRef, targetRef, defaultPosition, isRTL, forcePosition, width, isInsidePortal]);
+    }, [originRef, targetRef, defaultPosition, isRTL, forcePosition, width]);
     React.useEffect(() => {
         if (state.status === "rendered")
             updatePosition();

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "2.2.0",
+	"version": "2.3.0",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -65,8 +65,8 @@
 		"release:lib": "yarn build && yarn publish",
 		"release:beta": "yarn build && yarn publish --tag beta",
 		"release:test": "yarn build && yarn pack --filename reshaped-test.tgz",
-		"release:source": "git archive -o reshaped-source-v$(jq -r .version package.json).zip HEAD . ':!.chromatic'",
-		"release:copy": "sh ./bin/copy-release.sh",
+		"release:source": "sh ./bin/release-source.sh",
+		"release:copy": "sh ./bin/release-copy.sh",
 		"chromatic": "chromatic -b build:chromatic --project-token=$(cat .chromatic)",
 		"test:vrt": "yarn chromatic",
 		"test:unit": "jest --config tools/jest/jest.config.js",
@@ -79,53 +79,53 @@
 		"defaults and not IE 11"
 	],
 	"devDependencies": {
-		"@size-limit/preset-big-lib": "8.2.6",
-		"@storybook/addon-a11y": "7.1.1",
-		"@storybook/react": "7.1.1",
-		"@storybook/react-vite": "7.1.1",
-		"@testing-library/jest-dom": "5.17.0",
+		"@size-limit/preset-big-lib": "9.0.0",
+		"@storybook/addon-a11y": "7.4.0",
+		"@storybook/react": "7.4.0",
+		"@storybook/react-vite": "7.4.0",
+		"@testing-library/jest-dom": "6.1.3",
 		"@testing-library/react": "14.0.0",
 		"@testing-library/user-event": "14.4.3",
 		"@types/events": "3.0.0",
-		"@types/jest": "29.5.3",
-		"@types/node": "20.4.8",
-		"@types/react": "18.2.18",
+		"@types/jest": "29.5.4",
+		"@types/node": "20.6.0",
+		"@types/react": "18.2.21",
 		"@types/react-dom": "18.2.7",
-		"@typescript-eslint/eslint-plugin": "6.2.1",
-		"@typescript-eslint/parser": "6.2.1",
+		"@typescript-eslint/eslint-plugin": "6.6.0",
+		"@typescript-eslint/parser": "6.6.0",
 		"@vitejs/plugin-react": "4.0.4",
-		"chromatic": "6.20.0",
-		"eslint": "8.46.0",
+		"chromatic": "7.1.0",
+		"eslint": "8.49.0",
 		"eslint-config-airbnb-typescript": "17.1.0",
-		"eslint-config-prettier": "8.10.0",
-		"eslint-plugin-import": "2.28.0",
+		"eslint-config-prettier": "9.0.0",
+		"eslint-plugin-import": "2.28.1",
 		"eslint-plugin-jsx-a11y": "6.7.1",
 		"eslint-plugin-prettier": "5.0.0",
-		"eslint-plugin-react": "7.33.1",
+		"eslint-plugin-react": "7.33.2",
 		"eslint-plugin-react-hooks": "4.6.0",
 		"identity-obj-proxy": "3.0.0",
-		"jest": "29.6.2",
-		"jest-environment-jsdom": "29.6.2",
+		"jest": "29.6.4",
+		"jest-environment-jsdom": "29.6.4",
 		"jest-matchmedia-mock": "1.1.0",
-		"lefthook": "1.4.8",
-		"postcss": "8.4.27",
+		"lefthook": "1.4.10",
+		"postcss": "8.4.29",
 		"postcss-cli": "10.1.0",
 		"postcss-each": "1.1.0",
 		"postcss-import": "15.1.0",
 		"postcss-nested": "6.0.1",
-		"prettier": "3.0.1",
+		"prettier": "3.0.3",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
-		"resolve-tspaths": "0.8.14",
-		"size-limit": "8.2.6",
-		"storybook": "7.1.1",
-		"stylelint": "15.10.2",
+		"resolve-tspaths": "0.8.15",
+		"size-limit": "9.0.0",
+		"storybook": "7.4.0",
+		"stylelint": "15.10.3",
 		"stylelint-config-prettier": "9.0.5",
 		"stylelint-config-standard": "34.0.0",
 		"ts-jest": "29.1.1",
-		"typescript": "5.1.6",
-		"vite": "4.4.8",
-		"vite-tsconfig-paths": "4.2.0"
+		"typescript": "5.2.2",
+		"vite": "4.4.9",
+		"vite-tsconfig-paths": "4.2.1"
 	},
 	"peerDependencies": {
 		"postcss": "^8.0.0",
@@ -133,12 +133,15 @@
 		"react-dom": "^18.0.0"
 	},
 	"dependencies": {
-		"autoprefixer": "10.4.14",
+		"autoprefixer": "10.4.15",
 		"chalk": "4.1.2",
 		"commander": "11.0.0",
 		"cssnano": "6.0.1",
 		"postcss-custom-media": "8.0.2"
 	},
+	"resolutions": {
+		"jackspeak": "2.1.1"
+	},
 	"size-limit": [
 		{
 			"name": "JS",
@@ -149,6 +152,11 @@
 			"name": "CSS",
 			"path": "dist/bundle.css",
 			"webpack": false
+		},
+		{
+			"name": "JS Theming engine",
+			"path": "dist/themes/index.js",
+			"webpack": true
 		}
 	],
 	"engines": {

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

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const behavior: () => React.JSX.Element;

package/themes/_generator/tests/themes.stories.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import Button from "../../../components/Button/index.js";
+import Theme from "../../../components/Theme/index.js";
+import { getThemeCSS } from "../../index.js";
+export default { title: "Themes" };
+const css = getThemeCSS("green", {
+    color: {
+        backgroundPrimary: { hex: "#1abc9c", hexDark: "#16a085" },
+        backgroundPrimaryHighlighted: { hex: "#16a085", hexDark: "#1abc9c" },
+    },
+});
+const css2 = getThemeCSS("peach", {
+    color: {
+        backgroundPrimary: { hex: "#ffbe76" },
+        backgroundPrimaryHighlighted: { hex: "#ffbe76" },
+    },
+});
+export const behavior = () => (<Example>
+		<Example.Item title="custom runtime theme">
+			<style>{css}</style>
+			<Theme name="green">
+				<Button color="primary">Primary button</Button>
+			</Theme>
+		</Example.Item>
+		<Example.Item title="on colors generation">
+			<style>{css2}</style>
+			<Theme name="peach">
+				<Button color="primary">Primary button</Button>
+			</Theme>
+		</Example.Item>
+	</Example>);

package/{cli/theming → themes/_generator}/tokens/color/color.transforms.d.ts

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

package/{cli/theming → themes/_generator}/tokens/duration/duration.transforms.d.ts

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

package/{cli/theming → themes/_generator}/tokens/easing/easing.transforms.d.ts

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

package/{cli/theming → themes/_generator}/tokens/font/font.transforms.d.ts

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

package/{cli/theming → themes/_generator}/tokens/fontFamily/fontFamily.transforms.d.ts

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

package/{cli/theming → themes/_generator}/tokens/fontWeight/fontWeight.transforms.d.ts

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

package/{cli/theming → themes/_generator}/tokens/shadow/shadow.transforms.d.ts

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

package/{cli/theming → themes/_generator}/tokens/shadow/shadow.transforms.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const color_1 = require("../../../utilities/color");
+const color_1 = require("../../../../utilities/color");
 const transformedToken = (name, token, theme) => [
     {
         name,

package/{cli/theming → themes/_generator}/tokens/unit/unit.transforms.d.ts

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

package/{cli/theming → themes/_generator}/tokens/viewport/viewport.transforms.d.ts

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

package/themes/_generator/transform.d.ts

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

package/themes/_generator/transform.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const transforms = __importStar(require("./tokens/transforms"));
+const css_1 = require("./utilities/css");
+const generateBackgroundColors_1 = __importDefault(require("./utilities/generateBackgroundColors"));
+const generateUnits_1 = __importDefault(require("./utilities/generateUnits"));
+const transform = (name, definition, options) => {
+    const { isPrivate, isFragment, themeOptions } = options;
+    (0, generateBackgroundColors_1.default)(definition, themeOptions);
+    (0, generateUnits_1.default)(definition);
+    const transformedStorage = {
+        variable: [],
+        media: [],
+    };
+    Object.entries(definition).forEach(([tokenType, tokenValues]) => {
+        if (!tokenValues)
+            return;
+        const transform = transforms.css[tokenType];
+        Object.entries(tokenValues).forEach(([tokenName, token]) => {
+            const transformedTokens = transform(tokenName, token, definition);
+            transformedTokens.forEach((transformedToken) => {
+                transformedStorage[transformedToken.type].push(transformedToken);
+            });
+        });
+    });
+    return {
+        variables: (0, css_1.variablesTemplate)(name, transformedStorage.variable),
+        media: isPrivate && !isFragment ? (0, css_1.mediaTemplate)(transformedStorage.media) : undefined,
+    };
+};
+exports.default = transform;

package/{cli/theming → themes/_generator}/types.d.ts

@@ -5,10 +5,12 @@ export type PartialDeep<T> = T extends Primitive ? Partial<T> : {
 };
 export type PublicOptions = {
     isPrivate?: boolean;
-    outputPath: string;
     themeOptions?: ReshapedConfig["themeOptions"];
 };
 export type PrivateOptions = PublicOptions & {
     isFragment?: boolean;
 };
+export type CLIOptions = PrivateOptions & {
+    outputPath: string;
+};
 export {};

package/{cli/theming → themes/_generator}/utilities/css.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.mediaTemplate = exports.variablesTemplate = exports.createMedia = exports.createVariable = exports.getVariableName = void 0;
-const string_1 = require("../../utilities/string");
+const string_1 = require("../../../utilities/string");
 const getVariableName = (tokenName, tokenType) => {
     const value = ["rs", tokenType && (0, string_1.camelToKebab)(tokenType), (0, string_1.camelToKebab)(tokenName)]
         .filter(Boolean)
@@ -35,6 +35,8 @@ const variablesTemplate = (themeName, tokens) => {
         const selector = type === "root"
             ? `[data-rs-theme="${themeName}"][data-rs-color-mode="light"], [data-rs-theme="${themeName}"][data-rs-color-mode="dark"]`
             : `[data-rs-theme="${themeName}"][data-rs-color-mode="${type}"]`;
+        if (!tokens.length)
+            return;
         code += `
 			${selector} {
 					${tokens.map((token) => (0, exports.createVariable)(token)).join("\n")}

package/themes/_generator/utilities/generateBackgroundColors.d.ts

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

package/themes/_generator/utilities/generateBackgroundColors.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const color_1 = require("../../../utilities/color");
+const string_1 = require("../../../utilities/string");
+const generateBackgroundColors = (definition, themeOptions) => {
+    if (!definition.color)
+        return;
+    Object.keys(definition.color).forEach((tokenName) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const bgToken = (_a = definition.color) === null || _a === void 0 ? void 0 : _a[tokenName];
+        const generatedForegroundName = `on${(0, string_1.capitalize)(tokenName)}`;
+        const generatedRGBName = `rgb${(0, string_1.capitalize)(tokenName)}`;
+        const generateOnColorsFor = [
+            "backgroundNeutral",
+            "backgroundPrimary",
+            "backgroundCritical",
+            "backgroundPositive",
+            ...((themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.generateOnColorsFor) || []),
+        ];
+        const needsDynamicForeground = generateOnColorsFor.includes(tokenName);
+        const needsRGB = tokenName.startsWith("background") ||
+            tokenName.endsWith("black") ||
+            tokenName.endsWith("white");
+        if (!bgToken)
+            return;
+        if (needsDynamicForeground) {
+            const hex = (0, color_1.getOnColor)({
+                bgHexColor: bgToken.hex,
+                mode: "light",
+                lightHexColor: (_c = (_b = definition === null || definition === void 0 ? void 0 : definition.color) === null || _b === void 0 ? void 0 : _b.white) === null || _c === void 0 ? void 0 : _c.hex,
+                darkHexColor: (_e = (_d = definition === null || definition === void 0 ? void 0 : definition.color) === null || _d === void 0 ? void 0 : _d.black) === null || _e === void 0 ? void 0 : _e.hex,
+            });
+            const hexDark = (0, color_1.getOnColor)({
+                bgHexColor: bgToken.hexDark || bgToken.hex,
+                mode: "dark",
+                lightHexColor: (_g = (_f = definition === null || definition === void 0 ? void 0 : definition.color) === null || _f === void 0 ? void 0 : _f.white) === null || _g === void 0 ? void 0 : _g.hex,
+                darkHexColor: (_j = (_h = definition === null || definition === void 0 ? void 0 : definition.color) === null || _h === void 0 ? void 0 : _h.black) === null || _j === void 0 ? void 0 : _j.hex,
+            });
+            // eslint-disable-next-line no-param-reassign
+            definition.color[generatedForegroundName] = {
+                hex,
+                hexDark: hex !== hexDark ? hexDark : undefined,
+            };
+        }
+        if (needsRGB) {
+            // eslint-disable-next-line no-param-reassign
+            definition.color[generatedRGBName] = {
+                hex: (0, color_1.hexToRgbString)(bgToken.hex),
+                hexDark: bgToken.hexDark && (0, color_1.hexToRgbString)(bgToken.hexDark),
+            };
+        }
+    });
+};
+exports.default = generateBackgroundColors;

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

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

package/themes/_generator/utilities/generateUnits.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const generateUnits = (definition) => {
+    var _a, _b;
+    const baseValue = (_b = (_a = definition.unit) === null || _a === void 0 ? void 0 : _a.base) === null || _b === void 0 ? void 0 : _b.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}`;
+        // eslint-disable-next-line no-param-reassign
+        definition.unit[generatedName] = {
+            px: baseValue * i,
+        };
+    }
+};
+exports.default = generateUnits;

package/{cli/theming → themes/_generator}/utilities/mergeDeep.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const isObject = (item) => {
     return item && typeof item === "object" && !Array.isArray(item);
 };
@@ -21,4 +19,4 @@ const mergeDeep = (target, ...sources) => {
     }
     return mergeDeep(target, ...sources);
 };
-exports.default = mergeDeep;
+export default mergeDeep;

package/{cli/theming → themes/_generator}/utilities/resolveTokenReference.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const resolveTokenReference = (theme, tokenType, ref) => {
     const tokenGroup = theme[tokenType];
     let referencedToken = null;
@@ -13,4 +11,4 @@ const resolveTokenReference = (theme, tokenType, ref) => {
         throw new Error(`Referenced token not found for: ${ref}`);
     return referencedToken;
 };
-exports.default = resolveTokenReference;
+export default resolveTokenReference;

package/themes/index.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./_generator/types";
+import type { FullThemeDefinition } from "./_generator/tokens/types";
+export declare const getThemeCSS: (name: string, definition: T.PartialDeep<FullThemeDefinition>) => string;