rsuite 5.0.0-beta.5 → 5.0.0

package/styles/color-modes/high-contrast.less

@@ -0,0 +1,317 @@
+@import '../colors/high-contrast';
+
+// see https://rsuitejs.com/design/dark
+& {
+  @import (multiple) 'common';
+
+  // Reset
+  --rs-body: @B900;
+
+  // Misc
+  --rs-text-link: @H500;
+  --rs-text-link-hover: @H400;
+  --rs-text-link-active: @H300;
+  --rs-text-primary: @B050;
+  --rs-text-secondary: @B200;
+  --rs-text-tertiary: @B300;
+  --rs-text-heading: @B000;
+  --rs-text-inverse: @B800;
+  --rs-text-heading-inverse: @B900;
+  --rs-text-active: @H500;
+  --rs-text-disabled: @B500;
+  --rs-border-primary: @B100;
+  --rs-border-secondary: @B700;
+  --rs-bg-card: @B800;
+  --rs-bg-overlay: @B800;
+  --rs-bg-well: @B900;
+  --rs-bg-active: @H500;
+  --rs-bg-backdrop: fade(@B900, 80%);
+  --rs-state-hover-bg: @B600;
+  --rs-state-focus-shadow: 0 0 0 3px @B900, 0 0 0 5px @B000;
+  --rs-state-focus-shadow-slim: 0 0 0 2px @B000;
+  --rs-state-focus-outline: 3px solid fade(@H500, 25%);
+  --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+
+  // Button
+  --rs-btn-default-bg: transparent;
+  --rs-btn-default-text: @H500;
+  --rs-btn-default-border: 1px solid @H500;
+  --rs-btn-default-hover-bg: transparent;
+  --rs-btn-default-hover-text: @H400;
+  --rs-btn-default-active-bg: transparent;
+  --rs-btn-default-active-text: @H200;
+  --rs-btn-default-disabled-bg: transparent;
+  --rs-btn-default-disabled-text: @H500;
+  --rs-btn-primary-bg: @H500;
+  --rs-btn-primary-text: @B900;
+  --rs-btn-primary-hover-bg: @H400;
+  --rs-btn-primary-active-bg: @H200;
+  --rs-btn-subtle-text: @H500;
+  --rs-btn-subtle-hover-bg: transparent;
+  --rs-btn-subtle-hover-text: @H400;
+  --rs-btn-subtle-active-bg: transparent;
+  --rs-btn-subtle-active-text: @H200;
+  --rs-btn-subtle-disabled-text: @B500;
+  --rs-btn-ghost-border: @H500;
+  --rs-btn-ghost-text: @H500;
+  --rs-btn-ghost-hover-border: @H400;
+  --rs-btn-ghost-hover-text: @H400;
+  --rs-btn-ghost-active-border: @H200;
+  --rs-btn-ghost-active-text: @H200;
+  --rs-btn-link-text: @H500;
+  --rs-btn-link-hover-text: @H400;
+  --rs-btn-link-active-text: @H200;
+
+  // Icon Button
+  --rs-iconbtn-addon: transparent;
+  --rs-iconbtn-activated-addon: transparent;
+  --rs-iconbtn-pressed-addon: transparent;
+  --rs-iconbtn-primary-addon: @H400;
+  --rs-iconbtn-primary-activated-addon: @H300;
+  --rs-iconbtn-primary-pressed-addon: @H100;
+
+  // Divider
+  --rs-divider-border: @B600;
+
+  // Loader
+  --rs-loader-ring: fade(@B050, 30);
+  --rs-loader-rotor: @B000;
+  --rs-loader-backdrop: fade(@B900, 83%);
+  --rs-loader-ring-inverse: fade(@B050, 80);
+  --rs-loader-rotor-inverse: @B500;
+  --rs-loader-backdrop-inverse: fade(@B000, 90);
+
+  // Message
+  --rs-message-success-header: #fff;
+  --rs-message-success-text: #fff;
+  --rs-message-success-icon: #fff;
+  --rs-message-success-bg: @green-900;
+  --rs-message-success-border: @green-300;
+  --rs-message-info-header: #fff;
+  --rs-message-info-text: #fff;
+  --rs-message-info-icon: #fff;
+  --rs-message-info-bg: @blue-900;
+  --rs-message-info-border: @blue-500;
+  --rs-message-warning-header: #fff;
+  --rs-message-warning-text: #fff;
+  --rs-message-warning-icon: #fff;
+  --rs-message-warning-bg: @yellow-900;
+  --rs-message-warning-border: @yellow-500;
+  --rs-message-error-header: #fff;
+  --rs-message-error-text: #fff;
+  --rs-message-error-icon: #fff;
+  --rs-message-error-bg: @red-900;
+  --rs-message-error-border: @red-300;
+
+  // Tooltip
+  --rs-tooltip-bg: @B800;
+  --rs-tooltip-text: @B000;
+
+  // Progress
+  --rs-progress-bg: @B700;
+  --rs-progress-bar: @H500;
+  --rs-progress-bar-success: @green;
+  --rs-progress-bar-fail: @red;
+
+  // Placeholder
+  --rs-placeholder: @B600;
+  --rs-placeholder-active: lighten(@B600, 5%);
+
+  // Dropdown
+  --rs-dropdown-divider: @B600;
+  --rs-dropdown-item-bg-hover: @B600;
+  --rs-dropdown-item-bg-active: fade(@H900, 20);
+  --rs-dropdown-item-text-active: @H500;
+  --rs-dropdown-header-text: @B500;
+  --rs-dropdown-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2), 0 4px 4px 3px rgba(0, 0, 0, 0.24);
+
+  // ARIA menu
+  --rs-menuitem-active-bg: transparent;
+  --rs-menuitem-active-text: @H500;
+
+  // Steps
+  --rs-steps-border: @B200;
+  --rs-steps-state-finish: @H500;
+  --rs-steps-border-state-finish: @H500;
+  --rs-steps-state-wait: @B200;
+  --rs-steps-state-process: @H700;
+  --rs-steps-state-error: @red;
+  --rs-steps-border-state-error: @red;
+  --rs-steps-icon-state-process: @H500;
+  --rs-steps-icon-state-error: @red;
+
+  // Navs
+  --rs-navs-text: @B200;
+  --rs-navs-text-hover: @H500;
+  --rs-navs-bg-hover: transparent;
+  --rs-navs-text-active: @H500;
+  --rs-navs-bg-active: @B400;
+  --rs-navs-tab-border: @B600;
+  --rs-navs-subtle-border: @B600;
+  --rs-navs-selected: @H500;
+
+  // Navbar
+  --rs-navbar-default-bg: @B800;
+  --rs-navbar-default-text: @B050;
+  --rs-navbar-default-selected-text: @H500;
+  --rs-navbar-default-hover-bg: transparent;
+  --rs-navbar-default-hover-text: @H500;
+  --rs-navbar-inverse-bg: @B800;
+  --rs-navbar-inverse-text: @B050;
+  --rs-navbar-inverse-selected-bg: transparent;
+  --rs-navbar-inverse-selected-text: @H500;
+  --rs-navbar-inverse-hover-bg: transparent;
+  --rs-navbar-subtle-bg: @B800;
+  --rs-navbar-subtle-text: @B050;
+  --rs-navbar-subtle-selected-text: @H500;
+  --rs-navbar-subtle-hover-bg: transparent;
+  --rs-navbar-subtle-hover-text: @H500;
+
+  // Sidenav
+  --rs-sidenav-default-bg: @B800;
+  --rs-sidenav-default-text: @B050;
+  --rs-sidenav-default-selected-text: @H500;
+  --rs-sidenav-default-hover-bg: transparent;
+  --rs-sidenav-default-hover-text: @H500;
+  --rs-sidenav-inverse-bg: @B800;
+  --rs-sidenav-inverse-text: @B050;
+  --rs-sidenav-inverse-selected-bg: transparent;
+  --rs-sidenav-inverse-selected-text: @H500;
+  --rs-sidenav-inverse-hover-bg: transparent;
+  --rs-sidenav-subtle-bg: @B800;
+  --rs-sidenav-subtle-text: @B050;
+  --rs-sidenav-subtle-selected-text: @H500;
+  --rs-sidenav-subtle-hover-bg: transparent;
+  --rs-sidenav-subtle-hover-text: @H500;
+
+  // Input
+  --rs-input-bg: @B800;
+  --rs-input-focus-border: @H500;
+  --rs-input-disabled-bg: @B700;
+
+  // ARIA Listboxes
+  --rs-listbox-option-hover-bg: transparent;
+  --rs-listbox-option-hover-text: @H500;
+  --rs-listbox-option-selected-text: @H500;
+  --rs-listbox-option-selected-bg: transparent;
+  --rs-listbox-option-disabled-text: @B500;
+  --rs-listbox-option-disabled-selected-text: @H200;
+
+  // Checkbox
+  --rs-checkbox-icon: @B800;
+  --rs-checkbox-border: @B100;
+  --rs-checkbox-checked-bg: @H500;
+  --rs-checkbox-disabled-bg: @B500;
+
+  // Radio
+  --rs-radio-marker: @B800;
+  --rs-radio-border: @B100;
+  --rs-radio-checked-bg: @H500;
+  --rs-radio-disabled-bg: @B500;
+
+  // Rate
+  --rs-rate-symbol: @B100;
+  --rs-rate-symbol-checked: @H500;
+
+  // Toggle
+  --rs-toggle-bg: @B800;
+  --rs-toggle-thumb: @B100;
+  --rs-toggle-hover-bg: @B800;
+  --rs-toggle-disabled-bg: @B800;
+  --rs-toggle-disabled-thumb: @B300;
+  --rs-toggle-checked-bg: @H500;
+  --rs-toggle-checked-thumb: @B800;
+  --rs-toggle-checked-hover-bg: @H400;
+  --rs-toggle-checked-disabled-bg: @H900;
+  --rs-toggle-checked-disabled-thumb: @B800;
+
+  // Slider
+  --rs-slider-bar: @B600;
+  --rs-slider-hover-bar: @B600;
+  --rs-slider-thumb-border: @H500;
+  --rs-slider-thumb-bg: @B700;
+  --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500, 25);
+  --rs-slider-progress: @H500;
+
+  // Uploader
+  --rs-uploader-item-bg: @B300;
+  --rs-uploader-item-hover-bg: @B800;
+  --rs-uploader-item-hover-text: @H500;
+  --rs-uploader-overlay-bg: fade(@B600, 80);
+  --rs-uploader-dnd-bg: @B700;
+  --rs-uploader-dnd-border: @B200;
+  --rs-uploader-dnd-hover-border: @H500;
+
+  // Avatar
+  --rs-avatar-bg: @B400;
+  --rs-avatar-text: @B000;
+
+  // Badge
+  --rs-badge-bg: @red-500;
+  --rs-badge-text: @B000;
+
+  // Tag
+  --rs-tag-bg: @B600;
+  --rs-tag-close: @red;
+
+  // Carousel
+  --rs-carousel-bg: @B600;
+  --rs-carousel-indicator: fade(@B000, 40);
+  --rs-carousel-indicator-hover: @B000;
+  --rs-carousel-indicator-active: @H500;
+
+  // Panel
+  --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+
+  // Pagination
+  --rs-pagination-item-text: @B050;
+  --rs-pagination-item-current-text: @H500;
+
+  // List
+  --rs-list-bg: transparent;
+  --rs-list-border: @B700;
+  --rs-list-hover-bg: @B600;
+  --rs-list-placeholder-bg: fade(@H900, 20%);
+  --rs-list-placeholder-border: @H500;
+
+  // Timeline
+  --rs-timeline-indicator-bg: @B500;
+  --rs-timeline-indicator-active-bg: @H500;
+
+  // Table
+  --rs-table-shadow: rgba(9, 9, 9, 0.99);
+  --rs-table-sort: @H500;
+  --rs-table-resize: @H500;
+  --rs-table-scrollbar-track: @B700;
+  --rs-table-scrollbar-thumb: @B200;
+  --rs-table-scrollbar-thumb-active: @B100;
+  --rs-table-scrollbar-vertical-track: @B700;
+
+  // Drawer
+  --rs-drawer-bg: @B700;
+  --rs-drawer-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+
+  // Modal
+  --rs-modal-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+  --rs-modal-border: 1px solid @B100;
+
+  // Form
+  --rs-form-errormessage-text: #fff;
+  --rs-form-errormessage-bg: @red-500;
+  --rs-form-errormessage-border: @red-500;
+
+  // Picker
+  --rs-picker-value: @H500;
+  --rs-picker-count-bg: @H500;
+  --rs-picker-count-text: @B900;
+
+  // Calendar
+  --rs-calendar-today-bg: @H500;
+  --rs-calendar-today-text: @B900;
+  --rs-calendar-range-bg: fade(@H900, 50%);
+  --rs-calendar-time-unit-bg: @B900;
+  --rs-calendar-date-selected-text: @B900;
+
+  // Popover
+  --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}

package/styles/color-modes/light.less

@@ -166,6 +166,22 @@
   --rs-navbar-subtle-hover-bg: @B050;
   --rs-navbar-subtle-hover-text: @B800;
 
+  // Sidenav
+  --rs-sidenav-default-bg: @B050;
+  --rs-sidenav-default-text: @B800;
+  --rs-sidenav-default-selected-text: @H700;
+  --rs-sidenav-default-hover-bg: @B200;
+  --rs-sidenav-default-hover-text: @B800;
+  --rs-sidenav-inverse-bg: @H500;
+  --rs-sidenav-inverse-text: #fff;
+  --rs-sidenav-inverse-selected-bg: @H700;
+  --rs-sidenav-inverse-hover-bg: @H600;
+  --rs-sidenav-subtle-bg: #fff;
+  --rs-sidenav-subtle-text: @B600;
+  --rs-sidenav-subtle-selected-text: @H700;
+  --rs-sidenav-subtle-hover-bg: @B050;
+  --rs-sidenav-subtle-hover-text: @B800;
+
   // Input
   --rs-input-bg: @B000;
   --rs-input-focus-border: @H500;
@@ -191,6 +207,10 @@
   --rs-radio-checked-bg: @H500;
   --rs-radio-disabled-bg: @B050;
 
+  // Rate
+  --rs-rate-symbol: @B600;
+  --rs-rate-symbol-checked: @yellow-500;
+
   // Toggle
   --rs-toggle-bg: @B300;
   --rs-toggle-thumb: #fff;
@@ -198,6 +218,7 @@
   --rs-toggle-disabled-bg: @B050;
   --rs-toggle-disabled-thumb: #fff;
   --rs-toggle-checked-bg: @H500;
+  --rs-toggle-checked-thumb: #fff;
   --rs-toggle-checked-hover-bg: @H600;
   --rs-toggle-checked-disabled-bg: @H100;
   --rs-toggle-checked-disabled-thumb: #fff;
@@ -272,13 +293,15 @@
 
   // Picker
   --rs-picker-value: @H700;
-  --rs-picker-count: @H500;
+  --rs-picker-count-bg: @H500;
+  --rs-picker-count-text: #fff;
 
   // Calendar
   --rs-calendar-today-bg: @H500;
   --rs-calendar-today-text: #fff;
   --rs-calendar-range-bg: fade(@H100, 50%);
   --rs-calendar-time-unit-bg: @B050;
+  --rs-calendar-date-selected-text: #fff;
 
   // Popover
   --rs-popover-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);

package/styles/color-modes.less

@@ -10,3 +10,8 @@
     @import 'color-modes/dark';
   }
 }
+
+// TODO consider adding flag for high-contrast theme
+.rs-theme-high-contrast {
+  @import 'color-modes/high-contrast';
+}

package/styles/colors/high-contrast.less

@@ -0,0 +1,105 @@
+@plugin '../plugins/palette';
+
+// Highlight levels
+@H050: #fffef2;
+@H100: #fffbc2;
+@H200: #fffa91;
+@H300: #fffa61;
+@H400: #fffc30;
+@H500: #ffff00;
+@H600: #f1f500;
+@H700: #d9e000;
+@H800: #b8c200;
+@H900: #8f9900;
+
+// Gray levels
+@B000: #fff;
+@B050: #e9ebf0;
+@B100: #cbced4;
+@B200: #a4a9b3;
+@B300: #858b94;
+@B400: #6a6f76;
+@B500: #5c6066;
+@B600: #3c3f43;
+@B700: #292d33;
+@B800: #1a1d24;
+@B900: #0f131a;
+
+// Secondary palette
+
+@red-50: palette(@red-high-contrast, 50);
+@red-100: palette(@red-high-contrast, 100);
+@red-200: palette(@red-high-contrast, 200);
+@red-300: palette(@red-high-contrast, 300);
+@red-400: palette(@red-high-contrast, 400);
+@red-500: @red-high-contrast;
+@red-600: palette(@red-high-contrast, 600);
+@red-700: palette(@red-high-contrast, 700);
+@red-800: palette(@red-high-contrast, 800);
+@red-900: palette(@red-high-contrast, 900);
+
+@orange-50: palette(@orange-high-contrast, 50);
+@orange-100: palette(@orange-high-contrast, 100);
+@orange-200: palette(@orange-high-contrast, 200);
+@orange-300: palette(@orange-high-contrast, 300);
+@orange-400: palette(@orange-high-contrast, 400);
+@orange-500: @orange-high-contrast;
+@orange-600: palette(@orange-high-contrast, 600);
+@orange-700: palette(@orange-high-contrast, 700);
+@orange-800: palette(@orange-high-contrast, 800);
+@orange-900: palette(@orange-high-contrast, 900);
+
+@yellow-50: palette(@yellow-high-contrast, 50);
+@yellow-100: palette(@yellow-high-contrast, 100);
+@yellow-200: palette(@yellow-high-contrast, 200);
+@yellow-300: palette(@yellow-high-contrast, 300);
+@yellow-400: palette(@yellow-high-contrast, 400);
+@yellow-500: @yellow-high-contrast;
+@yellow-600: palette(@yellow-high-contrast, 600);
+@yellow-700: palette(@yellow-high-contrast, 700);
+@yellow-800: palette(@yellow-high-contrast, 800);
+@yellow-900: palette(@yellow-high-contrast, 900);
+
+@green-50: palette(@green-high-contrast, 50);
+@green-100: palette(@green-high-contrast, 100);
+@green-200: palette(@green-high-contrast, 200);
+@green-300: palette(@green-high-contrast, 300);
+@green-400: palette(@green-high-contrast, 400);
+@green-500: @green-high-contrast;
+@green-600: palette(@green-high-contrast, 600);
+@green-700: palette(@green-high-contrast, 700);
+@green-800: palette(@green-high-contrast, 800);
+@green-900: palette(@green-high-contrast, 900);
+
+@cyan-50: palette(@cyan-high-contrast, 50);
+@cyan-100: palette(@cyan-high-contrast, 100);
+@cyan-200: palette(@cyan-high-contrast, 200);
+@cyan-300: palette(@cyan-high-contrast, 300);
+@cyan-400: palette(@cyan-high-contrast, 400);
+@cyan-500: @cyan-high-contrast;
+@cyan-600: palette(@cyan-high-contrast, 600);
+@cyan-700: palette(@cyan-high-contrast, 700);
+@cyan-800: palette(@cyan-high-contrast, 800);
+@cyan-900: palette(@cyan-high-contrast, 900);
+
+@blue-50: palette(@blue-high-contrast, 50);
+@blue-100: palette(@blue-high-contrast, 100);
+@blue-200: palette(@blue-high-contrast, 200);
+@blue-300: palette(@blue-high-contrast, 300);
+@blue-400: palette(@blue-high-contrast, 400);
+@blue-500: @blue-high-contrast;
+@blue-600: palette(@blue-high-contrast, 600);
+@blue-700: palette(@blue-high-contrast, 700);
+@blue-800: palette(@blue-high-contrast, 800);
+@blue-900: palette(@blue-high-contrast, 900);
+
+@violet-50: palette(@violet-high-contrast, 50);
+@violet-100: palette(@violet-high-contrast, 100);
+@violet-200: palette(@violet-high-contrast, 200);
+@violet-300: palette(@violet-high-contrast, 300);
+@violet-400: palette(@violet-high-contrast, 400);
+@violet-500: @violet-high-contrast;
+@violet-600: palette(@violet-high-contrast, 600);
+@violet-700: palette(@violet-high-contrast, 700);
+@violet-800: palette(@violet-high-contrast, 800);
+@violet-900: palette(@violet-high-contrast, 900);

package/styles/index.less

@@ -65,6 +65,7 @@
 @import '../Table/styles/index';
 @import '../Tag/styles/index';
 @import '../TagPicker/styles/index';
+@import '../TagInput/styles/index';
 @import '../Timeline/styles/index';
 @import '../Toggle/styles/index';
 @import '../Tooltip/styles/index';

package/styles/mixins/color-modes.less

@@ -6,3 +6,9 @@
     }
   }
 }
+
+.high-contrast-mode(@rules) {
+  .rs-theme-high-contrast & {
+    @rules();
+  }
+}

package/styles/mixins/listbox.less

@@ -19,6 +19,7 @@
 //     .listbox-option-disabled();
 //   }
 // }
+@import 'color-modes';
 
 .listbox() {
   list-style: none;
@@ -50,15 +51,26 @@
   & when (@multiselectable = false) {
     color: var(--rs-listbox-option-hover-text);
   }
+
+  .high-contrast-mode({
+    .focus-ring(slim-inset);
+
+    color: var(--rs-listbox-option-hover-text);
+    text-decoration: underline;
+  });
 }
 
 .listbox-option-selected() {
   background-color: var(--rs-listbox-option-selected-bg);
   font-weight: bold;
   color: var(--rs-listbox-option-selected-text);
+
+  .high-contrast-mode({
+    text-decoration: underline;
+  });
 }
 
-.listbox-options-disabled {
+.listbox-options-disabled() {
   color: var(--rs-listbox-option-disabled-text);
   background: none;
   cursor: not-allowed;

package/styles/mixins/menu.less

@@ -1,5 +1,12 @@
+@import 'color-modes';
+
 // "-active" for `aria-activedescendant`
 .menuitem-active() {
   background-color: var(--rs-menuitem-active-bg);
   color: var(--rs-menuitem-active-text);
+
+  .high-contrast-mode({
+    text-decoration: underline;
+    box-shadow: inset 0 0 0 2px #fff;
+  });
 }

package/styles/mixins/utilities.less

@@ -48,7 +48,7 @@
 .set-translate-transition(@translateX:0,@translateY:0) {
   transform: translate(0, 0);
 
-  &.in {
+  &.rs-anim-in {
     transform: translate(@translateX, @translateY);
   }
 }
@@ -132,10 +132,18 @@
   box-shadow: var(--rs-state-focus-shadow);
 }
 
+.focus-ring(slim) {
+  box-shadow: var(--rs-state-focus-shadow-slim);
+}
+
 .focus-ring(inset) {
   box-shadow: inset var(--rs-state-focus-shadow);
 }
 
+.focus-ring(slim-inset) {
+  box-shadow: inset var(--rs-state-focus-shadow-slim);
+}
+
 .focus-ring(outline) {
   outline: var(--rs-state-focus-outline);
 }

package/styles/variables.less

@@ -85,6 +85,17 @@
 @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;