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 all 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
6 changes: 6 additions & 0 deletions .storybook/preview.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,12 @@ import {addons} from '@storybook/addons'
import {withThemeProvider, withSurroundingElements, toolbarTypes} from '../src/utils/story-helpers'
import {PrimerBreakpoints} from '../src/utils/layout'

// primitives v8
import './primitives-v8.css'
// primitives v7 for fallback, commented out by default
// uncomment it for testing
// import './primitives-v7.css'

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

Expand Down
2 changes: 2 additions & 0 deletions .storybook/primitives-v7.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
@import '@primer/css/dist/primitives.css';
@import '@primer/css/dist/color-modes.css';
21 changes: 21 additions & 0 deletions .storybook/primitives-v8.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
/* size/typography */
@import '@primer/primitives/tokens-next-private/css/base/size/size.css';
@import '@primer/primitives/tokens-next-private/css/base/typography/typography.css';
@import '@primer/primitives/tokens-next-private/css/functional/size/border.css';
@import '@primer/primitives/tokens-next-private/css/functional/size/breakpoints.css';
@import '@primer/primitives/tokens-next-private/css/functional/size/size-coarse.css';
@import '@primer/primitives/tokens-next-private/css/functional/size/size-fine.css';
@import '@primer/primitives/tokens-next-private/css/functional/size/size.css';
@import '@primer/primitives/tokens-next-private/css/functional/size/viewport.css';
@import '@primer/primitives/tokens-next-private/css/functional/typography/typography.css';

/* color */
@import '@primer/primitives/tokens-next-private/css/functional/themes/light.css';
@import '@primer/primitives/tokens-next-private/css/functional/themes/light-tritanopia.css';
@import '@primer/primitives/tokens-next-private/css/functional/themes/light-high-contrast.css';
@import '@primer/primitives/tokens-next-private/css/functional/themes/light-colorblind.css';
@import '@primer/primitives/tokens-next-private/css/functional/themes/dark.css';
@import '@primer/primitives/tokens-next-private/css/functional/themes/dark-colorblind.css';
@import '@primer/primitives/tokens-next-private/css/functional/themes/dark-dimmed.css';
@import '@primer/primitives/tokens-next-private/css/functional/themes/dark-high-contrast.css';
@import '@primer/primitives/tokens-next-private/css/functional/themes/dark-tritanopia.css';
196 changes: 196 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -129,6 +129,7 @@
"@github/markdownlint-github": "^0.3.0",
"@github/prettier-config": "0.0.6",
"@playwright/test": "1.32.0",
"@primer/css": "^21.0.1",
"@rollup/plugin-babel": "6.0.3",
"@rollup/plugin-commonjs": "24.1.0",
"@rollup/plugin-node-resolve": "15.0.2",
Expand Down
29 changes: 26 additions & 3 deletions src/BaseStyles.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import React from 'react'
import styled, {createGlobalStyle} from 'styled-components'
import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
import {useTheme} from './ThemeProvider'
import {useTheme, defaultColorMode, ColorModeWithAuto} from './ThemeProvider'
import {ComponentProps} from './utils/types'

// load polyfill for :focus-visible
Expand DownExpand Up@@ -38,10 +38,33 @@ export type BaseStylesProps = ComponentProps<typeof Base>
function BaseStyles(props: BaseStylesProps) {
const {children, color = 'fg.default', fontFamily = 'normal', lineHeight = 'default', ...rest} = props

const {colorScheme} = useTheme()
const {colorScheme, colorMode, dayScheme, nightScheme} = useTheme()

/**
* We need to map valid primer/react color modes onto valid color modes for primer/primitives
* valid color modes for primer/primitives: auto | light | dark
* valid color modes for primer/primer: auto | day | night | light | dark
*/
type colorModesForPrimitives = 'auto' | 'light' | 'dark'
const primerColorModeToPrimitiveColorMode: {[key in ColorModeWithAuto]: colorModesForPrimitives} = {

@langermanklangermankMay 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.

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

@siddharthkpsiddharthkpMay 3, 2023•
edited
Loading

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

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

auto: 'auto',
light: 'light',
dark: 'dark',
day: 'light',
night: 'dark',
}

return (
<Base {...rest} color={color} fontFamily={fontFamily} lineHeight={lineHeight} data-portal-root>
<Base
{...rest}
color={color}
fontFamily={fontFamily}
lineHeight={lineHeight}
data-portal-root
data-color-mode={primerColorModeToPrimitiveColorMode[colorMode || defaultColorMode]}
data-light-theme={dayScheme}
data-dark-theme={nightScheme}
>
<GlobalStyle colorScheme={colorScheme?.includes('dark') ? 'dark' : 'light'} />
{children}
</Base>
Expand Down
Loading