Theming for css with primitives #3238
Conversation
This comment was marked as resolved.
This comment was marked as resolved.
.storybook/preview.js
Outdated
| import {withThemeProvider, withSurroundingElements, toolbarTypes} from '../src/utils/story-helpers' | ||
| import {PrimerBreakpoints} from '../src/utils/layout' | ||
|
|
||
| import '@primer/css/dist/primitives.css' |
There was a problem hiding this comment.
I'm a little concerned about add a dep for PCSS even though I know this is experimental. I think it makes more sense to just go ahead and start using the new tokens. The size tokens (imported here through primitives.css) will be rolled out to dotcom this week or next (like removing the feature flag) and the colors will start to be tested soon. Since this is a test, I think just go ahead and use the new color tokens!
Here are the imports (but from dist of course) https://github.com/primer/primitives/blob/main/docs/storybook/.storybook/preview.css
I'll be cutting a new release probably this week
There was a problem hiding this comment.
Made v8 the default now with a fallback on v7.
primer/css is now only a dev dependency to test the fallback. We can remove that as well as soon as v8 is rolled out in dotcom :)
| * valid color modes for primer/primer: auto | day | night | light | dark | ||
| */ | ||
| type colorModesForPrimitives = 'auto' | 'light' | 'dark' | ||
| const primerColorModeToPrimitiveColorMode: {[key in ColorModeWithAuto]: colorModesForPrimitives} = { |
There was a problem hiding this comment.
Im a little confused about "day" and "night". Can we standardize on just using light/dark/auto? https://github.com/primer/primitives/blob/main/docs/storybook/.storybook/preview.js#L35
There was a problem hiding this comment.
Would love to 😭 but we've been stuck with this for a while for backward compatibility. Created an issue to deprecate them in next major release
size-limit report 📦
|
|
@langermank Need to confirm if this is a breaking change or a bug, In primer/css/color-modes.css, screenshot, notice the border colors. (the body color comes from primer/css globals)
but in screenshot, notice missing border color. (the body color is white, which is expected because we are not including primer/css globals here)
|
siddharthkp
changed the title
siddharthkp
changed the title
siddharthkp
changed the title
siddharthkp
changed the title
|
@siddharthkp quick question, in the dark themes it seems like the border tokens are not being defined. Just wanted to check-in to see if this was intended with this setup or not 👀
It seems like potentially for these combos the custom properties are not being set at the theme provider level
|
|
@joshblack Yep! Noted that in #3238 (comment) Seems like a bug (or a intentional breaking change) in primitives, talking to @langermank about it. |
@siddharthkp this has been removed, as we figured that there is no way to get this combination in the wild. A few people checked it, but maybe we missed something. If we did, how can you get to this combination? |
That's perfect! Happy to drop support for it :) |
|
For storybook, setting colorMode based on compatible scheme now. Looks much better:
|
There are a couple things to note in this implementation:
temporary dev dependency on primer/css
With primer/primitives@8 just around the corner, we are using primitives v8 in the component with a fallback on primitives v7
For v7, css variables for primitives are shipped in primer/css, which is why we have a devDependency on primer/css to test in storybook. This is only till primitives v8 are shipped in dotcom (~ 1-2 weeks), we can remove primer/css from our setup after that.
data attributes added to BaseStyles
color primitives change value color modes, this works by setting data attributes on the root of your application. See documentation.
With primer/react, this should be taken care by
ThemeProvider, but because ThemeProvider does not render any wrapper elements, I have chosen to add them to BaseStyles instead, which is used along with ThemeProvider (including in dotcom)This includes mapping the additional color modes for primer/react to primer/primitives (day → light, night → dark). We should look into deprecating these in the future!