OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

upgrade to new Chakra extendTheme API

Browse source
This commit is contained in:
Emi Matchu 2020-12-25 09:20:18 -08:00
parent 91982c60d9
commit 131ff9d4c2
3 changed files with 18 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -8,6 +8,7 @@
"@auth0/auth0-react": "^1.0.0", "@auth0/auth0-react": "^1.0.0",
"@chakra-ui/icons": "^1.0.2", "@chakra-ui/icons": "^1.0.2",
"@chakra-ui/react": "^1.0.4", "@chakra-ui/react": "^1.0.4",
"@chakra-ui/theme-tools": "^1.0.2",
"@emotion/css": "^11.1.3", "@emotion/css": "^11.1.3",
"@emotion/react": "^11.1.4", "@emotion/react": "^11.1.4",
"@emotion/styled": "^11.0.0", "@emotion/styled": "^11.0.0",

22
src/app/App.js
View file

@ -1,8 +1,8 @@
import React from "react"; import React from "react";
import { ApolloProvider } from "@apollo/client"; import { ApolloProvider } from "@apollo/client";
import { Auth0Provider } from "@auth0/auth0-react"; import { Auth0Provider } from "@auth0/auth0-react";
import { CSSReset, ChakraProvider } from "@chakra-ui/react"; import { CSSReset, ChakraProvider, extendTheme } from "@chakra-ui/react";
import defaultTheme from "@chakra-ui/theme"; import { mode } from "@chakra-ui/theme-tools";
import { import {
BrowserRouter as Router, BrowserRouter as Router,
Switch, Switch,
@ -31,30 +31,22 @@ const WardrobePage = loadable(() => import("./WardrobePage"), {
fallback: <WardrobePageLayout />, fallback: <WardrobePageLayout />,
}); });
const theme = { const theme = extendTheme({
...defaultTheme,
styles: { styles: {
...defaultTheme.styles, global: (props) => ({
global: ({ colorMode, ...rest }) => {
const defaultGlobals = defaultTheme.styles.global({ colorMode, ...rest });
return {
...defaultGlobals,
html: { html: {
...defaultGlobals.html,
// HACK: Chakra sets body as the relative position element, which is // HACK: Chakra sets body as the relative position element, which is
// fine, except its `min-height: 100%` doesn't actually work // fine, except its `min-height: 100%` doesn't actually work
// unless paired with height on the root element too! // unless paired with height on the root element too!
height: "100%", height: "100%",
}, },
body: { body: {
...defaultGlobals.body, color: mode("green.800", "green.50")(props),
color: colorMode === "light" ? "green.800" : "green.50",
transition: "all 0.25s", transition: "all 0.25s",
}, },
}; }),
}, },
}, });
};
/** /**
* App is the entry point of our application. There's not a ton of exciting * App is the entry point of our application. There's not a ton of exciting

2
yarn.lock
View file

@ -2441,7 +2441,7 @@
"@chakra-ui/form-control" "1.1.0" "@chakra-ui/form-control" "1.1.0"
"@chakra-ui/utils" "1.0.2" "@chakra-ui/utils" "1.0.2"
"@chakra-ui/theme-tools@1.0.2": "@chakra-ui/theme-tools@1.0.2", "@chakra-ui/theme-tools@^1.0.2":
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-1.0.2.tgz#d4c36f3f4e60295e9f98d418182a98c76ff15393" resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-1.0.2.tgz#d4c36f3f4e60295e9f98d418182a98c76ff15393"
integrity sha512-wmjz5wPtjfslvvVMoHKyD8pnOQC0Facf93fKZupaxtXaol2eZZ/tYIiA6JUwe5mtk75WvLKAihpqaM8XxeXFWw== integrity sha512-wmjz5wPtjfslvvVMoHKyD8pnOQC0Facf93fKZupaxtXaol2eZZ/tYIiA6JUwe5mtk75WvLKAihpqaM8XxeXFWw==