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

package/Placeholder/styles/index.less

@@ -6,29 +6,37 @@
 // --------------------------------------------------
 
 .rs-placeholder {
-  @placeholder-image-color: var(--rs-bg-card);
+  --rs-placeholder-row-height: 0.625rem;
+  --rs-placeholder-row-spacing: calc(var(--rs-spacing) * 4);
+  --rs-placeholder-paragraph-graph-width: 3.875rem;
+  --rs-placeholder-graph-width: 100%;
+  --rs-placeholder-graph-height: 12.5rem;
+  --rs-placeholder-bg-color: var(--rs-placeholder);
+  --rs-placeholder-bg-size: auto;
+  --rs-placeholder-img-color: var(--rs-bg-card);
 
   display: flex;
 
   &-paragraph {
     justify-content: flex-start;
     align-items: flex-start;
+    gap: var(--rs-placeholder-row-spacing);
 
     &-graph {
       flex: 0 0 auto;
-      width: 60px;
-      height: 60px;
-      border-radius: 2px;
-      margin-right: 20px;
-      background-color: var(--rs-placeholder);
+      width: var(--rs-placeholder-paragraph-graph-width);
+      height: var(--rs-placeholder-paragraph-graph-width);
+      border-radius: var(--rs-radius-xs);
+      background: var(--rs-placeholder-bg-color);
+      background-size: var(--rs-placeholder-bg-size);
 
       &-circle {
-        border-radius: 50%;
+        border-radius: var(--rs-radius-full);
       }
 
       &-image {
         width: 80px;
-        height: 60px;
+        height: var(--rs-placeholder-paragraph-graph-width);
         position: relative;
         overflow: hidden;
 
@@ -36,10 +44,10 @@
           content: '';
           width: 0;
           height: 0;
-          left: 10px;
+          inset-inline-start: 10px;
           bottom: 10px;
           position: absolute;
-          border-bottom: 36px solid @placeholder-image-color;
+          border-bottom: 36px solid var(--rs-placeholder-img-color);
           border-left: 20px solid transparent;
           border-right: 30px solid transparent;
         }
@@ -48,10 +56,10 @@
           content: '';
           width: 0;
           height: 0;
-          left: 40px;
+          inset-inline-start: 40px;
           bottom: 10px;
           position: absolute;
-          border-bottom: 22px solid @placeholder-image-color;
+          border-bottom: 22px solid var(--rs-placeholder-img-color);
           border-left: 16px solid transparent;
           border-right: 16px solid transparent;
         }
@@ -60,16 +68,19 @@
       &-image &-inner {
         width: 12px;
         height: 12px;
-        right: 18px;
+        inset-inline-end: 18px;
         top: 10px;
-        border-radius: 50%;
-        background: @placeholder-image-color;
+        border-radius: var(--rs-radius-full);
+        background: var(--rs-placeholder-img-color);
         position: absolute;
       }
     }
 
     &-group {
       width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: var(--rs-placeholder-row-spacing);
     }
 
     .rs-placeholder-row {
@@ -79,8 +90,10 @@
   }
 
   &-row {
-    background-color: var(--rs-placeholder);
+    background: var(--rs-placeholder-bg-color);
+    background-size: var(--rs-placeholder-bg-size);
     width: 100%;
+    height: var(--rs-placeholder-row-height);
   }
 
   &-grid {
@@ -89,6 +102,7 @@
       display: flex;
       flex-direction: column;
       align-items: flex-end;
+      gap: var(--rs-placeholder-row-spacing);
 
       &:first-child {
         align-items: flex-start; //first col align left
@@ -104,23 +118,22 @@
 
   &-graph {
     display: inline-block;
-    width: 100%;
-    background-color: var(--rs-placeholder);
+    width: var(--rs-placeholder-graph-width);
+    height: var(--rs-placeholder-graph-height);
+    background: var(--rs-placeholder-bg-color);
+    background-size: var(--rs-placeholder-bg-size);
   }
 
-  &-active {
-    &.rs-placeholder-graph,
-    .rs-placeholder-paragraph-graph,
-    .rs-placeholder-row {
-      background: linear-gradient(
-        -45deg,
-        var(--rs-placeholder) 25%,
-        var(--rs-placeholder-active) 37%,
-        var(--rs-placeholder) 63%
-      );
-      background-size: 400% 100% !important;
-      animation: placeholder-active 1.5s ease infinite;
-    }
+  &&-active {
+    animation: placeholder-active 1.5s ease infinite;
+
+    --rs-placeholder-bg-color: linear-gradient(
+      -45deg,
+      var(--rs-placeholder) 25%,
+      var(--rs-placeholder-active) 37%,
+      var(--rs-placeholder) 63%
+    );
+    --rs-placeholder-bg-size: 400% 100%;
   }
 
   @keyframes placeholder-active {

package/Popover/styles/index.css

@@ -3,6 +3,33 @@
   * @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-lg: 1.125rem;
+  --rs-font-size-xl: 1.25rem;
+  --rs-font-size-2xl: 1.5rem;
+  --rs-font-size-3xl: 1.875rem;
+  --rs-font-size-4xl: 2.25rem;
+  --rs-font-size-5xl: 3rem;
+  --rs-text-line-height-xs: calc(1 / 0.75);
+  --rs-text-line-height-sm: calc(1.25 / 0.875);
+  --rs-text-line-height-lg: calc(1.75 / 1.125);
+  --rs-text-line-height-xl: calc(1.75 / 1.25);
+  --rs-text-line-height-2xl: calc(2 / 1.5);
+  --rs-text-line-height-3xl: calc(2.25 / 1.875);
+  --rs-text-line-height-4xl: calc(2.5 / 2.25);
+  --rs-text-line-height-5xl: 1;
+  --rs-radius-sm: 0.25rem;
+}
 :root,
 .rs-theme-light {
   --rs-gray-0: #fff;
@@ -37,65 +64,82 @@
   --rs-bg-overlay: var(--rs-gray-800);
   --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
 }
-/* stylelint-disable */
-*[class*='rs-'] {
-  box-sizing: border-box;
-}
-*[class*='rs-']::before,
-*[class*='rs-']::after {
-  box-sizing: border-box;
+:root {
+  --rs-heading-font-family: inherit;
+  --rs-heading-font-weight: bolder;
+  --rs-heading-color: inherit;
+  --rs-heading-h1-font-size: var(--rs-font-size-5xl);
+  --rs-heading-h2-font-size: var(--rs-font-size-4xl);
+  --rs-heading-h3-font-size: var(--rs-font-size-3xl);
+  --rs-heading-h4-font-size: var(--rs-font-size-2xl);
+  --rs-heading-h5-font-size: var(--rs-font-size-xl);
+  --rs-heading-h6-font-size: var(--rs-font-size-lg);
+  --rs-heading-h1-line-height: var(--rs-text-line-height-5xl);
+  --rs-heading-h2-line-height: var(--rs-text-line-height-4xl);
+  --rs-heading-h3-line-height: var(--rs-text-line-height-3xl);
+  --rs-heading-h4-line-height: var(--rs-text-line-height-2xl);
+  --rs-heading-h5-line-height: var(--rs-text-line-height-xl);
+  --rs-heading-h6-line-height: var(--rs-text-line-height-lg);
 }
 .rs-heading {
-  font-family: inherit;
-  font-weight: bolder;
-  color: inherit;
+  font-family: var(--rs-heading-font-family);
+  font-weight: var(--rs-heading-font-weight);
+  color: var(--rs-heading-color);
   margin: 0;
 }
 .rs-heading.h1 {
-  font-size: 46px;
-  line-height: 62px;
+  font-size: var(--rs-heading-h1-font-size);
+  line-height: var(--rs-heading-h1-line-height);
 }
 .rs-heading.h2 {
-  font-size: 36px;
-  line-height: 50px;
+  font-size: var(--rs-heading-h2-font-size);
+  line-height: var(--rs-heading-h2-line-height);
 }
 .rs-heading.h3 {
-  font-size: 28px;
-  line-height: 42px;
+  font-size: var(--rs-heading-h3-font-size);
+  line-height: var(--rs-heading-h3-line-height);
 }
 .rs-heading.h4 {
-  font-size: 22px;
-  line-height: 34px;
+  font-size: var(--rs-heading-h4-font-size);
+  line-height: var(--rs-heading-h4-line-height);
 }
 .rs-heading.h5 {
-  font-size: 18px;
-  line-height: 24px;
+  font-size: var(--rs-heading-h5-font-size);
+  line-height: var(--rs-heading-h5-line-height);
 }
 .rs-heading.h6 {
-  font-size: 16px;
-  line-height: 22px;
+  font-size: var(--rs-heading-h6-font-size);
+  line-height: var(--rs-heading-h6-line-height);
 }
 /* rtl:begin:ignore */
 /* rtl:end:ignore */
 .rs-popover {
+  --rs-popover-font-size: var(--rs-font-size-xs);
+  --rs-popover-line-height: var(--rs-text-line-height-xs);
+  --rs-popover-title-font-size: var(--rs-font-size-sm);
+  --rs-popover-title-line-height: var(--rs-text-line-height-sm);
+  --rs-popover-border-radius: var(--rs-radius-sm);
+  --rs-popover-position-x: var(--rs-position-x);
+  --rs-popover-position-y: var(--rs-position-y);
+  --rs-popover-opacity: var(--rs-opacity, 0);
   position: absolute;
-  top: 0;
-  left: 0 /* rtl:ignore */;
+  top: var(--rs-popover-position-y);
+  left: var(--rs-popover-position-x) /* rtl:ignore */;
   z-index: 1060;
-  display: none;
+  display: block;
   padding: 12px;
-  font-size: 14px;
+  font-size: var(--rs-popover-font-size);
   background-color: var(--rs-bg-overlay);
   background-clip: padding-box;
-  border-radius: 4px;
-  opacity: 0;
+  border-radius: var(--rs-popover-border-radius);
+  opacity: var(--rs-popover-opacity);
   filter: drop-shadow(var(--rs-popover-shadow));
 }
 .rs-popover.rs-anim-fade {
   transition: opacity 0.1s linear, transform 0.1s ease-out;
 }
 .rs-popover.rs-anim-in {
-  opacity: 1;
+  --rs-popover-opacity: 1;
   transition: opacity 0.15s linear, transform 0.15s ease-in;
 }
 .rs-theme-high-contrast .rs-popover {
@@ -127,137 +171,131 @@
 }
 .rs-popover-title {
   margin: 0;
-  font-size: 14px;
-  line-height: 1.42857143;
+  font-size: var(--rs-popover-title-font-size);
+  line-height: var(--rs-popover-title-line-height);
 }
 .rs-popover-content {
-  font-size: 12px;
-  line-height: 1.66666667;
+  font-size: var(--rs-popover-font-size);
+  line-height: var(--rs-popover-line-height);
 }
 .rs-popover-title ~ .rs-popover-content {
   margin-top: 8px;
 }
-.rs-popover[class*='placement-top'] {
+.rs-popover:where([data-placement*='top']) {
   margin-top: -8px;
   transform: translate(0, 0);
 }
-.rs-popover[class*='placement-top'].rs-anim-in {
+.rs-popover:where([data-placement*='top']).rs-anim-in {
   transform: translate(0, -2px);
 }
-.rs-popover[class*='placement-top'] > .rs-popover-arrow {
-  margin-left: -6px;
+.rs-popover:where([data-placement*='top']) > .rs-popover-arrow {
+  margin-inline-start: -6px;
   bottom: -6px;
 }
-.rs-popover[class*='placement-top'] > .rs-popover-arrow::after {
+.rs-popover:where([data-placement*='top']) > .rs-popover-arrow::after {
   bottom: -6px;
   margin-left: -6px;
   border-width: 6px 6px 0;
   border-top-color: var(--rs-bg-overlay);
 }
-.rs-theme-high-contrast .rs-popover[class*='placement-top'] > .rs-popover-arrow::before {
+.rs-theme-high-contrast .rs-popover:where([data-placement*='top']) > .rs-popover-arrow::before {
   bottom: -7px;
   margin-left: -7px;
   border-width: 7px 7px 0;
   border-top-color: var(--rs-border-primary);
 }
+.rs-popover:where([data-placement*='bottom']) {
+  margin-top: 8px;
+  transform: translate(0, 0);
+}
+.rs-popover:where([data-placement*='bottom']).rs-anim-in {
+  transform: translate(0, 2px);
+}
+.rs-popover:where([data-placement*='bottom']) > .rs-popover-arrow {
+  margin-left: -6px;
+  top: -6px;
+}
+.rs-popover:where([data-placement*='bottom']) > .rs-popover-arrow::after {
+  top: -6px;
+  margin-left: -6px;
+  border-width: 0 6px 6px;
+  border-bottom-color: var(--rs-bg-overlay);
+}
+.rs-theme-high-contrast .rs-popover:where([data-placement*='bottom']) > .rs-popover-arrow::before {
+  top: -7px;
+  margin-left: -7px;
+  border-width: 0 7px 7px;
+  border-bottom-color: var(--rs-border-primary);
+}
+.rs-popover:where([data-placement='bottom'], [data-placement='top']) > .rs-popover-arrow {
+  left: 50%;
+}
+.rs-popover:where([data-placement='bottom-end'], [data-placement='top-end']) > .rs-popover-arrow {
+  right: 4px;
+}
+.rs-popover:where([data-placement='left'], [data-placement='right']) > .rs-popover-arrow {
+  top: 50%;
+}
+.rs-popover:where([data-placement='left-end'], [data-placement='right-end']) > .rs-popover-arrow {
+  bottom: 4px;
+}
 /* rtl:begin:ignore */
-.rs-popover[class*='placement-right'] {
+.rs-popover:where([data-placement*='right']) {
   margin-left: 8px;
   transform: translate(0, 0);
 }
-.rs-popover[class*='placement-right'].rs-anim-in {
+.rs-popover:where([data-placement*='right']).rs-anim-in {
   transform: translate(2px, 0);
 }
-.rs-popover[class*='placement-right'] > .rs-popover-arrow {
+.rs-popover:where([data-placement*='right']) > .rs-popover-arrow {
   left: -6px;
   margin-top: -6px;
 }
-.rs-popover[class*='placement-right'] > .rs-popover-arrow::after {
+.rs-popover:where([data-placement*='right']) > .rs-popover-arrow::after {
   left: -6px;
   margin-top: -6px;
   border-width: 6px 6px 6px 0;
   border-right-color: var(--rs-bg-overlay);
 }
-.rs-theme-high-contrast .rs-popover[class*='placement-right'] > .rs-popover-arrow::before {
+.rs-theme-high-contrast .rs-popover:where([data-placement*='right']) > .rs-popover-arrow::before {
   left: -7px;
   margin-top: -7px;
   border-width: 7px 7px 7px 0;
   border-right-color: var(--rs-border-primary);
 }
-.rs-popover[class*='placement-left'] {
+.rs-popover:where([data-placement*='left']) {
   margin-left: -8px;
   transform: translate(0, 0);
 }
-.rs-popover[class*='placement-left'].rs-anim-in {
+.rs-popover:where([data-placement*='left']).rs-anim-in {
   transform: translate(-2px, 0);
 }
-.rs-popover[class*='placement-left'] > .rs-popover-arrow {
+.rs-popover:where([data-placement*='left']) > .rs-popover-arrow {
   right: -6px;
   margin-top: -6px;
 }
-.rs-popover[class*='placement-left'] > .rs-popover-arrow::after {
+.rs-popover:where([data-placement*='left']) > .rs-popover-arrow::after {
   right: -6px;
   margin-top: -6px;
   border-width: 6px 0 6px 6px;
   border-left-color: var(--rs-bg-overlay);
 }
-.rs-theme-high-contrast .rs-popover[class*='placement-left'] > .rs-popover-arrow::before {
+.rs-theme-high-contrast .rs-popover:where([data-placement*='left']) > .rs-popover-arrow::before {
   right: -7px;
   margin-top: -7px;
   border-width: 7px 0 7px 7px;
   border-left-color: var(--rs-border-primary);
 }
 /* rtl:end:ignore */
-.rs-popover[class*='placement-bottom'] {
-  margin-top: 8px;
-  transform: translate(0, 0);
-}
-.rs-popover[class*='placement-bottom'].rs-anim-in {
-  transform: translate(0, 2px);
-}
-.rs-popover[class*='placement-bottom'] > .rs-popover-arrow {
-  margin-left: -6px;
-  top: -6px;
-}
-.rs-popover[class*='placement-bottom'] > .rs-popover-arrow::after {
-  top: -6px;
-  margin-left: -6px;
-  border-width: 0 6px 6px;
-  border-bottom-color: var(--rs-bg-overlay);
-}
-.rs-theme-high-contrast .rs-popover[class*='placement-bottom'] > .rs-popover-arrow::before {
-  top: -7px;
-  margin-left: -7px;
-  border-width: 0 7px 7px;
-  border-bottom-color: var(--rs-border-primary);
-}
-.rs-popover.placement-bottom > .rs-popover-arrow,
-.rs-popover.placement-top > .rs-popover-arrow {
-  left: 50%;
-}
-.rs-popover.placement-bottom-end > .rs-popover-arrow,
-.rs-popover.placement-top-end > .rs-popover-arrow {
-  right: 4px;
-}
-.rs-popover.placement-left > .rs-popover-arrow,
-.rs-popover.placement-right > .rs-popover-arrow {
-  top: 50%;
-}
-.rs-popover.placement-left-end > .rs-popover-arrow,
-.rs-popover.placement-right-end > .rs-popover-arrow {
-  bottom: 4px;
-}
 .rs-popover-full {
   padding: 0;
 }
 .rs-popover-full .rs-popover-content {
   margin-top: 0;
 }
-.rs-popover.placement-top-start.rs-popover-full > .rs-popover-arrow,
-.rs-popover.placement-bottom-start.rs-popover-full > .rs-popover-arrow {
-  margin-left: 6px;
+.rs-popover-full:where([data-placement='top-start'], [data-placement='bottom-start']) > .rs-popover-arrow {
+  margin-inline-start: 6px;
 }
-.rs-popover.placement-right-start.rs-popover-full > .rs-popover-arrow,
-.rs-popover.placement-left-start.rs-popover-full > .rs-popover-arrow {
+.rs-popover-full:where([data-placement='right-start'], [data-placement='left-start']) > .rs-popover-arrow {
   margin-top: 6px;
 }