@blockle/blocks-theme-momotaro 7.2.0 → 7.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"alert.css.d.ts","sourceRoot":"","sources":["../../src/components/alert.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAY9B,eAAO,MAAM,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAkBhD,CAAC"}
+{"version":3,"file":"alert.css.d.ts","sourceRoot":"","sources":["../../src/components/alert.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAgB9B,eAAO,MAAM,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAsBhD,CAAC"}

package/dist/components/alert.css.js

@@ -1,20 +1,28 @@
 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/alert.css.ts", "@blockle/blocks-theme-momotaro");
 const intentStyle = (roles) => style({
-  backgroundColor: roles.subtle,
-  color: roles.foreground,
-  borderColor: roles.border
+  "@layer": {
+    [layers.theme]: {
+      backgroundColor: roles.subtle,
+      color: roles.foreground,
+      borderColor: roles.border
+    }
+  }
 });
 const alert = makeComponentTheme(
   "alert",
   {
-    root: atoms({
-      borderWidth: "thin",
-      borderStyle: "solid",
-      padding: 2,
-      borderRadius: 2
+    root: style({
+      "@layer": {
+        [layers.theme]: {
+          borderWidth: vars.borderWidth.thin,
+          borderStyle: "solid",
+          padding: vars.space[2],
+          borderRadius: vars.borderRadius[2]
+        }
+      }
     }),
     variants: {
       intent: {

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

@@ -1 +1 @@
-{"version":3,"file":"button.css.d.ts","sourceRoot":"","sources":["../../src/components/button.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sBAAsB,CAAC;AAW9B,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAiDlD,CAAC"}
+{"version":3,"file":"button.css.d.ts","sourceRoot":"","sources":["../../src/components/button.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAqB9B,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAgClD,CAAC"}

package/dist/components/button.css.js

@@ -1,48 +1,39 @@
 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 } from "@vanilla-extract/css";
-import { buttonIntent, buttonVariant, buttonHeight, buttonBase, buttonRadius } from "./buttonBase.css.js";
+import { buttonIntent, buttonVariant, buttonBase, buttonRadius, buttonHeight } from "./buttonBase.css.js";
 setFileScope("src/components/button.css.ts", "@blockle/blocks-theme-momotaro");
+const sizeStyle = (paddingInline, minHeight) => style({
+  "@layer": {
+    [layers.theme]: {
+      paddingInline,
+      minHeight
+    }
+  }
+});
 const button = makeComponentTheme(
   "button",
   {
     root: style([
-      atoms({
-        fontSize: "medium",
-        fontWeight: "medium",
-        gap: 2,
-        paddingBlock: 1
-      }),
+      {
+        "@layer": {
+          [layers.theme]: {
+            fontSize: vars.fontSize.medium,
+            fontWeight: vars.fontWeight.medium,
+            gap: vars.space[2],
+            paddingBlock: vars.space[1]
+          }
+        }
+      },
       buttonBase,
       buttonRadius
     ]),
     variants: {
       variant: buttonVariant,
       size: {
-        small: style([
-          atoms({
-            paddingInline: 3
-          }),
-          {
-            minHeight: buttonHeight.small
-          }
-        ]),
-        medium: style([
-          atoms({
-            paddingInline: 4
-          }),
-          {
-            minHeight: buttonHeight.medium
-          }
-        ]),
-        large: style([
-          atoms({
-            paddingInline: 5
-          }),
-          {
-            minHeight: buttonHeight.large
-          }
-        ])
+        small: sizeStyle(vars.space[3], buttonHeight.small),
+        medium: sizeStyle(vars.space[4], buttonHeight.medium),
+        large: sizeStyle(vars.space[5], buttonHeight.large)
       },
       intent: buttonIntent
     },

package/dist/components/buttonBase.css.d.ts

@@ -4,7 +4,7 @@ export declare const buttonHeight: {
     readonly large: 56;
 };
 export declare const buttonBase: string;
-export declare const buttonRadius: any;
+export declare const buttonRadius: string;
 export declare const buttonVariant: {
     solid: string;
     outline: string;

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

@@ -1 +1 @@
-{"version":3,"file":"buttonBase.css.d.ts","sourceRoot":"","sources":["../../src/components/buttonBase.css.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,eAAO,MAAM,UAAU,QAMrB,CAAC;AAEH,eAAO,MAAM,YAAY,KAEvB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;CAoCzB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;CAgDxB,CAAC"}
+{"version":3,"file":"buttonBase.css.d.ts","sourceRoot":"","sources":["../../src/components/buttonBase.css.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,eAAO,MAAM,UAAU,QAUrB,CAAC;AAEH,eAAO,MAAM,YAAY,QAMvB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;CA4CzB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;CAwExB,CAAC"}

package/dist/components/buttonBase.css.js

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { vars, atoms } from "@blockle/blocks-core";
+import { layers, vars } from "@blockle/blocks-core";
 import { style, createVar } from "@vanilla-extract/css";
 import { clickable } from "./helpers.css.js";
 setFileScope("src/components/buttonBase.css.ts", "@blockle/blocks-theme-momotaro");
@@ -13,98 +13,138 @@ const buttonHeight = {
   large: 56
 };
 const buttonBase = style([
-  atoms({
-    display: "inline-flex",
-    placeItems: "center"
-  }),
+  {
+    "@layer": {
+      [layers.theme]: {
+        display: "inline-flex",
+        placeItems: "center"
+      }
+    }
+  },
   clickable
 ]);
-const buttonRadius = atoms({
-  borderRadius: 2
+const buttonRadius = style({
+  "@layer": {
+    [layers.theme]: {
+      borderRadius: vars.borderRadius[2]
+    }
+  }
 });
 const buttonVariant = {
   solid: style({
-    color: contrastColor,
-    backgroundColor: solidColor,
-    border: "none",
-    selectors: {
-      "&:hover:not(:disabled)": {
-        backgroundColor: solidHoverColor
+    "@layer": {
+      [layers.theme]: {
+        color: contrastColor,
+        backgroundColor: solidColor,
+        border: "none",
+        selectors: {
+          "&:hover:not(:disabled)": {
+            backgroundColor: solidHoverColor
+          }
+        }
       }
     }
   }),
-  outline: style([
-    atoms({
-      borderWidth: "thin"
-    }),
-    {
-      color: solidColor,
-      borderStyle: "solid",
-      borderColor: solidColor,
-      background: "transparent",
-      selectors: {
-        "&:hover:not(:disabled)": {
-          backgroundColor: subtleColor
+  outline: style({
+    "@layer": {
+      [layers.theme]: {
+        borderWidth: vars.borderWidth.thin,
+        color: solidColor,
+        borderStyle: "solid",
+        borderColor: solidColor,
+        background: "transparent",
+        selectors: {
+          "&:hover:not(:disabled)": {
+            backgroundColor: subtleColor
+          }
         }
       }
     }
-  ]),
+  }),
   ghost: style({
-    color: solidColor,
-    background: "transparent",
-    selectors: {
-      "&:hover:not(:disabled)": {
-        backgroundColor: subtleColor
+    "@layer": {
+      [layers.theme]: {
+        color: solidColor,
+        background: "transparent",
+        selectors: {
+          "&:hover:not(:disabled)": {
+            backgroundColor: subtleColor
+          }
+        }
       }
     }
   })
 };
 const buttonIntent = {
   neutral: style({
-    vars: {
-      [solidColor]: vars.colorRole.neutral.solid,
-      [solidHoverColor]: vars.colorRole.neutral.solidHover,
-      [subtleColor]: vars.colorRole.neutral.subtle,
-      [contrastColor]: vars.colorRole.neutral.contrast
+    "@layer": {
+      [layers.theme]: {
+        vars: {
+          [solidColor]: vars.colorRole.neutral.solid,
+          [solidHoverColor]: vars.colorRole.neutral.solidHover,
+          [subtleColor]: vars.colorRole.neutral.subtle,
+          [contrastColor]: vars.colorRole.neutral.contrast
+        }
+      }
     }
   }),
   primary: style({
-    vars: {
-      [solidColor]: vars.colorRole.primary.solid,
-      [solidHoverColor]: vars.colorRole.primary.solidHover,
-      [subtleColor]: vars.colorRole.primary.subtle,
-      [contrastColor]: vars.colorRole.primary.contrast
+    "@layer": {
+      [layers.theme]: {
+        vars: {
+          [solidColor]: vars.colorRole.primary.solid,
+          [solidHoverColor]: vars.colorRole.primary.solidHover,
+          [subtleColor]: vars.colorRole.primary.subtle,
+          [contrastColor]: vars.colorRole.primary.contrast
+        }
+      }
     }
   }),
   secondary: style({
-    vars: {
-      [solidColor]: vars.colorRole.secondary.solid,
-      [solidHoverColor]: vars.colorRole.secondary.solidHover,
-      [subtleColor]: vars.colorRole.secondary.subtle,
-      [contrastColor]: vars.colorRole.secondary.contrast
+    "@layer": {
+      [layers.theme]: {
+        vars: {
+          [solidColor]: vars.colorRole.secondary.solid,
+          [solidHoverColor]: vars.colorRole.secondary.solidHover,
+          [subtleColor]: vars.colorRole.secondary.subtle,
+          [contrastColor]: vars.colorRole.secondary.contrast
+        }
+      }
     }
   }),
   success: style({
-    vars: {
-      [solidColor]: vars.colorRole.success.solid,
-      [solidHoverColor]: vars.colorRole.success.solidHover,
-      [subtleColor]: vars.colorRole.success.subtle,
-      [contrastColor]: vars.colorRole.success.contrast
+    "@layer": {
+      [layers.theme]: {
+        vars: {
+          [solidColor]: vars.colorRole.success.solid,
+          [solidHoverColor]: vars.colorRole.success.solidHover,
+          [subtleColor]: vars.colorRole.success.subtle,
+          [contrastColor]: vars.colorRole.success.contrast
+        }
+      }
     }
   }),
   danger: style({
-    vars: {
-      [solidColor]: vars.colorRole.danger.solid,
-      [solidHoverColor]: vars.colorRole.danger.solidHover,
-      [subtleColor]: vars.colorRole.danger.subtle,
-      [contrastColor]: vars.colorRole.danger.contrast
+    "@layer": {
+      [layers.theme]: {
+        vars: {
+          [solidColor]: vars.colorRole.danger.solid,
+          [solidHoverColor]: vars.colorRole.danger.solidHover,
+          [subtleColor]: vars.colorRole.danger.subtle,
+          [contrastColor]: vars.colorRole.danger.contrast
+        }
+      }
     }
   }),
   // Takes the surrounding text color; only used with the ghost and outline variants
   inherit: style({
-    vars: {
-      [solidColor]: "currentColor",
-      [subtleColor]: "color-mix(in srgb, currentColor 12%, transparent)"
+    "@layer": {
+      [layers.theme]: {
+        vars: {
+          [solidColor]: "currentColor",
+          [subtleColor]: "color-mix(in srgb, currentColor 12%, transparent)"
+        }
+      }
     }
   })
 };

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

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

package/dist/components/checkbox.css.js

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, atoms, vars } from "@blockle/blocks-core";
+import { makeComponentTheme, vars, layers } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 import { focusable } from "./helpers.css.js";
 import { bounceOut } from "./transitions.js";
@@ -9,53 +9,63 @@ const checkbox = makeComponentTheme(
   {
     root: style([
       {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        inlineSize: 24,
-        blockSize: 24,
-        "@media": {
-          "(prefers-reduced-motion: no-preference)": {
-            transition: `background-color ${vars.transition.normal}, box-shadow ${vars.transition.fast}`
-          }
-        },
-        selectors: {
-          "&:hover:not(:has(input:disabled))": {
-            backgroundColor: vars.colorRole.primary.solidHover
-          },
-          "&:has(input:checked)": {
-            backgroundColor: vars.colorRole.primary.solid
+        "@layer": {
+          [layers.theme]: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            inlineSize: 24,
+            blockSize: 24,
+            borderRadius: vars.borderRadius[1],
+            backgroundColor: vars.colorRole.primary.subtle,
+            "@media": {
+              "(prefers-reduced-motion: no-preference)": {
+                transition: `background-color ${vars.transition.normal}, box-shadow ${vars.transition.fast}`
+              }
+            },
+            selectors: {
+              "&:hover:not(:has(input:disabled))": {
+                backgroundColor: vars.colorRole.primary.solidHover
+              },
+              "&:has(input:checked)": {
+                backgroundColor: vars.colorRole.primary.solid
+              }
+            }
           }
         }
       },
-      atoms({
-        borderRadius: 1
-      }),
-      { backgroundColor: vars.colorRole.primary.subtle },
       focusable
     ]),
     icon: style({
-      inlineSize: "1rem",
-      blockSize: "1rem",
-      color: vars.colorRole.primary.contrast,
-      transform: "scale(0)",
-      selectors: {
-        "input:checked ~ &": {
-          transform: "scale(1)"
-        }
-      },
-      "@media": {
-        "(prefers-reduced-motion: no-preference)": {
-          transition: `transform ${vars.transition.normal} ${bounceOut}`
+      "@layer": {
+        [layers.theme]: {
+          inlineSize: "1rem",
+          blockSize: "1rem",
+          color: vars.colorRole.primary.contrast,
+          transform: "scale(0)",
+          selectors: {
+            "input:checked ~ &": {
+              transform: "scale(1)"
+            }
+          },
+          "@media": {
+            "(prefers-reduced-motion: no-preference)": {
+              transition: `transform ${vars.transition.normal} ${bounceOut}`
+            }
+          }
         }
       }
     }),
-    label: atoms({
-      display: "flex",
-      flexDirection: "row",
-      padding: 1,
-      gap: 2,
-      cursor: "pointer"
+    label: style({
+      "@layer": {
+        [layers.theme]: {
+          display: "flex",
+          flexDirection: "row",
+          padding: vars.space[1],
+          gap: vars.space[2],
+          cursor: "pointer"
+        }
+      }
     })
   }
 );

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

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

package/dist/components/dialog.css.js

@@ -1,76 +1,88 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
+import { makeComponentTheme, layers, vars } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/dialog.css.ts", "@blockle/blocks-theme-momotaro");
 const dialog = makeComponentTheme(
   "dialog",
   {
-    dialog: style([
-      atoms({
-        display: "flex",
-        flexDirection: "column",
-        padding: 5,
-        border: "none",
-        overflow: "auto",
-        borderRadius: 2,
-        boxShadow: 3
-      }),
-      {
-        backgroundColor: vars.colorRole.surface.raised,
-        color: vars.colorRole.text.default,
-        maxHeight: "90%",
-        minWidth: "300px",
-        "::backdrop": {
-          backgroundColor: vars.colorRole.overlay.default
-        },
-        selectors: {
-          "&[open]": {
-            transform: "translate(0, 0)",
-            opacity: 1,
-            "@starting-style": {
-              transform: "translate(0, -120px) scale(0.95)",
-              opacity: 0
-            }
+    dialog: style({
+      "@layer": {
+        [layers.theme]: {
+          display: "flex",
+          flexDirection: "column",
+          padding: vars.space[5],
+          border: "none",
+          overflow: "auto",
+          borderRadius: vars.borderRadius[2],
+          boxShadow: vars.colorRole.shadow[3],
+          backgroundColor: vars.colorRole.surface.raised,
+          color: vars.colorRole.text.default,
+          maxHeight: "90%",
+          minWidth: "300px",
+          "::backdrop": {
+            backgroundColor: vars.colorRole.overlay.default
           },
-          "&[open]::backdrop": {
-            opacity: 1,
-            "@starting-style": {
-              opacity: 0
+          selectors: {
+            "&[open]": {
+              transform: "translate(0, 0)",
+              opacity: 1,
+              "@starting-style": {
+                transform: "translate(0, -120px) scale(0.95)",
+                opacity: 0
+              }
+            },
+            "&[open]::backdrop": {
+              opacity: 1,
+              "@starting-style": {
+                opacity: 0
+              }
             }
-          }
-        },
-        // Apply the animation only if the user has not requested reduced motion
-        "@media": {
-          "(prefers-reduced-motion: no-preference)": {
-            // Ending style
-            transform: "translate(0, -120px) scale(0.95)",
-            opacity: 0,
-            transitionBehavior: "allow-discrete",
-            transitionProperty: "opacity, transform, overlay, display",
-            transitionDuration: "240ms, 160ms, 240ms, 240ms",
-            "::backdrop": {
+          },
+          // Apply the animation only if the user has not requested reduced motion
+          "@media": {
+            "(prefers-reduced-motion: no-preference)": {
+              // Ending style
+              transform: "translate(0, -120px) scale(0.95)",
               opacity: 0,
               transitionBehavior: "allow-discrete",
-              transitionProperty: "opacity, overlay, display",
-              transitionDuration: "160ms, 240ms, 240ms"
+              transitionProperty: "opacity, transform, overlay, display",
+              transitionDuration: "240ms, 160ms, 240ms, 240ms",
+              "::backdrop": {
+                opacity: 0,
+                transitionBehavior: "allow-discrete",
+                transitionProperty: "opacity, overlay, display",
+                transitionDuration: "160ms, 240ms, 240ms"
+              }
             }
           }
         }
       }
-    ]),
+    }),
     variants: {
       size: {
         small: style({
-          width: "400px",
-          maxWidth: "min(400px, 90%)"
+          "@layer": {
+            [layers.theme]: {
+              width: "400px",
+              maxWidth: "min(400px, 90%)"
+            }
+          }
         }),
         medium: style({
-          width: "600px",
-          maxWidth: "min(600px, 90%)"
+          "@layer": {
+            [layers.theme]: {
+              width: "600px",
+              maxWidth: "min(600px, 90%)"
+            }
+          }
         }),
         large: style({
-          width: "800px",
-          maxWidth: "min(800px, 90%)"
+          "@layer": {
+            [layers.theme]: {
+              width: "800px",
+              maxWidth: "min(800px, 90%)"
+            }
+          }
         })
       }
     },

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

@@ -1 +1 @@
-{"version":3,"file":"divider.css.d.ts","sourceRoot":"","sources":["../../src/components/divider.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,sBAAsB,CAAC;AAK9B,eAAO,MAAM,OAAO,EAAE,qBAAqB,CAAC,SAAS,CA+BpD,CAAC"}
+{"version":3,"file":"divider.css.d.ts","sourceRoot":"","sources":["../../src/components/divider.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sBAAsB,CAAC;AAK9B,eAAO,MAAM,OAAO,EAAE,qBAAqB,CAAC,SAAS,CA+CpD,CAAC"}