@blockle/blocks-theme-momotaro 7.1.0 → 7.3.0

package/dist/components/textInput.css.js

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
+import { makeComponentTheme, vars, layers } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 import { focusable } from "./helpers.css.js";
 setFileScope("src/components/textInput.css.ts", "@blockle/blocks-theme-momotaro");
@@ -8,39 +8,41 @@ const textInput = makeComponentTheme(
   {
     root: style([
       {
-        minHeight: 40,
-        backgroundColor: vars.colorRole.surface.raised,
-        "@media": {
-          "(prefers-reduced-motion: no-preference)": {
-            transition: `box-shadow ${vars.transition.fast}`
+        "@layer": {
+          [layers.theme]: {
+            minHeight: 40,
+            backgroundColor: vars.colorRole.surface.raised,
+            display: "flex",
+            paddingInline: vars.space[3],
+            paddingBlock: vars.space[2],
+            borderRadius: vars.borderRadius[2],
+            boxShadow: vars.colorRole.shadow[2],
+            // Space between `startSlot | children | endSlot`
+            gap: vars.space[2],
+            "@media": {
+              "(prefers-reduced-motion: no-preference)": {
+                transition: `box-shadow ${vars.transition.fast}`
+              }
+            }
           }
         }
       },
-      atoms({
-        display: "flex",
-        paddingInline: 3,
-        paddingBlock: 2,
-        borderRadius: 2,
-        boxShadow: 2,
-        // Space between `startSlot | children | endSlot`
-        gap: 2
-      }),
       focusable
     ]),
-    input: style([
-      atoms({
-        border: "none",
-        backgroundColor: "transparent"
-      }),
-      {
-        outline: "none",
-        color: vars.colorRole.text.default,
-        "::placeholder": {
-          color: vars.colorRole.text.muted
-        },
-        ":disabled": {}
+    input: style({
+      "@layer": {
+        [layers.theme]: {
+          border: "none",
+          backgroundColor: "transparent",
+          outline: "none",
+          color: vars.colorRole.text.default,
+          "::placeholder": {
+            color: vars.colorRole.text.muted
+          },
+          ":disabled": {}
+        }
       }
-    ])
+    })
   }
 );
 endFileScope();

package/dist/components/textarea.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.css.d.ts","sourceRoot":"","sources":["../../src/components/textarea.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAK9B,eAAO,MAAM,QAAQ,EAAE,qBAAqB,CAAC,UAAU,CAuCtD,CAAC"}
+{"version":3,"file":"textarea.css.d.ts","sourceRoot":"","sources":["../../src/components/textarea.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAK9B,eAAO,MAAM,QAAQ,EAAE,qBAAqB,CAAC,UAAU,CAyCtD,CAAC"}

package/dist/components/textarea.css.js

@@ -1,44 +1,46 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
+import { makeComponentTheme, vars, layers } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 import { focusable } from "./helpers.css.js";
 setFileScope("src/components/textarea.css.ts", "@blockle/blocks-theme-momotaro");
 const textarea = makeComponentTheme(
   "textarea",
   {
-    input: style([
-      atoms({
-        paddingInline: 3,
-        border: "none",
-        backgroundColor: "transparent"
-      }),
-      {
-        borderRadius: "inherit",
-        outline: "none",
-        color: vars.colorRole.text.default,
-        "::placeholder": {
-          color: vars.colorRole.text.muted
-        },
-        ":disabled": {}
+    input: style({
+      "@layer": {
+        [layers.theme]: {
+          paddingInline: vars.space[3],
+          border: "none",
+          backgroundColor: "transparent",
+          borderRadius: "inherit",
+          outline: "none",
+          color: vars.colorRole.text.default,
+          "::placeholder": {
+            color: vars.colorRole.text.muted
+          },
+          ":disabled": {}
+        }
       }
-    ]),
+    }),
     root: style([
       {
-        overflow: "auto",
-        minHeight: 96,
-        maxHeight: 240,
-        backgroundColor: vars.colorRole.surface.raised,
-        "@media": {
-          "(prefers-reduced-motion: no-preference)": {
-            transition: `box-shadow ${vars.transition.fast}`
+        "@layer": {
+          [layers.theme]: {
+            overflow: "auto",
+            minHeight: 96,
+            maxHeight: 240,
+            backgroundColor: vars.colorRole.surface.raised,
+            paddingBlock: vars.space[2],
+            borderRadius: vars.borderRadius[2],
+            boxShadow: vars.colorRole.shadow[2],
+            "@media": {
+              "(prefers-reduced-motion: no-preference)": {
+                transition: `box-shadow ${vars.transition.fast}`
+              }
+            }
           }
         }
       },
-      atoms({
-        paddingBlock: 2,
-        borderRadius: 2,
-        boxShadow: 2
-      }),
       focusable
     ])
   }

package/dist/components/toast.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.css.d.ts","sourceRoot":"","sources":["../../src/components/toast.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sBAAsB,CAAC;AAuB9B,eAAO,MAAM,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAqChD,CAAC"}
+{"version":3,"file":"toast.css.d.ts","sourceRoot":"","sources":["../../src/components/toast.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AA+B9B,eAAO,MAAM,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAqChD,CAAC"}

package/dist/components/toast.css.js

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, atoms } from "@blockle/blocks-core";
+import { makeComponentTheme, vars, layers } from "@blockle/blocks-core";
 import { style, keyframes, createVar } from "@vanilla-extract/css";
 setFileScope("src/components/toast.css.ts", "@blockle/blocks-theme-momotaro");
 const enterTranslate = createVar();
@@ -8,41 +8,49 @@ const toastEnter = keyframes({
   to: { opacity: 1, scale: 1, translate: "0 0" }
 });
 const top = style({
-  vars: {
-    [enterTranslate]: "0 -20%"
+  "@layer": {
+    [layers.theme]: {
+      vars: {
+        [enterTranslate]: "0 -20%"
+      }
+    }
   }
 });
 const bottom = style({
-  vars: {
-    [enterTranslate]: "0 20%"
+  "@layer": {
+    [layers.theme]: {
+      vars: {
+        [enterTranslate]: "0 20%"
+      }
+    }
   }
 });
 const toast = makeComponentTheme(
   "toast",
   {
-    root: style([
-      atoms({
-        gap: 2,
-        padding: 2
-      }),
-      {
-        maxWidth: "min(100%, 400px)"
+    root: style({
+      "@layer": {
+        [layers.theme]: {
+          gap: vars.space[2],
+          padding: vars.space[2],
+          maxWidth: "min(100%, 400px)"
+        }
       }
-    ]),
-    toast: style([
-      atoms({
-        boxShadow: 3
-      }),
-      {
-        "@media": {
-          "(prefers-reduced-motion: no-preference)": {
-            animationName: toastEnter,
-            animationDuration: "240ms",
-            animationTimingFunction: "ease-out"
+    }),
+    toast: style({
+      "@layer": {
+        [layers.theme]: {
+          boxShadow: vars.colorRole.shadow[3],
+          "@media": {
+            "(prefers-reduced-motion: no-preference)": {
+              animationName: toastEnter,
+              animationDuration: "240ms",
+              animationTimingFunction: "ease-out"
+            }
           }
         }
       }
-    ]),
+    }),
     variants: {
       placement: {
         top,

package/dist/components/tooltip.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.css.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAK9B,eAAO,MAAM,OAAO,EAAE,qBAAqB,CAAC,SAAS,CA0BpD,CAAC"}
+{"version":3,"file":"tooltip.css.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAK9B,eAAO,MAAM,OAAO,EAAE,qBAAqB,CAAC,SAAS,CAiCpD,CAAC"}

package/dist/components/tooltip.css.js

@@ -1,27 +1,34 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
+import { makeComponentTheme, vars, layers } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/tooltip.css.ts", "@blockle/blocks-theme-momotaro");
 const { surface, text } = vars.colorRole;
 const tooltip = makeComponentTheme(
   "tooltip",
   {
-    root: atoms({
-      padding: 1
-    }),
+    // No styles of its own: it sits on the popover surface, which sets the padding
+    root: "",
     variants: {
       intent: {
         // Inverse of the page: dark on light, light on dark
         primary: style({
-          backgroundColor: `color-mix(in srgb, ${surface.inverse} 80%, transparent)`,
-          boxShadow: `0 0 0 1px color-mix(in srgb, ${text.inverse} 10%, transparent)`,
-          color: text.inverse
+          "@layer": {
+            [layers.theme]: {
+              backgroundColor: `color-mix(in srgb, ${surface.inverse} 80%, transparent)`,
+              boxShadow: `0 0 0 1px color-mix(in srgb, ${text.inverse} 10%, transparent)`,
+              color: text.inverse
+            }
+          }
         }),
         // Same as the page
         secondary: style({
-          backgroundColor: `color-mix(in srgb, ${surface.default} 80%, transparent)`,
-          boxShadow: `0 0 0 1px color-mix(in srgb, ${text.default} 10%, transparent)`,
-          color: text.default
+          "@layer": {
+            [layers.theme]: {
+              backgroundColor: `color-mix(in srgb, ${surface.default} 80%, transparent)`,
+              boxShadow: `0 0 0 1px color-mix(in srgb, ${text.default} 10%, transparent)`,
+              color: text.default
+            }
+          }
         })
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks-theme-momotaro",
-  "version": "7.1.0",
+  "version": "7.3.0",
   "description": "Momotaro theme for Blocks",
   "type": "module",
   "sideEffects": false,
@@ -34,7 +34,7 @@
     "@vanilla-extract/css": "^1.18.0"
   },
   "peerDependencies": {
-    "@blockle/blocks-core": ">=3.1.x",
+    "@blockle/blocks-core": ">=3.3.x",
     "@vanilla-extract/css": "^1.18.0"
   },
   "publishConfig": {