feat(ui-buttons): migrate buttons to updated theme

Reworked Button, CondensedButton, and IconButton theming:
- Removed individual component theme.ts files in favor of centralized BaseButton styles
- Updated icon sizing inside buttons
- Fixed button active state
- Added condensed size and disabled variant styling
- Set AI button to use transparent background
- Migrated button wrapper components to new theme structure

Author: balzss

packages/ui-buttons/src/BaseButton/index.tsx

@@ -28,11 +28,11 @@ import keycode from 'keycode'
 import {
   getElementType,
   getInteraction,
-  passthroughProps,
-  callRenderProp
+  passthroughProps
 } from '@instructure/ui-react-utils'
 import { isActiveElement } from '@instructure/ui-dom-utils'
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
+import { renderIconWithProps } from '@instructure/ui-icons'
 import { View } from '@instructure/ui-view'
 import type { ViewProps } from '@instructure/ui-view'
 
@@ -41,10 +41,9 @@ import type { ViewProps } from '@instructure/ui-view'
 import { isSafari } from '@instructure/ui-utils'
 import { combineDataCid } from '@instructure/ui-utils'
 
-import { withStyleRework as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 
 import generateStyles from './styles'
-import generateComponentTheme from './theme'
 
 import { allowedProps } from './props'
 import type { BaseButtonProps, BaseButtonStyleProps } from './props'
@@ -55,7 +54,15 @@ category: components/utilities
 ---
 **/
 
-@withStyle(generateStyles, generateComponentTheme)
+const buttonSizeToIconSize = {
+  small: 'sm',
+  medium: 'md',
+  large: 'lg',
+  condensedSmall: 'xs',
+  condensedMedium: 'xs'
+} as const
+
+@withStyle(generateStyles)
 class BaseButton extends Component<BaseButtonProps> {
   static readonly componentId = 'BaseButton'
 
@@ -201,7 +208,7 @@ class BaseButton extends Component<BaseButtonProps> {
   }
 
   renderChildren() {
-    const { renderIcon, children, styles } = this.props
+    const { renderIcon, children, styles, size } = this.props
 
     const wrappedChildren = <span css={styles?.children}>{children}</span>
 
@@ -210,8 +217,11 @@ class BaseButton extends Component<BaseButtonProps> {
     }
 
     const { hasOnlyIconVisible } = this
+    const iconSize = buttonSizeToIconSize[size!]
     const wrappedIcon = (
-      <span css={styles?.iconSVG}>{callRenderProp(renderIcon)}</span>
+      <span css={styles?.iconSVG}>
+        {renderIconWithProps(renderIcon, iconSize, 'inherit')}
+      </span>
     )
 
     const flexChildren = hasOnlyIconVisible ? (

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

@@ -53,7 +53,7 @@ type BaseButtonOwnProps = {
   /**
    * The size of the `Button`
    */
-  size?: 'small' | 'medium' | 'large'
+  size?: 'small' | 'medium' | 'large' | 'condensedSmall' | 'condensedMedium'
 
   /**
    * Provides a reference to the `Button`'s underlying html element.