@blockle/blocks-theme-momotaro 1.0.0

package/dist/components/index.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const button_css = require("./button.css.cjs");
+const checkbox_css = require("./checkbox.css.cjs");
+const dialog_css = require("./dialog.css.cjs");
+const divider_css = require("./divider.css.cjs");
+const input_css = require("./input.css.cjs");
+const label_css = require("./label.css.cjs");
+const link_css = require("./link.css.cjs");
+const popover_css = require("./popover.css.cjs");
+const progress_css = require("./progress.css.cjs");
+const radio_css = require("./radio.css.cjs");
+const select_css = require("./select.css.cjs");
+const slider_css = require("./slider.css.cjs");
+const spinner_css = require("./spinner.css.cjs");
+const switch_css = require("./switch.css.cjs");
+const tooltip_css = require("./tooltip.css.cjs");
+const components = {
+  button: button_css.button,
+  checkbox: checkbox_css.checkbox,
+  dialog: dialog_css.dialog,
+  divider: divider_css.divider,
+  input: input_css.input,
+  label: label_css.label,
+  link: link_css.link,
+  popover: popover_css.popover,
+  progress: progress_css.progress,
+  radio: radio_css.radio,
+  select: select_css.select,
+  slider: slider_css.slider,
+  spinner: spinner_css.spinner,
+  switch: switch_css.switchTheme,
+  tooltip: tooltip_css.tooltip
+};
+exports.components = components;

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+import { ThemeComponentsStyles } from '@blockle/blocks-core';
+export declare const components: ThemeComponentsStyles;

package/dist/components/index.js

@@ -0,0 +1,35 @@
+import { button } from "./button.css.js";
+import { checkbox } from "./checkbox.css.js";
+import { dialog } from "./dialog.css.js";
+import { divider } from "./divider.css.js";
+import { input } from "./input.css.js";
+import { label } from "./label.css.js";
+import { link } from "./link.css.js";
+import { popover } from "./popover.css.js";
+import { progress } from "./progress.css.js";
+import { radio } from "./radio.css.js";
+import { select } from "./select.css.js";
+import { slider } from "./slider.css.js";
+import { spinner } from "./spinner.css.js";
+import { switchTheme } from "./switch.css.js";
+import { tooltip } from "./tooltip.css.js";
+const components = {
+  button,
+  checkbox,
+  dialog,
+  divider,
+  input,
+  label,
+  link,
+  popover,
+  progress,
+  radio,
+  select,
+  slider,
+  spinner,
+  switch: switchTheme,
+  tooltip
+};
+export {
+  components
+};

package/dist/components/input.css.cjs

@@ -0,0 +1,46 @@
+"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/input.css.ts", "@blockle/blocks-theme-momotaro");
+const input = blocksCore.makeComponentTheme("input", {
+  input: css.style([
+    blocksCore.sprinkles({
+      color: "text",
+      padding: "large",
+      border: "none",
+      borderRadius: "small"
+    }),
+    {
+      outline: "none",
+      background: "transparent",
+      "::placeholder": {
+        color: blocksCore.vars.color.textLight
+      },
+      ":disabled": {}
+    }
+  ]),
+  container: css.style([
+    {
+      minHeight: 56,
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: `box-shadow ${blocksCore.vars.transition.fast}`
+        }
+      },
+      ":focus-within": {
+        outline: "2px solid transparent",
+        outlineOffset: "2px",
+        boxShadow: `${blocksCore.vars.shadow.small}, ${blocksCore.vars.focus.boxShadow}`
+      }
+    },
+    blocksCore.sprinkles({
+      backgroundColor: "white",
+      borderRadius: "medium",
+      boxShadow: "medium"
+    })
+  ])
+});
+fileScope.endFileScope();
+exports.input = input;

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

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

package/dist/components/input.css.js

@@ -0,0 +1,46 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { makeComponentTheme, vars, sprinkles } 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([
+    sprinkles({
+      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}`
+      }
+    },
+    sprinkles({
+      backgroundColor: "white",
+      borderRadius: "medium",
+      boxShadow: "medium"
+    })
+  ])
+});
+endFileScope();
+export {
+  input
+};

package/dist/components/label.css.cjs

@@ -0,0 +1,33 @@
+"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/label.css.ts", "@blockle/blocks-theme-momotaro");
+const label = blocksCore.makeComponentTheme("label", {
+  base: css.style({}),
+  variants: {
+    size: {
+      small: css.style({
+        fontSize: blocksCore.vars.fontSize.xsmall
+      }),
+      medium: css.style({
+        fontSize: blocksCore.vars.fontSize.small
+      }),
+      large: css.style({
+        fontSize: blocksCore.vars.fontSize.medium
+      })
+    },
+    required: css.style({
+      ":after": {
+        content: '"*"',
+        marginLeft: blocksCore.vars.space.xsmall
+      }
+    })
+  },
+  defaultVariants: {
+    size: "large"
+  }
+});
+fileScope.endFileScope();
+exports.label = label;

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

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

package/dist/components/label.css.js

@@ -0,0 +1,33 @@
+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
+      })
+    },
+    required: style({
+      ":after": {
+        content: '"*"',
+        marginLeft: vars.space.xsmall
+      }
+    })
+  },
+  defaultVariants: {
+    size: "large"
+  }
+});
+endFileScope();
+export {
+  label
+};

package/dist/components/link.css.cjs

@@ -0,0 +1,56 @@
+"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");
+fileScope.setFileScope("src/components/link.css.ts", "@blockle/blocks-theme-momotaro");
+const link = blocksCore.makeComponentTheme("link", {
+  base: css.style([
+    {
+      outline: "none",
+      border: "none",
+      textDecoration: "none",
+      background: "transparent",
+      borderRadius: 1,
+      ":hover": {
+        textDecoration: "underline"
+      },
+      ":focus-visible": {
+        textDecoration: "underline"
+      },
+      cursor: "pointer"
+      // selectors: {
+      //   '&[target="_blank"]::after': {
+      //     content: '"\\2197"',
+      //     marginLeft: 4,
+      //   },
+      // },
+    },
+    helpers_css.focusable
+  ]),
+  variants: {
+    variant: {
+      inherit: css.style({
+        color: "inherit",
+        fontWeight: "inherit"
+      }),
+      primary: blocksCore.sprinkles({
+        color: "primary",
+        fontWeight: "medium"
+      }),
+      secondary: blocksCore.sprinkles({
+        color: "secondary",
+        fontWeight: "medium"
+      })
+    },
+    underline: css.style({
+      textDecoration: "underline"
+    })
+  },
+  defaultVariants: {
+    variant: "primary"
+  }
+});
+fileScope.endFileScope();
+exports.link = link;

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

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

package/dist/components/link.css.js

@@ -0,0 +1,56 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { makeComponentTheme, sprinkles } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+import { focusable } from "./helpers.css.js";
+setFileScope("src/components/link.css.ts", "@blockle/blocks-theme-momotaro");
+const link = makeComponentTheme("link", {
+  base: style([
+    {
+      outline: "none",
+      border: "none",
+      textDecoration: "none",
+      background: "transparent",
+      borderRadius: 1,
+      ":hover": {
+        textDecoration: "underline"
+      },
+      ":focus-visible": {
+        textDecoration: "underline"
+      },
+      cursor: "pointer"
+      // selectors: {
+      //   '&[target="_blank"]::after': {
+      //     content: '"\\2197"',
+      //     marginLeft: 4,
+      //   },
+      // },
+    },
+    focusable
+  ]),
+  variants: {
+    variant: {
+      inherit: style({
+        color: "inherit",
+        fontWeight: "inherit"
+      }),
+      primary: sprinkles({
+        color: "primary",
+        fontWeight: "medium"
+      }),
+      secondary: sprinkles({
+        color: "secondary",
+        fontWeight: "medium"
+      })
+    },
+    underline: style({
+      textDecoration: "underline"
+    })
+  },
+  defaultVariants: {
+    variant: "primary"
+  }
+});
+endFileScope();
+export {
+  link
+};

package/dist/components/popover.css.cjs

@@ -0,0 +1,37 @@
+"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/popover.css.ts", "@blockle/blocks-theme-momotaro");
+const popover = blocksCore.makeComponentTheme("popover", {
+  base: css.style([
+    blocksCore.sprinkles({
+      backgroundColor: "white",
+      borderRadius: "small",
+      boxShadow: "medium",
+      padding: "medium",
+      margin: "small"
+      // Space between the popover and the anchor element
+    }),
+    {
+      width: "max-content",
+      selectors: {
+        "&[data-open]": {
+          transform: "scale(1)",
+          opacity: 1
+        }
+      },
+      // Apply the animation only if the user has not requested reduced motion
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transform: "scale(0.95)",
+          transition: "opacity 80ms linear, transform 80ms",
+          opacity: 0
+        }
+      }
+    }
+  ])
+});
+fileScope.endFileScope();
+exports.popover = popover;

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

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

package/dist/components/popover.css.js

@@ -0,0 +1,37 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { makeComponentTheme, sprinkles } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/popover.css.ts", "@blockle/blocks-theme-momotaro");
+const popover = makeComponentTheme("popover", {
+  base: style([
+    sprinkles({
+      backgroundColor: "white",
+      borderRadius: "small",
+      boxShadow: "medium",
+      padding: "medium",
+      margin: "small"
+      // Space between the popover and the anchor element
+    }),
+    {
+      width: "max-content",
+      selectors: {
+        "&[data-open]": {
+          transform: "scale(1)",
+          opacity: 1
+        }
+      },
+      // Apply the animation only if the user has not requested reduced motion
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transform: "scale(0.95)",
+          transition: "opacity 80ms linear, transform 80ms",
+          opacity: 0
+        }
+      }
+    }
+  ])
+});
+endFileScope();
+export {
+  popover
+};

package/dist/components/progress.css.cjs

@@ -0,0 +1,57 @@
+"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/progress.css.ts", "@blockle/blocks-theme-momotaro");
+const indeterminateAnimation = css.keyframes({
+  "0%": {
+    transform: "translateX(-100%)"
+  },
+  "100%": {
+    transform: "translateX(100%)"
+  }
+});
+const progress = blocksCore.makeComponentTheme("progress", {
+  base: css.style([
+    {
+      height: 8
+    },
+    blocksCore.sprinkles({
+      inlineSize: "full",
+      borderRadius: "small",
+      backgroundColor: "textLight",
+      color: "primary",
+      overflow: "hidden"
+    })
+  ]),
+  bar: css.style({
+    borderRadius: "inherit",
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: "transform 180ms ease-out"
+      }
+    }
+  }),
+  variants: {
+    indeterminate: css.style({
+      "@media": {
+        // For reduce motion we show a striped pattern instead of animating
+        "(prefers-reduced-motion: reduce)": {
+          backgroundImage: `repeating-linear-gradient(
+          45deg,
+          transparent,
+          transparent 20px,
+          ${blocksCore.vars.color.primaryDark} 20px,
+          ${blocksCore.vars.color.primaryDark} 40px
+        )`
+        },
+        "(prefers-reduced-motion: no-preference)": {
+          animation: `${indeterminateAnimation} 3s ease-in-out infinite`
+        }
+      }
+    })
+  }
+});
+fileScope.endFileScope();
+exports.progress = progress;

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

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

package/dist/components/progress.css.js

@@ -0,0 +1,57 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { makeComponentTheme, vars, sprinkles } from "@blockle/blocks-core";
+import { style, keyframes } from "@vanilla-extract/css";
+setFileScope("src/components/progress.css.ts", "@blockle/blocks-theme-momotaro");
+const indeterminateAnimation = keyframes({
+  "0%": {
+    transform: "translateX(-100%)"
+  },
+  "100%": {
+    transform: "translateX(100%)"
+  }
+});
+const progress = makeComponentTheme("progress", {
+  base: style([
+    {
+      height: 8
+    },
+    sprinkles({
+      inlineSize: "full",
+      borderRadius: "small",
+      backgroundColor: "textLight",
+      color: "primary",
+      overflow: "hidden"
+    })
+  ]),
+  bar: style({
+    borderRadius: "inherit",
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: "transform 180ms ease-out"
+      }
+    }
+  }),
+  variants: {
+    indeterminate: style({
+      "@media": {
+        // For reduce motion we show a striped pattern instead of animating
+        "(prefers-reduced-motion: reduce)": {
+          backgroundImage: `repeating-linear-gradient(
+          45deg,
+          transparent,
+          transparent 20px,
+          ${vars.color.primaryDark} 20px,
+          ${vars.color.primaryDark} 40px
+        )`
+        },
+        "(prefers-reduced-motion: no-preference)": {
+          animation: `${indeterminateAnimation} 3s ease-in-out infinite`
+        }
+      }
+    })
+  }
+});
+endFileScope();
+export {
+  progress
+};

package/dist/components/radio.css.cjs

@@ -0,0 +1,63 @@
+"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/radio.css.ts", "@blockle/blocks-theme-momotaro");
+const radio = blocksCore.makeComponentTheme("radio", {
+  base: css.style([
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      inlineSize: 24,
+      blockSize: 24,
+      borderRadius: 12,
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: `background-color ${blocksCore.vars.transition.fast}, box-shadow ${blocksCore.vars.transition.fast}`
+        }
+      },
+      ":hover": {
+        backgroundColor: blocksCore.vars.color.primaryDark
+      },
+      selectors: {
+        "&:has(input:checked):not(:hover)": {
+          backgroundColor: blocksCore.vars.color.primary
+        }
+      }
+    },
+    blocksCore.sprinkles({
+      backgroundColor: "primaryLight"
+    }),
+    helpers_css.focusable
+  ]),
+  icon: css.style({
+    height: 12,
+    width: 12,
+    backgroundColor: "white",
+    borderRadius: "8px",
+    transform: "scale(0)",
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `transform ${blocksCore.vars.transition.normal} ${transitions.bounceOut}`
+      }
+    },
+    selectors: {
+      "input:checked ~ &": {
+        transform: "scale(1)"
+      }
+    }
+  }),
+  label: blocksCore.sprinkles({
+    display: "flex",
+    flexDirection: "row",
+    padding: "xsmall",
+    gap: "medium",
+    cursor: "pointer"
+  })
+});
+fileScope.endFileScope();
+exports.radio = radio;

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

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