@gnist/design-system 6.2.1 → 7.0.0-alpha.0

package/dist/foundation/iconography/Icon.css.js

@@ -1,14 +1,15 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { createVar, style } from "@vanilla-extract/css";
+import { gnistStyle } from "@gnist/themes/layers.css.js";
+import { createVar } from "@vanilla-extract/css";
 //#region src/foundation/iconography/Icon.css.ts
 var svgHeight = createVar();
 var svgWidth = createVar();
-var iconContainer = style([{ display: "inline-flex" }, atoms({
+var iconContainer = gnistStyle([{ display: "inline-flex" }, atoms({
 	justifyContent: "center",
 	alignItems: "center"
 })]);
-var svg = style({
+var svg = gnistStyle({
 	overflow: "visible",
 	height: svgHeight,
 	width: svgWidth,

package/dist/foundation/logos/Logo.css.cjs

@@ -1,14 +1,15 @@
 "use client";
 require("../../_virtual/_rolldown/runtime.cjs");
+let _gnist_themes_layers_css_js = require("@gnist/themes/layers.css.js");
 let _vanilla_extract_css = require("@vanilla-extract/css");
 let _gnist_themes_themes_brandlessTokens_js = require("@gnist/themes/themes/brandlessTokens.js");
 //#region src/foundation/logos/Logo.css.ts
-var base = (0, _vanilla_extract_css.style)({
+var base = (0, _gnist_themes_layers_css_js.gnistStyle)({
 	display: "inline-flex",
 	justifyContent: "center",
 	alignItems: "center"
 });
-var svg = (0, _vanilla_extract_css.style)({ overflow: "visible" });
+var svg = (0, _gnist_themes_layers_css_js.gnistStyle)({ overflow: "visible" });
 var sizes = Object.keys(_gnist_themes_themes_brandlessTokens_js.brandlessTokens.size);
 var styles = (style) => sizes.reduce((acc, x) => {
 	acc[x] = [style, { height: _gnist_themes_themes_brandlessTokens_js.brandlessTokens.size[x] }];

package/dist/foundation/logos/Logo.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.css.d.ts","sourceRoot":"","sources":["../../../src/foundation/logos/Logo.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,GAAG,QAEd,CAAC;AAYH,eAAO,MAAM,WAAW,iCAA8B,CAAC;AACvD,eAAO,MAAM,UAAU,iCAA6B,CAAC"}
+{"version":3,"file":"Logo.css.d.ts","sourceRoot":"","sources":["../../../src/foundation/logos/Logo.css.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,GAAG,QAEd,CAAC;AAYH,eAAO,MAAM,WAAW,iCAA8B,CAAC;AACvD,eAAO,MAAM,UAAU,iCAA6B,CAAC"}

package/dist/foundation/logos/Logo.css.js

@@ -1,13 +1,14 @@
 "use client";
-import { style, styleVariants } from "@vanilla-extract/css";
+import { gnistStyle } from "@gnist/themes/layers.css.js";
+import { styleVariants } from "@vanilla-extract/css";
 import { brandlessTokens } from "@gnist/themes/themes/brandlessTokens.js";
 //#region src/foundation/logos/Logo.css.ts
-var base = style({
+var base = gnistStyle({
 	display: "inline-flex",
 	justifyContent: "center",
 	alignItems: "center"
 });
-var svg = style({ overflow: "visible" });
+var svg = gnistStyle({ overflow: "visible" });
 var sizes = Object.keys(brandlessTokens.size);
 var styles = (style) => sizes.reduce((acc, x) => {
 	acc[x] = [style, { height: brandlessTokens.size[x] }];

package/dist/foundation/typography/typography.css.cjs

@@ -1,6 +1,6 @@
 "use client";
 require("../../_virtual/_rolldown/runtime.cjs");
-let _vanilla_extract_css = require("@vanilla-extract/css");
+let _gnist_themes_layers_css_js = require("@gnist/themes/layers.css.js");
 let _gnist_themes_typography_css_js = require("@gnist/themes/typography.css.js");
 //#region src/foundation/typography/typography.css.ts
 var displayText = _gnist_themes_typography_css_js.responsiveTypography["display"];
@@ -9,7 +9,7 @@ var heading2Text = _gnist_themes_typography_css_js.responsiveTypography["heading
 var heading3Text = _gnist_themes_typography_css_js.responsiveTypography["heading3"];
 var leadText = _gnist_themes_typography_css_js.responsiveTypography["lead"];
 var bodyText = _gnist_themes_typography_css_js.responsiveTypography["body"];
-var linkText = (0, _vanilla_extract_css.style)([{ selectors: { "&, &:visited, &:hover, &:active": { color: "currentColor" } } }, _gnist_themes_typography_css_js.responsiveTypography["link"]]);
+var linkText = (0, _gnist_themes_layers_css_js.gnistStyle)([{ selectors: { "&, &:visited, &:hover, &:active": { color: "currentColor" } } }, _gnist_themes_typography_css_js.responsiveTypography["link"]]);
 var detailText = _gnist_themes_typography_css_js.responsiveTypography["detail"];
 //#endregion
 exports.bodyText = bodyText;

package/dist/foundation/typography/typography.css.js

@@ -1,5 +1,5 @@
 "use client";
-import { style } from "@vanilla-extract/css";
+import { gnistStyle } from "@gnist/themes/layers.css.js";
 import { responsiveTypography } from "@gnist/themes/typography.css.js";
 //#region src/foundation/typography/typography.css.ts
 var displayText = responsiveTypography["display"];
@@ -8,7 +8,7 @@ var heading2Text = responsiveTypography["heading2"];
 var heading3Text = responsiveTypography["heading3"];
 var leadText = responsiveTypography["lead"];
 var bodyText = responsiveTypography["body"];
-var linkText = style([{ selectors: { "&, &:visited, &:hover, &:active": { color: "currentColor" } } }, responsiveTypography["link"]]);
+var linkText = gnistStyle([{ selectors: { "&, &:visited, &:hover, &:active": { color: "currentColor" } } }, responsiveTypography["link"]]);
 var detailText = responsiveTypography["detail"];
 //#endregion
 export { bodyText, detailText, displayText, heading1Text, heading2Text, heading3Text, leadText, linkText };

package/dist/styles/animations.css.cjs

@@ -1,7 +1,7 @@
 "use client";
 require("../_virtual/_rolldown/runtime.cjs");
 //#region src/styles/animations.css.ts
-var clickAnimation = (0, require("@vanilla-extract/css").style)({
+var clickAnimation = (0, require("@gnist/themes/layers.css.js").gnistStyle)({
 	transition: "transform ease-in 0.1s",
 	selectors: { "&:active:not(:disabled)": { transform: "scale(0.98)" } }
 });

package/dist/styles/animations.css.js

@@ -1,7 +1,7 @@
 "use client";
-import { style } from "@vanilla-extract/css";
+import { gnistStyle } from "@gnist/themes/layers.css.js";
 //#region src/styles/animations.css.ts
-var clickAnimation = style({
+var clickAnimation = gnistStyle({
 	transition: "transform ease-in 0.1s",
 	selectors: { "&:active:not(:disabled)": { transform: "scale(0.98)" } }
 });

package/dist/styles/states.css.cjs

@@ -1,13 +1,12 @@
 "use client";
 require("../_virtual/_rolldown/runtime.cjs");
-let _vanilla_extract_recipes = require("@vanilla-extract/recipes");
+let _gnist_themes_layers_css_js = require("@gnist/themes/layers.css.js");
 let _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
 let _vanilla_extract_css_utils = require("@vanilla-extract/css-utils");
-let _vanilla_extract_css = require("@vanilla-extract/css");
 let fp_ts_Record = require("fp-ts/Record");
 let fp_ts_function = require("fp-ts/function");
 //#region src/styles/states.css.ts
-var focusStyle = (0, _vanilla_extract_css.style)({ selectors: {
+var focusStyle = (0, _gnist_themes_layers_css_js.gnistStyle)({ selectors: {
 	"&:focus:not(:focus-visible)": { outline: "none" },
 	"&:focus-visible": { outline: `${_gnist_themes_tokens_css_js.tokens.stroke.medium} solid ${_gnist_themes_tokens_css_js.tokens.color.interactive}` }
 } });
@@ -33,8 +32,8 @@ var afterAllStates = [
 	afterFocus,
 	afterActive
 ].join(", ");
-var stateLayers = (0, _vanilla_extract_recipes.recipe)({
-	base: (0, _vanilla_extract_css.style)({
+var stateLayers = (0, _gnist_themes_layers_css_js.gnistRecipe)({
+	base: (0, _gnist_themes_layers_css_js.gnistStyle)({
 		"::after": { opacity: 0 },
 		selectors: {
 			[afterAllStates]: {

package/dist/styles/states.css.d.ts

@@ -12,7 +12,7 @@ declare const stateLayersInternal: import("@vanilla-extract/recipes").RuntimeFn<
         false: string;
     };
     borderSize: Record<"none" | "small" | "medium" | "large" | "x-small", ComplexStyleRule>;
-    borderRadius: Record<"none" | "overlay" | "button" | "input" | "small" | "checkbox" | "medium" | "large" | "x-large" | "xx-large" | "full" | "card" | "picker" | "feedback", ComplexStyleRule>;
+    borderRadius: Record<"overlay" | "none" | "button" | "input" | "small" | "checkbox" | "medium" | "large" | "x-large" | "xx-large" | "full" | "card" | "picker" | "feedback", ComplexStyleRule>;
     backgroundColor: Record<"on-primary" | "on-secondary" | "on-secondary-container" | "on-background" | "on-surface-variant" | "on-error" | "on-success" | "palette-black", ComplexStyleRule>;
 }>;
 type RecipeProperties = Pick<typeof stateLayersInternal, "variants" | "classNames">;

package/dist/styles/states.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"states.css.d.ts","sourceRoot":"","sources":["../../src/styles/states.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAS,MAAM,sBAAsB,CAAC;AAM/D,eAAO,MAAM,UAAU,QASrB,CAAC;AAkCH,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;EAoFvB,CAAC;AAEH,KAAK,gBAAgB,GAAG,IAAI,CACxB,OAAO,mBAAmB,EAC1B,UAAU,GAAG,YAAY,CAC5B,CAAC;AACF,KAAK,cAAc,GAAG,CAClB,OAAO,EAAE,QAAQ,CAAC,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,KAC3D,MAAM,CAAC;AAEZ,eAAO,MAAM,WAAW,EAAE,gBAAgB,GAAG,cACtB,CAAC"}
+{"version":3,"file":"states.css.d.ts","sourceRoot":"","sources":["../../src/styles/states.css.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAKxD,eAAO,MAAM,UAAU,QASrB,CAAC;AAkCH,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;EAoFvB,CAAC;AAEH,KAAK,gBAAgB,GAAG,IAAI,CACxB,OAAO,mBAAmB,EAC1B,UAAU,GAAG,YAAY,CAC5B,CAAC;AACF,KAAK,cAAc,GAAG,CAClB,OAAO,EAAE,QAAQ,CAAC,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,KAC3D,MAAM,CAAC;AAEZ,eAAO,MAAM,WAAW,EAAE,gBAAgB,GAAG,cACtB,CAAC"}

package/dist/styles/states.css.js

@@ -1,12 +1,11 @@
 "use client";
-import { recipe } from "@vanilla-extract/recipes";
+import { gnistRecipe, gnistStyle } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
 import { calc } from "@vanilla-extract/css-utils";
-import { style } from "@vanilla-extract/css";
 import { map, mapWithIndex } from "fp-ts/Record";
 import { pipe } from "fp-ts/function";
 //#region src/styles/states.css.ts
-var focusStyle = style({ selectors: {
+var focusStyle = gnistStyle({ selectors: {
 	"&:focus:not(:focus-visible)": { outline: "none" },
 	"&:focus-visible": { outline: `${tokens.stroke.medium} solid ${tokens.color.interactive}` }
 } });
@@ -32,8 +31,8 @@ var afterAllStates = [
 	afterFocus,
 	afterActive
 ].join(", ");
-var stateLayers = recipe({
-	base: style({
+var stateLayers = gnistRecipe({
+	base: gnistStyle({
 		"::after": { opacity: 0 },
 		selectors: {
 			[afterAllStates]: {

package/dist/utilities/accessibility/visuallyHidden.css.cjs

@@ -1,7 +1,7 @@
 "use client";
 require("../../_virtual/_rolldown/runtime.cjs");
 //#region src/utilities/accessibility/visuallyHidden.css.ts
-var visuallyHidden = (0, require("@vanilla-extract/css").style)({
+var visuallyHidden = (0, require("@gnist/themes/layers.css.js").gnistStyle)({
 	border: "0 !important",
 	clip: "rect(1px, 1px, 1px, 1px) !important",
 	WebkitClipPath: "inset(50%) !important",

package/dist/utilities/accessibility/visuallyHidden.css.js

@@ -1,7 +1,7 @@
 "use client";
-import { style } from "@vanilla-extract/css";
+import { gnistStyle } from "@gnist/themes/layers.css.js";
 //#region src/utilities/accessibility/visuallyHidden.css.ts
-var visuallyHidden = style({
+var visuallyHidden = gnistStyle({
 	border: "0 !important",
 	clip: "rect(1px, 1px, 1px, 1px) !important",
 	WebkitClipPath: "inset(50%) !important",

package/dist/utilities/layout/styles.css.cjs

@@ -1,10 +1,10 @@
 "use client";
 require("../../_virtual/_rolldown/runtime.cjs");
 let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
-let _vanilla_extract_recipes = require("@vanilla-extract/recipes");
+let _gnist_themes_layers_css_js = require("@gnist/themes/layers.css.js");
 //#region src/utilities/layout/styles.css.ts
 var spacing = require("@gnist/themes/tokens.css.js").tokens.spacing;
-var rowRecipe = (0, _vanilla_extract_recipes.recipe)({
+var rowRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({
 		display: "flex",
 		flexDirection: "row",
@@ -52,7 +52,7 @@ var rowRecipe = (0, _vanilla_extract_recipes.recipe)({
 		}
 	}
 });
-var columnRecipe = (0, _vanilla_extract_recipes.recipe)({
+var columnRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({
 		display: "flex",
 		flexDirection: "column",

package/dist/utilities/layout/styles.css.js

@@ -1,10 +1,10 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { recipe } from "@vanilla-extract/recipes";
+import { gnistRecipe } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
 //#region src/utilities/layout/styles.css.ts
 var spacing = tokens.spacing;
-var rowRecipe = recipe({
+var rowRecipe = gnistRecipe({
 	base: [atoms({
 		display: "flex",
 		flexDirection: "row",
@@ -52,7 +52,7 @@ var rowRecipe = recipe({
 		}
 	}
 });
-var columnRecipe = recipe({
+var columnRecipe = gnistRecipe({
 	base: [atoms({
 		display: "flex",
 		flexDirection: "column",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gnist/design-system",
-    "version": "6.2.1",
+    "version": "7.0.0-alpha.0",
     "license": "UNLICENSED",
     "type": "module",
     "main": "dist/index.cjs",
@@ -50,10 +50,10 @@
     "dependencies": {
         "@base-ui/react": "1.0.0",
         "@formkit/auto-animate": "^0.8.2",
-        "@gnist/component-utils": "3.0.14",
-        "@gnist/themes": "^3.30.0",
+        "@gnist/component-utils": "3.0.15-alpha.0",
+        "@gnist/themes": "^4.0.0-alpha.0",
         "@material-symbols/svg-400": "^0.42.3",
-        "@vanilla-extract/css": "^1.17.4",
+        "@vanilla-extract/css": "1.20.1",
         "@vanilla-extract/css-utils": "^0.1.6",
         "@vanilla-extract/dynamic": "^2.1.5",
         "@vanilla-extract/recipes": "^0.5.7",
@@ -104,5 +104,5 @@
             "optional": true
         }
     },
-    "gitHead": "4affa3181a0837744e569d48a50763b09b33e7a7"
+    "gitHead": "844fabd0ca280f12eb1fa5ddf8103d0015b38a61"
 }