@fle-ui/next 1.0.5-alpha.5 → 1.0.5-alpha.6

package/es/style/themes/index.less

@@ -1,6 +1,6 @@
 // Default using variable as entry to support site variable version
 // This will be replaced in webpack bundle
-@root-entry-name: default;
+@root-entry-name: variable;
 
 // @import './default.less';
 // @import './variable.less';

package/es/style/themes/variable.less

@@ -14,8 +14,12 @@
 
   // ========= Primary Color =========
   --@{ant-prefix}-primary-color: @base-primary;
-  --@{ant-prefix}-primary-color-hover: color(~`colorPalette('@{base-primary}', 5) `);
-  --@{ant-prefix}-primary-color-active: color(~`colorPalette('@{base-primary}', 7) `);
+  --@{ant-prefix}-primary-color-hover: color(
+    ~`colorPalette('@{base-primary}', 5) `
+  );
+  --@{ant-prefix}-primary-color-active: color(
+    ~`colorPalette('@{base-primary}', 7) `
+  );
   --@{ant-prefix}-primary-color-outline: fade(@base-primary, @outline-fade);
 
   // Legacy
@@ -36,16 +40,28 @@
   --@{ant-prefix}-primary-color-deprecated-t-20: tint(@base-primary, 20%);
   --@{ant-prefix}-primary-color-deprecated-t-50: tint(@base-primary, 50%);
   --@{ant-prefix}-primary-color-deprecated-f-12: fade(@base-primary, 12%);
-  --@{ant-prefix}-primary-color-active-deprecated-f-30: fade(@legacy-primary-1, 30%);
-  --@{ant-prefix}-primary-color-active-deprecated-d-02: darken(@legacy-primary-1, 2%);
+  --@{ant-prefix}-primary-color-active-deprecated-f-30: fade(
+    @legacy-primary-1,
+    30%
+  );
+  --@{ant-prefix}-primary-color-active-deprecated-d-02: darken(
+    @legacy-primary-1,
+    2%
+  );
 
   // ========= Success Color =========
   --@{ant-prefix}-success-color: @green-6;
   --@{ant-prefix}-success-color-hover: color(~`colorPalette('@{green-6}', 5) `);
-  --@{ant-prefix}-success-color-active: color(~`colorPalette('@{green-6}', 7) `);
+  --@{ant-prefix}-success-color-active: color(
+    ~`colorPalette('@{green-6}', 7) `
+  );
   --@{ant-prefix}-success-color-outline: fade(@green-6, @outline-fade);
   --@{ant-prefix}-success-color-deprecated-bg: ~`colorPalette('@{green-6}', 1) `;
-  --@{ant-prefix}-success-color-deprecated-border: ~`colorPalette('@{green-6}', 3) `;
+  --@{ant-prefix}-success-color-deprecated-border: ~`colorPalette(
+      '@{green-6}',
+      3
+    )
+    `;
 
   // ========== Error Color ==========
   --@{ant-prefix}-error-color: @red-5;
@@ -61,12 +77,21 @@
   --@{ant-prefix}-warning-color-active: color(~`colorPalette('@{gold-6}', 7) `);
   --@{ant-prefix}-warning-color-outline: fade(@gold-6, @outline-fade);
   --@{ant-prefix}-warning-color-deprecated-bg: ~`colorPalette('@{gold-6}', 1) `;
-  --@{ant-prefix}-warning-color-deprecated-border: ~`colorPalette('@{gold-6}', 3) `;
+  --@{ant-prefix}-warning-color-deprecated-border: ~`colorPalette(
+      '@{gold-6}',
+      3
+    )
+    `;
 
   // ========== Info Color ===========
   --@{ant-prefix}-info-color: @base-primary;
-  --@{ant-prefix}-info-color-deprecated-bg: ~`colorPalette('@{base-primary}', 1) `;
-  --@{ant-prefix}-info-color-deprecated-border: ~`colorPalette('@{base-primary}', 3) `;
+  --@{ant-prefix}-info-color-deprecated-bg: ~`colorPalette('@{base-primary}', 1)
+    `;
+  --@{ant-prefix}-info-color-deprecated-border: ~`colorPalette(
+      '@{base-primary}',
+      3
+    )
+    `;
 }
 
 // -------- Colors -----------
@@ -135,10 +160,11 @@
 // Popover background color
 @popover-background: @component-background;
 @popover-customize-border-color: @border-color-split;
-@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-  'Noto Color Emoji';
-@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+  'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+  'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
+  monospace;
 @text-color: fade(@black, 85%);
 @text-color-secondary: fade(@black, 45%);
 @text-color-inverse: @white;
@@ -160,7 +186,7 @@
 @heading-5-size: ceil(@font-size-base * 1.14);
 // https://github.com/ant-design/ant-design/issues/20210
 @line-height-base: 1.5715;
-@border-radius-base: 2px;
+@border-radius-base: 4px;
 @border-radius-sm: @border-radius-base;
 
 // control border
@@ -238,7 +264,11 @@
 @outline-color: @primary-color; // No use anymore
 @outline-fade: 20%;
 
-@background-color-light: hsv(0, 0, 98%); // background of header and selected item
+@background-color-light: hsv(
+  0,
+  0,
+  98%
+); // background of header and selected item
 @background-color-base: hsv(0, 0, 96%); // Default grey background color
 
 // Disabled states
@@ -251,14 +281,14 @@
 @shadow-color: rgba(0, 0, 0, 0.15);
 @shadow-color-inverse: @component-background;
 @box-shadow-base: @shadow-2;
-@shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05),
-  0 -12px 48px 16px rgba(0, 0, 0, 0.03);
-@shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
-  0 12px 48px 16px rgba(0, 0, 0, 0.03);
-@shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05),
-  -12px 0 48px 16px rgba(0, 0, 0, 0.03);
-@shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05),
-  12px 0 48px 16px rgba(0, 0, 0, 0.03);
+@shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.08),
+  0 -9px 28px 0 rgba(0, 0, 0, 0.05), 0 -12px 48px 16px rgba(0, 0, 0, 0.03);
+@shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.08),
+  0 9px 28px 0 rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03);
+@shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08),
+  -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03);
+@shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.08),
+  9px 0 28px 0 rgba(0, 0, 0, 0.05), 12px 0 48px 16px rgba(0, 0, 0, 0.03);
 @shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
   0 9px 28px 8px rgba(0, 0, 0, 0.05);
 
@@ -488,13 +518,18 @@
 @input-padding-horizontal-sm: @control-padding-horizontal-sm - 1px;
 @input-padding-horizontal-lg: @input-padding-horizontal;
 @input-padding-vertical-base: max(
-  (round(((@input-height-base - @font-size-base * @line-height-base) / 2) * 10) / 10) -
-    @border-width-base,
+  (
+      round(
+          ((@input-height-base - @font-size-base * @line-height-base) / 2) * 10
+        ) / 10
+    ) - @border-width-base,
   3px
 );
 @input-padding-vertical-sm: max(
-  (round(((@input-height-sm - @font-size-base * @line-height-base) / 2) * 10) / 10) -
-    @border-width-base,
+  (
+      round(((@input-height-sm - @font-size-base * @line-height-base) / 2) * 10) /
+        10
+    ) - @border-width-base,
   0
 );
 @input-padding-vertical-lg: (
@@ -539,7 +574,8 @@
 @select-selection-item-bg: @background-color-base;
 @select-selection-item-border-color: @border-color-split;
 @select-single-item-height-lg: 40px;
-@select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px
+@select-multiple-item-height: @input-height-base - @input-padding-vertical-base *
+  2; // Normal 24px
 @select-multiple-item-height-lg: 32px;
 @select-multiple-item-spacing-half: ceil((@input-padding-vertical-base / 2));
 @select-multiple-disabled-background: @input-disabled-bg;
@@ -610,21 +646,21 @@
 @modal-header-padding-horizontal: @padding-lg;
 @modal-body-padding: @padding-lg;
 @modal-header-bg: @component-background;
-@modal-header-padding: @modal-header-padding-vertical @modal-header-padding-horizontal;
+@modal-header-padding: 20px 20px;
 @modal-header-border-width: @border-width-base;
 @modal-header-border-style: @border-style-base;
 @modal-header-title-line-height: 22px;
 @modal-header-title-font-size: @font-size-lg;
 @modal-header-border-color-split: @border-color-split;
-@modal-header-close-size: 56px;
+@modal-header-close-size: 63px;
 @modal-content-bg: @component-background;
 @modal-heading-color: @heading-color;
 @modal-close-color: @text-color-secondary;
 @modal-footer-bg: transparent;
 @modal-footer-border-color-split: @border-color-split;
 @modal-footer-border-style: @border-style-base;
-@modal-footer-padding-vertical: 10px;
-@modal-footer-padding-horizontal: 16px;
+@modal-footer-padding-vertical: 16px;
+@modal-footer-padding-horizontal: 24px;
 @modal-footer-border-width: @border-width-base;
 @modal-mask-bg: fade(@black, 45%);
 @modal-confirm-body-padding: 32px 32px 24px;
@@ -806,8 +842,8 @@
 @card-actions-li-margin: 12px 0;
 @card-skeleton-bg: #cfd8dc;
 @card-background: @component-background;
-@card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),
-  0 5px 12px 4px rgba(0, 0, 0, 0.09);
+@card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
+  0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
 @card-radius: @border-radius-base;
 @card-head-tabs-margin-bottom: -17px;
 @card-head-extra-color: @text-color;
@@ -900,8 +936,8 @@
 @pagination-item-size: @height-base;
 @pagination-item-size-sm: 24px;
 @pagination-font-family: @font-family;
-@pagination-font-weight-active: 500;
-@pagination-item-bg-active: @component-background;
+@pagination-font-weight-active: 400;
+@pagination-item-bg-active: @primary-color;
 @pagination-item-link-bg: @component-background;
 @pagination-item-disabled-color-active: @disabled-color;
 @pagination-item-disabled-bg-active: @disabled-active-bg;
@@ -1023,8 +1059,10 @@
 @alert-with-description-no-icon-padding-vertical: @padding-md - 1px;
 @alert-with-description-padding-vertical: @padding-md - 1px;
 @alert-with-description-padding: @alert-with-description-padding-vertical 15px
-  @alert-with-description-no-icon-padding-vertical @alert-with-description-icon-size;
-@alert-icon-top: 8px + @font-size-base * (@line-height-base / 2) - (@font-size-base / 2);
+  @alert-with-description-no-icon-padding-vertical
+  @alert-with-description-icon-size;
+@alert-icon-top: 8px + @font-size-base * (@line-height-base / 2) -
+  (@font-size-base / 2);
 @alert-with-description-icon-size: 24px;
 
 // List

package/es/switch/style/index.css

@@ -2,6 +2,48 @@
 /* stylelint-disable no-duplicate-selectors */
 /* stylelint-disable */
 /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+html {
+  --ant-primary-color: #1890ff;
+  --ant-primary-color-hover: #40a9ff;
+  --ant-primary-color-active: #096dd9;
+  --ant-primary-color-outline: rgba(24, 144, 255, 0.2);
+  --ant-primary-1: #e6f7ff;
+  --ant-primary-2: #bae7ff;
+  --ant-primary-3: #91d5ff;
+  --ant-primary-4: #69c0ff;
+  --ant-primary-5: #40a9ff;
+  --ant-primary-6: #1890ff;
+  --ant-primary-7: #096dd9;
+  --ant-primary-color-deprecated-pure: ;
+  --ant-primary-color-deprecated-l-35: #cbe6ff;
+  --ant-primary-color-deprecated-l-20: #7ec1ff;
+  --ant-primary-color-deprecated-t-20: #46a6ff;
+  --ant-primary-color-deprecated-t-50: #8cc8ff;
+  --ant-primary-color-deprecated-f-12: rgba(24, 144, 255, 0.12);
+  --ant-primary-color-active-deprecated-f-30: rgba(230, 247, 255, 0.3);
+  --ant-primary-color-active-deprecated-d-02: #dcf4ff;
+  --ant-success-color: #36c626;
+  --ant-success-color-hover: #5cd44a;
+  --ant-success-color-active: #20a116;
+  --ant-success-color-outline: rgba(54, 198, 38, 0.2);
+  --ant-success-color-deprecated-bg: #f4fff0;
+  --ant-success-color-deprecated-border: #afed9f;
+  --ant-error-color: #ff5c57;
+  --ant-error-color-hover: #ff8880;
+  --ant-error-color-active: #d93f3f;
+  --ant-error-color-outline: rgba(255, 92, 87, 0.2);
+  --ant-error-color-deprecated-bg: #fff3f0;
+  --ant-error-color-deprecated-border: #ffd7d1;
+  --ant-warning-color: #ffab00;
+  --ant-warning-color-hover: #ffbf29;
+  --ant-warning-color-active: #d98900;
+  --ant-warning-color-outline: rgba(255, 171, 0, 0.2);
+  --ant-warning-color-deprecated-bg: #fffbe6;
+  --ant-warning-color-deprecated-border: #ffe07a;
+  --ant-info-color: #1890ff;
+  --ant-info-color-deprecated-bg: #e6f7ff;
+  --ant-info-color-deprecated-border: #91d5ff;
+}
 .ant-switch {
   margin: 0;
   padding: 0;
@@ -33,7 +75,7 @@
   box-shadow: 0 0 0 2px rgba(169, 169, 169, 0.1);
 }
 .ant-switch-checked:focus {
-  box-shadow: 0 0 0 2px #f0f7ff;
+  box-shadow: 0 0 0 2px var(--ant-primary-1);
 }
 .ant-switch:focus:hover {
   box-shadow: none;

package/es/table/style/index.css

@@ -2,6 +2,48 @@
 /* stylelint-disable no-duplicate-selectors */
 /* stylelint-disable */
 /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+html {
+  --ant-primary-color: #1890ff;
+  --ant-primary-color-hover: #40a9ff;
+  --ant-primary-color-active: #096dd9;
+  --ant-primary-color-outline: rgba(24, 144, 255, 0.2);
+  --ant-primary-1: #e6f7ff;
+  --ant-primary-2: #bae7ff;
+  --ant-primary-3: #91d5ff;
+  --ant-primary-4: #69c0ff;
+  --ant-primary-5: #40a9ff;
+  --ant-primary-6: #1890ff;
+  --ant-primary-7: #096dd9;
+  --ant-primary-color-deprecated-pure: ;
+  --ant-primary-color-deprecated-l-35: #cbe6ff;
+  --ant-primary-color-deprecated-l-20: #7ec1ff;
+  --ant-primary-color-deprecated-t-20: #46a6ff;
+  --ant-primary-color-deprecated-t-50: #8cc8ff;
+  --ant-primary-color-deprecated-f-12: rgba(24, 144, 255, 0.12);
+  --ant-primary-color-active-deprecated-f-30: rgba(230, 247, 255, 0.3);
+  --ant-primary-color-active-deprecated-d-02: #dcf4ff;
+  --ant-success-color: #36c626;
+  --ant-success-color-hover: #5cd44a;
+  --ant-success-color-active: #20a116;
+  --ant-success-color-outline: rgba(54, 198, 38, 0.2);
+  --ant-success-color-deprecated-bg: #f4fff0;
+  --ant-success-color-deprecated-border: #afed9f;
+  --ant-error-color: #ff5c57;
+  --ant-error-color-hover: #ff8880;
+  --ant-error-color-active: #d93f3f;
+  --ant-error-color-outline: rgba(255, 92, 87, 0.2);
+  --ant-error-color-deprecated-bg: #fff3f0;
+  --ant-error-color-deprecated-border: #ffd7d1;
+  --ant-warning-color: #ffab00;
+  --ant-warning-color-hover: #ffbf29;
+  --ant-warning-color-active: #d98900;
+  --ant-warning-color-outline: rgba(255, 171, 0, 0.2);
+  --ant-warning-color-deprecated-bg: #fffbe6;
+  --ant-warning-color-deprecated-border: #ffe07a;
+  --ant-info-color: #1890ff;
+  --ant-info-color-deprecated-bg: #e6f7ff;
+  --ant-info-color-deprecated-border: #91d5ff;
+}
 .ant-table.ant-table-middle {
   font-size: 14px;
 }
@@ -264,11 +306,11 @@
   background: #fafafa;
 }
 .ant-table-tbody > tr.ant-table-row-selected > td {
-  background: #f0f7ff;
+  background: var(--ant-primary-1);
   border-color: rgba(0, 0, 0, 0.03);
 }
 .ant-table-tbody > tr.ant-table-row-selected:hover > td {
-  background: #e6f2ff;
+  background: var(--ant-primary-color-active-deprecated-d-02);
 }
 .ant-table-summary {
   position: relative;
@@ -435,7 +477,7 @@ td.ant-table-column-sort {
 }
 .ant-table-filter-dropdown-tree .ant-tree-treenode-checkbox-checked .ant-tree-node-content-wrapper,
 .ant-table-filter-dropdown-tree .ant-tree-treenode-checkbox-checked .ant-tree-node-content-wrapper:hover {
-  background-color: #cfe3ff;
+  background-color: var(--ant-primary-2);
 }
 .ant-table-filter-dropdown-search {
   padding: 8px;
@@ -551,10 +593,10 @@ table tr th.ant-table-selection-column::after {
 }
 .ant-table-row-expand-icon:focus,
 .ant-table-row-expand-icon:hover {
-  color: #548aff;
+  color: var(--ant-primary-color-hover);
 }
 .ant-table-row-expand-icon:active {
-  color: #1a4ad9;
+  color: var(--ant-primary-color-active);
 }
 .ant-table-row-expand-icon:focus,
 .ant-table-row-expand-icon:hover,

package/es/tabs/style/index.css

@@ -2,6 +2,48 @@
 /* stylelint-disable no-duplicate-selectors */
 /* stylelint-disable */
 /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+html {
+  --ant-primary-color: #1890ff;
+  --ant-primary-color-hover: #40a9ff;
+  --ant-primary-color-active: #096dd9;
+  --ant-primary-color-outline: rgba(24, 144, 255, 0.2);
+  --ant-primary-1: #e6f7ff;
+  --ant-primary-2: #bae7ff;
+  --ant-primary-3: #91d5ff;
+  --ant-primary-4: #69c0ff;
+  --ant-primary-5: #40a9ff;
+  --ant-primary-6: #1890ff;
+  --ant-primary-7: #096dd9;
+  --ant-primary-color-deprecated-pure: ;
+  --ant-primary-color-deprecated-l-35: #cbe6ff;
+  --ant-primary-color-deprecated-l-20: #7ec1ff;
+  --ant-primary-color-deprecated-t-20: #46a6ff;
+  --ant-primary-color-deprecated-t-50: #8cc8ff;
+  --ant-primary-color-deprecated-f-12: rgba(24, 144, 255, 0.12);
+  --ant-primary-color-active-deprecated-f-30: rgba(230, 247, 255, 0.3);
+  --ant-primary-color-active-deprecated-d-02: #dcf4ff;
+  --ant-success-color: #36c626;
+  --ant-success-color-hover: #5cd44a;
+  --ant-success-color-active: #20a116;
+  --ant-success-color-outline: rgba(54, 198, 38, 0.2);
+  --ant-success-color-deprecated-bg: #f4fff0;
+  --ant-success-color-deprecated-border: #afed9f;
+  --ant-error-color: #ff5c57;
+  --ant-error-color-hover: #ff8880;
+  --ant-error-color-active: #d93f3f;
+  --ant-error-color-outline: rgba(255, 92, 87, 0.2);
+  --ant-error-color-deprecated-bg: #fff3f0;
+  --ant-error-color-deprecated-border: #ffd7d1;
+  --ant-warning-color: #ffab00;
+  --ant-warning-color-hover: #ffbf29;
+  --ant-warning-color-active: #d98900;
+  --ant-warning-color-outline: rgba(255, 171, 0, 0.2);
+  --ant-warning-color-deprecated-bg: #fffbe6;
+  --ant-warning-color-deprecated-border: #ffe07a;
+  --ant-info-color: #1890ff;
+  --ant-info-color-deprecated-bg: #e6f7ff;
+  --ant-info-color-deprecated-border: #91d5ff;
+}
 .ant-tabs-small > .ant-tabs-nav .ant-tabs-tab {
   padding: 8px 0;
   font-size: 14px;
@@ -345,7 +387,7 @@
   cursor: pointer;
 }
 .ant-tabs-dropdown-menu-item-remove:hover {
-  color: #548aff;
+  color: var(--ant-primary-5);
 }
 .ant-tabs-dropdown-menu-item:hover {
   background: #f5f5f5;
@@ -506,13 +548,13 @@
 }
 .ant-tabs > .ant-tabs-nav .ant-tabs-nav-add:hover,
 .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-add:hover {
-  color: #548aff;
+  color: var(--ant-primary-5);
 }
 .ant-tabs > .ant-tabs-nav .ant-tabs-nav-add:active,
 .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-add:active,
 .ant-tabs > .ant-tabs-nav .ant-tabs-nav-add:focus,
 .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-add:focus {
-  color: #1a4ad9;
+  color: var(--ant-primary-7);
 }
 .ant-tabs-extra-content {
   flex: none;
@@ -541,7 +583,7 @@
 .ant-tabs-tab-remove:focus,
 .ant-tabs-tab-btn:active,
 .ant-tabs-tab-remove:active {
-  color: #1a4ad9;
+  color: var(--ant-primary-7);
 }
 .ant-tabs-tab-btn {
   outline: none;
@@ -563,7 +605,7 @@
   color: #262626;
 }
 .ant-tabs-tab:hover {
-  color: #548aff;
+  color: var(--ant-primary-5);
 }
 .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
   color: #2c68ff;

package/es/tag/style/index.css

@@ -2,6 +2,48 @@
 /* stylelint-disable no-duplicate-selectors */
 /* stylelint-disable */
 /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+html {
+  --ant-primary-color: #1890ff;
+  --ant-primary-color-hover: #40a9ff;
+  --ant-primary-color-active: #096dd9;
+  --ant-primary-color-outline: rgba(24, 144, 255, 0.2);
+  --ant-primary-1: #e6f7ff;
+  --ant-primary-2: #bae7ff;
+  --ant-primary-3: #91d5ff;
+  --ant-primary-4: #69c0ff;
+  --ant-primary-5: #40a9ff;
+  --ant-primary-6: #1890ff;
+  --ant-primary-7: #096dd9;
+  --ant-primary-color-deprecated-pure: ;
+  --ant-primary-color-deprecated-l-35: #cbe6ff;
+  --ant-primary-color-deprecated-l-20: #7ec1ff;
+  --ant-primary-color-deprecated-t-20: #46a6ff;
+  --ant-primary-color-deprecated-t-50: #8cc8ff;
+  --ant-primary-color-deprecated-f-12: rgba(24, 144, 255, 0.12);
+  --ant-primary-color-active-deprecated-f-30: rgba(230, 247, 255, 0.3);
+  --ant-primary-color-active-deprecated-d-02: #dcf4ff;
+  --ant-success-color: #36c626;
+  --ant-success-color-hover: #5cd44a;
+  --ant-success-color-active: #20a116;
+  --ant-success-color-outline: rgba(54, 198, 38, 0.2);
+  --ant-success-color-deprecated-bg: #f4fff0;
+  --ant-success-color-deprecated-border: #afed9f;
+  --ant-error-color: #ff5c57;
+  --ant-error-color-hover: #ff8880;
+  --ant-error-color-active: #d93f3f;
+  --ant-error-color-outline: rgba(255, 92, 87, 0.2);
+  --ant-error-color-deprecated-bg: #fff3f0;
+  --ant-error-color-deprecated-border: #ffd7d1;
+  --ant-warning-color: #ffab00;
+  --ant-warning-color-hover: #ffbf29;
+  --ant-warning-color-active: #d98900;
+  --ant-warning-color-outline: rgba(255, 171, 0, 0.2);
+  --ant-warning-color-deprecated-bg: #fffbe6;
+  --ant-warning-color-deprecated-border: #ffe07a;
+  --ant-info-color: #1890ff;
+  --ant-info-color-deprecated-bg: #e6f7ff;
+  --ant-info-color-deprecated-border: #91d5ff;
+}
 .ant-tag {
   box-sizing: border-box;
   margin: 0;
@@ -68,10 +110,10 @@
   color: #fff;
 }
 .ant-tag-checkable-checked {
-  background-color: #2c68ff;
+  background-color: var(--ant-primary-6);
 }
 .ant-tag-checkable:active {
-  background-color: #1a4ad9;
+  background-color: var(--ant-primary-7);
 }
 .ant-tag-hidden {
   display: none;
@@ -97,14 +139,14 @@
   border-color: #eb2f96;
 }
 .ant-tag-red {
-  color: #cf1322;
-  background: #fff1f0;
-  border-color: #ffa39e;
+  color: #cf1b21;
+  background: #fff2f0;
+  border-color: #ffb1a8;
 }
 .ant-tag-red-inverse {
   color: #fff;
-  background: #f5222d;
-  border-color: #f5222d;
+  background: #f42d2d;
+  border-color: #f42d2d;
 }
 .ant-tag-volcano {
   color: #d4380d;
@@ -137,14 +179,14 @@
   border-color: #fadb14;
 }
 .ant-tag-gold {
-  color: #d48806;
+  color: #d98900;
   background: #fffbe6;
-  border-color: #ffe58f;
+  border-color: #ffe07a;
 }
 .ant-tag-gold-inverse {
   color: #fff;
-  background: #faad14;
-  border-color: #faad14;
+  background: #ffab00;
+  border-color: #ffab00;
 }
 .ant-tag-cyan {
   color: #08979c;
@@ -167,14 +209,14 @@
   border-color: #a0d911;
 }
 .ant-tag-green {
-  color: #389e0d;
-  background: #f6ffed;
-  border-color: #b7eb8f;
+  color: #20a116;
+  background: #f4fff0;
+  border-color: #afed9f;
 }
 .ant-tag-green-inverse {
   color: #fff;
-  background: #52c41a;
-  border-color: #52c41a;
+  background: #36c626;
+  border-color: #36c626;
 }
 .ant-tag-blue {
   color: #096dd9;
@@ -208,23 +250,23 @@
 }
 .ant-tag-success {
   color: #36c626;
-  background: #f4fff0;
-  border-color: #afed9f;
+  background: var(--ant-success-color-deprecated-bg);
+  border-color: var(--ant-success-color-deprecated-border);
 }
 .ant-tag-processing {
   color: #2c68ff;
-  background: #f0f7ff;
-  border-color: #a6c8ff;
+  background: var(--ant-info-color-deprecated-bg);
+  border-color: var(--ant-info-color-deprecated-border);
 }
 .ant-tag-error {
   color: #f42d2d;
-  background: #fff2f0;
-  border-color: #ffb1a8;
+  background: var(--ant-error-color-deprecated-bg);
+  border-color: var(--ant-error-color-deprecated-border);
 }
 .ant-tag-warning {
   color: #ffab00;
-  background: #fffbe6;
-  border-color: #ffe07a;
+  background: var(--ant-warning-color-deprecated-bg);
+  border-color: var(--ant-warning-color-deprecated-border);
 }
 .ant-tag > .anticon + span,
 .ant-tag > span + .anticon {

package/es/time-picker/style/index.css

@@ -2,3 +2,45 @@
 /* stylelint-disable no-duplicate-selectors */
 /* stylelint-disable */
 /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+html {
+  --ant-primary-color: #1890ff;
+  --ant-primary-color-hover: #40a9ff;
+  --ant-primary-color-active: #096dd9;
+  --ant-primary-color-outline: rgba(24, 144, 255, 0.2);
+  --ant-primary-1: #e6f7ff;
+  --ant-primary-2: #bae7ff;
+  --ant-primary-3: #91d5ff;
+  --ant-primary-4: #69c0ff;
+  --ant-primary-5: #40a9ff;
+  --ant-primary-6: #1890ff;
+  --ant-primary-7: #096dd9;
+  --ant-primary-color-deprecated-pure: ;
+  --ant-primary-color-deprecated-l-35: #cbe6ff;
+  --ant-primary-color-deprecated-l-20: #7ec1ff;
+  --ant-primary-color-deprecated-t-20: #46a6ff;
+  --ant-primary-color-deprecated-t-50: #8cc8ff;
+  --ant-primary-color-deprecated-f-12: rgba(24, 144, 255, 0.12);
+  --ant-primary-color-active-deprecated-f-30: rgba(230, 247, 255, 0.3);
+  --ant-primary-color-active-deprecated-d-02: #dcf4ff;
+  --ant-success-color: #36c626;
+  --ant-success-color-hover: #5cd44a;
+  --ant-success-color-active: #20a116;
+  --ant-success-color-outline: rgba(54, 198, 38, 0.2);
+  --ant-success-color-deprecated-bg: #f4fff0;
+  --ant-success-color-deprecated-border: #afed9f;
+  --ant-error-color: #ff5c57;
+  --ant-error-color-hover: #ff8880;
+  --ant-error-color-active: #d93f3f;
+  --ant-error-color-outline: rgba(255, 92, 87, 0.2);
+  --ant-error-color-deprecated-bg: #fff3f0;
+  --ant-error-color-deprecated-border: #ffd7d1;
+  --ant-warning-color: #ffab00;
+  --ant-warning-color-hover: #ffbf29;
+  --ant-warning-color-active: #d98900;
+  --ant-warning-color-outline: rgba(255, 171, 0, 0.2);
+  --ant-warning-color-deprecated-bg: #fffbe6;
+  --ant-warning-color-deprecated-border: #ffe07a;
+  --ant-info-color: #1890ff;
+  --ant-info-color-deprecated-bg: #e6f7ff;
+  --ant-info-color-deprecated-border: #91d5ff;
+}