Skip to content

fix(core): resolve theme tokens in icon color prop #339

@perasperaactual

Description

@perasperaactual

Context

When users set color: accent (or any theme token like primary, textSecondary) on icon content items in their YAML, the icon disappears because lucide-react doesn't recognize these strings as valid CSS colors.

Affected Files

  • pages/approach/content.yml — multiple icons with color: accent
  • pages/services/content.yml — icons with theme token colors
  • pages/contact/content.yml — icons with theme token colors

Root Cause

In packages/core/src/components/media/Media.tsx, the renderIcon function passes color directly to lucide-react:

const renderIcon = (src: string, sizePx: number | string, color?: string) => {
  const IconComponent = getIconRegistry()?.get(src);
  if (IconComponent) {
    return <IconComponent size={sizePx} color={color || 'currentColor'} />;
  }
  // ...
};

Lucide-react expects valid CSS color values. Theme tokens like "accent" are not CSS colors — they're resolved at the theme level to hex values.

Desired Behavior

  • Theme tokens like "accent", "primary", "textSecondary" should resolve to their actual hex values before being passed to lucide-react
  • OR use CSS variables: <IconComponent style={{ color: 'var(--accent)' }} />

The CSS variable approach is preferred because:

  1. It respects dark/light mode automatically
  2. No runtime color resolution needed
  3. Matches how theme tokens work in other framework components

Suggested Approach

Modify renderIconMedia and renderIcon in Media.tsx to use CSS variable syntax:

const renderIcon = (src: string, sizePx: number | string, color?: string) => {
  const IconComponent = getIconRegistry()?.get(src);
  if (IconComponent) {
    const iconStyle = color && isThemeToken(color)
      ? { color: `var(--${color})` }
      : { color: color || 'currentColor' };
    return <IconComponent size={sizePx} style={iconStyle} />;
  }
};

Workaround for Now

Remove color: accent (and similar) from icon definitions in content.yml files until this is fixed.

Priority

LATER — This is a real bug but has a simple workaround.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingpriority:laterPlanned but not yet committed

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions