@blockle/blocks-theme-momotaro 1.0.6 → 2.0.0

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

@@ -1 +1,2 @@
-export declare const button: any;
+import { ThemeComponentsStyles } from '@blockle/blocks-core';
+export declare const button: ThemeComponentsStyles['button'];

package/dist/components/button.css.js

@@ -5,121 +5,124 @@ import { focusRingColor, clickable } from "./helpers.css.js";
 setFileScope("src/components/button.css.ts", "@blockle/blocks-theme-momotaro");
 const intentColor = createVar();
 const hoverBackgroundColor = createVar();
-const button = makeComponentTheme("button", {
-  base: style([
-    atoms({
-      display: "inline-flex",
-      placeItems: "center",
-      fontSize: "medium",
-      borderRadius: "medium",
-      fontWeight: "medium",
-      // Space between `startSlot | children | endSlot`
-      gap: "small"
-    }),
-    {
-      selectors: {
-        "&:hover:not(:disabled)": {
-          backgroundColor: hoverBackgroundColor
-        }
-      }
-    },
-    clickable
-  ]),
-  variants: {
-    variant: {
-      solid: style({
-        color: vars.color.white,
-        backgroundColor: intentColor,
-        border: "none"
+const button = makeComponentTheme(
+  "button",
+  {
+    base: style([
+      atoms({
+        display: "inline-flex",
+        placeItems: "center",
+        fontSize: "medium",
+        borderRadius: "medium",
+        fontWeight: "medium",
+        // Space between `startSlot | children | endSlot`
+        gap: "small"
       }),
-      outline: style([
-        atoms({
-          borderWidth: "small"
+      {
+        selectors: {
+          "&:hover:not(:disabled)": {
+            backgroundColor: hoverBackgroundColor
+          }
+        }
+      },
+      clickable
+    ]),
+    variants: {
+      variant: {
+        solid: style({
+          color: vars.color.white,
+          backgroundColor: intentColor,
+          border: "none"
         }),
-        {
+        outline: style([
+          atoms({
+            borderWidth: "small"
+          }),
+          {
+            color: intentColor,
+            borderStyle: "solid",
+            borderColor: intentColor,
+            background: "transparent"
+          }
+        ]),
+        ghost: style({
           color: intentColor,
-          borderStyle: "solid",
-          borderColor: intentColor,
           background: "transparent"
-        }
-      ]),
-      ghost: style({
-        color: intentColor,
-        background: "transparent"
-      })
-    },
-    size: {
-      small: style([
-        atoms({
-          paddingInline: "large"
-        }),
-        {
-          height: 40
-        }
-      ]),
-      medium: style([
-        atoms({
-          paddingInline: "xlarge"
-        }),
-        {
-          height: 56
-        }
-      ]),
-      large: style([
-        atoms({
-          paddingInline: "xlarge"
-        }),
-        {
-          height: 72
-        }
-      ])
-    },
-    intent: {
-      neutral: style({
-        vars: {
-          [intentColor]: vars.color.primary,
-          [hoverBackgroundColor]: vars.color.primaryLight
-        }
-      }),
-      danger: style({
-        vars: {
-          [intentColor]: vars.color.danger,
-          [hoverBackgroundColor]: "#fff8f7",
-          [focusRingColor]: vars.color.danger
-        }
-      })
-    }
-  },
-  compoundVariants: [
-    {
-      variants: {
-        variant: "solid",
-        intent: "neutral"
+        })
       },
-      style: style({
-        vars: {
-          [hoverBackgroundColor]: vars.color.primaryDark
-        }
-      })
+      size: {
+        small: style([
+          atoms({
+            paddingInline: "large"
+          }),
+          {
+            height: 40
+          }
+        ]),
+        medium: style([
+          atoms({
+            paddingInline: "xlarge"
+          }),
+          {
+            height: 56
+          }
+        ]),
+        large: style([
+          atoms({
+            paddingInline: "xlarge"
+          }),
+          {
+            height: 72
+          }
+        ])
+      },
+      intent: {
+        neutral: style({
+          vars: {
+            [intentColor]: vars.color.primary,
+            [hoverBackgroundColor]: vars.color.primaryLight
+          }
+        }),
+        danger: style({
+          vars: {
+            [intentColor]: vars.color.danger,
+            [hoverBackgroundColor]: "#fff8f7",
+            [focusRingColor]: vars.color.danger
+          }
+        })
+      }
     },
-    {
-      variants: {
-        variant: "solid",
-        intent: "danger"
+    compoundVariants: [
+      {
+        variants: {
+          variant: "solid",
+          intent: "neutral"
+        },
+        style: style({
+          vars: {
+            [hoverBackgroundColor]: vars.color.primaryDark
+          }
+        })
       },
-      style: style({
-        vars: {
-          [hoverBackgroundColor]: "#f9b1a9"
-        }
-      })
+      {
+        variants: {
+          variant: "solid",
+          intent: "danger"
+        },
+        style: style({
+          vars: {
+            [hoverBackgroundColor]: "#f9b1a9"
+          }
+        })
+      }
+    ],
+    defaultVariants: {
+      size: "small",
+      variant: "solid",
+      intent: "neutral"
     }
-  ],
-  defaultVariants: {
-    size: "small",
-    variant: "solid",
-    intent: "neutral"
   }
-});
+);
 endFileScope();
 export {
   button

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

@@ -1 +1,2 @@
-export declare const checkbox: any;
+import { ThemeComponentsStyles } from '@blockle/blocks-core';
+export declare const checkbox: ThemeComponentsStyles['checkbox'];

package/dist/components/checkbox.css.js

@@ -4,58 +4,61 @@ import { style } from "@vanilla-extract/css";
 import { focusable } from "./helpers.css.js";
 import { bounceOut } from "./transitions.js";
 setFileScope("src/components/checkbox.css.ts", "@blockle/blocks-theme-momotaro");
-const checkbox = makeComponentTheme("checkbox", {
-  base: 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}`
+const checkbox = makeComponentTheme(
+  "checkbox",
+  {
+    base: 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.color.primaryDark
+          },
+          "&:has(input:checked)": {
+            backgroundColor: vars.color.primary
+          }
         }
       },
+      atoms({
+        backgroundColor: "primaryLight",
+        borderRadius: "small"
+      }),
+      focusable
+    ]),
+    icon: style({
+      inlineSize: "1rem",
+      blockSize: "1rem",
+      color: "white",
+      transform: "scale(0)",
       selectors: {
-        "&:hover:not(:has(input:disabled))": {
-          backgroundColor: vars.color.primaryDark
-        },
-        "&:has(input:checked)": {
-          backgroundColor: vars.color.primary
+        "input:checked ~ &": {
+          transform: "scale(1)"
+        }
+      },
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: `transform ${vars.transition.normal} ${bounceOut}`
         }
       }
-    },
-    atoms({
-      backgroundColor: "primaryLight",
-      borderRadius: "small"
     }),
-    focusable
-  ]),
-  icon: style({
-    inlineSize: "1rem",
-    blockSize: "1rem",
-    color: "white",
-    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: "xsmall",
-    gap: "medium",
-    cursor: "pointer"
-  })
-});
+    label: atoms({
+      display: "flex",
+      flexDirection: "row",
+      padding: "xsmall",
+      gap: "medium",
+      cursor: "pointer"
+    })
+  }
+);
 endFileScope();
 export {
   checkbox

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

@@ -1 +1,2 @@
-export declare const dialog: any;
+import { ThemeComponentsStyles } from '@blockle/blocks-core';
+export declare const dialog: ThemeComponentsStyles['dialog'];

package/dist/components/dialog.css.js

@@ -2,79 +2,82 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { makeComponentTheme, atoms } 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: "gutter",
-      border: "none",
-      overflow: "auto",
-      borderRadius: "medium",
-      boxShadow: "large"
-    }),
-    {
-      maxHeight: "90%",
-      minWidth: "300px",
-      "::backdrop": {
-        backgroundColor: "rgba(0, 0, 0, 0.5)"
-      },
-      selectors: {
-        "&[open]": {
-          transform: "translate(0, 0)",
-          opacity: 1,
-          // @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
-          "@starting-style": {
-            transform: "translate(0, -120px)",
-            opacity: 0
-          }
+const dialog = makeComponentTheme(
+  "dialog",
+  {
+    dialog: style([
+      atoms({
+        display: "flex",
+        flexDirection: "column",
+        padding: "gutter",
+        border: "none",
+        overflow: "auto",
+        borderRadius: "medium",
+        boxShadow: "large"
+      }),
+      {
+        maxHeight: "90%",
+        minWidth: "300px",
+        "::backdrop": {
+          backgroundColor: "rgba(0, 0, 0, 0.5)"
         },
-        "&[open]::backdrop": {
-          opacity: 1,
-          "@starting-style": {
-            opacity: 0
+        selectors: {
+          "&[open]": {
+            transform: "translate(0, 0)",
+            opacity: 1,
+            // @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
+            "@starting-style": {
+              transform: "translate(0, -120px)",
+              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)",
-          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)",
             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%)"
+        }),
+        medium: style({
+          width: "600px",
+          maxWidth: "min(600px, 90%)"
+        }),
+        large: style({
+          width: "800px",
+          maxWidth: "min(800px, 90%)"
+        })
+      }
+    },
+    defaultVariants: {
+      size: "small"
     }
-  ]),
-  variants: {
-    size: {
-      small: style({
-        width: "400px",
-        maxWidth: "min(400px, 90%)"
-      }),
-      medium: style({
-        width: "600px",
-        maxWidth: "min(600px, 90%)"
-      }),
-      large: style({
-        width: "800px",
-        maxWidth: "min(800px, 90%)"
-      })
-    }
-  },
-  defaultVariants: {
-    size: "small"
   }
-});
+);
 endFileScope();
 export {
   dialog

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

@@ -1 +1,2 @@
-export declare const divider: any;
+import { ThemeComponentsStyles } from '@blockle/blocks-core';
+export declare const divider: ThemeComponentsStyles['divider'];

package/dist/components/divider.css.js

@@ -2,14 +2,17 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { makeComponentTheme } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/divider.css.ts", "@blockle/blocks-theme-momotaro");
-const divider = makeComponentTheme("divider", {
-  base: style({
-    blockSize: 1
-  }),
-  defaultVariants: {
-    color: "textLight"
+const divider = makeComponentTheme(
+  "divider",
+  {
+    base: style({
+      blockSize: 1
+    }),
+    defaultVariants: {
+      color: "textLight"
+    }
   }
-});
+);
 endFileScope();
 export {
   divider

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

@@ -1 +1,2 @@
-export declare const input: any;
+import { ThemeComponentsStyles } from '@blockle/blocks-core';
+export declare const input: ThemeComponentsStyles['input'];

package/dist/components/input.css.js

@@ -2,44 +2,47 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/input.css.ts", "@blockle/blocks-theme-momotaro");
-const input = makeComponentTheme("input", {
-  input: style([
-    atoms({
-      color: "text",
-      padding: "large",
-      border: "none",
-      borderRadius: "small"
-    }),
-    {
-      outline: "none",
-      background: "transparent",
-      "::placeholder": {
-        color: vars.color.textLight
-      },
-      ":disabled": {}
-    }
-  ]),
-  container: style([
-    {
-      minHeight: 56,
-      "@media": {
-        "(prefers-reduced-motion: no-preference)": {
-          transition: `box-shadow ${vars.transition.fast}`
+const input = makeComponentTheme(
+  "input",
+  {
+    input: style([
+      atoms({
+        color: "text",
+        padding: "large",
+        border: "none",
+        borderRadius: "small"
+      }),
+      {
+        outline: "none",
+        background: "transparent",
+        "::placeholder": {
+          color: vars.color.textLight
+        },
+        ":disabled": {}
+      }
+    ]),
+    container: style([
+      {
+        minHeight: 56,
+        "@media": {
+          "(prefers-reduced-motion: no-preference)": {
+            transition: `box-shadow ${vars.transition.fast}`
+          }
+        },
+        ":focus-within": {
+          outline: "2px solid transparent",
+          outlineOffset: "2px",
+          boxShadow: `${vars.shadow.small}, ${vars.focus.boxShadow}`
         }
       },
-      ":focus-within": {
-        outline: "2px solid transparent",
-        outlineOffset: "2px",
-        boxShadow: `${vars.shadow.small}, ${vars.focus.boxShadow}`
-      }
-    },
-    atoms({
-      backgroundColor: "white",
-      borderRadius: "medium",
-      boxShadow: "medium"
-    })
-  ])
-});
+      atoms({
+        backgroundColor: "white",
+        borderRadius: "medium",
+        boxShadow: "medium"
+      })
+    ])
+  }
+);
 endFileScope();
 export {
   input

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

@@ -1 +1,2 @@
-export declare const label: any;
+import { ThemeComponentsStyles } from '@blockle/blocks-core';
+export declare const label: ThemeComponentsStyles['label'];

package/dist/components/label.css.js

@@ -2,31 +2,34 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { makeComponentTheme, vars } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/label.css.ts", "@blockle/blocks-theme-momotaro");
-const label = makeComponentTheme("label", {
-  base: style({}),
-  variants: {
-    size: {
-      small: style({
-        fontSize: vars.fontSize.xsmall
-      }),
-      medium: style({
-        fontSize: vars.fontSize.small
-      }),
-      large: style({
-        fontSize: vars.fontSize.medium
+const label = makeComponentTheme(
+  "label",
+  {
+    base: style({}),
+    variants: {
+      size: {
+        small: style({
+          fontSize: vars.fontSize.xsmall
+        }),
+        medium: style({
+          fontSize: vars.fontSize.small
+        }),
+        large: style({
+          fontSize: vars.fontSize.medium
+        })
+      },
+      required: style({
+        ":after": {
+          content: '"*"',
+          marginLeft: vars.space.xsmall
+        }
       })
     },
-    required: style({
-      ":after": {
-        content: '"*"',
-        marginLeft: vars.space.xsmall
-      }
-    })
-  },
-  defaultVariants: {
-    size: "large"
+    defaultVariants: {
+      size: "large"
+    }
   }
-});
+);
 endFileScope();
 export {
   label