@jetbrains/ring-ui 7.0.61 → 7.0.62

package/components/global/variables.css

@@ -116,10 +116,12 @@
   --ring-link-hover-color: rgb(var(--ring-link-hover-components)); /* #2E55A3 */
   --ring-error-components: 204, 54, 69;
   --ring-error-color: rgb(var(--ring-error-components)); /* #CC3645 */
-  --ring-warning-components: 184, 85, 22;
-  --ring-warning-color: rgb(var(--ring-warning-components)); /* #B85516 */ /* Prefer using warning icon + regular text color */
+  --ring-warning-components: 182, 84, 22;
+  --ring-warning-color: rgb(var(--ring-warning-components)); /* #B65416 */ /* Prefer using warning icon + regular text color */
   --ring-success-components: 31, 117, 54;
   --ring-success-color: rgb(var(--ring-success-components)); /* #1F7536 */ /* Prefer using success icon + regular text color */
+  --ring-purple-text-components: 131, 77, 240;
+  --ring-purple-text-color: rgb(var(--ring-purple-text-components)); /* #834DF0 */
   --ring-text-components: 39, 40, 46;
   --ring-text-color: rgb(var(--ring-text-components)); /* #27282E */
   --ring-active-text-color: var(--ring-text-color);

package/components/global/variables_dark.css

@@ -41,8 +41,8 @@
   --ring-main-error-color: rgb(var(--ring-main-error-components)); /* #BD5757 */
   --ring-main-error-hover-components: 156, 78, 78;
   --ring-main-error-hover-color: rgb(var(--ring-main-error-hover-components)); /* #9C4E4E */
-  --ring-main-warning-components: 224, 136, 85;
-  --ring-main-warning-color: rgb(var(--ring-main-warning-components)); /* #E08855 */
+  --ring-main-warning-components: 224, 137, 87;
+  --ring-main-warning-color: rgb(var(--ring-main-warning-components)); /* #E08957 */
   --ring-main-warning-hover-components: 199, 125, 85;
   --ring-main-warning-hover-color: rgb(var(--ring-main-warning-hover-components)); /* #C77D55 */
   --ring-main-purple-components: 149, 90, 224;
@@ -103,10 +103,12 @@
   --ring-link-hover-color: rgb(var(--ring-link-hover-components)); /* #6B9BFA */
   --ring-error-components: 227, 119, 116;
   --ring-error-color: rgb(var(--ring-error-components)); /* #E37774 */
-  --ring-warning-components: 224, 136, 85;
-  --ring-warning-color: rgb(var(--ring-warning-components)); /* #E08855 */ /* Prefer using warning icon + regular text color */
+  --ring-warning-components: 224, 137, 87;
+  --ring-warning-color: rgb(var(--ring-warning-components)); /* #E08957 */ /* Prefer using warning icon + regular text color */
   --ring-success-components: 95, 173, 101;
   --ring-success-color: rgb(var(--ring-success-components)); /* #5FAD65 */ /* Prefer using success icon + regular text color */
+  --ring-purple-text-components: 181, 137, 236;
+  --ring-purple-text-color: rgb(var(--ring-purple-text-components)); /* #B589EC */
   --ring-text-components: 255, 255, 255;
   --ring-text-color: rgb(var(--ring-text-components)); /* #FFFFFF */
   --ring-active-text-components: 255, 255, 255;
@@ -175,8 +177,8 @@
   --ring-warning-container-light-color: rgb(var(--ring-warning-container-light-components)); /* #352A27 */
   --ring-highlight-container-light-components: 49, 42, 35;
   --ring-highlight-container-light-color: rgb(var(--ring-highlight-container-light-components)); /* #312A23 */
-  --ring-grey-container-light-components: 57, 59, 64;
-  --ring-grey-container-light-color: rgb(var(--ring-grey-container-light-components)); /* #393B40 */
+  --ring-grey-container-light-components: 43, 45, 48;
+  --ring-grey-container-light-color: rgb(var(--ring-grey-container-light-components)); /* #2B2D30 */
   --ring-purple-container-light-components: 43, 37, 49;
   --ring-purple-container-light-color: rgb(var(--ring-purple-container-light-components)); /* #2B2531 */
   --ring-highlight-fill-components: 214, 174, 88;

package/components/select/select.d.ts

@@ -259,6 +259,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     private _getLabel;
     private _getPlaceholder;
     _getSelectedString(): string | null;
+    private getHeight;
     private _getIcons;
     private _getAvatar;
     filter?: HTMLInputElement | null;

package/components/select/select.js

@@ -733,11 +733,14 @@ export default class Select extends Component {
             return this.state.selected != null ? getItemLabel(this.state.selected) : null;
         }
     }
+    getHeight() {
+        return this.props.height || (typeof this.context === 'function' ? this.context() : this.context);
+    }
     _getIcons() {
         const { selected } = this.state;
         const { disabled, clear, hideArrow } = this.props;
         const icons = [];
-        const height = this.props.height || (typeof this.context === 'function' ? this.context() : this.context);
+        const height = this.getHeight();
         if (!Array.isArray(selected) && selected?.icon) {
             icons.push(_jsx("button", { title: "Toggle options popup", type: "button", className: styles.selectedIcon, disabled: this.props.disabled, onClick: this._clickHandler, style: { backgroundImage: `url(${selected.icon})` } }, "selected"));
         }
@@ -775,7 +778,7 @@ export default class Select extends Component {
         const dataTest = this.props['data-test'];
         const { selectedLabel } = this.props;
         const { shortcutsEnabled } = this.state;
-        const classes = classNames(styles.select, 'ring-js-shortcuts', this.props.className, styles[`height${this.props.height || this.context}`], {
+        const classes = classNames(styles.select, 'ring-js-shortcuts', this.props.className, styles[`height${this.getHeight()}`], {
             [styles[`size${this.props.size}`]]: this.props.type !== Type.INLINE,
             [styles.disabled]: this.props.disabled,
         });

package/components/tag/tag.css

@@ -3,6 +3,15 @@
 /* ensure styles order */
 @import "../link/link.css";
 
+:root,
+:host {
+  --ring-error-tag-text-color: var(--ring-main-error-hover-color);
+}
+
+:global(.ring-ui-theme-dark) {
+  --ring-error-tag-text-color: var(--ring-error-color);
+}
+
 .tag {
   --ring-tag-max-height: 20px;
 
@@ -23,7 +32,7 @@
 
   vertical-align: top;
 
-  color: var(--ring-text-color);
+  color: var(--ring-tag-text-color);
 
   border: none;
   border-radius: var(--ring-border-radius);
@@ -52,8 +61,80 @@
 
   border-radius: var(--ring-border-radius);
 
-  background-color: var(--ring-tag-background-color);
+  background-color: var(--ring-tag-container-background-color);
+}
+
+.default {
+  --ring-tag-container-background-color: var(--ring-tag-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-tag-hover-background-color);
+  --ring-tag-text-color: var(--ring-text-color);
+  --ring-tag-icon-color: var(--ring-secondary-color);
+  --ring-tag-container-outline-background-color: var(--ring-grey-container-light-color);
+  --ring-tag-container-outline-hover-background-color: var(--ring-tag-background-color);
+  --ring-tag-outline-color: var(--ring-line-color);
+  --ring-tag-outline-hover-color: var(--ring-borders-color);
+}
+
+.main {
+  --ring-tag-container-background-color: var(--ring-hover-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-selected-background-color);
+  --ring-tag-text-color: var(--ring-link-color);
+  --ring-tag-icon-color: var(--ring-link-color);
+  --ring-tag-container-outline-background-color: var(--ring-main-container-light-color);
+  --ring-tag-container-outline-hover-background-color: var(--ring-hover-background-color);
+  --ring-tag-outline-color: var(--ring-border-hover-color);
+  --ring-tag-outline-hover-color: var(--ring-border-accent-color);
+}
 
+.success {
+  --ring-tag-container-background-color: var(--ring-added-subtle-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-added-background-color);
+  --ring-tag-text-color: var(--ring-success-color);
+  --ring-tag-icon-color: var(--ring-icon-success-color);
+  --ring-tag-container-outline-background-color: var(--ring-success-container-light-color);
+  --ring-tag-container-outline-hover-background-color: var(--ring-added-subtle-background-color);
+  --ring-tag-outline-color: var(--ring-success-border-color);
+  --ring-tag-outline-hover-color: var(--ring-success-border-hover-color);
+}
+
+.warning {
+  --ring-tag-container-background-color: var(--ring-warning-subtle-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-warning-background-color);
+  --ring-tag-text-color: var(--ring-warning-color);
+  --ring-tag-icon-color: var(--ring-icon-warning-color);
+  --ring-tag-container-outline-background-color: var(--ring-warning-container-light-color);
+  --ring-tag-container-outline-hover-background-color: var(--ring-warning-subtle-background-color);
+  --ring-tag-outline-color: var(--ring-warning-border-color);
+  --ring-tag-outline-hover-color: var(--ring-warning-border-hover-color);
+}
+
+.error {
+  --ring-tag-container-background-color: var(--ring-removed-subtle-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-removed-background-color);
+  --ring-tag-text-color: var(--ring-error-tag-text-color);
+  --ring-tag-icon-color: var(--ring-icon-error-color);
+  --ring-tag-container-outline-background-color: var(--ring-error-container-light-color);
+  --ring-tag-container-outline-hover-background-color: var(--ring-removed-subtle-background-color);
+  --ring-tag-outline-color: var(--ring-error-border-color);
+  --ring-tag-outline-hover-color: var(--ring-error-border-hover-color);
+}
+
+.purple {
+  --ring-tag-container-background-color: var(--ring-purple-subtle-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-purple-background-color);
+  --ring-tag-text-color: var(--ring-purple-text-color);
+  --ring-tag-icon-color: var(--ring-main-purple-color);
+  --ring-tag-container-outline-background-color: var(--ring-purple-container-light-color);
+  --ring-tag-container-outline-hover-background-color: var(--ring-purple-subtle-background-color);
+  --ring-tag-outline-color: var(--ring-purple-border-color);
+  --ring-tag-outline-hover-color: var(--ring-purple-border-hover-color);
+}
+
+.outline {
+  --ring-tag-container-background-color: var(--ring-tag-container-outline-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-tag-container-outline-hover-background-color);
+
+  box-shadow: inset 0 0 0 1px var(--ring-tag-outline-color);
 }
 
 .focused,
@@ -67,9 +148,10 @@
 .focused,
 .tag:focus-visible,
 .container:hover {
-  transition: none;
+  --ring-tag-outline-color: var(--ring-tag-outline-hover-color);
+  --ring-tag-container-background-color: var(--ring-tag-container-hover-background-color);
 
-  background-color: var(--ring-tag-hover-background-color);
+  transition: none;
 }
 
 .content {
@@ -84,6 +166,8 @@
 }
 
 .remove {
+  --ring-button-text-color: var(--ring-secondary-color);
+
   position: absolute;
   z-index: 1;
   top: 2px;
@@ -95,15 +179,11 @@
   line-height: calc(var(--ring-unit) * 2);
 }
 
-.removeIcon.removeIcon {
-  color: var(--ring-secondary-color);
-}
-
 .icon {
   margin-right: calc(var(--ring-unit) / 2);
   margin-left: calc(var(--ring-unit) * -0.5);
 
-  color: var(--ring-secondary-color);
+  color: var(--ring-tag-icon-color);
 
   && svg {
     vertical-align: -3.5px;

package/components/tag/tag.d.ts

@@ -6,6 +6,14 @@ export interface TagRenderProps extends HTMLAttributes<HTMLElement> {
     ref: RefCallback<HTMLElement>;
     'data-test': string;
 }
+export declare enum TagType {
+    DEFAULT = "default",
+    MAIN = "main",
+    SUCCESS = "success",
+    WARNING = "warning",
+    ERROR = "error",
+    PURPLE = "purple"
+}
 export interface TagProps {
     onRemove?: ((event: React.MouseEvent<HTMLElement>) => void) | null;
     onClick: (event: React.MouseEvent<HTMLElement>) => void;
@@ -22,6 +30,8 @@ export interface TagProps {
     rgTagTitle?: string | undefined;
     textColor?: string | undefined;
     backgroundColor?: string | undefined;
+    outline?: boolean;
+    tagType?: TagType;
 }
 /**
  * @name Tag
@@ -33,6 +43,7 @@ export default class Tag extends PureComponent<TagProps> {
     };
     componentDidUpdate(prevProps: TagProps): void;
     componentWillUnmount(): void;
+    static Type: typeof TagType;
     onDocumentClick: (event: MouseEvent) => void;
     tagNode?: HTMLElement | null;
     tagRef: (el: HTMLElement | null) => void;

package/components/tag/tag.js

@@ -6,6 +6,15 @@ import Icon from '../icon/icon';
 import Button from '../button/button';
 import { ControlsHeight } from '../global/controls-height';
 import styles from './tag.css';
+export var TagType;
+(function (TagType) {
+    TagType["DEFAULT"] = "default";
+    TagType["MAIN"] = "main";
+    TagType["SUCCESS"] = "success";
+    TagType["WARNING"] = "warning";
+    TagType["ERROR"] = "error";
+    TagType["PURPLE"] = "purple";
+})(TagType || (TagType = {}));
 /**
  * @name Tag
  */
@@ -16,6 +25,7 @@ export default class Tag extends PureComponent {
         disabled: false,
         focused: false,
         render: props => _jsx("button", { type: "button", ...props }),
+        tagType: TagType.DEFAULT,
     };
     state = {
         focused: false,
@@ -33,6 +43,7 @@ export default class Tag extends PureComponent {
         this.setDocumentClickListener(false);
         this.setState({ focused: false });
     }
+    static Type = TagType;
     onDocumentClick = (event) => {
         if (this.tagNode) {
             this.setState({ focused: this.tagNode === event.target });
@@ -77,7 +88,7 @@ export default class Tag extends PureComponent {
     }
     renderRemoveIcon() {
         if (!this.props.readOnly && this.props.onRemove) {
-            return (_jsx(Button, { title: "Remove", icon: closeIcon, "data-test": "ring-tag-remove", className: styles.remove, iconClassName: styles.removeIcon, onClick: this.props.onRemove, style: { '--ring-secondary-color': this.props.textColor }, height: ControlsHeight.M }));
+            return (_jsx(Button, { title: "Remove", icon: closeIcon, "data-test": "ring-tag-remove", className: styles.remove, onClick: this.props.onRemove, style: { '--ring-secondary-color': this.props.textColor }, height: ControlsHeight.M }));
         }
         return null;
     }
@@ -88,7 +99,9 @@ export default class Tag extends PureComponent {
             [styles.withRemove]: !this.props.readOnly && this.props.onRemove,
         }, this.props.className);
         const { backgroundColor, textColor, render } = this.props;
-        return (_jsxs("span", { className: classNames(styles.container, this.props.containerClassName), children: [render({
+        return (_jsxs("span", { className: classNames(styles.container, this.props.containerClassName, styles[this.props.tagType], {
+                [styles.outline]: this.props.outline,
+            }), children: [render({
                     'data-test': 'ring-tag',
                     className: classes,
                     ref: this.tagRef,

package/components/toggle/toggle.css

@@ -190,6 +190,10 @@
   }
 }
 
+.input[disabled] + .switch {
+  --ring-toggle-item-color: var(--ring-content-background-color);
+}
+
 /* stylelint-disable-next-line selector-max-specificity */
 .input:checked[disabled] + .switch {
   --ring-toggle-background-color: var(--ring-border-disabled-active-color);
@@ -197,7 +201,6 @@
 
 /* stylelint-disable-next-line selector-max-specificity */
 .input[disabled]:not(:checked) + .switch {
-  --ring-toggle-item-color: var(--ring-content-background-color);
   --ring-toggle-background-color: var(--ring-disabled-background-color);
   --ring-toggle-border-color: var(--ring-border-disabled-color);
   --ring-switch-border-color: var(--ring-border-disabled-color);

package/components/user-card/card.js

@@ -5,7 +5,7 @@ import copyIcon from '@jetbrains/icons/copy';
 import Avatar, { Size as AvatarSize } from '../avatar/avatar';
 import Link from '../link/link';
 import clipboard from '../clipboard/clipboard';
-import Tag from '../tag/tag';
+import Tag, { TagType } from '../tag/tag';
 import Icon, { Size as IconSize } from '../icon/icon';
 import { I18nContext } from '../i18n/i18n-context';
 import Tooltip from '../tooltip/tooltip';
@@ -25,6 +25,6 @@ export default class UserCard extends PureComponent {
         const userActiveStatusClasses = classNames(styles.userActiveStatus, user.online ? styles.online : '');
         return (_jsx("div", { ...restProps, className: classes, children: _jsxs("div", { className: styles.userInformationContainer, children: [_jsxs("div", { className: styles.userAvatar, children: [_jsx(Avatar, { size: AvatarSize.Size56, url: user.avatarUrl, username: user.name, round: true }), !!avatarInfo && avatarInfo] }), _jsxs("div", { className: styles.userInformation, children: [_jsxs("div", { className: styles.userInformationGeneral, children: [_jsxs("div", { className: styles.userNameLine, children: [user.href && (_jsx(Link, { href: user.href, className: styles.userName, "data-test": "user-card-link", children: user.name })), !user.href && _jsx("span", { className: styles.userName, children: user.name }), typeof user.online === 'boolean' && (_jsx("span", { className: userActiveStatusClasses, title: user.online
                                                     ? (translations?.online ?? translate('online'))
-                                                    : (translations?.offline ?? translate('offline')) })), !!info && _jsx("span", { className: styles.userNameInfo, children: info }), user.banned && (_jsx(Tooltip, { title: user.banReason, children: _jsx(Tag, { className: styles.banLabel, children: translations?.banned ?? translate('banned') }) }))] }), _jsx("div", { className: styles.userLogin, children: user.login }), user.email && (_jsxs("span", { className: styles.userEmailWrapper, children: [_jsx(Link, { href: `mailto:${user.email}`, title: `mailto:${user.email}`, target: "_blank", className: styles.userEmail, children: user.email }), user.unverifiedEmail && (_jsx("span", { className: styles.unverifiedLabel, children: translations?.unverified ?? translate('unverified') })), _jsx(Icon, { title: translations?.copyToClipboard ?? translate('copyToClipboard'), className: styles.userCopyIcon, onClick: this.copyEmail, glyph: copyIcon, size: IconSize.Size14, suppressSizeWarning: true })] }))] }), children] })] }) }));
+                                                    : (translations?.offline ?? translate('offline')) })), !!info && _jsx("span", { className: styles.userNameInfo, children: info }), user.banned && (_jsx(Tooltip, { title: user.banReason, children: _jsx(Tag, { tagType: TagType.ERROR, children: translations?.banned ?? translate('banned') }) }))] }), _jsx("div", { className: styles.userLogin, children: user.login }), user.email && (_jsxs("span", { className: styles.userEmailWrapper, children: [_jsx(Link, { href: `mailto:${user.email}`, title: `mailto:${user.email}`, target: "_blank", className: styles.userEmail, children: user.email }), user.unverifiedEmail && (_jsx("span", { className: styles.unverifiedLabel, children: translations?.unverified ?? translate('unverified') })), _jsx(Icon, { title: translations?.copyToClipboard ?? translate('copyToClipboard'), className: styles.userCopyIcon, onClick: this.copyEmail, glyph: copyIcon, size: IconSize.Size14, suppressSizeWarning: true })] }))] }), children] })] }) }));
     }
 }

package/components/user-card/user-card.css

@@ -106,10 +106,6 @@
   margin-bottom: 3px;
 }
 
-.banLabel {
-  color: var(--ring-error-color);
-}
-
 .userActiveStatus {
   display: inline-block;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.61",
+  "version": "7.0.62",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -107,7 +107,7 @@
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
     "@jetbrains/rollup-css-plugin": "./packages/rollup-css-plugin",
     "@jetbrains/stylelint-config": "^4.0.2",
-    "@primer/octicons": "^19.17.0",
+    "@primer/octicons": "^19.18.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
@@ -125,7 +125,7 @@
     "@types/chai-dom": "1.11.3",
     "@types/eslint__js": "^9.14.0",
     "@types/markdown-it": "^14.1.2",
-    "@types/react": "^19.1.12",
+    "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
     "@types/webpack-env": "^1.18.8",
     "@vitejs/plugin-react": "^5.0.2",
@@ -152,7 +152,7 @@
     "eslint-plugin-storybook": "^9.1.5",
     "events": "^3.3.0",
     "glob": "^11.0.3",
-    "globals": "^16.3.0",
+    "globals": "^16.4.0",
     "html-webpack-plugin": "^5.6.4",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
@@ -170,16 +170,16 @@
     "react-dom": "^19.1.1",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.50.0",
+    "rollup": "^4.50.1",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
     "storybook": "9.1.5",
-    "stylelint": "^16.23.1",
+    "stylelint": "^16.24.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.14",
     "typescript": "~5.9.2",
-    "typescript-eslint": "^8.42.0",
+    "typescript-eslint": "^8.43.0",
     "vitest": "^3.2.4",
     "vitest-teamcity-reporter": "^0.3.1",
     "wallaby-webpack": "^3.9.16",
@@ -210,7 +210,7 @@
     "@babel/core": "^7.28.4",
     "@babel/preset-typescript": "^7.27.1",
     "@jetbrains/babel-preset-jetbrains": "^2.4.0",
-    "@jetbrains/icons": "^5.12.0",
+    "@jetbrains/icons": "^5.13.0",
     "@jetbrains/postcss-require-hover": "^0.2.0",
     "@types/combokeys": "^2.4.9",
     "@types/element-resize-detector": "^1.1.6",
@@ -218,7 +218,7 @@
     "@types/util-deprecate": "^1.0.4",
     "babel-loader": "10.0.0",
     "babel-plugin-transform-define": "^2.1.4",
-    "browserslist": "^4.25.4",
+    "browserslist": "^4.26.0",
     "change-case": "^4.1.1",
     "classnames": "^2.5.1",
     "combokeys": "^3.0.1",