Add `variable.less` to support css variable #31496

zombieJ · 2021-07-22T12:29:02Z

📋 RFC

Summary

Support CSS Variable to dynamic change antd theme color with static function.

Basic example

import { ConfigProvider } from 'antd';

ConfigProvider.config({
  theme: {
    primaryColor: '#25b864', // Lark green
  },
});

Motivation

In antd, theme is generate on build time which means user can not dynamic change theme on runtime. There is some hack way like build replacement css file back of css variable (which may cause wrong design token of same valued variables) or create a less builder on client or server side to build style add inject back.

For the modern browsers, css variable is a cheaper way to dynamic change theme. To avoid breaking current user like IE 11, it should keep all the output as previous version but provide additional build file with css variables version like antd.variable.css & antd.variable.min.css. So developer can chose to use these new variable style file to enable config provider static function.

Detailed

To realize this feature, we need create another entry for build. Current components is strong deps on the root style file which use the less function to generate style variables and these function variables can not work in browser. We need:

Create a variable entry like default.less and replace all the variables by css variable
- Consider to create script for auto replacement to avoid to variable sync issue
Improve ConfigProvider.config to support inject css variables in browser side
Move all the components deps apart from the root
- 🧨 This is still need investigate since components deps on the root which makes recv deps in less. And these makes default version mixed with variable version
Refactor related entry apart with target build mode
- site build entry use variables to support dev requirement
- dist (webpack) build entry to support multiple mode
- es/lib build should chose correct build mode

Drawbacks

Since design token use lots of less function, its hard to replace all the variable with native one. We may lock the static function in alpha for a long time util all the design token is validate to replace

Adoption strategy

alpha version will release sync with current version of antd. When all the design token replaced, we will release final version.
Not provide less version file since it can not split on less side.

🤔 This is a ...

💡 Background and solution

Before next major version. We consider to provide css variable support in v4 for the user who do not need support IE.

NOTE: This is far from finish since we do too much on less color calculation. To avoid break current behavior, we need some workaround to make it work.

https://preview-31496-ant-design.surge.sh/components/config-provider-cn/#components-config-provider-demo-theme

📝 Changelog

Language	Changelog
🇺🇸 English
🇨🇳 Chinese

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

Doc is updated/provided or not needed
Demo is updated/provided or not needed
TypeScript definition is updated/provided or not needed
Changelog is provided or not needed

codecov · 2021-07-22T12:29:11Z

Codecov Report

Merging #31496 (4911998) into feature (a43e21e) will increase coverage by 0.00%.
The diff coverage is 100.00%.

❗ Current head 4911998 differs from pull request most recent head 8afd4fb. Consider uploading reports for the commit 8afd4fb to get more accurate results

@@           Coverage Diff            @@
##           feature   #31496   +/-   ##
========================================
  Coverage    99.95%   99.96%           
========================================
  Files          409      410    +1     
  Lines         7461     7509   +48     
  Branches      2032     2039    +7     
========================================
+ Hits          7458     7506   +48     
  Misses           3        3

Impacted Files	Coverage Δ
components/config-provider/context.tsx	`100.00% <ø> (ø)`
components/config-provider/cssVariables.tsx	`100.00% <100.00%> (ø)`
components/config-provider/index.tsx	`100.00% <100.00%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a43e21e...8afd4fb. Read the comment docs.

github-actions · 2021-07-22T12:29:21Z

github-actions · 2021-07-22T12:29:22Z

🚨 Please fill changelog in the PR
- Write with a developer-oriented perspective and narrative method, without describing the details of the repair
- Describing the problem and the impact on the developer
- describing the user-first site problem, not your solution
- Refer: https://ant.design/changelog#4.9.0
🚨 请填写 PR 中的 changelog
- 请用面向开发者的角度和叙述方式撰写，不描述修复细节
- 描述问题和对开发者的影响
- 描述用户第一现场的问题，而非你的解决方式
- 参考：https://ant.design/changelog-cn#4.9.0

github-actions · 2021-07-22T12:41:27Z

Size Change: +70.1 kB (+8%) 🔍

Total Size: 912 kB

Filename	Size	Change
`./dist/antd-with-locales.min.js`	350 kB	+2.28 kB (+1%)
`./dist/antd.compact.min.css`	64.7 kB	+34 B (0%)
`./dist/antd.dark.min.css`	66.1 kB	+62 B (0%)
`./dist/antd.min.css`	64.9 kB	+20 B (0%)
`./dist/antd.min.js`	301 kB	+2.29 kB (+1%)
`./dist/antd.variable.min.css`	65.4 kB	+65.4 kB (new file)	🆕

_{compressed-size-action}

afc163 · 2021-07-26T03:05:32Z

需要发一段时间的 beta 版本，稳定第一
是否只要自定义 @primary-color 就能更换所有色彩，还是需要 @primary-1 到 10 都要自定义？

zombieJ · 2021-07-26T07:05:26Z

需要发一段时间的 beta 版本，稳定第一

是否只要自定义 @primary-color 就能更换所有色彩，还是需要 @primary-1 到 10 都要自定义？

+1
目前看起来是散装的，大部分的可以合并干掉。几个散装的比较蛋疼。

jaredleechn · 2021-07-27T06:22:53Z

components/button/style/mixin.less

@@ -300,12 +329,15 @@
          `
      );
    }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {


hengkx · 2021-07-27T07:22:40Z

有没有办法我只改变primary color 就可以了，自定义颜色太多的话用户很容易出问题

shaodahong · 2021-07-27T07:38:56Z

目前看起来是散装的，大部分的可以合并干掉。几个散装的比较蛋疼。

@zombieJ 散装的 lighten(@primary-color, 10%) 这种能支持么

chenshuai2144 · 2021-08-02T03:50:07Z

components/config-provider/cssVariables.tsx

+import { generate } from '@ant-design/colors';
+import { Theme } from './context';
+
+export function registerTheme(theme: Theme) {


这个方法能暴露出来，或者挂到 windows 上面吗？

maxim-kolesnikov · 2021-08-31T14:45:28Z

Congratulations! 🏆

xrkffgg

666

afc163 · 2021-08-31T14:58:50Z

docs/react/customize-theme-variable.zh-CN.md

+```ts
+ConfigProvider.config({
+  theme: {
+    prefixCls: 'custom',


https://ant.design/components/config-provider-cn/#ConfigProvider.config()-4.13.0+

应该是这样？

ConfigProvider.config({ prefixCls: 'custom', });

这个还没回复呀。@zombieJ

afc163 · 2021-08-31T14:58:59Z

docs/react/customize-theme-variable.zh-CN.md

+由于前缀变更，你需要重新生成一份对应的 css 文件。
+
+```bash
+lessc  --modify-var="ant-prefix=custom" antd/dist/antd.variable.less modified.css


Suggested change

lessc --modify-var="ant-prefix=custom" antd/dist/antd.variable.less modified.css

lessc --modify-var="ant-prefix=custom" antd/dist/antd.variable.less modified.css

afc163 · 2021-08-31T14:59:43Z

docs/react/customize-theme-variable.zh-CN.md

+```diff
+-- import 'antd/dist/antd.min.css';
++ import 'antd/dist/antd.variable.min.css';
+```


提示一下去掉 babel-plugin-import 里的 css 或 style 属性，避免样式重复（如果用到）。

afc163 · 2021-08-31T15:01:25Z

package.json

@@ -291,7 +291,7 @@
  "bundlesize": [
    {
      "path": "./dist/antd.min.js",
-      "maxSize": "270 kB"
+      "maxSize": "275 kB"


增加了 2kB 多，主要是在哪里？

CSS 计算切换到 js，多了 3+ KB。

afc163 · 2021-09-01T04:10:12Z

docs/react/customize-theme-variable.zh-CN.md

+title: 动态主题（实验性）
+---
+
+除了 [less 定制主题外](/docs/react/customize-theme) 外，我们还提供了 CSS Variable 版本以支持动态切换主题能力。你可以在 [ConfigProvider](/components/config-provider/#components-config-provider-demo-theme) 进行体验。


docs/react/customize-theme 里也补一下动态主题内容，链接到这里来。

zombieJ · 2021-09-01T05:53:19Z

纯文档更新，我在 #31987 顺道一起了

maxim-kolesnikov · 2021-09-03T17:02:18Z

@zombieJ, Thank you for you job!

Could you explain, how I can use Dynamic Theme (experience) in antd@4.17.0-alpha.0 and modifyVars in webpack.pack.conf for change size-variables?

That config worked fine..

// index.ts
import 'antd/dist/antd.variable.less';

// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader',
    }, {
      loader: 'less-loader',
      options: {
        lessOptions: {
          modifyVars: {
            'btn-height-sm': '32px',
            'btn-height-lg': '48px',
            'border-radius-base': '2px',
            // ...other sizes variables
          },
          javascriptEnabled: true,
        },
      },
    }],
  }],
}

.. but, now for change primaryColor in runtime with antd@4.17.0-alpha.0, I should change variable file .less to .css extension, right?

 // index.ts
 -- import 'antd/dist/antd.variable.less';
 ++ import 'antd/dist/antd.variable.min.css';
 
  ConfigProvider.config({
    theme: {
      primaryColor: 'blue',
    },
  });

This changes lose modifyVars working. Buttons with size="large" has height: 40px as default. 🤔

olivewind · 2021-09-08T03:18:41Z

这个 feature 什么时候可以正式发布？我看现在还是 alpha

afc163 · 2021-09-08T03:42:51Z

@olivewind alpha 也可以用起来了。

wangjianio · 2021-09-09T12:19:41Z

升级 4.17.0-alpha.2 报这个错：

ERROR in ./node_modules/antd/es/spin/style/css.js 1:0-39
Module not found: Error: Can't resolve '../../style/index-default.css'

4.16.13 是好的

#32108

afc163 · 2021-09-09T12:22:59Z

@wangjianio 提个 issue。

arifszn · 2021-09-10T16:37:26Z

+1. Finally dynamic theming on runtime. It would be nice to see dynamic dark mode implementation in near future too.

marklai1998 · 2021-10-01T18:30:34Z

still no dynamic dark mode?

breezewish · 2021-10-25T16:02:11Z

Congrats to the work! I believe the dark theme can be much easier to implement when using css variables.

liquorxm · 2021-10-27T08:34:10Z

@zombieJ umijs框架中，通过 @import '~antd/es/style/themes/default.less'; 这种方式引入到自定义less文件，antd默认的less变量 @primary-color 不能通过此方法修改生效，请问下怎么解决呢

dancerphil · 2021-11-09T12:01:01Z

Great Work! Save us much time on to be compatible with css variables.

ckken · 2022-06-14T09:51:07Z

no dynamic dark mode!

zombieJ added 6 commits July 22, 2021 17:00

chore: use varaible.less

156611b

chore: basic primary varaible

749cffc

chore: Move to variable

1e399e4

chore: align active color

1397de1

chore: global fix of css variable

86e8736

chore: primary colors

d99bf69

zombieJ added 7 commits July 22, 2021 22:20

chore: button danger

be09611

chore: btn default error color

7abe6d6

chore: button series

40af5e1

chore: More examples

c635a51

chore: More components

f3f5ee9

chore: Form demo

23dfc9b

chore: form style

90bbe6d

zombieJ added 3 commits July 26, 2021 14:12

fix: Tag & Alert variable

6e88c91

chore: update footer

4046023

chore: rm tmp code

37be334

jaredleechn reviewed Jul 27, 2021

View reviewed changes

chore: transfer

dbcd328

chenshuai2144 reviewed Aug 2, 2021

View reviewed changes

zombieJ added 3 commits August 10, 2021 10:33

Merge remote-tracking branch 'origin/feature' into css-variable

84d45b9

fix: picker column active color

2d7c405

chore: Adjust active bg color

d260082

zombieJ added 2 commits August 31, 2021 20:10

docs: Update doc

edd5cc3

Merge remote-tracking branch 'origin/feature' into css-variable

8afd4fb

zombieJ marked this pull request as ready for review August 31, 2021 13:40

07akioni approved these changes Aug 31, 2021

View reviewed changes

xrkffgg approved these changes Aug 31, 2021

View reviewed changes

PeachScript approved these changes Aug 31, 2021

View reviewed changes

afc163 reviewed Aug 31, 2021

View reviewed changes

zombieJ merged commit 36bcaae into feature Sep 1, 2021

zombieJ deleted the css-variable branch September 1, 2021 02:56

zombieJ mentioned this pull request Sep 1, 2021

docs: add 4.17.0-alpha.0 changelog #31987

Merged

15 tasks

afc163 reviewed Sep 1, 2021

View reviewed changes

xrkffgg mentioned this pull request Sep 6, 2021

fix: Upload icon error background #32051

Merged

19 tasks

kaysonwu mentioned this pull request Sep 14, 2021

Missing antd.variable.min.css #32152

Closed

1 task

shanejix mentioned this pull request Oct 18, 2021

Web 站点动态主题切换实现 shanejix/shanejix.github.io#73

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `variable.less` to support css variable #31496

Add `variable.less` to support css variable #31496

zombieJ commented Jul 22, 2021 •

edited

codecov bot commented Jul 22, 2021 •

edited

github-actions bot commented Jul 22, 2021 •

edited

github-actions bot commented Jul 22, 2021

github-actions bot commented Jul 22, 2021 •

edited

afc163 commented Jul 26, 2021

zombieJ commented Jul 26, 2021

jaredleechn Jul 27, 2021

hengkx commented Jul 27, 2021

shaodahong commented Jul 27, 2021

chenshuai2144 Aug 2, 2021

maxim-kolesnikov commented Aug 31, 2021

xrkffgg left a comment

afc163 Aug 31, 2021

afc163 Sep 1, 2021

afc163 Aug 31, 2021

afc163 Aug 31, 2021

afc163 Aug 31, 2021

zombieJ Sep 1, 2021

afc163 Sep 1, 2021

zombieJ commented Sep 1, 2021

maxim-kolesnikov commented Sep 3, 2021

olivewind commented Sep 8, 2021

afc163 commented Sep 8, 2021

wangjianio commented Sep 9, 2021 •

edited

afc163 commented Sep 9, 2021

arifszn commented Sep 10, 2021

marklai1998 commented Oct 1, 2021

breezewish commented Oct 25, 2021

liquorxm commented Oct 27, 2021

dancerphil commented Nov 9, 2021

ckken commented Jun 14, 2022

	lessc --modify-var="ant-prefix=custom" antd/dist/antd.variable.less modified.css
	lessc --modify-var="ant-prefix=custom" antd/dist/antd.variable.less modified.css

Add variable.less to support css variable #31496

Add variable.less to support css variable #31496

Conversation

zombieJ commented Jul 22, 2021 • edited

📋 RFC

Summary

Basic example

Motivation

Detailed

Drawbacks

Adoption strategy

🤔 This is a ...

💡 Background and solution

📝 Changelog

☑️ Self Check before Merge

codecov bot commented Jul 22, 2021 • edited

Codecov Report

github-actions bot commented Jul 22, 2021 • edited

github-actions bot commented Jul 22, 2021

github-actions bot commented Jul 22, 2021 • edited

afc163 commented Jul 26, 2021

zombieJ commented Jul 26, 2021

Choose a reason for hiding this comment

hengkx commented Jul 27, 2021

shaodahong commented Jul 27, 2021

Choose a reason for hiding this comment

maxim-kolesnikov commented Aug 31, 2021

xrkffgg left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zombieJ commented Sep 1, 2021

maxim-kolesnikov commented Sep 3, 2021

olivewind commented Sep 8, 2021

afc163 commented Sep 8, 2021

wangjianio commented Sep 9, 2021 • edited

afc163 commented Sep 9, 2021

arifszn commented Sep 10, 2021

marklai1998 commented Oct 1, 2021

breezewish commented Oct 25, 2021

liquorxm commented Oct 27, 2021

dancerphil commented Nov 9, 2021

ckken commented Jun 14, 2022

Add `variable.less` to support css variable #31496

Add `variable.less` to support css variable #31496

zombieJ commented Jul 22, 2021 •

edited

codecov bot commented Jul 22, 2021 •

edited

github-actions bot commented Jul 22, 2021 •

edited

github-actions bot commented Jul 22, 2021 •

edited

wangjianio commented Sep 9, 2021 •

edited