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

package/src/styles/elements/_links.scss

@@ -2,11 +2,16 @@
 
 a {
     text-decoration: links.$decoration;
+    text-underline-offset: links.$underline-offset;
     color: links.$color;
 
-    &:hover,
-    &:focus {
+    &:hover {
         text-decoration: links.$hover-decoration;
         color: links.$hover-color;
     }
+
+    &:active {
+        text-decoration: links.$active-decoration;
+        color: links.$active-color;
+    }
 }

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

@@ -30,6 +30,25 @@ $horizontal-label-vertical-alignment: var(--rui-FormField--horizontal__label__ve
 $horizontal-field-vertical-alignment: var(--rui-FormField--horizontal__field__vertical-alignment);
 $horizontal-full-width-label-width: var(--rui-FormField--horizontal--full-width__label__width);
 
+// Form fields: links in validation states
+$link-validation-colors: (
+    invalid: (
+        default: var(--rui-color-feedback-success),
+        hover: var(--rui-color-feedback-success-hover),
+        active: var(--rui-color-feedback-success-active),
+    ),
+    valid: (
+        default: var(--rui-color-feedback-valid),
+        hover: var(--rui-color-feedback-valid-hover),
+        active: var(--rui-color-feedback-valid-active),
+    ),
+    warning: (
+        default: var(--rui-color-feedback-warning),
+        hover: var(--rui-color-feedback-warning-hover),
+        active: var(--rui-color-feedback-warning-active),
+    ),
+);
+
 // Form fields: disabled state
 $disabled-cursor: var(--rui-FormField--disabled__cursor);
 $disabled-opacity: var(--rui-FormField--disabled__opacity);

package/src/styles/theme/_links.scss

@@ -1,6 +1,7 @@
-$color: var(--rui-color-text-link);
+$color: var(--rui-local-link-color, var(--rui-color-text-link));
 $decoration: var(--rui-text-decoration-link);
-$hover-color: var(--rui-color-text-link-hover);
+$underline-offset: var(--rui-underline-offset-link);
+$hover-color: var(--rui-local-link-color-hover, var(--rui-color-text-link-hover));
 $hover-decoration: var(--rui-text-decoration-link-hover);
-$active-color: var(--rui-color-text-link-active);
+$active-color: var(--rui-local-link-color-active, var(--rui-color-text-link-active));
 $active-decoration: var(--rui-text-decoration-link-active);

package/src/styles/tools/_collections.scss

@@ -1,6 +1,47 @@
+@use "sass:list";
+@use "sass:map";
+@use "../settings/collections";
 @use "string" as rui-string;
 
-// Mixin to generate CSS custom properties for a set of visual properties.
+// 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
@@ -15,7 +56,7 @@
 //
 // Example:
 //
-// @include generate-properties(
+// @include generate-component-properties(
 //     $prefix: "rui-",
 //     $component-name: "Card",
 //     $variant-name: "color",
@@ -29,7 +70,7 @@
 // --rui-local-border-color: var(--rui-Card--success__border-color);
 // --rui-local-background-color: var(--rui-Card--success__background-color);
 
-@mixin generate-properties(
+@mixin generate-component-properties(
     $prefix,
     $component-name,
     $modifier-value: null,
@@ -72,6 +113,33 @@
     }
 }
 
+// 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.
@@ -81,6 +149,7 @@
 // @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:
@@ -147,6 +216,7 @@
     $variant-name,
     $variant-value,
     $generate-interaction-states: false,
+    $inherit-link-color: false,
     $properties,
 ) {
     $modifier-class-name:
@@ -168,7 +238,7 @@
 
             @each $interaction-state, $interaction-state-selector in $interaction-state-selector-map {
                 #{$interaction-state-selector} {
-                    @include generate-properties(
+                    @include generate-component-properties(
                         $prefix: $prefix,
                         $component-name: $component-name,
                         $modifier-value: $modifier-value,
@@ -179,7 +249,7 @@
                 }
             }
         } @else {
-            @include generate-properties(
+            @include generate-component-properties(
                 $prefix: $prefix,
                 $component-name: $component-name,
                 $modifier-value: $modifier-value,
@@ -187,5 +257,9 @@
                 $properties: $properties,
             );
         }
+
+        @if $inherit-link-color {
+            @include generate-link-properties($prefix: $prefix, $variant-value: $variant-value);
+        }
     }
 }

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;
 

package/src/provider/RUIContext.jsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import defaultTranslations from '../translations/en';
-
-const RUIContext = React.createContext({
-  globalProps: {},
-  translations: defaultTranslations,
-});
-
-export default RUIContext;

package/src/provider/RUIProvider.jsx

@@ -1,42 +0,0 @@
-import PropTypes from 'prop-types';
-import React, {
-  useContext,
-  useMemo,
-} from 'react';
-import defaultTranslations from '../translations/en';
-import { mergeDeep } from '../utils/mergeDeep';
-import RUIContext from './RUIContext';
-
-const RUIProvider = ({
-  children,
-  globalProps,
-  translations,
-}) => {
-  const context = useContext(RUIContext);
-  const childProps = useMemo(() => ({
-    globalProps: mergeDeep(context?.globalProps || {}, globalProps),
-    translations: mergeDeep(context?.translations || {}, translations),
-  }), [context, globalProps, translations]);
-
-  return (
-    <RUIContext.Provider
-      value={childProps}
-    >
-      {children}
-    </RUIContext.Provider>
-  );
-};
-
-RUIProvider.defaultProps = {
-  children: null,
-  globalProps: null,
-  translations: defaultTranslations,
-};
-
-RUIProvider.propTypes = {
-  children: PropTypes.node,
-  globalProps: PropTypes.shape({}),
-  translations: PropTypes.shape({}),
-};
-
-export default RUIProvider;

package/src/provider/index.js

@@ -1,3 +0,0 @@
-export { default as RUIProvider } from './RUIProvider';
-export { default as RUIContext } from './RUIContext';
-export { default as withGlobalProps } from './withGlobalProps';