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

package/dist/components/inputs/shared-styles/labelStyles.css.cjs

@@ -3,7 +3,7 @@ require("../../../_virtual/_rolldown/runtime.cjs");
 const require_inputFieldConstants_css = require("./inputFieldConstants.css.cjs");
 const require_inputField_css = require("./inputField.css.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");
 let _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
 let _vanilla_extract_css_utils = require("@vanilla-extract/css-utils");
 //#region src/components/inputs/shared-styles/labelStyles.css.ts
@@ -27,7 +27,7 @@ var elevatedLabelBackground = (backgroundColor) => ({
 	top: "5px",
 	height: _gnist_themes_tokens_css_js.tokens.stroke.medium
 });
-var labelStyle = (0, _vanilla_extract_recipes.recipe)({
+var labelStyle = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: {
 		zIndex: 1,
 		position: "relative",

package/dist/components/inputs/shared-styles/labelStyles.css.js

@@ -2,7 +2,7 @@
 import { preInputWidth, transitionTime } from "./inputFieldConstants.css.js";
 import { inputFieldStyle } from "./inputField.css.js";
 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";
 import { calc } from "@vanilla-extract/css-utils";
 //#region src/components/inputs/shared-styles/labelStyles.css.ts
@@ -26,7 +26,7 @@ var elevatedLabelBackground = (backgroundColor) => ({
 	top: "5px",
 	height: tokens.stroke.medium
 });
-var labelStyle = recipe({
+var labelStyle = gnistRecipe({
 	base: {
 		zIndex: 1,
 		position: "relative",

package/dist/components/inputs/shared-styles/suffixPrefix.css.cjs

@@ -1,13 +1,13 @@
 "use client";
 require("../../../_virtual/_rolldown/runtime.cjs");
 let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
-let _vanilla_extract_css = require("@vanilla-extract/css");
+let _gnist_themes_layers_css_js = require("@gnist/themes/layers.css.js");
 //#region src/components/inputs/shared-styles/suffixPrefix.css.ts
-var prefixStyle = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({
+var prefixStyle = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({
 	color: "text-variant",
 	paddingRight: "xxs"
 })]);
-var suffixStyle = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({
+var suffixStyle = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({
 	color: "text-variant",
 	paddingLeft: "xxs"
 })]);

package/dist/components/inputs/shared-styles/suffixPrefix.css.js

@@ -1,12 +1,12 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { style } from "@vanilla-extract/css";
+import { gnistStyle } from "@gnist/themes/layers.css.js";
 //#region src/components/inputs/shared-styles/suffixPrefix.css.ts
-var prefixStyle = style([atoms({
+var prefixStyle = gnistStyle([atoms({
 	color: "text-variant",
 	paddingRight: "xxs"
 })]);
-var suffixStyle = style([atoms({
+var suffixStyle = gnistStyle([atoms({
 	color: "text-variant",
 	paddingLeft: "xxs"
 })]);

package/dist/components/inputs/textFields/textArea.css.cjs

@@ -2,7 +2,7 @@
 require("../../../_virtual/_rolldown/runtime.cjs");
 let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
 //#region src/components/inputs/textFields/textArea.css.ts
-var wordCounterStyle = (0, require("@vanilla-extract/recipes").recipe)({
+var wordCounterStyle = (0, require("@gnist/themes/layers.css.js").gnistRecipe)({
 	base: (0, _gnist_themes_atoms_css_js.atoms)({
 		display: "flex",
 		backgroundColor: "surface",

package/dist/components/inputs/textFields/textArea.css.js

@@ -1,8 +1,8 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { recipe } from "@vanilla-extract/recipes";
+import { gnistRecipe } from "@gnist/themes/layers.css.js";
 //#region src/components/inputs/textFields/textArea.css.ts
-var wordCounterStyle = recipe({
+var wordCounterStyle = gnistRecipe({
 	base: atoms({
 		display: "flex",
 		backgroundColor: "surface",

package/dist/components/progress/spinner.css.cjs

@@ -1,6 +1,7 @@
 "use client";
 require("../../_virtual/_rolldown/runtime.cjs");
 let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
+let _gnist_themes_layers_css_js = require("@gnist/themes/layers.css.js");
 let _vanilla_extract_css = require("@vanilla-extract/css");
 //#region src/components/progress/spinner.css.ts
 var rotate360 = (0, _vanilla_extract_css.keyframes)({
@@ -11,7 +12,7 @@ var fadeIn = (0, _vanilla_extract_css.keyframes)({
 	"0%": { opacity: 0 },
 	"100%": { opacity: 1 }
 });
-var spinnerRecipe = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({ borderWidth: "medium" }), {
+var spinnerRecipe = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({ borderWidth: "medium" }), {
 	position: "absolute",
 	borderRadius: "50%",
 	background: "transparent",

package/dist/components/progress/spinner.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.css.d.ts","sourceRoot":"","sources":["../../../src/components/progress/spinner.css.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,aAAa,QAYxB,CAAC"}
+{"version":3,"file":"spinner.css.d.ts","sourceRoot":"","sources":["../../../src/components/progress/spinner.css.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,aAAa,QAYxB,CAAC"}

package/dist/components/progress/spinner.css.js

@@ -1,6 +1,7 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { keyframes, style } from "@vanilla-extract/css";
+import { gnistStyle } from "@gnist/themes/layers.css.js";
+import { keyframes } from "@vanilla-extract/css";
 //#region src/components/progress/spinner.css.ts
 var rotate360 = keyframes({
 	"0%": { transform: "rotate(0deg)" },
@@ -10,7 +11,7 @@ var fadeIn = keyframes({
 	"0%": { opacity: 0 },
 	"100%": { opacity: 1 }
 });
-var spinnerRecipe = style([atoms({ borderWidth: "medium" }), {
+var spinnerRecipe = gnistStyle([atoms({ borderWidth: "medium" }), {
 	position: "absolute",
 	borderRadius: "50%",
 	background: "transparent",

package/dist/components/surfaces/accordion/accordion.css.cjs

@@ -1,11 +1,11 @@
 "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");
 let _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
 let _vanilla_extract_css = require("@vanilla-extract/css");
 //#region src/components/surfaces/accordion/accordion.css.ts
-var accordionRecipe = (0, _vanilla_extract_recipes.recipe)({
+var accordionRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({ color: "on-background" })],
 	variants: {
 		withDivider: { true: { borderBottom: `${_gnist_themes_tokens_css_js.tokens.stroke.small} solid ${_gnist_themes_tokens_css_js.tokens.color.outline}` } },
@@ -15,7 +15,7 @@ var accordionRecipe = (0, _vanilla_extract_recipes.recipe)({
 		} }
 	}
 });
-var head = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({
+var head = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({
 	display: "flex",
 	justifyContent: "space-between",
 	alignItems: "center",
@@ -26,8 +26,8 @@ var head = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms
 	position: "relative",
 	selectors: { "&:focus": { outline: `${_gnist_themes_tokens_css_js.tokens.stroke.medium} solid ${_gnist_themes_tokens_css_js.tokens.color.interactive}` } }
 }]);
-var heading = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({ typography: "heading3-small" }), { fontSize: _gnist_themes_tokens_css_js.tokens.type.medium.body.fontSize }]);
-var headBackground = (0, _vanilla_extract_css.style)({
+var heading = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({ typography: "heading3-small" }), { fontSize: _gnist_themes_tokens_css_js.tokens.type.medium.body.fontSize }]);
+var headBackground = (0, _gnist_themes_layers_css_js.gnistStyle)({
 	position: "absolute",
 	width: "100%",
 	height: "100%",
@@ -37,7 +37,7 @@ var headBackground = (0, _vanilla_extract_css.style)({
 		opacity: _gnist_themes_tokens_css_js.tokens.opacity["on-hover"]
 	} }
 });
-var body = (0, _vanilla_extract_css.style)({ padding: `${_gnist_themes_tokens_css_js.tokens.spacing.xxs} ${_gnist_themes_tokens_css_js.tokens.spacing.xxs} ${_gnist_themes_tokens_css_js.tokens.spacing.s}` });
+var body = (0, _gnist_themes_layers_css_js.gnistStyle)({ padding: `${_gnist_themes_tokens_css_js.tokens.spacing.xxs} ${_gnist_themes_tokens_css_js.tokens.spacing.xxs} ${_gnist_themes_tokens_css_js.tokens.spacing.s}` });
 (0, _vanilla_extract_css.globalStyle)("summary::-webkit-details-marker", { display: "none" });
 (0, _vanilla_extract_css.globalStyle)(":not(details[open]) summary svg", {
 	transform: "rotate(0deg)",

package/dist/components/surfaces/accordion/accordion.css.js

@@ -1,10 +1,10 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { recipe } from "@vanilla-extract/recipes";
+import { gnistRecipe, gnistStyle } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-import { globalStyle, style } from "@vanilla-extract/css";
+import { globalStyle } from "@vanilla-extract/css";
 //#region src/components/surfaces/accordion/accordion.css.ts
-var accordionRecipe = recipe({
+var accordionRecipe = gnistRecipe({
 	base: [atoms({ color: "on-background" })],
 	variants: {
 		withDivider: { true: { borderBottom: `${tokens.stroke.small} solid ${tokens.color.outline}` } },
@@ -14,7 +14,7 @@ var accordionRecipe = recipe({
 		} }
 	}
 });
-var head = style([atoms({
+var head = gnistStyle([atoms({
 	display: "flex",
 	justifyContent: "space-between",
 	alignItems: "center",
@@ -25,8 +25,8 @@ var head = style([atoms({
 	position: "relative",
 	selectors: { "&:focus": { outline: `${tokens.stroke.medium} solid ${tokens.color.interactive}` } }
 }]);
-var heading = style([atoms({ typography: "heading3-small" }), { fontSize: tokens.type.medium.body.fontSize }]);
-var headBackground = style({
+var heading = gnistStyle([atoms({ typography: "heading3-small" }), { fontSize: tokens.type.medium.body.fontSize }]);
+var headBackground = gnistStyle({
 	position: "absolute",
 	width: "100%",
 	height: "100%",
@@ -36,7 +36,7 @@ var headBackground = style({
 		opacity: tokens.opacity["on-hover"]
 	} }
 });
-var body = style({ padding: `${tokens.spacing.xxs} ${tokens.spacing.xxs} ${tokens.spacing.s}` });
+var body = gnistStyle({ padding: `${tokens.spacing.xxs} ${tokens.spacing.xxs} ${tokens.spacing.s}` });
 globalStyle("summary::-webkit-details-marker", { display: "none" });
 globalStyle(":not(details[open]) summary svg", {
 	transform: "rotate(0deg)",

package/dist/components/surfaces/cards/cards.css.cjs

@@ -3,13 +3,12 @@ require("../../../_virtual/_rolldown/runtime.cjs");
 const require_animations_css = require("../../../styles/animations.css.cjs");
 const require_states_css = require("../../../styles/states.css.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");
 let _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
-let _vanilla_extract_css = require("@vanilla-extract/css");
 let _gnist_themes_typography_css_js = require("@gnist/themes/typography.css.js");
 let _gnist_themes_colors_css_js = require("@gnist/themes/colors.css.js");
 //#region src/components/surfaces/cards/cards.css.ts
-var cardsBase = (0, _vanilla_extract_css.style)([
+var cardsBase = (0, _gnist_themes_layers_css_js.gnistStyle)([
 	(0, _gnist_themes_atoms_css_js.atoms)({
 		display: "block",
 		boxShadow: "low",
@@ -22,7 +21,7 @@ var cardsBase = (0, _vanilla_extract_css.style)([
 		textDecoration: "none"
 	}
 ]);
-var actionLayers = (0, _vanilla_extract_css.style)([
+var actionLayers = (0, _gnist_themes_layers_css_js.gnistStyle)([
 	require_animations_css.clickAnimation,
 	require_states_css.focusStyle,
 	require_states_css.stateLayers({
@@ -32,7 +31,7 @@ var actionLayers = (0, _vanilla_extract_css.style)([
 		setFocusState: true
 	})
 ]);
-var cardsRecipe = (0, _vanilla_extract_recipes.recipe)({
+var cardsRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [cardsBase],
 	variants: {
 		density: {

package/dist/components/surfaces/cards/cards.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cards.css.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/cards.css.ts"],"names":[],"mappings":"AAqCA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDtB,CAAC"}
+{"version":3,"file":"cards.css.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/cards.css.ts"],"names":[],"mappings":"AAoCA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDtB,CAAC"}

package/dist/components/surfaces/cards/cards.css.js

@@ -2,13 +2,12 @@
 import { clickAnimation } from "../../../styles/animations.css.js";
 import { focusStyle, stateLayers } from "../../../styles/states.css.js";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { recipe } from "@vanilla-extract/recipes";
+import { gnistRecipe, gnistStyle } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-import { style } from "@vanilla-extract/css";
 import { responsiveTypography } from "@gnist/themes/typography.css.js";
 import { boxColors } from "@gnist/themes/colors.css.js";
 //#region src/components/surfaces/cards/cards.css.ts
-var cardsBase = style([
+var cardsBase = gnistStyle([
 	atoms({
 		display: "block",
 		boxShadow: "low",
@@ -21,7 +20,7 @@ var cardsBase = style([
 		textDecoration: "none"
 	}
 ]);
-var actionLayers = style([
+var actionLayers = gnistStyle([
 	clickAnimation,
 	focusStyle,
 	stateLayers({
@@ -31,7 +30,7 @@ var actionLayers = style([
 		setFocusState: true
 	})
 ]);
-var cardsRecipe = recipe({
+var cardsRecipe = gnistRecipe({
 	base: [cardsBase],
 	variants: {
 		density: {

package/dist/components/surfaces/cards/checkboxCard.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");
 let _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
 //#region src/components/surfaces/cards/checkboxCard.css.ts
-var StyledCardRecipe = (0, _vanilla_extract_recipes.recipe)({
+var StyledCardRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({
 		display: "flex",
 		flexDirection: "column"

package/dist/components/surfaces/cards/checkboxCard.css.js

@@ -1,9 +1,9 @@
 "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/components/surfaces/cards/checkboxCard.css.ts
-var StyledCardRecipe = recipe({
+var StyledCardRecipe = gnistRecipe({
 	base: [atoms({
 		display: "flex",
 		flexDirection: "column"

package/dist/components/surfaces/cards/internal/SelectionCard.css.cjs

@@ -1,9 +1,9 @@
 "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/components/surfaces/cards/internal/SelectionCard.css.ts
-var cardDescription = (0, _vanilla_extract_recipes.recipe)({
+var cardDescription = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({ display: "block" })],
 	variants: { density: {
 		default: (0, _gnist_themes_atoms_css_js.atoms)({
@@ -17,7 +17,7 @@ var cardDescription = (0, _vanilla_extract_recipes.recipe)({
 	} },
 	defaultVariants: { density: "default" }
 });
-var SelectionControlSkeletonRecipe = (0, _vanilla_extract_recipes.recipe)({
+var SelectionControlSkeletonRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({
 		height: "s",
 		width: "s",

package/dist/components/surfaces/cards/internal/SelectionCard.css.js

@@ -1,8 +1,8 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { recipe } from "@vanilla-extract/recipes";
+import { gnistRecipe } from "@gnist/themes/layers.css.js";
 //#region src/components/surfaces/cards/internal/SelectionCard.css.ts
-var cardDescription = recipe({
+var cardDescription = gnistRecipe({
 	base: [atoms({ display: "block" })],
 	variants: { density: {
 		default: atoms({
@@ -16,7 +16,7 @@ var cardDescription = recipe({
 	} },
 	defaultVariants: { density: "default" }
 });
-var SelectionControlSkeletonRecipe = recipe({
+var SelectionControlSkeletonRecipe = gnistRecipe({
 	base: [atoms({
 		height: "s",
 		width: "s",

package/dist/components/surfaces/modal/modal.css.cjs

@@ -1,12 +1,12 @@
 "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");
 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");
 //#region src/components/surfaces/modal/modal.css.ts
-var backdropStyle = (0, _vanilla_extract_css.style)({
+var backdropStyle = (0, _gnist_themes_layers_css_js.gnistStyle)({
 	zIndex: -1,
 	position: "fixed",
 	right: 0,
@@ -16,7 +16,7 @@ var backdropStyle = (0, _vanilla_extract_css.style)({
 	backgroundColor: "rgba(0, 0, 0, 0.5)",
 	WebkitTapHighlightColor: "transparent"
 });
-var modalStyle = (0, _vanilla_extract_css.style)({
+var modalStyle = (0, _gnist_themes_layers_css_js.gnistStyle)({
 	position: "fixed",
 	zIndex: 1300,
 	right: 0,
@@ -36,7 +36,7 @@ var modalStyle = (0, _vanilla_extract_css.style)({
 	margin: 0,
 	padding: 0
 });
-var modalHeadingStyle = (0, _vanilla_extract_css.style)({ fontWeight: _gnist_themes_tokens_css_js.tokens.typeface.weight.semibold });
+var modalHeadingStyle = (0, _gnist_themes_layers_css_js.gnistStyle)({ fontWeight: _gnist_themes_tokens_css_js.tokens.typeface.weight.semibold });
 var dialogPadding = (size) => {
 	switch (size) {
 		case "fullscreen":
@@ -46,7 +46,7 @@ var dialogPadding = (size) => {
 		case "small": return _gnist_themes_tokens_css_js.tokens.spacing.m;
 	}
 };
-var dialogRecipe = (0, _vanilla_extract_recipes.recipe)({
+var dialogRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({
 		color: "on-surface",
 		display: "flex",
@@ -93,12 +93,12 @@ var dialogRecipe = (0, _vanilla_extract_recipes.recipe)({
 	} },
 	defaultVariants: { size: "medium" }
 });
-var headerRowPaddingBySize = (size) => (0, _vanilla_extract_css.style)({
+var headerRowPaddingBySize = (size) => (0, _gnist_themes_layers_css_js.gnistStyle)({
 	paddingTop: dialogPadding(size),
 	paddingRight: dialogPadding(size),
 	paddingLeft: dialogPadding(size)
 });
-var headerRowRecipe = (0, _vanilla_extract_recipes.recipe)({
+var headerRowRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [{
 		position: "sticky",
 		top: 0,
@@ -128,7 +128,7 @@ var headerRowRecipe = (0, _vanilla_extract_recipes.recipe)({
 		style: { border: "none" }
 	}]
 });
-var contentContainerRecipe = (0, _vanilla_extract_recipes.recipe)({
+var contentContainerRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({
 		display: "flex",
 		flexDirection: "column"
@@ -184,12 +184,12 @@ var contentContainerRecipe = (0, _vanilla_extract_recipes.recipe)({
 		}
 	]
 });
-var actionRowPaddingBySize = (size) => (0, _vanilla_extract_css.style)({
+var actionRowPaddingBySize = (size) => (0, _gnist_themes_layers_css_js.gnistStyle)({
 	paddingTop: dialogPadding(size),
 	paddingRight: dialogPadding(size),
 	paddingLeft: dialogPadding(size)
 });
-var actionRowRecipe = (0, _vanilla_extract_recipes.recipe)({
+var actionRowRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({
 		display: "flex",
 		alignItems: "center",

package/dist/components/surfaces/modal/modal.css.js

@@ -1,11 +1,11 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-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 { globalStyle, style } from "@vanilla-extract/css";
+import { globalStyle } from "@vanilla-extract/css";
 //#region src/components/surfaces/modal/modal.css.ts
-var backdropStyle = style({
+var backdropStyle = gnistStyle({
 	zIndex: -1,
 	position: "fixed",
 	right: 0,
@@ -15,7 +15,7 @@ var backdropStyle = style({
 	backgroundColor: "rgba(0, 0, 0, 0.5)",
 	WebkitTapHighlightColor: "transparent"
 });
-var modalStyle = style({
+var modalStyle = gnistStyle({
 	position: "fixed",
 	zIndex: 1300,
 	right: 0,
@@ -35,7 +35,7 @@ var modalStyle = style({
 	margin: 0,
 	padding: 0
 });
-var modalHeadingStyle = style({ fontWeight: tokens.typeface.weight.semibold });
+var modalHeadingStyle = gnistStyle({ fontWeight: tokens.typeface.weight.semibold });
 var dialogPadding = (size) => {
 	switch (size) {
 		case "fullscreen":
@@ -45,7 +45,7 @@ var dialogPadding = (size) => {
 		case "small": return tokens.spacing.m;
 	}
 };
-var dialogRecipe = recipe({
+var dialogRecipe = gnistRecipe({
 	base: [atoms({
 		color: "on-surface",
 		display: "flex",
@@ -92,12 +92,12 @@ var dialogRecipe = recipe({
 	} },
 	defaultVariants: { size: "medium" }
 });
-var headerRowPaddingBySize = (size) => style({
+var headerRowPaddingBySize = (size) => gnistStyle({
 	paddingTop: dialogPadding(size),
 	paddingRight: dialogPadding(size),
 	paddingLeft: dialogPadding(size)
 });
-var headerRowRecipe = recipe({
+var headerRowRecipe = gnistRecipe({
 	base: [{
 		position: "sticky",
 		top: 0,
@@ -127,7 +127,7 @@ var headerRowRecipe = recipe({
 		style: { border: "none" }
 	}]
 });
-var contentContainerRecipe = recipe({
+var contentContainerRecipe = gnistRecipe({
 	base: [atoms({
 		display: "flex",
 		flexDirection: "column"
@@ -183,12 +183,12 @@ var contentContainerRecipe = recipe({
 		}
 	]
 });
-var actionRowPaddingBySize = (size) => style({
+var actionRowPaddingBySize = (size) => gnistStyle({
 	paddingTop: dialogPadding(size),
 	paddingRight: dialogPadding(size),
 	paddingLeft: dialogPadding(size)
 });
-var actionRowRecipe = recipe({
+var actionRowRecipe = gnistRecipe({
 	base: [atoms({
 		display: "flex",
 		alignItems: "center",

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

@@ -1,15 +1,16 @@
 "use client";
 require("../../_virtual/_rolldown/runtime.cjs");
 let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
+let _gnist_themes_layers_css_js = require("@gnist/themes/layers.css.js");
 let _vanilla_extract_css = require("@vanilla-extract/css");
 //#region src/foundation/iconography/Icon.css.ts
 var svgHeight = (0, _vanilla_extract_css.createVar)();
 var svgWidth = (0, _vanilla_extract_css.createVar)();
-var iconContainer = (0, _vanilla_extract_css.style)([{ display: "inline-flex" }, (0, _gnist_themes_atoms_css_js.atoms)({
+var iconContainer = (0, _gnist_themes_layers_css_js.gnistStyle)([{ display: "inline-flex" }, (0, _gnist_themes_atoms_css_js.atoms)({
 	justifyContent: "center",
 	alignItems: "center"
 })]);
-var svg = (0, _vanilla_extract_css.style)({
+var svg = (0, _gnist_themes_layers_css_js.gnistStyle)({
 	overflow: "visible",
 	height: svgHeight,
 	width: svgWidth,

package/dist/foundation/iconography/Icon.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.css.d.ts","sourceRoot":"","sources":["../../../src/foundation/iconography/Icon.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,oBAAc,CAAC;AACrC,eAAO,MAAM,QAAQ,oBAAc,CAAC;AAEpC,eAAO,MAAM,aAAa,QAGxB,CAAC;AAEH,eAAO,MAAM,GAAG,QAKd,CAAC"}
+{"version":3,"file":"Icon.css.d.ts","sourceRoot":"","sources":["../../../src/foundation/iconography/Icon.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,oBAAc,CAAC;AACrC,eAAO,MAAM,QAAQ,oBAAc,CAAC;AAEpC,eAAO,MAAM,aAAa,QAGxB,CAAC;AAEH,eAAO,MAAM,GAAG,QAKd,CAAC"}

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;