@react-ui-org/react-ui 0.44.1 → 0.47.0

package/src/lib/styles/theme/_colors.scss

@@ -1,63 +1,63 @@
 $brand: (
-  primary: var(--rui-color-primary),
-  primary-light: var(--rui-color-primary-light),
-  primary-dark: var(--rui-color-primary-dark),
-  primary-darker: var(--rui-color-primary-darker),
-  on-primary: var(--rui-color-on-primary),
-  secondary: var(--rui-color-secondary),
-  secondary-light: var(--rui-color-secondary-light),
-  secondary-dark: var(--rui-color-secondary-dark),
-  secondary-darker: var(--rui-color-secondary-darker),
-  on-secondary: var(--rui-color-on-secondary),
+    primary: var(--rui-color-primary),
+    primary-light: var(--rui-color-primary-light),
+    primary-dark: var(--rui-color-primary-dark),
+    primary-darker: var(--rui-color-primary-darker),
+    on-primary: var(--rui-color-on-primary),
+    secondary: var(--rui-color-secondary),
+    secondary-light: var(--rui-color-secondary-light),
+    secondary-dark: var(--rui-color-secondary-dark),
+    secondary-darker: var(--rui-color-secondary-darker),
+    on-secondary: var(--rui-color-on-secondary),
 );
 
 $ui: (
-  success: var(--rui-color-success),
-  success-light: var(--rui-color-success-light),
-  success-dark: var(--rui-color-success-dark),
-  success-darker: var(--rui-color-success-darker),
-  on-success: var(--rui-color-on-success),
-  warning: var(--rui-color-warning),
-  warning-light: var(--rui-color-warning-light),
-  warning-dark: var(--rui-color-warning-dark),
-  warning-darker: var(--rui-color-warning-darker),
-  on-warning: var(--rui-color-on-warning),
-  danger: var(--rui-color-danger),
-  danger-light: var(--rui-color-danger-light),
-  danger-dark: var(--rui-color-danger-dark),
-  danger-darker: var(--rui-color-danger-darker),
-  on-danger: var(--rui-color-on-danger),
-  help: var(--rui-color-help),
-  help-light: var(--rui-color-help-light),
-  help-dark: var(--rui-color-help-dark),
-  help-darker: var(--rui-color-help-darker),
-  on-help: var(--rui-color-on-help),
-  info: var(--rui-color-info),
-  info-light: var(--rui-color-info-light),
-  info-dark: var(--rui-color-info-dark),
-  info-darker: var(--rui-color-info-darker),
-  on-info: var(--rui-color-on-info),
-  note: var(--rui-color-note),
-  note-light: var(--rui-color-note-light),
-  note-dark: var(--rui-color-note-dark),
-  note-darker: var(--rui-color-note-darker),
-  on-note: var(--rui-color-on-note),
+    success: var(--rui-color-success),
+    success-light: var(--rui-color-success-light),
+    success-dark: var(--rui-color-success-dark),
+    success-darker: var(--rui-color-success-darker),
+    on-success: var(--rui-color-on-success),
+    warning: var(--rui-color-warning),
+    warning-light: var(--rui-color-warning-light),
+    warning-dark: var(--rui-color-warning-dark),
+    warning-darker: var(--rui-color-warning-darker),
+    on-warning: var(--rui-color-on-warning),
+    danger: var(--rui-color-danger),
+    danger-light: var(--rui-color-danger-light),
+    danger-dark: var(--rui-color-danger-dark),
+    danger-darker: var(--rui-color-danger-darker),
+    on-danger: var(--rui-color-on-danger),
+    help: var(--rui-color-help),
+    help-light: var(--rui-color-help-light),
+    help-dark: var(--rui-color-help-dark),
+    help-darker: var(--rui-color-help-darker),
+    on-help: var(--rui-color-on-help),
+    info: var(--rui-color-info),
+    info-light: var(--rui-color-info-light),
+    info-dark: var(--rui-color-info-dark),
+    info-darker: var(--rui-color-info-darker),
+    on-info: var(--rui-color-on-info),
+    note: var(--rui-color-note),
+    note-light: var(--rui-color-note-light),
+    note-dark: var(--rui-color-note-dark),
+    note-darker: var(--rui-color-note-darker),
+    on-note: var(--rui-color-on-note),
 );
 
 $white: var(--rui-color-white);
 $black: var(--rui-color-black);
 
 $grays: (
-  gray-50: var(--rui-color-gray-50),
-  gray-100: var(--rui-color-gray-100),
-  gray-200: var(--rui-color-gray-200),
-  gray-300: var(--rui-color-gray-300),
-  gray-400: var(--rui-color-gray-400),
-  gray-500: var(--rui-color-gray-500),
-  gray-600: var(--rui-color-gray-600),
-  gray-700: var(--rui-color-gray-700),
-  gray-800: var(--rui-color-gray-800),
-  gray-900: var(--rui-color-gray-900),
+    gray-50: var(--rui-color-gray-50),
+    gray-100: var(--rui-color-gray-100),
+    gray-200: var(--rui-color-gray-200),
+    gray-300: var(--rui-color-gray-300),
+    gray-400: var(--rui-color-gray-400),
+    gray-500: var(--rui-color-gray-500),
+    gray-600: var(--rui-color-gray-600),
+    gray-700: var(--rui-color-gray-700),
+    gray-800: var(--rui-color-gray-800),
+    gray-900: var(--rui-color-gray-900),
 );
 
 $light: var(--rui-color-light);

package/src/lib/styles/theme/_form-fields.scss

@@ -21,10 +21,10 @@ $horizontal-label-text-align: var(--rui-FormField--horizontal__label__text-align
 $horizontal-label-min-width: var(--rui-FormField--horizontal__label__min-width);
 $horizontal-label-width: var(--rui-FormField--horizontal__label__width);
 $horizontal-label-padding-y:
-  var(
-    --rui-FormField--horizontal__label__padding-y,
-    calc(var(--rui-FormField--box__border-width) + var(--rui-local-padding-y))
-  ); // 1.
+    var(
+        --rui-FormField--horizontal__label__padding-y,
+        calc(var(--rui-FormField--box__border-width) + var(--rui-local-padding-y))
+    ); // 1.
 $horizontal-label-vertical-alignment: var(--rui-FormField--horizontal__label__vertical-alignment);
 $horizontal-field-vertical-alignment: var(--rui-FormField--horizontal__field__vertical-alignment);
 $horizontal-full-width-label-width: var(--rui-FormField--horizontal--full-width__label__width);
@@ -47,24 +47,24 @@ $box-select-option-disabled-color: var(--rui-FormField--box--select__option--dis
 
 // Form fields: box field sizes
 $box-sizes: (
-  small: (
-    height: var(--rui-FormField--box--small__height),
-    padding-y: var(--rui-FormField--box--small__padding-y),
-    padding-x: var(--rui-FormField--box--small__padding-x),
-    font-size: var(--rui-FormField--box--small__font-size),
-  ),
-  medium: (
-    height: var(--rui-FormField--box--medium__height),
-    padding-y: var(--rui-FormField--box--medium__padding-y),
-    padding-x: var(--rui-FormField--box--medium__padding-x),
-    font-size: var(--rui-FormField--box--medium__font-size),
-  ),
-  large: (
-    height: var(--rui-FormField--box--large__height),
-    padding-y: var(--rui-FormField--box--large__padding-y),
-    padding-x: var(--rui-FormField--box--large__padding-x),
-    font-size: var(--rui-FormField--box--large__font-size),
-  ),
+    small: (
+        height: var(--rui-FormField--box--small__height),
+        padding-y: var(--rui-FormField--box--small__padding-y),
+        padding-x: var(--rui-FormField--box--small__padding-x),
+        font-size: var(--rui-FormField--box--small__font-size),
+    ),
+    medium: (
+        height: var(--rui-FormField--box--medium__height),
+        padding-y: var(--rui-FormField--box--medium__padding-y),
+        padding-x: var(--rui-FormField--box--medium__padding-x),
+        font-size: var(--rui-FormField--box--medium__font-size),
+    ),
+    large: (
+        height: var(--rui-FormField--box--large__height),
+        padding-y: var(--rui-FormField--box--large__padding-y),
+        padding-x: var(--rui-FormField--box--large__padding-x),
+        font-size: var(--rui-FormField--box--large__font-size),
+    ),
 );
 
 // Form fields: check fields
@@ -75,19 +75,19 @@ $check-tap-target-size: var(--rui-FormField--check__tap-target-size);
 
 // Form fields: check fields, component specific
 $check-input-checkbox-border-radius: var(--rui-FormField--check__input--checkbox__border-radius);
-$check-input-checkbox-checked-background-image:
-  var(--rui-FormField--check__input--checkbox--checked__background-image);
+$check-input-checkbox-checked-background-image: var(--rui-FormField--check__input--checkbox--checked__background-image);
 $check-input-radio-border-radius: var(--rui-FormField--check__input--radio__border-radius);
-$check-input-radio-checked-background-image:
-  var(--rui-FormField--check__input--radio--checked__background-image);
+$check-input-radio-checked-background-image: var(--rui-FormField--check__input--radio--checked__background-image);
 $check-input-toggle-width: var(--rui-FormField--check__input--toggle__width);
 $check-input-toggle-border-radius: var(--rui-FormField--check__input--toggle__border-radius);
 $check-input-toggle-background-size: var(--rui-FormField--check__input--toggle__background-size);
-$check-input-toggle-default-background-image:
-  var(--rui-FormField--check__input--toggle--default__background-image);
+$check-input-toggle-default-background-image: var(--rui-FormField--check__input--toggle--default__background-image);
 $check-input-toggle-default-background-position:
-  var(--rui-FormField--check__input--toggle--default__background-position);
-$check-input-toggle-checked-background-image:
-  var(--rui-FormField--check__input--toggle--checked__background-image);
+    var(
+        --rui-FormField--check__input--toggle--default__background-position
+    );
+$check-input-toggle-checked-background-image: var(--rui-FormField--check__input--toggle--checked__background-image);
 $check-input-toggle-checked-background-position:
-  var(--rui-FormField--check__input--toggle--checked__background-position);
+    var(
+        --rui-FormField--check__input--toggle--checked__background-position
+    );

package/src/lib/styles/theme/_spacing.scss

@@ -1,16 +1,16 @@
 $values: (
-  0: var(--rui-spacing-0),
-  1: var(--rui-spacing-1),
-  2: var(--rui-spacing-2),
-  3: var(--rui-spacing-3),
-  4: var(--rui-spacing-4),
-  5: var(--rui-spacing-5),
-  6: var(--rui-spacing-6),
-  7: var(--rui-spacing-7),
+    0: var(--rui-spacing-0),
+    1: var(--rui-spacing-1),
+    2: var(--rui-spacing-2),
+    3: var(--rui-spacing-3),
+    4: var(--rui-spacing-4),
+    5: var(--rui-spacing-5),
+    6: var(--rui-spacing-6),
+    7: var(--rui-spacing-7),
 );
 
 $bottom: (
-  default: var(--rui-spacing-bottom-default),
-  headings: var(--rui-spacing-bottom-headings),
-  layouts: var(--rui-spacing-bottom-layouts),
+    default: var(--rui-spacing-bottom-default),
+    headings: var(--rui-spacing-bottom-headings),
+    layouts: var(--rui-spacing-bottom-layouts),
 );

package/src/lib/styles/theme/_typography.scss

@@ -1,18 +1,18 @@
 $font-weight-values: (
-  thin: var(--rui-typography-font-weight-thin),
-  light: var(--rui-typography-font-weight-light),
-  regular: var(--rui-typography-font-weight-regular),
-  medium: var(--rui-typography-font-weight-medium),
-  bold: var(--rui-typography-font-weight-bold),
+    thin: var(--rui-typography-font-weight-thin),
+    light: var(--rui-typography-font-weight-light),
+    regular: var(--rui-typography-font-weight-regular),
+    medium: var(--rui-typography-font-weight-medium),
+    bold: var(--rui-typography-font-weight-bold),
 );
 
 $size-values: (
-  0: var(--rui-typography-size-0),
-  1: var(--rui-typography-size-1),
-  2: var(--rui-typography-size-2),
-  3: var(--rui-typography-size-3),
-  4: var(--rui-typography-size-4),
-  5: var(--rui-typography-size-5),
+    0: var(--rui-typography-size-0),
+    1: var(--rui-typography-size-1),
+    2: var(--rui-typography-size-2),
+    3: var(--rui-typography-size-3),
+    4: var(--rui-typography-size-4),
+    5: var(--rui-typography-size-5),
 );
 
 $size-small: var(--rui-typography-size-small);
@@ -21,3 +21,4 @@ $size-smaller: var(--rui-typography-size-smaller);
 $font-family-base: var(--rui-typography-font-family-base);
 $font-size-base: var(--rui-typography-font-size-base);
 $line-height-base: var(--rui-typography-line-height-base);
+$line-height-small: var(--rui-typography-line-height-small);

package/src/lib/styles/theme-constants/_breakpoints.scss

@@ -1,12 +1,12 @@
 // ⚠️ For `theme.scss` purposes only, do not use anywhere else.
 
-@use 'sass:map';
-@use '../settings/breakpoints';
+@use "sass:map";
+@use "../settings/breakpoints";
 
 $xs: map.get(breakpoints.$values, xs);
 $sm: map.get(breakpoints.$values, sm);
 $md: map.get(breakpoints.$values, md);
 $lg: map.get(breakpoints.$values, lg);
 $xl: map.get(breakpoints.$values, xl);
-$xxl: map.get(breakpoints.$values, xxl);
-$xxxl: map.get(breakpoints.$values, xxxl);
+$x2l: map.get(breakpoints.$values, x2l);
+$x3l: map.get(breakpoints.$values, x3l);

package/src/lib/styles/theme-constants/_colors.scss

@@ -1,7 +1,7 @@
 // ⚠️ For `theme.scss` purposes only, do not use anywhere else.
 
-@use 'sass:color';
-@use '../tools/colors';
+@use "sass:color";
+@use "../tools/colors";
 
 $_gray-base-color: #fff;
 $_amount-light: 90%;

package/src/lib/styles/theme-constants/_svg.scss

@@ -1,8 +1,7 @@
 // ⚠️ For `theme.scss` purposes only, do not use anywhere else.
 
-@use '../tools/svg';
+@use "../tools/svg";
 
-// stylelint-disable function-url-quotes
 $checkbox-checked: svg.escape(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>"));
 $radio-checked: svg.escape(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#ffffff'/></svg>"));
 $toggle: svg.escape(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#cccccc'/></svg>"));

package/src/lib/styles/tools/_accessibility.scss

@@ -3,49 +3,49 @@
 //
 // 2. Make tap target big enough to improve accessibility on touch screens.
 
-@use '../theme/accessibility' as theme;
+@use "../theme/accessibility" as theme;
 
 // 1.
 @mixin hide-text() {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
 }
 
 @mixin unhide-text() {
-  position: unset;
-  width: unset;
-  height: unset;
-  overflow: unset;
-  clip: unset;
-  white-space: unset;
+    position: unset;
+    width: unset;
+    height: unset;
+    overflow: unset;
+    clip: unset;
+    white-space: unset;
 }
 
 // 2.
 @mixin min-tap-target($size: theme.$tap-target-size, $center: true) {
-  position: relative;
+    position: relative;
 
-  &::before {
-    content: '';
-    position: absolute;
-    width: $size;
-    height: $size;
+    &::before {
+        content: "";
+        position: absolute;
+        width: $size;
+        height: $size;
 
-    @if ($center) {
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
+        @if $center {
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
     }
-  }
 }
 
 @mixin focus-ring() {
-  &:focus-visible {
-    box-shadow: theme.$focus-box-shadow;
-  }
+    &:focus-visible {
+        box-shadow: theme.$focus-box-shadow;
+    }
 }

package/src/lib/styles/tools/_breakpoint.scss

@@ -1,18 +1,15 @@
-@use 'sass:map';
-@use '../settings/breakpoints';
+@use "sass:map";
+@use "../settings/breakpoints";
 
 @mixin up($breakpoint) {
-  @if not map.has-key(breakpoints.$values, $breakpoint) {
-    @error "Invalid breakpoint specified! #{$breakpoint} doesn't exist. Choose one of #{map.keys(breakpoints.$values)}";
-  }
-
-  @else if map.get(breakpoints.$values, $breakpoint) == 0 {
-    @content;
-  }
-
-  @else {
-    @media (min-width: map.get(breakpoints.$values, $breakpoint)) {
-      @content;
+    @if not map.has-key(breakpoints.$values, $breakpoint) {
+        @error "Invalid breakpoint specified! #{$breakpoint} doesn't exist. "
+            + "Choose one of #{map.keys(breakpoints.$values)}";
+    } @else if map.get(breakpoints.$values, $breakpoint) == 0 {
+        @content;
+    } @else {
+        @media (min-width: map.get(breakpoints.$values, $breakpoint)) {
+            @content;
+        }
     }
-  }
 }

package/src/lib/styles/tools/_caret.scss

@@ -1,14 +1,14 @@
 @mixin create($rotate: 0) {
-  @include rotate();
+    @include rotate();
 
-  display: inline-block;
-  width: 0.4375rem;
-  height: 0.4375rem;
-  border-width: 2px;
-  border-style: none solid solid none;
-  border-color: currentColor;
+    display: inline-block;
+    width: 0.4375rem;
+    height: 0.4375rem;
+    border-width: 2px;
+    border-style: none solid solid none;
+    border-color: currentColor;
 }
 
 @mixin rotate($rotate: 0) {
-  transform: translateY(-0.1rem) rotate($rotate + 45deg);
+    transform: translateY(-0.1rem) rotate($rotate + 45deg);
 }

package/src/lib/styles/tools/_colors.scss

@@ -1,9 +1,9 @@
-@use 'sass:color';
+@use "sass:color";
 
 @function lighten-color($color, $weight) {
-  @return color.mix(white, $color, $weight);
+    @return color.mix(white, $color, $weight);
 }
 
 @function darken-color($color, $weight) {
-  @return color.mix(black, $color, $weight);
+    @return color.mix(black, $color, $weight);
 }

package/src/lib/styles/tools/_reset.scss

@@ -1,30 +1,33 @@
 @mixin button() {
-  appearance: none;
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  background: none;
-  box-shadow: none;
-  cursor: pointer;
+    appearance: none;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    box-shadow: none;
+    cursor: pointer;
 }
 
 @mixin link() {
-  text-decoration: none;
-  color: inherit;
-
-  &:hover,
-  &:focus {
     text-decoration: none;
-    outline: none;
-  }
+    color: inherit;
+
+    &:hover,
+    &:focus {
+        text-decoration: none;
+        outline: none;
+    }
 }
 
 @mixin list() {
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
+    padding-left: 0;
+    list-style: none;
+
+    &:not(:last-child) {
+        margin-bottom: 0;
+    }
 }

package/src/lib/styles/tools/_scrollbar.scss

@@ -1,7 +1,7 @@
 @mixin hide() {
-  scrollbar-width: none;
+    scrollbar-width: none;
 
-  &::-webkit-scrollbar {
-    display: none;
-  }
+    &::-webkit-scrollbar {
+        display: none;
+    }
 }

package/src/lib/styles/tools/_spacing.scss

@@ -1,31 +1,23 @@
-@use 'sass:map';
-@use '../theme/spacing';
+@use "sass:map";
+@use "../theme/spacing";
 
 @function of($value) {
-  @if ($value % 1 != 0) {
-    @error 'Only whole numbers can be used for spacing, #{$value} given.';
-  }
-
-  @else {
-    @if (map.has-key(spacing.$values, $value)) {
-      @return map.get(spacing.$values, $value);
+    @if $value % 1 != 0 {
+        @error "Only whole numbers can be used for spacing, #{$value} given.";
+    } @else {
+        @if map.has-key(spacing.$values, $value) {
+            @return map.get(spacing.$values, $value);
+        }
     }
-  }
 }
 
-@mixin bottom($category: default, $compensation: null) {
-  @if (not map.has-key(spacing.$bottom, $category)) {
-    @error "Invalid spacing category specified! #{$category} doesn't exist. "
-      + "Choose one of #{map.keys(spacing.$bottom)}.";
-  }
-
-  &:not(:last-child) {
-    @if ($compensation != null) {
-      margin-bottom: calc(#{map.get(spacing.$bottom, $category)} - #{$compensation});
+@mixin bottom($category: default) {
+    @if not map.has-key(spacing.$bottom, $category) {
+        @error "Invalid spacing category specified! #{$category} doesn't exist. "
+            + "Choose one of #{map.keys(spacing.$bottom)}.";
     }
 
-    @else {
-      margin-bottom: map.get(spacing.$bottom, $category);
+    &:not(:last-child) {
+        margin-bottom: map.get(spacing.$bottom, $category);
     }
-  }
 }

package/src/lib/styles/tools/_string.scss

@@ -1,15 +1,15 @@
 // Author: Hugo Giraudel
 
-@use 'sass:string';
+@use "sass:string";
 
-@function replace($string, $search, $replace: '') {
-  $index: string.index($string, $search);
+@function replace($string, $search, $replace: "") {
+    $index: string.index($string, $search);
 
-  @if $index {
-    @return string.slice($string, 1, $index - 1)
-      + $replace
-      + replace(string.slice($string, $index + string.length($search)), $search, $replace);
-  }
+    @if $index {
+        @return string.slice($string, 1, $index - 1)
+            + $replace
+            + replace(string.slice($string, $index + string.length($search)), $search, $replace);
+    }
 
-  @return $string;
+    @return $string;
 }

package/src/lib/styles/tools/_svg.scss

@@ -2,24 +2,21 @@
 //
 // 1. Do not escape the url brackets.
 
-@use 'sass:string';
-@use '../settings/escaped-characters';
-@use 'string' as rui-string;
+@use "sass:string";
+@use "../settings/escaped-characters";
+@use "string" as rui-string;
 
 @function escape($string) {
-  @if string.index($string, 'data:image/svg+xml') {
-    @each $char, $encoded in escaped-characters.$map {
-
-      // 1.
-      @if string.index($string, 'url(') == 1 {
-        $string: url('#{rui-string.replace(string.slice($string, 6, -3), $char, $encoded)}');
-      }
-
-      @else {
-        $string: rui-string.replace($string, $char, $encoded);
-      }
+    @if string.index($string, "data:image/svg+xml") {
+        @each $char, $encoded in escaped-characters.$map {
+            // 1.
+            @if string.index($string, "url(") == 1 {
+                $string: url("#{rui-string.replace(string.slice($string, 6, -3), $char, $encoded)}");
+            } @else {
+                $string: rui-string.replace($string, $char, $encoded);
+            }
+        }
     }
-  }
 
-  @return $string;
+    @return $string;
 }