initial commit

packages/theme/.gitignore

@@ -0,0 +1 @@
+node_modules

packages/theme/index.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { ThemeProvider as EmotionThemeProvider } from "emotion-theming";
+import ThemeFactory from "./theme";
+import { injectCss } from "utils/css";
+import { isMobile } from "utils/dimensions";
+
+const factory = new ThemeFactory();
+
+function ThemeProvider(props) {
+  const { useStore } = props;
+  const themeType = useStore((store) => store.theme);
+  const accent = useStore((store) => store.accent);
+  const theme = factory.construct({
+    theme: themeType,
+    accent,
+    scale: isMobile() ? 0.8 : 1,
+  });
+  injectCss(factory.transform("css", theme));
+
+  return (
+    <EmotionThemeProvider theme={theme}>
+      {props.children instanceof Function
+        ? props.children(theme)
+        : props.children}
+    </EmotionThemeProvider>
+  );
+}
+export default ThemeProvider;

packages/theme/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "themefactory",
+  "version": "1.0.0",
+  "description": "React Rebass theme factory.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/streetwriters/themefactory.git"
+  },
+  "keywords": [
+    "theme",
+    "rebass",
+    "react"
+  ],
+  "author": "thecodrr <thecodrr@protonmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/streetwriters/themefactory/issues"
+  },
+  "homepage": "https://github.com/streetwriters/themefactory#readme",
+  "dependencies": {
+    "emotion-theming": "^10.0.27",
+    "react": "^16.13.1",
+    "utils": "https://github.com/streetwriters/utils.git"
+  }
+}

packages/theme/theme/accents.js

@@ -0,0 +1,13 @@
+const accents = [
+  { label: "red", code: "#ed2d37" },
+  { label: "orange", code: "#ec6e05" },
+  { label: "yellow", code: "yellow" },
+  { label: "green", code: "green" },
+  { label: "blue", code: "blue" },
+  { label: "purple", code: "purple" },
+  { label: "gray", code: "gray" },
+  { label: "lightblue", code: "#46F0F0" },
+  { label: "indigo", code: "#F032E6" },
+  { label: "lightpink", code: "#FABEBE" }
+];
+export default accents;

packages/theme/theme/colorscheme/dark.js

@@ -0,0 +1,23 @@
+import { hexToRGB } from "utils/color";
+import StaticColorSchemeFactory from "./static";
+
+class DarkColorSchemeFactory {
+  constructor(accent) {
+    return {
+      primary: accent,
+      placeholder: hexToRGB("#ffffff", 0.6),
+      background: "#1f1f1f",
+      accent: "#000",
+      bgSecondary: "#2b2b2b",
+      border: "#2b2b2b",
+      hover: "#3b3b3b",
+      fontSecondary: "#000",
+      text: "#d3d3d3",
+      overlay: "rgba(255, 255, 255, 0.5)",
+      secondary: "black",
+      icon: "#dbdbdb",
+      ...new StaticColorSchemeFactory(accent),
+    };
+  }
+}
+export default DarkColorSchemeFactory;

packages/theme/theme/colorscheme/index.js

@@ -0,0 +1,14 @@
+import DarkColorSchemeFactory from "./dark";
+import LightColorSchemeFactory from "./light";
+
+const colorSchemes = {
+  dark: DarkColorSchemeFactory,
+  light: LightColorSchemeFactory
+};
+
+class ColorSchemeFactory {
+  constructor(theme, accent) {
+    return new colorSchemes[theme](accent);
+  }
+}
+export default ColorSchemeFactory;

packages/theme/theme/colorscheme/light.js

@@ -0,0 +1,23 @@
+import { hexToRGB } from "utils/color";
+import StaticColorSchemeFactory from "./static";
+
+class LightColorSchemeFactory {
+  constructor(accent) {
+    return {
+      primary: accent,
+      background: "white",
+      accent: "white",
+      bgSecondary: "#f0f0f0",
+      border: "#f0f0f0",
+      hover: "#e0e0e0",
+      fontSecondary: "white",
+      text: "#000000",
+      overlay: "rgba(0, 0, 0, 0.1)",
+      secondary: "white",
+      icon: "#3b3b3b",
+      placeholder: hexToRGB("#000000", 0.6),
+      ...new StaticColorSchemeFactory(accent),
+    };
+  }
+}
+export default LightColorSchemeFactory;

packages/theme/theme/colorscheme/static.js

@@ -0,0 +1,16 @@
+import { hexToRGB } from "utils/color";
+
+class StaticColorSchemeFactory {
+  constructor(accent) {
+    return {
+      shade: hexToRGB(accent, 0.1),
+      dimPrimary: hexToRGB(accent, 0.7),
+      fontTertiary: "gray",
+      transparent: "transparent",
+      static: "white",
+      error: "#E53935",
+      favorite: "#ffd700",
+    };
+  }
+}
+export default StaticColorSchemeFactory;

packages/theme/theme/font/fontsize.js

@@ -0,0 +1,14 @@
+class FontSizeFactory {
+  constructor(scaleFactor) {
+    return {
+      heading: 28 * scaleFactor,
+      input: 16 * scaleFactor,
+      title: 18 * scaleFactor,
+      subtitle: 16 * scaleFactor,
+      body: 16 * scaleFactor,
+      menu: 14 * scaleFactor,
+      subBody: 11 * scaleFactor,
+    };
+  }
+}
+export default FontSizeFactory;

packages/theme/theme/font/index.js

@@ -0,0 +1,19 @@
+import FontSizeFactory from "./fontsize";
+
+class FontFactory {
+  constructor(scale) {
+    return {
+      fontSizes: new FontSizeFactory(scale),
+      fontWeights: {
+        body: 400,
+        heading: 400,
+        bold: 400
+      },
+      fonts: {
+        body: "DM Sans, sans-serif",
+        heading: `"DM Serif Text", serif`
+      }
+    };
+  }
+}
+export default FontFactory;

packages/theme/theme/index.js

@@ -0,0 +1,25 @@
+import ColorSchemeFactory from "./colorscheme";
+import VariantsFactory from "./variants";
+import FontFactory from "./font";
+import TransformerFactory from "./transformer";
+
+class ThemeFactory {
+  transform(type, theme) {
+    const factory = new TransformerFactory();
+    return factory.construct(type, theme);
+  }
+
+  construct(config) {
+    return {
+      breakpoints: ["480px", "1000px", "1000px"],
+      space: [0, 5, 10, 15, 20, 25, 30, 35] ,
+      sizes: { full: "100%", half: "50%" },
+      radii: { none: 0, default: 5 },
+      colors: new ColorSchemeFactory(config.theme, config.accent),
+      ...new FontFactory(config.scale),
+      ...new VariantsFactory()
+    };
+  }
+}
+
+export default ThemeFactory;

packages/theme/theme/transformer/css.js

@@ -0,0 +1,8 @@
+function transform(theme) {
+  let root = ":root {";
+  for (let color in theme.colors) {
+    root += `--${color}: ${theme.colors[color]};`;
+  }
+  return root + "}";
+}
+export default transform;

packages/theme/theme/transformer/index.js

@@ -0,0 +1,12 @@
+import css from "./css";
+
+const transformers = {
+  css: css
+};
+
+class TransformerFactory {
+  construct(type, theme) {
+    return transformers[type](theme);
+  }
+}
+export default TransformerFactory;

packages/theme/theme/variants/button.js

@@ -0,0 +1,121 @@
+class ButtonFactory {
+  constructor() {
+    return {
+      default: new Default(),
+      primary: new Primary(),
+      secondary: new Secondary(),
+      tertiary: new Tertiary(),
+      list: new List(),
+      anchor: new Anchor(),
+      menu: new Menu(),
+      icon: new Icon(),
+    };
+  }
+}
+export default ButtonFactory;
+
+class Default {
+  constructor() {
+    return {
+      bg: "transparent",
+      fontFamily: "body",
+      fontWeight: "body",
+      fontSize: "body",
+      borderRadius: "default",
+      cursor: "pointer",
+      ":focus": {
+        outline: "none",
+      },
+    };
+  }
+}
+
+class Primary {
+  constructor() {
+    return {
+      variant: "buttons.default",
+      color: "static",
+      bg: "primary",
+      transition: "opacity 300ms linear",
+      ":hover": {
+        opacity: 0.8,
+      },
+    };
+  }
+}
+
+class Secondary {
+  constructor() {
+    return { variant: "buttons.default", color: "text", bg: "bgSecondary" };
+  }
+}
+
+class Tertiary {
+  constructor() {
+    return {
+      variant: "buttons.default",
+      color: "text",
+      bg: "transparent",
+      border: "2px solid",
+      borderColor: "border",
+    };
+  }
+}
+
+class List {
+  constructor() {
+    return {
+      variant: "buttons.tertiary",
+      border: "0px solid",
+      borderBottom: "1px solid",
+      borderBottomColor: "border",
+      borderRadius: 0,
+      textAlign: "left",
+      py: 2,
+      px: 0,
+      ":hover": {
+        borderBottomColor: "primary",
+      },
+    };
+  }
+}
+
+class Anchor {
+  constructor() {
+    return {
+      variant: "buttons.default",
+      color: "primary",
+      fontSize: "subBody",
+      p: 0,
+      m: 0,
+    };
+  }
+}
+
+class Icon {
+  constructor() {
+    return {
+      variant: "buttons.default",
+      color: "text",
+      borderRadius: "none",
+      ":hover": {
+        backgroundColor: "shade",
+      },
+    };
+  }
+}
+
+class Menu {
+  constructor() {
+    return {
+      variant: "buttons.default",
+      color: "text",
+      fontSize: 14,
+      p: 2,
+      borderRadius: "none",
+      ":hover": {
+        backgroundColor: "shade",
+      },
+    };
+  }
+}

packages/theme/theme/variants/flex.js

@@ -0,0 +1,44 @@
+class FlexFactory {
+  constructor(direction) {
+    const variants = {
+      Center: new Center(direction),
+      Fill: new Fill(direction),
+      CenterFill: new CenterFill(direction)
+    };
+    return Object.fromEntries(
+      Object.entries(variants).map(([key, value]) => {
+        return [`${direction}${key}`, value];
+      })
+    );
+  }
+}
+export default FlexFactory;
+
+class Center {
+  constructor(direction) {
+    return {
+      justifyContent: "center",
+      alignItems: "center",
+      flexDirection: direction
+    };
+  }
+}
+
+class Fill {
+  constructor(direction) {
+    return {
+      flex: "1 1 auto",
+      flexDirection: direction
+    };
+  }
+}
+
+class CenterFill {
+  constructor(direction) {
+    return {
+      variant: `variants.${direction}Center`,
+      flex: "1 1 auto",
+      flexDirection: direction
+    };
+  }
+}

packages/theme/theme/variants/index.js

@@ -0,0 +1,19 @@
+import ButtonFactory from "./button";
+import InputFactory from "./input";
+import TextFactory from "./text";
+import FlexFactory from "./flex";
+
+class VariantFactory {
+  constructor() {
+    return {
+      buttons: new ButtonFactory(),
+      forms: new InputFactory(),
+      text: new TextFactory(),
+      variants: {
+        ...new FlexFactory("row"),
+        ...new FlexFactory("column")
+      }
+    };
+  }
+}
+export default VariantFactory;

packages/theme/theme/variants/input.js

@@ -0,0 +1,46 @@
+class InputFactory {
+  constructor() {
+    return {
+      input: new Default(),
+      error: new Error(),
+    };
+  }
+}
+export default InputFactory;
+
+class Default {
+  constructor() {
+    return {
+      borderRadius: "default",
+      border: "2px solid",
+      borderColor: "border",
+      fontFamily: "body",
+      fontWeight: "body",
+      fontSize: "input",
+      color: "text",
+      ":focus": {
+        outline: "none",
+        borderColor: "primary",
+      },
+      ":hover": {
+        borderColor: "dimPrimary",
+      },
+    };
+  }
+}
+
+class Error {
+  constructor() {
+    return {
+      variant: "forms.input",
+      borderColor: "red",
+      ":focus": {
+        outline: "none",
+        borderColor: "red",
+      },
+      ":hover": {
+        borderColor: "darkred",
+      },
+    };
+  }
+}

packages/theme/theme/variants/text.js

@@ -0,0 +1,69 @@
+class TextFactory {
+  constructor() {
+    return {
+      default: new Default(),
+      heading: new Heading(),
+      title: new Title(),
+      subtitle: new Subtitle(),
+      body: new Body(),
+      subBody: new SubBody(),
+      error: new Error(),
+    };
+  }
+}
+export default TextFactory;
+
+class Default {
+  constructor() {
+    return {
+      color: "text",
+      fontFamily: "body",
+    };
+  }
+}
+
+class Heading {
+  constructor() {
+    return {
+      variant: "text.default",
+      fontFamily: "heading",
+      fontWeight: "bold",
+      fontSize: "heading",
+    };
+  }
+}
+
+class Title {
+  constructor() {
+    return {
+      variant: "text.heading",
+      fontSize: "title",
+    };
+  }
+}
+class Subtitle {
+  constructor() {
+    return {
+      variant: "text.heading",
+      fontSize: "subtitle",
+    };
+  }
+}
+
+class Body {
+  constructor() {
+    return { variant: "text.default", fontSize: "body" };
+  }
+}
+
+class SubBody {
+  constructor() {
+    return { variant: "text.default", fontSize: "subBody" };
+  }
+}
+
+class Error {
+  constructor() {
+    return { variant: "text.default", fontSize: "subBody", color: "error" };
+  }
+}

packages/theme/yarn.lock

@@ -0,0 +1,80 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/runtime@^7.5.5":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.0.tgz#f10245877042a815e07f7e693faff0ae9d3a2aac"
+  integrity sha512-qArkXsjJq7H+T86WrIFV0Fnu/tNOkZ4cgXmjkzAu3b/58D5mFIO8JH/y77t7C9q0OdDRdh9s7Ue5GasYssxtXw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@emotion/weak-memoize@0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
+emotion-theming@^10.0.27:
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.27.tgz#1887baaec15199862c89b1b984b79806f2b9ab10"
+  integrity sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@emotion/weak-memoize" "0.2.5"
+    hoist-non-react-statics "^3.3.0"
+
+hoist-non-react-statics@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
+"js-tokens@^3.0.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+loose-envify@^1.1.0, loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
+prop-types@^15.6.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
+react-is@^16.7.0, react-is@^16.8.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
+  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
+regenerator-runtime@^0.13.4:
+  version "0.13.7"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
+  integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
+
+"utils@https://github.com/streetwriters/utils.git":
+  version "1.0.0"
+  resolved "https://github.com/streetwriters/utils.git#4e508b433cd30f85a7768a7f8535a05613663b66"