From ea22a8fa8fb863a4c546b9af62025718779d3463 Mon Sep 17 00:00:00 2001 From: saller Date: Thu, 23 Nov 2023 15:58:27 +0800 Subject: [PATCH] feat: dynamic theme with theme tokens is now supported (#1737) BREAKING CHANGE: original css vars and less vars are removed BREAKING CHANGE: original default theme is removed, seer is now default theme BREAKING CHANGE: original style entries is removed, now only index is provided --- .eslintrc.js | 1 + package.json | 6 + packages/cdk/a11y/demo/FocusMonitor.vue | 10 +- packages/cdk/popper/demo/Basic.vue | 4 +- packages/cdk/popper/demo/Placement.vue | 4 +- packages/cdk/popper/demo/Trigger.vue | 12 +- .../collapse-transition/style/index.less | 9 +- .../collapse-transition/style/index.ts | 1 + .../style/themes/default.less | 4 - .../style/themes/default.ts | 1 - .../style/themes/default.variable.less | 1 - .../style/themes/seer.less | 4 - .../collapse-transition/style/themes/seer.ts | 1 - .../style/themes/seer.variable.less | 1 - .../_private/date-panel/src/DatePanel.tsx | 5 +- .../components/_private/input/src/Input.tsx | 5 +- .../loading/style/themes/default.less | 4 - .../_private/loading/style/themes/default.ts | 3 - .../style/themes/default.variable.less | 3 - .../_private/loading/style/themes/seer.less | 4 - .../loading/style/themes/seer.variable.less | 1 - .../components/_private/mask/src/Mask.tsx | 4 +- .../components/_private/mask/style/index.less | 3 +- .../components/_private/mask/style/index.ts | 1 + .../_private/mask/style/themes/default.less | 4 - .../_private/mask/style/themes/default.ts | 1 - .../mask/style/themes/default.variable.less | 1 - .../_private/mask/style/themes/seer.less | 4 - .../_private/mask/style/themes/seer.ts | 1 - .../mask/style/themes/seer.variable.less | 1 - .../_private/overflow/src/Overflow.tsx | 5 +- .../_private/overflow/style/index.less | 1 + .../_private/overflow/style/index.ts | 1 + .../overflow/style/themes/default.less | 4 - .../_private/overflow/style/themes/default.ts | 3 - .../style/themes/default.variable.less | 1 - .../_private/overflow/style/themes/seer.less | 4 - .../overflow/style/themes/seer.variable.less | 1 - .../_private/overlay/src/Overlay.tsx | 14 +- .../_private/overlay/style/index.less | 70 +- .../_private/overlay/style/index.ts | 1 + .../overlay/style/themes/default.less | 4 - .../_private/overlay/style/themes/default.ts | 1 - .../style/themes/default.variable.less | 1 - .../_private/overlay/style/themes/seer.less | 4 - .../_private/overlay/style/themes/seer.ts | 1 - .../overlay/style/themes/seer.variable.less | 1 - .../_private/selector/src/Selector.tsx | 3 + .../_private/selector/style/index.less | 75 +- .../_private/selector/style/index.ts | 7 + .../_private/selector/style/multiple.less | 44 +- .../_private/selector/style/single.less | 14 +- .../selector/style/themes/default.less | 6 - .../_private/selector/style/themes/default.ts | 7 - .../_private/selector/style/themes/seer.less | 6 - .../_private/selector/style/themes/seer.ts | 7 - .../selector/style/themes/seer.variable.less | 1 - .../_private/time-panel/src/TimePanel.tsx | 5 +- .../_private/time-panel/style/index.less | 114 -- .../time-panel/style/themes/default.less | 5 - .../time-panel/style/themes/default.ts | 1 - .../style/themes/default.variable.less | 24 - .../time-panel/style/themes/seer.less | 5 - .../_private/time-panel/style/themes/seer.ts | 1 - .../style/themes/seer.variable.less | 4 - .../_private/trigger/style/index.less | 64 +- .../_private/trigger/style/index.ts | 4 + .../trigger/style/themes/default.less | 5 - .../_private/trigger/style/themes/default.ts | 4 - .../style/themes/default.variable.less | 33 - .../_private/trigger/style/themes/seer.less | 5 - .../_private/trigger/style/themes/seer.ts | 4 - .../trigger/style/themes/seer.variable.less | 6 - .../components/_private/wave/style/index.less | 1 + .../components/_private/wave/style/index.ts | 1 + .../_private/wave/style/themes/default.less | 3 - .../_private/wave/style/themes/default.ts | 2 - .../wave/style/themes/default.variable.less | 0 .../_private/wave/style/themes/seer.less | 4 - .../_private/wave/style/themes/seer.ts | 2 - .../wave/style/themes/seer.variable.less | 1 - packages/components/affix/style/index.less | 1 + packages/components/affix/style/index.ts | 5 + .../affix/style/themes/default.less | 4 - .../components/affix/style/themes/default.ts | 5 - .../affix/style/themes/default.variable.less | 1 - .../components/affix/style/themes/seer.less | 4 - .../components/affix/style/themes/seer.ts | 5 - .../affix/style/themes/seer.variable.less | 1 - packages/components/alert/index.ts | 3 + packages/components/alert/src/Alert.tsx | 7 + packages/components/alert/style/index.less | 35 +- packages/components/alert/style/index.ts | 6 + packages/components/alert/style/mixin.less | 2 +- .../alert/style/themes/default.less | 4 - .../components/alert/style/themes/default.ts | 6 - .../alert/style/themes/default.variable.less | 17 - .../components/alert/style/themes/seer.less | 4 - .../components/alert/style/themes/seer.ts | 6 - .../alert/style/themes/seer.variable.less | 7 - packages/components/alert/theme/default.css | 10 + packages/components/alert/theme/default.ts | 31 + packages/components/alert/theme/index.ts | 16 + packages/components/alert/theme/tokens.ts | 19 + packages/components/anchor/index.ts | 3 + packages/components/anchor/src/Anchor.tsx | 7 +- packages/components/anchor/src/AnchorLink.tsx | 7 +- packages/components/anchor/style/index.less | 21 +- packages/components/anchor/style/index.ts | 5 + .../anchor/style/themes/default.less | 4 - .../components/anchor/style/themes/default.ts | 5 - .../anchor/style/themes/default.variable.less | 4 - .../components/anchor/style/themes/seer.less | 4 - .../components/anchor/style/themes/seer.ts | 5 - .../anchor/style/themes/seer.variable.less | 1 - packages/components/anchor/theme/default.css | 5 + packages/components/anchor/theme/default.ts | 14 + packages/components/anchor/theme/index.ts | 16 + packages/components/anchor/theme/tokens.ts | 11 + packages/components/avatar/demo/Type.vue | 4 +- packages/components/avatar/index.ts | 3 + packages/components/avatar/src/Avatar.tsx | 11 +- packages/components/avatar/style/index.less | 19 +- packages/components/avatar/style/index.ts | 5 + .../avatar/style/themes/default.less | 4 - .../components/avatar/style/themes/default.ts | 5 - .../avatar/style/themes/default.variable.less | 7 - .../components/avatar/style/themes/seer.less | 4 - .../components/avatar/style/themes/seer.ts | 5 - .../avatar/style/themes/seer.variable.less | 3 - packages/components/avatar/theme/default.css | 7 + packages/components/avatar/theme/default.ts | 18 + packages/components/avatar/theme/index.ts | 16 + packages/components/avatar/theme/tokens.ts | 13 + packages/components/back-top/index.ts | 3 + packages/components/back-top/src/BackTop.tsx | 11 +- packages/components/back-top/style/index.less | 17 +- packages/components/back-top/style/index.ts | 5 + .../back-top/style/themes/default.less | 4 - .../back-top/style/themes/default.ts | 5 - .../style/themes/default.variable.less | 9 - .../back-top/style/themes/seer.less | 4 - .../components/back-top/style/themes/seer.ts | 5 - .../back-top/style/themes/seer.variable.less | 1 - .../components/back-top/theme/default.css | 10 + packages/components/back-top/theme/default.ts | 23 + packages/components/back-top/theme/index.ts | 16 + packages/components/back-top/theme/tokens.ts | 16 + packages/components/badge/index.ts | 3 + packages/components/badge/src/Badge.tsx | 7 + packages/components/badge/style/index.less | 41 +- .../badge/style/{themes/seer.ts => index.ts} | 2 +- .../badge/style/themes/default.less | 4 - .../components/badge/style/themes/default.ts | 3 - .../badge/style/themes/default.variable.less | 9 - .../components/badge/style/themes/seer.less | 4 - .../badge/style/themes/seer.variable.less | 1 - packages/components/badge/theme/default.css | 5 + packages/components/badge/theme/default.ts | 14 + packages/components/badge/theme/index.ts | 16 + packages/components/badge/theme/tokens.ts | 11 + packages/components/breadcrumb/index.ts | 3 + .../components/breadcrumb/src/Breadcrumb.tsx | 7 +- .../components/breadcrumb/style/index.less | 20 +- .../seer.ts => breadcrumb/style/index.ts} | 2 +- .../breadcrumb/style/themes/default.less | 4 - .../breadcrumb/style/themes/default.ts | 3 - .../style/themes/default.variable.less | 9 - .../breadcrumb/style/themes/seer.less | 4 - .../style/themes/seer.variable.less | 6 - .../components/breadcrumb/theme/default.css | 10 + .../components/breadcrumb/theme/default.ts | 21 + packages/components/breadcrumb/theme/index.ts | 16 + .../components/breadcrumb/theme/tokens.ts | 16 + packages/components/button/index.ts | 3 + packages/components/button/src/Button.tsx | 7 + packages/components/button/style/index.less | 138 +- packages/components/button/style/index.ts | 6 + .../button/style/themes/default.less | 4 - .../components/button/style/themes/default.ts | 6 - .../button/style/themes/default.variable.less | 47 - .../components/button/style/themes/seer.less | 4 - .../components/button/style/themes/seer.ts | 6 - .../button/style/themes/seer.variable.less | 15 - packages/components/button/theme/default.css | 45 + packages/components/button/theme/default.ts | 97 ++ packages/components/button/theme/index.ts | 16 + packages/components/button/theme/tokens.ts | 60 + packages/components/card/index.ts | 3 + packages/components/card/src/Card.tsx | 7 + packages/components/card/src/CardGrid.tsx | 7 + packages/components/card/style/index.less | 103 +- packages/components/card/style/index.ts | 8 + .../components/card/style/themes/default.less | 4 - .../components/card/style/themes/default.ts | 8 - .../card/style/themes/default.variable.less | 31 - .../components/card/style/themes/seer.less | 4 - packages/components/card/style/themes/seer.ts | 8 - .../card/style/themes/seer.variable.less | 6 - packages/components/card/theme/default.css | 17 + packages/components/card/theme/default.ts | 34 + packages/components/card/theme/index.ts | 16 + packages/components/card/theme/tokens.ts | 28 + packages/components/carousel/index.ts | 3 + packages/components/carousel/src/Carousel.tsx | 7 + packages/components/carousel/style/index.less | 41 +- packages/components/carousel/style/index.ts | 5 + .../carousel/style/themes/default.less | 4 - .../carousel/style/themes/default.ts | 5 - .../style/themes/default.variable.less | 16 - .../carousel/style/themes/seer.less | 4 - .../components/carousel/style/themes/seer.ts | 5 - .../carousel/style/themes/seer.variable.less | 1 - .../components/carousel/theme/default.css | 14 + packages/components/carousel/theme/default.ts | 28 + packages/components/carousel/theme/index.ts | 16 + packages/components/carousel/theme/tokens.ts | 23 + packages/components/cascader/index.ts | 3 + packages/components/cascader/src/Cascader.tsx | 7 + .../components/cascader/src/panel/Panel.tsx | 7 +- packages/components/cascader/style/index.less | 56 +- packages/components/cascader/style/index.ts | 9 + .../cascader/style/themes/default.less | 6 - .../cascader/style/themes/default.ts | 9 - .../style/themes/default.variable.less | 27 - .../cascader/style/themes/seer.less | 6 - .../components/cascader/style/themes/seer.ts | 9 - .../cascader/style/themes/seer.variable.less | 5 - .../components/cascader/theme/default.css | 12 + packages/components/cascader/theme/default.ts | 26 + packages/components/cascader/theme/index.ts | 16 + packages/components/cascader/theme/tokens.ts | 20 + packages/components/checkbox/index.ts | 3 + packages/components/checkbox/src/Checkbox.tsx | 20 +- .../components/checkbox/src/CheckboxGroup.tsx | 4 + packages/components/checkbox/style/index.less | 67 +- packages/components/checkbox/style/index.ts | 4 + .../checkbox/style/themes/default.less | 5 - .../checkbox/style/themes/default.ts | 4 - .../style/themes/default.variable.less | 14 - .../checkbox/style/themes/seer.less | 5 - .../components/checkbox/style/themes/seer.ts | 4 - .../checkbox/style/themes/seer.variable.less | 5 - .../components/checkbox/theme/default.css | 6 + packages/components/checkbox/theme/default.ts | 17 + packages/components/checkbox/theme/index.ts | 16 + packages/components/checkbox/theme/tokens.ts | 12 + packages/components/collapse/index.ts | 3 + packages/components/collapse/src/Collapse.tsx | 7 + .../components/collapse/src/CollapsePanel.tsx | 7 + packages/components/collapse/style/index.less | 34 +- packages/components/collapse/style/index.ts | 7 + .../collapse/style/themes/default.less | 4 - .../collapse/style/themes/default.ts | 7 - .../style/themes/default.variable.less | 13 - .../collapse/style/themes/seer.less | 4 - .../components/collapse/style/themes/seer.ts | 7 - .../collapse/style/themes/seer.variable.less | 5 - .../components/collapse/theme/default.css | 9 + packages/components/collapse/theme/default.ts | 22 + packages/components/collapse/theme/index.ts | 16 + packages/components/collapse/theme/tokens.ts | 17 + packages/components/comment/index.ts | 3 + packages/components/comment/src/Comment.tsx | 7 +- packages/components/comment/style/index.less | 48 +- .../themes/seer.ts => comment/style/index.ts} | 2 +- .../comment/style/themes/default.less | 4 - .../comment/style/themes/default.ts | 3 - .../style/themes/default.variable.less | 15 - .../components/comment/style/themes/seer.less | 4 - .../components/comment/style/themes/seer.ts | 3 - .../comment/style/themes/seer.variable.less | 1 - packages/components/comment/theme/default.css | 8 + packages/components/comment/theme/default.ts | 19 + packages/components/comment/theme/index.ts | 16 + packages/components/comment/theme/tokens.ts | 14 + packages/components/config/index.ts | 1 - .../components/config/src/defaultConfig.ts | 50 +- packages/components/config/src/seerConfig.ts | 71 - packages/components/config/src/types.ts | 8 +- packages/components/date-picker/index.ts | 3 + .../components/date-picker/src/DatePicker.tsx | 9 +- .../date-picker/src/DateRangePicker.tsx | 9 +- .../date-picker/src/panel/Panel.tsx | 14 +- .../date-picker/src/panel/RangePanel.tsx | 10 +- .../date-picker/src/trigger/RangeTrigger.tsx | 11 +- .../date-picker/src/trigger/Trigger.tsx | 11 +- .../components/date-picker/style/index.less | 56 +- .../components/date-picker/style/index.ts | 8 + .../components/date-picker/style/mixin.less | 24 +- .../components/date-picker/style/panel.less | 176 +-- .../date-picker/style/themes/default.less | 5 - .../date-picker/style/themes/default.ts | 8 - .../style/themes/default.variable.less | 105 -- .../date-picker/style/themes/seer.less | 5 - .../date-picker/style/themes/seer.ts | 8 - .../style/themes/seer.variable.less | 8 - .../components/date-picker/theme/default.css | 41 + .../components/date-picker/theme/default.ts | 75 ++ .../components/date-picker/theme/index.ts | 16 + .../components/date-picker/theme/tokens.ts | 55 + packages/components/default.css | 277 ++++ packages/components/default.full.css | 1061 +++++++++++++++ packages/components/default.full.less | 4 - packages/components/default.less | 76 -- packages/components/desc/index.ts | 3 + packages/components/desc/src/Desc.tsx | 7 + packages/components/desc/src/DescItem.tsx | 1 + packages/components/desc/style/index.less | 9 +- packages/components/desc/style/index.ts | 5 + .../components/desc/style/themes/default.less | 4 - .../components/desc/style/themes/default.ts | 5 - .../desc/style/themes/default.variable.less | 9 - .../components/desc/style/themes/seer.less | 4 - packages/components/desc/style/themes/seer.ts | 5 - .../desc/style/themes/seer.variable.less | 4 - packages/components/desc/theme/default.css | 10 + packages/components/desc/theme/default.ts | 23 + packages/components/desc/theme/index.ts | 16 + packages/components/desc/theme/tokens.ts | 18 + packages/components/divider/index.ts | 3 + packages/components/divider/src/Divider.tsx | 7 + packages/components/divider/style/index.less | 33 +- .../themes/seer.ts => divider/style/index.ts} | 2 +- .../divider/style/themes/default.less | 4 - .../divider/style/themes/default.ts | 3 - .../style/themes/default.variable.less | 15 - .../components/divider/style/themes/seer.less | 4 - .../components/divider/style/themes/seer.ts | 3 - .../divider/style/themes/seer.variable.less | 5 - packages/components/divider/theme/default.css | 14 + packages/components/divider/theme/default.ts | 39 + packages/components/divider/theme/index.ts | 16 + packages/components/divider/theme/tokens.ts | 23 + packages/components/drawer/index.ts | 3 + packages/components/drawer/src/Drawer.tsx | 5 + .../components/drawer/src/DrawerWrapper.tsx | 4 + packages/components/drawer/style/index.less | 13 +- packages/components/drawer/style/index.ts | 7 + .../drawer/style/themes/default.less | 4 - .../components/drawer/style/themes/default.ts | 7 - .../drawer/style/themes/default.variable.less | 3 - .../components/drawer/style/themes/seer.less | 4 - .../components/drawer/style/themes/seer.ts | 7 - .../drawer/style/themes/seer.variable.less | 1 - packages/components/drawer/theme/default.css | 9 + packages/components/drawer/theme/default.ts | 15 + packages/components/drawer/theme/index.ts | 16 + packages/components/drawer/theme/tokens.ts | 12 + packages/components/dropdown/index.ts | 3 + packages/components/dropdown/src/Dropdown.tsx | 7 +- packages/components/dropdown/style/index.less | 7 +- packages/components/dropdown/style/index.ts | 5 + .../dropdown/style/themes/default.less | 5 - .../dropdown/style/themes/default.ts | 5 - .../style/themes/default.variable.less | 6 - .../dropdown/style/themes/seer.less | 5 - .../components/dropdown/style/themes/seer.ts | 5 - .../dropdown/style/themes/seer.variable.less | 3 - .../components/dropdown/theme/default.css | 5 + packages/components/dropdown/theme/default.ts | 16 + packages/components/dropdown/theme/index.ts | 16 + packages/components/dropdown/theme/tokens.ts | 11 + packages/components/empty/index.ts | 3 + packages/components/empty/src/Empty.tsx | 7 + packages/components/empty/style/index.less | 9 +- packages/components/empty/style/index.ts | 5 + .../empty/style/themes/default.less | 4 - .../components/empty/style/themes/default.ts | 5 - .../empty/style/themes/default.variable.less | 4 - .../components/empty/style/themes/seer.less | 4 - .../components/empty/style/themes/seer.ts | 5 - .../empty/style/themes/seer.variable.less | 1 - packages/components/empty/theme/default.css | 6 + packages/components/empty/theme/default.ts | 17 + packages/components/empty/theme/index.ts | 16 + packages/components/empty/theme/tokens.ts | 12 + packages/components/form/index.ts | 3 + packages/components/form/src/Form.tsx | 7 + packages/components/form/src/FormItem.tsx | 34 +- packages/components/form/style/index.less | 51 +- packages/components/form/style/index.ts | 7 + packages/components/form/style/layout.less | 10 +- packages/components/form/style/mixin.less | 9 +- packages/components/form/style/status.less | 12 +- .../components/form/style/themes/default.less | 4 - .../components/form/style/themes/default.ts | 7 - .../form/style/themes/default.variable.less | 108 -- .../components/form/style/themes/seer.less | 4 - packages/components/form/style/themes/seer.ts | 7 - .../form/style/themes/seer.variable.less | 33 - packages/components/form/theme/default.css | 12 + packages/components/form/theme/default.ts | 28 + packages/components/form/theme/index.ts | 14 + packages/components/form/theme/tokens.ts | 22 + packages/components/grid/demo/Gutter.vue | 6 +- packages/components/grid/src/Col.tsx | 10 +- packages/components/grid/src/Row.tsx | 12 +- packages/components/grid/style/index.less | 20 + packages/components/grid/style/index.ts | 1 + .../components/grid/style/themes/default.less | 4 - .../components/grid/style/themes/default.ts | 3 - .../grid/style/themes/default.variable.less | 1 - .../components/grid/style/themes/seer.less | 4 - packages/components/grid/style/themes/seer.ts | 3 - .../grid/style/themes/seer.variable.less | 1 - packages/components/header/index.ts | 4 + packages/components/header/src/Header.tsx | 7 + packages/components/header/style/index.less | 77 +- packages/components/header/style/index.ts | 6 + .../header/style/themes/default.less | 4 - .../components/header/style/themes/default.ts | 6 - .../header/style/themes/default.variable.less | 28 - .../components/header/style/themes/seer.less | 4 - .../components/header/style/themes/seer.ts | 6 - .../header/style/themes/seer.variable.less | 1 - packages/components/header/theme/default.css | 18 + packages/components/header/theme/default.ts | 46 + packages/components/header/theme/index.ts | 16 + packages/components/header/theme/tokens.ts | 28 + packages/components/icon/demo/All.vue | 8 +- packages/components/icon/style/index.less | 3 +- packages/components/icon/style/index.ts | 1 + .../components/icon/style/themes/default.less | 4 - .../components/icon/style/themes/default.ts | 3 - .../icon/style/themes/default.variable.less | 1 - .../components/icon/style/themes/seer.less | 4 - packages/components/icon/style/themes/seer.ts | 3 - .../icon/style/themes/seer.variable.less | 1 - packages/components/image/index.ts | 4 + .../image/style/{image.less => index.less} | 17 +- packages/components/image/style/index.ts | 3 + .../image/style/themes/default.less | 5 - .../components/image/style/themes/default.ts | 3 - .../image/style/themes/default.variable.less | 19 - .../components/image/style/themes/seer.less | 5 - .../components/image/style/themes/seer.ts | 3 - .../image/style/themes/seer.variable.less | 1 - packages/components/image/style/viewer.less | 24 +- packages/components/image/theme/default.css | 17 + packages/components/image/theme/default.ts | 32 + packages/components/image/theme/index.ts | 16 + packages/components/image/theme/tokens.ts | 27 + packages/components/index.full.less | 4 + packages/components/index.less | 74 + .../components/input-number/style/index.less | 11 +- .../components/input-number/style/index.ts | 6 + .../input-number/style/themes/default.less | 6 - .../input-number/style/themes/default.ts | 6 - .../style/themes/default.variable.less | 0 .../input-number/style/themes/seer.less | 6 - .../input-number/style/themes/seer.ts | 6 - .../style/themes/seer.variable.less | 1 - packages/components/input/style/index.less | 59 +- packages/components/input/style/index.ts | 5 + packages/components/input/style/mixin.less | 16 +- .../input/style/themes/default.less | 5 - .../components/input/style/themes/default.ts | 5 - .../input/style/themes/default.variable.less | 1 - .../components/input/style/themes/seer.less | 5 - .../components/input/style/themes/seer.ts | 5 - .../input/style/themes/seer.variable.less | 1 - packages/components/layout/index.ts | 4 + packages/components/layout/src/Layout.tsx | 7 + .../components/layout/src/LayoutContent.tsx | 4 +- .../components/layout/src/LayoutFooter.tsx | 4 +- .../components/layout/src/LayoutHeader.tsx | 4 +- .../components/layout/src/LayoutSider.tsx | 4 + .../layout/src/LayoutSiderTrigger.tsx | 4 + packages/components/layout/style/index.less | 13 +- packages/components/layout/style/index.ts | 5 + .../layout/style/themes/default.less | 5 - .../components/layout/style/themes/default.ts | 5 - .../layout/style/themes/default.variable.less | 2 - .../components/layout/style/themes/seer.less | 5 - .../components/layout/style/themes/seer.ts | 5 - .../layout/style/themes/seer.variable.less | 4 - packages/components/layout/theme/default.css | 5 + packages/components/layout/theme/default.ts | 14 + packages/components/layout/theme/index.ts | 16 + packages/components/layout/theme/tokens.ts | 11 + packages/components/list/src/List.tsx | 3 + packages/components/list/style/index.less | 15 +- packages/components/list/style/index.ts | 7 + .../components/list/style/themes/default.less | 4 - .../components/list/style/themes/default.ts | 7 - .../list/style/themes/default.variable.less | 11 - .../components/list/style/themes/seer.less | 4 - packages/components/list/style/themes/seer.ts | 7 - .../list/style/themes/seer.variable.less | 1 - packages/components/loading-bar/index.ts | 4 + .../loading-bar/src/LoadingBarProvider.tsx | 7 + .../components/loading-bar/style/index.less | 7 +- .../components/loading-bar/style/index.ts | 3 + .../loading-bar/style/themes/default.less | 4 - .../loading-bar/style/themes/default.ts | 3 - .../style/themes/default.variable.less | 3 - .../loading-bar/style/themes/seer.less | 4 - .../loading-bar/style/themes/seer.ts | 2 - .../style/themes/seer.variable.less | 1 - .../components/loading-bar/theme/default.css | 5 + .../components/loading-bar/theme/default.ts | 16 + .../components/loading-bar/theme/index.ts | 16 + .../components/loading-bar/theme/tokens.ts | 11 + packages/components/menu/index.ts | 5 +- packages/components/menu/src/Menu.tsx | 7 + .../menu/src/contents/menu-sub/MenuSub.tsx | 4 + packages/components/menu/style/collapsed.less | 8 +- packages/components/menu/style/dark.less | 32 +- packages/components/menu/style/index.less | 28 +- packages/components/menu/style/index.ts | 6 + packages/components/menu/style/level.less | 14 +- packages/components/menu/style/light.less | 33 +- packages/components/menu/style/mode.less | 20 +- .../components/menu/style/themes/default.less | 4 - .../components/menu/style/themes/default.ts | 6 - .../menu/style/themes/default.variable.less | 39 - .../components/menu/style/themes/seer.less | 4 - packages/components/menu/style/themes/seer.ts | 6 - .../menu/style/themes/seer.variable.less | 16 - packages/components/menu/theme/default.css | 39 + packages/components/menu/theme/default.ts | 78 ++ packages/components/menu/theme/index.ts | 16 + packages/components/menu/theme/tokens.ts | 54 + packages/components/message/index.ts | 4 + packages/components/message/src/Message.tsx | 7 +- .../message/src/MessageProvider.tsx | 7 +- packages/components/message/style/index.less | 35 +- packages/components/message/style/index.ts | 5 + .../message/style/themes/default.less | 4 - .../message/style/themes/default.ts | 5 - .../style/themes/default.variable.less | 22 - .../components/message/style/themes/seer.less | 4 - .../components/message/style/themes/seer.ts | 5 - .../message/style/themes/seer.variable.less | 5 - packages/components/message/theme/default.css | 13 + packages/components/message/theme/default.ts | 26 + packages/components/message/theme/index.ts | 18 + packages/components/message/theme/tokens.ts | 21 + .../components/message/theme/transforms.ts | 12 + packages/components/modal/index.ts | 4 + packages/components/modal/src/Modal.tsx | 5 + .../components/modal/src/ModalWrapper.tsx | 4 + packages/components/modal/style/index.less | 25 +- packages/components/modal/style/index.ts | 8 + .../modal/style/themes/default.less | 4 - .../components/modal/style/themes/default.ts | 8 - .../modal/style/themes/default.variable.less | 16 - .../components/modal/style/themes/seer.less | 4 - .../components/modal/style/themes/seer.ts | 8 - .../modal/style/themes/seer.variable.less | 11 - packages/components/modal/theme/default.css | 8 + packages/components/modal/theme/default.ts | 20 + packages/components/modal/theme/index.ts | 16 + packages/components/modal/theme/tokens.ts | 15 + packages/components/notification/index.ts | 4 + .../notification/src/Notification.tsx | 21 +- .../components/notification/style/index.less | 59 +- .../components/notification/style/index.ts | 5 + .../notification/style/themes/default.less | 4 - .../notification/style/themes/default.ts | 5 - .../style/themes/default.variable.less | 36 - .../notification/style/themes/seer.less | 4 - .../notification/style/themes/seer.ts | 5 - .../style/themes/seer.variable.less | 16 - .../components/notification/theme/default.css | 21 + .../components/notification/theme/default.ts | 49 + .../components/notification/theme/index.ts | 18 + .../components/notification/theme/tokens.ts | 33 + .../notification/theme/transforms.ts | 13 + packages/components/package.json | 2 + packages/components/pagination/index.ts | 4 + .../components/pagination/src/Pagination.tsx | 7 + .../components/pagination/style/index.less | 37 +- packages/components/pagination/style/index.ts | 7 + .../pagination/style/themes/default.less | 4 - .../pagination/style/themes/default.ts | 7 - .../style/themes/default.variable.less | 28 - .../pagination/style/themes/seer.less | 4 - .../pagination/style/themes/seer.ts | 7 - .../style/themes/seer.variable.less | 13 - .../components/pagination/theme/default.css | 13 + .../components/pagination/theme/default.ts | 29 + packages/components/pagination/theme/index.ts | 16 + .../components/pagination/theme/tokens.ts | 22 + packages/components/popconfirm/index.ts | 4 + .../components/popconfirm/src/Popconfirm.tsx | 7 +- .../components/popconfirm/style/index.less | 25 +- packages/components/popconfirm/style/index.ts | 7 + .../popconfirm/style/themes/default.less | 4 - .../popconfirm/style/themes/default.ts | 7 - .../style/themes/default.variable.less | 14 - .../popconfirm/style/themes/seer.less | 4 - .../popconfirm/style/themes/seer.ts | 7 - .../style/themes/seer.variable.less | 8 - .../components/popconfirm/theme/default.css | 8 + .../components/popconfirm/theme/default.ts | 19 + packages/components/popconfirm/theme/index.ts | 16 + .../components/popconfirm/theme/tokens.ts | 15 + packages/components/popover/index.ts | 4 + packages/components/popover/src/Popover.tsx | 7 +- packages/components/popover/style/index.less | 14 +- packages/components/popover/style/index.ts | 5 + .../popover/style/themes/default.less | 5 - .../popover/style/themes/default.ts | 5 - .../style/themes/default.variable.less | 7 - .../components/popover/style/themes/seer.less | 4 - .../components/popover/style/themes/seer.ts | 5 - .../popover/style/themes/seer.variable.less | 5 - packages/components/popover/theme/default.css | 6 + packages/components/popover/theme/default.ts | 18 + packages/components/popover/theme/index.ts | 16 + packages/components/popover/theme/tokens.ts | 13 + packages/components/progress/index.ts | 4 + packages/components/progress/src/Progress.tsx | 7 + packages/components/progress/style/index.less | 71 +- packages/components/progress/style/index.ts | 5 + .../progress/style/themes/default.less | 4 - .../progress/style/themes/default.ts | 5 - .../style/themes/default.variable.less | 20 - .../progress/style/themes/seer.less | 4 - .../components/progress/style/themes/seer.ts | 5 - .../progress/style/themes/seer.variable.less | 4 - .../components/progress/theme/default.css | 15 + packages/components/progress/theme/default.ts | 30 + packages/components/progress/theme/index.ts | 16 + packages/components/progress/theme/tokens.ts | 25 + packages/components/radio/index.ts | 4 + packages/components/radio/src/Radio.tsx | 9 + packages/components/radio/src/RadioGroup.tsx | 8 +- packages/components/radio/style/index.less | 53 +- packages/components/radio/style/index.ts | 4 + .../radio/style/themes/default.less | 5 - .../components/radio/style/themes/default.ts | 4 - .../radio/style/themes/default.variable.less | 13 - .../components/radio/style/themes/seer.less | 5 - .../components/radio/style/themes/seer.ts | 4 - .../radio/style/themes/seer.variable.less | 4 - packages/components/radio/theme/default.css | 7 + packages/components/radio/theme/default.ts | 18 + packages/components/radio/theme/index.ts | 16 + packages/components/radio/theme/tokens.ts | 13 + packages/components/rate/index.ts | 4 + packages/components/rate/src/Rate.tsx | 7 + packages/components/rate/style/index.less | 21 +- packages/components/rate/style/index.ts | 6 + .../components/rate/style/themes/default.less | 5 - .../components/rate/style/themes/default.ts | 6 - .../rate/style/themes/default.variable.less | 9 - .../components/rate/style/themes/seer.less | 5 - packages/components/rate/style/themes/seer.ts | 6 - .../rate/style/themes/seer.variable.less | 4 - packages/components/rate/theme/default.css | 10 + packages/components/rate/theme/default.ts | 23 + packages/components/rate/theme/index.ts | 16 + packages/components/rate/theme/tokens.ts | 16 + packages/components/result/demo/Error.vue | 1 - packages/components/result/index.ts | 4 + packages/components/result/src/Result.tsx | 29 +- packages/components/result/style/index.less | 37 +- packages/components/result/style/index.ts | 5 + packages/components/result/style/mixins.less | 8 +- .../result/style/themes/default.less | 4 - .../components/result/style/themes/default.ts | 5 - .../result/style/themes/default.variable.less | 22 - .../components/result/style/themes/seer.less | 4 - .../components/result/style/themes/seer.ts | 5 - .../result/style/themes/seer.variable.less | 3 - packages/components/result/theme/default.css | 13 + packages/components/result/theme/default.ts | 25 + packages/components/result/theme/index.ts | 16 + packages/components/result/theme/tokens.ts | 20 + packages/components/seer.full.less | 4 - packages/components/seer.less | 76 -- packages/components/select/index.ts | 4 + packages/components/select/src/Select.tsx | 7 + .../components/select/src/panel/Panel.tsx | 7 + packages/components/select/style/index.less | 60 +- packages/components/select/style/index.ts | 9 + packages/components/select/style/mixin.less | 11 + .../select/style/themes/default.less | 5 - .../components/select/style/themes/default.ts | 9 - .../select/style/themes/default.variable.less | 71 - .../components/select/style/themes/seer.less | 5 - .../components/select/style/themes/seer.ts | 9 - .../select/style/themes/seer.variable.less | 30 - packages/components/select/theme/default.css | 13 + packages/components/select/theme/default.ts | 35 + packages/components/select/theme/index.ts | 16 + packages/components/select/theme/tokens.ts | 21 + packages/components/skeleton/index.ts | 4 + packages/components/skeleton/src/Skeleton.tsx | 7 +- packages/components/skeleton/style/index.less | 7 +- packages/components/skeleton/style/index.ts | 3 + .../skeleton/style/themes/default.less | 4 - .../skeleton/style/themes/default.ts | 3 - .../style/themes/default.variable.less | 7 - .../skeleton/style/themes/seer.less | 4 - .../components/skeleton/style/themes/seer.ts | 3 - .../skeleton/style/themes/seer.variable.less | 1 - .../components/skeleton/theme/default.css | 7 + packages/components/skeleton/theme/default.ts | 18 + packages/components/skeleton/theme/index.ts | 16 + packages/components/skeleton/theme/tokens.ts | 13 + packages/components/slider/index.ts | 4 + packages/components/slider/src/Slider.tsx | 7 + packages/components/slider/style/index.less | 61 +- packages/components/slider/style/index.ts | 3 + .../slider/style/themes/default.less | 4 - .../components/slider/style/themes/default.ts | 3 - .../slider/style/themes/default.variable.less | 32 - .../components/slider/style/themes/seer.less | 4 - .../components/slider/style/themes/seer.ts | 3 - .../slider/style/themes/seer.variable.less | 7 - packages/components/slider/theme/default.css | 23 + packages/components/slider/theme/default.ts | 41 + packages/components/slider/theme/index.ts | 16 + packages/components/slider/theme/tokens.ts | 34 + packages/components/space/index.ts | 4 + packages/components/space/src/Space.tsx | 7 + packages/components/space/style/index.less | 3 +- packages/components/space/style/index.ts | 3 + .../space/style/themes/default.less | 4 - .../components/space/style/themes/default.ts | 3 - .../space/style/themes/default.variable.less | 1 - .../components/space/style/themes/seer.less | 4 - .../components/space/style/themes/seer.ts | 3 - .../space/style/themes/seer.variable.less | 1 - packages/components/space/theme/default.css | 4 + packages/components/space/theme/default.ts | 16 + packages/components/space/theme/index.ts | 16 + packages/components/space/theme/seer.css | 3 + packages/components/space/theme/tokens.ts | 10 + packages/components/spin/index.ts | 4 + packages/components/spin/src/Spin.tsx | 7 +- packages/components/spin/style/index.less | 30 +- packages/components/spin/style/index.ts | 5 + .../index.less => spin/style/loading.less} | 10 +- .../components/spin/style/themes/default.less | 4 - .../components/spin/style/themes/default.ts | 6 - .../spin/style/themes/default.variable.less | 10 - .../components/spin/style/themes/seer.less | 4 - packages/components/spin/style/themes/seer.ts | 6 - .../spin/style/themes/seer.variable.less | 1 - packages/components/spin/theme/default.css | 14 + packages/components/spin/theme/default.ts | 32 + packages/components/spin/theme/index.ts | 16 + packages/components/spin/theme/seer.css | 13 + packages/components/spin/theme/tokens.ts | 23 + packages/components/statistic/index.ts | 4 + .../components/statistic/src/Statistic.tsx | 7 +- .../components/statistic/style/index.less | 39 +- packages/components/statistic/style/index.ts | 3 + .../statistic/style/themes/default.less | 5 - .../statistic/style/themes/default.ts | 3 - .../style/themes/default.variable.less | 11 - .../statistic/style/themes/seer.less | 5 - .../components/statistic/style/themes/seer.ts | 3 - .../statistic/style/themes/seer.variable.less | 3 - .../components/statistic/theme/default.css | 8 + .../components/statistic/theme/default.ts | 20 + packages/components/statistic/theme/index.ts | 16 + packages/components/statistic/theme/tokens.ts | 15 + packages/components/stepper/index.ts | 4 + packages/components/stepper/src/Stepper.tsx | 7 + packages/components/stepper/style/index.less | 17 +- packages/components/stepper/style/index.ts | 5 + packages/components/stepper/style/mixin.less | 17 + packages/components/stepper/style/size.less | 52 +- .../stepper/style/themes/default.less | 5 - .../stepper/style/themes/default.ts | 5 - .../style/themes/default.variable.less | 38 - .../components/stepper/style/themes/seer.less | 5 - .../components/stepper/style/themes/seer.ts | 5 - .../stepper/style/themes/seer.variable.less | 16 - packages/components/stepper/theme/default.css | 18 + packages/components/stepper/theme/default.ts | 34 + packages/components/stepper/theme/index.ts | 16 + packages/components/stepper/theme/tokens.ts | 28 + ...-scroll.default.less => reset-scroll.less} | 2 +- .../style/core/reset-scroll.seer.less | 4 - .../components/style/core/reset.default.less | 2 - packages/components/style/core/reset.less | 18 +- .../components/style/core/reset.seer.less | 2 - .../components/style/mixins/placeholder.less | 2 +- packages/components/style/mixins/reset.less | 34 +- packages/components/style/motion/fade.less | 12 +- packages/components/style/motion/move.less | 6 +- packages/components/style/motion/slide.less | 12 +- packages/components/style/motion/zoom.less | 6 +- packages/components/style/themes/dark.less | 245 ---- packages/components/style/themes/default.less | 163 --- packages/components/style/themes/seer.less | 60 - .../components/style/variable/animation.less | 32 +- .../components/style/variable/border.less | 16 - .../style/variable/color/bezierEasing.less | 110 -- .../style/variable/color/color.less | 334 ----- .../style/variable/color/colorPalette.less | 82 -- .../style/variable/color/tinyColor.less | 1185 ----------------- packages/components/style/variable/font.less | 22 - .../components/style/variable/height.less | 17 - packages/components/style/variable/index.less | 4 - .../components/style/variable/prefix.less | 1 - .../components/style/variable/spacing.less | 29 - packages/components/style/variable/width.less | 5 - .../components/style/variable/zindex.less | 14 - packages/components/switch/index.ts | 4 + packages/components/switch/src/Switch.tsx | 7 + packages/components/switch/style/index.less | 37 +- packages/components/switch/style/index.ts | 5 + packages/components/switch/style/mixin.less | 6 +- .../switch/style/themes/default.less | 5 - .../components/switch/style/themes/default.ts | 5 - .../switch/style/themes/default.variable.less | 23 - .../components/switch/style/themes/seer.less | 5 - .../components/switch/style/themes/seer.ts | 5 - .../switch/style/themes/seer.variable.less | 4 - packages/components/switch/theme/default.css | 16 + packages/components/switch/theme/default.ts | 34 + packages/components/switch/theme/index.ts | 16 + packages/components/switch/theme/tokens.ts | 26 + packages/components/table/index.ts | 4 + packages/components/table/src/Table.tsx | 18 +- packages/components/table/style/border.less | 2 +- .../components/table/style/expandable.less | 22 +- packages/components/table/style/fixed.less | 6 +- packages/components/table/style/index.less | 23 +- packages/components/table/style/index.ts | 14 + packages/components/table/style/radius.less | 4 +- .../components/table/style/selectable.less | 8 +- packages/components/table/style/size.less | 12 +- .../table/style/themes/default.less | 4 - .../components/table/style/themes/default.ts | 14 - .../table/style/themes/default.variable.less | 35 - .../components/table/style/themes/seer.less | 4 - .../components/table/style/themes/seer.ts | 14 - .../table/style/themes/seer.variable.less | 19 - packages/components/table/style/triggers.less | 10 +- packages/components/table/theme/default.css | 24 + packages/components/table/theme/default.ts | 57 + packages/components/table/theme/index.ts | 16 + packages/components/table/theme/tokens.ts | 36 + packages/components/tabs/index.ts | 4 + packages/components/tabs/src/Tabs.tsx | 7 + packages/components/tabs/style/index.less | 121 +- packages/components/tabs/style/index.ts | 5 + .../components/tabs/style/themes/default.less | 4 - .../components/tabs/style/themes/default.ts | 5 - .../tabs/style/themes/default.variable.less | 28 - .../components/tabs/style/themes/seer.less | 4 - packages/components/tabs/style/themes/seer.ts | 5 - .../tabs/style/themes/seer.variable.less | 4 - packages/components/tabs/theme/default.css | 12 + packages/components/tabs/theme/default.ts | 26 + packages/components/tabs/theme/index.ts | 16 + packages/components/tabs/theme/tokens.ts | 21 + packages/components/tag/index.ts | 4 + packages/components/tag/src/Tag.tsx | 25 +- packages/components/tag/src/types.ts | 4 - packages/components/tag/style/index.less | 58 +- packages/components/tag/style/index.ts | 6 + .../components/tag/style/themes/default.less | 4 - .../components/tag/style/themes/default.ts | 6 - .../tag/style/themes/default.variable.less | 38 - .../components/tag/style/themes/seer.less | 4 - packages/components/tag/style/themes/seer.ts | 6 - .../tag/style/themes/seer.variable.less | 16 - packages/components/tag/theme/default.css | 15 + packages/components/tag/theme/default.ts | 39 + packages/components/tag/theme/index.ts | 16 + packages/components/tag/theme/tokens.ts | 25 + packages/components/text/src/Text.tsx | 3 + packages/components/text/style/index.less | 7 +- packages/components/text/style/index.ts | 5 + .../components/text/style/themes/default.less | 4 - .../components/text/style/themes/default.ts | 5 - .../text/style/themes/default.variable.less | 4 - .../components/text/style/themes/seer.less | 4 - packages/components/text/style/themes/seer.ts | 5 - .../text/style/themes/seer.variable.less | 1 - packages/components/textarea/index.ts | 4 + packages/components/textarea/src/Textarea.tsx | 7 + packages/components/textarea/style/index.less | 59 +- packages/components/textarea/style/index.ts | 5 + packages/components/textarea/style/mixin.less | 6 +- .../textarea/style/themes/default.less | 5 - .../textarea/style/themes/default.ts | 5 - .../style/themes/default.variable.less | 28 - .../textarea/style/themes/seer.less | 5 - .../components/textarea/style/themes/seer.ts | 5 - .../textarea/style/themes/seer.variable.less | 3 - .../components/textarea/theme/default.css | 7 + packages/components/textarea/theme/default.ts | 18 + packages/components/textarea/theme/index.ts | 17 + packages/components/textarea/theme/tokens.ts | 13 + .../components/textarea/theme/transforms.ts | 13 + .../components/theme/__tests__/theme.spec.ts | 20 + packages/components/theme/index.ts | 34 + .../components/theme/src/ThemeProvider.tsx | 130 ++ .../theme/src/composables/useDynamicCss.ts | 113 ++ .../theme/src/composables/useTokenMerge.ts | 73 + .../theme/src/composables/useTokenRegister.ts | 176 +++ .../src/themeTokens/default/getBasicTokens.ts | 61 + .../themeTokens/default/getDefaultTokens.ts | 31 + .../themeTokens/default/getDerivedTokens.ts | 260 ++++ .../themeTokens/default/getExtendedTokens.ts | 205 +++ .../src/themeTokens/default/getResetTokens.ts | 62 + .../components/theme/src/themeTokens/index.ts | 17 + .../src/themeTokens/shared/getAlphaColor.ts | 12 + .../src/themeTokens/shared/getBaseColors.ts | 53 + .../src/themeTokens/shared/getColorPalette.ts | 173 +++ .../src/themeTokens/shared/getGreyColors.ts | 46 + .../src/themeTokens/shared/getSolidColor.ts | 13 + .../theme/src/themeTokens/shared/index.ts | 12 + packages/components/theme/src/token.ts | 21 + .../components/theme/src/types/dynamicCss.ts | 13 + packages/components/theme/src/types/index.ts | 12 + .../theme/src/types/themeProvider.ts | 46 + .../theme/src/types/themeTokens/basicToken.ts | 225 ++++ .../src/types/themeTokens/componentTokens.ts | 122 ++ .../src/types/themeTokens/derived/color.ts | 123 ++ .../src/types/themeTokens/derived/font.ts | 31 + .../src/types/themeTokens/derived/index.ts | 21 + .../src/types/themeTokens/derived/motion.ts | 12 + .../src/types/themeTokens/derived/shadow.ts | 12 + .../src/types/themeTokens/derived/size.ts | 64 + .../src/types/themeTokens/extended/color.ts | 52 + .../src/types/themeTokens/extended/control.ts | 43 + .../src/types/themeTokens/extended/font.ts | 11 + .../src/types/themeTokens/extended/index.ts | 30 + .../src/types/themeTokens/extended/overlay.ts | 15 + .../types/themeTokens/extended/scrollbar.ts | 20 + .../src/types/themeTokens/extended/size.ts | 10 + .../theme/src/types/themeTokens/index.ts | 89 ++ .../theme/src/types/themeTokens/reset.ts | 32 + .../components/theme/src/types/tokenRecord.ts | 14 + .../theme/src/types/tokenTransform.ts | 14 + .../components/theme/src/useThemeToken.ts | 140 ++ .../theme/src/utils/createTokensHash.ts | 24 + .../components/theme/src/utils/dynamicCss.ts | 80 ++ packages/components/theme/src/utils/index.ts | 11 + .../components/theme/src/utils/tokenToCss.ts | 38 + .../theme/src/utils/tokenTransforms.ts | 58 + packages/components/time-picker/index.ts | 4 + .../components/time-picker/src/TimePicker.tsx | 9 +- .../time-picker/src/TimeRangePicker.tsx | 9 +- .../time-picker/src/trigger/RangeTrigger.tsx | 11 +- .../time-picker/src/trigger/Trigger.tsx | 11 +- .../components/time-picker/style/index.less | 49 +- .../components/time-picker/style/index.ts | 8 + .../components/time-picker/style/mixin.less | 15 +- .../components/time-picker/style/panel.less | 114 ++ .../time-picker/style/themes/default.less | 5 - .../time-picker/style/themes/default.ts | 8 - .../style/themes/default.variable.less | 39 - .../time-picker/style/themes/seer.less | 5 - .../time-picker/style/themes/seer.ts | 8 - .../style/themes/seer.variable.less | 4 - .../components/time-picker/theme/default.css | 28 + .../components/time-picker/theme/default.ts | 58 + .../components/time-picker/theme/index.ts | 16 + .../components/time-picker/theme/tokens.ts | 39 + packages/components/timeline/demo/Color.vue | 11 +- packages/components/timeline/index.ts | 4 + packages/components/timeline/src/Timeline.tsx | 7 + packages/components/timeline/style/index.less | 52 +- packages/components/timeline/style/index.ts | 5 + packages/components/timeline/style/mixin.less | 35 +- .../timeline/style/themes/default.less | 4 - .../timeline/style/themes/default.ts | 5 - .../style/themes/default.variable.less | 27 - .../timeline/style/themes/seer.less | 4 - .../components/timeline/style/themes/seer.ts | 5 - .../timeline/style/themes/seer.variable.less | 4 - .../components/timeline/theme/default.css | 11 + packages/components/timeline/theme/default.ts | 23 + packages/components/timeline/theme/index.ts | 16 + packages/components/timeline/theme/tokens.ts | 18 + packages/components/tooltip/index.ts | 4 + packages/components/tooltip/src/Tooltip.tsx | 7 +- packages/components/tooltip/style/index.less | 16 +- packages/components/tooltip/style/index.ts | 5 + .../tooltip/style/themes/default.less | 4 - .../tooltip/style/themes/default.ts | 5 - .../style/themes/default.variable.less | 8 - .../components/tooltip/style/themes/seer.less | 4 - .../components/tooltip/style/themes/seer.ts | 5 - .../tooltip/style/themes/seer.variable.less | 4 - packages/components/tooltip/theme/default.css | 7 + packages/components/tooltip/theme/default.ts | 19 + packages/components/tooltip/theme/index.ts | 16 + packages/components/tooltip/theme/tokens.ts | 14 + packages/components/tour/index.ts | 4 + packages/components/tour/src/Tour.tsx | 12 +- packages/components/tour/style/index.less | 36 +- packages/components/tour/style/index.ts | 5 + .../components/tour/style/themes/default.less | 4 - .../components/tour/style/themes/default.ts | 5 - .../tour/style/themes/default.variable.less | 15 - .../components/tour/style/themes/seer.less | 4 - packages/components/tour/style/themes/seer.ts | 5 - .../tour/style/themes/seer.variable.less | 4 - packages/components/tour/theme/default.css | 15 + packages/components/tour/theme/default.ts | 30 + packages/components/tour/theme/index.ts | 16 + packages/components/tour/theme/tokens.ts | 25 + packages/components/transfer/index.ts | 4 + packages/components/transfer/src/Transfer.tsx | 7 + .../components/transfer/style/content.less | 42 +- packages/components/transfer/style/index.less | 17 +- packages/components/transfer/style/index.ts | 9 + packages/components/transfer/style/list.less | 33 +- .../transfer/style/themes/default.less | 5 - .../transfer/style/themes/default.ts | 9 - .../style/themes/default.variable.less | 48 - .../transfer/style/themes/seer.less | 5 - .../components/transfer/style/themes/seer.ts | 9 - .../transfer/style/themes/seer.variable.less | 10 - .../components/transfer/theme/default.css | 17 + packages/components/transfer/theme/default.ts | 31 + packages/components/transfer/theme/index.ts | 16 + packages/components/transfer/theme/tokens.ts | 26 + packages/components/tree-select/index.ts | 4 + .../components/tree-select/src/TreeSelect.tsx | 7 + .../components/tree-select/style/index.less | 37 +- .../components/tree-select/style/index.ts | 7 + .../tree-select/style/themes/default.less | 6 - .../tree-select/style/themes/default.ts | 7 - .../style/themes/default.variable.less | 17 - .../tree-select/style/themes/seer.less | 6 - .../tree-select/style/themes/seer.ts | 7 - .../style/themes/seer.variable.less | 7 - .../components/tree-select/theme/default.css | 10 + .../components/tree-select/theme/default.ts | 22 + .../components/tree-select/theme/index.ts | 16 + .../components/tree-select/theme/tokens.ts | 17 + packages/components/tree/index.ts | 4 + packages/components/tree/src/Tree.tsx | 7 + packages/components/tree/style/index.less | 99 +- packages/components/tree/style/index.ts | 7 + packages/components/tree/style/mixin.less | 12 +- .../components/tree/style/themes/default.less | 4 - .../components/tree/style/themes/default.ts | 7 - .../tree/style/themes/default.variable.less | 28 - .../components/tree/style/themes/seer.less | 4 - packages/components/tree/style/themes/seer.ts | 7 - .../tree/style/themes/seer.variable.less | 12 - packages/components/tree/theme/default.css | 17 + packages/components/tree/theme/default.ts | 46 + packages/components/tree/theme/index.ts | 16 + packages/components/tree/theme/tokens.ts | 27 + packages/components/upload/index.ts | 4 + packages/components/upload/src/Upload.tsx | 7 +- packages/components/upload/style/index.less | 8 +- packages/components/upload/style/index.ts | 6 + packages/components/upload/style/list.less | 43 +- packages/components/upload/style/mixin.less | 8 +- .../upload/style/themes/default.less | 4 - .../components/upload/style/themes/default.ts | 5 - .../upload/style/themes/default.variable.less | 38 - .../components/upload/style/themes/seer.less | 4 - .../components/upload/style/themes/seer.ts | 5 - .../upload/style/themes/seer.variable.less | 4 - .../components/upload/style/variable.less | 30 + packages/components/upload/theme/default.css | 10 + packages/components/upload/theme/default.ts | 24 + packages/components/upload/theme/index.ts | 16 + packages/components/upload/theme/tokens.ts | 19 + .../components/watermark/style/index.less | 1 + packages/components/watermark/style/index.ts | 3 + .../watermark/style/themes/default.less | 4 - .../watermark/style/themes/default.ts | 3 - .../style/themes/default.variable.less | 0 .../watermark/style/themes/seer.less | 4 - .../components/watermark/style/themes/seer.ts | 3 - .../watermark/style/themes/seer.variable.less | 1 - packages/pro/default.full.css | 371 ++++++ packages/pro/default.less | 7 - packages/pro/form/style/index.less | 1 + packages/pro/form/style/index.ts | 3 + packages/pro/form/style/themes/default.less | 4 - packages/pro/form/style/themes/default.ts | 5 - .../form/style/themes/default.variable.less | 0 packages/pro/form/style/themes/seer.less | 4 - packages/pro/form/style/themes/seer.ts | 5 - .../pro/form/style/themes/seer.variable.less | 1 - packages/pro/index.less | 9 + packages/pro/layout/demo/Basic.vue | 2 +- packages/pro/layout/demo/Collapsed.vue | 2 +- packages/pro/layout/demo/Fixed.vue | 2 +- packages/pro/layout/demo/Theme.vue | 2 +- packages/pro/layout/demo/Type.vue | 2 +- packages/pro/layout/index.ts | 4 + packages/pro/layout/src/Layout.tsx | 13 + packages/pro/layout/src/contents/Header.tsx | 3 +- .../layout/src/contents/MenuThemeProvider.tsx | 67 + packages/pro/layout/src/contents/Sider.tsx | 3 +- packages/pro/layout/style/dark.less | 18 +- packages/pro/layout/style/header.less | 6 +- packages/pro/layout/style/index.less | 24 +- packages/pro/layout/style/index.ts | 7 + packages/pro/layout/style/light.less | 22 +- packages/pro/layout/style/sider.less | 2 +- packages/pro/layout/style/themes/default.less | 6 - packages/pro/layout/style/themes/default.ts | 7 - .../layout/style/themes/default.variable.less | 8 - packages/pro/layout/style/themes/seer.less | 6 - packages/pro/layout/style/themes/seer.ts | 7 - .../layout/style/themes/seer.variable.less | 4 - packages/pro/layout/theme/default.css | 42 + packages/pro/layout/theme/default.ts | 84 ++ packages/pro/layout/theme/index.ts | 16 + packages/pro/layout/theme/tokens.ts | 57 + packages/pro/search/index.ts | 4 + packages/pro/search/src/ProSearch.tsx | 14 +- .../pro/search/src/components/SearchItem.tsx | 4 +- .../nameSelectOverlay/NameSelectOverlay.tsx | 14 +- .../search/src/components/segment/Segment.tsx | 20 +- packages/pro/search/src/panel/SelectPanel.tsx | 3 + packages/pro/search/style/index.less | 51 +- packages/pro/search/style/index.ts | 8 + packages/pro/search/style/mixin.less | 15 +- packages/pro/search/style/panel.less | 10 +- packages/pro/search/style/quick-select.less | 12 +- packages/pro/search/style/themes/default.less | 7 - packages/pro/search/style/themes/default.ts | 8 - .../search/style/themes/default.variable.less | 69 - packages/pro/search/style/themes/seer.less | 6 - packages/pro/search/style/themes/seer.ts | 9 - .../search/style/themes/seer.variable.less | 1 - packages/pro/search/style/variables.less | 65 + packages/pro/search/theme/default.css | 23 + packages/pro/search/theme/default.ts | 50 + packages/pro/search/theme/index.ts | 16 + packages/pro/search/theme/tokens.ts | 33 + packages/pro/seer.less | 7 - packages/pro/style/themes/dark.less | 2 - packages/pro/style/themes/default.less | 2 - packages/pro/style/themes/seer.less | 2 - packages/pro/table/style/index.less | 47 +- packages/pro/table/style/index.ts | 13 + packages/pro/table/style/themes/default.less | 5 - packages/pro/table/style/themes/default.ts | 13 - .../table/style/themes/default.variable.less | 0 packages/pro/table/style/themes/seer.less | 5 - packages/pro/table/style/themes/seer.ts | 13 - .../pro/table/style/themes/seer.variable.less | 1 - packages/pro/textarea/index.ts | 4 + packages/pro/textarea/src/ProTextarea.tsx | 7 + .../pro/textarea/src/content/ErrorLine.tsx | 4 +- packages/pro/textarea/style/index.less | 82 +- packages/pro/textarea/style/index.ts | 4 + .../pro/textarea/style/themes/default.less | 6 - packages/pro/textarea/style/themes/default.ts | 4 - .../style/themes/default.variable.less | 40 - packages/pro/textarea/style/themes/seer.less | 6 - packages/pro/textarea/style/themes/seer.ts | 4 - .../textarea/style/themes/seer.variable.less | 9 - packages/pro/textarea/theme/default.css | 13 + packages/pro/textarea/theme/default.ts | 30 + packages/pro/textarea/theme/index.ts | 17 + packages/pro/textarea/theme/tokens.ts | 21 + packages/pro/textarea/theme/transforms.ts | 15 + .../typography => pro/theme}/index.ts | 6 +- packages/pro/theme/src/types.ts | 34 + packages/pro/theme/src/useThemeToken.ts | 26 + packages/pro/transfer/index.ts | 4 + packages/pro/transfer/src/ProTransfer.tsx | 5 + .../src/wrapper/TableTransferWrapper.tsx | 10 +- .../src/wrapper/TreeTransferWrapper.tsx | 10 +- packages/pro/transfer/style/index.less | 40 +- packages/pro/transfer/style/index.ts | 6 + .../pro/transfer/style/themes/default.less | 6 - packages/pro/transfer/style/themes/default.ts | 7 - .../style/themes/default.variable.less | 11 - packages/pro/transfer/style/themes/seer.less | 6 - packages/pro/transfer/style/themes/seer.ts | 7 - .../transfer/style/themes/seer.variable.less | 1 - packages/pro/transfer/theme/default.css | 7 + packages/pro/transfer/theme/default.ts | 20 + packages/pro/transfer/theme/index.ts | 16 + packages/pro/transfer/theme/tokens.ts | 14 + packages/pro/tree/index.ts | 4 + packages/pro/tree/src/ProTree.tsx | 7 + packages/pro/tree/style/index.less | 5 +- packages/pro/tree/style/index.ts | 7 + packages/pro/tree/style/themes/default.less | 4 - packages/pro/tree/style/themes/default.ts | 7 - packages/pro/tree/style/themes/seer.less | 4 - packages/pro/tree/style/themes/seer.ts | 7 - .../pro/tree/style/themes/seer.variable.less | 1 - .../default.variable.less => variables.less} | 10 +- packages/pro/tree/theme/default.css | 4 + packages/pro/tree/theme/default.ts | 13 + packages/pro/tree/theme/index.ts | 16 + packages/pro/tree/theme/tokens.ts | 10 + packages/site/src/App.vue | 58 +- .../src/components/global/GlobalCodeBox.vue | 17 +- .../src/components/global/GlobalColors.vue | 2 +- .../src/components/global/GlobalTheme.vue | 24 +- .../site/src/components/global/themeConfig.ts | 2 +- .../site/src/components/views/home/Home.vue | 2 +- packages/site/src/context.ts | 5 +- packages/site/src/docs/GettingStarted.zh.md | 2 +- packages/site/src/index.less | 5 +- packages/site/src/main.ts | 10 +- packages/site/src/styles/app.less | 24 +- packages/site/src/styles/components.less | 14 +- packages/site/src/styles/docs.less | 10 +- packages/site/src/styles/highlight.less | 24 +- packages/site/src/styles/layout/footer.less | 36 +- packages/site/src/styles/layout/header.less | 24 +- packages/site/src/styles/markdown.less | 66 +- packages/site/src/styles/theme.less | 2 +- packages/site/src/styles/themes/default.less | 2 - packages/site/src/styles/themes/seer.less | 2 - packages/site/vite.config.ts | 7 - scripts/gen/colors/run.ts | 19 + scripts/gen/colors/update.ts | 31 + scripts/gen/generateTheme.ts | 90 ++ scripts/gen/template.ts | 33 + scripts/gen/theme/run.ts | 19 + scripts/gen/theme/update.ts | 131 ++ scripts/gulp/build/less.ts | 101 +- scripts/gulp/build/rollup.ts | 2 +- scripts/gulp/gulpConfig.ts | 2 +- scripts/gulp/site/utils.ts | 1 + scripts/gulp/test.ts | 51 + scripts/vite/dom/domKeys.ts | 228 ++++ scripts/vite/dom/index.ts | 29 + scripts/vite/index.ts | 75 ++ .../vite/run.ts | 0 1232 files changed, 14373 insertions(+), 8293 deletions(-) create mode 100644 packages/components/_private/collapse-transition/style/index.ts delete mode 100644 packages/components/_private/collapse-transition/style/themes/default.less delete mode 100644 packages/components/_private/collapse-transition/style/themes/default.ts delete mode 100644 packages/components/_private/collapse-transition/style/themes/default.variable.less delete mode 100644 packages/components/_private/collapse-transition/style/themes/seer.less delete mode 100644 packages/components/_private/collapse-transition/style/themes/seer.ts delete mode 100644 packages/components/_private/collapse-transition/style/themes/seer.variable.less delete mode 100644 packages/components/_private/loading/style/themes/default.less delete mode 100644 packages/components/_private/loading/style/themes/default.ts delete mode 100644 packages/components/_private/loading/style/themes/default.variable.less delete mode 100644 packages/components/_private/loading/style/themes/seer.less delete mode 100644 packages/components/_private/loading/style/themes/seer.variable.less create mode 100644 packages/components/_private/mask/style/index.ts delete mode 100644 packages/components/_private/mask/style/themes/default.less delete mode 100644 packages/components/_private/mask/style/themes/default.ts delete mode 100644 packages/components/_private/mask/style/themes/default.variable.less delete mode 100644 packages/components/_private/mask/style/themes/seer.less delete mode 100644 packages/components/_private/mask/style/themes/seer.ts delete mode 100644 packages/components/_private/mask/style/themes/seer.variable.less create mode 100644 packages/components/_private/overflow/style/index.ts delete mode 100644 packages/components/_private/overflow/style/themes/default.less delete mode 100644 packages/components/_private/overflow/style/themes/default.ts delete mode 100644 packages/components/_private/overflow/style/themes/default.variable.less delete mode 100644 packages/components/_private/overflow/style/themes/seer.less delete mode 100644 packages/components/_private/overflow/style/themes/seer.variable.less create mode 100644 packages/components/_private/overlay/style/index.ts delete mode 100644 packages/components/_private/overlay/style/themes/default.less delete mode 100644 packages/components/_private/overlay/style/themes/default.ts delete mode 100644 packages/components/_private/overlay/style/themes/default.variable.less delete mode 100644 packages/components/_private/overlay/style/themes/seer.less delete mode 100644 packages/components/_private/overlay/style/themes/seer.ts delete mode 100644 packages/components/_private/overlay/style/themes/seer.variable.less create mode 100644 packages/components/_private/selector/style/index.ts delete mode 100644 packages/components/_private/selector/style/themes/default.less delete mode 100644 packages/components/_private/selector/style/themes/default.ts delete mode 100644 packages/components/_private/selector/style/themes/seer.less delete mode 100644 packages/components/_private/selector/style/themes/seer.ts delete mode 100644 packages/components/_private/selector/style/themes/seer.variable.less delete mode 100644 packages/components/_private/time-panel/style/index.less delete mode 100644 packages/components/_private/time-panel/style/themes/default.less delete mode 100644 packages/components/_private/time-panel/style/themes/default.ts delete mode 100644 packages/components/_private/time-panel/style/themes/default.variable.less delete mode 100644 packages/components/_private/time-panel/style/themes/seer.less delete mode 100644 packages/components/_private/time-panel/style/themes/seer.ts delete mode 100644 packages/components/_private/time-panel/style/themes/seer.variable.less create mode 100644 packages/components/_private/trigger/style/index.ts delete mode 100644 packages/components/_private/trigger/style/themes/default.less delete mode 100644 packages/components/_private/trigger/style/themes/default.ts delete mode 100644 packages/components/_private/trigger/style/themes/default.variable.less delete mode 100644 packages/components/_private/trigger/style/themes/seer.less delete mode 100644 packages/components/_private/trigger/style/themes/seer.ts delete mode 100644 packages/components/_private/trigger/style/themes/seer.variable.less create mode 100644 packages/components/_private/wave/style/index.ts delete mode 100644 packages/components/_private/wave/style/themes/default.less delete mode 100644 packages/components/_private/wave/style/themes/default.ts delete mode 100644 packages/components/_private/wave/style/themes/default.variable.less delete mode 100644 packages/components/_private/wave/style/themes/seer.less delete mode 100644 packages/components/_private/wave/style/themes/seer.ts delete mode 100644 packages/components/_private/wave/style/themes/seer.variable.less create mode 100644 packages/components/affix/style/index.ts delete mode 100644 packages/components/affix/style/themes/default.less delete mode 100644 packages/components/affix/style/themes/default.ts delete mode 100644 packages/components/affix/style/themes/default.variable.less delete mode 100644 packages/components/affix/style/themes/seer.less delete mode 100644 packages/components/affix/style/themes/seer.ts delete mode 100644 packages/components/affix/style/themes/seer.variable.less create mode 100644 packages/components/alert/style/index.ts delete mode 100644 packages/components/alert/style/themes/default.less delete mode 100644 packages/components/alert/style/themes/default.ts delete mode 100644 packages/components/alert/style/themes/default.variable.less delete mode 100644 packages/components/alert/style/themes/seer.less delete mode 100644 packages/components/alert/style/themes/seer.ts delete mode 100644 packages/components/alert/style/themes/seer.variable.less create mode 100644 packages/components/alert/theme/default.css create mode 100644 packages/components/alert/theme/default.ts create mode 100644 packages/components/alert/theme/index.ts create mode 100644 packages/components/alert/theme/tokens.ts create mode 100644 packages/components/anchor/style/index.ts delete mode 100644 packages/components/anchor/style/themes/default.less delete mode 100644 packages/components/anchor/style/themes/default.ts delete mode 100644 packages/components/anchor/style/themes/default.variable.less delete mode 100644 packages/components/anchor/style/themes/seer.less delete mode 100644 packages/components/anchor/style/themes/seer.ts delete mode 100644 packages/components/anchor/style/themes/seer.variable.less create mode 100644 packages/components/anchor/theme/default.css create mode 100644 packages/components/anchor/theme/default.ts create mode 100644 packages/components/anchor/theme/index.ts create mode 100644 packages/components/anchor/theme/tokens.ts create mode 100644 packages/components/avatar/style/index.ts delete mode 100644 packages/components/avatar/style/themes/default.less delete mode 100644 packages/components/avatar/style/themes/default.ts delete mode 100644 packages/components/avatar/style/themes/default.variable.less delete mode 100644 packages/components/avatar/style/themes/seer.less delete mode 100644 packages/components/avatar/style/themes/seer.ts delete mode 100644 packages/components/avatar/style/themes/seer.variable.less create mode 100644 packages/components/avatar/theme/default.css create mode 100644 packages/components/avatar/theme/default.ts create mode 100644 packages/components/avatar/theme/index.ts create mode 100644 packages/components/avatar/theme/tokens.ts create mode 100644 packages/components/back-top/style/index.ts delete mode 100644 packages/components/back-top/style/themes/default.less delete mode 100644 packages/components/back-top/style/themes/default.ts delete mode 100644 packages/components/back-top/style/themes/default.variable.less delete mode 100644 packages/components/back-top/style/themes/seer.less delete mode 100644 packages/components/back-top/style/themes/seer.ts delete mode 100644 packages/components/back-top/style/themes/seer.variable.less create mode 100644 packages/components/back-top/theme/default.css create mode 100644 packages/components/back-top/theme/default.ts create mode 100644 packages/components/back-top/theme/index.ts create mode 100644 packages/components/back-top/theme/tokens.ts rename packages/components/badge/style/{themes/seer.ts => index.ts} (51%) delete mode 100644 packages/components/badge/style/themes/default.less delete mode 100644 packages/components/badge/style/themes/default.ts delete mode 100644 packages/components/badge/style/themes/default.variable.less delete mode 100644 packages/components/badge/style/themes/seer.less delete mode 100644 packages/components/badge/style/themes/seer.variable.less create mode 100644 packages/components/badge/theme/default.css create mode 100644 packages/components/badge/theme/default.ts create mode 100644 packages/components/badge/theme/index.ts create mode 100644 packages/components/badge/theme/tokens.ts rename packages/components/{_private/loading/style/themes/seer.ts => breadcrumb/style/index.ts} (51%) delete mode 100644 packages/components/breadcrumb/style/themes/default.less delete mode 100644 packages/components/breadcrumb/style/themes/default.ts delete mode 100644 packages/components/breadcrumb/style/themes/default.variable.less delete mode 100644 packages/components/breadcrumb/style/themes/seer.less delete mode 100644 packages/components/breadcrumb/style/themes/seer.variable.less create mode 100644 packages/components/breadcrumb/theme/default.css create mode 100644 packages/components/breadcrumb/theme/default.ts create mode 100644 packages/components/breadcrumb/theme/index.ts create mode 100644 packages/components/breadcrumb/theme/tokens.ts create mode 100644 packages/components/button/style/index.ts delete mode 100644 packages/components/button/style/themes/default.less delete mode 100644 packages/components/button/style/themes/default.ts delete mode 100644 packages/components/button/style/themes/default.variable.less delete mode 100644 packages/components/button/style/themes/seer.less delete mode 100644 packages/components/button/style/themes/seer.ts delete mode 100644 packages/components/button/style/themes/seer.variable.less create mode 100644 packages/components/button/theme/default.css create mode 100644 packages/components/button/theme/default.ts create mode 100644 packages/components/button/theme/index.ts create mode 100644 packages/components/button/theme/tokens.ts create mode 100644 packages/components/card/style/index.ts delete mode 100644 packages/components/card/style/themes/default.less delete mode 100644 packages/components/card/style/themes/default.ts delete mode 100644 packages/components/card/style/themes/default.variable.less delete mode 100644 packages/components/card/style/themes/seer.less delete mode 100644 packages/components/card/style/themes/seer.ts delete mode 100644 packages/components/card/style/themes/seer.variable.less create mode 100644 packages/components/card/theme/default.css create mode 100644 packages/components/card/theme/default.ts create mode 100644 packages/components/card/theme/index.ts create mode 100644 packages/components/card/theme/tokens.ts create mode 100644 packages/components/carousel/style/index.ts delete mode 100644 packages/components/carousel/style/themes/default.less delete mode 100644 packages/components/carousel/style/themes/default.ts delete mode 100644 packages/components/carousel/style/themes/default.variable.less delete mode 100644 packages/components/carousel/style/themes/seer.less delete mode 100644 packages/components/carousel/style/themes/seer.ts delete mode 100644 packages/components/carousel/style/themes/seer.variable.less create mode 100644 packages/components/carousel/theme/default.css create mode 100644 packages/components/carousel/theme/default.ts create mode 100644 packages/components/carousel/theme/index.ts create mode 100644 packages/components/carousel/theme/tokens.ts create mode 100644 packages/components/cascader/style/index.ts delete mode 100644 packages/components/cascader/style/themes/default.less delete mode 100644 packages/components/cascader/style/themes/default.ts delete mode 100644 packages/components/cascader/style/themes/default.variable.less delete mode 100644 packages/components/cascader/style/themes/seer.less delete mode 100644 packages/components/cascader/style/themes/seer.ts delete mode 100644 packages/components/cascader/style/themes/seer.variable.less create mode 100644 packages/components/cascader/theme/default.css create mode 100644 packages/components/cascader/theme/default.ts create mode 100644 packages/components/cascader/theme/index.ts create mode 100644 packages/components/cascader/theme/tokens.ts create mode 100644 packages/components/checkbox/style/index.ts delete mode 100644 packages/components/checkbox/style/themes/default.less delete mode 100644 packages/components/checkbox/style/themes/default.ts delete mode 100644 packages/components/checkbox/style/themes/default.variable.less delete mode 100644 packages/components/checkbox/style/themes/seer.less delete mode 100644 packages/components/checkbox/style/themes/seer.ts delete mode 100644 packages/components/checkbox/style/themes/seer.variable.less create mode 100644 packages/components/checkbox/theme/default.css create mode 100644 packages/components/checkbox/theme/default.ts create mode 100644 packages/components/checkbox/theme/index.ts create mode 100644 packages/components/checkbox/theme/tokens.ts create mode 100644 packages/components/collapse/style/index.ts delete mode 100644 packages/components/collapse/style/themes/default.less delete mode 100644 packages/components/collapse/style/themes/default.ts delete mode 100644 packages/components/collapse/style/themes/default.variable.less delete mode 100644 packages/components/collapse/style/themes/seer.less delete mode 100644 packages/components/collapse/style/themes/seer.ts delete mode 100644 packages/components/collapse/style/themes/seer.variable.less create mode 100644 packages/components/collapse/theme/default.css create mode 100644 packages/components/collapse/theme/default.ts create mode 100644 packages/components/collapse/theme/index.ts create mode 100644 packages/components/collapse/theme/tokens.ts rename packages/components/{breadcrumb/style/themes/seer.ts => comment/style/index.ts} (51%) delete mode 100644 packages/components/comment/style/themes/default.less delete mode 100644 packages/components/comment/style/themes/default.ts delete mode 100644 packages/components/comment/style/themes/default.variable.less delete mode 100644 packages/components/comment/style/themes/seer.less delete mode 100644 packages/components/comment/style/themes/seer.ts delete mode 100644 packages/components/comment/style/themes/seer.variable.less create mode 100644 packages/components/comment/theme/default.css create mode 100644 packages/components/comment/theme/default.ts create mode 100644 packages/components/comment/theme/index.ts create mode 100644 packages/components/comment/theme/tokens.ts delete mode 100644 packages/components/config/src/seerConfig.ts create mode 100644 packages/components/date-picker/style/index.ts delete mode 100644 packages/components/date-picker/style/themes/default.less delete mode 100644 packages/components/date-picker/style/themes/default.ts delete mode 100644 packages/components/date-picker/style/themes/default.variable.less delete mode 100644 packages/components/date-picker/style/themes/seer.less delete mode 100644 packages/components/date-picker/style/themes/seer.ts delete mode 100644 packages/components/date-picker/style/themes/seer.variable.less create mode 100644 packages/components/date-picker/theme/default.css create mode 100644 packages/components/date-picker/theme/default.ts create mode 100644 packages/components/date-picker/theme/index.ts create mode 100644 packages/components/date-picker/theme/tokens.ts create mode 100644 packages/components/default.css create mode 100644 packages/components/default.full.css delete mode 100644 packages/components/default.full.less delete mode 100644 packages/components/default.less create mode 100644 packages/components/desc/style/index.ts delete mode 100644 packages/components/desc/style/themes/default.less delete mode 100644 packages/components/desc/style/themes/default.ts delete mode 100644 packages/components/desc/style/themes/default.variable.less delete mode 100644 packages/components/desc/style/themes/seer.less delete mode 100644 packages/components/desc/style/themes/seer.ts delete mode 100644 packages/components/desc/style/themes/seer.variable.less create mode 100644 packages/components/desc/theme/default.css create mode 100644 packages/components/desc/theme/default.ts create mode 100644 packages/components/desc/theme/index.ts create mode 100644 packages/components/desc/theme/tokens.ts rename packages/components/{_private/overflow/style/themes/seer.ts => divider/style/index.ts} (51%) delete mode 100644 packages/components/divider/style/themes/default.less delete mode 100644 packages/components/divider/style/themes/default.ts delete mode 100644 packages/components/divider/style/themes/default.variable.less delete mode 100644 packages/components/divider/style/themes/seer.less delete mode 100644 packages/components/divider/style/themes/seer.ts delete mode 100644 packages/components/divider/style/themes/seer.variable.less create mode 100644 packages/components/divider/theme/default.css create mode 100644 packages/components/divider/theme/default.ts create mode 100644 packages/components/divider/theme/index.ts create mode 100644 packages/components/divider/theme/tokens.ts create mode 100644 packages/components/drawer/style/index.ts delete mode 100644 packages/components/drawer/style/themes/default.less delete mode 100644 packages/components/drawer/style/themes/default.ts delete mode 100644 packages/components/drawer/style/themes/default.variable.less delete mode 100644 packages/components/drawer/style/themes/seer.less delete mode 100644 packages/components/drawer/style/themes/seer.ts delete mode 100644 packages/components/drawer/style/themes/seer.variable.less create mode 100644 packages/components/drawer/theme/default.css create mode 100644 packages/components/drawer/theme/default.ts create mode 100644 packages/components/drawer/theme/index.ts create mode 100644 packages/components/drawer/theme/tokens.ts create mode 100644 packages/components/dropdown/style/index.ts delete mode 100644 packages/components/dropdown/style/themes/default.less delete mode 100644 packages/components/dropdown/style/themes/default.ts delete mode 100644 packages/components/dropdown/style/themes/default.variable.less delete mode 100644 packages/components/dropdown/style/themes/seer.less delete mode 100644 packages/components/dropdown/style/themes/seer.ts delete mode 100644 packages/components/dropdown/style/themes/seer.variable.less create mode 100644 packages/components/dropdown/theme/default.css create mode 100644 packages/components/dropdown/theme/default.ts create mode 100644 packages/components/dropdown/theme/index.ts create mode 100644 packages/components/dropdown/theme/tokens.ts create mode 100644 packages/components/empty/style/index.ts delete mode 100644 packages/components/empty/style/themes/default.less delete mode 100644 packages/components/empty/style/themes/default.ts delete mode 100644 packages/components/empty/style/themes/default.variable.less delete mode 100644 packages/components/empty/style/themes/seer.less delete mode 100644 packages/components/empty/style/themes/seer.ts delete mode 100644 packages/components/empty/style/themes/seer.variable.less create mode 100644 packages/components/empty/theme/default.css create mode 100644 packages/components/empty/theme/default.ts create mode 100644 packages/components/empty/theme/index.ts create mode 100644 packages/components/empty/theme/tokens.ts create mode 100644 packages/components/form/style/index.ts delete mode 100644 packages/components/form/style/themes/default.less delete mode 100644 packages/components/form/style/themes/default.ts delete mode 100644 packages/components/form/style/themes/default.variable.less delete mode 100644 packages/components/form/style/themes/seer.less delete mode 100644 packages/components/form/style/themes/seer.ts delete mode 100644 packages/components/form/style/themes/seer.variable.less create mode 100644 packages/components/form/theme/default.css create mode 100644 packages/components/form/theme/default.ts create mode 100644 packages/components/form/theme/index.ts create mode 100644 packages/components/form/theme/tokens.ts create mode 100644 packages/components/grid/style/index.ts delete mode 100644 packages/components/grid/style/themes/default.less delete mode 100644 packages/components/grid/style/themes/default.ts delete mode 100644 packages/components/grid/style/themes/default.variable.less delete mode 100644 packages/components/grid/style/themes/seer.less delete mode 100644 packages/components/grid/style/themes/seer.ts delete mode 100644 packages/components/grid/style/themes/seer.variable.less create mode 100644 packages/components/header/style/index.ts delete mode 100644 packages/components/header/style/themes/default.less delete mode 100644 packages/components/header/style/themes/default.ts delete mode 100644 packages/components/header/style/themes/default.variable.less delete mode 100644 packages/components/header/style/themes/seer.less delete mode 100644 packages/components/header/style/themes/seer.ts delete mode 100644 packages/components/header/style/themes/seer.variable.less create mode 100644 packages/components/header/theme/default.css create mode 100644 packages/components/header/theme/default.ts create mode 100644 packages/components/header/theme/index.ts create mode 100644 packages/components/header/theme/tokens.ts create mode 100644 packages/components/icon/style/index.ts delete mode 100644 packages/components/icon/style/themes/default.less delete mode 100644 packages/components/icon/style/themes/default.ts delete mode 100644 packages/components/icon/style/themes/default.variable.less delete mode 100644 packages/components/icon/style/themes/seer.less delete mode 100644 packages/components/icon/style/themes/seer.ts delete mode 100644 packages/components/icon/style/themes/seer.variable.less rename packages/components/image/style/{image.less => index.less} (70%) create mode 100644 packages/components/image/style/index.ts delete mode 100644 packages/components/image/style/themes/default.less delete mode 100644 packages/components/image/style/themes/default.ts delete mode 100644 packages/components/image/style/themes/default.variable.less delete mode 100644 packages/components/image/style/themes/seer.less delete mode 100644 packages/components/image/style/themes/seer.ts delete mode 100644 packages/components/image/style/themes/seer.variable.less create mode 100644 packages/components/image/theme/default.css create mode 100644 packages/components/image/theme/default.ts create mode 100644 packages/components/image/theme/index.ts create mode 100644 packages/components/image/theme/tokens.ts create mode 100644 packages/components/index.full.less create mode 100644 packages/components/index.less create mode 100644 packages/components/input-number/style/index.ts delete mode 100644 packages/components/input-number/style/themes/default.less delete mode 100644 packages/components/input-number/style/themes/default.ts delete mode 100644 packages/components/input-number/style/themes/default.variable.less delete mode 100644 packages/components/input-number/style/themes/seer.less delete mode 100644 packages/components/input-number/style/themes/seer.ts delete mode 100644 packages/components/input-number/style/themes/seer.variable.less create mode 100644 packages/components/input/style/index.ts delete mode 100644 packages/components/input/style/themes/default.less delete mode 100644 packages/components/input/style/themes/default.ts delete mode 100644 packages/components/input/style/themes/default.variable.less delete mode 100644 packages/components/input/style/themes/seer.less delete mode 100644 packages/components/input/style/themes/seer.ts delete mode 100644 packages/components/input/style/themes/seer.variable.less create mode 100644 packages/components/layout/style/index.ts delete mode 100644 packages/components/layout/style/themes/default.less delete mode 100644 packages/components/layout/style/themes/default.ts delete mode 100644 packages/components/layout/style/themes/default.variable.less delete mode 100644 packages/components/layout/style/themes/seer.less delete mode 100644 packages/components/layout/style/themes/seer.ts delete mode 100644 packages/components/layout/style/themes/seer.variable.less create mode 100644 packages/components/layout/theme/default.css create mode 100644 packages/components/layout/theme/default.ts create mode 100644 packages/components/layout/theme/index.ts create mode 100644 packages/components/layout/theme/tokens.ts create mode 100644 packages/components/list/style/index.ts delete mode 100644 packages/components/list/style/themes/default.less delete mode 100644 packages/components/list/style/themes/default.ts delete mode 100644 packages/components/list/style/themes/default.variable.less delete mode 100644 packages/components/list/style/themes/seer.less delete mode 100644 packages/components/list/style/themes/seer.ts delete mode 100644 packages/components/list/style/themes/seer.variable.less create mode 100644 packages/components/loading-bar/style/index.ts delete mode 100644 packages/components/loading-bar/style/themes/default.less delete mode 100644 packages/components/loading-bar/style/themes/default.ts delete mode 100644 packages/components/loading-bar/style/themes/default.variable.less delete mode 100644 packages/components/loading-bar/style/themes/seer.less delete mode 100644 packages/components/loading-bar/style/themes/seer.ts delete mode 100644 packages/components/loading-bar/style/themes/seer.variable.less create mode 100644 packages/components/loading-bar/theme/default.css create mode 100644 packages/components/loading-bar/theme/default.ts create mode 100644 packages/components/loading-bar/theme/index.ts create mode 100644 packages/components/loading-bar/theme/tokens.ts create mode 100644 packages/components/menu/style/index.ts delete mode 100644 packages/components/menu/style/themes/default.less delete mode 100644 packages/components/menu/style/themes/default.ts delete mode 100644 packages/components/menu/style/themes/default.variable.less delete mode 100644 packages/components/menu/style/themes/seer.less delete mode 100644 packages/components/menu/style/themes/seer.ts delete mode 100644 packages/components/menu/style/themes/seer.variable.less create mode 100644 packages/components/menu/theme/default.css create mode 100644 packages/components/menu/theme/default.ts create mode 100644 packages/components/menu/theme/index.ts create mode 100644 packages/components/menu/theme/tokens.ts create mode 100644 packages/components/message/style/index.ts delete mode 100644 packages/components/message/style/themes/default.less delete mode 100644 packages/components/message/style/themes/default.ts delete mode 100644 packages/components/message/style/themes/default.variable.less delete mode 100644 packages/components/message/style/themes/seer.less delete mode 100644 packages/components/message/style/themes/seer.ts delete mode 100644 packages/components/message/style/themes/seer.variable.less create mode 100644 packages/components/message/theme/default.css create mode 100644 packages/components/message/theme/default.ts create mode 100644 packages/components/message/theme/index.ts create mode 100644 packages/components/message/theme/tokens.ts create mode 100644 packages/components/message/theme/transforms.ts create mode 100644 packages/components/modal/style/index.ts delete mode 100644 packages/components/modal/style/themes/default.less delete mode 100644 packages/components/modal/style/themes/default.ts delete mode 100644 packages/components/modal/style/themes/default.variable.less delete mode 100644 packages/components/modal/style/themes/seer.less delete mode 100644 packages/components/modal/style/themes/seer.ts delete mode 100644 packages/components/modal/style/themes/seer.variable.less create mode 100644 packages/components/modal/theme/default.css create mode 100644 packages/components/modal/theme/default.ts create mode 100644 packages/components/modal/theme/index.ts create mode 100644 packages/components/modal/theme/tokens.ts create mode 100644 packages/components/notification/style/index.ts delete mode 100644 packages/components/notification/style/themes/default.less delete mode 100644 packages/components/notification/style/themes/default.ts delete mode 100644 packages/components/notification/style/themes/default.variable.less delete mode 100644 packages/components/notification/style/themes/seer.less delete mode 100644 packages/components/notification/style/themes/seer.ts delete mode 100644 packages/components/notification/style/themes/seer.variable.less create mode 100644 packages/components/notification/theme/default.css create mode 100644 packages/components/notification/theme/default.ts create mode 100644 packages/components/notification/theme/index.ts create mode 100644 packages/components/notification/theme/tokens.ts create mode 100644 packages/components/notification/theme/transforms.ts create mode 100644 packages/components/pagination/style/index.ts delete mode 100644 packages/components/pagination/style/themes/default.less delete mode 100644 packages/components/pagination/style/themes/default.ts delete mode 100644 packages/components/pagination/style/themes/default.variable.less delete mode 100644 packages/components/pagination/style/themes/seer.less delete mode 100644 packages/components/pagination/style/themes/seer.ts delete mode 100644 packages/components/pagination/style/themes/seer.variable.less create mode 100644 packages/components/pagination/theme/default.css create mode 100644 packages/components/pagination/theme/default.ts create mode 100644 packages/components/pagination/theme/index.ts create mode 100644 packages/components/pagination/theme/tokens.ts create mode 100644 packages/components/popconfirm/style/index.ts delete mode 100644 packages/components/popconfirm/style/themes/default.less delete mode 100644 packages/components/popconfirm/style/themes/default.ts delete mode 100644 packages/components/popconfirm/style/themes/default.variable.less delete mode 100644 packages/components/popconfirm/style/themes/seer.less delete mode 100644 packages/components/popconfirm/style/themes/seer.ts delete mode 100644 packages/components/popconfirm/style/themes/seer.variable.less create mode 100644 packages/components/popconfirm/theme/default.css create mode 100644 packages/components/popconfirm/theme/default.ts create mode 100644 packages/components/popconfirm/theme/index.ts create mode 100644 packages/components/popconfirm/theme/tokens.ts create mode 100644 packages/components/popover/style/index.ts delete mode 100644 packages/components/popover/style/themes/default.less delete mode 100644 packages/components/popover/style/themes/default.ts delete mode 100644 packages/components/popover/style/themes/default.variable.less delete mode 100644 packages/components/popover/style/themes/seer.less delete mode 100644 packages/components/popover/style/themes/seer.ts delete mode 100644 packages/components/popover/style/themes/seer.variable.less create mode 100644 packages/components/popover/theme/default.css create mode 100644 packages/components/popover/theme/default.ts create mode 100644 packages/components/popover/theme/index.ts create mode 100644 packages/components/popover/theme/tokens.ts create mode 100644 packages/components/progress/style/index.ts delete mode 100644 packages/components/progress/style/themes/default.less delete mode 100644 packages/components/progress/style/themes/default.ts delete mode 100644 packages/components/progress/style/themes/default.variable.less delete mode 100644 packages/components/progress/style/themes/seer.less delete mode 100644 packages/components/progress/style/themes/seer.ts delete mode 100644 packages/components/progress/style/themes/seer.variable.less create mode 100644 packages/components/progress/theme/default.css create mode 100644 packages/components/progress/theme/default.ts create mode 100644 packages/components/progress/theme/index.ts create mode 100644 packages/components/progress/theme/tokens.ts create mode 100644 packages/components/radio/style/index.ts delete mode 100644 packages/components/radio/style/themes/default.less delete mode 100644 packages/components/radio/style/themes/default.ts delete mode 100644 packages/components/radio/style/themes/default.variable.less delete mode 100644 packages/components/radio/style/themes/seer.less delete mode 100644 packages/components/radio/style/themes/seer.ts delete mode 100644 packages/components/radio/style/themes/seer.variable.less create mode 100644 packages/components/radio/theme/default.css create mode 100644 packages/components/radio/theme/default.ts create mode 100644 packages/components/radio/theme/index.ts create mode 100644 packages/components/radio/theme/tokens.ts create mode 100644 packages/components/rate/style/index.ts delete mode 100644 packages/components/rate/style/themes/default.less delete mode 100644 packages/components/rate/style/themes/default.ts delete mode 100644 packages/components/rate/style/themes/default.variable.less delete mode 100644 packages/components/rate/style/themes/seer.less delete mode 100644 packages/components/rate/style/themes/seer.ts delete mode 100644 packages/components/rate/style/themes/seer.variable.less create mode 100644 packages/components/rate/theme/default.css create mode 100644 packages/components/rate/theme/default.ts create mode 100644 packages/components/rate/theme/index.ts create mode 100644 packages/components/rate/theme/tokens.ts create mode 100644 packages/components/result/style/index.ts delete mode 100644 packages/components/result/style/themes/default.less delete mode 100644 packages/components/result/style/themes/default.ts delete mode 100644 packages/components/result/style/themes/default.variable.less delete mode 100644 packages/components/result/style/themes/seer.less delete mode 100644 packages/components/result/style/themes/seer.ts delete mode 100644 packages/components/result/style/themes/seer.variable.less create mode 100644 packages/components/result/theme/default.css create mode 100644 packages/components/result/theme/default.ts create mode 100644 packages/components/result/theme/index.ts create mode 100644 packages/components/result/theme/tokens.ts delete mode 100644 packages/components/seer.full.less delete mode 100644 packages/components/seer.less create mode 100644 packages/components/select/style/index.ts create mode 100644 packages/components/select/style/mixin.less delete mode 100644 packages/components/select/style/themes/default.less delete mode 100644 packages/components/select/style/themes/default.ts delete mode 100644 packages/components/select/style/themes/default.variable.less delete mode 100644 packages/components/select/style/themes/seer.less delete mode 100644 packages/components/select/style/themes/seer.ts delete mode 100644 packages/components/select/style/themes/seer.variable.less create mode 100644 packages/components/select/theme/default.css create mode 100644 packages/components/select/theme/default.ts create mode 100644 packages/components/select/theme/index.ts create mode 100644 packages/components/select/theme/tokens.ts create mode 100644 packages/components/skeleton/style/index.ts delete mode 100644 packages/components/skeleton/style/themes/default.less delete mode 100644 packages/components/skeleton/style/themes/default.ts delete mode 100644 packages/components/skeleton/style/themes/default.variable.less delete mode 100644 packages/components/skeleton/style/themes/seer.less delete mode 100644 packages/components/skeleton/style/themes/seer.ts delete mode 100644 packages/components/skeleton/style/themes/seer.variable.less create mode 100644 packages/components/skeleton/theme/default.css create mode 100644 packages/components/skeleton/theme/default.ts create mode 100644 packages/components/skeleton/theme/index.ts create mode 100644 packages/components/skeleton/theme/tokens.ts create mode 100644 packages/components/slider/style/index.ts delete mode 100644 packages/components/slider/style/themes/default.less delete mode 100644 packages/components/slider/style/themes/default.ts delete mode 100644 packages/components/slider/style/themes/default.variable.less delete mode 100644 packages/components/slider/style/themes/seer.less delete mode 100644 packages/components/slider/style/themes/seer.ts delete mode 100644 packages/components/slider/style/themes/seer.variable.less create mode 100644 packages/components/slider/theme/default.css create mode 100644 packages/components/slider/theme/default.ts create mode 100644 packages/components/slider/theme/index.ts create mode 100644 packages/components/slider/theme/tokens.ts create mode 100644 packages/components/space/style/index.ts delete mode 100644 packages/components/space/style/themes/default.less delete mode 100644 packages/components/space/style/themes/default.ts delete mode 100644 packages/components/space/style/themes/default.variable.less delete mode 100644 packages/components/space/style/themes/seer.less delete mode 100644 packages/components/space/style/themes/seer.ts delete mode 100644 packages/components/space/style/themes/seer.variable.less create mode 100644 packages/components/space/theme/default.css create mode 100644 packages/components/space/theme/default.ts create mode 100644 packages/components/space/theme/index.ts create mode 100644 packages/components/space/theme/seer.css create mode 100644 packages/components/space/theme/tokens.ts create mode 100644 packages/components/spin/style/index.ts rename packages/components/{_private/loading/style/index.less => spin/style/loading.less} (58%) delete mode 100644 packages/components/spin/style/themes/default.less delete mode 100644 packages/components/spin/style/themes/default.ts delete mode 100644 packages/components/spin/style/themes/default.variable.less delete mode 100644 packages/components/spin/style/themes/seer.less delete mode 100644 packages/components/spin/style/themes/seer.ts delete mode 100644 packages/components/spin/style/themes/seer.variable.less create mode 100644 packages/components/spin/theme/default.css create mode 100644 packages/components/spin/theme/default.ts create mode 100644 packages/components/spin/theme/index.ts create mode 100644 packages/components/spin/theme/seer.css create mode 100644 packages/components/spin/theme/tokens.ts create mode 100644 packages/components/statistic/style/index.ts delete mode 100644 packages/components/statistic/style/themes/default.less delete mode 100644 packages/components/statistic/style/themes/default.ts delete mode 100644 packages/components/statistic/style/themes/default.variable.less delete mode 100644 packages/components/statistic/style/themes/seer.less delete mode 100644 packages/components/statistic/style/themes/seer.ts delete mode 100644 packages/components/statistic/style/themes/seer.variable.less create mode 100644 packages/components/statistic/theme/default.css create mode 100644 packages/components/statistic/theme/default.ts create mode 100644 packages/components/statistic/theme/index.ts create mode 100644 packages/components/statistic/theme/tokens.ts create mode 100644 packages/components/stepper/style/index.ts delete mode 100644 packages/components/stepper/style/themes/default.less delete mode 100644 packages/components/stepper/style/themes/default.ts delete mode 100644 packages/components/stepper/style/themes/default.variable.less delete mode 100644 packages/components/stepper/style/themes/seer.less delete mode 100644 packages/components/stepper/style/themes/seer.ts delete mode 100644 packages/components/stepper/style/themes/seer.variable.less create mode 100644 packages/components/stepper/theme/default.css create mode 100644 packages/components/stepper/theme/default.ts create mode 100644 packages/components/stepper/theme/index.ts create mode 100644 packages/components/stepper/theme/tokens.ts rename packages/components/style/core/{reset-scroll.default.less => reset-scroll.less} (59%) delete mode 100644 packages/components/style/core/reset-scroll.seer.less delete mode 100644 packages/components/style/core/reset.default.less delete mode 100644 packages/components/style/core/reset.seer.less delete mode 100644 packages/components/style/themes/dark.less delete mode 100644 packages/components/style/themes/default.less delete mode 100644 packages/components/style/themes/seer.less delete mode 100644 packages/components/style/variable/color/bezierEasing.less delete mode 100644 packages/components/style/variable/color/color.less delete mode 100644 packages/components/style/variable/color/colorPalette.less delete mode 100644 packages/components/style/variable/color/tinyColor.less delete mode 100644 packages/components/style/variable/height.less delete mode 100644 packages/components/style/variable/spacing.less delete mode 100644 packages/components/style/variable/width.less delete mode 100644 packages/components/style/variable/zindex.less create mode 100644 packages/components/switch/style/index.ts delete mode 100644 packages/components/switch/style/themes/default.less delete mode 100644 packages/components/switch/style/themes/default.ts delete mode 100644 packages/components/switch/style/themes/default.variable.less delete mode 100644 packages/components/switch/style/themes/seer.less delete mode 100644 packages/components/switch/style/themes/seer.ts delete mode 100644 packages/components/switch/style/themes/seer.variable.less create mode 100644 packages/components/switch/theme/default.css create mode 100644 packages/components/switch/theme/default.ts create mode 100644 packages/components/switch/theme/index.ts create mode 100644 packages/components/switch/theme/tokens.ts create mode 100644 packages/components/table/style/index.ts delete mode 100644 packages/components/table/style/themes/default.less delete mode 100644 packages/components/table/style/themes/default.ts delete mode 100644 packages/components/table/style/themes/default.variable.less delete mode 100644 packages/components/table/style/themes/seer.less delete mode 100644 packages/components/table/style/themes/seer.ts delete mode 100644 packages/components/table/style/themes/seer.variable.less create mode 100644 packages/components/table/theme/default.css create mode 100644 packages/components/table/theme/default.ts create mode 100644 packages/components/table/theme/index.ts create mode 100644 packages/components/table/theme/tokens.ts create mode 100644 packages/components/tabs/style/index.ts delete mode 100644 packages/components/tabs/style/themes/default.less delete mode 100644 packages/components/tabs/style/themes/default.ts delete mode 100644 packages/components/tabs/style/themes/default.variable.less delete mode 100644 packages/components/tabs/style/themes/seer.less delete mode 100644 packages/components/tabs/style/themes/seer.ts delete mode 100644 packages/components/tabs/style/themes/seer.variable.less create mode 100644 packages/components/tabs/theme/default.css create mode 100644 packages/components/tabs/theme/default.ts create mode 100644 packages/components/tabs/theme/index.ts create mode 100644 packages/components/tabs/theme/tokens.ts create mode 100644 packages/components/tag/style/index.ts delete mode 100644 packages/components/tag/style/themes/default.less delete mode 100644 packages/components/tag/style/themes/default.ts delete mode 100644 packages/components/tag/style/themes/default.variable.less delete mode 100644 packages/components/tag/style/themes/seer.less delete mode 100644 packages/components/tag/style/themes/seer.ts delete mode 100644 packages/components/tag/style/themes/seer.variable.less create mode 100644 packages/components/tag/theme/default.css create mode 100644 packages/components/tag/theme/default.ts create mode 100644 packages/components/tag/theme/index.ts create mode 100644 packages/components/tag/theme/tokens.ts create mode 100644 packages/components/text/style/index.ts delete mode 100644 packages/components/text/style/themes/default.less delete mode 100644 packages/components/text/style/themes/default.ts delete mode 100644 packages/components/text/style/themes/default.variable.less delete mode 100644 packages/components/text/style/themes/seer.less delete mode 100644 packages/components/text/style/themes/seer.ts delete mode 100644 packages/components/text/style/themes/seer.variable.less create mode 100644 packages/components/textarea/style/index.ts delete mode 100644 packages/components/textarea/style/themes/default.less delete mode 100644 packages/components/textarea/style/themes/default.ts delete mode 100644 packages/components/textarea/style/themes/default.variable.less delete mode 100644 packages/components/textarea/style/themes/seer.less delete mode 100644 packages/components/textarea/style/themes/seer.ts delete mode 100644 packages/components/textarea/style/themes/seer.variable.less create mode 100644 packages/components/textarea/theme/default.css create mode 100644 packages/components/textarea/theme/default.ts create mode 100644 packages/components/textarea/theme/index.ts create mode 100644 packages/components/textarea/theme/tokens.ts create mode 100644 packages/components/textarea/theme/transforms.ts create mode 100644 packages/components/theme/__tests__/theme.spec.ts create mode 100644 packages/components/theme/index.ts create mode 100644 packages/components/theme/src/ThemeProvider.tsx create mode 100644 packages/components/theme/src/composables/useDynamicCss.ts create mode 100644 packages/components/theme/src/composables/useTokenMerge.ts create mode 100644 packages/components/theme/src/composables/useTokenRegister.ts create mode 100644 packages/components/theme/src/themeTokens/default/getBasicTokens.ts create mode 100644 packages/components/theme/src/themeTokens/default/getDefaultTokens.ts create mode 100644 packages/components/theme/src/themeTokens/default/getDerivedTokens.ts create mode 100644 packages/components/theme/src/themeTokens/default/getExtendedTokens.ts create mode 100644 packages/components/theme/src/themeTokens/default/getResetTokens.ts create mode 100644 packages/components/theme/src/themeTokens/index.ts create mode 100644 packages/components/theme/src/themeTokens/shared/getAlphaColor.ts create mode 100644 packages/components/theme/src/themeTokens/shared/getBaseColors.ts create mode 100644 packages/components/theme/src/themeTokens/shared/getColorPalette.ts create mode 100644 packages/components/theme/src/themeTokens/shared/getGreyColors.ts create mode 100644 packages/components/theme/src/themeTokens/shared/getSolidColor.ts create mode 100644 packages/components/theme/src/themeTokens/shared/index.ts create mode 100644 packages/components/theme/src/token.ts create mode 100644 packages/components/theme/src/types/dynamicCss.ts create mode 100644 packages/components/theme/src/types/index.ts create mode 100644 packages/components/theme/src/types/themeProvider.ts create mode 100644 packages/components/theme/src/types/themeTokens/basicToken.ts create mode 100644 packages/components/theme/src/types/themeTokens/componentTokens.ts create mode 100644 packages/components/theme/src/types/themeTokens/derived/color.ts create mode 100644 packages/components/theme/src/types/themeTokens/derived/font.ts create mode 100644 packages/components/theme/src/types/themeTokens/derived/index.ts create mode 100644 packages/components/theme/src/types/themeTokens/derived/motion.ts create mode 100644 packages/components/theme/src/types/themeTokens/derived/shadow.ts create mode 100644 packages/components/theme/src/types/themeTokens/derived/size.ts create mode 100644 packages/components/theme/src/types/themeTokens/extended/color.ts create mode 100644 packages/components/theme/src/types/themeTokens/extended/control.ts create mode 100644 packages/components/theme/src/types/themeTokens/extended/font.ts create mode 100644 packages/components/theme/src/types/themeTokens/extended/index.ts create mode 100644 packages/components/theme/src/types/themeTokens/extended/overlay.ts create mode 100644 packages/components/theme/src/types/themeTokens/extended/scrollbar.ts create mode 100644 packages/components/theme/src/types/themeTokens/extended/size.ts create mode 100644 packages/components/theme/src/types/themeTokens/index.ts create mode 100644 packages/components/theme/src/types/themeTokens/reset.ts create mode 100644 packages/components/theme/src/types/tokenRecord.ts create mode 100644 packages/components/theme/src/types/tokenTransform.ts create mode 100644 packages/components/theme/src/useThemeToken.ts create mode 100644 packages/components/theme/src/utils/createTokensHash.ts create mode 100644 packages/components/theme/src/utils/dynamicCss.ts create mode 100644 packages/components/theme/src/utils/index.ts create mode 100644 packages/components/theme/src/utils/tokenToCss.ts create mode 100644 packages/components/theme/src/utils/tokenTransforms.ts create mode 100644 packages/components/time-picker/style/index.ts create mode 100644 packages/components/time-picker/style/panel.less delete mode 100644 packages/components/time-picker/style/themes/default.less delete mode 100644 packages/components/time-picker/style/themes/default.ts delete mode 100644 packages/components/time-picker/style/themes/default.variable.less delete mode 100644 packages/components/time-picker/style/themes/seer.less delete mode 100644 packages/components/time-picker/style/themes/seer.ts delete mode 100644 packages/components/time-picker/style/themes/seer.variable.less create mode 100644 packages/components/time-picker/theme/default.css create mode 100644 packages/components/time-picker/theme/default.ts create mode 100644 packages/components/time-picker/theme/index.ts create mode 100644 packages/components/time-picker/theme/tokens.ts create mode 100644 packages/components/timeline/style/index.ts delete mode 100644 packages/components/timeline/style/themes/default.less delete mode 100644 packages/components/timeline/style/themes/default.ts delete mode 100644 packages/components/timeline/style/themes/default.variable.less delete mode 100644 packages/components/timeline/style/themes/seer.less delete mode 100644 packages/components/timeline/style/themes/seer.ts delete mode 100644 packages/components/timeline/style/themes/seer.variable.less create mode 100644 packages/components/timeline/theme/default.css create mode 100644 packages/components/timeline/theme/default.ts create mode 100644 packages/components/timeline/theme/index.ts create mode 100644 packages/components/timeline/theme/tokens.ts create mode 100644 packages/components/tooltip/style/index.ts delete mode 100644 packages/components/tooltip/style/themes/default.less delete mode 100644 packages/components/tooltip/style/themes/default.ts delete mode 100644 packages/components/tooltip/style/themes/default.variable.less delete mode 100644 packages/components/tooltip/style/themes/seer.less delete mode 100644 packages/components/tooltip/style/themes/seer.ts delete mode 100644 packages/components/tooltip/style/themes/seer.variable.less create mode 100644 packages/components/tooltip/theme/default.css create mode 100644 packages/components/tooltip/theme/default.ts create mode 100644 packages/components/tooltip/theme/index.ts create mode 100644 packages/components/tooltip/theme/tokens.ts create mode 100644 packages/components/tour/style/index.ts delete mode 100644 packages/components/tour/style/themes/default.less delete mode 100644 packages/components/tour/style/themes/default.ts delete mode 100644 packages/components/tour/style/themes/default.variable.less delete mode 100644 packages/components/tour/style/themes/seer.less delete mode 100644 packages/components/tour/style/themes/seer.ts delete mode 100644 packages/components/tour/style/themes/seer.variable.less create mode 100644 packages/components/tour/theme/default.css create mode 100644 packages/components/tour/theme/default.ts create mode 100644 packages/components/tour/theme/index.ts create mode 100644 packages/components/tour/theme/tokens.ts create mode 100644 packages/components/transfer/style/index.ts delete mode 100644 packages/components/transfer/style/themes/default.less delete mode 100644 packages/components/transfer/style/themes/default.ts delete mode 100644 packages/components/transfer/style/themes/default.variable.less delete mode 100644 packages/components/transfer/style/themes/seer.less delete mode 100644 packages/components/transfer/style/themes/seer.ts delete mode 100644 packages/components/transfer/style/themes/seer.variable.less create mode 100644 packages/components/transfer/theme/default.css create mode 100644 packages/components/transfer/theme/default.ts create mode 100644 packages/components/transfer/theme/index.ts create mode 100644 packages/components/transfer/theme/tokens.ts create mode 100644 packages/components/tree-select/style/index.ts delete mode 100644 packages/components/tree-select/style/themes/default.less delete mode 100644 packages/components/tree-select/style/themes/default.ts delete mode 100644 packages/components/tree-select/style/themes/default.variable.less delete mode 100644 packages/components/tree-select/style/themes/seer.less delete mode 100644 packages/components/tree-select/style/themes/seer.ts delete mode 100644 packages/components/tree-select/style/themes/seer.variable.less create mode 100644 packages/components/tree-select/theme/default.css create mode 100644 packages/components/tree-select/theme/default.ts create mode 100644 packages/components/tree-select/theme/index.ts create mode 100644 packages/components/tree-select/theme/tokens.ts create mode 100644 packages/components/tree/style/index.ts delete mode 100644 packages/components/tree/style/themes/default.less delete mode 100644 packages/components/tree/style/themes/default.ts delete mode 100644 packages/components/tree/style/themes/default.variable.less delete mode 100644 packages/components/tree/style/themes/seer.less delete mode 100644 packages/components/tree/style/themes/seer.ts delete mode 100644 packages/components/tree/style/themes/seer.variable.less create mode 100644 packages/components/tree/theme/default.css create mode 100644 packages/components/tree/theme/default.ts create mode 100644 packages/components/tree/theme/index.ts create mode 100644 packages/components/tree/theme/tokens.ts create mode 100644 packages/components/upload/style/index.ts delete mode 100644 packages/components/upload/style/themes/default.less delete mode 100644 packages/components/upload/style/themes/default.ts delete mode 100644 packages/components/upload/style/themes/default.variable.less delete mode 100644 packages/components/upload/style/themes/seer.less delete mode 100644 packages/components/upload/style/themes/seer.ts delete mode 100644 packages/components/upload/style/themes/seer.variable.less create mode 100644 packages/components/upload/style/variable.less create mode 100644 packages/components/upload/theme/default.css create mode 100644 packages/components/upload/theme/default.ts create mode 100644 packages/components/upload/theme/index.ts create mode 100644 packages/components/upload/theme/tokens.ts create mode 100644 packages/components/watermark/style/index.ts delete mode 100644 packages/components/watermark/style/themes/default.less delete mode 100644 packages/components/watermark/style/themes/default.ts delete mode 100644 packages/components/watermark/style/themes/default.variable.less delete mode 100644 packages/components/watermark/style/themes/seer.less delete mode 100644 packages/components/watermark/style/themes/seer.ts delete mode 100644 packages/components/watermark/style/themes/seer.variable.less create mode 100644 packages/pro/default.full.css delete mode 100644 packages/pro/default.less create mode 100644 packages/pro/form/style/index.ts delete mode 100644 packages/pro/form/style/themes/default.less delete mode 100644 packages/pro/form/style/themes/default.ts delete mode 100644 packages/pro/form/style/themes/default.variable.less delete mode 100644 packages/pro/form/style/themes/seer.less delete mode 100644 packages/pro/form/style/themes/seer.ts delete mode 100644 packages/pro/form/style/themes/seer.variable.less create mode 100644 packages/pro/index.less create mode 100644 packages/pro/layout/src/contents/MenuThemeProvider.tsx create mode 100644 packages/pro/layout/style/index.ts delete mode 100644 packages/pro/layout/style/themes/default.less delete mode 100644 packages/pro/layout/style/themes/default.ts delete mode 100644 packages/pro/layout/style/themes/default.variable.less delete mode 100644 packages/pro/layout/style/themes/seer.less delete mode 100644 packages/pro/layout/style/themes/seer.ts delete mode 100644 packages/pro/layout/style/themes/seer.variable.less create mode 100644 packages/pro/layout/theme/default.css create mode 100644 packages/pro/layout/theme/default.ts create mode 100644 packages/pro/layout/theme/index.ts create mode 100644 packages/pro/layout/theme/tokens.ts create mode 100644 packages/pro/search/style/index.ts delete mode 100644 packages/pro/search/style/themes/default.less delete mode 100644 packages/pro/search/style/themes/default.ts delete mode 100644 packages/pro/search/style/themes/default.variable.less delete mode 100644 packages/pro/search/style/themes/seer.less delete mode 100644 packages/pro/search/style/themes/seer.ts delete mode 100644 packages/pro/search/style/themes/seer.variable.less create mode 100644 packages/pro/search/style/variables.less create mode 100644 packages/pro/search/theme/default.css create mode 100644 packages/pro/search/theme/default.ts create mode 100644 packages/pro/search/theme/index.ts create mode 100644 packages/pro/search/theme/tokens.ts delete mode 100644 packages/pro/seer.less delete mode 100644 packages/pro/style/themes/dark.less delete mode 100644 packages/pro/style/themes/default.less delete mode 100644 packages/pro/style/themes/seer.less create mode 100644 packages/pro/table/style/index.ts delete mode 100644 packages/pro/table/style/themes/default.less delete mode 100644 packages/pro/table/style/themes/default.ts delete mode 100644 packages/pro/table/style/themes/default.variable.less delete mode 100644 packages/pro/table/style/themes/seer.less delete mode 100644 packages/pro/table/style/themes/seer.ts delete mode 100644 packages/pro/table/style/themes/seer.variable.less create mode 100644 packages/pro/textarea/style/index.ts delete mode 100644 packages/pro/textarea/style/themes/default.less delete mode 100644 packages/pro/textarea/style/themes/default.ts delete mode 100644 packages/pro/textarea/style/themes/default.variable.less delete mode 100644 packages/pro/textarea/style/themes/seer.less delete mode 100644 packages/pro/textarea/style/themes/seer.ts delete mode 100644 packages/pro/textarea/style/themes/seer.variable.less create mode 100644 packages/pro/textarea/theme/default.css create mode 100644 packages/pro/textarea/theme/default.ts create mode 100644 packages/pro/textarea/theme/index.ts create mode 100644 packages/pro/textarea/theme/tokens.ts create mode 100644 packages/pro/textarea/theme/transforms.ts rename packages/{components/typography => pro/theme}/index.ts (50%) create mode 100644 packages/pro/theme/src/types.ts create mode 100644 packages/pro/theme/src/useThemeToken.ts create mode 100644 packages/pro/transfer/style/index.ts delete mode 100644 packages/pro/transfer/style/themes/default.less delete mode 100644 packages/pro/transfer/style/themes/default.ts delete mode 100644 packages/pro/transfer/style/themes/default.variable.less delete mode 100644 packages/pro/transfer/style/themes/seer.less delete mode 100644 packages/pro/transfer/style/themes/seer.ts delete mode 100644 packages/pro/transfer/style/themes/seer.variable.less create mode 100644 packages/pro/transfer/theme/default.css create mode 100644 packages/pro/transfer/theme/default.ts create mode 100644 packages/pro/transfer/theme/index.ts create mode 100644 packages/pro/transfer/theme/tokens.ts create mode 100644 packages/pro/tree/style/index.ts delete mode 100644 packages/pro/tree/style/themes/default.less delete mode 100644 packages/pro/tree/style/themes/default.ts delete mode 100644 packages/pro/tree/style/themes/seer.less delete mode 100644 packages/pro/tree/style/themes/seer.ts delete mode 100644 packages/pro/tree/style/themes/seer.variable.less rename packages/pro/tree/style/{themes/default.variable.less => variables.less} (56%) create mode 100644 packages/pro/tree/theme/default.css create mode 100644 packages/pro/tree/theme/default.ts create mode 100644 packages/pro/tree/theme/index.ts create mode 100644 packages/pro/tree/theme/tokens.ts delete mode 100644 packages/site/src/styles/themes/default.less delete mode 100644 packages/site/src/styles/themes/seer.less create mode 100644 scripts/gen/colors/run.ts create mode 100644 scripts/gen/colors/update.ts create mode 100644 scripts/gen/generateTheme.ts create mode 100644 scripts/gen/theme/run.ts create mode 100644 scripts/gen/theme/update.ts create mode 100644 scripts/gulp/test.ts create mode 100644 scripts/vite/dom/domKeys.ts create mode 100644 scripts/vite/dom/index.ts create mode 100644 scripts/vite/index.ts rename packages/components/_private/selector/style/themes/default.variable.less => scripts/vite/run.ts (100%) 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/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.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.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/themes/seer.ts b/packages/components/badge/style/index.ts similarity index 51% rename from packages/components/badge/style/themes/seer.ts rename to packages/components/badge/style/index.ts index 8f61ab076..64e699152 100644 --- a/packages/components/badge/style/themes/seer.ts +++ b/packages/components/badge/style/index.ts @@ -1,3 +1,3 @@ // style dependencies -import './seer.less' +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.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 () => ( -