reshaped 2.4.4 → 2.4.7

package/components/TextField/TextField.module.css

@@ -1 +1 @@
-.root{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-unit-x1) - 1px);position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{background:none;border:none;box-sizing:border-box;color:var(--rs-color-foreground-neutral);flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);margin:calc(var(--rs-unit-x1) * -1) -500px;outline:none;padding:0 calc(var(--rs-text-field-gap) + 500px);position:relative;width:100%;z-index:1}.input:-webkit-autofill{-webkit-text-fill-color:var(--rs-color-foreground-neutral);-webkit-background-clip:text}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;position:relative;z-index:5}.icon{pointer-events:none}.affix{color:var(--rs-color-foreground-neutral-faded)}.attachment{align-items:center;display:flex}.attachment--position-start .affix,.attachment--position-start .icon{margin-inline-end:var(--rs-unit-x1);padding-inline-start:var(--rs-text-field-gap)}.attachment--position-start .affix{border-inline-end:1px solid var(--rs-color-border-neutral-faded);padding-inline-end:calc(var(--rs-text-field-gap) + var(--rs-unit-x1))}.attachment--position-end .affix,.attachment--position-end .icon{margin-inline-start:var(--rs-unit-x1);padding-inline-end:var(--rs-text-field-gap)}.attachment--position-end .affix{border-inline-start:1px solid var(--rs-color-border-neutral-faded);padding-inline-start:calc(var(--rs-text-field-gap) + var(--rs-unit-x1))}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);cursor:not-allowed}.root.--disabled,.root.--disabled .input{color:var(--rs-color-foreground-disabled)}.--size-medium{--rs-text-field-gap:var(--rs-unit-x1);border-radius:var(--rs-unit-radius-small)}.--size-medium .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium .affix,.--size-medium .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-medium)}.--size-large .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large .affix,.--size-large .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge .affix,.--size-xlarge .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}@media (max-width:659px) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (min-width:660px){.--size-medium--m{--rs-text-field-gap:var(--rs-unit-x1);border-radius:var(--rs-unit-radius-small)}.--size-medium--m .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium--m .affix,.--size-medium--m .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-medium)}.--size-large--m .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large--m .affix,.--size-large--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge--m .affix,.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (min-width:900px){.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x1);border-radius:var(--rs-unit-radius-small)}.--size-medium--l .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium--l .affix,.--size-medium--l .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-medium)}.--size-large--l .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large--l .affix,.--size-large--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge--l .affix,.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (min-width:1280px){.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x1);border-radius:var(--rs-unit-radius-small)}.--size-medium--xl .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium--xl .affix,.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-medium)}.--size-large--xl .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large--xl .affix,.--size-large--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge--xl .affix,.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}
+.root{--rs-p-v:var(--rs-unit-x1);--rs-p-h:calc(var(--rs-unit-x1) + var(--rs-text-field-gap));background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-p-v) - 1px);position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{background:none;border:none;box-sizing:border-box;color:var(--rs-color-foreground-neutral);flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);margin:calc(var(--rs-unit-x1) * -1) 0;outline:none;padding:0 var(--rs-text-field-gap);position:relative;width:100%;z-index:1}.input:-webkit-autofill{-webkit-text-fill-color:var(--rs-color-foreground-neutral);-webkit-background-clip:text}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;position:relative;z-index:5}.icon{pointer-events:none}.affix{color:var(--rs-color-foreground-neutral-faded)}.attachment{align-items:center;display:flex}.attachment--position-start .affix,.attachment--position-start .icon{margin-inline-end:var(--rs-unit-x1);padding-inline-start:var(--rs-text-field-gap)}.attachment--position-start .affix{border-inline-end:1px solid var(--rs-color-border-neutral-faded);padding-inline-end:calc(var(--rs-text-field-gap) + var(--rs-unit-x1))}.attachment--position-end .affix,.attachment--position-end .icon{margin-inline-start:var(--rs-unit-x1);padding-inline-end:var(--rs-text-field-gap)}.attachment--position-end .affix{border-inline-start:1px solid var(--rs-color-border-neutral-faded);padding-inline-start:calc(var(--rs-text-field-gap) + var(--rs-unit-x1))}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-text-field-gap:var(--rs-unit-x1);border-radius:var(--rs-unit-radius-small)}.--size-medium .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium .affix,.--size-medium .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-medium)}.--size-large .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large .affix,.--size-large .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge .affix,.--size-xlarge .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}@media (max-width:659px) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (min-width:660px){.--size-medium--m{--rs-text-field-gap:var(--rs-unit-x1);border-radius:var(--rs-unit-radius-small)}.--size-medium--m .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium--m .affix,.--size-medium--m .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-medium)}.--size-large--m .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large--m .affix,.--size-large--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge--m .affix,.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (min-width:900px){.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x1);border-radius:var(--rs-unit-radius-small)}.--size-medium--l .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium--l .affix,.--size-medium--l .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-medium)}.--size-large--l .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large--l .affix,.--size-large--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge--l .affix,.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (min-width:1280px){.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x1);border-radius:var(--rs-unit-radius-small)}.--size-medium--xl .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium--xl .affix,.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-medium)}.--size-large--xl .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large--xl .affix,.--size-large--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge--xl .affix,.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}

package/components/TextField/tests/TextField.stories.d.ts

@@ -12,3 +12,4 @@ export declare const size: () => React.JSX.Element;
 export declare const affixes: () => React.JSX.Element;
 export declare const slots: () => React.JSX.Element;
 export declare const formControl: () => React.JSX.Element;
+export declare const aligner: () => React.JSX.Element;

package/components/TextField/tests/TextField.stories.js

@@ -3,6 +3,9 @@ import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import IconZap from "../../../icons/Zap.js";
 import TextField from "../index.js";
 import FormControl from "../../FormControl/index.js";
+import View from "../../View/index.js";
+import Text from "../../Text/index.js";
+import Button from "../../Button/index.js";
 export default { title: "Components/TextField" };
 export const value = () => (<Example>
 		<Example.Item title="no value, placeholder">
@@ -98,3 +101,16 @@ export const formControl = () => (<Example>
 			</FormControl>
 		</Example.Item>
 	</Example>);
+export const aligner = () => (<Example>
+		<Example.Item title="aligner">
+			<View gap={2}>
+				<Text variant="featured-2">What problem are you trying to solve?</Text>
+				<TextField.Aligner>
+					<TextField variant="headless" placeholder="Try something like 'I have a job'" name="description"/>
+				</TextField.Aligner>
+				<View.Item>
+					<Button>Next</Button>
+				</View.Item>
+			</View>
+		</Example.Item>
+	</Example>);

package/components/Toast/tests/Toast.stories.js

@@ -20,7 +20,6 @@ const Base = () => {
                     <Button onClick={() => toast.hide(id)}>Show</Button>,
                 ],
             });
-            toast.hide(id);
         }}>
 			Show toast
 		</Button>);

package/components/View/tests/View.stories.js

@@ -501,7 +501,7 @@ export const border = () => (<Example>
 		</Example.Item>
 
 		<Example.Item title="border: positive-faded">
-			<View borderColor="positive" padding={4}>
+			<View borderColor="positive-faded" padding={4}>
 				Content
 			</View>
 		</Example.Item>

package/components/_private/Aligner/Aligner.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Aligner is a utility used across multiple components to apply
+ * negative margin based on the component padding to align its text content
+ * visually with the rest of the page
+ *
+ * It relies on using a data-rs-aligner-target attribute in other components and works based
+ * on the --rs-p, --rs-p-v and --rs-p-h css variables
+ */
+import React from "react";
+import type * as T from "./Aligner.types";
+declare const Aligner: (props: T.Props) => React.JSX.Element;
+export default Aligner;

package/components/_private/Aligner/Aligner.js

@@ -0,0 +1,18 @@
+/**
+ * Aligner is a utility used across multiple components to apply
+ * negative margin based on the component padding to align its text content
+ * visually with the rest of the page
+ *
+ * It relies on using a data-rs-aligner-target attribute in other components and works based
+ * on the --rs-p, --rs-p-v and --rs-p-h css variables
+ */
+import React from "react";
+import { classNames } from "../../../utilities/helpers.js";
+import s from "./Aligner.module.css";
+const Aligner = (props) => {
+    const { side: passedSide = "all", children, className, attributes } = props;
+    const sides = typeof passedSide === "string" ? [passedSide] : passedSide;
+    const rootClassNames = classNames(s.root, sides.map((side) => s[`--side-${side}`]), className);
+    return (React.createElement("div", Object.assign({}, attributes, { className: rootClassNames }), children));
+};
+export default Aligner;

package/components/_private/Aligner/Aligner.module.css

@@ -0,0 +1 @@
+.root [data-rs-aligner-target]{--rs-aligner-p-h:var(--rs-p-h,var(--rs-p));--rs-aligner-p-v:var(--rs-p-v,var(--rs-p))}.root.--side-all [data-rs-aligner-target]{margin:calc(var(--rs-aligner-p-v) * -1) calc(var(--rs-aligner-p-h) * -1)}.root.--side-inline [data-rs-aligner-target],.root.--side-start [data-rs-aligner-target]{margin-inline-start:calc(var(--rs-aligner-p-h) * -1)}.root.--side-end [data-rs-aligner-target],.root.--side-inline [data-rs-aligner-target]{margin-inline-end:calc(var(--rs-aligner-p-h) * -1)}.root.--side-block [data-rs-aligner-target],.root.--side-top [data-rs-aligner-target]{margin-block-start:calc(var(--rs-aligner-p-v) * -1)}.root.--side-block [data-rs-aligner-target],.root.--side-bottom [data-rs-aligner-target]{margin-block-end:calc(var(--rs-aligner-p-v) * -1)}

package/components/_private/Aligner/Aligner.types.d.ts

@@ -0,0 +1,9 @@
+import type * as G from "../../../types/global";
+type Side = "start" | "end" | "top" | "bottom" | "inline" | "block" | "all";
+export type Props = {
+    children: React.ReactElement;
+    side?: Side | Side[];
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};
+export {};

package/components/_private/Aligner/Aligner.types.js

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

package/components/_private/Aligner/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Aligner";
+export type { Props as AlignerProps } from "./Aligner.types";

package/components/_private/Aligner/index.js

@@ -0,0 +1 @@
+export { default } from "./Aligner.js";

package/components/_private/Flyout/FlyoutTrigger.js

@@ -1,30 +1,21 @@
 "use client";
 import React from "react";
-import useHotkeys from "../../../hooks/useHotkeys.js";
-import * as keys from "../../../constants/keys.js";
 import { useFlyoutContext } from "./Flyout.context.js";
 const FlyoutTrigger = (props) => {
     const { children } = props;
-    const { id, triggerElRef, triggerType, flyout, handleFocus, handleBlur, handleMouseEnter, handleMouseLeave, handleClick, handleOpen, trapFocusMode, } = useFlyoutContext();
-    useHotkeys({
-        [`${keys.UP},${keys.DOWN}`]: () => {
-            if (flyout.status !== "idle")
-                return;
-            handleOpen();
-        },
-    }, [handleOpen, flyout.status], { ref: triggerElRef });
+    const { id, triggerElRef, triggerType, flyout, handleFocus, handleBlur, handleMouseEnter, handleMouseLeave, handleClick, trapFocusMode, } = useFlyoutContext();
     let childrenAttributes = {
         onBlur: handleBlur,
         ref: triggerElRef,
     };
-    if (triggerType === "click") {
+    if (triggerType === "click" || trapFocusMode === "action-menu") {
         childrenAttributes.onClick = handleClick;
     }
     if (triggerType === "hover") {
         childrenAttributes.onMouseEnter = handleMouseEnter;
         childrenAttributes.onMouseLeave = handleMouseLeave;
     }
-    if (triggerType === "hover" || triggerType === "focus") {
+    if ((triggerType === "hover" && trapFocusMode !== "action-menu") || triggerType === "focus") {
         childrenAttributes.onFocus = handleFocus;
         childrenAttributes["aria-describedby"] = id;
     }

package/components/_private/Portal/Portal.d.ts

@@ -6,7 +6,7 @@ export declare const usePortalScope: () => T.Context;
  * That gives Portal time to receive scope on first render
  */
 declare const Portal: {
-    (props: T.Props): JSX.Element;
+    (props: T.Props): any;
     Scope: typeof PortalScope;
 };
 declare function PortalScope<T extends HTMLElement>(props: T.ScopeProps<T>): React.JSX.Element;

package/config/tailwind.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTheme = void 0;
-const reshaped_1 = __importDefault(require("../cli/theming/definitions/reshaped"));
-const base_1 = __importDefault(require("../cli/theming/definitions/base"));
+const reshaped_1 = __importDefault(require("../themes/_generator/definitions/reshaped"));
+const base_1 = __importDefault(require("../themes/_generator/definitions/base"));
 const string_1 = require("../utilities/string");
 const color_1 = require("../utilities/color");
 const mergeDefinitions_1 = __importDefault(require("../themes/_generator/utilities/mergeDefinitions"));

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "2.4.4",
+	"version": "2.4.7",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -80,19 +80,19 @@
 	],
 	"devDependencies": {
 		"@size-limit/preset-big-lib": "9.0.0",
-		"@storybook/addon-a11y": "7.4.0",
-		"@storybook/react": "7.4.0",
-		"@storybook/react-vite": "7.4.0",
-		"@testing-library/jest-dom": "6.1.3",
+		"@storybook/addon-a11y": "7.4.6",
+		"@storybook/react": "7.4.6",
+		"@storybook/react-vite": "7.4.6",
+		"@testing-library/jest-dom": "6.1.4",
 		"@testing-library/react": "14.0.0",
-		"@testing-library/user-event": "14.4.3",
+		"@testing-library/user-event": "14.5.1",
 		"@types/events": "3.0.0",
-		"@types/jest": "29.5.4",
-		"@types/node": "20.6.0",
-		"@types/react": "18.2.21",
-		"@types/react-dom": "18.2.7",
-		"@typescript-eslint/eslint-plugin": "6.6.0",
-		"@typescript-eslint/parser": "6.6.0",
+		"@types/jest": "29.5.5",
+		"@types/node": "20.8.6",
+		"@types/react": "18.2.28",
+		"@types/react-dom": "18.2.13",
+		"@typescript-eslint/eslint-plugin": "6.7.5",
+		"@typescript-eslint/parser": "6.7.5",
 		"@vitejs/plugin-react": "4.0.4",
 		"chromatic": "7.1.0",
 		"eslint": "8.49.0",
@@ -104,11 +104,11 @@
 		"eslint-plugin-react": "7.33.2",
 		"eslint-plugin-react-hooks": "4.6.0",
 		"identity-obj-proxy": "3.0.0",
-		"jest": "29.6.4",
-		"jest-environment-jsdom": "29.6.4",
+		"jest": "29.7.0",
+		"jest-environment-jsdom": "29.7.0",
 		"jest-matchmedia-mock": "1.1.0",
-		"lefthook": "1.4.10",
-		"postcss": "8.4.29",
+		"lefthook": "1.5.2",
+		"postcss": "8.4.31",
 		"postcss-cli": "10.1.0",
 		"postcss-each": "1.1.0",
 		"postcss-import": "15.1.0",
@@ -118,7 +118,7 @@
 		"react-dom": "18.2.0",
 		"resolve-tspaths": "0.8.15",
 		"size-limit": "9.0.0",
-		"storybook": "7.4.0",
+		"storybook": "7.4.6",
 		"stylelint": "15.10.3",
 		"stylelint-config-prettier": "9.0.5",
 		"stylelint-config-standard": "34.0.0",
@@ -144,18 +144,23 @@
 	},
 	"size-limit": [
 		{
-			"name": "JS",
+			"name": "Library / JS",
 			"path": "dist/bundle.js",
 			"webpack": false
 		},
 		{
-			"name": "CSS",
+			"name": "Library / CSS",
 			"path": "dist/bundle.css",
 			"webpack": false
 		},
 		{
-			"name": "JS Theming engine",
-			"path": "dist/themes/index.js",
+			"name": "Theming / JS",
+			"path": "dist/tests/themingWithoutDefinition.js",
+			"webpack": true
+		},
+		{
+			"name": "Theming with a default theme definition / JS",
+			"path": "dist/tests/themingWithDefinition.js",
 			"webpack": true
 		}
 	],

package/themes/_generator/definitions/base.d.ts

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

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

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

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

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

package/{cli/theming → themes/_generator}/definitions/reshaped.js

@@ -1,5 +1,9 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+const generateColors_1 = __importDefault(require("../utilities/generateColors"));
 const theme = {
     fontFamily: {
         title: {
@@ -101,44 +105,7 @@ const theme = {
         radiusMedium: { px: 8 },
         radiusLarge: { px: 12 },
     },
-    color: {
-        foregroundNeutral: { hex: "#14171F", hexDark: "#EFF0F1" },
-        foregroundNeutralFaded: { hex: "#4D5874", hexDark: "#C2C8D6" },
-        foregroundDisabled: { hex: "#C7CDDB", hexDark: "#404A63" },
-        foregroundPrimary: { hex: "#4D4BE7", hexDark: "#9D9CF7" },
-        foregroundPositive: { hex: "#05751F", hexDark: "#03AB5F" },
-        foregroundCritical: { hex: "#CB101D", hexDark: "#EB6666" },
-        backgroundNeutral: { hex: "#DFE2EA", hexDark: "#384056" },
-        backgroundNeutralFaded: { hex: "#F3F4F6", hexDark: "#242838" },
-        backgroundNeutralHighlighted: { hex: "#D4D8E3", hexDark: "#404A63" },
-        backgroundDisabled: { hex: "#ECEEF3", hexDark: "#1C202B" },
-        backgroundDisabledFaded: { hex: "#F4F5F7", hexDark: "#161922" },
-        backgroundPrimary: { hex: "#5A58F2", hexDark: "#5250F2" },
-        backgroundPrimaryHighlighted: { hex: "#6d6bf5", hexDark: "#5f5df4" },
-        backgroundPrimaryFaded: { hex: "#EDECFD", hexDark: "#24254C" },
-        backgroundPositive: { hex: "#118850", hexDark: "#06743F" },
-        backgroundPositiveFaded: { hex: "#EBFEF6", hexDark: "#0F2921" },
-        backgroundPositiveHighlighted: { hex: "#009950", hexDark: "#008545" },
-        backgroundCritical: { hex: "#E22C2C", hexDark: "#AB1717" },
-        backgroundCriticalFaded: { hex: "#FEF1F2", hexDark: "#2F1E1F" },
-        backgroundCriticalHighlighted: { hex: "#eb4747", hexDark: "#c11515" },
-        borderNeutral: { hex: "#BBC1D3", hexDark: "#49536F" },
-        borderNeutralFaded: { hex: "#DFE2EA", hexDark: "#313649" },
-        borderDisabled: { hex: "#DFE2EA", hexDark: "#242938" },
-        borderPrimary: { hex: "#4D4BE7", hexDark: "#7D7BF4" },
-        borderPrimaryFaded: { hex: "#D7D5FB", hexDark: "#2E3160" },
-        borderPositive: { hex: "#05751F", hexDark: "#03A059" },
-        borderPositiveFaded: { hex: "#CDEDD5", hexDark: "#163C30" },
-        borderCritical: { hex: "#CB101D", hexDark: "#E95454" },
-        borderCriticalFaded: { hex: "#FBD5D8", hexDark: "#412A2B" },
-        backgroundPage: { hex: "#FFFFFF", hexDark: "#0D1117" },
-        backgroundPageFaded: { hex: "#FAFAFA", hexDark: "#0F131A" },
-        backgroundElevationBase: { hex: "#FFFFFF", hexDark: "#14181f" },
-        backgroundElevationRaised: { hex: "#FFFFFF", hexDark: "#181D25" },
-        backgroundElevationOverlay: { hex: "#FFFFFF", hexDark: "#1C212B" },
-        black: { hex: "#000000" },
-        white: { hex: "#FFFFFF" },
-    },
+    color: (0, generateColors_1.default)(),
     duration: {
         fast: { ms: 200 },
         medium: { ms: 300 },

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

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

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

@@ -3,4 +3,5 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const behavior: () => React.JSX.Element;
+export declare const base: () => React.JSX.Element;
+export declare const generation: () => React.JSX.Element;

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

@@ -1,8 +1,13 @@
 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 DropdownMenu from "../../../components/DropdownMenu/index.js";
 import Theme from "../../../components/Theme/index.js";
-import { getThemeCSS } from "../../index.js";
+import { getThemeCSS, generateThemeColors, baseThemeDefinition } from "../../index.js";
 export default { title: "Themes" };
 const css = getThemeCSS("green", {
     color: {
@@ -16,7 +21,64 @@ const css2 = getThemeCSS("peach", {
         backgroundPrimaryHighlighted: { hex: "#ffbe76" },
     },
 });
-export const behavior = () => (<Example>
+const cssGenerated = getThemeCSS("generated", Object.assign(Object.assign({}, baseThemeDefinition), { color: generateThemeColors({ primary: "#2563eb" }) }));
+const componentExamples = (<View gap={4}>
+		<View gap={2} direction="row">
+			<Button color="primary">Primary button</Button>
+			<Button color="critical">Primary button</Button>
+			<Button color="positive">Primary button</Button>
+			<Button color="neutral">Primary button</Button>
+		</View>
+		<View gap={2} direction="row">
+			<Button color="primary" variant="outline">
+				Primary button
+			</Button>
+			<Button color="critical" variant="outline">
+				Primary button
+			</Button>
+			<Button color="positive" variant="outline">
+				Primary button
+			</Button>
+			<Button color="neutral" variant="outline">
+				Primary button
+			</Button>
+		</View>
+		<View direction="row" gap={4}>
+			<View.Item columns={6}>
+				<Alert color="primary">Primary</Alert>
+			</View.Item>
+			<View.Item columns={6}>
+				<Alert color="critical">Critical</Alert>
+			</View.Item>
+			<View.Item columns={6}>
+				<Alert color="positive">Positive</Alert>
+			</View.Item>
+			<View.Item columns={6}>
+				<Alert color="neutral">Neutral</Alert>
+			</View.Item>
+			<View.Item columns={6}>
+				<Card>
+					<View gap={2} align="start">
+						<Badge variant="outline" color="primary">
+							Badge
+						</Badge>
+						<DropdownMenu>
+							<DropdownMenu.Trigger>
+								{(attributes) => (<Button variant="faded" attributes={attributes}>
+										Menu
+									</Button>)}
+							</DropdownMenu.Trigger>
+							<DropdownMenu.Content>
+								<DropdownMenu.Item>Item 1</DropdownMenu.Item>
+								<DropdownMenu.Item>Item 1</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu>
+					</View>
+				</Card>
+			</View.Item>
+		</View>
+	</View>);
+export const base = () => (<Example>
 		<Example.Item title="custom runtime theme">
 			<style>{css}</style>
 			<Theme name="green">
@@ -30,3 +92,14 @@ export const behavior = () => (<Example>
 			</Theme>
 		</Example.Item>
 	</Example>);
+export const generation = () => (<Example>
+		<Example.Item title="base">
+			<style>{cssGenerated}</style>
+			<View gap={4}>
+				<View.Item>Generated theme</View.Item>
+				<Theme name="generated">{componentExamples}</Theme>
+				{/* <View.Item>Reshaped theme</View.Item> */}
+				{/* <Theme name="reshaped">{componentExamples}</Theme> */}
+			</View>
+		</Example.Item>
+	</Example>);

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

@@ -0,0 +1,20 @@
+/**
+ * Some of the color conversion utilities are taken from https://github.com/hsluv/hsluv-javascript
+ * They have been rewritten for easier color transformations in the theme generation case
+ */
+type RgbColor = {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function hexToRgb(hex: string): RgbColor;
+export declare function getRgbLuminance({ r, g, b }: RgbColor): number;
+declare const generate: (args?: {
+    primary?: string;
+    critical?: string;
+    positive?: string;
+    neutral?: string;
+}) => Record<import("../tokens/color/color.types").Name, import("../tokens/color/color.types").Token> & {
+    [tokenName: string]: import("../tokens/color/color.types").Token;
+};
+export default generate;