@gravity-ui/blog-constructor 4.4.2 → 5.0.1

package/build/esm/components/Search/Search.css

@@ -1,8 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .bc-search {
-  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);
   position: relative;
   display: flex;
   align-items: center;
@@ -14,30 +14,30 @@ unpredictable css rules order in build */
   position: absolute;
   z-index: 2;
   right: 10px;
-  color: var(--yc-color-text-hint);
+  color: var(--g-color-text-hint);
 }
 .bc-search__search-button:hover {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .bc-search__search-suggest-container {
   width: 100%;
 }
 .bc-search .bc-search__search-suggest-control {
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
   padding-left: 12px;
   padding-right: 32px;
   border-radius: var(--bc-text-input-border-radius);
   border: 1px solid transparent;
 }
 .bc-search .bc-search__search-suggest-control:hover, .bc-search .bc-search__search-suggest-control:focus {
-  border: 1px solid var(--yc-color-base-generic-hover);
+  border: 1px solid var(--g-color-base-generic-hover);
 }
 .bc-search_size_s {
-  --bc-text-input-border-radius: var(--yc-my-border-radius-l);
+  --bc-text-input-border-radius: var(--g-border-radius-l);
   height: 36px;
   width: 352px;
   max-width: 100%;
 }
 .bc-search_size_m {
-  --bc-text-input-border-radius: var(--yc-my-border-radius-xl);
+  --bc-text-input-border-radius: var(--g-border-radius-xl);
 }

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

@@ -1,10 +1,9 @@
 import React from 'react';
-import { ClassNameProps } from '../../models/common';
+import { ClassNameProps, QAProps } from '../../models/common';
 import { Paddings } from '../../models/paddings';
 import './Wrapper.css';
-type WrapperProps = ClassNameProps & {
+type WrapperProps = ClassNameProps & QAProps & {
     paddings?: Paddings;
-    dataQa?: string;
     children?: React.ReactNode;
 };
 export declare const Wrapper: React.FunctionComponent<WrapperProps>;

package/build/esm/components/Wrapper/Wrapper.js

@@ -3,9 +3,9 @@ import { DEFAULT_PADDINGS } from '../../constants';
 import { block } from '../../utils/cn';
 import './Wrapper.css';
 const b = block('wrapper');
-export const Wrapper = ({ children, paddings = DEFAULT_PADDINGS, className, dataQa, }) => (React.createElement("section", { className: b({
+export const Wrapper = ({ children, paddings = DEFAULT_PADDINGS, className, qa, }) => (React.createElement("section", { className: b({
         ['padding-top']: (paddings === null || paddings === void 0 ? void 0 : paddings.top) || 'xs',
         ['padding-bottom']: (paddings === null || paddings === void 0 ? void 0 : paddings.bottom) || 'l',
         ['padding-left']: (paddings === null || paddings === void 0 ? void 0 : paddings.left) || '',
         ['padding-right']: (paddings === null || paddings === void 0 ? void 0 : paddings.right) || '',
-    }, className), "data-qa": dataQa }, children));
+    }, className), "data-qa": qa }, children));

package/build/esm/constants.d.ts

@@ -7,6 +7,8 @@ export declare const BREAKPOINTS: {
     xl: number;
 };
 export declare const DEFAULT_THEME = "light";
+export declare const UIKIT_ROOT_CLASS = "g-root";
+export declare const UIKIT_THEME_LIGHT_CLASS: string;
 export declare enum BlogMetrikaGoalIds {
     shareTop = "SITE_BLOG_SHARE-TOP_CLICK",
     shareBottom = "SITE_BLOG_SHARE-BOTTOM_CLICK",

package/build/esm/constants.js

@@ -7,6 +7,8 @@ export const BREAKPOINTS = {
     xl: 1185,
 };
 export const DEFAULT_THEME = 'light';
+export const UIKIT_ROOT_CLASS = 'g-root';
+export const UIKIT_THEME_LIGHT_CLASS = `${UIKIT_ROOT_CLASS}_theme_${DEFAULT_THEME}`;
 export var BlogMetrikaGoalIds;
 (function (BlogMetrikaGoalIds) {
     BlogMetrikaGoalIds["shareTop"] = "SITE_BLOG_SHARE-TOP_CLICK";

package/build/esm/containers/BlogPage/BlogPage.css

@@ -2,20 +2,20 @@
   --header-height: 64px;
 }
 
-.yc-root {
-  --yc-text-accent-font-weight: 500;
+.g-root {
+  --g-text-accent-font-weight: 500;
   --bc-transparent: rgba(255, 255, 255, 0);
   --bc-image-padding: 4px;
   --bc-border-radius: var(--pc-border-radius, 24px);
-  --bc-color-sfx-shadow: var(--yc-color-base-simple-hover);
+  --bc-color-sfx-shadow: var(--g-color-base-simple-hover);
   --bc-color-line-generic-active-solid: #b3b3b3;
-  --bc-color-base-float-hover: var(--yc-color-base-float);
+  --bc-color-base-float-hover: var(--g-color-base-float);
   --bc-monochrome-button: #262626;
   --bc-monochrome-button-hover: #393939;
-  --bc-text-header-color: var(--yc-color-text-primary);
+  --bc-text-header-color: var(--g-color-text-primary);
 }
-.yc-root.yc-root_theme_dark {
-  --bc-color-sfx-shadow: var(--yc-color-sfx-shadow);
+.g-root.g-root_theme_dark {
+  --bc-color-sfx-shadow: var(--g-color-sfx-shadow);
   --bc-color-line-generic-active-solid: #6c6c70;
-  --bc-color-base-float-hover: var(--yc-color-base-float-hover);
+  --bc-color-base-float-hover: var(--g-color-base-float-hover);
 }

package/build/esm/containers/BlogPostPage/BlogPostPage.css

@@ -4,30 +4,30 @@
   --header-height: 64px;
 }
 
-.yc-root {
-  --yc-text-accent-font-weight: 500;
+.g-root {
+  --g-text-accent-font-weight: 500;
   --bc-transparent: rgba(255, 255, 255, 0);
   --bc-image-padding: 4px;
   --bc-border-radius: var(--pc-border-radius, 24px);
-  --bc-color-sfx-shadow: var(--yc-color-base-simple-hover);
+  --bc-color-sfx-shadow: var(--g-color-base-simple-hover);
   --bc-color-line-generic-active-solid: #b3b3b3;
-  --bc-color-base-float-hover: var(--yc-color-base-float);
+  --bc-color-base-float-hover: var(--g-color-base-float);
   --bc-monochrome-button: #262626;
   --bc-monochrome-button-hover: #393939;
-  --bc-text-header-color: var(--yc-color-text-primary);
+  --bc-text-header-color: var(--g-color-text-primary);
 }
-.yc-root.yc-root_theme_dark {
-  --bc-color-sfx-shadow: var(--yc-color-sfx-shadow);
+.g-root.g-root_theme_dark {
+  --bc-color-sfx-shadow: var(--g-color-sfx-shadow);
   --bc-color-line-generic-active-solid: #6c6c70;
-  --bc-color-base-float-hover: var(--yc-color-base-float-hover);
+  --bc-color-base-float-hover: var(--g-color-base-float-hover);
 }
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .yfm_blog {
-  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);
 }
 .yfm_blog h1:first-child,
 .yfm_blog h2:first-child,
@@ -38,16 +38,16 @@ unpredictable css rules order in build */
   padding-top: 0;
 }
 .yfm_blog h2 {
-  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);
 }
 .yfm_blog h3 {
-  font-size: var(--yc-text-header-2-font-size);
-  line-height: var(--yc-text-header-2-line-height);
+  font-size: var(--g-text-header-2-font-size);
+  line-height: var(--g-text-header-2-line-height);
 }
 .yfm_blog h4 {
-  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);
 }
 .yfm_blog.yfm_blog h1,
 .yfm_blog.yfm_blog h2,
@@ -58,7 +58,7 @@ unpredictable css rules order in build */
   margin-bottom: 16px;
   margin-top: 32px;
   padding-top: 0;
-  font-weight: var(--yc-text-header-font-weight);
+  font-weight: var(--g-text-header-font-weight);
 }
 
 .yfm_blog blockquote,
@@ -83,41 +83,41 @@ unpredictable css rules order in build */
   padding-left: 1.4em;
 }
 .yfm_blog code {
-  color: var(--yc-color-text-misc);
+  color: var(--g-color-text-misc);
 }
 .yfm_blog pre > code {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .yfm_blog table {
-  color: var(--yc-color-text-primary);
-  border: 1px solid var(--yc-color-line-generic);
-  background: var(--yc-color-base-background);
+  color: var(--g-color-text-primary);
+  border: 1px solid var(--g-color-line-generic);
+  background: var(--g-color-base-background);
 }
 .yfm_blog thead tr,
 .yfm_blog table tr:nth-child(2n) {
-  background-color: var(--yc-color-base-generic);
+  background-color: var(--g-color-base-generic);
 }
 .yfm_blog_media {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
-  color: var(--yc-color-text-secondary);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+  color: var(--g-color-text-secondary);
 }
 .yfm_blog_breadcrumbs {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
-  color: var(--yc-text-color-base);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  color: var(--g-text-color-base);
 }
 .yfm_blog a {
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
 }
 .yfm_blog a:hover {
-  color: var(--yc-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 .yfm_blog .yfm-tab:hover, .yfm_blog .yfm-tab:active {
-  color: var(--yc-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 .yfm_blog .yfm-tab.active {
-  border-bottom-color: var(--yc-color-text-link);
+  border-bottom-color: var(--g-color-text-link);
 }
 .yfm_blog .yfm-clipboard {
   margin: 32px 0;
@@ -130,14 +130,14 @@ unpredictable css rules order in build */
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .yfm_constructor {
-  font-family: var(--yc-font-family-sans);
-  color: var(--yc-color-text-primary);
+  font-family: var(--g-font-family-sans);
+  color: var(--g-color-text-primary);
 }
 .yfm_constructor code,
 .yfm_constructor kbd,
 .yfm_constructor pre {
-  font-family: var(--yc-font-family-monospace);
-  color: var(--yc-color-text-primary);
+  font-family: var(--g-font-family-monospace);
+  color: var(--g-color-text-primary);
 }
 .yfm_constructor.yfm_constructor h1,
 .yfm_constructor.yfm_constructor h2,
@@ -148,11 +148,11 @@ unpredictable css rules order in build */
 .yfm_constructor.yfm_constructor span,
 .yfm_constructor.yfm_constructor p,
 .yfm_constructor.yfm_constructor li {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .yfm_constructor.yfm_constructor_notice li,
 .yfm_constructor.yfm_constructor_notice p {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .yfm_constructor.yfm_constructor ul,
 .yfm_constructor.yfm_constructor ol,
@@ -171,7 +171,7 @@ unpredictable css rules order in build */
 }
 
 .yfm_constructor_theme_dark p {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .yfm_constructor_list_style ul {
   padding-left: 20px;
@@ -187,7 +187,7 @@ unpredictable css rules order in build */
 }
 .yfm_constructor a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -195,17 +195,17 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .yfm_constructor a:hover, .yfm_constructor 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);
 }
 .yfm_constructor table {
-  color: var(--yc-color-text-primary);
-  border: 1px solid var(--yc-color-line-generic);
-  background: var(--yc-color-base-background);
+  color: var(--g-color-text-primary);
+  border: 1px solid var(--g-color-line-generic);
+  background: var(--g-color-base-background);
 }
 .yfm_constructor thead,
 .yfm_constructor table tr:nth-child(2n) {
-  background-color: var(--yc-color-base-generic);
+  background-color: var(--g-color-base-generic);
 }
 
 .yfm_constructor_table {
@@ -221,7 +221,7 @@ unpredictable css rules order in build */
   background-color: transparent !important;
 }
 .yfm_constructor_table tbody tr {
-  border-top: 1px solid var(--yc-color-line-generic);
+  border-top: 1px solid var(--g-color-line-generic);
 }
 .yfm_constructor_table td,
 .yfm_constructor_table th {

package/build/esm/containers/BlogPostPage/BlogPostPage.d.ts

@@ -1,6 +1,6 @@
 import React, { SyntheticEvent } from 'react';
+import { ShareOptions } from '@gravity-ui/components';
 import { NavigationData, PageConstructorProviderProps, PageContent } from '@gravity-ui/page-constructor';
-import { ShareOptions } from '@gravity-ui/uikit';
 import { MetaProps, PostData, ToggleLikeCallbackType } from '../../models/common';
 import './BlogPostPage.css';
 export interface BlogPostPageProps {

package/build/esm/contexts/PostPageContext.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ShareOptions } from '@gravity-ui/uikit';
+import { ShareOptions } from '@gravity-ui/components';
 import { PostData } from '../models/common';
 export interface PostPageContextProps {
     post: PostData;

package/build/esm/contexts/theme/ThemeProvider.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DEFAULT_THEME } from '../../constants';
+import { DEFAULT_THEME, UIKIT_ROOT_CLASS } from '../../constants';
 import { ThemeContext } from './ThemeContext';
 import { ThemeValueContext } from './ThemeValueContext';
 export class ThemeProvider extends React.Component {
@@ -32,11 +32,11 @@ export class ThemeProvider extends React.Component {
     }
     updateBodyClassName(theme) {
         const bodyEl = document.body;
-        if (!bodyEl.classList.contains('yc-root')) {
-            bodyEl.classList.add('yc-root');
+        if (!bodyEl.classList.contains(UIKIT_ROOT_CLASS)) {
+            bodyEl.classList.add(UIKIT_ROOT_CLASS);
         }
-        bodyEl.classList.toggle('yc-root_theme_light', theme === 'light');
-        bodyEl.classList.toggle('yc-root_theme_dark', theme === 'dark');
+        bodyEl.classList.toggle(`${UIKIT_ROOT_CLASS}_theme_light`, theme === 'light');
+        bodyEl.classList.toggle(`${UIKIT_ROOT_CLASS}_theme_dark`, theme === 'dark');
     }
 }
 ThemeProvider.defaultProps = {

package/build/esm/models/common.d.ts

@@ -165,3 +165,6 @@ export type FetchArgs = {
     page?: number;
     query: Query;
 };
+export interface QAProps {
+    qa?: string;
+}

package/build/esm/schema/index.d.ts

@@ -629,6 +629,17 @@ export declare const schemasForCustom: {
                         type: string;
                         enum: string[];
                     };
+                    list: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
                     paddingTop: {
                         type: string;
                         enum: string[];
@@ -776,6 +787,17 @@ export declare const schemasForCustom: {
                         type: string;
                         enum: string[];
                     };
+                    list: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
                     paddingTop: {
                         type: string;
                         enum: string[];
@@ -903,6 +925,17 @@ export declare const schemasForCustom: {
                                     type: string;
                                     enum: string[];
                                 };
+                                list: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                        properties: {
+                                            when: {
+                                                type: string;
+                                            };
+                                        };
+                                    };
+                                };
                             };
                         };
                     };

package/build/esm/utils/common.d.ts

@@ -29,6 +29,7 @@ export declare const updateContentSizes: ({ size, colSizes, theme, ...contentDat
     links?: import("@gravity-ui/page-constructor").LinkProps[] | undefined;
     buttons?: import("@gravity-ui/page-constructor").ButtonProps[] | undefined;
     centered?: boolean | undefined;
+    list?: import("@gravity-ui/page-constructor").ContentItemProps[] | undefined;
 };
 type GetBreadcrumbsProps = {
     tags?: Tag[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/blog-constructor",
-  "version": "4.4.2",
+  "version": "5.0.1",
   "description": "Gravity UI Blog Constructor",
   "license": "MIT",
   "repository": {
@@ -46,6 +46,7 @@
     "test:watch": "jest --watchAll --maxWorkers=25%"
   },
   "dependencies": {
+    "@gravity-ui/components": "^2.0.0",
     "@gravity-ui/i18n": "^1.0.0",
     "bem-cn-lite": "^4.0.0",
     "lodash": "^4.17.21",
@@ -63,9 +64,9 @@
     "url-join": "^5.0.0"
   },
   "peerDependencies": {
-    "@doc-tools/transform": "^2.9.0",
-    "@gravity-ui/page-constructor": "^3.1.1",
-    "@gravity-ui/uikit": "^4.1.0",
+    "@doc-tools/transform": "^3.3.2",
+    "@gravity-ui/page-constructor": "^4.0.0",
+    "@gravity-ui/uikit": "^5.1.0",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
@@ -73,13 +74,13 @@
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@commitlint/config-conventional": "^17.4.3",
-    "@doc-tools/transform": "^2.9.0",
+    "@doc-tools/transform": "^3.3.2",
     "@gravity-ui/eslint-config": "^2.0.0",
-    "@gravity-ui/page-constructor": "^3.9.2",
+    "@gravity-ui/page-constructor": "^4.0.0",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^4.25.0",
+    "@gravity-ui/uikit": "^5.1.0",
     "@storybook/addon-essentials": "^7.0.27",
     "@storybook/cli": "^7.0.27",
     "@storybook/preset-scss": "^1.0.3",

package/server/models/common.d.ts

@@ -165,3 +165,6 @@ export type FetchArgs = {
     page?: number;
     query: Query;
 };
+export interface QAProps {
+    qa?: string;
+}

package/styles/root.css

@@ -2,20 +2,20 @@
   --header-height: 64px;
 }
 
-.yc-root {
-  --yc-text-accent-font-weight: 500;
+.g-root {
+  --g-text-accent-font-weight: 500;
   --bc-transparent: rgba(255, 255, 255, 0);
   --bc-image-padding: 4px;
   --bc-border-radius: var(--pc-border-radius, 24px);
-  --bc-color-sfx-shadow: var(--yc-color-base-simple-hover);
+  --bc-color-sfx-shadow: var(--g-color-base-simple-hover);
   --bc-color-line-generic-active-solid: #b3b3b3;
-  --bc-color-base-float-hover: var(--yc-color-base-float);
+  --bc-color-base-float-hover: var(--g-color-base-float);
   --bc-monochrome-button: #262626;
   --bc-monochrome-button-hover: #393939;
-  --bc-text-header-color: var(--yc-color-text-primary);
+  --bc-text-header-color: var(--g-color-text-primary);
 }
-.yc-root.yc-root_theme_dark {
-  --bc-color-sfx-shadow: var(--yc-color-sfx-shadow);
+.g-root.g-root_theme_dark {
+  --bc-color-sfx-shadow: var(--g-color-sfx-shadow);
   --bc-color-line-generic-active-solid: #6c6c70;
-  --bc-color-base-float-hover: var(--yc-color-base-float-hover);
+  --bc-color-base-float-hover: var(--g-color-base-float-hover);
 }

package/styles/root.scss

@@ -2,24 +2,24 @@
     --header-height: 64px;
 }
 
-.yc-root {
-    --yc-text-accent-font-weight: 500;
+.g-root {
+    --g-text-accent-font-weight: 500;
 
     // cross-browser transparent color
     --bc-transparent: rgba(255, 255, 255, 0);
     --bc-image-padding: 4px;
 
     --bc-border-radius: var(--pc-border-radius, 24px);
-    --bc-color-sfx-shadow: var(--yc-color-base-simple-hover);
+    --bc-color-sfx-shadow: var(--g-color-base-simple-hover);
     --bc-color-line-generic-active-solid: #b3b3b3;
-    --bc-color-base-float-hover: var(--yc-color-base-float);
+    --bc-color-base-float-hover: var(--g-color-base-float);
     --bc-monochrome-button: #262626;
     --bc-monochrome-button-hover: #393939;
-    --bc-text-header-color: var(--yc-color-text-primary);
+    --bc-text-header-color: var(--g-color-text-primary);
 
-    &.yc-root_theme_dark {
-        --bc-color-sfx-shadow: var(--yc-color-sfx-shadow);
+    &.g-root_theme_dark {
+        --bc-color-sfx-shadow: var(--g-color-sfx-shadow);
         --bc-color-line-generic-active-solid: #6c6c70;
-        --bc-color-base-float-hover: var(--yc-color-base-float-hover);
+        --bc-color-base-float-hover: var(--g-color-base-float-hover);
     }
 }

package/styles/storybook/common.scss

@@ -5,25 +5,31 @@
 
 .demo-header {
     margin-bottom: 20px;
-    font-size: var(--yc-text-body-1-font-size);
+    font-size: var(--g-text-body-1-font-size);
     font-weight: bold;
     text-transform: uppercase;
-    color: var(--yc-color-text-primary);
+    color: var(--g-color-text-primary);
 }
 
 .demo-description {
     margin-bottom: 25px;
-    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);
 }
 
 .demo-markdown {
     .markdown-body {
         padding: 20px;
-        color: var(--yc-color-text-primary);
+        color: var(--g-color-text-primary);
 
         a {
-            color: var(--yc-color-text-link);
+            color: var(--g-color-text-link);
         }
     }
 }
+
+.pc-page-constructor {
+    --pc-first-block-mobile-indent: 32px;
+    --pc-first-block-indent: 64px;
+    margin-bottom: 120px;
+}

package/styles/storybook/palette.scss

@@ -6,7 +6,7 @@
     }
 
     &__section-message {
-        color: var(--yc-color-text-special);
+        color: var(--g-color-text-brand);
         margin-bottom: 10px;
         margin-top: -10px;
     }
@@ -40,7 +40,7 @@
         &-description {
             margin-top: 8px;
             height: 40px;
-            color: var(--yc-color-text-primary);
+            color: var(--g-color-text-primary);
             font-size: 13px;
         }
         &-caption {
@@ -55,21 +55,21 @@
             justify-content: center;
 
             &_border_yes {
-                border: 1px solid var(--yc-color-line-generic);
+                border: 1px solid var(--g-color-line-generic);
             }
 
             &_skip_yes {
-                color: var(--yc-color-text-info);
+                color: var(--g-color-text-info);
             }
         }
     }
 }
 
-.yc-root_theme_light .palette__section-contrast-layer {
+.g-root_theme_light .palette__section-contrast-layer {
     background: #000;
     opacity: 0.02;
 }
 
-.yc-root_theme_dark .palette__section-contrast-layer {
+.g-root_theme_dark .palette__section-contrast-layer {
     background: #323138;
 }