ydb-embedded-ui 4.25.0 → 4.27.0

package/dist/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx

@@ -92,19 +92,17 @@ export const QueryEditorControls = ({
     return (
         <div className={b()}>
             <div className={b('left')}>
-                <div className={b('run')}>
-                    <Button
-                        onClick={() => {
-                            onRunButtonClick(queryMode);
-                        }}
-                        disabled={disabled}
-                        loading={runIsLoading}
-                        view={runView}
-                    >
-                        <Icon name="startPlay" viewBox="0 0 16 16" width={16} height={16} />
-                        {'Run'}
-                    </Button>
-                </div>
+                <Button
+                    onClick={() => {
+                        onRunButtonClick(queryMode);
+                    }}
+                    disabled={disabled}
+                    loading={runIsLoading}
+                    view={runView}
+                >
+                    <Icon name="startPlay" viewBox="0 0 16 16" width={16} height={16} />
+                    {'Run'}
+                </Button>
                 <Button
                     onClick={() => {
                         onExplainButtonClick(queryMode);

package/dist/containers/Tenant/Query/SaveQuery/SaveQuery.scss

@@ -4,7 +4,7 @@
         align-items: flex-start;
 
         & + & {
-            margin-top: var(--yc-text-body-1-line-height);
+            margin-top: var(--g-text-body-1-line-height);
         }
     }
     &__field-title {
@@ -18,7 +18,7 @@
             &::after {
                 content: '*';
 
-                color: var(--yc-color-text-danger);
+                color: var(--g-color-text-danger);
             }
         }
     }
@@ -32,7 +32,7 @@
 
         height: 17px;
 
-        color: var(--yc-color-text-danger);
+        color: var(--g-color-text-danger);
     }
     &__embedded-tooltip {
         display: flex;
@@ -41,11 +41,11 @@
         height: 100%;
         margin-left: -10px;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
         &:hover {
             cursor: pointer;
 
-            color: var(--yc-color-text-complementary);
+            color: var(--g-color-text-complementary);
         }
     }
 

package/dist/containers/Tenant/Query/SavedQueries/SavedQueries.tsx

@@ -11,7 +11,7 @@ import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
 import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
 
 import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
-import {IconWrapper} from '../../../../components/Icon';
+import {Icon} from '../../../../components/Icon';
 
 import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
 
@@ -110,10 +110,10 @@ export const SavedQueries = ({savedQueries, changeUserInput, onDeleteQuery}: Sav
                     </div>
                     <span className={b('controls')}>
                         <Button view="flat-secondary">
-                            <IconWrapper name="pencil" viewBox="0 0 24 24" />
+                            <Icon name="pencil" viewBox="0 0 24 24" />
                         </Button>
                         <Button view="flat-secondary" onClick={onDeleteQueryClick(query.name)}>
-                            <IconWrapper name="trash" viewBox="0 0 24 24" />
+                            <Icon name="trash" viewBox="0 0 24 24" />
                         </Button>
                     </span>
                 </div>

package/dist/containers/Tenant/Tenant.scss

@@ -3,7 +3,6 @@
 .tenant-page {
     overflow: hidden;
 
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+    @include body-2-typography();
     @include flex-container();
 }

package/dist/containers/Tenant/utils/schemaControls.tsx

@@ -6,7 +6,7 @@ import {Button} from '@gravity-ui/uikit';
 import {setShowPreview} from '../../../store/reducers/schema/schema';
 import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
 import {TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
-import {IconWrapper} from '../../../components/Icon';
+import {Icon} from '../../../components/Icon';
 
 import i18n from '../i18n';
 
@@ -44,7 +44,7 @@ export const getControls =
                 title={i18n('actions.openPreview')}
                 size="s"
             >
-                <IconWrapper name="tablePreview" />
+                <Icon name="tablePreview" />
             </Button>
         );
 

package/dist/containers/UserSettings/Setting.tsx

@@ -82,7 +82,11 @@ export const Setting = ({
     };
 
     return (
-        <Settings.Item title={title} renderTitleComponent={renderTitleComponent}>
+        <Settings.Item
+            title={title}
+            highlightedTitle={title}
+            renderTitleComponent={renderTitleComponent}
+        >
             {getSettingsElement(type)}
         </Settings.Item>
     );

package/dist/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss

@@ -8,7 +8,7 @@
         margin-top: 10px;
         margin-bottom: 10px;
 
-        border: 1px solid var(--yc-color-line-generic);
+        border: 1px solid var(--g-color-line-generic);
         border-radius: 10px;
     }
 
@@ -29,8 +29,7 @@
     }
 
     .ydb-tree-view {
-        font-size: var(--yc-text-body-2-font-size);
-        line-height: var(--yc-text-body-2-line-height);
+        @include body-2-typography();
 
         // Apply margin ignoring first element of the tree
         .ydb-tree-view {

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.scss

@@ -24,7 +24,7 @@
     &__info-label {
         font-weight: 200;
 
-        color: var(--yc-color-text-complementary);
+        color: var(--g-color-text-complementary);
 
         &_margin_left {
             margin-left: 5px;

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.tsx

@@ -53,7 +53,7 @@ export const NodesTreeTitle = ({
                 {versionsValues ? (
                     <div className={b('version-progress')}>
                         <span className={b('info-label', {margin: 'right'})}>Versions</span>
-                        <Progress view="thin" value={100} stack={versionsValues} />
+                        <Progress size="s" value={100} stack={versionsValues} />
                     </div>
                 ) : null}
             </div>

package/dist/index.tsx

@@ -9,6 +9,7 @@ import configureStore from './store';
 import reportWebVitals from './reportWebVitals';
 import HistoryContext from './contexts/HistoryContext';
 
+import './styles/themes.scss';
 import './styles/constants.scss';
 import './index.css';
 

package/dist/services/api.ts

@@ -34,7 +34,6 @@ import type {StorageApiRequestParams} from '../store/reducers/storage/types';
 
 import {backend as BACKEND} from '../store';
 import {prepareSortValue} from '../utils/filters';
-import {settingsApi} from '../utils/settings';
 
 const config = {withCredentials: !window.custom_backend};
 
@@ -378,10 +377,12 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             path_id: tenantId?.PathId,
         });
     }
-    postSetting(name: string, value: string) {
+
+    /** @deprecated use localStorage instead */
+    postSetting(settingsApi: string, name: string, value: string) {
         return this.request({
             method: 'PATCH',
-            url: settingsApi || '',
+            url: settingsApi,
             data: {[name]: value},
         });
     }

package/dist/services/settings.ts

@@ -0,0 +1,113 @@
+import {TENANT_PAGES_IDS} from '../store/reducers/tenant/constants';
+
+import {
+    ASIDE_HEADER_COMPACT_KEY,
+    CLUSTER_INFO_HIDDEN_KEY,
+    INVERTED_DISKS_KEY,
+    LANGUAGE_KEY,
+    LAST_USED_QUERY_ACTION_KEY,
+    PARTITIONS_HIDDEN_COLUMNS_KEY,
+    QUERY_INITIAL_MODE_KEY,
+    QUERY_USE_MULTI_SCHEMA_KEY,
+    SAVED_QUERIES_KEY,
+    TENANT_INITIAL_PAGE_KEY,
+    THEME_KEY,
+    USE_BACKEND_PARAMS_FOR_TABLES_KEY,
+    USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
+} from '../utils/constants';
+import {QUERY_ACTIONS, QUERY_MODES} from '../utils/query';
+import {parseJson} from '../utils/utils';
+
+export type SettingsObject = Record<string, unknown>;
+
+const USE_LOCAL_STORAGE_FOR_SETTINGS_KEY = 'useLocalStorageForSettings';
+
+/** User settings keys and their default values */
+const DEFAULT_USER_SETTINGS: SettingsObject = {
+    [THEME_KEY]: 'system',
+    [LANGUAGE_KEY]: undefined,
+    [INVERTED_DISKS_KEY]: false,
+    [USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY]: false,
+    [QUERY_USE_MULTI_SCHEMA_KEY]: false,
+    [SAVED_QUERIES_KEY]: [],
+    [TENANT_INITIAL_PAGE_KEY]: TENANT_PAGES_IDS.query,
+    [QUERY_INITIAL_MODE_KEY]: QUERY_MODES.script,
+    [LAST_USED_QUERY_ACTION_KEY]: QUERY_ACTIONS.execute,
+    [ASIDE_HEADER_COMPACT_KEY]: true,
+    [PARTITIONS_HIDDEN_COLUMNS_KEY]: [],
+    [CLUSTER_INFO_HIDDEN_KEY]: true,
+    [USE_BACKEND_PARAMS_FOR_TABLES_KEY]: false,
+};
+
+class SettingsManager {
+    constructor() {
+        // Migrate settings to LS if external API was used before
+        const settingsApi = window.web_version ? window.systemSettings?.settingsApi : undefined;
+
+        const useLocalStorage = this.readUserSettingsValue(USE_LOCAL_STORAGE_FOR_SETTINGS_KEY);
+
+        if (settingsApi && !useLocalStorage) {
+            const externalUserSettings = window.userSettings;
+
+            if (externalUserSettings) {
+                Object.entries(externalUserSettings).forEach(([key, value]) =>
+                    this.setUserSettingsValue(key, value),
+                );
+            }
+
+            this.setUserSettingsValue(USE_LOCAL_STORAGE_FOR_SETTINGS_KEY, true);
+        }
+    }
+
+    /**
+     * User settings - settings stored in LS or external store
+     */
+    getUserSettings() {
+        return this.extractSettingsFromLS();
+    }
+
+    /**
+     * Returns parsed settings value.
+     * If value cannot be parsed, returns initially stored string.
+     * If there is no value, return default value
+     */
+    readUserSettingsValue(key: string, defaultValue?: unknown) {
+        return this.readValueFromLS(key) ?? defaultValue ?? DEFAULT_USER_SETTINGS[key];
+    }
+
+    /**
+     * Stringify value and set it to LS
+     */
+    setUserSettingsValue(key: string, value: unknown) {
+        return this.setValueToLS(key, value);
+    }
+
+    private extractSettingsFromLS = () => {
+        return Object.entries(DEFAULT_USER_SETTINGS).reduce<SettingsObject>((acc, [key, value]) => {
+            acc[key] = this.readUserSettingsValue(key, value);
+            return acc;
+        }, {});
+    };
+
+    private readValueFromLS = (key: string): unknown => {
+        try {
+            const value = localStorage.getItem(key);
+
+            return parseJson(value);
+        } catch {
+            return undefined;
+        }
+    };
+
+    private setValueToLS = (key: string, value: unknown): void => {
+        try {
+            if (typeof value === 'string') {
+                localStorage.setItem(key, value);
+            } else {
+                localStorage.setItem(key, JSON.stringify(value));
+            }
+        } catch {}
+    };
+}
+
+export const settingsManager = new SettingsManager();

package/dist/store/reducers/executeQuery.ts

@@ -9,10 +9,10 @@ import type {
     QueryInHistory,
 } from '../../types/store/executeQuery';
 import type {QueryRequestParams, QueryMode, QuerySyntax} from '../../types/store/query';
-import {getValueFromLS, parseJson} from '../../utils/utils';
 import {QUERIES_HISTORY_KEY} from '../../utils/constants';
 import {QUERY_MODES, QUERY_SYNTAX, parseQueryAPIExecuteResponse} from '../../utils/query';
 import {parseQueryError} from '../../utils/error';
+import {settingsManager} from '../../services/settings';
 import '../../services/api';
 
 import {createRequestActionTypes, createApiRequest} from '../utils';
@@ -28,7 +28,10 @@ const GO_TO_NEXT_QUERY = 'query/GO_TO_NEXT_QUERY';
 const SET_MONACO_HOT_KEY = 'query/SET_MONACO_HOT_KEY';
 const SET_TENANT_PATH = 'query/SET_TENANT_PATH';
 
-const queriesHistoryInitial: string[] = parseJson(getValueFromLS(QUERIES_HISTORY_KEY, '[]'));
+const queriesHistoryInitial = settingsManager.readUserSettingsValue(
+    QUERIES_HISTORY_KEY,
+    [],
+) as string[];
 
 const sliceLimit = queriesHistoryInitial.length - MAXIMUM_QUERIES_IN_HISTORY;
 
@@ -97,7 +100,7 @@ const executeQuery: Reducer<ExecuteQueryState, ExecuteQueryAction> = (
             const newQueries = [...state.history.queries, {queryText, syntax}].slice(
                 state.history.queries.length >= MAXIMUM_QUERIES_IN_HISTORY ? 1 : 0,
             );
-            window.localStorage.setItem(QUERIES_HISTORY_KEY, JSON.stringify(newQueries));
+            settingsManager.setUserSettingsValue(QUERIES_HISTORY_KEY, newQueries);
             const currentIndex = newQueries.length - 1;
 
             return {

package/dist/store/reducers/settings/settings.ts

@@ -1,32 +1,8 @@
 import type {Reducer} from 'redux';
 import type {ThunkAction} from 'redux-thunk';
 
-import {
-    SAVED_QUERIES_KEY,
-    THEME_KEY,
-    TENANT_INITIAL_PAGE_KEY,
-    INVERTED_DISKS_KEY,
-    ASIDE_HEADER_COMPACT_KEY,
-    USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
-    PARTITIONS_HIDDEN_COLUMNS_KEY,
-    QUERY_INITIAL_MODE_KEY,
-    CLUSTER_INFO_HIDDEN_KEY,
-    LAST_USED_QUERY_ACTION_KEY,
-    USE_BACKEND_PARAMS_FOR_TABLES_KEY,
-    LANGUAGE_KEY,
-    QUERY_USE_MULTI_SCHEMA_KEY,
-} from '../../../utils/constants';
 import '../../../services/api';
-import {parseJson} from '../../../utils/utils';
-import {QUERY_ACTIONS, QUERY_MODES} from '../../../utils/query';
-import {
-    readSavedSettingsValue,
-    settingsApi,
-    systemSettings,
-    userSettings,
-} from '../../../utils/settings';
-
-import {TENANT_PAGES_IDS} from '../tenant/constants';
+import {settingsManager} from '../../../services/settings';
 
 import type {RootState} from '..';
 import type {
@@ -45,39 +21,12 @@ export const ProblemFilterValues = {
     PROBLEMS: 'With problems',
 } as const;
 
+const userSettings = settingsManager.getUserSettings();
+const systemSettings = window.systemSettings || {};
+
 export const initialState = {
     problemFilter: ProblemFilterValues.ALL,
-    userSettings: {
-        ...userSettings,
-        [THEME_KEY]: readSavedSettingsValue(THEME_KEY, 'system'),
-        [LANGUAGE_KEY]: readSavedSettingsValue(LANGUAGE_KEY),
-        [INVERTED_DISKS_KEY]: readSavedSettingsValue(INVERTED_DISKS_KEY, 'false'),
-        [USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY]: readSavedSettingsValue(
-            USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
-            'false',
-        ),
-        [QUERY_USE_MULTI_SCHEMA_KEY]: readSavedSettingsValue(QUERY_USE_MULTI_SCHEMA_KEY, 'false'),
-        [SAVED_QUERIES_KEY]: readSavedSettingsValue(SAVED_QUERIES_KEY, '[]'),
-        [TENANT_INITIAL_PAGE_KEY]: readSavedSettingsValue(
-            TENANT_INITIAL_PAGE_KEY,
-            TENANT_PAGES_IDS.query,
-        ),
-        [QUERY_INITIAL_MODE_KEY]: readSavedSettingsValue(
-            QUERY_INITIAL_MODE_KEY,
-            QUERY_MODES.script,
-        ),
-        [LAST_USED_QUERY_ACTION_KEY]: readSavedSettingsValue(
-            LAST_USED_QUERY_ACTION_KEY,
-            QUERY_ACTIONS.execute,
-        ),
-        [ASIDE_HEADER_COMPACT_KEY]: readSavedSettingsValue(ASIDE_HEADER_COMPACT_KEY, 'true'),
-        [PARTITIONS_HIDDEN_COLUMNS_KEY]: readSavedSettingsValue(PARTITIONS_HIDDEN_COLUMNS_KEY),
-        [CLUSTER_INFO_HIDDEN_KEY]: readSavedSettingsValue(CLUSTER_INFO_HIDDEN_KEY, 'true'),
-        [USE_BACKEND_PARAMS_FOR_TABLES_KEY]: readSavedSettingsValue(
-            USE_BACKEND_PARAMS_FOR_TABLES_KEY,
-            'false',
-        ),
-    },
+    userSettings,
     systemSettings,
 };
 
@@ -108,19 +57,12 @@ const settings: Reducer<SettingsState, SettingsAction> = (state = initialState,
 
 export const setSettingValue = (
     name: string,
-    value: string,
+    value: unknown,
 ): ThunkAction<void, RootState, unknown, SetSettingValueAction> => {
     return (dispatch) => {
         dispatch({type: SET_SETTING_VALUE, data: {name, value}});
 
-        // If there is no settingsApi, use localStorage
-        if (settingsApi) {
-            window.api.postSetting(name, value);
-        } else {
-            try {
-                localStorage.setItem(name, value);
-            } catch {}
-        }
+        settingsManager.setUserSettingsValue(name, value);
     };
 };
 
@@ -128,15 +70,6 @@ export const getSettingValue = (state: SettingsRootStateSlice, name: string) =>
     return state.settings.userSettings[name];
 };
 
-/**
- * Returns parsed settings value.
- * If value cannot be parsed, returns initially stored string
- */
-export const getParsedSettingValue = (state: SettingsRootStateSlice, name: string) => {
-    const value = state.settings.userSettings[name];
-    return parseJson(value);
-};
-
 export const changeFilter = (filter: ProblemFilterValue) => {
     return {
         type: CHANGE_PROBLEM_FILTER,

package/dist/store/reducers/settings/types.ts

@@ -1,17 +1,18 @@
 import type {ValueOf} from '../../../types/common';
+import type {SettingsObject} from '../../../services/settings';
 import {changeFilter, ProblemFilterValues, SET_SETTING_VALUE} from './settings';
 
 export type ProblemFilterValue = ValueOf<typeof ProblemFilterValues>;
 
 export interface SettingsState {
     problemFilter: ProblemFilterValue;
-    userSettings: Record<string, string | undefined>;
-    systemSettings: Record<string, string | undefined>;
+    userSettings: SettingsObject;
+    systemSettings: SettingsObject;
 }
 
 export type SetSettingValueAction = {
     type: typeof SET_SETTING_VALUE;
-    data: {name: string; value: string};
+    data: {name: string; value: unknown};
 };
 
 export type SettingsAction = ReturnType<typeof changeFilter> | SetSettingValueAction;

package/dist/styles/mixins.scss

@@ -15,26 +15,29 @@
     flex-direction: column;
 }
 
-@mixin body-typography() {
-    font-size: var(--yc-text-body-1-font-size);
-    line-height: var(--yc-text-body-1-line-height);
+@mixin body-1-typography() {
+    font-size: var(--g-text-body-1-font-size);
+    line-height: var(--g-text-body-1-line-height);
 }
-@mixin body2-typography() {
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+@mixin body-2-typography() {
+    font-size: var(--g-text-body-2-font-size);
+    line-height: var(--g-text-body-2-line-height);
 }
-@mixin body3-typography() {
-    font-size: var(--yc-text-body-3-font-size);
-    line-height: var(--yc-text-body-3-line-height);
+@mixin body-3-typography() {
+    font-size: var(--g-text-body-3-font-size);
+    line-height: var(--g-text-body-3-line-height);
 }
 @mixin lead-typography() {
-    font-size: var(--yc-text-subheader-3-font-size);
-    line-height: var(--yc-text-subheader-3-line-height);
+    font-size: var(--g-text-subheader-3-font-size);
+    line-height: var(--g-text-subheader-3-line-height);
 }
-
-@mixin title-typography() {
-    font-size: var(--yc-text-header-2-font-size);
-    line-height: var(--yc-text-header-2-line-height);
+@mixin header-1-typography() {
+    font-size: var(--g-text-header-1-font-size);
+    line-height: var(--g-text-header-1-line-height);
+}
+@mixin header-2-typography() {
+    font-size: var(--g-text-header-2-font-size);
+    line-height: var(--g-text-header-2-line-height);
 }
 
 @mixin sticky-top {
@@ -42,7 +45,7 @@
     top: 0;
     left: 0;
 
-    background-color: var(--yc-color-base-background);
+    background-color: var(--g-color-base-background);
 }
 
 @mixin loader() {
@@ -82,9 +85,8 @@
 @mixin info-viewer-title {
     margin: 15px 0 10px;
 
-    font-size: var(--yc-text-body-2-font-size);
     font-weight: 600;
-    line-height: var(--yc-text-body-2-line-height);
+    @include body-2-typography();
 }
 
 @mixin query-data-table() {
@@ -113,7 +115,7 @@
         }
 
         &__th {
-            box-shadow: inset 0 -1px 0 0 var(--yc-tabs-color-divider);
+            box-shadow: inset 0 -1px 0 0 var(--g-tabs-color-divider);
         }
     }
 }
@@ -121,14 +123,14 @@
 .link {
     text-decoration: none;
 
-    color: var(--yc-color-text-link);
+    color: var(--g-color-text-link);
 
     &_external {
         margin-right: 10px;
     }
 
     &:hover {
-        color: var(--yc-color-text-link-hover);
+        color: var(--g-color-text-link-hover);
     }
 }
 
@@ -143,8 +145,8 @@
         z-index: 2000;
         left: $left;
 
-        border-right: $border-width solid var(--yc-color-line-generic);
-        background-color: var(--yc-color-base-background);
+        border-right: $border-width solid var(--g-color-line-generic);
+        background-color: var(--g-color-base-background);
     }
     .data-table__row:hover .data-table__td:nth-child(#{$nth}) {
         background-color: var(--ydb-data-table-color-hover) !important;
@@ -199,9 +201,9 @@
 
 @mixin json-tree-styles {
     // stylelint-disable
-    font-family: var(--yc-font-family-monospace) !important;
-    font-size: var(--yc-text-code-1-font-size) !important;
-    line-height: var(--yc-text-code-1-line-height) !important;
+    font-family: var(--g-font-family-monospace) !important;
+    font-size: var(--g-text-code-1-font-size) !important;
+    line-height: var(--g-text-code-1-line-height) !important;
     // stylelint-enable
 
     .json-inspector__leaf_composite:before {
@@ -210,7 +212,7 @@
 
         font-size: 9px;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
     .json-inspector__leaf_composite.json-inspector__leaf_root:before {
         left: 0;
@@ -224,7 +226,7 @@
 
     & .json-inspector {
         &__key {
-            color: var(--yc-color-text-misc);
+            color: var(--g-color-text-misc);
         }
         &__leaf {
             position: relative;
@@ -241,7 +243,7 @@
             width: 300px;
             margin-bottom: 10px;
 
-            border: 1px solid var(--yc-color-line-generic);
+            border: 1px solid var(--g-color-line-generic);
             border-radius: 4px;
         }
         &__search {
@@ -251,11 +253,11 @@
             margin: 0;
             padding: 0;
 
-            font-family: var(--yc-text-body-font-family);
+            font-family: var(--g-text-body-font-family);
             font-size: 13px;
             vertical-align: top;
 
-            color: var(--yc-color-text-primary);
+            color: var(--g-color-text-primary);
             border: 0 solid transparent;
             border-width: 0 8px;
             border-right-width: 22px;
@@ -264,18 +266,18 @@
         }
         &__value {
             &_helper {
-                color: var(--yc-color-text-secondary);
+                color: var(--g-color-text-secondary);
             }
         }
         &__line:hover:after {
-            background: var(--yc-color-base-simple-hover);
+            background: var(--g-color-base-simple-hover);
         }
         &__show-original:before {
-            color: var(--yc-color-text-secondary);
+            color: var(--g-color-text-secondary);
         }
         &__show-original:hover:after,
         &__show-original:hover:before {
-            color: var(--yc-color-text-primary);
+            color: var(--g-color-text-primary);
         }
     }
 }