reshaped 2.2.1 → 2.3.0

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.1",
+	"version": "2.3.0",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -79,53 +79,53 @@
 		"defaults and not IE 11"
 	],
 	"devDependencies": {
-		"@size-limit/preset-big-lib": "8.2.6",
-		"@storybook/addon-a11y": "7.2.1",
-		"@storybook/react": "7.2.1",
-		"@storybook/react-vite": "7.2.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": "9.0.0",
-		"eslint-plugin-import": "2.28.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.2.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;

package/themes/index.js

@@ -0,0 +1,5 @@
+import transform from "./_generator/transform.js";
+export const getThemeCSS = (name, definition) => {
+    const code = transform(name, definition, { isFragment: true });
+    return code.variables;
+};

package/types/config.d.ts

@@ -1,4 +1,4 @@
-import { PartialUserThemeDefinition } from "../cli/theming/tokens/types";
+import { PartialUserThemeDefinition } from "../themes/_generator/tokens/types";
 export type ReshapedConfig = {
     themes?: Record<string, PartialUserThemeDefinition>;
     themeFragments?: Record<string, PartialUserThemeDefinition>;

package/utilities/a11y.js

@@ -102,10 +102,19 @@ export const trapFocus = (() => {
         const isSelectionMenu = mode === "selection-menu";
         const isTabMode = isDialog || isContentMenu;
         const isArrowsMode = mode === "action-menu" || isSelectionMenu;
+        const focusable = getFocusableElements(root, includeTrigger ? triggerElement : undefined);
         let chainId;
+        // Re-focus on the first element if content has changed
+        const observer = new MutationObserver(() => {
+            const focusable = getFocusableElements(root, includeTrigger ? triggerElement : undefined);
+            if (!focusable.length)
+                return;
+            focusElement(focusable[0], mode);
+        });
         const release = (releaseOptions = {}) => {
             const { withoutFocusReturn } = releaseOptions;
             chain.removePreviousTill(chainId, (item) => document.body.contains(item.data.trigger));
+            observer.disconnect();
             if (triggerElement) {
                 triggerElement.focus({ preventScroll: withoutFocusReturn || !isKeyboardMode() });
             }
@@ -159,7 +168,9 @@ export const trapFocus = (() => {
             resetListeners();
         if (isDialog)
             srTrap = trapScreenReader(root);
-        const focusable = getFocusableElements(root, includeTrigger ? triggerElement : undefined);
+        document.addEventListener("keydown", handleKeyDown);
+        resetListeners = () => document.removeEventListener("keydown", handleKeyDown);
+        observer.observe(root, { childList: true, subtree: true });
         if (!focusable.length)
             return null;
         // Don't add back to the chain if we're traversing back
@@ -168,8 +179,6 @@ export const trapFocus = (() => {
             chainId = chain.add({ root, trigger: triggerElement, options });
             focusElement(focusable[0], mode);
         }
-        document.addEventListener("keydown", handleKeyDown);
-        resetListeners = () => document.removeEventListener("keydown", handleKeyDown);
         return release;
     };
 })();

package/{cli/utilities → utilities}/color.d.ts

@@ -1,4 +1,4 @@
-import { Name } from "../theming/tokens/color/color.types";
+import { Name } from "../themes/_generator/tokens/color/color.types";
 export declare const bgWithDynamicForeground: Name[];
 export declare const hexToRgb: (hex: string) => {
     r: number;

package/utilities/dom.d.ts

@@ -0,0 +1 @@
+export declare const getClosestScrollableParent: (el: HTMLElement | null) => HTMLElement;

package/utilities/dom.js

@@ -0,0 +1,9 @@
+export const getClosestScrollableParent = (el) => {
+    const overflowY = el && window.getComputedStyle(el).overflowY;
+    const isScrollable = overflowY === null || overflowY === void 0 ? void 0 : overflowY.includes("scroll");
+    if (el === document.body || !el)
+        return document.body;
+    if (isScrollable && el.scrollHeight > el.clientHeight)
+        return el;
+    return getClosestScrollableParent(el.parentElement);
+};

package/cli/utilities/tests/color.test.d.ts

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

package/cli/utilities/tests/color.test.js

@@ -1,63 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const color_1 = require("../color");
-describe("cli/utilities/color", () => {
-    test("returns white for black background", () => {
-        expect((0, color_1.getOnColor)({ bgHexColor: "#000000", mode: "light" })).toBe("#ffffff");
-    });
-    test("returns white for dark colored background", () => {
-        expect((0, color_1.getOnColor)({ bgHexColor: "#aa0000", mode: "light" })).toBe("#ffffff");
-    });
-    test("returns black for white background", () => {
-        expect((0, color_1.getOnColor)({ bgHexColor: "#ffffff", mode: "light" })).toBe("#000000");
-    });
-    test("returns white for light colored background", () => {
-        expect((0, color_1.getOnColor)({ bgHexColor: "#dedede", mode: "light" })).toBe("#000000");
-    });
-    /**
-     * 8-digit hex
-     */
-    test("returns black for dark background with alpha: 0", () => {
-        expect((0, color_1.getOnColor)({ bgHexColor: "#00000000", mode: "light" })).toBe("#000000");
-    });
-    test("returns black for light background with alpha: 0", () => {
-        expect((0, color_1.getOnColor)({ bgHexColor: "#ffffff00", mode: "light" })).toBe("#000000");
-    });
-    test("returns black for dark background with alpha: 25%", () => {
-        expect((0, color_1.getOnColor)({ bgHexColor: "#00000040", mode: "light" })).toBe("#000000");
-    });
-    test("returns white for dark background with alpha: 30%", () => {
-        expect((0, color_1.getOnColor)({ bgHexColor: "#0000004D", mode: "light" })).toBe("#ffffff");
-    });
-    /**
-     * Dark mode
-     */
-    test("returns black for white background in dark mode", () => {
-        expect((0, color_1.getOnColor)({ bgHexColor: "#ffffff", mode: "dark" })).toBe("#000000");
-    });
-    test("returns white for dark background with alpha: 25% in dark mode", () => {
-        expect((0, color_1.getOnColor)({ bgHexColor: "#00000040", mode: "dark" })).toBe("#ffffff");
-    });
-    test("returns white for dark background with alpha: 0 in dark mode", () => {
-        expect((0, color_1.getOnColor)({ bgHexColor: "#00000000", mode: "dark" })).toBe("#ffffff");
-    });
-    /**
-     * Custom resolved color
-     */
-    test("returns #999 for white background in dark mode", () => {
-        expect((0, color_1.getOnColor)({
-            bgHexColor: "#ffffff",
-            mode: "dark",
-            lightHexColor: "#eeeeee",
-            darkHexColor: "#999999",
-        })).toBe("#999999");
-    });
-    test("returns #eee for black background in dark mode", () => {
-        expect((0, color_1.getOnColor)({
-            bgHexColor: "#000000",
-            mode: "dark",
-            lightHexColor: "#eeeeee",
-            darkHexColor: "#999999",
-        })).toBe("#eeeeee");
-    });
-});