@gravity-ui/page-constructor 3.16.0 → 4.0.0

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

@@ -11,42 +11,42 @@ unpredictable css rules order in build */
   text-align: right;
 }
 .pc-title-item_size_xs {
-  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);
 }
 .pc-title-item_size_s {
-  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);
   margin-top: 32px;
 }
 .pc-title-item_size_m {
-  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);
   margin-top: 48px;
 }
 @media (max-width: 576px) {
   .pc-title-item_size_m {
-    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-title-item_size_l {
-  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);
   margin-top: 96px;
 }
 @media (max-width: 577px) {
   .pc-title-item_size_l {
-    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-title-item__arrow {
@@ -84,7 +84,7 @@ unpredictable css rules order in build */
 }
 .pc-title-item__text a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -92,8 +92,8 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-title-item__text a:hover, .pc-title-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-title-item__wrapper {
   white-space: nowrap;

package/build/esm/components/Title/TitleItem.d.ts

@@ -1,10 +1,9 @@
-import { TextSize, TitleItemProps } from '../../models';
+import { QAProps, TextSize, TitleItemProps } from '../../models';
 import './TitleItem.css';
 export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 24 | 13 | 22 | 26 | 38 | 20;
-export interface TitleItemFullProps extends TitleItemProps {
+export interface TitleItemFullProps extends TitleItemProps, QAProps {
     className?: string;
     onClick?: () => void;
-    dataQa?: string;
     resetMargin?: boolean;
 }
 declare const TitleItem: (props: TitleItemFullProps) => JSX.Element;

package/build/esm/components/Title/TitleItem.js

@@ -22,7 +22,7 @@ export function getArrowSize(size, isMobile) {
 }
 const TitleItem = (props) => {
     const isMobile = useContext(MobileContext);
-    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, dataQa, resetMargin = true, } = props;
+    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, qa, resetMargin = true, } = props;
     const { hostname } = useContext(LocationContext);
     const textMarkup = (React.createElement(React.Fragment, null,
         React.createElement(HTML, { className: b('text') }, text),
@@ -47,7 +47,7 @@ const TitleItem = (props) => {
         anchor && React.createElement(Anchor, { id: anchor, className: b('anchor') }),
         React.createElement(getHeaderTag(textSize), {
             className: b({ size: textSize, justify, 'reset-margin': resetMargin }, className),
-            'data-qa': `${dataQa}-header`,
+            'data-qa': `${qa}-header`,
         }, content)));
 };
 export default TitleItem;

package/build/esm/components/UnpublishedLabel/UnpublishedLabel.css

@@ -1,16 +1,16 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-unpublished-label {
-  background-color: var(--yc-color-base-danger-heavy);
+  background-color: var(--g-color-base-danger-heavy);
 }
 .pc-unpublished-label_type_line {
-  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);
   padding: 15px;
 }
 .pc-unpublished-label_type_label {
-  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);
   display: inline-block;
   padding: 0 8px;
   border-radius: 2px;

package/build/esm/components/VideoBlock/VideoBlock.css

@@ -39,8 +39,8 @@ unpredictable css rules order in build */
   position: absolute;
   width: 64px;
   height: 64px;
-  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);
   border-radius: 50%;
 }
 .pc-VideoBlock__icon {

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

@@ -1,4 +1,6 @@
-export declare const DEFAULT_THEME = "light";
+import { Theme } from '../models';
+export declare const DEFAULT_THEME = Theme.Light;
+export declare const UIKIT_ROOT_CLASS = "g-root";
 export declare const KEY: {
     ENTER: string;
     TAB: string;

package/build/esm/components/constants.js

@@ -1,4 +1,6 @@
-export const DEFAULT_THEME = 'light';
+import { Theme } from '../models';
+export const DEFAULT_THEME = Theme.Light;
+export const UIKIT_ROOT_CLASS = 'g-root';
 export const KEY = {
     ENTER: 'Enter',
     TAB: 'Tab',

package/build/esm/containers/PageConstructor/PageConstructor.css

@@ -6,48 +6,68 @@ unpredictable css rules order in build */
   --header-height: 64px;
 }
 
-.yc-root {
-  --yc-text-accent-font-weight: 500;
+.g-root {
+  --pc-color-telegram: #51a4db;
+  --pc-color-facebook: #4968ad;
+  --pc-color-twitter: #4aa0eb;
+  --pc-color-vk: #436eab;
+  --pc-color-youtube: #eb3323;
+  --pc-color-github: #25292e;
+  --pc-color-rss: #f29c39;
+  --pc-color-linkedin: #0a66c2;
+  --g-text-accent-font-weight: 500;
   --pc-transparent: rgba(255, 255, 255, 0);
   --pc-border-radius: 24px;
   --pc-image-padding: 4px;
-  --pc-color-sfx-shadow: var(--yc-color-base-simple-hover);
+  --pc-color-sfx-shadow: var(--g-color-base-simple-hover);
   --pc-color-line-generic-active-solid: #b3b3b3;
-  --pc-color-base-float-hover: var(--yc-color-base-float);
+  --pc-color-base-float-hover: var(--g-color-base-float);
   --pc-monochrome-button-background-color: #262626;
   --pc-monochrome-button-background-color-hover: #393939;
-  --pc-monochrome-button-color: var(--yc-color-text-light-primary);
-  --pc-text-header-color: var(--yc-color-text-primary);
-  --pc-media-card-meta-info-color: var(--yc-color-text-secondary);
-  --pc-tab-item-color: var(--yc-color-text-primary);
-  --pc-tab-item-background-color: var(--yc-color-base-generic);
-  --pc-tab-item-background-color-hover: var(--yc-color-base-generic-hover);
+  --pc-monochrome-button-color: var(--g-color-text-light-primary);
+  --pc-text-header-color: var(--g-color-text-primary);
+  --pc-media-card-meta-info-color: var(--g-color-text-secondary);
+  --pc-tab-item-color: var(--g-color-text-primary);
+  --pc-tab-item-background-color: var(--g-color-base-generic);
+  --pc-tab-item-background-color-hover: var(--g-color-base-generic-hover);
   --pc-selected-tab-item-color: var(--pc-monochrome-button-color);
   --pc-selected-tab-item-background-color: var(--pc-monochrome-button-background-color);
   --pc-selected-tab-item-background-color-hover: var(
       --pc-monochrome-button-background-color-hover
   );
 }
-.yc-root.yc-root_theme_dark {
-  --pc-color-sfx-shadow: var(--yc-color-sfx-shadow);
+.g-root_theme_light {
+  --pc-color-base-silver: #eff2f8;
+  --pc-color-base-gold: #ffdb4d;
+  --pc-color-base-asphalt: #313538;
+  --pc-color-base-copper: #ffe6c4;
+}
+.g-root_theme_dark {
+  --pc-color-base-silver: #bcc0c4;
+  --pc-color-base-gold: #ffde5d;
+  --pc-color-base-asphalt: #474d52;
+  --pc-color-base-copper: #7f7262;
+}
+.g-root.g-root_theme_dark {
+  --pc-color-sfx-shadow: var(--g-color-sfx-shadow);
   --pc-color-line-generic-active-solid: #6c6c70;
-  --pc-color-base-float-hover: var(--yc-color-base-float-hover);
+  --pc-color-base-float-hover: var(--g-color-base-float-hover);
   --pc-monochrome-button-background-color: #ffffff;
   --pc-monochrome-button-background-color-hover: #e9e9e9;
-  --pc-monochrome-button-color: var(--yc-color-text-dark-primary);
+  --pc-monochrome-button-color: var(--g-color-text-dark-primary);
 }
 
 /* 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,
@@ -58,11 +78,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,
@@ -81,7 +101,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;
@@ -97,7 +117,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;
 }
@@ -105,17 +125,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 {
@@ -131,7 +151,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 {
@@ -152,7 +172,7 @@ unpredictable css rules order in build */
 .pc-page-constructor {
   font-feature-settings: "liga", "kern", "pnum" on, "lnum" on, "ss03" on;
   margin-top: 0;
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
   z-index: 10;
 }
 .pc-page-constructor__wrapper {

package/build/esm/containers/PageConstructor/PageConstructor.js

@@ -1,11 +1,13 @@
 import { __rest } from "tslib";
-import React, { useContext, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import '@doc-tools/transform/dist/js/yfm';
+import blockOrigin from 'bem-cn-lite';
 import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
+import { UIKIT_ROOT_CLASS } from '../../components/constants';
 import { blockMap, subBlockMap } from '../../constructor-items';
 import { AnimateContext } from '../../context/animateContext';
 import { InnerContext } from '../../context/innerContext';
-import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { useTheme } from '../../context/theme';
 import { Grid } from '../../grid';
 import { BlockType, BlockTypes, HeaderBlockTypes, SubBlockTypes, } from '../../models';
 import Layout from '../../navigation/containers/Layout/Layout';
@@ -15,6 +17,7 @@ import { ConstructorHeader } from './components/ConstructorItem';
 import { ConstructorRow } from './components/ConstructorRow';
 import './PageConstructor.css';
 const b = cnBlock('page-constructor');
+const ycr = blockOrigin(UIKIT_ROOT_CLASS);
 export const Constructor = (props) => {
     const { content: { blocks = [], background = {} } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
     const { context } = useMemo(() => ({
@@ -30,12 +33,12 @@ export const Constructor = (props) => {
             },
         },
     }), [custom, shouldRenderBlock]);
-    const { themeValue: theme } = useContext(ThemeValueContext);
+    const theme = useTheme();
     const header = getHeaderBlock(blocks, context.headerBlockTypes);
     const restBlocks = getOrderedBlocks(blocks, context.headerBlockTypes);
     const themedBackground = getThemedValue(background, theme);
     return (React.createElement(InnerContext.Provider, { value: context },
-        React.createElement("div", { className: b() },
+        React.createElement("div", { className: b(null, ycr({ theme })) },
             React.createElement("div", { className: b('wrapper') },
                 themedBackground && (React.createElement(BackgroundMedia, Object.assign({}, themedBackground, { className: b('background') }))),
                 React.createElement(Layout, { navigation: navigation },

package/build/esm/containers/PageConstructor/Provider.d.ts

@@ -6,15 +6,14 @@ import { MapsContextType } from '../../context/mapsContext/mapsContext';
 import { MetrikaContextProps } from '../../context/metrikaContext';
 import { ProjectSettingsContextProps } from '../../context/projectSettingsContext';
 import { SSRContextProps } from '../../context/ssrContext';
-import { ConstructorTheme } from '../../context/theme/ThemeValueContext';
-import { WithChildren } from '../../models';
+import { Theme, WithChildren } from '../../models';
 export interface PageConstructorProviderProps {
     isMobile?: boolean;
     locale?: LocaleContextProps;
     location?: LocationContextProps;
     metrika?: MetrikaContextProps;
     ssrConfig?: SSRContextProps;
-    theme?: ConstructorTheme;
+    theme?: Theme;
     mapsContext?: MapsContextType;
     projectSettings?: ProjectSettingsContextProps;
     analytics?: AnalyticsContextProps;

package/build/esm/containers/PageConstructor/Provider.js

@@ -9,12 +9,12 @@ import { MetrikaContext } from '../../context/metrikaContext';
 import { MobileContext } from '../../context/mobileContext';
 import { ProjectSettingsContext, } from '../../context/projectSettingsContext';
 import { SSRContext } from '../../context/ssrContext';
-import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { ThemeContext } from '../../context/theme';
 export const PageConstructorProvider = (props) => {
     const { isMobile, mapsContext = initialMapValue, locale = {}, location = {}, metrika = {}, analytics = {}, ssrConfig = {}, projectSettings = {}, theme = DEFAULT_THEME, children, image = {}, } = props;
     /* eslint-disable react/jsx-key */
     const context = [
-        React.createElement(ThemeValueContext.Provider, { value: { themeValue: theme } }),
+        React.createElement(ThemeContext.Provider, { value: { theme } }),
         React.createElement(ProjectSettingsContext.Provider, { value: projectSettings }),
         React.createElement(LocaleContext.Provider, { value: locale }),
         React.createElement(ImageContext.Provider, { value: image }),

package/build/esm/context/theme/ThemeContext.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import { ConstructorTheme } from './ThemeValueContext';
+import { Theme } from '../../models';
 export interface ThemeContextProps {
-    theme: ConstructorTheme;
-    setTheme: (newTheme: ConstructorTheme) => void;
+    theme: Theme;
 }
 export declare const initialValue: ThemeContextProps;
 export declare const ThemeContext: React.Context<ThemeContextProps>;

package/build/esm/context/theme/ThemeContext.js

@@ -2,6 +2,5 @@ import React from 'react';
 import { DEFAULT_THEME } from '../../components/constants';
 export const initialValue = {
     theme: DEFAULT_THEME,
-    setTheme: () => { },
 };
 export const ThemeContext = React.createContext(initialValue);

package/build/esm/context/theme/index.d.ts

@@ -1,4 +1,3 @@
 export * from './ThemeContext';
-export * from './ThemeProvider';
 export * from './useTheme';
 export * from './withTheme';

package/build/esm/context/theme/index.js

@@ -1,4 +1,3 @@
 export * from './ThemeContext';
-export * from './ThemeProvider';
 export * from './useTheme';
 export * from './withTheme';

package/build/esm/context/theme/useTheme.d.ts

@@ -1,2 +1,2 @@
 import { ThemeContextProps } from './ThemeContext';
-export declare function useTheme(): [ThemeContextProps['theme'], ThemeContextProps['setTheme']];
+export declare function useTheme(): ThemeContextProps['theme'];

package/build/esm/context/theme/useTheme.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ThemeContext } from './ThemeContext';
 export function useTheme() {
-    const { theme, setTheme } = React.useContext(ThemeContext);
-    return [theme, setTheme];
+    const { theme } = React.useContext(ThemeContext);
+    return theme;
 }

package/build/esm/context/theme/withTheme.js

@@ -5,7 +5,7 @@ export function withTheme(WrappedComponent) {
     const componentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
     return _a = class WithThemeComponent extends React.Component {
             render() {
-                return (React.createElement(WrappedComponent, Object.assign({}, this.props, { theme: this.context.theme, setTheme: this.context.setTheme })));
+                return React.createElement(WrappedComponent, Object.assign({}, this.props, { theme: this.context.theme }));
             }
         },
         _a.displayName = `withTheme(${componentName})`,

package/build/esm/editor/components/AddBlock/AddBlock.css

@@ -3,7 +3,7 @@ unpredictable css rules order in build */
 .pc-add-block {
   position: absolute;
   bottom: 32px;
-  left: calc(50% + var(--editor-left-column-width) / 2);
+  left: calc(50% + var(--pc-editor-left-column-width) / 2);
   transform: translateX(-50%);
   z-index: 110;
 }
@@ -23,8 +23,8 @@ unpredictable css rules order in build */
   transition: transform 0.2s;
   width: 76px;
   height: 40px;
-  color: var(--yc-color-text-inverted-primary);
-  background-color: var(--yc-color-promo-base-neon);
+  color: var(--g-color-text-primary);
+  background-color: var(--pc-editor-base-color);
   border-radius: 8px;
 }
 .pc-add-block__button:hover {
@@ -71,10 +71,11 @@ unpredictable css rules order in build */
   height: 74px;
   border-radius: var(--pc-border-radius);
   margin-right: 16px;
+  color: var(--pc-editor-base-color);
 }
 .pc-add-block__popup .pc-add-block__title {
-  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-add-block__popup .pc-add-block__title,
 .pc-add-block__popup .pc-add-block__description {

package/build/esm/editor/components/AddBlock/AddBlock.js

@@ -20,7 +20,7 @@ const AddBlock = ({ onAdd, className }) => {
                 setSearch('');
             } },
             React.createElement(Plus, { className: b('icon') })),
-        isOpened && (React.createElement(Popup, { anchorRef: ref, open: isOpened, className: b('popup'), placement: "top", offset: [0, 24], onOutsideClick: () => setIsOpened(false) },
+        isOpened && (React.createElement(Popup, { anchorRef: ref, open: isOpened, contentClassName: b('popup'), placement: "top", offset: [0, 24], onOutsideClick: () => setIsOpened(false) },
             React.createElement("div", { className: b('search') },
                 React.createElement(TextInput, { placeholder: "search", type: "text", value: search, size: "l", onUpdate: (value) => setSearch(value) })),
             React.createElement("div", { className: b('blocks') }, blocks.map((blockName) => {

package/build/esm/editor/components/ControlPanel/ControlPanel.css

@@ -1,13 +1,13 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-control-panel {
-  display: flex;
-  justify-content: center;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
   width: 100%;
-  height: var(--editor-header-height);
+  height: var(--pc-editor-header-height);
   padding: 8px 20px;
-  background-color: var(--yc-color-base-background);
-  border: 1px var(--yc-color-line-generic);
+  background-color: var(--g-color-base-background);
+  border: 1px var(--g-color-line-generic);
   border-style: solid none;
 }
 .pc-control-panel__icon {
@@ -24,4 +24,11 @@ unpredictable css rules order in build */
 .pc-control-panel__mode-switch {
   display: flex;
   align-items: center;
+  place-self: center;
+}
+.pc-control-panel__theme-switch {
+  place-self: center end;
+  display: flex;
+  gap: 12px;
+  align-items: center;
 }

package/build/esm/editor/components/ControlPanel/ControlPanel.d.ts

@@ -1,9 +1,11 @@
-import { ClassNameProps } from '../../../models';
+import { ClassNameProps, Theme } from '../../../models';
 import { ViewModeItem } from '../../types';
 import './ControlPanel.css';
 export interface ControlPanelProps extends ClassNameProps {
     viewMode?: ViewModeItem;
     onViewModeChange: (viewMode: ViewModeItem) => void;
+    theme: Theme;
+    onThemeChange: (theme: Theme) => void;
 }
-declare const ControlPanel: ({ viewMode, onViewModeChange, className, }: ControlPanelProps) => JSX.Element;
+declare const ControlPanel: ({ viewMode, onViewModeChange, className, theme, onThemeChange, }: ControlPanelProps) => JSX.Element;
 export default ControlPanel;

package/build/esm/editor/components/ControlPanel/ControlPanel.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Display, Pencil, Smartphone } from '@gravity-ui/icons';
-import { RadioButton } from '@gravity-ui/uikit';
+import { RadioButton, Select } from '@gravity-ui/uikit';
+import { Theme, themeNames } from '../../../models';
 import { block } from '../../../utils';
 import { Tablet } from '../../icons/Tablet';
 import { ViewModeItem } from '../../types';
@@ -14,13 +15,19 @@ const ControlPanelViewModeIcons = {
     [ViewModeItem.Tablet]: Tablet,
     [ViewModeItem.Mobile]: Smartphone,
 };
-const ControlPanel = ({ viewMode = ViewModeItem.Edititng, onViewModeChange, className, }) => (React.createElement("div", { className: b(null, className) },
-    React.createElement("div", { className: b('mode-switch') },
-        React.createElement("span", null, i18n('mode')),
-        React.createElement(RadioButton, { className: b('radio-button'), value: viewMode, onUpdate: (value) => onViewModeChange(value) }, Object.values(ViewModeItem).map((item) => {
-            const Icon = ControlPanelViewModeIcons[item];
-            return (React.createElement(RadioButton.Option, { key: item, value: item },
-                React.createElement("span", { className: b('icon') },
-                    React.createElement(Icon, { width: ICON_SIZE, height: ICON_SIZE }))));
-        })))));
+const ControlPanel = ({ viewMode = ViewModeItem.Edititng, onViewModeChange, className, theme, onThemeChange, }) => {
+    return (React.createElement("div", { className: b(null, className) },
+        React.createElement("div", null),
+        React.createElement("div", { className: b('mode-switch') },
+            React.createElement("span", null, i18n('mode')),
+            React.createElement(RadioButton, { className: b('radio-button'), value: viewMode, onUpdate: (value) => onViewModeChange(value) }, Object.values(ViewModeItem).map((item) => {
+                const Icon = ControlPanelViewModeIcons[item];
+                return (React.createElement(RadioButton.Option, { key: item, value: item },
+                    React.createElement("span", { className: b('icon') },
+                        React.createElement(Icon, { width: ICON_SIZE, height: ICON_SIZE }))));
+            }))),
+        React.createElement("div", { className: b('theme-switch') },
+            React.createElement("span", null, i18n('Theme')),
+            React.createElement(Select, { value: [theme], onUpdate: (value) => onThemeChange(value[0]) }, Object.values(Theme).map((item) => (React.createElement(Select.Option, { key: item, value: item }, themeNames[item])))))));
+};
 export default ControlPanel;

package/build/esm/editor/components/EditBlock/EditBlock.css

@@ -9,7 +9,7 @@ unpredictable css rules order in build */
   z-index: 11;
 }
 .pc-edit-block_active .pc-edit-block__controls {
-  border: 4px solid var(--yc-color-promo-base-neon);
+  border: 4px solid var(--pc-editor-base-color);
 }
 .pc-edit-block__controls {
   position: absolute;
@@ -45,7 +45,7 @@ unpredictable css rules order in build */
   width: 48px;
   height: 32px;
   border-radius: 8px;
-  background-color: var(--yc-color-promo-highlight-neon);
+  background-color: var(--pc-editor-control-color);
 }
 .pc-edit-block__control:hover {
   transform: scale(1.1);

package/build/esm/editor/components/ErrorBoundary/ErrorBoundary.css

@@ -4,7 +4,7 @@ unpredictable css rules order in build */
   display: flex;
   width: 100%;
   padding: 32px;
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
   border-radius: var(--pc-border-radius);
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06), 0px 4px 24px rgba(0, 0, 0, 0.06);
 }
@@ -13,7 +13,7 @@ unpredictable css rules order in build */
 }
 .pc-error-boundary__error {
   display: block;
-  color: var(--yc-color-text-danger);
+  color: var(--g-color-text-danger);
   max-height: 160px;
   overflow: auto;
 }