@react-ui-org/react-ui 0.56.0 → 0.58.0

package/src/styles/tools/_collections.scss

@@ -0,0 +1,265 @@
+@use "sass:list";
+@use "sass:map";
+@use "../settings/collections";
+@use "string" as rui-string;
+
+// Function to get the parent collection category by value.
+//
+// 1. Returns **only the first** matching collection category.
+//
+// @param {String} $value - The value to get the category for.
+// @param {Map} $collections - The collections map to search in.
+
+@function _get-category-by-value($value, $collections) {
+    @each $category, $values in $collections {
+        @if list.index($values, $value) {
+            @return $category; // 1.
+        }
+    }
+
+    @error
+        "Supplied value \""
+        + $value
+        + "\" not found in any category ("
+        + map.keys($collections)
+        + ")";
+}
+
+// Function to get the matching link color for a component variant.
+//
+// @param {String} $value - The value to get the link color for.
+
+@function _get-link-color-by-value($value) {
+    @if $value == "light" {
+        @return "dark";
+    }
+
+    @if $value == "dark" {
+        @return "light";
+    }
+
+    @return $value;
+}
+
+// Mixin to generate CSS custom properties for a component theme.
+//
+// 1. Generates a CSS custom property for each property in the `$properties` list.
+// 2. Theming of the disabled state is optional, so the `default` theme options are used (via CSS custom property
+//    fallback) if no `disabled` styling for the specific variant is provided by user.
+//
+// @param {String} $prefix - The prefix for the CSS custom properties.
+// @param {String} $component-name - The name of the component.
+// @param {String} $modifier-value - The value of the modifier.
+// @param {String} $variant-value - The value of the variant.
+// @param {String} $interaction-state - The interaction state.
+// @param {List} $properties - The list of properties to generate CSS custom properties for.
+//
+// Example:
+//
+// @include generate-component-properties(
+//     $prefix: "rui-",
+//     $component-name: "Card",
+//     $variant-name: "color",
+//     $variant-value: "success",
+//     $properties: color, border-color, background-color,
+// );
+//
+// … will output:
+//
+// --rui-local-color: var(--rui-Card--success__color);
+// --rui-local-border-color: var(--rui-Card--success__border-color);
+// --rui-local-background-color: var(--rui-Card--success__background-color);
+
+@mixin generate-component-properties(
+    $prefix,
+    $component-name,
+    $modifier-value: null,
+    $variant-value,
+    $interaction-state: null,
+    $properties,
+) {
+    @each $property in $properties {
+        $modifier: if($modifier-value, "--" + $modifier-value, "");
+        $state: if($interaction-state, "--" + $interaction-state, "");
+
+        // 1.
+        --#{$prefix}local-#{$property}:
+            var(
+                #{
+                    "--"
+                    + $prefix
+                    + $component-name
+                    + $modifier
+                    + "--"
+                    + $variant-value
+                    + $state
+                    + "__"
+                    + $property
+                }
+                #{if(
+                    $interaction-state and $interaction-state == "disabled",
+                    ", var(--"
+                    + $prefix
+                    + $component-name
+                    + $modifier
+                    + "--"
+                    + $variant-value
+                    + "--default__"
+                    + $property
+                    + ")",
+                    ""
+                )}
+            ); // 2.
+    }
+}
+
+// Mixin to generate CSS custom properties for links theme.
+//
+// @param {String} $prefix - The prefix for the CSS custom properties.
+// @param {String} $variant-value - The value of the variant.
+//
+// Example:
+//
+// @include generate-link-properties(
+//     $prefix: "rui-",
+//     $variant-value: "success",
+// );
+//
+// … will output:
+//
+// --rui-local-link-color: var(--rui-color-feedback-success);
+// --rui-local-link-color-hover: var(--rui-color-feedback-success-hover);
+// --rui-local-link-color-active: var(--rui-color-feedback-success-active);
+
+@mixin generate-link-properties($prefix, $variant-value) {
+    $color-category: _get-category-by-value($value: $variant-value, $collections: collections.$colors);
+    $resolved-variant-value: _get-link-color-by-value($variant-value);
+
+    --#{$prefix}local-link-color: var(--rui-color-#{$color-category}-#{$resolved-variant-value});
+    --#{$prefix}local-link-color-hover: var(--rui-color-#{$color-category}-#{$resolved-variant-value}-hover);
+    --#{$prefix}local-link-color-active: var(--rui-color-#{$color-category}-#{$resolved-variant-value}-active);
+}
+
+// Mixin to generate CSS classes for a component variant.
+//
+// @param {String} $prefix - The prefix for the CSS custom properties.
+// @param {String} $component-name - The name of the component.
+// @param {String} $modifier-name - Optional name of the class name modifier.
+// @param {String} $modifier-name - Optional value of the class name modifier.
+// @param {String} $variant-name - The name of the variant.
+// @param {String} $variant-value - The value of the variant.
+// @param {Boolean} $generate-interaction-states - Whether to generate interaction states (disabled, hover, active).
+// @param {Boolean} $inherit-link-color - Whether to inherit link color from the component variant.
+// @param {List} $properties - The list of properties to generate CSS custom properties for.
+//
+// Examples:
+//
+// @include collections.generate-class(
+//     $prefix: "rui-",
+//     $component-name: "Card",
+//     $variant-name: "color",
+//     $variant-value: "success",
+//     $properties: color, border-color, background-color,
+// );
+//
+// … will output:
+//
+// .isRootColorSuccess {
+//     --rui-local-color: var(--rui-Card--success__color);
+//     --rui-local-border-color: var(--rui-Card--success__border-color);
+//     --rui-local-background-color: var(--rui-Card--success__background-color);
+// }
+//
+// @include collections.generate-class(
+//     $prefix: "rui-",
+//     $component-name: "Button",
+//     $modifier-name: "priority",
+//     $modifier-value: "flat",
+//     $variant-name: "color",
+//     $variant-value: "success",
+//     $generate-interaction-states: true,
+//     $properties: color, background,
+// );
+//
+// … will output:
+//
+// .isRootPriorityFlat.isRootColorSuccess {
+//     --rui-local-color: var(--rui-Button--flat--success--default__color);
+//     --rui-local-background: var(--rui-Button--flat--success--default__background);
+// }
+// .isRootPriorityFlat.isRootColorSuccess:disabled {
+//     --rui-local-color:
+//         var(
+//             --rui-Button--flat--success--disabled__color,
+//             var(--rui-Button--flat--success--default__color)
+//         );
+//     --rui-local-background:
+//         var(
+//             --rui-Button--flat--success--disabled__background,
+//             var(--rui-Button--flat--success--default__background)
+//         );
+// }
+// .isRootPriorityFlat.isRootColorSuccess:not(:disabled):hover {
+//     --rui-local-color: var(--rui-Button--flat--success--hover__color);
+//     --rui-local-background: var(--rui-Button--flat--success--hover__background);
+// }
+// .isRootPriorityFlat.isRootColorSuccess:not(:disabled):active {
+//     --rui-local-color: var(--rui-Button--flat--success--active__color);
+//     --rui-local-background: var(--rui-Button--flat--success--active__background);
+// }
+
+@mixin generate-class(
+    $prefix,
+    $component-name,
+    $modifier-name: null,
+    $modifier-value: null,
+    $variant-name,
+    $variant-value,
+    $generate-interaction-states: false,
+    $inherit-link-color: false,
+    $properties,
+) {
+    $modifier-class-name:
+        if(
+            $modifier-name and $modifier-value,
+            ".isRoot#{rui-string.capitalize($modifier-name)}#{rui-string.capitalize($modifier-value)}",
+            ""
+        );
+    $variant-class-name: ".isRoot#{rui-string.capitalize($variant-name)}#{rui-string.capitalize($variant-value)}";
+
+    #{$modifier-class-name}#{$variant-class-name} {
+        @if $generate-interaction-states {
+            $interaction-state-selector-map: (
+                default: "&",
+                disabled: "&:disabled",
+                hover: "&:not(:disabled):hover",
+                active: "&:not(:disabled):active",
+            );
+
+            @each $interaction-state, $interaction-state-selector in $interaction-state-selector-map {
+                #{$interaction-state-selector} {
+                    @include generate-component-properties(
+                        $prefix: $prefix,
+                        $component-name: $component-name,
+                        $modifier-value: $modifier-value,
+                        $variant-value: $variant-value,
+                        $interaction-state: $interaction-state,
+                        $properties: $properties,
+                    );
+                }
+            }
+        } @else {
+            @include generate-component-properties(
+                $prefix: $prefix,
+                $component-name: $component-name,
+                $modifier-value: $modifier-value,
+                $variant-value: $variant-value,
+                $properties: $properties,
+            );
+        }
+
+        @if $inherit-link-color {
+            @include generate-link-properties($prefix: $prefix, $variant-value: $variant-value);
+        }
+    }
+}

package/src/styles/tools/_string.scss

@@ -1,7 +1,10 @@
-// Author: Hugo Giraudel
-
 @use "sass:string";
 
+@function capitalize($string) {
+    @return string.to-upper-case(string.slice($string, 1, 1)) + string.slice($string, 2);
+}
+
+// Author: Hugo Giraudel
 @function replace($string, $search, $replace: "") {
     $index: string.index($string, $search);
 

package/src/styles/tools/form-fields/_box-field-layout.scss

@@ -55,6 +55,9 @@
 //
 // 13. Label and field are vertically aligned to top (start) by default (see 10.). Vertical
 //     alignment of each block can be changed by theme configuration.
+//
+// 14. Intentionally use longhand properties because the custom property fallback mechanism evaluates `initial` values
+//     as empty. That makes the other value of the shorthand property unexpectedly used for both axes.
 
 @use "../../settings/forms";
 @use "../../settings/form-fields" as settings;
@@ -125,7 +128,10 @@
 
         .field {
             grid-area: field;
-            place-self: theme.$horizontal-field-vertical-alignment start; // 13. / 7.
+            // stylelint-disable declaration-block-no-redundant-longhand-properties -- 14.
+            align-self: theme.$horizontal-field-vertical-alignment; // 13.
+            justify-self: start; // 7.
+            // stylelint-enable declaration-block-no-redundant-longhand-properties
         }
     }
 }

package/src/styles/tools/form-fields/_foundation.scss

@@ -18,12 +18,14 @@
     color: var(--rui-local-surrounding-text-color, #{theme.$label-color});
 }
 
-@mixin label-required() {
+@mixin label-required($show-require-sign: true) {
     color: var(--rui-local-surrounding-text-color, #{theme.$required-label-color});
 
-    &::after {
-        content: theme.$required-sign;
-        color: theme.$required-sign-color;
+    @if $show-require-sign {
+        &::after {
+            content: theme.$required-sign;
+            color: theme.$required-sign-color;
+        }
     }
 }
 

package/src/styles/tools/form-fields/_variants.scss

@@ -70,7 +70,7 @@
             + "Choose one of #{map.keys(settings.$themeable-variant-states)}.";
     }
 
-    $themeable-states: map.get(map.get(settings.$themeable-variant-states, $type), $variant);
+    $themeable-states: map.get(settings.$themeable-variant-states, $type, $variant);
 
     @if list.index($themeable-states, "hover") {
         @include _generate-custom-properties($type, $variant, "default");
@@ -143,5 +143,9 @@
 }
 
 @mixin validation($variant) {
+    --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
+    --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
+    --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
+
     @include _get-theme(validation, $variant);
 }

package/src/theme.scss

@@ -109,7 +109,8 @@
         --rui-line-height-small: 1.25;
 
         // Text decorations
-        --rui-text-decoration-link: none;
+        --rui-underline-offset-link: 0.1875em;
+        --rui-text-decoration-link: underline;
         --rui-text-decoration-link-hover: underline;
         --rui-text-decoration-link-active: underline;
 
@@ -306,6 +307,70 @@
         --rui-Alert--dark__foreground-color: var(--rui-color-neutral-on-dark);
         --rui-Alert--dark__background-color: var(--rui-color-background-dark);
 
+        //
+        // Badge
+        // =====
+
+        // Badge: filled priority
+
+        // Badge: filled priority: success variant
+        --rui-Badge--filled--success__color: var(--rui-color-feedback-on-success);
+        --rui-Badge--filled--success__background-color: var(--rui-color-feedback-success);
+
+        // Badge: filled priority: warning variant
+        --rui-Badge--filled--warning__color: var(--rui-color-feedback-on-warning);
+        --rui-Badge--filled--warning__background-color: var(--rui-color-feedback-warning);
+
+        // Badge: filled priority: danger variant
+        --rui-Badge--filled--danger__color: var(--rui-color-feedback-on-danger);
+        --rui-Badge--filled--danger__background-color: var(--rui-color-feedback-danger);
+
+        // Badge: filled priority: help variant
+        --rui-Badge--filled--help__color: var(--rui-color-feedback-on-help);
+        --rui-Badge--filled--help__background-color: var(--rui-color-feedback-help);
+
+        // Badge: filled priority: info variant
+        --rui-Badge--filled--info__color: var(--rui-color-feedback-on-info);
+        --rui-Badge--filled--info__background-color: var(--rui-color-feedback-info);
+
+        // Badge: filled priority: note variant
+        --rui-Badge--filled--note__color: var(--rui-color-feedback-on-note);
+        --rui-Badge--filled--note__background-color: var(--rui-color-feedback-note);
+
+        // Badge: filled priority: light variant
+        --rui-Badge--filled--light__color: var(--rui-color-neutral-on-light);
+        --rui-Badge--filled--light__background-color: var(--rui-color-neutral-light);
+
+        // Badge: filled priority: dark variant
+        --rui-Badge--filled--dark__color: var(--rui-color-neutral-on-dark);
+        --rui-Badge--filled--dark__background-color: var(--rui-color-neutral-dark);
+
+        // Badge: outline priority
+
+        // Badge: outline priority: success variant
+        --rui-Badge--outline--success__color: var(--rui-color-feedback-success);
+
+        // Badge: outline priority: warning variant
+        --rui-Badge--outline--warning__color: var(--rui-color-feedback-warning);
+
+        // Badge: outline priority: danger variant
+        --rui-Badge--outline--danger__color: var(--rui-color-feedback-danger);
+
+        // Badge: outline priority: help variant
+        --rui-Badge--outline--help__color: var(--rui-color-feedback-help);
+
+        // Badge: outline priority: info variant
+        --rui-Badge--outline--info__color: var(--rui-color-feedback-info);
+
+        // Badge: outline priority: note variant
+        --rui-Badge--outline--note__color: var(--rui-color-feedback-note);
+
+        // Badge: outline priority: light variant
+        --rui-Badge--outline--light__color: var(--rui-color-neutral-light);
+
+        // Badge: outline priority: dark variant
+        --rui-Badge--outline--dark__color: var(--rui-color-neutral-dark);
+
         //
         // Button
         // ======

package/src/components/Alert/_tools.scss

@@ -1,10 +0,0 @@
-@use "sass:map";
-@use "theme";
-
-@mixin color($color) {
-    $color-variant-properties: map.get(theme.$colors, $color);
-
-    --rui-local-color: #{map.get($color-variant-properties, color)};
-    --rui-local-foreground-color: #{map.get($color-variant-properties, foreground-color)};
-    --rui-local-background-color: #{map.get($color-variant-properties, background-color)};
-}

package/src/components/Button/_base.scss

@@ -1,156 +0,0 @@
-// 1. ButtonGroup gap is implemented using the `margin` property so the buttons can overlap and reduce duplicate
-//    borders.
-
-@use "sass:map";
-@use "../../styles/tools/breakpoint";
-@use "settings";
-@use "theme";
-@use "tools";
-
-@layer components.button {
-    .root {
-        @include tools.button();
-    }
-
-    .label {
-        display: block;
-    }
-
-    .beforeLabel,
-    .afterLabel,
-    .startCorner,
-    .endCorner,
-    .feedbackIcon {
-        display: flex;
-        align-items: baseline;
-        justify-content: center;
-    }
-
-    .startCorner,
-    .endCorner {
-        position: absolute;
-        top: -0.35rem;
-        z-index: 2;
-    }
-
-    .startCorner {
-        left: 0;
-        margin-left: -0.35rem;
-    }
-
-    .endCorner {
-        right: 0;
-        margin-right: -0.35rem;
-    }
-
-    .feedbackIcon {
-        position: absolute;
-        inset: 0;
-        z-index: 1;
-        align-items: center;
-    }
-
-    .isRootSizeSmall {
-        @include tools.button-size(small);
-    }
-
-    .isRootSizeMedium {
-        @include tools.button-size(medium);
-    }
-
-    .isRootSizeLarge {
-        @include tools.button-size(large);
-    }
-
-    .isRootBlock {
-        width: 100%;
-    }
-
-    .hasRootFeedback:disabled {
-        opacity: theme.$feedback-opacity;
-        cursor: theme.$feedback-cursor;
-    }
-
-    .hasRootFeedback .label,
-    .hasRootFeedback .beforeLabel,
-    .hasRootFeedback .afterLabel {
-        color: transparent;
-    }
-
-    .isRootInButtonGroup,
-    .isRootInInputGroup {
-        z-index: map.get(settings.$group-z-indexes, button);
-
-        &:not(:first-child) {
-            border-start-start-radius: var(--rui-local-inner-border-radius);
-            border-end-start-radius: var(--rui-local-inner-border-radius);
-        }
-
-        &:not(:last-child) {
-            border-start-end-radius: var(--rui-local-inner-border-radius);
-            border-end-end-radius: var(--rui-local-inner-border-radius);
-        }
-    }
-
-    .isRootInButtonGroup:not(:first-child) {
-        margin-inline-start: var(--rui-local-gap); // 1.
-    }
-
-    .isRootInButtonGroup:focus,
-    .isRootInButtonGroup:not(:disabled):hover {
-        z-index: map.get(settings.$group-z-indexes, button-hover);
-    }
-
-    .isRootInButtonGroup .startCorner,
-    .isRootInInputGroup .startCorner,
-    .isRootInButtonGroup .endCorner,
-    .isRootInInputGroup .endCorner {
-        z-index: map.get(settings.$group-z-indexes, button-overflowing-elements);
-    }
-
-    .hasLabelHidden,
-    .hasLabelVisibleSm,
-    .hasLabelVisibleMd,
-    .hasLabelVisibleLg,
-    .hasLabelVisibleXl,
-    .hasLabelVisibleX2l,
-    .hasLabelVisibleX3l {
-        @include tools.hide-label();
-    }
-
-    .hasLabelVisibleSm {
-        @include breakpoint.up(sm) {
-            @include tools.show-label();
-        }
-    }
-
-    .hasLabelVisibleMd {
-        @include breakpoint.up(md) {
-            @include tools.show-label();
-        }
-    }
-
-    .hasLabelVisibleLg {
-        @include breakpoint.up(lg) {
-            @include tools.show-label();
-        }
-    }
-
-    .hasLabelVisibleXl {
-        @include breakpoint.up(xl) {
-            @include tools.show-label();
-        }
-    }
-
-    .hasLabelVisibleX2l {
-        @include breakpoint.up(x2l) {
-            @include tools.show-label();
-        }
-    }
-
-    .hasLabelVisibleX3l {
-        @include breakpoint.up(x3l) {
-            @include tools.show-label();
-        }
-    }
-}