@blockle/blocks-theme-momotaro 7.1.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,EAE3B,MAAM,sBAAsB,CAAC;AAW9B,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAmIlD,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,136 +1,41 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
-import { style, createVar } from "@vanilla-extract/css";
-import { clickable } from "./helpers.css.js";
+import { makeComponentTheme, vars, layers } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+import { buttonIntent, buttonVariant, buttonBase, buttonRadius, buttonHeight } from "./buttonBase.css.js";
 setFileScope("src/components/button.css.ts", "@blockle/blocks-theme-momotaro");
-const solidColor = createVar();
-const solidHoverColor = createVar();
-const subtleColor = createVar();
-const contrastColor = createVar();
+const sizeStyle = (paddingInline, minHeight) => style({
+  "@layer": {
+    [layers.theme]: {
+      paddingInline,
+      minHeight
+    }
+  }
+});
 const button = makeComponentTheme(
   "button",
   {
     root: style([
-      atoms({
-        display: "inline-flex",
-        placeItems: "center",
-        fontSize: "medium",
-        borderRadius: 2,
-        fontWeight: "medium",
-        gap: 2,
-        paddingBlock: 1
-      }),
       {
-        selectors: {}
+        "@layer": {
+          [layers.theme]: {
+            fontSize: vars.fontSize.medium,
+            fontWeight: vars.fontWeight.medium,
+            gap: vars.space[2],
+            paddingBlock: vars.space[1]
+          }
+        }
       },
-      clickable
+      buttonBase,
+      buttonRadius
     ]),
     variants: {
-      variant: {
-        solid: style({
-          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
-              }
-            }
-          }
-        ]),
-        ghost: style({
-          color: solidColor,
-          background: "transparent",
-          selectors: {
-            "&:hover:not(:disabled)": {
-              backgroundColor: subtleColor
-            }
-          }
-        })
-      },
+      variant: buttonVariant,
       size: {
-        small: style([
-          atoms({
-            paddingInline: 3
-          }),
-          {
-            minHeight: 40
-          }
-        ]),
-        medium: style([
-          atoms({
-            paddingInline: 4
-          }),
-          {
-            minHeight: 48
-          }
-        ]),
-        large: style([
-          atoms({
-            paddingInline: 5
-          }),
-          {
-            minHeight: 56
-          }
-        ])
+        small: sizeStyle(vars.space[3], buttonHeight.small),
+        medium: sizeStyle(vars.space[4], buttonHeight.medium),
+        large: sizeStyle(vars.space[5], buttonHeight.large)
       },
-      intent: {
-        neutral: style({
-          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
-          }
-        }),
-        secondary: style({
-          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
-          }
-        }),
-        danger: style({
-          vars: {
-            [solidColor]: vars.colorRole.danger.solid,
-            [solidHoverColor]: vars.colorRole.danger.solidHover,
-            [subtleColor]: vars.colorRole.danger.subtle,
-            [contrastColor]: vars.colorRole.danger.contrast
-          }
-        })
-      }
+      intent: buttonIntent
     },
     defaultVariants: {
       size: "medium",

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

@@ -0,0 +1,21 @@
+export declare const buttonHeight: {
+    readonly small: 40;
+    readonly medium: 48;
+    readonly large: 56;
+};
+export declare const buttonBase: string;
+export declare const buttonRadius: string;
+export declare const buttonVariant: {
+    solid: string;
+    outline: string;
+    ghost: string;
+};
+export declare const buttonIntent: {
+    neutral: string;
+    primary: string;
+    secondary: string;
+    success: string;
+    danger: string;
+    inherit: string;
+};
+//# sourceMappingURL=buttonBase.css.d.ts.map

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

@@ -0,0 +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,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

@@ -0,0 +1,158 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+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");
+const solidColor = createVar();
+const solidHoverColor = createVar();
+const subtleColor = createVar();
+const contrastColor = createVar();
+const buttonHeight = {
+  small: 40,
+  medium: 48,
+  large: 56
+};
+const buttonBase = style([
+  {
+    "@layer": {
+      [layers.theme]: {
+        display: "inline-flex",
+        placeItems: "center"
+      }
+    }
+  },
+  clickable
+]);
+const buttonRadius = style({
+  "@layer": {
+    [layers.theme]: {
+      borderRadius: vars.borderRadius[2]
+    }
+  }
+});
+const buttonVariant = {
+  solid: style({
+    "@layer": {
+      [layers.theme]: {
+        color: contrastColor,
+        backgroundColor: solidColor,
+        border: "none",
+        selectors: {
+          "&:hover:not(:disabled)": {
+            backgroundColor: solidHoverColor
+          }
+        }
+      }
+    }
+  }),
+  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({
+    "@layer": {
+      [layers.theme]: {
+        color: solidColor,
+        background: "transparent",
+        selectors: {
+          "&:hover:not(:disabled)": {
+            backgroundColor: subtleColor
+          }
+        }
+      }
+    }
+  })
+};
+const buttonIntent = {
+  neutral: style({
+    "@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({
+    "@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({
+    "@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({
+    "@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({
+    "@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({
+    "@layer": {
+      [layers.theme]: {
+        vars: {
+          [solidColor]: "currentColor",
+          [subtleColor]: "color-mix(in srgb, currentColor 12%, transparent)"
+        }
+      }
+    }
+  })
+};
+endFileScope();
+export {
+  buttonBase,
+  buttonHeight,
+  buttonIntent,
+  buttonRadius,
+  buttonVariant
+};

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"}