@gravity-ui/page-constructor 3.16.0 → 4.0.0

package/build/esm/components/Button/Button.css

@@ -12,6 +12,8 @@ unpredictable css rules order in build */
   margin-left: var(--btn-image-margin);
 }
 .pc-button-block_theme_github.pc-button-block_theme_github {
+  --g-button-background-color: var(--pc-monochrome-button-background-color);
+  --g-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
   --yc-button-background-color: var(--pc-monochrome-button-background-color);
   --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
 }
@@ -25,6 +27,8 @@ unpredictable css rules order in build */
   border-radius: 300px;
 }
 .pc-button-block_theme_monochrome {
+  --g-button-background-color: var(--pc-monochrome-button-background-color);
+  --g-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
   --yc-button-background-color: var(--pc-monochrome-button-background-color);
   --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
 }

package/build/esm/components/Button/Button.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
-import { ButtonProps as ButtonParams } from '../../models';
+import { ButtonProps as ButtonParams, QAProps } from '../../models';
 import './Button.css';
-export interface ButtonProps extends Omit<ButtonParams, 'url'> {
+export interface ButtonProps extends Omit<ButtonParams, 'url'>, QAProps {
     className?: string;
     url?: string;
     onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
-    qa?: string;
 }
 declare const Button: (props: ButtonProps) => JSX.Element;
 export default Button;

package/build/esm/components/Button/Button.js

@@ -1,6 +1,7 @@
 import { __rest } from "tslib";
 import React, { useCallback, useContext } from 'react';
-import { Button as CommonButton, Icon, Platform, StoreBadge } from '@gravity-ui/uikit';
+import { StoreBadge } from '@gravity-ui/components';
+import { Button as CommonButton, Icon, Platform } from '@gravity-ui/uikit';
 import { LocaleContext } from '../../context/localeContext/localeContext';
 import { useAnalytics } from '../../hooks';
 import { useMetrika } from '../../hooks/useMetrika';
@@ -13,7 +14,7 @@ import './Button.css';
 const b = block('button-block');
 const Button = (props) => {
     const handleMetrika = useMetrika();
-    const { lang, tld } = useContext(LocaleContext);
+    const { tld } = useContext(LocaleContext);
     const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text, width } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text", "width"]);
     const defaultImgPosition = 'left';
     const handleAnalytics = useAnalytics(DefaultEventNames.Button, url);
@@ -34,7 +35,7 @@ const Button = (props) => {
     const buttonProps = Object.assign(Object.assign({}, rest), { onClick });
     if (theme === 'app-store' || theme === 'google-play') {
         const platform = theme === 'app-store' ? Platform.IOS : Platform.ANDROID;
-        return React.createElement(StoreBadge, { className: buttonClass, platform: platform, lang: lang, url: url });
+        return React.createElement(StoreBadge, { className: buttonClass, platform: platform, href: url });
     }
     let icon;
     let image = img && (React.createElement("img", { className: b('image'), src: buttonImg.url, alt: buttonImg.alt || i18n('image-alt') }));

package/build/esm/components/ButtonTabs/ButtonTabs.css

@@ -3,6 +3,8 @@ unpredictable css rules order in build */
 .pc-button-tabs__item.pc-button-tabs__item {
   margin-right: 8px;
   margin-bottom: 12px;
+  --g-button-background-color: var(--pc-tab-item-background-color);
+  --g-button-background-color-hover: var(--pc-tab-item-background-color-hover);
   --yc-button-background-color: var(--pc-tab-item-background-color);
   --yc-button-background-color-hover: var(--pc-tab-item-background-color-hover);
 }
@@ -14,6 +16,8 @@ unpredictable css rules order in build */
 }
 .pc-button-tabs__item.pc-button-tabs__item_active {
   pointer-events: none;
+  --g-button-background-color: var(--pc-selected-tab-item-background-color);
+  --g-button-background-color-hover: var(--pc-selected-tab-item-background-color-hover);
   --yc-button-background-color: var(--pc-selected-tab-item-background-color);
   --yc-button-background-color-hover: var(--pc-selected-tab-item-background-color-hover);
 }

package/build/esm/components/ButtonTabs/ButtonTabs.d.ts

@@ -1,18 +1,17 @@
 import React from 'react';
 import { ButtonSize } from '@gravity-ui/uikit';
-import { ButtonProps } from '../../models';
+import { ButtonProps, QAProps } from '../../models';
 import './ButtonTabs.css';
 export interface ButtonTabsItemProps extends Omit<ButtonProps, 'url' | 'primary' | 'target' | 'text'> {
     id: string | null;
     title: string;
 }
-export interface ButtonTabsProps {
+export interface ButtonTabsProps extends QAProps {
     className?: string;
     items: ButtonTabsItemProps[];
     activeTab?: string | null;
     onSelectTab?: (tabId: string | null, e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
     tabSize?: ButtonSize;
-    qa?: string;
 }
 declare const ButtonTabs: React.FC<ButtonTabsProps>;
 export default ButtonTabs;

package/build/esm/components/CardBase/CardBase.css

@@ -15,12 +15,12 @@ unpredictable css rules order in build */
   height: 100%;
   overflow-x: hidden;
   border-radius: var(--pc-border-radius);
-  background-color: var(--yc-color-base-float);
+  background-color: var(--g-color-base-float);
   transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
   display: flex;
 }
 .pc-card-base-block_border_line {
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
 }
 .pc-card-base-block_border_line, .pc-card-base-block_border_none {
   cursor: default;
@@ -42,8 +42,8 @@ unpredictable css rules order in build */
   padding: 32px;
 }
 .pc-card-base-block__body {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
   flex: 1;
   padding: 32px;
 }
@@ -69,7 +69,7 @@ a.pc-card-base-block {
   height: 100%;
   overflow-x: hidden;
   border-radius: var(--pc-border-radius);
-  background-color: var(--yc-color-base-float);
+  background-color: var(--g-color-base-float);
   transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 a.pc-card-base-block:hover, a.pc-card-base-block:active {
@@ -77,7 +77,7 @@ a.pc-card-base-block:hover, a.pc-card-base-block:active {
   color: inherit;
 }
 a.pc-card-base-block_border_line {
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
 }
 a.pc-card-base-block_border_line, a.pc-card-base-block_border_none {
   cursor: default;

package/build/esm/components/Control/Control.css

@@ -42,36 +42,36 @@ unpredictable css rules order in build */
   height: 36px;
 }
 .pc-control_theme_primary {
-  color: var(--yc-color-text-complementary);
+  color: var(--g-color-text-complementary);
 }
 .pc-control_theme_primary:hover {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .pc-control_theme_secondary {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-control_theme_secondary:hover {
-  color: var(--yc-color-text-complementary);
+  color: var(--g-color-text-complementary);
 }
 .pc-control_theme_link {
-  color: var(--yc-color-text-complementary);
+  color: var(--g-color-text-complementary);
 }
 .pc-control_theme_link:hover {
-  color: var(--yc-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 .pc-control_theme_accent {
   opacity: 0.7;
-  color: var(--yc-color-text-yandex-red);
+  color: var(--g-color-base-danger-heavy);
 }
 .pc-control_theme_accent:hover {
   opacity: 1;
 }
 .pc-control_disabled {
   cursor: default;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-control_disabled:hover {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 @media (max-width: 768px) {
   .pc-control:hover {

package/build/esm/components/ErrorWrapper/ErrorWrapper.css

@@ -1,10 +1,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-ErrorWrapper {
-  font-size: var(--yc-text-body-1-font-size);
-  line-height: var(--yc-text-body-1-line-height);
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
   white-space: nowrap;
-  color: var(--yc-color-text-danger);
+  color: var(--g-color-text-danger);
 }
 .pc-ErrorWrapper__text {
   margin-bottom: 5px;

package/build/esm/components/FileLink/FileLink.css

@@ -1,27 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-file-link {
-  --pc-color-label-background: rgba(0, 0, 0, 0.07);
   align-items: baseline;
 }
-.pc-file-link_ext_pdf {
-  --pc-file-label-color: var(--yc-color-promo-highlight-tomato);
-}
-.pc-file-link_ext_doc {
-  --pc-file-label-color: var(--yc-color-promo-highlight-sky);
-}
-.pc-file-link_ext_xls {
-  --pc-file-label-color: var(--yc-color-promo-highlight-mint);
-}
-.pc-file-link_ext_ppt {
-  --pc-file-label-color: var(--yc-color-promo-highlight-copper);
-}
-.pc-file-link_ext_fig {
-  --pc-file-label-color: var(--yc-color-promo-highlight-neon);
-}
-.pc-file-link_ext_zip {
-  --pc-file-label-color: var(--yc-color-promo-highlight-asphalt);
-}
 .pc-file-link_type_horizontal {
   display: flex;
 }
@@ -29,59 +10,38 @@ unpredictable css rules order in build */
   margin-right: 8px;
 }
 .pc-file-link__file-label {
-  flex: 0 0 auto;
-  width: 44px;
-  height: 24px;
-  line-height: 24px;
-  background-color: var(--pc-file-label-color);
-  color: var(--yc-color-text-light-primary);
-  border-radius: 4px;
-  text-transform: uppercase;
-  text-align: center;
-}
-.pc-file-link__file-label {
-  color: var(--yc-color-text-primary);
   display: flex;
   justify-content: center;
-  flex-direction: column;
+  text-transform: uppercase;
+}
+.pc-file-link__file-label .yc-label__text {
+  width: initial;
 }
 .pc-file-link__link > a {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .pc-file-link__link > a:hover {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-file-link_size_l .pc-file-link__file-label {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
-  width: 44px;
-  height: 24px;
-  padding: 2px 6px;
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  width: 52px;
 }
 .pc-file-link_size_m .pc-file-link__file-label, .pc-file-link_size_s .pc-file-link__file-label {
-  font-size: var(--yc-text-body-1-font-size);
-  line-height: var(--yc-text-body-1-line-height);
-  width: 36px;
-  height: 20px;
-  padding: 1px 4px;
-}
-.pc-file-link_theme_dark .pc-file-link__file-label {
-  color: var(--yc-color-text-light-primary);
-  background-color: var(--yc-color-base-light-simple-hover);
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+  width: 44px;
 }
 .pc-file-link_theme_dark .pc-file-link__link > a {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-file-link_theme_dark .pc-file-link__link > a:hover {
-  color: var(--yc-color-text-light-secondary);
-}
-.pc-file-link_theme_light .pc-file-link__file-label {
-  color: var(--yc-color-text-dark-primary);
-  background-color: var(--pc-color-label-background);
+  color: var(--g-color-text-light-secondary);
 }
 .pc-file-link_theme_light .pc-file-link__link > a {
-  color: var(--yc-color-text-dark-primary);
+  color: var(--g-color-text-dark-primary);
 }
 .pc-file-link_theme_light .pc-file-link__link > a:hover {
-  color: var(--yc-color-text-dark-secondary);
+  color: var(--g-color-text-dark-secondary);
 }

package/build/esm/components/FileLink/FileLink.js

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { Label } from '@gravity-ui/uikit';
 import { LocationContext } from '../../context/locationContext';
 import { block, getLinkProps } from '../../utils';
 import './FileLink.css';
@@ -20,12 +21,28 @@ export function getFileExt(name) {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     return name && name.split('.').pop().toLowerCase();
 }
+const FileExtensionThemes = {
+    [FileExtension.PDF]: 'danger',
+    [FileExtension.DOC]: 'info',
+    [FileExtension.XLS]: 'success',
+    [FileExtension.PPT]: 'warning',
+    [FileExtension.FIG]: 'normal',
+    [FileExtension.ZIP]: 'unknown',
+};
+const LabelSizeMap = {
+    l: 's',
+    m: 's',
+    s: 'xs',
+    xs: 'xs',
+};
 const FileLink = (props) => {
     const { hostname } = useContext(LocationContext);
     const { href, text, type = 'vertical', textSize = 'm', className, theme = 'default', onClick, } = props;
     const fileExt = getFileExt(href);
+    const labelTheme = (FileExtensionThemes[fileExt] || 'unknown');
+    const labelSize = LabelSizeMap[textSize];
     return (React.createElement("div", { className: b({ ext: fileExt, type, size: textSize, theme }, className) },
-        Object.values(FileExtension).includes(fileExt) && (React.createElement("div", { className: b('file-label') }, fileExt)),
+        React.createElement(Label, { className: b('file-label'), size: labelSize, theme: labelTheme }, fileExt),
         React.createElement("div", { className: b('link') },
             React.createElement("a", Object.assign({ href: href }, getLinkProps(href, hostname), { onClick: onClick }), text))));
 };

package/build/esm/components/FullWidthBackground/FullWidthBackground.css

@@ -4,7 +4,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
   z-index: 0;
   pointer-events: none;
 }

package/build/esm/components/FullscreenImage/FullscreenImage.css

@@ -28,7 +28,7 @@ unpredictable css rules order in build */
   width: 36px;
   height: 36px;
   border-radius: 8px;
-  background-color: var(--yc-color-base-simple-hover-solid);
+  background-color: var(--g-color-base-simple-hover-solid);
   cursor: pointer;
   opacity: 0;
   transition: 0.3s;
@@ -37,10 +37,10 @@ unpredictable css rules order in build */
   opacity: 1;
 }
 .pc-fullscreen-image__icon {
-  color: var(--yc-color-text-hint);
+  color: var(--g-color-text-hint);
 }
 .pc-fullscreen-image__icon_hover:hover {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 @media (max-width: 1185px) {
   .pc-fullscreen-image__modal-image {

package/build/esm/components/FullscreenMedia/FullscreenMedia.css

@@ -41,7 +41,7 @@ unpredictable css rules order in build */
   width: 36px;
   height: 36px;
   border-radius: 8px;
-  background-color: var(--yc-color-base-simple-hover-solid);
+  background-color: var(--g-color-base-simple-hover-solid);
   cursor: pointer;
   z-index: 10;
 }
@@ -55,10 +55,10 @@ unpredictable css rules order in build */
   pointer-events: inherit;
 }
 .pc-full-screen-media__icon {
-  color: var(--yc-color-text-hint);
+  color: var(--g-color-text-hint);
 }
 .pc-full-screen-media__icon_hover:hover {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 @media (max-width: 577px) {
   .pc-full-screen-media__icon-wrapper {

package/build/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbs.css

@@ -8,35 +8,35 @@ unpredictable css rules order in build */
   display: inline-block;
 }
 .pc-header-breadcrumbs__text {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .utilityfocus .pc-header-breadcrumbs__text:focus {
   outline: 2px solid #ffdb4d;
 }
 .pc-header-breadcrumbs__text:hover, .pc-header-breadcrumbs__text:active {
-  --pc-text-header-color: var(--yc-color-text-link-hover);
-  color: var(--yc-color-text-link-hover);
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 .pc-header-breadcrumbs__text:after {
   content: " / ";
   margin: 0 8px 0 6px;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-header-breadcrumbs__text:hover {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__text {
-  color: var(--yc-color-text-light-secondary);
+  color: var(--g-color-text-light-secondary);
 }
 .pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__text:after {
-  color: var(--yc-color-text-light-secondary);
+  color: var(--g-color-text-light-secondary);
 }
 .pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__text:hover {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }

package/build/esm/components/Image/Image.d.ts

@@ -1,11 +1,10 @@
 import { CSSProperties, MouseEventHandler } from 'react';
-import { ImageDeviceProps, ImageObjectProps } from '../../models';
-export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps> {
+import { ImageDeviceProps, ImageObjectProps, QAProps } from '../../models';
+export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps>, QAProps {
     style?: CSSProperties;
     className?: string;
     onClick?: MouseEventHandler;
     containerClassName?: string;
-    qa?: string;
 }
 declare const Image: (props: ImageProps) => JSX.Element | null;
 export default Image;

package/build/esm/components/Link/Link.css

@@ -5,7 +5,7 @@ unpredictable css rules order in build */
 }
 .pc-link-block__link {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
   display: flex;
@@ -15,14 +15,14 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-link-block__link:hover, .pc-link-block__link:active {
-  --pc-text-header-color: var(--yc-color-text-link-hover);
-  color: var(--yc-color-text-link-hover);
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 .pc-link-block__link_theme_dark {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-link-block__link_theme_dark:hover {
-  color: var(--yc-color-text-light-secondary);
+  color: var(--g-color-text-light-secondary);
 }
 .pc-link-block__link_has-arrow {
   display: inherit;
@@ -30,7 +30,7 @@ unpredictable css rules order in build */
 }
 .pc-link-block__link_has-arrow:hover, .pc-link-block__link_has-arrow:active {
   --pc-text-header-color: inherit;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
 }
 .pc-link-block__link_has-arrow .pc-link-block__content {
   white-space: normal;
@@ -39,7 +39,7 @@ unpredictable css rules order in build */
   transform: translateX(5px) rotate(-90deg);
 }
 .pc-link-block__link.pc-link-block__link_has-arrow.pc-link-block__link_theme_dark:hover {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-link-block__arrow {
   position: relative;
@@ -48,17 +48,17 @@ unpredictable css rules order in build */
   transform: rotate(-90deg);
 }
 .pc-link-block_size_l {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
 }
 .pc-link-block_size_m {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
 }
 .pc-link-block_size_m .pc-link-block__arrow {
   top: 1px;
 }
 .pc-link-block_size_s {
-  font-size: var(--yc-text-body-1-font-size);
-  line-height: var(--yc-text-body-1-line-height);
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
 }

package/build/esm/components/Media/Video/Video.js

@@ -45,6 +45,7 @@ const Video = (props) => {
         return video.src.length && !hasVideoFallback ? (React.createElement("div", { className: b('wrap', videoClassName), style: { height } },
             React.createElement("video", { disablePictureInPicture: true, playsInline: true, 
                 // @ts-ignore
+                // eslint-disable-next-line react/no-unknown-property
                 pip: "false", className: b('item'), ref: ref, preload: "metadata", muted: true }, getVideoTypesWithPriority(video.src).map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type })))))) : null;
     }, [video, videoClassName, hasVideoFallback, height]);
     switch (video.type) {

package/build/esm/components/MetaInfo/MetaInfo.css

@@ -1,8 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-meta-info {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
   display: flex;
   align-items: center;
   font-weight: 500;

package/build/esm/components/OverflowScroller/OverflowScroller.css

@@ -28,7 +28,7 @@
   width: 32px;
   height: calc(100% - 1px);
   cursor: pointer;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-overflow-scroller__arrow_type_left {
   left: 0;

package/build/esm/components/ReactPlayer/CustomBarControls.css

@@ -12,7 +12,7 @@ unpredictable css rules order in build */
   position: relative;
   width: 64px;
   height: 64px;
-  background: var(--yc-color-base-background);
+  background: var(--g-color-base-background);
   transition: background-color 300ms;
 }
 .pc-CustomBarControls__button:hover {

package/build/esm/components/ReactPlayer/ReactPlayer.css

@@ -28,8 +28,8 @@ unpredictable css rules order in build */
   border-radius: 166px;
 }
 .pc-ReactPlayer__button_theme_blue {
-  color: var(--yc-color-base-background);
-  background-color: var(--yc-color-base-special);
+  color: var(--g-color-base-background);
+  background-color: var(--g-color-base-brand);
 }
 .pc-ReactPlayer__button_theme_grey {
   color: var(--pc-text-header-color);

package/build/esm/components/Table/Table.css

@@ -1,8 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-table {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
   margin-top: 32px;
 }
 .pc-table__table {
@@ -16,7 +16,7 @@ unpredictable css rules order in build */
   font-weight: 500;
 }
 .pc-table__row:first-child .pc-table__cell {
-  border-bottom-color: var(--yc-color-line-generic-active);
+  border-bottom-color: var(--g-color-line-generic-active);
   align-items: flex-end;
   padding-top: 0;
 }
@@ -25,7 +25,7 @@ unpredictable css rules order in build */
   display: flex;
   flex: 1;
   align-items: center;
-  border-bottom: 1px solid var(--yc-color-line-generic);
+  border-bottom: 1px solid var(--g-color-line-generic);
 }
 .pc-table__cell:first-child {
   flex: 2;
@@ -49,18 +49,18 @@ unpredictable css rules order in build */
   box-sizing: border-box;
 }
 .pc-table__marker_type_disk.pc-table__marker_index_0 {
-  background-color: var(--yc-color-infographics-neutral-light);
+  background-color: var(--g-color-base-neutral-light);
 }
 .pc-table__marker_type_disk.pc-table__marker_index_1 {
-  background-color: var(--yc-my-color-brand-normal);
+  background-color: var(--g-color-base-brand);
 }
 .pc-table__marker_type_disk.pc-table__marker_index_2 {
-  border: 1px solid var(--yc-color-text-hint);
+  border: 1px solid var(--g-color-text-hint);
 }
 .pc-table__legend {
   display: flex;
   margin-top: 20px;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-table__legend-item {
   display: flex;

package/build/esm/components/Title/Title.css

@@ -4,13 +4,13 @@ unpredictable css rules order in build */
   margin-top: 12px;
 }
 .pc-title__description .yfm {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
 }
 .pc-title__description_titleSize_s, .pc-title__description_titleSize_xs {
   margin-top: 8px;
 }
 .pc-title__description_titleSize_s .yfm, .pc-title__description_titleSize_xs .yfm {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
 }