diff --git a/.eslintrc.js b/.eslintrc.js index 379a93b10..abb291fd3 100644 --- a/.eslintrc.js +++ b/.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': [ diff --git a/package.json b/package.json index 77a62d59b..02423a06d 100644 --- a/package.json +++ b/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", diff --git a/packages/cdk/a11y/demo/FocusMonitor.vue b/packages/cdk/a11y/demo/FocusMonitor.vue index 3b425bda6..53e277e4e 100644 --- a/packages/cdk/a11y/demo/FocusMonitor.vue +++ b/packages/cdk/a11y/demo/FocusMonitor.vue @@ -52,23 +52,23 @@ onBeforeUnmount(() => { diff --git a/packages/cdk/popper/demo/Placement.vue b/packages/cdk/popper/demo/Placement.vue index fd3b52ebb..ec28ab6a7 100644 --- a/packages/cdk/popper/demo/Placement.vue +++ b/packages/cdk/popper/demo/Placement.vue @@ -49,8 +49,8 @@ export default defineComponent({ diff --git a/packages/components/_private/collapse-transition/style/index.less b/packages/components/_private/collapse-transition/style/index.less index a675e71e8..36a7e436d 100644 --- a/packages/components/_private/collapse-transition/style/index.less +++ b/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); } } diff --git a/packages/components/_private/collapse-transition/style/index.ts b/packages/components/_private/collapse-transition/style/index.ts new file mode 100644 index 000000000..1526e4dff --- /dev/null +++ b/packages/components/_private/collapse-transition/style/index.ts @@ -0,0 +1 @@ +import './index.less' diff --git a/packages/components/_private/collapse-transition/style/themes/default.less b/packages/components/_private/collapse-transition/style/themes/default.less deleted file mode 100644 index ff538d50b..000000000 --- a/packages/components/_private/collapse-transition/style/themes/default.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../../style/themes/default.less'; -@import './default.variable.less'; - -@import '../index.less'; diff --git a/packages/components/_private/collapse-transition/style/themes/default.ts b/packages/components/_private/collapse-transition/style/themes/default.ts deleted file mode 100644 index 8572b839e..000000000 --- a/packages/components/_private/collapse-transition/style/themes/default.ts +++ /dev/null @@ -1 +0,0 @@ -import './default.less' diff --git a/packages/components/_private/collapse-transition/style/themes/default.variable.less b/packages/components/_private/collapse-transition/style/themes/default.variable.less deleted file mode 100644 index 4e18f5388..000000000 --- a/packages/components/_private/collapse-transition/style/themes/default.variable.less +++ /dev/null @@ -1 +0,0 @@ -// _private diff --git a/packages/components/_private/collapse-transition/style/themes/seer.less b/packages/components/_private/collapse-transition/style/themes/seer.less deleted file mode 100644 index 232fa6955..000000000 --- a/packages/components/_private/collapse-transition/style/themes/seer.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../../style/themes/seer.less'; -@import './seer.variable.less'; - -@import '../index.less'; diff --git a/packages/components/_private/collapse-transition/style/themes/seer.ts b/packages/components/_private/collapse-transition/style/themes/seer.ts deleted file mode 100644 index 1caeb714f..000000000 --- a/packages/components/_private/collapse-transition/style/themes/seer.ts +++ /dev/null @@ -1 +0,0 @@ -import './seer.less' diff --git a/packages/components/_private/collapse-transition/style/themes/seer.variable.less b/packages/components/_private/collapse-transition/style/themes/seer.variable.less deleted file mode 100644 index 498793af1..000000000 --- a/packages/components/_private/collapse-transition/style/themes/seer.variable.less +++ /dev/null @@ -1 +0,0 @@ -@import './default.variable.less'; diff --git a/packages/components/_private/date-panel/src/DatePanel.tsx b/packages/components/_private/date-panel/src/DatePanel.tsx index 51110870f..84b80239e 100644 --- a/packages/components/_private/date-panel/src/DatePanel.tsx +++ b/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 ( -
+
diff --git a/packages/components/_private/input/src/Input.tsx b/packages/components/_private/input/src/Input.tsx index 4cd4b2e40..0ba323bff 100644 --- a/packages/components/_private/input/src/Input.tsx +++ b/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() 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 = if (!(addonBeforeNode || addonAfterNode)) { diff --git a/packages/components/_private/loading/style/index.less b/packages/components/_private/loading/style/index.less deleted file mode 100644 index a93f825c1..000000000 --- a/packages/components/_private/loading/style/index.less +++ /dev/null @@ -1,28 +0,0 @@ -@import '../../../style/mixins/reset.less'; - -.@{loading-prefix} { - .reset-component(); - - width: 1em; - height: 1em; - font-size: inherit; - line-height: 1; - animation: none; - - &-icon { - width: 100%; - height: 100%; - } - - &-bg-circle { - stroke: @bg-circle-stroke; - } - - &-fst-arch { - stroke: @fst-arch-stroke; - } - - &-snd-arch { - stroke: @snd-arch-stroke; - } -} diff --git a/packages/components/_private/loading/style/themes/default.less b/packages/components/_private/loading/style/themes/default.less deleted file mode 100644 index ff538d50b..000000000 --- a/packages/components/_private/loading/style/themes/default.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../../style/themes/default.less'; -@import './default.variable.less'; - -@import '../index.less'; diff --git a/packages/components/_private/loading/style/themes/default.ts b/packages/components/_private/loading/style/themes/default.ts deleted file mode 100644 index 47fe656f7..000000000 --- a/packages/components/_private/loading/style/themes/default.ts +++ /dev/null @@ -1,3 +0,0 @@ -// style dependencies - -import './default.less' diff --git a/packages/components/_private/loading/style/themes/default.variable.less b/packages/components/_private/loading/style/themes/default.variable.less deleted file mode 100644 index 89148b19c..000000000 --- a/packages/components/_private/loading/style/themes/default.variable.less +++ /dev/null @@ -1,3 +0,0 @@ -@bg-circle-stroke: @color-primary; -@fst-arch-stroke: @color-turquoise; -@snd-arch-stroke: @color-graphite-l20; diff --git a/packages/components/_private/loading/style/themes/seer.less b/packages/components/_private/loading/style/themes/seer.less deleted file mode 100644 index 232fa6955..000000000 --- a/packages/components/_private/loading/style/themes/seer.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../../style/themes/seer.less'; -@import './seer.variable.less'; - -@import '../index.less'; diff --git a/packages/components/_private/loading/style/themes/seer.ts b/packages/components/_private/loading/style/themes/seer.ts deleted file mode 100644 index 8f61ab076..000000000 --- a/packages/components/_private/loading/style/themes/seer.ts +++ /dev/null @@ -1,3 +0,0 @@ -// style dependencies - -import './seer.less' diff --git a/packages/components/_private/loading/style/themes/seer.variable.less b/packages/components/_private/loading/style/themes/seer.variable.less deleted file mode 100644 index 498793af1..000000000 --- a/packages/components/_private/loading/style/themes/seer.variable.less +++ /dev/null @@ -1 +0,0 @@ -@import './default.variable.less'; diff --git a/packages/components/_private/mask/src/Mask.tsx b/packages/components/_private/mask/src/Mask.tsx index 21e78c2b4..aaca674a2 100644 --- a/packages/components/_private/mask/src/Mask.tsx +++ b/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 ( -
+
) } diff --git a/packages/components/_private/mask/style/index.less b/packages/components/_private/mask/style/index.less index 8ec3bc1f4..2fde7d8fd 100644 --- a/packages/components/_private/mask/style/index.less +++ b/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; } diff --git a/packages/components/_private/mask/style/index.ts b/packages/components/_private/mask/style/index.ts new file mode 100644 index 000000000..1526e4dff --- /dev/null +++ b/packages/components/_private/mask/style/index.ts @@ -0,0 +1 @@ +import './index.less' diff --git a/packages/components/_private/mask/style/themes/default.less b/packages/components/_private/mask/style/themes/default.less deleted file mode 100644 index ff538d50b..000000000 --- a/packages/components/_private/mask/style/themes/default.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../../style/themes/default.less'; -@import './default.variable.less'; - -@import '../index.less'; diff --git a/packages/components/_private/mask/style/themes/default.ts b/packages/components/_private/mask/style/themes/default.ts deleted file mode 100644 index 8572b839e..000000000 --- a/packages/components/_private/mask/style/themes/default.ts +++ /dev/null @@ -1 +0,0 @@ -import './default.less' diff --git a/packages/components/_private/mask/style/themes/default.variable.less b/packages/components/_private/mask/style/themes/default.variable.less deleted file mode 100644 index 06777414e..000000000 --- a/packages/components/_private/mask/style/themes/default.variable.less +++ /dev/null @@ -1 +0,0 @@ -@mask-background-color: fade(#000, 45%); diff --git a/packages/components/_private/mask/style/themes/seer.less b/packages/components/_private/mask/style/themes/seer.less deleted file mode 100644 index 232fa6955..000000000 --- a/packages/components/_private/mask/style/themes/seer.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../../style/themes/seer.less'; -@import './seer.variable.less'; - -@import '../index.less'; diff --git a/packages/components/_private/mask/style/themes/seer.ts b/packages/components/_private/mask/style/themes/seer.ts deleted file mode 100644 index 1caeb714f..000000000 --- a/packages/components/_private/mask/style/themes/seer.ts +++ /dev/null @@ -1 +0,0 @@ -import './seer.less' diff --git a/packages/components/_private/mask/style/themes/seer.variable.less b/packages/components/_private/mask/style/themes/seer.variable.less deleted file mode 100644 index 498793af1..000000000 --- a/packages/components/_private/mask/style/themes/seer.variable.less +++ /dev/null @@ -1 +0,0 @@ -@import './default.variable.less'; diff --git a/packages/components/_private/overflow/src/Overflow.tsx b/packages/components/_private/overflow/src/Overflow.tsx index a22ca3206..601dff6a5 100644 --- a/packages/components/_private/overflow/src/Overflow.tsx +++ b/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() @@ -164,7 +167,7 @@ export default defineComponent({ } return () => { return ( -
+
{mergedData.value.map(internalRenderItem)} {showRest.value && internalRenderRest(restData.value)} {internalRenderSuffix()} diff --git a/packages/components/_private/overflow/style/index.less b/packages/components/_private/overflow/style/index.less index c61f28a8f..1933cd05e 100644 --- a/packages/components/_private/overflow/style/index.less +++ b/packages/components/_private/overflow/style/index.less @@ -1,3 +1,4 @@ +@import '../../../style/variable/index.less'; @import '../../../style/mixins/reset.less'; .@{overflow-prefix} { diff --git a/packages/components/_private/overflow/style/index.ts b/packages/components/_private/overflow/style/index.ts new file mode 100644 index 000000000..1526e4dff --- /dev/null +++ b/packages/components/_private/overflow/style/index.ts @@ -0,0 +1 @@ +import './index.less' diff --git a/packages/components/_private/overflow/style/themes/default.less b/packages/components/_private/overflow/style/themes/default.less deleted file mode 100644 index ff538d50b..000000000 --- a/packages/components/_private/overflow/style/themes/default.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../../style/themes/default.less'; -@import './default.variable.less'; - -@import '../index.less'; diff --git a/packages/components/_private/overflow/style/themes/default.ts b/packages/components/_private/overflow/style/themes/default.ts deleted file mode 100644 index 47fe656f7..000000000 --- a/packages/components/_private/overflow/style/themes/default.ts +++ /dev/null @@ -1,3 +0,0 @@ -// style dependencies - -import './default.less' diff --git a/packages/components/_private/overflow/style/themes/default.variable.less b/packages/components/_private/overflow/style/themes/default.variable.less deleted file mode 100644 index 1cbc3f0e8..000000000 --- a/packages/components/_private/overflow/style/themes/default.variable.less +++ /dev/null @@ -1 +0,0 @@ -// _private \ No newline at end of file diff --git a/packages/components/_private/overflow/style/themes/seer.less b/packages/components/_private/overflow/style/themes/seer.less deleted file mode 100644 index 232fa6955..000000000 --- a/packages/components/_private/overflow/style/themes/seer.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../../style/themes/seer.less'; -@import './seer.variable.less'; - -@import '../index.less'; diff --git a/packages/components/_private/overflow/style/themes/seer.ts b/packages/components/_private/overflow/style/themes/seer.ts deleted file mode 100644 index 8f61ab076..000000000 --- a/packages/components/_private/overflow/style/themes/seer.ts +++ /dev/null @@ -1,3 +0,0 @@ -// style dependencies - -import './seer.less' diff --git a/packages/components/_private/overflow/style/themes/seer.variable.less b/packages/components/_private/overflow/style/themes/seer.variable.less deleted file mode 100644 index 498793af1..000000000 --- a/packages/components/_private/overflow/style/themes/seer.variable.less +++ /dev/null @@ -1 +0,0 @@ -@import './default.variable.less'; diff --git a/packages/components/_private/overlay/src/Overlay.tsx b/packages/components/_private/overlay/src/Overlay.tsx index c77dd00f7..620350766 100644 --- a/packages/components/_private/overlay/src/Overlay.tsx +++ b/packages/components/_private/overlay/src/Overlay.tsx @@ -30,6 +30,7 @@ import { type PopperElement, type PopperEvents, type PopperOptions, usePopper } import { CdkPortal } from '@idux/cdk/portal' import { Logger, callEmit, convertElement, getFirstValidNode, useState } from '@idux/cdk/utils' import { useGlobalConfig } from '@idux/components/config' +import { useThemeToken } from '@idux/components/theme' import { useZIndex } from '@idux/components/utils' import { type OverlayProps, overlayProps } from './types' @@ -40,6 +41,8 @@ export default defineComponent({ props: overlayProps, setup(props, { slots, attrs, expose }) { const common = useGlobalConfig('common') + const { globalHashId } = useThemeToken() + const mergedPrefixCls = computed(() => `${common.prefixCls}-overlay`) const contentArrowRef = ref() const { options: popperOptions, update: updateOptions } = usePopperOptions(props, contentArrowRef) @@ -134,6 +137,7 @@ export default defineComponent({ const content = renderContent( props, + globalHashId, mergedPrefixCls, visibility, currentZIndex, @@ -193,6 +197,7 @@ function usePopperOptions( function renderContent( props: OverlayProps, + globalHashId: ComputedRef, mergedPrefixCls: ComputedRef, visibility: ComputedRef, currentZIndex: ComputedRef, @@ -212,7 +217,14 @@ function renderContent( const overlayId = triggerId != null ? `__IDUX_OVERLAY-${triggerId}` : undefined const style = `z-index: ${currentZIndex.value}` const overlay = ( -
+
{contentNode} {props.showArrow &&
}
diff --git a/packages/components/_private/overlay/style/index.less b/packages/components/_private/overlay/style/index.less index 495509d4e..93878421c 100644 --- a/packages/components/_private/overlay/style/index.less +++ b/packages/components/_private/overlay/style/index.less @@ -1,14 +1,26 @@ +@import '../../../style/variable/index.less'; @import '../../../style/mixins/reset.less'; .@{overlay-prefix} { .reset-component-new(); + border: var(--ix-overlay-border-width) var(--ix-overlay-border-type) var(--ix-overlay-border-color); + border-radius: var(--ix-overlay-border-radius); + background-color: var(--ix-overlay-bg-color); + box-shadow: var(--ix-box-shadow-md); + z-index: 1000; + + @arrow-offset: var(--ix-overlay-border-width); + @arrow-size: var(--ix-overlay-arrow-size); + @border-arrow-size: calc(@arrow-size + var(--ix-overlay-border-width)); + &-arrow { position: absolute; - width: @overlay-arrow-size * 2; - height: @overlay-arrow-size * 2; + width: calc(@arrow-size * 2); + height: calc(@arrow-size * 2); - &::before { + &::before, + &::after { content: ''; position: absolute; border-color: transparent; @@ -18,12 +30,18 @@ &[data-popper-placement^='top'] { .@{overlay-prefix}-arrow { - bottom: -@overlay-arrow-size * 2; + bottom: calc(@arrow-size * -2); &::before { left: 0; - border-width: @overlay-arrow-size @overlay-arrow-size 0; - border-top-color: initial; + border-width: @border-arrow-size @border-arrow-size 0; + border-top-color: var(--ix-overlay-border-color); + transform-origin: center top; + } + &::after { + left: @arrow-offset; + border-width: @arrow-size @arrow-size 0; + border-top-color: var(--ix-overlay-bg-color); transform-origin: center top; } } @@ -31,12 +49,20 @@ &[data-popper-placement^='bottom'] { .@{overlay-prefix}-arrow { - top: -@overlay-arrow-size; + top: calc(@arrow-size * -1); &::before { left: 0; - border-width: 0 @overlay-arrow-size @overlay-arrow-size; - border-bottom-color: initial; + top: 0; + border-width: 0 @border-arrow-size @border-arrow-size; + border-bottom-color: var(--ix-overlay-border-color); + transform-origin: center bottom; + } + &::after { + left: @arrow-offset; + top: @arrow-offset; + border-width: 0 @arrow-size @arrow-size; + border-bottom-color: var(--ix-overlay-bg-color); transform-origin: center bottom; } } @@ -44,11 +70,18 @@ &[data-popper-placement^='left'] { .@{overlay-prefix}-arrow { - right: -@overlay-arrow-size * 2; + right: calc(@arrow-size * -2); &::before { - border-width: @overlay-arrow-size 0 @overlay-arrow-size @overlay-arrow-size; - border-left-color: initial; + top: 0; + border-width: @border-arrow-size 0 @border-arrow-size @border-arrow-size; + border-bottom-color: var(--ix-overlay-border-color); + transform-origin: center left; + } + &::after { + top: @arrow-offset; + border-width: @arrow-size 0 @arrow-size @arrow-size; + border-left-color: var(--ix-overlay-bg-color); transform-origin: center left; } } @@ -56,11 +89,18 @@ &[data-popper-placement^='right'] { .@{overlay-prefix}-arrow { - left: -@overlay-arrow-size; + left: calc(@arrow-size * -1); &::before { - border-width: @overlay-arrow-size @overlay-arrow-size @overlay-arrow-size 0; - border-right-color: initial; + top: 0; + border-width: @border-arrow-size 0 @border-arrow-size @border-arrow-size; + border-bottom-color: var(--ix-overlay-border-color); + transform-origin: center right; + } + &::after { + left: calc(@arrow-offset * -1); + border-width: @arrow-size @arrow-size @arrow-size 0; + border-right-color: var(--ix-overlay-bg-color); transform-origin: center right; } } diff --git a/packages/components/_private/overlay/style/index.ts b/packages/components/_private/overlay/style/index.ts new file mode 100644 index 000000000..1526e4dff --- /dev/null +++ b/packages/components/_private/overlay/style/index.ts @@ -0,0 +1 @@ +import './index.less' diff --git a/packages/components/_private/overlay/style/themes/default.less b/packages/components/_private/overlay/style/themes/default.less deleted file mode 100644 index ff538d50b..000000000 --- a/packages/components/_private/overlay/style/themes/default.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../../style/themes/default.less'; -@import './default.variable.less'; - -@import '../index.less'; diff --git a/packages/components/_private/overlay/style/themes/default.ts b/packages/components/_private/overlay/style/themes/default.ts deleted file mode 100644 index 8572b839e..000000000 --- a/packages/components/_private/overlay/style/themes/default.ts +++ /dev/null @@ -1 +0,0 @@ -import './default.less' diff --git a/packages/components/_private/overlay/style/themes/default.variable.less b/packages/components/_private/overlay/style/themes/default.variable.less deleted file mode 100644 index f22e3dd48..000000000 --- a/packages/components/_private/overlay/style/themes/default.variable.less +++ /dev/null @@ -1 +0,0 @@ -@overlay-arrow-size: 6px; diff --git a/packages/components/_private/overlay/style/themes/seer.less b/packages/components/_private/overlay/style/themes/seer.less deleted file mode 100644 index 232fa6955..000000000 --- a/packages/components/_private/overlay/style/themes/seer.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../../style/themes/seer.less'; -@import './seer.variable.less'; - -@import '../index.less'; diff --git a/packages/components/_private/overlay/style/themes/seer.ts b/packages/components/_private/overlay/style/themes/seer.ts deleted file mode 100644 index 1caeb714f..000000000 --- a/packages/components/_private/overlay/style/themes/seer.ts +++ /dev/null @@ -1 +0,0 @@ -import './seer.less' diff --git a/packages/components/_private/overlay/style/themes/seer.variable.less b/packages/components/_private/overlay/style/themes/seer.variable.less deleted file mode 100644 index 498793af1..000000000 --- a/packages/components/_private/overlay/style/themes/seer.variable.less +++ /dev/null @@ -1 +0,0 @@ -@import './default.variable.less'; diff --git a/packages/components/_private/selector/src/Selector.tsx b/packages/components/_private/selector/src/Selector.tsx index 48c4b69fe..7a7f58f30 100644 --- a/packages/components/_private/selector/src/Selector.tsx +++ b/packages/components/_private/selector/src/Selector.tsx @@ -15,6 +15,7 @@ import { ɵOverflow } from '@idux/components/_private/overflow' import { useGlobalConfig } from '@idux/components/config' import { useFormSize } from '@idux/components/form' import { IxIcon } from '@idux/components/icon' +import { useThemeToken } from '@idux/components/theme' import { useInputState } from './composables/useInputState' import Input from './contents/Input' @@ -29,6 +30,7 @@ export default defineComponent({ props: selectorProps, setup(props, { expose, slots }) { const common = useGlobalConfig('common') + const { globalHashId } = useThemeToken() const mergedPrefixCls = computed(() => `${common.prefixCls}-selector`) const mergedClearable = computed(() => { return !props.disabled && !props.readonly && props.clearable && props.value.length > 0 @@ -68,6 +70,7 @@ export default defineComponent({ const { allowInput, className, borderless = config.borderless, multiple, status } = props const prefixCls = mergedPrefixCls.value return normalizeClass({ + [globalHashId.value]: !!globalHashId.value, [className]: true, [prefixCls]: true, [`${prefixCls}-${mergedSize.value}`]: true, diff --git a/packages/components/_private/selector/style/index.less b/packages/components/_private/selector/style/index.less index d9abead81..e3e7635c4 100644 --- a/packages/components/_private/selector/style/index.less +++ b/packages/components/_private/selector/style/index.less @@ -1,3 +1,4 @@ +@import '../../../style/variable/index.less'; @import '../../../style/mixins/borderless.less'; @import '../../../style/mixins/ellipsis.less'; @import '../../../style/mixins/reset.less'; @@ -15,11 +16,11 @@ position: relative; display: flex; align-items: center; - color: @select-color; - background-color: @select-background-color; - border: @select-border-width @select-border-style @select-border-color; - border-radius: @select-border-radius; - transition: all @transition-duration-base @ease-in-out; + color: var(--ix-color-text); + background-color: var(--ix-control-bg-color); + border: var(--ix-control-line-width) var(--ix-control-line-type) var(--ix-color-border); + border-radius: var(--ix-control-border-radius-md); + transition: all var(--ix-motion-duration-medium) var(--ix-motion-ease-in-out); cursor: pointer; } @@ -50,49 +51,55 @@ &-placeholder { flex: 1; overflow: hidden; - color: @select-placeholder-color; + color: var(--ix-color-text-placeholder); position: absolute; .ellipsis(); } &-sm &-placeholder { - right: @form-new-padding-horizontal-sm; - left: @form-new-padding-horizontal-sm; + right: var(--ix-control-padding-size-horizontal-sm); + left: var(--ix-control-padding-size-horizontal-sm); } &-md &-placeholder { - right: @form-new-padding-horizontal-md; - left: @form-new-padding-horizontal-md; + right: var(--ix-control-padding-size-horizontal-md); + left: var(--ix-control-padding-size-horizontal-md); } &-lg &-placeholder { - right: @form-new-padding-horizontal-lg; - left: @form-new-padding-horizontal-lg; + right: var(--ix-control-padding-size-horizontal-lg); + left: var(--ix-control-padding-size-horizontal-lg); } - &-sm &-suffix, + &-sm &-suffix { + .selector-icon(var(--ix-control-height-sm), var(--ix-color-icon-info)); + } &-sm &-clear { - .selector-icon(@select-height-sm); + .selector-icon(var(--ix-control-height-sm)); } - &-md &-suffix, + &-md &-suffix { + .selector-icon(var(--ix-control-height-md), var(--ix-color-icon-info)); + } &-md &-clear { - .selector-icon(@select-height-md); + .selector-icon(var(--ix-control-height-md)); } - &-lg &-suffix, + &-lg &-suffix { + .selector-icon(var(--ix-control-height-lg), var(--ix-color-icon-info)); + } &-lg &-clear { - .selector-icon(@select-height-lg); + .selector-icon(var(--ix-control-height-lg)); } &-clear { z-index: 1; opacity: 0; - background-color: @select-icon-background-color; + background-color: var(--ix-control-bg-color); cursor: pointer; &:hover { - color: @select-icon-hover-color; + color: var(--ix-color-icon-hover); } .@{selector-prefix}:hover & { @@ -101,12 +108,12 @@ } &:hover:not(&-disabled) &-content { - border-color: @select-hover-color; + border-color: var(--ix-control-border-color-hover); } &-focused:not(&-disabled):not(&-borderless) &-content { - border-color: @select-active-color; - box-shadow: @select-active-box-shadow; + border-color: var(--ix-control-border-color-active); + box-shadow: var(--ix-control-box-shadow-focus); } &-borderless &-content { @@ -123,8 +130,8 @@ } &-disabled &-content { - color: @select-disabled-color; - background-color: @select-disabled-background-color; + color: var(--ix-color-text-disabled); + background-color: var(--ix-control-bg-color-disabled); cursor: not-allowed; .@{selector-prefix}-input-inner { @@ -136,26 +143,26 @@ &&-invalid { &:hover .@{selector-prefix}-content, .@{selector-prefix}-content { - border-color: @form-item-invalid-color; + border-color: var(--ix-color-error-border); } &.@{selector-prefix}-active .@{selector-prefix}-content { - border-color: @form-item-invalid-color; - box-shadow: @form-item-invalid-box-shadow; + border-color: var(--ix-color-error-border); + box-shadow: var(--ix-control-box-shadow-invalid); } } } -.selector-icon(@selector-height) { +.selector-icon(@selector-height, @color: var(--ix-color-icon)) { position: absolute; top: 0; - right: @select-icon-margin-right; + right: var(--ix-margin-size-sm); display: flex; align-items: center; flex-shrink: 0; - height: @selector-height - 2 * @select-border-width; + height: calc(@selector-height - 2 * var(--ix-control-line-width)); line-height: 1; - font-size: @select-icon-font-size; - color: @select-icon-color; - transition: color @transition-duration-base @ease-in-out; + font-size: var(--ix-font-size-icon); + color: @color; + transition: color, opacity var(--ix-motion-duration-medium) var(--ix-motion-ease-in-out); } diff --git a/packages/components/_private/selector/style/index.ts b/packages/components/_private/selector/style/index.ts new file mode 100644 index 000000000..9d0406919 --- /dev/null +++ b/packages/components/_private/selector/style/index.ts @@ -0,0 +1,7 @@ +// style dependencies + +import '@idux/components/_private/overlay/style' +import '@idux/components/icon/style' +import '@idux/components/input/style' + +import './index.less' diff --git a/packages/components/_private/selector/style/multiple.less b/packages/components/_private/selector/style/multiple.less index 31746c1aa..2be8c501c 100644 --- a/packages/components/_private/selector/style/multiple.less +++ b/packages/components/_private/selector/style/multiple.less @@ -1,18 +1,18 @@ .select-size(@select-height; @select-font-size) { - @select-margin-half: ceil((@select-multiple-padding / 2)); - @select-padding-vertical: max(@select-multiple-padding - @select-multiple-item-border-width - @select-margin-half, 0); - @select-item-height: @select-height - @select-multiple-padding * 2; - @select-item-line-height: @select-item-height - @select-border-width * 2; + @select-margin-half: calc((var(--ix-margin-size-xs) / 2)); + @select-padding-vertical: ~'max(calc(var(--ix-margin-size-xs) - var(--ix-control-line-width) - @{select-margin-half}), 0px)'; + @select-item-height: calc(@select-height - var(--ix-margin-size-xs) * 2); + @select-item-line-height: calc(@select-item-height - var(--ix-control-line-width) * 2); &.@{selector-prefix} { font-size: @select-font-size; } .@{selector-prefix} { &-content { - padding: @select-padding-vertical @select-multiple-padding; + padding: @select-padding-vertical var(--ix-margin-size-xs); .@{overflow-prefix}-item { - max-width: calc(100% - @select-icon-font-size); + max-width: calc(100% - var(--ix-font-size-icon)); } } @@ -20,12 +20,12 @@ height: @select-item-height; line-height: @select-item-line-height; margin: @select-margin-half 0; - margin-inline-end: @select-multiple-padding; + margin-inline-end: var(--ix-margin-size-xs); } &-input { margin: @select-margin-half 0; - margin-inline-start: @select-multiple-padding; + margin-inline-start: var(--ix-margin-size-xs); &-inner, &-mirror { @@ -41,7 +41,7 @@ &.@{selector-prefix}-searchable .@{selector-prefix}-overflow, &.@{selector-prefix}-allow-input .@{selector-prefix}-overflow { - padding-right: @select-icon-font-size + @select-multiple-padding; + padding-right: calc(var(--ix-font-size-icon) + var(--ix-margin-size-xs)); } } @@ -60,10 +60,10 @@ display: flex; flex: none; max-width: 100%; - padding: @select-multiple-item-padding; - background-color: @select-multiple-item-background-color; - border: @select-multiple-item-border; - border-radius: @select-multiple-item-border-radius; + padding: 0 var(--ix-padding-size-sm) 0 var(--ix-padding-size-sm); + background-color: var(--ix-color-emphasized-container-bg); + border: var(--ix-control-line-width) var(--ix-control-line-type) var(--ix-color-border-inverse); + border-radius: var(--ix-border-radius-sm); cursor: default; &-label { @@ -72,14 +72,14 @@ } &-remove { - margin: @select-multiple-item-label-margin; - color: @select-multiple-item-remove-icon-color; - font-size: @select-multiple-item-remove-icon-font-size; + margin: 0 calc(var(--ix-margin-size-xs) * -1) 0 var(--ix-margin-size-xs); + color: var(--ix-color-icon); + font-size: var(--ix-font-size-icon); line-height: inherit; cursor: pointer; &:hover { - color: @select-multiple-item-remove-icon-hover-color; + color: var(--ix-color-icon-hover); } } } @@ -98,20 +98,20 @@ } } &.@{selector-prefix}-disabled .@{selector-prefix}-item-disabled { - color: @select-multiple-item-disabled-color; - border-color: @select-multiple-item-disabled-border-color; + color: var(--ix-color-text-disabled); + border-color: var(--ix-color-border-secondary); cursor: not-allowed; } &.@{selector-prefix}-sm { - .select-size(@select-height-sm, @select-font-size-sm); + .select-size(var(--ix-control-height-sm), var(--ix-control-font-size-sm)); } &.@{selector-prefix}-md { - .select-size(@select-height-md, @select-font-size-md); + .select-size(var(--ix-control-height-md), var(--ix-control-font-size-md)); } &.@{selector-prefix}-lg { - .select-size(@select-height-lg, @select-font-size-lg); + .select-size(var(--ix-control-height-lg), var(--ix-control-font-size-lg)); } } diff --git a/packages/components/_private/selector/style/single.less b/packages/components/_private/selector/style/single.less index 626adc633..2ae307999 100644 --- a/packages/components/_private/selector/style/single.less +++ b/packages/components/_private/selector/style/single.less @@ -10,13 +10,13 @@ &-item { left: @select-padding-horizontal; - width: calc(100% - @select-padding-horizontal - @select-icon-font-size); + width: calc(100% - @select-padding-horizontal - var(--ix-font-size-icon)); } &-item, &-placeholder, &-input-inner { - line-height: @selector-height - 2 * @select-border-width; + line-height: calc(@selector-height - 2 * var(--ix-control-line-width)); } } } @@ -31,7 +31,7 @@ &-input { flex: auto; width: 0; - margin-right: (@select-icon-font-size / 2) + @select-icon-margin-right; + margin-right: calc((var(--ix-font-size-icon) / 2) + var(--ix-margin-size-sm)); } &-item { @@ -40,18 +40,18 @@ } &.@{selector-prefix}-opened .@{selector-prefix}-item { - color: @select-placeholder-color; + color: var(--ix-color-text-placeholder); } &.@{selector-prefix}-sm { - .select-size(@select-height-sm, @form-new-padding-horizontal-sm, @select-font-size-sm); + .select-size(var(--ix-control-height-sm), var(--ix-control-padding-size-horizontal-sm), var(--ix-control-font-size-sm)); } &.@{selector-prefix}-md { - .select-size(@select-height-md, @form-new-padding-horizontal-md, @select-font-size-md); + .select-size(var(--ix-control-height-md), var(--ix-control-padding-size-horizontal-md), var(--ix-control-font-size-md)); } &.@{selector-prefix}-lg { - .select-size(@select-height-lg, @form-new-padding-horizontal-lg, @select-font-size-lg); + .select-size(var(--ix-control-height-lg), var(--ix-control-padding-size-horizontal-lg), var(--ix-control-font-size-lg)); } } diff --git a/packages/components/_private/selector/style/themes/default.less b/packages/components/_private/selector/style/themes/default.less deleted file mode 100644 index e6a6035a8..000000000 --- a/packages/components/_private/selector/style/themes/default.less +++ /dev/null @@ -1,6 +0,0 @@ -@import '../../../../style/themes/default.less'; -@import '../../../../form/style/themes/default.variable.less'; -@import '../../../../select/style/themes/default.variable.less'; -@import './default.variable.less'; - -@import '../index.less'; diff --git a/packages/components/_private/selector/style/themes/default.ts b/packages/components/_private/selector/style/themes/default.ts deleted file mode 100644 index 5597435d5..000000000 --- a/packages/components/_private/selector/style/themes/default.ts +++ /dev/null @@ -1,7 +0,0 @@ -// style dependencies - -import '@idux/components/_private/overlay/style/themes/default' -import '@idux/components/icon/style/themes/default' -import '@idux/components/input/style/themes/default' - -import './default.less' diff --git a/packages/components/_private/selector/style/themes/seer.less b/packages/components/_private/selector/style/themes/seer.less deleted file mode 100644 index d4aadce76..000000000 --- a/packages/components/_private/selector/style/themes/seer.less +++ /dev/null @@ -1,6 +0,0 @@ -@import '../../../../style/themes/seer.less'; -@import '../../../../form/style/themes/seer.variable.less'; -@import '../../../../select/style/themes/seer.variable.less'; -@import './seer.variable.less'; - -@import '../index.less'; diff --git a/packages/components/_private/selector/style/themes/seer.ts b/packages/components/_private/selector/style/themes/seer.ts deleted file mode 100644 index 6af21d6cc..000000000 --- a/packages/components/_private/selector/style/themes/seer.ts +++ /dev/null @@ -1,7 +0,0 @@ -// style dependencies - -import '@idux/components/_private/overlay/style/themes/seer' -import '@idux/components/icon/style/themes/seer' -import '@idux/components/input/style/themes/seer' - -import './seer.less' diff --git a/packages/components/_private/selector/style/themes/seer.variable.less b/packages/components/_private/selector/style/themes/seer.variable.less deleted file mode 100644 index 498793af1..000000000 --- a/packages/components/_private/selector/style/themes/seer.variable.less +++ /dev/null @@ -1 +0,0 @@ -@import './default.variable.less'; diff --git a/packages/components/_private/time-panel/src/TimePanel.tsx b/packages/components/_private/time-panel/src/TimePanel.tsx index 6f224e0c7..e110fc5d7 100644 --- a/packages/components/_private/time-panel/src/TimePanel.tsx +++ b/packages/components/_private/time-panel/src/TimePanel.tsx @@ -10,6 +10,7 @@ import type { TimePanelColumnProps } from './types' import { computed, defineComponent, provide } from 'vue' import { useDateConfig, useGlobalConfig } from '@idux/components/config' +import { useThemeToken } from '@idux/components/theme' import PanelColumn from './TimePanelColumn' import { useOptions } from './composables/useOptions' @@ -21,6 +22,8 @@ export default defineComponent({ props: timePanelProps, setup(props) { const common = useGlobalConfig('common') + const { globalHashId, hashId } = useThemeToken('timePicker') + const mergedPrefixCls = computed(() => `${common.prefixCls}-time-panel`) const dateConfig = useDateConfig() const { hourOptionsProps, minuteOptionsProps, secondOptionsProps, amPmOptionsProps } = useOptions(props, dateConfig) @@ -37,7 +40,7 @@ export default defineComponent({ }) return () => ( -
+
{columns.value.map((item, index) => ( ))} diff --git a/packages/components/_private/time-panel/style/index.less b/packages/components/_private/time-panel/style/index.less deleted file mode 100644 index b00215d54..000000000 --- a/packages/components/_private/time-panel/style/index.less +++ /dev/null @@ -1,114 +0,0 @@ -.@{time-panel-prefix} { - position: relative; - display: flex; - justify-content: space-between; - width: 100%; - height: @time-panel-height; - padding: @time-panel-padding-vertical @time-panel-padding-horizontal; - font-size: @time-panel-font-size; - background-color: @time-panel-background-color; - - ::-webkit-scrollbar { - width: @time-panel-scrollbar-width; - height: @time-panel-scrollbar-width; - } - - ::-webkit-scrollbar-thumb { - border-radius: @time-panel-scrollbar-thumb-border-radius; - background-color: @time-panel-scrollbar-thumb-background-color; - border: 0; - padding: 0; - margin: 0; - } - - ::-webkit-scrollbar-track { - border-radius: 0; - background: @time-panel-scrollbar-track-background; - transition: @transition-all-base; - border: 0; - padding: 0; - margin: 0; - } - - &::before { - content: ''; - position: absolute; - display: block; - top: 50%; - width: calc(100% - @time-panel-padding-horizontal * 2); - margin-top: -(@time-panel-cell-height / 2); - height: @time-panel-cell-height; - border-top: @time-panel-window-border-width @time-panel-window-border-style @time-panel-window-border-color; - border-bottom: @time-panel-window-border-width @time-panel-window-border-style @time-panel-window-border-color; - pointer-events: none; - } - - &-column { - position: relative; - z-index: 1; - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - height: 100%; - margin-right: -@time-panel-cell-horizontal-padding; - cursor: pointer; - - &-inner { - height: 100%; - flex-shrink: 0; - margin: 0; - list-style-type: none; - overflow: hidden; - - &::before, - &::after { - content: ''; - display: block; - width: 100%; - height: calc(50% - (@time-panel-cell-height / 2)); - flex-shrink: 0; - } - } - - &:hover .@{time-panel-prefix}-column-inner { - overflow-y: scroll; - margin-right: -@time-panel-scrollbar-width; - } - - &:first-child { - align-items: flex-start; - margin-left: -@time-panel-cell-horizontal-padding; - } - &:last-child { - align-items: flex-end; - } - } - - &-cell { - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - width: 100%; - padding: 0 @time-panel-cell-horizontal-padding; - height: @time-panel-cell-height; - margin: 0; - color: @time-panel-cell-color; - - &:not(&-selected):hover { - background-color: @time-panel-cell-active-background-color; - } - - &-disabled { - cursor: not-allowed; - color: @time-panel-disabled-color; - } - - &-selected { - color: @time-panel-cell-selected-color; - background-color: @time-panel-cell-selected-background-color; - font-weight: @time-panel-cell-selected-font-weight; - } - } -} diff --git a/packages/components/_private/time-panel/style/themes/default.less b/packages/components/_private/time-panel/style/themes/default.less deleted file mode 100644 index 629570ab9..000000000 --- a/packages/components/_private/time-panel/style/themes/default.less +++ /dev/null @@ -1,5 +0,0 @@ -@import '../../../../style/themes/default.less'; -@import '../../../../form/style/themes/default.variable.less'; -@import './default.variable.less'; - -@import '../index.less'; diff --git a/packages/components/_private/time-panel/style/themes/default.ts b/packages/components/_private/time-panel/style/themes/default.ts deleted file mode 100644 index 8572b839e..000000000 --- a/packages/components/_private/time-panel/style/themes/default.ts +++ /dev/null @@ -1 +0,0 @@ -import './default.less' diff --git a/packages/components/_private/time-panel/style/themes/default.variable.less b/packages/components/_private/time-panel/style/themes/default.variable.less deleted file mode 100644 index 656fdb5b4..000000000 --- a/packages/components/_private/time-panel/style/themes/default.variable.less +++ /dev/null @@ -1,24 +0,0 @@ -@time-panel-disabled-color: @form-disabled-color; - -@time-panel-height: 224px; -@time-panel-padding-horizontal: @spacing-lg; -@time-panel-padding-vertical: @spacing-sm; -@time-panel-font-size: @font-size-md; -@time-panel-background-color: @background-color-component; - -@time-panel-window-border-width: @form-border-width; -@time-panel-window-border-style: @form-border-style; -@time-panel-window-border-color: @form-border-color; - -@time-panel-cell-height: 32px; -@time-panel-cell-horizontal-padding: 8px; -@time-panel-cell-color: @color-graphite-d10; -@time-panel-cell-active-background-color: transparent; -@time-panel-cell-selected-color: @color-graphite-d40; -@time-panel-cell-selected-font-weight: @font-weight-lg; -@time-panel-cell-selected-background-color: transparent; - -@time-panel-scrollbar-width: 6px; -@time-panel-scrollbar-thumb-background-color: @color-graphite-l10; -@time-panel-scrollbar-thumb-border-radius: 10px; -@time-panel-scrollbar-track-background: transparent; diff --git a/packages/components/_private/time-panel/style/themes/seer.less b/packages/components/_private/time-panel/style/themes/seer.less deleted file mode 100644 index 97271835b..000000000 --- a/packages/components/_private/time-panel/style/themes/seer.less +++ /dev/null @@ -1,5 +0,0 @@ -@import '../../../../style/themes/seer.less'; -@import '../../../../form/style/themes/seer.variable.less'; -@import './seer.variable.less'; - -@import '../index.less'; diff --git a/packages/components/_private/time-panel/style/themes/seer.ts b/packages/components/_private/time-panel/style/themes/seer.ts deleted file mode 100644 index 1caeb714f..000000000 --- a/packages/components/_private/time-panel/style/themes/seer.ts +++ /dev/null @@ -1 +0,0 @@ -import './seer.less' diff --git a/packages/components/_private/time-panel/style/themes/seer.variable.less b/packages/components/_private/time-panel/style/themes/seer.variable.less deleted file mode 100644 index 5ec44f317..000000000 --- a/packages/components/_private/time-panel/style/themes/seer.variable.less +++ /dev/null @@ -1,4 +0,0 @@ -@import './default.variable.less'; - -@time-panel-font-size: @font-size-sm; -@time-panel-window-border-color: @color-graphite-l30; diff --git a/packages/components/_private/trigger/style/index.less b/packages/components/_private/trigger/style/index.less index e72455510..724ad290f 100644 --- a/packages/components/_private/trigger/style/index.less +++ b/packages/components/_private/trigger/style/index.less @@ -1,13 +1,15 @@ +@import '../../../style/variable/index.less'; @import '../../../style/mixins/reset.less'; @import '../../../style/mixins/borderless.less'; @import '../../../style/mixins/placeholder.less'; -.trigger-size(@height, @vertical-padding, @horizontal-padding, @font-size) { - @icon-padding: @trigger-icon-margin-left + @trigger-icon-margin-right; - +.trigger-size(@height, @vertical-padding, @horizontal-padding, @font-size, @border-radius) { height: @height; - padding: @vertical-padding (@icon-padding + @font-size) @vertical-padding @horizontal-padding; + padding: @vertical-padding calc(var(--ix-padding-size-xs) + var(--ix-padding-size-sm)) @vertical-padding + @horizontal-padding; font-size: @font-size; + line-height: calc(@font-size + var(--ix-line-height-gutter)); + border-radius: @border-radius; } .@{trigger-prefix} { @@ -15,41 +17,37 @@ position: relative; width: 100%; - line-height: @trigger-line-height; - color: @trigger-color; - border: @trigger-border-width @trigger-border-style @trigger-border-color; - border-radius: @trigger-border-radius; - background-color: @trigger-background-color; + color: var(--ix-color-text); + border: var(--ix-control-line-width) var(--ix-control-line-type) var(--ix-color-border); + background-color: var(--ix-control-bg-color); cursor: pointer; - transition: all @transition-duration-base @ease-in-out; - - @icon-padding: @trigger-icon-margin-left + @trigger-icon-margin-right; + transition: all var(--ix-motion-duration-medium) var(--ix-motion-ease-in-out); &-sm { - .trigger-size(@trigger-height-sm, @trigger-padding-vertical-sm, @form-new-padding-horizontal-sm, @trigger-font-size-sm); + .trigger-size(var(--ix-control-height-sm), var(--ix-control-padding-size-vertical-sm), var(--ix-control-padding-size-horizontal-sm), var(--ix-control-font-size-sm), var(--ix-control-border-radius-sm)); } &-md { - .trigger-size(@trigger-height-md, @trigger-padding-vertical-md, @form-new-padding-horizontal-md, @trigger-font-size-md); + .trigger-size(var(--ix-control-height-md), var(--ix-control-padding-size-vertical-md), var(--ix-control-padding-size-horizontal-md), var(--ix-control-font-size-md), var(--ix-control-border-radius-md)); } &-lg { - .trigger-size(@trigger-height-lg, @trigger-padding-vertical-lg, @form-new-padding-horizontal-lg, @trigger-font-size-lg); + .trigger-size(var(--ix-control-height-lg), var(--ix-control-padding-size-vertical-lg), var(--ix-control-padding-size-horizontal-lg), var(--ix-control-font-size-lg), var(--ix-control-border-radius-lg)); } &:hover:not(&-disabled):not(&-borderless) { - border-color: @trigger-hover-color; + border-color: var(--ix-control-border-color-hover); } &-opened:not(&-disabled):not(&-borderless), &-focused:not(&-disabled):not(&-borderless) { - border-color: @trigger-active-color; - box-shadow: @trigger-active-box-shadow; + border-color: var(--ix-control-border-color-active); + box-shadow: var(--ix-control-box-shadow-focus); } &-disabled { - color: @trigger-disabled-color; - background-color: @trigger-disabled-background-color; + color: var(--ix-color-text-disabled); + background-color: var(--ix-control-bg-color-disabled); cursor: not-allowed; } @@ -62,32 +60,32 @@ } &-placeholder { - color: @trigger-placeholder-color; + color: var(--ix-color-text-placeholder); } &-suffix, &-clear-icon { position: absolute; top: 0; - right: @trigger-icon-margin-right; + right: var(--ix-margin-size-sm); display: flex; align-items: center; height: 100%; - transition: @transition-all-base; - font-size: @trigger-icon-font-size; + transition: all var(--ix-motion-duration-medium); + font-size: var(--ix-font-size-icon); } &-suffix { - color: @trigger-icon-color; + color: var(--ix-color-icon); } &-clear-icon { cursor: pointer; - color: @trigger-clear-icon-color; - background-color: @trigger-background-color; + color: var(--ix-color-icon); + background-color: var(--ix-control-bg-color); opacity: 0; &:hover { - color: @trigger-clear-icon-hover-color; + color: var(--ix-color-icon-hover); } } @@ -105,20 +103,20 @@ appearance: none; color: inherit; font-size: inherit; - .placeholder(@trigger-placeholder-color); + .placeholder(); } // form status &&-invalid { - border-color: @form-item-invalid-color; + border-color: var(--ix-color-error-border); &:hover { - border-color: @form-item-invalid-color; + border-color: var(--ix-color-error-border-hover); } &.@{idux-prefix}-trigger-focused { - border-color: @form-item-invalid-color; - box-shadow: @form-item-invalid-box-shadow; + border-color: var(--ix-color-error-border-active); + box-shadow: var(--ix-control-box-shadow-invalid); } } } diff --git a/packages/components/_private/trigger/style/index.ts b/packages/components/_private/trigger/style/index.ts new file mode 100644 index 000000000..6d8a76564 --- /dev/null +++ b/packages/components/_private/trigger/style/index.ts @@ -0,0 +1,4 @@ +// style dependencies +import '@idux/components/icon/style' + +import './index.less' diff --git a/packages/components/_private/trigger/style/themes/default.less b/packages/components/_private/trigger/style/themes/default.less deleted file mode 100644 index 629570ab9..000000000 --- a/packages/components/_private/trigger/style/themes/default.less +++ /dev/null @@ -1,5 +0,0 @@ -@import '../../../../style/themes/default.less'; -@import '../../../../form/style/themes/default.variable.less'; -@import './default.variable.less'; - -@import '../index.less'; diff --git a/packages/components/_private/trigger/style/themes/default.ts b/packages/components/_private/trigger/style/themes/default.ts deleted file mode 100644 index 290ba717c..000000000 --- a/packages/components/_private/trigger/style/themes/default.ts +++ /dev/null @@ -1,4 +0,0 @@ -// style dependencies -import '@idux/components/icon/style/themes/default' - -import './default.less' diff --git a/packages/components/_private/trigger/style/themes/default.variable.less b/packages/components/_private/trigger/style/themes/default.variable.less deleted file mode 100644 index 16d7cedca..000000000 --- a/packages/components/_private/trigger/style/themes/default.variable.less +++ /dev/null @@ -1,33 +0,0 @@ -@trigger-font-size-sm: @form-font-size-sm; -@trigger-font-size-md: @form-font-size-md; -@trigger-font-size-lg: @form-font-size-lg; -@trigger-line-height: @form-line-height; -@trigger-height-sm: @form-height-sm; -@trigger-height-md: @form-height-md; -@trigger-height-lg: @form-height-lg; -@trigger-padding-vertical-sm: @form-padding-vertical-sm; -@trigger-padding-vertical-md: @form-padding-vertical-md; -@trigger-padding-vertical-lg: @form-padding-vertical-lg; - -@trigger-border-width: @form-border-width; -@trigger-border-style: @form-border-style; -@trigger-border-color: @form-border-color; -@trigger-border-radius: @border-radius-sm; - -@trigger-color: @form-color; -@trigger-color-secondary: @form-color-secondary; -@trigger-background-color: @form-background-color; -@trigger-placeholder-color: @form-placeholder-color; -@trigger-hover-color: @form-hover-color; -@trigger-active-color: @form-active-color; -@trigger-active-box-shadow: @form-active-box-shadow; -@trigger-disabled-color: @form-disabled-color; -@trigger-disabled-background-color: @form-disabled-background-color; - -@trigger-icon-font-size: @font-size-lg; -@trigger-icon-margin-left: @spacing-xs; -@trigger-icon-margin-right: @spacing-xs; -@trigger-icon-color: @trigger-placeholder-color; -@trigger-clear-icon-color: @trigger-color-secondary; -@trigger-clear-icon-hover-color: @trigger-color; -@trigger-icon-background-color: @trigger-background-color; diff --git a/packages/components/_private/trigger/style/themes/seer.less b/packages/components/_private/trigger/style/themes/seer.less deleted file mode 100644 index 97271835b..000000000 --- a/packages/components/_private/trigger/style/themes/seer.less +++ /dev/null @@ -1,5 +0,0 @@ -@import '../../../../style/themes/seer.less'; -@import '../../../../form/style/themes/seer.variable.less'; -@import './seer.variable.less'; - -@import '../index.less'; diff --git a/packages/components/_private/trigger/style/themes/seer.ts b/packages/components/_private/trigger/style/themes/seer.ts deleted file mode 100644 index 4f3afb4c4..000000000 --- a/packages/components/_private/trigger/style/themes/seer.ts +++ /dev/null @@ -1,4 +0,0 @@ -// style dependencies -import '@idux/components/icon/style/themes/seer' - -import './seer.less' diff --git a/packages/components/_private/trigger/style/themes/seer.variable.less b/packages/components/_private/trigger/style/themes/seer.variable.less deleted file mode 100644 index 2dbf39c14..000000000 --- a/packages/components/_private/trigger/style/themes/seer.variable.less +++ /dev/null @@ -1,6 +0,0 @@ -@import './default.variable.less'; - -@trigger-icon-margin-right: @spacing-sm; -@trigger-icon-font-size: @font-size-lg; -@trigger-icon-color: @color-graphite-l10; -@trigger-clear-icon-color: @color-graphite-d20; diff --git a/packages/components/_private/wave/style/index.less b/packages/components/_private/wave/style/index.less index 7e9311dc8..9d1718fce 100644 --- a/packages/components/_private/wave/style/index.less +++ b/packages/components/_private/wave/style/index.less @@ -1,3 +1,4 @@ +@import '../../../style/variable/index.less'; .@{wave-prefix} { position: absolute; left: 0; diff --git a/packages/components/_private/wave/style/index.ts b/packages/components/_private/wave/style/index.ts new file mode 100644 index 000000000..1526e4dff --- /dev/null +++ b/packages/components/_private/wave/style/index.ts @@ -0,0 +1 @@ +import './index.less' diff --git a/packages/components/_private/wave/style/themes/default.less b/packages/components/_private/wave/style/themes/default.less deleted file mode 100644 index 760b5ac8b..000000000 --- a/packages/components/_private/wave/style/themes/default.less +++ /dev/null @@ -1,3 +0,0 @@ -@import '../../../../style/themes/default.less'; -@import './default.variable.less'; -@import '../index.less'; diff --git a/packages/components/_private/wave/style/themes/default.ts b/packages/components/_private/wave/style/themes/default.ts deleted file mode 100644 index 5ee8564cb..000000000 --- a/packages/components/_private/wave/style/themes/default.ts +++ /dev/null @@ -1,2 +0,0 @@ -// style dependencies -import './default.less' diff --git a/packages/components/_private/wave/style/themes/default.variable.less b/packages/components/_private/wave/style/themes/default.variable.less deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/components/_private/wave/style/themes/seer.less b/packages/components/_private/wave/style/themes/seer.less deleted file mode 100644 index 232fa6955..000000000 --- a/packages/components/_private/wave/style/themes/seer.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../../style/themes/seer.less'; -@import './seer.variable.less'; - -@import '../index.less'; diff --git a/packages/components/_private/wave/style/themes/seer.ts b/packages/components/_private/wave/style/themes/seer.ts deleted file mode 100644 index 63a4fe708..000000000 --- a/packages/components/_private/wave/style/themes/seer.ts +++ /dev/null @@ -1,2 +0,0 @@ -// style dependencies -import './seer.less' diff --git a/packages/components/_private/wave/style/themes/seer.variable.less b/packages/components/_private/wave/style/themes/seer.variable.less deleted file mode 100644 index 498793af1..000000000 --- a/packages/components/_private/wave/style/themes/seer.variable.less +++ /dev/null @@ -1 +0,0 @@ -@import './default.variable.less'; diff --git a/packages/components/affix/style/index.less b/packages/components/affix/style/index.less index fea9eed88..1bd1519a2 100644 --- a/packages/components/affix/style/index.less +++ b/packages/components/affix/style/index.less @@ -1,3 +1,4 @@ +@import '../../style/variable/index.less'; // @import '../../style/mixins/reset.less'; // .@{affix-prefix} { diff --git a/packages/components/affix/style/index.ts b/packages/components/affix/style/index.ts new file mode 100644 index 000000000..7e35aaf38 --- /dev/null +++ b/packages/components/affix/style/index.ts @@ -0,0 +1,5 @@ +// style dependencies + +import '@idux/components/icon/style' + +import './index.less' diff --git a/packages/components/affix/style/themes/default.less b/packages/components/affix/style/themes/default.less deleted file mode 100644 index a66443560..000000000 --- a/packages/components/affix/style/themes/default.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../style/themes/default.less'; -@import './default.variable.less'; - -@import '../index.less'; diff --git a/packages/components/affix/style/themes/default.ts b/packages/components/affix/style/themes/default.ts deleted file mode 100644 index 9e0a45aa2..000000000 --- a/packages/components/affix/style/themes/default.ts +++ /dev/null @@ -1,5 +0,0 @@ -// style dependencies - -import '@idux/components/icon/style/themes/default' - -import './default.less' diff --git a/packages/components/affix/style/themes/default.variable.less b/packages/components/affix/style/themes/default.variable.less deleted file mode 100644 index 27002ba2b..000000000 --- a/packages/components/affix/style/themes/default.variable.less +++ /dev/null @@ -1 +0,0 @@ -// affix diff --git a/packages/components/affix/style/themes/seer.less b/packages/components/affix/style/themes/seer.less deleted file mode 100644 index 32bf707c1..000000000 --- a/packages/components/affix/style/themes/seer.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../style/themes/seer.less'; -@import './seer.variable.less'; - -@import '../index.less'; diff --git a/packages/components/affix/style/themes/seer.ts b/packages/components/affix/style/themes/seer.ts deleted file mode 100644 index 0b5bdaa49..000000000 --- a/packages/components/affix/style/themes/seer.ts +++ /dev/null @@ -1,5 +0,0 @@ -// style dependencies - -import '@idux/components/icon/style/themes/seer' - -import './seer.less' diff --git a/packages/components/affix/style/themes/seer.variable.less b/packages/components/affix/style/themes/seer.variable.less deleted file mode 100644 index 498793af1..000000000 --- a/packages/components/affix/style/themes/seer.variable.less +++ /dev/null @@ -1 +0,0 @@ -@import './default.variable.less'; diff --git a/packages/components/alert/index.ts b/packages/components/alert/index.ts index 89d9138b9..0048944ee 100644 --- a/packages/components/alert/index.ts +++ b/packages/components/alert/index.ts @@ -20,3 +20,6 @@ export type { AlertType, AlertPagination, } from './src/types' + +export { getThemeTokens as getAlertThemeTokens } from './theme' +export type { AlertThemeTokens } from './theme' diff --git a/packages/components/alert/src/Alert.tsx b/packages/components/alert/src/Alert.tsx index f6c17f824..02fc0fd8b 100644 --- a/packages/components/alert/src/Alert.tsx +++ b/packages/components/alert/src/Alert.tsx @@ -13,16 +13,21 @@ import { callEmit, convertArray, flattenNode, useState } from '@idux/cdk/utils' import { useGlobalConfig } from '@idux/components/config' import { IxIcon } from '@idux/components/icon' import { IxPagination } from '@idux/components/pagination' +import { useThemeToken } from '@idux/components/theme' import { convertStringVNode } from '@idux/components/utils' import { useCloseable } from './composables/useCloseable' import { alertProps } from './types' +import { getThemeTokens } from '../theme' export default defineComponent({ name: 'IxAlert', props: alertProps, setup(props, { slots }) { const common = useGlobalConfig('common') + const { globalHashId, hashId, registerToken } = useThemeToken('alert') + registerToken(getThemeTokens) + const mergedPrefixCls = computed(() => `${common.prefixCls}-alert`) const config = useGlobalConfig('alert') @@ -61,6 +66,8 @@ export default defineComponent({ const classes = computed(() => { const prefixCls = mergedPrefixCls.value return normalizeClass({ + [globalHashId.value]: !!globalHashId.value, + [hashId.value]: !!hashId.value, [prefixCls]: true, [`${prefixCls}-${props.type}`]: true, [`${prefixCls}-banner`]: props.banner, diff --git a/packages/components/alert/style/index.less b/packages/components/alert/style/index.less index 371a16519..59a0bbe20 100644 --- a/packages/components/alert/style/index.less +++ b/packages/components/alert/style/index.less @@ -1,27 +1,28 @@ +@import '../../style/variable/index.less'; @import '../../style/mixins/reset.less'; @import './mixin.less'; .@{alert-prefix} { .reset-component-new(); - @line-height: calc(var(--ix-font-size) + var(--ix-line-height-gutter)); + @line-height: calc(var(--ix-font-size-sm) + var(--ix-line-height-gutter)); - font-size: var(--ix-font-size); + font-size: var(--ix-font-size-sm); line-height: @line-height; display: flex; - padding: calc((@alert-height - @line-height - 2px) / 2) 8px; + padding: calc((var(--ix-alert-height) - @line-height - 2px) / 2) 8px; border: 1px solid transparent; - border-radius: @alert-border-radius; + border-radius: var(--ix-alert-border-radius); - .alert-status-color(success, @alert-success-color, @alert-success-background-color); - .alert-status-color(info, @alert-info-color, @alert-info-background-color); - .alert-status-color(warning, @alert-warning-color, @alert-warning-background-color); - .alert-status-color(error, @alert-error-color, @alert-error-background-color); - .alert-status-color(offline, @alert-offline-color, @alert-offline-background-color); + .alert-status-color(success, var(--ix-color-success-text), var(--ix-alert-success-bg-color)); + .alert-status-color(info, var(--ix-color-info-text), var(--ix-alert-info-bg-color)); + .alert-status-color(warning, var(--ix-color-warning-text), var(--ix-alert-warning-bg-color)); + .alert-status-color(error, var(--ix-color-error-text), var(--ix-alert-error-bg-color)); + .alert-status-color(offline, var(--ix-color-offline-text), var(--ix-alert-offline-bg-color)); &-banner { - padding: calc((@alert-height - @line-height - 2px) / 2) 16px; - border-bottom-color: @alert-banner-border-color; + padding: calc((var(--ix-alert-height) - @line-height - 2px) / 2) 16px; + border-bottom-color: var(--ix-color-border-secondary); } &-icon { @@ -31,17 +32,17 @@ &-close-icon { cursor: pointer; margin-left: 16px; - color: @alert-icon-color; - transition: color var(--ix-transition-duration-fast); + color: var(--ix-color-icon); + transition: color var(--ix-motion-duration-fast); &:hover { - color: @alert-icon-color-hover; + color: var(--ix-color-icon-hover); } } &-icon, &-close-icon { - font-size: var(--ix-font-size-lg); + font-size: var(--ix-font-size-icon); } &-content { @@ -54,7 +55,7 @@ } &-with-description &-title { - .reset-font-size(calc(var(--ix-font-size) + 2px)); + .reset-font-size(calc(var(--ix-font-size-sm) + 2px)); margin-bottom: 4px; } @@ -63,7 +64,7 @@ margin-left: 16px; &.@{pagination-prefix} { - color: @alert-icon-color; + color: var(--ix-color-icon); background-color: transparent; .@{pagination-prefix}-item:hover, diff --git a/packages/components/alert/style/index.ts b/packages/components/alert/style/index.ts new file mode 100644 index 000000000..ec4cbdb75 --- /dev/null +++ b/packages/components/alert/style/index.ts @@ -0,0 +1,6 @@ +// style dependencies + +import '@idux/components/icon/style' +import '@idux/components/pagination/style' + +import './index.less' diff --git a/packages/components/alert/style/mixin.less b/packages/components/alert/style/mixin.less index 83a034bf3..32bfecc91 100644 --- a/packages/components/alert/style/mixin.less +++ b/packages/components/alert/style/mixin.less @@ -11,7 +11,7 @@ .alert-transition () { &-enter-active, &-leave-active { - transition: all var(--ix-transition-duration-fast); + transition: all var(--ix-motion-duration-fast); } &-enter-from, diff --git a/packages/components/alert/style/themes/default.less b/packages/components/alert/style/themes/default.less deleted file mode 100644 index a66443560..000000000 --- a/packages/components/alert/style/themes/default.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../style/themes/default.less'; -@import './default.variable.less'; - -@import '../index.less'; diff --git a/packages/components/alert/style/themes/default.ts b/packages/components/alert/style/themes/default.ts deleted file mode 100644 index 1e9320a66..000000000 --- a/packages/components/alert/style/themes/default.ts +++ /dev/null @@ -1,6 +0,0 @@ -// style dependencies - -import '@idux/components/icon/style/themes/default' -import '@idux/components/pagination/style/themes/default' - -import './default.less' diff --git a/packages/components/alert/style/themes/default.variable.less b/packages/components/alert/style/themes/default.variable.less deleted file mode 100644 index 686fe5eb0..000000000 --- a/packages/components/alert/style/themes/default.variable.less +++ /dev/null @@ -1,17 +0,0 @@ -@alert-height: var(--ix-height-md); -@alert-border-radius: var(--ix-border-radius-md); -@alert-icon-color: var(--ix-text-color-secondary); -@alert-icon-color-hover: var(--ix-color-primary); -@alert-banner-border-color: var(--ix-border-color-secondary); - -@alert-success-color: var(--ix-color-turquoise); -@alert-info-color: var(--ix-color-primary); -@alert-warning-color: var(--ix-color-brown); -@alert-error-color: var(--ix-color-red); -@alert-offline-color: var(--ix-text-color-info); - -@alert-success-background-color: #f1faf7; -@alert-info-background-color: #f2f7ff; -@alert-warning-background-color: #fffaf2; -@alert-error-background-color: #fff2f2; -@alert-offline-background-color: #f7f7f8; diff --git a/packages/components/alert/style/themes/seer.less b/packages/components/alert/style/themes/seer.less deleted file mode 100644 index 32bf707c1..000000000 --- a/packages/components/alert/style/themes/seer.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../style/themes/seer.less'; -@import './seer.variable.less'; - -@import '../index.less'; diff --git a/packages/components/alert/style/themes/seer.ts b/packages/components/alert/style/themes/seer.ts deleted file mode 100644 index b99015859..000000000 --- a/packages/components/alert/style/themes/seer.ts +++ /dev/null @@ -1,6 +0,0 @@ -// style dependencies - -import '@idux/components/icon/style/themes/seer' -import '@idux/components/pagination/style/themes/seer' - -import './seer.less' diff --git a/packages/components/alert/style/themes/seer.variable.less b/packages/components/alert/style/themes/seer.variable.less deleted file mode 100644 index 20d9f020b..000000000 --- a/packages/components/alert/style/themes/seer.variable.less +++ /dev/null @@ -1,7 +0,0 @@ -@import './default.variable.less'; - -@alert-border-radius: var(--ix-border-radius-sm); - -@alert-success-color: var(--ix-color-turquoise-d10); -@alert-warning-color: #a35f40; -@alert-error-color: var(--ix-color-red-d10); diff --git a/packages/components/alert/theme/default.css b/packages/components/alert/theme/default.css new file mode 100644 index 000000000..51c271d3f --- /dev/null +++ b/packages/components/alert/theme/default.css @@ -0,0 +1,10 @@ +/* ------ alert css variables ------ */ +:root { + --ix-alert-height: 32px; + --ix-alert-border-radius: 2px; + --ix-alert-success-bg-color: rgba(18, 166, 121, 0.1); + --ix-alert-info-bg-color: rgba(28, 110, 255, 0.1); + --ix-alert-warning-bg-color: rgba(253, 170, 29, 0.1); + --ix-alert-error-bg-color: rgba(255, 87, 82, 0.1); + --ix-alert-offline-bg-color: rgba(111, 119, 133, 0.1); +} diff --git a/packages/components/alert/theme/default.ts b/packages/components/alert/theme/default.ts new file mode 100644 index 000000000..bb1ac70d0 --- /dev/null +++ b/packages/components/alert/theme/default.ts @@ -0,0 +1,31 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +import { type CertainThemeTokens, type GlobalThemeTokens, getAlphaColor } from '@idux/components/theme' +export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTokens<'alert'> { + const { + heightMd, + borderRadiusSm, + alertCompColorAlpha, + colorSuccessBg, + colorInfoBg, + colorWarningBg, + colorErrorBg, + colorOffline, + } = tokens + + return { + height: heightMd, + borderRadius: borderRadiusSm, + + successBgColor: getAlphaColor(colorSuccessBg, alertCompColorAlpha), + infoBgColor: getAlphaColor(colorInfoBg, alertCompColorAlpha), + warningBgColor: getAlphaColor(colorWarningBg, alertCompColorAlpha), + errorBgColor: getAlphaColor(colorErrorBg, alertCompColorAlpha), + offlineBgColor: getAlphaColor(colorOffline, alertCompColorAlpha), + } +} diff --git a/packages/components/alert/theme/index.ts b/packages/components/alert/theme/index.ts new file mode 100644 index 000000000..54026783f --- /dev/null +++ b/packages/components/alert/theme/index.ts @@ -0,0 +1,16 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +import type { TokenGetter } from '@idux/components/theme' + +import { getDefaultThemeTokens } from './default' + +export const getThemeTokens: TokenGetter<'alert'> = (tokens, presetTheme) => { + return presetTheme === 'default' ? getDefaultThemeTokens(tokens) : getDefaultThemeTokens(tokens) +} + +export type { AlertThemeTokens } from './tokens' diff --git a/packages/components/alert/theme/tokens.ts b/packages/components/alert/theme/tokens.ts new file mode 100644 index 000000000..9d6a8b346 --- /dev/null +++ b/packages/components/alert/theme/tokens.ts @@ -0,0 +1,19 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +export interface AlertThemeTokens { + height: number + borderRadius: number + + // private + + successBgColor: string + infoBgColor: string + warningBgColor: string + errorBgColor: string + offlineBgColor: string +} diff --git a/packages/components/anchor/index.ts b/packages/components/anchor/index.ts index 16b3cac84..5727d1907 100644 --- a/packages/components/anchor/index.ts +++ b/packages/components/anchor/index.ts @@ -23,3 +23,6 @@ export type { AnchorLinkComponent, AnchorLinkPublicProps as AnchorLinkProps, } from './src/types' + +export { getThemeTokens as getAnchorThemeTokens } from './theme' +export type { AnchorThemeTokens } from './theme' diff --git a/packages/components/anchor/src/Anchor.tsx b/packages/components/anchor/src/Anchor.tsx index 35cc49a68..76bc59d67 100644 --- a/packages/components/anchor/src/Anchor.tsx +++ b/packages/components/anchor/src/Anchor.tsx @@ -15,16 +15,21 @@ import { scrollToTop } from '@idux/cdk/scroll' import { callEmit, getOffset, off, on } from '@idux/cdk/utils' import { IxAffix } from '@idux/components/affix' import { useGlobalConfig } from '@idux/components/config' +import { useThemeToken } from '@idux/components/theme' import { convertTarget } from '@idux/components/utils' import { anchorToken } from './token' import { anchorProps } from './types' +import { getThemeTokens } from '../theme' export default defineComponent({ name: 'IxAnchor', props: anchorProps, setup(props, { slots }) { const common = useGlobalConfig('common') + const { globalHashId, hashId, registerToken } = useThemeToken('anchor') + registerToken(getThemeTokens) + const mergedPrefixCls = computed(() => `${common.prefixCls}-anchor`) const config = useGlobalConfig('anchor') const hideLinkBall = computed(() => props.hideLinkBall ?? config.hideLinkBall) @@ -55,7 +60,7 @@ export default defineComponent({ return anchorNode } return ( - + {anchorNode} ) diff --git a/packages/components/anchor/src/AnchorLink.tsx b/packages/components/anchor/src/AnchorLink.tsx index 516f645a6..03d8b4991 100644 --- a/packages/components/anchor/src/AnchorLink.tsx +++ b/packages/components/anchor/src/AnchorLink.tsx @@ -8,15 +8,20 @@ import { computed, defineComponent, inject, onBeforeUnmount, onMounted, watch } from 'vue' import { useGlobalConfig } from '@idux/components/config' +import { useThemeToken } from '@idux/components/theme' import { anchorToken } from './token' import { linkProps } from './types' +import { getThemeTokens } from '../theme' export default defineComponent({ name: 'IxAnchorLink', props: linkProps, setup(props, { slots }) { const common = useGlobalConfig('common') + const { globalHashId, hashId, registerToken } = useThemeToken('anchor') + registerToken(getThemeTokens) + const mergedPrefixCls = computed(() => `${common.prefixCls}-anchor-link`) const { registerLink, unregisterLink, activeLink, handleLinkClick } = inject(anchorToken)! @@ -45,7 +50,7 @@ export default defineComponent({ const { href, title } = props const prefixCls = mergedPrefixCls.value return ( -
+
{slots.title?.() ?? title} diff --git a/packages/components/anchor/style/index.less b/packages/components/anchor/style/index.less index 88f151989..4a22320d7 100644 --- a/packages/components/anchor/style/index.less +++ b/packages/components/anchor/style/index.less @@ -1,9 +1,10 @@ +@import '../../style/variable/index.less'; @import '../../style/mixins/reset.less'; @import '../../style/mixins/ellipsis.less'; .@{anchor-prefix} { position: relative; - padding: 4px 0 4px @anchor-ink-ball-width; + padding: 4px 0 4px var(--ix-anchor-ink-ball-width); &-wrapper { .reset-component-new(); @@ -27,18 +28,18 @@ width: 1px; height: 100%; margin: 0 auto; - background-color: var(--ix-border-color); + background-color: var(--ix-color-separator); content: ' '; } &-ball { position: absolute; display: none; - width: @anchor-ink-ball-width; - height: @anchor-ink-ball-height; - border-radius: @anchor-ink-ball-width; - background-color: @anchor-color-active; - transition: top var(--ix-transition-duration-fast) var(--ix-ease-in-out); + width: var(--ix-anchor-ink-ball-width); + height: var(--ix-anchor-ink-ball-height); + border-radius: var(--ix-anchor-ink-ball-width); + background-color: var(--ix-color-link); + transition: top var(--ix-motion-duration-fast) var(--ix-motion-ease-in-out); &-visible { display: inline-block; @@ -66,12 +67,12 @@ position: relative; display: block; text-decoration: none; - color: var(--ix-text-color); - transition: color var(--ix-transition-duration-fast); + color: var(--ix-color-text); + transition: color var(--ix-motion-duration-fast); &:hover, &-active { - color: @anchor-color-active; + color: var(--ix-color-link); } } } diff --git a/packages/components/anchor/style/index.ts b/packages/components/anchor/style/index.ts new file mode 100644 index 000000000..f00b66df9 --- /dev/null +++ b/packages/components/anchor/style/index.ts @@ -0,0 +1,5 @@ +// style dependencies + +import '@idux/components/affix/style' + +import './index.less' diff --git a/packages/components/anchor/style/themes/default.less b/packages/components/anchor/style/themes/default.less deleted file mode 100644 index a66443560..000000000 --- a/packages/components/anchor/style/themes/default.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../style/themes/default.less'; -@import './default.variable.less'; - -@import '../index.less'; diff --git a/packages/components/anchor/style/themes/default.ts b/packages/components/anchor/style/themes/default.ts deleted file mode 100644 index aebed0181..000000000 --- a/packages/components/anchor/style/themes/default.ts +++ /dev/null @@ -1,5 +0,0 @@ -// style dependencies - -import '@idux/components/affix/style/themes/default' - -import './default.less' diff --git a/packages/components/anchor/style/themes/default.variable.less b/packages/components/anchor/style/themes/default.variable.less deleted file mode 100644 index 1cab19001..000000000 --- a/packages/components/anchor/style/themes/default.variable.less +++ /dev/null @@ -1,4 +0,0 @@ -@anchor-color-active: var(--ix-color-primary); - -@anchor-ink-ball-width: 2px; -@anchor-ink-ball-height: 16px; diff --git a/packages/components/anchor/style/themes/seer.less b/packages/components/anchor/style/themes/seer.less deleted file mode 100644 index 32bf707c1..000000000 --- a/packages/components/anchor/style/themes/seer.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../style/themes/seer.less'; -@import './seer.variable.less'; - -@import '../index.less'; diff --git a/packages/components/anchor/style/themes/seer.ts b/packages/components/anchor/style/themes/seer.ts deleted file mode 100644 index 626d44eaa..000000000 --- a/packages/components/anchor/style/themes/seer.ts +++ /dev/null @@ -1,5 +0,0 @@ -// style dependencies - -import '@idux/components/affix/style/themes/seer' - -import './seer.less' diff --git a/packages/components/anchor/style/themes/seer.variable.less b/packages/components/anchor/style/themes/seer.variable.less deleted file mode 100644 index 498793af1..000000000 --- a/packages/components/anchor/style/themes/seer.variable.less +++ /dev/null @@ -1 +0,0 @@ -@import './default.variable.less'; diff --git a/packages/components/anchor/theme/default.css b/packages/components/anchor/theme/default.css new file mode 100644 index 000000000..b1fd7eeaf --- /dev/null +++ b/packages/components/anchor/theme/default.css @@ -0,0 +1,5 @@ +/* ------ anchor css variables ------ */ +:root { + --ix-anchor-ink-ball-width: 2px; + --ix-anchor-ink-ball-height: 16px; +} diff --git a/packages/components/anchor/theme/default.ts b/packages/components/anchor/theme/default.ts new file mode 100644 index 000000000..e8e5716ff --- /dev/null +++ b/packages/components/anchor/theme/default.ts @@ -0,0 +1,14 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +import type { CertainThemeTokens } from '@idux/components/theme' +export function getDefaultThemeTokens(): CertainThemeTokens<'anchor'> { + return { + inkBallWidth: 2, + inkBallHeight: 16, + } +} diff --git a/packages/components/anchor/theme/index.ts b/packages/components/anchor/theme/index.ts new file mode 100644 index 000000000..f4101e0a8 --- /dev/null +++ b/packages/components/anchor/theme/index.ts @@ -0,0 +1,16 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +import type { TokenGetter } from '@idux/components/theme' + +import { getDefaultThemeTokens } from './default' + +export const getThemeTokens: TokenGetter<'anchor'> = (tokens, presetTheme) => { + return presetTheme === 'default' ? getDefaultThemeTokens(tokens) : getDefaultThemeTokens(tokens) +} + +export type { AnchorThemeTokens } from './tokens' diff --git a/packages/components/anchor/theme/tokens.ts b/packages/components/anchor/theme/tokens.ts new file mode 100644 index 000000000..3c0bc7b8a --- /dev/null +++ b/packages/components/anchor/theme/tokens.ts @@ -0,0 +1,11 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +export interface AnchorThemeTokens { + inkBallWidth: number + inkBallHeight: number +} diff --git a/packages/components/avatar/demo/Type.vue b/packages/components/avatar/demo/Type.vue index b623a1e8b..0c826b076 100644 --- a/packages/components/avatar/demo/Type.vue +++ b/packages/components/avatar/demo/Type.vue @@ -11,7 +11,7 @@ diff --git a/packages/components/avatar/index.ts b/packages/components/avatar/index.ts index ea970edb1..098720e08 100644 --- a/packages/components/avatar/index.ts +++ b/packages/components/avatar/index.ts @@ -20,3 +20,6 @@ export type { AvatarShape, AvatarSize, } from './src/types' + +export { getThemeTokens as getAvatarThemeTokens } from './theme' +export type { AvatarThemeTokens } from './theme' diff --git a/packages/components/avatar/src/Avatar.tsx b/packages/components/avatar/src/Avatar.tsx index 891e606e4..7f246421a 100644 --- a/packages/components/avatar/src/Avatar.tsx +++ b/packages/components/avatar/src/Avatar.tsx @@ -19,14 +19,19 @@ import { useResizeObserver } from '@idux/cdk/resize' import { callEmit, convertCssPixel, hasSlot } from '@idux/cdk/utils' import { useGlobalConfig } from '@idux/components/config' import { IxIcon } from '@idux/components/icon' +import { useThemeToken } from '@idux/components/theme' import { avatarProps } from './types' +import { getThemeTokens } from '../theme' export default defineComponent({ name: 'IxAvatar', props: avatarProps, setup(props, { slots }) { const common = useGlobalConfig('common') + const { globalHashId, hashId, registerToken } = useThemeToken('avatar') + registerToken(getThemeTokens) + const mergedPrefixCls = computed(() => `${common.prefixCls}-avatar`) const config = useGlobalConfig('avatar') @@ -44,7 +49,7 @@ export default defineComponent({ const { avatarRef, textRef, size, avatarStyle, textStyle } = useSize(props, config) - const classes = useClasses(props, config, size, showText, showIcon, mergedPrefixCls) + const classes = useClasses(props, config, size, showText, showIcon, mergedPrefixCls, globalHashId, hashId) const handleError = (evt: Event) => { const result = callEmit(props.onError, evt) @@ -91,12 +96,16 @@ const useClasses = ( showText: Ref, showIcon: Ref, mergedPrefixCls: ComputedRef, + globalHashId: ComputedRef, + hashId: ComputedRef, ) => { return computed(() => { const shape = props.shape ?? config.shape const sizeValue = size.value const prefixCls = mergedPrefixCls.value return { + [globalHashId.value]: !!globalHashId.value, + [hashId.value]: !!hashId.value, [`${prefixCls}`]: true, [`${prefixCls}-image`]: !!props.src && !showText.value && !showIcon.value, [`${prefixCls}-${shape}`]: true, diff --git a/packages/components/avatar/style/index.less b/packages/components/avatar/style/index.less index d9d8c7aff..5f227470d 100644 --- a/packages/components/avatar/style/index.less +++ b/packages/components/avatar/style/index.less @@ -1,22 +1,23 @@ +@import '../../style/variable/index.less'; @import '../../style/mixins/reset.less'; .@{avatar-prefix} { .reset-component-new(); - .reset-color(@avatar-color, @avatar-background-color); + .reset-color(var(--ix-color-text-inverse), var(--ix-color-container-bg-disabled)); position: relative; - display: inline-block; - text-align: center; - vertical-align: middle; + display: inline-flex; + justify-content: center; + align-items: center; white-space: nowrap; overflow: hidden; &-circle { - border-radius: @avatar-border-radius-circle; + border-radius: 50%; } &-square { - border-radius: @avatar-border-radius-square; + border-radius: var(--ix-avatar-border-radius-square); } &-image { @@ -24,15 +25,15 @@ } &-lg { - .avatar-size(@avatar-size-lg); + .avatar-size(var(--ix-avatar-size-lg)); } &-md { - .avatar-size(@avatar-size-md); + .avatar-size(var(--ix-avatar-size-md)); } &-sm { - .avatar-size(@avatar-size-sm); + .avatar-size(var(--ix-avatar-size-sm)); } &-text { diff --git a/packages/components/avatar/style/index.ts b/packages/components/avatar/style/index.ts new file mode 100644 index 000000000..7e35aaf38 --- /dev/null +++ b/packages/components/avatar/style/index.ts @@ -0,0 +1,5 @@ +// style dependencies + +import '@idux/components/icon/style' + +import './index.less' diff --git a/packages/components/avatar/style/themes/default.less b/packages/components/avatar/style/themes/default.less deleted file mode 100644 index a66443560..000000000 --- a/packages/components/avatar/style/themes/default.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../style/themes/default.less'; -@import './default.variable.less'; - -@import '../index.less'; diff --git a/packages/components/avatar/style/themes/default.ts b/packages/components/avatar/style/themes/default.ts deleted file mode 100644 index 9e0a45aa2..000000000 --- a/packages/components/avatar/style/themes/default.ts +++ /dev/null @@ -1,5 +0,0 @@ -// style dependencies - -import '@idux/components/icon/style/themes/default' - -import './default.less' diff --git a/packages/components/avatar/style/themes/default.variable.less b/packages/components/avatar/style/themes/default.variable.less deleted file mode 100644 index bb71cf217..000000000 --- a/packages/components/avatar/style/themes/default.variable.less +++ /dev/null @@ -1,7 +0,0 @@ -@avatar-size-sm: var(--ix-height-sm); -@avatar-size-md: var(--ix-height-md); -@avatar-size-lg: var(--ix-height-lg); -@avatar-color: var(--ix-text-color-inverse); -@avatar-background-color: var(--ix-background-color-deep); -@avatar-border-radius-circle: 50%; -@avatar-border-radius-square: var(--ix-border-radius-md); diff --git a/packages/components/avatar/style/themes/seer.less b/packages/components/avatar/style/themes/seer.less deleted file mode 100644 index 32bf707c1..000000000 --- a/packages/components/avatar/style/themes/seer.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../style/themes/seer.less'; -@import './seer.variable.less'; - -@import '../index.less'; diff --git a/packages/components/avatar/style/themes/seer.ts b/packages/components/avatar/style/themes/seer.ts deleted file mode 100644 index 0b5bdaa49..000000000 --- a/packages/components/avatar/style/themes/seer.ts +++ /dev/null @@ -1,5 +0,0 @@ -// style dependencies - -import '@idux/components/icon/style/themes/seer' - -import './seer.less' diff --git a/packages/components/avatar/style/themes/seer.variable.less b/packages/components/avatar/style/themes/seer.variable.less deleted file mode 100644 index 95d06b12a..000000000 --- a/packages/components/avatar/style/themes/seer.variable.less +++ /dev/null @@ -1,3 +0,0 @@ -@import './default.variable.less'; - -@avatar-border-radius-square: var(--ix-border-radius-sm); diff --git a/packages/components/avatar/theme/default.css b/packages/components/avatar/theme/default.css new file mode 100644 index 000000000..42b5e2fd9 --- /dev/null +++ b/packages/components/avatar/theme/default.css @@ -0,0 +1,7 @@ +/* ------ avatar css variables ------ */ +:root { + --ix-avatar-size-sm: 24px; + --ix-avatar-size-md: 32px; + --ix-avatar-size-lg: 40px; + --ix-avatar-border-radius-square: 2px; +} diff --git a/packages/components/avatar/theme/default.ts b/packages/components/avatar/theme/default.ts new file mode 100644 index 000000000..69b29a479 --- /dev/null +++ b/packages/components/avatar/theme/default.ts @@ -0,0 +1,18 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +import type { CertainThemeTokens, GlobalThemeTokens } from '@idux/components/theme' +export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTokens<'avatar'> { + const { heightSm, heightMd, heightLg, componentBorderRadius } = tokens + + return { + sizeSm: heightSm, + sizeMd: heightMd, + sizeLg: heightLg, + borderRadiusSquare: componentBorderRadius, + } +} diff --git a/packages/components/avatar/theme/index.ts b/packages/components/avatar/theme/index.ts new file mode 100644 index 000000000..520752d85 --- /dev/null +++ b/packages/components/avatar/theme/index.ts @@ -0,0 +1,16 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +import type { TokenGetter } from '@idux/components/theme' + +import { getDefaultThemeTokens } from './default' + +export const getThemeTokens: TokenGetter<'avatar'> = (tokens, presetTheme) => { + return presetTheme === 'default' ? getDefaultThemeTokens(tokens) : getDefaultThemeTokens(tokens) +} + +export type { AvatarThemeTokens } from './tokens' diff --git a/packages/components/avatar/theme/tokens.ts b/packages/components/avatar/theme/tokens.ts new file mode 100644 index 000000000..31387464d --- /dev/null +++ b/packages/components/avatar/theme/tokens.ts @@ -0,0 +1,13 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +export interface AvatarThemeTokens { + sizeSm: number + sizeMd: number + sizeLg: number + borderRadiusSquare: number +} diff --git a/packages/components/back-top/index.ts b/packages/components/back-top/index.ts index 3fb5c2596..bb8d9dcb6 100644 --- a/packages/components/back-top/index.ts +++ b/packages/components/back-top/index.ts @@ -14,3 +14,6 @@ const IxBackTop = BackTop as unknown as BackTopComponent export { IxBackTop } export type { BackTopInstance, BackTopComponent, BackTopPublicProps as BackTopProps } from './src/types' + +export { getThemeTokens as getBackTopThemeTokens } from './theme' +export type { BackTopThemeTokens } from './theme' diff --git a/packages/components/back-top/src/BackTop.tsx b/packages/components/back-top/src/BackTop.tsx index b8963346b..d221ffbd5 100644 --- a/packages/components/back-top/src/BackTop.tsx +++ b/packages/components/back-top/src/BackTop.tsx @@ -13,15 +13,20 @@ import { getScroll, scrollToTop } from '@idux/cdk/scroll' import { callEmit, off, on } from '@idux/cdk/utils' import { useGlobalConfig } from '@idux/components/config' import { IxIcon } from '@idux/components/icon' +import { useThemeToken } from '@idux/components/theme' import { convertTarget } from '@idux/components/utils' import { backTopProps } from './types' +import { getThemeTokens } from '../theme' export default defineComponent({ name: 'IxBackTop', props: backTopProps, setup(props, { slots }) { const common = useGlobalConfig('common') + const { globalHashId, hashId, registerToken } = useThemeToken('backTop') + registerToken(getThemeTokens) + const mergedPrefixCls = computed(() => `${common.prefixCls}-back-top`) const config = useGlobalConfig('backTop') const eventType = 'scroll' @@ -56,7 +61,11 @@ export default defineComponent({ return () => { return ( -
+
{slots.default ? slots.default() : }
diff --git a/packages/components/back-top/style/index.less b/packages/components/back-top/style/index.less index ecd6616c3..96f1d12e3 100644 --- a/packages/components/back-top/style/index.less +++ b/packages/components/back-top/style/index.less @@ -1,22 +1,23 @@ +@import '../../style/variable/index.less'; @import '../../style/mixins/reset.less'; .@{back-top-prefix} { .reset-component-new(); - .reset-color(@back-top-color, @back-top-background-color); - .back-top-size(@back-top-size-lg); + .reset-color(var(--ix-back-top-color), var(--ix-back-top-bg-color)); + .back-top-size(var(--ix-back-top-size-lg)); position: fixed; right: 64px; bottom: 48px; z-index: 10; - border-radius: @back-top-border-radius; - box-shadow: @back-top-box-shadow; + border-radius: 50%; + box-shadow: var(--ix-back-top-box-shadow); text-align: center; cursor: pointer; - transition: all var(--ix-transition-duration-fast); + transition: all var(--ix-motion-duration-fast); &:hover { - color: @back-top-color-hover; + color: var(--ix-back-top-color-hover); } } @@ -29,7 +30,7 @@ @media screen and (max-width: @screen-md-max) { .@{back-top-prefix} { right: 40px; - .back-top-size(@back-top-size-md); + .back-top-size(var(--ix-back-top-size-md)); } } @@ -42,7 +43,7 @@ @media screen and (max-width: @screen-xs-max) { .@{back-top-prefix} { right: 24px; - .back-top-size(@back-top-size-sm); + .back-top-size(var(--ix-back-top-size-sm)); } } diff --git a/packages/components/back-top/style/index.ts b/packages/components/back-top/style/index.ts new file mode 100644 index 000000000..7e35aaf38 --- /dev/null +++ b/packages/components/back-top/style/index.ts @@ -0,0 +1,5 @@ +// style dependencies + +import '@idux/components/icon/style' + +import './index.less' diff --git a/packages/components/back-top/style/themes/default.less b/packages/components/back-top/style/themes/default.less deleted file mode 100644 index a66443560..000000000 --- a/packages/components/back-top/style/themes/default.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../style/themes/default.less'; -@import './default.variable.less'; - -@import '../index.less'; diff --git a/packages/components/back-top/style/themes/default.ts b/packages/components/back-top/style/themes/default.ts deleted file mode 100644 index 9e0a45aa2..000000000 --- a/packages/components/back-top/style/themes/default.ts +++ /dev/null @@ -1,5 +0,0 @@ -// style dependencies - -import '@idux/components/icon/style/themes/default' - -import './default.less' diff --git a/packages/components/back-top/style/themes/default.variable.less b/packages/components/back-top/style/themes/default.variable.less deleted file mode 100644 index d26df4364..000000000 --- a/packages/components/back-top/style/themes/default.variable.less +++ /dev/null @@ -1,9 +0,0 @@ -@back-top-size-lg: 64px; -@back-top-size-md: 48px; -@back-top-size-sm: 40px; -@back-top-border-radius: 50%; -@back-top-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05); - -@back-top-color: var(--ix-color-primary-l30); -@back-top-color-hover: var(--ix-color-primary); -@back-top-background-color: var(--ix-background-color); diff --git a/packages/components/back-top/style/themes/seer.less b/packages/components/back-top/style/themes/seer.less deleted file mode 100644 index 32bf707c1..000000000 --- a/packages/components/back-top/style/themes/seer.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../style/themes/seer.less'; -@import './seer.variable.less'; - -@import '../index.less'; diff --git a/packages/components/back-top/style/themes/seer.ts b/packages/components/back-top/style/themes/seer.ts deleted file mode 100644 index 0b5bdaa49..000000000 --- a/packages/components/back-top/style/themes/seer.ts +++ /dev/null @@ -1,5 +0,0 @@ -// style dependencies - -import '@idux/components/icon/style/themes/seer' - -import './seer.less' diff --git a/packages/components/back-top/style/themes/seer.variable.less b/packages/components/back-top/style/themes/seer.variable.less deleted file mode 100644 index 498793af1..000000000 --- a/packages/components/back-top/style/themes/seer.variable.less +++ /dev/null @@ -1 +0,0 @@ -@import './default.variable.less'; diff --git a/packages/components/back-top/theme/default.css b/packages/components/back-top/theme/default.css new file mode 100644 index 000000000..d8d1885cb --- /dev/null +++ b/packages/components/back-top/theme/default.css @@ -0,0 +1,10 @@ +/* ------ back-top css variables ------ */ +:root { + --ix-back-top-size-lg: 64px; + --ix-back-top-size-md: 48px; + --ix-back-top-size-sm: 40px; + --ix-back-top-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05); + --ix-back-top-color: #96c7ff; + --ix-back-top-color-hover: #1c6eff; + --ix-back-top-bg-color: #ffffff; +} diff --git a/packages/components/back-top/theme/default.ts b/packages/components/back-top/theme/default.ts new file mode 100644 index 000000000..0c4246092 --- /dev/null +++ b/packages/components/back-top/theme/default.ts @@ -0,0 +1,23 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +import { type CertainThemeTokens, type GlobalThemeTokens, getColorPalette } from '@idux/components/theme' +export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTokens<'backTop'> { + const { colorPrimary, colorContainerBg } = tokens + + const primaryColorPalette = getColorPalette(colorPrimary) + + return { + sizeLg: 64, + sizeMd: 48, + sizeSm: 40, + boxShadow: `0 2px 8px 0 rgba(0, 0, 0, 0.05)`, + color: primaryColorPalette.l30, + colorHover: colorPrimary, + bgColor: colorContainerBg, + } +} diff --git a/packages/components/back-top/theme/index.ts b/packages/components/back-top/theme/index.ts new file mode 100644 index 000000000..fbb328409 --- /dev/null +++ b/packages/components/back-top/theme/index.ts @@ -0,0 +1,16 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +import type { TokenGetter } from '@idux/components/theme' + +import { getDefaultThemeTokens } from './default' + +export const getThemeTokens: TokenGetter<'backTop'> = (tokens, presetTheme) => { + return presetTheme === 'default' ? getDefaultThemeTokens(tokens) : getDefaultThemeTokens(tokens) +} + +export type { BackTopThemeTokens } from './tokens' diff --git a/packages/components/back-top/theme/tokens.ts b/packages/components/back-top/theme/tokens.ts new file mode 100644 index 000000000..0ae76c11a --- /dev/null +++ b/packages/components/back-top/theme/tokens.ts @@ -0,0 +1,16 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +export interface BackTopThemeTokens { + sizeLg: number + sizeMd: number + sizeSm: number + boxShadow: string + color: string + colorHover: string + bgColor: string +} diff --git a/packages/components/badge/index.ts b/packages/components/badge/index.ts index e521c2d18..9acdd4ff8 100644 --- a/packages/components/badge/index.ts +++ b/packages/components/badge/index.ts @@ -14,3 +14,6 @@ const IxBadge = Badge as unknown as BadgeComponent export { IxBadge } export type { BadgeInstance, BadgeComponent, BadgePublicProps as BadgeProps } from './src/types' + +export { getThemeTokens as getBadgeThemeTokens } from './theme' +export type { BadgeThemeTokens } from './theme' diff --git a/packages/components/badge/src/Badge.tsx b/packages/components/badge/src/Badge.tsx index ca7dfd7c7..79b499a09 100644 --- a/packages/components/badge/src/Badge.tsx +++ b/packages/components/badge/src/Badge.tsx @@ -9,15 +9,20 @@ import { computed, defineComponent, normalizeClass } from 'vue' import { convertNumber, isNumeric } from '@idux/cdk/utils' import { useGlobalConfig } from '@idux/components/config' +import { useThemeToken } from '@idux/components/theme' import BadgeSub from './BadgeSub' import { badgeProps } from './types' +import { getThemeTokens } from '../theme' export default defineComponent({ name: 'IxBadge', props: badgeProps, setup(props, { slots }) { const common = useGlobalConfig('common') + const { globalHashId, hashId, registerToken } = useThemeToken('badge') + registerToken(getThemeTokens) + const config = useGlobalConfig('badge') const mergedPrefixCls = computed(() => `${common.prefixCls}-badge`) @@ -37,6 +42,8 @@ export default defineComponent({ const prefixCls = mergedPrefixCls.value const { status, processing } = props return normalizeClass({ + [globalHashId.value]: !!globalHashId.value, + [hashId.value]: !!hashId.value, [prefixCls]: true, [`${prefixCls}-${status}`]: true, [`${prefixCls}-processing`]: processing, diff --git a/packages/components/badge/style/index.less b/packages/components/badge/style/index.less index 714b65d96..0f0a08e06 100644 --- a/packages/components/badge/style/index.less +++ b/packages/components/badge/style/index.less @@ -1,3 +1,4 @@ +@import '../../style/variable/index.less'; @import '../../style/mixins/reset.less'; @import '../../style/motion/zoom.less'; @@ -32,11 +33,11 @@ &-enter-active, &-leave-active { animation-fill-mode: both; - animation-duration: var(--ix-transition-duration-slow); + animation-duration: var(--ix-motion-duration-slow); } &-enter-active { - animation-timing-function: var(--ix-ease-out-back); + animation-timing-function: var(--ix-motion-ease-out-back); &:last-child { animation-name: ix-badge-sub-last-enter; @@ -48,7 +49,7 @@ } &-leave-active { - animation-timing-function: var(--ix-ease-in-back); + animation-timing-function: var(--ix-motion-ease-in-back); &:last-child { animation-name: ix-badge-sub-last-leave; @@ -62,14 +63,14 @@ &-count { z-index: auto; - min-width: @badge-count-size; - height: @badge-count-size; - line-height: @badge-count-size; - font-size: @badge-font-size; - color: @badge-color; + min-width: var(--ix-badge-count-size); + height: var(--ix-badge-count-size); + line-height: var(--ix-badge-count-size); + font-size: var(--ix-font-size-sm); + color: var(--ix-color-text-inverse); background-color: var(--ix-badge-background-color); - border-radius: calc(@badge-count-size / 2); - box-shadow: 0 0 0 1px @badge-color; + border-radius: calc(var(--ix-badge-count-size) / 2); + box-shadow: 0 0 0 1px var(--ix-color-text-inverse); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; @@ -77,21 +78,21 @@ &-track { position: relative; display: inline-block; - height: @badge-count-size; - transition: all var(--ix-transition-duration-medium) var(--ix-ease-in-out); + height: var(--ix-badge-count-size); + transition: all var(--ix-motion-duration-medium) var(--ix-motion-ease-in-out); .safari-fix-motion(); &-wrapper { white-space: nowrap; display: inline-block; - height: @badge-count-size; + height: var(--ix-badge-count-size); overflow: hidden; } } &-unit { display: block; - height: @badge-count-size; + height: var(--ix-badge-count-size); .safari-fix-motion(); } } @@ -107,27 +108,27 @@ vertical-align: middle; top: -1px; z-index: auto; - width: @badge-dot-size; - height: @badge-dot-size; + width: var(--ix-badge-dot-size); + height: var(--ix-badge-dot-size); border-radius: 100%; background-color: var(--ix-badge-background-color); box-shadow: 0 0 0 1px var(--ix-background-color); } &-error { - --ix-badge-background-color: @badge-background-color-error; + --ix-badge-background-color: var(--ix-color-error); } &-success { - --ix-badge-background-color: @badge-background-color-success; + --ix-badge-background-color: var(--ix-color-success); } &-info { - --ix-badge-background-color: @badge-background-color-info; + --ix-badge-background-color: var(--ix-color-info); } &-warning { - --ix-badge-background-color: @badge-background-color-warning; + --ix-badge-background-color: var(--ix-color-warning); } &-content { diff --git a/packages/components/badge/style/index.ts b/packages/components/badge/style/index.ts new file mode 100644 index 000000000..64e699152 --- /dev/null +++ b/packages/components/badge/style/index.ts @@ -0,0 +1,3 @@ +// style dependencies + +import './index.less' diff --git a/packages/components/badge/style/themes/default.less b/packages/components/badge/style/themes/default.less deleted file mode 100644 index a66443560..000000000 --- a/packages/components/badge/style/themes/default.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../style/themes/default.less'; -@import './default.variable.less'; - -@import '../index.less'; diff --git a/packages/components/badge/style/themes/default.ts b/packages/components/badge/style/themes/default.ts deleted file mode 100644 index 47fe656f7..000000000 --- a/packages/components/badge/style/themes/default.ts +++ /dev/null @@ -1,3 +0,0 @@ -// style dependencies - -import './default.less' diff --git a/packages/components/badge/style/themes/default.variable.less b/packages/components/badge/style/themes/default.variable.less deleted file mode 100644 index f3633b58e..000000000 --- a/packages/components/badge/style/themes/default.variable.less +++ /dev/null @@ -1,9 +0,0 @@ -@badge-dot-size: 6px; -@badge-count-size: 16px; -@badge-font-size: var(--ix-font-size-sm); - -@badge-color: var(--ix-text-color-inverse); -@badge-background-color-error: var(--ix-color-red); -@badge-background-color-success: var(--ix-color-turquoise); -@badge-background-color-info: var(--ix-color-primary); -@badge-background-color-warning: var(--ix-color-brown); diff --git a/packages/components/badge/style/themes/seer.less b/packages/components/badge/style/themes/seer.less deleted file mode 100644 index 32bf707c1..000000000 --- a/packages/components/badge/style/themes/seer.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../../../style/themes/seer.less'; -@import './seer.variable.less'; - -@import '../index.less'; diff --git a/packages/components/badge/style/themes/seer.ts b/packages/components/badge/style/themes/seer.ts deleted file mode 100644 index 8f61ab076..000000000 --- a/packages/components/badge/style/themes/seer.ts +++ /dev/null @@ -1,3 +0,0 @@ -// style dependencies - -import './seer.less' diff --git a/packages/components/badge/style/themes/seer.variable.less b/packages/components/badge/style/themes/seer.variable.less deleted file mode 100644 index 498793af1..000000000 --- a/packages/components/badge/style/themes/seer.variable.less +++ /dev/null @@ -1 +0,0 @@ -@import './default.variable.less'; diff --git a/packages/components/badge/theme/default.css b/packages/components/badge/theme/default.css new file mode 100644 index 000000000..6a192db1f --- /dev/null +++ b/packages/components/badge/theme/default.css @@ -0,0 +1,5 @@ +/* ------ badge css variables ------ */ +:root { + --ix-badge-dot-size: 6px; + --ix-badge-count-size: 16px; +} diff --git a/packages/components/badge/theme/default.ts b/packages/components/badge/theme/default.ts new file mode 100644 index 000000000..06abb1180 --- /dev/null +++ b/packages/components/badge/theme/default.ts @@ -0,0 +1,14 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +import type { CertainThemeTokens } from '@idux/components/theme' +export function getDefaultThemeTokens(): CertainThemeTokens<'badge'> { + return { + dotSize: 6, + countSize: 16, + } +} diff --git a/packages/components/badge/theme/index.ts b/packages/components/badge/theme/index.ts new file mode 100644 index 000000000..e9915ba5c --- /dev/null +++ b/packages/components/badge/theme/index.ts @@ -0,0 +1,16 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +import type { TokenGetter } from '@idux/components/theme' + +import { getDefaultThemeTokens } from './default' + +export const getThemeTokens: TokenGetter<'badge'> = (tokens, presetTheme) => { + return presetTheme === 'default' ? getDefaultThemeTokens(tokens) : getDefaultThemeTokens(tokens) +} + +export type { BadgeThemeTokens } from './tokens' diff --git a/packages/components/badge/theme/tokens.ts b/packages/components/badge/theme/tokens.ts new file mode 100644 index 000000000..3bc54f989 --- /dev/null +++ b/packages/components/badge/theme/tokens.ts @@ -0,0 +1,11 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +export interface BadgeThemeTokens { + dotSize: number + countSize: number +} diff --git a/packages/components/breadcrumb/index.ts b/packages/components/breadcrumb/index.ts index a63ff4987..3076311c4 100644 --- a/packages/components/breadcrumb/index.ts +++ b/packages/components/breadcrumb/index.ts @@ -23,3 +23,6 @@ export type { BreadcrumbItemComponent, BreadcrumbItemPublicProps as BreadcrumbItemProps, } from './src/types' + +export { getThemeTokens as getBreadcrumbThemeTokens } from './theme' +export type { BreadcrumbThemeTokens } from './theme' diff --git a/packages/components/breadcrumb/src/Breadcrumb.tsx b/packages/components/breadcrumb/src/Breadcrumb.tsx index 296e52df3..c04f7070b 100644 --- a/packages/components/breadcrumb/src/Breadcrumb.tsx +++ b/packages/components/breadcrumb/src/Breadcrumb.tsx @@ -8,15 +8,20 @@ import { computed, defineComponent, provide, toRef } from 'vue' import { useGlobalConfig } from '@idux/components/config' +import { useThemeToken } from '@idux/components/theme' import { breadcrumbToken } from './token' import { breadcrumbProps } from './types' +import { getThemeTokens } from '../theme' export default defineComponent({ name: 'IxBreadcrumb', props: breadcrumbProps, setup(props, { slots }) { const common = useGlobalConfig('common') + const { globalHashId, hashId, registerToken } = useThemeToken('breadcrumb') + registerToken(getThemeTokens) + const mergedPrefixCls = computed(() => `${common.prefixCls}-breadcrumb`) provide(breadcrumbToken, { @@ -25,7 +30,7 @@ export default defineComponent({ }) return () => ( -