feat: dynamic theme with theme tokens is now supported (#1737)

BREAKING CHANGE: original css vars and less vars are removed
BREAKING CHANGE: original default theme is removed, seer is now default theme
BREAKING CHANGE: original style entries is removed, now only index is provided

.eslintrc.js

@@ -116,6 +116,7 @@ module.exports = {
     'prettier/prettier': ['error', prettierConfig],
 
     // ts
+    '@typescript-eslint/ban-ts-comment': 'off',
     '@typescript-eslint/brace-style': ['error', '1tbs'],
     '@typescript-eslint/explicit-module-boundary-types': 'error',
     '@typescript-eslint/member-delimiter-style': [

package.json

@@ -8,6 +8,7 @@
     "clean": "lerna run clean && rimraf coverage dist node_modules pnpm-lock.yaml",
     "start": "gulp start --cwd ./packages/site --gulpfile ./scripts/gulp/gulpfile.ts",
     "build": "npm-run-all -s build:clean -p build:lib build:declaration build:style build:site",
+    "build:package": "npm-run-all -s build:clean -p build:lib build:declaration build:style",
     "build:pre-version": "npm-run-all -s build:clean -p build:lib build:declaration build:style build:site-pre-version",
     "build:clean": "gulp build:clean --gulpfile ./scripts/gulp/gulpfile.ts",
     "build:lib": "gulp build:lib --gulpfile ./scripts/gulp/gulpfile.ts",
@@ -17,6 +18,8 @@
     "build:site-pre-version": "gulp build:site-pre-version --cwd ./packages/site --gulpfile ./scripts/gulp/gulpfile.ts",
     "icons": "gulp icons --gulpfile ./scripts/gulp/gulpfile.ts",
     "gen": "ts-node scripts/gen/generate.ts",
+    "theme:update": "ts-node scripts/gen/theme/run.ts",
+    "colors:update": "ts-node scripts/gen/colors/run.ts",
     "lessvariable:update": "ts-node scripts/gen/style-variable/update.ts",
     "prepare": "husky install",
     "preinstall": "npx only-allow pnpm",
@@ -105,12 +108,14 @@
     "figlet": "^1.6.0",
     "fs-extra": "^10.1.0",
     "gulp": "^4.0.2",
+    "happy-dom": "^12.10.3",
     "husky": "^8.0.3",
     "inquirer": "^8.2.6",
     "jsdom": "^20.0.3",
     "lerna": "^7.2.0",
     "less": "^4.2.0",
     "lint-staged": "^13.3.0",
+    "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "markdownlint-cli": "^0.32.2",
     "marked": "^4.3.0",
@@ -135,6 +140,7 @@
     "typescript": "^4.9.5",
     "unplugin-vue-components": "^0.22.12",
     "vite": "^4.4.9",
+    "vite-node": "^0.34.6",
     "vite-plugin-chunk-split": "^0.4.7",
     "vite-plugin-static-copy": "^0.9.0",
     "vitest": "^0.24.5",

packages/cdk/a11y/demo/FocusMonitor.vue

@@ -52,23 +52,23 @@ onBeforeUnmount(() => {
 
 <style scoped lang="less">
 .example-focus-monitor {
-  background-color: @color-grey;
+  background-color: #a3a3a3;
   padding: 20px;
 
   .cdk-mouse-focused {
-    background: @color-blue;
+    background: #1c6eff;
   }
 
   .cdk-keyboard-focused {
-    background: @color-green;
+    background: #39c317;
   }
 
   .cdk-touch-focused {
-    background: @color-magenta;
+    background: #d619be;
   }
 
   .cdk-program-focused {
-    background: @color-red;
+    background: #f52727;
   }
 
   .ix-button {

packages/cdk/popper/demo/Basic.vue

@@ -21,7 +21,7 @@ export default defineComponent({
 <style lang="less" scoped>
 .popper {
   padding: 8px;
-  color: @color-white;
-  background: @color-purple;
+  color: #fff;
+  background: #7824ff;
 }
 </style>

packages/cdk/popper/demo/Placement.vue

@@ -49,8 +49,8 @@ export default defineComponent({
 <style lang="less" scoped>
 .popper {
   padding: 8px;
-  color: @color-white;
-  background: @color-purple;
+  color: #fff;
+  background: #7824ff;
 }
 
 .ix-radio-group {

packages/cdk/popper/demo/Trigger.vue

@@ -73,22 +73,22 @@ export default defineComponent({
 <style lang="less" scoped>
 .popper {
   padding: 8px 16px;
-  color: @color-white;
+  color: #fff;
 
   &-hover {
-    background: @color-red;
+    background: #f52727;
   }
   &-click {
-    background: @color-orange;
+    background: #fa721b;
   }
   &-focus {
-    background: @color-brown;
+    background: #fdaa1d;
   }
   &-contextmenu {
-    background: @color-yellow;
+    background: #f8d81a;
   }
   &-manual {
-    background: @color-primary;
+    background: var(--ix-color-primary);
   }
 }
 </style>

packages/components/_private/collapse-transition/style/index.less

@@ -1,3 +1,4 @@
+@import '../../../style/variable/index.less';
 .@{collapse-transition-prefix} {
   &-enter-active,
   &-leave-active {
@@ -6,12 +7,12 @@
   }
 
   &-enter-active {
-    transition-duration: var(--ix-transition-duration-slow);
-    transition-timing-function: var(--ix-ease-out-quint);
+    transition-duration: var(--ix-motion-duration-slow);
+    transition-timing-function: var(--ix-motion-ease-out-quint);
   }
 
   &-leave-active {
-    transition-duration: var(--ix-transition-duration-medium);
-    transition-timing-function: var(--ix-ease-out-quint);
+    transition-duration: var(--ix-motion-duration-medium);
+    transition-timing-function: var(--ix-motion-ease-out-quint);
   }
 }

packages/components/_private/collapse-transition/style/index.ts

@@ -0,0 +1 @@
+import './index.less'

packages/components/_private/date-panel/src/DatePanel.tsx

@@ -8,6 +8,7 @@
 import { computed, defineComponent, provide } from 'vue'
 
 import { useDateConfig, useGlobalConfig } from '@idux/components/config'
+import { useThemeToken } from '@idux/components/theme'
 
 import { useActiveDate } from './composables/useActiveDate'
 import { useActiveType } from './composables/useActiveType'
@@ -22,6 +23,8 @@ export default defineComponent({
   props: datePanelProps,
   setup(props, { slots }) {
     const common = useGlobalConfig('common')
+    const { globalHashId } = useThemeToken()
+
     const locale = useGlobalConfig('locale')
     const mergedPrefixCls = computed(() => `${common.prefixCls}-date-panel`)
     const dateConfig = useDateConfig()
@@ -47,7 +50,7 @@ export default defineComponent({
     return () => {
       const prefixCls = mergedPrefixCls.value
       return (
-        <div class={`${prefixCls} ${prefixCls}-${activeType.value}`}>
+        <div class={`${prefixCls} ${prefixCls}-${activeType.value} ${globalHashId.value}`}>
           <PanelHeader />
           <PanelBody />
         </div>

packages/components/_private/input/src/Input.tsx

@@ -11,6 +11,7 @@ import { computed, defineComponent, normalizeClass, ref } from 'vue'
 
 import { useGlobalConfig } from '@idux/components/config'
 import { IxIcon } from '@idux/components/icon'
+import { useThemeToken } from '@idux/components/theme'
 
 import { inputProps } from './types'
 
@@ -20,6 +21,8 @@ export default defineComponent({
   props: inputProps,
   setup(props, { attrs, slots, expose }) {
     const common = useGlobalConfig('common')
+    const { globalHashId } = useThemeToken()
+
     const mergedPrefixCls = computed(() => `${common.prefixCls}-input`)
     const inputRef = ref<HTMLInputElement>()
     const getInputElement = () => inputRef.value
@@ -62,7 +65,7 @@ export default defineComponent({
       }
 
       const { class: className, style, ...rest } = attrs
-      const classNames = normalizeClass([classes.value, className])
+      const classNames = normalizeClass([classes.value, className, globalHashId.value])
       const inputNode = <input ref={inputRef} class={`${prefixCls}-inner`} disabled={disabled} {...rest} />
 
       if (!(addonBeforeNode || addonAfterNode)) {

packages/components/_private/mask/src/Mask.tsx

@@ -8,6 +8,7 @@
 import { Transition, computed, defineComponent } from 'vue'
 
 import { useGlobalConfig } from '@idux/components/config'
+import { useThemeToken } from '@idux/components/theme'
 
 import { maskProps } from './types'
 
@@ -16,6 +17,7 @@ export default defineComponent({
   props: maskProps,
   setup(props) {
     const common = useGlobalConfig('common')
+    const { globalHashId } = useThemeToken()
     const mergedPrefixCls = computed(() => `${common.prefixCls}-mask`)
 
     return () => {
@@ -25,7 +27,7 @@ export default defineComponent({
       }
       return (
         <Transition appear name={transitionName ?? `${common.prefixCls}-fade`}>
-          <div v-show={visible} class={mergedPrefixCls.value} style={{ zIndex }}></div>
+          <div v-show={visible} class={[mergedPrefixCls.value, globalHashId.value]} style={{ zIndex }}></div>
         </Transition>
       )
     }

packages/components/_private/mask/style/index.less

@@ -1,9 +1,10 @@
+@import '../../../style/variable/index.less';
 @import '../../../style/mixins/box.less';
 
 .@{mask-prefix} {
   .box(fixed);
 
   height: 100%;
-  background-color: @mask-background-color;
+  background-color: var(--ix-color-mask);
   z-index: 1000;
 }

packages/components/_private/mask/style/index.ts

@@ -0,0 +1 @@
+import './index.less'

packages/components/_private/overflow/src/Overflow.tsx

@@ -14,6 +14,7 @@ import { isNumber } from 'lodash-es'
 import { useResizeObserver } from '@idux/cdk/resize'
 import { getBoxSizingData, throwError } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
+import { useThemeToken } from '@idux/components/theme'
 
 import Item from './Item'
 import { overflowProps } from './types'
@@ -30,6 +31,8 @@ export default defineComponent({
   props: overflowProps,
   setup(props, { slots }) {
     const common = useGlobalConfig('common')
+    const { globalHashId } = useThemeToken()
+
     const mergedPrefixCls = computed(() => `${common.prefixCls}-overflow`)
     const containerElRef = ref<HTMLElement | undefined>()
 
@@ -164,7 +167,7 @@ export default defineComponent({
     }
     return () => {
       return (
-        <div class={`${mergedPrefixCls.value} ${props.prefixCls}-overflow`} ref={containerElRef}>
+        <div class={`${mergedPrefixCls.value} ${props.prefixCls}-overflow ${globalHashId.value}`} ref={containerElRef}>
           {mergedData.value.map(internalRenderItem)}
           {showRest.value && internalRenderRest(restData.value)}
           {internalRenderSuffix()}

packages/components/_private/overflow/style/index.less

@@ -1,3 +1,4 @@
+@import '../../../style/variable/index.less';
 @import '../../../style/mixins/reset.less';
 
 .@{overflow-prefix} {

packages/components/_private/overflow/style/index.ts

@@ -0,0 +1 @@
+import './index.less'