From 115e22d01b73030cb6a4a4b3c005841b9d7213e6 Mon Sep 17 00:00:00 2001 From: Lachlan Campbell Date: Sun, 20 Nov 2022 13:37:00 -0500 Subject: [PATCH 01/10] Start global --- examples/next/lib/theme.ts | 6 +- examples/next/package.json | 1 + examples/next/pages/index.tsx | 2 + .../docs/src/pages/guides/global-styles.mdx | 32 +++++------ packages/docs/src/pages/packages/global.mdx | 7 +++ packages/docs/src/sidebar.mdx | 1 + packages/docs/static/card.svg | 2 +- packages/docs/static/logo.svg | 2 +- packages/global/README.md | 27 +++++++++ packages/global/package.json | 27 +++++++++ packages/global/src/index.tsx | 14 +++++ .../global/test/__snapshots__/index.tsx.snap | 7 +++ packages/global/test/index.tsx | 56 +++++++++++++++++++ packages/sidenav/src/index.tsx | 5 +- packages/theme-ui/package.json | 1 + packages/theme-ui/src/index.ts | 1 + pnpm-lock.yaml | 25 ++++++++- 17 files changed, 191 insertions(+), 25 deletions(-) create mode 100644 packages/docs/src/pages/packages/global.mdx create mode 100644 packages/global/README.md create mode 100644 packages/global/package.json create mode 100644 packages/global/src/index.tsx create mode 100644 packages/global/test/__snapshots__/index.tsx.snap create mode 100644 packages/global/test/index.tsx diff --git a/examples/next/lib/theme.ts b/examples/next/lib/theme.ts index 459f45a88..bf572c10d 100644 --- a/examples/next/lib/theme.ts +++ b/examples/next/lib/theme.ts @@ -1,6 +1,6 @@ -import { makeTheme } from '@theme-ui/css/utils' +// import { makeTheme } from '@theme-ui/css/utils' -export const theme = makeTheme({ +export const theme = { config: { initialColorModeName: 'light', useColorSchemeMediaQuery: true, @@ -49,4 +49,4 @@ export const theme = makeTheme({ cursor: 'pointer', }, }, -}) +} diff --git a/examples/next/package.json b/examples/next/package.json index f382667cc..0b92f0927 100644 --- a/examples/next/package.json +++ b/examples/next/package.json @@ -16,6 +16,7 @@ "@mdx-js/loader": "^2.1.2", "@mdx-js/react": "^2.1.2", "@next/mdx": "^12.0.7", + "@theme-ui/css": "workspace:^", "next": "^12.1.0", "react": "^18", "react-dom": "^18", diff --git a/examples/next/pages/index.tsx b/examples/next/pages/index.tsx index 66c505fc3..bfc356651 100644 --- a/examples/next/pages/index.tsx +++ b/examples/next/pages/index.tsx @@ -1,5 +1,6 @@ import Head from 'next/head' import About from '../components/about.mdx' +import { Global } from 'theme-ui' export default function Page() { return ( @@ -7,6 +8,7 @@ export default function Page() { Next.js Theme UI + ) diff --git a/packages/docs/src/pages/guides/global-styles.mdx b/packages/docs/src/pages/guides/global-styles.mdx index c95228cc1..26f887d8c 100644 --- a/packages/docs/src/pages/guides/global-styles.mdx +++ b/packages/docs/src/pages/guides/global-styles.mdx @@ -4,10 +4,15 @@ title: 'Global Styles' # Global Styles -Use the Emotion `Global` component to add global CSS with theme-based values. +Theme UI offers a `Global` component (that wraps Emotion’s) for adding global +CSS with theme-based values. -By default, the `ThemeProvider` component will apply styles in `theme.styles.root` to the `` element. -It will also apply `color` and `background-color` styles based on `theme.colors.text` and `theme.colors.background` respectively. +By default (or, unless the +[`useRootStyles` configuration option](/theming#configuration-flags)is +disabled), the `ThemeProvider` component will apply styles in +`theme.styles.root` to the `` element. It will also apply `color` and +`background-color` styles based on `theme.colors.text` and +`theme.colors.background` respectively. Generally, you should try to avoid adding CSS to global scope. Many styles can @@ -15,23 +20,18 @@ It will also apply `color` and `background-color` styles based on `theme.colors. ```jsx -import { Global } from '@emotion/react' +import { Global } from 'theme-ui' export default (props) => ( ({ - '*': { - boxSizing: 'border-box', + sx={{ + button: { + m: 0, + bg: 'primary', + color: 'background', + border: 0, }, - })} + }} /> ) ``` - - - - If you are upgrading from a version of theme-ui older that v0.6.0, be aware the import - package has changed from `@emotion/core` to `@emotion/react`. For more information see - the [Migration Notes for 0.6](https://theme-ui.com/migrating/#breaking-changes). - - diff --git a/packages/docs/src/pages/packages/global.mdx b/packages/docs/src/pages/packages/global.mdx new file mode 100644 index 000000000..c0bbbf9a4 --- /dev/null +++ b/packages/docs/src/pages/packages/global.mdx @@ -0,0 +1,7 @@ +--- +title: '@theme-ui/global' +--- + +import Readme from '@theme-ui/global/README.md' + + diff --git a/packages/docs/src/sidebar.mdx b/packages/docs/src/sidebar.mdx index 1c833bd65..3bb6d819e 100644 --- a/packages/docs/src/sidebar.mdx +++ b/packages/docs/src/sidebar.mdx @@ -58,6 +58,7 @@ - [@theme-ui/core](/packages/core) - [@theme-ui/components](/packages/components) - [@theme-ui/mdx](/packages/mdx) + - [@theme-ui/global](/packages/global) - [@theme-ui/presets](/packages/presets) - [@theme-ui/prism](/packages/prism) - [@theme-ui/color](/packages/color) diff --git a/packages/docs/static/card.svg b/packages/docs/static/card.svg index 2ee23e931..56a73676b 100644 --- a/packages/docs/static/card.svg +++ b/packages/docs/static/card.svg @@ -1,4 +1,4 @@ -