@jetbrains/ring-ui 6.1.1-beta.0 → 7.0.0-beta.1

package/components/auth/auth__core.d.ts

@@ -129,7 +129,7 @@ export default class Auth implements HTTPAuth {
     listeners: Listeners<AuthPayloadMap>;
     http: HTTP;
     private _service;
-    readonly _storage: AuthStorage<number>;
+    readonly _storage: AuthStorage<number> | null;
     private _responseParser;
     private readonly _requestBuilder;
     _backgroundFlow: BackgroundFlow | null;
@@ -174,7 +174,7 @@ export default class Auth implements HTTPAuth {
     /**
      * @return {Promise.<object>}
      */
-    getUser(accessToken?: string | null | undefined): Promise<any>;
+    getUser(accessToken?: string | null | undefined): Promise<any> | undefined;
     /**
      * @return {Promise.<object>}
      */
@@ -197,7 +197,7 @@ export default class Auth implements HTTPAuth {
      */
     login(): Promise<void>;
     switchUser(): Promise<void>;
-    _makeStateFromResponse(authResponse: AuthResponse): AuthState | null;
+    _makeStateFromResponse(authResponse: AuthResponse): AuthState;
     /**
      * Check if the hash contains an access token.
      * If it does, extract the state, compare with

package/components/auth/auth__core.js

@@ -58,7 +58,7 @@ export default class Auth {
     listeners = new Listeners();
     http;
     _service = {};
-    _storage;
+    _storage = null;
     _responseParser = new AuthResponseParser();
     _requestBuilder = null;
     _backgroundFlow;
@@ -694,24 +694,23 @@ export default class Auth {
     _makeStateFromResponse(authResponse) {
         const { state } = authResponse;
         if (!state) {
-            throw new Error('No state in AuthResponse');
+            return {};
         }
         const { scope: defaultScope } = this.config;
-        let urlFromState = null;
         try {
-            urlFromState = new URL(state); // checking if state contains valid URL on same origin, see HUB-11514
-        }
-        catch {
-            return null;
+            const urlFromState = new URL(state); // checking if state contains valid URL on same origin, see HUB-11514
+            if (urlFromState.origin !== window.location.origin) {
+                return {};
+            }
+            return {
+                restoreLocation: state,
+                created: Date.now(),
+                scopes: defaultScope
+            };
         }
-        if (urlFromState.origin !== window.location.origin) {
-            throw new Error(`State contains URL with different origin: "${state}"`);
+        catch (e) {
+            return {};
         }
-        return {
-            restoreLocation: state,
-            created: Date.now(),
-            scopes: defaultScope
-        };
     }
     /**
      * Check if the hash contains an access token.
@@ -732,16 +731,8 @@ export default class Auth {
             return undefined;
         }
         const { state: stateId, scope, expiresIn, accessToken } = authResponse;
-        let newState = null;
-        if (stateId) {
-            newState = await this._storage.getState(stateId);
-            if (!newState) {
-                newState = this._makeStateFromResponse(authResponse);
-            }
-        }
-        if (!newState) {
-            throw new Error(`Could not create state where stateId="${stateId}"`);
-        }
+        const newState = await (stateId && this._storage?.getState(stateId)) ||
+            this._makeStateFromResponse(authResponse);
         const scopes = scope ? scope.split(' ') : newState.scopes || defaultScope || [];
         const effectiveExpiresIn = expiresIn ? parseInt(expiresIn, 10) : defaultExpiresIn;
         const expires = TokenValidator._epoch() + effectiveExpiresIn;

package/components/button/button.css

@@ -365,9 +365,9 @@
 }
 
 .dropdownIcon {
-  margin-right: -3px;
+  margin-right: calc(var(--ring-unit) * -0.5);
 
-  margin-left: 3px;
+  margin-left: 2px;
 
   transition: color var(--ring-ease);
 

package/components/checkbox/checkbox.css

@@ -44,10 +44,7 @@
   position: absolute;
 
   top: 0;
-  left: 1px;
-
-  width: calc(var(--ring-unit) * 2);
-  height: calc(var(--ring-unit) * 2);
+  left: 0;
 
   opacity: 0;
   color: var(--ring-white-text-color);

package/components/data-list/data-list.d.ts

@@ -32,7 +32,7 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             onKeyDown: (e: KeyboardEvent) => void;
             render(): import("react").JSX.Element;
             context: unknown;
-            setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+            setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
             readonly props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>;
             refs: {
@@ -40,7 +40,7 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             };
             shouldComponentUpdate?(nextProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, nextState: Readonly<{}>, nextContext: any): boolean;
             componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-            getSnapshotBeforeUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>): any | null;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>): any;
             componentDidUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>, snapshot?: any): void;
             componentWillMount?(): void;
             UNSAFE_componentWillMount?(): void;
@@ -59,7 +59,7 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             onKeyDown: (e: KeyboardEvent) => void;
             render(): import("react").JSX.Element;
             context: unknown;
-            setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+            setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
             readonly props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>;
             refs: {
@@ -67,7 +67,7 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             };
             shouldComponentUpdate?(nextProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, nextState: Readonly<{}>, nextContext: any): boolean;
             componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-            getSnapshotBeforeUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>): any | null;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>): any;
             componentDidUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>, snapshot?: any): void;
             componentWillMount?(): void;
             UNSAFE_componentWillMount?(): void;

package/components/date-picker/date-picker.css

@@ -9,7 +9,7 @@
 
 :root {
   /* stylelint-disable-next-line color-no-hex */
-  --ring-date-picker-hover-color: #b3dfff;
+  --ring-date-picker-hover-color: var(--ring-border-hover-color);
 }
 
 .container {
@@ -310,7 +310,7 @@
 .active.active {
   transition: none;
 
-  color: var(--ring-link-hover-color);
+  color: var(--ring-text-color);
   border-radius: var(--ring-border-radius);
   background-color: var(--ring-date-picker-hover-color);
 }

package/components/dialog/dialog.js

@@ -84,6 +84,7 @@ export default class Dialog extends PureComponent {
         const { show, modal } = this.props;
         if (this.nativeDialog.current != null) {
             if (show) {
+                this.nativeDialog.current.removeAttribute('open');
                 modal ? this.nativeDialog.current.showModal() : this.nativeDialog.current.show();
             }
             else {

package/components/global/variables.css

@@ -5,141 +5,150 @@
   --ring-unit: 8px;
 
   /* Element */
-  --ring-line-components: 223, 229, 235;
-  --ring-line-color: rgb(var(--ring-line-components)); /* #dfe5eb */
-  --ring-borders-components: 197, 209, 219;
-  --ring-borders-color: rgb(var(--ring-borders-components)); /* #c5d1db */
-  --ring-icon-components: 132, 150, 173;
-  --ring-icon-color: rgb(var(--ring-icon-components)); /* #8496ad */
-  --ring-icon-secondary-components: 153, 153, 153;
-  --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #999 */
-  --ring-border-disabled-components: 232, 232, 232;
-  --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #e8e8e8 */
-  --ring-border-selected-disabled-components: 199, 199, 199;
-  --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #C7C7C7 */
-  --ring-icon-disabled-components: 212, 212, 212;
-  --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #d4d4d4 */
-  --ring-border-hover-components: 128, 198, 255;
-  --ring-border-hover-color: rgb(var(--ring-border-hover-components)); /* #80c6ff */
-  --ring-icon-hover-components: var(--ring-link-hover-color);
-  --ring-icon-hover-color: var(--ring-link-hover-color);
-  --ring-main-components: 0, 128, 229;
-  --ring-main-color: rgb(var(--ring-main-components)); /* #0080e5 */
-  --ring-action-link-components: var(--ring-main-components);
-  --ring-action-link-color: rgb(var(--ring-main-components)); /* #0080e5 */
-  --ring-main-hover-components: 0, 112, 204;
-  --ring-main-hover-color: rgb(var(--ring-main-hover-components)); /* #0070cc */
-  --ring-icon-error-components: 219, 88, 96;
-  --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #db5860 */
-  --ring-icon-warning-components: 237, 162, 0;
-  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #eda200 */
-  --ring-icon-success-components: 89, 168, 105;
-  --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #59a869 */
-  --ring-pale-control-components: 207, 219, 229;
-  --ring-pale-control-color: rgb(var(--ring-pale-control-components)); /* #cfdbe5 */
+  --ring-line-components: 223, 225, 229;
+  --ring-line-color: rgb(var(--ring-line-components)); /* #dfe1e5 */
+  --ring-borders-components: 211, 213, 219;
+  --ring-borders-color: rgb(var(--ring-borders-components)); /* #d3d5db */
+  --ring-icon-components: 129, 133, 148;
+  --ring-icon-color: rgb(var(--ring-icon-components)); /* #818594 */
+  --ring-icon-white-components: 255, 255, 255;
+  --ring-icon-white-color: rgb(var(--ring-icon-white-components)); /* #FFFFFF */
+  --ring-icon-secondary-components: 129, 133, 148;
+  --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #818594 */
+  --ring-border-disabled-components: 235, 236, 240;
+  --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-icon-disabled-components: 211, 213, 219;
+  --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #d3d5db */
+  --ring-border-hover-components: 160, 189, 248;
+  --ring-border-hover-color: rgb(var(--ring-border-hover-components)); /* #a0bdf8 */
+  --ring-icon-hover-components: 90, 93, 107;
+  --ring-icon-hover-color: rgb(var(--ring-icon-hover-components)); /* #5a5d6b */
+  --ring-main-components: 53, 116, 240;
+  --ring-main-color: rgb(var(--ring-main-components)); /* #3574f0 */
+  --ring-action-link-components: 46, 85, 163;
+  --ring-action-link-color: rgb(var(--ring-action-link-components)); /* #2E55A3 */
+  --ring-main-hover-components: 51, 105, 214;
+  --ring-main-hover-color: rgb(var(--ring-main-hover-components)); /* #3369d6 */
+  --ring-icon-error-components: 219, 59, 75;
+  --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #db3b4b */
+  --ring-icon-warning-components: 255, 175, 15;
+  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #ffaf0f */
+  --ring-icon-success-components: 85, 167, 106;
+  --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #55a76a */
+  --ring-pale-control-components: 194, 214, 252;
+  --ring-pale-control-color: rgb(var(--ring-pale-control-components)); /* #C2D6FC */
   --ring-popup-border-components: 0, 28, 54;
   --ring-popup-border-color: var(--ring-line-color);
   --ring-popup-shadow-components: rgba(var(--ring-popup-border-components), 0.1);
   --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: 115, 117, 119;
-  --ring-pinned-shadow-color: rgb(var(--ring-pinned-shadow-components)); /* #737577 */
+  --ring-pinned-shadow-components: 108, 112, 126;
+  --ring-pinned-shadow-color: rgb(var(--ring-pinned-shadow-components)); /* #6C707E */
   --ring-button-danger-hover-components: var(--ring-icon-error-color);
   --ring-button-danger-hover-color: var(--ring-icon-error-color);
-  --ring-button-primary-border-components: 0, 98, 178;
-  --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #0062b2 */
+  --ring-button-primary-border-components: 49, 95, 189;
+  --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #315FBD */
   --ring-dialog-overlay-components: 0, 0, 0;
   --ring-dialog-overlay-opacity: 0.4;
   --ring-popup-shadow: 0 2px 8px var(--ring-popup-shadow-color), 0 1px 2px var(--ring-popup-secondary-shadow-color);
   --ring-dialog-shadow: 0 4px 24px var(--ring-popup-shadow-color), 0 2px 6px var(--ring-popup-secondary-shadow-color);
 
+
   /* Text */
-  --ring-search-components: 102, 158, 204;
-  --ring-search-color: rgb(var(--ring-search-components)); /* #669ecc */
-  --ring-hint-components: 64, 99, 128;
-  --ring-hint-color: rgb(var(--ring-hint-components)); /* #406380 */
-  --ring-link-components: 15, 91, 153;
-  --ring-link-color: rgb(var(--ring-link-components)); /* #0f5b99 */
-  --ring-link-hover-components: 255, 0, 140;
-  --ring-link-hover-color: rgb(var(--ring-link-hover-components)); /* #ff008c */
-  --ring-error-components: 169, 15, 26;
-  --ring-error-color: rgb(var(--ring-error-components)); /* #a90f1a */
-  --ring-warning-components: 178, 92, 0;
-  --ring-warning-color: rgb(var(--ring-warning-components)); /* #b25c00 */
-  --ring-success-components: 12, 117, 35;
-  --ring-success-color: rgb(var(--ring-success-components)); /* #0c7523 */
-  --ring-text-components: 31, 35, 38;
-  --ring-text-color: rgb(var(--ring-text-components)); /* #1f2326 */
+  --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 */
+  --ring-link-components: 46, 85, 163;
+  --ring-link-color: rgb(var(--ring-link-components)); /* #2E55A3 */
+  --ring-link-hover-components: 34, 60, 114;
+  --ring-link-hover-color: rgb(var(--ring-link-hover-components)); /* #223C72 */
+  --ring-error-components: 204, 54, 69;
+  --ring-error-color: rgb(var(--ring-error-components)); /* #CC3645 */
+  --ring-warning-components: 164, 103, 4;
+  --ring-warning-color: rgb(var(--ring-warning-components)); /* #A46704 */
+  --ring-success-components: 31, 117, 54;
+  --ring-success-color: rgb(var(--ring-success-components)); /* #1F7536 */
+  --ring-text-components: 39, 40, 46;
+  --ring-text-color: rgb(var(--ring-text-components)); /* #27282E */
   --ring-active-text-color: var(--ring-text-color);
   --ring-white-text-components: 255, 255, 255;
-  --ring-white-text-color: rgb(var(--ring-white-text-components)); /* #fff */
+  --ring-white-text-color: rgb(var(--ring-white-text-components)); /* #FFFFFF */
   --ring-heading-color: var(--ring-text-color);
-  --ring-secondary-components: 115, 117, 119;
-  --ring-secondary-color: rgb(var(--ring-secondary-components)); /* #737577 */
-  --ring-disabled-components: 153, 153, 153;
-  --ring-disabled-color: rgb(var(--ring-disabled-components)); /* #999 */
+  --ring-secondary-components: 108, 112, 126;
+  --ring-secondary-color: rgb(var(--ring-secondary-components)); /* #6C707E */
+  --ring-disabled-components: 168, 173, 189;
+  --ring-disabled-color: rgb(var(--ring-disabled-components)); /* #A8ADBD */
 
   /* Background */
   --ring-content-background-components: 255, 255, 255;
-  --ring-content-background-color: rgb(var(--ring-content-background-components)); /* #fff */
+  --ring-content-background-color: rgb(var(--ring-content-background-components)); /* #FFFFFF */
   --ring-popup-background-components: 255, 255, 255;
-  --ring-popup-background-color: rgb(var(--ring-popup-background-components)); /* #fff */
-  --ring-sidebar-background-components: 247, 249, 250;
-  --ring-sidebar-background-color: rgb(var(--ring-sidebar-background-components)); /* #f7f9fa */
-  --ring-selected-background-components: 212, 237, 255;
-  --ring-selected-background-color: rgb(var(--ring-selected-background-components)); /* #d4edff */
-  --ring-hover-background-components: 235, 246, 255;
-  --ring-hover-background-color: rgb(var(--ring-hover-background-components)); /* #ebf6ff */
+  --ring-popup-background-color: rgb(var(--ring-popup-background-components)); /* #FFFFFF */
+  --ring-sidebar-background-components: 247, 248, 250;
+  --ring-sidebar-background-color: rgb(var(--ring-sidebar-background-components)); /* #F7F8FA */
+  --ring-selected-background-components: 212, 226, 255;
+  --ring-selected-background-color: rgb(var(--ring-selected-background-components)); /* #D4E2FF */
+  --ring-hover-background-components: 237, 243, 255;
+  --ring-hover-background-color: rgb(var(--ring-hover-background-components)); /* #EDF3FF */
   --ring-navigation-background-components: 255, 255, 255;
-  --ring-navigation-background-color: rgb(var(--ring-navigation-background-components)); /* #fff */
-  --ring-tag-background-components: 230, 236, 242;
-  --ring-tag-background-color: rgb(var(--ring-tag-background-components)); /* #e6ecf2 */
-  --ring-tag-hover-background-components: 211, 218, 224;
-  --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #d3dae0 */
-  --ring-removed-background-components: 255, 213, 203;
-  --ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #ffd5cb */
-  --ring-warning-background-components: 250, 236, 205;
-  --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #faeccd */
-  --ring-added-background-components: 216, 240, 216;
-  --ring-added-background-color: rgb(var(--ring-added-background-components)); /* #d8f0d8 */
-  --ring-disabled-background-components: 245, 245, 245;
-  --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #f5f5f5 */
-  --ring-disabled-selected-background-components: 232, 232, 232;
-  --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #e8e8e8 */
-  --ring-button-danger-active-components: 255, 231, 232;
-  --ring-button-danger-active-color: rgb(var(--ring-button-danger-active-components)); /* #ffe7e8 */
-  --ring-button-loader-background-components: 51, 163, 255;
-  --ring-button-loader-background: rgb(var(--ring-button-loader-background-components)); /* #33a3ff */
-  --ring-button-primary-background-components: 26, 152, 255;
-  --ring-button-primary-background-color: rgb(var(--ring-button-primary-background-components)); /* #1a98ff */
-  --ring-table-loader-background-color: rgba(var(--ring-content-background-components), 0.5); /* #ffffff80 */
+  --ring-navigation-background-color: rgb(var(--ring-navigation-background-components)); /* #FFFFFF */
+  --ring-tag-background-components: 235, 236, 240;
+  --ring-tag-background-color: rgb(var(--ring-tag-background-components)); /* #EBECF0 */
+  --ring-tag-hover-background-components: 211, 213, 219;
+  --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #D3D5DB */
+  --ring-removed-background-components: 250, 212, 216;
+  --ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #FAD4D8 */
+  --ring-warning-background-components: 255, 241, 209;
+  --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #FFF1D1 */
+  --ring-added-background-components: 197, 229, 204;
+  --ring-added-background-color: rgb(var(--ring-added-background-components)); /* #C5E5CC */
+  --ring-disabled-background-components: 247, 248, 250;
+  --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #F7F8FA */
+  --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-components: 250, 212, 216;
+  --ring-button-danger-active-color: rgb(var(--ring-button-danger-active-components)); /* #FAD4D8 */
+  --ring-button-loader-background-components: 70, 130, 250;
+  --ring-button-loader-background: rgb(var(--ring-button-loader-background-components)); /* #4682FA */
+  --ring-button-primary-background-components: 53, 116, 240;
+  --ring-button-primary-background-color: rgb(var(--ring-button-primary-background-components)); /* #3574F0 */
+  --ring-table-loader-background-color: rgba(var(--ring-content-background-components), 0.5); /* #FFFFFF50 */
+  --ring-removed-subtle-background-components: 255, 247, 247;
+  --ring-removed-subtle-background-color: rgb(var(--ring-removed-subtle-background-components)); /* #FFF7F7 */
+  --ring-warning-subtle-background-components: 255, 250, 235;
+  --ring-warning-subtle-background-color: rgb(var(--ring-warning-subtle-background-components)); /* #FFFAEB */
+  --ring-added-subtle-background-components: 242, 252, 243;
+  --ring-added-subtle-background-color: rgb(var(--ring-added-subtle-background-components)); /* #F2FCF3 */
 
   /* Code */
   --ring-code-background-color: var(--ring-content-background-color);
   --ring-code-components: 0, 0, 0;
-  --ring-code-color: rgb(var(--ring-code-components)); /* #000 */
-  --ring-code-comment-components: 112, 112, 112;
-  --ring-code-comment-color: rgb(var(--ring-code-comment-components)); /* #707070 */
-  --ring-code-meta-components: 112, 112, 112;
-  --ring-code-meta-color: rgb(var(--ring-code-meta-components)); /* #707070 */
-  --ring-code-keyword-components: 0, 0, 128;
-  --ring-code-keyword-color: rgb(var(--ring-code-keyword-components)); /* #000080 */
-  --ring-code-tag-background-components: 239, 239, 239;
-  --ring-code-tag-background-color: rgb(var(--ring-code-tag-background-components)); /* #efefef */
+  --ring-code-color: rgb(var(--ring-code-components)); /* #000000 */
+  --ring-code-comment-components: 140, 140, 140;
+  --ring-code-comment-color: rgb(var(--ring-code-comment-components)); /* #8C8C8C */
+  --ring-code-meta-components: 158, 136, 13;
+  --ring-code-meta-color: rgb(var(--ring-code-meta-components)); /* #9E880D */
+  --ring-code-keyword-components: 0, 51, 179;
+  --ring-code-keyword-color: rgb(var(--ring-code-keyword-components)); /* #0033B3 */
+  --ring-code-tag-background-components: 235, 236, 240;
+  --ring-code-tag-background-color: rgb(var(--ring-code-tag-background-components)); /* #EBECF0 */
   --ring-code-tag-color: var(--ring-code-keyword-color);
   --ring-code-tag-font-weight: var(--ring-font-weight-bold);
-  --ring-code-field-components: 102, 14, 122;
-  --ring-code-field-color: rgb(var(--ring-code-field-components)); /* #660e7a */
-  --ring-code-attribute-components: 0, 0, 255;
-  --ring-code-attribute-color: rgb(var(--ring-code-attribute-components)); /* #00f */
+  --ring-code-field-components: 135, 16, 148;
+  --ring-code-field-color: rgb(var(--ring-code-field-components)); /* #871094 */
+  --ring-code-attribute-components: 23, 80, 235;
+  --ring-code-attribute-color: rgb(var(--ring-code-attribute-components)); /* #1750EB */
   --ring-code-number-color: var(--ring-code-attribute-color);
-  --ring-code-string-components: 0, 122, 0;
-  --ring-code-string-color: rgb(var(--ring-code-string-components)); /* #007a00 */
-  --ring-code-addition-components: 170, 222, 170;
-  --ring-code-addition-color: rgb(var(--ring-code-addition-components)); /* #aadeaa */
-  --ring-code-deletion-components: 200, 200, 200;
-  --ring-code-deletion-color: rgb(var(--ring-code-deletion-components)); /* #c8c8c8 */
+  --ring-code-string-components: 6, 125, 23;
+  --ring-code-string-color: rgb(var(--ring-code-string-components)); /* #067D17 */
+  --ring-code-addition-components: 197, 229, 204;
+  --ring-code-addition-color: rgb(var(--ring-code-addition-components)); /* #C5E5CC */
+  --ring-code-deletion-components: 223, 225, 229;
+  --ring-code-deletion-color: rgb(var(--ring-code-deletion-components)); /* #DFE1E5 */
 
   /* Metrics */
   --ring-border-radius: 4px;