@blockle/blocks-theme-momotaro 1.0.0

package/dist/components/radio.css.js

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

package/dist/components/select.css.cjs

@@ -0,0 +1,53 @@
+"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/select.css.ts", "@blockle/blocks-theme-momotaro");
+const select = blocksCore.makeComponentTheme("select", {
+  select: css.style([
+    blocksCore.sprinkles({
+      color: "text",
+      padding: "large",
+      backgroundColor: "white",
+      borderRadius: "medium",
+      boxShadow: "medium"
+    }),
+    {
+      border: "none",
+      outline: "none",
+      minHeight: 56,
+      transitionDuration: blocksCore.vars.transition.fast,
+      transitionProperty: "box-shadow",
+      ":focus-within": {
+        outline: "2px solid transparent",
+        outlineOffset: "2px",
+        boxShadow: `${blocksCore.vars.shadow.small}, ${blocksCore.vars.focus.boxShadow}`
+      }
+    },
+    helpers_css.focusable
+  ]),
+  variants: {
+    variant: {
+      outline: css.style([
+        blocksCore.sprinkles({
+          borderWidth: "small",
+          borderColor: "primary"
+        }),
+        {
+          borderStyle: "solid"
+        }
+      ]),
+      solid: css.style({})
+    }
+  },
+  icon: css.style({
+    paddingInline: "large"
+  }),
+  defaultVariants: {
+    variant: "solid"
+  }
+});
+fileScope.endFileScope();
+exports.select = select;

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

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

package/dist/components/select.css.js

@@ -0,0 +1,53 @@
+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";
+setFileScope("src/components/select.css.ts", "@blockle/blocks-theme-momotaro");
+const select = makeComponentTheme("select", {
+  select: style([
+    sprinkles({
+      color: "text",
+      padding: "large",
+      backgroundColor: "white",
+      borderRadius: "medium",
+      boxShadow: "medium"
+    }),
+    {
+      border: "none",
+      outline: "none",
+      minHeight: 56,
+      transitionDuration: vars.transition.fast,
+      transitionProperty: "box-shadow",
+      ":focus-within": {
+        outline: "2px solid transparent",
+        outlineOffset: "2px",
+        boxShadow: `${vars.shadow.small}, ${vars.focus.boxShadow}`
+      }
+    },
+    focusable
+  ]),
+  variants: {
+    variant: {
+      outline: style([
+        sprinkles({
+          borderWidth: "small",
+          borderColor: "primary"
+        }),
+        {
+          borderStyle: "solid"
+        }
+      ]),
+      solid: style({})
+    }
+  },
+  icon: style({
+    paddingInline: "large"
+  }),
+  defaultVariants: {
+    variant: "solid"
+  }
+});
+endFileScope();
+export {
+  select
+};

package/dist/components/slider.css.cjs

@@ -0,0 +1,95 @@
+"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/slider.css.ts", "@blockle/blocks-theme-momotaro");
+const trackBackground = css.createVar();
+const filledTrackBackground = css.createVar();
+const thumbBackground = css.createVar();
+const thumbActive = css.createVar();
+const slider = blocksCore.makeComponentTheme("slider", {
+  base: css.style({
+    blockSize: "20px"
+  }),
+  track: css.style([
+    blocksCore.sprinkles({
+      borderRadius: "small"
+    }),
+    {
+      blockSize: "4px",
+      backgroundColor: trackBackground
+    }
+  ]),
+  filledTrack: css.style({
+    backgroundColor: filledTrackBackground
+  }),
+  thumb: css.style([
+    {
+      backgroundColor: thumbBackground,
+      borderRadius: "50%",
+      height: "16px",
+      width: "16px",
+      boxShadow: `0 0 0 0px color-mix(in srgb,  ${blocksCore.vars.color.primaryLight}, transparent 0%)`,
+      vars: {
+        [thumbActive]: `0 0 0 8px color-mix(in srgb,  ${blocksCore.vars.color.primaryLight}, transparent 20%)`
+      },
+      ":hover": {
+        boxShadow: thumbActive
+      },
+      ":focus-visible": {
+        boxShadow: thumbActive
+      },
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: "box-shadow 0.2s"
+        }
+      }
+    },
+    helpers_css.focusable
+  ]),
+  variants: {
+    size: {
+      small: css.style({
+        inlineSize: "100px"
+      }),
+      medium: css.style({
+        inlineSize: "200px"
+      }),
+      large: css.style({
+        inlineSize: "300px"
+      })
+    },
+    colorScheme: {
+      primary: css.style({
+        vars: {
+          [trackBackground]: blocksCore.vars.color.primaryLight,
+          [filledTrackBackground]: blocksCore.vars.color.primary,
+          [thumbBackground]: blocksCore.vars.color.primary
+        }
+      }),
+      secondary: css.style({
+        vars: {
+          [trackBackground]: blocksCore.vars.color.primaryLight,
+          [filledTrackBackground]: blocksCore.vars.color.secondary,
+          [thumbBackground]: blocksCore.vars.color.secondary
+        }
+      })
+    },
+    disabled: css.style({
+      pointerEvents: "none",
+      vars: {
+        [trackBackground]: "#c0c0c0",
+        [filledTrackBackground]: "#ccc",
+        [thumbBackground]: "#c0c0c0"
+      }
+    })
+  },
+  defaultVariants: {
+    size: "medium",
+    colorScheme: "primary"
+  }
+});
+fileScope.endFileScope();
+exports.slider = slider;

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

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

package/dist/components/slider.css.js

@@ -0,0 +1,95 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { makeComponentTheme, vars, sprinkles } from "@blockle/blocks-core";
+import { style, createVar } from "@vanilla-extract/css";
+import { focusable } from "./helpers.css.js";
+setFileScope("src/components/slider.css.ts", "@blockle/blocks-theme-momotaro");
+const trackBackground = createVar();
+const filledTrackBackground = createVar();
+const thumbBackground = createVar();
+const thumbActive = createVar();
+const slider = makeComponentTheme("slider", {
+  base: style({
+    blockSize: "20px"
+  }),
+  track: style([
+    sprinkles({
+      borderRadius: "small"
+    }),
+    {
+      blockSize: "4px",
+      backgroundColor: trackBackground
+    }
+  ]),
+  filledTrack: style({
+    backgroundColor: filledTrackBackground
+  }),
+  thumb: style([
+    {
+      backgroundColor: thumbBackground,
+      borderRadius: "50%",
+      height: "16px",
+      width: "16px",
+      boxShadow: `0 0 0 0px color-mix(in srgb,  ${vars.color.primaryLight}, transparent 0%)`,
+      vars: {
+        [thumbActive]: `0 0 0 8px color-mix(in srgb,  ${vars.color.primaryLight}, transparent 20%)`
+      },
+      ":hover": {
+        boxShadow: thumbActive
+      },
+      ":focus-visible": {
+        boxShadow: thumbActive
+      },
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: "box-shadow 0.2s"
+        }
+      }
+    },
+    focusable
+  ]),
+  variants: {
+    size: {
+      small: style({
+        inlineSize: "100px"
+      }),
+      medium: style({
+        inlineSize: "200px"
+      }),
+      large: style({
+        inlineSize: "300px"
+      })
+    },
+    colorScheme: {
+      primary: style({
+        vars: {
+          [trackBackground]: vars.color.primaryLight,
+          [filledTrackBackground]: vars.color.primary,
+          [thumbBackground]: vars.color.primary
+        }
+      }),
+      secondary: style({
+        vars: {
+          [trackBackground]: vars.color.primaryLight,
+          [filledTrackBackground]: vars.color.secondary,
+          [thumbBackground]: vars.color.secondary
+        }
+      })
+    },
+    disabled: style({
+      pointerEvents: "none",
+      vars: {
+        [trackBackground]: "#c0c0c0",
+        [filledTrackBackground]: "#ccc",
+        [thumbBackground]: "#c0c0c0"
+      }
+    })
+  },
+  defaultVariants: {
+    size: "medium",
+    colorScheme: "primary"
+  }
+});
+endFileScope();
+export {
+  slider
+};

package/dist/components/spinner.css.cjs

@@ -0,0 +1,44 @@
+"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/spinner.css.ts", "@blockle/blocks-theme-momotaro");
+const spinAnimation = css.keyframes({
+  "0%": {
+    transform: "rotate(0deg)"
+  },
+  "100%": {
+    transform: "rotate(360deg)"
+  }
+});
+const spinner = blocksCore.makeComponentTheme("spinner", {
+  base: css.style({
+    aspectRatio: "1 / 1",
+    overflow: "hidden",
+    borderRadius: "50%",
+    borderWidth: "3px",
+    borderStyle: "solid",
+    borderColor: "currentColor transparent currentColor transparent",
+    animation: `${spinAnimation} 1.2s linear infinite`
+  }),
+  variants: {
+    // note: colors are handled by atoms
+    size: {
+      small: css.style({
+        width: 16
+      }),
+      medium: css.style({
+        width: 24
+      }),
+      large: css.style({
+        width: 32
+      })
+    }
+  },
+  defaultVariants: {
+    size: "small"
+  }
+});
+fileScope.endFileScope();
+exports.spinner = spinner;

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

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

package/dist/components/spinner.css.js

@@ -0,0 +1,44 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { makeComponentTheme } from "@blockle/blocks-core";
+import { style, keyframes } from "@vanilla-extract/css";
+setFileScope("src/components/spinner.css.ts", "@blockle/blocks-theme-momotaro");
+const spinAnimation = keyframes({
+  "0%": {
+    transform: "rotate(0deg)"
+  },
+  "100%": {
+    transform: "rotate(360deg)"
+  }
+});
+const spinner = makeComponentTheme("spinner", {
+  base: style({
+    aspectRatio: "1 / 1",
+    overflow: "hidden",
+    borderRadius: "50%",
+    borderWidth: "3px",
+    borderStyle: "solid",
+    borderColor: "currentColor transparent currentColor transparent",
+    animation: `${spinAnimation} 1.2s linear infinite`
+  }),
+  variants: {
+    // note: colors are handled by atoms
+    size: {
+      small: style({
+        width: 16
+      }),
+      medium: style({
+        width: 24
+      }),
+      large: style({
+        width: 32
+      })
+    }
+  },
+  defaultVariants: {
+    size: "small"
+  }
+});
+endFileScope();
+export {
+  spinner
+};

package/dist/components/switch.css.cjs

@@ -0,0 +1,66 @@
+"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/switch.css.ts", "@blockle/blocks-theme-momotaro");
+const activeScaleFactor = css.createVar();
+const switchTheme = blocksCore.makeComponentTheme("switch", {
+  base: css.style([
+    blocksCore.sprinkles({
+      borderRadius: "xlarge",
+      backgroundColor: "textLight"
+    }),
+    {
+      width: 52,
+      height: 32,
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: `background-color 120ms linear, box-shadow ${blocksCore.vars.transition.fast}`
+        }
+      },
+      selectors: {
+        '&[data-checked="true"]': {
+          backgroundColor: blocksCore.vars.color.secondary
+        }
+      },
+      // Scale the switch when it's `:active`
+      vars: {
+        [activeScaleFactor]: "1"
+      },
+      ":active": {
+        vars: {
+          [activeScaleFactor]: "0.96"
+        }
+      }
+    },
+    helpers_css.focusable
+  ]),
+  slider: css.style([
+    blocksCore.sprinkles({
+      borderRadius: "xlarge"
+    }),
+    {
+      width: 24,
+      height: 24,
+      top: 4,
+      left: 4,
+      transform: `translateX(0) scale(calc(0.9 * ${activeScaleFactor}))`,
+      position: "absolute",
+      backgroundColor: "white",
+      selectors: {
+        '&[data-checked="true"]': {
+          transform: `translateX(20px) scale(${activeScaleFactor})`
+        }
+      },
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: "transform 120ms ease-out"
+        }
+      }
+    }
+  ])
+});
+fileScope.endFileScope();
+exports.switchTheme = switchTheme;

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

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

package/dist/components/switch.css.js

@@ -0,0 +1,66 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { makeComponentTheme, sprinkles, vars } from "@blockle/blocks-core";
+import { style, createVar } from "@vanilla-extract/css";
+import { focusable } from "./helpers.css.js";
+setFileScope("src/components/switch.css.ts", "@blockle/blocks-theme-momotaro");
+const activeScaleFactor = createVar();
+const switchTheme = makeComponentTheme("switch", {
+  base: style([
+    sprinkles({
+      borderRadius: "xlarge",
+      backgroundColor: "textLight"
+    }),
+    {
+      width: 52,
+      height: 32,
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: `background-color 120ms linear, box-shadow ${vars.transition.fast}`
+        }
+      },
+      selectors: {
+        '&[data-checked="true"]': {
+          backgroundColor: vars.color.secondary
+        }
+      },
+      // Scale the switch when it's `:active`
+      vars: {
+        [activeScaleFactor]: "1"
+      },
+      ":active": {
+        vars: {
+          [activeScaleFactor]: "0.96"
+        }
+      }
+    },
+    focusable
+  ]),
+  slider: style([
+    sprinkles({
+      borderRadius: "xlarge"
+    }),
+    {
+      width: 24,
+      height: 24,
+      top: 4,
+      left: 4,
+      transform: `translateX(0) scale(calc(0.9 * ${activeScaleFactor}))`,
+      position: "absolute",
+      backgroundColor: "white",
+      selectors: {
+        '&[data-checked="true"]': {
+          transform: `translateX(20px) scale(${activeScaleFactor})`
+        }
+      },
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: "transform 120ms ease-out"
+        }
+      }
+    }
+  ])
+});
+endFileScope();
+export {
+  switchTheme
+};

package/dist/components/tooltip.css.cjs

@@ -0,0 +1,31 @@
+"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/tooltip.css.ts", "@blockle/blocks-theme-momotaro");
+const tooltip = blocksCore.makeComponentTheme("tooltip", {
+  base: blocksCore.sprinkles({
+    backgroundColor: "primary",
+    padding: "small"
+  }),
+  variants: {
+    colorScheme: {
+      primary: css.style({
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        boxShadow: "0 0 0 1px rgba(255, 255, 255, 0.1)",
+        color: "white"
+      }),
+      secondary: css.style({
+        backgroundColor: "rgba(255, 255, 255, 0.8)",
+        boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1)",
+        color: "black"
+      })
+    }
+  },
+  defaultVariants: {
+    colorScheme: "primary"
+  }
+});
+fileScope.endFileScope();
+exports.tooltip = tooltip;

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

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

package/dist/components/tooltip.css.js

@@ -0,0 +1,31 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { makeComponentTheme, sprinkles } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/tooltip.css.ts", "@blockle/blocks-theme-momotaro");
+const tooltip = makeComponentTheme("tooltip", {
+  base: sprinkles({
+    backgroundColor: "primary",
+    padding: "small"
+  }),
+  variants: {
+    colorScheme: {
+      primary: style({
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        boxShadow: "0 0 0 1px rgba(255, 255, 255, 0.1)",
+        color: "white"
+      }),
+      secondary: style({
+        backgroundColor: "rgba(255, 255, 255, 0.8)",
+        boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1)",
+        color: "black"
+      })
+    }
+  },
+  defaultVariants: {
+    colorScheme: "primary"
+  }
+});
+endFileScope();
+export {
+  tooltip
+};

package/dist/components/transitions.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const bounceOut = "cubic-bezier(.65,.36,.55,1.65)";
+exports.bounceOut = bounceOut;

package/dist/components/transitions.d.ts

@@ -0,0 +1 @@
+export declare const bounceOut = "cubic-bezier(.65,.36,.55,1.65)";

package/dist/components/transitions.js

@@ -0,0 +1,4 @@
+const bounceOut = "cubic-bezier(.65,.36,.55,1.65)";
+export {
+  bounceOut
+};

package/dist/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const momotaro_css = require("./momotaro.css.cjs");
+exports.momotaro = momotaro_css.momotaro;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { momotaro } from './momotaro.css';