@react-ui-org/react-ui 0.50.2 → 0.51.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-ui-org/react-ui",
   "description": "React UI is a themeable UI library for React apps.",
-  "version": "0.50.2",
+  "version": "0.51.0",
   "keywords": [
     "react",
     "ui",

package/src/lib/components/Alert/Alert.jsx

@@ -72,9 +72,7 @@ Alert.propTypes = {
   /**
    * [Color variant](/foundation/colors#component-colors) to clarify importance and meaning of the alert.
    */
-  color: PropTypes.oneOf(
-    ['primary', 'secondary', 'success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark'],
-  ),
+  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
   /**
    * Optional element to be displayed next to the alert body.
    */

package/src/lib/components/Alert/Alert.scss

@@ -56,7 +56,7 @@
     @include accessibility.min-tap-target();
 
     padding: theme.$padding;
-    font-size: map.get(typography.$size-values, 3);
+    font-size: map.get(typography.$font-size-values, 4);
     line-height: 1;
 }
 
@@ -65,14 +65,6 @@
     top: -0.1em;
 }
 
-.isRootColorPrimary {
-    @include tools.color(primary);
-}
-
-.isRootColorSecondary {
-    @include tools.color(secondary);
-}
-
 .isRootColorSuccess {
     @include tools.color(success);
 }

package/src/lib/components/Alert/README.mdx

@@ -51,26 +51,6 @@ See [API](#api) for all available options.
 All [component colors](/foundation/colors#component-colors) are supported by
 alert to cover all possible needs of your project.
 
-### Primary
-
-Primary alert uses brand primary color.
-
-<Playground>
-  <Alert color="primary">
-    <strong>Primary:</strong> This is a primary alert.
-  </Alert>
-</Playground>
-
-### Secondary
-
-Secondary alert uses brand secondary color.
-
-<Playground>
-  <Alert color="secondary">
-    <strong>Secondary:</strong> This is a secondary alert.
-  </Alert>
-</Playground>
-
 ### Success
 
 Success alerts confirm that an operation has been processed successfully.

package/src/lib/components/Alert/_settings.scss

@@ -2,6 +2,6 @@
 @use "../../styles/theme/typography";
 @use "theme";
 
-$font-size: map.get(typography.$size-values, 0);
+$font-size: map.get(typography.$font-size-values, 1);
 $line-height: typography.$line-height-base;
 $min-height: calc(#{$font-size} * #{$line-height} + 2 * #{theme.$padding});

package/src/lib/components/Alert/_theme.scss

@@ -6,16 +6,6 @@ $emphasis-font-weight: var(--rui-Alert__emphasis__font-weight);
 $stripe-width: var(--rui-Alert__stripe__width);
 
 $colors: (
-    primary: (
-        color: var(--rui-Alert--primary__color),
-        foreground-color: var(--rui-Alert--primary__foreground-color),
-        background-color: var(--rui-Alert--primary__background-color),
-    ),
-    secondary: (
-        color: var(--rui-Alert--secondary__color),
-        foreground-color: var(--rui-Alert--secondary__foreground-color),
-        background-color: var(--rui-Alert--secondary__background-color),
-    ),
     success: (
         color: var(--rui-Alert--success__color),
         foreground-color: var(--rui-Alert--success__foreground-color),

package/src/lib/components/Badge/Badge.jsx

@@ -33,9 +33,7 @@ Badge.propTypes = {
   /**
    * [Color variant](/foundation/colors#component-colors) to clarify importance and meaning of the badge.
    */
-  color: PropTypes.oneOf(
-    ['primary', 'secondary', 'success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark'],
-  ),
+  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
   /**
    * Text to be displayed.
    */

package/src/lib/components/Badge/Badge.scss

@@ -1,7 +1,6 @@
 @use "sass:map";
 @use "sass:math";
 @use "../../styles/theme/borders";
-@use "../../styles/theme/colors";
 @use "../../styles/theme/typography";
 
 $_badge-size: 1.25rem;
@@ -13,7 +12,7 @@ $_badge-size: 1.25rem;
     padding: 0.25rem 0.35rem;
     overflow: hidden;
     font-weight: map.get(typography.$font-weight-values, bold);
-    font-size: typography.$size-smaller;
+    font-size: typography.$font-size-smaller;
     line-height: 1;
     text-align: center;
     white-space: nowrap;
@@ -24,55 +23,45 @@ $_badge-size: 1.25rem;
     box-shadow: var(--rui-local-box-shadow, #{0 0 0 2px rgb(255 255 255 / 80%)});
 }
 
-.isRootColorPrimary {
-    --rui-local-color: #{map.get(colors.$brand, on-primary)};
-    --rui-local-background-color: #{map.get(colors.$brand, primary)};
-}
-
-.isRootColorSecondary {
-    --rui-local-color: #{map.get(colors.$brand, on-secondary)};
-    --rui-local-background-color: #{map.get(colors.$brand, secondary)};
-}
-
 .isRootColorSuccess {
-    --rui-local-color: #{map.get(colors.$ui, on-success)};
-    --rui-local-background-color: #{map.get(colors.$ui, success)};
+    --rui-local-color: var(--rui-color-feedback-on-success);
+    --rui-local-background-color: var(--rui-color-feedback-success);
 }
 
 .isRootColorWarning {
-    --rui-local-color: #{map.get(colors.$ui, on-warning)};
-    --rui-local-background-color: #{map.get(colors.$ui, warning)};
+    --rui-local-color: var(--rui-color-feedback-on-warning);
+    --rui-local-background-color: var(--rui-color-feedback-warning);
 }
 
 .isRootColorDanger {
-    --rui-local-color: #{map.get(colors.$ui, on-danger)};
-    --rui-local-background-color: #{map.get(colors.$ui, danger)};
+    --rui-local-color: var(--rui-color-feedback-on-danger);
+    --rui-local-background-color: var(--rui-color-feedback-danger);
 }
 
 .isRootColorHelp {
-    --rui-local-color: #{map.get(colors.$ui, on-help)};
-    --rui-local-background-color: #{map.get(colors.$ui, help)};
+    --rui-local-color: var(--rui-color-feedback-on-help);
+    --rui-local-background-color: var(--rui-color-feedback-help);
 }
 
 .isRootColorInfo {
-    --rui-local-color: #{map.get(colors.$ui, on-info)};
-    --rui-local-background-color: #{map.get(colors.$ui, info)};
+    --rui-local-color: var(--rui-color-feedback-on-info);
+    --rui-local-background-color: var(--rui-color-feedback-info);
 }
 
 .isRootColorNote {
-    --rui-local-color: #{map.get(colors.$ui, on-note)};
-    --rui-local-background-color: #{map.get(colors.$ui, note)};
+    --rui-local-color: var(--rui-color-feedback-on-note);
+    --rui-local-background-color: var(--rui-color-feedback-note);
 }
 
 .isRootColorLight {
-    --rui-local-color: #{colors.$dark};
-    --rui-local-background-color: #{colors.$light};
+    --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: #{colors.$light};
-    --rui-local-background-color: #{colors.$dark};
+    --rui-local-color: var(--rui-color-neutral-on-dark);
+    --rui-local-background-color: var(--rui-color-neutral-dark);
     --rui-local-box-shadow: none;
 }
 
@@ -85,42 +74,34 @@ $_badge-size: 1.25rem;
     border: borders.$width solid currentColor;
 }
 
-.isRootPriorityOutline.isRootColorPrimary {
-    --rui-local-color: #{map.get(colors.$brand, primary)};
-}
-
-.isRootPriorityOutline.isRootColorSecondary {
-    --rui-local-color: #{map.get(colors.$brand, secondary)};
-}
-
 .isRootPriorityOutline.isRootColorSuccess {
-    --rui-local-color: #{map.get(colors.$ui, success)};
+    --rui-local-color: var(--rui-color-feedback-success);
 }
 
 .isRootPriorityOutline.isRootColorWarning {
-    --rui-local-color: #{map.get(colors.$ui, warning)};
+    --rui-local-color: var(--rui-color-feedback-warning);
 }
 
 .isRootPriorityOutline.isRootColorDanger {
-    --rui-local-color: #{map.get(colors.$ui, danger)};
+    --rui-local-color: var(--rui-color-feedback-danger);
 }
 
 .isRootPriorityOutline.isRootColorHelp {
-    --rui-local-color: #{map.get(colors.$ui, help)};
+    --rui-local-color: var(--rui-color-feedback-help);
 }
 
 .isRootPriorityOutline.isRootColorInfo {
-    --rui-local-color: #{map.get(colors.$ui, info)};
+    --rui-local-color: var(--rui-color-feedback-info);
 }
 
 .isRootPriorityOutline.isRootColorNote {
-    --rui-local-color: #{map.get(colors.$ui, note)};
+    --rui-local-color: var(--rui-color-feedback-note);
 }
 
 .isRootPriorityOutline.isRootColorLight {
-    --rui-local-color: #{colors.$light};
+    --rui-local-color: var(--rui-color-neutral-light);
 }
 
 .isRootPriorityOutline.isRootColorDark {
-    --rui-local-color: #{colors.$dark};
+    --rui-local-color: var(--rui-color-neutral-dark);
 }

package/src/lib/components/Badge/README.mdx

@@ -52,11 +52,9 @@ All priorities come in supported
 High-emphasis priority to draw user's attention.
 
 <Playground>
-  <Badge label="1" color="primary" />
-  <Badge label="2" color="secondary" />
-  <Badge label="3" color="success" />
-  <Badge label="4" color="warning" />
-  <Badge label="5" color="danger" />
+  <Badge label="1" color="success" />
+  <Badge label="2" color="warning" />
+  <Badge label="3" color="danger" />
   <Badge label="10" color="help" />
   <Badge label="34" color="info" />
   <Badge label="99+" />
@@ -67,8 +65,6 @@ High-emphasis priority to draw user's attention.
 </Playground>
 
 <Playground>
-  <Badge label="Primary" color="primary" />
-  <Badge label="Secondary" color="secondary" />
   <Badge label="Success" color="success" />
   <Badge label="Warning" color="warning" />
   <Badge label="Danger" color="danger" />
@@ -86,11 +82,9 @@ High-emphasis priority to draw user's attention.
 Medium-emphasis priority to provide additional context in an unobtrusive way.
 
 <Playground>
-  <Badge priority="outline" label="1" color="primary" />
-  <Badge priority="outline" label="2" color="secondary" />
-  <Badge priority="outline" label="3" color="success" />
-  <Badge priority="outline" label="4" color="warning" />
-  <Badge priority="outline" label="5" color="danger" />
+  <Badge priority="outline" label="1" color="success" />
+  <Badge priority="outline" label="2" color="warning" />
+  <Badge priority="outline" label="3" color="danger" />
   <Badge priority="outline" label="10" color="help" />
   <Badge priority="outline" label="34" color="info" />
   <Badge priority="outline" label="99+" />
@@ -101,8 +95,6 @@ Medium-emphasis priority to provide additional context in an unobtrusive way.
 </Playground>
 
 <Playground>
-  <Badge priority="outline" label="Primary" color="primary" />
-  <Badge priority="outline" label="Secondary" color="secondary" />
   <Badge priority="outline" label="Success" color="success" />
   <Badge priority="outline" label="Warning" color="warning" />
   <Badge priority="outline" label="Danger" color="danger" />

package/src/lib/components/Button/Button.jsx

@@ -127,7 +127,9 @@ Button.propTypes = {
   /**
    * [Color variant](/foundation/colors#component-colors) to clarify importance and meaning of the button.
    */
-  color: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
+  color: PropTypes.oneOf(
+    ['primary', 'secondary', 'selected', 'success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark'],
+  ),
   /**
    * If `true`, the button will be disabled.
    *

package/src/lib/components/Button/README.mdx

@@ -65,6 +65,7 @@ app. Use it sparingly but remember there should always be one on a screen.
 <Playground>
   <Button label="Primary" />
   <Button label="Secondary" color="secondary" />
+  <Button label="Selected" color="selected" />
   <Button label="Success" color="success" />
   <Button label="Warning" color="warning" />
   <Button label="Danger" color="danger" />
@@ -88,6 +89,7 @@ important but not primary in your app.
 <Playground>
   <Button priority="outline" label="Primary" />
   <Button priority="outline" label="Secondary" color="secondary" />
+  <Button priority="outline" label="Selected" color="selected" />
   <Button priority="outline" label="Success" color="success" />
   <Button priority="outline" label="Warning" color="warning" />
   <Button priority="outline" label="Danger" color="danger" />
@@ -108,6 +110,7 @@ the content.
 <Playground>
   <Button priority="flat" label="Primary" />
   <Button priority="flat" label="Secondary" color="secondary" />
+  <Button priority="flat" label="Selected" color="selected" />
   <Button priority="flat" label="Success" color="success" />
   <Button priority="flat" label="Warning" color="warning" />
   <Button priority="flat" label="Danger" color="danger" />
@@ -269,9 +272,11 @@ Disabled state makes the action unavailable.
 ### Feedback State
 
 When user's action triggers an asynchronous process on background, the button's
-feedback state can be indicated by showing an icon. The icon replaces button's
-label while retaining original dimensions of the button. Buttons in feedback
-state are automatically disabled to prevent unwanted interaction.
+feedback state (not to be mistaken with
+[feedback colors](/foundation/colors#component-colors)) can be indicated by
+showing an icon. The icon replaces button's label while retaining original
+dimensions of the button. Buttons in feedback state are automatically disabled
+to prevent unwanted interaction.
 
 Filled buttons in feedback state:
 

package/src/lib/components/Button/_priorities.scss

@@ -11,6 +11,10 @@
     @include tools.button-color(filled, secondary);
 }
 
+.isRootPriorityFilled.isRootColorSelected {
+    @include tools.button-color(filled, selected);
+}
+
 .isRootPriorityFilled.isRootColorSuccess {
     @include tools.button-color(filled, success);
 }
@@ -51,6 +55,10 @@
     @include tools.button-color(outline, secondary);
 }
 
+.isRootPriorityOutline.isRootColorSelected {
+    @include tools.button-color(outline, selected);
+}
+
 .isRootPriorityOutline.isRootColorSuccess {
     @include tools.button-color(outline, success);
 }
@@ -91,6 +99,10 @@
     @include tools.button-color(flat, secondary);
 }
 
+.isRootPriorityFlat.isRootColorSelected {
+    @include tools.button-color(flat, selected);
+}
+
 .isRootPriorityFlat.isRootColorSuccess {
     @include tools.button-color(flat, success);
 }

package/src/lib/components/Button/_settings.scss

@@ -12,7 +12,7 @@ $group-z-indexes: (
     button-overflowing-elements: 3,
 );
 
-$themeable-variants: (primary, secondary, success, warning, danger, help, info, note, light, dark);
+$themeable-variants: (primary, secondary, selected, success, warning, danger, help, info, note, light, dark);
 $themeable-states: (default, hover, active, disabled);
 $themeable-priority-properties: (
     filled: (color, border-color, background, box-shadow),

package/src/lib/components/ButtonGroup/README.mdx

@@ -43,6 +43,13 @@ See [API](#api) for all available options.
 - Use button group to group **related actions** that a user can take. Buttons
   should not be grouped just to save space on the screen.
 
+- **Mixing multiple button priorities** and some other properties within a
+  button group is [not allowed](#shared-properties). The priority can only be
+  set for all buttons in the group at once.
+
+- In most use cases, **secondary action color** is probably the best option for
+  buttons in a group as it works good with the colors of the selected state.
+
 - Use **short labels or icons** so the buttons can fit small screens.
 
 - For toggling between on/off states, use rather the
@@ -58,11 +65,17 @@ See [API](#api) for all available options.
 ### Shared Properties
 
 You can set the following properties directly on ButtonGroup to be shared for
-all buttons inside the group: size, priority, disabled state, and block width.
+all buttons inside the group:
+
+- `size`,
+- `priority`,
+- `disabled` state,
+- and `block` width.
+
 These properties are then passed over to individual buttons. At the same time,
-they **cannot be overridden** on the buttons' level. While technically possible,
-from the design point of view it's undesirable to group buttons of totally
-different types or sizes.
+they **cannot be overridden** on the buttons' level. While (in theory)
+technically possible, from the design point of view it's undesirable to group
+buttons of totally different types or sizes.
 
 ## Priorities
 
@@ -73,6 +86,9 @@ priorities of the [Button](/components/button) component:
 2. outline
 3. flat
 
+👉 To avoid undesired combinations, the visual priority of the button group
+**cannot be overridden** on the Button level.
+
 ### Filled
 
 The default, high-emphasis priority should be used for primary actions of your
@@ -80,9 +96,9 @@ app.
 
 <Playground>
   <ButtonGroup>
-    <Button label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="secondary" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
 </Playground>
 
@@ -93,9 +109,9 @@ in your app.
 
 <Playground>
   <ButtonGroup priority="outline">
-    <Button label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="secondary" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
 </Playground>
 
@@ -106,9 +122,9 @@ the content.
 
 <Playground>
   <ButtonGroup priority="flat">
-    <Button label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="secondary" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
 </Playground>
 
@@ -119,19 +135,19 @@ medium, and large.
 
 <Playground>
   <ButtonGroup size="small">
-    <Button label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="secondary" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
   <ButtonGroup>
-    <Button label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="secondary" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
   <ButtonGroup size="large">
-    <Button label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="secondary" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
 </Playground>
 
@@ -139,9 +155,9 @@ Block button groups span the full width of a parent:
 
 <Playground>
   <ButtonGroup block>
-    <Button label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="secondary" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
 </Playground>
 
@@ -153,19 +169,19 @@ Disables all buttons inside the group.
 
 <Playground>
   <ButtonGroup disabled>
-    <Button label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="secondary" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
   <ButtonGroup priority="outline" disabled>
-    <Button label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="secondary" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
   <ButtonGroup priority="flat" disabled>
-    <Button label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="secondary" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
 </Playground>
 
@@ -176,42 +192,42 @@ state of individual buttons can be indicated by showing an icon.
 
 <Playground>
   <ButtonGroup>
-    <Button label="Week" color="success" feedbackIcon={<Icon icon="success" />} />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="success" label="Week" feedbackIcon={<Icon icon="success" />} />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
   <ButtonGroup priority="outline">
-    <Button label="Week" color="success" feedbackIcon={<Icon icon="success" />} />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="success" label="Week" feedbackIcon={<Icon icon="success" />} />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
   <ButtonGroup priority="flat">
-    <Button label="Week" color="success" feedbackIcon={<Icon icon="success" />} />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="success" label="Week" feedbackIcon={<Icon icon="success" />} />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
 </Playground>
 
-### Active State
+### Selected State
 
-To highlight the selected option, the active state can be achieved by setting
-a different button variant for the active item.
+To highlight the selected option, just apply the selected color variant for
+the desired item.
 
 <Playground>
   <ButtonGroup>
-    <Button color="dark" label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="selected" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
   <ButtonGroup priority="outline">
-    <Button color="dark" label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="selected" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
   <ButtonGroup priority="flat">
-    <Button color="dark" label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="selected" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
 </Playground>
 
@@ -224,9 +240,9 @@ and communicating the state of individual options.
   <>
     <span id="period-label">Period:</span>
     <ButtonGroup aria-labelledby="period-label">
-      <Button label="Week" aria-pressed color="dark" />
-      <Button label="Month" aria-pressed={false} />
-      <Button label="Year" aria-pressed={false} />
+      <Button color="selected" label="Week" aria-pressed />
+      <Button color="secondary" label="Month" aria-pressed={false} />
+      <Button color="secondary" label="Year" aria-pressed={false} />
     </ButtonGroup>
   </>
 </Playground>

package/src/lib/components/Card/Card.jsx

@@ -46,9 +46,7 @@ Card.propTypes = {
   /**
    * [Color variant](/foundation/colors#component-colors) to clarify importance and meaning of the card.
    */
-  color: PropTypes.oneOf(
-    ['primary', 'secondary', 'success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark'],
-  ),
+  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
   /**
    * Make the card more compact.
    */

package/src/lib/components/Card/Card.scss

@@ -1,6 +1,5 @@
 // 1. Retain equal card widths in flex and grid layouts independently on their content.
 
-@use "../../styles/theme/colors";
 @use "theme";
 @use "tools";
 
@@ -33,14 +32,6 @@
     box-shadow: theme.$raised-box-shadow;
 }
 
-.isRootColorPrimary {
-    @include tools.color(primary);
-}
-
-.isRootColorSecondary {
-    @include tools.color(secondary);
-}
-
 .isRootColorSuccess {
     @include tools.color(success);
 }