diff --git a/packages/theme/src/theme/accents.js b/packages/theme/src/theme/accents.js index 74f75489f..782080956 100644 --- a/packages/theme/src/theme/accents.js +++ b/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; diff --git a/packages/theme/src/theme/colorscheme/dark.js b/packages/theme/src/theme/colorscheme/dark.js index 6a95770ae..09d0158dc 100644 --- a/packages/theme/src/theme/colorscheme/dark.js +++ b/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", }; } } diff --git a/packages/theme/src/theme/colorscheme/light.js b/packages/theme/src/theme/colorscheme/light.js index 49680cdf8..88622f1f8 100644 --- a/packages/theme/src/theme/colorscheme/light.js +++ b/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", }; } } diff --git a/packages/theme/src/theme/colorscheme/static.js b/packages/theme/src/theme/colorscheme/static.js index b6b3b2dbe..084c74e85 100644 --- a/packages/theme/src/theme/colorscheme/static.js +++ b/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", }; } diff --git a/packages/theme/src/theme/font/fontsize.js b/packages/theme/src/theme/font/fontsize.js index ab38affc1..c70a7799c 100644 --- a/packages/theme/src/theme/font/fontsize.js +++ b/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", }; } } diff --git a/packages/theme/src/theme/font/index.js b/packages/theme/src/theme/font/index.js index 6175612e4..5fa2f1d69 100644 --- a/packages/theme/src/theme/font/index.js +++ b/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;`, + }, }; } } diff --git a/packages/theme/src/theme/index.js b/packages/theme/src/theme/index.js index 7252d1519..d0a748def 100644 --- a/packages/theme/src/theme/index.js +++ b/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(), }; } } diff --git a/packages/theme/src/theme/variants/button.js b/packages/theme/src/theme/variants/button.js index c21fb1903..155c61a06 100644 --- a/packages/theme/src/theme/variants/button.js +++ b/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", }, }; } diff --git a/packages/theme/src/theme/variants/input.js b/packages/theme/src/theme/variants/input.js index 6189406c7..77d2b7ccb 100644 --- a/packages/theme/src/theme/variants/input.js +++ b/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", }, }; } diff --git a/packages/theme/src/theme/variants/text.js b/packages/theme/src/theme/variants/text.js index b62c4ed18..5c058ad74 100644 --- a/packages/theme/src/theme/variants/text.js +++ b/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", + }; } }