@blockle/blocks 0.10.0 → 0.11.0

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

@@ -1,81 +0,0 @@
-"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

@@ -1,82 +0,0 @@
-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/themes/momotaro/components/button.css.cjs

@@ -1,103 +0,0 @@
-"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;

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

@@ -1,104 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { createVar } from "@vanilla-extract/css";
-import { style } from "../../../lib/css/style/style.mjs";
-import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
-import { vars } from "../../../lib/theme/vars.css.mjs";
-import { clickable, focusRingColor } from "./helpers.css.mjs";
-setFileScope("src/themes/momotaro/components/button.css.ts", "@blockle/blocks");
-const intentColor = createVar("intentColor");
-const hoverBackgroundColor = createVar("hoverBackgroundColor");
-const button = makeComponentTheme("button", {
-  base: 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
-      }
-    }
-  }, clickable]),
-  variants: {
-    variant: {
-      solid: style({
-        color: vars.color.white,
-        backgroundColor: intentColor,
-        border: "none"
-      }),
-      outline: style({
-        color: intentColor,
-        borderWidth: "small",
-        borderStyle: "solid",
-        borderColor: intentColor,
-        background: "transparent"
-      }),
-      ghost: style({
-        color: intentColor,
-        background: "transparent"
-      })
-    },
-    size: {
-      small: style({
-        paddingInline: "large",
-        height: 40
-      }),
-      medium: style({
-        paddingInline: "xlarge",
-        height: 56
-      }),
-      large: style({
-        paddingInline: "xlarge",
-        height: 72
-      })
-    },
-    intent: {
-      neutral: style({
-        vars: {
-          [intentColor]: vars.color.primary,
-          [hoverBackgroundColor]: vars.color.primaryLight
-        }
-      }),
-      danger: style({
-        vars: {
-          [intentColor]: vars.color.danger,
-          [hoverBackgroundColor]: "#fff8f7",
-          [focusRingColor]: vars.color.danger
-        }
-      })
-    }
-  },
-  compoundVariants: [{
-    variants: {
-      variant: "solid",
-      intent: "neutral"
-    },
-    style: style({
-      vars: {
-        [hoverBackgroundColor]: vars.color.primaryDark
-      }
-    })
-  }, {
-    variants: {
-      variant: "solid",
-      intent: "danger"
-    },
-    style: style({
-      vars: {
-        [hoverBackgroundColor]: "#f9b1a9"
-      }
-    })
-  }],
-  defaultVariants: {
-    size: "small",
-    variant: "solid",
-    intent: "neutral"
-  }
-});
-endFileScope();
-export {
-  button
-};

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

@@ -1,59 +0,0 @@
-"use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-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");
-const styles_themes_momotaro_components_transitions_cjs = require("./transitions.cjs");
-const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/checkbox.css.ts", "@blockle/blocks");
-const checkbox = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("checkbox", {
-  base: css.style([{
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    inlineSize: 24,
-    blockSize: 24,
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: `background-color ${styles_lib_theme_vars_css_cjs.vars.transition.normal}, box-shadow ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`
-      }
-    },
-    selectors: {
-      "&:hover:not(:has(input:disabled))": {
-        backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryDark
-      },
-      "&:has(input:checked)": {
-        backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primary
-      }
-    }
-  }, styles_lib_css_atoms_sprinkles_css_cjs.atoms({
-    backgroundColor: "primaryLight",
-    borderRadius: "small"
-  }), styles_themes_momotaro_components_helpers_css_cjs.focusable], "checkbox_base"),
-  icon: css.style({
-    inlineSize: "1rem",
-    blockSize: "1rem",
-    color: "white",
-    transform: "scale(0)",
-    selectors: {
-      "input:checked ~ &": {
-        transform: "scale(1)"
-      }
-    },
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: `transform ${styles_lib_theme_vars_css_cjs.vars.transition.normal} ${styles_themes_momotaro_components_transitions_cjs.bounceOut}`
-      }
-    }
-  }, "checkbox_icon"),
-  label: styles_lib_css_atoms_sprinkles_css_cjs.atoms({
-    display: "flex",
-    flexDirection: "row",
-    padding: "xsmall",
-    gap: "medium",
-    cursor: "pointer"
-  })
-});
-fileScope.endFileScope();
-exports.checkbox = checkbox;

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

@@ -1,60 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
-import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
-import { vars } from "../../../lib/theme/vars.css.mjs";
-import { focusable } from "./helpers.css.mjs";
-import { bounceOut } from "./transitions.mjs";
-import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
-setFileScope("src/themes/momotaro/components/checkbox.css.ts", "@blockle/blocks");
-const checkbox = makeComponentTheme("checkbox", {
-  base: style([{
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    inlineSize: 24,
-    blockSize: 24,
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: `background-color ${vars.transition.normal}, box-shadow ${vars.transition.fast}`
-      }
-    },
-    selectors: {
-      "&:hover:not(:has(input:disabled))": {
-        backgroundColor: vars.color.primaryDark
-      },
-      "&:has(input:checked)": {
-        backgroundColor: vars.color.primary
-      }
-    }
-  }, atoms({
-    backgroundColor: "primaryLight",
-    borderRadius: "small"
-  }), focusable], "checkbox_base"),
-  icon: style({
-    inlineSize: "1rem",
-    blockSize: "1rem",
-    color: "white",
-    transform: "scale(0)",
-    selectors: {
-      "input:checked ~ &": {
-        transform: "scale(1)"
-      }
-    },
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: `transform ${vars.transition.normal} ${bounceOut}`
-      }
-    }
-  }, "checkbox_icon"),
-  label: atoms({
-    display: "flex",
-    flexDirection: "row",
-    padding: "xsmall",
-    gap: "medium",
-    cursor: "pointer"
-  })
-});
-endFileScope();
-export {
-  checkbox
-};

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

@@ -1,68 +0,0 @@
-"use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/dialog.css.ts", "@blockle/blocks");
-const dialog = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialog", {
-  dialog: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
-    display: "flex",
-    flexDirection: "column",
-    padding: "gutter",
-    border: "none",
-    overflow: "auto",
-    borderRadius: "medium",
-    boxShadow: "large"
-  }), {
-    maxHeight: "90%",
-    minWidth: "300px",
-    selectors: {
-      "&[data-open]": {
-        transform: "scale(1)"
-      }
-    },
-    // Apply the animation only if the user has not requested reduced motion
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transform: "scale(0.9)",
-        transition: "transform 160ms"
-      }
-    }
-  }], "dialog_dialog"),
-  backdrop: css.style({
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    selectors: {
-      "&[data-open]": {
-        opacity: 1
-      }
-    },
-    // Apply the animation only if the user has not requested reduced motion
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        opacity: 0,
-        transition: "opacity 160ms"
-      }
-    }
-  }, "dialog_backdrop"),
-  variants: {
-    size: {
-      small: css.style({
-        width: "400px",
-        maxWidth: "min(400px, 90%)"
-      }, "dialog_variants_size_small"),
-      medium: css.style({
-        width: "600px",
-        maxWidth: "min(600px, 90%)"
-      }, "dialog_variants_size_medium"),
-      large: css.style({
-        width: "800px",
-        maxWidth: "min(800px, 90%)"
-      }, "dialog_variants_size_large")
-    }
-  },
-  defaultVariants: {
-    size: "small"
-  }
-});
-fileScope.endFileScope();
-exports.dialog = dialog;

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

@@ -1,69 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
-import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
-import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
-setFileScope("src/themes/momotaro/components/dialog.css.ts", "@blockle/blocks");
-const dialog = makeComponentTheme("dialog", {
-  dialog: style([atoms({
-    display: "flex",
-    flexDirection: "column",
-    padding: "gutter",
-    border: "none",
-    overflow: "auto",
-    borderRadius: "medium",
-    boxShadow: "large"
-  }), {
-    maxHeight: "90%",
-    minWidth: "300px",
-    selectors: {
-      "&[data-open]": {
-        transform: "scale(1)"
-      }
-    },
-    // Apply the animation only if the user has not requested reduced motion
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transform: "scale(0.9)",
-        transition: "transform 160ms"
-      }
-    }
-  }], "dialog_dialog"),
-  backdrop: style({
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    selectors: {
-      "&[data-open]": {
-        opacity: 1
-      }
-    },
-    // Apply the animation only if the user has not requested reduced motion
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        opacity: 0,
-        transition: "opacity 160ms"
-      }
-    }
-  }, "dialog_backdrop"),
-  variants: {
-    size: {
-      small: style({
-        width: "400px",
-        maxWidth: "min(400px, 90%)"
-      }, "dialog_variants_size_small"),
-      medium: style({
-        width: "600px",
-        maxWidth: "min(600px, 90%)"
-      }, "dialog_variants_size_medium"),
-      large: style({
-        width: "800px",
-        maxWidth: "min(800px, 90%)"
-      }, "dialog_variants_size_large")
-    }
-  },
-  defaultVariants: {
-    size: "small"
-  }
-});
-endFileScope();
-export {
-  dialog
-};

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

@@ -1,11 +0,0 @@
-"use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/divider.css.ts", "@blockle/blocks");
-const divider = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("divider", {
-  defaultVariants: {
-    color: "textLight"
-  }
-});
-fileScope.endFileScope();
-exports.divider = divider;

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

@@ -1,12 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
-setFileScope("src/themes/momotaro/components/divider.css.ts", "@blockle/blocks");
-const divider = makeComponentTheme("divider", {
-  defaultVariants: {
-    color: "textLight"
-  }
-});
-endFileScope();
-export {
-  divider
-};