Theming for css with primitives

.storybook/preview.js

@@ -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]
 

.storybook/primitives-v7.css

@@ -0,0 +1,2 @@
+@import '@primer/css/dist/primitives.css';
+@import '@primer/css/dist/color-modes.css';

.storybook/primitives-v8.css

@@ -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';

package.json

@@ -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",

src/BaseStyles.tsx

@@ -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
@@ -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} = {
+    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>