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', } }

[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.

[liuqiang1357]

Why not expose all component tokens? v5 is much less customizable than v4, it should be stronger, I don't understand.

[bencerf]

FYI, @MadCcc recently open an issue about the summary of V4 Component Token Migration : #41884.

[farhanmalhi-dbank]

Where i can find all the list of token that are being added in every release. Is there anyway to find all the list having new and old tokens?
Thanks

[monolithed]

I can't evaluate the transition to the new version yet because nothing from what was promised works 100%. Tokens are a modern and long-awaited solution, but they don't work. I don't get why this version is called 5 and not beta.
The developers released a version that nobody tested, and unfortunately, the bugs that are found are not being fixed.
The scariest part is that currently we are patching up problems with workarounds. At some point, an update will be released and the interfaces will explode.
It may be cool, but only for pet / personal projects. With the 4th version, I didn't have as many issues, but in version 5, most of my time is spent reading tickets on how to fix bugs that shouldn't even exist.

Here is the simplest example with a button:

/* global css */

.ant-btn {
    padding: 25px !important; /* ! */
}

/* local css */

.button {
    color: red !important; /* ! */
}

.button:hover {
    color: green !important; /* ! */
}

.button:active {
    color: red !important; /* ! */

<ConfigProvider theme={{
    components: {
        Button: {
            colorPrimaryBg: 'white',  // not available
            colorPrimaryBgHover: 'green',  // not available
            colorPrimaryBgActive: 'red',  // not available
            colorPrimaryText: 'red', // not available
            colorPrimaryTextHover: 'green', // not available
            colorPrimaryTextActive: 'red' // not available
            padding: 25px // not available
    }
}}>
    <Button className={styles.button} type="primary">Text</Button>
</ConfigProvider>

And such issues with every component

[abenhamdine]

@monolithed it seems like Button component has not yet been migrated to the new token system, see check list in #41884

[monolithed]

@monolithed it seems like Button component has not yet been migrated to the new token system, see check list in #41884

@abenhamdine, the last time I worked with Ant Design was 4 years ago. Back then, there were also a lot of issues, mostly related to API inconsistency. I had to write wrappers for components to make the interfaces look consistent. Nevertheless, I promoted Ant Design wherever I worked as one of the best libraries on the market because the rules of the game were clear. Now I've seen that version 5 has been released, which seems to have addressed the old issues. It introduced tokens, made the API more consistent, although they still haven't added refs to many components, and the dark background in the layout hasn't gone anywhere. The tokens don't work, CSS build is deprecated, and breakpoints with SSR (next@13) also behave incorrectly.

Take a look at the instructions on how to connect Ant Design. Do you see how to connect styles there? In the new version, the style assembly has become outdated, and now you need to assemble it yourself, but beginners only find out about this after their interface starts jumping like a horse on a racetrack:

Screen.Recording.2023-06-03.at.20.54.35.mov

If you were a manager, could you recommend this library for developing a serious project with fixed deadlines? I wouldn't, because releasing a major version with killer features that only work halfway is very strange. How do you envision such development? Writing something in the old style, something in the new style, but who will be the investor for subsequent refactoring? In my opinion, version 5 is more like an initial beta stage.

[abenhamdine]

If you were a manager, could you recommend this library for developing a serious project with fixed deadlines? I wouldn't, because releasing a major version with killer features that only work halfway is very strange. How do you envision such development? Writing something in the old style, something in the new style, but who will be the investor for subsequent refactoring? In my opinion, version 5 is more like an initial beta stage.

I would strongly recommend using version 4 only, for now.

In my opinion, version 5 is more like an initial beta stage.

definitely
I am a CTO in charge of a complex app built with antd 4, and it's obvious for me that antd 5 is currently more a beta or an internal release for alipay early adopters.
We have at least to wait for the token migration to be completed.
But nobody is forcing anyone to use antd 5 : antd 4 is still maintained.
We are only monitoring the progress of antd 5, but we don't plan to migrate before 2023 Q4 or 2024 Q1, when the v5 will be mature enough.

[monolithed]

@abenhamdine, I get it, but I don't believe them because these new things like tokens are being released without any testing 😭

[abenhamdine]

@abenhamdine, I get it, but I don't believe them because these new things like tokens are being released without any testing 😭

I agree It's worrying. Let's wait for the dust to settle.

OSS world is full of pitfalls like that.
We are currently migrating from ReactRouter 5 to version 6, and believe me, it's the hell on earth 😢

[evgeniyworkbel]

Please for Popconfirm:

• add fontFamily token and font size heading token;
• adjust colorText, fontSize tokens - they doesn't work at the current time

[sdt-jchau]

Please expose token to set line height for tree content or fix it so it uses the global lineHeight token. Currently, lineHeight for ant-tree-node-content-wrapper is hardcoded to 24px regardless of global lineHeight token. I believe the content wrapper lineHeight should inherit lineHeight token or expose a new token to set it. Thank you.

[CSDev0]

Please expose Collapse component tokens.

type CollapseToken = FullToken<'Collapse'> & {
    collapseContentBg: string;
    collapseHeaderBg: string;
    collapseHeaderPadding: string;
    collapseHeaderPaddingSM: string;
    collapseHeaderPaddingLG: string;
    collapsePanelBorderRadius: number;
    collapseContentPaddingHorizontal: number;
}; 

[monolithed]

Couldn't find tokens for AutoComplete, but there is a workaround though <AutoComplete><Input /></AutoComplete>

[ayrosochang]

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

You didn't answer the original question which is #38975 (comment)

[abenhamdine]

@ayrosochang layout token seems indeed incomplete, see also #41884 (comment)

[evgeniyworkbel]

It will be cool to provide tokens:

1. for Switch in order to:

• set bg color of whole switch
• set external border color or outline of whole switch
• set border radius of whole switch
• set border radius of handle
• set bg color of handle when is checked. Now there is single token for both states (checked/unckecked)

Of course it needs the same tokens like above also for small size of Switch

2. for Select in order to:

• set arrow icon color when select is disabled
• set bg color when select is hovered
• set bordercolor when select is hovered
• set border color when select is pressed (focused)

3. for DatePicker in order to:

• set bg color of input when is hovered
• set color text in input only. Now colorText token sets color for input and for cells together
• set color of suffixIcon
• set color of suffixIcon when is disabled
• set font size of day names into popup
• set text color of day names into popup
• set font size of numbers into popup

4. for Menu in order to:

• set bg color when item is selected and hovered

5. for Button in order to:

• set bg color when default btn is hovered
• set border-color when primary btn is active

[monolithed]

The token names primaryColor (text) and colorPrimary (background) appear confusing. Is it possible to rename them to more understandable names like textColor and backgroundColor?
BTW, colorPrimaryTextHover isn't applied to the Button component

[shivaraja-tte]

Migrating from v4 to v5, I have used primary color variants like ant-primary-1, ant-primary-7 in my less files, are these colors accessible through tokens in v5 or any plans to add them if not available yet

[ASHFAQPATWARI]

Please add component token to modify font-weight of labels under Form component. Currently we can only change the label color/font-size/height.

[guoyunhe]

Need tokens to control Button height.

[ASHFAQPATWARI]

Need tokens to control Button height.

@guoyunhe Tokens for controlling button height are already available as global token

token: { controlHeight: 36, controlHeightLG: 44, controlHeightSM: 24, }

[guoyunhe]

Need tokens to control Button height.

@guoyunhe Tokens for controlling button height are already available as global token

token: { controlHeight: 36, controlHeightLG: 44, controlHeightSM: 24, }

Thank you! This is very helpful!

[xsjcTony]

Layout.Header's theme should follow the algorithm used by default, or at least provide an theme prop. Containers should not have opinionated styles (especially colors).

Overall the header color design is just a bit weird... Look at the official example at home page, when turned to dark mode, the text is not even visible by default. Dark algorithm is not applied.

[xsjcTony]

Add token to customize Card's extra's fontSize

[pavlo-hadzheha]

Tokens for modal paddings, margins