@react-ui-org/react-ui 0.50.2 → 0.52.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.52.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

@@ -7,8 +7,9 @@ import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { ButtonGroupContext } from '../ButtonGroup';
+import { InputGroupContext } from '../InputGroup/InputGroupContext';
+import getRootPriorityClassName from '../_helpers/getRootPriorityClassName';
 import getRootLabelVisibilityClassName from './helpers/getRootLabelVisibilityClassName';
-import getRootPriorityClassName from './helpers/getRootPriorityClassName';
 import styles from './Button.scss';
 
 export const Button = React.forwardRef((props, ref) => {
@@ -28,8 +29,14 @@ export const Button = React.forwardRef((props, ref) => {
     color,
     ...restProps
   } = props;
+  const buttonGroupContext = useContext(ButtonGroupContext);
+  const inputGroupContext = useContext(InputGroupContext);
 
-  const context = useContext(ButtonGroupContext);
+  if (buttonGroupContext && inputGroupContext) {
+    throw new Error('Button cannot be placed both in `ButtonGroup` and `InputGroup`.');
+  }
+
+  const primaryContext = buttonGroupContext ?? inputGroupContext;
 
   return (
     /* No worries, `type` is always assigned correctly through props. */
@@ -39,20 +46,21 @@ export const Button = React.forwardRef((props, ref) => {
       className={classNames(
         styles.root,
         getRootPriorityClassName(
-          resolveContextOrProp(context && context.priority, priority),
+          resolveContextOrProp(buttonGroupContext && buttonGroupContext.priority, priority),
           styles,
         ),
         getRootColorClassName(color, styles),
         getRootSizeClassName(
-          resolveContextOrProp(context && context.size, size),
+          resolveContextOrProp(primaryContext && primaryContext.size, size),
           styles,
         ),
         getRootLabelVisibilityClassName(labelVisibility, styles),
-        resolveContextOrProp(context && context.block, block) && styles.isRootBlock,
-        context && styles.isRootGrouped,
+        resolveContextOrProp(buttonGroupContext && buttonGroupContext.block, block) && styles.isRootBlock,
+        buttonGroupContext && styles.isRootInButtonGroup,
+        inputGroupContext && styles.isRootInInputGroup,
         feedbackIcon && styles.hasRootFeedback,
       )}
-      disabled={resolveContextOrProp(context && context.disabled, disabled) || !!feedbackIcon}
+      disabled={resolveContextOrProp(primaryContext && primaryContext.disabled, disabled) || !!feedbackIcon}
       id={id}
       ref={ref}
     >
@@ -127,7 +135,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.
    *
@@ -169,8 +179,8 @@ Button.propTypes = {
   /**
    * Size of the button.
    *
-   * Ignored if the component is rendered within `ButtonGroup` component
-   * as the value is inherited in such case.
+   * Ignored if the component is rendered within `ButtonGroup` or `InputGroup` component as the value is inherited in
+   * such case.
    */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   /**

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/_base.scss

@@ -1,3 +1,6 @@
+// 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";
@@ -76,28 +79,34 @@
     color: transparent;
 }
 
-.isRootGrouped {
+.isRootInButtonGroup,
+.isRootInInputGroup {
     z-index: map.get(settings.$group-z-indexes, button);
 
     &:not(:first-child) {
-        margin-left: var(--rui-local-gap);
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
+        border-start-start-radius: var(--rui-local-inner-border-radius);
+        border-end-start-radius: var(--rui-local-inner-border-radius);
     }
 
     &:not(:last-child) {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
+        border-start-end-radius: var(--rui-local-inner-border-radius);
+        border-end-end-radius: var(--rui-local-inner-border-radius);
     }
+}
 
-    &:focus,
-    &:not(:disabled):hover {
-        z-index: map.get(settings.$group-z-indexes, button-hover);
-    }
+.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);
 }
 
-.isRootGrouped .startCorner,
-.isRootGrouped .endCorner {
+.isRootInButtonGroup .startCorner,
+.isRootInInputGroup .startCorner,
+.isRootInButtonGroup .endCorner,
+.isRootInInputGroup .endCorner {
     z-index: map.get(settings.$group-z-indexes, button-overflowing-elements);
 }
 

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);
 }
@@ -123,8 +135,7 @@
     @include tools.button-color(flat, dark);
 }
 
-.isRootPriorityFilled.isRootGrouped:not(:first-child)::before,
-.isRootPriorityFlat.isRootGrouped:not(:first-child)::before {
+.isRootInButtonGroup:not(:first-child)::before {
     content: "";
     position: absolute;
     top: calc(-1 * #{theme.$border-width});
@@ -134,19 +145,3 @@
     border-left: var(--rui-local-separator-width) solid var(--rui-local-separator-color);
     transform: translateX(calc(-0.5 * var(--rui-local-gap) - 50%));
 }
-
-.isRootPriorityFilled.isRootGrouped:not(:first-child) {
-    --rui-local-gap: #{theme.$group-filled-gap};
-    --rui-local-separator-width: #{theme.$group-filled-separator-width};
-    --rui-local-separator-color: #{theme.$group-filled-separator-color};
-}
-
-.isRootPriorityFlat.isRootGrouped:not(:first-child) {
-    --rui-local-gap: #{theme.$group-flat-gap};
-    --rui-local-separator-width: #{theme.$group-flat-separator-width};
-    --rui-local-separator-color: #{theme.$group-flat-separator-color};
-}
-
-.isRootPriorityOutline.isRootGrouped:not(:first-child) {
-    --rui-local-gap: #{theme.$group-outline-gap};
-}

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/Button/_theme.scss

@@ -12,16 +12,6 @@ $disabled-cursor: var(--rui-Button--disabled__cursor);
 $feedback-opacity: var(--rui-Button--feedback__opacity);
 $feedback-cursor: var(--rui-Button--feedback__cursor);
 
-$group-filled-gap: var(--rui-ButtonGroup--filled__gap);
-$group-filled-separator-width: var(--rui-ButtonGroup--filled__separator__width);
-$group-filled-separator-color: var(--rui-ButtonGroup--filled__separator__color);
-
-$group-flat-gap: var(--rui-ButtonGroup--flat__gap);
-$group-flat-separator-width: var(--rui-ButtonGroup--flat__separator__width);
-$group-flat-separator-color: var(--rui-ButtonGroup--flat__separator__color);
-
-$group-outline-gap: var(--rui-ButtonGroup--outline__gap);
-
 $sizes: (
     small: (
         height: var(--rui-Button--small__height),

package/src/lib/components/ButtonGroup/ButtonGroup.jsx

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
+import getRootPriorityClassName from '../_helpers/getRootPriorityClassName';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { transferProps } from '../_helpers/transferProps';
 import styles from './ButtonGroup.scss';
@@ -20,13 +21,14 @@ export const ButtonGroup = ({
   }
 
   return (
-    <div
+    <fieldset
       {...transferProps(restProps)}
       className={classNames(
         styles.root,
         block && styles.isRootBlock,
+        getRootPriorityClassName(priority, styles),
       )}
-      role="group"
+      disabled={disabled}
     >
       <ButtonGroupContext.Provider
         value={{
@@ -38,7 +40,7 @@ export const ButtonGroup = ({
       >
         {children}
       </ButtonGroupContext.Provider>
-    </div>
+    </fieldset>
   );
 };
 

package/src/lib/components/ButtonGroup/ButtonGroup.scss

@@ -1,5 +1,30 @@
+// 1. ButtonGroup gap is implemented using the `margin` property on buttons so the buttons can overlap and reduce
+//    duplicate borders.
+
+@use "theme";
+
 .root {
-    display: inline-flex;
+    --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 {