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

package/src/lib/styles/elements/_rulers.scss

@@ -1,9 +1,9 @@
-@use 'sass:map';
-@use '../theme/borders';
-@use '../theme/colors';
+@use "sass:map";
+@use "../theme/borders";
+@use "../theme/colors";
 
 hr {
-  border: 0;
-  border-top: borders.$width solid map.get(colors.$grays, gray-200);
-  background: none;
+    border: 0;
+    border-top: borders.$width solid map.get(colors.$grays, gray-200);
+    background: none;
 }

package/src/lib/styles/elements/_small.scss

@@ -1,5 +1,5 @@
-@use '../theme/typography';
+@use "../theme/typography";
 
 small {
-  font-size: typography.$size-small;
+    font-size: typography.$size-small;
 }

package/src/lib/styles/generic/_box-sizing.scss

@@ -2,12 +2,13 @@
 // https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 
 html {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 // stylelint-disable selector-max-universal
 *,
 *::before,
 *::after {
-  box-sizing: inherit;
+    box-sizing: inherit;
 }
+// stylelint-enable selector-max-universal

package/src/lib/styles/generic/_forms.scss

@@ -3,11 +3,11 @@ button:focus,
 input:focus,
 select:focus,
 textarea:focus {
-  outline: 0;
+    outline: 0;
 }
 
 // Reset Chrome and Firefox behaviour which sets a `min-width: min-content;` on fieldsets.
 fieldset {
-  min-width: 0;
-  border: 0;
+    min-width: 0;
+    border: 0;
 }

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

@@ -16,8 +16,8 @@ figure,
 hr,
 fieldset,
 legend {
-  padding: 0;
-  margin: 0;
+    padding: 0;
+    margin: 0;
 }
 
 h1,
@@ -26,15 +26,15 @@ h3,
 h4,
 h5,
 h6 {
-  font-size: 1rem;
+    font-size: 1rem;
 }
 
 li > ol,
 li > ul {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }
 
 table {
-  border-collapse: collapse;
-  border-spacing: 0;
+    border-collapse: collapse;
+    border-spacing: 0;
 }

package/src/lib/styles/generic/_shared.scss

@@ -1,4 +1,4 @@
-@use '../tools/spacing';
+@use "../tools/spacing";
 
 // Always declare margins in the same direction.
 address,
@@ -12,7 +12,7 @@ figure,
 hr,
 table,
 fieldset {
-  @include spacing.bottom();
+    @include spacing.bottom();
 }
 
 h1,
@@ -21,5 +21,5 @@ h3,
 h4,
 h5,
 h6 {
-  @include spacing.bottom(headings);
+    @include spacing.bottom(headings);
 }

package/src/lib/styles/helpers/_animation.scss

@@ -3,19 +3,19 @@ $_spin-duration: 2.2s;
 $_spin-easing: cubic-bezier(0.31, 0.3, 0.34, -0.17);
 
 @keyframes spin {
-  0% {
-    transform: rotate(0 * 360deg);
-  }
+    0% {
+        transform: rotate(0 * 360deg);
+    }
 
-  100% {
-    transform: rotate($_spin-count * 360deg);
-  }
+    100% {
+        transform: rotate($_spin-count * 360deg);
+    }
 }
 
 :global(.animation-spin-clockwise) {
-  animation: spin $_spin-duration $_spin-easing infinite;
+    animation: spin $_spin-duration $_spin-easing infinite;
 }
 
 :global(.animation-spin-counterclockwise) {
-  animation: spin $_spin-duration $_spin-easing infinite reverse;
+    animation: spin $_spin-duration $_spin-easing infinite reverse;
 }

package/src/lib/styles/settings/_breakpoints.scss

@@ -1,9 +1,9 @@
 $values: (
-  xs: 0,
-  sm: 36em,
-  md: 48em,
-  lg: 66em,
-  xl: 84em,
-  xxl: 100em,
-  xxxl: 120em,
+    xs: 0,
+    sm: 36em,
+    md: 48em,
+    lg: 66em,
+    xl: 84em,
+    xxl: 100em,
+    xxxl: 120em,
 );

package/src/lib/styles/settings/_escaped-characters.scss

@@ -1,7 +1,7 @@
 $map: (
-  ('<', '%3c'),
-  ('>', '%3e'),
-  ('#', '%23'),
-  ('(', '%28'),
-  (')', '%29'),
+    ("<", "%3c"),
+    (">", "%3e"),
+    ("#", "%23"),
+    ("(", "%28"),
+    (")", "%29"),
 );

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

@@ -1,9 +1,9 @@
 // 1. Input `line-height` is specified in `rem` so inputs do not break when their font size gets
 //    changed later.
 
-@use 'sass:map';
-@use '../theme/typography';
-@use '../tools/spacing';
+@use "sass:map";
+@use "../theme/typography";
+@use "../tools/spacing";
 
 $help-text-line-height: 1.2rem;
 
@@ -24,28 +24,28 @@ $box-field-bottom-line-height: 2px;
 $inline-field-inner-gap: spacing.of(2);
 
 $themeable-variant-states: (
-  box: (
-    filled: (default, hover, focus, disabled),
-    outline: (default, hover, focus, disabled),
-  ),
-  check: (
-    default: (default, checked, disabled, checked-disabled),
-  ),
-  custom: (
-    default: (default, disabled),
-  ),
-  validation: (
-    invalid: (default, checked, disabled, checked-disabled),
-    valid: (default, checked, disabled, checked-disabled),
-    warning: (default, checked, disabled, checked-disabled),
-  ),
+    box: (
+        filled: (default, hover, focus, disabled),
+        outline: (default, hover, focus, disabled),
+    ),
+    check: (
+        default: (default, checked, disabled, checked-disabled),
+    ),
+    custom: (
+        default: (default, disabled),
+    ),
+    validation: (
+        invalid: (default, checked, disabled, checked-disabled),
+        valid: (default, checked, disabled, checked-disabled),
+        warning: (default, checked, disabled, checked-disabled),
+    ),
 );
 
 $themeable-state-properties: (
-  default: (color, border-color, background, check-background-color, box-shadow, surrounding-text-color),
-  hover: (color, border-color, background, box-shadow),
-  focus: (color, border-color, background, check-background-color, box-shadow),
-  checked: (border-color, check-background-color),
-  disabled: (color, border-color, background, check-background-color, box-shadow, surrounding-text-color),
-  checked-disabled: (border-color, check-background-color),
+    default: (color, border-color, background, check-background-color, box-shadow, surrounding-text-color),
+    hover: (color, border-color, background, box-shadow),
+    focus: (color, border-color, background, check-background-color, box-shadow),
+    checked: (border-color, check-background-color),
+    disabled: (color, border-color, background, check-background-color, box-shadow, surrounding-text-color),
+    checked-disabled: (border-color, check-background-color),
 );

package/src/lib/styles/settings/_utilities.scss

@@ -1,103 +1,115 @@
-@use 'sass:map';
-@use '../theme/colors';
-@use '../theme/spacing';
-@use '../theme/typography';
+@use "sass:map";
+@use "../theme/colors";
+@use "../theme/spacing";
+@use "../theme/typography";
 
 $map: (
-  'display': (
-    responsive: true,
-    property: display,
-    class: d,
-    values: (block, flex, inline, inline-block, inline-flex, none),
-  ),
-  'align-items': (
-    responsive: true,
-    property: align-items,
-    class: align-items,
-    values: (baseline, center, flex-start, flex-end),
-  ),
-  'justify-content': (
-    responsive: true,
-    property: justify-content,
-    class: justify-content,
-    values: (start, flex-start, end, flex-end, center, space-between),
-  ),
-  'margin-top': (
-    responsive: true,
-    property: margin-top,
-    class: mt,
-    values: map.merge(spacing.$values, (auto: auto)),
-  ),
-  'margin-right': (
-    responsive: true,
-    property: margin-right,
-    class: mr,
-    values: map.merge(spacing.$values, (auto: auto)),
-  ),
-  'margin-bottom': (
-    responsive: true,
-    property: margin-bottom,
-    class: mb,
-    values: map.merge(spacing.$values, (auto: auto)),
-  ),
-  'margin-left': (
-    responsive: true,
-    property: margin-left,
-    class: ml,
-    values: map.merge(spacing.$values, (auto: auto)),
-  ),
-  'padding-top': (
-    responsive: true,
-    property: padding-top,
-    class: pt,
-    values: spacing.$values,
-  ),
-  'padding-right': (
-    responsive: true,
-    property: padding-right,
-    class: pr,
-    values: spacing.$values,
-  ),
-  'padding-bottom': (
-    responsive: true,
-    property: padding-bottom,
-    class: pb,
-    values: spacing.$values,
-  ),
-  'padding-left': (
-    responsive: true,
-    property: padding-left,
-    class: pl,
-    values: spacing.$values,
-  ),
-  'font-size': (
-    responsive: false,
-    property: font-size,
-    class: typography-size,
-    values: typography.$size-values,
-  ),
-  'text-align': (
-    responsive: true,
-    property: text-align,
-    class: text,
-    values: left right center justify,
-  ),
-  'text-color': (
-    responsive: false,
-    property: color,
-    class: text,
-    values: (
-      primary: map.get(colors.$brand, primary),
-      secondary: map.get(colors.$brand, secondary),
-      success: map.get(colors.$ui, success),
-      warning: map.get(colors.$ui, warning),
-      danger: map.get(colors.$ui, danger),
-      help: map.get(colors.$ui, help),
-      info: map.get(colors.$ui, info),
-      note: map.get(colors.$ui, note),
-      light: colors.$light,
-      dark: colors.$dark,
-      muted: colors.$muted,
-    ),
-  ),
+    "display": (
+        responsive: true,
+        property: display,
+        class: d,
+        values: (block, flex, inline, inline-block, inline-flex, none),
+    ),
+    "align-items": (
+        responsive: true,
+        property: align-items,
+        class: align-items,
+        values: (center, start, flex-start, end, flex-end, baseline, stretch),
+    ),
+    "align-self": (
+        responsive: true,
+        property: align-self,
+        class: align-self,
+        values: (center, start, flex-start, end, flex-end, baseline, stretch),
+    ),
+    "justify-content": (
+        responsive: true,
+        property: justify-content,
+        class: justify-content,
+        values: (center, start, flex-start, end, flex-end, space-between),
+    ),
+    "justify-self": (
+        responsive: true,
+        property: justify-self,
+        class: justify-self,
+        values: (center, start, end, baseline, stretch),
+    ),
+    "margin-top": (
+        responsive: true,
+        property: margin-top,
+        class: mt,
+        values: map.merge(spacing.$values, (auto: auto)),
+    ),
+    "margin-right": (
+        responsive: true,
+        property: margin-right,
+        class: mr,
+        values: map.merge(spacing.$values, (auto: auto)),
+    ),
+    "margin-bottom": (
+        responsive: true,
+        property: margin-bottom,
+        class: mb,
+        values: map.merge(spacing.$values, (auto: auto)),
+    ),
+    "margin-left": (
+        responsive: true,
+        property: margin-left,
+        class: ml,
+        values: map.merge(spacing.$values, (auto: auto)),
+    ),
+    "padding-top": (
+        responsive: true,
+        property: padding-top,
+        class: pt,
+        values: spacing.$values,
+    ),
+    "padding-right": (
+        responsive: true,
+        property: padding-right,
+        class: pr,
+        values: spacing.$values,
+    ),
+    "padding-bottom": (
+        responsive: true,
+        property: padding-bottom,
+        class: pb,
+        values: spacing.$values,
+    ),
+    "padding-left": (
+        responsive: true,
+        property: padding-left,
+        class: pl,
+        values: spacing.$values,
+    ),
+    "font-size": (
+        responsive: false,
+        property: font-size,
+        class: typography-size,
+        values: typography.$size-values,
+    ),
+    "text-align": (
+        responsive: true,
+        property: text-align,
+        class: text,
+        values: left right center justify,
+    ),
+    "text-color": (
+        responsive: false,
+        property: color,
+        class: text,
+        values: (
+            primary: map.get(colors.$brand, primary),
+            secondary: map.get(colors.$brand, secondary),
+            success: map.get(colors.$ui, success),
+            warning: map.get(colors.$ui, warning),
+            danger: map.get(colors.$ui, danger),
+            help: map.get(colors.$ui, help),
+            info: map.get(colors.$ui, info),
+            note: map.get(colors.$ui, note),
+            light: colors.$light,
+            dark: colors.$dark,
+            muted: colors.$muted,
+        ),
+    ),
 );

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
+    );