rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-2025031415

package/Accordion/styles/index.css

@@ -3,6 +3,34 @@
   * @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-md: 1rem;
+  --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-md: calc(1.5 / 1);
+  --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-spacing: 0.25rem;
+  --rs-radius-md: 0.375rem;
+  --rs-radius-lg: 0.5rem;
+  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+}
 :root,
 .rs-theme-light {
   --rs-gray-0: #fff;
@@ -16,7 +44,6 @@
   --rs-gray-800: #343434;
   --rs-gray-900: #121212;
   --rs-primary-400: #59afff;
-  --rs-text-secondary: var(--rs-gray-600);
   --rs-text-heading: var(--rs-gray-900);
   --rs-text-disabled: var(--rs-gray-600);
   --rs-border-primary: var(--rs-gray-200);
@@ -25,7 +52,6 @@
   --rs-scrollbar-thumb-hover-bg: var(--rs-gray-400);
   --rs-btn-subtle-hover-bg: var(--rs-gray-200);
   --rs-btn-subtle-hover-text: var(--rs-gray-800);
-  --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
   --rs-scroll-view-shadow-color: rgba(9, 9, 9, 0.2);
 }
 .rs-theme-dark {
@@ -40,7 +66,6 @@
   --rs-gray-800: #1a1d24;
   --rs-gray-900: #0f131a;
   --rs-primary-400: #59d0ff;
-  --rs-text-secondary: var(--rs-gray-200);
   --rs-text-heading: var(--rs-gray-0);
   --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-600);
@@ -49,7 +74,6 @@
   --rs-scrollbar-thumb-hover-bg: var(--rs-gray-400);
   --rs-btn-subtle-hover-bg: var(--rs-gray-500);
   --rs-btn-subtle-hover-text: var(--rs-gray-50);
-  --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
   --rs-scroll-view-shadow-color: rgba(0, 0, 0, 0.99);
 }
 .rs-theme-high-contrast {
@@ -64,7 +88,6 @@
   --rs-gray-800: #1a1d24;
   --rs-gray-900: #0f131a;
   --rs-primary-400: #fffc30;
-  --rs-text-secondary: var(--rs-gray-200);
   --rs-text-heading: var(--rs-gray-0);
   --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-100);
@@ -73,19 +96,10 @@
   --rs-scrollbar-thumb-hover-bg: var(--rs-gray-400);
   --rs-btn-subtle-hover-bg: transparent;
   --rs-btn-subtle-hover-text: var(--rs-primary-400);
-  --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
   --rs-scroll-view-shadow-color: rgba(0, 0, 0, 0.99);
 }
-/* stylelint-disable */
-*[class*='rs-'] {
-  box-sizing: border-box;
-}
-*[class*='rs-']::before,
-*[class*='rs-']::after {
-  box-sizing: border-box;
-}
 .rs-panel-group {
-  border-radius: 6px;
+  border-radius: var(--rs-radius-md);
   overflow: hidden;
 }
 .rs-panel-group-bordered {
@@ -102,38 +116,55 @@
   position: absolute;
   top: 0;
   border-top: 1px solid var(--rs-border-primary);
-  left: 20px;
-  right: 20px;
+  inset-inline-start: 20px;
+  inset-inline-end: 20px;
+}
+: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);
 }
 .rs-scroll-view.rs-scroll-view-shadow {
   overflow: auto;
@@ -176,18 +207,25 @@
 }
 .rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar-track {
   background: var(--rs-scrollbar-bg);
-  border-radius: 10px;
+  border-radius: var(--rs-radius-lg);
 }
 .rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar-thumb {
   background-color: var(--rs-scrollbar-thumb-bg);
-  border-radius: 6px;
+  border-radius: var(--rs-radius-md);
   border: 3px solid var(--rs-scrollbar-bg);
 }
 .rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar-thumb:hover {
   background-color: var(--rs-scrollbar-thumb-hover-bg);
 }
 .rs-panel {
-  border-radius: 6px;
+  --rs-panel-header-font-size: var(--rs-font-size-md);
+  --rs-panel-header-line-height: var(--rs-text-line-height-md);
+  --rs-panel-padding: 1.25rem;
+  --rs-panel-border-radius: var(--rs-radius-md);
+  --rs-panel-btn-font-size: var(--rs-font-size-md);
+  --rs-panel-btn-padding: 0.625rem;
+  --rs-panel-shadow: var(--rs-shadow-md);
+  border-radius: var(--rs-panel-border-radius);
   overflow: hidden;
 }
 .rs-panel .rs-anim-collapse {
@@ -222,15 +260,15 @@ tbody.rs-panel .rs-anim-collapse.rs-anim-in {
 }
 .rs-panel-header,
 .rs-panel-body {
-  padding: 20px;
+  padding: var(--rs-panel-padding);
 }
 .rs-panel-body-fill {
   padding: 0 !important;
 }
 .rs-panel-header {
   color: var(--rs-text-heading);
-  font-size: 16px;
-  line-height: 1.25;
+  font-size: var(--rs-panel-header-font-size);
+  line-height: var(--rs-panel-header-line-height);
   font-weight: inherit;
 }
 .rs-panel-btn {
@@ -240,9 +278,9 @@ tbody.rs-panel .rs-anim-collapse.rs-anim-in {
   outline: transparent solid 2px;
   display: flex;
   align-items: center;
-  font-size: 16px;
-  padding: 10px;
-  border-radius: 6px;
+  font-size: var(--rs-panel-btn-font-size);
+  padding: var(--rs-panel-btn-padding);
+  border-radius: var(--rs-panel-border-radius);
 }
 .rs-panel-btn:hover,
 .rs-panel-btn:focus,
@@ -254,6 +292,9 @@ tbody.rs-panel .rs-anim-collapse.rs-anim-in {
 .rs-panel-btn-icon {
   transition: transform 0.2s ease 0s;
 }
+.rs-panel-btn[aria-expanded='true'] .rs-panel-btn-icon {
+  transform: rotate(180deg);
+}
 .rs-panel-btn[disabled] {
   cursor: not-allowed;
   color: var(--rs-text-disabled);
@@ -262,7 +303,7 @@ tbody.rs-panel .rs-anim-collapse.rs-anim-in {
 .rs-panel-title {
   margin: 0;
   flex: 1 1 0%;
-  text-align: left;
+  text-align: start;
 }
 .rs-panel-title a {
   color: inherit;
@@ -280,12 +321,5 @@ tbody.rs-panel .rs-anim-collapse.rs-anim-in {
   cursor: pointer;
   transition: background-color 0.3s linear, border-radius 0.3s linear;
   position: relative;
-  padding: 10px;
-}
-.rs-panel-collapsible > .rs-panel-header > .rs-icon {
-  color: var(--rs-text-secondary);
-  position: absolute;
-  top: 24px;
-  right: 20px;
-  transition: transform 0.3s linear;
+  padding: calc(var(--rs-spacing) * 2.5);
 }