@fle-ui/next 1.0.5-alpha.3 → 1.0.5-alpha.4

package/lib/style/themes/default.less

@@ -32,7 +32,9 @@
 @success-color-active: color(~`colorPalette('@{success-color}', 7) `);
 @success-color-outline: fade(@success-color, @outline-fade);
 @success-color-deprecated-bg: color(~`colorPalette('@{success-color}', 1) `);
-@success-color-deprecated-border: color(~`colorPalette('@{success-color}', 3) `);
+@success-color-deprecated-border: color(
+  ~`colorPalette('@{success-color}', 3) `
+);
 
 // >>> Warning
 @warning-color: @gold-6;
@@ -40,7 +42,9 @@
 @warning-color-active: color(~`colorPalette('@{warning-color}', 7) `);
 @warning-color-outline: fade(@warning-color, @outline-fade);
 @warning-color-deprecated-bg: color(~`colorPalette('@{warning-color}', 1) `);
-@warning-color-deprecated-border: color(~`colorPalette('@{warning-color}', 3) `);
+@warning-color-deprecated-border: color(
+  ~`colorPalette('@{warning-color}', 3) `
+);
 
 // >>> Error
 @error-color: @red-5;
@@ -57,15 +61,21 @@
 
 // Color used by default to control hover and active backgrounds and for
 // alert info backgrounds.
-@primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%)
-@primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%)
+@primary-1: color(
+  ~`colorPalette('@{primary-color}', 1) `
+); // replace tint(@primary-color, 90%)
+@primary-2: color(
+  ~`colorPalette('@{primary-color}', 2) `
+); // replace tint(@primary-color, 80%)
 @primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused
 @primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused
 @primary-5: color(
   ~`colorPalette('@{primary-color}', 5) `
 ); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
 @primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color
-@primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%)
+@primary-7: color(
+  ~`colorPalette('@{primary-color}', 7) `
+); // replace shade(@primary-color, 5%)
 @primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused
 @primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused
 @primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused
@@ -80,10 +90,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;
@@ -105,7 +116,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
@@ -183,7 +194,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
@@ -196,14 +211,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);
 
@@ -433,13 +448,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: (
@@ -484,7 +504,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;
@@ -555,21 +576,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;
@@ -751,8 +772,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;
@@ -845,8 +866,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;
@@ -968,8 +989,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
@@ -1069,7 +1092,10 @@
 @image-mask-font-size: 16px;
 @image-preview-operation-size: 18px;
 @image-preview-operation-color: @text-color-dark;
-@image-preview-operation-disabled-color: fade(@image-preview-operation-color, 25%);
+@image-preview-operation-disabled-color: fade(
+  @image-preview-operation-color,
+  25%
+);
 
 // Segmented
 // ---

package/lib/style/themes/index.less

@@ -6,4 +6,4 @@
 // @import './variable.less';
 @import './@{root-entry-name}.less';
 
-@import '../theme';
+// @import '../theme.less';

package/lib/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
@@ -1124,7 +1162,10 @@
 @image-mask-font-size: 16px;
 @image-preview-operation-size: 18px;
 @image-preview-operation-color: @text-color-dark;
-@image-preview-operation-disabled-color: fade(@image-preview-operation-color, 25%);
+@image-preview-operation-disabled-color: fade(
+  @image-preview-operation-color,
+  25%
+);
 
 // Segmented
 // ---

package/lib/switch/style/index.css

@@ -3,51 +3,51 @@
 /* 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: #2c68ff;
+  --ant-primary-color-hover: #548aff;
+  --ant-primary-color-active: #1a4ad9;
+  --ant-primary-color-outline: rgba(44, 104, 255, 0.2);
+  --ant-primary-1: #f0f7ff;
+  --ant-primary-2: #cfe3ff;
+  --ant-primary-3: #a6c8ff;
+  --ant-primary-4: #7daaff;
+  --ant-primary-5: #548aff;
+  --ant-primary-6: #2c68ff;
+  --ant-primary-7: #1a4ad9;
   --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: #52c41a;
-  --ant-success-color-hover: #73d13d;
-  --ant-success-color-active: #389e0d;
-  --ant-success-color-outline: rgba(82, 196, 26, 0.2);
-  --ant-success-color-deprecated-bg: #f6ffed;
-  --ant-success-color-deprecated-border: #b7eb8f;
-  --ant-error-color: #ff4d4f;
-  --ant-error-color-hover: #ff7875;
-  --ant-error-color-active: #d9363e;
-  --ant-error-color-outline: rgba(255, 77, 79, 0.2);
-  --ant-error-color-deprecated-bg: #fff2f0;
-  --ant-error-color-deprecated-border: #ffccc7;
-  --ant-warning-color: #faad14;
-  --ant-warning-color-hover: #ffc53d;
-  --ant-warning-color-active: #d48806;
-  --ant-warning-color-outline: rgba(250, 173, 20, 0.2);
+  --ant-primary-color-deprecated-l-35: #dfe8ff;
+  --ant-primary-color-deprecated-l-20: #92b1ff;
+  --ant-primary-color-deprecated-t-20: #5686ff;
+  --ant-primary-color-deprecated-t-50: #96b4ff;
+  --ant-primary-color-deprecated-f-12: rgba(44, 104, 255, 0.12);
+  --ant-primary-color-active-deprecated-f-30: rgba(240, 247, 255, 0.3);
+  --ant-primary-color-active-deprecated-d-02: #e6f2ff;
+  --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: #ffe58f;
-  --ant-info-color: #1890ff;
-  --ant-info-color-deprecated-bg: #e6f7ff;
-  --ant-info-color-deprecated-border: #91d5ff;
+  --ant-warning-color-deprecated-border: #ffe07a;
+  --ant-info-color: #2c68ff;
+  --ant-info-color-deprecated-bg: #f0f7ff;
+  --ant-info-color-deprecated-border: #a6c8ff;
 }
 .ant-switch {
   margin: 0;
   padding: 0;
-  color: #4c4c4c;
+  color: rgba(0, 0, 0, 0.85);
   font-size: 14px;
   font-variant: tabular-nums;
   line-height: 1.5715;
@@ -60,7 +60,7 @@ html {
   height: 22px;
   line-height: 22px;
   vertical-align: middle;
-  background-image: linear-gradient(to right, #a9a9a9, #a9a9a9), linear-gradient(to right, #fff, #fff);
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), linear-gradient(to right, #fff, #fff);
   border: 0;
   border-radius: 100px;
   cursor: pointer;
@@ -72,7 +72,7 @@ html {
 }
 .ant-switch:focus {
   outline: 0;
-  box-shadow: 0 0 0 2px rgba(169, 169, 169, 0.1);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
 }
 .ant-switch-checked:focus {
   box-shadow: 0 0 0 2px var(--ant-primary-1);
@@ -81,7 +81,7 @@ html {
   box-shadow: none;
 }
 .ant-switch-checked {
-  background: #2c68ff;
+  background: var(--ant-primary-color);
 }
 .ant-switch-loading,
 .ant-switch-disabled {
@@ -141,7 +141,7 @@ html {
   vertical-align: top;
 }
 .ant-switch-checked .ant-switch-loading-icon {
-  color: #2c68ff;
+  color: var(--ant-primary-color);
 }
 .ant-switch-small {
   min-width: 28px;