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

package/src/lib/components/Table/_components/TableCell.scss

@@ -14,12 +14,13 @@
     border-bottom-width: 2px;
 }
 
+.tableHeadCellLayout {
+    display: flex;
+    gap: settings.$cell-padding-x;
+    align-items: center;
+}
+
 .isTableCellSortingActive,
 .isTableHeadCellSortingActive {
     background-color: settings.$sorted-background-color;
 }
-
-.sortButton {
-    display: inline-block;
-    margin-right: settings.$cell-padding-x;
-}

package/src/lib/components/Table/_components/TableHeaderCell/TableHeaderCell.jsx

@@ -16,23 +16,26 @@ export const TableHeaderCell = ({
       className={isSortingActive ? styles.isTableHeadCellSortingActive : styles.tableHeadCell}
       id={id}
     >
-      {sort && column.isSortable && (
-        <div className={styles.sortButton}>
+      <span className={styles.tableHeadCellLayout}>
+        {sort && column.isSortable && (
           <Button
+            aria-pressed={isSortingActive}
             beforeLabel={
               sortDirection === 'asc'
                 ? sort.ascendingIcon
                 : sort.descendingIcon
             }
+            color={isSortingActive ? 'selected' : 'secondary'}
             id={id && `${id}__sortButton`}
             label={sortDirection}
             labelVisibility="none"
             onClick={() => sort.onClick(column.name, sortDirection)}
             priority="flat"
+            size="small"
           />
-        </div>
-      )}
-      {column.label}
+        )}
+        {column.label}
+      </span>
     </th>
   );
 };

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

@@ -1,15 +1,14 @@
 @use "sass:map";
 @use "../../styles/theme/borders";
-@use "../../styles/theme/colors";
 @use "../../styles/theme/typography";
 @use "../../styles/tools/spacing";
 
 $cell-padding-x: spacing.of(3);
 $cell-padding-y: spacing.of(1);
 $border-width: borders.$width;
-$border-color: map.get(colors.$grays, gray-100);
-$background-color: colors.$white;
-$head-background-color: colors.$white;
+$border-color: var(--rui-color-border-secondary);
+$background-color: var(--rui-color-background-basic);
+$head-background-color: var(--rui-color-background-basic);
 $head-font-weight: map.get(typography.$font-weight-values, bold);
-$hover-background-color: map.get(colors.$grays, gray-50);
-$sorted-background-color: map.get(colors.$grays, gray-50);
+$hover-background-color: var(--rui-color-background-interactive-hover);
+$sorted-background-color: var(--rui-color-background-selected);

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

@@ -156,19 +156,22 @@ will override automatic break point selection in `auto` mode when present.
               <span id="word-wrapping-options-label">Word wrapping:</span>
             </ToolbarItem>
             <ToolbarItem>
-              <ButtonGroup aria-labelledby="word-wrapping-options-label">
+              <ButtonGroup aria-labelledby="word-wrapping-options-label" priority="outline">
                 <Button
-                  color={wordWrapping === 'normal' ? 'dark' : 'primary'}
+                  aria-pressed={wordWrapping === 'normal'}
+                  color={wordWrapping === 'normal' ? 'selected' : 'secondary'}
                   label="normal"
                   onClick={() => setWordWrapping('normal')}
                 />
                 <Button
-                  color={wordWrapping === 'long-words' ? 'dark' : 'primary'}
+                  aria-pressed={wordWrapping === 'long-words'}
+                  color={wordWrapping === 'long-words' ? 'selected' : 'secondary'}
                   label="long-words"
                   onClick={() => setWordWrapping('long-words')}
                 />
                 <Button
-                  color={wordWrapping === 'anywhere' ? 'dark' : 'primary'}
+                  aria-pressed={wordWrapping === 'anywhere'}
+                  color={wordWrapping === 'anywhere' ? 'selected' : 'secondary'}
                   label="anywhere"
                   onClick={() => setWordWrapping('anywhere')}
                 />
@@ -180,19 +183,22 @@ will override automatic break point selection in `auto` mode when present.
               <span id="hyphens-options-label">Hyphens:</span>
             </ToolbarItem>
             <ToolbarItem>
-              <ButtonGroup aria-labelledby="hyphens-options-label">
+              <ButtonGroup aria-labelledby="hyphens-options-label" priority="outline">
                 <Button
-                  color={hyphens === 'none' ? 'dark' : 'primary'}
+                  aria-pressed={hyphens === 'none'}
+                  color={hyphens === 'none' ? 'selected' : 'secondary'}
                   label="none"
                   onClick={() => setHyphens('none')}
                 />
                 <Button
-                  color={hyphens === 'auto' ? 'dark' : 'primary'}
+                  aria-pressed={hyphens === 'auto'}
+                  color={hyphens === 'auto' ? 'selected' : 'secondary'}
                   label="auto"
                   onClick={() => setHyphens('auto')}
                 />
                 <Button
-                  color={hyphens === 'manual' ? 'dark' : 'primary'}
+                  aria-pressed={hyphens === 'manual'}
+                  color={hyphens === 'manual' ? 'selected' : 'secondary'}
                   label="manual"
                   onClick={() => setHyphens('manual')}
                 />

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

@@ -73,12 +73,14 @@ accessibility.
 
 ## Theming
 
-| Custom Property                          | Description                       |
-|------------------------------------------|-----------------------------------|
-| `--rui-TextLink__color`                  | Text color                        |
-| `--rui-TextLink__text-decoration`        | Text decoration, e.g. underline   |
-| `--rui-TextLink--hover__color`           | Text color on hover               |
-| `--rui-TextLink--hover__text-decoration` | Text decoration on hover          |
+| Custom Property                           | Description                         |
+|-------------------------------------------|-------------------------------------|
+| `--rui-TextLink__color`                   | Text color                          |
+| `--rui-TextLink__text-decoration`         | Text decoration, e.g. underline     |
+| `--rui-TextLink--hover__color`            | Text color on hover                 |
+| `--rui-TextLink--hover__text-decoration`  | Text decoration on hover            |
+| `--rui-TextLink--active__color`           | Text color in the active state      |
+| `--rui-TextLink--active__text-decoration` | Text decoration in the active state |
 
 [React synthetic events]: https://reactjs.org/docs/events.html
 [a]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes

package/src/lib/components/TextLink/TextLink.scss

@@ -8,4 +8,9 @@
         text-decoration: theme.$hover-text-decoration;
         color: theme.$hover-color;
     }
+
+    &:active {
+        text-decoration: theme.$active-text-decoration;
+        color: theme.$active-color;
+    }
 }

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

@@ -2,3 +2,5 @@ $color: var(--rui-TextLink__color);
 $text-decoration: var(--rui-TextLink__text-decoration);
 $hover-color: var(--rui-TextLink--hover__color);
 $hover-text-decoration: var(--rui-TextLink--hover__text-decoration);
+$active-color: var(--rui-TextLink--active__color);
+$active-text-decoration: var(--rui-TextLink--active__text-decoration);

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

@@ -90,24 +90,28 @@ of `right`.
               <span id="alignment-label">Alignment:</span>
             </ToolbarItem>
             <ToolbarItem>
-              <ButtonGroup aria-labelledby="alignment-label">
+              <ButtonGroup aria-labelledby="alignment-label" priority="outline">
                 <Button
-                  color={alignment === 'top' ? 'dark' : 'primary'}
+                  aria-pressed={alignment === 'top'}
+                  color={alignment === 'top' ? 'selected' : 'secondary'}
                   label="top"
                   onClick={() => setAlignment('top')}
                 />
                 <Button
-                  color={alignment === 'middle' ? 'dark' : 'primary'}
+                  aria-pressed={alignment === 'middle'}
+                  color={alignment === 'middle' ? 'selected' : 'secondary'}
                   label="middle"
                   onClick={() => setAlignment('middle')}
                 />
                 <Button
-                  color={alignment === 'bottom' ? 'dark' : 'primary'}
+                  aria-pressed={alignment === 'bottom'}
+                  color={alignment === 'bottom' ? 'selected' : 'secondary'}
                   label="bottom"
                   onClick={() => setAlignment('bottom')}
                 />
                 <Button
-                  color={alignment === 'baseline' ? 'dark' : 'primary'}
+                  aria-pressed={alignment === 'baseline'}
+                  color={alignment === 'baseline' ? 'selected' : 'secondary'}
                   label="baseline"
                   onClick={() => setAlignment('baseline')}
                 />
@@ -119,24 +123,28 @@ of `right`.
               <span id="justification-label">Justification:</span>
             </ToolbarItem>
             <ToolbarItem>
-              <ButtonGroup aria-labelledby="justification-label">
+              <ButtonGroup aria-labelledby="justification-label" priority="outline">
                 <Button
-                  color={justification === 'start' ? 'dark' : 'primary'}
+                  aria-pressed={justification === 'start'}
+                  color={justification === 'start' ? 'selected' : 'secondary'}
                   label="start"
                   onClick={() => setJustification('start')}
                 />
                 <Button
-                  color={justification === 'center' ? 'dark' : 'primary'}
+                  aria-pressed={justification === 'center'}
+                  color={justification === 'center' ? 'selected' : 'secondary'}
                   label="center"
                   onClick={() => setJustification('center')}
                 />
                 <Button
-                  color={justification === 'end' ? 'dark' : 'primary'}
+                  aria-pressed={justification === 'end'}
+                  color={justification === 'end' ? 'selected' : 'secondary'}
                   label="end"
                   onClick={() => setJustification('end')}
                 />
                 <Button
-                  color={justification === 'space-between' ? 'dark' : 'primary'}
+                  aria-pressed={justification === 'space-between'}
+                  color={justification === 'space-between' ? 'selected' : 'secondary'}
                   label="space-between"
                   onClick={() => setJustification('space-between')}
                 />
@@ -202,7 +210,7 @@ toolbar groups, or on the entire toolbar.
 
 <Playground>
   {() => {
-    const [isGroupDense, setIsGroupDense] = React.useState(true);
+    const [isGroupDense, setIsGroupDense] = React.useState(false);
     const [isToolbarDense, setIsToolbarDense] = React.useState(false);
     return (
       <div>

package/src/lib/components/_helpers/getRootColorClassName.js

@@ -7,6 +7,10 @@ export const getRootColorClassName = (variant, styles) => {
     return styles.isRootColorSecondary;
   }
 
+  if (variant === 'selected') {
+    return styles.isRootColorSelected;
+  }
+
   if (variant === 'success') {
     return styles.isRootColorSuccess;
   }

package/src/lib/styles/elements/_code.scss

@@ -1,6 +1,4 @@
-@use "sass:map";
 @use "../theme/code";
-@use "../theme/colors";
 
 code,
 pre {
@@ -10,5 +8,5 @@ pre {
 
 code {
     padding: 0.15em 0.5em;
-    background-color: map.get(colors.$grays, gray-100);
+    background-color: var(--rui-color-background-light);
 }

package/src/lib/styles/elements/_page.scss

@@ -6,6 +6,7 @@ html {
     height: 100%;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
+    font-weight: typography.$font-weight-base;
     font-size: typography.$font-size-base;
     line-height: typography.$line-height-base;
     font-family: typography.$font-family-base;

package/src/lib/styles/elements/_rulers.scss

@@ -1,9 +1,7 @@
-@use "sass:map";
 @use "../theme/borders";
-@use "../theme/colors";
 
 hr {
     border: 0;
-    border-top: borders.$width solid map.get(colors.$grays, gray-200);
+    border-top: borders.$width solid var(--rui-color-border-secondary);
     background: none;
 }

package/src/lib/styles/elements/_small.scss

@@ -1,5 +1,5 @@
 @use "../theme/typography";
 
 small {
-    font-size: typography.$size-small;
+    font-size: typography.$font-size-small;
 }

package/src/lib/styles/settings/_form-fields.scss

@@ -15,7 +15,7 @@ $horizontal-inner-gap: spacing.of(2);
 $horizontal-outer-spacing: spacing.of(2);
 
 $box-input-font-family: typography.$font-family-base;
-$box-input-font-weight: map.get(typography.$font-weight-values, regular);
+$box-input-font-weight: map.get(typography.$font-weight-values, default);
 $box-input-line-height: 1.5rem; // 1.
 $box-field-caret-size: 2.25rem;
 $box-field-input-number-arrows-width: 1.5rem;

package/src/lib/styles/settings/_utilities.scss

@@ -1,5 +1,4 @@
 @use "sass:map";
-@use "../theme/colors";
 @use "../theme/spacing";
 @use "../theme/typography";
 
@@ -85,8 +84,8 @@ $map: (
     "font-size": (
         responsive: false,
         property: font-size,
-        class: typography-size,
-        values: typography.$size-values,
+        class: font-size,
+        values: typography.$font-size-values,
     ),
     "text-align": (
         responsive: true,
@@ -99,17 +98,50 @@ $map: (
         property: color,
         class: text,
         values: (
-            primary: map.get(colors.$brand, primary),
-            secondary: map.get(colors.$brand, secondary),
-            success: map.get(colors.$ui, success),
-            warning: map.get(colors.$ui, warning),
-            danger: map.get(colors.$ui, danger),
-            help: map.get(colors.$ui, help),
-            info: map.get(colors.$ui, info),
-            note: map.get(colors.$ui, note),
-            light: colors.$light,
-            dark: colors.$dark,
-            muted: colors.$muted,
+            // Text colors
+            primary: var(--rui-color-text-primary),
+            primary-disabled: var(--rui-color-text-primary-disabled),
+            secondary: var(--rui-color-text-secondary),
+            secondary-disabled: var(--rui-color-text-secondary-disabled),
+            // Feedback colors
+            success: var(--rui-color-feedback-success),
+            warning: var(--rui-color-feedback-warning),
+            danger: var(--rui-color-feedback-danger),
+            help: var(--rui-color-feedback-help),
+            info: var(--rui-color-feedback-info),
+            note: var(--rui-color-feedback-note),
+            // Neutral colors
+            light: var(--rui-color-neutral-light),
+            dark: var(--rui-color-neutral-dark),
+        ),
+    ),
+    "background-color": (
+        responsive: false,
+        property: background-color,
+        class: bg,
+        values: (
+            // Content layers
+            base: var(--rui-color-background-base),
+            layer-1: var(--rui-color-background-layer-1),
+            layer-2: var(--rui-color-background-layer-2),
+            // Component backgrounds
+            basic: var(--rui-color-background-basic),
+            disabled: var(--rui-color-background-disabled),
+            // Interactive backgrounds: intentionally not generated to utilities, CSS use only.
+            // Action backgrounds
+            primary: var(--rui-color-background-primary),
+            secondary: var(--rui-color-background-secondary),
+            selected: var(--rui-color-background-selected),
+            // Feedback backgrounds
+            success: var(--rui-color-background-success),
+            warning: var(--rui-color-background-warning),
+            danger: var(--rui-color-background-danger),
+            help: var(--rui-color-background-help),
+            info: var(--rui-color-background-info),
+            note: var(--rui-color-background-note),
+            // Neutral backgrounds
+            light: var(--rui-color-background-light),
+            dark: var(--rui-color-background-dark),
         ),
     ),
 );

package/src/lib/styles/theme/_accessibility.scss

@@ -1,7 +1,7 @@
 // 1. Make it possible to keep the original box shadow of the component: if `--rui-focus-box-shadow` is set to
 //    `initial`, `revert` or `unset`, `--rui-local-box-shadow` is used.
 
-$tap-target-size: var(--rui-tap-target-size);
-$focus-outline: var(--rui-focus-outline);
-$focus-outline-offset: var(--rui-focus-outline-offset);
-$focus-box-shadow: var(--rui-focus-box-shadow, var(--rui-local-box-shadow, initial)); // 1.
+$tap-target-size: var(--rui-dimension-tap-target-size);
+$focus-outline: var(--rui-border-focus-ring);
+$focus-outline-offset: var(--rui-dimension-focus-ring-offset);
+$focus-box-shadow: var(--rui-shadow-focus-ring, var(--rui-local-box-shadow, initial)); // 1.

package/src/lib/styles/theme/_borders.scss

@@ -1,2 +1,2 @@
-$width: var(--rui-border-width);
-$radius: var(--rui-border-radius);
+$width: var(--rui-dimension-border-width-1);
+$radius: var(--rui-dimension-radius-1);

package/src/lib/styles/theme/_code.scss

@@ -1,2 +1,2 @@
-$font-family: var(--rui-code-font-family);
-$font-size: var(--rui-code-font-size);
+$font-family: var(--rui-font-family-monospace);
+$font-size: var(--rui-font-size-code);

package/src/lib/styles/theme/_links.scss

@@ -1,4 +1,6 @@
-$color: var(--rui-link-color);
-$decoration: var(--rui-link-decoration);
-$hover-color: var(--rui-link-hover-color);
-$hover-decoration: var(--rui-link-hover-decoration);
+$color: var(--rui-color-text-link);
+$decoration: var(--rui-text-decoration-link);
+$hover-color: var(--rui-color-text-link-hover);
+$hover-decoration: var(--rui-text-decoration-link-hover);
+$active-color: var(--rui-color-text-link-active);
+$active-decoration: var(--rui-text-decoration-link-active);

package/src/lib/styles/theme/_lists.scss

@@ -1 +1 @@
-$unordered-style: var(--rui-list-unordered-style);
+$unordered-style: var(--rui-list-style-unordered);

package/src/lib/styles/theme/_page.scss

@@ -1,2 +1,2 @@
-$color: var(--rui-page-color);
-$background: var(--rui-page-background);
+$background: var(--rui-color-background-base);
+$color: var(--rui-color-text-primary);

package/src/lib/styles/theme/_spacing.scss

@@ -1,16 +1,16 @@
 $values: (
-    0: var(--rui-spacing-0),
-    1: var(--rui-spacing-1),
-    2: var(--rui-spacing-2),
-    3: var(--rui-spacing-3),
-    4: var(--rui-spacing-4),
-    5: var(--rui-spacing-5),
-    6: var(--rui-spacing-6),
-    7: var(--rui-spacing-7),
+    0: var(--rui-dimension-space-0),
+    1: var(--rui-dimension-space-1),
+    2: var(--rui-dimension-space-2),
+    3: var(--rui-dimension-space-3),
+    4: var(--rui-dimension-space-4),
+    5: var(--rui-dimension-space-5),
+    6: var(--rui-dimension-space-6),
+    7: var(--rui-dimension-space-7),
 );
 
 $bottom: (
-    default: var(--rui-spacing-bottom-default),
-    headings: var(--rui-spacing-bottom-headings),
-    layouts: var(--rui-spacing-bottom-layouts),
+    base: var(--rui-dimension-space-bottom-base),
+    headings: var(--rui-dimension-space-bottom-headings),
+    layouts: var(--rui-dimension-space-bottom-layouts),
 );

package/src/lib/styles/theme/_typography.scss

@@ -1,24 +1,25 @@
 $font-weight-values: (
-    thin: var(--rui-typography-font-weight-thin),
-    light: var(--rui-typography-font-weight-light),
-    regular: var(--rui-typography-font-weight-regular),
-    medium: var(--rui-typography-font-weight-medium),
-    bold: var(--rui-typography-font-weight-bold),
+    light: var(--rui-font-weight-light),
+    default: var(--rui-font-weight-base),
+    bold: var(--rui-font-weight-bold),
 );
 
-$size-values: (
-    0: var(--rui-typography-size-0),
-    1: var(--rui-typography-size-1),
-    2: var(--rui-typography-size-2),
-    3: var(--rui-typography-size-3),
-    4: var(--rui-typography-size-4),
-    5: var(--rui-typography-size-5),
+$font-weight-base: var(--rui-font-weight-base);
+
+$font-size-values: (
+    1: var(--rui-font-size-1),
+    2: var(--rui-font-size-2),
+    3: var(--rui-font-size-3),
+    4: var(--rui-font-size-4),
+    5: var(--rui-font-size-5),
+    6: var(--rui-font-size-6),
 );
 
-$size-small: var(--rui-typography-size-small);
-$size-smaller: var(--rui-typography-size-smaller);
+$font-size-base: var(--rui-font-size-base);
+$font-size-small: var(--rui-font-size-small);
+$font-size-smaller: var(--rui-font-size-smaller);
+
+$font-family-base: var(--rui-font-family-base);
 
-$font-family-base: var(--rui-typography-font-family-base);
-$font-size-base: var(--rui-typography-font-size-base);
-$line-height-base: var(--rui-typography-line-height-base);
-$line-height-small: var(--rui-typography-line-height-small);
+$line-height-base: var(--rui-line-height-base);
+$line-height-small: var(--rui-line-height-small);

package/src/lib/styles/theme-constants/_colors.scss

@@ -1,4 +1,4 @@
-// ⚠️ For `theme.scss` purposes only, do not use anywhere else.
+// ⚠️ FOR `theme.scss` PURPOSES ONLY. DO NOT USE AS A BASE FOR YOUR COLOR PALETTES OR ANYWHERE ELSE THAN IN THE THEME.
 
 @use "sass:color";
 @use "../tools/colors";
@@ -8,8 +8,24 @@ $_amount-light: 90%;
 $_amount-dark: 10%;
 $_amount-darker: 20%;
 
+$gray-50: colors.darken-color($_gray-base-color, 5%);
+$gray-100: colors.darken-color($_gray-base-color, 10%);
+$gray-200: colors.darken-color($_gray-base-color, 20%);
+$gray-300: colors.darken-color($_gray-base-color, 30%);
+$gray-400: colors.darken-color($_gray-base-color, 40%);
+$gray-500: colors.darken-color($_gray-base-color, 50%);
+$gray-600: colors.darken-color($_gray-base-color, 60%);
+$gray-700: colors.darken-color($_gray-base-color, 70%);
+$gray-800: colors.darken-color($_gray-base-color, 80%);
+$gray-900: colors.darken-color($_gray-base-color, 90%);
+
 $primary: #00778b;
-$secondary: #fa4616;
+$secondary: $gray-500;
+$selected: #007bff;
+
+$focus: color.scale($selected, $alpha: -50%);
+
+$transparent: transparent;
 
 $success: #28a745;
 $warning: #ffc107;
@@ -21,7 +37,6 @@ $note: #007bff;
 $white: #fff;
 $black: #000;
 
-// Derived color palette
 $primary-light: colors.lighten-color($primary, $_amount-light);
 $primary-dark: colors.darken-color($primary, $_amount-dark);
 $primary-darker: colors.darken-color($primary, $_amount-darker);
@@ -32,6 +47,11 @@ $secondary-dark: colors.darken-color($secondary, $_amount-dark);
 $secondary-darker: colors.darken-color($secondary, $_amount-darker);
 $on-secondary: $white;
 
+$selected-light: colors.lighten-color($selected, $_amount-light);
+$selected-dark: colors.darken-color($selected, $_amount-dark);
+$selected-darker: colors.darken-color($selected, $_amount-darker);
+$on-selected: $white;
+
 $success-light: colors.lighten-color($success, $_amount-light);
 $success-dark: colors.darken-color($success, $_amount-dark);
 $success-darker: colors.darken-color($success, $_amount-darker);
@@ -61,23 +81,3 @@ $note-light: colors.lighten-color($note, $_amount-light);
 $note-dark: colors.darken-color($note, $_amount-dark);
 $note-darker: colors.darken-color($note, $_amount-darker);
 $on-note: $white;
-
-$gray-50: colors.darken-color($_gray-base-color, 5%);
-$gray-100: colors.darken-color($_gray-base-color, 10%);
-$gray-200: colors.darken-color($_gray-base-color, 20%);
-$gray-300: colors.darken-color($_gray-base-color, 30%);
-$gray-400: colors.darken-color($_gray-base-color, 40%);
-$gray-500: colors.darken-color($_gray-base-color, 50%);
-$gray-600: colors.darken-color($_gray-base-color, 60%);
-$gray-700: colors.darken-color($_gray-base-color, 70%);
-$gray-800: colors.darken-color($_gray-base-color, 80%);
-$gray-900: colors.darken-color($_gray-base-color, 90%);
-
-$light: $white;
-$dark: $gray-700;
-$muted: $gray-500;
-
-$active: $note;
-$on-active: $on-note;
-$active-hover: $note-darker;
-$active-focus: color.adjust($note, $alpha: -0.75);

package/src/lib/styles/tools/_spacing.scss

@@ -11,7 +11,7 @@
     }
 }
 
-@mixin bottom($category: default) {
+@mixin bottom($category: base) {
     @if not map.has-key(spacing.$bottom, $category) {
         @error "Invalid spacing category specified! #{$category} doesn't exist. "
             + "Choose one of #{map.keys(spacing.$bottom)}.";