@blockle/blocks 0.11.0 → 0.11.1

package/dist/styles/lib/css/layers/layers.css.cjs

@@ -0,0 +1,7 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+fileScope.setFileScope("src/lib/css/layers/layers.css.ts", "@blockle/blocks");
+const blocksLayer = css.layer("blockle-blocks");
+fileScope.endFileScope();
+exports.blocksLayer = blocksLayer;

package/dist/styles/lib/css/layers/layers.css.mjs

@@ -0,0 +1,8 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { layer } from "@vanilla-extract/css";
+setFileScope("src/lib/css/layers/layers.css.ts", "@blockle/blocks");
+const blocksLayer = layer("blockle-blocks");
+endFileScope();
+export {
+  blocksLayer
+};

package/dist/styles/lib/css/style/style.cjs

@@ -0,0 +1,28 @@
+"use strict";
+const css = require("@vanilla-extract/css");
+const styles_lib_css_atoms_sprinkles_css_cjs = require("../atoms/sprinkles.css.cjs");
+function style(props) {
+  const styleRule = {};
+  const atomClassNames = [];
+  if (Array.isArray(props)) {
+    return props.map((rule) => {
+      if (typeof rule === "string") {
+        return rule;
+      }
+      return style(rule);
+    }).join(" ");
+  }
+  for (const [name, value] of Object.entries(props)) {
+    if (styles_lib_css_atoms_sprinkles_css_cjs.atoms.properties.has(name)) {
+      try {
+        atomClassNames.push(styles_lib_css_atoms_sprinkles_css_cjs.atoms({ [name]: value }));
+      } catch {
+        styleRule[name] = value;
+      }
+    } else {
+      styleRule[name] = value;
+    }
+  }
+  return css.style([styleRule, ...atomClassNames]);
+}
+exports.style = style;

package/dist/styles/lib/css/style/style.mjs

@@ -0,0 +1,29 @@
+import { style as style$1 } from "@vanilla-extract/css";
+import { atoms } from "../atoms/sprinkles.css.mjs";
+function style(props) {
+  const styleRule = {};
+  const atomClassNames = [];
+  if (Array.isArray(props)) {
+    return props.map((rule) => {
+      if (typeof rule === "string") {
+        return rule;
+      }
+      return style(rule);
+    }).join(" ");
+  }
+  for (const [name, value] of Object.entries(props)) {
+    if (atoms.properties.has(name)) {
+      try {
+        atomClassNames.push(atoms({ [name]: value }));
+      } catch {
+        styleRule[name] = value;
+      }
+    } else {
+      styleRule[name] = value;
+    }
+  }
+  return style$1([styleRule, ...atomClassNames]);
+}
+export {
+  style
+};

package/dist/styles/lib/theme/makeComponentTheme.cjs

@@ -0,0 +1,5 @@
+"use strict";
+function makeComponentTheme(component, componentTheme) {
+  return componentTheme;
+}
+exports.makeComponentTheme = makeComponentTheme;

package/dist/styles/lib/theme/makeComponentTheme.mjs

@@ -0,0 +1,6 @@
+function makeComponentTheme(component, componentTheme) {
+  return componentTheme;
+}
+export {
+  makeComponentTheme
+};

package/dist/styles/lib/theme/makeTheme.cjs

@@ -1,27 +1,11 @@
 "use strict";
 const css = require("@vanilla-extract/css");
+const styles_lib_theme_makeVanillaTheme_cjs = require("./makeVanillaTheme.cjs");
 const styles_lib_theme_vars_css_cjs = require("./vars.css.cjs");
-const makeVanillaTheme = (tokens) => {
-  return {
-    space: tokens.spacing,
-    borderRadius: tokens.border.radius,
-    color: tokens.color,
-    borderWidth: tokens.border.width,
-    fontFamily: tokens.typography.fontFamily,
-    fontSize: tokens.typography.fontSize,
-    fontWeight: tokens.typography.fontWeight,
-    lineHeight: tokens.typography.lineHeight,
-    transition: tokens.transition,
-    shadow: tokens.shadow,
-    focus: {
-      boxShadow: tokens.focus.boxShadow
-    }
-  };
-};
 function makeTheme(theme) {
   return {
     name: theme.name,
-    vars: css.createTheme(styles_lib_theme_vars_css_cjs.vars, makeVanillaTheme(theme.tokens)),
+    vars: css.createTheme(styles_lib_theme_vars_css_cjs.vars, styles_lib_theme_makeVanillaTheme_cjs.makeVanillaTheme(theme.tokens)),
     components: theme.components
   };
 }

package/dist/styles/lib/theme/makeTheme.mjs

@@ -1,22 +1,6 @@
 import { createTheme } from "@vanilla-extract/css";
+import { makeVanillaTheme } from "./makeVanillaTheme.mjs";
 import { vars } from "./vars.css.mjs";
-const makeVanillaTheme = (tokens) => {
-  return {
-    space: tokens.spacing,
-    borderRadius: tokens.border.radius,
-    color: tokens.color,
-    borderWidth: tokens.border.width,
-    fontFamily: tokens.typography.fontFamily,
-    fontSize: tokens.typography.fontSize,
-    fontWeight: tokens.typography.fontWeight,
-    lineHeight: tokens.typography.lineHeight,
-    transition: tokens.transition,
-    shadow: tokens.shadow,
-    focus: {
-      boxShadow: tokens.focus.boxShadow
-    }
-  };
-};
 function makeTheme(theme) {
   return {
     name: theme.name,

package/dist/styles/lib/theme/makeVanillaTheme.cjs

@@ -0,0 +1,19 @@
+"use strict";
+const makeVanillaTheme = (tokens) => {
+  return {
+    space: tokens.spacing,
+    borderRadius: tokens.border.radius,
+    color: tokens.color,
+    borderWidth: tokens.border.width,
+    fontFamily: tokens.typography.fontFamily,
+    fontSize: tokens.typography.fontSize,
+    fontWeight: tokens.typography.fontWeight,
+    lineHeight: tokens.typography.lineHeight,
+    transition: tokens.transition,
+    shadow: tokens.shadow,
+    focus: {
+      boxShadow: tokens.focus.boxShadow
+    }
+  };
+};
+exports.makeVanillaTheme = makeVanillaTheme;

package/dist/styles/lib/theme/makeVanillaTheme.mjs

@@ -0,0 +1,20 @@
+const makeVanillaTheme = (tokens) => {
+  return {
+    space: tokens.spacing,
+    borderRadius: tokens.border.radius,
+    color: tokens.color,
+    borderWidth: tokens.border.width,
+    fontFamily: tokens.typography.fontFamily,
+    fontSize: tokens.typography.fontSize,
+    fontWeight: tokens.typography.fontWeight,
+    lineHeight: tokens.typography.lineHeight,
+    transition: tokens.transition,
+    shadow: tokens.shadow,
+    focus: {
+      boxShadow: tokens.focus.boxShadow
+    }
+  };
+};
+export {
+  makeVanillaTheme
+};

package/dist/styles/lib/theme/tokens.cjs

@@ -0,0 +1,81 @@
+"use strict";
+const tokens = {
+  typography: {
+    fontFamily: {
+      body: "Roboto, sans-serif",
+      primary: "Roboto, sans-serif",
+      secondary: "Roboto, sans-serif"
+    },
+    fontSize: {
+      xsmall: "0.75rem",
+      small: "0.875rem",
+      medium: "1rem",
+      large: "1.125rem",
+      xlarge: "1.25rem"
+    },
+    fontWeight: {
+      regular: 400,
+      medium: 500,
+      strong: 700
+    },
+    lineHeight: {
+      xsmall: "1rem",
+      small: "1.25rem",
+      medium: "1.5rem",
+      large: "1.75rem",
+      xlarge: "2rem"
+    }
+  },
+  spacing: {
+    none: 0,
+    gutter: "1rem",
+    xsmall: "0.25rem",
+    small: "0.5rem",
+    medium: "1rem",
+    large: "1.5rem",
+    xlarge: "2rem"
+  },
+  transition: {
+    slow: "0.5s",
+    normal: "0.3s",
+    fast: "0.1s"
+  },
+  border: {
+    radius: {
+      small: "0.25rem",
+      medium: "0.5rem",
+      large: "1rem",
+      xlarge: "2rem"
+    },
+    width: {
+      small: "1px",
+      medium: "2px",
+      large: "4px"
+    }
+  },
+  shadow: {
+    small: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    medium: "0 2px 4px 0 rgba(0, 0, 0, 0.05)",
+    large: "0 4px 8px 0 rgba(0, 0, 0, 0.05)"
+  },
+  focus: {
+    boxShadow: "0 0 0 2px #AF8EFF"
+  },
+  color: {
+    black: "#000000",
+    white: "#ffffff",
+    body: "#ffffff",
+    primaryLight: "#f5f5f5",
+    primary: "#e0e0e0",
+    primaryDark: "#aeaeae",
+    secondaryLight: "#f5f5f5",
+    secondary: "#e0e0e0",
+    secondaryDark: "#aeaeae",
+    text: "#000000",
+    textLight: "#ffffff",
+    textDark: "#aeaeae",
+    danger: "#ff0000",
+    link: "#0000ff"
+  }
+};
+exports.tokens = tokens;

package/dist/styles/lib/theme/tokens.mjs

@@ -0,0 +1,82 @@
+const tokens = {
+  typography: {
+    fontFamily: {
+      body: "Roboto, sans-serif",
+      primary: "Roboto, sans-serif",
+      secondary: "Roboto, sans-serif"
+    },
+    fontSize: {
+      xsmall: "0.75rem",
+      small: "0.875rem",
+      medium: "1rem",
+      large: "1.125rem",
+      xlarge: "1.25rem"
+    },
+    fontWeight: {
+      regular: 400,
+      medium: 500,
+      strong: 700
+    },
+    lineHeight: {
+      xsmall: "1rem",
+      small: "1.25rem",
+      medium: "1.5rem",
+      large: "1.75rem",
+      xlarge: "2rem"
+    }
+  },
+  spacing: {
+    none: 0,
+    gutter: "1rem",
+    xsmall: "0.25rem",
+    small: "0.5rem",
+    medium: "1rem",
+    large: "1.5rem",
+    xlarge: "2rem"
+  },
+  transition: {
+    slow: "0.5s",
+    normal: "0.3s",
+    fast: "0.1s"
+  },
+  border: {
+    radius: {
+      small: "0.25rem",
+      medium: "0.5rem",
+      large: "1rem",
+      xlarge: "2rem"
+    },
+    width: {
+      small: "1px",
+      medium: "2px",
+      large: "4px"
+    }
+  },
+  shadow: {
+    small: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    medium: "0 2px 4px 0 rgba(0, 0, 0, 0.05)",
+    large: "0 4px 8px 0 rgba(0, 0, 0, 0.05)"
+  },
+  focus: {
+    boxShadow: "0 0 0 2px #AF8EFF"
+  },
+  color: {
+    black: "#000000",
+    white: "#ffffff",
+    body: "#ffffff",
+    primaryLight: "#f5f5f5",
+    primary: "#e0e0e0",
+    primaryDark: "#aeaeae",
+    secondaryLight: "#f5f5f5",
+    secondary: "#e0e0e0",
+    secondaryDark: "#aeaeae",
+    text: "#000000",
+    textLight: "#ffffff",
+    textDark: "#aeaeae",
+    danger: "#ff0000",
+    link: "#0000ff"
+  }
+};
+export {
+  tokens
+};

package/dist/styles/lib/theme/vars.css.cjs

@@ -1,81 +1,9 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-require("./vars.css.ts.vanilla.cjs");
+const css = require("@vanilla-extract/css");
+const styles_lib_theme_makeVanillaTheme_cjs = require("./makeVanillaTheme.cjs");
+const styles_lib_theme_tokens_cjs = require("./tokens.cjs");
 fileScope.setFileScope("src/lib/theme/vars.css.ts", "@blockle/blocks");
-var vars = {
-  space: {
-    none: "var(--d5nt60)",
-    gutter: "var(--d5nt61)",
-    xsmall: "var(--d5nt62)",
-    small: "var(--d5nt63)",
-    medium: "var(--d5nt64)",
-    large: "var(--d5nt65)",
-    xlarge: "var(--d5nt66)"
-  },
-  borderRadius: {
-    small: "var(--d5nt67)",
-    medium: "var(--d5nt68)",
-    large: "var(--d5nt69)",
-    xlarge: "var(--d5nt6a)"
-  },
-  color: {
-    black: "var(--d5nt6b)",
-    white: "var(--d5nt6c)",
-    body: "var(--d5nt6d)",
-    primaryLight: "var(--d5nt6e)",
-    primary: "var(--d5nt6f)",
-    primaryDark: "var(--d5nt6g)",
-    secondaryLight: "var(--d5nt6h)",
-    secondary: "var(--d5nt6i)",
-    secondaryDark: "var(--d5nt6j)",
-    text: "var(--d5nt6k)",
-    textLight: "var(--d5nt6l)",
-    textDark: "var(--d5nt6m)",
-    danger: "var(--d5nt6n)",
-    link: "var(--d5nt6o)"
-  },
-  borderWidth: {
-    small: "var(--d5nt6p)",
-    medium: "var(--d5nt6q)",
-    large: "var(--d5nt6r)"
-  },
-  fontFamily: {
-    body: "var(--d5nt6s)",
-    primary: "var(--d5nt6t)",
-    secondary: "var(--d5nt6u)"
-  },
-  fontSize: {
-    xsmall: "var(--d5nt6v)",
-    small: "var(--d5nt6w)",
-    medium: "var(--d5nt6x)",
-    large: "var(--d5nt6y)",
-    xlarge: "var(--d5nt6z)"
-  },
-  fontWeight: {
-    regular: "var(--d5nt610)",
-    medium: "var(--d5nt611)",
-    strong: "var(--d5nt612)"
-  },
-  lineHeight: {
-    xsmall: "var(--d5nt613)",
-    small: "var(--d5nt614)",
-    medium: "var(--d5nt615)",
-    large: "var(--d5nt616)",
-    xlarge: "var(--d5nt617)"
-  },
-  transition: {
-    slow: "var(--d5nt618)",
-    normal: "var(--d5nt619)",
-    fast: "var(--d5nt61a)"
-  },
-  shadow: {
-    small: "var(--d5nt61b)",
-    medium: "var(--d5nt61c)",
-    large: "var(--d5nt61d)"
-  },
-  focus: {
-    boxShadow: "var(--d5nt61e)"
-  }
-};
+const vars = css.createThemeContract(styles_lib_theme_makeVanillaTheme_cjs.makeVanillaTheme(styles_lib_theme_tokens_cjs.tokens));
 fileScope.endFileScope();
 exports.vars = vars;

package/dist/styles/lib/theme/vars.css.mjs

@@ -1,81 +1,9 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import "./vars.css.ts.vanilla.mjs";
+import { createThemeContract } from "@vanilla-extract/css";
+import { makeVanillaTheme } from "./makeVanillaTheme.mjs";
+import { tokens } from "./tokens.mjs";
 setFileScope("src/lib/theme/vars.css.ts", "@blockle/blocks");
-var vars = {
-  space: {
-    none: "var(--d5nt60)",
-    gutter: "var(--d5nt61)",
-    xsmall: "var(--d5nt62)",
-    small: "var(--d5nt63)",
-    medium: "var(--d5nt64)",
-    large: "var(--d5nt65)",
-    xlarge: "var(--d5nt66)"
-  },
-  borderRadius: {
-    small: "var(--d5nt67)",
-    medium: "var(--d5nt68)",
-    large: "var(--d5nt69)",
-    xlarge: "var(--d5nt6a)"
-  },
-  color: {
-    black: "var(--d5nt6b)",
-    white: "var(--d5nt6c)",
-    body: "var(--d5nt6d)",
-    primaryLight: "var(--d5nt6e)",
-    primary: "var(--d5nt6f)",
-    primaryDark: "var(--d5nt6g)",
-    secondaryLight: "var(--d5nt6h)",
-    secondary: "var(--d5nt6i)",
-    secondaryDark: "var(--d5nt6j)",
-    text: "var(--d5nt6k)",
-    textLight: "var(--d5nt6l)",
-    textDark: "var(--d5nt6m)",
-    danger: "var(--d5nt6n)",
-    link: "var(--d5nt6o)"
-  },
-  borderWidth: {
-    small: "var(--d5nt6p)",
-    medium: "var(--d5nt6q)",
-    large: "var(--d5nt6r)"
-  },
-  fontFamily: {
-    body: "var(--d5nt6s)",
-    primary: "var(--d5nt6t)",
-    secondary: "var(--d5nt6u)"
-  },
-  fontSize: {
-    xsmall: "var(--d5nt6v)",
-    small: "var(--d5nt6w)",
-    medium: "var(--d5nt6x)",
-    large: "var(--d5nt6y)",
-    xlarge: "var(--d5nt6z)"
-  },
-  fontWeight: {
-    regular: "var(--d5nt610)",
-    medium: "var(--d5nt611)",
-    strong: "var(--d5nt612)"
-  },
-  lineHeight: {
-    xsmall: "var(--d5nt613)",
-    small: "var(--d5nt614)",
-    medium: "var(--d5nt615)",
-    large: "var(--d5nt616)",
-    xlarge: "var(--d5nt617)"
-  },
-  transition: {
-    slow: "var(--d5nt618)",
-    normal: "var(--d5nt619)",
-    fast: "var(--d5nt61a)"
-  },
-  shadow: {
-    small: "var(--d5nt61b)",
-    medium: "var(--d5nt61c)",
-    large: "var(--d5nt61d)"
-  },
-  focus: {
-    boxShadow: "var(--d5nt61e)"
-  }
-};
+const vars = createThemeContract(makeVanillaTheme(tokens));
 endFileScope();
 export {
   vars

package/dist/styles/themes/momotaro/components/button.css.cjs

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