rsuite 6.0.1 → 6.1.0

package/styles/_css-reset.scss

@@ -0,0 +1,345 @@
+body {
+  // Remove default margin.
+  margin: 0;
+
+  // Optimize for the retina screen
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Address `[hidden]` styling not present in IE 10.
+// Hide the `template` element in IE 10/11, Safari, and Firefox < 22.
+[hidden],
+template {
+  display: none;
+}
+
+// Links
+// ==========================================================================
+
+a {
+  color: var(--rs-text-link);
+  text-decoration: none;
+  background-color: transparent;
+
+  &:hover,
+  &:focus {
+    outline: 0;
+    color: var(--rs-text-link-hover);
+    text-decoration: var(--rs-link-hover-decoration);
+  }
+
+  &:active {
+    outline: 0;
+    color: var(--rs-text-link-active);
+    text-decoration: var(--rs-link-active-decoration);
+  }
+}
+
+// Text-level semantics
+// ==========================================================================
+
+// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+b,
+strong {
+  font-weight: bold;
+}
+
+// Prevent `sub` and `sup` affecting `line-height` in all browsers.
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+// Embedded content
+// ==========================================================================
+
+// Correct overflow not hidden in IE 10/11.
+svg:not(:root) {
+  overflow: hidden;
+}
+
+// Address differences between Firefox and other browsers.
+hr {
+  box-sizing: content-box;
+  height: 0;
+  margin-block: var(--rs-line-height-base);
+  border: 0;
+  border-top: 1px solid var(--rs-divider-border);
+}
+
+// Contain overflow in all browsers.
+pre {
+  overflow: auto;
+}
+
+// Forms
+// ==========================================================================
+
+// Known limitation: by default, Chrome and Safari on OS X allow very limited
+// styling of `select`, unless a `border` property is set.
+
+// 1. Correct color not being inherited.
+//    Known issue: affects color of disabled elements.
+// 2. Correct font properties not being inherited.
+// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; // 1
+  font: inherit; // 2
+  margin: 0; // 3
+}
+
+button {
+  // Address `overflow` set to `hidden` in IE 10/11.
+  overflow: visible;
+
+  // Remove border radius in Chrome 62+
+  border-radius: var(--rs-radius-none);
+}
+
+// Address inconsistent `text-transform` inheritance for `button` and `select`.
+// All other form control elements do not inherit `text-transform` values.
+// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+// Correct `select` style inheritance in Firefox.
+button,
+select {
+  text-transform: none;
+}
+
+// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+//    and `video` controls.
+// 2. Correct inability to style clickable `input` types in iOS.
+// 3. Improve usability and consistency of cursor style between image-type
+//    `input` and others.
+button,
+input[type='reset'],
+input[type='submit'] {
+  appearance: auto;
+  cursor: pointer;
+}
+
+// Re-set default cursor for disabled elements.
+button[disabled],
+html input[disabled] {
+  cursor: not-allowed;
+}
+
+// Remove inner padding and border in Firefox 4+.
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+// Address Firefox 4+ setting `line-height` on `input` using `!important` in
+// the UA stylesheet.
+input {
+  line-height: normal;
+}
+
+// It's recommended that you don't attempt to style these elements.
+// Firefox's implementation doesn't respect box-sizing, padding, or width.
+// 1. Address box sizing set to `content-box` in IE 10.
+// 2. Remove excess padding in IE 10.
+input[type='checkbox'],
+input[type='radio'] {
+  box-sizing: border-box; // 1
+  padding: 0; // 2
+}
+
+// Fix the cursor style for Chrome's increment/decrement buttons. For certain
+// `font-size` values of the `input`, it causes the cursor style of the
+// decrement button to change from `default` to `text`.
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+// Remove default vertical scrollbar in IE 10/11.
+textarea {
+  overflow: auto;
+}
+
+// Tables
+// ==========================================================================
+
+// Remove most spacing between table cells.
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
+
+// Remove tabIndex component outline
+[tabindex='-1'] {
+  outline: none;
+}
+
+// Remove Default button Style
+button,
+input[type='button'],
+input[type='submit'],
+input[type='reset'] {
+  border-width: 0;
+}
+
+// Remove IE10's "clear field" X button on certain inputs
+input::-ms-clear {
+  display: none;
+}
+
+// Remove File button Style
+input[type='file']::-webkit-file-upload-button,
+input[type='file']::-ms-browse {
+  border-width: 0;
+  background: transparent;
+  color: currentcolor;
+}
+
+// Reset fonts for relevant elements
+input,
+button,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+// Images
+img {
+  vertical-align: middle;
+
+  // Remove border when inside `a` element in IE 10.
+  border: 0;
+}
+
+[role='button'] {
+  cursor: pointer;
+}
+
+// Typography
+// --------------------------------------------------
+
+// Headings
+// -------------------------
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--rs-heading-font-family);
+  font-weight: var(--rs-heading-font-weight);
+  color: var(--rs-heading-color);
+}
+
+h1 {
+  font-size: var(--rs-heading-h1-font-size);
+  line-height: var(--rs-heading-h1-line-height);
+}
+
+h2 {
+  font-size: var(--rs-heading-h2-font-size);
+  line-height: var(--rs-heading-h2-line-height);
+}
+
+h3 {
+  font-size: var(--rs-heading-h3-font-size);
+  line-height: var(--rs-heading-h3-line-height);
+}
+
+h4 {
+  font-size: var(--rs-heading-h4-font-size);
+  line-height: var(--rs-heading-h4-line-height);
+}
+
+h5 {
+  font-size: var(--rs-heading-h5-font-size);
+  line-height: var(--rs-heading-h5-line-height);
+}
+
+h6 {
+  font-size: var(--rs-heading-h6-font-size);
+  line-height: var(--rs-heading-h6-line-height);
+}
+
+// Emphasis & misc
+// -------------------------
+
+// Ex: (12px small font / 14px base font) * 100% = about 85%
+small {
+  font-size: var(--rs-font-size-xs);
+}
+
+h1 small,
+h2 small,
+h3 small,
+h4 small,
+h5 small,
+h6 small {
+  font-weight: normal;
+  line-height: 1;
+  color: var(--rs-text-disabled);
+}
+
+mark {
+  background-color: var(--rs-bg-warning);
+  padding: 0.2em;
+  font-weight: bolder;
+}
+
+// Lists
+// -------------------------
+
+// Unordered and Ordered lists
+ul,
+ol {
+  margin-top: 0;
+  margin-bottom: calc(var(--rs-line-height-base) / 2);
+
+  ul,
+  ol {
+    margin-bottom: 0;
+  }
+}
+
+// Description Lists
+dl {
+  margin-top: 0; // Remove browser default
+  margin-bottom: calc(var(--rs-line-height-base) / 2);
+}
+
+dt,
+dd {
+  line-height: var(--rs-line-height-md);
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-inline-start: 0; // Undo browser default
+  margin-bottom: calc(var(--rs-line-height-base) / 2);
+}

package/styles/_themes.scss

@@ -0,0 +1,132 @@
+// Import color mode stylesheets with CSS custom properties
+@use 'color-modes/light' as light-theme;
+@use 'color-modes/dark' as dark-theme;
+@use 'color-modes/high-contrast' as high-contrast-theme;
+
+:root {
+  // Font family
+  --rs-font-family-base: -apple-system, BlinkMacSystemFont, Arial, Helvetica, 'PingFang SC',
+    'Hiragino Sans GB', 'Microsoft YaHei', STXihei, sans-serif;
+  --rs-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+
+  // Font size
+  --rs-font-size-4xs: 0.375rem; // 6px
+  --rs-font-size-3xs: 0.5rem; // 8px
+  --rs-font-size-2xs: 0.625rem; // 10px
+  --rs-font-size-xs: 0.75rem; // 12px
+  --rs-font-size-sm: 0.875rem; // 14px
+  --rs-font-size-md: 1rem; // 16px
+  --rs-font-size-lg: 1.125rem; // 18px
+  --rs-font-size-xl: 1.25rem; // 20px
+  --rs-font-size-2xl: 1.5rem; // 24px
+  --rs-font-size-3xl: 1.875rem; // 30px
+  --rs-font-size-4xl: 2.25rem; // 36px
+  --rs-font-size-5xl: 3rem; // 48px
+  --rs-font-size-6xl: 3.75rem; // 60px
+  --rs-font-size-base: var(--rs-font-size-sm);
+
+  // Line height
+  --rs-line-height-base: 20px;
+  --rs-line-height-plus: 22px;
+  --rs-line-height-xs: calc(20 / 12);
+  --rs-line-height-sm: calc(20 / 12);
+  --rs-line-height-md: calc(20 / 14);
+  --rs-line-height-lg: calc(22 / 16);
+
+  // Text line height
+  --rs-text-line-height-xs: calc(1 / 0.75);
+  --rs-text-line-height-sm: calc(1.25 / 0.875);
+  --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-text-line-height-6xl: 1;
+
+  // Spacing
+  --rs-spacing: 0.25rem; // 4px
+  --rs-spacing-inline-xs: 8px;
+  --rs-spacing-block-xs: 2px;
+  --rs-spacing-inline-sm: 10px;
+  --rs-spacing-block-sm: 5px;
+  --rs-spacing-inline-lg: 16px;
+  --rs-spacing-block-lg: 10px;
+  --rs-padding-inline-md: 12px;
+  --rs-padding-block-md: 8px;
+
+  // Scale
+  --rs-scale: 1;
+
+  // Radius
+  --rs-radius-none: 0;
+  --rs-radius-xs: 0.125rem; // 2px
+  --rs-radius-sm: 0.25rem; // 4px
+  --rs-radius-md: 0.375rem; // 6px
+  --rs-radius-lg: 0.5rem; // 8px
+  --rs-radius-xl: 0.75rem; // 12px
+  --rs-radius-2xl: 1rem; // 16px
+  --rs-radius-3xl: 1.5rem; // 24px
+  --rs-radius-4xl: 2rem; // 32px
+  --rs-radius-full: 62.5rem; // 1000px
+
+  // Shadow colors
+  --rs-shadow-color: rgb(0 0 0 / 10%);
+  --rs-shadow-color-deep: rgb(0 0 0 / 25%);
+
+  // Shadows
+  --rs-shadow-none: 0 0 #0000;
+  --rs-shadow-xs: 0 1px 2px 0 var(--rs-shadow-color);
+  --rs-shadow-sm: 0 1px 3px 0 var(--rs-shadow-color), 0 1px 2px 0 var(--rs-shadow-color);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
+  --rs-shadow-lg: 0 10px 15px -3px var(--rs-shadow-color), 0 4px 6px 0 var(--rs-shadow-color);
+  --rs-shadow-xl: 0 20px 25px -5px var(--rs-shadow-color), 0 8px 10px 0 var(--rs-shadow-color);
+  --rs-shadow-2xl: 0 25px 50px -12px var(--rs-shadow-color-deep);
+
+  // Cursor
+  --rs-cursor-disabled: not-allowed;
+
+  // Link
+  --rs-link-hover-decoration: underline;
+  --rs-link-active-decoration: underline;
+
+  // Ripple
+  --rs-ripple-bg: rgb(0 0 0 / 20%);
+
+  // Loader
+  --rs-loader-default-size: 1.125rem;
+
+  // -- 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.
+
+  --rs-zindex-date-range-picker-calendar-dropdown: 1;
+  --rs-zindex-date-range-picker-table-cell-content: 1;
+  --rs-zindex-badge-content: 1;
+  --rs-zindex-message-full: 3;
+  --rs-zindex-dropdown: 5;
+  --rs-zindex-picker-toggle: 5;
+  --rs-zindex-picker-input: 6; // picker-toggle + 1
+  --rs-zindex-picker-popup: 7; // picker-toggle + 2
+  --rs-zindex-list-helper: 99;
+  --rs-zindex-modal: 1050;
+  --rs-zindex-drawer: 1050;
+  --rs-zindex-popover: 1060;
+  --rs-zindex-tooltip: 1070;
+  --rs-zindex-notification: 1080;
+  --rs-zindex-uploader-picture-preview: 1;
+  --rs-zindex-uploader-picture-loading-wrapper: 2;
+  --rs-zindex-uploader-picture-error-wrapper: 3;
+  --rs-zindex-uploader-picture-remove-button: 4;
+  --rs-zindex-form-error-message: 5;
+  --rs-zindex-table-body-row-wrapper: 0;
+  --rs-zindex-table-header-row-wrapper: 2;
+  --rs-zindex-table-column-resize-spanner: 3;
+  --rs-zindex-table-cell-group-fixed: 4;
+  --rs-zindex-table-row-cell-group-shadow: 5;
+  --rs-zindex-table-mouse-area: 6;
+  --rs-zindex-rate-character-before: 1;
+}

package/styles/_variables.scss

@@ -0,0 +1,48 @@
+// 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 color base and themes - using @forward to make these variables available
+// to files that import this variables file
+@forward 'colors/colors-base';
+@forward 'colors/light';
+@forward 'colors/dark';
+@forward 'colors/high-contrast';
+
+// Controls
+
+// CSS Resets
+$enable-css-reset: true !default;
+
+// Global button ripple switch
+$enable-ripple-effect: true !default;
+
+// Whether include styles for dark mode
+$enable-dark-mode: true !default;
+
+// Whether include styles for high-contrast mode
+$enable-high-contrast: true !default;
+
+// 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 !default;
+
+// Medium screen / desktop
+// $screen-md
+$screen-md: 768px !default;
+
+// Large screen / wide desktop
+// $screen-lg
+$screen-lg: 992px !default;
+
+// Extra large devices / extra wide desktop
+// $screen-xl
+$screen-xl: 1200px !default;
+
+// Extra extra large devices / ultra wide desktop
+// $screen-xxl
+$screen-xxl: 1400px !default;