From 9609b1a579c02f529ec00a5a2ca1d207d4f8bf83 Mon Sep 17 00:00:00 2001 From: Lachlan Campbell Date: Sun, 16 Jan 2022 20:32:26 -0500 Subject: [PATCH 01/13] feat(theme-ui): Add sx prop to BaseStyles component --- packages/theme-ui/src/index.ts | 17 +++++++++++------ .../theme-ui/test/__snapshots__/index.tsx.snap | 13 +++++++++++++ packages/theme-ui/test/index.tsx | 15 +++++++++++++++ 3 files changed, 39 insertions(+), 6 deletions(-) diff --git a/packages/theme-ui/src/index.ts b/packages/theme-ui/src/index.ts index 10deda679..7c8a3e0cb 100644 --- a/packages/theme-ui/src/index.ts +++ b/packages/theme-ui/src/index.ts @@ -1,4 +1,8 @@ -import { jsx as coreJsx, ThemeUIJSX } from '@theme-ui/core' +import { + jsx as coreJsx, + ThemeUIJSX, + type ThemeUIStyleObject, +} from '@theme-ui/core' export { __ThemeUIContext, merge, @@ -29,7 +33,9 @@ export { ThemeProvider } from '@theme-ui/theme-provider' export * from '@theme-ui/components' export { css, get } from '@theme-ui/css' -export const BaseStyles = (props: Record) => +export const BaseStyles = ( + props: Record & { sx?: ThemeUIStyleObject } +) => jsx('div', { ...props, sx: { @@ -37,6 +43,7 @@ export const BaseStyles = (props: Record) => lineHeight: 'body', fontWeight: 'body', variant: 'styles', + ...props.sx, }, }) @@ -50,10 +57,8 @@ export declare namespace jsx { extends ThemeUIJSX.ElementAttributesProperty {} export interface ElementChildrenAttribute extends ThemeUIJSX.ElementChildrenAttribute {} - export type LibraryManagedAttributes< - C, - P - > = ThemeUIJSX.LibraryManagedAttributes + export type LibraryManagedAttributes = + ThemeUIJSX.LibraryManagedAttributes export interface IntrinsicAttributes extends ThemeUIJSX.IntrinsicAttributes {} export interface IntrinsicClassAttributes diff --git a/packages/theme-ui/test/__snapshots__/index.tsx.snap b/packages/theme-ui/test/__snapshots__/index.tsx.snap index 45ea61dd7..f52646d68 100644 --- a/packages/theme-ui/test/__snapshots__/index.tsx.snap +++ b/packages/theme-ui/test/__snapshots__/index.tsx.snap @@ -12,6 +12,19 @@ exports[`BaseStyles renders 1`] = ` /> `; +exports[`BaseStyles renders sx prop styles 1`] = ` +.emotion-0 { + font-family: body; + line-height: body; + font-weight: body; + color: var(--theme-ui-colors-custom); +} + +
+`; + exports[`creates non-standard components 1`] = ` .emotion-0 { color: tomato; diff --git a/packages/theme-ui/test/index.tsx b/packages/theme-ui/test/index.tsx index 2137d3d1a..f5dfb5737 100644 --- a/packages/theme-ui/test/index.tsx +++ b/packages/theme-ui/test/index.tsx @@ -217,6 +217,21 @@ test('BaseStyles renders', () => { expect(json).toMatchSnapshot() }) +test('BaseStyles renders sx prop styles', () => { + const json = renderJSON( + + + + ) + expect(json).toMatchSnapshot() +}) + test('custom pragma adds styles', () => { const json = renderJSON( jsx('div', { From c62e6e1be969230be59e6399879da6bc56aab91b Mon Sep 17 00:00:00 2001 From: Lachlan Campbell Date: Sun, 16 Jan 2022 22:24:36 -0500 Subject: [PATCH 02/13] fix(sidenav): Build with latest theme-ui version --- packages/sidenav/package.json | 2 +- yarn.lock | 139 ++++++++++++++-------------------- 2 files changed, 58 insertions(+), 83 deletions(-) diff --git a/packages/sidenav/package.json b/packages/sidenav/package.json index 1dc6ea3a5..d0c209966 100644 --- a/packages/sidenav/package.json +++ b/packages/sidenav/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "deepmerge": "^4.0.0", - "theme-ui": "0.10.0" + "theme-ui": "latest" }, "peerDependencies": { "@emotion/react": "^11", diff --git a/yarn.lock b/yarn.lock index 1b1f3771b..eb7338eae 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1447,7 +1447,7 @@ dependencies: "@emotion/memoize" "0.7.4" -"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.1.1": +"@emotion/is-prop-valid@^1.1.1": version "1.1.1" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.1.tgz#cbd843d409dfaad90f9404e7c0404c55eae8c134" integrity sha512-bW1Tos67CZkOURLc0OalnfxtSXQJMrAMV0jZTVGJUPSOd4qgjF3+tTD5CwJM13PHA8cltGW1WGbbvV9NpvUZPw== @@ -1475,7 +1475,7 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50" integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ== -"@emotion/react@^11", "@emotion/react@^11.1.1", "@emotion/react@^11.6.0": +"@emotion/react@^11", "@emotion/react@^11.6.0": version "11.7.1" resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.7.1.tgz#3f800ce9b20317c13e77b8489ac4a0b922b2fe07" integrity sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw== @@ -1504,17 +1504,6 @@ resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.0.tgz#56d99c41f0a1cda2726a05aa6a20afd4c63e58d2" integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g== -"@emotion/styled@^11.0.0": - version "11.3.0" - resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.3.0.tgz#d63ee00537dfb6ff612e31b0e915c5cf9925a207" - integrity sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA== - dependencies: - "@babel/runtime" "^7.13.10" - "@emotion/babel-plugin" "^11.3.0" - "@emotion/is-prop-valid" "^1.1.0" - "@emotion/serialize" "^1.0.2" - "@emotion/utils" "^1.0.0" - "@emotion/styled@^11.6.0": version "11.6.0" resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.6.0.tgz#9230d1a7bcb2ebf83c6a579f4c80e0664132d81d" @@ -3518,76 +3507,66 @@ "@babel/runtime" "^7.12.5" "@testing-library/dom" "^8.0.0" -"@theme-ui/color-modes@0.10.0": - version "0.10.0" - resolved "https://registry.yarnpkg.com/@theme-ui/color-modes/-/color-modes-0.10.0.tgz#85071f16d7d4458f3dab5a7af8b9ea459da4dcd0" - integrity sha512-6sZaagCFK48p2YjecLljFwPkiB3/R9dMNKUQC3+fnaH3N9FcsflNWpjKAYhtQ5QLKvYacFdqczT4YaMtGwKb/Q== +"@theme-ui/color-modes@0.13.1": + version "0.13.1" + resolved "https://registry.yarnpkg.com/@theme-ui/color-modes/-/color-modes-0.13.1.tgz#c445bfeefa6c689502260923a1c3c4f1e1ad7793" + integrity sha512-10J8/FIcJz1bSTmB4hY2tHunSgnj3N9foDolOfN67vlDdCrw3Q1oL4aMqzxzdq43K6XoNh/Th9C7JlnGpPUMfQ== dependencies: - "@emotion/react" "^11.1.1" - "@theme-ui/core" "0.10.0" - "@theme-ui/css" "0.10.0" + "@theme-ui/core" "0.13.1" + "@theme-ui/css" "0.13.1" deepmerge "^4.2.2" -"@theme-ui/components@0.10.0": - version "0.10.0" - resolved "https://registry.yarnpkg.com/@theme-ui/components/-/components-0.10.0.tgz#c1aa9cade71e5a6cf7c19f9e0ade900122ef23f9" - integrity sha512-zPA+16fP+R140kns+3FBhybsPzNjcCWHgXcwIPjww1dfDnlXRa7al9Nz4Y8zyWvk1wNiGqUa09Y1sabK6EYspQ== +"@theme-ui/components@0.13.1": + version "0.13.1" + resolved "https://registry.yarnpkg.com/@theme-ui/components/-/components-0.13.1.tgz#fe2a3dfd8b9e36774225d6bb5f68cbf4984ad7c7" + integrity sha512-gPsyUlsSrErqKLr69hp5n1iD6Pqr0pVKC3RaMq1i9nZRQaRBUn0+7cd7muhvEYbUcgC5jbDm6n0jnul5qWRObA== dependencies: - "@emotion/react" "^11.1.1" - "@emotion/styled" "^11.0.0" "@styled-system/color" "^5.1.2" "@styled-system/should-forward-prop" "^5.1.2" "@styled-system/space" "^5.1.2" - "@theme-ui/css" "0.10.0" - "@types/styled-system" "^5.1.10" + "@theme-ui/css" "0.13.1" + "@types/styled-system" "^5.1.13" -"@theme-ui/core@0.10.0": - version "0.10.0" - resolved "https://registry.yarnpkg.com/@theme-ui/core/-/core-0.10.0.tgz#2373d53368da5fa561915414ade070a9de0e9678" - integrity sha512-3DeTHGqyqIi05JCsJ+G+fqW6YsX/oGJiaAvMgLfd86tGdJOnDseEBQG41oDFHSWtQSJDpBcoFgAWMGITmYdH+g== +"@theme-ui/core@0.13.1": + version "0.13.1" + resolved "https://registry.yarnpkg.com/@theme-ui/core/-/core-0.13.1.tgz#1e3ddb899a1b862ca80f00f68243524dc0076820" + integrity sha512-Mbf4XfNHBy7H1brRe4aegGRTRyvLCsFcpC0qrx0yGCJPDSg9cRpaM6cZ+BCoshRG8fGD727bIyxo2i2co+y8Bw== dependencies: - "@emotion/react" "^11.1.1" - "@theme-ui/css" "0.10.0" - "@theme-ui/parse-props" "0.10.0" + "@theme-ui/css" "0.13.1" + "@theme-ui/parse-props" "0.13.1" deepmerge "^4.2.2" -"@theme-ui/css@0.10.0": - version "0.10.0" - resolved "https://registry.yarnpkg.com/@theme-ui/css/-/css-0.10.0.tgz#871f63334fb138491406c32f8347d53b19846a9b" - integrity sha512-Up3HqXoy2ERn/9gVxApCSl2n9vwtHBwPrYlMyEjX0YPs/rxmo+Aqe3kAxO+SG9idMw08mtdaDfMIFaPsBE5ovA== +"@theme-ui/css@0.13.1": + version "0.13.1" + resolved "https://registry.yarnpkg.com/@theme-ui/css/-/css-0.13.1.tgz#872e80a03af89c8bde21be29dbfd02f53b0b6f83" + integrity sha512-O85gC3SLKM7HhFYBTnTuhfLdieY+kZCnSuYG+P5quf3XFJEZTYtpwucoU2NDNALSOAoSgfGb7pgTB9cmNHRB5Q== dependencies: - "@emotion/react" "^11.1.1" - csstype "^3.0.5" + csstype "^3.0.10" -"@theme-ui/mdx@0.10.0": - version "0.10.0" - resolved "https://registry.yarnpkg.com/@theme-ui/mdx/-/mdx-0.10.0.tgz#14124cb194df8023f7253391900d8d17a6011a92" - integrity sha512-IcDrQONVrOFQFCFdyrlNoTTKmhw7ELtrLktRYmmWtCEz+KHpBiEVdxNo2yvz/05zF2BPGKOqu4wkMpUR13wNSQ== +"@theme-ui/mdx@0.13.1": + version "0.13.1" + resolved "https://registry.yarnpkg.com/@theme-ui/mdx/-/mdx-0.13.1.tgz#23fe6e42352038bb516cca2fc2539177127a60a3" + integrity sha512-P4jtqB9iJQcy0qiD4c30QVYEMxvPwhfegPte/ifcOr8NR4dO/gTP9jkbGN7DgXGvIkNitzCNZjjrQT9IcbPAJg== dependencies: - "@emotion/react" "^11.1.1" - "@emotion/styled" "^11.0.0" - "@mdx-js/react" "^1.6.22" - "@theme-ui/core" "0.10.0" - "@theme-ui/css" "0.10.0" + "@theme-ui/core" "0.13.1" + "@theme-ui/css" "0.13.1" -"@theme-ui/parse-props@0.10.0": - version "0.10.0" - resolved "https://registry.yarnpkg.com/@theme-ui/parse-props/-/parse-props-0.10.0.tgz#8d2f4f3b3edafd925c3872ddd559e2b62006f43f" - integrity sha512-UfcLyThXYsB9azc8qbsZVgbF7xf+GLF2Hhy+suyjwQ3XSVOx97B5ZsuzCNUGbggtBw4dXayJgRmMz0FHyp0L8Q== +"@theme-ui/parse-props@0.13.1": + version "0.13.1" + resolved "https://registry.yarnpkg.com/@theme-ui/parse-props/-/parse-props-0.13.1.tgz#c1171ff02356ea630094fa44ced8682ef89f2653" + integrity sha512-+IU0yP0UxBF1JYIkPphsElzdEeZy7/KRAjly6nDNLlB8CfddfS+ET+JrK1BMQjDKSso796atVw+f+32hp0ZrAg== dependencies: - "@emotion/react" "^11.1.1" - "@theme-ui/css" "0.10.0" + "@theme-ui/css" "0.13.1" -"@theme-ui/theme-provider@0.10.0": - version "0.10.0" - resolved "https://registry.yarnpkg.com/@theme-ui/theme-provider/-/theme-provider-0.10.0.tgz#16586af579bef804f1e4997a131134d2465bfd5d" - integrity sha512-1AVsegjEAw7uidr0/qJMoKktKbdXuXRjfukI9712GZleft3dzoHhkQUO7IefXjbafyu/plzo/WTXkbz0A4uhmA== +"@theme-ui/theme-provider@0.13.1": + version "0.13.1" + resolved "https://registry.yarnpkg.com/@theme-ui/theme-provider/-/theme-provider-0.13.1.tgz#a00595f7579cd9ee447332f6b640853cc7041f22" + integrity sha512-4bXBYr1xTR7QTNXQ41x87xjwbQeJjsw2AtQiyCE80QWOija+E+sbtLyPJQrRxs+z7Z2WxbSt0nlWewirlyx8EQ== dependencies: - "@emotion/react" "^11.1.1" - "@theme-ui/color-modes" "0.10.0" - "@theme-ui/core" "0.10.0" - "@theme-ui/css" "0.10.0" - "@theme-ui/mdx" "0.10.0" + "@theme-ui/color-modes" "0.13.1" + "@theme-ui/core" "0.13.1" + "@theme-ui/css" "0.13.1" + "@theme-ui/mdx" "0.13.1" "@tokenizer/token@^0.3.0": version "0.3.0" @@ -4078,7 +4057,7 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff" integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw== -"@types/styled-system@^5.1.10", "@types/styled-system@^5.1.13": +"@types/styled-system@^5.1.13": version "5.1.13" resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.13.tgz#9ad667534d3bd75720dd7778c94c783449cb5c14" integrity sha512-RtpV6zXnnMQNcxKjC06BUM4MUER5o9uZ6b7xAc2OzhWxSsmQ3jXyW8ohuXdEJRKypEe0EqAzbSGx2Im0NXfdKA== @@ -7140,11 +7119,6 @@ csstype@^3.0.10, csstype@^3.0.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5" integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA== -csstype@^3.0.5: - version "3.0.9" - resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b" - integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw== - currently-unhandled@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea" @@ -13297,6 +13271,7 @@ minipass-fetch@^1.3.0, minipass-fetch@^1.3.2: resolved "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-1.3.3.tgz#34c7cea038c817a8658461bf35174551dce17a0a" integrity sha512-akCrLDWfbdAWkMLBxJEeWTdNsjML+dt5YgOI4gJ53vuO0vrmYQkUPxa6j6V65s9CcePIr2SSWqjT2EcrNseryQ== dependencies: + encoding "^0.1.12" minipass "^3.1.0" minipass-sized "^1.0.3" minizlib "^2.0.0" @@ -18248,17 +18223,17 @@ text-table@0.2.0, text-table@^0.2.0: resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ= -theme-ui@0.10.0: - version "0.10.0" - resolved "https://registry.yarnpkg.com/theme-ui/-/theme-ui-0.10.0.tgz#4fce8fbe7ad008ec07b383eaf5f468b0317fcfa1" - integrity sha512-6uj9/4n6gZrlhrfQKt+QoLdtVc46ETJZv42iqedCatXaaTA5tHN1j7TJDmvYD9ooD/CT0+hsvOrx2d2etb/kYg== - dependencies: - "@theme-ui/color-modes" "0.10.0" - "@theme-ui/components" "0.10.0" - "@theme-ui/core" "0.10.0" - "@theme-ui/css" "0.10.0" - "@theme-ui/mdx" "0.10.0" - "@theme-ui/theme-provider" "0.10.0" +theme-ui@latest: + version "0.13.1" + resolved "https://registry.yarnpkg.com/theme-ui/-/theme-ui-0.13.1.tgz#33845b52ab97822617a33de59c3e3267dc00398a" + integrity sha512-9GGY68GUEHZSwmaCHJ75c2vl0oe90JLarMJgKh59pu38nzc15Ubqg5QqEqp0lLGubKBe4EQZtriatO+V7734SA== + dependencies: + "@theme-ui/color-modes" "0.13.1" + "@theme-ui/components" "0.13.1" + "@theme-ui/core" "0.13.1" + "@theme-ui/css" "0.13.1" + "@theme-ui/mdx" "0.13.1" + "@theme-ui/theme-provider" "0.13.1" throat@^6.0.1: version "6.0.1" From a5f490eda1667dd746cab839b03856969b1bad68 Mon Sep 17 00:00:00 2001 From: Lachlan Campbell Date: Sun, 16 Jan 2022 22:33:28 -0500 Subject: [PATCH 03/13] Set up CodeSandbox CI --- .codesandbox/ci.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .codesandbox/ci.json diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json new file mode 100644 index 000000000..e39bb8e04 --- /dev/null +++ b/.codesandbox/ci.json @@ -0,0 +1,7 @@ +{ + "installCommand": "install", + "buildCommand": "build", + "packages": ["packages/*"], + "sandboxes": ["/examples/next", "/examples/gatsby-plugin"], + "node": "16" +} From 10423e905eaa987e81bc98eba00144fa346679fc Mon Sep 17 00:00:00 2001 From: Lachlan Campbell Date: Sun, 16 Jan 2022 22:34:48 -0500 Subject: [PATCH 04/13] Remove installCommand --- .codesandbox/ci.json | 1 - 1 file changed, 1 deletion(-) diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index e39bb8e04..936466433 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -1,5 +1,4 @@ { - "installCommand": "install", "buildCommand": "build", "packages": ["packages/*"], "sandboxes": ["/examples/next", "/examples/gatsby-plugin"], From 6c767a903760acda4adb9a92fcbb9d61272efd54 Mon Sep 17 00:00:00 2001 From: Lachlan Campbell Date: Sun, 16 Jan 2022 22:36:38 -0500 Subject: [PATCH 05/13] examples: Remove CodeSandbox starter example --- examples/codesandbox-starter/.babelrc | 5 ---- examples/codesandbox-starter/.prettierrc | 11 --------- examples/codesandbox-starter/index.html | 14 ----------- examples/codesandbox-starter/package.json | 29 ----------------------- examples/codesandbox-starter/src/index.js | 20 ---------------- examples/codesandbox-starter/src/theme.js | 23 ------------------ 6 files changed, 102 deletions(-) delete mode 100755 examples/codesandbox-starter/.babelrc delete mode 100755 examples/codesandbox-starter/.prettierrc delete mode 100755 examples/codesandbox-starter/index.html delete mode 100644 examples/codesandbox-starter/package.json delete mode 100755 examples/codesandbox-starter/src/index.js delete mode 100755 examples/codesandbox-starter/src/theme.js diff --git a/examples/codesandbox-starter/.babelrc b/examples/codesandbox-starter/.babelrc deleted file mode 100755 index cbf001f9e..000000000 --- a/examples/codesandbox-starter/.babelrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "presets": ["env", "react"], - "plugins": ["transform-runtime"] -} - diff --git a/examples/codesandbox-starter/.prettierrc b/examples/codesandbox-starter/.prettierrc deleted file mode 100755 index 6b33f0821..000000000 --- a/examples/codesandbox-starter/.prettierrc +++ /dev/null @@ -1,11 +0,0 @@ -{ - "printWidth": 80, - "tabWidth": 2, - "useTabs": false, - "semi": false, - "singleQuote": true, - "trailingComma": "es5", - "bracketSpacing": true, - "jsxBracketSameLine": false, - "fluid": false -} diff --git a/examples/codesandbox-starter/index.html b/examples/codesandbox-starter/index.html deleted file mode 100755 index 483d2633e..000000000 --- a/examples/codesandbox-starter/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - Theme UI Sandbox - - - - - -
- - - - diff --git a/examples/codesandbox-starter/package.json b/examples/codesandbox-starter/package.json deleted file mode 100644 index 16c7427b2..000000000 --- a/examples/codesandbox-starter/package.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "name": "theme-ui-starter", - "private": true, - "version": "0.1.0", - "description": "A sandbox configured with Theme UI, including the `base` theme.", - "main": "index.html", - "scripts": { - "start": "parcel index.html --open", - "build": "parcel build index.html" - }, - "dependencies": { - "@emotion/react": "^11", - "@mdx-js/react": "^1.6.22", - "@theme-ui/presets": "latest", - "react": "^16.14.0", - "react-dom": "^16.14.0", - "theme-ui": "latest" - }, - "devDependencies": { - "@babel/core": "^7.7.4", - "parcel-bundler": "^1.6.1" - }, - "keywords": [ - "react", - "theme-ui", - "starter", - "styled-system" - ] -} diff --git a/examples/codesandbox-starter/src/index.js b/examples/codesandbox-starter/src/index.js deleted file mode 100755 index aec1965b5..000000000 --- a/examples/codesandbox-starter/src/index.js +++ /dev/null @@ -1,20 +0,0 @@ -/** @jsx jsx */ - -import ReactDOM from 'react-dom' -import ThemeProvider, { Reset } from './theme' -import { jsx, Layout, Themed } from 'theme-ui' - -function App() { - return ( - - - - Hello Theme UI - Start editing to see some magic happen! - - - ) -} - -const rootElement = document.getElementById('root') -ReactDOM.render(, rootElement) diff --git a/examples/codesandbox-starter/src/theme.js b/examples/codesandbox-starter/src/theme.js deleted file mode 100755 index 279175026..000000000 --- a/examples/codesandbox-starter/src/theme.js +++ /dev/null @@ -1,23 +0,0 @@ -/** @jsx jsx */ - -import { Global } from '@emotion/react' -import React, { memo } from 'react' -import { jsx, useThemeUI, ThemeProvider, Themed } from 'theme-ui' -import { base } from '@theme-ui/presets' - -const CustomThemeProvider = memo(({ children, ...props }) => ( - - {children} - -)) - -const Reset = () => - React.createElement(Global, { - styles: { - body: { - margin: '0', - }, - }, - }) - -export { useThemeUI as useTheme, Reset, CustomThemeProvider as default } From 90a3cbe1590cd5dbc34bd659fb6fa38a306f0883 Mon Sep 17 00:00:00 2001 From: Lachlan Campbell Date: Sun, 16 Jan 2022 22:39:44 -0500 Subject: [PATCH 06/13] Only build theme-ui & core? --- .codesandbox/ci.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 936466433..969215419 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -1,6 +1,6 @@ { "buildCommand": "build", - "packages": ["packages/*"], + "packages": ["packages/theme-ui", "packages/core"], "sandboxes": ["/examples/next", "/examples/gatsby-plugin"], "node": "16" } From eca60a26f7eea59333b8a81fad9b0c4f3c92dfc7 Mon Sep 17 00:00:00 2001 From: Lachlan Campbell Date: Sun, 16 Jan 2022 11:45:00 -0500 Subject: [PATCH 07/13] fix(docs): Update recommendations in Keyframes doc --- packages/docs/src/pages/guides/keyframes.mdx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/docs/src/pages/guides/keyframes.mdx b/packages/docs/src/pages/guides/keyframes.mdx index e3f79da30..e7ac29d7b 100644 --- a/packages/docs/src/pages/guides/keyframes.mdx +++ b/packages/docs/src/pages/guides/keyframes.mdx @@ -16,7 +16,7 @@ library itself. Instead, use [the `keyframes` helper from Emotion](https://emoti -Because `@emotion/react` is a dependency of Theme UI, it’s available in your +`@emotion/react` is a peer dependency of Theme UI, so while required alongside available in your project without manual installation. Installing it separately can cause configuration issues due to multiple copies with conflicting versions. @@ -35,15 +35,18 @@ const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } }) export default (props) => ( ) ``` + + +To directly set `animationName` using object syntax, append `.toString()` to the animation variable. +This workaround is not needed when using the variable inside a template string, such as above. + + + Using template literal syntax: ```js From d75181c688a79caacd0a2636963bd15ae857bad1 Mon Sep 17 00:00:00 2001 From: Lachlan Campbell Date: Sun, 16 Jan 2022 11:46:53 -0500 Subject: [PATCH 08/13] Finish editing note --- packages/docs/src/pages/guides/keyframes.mdx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/docs/src/pages/guides/keyframes.mdx b/packages/docs/src/pages/guides/keyframes.mdx index e7ac29d7b..330332202 100644 --- a/packages/docs/src/pages/guides/keyframes.mdx +++ b/packages/docs/src/pages/guides/keyframes.mdx @@ -16,9 +16,8 @@ library itself. Instead, use [the `keyframes` helper from Emotion](https://emoti -`@emotion/react` is a peer dependency of Theme UI, so while required alongside available in your -project without manual installation. Installing it separately can cause configuration issues due to -multiple copies with conflicting versions. +`@emotion/react` is a peer dependency of Theme UI, so while required alongside Theme UI packages, +it needs manual installation in your project. From 804dac0a4f33294884de548ca839055e7bde21ae Mon Sep 17 00:00:00 2001 From: Lachlan Campbell Date: Mon, 17 Jan 2022 10:52:36 -0500 Subject: [PATCH 09/13] docs: Document default theme values Closes #2026 --- packages/docs/src/pages/theming.mdx | 36 ++++++++++++++++++++++++----- 1 file changed, 30 insertions(+), 6 deletions(-) diff --git a/packages/docs/src/pages/theming.mdx b/packages/docs/src/pages/theming.mdx index 61517f6bd..94d6bda60 100644 --- a/packages/docs/src/pages/theming.mdx +++ b/packages/docs/src/pages/theming.mdx @@ -20,7 +20,7 @@ In order to ensure color palettes are as interoperable as possible, the followin Beyond these base colors, any additional values can be added to a theme to augment the base color palette. -### Color Modes +### Color modes Multiple color modes, i.e. _dark mode_, can be handled with a nested `modes` object that matches the shape of the default colors. @@ -90,7 +90,7 @@ For other units, use string values, e.g. `'1em'`. ## Styles Styles for elements rendered in MDX can be added to the `theme.styles` object. -This is the primary API for applying typographic styles in markdown content. +This is the primary API for applying typographic styles in Markdown content. Styles within this object have access to other values in the theme object, such as colors, fonts, and space. ```js @@ -122,7 +122,13 @@ Styles within this object have access to other values in the theme object, such } ``` -## Root Styles + + +To use these styles arbitrarily, such as for markup from a CMS, see the [BaseStyles component](/api#basestyles). + + + +## Root styles To add base, top-level styles to the `` element, use `theme.styles.root`. @@ -147,7 +153,11 @@ To add base, top-level styles to the `` element, use `theme.styles.root`. } ``` -- To disable applying styles to the `` element, add the `config: { useRootStyles: false }` flag to your theme. + + +To disable applying styles to the `` element, add the `config: { useRootStyles: false }` flag to your theme. + + ## Breakpoints @@ -165,7 +175,7 @@ The breakpoints can then be used to apply [responsive styles](/sx-prop/#responsi } ``` -## Configuration Flags +## Configuration flags The theme object can also include configuration options for Theme UI, which are nested in the `config` object. The following keys can be used to enable and disable certain features. @@ -179,7 +189,19 @@ The following keys can be used to enable and disable certain features. | `useBorderBox` | `true` | Adds a global `box-sizing: border-box` style | | `useLocalStorage` | `true` | Persists the color mode in `localStorage` | -## Example Theme +## Default theme + +If your custom theme doesn’t override these properties, Theme UI will use these default values. + +```js +{ + breakpoints: [40, 52, 64].map((n) => n + 'em'), + space: [0, 4, 8, 16, 32, 64, 128, 256, 512], + fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72], +} +``` + +## Example theme The following example is from the [Base Preset][example]. @@ -276,6 +298,8 @@ export const theme = { } ``` +For alternative pre-made themes, check out the [presets package](/packages/presets), +and to see open source custom themes, check out [this collection](/resources#custom-themes). For more information on the Theme UI `theme` object, see the [Theme Specification docs](/theme-spec). [example]: https://github.com/system-ui/theme-ui/tree/develop/packages/preset-base/src/index.ts From 291d69fcbbf7bf030253f9120b6ba97f922713e2 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 21 Jan 2022 17:08:28 +0000 Subject: [PATCH 10/13] chore(deps): bump trim-off-newlines from 1.0.1 to 1.0.3 Bumps [trim-off-newlines](https://github.com/stevemao/trim-off-newlines) from 1.0.1 to 1.0.3. - [Release notes](https://github.com/stevemao/trim-off-newlines/releases) - [Commits](https://github.com/stevemao/trim-off-newlines/compare/v1.0.1...v1.0.3) --- updated-dependencies: - dependency-name: trim-off-newlines dependency-type: indirect ... Signed-off-by: dependabot[bot] --- yarn.lock | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/yarn.lock b/yarn.lock index eb7338eae..9585b92fd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13271,7 +13271,6 @@ minipass-fetch@^1.3.0, minipass-fetch@^1.3.2: resolved "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-1.3.3.tgz#34c7cea038c817a8658461bf35174551dce17a0a" integrity sha512-akCrLDWfbdAWkMLBxJEeWTdNsjML+dt5YgOI4gJ53vuO0vrmYQkUPxa6j6V65s9CcePIr2SSWqjT2EcrNseryQ== dependencies: - encoding "^0.1.12" minipass "^3.1.0" minipass-sized "^1.0.3" minizlib "^2.0.0" @@ -18427,9 +18426,9 @@ trim-newlines@^3.0.0: integrity sha512-C4+gOpvmxaSMKuEf9Qc134F1ZuOHVXKRbtEflf4NTtuuJDEIJ9p5PXsalL8SkeRw+qit1Mo+yuvMPAKwWg/1hA== trim-off-newlines@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz#9f9ba9d9efa8764c387698bcbfeb2c848f11adb3" - integrity sha1-n5up2e+odkw4dpi8v+sshI8RrbM= + version "1.0.3" + resolved "https://registry.yarnpkg.com/trim-off-newlines/-/trim-off-newlines-1.0.3.tgz#8df24847fcb821b0ab27d58ab6efec9f2fe961a1" + integrity sha512-kh6Tu6GbeSNMGfrrZh6Bb/4ZEHV1QlB4xNDBeog8Y9/QwFlKTRyWvY3Fs9tRDAMZliVUwieMgEdIeL/FtqjkJg== trim-trailing-lines@^1.0.0: version "1.1.4" From ab876338e4024b6858f00e6e651143465b81ac6a Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Fri, 21 Jan 2022 18:12:49 +0100 Subject: [PATCH 11/13] docs(examples/next): fix case insensitive import Hey @lachlanjc, I noticed that Next.js example was failing on this case-insensitive import while reviewing https://github.com/system-ui/theme-ui/pull/2085 :) --- examples/next/pages/_app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/next/pages/_app.tsx b/examples/next/pages/_app.tsx index 59317d512..1e9b129c6 100644 --- a/examples/next/pages/_app.tsx +++ b/examples/next/pages/_app.tsx @@ -1,7 +1,7 @@ /** @jsxImportSource theme-ui */ import { ThemeProvider } from 'theme-ui' -import Header from '../components/header' +import Header from '../components/Header' import { theme } from '../lib/theme' import type { AppProps } from 'next/app' From 914ba8955db33168de30304b6863a71fbda7c0e1 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat, 22 Jan 2022 09:20:38 +0000 Subject: [PATCH 12/13] chore(deps): bump nanoid from 3.1.30 to 3.2.0 Bumps [nanoid](https://github.com/ai/nanoid) from 3.1.30 to 3.2.0. - [Release notes](https://github.com/ai/nanoid/releases) - [Changelog](https://github.com/ai/nanoid/blob/main/CHANGELOG.md) - [Commits](https://github.com/ai/nanoid/compare/3.1.30...3.2.0) --- updated-dependencies: - dependency-name: nanoid dependency-type: indirect ... Signed-off-by: dependabot[bot] --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 9585b92fd..27335c803 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13489,9 +13489,9 @@ nan@^2.14.2: integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ== nanoid@^3.1.30: - version "3.1.30" - resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362" - integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ== + version "3.2.0" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c" + integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA== nanomatch@^1.2.9: version "1.2.13" From 9a8a503b6f4ad09581f50f8ca825dbebb559b720 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat, 22 Jan 2022 17:47:57 +0000 Subject: [PATCH 13/13] chore(deps): bump nanoid from 3.1.30 to 3.2.0 in /examples/next Bumps [nanoid](https://github.com/ai/nanoid) from 3.1.30 to 3.2.0. - [Release notes](https://github.com/ai/nanoid/releases) - [Changelog](https://github.com/ai/nanoid/blob/main/CHANGELOG.md) - [Commits](https://github.com/ai/nanoid/compare/3.1.30...3.2.0) --- updated-dependencies: - dependency-name: nanoid dependency-type: indirect ... Signed-off-by: dependabot[bot] --- examples/next/yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/next/yarn.lock b/examples/next/yarn.lock index 72c738f0d..5ca92dea6 100644 --- a/examples/next/yarn.lock +++ b/examples/next/yarn.lock @@ -2063,9 +2063,9 @@ ms@2.1.2: integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== nanoid@^3.1.23: - version "3.1.30" - resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362" - integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ== + version "3.2.0" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c" + integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA== next@^12.0.7: version "12.0.7"