@gravity-ui/page-constructor 3.16.0 → 4.0.0

package/README.md

@@ -195,7 +195,7 @@ To add a theme to a block property:
 
 1. In the `models/blocks.ts` file, define the type of the respective block property using the `ThemeSupporting<T>` generic, where `T` is the type of the property.
 
-2. In the file with the block's `react` component, get the value of the property with the theme via `getThemedValue` and `ThemeValueContext` (see examples in the `Banner.tsx` block).
+2. In the file with the block's `react` component, get the value of the property with the theme via `getThemedValue` and `useTheme` hook (see examples in the `MediaBlock.tsx` block).
 
 3. Add theme support to the property validator: in the block's `schema.ts` file, wrap this property in `withTheme`.
 

package/build/cjs/blocks/Companies/Companies.css

@@ -8,15 +8,15 @@ unpredictable css rules order in build */
   text-align: center;
 }
 .pc-companies-block__title {
-  font-size: var(--yc-text-display-2-font-size);
-  line-height: var(--yc-text-display-2-line-height);
+  font-size: var(--g-text-display-2-font-size);
+  line-height: var(--g-text-display-2-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
 }
 @media (max-width: 576px) {
   .pc-companies-block__title {
-    font-size: var(--yc-text-display-1-font-size);
-    line-height: var(--yc-text-display-1-line-height);
+    font-size: var(--g-text-display-1-font-size);
+    line-height: var(--g-text-display-1-line-height);
   }
 }
 .pc-companies-block__images {

package/build/cjs/blocks/Companies/Companies.js

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompaniesBlock = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const react_1 = tslib_1.__importDefault(require("react"));
 const components_1 = require("../../components");
 const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
-const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const theme_1 = require("../../context/theme");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('companies-block');
 const CompaniesBlock = ({ title, images, animated }) => {
-    const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
+    const theme = (0, theme_1.useTheme)();
     const themedImages = (0, utils_1.getThemedValue)(images, theme) || {};
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), offset: 150, animate: animated },
         react_1.default.createElement("div", { className: b('content') },

package/build/cjs/blocks/ContentLayout/ContentLayout.css

@@ -15,12 +15,12 @@ unpredictable css rules order in build */
   margin-top: 24px;
 }
 .pc-content-layout-block__files_size_s {
-  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-content-layout-block__files_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-content-layout-block__files_centered {
   margin-left: auto;

package/build/cjs/blocks/ContentLayout/ContentLayout.js

@@ -31,9 +31,7 @@ function getTextWidth(size) {
 }
 const ContentLayoutBlock = (props) => {
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
-    const { textContent, fileContent } = props;
-    const propsSource = props.properties || props;
-    const { size = 'l', background, centered, theme = 'default', textWidth = 'm' } = propsSource;
+    const { textContent, fileContent, size = 'l', background, centered, theme = 'default', textWidth = 'm', } = props;
     const colSizes = (0, react_1.useMemo)(() => getTextWidth(textWidth), [textWidth]);
     return (react_1.default.createElement("div", { className: b({ size, background: Boolean(background) }) },
         react_1.default.createElement(sub_blocks_1.Content, Object.assign({ className: b('content') }, textContent, { size: size, centered: centered, colSizes: colSizes, theme: theme })),

package/build/cjs/blocks/ExtendedFeatures/ExtendedFeatures.css

@@ -17,17 +17,17 @@ unpredictable css rules order in build */
   padding-right: 32px;
 }
 .pc-ExtendedFeaturesBlock__item-title {
-  font-size: var(--yc-text-header-1-font-size);
-  line-height: var(--yc-text-header-1-line-height);
+  font-size: var(--g-text-header-1-font-size);
+  line-height: var(--g-text-header-1-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
   display: block;
   position: relative;
   margin-bottom: 8px;
 }
 .pc-ExtendedFeaturesBlock__item-title a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -35,28 +35,28 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-ExtendedFeaturesBlock__item-title a:hover, .pc-ExtendedFeaturesBlock__item-title a: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-ExtendedFeaturesBlock__item-label {
-  font-size: var(--yc-text-caption-2-font-size);
-  line-height: var(--yc-text-caption-2-line-height);
+  font-size: var(--g-text-caption-2-font-size);
+  line-height: var(--g-text-caption-2-line-height);
   position: relative;
   top: -3px;
   height: 16px;
   margin-left: 8px;
   padding: 1.5px 5px 2px;
-  color: var(--yc-color-base-background);
-  background-color: var(--yc-my-color-brand-normal);
+  color: var(--g-color-base-background);
+  background-color: var(--g-color-base-brand);
   border-radius: 4px;
 }
 .pc-ExtendedFeaturesBlock__item-text, .pc-ExtendedFeaturesBlock__item-link {
-  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-ExtendedFeaturesBlock__item-text a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -64,12 +64,12 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-ExtendedFeaturesBlock__item-text a:hover, .pc-ExtendedFeaturesBlock__item-text a: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-ExtendedFeaturesBlock__item-link {
   margin-top: 8px;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
 }
 .pc-ExtendedFeaturesBlock__icon {
   width: 32px;

package/build/cjs/blocks/ExtendedFeatures/ExtendedFeatures.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExtendedFeaturesBlock = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const react_1 = tslib_1.__importDefault(require("react"));
 const components_1 = require("../../components/");
 const Image_1 = tslib_1.__importDefault(require("../../components/Image/Image"));
 const utils_1 = require("../../components/Media/Image/utils");
-const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const theme_1 = require("../../context/theme");
 const grid_1 = require("../../grid");
 const sub_blocks_1 = require("../../sub-blocks");
 const utils_2 = require("../../utils");
@@ -17,7 +17,7 @@ const DEFAULT_SIZES = {
     md: 4,
 };
 const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_SIZES, animated, }) => {
-    const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
+    const theme = (0, theme_1.useTheme)();
     return (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
         react_1.default.createElement(components_1.Title, { title: title, subtitle: description, className: b('header') }),
         react_1.default.createElement("div", { className: b('items') },

package/build/cjs/blocks/Header/Header.css

@@ -23,7 +23,7 @@ unpredictable css rules order in build */
 .pc-header-block__content_theme_dark .pc-header-block__title,
 .pc-header-block__content_theme_dark .pc-header-block__description .yfm,
 .pc-header-block__content_theme_dark .pc-header-block__description .yfm * {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-header-block__content_vertical-offset {
   margin: 16px 0;
@@ -48,21 +48,21 @@ unpredictable css rules order in build */
   z-index: 10;
 }
 .pc-header-block__title {
-  font-size: var(--yc-text-display-4-font-size);
-  line-height: var(--yc-text-display-4-line-height);
+  font-size: var(--g-text-display-4-font-size);
+  line-height: var(--g-text-display-4-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
   position: relative;
 }
 @media (max-width: 577px) {
   .pc-header-block__title {
-    font-size: var(--yc-text-display-2-font-size);
-    line-height: var(--yc-text-display-2-line-height);
+    font-size: var(--g-text-display-2-font-size);
+    line-height: var(--g-text-display-2-line-height);
   }
 }
 .pc-header-block__title a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -70,21 +70,21 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-header-block__title a:hover, .pc-header-block__title a: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-block__description {
   margin-top: 16px;
   font-weight: normal;
-  font-size: var(--yc-text-caption-2-font-size);
-  line-height: var(--yc-text-caption-2-line-height);
-  margin-block-end: var(--yc-text-body-1-line-height);
+  font-size: var(--g-text-caption-2-font-size);
+  line-height: var(--g-text-caption-2-line-height);
+  margin-block-end: var(--g-text-body-1-line-height);
 }
 .pc-header-block__description .yfm,
 .pc-header-block__description .yfm * {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
-  color: var(--yc-color-text-primary);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+  color: var(--g-color-text-primary);
 }
 .pc-header-block__buttons {
   margin-top: 16px;
@@ -165,18 +165,18 @@ unpredictable css rules order in build */
   transform: none;
   max-width: none;
   width: 100%;
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
 }
 .pc-header-block__overtitle {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
-  margin-block-start: 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);
+  margin-block-start: var(--g-text-body-3-line-height);
   margin-bottom: 8px;
   font-weight: 400;
 }
 .pc-header-block__overtitle a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -184,8 +184,8 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-header-block__overtitle a:hover, .pc-header-block__overtitle a: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);
 }
 @media (max-width: 1440px) {
   .pc-header-block__background, .pc-header-block__background.pc-header-block__background_media {

package/build/cjs/blocks/Header/Header.js

@@ -8,7 +8,7 @@ const HeaderBreadcrumbs_1 = tslib_1.__importDefault(require("../../components/He
 const utils_1 = require("../../components/Media/Image/utils");
 const YFMWrapper_1 = tslib_1.__importDefault(require("../../components/YFMWrapper/YFMWrapper"));
 const mobileContext_1 = require("../../context/mobileContext");
-const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const theme_1 = require("../../context/theme");
 const grid_1 = require("../../grid");
 const utils_2 = require("../../utils");
 const utils_3 = require("./utils");
@@ -23,7 +23,7 @@ const FullWidthBackground = ({ background }) => (react_1.default.createElement("
 const HeaderBlock = (props) => {
     const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, } = props;
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
-    const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
+    const theme = (0, theme_1.useTheme)();
     const hasRightSideImage = Boolean(image || video);
     const curImageSize = imageSize || (0, utils_3.getImageSize)(width);
     const titleSizes = hasRightSideImage ? (0, utils_3.titleWithImageSizes)(curImageSize) : (0, utils_3.getTitleSizes)(width);

package/build/cjs/blocks/Icons/Icons.css

@@ -4,8 +4,8 @@ unpredictable css rules order in build */
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  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-icons-block_size_s .pc-icons-block__item {
   width: 96px;

package/build/cjs/blocks/Info/Info.css

@@ -1,7 +1,7 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-info-block__container {
-  background-color: var(--yc-color-base-special);
+  background-color: var(--g-color-base-brand);
   padding: 96px 64px;
   border-radius: var(--pc-border-radius);
 }

package/build/cjs/blocks/Info/Info.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoBlock = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const react_1 = tslib_1.__importDefault(require("react"));
+const theme_1 = require("../../context/theme");
 const grid_1 = require("../../grid");
 const Content_1 = tslib_1.__importDefault(require("../../sub-blocks/Content/Content"));
 const utils_1 = require("../../utils");
@@ -11,7 +11,7 @@ const b = (0, utils_1.block)('info-block');
 const sizes = { md: 6, all: 12 };
 const InfoBlock = (props) => {
     const { backgroundColor, theme: blockTheme = 'dark', buttons = [], title, sectionsTitle, links = [], rightContent = {}, leftContent = {}, } = props;
-    const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
+    const theme = (0, theme_1.useTheme)();
     const contentTheme = blockTheme === 'dark' ? 'dark' : 'default';
     const rightLinks = [
         ...((rightContent === null || rightContent === void 0 ? void 0 : rightContent.links) || []),

package/build/cjs/blocks/Media/Media.js

@@ -5,12 +5,12 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const Media_1 = tslib_1.__importDefault(require("../../components/Media/Media"));
 const MediaBase_1 = tslib_1.__importDefault(require("../../components/MediaBase/MediaBase"));
-const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const theme_1 = require("../../context/theme");
 const utils_1 = require("../../utils");
 const MediaBlock = (props) => {
     const { media } = props;
     const [play, setPlay] = (0, react_1.useState)(false);
-    const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
+    const theme = (0, theme_1.useTheme)();
     const mediaThemed = (0, utils_1.getThemedValue)(media, theme);
     return (react_1.default.createElement(MediaBase_1.default, Object.assign({}, props, { onScroll: () => setPlay(true) }),
         react_1.default.createElement(MediaBase_1.default.Card, null,

package/build/cjs/blocks/PromoFeaturesBlock/PromoFeaturesBlock.css

@@ -5,10 +5,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-PromoFeaturesBlock__card-title {
-  font-size: var(--yc-text-header-1-font-size);
-  line-height: var(--yc-text-header-1-line-height);
+  font-size: var(--g-text-header-1-font-size);
+  line-height: var(--g-text-header-1-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
 }
 .pc-PromoFeaturesBlock__card-container {
   display: flex;
@@ -23,7 +23,7 @@ unpredictable css rules order in build */
   background-color: inherit;
 }
 .pc-PromoFeaturesBlock__background_grey {
-  background-color: var(--yc-color-base-misc);
+  background-color: var(--g-color-base-misc-light);
 }
 .pc-PromoFeaturesBlock_grey {
   padding: 64px 0;
@@ -44,8 +44,8 @@ unpredictable css rules order in build */
   margin-bottom: 8px;
 }
 .pc-PromoFeaturesBlock__card-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);
 }
 .pc-PromoFeaturesBlock__card-media {
   margin-top: 16px;
@@ -57,24 +57,24 @@ unpredictable css rules order in build */
   padding: 32px;
 }
 .pc-PromoFeaturesBlock__card_light {
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
 }
 .pc-PromoFeaturesBlock__card_default {
-  background-color: var(--yc-color-base-misc);
+  background-color: var(--g-color-base-misc-light);
 }
 .pc-PromoFeaturesBlock__card_accent {
-  color: var(--yc-color-text-light-primary);
-  background-color: var(--yc-color-base-special);
+  color: var(--g-color-text-light-primary);
+  background-color: var(--g-color-base-brand);
 }
 .pc-PromoFeaturesBlock__card_accent .pc-PromoFeaturesBlock__card-title,
 .pc-PromoFeaturesBlock__card_accent .pc-PromoFeaturesBlock__card-text > .yfm * {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-PromoFeaturesBlock__card_accent-light {
-  background-color: var(--yc-color-base-selection);
+  background-color: var(--pc-color-base-copper);
 }
 .pc-PromoFeaturesBlock__card_primary {
-  background-color: var(--yc-color-promo-base-gold);
+  background-color: var(--pc-color-base-gold);
 }
 @media (min-width: 769px) {
   .pc-PromoFeaturesBlock.pc-AnimateBlock .pc-PromoFeaturesBlock__card-container-column, .pc-AnimateBlock .pc-PromoFeaturesBlock .pc-PromoFeaturesBlock__card-container-column {

package/build/cjs/blocks/Questions/Questions.css

@@ -12,23 +12,23 @@ unpredictable css rules order in build */
 }
 .pc-QuestionsBlock__item {
   padding-bottom: 32px;
-  border-bottom: 1px solid var(--yc-color-line-generic);
+  border-bottom: 1px solid var(--g-color-line-generic);
 }
 .pc-QuestionsBlock__item + .pc-QuestionsBlock__item {
   padding-top: 32px;
 }
 .pc-QuestionsBlock__item-title {
-  font-size: var(--yc-text-header-1-font-size);
-  line-height: var(--yc-text-header-1-line-height);
+  font-size: var(--g-text-header-1-font-size);
+  line-height: var(--g-text-header-1-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
   position: relative;
   padding-right: 24px;
   cursor: pointer;
 }
 .pc-QuestionsBlock__item-title a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -36,23 +36,23 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-QuestionsBlock__item-title a:hover, .pc-QuestionsBlock__item-title a: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-QuestionsBlock__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);
   margin-top: 12px;
 }
 .pc-QuestionsBlock__arrow {
   position: absolute;
   right: 0;
   top: 0;
-  color: var(--yc-color-text-info);
+  color: var(--g-color-text-primary);
 }
 .pc-QuestionsBlock__link {
-  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);
 }
 @media (max-width: 769px) {
   .pc-QuestionsBlock__title {

package/build/cjs/blocks/Share/Share.css

@@ -5,10 +5,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-share-block__title {
-  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);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
   text-align: center;
   font-weight: normal;
 }
@@ -20,27 +20,29 @@ unpredictable css rules order in build */
 .pc-share-block__item.pc-share-block__item {
   display: flex;
   justify-content: center;
-  width: 48px;
+  align-items: center;
+  /* stylelint-disable-next-line declaration-no-important */
+  width: 48px !important;
   height: 48px;
   border-radius: 100%;
 }
 .pc-share-block__item.pc-share-block__item_type_vk {
-  background-color: var(--yc-color-vk);
+  background-color: var(--pc-color-vk);
 }
 .pc-share-block__item.pc-share-block__item_type_facebook {
-  background-color: var(--yc-color-facebook);
+  background-color: var(--pc-color-facebook);
 }
 .pc-share-block__item.pc-share-block__item_type_twitter {
-  background-color: var(--yc-color-twitter);
+  background-color: var(--pc-color-twitter);
 }
 .pc-share-block__item.pc-share-block__item_type_telegram {
-  background-color: var(--yc-color-telegram);
+  background-color: var(--pc-color-telegram);
 }
 .pc-share-block__item.pc-share-block__item_type_telegram {
-  background-color: var(--yc-color-telegram);
+  background-color: var(--pc-color-telegram);
 }
 .pc-share-block__item.pc-share-block__item_type_linkedin {
-  background-color: var(--yc-color-linkedin);
+  background-color: var(--pc-color-linkedin);
 }
 .pc-share-block__item.pc-share-block__item.pc-share-block__item.pc-share-block__item:before {
   border-radius: 100%;
@@ -48,14 +50,14 @@ unpredictable css rules order in build */
 
 .pc-share-block__item.pc-share-block__item:hover:before {
   /* stylelint-disable-next-line declaration-no-important */
-  background-color: var(--yc-color-base-generic) !important;
+  background-color: var(--g-color-base-generic) !important;
   border-radius: 100%;
 }
 .pc-share-block__item.pc-share-block__item + .pc-share-block__item.pc-share-block__item {
   margin-left: 12px;
 }
 .pc-share-block__item.pc-share-block__item svg {
-  color: var(--yc-color-base-background);
+  color: var(--g-color-base-background);
 }
 
 @media (max-width: 577px) {

package/build/cjs/blocks/Slider/Arrow/Arrow.css

@@ -3,7 +3,7 @@
 }
 
 .pc-slider-block-arrow__button:hover {
-  box-shadow: 0px 4px 24px var(--yc-color-sfx-shadow), 0px 2px 8px var(--yc-color-sfx-shadow);
+  box-shadow: 0px 4px 24px var(--g-color-sfx-shadow), 0px 2px 8px var(--g-color-sfx-shadow);
   cursor: pointer;
 }
 
@@ -43,14 +43,14 @@ unpredictable css rules order in build */
   cursor: pointer;
   width: 42px;
   height: 42px;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
   border-radius: 100%;
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
   box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
   transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 .pc-slider-block-arrow:hover .pc-slider-block-arrow__button {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
   box-shadow: 0 2px 12px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
 }
 .pc-slider-block-arrow__icon {

package/build/cjs/blocks/Slider/Slider.css

@@ -143,17 +143,17 @@ unpredictable css rules order in build */
   width: 8px;
   height: 8px;
   border-radius: 100%;
-  background-color: var(--yc-color-line-generic-accent);
+  background-color: var(--g-color-line-generic-accent);
   cursor: pointer;
 }
 .pc-SliderBlock__dot:hover {
-  background-color: var(--yc-color-line-generic-accent-hover);
+  background-color: var(--g-color-line-generic-accent-hover);
 }
 .pc-SliderBlock__dot + .pc-SliderBlock__dot {
   margin-left: 16px;
 }
 .pc-SliderBlock__dot_active {
-  background-color: var(--yc-color-line-generic-active);
+  background-color: var(--g-color-line-generic-active);
 }
 .pc-SliderBlock__bar {
   position: absolute;
@@ -180,19 +180,19 @@ unpredictable css rules order in build */
   position: absolute;
   top: 0;
   left: 0;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-SliderBlock__footer .pc-SliderBlock__disclaimer_size_l {
-  font-size: var(--yc-text-header-1-font-size);
-  line-height: var(--yc-text-header-1-line-height);
+  font-size: var(--g-text-header-1-font-size);
+  line-height: var(--g-text-header-1-line-height);
 }
 .pc-SliderBlock__footer .pc-SliderBlock__disclaimer_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-SliderBlock__footer .pc-SliderBlock__disclaimer_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);
 }
 @media (min-width: 769px) {
   .pc-SliderBlock__animate-slides.pc-AnimateBlock .slick-slide, .pc-AnimateBlock .pc-SliderBlock__animate-slides .slick-slide {

package/build/cjs/blocks/Table/Table.css

@@ -5,18 +5,18 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-table-block__title {
-  font-size: var(--yc-text-display-2-font-size);
-  line-height: var(--yc-text-display-2-line-height);
+  font-size: var(--g-text-display-2-font-size);
+  line-height: var(--g-text-display-2-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
   top: calc(var(--header-height) + 32px);
   position: sticky;
   margin-right: 32px;
 }
 @media (max-width: 576px) {
   .pc-table-block__title {
-    font-size: var(--yc-text-display-1-font-size);
-    line-height: var(--yc-text-display-1-line-height);
+    font-size: var(--g-text-display-1-font-size);
+    line-height: var(--g-text-display-1-line-height);
   }
 }
 .pc-table-block__table {