refactor(ui-icons-lucide): lucid icons to use new themes

Author: joyenjoyer

packages/ui-icons-lucide/src/index.ts

@@ -63,11 +63,7 @@ import { wrapLucideIcon } from './wrapLucideIcon'
 
 // Re-export types
 export type { LucideProps, LucideIcon } from 'lucide-react'
-export type {
-  LucideIconWrapperProps,
-  InstUIIconProps,
-  LucideIconTheme
-} from './wrapLucideIcon'
+export type { LucideIconWrapperProps, InstUIIconProps } from './wrapLucideIcon'
 
 // Re-export utilities
 export { wrapLucideIcon }

packages/ui-icons-lucide/src/wrapLucideIcon/index.tsx

@@ -26,14 +26,10 @@ import React, { forwardRef } from 'react'
 import type { LucideIcon } from 'lucide-react'
 import { useStyle, useTheme } from '@instructure/emotion'
 import { px } from '@instructure/ui-utils'
+import type { Theme } from '@instructure/ui-themes'
 
 import generateStyle from './styles'
-import generateComponentTheme from './theme'
-import type {
-  LucideIconWrapperProps,
-  InstUIIconProps,
-  LucideIconTheme
-} from './props'
+import type { LucideIconWrapperProps, InstUIIconProps } from './props'
 
 /**
  * Wraps a Lucide icon component with InstUI theming and RTL support.
@@ -121,9 +117,9 @@ export function wrapLucideIcon(Icon: LucideIcon): LucideIcon {
         ...rest
       } = props
 
-      // Get theme to convert semantic sizes to pixels
-      const theme = useTheme()
-      const componentTheme = generateComponentTheme(theme as any)
+      // Get theme to access Icon component theme properties
+      const theme = useTheme() as Theme
+      const iconTheme = themeOverride || theme?.newTheme?.components?.Icon
 
       // Determine if using InstUI semantic size or Lucide numeric size
       const isSemanticSize = typeof instUISize === 'string'
@@ -133,12 +129,14 @@ export function wrapLucideIcon(Icon: LucideIcon): LucideIcon {
       // Lucide doesn't inherit fontSize, so we need explicit pixel values
       let numericSize: number | undefined
       if (isSemanticSize) {
+        // Map InstUI semantic sizes to Icon theme size properties
+        // We map InstUI sizes to Icon theme sizes based on relative scale
         const sizeMap = {
-          'x-small': componentTheme.sizeXSmall,
-          small: componentTheme.sizeSmall,
-          medium: componentTheme.sizeMedium,
-          large: componentTheme.sizeLarge,
-          'x-large': componentTheme.sizeXLarge
+          'x-small': iconTheme?.sizeSm || '1rem', // sizeSm (16px)
+          small: iconTheme?.sizeMd || '1.25rem', // sizeMd (20px)
+          medium: iconTheme?.sizeLg || '1.5rem', // sizeLg (24px)
+          large: iconTheme?.sizeXl || '2rem', // sizeXl (32px)
+          'x-large': iconTheme?.size2xl || '2.25rem' // size2xl (36px)
         }
         const themeSizeValue = sizeMap[instUISize as keyof typeof sizeMap]
         // Use InstUI's px utility to convert rem/em to pixels
@@ -169,7 +167,6 @@ export function wrapLucideIcon(Icon: LucideIcon): LucideIcon {
       // Using useStyle hook for functional component theming
       const styles = useStyle({
         generateStyle,
-        generateComponentTheme,
         params: {
           size: semanticSize,
           color: colorValue,
@@ -178,7 +175,7 @@ export function wrapLucideIcon(Icon: LucideIcon): LucideIcon {
           inline,
           themeOverride
         },
-        componentId: 'LucideIcon',
+        componentId: 'Icon',
         displayName: `LucideIcon(${Icon.displayName || Icon.name})`
       })
 
@@ -240,6 +237,5 @@ export function wrapLucideIcon(Icon: LucideIcon): LucideIcon {
   return WrappedIcon as LucideIcon
 }
 
-export type { LucideIconWrapperProps, InstUIIconProps, LucideIconTheme }
-export { default as generateComponentTheme } from './theme'
+export type { LucideIconWrapperProps, InstUIIconProps }
 export { default as generateStyle } from './styles'

packages/ui-icons-lucide/src/wrapLucideIcon/props.ts

@@ -24,7 +24,7 @@
 
 import type { LucideProps } from 'lucide-react'
 import type { ComponentStyle } from '@instructure/emotion'
-import type { LucideIconTheme } from './theme'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 /**
  * InstUI-specific props added to Lucide icons.
@@ -111,7 +111,7 @@ export interface InstUIIconProps {
    * Theme overrides for this specific icon instance.
    * Allows customization of theme variables on a per-component basis.
    */
-  themeOverride?: Partial<LucideIconTheme>
+  themeOverride?: Partial<NewComponentTypes['Icon']>
 }
 
 /**
@@ -135,5 +135,3 @@ export interface LucideIconWrapperProps
  * Generated by the generateStyle function and consumed by the useStyle hook.
  */
 export type LucideIconStyle = ComponentStyle<'lucideIcon'>
-
-export { type LucideIconTheme }

packages/ui-icons-lucide/src/wrapLucideIcon/styles.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import type { LucideIconTheme } from './theme'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
 import type { LucideIconStyle } from './props'
 
 interface StyleParams {
@@ -31,7 +31,7 @@ interface StyleParams {
   rotate?: '0' | '90' | '180' | '270'
   bidirectional?: boolean
   inline?: boolean
-  themeOverride?: Partial<LucideIconTheme>
+  themeOverride?: Partial<NewComponentTypes['Icon']>
 }
 
 /**
@@ -42,27 +42,30 @@ interface StyleParams {
  *
  * @param componentTheme The theme variable object
  * @param params The reactive parameters (props that affect styling)
+ * @param _sharedTokens Shared token object that stores common values for the theme
  * @return The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: LucideIconTheme,
-  params: StyleParams
+  componentTheme: NewComponentTypes['Icon'],
+  params: StyleParams,
+  _sharedTokens: SharedTokens
 ): LucideIconStyle => {
   const { color, rotate = '0', bidirectional = true, inline = true } = params
 
   // Color mapping (semantic colors from theme)
   // Note: Size is no longer applied here - it's passed directly to Lucide as pixels
+  // Maps InstUI semantic color names to v12 Icon theme properties
   const colorVariants = {
     inherit: { color: 'inherit' },
-    primary: { color: componentTheme.primaryColor },
-    secondary: { color: componentTheme.secondaryColor },
-    'primary-inverse': { color: componentTheme.primaryInverseColor },
-    'secondary-inverse': { color: componentTheme.secondaryInverseColor },
+    primary: { color: componentTheme.baseColor },
+    secondary: { color: componentTheme.mutedColor },
+    'primary-inverse': { color: componentTheme.inverseColor },
+    'secondary-inverse': { color: componentTheme.inverseColor },
     success: { color: componentTheme.successColor },
     error: { color: componentTheme.errorColor },
     warning: { color: componentTheme.warningColor },
-    alert: { color: componentTheme.alertColor },
-    brand: { color: componentTheme.brandColor }
+    alert: { color: componentTheme.infoColor },
+    brand: { color: componentTheme.infoColor }
   }
 
   // Rotation transforms (LTR context)