Merge branch 'main' into chore/update-docs-site-to-react-18

package.json

@@ -170,7 +170,7 @@
     "@types/lodash.keyby": "4.6.7",
     "@types/node": "16.11.11",
     "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.9",
+    "@types/react-dom": "18.2.6",
     "@typescript-eslint/eslint-plugin": "5.59.6",
     "@typescript-eslint/parser": "5.59.6",
     "ajv": "8.12.0",

script/set-react-version.js

@@ -42,7 +42,7 @@ const versions = new Map([
         },
         {
           name: '@types/react-dom',
-          version: '18.0.9',
+          version: '18.2.6',
         },
         {
           name: 'react',

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, defaultColorMode, ColorModeWithAuto} from './ThemeProvider'
+import {useTheme} from './ThemeProvider'
 import {ComponentProps} from './utils/types'
 
 // load polyfill for :focus-visible
@@ -38,21 +38,13 @@ export type BaseStylesProps = ComponentProps<typeof Base>
 function BaseStyles(props: BaseStylesProps) {
   const {children, color = 'fg.default', fontFamily = 'normal', lineHeight = 'default', ...rest} = props
 
-  const {colorScheme, colorMode, dayScheme, nightScheme} = useTheme()
+  const {colorScheme, 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
@@ -61,7 +53,7 @@ function BaseStyles(props: BaseStylesProps) {
       fontFamily={fontFamily}
       lineHeight={lineHeight}
       data-portal-root
-      data-color-mode={primerColorModeToPrimitiveColorMode[colorMode || defaultColorMode]}
+      data-color-mode={colorScheme?.includes('dark') ? 'dark' : 'light'}
       data-light-theme={dayScheme}
       data-dark-theme={nightScheme}
     >