Skip to content

[common] 组件级设计token通过css变量,而非less变量进行样式定制 #2623

Description

@yescco

这个功能解决了什么问题

组件级的定制只能使用less变量覆盖,这带来一些问题:

  1. 无法通过F12了解组件有哪些less变量,哪些less变量具体控制组件哪些样式
  2. modifyVars只能硬编码,如果设置'@form-item-margin-bottom': '@comp-margin-xl',会导致[less] variable @comp-margin-xl is undefined

你建议的方案是什么

再维护一层组件级的css变量,比如@form-item-margin-bottom: var(--form-item-margin-bottom, var(--comp-margin-xxl))。
这样design token的三层架构都能够使用css变量控制,更灵活

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions