Skip to content

Theming for css with primitives #3238

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
siddharthkp merged 16 commits into from
May 9, 2023
Merged

Theming for css with primitives #3238

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
3f12489
minimal setup for css in storybook
siddharthkp Apr 26, 2023
03bb2e4
setup build with rollup
siddharthkp Apr 26, 2023
b7b0da2
update snapshot for drafts export
siddharthkp Apr 26, 2023
a0643a0
setup jest for css
siddharthkp Apr 26, 2023
0f0c16b
add primer/css as peer and dev dependency
siddharthkp May 1, 2023
8d2f89e
use primitives in storybook
siddharthkp May 1, 2023
be2df33
theming for primitives in BaseStyles
siddharthkp May 1, 2023
4712900
Merge branch 'main' into theming-for-css
siddharthkp May 4, 2023
ee53819
add primitives v8 with fallback to primitives v7
siddharthkp May 4, 2023
eede7da
missed a spot, prefer v8 over v7
siddharthkp May 4, 2023
c18b442
update snapshots using basestyles
siddharthkp May 4, 2023
7c6d44f
Merge branch 'main' into theming-for-css
siddharthkp May 8, 2023
9a07bcd
remove primer/css as peerDep
siddharthkp May 8, 2023
e6b0848
Merge branch 'theming-for-css' of github.com:primer/react into themin…
siddharthkp May 8, 2023
a3531aa
change colorMode based on scheme
siddharthkp May 9, 2023
4402437
Merge branch 'main' into theming-for-css
siddharthkp May 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ module.exports = {
optimizationLevel: 2,
},
},
{
name: 'storybook-css-modules',
options: {cssModulesLoaderOptions: {modules: {localIdentName: 'prc_[local]-[hash:base64:5]'}}},
},
],
core: {
builder: {
Expand Down
3 changes: 3 additions & 0 deletions .storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ import {addons} from '@storybook/addons'
import {withThemeProvider, withSurroundingElements, toolbarTypes} from '../src/utils/story-helpers'
import {PrimerBreakpoints} from '../src/utils/layout'

import '@primer/css/dist/primitives.css'

@langermank langermank May 1, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@siddharthkp siddharthkp May 8, 2023 •
edited
Loading

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 :)

import '@primer/css/dist/color-modes.css'

export const globalTypes = toolbarTypes
export const decorators = [withThemeProvider, withSurroundingElements]

Expand Down
3 changes: 3 additions & 0 deletions jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ module.exports = {
testEnvironment: 'jsdom',
cacheDirectory: '.test',
collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/stories/**', '!**/*.stories.{js,jsx,ts,tsx}'],
moduleNameMapper: {
'\\.css$': 'jest-css-modules',
},
setupFiles: ['<rootDir>/src/utils/test-helpers.tsx'],
setupFilesAfterEnv: ['<rootDir>/src/utils/test-matchers.tsx', '<rootDir>/src/utils/test-deprecations.tsx'],
testMatch: ['<rootDir>/(src|codemods)/**/*.test.[jt]s?(x)', '!**/*.types.test.[jt]s?(x)'],
Expand Down
Loading