@blockle/blocks-theme-momotaro 1.0.0

package/README.md

@@ -0,0 +1 @@
+# @blockle/blocks

package/dist/components/button.css.cjs

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const blocksCore = require("@blockle/blocks-core");
+const helpers_css = require("./helpers.css.cjs");
+fileScope.setFileScope("src/components/button.css.ts", "@blockle/blocks-theme-momotaro");
+const intentColor = css.createVar();
+const hoverBackgroundColor = css.createVar();
+const button = blocksCore.makeComponentTheme("button", {
+  base: css.style([
+    blocksCore.sprinkles({
+      display: "inline-flex",
+      placeItems: "center",
+      fontSize: "medium",
+      borderRadius: "medium",
+      fontWeight: "medium",
+      // Space between `startSlot | children | endSlot`
+      gap: "small"
+    }),
+    {
+      selectors: {
+        "&:hover:not(:disabled)": {
+          backgroundColor: hoverBackgroundColor
+        }
+      }
+    },
+    helpers_css.clickable
+  ]),
+  variants: {
+    variant: {
+      solid: css.style({
+        color: blocksCore.vars.color.white,
+        backgroundColor: intentColor,
+        border: "none"
+      }),
+      outline: css.style([
+        blocksCore.sprinkles({
+          borderWidth: "small"
+        }),
+        {
+          color: intentColor,
+          borderStyle: "solid",
+          borderColor: intentColor,
+          background: "transparent"
+        }
+      ]),
+      ghost: css.style({
+        color: intentColor,
+        background: "transparent"
+      })
+    },
+    size: {
+      small: css.style([
+        blocksCore.sprinkles({
+          paddingInline: "large"
+        }),
+        {
+          height: 40
+        }
+      ]),
+      medium: css.style([
+        blocksCore.sprinkles({
+          paddingInline: "xlarge"
+        }),
+        {
+          height: 56
+        }
+      ]),
+      large: css.style([
+        blocksCore.sprinkles({
+          paddingInline: "xlarge"
+        }),
+        {
+          height: 72
+        }
+      ])
+    },
+    intent: {
+      neutral: css.style({
+        vars: {
+          [intentColor]: blocksCore.vars.color.primary,
+          [hoverBackgroundColor]: blocksCore.vars.color.primaryLight
+        }
+      }),
+      danger: css.style({
+        vars: {
+          [intentColor]: blocksCore.vars.color.danger,
+          [hoverBackgroundColor]: "#fff8f7",
+          [helpers_css.focusRingColor]: blocksCore.vars.color.danger
+        }
+      })
+    }
+  },
+  compoundVariants: [
+    {
+      variants: {
+        variant: "solid",
+        intent: "neutral"
+      },
+      style: css.style({
+        vars: {
+          [hoverBackgroundColor]: blocksCore.vars.color.primaryDark
+        }
+      })
+    },
+    {
+      variants: {
+        variant: "solid",
+        intent: "danger"
+      },
+      style: css.style({
+        vars: {
+          [hoverBackgroundColor]: "#f9b1a9"
+        }
+      })
+    }
+  ],
+  defaultVariants: {
+    size: "small",
+    variant: "solid",
+    intent: "neutral"
+  }
+});
+fileScope.endFileScope();
+exports.button = button;

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

@@ -0,0 +1 @@
+export declare const button: import('@blockle/blocks-core').ComponentTheme<import('@blockle/blocks-core/dist/config/componentThemes').ButtonTheme> | undefined;

package/dist/components/button.css.js

@@ -0,0 +1,126 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style, createVar } from "@vanilla-extract/css";
+import { makeComponentTheme, vars, sprinkles } from "@blockle/blocks-core";
+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([
+    sprinkles({
+      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"
+      }),
+      outline: style([
+        sprinkles({
+          borderWidth: "small"
+        }),
+        {
+          color: intentColor,
+          borderStyle: "solid",
+          borderColor: intentColor,
+          background: "transparent"
+        }
+      ]),
+      ghost: style({
+        color: intentColor,
+        background: "transparent"
+      })
+    },
+    size: {
+      small: style([
+        sprinkles({
+          paddingInline: "large"
+        }),
+        {
+          height: 40
+        }
+      ]),
+      medium: style([
+        sprinkles({
+          paddingInline: "xlarge"
+        }),
+        {
+          height: 56
+        }
+      ]),
+      large: style([
+        sprinkles({
+          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
+        }
+      })
+    },
+    {
+      variants: {
+        variant: "solid",
+        intent: "danger"
+      },
+      style: style({
+        vars: {
+          [hoverBackgroundColor]: "#f9b1a9"
+        }
+      })
+    }
+  ],
+  defaultVariants: {
+    size: "small",
+    variant: "solid",
+    intent: "neutral"
+  }
+});
+endFileScope();
+export {
+  button
+};

package/dist/components/checkbox.css.cjs

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const blocksCore = require("@blockle/blocks-core");
+const css = require("@vanilla-extract/css");
+const helpers_css = require("./helpers.css.cjs");
+const transitions = require("./transitions.cjs");
+fileScope.setFileScope("src/components/checkbox.css.ts", "@blockle/blocks-theme-momotaro");
+const checkbox = blocksCore.makeComponentTheme("checkbox", {
+  base: css.style([
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      inlineSize: 24,
+      blockSize: 24,
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: `background-color ${blocksCore.vars.transition.normal}, box-shadow ${blocksCore.vars.transition.fast}`
+        }
+      },
+      selectors: {
+        "&:hover:not(:has(input:disabled))": {
+          backgroundColor: blocksCore.vars.color.primaryDark
+        },
+        "&:has(input:checked)": {
+          backgroundColor: blocksCore.vars.color.primary
+        }
+      }
+    },
+    blocksCore.sprinkles({
+      backgroundColor: "primaryLight",
+      borderRadius: "small"
+    }),
+    helpers_css.focusable
+  ]),
+  icon: css.style({
+    inlineSize: "1rem",
+    blockSize: "1rem",
+    color: "white",
+    transform: "scale(0)",
+    selectors: {
+      "input:checked ~ &": {
+        transform: "scale(1)"
+      }
+    },
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `transform ${blocksCore.vars.transition.normal} ${transitions.bounceOut}`
+      }
+    }
+  }),
+  label: blocksCore.sprinkles({
+    display: "flex",
+    flexDirection: "row",
+    padding: "xsmall",
+    gap: "medium",
+    cursor: "pointer"
+  })
+});
+fileScope.endFileScope();
+exports.checkbox = checkbox;

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

@@ -0,0 +1 @@
+export declare const checkbox: import('@blockle/blocks-core').ComponentTheme<import('@blockle/blocks-core/dist/config/componentThemes').CheckboxTheme> | undefined;

package/dist/components/checkbox.css.js

@@ -0,0 +1,62 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { makeComponentTheme, sprinkles, vars } from "@blockle/blocks-core";
+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}`
+        }
+      },
+      selectors: {
+        "&:hover:not(:has(input:disabled))": {
+          backgroundColor: vars.color.primaryDark
+        },
+        "&:has(input:checked)": {
+          backgroundColor: vars.color.primary
+        }
+      }
+    },
+    sprinkles({
+      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: sprinkles({
+    display: "flex",
+    flexDirection: "row",
+    padding: "xsmall",
+    gap: "medium",
+    cursor: "pointer"
+  })
+});
+endFileScope();
+export {
+  checkbox
+};

package/dist/components/dialog.css.cjs

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const blocksCore = require("@blockle/blocks-core");
+const css = require("@vanilla-extract/css");
+fileScope.setFileScope("src/components/dialog.css.ts", "@blockle/blocks-theme-momotaro");
+const dialog = blocksCore.makeComponentTheme("dialog", {
+  dialog: css.style([
+    blocksCore.sprinkles({
+      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
+          }
+        },
+        "&[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": {
+            opacity: 0,
+            transitionBehavior: "allow-discrete",
+            transitionProperty: "opacity, overlay, display",
+            transitionDuration: "160ms, 240ms, 240ms"
+          }
+        }
+      }
+    }
+  ]),
+  variants: {
+    size: {
+      small: css.style({
+        width: "400px",
+        maxWidth: "min(400px, 90%)"
+      }),
+      medium: css.style({
+        width: "600px",
+        maxWidth: "min(600px, 90%)"
+      }),
+      large: css.style({
+        width: "800px",
+        maxWidth: "min(800px, 90%)"
+      })
+    }
+  },
+  defaultVariants: {
+    size: "small"
+  }
+});
+fileScope.endFileScope();
+exports.dialog = dialog;

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

@@ -0,0 +1 @@
+export declare const dialog: import('@blockle/blocks-core').ComponentTheme<import('@blockle/blocks-core/dist/config/componentThemes').DialogTheme> | undefined;

package/dist/components/dialog.css.js

@@ -0,0 +1,81 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { makeComponentTheme, sprinkles } 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([
+    sprinkles({
+      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
+          }
+        },
+        "&[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": {
+            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"
+  }
+});
+endFileScope();
+export {
+  dialog
+};

package/dist/components/divider.css.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const blocksCore = require("@blockle/blocks-core");
+const css = require("@vanilla-extract/css");
+fileScope.setFileScope("src/components/divider.css.ts", "@blockle/blocks-theme-momotaro");
+const divider = blocksCore.makeComponentTheme("divider", {
+  base: css.style({
+    blockSize: 1
+  }),
+  defaultVariants: {
+    color: "textLight"
+  }
+});
+fileScope.endFileScope();
+exports.divider = divider;

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

@@ -0,0 +1 @@
+export declare const divider: import('@blockle/blocks-core').ComponentTheme<import('@blockle/blocks-core/dist/config/componentThemes').DividerTheme> | undefined;

package/dist/components/divider.css.js

@@ -0,0 +1,16 @@
+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"
+  }
+});
+endFileScope();
+export {
+  divider
+};

package/dist/components/helpers.css.cjs

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const blocksCore = require("@blockle/blocks-core");
+const css = require("@vanilla-extract/css");
+fileScope.setFileScope("src/components/helpers.css.ts", "@blockle/blocks-theme-momotaro");
+const focusRingColor = css.createVar();
+const focusable = css.style({
+  "@media": {
+    "(prefers-reduced-motion: no-preference)": {
+      transition: `box-shadow ${blocksCore.vars.transition.fast}`
+    }
+  },
+  ":focus-visible": {
+    outline: "2px solid transparent",
+    outlineOffset: "2px",
+    boxShadow: `0 0 1px 2px ${css.fallbackVar(focusRingColor, "#AF8EFF")}`
+  },
+  selectors: {
+    "&:disabled, &[disabled]": {
+      opacity: 0.5,
+      cursor: "auto",
+      pointerEvents: "none"
+    },
+    "&:has(input:focus-visible)": {
+      outline: "2px solid transparent",
+      outlineOffset: "2px",
+      boxShadow: blocksCore.vars.focus.boxShadow
+    },
+    "&:has(input:disabled)": {
+      opacity: 0.5,
+      cursor: "auto"
+    }
+  }
+});
+const clickable = css.style([
+  focusable,
+  {
+    ":active": {
+      transform: "scale(0.975)"
+    }
+  }
+]);
+fileScope.endFileScope();
+exports.clickable = clickable;
+exports.focusRingColor = focusRingColor;
+exports.focusable = focusable;

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

@@ -0,0 +1,8 @@
+export declare const focusRingColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+/**
+ * NOTE: When the original element has a transition, make sure to include
+ * `box-shadow ${vars.transition.fast}` in the transition property for the
+ * focus transition to work correctly.
+ */
+export declare const focusable: string;
+export declare const clickable: string;

package/dist/components/helpers.css.js

@@ -0,0 +1,47 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { vars } from "@blockle/blocks-core";
+import { style, fallbackVar, createVar } from "@vanilla-extract/css";
+setFileScope("src/components/helpers.css.ts", "@blockle/blocks-theme-momotaro");
+const focusRingColor = createVar();
+const focusable = style({
+  "@media": {
+    "(prefers-reduced-motion: no-preference)": {
+      transition: `box-shadow ${vars.transition.fast}`
+    }
+  },
+  ":focus-visible": {
+    outline: "2px solid transparent",
+    outlineOffset: "2px",
+    boxShadow: `0 0 1px 2px ${fallbackVar(focusRingColor, "#AF8EFF")}`
+  },
+  selectors: {
+    "&:disabled, &[disabled]": {
+      opacity: 0.5,
+      cursor: "auto",
+      pointerEvents: "none"
+    },
+    "&:has(input:focus-visible)": {
+      outline: "2px solid transparent",
+      outlineOffset: "2px",
+      boxShadow: vars.focus.boxShadow
+    },
+    "&:has(input:disabled)": {
+      opacity: 0.5,
+      cursor: "auto"
+    }
+  }
+});
+const clickable = style([
+  focusable,
+  {
+    ":active": {
+      transform: "scale(0.975)"
+    }
+  }
+]);
+endFileScope();
+export {
+  clickable,
+  focusRingColor,
+  focusable
+};