@blockle/blocks 0.2.3 → 0.3.1

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;

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/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",