feat: add some less var

components/style/mixins/modal-mask.less

@@ -4,7 +4,7 @@
   pointer-events: none;
 
   &.@{ant-prefix}-zoom-enter,
-  &.@{ant-prefix}zoom-appear {
+  &.@{ant-prefix}-zoom-appear {
     transform: none; // reset scale avoid mousePosition bug
     opacity: 0;
     animation-duration: @animation-duration-slow;

components/style/themes/dark.less

@@ -447,3 +447,11 @@
 // Mentions
 // ---
 @mentions-dropdown-bg: @popover-background;
+
+// Segmented
+// ---
+@segmented-bg: fade(@black, 25%);
+@segmented-hover-bg: fade(@black, 45%);
+@segmented-selected-bg: #333333;
+@segmented-label-color: fade(@white, 65%);
+@segmented-label-hover-color: fade(@white, 85%);

components/style/themes/default.less

@@ -525,11 +525,12 @@
 // Tooltip background color
 @tooltip-bg: rgba(0, 0, 0, 0.75);
 // Tooltip arrow width
-@tooltip-arrow-width: 5px;
+@tooltip-arrow-width: 8px * sqrt(2);
 // Tooltip distance with trigger
 @tooltip-distance: @tooltip-arrow-width - 1px + 4px;
 // Tooltip arrow color
 @tooltip-arrow-color: @tooltip-bg;
+@tooltip-border-radius: @border-radius-base;
 
 // Popover
 // ---
@@ -541,7 +542,7 @@
 @popover-min-width: 177px;
 @popover-min-height: 32px;
 // Popover arrow width
-@popover-arrow-width: 6px;
+@popover-arrow-width: @tooltip-arrow-width;
 // Popover arrow color
 @popover-arrow-color: @popover-bg;
 // Popover outer arrow width
@@ -677,6 +678,7 @@
 
 // Tag
 // --
+@tag-border-radius: @border-radius-base;
 @tag-default-bg: @background-color-light;
 @tag-default-color: @text-color;
 @tag-font-size: @font-size-sm;
@@ -873,7 +875,7 @@
 @breadcrumb-font-size: @font-size-base;
 @breadcrumb-icon-font-size: @font-size-base;
 @breadcrumb-link-color: @text-color-secondary;
-@breadcrumb-link-color-hover: @primary-5;
+@breadcrumb-link-color-hover: @text-color;
 @breadcrumb-separator-color: @text-color-secondary;
 @breadcrumb-separator-margin: 0 @padding-xs;
 
@@ -1071,3 +1073,11 @@
 @image-preview-operation-size: 18px;
 @image-preview-operation-color: @text-color-dark;
 @image-preview-operation-disabled-color: fade(@image-preview-operation-color, 25%);
+
+// Segmented
+// ---
+@segmented-bg: fade(@black, 4%);
+@segmented-hover-bg: fade(@black, 6%);
+@segmented-selected-bg: @white;
+@segmented-label-color: fade(@black, 65%);
+@segmented-label-hover-color: #262626;

components/style/themes/variable.less

@@ -11,7 +11,7 @@
 
 @base-primary: @blue-6;
 
-html {
+@{html-selector} {
   // ========= Primary Color =========
   --@{ant-prefix}-primary-color: @base-primary;
   --@{ant-prefix}-primary-color-hover: color(~`colorPalette('@{base-primary}', 5) `);
@@ -227,7 +227,7 @@ html {
 
 // Border color
 @border-color-base: hsv(0, 0, 85%); // base border outline a component
-@border-color-split: hsv(0, 0, 94%); // split border inside a component
+@border-color-split: rgba(0, 0, 0, 0.06); // split border inside a component
 @border-color-inverse: @white;
 @border-width-base: 1px; // width of the border for a component
 @border-style-base: solid; // style of a components border
@@ -580,11 +580,12 @@ html {
 // Tooltip background color
 @tooltip-bg: rgba(0, 0, 0, 0.75);
 // Tooltip arrow width
-@tooltip-arrow-width: 5px;
+@tooltip-arrow-width: 8px * sqrt(2);
 // Tooltip distance with trigger
 @tooltip-distance: @tooltip-arrow-width - 1px + 4px;
 // Tooltip arrow color
 @tooltip-arrow-color: @tooltip-bg;
+@tooltip-border-radius: @border-radius-base;
 
 // Popover
 // ---
@@ -596,7 +597,7 @@ html {
 @popover-min-width: 177px;
 @popover-min-height: 32px;
 // Popover arrow width
-@popover-arrow-width: 6px;
+@popover-arrow-width: @tooltip-arrow-width;
 // Popover arrow color
 @popover-arrow-color: @popover-bg;
 // Popover outer arrow width
@@ -635,7 +636,7 @@ html {
 // Progress
 // --
 @progress-default-color: @processing-color;
-@progress-remaining-color: @background-color-base;
+@progress-remaining-color: rgba(0, 0, 0, 0.04);
 @progress-info-text-color: @progress-text-color;
 @progress-radius: 100px;
 @progress-steps-item-bg: #f3f3f3;
@@ -732,6 +733,7 @@ html {
 
 // Tag
 // --
+@tag-border-radius: @border-radius-base;
 @tag-default-bg: @background-color-light;
 @tag-default-color: @text-color;
 @tag-font-size: @font-size-sm;
@@ -928,7 +930,7 @@ html {
 @breadcrumb-font-size: @font-size-base;
 @breadcrumb-icon-font-size: @font-size-base;
 @breadcrumb-link-color: @text-color-secondary;
-@breadcrumb-link-color-hover: @primary-5;
+@breadcrumb-link-color-hover: @text-color;
 @breadcrumb-separator-color: @text-color-secondary;
 @breadcrumb-separator-margin: 0 @padding-xs;
 
@@ -1126,3 +1128,11 @@ html {
 @image-preview-operation-size: 18px;
 @image-preview-operation-color: @text-color-dark;
 @image-preview-operation-disabled-color: fade(@image-preview-operation-color, 25%);
+
+// Segmented
+// ---
+@segmented-bg: fade(@black, 4%);
+@segmented-hover-bg: fade(@black, 6%);
+@segmented-selected-bg: @white;
+@segmented-label-color: fade(@black, 65%);
+@segmented-label-hover-color: #262626;