feat: updates to theme

packages/theme/src/theme/accents.js

@@ -1,13 +1,20 @@
 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" }
+  { label: "orange", code: "#FF5722" },
+  { label: "yellow", code: "#FFA000" },
+  { label: "green", code: "#1B5E20" },
+  { label: "green2", code: "#008837" },
+  { label: "gray", code: "#757575" },
+  { label: "blue", code: "#0560ff" },
+  { label: "teal", code: "#009688" },
+  { label: "lightblue", code: "#2196F3" },
+  { label: "indigo", code: "#880E4F" },
+  { label: "purple", code: "#9C27B0" },
+  { label: "pink", code: "#FF1744" },
+  { label: "red", code: "#B71C1C" },
 ];
+
+export function getDefaultAccentColor() {
+  return accents.find((a) => a.label === "green2").code;
+}
+
 export default accents;

packages/theme/src/theme/colorscheme/dark.js

@@ -1,4 +1,4 @@
-import { hexToRGB } from "utils/color";
+import { hexToRGB } from "../../utils/color";
 import StaticColorSchemeFactory from "./static";
 
 class DarkColorSchemeFactory {
@@ -6,17 +6,30 @@ class DarkColorSchemeFactory {
     return {
       primary: accent,
       placeholder: hexToRGB("#ffffff", 0.6),
-      background: "#1f1f1f",
+      background: "#1b1b1b",
+      bgTransparent: "#1f1f1f99",
       accent: "#000",
       bgSecondary: "#2b2b2b",
-      border: "#2b2b2b",
-      hover: "#3b3b3b",
+      bgSecondaryText: "#A1A1A1",
+      border: "#353535",
+      hover: "#2f2f2f",
       fontSecondary: "#000",
+      fontTertiary: "#A1A1A1",
       text: "#d3d3d3",
-      overlay: "rgba(255, 255, 255, 0.5)",
+      overlay: "rgba(53, 53, 53, 0.5)",
       secondary: "black",
       icon: "#dbdbdb",
+      disabled: "#5b5b5b",
       ...new StaticColorSchemeFactory(accent),
+
+      // COLORS
+      red: "#f44336",
+      orange: "#FF9800",
+      yellow: "#FFD600",
+      green: "#4CAF50",
+      blue: "#2196F3",
+      purple: "#9568ED",
+      gray: "#9E9E9E",
     };
   }
 }

packages/theme/src/theme/colorscheme/light.js

@@ -1,4 +1,4 @@
-import { hexToRGB } from "utils/color";
+import { hexToRGB } from "../../utils/color";
 import StaticColorSchemeFactory from "./static";
 
 class LightColorSchemeFactory {
@@ -6,17 +6,38 @@ class LightColorSchemeFactory {
     return {
       primary: accent,
       background: "white",
+      bgTransparent: "#ffffff99",
       accent: "white",
-      bgSecondary: "#f0f0f0",
-      border: "#f0f0f0",
-      hover: "#e0e0e0",
+      bgSecondary: "#f7f7f7",
+      bgSecondaryText: "#5E5E5E",
+      border: "#e5e5e5",
+      hover: "#f0f0f0",
       fontSecondary: "white",
-      text: "#000000",
+      fontTertiary: "#656565",
+      text: "#202124",
       overlay: "rgba(0, 0, 0, 0.1)",
       secondary: "white",
       icon: "#3b3b3b",
+      disabled: "#9b9b9b",
       placeholder: hexToRGB("#000000", 0.6),
       ...new StaticColorSchemeFactory(accent),
+
+      // COLORS
+      // red: "#D93B30",
+      // orange: "#C75301",
+      // yellow: "#AC660D",
+      // green: "#4CAF50",
+      // blue: "#197AC7",
+      // purple: "#673AB7",
+      // gray: "#777777",
+
+      red: "#f44336",
+      orange: "#FF9800",
+      yellow: "#f0c800",
+      green: "#4CAF50",
+      blue: "#2196F3",
+      purple: "#9568ED",
+      gray: "#9E9E9E",
     };
   }
 }

packages/theme/src/theme/colorscheme/static.js

@@ -1,14 +1,18 @@
-import { hexToRGB } from "utils/color";
+import { hexToRGB } from "../../utils/color";
 
 class StaticColorSchemeFactory {
   constructor(accent) {
     return {
       shade: hexToRGB(accent, 0.1),
+      textSelection: hexToRGB(accent, 0.2),
       dimPrimary: hexToRGB(accent, 0.7),
-      fontTertiary: "gray",
       transparent: "transparent",
       static: "white",
       error: "#E53935",
+      errorBg: "#E5393520",
+      success: "#4F8A10",
+      warn: "#FF5722",
+      warnBg: "#FF572220",
       favorite: "#ffd700",
     };
   }

packages/theme/src/theme/font/fontsize.js

@@ -1,13 +1,14 @@
 class FontSizeFactory {
-  constructor(scaleFactor) {
+  constructor() {
     return {
-      heading: 28 * scaleFactor,
-      input: 16 * scaleFactor,
-      title: 18 * scaleFactor,
-      subtitle: 16 * scaleFactor,
-      body: 16 * scaleFactor,
-      menu: 14 * scaleFactor,
-      subBody: 11 * scaleFactor,
+      heading: "1.5rem",
+      subheading: "1.2rem",
+      input: "0.875rem",
+      title: "0.95rem",
+      subtitle: "0.85rem",
+      body: "0.8rem",
+      menu: "0.8rem",
+      subBody: "0.750rem",
     };
   }
 }

packages/theme/src/theme/font/index.js

@@ -5,14 +5,15 @@ class FontFactory {
     return {
       fontSizes: new FontSizeFactory(scale),
       fontWeights: {
+        normal: 400,
         body: 400,
-        heading: 400,
-        bold: 400
+        heading: 600,
+        bold: 600,
       },
       fonts: {
-        body: "DM Sans, sans-serif",
-        heading: `"DM Serif Text", serif`
-      }
+        body: `Open Sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Oxygen-Sans,Ubuntu,Cantarell,sans-serif;`,
+        heading: `Open Sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Oxygen-Sans,Ubuntu,Cantarell,sans-serif;`,
+      },
     };
   }
 }

packages/theme/src/theme/index.js

@@ -12,12 +12,12 @@ class ThemeFactory {
   construct(config) {
     return {
       breakpoints: ["480px", "1000px", "1000px"],
-      space: [0, 5, 10, 15, 20, 25, 30, 35] ,
+      space: [0, 5, 10, 15, 20, 25, 30, 35],
       sizes: { full: "100%", half: "50%" },
-      radii: { none: 0, default: 5 },
+      radii: { none: 0, default: 5, dialog: 10 },
       colors: new ColorSchemeFactory(config.theme, config.accent),
       ...new FontFactory(config.scale),
-      ...new VariantsFactory()
+      ...new VariantsFactory(),
     };
   }
 }

packages/theme/src/theme/variants/button.js

@@ -7,8 +7,11 @@ class ButtonFactory {
       tertiary: new Tertiary(),
       list: new List(),
       anchor: new Anchor(),
-      menu: new Menu(),
+      tool: new Tool(),
       icon: new Icon(),
+      dialog: new Dialog(),
+      statusitem: new StatusItem(),
+      menuitem: new MenuItem(),
     };
   }
 }
@@ -23,8 +26,23 @@ class Default {
       fontSize: "body",
       borderRadius: "default",
       cursor: "pointer",
-      ":focus": {
-        outline: "none",
+      p: 2,
+      py: "7.5px",
+      transition: "filter 200ms ease-in, box-shadow 200ms ease-out",
+      ":hover:not(:disabled)": {
+        filter: "brightness(90%)",
+      },
+      ":active": {
+        filter: "brightness(98%)",
+      },
+      outline: "none",
+      ":focus-visible:not(:active)": {
+        filter: "brightness(90%)",
+        bg: "bgSecondary",
+      },
+      ":disabled": {
+        opacity: 0.5,
+        cursor: "not-allowed",
       },
     };
   }
@@ -36,9 +54,26 @@ class Primary {
       variant: "buttons.default",
       color: "static",
       bg: "primary",
-      transition: "opacity 300ms linear",
-      ":hover": {
-        opacity: 0.8,
+    };
+  }
+}
+
+class Dialog {
+  constructor() {
+    return {
+      variant: "buttons.primary",
+      color: "primary",
+      fontWeight: "bold",
+      bg: "transparent",
+      ":hover": { bg: "bgSecondary" },
+      ":focus:not(:active), :focus-within:not(:active), :focus-visible:not(:active)":
+        {
+          bg: "hover",
+          filter: "brightness(90%)",
+        },
+      ":disabled": {
+        opacity: 0.7,
+        cursor: "not-allowed",
       },
     };
   }
@@ -46,7 +81,11 @@ class Primary {
 
 class Secondary {
   constructor() {
-    return { variant: "buttons.default", color: "text", bg: "bgSecondary" };
+    return {
+      variant: "buttons.default",
+      color: "text",
+      bg: "border",
+    };
   }
 }
 
@@ -58,6 +97,9 @@ class Tertiary {
       bg: "transparent",
       border: "2px solid",
       borderColor: "border",
+      ":hover": {
+        borderColor: "primary",
+      },
     };
   }
 }
@@ -73,6 +115,7 @@ class List {
       textAlign: "left",
       py: 2,
       px: 0,
+      cursor: "pointer",
       ":hover": {
         borderBottomColor: "primary",
       },
@@ -88,6 +131,11 @@ class Anchor {
       fontSize: "subBody",
       p: 0,
       m: 0,
+      px: 0,
+      py: 0,
+      ":hover": {
+        textDecoration: "underline",
+      },
     };
   }
 }
@@ -99,22 +147,54 @@ class Icon {
       color: "text",
       borderRadius: "none",
       ":hover": {
-        backgroundColor: "shade",
+        backgroundColor: "hover",
+        filter: "brightness(90%)",
       },
     };
   }
 }
 
-class Menu {
+class Tool {
   constructor() {
     return {
       variant: "buttons.default",
       color: "text",
-      fontSize: 14,
-      p: 2,
-      borderRadius: "none",
+      backgroundColor: "bgSecondary",
+      borderRadius: "default",
       ":hover": {
-        backgroundColor: "shade",
+        backgroundColor: "hover",
+      },
+    };
+  }
+}
+
+class StatusItem {
+  constructor() {
+    return {
+      variant: "buttons.icon",
+      p: 0,
+      py: 1,
+      px: 1,
+    };
+  }
+}
+
+class MenuItem {
+  constructor() {
+    return {
+      variant: "buttons.default",
+      // bg: "transparent",
+      py: "8px",
+      px: 3,
+      borderRadius: 0,
+      color: "text",
+      cursor: "pointer",
+      ":hover:not(:disabled),:focus:not(:disabled)": {
+        backgroundColor: "hover",
+        boxShadow: "none",
+      },
+      ":active:not(:disabled)": {
+        backgroundColor: "border",
       },
     };
   }

packages/theme/src/theme/variants/input.js

@@ -3,6 +3,7 @@ class InputFactory {
     return {
       input: new Default(),
       error: new Error(),
+      clean: new Clean(),
     };
   }
 }
@@ -12,18 +13,35 @@ class Default {
   constructor() {
     return {
       borderRadius: "default",
-      border: "2px solid",
-      borderColor: "border",
+      border: "none",
+      // borderColor: "border",
+      boxShadow: "0px 0px 0px 1px var(--border) inset",
       fontFamily: "body",
       fontWeight: "body",
       fontSize: "input",
       color: "text",
+      outline: "none",
       ":focus": {
-        outline: "none",
-        borderColor: "primary",
+        boxShadow: "0px 0px 0px 1.5px var(--primary) inset",
       },
-      ":hover": {
-        borderColor: "dimPrimary",
+      ":hover:not(:focus)": {
+        boxShadow: "0px 0px 0px 1px var(--dimPrimary) inset",
+      },
+    };
+  }
+}
+
+class Clean {
+  constructor() {
+    return {
+      variant: "forms.input",
+      outline: "none",
+      boxShadow: "none",
+      ":focus": {
+        boxShadow: "none",
+      },
+      ":hover:not(:focus)": {
+        boxShadow: "none",
       },
     };
   }
@@ -33,13 +51,13 @@ class Error {
   constructor() {
     return {
       variant: "forms.input",
-      borderColor: "red",
+      boxShadow: "0px 0px 0px 1px var(--error) inset",
+      outline: "none",
       ":focus": {
-        outline: "none",
-        borderColor: "red",
+        boxShadow: "0px 0px 0px 1.5px var(--error) inset",
       },
-      ":hover": {
-        borderColor: "darkred",
+      ":hover:not(:focus)": {
+        boxShadow: "0px 0px 0px 1px var(--error) inset",
       },
     };
   }

packages/theme/src/theme/variants/text.js

@@ -38,6 +38,7 @@ class Title {
     return {
       variant: "text.heading",
       fontSize: "title",
+      fontWeight: "bold",
     };
   }
 }
@@ -46,6 +47,7 @@ class Subtitle {
     return {
       variant: "text.heading",
       fontSize: "subtitle",
+      fontWeight: "bold",
     };
   }
 }
@@ -58,7 +60,11 @@ class Body {
 
 class SubBody {
   constructor() {
-    return { variant: "text.default", fontSize: "subBody" };
+    return {
+      variant: "text.default",
+      fontSize: "subBody",
+      color: "fontTertiary",
+    };
   }
 }