fix(color-modes): combine colors in nested providers #1838

hasparus · 2021-06-19T17:28:13Z

Should close #1456.

Updated repro: https://codesandbox.io/s/theme-ui-nested-color-modes-bug-qm0lt?file=/src/index.js.

Okay, as we discovered with @fcisio, this PR needs one more change.

Neted theme providers are not updated after SSR with local storage scenario. This could be fixed either by mutating nested theme provider div custom CSS properties or rerendering with proper color mode after hydration (what would also solve derived colors not refreshing after SSR + localStorage read).

📦 Published PR as canary version: 0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0

✨ Test out this PR locally via:

npm install @theme-ui/color-modes@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/color@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/components@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/core@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/css@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/custom-properties@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/editor@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install gatsby-plugin-theme-ui@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install gatsby-theme-style-guide@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install gatsby-theme-ui-layout@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/match-media@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/mdx@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/parse-props@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/preset-base@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/preset-bootstrap@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/preset-bulma@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/preset-dark@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/preset-deep@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/preset-funk@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/preset-future@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/preset-polaris@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/preset-roboto@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/preset-sketchy@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/preset-swiss@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/preset-system@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/preset-tailwind@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/preset-tosh@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/presets@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/prism@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/sidenav@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/style-guide@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/tachyons@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/tailwind@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/theme-provider@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install theme-ui@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
npm install @theme-ui/typography@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
# or 
yarn add @theme-ui/color-modes@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/color@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/components@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/core@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/css@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/custom-properties@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/editor@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add gatsby-plugin-theme-ui@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add gatsby-theme-style-guide@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add gatsby-theme-ui-layout@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/match-media@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/mdx@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/parse-props@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/preset-base@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/preset-bootstrap@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/preset-bulma@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/preset-dark@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/preset-deep@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/preset-funk@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/preset-future@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/preset-polaris@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/preset-roboto@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/preset-sketchy@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/preset-swiss@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/preset-system@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/preset-tailwind@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/preset-tosh@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/presets@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/prism@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/sidenav@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/style-guide@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/tachyons@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/tailwind@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/theme-provider@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add theme-ui@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0
yarn add @theme-ui/typography@0.11.0-canary.1838.cb3f895316aec940d67cb30e112b2ba2f67e2190.0

Version

Published prerelease version: v0.11.0-develop.0

Changelog

🎉 This release contains work from a new contributor! 🎉

Thank you, null@jordie23, for all your work!

🚀 Enhancement

@theme-ui/color-modes, @theme-ui/core, @theme-ui/editor, @theme-ui/theme-provider, theme-ui
- fix(color-modes): combine colors in nested providers #1838 (@hasparus)

🐛 Bug Fix

Update global-styles.mdx #1858 (@jordie23)
@theme-ui/color-modes, @theme-ui/components, @theme-ui/core, @theme-ui/editor, gatsby-theme-style-guide, gatsby-theme-ui-layout, @theme-ui/match-media, @theme-ui/mdx, @theme-ui/parse-props, @theme-ui/sidenav, @theme-ui/style-guide, @theme-ui/theme-provider, theme-ui
- 0.10 chores #1842 (@hasparus)

🏠 Internal

theme-ui
- Setup Cypress #1845 (@hasparus)

Authors: 2

@jordie23
Piotr Monwid-Olechnowicz (@hasparus)

…ement

vercel · 2021-06-19T17:28:16Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/systemui/theme-ui/4WMhRKkksBBLWRqEdXrAAjZtpUm8
✅ Preview: https://theme-ui-git-nested-providers-systemui.vercel.app

…ers to reduce FOUC

hasparus · 2021-07-18T14:38:49Z

Hey @fcisio, I got it to work :)

hasparus · 2021-08-25T14:57:33Z

🚀 PR was released in v0.11.0 🚀

hasparus added 6 commits June 10, 2021 16:36

fix(color-modes): nest styles using css not style

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

8776658

fix(color-modes): properly combine colors from nested providers

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

2bf1685

test(theme-ui): test nested providers color composition

e701cec

test(editor): fix type error

0663cd4

test(theme-provider): test that CSS Properties are set on the root el…

89307f5

…ement

Merge branch 'develop' into nested-providers

a7bdef0

hasparus added 2 commits July 1, 2021 10:46

Merge branch 'ci/cypress' into nested-providers

9b23bfe

chore(ci): preconstruct libs in e2e job

cb7d0e0

hasparus requested a review from lachlanjc as a code owner July 1, 2021 09:08

vercel bot deployed to Preview July 1, 2021 09:08 View deployment

vercel bot deployed to Preview July 18, 2021 12:40 View deployment

hasparus force-pushed the nested-providers branch from 90ae984 to 2846c63 Compare July 18, 2021 12:52

vercel bot deployed to Preview July 18, 2021 12:52 View deployment

hasparus force-pushed the nested-providers branch from 2846c63 to 10c3c95 Compare July 18, 2021 13:13

vercel bot deployed to Preview July 18, 2021 13:13 View deployment

vercel bot deployed to Preview July 18, 2021 14:04 View deployment

hasparus added 3 commits July 18, 2021 16:32

fix(color-modes): respect html.theme-ui-{mode} class in nested provid…

8ec9334

…ers to reduce FOUC

feat(docs): increase gap between readme badges

f9583c3

chore(docs): add suppressHydrationWarning where needed

d8b54dc

hasparus force-pushed the nested-providers branch from 072289a to d8b54dc Compare July 18, 2021 14:32

vercel bot deployed to Preview July 18, 2021 14:32 View deployment

hasparus requested a review from fcisio July 18, 2021 14:37

fcisio approved these changes Jul 19, 2021

View reviewed changes

hasparus added the minor label Jul 19, 2021

hasparus merged commit 27424d6 into develop Jul 19, 2021

hasparus deleted the nested-providers branch July 19, 2021 17:16

hasparus added the prerelease label Jul 19, 2021

hasparus mentioned this pull request Jul 27, 2021

add types for css prop back #1866

Merged

hasparus mentioned this pull request Jul 27, 2021

Add @theme-ui/css/utils with TypeScript CIF functions and fix preset types #1862

Merged

hasparus added released and removed prerelease labels Aug 25, 2021

hasparus mentioned this pull request Oct 13, 2021

v0.11.x renders div for ThemeProvider instead of nothing and breaks some designs #1976

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(color-modes): combine colors in nested providers #1838

fix(color-modes): combine colors in nested providers #1838

hasparus commented Jun 19, 2021 •

edited

Loading

vercel bot commented Jun 19, 2021 •

edited

Loading

hasparus commented Jul 18, 2021

hasparus commented Aug 25, 2021

fix(color-modes): combine colors in nested providers #1838

fix(color-modes): combine colors in nested providers #1838

Conversation

hasparus commented Jun 19, 2021 • edited Loading

Version

🚀 Enhancement

🐛 Bug Fix

🏠 Internal

Authors: 2

vercel bot commented Jun 19, 2021 • edited Loading

hasparus commented Jul 18, 2021

hasparus commented Aug 25, 2021

hasparus commented Jun 19, 2021 •

edited

Loading

vercel bot commented Jun 19, 2021 •

edited

Loading