reshaped 2.7.4 → 2.8.0

package/config/tailwind.d.ts

@@ -1,2 +1,2 @@
-import { UserThemeDefinition } from "../themes/_generator/tokens/types";
-export declare const getTheme: (theme?: UserThemeDefinition) => Record<"backgroundColor" | "textColor" | "borderColor" | "colors" | "borderRadius" | "spacing" | "boxShadow" | "screens", Record<string, string>>;
+import { ThemeDefinition } from "../themes/_generator/tokens/types";
+export declare const getTheme: (theme?: ThemeDefinition) => Record<"backgroundColor" | "textColor" | "borderColor" | "colors" | "borderRadius" | "spacing" | "boxShadow" | "screens", Record<string, string>>;

package/config/tailwind.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTheme = void 0;
 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 mergeDefinitions_1 = __importDefault(require("../themes/_generator/utilities/mergeDefinitions"));
 const constants_1 = require("../themes/_generator/constants");
@@ -81,7 +80,7 @@ const getTheme = (theme) => {
         config.boxShadow[name] = configValue;
         return;
     });
-    Object.entries(base_1.default.viewport).forEach(([tokenName, tokenValue]) => {
+    Object.entries(definition.viewport).forEach(([tokenName, tokenValue]) => {
         if (!tokenValue.minPx)
             return;
         config.screens[tokenName] = `${tokenValue.minPx}px`;

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.4",
+	"version": "2.8.0",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -53,10 +53,10 @@
 		"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:themes": "node bin/cli.js theming --config cli/theming/reshaped.config.js --output src/themes --private",
+		"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",
-		"build:css": "postcss \"src/**/*.css\" --dir dist --base src --config tools/build && cp -rp src/themes/media.css dist/themes/media.css && mkdir themes && cp -r src/themes/media.css themes/media.css",
+		"build:css": "postcss \"src/**/*.css\" --dir dist --base src --config tools/build",
 		"build:stories": "tsc -p tsconfig.stories.json",
 		"build:bundle": "vite build && mv dist/bundle.umd.js dist/bundle.js && cp dist/index.d.ts dist/bundle.d.ts",
 		"build:storybook": "storybook build -c tools/storybook -o dist/app --disable-telemetry",
@@ -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",
@@ -141,11 +137,11 @@
 		"react-dom": "^18.0.0"
 	},
 	"dependencies": {
-		"autoprefixer": "10.4.16",
+		"@csstools/postcss-global-data": "2.1.1",
 		"chalk": "4.1.2",
 		"commander": "11.1.0",
-		"cssnano": "6.0.1",
-		"postcss-custom-media": "8.0.2"
+		"cssnano": "6.0.2",
+		"postcss-custom-media": "10.0.2"
 	},
 	"resolutions": {
 		"jackspeak": "2.1.1"

package/styles/aspectRatio/aspectRatio.module.css

@@ -1 +1 @@
-.root:empty,.root:not(:empty)>*{aspect-ratio:var(--rs-ratio)}.root>img{-o-object-fit:cover;object-fit:cover}.root{--rs-ratio-s:0;--rs-ratio-m:var(--rs-ratio-s);--rs-ratio-l:var(--rs-ratio-m);--rs-ratio-xl:var(--rs-ratio-l);--rs-ratio:var(--rs-ratio-s)}@media (min-width:660px){.root{--rs-ratio:var(--rs-ratio-m)}}@media (min-width:900px){.root{--rs-ratio:var(--rs-ratio-l)}}@media (min-width:1280px){.root{--rs-ratio:var(--rs-ratio-xl)}}
+.root:empty,.root:not(:empty)>*{aspect-ratio:var(--rs-ratio)}.root>img{object-fit:cover}.root{--rs-ratio-s:0;--rs-ratio-m:var(--rs-ratio-s);--rs-ratio-l:var(--rs-ratio-m);--rs-ratio-xl:var(--rs-ratio-l);--rs-ratio:var(--rs-ratio-s)}@media (--rs-viewport-m ){.root{--rs-ratio:var(--rs-ratio-m)}}@media (--rs-viewport-l ){.root{--rs-ratio:var(--rs-ratio-l)}}@media (--rs-viewport-xl ){.root{--rs-ratio:var(--rs-ratio-xl)}}

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 (min-width:660px){.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 (min-width:900px){.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 (min-width:1280px){.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/height/height.module.css

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

package/styles/inset/inset.module.css

@@ -1 +1 @@
-.--inset{inset:calc(var(--rs-inset) * var(--rs-unit-x1))}.--inset-end{inset-inline-end:calc(var(--rs-inset-end) * var(--rs-unit-x1))}.--inset-start{inset-inline-start:calc(var(--rs-inset-start) * var(--rs-unit-x1))}.--inset-top{inset-block-start:calc(var(--rs-inset-top) * var(--rs-unit-x1))}.--inset-bottom{inset-block-end:calc(var(--rs-inset-bottom) * var(--rs-unit-x1))}.--inset{--rs-inset-s:0;--rs-inset-m:var(--rs-inset-s);--rs-inset-l:var(--rs-inset-m);--rs-inset-xl:var(--rs-inset-l);--rs-inset:var(--rs-inset-s)}.--inset-end{--rs-inset-end-s:0;--rs-inset-end-m:var(--rs-inset-end-s);--rs-inset-end-l:var(--rs-inset-end-m);--rs-inset-end-xl:var(--rs-inset-end-l);--rs-inset-end:var(--rs-inset-end-s)}.--inset-start{--rs-inset-start-s:0;--rs-inset-start-m:var(--rs-inset-start-s);--rs-inset-start-l:var(--rs-inset-start-m);--rs-inset-start-xl:var(--rs-inset-start-l);--rs-inset-start:var(--rs-inset-start-s)}.--inset-top{--rs-inset-top-s:0;--rs-inset-top-m:var(--rs-inset-top-s);--rs-inset-top-l:var(--rs-inset-top-m);--rs-inset-top-xl:var(--rs-inset-top-l);--rs-inset-top:var(--rs-inset-top-s)}.--inset-bottom{--rs-inset-bottom-s:0;--rs-inset-bottom-m:var(--rs-inset-bottom-s);--rs-inset-bottom-l:var(--rs-inset-bottom-m);--rs-inset-bottom-xl:var(--rs-inset-bottom-l);--rs-inset-bottom:var(--rs-inset-bottom-s)}@media (min-width:660px){.--inset-end--m{inset-inline-end:calc(var(--rs-inset-end) * var(--rs-unit-x1))}.--inset-start--m{inset-inline-start:calc(var(--rs-inset-start) * var(--rs-unit-x1))}.--inset-top--m{inset-block-start:calc(var(--rs-inset-top) * var(--rs-unit-x1))}.--inset-bottom--m{inset-block-end:calc(var(--rs-inset-bottom) * var(--rs-unit-x1))}.--inset{--rs-inset:var(--rs-inset-m)}.--inset-end{--rs-inset-end:var(--rs-inset-end-m)}.--inset-start{--rs-inset-start:var(--rs-inset-start-m)}.--inset-top{--rs-inset-top:var(--rs-inset-top-m)}.--inset-bottom{--rs-inset-bottom:var(--rs-inset-bottom-m)}}@media (min-width:900px){.--inset-end--l{inset-inline-end:calc(var(--rs-inset-end) * var(--rs-unit-x1))}.--inset-start--l{inset-inline-start:calc(var(--rs-inset-start) * var(--rs-unit-x1))}.--inset-top--l{inset-block-start:calc(var(--rs-inset-top) * var(--rs-unit-x1))}.--inset-bottom--l{inset-block-end:calc(var(--rs-inset-bottom) * var(--rs-unit-x1))}.--inset{--rs-inset:var(--rs-inset-l)}.--inset-end{--rs-inset-end:var(--rs-inset-end-l)}.--inset-start{--rs-inset-start:var(--rs-inset-start-l)}.--inset-top{--rs-inset-top:var(--rs-inset-top-l)}.--inset-bottom{--rs-inset-bottom:var(--rs-inset-bottom-l)}}@media (min-width:1280px){.--inset-end--xl{inset-inline-end:calc(var(--rs-inset-end) * var(--rs-unit-x1))}.--inset-start--xl{inset-inline-start:calc(var(--rs-inset-start) * var(--rs-unit-x1))}.--inset-top--xl{inset-block-start:calc(var(--rs-inset-top) * var(--rs-unit-x1))}.--inset-bottom--xl{inset-block-end:calc(var(--rs-inset-bottom) * var(--rs-unit-x1))}.--inset{--rs-inset:var(--rs-inset-xl)}.--inset-end{--rs-inset-end:var(--rs-inset-end-xl)}.--inset-start{--rs-inset-start:var(--rs-inset-start-xl)}.--inset-top{--rs-inset-top:var(--rs-inset-top-xl)}.--inset-bottom{--rs-inset-bottom:var(--rs-inset-bottom-xl)}}
+.--inset{inset:calc(var(--rs-inset) * var(--rs-unit-x1))}.--inset-end{inset-inline-end:calc(var(--rs-inset-end) * var(--rs-unit-x1))}.--inset-start{inset-inline-start:calc(var(--rs-inset-start) * var(--rs-unit-x1))}.--inset-top{inset-block-start:calc(var(--rs-inset-top) * var(--rs-unit-x1))}.--inset-bottom{inset-block-end:calc(var(--rs-inset-bottom) * var(--rs-unit-x1))}.--inset{--rs-inset-s:0;--rs-inset-m:var(--rs-inset-s);--rs-inset-l:var(--rs-inset-m);--rs-inset-xl:var(--rs-inset-l);--rs-inset:var(--rs-inset-s)}.--inset-end{--rs-inset-end-s:0;--rs-inset-end-m:var(--rs-inset-end-s);--rs-inset-end-l:var(--rs-inset-end-m);--rs-inset-end-xl:var(--rs-inset-end-l);--rs-inset-end:var(--rs-inset-end-s)}.--inset-start{--rs-inset-start-s:0;--rs-inset-start-m:var(--rs-inset-start-s);--rs-inset-start-l:var(--rs-inset-start-m);--rs-inset-start-xl:var(--rs-inset-start-l);--rs-inset-start:var(--rs-inset-start-s)}.--inset-top{--rs-inset-top-s:0;--rs-inset-top-m:var(--rs-inset-top-s);--rs-inset-top-l:var(--rs-inset-top-m);--rs-inset-top-xl:var(--rs-inset-top-l);--rs-inset-top:var(--rs-inset-top-s)}.--inset-bottom{--rs-inset-bottom-s:0;--rs-inset-bottom-m:var(--rs-inset-bottom-s);--rs-inset-bottom-l:var(--rs-inset-bottom-m);--rs-inset-bottom-xl:var(--rs-inset-bottom-l);--rs-inset-bottom:var(--rs-inset-bottom-s)}@media (--rs-viewport-m ){.--inset-end--m{inset-inline-end:calc(var(--rs-inset-end) * var(--rs-unit-x1))}.--inset-start--m{inset-inline-start:calc(var(--rs-inset-start) * var(--rs-unit-x1))}.--inset-top--m{inset-block-start:calc(var(--rs-inset-top) * var(--rs-unit-x1))}.--inset-bottom--m{inset-block-end:calc(var(--rs-inset-bottom) * var(--rs-unit-x1))}.--inset{--rs-inset:var(--rs-inset-m)}.--inset-end{--rs-inset-end:var(--rs-inset-end-m)}.--inset-start{--rs-inset-start:var(--rs-inset-start-m)}.--inset-top{--rs-inset-top:var(--rs-inset-top-m)}.--inset-bottom{--rs-inset-bottom:var(--rs-inset-bottom-m)}}@media (--rs-viewport-l ){.--inset-end--l{inset-inline-end:calc(var(--rs-inset-end) * var(--rs-unit-x1))}.--inset-start--l{inset-inline-start:calc(var(--rs-inset-start) * var(--rs-unit-x1))}.--inset-top--l{inset-block-start:calc(var(--rs-inset-top) * var(--rs-unit-x1))}.--inset-bottom--l{inset-block-end:calc(var(--rs-inset-bottom) * var(--rs-unit-x1))}.--inset{--rs-inset:var(--rs-inset-l)}.--inset-end{--rs-inset-end:var(--rs-inset-end-l)}.--inset-start{--rs-inset-start:var(--rs-inset-start-l)}.--inset-top{--rs-inset-top:var(--rs-inset-top-l)}.--inset-bottom{--rs-inset-bottom:var(--rs-inset-bottom-l)}}@media (--rs-viewport-xl ){.--inset-end--xl{inset-inline-end:calc(var(--rs-inset-end) * var(--rs-unit-x1))}.--inset-start--xl{inset-inline-start:calc(var(--rs-inset-start) * var(--rs-unit-x1))}.--inset-top--xl{inset-block-start:calc(var(--rs-inset-top) * var(--rs-unit-x1))}.--inset-bottom--xl{inset-block-end:calc(var(--rs-inset-bottom) * var(--rs-unit-x1))}.--inset{--rs-inset:var(--rs-inset-xl)}.--inset-end{--rs-inset-end:var(--rs-inset-end-xl)}.--inset-start{--rs-inset-start:var(--rs-inset-start-xl)}.--inset-top{--rs-inset-top:var(--rs-inset-top-xl)}.--inset-bottom{--rs-inset-bottom:var(--rs-inset-bottom-xl)}}

package/styles/maxHeight/maxHeight.module.css

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

package/styles/maxWidth/maxWidth.module.css

@@ -1 +1 @@
-.literal{max-width:var(--rs-max-w-s,auto)}.unit{max-width:calc(var(--rs-max-w-s) * var(--rs-unit-x1))}@media (min-width:660px){.literal--m{max-width:var(--rs-max-w-m)}.unit--m{max-width:calc(var(--rs-max-w-m) * var(--rs-unit-x1))}}@media (min-width:900px){.literal--l{max-width:var(--rs-max-w-l)}.unit--l{max-width:calc(var(--rs-max-w-l) * var(--rs-unit-x1))}}@media (min-width:1280px){.literal--xl{max-width:var(--rs-max-w-xl)}.unit--xl{max-width:calc(var(--rs-max-w-xl) * var(--rs-unit-x1))}}
+.literal{max-width:var(--rs-max-w-s,auto)}.unit{max-width:calc(var(--rs-max-w-s) * var(--rs-unit-x1))}@media (--rs-viewport-m ){.literal--m{max-width:var(--rs-max-w-m)}.unit--m{max-width:calc(var(--rs-max-w-m) * var(--rs-unit-x1))}}@media (--rs-viewport-l ){.literal--l{max-width:var(--rs-max-w-l)}.unit--l{max-width:calc(var(--rs-max-w-l) * var(--rs-unit-x1))}}@media (--rs-viewport-xl ){.literal--xl{max-width:var(--rs-max-w-xl)}.unit--xl{max-width:calc(var(--rs-max-w-xl) * var(--rs-unit-x1))}}

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/minWidth/minWidth.module.css

@@ -1 +1 @@
-.literal{min-width:var(--rs-min-w-s,auto)}.unit{min-width:calc(var(--rs-min-w-s) * var(--rs-unit-x1))}@media (min-width:660px){.literal--m{min-width:var(--rs-min-w-m)}.unit--m{min-width:calc(var(--rs-min-w-m) * var(--rs-unit-x1))}}@media (min-width:900px){.literal--l{min-width:var(--rs-min-w-l)}.unit--l{min-width:calc(var(--rs-min-w-l) * var(--rs-unit-x1))}}@media (min-width:1280px){.literal--xl{min-width:var(--rs-min-w-xl)}.unit--xl{min-width:calc(var(--rs-min-w-xl) * var(--rs-unit-x1))}}
+.literal{min-width:var(--rs-min-w-s,auto)}.unit{min-width:calc(var(--rs-min-w-s) * var(--rs-unit-x1))}@media (--rs-viewport-m ){.literal--m{min-width:var(--rs-min-w-m)}.unit--m{min-width:calc(var(--rs-min-w-m) * var(--rs-unit-x1))}}@media (--rs-viewport-l ){.literal--l{min-width:var(--rs-min-w-l)}.unit--l{min-width:calc(var(--rs-min-w-l) * var(--rs-unit-x1))}}@media (--rs-viewport-xl ){.literal--xl{min-width:var(--rs-min-w-xl)}.unit--xl{min-width:calc(var(--rs-min-w-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 (min-width:660px){.root{--rs-p:var(--rs-p-m)}}@media (min-width:900px){.root{--rs-p:var(--rs-p-l)}}@media (min-width:1280px){.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/styles/position/position.module.css

@@ -1 +1 @@
-.--position-static{position:static}.--position-relative{position:relative}.--position-absolute{position:absolute}.--position-fixed{position:fixed}.--position-sticky{position:sticky}@media (min-width:660px){.--position-static--m{position:static}.--position-relative--m{position:relative}.--position-absolute--m{position:absolute}.--position-fixed--m{position:fixed}.--position-sticky--m{position:sticky}}@media (min-width:900px){.--position-static--l{position:static}.--position-relative--l{position:relative}.--position-absolute--l{position:absolute}.--position-fixed--l{position:fixed}.--position-sticky--l{position:sticky}}@media (min-width:1280px){.--position-static--xl{position:static}.--position-relative--xl{position:relative}.--position-absolute--xl{position:absolute}.--position-fixed--xl{position:fixed}.--position-sticky--xl{position:sticky}}
+.--position-static{position:static}.--position-relative{position:relative}.--position-absolute{position:absolute}.--position-fixed{position:fixed}.--position-sticky{position:sticky}@media (--rs-viewport-m ){.--position-static--m{position:static}.--position-relative--m{position:relative}.--position-absolute--m{position:absolute}.--position-fixed--m{position:fixed}.--position-sticky--m{position:sticky}}@media (--rs-viewport-l ){.--position-static--l{position:static}.--position-relative--l{position:relative}.--position-absolute--l{position:absolute}.--position-fixed--l{position:fixed}.--position-sticky--l{position:sticky}}@media (--rs-viewport-xl ){.--position-static--xl{position:static}.--position-relative--xl{position:relative}.--position-absolute--xl{position:absolute}.--position-fixed--xl{position:fixed}.--position-sticky--xl{position:sticky}}

package/styles/radius/radius.module.css

@@ -1 +1 @@
-.root{border-radius:var(--rs-radius)}.--radius-none{--rs-radius:0}.--radius-small{--rs-radius:var(--rs-unit-radius-small)}.--radius-medium{--rs-radius:var(--rs-unit-radius-medium)}.--radius-large{--rs-radius:var(--rs-unit-radius-large)}.--radius-circular{--rs-radius:9999px}@media (min-width:660px){.--radius-none--m{--rs-radius:0}.--radius-small--m{--rs-radius:var(--rs-unit-radius-small)}.--radius-medium--m{--rs-radius:var(--rs-unit-radius-medium)}.--radius-large--m{--rs-radius:var(--rs-unit-radius-large)}.--radius-circular--m{--rs-radius:9999px}}@media (min-width:900px){.--radius-none--l{--rs-radius:0}.--radius-small--l{--rs-radius:var(--rs-unit-radius-small)}.--radius-medium--l{--rs-radius:var(--rs-unit-radius-medium)}.--radius-large--l{--rs-radius:var(--rs-unit-radius-large)}.--radius-circular--l{--rs-radius:9999px}}@media (min-width:1280px){.--radius-none--xl{--rs-radius:0}.--radius-small--xl{--rs-radius:var(--rs-unit-radius-small)}.--radius-medium--xl{--rs-radius:var(--rs-unit-radius-medium)}.--radius-large--xl{--rs-radius:var(--rs-unit-radius-large)}.--radius-circular--xl{--rs-radius:9999px}}
+.root{border-radius:var(--rs-radius)}.--radius-none{--rs-radius:0}.--radius-small{--rs-radius:var(--rs-unit-radius-small)}.--radius-medium{--rs-radius:var(--rs-unit-radius-medium)}.--radius-large{--rs-radius:var(--rs-unit-radius-large)}.--radius-circular{--rs-radius:9999px}@media (--rs-viewport-m ){.--radius-none--m{--rs-radius:0}.--radius-small--m{--rs-radius:var(--rs-unit-radius-small)}.--radius-medium--m{--rs-radius:var(--rs-unit-radius-medium)}.--radius-large--m{--rs-radius:var(--rs-unit-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-unit-radius-small)}.--radius-medium--l{--rs-radius:var(--rs-unit-radius-medium)}.--radius-large--l{--rs-radius:var(--rs-unit-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-unit-radius-small)}.--radius-medium--xl{--rs-radius:var(--rs-unit-radius-medium)}.--radius-large--xl{--rs-radius:var(--rs-unit-radius-large)}.--radius-circular--xl{--rs-radius:9999px}}

package/styles/width/width.module.css

@@ -1 +1 @@
-.literal{width:var(--rs-w-s,auto)}.unit{width:calc(var(--rs-w-s) * var(--rs-unit-x1))}@media (min-width:660px){.literal--m{width:var(--rs-w-m)}.unit--m{width:calc(var(--rs-w-m) * var(--rs-unit-x1))}}@media (min-width:900px){.literal--l{width:var(--rs-w-l)}.unit--l{width:calc(var(--rs-w-l) * var(--rs-unit-x1))}}@media (min-width:1280px){.literal--xl{width:var(--rs-w-xl)}.unit--xl{width:calc(var(--rs-w-xl) * var(--rs-unit-x1))}}
+.literal{width:var(--rs-w-s,auto)}.unit{width:calc(var(--rs-w-s) * var(--rs-unit-x1))}@media (--rs-viewport-m ){.literal--m{width:var(--rs-w-m)}.unit--m{width:calc(var(--rs-w-m) * var(--rs-unit-x1))}}@media (--rs-viewport-l ){.literal--l{width:var(--rs-w-l)}.unit--l{width:calc(var(--rs-w-l) * var(--rs-unit-x1))}}@media (--rs-viewport-xl ){.literal--xl{width:var(--rs-w-xl)}.unit--xl{width:calc(var(--rs-w-xl) * var(--rs-unit-x1))}}

package/themes/_generator/constants.js

@@ -5,5 +5,7 @@ exports.bgWithDynamicForeground = [
     "backgroundNeutral",
     "backgroundPrimary",
     "backgroundCritical",
+    "backgroundWarning",
     "backgroundPositive",
+    "brand",
 ];

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

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

package/themes/_generator/definitions/figma.js

@@ -101,6 +101,7 @@ const theme = {
         radiusMedium: { px: 4 },
         radiusLarge: { px: 4 },
     },
+    // @ts-ignore
     color: {
         foregroundNeutral: { hex: "#191919", hexDark: "#FFFFFF" },
         foregroundNeutralFaded: { hex: "#474747", hexDark: "#B2B2B2" },
@@ -176,5 +177,10 @@ const theme = {
             },
         ],
     },
+    viewport: {
+        m: { minPx: 660 },
+        l: { minPx: 900 },
+        xl: { minPx: 1280 },
+    },
 };
 exports.default = theme;

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

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

package/themes/_generator/definitions/reshaped.js

@@ -151,5 +151,10 @@ const theme = {
             },
         ],
     },
+    viewport: {
+        m: { minPx: 660 },
+        l: { minPx: 900 },
+        xl: { minPx: 1280 },
+    },
 };
 exports.default = theme;

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

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

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

@@ -5,6 +5,7 @@ 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 Theme from "../../../components/Theme/index.js";
 import { getThemeCSS, generateThemeColors, baseThemeDefinition } from "../../index.js";
@@ -50,12 +51,58 @@ const componentExamples = (<View gap={4}>
 			<View.Item columns={6}>
 				<Alert color="critical">Critical</Alert>
 			</View.Item>
+			<View.Item columns={6}>
+				<Alert color="warning">Warning</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={12}>
+				<View direction="row" gap={2}>
+					<View backgroundColor="neutral" width={10} height={10}/>
+					<View backgroundColor="neutral-faded" width={10} height={10}/>
+					<View backgroundColor="primary" width={10} height={10}/>
+					<View backgroundColor="primary-faded" width={10} height={10}/>
+					<View backgroundColor="critical" width={10} height={10}/>
+					<View backgroundColor="critical-faded" width={10} height={10}/>
+					<View backgroundColor="warning" width={10} height={10}/>
+					<View backgroundColor="warning-faded" width={10} height={10}/>
+					<View backgroundColor="positive" width={10} height={10}/>
+					<View backgroundColor="positive-faded" width={10} height={10}/>
+				</View>
+			</View.Item>
+			<View.Item columns={12}>
+				<View direction="row" gap={2}>
+					<Avatar initials="RS" color="warning" variant="faded"/>
+					<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">
@@ -93,7 +140,7 @@ export const base = () => (<Example>
 		</Example.Item>
 	</Example>);
 export const generation = () => (<Example>
-		<Example.Item title="base">
+		<Example.Item>
 			<style>{cssGenerated}</style>
 			<View gap={4}>
 				<View.Item>Generated theme</View.Item>

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

@@ -1,6 +1,6 @@
-export type Name = "foregroundNeutral" | "foregroundNeutralFaded" | "foregroundDisabled" | "foregroundPrimary" | "foregroundCritical" | "foregroundPositive" | "borderNeutral" | "borderNeutralFaded" | "borderDisabled" | "borderPrimary" | "borderPrimaryFaded" | "borderCritical" | "borderCriticalFaded" | "borderPositive" | "borderPositiveFaded" | "backgroundNeutral" | "backgroundNeutralFaded" | "backgroundNeutralHighlighted" | "backgroundDisabled" | "backgroundDisabledFaded" | "backgroundPrimary" | "backgroundPrimaryFaded" | "backgroundPrimaryHighlighted" | "backgroundCritical" | "backgroundCriticalFaded" | "backgroundCriticalHighlighted" | "backgroundPositive" | "backgroundPositiveFaded" | "backgroundPositiveHighlighted" | "backgroundPage" | "backgroundPageFaded" | "backgroundElevationBase" | "backgroundElevationRaised" | "backgroundElevationOverlay" | "white" | "black";
-export type GeneratedOnName = "onBackgroundNeutral" | "onBackgroundPrimary" | "onBackgroundPositive" | "onBackgroundCritical";
-export type GeneratedRGBName = "rgbBackgroundNeutral" | "rgbBackgroundNeutralFaded" | "rgbBackgroundNeutralHighlighted" | "rgbBackgroundDisabled" | "rgbBackgroundDisabledFaded" | "rgbBackgroundPrimary" | "rgbBackgroundPrimaryFaded" | "rgbBackgroundPrimaryHighlighted" | "rgbBackgroundCritical" | "rgbBackgroundCriticalFaded" | "rgbBackgroundCriticalHighlighted" | "rgbBackgroundPositive" | "rgbBackgroundPositiveFaded" | "rgbBackgroundPositiveHighlighted" | "rgbBackgroundPage" | "rgbBackgroundPageFaded" | "rgbBackgroundElevationBase" | "rgbBackgroundElevationRaised" | "rgbBackgroundElevationOverlay";
+export type Name = "foregroundNeutral" | "foregroundNeutralFaded" | "foregroundDisabled" | "foregroundPrimary" | "foregroundCritical" | "foregrounwarning" | "foregroundPositive" | "borderNeutral" | "borderNeutralFaded" | "borderDisabled" | "borderPrimary" | "borderPrimaryFaded" | "borderCritical" | "borderCriticalFaded" | "borderwarning" | "borderwarningFaded" | "borderPositive" | "borderPositiveFaded" | "backgroundNeutral" | "backgroundNeutralFaded" | "backgroundNeutralHighlighted" | "backgroundDisabled" | "backgroundDisabledFaded" | "backgroundPrimary" | "backgroundPrimaryFaded" | "backgroundPrimaryHighlighted" | "backgroundCritical" | "backgroundCriticalFaded" | "backgroundCriticalHighlighted" | "backgroundWarning" | "backgroundWarningFaded" | "backgroundWarningHighlighted" | "backgroundPositive" | "backgroundPositiveFaded" | "backgroundPositiveHighlighted" | "backgroundPage" | "backgroundPageFaded" | "backgroundElevationBase" | "backgroundElevationRaised" | "backgroundElevationOverlay" | "brand" | "white" | "black";
+export type GeneratedOnName = "onBackgroundNeutral" | "onBackgroundPrimary" | "onBackgroundPositive" | "onBackgroundWarning" | "onBackgroundCritical";
+export type GeneratedRGBName = "rgbBackgroundNeutral" | "rgbBackgroundNeutralFaded" | "rgbBackgroundNeutralHighlighted" | "rgbBackgroundDisabled" | "rgbBackgroundDisabledFaded" | "rgbBackgroundPrimary" | "rgbBackgroundPrimaryFaded" | "rgbBackgroundPrimaryHighlighted" | "rgbBackgroundCritical" | "rgbBackgroundCriticalFaded" | "rgbBackgroundCriticalHighlighted" | "rgbBackgroundWarning" | "rgbBackgroundWarningFaded" | "rgbBackgroundWarningHighlighted" | "rgbBackgroundPositive" | "rgbBackgroundPositiveFaded" | "rgbBackgroundPositiveHighlighted" | "rgbBackgroundPage" | "rgbBackgroundPageFaded" | "rgbBackgroundElevationBase" | "rgbBackgroundElevationRaised" | "rgbBackgroundElevationOverlay";
 export type Token = {
     hex: string;
     hexDark?: string;

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

@@ -7,5 +7,5 @@ export declare const css: {
     fontWeight: import("./types").Transformer<import("./fontWeight/fontWeight.types").Token>;
     shadow: import("./types").Transformer<import("./shadow/shadow.types").Token>;
     unit: import("./types").Transformer<import("./unit/unit.types").Token>;
-    viewport: import("./types").Transformer<import("./viewport/viewport.types").Token>;
+    viewport: import("./types").Transformer<import("./viewport/viewport.types").Token | import("./viewport/viewport.types").SToken>;
 };

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

@@ -9,13 +9,10 @@ import type * as TUnit from "./unit/unit.types";
 import type * as TViewport from "./viewport/viewport.types";
 export type TokenType = "fontFamily" | "fontWeight" | "unit" | "viewport" | "font" | "color" | "duration" | "easing" | "shadow";
 export type ColorHue = "primary" | "positive" | "critical" | "neutral";
-export type BaseThemeDefinition = {
-    viewport: Record<TViewport.Name, TViewport.Token>;
-};
 type TokenSet<Name extends string, Token> = Record<Name, Token> & {
     [tokenName: string]: Token;
 };
-export type UserThemeDefinition = {
+export type ThemeDefinition = {
     unit: TokenSet<TUnit.Name, TUnit.Token>;
     fontFamily: TokenSet<TFontFamily.Name, TFontFamily.Token>;
     fontWeight: TokenSet<TFontWeight.Name, TFontWeight.Token>;
@@ -24,21 +21,23 @@ export type UserThemeDefinition = {
     duration: TokenSet<TDuration.Name, TDuration.Token>;
     easing: TokenSet<TEasing.Name, TEasing.Token>;
     shadow: TokenSet<TShadow.Name, TShadow.Token>;
+    viewport: Record<Exclude<TViewport.Name, "s">, TViewport.Token>;
 };
-export type PartialUserThemeDefinition = {
-    unit?: Partial<UserThemeDefinition["unit"]>;
-    fontFamily?: Partial<UserThemeDefinition["fontFamily"]>;
-    fontWeight?: Partial<UserThemeDefinition["fontWeight"]>;
-    font?: Partial<UserThemeDefinition["font"]>;
-    color?: Partial<UserThemeDefinition["color"]>;
-    duration?: Partial<UserThemeDefinition["duration"]>;
-    easing?: Partial<UserThemeDefinition["easing"]>;
-    shadow?: Partial<UserThemeDefinition["shadow"]>;
+export type PartialThemeDefinition = {
+    unit?: Partial<ThemeDefinition["unit"]>;
+    fontFamily?: Partial<ThemeDefinition["fontFamily"]>;
+    fontWeight?: Partial<ThemeDefinition["fontWeight"]>;
+    font?: Partial<ThemeDefinition["font"]>;
+    color?: Partial<ThemeDefinition["color"]>;
+    duration?: Partial<ThemeDefinition["duration"]>;
+    easing?: Partial<ThemeDefinition["easing"]>;
+    shadow?: Partial<ThemeDefinition["shadow"]>;
+    viewport?: Partial<ThemeDefinition["viewport"]>;
 };
-export type ThemeDefinition = BaseThemeDefinition & UserThemeDefinition;
 export type FullThemeDefinition = ThemeDefinition & {
     color: Record<TColor.GeneratedOnName | TColor.GeneratedRGBName | TColor.Name, TColor.Token>;
     unit: Record<TUnit.GeneratedName | TUnit.Name, TUnit.Token>;
+    viewport: Record<TViewport.Name, TViewport.Token | TViewport.SToken>;
 };
 export type TransformedToken = {
     name: string;

package/themes/_generator/tokens/viewport/viewport.transforms.d.ts

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

package/themes/_generator/tokens/viewport/viewport.types.d.ts

@@ -1,5 +1,9 @@
 export type Name = "s" | "m" | "l" | "xl";
 export type Token = {
-    minPx?: number;
-    maxPx?: number;
+    minPx: number;
+    maxPx?: never;
+};
+export type SToken = {
+    maxPx: number;
+    minPx?: never;
 };

package/themes/_generator/transform.js

@@ -31,9 +31,14 @@ const css_1 = require("./utilities/css");
 const generateBackgroundColors_1 = __importDefault(require("./utilities/generateBackgroundColors"));
 const generateUnits_1 = __importDefault(require("./utilities/generateUnits"));
 const transform = (name, definition, options) => {
-    const { isPrivate, isFragment, themeOptions } = options;
+    var _a, _b;
+    const { isFragment, themeOptions } = options;
     (0, generateBackgroundColors_1.default)(definition, themeOptions);
     (0, generateUnits_1.default)(definition);
+    // Generate s viewport
+    if ((_b = (_a = definition.viewport) === null || _a === void 0 ? void 0 : _a.m) === null || _b === void 0 ? void 0 : _b.minPx) {
+        definition.viewport.s = { maxPx: definition.viewport.m.minPx - 1 };
+    }
     const transformedStorage = {
         variable: [],
         media: [],
@@ -51,7 +56,7 @@ const transform = (name, definition, options) => {
     });
     return {
         variables: (0, css_1.variablesTemplate)(name, transformedStorage.variable),
-        media: isPrivate && !isFragment ? (0, css_1.mediaTemplate)(transformedStorage.media) : undefined,
+        media: !isFragment ? (0, css_1.mediaTemplate)(transformedStorage.media) : undefined,
     };
 };
 exports.default = transform;

package/themes/_generator/types.d.ts

@@ -4,7 +4,6 @@ export type PartialDeep<T> = T extends Primitive ? Partial<T> : {
     [Key in keyof T]?: PartialDeep<T[Key]>;
 };
 export type PublicOptions = {
-    isPrivate?: boolean;
     themeOptions?: ReshapedConfig["themeOptions"];
 };
 export type PrivateOptions = PublicOptions & {

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

@@ -74,7 +74,11 @@ export declare const hslToHex: (hsl: HslColor) => string;
 /**
  * Normalizing utilities
  */
-export declare const getDarkModeLightnessDelta: (lightness: number, luminance: number) => number;
+export declare const getDarkModeColor: (hsl: HslColor) => {
+    s: number;
+    l: number;
+    h: number;
+};
 export declare const getLuminanceDelta: (luminance: number) => number;
 export declare function getRgbLuminance({ r, g, b }: RgbColor): number;
 export declare const getOnColor: (args: {

package/themes/_generator/utilities/color.js

@@ -4,7 +4,7 @@
  * They have been rewritten for easier color transformations in the theme generation case
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOnColor = exports.getRgbLuminance = exports.getLuminanceDelta = exports.getDarkModeLightnessDelta = exports.hslToHex = exports.hexToHsluv = exports.hexToHsl = exports.hsluvToHex = exports.hsluvToLch = exports.lchToHsluv = exports.lchToLuv = exports.luvToLch = exports.luvToXyz = exports.xyzToLuv = exports.lToY = exports.yToL = exports.xyzToRgb = exports.rgbToXyz = exports.fromLinear = exports.toLinear = exports.rgbToHex = exports.hslToRgb = exports.rgbToHsl = exports.hexToRgb = exports.calcMaxChromaHsluv = exports.distanceFromOriginAngle = exports.calculateBoundingLines = void 0;
+exports.getOnColor = exports.getRgbLuminance = exports.getLuminanceDelta = exports.getDarkModeColor = exports.hslToHex = exports.hexToHsluv = exports.hexToHsl = exports.hsluvToHex = exports.hsluvToLch = exports.lchToHsluv = exports.lchToLuv = exports.luvToLch = exports.luvToXyz = exports.xyzToLuv = exports.lToY = exports.yToL = exports.xyzToRgb = exports.rgbToXyz = exports.fromLinear = exports.toLinear = exports.rgbToHex = exports.hslToRgb = exports.rgbToHsl = exports.hexToRgb = exports.calcMaxChromaHsluv = exports.distanceFromOriginAngle = exports.calculateBoundingLines = void 0;
 /**
  * Constants
  */
@@ -293,19 +293,24 @@ exports.hslToHex = hslToHex;
 /**
  * Normalizing utilities
  */
-const getDarkModeLightnessDelta = (lightness, luminance) => {
-    const perceivedLuminanceOrigin = 69.5;
-    const luminanceDistance = Math.abs(Math.round(luminance - perceivedLuminanceOrigin));
-    // Use a greater modifier for values around the luminance origin and decrease it for distant values
-    const luminanceModifier = 3 - (Math.min(luminanceDistance, 20) / 20) * 0.5;
-    const distance = luminanceDistance * luminanceModifier;
-    // Dark mode always reduces lightness but if the color was dark originally, we need to do it a slower pace
-    const slowdownModifier = luminanceDistance < 0 ? 2 : 1;
-    // Adjust the value based on the current lightness boundary
-    const delta = lightness / 100;
-    return (distance * delta) / slowdownModifier;
+const getDarkModeColor = (hsl) => {
+    const { s, l } = hsl;
+    /**
+     * Colors with lower saturation should have bigger lightness delta, for example it can be
+     * Neutral: l: 97 -> l dark: 13
+     * Warning: l: 53 -> l dark: 47
+     *
+     * Therefor we calculate the dark mode lightness based on a saturation modifier, which should be between 0 and 1
+     * We take base saturation:
+     * Neutral: 20 -> 0.2 modifier, Warning: 96 -> 0.96 modifier
+     *
+     * And we also adjust that value with a modifier of 0.9-2 based on the saturation
+     * That way satured colors won't change much from its original value
+     */
+    const sModifier = (s / 100) * (0.96 + (100 - s) / 100);
+    return Object.assign(Object.assign({}, hsl), { s: s - 7, l: l * sModifier });
 };
-exports.getDarkModeLightnessDelta = getDarkModeLightnessDelta;
+exports.getDarkModeColor = getDarkModeColor;
 const getLuminanceDelta = (luminance) => {
     return Math.max(0, luminance - 50) / 5;
 };

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

@@ -1,8 +1,10 @@
 declare const generate: (args?: {
     primary?: string;
     critical?: string;
+    warning?: string;
     positive?: string;
     neutral?: string;
+    brand?: string;
 }) => Record<import("../tokens/color/color.types").Name, import("../tokens/color/color.types").Token> & {
     [tokenName: string]: import("../tokens/color/color.types").Token;
 };