@saleor/macaw-ui 0.2.4

package/src/localStorageKeys.ts

@@ -0,0 +1,4 @@
+export const localStorageKeys = {
+  theme: "macaw-ui-theme",
+  menuShrink: "macaw-ui-menu-shrink",
+};

package/src/theme/Baseline.tsx

@@ -0,0 +1,30 @@
+import CssBaseline from "@material-ui/core/CssBaseline";
+import { fade } from "@material-ui/core/styles";
+import React from "react";
+
+import { makeStyles } from "./styles";
+
+const useStyles = makeStyles(
+  (theme) => ({
+    "@global": {
+      "@import": "url('https://rsms.me/inter/inter.css')",
+
+      // For some reason @import clause must be put on top
+      // eslint-disable-next-line sort-keys
+      "::selection": {
+        background: fade(theme.palette.primary.main, 0.2),
+      },
+      html: {
+        fontSize: "62.5%",
+      },
+    },
+  }),
+  { name: "Baseline" }
+);
+
+export const Baseline: React.FC = () => {
+  useStyles();
+
+  return <CssBaseline />;
+};
+Baseline.displayName = "Baseline";

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,84 @@
+import type { Theme } from "@material-ui/core/styles";
+import { MuiThemeProvider } from "@material-ui/core/styles";
+import { merge } from "lodash";
+import React, { useEffect } from "react";
+
+import { ActionBarProvider } from "../ActionBar/context";
+import { BacklinkProvider } from "../Backlink/context";
+import {
+  ExtensionMessageType,
+  sendMessageToExtension,
+  ThemeChangeMessage,
+} from "../extensions";
+import { localStorageKeys } from "../localStorageKeys";
+import useLocalStorage from "../tools/useLocalStorage";
+import { Baseline } from "./Baseline";
+import { ThemeContext } from "./context";
+import { createTheme, Themes, ThemeType } from "./createSaleorTheme";
+import { dark, light } from "./themes";
+import { changeColorMeta } from "./utils";
+
+export interface ThemeProviderProps {
+  defaultTheme?: ThemeType;
+  /**
+   * Passing an object here will result in losing visual consistency with
+   * Saleor's Dashboard. Use with caution.
+   */
+  palettes?: Partial<Themes>;
+  /**
+   * Passing an object here will result in losing visual consistency with
+   * Saleor's Dashboard. Use with caution.
+   */
+  overrides?: Partial<Theme>;
+}
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  defaultTheme = "light",
+  palettes = {},
+  overrides = {},
+}) => {
+  const { value: themeTypeName, setValue: setThemeType } = useLocalStorage(
+    localStorageKeys.theme,
+    defaultTheme
+  );
+  const themeType = themeTypeName as ThemeType;
+  const themes = {
+    light,
+    dark,
+    ...palettes,
+  };
+  const theme = merge(createTheme(themes[themeType]), overrides);
+  const sendThemeToExtension = () =>
+    sendMessageToExtension<ThemeChangeMessage>(
+      {
+        theme: themeType,
+        type: ExtensionMessageType.THEME,
+      },
+      "*"
+    );
+
+  useEffect(() => {
+    sendThemeToExtension();
+    changeColorMeta(theme.palette.background.default);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [themeType]);
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        themeType,
+        sendThemeToExtension,
+        setTheme: setThemeType,
+      }}
+    >
+      <MuiThemeProvider theme={theme}>
+        <ActionBarProvider>
+          <BacklinkProvider>
+            <Baseline />
+            {children}
+          </BacklinkProvider>
+        </ActionBarProvider>
+      </MuiThemeProvider>
+    </ThemeContext.Provider>
+  );
+};

package/src/theme/context.ts

@@ -0,0 +1,8 @@
+import React from "react";
+
+import { SaleorThemeContext } from "./types";
+
+export const ThemeContext = React.createContext<SaleorThemeContext | undefined>(
+  undefined
+);
+ThemeContext.displayName = "ThemeContext";

package/src/theme/createSaleorTheme/createSaleorTheme.ts

@@ -0,0 +1,267 @@
+import { createMuiTheme } from "@material-ui/core/styles";
+import { fade } from "@material-ui/core/styles";
+import type { TypographyProps } from "@material-ui/core/Typography";
+
+import { overrides } from "./overrides";
+import { createPalette } from "./palette";
+import { shadows } from "./shadows";
+import { SaleorTheme, SaleorThemeColors } from "./types";
+
+export const ICONBUTTON_SIZE = 48;
+
+const fontFamily = '"Inter", "roboto", "sans-serif"';
+
+export const createTheme = (colors: SaleorThemeColors): SaleorTheme =>
+  (createMuiTheme({
+    overrides: {
+      ...overrides(colors, fontFamily),
+      MuiCard: {
+        root: {
+          borderColor: colors.paperBorder,
+          borderRadius: 8,
+          borderStyle: "solid",
+          borderWidth: 1,
+          overflow: "visible",
+        },
+      },
+      MuiCardActions: {
+        root: {
+          flexDirection: "row-reverse" as "row-reverse",
+        },
+      },
+      MuiCardContent: {
+        root: {
+          padding: "2.4rem",
+        },
+      },
+      MuiCardHeader: {
+        action: {
+          position: "relative",
+          top: 4,
+        },
+        root: {
+          padding: "1.6rem 2.4rem",
+        },
+      },
+      MuiChip: {
+        avatar: {
+          fontSize: "1.2rem",
+          height: 32,
+          left: -5,
+          position: "relative",
+          width: 32,
+        },
+        root: {
+          "& $avatar": {
+            fontSize: "1.2rem",
+          },
+          fontSize: "1.3rem",
+        },
+      },
+      MuiDialogActions: {
+        root: {
+          borderTop: `1px solid ${colors.divider}`,
+          padding: "16px 24px",
+        },
+      },
+      MuiDialogContent: {
+        root: {
+          padding: `24px 0px`,
+          margin: `0px 24px`,
+        },
+      },
+      MuiDialogContentText: {
+        root: {
+          "&:last-child": {
+            marginBottom: 0,
+          },
+        },
+      },
+      MuiDialogTitle: {
+        root: {
+          borderBottom: `1px solid ${colors.divider}`,
+        },
+      },
+      MuiFormControlLabel: {
+        label: {
+          lineHeight: 1.2,
+          marginLeft: 4,
+        },
+      },
+      MuiFormLabel: {
+        filled: {
+          "&&:not($error)": {
+            color: colors.primary,
+          },
+        },
+        root: {
+          "&&$focused:not($error)": {
+            color: colors.font.gray,
+          },
+        },
+      },
+      MuiSvgIcon: {
+        root: {
+          fontSize: "2.4rem",
+          height: "1em",
+          width: "1em",
+        },
+      },
+      MuiList: {
+        root: {
+          display: "grid",
+          gridRowGap: 8 + "px",
+          padding: "8px !important",
+        },
+      },
+      MuiListItem: {
+        button: {
+          "&:focus": {
+            backgroundColor: colors.input.default,
+          },
+        },
+        root: {
+          "&$selected": {
+            "&:hover": {
+              backgroundColor: colors.input.default,
+            },
+            backgroundColor: colors.input.default,
+          },
+        },
+      },
+      MuiMenu: {
+        paper: {
+          borderRadius: 8,
+        },
+      },
+      MuiMenuItem: {
+        root: {
+          "&$selected, &$selected:focus, &$selected:hover": {
+            backgroundColor: [colors.background.default, "!important"] as any,
+            color: colors.primary,
+            fontWeight: 700,
+          },
+          "&:hover": {
+            backgroundColor: [colors.background.default, "!important"] as any,
+            color: colors.font.default,
+            fontWeight: 400,
+          },
+          borderRadius: 4,
+        },
+      },
+      MuiSelect: {
+        root: {
+          "&$disabled": {
+            backgroundColor: colors.input.disabledBackground,
+          },
+        },
+      },
+      MuiSnackbarContent: {
+        action: {
+          "& $MuiIconButton": {
+            "& svg": {
+              color: colors.font.default,
+            },
+          },
+          display: "block",
+          paddingBottom: 10,
+          paddingLeft: 0,
+          paddingRight: 45,
+        },
+        message: {
+          fontSize: 16,
+        },
+        root: {
+          backgroundColor: colors.background.paper,
+          boxShadow:
+            "0 6px 10px 0px rgba(0, 0, 0, 0.15), 0 1px 18px 0px rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.10)",
+          color: colors.font.default,
+          display: "block",
+          maxWidth: 480,
+        },
+      },
+      MuiTooltip: {
+        tooltip: {
+          fontSize: "0.8em",
+        },
+      },
+      MuiTouchRipple: {
+        child: {
+          backgroundColor: fade(colors.primary, 0.2),
+        },
+        childLeaving: {
+          backgroundColor: fade(colors.primary, 0.2),
+        },
+        ripple: {
+          "&$rippleVisible": {
+            backgroundColor: fade(colors.primary, 0.2),
+          },
+          borderRadius: "100%",
+        },
+      },
+    },
+    palette: createPalette(colors),
+    props: {
+      MuiFormControl: {
+        variant: "filled",
+      },
+      MuiTextField: {
+        variant: "outlined",
+      },
+      MuiCard: {
+        elevation: 0,
+      },
+      MuiTypography: {
+        component: "div",
+      } as TypographyProps,
+      MuiCheckbox: {
+        color: "primary",
+      },
+      MuiTooltip: {
+        placement: "right-end",
+      },
+    },
+    shadows,
+    spacing: (value: number = 1) => `${(value * 8) / 10}rem`,
+    typography: {
+      allVariants: {
+        fontFamily,
+      },
+      body1: {
+        color: colors.font.default,
+        fontSize: "1.6rem",
+      },
+      body2: {
+        fontSize: "1.4rem",
+      },
+      button: {
+        fontSize: "1.4rem",
+      },
+      caption: {
+        fontSize: "1.2rem",
+      },
+      fontFamily,
+      h1: {
+        fontSize: "4.8rem",
+        fontWeight: 700,
+      },
+      h4: {
+        fontSize: "3.4rem",
+        color: colors.font.default,
+      },
+      h5: {
+        fontSize: "2.1rem",
+        fontWeight: 500,
+      },
+      h6: {
+        fontSize: "2rem",
+        fontWeight: 500,
+      },
+      subtitle1: {
+        fontSize: "1.6rem",
+      },
+      subtitle2: {
+        fontSize: "1.4rem",
+      },
+    },
+  }) as unknown) as SaleorTheme;

package/src/theme/createSaleorTheme/index.ts

@@ -0,0 +1,2 @@
+export * from "./createSaleorTheme";
+export * from "./types";

package/src/theme/createSaleorTheme/overrides/buttons.ts

@@ -0,0 +1,94 @@
+import { darken, fade } from "@material-ui/core/styles";
+import type { Overrides } from "@material-ui/core/styles/overrides";
+
+import { SaleorThemeColors } from "../types";
+
+export const buttonOverrides = (colors: SaleorThemeColors): Overrides => ({
+  MuiButton: {
+    contained: {
+      "&$disabled": {
+        backgroundColor: fade(colors.primary, 0.12),
+        color: "#FFFFFF",
+      },
+      "&:active": {
+        boxShadow: "none",
+      },
+      "&:hover": {
+        boxShadow: "none",
+      },
+      boxShadow: "none",
+    },
+    containedPrimary: {
+      "&:active": {
+        backgroundColor: darken(colors.primary, 0.4),
+      },
+      "&:hover": {
+        backgroundColor: darken(colors.primary, 0.1),
+      },
+    },
+    label: {
+      fontWeight: 600,
+    },
+    root: {
+      "& svg": {
+        marginLeft: 8,
+      },
+      borderRadius: 4,
+    },
+    textPrimary: {
+      "&:not($disabled) span": {
+        color: colors.primary,
+      },
+    },
+    textSizeSmall: {
+      fontSize: "1.3rem",
+    },
+  },
+  MuiIconButton: {
+    root: {
+      "&:hover": {
+        backgroundColor: fade(colors.primary, 0.12),
+      },
+    },
+  },
+  MuiSwitch: {
+    colorPrimary: {
+      "&$checked": {
+        color: colors.background.paper,
+      },
+    },
+    root: {
+      "&$disabled": {
+        "&$switchBase": {
+          "& + $thumb": {
+            backgroundColor: colors.gray.disabled,
+          },
+        },
+      },
+      height: 48,
+      width: 72,
+    },
+    switchBase: {
+      "&$checked": {
+        transform: "translateX(23px)",
+      },
+      boxShadow: "none",
+      left: 1,
+      marginLeft: 4,
+      top: 5,
+    },
+    thumb: {
+      boxShadow: "none",
+    },
+    track: {
+      "$colorPrimary$checked + &": {
+        backgroundColor: colors.primary,
+      },
+      backgroundColor: colors.gray.default,
+      borderRadius: 12,
+      height: 24,
+      opacity: [["1"], "!important"] as any,
+      width: 48,
+    },
+  },
+});

package/src/theme/createSaleorTheme/overrides/index.ts

@@ -0,0 +1,15 @@
+import type { Overrides } from "@material-ui/core/styles/overrides";
+
+import { SaleorThemeColors } from "../types";
+import { buttonOverrides } from "./buttons";
+import { inputOverrides } from "./inputs";
+import { tableOverrides } from "./tables";
+
+export const overrides = (
+  colors: SaleorThemeColors,
+  fontFamily: string
+): Overrides => ({
+  ...inputOverrides(colors),
+  ...tableOverrides(colors, fontFamily),
+  ...buttonOverrides(colors),
+});

package/src/theme/createSaleorTheme/overrides/inputs.ts

@@ -0,0 +1,149 @@
+import { fade } from "@material-ui/core/styles";
+import type { Overrides } from "@material-ui/core/styles/overrides";
+
+import { SaleorThemeColors } from "../types";
+
+export const inputOverrides = (colors: SaleorThemeColors): Overrides => ({
+  MuiInput: {
+    input: {
+      "&:-webkit-autofill": {
+        WebkitTextFillColor: colors.font.default,
+        boxShadow: `inset 0 0 0px 9999px ${colors.autofill}`,
+      },
+      "&::placeholder": {
+        opacity: "1 !important" as any,
+      },
+      color: colors.font.default,
+    },
+    underline: {
+      "&:after": {
+        borderBottomColor: colors.primary,
+      },
+    },
+  },
+  MuiInputBase: {
+    input: {
+      "&$disabled": {
+        color: colors.input.disabledText,
+      },
+      "&::placeholder": {
+        color: colors.font.gray,
+        opacity: "1 !important" as any,
+      },
+    },
+  },
+  MuiInputLabel: {
+    formControl: {
+      transform: "translate(0, 1.5px) scale(0.75)",
+      transformOrigin: "top left" as "top left",
+      width: "100%",
+    },
+    outlined: {
+      "&$shrink": {
+        transform: "translate(12px, 9px) scale(0.75)",
+      },
+      transform: "translate(14px, 18px) scale(1)",
+    },
+    root: {
+      "&$disabled": {
+        color: `${fade(colors.primary, 0.4)} !important` as any,
+      },
+      "&$error": {
+        "&$focused": {
+          color: colors.error,
+        },
+        color: colors.error,
+      },
+      "&&$focused": {
+        "&:not($error)": {
+          color: colors.primary,
+        },
+      },
+      color: fade(colors.input.text, 0.6),
+    },
+    shrink: {
+      // Negates x0.75 scale
+      width: "133%",
+    },
+  },
+  MuiOutlinedInput: {
+    input: {
+      "&:-webkit-autofill": {
+        borderRadius: 4,
+        boxShadow: "0 0 0px 1000px rgba(19, 190, 187, 0.1) inset",
+      },
+      color: colors.input.text,
+      padding: "23px 12px 10px 12px",
+    },
+    inputMultiline: {
+      left: -2,
+      padding: "10px 0",
+      position: "relative",
+    },
+    root: {
+      "& fieldset": {
+        "&&:not($error)": {
+          borderColor: colors.input.border,
+        },
+        top: 0,
+      },
+      "& legend": {
+        display: "none",
+      },
+      "&$disabled": {
+        "& fieldset": {
+          borderColor: [[colors.input.disabled], "!important"] as any,
+        },
+        "& input": {
+          backgroundColor: colors.input.disabledBackground,
+          color: colors.input.disabledText,
+        },
+      },
+      "&$error": {
+        "&$focused": {
+          "& fieldset": {
+            borderColor: colors.error,
+          },
+          "& input": {
+            color: colors.error,
+          },
+        },
+        "&:hover": {
+          "& fieldset": {
+            borderColor: colors.error,
+          },
+          "& input": {
+            color: colors.error,
+          },
+        },
+      },
+      "&$focused": {
+        "& input": {
+          "& fieldset": {
+            borderColor: colors.primary,
+          },
+          "&::placeholder": {
+            opacity: [[1], "!important"] as any,
+          },
+          color: colors.font.default,
+        },
+      },
+      "&:hover": {
+        "& input": {
+          color: colors.font.default,
+        },
+        "&&&": {
+          "& fieldset": {
+            borderColor: colors.primary,
+          },
+          "&$error fieldset": {
+            borderColor: colors.input.error,
+          },
+        },
+      },
+      backgroundColor: colors.background.paper,
+      borderColor: colors.input.border,
+      top: 0,
+    },
+  },
+});