UIKIT2 Icon color

Hello !
I’m slowly transitioning from @atlaskit Custom UI to uikit2/react@10.

I’m wondering how to set the color of icons. I even did not do anything fancy, just using the color.icon token.

Custom UI:

<DocumentsIcon size={'medium'} primaryColor={token('color.icon')} label={'Copy Document'}/>

Using uilkit2,

  • there is no option for color
  • the token color.icon is defined in none of the xcss types, making it impossible to set via a Box style.

Any idea ?
Thanks !

5 Likes

The closest thing I could think of is to use a Button with icon instead and then follow the color schemes provided by the appearance prop and it handles dark mode automatically:

2024-06-21-atlassian-forge-uikit-button-appearances

1 Like

Thanjs @yongchong.long .
It does not match my use case.

For example, I want to display

<Inline space={'space.100'}>
   <Icon glyph="add" size={'medium'} label={'New Document'}/>
   <ModalTitle>{props.title}</ModalTitle>
</Inline>

The icon color should be customizable, or at least be the token color.icon.
It is none of those.

1 Like

@FabienLydoire this functionality isn’t currently available in the latest UI kit (previously known as UI kit 2) so if you require it, for now you’d be best to stick with Custom UI and Atlaskit.

I have also passed this post along to the Forge UI team so they can consider adding a feature request for this functionality to the UI kit backlog.

Cheers!
Melissa

4 Likes

Thanks @mpaisley !

Melissa,

I figured out a way to tint an icon using Box and xcss.

<Inline space={'space.100'}>
  <Box xcss={xcss({ color: 'color.text.subtle' })}>
    <Icon glyph="add" size={'medium'} label={'New Document'}/>
  </Box>
  <ModalTitle>{props.viewModel.title}</ModalTitle>
</Inline>

Unfortunately, the xcss does not allow usage of color.icon token family.
I did fallback to use color.text.subtle which is the same color than color.icon according to the ADS Design tokens documentation.

Probably the color.icon token is reserved for the upcoming color prop for the Icon component ? :thinking:

2 Likes

Thanks for sharing this trick! I’m sure many will find this helpful. I’ve tested all the currently available color tokens and it seems like only color.text and color.link tokens work, e.g. you can get a purple like icon with color.link.visited:

forge-uikit-icon-tinting-purple-like

The xcss accepted tokens are explicitly defined in Typescript.

./node_modules/@atlaskit/primitives/dist/types/xcss/xcss.d.ts

Generally speaking, looking at the TypeScript types is very helpful to determine the capabilities of a Forge component.
Depending on your IDE, you can “command” or “option” click on the xcss color attribute and land in that file !

readonly color: {
        readonly 'color.text': "var(--ds-text)";
        readonly 'color.text.accent.lime': "var(--ds-text-accent-lime)";
        readonly 'color.text.accent.lime.bolder': "var(--ds-text-accent-lime-bolder)";
        readonly 'color.text.accent.red': "var(--ds-text-accent-red)";
        readonly 'color.text.accent.red.bolder': "var(--ds-text-accent-red-bolder)";
        readonly 'color.text.accent.orange': "var(--ds-text-accent-orange)";
        readonly 'color.text.accent.orange.bolder': "var(--ds-text-accent-orange-bolder)";
        readonly 'color.text.accent.yellow': "var(--ds-text-accent-yellow)";
        readonly 'color.text.accent.yellow.bolder': "var(--ds-text-accent-yellow-bolder)";
        readonly 'color.text.accent.green': "var(--ds-text-accent-green)";
        readonly 'color.text.accent.green.bolder': "var(--ds-text-accent-green-bolder)";
        readonly 'color.text.accent.teal': "var(--ds-text-accent-teal)";
        readonly 'color.text.accent.teal.bolder': "var(--ds-text-accent-teal-bolder)";
        readonly 'color.text.accent.blue': "var(--ds-text-accent-blue)";
        readonly 'color.text.accent.blue.bolder': "var(--ds-text-accent-blue-bolder)";
        readonly 'color.text.accent.purple': "var(--ds-text-accent-purple)";
        readonly 'color.text.accent.purple.bolder': "var(--ds-text-accent-purple-bolder)";
        readonly 'color.text.accent.magenta': "var(--ds-text-accent-magenta)";
        readonly 'color.text.accent.magenta.bolder': "var(--ds-text-accent-magenta-bolder)";
        readonly 'color.text.accent.gray': "var(--ds-text-accent-gray)";
        readonly 'color.text.accent.gray.bolder': "var(--ds-text-accent-gray-bolder)";
        readonly 'color.text.disabled': "var(--ds-text-disabled)";
        readonly 'color.text.inverse': "var(--ds-text-inverse)";
        readonly 'color.text.selected': "var(--ds-text-selected)";
        readonly 'color.text.brand': "var(--ds-text-brand)";
        readonly 'color.text.danger': "var(--ds-text-danger)";
        readonly 'color.text.warning': "var(--ds-text-warning)";
        readonly 'color.text.warning.inverse': "var(--ds-text-warning-inverse)";
        readonly 'color.text.success': "var(--ds-text-success)";
        readonly 'color.text.discovery': "var(--ds-text-discovery)";
        readonly 'color.text.information': "var(--ds-text-information)";
        readonly 'color.text.subtlest': "var(--ds-text-subtlest)";
        readonly 'color.text.subtle': "var(--ds-text-subtle)";
        readonly 'color.link': "var(--ds-link)";
        readonly 'color.link.pressed': "var(--ds-link-pressed)";
        readonly 'color.link.visited': "var(--ds-link-visited)";
        readonly 'color.link.visited.pressed': "var(--ds-link-visited-pressed)";
    };
3 Likes

From my understanding, the /@atlaskit/forge-react-types/src/components/__generated__/IconProps.codegen.tsx file, defines :

export type IconColor = Extract<ActiveTokens, `color.icon.${string}`>;

How can we then use the color.icon in there?

https://atlassian.design/components/tokens/all-tokens#color-icon

Can this be addressed ?

1 Like

Hi @FabienLydoire @GuillaumeBero , the Icon component accepts a primaryColor prop where a color token can be passed in https://developer.atlassian.com/platform/forge/ui-kit/components/icon/#color

Yes but the color.icon is not available if you look at the below type.

Any other color.icon.* would be accepted, but not that particular one

Thanks for pointing this out @GuillaumeBero , I see we’re missing that token in our types. We will look to correct this in the next release. For now, if you ignore the type error, the token should still apply despite the type error.