5fc88ed6b7
* Extract macaw theme palette to shared package * Use MacawThemeProvider from shared package * Fix maca theme provider props * Update invoices app ui * Add noSSRwrapper to packages shared * Use external theme provider in data importer * Use external theme provider in slack * Improve margin in TitleBar * Update colors in Klaviyo * revert search to use local theme provider * revert slack to use local theme provider * Rewrite TitleBar to css modules * Add unique jss classes prefix for Klaviyo * Update apps/search/src/pages/_app.tsx Co-authored-by: Krzysztof Wolski <krzysztof.k.wolski@gmail.com> * Update shy-gorillas-shop.md --------- Co-authored-by: Krzysztof Wolski <krzysztof.k.wolski@gmail.com>
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import {
|
|
dark,
|
|
light,
|
|
SaleorThemeColors,
|
|
ThemeProvider as MacawUIThemeProvider,
|
|
} from "@saleor/macaw-ui";
|
|
import { PropsWithChildren } from "react";
|
|
import { Theme } from "@material-ui/core/styles";
|
|
|
|
type PalettesOverride = Record<"light" | "dark", SaleorThemeColors>;
|
|
|
|
/**
|
|
* Temporary override of colors, to match new dashboard palette.
|
|
* Long term this will be replaced with Macaw UI 2.x with up to date design tokens
|
|
*/
|
|
const palettes: PalettesOverride = {
|
|
light: {
|
|
...light,
|
|
background: {
|
|
default: "#fff",
|
|
paper: "#fff",
|
|
},
|
|
},
|
|
dark: {
|
|
...dark,
|
|
background: {
|
|
default: "hsla(211, 42%, 14%, 1)",
|
|
paper: "hsla(211, 42%, 14%, 1)",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
* That's a hack required by Macaw-UI incompatibility with React@18
|
|
*/
|
|
const ThemeProvider = MacawUIThemeProvider as React.FC<
|
|
PropsWithChildren<{ overrides?: Partial<Theme>; ssr: boolean; palettes: PalettesOverride }>
|
|
>;
|
|
|
|
type OuterProps = PropsWithChildren<{ themeOverrides?: Partial<Theme> }>;
|
|
|
|
/**
|
|
* This is theme provider for old Macaw. Will be removed with Macaw/next
|
|
*/
|
|
export const MacawThemeProvider = (props: OuterProps) => {
|
|
return <ThemeProvider {...props} ssr palettes={palettes} />;
|
|
};
|