@react-ui-org/react-ui 0.44.0 → 0.46.0

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,7 +1,7 @@
 // ⚠️ 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);

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,27 @@
-@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});
+    @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) {
+        @if $compensation {
+            margin-bottom: calc(#{map.get(spacing.$bottom, $category)} - #{$compensation});
+        } @else {
+            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;
 }

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

@@ -1,70 +1,68 @@
-@use 'sass:list';
-@use 'sass:meta';
-@use 'sass:string';
-@use '../settings/animations';
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+@use "../settings/animations";
 
 $_allowed-transitions: (
-  border-color,
-  background-color,
-  background-position,
-  box-shadow,
-  color,
-  opacity,
-  transform,
-  visibility,
+    border-color,
+    background-color,
+    background-position,
+    box-shadow,
+    color,
+    opacity,
+    transform,
+    visibility,
 );
 
 $_reduced-motion-disallowed-transitions: (transform);
 
 @function _validate-transitions($properties) {
-  @each $property in $properties {
-    $is-allowed: list.index($_allowed-transitions, $property);
+    @each $property in $properties {
+        $is-allowed: list.index($_allowed-transitions, $property);
 
-    @if not $is-allowed {
-      @return false;
+        @if not $is-allowed {
+            @return false;
+        }
     }
-  }
 
-  @return true;
+    @return true;
 }
 
 @function _reduce-motion-transitions($properties) {
-  $reduced-properties: ();
-  $separator: list.separator($properties);
+    $reduced-properties: ();
+    $separator: list.separator($properties);
 
-  @each $property in $properties {
-    @if not list.index($_reduced-motion-disallowed-transitions, $property) {
-      $reduced-properties: list.append($reduced-properties, $property, $separator: $separator);
+    @each $property in $properties {
+        @if not list.index($_reduced-motion-disallowed-transitions, $property) {
+            $reduced-properties: list.append($reduced-properties, $property, $separator: $separator);
+        }
     }
-  }
 
-  @return $reduced-properties;
+    @return $reduced-properties;
 }
 
 @mixin add($properties, $duration: 150ms) {
-  $property-list: ();
+    $property-list: ();
 
-  @if meta.type-of($properties) != 'string' and meta.type-of($properties) != 'list' {
-    @error "Transition properties must be a string or a Sass list, `#{$properties}` given.";
-  }
-
-  $property-list: list.join($property-list, $properties);
+    @if meta.type-of($properties) != "string" and meta.type-of($properties) != "list" {
+        @error "Transition properties must be a string or a Sass list, `#{$properties}` given.";
+    }
 
-  @if not _validate-transitions($property-list) {
-    @error "Only [#{$_allowed-transitions}] transitions are allowed, [#{$properties}] given.";
-  }
+    $property-list: list.join($property-list, $properties);
 
-  @else {
-    $reduced-property-list: _reduce-motion-transitions($property-list);
+    @if not _validate-transitions($property-list) {
+        @error "Only [#{$_allowed-transitions}] transitions are allowed, [#{$properties}] given.";
+    } @else {
+        $reduced-property-list: _reduce-motion-transitions($property-list);
 
-    transition-property: $property-list;
-    transition-duration: $duration;
-    transition-timing-function: animations.$standard-timing-function;
+        transition-property: $property-list;
+        transition-duration: $duration;
+        transition-timing-function: animations.$standard-timing-function;
 
-    @if (list.length($reduced-property-list) > 0) {
-      @media (prefers-reduced-motion: reduce) {
-        transition-property: $reduced-property-list;
-      }
+        @if list.length($reduced-property-list) > 0 {
+            @media (prefers-reduced-motion: reduce) {
+                transition-property: $reduced-property-list;
+            }
+        }
     }
-  }
 }