reshaped 2.7.5-beta.0 → 2.8.0

package/components/View/View.types.d.ts

@@ -17,6 +17,8 @@ export type Props<TagName extends keyof JSX.IntrinsicElements = "div"> = {
     aspectRatio?: G.Responsive<number>;
     maxHeight?: G.Responsive<string | number>;
     maxWidth?: G.Responsive<string | number>;
+    minHeight?: G.Responsive<string | number>;
+    minWidth?: G.Responsive<string | number>;
     padding?: G.Responsive<number>;
     paddingTop?: G.Responsive<number>;
     paddingBottom?: G.Responsive<number>;
@@ -37,7 +39,7 @@ export type Props<TagName extends keyof JSX.IntrinsicElements = "div"> = {
     insetBottom?: G.Responsive<number>;
     zIndex?: number;
     shadow?: "raised" | "overlay";
-    overflow?: "hidden";
+    overflow?: "hidden" | "auto";
     animated?: boolean;
     className?: G.ClassName;
     attributes?: G.Attributes<TagName>;

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

@@ -15,6 +15,7 @@ export declare const textAlign: () => React.JSX.Element;
 export declare const size: () => React.JSX.Element;
 export declare const ratio: () => React.JSX.Element;
 export declare const maxSize: () => React.JSX.Element;
+export declare const minSize: () => React.JSX.Element;
 export declare const background: () => React.JSX.Element;
 export declare const border: () => React.JSX.Element;
 export declare const radius: () => React.JSX.Element;

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

@@ -380,6 +380,21 @@ export const maxSize = () => (<Example>
 			<View backgroundColor="neutral-faded" maxHeight={{ s: 25, m: "200px" }} maxWidth={{ s: 25, m: "200px" }} height="300px"/>
 		</Example.Item>
 	</Example>);
+export const minSize = () => (<Example>
+		<Example.Item title="minHeight: 150px, minWidth: 150px, height: 50px, width: 50px">
+			<View backgroundColor="neutral-faded" minHeight="150px" minWidth="150px" height="50px" width="50px"/>
+		</Example.Item>
+		<Example.Item title="minHeight: 25, minWidth: 25, height: 5, width: 5">
+			<View backgroundColor="neutral-faded" minHeight={25} minWidth={25} height={5} width={5}/>
+		</Example.Item>
+		<Example.Item title={[
+        "responsive minHeight and minWidth, height: 50px, width: 50px",
+        "[s] minHeight: 25, minWidth: 25",
+        "[m+] minHeight: 200px, minWidth: 200px",
+    ]}>
+			<View backgroundColor="neutral-faded" minHeight={{ s: 25, m: "200px" }} minWidth={{ s: 25, m: "200px" }} height="50px" width="50px"/>
+		</Example.Item>
+	</Example>);
 export const background = () => (<Example title="border is used to highlight the backround value when it's similar to the page background, text color changes based on the background">
 		<Example.Item title="bg: page">
 			<View backgroundColor="page" borderColor="neutral" padding={4}>

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.0",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -80,60 +80,56 @@
 		"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",
@@ -144,7 +140,7 @@
 		"@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": {

package/styles/bleed/bleed.module.css

@@ -1 +1 @@
-.root{--rs-bleed-s:0;--rs-bleed-m:var(--rs-bleed-s);--rs-bleed-l:var(--rs-bleed-m);--rs-bleed-xl:var(--rs-bleed-l);--rs-bleed:var(--rs-bleed-s);margin-left:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);margin-right:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1)}.--bleed{border-left-style:none!important;border-radius:0;border-right-style:none!important}@media (--rs-viewport-m ){.root{--rs-bleed:var(--rs-bleed-m)}.--bleed-true--m{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--m{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}@media (--rs-viewport-l ){.root{--rs-bleed:var(--rs-bleed-l)}.--bleed-true--l{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--l{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}@media (--rs-viewport-xl ){.root{--rs-bleed:var(--rs-bleed-xl)}.--bleed-true--xl{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--xl{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}
+.root{margin-left:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);margin-right:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);--rs-bleed-s:0;--rs-bleed-m:var(--rs-bleed-s);--rs-bleed-l:var(--rs-bleed-m);--rs-bleed-xl:var(--rs-bleed-l);--rs-bleed:var(--rs-bleed-s)}.--bleed{border-left-style:none!important;border-radius:0;border-right-style:none!important}@media (--rs-viewport-m ){.root{--rs-bleed:var(--rs-bleed-m)}.--bleed-true--m{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--m{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}@media (--rs-viewport-l ){.root{--rs-bleed:var(--rs-bleed-l)}.--bleed-true--l{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--l{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}@media (--rs-viewport-xl ){.root{--rs-bleed:var(--rs-bleed-xl)}.--bleed-true--xl{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--xl{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}

package/styles/minHeight/index.d.ts

@@ -0,0 +1,3 @@
+import * as T from "../types";
+declare const getMinWidthStyles: T.DynamicStyleUtility<string | number>;
+export default getMinWidthStyles;

package/styles/minHeight/index.js

@@ -0,0 +1,10 @@
+import { responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+import s from "./minHeight.module.css";
+const getMinWidthStyles = (value) => {
+    if (!value)
+        return null;
+    const variables = responsiveVariables("--rs-min-h", value);
+    const classNames = responsiveClassNames(s, (value) => (typeof value === "number" ? "unit" : "literal"), value, { excludeValueFromClassName: true });
+    return { classNames, variables };
+};
+export default getMinWidthStyles;

package/styles/minHeight/minHeight.module.css

@@ -0,0 +1 @@
+.literal{min-height:var(--rs-min-h-s,auto)}.unit{min-height:calc(var(--rs-min-h-s) * var(--rs-unit-x1))}@media (--rs-viewport-m ){.literal--m{min-height:var(--rs-min-h-m)}.unit--m{min-height:calc(var(--rs-min-h-m) * var(--rs-unit-x1))}}@media (--rs-viewport-l ){.literal--l{min-height:var(--rs-min-h-l)}.unit--l{min-height:calc(var(--rs-min-h-l) * var(--rs-unit-x1))}}@media (--rs-viewport-xl ){.literal--xl{min-height:var(--rs-min-h-xl)}.unit--xl{min-height:calc(var(--rs-min-h-xl) * var(--rs-unit-x1))}}

package/styles/padding/padding.module.css

@@ -1 +1 @@
-.root{--rs-p-s:0;--rs-p-m:var(--rs-p-s);--rs-p-l:var(--rs-p-m);--rs-p-xl:var(--rs-p-l);--rs-p:var(--rs-p-s);padding:calc(var(--rs-p) * var(--rs-unit-x1))}@media (--rs-viewport-m ){.root{--rs-p:var(--rs-p-m)}}@media (--rs-viewport-l ){.root{--rs-p:var(--rs-p-l)}}@media (--rs-viewport-xl ){.root{--rs-p:var(--rs-p-xl)}}
+.root{padding:calc(var(--rs-p) * var(--rs-unit-x1));--rs-p-s:0;--rs-p-m:var(--rs-p-s);--rs-p-l:var(--rs-p-m);--rs-p-xl:var(--rs-p-l);--rs-p:var(--rs-p-s)}@media (--rs-viewport-m ){.root{--rs-p:var(--rs-p-m)}}@media (--rs-viewport-l ){.root{--rs-p:var(--rs-p-l)}}@media (--rs-viewport-xl ){.root{--rs-p:var(--rs-p-xl)}}

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

@@ -52,7 +52,7 @@ const componentExamples = (<View gap={4}>
 				<Alert color="critical">Critical</Alert>
 			</View.Item>
 			<View.Item columns={6}>
-				<Alert color="warning">warning</Alert>
+				<Alert color="warning">Warning</Alert>
 			</View.Item>
 			<View.Item columns={6}>
 				<Alert color="positive">Positive</Alert>
@@ -80,6 +80,29 @@ const componentExamples = (<View gap={4}>
 					<Badge color="warning">Warning</Badge>
 				</View>
 			</View.Item>
+			<View.Item columns={12}>
+				<View direction="row">
+					<View padding={4} gap={4} backgroundColor="page">
+						Page
+						<View backgroundColor="neutral" padding={4}>
+							Neutral
+						</View>
+						<View backgroundColor="neutral-faded" padding={4}>
+							Neutral faded
+						</View>
+					</View>
+
+					<View padding={4} gap={4} backgroundColor="page-faded">
+						Page faded
+						<View backgroundColor="neutral" padding={4}>
+							Neutral
+						</View>
+						<View backgroundColor="neutral-faded" padding={4}>
+							Neutral faded
+						</View>
+					</View>
+				</View>
+			</View.Item>
 			<View.Item columns={6}>
 				<Card>
 					<View gap={2} align="start">

package/themes/_generator/utilities/generateColors.js

@@ -23,15 +23,15 @@ const generateColorValues = (args) => {
     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 sturationModifier = hsl.s / 40;
-    const bgFadedHex = (0, color_1.rgbToHex)((0, color_1.hslToRgb)(Object.assign(Object.assign({}, hsl), { l: 98 - sturationModifier })));
+    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 + sturationModifier }));
+    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}`]: {