rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-20250315

package/Stat/styles/index.less

@@ -3,23 +3,30 @@
 @import '../../Tooltip/styles/index.less';
 
 .rs-stat {
+  --rs-stat-icon-size: 50px;
+  --rs-stat-border-radius: var(--rs-radius-md);
+  --rs-stat-spacing: calc(var(--rs-spacing) * 2.5);
+  --rs-stat-value-font-size: var(--rs-font-size-2xl);
+  --rs-stat-value-unit-font-size: var(--rs-font-size-xs);
+  --rs-stat-trend-font-size: var(--rs-font-size-xs);
+
   display: flex;
-  gap: 10px;
+  gap: var(--rs-stat-spacing);
   align-items: center;
 
   &-icon {
-    width: 50px;
-    height: 50px;
+    width: var(--rs-stat-icon-size);
+    height: var(--rs-stat-icon-size);
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 6px;
+    border-radius: var(--rs-stat-border-radius);
   }
 
   &-body {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: calc(var(--rs-spacing) * 2);
     width: 100%;
     margin: 0;
   }
@@ -27,16 +34,16 @@
   &-bordered {
     border: 1px solid var(--rs-border-primary);
     background-color: var(--rs-stat-body-bg);
-    border-radius: 6px;
+    border-radius: var(--rs-stat-border-radius);
     padding: 16px;
   }
 
   &-label {
-    font-weight: 100;
+    font-weight: 400;
     display: inline-flex;
     align-items: center;
     color: var(--rs-text-secondary);
-    gap: 6px;
+    gap: calc(var(--rs-spacing) * 1.5);
 
     &-uppercase {
       text-transform: uppercase;
@@ -45,26 +52,26 @@
 
   &-value {
     display: flex;
-    gap: 4px;
+    gap: var(--rs-spacing);
     align-items: baseline;
-    font-size: 24px;
+    font-size: var(--rs-stat-value-font-size);
     font-weight: 600;
     line-height: 1;
     margin: 0;
   }
 
   &-value-unit {
-    font-size: 12px;
+    font-size: var(--rs-stat-value-unit-font-size);
     font-weight: 400;
   }
 
   &-trend {
     display: inline-flex;
     align-items: center;
-    gap: 2px;
-    border-radius: 4px;
+    gap: calc(var(--rs-spacing) / 2);
+    border-radius: var(--rs-radius-sm);
     font-weight: 600;
-    font-size: 12px;
+    font-size: var(--rs-stat-trend-font-size);
     line-height: 1;
 
     &-up {

package/StatGroup/styles/index.css

@@ -1,7 +1,7 @@
 .rs-stat-group {
-  --rs-columns: 4;
-  --rs-spacing: 6px;
+  --rs-stat-group-columns: 4;
+  --rs-stat-group-spacing: 6px;
   display: grid;
-  grid-template-columns: repeat(var(--rs-columns), 1fr);
-  grid-gap: var(--rs-spacing);
+  grid-template-columns: repeat(var(--rs-stat-group-columns), 1fr);
+  grid-gap: var(--rs-stat-group-spacing);
 }

package/StatGroup/styles/index.less

@@ -1,8 +1,8 @@
 .rs-stat-group {
-  --rs-columns: 4;
-  --rs-spacing: 6px;
+  --rs-stat-group-columns: 4;
+  --rs-stat-group-spacing: 6px;
 
   display: grid;
-  grid-template-columns: repeat(var(--rs-columns), 1fr);
-  grid-gap: var(--rs-spacing);
+  grid-template-columns: repeat(var(--rs-stat-group-columns), 1fr);
+  grid-gap: var(--rs-stat-group-spacing);
 }

package/Steps/styles/index.css

@@ -3,6 +3,21 @@
   * @param {string} @size-name - The size name
   * @param {string} @suffix - The suffix
   */
+/* stylelint-disable */
+*[class*='rs-'] {
+  box-sizing: border-box;
+}
+*[class*='rs-']::before,
+*[class*='rs-']::after {
+  box-sizing: border-box;
+}
+:root {
+  --rs-font-size-xs: 0.75rem;
+  --rs-font-size-sm: 0.875rem;
+  --rs-font-size-md: 1rem;
+  --rs-spacing: 0.25rem;
+  --rs-radius-full: calc(infinity * 1px);
+}
 :root,
 .rs-theme-light {
   --rs-gray-50: #f7f7fa;
@@ -59,36 +74,76 @@
   --rs-steps-border-state-error: var(--rs-color-red);
   --rs-steps-icon-state-process: var(--rs-primary-500);
 }
-/* stylelint-disable */
-*[class*='rs-'] {
-  box-sizing: border-box;
+.rs-steps {
+  --rs-steps-icon-size: 1.875rem;
+  --rs-steps-icon-font-size: var(--rs-font-size-md);
+  --rs-steps-icon-line-height: 1.75;
+  --rs-steps-title-font-size: var(--rs-font-size-md);
+  --rs-steps-title-line-height: 1.875;
+  --rs-steps-title-min-height: 1rem;
+  --rs-steps-item-spacing: calc(var(--rs-spacing) * 10);
+  --rs-steps-description-margin-top: calc(var(--rs-spacing) * 3);
+  --rs-steps-description-font-size: var(--rs-font-size-sm);
+  --rs-steps-description-line-height: 1.42857143;
+  min-height: var(--rs-steps-icon-size);
+}
+.rs-steps.rs-steps-small {
+  --rs-steps-icon-size: 1.5rem;
+  --rs-steps-icon-font-size: var(--rs-font-size-sm);
+  --rs-steps-icon-line-height: 1.57142857;
+  --rs-steps-item-spacing: calc(var(--rs-spacing) * 8.5);
+  --rs-steps-title-font-size: var(--rs-font-size-sm);
+  --rs-steps-title-line-height: 1.71428571;
+  --rs-steps-description-font-size: var(--rs-font-size-xs);
+  --rs-steps-description-line-height: 1.66666667;
+}
+.rs-steps .rs-steps-item-content {
+  color: var(--rs-text-secondary);
+  display: inline-block;
+  position: relative;
+  width: 100%;
 }
-*[class*='rs-']::before,
-*[class*='rs-']::after {
-  box-sizing: border-box;
+.rs-steps-item-status-process .rs-steps .rs-steps-item-content {
+  color: var(--rs-text-primary);
 }
-.rs-steps {
-  min-height: 30px;
+.rs-steps-item-status-error .rs-steps .rs-steps-item-content {
+  color: var(--rs-text-error);
+}
+.rs-steps .rs-steps-item-title {
+  position: relative;
+  font-size: var(--rs-steps-title-font-size);
+  line-height: var(--rs-steps-title-line-height);
+  min-height: var(--rs-steps-title-min-height);
+  padding-inline-end: calc(var(--rs-spacing) * 2.5);
+  display: inline-block;
+}
+.rs-steps .rs-steps-item-title:empty {
+  padding-inline-end: 0;
+}
+.rs-steps .rs-steps-item-description {
+  margin-top: var(--rs-steps-description-margin-top);
+  font-size: var(--rs-steps-description-font-size);
+  line-height: var(--rs-steps-description-line-height);
 }
 .rs-steps-item {
-  padding-left: 40px;
+  padding-inline-start: var(--rs-steps-item-spacing);
   position: relative;
   overflow: hidden;
 }
 .rs-steps-item-icon-wrapper {
-  width: 30px;
-  height: 30px;
-  text-align: center;
-  font-size: 16px;
-  line-height: 1.75;
+  width: var(--rs-steps-icon-size);
+  height: var(--rs-steps-icon-size);
+  font-size: var(--rs-steps-icon-font-size);
+  line-height: var(--rs-steps-icon-line-height);
   color: var(--rs-text-secondary);
+  text-align: center;
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   display: flex;
   align-items: center;
   border: 1px solid var(--rs-steps-border);
-  border-radius: 50%;
+  border-radius: var(--rs-radius-full);
 }
 .rs-steps-item-status-finish .rs-steps-item-icon-wrapper {
   border-color: var(--rs-steps-state-finish);
@@ -118,35 +173,9 @@
   position: relative;
 }
 .rs-steps-item-icon-wrapper > .rs-steps-item-icon .rs-icon {
-  font-size: 14px;
+  font-size: var(--rs-font-size-md);
   vertical-align: middle;
 }
-.rs-steps-item-content {
-  color: var(--rs-text-secondary);
-  display: inline-block;
-  position: relative;
-  width: 100%;
-}
-.rs-steps-item-status-process .rs-steps-item-content {
-  color: var(--rs-text-primary);
-}
-.rs-steps-item-status-error .rs-steps-item-content {
-  color: var(--rs-text-error);
-}
-.rs-steps-item-title {
-  position: relative;
-  font-size: 16px;
-  line-height: 1.875;
-  min-height: 16px;
-  padding-right: 10px;
-  display: inline-block;
-}
-.rs-steps-item-title:empty {
-  padding-right: 0;
-}
-.rs-steps-item-description {
-  margin-top: 12px;
-}
 .rs-steps-item-tail,
 .rs-steps-item-title::after {
   position: absolute;
@@ -171,7 +200,7 @@
 .rs-steps-horizontal .rs-steps-item {
   flex-grow: 1;
   flex-shrink: 1;
-  min-height: 30px;
+  min-height: var(--rs-steps-icon-size);
 }
 .rs-steps-horizontal .rs-steps-item:last-child {
   flex-grow: 0;
@@ -181,68 +210,32 @@
   display: none;
 }
 .rs-steps-horizontal .rs-steps-item:not(:first-child) {
-  padding-left: 50px;
+  padding-inline-start: calc(var(--rs-steps-icon-size) + var(--rs-spacing) * 5);
 }
 .rs-steps-horizontal .rs-steps-item:not(:first-child) .rs-steps-item-icon-wrapper {
-  left: 10px;
-}
-.rs-steps-horizontal .rs-steps-item-content {
-  height: 30px;
+  inset-inline-start: calc(var(--rs-spacing) * 2.5);
 }
 .rs-steps-horizontal .rs-steps-item-title::after {
   content: '';
-  top: 15px;
-  left: 100%;
+  top: calc(var(--rs-steps-icon-size) / 2);
+  inset-inline-start: 100%;
   width: 9999px;
   border-top-width: 1px;
   border-top-style: solid;
 }
 .rs-steps-vertical .rs-steps-item {
-  padding-bottom: 20px;
+  padding-bottom: calc(var(--rs-spacing) * 5);
 }
 .rs-steps-vertical .rs-steps-item:not(:first-child) {
-  margin-top: 10px;
+  margin-top: calc(var(--rs-spacing) * 2.5);
 }
 .rs-steps-vertical .rs-steps-item:last-child .rs-steps-item-tail {
   display: none;
 }
 .rs-steps-vertical .rs-steps-item-tail {
-  top: 40px;
+  top: var(--rs-steps-item-spacing);
   bottom: 0;
-  left: 15px;
+  inset-inline-start: calc(var(--rs-steps-icon-size) / 2);
   border-left-width: 1px;
   border-left-style: solid;
 }
-.rs-steps-small {
-  min-height: 24px;
-}
-.rs-steps-small.rs-steps-horizontal .rs-steps-item {
-  min-height: 24px;
-}
-.rs-steps-small.rs-steps-horizontal .rs-steps-item:not(:first-child) {
-  padding-left: 44px;
-}
-.rs-steps-small.rs-steps-vertical .rs-steps-item-tail {
-  left: 12px;
-}
-.rs-steps-small.rs-steps-horizontal .rs-steps-item-title::after {
-  top: 12px;
-}
-.rs-steps-small .rs-steps-item {
-  padding-left: 34px;
-}
-.rs-steps-small .rs-steps-item-icon-wrapper {
-  width: 24px;
-  height: 24px;
-  font-size: 14px;
-  line-height: 1.57142857;
-}
-.rs-steps-small .rs-steps-item-title {
-  font-size: 14px;
-  line-height: 1.71428571;
-}
-.rs-steps-small .rs-steps-item-description {
-  margin-top: 12px;
-  font-size: 12px;
-  line-height: 1.66666667;
-}

package/Steps/styles/index.less

@@ -1,35 +1,98 @@
-@import '../../styles/common';
+@import '../../styles/common.less';
 
 //
 // Steps
 // --------------------------------------------------
 .rs-steps {
-  min-height: @steps-icon-diameter;
+  --rs-steps-icon-size: 1.875rem;
+  --rs-steps-icon-font-size: var(--rs-font-size-md);
+  --rs-steps-icon-line-height: @steps-icon-line-height;
+  --rs-steps-title-font-size: var(--rs-font-size-md);
+  --rs-steps-title-line-height: @steps-title-line-height;
+  --rs-steps-title-min-height: 1rem;
+  --rs-steps-item-spacing: calc(var(--rs-spacing) * 10);
+  --rs-steps-description-margin-top: calc(var(--rs-spacing) * 3);
+  --rs-steps-description-font-size: var(--rs-font-size-sm);
+  --rs-steps-description-line-height: @line-height-base;
+
+  // Small
+  &.rs-steps-small {
+    --rs-steps-icon-size: 1.5rem;
+    --rs-steps-icon-font-size: var(--rs-font-size-sm);
+    --rs-steps-icon-line-height: @small-steps-icon-line-height;
+    --rs-steps-item-spacing: calc(var(--rs-spacing) * 8.5);
+    --rs-steps-title-font-size: var(--rs-font-size-sm);
+    --rs-steps-title-line-height: @small-steps-title-line-height;
+    --rs-steps-description-font-size: var(--rs-font-size-xs);
+    --rs-steps-description-line-height: @small-steps-description-line-height;
+  }
+
+  min-height: var(--rs-steps-icon-size);
+
+  // Item content
+  // --------------------------
+  .rs-steps-item-content {
+    color: var(--rs-text-secondary);
+    display: inline-block;
+    // Change static to relative, Make `z-index` more than Tail line
+    position: relative;
+    width: 100%;
+
+    .rs-steps-item-status-process & {
+      color: var(--rs-text-primary);
+    }
+
+    .rs-steps-item-status-error & {
+      color: var(--rs-text-error);
+    }
+  }
+
+  // Item title
+  .rs-steps-item-title {
+    position: relative;
+    font-size: var(--rs-steps-title-font-size);
+    line-height: var(--rs-steps-title-line-height);
+    min-height: var(--rs-steps-title-min-height);
+    padding-inline-end: calc(var(--rs-spacing) * 2.5);
+
+    display: inline-block;
+
+    &:empty {
+      padding-inline-end: 0;
+    }
+  }
+
+  // Item description
+  .rs-steps-item-description {
+    margin-top: var(--rs-steps-description-margin-top);
+    font-size: var(--rs-steps-description-font-size);
+    line-height: var(--rs-steps-description-line-height);
+  }
 }
 
 // Item
 // --------------------------
 .rs-steps-item {
-  padding-left: @steps-icon-space-width;
+  padding-inline-start: var(--rs-steps-item-spacing);
   position: relative;
   overflow: hidden;
 }
 
 // Item icon
 .rs-steps-item-icon-wrapper {
-  width: @steps-icon-diameter;
-  height: @steps-icon-diameter;
-  text-align: center;
-  font-size: @steps-icon-size;
-  line-height: @steps-icon-line-height;
+  width: var(--rs-steps-icon-size);
+  height: var(--rs-steps-icon-size);
+  font-size: var(--rs-steps-icon-font-size);
+  line-height: var(--rs-steps-icon-line-height);
   color: var(--rs-text-secondary);
+  text-align: center;
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   display: flex;
   align-items: center;
   border: 1px solid var(--rs-steps-border);
-  border-radius: 50%;
+  border-radius: var(--rs-radius-full);
 
   // Finish status show check mark.
   .rs-steps-item-status-finish & {
@@ -67,49 +130,12 @@
     position: relative;
 
     .rs-icon {
-      font-size: 14px;
+      font-size: var(--rs-font-size-md);
       vertical-align: middle;
     }
   }
 }
 
-// Item content
-// --------------------------
-.rs-steps-item-content {
-  color: var(--rs-text-secondary);
-  display: inline-block;
-  // Change static to relative, Make `z-index` more than Tail line
-  position: relative;
-  width: 100%;
-
-  .rs-steps-item-status-process & {
-    color: var(--rs-text-primary);
-  }
-
-  .rs-steps-item-status-error & {
-    color: var(--rs-text-error);
-  }
-}
-
-// Item title
-.rs-steps-item-title {
-  position: relative;
-  font-size: @steps-title-font-size;
-  line-height: @steps-title-line-height;
-  min-height: @steps-title-font-size;
-  padding-right: @steps-icon-spacing;
-  display: inline-block;
-
-  &:empty {
-    padding-right: 0;
-  }
-}
-
-// Item description
-.rs-steps-item-description {
-  margin-top: @steps-description-margin-top;
-}
-
 .rs-steps-item-tail,
 .rs-steps-item-title::after {
   position: absolute;
@@ -136,7 +162,7 @@
   .rs-steps-item {
     flex-grow: 1;
     flex-shrink: 1;
-    min-height: @steps-icon-diameter;
+    min-height: var(--rs-steps-icon-size);
 
     // The last node is self-adaptive width.
     &:last-child {
@@ -151,23 +177,19 @@
 
     // There is a 10px spacing between each item.
     &:not(:first-child) {
-      padding-left: (@steps-icon-space-width + @steps-item-spacing);
+      padding-inline-start: calc(var(--rs-steps-icon-size) + var(--rs-spacing) * 5);
 
       .rs-steps-item-icon-wrapper {
-        left: @steps-item-spacing;
+        inset-inline-start: calc(var(--rs-spacing) * 2.5);
       }
     }
   }
 
-  .rs-steps-item-content {
-    height: (@steps-title-font-size * @steps-title-line-height);
-  }
-
   .rs-steps-item-title {
     &::after {
       content: '';
-      top: (@steps-icon-diameter / 2);
-      left: 100%;
+      top: calc(var(--rs-steps-icon-size) / 2);
+      inset-inline-start: 100%;
       width: 9999px;
       border-top-width: 1px;
       border-top-style: solid;
@@ -178,11 +200,11 @@
 // Verticla
 .rs-steps-vertical {
   .rs-steps-item {
-    padding-bottom: 20px;
+    padding-bottom: calc(var(--rs-spacing) * 5);
 
     // There is a 10px spacing between each item.
     &:not(:first-child) {
-      margin-top: @steps-item-spacing;
+      margin-top: calc(var(--rs-spacing) * 2.5);
     }
 
     &:last-child .rs-steps-item-tail {
@@ -191,54 +213,10 @@
   }
 
   .rs-steps-item-tail {
-    top: @steps-icon-space-width;
+    top: var(--rs-steps-item-spacing);
     bottom: 0;
-    left: (@steps-icon-diameter / 2);
+    inset-inline-start: calc(var(--rs-steps-icon-size) / 2);
     border-left-width: 1px;
     border-left-style: solid;
   }
 }
-
-// Small
-// Resize: Diameter、font-size and so on.
-.rs-steps-small {
-  min-height: @small-steps-icon-diameter;
-
-  &.rs-steps-horizontal .rs-steps-item {
-    min-height: @small-steps-icon-diameter;
-  }
-
-  &.rs-steps-horizontal .rs-steps-item:not(:first-child) {
-    padding-left: (@small-steps-icon-space-width + @steps-icon-spacing);
-  }
-
-  &.rs-steps-vertical .rs-steps-item-tail {
-    left: (@small-steps-icon-diameter / 2);
-  }
-
-  &.rs-steps-horizontal .rs-steps-item-title::after {
-    top: 12px;
-  }
-
-  .rs-steps-item {
-    padding-left: @small-steps-icon-space-width;
-  }
-
-  .rs-steps-item-icon-wrapper {
-    width: @small-steps-icon-diameter;
-    height: @small-steps-icon-diameter;
-    font-size: @small-steps-icon-size;
-    line-height: @small-steps-icon-line-height;
-  }
-
-  .rs-steps-item-title {
-    font-size: @small-steps-icon-size;
-    line-height: @small-steps-title-line-height;
-  }
-
-  .rs-steps-item-description {
-    margin-top: @small-steps-description-margin-top;
-    font-size: @small-steps-description-font-size;
-    line-height: @small-steps-description-line-height;
-  }
-}