@gnist/design-system 6.0.0-alpha.0 → 6.0.0-alpha.3

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.0.0-alpha.3](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@6.0.0-alpha.2...@gnist/design-system@6.0.0-alpha.3) (2026-04-20)
+
+**Note:** Version bump only for package @gnist/design-system
+
+## [6.0.0-alpha.2](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@6.0.0-alpha.1...@gnist/design-system@6.0.0-alpha.2) (2026-04-20)
+
+**Note:** Version bump only for package @gnist/design-system
+
+## [6.0.0-alpha.1](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@6.0.0-alpha.0...@gnist/design-system@6.0.0-alpha.1) (2026-04-20)
+
+### Features
+
+* Wrap gnist css in [@layer](https://github.com/layer) gnist { ... } ([c513601](https://github.com/mollerdigital/design-system-design-system/commit/c513601b4831e7d02f08028cdf1f0cd4c42f60bc))
+
+### Bug Fixes
+
+* lint ([1c19f04](https://github.com/mollerdigital/design-system-design-system/commit/1c19f04a0aae90d887e3f26f4c31321bea84dced))
+
 ## [6.0.0-alpha.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.6.1...@gnist/design-system@6.0.0-alpha.0) (2026-04-17)
 
 ### ⚠ BREAKING CHANGES

package/dist/building-blocks/inputs/internal/textBelowInput.css.cjs

@@ -2,8 +2,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
-const recipes = require("@vanilla-extract/recipes");
-const textBelowInputRecipe = recipes.recipe({
+const layers_css_js = require("@gnist/themes/layers.css.js");
+const textBelowInputRecipe = layers_css_js.gnistRecipe({
   base: [
     atoms_css_js.atoms({
       typography: "detail-small",

package/dist/building-blocks/inputs/internal/textBelowInput.css.js

@@ -1,7 +1,7 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { recipe } from "@vanilla-extract/recipes";
-const textBelowInputRecipe = recipe({
+import { gnistRecipe } from "@gnist/themes/layers.css.js";
+const textBelowInputRecipe = gnistRecipe({
   base: [
     atoms({
       typography: "detail-small",

package/dist/components/actions/buttons/styles.css.cjs

@@ -4,11 +4,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const animations_css = require("../../../styles/animations.css.cjs");
 const states_css = require("../../../styles/states.css.cjs");
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const layers_css_js = require("@gnist/themes/layers.css.js");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
-const css = require("@vanilla-extract/css");
 const cssUtils = require("@vanilla-extract/css-utils");
-const recipes = require("@vanilla-extract/recipes");
-const buttonBase = css.style([
+const buttonBase = layers_css_js.gnistStyle([
   states_css.focusStyle,
   animations_css.clickAnimation,
   atoms_css_js.atoms({
@@ -33,7 +32,7 @@ const buttonBase = css.style([
   }
 ]);
 const getColors = (variant) => atoms_css_js.atoms({ backgroundColor: variant, color: `on-${variant}` });
-const textAndIconButton = css.style([
+const textAndIconButton = layers_css_js.gnistStyle([
   atoms_css_js.atoms({ height: "l" }),
   {
     color: "inherit",
@@ -41,7 +40,7 @@ const textAndIconButton = css.style([
     flexShrink: 0
   }
 ]);
-const buttonRecipe = recipes.recipe({
+const buttonRecipe = layers_css_js.gnistRecipe({
   base: [buttonBase],
   variants: {
     isLoading: {
@@ -100,7 +99,7 @@ const buttonRecipe = recipes.recipe({
     isLoading: false
   }
 });
-const boxedButton = recipes.recipe({
+const boxedButton = layers_css_js.gnistRecipe({
   base: atoms_css_js.atoms({ columnGap: "base" }),
   variants: {
     density: {
@@ -110,7 +109,7 @@ const boxedButton = recipes.recipe({
   },
   defaultVariants: { density: "default" }
 });
-const iconButton = recipes.recipe({
+const iconButton = layers_css_js.gnistRecipe({
   variants: {
     showLabel: {
       left: { paddingLeft: tokens_css_js.tokens.spacing.base },
@@ -119,10 +118,10 @@ const iconButton = recipes.recipe({
     }
   }
 });
-const actionText = css.style({
+const actionText = layers_css_js.gnistStyle({
   fontWeight: tokens_css_js.tokens.typeface.weight.semibold
 });
-const textButtonText = recipes.recipe({
+const textButtonText = layers_css_js.gnistRecipe({
   base: {
     borderBottomStyle: "solid",
     borderBottomWidth: tokens_css_js.tokens.stroke.medium

package/dist/components/actions/buttons/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/styles.css.ts"],"names":[],"mappings":"AA8CA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0DvB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;EAStB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;EAQrB,CAAC;AAEH,eAAO,MAAM,UAAU,QAErB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;EA0BzB,CAAC"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/styles.css.ts"],"names":[],"mappings":"AA6CA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0DvB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;EAStB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;EAQrB,CAAC;AAEH,eAAO,MAAM,UAAU,QAErB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;EA0BzB,CAAC"}

package/dist/components/actions/buttons/styles.css.js

@@ -2,11 +2,10 @@
 import { clickAnimation } from "../../../styles/animations.css.js";
 import { focusStyle } from "../../../styles/states.css.js";
 import { atoms } from "@gnist/themes/atoms.css.js";
+import { gnistStyle, gnistRecipe } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-import { style } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
-import { recipe } from "@vanilla-extract/recipes";
-const buttonBase = style([
+const buttonBase = gnistStyle([
   focusStyle,
   clickAnimation,
   atoms({
@@ -31,7 +30,7 @@ const buttonBase = style([
   }
 ]);
 const getColors = (variant) => atoms({ backgroundColor: variant, color: `on-${variant}` });
-const textAndIconButton = style([
+const textAndIconButton = gnistStyle([
   atoms({ height: "l" }),
   {
     color: "inherit",
@@ -39,7 +38,7 @@ const textAndIconButton = style([
     flexShrink: 0
   }
 ]);
-const buttonRecipe = recipe({
+const buttonRecipe = gnistRecipe({
   base: [buttonBase],
   variants: {
     isLoading: {
@@ -98,7 +97,7 @@ const buttonRecipe = recipe({
     isLoading: false
   }
 });
-const boxedButton = recipe({
+const boxedButton = gnistRecipe({
   base: atoms({ columnGap: "base" }),
   variants: {
     density: {
@@ -108,7 +107,7 @@ const boxedButton = recipe({
   },
   defaultVariants: { density: "default" }
 });
-const iconButton = recipe({
+const iconButton = gnistRecipe({
   variants: {
     showLabel: {
       left: { paddingLeft: tokens.spacing.base },
@@ -117,10 +116,10 @@ const iconButton = recipe({
     }
   }
 });
-const actionText = style({
+const actionText = gnistStyle({
   fontWeight: tokens.typeface.weight.semibold
 });
-const textButtonText = recipe({
+const textButtonText = gnistRecipe({
   base: {
     borderBottomStyle: "solid",
     borderBottomWidth: tokens.stroke.medium

package/dist/components/actions/chips/styles.css.cjs

@@ -2,11 +2,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const layers_css_js = require("@gnist/themes/layers.css.js");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
-const css = require("@vanilla-extract/css");
 const cssUtils = require("@vanilla-extract/css-utils");
-const recipes = require("@vanilla-extract/recipes");
-const chipBase = css.style({
+const chipBase = layers_css_js.gnistStyle({
   display: "flex",
   gap: tokens_css_js.tokens.spacing.base,
   textWrap: "nowrap",
@@ -20,7 +19,7 @@ const chipBase = css.style({
   minHeight: tokens_css_js.tokens.size.xl,
   justifyContent: "center"
 });
-const chipRecipe = recipes.recipe({
+const chipRecipe = layers_css_js.gnistRecipe({
   base: chipBase,
   variants: {
     selected: {

package/dist/components/actions/chips/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/styles.css.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDrB,CAAC"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/styles.css.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDrB,CAAC"}

package/dist/components/actions/chips/styles.css.js

@@ -1,10 +1,9 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
+import { gnistStyle, gnistRecipe } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-import { style } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
-import { recipe } from "@vanilla-extract/recipes";
-const chipBase = style({
+const chipBase = gnistStyle({
   display: "flex",
   gap: tokens.spacing.base,
   textWrap: "nowrap",
@@ -18,7 +17,7 @@ const chipBase = style({
   minHeight: tokens.size.xl,
   justifyContent: "center"
 });
-const chipRecipe = recipe({
+const chipRecipe = gnistRecipe({
   base: chipBase,
   variants: {
     selected: {

package/dist/components/actions/selectionControls/checkbox.css.cjs

@@ -2,9 +2,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const layers_css_js = require("@gnist/themes/layers.css.js");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
-const recipes = require("@vanilla-extract/recipes");
-const CheckboxRecipe = recipes.recipe({
+const CheckboxRecipe = layers_css_js.gnistRecipe({
   base: [
     {
       borderStyle: "solid",
@@ -95,7 +95,7 @@ const CheckboxRecipe = recipes.recipe({
     }
   ]
 });
-const checkbox = recipes.recipe({
+const checkbox = layers_css_js.gnistRecipe({
   base: [
     atoms_css_js.atoms({
       color: "surface"

package/dist/components/actions/selectionControls/checkbox.css.js

@@ -1,8 +1,8 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
+import { gnistRecipe } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-import { recipe } from "@vanilla-extract/recipes";
-const CheckboxRecipe = recipe({
+const CheckboxRecipe = gnistRecipe({
   base: [
     {
       borderStyle: "solid",
@@ -93,7 +93,7 @@ const CheckboxRecipe = recipe({
     }
   ]
 });
-const checkbox = recipe({
+const checkbox = gnistRecipe({
   base: [
     atoms({
       color: "surface"

package/dist/components/actions/selectionControls/radiobutton.css.cjs

@@ -2,9 +2,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const layers_css_js = require("@gnist/themes/layers.css.js");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
-const recipes = require("@vanilla-extract/recipes");
-const RadioButtonRecipe = recipes.recipe({
+const RadioButtonRecipe = layers_css_js.gnistRecipe({
   base: [
     atoms_css_js.atoms({
       height: "s",
@@ -45,7 +45,7 @@ const RadioButtonRecipe = recipes.recipe({
     }
   }
 });
-const CheckedCircleRecipe = recipes.recipe({
+const CheckedCircleRecipe = layers_css_js.gnistRecipe({
   base: [
     atoms_css_js.atoms({
       display: "inline",

package/dist/components/actions/selectionControls/radiobutton.css.js

@@ -1,8 +1,8 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
+import { gnistRecipe } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-import { recipe } from "@vanilla-extract/recipes";
-const RadioButtonRecipe = recipe({
+const RadioButtonRecipe = gnistRecipe({
   base: [
     atoms({
       height: "s",
@@ -43,7 +43,7 @@ const RadioButtonRecipe = recipe({
     }
   }
 });
-const CheckedCircleRecipe = recipe({
+const CheckedCircleRecipe = gnistRecipe({
   base: [
     atoms({
       display: "inline",

package/dist/components/actions/selectionControls/radiogroup.css.cjs

@@ -2,9 +2,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
-const css = require("@vanilla-extract/css");
-const recipes = require("@vanilla-extract/recipes");
-const fieldSetStyle = css.style([
+const layers_css_js = require("@gnist/themes/layers.css.js");
+const fieldSetStyle = layers_css_js.gnistStyle([
   {
     border: "none"
   },
@@ -18,7 +17,7 @@ const fieldSetStyle = css.style([
 const legendStyle = atoms_css_js.atoms({
   marginBottom: "base"
 });
-const radioContainerStyle = recipes.recipe({
+const radioContainerStyle = layers_css_js.gnistRecipe({
   base: [
     atoms_css_js.atoms({
       display: "flex",

package/dist/components/actions/selectionControls/radiogroup.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radiogroup.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/radiogroup.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,QAUxB,CAAC;AAEH,eAAO,MAAM,WAAW,QAEtB,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;EAsB9B,CAAC"}
+{"version":3,"file":"radiogroup.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/radiogroup.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,QAUxB,CAAC;AAEH,eAAO,MAAM,WAAW,QAEtB,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;EAsB9B,CAAC"}

package/dist/components/actions/selectionControls/radiogroup.css.js

@@ -1,8 +1,7 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { style } from "@vanilla-extract/css";
-import { recipe } from "@vanilla-extract/recipes";
-const fieldSetStyle = style([
+import { gnistStyle, gnistRecipe } from "@gnist/themes/layers.css.js";
+const fieldSetStyle = gnistStyle([
   {
     border: "none"
   },
@@ -16,7 +15,7 @@ const fieldSetStyle = style([
 const legendStyle = atoms({
   marginBottom: "base"
 });
-const radioContainerStyle = recipe({
+const radioContainerStyle = gnistRecipe({
   base: [
     atoms({
       display: "flex",

package/dist/components/actions/selectionControls/shared.css.cjs

@@ -3,22 +3,21 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const states_css = require("../../../styles/states.css.cjs");
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const layers_css_js = require("@gnist/themes/layers.css.js");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
-const css = require("@vanilla-extract/css");
 const cssUtils = require("@vanilla-extract/css-utils");
-const recipes = require("@vanilla-extract/recipes");
-const InputWrapper = css.style({
+const InputWrapper = layers_css_js.gnistStyle({
   position: "relative",
   display: "flex",
   width: "fit-content",
   height: "fit-content"
 });
-const LabelStyle = css.style([
+const LabelStyle = layers_css_js.gnistStyle([
   {
     alignSelf: "center"
   }
 ]);
-const LabelRecipe = recipes.recipe({
+const LabelRecipe = layers_css_js.gnistRecipe({
   base: [
     {
       display: "flex",
@@ -45,7 +44,7 @@ const LabelRecipe = recipes.recipe({
     }
   }
 });
-const InputStyleRecipe = recipes.recipe({
+const InputStyleRecipe = layers_css_js.gnistRecipe({
   base: [
     {
       position: "absolute",
@@ -71,7 +70,7 @@ const InputStyleRecipe = recipes.recipe({
     }
   }
 });
-const indentedDescriptionStyle = css.style({
+const indentedDescriptionStyle = layers_css_js.gnistStyle({
   paddingLeft: cssUtils.calc.add(tokens_css_js.tokens.size.s, cssUtils.calc.multiply(tokens_css_js.tokens.spacing.base, 3))
 });
 exports.InputStyleRecipe = InputStyleRecipe;

package/dist/components/actions/selectionControls/shared.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/shared.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,YAAY,QAKvB,CAAC;AAEH,eAAO,MAAM,UAAU,QAIrB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;EA2BtB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;EAyB3B,CAAC;AAEH,eAAO,MAAM,wBAAwB,QAEnC,CAAC"}
+{"version":3,"file":"shared.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/shared.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,QAKvB,CAAC;AAEH,eAAO,MAAM,UAAU,QAIrB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;EA2BtB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;EAyB3B,CAAC;AAEH,eAAO,MAAM,wBAAwB,QAEnC,CAAC"}

package/dist/components/actions/selectionControls/shared.css.js

@@ -1,22 +1,21 @@
 "use client";
 import { focusStyle } from "../../../styles/states.css.js";
 import { atoms } from "@gnist/themes/atoms.css.js";
+import { gnistStyle, gnistRecipe } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-import { style } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
-import { recipe } from "@vanilla-extract/recipes";
-const InputWrapper = style({
+const InputWrapper = gnistStyle({
   position: "relative",
   display: "flex",
   width: "fit-content",
   height: "fit-content"
 });
-const LabelStyle = style([
+const LabelStyle = gnistStyle([
   {
     alignSelf: "center"
   }
 ]);
-const LabelRecipe = recipe({
+const LabelRecipe = gnistRecipe({
   base: [
     {
       display: "flex",
@@ -43,7 +42,7 @@ const LabelRecipe = recipe({
     }
   }
 });
-const InputStyleRecipe = recipe({
+const InputStyleRecipe = gnistRecipe({
   base: [
     {
       position: "absolute",
@@ -69,7 +68,7 @@ const InputStyleRecipe = recipe({
     }
   }
 });
-const indentedDescriptionStyle = style({
+const indentedDescriptionStyle = gnistStyle({
   paddingLeft: calc.add(tokens.size.s, calc.multiply(tokens.spacing.base, 3))
 });
 export {

package/dist/components/actions/selectionControls/switch.css.cjs

@@ -2,33 +2,32 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const layers_css_js = require("@gnist/themes/layers.css.js");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
 const cssUtils = require("@vanilla-extract/css-utils");
-const recipes = require("@vanilla-extract/recipes");
-const css = require("@vanilla-extract/css");
-const focusContainer = css.style({
+const focusContainer = layers_css_js.gnistStyle({
   display: "inline-flex",
   alignItems: "center",
   position: "relative",
   flexShrink: 0
 });
-const switchField = css.style({
+const switchField = layers_css_js.gnistStyle({
   display: "inline-flex",
   flexDirection: "column",
   gap: tokens_css_js.tokens.spacing.base
 });
-const switchRow = css.style({
+const switchRow = layers_css_js.gnistStyle({
   display: "inline-flex",
   alignItems: "center",
   gap: tokens_css_js.tokens.spacing.xxs
 });
-const switchLabelContent = css.style({
+const switchLabelContent = layers_css_js.gnistStyle({
   display: "inline-flex",
   flexDirection: "column",
   gap: tokens_css_js.tokens.spacing.base,
   minWidth: 0
 });
-const switchContainer = css.style([
+const switchContainer = layers_css_js.gnistStyle([
   {
     position: "relative",
     display: "inline-flex",
@@ -44,7 +43,7 @@ const switchContainer = css.style([
     height: "m"
   })
 ]);
-const SwitchRecipe = recipes.recipe({
+const SwitchRecipe = layers_css_js.gnistRecipe({
   base: [
     switchContainer,
     {
@@ -107,7 +106,7 @@ const SwitchRecipe = recipes.recipe({
     }
   ]
 });
-const switchThumb = css.style({
+const switchThumb = layers_css_js.gnistStyle({
   position: "absolute",
   top: "50%",
   transform: "translateY(-50%)",
@@ -123,7 +122,7 @@ const switchThumb = css.style({
     }
   }
 });
-const SwitchThumbRecipe = recipes.recipe({
+const SwitchThumbRecipe = layers_css_js.gnistRecipe({
   base: [
     switchThumb,
     atoms_css_js.atoms({
@@ -179,7 +178,7 @@ const SwitchThumbRecipe = recipes.recipe({
     }
   ]
 });
-const switchThumbIcon = css.style([
+const switchThumbIcon = layers_css_js.gnistStyle([
   {
     display: "inline-flex",
     alignItems: "center",
@@ -191,7 +190,7 @@ const switchThumbIcon = css.style([
     color: "on-surface"
   })
 ]);
-const switchLabel = css.style([
+const switchLabel = layers_css_js.gnistStyle([
   {
     userSelect: "none",
     fontSize: tokens_css_js.tokens.type.small.body.fontSize,
@@ -201,7 +200,7 @@ const switchLabel = css.style([
     color: "on-surface"
   })
 ]);
-const SwitchLabelRecipe = recipes.recipe({
+const SwitchLabelRecipe = layers_css_js.gnistRecipe({
   base: [switchLabel],
   variants: {
     disabled: {
@@ -214,7 +213,7 @@ const SwitchLabelRecipe = recipes.recipe({
     }
   }
 });
-const switchDescription = css.style([
+const switchDescription = layers_css_js.gnistStyle([
   atoms_css_js.atoms({
     color: "text-variant"
   })

package/dist/components/actions/selectionControls/switch.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/switch.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,cAAc,QAKzB,CAAC;AAEH,eAAO,MAAM,WAAW,QAItB,CAAC;AAEH,eAAO,MAAM,SAAS,QAIpB,CAAC;AAEH,eAAO,MAAM,kBAAkB,QAK7B,CAAC;AAEH,eAAO,MAAM,eAAe,QAgB1B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;EA8DvB,CAAC;AAEH,eAAO,MAAM,WAAW,QAgBtB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;EA0D5B,CAAC;AAEH,eAAO,MAAM,eAAe,QAW1B,CAAC;AAEH,eAAO,MAAM,WAAW,QAStB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;EAY5B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAI5B,CAAC"}
+{"version":3,"file":"switch.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/switch.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,cAAc,QAKzB,CAAC;AAEH,eAAO,MAAM,WAAW,QAItB,CAAC;AAEH,eAAO,MAAM,SAAS,QAIpB,CAAC;AAEH,eAAO,MAAM,kBAAkB,QAK7B,CAAC;AAEH,eAAO,MAAM,eAAe,QAgB1B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;EA8DvB,CAAC;AAEH,eAAO,MAAM,WAAW,QAgBtB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;EA0D5B,CAAC;AAEH,eAAO,MAAM,eAAe,QAW1B,CAAC;AAEH,eAAO,MAAM,WAAW,QAStB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;EAY5B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAI5B,CAAC"}

package/dist/components/actions/selectionControls/switch.css.js

@@ -1,32 +1,31 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
+import { gnistStyle, gnistRecipe } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
 import { calc } from "@vanilla-extract/css-utils";
-import { recipe } from "@vanilla-extract/recipes";
-import { style } from "@vanilla-extract/css";
-const focusContainer = style({
+const focusContainer = gnistStyle({
   display: "inline-flex",
   alignItems: "center",
   position: "relative",
   flexShrink: 0
 });
-const switchField = style({
+const switchField = gnistStyle({
   display: "inline-flex",
   flexDirection: "column",
   gap: tokens.spacing.base
 });
-const switchRow = style({
+const switchRow = gnistStyle({
   display: "inline-flex",
   alignItems: "center",
   gap: tokens.spacing.xxs
 });
-const switchLabelContent = style({
+const switchLabelContent = gnistStyle({
   display: "inline-flex",
   flexDirection: "column",
   gap: tokens.spacing.base,
   minWidth: 0
 });
-const switchContainer = style([
+const switchContainer = gnistStyle([
   {
     position: "relative",
     display: "inline-flex",
@@ -42,7 +41,7 @@ const switchContainer = style([
     height: "m"
   })
 ]);
-const SwitchRecipe = recipe({
+const SwitchRecipe = gnistRecipe({
   base: [
     switchContainer,
     {
@@ -105,7 +104,7 @@ const SwitchRecipe = recipe({
     }
   ]
 });
-const switchThumb = style({
+const switchThumb = gnistStyle({
   position: "absolute",
   top: "50%",
   transform: "translateY(-50%)",
@@ -121,7 +120,7 @@ const switchThumb = style({
     }
   }
 });
-const SwitchThumbRecipe = recipe({
+const SwitchThumbRecipe = gnistRecipe({
   base: [
     switchThumb,
     atoms({
@@ -177,7 +176,7 @@ const SwitchThumbRecipe = recipe({
     }
   ]
 });
-const switchThumbIcon = style([
+const switchThumbIcon = gnistStyle([
   {
     display: "inline-flex",
     alignItems: "center",
@@ -189,7 +188,7 @@ const switchThumbIcon = style([
     color: "on-surface"
   })
 ]);
-const switchLabel = style([
+const switchLabel = gnistStyle([
   {
     userSelect: "none",
     fontSize: tokens.type.small.body.fontSize,
@@ -199,7 +198,7 @@ const switchLabel = style([
     color: "on-surface"
   })
 ]);
-const SwitchLabelRecipe = recipe({
+const SwitchLabelRecipe = gnistRecipe({
   base: [switchLabel],
   variants: {
     disabled: {
@@ -212,7 +211,7 @@ const SwitchLabelRecipe = recipe({
     }
   }
 });
-const switchDescription = style([
+const switchDescription = gnistStyle([
   atoms({
     color: "text-variant"
   })