reshaped 3.4.1 → 3.4.3

package/dist/hooks/tests/useOnClickOutside.stories.js

@@ -0,0 +1,111 @@
+import React from "react";
+import { expect, fn, userEvent } from "@storybook/test";
+import Button from "../../components/Button/index.js";
+import useOnClickOutside from "../useOnClickOutside.js";
+import View from "../../components/View/index.js";
+export default {
+    title: "Hooks/useOnClickOutside",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const base = {
+    name: "base",
+    args: {
+        handleOutsideClick: fn(),
+    },
+    render: (args) => {
+        const ref = React.useRef(null);
+        const [target, setTarget] = React.useState(null);
+        useOnClickOutside([ref], () => {
+            args.handleOutsideClick();
+            setTarget("outside");
+        });
+        return (<View gap={4} align="start">
+				<Button attributes={{ ref }} onClick={() => setTarget("inside")}>
+					Trigger
+				</Button>
+				{target && `Clicked ${target}`}
+			</View>);
+    },
+    play: async ({ canvas, args }) => {
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        expect(args.handleOutsideClick).not.toHaveBeenCalled();
+        await userEvent.click(document.body);
+        expect(args.handleOutsideClick).toHaveBeenCalledTimes(1);
+        expect(args.handleOutsideClick).toHaveBeenCalledWith();
+    },
+};
+export const refs = {
+    name: "multiple refs",
+    args: {
+        handleOutsideClick: fn(),
+    },
+    render: (args) => {
+        const ref = React.useRef(null);
+        const ref2 = React.useRef(null);
+        useOnClickOutside([ref, ref2], () => {
+            args.handleOutsideClick();
+        });
+        return (<View gap={4} align="start">
+				<Button attributes={{ ref }}>Trigger</Button>
+				<Button attributes={{ ref: ref2 }}>Trigger 2</Button>
+			</View>);
+    },
+    play: async ({ canvas, args }) => {
+        const [button, button2] = canvas.getAllByRole("button");
+        await userEvent.click(button);
+        expect(args.handleOutsideClick).not.toHaveBeenCalled();
+        await userEvent.click(button2);
+        expect(args.handleOutsideClick).not.toHaveBeenCalled();
+        await userEvent.click(document.body);
+        expect(args.handleOutsideClick).toHaveBeenCalledTimes(1);
+        expect(args.handleOutsideClick).toHaveBeenCalledWith();
+    },
+};
+export const disabled = {
+    name: "disabled",
+    args: {
+        handleOutsideClick: fn(),
+    },
+    render: (args) => {
+        const ref = React.useRef(null);
+        useOnClickOutside([ref], () => {
+            args.handleOutsideClick();
+        }, {
+            disabled: true,
+        });
+        return (<View gap={4} align="start">
+				<Button attributes={{ ref }}>Trigger</Button>
+			</View>);
+    },
+    play: async ({ args }) => {
+        await userEvent.click(document.body);
+        expect(args.handleOutsideClick).not.toHaveBeenCalled();
+    },
+};
+export const deps = {
+    name: "test: handler uses latest state",
+    args: {
+        handleOutsideClick: fn(),
+    },
+    render: (args) => {
+        const ref = React.useRef(null);
+        const [count, setCount] = React.useState(0);
+        useOnClickOutside([ref], () => {
+            args.handleOutsideClick({ count });
+        });
+        return (<Button attributes={{ ref }} onClick={() => setCount((prev) => prev + 1)}>
+				Trigger
+			</Button>);
+    },
+    play: async ({ canvas, args }) => {
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(document.body);
+        expect(args.handleOutsideClick).toHaveBeenLastCalledWith({ count: 0 });
+        await userEvent.click(button);
+        await userEvent.click(document.body);
+        expect(args.handleOutsideClick).toHaveBeenLastCalledWith({ count: 1 });
+    },
+};

package/dist/hooks/tests/useRTL.stories.d.ts

@@ -1,6 +1,11 @@
 import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
 };
 export default _default;
 export declare const setRTL: StoryObj;

package/dist/hooks/tests/useRTL.stories.js

@@ -1,8 +1,12 @@
 import React from "react";
-import { expect, waitFor } from "@storybook/test";
-import Reshaped from "../../components/Reshaped/index.js";
+import { expect } from "@storybook/test";
 import useRTL from "../useRTL.js";
-export default { title: "Hooks/useRTL" };
+export default {
+    title: "Hooks/useRTL",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
 const Component = () => {
     const [rtl, setRTL] = useRTL();
     React.useEffect(() => {
@@ -12,14 +16,8 @@ const Component = () => {
 };
 export const setRTL = {
     name: "setRTL",
-    render: () => {
-        return (<Reshaped theme="reshaped">
-				<Component />
-			</Reshaped>);
-    },
+    render: () => <Component />,
     play: async () => {
-        waitFor(() => {
-            expect(document.documentElement).toHaveAttribute("dir", "rtl");
-        });
+        expect(document.documentElement).toHaveAttribute("dir", "rtl");
     },
 };

package/dist/hooks/tests/useResponsiveClientValue.stories.d.ts

@@ -1,5 +1,10 @@
 declare const _default: {
     title: string;
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
 };
 export default _default;
 export declare const base: {

package/dist/hooks/tests/useResponsiveClientValue.stories.js

@@ -1,6 +1,11 @@
 import useResponsiveClientValue from "../useResponsiveClientValue.js";
 import View from "../../components/View/index.js";
-export default { title: "Hooks/useResponsiveClientValue" };
+export default {
+    title: "Hooks/useResponsiveClientValue",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
 export const base = {
     name: "base",
     render: () => {

package/dist/hooks/tests/useScrollLock.stories.d.ts

@@ -1,6 +1,13 @@
 import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
 };
 export default _default;
 export declare const base: StoryObj;
+export declare const origin: StoryObj;
+export declare const container: StoryObj;

package/dist/hooks/tests/useScrollLock.stories.js

@@ -2,7 +2,13 @@ import React from "react";
 import { expect, userEvent } from "@storybook/test";
 import Button from "../../components/Button/index.js";
 import useScrollLock from "../useScrollLock.js";
-export default { title: "Hooks/useScrollLock" };
+import View from "../../components/View/index.js";
+export default {
+    title: "Hooks/useScrollLock",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
 export const base = {
     name: "base",
     render: () => {
@@ -20,3 +26,43 @@ export const base = {
         expect(document.body).not.toHaveStyle("overflow: hidden");
     },
 };
+export const origin = {
+    name: "originRef",
+    render: () => {
+        const originRef = React.useRef(null);
+        const { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ originRef });
+        return (<View overflow="auto" height={25} attributes={{ ref: originRef, "data-testid": "root" }}>
+				<View height={50} padding={4} backgroundColor="neutral-faded" borderRadius="medium">
+					<Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>
+				</View>
+			</View>);
+    },
+    play: async ({ canvas }) => {
+        const button = canvas.getAllByRole("button")[0];
+        const root = canvas.getByTestId("root");
+        await userEvent.click(button);
+        expect(document.body).not.toHaveStyle("overflow: hidden");
+        expect(root).toHaveStyle("overflow: hidden");
+        await userEvent.click(button);
+        expect(root).not.toHaveStyle("overflow: hidden");
+    },
+};
+export const container = {
+    name: "containerRef",
+    render: () => {
+        const containerRef = React.useRef(null);
+        const { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ containerRef });
+        return (<View height={25} attributes={{ ref: containerRef, "data-testid": "root" }}>
+				<Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>
+			</View>);
+    },
+    play: async ({ canvas }) => {
+        const button = canvas.getAllByRole("button")[0];
+        const root = canvas.getByTestId("root");
+        await userEvent.click(button);
+        expect(document.body).not.toHaveStyle("overflow: hidden");
+        expect(root).toHaveStyle("overflow: hidden");
+        await userEvent.click(button);
+        expect(root).not.toHaveStyle("overflow: hidden");
+    },
+};

package/dist/hooks/tests/useToggle.stories.d.ts

@@ -1,6 +1,11 @@
 import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
 };
 export default _default;
 export declare const toggle: StoryObj;

package/dist/hooks/tests/useToggle.stories.js

@@ -2,7 +2,12 @@ import React from "react";
 import { expect, userEvent } from "@storybook/test";
 import Button from "../../components/Button/index.js";
 import useToggle from "../useToggle.js";
-export default { title: "Hooks/useToggle" };
+export default {
+    title: "Hooks/useToggle",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
 export const toggle = {
     name: "toggle",
     render: () => {

package/dist/hooks/useHandlerRef.js

@@ -10,7 +10,7 @@ const useHandlerRef = (cb) => {
     // Update the callback on every render, keeping the ref instance the same
     useIsomorphicLayoutEffect(() => {
         ref.current = cb;
-    });
+    }, [cb]);
     return ref;
 };
 export default useHandlerRef;

package/dist/hooks/{_private/useOnClickOutside.d.ts → useOnClickOutside.d.ts}

@@ -1,3 +1,5 @@
 import React from "react";
-declare const useOnClickOutside: (refs: React.RefObject<HTMLElement | null>[], handler: (event: Event) => void, deps: any[]) => void;
+declare const useOnClickOutside: (refs: React.RefObject<HTMLElement | null>[], handler: (event: Event) => void, options?: {
+    disabled?: boolean;
+}) => void;
 export default useOnClickOutside;

package/dist/hooks/{_private/useOnClickOutside.js → useOnClickOutside.js}

@@ -1,6 +1,7 @@
 import React from "react";
-import useHandlerRef from "../useHandlerRef.js";
-const useOnClickOutside = (refs, handler, deps) => {
+import useHandlerRef from "./useHandlerRef.js";
+const useOnClickOutside = (refs, handler, options) => {
+    const { disabled } = options || {};
     const handlerRef = useHandlerRef(handler);
     /**
      * We're checking the element position in the DOM on mousedown to make sure
@@ -9,6 +10,10 @@ const useOnClickOutside = (refs, handler, deps) => {
      */
     const isMouseDownInsideRef = React.useRef(false);
     React.useEffect(() => {
+        /**
+         * Not checking for disabled here since some components can enable the hook
+         * after it was clicked
+         */
         const handleMouseDown = (event) => {
             isMouseDownInsideRef.current = false;
             const clickedEl = event.composedPath()[0];
@@ -31,16 +36,20 @@ const useOnClickOutside = (refs, handler, deps) => {
     React.useEffect(() => {
         if (!handlerRef.current)
             return;
+        if (disabled)
+            return;
         const handleClick = (event) => {
+            if (!event.pointerType)
+                return;
             if (event.button === 2)
                 return;
             if (isMouseDownInsideRef.current)
                 return;
             handlerRef.current?.(event);
         };
-        document.addEventListener("click", handleClick);
+        document.addEventListener("click", handleClick, { passive: true });
         return () => document.removeEventListener("click", handleClick);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [handlerRef, ...refs, ...deps]);
+    }, [handlerRef, disabled, ...refs]);
 };
 export default useOnClickOutside;

package/dist/hooks/useResponsiveClientValue.d.ts

@@ -1,3 +1,3 @@
 import type * as G from "../types/global";
-declare const useResponsiveClientValue: <T extends unknown>(value: G.Responsive<T>) => T | undefined;
+declare const useResponsiveClientValue: <T>(value: G.Responsive<T>) => T | undefined;
 export default useResponsiveClientValue;

package/dist/hooks/useScrollLock.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-declare const useScrollLock: (props?: {
+declare const useScrollLock: (options?: {
     containerRef?: React.RefObject<HTMLElement | null>;
     originRef?: React.RefObject<HTMLElement | null>;
 }) => {

package/dist/hooks/useScrollLock.js

@@ -1,8 +1,8 @@
 "use client";
 import React from "react";
 import { lockScroll, unlockScroll } from "../utilities/scroll/index.js";
-const useScrollLock = (props) => {
-    const { containerRef, originRef } = props || {};
+const useScrollLock = (options) => {
+    const { containerRef, originRef } = options || {};
     const [locked, setLocked] = React.useState(false);
     const handleLockScroll = React.useCallback(() => {
         lockScroll({

package/dist/index.d.ts

@@ -119,19 +119,21 @@ export type { ViewProps, ViewItemProps } from "./components/View";
  * Hooks
  */
 export { useFormControl } from "./components/FormControl";
-export { default as Theme, useTheme } from "./components/Theme";
-export type { ThemeProps } from "./components/Theme";
-export { default as useScrollLock } from "./hooks/useScrollLock";
-export { default as useToggle } from "./hooks/useToggle";
-export { default as useRTL } from "./hooks/useRTL";
-export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect";
+export { default as Theme, useTheme, type ThemeProps } from "./components/Theme";
+export { default as useHandlerRef } from "./hooks/useHandlerRef";
 export { default as useHotkeys } from "./hooks/useHotkeys";
+export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect";
 export { default as useKeyboardMode } from "./hooks/useKeyboardMode";
+export { default as useOnClickOutside } from "./hooks/useOnClickOutside";
 export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue";
+export { default as useRTL } from "./hooks/useRTL";
+export { default as useScrollLock } from "./hooks/useScrollLock";
+export { default as useToggle } from "./hooks/useToggle";
 /**
  * Utilities
  */
 export { classNames, responsiveClassNames, responsivePropDependency } from "./utilities/helpers";
+export { TrapFocus } from "./utilities/a11y";
 /**
  * Types
  */

package/dist/index.js

@@ -63,17 +63,20 @@ export { default as View } from "./components/View/index.js";
  */
 export { useFormControl } from "./components/FormControl/index.js";
 export { default as Theme, useTheme } from "./components/Theme/index.js";
-export { default as useScrollLock } from "./hooks/useScrollLock.js";
-export { default as useToggle } from "./hooks/useToggle.js";
-export { default as useRTL } from "./hooks/useRTL.js";
-export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect.js";
+export { default as useHandlerRef } from "./hooks/useHandlerRef.js";
 export { default as useHotkeys } from "./hooks/useHotkeys.js";
+export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect.js";
 export { default as useKeyboardMode } from "./hooks/useKeyboardMode.js";
+export { default as useOnClickOutside } from "./hooks/useOnClickOutside.js";
 export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue.js";
+export { default as useRTL } from "./hooks/useRTL.js";
+export { default as useScrollLock } from "./hooks/useScrollLock.js";
+export { default as useToggle } from "./hooks/useToggle.js";
 /**
  * Utilities
  */
 export { classNames, responsiveClassNames, responsivePropDependency } from "./utilities/helpers.js";
+export { TrapFocus } from "./utilities/a11y/index.js";
 /**
  * Dev utilities
  */

package/dist/tests/ShadowDOM.stories.js

@@ -9,7 +9,7 @@ import Select from "../components/Select/index.js";
 import Button from "../components/Button/index.js";
 import Tooltip from "../components/Tooltip/index.js";
 export default {
-    title: "Meta/ShadowDOM",
+    title: "Internal/ShadowDOM",
 };
 const getStylesData = () => {
     const sourceStylesContainer = document.head;

package/dist/themes/_generator/definitions/figma.d.ts

@@ -1,3 +1,3 @@
 import type { ThemeDefinition } from "../tokens/types";
-declare const theme: ThemeDefinition;
+declare const theme: Partial<ThemeDefinition>;
 export default theme;

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

@@ -99,7 +99,6 @@ const theme = {
         radiusMedium: { px: 4 },
         radiusLarge: { px: 4 },
     },
-    // @ts-ignore
     color: {
         foregroundNeutral: { hex: "#191919", hexDark: "#FFFFFF" },
         foregroundNeutralFaded: { hex: "#474747", hexDark: "#B2B2B2" },
@@ -107,20 +106,19 @@ const theme = {
         foregroundPrimary: { hex: "#007BE5", hexDark: "#7CC4F8" },
         foregroundPositive: { hex: "#009951", hexDark: "#79D297" },
         foregroundCritical: { hex: "#DC3412", hexDark: "#FCA397" },
+        foregroundWarning: { hex: "#7b6305", hexDark: "#b4920c" },
         backgroundNeutral: { hex: "#DFE2EA", hexDark: "#444444" },
         backgroundNeutralFaded: { hex: "#F5F5F5", hexDark: "#383838" },
-        backgroundNeutralHighlighted: { hex: "#D4D8E3", hexDark: "#525252" },
         backgroundDisabled: { hex: "#e4e4e4", hexDark: "#474747" },
         backgroundDisabledFaded: { hex: "#F5F5F5", hexDark: "#3A3A3A" },
         backgroundPrimary: { hex: "#0D99FF", hexDark: "#0C8CE9" },
-        backgroundPrimaryHighlighted: { hex: "#007BE5", hexDark: "#0A6DC2" },
         backgroundPrimaryFaded: { hex: "#E5F4FF", hexDark: "#394360" },
         backgroundPositive: { hex: "#14AE5C", hexDark: "#198F51" },
         backgroundPositiveFaded: { hex: "#DAECDF", hexDark: "#3d5749" },
-        backgroundPositiveHighlighted: { hex: "#009951", hexDark: "#078348" },
         backgroundCritical: { hex: "#F24822", hexDark: "#E03E1A" },
         backgroundCriticalFaded: { hex: "#FFE2E0", hexDark: "#60332A" },
-        backgroundCriticalHighlighted: { hex: "#DC3412", hexDark: "#C4381C" },
+        backgroundWarning: { hex: "#facc15", hexDark: "#f1c512" },
+        backgroundWarningFaded: { hex: "#fffae9", hexDark: "#2c271f" },
         borderNeutral: { hex: "#E6E6E6", hexDark: "#444444" },
         borderNeutralFaded: { hex: "#E6E6E6", hexDark: "#444444" },
         borderDisabled: { hex: "#E6E6E6", hexDark: "#3E3E3E" },
@@ -130,12 +128,15 @@ const theme = {
         borderPositiveFaded: { hex: "#BBDDC6", hexDark: "#086338" },
         borderCritical: { hex: "#DC3412", hexDark: "#FCA397" },
         borderCriticalFaded: { hex: "#FFC7C2", hexDark: "#803226" },
+        borderWarning: { hex: "#cfa90f", hexDark: "#b4920a" },
+        borderWarningFaded: { hex: "#ece2c4", hexDark: "#453c1e" },
         backgroundPage: { hex: "#FFFFFF", hexDark: "#2C2C2C" },
         backgroundPageFaded: { hex: "#FAFAFA", hexDark: "#1E1E1E" },
         backgroundElevationBase: { hex: "#FFFFFF", hexDark: "#2C2C2C" },
         backgroundElevationRaised: { hex: "#FFFFFF", hexDark: "#2C2C2C" },
         backgroundElevationOverlay: { hex: "#FFFFFF", hexDark: "#2C2C2C" },
         onBackgroundPrimary: { hex: "#FFFFFF" },
+        brand: { hex: "#0D99FF" },
         black: { hex: "#000000" },
         white: { hex: "#FFFFFF" },
     },

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

@@ -14,7 +14,7 @@ import Link from "../../../components/Link/index.js";
 import Text from "../../../components/Text/index.js";
 import { getThemeCSS, generateThemeColors, baseThemeDefinition } from "../../index.js";
 export default {
-    title: "Meta/Themes",
+    title: "Internal/Themes",
     parameters: {
         iframe: { url: "https://reshaped.so/docs/tokens/theming/runtime-theming" },
         a11y: {

package/dist/themes/_generator/utilities/color.js

@@ -309,17 +309,17 @@ const GREEN = 0.7152;
 const BLUE = 0.0722;
 const GAMMA = 2.4;
 function luminanceWCAG(r, g, b) {
-    var a = [r, g, b].map((v) => {
+    const a = [r, g, b].map((v) => {
         v /= 255;
         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) {
-    var lum1 = luminanceWCAG(...rgb1);
-    var lum2 = luminanceWCAG(...rgb2);
-    var brightest = Math.max(lum1, lum2);
-    var darkest = Math.min(lum1, lum2);
+    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) => {
@@ -340,7 +340,7 @@ function luminanceAPCA({ r, g, b }) {
 }
 function contrastAPCA(backgroundLuminance, textLuminance) {
     // Calculate the contrast based on APCA
-    let Lc = textLuminance - backgroundLuminance;
+    const Lc = textLuminance - backgroundLuminance;
     return Math.abs(Lc); // Return the absolute value of contrast
 }
 export const getOnColorAPCA = (args) => {
@@ -355,12 +355,12 @@ export const getOnColorAPCA = (args) => {
         b: (1 - bgAlpha) * baseColor.b + bgAlpha * bgColor.b,
     };
     // Calculate luminance for background and for white & black
-    let backgroundLuminance = luminanceAPCA({ r, g, b });
-    let whiteLuminance = luminanceAPCA({ r: 255, g: 255, b: 255 });
-    let blackLuminance = luminanceAPCA({ r: 0, g: 0, b: 0 });
+    const backgroundLuminance = luminanceAPCA({ r, g, b });
+    const whiteLuminance = luminanceAPCA({ r: 255, g: 255, b: 255 });
+    const blackLuminance = luminanceAPCA({ r: 0, g: 0, b: 0 });
     // Calculate contrast
-    let contrastWithWhite = contrastAPCA(backgroundLuminance, whiteLuminance);
-    let contrastWithBlack = contrastAPCA(backgroundLuminance, blackLuminance);
+    const contrastWithWhite = contrastAPCA(backgroundLuminance, whiteLuminance);
+    const contrastWithBlack = contrastAPCA(backgroundLuminance, blackLuminance);
     // Choose the color with higher contrast
     return contrastWithWhite > contrastWithBlack ? lightHexColor : darkHexColor;
 };

package/dist/themes/_generator/utilities/generateBackgroundColors.js

@@ -39,7 +39,6 @@ const generateBackgroundColors = (definition, themeOptions) => {
                 algorithm: themeOptions?.colorContrastAlgorithm,
                 ...onColorHexMap,
             });
-            // eslint-disable-next-line no-param-reassign
             definition.color[generatedForegroundName] = {
                 hex,
                 hexDark: hex !== hexDark ? hexDark : undefined,
@@ -48,7 +47,6 @@ const generateBackgroundColors = (definition, themeOptions) => {
         if (needsRGB) {
             const rgb = hexToRgb(bgToken.hex);
             const rgbDark = bgToken.hexDark && hexToRgb(bgToken.hexDark);
-            // eslint-disable-next-line no-param-reassign
             definition.color[generatedRGBName] = {
                 hex: `${rgb.r}, ${rgb.g}, ${rgb.b}`,
                 hexDark: rgbDark && `${rgbDark.r}, ${rgbDark.g}, ${rgbDark.b}`,

package/dist/themes/_generator/utilities/generateColors.js

@@ -2,7 +2,7 @@ import { parseHex, convertOklabToOkhsl, convertLrgbToOklab, convertRgbToLrgb, co
 const hexToOkHsl = (hex) => {
     const rgb = parseHex(hex);
     if (!rgb)
-        throw new Error(`[Reshaped] Can\'t generate rgb from ${hex} color`);
+        throw new Error(`[Reshaped] Can't generate rgb from ${hex} color`);
     const lrgb = convertRgbToLrgb(rgb);
     const oklab = convertLrgbToOklab(lrgb);
     const okhsl = convertOklabToOkhsl(oklab);

package/dist/themes/_generator/utilities/generateUnits.js

@@ -5,7 +5,6 @@ const generateUnits = (definition) => {
         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,
         };

package/dist/themes/_generator/utilities/mergeDeep.js

@@ -1,5 +1,5 @@
 const isObject = (item) => {
-    return item && typeof item === "object" && !Array.isArray(item);
+    return !!item && typeof item === "object" && !Array.isArray(item);
 };
 const mergeDeep = (target, ...sources) => {
     if (!sources.length)

package/dist/themes/_generator/utilities/resolveTokenReference.js

@@ -4,6 +4,8 @@ const resolveTokenReference = (theme, tokenType, ref) => {
     Object.keys(tokenGroup).forEach((tokenName) => {
         if (referencedToken)
             return;
+        // Relaxed runtime group resolving
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (tokenName === ref)
             referencedToken = tokenGroup[tokenName];
     });

package/dist/themes/figma/tailwind.css

@@ -1 +1 @@
-@theme{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--background-color-neutral-highlighted:var(--rs-color-background-neutral-highlighted);--background-color-primary-highlighted:var(--rs-color-background-primary-highlighted);--background-color-positive-highlighted:var(--rs-color-background-positive-highlighted);--background-color-critical-highlighted:var(--rs-color-background-critical-highlighted);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
+@theme{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}