@jetbrains/ring-ui 8.0.0-beta.5 → 8.0.0-beta.7

package/babel.config.js

@@ -1,5 +1,3 @@
-const browserslist = require('browserslist');
-
 module.exports = function config(api) {
   api.cache(true);
 
@@ -12,12 +10,6 @@ module.exports = function config(api) {
           panicThreshold: 'all_errors',
         },
       ],
-      [
-        'babel-plugin-transform-define',
-        {
-          SUPPORTED_BROWSERS: browserslist(),
-        },
-      ],
     ],
     presets: [
       [

package/components/avatar/avatar-info.js

@@ -3,13 +3,11 @@ import { Size } from './avatar-size';
 import styles from './avatar.css';
 export const fontSizes = {
     [Size.Size16]: 9,
-    [Size.Size18]: 9,
     [Size.Size20]: 9,
     [Size.Size24]: 11,
     [Size.Size28]: 12,
     [Size.Size32]: 14,
     [Size.Size40]: 16,
-    [Size.Size48]: 16,
     [Size.Size56]: 22,
 };
 export default function AvatarInfo({ size, children }) {

package/components/avatar/avatar-size.d.ts

@@ -3,14 +3,10 @@
  */
 export declare enum Size {
     Size16 = 16,
-    /** @deprecated */
-    Size18 = 18,
     Size20 = 20,
     Size24 = 24,
     Size28 = 28,
     Size32 = 32,
     Size40 = 40,
-    /** @deprecated */
-    Size48 = 48,
     Size56 = 56
 }

package/components/avatar/avatar-size.js

@@ -4,14 +4,10 @@
 export var Size;
 (function (Size) {
     Size[Size["Size16"] = 16] = "Size16";
-    /** @deprecated */
-    Size[Size["Size18"] = 18] = "Size18";
     Size[Size["Size20"] = 20] = "Size20";
     Size[Size["Size24"] = 24] = "Size24";
     Size[Size["Size28"] = 28] = "Size28";
     Size[Size["Size32"] = 32] = "Size32";
     Size[Size["Size40"] = 40] = "Size40";
-    /** @deprecated */
-    Size[Size["Size48"] = 48] = "Size48";
     Size[Size["Size56"] = 56] = "Size56";
 })(Size || (Size = {}));

package/components/avatar/avatar.js

@@ -1,15 +1,12 @@
 import { PureComponent } from 'react';
 import classNames from 'classnames';
-import deprecate from 'util-deprecate';
 import { encodeURL, isDataURI, parseQueryString } from '../global/url';
 import { getPixelRatio } from '../global/dom';
-import memoize from '../global/memoize';
 import FallbackAvatar from './fallback-avatar';
 import { Size } from './avatar-size';
 import AvatarInfo from './avatar-info';
 import styles from './avatar.css';
 export { Size };
-const warnSize = memoize((size) => deprecate(() => { }, `Avatar: Size${size} is deprecated and will be removed in 8.0. The supported sizes are: Size20, Size24, Size28, Size32, Size40.`));
 export default class Avatar extends PureComponent {
     static defaultProps = {
         dpr: getPixelRatio(),
@@ -28,9 +25,6 @@ export default class Avatar extends PureComponent {
     };
     render() {
         const { size, url, dpr, style, round, subavatar, subavatarSize, username, info, skipParams, ...restProps } = this.props;
-        if ([Size.Size18, Size.Size48].includes(size)) {
-            warnSize(size)();
-        }
         const sizeString = `${size}px`;
         const subavatarSizeString = `${subavatarSize}px`;
         const styleObj = {

package/components/avatar/fallback-avatar.js

@@ -31,12 +31,6 @@ const SizesSquare = {
         fontSize: '8px',
         textAnchor: 'middle',
     },
-    [Size.Size18]: {
-        radius: 4,
-        text: { x: 9, y: 13 },
-        fontSize: '11px',
-        textAnchor: 'middle',
-    },
     [Size.Size20]: {
         radius: 4,
         text: { x: 2, y: 10 },
@@ -69,13 +63,6 @@ const SizesSquare = {
         letterSpacing: 1,
         underscore: { x: 5, y: 32, width: 15, height: 2.5 },
     },
-    [Size.Size48]: {
-        radius: 4,
-        text: { x: 3, y: 21 },
-        fontSize: '19px',
-        letterSpacing: 1,
-        underscore: { x: 5, y: 32, width: 15, height: 2.5 },
-    },
     [Size.Size56]: {
         radius: 4,
         text: { x: 4, y: 28 },
@@ -92,13 +79,6 @@ const SizesRound = {
         textAnchor: 'middle',
         dominantBaseline: 'middle',
     },
-    [Size.Size18]: {
-        radius: 4,
-        fontSize: '11px',
-        text: { x: '50%', y: '54%' },
-        textAnchor: 'middle',
-        dominantBaseline: 'middle',
-    },
     [Size.Size20]: {
         radius: 4,
         fontSize: '9px',
@@ -136,14 +116,6 @@ const SizesRound = {
         textAnchor: 'middle',
         dominantBaseline: 'middle',
     },
-    [Size.Size48]: {
-        radius: 4,
-        fontSize: '19px',
-        letterSpacing: 1,
-        text: { x: '50%', y: '54%' },
-        textAnchor: 'middle',
-        dominantBaseline: 'middle',
-    },
     [Size.Size56]: {
         radius: 4,
         fontSize: '26px',

package/components/avatar-stack/avatar-stack.js

@@ -6,7 +6,7 @@ import { fontSizes } from '../avatar/avatar-info';
 import styles from './avatar-stack.css';
 export default function AvatarStack({ children, className, size = Size.Size20, extraItems, dropdownMenuProps, ...restProps }) {
     const [dropdownOpen, setDropdownOpen] = useState(false);
-    const sizeClass = size !== Size.Size16 && size !== Size.Size18 && size !== Size.Size48 ? styles[`size${size}`] : undefined;
+    const sizeClass = size !== Size.Size16 ? styles[`size${size}`] : undefined;
     return (<div className={classNames(styles.avatarStack, className, sizeClass, {
             [styles.hovered]: dropdownOpen,
         })} {...restProps} style={{ height: size, ...restProps.style }}>

package/components/banner/banner.css

@@ -32,7 +32,7 @@
     background-color: var(--ring-error-container-light-color);
 
     .icon {
-      color: var(--ring-main-error-color);
+      color: var(--ring-icon-error-color);
     }
   }
 
@@ -41,7 +41,7 @@
     background-color: var(--ring-success-container-light-color);
 
     .icon {
-      color: var(--ring-main-success-color);
+      color: var(--ring-icon-success-color);
     }
   }
 
@@ -50,7 +50,7 @@
     background-color: var(--ring-warning-container-light-color);
 
     .icon {
-      color: var(--ring-main-warning-color);
+      color: var(--ring-icon-warning-color);
     }
   }
 

package/components/button/button.css

@@ -235,12 +235,12 @@
 }
 
 .primaryBlock {
-  --ring-button-default-background-color: var(--ring-button-primary-background-color);
+  --ring-button-default-background-color: var(--ring-main-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-pressed-background-color: var(--ring-main-color);
+  --ring-button-active-background-color: var(--ring-main-color);
   --ring-button-active-hover-background-color: var(--ring-main-hover-color);
-  --ring-button-active-pressed-background-color: var(--ring-button-primary-background-color);
+  --ring-button-active-pressed-background-color: var(--ring-main-color);
   --ring-button-disabled-background-color: var(--ring-border-hover-color);
   --ring-button-pressed-border-color: var(--ring-button-primary-border-color);
   --ring-button-active-border-color: var(--ring-button-primary-border-color);

package/components/button/button.d.ts

@@ -15,10 +15,6 @@ export interface ButtonBaseProps {
     secondary?: boolean | null | undefined;
     ghost?: boolean | null | undefined;
     short?: boolean | null | undefined;
-    /**
-     * @deprecated Use inline instead
-     */
-    text?: boolean | null | undefined;
     inline?: boolean | null | undefined;
     dropdown?: boolean | null | undefined;
     disabled?: boolean | undefined;

package/components/button/button.js

@@ -3,13 +3,11 @@ import * as React from 'react';
 import classNames from 'classnames';
 import chevronDown from '@jetbrains/icons/chevron-down';
 import chevron12pxDown from '@jetbrains/icons/chevron-12px-down';
-import deprecate from 'util-deprecate';
 import Icon, { Size } from '../icon/icon';
 import ClickableLink from '../link/clickable-link';
 import { ControlsHeightContext } from '../global/controls-height';
 import { getButtonClasses } from './button.classes';
 import styles from './button.css';
-const warnText = deprecate(() => { }, 'Button: "text" prop is deprecated and will be removed in 8.0. Use inline instead.');
 function removeLinkProps(props) {
     const { download, href, hrefLang, media, ping, target, type, referrerPolicy, onConditionalClick, onPlainLeftClick, activeClassName, ...restProps } = props;
     return restProps;
@@ -30,13 +28,10 @@ export class Button extends PureComponent {
     render() {
         const { 
         // Modifiers
-        active, danger, delayed, loader, primary, success, error, secondary, ghost, short, text, dropdown, height, 
+        active, danger, delayed, loader, primary, success, error, secondary, ghost, short, dropdown, height, 
         // Props
         icon, iconRight, iconSize, iconClassName, iconRightClassName, iconSuppressSizeWarning, className, children, inline, disabled, ...props } = this.props;
-        const isInline = inline ?? text ?? !!icon;
-        if (text) {
-            warnText();
-        }
+        const isInline = inline ?? !!icon;
         const classes = getButtonClasses({
             ...this.props,
             inline: isInline,

package/components/collapse/collapse-content.d.ts

@@ -1,5 +1,12 @@
 import React, { type PropsWithChildren } from 'react';
 interface Props {
+    /**
+     * Height of the always-visible preview of the collapsed content.
+     * The collapsed subtree is inert until expanded, matching `aria-expanded`.
+     * The preview is only a visual clip of that subtree, so it is inert too and
+     * assistive technology will not perceive it — if the preview carries essential
+     * information, expose an accessible summary outside the collapsed content.
+     */
     minHeight?: number;
     className?: string;
     'data-test'?: string | null | undefined;

package/components/collapse/collapse-content.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef, use } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
 import { getRect } from '../global/dom';
+import { parseCssDuration } from '../global/parse-css-duration';
 import { toPx } from './utils';
 import CollapseContext from './collapse-context';
 import { COLLAPSE_CONTENT_TEST_ID, COLLAPSE_CONTENT_CONTAINER_TEST_ID } from './consts';
@@ -10,11 +11,14 @@ const DURATION_FACTOR = 0.5;
 const DEFAULT_HEIGHT = 0;
 const VISIBLE = 1;
 const HIDDEN = 0;
+// margin for the hide fallback timer, so it fires only if transitionend never did
+const HIDE_FALLBACK_EXTRA_DELAY = 100;
+const isFullyCollapsed = (collapsed, initialContentHeight) => collapsed && initialContentHeight <= DEFAULT_HEIGHT;
 /**
  * @name CollapseContent
  */
 export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-test': dataTest, }) => {
-    const { collapsed, duration, id, disableAnimation } = use(CollapseContext);
+    const { collapsed, duration, id, disableAnimation, keepMounted } = use(CollapseContext);
     const containerRef = useRef(null);
     const contentRef = useRef(null);
     const [initialContentHeight] = useState(minHeight);
@@ -23,20 +27,41 @@ export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-te
     const height = toPx(nextHeight);
     const [shouldHideContent, setShouldHideContent] = useState(collapsed && minHeight <= DEFAULT_HEIGHT);
     useEffect(() => {
-        function onTransitionEnd() {
+        const container = containerRef.current;
+        function finalizeCollapse() {
             if (initialContentHeight <= DEFAULT_HEIGHT) {
                 setShouldHideContent(collapsed);
             }
         }
-        const container = containerRef.current;
+        function onTransitionEnd(event) {
+            // transitionend bubbles: only the container's own height transition finalizes the collapse
+            if (event.target === container && event.propertyName === 'height') {
+                finalizeCollapse();
+            }
+        }
         container?.addEventListener('transitionend', onTransitionEnd);
+        // fallback for suppressed or cancelled transitions (e.g. `transition: none` overrides),
+        // which emit no transitionend and would otherwise leave the content interactive forever.
+        // Armed once per collapse toggle from the --duration committed to the DOM — the value
+        // the running transition actually uses — so it can neither undercut a transition started
+        // from a stale height nor be restarted by content resizes or duration changes mid-collapse
+        const cssDuration = parseCssDuration(container?.style.getPropertyValue('--duration') || '');
+        const fallbackTimeout = window.setTimeout(finalizeCollapse, cssDuration + HIDE_FALLBACK_EXTRA_DELAY);
         return () => {
             container?.removeEventListener('transitionend', onTransitionEnd);
+            window.clearTimeout(fallbackTimeout);
         };
     }, [collapsed, initialContentHeight]);
+    // render-phase state adjustments (not effects): the React Compiler lint forbids
+    // setState-in-effect, and https://react.dev/learn/you-might-not-need-an-effect
+    // documents this pattern for resetting state when props change
     if (!collapsed && shouldHideContent) {
         setShouldHideContent(false);
     }
+    // without a transition there is no transitionend to wait for, so hide immediately
+    if (disableAnimation && !shouldHideContent && isFullyCollapsed(collapsed, initialContentHeight)) {
+        setShouldHideContent(true);
+    }
     useEffect(() => {
         if (contentRef.current) {
             const observer = new ResizeObserver(() => {
@@ -52,10 +77,20 @@ export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-te
         opacity: collapsed && !minHeight ? HIDDEN : VISIBLE,
     };
     const fadeShouldBeVisible = Boolean(minHeight && collapsed);
-    const shouldRenderContent = disableAnimation ? !collapsed : !shouldHideContent;
+    const contentVisible = !shouldHideContent;
+    const contentHidden = Boolean(keepMounted) && !contentVisible;
+    // interaction is blocked as soon as the panel collapses (matching aria-expanded), while
+    // visibility waits for the animation to finish so the content stays painted meanwhile.
+    // This includes a minHeight preview: content clipped below it must not take focus,
+    // and inert cannot be applied any more granularly than to the whole subtree
+    const contentInert = collapsed;
     return (<div ref={containerRef} id={`collapse-content-${id}`} data-test={dataTests(COLLAPSE_CONTENT_CONTAINER_TEST_ID)} className={classNames(styles.container, { [styles.transition]: !disableAnimation })} style={style}>
-      <div ref={contentRef} data-test={dataTests(COLLAPSE_CONTENT_TEST_ID, dataTest)}>
-        {shouldRenderContent ? children : null}
+      <div ref={contentRef} data-test={dataTests(COLLAPSE_CONTENT_TEST_ID, dataTest)} 
+    // visibility: hidden removes the fully collapsed content from the tab order and accessibility
+    // tree, but descendants can override it with visibility: visible — inert cannot be escaped.
+    // Both are rendered in JSX so server-rendered collapsed markup is protected before hydration.
+    style={contentHidden ? { visibility: 'hidden' } : undefined} inert={contentInert}>
+        {keepMounted || contentVisible ? children : null}
       </div>
       {fadeShouldBeVisible && <div className={styles.fade}/>}
     </div>);

package/components/collapse/collapse-context.d.ts

@@ -2,6 +2,7 @@ interface CollapseContextInterface {
     collapsed: boolean;
     duration: number;
     disableAnimation: boolean;
+    keepMounted?: boolean;
     setCollapsed: () => void;
     id: string;
 }

package/components/collapse/collapse-context.js

@@ -4,6 +4,7 @@ export const CollapseContext = createContext({
     collapsed: true,
     duration: BASE_ANIMATION_DURATION,
     disableAnimation: false,
+    keepMounted: false,
     setCollapsed: () => { },
     id: '',
 });

package/components/collapse/collapse.d.ts

@@ -4,6 +4,15 @@ interface Props {
     onChange?: (collapsed: boolean) => void;
     duration?: number;
     disableAnimation?: boolean;
+    /**
+     * Keep children mounted while collapsed (hidden via `visibility: hidden`
+     * and the `inert` attribute) instead of unmounting them, preserving their state.
+     * Note: hidden form controls still participate in form validation
+     * and submission — disable them while collapsed if needed.
+     * Content rendered through portals (e.g. Popup) escapes the hidden
+     * wrapper and is not hidden — close overlays on collapse.
+     */
+    keepMounted?: boolean;
     className?: string;
     defaultCollapsed?: boolean;
     collapsed?: boolean | null;

package/components/collapse/collapse.js

@@ -5,7 +5,7 @@ import { BASE_ANIMATION_DURATION } from './consts';
 /**
  * @name Collapse
  */
-export const Collapse = ({ children, duration = BASE_ANIMATION_DURATION, disableAnimation = false, className = '', onChange = () => { }, defaultCollapsed = true, collapsed = null, }) => {
+export const Collapse = ({ children, duration = BASE_ANIMATION_DURATION, disableAnimation = false, keepMounted = false, className = '', onChange = () => { }, defaultCollapsed = true, collapsed = null, }) => {
     const [innerCollapsed, setInnerCollapsed] = useState(defaultCollapsed);
     const id = useId();
     const finalCollapsedValue = collapsed ?? innerCollapsed;
@@ -19,6 +19,7 @@ export const Collapse = ({ children, duration = BASE_ANIMATION_DURATION, disable
             setCollapsed,
             duration,
             disableAnimation,
+            keepMounted,
             id,
         }}>
         {children}

package/components/collapsible-group/collapsible-group.css

@@ -37,6 +37,12 @@
   height: 28px;
 }
 
+.heading {
+  margin: 0;
+
+  font: inherit;
+}
+
 .headerButton {
   display: block;
 

package/components/collapsible-group/collapsible-group.d.ts

@@ -11,10 +11,23 @@ export interface CollapsibleGroupProps {
     onChange?: (expanded: boolean) => void;
     disableAnimation?: boolean;
     interactive?: boolean;
+    /**
+     * Keep children mounted while collapsed (hidden via `visibility: hidden`
+     * and the `inert` attribute) instead of unmounting them, preserving their state.
+     * Note: hidden form controls still participate in form validation
+     * and submission — disable them while collapsed if needed.
+     * Content rendered through portals (e.g. Popup) escapes the hidden
+     * wrapper and is not hidden — close overlays on collapse.
+     */
+    keepMounted?: boolean;
+    /**
+     * Wraps the header in an <h2>–<h6> to keep the document outline.
+     */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
     'data-test'?: string | null | undefined;
 }
 declare const CollapsibleGroup: {
-    ({ ref, avatar, title, subtitle, children, className, defaultExpanded, expanded, onChange, disableAnimation, interactive, "data-test": dataTest, }: CollapsibleGroupProps): React.JSX.Element;
+    ({ ref, avatar, title, subtitle, children, className, defaultExpanded, expanded, onChange, disableAnimation, interactive, keepMounted, headingLevel, "data-test": dataTest, }: CollapsibleGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default CollapsibleGroup;

package/components/collapsible-group/collapsible-group.js

@@ -36,7 +36,7 @@ function CollapsibleGroupHeaderStatic({ avatar, titleContent, subtitle }) {
       <CollapsibleGroupHeaderContent avatar={avatar} titleContent={titleContent} subtitle={subtitle}/>
     </span>);
 }
-const CollapsibleGroup = ({ ref, avatar, title, subtitle, children, className, defaultExpanded = false, expanded = null, onChange = () => { }, disableAnimation = false, interactive = true, 'data-test': dataTest, }) => {
+const CollapsibleGroup = ({ ref, avatar, title, subtitle, children, className, defaultExpanded = false, expanded = null, onChange = () => { }, disableAnimation = false, interactive = true, keepMounted = false, headingLevel, 'data-test': dataTest, }) => {
     const [innerExpanded, setInnerExpanded] = useState(defaultExpanded);
     const [hovered, setHovered] = useState(false);
     const [focused, setFocused] = useState(false);
@@ -60,9 +60,10 @@ const CollapsibleGroup = ({ ref, avatar, title, subtitle, children, className, d
         [styles.expanded]: isExpanded,
         [styles.focused]: focused,
     });
+    const header = interactive ? (<CollapsibleGroupHeader avatar={avatar} titleContent={title} subtitle={subtitle} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} onFocus={() => setFocused(true)} onBlur={onBlur}/>) : (<CollapsibleGroupHeaderStatic avatar={avatar} titleContent={title} subtitle={subtitle}/>);
     return (<div ref={ref} className={classes} data-test={dataTest}>
-      <Collapse defaultCollapsed={!defaultExpanded} collapsed={expanded == null ? null : !expanded} onChange={handleChange} disableAnimation={disableAnimation} className={styles.collapseRoot}>
-        {interactive ? (<CollapsibleGroupHeader avatar={avatar} titleContent={title} subtitle={subtitle} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} onFocus={() => setFocused(true)} onBlur={onBlur}/>) : (<CollapsibleGroupHeaderStatic avatar={avatar} titleContent={title} subtitle={subtitle}/>)}
+      <Collapse defaultCollapsed={!defaultExpanded} collapsed={expanded == null ? null : !expanded} onChange={handleChange} disableAnimation={disableAnimation} keepMounted={keepMounted} className={styles.collapseRoot}>
+        {headingLevel != null ? React.createElement(`h${headingLevel}`, { className: styles.heading }, header) : header}
         <CollapseContent>
           <div className={styles.body}>{children}</div>
         </CollapseContent>

package/components/global/variables.css

@@ -20,8 +20,6 @@
   --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #ebecf0 */
   --ring-border-selected-disabled-components: 201, 204, 214;
   --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #c9ccd6 */
-  --ring-border-disabled-active-components: var(--ring-border-hover-components);
-  --ring-border-disabled-active-color: var(--ring-border-hover-color); /* TODO: remove in 8.0 in favor of --ring-border-hover-color */
   --ring-icon-disabled-components: 168, 173, 189;
   --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #A8ADBD */
   --ring-border-hover-components: 160, 189, 248;
@@ -36,8 +34,6 @@
   --ring-icon-hover-color: rgb(var(--ring-icon-hover-components)); /* #5a5d6b */
   --ring-main-components: 51, 105, 214;
   --ring-main-color: rgb(var(--ring-main-components)); /* #3369D6 */
-  --ring-action-link-components: var(--ring-link-components);
-  --ring-action-link-color: var(--ring-link-color); /* #315FBD */ /* TODO: remove in 8.0 in favor of --ring-link-color */
   --ring-main-hover-components: 49, 95, 189;
   --ring-main-hover-color: rgb(var(--ring-main-hover-components)); /* #315FBD */
   --ring-main-success-components: 31, 128, 57;
@@ -48,18 +44,18 @@
   --ring-main-error-color: rgb(var(--ring-main-error-components)); /* #CC3645 */
   --ring-main-error-hover-components: 188, 48, 62;
   --ring-main-error-hover-color: rgb(var(--ring-main-error-hover-components)); /* #BC303E */
-  --ring-main-warning-components: 229, 109, 23;
-  --ring-main-warning-color: rgb(var(--ring-main-warning-components)); /* #E56D17 */
-  --ring-main-warning-hover-components: 206, 97, 23;
-  --ring-main-warning-hover-color: rgb(var(--ring-main-warning-hover-components)); /* #CE6117 */
+  --ring-main-warning-components: 255, 175, 15;
+  --ring-main-warning-color: rgb(var(--ring-main-warning-components)); /* #FFAF0F */
+  --ring-main-warning-hover-components: 223, 147, 3;
+  --ring-main-warning-hover-color: rgb(var(--ring-main-warning-hover-components)); /* #DF9303 */
   --ring-main-purple-components: 131, 77, 240;
   --ring-main-purple-color: rgb(var(--ring-main-purple-components)); /* #834DF0 */
   --ring-main-purple-hover-components: 116, 68, 212;
   --ring-main-purple-hover-color: rgb(var(--ring-main-purple-hover-components)); /* #7444D4 */
   --ring-icon-error-components: 204, 54, 69;
   --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #CC3645 */
-  --ring-icon-warning-components: 229, 109, 23;
-  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #E56D17 */
+  --ring-icon-warning-components: 223, 147, 3;
+  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #DF9303 */
   --ring-icon-success-components: 32, 138, 60;
   --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #208A3C */
   --ring-icon-highlight-components: 255, 175, 15;
@@ -74,10 +70,10 @@
   --ring-error-border-color: rgb(var(--ring-error-border-components)); /* #F2B6BB */
   --ring-error-border-hover-components: 228, 106, 118;
   --ring-error-border-hover-color: rgb(var(--ring-error-border-hover-components)); /* #E46A76 */
-  --ring-warning-border-components: 242, 177, 129;
-  --ring-warning-border-color: rgb(var(--ring-warning-border-components)); /* #F2B181 */
-  --ring-warning-border-hover-components: 236, 143, 76;
-  --ring-warning-border-hover-color: rgb(var(--ring-warning-border-hover-components)); /* #EC8F4C */
+  --ring-warning-border-components: 254, 210, 119;
+  --ring-warning-border-color: rgb(var(--ring-warning-border-components)); /* #FED277 */
+  --ring-warning-border-hover-components: 253, 189, 61;
+  --ring-warning-border-hover-color: rgb(var(--ring-warning-border-hover-components)); /* #FDBD3D */
   --ring-highlight-border-components: 254, 210, 119;
   --ring-highlight-border-color: rgb(var(--ring-highlight-border-components)); /* #FED277 */
   --ring-highlight-border-hover-components: 253, 189, 61;
@@ -94,8 +90,6 @@
   --ring-popup-shadow-color: rgba(var(--ring-popup-border-components), 0.1);
   --ring-popup-secondary-shadow-color: rgba(var(--ring-popup-border-components), 0.04);
   --ring-message-shadow-color: rgba(var(--ring-popup-border-components), 0.3);
-  --ring-pinned-shadow-components: 108, 112, 126;
-  --ring-pinned-shadow-color: rgb(var(--ring-pinned-shadow-components)); /* #6C707E */ /* TODO remove in 8.0 */
   --ring-button-danger-hover-components: 219, 59, 75;
   --ring-button-danger-hover-color: rgb(var(--ring-button-danger-hover-components)); /* #DB3B4B */
   --ring-button-primary-border-components: 46, 85, 163;
@@ -108,16 +102,14 @@
   /* Text */
   --ring-search-components: 112, 156, 245;
   --ring-search-color: rgb(var(--ring-search-components)); /* #709CF5 */
-  --ring-hint-components: 46, 85, 163;
-  --ring-hint-color: rgb(var(--ring-hint-components)); /* #2E55A3 */ /* TODO: remove in 8.0 */
   --ring-link-components: 49, 95, 189;
   --ring-link-color: rgb(var(--ring-link-components)); /* #315FBD */
   --ring-link-hover-components: 46, 85, 163;
   --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: 182, 84, 22;
-  --ring-warning-color: rgb(var(--ring-warning-components)); /* #B65416 */ /* Prefer using warning icon + regular text color */
+  --ring-warning-components: 156, 97, 0;
+  --ring-warning-color: rgb(var(--ring-warning-components)); /* #9C6100 */ /* 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;
@@ -154,8 +146,8 @@
   --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #DFE1E5 */
   --ring-removed-background-components: 250, 212, 216;
   --ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #FAD4D8 */
-  --ring-warning-background-components: 252, 230, 214;
-  --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #FCE6D6 */
+  --ring-warning-background-components: 255, 241, 209;
+  --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #FFF1D1 */
   --ring-highlight-background-components: 255, 241, 209;
   --ring-highlight-background-color: rgb(var(--ring-highlight-background-components)); /* #FFF1D1 */
   --ring-added-background-components: 197, 229, 204;
@@ -167,13 +159,11 @@
   --ring-disabled-selected-background-components: 235, 236, 240;
   --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #EBECF0 */
   --ring-button-danger-active-color: var(--ring-error-container-light-color); /* #FAD4D8 */
-  --ring-button-loader-background: rgba(var(--ring-white-text-components), 0.4); /* TODO remove in 8.0 */
-  --ring-button-primary-background-color: var(--ring-main-color); /* TODO remove in 8.0 */
   --ring-table-loader-background-color: rgba(var(--ring-content-background-components), 0.5); /* #FFFFFF50 */
   --ring-removed-subtle-background-components: 255, 235, 236;
   --ring-removed-subtle-background-color: rgb(var(--ring-removed-subtle-background-components)); /* #FFEBEC */
-  --ring-warning-subtle-background-components: 255, 244, 235;
-  --ring-warning-subtle-background-color: rgb(var(--ring-warning-subtle-background-components)); /* #FFF4EB */
+  --ring-warning-subtle-background-components: 255, 246, 222;
+  --ring-warning-subtle-background-color: rgb(var(--ring-warning-subtle-background-components)); /* #FFF6DE */
   --ring-highlight-subtle-background-components: 255, 246, 222;
   --ring-highlight-subtle-background-color: rgb(var(--ring-highlight-subtle-background-components)); /* #FFF6DE */
   --ring-added-subtle-background-components: 230, 247, 233;
@@ -186,8 +176,8 @@
   --ring-success-container-light-color: rgb(var(--ring-success-container-light-components)); /* #F2FCF3 */
   --ring-error-container-light-components: 255, 242, 243;
   --ring-error-container-light-color: rgb(var(--ring-error-container-light-components)); /* #FFF2F3 */
-  --ring-warning-container-light-components: 255, 248, 243;
-  --ring-warning-container-light-color: rgb(var(--ring-warning-container-light-components)); /* #FFF8F3 */
+  --ring-warning-container-light-components: 255, 250, 235;
+  --ring-warning-container-light-color: rgb(var(--ring-warning-container-light-components)); /* #FFFAEB */
   --ring-highlight-container-light-components: 255, 250, 235;
   --ring-highlight-container-light-color: rgb(var(--ring-highlight-container-light-components)); /* #FFFAEB */
   --ring-grey-container-light-components: 247, 248, 250;

package/components/global/variables.interface.d.ts

@@ -19,11 +19,9 @@ export interface RingCSSProperties {
     '--ring-popup-border-color'?: Property.BorderColor;
     '--ring-popup-shadow-color'?: Property.Color;
     '--ring-message-shadow-color'?: Property.Color;
-    '--ring-pinned-shadow-color'?: Property.Color;
     '--ring-button-danger-hover-color'?: Property.Color;
     '--ring-button-primary-border-color'?: Property.Color;
     '--ring-search-color'?: Property.Color;
-    '--ring-hint-color'?: Property.Color;
     '--ring-link-color'?: Property.Color;
     '--ring-link-hover-color'?: Property.Color;
     '--ring-error-color'?: Property.Color;
@@ -49,8 +47,6 @@ export interface RingCSSProperties {
     '--ring-disabled-background-color'?: Property.BackgroundColor;
     '--ring-disabled-selected-background-color'?: Property.BackgroundColor;
     '--ring-button-danger-active-color'?: Property.BackgroundColor;
-    '--ring-button-loader-background'?: Property.BackgroundColor;
-    '--ring-button-primary-background-color'?: Property.BackgroundColor;
     '--ring-code-background-color'?: Property.BackgroundColor;
     '--ring-code-color'?: Property.Color;
     '--ring-code-comment-color'?: Property.Color;