@jetbrains/ring-ui 7.0.15 → 7.0.17

package/README.md

@@ -3,6 +3,13 @@
 
 [![official JetBrains project](https://jb.gg/badges/official-flat-square.svg)](https://github.com/JetBrains#jetbrains-on-github)
 
+- [Design guildelines](https://www.jetbrains.com/help/ring-ui/welcome.html)
+- [Usage examples in Storybook][docsite]
+- [GitHub repository](https://github.com/JetBrains/ring-ui)
+- [Issues in YouTrack](https://youtrack.jetbrains.com/issues/RG)
+- [Builds in TeamCity][ci-project]
+- [npm package][npm-package]
+
 This collection of UI components aims to provide all the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products.
 
 ## Try now
@@ -84,14 +91,6 @@ in a same build process, you can use the following configuration:
 
 See [CONTRIBUTING.md](./CONTRIBUTING.md)
 
-## Links
-
-- [Living style guide][docsite]
-- [GitHub repository](https://github.com/JetBrains/ring-ui)
-- [Issues in YouTrack](https://youtrack.jetbrains.com/issues/RG)
-- [Builds in TeamCity][ci-project]
-- [npm package][npm-package]
-
 [docsite]: https://jetbrains.github.io/ring-ui
 [ci-project]: https://teamcity.jetbrains.com/project.html?projectId=JetBrainsUi_RingUi&tab=projectOverview
 [ci-bt]: https://teamcity.jetbrains.com/viewType.html?buildTypeId=JetBrainsUi_RingUi_GeminiTests&tab=buildTypeStatusDiv

package/components/alert/alert.css

@@ -36,7 +36,7 @@
 .error {
   word-wrap: break-word;
 
-  color: var(--ring-icon-error-color);
+  color: var(--ring-error-color);
 }
 
 .icon {

package/components/auth-dialog-service/auth-dialog-service.d.ts

@@ -1,5 +1,5 @@
 import AuthDialog, { AuthDialogProps } from '../auth-dialog/auth-dialog';
 export declare const reactRoot: import("react-dom/client").Root;
-type AuthDialogAttributes = JSX.LibraryManagedAttributes<typeof AuthDialog, AuthDialogProps>;
+type AuthDialogAttributes = React.JSX.LibraryManagedAttributes<typeof AuthDialog, AuthDialogProps>;
 export default function showAuthDialog(props?: AuthDialogAttributes): () => void;
 export {};

package/components/avatar/avatar.d.ts

@@ -36,4 +36,4 @@ export default class Avatar extends PureComponent<AvatarProps> {
     handleSuccess: () => void;
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type AvatarAttrs = JSX.LibraryManagedAttributes<typeof Avatar, AvatarProps>;
+export type AvatarAttrs = React.JSX.LibraryManagedAttributes<typeof Avatar, AvatarProps>;

package/components/button/button.css

@@ -6,11 +6,14 @@
   --ring-button-focus-border-color: var(--ring-border-hover-color);
   --ring-button-shadow: inset 0 0 0 1px;
   --ring-button-loader-width: calc(var(--ring-unit) * 8);
-  --ring-button-flat-disabled-color: var(--ring-white-text-color);
+  --ring-button-disabled-text-color: var(--ring-disabled-color);
+  --ring-button-loader-components: var(--ring-main-components);
+  --ring-button-white-text-disabled-color: var(--ring-white-text-color);
+  --ring-button-icon-line-height: calc(var(--ring-unit) * 2);
 }
 
 :global(.ring-ui-theme-dark) {
-  --ring-button-flat-disabled-color: var(--ring-icon-color);
+  --ring-button-white-text-disabled-color: var(--ring-disabled-color);
 }
 
 
@@ -19,7 +22,6 @@
   --ring-button-padding-block: calc(var(--ring-unit) * 0.5);
   --ring-button-font-size: var(--ring-font-size-smaller);
   --ring-button-line-height: var(--ring-line-height-lowest);
-  --ring-button-icon-line-height: calc(var(--ring-unit) * 1.5);
 }
 
 .heightM {
@@ -27,7 +29,6 @@
   --ring-button-padding-block: calc(var(--ring-unit) * 0.5);
   --ring-button-font-size: var(--ring-font-size);
   --ring-button-line-height: var(--ring-line-height);
-  --ring-button-icon-line-height: calc(var(--ring-unit) * 2);
 }
 
 .heightL {
@@ -35,10 +36,16 @@
   --ring-button-padding-block: calc(var(--ring-unit) * 0.75);
   --ring-button-font-size: var(--ring-font-size);
   --ring-button-line-height: var(--ring-line-height);
-  --ring-button-icon-line-height: calc(var(--ring-unit) * 2);
 }
 
 .button {
+  --ring-button-default-background-color: transparent;
+  --ring-button-background-color: var(--ring-button-default-background-color);
+  --ring-button-hover-background-color: var(--ring-content-background-color);
+  --ring-button-pressed-background-color: var(--ring-selected-background-color);
+  --ring-button-active-background-color: var(--ring-hover-background-color);
+  --ring-button-disabled-background-color: var(--ring-button-default-background-color);
+
   box-sizing: border-box;
   margin: 0;
 
@@ -50,10 +57,14 @@
   white-space: nowrap;
   text-decoration: none;
 
+  color: var(--ring-button-text-color);
+
   border: 0;
   border-radius: var(--ring-border-radius);
   outline: 0;
 
+  background-color: var(--ring-button-background-color);
+
   font-family: var(--ring-font-family), sans-serif;
 
   &:hover,
@@ -71,8 +82,14 @@
 }
 
 .block {
-  --ring-button-background-color: var(--ring-content-background-color);
-  --ring-button-border-color: var(--ring-borders-color);
+  --ring-button-default-background-color: var(--ring-content-background-color);
+  --ring-button-default-border-color: var(--ring-borders-color);
+  --ring-button-border-color: var(--ring-button-default-border-color);
+  --ring-button-hover-border-color: var(--ring-border-hover-color);
+  --ring-button-pressed-border-color: var(--ring-border-hover-color);
+  --ring-button-active-border-color: var(--ring-main-color);
+  --ring-button-disabled-border-color: var(--ring-border-disabled-color);
+  --ring-button-text-color: var(--ring-text-color);
   --ring-button-padding-inline: calc(var(--ring-unit) * 2);
 
   display: inline-block;
@@ -80,21 +97,19 @@
   height: var(--ring-button-height);
   padding: var(--ring-button-padding-block) var(--ring-button-padding-inline);
 
-  color: var(--ring-text-color);
-
-  background-color: var(--ring-button-background-color);
   box-shadow: var(--ring-button-shadow) var(--ring-button-border-color);
 
   font-size: var(--ring-button-font-size);
   line-height: var(--ring-button-line-height);
 
   &:hover {
-    --ring-button-border-color: var(--ring-border-hover-color);
+    --ring-button-background-color: var(--ring-button-hover-background-color);
+    --ring-button-border-color: var(--ring-button-hover-border-color);
   }
 
   &:active {
-    --ring-button-background-color: var(--ring-selected-background-color);
-    --ring-button-border-color: var(--ring-border-hover-color);
+    --ring-button-background-color: var(--ring-button-pressed-background-color);
+    --ring-button-border-color: var(--ring-button-pressed-border-color);
   }
 
   &:focus-visible {
@@ -102,17 +117,21 @@
       var(--ring-button-shadow) var(--ring-button-focus-border-color),
       0 0 0 1px var(--ring-button-focus-border-color);
   }
+
+  &.heightS {
+    --ring-button-icon-line-height: calc(var(--ring-unit) * 1.5);
+  }
 }
 
 .inline {
+  --ring-button-text-color: var(--ring-action-link-color);
+  --ring-button-background-color: transparent;
+
   display: inline;
 
   margin: 0;
   padding: 0;
 
-  color: var(--ring-action-link-color);
-  background: transparent;
-
   font-size: inherit;
   line-height: inherit;
 
@@ -124,10 +143,6 @@
 .icon {
   margin-right: calc(var(--ring-unit) * 0.5);
 
-  transition: color var(--ring-ease);
-
-  color: inherit;
-
   line-height: var(--ring-button-icon-line-height);
 }
 
@@ -135,130 +150,146 @@
   margin-top: -1px;
 }
 
-.inline .icon {
-  color: var(--ring-main-color);
-}
-
-.withNormalIcon .icon {
-  color: var(--ring-icon-color);
+.withNormalIcon {
+  --ring-button-text-color: var(--ring-secondary-color);
 }
 
 .inline {
   &:hover,
   &:active,
   &.active {
-    color: var(--ring-link-hover-color);
-
-    & .icon {
-      color: inherit;
-    }
+    --ring-button-text-color: var(--ring-link-hover-color);
   }
 }
 
-.active.block {
-  --ring-button-background-color: var(--ring-hover-background-color);
-  --ring-button-border-color: var(--ring-main-color);
+.active {
+  --ring-button-disabled-background-color: var(--ring-hover-background-color);
+  --ring-button-disabled-border-color: var(--ring-border-disabled-active-color);
 
   transition: none;
 }
 
-.danger {
-  --ring-button-focus-border-color: var(--ring-button-danger-hover-color);
-
-  color: var(--ring-error-color);
-
-  &:active,
-  &.active {
-    --ring-button-background-color: var(--ring-button-danger-active-color);
-  }
-
-  &:active,
-  &.active,
-  &:hover {
-    --ring-button-border-color: var(--ring-button-danger-hover-color);
-  }
+.active.block {
+  --ring-button-background-color: var(--ring-button-active-background-color);
+  --ring-button-border-color: var(--ring-button-active-border-color);
 }
 
 .disabled {
   cursor: auto;
 
-  &,
-  &:hover,
-  &:active {
-    --ring-button-background-color: var(--ring-disabled-background-color);
-    --ring-button-border-color: var(--ring-border-disabled-color);
+  color: var(--ring-button-disabled-text-color);
+  background-color: var(--ring-button-disabled-background-color);
+  box-shadow: var(--ring-button-shadow) var(--ring-button-disabled-border-color);
+}
 
-    color: var(--ring-disabled-color);
+.danger {
+  --ring-button-pressed-background-color: var(--ring-button-danger-active-color);
+  --ring-button-active-background-color: var(--ring-button-danger-active-color);
+  --ring-button-focus-border-color: var(--ring-removed-background-color);
+  --ring-button-hover-border-color: var(--ring-button-danger-hover-color);
+  --ring-button-pressed-border-color: var(--ring-button-danger-hover-color);
+  --ring-button-active-border-color: var(--ring-button-danger-hover-color);
+  --ring-button-text-color: var(--ring-error-color);
+  --ring-button-disabled-text-color: var(--ring-removed-background-color);
+  --ring-button-loader-components: var(--ring-main-error-components);
+}
 
-    & .icon {
-      color: var(--ring-icon-disabled-color);
-    }
-  }
+.flat {
+  --ring-button-default-border-color: transparent;
+  --ring-button-hover-border-color: transparent;
+  --ring-button-pressed-border-color: transparent;
+  --ring-button-active-border-color: transparent;
+  --ring-button-disabled-border-color: transparent;
+}
 
-  &.active {
-    --ring-button-background-color: var(--ring-disabled-selected-background-color);
-    --ring-button-border-color: var(--ring-border-selected-disabled-color);
-  }
+.whiteText {
+  --ring-button-text-color: var(--ring-white-text-color);
+  --ring-button-disabled-text-color: var(--ring-button-white-text-disabled-color);
+  --ring-button-loader-components: var(--ring-white-text-components);
 }
 
 .primaryBlock {
-  --ring-button-background-color: var(--ring-main-color);
-  --ring-button-border-color: transparent;
+  --ring-button-default-background-color: var(--ring-button-primary-background-color);
+  --ring-button-hover-background-color: var(--ring-main-hover-color);
+  --ring-button-pressed-background-color: var(--ring-button-primary-background-color);
+  --ring-button-active-background-color: var(--ring-button-primary-background-color);
+  --ring-button-disabled-background-color: var(--ring-border-disabled-active-color);
+  --ring-button-pressed-border-color: var(--ring-button-primary-border-color);
+  --ring-button-active-border-color: var(--ring-button-primary-border-color);
+
+  composes: flat;
+  composes: whiteText;
+}
 
-  color: var(--ring-white-text-color);
+.success {
+  --ring-button-default-background-color: var(--ring-main-success-color);
+  --ring-button-hover-background-color: var(--ring-main-success-hover-color);
+  --ring-button-pressed-background-color: var(--ring-main-success-hover-color);
+  --ring-button-active-background-color: var(--ring-main-success-hover-color);
+  --ring-button-disabled-background-color: var(--ring-added-background-color);
+  --ring-button-focus-border-color: var(--ring-border-hover-success-color);
+  --ring-button-pressed-border-color: var(--ring-success-color);
+  --ring-button-active-border-color: var(--ring-success-color);
 
-  &:hover {
-    --ring-button-background-color: var(--ring-main-hover-color);
-    --ring-button-border-color: transparent;
-  }
 
-  &:focus-visible,
-  &:active,
-  &.active {
-    --ring-button-background-color: var(--ring-button-primary-background-color);
-  }
+  composes: flat;
+  composes: whiteText;
+}
 
-  &:active,
-  &.active {
-    --ring-button-border-color: var(--ring-button-primary-border-color);
-  }
+.error {
+  --ring-button-default-background-color: var(--ring-main-error-color);
+  --ring-button-hover-background-color: var(--ring-main-error-hover-color);
+  --ring-button-pressed-background-color: var(--ring-main-error-hover-color);
+  --ring-button-active-background-color: var(--ring-main-error-hover-color);
+  --ring-button-disabled-background-color: var(--ring-removed-background-color);
+  --ring-button-focus-border-color: var(--ring-border-hover-error-color);
+  --ring-button-pressed-border-color: var(--ring-error-color);
+  --ring-button-active-border-color: var(--ring-error-color);
+
+  composes: flat;
+  composes: whiteText;
+}
 
-  &.disabled {
-    --ring-button-background-color: var(--ring-border-disabled-active-color);
-    --ring-button-border-color: transparent;
+.secondary {
+  --ring-button-default-background-color: var(--ring-tag-background-color);
+  --ring-button-hover-background-color: var(--ring-tag-hover-background-color);
+  --ring-button-disabled-background-color: var(--ring-disabled-background-color);
+  --ring-button-loader-components: var(--ring-secondary-components);
 
-    color: var(--ring-button-flat-disabled-color);
+  composes: flat;
+}
 
-    & .icon {
-      color: var(--ring-button-flat-disabled-color);
-    }
-  }
+.ghost {
+  --ring-button-default-background-color: transparent;
+  --ring-button-hover-background-color: var(--ring-tag-hover-background-color);
+  --ring-button-text-color: var(--ring-secondary-color);
 
-  &.loader {
-    color: var(--ring-white-text-color);
-  }
+  composes: flat;
 
-  & .loaderBackground {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+  &.inline {
+    &:hover {
+    --ring-button-background-color: var(--ring-tag-background-color);
+    }
 
-    border-radius: var(--ring-border-radius);
-    background-color: var(--ring-main-color);
-
-    &::before {
-      background-image: linear-gradient(
-        to right,
-        transparent,
-        var(--ring-button-loader-background) 40%,
-        transparent 80%
-      );
+    &:active {
+      --ring-button-background-color: var(--ring-button-pressed-background-color);
+    }
+
+    &.active {
+      --ring-button-background-color: var(--ring-button-active-background-color);
     }
   }
+
+  &.block {
+    --ring-button-loader-components: var(--ring-secondary-components);
+  }
 }
 
 .iconOnly {
+  &.inline {
+    line-height: var(--ring-button-icon-line-height);
+  }
+
   &.heightS {
     --ring-button-padding-block: calc(var(--ring-unit) * 0.75);
     --ring-button-padding-inline: calc(var(--ring-unit) * 0.75);
@@ -287,27 +318,17 @@
   }
 }
 
-.danger .icon {
-  color: var(--ring-icon-error-color);
-}
-
 .loader {
   position: relative;
   z-index: 0;
 
   cursor: auto;
 
-  background-color: transparent;
-
-  &:hover {
-    --ring-button-border-color: var(--ring-borders-color);
-  }
+  background-color: var(--ring-button-default-background-color);
 }
 
-.loader.inline {
-  animation-name: text-loading;
-  animation-duration: 1200ms;
-  animation-iteration-count: infinite;
+.loader.block {
+  box-shadow: var(--ring-button-shadow) var(--ring-button-default-border-color);
 }
 
 .loaderBackground {
@@ -320,7 +341,8 @@
 
   overflow: hidden;
 
-  border-radius: var(--ring-border-radius-small);
+  border-radius: calc(var(--ring-border-radius) - 1px);
+  background-color: var(--ring-button-default-background-color);
 
   &::before {
     display: block;
@@ -333,9 +355,9 @@
 
     background-image: linear-gradient(
       to right,
-      var(--ring-content-background-color),
-      var(--ring-selected-background-color) 40%,
-      var(--ring-content-background-color) 80%
+      transparent,
+      rgba(var(--ring-button-loader-components), 0.4) 40%,
+      transparent 80%
     );
 
     background-repeat: repeat;
@@ -343,6 +365,16 @@
   }
 }
 
+.flat .loaderBackground,
+.inline .loaderBackground {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    border-radius: var(--ring-border-radius);
+}
+
 .delayed::after {
   content: "…";
 }
@@ -358,29 +390,15 @@
     margin-top: -1px;
     margin-right: calc(var(--ring-unit) * -0.5);
     margin-left: 2px;
-
-    transition: color var(--ring-ease);
-
-    color: var(--ring-icon-secondary-color);
   }
 
   .inline & .glyph {
     vertical-align: -2px;
   }
 
-  .primary & {
-    color: unset;
-  }
-
   line-height: var(--ring-button-icon-line-height);
 }
 
-.block:hover .dropdownIcon {
-  transition: none;
-
-  color: var(--ring-main-color);
-}
-
 @keyframes progress {
   from {
     transform: translateX(-64px); /* must be in Sync with loaderWidth, but CSS var doesn't work due to RG-2438 */
@@ -390,9 +408,3 @@
     transform: translateX(0);
   }
 }
-
-@keyframes text-loading {
-  50% {
-    opacity: 0.5;
-  }
-}

package/components/button/button.d.ts

@@ -10,6 +10,10 @@ export interface ButtonBaseProps {
     delayed?: boolean | null | undefined;
     loader?: boolean | null | undefined;
     primary?: boolean | null | undefined;
+    success?: boolean | null | undefined;
+    error?: boolean | null | undefined;
+    secondary?: boolean | null | undefined;
+    ghost?: boolean | null | undefined;
     short?: boolean | null | undefined;
     /**
      * @deprecated Use inline instead
@@ -45,6 +49,6 @@ export declare class Button extends PureComponent<ButtonProps> {
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export { Size as IconSize };
-export type ContainerProps<T extends ButtonProps> = JSX.LibraryManagedAttributes<typeof Button, T>;
+export type ContainerProps<T extends ButtonProps> = React.JSX.LibraryManagedAttributes<typeof Button, T>;
 export type ButtonAttrs = ContainerProps<ButtonButtonProps> | ContainerProps<ButtonLinkProps>;
 export default Button;

package/components/button/button.js

@@ -23,7 +23,7 @@ export class Button extends PureComponent {
     render() {
         const { 
         // Modifiers
-        active, danger, delayed, loader, primary, short, text, dropdown, height, 
+        active, danger, delayed, loader, primary, success, error, secondary, ghost, short, text, dropdown, height, 
         // Props
         icon, iconSize, iconClassName, iconSuppressSizeWarning, className, children, inline, ...props } = this.props;
         const isInline = inline ?? text ?? icon != null;
@@ -35,12 +35,12 @@ export class Button extends PureComponent {
             inline: isInline,
             height: height ?? this.context,
         });
-        const content = (_jsxs(_Fragment, { children: [icon && (_jsx(Icon, { className: classNames(styles.icon, iconClassName), glyph: icon, size: iconSize, loading: loader && isInline, suppressSizeWarning: iconSuppressSizeWarning })), children, dropdown && _jsx(Icon, { glyph: isInline ? chevron12pxDown : chevronDown, className: styles.dropdownIcon })] }));
+        const content = (_jsxs(_Fragment, { children: [icon && (_jsx(Icon, { className: classNames(styles.icon, iconClassName), glyph: icon, size: iconSize, suppressSizeWarning: iconSuppressSizeWarning })), children, dropdown && _jsx(Icon, { glyph: isInline ? chevron12pxDown : chevronDown, className: styles.dropdownIcon })] }));
         const commonProps = {
             tabIndex: loader ? -1 : 0,
             ...props,
             className: classes,
-            children: (_jsxs(_Fragment, { children: [loader && !isInline && _jsx("div", { className: styles.loaderBackground }), content] })),
+            children: (_jsxs(_Fragment, { children: [loader && _jsx("div", { className: styles.loaderBackground }), content] })),
         };
         return commonProps.href != null ? (_jsx(ClickableLink, { ...commonProps })) : (_jsx("button", { ref: this.buttonRef, type: "button", ...commonProps }));
     }

package/components/button/button__classes.d.ts

@@ -1,2 +1,2 @@
 import { ButtonProps } from './button';
-export declare function getButtonClasses({ className, active, disabled, loader, primary, short, inline, danger, delayed, icon, height, children, }: ButtonProps): string;
+export declare function getButtonClasses({ className, active, disabled, loader, primary, success, error, secondary, ghost, short, inline, danger, delayed, icon, height, children, }: ButtonProps): string;

package/components/button/button__classes.js

@@ -1,17 +1,20 @@
 import classNames from 'classnames';
 import styles from './button.css';
-export function getButtonClasses({ className, active, disabled, loader, primary, short, inline, danger, delayed, icon, height, children, }) {
+export function getButtonClasses({ className, active, disabled, loader, primary, success, error, secondary, ghost, short, inline, danger, delayed, icon, height, children, }) {
     const iconOnly = icon && !children;
     const primaryBlock = primary && !inline;
-    const withNormalIcon = icon && !active && !danger && !primary && !disabled && (!inline || iconOnly);
+    const withNormalIcon = iconOnly && inline && !active && !danger && !primary && !disabled;
     return classNames(styles.button, className, styles[`height${height}`], inline ? styles.inline : styles.block, {
         [styles.active]: active,
         [styles.danger]: danger,
         [styles.delayed]: delayed,
         [styles.withNormalIcon]: withNormalIcon,
         [styles.loader]: loader,
-        [styles.primary]: primary,
         [styles.primaryBlock]: primaryBlock,
+        [styles.success]: success,
+        [styles.error]: error,
+        [styles.secondary]: secondary,
+        [styles.ghost]: ghost,
         [styles.short]: short,
         [styles.disabled]: disabled,
         [styles.iconOnly]: iconOnly,

package/components/button-group/button-group.css

@@ -1,6 +1,6 @@
 @import "../global/variables.css";
 
-@value button, active, primary from "../button/button.css";
+@value button, active, flat from "../button/button.css";
 
 :root {
   --ring-button-group-default-z-index: 1;
@@ -20,19 +20,23 @@
 }
 
 .buttonGroup {
+  --ring-button-group-button-border-color: var(--ring-borders-color);
+
   composes: common;
   composes: buttonGroup from "../button-toolbar/button-toolbar.css";
 
   border-radius: var(--ring-border-radius);
 
-  box-shadow: var(--ring-button-shadow) var(--ring-borders-color);
+  box-shadow: var(--ring-button-shadow) var(--ring-button-group-button-border-color);
 
   line-height: normal;
 }
 
-.buttonGroup .button {
-  --ring-button-group-button-border-color: var(--ring-borders-color);
+.disabled {
+  --ring-button-group-button-border-color: var(--ring-border-disabled-color);
+}
 
+.buttonGroup .button {
   position: relative;
 
   transition: none;
@@ -55,8 +59,6 @@
 
     content: "";
 
-    background-color: var(--ring-disabled-background-color);
-
     box-shadow:
       0 1px var(--ring-button-group-button-border-color) inset,
       0 -1px var(--ring-button-group-button-border-color) inset;
@@ -139,7 +141,7 @@
 }
 
 .buttonGroup .button.active[disabled] {
-  box-shadow: var(--ring-button-shadow) var(--ring-border-selected-disabled-color);
+  box-shadow: var(--ring-button-shadow) var(--ring-border-disabled-active-color);
 }
 /* stylelint-enable */
 
@@ -204,11 +206,11 @@
 }
 /* stylelint-enable */
 
-.split .primary:not(:last-child) {
+.split .flat:not(:last-child) {
   margin-right: 1px;
 }
 
-.split .primary:not(:first-child) {
+.split .flat:not(:first-child) {
   margin-left: 1px;
 }