reshaped 2.11.11 → 3.0.0

package/dist/hooks/_private/useSingletonHotkeys.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+/**
+ * Utilities
+ */
+const COMBINATION_DELIMETER = "+";
+const pressedMap = {};
+let modifiedKeys = [];
+const formatHotkey = (hotkey) => {
+    if (hotkey === " ")
+        return hotkey;
+    return hotkey.replace(/\s/g, "").toLowerCase();
+};
+// Normalize passed key combinations to turn them into a consistent ids
+const getHotkeyId = (hotkey) => {
+    return formatHotkey(hotkey).split(COMBINATION_DELIMETER).sort().join(COMBINATION_DELIMETER);
+};
+const getEventKey = (e) => {
+    if (!e.key)
+        return;
+    // Having alt pressed modifies e.key value, so relying on e.code for it
+    if (e.altKey && e.key !== "Alt") {
+        return e.code.toLowerCase().replace(/key|digit|numpad/, "");
+    }
+    return e.key.toLowerCase();
+};
+const walkHotkeys = (hotkeys, cb) => {
+    Object.keys(hotkeys).forEach((key) => {
+        key.split(",").forEach((hotkey) => {
+            const data = hotkeys[key];
+            if (!data)
+                return;
+            cb(getHotkeyId(hotkey), data);
+        });
+    });
+};
+export class HotkeyStore {
+    hotkeyMap = {};
+    getSize = () => Object.keys(this.hotkeyMap).length;
+    bindHotkeys = (hotkeys, ref, options) => {
+        walkHotkeys(hotkeys, (id, hotkeyData) => {
+            if (!hotkeyData)
+                return;
+            if (!this.hotkeyMap[id]) {
+                this.hotkeyMap[id] = new Set();
+            }
+            this.hotkeyMap[id].add({ callback: hotkeyData, ref, options });
+        });
+    };
+    unbindHotkeys = (hotkeys) => {
+        walkHotkeys(hotkeys, (id, hotkeyCallback) => {
+            if (!hotkeyCallback)
+                return;
+            this.hotkeyMap[id]?.forEach((data) => {
+                if (data.callback === hotkeyCallback) {
+                    this.hotkeyMap[id].delete(data);
+                }
+            });
+            if (!this.hotkeyMap[id]?.size) {
+                delete this.hotkeyMap[id];
+            }
+        });
+    };
+    handleKeyDown = (pressedMap, e) => {
+        const pressedKeys = Object.keys(pressedMap);
+        if (!pressedKeys.length)
+            return;
+        const pressedId = getHotkeyId(pressedKeys.join(COMBINATION_DELIMETER));
+        const pressedFormattedKeys = pressedId.split(COMBINATION_DELIMETER);
+        const hotkeyData = this.hotkeyMap[pressedId];
+        /**
+         * Support for `mod` that represents both Mac and Win keyboards
+         */
+        const hotkeyControlModData = pressedFormattedKeys.includes("control") &&
+            this.hotkeyMap[pressedId.replace("control", "mod")];
+        const hotkeyMetaModData = pressedFormattedKeys.includes("meta") && this.hotkeyMap[pressedId.replace("meta", "mod")];
+        [hotkeyData, hotkeyControlModData, hotkeyMetaModData].forEach((hotkeyData) => {
+            if (!hotkeyData)
+                return;
+            if (hotkeyData?.size) {
+                hotkeyData.forEach((data) => {
+                    if (data.ref?.current &&
+                        !(e.target === data.ref.current || data.ref.current.contains(e.target))) {
+                        return;
+                    }
+                    const resolvedEvent = pressedMap[pressedId];
+                    if (data.options.preventDefault) {
+                        resolvedEvent?.preventDefault();
+                    }
+                    data.callback(resolvedEvent);
+                });
+            }
+        });
+    };
+}
+const globalHotkeyStore = new HotkeyStore();
+/**
+ * Components / Hooks
+ */
+export const HotkeyContext = React.createContext({});
+export const SingletonHotkeysProvider = (props) => {
+    const { children } = props;
+    // eslint-disable-next-line
+    const [_, setTriggerCount] = React.useState(0);
+    // Only handle key presses when there is at least one hook listening for hotkeys
+    const [hooksCount, setHooksCount] = React.useState(0);
+    const addPressedKey = React.useCallback((e) => {
+        if (e.repeat || hooksCount === 0)
+            return;
+        const eventKey = getEventKey(e);
+        if (!eventKey)
+            return;
+        pressedMap[eventKey] = e;
+        setTriggerCount(Object.keys(pressedMap).length);
+        // Key up won't trigger for other keys while Meta is pressed so we need to cache them
+        // and remove on Meta keyup
+        if (e.metaKey)
+            modifiedKeys.push(...Object.keys(pressedMap));
+        if (pressedMap.Meta)
+            modifiedKeys.push(eventKey);
+    }, [hooksCount]);
+    const removePressedKey = React.useCallback((e) => {
+        if (hooksCount === 0)
+            return;
+        const eventKey = getEventKey(e);
+        if (!eventKey)
+            return;
+        delete pressedMap[eventKey];
+        if (eventKey === "meta" || eventKey === "control") {
+            delete pressedMap.mod;
+        }
+        if (eventKey === "meta") {
+            modifiedKeys.forEach((key) => {
+                if (!pressedMap[key])
+                    return;
+                delete pressedMap[key];
+            });
+            modifiedKeys = [];
+        }
+        setTriggerCount(Object.keys(pressedMap).length);
+    }, [hooksCount]);
+    const isPressed = (hotkey) => {
+        const keys = formatHotkey(hotkey).split(COMBINATION_DELIMETER);
+        if (keys.some((key) => !pressedMap[key]))
+            return false;
+        return true;
+    };
+    const addHotkeys = React.useCallback((hotkeys, ref, options = {}) => {
+        setHooksCount((prev) => prev + 1);
+        globalHotkeyStore.bindHotkeys(hotkeys, ref, options);
+        return () => {
+            setHooksCount((prev) => prev - 1);
+            globalHotkeyStore.unbindHotkeys(hotkeys);
+        };
+    }, []);
+    const handleWindowKeyDown = React.useCallback((e) => {
+        // Browsers trigger keyboard event without passing e.key when you click on autocomplete
+        if (!e.key)
+            return;
+        addPressedKey(e);
+        globalHotkeyStore.handleKeyDown(pressedMap, e);
+    }, [addPressedKey]);
+    const handleWindowKeyUp = React.useCallback((e) => {
+        if (!e.key)
+            return;
+        removePressedKey(e);
+    }, [removePressedKey]);
+    React.useEffect(() => {
+        window.addEventListener("keydown", handleWindowKeyDown);
+        window.addEventListener("keyup", handleWindowKeyUp);
+        return () => {
+            window.removeEventListener("keydown", handleWindowKeyDown);
+            window.removeEventListener("keyup", handleWindowKeyUp);
+        };
+    }, [handleWindowKeyDown, handleWindowKeyUp]);
+    return (_jsx(HotkeyContext.Provider, { value: { addHotkeys, isPressed }, children: children }));
+};
+const useSingletonHotkeys = () => React.useContext(HotkeyContext);
+export default useSingletonHotkeys;

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

@@ -0,0 +1,30 @@
+import useHotkeys from "../useHotkeys.js";
+import View from "../../components/View/index.js";
+export default { title: "Hooks/useHotkeys" };
+function Example() {
+    const { checkHotkeyState } = useHotkeys({
+        "shift + b + n": () => console.log("pressed"),
+        "c + v": () => console.log(111),
+        "Meta + v": () => console.log(222),
+        "mod + ArrowRight": () => console.log("right"),
+        "mod + ArrowUp": () => console.log("top"),
+        "shift + ArrowRight": () => console.log("right"),
+        "shift + ArrowUp": () => console.log("top"),
+    });
+    const active = checkHotkeyState("shift + b + n");
+    const shiftActive = checkHotkeyState("shift");
+    const bActive = checkHotkeyState("b");
+    const nActive = checkHotkeyState("n");
+    return (<View animated gap={2} direction="row" backgroundColor={active ? "positive-faded" : undefined} padding={2} borderRadius="small">
+			<View paddingInline={4} paddingBlock={2} borderRadius="small" borderColor="neutral-faded" animated backgroundColor={shiftActive ? "neutral-faded" : "elevation-raised"} shadow={shiftActive ? undefined : "raised"}>
+				Shift
+			</View>
+			<View paddingInline={4} paddingBlock={2} borderRadius="small" borderColor="neutral-faded" animated backgroundColor={bActive ? "neutral-faded" : "elevation-raised"} shadow={bActive ? undefined : "raised"}>
+				b
+			</View>
+			<View paddingInline={4} paddingBlock={2} borderRadius="small" borderColor="neutral-faded" animated backgroundColor={nActive ? "neutral-faded" : "elevation-raised"} shadow={nActive ? undefined : "raised"}>
+				n
+			</View>
+		</View>);
+}
+export const state = () => <Example />;

package/dist/hooks/useHotkeys.js

@@ -0,0 +1,25 @@
+"use client";
+import React from "react";
+import useSingletonHotkey from "./_private/useSingletonHotkeys.js";
+const useHotkeys = (hotkeys, deps = [], options) => {
+    const { addHotkeys, isPressed } = useSingletonHotkey();
+    const generatedRef = React.useRef(null);
+    const elementRef = options?.ref || generatedRef;
+    React.useEffect(() => {
+        if (options?.disabled)
+            return;
+        const remove = addHotkeys(hotkeys, elementRef, { preventDefault: options?.preventDefault });
+        return () => remove?.();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        addHotkeys,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        Object.keys(hotkeys).join(","),
+        options?.disabled,
+        options?.preventDefault,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        ...deps,
+    ]);
+    return { ref: elementRef, checkHotkeyState: isPressed };
+};
+export default useHotkeys;

package/dist/icons/Mic.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MicIcon = () => {
+    return (_jsxs("svg", { viewBox: "0 0 16 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M8 1C7.20435 1 6.44129 1.31607 5.87868 1.87868C5.31607 2.44129 5 3.20435 5 4V12C5 12.7956 5.31607 13.5587 5.87868 14.1213C6.44129 14.6839 7.20435 15 8 15C8.79565 15 9.55871 14.6839 10.1213 14.1213C10.6839 13.5587 11 12.7956 11 12V4C11 3.20435 10.6839 2.44129 10.1213 1.87868C9.55871 1.31607 8.79565 1 8 1V1Z", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M15 10V12C15 13.8565 14.2625 15.637 12.9497 16.9497C11.637 18.2625 9.85652 19 8 19C6.14348 19 4.36301 18.2625 3.05025 16.9497C1.7375 15.637 1 13.8565 1 12V10", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M8 19V23", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M4 23H12", stroke: "currentColor", strokeWidth: "1.5" })] }));
+};
+export default MicIcon;

package/dist/styles/radius/radius.module.css

@@ -0,0 +1 @@
+.root{border-radius:var(--rs-radius)}.--radius-none{--rs-radius:0}.--radius-small{--rs-radius:var(--rs-radius-small)}.--radius-medium{--rs-radius:var(--rs-radius-medium)}.--radius-large{--rs-radius:var(--rs-radius-large)}.--radius-circular{--rs-radius:9999px}@media (--rs-viewport-m ){.--radius-none--m{--rs-radius:0}.--radius-small--m{--rs-radius:var(--rs-radius-small)}.--radius-medium--m{--rs-radius:var(--rs-radius-medium)}.--radius-large--m{--rs-radius:var(--rs-radius-large)}.--radius-circular--m{--rs-radius:9999px}}@media (--rs-viewport-l ){.--radius-none--l{--rs-radius:0}.--radius-small--l{--rs-radius:var(--rs-radius-small)}.--radius-medium--l{--rs-radius:var(--rs-radius-medium)}.--radius-large--l{--rs-radius:var(--rs-radius-large)}.--radius-circular--l{--rs-radius:9999px}}@media (--rs-viewport-xl ){.--radius-none--xl{--rs-radius:0}.--radius-small--xl{--rs-radius:var(--rs-radius-small)}.--radius-medium--xl{--rs-radius:var(--rs-radius-medium)}.--radius-large--xl{--rs-radius:var(--rs-radius-large)}.--radius-circular--xl{--rs-radius:9999px}}

package/dist/tests/themingWithDefinition.js

@@ -0,0 +1,5 @@
+/**
+ * File importing theming client to test its bundle size
+ */
+import * as themes from "../themes/index.js";
+console.log(themes);

package/dist/tests/themingWithoutDefinition.js

@@ -0,0 +1,5 @@
+/**
+ * File importing theming client to test its bundle size
+ */
+import { getThemeCSS, generateThemeColors } from "../themes/index.js";
+console.log({ getThemeCSS, generateThemeColors });

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

@@ -0,0 +1,2 @@
+import { Name } from "./tokens/color/color.types";
+export declare const bgWithDynamicForeground: Name[];

package/dist/themes/_generator/constants.js

@@ -0,0 +1,8 @@
+export const bgWithDynamicForeground = [
+    "backgroundNeutral",
+    "backgroundPrimary",
+    "backgroundCritical",
+    "backgroundWarning",
+    "backgroundPositive",
+    "brand",
+];

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

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

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

@@ -0,0 +1,185 @@
+const theme = {
+    fontFamily: {
+        title: {
+            family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif",
+        },
+        body: {
+            family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif",
+        },
+    },
+    fontWeight: {
+        regular: { weight: 400 },
+        medium: { weight: 500 },
+        semibold: { weight: 600 },
+        bold: { weight: 700 },
+        extrabold: { weight: 800 },
+        black: { weight: 900 },
+    },
+    font: {
+        title1: {
+            fontSize: { px: 80 },
+            lineHeight: { px: 84 },
+            fontWeightToken: "semibold",
+            fontFamilyToken: "title",
+        },
+        title2: {
+            fontSize: { px: 64 },
+            lineHeight: { px: 68 },
+            fontWeightToken: "semibold",
+            fontFamilyToken: "title",
+        },
+        title3: {
+            fontSize: { px: 56 },
+            lineHeight: { px: 60 },
+            fontWeightToken: "semibold",
+            fontFamilyToken: "title",
+        },
+        title4: {
+            fontSize: { px: 40 },
+            lineHeight: { px: 44 },
+            fontWeightToken: "semibold",
+            fontFamilyToken: "title",
+        },
+        title5: {
+            fontSize: { px: 36 },
+            lineHeight: { px: 40 },
+            fontWeightToken: "semibold",
+            fontFamilyToken: "title",
+        },
+        title6: {
+            fontSize: { px: 24 },
+            lineHeight: { px: 28 },
+            fontWeightToken: "semibold",
+            fontFamilyToken: "title",
+        },
+        featured1: {
+            fontSize: { px: 22 },
+            lineHeight: { px: 28 },
+            fontFamilyToken: "body",
+        },
+        featured2: {
+            fontSize: { px: 20 },
+            lineHeight: { px: 28 },
+            fontFamilyToken: "body",
+        },
+        featured3: {
+            fontSize: { px: 18 },
+            lineHeight: { px: 24 },
+            fontFamilyToken: "body",
+        },
+        body1: {
+            fontSize: { px: 14 },
+            lineHeight: { px: 20 },
+            fontFamilyToken: "body",
+        },
+        body2: {
+            fontSize: { px: 13 },
+            lineHeight: { px: 20 },
+            fontFamilyToken: "body",
+        },
+        body3: {
+            fontSize: { px: 11 },
+            lineHeight: { px: 16 },
+            fontFamilyToken: "body",
+        },
+        caption1: {
+            fontSize: { px: 11 },
+            lineHeight: { px: 16 },
+            fontFamilyToken: "body",
+        },
+        caption2: {
+            fontSize: { px: 10 },
+            lineHeight: { px: 12 },
+            fontFamilyToken: "body",
+        },
+    },
+    unit: {
+        base: { px: 4 },
+        radiusSmall: { px: 4 },
+        radiusMedium: { px: 4 },
+        radiusLarge: { px: 4 },
+    },
+    // @ts-ignore
+    color: {
+        foregroundNeutral: { hex: "#191919", hexDark: "#FFFFFF" },
+        foregroundNeutralFaded: { hex: "#474747", hexDark: "#B2B2B2" },
+        foregroundDisabled: { hex: "#B2B2B2", hexDark: "#656565" },
+        foregroundPrimary: { hex: "#007BE5", hexDark: "#7CC4F8" },
+        foregroundPositive: { hex: "#009951", hexDark: "#79D297" },
+        foregroundCritical: { hex: "#DC3412", hexDark: "#FCA397" },
+        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" },
+        borderNeutral: { hex: "#E6E6E6", hexDark: "#444444" },
+        borderNeutralFaded: { hex: "#E6E6E6", hexDark: "#444444" },
+        borderDisabled: { hex: "#E6E6E6", hexDark: "#3E3E3E" },
+        borderPrimary: { hex: "#007BE5", hexDark: "#7CC4F8" },
+        borderPrimaryFaded: { hex: "#BDE3FF", hexDark: "#2A4D72" },
+        borderPositive: { hex: "#009951", hexDark: "#79D297" },
+        borderPositiveFaded: { hex: "#BBDDC6", hexDark: "#086338" },
+        borderCritical: { hex: "#DC3412", hexDark: "#FCA397" },
+        borderCriticalFaded: { hex: "#FFC7C2", hexDark: "#803226" },
+        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" },
+        black: { hex: "#000000" },
+        white: { hex: "#FFFFFF" },
+    },
+    duration: {
+        fast: { ms: 200 },
+        medium: { ms: 300 },
+        slow: { ms: 400 },
+    },
+    easing: {
+        standard: { x1: 0.4, y1: 0, x2: 0.2, y2: 1 },
+        accelerate: { x1: 0.4, y1: 0, x2: 1, y2: 1 },
+        decelerate: { x1: 0, y1: 0, x2: 0.2, y2: 1 },
+    },
+    shadow: {
+        raised: [
+            {
+                offsetX: 0,
+                offsetY: 1,
+                blurRadius: 3,
+                colorToken: "black",
+                opacity: 0.15,
+            },
+        ],
+        overlay: [
+            {
+                offsetX: 0,
+                offsetY: 10,
+                blurRadius: 24,
+                colorToken: "black",
+                opacity: 0.1,
+            },
+            {
+                offsetX: 0,
+                offsetY: 2,
+                blurRadius: 5,
+                colorToken: "black",
+                opacity: 0.04,
+            },
+        ],
+    },
+    viewport: {
+        m: { minPx: 660 },
+        l: { minPx: 900 },
+        xl: { minPx: 1280 },
+    },
+};
+export default theme;

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

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

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

@@ -0,0 +1,195 @@
+const theme = {
+    fontFamily: {
+        title: {
+            family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif",
+        },
+        body: {
+            family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif",
+        },
+    },
+    fontWeight: {
+        regular: { weight: 400 },
+        medium: { weight: 500 },
+        semibold: { weight: 600 },
+        bold: { weight: 700 },
+        extrabold: { weight: 800 },
+        black: { weight: 900 },
+    },
+    font: {
+        title1: {
+            fontSize: { px: 96 },
+            lineHeight: { px: 100 },
+            fontWeightToken: "extrabold",
+            fontFamilyToken: "title",
+        },
+        title2: {
+            fontSize: { px: 80 },
+            lineHeight: { px: 84 },
+            fontWeightToken: "extrabold",
+            fontFamilyToken: "title",
+        },
+        title3: {
+            fontSize: { px: 64 },
+            lineHeight: { px: 68 },
+            fontWeightToken: "extrabold",
+            fontFamilyToken: "title",
+        },
+        title4: {
+            fontSize: { px: 56 },
+            lineHeight: { px: 60 },
+            fontWeightToken: "bold",
+            fontFamilyToken: "title",
+        },
+        title5: {
+            fontSize: { px: 48 },
+            lineHeight: { px: 52 },
+            fontWeightToken: "bold",
+            fontFamilyToken: "title",
+        },
+        title6: {
+            fontSize: { px: 36 },
+            lineHeight: { px: 40 },
+            fontWeightToken: "bold",
+            fontFamilyToken: "title",
+        },
+        featured1: {
+            fontSize: { px: 32 },
+            lineHeight: { px: 40 },
+            fontFamilyToken: "body",
+        },
+        featured2: {
+            fontSize: { px: 24 },
+            lineHeight: { px: 32 },
+            fontFamilyToken: "body",
+        },
+        featured3: {
+            fontSize: { px: 20 },
+            lineHeight: { px: 28 },
+            fontFamilyToken: "body",
+        },
+        body1: {
+            fontSize: { px: 18 },
+            lineHeight: { px: 28 },
+            fontFamilyToken: "body",
+        },
+        body2: {
+            fontSize: { px: 16 },
+            lineHeight: { px: 24 },
+            fontFamilyToken: "body",
+        },
+        body3: {
+            fontSize: { px: 14 },
+            lineHeight: { px: 20 },
+            fontFamilyToken: "body",
+        },
+        caption1: {
+            fontSize: { px: 12 },
+            lineHeight: { px: 16 },
+            fontFamilyToken: "body",
+        },
+        caption2: {
+            fontSize: { px: 10 },
+            lineHeight: { px: 12 },
+            fontFamilyToken: "body",
+        },
+    },
+    unit: {
+        base: { px: 4 },
+    },
+    radius: {
+        small: { px: 4 },
+        medium: { px: 8 },
+        large: { px: 12 },
+    },
+    color: {
+        backgroundPrimary: { hex: "#5a58f2", hexDark: "#524fea" },
+        backgroundPrimaryFaded: { hex: "#ecebfe", hexDark: "#252544" },
+        borderPrimary: { hex: "#3b38ed", hexDark: "#8c8bf3" },
+        borderPrimaryFaded: { hex: "#dedcfb", hexDark: "#323164" },
+        foregroundPrimary: { hex: "#4f4cf0", hexDark: "#8b8af7" },
+        backgroundCritical: { hex: "#e22c2c", hexDark: "#d02626" },
+        backgroundCriticalFaded: { hex: "#fdeded", hexDark: "#3e1f1f" },
+        borderCritical: { hex: "#bf2424", hexDark: "#f46969" },
+        borderCriticalFaded: { hex: "#fadbdb", hexDark: "#582929" },
+        foregroundCritical: { hex: "#c42525", hexDark: "#f36a6a" },
+        backgroundWarning: { hex: "#facc15", hexDark: "#f1c512" },
+        backgroundWarningFaded: { hex: "#fffae9", hexDark: "#2c271f" },
+        borderWarning: { hex: "#cfa90f", hexDark: "#b4920a" },
+        borderWarningFaded: { hex: "#faedbb", hexDark: "#3d3628" },
+        foregroundWarning: { hex: "#7b6305", hexDark: "#b4920c" },
+        backgroundPositive: { hex: "#118850", hexDark: "#14784a" },
+        backgroundPositiveFaded: { hex: "#edfdf5", hexDark: "#1f2a23" },
+        borderPositive: { hex: "#0c6e40", hexDark: "#21ab6b" },
+        borderPositiveFaded: { hex: "#d0f3e2", hexDark: "#293b2f" },
+        foregroundPositive: { hex: "#0d7544", hexDark: "#18ab66" },
+        backgroundNeutral: { hex: "#dfe2ea", hexDark: "#494f60" },
+        backgroundNeutralFaded: { hex: "#f1f2f6", hexDark: "#222835" },
+        borderNeutral: { hex: "#0000001f", hexDark: "#ffffff24" },
+        borderNeutralFaded: { hex: "#0000001a", hexDark: "#ffffff17" },
+        foregroundNeutral: { hex: "#14181f", hexDark: "#eff1f5" },
+        foregroundNeutralFaded: { hex: "#5b667e", hexDark: "#c0c6d6" },
+        backgroundDisabled: { hex: "#eceef2", hexDark: "#1e212a" },
+        backgroundDisabledFaded: { hex: "#f5f6f9", hexDark: "#171921" },
+        borderDisabled: { hex: "#dfe2ea", hexDark: "#262a34" },
+        foregroundDisabled: { hex: "#c6ccda", hexDark: "#434959" },
+        backgroundElevationBase: { hex: "#ffffff", hexDark: "#15171e" },
+        backgroundElevationRaised: { hex: "#ffffff", hexDark: "#191b23" },
+        backgroundElevationOverlay: { hex: "#ffffff", hexDark: "#1c1f28" },
+        backgroundPage: { hex: "#ffffff", hexDark: "#0f1116" },
+        backgroundPageFaded: { hex: "#f9f9fb", hexDark: "#111319" },
+        brand: { hex: "#5a58f2" },
+        white: { hex: "#ffffff" },
+        black: { hex: "#000000" },
+    },
+    duration: {
+        fast: { ms: 200 },
+        medium: { ms: 300 },
+        slow: { ms: 400 },
+    },
+    easing: {
+        standard: { x1: 0.4, y1: 0, x2: 0.2, y2: 1 },
+        accelerate: { x1: 0.4, y1: 0, x2: 1, y2: 1 },
+        decelerate: { x1: 0, y1: 0, x2: 0.2, y2: 1 },
+    },
+    shadow: {
+        raised: [
+            {
+                offsetX: 0,
+                offsetY: 1,
+                blurRadius: 5,
+                spreadRadius: -4,
+                colorToken: "black",
+                opacity: 0.5,
+            },
+            {
+                offsetX: 0,
+                offsetY: 4,
+                blurRadius: 8,
+                colorToken: "black",
+                opacity: 0.05,
+            },
+        ],
+        overlay: [
+            {
+                offsetX: 0,
+                offsetY: 5,
+                blurRadius: 10,
+                colorToken: "black",
+                opacity: 0.05,
+            },
+            {
+                offsetX: 0,
+                offsetY: 15,
+                blurRadius: 25,
+                colorToken: "black",
+                opacity: 0.07,
+            },
+        ],
+    },
+    viewport: {
+        m: { minPx: 660 },
+        l: { minPx: 900 },
+        xl: { minPx: 1280 },
+    },
+};
+export default theme;

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

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

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

@@ -0,0 +1,8 @@
+import reshapedDefinition from "./reshaped.js";
+import generateColors from "../utilities/generateColors.js";
+const theme = {
+    ...reshapedDefinition,
+    color: generateColors(),
+    unit: reshapedDefinition.unit,
+};
+export default theme;