5.0 Component Token Request

[MadCcc]

In 5.0 and later versions, we provide component token for users to customize component style more easily. However, considering the risk of breaking change, we will add component tokens which are necessary for theming little by little.

Any request of component token is welcomed to discuss here. We will make it better in later versions.

[alioguzhan]

Exposing all available tokens to the ConfigProvider looks like a must. I am trying to change the height of the Layout.Header. There is a layoutHeaderHeight token but it is internal. I couldn't find a way to override it. I was about to open an issue thinking I am the one who is missing something. But it looks like they are not exported.

Is there any specific reason for not exposing all available tokens? If I can't customize the parts of my application via Javascript, what was the point of replacing less with css-in-js in the first place?

---

Same for the boxShadow too, I am trying to disable box shadows from buttons. There is already a boxShadow token but it has no effect. I am not sure why. Is this an expected behavior or should I open an issue for it?

Thanks for the great work on v5.

[vsosinga]

I agree with @alioguzhan: why aren't all available tokens exposed? We are upgrading ffrom v4 and Modal for example has no component tokens exposed.

[alioguzhan]

Also, can we pin this issue so everyone can see it and comment ? @MadCcc

[MadCcc]

I agree with @alioguzhan: why aren't all available tokens exposed? We are upgrading ffrom v4 and Modal for example has no component tokens exposed.

Because in V5's Design Token system, less token is needed for theming.

[Kamahl19]

What's the conclusion? Is exporting all tokens in a roadmap? If not, what's the recommended way to customise components.

[osumoclement]

I have a similar problem, colorBgLayoutHeader token not working to change Header background color. In v4 I could override ant-layout-header in LESS. Seems there isn't a working equivalent to achieve this in the new token system

[Abhirup-99]

Please export all tokens. This would make it very easy to upgrade from v4. Our initial attempt at upgrading was a failure due to various styles which were not exported. Thanks for creating antd.

[dan-turner]

👍 what is the recommended way to achieve the following with V5?

@import "~antd/dist/antd.less";

@layout-header-height: 85px;
@layout-header-background: #fff;
@layout-header-color: #000;

[jeffmarshall]

It would be nice if I could change the horizontal padding on table cells, titles and footers. As it stands, the only way is by changing padding, but that also changes the vertical padding.

[dan-turner]

👍 what is the recommended way to achieve the following with V5?

@Wxh16144 are you able to please advise?

[evgeniyworkbel]

Developers of antd, please tweak fontSize token for Typography component separately- now the only way to set font size for it is to set seed token for all components, but it doesn't fit my project

[vsosinga]

@evgeniyworkbel can't you use the component token in this case? For example (haven't tested it): components: { Typography: { fontSize: '16px', } }

[Wxh16144]

are you able to please advise?

@dan-turner I’m sorry I didn’t get back to you sooner, but in v4 you can only adjust your theme by modifying the less variable. docs: https://4x.ant.design/docs/react/customize-theme#Ant-Design-Less-variables

[evgeniyworkbel]

@evgeniyworkbel can't you use the component token in this case? For example (haven't tested it): components: { Typography: { fontSize: '16px', } }

I want to apply this way, but it doesn't work

[evgeniyworkbel]

Also it will be cool if antd developers are going to add token which tweak background color and border color when component Select is hovered. By the way, colorPrimaryHover token doesn't work on component Select

[guoyunhe]

Design token requests: font-size, font-weight and line-height for <Card title="" /> and <Card.Meta title=""/>.

[kangsunlei]

The theme.conmponets.Menu configuration of the ConfigProvider component does not take effect on the menu inside the dropdown.

demo：https://codesandbox.io/s/agitated-swanson-1gk412?file=/src/App.tsx:211-224

[evgeniyworkbel]

It's going to be convenient if developers can be able to specify sizeable tokens like fontSize, headingFontSize, margin, padding ant etc. in relative units like rem, em and so on - for adaptiveness. Now it's uncomfortable use only a number in these tokens.

Now these size may being specifying in rem, but i found troubles with built-in components: at devtools some css properties were invalid (for example lineHeight, height)

[TitianMichael]

This is particularly bad for the Table component where the same color "colorFillAlter" is used for five different backgrounds:

• table header (tableHeaderBg)
• table footer (tableFooterBg)
• Sorted column (tableBodySortBg)
• Hover row (tableRowHoverBg)
• Expanded table row (tableExpandedRowBg)

I can't set the column header color differently to make it stand out and match branding (pink) as it applies to all of those backgrounds as well:

(I also think they should perhaps not be the same color in the base style)

[vitalijalbu]

a new navigation sidebar & a double one:

• https://atlassian.design/components/side-navigation/examples
• https://ui.mantine.dev/component/double-navbar

[evgeniyworkbel]

Add tokens for TimePicker in next changelog (minor version)! PLEASE! There is nothing to manipulate it

[felixschorer]

This is particularly bad for the Table component where the same color "colorFillAlter" is used for five different backgrounds:

• table header (tableHeaderBg)
• table footer (tableFooterBg)
• Sorted column (tableBodySortBg)
• Hover row (tableRowHoverBg)
• Expanded table row (tableExpandedRowBg)

I can't set the column header color differently to make it stand out and match branding (pink) as it applies to all of those backgrounds as well:

I am facing the same issue. It's not possible to just change the header color without affecting anything else.

[god-of-javascript]

Can we have closeIcon and selectArrowIcon to be able to configure it? @zombieJ

It is useful for Modal, Select ant other closable and selectable components

[evgeniyworkbel]

Could you create developer stories for TimePicker, Tooltip, Popover in Theme Editor?

[tomekregulski]

On the topic of customizing internal tokens, I am currently having a difficult time with Collapse tokens related to header padding. While I understand how to change, say, collapseHeaderPaddingSM by adjusting paddingXS and paddingSM, those variables map to other padding properties that I do not want to affect the same way.

Exposing these tokens to be customizable seems like it would instantly resolve this issue.

In case I happen to be going about this the wrong way, here is how I am attempting to achieve an "inline" Collapse with no padding other than 16px between the header and content:

<ConfigProvider
            theme={{
                components: {
                    Collapse: {
                        paddingSM: 0,
                        paddingXS: 0,
                        collapseHeaderPaddingSM: '16px 0px', // TS Error
                        [...other styling not related to padding}
                    },
                },
            }}
        >
        <Collapse
                ghost
                size='small'
                {...restProps}
            >
                {children}
        </Collapse>
</ConfigProvider>

[EmberCCC]

I saw many tokens in the style library of antd's table, but many of them are not exposed and are still calculated through other exposed tokens for color. I hope to expose more tokens as much as possible to facilitate more fine-grained customization of themes, similar to how MUI exposes CSS class names for css-in-js related operations under its official website.

[vitalijalbu]

Would be great to have multiple modal effects, something like: https://mantine.dev/core/transition/

[abenhamdine]

a new navigation sidebar & a double one:

Would be great to have multiple modal effects, something like: mantine.dev/core/transition

@vitalijalbu this issue is not for components requests, but for components token requests

Token allows to customize theme for specific components, see https://ant.design/docs/react/customize-theme

[vitalijalbu]

a new navigation sidebar & a double one:

Would be great to have multiple modal effects, something like: mantine.dev/core/transition

@vitalijalbu this issue is not for components requests, but for components token requests

Token allows to customize theme for specific components, see https://ant.design/docs/react/customize-theme

ok sorry, for component tokens would be great have sizes globally on all provider, antd default is very small... like inputs, buttons etc...

[freejosh]

Similar to another typography request, I'd like to set fontFamily for Title only. Currently I'm creating a global style for h1, h2, etc. but it would be nice to have it as part of the token overrides.