@blockle/blocks-theme-momotaro 1.0.6 → 3.0.0

package/dist/components/link.css.cjs

@@ -1,56 +0,0 @@
-"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.atoms({
-        color: "primary",
-        fontWeight: "medium"
-      }),
-      secondary: blocksCore.atoms({
-        color: "secondary",
-        fontWeight: "medium"
-      })
-    },
-    underline: css.style({
-      textDecoration: "underline"
-    })
-  },
-  defaultVariants: {
-    variant: "primary"
-  }
-});
-fileScope.endFileScope();
-exports.link = link;

package/dist/components/popover.css.cjs

@@ -1,45 +0,0 @@
-"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.atoms({
-      backgroundColor: "white",
-      borderRadius: "small",
-      boxShadow: "medium",
-      padding: "medium",
-      margin: "small"
-      // Space between the popover and the anchor element
-    }),
-    {
-      width: "max-content",
-      selectors: {
-        "&:popover-open": {
-          transform: "translateY(0) scale(1)",
-          opacity: 1,
-          // @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
-          "@starting-style": {
-            transform: "translateY(12px) scale(0.8)",
-            opacity: 0
-          }
-        }
-      },
-      // Apply the animation only if the user has not requested reduced motion
-      "@media": {
-        "(prefers-reduced-motion: no-preference)": {
-          // Ending style
-          transform: "translateY(12px) scale(0.8)",
-          opacity: 0,
-          transitionBehavior: "allow-discrete",
-          transitionProperty: "opacity, transform, overlay, display",
-          transitionDuration: "100ms"
-        }
-      }
-    }
-  ])
-});
-fileScope.endFileScope();
-exports.popover = popover;

package/dist/components/progress.css.cjs

@@ -1,57 +0,0 @@
-"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.atoms({
-      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/radio.css.cjs

@@ -1,63 +0,0 @@
-"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.atoms({
-      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.atoms({
-    display: "flex",
-    flexDirection: "row",
-    padding: "xsmall",
-    gap: "medium",
-    cursor: "pointer"
-  })
-});
-fileScope.endFileScope();
-exports.radio = radio;

package/dist/components/select.css.cjs

@@ -1,53 +0,0 @@
-"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.atoms({
-      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.atoms({
-          borderWidth: "small",
-          borderColor: "primary"
-        }),
-        {
-          borderStyle: "solid"
-        }
-      ]),
-      solid: css.style({})
-    }
-  },
-  icon: blocksCore.atoms({
-    paddingInline: "large"
-  }),
-  defaultVariants: {
-    variant: "solid"
-  }
-});
-fileScope.endFileScope();
-exports.select = select;

package/dist/components/slider.css.cjs

@@ -1,95 +0,0 @@
-"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.atoms({
-      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/spinner.css.cjs

@@ -1,44 +0,0 @@
-"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/switch.css.cjs

@@ -1,66 +0,0 @@
-"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.atoms({
-      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.atoms({
-      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/tooltip.css.cjs

@@ -1,30 +0,0 @@
-"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.atoms({
-    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/transitions.cjs

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

package/dist/index.cjs

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

package/dist/theme.css.cjs

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-const blocksCore = require("@blockle/blocks-core");
-const index = require("./components/index.cjs");
-const tokens_css = require("./tokens.css.cjs");
-fileScope.setFileScope("src/theme.css.ts", "@blockle/blocks-theme-momotaro");
-const momotaro = blocksCore.makeTheme({
-  name: "momotaro",
-  tokens: tokens_css.tokens,
-  components: index.components
-});
-fileScope.endFileScope();
-exports.momotaro = momotaro;

package/dist/tokens.css.cjs

@@ -1,86 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-const blocksCore = require("@blockle/blocks-core");
-fileScope.setFileScope("src/tokens.css.ts", "@blockle/blocks-theme-momotaro");
-const tokens = {
-  border: {
-    radius: {
-      small: "4px",
-      medium: "8px",
-      large: "16px",
-      xlarge: "32px"
-    },
-    width: {
-      small: "1px",
-      medium: "2px",
-      large: "4px"
-    }
-  },
-  color: {
-    white: "#fff",
-    black: "#000",
-    body: "#F4F6FA",
-    primaryLight: "#E4DFFF",
-    primary: "#7265E3",
-    primaryDark: "#4D3CAB",
-    secondaryLight: "#7CF5CD",
-    secondary: "#7FE3F0",
-    secondaryDark: "#68C6EF",
-    text: "#2D3142",
-    textLight: "#9C9EB9",
-    textDark: "#4C5980",
-    danger: "#FF9B90",
-    link: "#7265E3"
-  },
-  shadow: {
-    small: "0px 4px 8px rgba(0, 0, 0, 0.08)",
-    medium: "0px 8px 16px rgba(0, 0, 0, 0.08)",
-    large: "0px 16px 24px rgba(0, 0, 0, 0.08)"
-  },
-  focus: {
-    boxShadow: "0 0 1px 2px #AF8EFF"
-  },
-  spacing: {
-    none: "0px",
-    gutter: "28px",
-    xsmall: "4px",
-    small: "8px",
-    medium: "12px",
-    large: "16px",
-    xlarge: "24px"
-  },
-  transition: {
-    slow: "240ms",
-    normal: "120ms",
-    fast: "80ms"
-  },
-  typography: {
-    fontFamily: {
-      body: '"Rubik", sans-serif',
-      primary: '"Rubik", sans-serif',
-      secondary: '"Rubik", sans-serif'
-    },
-    fontSize: {
-      xsmall: blocksCore.rem(12),
-      small: blocksCore.rem(14),
-      medium: blocksCore.rem(16),
-      large: blocksCore.rem(20),
-      xlarge: blocksCore.rem(24)
-    },
-    fontWeight: {
-      regular: 400,
-      medium: 500,
-      strong: 700
-    },
-    lineHeight: {
-      xsmall: blocksCore.rem(16),
-      small: blocksCore.rem(20),
-      medium: blocksCore.rem(24),
-      large: blocksCore.rem(28),
-      xlarge: blocksCore.rem(32)
-    }
-  }
-};
-fileScope.endFileScope();
-exports.tokens = tokens;