RFC: enhanceName and replaceName to customize styles

docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx

@@ -1,6 +1,86 @@
 import * as React from 'react'
-import { Button } from '@stardust-ui/react'
+import {
+  Button,
+  ButtonProps,
+  ComponentSlotStylesInput,
+  ComponentVariablesPrepared,
+  Flex,
+  Provider,
+  ThemeInput,
+} from '@stardust-ui/react'
 
-const ButtonExample = () => <Button content="Click here" />
+import { ButtonVariables } from 'src/themes/teams/components/Button/buttonVariables'
+
+type ButtonTertiaryVariables = {
+  backgroundColor: string
+  color: string
+  colorHover: string
+  fontWeight: string
+  fontWeightHover: string
+}
+
+type CustomTheme = ThemeInput & {
+  componentStyles: {
+    ButtonTertiary: ComponentSlotStylesInput<ButtonProps, ButtonTertiaryVariables>
+  }
+  componentVariables: { ButtonTertiary: ComponentVariablesPrepared }
+}
+
+const customTheme: CustomTheme = {
+  componentStyles: {
+    'Button:Disabled': {
+      root: { cursor: 'not-allowed' },
+    },
+    ButtonTertiary: {
+      root: ({ variables: v }) => ({
+        backgroundColor: v.backgroundColor,
+        border: 0,
+        color: v.color,
+        fontWeight: v.fontWeight,
+        textDecoration: 'underline',
+
+        ':hover': {
+          color: v.colorHover,
+          cursor: 'pointer',
+          fontWeight: v.fontWeightHover,
+        },
+      }),
+    },
+  },
+  componentVariables: {
+    'Button:Danger': (siteVariables): Partial<ButtonVariables> => ({
+      backgroundColor: siteVariables.colorScheme.red.background1,
+      backgroundColorHover: siteVariables.colorScheme.red.backgroundHover,
+      color: siteVariables.colorScheme.red.foreground,
+      colorHover: siteVariables.colorScheme.red.foregroundHover,
+      borderColorHover: siteVariables.colorScheme.red.background3,
+    }),
+    ButtonTertiary: (siteVariables): ButtonTertiaryVariables => ({
+      backgroundColor: 'transparent',
+      color: siteVariables.colorScheme.brand.foreground,
+      colorHover: siteVariables.colorScheme.brand.foregroundHover,
+      fontWeight: siteVariables.fontWeightRegular,
+      fontWeightHover: siteVariables.fontWeightSemibold,
+    }),
+  },
+}
+
+const ButtonExample = () => (
+  <>
+    <Provider theme={customTheme}>
+      <Flex gap="gap.medium">
+        <Button content="Button:Danger" enhanceName="Button:Danger" />
+        <Button content="Button:Disabled" disabled enhanceName="Button:Disabled" />
+
+        <Button content="ButtonTertiary" replaceName="ButtonTertiary" />
+      </Flex>
+    </Provider>
+    <div style={{ margin: 20 }}>
+      <button onClick={() => window.switchTheme('teams')}>Light theme</button>
+      <button onClick={() => window.switchTheme('teamsDark')}>Dark theme</button>
+      <button onClick={() => window.switchTheme('teamsHighContrast')}>HC theme</button>
+    </div>
+  </>
+)
 
 export default ButtonExample

packages/react/src/lib/commonPropInterfaces.ts

@@ -3,6 +3,12 @@ import { ComponentVariablesInput, ComponentSlotStyle, AnimationProp } from '../t
 import { ReactChildren } from '../types'
 
 export interface StyledComponentProps<P = any, V = any> {
+  /** FIX ME */
+  enhanceName?: string
+
+  /** FIX ME */
+  replaceName?: string
+
   /** Additional CSS styles to apply to the component instance.  */
   styles?: ComponentSlotStyle<P, V>
 

packages/react/src/lib/renderComponent.tsx

@@ -166,9 +166,24 @@ const renderComponent = <P extends {}>(
   const ElementType = getElementType({ defaultProps }, props) as React.ReactType<P>
   const stateAndProps = { ...state, ...props }
 
+  /** FIX ME */
+  if (props.enhanceName && props.replaceName) {
+    throw new Error('"enhanceName" and "replaceName" props can not be combined')
+  }
+
+  /** FIX ME */
+  if (props.enhanceName) {
+    if (!props.enhanceName.startsWith(`${displayName}:`)) {
+      throw new Error(
+        `"enhanceName" prop should start with "displayName" of matching component, i.e. "${displayName}:Variant"`,
+      )
+    }
+  }
+
   // Resolve variables for this component, allow props.variables to override
   const resolvedVariables: ComponentVariablesObject = mergeComponentVariables(
-    theme.componentVariables[displayName],
+    theme.componentVariables[props.replaceName || displayName],
+    theme.componentVariables[props.enhanceName],
     props.variables,
   )(theme.siteVariables)
 
@@ -178,7 +193,8 @@ const renderComponent = <P extends {}>(
 
   // Resolve styles using resolved variables, merge results, allow props.styles to override
   const mergedStyles: ComponentSlotStylesPrepared = mergeComponentStyles(
-    theme.componentStyles[displayName],
+    theme.componentStyles[props.replaceName || displayName],
+    theme.componentStyles[props.enhanceName],
     { root: props.styles },
     { root: animationCSSProp },
   )