rsuite 6.0.0-canary-20250424 → 6.0.0-canary-20250620

package/styles/variables.less

@@ -1,638 +0,0 @@
-// Variables
-// All variables declared in this file is supposed to be customizable by the user
-// This file is ignored by prettier for better alignment
-// See .prettierignore
-@import 'colors/light.less';
-@import 'colors/dark.less';
-@import 'colors/high-contrast.less';
-
-// Controls
-
-// CSS Resets
-@enable-css-reset: true;
-
-// Global button ripple switch
-@enable-ripple-effect: true;
-
-// Whether include styles for dark mode
-@enable-dark-mode: true;
-
-// Whether include styles for high-contrast mode
-@enable-high-contrast: true;
-
-// Media queries breakpoints
-// Define the breakpoints at which your layout will change, adapting to different screen sizes.
-
-// Small screen / phone
-// @screen-sm
-@screen-sm: 576px;
-
-// Medium screen / desktop
-// @screen-md
-@screen-md: 768px;
-
-// Large screen / wide desktop
-// @screen-lg
-@screen-lg: 992px;
-
-// Extra large devices / extra wide desktop
-// @screen-xl
-@screen-xl: 1200px;
-
-// Extra extra large devices / ultra wide desktop
-// @screen-xxl
-@screen-xxl: 1400px;
-
-
-// Grid system
-// Define your custom responsive grid.
-
-// Number of columns in the grid.
-@grid-columns: 24;
-// Padding between columns. Gets divided in half for the left and right.
-@grid-gutter-width: 12px;
-
-// Container sizes
-// Define the maximum width of `.container` for different screen sizes.
-
-// Small screen / phone / tablet
-@container-phone: (540px + @grid-gutter-width);
-@container-sm: @container-phone;
-
-// Medium screen / desktop
-@container-desktop: (720px + @grid-gutter-width);
-@container-md: @container-desktop;
-
-// Large screen / wide desktop
-@container-large-desktop: (960px + @grid-gutter-width);
-@container-lg: @container-large-desktop;
-
-// Extra large devices / ultra wide desktop
-@container-extra-large-desktop: (1140px + @grid-gutter-width);
-@container-xl: @container-large-desktop;
-
-// Extra large devices / ultra wide desktop
-@container-extra-extra-large-desktop: (1320px + @grid-gutter-width);
-@container-xxl: @container-large-desktop;
-
-// Color system
-
-// Primary palette
-@primary-color: #3498ff;
-
-// Secondary palette
-@red: #f44336;
-@orange: #fa8900;
-@yellow: #ffb300;
-@green: #4caf50;
-@cyan: #00bcd4;
-@blue: #2196f3;
-@violet: #673ab7;
-
-// Dark mode
-@primary-color-dark: #34c3ff;
-
-@red-dark: #f04f43;
-@orange-dark: #ff9800;
-@yellow-dark: #ffc757;
-@green-dark: #58b15b;
-@cyan-dark: #00bcd4;
-@blue-dark: #1499ef;
-@violet-dark: #673ab7;
-
-// High-contrast mode
-@primary-color-high-contrast: #ffff00;
-
-@red-high-contrast: #bd1732;
-@orange-high-contrast: @orange-dark;
-@yellow-high-contrast: #ffc757;
-@green-high-contrast: #0d822c;
-@cyan-high-contrast: @cyan-dark;
-@blue-high-contrast: #1499ef;
-@violet-high-contrast: @violet-dark;
-
-// List for looping
-@spectrum: red, orange, yellow, green, cyan, blue, violet;
-
-// Typography
-// Font, line-height, and color for body text, headings, and more.
-
-@font-family-base: -apple-system, BlinkMacSystemFont, Arial, Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', STXihei, sans-serif;
-@font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-
-@font-size-extra-large: 18px;
-@font-size-large: 16px;
-@font-size-base: 14px;
-@font-size-small: 12px;
-@font-size-extra-small: 12px;
-
-
-// Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-@line-height-computed: 20px;
-@line-height-large-computed: 22px;
-
-// Unit-less `line-height` for use in components like buttons.
-@line-height-extra-large: unit((@line-height-large-computed / @font-size-extra-large)); // ~1.222
-@line-height-large: unit((@line-height-large-computed / @font-size-large)); // ~1.375
-@line-height-base: unit((@line-height-computed / @font-size-base)); // ~1.4285714285714286
-@line-height-small: unit((@line-height-computed / @font-size-small)); // ~1.6666666666666667
-@line-height-extra-small: unit((@line-height-computed / @font-size-extra-small)); // ~1.6666666666666667
-
-// By default, this inherits from the `<body>`.
-@headings-font-family: inherit;
-@headings-font-weight: bolder;
-@headings-color: inherit;
-
-
-// Spacing
-// Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
-
-@padding-y: 8px;
-@padding-x: 12px;
-@padding-y-lg: 10px;
-@padding-x-lg: 16px;
-@padding-y-sm: 5px;
-@padding-x-sm: 10px;
-@padding-y-xs: 2px;
-@padding-x-xs: 8px;
-
-
-// Scaffolding
-// Settings for some of the most global styles.
-
-@link-hover-decoration: underline;
-@link-active-decoration: underline;
-
-// Disabled cursor for form controls and buttons.
-@cursor-disabled: not-allowed;
-
-//  Components
-
-// Table
-
-@table-header-padding-y: 10px;
-@table-header-padding-x: 10px;
-@table-header-font-size: @font-size-small;
-@table-header-line-height: @line-height-small;
-@table-header-sort-wrapper-margin-left: 5px;
-
-@table-column-resize-spanner-width: 3px;
-@table-column-resize-spanner-triangle-side-length: 3px;
-
-@table-cell-padding-y: 13px;
-@table-cell-padding-x: 10px;
-@table-cell-hover-color: var(--rs-primary-500);
-
-@table-scrollbar-timing-duration: 0.1s;
-@table-scrollbar-width: 10px;
-@table-scrollbar-handle-width: 8px;
-@table-scrollbar-handle-gap: (@table-scrollbar-width - @table-scrollbar-handle-width)/2;
-
-@table-loader-backdrop-color: var(--rs-loader-backdrop);
-@table-loader-transition: 0.2s ease-in;
-
-// Buttons
-
-@btn-font-weight: normal;
-@btn-transition: color 0.15s ease-out, background-color 0.15s ease-out;
-@btn-disabled-opacity: 0.3;
-
-
-// Ghost Button
-@btn-ghost-border-width: 1px;
-
-// Button with icons (not IconButton)
-@btn-icon-gap: 5px;
-
-// Button Loading
-@btn-loading-spin-default-diameter: 18px;
-@btn-loading-spin-xs-diameter: 16px;
-@btn-loading-spin-ring-wide: 3px;
-
-// Ripple
-
-@ripple-bg: rgba(0, 0, 0, 0.2);
-
-
-// Forms
-
-// Form Layout
-@form-group-margin-bottom: 24px;
-@form-control-width: 300px;
-@form-control-label-width: 170px;
-@form-control-label-margin-right: 12px;
-@form-control-label-margin-bottom: 4px;
-@form-help-text-inline-gap: 10px;
-
-// Error Message
-@form-err-msg-padding-vertical: 4px;
-@form-err-msg-padding-horizontal: 8px;
-@form-err-msg-height: (@form-err-msg-padding-vertical*2 + @line-height-computed);
-@form-err-msg-font-size: @font-size-small;
-@form-err-msg-triangle-width: 6px;
-@form-err-msg-triangle-gap: 10px;
-@form-err-msg-triangle-vertical: 4px;
-@form-err-msg-translate-distance: 2px;
-
-
-// Input
-
-@input-padding-y: @padding-y;
-@input-padding-x: @padding-x;
-@input-border-width: 1px;
-@input-transition: border-color ease-in-out 0.15s;
-
-@input-height-base: (@line-height-computed + (@padding-y * 2));
-@input-height-large: (@line-height-large-computed + (@padding-y-lg * 2));
-@input-height-small: (@line-height-computed + (@padding-y-sm * 2));
-@input-height-extra-small: (@line-height-computed + (@padding-y-xs * 2));
-
-// Dropdowns
-// Dropdown menu container and contents.
-
-@dropdown-caret-width: 10px;
-@dropdown-caret-padding: 10px;
-
-// Divider color for between dropdown items.
-@dropdown-shadow: 0 0 10px rgba(0, 0, 0, 0.06), 0 4px 4px rgba(0, 0, 0, 0.12);
-
-@dropdown-item-padding-y: 8px;
-@dropdown-item-padding-x: 12px;
-
-// Dropdown item content submenu icon
-@dropdown-item-submenu-icon-angle-spacing: 10px;
-@dropdown-item-submenu-icon-angle-width: 5px;
-@dropdown-item-content-submenu-icon-angle-line-height: @line-height-base;
-@dropdown-item-content-submenu-icon-angle-size: @font-size-base;
-@dropdown-toggle-padding-right: (@padding-x + @dropdown-caret-width + @dropdown-caret-padding);
-@dropdown-caret-icon-padding-horizontal: 9px;
-
-// DropDownMenu offset value
-@dropdown-max-height: 280px;
-@dropdown-menu-lg-top: 40px;
-@dropdown-menu-sm-top: 27px;
-@dropdown-menu-xs-top: 21px;
-
-// Toggle
-
-@toggle-active-scale: 1.2;
-@toggle-transition: 0.15s ease-out;
-
-
-// Navs
-
-@nav-item-transition: color 0.15s ease-out, background-color 0.15s ease-out;
-
-// Tab
-@nav-tab-bar-width: 1px;
-
-// Subtle
-@nav-subtle-bar-width: 2px;
-
-// Navbar
-@navbar-item-padding-y: 8px;
-@navbar-item-padding-x: 12px;
-
-// Sidenav
-
-@sidenav-item-caret-size: 14px;
-@sidenav-padding-vertical: 8px;
-@sidenav-padding-horizontal: 8px;
-@sidenav-collapse-in-width: 100%;
-@sidenav-default-width: 52px;
-@sidenav-item-height: (@sidenav-padding-vertical * 2 + @line-height-computed);
-@sidenav-menu-max-height: (@sidenav-item-height * 40);
-@sidenav-menu-animation-time: 1.5s;
-@sidenav-footer-height: @sidenav-item-height; // Footer is same height as a sidenav item
-@sidenav-level1-item-font-size: @font-size-base;
-@sidenav-icon-width: @sidenav-level1-item-font-size;
-@sidenav-dropdown-toggle-caret-width: 20px;
-@sidenav-collapse-transition-config: 0.15s ease-in;
-
-@sidenav-level-retract: 9px;
-@sidenav-level2-retract: (@sidenav-padding-horizontal + @sidenav-icon-width);
-
-// Steps
-
-@steps-icon-diameter: 30px;
-@steps-icon-spacing: 10px;
-
-// This space place the steps-icon
-@steps-icon-line-height: unit(((@steps-icon-diameter - 2px) / @font-size-large));
-@steps-title-line-height: unit((@steps-icon-diameter / @font-size-large));
-
-// Small
-@small-steps-icon-diameter: 24px;
-@small-steps-icon-line-height: unit(((@small-steps-icon-diameter - 2px) / @font-size-base));
-@small-steps-title-line-height: unit((@small-steps-icon-diameter / @font-size-base));
-@small-steps-description-line-height: @line-height-small;
-
-// Checkbox
-@checkbox-width-height: 16px;
-@checkbox-sense-width: 10px;
-@checkbox-bg: transparent;
-
-// Radio
-
-@radio-width-height: 16px;
-@radio-inner-width-height: 6px;
-@radio-sense-width: 10px;
-@radio-bg: transparent;
-@radio-label-padding-horizontal: 10px;
-
-// Tooltips
-
-@tooltip-max-width: 250px;
-@tooltip-opacity: 1;
-@tooltip-arrow-width: 6px;
-@tooltip-translate-distance: 2px;
-
-// Distance between Arrow and frame.
-@tooltip-arrow-gap-lg: 10px;
-@tooltip-arrow-gap-sm: 4px;
-
-
-// Popovers
-
-@popover-translate-distance: 2px;
-@popover-arrow-width: 6px;
-@popover-arrow-outer-width: @popover-arrow-width;
-// Distance between Arrow and frame.
-@popover-arrow-gap: 4px;
-
-// Modals
-
-// Modal sizes
-@modal-lg: 968px;
-@modal-md: 800px;
-@modal-sm: 600px;
-@modal-xs: 400px;
-
-// Drawer
-
-// Padding applied to the drawer content
-@drawer-content-spacing: 20px;
-
-// Margin of modal header and body
-@drawer-body-margin: 30px;
-
-@drawer-close-btn-size: @font-size-small;
-@drawer-close-btn-line-height: @line-height-small;
-@drawer-close-btn-color: var(--rs-text-primary);
-
-// Drawer sizes
-@drawer-horizontal-lg: @modal-lg;
-@drawer-horizontal-md: @modal-md;
-@drawer-horizontal-sm: @modal-sm;
-@drawer-horizontal-xs: @modal-xs;
-
-@drawer-vertical-lg: 568px;
-@drawer-vertical-md: 480px;
-@drawer-vertical-sm: 400px;
-@drawer-vertical-xs: 290px;
-
-// Modal full size margin
-@drawer-full-size-margin: 60px;
-
-// Message
-// Define alert colors, border radius, and padding.
-
-@message-padding: 20px;
-@message-title-size: @font-size-base;
-@message-link-font-weight: bold;
-
-@message-icon-size: 16px;
-@message-icon-large-size: 24px;
-@message-icon-margin-right: 10px;
-
-@message-close-btn-size: 12px;
-@message-close-btn-padding: 8px 8px 0;
-
-// toaster
-
-@toast-ns: ~'rs-toast';
-@toast-spacing: 24px;
-
-// Notification
-
-@notify-close-btn-font-size: 12px;
-@notify-close-btn-margin: 8px;
-@notify-title-font-size: @font-size-large;
-@notify-title-icon-size: 24px;
-@notify-title-icon-margin: 10px;
-@notify-title-description-gap: 8px;
-
-// Loaders
-
-@loader-default-diameter: 1.125rem; // 18px
-
-
-// spinner
-@loader-spin-ring-width: 3px;
-
-// spin animation time
-@loader-duration-fast: 0.4s;
-@loader-duration-normal: 0.6s;
-@loader-duration-slow: 0.8s;
-@loader-duration-paused: paused;
-
-// spacing
-@loader-content-spin-spacing-horizontal: 12px;
-@loader-content-spin-spacing-vertical: 10px;
-@loader-content-spin-spacing-horizontal-xs: 10px;
-
-// Progress
-
-@progress-line-padding-vertical: 8px;
-@progress-line-padding-horizontal: 12px;
-@progress-font-size: @font-size-large;
-@progress-bar-height: 10px;
-@progress-element-gap: 12px;
-@progress-bg-transition: 0.2s ease-in-out;
-
-// Uploader
-
-@uploader-file-list-margin-top: 10px;
-@uploader-base-padding: 8px;
-@uploader-picture-side-length: 66px;
-@uploader-picture-item-gap: 10px;
-@uploader-picture-remove-button-radius: 24px;
-@uploader-picture-text-preview-side-length: 50px;
-
-// Panel
-
-@panel-padding: 20px;
-@panel-header-font-size: 16px;
-@panel-accodion-transition: 0.15s linear;
-
-// Timeline
-
-@time-line-item-content-margin-left: 12px;
-@time-line-dot-side-length: 10px;
-@time-line-item-padding-left: (@time-line-item-content-margin-left + @time-line-dot-side-length);
-@time-line-tail-width: 2px;
-@time-line-item-content-padding-bottom: 18px;
-@time-line-dot-center-gap: ((@line-height-computed - @time-line-dot-side-length) / 2);
-@time-line-content-side-offset: (@time-line-dot-side-length / 2 + @time-line-item-content-margin-left);
-@time-line-alternate-time-offset: (@time-line-dot-side-length / 2 + @time-line-item-content-margin-left);
-@time-line-tail-min-height: (@line-height-computed + @time-line-item-content-padding-bottom); // 20 + 18 = 38
-
-
-// List
-
-@list-border-width: 1px;
-
-
-// Pickers
-
-// prefixs
-@picker-prefix: ~'rs-picker';
-@select-picker-prefix: ~'picker-select';
-@check-picker-prefix: ~'picker-check';
-@calendar-picker-prefix: ~'calendar';
-@cascader-picker-prefix: ~'picker-cascader';
-@cascader-multi-picker-prefix: ~'picker-multi-cascader';
-@tree-picker-prefix: ~'tree';
-@check-tree-picker-prefix: ~'check-tree';
-@input-picker-prefix: ~'picker-input';
-@multi-input-picker-prefix: ~'picker-tag';
-// Calendar Picker Name Space
-@clpns: ~'rs-@{calendar-picker-prefix}';
-// Check picker name space
-@ckpns: ~'rs-@{check-picker-prefix}';
-
-@picker-none-padding: 6px 12px 12px;
-@picker-transition: @input-transition;
-
-// Picker content width
-@picker-content-min-width: 200px;
-@picker-default-toggle-border-width: 1px;
-@picker-toggle-clean-width: 12px;
-
-@picker-menu-padding: 12px;
-
-@picker-item-content-padding-vertical: 8px;
-@picker-item-content-padding-horizontal: @picker-menu-padding;
-
-// group title
-@picker-group-children-padding-left: 26px;
-@picker-group-select-menu-gap: 6px;
-
-// Picker
-@picker-select-menu-item-selected-font-weight: bold;
-
-// Check Picker
-
-@picker-check-checkbox-gap: 10px;
-@picker-children-check-item-padding-left: 14px;
-@picker-check-item-content-padding-left: @picker-item-content-padding-horizontal+@checkbox-width-height+ @picker-check-checkbox-gap;
-
-
-// Calendar
-
-@calendar-header-width: 280px;
-@calendar-picker-padding: 10px;
-@calendar-picker-view-padding-top: 4px;
-@calendar-header-title-margin: 4px;
-@calendar-meridiem-border-width: 1px;
-@calendar-table-cell-padding: 1px;
-@calendar-table-cell-content-font-size: @font-size-base;
-@calendar-table-cell-content-line-height: @line-height-base;
-@calendar-table-cell-content-padding: 5px;
-@calendar-table-cell-content-today-border-width: 1px;
-@calendar-dropdown-top: 44px; // @calendar-picker-padding + content-height + gap
-@calendar-in-menu-content-side-length: 30px;
-@calendar-panel-cell-height: 100px;
-@calendar-panel-compact-cell-height: 38px;
-@calendar-panel-today-active-side-length: @line-height-computed;
-
-// DatePicker
-@datepicker-calendar-padding-y: 12px;
-@datepicker-calendar-padding-x: 12px;
-
-@datepicker-calendar-cell-gap-y: 2px;
-@datepicker-calendar-cell-gap-x: 2px;
-
-// DateRange Picker
-
-@date-range-picker-header-padding-horizontal: 12px;
-@date-range-picker-header-padding-vertical: 8px;
-@date-range-picker-header-line-height: @line-height-base;
-
-// Input Picker
-
-@input-picker-toggle-height: (@line-height-computed + @padding-y * 2); // 20px + 8px*2 = 36px  the same with md button
-@input-picker-toggle-content-height: (@input-picker-toggle-height - (@picker-default-toggle-border-width * 2));
-
-
-// Cascader
-@cascader-search-panel-max-height: 300px;
-@cascader-row-content-padding-horizontal: @picker-item-content-padding-horizontal;
-
-
-// Breadcrumbs
-
-@breadcrumb-font-size: @font-size-small;
-@breadcrumb-separator-margin: 4px;
-
-// Carousel
-
-@carousel-animation-duration: 0.3s;
-@carousel-toolbar-wrapper-margin: 17px; // @carousel-handler-margin + @carousel-handler-wrapper-margin = 20px
-@carousel-handler-transition: background @carousel-animation-duration linear;
-@carousel-handler-margin: 3px;
-@carousel-handler-sense-width: @carousel-handler-margin;
-@carousel-dot-wrapper-side-length: 1.2vw; // 1.2% of the screen width.
-@carousel-dot-side-length: 10px;
-@carousel-bar-width: 18px;
-@carousel-bar-height: 4px;
-@carousel-bar-active-width: 28px;
-
-
-//-- Z-index master list
-// Keep this section at the bottom of this file for easier lookup
-//
-// Warning: Avoid customizing these values. They're used for a bird's eye view
-// of components dependent on the z-axis and are designed to all work together.
-//
-// Note: These variables are not generated into the Customizer.
-//
-
-@zindex-date-range-picker-calendar-dropdown: 1;
-@zindex-date-range-picker-table-cell-content: 1;
-@zindex-badge-content: 1;
-@zindex-message-full: 3;
-@zindex-dropdown: 5;
-@zindex-picker-toggle: 5; // The same with zindex-dropdown
-@zindex-picker-input: (@zindex-picker-toggle + 1); // Greater than picker toggle
-@zindex-picker-popup: (@zindex-picker-toggle + 2); // Greater than picker toggle and input
-@zindex-dropdown-a: 10;
-@zindex-list-helper: 99;
-@zindex-navbar: 1000;
-@zindex-navbar-fixed: 1030;
-@zindex-modal: 1050;
-@zindex-drawer: 1050;
-@zindex-drawer-background: @zindex-drawer;
-@zindex-popover: 1060;
-@zindex-tooltip: 1070;
-@zindex-notification: 1080;
-
-//#==== Uploader
-@zindex-uploader-picture-preview: 1;
-@zindex-uploader-picture-loading-wrapper: 2;
-@zindex-uploader-picture-error-wrapper: 3;
-@zindex-uploader-picture-remove-button: 4;
-
-//#==== Form
-@zindex-form-error-message: 5;
-
-//#==== Table
-@zindex-table-body-row-wrapper: 0;
-@zindex-table-header-row-wrapper: 2;
-@zindex-table-column-resize-spanner: 3;
-@zindex-table-cell-group-fixed: 4;
-@zindex-table-row-cell-group-shadow: 5;
-@zindex-table-mouse-area: 6;
-
-//#=== Rate
-@zindex-rate-character-before: 1;

package/toaster/styles/animation.less

@@ -1,54 +0,0 @@
-@keyframes notificationMoveIn {
-  0% {
-    opacity: 0;
-    transform-origin: 0% 0%;
-    transform: scaleY(0.8);
-  }
-
-  100% {
-    opacity: 1;
-    transform-origin: 0% 0%;
-    transform: scaleY(1);
-  }
-}
-
-@keyframes notificationMoveInLeft {
-  from {
-    opacity: 0;
-    transform: translate3d(-100%, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-@keyframes notificationMoveInRight {
-  from {
-    opacity: 0;
-    transform: translate3d(100%, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-@keyframes notificationMoveOut {
-  0% {
-    opacity: 1;
-    transform-origin: 0% 0%;
-    transform: scaleY(1);
-    max-height: 100px;
-  }
-
-  100% {
-    opacity: 0;
-    transform-origin: 0% 0%;
-    transform: scaleY(0.8);
-    max-height: 0;
-    overflow: hidden;
-  }
-}