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

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

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

@@ -2,11 +2,11 @@
 "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 prefixStyle = css.style([
+const layers_css_js = require("@gnist/themes/layers.css.js");
+const prefixStyle = layers_css_js.gnistStyle([
   atoms_css_js.atoms({ color: "text-variant", paddingRight: "xxs" })
 ]);
-const suffixStyle = css.style([
+const suffixStyle = layers_css_js.gnistStyle([
   atoms_css_js.atoms({ color: "text-variant", paddingLeft: "xxs" })
 ]);
 exports.prefixStyle = prefixStyle;

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

@@ -1,10 +1,10 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { style } from "@vanilla-extract/css";
-const prefixStyle = style([
+import { gnistStyle } from "@gnist/themes/layers.css.js";
+const prefixStyle = gnistStyle([
   atoms({ color: "text-variant", paddingRight: "xxs" })
 ]);
-const suffixStyle = style([
+const suffixStyle = gnistStyle([
   atoms({ color: "text-variant", paddingLeft: "xxs" })
 ]);
 export {

package/dist/components/inputs/textFields/textArea.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 wordCounterStyle = recipes.recipe({
+const layers_css_js = require("@gnist/themes/layers.css.js");
+const wordCounterStyle = layers_css_js.gnistRecipe({
   base: atoms_css_js.atoms({
     display: "flex",
     backgroundColor: "surface",

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

@@ -1,7 +1,7 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { recipe } from "@vanilla-extract/recipes";
-const wordCounterStyle = recipe({
+import { gnistRecipe } from "@gnist/themes/layers.css.js";
+const wordCounterStyle = gnistRecipe({
   base: atoms({
     display: "flex",
     backgroundColor: "surface",

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

@@ -2,6 +2,7 @@
 "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 css = require("@vanilla-extract/css");
 const rotate360 = css.keyframes({
   "0%": { transform: "rotate(0deg)" },
@@ -11,7 +12,7 @@ const fadeIn = css.keyframes({
   "0%": { opacity: 0 },
   "100%": { opacity: 1 }
 });
-const spinnerRecipe = css.style([
+const spinnerRecipe = layers_css_js.gnistStyle([
   atoms_css_js.atoms({ borderWidth: "medium" }),
   {
     position: "absolute",

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";
 const rotate360 = keyframes({
   "0%": { transform: "rotate(0deg)" },
   "100%": { transform: "rotate(360deg)" }
@@ -9,7 +10,7 @@ const fadeIn = keyframes({
   "0%": { opacity: 0 },
   "100%": { opacity: 1 }
 });
-const spinnerRecipe = style([
+const spinnerRecipe = gnistStyle([
   atoms({ borderWidth: "medium" }),
   {
     position: "absolute",

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

@@ -2,10 +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 recipes = require("@vanilla-extract/recipes");
-const accordionRecipe = recipes.recipe({
+const accordionRecipe = layers_css_js.gnistRecipe({
   base: [
     atoms_css_js.atoms({
       color: "on-background"
@@ -25,7 +25,7 @@ const accordionRecipe = recipes.recipe({
     }
   }
 });
-const head = css.style([
+const head = layers_css_js.gnistStyle([
   atoms_css_js.atoms({
     display: "flex",
     justifyContent: "space-between",
@@ -43,13 +43,13 @@ const head = css.style([
     }
   }
 ]);
-const heading = css.style([
+const heading = layers_css_js.gnistStyle([
   atoms_css_js.atoms({ typography: "heading3-small" }),
   {
     fontSize: tokens_css_js.tokens.type.medium.body.fontSize
   }
 ]);
-const headBackground = css.style({
+const headBackground = layers_css_js.gnistStyle({
   position: "absolute",
   width: "100%",
   height: "100%",
@@ -61,7 +61,7 @@ const headBackground = css.style({
     }
   }
 });
-const body = css.style({
+const body = layers_css_js.gnistStyle({
   padding: `${tokens_css_js.tokens.spacing.xxs} ${tokens_css_js.tokens.spacing.xxs} ${tokens_css_js.tokens.spacing.s}`
 });
 css.globalStyle("summary::-webkit-details-marker", {

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

@@ -1,9 +1,9 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
+import { gnistRecipe, gnistStyle } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-import { style, globalStyle } from "@vanilla-extract/css";
-import { recipe } from "@vanilla-extract/recipes";
-const accordionRecipe = recipe({
+import { globalStyle } from "@vanilla-extract/css";
+const accordionRecipe = gnistRecipe({
   base: [
     atoms({
       color: "on-background"
@@ -23,7 +23,7 @@ const accordionRecipe = recipe({
     }
   }
 });
-const head = style([
+const head = gnistStyle([
   atoms({
     display: "flex",
     justifyContent: "space-between",
@@ -41,13 +41,13 @@ const head = style([
     }
   }
 ]);
-const heading = style([
+const heading = gnistStyle([
   atoms({ typography: "heading3-small" }),
   {
     fontSize: tokens.type.medium.body.fontSize
   }
 ]);
-const headBackground = style({
+const headBackground = gnistStyle({
   position: "absolute",
   width: "100%",
   height: "100%",
@@ -59,7 +59,7 @@ const headBackground = style({
     }
   }
 });
-const body = style({
+const body = gnistStyle({
   padding: `${tokens.spacing.xxs} ${tokens.spacing.xxs} ${tokens.spacing.s}`
 });
 globalStyle("summary::-webkit-details-marker", {

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

@@ -5,11 +5,10 @@ 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 colors_css_js = require("@gnist/themes/colors.css.js");
+const layers_css_js = require("@gnist/themes/layers.css.js");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
 const typography_css_js = require("@gnist/themes/typography.css.js");
-const css = require("@vanilla-extract/css");
-const recipes = require("@vanilla-extract/recipes");
-const cardsBase = css.style([
+const cardsBase = layers_css_js.gnistStyle([
   atoms_css_js.atoms({
     display: "block",
     boxShadow: "low",
@@ -22,7 +21,7 @@ const cardsBase = css.style([
     textDecoration: "none"
   }
 ]);
-const actionLayers = css.style([
+const actionLayers = layers_css_js.gnistStyle([
   animations_css.clickAnimation,
   states_css.focusStyle,
   states_css.stateLayers({
@@ -32,7 +31,7 @@ const actionLayers = css.style([
     setFocusState: true
   })
 ]);
-const cardsRecipe = recipes.recipe({
+const cardsRecipe = 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

@@ -3,11 +3,10 @@ import { clickAnimation } from "../../../styles/animations.css.js";
 import { focusStyle, stateLayers } from "../../../styles/states.css.js";
 import { atoms } from "@gnist/themes/atoms.css.js";
 import { boxColors } from "@gnist/themes/colors.css.js";
+import { gnistStyle, gnistRecipe } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
 import { responsiveTypography } from "@gnist/themes/typography.css.js";
-import { style } from "@vanilla-extract/css";
-import { recipe } from "@vanilla-extract/recipes";
-const cardsBase = style([
+const cardsBase = gnistStyle([
   atoms({
     display: "block",
     boxShadow: "low",
@@ -20,7 +19,7 @@ const cardsBase = style([
     textDecoration: "none"
   }
 ]);
-const actionLayers = style([
+const actionLayers = gnistStyle([
   clickAnimation,
   focusStyle,
   stateLayers({
@@ -30,7 +29,7 @@ const actionLayers = style([
     setFocusState: true
   })
 ]);
-const cardsRecipe = recipe({
+const cardsRecipe = gnistRecipe({
   base: [cardsBase],
   variants: {
     density: {

package/dist/components/surfaces/cards/checkboxCard.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 StyledCardRecipe = recipes.recipe({
+const StyledCardRecipe = layers_css_js.gnistRecipe({
   base: [
     atoms_css_js.atoms({
       display: "flex",

package/dist/components/surfaces/cards/checkboxCard.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 StyledCardRecipe = recipe({
+const StyledCardRecipe = gnistRecipe({
   base: [
     atoms({
       display: "flex",

package/dist/components/surfaces/cards/internal/SelectionCard.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 cardDescription = recipes.recipe({
+const layers_css_js = require("@gnist/themes/layers.css.js");
+const cardDescription = layers_css_js.gnistRecipe({
   base: [atoms_css_js.atoms({ display: "block" })],
   variants: {
     density: {
@@ -21,7 +21,7 @@ const cardDescription = recipes.recipe({
   },
   defaultVariants: { density: "default" }
 });
-const SelectionControlSkeletonRecipe = recipes.recipe({
+const SelectionControlSkeletonRecipe = layers_css_js.gnistRecipe({
   base: [
     atoms_css_js.atoms({
       height: "s",

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

@@ -1,7 +1,7 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { recipe } from "@vanilla-extract/recipes";
-const cardDescription = recipe({
+import { gnistRecipe } from "@gnist/themes/layers.css.js";
+const cardDescription = gnistRecipe({
   base: [atoms({ display: "block" })],
   variants: {
     density: {
@@ -19,7 +19,7 @@ const cardDescription = recipe({
   },
   defaultVariants: { density: "default" }
 });
-const SelectionControlSkeletonRecipe = recipe({
+const SelectionControlSkeletonRecipe = gnistRecipe({
   base: [
     atoms({
       height: "s",

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

@@ -2,11 +2,11 @@
 "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 backdropStyle = css.style({
+const backdropStyle = layers_css_js.gnistStyle({
   zIndex: -1,
   position: "fixed",
   right: 0,
@@ -16,7 +16,7 @@ const backdropStyle = css.style({
   backgroundColor: "rgba(0, 0, 0, 0.5)",
   WebkitTapHighlightColor: "transparent"
 });
-const modalStyle = css.style({
+const modalStyle = layers_css_js.gnistStyle({
   position: "fixed",
   zIndex: 1300,
   right: 0,
@@ -36,7 +36,7 @@ const modalStyle = css.style({
   margin: 0,
   padding: 0
 });
-const modalHeadingStyle = css.style({
+const modalHeadingStyle = layers_css_js.gnistStyle({
   fontWeight: tokens_css_js.tokens.typeface.weight.semibold
 });
 const dialogPadding = (size) => {
@@ -51,7 +51,7 @@ const dialogPadding = (size) => {
       return tokens_css_js.tokens.spacing.m;
   }
 };
-const dialogRecipe = recipes.recipe({
+const dialogRecipe = layers_css_js.gnistRecipe({
   base: [
     atoms_css_js.atoms({
       color: "on-surface",
@@ -104,12 +104,12 @@ const dialogRecipe = recipes.recipe({
     size: "medium"
   }
 });
-const headerRowPaddingBySize = (size) => css.style({
+const headerRowPaddingBySize = (size) => layers_css_js.gnistStyle({
   paddingTop: dialogPadding(size),
   paddingRight: dialogPadding(size),
   paddingLeft: dialogPadding(size)
 });
-const headerRowRecipe = recipes.recipe({
+const headerRowRecipe = layers_css_js.gnistRecipe({
   base: [
     {
       position: "sticky",
@@ -144,7 +144,7 @@ const headerRowRecipe = recipes.recipe({
     }
   ]
 });
-const contentContainerRecipe = recipes.recipe({
+const contentContainerRecipe = layers_css_js.gnistRecipe({
   base: [
     atoms_css_js.atoms({
       display: "flex",
@@ -210,12 +210,12 @@ const contentContainerRecipe = recipes.recipe({
     }
   ]
 });
-const actionRowPaddingBySize = (size) => css.style({
+const actionRowPaddingBySize = (size) => layers_css_js.gnistStyle({
   paddingTop: cssUtils.calc(dialogPadding(size)).add(tokens_css_js.tokens.spacing.xxs).toString(),
   paddingRight: dialogPadding(size),
   paddingLeft: dialogPadding(size)
 });
-const actionRowRecipe = recipes.recipe({
+const actionRowRecipe = layers_css_js.gnistRecipe({
   base: [
     atoms_css_js.atoms({
       display: "flex",

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

@@ -1,10 +1,10 @@
 "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, globalStyle } from "@vanilla-extract/css";
+import { globalStyle } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
-import { recipe } from "@vanilla-extract/recipes";
-const backdropStyle = style({
+const backdropStyle = gnistStyle({
   zIndex: -1,
   position: "fixed",
   right: 0,
@@ -14,7 +14,7 @@ const backdropStyle = style({
   backgroundColor: "rgba(0, 0, 0, 0.5)",
   WebkitTapHighlightColor: "transparent"
 });
-const modalStyle = style({
+const modalStyle = gnistStyle({
   position: "fixed",
   zIndex: 1300,
   right: 0,
@@ -34,7 +34,7 @@ const modalStyle = style({
   margin: 0,
   padding: 0
 });
-const modalHeadingStyle = style({
+const modalHeadingStyle = gnistStyle({
   fontWeight: tokens.typeface.weight.semibold
 });
 const dialogPadding = (size) => {
@@ -49,7 +49,7 @@ const dialogPadding = (size) => {
       return tokens.spacing.m;
   }
 };
-const dialogRecipe = recipe({
+const dialogRecipe = gnistRecipe({
   base: [
     atoms({
       color: "on-surface",
@@ -102,12 +102,12 @@ const dialogRecipe = recipe({
     size: "medium"
   }
 });
-const headerRowPaddingBySize = (size) => style({
+const headerRowPaddingBySize = (size) => gnistStyle({
   paddingTop: dialogPadding(size),
   paddingRight: dialogPadding(size),
   paddingLeft: dialogPadding(size)
 });
-const headerRowRecipe = recipe({
+const headerRowRecipe = gnistRecipe({
   base: [
     {
       position: "sticky",
@@ -142,7 +142,7 @@ const headerRowRecipe = recipe({
     }
   ]
 });
-const contentContainerRecipe = recipe({
+const contentContainerRecipe = gnistRecipe({
   base: [
     atoms({
       display: "flex",
@@ -208,12 +208,12 @@ const contentContainerRecipe = recipe({
     }
   ]
 });
-const actionRowPaddingBySize = (size) => style({
+const actionRowPaddingBySize = (size) => gnistStyle({
   paddingTop: calc(dialogPadding(size)).add(tokens.spacing.xxs).toString(),
   paddingRight: dialogPadding(size),
   paddingLeft: dialogPadding(size)
 });
-const actionRowRecipe = recipe({
+const actionRowRecipe = gnistRecipe({
   base: [
     atoms({
       display: "flex",

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

@@ -2,14 +2,15 @@
 "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 css = require("@vanilla-extract/css");
 const svgHeight = css.createVar();
 const svgWidth = css.createVar();
-const iconContainer = css.style([
+const iconContainer = layers_css_js.gnistStyle([
   { display: "inline-flex" },
   atoms_css_js.atoms({ justifyContent: "center", alignItems: "center" })
 ]);
-const svg = css.style({
+const svg = 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,13 +1,14 @@
 "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";
 const svgHeight = createVar();
 const svgWidth = createVar();
-const iconContainer = style([
+const iconContainer = gnistStyle([
   { display: "inline-flex" },
   atoms({ justifyContent: "center", alignItems: "center" })
 ]);
-const svg = style({
+const svg = gnistStyle({
   overflow: "visible",
   height: svgHeight,
   width: svgWidth,

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

@@ -1,19 +1,20 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const layers_css_js = require("@gnist/themes/layers.css.js");
 const brandlessTokens_js = require("@gnist/themes/themes/brandlessTokens.js");
 const css = require("@vanilla-extract/css");
-const base = css.style({
+const base = layers_css_js.gnistStyle({
   display: "inline-flex",
   justifyContent: "center",
   alignItems: "center"
 });
-const svg = css.style({
+const svg = layers_css_js.gnistStyle({
   overflow: "visible"
 });
 const sizes = Object.keys(brandlessTokens_js.brandlessTokens.size);
-const styles = (style2) => sizes.reduce((acc, x) => {
-  acc[x] = [style2, { height: brandlessTokens_js.brandlessTokens.size[x] }];
+const styles = (style) => sizes.reduce((acc, x) => {
+  acc[x] = [style, { height: brandlessTokens_js.brandlessTokens.size[x] }];
   return acc;
 }, {});
 const logoVariant = css.styleVariants(styles(base));

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,17 +1,18 @@
 "use client";
+import { gnistStyle } from "@gnist/themes/layers.css.js";
 import { brandlessTokens } from "@gnist/themes/themes/brandlessTokens.js";
-import { style, styleVariants } from "@vanilla-extract/css";
-const base = style({
+import { styleVariants } from "@vanilla-extract/css";
+const base = gnistStyle({
   display: "inline-flex",
   justifyContent: "center",
   alignItems: "center"
 });
-const svg = style({
+const svg = gnistStyle({
   overflow: "visible"
 });
 const sizes = Object.keys(brandlessTokens.size);
-const styles = (style2) => sizes.reduce((acc, x) => {
-  acc[x] = [style2, { height: brandlessTokens.size[x] }];
+const styles = (style) => sizes.reduce((acc, x) => {
+  acc[x] = [style, { height: brandlessTokens.size[x] }];
   return acc;
 }, {});
 const logoVariant = styleVariants(styles(base));

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

@@ -1,15 +1,15 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const layers_css_js = require("@gnist/themes/layers.css.js");
 const typography_css_js = require("@gnist/themes/typography.css.js");
-const css = require("@vanilla-extract/css");
 const displayText = typography_css_js.responsiveTypography["display"];
 const heading1Text = typography_css_js.responsiveTypography["heading1"];
 const heading2Text = typography_css_js.responsiveTypography["heading2"];
 const heading3Text = typography_css_js.responsiveTypography["heading3"];
 const leadText = typography_css_js.responsiveTypography["lead"];
 const bodyText = typography_css_js.responsiveTypography["body"];
-const linkText = css.style([
+const linkText = layers_css_js.gnistStyle([
   {
     selectors: {
       "&, &:visited, &:hover, &:active": {

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

@@ -1,13 +1,13 @@
 "use client";
+import { gnistStyle } from "@gnist/themes/layers.css.js";
 import { responsiveTypography } from "@gnist/themes/typography.css.js";
-import { style } from "@vanilla-extract/css";
 const displayText = responsiveTypography["display"];
 const heading1Text = responsiveTypography["heading1"];
 const heading2Text = responsiveTypography["heading2"];
 const heading3Text = responsiveTypography["heading3"];
 const leadText = responsiveTypography["lead"];
 const bodyText = responsiveTypography["body"];
-const linkText = style([
+const linkText = gnistStyle([
   {
     selectors: {
       "&, &:visited, &:hover, &:active": {

package/dist/styles/animations.css.cjs

@@ -1,8 +1,8 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const css = require("@vanilla-extract/css");
-const clickAnimation = css.style({
+const layers_css_js = require("@gnist/themes/layers.css.js");
+const clickAnimation = layers_css_js.gnistStyle({
   transition: "transform ease-in 0.1s",
   selectors: {
     "&:active:not(:disabled)": {