reshaped 2.7.5-beta.0 → 2.8.1

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

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const color_1 = require("./color");
+/**
+ * Generator
+ */
+const FG_L_DARK = 62;
+const generateColorValues = (args) => {
+    const { key, hex } = args;
+    const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
+    const hsl = (0, color_1.hexToHsl)(hex);
+    const rgb = (0, color_1.hexToRgb)(hex);
+    const hsluv = (0, color_1.hexToHsluv)(hex);
+    const luminance = (0, color_1.getRgbLuminance)(rgb);
+    const luminanceDelta = (0, color_1.getLuminanceDelta)(luminance);
+    const hslDark = (0, color_1.getDarkModeColor)(hsl);
+    const bgHex = hex;
+    const bgHexDark = (0, color_1.hslToHex)(hslDark);
+    const hsluvDark = (0, color_1.hexToHsluv)(bgHexDark);
+    const bdHex = (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluv), { l: hsluv.l - 5 - luminanceDelta }));
+    const bdHexDark = (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: key === "neutral" ? 35 : FG_L_DARK }));
+    const fgHsluv = Object.assign(Object.assign({}, hsluv), { l: 43 });
+    const fgHsluvDark = Object.assign(Object.assign({}, hsluv), { l: key === "neutral" ? 80 : FG_L_DARK });
+    const fgHex = (0, color_1.hsluvToHex)(fgHsluv);
+    const fgHexDark = (0, color_1.hsluvToHex)(fgHsluvDark);
+    const saturationModifier = hsl.s / 40;
+    const bgFadedHex = (0, color_1.rgbToHex)((0, color_1.hslToRgb)(Object.assign(Object.assign({}, hsl), { l: 98 - saturationModifier - (key === "neutral" ? 2 : 0) })));
+    const bgFadedHsluv = (0, color_1.hexToHsluv)(bgFadedHex);
+    const bgFadedHsluvDark = Object.assign(Object.assign({}, hsluv), { l: 16, s: 32 });
+    const bgFadedHexDark = (0, color_1.hsluvToHex)(bgFadedHsluvDark);
+    const fadedLuminance = (0, color_1.getRgbLuminance)((0, color_1.hexToRgb)(bgFadedHex));
+    const fadedLuminanceDark = (0, color_1.getRgbLuminance)((0, color_1.hexToRgb)(bgFadedHexDark));
+    const fadedLuminanceDeltaDark = (0, color_1.getLuminanceDelta)(fadedLuminanceDark);
+    const bdFadedHex = (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, bgFadedHsluv), { s: Math.max(0, bgFadedHsluv.s - 6 - Math.max(0, fadedLuminance - 98) * 20), l: bgFadedHsluv.l - 7 + saturationModifier }));
+    const bdFadedHexDark = (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, bgFadedHsluvDark), { s: 40, l: bgFadedHsluvDark.l + 7 - fadedLuminanceDeltaDark }));
+    const output = {
+        [`background${capitalizedKey}`]: {
+            hex: bgHex,
+            hexDark: bgHexDark,
+        },
+        [`background${capitalizedKey}Faded`]: {
+            hex: bgFadedHex,
+            hexDark: bgFadedHexDark,
+        },
+        [`background${capitalizedKey}Highlighted`]: {
+            hex: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluv), { l: hsluv.l - 4 })),
+            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: hsluvDark.l + 4 })),
+        },
+        [`border${capitalizedKey}`]: {
+            hex: bdHex,
+            hexDark: bdHexDark,
+        },
+        [`border${capitalizedKey}Faded`]: {
+            hex: bdFadedHex,
+            hexDark: bdFadedHexDark,
+        },
+        [`foreground${capitalizedKey}`]: {
+            hex: fgHex,
+            hexDark: fgHexDark,
+        },
+    };
+    if (key === "neutral") {
+        output[`foreground${capitalizedKey}`] = {
+            hex: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, fgHsluv), { l: 8 })),
+            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, fgHsluvDark), { l: 95 })),
+        };
+        output[`foreground${capitalizedKey}Faded`] = {
+            hex: fgHex,
+            hexDark: fgHexDark,
+        };
+        output[`backgroundDisabled`] = {
+            hex: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluv), { l: 94 })),
+            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: 13 })),
+        };
+        output[`backgroundDisabledFaded`] = {
+            hex: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluv), { l: 97 })),
+            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: 9 })),
+        };
+        output[`borderDisabled`] = {
+            hex: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluv), { l: 90 })),
+            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: 17 })),
+        };
+        output[`foregroundDisabled`] = {
+            hex: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluv), { l: 82 })),
+            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: 31 })),
+        };
+        output[`backgroundElevationBase`] = {
+            hex: "#ffffff",
+            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: 8 })),
+        };
+        output[`backgroundElevationRaised`] = {
+            hex: "#ffffff",
+            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: 10 })),
+        };
+        output[`backgroundElevationOverlay`] = {
+            hex: "#ffffff",
+            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: 12 })),
+        };
+        output[`backgroundPage`] = {
+            hex: "#ffffff",
+            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: 5 })),
+        };
+        output[`backgroundPageFaded`] = {
+            hex: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluv), { l: 98 })),
+            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: 6 })),
+        };
+    }
+    else {
+        output[`foreground${capitalizedKey}`] = {
+            hex: fgHex,
+            hexDark: fgHexDark,
+        };
+    }
+    return output;
+};
+const validateHexColor = (color) => {
+    const hexColorRegex = /^#([A-Fa-f0-9]{3}){2}$/;
+    if (!hexColorRegex.test(color)) {
+        throw new Error(`Invalid hex color: ${color}`);
+    }
+    return color;
+};
+const generate = (args = {}) => {
+    const { primary = "#5a58f2", critical = "#e22c2c", warning = "#facc15", positive = "#118850", neutral = "#dfe2ea", brand, } = args;
+    const primaryColors = generateColorValues({
+        key: "primary",
+        hex: validateHexColor(primary),
+    });
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, primaryColors), generateColorValues({ key: "critical", hex: validateHexColor(critical) })), generateColorValues({ key: "warning", hex: validateHexColor(warning) })), generateColorValues({ key: "positive", hex: validateHexColor(positive) })), generateColorValues({ key: "neutral", hex: validateHexColor(neutral) })), { brand: { hex: brand || primary }, white: { hex: "#ffffff" }, black: { hex: "#000000" } });
+};
+exports.default = generate;

package/dist/themes/_generator/utilities/tests/generateColors.test.d.ts

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

package/dist/types/global.js

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

package/dist/utilities/storybook/Example.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+type Props = {
+    title?: string | string[];
+    children?: React.ReactNode;
+};
+declare const Example: {
+    (props: {
+        children: React.ReactNode;
+        title?: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    Item: (props: Props) => import("react/jsx-runtime").JSX.Element;
+};
+export default Example;

package/dist/utilities/storybook/Example.js

@@ -0,0 +1,14 @@
+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 s from "./Example.module.css";
+const Example = (props) => {
+    return (_jsxs(View, { gap: 3, attributes: props.title ? { style: { marginTop: -17 } } : undefined, children: [props.title && (_jsx(View, { bleed: 4, paddingInline: 4, paddingBlock: 3, backgroundColor: "neutral-faded", borderColor: "neutral-faded", position: "sticky", insetTop: 0, zIndex: 100, children: props.title })), props.children] }));
+};
+const ExampleItem = (props) => {
+    const { children } = props;
+    const title = typeof props.title === "string" ? [props.title] : props.title;
+    return (_jsxs(View, { borderColor: "neutral-faded", borderRadius: "medium", overflow: "hidden", children: [title && (_jsx(View, { paddingInline: 4, paddingBlock: 3, backgroundColor: "neutral-faded", children: title.map((line, index) => (_jsx(Text, { variant: "body-3", color: index > 0 ? "neutral-faded" : "neutral", children: line }, index))) })), _jsx(View, { padding: 4, className: s.root, children: children })] }));
+};
+Example.Item = ExampleItem;
+export default Example;

package/dist/utilities/storybook/Placeholder.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type Props = {
+    w?: string | number;
+    h?: string | number;
+    children?: React.ReactNode;
+    inverted?: boolean;
+};
+declare const Placeholder: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default Placeholder;

package/dist/utilities/storybook/Placeholder.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const Placeholder = (props) => {
+    const { w = "auto", h = 50, children } = props;
+    return (_jsx("div", { style: {
+            width: w,
+            height: h,
+            minWidth: h,
+            padding: "var(--rs-unit-x2)",
+            background: "rgba(var(--rs-color-rgb-background-neutral), 0.32)",
+            boxSizing: "border-box",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: "var(--rs-unit-radius-small)",
+        }, children: children }));
+};
+export default Placeholder;

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.7.5-beta.0",
+	"version": "2.8.1",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -25,34 +25,69 @@
 		"type": "git",
 		"url": "https://github.com/formaat-design/reshaped"
 	},
-	"main": "./index.js",
-	"module": "./index.js",
-	"types": "./index.d.ts",
-	"files": [
-		"bin/**/*",
-		"cli/**/*",
-		"components/**/*",
-		"config/**/*",
-		"constants/**/*",
-		"hooks/**/*",
-		"icons/**/*",
-		"styles/**/*",
-		"themes/**/*",
-		"types/**/*",
-		"utilities/**/*",
-		"bundle.css",
-		"bundle.d.ts",
-		"bundle.js",
-		"index.d.ts",
-		"index.js"
-	],
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		},
+		"./themes": {
+			"import": "./dist/index.js",
+			"require": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		},
+		"./themes/reshaped/theme.css": {
+			"import": "./dist/themes/reshaped/theme.css"
+		},
+		"./themes/slate/theme.css": {
+			"import": "./dist/themes/slate/theme.css"
+		},
+		"./themes/figma/theme.css": {
+			"import": "./dist/themes/figma/theme.css"
+		},
+		"./themes/fragments/twitter/theme.css": {
+			"import": "./dist/themes/fragments/twitter/theme.css"
+		},
+		"./bundle": {
+			"import": "./dist/bundle.js",
+			"types": "./dist/bundle.d.ts"
+		},
+		"./bundle.css": {
+			"import": "./dist/bundle.css"
+		},
+		"./config/postcss": {
+			"import": "./dist/config/postcss.js",
+			"require": "./dist/config/postcss.js",
+			"types": "./dist/config/postcss.d.ts"
+		},
+		"./config/tailwind": {
+			"import": "./dist/config/tailwind.js",
+			"require": "./dist/config/tailwind.js",
+			"types": "./dist/config/tailwind.d.ts"
+		},
+		"./config/postcss.js": {
+			"import": "./dist/config/postcss.js",
+			"require": "./dist/config/postcss.js",
+			"types": "./dist/config/postcss.d.ts"
+		},
+		"./config/tailwind.js": {
+			"import": "./dist/config/tailwind.js",
+			"require": "./dist/config/tailwind.js",
+			"types": "./dist/config/tailwind.d.ts"
+		}
+	},
 	"bin": {
 		"reshaped": "./bin/cli.js"
 	},
+	"files": [
+		"bin/**/*",
+		"dist/**/*"
+	],
 	"scripts": {
 		"dev": "storybook dev -c tools/storybook -p 3001 --disable-telemetry",
 		"clean": "sh ./bin/clean.sh",
-		"build": "yarn clean && yarn build:stories && yarn build:esm && yarn build:cjs && yarn build:css && yarn build:bundle && resolve-tspaths && cp -r dist/* ./",
+		"build": "yarn clean && yarn build:stories && yarn build:esm && yarn build:cjs && yarn build:css && yarn build:bundle && resolve-tspaths",
 		"build:themes": "node bin/cli.js theming --config cli/theming/reshaped.config.js --output src/themes",
 		"build:esm": "tsc -p tsconfig.esm.json",
 		"build:cjs": "tsc -p tsconfig.cjs.json",
@@ -80,71 +115,67 @@
 		"defaults and not IE 11"
 	],
 	"devDependencies": {
-		"@commitlint/cli": "18.4.2",
-		"@commitlint/config-conventional": "18.4.2",
-		"@commitlint/types": "18.4.0",
-		"@semantic-release/changelog": "6.0.3",
-		"@semantic-release/git": "10.0.1",
-		"@size-limit/preset-big-lib": "9.0.0",
-		"@storybook/addon-a11y": "7.6.3",
-		"@storybook/react": "7.6.3",
-		"@storybook/react-vite": "7.6.3",
-		"@testing-library/jest-dom": "6.1.4",
+		"@commitlint/cli": "18.4.3",
+		"@commitlint/config-conventional": "18.4.3",
+		"@commitlint/types": "18.4.3",
+		"@size-limit/preset-big-lib": "11.0.1",
+		"@storybook/addon-a11y": "7.6.6",
+		"@storybook/react": "7.6.6",
+		"@storybook/react-vite": "7.6.6",
+		"@testing-library/jest-dom": "6.1.6",
 		"@testing-library/react": "14.1.2",
-		"@testing-library/user-event": "14.5.1",
+		"@testing-library/user-event": "14.5.2",
 		"@types/events": "3.0.3",
-		"@types/jest": "29.5.8",
-		"@types/node": "20.9.2",
-		"@types/react": "18.2.37",
-		"@types/react-dom": "18.2.15",
-		"@typescript-eslint/eslint-plugin": "6.11.0",
-		"@typescript-eslint/parser": "6.11.0",
-		"@vitejs/plugin-react": "4.2.0",
-		"chromatic": "9.1.0",
+		"@types/jest": "29.5.11",
+		"@types/node": "20.10.6",
+		"@types/react": "18.2.46",
+		"@types/react-dom": "18.2.18",
+		"@typescript-eslint/eslint-plugin": "6.16.0",
+		"@typescript-eslint/parser": "6.16.0",
+		"@vitejs/plugin-react": "4.2.1",
+		"chromatic": "10.2.0",
 		"cz-conventional-changelog": "3.3.0",
-		"eslint": "8.54.0",
+		"eslint": "8.56.0",
 		"eslint-config-airbnb-typescript": "17.1.0",
-		"eslint-config-prettier": "9.0.0",
-		"eslint-plugin-import": "2.29.0",
+		"eslint-config-prettier": "9.1.0",
+		"eslint-plugin-import": "2.29.1",
 		"eslint-plugin-jsx-a11y": "6.8.0",
-		"eslint-plugin-prettier": "5.0.1",
+		"eslint-plugin-prettier": "5.1.2",
 		"eslint-plugin-react": "7.33.2",
 		"eslint-plugin-react-hooks": "4.6.0",
 		"identity-obj-proxy": "3.0.0",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",
 		"jest-matchmedia-mock": "1.1.0",
-		"lefthook": "1.5.2",
-		"postcss": "8.4.31",
-		"postcss-cli": "10.1.0",
+		"lefthook": "1.5.5",
+		"postcss": "8.4.32",
+		"postcss-cli": "11.0.0",
 		"postcss-each": "1.1.0",
-		"postcss-import": "15.1.0",
 		"postcss-nested": "6.0.1",
-		"prettier": "3.1.0",
+		"prettier": "3.1.1",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"resolve-tspaths": "0.8.17",
-		"semantic-release": "22.0.8",
-		"size-limit": "9.0.0",
-		"storybook": "7.6.3",
+		"size-limit": "11.0.1",
+		"storybook": "7.6.6",
 		"stylelint": "15.11.0",
 		"stylelint-config-prettier": "9.0.5",
 		"stylelint-config-standard": "34.0.0",
 		"ts-jest": "29.1.1",
-		"typescript": "5.2.2",
-		"vite": "4",
-		"vite-tsconfig-paths": "4.2.1"
+		"typescript": "5.3.3",
+		"vite": "5.0.10",
+		"vite-tsconfig-paths": "4.2.3"
 	},
 	"peerDependencies": {
-		"postcss": "^8.0.0",
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
+		"postcss": "^8",
+		"react": "^18",
+		"react-dom": "^18"
 	},
 	"dependencies": {
 		"@csstools/postcss-global-data": "2.1.1",
 		"chalk": "4.1.2",
 		"commander": "11.1.0",
-		"cssnano": "6.0.1",
+		"cssnano": "6.0.2",
 		"postcss-custom-media": "10.0.2"
 	},
 	"resolutions": {