@react-ui-org/react-ui 0.54.0 → 0.55.0

package/src/components/Alert/Alert.scss

@@ -1,98 +0,0 @@
-@use "sass:map";
-@use "../../styles/theme/typography";
-@use "../../styles/tools/accessibility";
-@use "../../styles/tools/reset";
-@use "settings";
-@use "theme";
-@use "tools";
-
-.root {
-    position: relative;
-    display: flex;
-    align-items: flex-start;
-    width: 100%;
-    color: var(--rui-local-color);
-    border-width: theme.$border-width theme.$border-width theme.$border-width theme.$stripe-width;
-    border-style: solid;
-    border-color: var(--rui-local-foreground-color);
-    border-radius: theme.$border-radius;
-    background-color: var(--rui-local-background-color);
-}
-
-.icon,
-.message {
-    padding: theme.$padding;
-}
-
-.close,
-.icon {
-    height: settings.$min-height;
-    color: var(--rui-local-foreground-color);
-}
-
-.icon {
-    display: flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
-    padding-right: 0;
-}
-
-.message {
-    flex-grow: 1;
-    font-weight: theme.$font-weight;
-    font-size: settings.$font-size;
-    line-height: settings.$line-height;
-}
-
-.message a,
-.message strong {
-    font-weight: theme.$emphasis-font-weight;
-    color: var(--rui-local-foreground-color);
-}
-
-.close {
-    @include reset.button();
-    @include accessibility.min-tap-target();
-
-    padding: theme.$padding;
-    font-size: map.get(typography.$font-size-values, 4);
-    line-height: 1;
-}
-
-.closeSign {
-    position: relative;
-    top: -0.1em;
-}
-
-.isRootColorSuccess {
-    @include tools.color(success);
-}
-
-.isRootColorWarning {
-    @include tools.color(warning);
-}
-
-.isRootColorDanger {
-    @include tools.color(danger);
-}
-
-.isRootColorHelp {
-    @include tools.color(help);
-}
-
-.isRootColorInfo {
-    @include tools.color(info);
-}
-
-.isRootColorNote {
-    @include tools.color(note);
-}
-
-.isRootColorLight {
-    @include tools.color(light);
-}
-
-.isRootColorDark {
-    @include tools.color(dark);
-}

package/src/components/Badge/Badge.scss

@@ -1,107 +0,0 @@
-@use "sass:map";
-@use "sass:math";
-@use "../../styles/theme/borders";
-@use "../../styles/theme/typography";
-
-$_badge-size: 1.25rem;
-
-.root {
-    display: inline-block;
-    min-width: $_badge-size;
-    height: $_badge-size;
-    padding: 0.25rem 0.35rem;
-    overflow: hidden;
-    font-weight: map.get(typography.$font-weight-values, bold);
-    font-size: typography.$font-size-smaller;
-    line-height: 1;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: baseline;
-    color: var(--rui-local-color);
-    border-radius: math.div($_badge-size, 2);
-    background-color: var(--rui-local-background-color);
-    box-shadow: var(--rui-local-box-shadow, #{0 0 0 2px rgb(255 255 255 / 80%)});
-}
-
-.isRootColorSuccess {
-    --rui-local-color: var(--rui-color-feedback-on-success);
-    --rui-local-background-color: var(--rui-color-feedback-success);
-}
-
-.isRootColorWarning {
-    --rui-local-color: var(--rui-color-feedback-on-warning);
-    --rui-local-background-color: var(--rui-color-feedback-warning);
-}
-
-.isRootColorDanger {
-    --rui-local-color: var(--rui-color-feedback-on-danger);
-    --rui-local-background-color: var(--rui-color-feedback-danger);
-}
-
-.isRootColorHelp {
-    --rui-local-color: var(--rui-color-feedback-on-help);
-    --rui-local-background-color: var(--rui-color-feedback-help);
-}
-
-.isRootColorInfo {
-    --rui-local-color: var(--rui-color-feedback-on-info);
-    --rui-local-background-color: var(--rui-color-feedback-info);
-}
-
-.isRootColorNote {
-    --rui-local-color: var(--rui-color-feedback-on-note);
-    --rui-local-background-color: var(--rui-color-feedback-note);
-}
-
-.isRootColorLight {
-    --rui-local-color: var(--rui-color-neutral-on-light);
-    --rui-local-background-color: var(--rui-color-neutral-light);
-    --rui-local-box-shadow: none;
-}
-
-.isRootColorDark {
-    --rui-local-color: var(--rui-color-neutral-on-dark);
-    --rui-local-background-color: var(--rui-color-neutral-dark);
-    --rui-local-box-shadow: none;
-}
-
-.isRootPriorityOutline {
-    --rui-local-background-color: transparent;
-    --rui-local-box-shadow: none;
-
-    padding-top: 0.1875rem;
-    padding-bottom: 0.1875rem;
-    border: borders.$width solid currentcolor;
-}
-
-.isRootPriorityOutline.isRootColorSuccess {
-    --rui-local-color: var(--rui-color-feedback-success);
-}
-
-.isRootPriorityOutline.isRootColorWarning {
-    --rui-local-color: var(--rui-color-feedback-warning);
-}
-
-.isRootPriorityOutline.isRootColorDanger {
-    --rui-local-color: var(--rui-color-feedback-danger);
-}
-
-.isRootPriorityOutline.isRootColorHelp {
-    --rui-local-color: var(--rui-color-feedback-help);
-}
-
-.isRootPriorityOutline.isRootColorInfo {
-    --rui-local-color: var(--rui-color-feedback-info);
-}
-
-.isRootPriorityOutline.isRootColorNote {
-    --rui-local-color: var(--rui-color-feedback-note);
-}
-
-.isRootPriorityOutline.isRootColorLight {
-    --rui-local-color: var(--rui-color-neutral-light);
-}
-
-.isRootPriorityOutline.isRootColorDark {
-    --rui-local-color: var(--rui-color-neutral-dark);
-}

package/src/components/ButtonGroup/ButtonGroup.scss

@@ -1,33 +0,0 @@
-// 1. ButtonGroup gap is implemented using the `margin` property on buttons so the buttons can overlap and reduce
-//    duplicate borders.
-
-@use "theme";
-
-.root {
-    --rui-local-inner-border-radius: #{theme.$inner-border-radius};
-
-    display: inline-flex; // 1.
-}
-
-.isRootPriorityFilled {
-    --rui-local-gap: #{theme.$filled-gap};
-    --rui-local-separator-width: #{theme.$filled-separator-width};
-    --rui-local-separator-color: #{theme.$filled-separator-color};
-}
-
-.isRootPriorityOutline {
-    --rui-local-gap: #{theme.$outline-gap};
-    --rui-local-separator-width: #{theme.$outline-separator-width};
-    --rui-local-separator-color: #{theme.$outline-separator-color};
-}
-
-.isRootPriorityFlat {
-    --rui-local-gap: #{theme.$flat-gap};
-    --rui-local-separator-width: #{theme.$flat-separator-width};
-    --rui-local-separator-color: #{theme.$flat-separator-color};
-}
-
-.isRootBlock {
-    display: flex;
-    width: 100%;
-}

package/src/components/Card/Card.scss

@@ -1,70 +0,0 @@
-// 1. Retain equal card widths in flex and grid layouts independently on their content.
-
-@use "theme";
-@use "tools";
-
-.root {
-    --rui-local-padding: #{theme.$padding};
-
-    display: flex;
-    flex-direction: column;
-    min-width: 0; // 1.
-    color: var(--rui-local-color);
-    border: theme.$border-width solid var(--rui-local-border-color);
-    border-radius: theme.$border-radius;
-    background-color: var(--rui-local-background-color);
-}
-
-.body {
-    flex: 1 0 auto;
-    padding: var(--rui-local-padding);
-}
-
-.footer {
-    padding: var(--rui-local-padding);
-}
-
-.isRootDense {
-    --rui-local-padding: #{theme.$dense-padding};
-}
-
-.isRootRaised {
-    box-shadow: theme.$raised-box-shadow;
-}
-
-.isRootColorSuccess {
-    @include tools.color(success);
-}
-
-.isRootColorWarning {
-    @include tools.color(warning);
-}
-
-.isRootColorDanger {
-    @include tools.color(danger);
-}
-
-.isRootColorHelp {
-    @include tools.color(help);
-}
-
-.isRootColorInfo {
-    @include tools.color(info);
-}
-
-.isRootColorNote {
-    @include tools.color(note);
-}
-
-.isRootColorLight {
-    @include tools.color(light);
-}
-
-.isRootColorDark {
-    @include tools.color(dark);
-}
-
-.isRootDisabled {
-    background-color: theme.$disabled-background-color;
-    opacity: theme.$disabled-opacity;
-}

package/src/components/CheckboxField/CheckboxField.scss

@@ -1,61 +0,0 @@
-@use "../../styles/tools/form-fields/foundation";
-@use "../../styles/tools/form-fields/inline-field-elements";
-@use "../../styles/tools/form-fields/inline-field-layout";
-@use "../../styles/tools/form-fields/variants";
-@use "../../styles/tools/accessibility";
-
-// Foundation
-.root {
-    @include foundation.root();
-    @include inline-field-layout.root();
-    @include inline-field-elements.min-tap-target($type: checkbox);
-    @include variants.visual(check);
-}
-
-.label {
-    @include foundation.label();
-}
-
-.field {
-    @include inline-field-layout.field($type: checkbox);
-}
-
-.input {
-    @include inline-field-elements.check-input($type: checkbox);
-}
-
-.helpText,
-.validationText {
-    @include foundation.help-text();
-}
-
-.isRootRequired .label {
-    @include foundation.label-required();
-}
-
-// States
-.isRootStateInvalid {
-    @include variants.validation(invalid);
-}
-
-.isRootStateValid {
-    @include variants.validation(valid);
-}
-
-.isRootStateWarning {
-    @include variants.validation(warning);
-}
-
-// Invisible label
-.isLabelHidden {
-    @include accessibility.hide-text();
-}
-
-// Layouts
-.hasRootLabelBefore {
-    @include inline-field-layout.has-label-before();
-}
-
-.isRootInFormLayout {
-    @include inline-field-layout.in-form-layout();
-}

package/src/components/FileInputField/FileInputField.scss

@@ -1,63 +0,0 @@
-@use "../../styles/tools/form-fields/box-field-elements";
-@use "../../styles/tools/form-fields/box-field-layout";
-@use "../../styles/tools/form-fields/foundation";
-@use "../../styles/tools/form-fields/variants";
-@use "../../styles/tools/accessibility";
-
-// Foundation
-.root {
-    @include foundation.root();
-}
-
-.label {
-    @include foundation.label();
-}
-
-.inputContainer {
-    @include box-field-elements.input-container();
-}
-
-.helpText,
-.validationText {
-    @include foundation.help-text();
-}
-
-.isRootRequired .label {
-    @include foundation.label-required();
-}
-
-// States
-.isRootStateInvalid {
-    @include variants.validation(invalid);
-}
-
-.isRootStateValid {
-    @include variants.validation(valid);
-}
-
-.isRootStateWarning {
-    @include variants.validation(warning);
-}
-
-// Invisible label
-.isLabelHidden {
-    @include accessibility.hide-text();
-}
-
-// Layouts
-.isRootLayoutVertical,
-.isRootLayoutHorizontal {
-    @include box-field-layout.vertical();
-}
-
-.isRootLayoutHorizontal {
-    @include box-field-layout.horizontal();
-}
-
-.isRootFullWidth {
-    @include box-field-layout.full-width();
-}
-
-.isRootInFormLayout {
-    @include box-field-layout.in-form-layout();
-}

package/src/components/FormLayout/FormLayoutCustomField.scss

@@ -1,63 +0,0 @@
-@use "../../styles/tools/form-fields/foundation";
-@use "../../styles/tools/form-fields/box-field-layout";
-@use "../../styles/tools/form-fields/box-field-sizes";
-@use "../../styles/tools/form-fields/variants";
-
-// Foundation
-.root {
-    @include box-field-layout.in-form-layout();
-    @include variants.visual(custom);
-}
-
-.label {
-    @include foundation.label();
-}
-
-.isRootRequired .label {
-    @include foundation.label-required();
-}
-
-// States
-.isRootStateInvalid {
-    @include variants.validation(invalid);
-}
-
-.isRootStateValid {
-    @include variants.validation(valid);
-}
-
-.isRootStateWarning {
-    @include variants.validation(warning);
-}
-
-// Layouts
-.isRootLayoutVertical,
-.isRootLayoutHorizontal {
-    @include box-field-layout.vertical();
-}
-
-.isRootLayoutHorizontal {
-    @include box-field-layout.horizontal();
-}
-
-.isRootLayoutVertical .field,
-.isRootLayoutHorizontal .field {
-    width: auto;
-}
-
-.isRootFullWidth .field {
-    justify-self: stretch;
-}
-
-// Sizes
-.isRootSizeSmall {
-    @include box-field-sizes.size(small);
-}
-
-.isRootSizeMedium {
-    @include box-field-sizes.size(medium);
-}
-
-.isRootSizeLarge {
-    @include box-field-sizes.size(large);
-}

package/src/components/Grid/Grid.scss

@@ -1,63 +0,0 @@
-// 1. Read value of `--rui-local-<PROPERTY>-<BREAKPOINT>` that might have been defined by
-//    JavaScript and assign it to `--rui-local-<PROPERTY>` used in 2.
-//
-//    Fallback cascade containing fallbacks for all previous breakpoints recursively is included
-//    using CSS custom property fallback mechanism like this:
-//
-//    Fallback for `xs` breakpoint: `<INITIAL FALLBACK>`
-//    Fallback for `sm` breakpoint: `var(--rui-local-<PROPERTY>-xs, <INITIAL FALLBACK>)`
-//    Fallback for `md` breakpoint: `var(--rui-local-<PROPERTY>-sm, var(--rui-local-<PROPERTY>-xs, <INIT. FALLBACK>))`
-//
-//    … etc, up to the largest breakpoint.
-//
-//    A media query is then created for each breakpoint (with exception of `xs` which doesn't need a
-//    media query) and a corresponding responsive custom property variant is assigned to
-//    `--rui-local-<PROPERTY>` that is used later in CSS, see 2.
-//
-//    Example for `sm` breakpoint:
-//
-//    `--rui-local-<PROPERTY>: var(--rui-local-<PROPERTY>-sm, var(--rui-local-<PROPERTY>-xs, <INITIAL FALLBACK>))`
-//
-// 2. Apply custom property value that is defined within current breakpoint, see 1.
-
-@use "sass:map";
-@use "../../styles/tools/spacing";
-@use "settings";
-@use "tools";
-
-.root {
-    @include tools.assign-responsive-custom-properties(settings.$grid-responsive-properties); // 1.
-    @include spacing.bottom(layouts);
-
-    display: grid;
-    grid-template-columns: var(--rui-local-columns); // 2.
-    grid-template-rows: var(--rui-local-rows); // 2.
-    grid-auto-flow: var(--rui-local-auto-flow); // 2.
-    grid-gap: var(--rui-local-row-gap) var(--rui-local-column-gap); // 2.
-    align-content: var(--rui-local-align-content); // 2.
-    align-items: var(--rui-local-align-items); // 2.
-    justify-content: var(--rui-local-justify-content); // 2.
-    justify-items: var(--rui-local-justify-items); // 2.
-}
-
-// stylelint-disable-next-line selector-max-universal -- Reset any previously added margins.
-.root > * {
-    margin-block: 0;
-}
-
-.span {
-    @include tools.assign-responsive-custom-properties(settings.$grid-span-responsive-properties); // 1.
-
-    grid-column: span var(--rui-local-column-span); // 2.
-    grid-row: span var(--rui-local-row-span); // 2.
-}
-
-// stylelint-disable selector-no-qualifying-type
-dl.root,
-ol.root,
-ul.root {
-    padding-left: 0;
-    margin-left: 0;
-    list-style: none;
-}
-// stylelint-enable selector-no-qualifying-type

package/src/components/InputGroup/InputGroup.scss

@@ -1,91 +0,0 @@
-// 1. The class name is intentionally singular because it's targeted by other mixins too.
-// 2. Use a block-level display mode to prevent extra white space below grouped inputs in Safari.
-// 3. Prevent individual inputs from overlapping inside narrow containers.
-// 4. Legends are tricky to style, let's use a `div` instead.
-//    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#styling_with_css
-
-@use "../../styles/tools/form-fields/box-field-elements";
-@use "../../styles/tools/form-fields/box-field-layout";
-@use "../../styles/tools/form-fields/box-field-sizes";
-@use "../../styles/tools/form-fields/foundation";
-@use "../../styles/tools/form-fields/variants";
-@use "../../styles/tools/accessibility";
-@use "../../styles/tools/reset";
-@use "theme";
-
-.root {
-    @include foundation.root();
-    @include foundation.fieldset();
-}
-
-// 4.
-.legend {
-    @include accessibility.hide-text();
-}
-
-// 4.
-.label {
-    @include foundation.label();
-}
-
-.inputGroup {
-    --rui-local-inner-border-radius: #{theme.$inner-border-radius};
-
-    display: flex; // 2.
-    gap: theme.$gap;
-}
-
-// 1.
-.validationText {
-    @include reset.list();
-    @include foundation.help-text();
-}
-
-.isRootRequired .label {
-    @include foundation.label-required();
-}
-
-// States
-.isRootStateInvalid {
-    @include variants.validation(invalid);
-}
-
-.isRootStateValid {
-    @include variants.validation(valid);
-}
-
-.isRootStateWarning {
-    @include variants.validation(warning);
-}
-
-// Layouts
-.isRootLayoutVertical,
-.isRootLayoutHorizontal {
-    @include box-field-layout.vertical();
-}
-
-.isRootLayoutVertical .field,
-.isRootLayoutHorizontal .field {
-    max-width: none; // 3.
-}
-
-.isRootLayoutHorizontal {
-    @include box-field-layout.horizontal();
-}
-
-.isRootInFormLayout {
-    @include box-field-layout.in-form-layout($is-fieldset: true);
-}
-
-// Sizes
-.isRootSizeSmall {
-    @include box-field-sizes.size(small, $has-input: false);
-}
-
-.isRootSizeMedium {
-    @include box-field-sizes.size(medium, $has-input: false);
-}
-
-.isRootSizeLarge {
-    @include box-field-sizes.size(large, $has-input: false);
-}