@blockle/blocks 0.2.3 → 0.3.0

package/dist/reset.css.cjs

@@ -1,5 +1,4 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-require("./styles/lib/css/reset/reset.css.cjs");
 fileScope.setFileScope("src/entries/reset.css.ts", "blocks");
 fileScope.endFileScope();

package/dist/reset.css.mjs

@@ -1,4 +1,3 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import "./styles/lib/css/reset/reset.css.mjs";
 setFileScope("src/entries/reset.css.ts", "blocks");
 endFileScope();

package/dist/styles/components/Button/Button.css.cjs

@@ -0,0 +1,15 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_layers_layers_css_cjs = require("../../lib/css/layers/layers.css.cjs");
+fileScope.setFileScope("src/components/Button/Button.css.ts?used", "blocks");
+const buttonReset = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      all: "unset",
+      cursor: "pointer"
+    }
+  }
+}, "buttonReset");
+fileScope.endFileScope();
+exports.buttonReset = buttonReset;

package/dist/styles/components/Button/Button.css.mjs

@@ -0,0 +1,16 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/Button/Button.css.ts?used", "blocks");
+const buttonReset = style({
+  "@layer": {
+    [blocksLayer]: {
+      all: "unset",
+      cursor: "pointer"
+    }
+  }
+}, "buttonReset");
+endFileScope();
+export {
+  buttonReset
+};

package/dist/styles/lib/css/atoms/index.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/styles/lib/css/atoms/index.mjs

@@ -0,0 +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?used", "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?used", "blocks");
+const blocksLayer = layer("blockle-blocks");
+endFileScope();
+export {
+  blocksLayer
+};

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

@@ -1,37 +1 @@
 "use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-fileScope.setFileScope("src/lib/css/reset/reset.css.ts?used", "blocks");
-css.globalStyle(":where(*, *::before, *::after)", {
-  boxSizing: "inherit"
-});
-css.globalStyle(":where(html)", {
-  lineHeight: 1.5,
-  boxSizing: "border-box",
-  WebkitFontSmoothing: "antialiased"
-});
-css.globalStyle(":where(body)", {
-  margin: 0,
-  padding: 0,
-  fontFamily: "Calibri, sans-serif"
-});
-css.globalStyle(":where(button, input, optgroup, select, textarea)", {
-  fontFamily: "inherit",
-  fontSize: "100%",
-  lineHeight: "inherit",
-  margin: 0,
-  padding: 0
-});
-css.globalStyle(":where(p, ul, ol, pre, blockquote)", {
-  margin: 0,
-  padding: 0
-});
-css.globalStyle(":where(h1, h2, h3, h4, h5, h6)", {
-  margin: 0,
-  padding: 0,
-  fontSize: "inherit"
-});
-css.globalStyle(":where(pre)", {
-  whiteSpace: "pre-wrap"
-});
-fileScope.endFileScope();

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

@@ -1,36 +1 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { globalStyle } from "@vanilla-extract/css";
-setFileScope("src/lib/css/reset/reset.css.ts?used", "blocks");
-globalStyle(":where(*, *::before, *::after)", {
-  boxSizing: "inherit"
-});
-globalStyle(":where(html)", {
-  lineHeight: 1.5,
-  boxSizing: "border-box",
-  WebkitFontSmoothing: "antialiased"
-});
-globalStyle(":where(body)", {
-  margin: 0,
-  padding: 0,
-  fontFamily: "Calibri, sans-serif"
-});
-globalStyle(":where(button, input, optgroup, select, textarea)", {
-  fontFamily: "inherit",
-  fontSize: "100%",
-  lineHeight: "inherit",
-  margin: 0,
-  padding: 0
-});
-globalStyle(":where(p, ul, ol, pre, blockquote)", {
-  margin: 0,
-  padding: 0
-});
-globalStyle(":where(h1, h2, h3, h4, h5, h6)", {
-  margin: 0,
-  padding: 0,
-  fontSize: "inherit"
-});
-globalStyle(":where(pre)", {
-  whiteSpace: "pre-wrap"
-});
-endFileScope();
+

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

@@ -1,7 +1,7 @@
 "use strict";
 const makeVanillaTheme = (tokens) => {
   return {
-    space: tokens.space,
+    space: tokens.spacing,
     borderRadius: tokens.border.radius,
     color: tokens.color,
     borderWidth: tokens.border.width,
@@ -10,7 +10,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
+    }
   };
 };
 exports.makeVanillaTheme = makeVanillaTheme;

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

@@ -1,45 +1,105 @@
 "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: {
-    // ...
-    borderRadius: "9999px"
-  },
+  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: {
-        color: styles_lib_css_theme_vars_css_cjs.vars.color.primary
-      },
-      outline: {},
-      ghost: {},
-      link: {}
+      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: {},
-      medium: {},
-      large: {}
+      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: [
-    // ...
-    {
-      variants: {
-        variant: "solid",
-        size: "small"
-      },
-      style: {
-        // ...
-      }
-    }
+    // Example of compound variants
+    // {
+    //   variants: {
+    //     intent: 'danger',
+    //     variant: 'ghost',
+    //   },
+    //   style: style({
+    //     color: vars.color.danger,
+    //     fontSize: vars.fontSize.small,
+    //     background: 'red',
+    //   }),
+    // },
   ],
   defaultVariants: {
-    // ...
-    variant: "ghost"
+    size: "small",
+    variant: "ghost",
+    intent: "neutral"
   }
 });
 fileScope.endFileScope();

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

@@ -1,44 +1,104 @@
 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: {
-    // ...
-    borderRadius: "9999px"
-  },
+  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: {
-        color: vars.color.primary
-      },
-      outline: {},
-      ghost: {},
-      link: {}
+      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: {},
-      medium: {},
-      large: {}
+      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: [
-    // ...
-    {
-      variants: {
-        variant: "solid",
-        size: "small"
-      },
-      style: {
-        // ...
-      }
-    }
+    // Example of compound variants
+    // {
+    //   variants: {
+    //     intent: 'danger',
+    //     variant: 'ghost',
+    //   },
+    //   style: style({
+    //     color: vars.color.danger,
+    //     fontSize: vars.fontSize.small,
+    //     background: 'red',
+    //   }),
+    // },
   ],
   defaultVariants: {
-    // ...
-    variant: "ghost"
+    size: "small",
+    variant: "ghost",
+    intent: "neutral"
   }
 });
 endFileScope();

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

@@ -1,6 +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
+  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

@@ -1,6 +1,10 @@
 import { button } from "./button.css.mjs";
+import { link } from "./link.css.mjs";
+import { spinner } from "./spinner.css.mjs";
 const components = {
-  button
+  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;