ant-design/antd-token-previewer

antd-token-previewer 🖥

Help you customize theme in Ant Design.

Live Demo

https://ant-design.github.io/antd-token-previewer/

Install

npm i antd-token-previewer

Usage

Ref: https://ant-design.github.io/antd-token-previewer/editor

API

ThemeEditor

Property	Description	Type	Default
theme	Controlled Theme object	Theme	-
onThemeChange	Callback when theme changed	(theme: Theme) => void	-
locale	Language used in ThemeEditor	Locale	zhCN
actions	Actions displayed on the right of header	React.ReactNode	-
advanced	Advance mode	boolean	-
onAdvancedChange	Callback when advanced change	(advanced: booleaen) => void	-
children	Preview area.	ReactNode	-

Theme

Property	Description	Type
name	Name of Theme	string
key	Used as key for ReactElement	string
config	Theme config of antd	ThemeConfig

Development

npm install
npm start

License

antd-token-previewer is released under the MIT license.

antd-token-previewer's Issues

antd-token-previewer 使用有版本报错

Move to @ant-design/antd-theme-previewer

Refactor Plan

Motivation

Currently [email protected] has been released for a while, from a simple component to a complex one with a lot of demos within, which make this component too large with nearly 400kb after gzip.

And for other reasons like package name: #181 , it is needed to split this repo and make theme-editor dependent.

What to do

1. Split this repo into 2 or more packages: @ant-design/theme-editor @ant-design/token-previewer and possible demo package.
2. Use Suspense and React.lazy to split demos after bundled.
3. Use antd ColorPicker only (Remove react-colorful) and optimize debounced theme change.
4. To be supplemented

ColorPicker 需求

1. 需要能手动输入。
2. 现在拖动色彩后界面会飘移变化。

[Feature] 主题编辑器 2.0

• 顶部栏（全局）
  • 切换全局 token 和组件 token
  • 集成主题配置能力（修改 JSON，参考 antd 官网目前实现）@heiyu4585 #173
  • 显示修改过的 token 数量 @heiyu4585 #173
• Global Token 面板升级
  • 侧边栏顶部 Tabs 使用 Anchor 替代 @Yuiai01
  • 面板样式升级 @Yuiai01
  • demo 使用 Anchor 展示
  • 修改过的 token高亮
• Component Token 面板
  • 提取 antd demo 及其 meta 信息 @MadCcc
  • hover 关联的 token 高亮相关样式 @MadCcc
  • 组件 token 侧边栏

---

• *自定义算法组件
• *classNames 配置能力

Can't install dependencies correctly

npm i

throw an error

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   dev react@"^18.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.14.0" from [email protected]
npm ERR! node_modules/react-test-renderer
npm ERR!   dev react-test-renderer@"^16.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/bytedance/.npm/_logs/2023-08-17T09_38_37_836Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/bytedance/.npm/_logs/2023-08-17T09_38_37_836Z-debug-0.log

fix with

npm i --force
npm run start

> [email protected] start
> dumi dev

Starting the development server...

● Webpack █████████████████████████ building (10%) 1/2 modules 1 active
 babel-loader › src/.umi/umi.ts

node:internal/crypto/hash:69
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports.__webpack_modules__.57442.module.exports (/Users/bytedance/dev/antd/antd-token-previewer/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:135907:62)
    at NormalModule._initBuildHash (/Users/bytedance/dev/antd/antd-token-previewer/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:109317:16)
    at /Users/bytedance/dev/antd/antd-token-previewer/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:109352:10
    at /Users/bytedance/dev/antd/antd-token-previewer/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:109223:13
    at /Users/bytedance/dev/antd/antd-token-previewer/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:61151:11
    at /Users/bytedance/dev/antd/antd-token-previewer/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:61017:18
    at context.callback (/Users/bytedance/dev/antd/antd-token-previewer/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:60895:13)
    at /Users/bytedance/dev/antd/antd-token-previewer/node_modules/@umijs/deps/compiled/babel-loader/index.js:1:130029 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.17.0
➜  antd-token-previewer git:(fix/shadow-error) ✗ 

Add a section to define variables

The theme editor works great, but maintaining a theme can become hard for people who want more control over the components.
Imagine the following case:

1. A designer updates all color properties to match a color palette.
2. The new theme is reviewed and they want darker colors. Hence a new color palette is chosen.
3. The designer has to go through the whole interface and update every single color property 😭

I propose to add a section to define custom variables. When defined, variables will be then converted to CSS custom properties and could be used to define the value of a property in the theme.