@blockle/blocks 0.1.0 → 0.2.0

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

@@ -0,0 +1,36 @@
+"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.15,
+  boxSizing: "border-box"
+});
+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,35 @@
+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.15,
+  boxSizing: "border-box"
+});
+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,15 @@
+"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,
+    transition: tokens.transition,
+    shadow: tokens.shadow
+  };
+};
+exports.makeVanillaTheme = makeVanillaTheme;

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

@@ -0,0 +1,16 @@
+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,
+    transition: tokens.transition,
+    shadow: tokens.shadow
+  };
+};
+export {
+  makeVanillaTheme
+};

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

@@ -0,0 +1,70 @@
+"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
+    }
+  },
+  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,71 @@
+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
+    }
+  },
+  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,70 @@
+"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: "Noto Sans JP",
+      secondary: "Noto Sans JP"
+    },
+    fontSize: {
+      xsmall: "12px",
+      small: "14px",
+      medium: "16px",
+      large: "20px",
+      xlarge: "24px"
+    },
+    fontWeight: {
+      regular: 400,
+      medium: 500,
+      strong: 700
+    }
+  }
+};
+exports.tokens = tokens;

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

@@ -0,0 +1,71 @@
+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: "Noto Sans JP",
+      secondary: "Noto Sans JP"
+    },
+    fontSize: {
+      xsmall: "12px",
+      small: "14px",
+      medium: "16px",
+      large: "20px",
+      xlarge: "24px"
+    },
+    fontWeight: {
+      regular: 400,
+      medium: 500,
+      strong: 700
+    }
+  }
+};
+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
+};

package/package.json

@@ -1,88 +1,66 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.1.0",
-  "description": "Blockle building Blocks",
-  "scripts": {
-    "start": "npm run build:ts -- -w | npm run build:types -- -w",
-    "build": "npm run blocks && rm -rf ./dist/ && npm run build:ts && npm run build:types",
-    "build:ts": "rollup -c",
-    "build:types": "tsc -d --emitDeclarationOnly",
-    "test": "jest",
-    "lint": "eslint",
-    "format": "prettier --write \"**/*\"",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "blocks": "ts-node-script ./scripts/build-styles.ts"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged"
-    }
+  "version": "0.2.0",
+  "description": "Blocks design system",
+  "repository": "git@github.com:Blockle/blocks.git",
+  "license": "MIT",
+  "author": "Niek Saarberg <n.saarberg@gmail.com>",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./reset.css": {
+      "types": "./dist/reset.css.d.ts",
+      "import": "./dist/reset.css.mjs",
+      "require": "./dist/reset.css.cjs"
+    },
+    "./themes/momotaro": {
+      "types": "./dist/themes/momotaro.d.ts",
+      "import": "./dist/themes/momotaro.mjs",
+      "require": "./dist/themes/momotaro.cjs"
+    },
+    "./package.json": "./package.json"
   },
-  "main": "dist/blockle-blocks.js",
-  "module": "dist/blockle-blocks.esm.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist",
-    "README.md"
+    "reset.css",
+    "themes/momotaro"
   ],
-  "repository": "git@github.com:Blockle/blockle-blocks.git",
-  "author": "Niek Saarberg",
-  "license": "MIT",
-  "devDependencies": {
-    "@babel/core": "^7.13.10",
-    "@blockle/blocks-builder": "^1.1.0",
-    "@blockle/form": "^1.0.0",
-    "@storybook/addon-actions": "^6.1.21",
-    "@storybook/addon-info": "^5.2.8",
-    "@storybook/addon-links": "^6.1.21",
-    "@storybook/addons": "^6.1.21",
-    "@storybook/react": "^6.1.21",
-    "@svgr/rollup": "^5.1.0",
-    "@testing-library/jest-dom": "^5.3.0",
-    "@testing-library/react": "^11.2.5",
-    "@types/history": "^4.7.3",
-    "@types/jest": "^26.0.20",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.2",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
-    "awesome-typescript-loader": "^5.2.1",
-    "babel-loader": "^8.0.6",
-    "core-js": "^3.9.1",
-    "eslint": "^7.22.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.18.3",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^4.2.3",
-    "jest": "^26.6.3",
-    "postcss": "^8.2.8",
-    "postcss-import": "12.0.1",
-    "postcss-preset-env": "^6.7.0",
-    "postcss-reporter": "^7.0.2",
-    "prettier": "^2.0.2",
-    "pretty-quick": "^3.1.0",
-    "react": "^17.0.1",
-    "react-docgen-typescript-loader": "^3.6.0",
-    "react-dom": "^17.0.1",
-    "react-svg-loader": "^3.0.3",
-    "rollup": "^2.41.2",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-postcss": "^4.0.0",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "stylelint": "^13.12.0",
-    "stylelint-config-standard": "^21.0.0",
-    "stylelint-scss": "^3.13.0",
-    "ts-jest": "^26.5.3",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.2.3"
+  "scripts": {
+    "build": "crackle package",
+    "fix": "crackle fix"
   },
-  "peerDependencies": {
-    "@blockle/form": "^1.0.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+  "dependencies": {
+    "@vanilla-extract/css": "^1.11.0",
+    "@vanilla-extract/css-utils": "^0.1.3",
+    "@vanilla-extract/sprinkles": "^1.6.0"
+  },
+  "devDependencies": {
+    "@crackle/cli": "^0.11.5",
+    "@crackle/core": "^0.24.1",
+    "@types/react": "^18.2.7",
+    "@types/react-dom": "^18.2.4",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/parser": "^5.59.7",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.41.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-unicorn": "^47.0.0",
+    "prettier": "^2.8.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.0.4",
+    "vitest": "^0.31.1"
   },
-  "dependencies": {}
+  "packageManager": "yarn@1.22.19"
 }

package/reset.css/index.d.ts

@@ -0,0 +1 @@
+export * from "../dist/reset.css";

package/reset.css/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/reset.css.cjs",
+  "module": "../dist/reset.css.mjs",
+  "types": "./index.d.ts"
+}

package/themes/momotaro/index.d.ts

@@ -0,0 +1 @@
+export * from "../../dist/themes/momotaro";

package/themes/momotaro/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../../dist/themes/momotaro.cjs",
+  "module": "../../dist/themes/momotaro.mjs",
+  "types": "./index.d.ts"
+}

package/dist/Badge/Badge.d.ts

@@ -1,7 +0,0 @@
-import { FC, ReactNode } from 'react';
-import './badge.css';
-interface Props {
-    children: ReactNode;
-}
-declare const Badge: FC<Props>;
-export default Badge;

package/dist/Badge/Badge.spec.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';

package/dist/Badge/Badge.stories.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/Badge/index.d.ts

@@ -1 +0,0 @@
-export { default as Badge } from './Badge';