rsuite 5.52.0 → 5.53.0

package/Message/styles/index.css

@@ -8,40 +8,65 @@
   --rs-color-yellow: #ffb300;
   --rs-color-green: #4caf50;
   --rs-color-blue: #2196f3;
-  --rs-red-50: #fff2f2;
+  --rs-red-100: #fccfcf;
+  --rs-red-200: #faa9a7;
   --rs-red-300: #fa8682;
   --rs-red-500: #f44336;
+  --rs-red-800: #b81c07;
   --rs-red-900: #8f1300;
-  --rs-yellow-50: #fffaf2;
+  --rs-yellow-100: #ffe9c2;
+  --rs-yellow-200: #ffd991;
   --rs-yellow-500: #ffb300;
+  --rs-yellow-800: #c29100;
   --rs-yellow-900: #997500;
-  --rs-green-50: #eeffed;
+  --rs-green-100: #c8f0c7;
+  --rs-green-200: #a5e0a4;
   --rs-green-300: #82cf82;
   --rs-green-500: #4caf50;
+  --rs-green-800: #0f9119;
   --rs-green-900: #007d0c;
-  --rs-blue-50: #f0f9ff;
+  --rs-blue-100: #c5e7fc;
+  --rs-blue-200: #9bd4fa;
   --rs-blue-500: #2196f3;
+  --rs-blue-800: #045cb5;
   --rs-blue-900: #00448c;
   --rs-text-primary: var(--rs-gray-800);
   --rs-text-heading: var(--rs-gray-900);
   --rs-message-success-header: var(--rs-text-heading);
   --rs-message-success-text: var(--rs-text-primary);
   --rs-message-success-icon: var(--rs-color-green);
-  --rs-message-success-bg: var(--rs-green-50);
+  --rs-message-success-icon-border: var(--rs-green-200);
+  --rs-message-success-bg: rgb(from var(--rs-green-100) r g b / 60%);
+  --rs-message-success-border: var(--rs-color-green);
   --rs-message-info-header: var(--rs-text-heading);
   --rs-message-info-text: var(--rs-text-primary);
   --rs-message-info-icon: var(--rs-color-blue);
-  --rs-message-info-bg: var(--rs-blue-50);
+  --rs-message-info-icon-border: var(--rs-blue-200);
+  --rs-message-info-bg: rgb(from var(--rs-blue-100) r g b / 60%);
+  --rs-message-info-border: var(--rs-color-blue);
   --rs-message-warning-header: var(--rs-text-heading);
   --rs-message-warning-text: var(--rs-text-primary);
   --rs-message-warning-icon: var(--rs-color-yellow);
-  --rs-message-warning-bg: var(--rs-yellow-50);
+  --rs-message-warning-icon-border: var(--rs-yellow-200);
+  --rs-message-warning-bg: rgb(from var(--rs-yellow-100) r g b / 60%);
+  --rs-message-warning-border: var(--rs-color-yellow);
   --rs-message-error-header: var(--rs-text-heading);
   --rs-message-error-text: var(--rs-text-primary);
   --rs-message-error-icon: var(--rs-color-red);
-  --rs-message-error-bg: var(--rs-red-50);
+  --rs-message-error-icon-border: var(--rs-red-200);
+  --rs-message-error-bg: rgb(from var(--rs-red-100) r g b / 60%);
+  --rs-message-error-border: var(--rs-color-red);
   --rs-close-button-hover-color: var(--rs-color-red);
 }
+@supports not (color: rgb(from white r g b)) {
+  :root,
+  .rs-theme-light {
+    --rs-message-success-bg: rgba(200, 240, 199, 0.6);
+    --rs-message-info-bg: rgba(197, 231, 252, 0.6);
+    --rs-message-warning-bg: rgba(255, 233, 194, 0.6);
+    --rs-message-error-bg: rgba(252, 207, 207, 0.6);
+  }
+}
 .rs-theme-dark {
   --rs-gray-0: #fff;
   --rs-gray-50: #e9ebf0;
@@ -51,19 +76,27 @@
   --rs-color-yellow: #ffc757;
   --rs-color-green: #58b15b;
   --rs-color-blue: #1499ef;
-  --rs-red-50: #ffeded;
+  --rs-red-100: #fccaca;
+  --rs-red-200: #faa9a7;
   --rs-red-300: #f58884;
   --rs-red-500: #f04f43;
+  --rs-red-800: #b3200c;
   --rs-red-900: #8a1200;
-  --rs-yellow-50: #fff9f0;
+  --rs-yellow-100: #ffedd1;
+  --rs-yellow-200: #ffe2b3;
   --rs-yellow-500: #ffc757;
+  --rs-yellow-800: #c28f0e;
   --rs-yellow-900: #997000;
-  --rs-green-50: #f3fff2;
+  --rs-green-100: #cff0ce;
+  --rs-green-200: #aee0ad;
   --rs-green-300: #8ccf8c;
   --rs-green-500: #58b15b;
+  --rs-green-800: #10911b;
   --rs-green-900: #007d0c;
-  --rs-blue-50: #edf9ff;
+  --rs-blue-100: #c0e8fc;
+  --rs-blue-200: #93d6fa;
   --rs-blue-500: #1499ef;
+  --rs-blue-800: #0464b3;
   --rs-blue-900: #00498a;
   --rs-text-primary: var(--rs-gray-50);
   --rs-text-heading: var(--rs-gray-0);
@@ -71,18 +104,22 @@
   --rs-message-success-text: #fff;
   --rs-message-success-icon: #fff;
   --rs-message-success-bg: var(--rs-green-500);
+  --rs-message-success-border: var(--rs-green-800);
   --rs-message-info-header: #fff;
   --rs-message-info-text: #fff;
   --rs-message-info-icon: #fff;
   --rs-message-info-bg: var(--rs-blue-500);
+  --rs-message-info-border: var(--rs-blue-800);
   --rs-message-warning-header: var(--rs-gray-900);
   --rs-message-warning-text: var(--rs-gray-900);
   --rs-message-warning-icon: var(--rs-gray-900);
   --rs-message-warning-bg: var(--rs-yellow-500);
+  --rs-message-warning-border: var(--rs-yellow-800);
   --rs-message-error-header: #fff;
   --rs-message-error-text: #fff;
   --rs-message-error-icon: #fff;
   --rs-message-error-bg: var(--rs-red-500);
+  --rs-message-error-border: var(--rs-red-800);
   --rs-close-button-hover-color: var(--rs-color-red);
 }
 .rs-theme-high-contrast {
@@ -94,19 +131,27 @@
   --rs-color-yellow: #ffc757;
   --rs-color-green: #0d822c;
   --rs-color-blue: #1499ef;
-  --rs-red-50: #fff2f5;
+  --rs-red-100: #f2c2cd;
+  --rs-red-200: #e691a3;
   --rs-red-300: #d6637a;
   --rs-red-500: #bd1732;
+  --rs-red-800: #8f0414;
   --rs-red-900: #70000b;
-  --rs-yellow-50: #fff9f0;
+  --rs-yellow-100: #ffedd1;
+  --rs-yellow-200: #ffe2b3;
   --rs-yellow-500: #ffc757;
+  --rs-yellow-800: #c28f0e;
   --rs-yellow-900: #997000;
-  --rs-green-50: #f2fff5;
+  --rs-green-100: #b3e6bd;
+  --rs-green-200: #7ccc8e;
   --rs-green-300: #50b567;
   --rs-green-500: #0d822c;
+  --rs-green-800: #017325;
   --rs-green-900: #006923;
-  --rs-blue-50: #edf9ff;
+  --rs-blue-100: #c0e8fc;
+  --rs-blue-200: #93d6fa;
   --rs-blue-500: #1499ef;
+  --rs-blue-800: #0464b3;
   --rs-blue-900: #00498a;
   --rs-text-primary: var(--rs-gray-50);
   --rs-text-heading: var(--rs-gray-0);
@@ -288,6 +333,7 @@
   position: relative;
   -webkit-animation-fill-mode: forwards;
           animation-fill-mode: forwards;
+  overflow: hidden;
 }
 .rs-message-container {
   padding: 20px;
@@ -296,14 +342,36 @@
   display: -ms-flexbox;
   display: flex;
 }
-.rs-message-icon-wrapper {
+.rs-message-centered .rs-message-container {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  text-align: center;
+  gap: 20px;
+}
+.rs-message-centered .rs-message-icon {
+  -ms-flex-item-align: center !important;
+      align-self: center !important;
+}
+.rs-message-centered .rs-message-icon .rs-icon {
+  font-size: 40px !important;
+}
+.rs-message-centered.rs-message-bordered {
+  border-left-width: 1px !important;
+  border-top-width: 4px !important;
+}
+.rs-message-icon {
   -ms-flex-item-align: center;
       align-self: center;
   font-size: 0;
   margin-right: 10px;
 }
-.rs-message-icon-wrapper .rs-icon {
-  font-size: 12px;
+.rs-message-icon .rs-icon {
+  font-size: 16px;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
@@ -317,6 +385,7 @@
   color: #272c36;
   color: var(--rs-text-heading);
   line-height: 1.71428571;
+  font-weight: bold;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -329,11 +398,18 @@
   color: #575757;
   color: var(--rs-text-primary);
 }
-.rs-message.rs-message-has-title .rs-message-icon-wrapper {
+.rs-message-body ul,
+.rs-message-body ol {
+  margin: 0;
+  padding: 0;
+  -webkit-padding-start: 16px;
+          padding-inline-start: 16px;
+}
+.rs-message.rs-message-has-title .rs-message-icon {
   -ms-flex-item-align: start;
       align-self: flex-start;
 }
-.rs-message.rs-message-has-title .rs-message-icon-wrapper .rs-icon {
+.rs-message.rs-message-has-title .rs-message-icon .rs-icon {
   font-size: 24px;
   line-height: 1;
 }
@@ -360,9 +436,25 @@
   left: 0;
   width: 100%;
   border-radius: 0;
+  z-index: 1090;
 }
 .rs-message-success {
-  background-color: #eeffed;
+  background-color: #fff;
+}
+.rs-message-success.rs-message-bordered {
+  border: 1px solid #4caf50;
+  border: 1px solid var(--rs-message-success-border);
+  border-left-width: 4px;
+}
+.rs-message-success.rs-message-bordered .rs-message-icon {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  border: 4px solid #a5e0a4;
+  border: 4px solid var(--rs-message-success-icon-border);
+  border-radius: 50%;
+}
+.rs-message-success .rs-message-container {
+  background-color: rgb(from #c8f0c7 r g b / 60%);
   background-color: var(--rs-message-success-bg);
 }
 .rs-message-success .rs-message-header {
@@ -380,16 +472,32 @@
   padding: 8px;
   font-size: 12px;
 }
-.rs-message-success .rs-message-icon-wrapper > .rs-icon,
+.rs-message-success .rs-message-icon > .rs-icon,
 .rs-message-success .rs-btn-close {
   color: #4caf50;
   color: var(--rs-message-success-icon);
 }
 .rs-theme-high-contrast .rs-message-success {
+  border: 1px solid #4caf50;
   border: 1px solid var(--rs-message-success-border);
 }
 .rs-message-info {
-  background-color: #f0f9ff;
+  background-color: #fff;
+}
+.rs-message-info.rs-message-bordered {
+  border: 1px solid #2196f3;
+  border: 1px solid var(--rs-message-info-border);
+  border-left-width: 4px;
+}
+.rs-message-info.rs-message-bordered .rs-message-icon {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  border: 4px solid #9bd4fa;
+  border: 4px solid var(--rs-message-info-icon-border);
+  border-radius: 50%;
+}
+.rs-message-info .rs-message-container {
+  background-color: rgb(from #c5e7fc r g b / 60%);
   background-color: var(--rs-message-info-bg);
 }
 .rs-message-info .rs-message-header {
@@ -407,16 +515,32 @@
   padding: 8px;
   font-size: 12px;
 }
-.rs-message-info .rs-message-icon-wrapper > .rs-icon,
+.rs-message-info .rs-message-icon > .rs-icon,
 .rs-message-info .rs-btn-close {
   color: #2196f3;
   color: var(--rs-message-info-icon);
 }
 .rs-theme-high-contrast .rs-message-info {
+  border: 1px solid #2196f3;
   border: 1px solid var(--rs-message-info-border);
 }
 .rs-message-warning {
-  background-color: #fffaf2;
+  background-color: #fff;
+}
+.rs-message-warning.rs-message-bordered {
+  border: 1px solid #ffb300;
+  border: 1px solid var(--rs-message-warning-border);
+  border-left-width: 4px;
+}
+.rs-message-warning.rs-message-bordered .rs-message-icon {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  border: 4px solid #ffd991;
+  border: 4px solid var(--rs-message-warning-icon-border);
+  border-radius: 50%;
+}
+.rs-message-warning .rs-message-container {
+  background-color: rgb(from #ffe9c2 r g b / 60%);
   background-color: var(--rs-message-warning-bg);
 }
 .rs-message-warning .rs-message-header {
@@ -434,16 +558,32 @@
   padding: 8px;
   font-size: 12px;
 }
-.rs-message-warning .rs-message-icon-wrapper > .rs-icon,
+.rs-message-warning .rs-message-icon > .rs-icon,
 .rs-message-warning .rs-btn-close {
   color: #ffb300;
   color: var(--rs-message-warning-icon);
 }
 .rs-theme-high-contrast .rs-message-warning {
+  border: 1px solid #ffb300;
   border: 1px solid var(--rs-message-warning-border);
 }
 .rs-message-error {
-  background-color: #fff2f2;
+  background-color: #fff;
+}
+.rs-message-error.rs-message-bordered {
+  border: 1px solid #f44336;
+  border: 1px solid var(--rs-message-error-border);
+  border-left-width: 4px;
+}
+.rs-message-error.rs-message-bordered .rs-message-icon {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  border: 4px solid #faa9a7;
+  border: 4px solid var(--rs-message-error-icon-border);
+  border-radius: 50%;
+}
+.rs-message-error .rs-message-container {
+  background-color: rgb(from #fccfcf r g b / 60%);
   background-color: var(--rs-message-error-bg);
 }
 .rs-message-error .rs-message-header {
@@ -461,12 +601,13 @@
   padding: 8px;
   font-size: 12px;
 }
-.rs-message-error .rs-message-icon-wrapper > .rs-icon,
+.rs-message-error .rs-message-icon > .rs-icon,
 .rs-message-error .rs-btn-close {
   color: #f44336;
   color: var(--rs-message-error-icon);
 }
 .rs-theme-high-contrast .rs-message-error {
+  border: 1px solid #f44336;
   border: 1px solid var(--rs-message-error-border);
 }
 

package/Message/styles/index.less

@@ -16,6 +16,7 @@
   line-height: @line-height-base;
   position: relative;
   animation-fill-mode: forwards;
+  overflow: hidden;
 
   &-container {
     padding: @message-padding;
@@ -23,8 +24,30 @@
     display: flex;
   }
 
-  // Icon wrapper
-  &-icon-wrapper {
+  &-centered {
+    .rs-message-container {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: 20px;
+    }
+
+    .rs-message-icon {
+      align-self: center !important;
+
+      .rs-icon {
+        font-size: 40px !important;
+      }
+    }
+
+    &.rs-message-bordered {
+      border-left-width: 1px !important;
+      border-top-width: 4px !important;
+    }
+  }
+
+  // Message icon
+  &-icon {
     align-self: center;
     font-size: 0; // remove whitespace before svg
     margin-right: 10px;
@@ -44,6 +67,7 @@
   &-header {
     color: var(--rs-text-heading);
     line-height: unit((round((@message-icon-large-size / @message-title-size), 16)));
+    font-weight: bold;
     .ellipsis();
 
     & + .rs-message-body {
@@ -54,12 +78,18 @@
   // Description
   &-body {
     color: var(--rs-text-primary);
+    ul,
+    ol {
+      margin: 0;
+      padding: 0;
+      padding-inline-start: 16px;
+    }
   }
 
   // Message with a title
   &.rs-message-has-title {
     // Bigger icon
-    .rs-message-icon-wrapper {
+    .rs-message-icon {
       align-self: flex-start;
 
       .rs-icon {
@@ -103,6 +133,7 @@
   left: 0;
   width: 100%;
   border-radius: 0;
+  z-index: @zindex-message-full;
 }
 
 // Alternate styles
@@ -117,6 +148,8 @@
     var(--rs-message-success-header);
     var(--rs-message-success-text);
     var(--rs-message-success-icon);
+    var(--rs-message-success-border);
+    var(--rs-message-success-icon-border);
   );
 
   .high-contrast-mode({
@@ -130,6 +163,8 @@
     var(--rs-message-info-header);
     var(--rs-message-info-text);
     var(--rs-message-info-icon);
+    var(--rs-message-info-border);
+    var(--rs-message-info-icon-border);
   );
 
   .high-contrast-mode({
@@ -143,6 +178,8 @@
     var(--rs-message-warning-header);
     var(--rs-message-warning-text);
     var(--rs-message-warning-icon);
+    var(--rs-message-warning-border);
+    var(--rs-message-warning-icon-border);
   );
 
   .high-contrast-mode({
@@ -156,6 +193,8 @@
     var(--rs-message-error-header);
     var(--rs-message-error-text);
     var(--rs-message-error-icon);
+    var(--rs-message-error-border);
+    var(--rs-message-error-icon-border);
   );
 
   .high-contrast-mode({

package/Message/styles/mixin.less

@@ -1,7 +1,22 @@
 // Messages
 
-.message-variant(@background; @header-color; @text-color; @icon-color) {
-  background-color: @background;
+.message-variant(@background; @header-color; @text-color; @icon-color; @border-color; @icon-border-color;) {
+  background-color: #fff;
+
+  &.rs-message-bordered {
+    border: 1px solid @border-color;
+    border-left-width: 4px;
+
+    .rs-message-icon {
+      box-sizing: content-box;
+      border: 4px solid @icon-border-color;
+      border-radius: 50%;
+    }
+  }
+
+  .rs-message-container {
+    background-color: @background;
+  }
 
   .rs-message-header {
     color: @header-color;
@@ -19,7 +34,7 @@
     font-size: 12px;
   }
 
-  .rs-message-icon-wrapper > .rs-icon,
+  .rs-message-icon > .rs-icon,
   .rs-btn-close {
     color: @icon-color;
   }

package/MultiCascader/styles/index.css

@@ -1933,6 +1933,8 @@ textarea.rs-input-sm {
 }
 .rs-input-group.rs-input-group-inside {
   width: 100%;
+  background-color: #fff;
+  background-color: var(--rs-input-bg);
 }
 .rs-input-group.rs-input-group-inside .rs-input {
   display: block;
@@ -3335,6 +3337,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-check-item.rs-check-item-focus {
   background-color: rgb(from #cce9ff r g b / 50%);
   background-color: var(--rs-listbox-option-hover-bg);
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
 }
 .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover,
 .rs-theme-high-contrast .rs-check-item:focus,

package/Pagination/styles/index.css

@@ -1865,6 +1865,8 @@ textarea.rs-input-sm {
 }
 .rs-input-group.rs-input-group-inside {
   width: 100%;
+  background-color: #fff;
+  background-color: var(--rs-input-bg);
 }
 .rs-input-group.rs-input-group-inside .rs-input {
   display: block;
@@ -3267,6 +3269,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-check-item.rs-check-item-focus {
   background-color: rgb(from #cce9ff r g b / 50%);
   background-color: var(--rs-listbox-option-hover-bg);
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
 }
 .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover,
 .rs-theme-high-contrast .rs-check-item:focus,

package/SelectPicker/styles/index.css

@@ -1732,6 +1732,8 @@ textarea.rs-input-sm {
 }
 .rs-input-group.rs-input-group-inside {
   width: 100%;
+  background-color: #fff;
+  background-color: var(--rs-input-bg);
 }
 .rs-input-group.rs-input-group-inside .rs-input {
   display: block;
@@ -3134,6 +3136,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-check-item.rs-check-item-focus {
   background-color: rgb(from #cce9ff r g b / 50%);
   background-color: var(--rs-listbox-option-hover-bg);
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
 }
 .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover,
 .rs-theme-high-contrast .rs-check-item:focus,

package/Tabs/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/Tabs",
+  "private": true,
+  "main": "../cjs/Tabs/index.js",
+  "module": "../esm/Tabs/index.js",
+  "types": "../esm/Tabs/index.d.ts"
+}