@jetbrains/ring-ui 7.0.0-beta.9 → 7.0.1

package/components/user-agreement/service.js

@@ -14,14 +14,14 @@ export const hideMessage = 'userAgreementHide';
 const DEFAULT_CONSENT = {
     accepted: false,
     majorVersion: 0,
-    minorVersion: 0
+    minorVersion: 0,
 };
 const DEFAULT_AGREEMENT = {
     enabled: false,
     majorVersion: 0,
     minorVersion: 0,
     requiredForREST: false,
-    content: ''
+    content: '',
 };
 export default class UserAgreementService {
     config;
@@ -107,10 +107,7 @@ export default class UserAgreementService {
     };
     checkConsent = async () => {
         if (!this.checkingPromise) {
-            this.checkingPromise = Promise.all([
-                this.getUserAgreement(),
-                this.getUserConsent()
-            ]);
+            this.checkingPromise = Promise.all([this.getUserAgreement(), this.getUserConsent()]);
         }
         const [userAgreement, userConsent] = await this.checkingPromise;
         this.checkingPromise = null;
@@ -124,7 +121,7 @@ export default class UserAgreementService {
             return this._alertPromise;
         }
         this._alertPromise = new Promise((resolve, reject) => {
-            const { userAgreement, reviewNow, remindLater } = (this.config.translations || {});
+            const { userAgreement, reviewNow, remindLater } = this.config.translations || {};
             const onRemind = () => {
                 this.hideDialogAndAlert(withoutNotifications);
                 reject('Postponed');
@@ -136,8 +133,12 @@ export default class UserAgreementService {
             };
             const message = (<Group>
           <span>{userAgreement || 'User Agreement'}</span>
-          <Link onClick={onReview} data-test="review">{reviewNow || 'Review now'}</Link>
-          <Link onClick={onRemind} data-test="later">{remindLater || 'Remind me later'}</Link>
+          <Link onClick={onReview} data-test="review">
+            {reviewNow || 'Review now'}
+          </Link>
+          <Link onClick={onRemind} data-test="later">
+            {remindLater || 'Remind me later'}
+          </Link>
         </Group>);
             this.alertKey = alertService.addAlert(message, Alert.Type.WARNING, 0, { closeable: false });
         });
@@ -180,11 +181,12 @@ export default class UserAgreementService {
                     onDecline,
                     onClose,
                     translations,
-                    preview, ...restOptions
+                    preview,
+                    ...restOptions,
                 };
-                this.reactRoot.render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
-              <UserAgreement {...props}/>
-            </ControlsHeightContext.Provider>));
+                this.reactRoot.render(<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
+            <UserAgreement {...props}/>
+          </ControlsHeightContext.Provider>);
                 if (onDialogShow) {
                     onDialogShow();
                 }

package/components/user-agreement/user-agreement.js

@@ -18,10 +18,10 @@ export default class UserAgreement extends PureComponent {
         show: false,
         onAccept: noop,
         onDecline: noop,
-        onClose: noop
+        onClose: noop,
     };
     state = {
-        scrolledDown: false
+        scrolledDown: false,
     };
     onScrollToBottom = () => this.setState({ scrolledDown: true });
     render() {
@@ -34,9 +34,7 @@ export default class UserAgreement extends PureComponent {
               {children}
             </Content>
             {!preview && (<Panel>
-                {onRemindLater && !scrolledDown && (<div className={style.suggestion}>
-                    {translations?.scrollToAccept ?? translate('scrollToAccept')}
-                  </div>)}
+                {onRemindLater && !scrolledDown && (<div className={style.suggestion}>{translations?.scrollToAccept ?? translate('scrollToAccept')}</div>)}
                 <Button primary disabled={!scrolledDown} onClick={onAccept} data-test="accept">
                   {translations?.accept ?? translate('accept')}
                 </Button>

package/components/user-card/card.js

@@ -5,9 +5,10 @@ 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 badgeStyles from '../badge/badge.css';
+import Tag from '../tag/tag';
 import Icon, { Size as IconSize } from '../icon/icon';
 import { I18nContext } from '../i18n/i18n-context';
+import Tooltip from '../tooltip/tooltip';
 import styles from './user-card.css';
 export default class UserCard extends PureComponent {
     static contextType = I18nContext;
@@ -35,13 +36,13 @@ export default class UserCard extends PureComponent {
                     {user.name}
                   </Link>)}
                 {!user.href && <span className={styles.userName}>{user.name}</span>}
-                {typeof user.online === 'boolean' &&
-                (<span className={userActiveStatusClasses} title={user.online
-                        ? (translations?.online ?? translate('online'))
-                        : (translations?.offline ?? translate('offline'))}/>)}
+                {typeof user.online === 'boolean' && (<span className={userActiveStatusClasses} title={user.online
+                    ? (translations?.online ?? translate('online'))
+                    : (translations?.offline ?? translate('offline'))}/>)}
                 {!!info && <span className={styles.userNameInfo}>{info}</span>}
-                {user.banned &&
-                (<span className={classNames(badgeStyles.badge, badgeStyles.invalid)} title={user.banReason}>{translations?.banned ?? translate('banned')}</span>)}
+                {user.banned && (<Tooltip title={user.banReason}>
+                    <Tag className={styles.banLabel}>{translations?.banned ?? translate('banned')}</Tag>
+                  </Tooltip>)}
               </div>
               <div className={styles.userLogin}>{user.login}</div>
               {user.email && (<span className={styles.userEmailWrapper}>
@@ -49,8 +50,8 @@ export default class UserCard extends PureComponent {
                     {user.email}
                   </Link>
                   {user.unverifiedEmail && (<span className={styles.unverifiedLabel}>
-                        {translations?.unverified ?? translate('unverified')}
-                      </span>)}
+                      {translations?.unverified ?? translate('unverified')}
+                    </span>)}
                   <Icon title={translations?.copyToClipboard ?? translate('copyToClipboard')} className={styles.userCopyIcon} onClick={this.copyEmail} glyph={copyIcon} size={IconSize.Size14} suppressSizeWarning/>
                 </span>)}
             </div>

package/components/user-card/smart-user-card-tooltip.js

@@ -5,7 +5,7 @@ import styles from './user-card.css';
 export default class SmartUserCardTooltip extends Component {
     state = {
         user: null,
-        loading: false
+        loading: false,
     };
     loadUser = async () => {
         if (this.state.user) {
@@ -23,17 +23,15 @@ export default class SmartUserCardTooltip extends Component {
             this.setState({ loading: false });
         }
     };
-    renderNoUser = () => (this.state.loading
-        ? (<div className={styles.userCardSpaced}>
-          <LoaderInline />
-        </div>)
-        : '');
+    renderNoUser = () => this.state.loading ? (<div className={styles.userCardSpaced}>
+        <LoaderInline />
+      </div>) : ('');
     render() {
         const { user } = this.state;
         const { children, userDataSource, ...restProps } = this.props;
         const dropdownProps = {
             onMouseEnter: this.loadUser,
-            ...UserCardTooltip.defaultProps.dropdownProps
+            ...UserCardTooltip.defaultProps.dropdownProps,
         };
         return (<UserCardTooltip user={user} renderNoUser={this.renderNoUser} dropdownProps={dropdownProps} {...restProps}>
         {children}

package/components/user-card/tooltip.js

@@ -9,13 +9,13 @@ export default class UserCardTooltip extends Component {
     static defaultProps = {
         renderUserCard: (props) => {
             const { user, ...restProps } = props;
-            return user && (<UserCard user={user} {...restProps}/>);
+            return user && <UserCard user={user} {...restProps}/>;
         },
         renderNoUser: () => '',
         dropdownProps: {
             hoverShowTimeOut: DEFAULT_TIMEOUT,
-            hoverHideTimeOut: DEFAULT_TIMEOUT
-        }
+            hoverHideTimeOut: DEFAULT_TIMEOUT,
+        },
     };
     render() {
         const { children, renderUserCard, renderNoUser, dropdownProps, user, ...restProps } = this.props;
@@ -25,7 +25,7 @@ export default class UserCardTooltip extends Component {
                 ? renderUserCard({
                     ...restProps,
                     user,
-                    className: classNames(styles.userCardSpaced, this.props.className)
+                    className: classNames(styles.userCardSpaced, this.props.className),
                 })
                 : renderNoUser()}
         </Popup>

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

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

package/jslint-xml.js

@@ -1,33 +1,34 @@
-// eslint-disable-next-line no-control-regex
-const xmlEscape = s => (`${s}`).replace(/[<>&"'\x00-\x1F\x7F\u0080-\uFFFF]/g, c => {
-  switch (c) {
-    case '<':
-      return '&lt;';
-    case '>':
-      return '&gt;';
-    case '&':
-      return '&amp;';
-    case '"':
-      return '&quot;';
-    case '\'':
-      return '&apos;';
-    default:
-      return `&#${c.charCodeAt(0)};`;
-  }
-});
+const xmlEscape = s =>
+  // eslint-disable-next-line no-control-regex
+  `${s}`.replace(/[<>&"'\x00-\x1F\x7F\u0080-\uFFFF]/g, c => {
+    switch (c) {
+      case '<':
+        return '&lt;';
+      case '>':
+        return '&gt;';
+      case '&':
+        return '&amp;';
+      case '"':
+        return '&quot;';
+      case "'":
+        return '&apos;';
+      default:
+        return `&#${c.charCodeAt(0)};`;
+    }
+  });
 
 module.exports = results => {
   const files = results.map(file => {
     const warnings = file.warnings.map(({column, line, text}) => {
       const css = file._postcssResult && file._postcssResult.css;
-      const lines = css && css.split('\n') || [];
+      const lines = (css && css.split('\n')) || [];
       const evidence = lines[line - 1];
 
       return [
         `<issue line="${line}"`,
         ` char="${column}"`,
         ` evidence="${evidence ? xmlEscape(evidence) : ''}"`,
-        ` reason="${xmlEscape(text)}" />`
+        ` reason="${xmlEscape(text)}" />`,
       ].join('');
     });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.0-beta.9",
+  "version": "7.0.1",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -32,7 +32,8 @@
   },
   "scripts": {
     "apply-resolutions": "npx npm-force-resolutions@0.0.10",
-    "_postinstall": "husky",
+    "_postinstall": "husky && npm run postinstall:gitconfig",
+    "postinstall:gitconfig": "git config blame.ignoreRevsFile .git-blame-ignore-revs",
     "prepare": "webpack -c .storybook/custom-header/webpack.config.js",
     "prea11y-audit": "playwright install",
     "a11y-audit": "test-storybook --url http://localhost:9999",
@@ -55,8 +56,8 @@
     "lint": "npm run lint:js . && npm run stylelint",
     "prelint-ci": "echo \"##teamcity[importData type='jslint' path='eslint-report.xml']\"",
     "lint-ci": "eslint --format jslint-xml . > eslint-report.xml && npm run stylelint-ci",
-    "stylelint-ci": "stylelint --ignore-path .eslintignore --custom-formatter './jslint-xml.js' '**/*.css' | xmlappend eslint-report.xml",
-    "stylelint": "stylelint --ignore-path .eslintignore '**/*.css'",
+    "stylelint-ci": "stylelint --ignore-path .stylelintignore --custom-formatter './jslint-xml.js' '**/*.css' | xmlappend eslint-report.xml",
+    "stylelint": "stylelint --ignore-path .stylelintignore '**/*.css'",
     "validate-tc-config": "mvn --file .teamcity/pom.xml org.jetbrains.teamcity:teamcity-configs-maven-plugin:generate -e",
     "pretest-ci": "npm run lint-ci",
     "typecheck": "tsc",
@@ -76,71 +77,79 @@
   },
   "readmeFilename": "README.md",
   "devDependencies": {
-    "@babel/cli": "^7.25.6",
-    "@babel/eslint-parser": "^7.25.1",
-    "@csstools/css-parser-algorithms": "^3.0.0",
+    "@babel/cli": "^7.25.9",
+    "@babel/eslint-parser": "^7.25.9",
+    "@babel/plugin-syntax-import-assertions": "^7.26.0",
+    "@csstools/css-parser-algorithms": "^3.0.4",
     "@csstools/stylelint-no-at-nest-rule": "^4.0.0",
-    "@jetbrains/eslint-config": "^5.4.2",
+    "@eslint/compat": "^1.2.2",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.14.0",
+    "@jetbrains/eslint-config": "^6.0.4",
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
     "@jetbrains/stylelint-config": "^4.0.2",
-    "@primer/octicons": "^19.11.0",
+    "@jetbrains/rollup-css-plugin": "./packages/rollup-css-plugin",
+    "@primer/octicons": "^19.12.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-replace": "^6.0.1",
-    "@storybook/addon-a11y": "8.3.3",
-    "@storybook/addon-docs": "8.3.3",
-    "@storybook/addon-essentials": "8.3.3",
-    "@storybook/addon-themes": "^8.3.3",
-    "@storybook/components": "8.3.3",
+    "@storybook/addon-a11y": "8.4.2",
+    "@storybook/addon-docs": "8.4.2",
+    "@storybook/addon-essentials": "8.4.2",
+    "@storybook/addon-themes": "^8.4.2",
+    "@storybook/components": "8.4.2",
     "@storybook/csf": "^0.1.11",
-    "@storybook/manager-api": "8.3.3",
-    "@storybook/preview-api": "8.3.3",
-    "@storybook/react": "8.3.3",
-    "@storybook/react-webpack5": "8.3.3",
+    "@storybook/manager-api": "8.4.2",
+    "@storybook/preview-api": "8.4.2",
+    "@storybook/react": "8.4.2",
+    "@storybook/react-webpack5": "8.4.2",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "8.3.3",
+    "@storybook/theming": "8.4.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/chai": "^5.0.0",
+    "@types/chai": "^5.0.1",
     "@types/chai-as-promised": "^8.0.1",
     "@types/chai-dom": "0.0.10",
     "@types/chai-enzyme": "^0.6.13",
     "@types/enzyme": "^3.10.18",
+    "@types/eslint__js": "^8.42.3",
     "@types/markdown-it": "^14.1.2",
-    "@types/react": "^18.3.9",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/sinon": "^17.0.3",
     "@types/sinon-chai": "^4.0.0",
     "@types/webpack-env": "^1.18.5",
-    "@typescript-eslint/eslint-plugin": "^8.7.0",
-    "@typescript-eslint/parser": "^8.7.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "@vitest/eslint-plugin": "^1.1.6",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
-    "acorn": "^8.12.1",
+    "acorn": "^8.14.0",
     "axe-playwright": "^2.0.3",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001664",
-    "chai": "^5.1.1",
+    "caniuse-lite": "^1.0.30001678",
+    "chai": "^5.1.2",
     "chai-as-promised": "^8.0.0",
     "chai-dom": "^1.10.0",
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^1.0.0-rc.12",
-    "core-js": "^3.38.1",
+    "core-js": "^3.39.0",
     "cpy-cli": "^5.0.0",
     "enzyme": "^3.11.0",
-    "eslint": "^8.57.0",
+    "eslint": "^9.14.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-formatter-jslint-xml": "^8.40.0",
     "eslint-import-resolver-webpack": "^0.13.9",
-    "eslint-plugin-bdd": "^2.1.1",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
-    "eslint-plugin-react": "^7.37.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-storybook": "^0.9.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-storybook": "^0.11.0",
     "events": "^3.3.0",
     "glob": "^11.0.0",
-    "html-webpack-plugin": "^5.6.0",
+    "globals": "^15.12.0",
+    "html-webpack-plugin": "^5.6.3",
     "http-server": "^14.1.1",
     "husky": "^9.1.6",
     "identity-obj-proxy": "^3.0.0",
@@ -158,22 +167,22 @@
     "react-test-renderer": "^18.3.1",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.22.4",
+    "rollup": "^4.24.4",
     "rollup-plugin-clear": "^2.0.7",
-    "rollup-plugin-styles": "^4.0.0",
     "sinon": "^19.0.2",
     "sinon-chai": "^4.0.0",
     "storage-mock": "^2.1.0",
-    "storybook": "8.3.3",
-    "stylelint": "^16.9.0",
+    "storybook": "8.4.2",
+    "stylelint": "^16.10.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.10",
-    "typescript": "~5.6.2",
-    "vitest": "^2.1.1",
+    "typescript": "~5.6.3",
+    "typescript-eslint": "^8.13.0",
+    "vitest": "^2.1.4",
     "vitest-teamcity-reporter": "^0.3.1",
     "wallaby-webpack": "^3.9.16",
-    "webpack": "^5.95.0",
+    "webpack": "^5.96.1",
     "webpack-cli": "^5.1.4",
     "xmlappend": "^1.0.4"
   },
@@ -197,18 +206,18 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/preset-typescript": "^7.24.7",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-typescript": "^7.26.0",
     "@jetbrains/babel-preset-jetbrains": "^2.4.0",
-    "@jetbrains/icons": "^4.4.0",
+    "@jetbrains/icons": "^4.8.0",
     "@jetbrains/postcss-require-hover": "^0.1.2",
     "@types/combokeys": "^2.4.9",
     "@types/element-resize-detector": "^1.1.6",
     "@types/react-virtualized": "9.21.30",
-    "@types/util-deprecate": "^1.0.3",
+    "@types/util-deprecate": "^1.0.4",
     "babel-loader": "9.2.1",
     "babel-plugin-transform-define": "^2.1.4",
-    "browserslist": "^4.24.0",
+    "browserslist": "^4.24.2",
     "change-case": "^4.1.1",
     "classnames": "^2.5.1",
     "combokeys": "^3.0.1",
@@ -230,7 +239,7 @@
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.1.1",
     "postcss-modules-values-replace": "^4.2.0",
-    "postcss-preset-env": "^10.0.5",
+    "postcss-preset-env": "^10.0.9",
     "react-movable": "^3.3.1",
     "react-virtualized": "^9.22.5",
     "react-waypoint": "^10.3.0",

package/postcss.config.js

@@ -1,19 +1,18 @@
 const EMBRACED_STAGE = 3; // See https://cssdb.org/#staging-process
 
-
 module.exports = () => {
   const plugins = [
     require('postcss-modules-values-replace')(),
     require('postcss-preset-env')({
       stage: EMBRACED_STAGE,
       features: {
-        'nesting-rules': true
-      }
+        'nesting-rules': true,
+      },
     }),
     require('postcss-font-family-system-ui')({browsers: ['last 2 versions']}),
     require('postcss-flexbugs-fixes')(),
     require('@jetbrains/postcss-require-hover')(),
-    require('postcss-calc')({mediaQueries: true})
+    require('postcss-calc')({mediaQueries: true}),
   ];
 
   return {plugins};

package/typings.d.ts

@@ -32,12 +32,10 @@ declare module 'combokeys/test/lib/key-event' {
     keyCode: number,
     modifiers?: ('shift' | 'ctrl' | 'alt' | 'meta')[],
     element?: Element,
-    repeat?: number
+    repeat?: number,
   ): void;
 }
 
 declare module 'scrollbar-width' {
-  export default function getScrollbarWidth(
-    recalculate?: boolean
-  ): number | null;
+  export default function getScrollbarWidth(recalculate?: boolean): number | null;
 }

package/webpack.config.js

@@ -14,8 +14,8 @@ function createConfig() {
       {
         loader: require.resolve('style-loader'),
         options: {
-          esModule: false
-        }
+          esModule: false,
+        },
       },
       {
         loader: require.resolve('css-loader'),
@@ -23,29 +23,24 @@ function createConfig() {
           modules: {
             namedExport: false,
             exportLocalsConvention: 'as-is',
-            localIdentName: '[local]_[hash:4]'
+            localIdentName: '[local]_[hash:4]',
           },
-          importLoaders: 1
-        }
+          importLoaders: 1,
+        },
       },
       {
         loader: require.resolve('postcss-loader'),
         options: {
-          implementation: require('postcss')
-        }
-      }
-    ]
+          implementation: require('postcss'),
+        },
+      },
+    ],
   };
 
   const externalCssLoader = {
     test: /\.css$/,
-    include: [
-      path.dirname(require.resolve('highlight.js/package.json'))
-    ],
-    use: [
-      require.resolve('style-loader'),
-      require.resolve('css-loader')
-    ]
+    include: [path.dirname(require.resolve('highlight.js/package.json'))],
+    use: [require.resolve('style-loader'), require.resolve('css-loader')],
   };
 
   const babelLoader = {
@@ -55,35 +50,35 @@ function createConfig() {
     loader: require.resolve('babel-loader'),
     options: {
       configFile: path.join(__dirname, 'babel.config.js'),
-      cacheDirectory: true
-    }
+      cacheDirectory: true,
+    },
   };
 
   const gifLoader = {
     test: /\.gif$/,
     include: componentsPath,
-    loader: require.resolve('url-loader')
+    loader: require.resolve('url-loader'),
   };
 
   const loaders = {
     cssLoader,
     externalCssLoader,
     babelLoader,
-    gifLoader
+    gifLoader,
   };
 
   return {
     // Minimal config for building components
     config: {
       module: {
-        rules: loadersObjectToArray(loaders)
+        rules: loadersObjectToArray(loaders),
       },
       resolve: {
-        extensions: ['.js', '.ts', '.tsx']
-      }
+        extensions: ['.js', '.ts', '.tsx'],
+      },
     },
     componentsPath,
-    loaders
+    loaders,
   };
 }
 
@@ -93,5 +88,5 @@ module.exports = {
   createConfig,
   config,
   componentsPath,
-  loaders
+  loaders,
 };

package/components/badge/badge.css

@@ -1,42 +0,0 @@
-@import "../global/variables.css";
-
-.badge {
-  display: inline-block;
-
-  box-sizing: border-box;
-  height: 20px;
-  padding: 0 var(--ring-unit);
-
-  cursor: default;
-
-  vertical-align: baseline;
-
-  color: var(--ring-secondary-color);
-  border: 1px var(--ring-line-color) solid;
-  border-radius: var(--ring-border-radius);
-  background-color: var(--ring-content-background-color);
-
-  font-size: var(--ring-font-size-smaller);
-  font-weight: normal;
-  font-style: normal;
-  line-height: 17px;
-
-  &.gray {
-    color: var(--ring-text-color);
-    background-color: var(--ring-tag-background-color);
-  }
-
-  &.valid {
-    color: var(--ring-success-color);
-  }
-
-  &.invalid {
-    color: var(--ring-error-color);
-  }
-
-  &.disabled {
-    /* Deprecated: duplicates invalid */
-
-    color: var(--ring-error-color);
-  }
-}