@gravity-ui/page-constructor 3.16.0 → 4.0.0

package/build/esm/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.css

@@ -3,26 +3,26 @@ unpredictable css rules order in build */
 .pc-price-description {
   margin-bottom: 12px;
 }
-.pc-price-description__title_size_l, .pc-price-description__description_size_l, .pc-price-description__detailed-title_size_l, .pc-price-description__label_size_l {
-  font-size: var(--yc-text-header-1-font-size);
-  line-height: var(--yc-text-header-1-line-height);
+.pc-price-description__title_size_l, .pc-price-description__description_size_l, .pc-price-description__detailed-title_size_l {
+  font-size: var(--g-text-header-1-font-size);
+  line-height: var(--g-text-header-1-line-height);
 }
-.pc-price-description__title_size_m, .pc-price-description__description_size_m, .pc-price-description__detailed-title_size_m, .pc-price-description__label_size_m {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+.pc-price-description__title_size_m, .pc-price-description__description_size_m, .pc-price-description__detailed-title_size_m {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
 }
-.pc-price-description__title_size_s, .pc-price-description__description_size_s, .pc-price-description__detailed-title_size_s, .pc-price-description__label_size_s {
-  font-size: var(--yc-text-body-1-font-size);
-  line-height: var(--yc-text-body-1-line-height);
+.pc-price-description__title_size_s, .pc-price-description__description_size_s, .pc-price-description__detailed-title_size_s {
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
 }
 .pc-price-description__main-title {
   font-weight: 500;
 }
 .pc-price-description__main-title_color_cornflower {
-  color: var(--yc-my-color-brand-normal);
+  color: var(--g-color-base-brand);
 }
 .pc-price-description__main-title_color_black {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .pc-price-description__title {
   display: flex;
@@ -35,25 +35,13 @@ unpredictable css rules order in build */
 .pc-price-description__detailed-title {
   margin-left: 4px;
 }
-.pc-price-description__label {
-  padding: 4px 12px;
-  border-radius: 4px;
-  width: fit-content;
+.pc-price-description__label_size_s {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
 }
-.pc-price-description__label_color_blue {
-  background: var(--yc-color-promo-highlight-sky);
-}
-.pc-price-description__label_color_green {
-  background: var(--yc-color-promo-highlight-mint);
-}
-.pc-price-description__label_color_yellow {
-  background: var(--yc-color-promo-highlight-gold);
-}
-.pc-price-description__label_color_purple {
-  background: var(--yc-color-promo-highlight-neon);
-}
-.pc-price-description__label_color_red {
-  background: var(--yc-color-promo-highlight-tomato);
+.pc-price-description__label_size_xs {
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
 }
 @media (max-width: 577px) {
   .pc-price-description {

package/build/esm/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.js

@@ -1,9 +1,24 @@
 import React, { useCallback, useContext, useEffect, useMemo } from 'react';
+import { Label } from '@gravity-ui/uikit';
 import { YFMWrapper } from '../../../components';
 import { StylesContext } from '../../../context/stylesContext';
+import { PriceLabelColor, } from '../../../models';
 import { block } from '../../../utils';
 import './PriceDescription.css';
 const b = block('price-description');
+const LabelColorsMapping = {
+    [PriceLabelColor.BLUE]: 'info',
+    [PriceLabelColor.GREEN]: 'success',
+    [PriceLabelColor.YELLOW]: 'warning',
+    [PriceLabelColor.PURPLE]: 'normal',
+    [PriceLabelColor.RED]: 'dnager',
+};
+const LabelSizeMap = {
+    l: 's',
+    m: 's',
+    s: 'xs',
+    xs: 'xs',
+};
 const PriceDescription = (props) => {
     const { title, detailedTitle = '', description, titleSize = 'l', descriptionSize = 'm', colorTitle = 'cornflower', label, labelsDefaultText, className, } = props;
     const descriptionRef = React.useRef(null);
@@ -36,7 +51,9 @@ const PriceDescription = (props) => {
             return null;
         }
         const labelTitle = label.text || (labelsDefaultText && labelsDefaultText[label.color]);
-        return (React.createElement("div", { className: b('label', { color: label.color, size: label.size || descriptionSize }) }, labelTitle));
+        const labelColor = (LabelColorsMapping[label.color] || 'unknown');
+        const labelSize = LabelSizeMap[label.size || descriptionSize];
+        return (React.createElement(Label, { className: b('label', { size: labelSize }), theme: labelColor, size: labelSize }, labelTitle));
     }, [descriptionSize, label, labelsDefaultText]);
     const titleElement = useMemo(() => {
         return (React.createElement("div", { className: b('title', { size: titleSize }) },

package/build/esm/sub-blocks/PriceDetailed/PriceDetails/Details/Settings.css

@@ -4,17 +4,17 @@ unpredictable css rules order in build */
   font-weight: 400;
 }
 .pc-settings-list__title_size_l, .pc-settings-list__description_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-settings-list__title_size_m, .pc-settings-list__description_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-settings-list__title_size_s, .pc-settings-list__description_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);
 }
 .pc-settings-list__title {
-  color: var(--yc-color-text-hint);
+  color: var(--g-color-text-hint);
 }

package/build/esm/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.css

@@ -17,7 +17,7 @@ unpredictable css rules order in build */
   }
 }
 .pc-price-details__delimiter-line {
-  border-top: 1px solid var(--yc-color-line-generic);
+  border-top: 1px solid var(--g-color-line-generic);
 }
 .pc-price-details__arrow {
   margin: auto 10px;
@@ -26,14 +26,14 @@ unpredictable css rules order in build */
   cursor: pointer;
   display: flex;
   font-weight: 400;
-  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-price-details__foldable_title_color_cornflower {
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
 }
 .pc-price-details__foldable_title_color_black {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .pc-price-details__foldable_block > * {
   padding-top: 12px;

package/build/esm/sub-blocks/Quote/Quote.css

@@ -10,14 +10,14 @@ unpredictable css rules order in build */
   height: 100%;
   overflow-x: hidden;
   border-radius: var(--pc-border-radius);
-  background-color: var(--yc-color-base-float);
+  background-color: var(--g-color-base-float);
   transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
   display: flex;
   min-height: 400px;
   height: 100%;
 }
 .pc-quote_theme_dark {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-quote_theme_dark h1,
 .pc-quote_theme_dark h2,
@@ -26,10 +26,10 @@ unpredictable css rules order in build */
 .pc-quote_theme_dark h5,
 .pc-quote_theme_dark h6,
 .pc-quote_theme_dark .yfm {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-quote_border_line {
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
 }
 .pc-quote_border_line, .pc-quote_border_none {
   cursor: default;
@@ -60,8 +60,8 @@ unpredictable css rules order in build */
 .pc-quote__content {
   margin-top: 24px;
   position: relative;
-  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-quote__content::before {
   position: absolute;
@@ -84,7 +84,7 @@ unpredictable css rules order in build */
   margin-top: 20px;
 }
 .pc-quote__author_theme_dark, .pc-quote_theme_dark {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-quote__author_theme_dark h1,
 .pc-quote__author_theme_dark h2,
@@ -99,7 +99,7 @@ unpredictable css rules order in build */
 .pc-quote_theme_dark h5,
 .pc-quote_theme_dark h6,
 .pc-quote_theme_dark .yfm {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-quote__author {
   max-width: calc(60% - 20px);
@@ -110,10 +110,10 @@ unpredictable css rules order in build */
   /* stylelint-enable declaration-no-important */
 }
 .pc-quote__link-button_theme_dark {
-  color: var(--yc-color-base-background) !important;
+  color: var(--g-color-base-background) !important;
 }
 .pc-quote__link-button_theme_dark:before {
-  border-color: var(--yc-color-base-background) !important;
+  border-color: var(--g-color-base-background) !important;
 }
 @media (max-width: 1081px) {
   .pc-quote__author-wrapper {

package/build/esm/sub-blocks/Quote/Quote.js

@@ -1,8 +1,8 @@
-import React, { useCallback, useContext } from 'react';
+import React, { useCallback } from 'react';
 import { Button } from '@gravity-ui/uikit';
 import { Author, HTML, Image } from '../../components';
 import { getMediaImage } from '../../components/Media/Image/utils';
-import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { useTheme } from '../../context/theme';
 import { useAnalytics } from '../../hooks';
 import { AuthorType, DefaultEventNames } from '../../models';
 import { block, getThemedValue } from '../../utils';
@@ -10,7 +10,7 @@ import './Quote.css';
 const b = block('quote');
 const Quote = (props) => {
     const { theme: textTheme = 'light', color, image, border = 'shadow', text, logo, author, url, buttonText, } = props;
-    const { themeValue: theme } = useContext(ThemeValueContext);
+    const theme = useTheme();
     const imageThemed = getThemedValue(image, theme);
     const imageData = getMediaImage(imageThemed);
     const handleAnalytics = useAnalytics(DefaultEventNames.QuoteButton, url);

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

@@ -4,4 +4,4 @@ export interface ThemedValue<T> extends Partial<Record<string, T>> {
 }
 export type ThemeSupporting<T> = T | ThemedValue<T>;
 export declare function isThemedValue<T>(value: ThemeSupporting<T>): value is ThemedValue<T>;
-export declare function getThemedValue<T>(value: ThemeSupporting<T>, theme?: string): T;
+export declare function getThemedValue<T>(value: ThemeSupporting<T>, theme?: import("..").Theme): T;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "3.16.0",
+  "version": "4.0.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -80,6 +80,7 @@
     "test:watch": "jest --watchAll"
   },
   "dependencies": {
+    "@gravity-ui/components": "^2.0.0",
     "@gravity-ui/dynamic-forms": "^1.11.0",
     "@gravity-ui/i18n": "^1.0.0",
     "ajv": "^8.12.0",
@@ -101,8 +102,8 @@
     "uuid": "^9.0.0"
   },
   "peerDependencies": {
-    "@doc-tools/transform": "^2.6.1",
-    "@gravity-ui/uikit": "^4.1.0",
+    "@doc-tools/transform": "^3.3.2",
+    "@gravity-ui/uikit": "^5.1.0",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
@@ -112,13 +113,13 @@
     "@babel/preset-typescript": "^7.22.5",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
-    "@doc-tools/transform": "2.12.0",
+    "@doc-tools/transform": "^3.3.2",
     "@gravity-ui/eslint-config": "^2.0.0",
     "@gravity-ui/icons": "^2.1.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.1.0",
+    "@gravity-ui/uikit": "^5.1.0",
     "@storybook/addon-actions": "^7.1.0",
     "@storybook/addon-essentials": "^7.1.0",
     "@storybook/addon-knobs": "^7.0.2",
@@ -147,6 +148,7 @@
     "eslint": "^8.34.0",
     "eslint-plugin-local": "./eslint-plugin-local",
     "eslint-plugin-no-not-accumulator-reassign": "^0.1.0",
+    "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-testing-library": "^5.9.1",
     "gulp": "^4.0.2",
     "gulp-dart-sass": "^1.0.2",

package/server/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/server/components/constants.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HEADER_HEIGHT = exports.KEY = exports.DEFAULT_THEME = void 0;
-exports.DEFAULT_THEME = 'light';
+exports.HEADER_HEIGHT = exports.KEY = exports.UIKIT_ROOT_CLASS = exports.DEFAULT_THEME = void 0;
+const models_1 = require("../models");
+exports.DEFAULT_THEME = models_1.Theme.Light;
+exports.UIKIT_ROOT_CLASS = 'g-root';
 exports.KEY = {
     ENTER: 'Enter',
     TAB: 'Tab',

package/server/models/common.d.ts

@@ -7,6 +7,7 @@ export declare enum Theme {
     Light = "light",
     Dark = "dark"
 }
+export declare const themeNames: Record<Theme, string>;
 /**
  * @deprecated Pixel will be deleted
  */
@@ -63,6 +64,9 @@ export interface Metrika {
 export interface ClassNameProps {
     className?: string;
 }
+export interface QAProps {
+    qa?: string;
+}
 export type Timeout = ReturnType<typeof setTimeout> | undefined;
 export declare enum PredefinedEventTypes {
     Default = "default-event",

package/server/models/common.js

@@ -1,11 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultEventNames = exports.PredefinedEventTypes = exports.PixelEventType = exports.Theme = void 0;
+exports.DefaultEventNames = exports.PredefinedEventTypes = exports.PixelEventType = exports.themeNames = exports.Theme = void 0;
 var Theme;
 (function (Theme) {
     Theme["Light"] = "light";
     Theme["Dark"] = "dark";
 })(Theme = exports.Theme || (exports.Theme = {}));
+exports.themeNames = {
+    [Theme.Light]: 'Light',
+    [Theme.Dark]: 'Dark',
+};
 /**
  * @deprecated Pixel will be deleted from package
  */

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

@@ -249,10 +249,6 @@ interface ContentLayoutBlockParams {
     textWidth?: ContentTextSize;
 }
 export interface ContentLayoutBlockProps extends ContentLayoutBlockParams {
-    /**
-     * @deprecated Use params on top level instead
-     */
-    properties?: ContentLayoutBlockParams;
     textContent: ContentBlockProps;
     fileContent?: FileLinkProps[];
 }

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

@@ -1,7 +1,7 @@
 import { CSSProperties, ReactNode } from 'react';
 import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils/theme';
-import { AnalyticsEventsBase, ClassNameProps, PixelEventType } from '../common';
+import { AnalyticsEventsBase, ClassNameProps, PixelEventType, QAProps } from '../common';
 export declare enum AuthorType {
     Column = "column",
     Line = "line"
@@ -90,11 +90,10 @@ export interface ImageDeviceProps extends ImageInfoProps {
 }
 export type ImageProps = string | ImageObjectProps | ImageDeviceProps;
 export type ThemedImage = ThemeSupporting<ImageProps>;
-export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, Partial<ImageDeviceProps>, Partial<ImageObjectProps> {
+export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, Partial<ImageDeviceProps>, Partial<ImageObjectProps>, QAProps {
     style?: CSSProperties;
     imageClassName?: string;
     hide?: boolean;
-    qa?: string;
 }
 export interface MediaVideoProps extends AnalyticsEventsBase {
     src: string[];
@@ -327,12 +326,11 @@ export interface PriceDetailedProps extends CardBaseProps {
     foldable?: PriceFoldableDetailsProps;
     labelsDefaultText?: Record<PriceLabelColor, string>;
 }
-export interface AuthorProps {
+export interface AuthorProps extends QAProps {
     author: AuthorItem;
     className?: string;
     authorContainerClassName?: string;
     type?: AuthorType;
-    dataQa?: string;
 }
 export interface TitleProps {
     title?: TitleItemProps | string;

package/server/utils/theme.d.ts

@@ -4,4 +4,4 @@ export interface ThemedValue<T> extends Partial<Record<string, T>> {
 }
 export type ThemeSupporting<T> = T | ThemedValue<T>;
 export declare function isThemedValue<T>(value: ThemeSupporting<T>): value is ThemedValue<T>;
-export declare function getThemedValue<T>(value: ThemeSupporting<T>, theme?: string): T;
+export declare function getThemedValue<T>(value: ThemeSupporting<T>, theme?: import("../models").Theme): T;

package/styles/colors/dark.scss

@@ -0,0 +1,6 @@
+@mixin pc-colors-dark {
+    --pc-color-base-silver: #bcc0c4;
+    --pc-color-base-gold: #ffde5d;
+    --pc-color-base-asphalt: #474d52;
+    --pc-color-base-copper: #7f7262;
+}

package/styles/colors/light.scss

@@ -0,0 +1,6 @@
+@mixin pc-colors-light {
+    --pc-color-base-silver: #eff2f8;
+    --pc-color-base-gold: #ffdb4d;
+    --pc-color-base-asphalt: #313538;
+    --pc-color-base-copper: #ffe6c4;
+}

package/styles/colors/social.scss

@@ -0,0 +1,10 @@
+@mixin pc-colors-social {
+    --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;
+}

package/styles/mixins.scss

@@ -4,21 +4,21 @@
 //common
 
 @mixin text-size($name) {
-    font-size: var(--yc-text-#{$name}-font-size);
-    line-height: var(--yc-text-#{$name}-line-height);
+    font-size: var(--g-text-#{$name}-font-size);
+    line-height: var(--g-text-#{$name}-line-height);
 }
 
 @mixin link() {
     @include islands-focus();
 
-    color: var(--yc-color-text-link);
+    color: var(--g-color-text-link);
     text-decoration: none;
     cursor: pointer;
 
     &:hover,
     &: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);
     }
 }
 
@@ -43,14 +43,6 @@
     }
 }
 
-@mixin add-file-ext-colors() {
-    @each $name, $value in $fileExtColors {
-        &_ext_#{$name} {
-            --pc-file-label-color: #{$value};
-        }
-    }
-}
-
 @mixin reset-button-style() {
     display: inline-block;
     margin: 0;
@@ -122,11 +114,11 @@
 @mixin header-link() {
     @include link;
 
-    --pc-text-header-color: var(--yc-color-text-link);
+    --pc-text-header-color: var(--g-color-text-link);
 
     &:hover,
     &:active {
-        --pc-text-header-color: var(--yc-color-text-link-hover);
+        --pc-text-header-color: var(--g-color-text-link-hover);
     }
 }
 
@@ -179,7 +171,7 @@
 
 @mixin add-theme() {
     &_theme_dark {
-        color: var(--yc-color-text-light-primary);
+        color: var(--g-color-text-light-primary);
 
         h1,
         h2,
@@ -188,7 +180,7 @@
         h5,
         h6,
         .yfm {
-            color: var(--yc-color-text-light-primary);
+            color: var(--g-color-text-light-primary);
         }
     }
 }
@@ -221,7 +213,7 @@
     @extend %shadow;
 
     &: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;
     }
 }
@@ -244,12 +236,12 @@
     height: 100%;
     overflow-x: hidden;
     border-radius: $borderRadius;
-    background-color: var(--yc-color-base-float);
+    background-color: var(--g-color-base-float);
 
     transition: box-shadow 0.3s $ease-out-cubic;
 
     &_border_line {
-        border: 1px solid var(--yc-color-line-generic);
+        border: 1px solid var(--g-color-line-generic);
     }
 
     &_border_line,
@@ -456,25 +448,29 @@ unpredictable css rules order in build */
     min-width: 220px;
     padding: $indentXS;
 
-    border: 1px solid var(--yc-color-line-generic);
+    border: 1px solid var(--g-color-line-generic);
     border-top-width: 0;
     border-radius: calc(#{$borderRadius} / 2);
-    background: var(--yc-color-base-float);
-    box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
+    background: var(--g-color-base-float);
+    box-shadow: 0 3px 10px var(--g-color-sfx-shadow);
 }
 
 @mixin navigation-item {
-    color: var(--yc-color-text-primary);
+    color: var(--g-color-text-primary);
     @include reset-link-style();
     @include islands-focus();
 
     &:hover,
     &_active {
-        color: var(--yc-color-text-link);
+        color: var(--g-color-text-link);
     }
 }
 
 @mixin button($color, $backgroundColor, $hoverColor: $color, $hoverBackgroundColor) {
+    --g-button-background-color: #{$backgroundColor};
+    --g-button-background-color-hover: #{$hoverBackgroundColor};
+
+    //old named variables still in use in uikit, will be removed in next major ver
     --yc-button-background-color: #{$backgroundColor};
     --yc-button-background-color-hover: #{$hoverBackgroundColor};
 

package/styles/root.scss

@@ -1,27 +1,33 @@
+@import './colors/light.scss';
+@import './colors/dark.scss';
+@import './colors/social.scss';
+
 :root {
     --header-height: 64px;
 }
 
-.yc-root {
-    --yc-text-accent-font-weight: 500;
+.g-root {
+    @include pc-colors-social;
+
+    --g-text-accent-font-weight: 500;
 
     // cross-browser transparent color
     --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-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(--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-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);
@@ -29,12 +35,20 @@
         --pc-monochrome-button-background-color-hover
     );
 
-    &.yc-root_theme_dark {
-        --pc-color-sfx-shadow: var(--yc-color-sfx-shadow);
+    &_theme_light {
+        @include pc-colors-light;
+    }
+
+    &_theme_dark {
+        @include pc-colors-dark;
+    }
+
+    &.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);
     }
 }