@gravity-ui/page-constructor 4.3.0 → 4.3.12-alpha.3

package/server/models/constructor-items/blocks.d.ts

@@ -2,6 +2,7 @@
 import { ButtonSize } from '@gravity-ui/uikit';
 import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
 import { ThemeSupporting } from '../../utils';
+import { AnalyticsEventsBase } from '../common';
 import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps } from './common';
 import { BannerCardProps, SubBlock, SubBlockModels } from './sub-blocks';
 export declare enum BlockType {
@@ -32,6 +33,7 @@ export interface Childable {
 export interface BlockBaseProps {
     anchor?: AnchorProps;
     visible?: GridColumnSize;
+    /** @deprecated */
     resetPaddings?: boolean;
     qa?: string;
 }
@@ -189,6 +191,10 @@ export interface TableProps {
     legend?: string[];
     justify?: Justify[];
     marker?: LegendTableMarkerType;
+    /**
+     * Only as accessible name, not displayed explicitly
+     */
+    caption?: string;
 }
 export interface TableBlockProps {
     title: string;
@@ -236,14 +242,15 @@ export interface FilterBlockProps extends Animatable, LoadableChildren {
     colSizes?: GridColumnSizesType;
     centered?: boolean;
 }
+export interface IconsBlockItemProps extends AnalyticsEventsBase {
+    url: string;
+    text: string;
+    src: string;
+}
 export interface IconsBlockProps {
     title?: string;
     size?: 's' | 'm' | 'l';
-    items: {
-        url: string;
-        text: string;
-        src: string;
-    }[];
+    items: IconsBlockItemProps[];
 }
 interface ContentLayoutBlockParams {
     size?: ContentSize;

package/server/models/constructor-items/common.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils';
 import { AnalyticsEventsBase, ClassNameProps, PixelEventType, QAProps } from '../common';
@@ -25,6 +25,10 @@ export declare enum PlayButtonThemes {
     Blue = "blue",
     Grey = "grey"
 }
+export declare enum CustomControlsType {
+    WithMuteButton = "with-mute-button",
+    WithPlayPauseButton = "with-play-pause-button"
+}
 export declare enum MediaVideoType {
     Default = "default",
     Player = "player"
@@ -64,6 +68,9 @@ export interface Animatable {
 export interface Tabbable {
     tabIndex?: number;
 }
+export interface Roleable {
+    role?: React.AriaRole;
+}
 export interface Background {
     image?: string;
     color?: string;
@@ -107,7 +114,9 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
     elapsedTime?: number;
     playButton?: PlayButtonProps;
     controls?: MediaVideoControlsType;
+    customControlsOptions?: CustomControlsOptions;
     metrika?: MetrikaVideo;
+    ariaLabel?: string;
 }
 export interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {
     url: string;
@@ -129,7 +138,7 @@ export interface FileLinkProps extends ClassNameProps, Tabbable {
     onClick?: () => void;
 }
 export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
-export interface ButtonProps extends AnalyticsEventsBase, Pick<UikitButtonProps, 'size' | 'width'> {
+export interface ButtonProps extends AnalyticsEventsBase, Pick<UikitButtonProps, 'size' | 'width' | 'extraProps'> {
     text: string;
     url: string;
     primary?: boolean;
@@ -145,23 +154,14 @@ export interface ButtonImageProps {
     position?: ButtonImagePosition;
     alt?: string;
 }
+export interface CustomControlsOptions {
+    type?: CustomControlsType;
+}
 export interface PlayButtonProps extends ClassNameProps {
     type?: PlayButtonType;
     theme?: PlayButtonThemes;
     text?: string;
 }
-export interface MediaVideoProps {
-    src: string[];
-    type?: MediaVideoType;
-    loop?: LoopProps | boolean;
-    muted?: boolean;
-    autoplay?: boolean;
-    elapsedTime?: number;
-    playButton?: PlayButtonProps;
-    controls?: MediaVideoControlsType;
-    metrika?: MetrikaVideo;
-    ariaLabel?: string;
-}
 export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
 export interface MediaComponentVideoProps extends AnalyticsEventsBase {
     video: MediaVideoProps;
@@ -186,7 +186,7 @@ export interface MediaComponentDataLensProps {
 export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentVideoProps> {
     color?: string;
 }
-export interface BackgroundMediaProps extends MediaProps, Animatable {
+export interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {
     fullWidthMedia?: boolean;
     className?: string;
     mediaClassName?: string;
@@ -287,7 +287,7 @@ export interface PriceDetailsListProps {
 export interface PriceDetailsProps {
     items?: PriceDetailsSettingsProps[] | PriceDetailsListProps[];
 }
-export interface PriceItemProps extends PriceDetailsProps, PriceDescriptionProps {
+export interface PriceItemProps extends PriceDetailsProps, PriceDescriptionProps, AnalyticsEventsBase {
 }
 export interface PriceFoldableDetailsProps {
     title: string;
@@ -312,24 +312,6 @@ export interface PriceDetailedProps extends CardBaseProps {
     foldable?: PriceFoldableDetailsProps;
     labelsDefaultText?: Record<PriceLabelColor, string>;
 }
-export interface PriceDetailedProps extends CardBaseProps {
-    items: PriceItemProps[];
-    description?: {
-        titleSize?: TextSize;
-        descriptionSize?: TextSize;
-        titleColor?: PriceDescriptionColor;
-    };
-    details?: {
-        titleSize?: TextSize;
-        descriptionSize?: TextSize;
-    };
-    priceType?: PriceDetailsType;
-    numberGroupItems?: 3 | 4 | 5;
-    isCombined?: boolean;
-    useMixedView?: boolean;
-    foldable?: PriceFoldableDetailsProps;
-    labelsDefaultText?: Record<PriceLabelColor, string>;
-}
 export interface AuthorProps extends QAProps {
     author: AuthorItem;
     className?: string;

package/server/models/constructor-items/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MediaVideoControlsType = exports.MediaVideoType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
+exports.MediaVideoControlsType = exports.MediaVideoType = exports.CustomControlsType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
 // enums
 var AuthorType;
 (function (AuthorType) {
@@ -30,6 +30,11 @@ var PlayButtonThemes;
     PlayButtonThemes["Blue"] = "blue";
     PlayButtonThemes["Grey"] = "grey";
 })(PlayButtonThemes = exports.PlayButtonThemes || (exports.PlayButtonThemes = {}));
+var CustomControlsType;
+(function (CustomControlsType) {
+    CustomControlsType["WithMuteButton"] = "with-mute-button";
+    CustomControlsType["WithPlayPauseButton"] = "with-play-pause-button";
+})(CustomControlsType = exports.CustomControlsType || (exports.CustomControlsType = {}));
 var MediaVideoType;
 (function (MediaVideoType) {
     MediaVideoType["Default"] = "default";

package/server/models/constructor-items/sub-blocks.d.ts

@@ -71,13 +71,13 @@ export interface QuoteProps extends Themable, CardBaseProps {
     buttonText?: string;
     theme?: TextTheme;
 }
-export interface BackgroundCardProps extends CardBaseProps, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
+export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
     url?: string;
     background?: ThemeSupporting<ImageObjectProps>;
     paddingBottom?: 's' | 'm' | 'l' | 'xl';
     backgroundColor?: string;
 }
-export interface BasicCardProps extends CardBaseProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
+export interface BasicCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
     url: string;
     icon?: ImageProps;
     target?: string;
@@ -92,9 +92,9 @@ export interface BannerCardProps {
     theme?: TextTheme;
     button: Pick<ButtonProps, 'text' | 'url' | 'target'>;
 }
-export interface MediaCardProps extends MediaProps, CardBaseProps {
+export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {
 }
-export interface LayoutItemProps extends ClassNameProps {
+export interface LayoutItemProps extends ClassNameProps, AnalyticsEventsBase {
     content: Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size'>;
     media: MediaProps;
     metaInfo?: string[];

package/server/models/constructor.d.ts

@@ -6,7 +6,12 @@ export interface PageData {
 export interface Menu {
     title: string;
 }
-export type ConstructorBlock = ConstructorItem | CustomBlock;
+export type ConstructorBlock = (ConstructorItem | CustomBlock) & {
+    indent?: {
+        top?: string;
+        bottom?: string;
+    };
+};
 export interface PageContent extends Animatable {
     blocks: ConstructorBlock[];
     menu?: Menu;
@@ -39,6 +44,7 @@ export interface CustomConfig {
     blocks?: CustomItems;
     subBlocks?: CustomItems;
     headers?: CustomItems;
+    navigation?: CustomItems;
     loadable?: LoadableConfig;
     decorators?: {
         block?: ((props: BlockDecorationProps) => React.ReactElement)[];

package/server/models/navigation.d.ts

@@ -7,6 +7,7 @@ export declare enum NavigationItemType {
     Social = "social",
     GithubButton = "github-button"
 }
+export declare const NavigationItemTypes: NavigationItemType[];
 export interface NavigationItemBase {
     text: string;
     icon?: ImageProps;

package/server/models/navigation.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationGithubButtonIcon = exports.NavigationItemType = void 0;
+exports.NavigationGithubButtonIcon = exports.NavigationItemTypes = exports.NavigationItemType = void 0;
 var NavigationItemType;
 (function (NavigationItemType) {
     NavigationItemType["Link"] = "link";
@@ -9,6 +9,7 @@ var NavigationItemType;
     NavigationItemType["Social"] = "social";
     NavigationItemType["GithubButton"] = "github-button";
 })(NavigationItemType = exports.NavigationItemType || (exports.NavigationItemType = {}));
+exports.NavigationItemTypes = Object.values(NavigationItemType);
 var NavigationGithubButtonIcon;
 (function (NavigationGithubButtonIcon) {
     NavigationGithubButtonIcon["heart"] = "octicon-heart";

package/server/text-transform/common.d.ts

@@ -1,13 +1,18 @@
+import { MarkdownItPluginCb } from '@doc-tools/transform/lib/plugins/typings';
 import { Lang } from '../utils/configure';
 export type ComplexItem = {
     [key: string]: string;
 };
 export type Item = string | null | ComplexItem;
 export type Transformer = (text: string) => string;
-export type TransformerRaw = (lang: Lang, content: string) => string;
+export type TransformerRaw = (lang: Lang, content: string, options: {
+    plugins: MarkdownItPluginCb[];
+}) => string;
 export type Parser<T = any> = (transformer: Transformer, block: T) => T;
 export declare const createItemsParser: (fields: string[]) => (transformer: Transformer, items: Item[]) => (string | {
     [x: string]: string;
 } | null)[];
-export declare function yfmTransformer(lang: Lang, content: string): string;
+export declare function yfmTransformer(lang: Lang, content: string, options?: {
+    plugins?: MarkdownItPluginCb[];
+}): string;
 export declare function typografTransformer(lang: Lang, content: string): string;

package/server/text-transform/common.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.typografTransformer = exports.yfmTransformer = exports.createItemsParser = void 0;
+const plugins_1 = __importDefault(require("@doc-tools/transform/lib/plugins"));
 const utils_1 = require("./utils");
 const createItemsParser = (fields) => (transformer, items) => items.map((item) => {
     if (!item) {
@@ -20,8 +24,12 @@ const createItemsParser = (fields) => (transformer, items) => items.map((item) =
     }
 });
 exports.createItemsParser = createItemsParser;
-function yfmTransformer(lang, content) {
-    const { html } = (0, utils_1.fullTransform)(content, { lang });
+function yfmTransformer(lang, content, options = {}) {
+    const { plugins = [] } = options;
+    const { html } = (0, utils_1.fullTransform)(content, {
+        lang,
+        plugins: [...plugins_1.default, ...plugins],
+    });
     return html;
 }
 exports.yfmTransformer = yfmTransformer;

package/server/text-transform/config.js

@@ -135,7 +135,7 @@ exports.config = {
         {
             fields: ['metaInfo'],
             parser: (0, common_1.createItemsParser)([]),
-            transformer: common_1.typografTransformer,
+            transformer: common_1.yfmTransformer,
         },
     ],
     [models_1.SubBlockType.Quote]: {

package/server/text-transform/transformers.d.ts

@@ -1,3 +1,4 @@
+import { MarkdownItPluginCb } from '@doc-tools/transform/lib/plugins/typings';
 import { ConstructorBlock } from '../models/constructor';
 import { Lang } from '../utils/configure';
 export type ContentVariables = Record<string, string>;
@@ -9,6 +10,7 @@ export type ContentTransformerProps = {
         lang: Lang;
         customConfig?: {};
         vars?: ContentVariables;
+        plugins?: MarkdownItPluginCb[];
     };
 };
 export declare const contentTransformer: ({ content, options }: ContentTransformerProps) => {

package/server/text-transform/transformers.js

@@ -4,17 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.contentTransformer = void 0;
-/* eslint-disable no-param-reassign */
-/* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
 const lodash_1 = __importDefault(require("lodash"));
 const config_1 = require("./config");
 const filter_1 = require("./filter");
-function transformBlocks(blocks, lang, customConfig = {}) {
+function transformBlocks(blocks, lang, customConfig = {}, options = {}) {
     const fullConfig = Object.assign(Object.assign({}, config_1.config), customConfig);
+    const { plugins = [] } = options;
     const clonedBlocks = lodash_1.default.cloneDeep(blocks);
-    return clonedBlocks.map((block) => transformBlock(lang, fullConfig, block));
+    return clonedBlocks.map((block) => transformBlock(lang, fullConfig, block, plugins));
 }
-function transformBlock(lang, blocksConfig, block) {
+function transformBlock(lang, blocksConfig, block, plugins) {
     const blockConfig = blocksConfig[block.type];
     if (block) {
         if ('randomOrder' in block && block.randomOrder && 'children' in block && block.children) {
@@ -25,7 +24,9 @@ function transformBlock(lang, blocksConfig, block) {
         const configs = Array.isArray(blockConfig) ? blockConfig : [blockConfig];
         configs.forEach((transformConfig) => {
             const { fields, transformer: transformerRaw, parser } = transformConfig;
-            const transformer = transformerRaw.bind(null, lang);
+            const transformer = (content) => 
+            // eslint-disable-next-line no-useless-call
+            transformerRaw.call(null, lang, content, { plugins });
             if (fields) {
                 fields.forEach((field) => {
                     if (block[field]) {
@@ -49,9 +50,11 @@ function transformBlock(lang, blocksConfig, block) {
     return block;
 }
 const contentTransformer = ({ content, options }) => {
-    const { lang, customConfig = {}, vars } = options;
+    const { lang, customConfig = {}, vars, plugins = [] } = options;
     const { blocks = [] } = (vars ? (0, filter_1.filterContent)(content, vars) : content);
-    const transformedBlocks = transformBlocks(blocks, lang, customConfig);
+    const transformedBlocks = transformBlocks(blocks, lang, customConfig, {
+        plugins,
+    });
     return {
         blocks: transformedBlocks,
     };

package/server/utils/blocks.d.ts

@@ -2,12 +2,9 @@ import { ConstructorBlock, CustomConfig, PCShareSocialNetwork, TextSize } from '
 export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h3" | "h4";
 export declare function hasBlockTag(content: string): boolean;
 export declare function getBlockKey(block: ConstructorBlock, index: number): string;
-export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
-export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {
-    [x: string]: any;
-};
-export declare const getCustomSubBlockTypes: (customBlocks?: CustomConfig) => string[];
-export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => string[];
+export declare const getCustomItems: (types: (keyof CustomConfig)[], customBlocks?: CustomConfig) => {};
+export declare const getCustomTypes: (types: (keyof CustomConfig)[], customBlocks?: CustomConfig) => string[];
 export declare const getOrderedBlocks: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock[];
 export declare const getHeaderBlock: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock | undefined;
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;
+export declare const getQaAttrubutes: (qa?: string, ...customKeys: (string | Array<string>)[]) => Record<string, string>;

package/server/utils/blocks.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
+exports.getQaAttrubutes = exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomTypes = exports.getCustomItems = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
+const lodash_1 = require("lodash");
 const models_1 = require("../models");
 const BLOCK_ELEMENTS = [
     'div',
@@ -39,6 +40,7 @@ const BLOCK_ELEMENTS = [
     'td',
 ];
 const BLOCK_ELEMENTS_REGEX = `<(${BLOCK_ELEMENTS.join('|')})[^>]*>`;
+const QA_ATTRIBUTES_KEYS = ['container', 'content', 'wrapper', 'image', 'button', 'animate'];
 function getHeaderTag(size) {
     switch (size) {
         case 'l':
@@ -62,23 +64,18 @@ function getBlockKey(block, index) {
     return `${block.type}-${index}`;
 }
 exports.getBlockKey = getBlockKey;
-const getCustomBlockTypes = ({ blocks = {}, headers = {} } = {}) => [
-    ...Object.keys(blocks),
-    ...Object.keys(headers),
-];
-exports.getCustomBlockTypes = getCustomBlockTypes;
-const getCustomItems = ({ blocks = {}, headers = {}, subBlocks = {} } = {}) => (Object.assign(Object.assign(Object.assign({}, blocks), headers), subBlocks));
-exports.getCustomItems = getCustomItems;
-const getCustomSubBlockTypes = (customBlocks = {}) => {
-    const { subBlocks = {} } = customBlocks;
-    return Object.keys(subBlocks);
+const getCustomItems = (types, customBlocks = {}) => {
+    return types.reduce((result, type) => {
+        return Object.assign(result, customBlocks[type] || {});
+    }, {});
 };
-exports.getCustomSubBlockTypes = getCustomSubBlockTypes;
-const getCustomHeaderTypes = (customBlocks = {}) => {
-    const { headers = {} } = customBlocks;
-    return Object.keys(headers);
+exports.getCustomItems = getCustomItems;
+const getCustomTypes = (types, customBlocks = {}) => {
+    return types.reduce((result, type) => {
+        return result.concat(Object.keys(customBlocks[type] || {}));
+    }, []);
 };
-exports.getCustomHeaderTypes = getCustomHeaderTypes;
+exports.getCustomTypes = getCustomTypes;
 const getShareUrlWithParams = (url, params = {}) => {
     const result = new URL(url);
     Object.entries(params).forEach(([name, value]) => {
@@ -125,3 +122,15 @@ const getShareLink = (url, type, title, text) => {
     }
 };
 exports.getShareLink = getShareLink;
+const getQaAttrubutes = (qa, ...customKeys) => {
+    const attributes = {};
+    if (qa) {
+        const keys = QA_ATTRIBUTES_KEYS.concat((0, lodash_1.flatten)(customKeys));
+        keys.forEach((key) => {
+            attributes[(0, lodash_1.camelCase)(key)] = `${qa}-${key}`;
+        });
+        attributes.default = qa;
+    }
+    return attributes;
+};
+exports.getQaAttrubutes = getQaAttrubutes;

package/server/utils/cn.d.ts

@@ -1,4 +1,4 @@
-import blockOrigin from 'bem-cn-lite';
 export declare const NAMESPACE = "pc-";
-export type CnBlock = ReturnType<typeof blockOrigin>;
-export declare function block(name: string): CnBlock;
+export declare const cn: import("@bem-react/classname").ClassNameInitilizer;
+export declare const block: import("@bem-react/classname").ClassNameInitilizer;
+export type CnBlock = ReturnType<typeof cn>;

package/server/utils/cn.js

@@ -1,12 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.block = exports.NAMESPACE = void 0;
-const bem_cn_lite_1 = __importDefault(require("bem-cn-lite"));
+exports.block = exports.cn = exports.NAMESPACE = void 0;
+const classname_1 = require("@bem-react/classname");
 exports.NAMESPACE = 'pc-';
-function block(name) {
-    return (0, bem_cn_lite_1.default)(`${exports.NAMESPACE}${name}`);
-}
-exports.block = block;
+exports.cn = (0, classname_1.withNaming)({ e: '__', m: '_' });
+exports.block = (0, classname_1.withNaming)({ n: exports.NAMESPACE, e: '__', m: '_' });

package/styles/mixins.scss

@@ -164,6 +164,7 @@
         padding: 0 0 $indentL;
 
         &:first-child {
+            // @deprecated
             margin-top: var(--pc-first-block-indent, #{$indentXXL});
         }
     }
@@ -246,7 +247,9 @@
 
     &_border_line,
     &_border_none {
-        cursor: default;
+        @if $hover {
+            @include card-hover();
+        }
     }
 
     &_border_shadow {

package/styles/storybook/common.scss

@@ -29,7 +29,9 @@
 }
 
 .pc-page-constructor {
+    // @deprecated
     --pc-first-block-mobile-indent: 32px;
+    // @deprecated
     --pc-first-block-indent: 64px;
     margin-bottom: 120px;
 }

package/styles/styles.css

@@ -30,6 +30,10 @@ unpredictable css rules order in build */
 .yfm_constructor.yfm_constructor_notice p {
   color: var(--g-color-text-secondary);
 }
+.yfm_constructor.yfm_constructor_meta_info p {
+  color: var(--pc-media-card-meta-info-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
 .yfm_constructor.yfm_constructor ul,
 .yfm_constructor.yfm_constructor ol,
 .yfm_constructor.yfm_constructor li,

package/styles/yfm.scss

@@ -34,6 +34,13 @@
             }
         }
 
+        &_meta_info {
+            p {
+                color: var(--pc-media-card-meta-info-color);
+                font-weight: var(--g-text-accent-font-weight);
+            }
+        }
+
         ul,
         ol,
         li,