fix(BaseStyles): remove unknown props from fallback when feature flag is enabled

.changeset/angry-ties-push.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update BaseStyles to no longer pass system props when feature flag is enabled

packages/react/.storybook/preview.jsx

@@ -62,8 +62,8 @@ const preview = {
                     ['*', 'Playground', /Playground$/, 'Features', 'Examples'],
                   ],
                 ],
-              ]
-            ]
+              ],
+            ],
           ],
           'Behaviors',
           'Hooks',
@@ -82,8 +82,8 @@ const preview = {
                     ['*', 'Playground', /Playground$/, 'Features', 'Examples'],
                   ],
                 ],
-              ]
-            ]
+              ],
+            ],
           ],
           [
             'Private',
@@ -100,8 +100,8 @@ const preview = {
                     ['*', 'Playground', /Playground$/, 'Features', 'Examples'],
                   ],
                 ],
-              ]
-            ]
+              ],
+            ],
           ],
           '*',
         ]
@@ -257,14 +257,6 @@ export const globalTypes = {
 }
 
 export const decorators = [
-  (Story, context) => {
-    const {featureFlags} = context.globals
-    return (
-      <FeatureFlags flags={featureFlags}>
-        <Story {...context} />
-      </FeatureFlags>
-    )
-  },
   (Story, context) => {
     const {colorScheme} = context.globals
 
@@ -318,6 +310,14 @@ export const decorators = [
       </Profiler>
     )
   },
+  (Story, context) => {
+    const {featureFlags} = context.globals
+    return (
+      <FeatureFlags flags={featureFlags}>
+        <Story {...context} />
+      </FeatureFlags>
+    )
+  },
 ]
 
 export default preview

packages/react/src/BaseStyles.module.css

@@ -34,6 +34,12 @@ details-dialog:focus:not(:focus-visible):not(.focus-visible) {
 /* -------------------------------------------------------------------------- */
 
 .BaseStyles {
+  font-family: var(--BaseStyles-fontFamily, var(--fontStack-system));
+  /* stylelint-disable-next-line primer/typography */
+  line-height: var(--BaseStyles-lineHeight, 1.5);
+  /* stylelint-disable-next-line primer/colors */
+  color: var(--BaseStyles-fgColor, var(--fgColor-default));
+
   /* Global styles for light mode */
   &:has([data-color-mode='light']) {
     input & {

packages/react/src/BaseStyles.tsx

@@ -53,21 +53,17 @@ export type BaseStylesProps = PropsWithChildren & {
   SxProp
 
 function BaseStyles(props: BaseStylesProps) {
-  const {
-    children,
-    color = 'var(--fgColor-default)',
-    fontFamily = 'normal',
-    lineHeight = 'default',
-    className,
-    as: Component = 'div',
-    ...rest
-  } = props
-
+  const {children, color, fontFamily, lineHeight, className, as: Component = 'div', style, ...rest} = props
   const {colorScheme, dayScheme, nightScheme} = useTheme()
   const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
 
   if (enabled) {
     const newClassName = clsx(classes.BaseStyles, className)
+    const baseStyles = {
+      ['--BaseStyles-fgColor']: color,
+      ['--BaseStyles-fontFamily']: fontFamily,
+      ['--BaseStyles-lineHeight']: lineHeight,
+    }
 
     // If props includes TYPOGRAPHY or COMMON props, pass them to the Box component
     if (includesSystemProps(props)) {
@@ -77,9 +73,6 @@ function BaseStyles(props: BaseStylesProps) {
         <Box
           as={Component}
           className={newClassName}
-          color={color}
-          fontFamily={fontFamily}
-          lineHeight={lineHeight}
           data-portal-root
           /**
            * We need to map valid primer/react color modes onto valid color modes for primer/primitives
@@ -89,7 +82,11 @@ function BaseStyles(props: BaseStylesProps) {
           data-color-mode={colorScheme?.includes('dark') ? 'dark' : 'light'}
           data-light-theme={dayScheme}
           data-dark-theme={nightScheme}
-          style={systemProps}
+          style={{
+            ...systemProps,
+            ...baseStyles,
+            ...style,
+          }}
           {...rest}
         >
           {children}
@@ -100,9 +97,6 @@ function BaseStyles(props: BaseStylesProps) {
     return (
       <Component
         className={newClassName}
-        color={color}
-        fontFamily={fontFamily}
-        lineHeight={lineHeight}
         data-portal-root
         /**
          * We need to map valid primer/react color modes onto valid color modes for primer/primitives
@@ -112,6 +106,10 @@ function BaseStyles(props: BaseStylesProps) {
         data-color-mode={colorScheme?.includes('dark') ? 'dark' : 'light'}
         data-light-theme={dayScheme}
         data-dark-theme={nightScheme}
+        style={{
+          ...baseStyles,
+          ...style,
+        }}
         {...rest}
       >
         {children}
@@ -122,9 +120,9 @@ function BaseStyles(props: BaseStylesProps) {
   return (
     <StyledDiv
       className={className}
-      color={color}
-      fontFamily={fontFamily}
-      lineHeight={lineHeight}
+      color={color ?? 'var(--fgColor-default)'}
+      fontFamily={fontFamily ?? 'normal'}
+      lineHeight={lineHeight ?? 'default'}
       data-portal-root
       /**
        * We need to map valid primer/react color modes onto valid color modes for primer/primitives
@@ -134,6 +132,7 @@ function BaseStyles(props: BaseStylesProps) {
       data-color-mode={colorScheme?.includes('dark') ? 'dark' : 'light'}
       data-light-theme={dayScheme}
       data-dark-theme={nightScheme}
+      style={style}
       {...rest}
     >
       <GlobalStyle colorScheme={colorScheme?.includes('dark') ? 'dark' : 'light'} />