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

package/dist/cjs/types/config.d.ts

@@ -1,14 +1,18 @@
-import type { PartialThemeDefinition, ColorHue } from "../themes/_generator/tokens/types";
+import type { PassedThemeDefinition } from "../themes/_generator/tokens/types";
+import type { HexColor, Hue, OklchColor } from "../themes/_generator/tokens/color/color.types";
 export type ReshapedConfig = {
-    themes?: Record<string, PartialThemeDefinition>;
-    themeFragments?: Record<string, PartialThemeDefinition>;
+    themes?: Record<string, PassedThemeDefinition>;
+    themeFragments?: Record<string, PassedThemeDefinition>;
     themeOptions?: {
-        generateOnColorsFor?: string[];
         colorContrastAlgorithm?: "wcag" | "apca";
+        generateOnColorsFor?: string[];
         onColorValues?: {
-            [key in ColorHue]?: {
-                hexDark: string;
-                hexLight: string;
+            [key in Hue]?: {
+                hexDark: HexColor;
+                hexLight: HexColor;
+            } | {
+                oklchDark: OklchColor;
+                oklchLight: OklchColor;
             };
         };
     };

package/dist/cli/theming/index.d.ts

@@ -1,4 +1,4 @@
-import type { PartialThemeDefinition } from "../../themes/_generator/tokens/types";
+import type { PassedThemeDefinition } from "../../themes/_generator/tokens/types";
 import type * as T from "../../themes/_generator/types";
-export declare const addThemeFragment: (name: string, definition: PartialThemeDefinition, options: T.CLIOptions) => void;
-export declare const addTheme: (name: string, definition: PartialThemeDefinition, options: T.CLIOptions) => void;
+export declare const addThemeFragment: (name: string, definition: PassedThemeDefinition, options: T.CLIOptions) => void;
+export declare const addTheme: (name: string, definition: PassedThemeDefinition, options: T.CLIOptions) => void;

package/dist/cli/theming/index.js

@@ -17,8 +17,8 @@ const transformDefinition = (name, definition, options) => {
     const themeJsonPath = path.resolve(themeFolderPath, "theme.json");
     fs.mkdirSync(themeFolderPath, { recursive: true });
     fs.writeFileSync(themePath, code.variables);
-    fs.writeFileSync(themeJsonPath, JSON.stringify(definition));
-    fs.writeFileSync(twPath, transformToTailwind(definition));
+    fs.writeFileSync(themeJsonPath, JSON.stringify(code.theme));
+    fs.writeFileSync(twPath, transformToTailwind(code.theme));
     if (code.media)
         fs.writeFileSync(themeMediaPath, code.media);
     const logOutput = `Compiled ${chalk.bold(name)} theme${isFragment ? " fragment" : ""}`;

package/dist/cli/theming/tailwind.d.ts

@@ -1,3 +1,2 @@
-import type { FullThemeDefinition } from "../../themes/_generator/tokens/types";
-import type * as T from "../../themes/_generator/types";
-export declare const transformToTailwind: (theme?: T.PartialDeep<FullThemeDefinition>) => string;
+import type { GeneratedThemeDefinition } from "../../themes/_generator/tokens/types";
+export declare const transformToTailwind: (theme?: GeneratedThemeDefinition) => string;

package/dist/components/Avatar/Avatar.module.css

@@ -1 +1 @@
-.root{align-items:center;aspect-ratio:1;display:flex;font-size:calc(var(--rs-h) / 3);font-weight:700;justify-content:center;line-height:100%}.img{border-radius:inherit;height:100%;object-fit:cover;width:100%}.--variant-faded.--color-neutral{color:var(--rs-color-foreground-neutral)}.--variant-faded.--color-critical{color:var(--rs-color-foreground-critical)}.--variant-faded.--color-positive{color:var(--rs-color-foreground-positive)}.--variant-faded.--color-warning{color:var(--rs-color-foreground-warning)}.--variant-faded.--color-primary{color:var(--rs-color-foreground-primary)}
+.root{align-items:center;aspect-ratio:1;display:flex;font-size:calc(var(--rs-h) / 3);font-weight:var(--rs-font-weight-bold);justify-content:center;line-height:100%}.img{border-radius:inherit;height:100%;object-fit:cover;width:100%}.--variant-faded.--color-neutral{color:var(--rs-color-foreground-neutral)}.--variant-faded.--color-critical{color:var(--rs-color-foreground-critical)}.--variant-faded.--color-positive{color:var(--rs-color-foreground-positive)}.--variant-faded.--color-warning{color:var(--rs-color-foreground-warning)}.--variant-faded.--color-primary{color:var(--rs-color-foreground-primary)}

package/dist/components/FormControl/FormControl.context.d.ts

@@ -134,7 +134,7 @@ export declare const useFormControl: () => {
         onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined;
         onChange?: React.FormEventHandler<HTMLElement> | undefined;
         onChangeCapture?: React.FormEventHandler<HTMLElement> | undefined;
-        onBeforeInput?: React.FormEventHandler<HTMLElement> | undefined;
+        onBeforeInput?: React.InputEventHandler<HTMLElement> | undefined;
         onBeforeInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
         onInput?: React.FormEventHandler<HTMLElement> | undefined;
         onInputCapture?: React.FormEventHandler<HTMLElement> | undefined;

package/dist/components/Reshaped/Reshaped.js

@@ -16,11 +16,11 @@ const ReshapedInner = (props) => {
     return (_jsx(SingletonKeyboardModeProvider, { children: _jsx(SingletonEnvironmentContext.Provider, { value: { rtl: rtlState, defaultViewport }, children: _jsx(SingletonHotkeysProvider, { children: _jsx(ToastProvider, { options: toastOptions, children: children }) }) }) }));
 };
 const Reshaped = (props) => {
-    const { theme, defaultTheme = "reshaped", defaultColorMode, scoped, className } = props;
+    const { theme, defaultTheme = "reshaped", colorMode, defaultColorMode, scoped, className, } = props;
     const rootClassNames = classNames(s.root, className);
     const scopeRef = React.useRef(null);
     const parentGlobalColorMode = useGlobalColorMode();
-    return (_jsx(GlobalColorMode, { defaultMode: defaultColorMode || parentGlobalColorMode.mode || "light", scopeRef: !!parentGlobalColorMode && scoped ? scopeRef : undefined, children: _jsx(PrivateTheme, { name: theme, defaultName: defaultTheme, className: rootClassNames, scoped: scoped, scopeRef: !!parentGlobalColorMode && scoped ? scopeRef : undefined, children: _jsx(ReshapedInner, { ...props, children: props.children }) }) }));
+    return (_jsx(GlobalColorMode, { defaultMode: defaultColorMode || parentGlobalColorMode.mode || "light", mode: colorMode, scopeRef: !!parentGlobalColorMode && scoped ? scopeRef : undefined, children: _jsx(PrivateTheme, { name: theme, defaultName: defaultTheme, className: rootClassNames, scoped: scoped, scopeRef: !!parentGlobalColorMode && scoped ? scopeRef : undefined, children: _jsx(ReshapedInner, { ...props, children: props.children }) }) }));
 };
 Reshaped.displayName = "Reshaped";
 export default Reshaped;

package/dist/components/Reshaped/Reshaped.types.d.ts

@@ -7,6 +7,7 @@ export type Props = {
     theme?: NonNullable<ThemeProps["name"]>;
     defaultTheme?: NonNullable<ThemeProps["defaultName"]>;
     defaultRTL?: boolean;
+    colorMode?: GlobalColorModeProps["mode"];
     defaultColorMode?: GlobalColorModeProps["defaultMode"];
     defaultViewport?: G.Viewport;
     toastOptions?: ToastProviderProps["options"];

package/dist/components/Reshaped/tests/Reshaped.stories.d.ts

@@ -10,6 +10,7 @@ export declare const rtl: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const controlledMode: StoryObj;
 export declare const lightMode: {
     name: string;
     render: () => import("react").JSX.Element;

package/dist/components/Reshaped/tests/Reshaped.stories.js

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { expect, userEvent } from "storybook/test";
 import { useTheme } from "../../Theme/index.js";
 import Button from "../../Button/index.js";
@@ -14,6 +15,25 @@ export const rtl = {
 			Hello
 		</Reshaped>),
 };
+export const controlledMode = {
+    name: "colorMode, controlled",
+    render: () => {
+        const [mode, setMode] = useState("dark");
+        return (<Reshaped theme="reshaped" colorMode={mode}>
+				<Button onClick={() => {
+                setMode(mode === "dark" ? "light" : "dark");
+            }}>
+					Toggle color mode
+				</Button>
+			</Reshaped>);
+    },
+    play: async ({ canvas }) => {
+        const button = canvas.getAllByRole("button")[0];
+        expect(document.documentElement.getAttribute("data-rs-color-mode")).toEqual("dark");
+        await userEvent.click(button);
+        expect(document.documentElement.getAttribute("data-rs-color-mode")).toEqual("light");
+    },
+};
 export const lightMode = {
     name: "defaultColorMode=light",
     render: () => <Reshaped theme="reshaped">Hello</Reshaped>,

package/dist/components/Theme/GlobalColorMode.js

@@ -7,7 +7,7 @@ import { useGlobalColorMode } from "./useTheme.js";
 import { GlobalColorModeContext } from "./Theme.context.js";
 import { getRootThemeEl } from "./Theme.utilities.js";
 const GlobalColorMode = (props) => {
-    const { defaultMode, scopeRef, children } = props;
+    const { defaultMode, mode: passedMode, scopeRef, children } = props;
     const [mode, setMode] = React.useState(defaultMode);
     const parentGlobalColorMode = useGlobalColorMode();
     const changeColorMode = React.useCallback((targetMode) => {
@@ -15,19 +15,14 @@ const GlobalColorMode = (props) => {
         if (parentGlobalColorMode.mode && !scopeRef) {
             parentGlobalColorMode.setMode(targetMode);
         }
-        setMode((prevMode) => {
-            if (prevMode !== targetMode) {
-                // Avoid components styles animating when switching to another color mode
-                disableTransitions();
-            }
-            return targetMode;
-        });
+        setMode(targetMode);
     }, [scopeRef, parentGlobalColorMode]);
     useIsomorphicLayoutEffect(() => {
+        disableTransitions();
         onNextFrame(() => {
             enableTransitions();
         });
-    }, [mode]);
+    }, [mode, passedMode]);
     /**
      * In case color mode was set in html but was not provided to the provider - hydrate the state
      * This could happen if we're receiving the mode on the client but before React hydration
@@ -38,12 +33,12 @@ const GlobalColorMode = (props) => {
             changeColorMode(nextColorMode);
     }, [changeColorMode, scopeRef]);
     const value = React.useMemo(() => ({
-        mode,
+        mode: passedMode || mode,
         setMode: changeColorMode,
         invertMode: () => {
             changeColorMode(mode === "light" ? "dark" : "light");
         },
-    }), [mode, changeColorMode]);
+    }), [mode, passedMode, changeColorMode]);
     return (_jsx(GlobalColorModeContext.Provider, { value: value, children: children }));
 };
 GlobalColorMode.displayName = "GlobalColorMode";

package/dist/components/Theme/Theme.types.d.ts

@@ -25,6 +25,7 @@ export type PrivateProps = Props & {
     scopeRef?: React.RefObject<HTMLDivElement | null>;
 };
 export type GlobalColorModeProps = {
+    mode?: ColorMode;
     defaultMode: ColorMode;
     scopeRef?: React.RefObject<HTMLDivElement | null>;
     children?: React.ReactNode;

package/dist/components/Theme/index.d.ts

@@ -1,4 +1,4 @@
 export { default, PrivateTheme } from "./Theme";
 export { default as GlobalColorMode } from "./GlobalColorMode";
 export { useTheme } from "./useTheme";
-export type { Props as ThemeProps, GlobalColorModeProps } from "./Theme.types";
+export type { Props as ThemeProps, GlobalColorModeProps, ColorMode } from "./Theme.types";

package/dist/index.d.ts

@@ -127,6 +127,7 @@ export type { ViewProps, ViewItemProps } from "./components/View";
  */
 export { useFormControl } from "./components/FormControl";
 export { default as Theme, useTheme, type ThemeProps } from "./components/Theme";
+export type { ColorMode } from "./components/Theme";
 export { default as useHandlerRef } from "./hooks/useHandlerRef";
 export { default as useHotkeys } from "./hooks/useHotkeys";
 export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect";

package/dist/tests/ThemesPlayground.d.ts

@@ -0,0 +1,2 @@
+declare const ThemePlayground: () => import("react/jsx-runtime").JSX.Element;
+export default ThemePlayground;

package/dist/tests/ThemesPlayground.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import View from "../components/View/index.js";
+import Text from "../components/Text/index.js";
+import Divider from "../components/Divider/index.js";
+import Card from "../components/Card/index.js";
+import Button from "../components/Button/index.js";
+import Grid from "../components/Grid/index.js";
+import Avatar from "../components/Avatar/index.js";
+import Image from "../components/Image/index.js";
+import IconChevronRight from "../icons/ChevronRight.js";
+import TextField from "../components/TextField/index.js";
+import FormControl from "../components/FormControl/index.js";
+import Link from "../components/Link/index.js";
+import useToggle from "../hooks/useToggle.js";
+import Switch from "../components/Switch/index.js";
+import Badge from "../components/Badge/index.js";
+import Alert from "../components/Alert/index.js";
+import IconZap from "../icons/Zap.js";
+import CheckboxGroup from "../components/CheckboxGroup/index.js";
+import Checkbox from "../components/Checkbox/index.js";
+import React from "react";
+import Table from "../components/Table/index.js";
+import DropdownMenu from "../components/DropdownMenu/index.js";
+import IconChevronDown from "../icons/ChevronDown.js";
+const Color = (props) => {
+    return (_jsx(View, { padding: 2, height: 25, gap: 2, direction: "row", borderRadius: "medium", backgroundColor: props.backgroundColor, borderColor: props.borderColor, attributes: {
+            style: {
+                borderWidth: 4,
+            },
+        }, children: props.children }));
+};
+const NeutralContrastTest = () => (_jsxs(View, { gap: 1, children: [_jsxs(View, { direction: "row", gap: 1, children: [_jsx(View, { height: 6, width: 6, backgroundColor: "neutral", borderRadius: "small" }), _jsx(View, { height: 6, width: 6, backgroundColor: "neutral-faded", borderRadius: "small" })] }), _jsxs(View, { direction: "row", gap: 1, children: [_jsx(View, { height: 6, width: 6, backgroundColor: "disabled", borderRadius: "small" }), _jsx(View, { height: 6, width: 6, backgroundColor: "disabled-faded", borderRadius: "small", borderColor: "disabled" })] })] }));
+const Palette = () => {
+    return (_jsxs(View, { gap: 2, children: [_jsxs(View, { direction: "row", gap: 2, children: [_jsxs(View, { gap: 2, grow: true, children: [_jsx(Color, { backgroundColor: "neutral", borderColor: "neutral", children: _jsx(Text, { weight: "medium", children: "Aa" }) }), _jsx(Color, { backgroundColor: "neutral-faded", borderColor: "neutral-faded", children: _jsx(Text, { weight: "medium", children: "Aa" }) })] }), _jsxs(View, { gap: 2, grow: true, children: [_jsx(Color, { backgroundColor: "primary", borderColor: "primary", children: _jsx(Text, { weight: "medium", children: "Aa" }) }), _jsxs(Color, { backgroundColor: "primary-faded", borderColor: "primary-faded", children: [_jsx(Text, { weight: "medium", color: "primary", children: "Aa" }), _jsx(Text, { weight: "medium", children: "Aa" })] })] }), _jsxs(View, { gap: 2, grow: true, children: [_jsx(Color, { backgroundColor: "critical", borderColor: "critical", children: _jsx(Text, { weight: "medium", children: "Aa" }) }), _jsxs(Color, { backgroundColor: "critical-faded", borderColor: "critical-faded", children: [_jsx(Text, { weight: "medium", color: "critical", children: "Aa" }), _jsx(Text, { weight: "medium", children: "Aa" })] })] }), _jsxs(View, { gap: 2, grow: true, children: [_jsx(Color, { backgroundColor: "positive", borderColor: "positive", children: _jsx(Text, { weight: "medium", children: "Aa" }) }), _jsxs(Color, { backgroundColor: "positive-faded", borderColor: "positive-faded", children: [_jsx(Text, { weight: "medium", color: "positive", children: "Aa" }), _jsx(Text, { weight: "medium", children: "Aa" })] })] }), _jsxs(View, { gap: 2, grow: true, children: [_jsx(Color, { backgroundColor: "warning", borderColor: "warning", children: _jsx(Text, { weight: "medium", children: "Aa" }) }), _jsxs(Color, { backgroundColor: "warning-faded", borderColor: "warning-faded", children: [_jsx(Text, { weight: "medium", color: "warning", children: "Aa" }), _jsx(Text, { weight: "medium", children: "Aa" })] })] }), _jsxs(View, { gap: 2, grow: true, children: [_jsx(Color, { backgroundColor: "disabled", borderColor: "disabled", children: _jsx(Text, { weight: "medium", color: "disabled", children: "Aa" }) }), _jsx(Color, { backgroundColor: "disabled-faded", borderColor: "disabled", children: _jsx(Text, { weight: "medium", color: "disabled", children: "Aa" }) })] })] }), _jsx(Divider, {}), _jsxs(View, { gap: 2, direction: "row", children: [_jsx(View.Item, { grow: true, children: _jsx(Color, { backgroundColor: "elevation-base", borderColor: "neutral-faded", children: _jsxs(View, { gap: 2, children: [_jsx(Text, { weight: "medium", variant: "caption-1", children: "Base" }), _jsx(NeutralContrastTest, {})] }) }) }), _jsx(View.Item, { grow: true, children: _jsx(Color, { backgroundColor: "elevation-raised", borderColor: "neutral-faded", children: _jsxs(View, { gap: 2, children: [_jsx(Text, { weight: "medium", variant: "caption-1", children: "Raised" }), _jsx(NeutralContrastTest, {})] }) }) }), _jsx(View.Item, { grow: true, children: _jsx(Color, { backgroundColor: "elevation-overlay", borderColor: "neutral-faded", children: _jsxs(View, { gap: 2, children: [_jsx(Text, { weight: "medium", variant: "caption-1", children: "Overlay" }), _jsx(NeutralContrastTest, {})] }) }) }), _jsx(View.Item, { grow: true, children: _jsx(Color, { backgroundColor: "page", borderColor: "neutral-faded", children: _jsxs(View, { gap: 2, children: [_jsx(Text, { weight: "medium", variant: "caption-1", children: "Page" }), _jsx(NeutralContrastTest, {})] }) }) }), _jsx(View.Item, { grow: true, children: _jsx(Color, { backgroundColor: "page-faded", borderColor: "neutral-faded", children: _jsxs(View, { gap: 2, children: [_jsx(Text, { weight: "medium", variant: "caption-1", children: "Page faded" }), _jsx(NeutralContrastTest, {})] }) }) }), _jsx(View.Item, { grow: true, children: _jsx(Color, { backgroundColor: "neutral-faded", borderColor: "neutral-faded", children: _jsxs(View, { gap: 2, children: [_jsx(Text, { weight: "medium", variant: "caption-1", children: "Neutral faded" }), _jsx(NeutralContrastTest, {})] }) }) })] })] }));
+};
+const ExampleAnalytics = () => (_jsx(Card, { children: _jsxs(View, { gap: 1, children: [_jsxs(View, { gap: 4, direction: "row", align: "center", children: [_jsx(View, { gap: 1, direction: "row", align: "center", grow: true, children: _jsx(Text, { variant: "body-2", weight: "bold", children: "Audience" }) }), _jsx(Button.Aligner, { children: _jsx(Button, { variant: "ghost", color: "primary", size: "small", endIcon: IconChevronRight, children: "View" }) })] }), _jsx(Text, { variant: "featured-2", color: "positive", children: "+76.28%" }), _jsxs(View, { gap: 2, children: [_jsxs(View, { gap: 3, direction: "row", align: "baseline", children: [_jsx(View.Item, { grow: true, children: _jsx(Text, { color: "neutral-faded", children: "Signed up" }) }), _jsx(Text, { color: "neutral-faded", children: "320 users" }), _jsx(Text, { color: "primary", weight: "medium", children: "81%" })] }), _jsxs(View, { gap: 3, direction: "row", align: "baseline", children: [_jsx(View.Item, { grow: true, children: _jsx(Text, { color: "neutral-faded", children: "Onboarded" }) }), _jsx(Text, { color: "neutral-faded", children: "182 users" }), _jsx(Text, { color: "warning", weight: "medium", children: "62%" })] }), _jsxs(View, { gap: 3, direction: "row", align: "baseline", children: [_jsx(View.Item, { grow: true, children: _jsx(Text, { color: "neutral-faded", children: "Purchased" }) }), _jsx(Text, { color: "neutral-faded", children: "120 users" }), _jsx(Text, { color: "critical", weight: "medium", children: "47%" })] })] })] }) }));
+const ExampleSocial = () => {
+    return (_jsx(Card, { height: "100%", children: _jsxs(View, { gap: 3, children: [_jsxs(View, { direction: "row", gap: 2, align: "center", children: [_jsx(Avatar, { size: 10, color: "neutral" }), _jsxs(View.Item, { grow: true, children: [_jsx(Text, { weight: "medium", children: "Esther Naomi" }), _jsx(Text, { color: "neutral-faded", variant: "caption-1", children: "31 Jan 2037, 10:28" })] }), _jsx(Badge, { variant: "faded", color: "warning", children: "Archived" })] }), _jsx(Text, { color: "neutral-faded", children: "I have been to 27 countries and only 5 of them call this social network X, while others named it Twitter for some reason. Why is this happening?!" }), _jsxs(View, { direction: "row", gap: 2, children: [_jsx(View, { grow: true, aspectRatio: 1, children: _jsx(Image, { src: "", borderRadius: "medium", fallback: true }) }), _jsx(View, { grow: true, aspectRatio: 1, children: _jsx(Image, { src: "", borderRadius: "medium", fallback: true }) }), _jsx(View, { grow: true, aspectRatio: 1, children: _jsx(Image, { src: "", borderRadius: "medium", fallback: true }) })] })] }) }));
+};
+const ExampleLogin = () => {
+    const passwordVisibility = useToggle();
+    return (_jsx(Card, { height: "100%", children: _jsxs(View, { gap: 3, children: [_jsx(Text, { variant: "featured-3", children: "Sign in to your account" }), _jsx(Button, { variant: "outline", fullWidth: true, children: "Sign in with Figma" }), _jsxs(View, { gap: 3, direction: "row", align: "center", children: [_jsx(View.Item, { grow: true, children: _jsx(Divider, {}) }), _jsx(Text, { children: "or" }), _jsx(View.Item, { grow: true, children: _jsx(Divider, {}) })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Email" }), _jsx(TextField, { name: "email", placeholder: "hello@reshaped.so" })] }), _jsxs(FormControl, { children: [_jsxs(View, { direction: "row", align: "baseline", children: [_jsx(View.Item, { grow: true, children: _jsx(FormControl.Label, { children: "Password" }) }), _jsx(Text, { variant: "caption-1", weight: "medium", children: _jsx(Link, { variant: "plain", onClick: () => { }, children: "Forgot password?" }) })] }), _jsx(TextField, { name: "password", inputAttributes: { type: passwordVisibility.active ? "text" : "password" } })] }), _jsx(Button, { color: "primary", children: "Sign in" })] }) }));
+};
+const ExampleSettings = () => (_jsx(Card, { height: "100%", children: _jsxs(View, { gap: 6, height: "100%", children: [_jsx(Text, { variant: "body-1", weight: "medium", children: "Notification settings" }), _jsxs(View, { gap: 3, grow: true, children: [_jsxs(View, { as: "label", direction: "row", align: "center", gap: 2, children: [_jsx(View.Item, { grow: true, children: _jsx(Text, { weight: "medium", children: "Enable email notifications" }) }), _jsx(Switch, { name: "email" })] }), _jsxs(View, { as: "label", direction: "row", align: "center", gap: 2, children: [_jsx(View.Item, { grow: true, children: _jsx(Text, { weight: "medium", children: "Enable Slack notifications" }) }), _jsx(Switch, { name: "email" })] }), _jsxs(View, { as: "label", direction: "row", align: "center", gap: 2, children: [_jsx(View.Item, { grow: true, children: _jsx(Text, { weight: "medium", children: "Enable paper mail notifications" }) }), _jsx(Switch, { name: "email", defaultChecked: true })] }), _jsx(Text, { variant: "caption-1", color: "neutral-faded", children: "Enable all notifications to unsubscribe from our marketing and promotional materials." }), _jsx(View, { grow: true, justify: "end", children: _jsx(Button, { color: "primary", variant: "faded", children: "Save settings" }) })] })] }) }));
+const ExampleAlert = () => (_jsx(Alert, { icon: IconZap, color: "primary", title: _jsxs(View, { direction: "row", gap: 2, align: "center", children: ["Auto-approve code reviews with AI", _jsx(Badge, { color: "primary", size: "small", children: "New" })] }), actionsSlot: [
+        _jsx(Button, { children: "Keep using" }, 1),
+        _jsx(Button, { variant: "ghost", color: "critical", children: "Opt-out" }, 2),
+    ], children: "Try our new GPT-powered code assistant features and never worry about reviewing other developer's pull requests again. Free for the first 5 pull requests." }));
+const ExampleCheckboxCard = () => {
+    const [value, setValue] = React.useState(["hobby"]);
+    return (_jsx(CheckboxGroup, { name: "1", value: value, onChange: (args) => {
+            setValue(args.value);
+        }, children: _jsxs(View, { gap: 3, children: [_jsx(Card, { as: "label", selected: value.includes("pro"), children: _jsx(View, { direction: "row", gap: 2, align: "center", children: _jsx(Checkbox, { value: "pro", children: "Figma library" }) }) }), _jsx(Card, { as: "label", selected: value.includes("hobby"), children: _jsxs(View, { direction: "row", gap: 2, align: "center", children: [_jsx(View.Item, { grow: true, children: _jsx(Checkbox, { value: "hobby", children: "React library" }) }), _jsx(Badge, { color: "positive", children: "Free" })] }) })] }) }));
+};
+const ExampleTable = () => {
+    const rows = [
+        {
+            name: "File downloaded",
+            id: "rshpd_23jb237dh",
+            time: "Jul 4, 12:36",
+        },
+        {
+            name: "User registered",
+            id: "rshpd_27d223jfh",
+            time: "Jul 4, 12:36",
+        },
+        {
+            name: "New version released",
+            id: "rshpd_sjdniu223nj",
+            time: "Jul 4, 12:35",
+        },
+    ];
+    const [value, setValue] = React.useState([rows[1].id]);
+    const allSelected = value.length === rows.length;
+    return (_jsx(Card, { padding: 0, children: _jsxs(Table, { children: [_jsxs(Table.Row, { children: [_jsx(Table.Heading, { width: "auto", children: _jsx(Checkbox, { inputAttributes: { "aria-label": "Select all" }, name: "all", checked: allSelected, indeterminate: !!value.length && value.length < rows.length, onChange: () => {
+                                    setValue(allSelected ? [] : rows.map((row) => row.id));
+                                } }) }), _jsx(Table.Heading, { minWidth: "180px", children: "Event type" }), _jsx(Table.Heading, { children: "Event ID" }), _jsx(Table.Heading, { align: "end", minWidth: "120px", children: "Triggered at" }), _jsx(Table.Heading, {})] }), rows.map((row) => (_jsxs(Table.Row, { highlighted: value.includes(row.id), children: [_jsx(Table.Cell, { children: _jsx(Checkbox, { name: "hey", value: row.id, inputAttributes: { "aria-label": "Select the row" }, checked: value.includes(row.id), onChange: (args) => {
+                                    setValue((prev) => {
+                                        if (!args.value)
+                                            return prev;
+                                        if (args.checked)
+                                            return [...prev, args.value];
+                                        return prev.filter((item) => item !== args.value);
+                                    });
+                                } }) }), _jsx(Table.Cell, { children: row.name }), _jsx(Table.Cell, { children: row.id }), _jsx(Table.Cell, { align: "end", children: row.time }), _jsx(Table.Cell, { width: "auto", children: _jsxs(DropdownMenu, { position: "bottom-end", children: [_jsx(DropdownMenu.Trigger, { children: (attributes) => (_jsx(Button.Aligner, { children: _jsx(Button, { attributes: attributes, icon: IconChevronDown, variant: "ghost", size: "small" }) })) }), _jsxs(DropdownMenu.Content, { children: [_jsxs(DropdownMenu.Section, { children: [_jsx(DropdownMenu.Item, { children: "Trigger event" }), _jsx(DropdownMenu.Item, { children: "Log details" })] }), _jsx(DropdownMenu.Section, { children: _jsx(DropdownMenu.Item, { color: "critical", children: "Remote entry" }) })] })] }) })] }, row.id)))] }) }));
+};
+const ThemePlayground = () => {
+    return (_jsxs(Grid, { gap: 4, columns: 12, children: [_jsx(Grid.Item, { colSpan: 12, children: _jsx(Palette, {}) }), _jsx(Grid.Item, { colSpan: 6, children: _jsxs(View, { gap: 4, children: [_jsx(ExampleAnalytics, {}), _jsx(ExampleLogin, {}), _jsx(ExampleAlert, {})] }) }), _jsx(Grid.Item, { colSpan: 6, children: _jsxs(View, { gap: 4, children: [_jsx(ExampleSocial, {}), _jsx(ExampleSettings, {}), _jsx(ExampleCheckboxCard, {})] }) }), _jsx(Grid.Item, { colSpan: 12, children: _jsx(ExampleTable, {}) }), _jsx(Grid.Item, { colSpan: 12, children: _jsxs(View, { gap: 2, padding: 4, backgroundColor: "page-faded", borderRadius: "medium", children: [_jsxs(View, { direction: "row", gap: 2, children: [_jsx(Button, { color: "neutral", onClick: () => { }, children: "Neutral" }), _jsx(Button, { color: "primary", onClick: () => { }, children: "Primary" }), _jsx(Button, { color: "critical", onClick: () => { }, children: "Critical" }), _jsx(Button, { color: "positive", onClick: () => { }, children: "Positive" }), _jsx(Button, { color: "primary", disabled: true, onClick: () => { }, children: "Disabled" }), _jsx(Badge, { color: "warning", children: "Warning" })] }), _jsxs(View, { direction: "row", gap: 2, children: [_jsx(Button, { color: "neutral", variant: "faded", onClick: () => { }, children: "Neutral" }), _jsx(Button, { color: "primary", variant: "faded", onClick: () => { }, children: "Primary" }), _jsx(Button, { color: "critical", variant: "faded", onClick: () => { }, children: "Critical" }), _jsx(Button, { color: "positive", variant: "faded", onClick: () => { }, children: "Positive" }), _jsx(Button, { color: "primary", variant: "faded", disabled: true, onClick: () => { }, children: "Disabled" }), _jsx(Badge, { color: "warning", variant: "faded", children: "Warning" })] }), _jsxs(View, { direction: "row", gap: 2, children: [_jsx(Button, { color: "neutral", variant: "outline", onClick: () => { }, children: "Neutral" }), _jsx(Button, { color: "primary", variant: "outline", onClick: () => { }, children: "Primary" }), _jsx(Button, { color: "critical", variant: "outline", onClick: () => { }, children: "Critical" }), _jsx(Button, { color: "positive", variant: "outline", onClick: () => { }, children: "Positive" }), _jsx(Button, { color: "primary", variant: "outline", disabled: true, onClick: () => { }, children: "Disabled" }), _jsx(Badge, { color: "warning", variant: "outline", children: "Warning" })] })] }) })] }));
+};
+export default ThemePlayground;

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

@@ -0,0 +1,16 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        a11y: {
+            disable: boolean;
+        };
+    };
+};
+export default _default;
+export declare const test: () => import("react").JSX.Element;
+export declare const base: () => import("react").JSX.Element;
+export declare const generation: () => import("react").JSX.Element;
+export declare const onColors: () => import("react").JSX.Element;

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

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

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

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

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

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

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

@@ -1,18 +1,40 @@
-const transformedToken = (name, token) => {
-    const hasDarkMode = !!token.hexDark;
-    const defaultMode = hasDarkMode ? "light" : undefined;
+const transformTokenForMode = (args) => {
+    const { hex, oklch } = args;
+    if (oklch) {
+        const components = `${Number(oklch.l.toFixed(4))} ${Number(oklch.c.toFixed(4))} ${Number(oklch.h?.toFixed(4) || 0)}`;
+        const alphaSuffix = oklch?.alpha === undefined ? "" : ` / ${Number(oklch.alpha.toFixed(4))}`;
+        return `oklch(${components}${alphaSuffix})`;
+    }
+    if (hex)
+        return hex;
+    throw new Error(`[Reshaped] ${JSON.stringify(args)} is missing a color value`);
+};
+const transformToken = (name, token) => {
+    const { hex, hexDark, oklch, oklchDark } = token;
+    // Apply color to both modes if dark mode is not available
+    const hasDark = !!hexDark || !!oklchDark;
+    const value = transformTokenForMode({ oklch, hex });
+    const darkValue = hasDark ? transformTokenForMode({ oklch: oklchDark, hex: hexDark }) : undefined;
+    const separateModes = hasDark && value !== darkValue;
+    const defaultMode = separateModes ? "light" : undefined;
     const result = [
-        { name, tokenType: "color", type: "variable", value: token.hex, mode: defaultMode },
+        {
+            name,
+            tokenType: "color",
+            type: "variable",
+            value,
+            mode: defaultMode,
+        },
     ];
-    if (token.hexDark) {
+    if (darkValue && separateModes) {
         result.push({
             name,
             tokenType: "color",
             type: "variable",
-            value: token.hexDark,
+            value: darkValue,
             mode: "dark",
         });
     }
     return result;
 };
-export default transformedToken;
+export default transformToken;

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

@@ -1,7 +1,32 @@
+import type { Oklch } from "culori/fn";
+export type Hue = "primary" | "positive" | "critical" | "warning" | "neutral" | "brand";
 export type Name = "foregroundNeutral" | "foregroundNeutralFaded" | "foregroundDisabled" | "foregroundPrimary" | "foregroundCritical" | "foregroundWarning" | "foregroundPositive" | "borderNeutral" | "borderNeutralFaded" | "borderDisabled" | "borderPrimary" | "borderPrimaryFaded" | "borderCritical" | "borderCriticalFaded" | "borderWarning" | "borderWarningFaded" | "borderPositive" | "borderPositiveFaded" | "backgroundNeutral" | "backgroundNeutralFaded" | "backgroundDisabled" | "backgroundDisabledFaded" | "backgroundPrimary" | "backgroundPrimaryFaded" | "backgroundCritical" | "backgroundCriticalFaded" | "backgroundWarning" | "backgroundWarningFaded" | "backgroundPositive" | "backgroundPositiveFaded" | "backgroundPage" | "backgroundPageFaded" | "backgroundElevationBase" | "backgroundElevationRaised" | "backgroundElevationOverlay" | "brand" | "white" | "black";
 export type GeneratedOnName = "onBackgroundNeutral" | "onBackgroundPrimary" | "onBackgroundPositive" | "onBackgroundWarning" | "onBackgroundCritical";
 export type GeneratedRGBName = "rgbBackgroundNeutral" | "rgbBackgroundNeutralFaded" | "rgbBackgroundDisabled" | "rgbBackgroundDisabledFaded" | "rgbBackgroundPrimary" | "rgbBackgroundPrimaryFaded" | "rgbBackgroundCritical" | "rgbBackgroundCriticalFaded" | "rgbBackgroundWarning" | "rgbBackgroundWarningFaded" | "rgbBackgroundPositive" | "rgbBackgroundPositiveFaded" | "rgbBackgroundPage" | "rgbBackgroundPageFaded" | "rgbBackgroundElevationBase" | "rgbBackgroundElevationRaised" | "rgbBackgroundElevationOverlay";
-export type Token = {
-    hex: string;
-    hexDark?: string;
+export type RgbColor = {
+    r: number;
+    g: number;
+    b: number;
+};
+export type OklchColor = Omit<Oklch, "mode">;
+export type HexColor = string;
+export type ColorValue = HexColor | Token;
+export type OklchOnlyToken = {
+    oklch: OklchColor;
+    oklchDark?: OklchColor;
+};
+export type OklchToken = OklchOnlyToken & {
+    hex?: never;
+    hexDark?: never;
+};
+export type HexToken = {
+    hex: HexColor;
+    hexDark?: HexColor;
+    oklch?: never;
+    oklchDark?: never;
+};
+export type Token = OklchToken | HexToken;
+export type InternalToken = {
+    oklch: Oklch;
+    oklchDark?: Oklch;
 };

package/dist/themes/_generator/tokens/color/utilities/a11y.d.ts

@@ -0,0 +1,20 @@
+import { type Oklch } from "culori/fn";
+export declare const getOnColorWCAG: (args: {
+    bgColor: Oklch;
+    lightColor: Oklch;
+    darkColor: Oklch;
+}) => Oklch;
+export declare const getOnColorAPCA: (args: {
+    bgColor: Oklch;
+    lightColor: Oklch;
+    darkColor: Oklch;
+}) => Oklch;
+/**
+ * General
+ */
+export declare const getOnColor: (args: {
+    bgColor: Oklch;
+    lightColor: Oklch;
+    darkColor: Oklch;
+    algorithm?: "wcag" | "apca";
+}) => Oklch;

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

@@ -0,0 +1,58 @@
+import { oklchToRgb } from "./convert.js";
+/**
+ * WCAG
+ */
+const RED = 0.2126;
+const GREEN = 0.7152;
+const BLUE = 0.0722;
+const GAMMA = 2.4;
+function luminanceWCAG(r, g, b) {
+    const a = [r, g, b].map((v) => {
+        return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, GAMMA);
+    });
+    return a[0] * RED + a[1] * GREEN + a[2] * BLUE;
+}
+function contrastWCAG(rgb1, rgb2) {
+    const lum1 = luminanceWCAG(...rgb1);
+    const lum2 = luminanceWCAG(...rgb2);
+    const brightest = Math.max(lum1, lum2);
+    const darkest = Math.min(lum1, lum2);
+    return (brightest + 0.05) / (darkest + 0.05);
+}
+export const getOnColorWCAG = (args) => {
+    const { bgColor, lightColor, darkColor } = args;
+    const bgRgb = oklchToRgb(bgColor);
+    const lightRgb = oklchToRgb(lightColor);
+    return contrastWCAG([bgRgb.r, bgRgb.g, bgRgb.b], [lightRgb.r, lightRgb.g, lightRgb.b]) > 4.5
+        ? lightColor
+        : darkColor;
+};
+/**
+ * APCA
+ */
+function luminanceAPCA(oklch) {
+    const { r, g, b } = oklchToRgb(oklch);
+    return (0.2126 * Math.pow(r / 255, 2.2) +
+        0.7152 * Math.pow(g / 255, 2.2) +
+        0.0722 * Math.pow(b / 255, 2.2));
+}
+export const getOnColorAPCA = (args) => {
+    const { bgColor, lightColor, darkColor } = args;
+    const backgroundLuminance = luminanceAPCA(bgColor);
+    const lightLuminance = luminanceAPCA(lightColor);
+    const darkLuminance = luminanceAPCA(darkColor);
+    const contrastWithLight = Math.abs(lightLuminance - backgroundLuminance);
+    const contrastWithDark = Math.abs(darkLuminance - backgroundLuminance);
+    return contrastWithLight > contrastWithDark ? lightColor : darkColor;
+};
+/**
+ * General
+ */
+export const getOnColor = (args) => {
+    if (args.algorithm === "apca") {
+        return getOnColorAPCA(args);
+    }
+    else {
+        return getOnColorWCAG(args);
+    }
+};