WIP refactor(many): allow overriding semantic theme layer in new components

packages/emotion/src/index.ts

@@ -44,7 +44,7 @@ export { useStyle } from './useStyle'
 export { useTheme } from './useTheme'
 
 export type { ComponentStyle, StyleObject, Overrides } from './EmotionTypes'
-export type { WithStyleProps } from './withStyleLegacy'
+export type { WithStyleProps } from './withStyle'
 export type { ThemeOverrideValue } from './useStyle'
 export type {
   SpacingValues,

packages/emotion/src/useStyle.ts

@@ -47,7 +47,7 @@ type ThemeOverrideValue =
   | Partial<Theme>
   | ((
       componentTheme: Theme,
-      currentTheme: NewComponentTypes[keyof NewComponentTypes]
+      currentTheme: ReturnType<NewComponentTypes[keyof NewComponentTypes]>
     ) => Partial<Theme>)
 
 const isNewThemeObject = (obj: BaseThemeOrOverride): obj is Theme => {
@@ -82,10 +82,9 @@ const useStyle = <P extends GenerateStyleParams>(useStyleParams: {
     isNewThemeObject(theme) && // TODO: is it possible not to have a theme object here?
     theme.newTheme.components[componentWithTokensId as keyof NewComponentTypes]
   ) {
-    baseComponentTheme =
-      theme.newTheme.components[
-        componentWithTokensId as keyof NewComponentTypes
-      ]
+    baseComponentTheme = theme.newTheme.components[
+      componentWithTokensId as keyof NewComponentTypes
+    ](theme.newTheme.semantics)
   }
   const finalOverride = getComponentThemeOverride(
     theme,

packages/emotion/src/withStyle.tsx

@@ -152,7 +152,9 @@ const withStyle = decorator(
   ) => {
     const displayName = ComposedComponent.displayName || ComposedComponent.name
 
-    const componentId = ComposedComponent.componentId?.replace('.', '')
+    const componentId = ComposedComponent.componentId?.replace('.', '') as
+      | keyof NewComponentTypes
+      | undefined
 
     const WithStyle: ForwardRefExoticComponent<
       PropsWithoutRef<Props> & RefAttributes<any>
@@ -185,11 +187,16 @@ const withStyle = decorator(
       }
 
       const componentWithTokensId = useTokensFrom ?? componentId
-
-      const baseComponentTheme =
-        theme.newTheme.components[
-          componentWithTokensId as keyof NewComponentTypes
-        ]
+      let baseComponentTheme = {}
+      // Some components do not have a theme e.g. FormFieldMessages
+      if (
+        componentWithTokensId &&
+        theme.newTheme.components[componentWithTokensId]
+      ) {
+        baseComponentTheme = theme.newTheme.components[componentWithTokensId](
+          theme.newTheme.semantics
+        )
+      }
 
       const themeOverride = getComponentThemeOverride(
         theme,

packages/ui-alerts/src/Alert/v2/props.ts

@@ -29,7 +29,8 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
-import type { AlertTheme, Renderable } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { Renderable } from '@instructure/shared-types'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 type AlertOwnProps = {
@@ -116,7 +117,7 @@ type PropKeys = keyof AlertOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type AlertProps = AlertOwnProps &
-  WithStyleProps<AlertTheme, AlertStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Alert']>, AlertStyle> &
   WithDeterministicIdProps
 
 type AlertStyle = ComponentStyle<

packages/ui-alerts/src/Alert/v2/styles.ts

@@ -37,7 +37,7 @@ import type { AlertProps, AlertStyle } from './props'
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: NewComponentTypes['Alert'],
+  componentTheme: ReturnType<NewComponentTypes['Alert']>,
   props: AlertProps,
   sharedTokens: SharedTokens
 ): AlertStyle => {

packages/ui-avatar/package.json

@@ -28,13 +28,13 @@
     "@instructure/shared-types": "workspace:*",
     "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"

packages/ui-avatar/src/Avatar/v2/index.tsx

@@ -64,7 +64,6 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
       margin
     } = props
     const [loaded, setLoaded] = useState(false)
-
     const styles = useStyle({
       generateStyle,
       themeOverride,

packages/ui-avatar/src/Avatar/v2/styles.ts

@@ -48,7 +48,7 @@ type StyleParams = {
  * @return The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: NewComponentTypes['Avatar'],
+  componentTheme: ReturnType<NewComponentTypes['Avatar']>,
   params: StyleParams,
   sharedTokens: SharedTokens
 ): AvatarStyle => {

packages/ui-badge/package.json

@@ -29,12 +29,12 @@
     "@instructure/ui-color-utils": "workspace:*",
     "@instructure/ui-position": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"

packages/ui-badge/src/Badge/v2/props.ts

@@ -23,12 +23,13 @@
  */
 
 import React from 'react'
-import type { AsElementType, BadgeTheme } from '@instructure/shared-types'
+import type { AsElementType } from '@instructure/shared-types'
 import type {
   Spacing,
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { PlacementPropValues } from '@instructure/ui-position'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 import type { PropsWithChildren } from 'react'
@@ -87,7 +88,7 @@ type PropKeys = keyof BadgeOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type BadgeProps = BadgeOwnProps &
-  WithStyleProps<BadgeTheme, BadgeStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Badge']>, BadgeStyle> &
   WithDeterministicIdProps
 
 type BadgeStyle = ComponentStyle<'badge' | 'wrapper'>

packages/ui-badge/src/Badge/v2/styles.ts

@@ -46,7 +46,7 @@ const pulseAnimation = keyframes`
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: NewComponentTypes['Badge'],
+  componentTheme: ReturnType<NewComponentTypes['Badge']>,
   props: BadgeProps
 ): BadgeStyle => {
   const { type, variant, placement = '', standalone, pulse } = props

packages/ui-billboard/package.json

@@ -29,14 +29,14 @@
     "@instructure/ui-heading": "workspace:*",
     "@instructure/ui-img": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
     "@instructure/ui-icons": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",

packages/ui-billboard/src/Billboard/v2/props.ts

@@ -27,9 +27,9 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type {
   AsElementType,
-  BillboardTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { ViewProps } from '@instructure/ui-view/latest'
@@ -102,7 +102,7 @@ type PropKeys = keyof BillboardOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type BillboardProps = BillboardOwnProps &
-  WithStyleProps<BillboardTheme, BillboardStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Billboard']>, BillboardStyle> &
   OtherHTMLAttributes<BillboardOwnProps>
 
 type BillboardStyle = ComponentStyle<

packages/ui-billboard/src/Billboard/v2/styles.ts

@@ -36,7 +36,7 @@ import type { NewComponentTypes } from '@instructure/ui-themes'
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: NewComponentTypes['Billboard'],
+  componentTheme: ReturnType<NewComponentTypes['Billboard']>,
   props: BillboardProps
 ): BillboardStyle => {
   const { size, href, onClick, disabled, hero, heading } = props

packages/ui-breadcrumb/package.json

@@ -29,6 +29,7 @@
     "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-link": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-tooltip": "workspace:*",
     "@instructure/ui-truncate-text": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
@@ -38,7 +39,6 @@
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-scripts": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"

packages/ui-breadcrumb/src/Breadcrumb/v2/props.ts

@@ -54,7 +54,7 @@ type PropKeys = keyof BreadcrumbOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type BreadcrumbProps = BreadcrumbOwnProps &
-  WithStyleProps<NewComponentTypes['Breadcrumb'], BreadcrumbStyle>
+  WithStyleProps<ReturnType<NewComponentTypes['Breadcrumb']>, BreadcrumbStyle>
 
 type BreadcrumbStyle = ComponentStyle<'breadcrumb' | 'crumb' | 'separator'>
 

packages/ui-breadcrumb/src/Breadcrumb/v2/styles.ts

@@ -35,7 +35,7 @@ import type { BreadcrumbProps, BreadcrumbStyle } from './props'
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: NewComponentTypes['Breadcrumb'],
+  componentTheme: ReturnType<NewComponentTypes['Breadcrumb']>,
   props: BreadcrumbProps
 ): BreadcrumbStyle => {
   const { size } = props

packages/ui-buttons/package.json

@@ -34,6 +34,7 @@
     "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-position": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-tooltip": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*",
@@ -42,7 +43,6 @@
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",

packages/ui-buttons/src/BaseButton/v2/props.ts

@@ -29,10 +29,10 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type {
   ToProp,
   AsElementType,
-  BaseButtonTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { Cursor } from '@instructure/shared-types'
@@ -179,7 +179,7 @@ type PropKeys = keyof BaseButtonOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type BaseButtonProps = BaseButtonOwnProps &
-  WithStyleProps<BaseButtonTheme, BaseButtonStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['BaseButton']>, BaseButtonStyle> &
   OtherHTMLAttributes<BaseButtonOwnProps> &
   ToProp
 

packages/ui-buttons/src/BaseButton/v2/styles.ts

@@ -30,7 +30,7 @@ import type {
 } from './props'
 
 const generateStyle = (
-  componentTheme: NewComponentTypes['BaseButton'],
+  componentTheme: ReturnType<NewComponentTypes['BaseButton']>,
   params: BaseButtonProps,
   _sharedTokens: SharedTokens,
   extraArgs: BaseButtonStyleProps
@@ -262,7 +262,7 @@ const generateStyle = (
             boxShadow: componentTheme.secondaryGhostBoxShadow
           },
           active: {
-            background: componentTheme.secondaryGhostActiveBackground,
+            background: componentTheme.secondaryGhostActiveBackground
           },
           hover: {
             background: componentTheme.secondaryGhostHoverBackground,

packages/ui-buttons/src/Button/v2/props.ts

@@ -24,10 +24,10 @@
 
 import React from 'react'
 import type { Spacing, WithStyleProps } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type {
   ToProp,
   AsElementType,
-  BaseButtonTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { Cursor } from '@instructure/shared-types'
@@ -133,7 +133,7 @@ type PropKeys = keyof ButtonOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type ButtonProps = ButtonOwnProps &
-  WithStyleProps<BaseButtonTheme, null> &
+  WithStyleProps<ReturnType<NewComponentTypes['BaseButton']>, null> &
   OtherHTMLAttributes<ButtonOwnProps> &
   ToProp
 const allowedProps: AllowedPropKeys = [

packages/ui-buttons/src/CloseButton/v2/props.ts

@@ -28,10 +28,10 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type {
   ToProp,
   AsElementType,
-  BaseButtonTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { Cursor } from '@instructure/shared-types'
@@ -122,7 +122,10 @@ type PropKeys = keyof CloseButtonOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type CloseButtonProps = CloseButtonOwnProps &
-  WithStyleProps<BaseButtonTheme, CloseButtonStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['BaseButton']>,
+    CloseButtonStyle
+  > &
   OtherHTMLAttributes<CloseButtonOwnProps> &
   ToProp
 

packages/ui-buttons/src/CloseButton/v2/styles.ts

@@ -36,7 +36,7 @@ import type { CloseButtonProps, CloseButtonStyle } from './props'
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  _componentTheme: NewComponentTypes['BaseButton'],
+  _componentTheme: ReturnType<NewComponentTypes['BaseButton']>,
   props: CloseButtonProps,
   sharedTokens: SharedTokens
 ): CloseButtonStyle => {
@@ -46,7 +46,7 @@ const generateStyle = (
     none: 0,
     'x-small': sharedTokens.spacing.general.spaceXs,
     small: sharedTokens.spacing.general.spaceSm,
-    medium: sharedTokens.spacing.general.spaceMd,
+    medium: sharedTokens.spacing.general.spaceMd
   }
 
   const getOffsetStyle = () => {

packages/ui-buttons/src/CondensedButton/v2/props.ts

@@ -24,10 +24,10 @@
 
 import React from 'react'
 import type { Spacing, WithStyleProps } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type {
   ToProp,
   AsElementType,
-  BaseButtonTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { Cursor } from '@instructure/shared-types'
@@ -110,7 +110,7 @@ type PropKeys = keyof CondensedButtonOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type CondensedButtonProps = CondensedButtonOwnProps &
-  WithStyleProps<BaseButtonTheme, null> &
+  WithStyleProps<ReturnType<NewComponentTypes['BaseButton']>, null> &
   OtherHTMLAttributes<CondensedButtonOwnProps> &
   ToProp