@blockle/blocks 0.2.2 → 0.3.0

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

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

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

@@ -25,7 +25,7 @@ const tokens = {
       xlarge: "2rem"
     }
   },
-  space: {
+  spacing: {
     none: 0,
     gutter: "1rem",
     xsmall: "0.25rem",
@@ -57,6 +57,9 @@ const tokens = {
     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",
@@ -70,7 +73,7 @@ const tokens = {
     text: "#000000",
     textLight: "#ffffff",
     textDark: "#aeaeae",
-    caution: "#ff0000",
+    danger: "#ff0000",
     link: "#0000ff"
   }
 };

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

@@ -24,7 +24,7 @@ const tokens = {
       xlarge: "2rem"
     }
   },
-  space: {
+  spacing: {
     none: 0,
     gutter: "1rem",
     xsmall: "0.25rem",
@@ -56,6 +56,9 @@ const tokens = {
     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",
@@ -69,7 +72,7 @@ const tokens = {
     text: "#000000",
     textLight: "#ffffff",
     textDark: "#aeaeae",
-    caution: "#ff0000",
+    danger: "#ff0000",
     link: "#0000ff"
   }
 };

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

@@ -0,0 +1,106 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_theme_makeComponentTheme_cjs = require("../../../lib/css/theme/makeComponentTheme.cjs");
+const styles_lib_css_theme_vars_css_cjs = require("../../../lib/css/theme/vars.css.cjs");
+const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
+const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
+const primaryColor = css.createVar("primaryColor");
+const button = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
+  type: "button",
+  base: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+    display: "inline-flex",
+    placeItems: "center",
+    fontSize: "medium",
+    borderRadius: "medium",
+    fontWeight: "medium"
+  }), styles_themes_momotaro_components_helpers_css_cjs.focusable], "button_base"),
+  variants: {
+    // ...
+    // styleVariants could be used to but lacks correct typings atm
+    variant: {
+      solid: css.style({
+        color: styles_lib_css_theme_vars_css_cjs.vars.color.white,
+        backgroundColor: primaryColor,
+        border: "none",
+        selectors: {
+          "&:hover:not(:disabled)": {
+            backgroundColor: styles_lib_css_theme_vars_css_cjs.vars.color.primaryDark
+          }
+        }
+      }, "button_variants_variant_solid"),
+      outline: css.style({
+        color: primaryColor,
+        borderWidth: styles_lib_css_theme_vars_css_cjs.vars.borderWidth.small,
+        borderStyle: "solid",
+        borderColor: primaryColor,
+        background: "transparent",
+        selectors: {
+          "&:hover:not(:disabled)": {
+            backgroundColor: styles_lib_css_theme_vars_css_cjs.vars.color.primaryLight
+          }
+        }
+      }, "button_variants_variant_outline"),
+      ghost: css.style({
+        color: primaryColor,
+        background: "transparent",
+        selectors: {
+          "&:hover:not(:disabled)": {
+            backgroundColor: styles_lib_css_theme_vars_css_cjs.vars.color.primaryLight
+          }
+        }
+      }, "button_variants_variant_ghost")
+    },
+    size: {
+      small: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+        paddingX: "large"
+      }), {
+        height: 40
+      }], "button_variants_size_small"),
+      medium: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+        paddingX: "xlarge"
+      }), {
+        height: 56
+      }], "button_variants_size_medium"),
+      large: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+        paddingX: "xlarge"
+      }), {
+        height: 72
+      }], "button_variants_size_large")
+    },
+    intent: {
+      neutral: css.style({
+        vars: {
+          [primaryColor]: styles_lib_css_theme_vars_css_cjs.vars.color.primary
+        }
+      }, "button_variants_intent_neutral"),
+      danger: css.style({
+        vars: {
+          [primaryColor]: styles_lib_css_theme_vars_css_cjs.vars.color.danger
+        }
+      }, "button_variants_intent_danger")
+    }
+  },
+  compoundVariants: [
+    // Example of compound variants
+    // {
+    //   variants: {
+    //     intent: 'danger',
+    //     variant: 'ghost',
+    //   },
+    //   style: style({
+    //     color: vars.color.danger,
+    //     fontSize: vars.fontSize.small,
+    //     background: 'red',
+    //   }),
+    // },
+  ],
+  defaultVariants: {
+    size: "small",
+    variant: "ghost",
+    intent: "neutral"
+  }
+});
+fileScope.endFileScope();
+exports.button = button;

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

@@ -0,0 +1,107 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { createVar, style } from "@vanilla-extract/css";
+import { makeComponentTheme } from "../../../lib/css/theme/makeComponentTheme.mjs";
+import { vars } from "../../../lib/css/theme/vars.css.mjs";
+import { focusable } from "./helpers.css.mjs";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
+const primaryColor = createVar("primaryColor");
+const button = makeComponentTheme({
+  type: "button",
+  base: style([atoms({
+    display: "inline-flex",
+    placeItems: "center",
+    fontSize: "medium",
+    borderRadius: "medium",
+    fontWeight: "medium"
+  }), focusable], "button_base"),
+  variants: {
+    // ...
+    // styleVariants could be used to but lacks correct typings atm
+    variant: {
+      solid: style({
+        color: vars.color.white,
+        backgroundColor: primaryColor,
+        border: "none",
+        selectors: {
+          "&:hover:not(:disabled)": {
+            backgroundColor: vars.color.primaryDark
+          }
+        }
+      }, "button_variants_variant_solid"),
+      outline: style({
+        color: primaryColor,
+        borderWidth: vars.borderWidth.small,
+        borderStyle: "solid",
+        borderColor: primaryColor,
+        background: "transparent",
+        selectors: {
+          "&:hover:not(:disabled)": {
+            backgroundColor: vars.color.primaryLight
+          }
+        }
+      }, "button_variants_variant_outline"),
+      ghost: style({
+        color: primaryColor,
+        background: "transparent",
+        selectors: {
+          "&:hover:not(:disabled)": {
+            backgroundColor: vars.color.primaryLight
+          }
+        }
+      }, "button_variants_variant_ghost")
+    },
+    size: {
+      small: style([atoms({
+        paddingX: "large"
+      }), {
+        height: 40
+      }], "button_variants_size_small"),
+      medium: style([atoms({
+        paddingX: "xlarge"
+      }), {
+        height: 56
+      }], "button_variants_size_medium"),
+      large: style([atoms({
+        paddingX: "xlarge"
+      }), {
+        height: 72
+      }], "button_variants_size_large")
+    },
+    intent: {
+      neutral: style({
+        vars: {
+          [primaryColor]: vars.color.primary
+        }
+      }, "button_variants_intent_neutral"),
+      danger: style({
+        vars: {
+          [primaryColor]: vars.color.danger
+        }
+      }, "button_variants_intent_danger")
+    }
+  },
+  compoundVariants: [
+    // Example of compound variants
+    // {
+    //   variants: {
+    //     intent: 'danger',
+    //     variant: 'ghost',
+    //   },
+    //   style: style({
+    //     color: vars.color.danger,
+    //     fontSize: vars.fontSize.small,
+    //     background: 'red',
+    //   }),
+    // },
+  ],
+  defaultVariants: {
+    size: "small",
+    variant: "ghost",
+    intent: "neutral"
+  }
+});
+endFileScope();
+export {
+  button
+};

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

@@ -0,0 +1,26 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_theme_vars_css_cjs = require("../../../lib/css/theme/vars.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/helpers.css.ts?used", "blocks");
+const focusable = css.style({
+  ":focus-visible": {
+    outline: "2px solid transparent",
+    outlineOffset: "2px",
+    boxShadow: styles_lib_css_theme_vars_css_cjs.vars.focus.boxShadow,
+    transitionDuration: styles_lib_css_theme_vars_css_cjs.vars.transition.fast,
+    transitionProperty: "box-shadow"
+  },
+  ":disabled": {
+    opacity: 0.5,
+    cursor: "auto"
+  },
+  // TODO This is for buttons?
+  selectors: {
+    "&:active:not(:disabled)": {
+      transform: "scale(0.9)"
+    }
+  }
+}, "focusable");
+fileScope.endFileScope();
+exports.focusable = focusable;

package/dist/styles/themes/momotaro/components/helpers.css.mjs

@@ -0,0 +1,27 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { vars } from "../../../lib/css/theme/vars.css.mjs";
+setFileScope("src/themes/momotaro/components/helpers.css.ts?used", "blocks");
+const focusable = style({
+  ":focus-visible": {
+    outline: "2px solid transparent",
+    outlineOffset: "2px",
+    boxShadow: vars.focus.boxShadow,
+    transitionDuration: vars.transition.fast,
+    transitionProperty: "box-shadow"
+  },
+  ":disabled": {
+    opacity: 0.5,
+    cursor: "auto"
+  },
+  // TODO This is for buttons?
+  selectors: {
+    "&:active:not(:disabled)": {
+      transform: "scale(0.9)"
+    }
+  }
+}, "focusable");
+endFileScope();
+export {
+  focusable
+};

package/dist/styles/themes/momotaro/components/index.cjs

@@ -0,0 +1,10 @@
+"use strict";
+const styles_themes_momotaro_components_button_css_cjs = require("./button.css.cjs");
+const styles_themes_momotaro_components_link_css_cjs = require("./link.css.cjs");
+const styles_themes_momotaro_components_spinner_css_cjs = require("./spinner.css.cjs");
+const components = {
+  button: styles_themes_momotaro_components_button_css_cjs.button,
+  link: styles_themes_momotaro_components_link_css_cjs.link,
+  spinner: styles_themes_momotaro_components_spinner_css_cjs.spinner
+};
+exports.components = components;

package/dist/styles/themes/momotaro/components/index.mjs

@@ -0,0 +1,11 @@
+import { button } from "./button.css.mjs";
+import { link } from "./link.css.mjs";
+import { spinner } from "./spinner.css.mjs";
+const components = {
+  button,
+  link,
+  spinner
+};
+export {
+  components
+};

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

@@ -0,0 +1,47 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_theme_makeComponentTheme_cjs = require("../../../lib/css/theme/makeComponentTheme.cjs");
+const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/link.css.ts?used", "blocks");
+const link = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
+  type: "link",
+  base: css.style({
+    outline: "none",
+    border: "none",
+    textDecoration: "none",
+    background: "transparent",
+    ":hover": {
+      textDecoration: "underline"
+    },
+    ":focus-visible": {
+      textDecoration: "underline"
+    },
+    cursor: "pointer"
+  }, "link_base"),
+  variants: {
+    variant: {
+      inherit: css.style({
+        color: "inherit",
+        fontWeight: "inherit"
+      }, "link_variants_variant_inherit"),
+      primary: styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+        color: "primary",
+        fontWeight: "medium"
+      }),
+      secondary: styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+        color: "secondary",
+        fontWeight: "medium"
+      })
+    },
+    underline: css.style({
+      textDecoration: "underline"
+    }, "link_variants_underline")
+  },
+  defaultVariants: {
+    variant: "primary",
+    underline: true
+  }
+});
+fileScope.endFileScope();
+exports.link = link;

package/dist/styles/themes/momotaro/components/link.css.mjs

@@ -0,0 +1,48 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { makeComponentTheme } from "../../../lib/css/theme/makeComponentTheme.mjs";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+setFileScope("src/themes/momotaro/components/link.css.ts?used", "blocks");
+const link = makeComponentTheme({
+  type: "link",
+  base: style({
+    outline: "none",
+    border: "none",
+    textDecoration: "none",
+    background: "transparent",
+    ":hover": {
+      textDecoration: "underline"
+    },
+    ":focus-visible": {
+      textDecoration: "underline"
+    },
+    cursor: "pointer"
+  }, "link_base"),
+  variants: {
+    variant: {
+      inherit: style({
+        color: "inherit",
+        fontWeight: "inherit"
+      }, "link_variants_variant_inherit"),
+      primary: atoms({
+        color: "primary",
+        fontWeight: "medium"
+      }),
+      secondary: atoms({
+        color: "secondary",
+        fontWeight: "medium"
+      })
+    },
+    underline: style({
+      textDecoration: "underline"
+    }, "link_variants_underline")
+  },
+  defaultVariants: {
+    variant: "primary",
+    underline: true
+  }
+});
+endFileScope();
+export {
+  link
+};

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

@@ -0,0 +1,44 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_theme_makeComponentTheme_cjs = require("../../../lib/css/theme/makeComponentTheme.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/spinner.css.ts?used", "blocks");
+const spinAnimation = css.keyframes({
+  "0%": {
+    transform: "rotate(0deg)"
+  },
+  "100%": {
+    transform: "rotate(360deg)"
+  }
+}, "spinAnimation");
+const spinner = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
+  type: "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`
+  }, "spinner_base"),
+  variants: {
+    // note: colors are handled by atoms
+    size: {
+      small: css.style({
+        width: 16
+      }, "spinner_variants_size_small"),
+      medium: css.style({
+        width: 24
+      }, "spinner_variants_size_medium"),
+      large: css.style({
+        width: 32
+      }, "spinner_variants_size_large")
+    }
+  },
+  defaultVariants: {
+    size: "small"
+  }
+});
+fileScope.endFileScope();
+exports.spinner = spinner;

package/dist/styles/themes/momotaro/components/spinner.css.mjs

@@ -0,0 +1,45 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { keyframes, style } from "@vanilla-extract/css";
+import { makeComponentTheme } from "../../../lib/css/theme/makeComponentTheme.mjs";
+setFileScope("src/themes/momotaro/components/spinner.css.ts?used", "blocks");
+const spinAnimation = keyframes({
+  "0%": {
+    transform: "rotate(0deg)"
+  },
+  "100%": {
+    transform: "rotate(360deg)"
+  }
+}, "spinAnimation");
+const spinner = makeComponentTheme({
+  type: "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`
+  }, "spinner_base"),
+  variants: {
+    // note: colors are handled by atoms
+    size: {
+      small: style({
+        width: 16
+      }, "spinner_variants_size_small"),
+      medium: style({
+        width: 24
+      }, "spinner_variants_size_medium"),
+      large: style({
+        width: 32
+      }, "spinner_variants_size_large")
+    }
+  },
+  defaultVariants: {
+    size: "small"
+  }
+});
+endFileScope();
+export {
+  spinner
+};

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

@@ -0,0 +1,13 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const styles_lib_css_theme_makeTheme_cjs = require("../../lib/css/theme/makeTheme.cjs");
+const styles_themes_momotaro_components_index_cjs = require("./components/index.cjs");
+const styles_themes_momotaro_tokens_cjs = require("./tokens.cjs");
+fileScope.setFileScope("src/themes/momotaro/momotaro.css.ts?used", "blocks");
+const momotaro = styles_lib_css_theme_makeTheme_cjs.makeTheme({
+  name: "momotaro",
+  tokens: styles_themes_momotaro_tokens_cjs.tokens,
+  components: styles_themes_momotaro_components_index_cjs.components
+});
+fileScope.endFileScope();
+exports.momotaro = momotaro;

package/dist/styles/themes/momotaro/{momotaroTheme.css.mjs → momotaro.css.mjs}

@@ -1,12 +1,14 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { makeTheme } from "../../lib/css/theme/makeTheme.mjs";
+import { components } from "./components/index.mjs";
 import { tokens } from "./tokens.mjs";
-setFileScope("src/themes/momotaro/momotaroTheme.css.ts?used", "blocks");
-const theme = makeTheme({
+setFileScope("src/themes/momotaro/momotaro.css.ts?used", "blocks");
+const momotaro = makeTheme({
   name: "momotaro",
-  tokens
+  tokens,
+  components
 });
 endFileScope();
 export {
-  theme
+  momotaro
 };

package/dist/styles/themes/momotaro/tokens.cjs

@@ -26,7 +26,7 @@ const tokens = {
     text: "#2D3142",
     textLight: "#9C9EB9",
     textDark: "#4C5980",
-    caution: "#FF9B90",
+    danger: "#FF9B90",
     link: "#7265E3"
   },
   shadow: {
@@ -34,7 +34,10 @@ const tokens = {
     medium: "0px 8px 16px rgba(0, 0, 0, 0.08)",
     large: "0px 16px 24px rgba(0, 0, 0, 0.08)"
   },
-  space: {
+  focus: {
+    boxShadow: "0 0 4px 2px #AF8EFF"
+  },
+  spacing: {
     none: "0px",
     gutter: "28px",
     xsmall: "4px",

package/dist/styles/themes/momotaro/tokens.mjs

@@ -25,7 +25,7 @@ const tokens = {
     text: "#2D3142",
     textLight: "#9C9EB9",
     textDark: "#4C5980",
-    caution: "#FF9B90",
+    danger: "#FF9B90",
     link: "#7265E3"
   },
   shadow: {
@@ -33,7 +33,10 @@ const tokens = {
     medium: "0px 8px 16px rgba(0, 0, 0, 0.08)",
     large: "0px 16px 24px rgba(0, 0, 0, 0.08)"
   },
-  space: {
+  focus: {
+    boxShadow: "0 0 4px 2px #AF8EFF"
+  },
+  spacing: {
     none: "0px",
     gutter: "28px",
     xsmall: "4px",

package/dist/themes/momotaro.cjs

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

package/dist/themes/momotaro.d.ts

@@ -1 +1 @@
-export { theme } from '../reset.css.js';
+export { momotaro } from '../momotaro.chunk.js';

package/dist/themes/momotaro.mjs

@@ -1,4 +1,4 @@
-import { theme } from "../styles/themes/momotaro/momotaroTheme.css.mjs";
+import { momotaro } from "../styles/themes/momotaro/momotaro.css.mjs";
 export {
-  theme
+  momotaro
 };