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

package/dist/styles/animations.css.js

@@ -1,6 +1,6 @@
 "use client";
-import { style } from "@vanilla-extract/css";
-const clickAnimation = style({
+import { gnistStyle } from "@gnist/themes/layers.css.js";
+const clickAnimation = gnistStyle({
   transition: "transform ease-in 0.1s",
   selectors: {
     "&:active:not(:disabled)": {

package/dist/styles/states.css.cjs

@@ -1,13 +1,12 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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 Record = require("fp-ts/Record");
 const _function = require("fp-ts/function");
-const focusStyle = css.style({
+const focusStyle = layers_css_js.gnistStyle({
   selectors: {
     "&:focus:not(:focus-visible)": {
       outline: "none"
@@ -37,8 +36,8 @@ const afterHover = "&:not(:disabled):hover::after";
 const afterFocus = "&:not(:disabled):focus::after";
 const afterActive = "&:not(:disabled):active::after";
 const afterAllStates = [afterHover, afterFocus, afterActive].join(", ");
-const stateLayersInternal = recipes.recipe({
-  base: css.style({
+const stateLayersInternal = layers_css_js.gnistRecipe({
+  base: layers_css_js.gnistStyle({
     "::after": {
       opacity: 0
     },

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,11 +1,10 @@
 "use client";
+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";
 import { mapWithIndex, map } from "fp-ts/Record";
 import { pipe } from "fp-ts/function";
-const focusStyle = style({
+const focusStyle = gnistStyle({
   selectors: {
     "&:focus:not(:focus-visible)": {
       outline: "none"
@@ -35,8 +34,8 @@ const afterHover = "&:not(:disabled):hover::after";
 const afterFocus = "&:not(:disabled):focus::after";
 const afterActive = "&:not(:disabled):active::after";
 const afterAllStates = [afterHover, afterFocus, afterActive].join(", ");
-const stateLayersInternal = recipe({
-  base: style({
+const stateLayersInternal = gnistRecipe({
+  base: gnistStyle({
     "::after": {
       opacity: 0
     },

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

@@ -1,8 +1,8 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const css = require("@vanilla-extract/css");
-const visuallyHidden = css.style({
+const layers_css_js = require("@gnist/themes/layers.css.js");
+const visuallyHidden = 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,6 +1,6 @@
 "use client";
-import { style } from "@vanilla-extract/css";
-const visuallyHidden = style({
+import { gnistStyle } from "@gnist/themes/layers.css.js";
+const visuallyHidden = gnistStyle({
   border: "0 !important",
   clip: "rect(1px, 1px, 1px, 1px) !important",
   WebkitClipPath: "inset(50%) !important",

package/dist/utilities/layout/styles.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 recipes = require("@vanilla-extract/recipes");
 const spacing = tokens_css_js.tokens.spacing;
-const rowRecipe = recipes.recipe({
+const rowRecipe = layers_css_js.gnistRecipe({
   base: [
     atoms_css_js.atoms({
       display: "flex",
@@ -53,7 +53,7 @@ const rowRecipe = recipes.recipe({
     }
   }
 });
-const columnRecipe = recipes.recipe({
+const columnRecipe = layers_css_js.gnistRecipe({
   base: [
     atoms_css_js.atoms({
       display: "flex",

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

@@ -1,9 +1,9 @@
 "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 spacing = tokens.spacing;
-const rowRecipe = recipe({
+const rowRecipe = gnistRecipe({
   base: [
     atoms({
       display: "flex",
@@ -51,7 +51,7 @@ const rowRecipe = recipe({
     }
   }
 });
-const columnRecipe = recipe({
+const columnRecipe = gnistRecipe({
   base: [
     atoms({
       display: "flex",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gnist/design-system",
-    "version": "6.0.0-alpha.0",
+    "version": "6.0.0-alpha.3",
     "license": "UNLICENSED",
     "type": "module",
     "main": "dist/index.cjs",
@@ -51,7 +51,7 @@
         "@base-ui/react": "1.0.0",
         "@formkit/auto-animate": "^0.8.2",
         "@gnist/component-utils": "3.0.14",
-        "@gnist/themes": "^3.29.0",
+        "@gnist/themes": "^3.30.0-alpha.2",
         "@material-symbols/svg-400": "^0.42.3",
         "@vanilla-extract/css": "^1.17.4",
         "@vanilla-extract/css-utils": "^0.1.6",
@@ -104,5 +104,5 @@
             "optional": true
         }
     },
-    "gitHead": "3a03c930300536f817da14d46aaa319f7a98dd3d"
+    "gitHead": "a7a72c810de3a341dee37cad940f4a6e7bfb66be"
 }