@blockle/blocks 0.1.0 → 0.2.1

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

@@ -0,0 +1,46 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles";
+import { unresponsiveProperties, responsiveProperties } from "./atomicProperties.mjs";
+import { breakpointQuery, breakpointNames } from "./breakpoints.mjs";
+setFileScope("src/lib/css/atoms/sprinkles.css.ts?used", "blocks");
+const unresponsiveAtomicProperties = defineProperties({
+  properties: unresponsiveProperties,
+  shorthands: {
+    inset: ["top", "bottom", "left", "right"]
+  }
+});
+const responsiveAtomicProperties = defineProperties({
+  defaultCondition: "mobile",
+  conditions: {
+    mobile: {},
+    tablet: {
+      "@media": breakpointQuery("tablet")
+    },
+    desktop: {
+      "@media": breakpointQuery("desktop")
+    },
+    wide: {
+      "@media": breakpointQuery("wide")
+    }
+  },
+  responsiveArray: breakpointNames,
+  properties: responsiveProperties,
+  shorthands: {
+    margin: ["marginTop", "marginBottom", "marginLeft", "marginRight"],
+    marginX: ["marginLeft", "marginRight"],
+    marginY: ["marginTop", "marginBottom"],
+    padding: ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
+    paddingX: ["paddingLeft", "paddingRight"],
+    paddingY: ["paddingTop", "paddingBottom"],
+    placeItems: ["justifyContent", "alignItems"]
+  }
+});
+const atoms = createSprinkles(
+  unresponsiveAtomicProperties,
+  responsiveAtomicProperties
+  // colorAtomicProperties,
+);
+endFileScope();
+export {
+  atoms
+};

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

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

@@ -0,0 +1,36 @@
+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/makeTheme.cjs

@@ -0,0 +1,10 @@
+"use strict";
+const css = require("@vanilla-extract/css");
+const styles_lib_css_theme_vars_css_cjs = require("./vars.css.cjs");
+const styles_lib_css_theme_makeVanillaTheme_cjs = require("./makeVanillaTheme.cjs");
+const makeTheme = (theme) => {
+  return {
+    vars: css.createTheme(styles_lib_css_theme_vars_css_cjs.vars, styles_lib_css_theme_makeVanillaTheme_cjs.makeVanillaTheme(theme.tokens))
+  };
+};
+exports.makeTheme = makeTheme;

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

@@ -0,0 +1,11 @@
+import { createTheme } from "@vanilla-extract/css";
+import { vars } from "./vars.css.mjs";
+import { makeVanillaTheme } from "./makeVanillaTheme.mjs";
+const makeTheme = (theme) => {
+  return {
+    vars: createTheme(vars, makeVanillaTheme(theme.tokens))
+  };
+};
+export {
+  makeTheme
+};

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

@@ -0,0 +1,16 @@
+"use strict";
+const makeVanillaTheme = (tokens) => {
+  return {
+    space: tokens.space,
+    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
+  };
+};
+exports.makeVanillaTheme = makeVanillaTheme;

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

@@ -0,0 +1,17 @@
+const makeVanillaTheme = (tokens) => {
+  return {
+    space: tokens.space,
+    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
+  };
+};
+export {
+  makeVanillaTheme
+};

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

@@ -0,0 +1,77 @@
+"use strict";
+const tokens = {
+  typography: {
+    fontFamily: {
+      standard: "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"
+    }
+  },
+  space: {
+    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)"
+  },
+  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",
+    caution: "#ff0000",
+    link: "#0000ff"
+  }
+};
+exports.tokens = tokens;

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

@@ -0,0 +1,78 @@
+const tokens = {
+  typography: {
+    fontFamily: {
+      standard: "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"
+    }
+  },
+  space: {
+    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)"
+  },
+  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",
+    caution: "#ff0000",
+    link: "#0000ff"
+  }
+};
+export {
+  tokens
+};

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

@@ -0,0 +1,9 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_theme_makeVanillaTheme_cjs = require("./makeVanillaTheme.cjs");
+const styles_lib_css_theme_tokens_cjs = require("./tokens.cjs");
+fileScope.setFileScope("src/lib/css/theme/vars.css.ts?used", "blocks");
+const vars = css.createThemeContract(styles_lib_css_theme_makeVanillaTheme_cjs.makeVanillaTheme(styles_lib_css_theme_tokens_cjs.tokens));
+fileScope.endFileScope();
+exports.vars = vars;

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

@@ -0,0 +1,10 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { createThemeContract } from "@vanilla-extract/css";
+import { makeVanillaTheme } from "./makeVanillaTheme.mjs";
+import { tokens } from "./tokens.mjs";
+setFileScope("src/lib/css/theme/vars.css.ts?used", "blocks");
+const vars = createThemeContract(makeVanillaTheme(tokens));
+endFileScope();
+export {
+  vars
+};

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

@@ -0,0 +1,11 @@
+"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_tokens_cjs = require("./tokens.cjs");
+fileScope.setFileScope("src/themes/momotaro/momotaroTheme.css.ts?used", "blocks");
+const theme = styles_lib_css_theme_makeTheme_cjs.makeTheme({
+  name: "momotaro",
+  tokens: styles_themes_momotaro_tokens_cjs.tokens
+});
+fileScope.endFileScope();
+exports.theme = theme;

package/dist/styles/themes/momotaro/momotaroTheme.css.mjs

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

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

@@ -0,0 +1,77 @@
+"use strict";
+const tokens = {
+  border: {
+    radius: {
+      small: "4px",
+      medium: "8px",
+      large: "16px",
+      xlarge: "32px"
+    },
+    width: {
+      small: "1px",
+      medium: "2px",
+      large: "4px"
+    }
+  },
+  color: {
+    white: "#fff",
+    black: "#000",
+    body: "#F4F6FA",
+    primaryLight: "#E4DFFF",
+    primary: "#7265E3",
+    primaryDark: "#4D3CAB",
+    secondaryLight: "#7265E3",
+    secondary: "#7FE3F0",
+    secondaryDark: "#4D3CAB",
+    text: "#2D3142",
+    textLight: "#9C9EB9",
+    textDark: "#4C5980",
+    caution: "#FF9B90",
+    link: "#7265E3"
+  },
+  shadow: {
+    small: "0px 4px 8px rgba(0, 0, 0, 0.08)",
+    medium: "0px 8px 16px rgba(0, 0, 0, 0.08)",
+    large: "0px 16px 24px rgba(0, 0, 0, 0.08)"
+  },
+  space: {
+    none: "0px",
+    gutter: "28px",
+    xsmall: "4px",
+    small: "8px",
+    medium: "12px",
+    large: "16px",
+    xlarge: "24px"
+  },
+  transition: {
+    slow: "0.5s",
+    normal: "0.3s",
+    fast: "0.1s"
+  },
+  typography: {
+    fontFamily: {
+      standard: '"Rubik", sans-serif',
+      secondary: '"Rubik", sans-serif'
+    },
+    fontSize: {
+      xsmall: "12px",
+      small: "14px",
+      medium: "16px",
+      large: "20px",
+      xlarge: "24px"
+    },
+    fontWeight: {
+      regular: 400,
+      medium: 500,
+      strong: 700
+    },
+    lineHeight: {
+      xsmall: "1rem",
+      small: "1.25rem",
+      medium: "1.5rem",
+      large: "1.75rem",
+      xlarge: "2rem"
+    }
+  }
+};
+exports.tokens = tokens;

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

@@ -0,0 +1,78 @@
+const tokens = {
+  border: {
+    radius: {
+      small: "4px",
+      medium: "8px",
+      large: "16px",
+      xlarge: "32px"
+    },
+    width: {
+      small: "1px",
+      medium: "2px",
+      large: "4px"
+    }
+  },
+  color: {
+    white: "#fff",
+    black: "#000",
+    body: "#F4F6FA",
+    primaryLight: "#E4DFFF",
+    primary: "#7265E3",
+    primaryDark: "#4D3CAB",
+    secondaryLight: "#7265E3",
+    secondary: "#7FE3F0",
+    secondaryDark: "#4D3CAB",
+    text: "#2D3142",
+    textLight: "#9C9EB9",
+    textDark: "#4C5980",
+    caution: "#FF9B90",
+    link: "#7265E3"
+  },
+  shadow: {
+    small: "0px 4px 8px rgba(0, 0, 0, 0.08)",
+    medium: "0px 8px 16px rgba(0, 0, 0, 0.08)",
+    large: "0px 16px 24px rgba(0, 0, 0, 0.08)"
+  },
+  space: {
+    none: "0px",
+    gutter: "28px",
+    xsmall: "4px",
+    small: "8px",
+    medium: "12px",
+    large: "16px",
+    xlarge: "24px"
+  },
+  transition: {
+    slow: "0.5s",
+    normal: "0.3s",
+    fast: "0.1s"
+  },
+  typography: {
+    fontFamily: {
+      standard: '"Rubik", sans-serif',
+      secondary: '"Rubik", sans-serif'
+    },
+    fontSize: {
+      xsmall: "12px",
+      small: "14px",
+      medium: "16px",
+      large: "20px",
+      xlarge: "24px"
+    },
+    fontWeight: {
+      regular: 400,
+      medium: 500,
+      strong: 700
+    },
+    lineHeight: {
+      xsmall: "1rem",
+      small: "1.25rem",
+      medium: "1.5rem",
+      large: "1.75rem",
+      xlarge: "2rem"
+    }
+  }
+};
+export {
+  tokens
+};

package/dist/themes/momotaro.cjs

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

package/dist/themes/momotaro.d.ts

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

package/dist/themes/momotaro.mjs

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