@vkontakte/vkui-tokens 4.50.1-dev-6f67f8.0 → 4.52.0

package/interfaces/namespaces/paradigm/index.d.ts

@@ -104,6 +104,8 @@ export interface LocalParadigmColorsDescriptionStruct {
     colorTooltipTextGreenThemed: ColorDescription;
     colorTooltipTextOrangeThemed: ColorDescription;
     colorTooltipTextPurpleThemed: ColorDescription;
+    colorBackgroundSky: ColorDescription;
+    colorBackgroundSkyAlpha: ColorDescription;
 }
 export type ParadigmLocalColors = {
     [key in keyof LocalParadigmColorsDescriptionStruct]: ColorWithStates;

package/interfaces/themes/cloud/index.d.ts

@@ -1,7 +1,8 @@
+import { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from '../../general/colors';
 import { Adaptive } from '../../general/tools';
 import { DefaultViewports } from '../../general/tools/viewports';
 import { Font } from '../../general/typography';
-import { ParadigmTheme, ParadigmThemeCssVars, ParadigmThemeDescription } from '../../namespaces/paradigm';
+import { LocalParadigmColorsDescriptionStruct, ParadigmTheme, ParadigmThemeCssVars, ParadigmThemeDescription } from '../../namespaces/paradigm';
 interface ThemeCloudTypohraphy {
     /**
      * @desc Caption 1 CAPS • DEMIBOLD
@@ -57,9 +58,87 @@ interface ThemeCloudTypohraphy {
      * */
     fontLargeText: Font;
 }
-export interface ThemeCloud extends ParadigmTheme, ThemeCloudTypohraphy {
+export interface LocalCloudColorsDescriptionStruct {
+    cloudColorTextSecondaryAlpha: ColorDescription;
+    cloudColorTextAccentAlternative: ColorDescription;
+    cloudColorTextSnackbarAccent: ColorDescription;
+    cloudColorTextContrastThemedAlpha: ColorDescription;
+    cloudColorToolbarBackground: ColorDescription;
+    cloudColorViewerBackground: ColorDescription;
+    cloudColorTabbarBackgroundAlpha: ColorDescription;
+    cloudColorHeaderIconBackgroundAlpha: ColorDescription;
+    cloudColorBackgroundDragAndDrop: ColorDescription;
+    cloudColorBackgroundCTA: ColorDescription;
+    cloudColorHeaderSearchBackground: ColorDescription;
+    cloudColorHeaderSearchBackgroundCollapsed: ColorDescription;
+    cloudColorBackgroundPortal: ColorDescription;
+    cloudColorBackgroundAlternative: ColorDescription;
+    cloudColorBackgroundContentAlternative: ColorDescription;
+    cloudColorBackgroundFastScroll: ColorDescription;
+    cloudColorIconAccentAlternative: ColorDescription;
+    cloudColorIconRating: ColorDescription;
+    cloudColorIconFolder: ColorDescription;
+    cloudColorLandingStrokeTariff: ColorDescription;
+    cloudColorSweetblue: ColorDescription;
+    cloudColorBlueAccentThemed: ColorDescription;
+    cloudColorSweetgreen: ColorDescription;
+    cloudColorGreenAccentThemed: ColorDescription;
+    cloudColorSweetorange: ColorDescription;
+    cloudColorOrangeAccentThemed: ColorDescription;
+    cloudColorSweetpurple: ColorDescription;
+    cloudColorPurpleAccentThemed: ColorDescription;
+    cloudColorIconIDCardThemedAlpha: ColorDescription;
+    cloudColorIconIDCard: ColorDescription;
+    cloudColorIconOfficialThemedAlpha: ColorDescription;
+    cloudColorIconOfficial: ColorDescription;
+    cloudColorIconTransportThemed: ColorDescription;
+    cloudColorIconTransport: ColorDescription;
+    cloudColorIconFinanceThemed: ColorDescription;
+    cloudColorIconFinance: ColorDescription;
+    cloudColorIconFileDocumentInvariably: ColorDescription;
+    cloudColorIconFilePresentationInvariably: ColorDescription;
+    cloudColorIconFileTableInvariably: ColorDescription;
+    cloudColorBackgroundFileDocument: ColorDescription;
+    cloudColorBackgroundFilePresentation: ColorDescription;
+    cloudColorBackgroundFileTable: ColorDescription;
+    cloudColorBackgroundFileOtherAlpha: ColorDescription;
+    cloudColorBackgroundProfileTariff: ColorDescription;
+    cloudColorIconProfileTariff: ColorDescription;
+    cloudColorBackgroundProfileAccess: ColorDescription;
+    cloudColorIconProfileAccess: ColorDescription;
+    cloudColorBackgroundProfileUploading: ColorDescription;
+    cloudColorIconProfileUploading: ColorDescription;
+    cloudColorBackgroundProfileTrash: ColorDescription;
+    cloudColorIconProfileTrash: ColorDescription;
+    cloudColorBackgroundProfileSettings: ColorDescription;
+    cloudColorIconProfileSettings: ColorDescription;
+    cloudColorBackgroundProfileMail: ColorDescription;
+    cloudColorIconProfileMail: ColorDescription;
+    cloudColorLandingBackground: ColorDescription;
+    cloudColorLandingSecondaryBackground: ColorDescription;
+    cloudColorLandingTertiaryBackground: ColorDescription;
+    cloudColorLandingMediumBackground: ColorDescription;
+    cloudColorLandingButtonBackground: ColorDescription;
+    cloudColorLandingLabelBackground: ColorDescription;
+    cloudColorLandingLabelInverseBackground: ColorDescription;
+    cloudColorLandingControlPrimaryBackground: ColorDescription;
+    cloudColorLandingControlSecondaryBackground: ColorDescription;
+    cloudColorSubscriptionButtonBackground: ColorDescription;
+    cloudColorScrollIndicatorAlpha: ColorDescription;
+    cloudColorSidebarItemText: ColorDescription;
+    cloudColorSidebarItemTextPrimary: ColorDescription;
+    cloudColorSidebarItemTextSecondary: ColorDescription;
+    cloudColorSidebarItemBackgroundAlpha: ColorDescription;
+    cloudColorBackground: ColorDescription;
+    cloudColorOverlayBackground: ColorDescription;
+}
+export type CloudLocalColors = {
+    [key in keyof LocalCloudColorsDescriptionStruct]: ColorWithStates;
+};
+export interface ThemeCloud extends ParadigmTheme, ThemeCloudTypohraphy, CloudLocalColors {
 }
 export interface ThemeCloudDescription extends ParadigmThemeDescription, ThemeCloudTypohraphy {
+    colors: LocalCloudColorsDescriptionStruct & LocalParadigmColorsDescriptionStruct & ColorsDescriptionStruct;
 }
 export interface ThemeCloudCssVars extends ParadigmThemeCssVars<DefaultViewports, ThemeCloud> {
 }

package/interfaces/themes/media/index.d.ts

@@ -130,6 +130,11 @@ interface MediaUniqTokens {
      * @tags font
      */
     mediaFontMediaTitle6: Adaptive<Font>;
+    /**
+     * @desc Подзаголовок, отделённый визуально от заголовка выше
+     * @tags font
+     */
+    mediaFontMediaSubtitleLight: Adaptive<Font>;
     /**
      * @desc Лид статьи
      * @tags font
@@ -188,6 +193,16 @@ interface MediaUniqTokens {
     fontH2: Adaptive<Font>;
     fontH3: Adaptive<Font>;
     fontH4: Adaptive<Font>;
+    /**
+     * @desc
+     * @tags size
+     */
+    mediaSizeGrid: number;
+    /**
+     * @desc Базовый gap сетки
+     * @tags size
+     */
+    mediaSizeGap: number;
     /**
      * @desc Ширина колонки страницы
      * @tags size, component
@@ -198,6 +213,11 @@ interface MediaUniqTokens {
      * @tags size, component
      */
     gridMainContent: Adaptive<number | string>;
+    /**
+     * @desc Ширина основной колонки контента с выносом
+     * @tags size, component
+     */
+    gridMainContentWide: Adaptive<number | string>;
     /**
      * @desc Ширина sidebar
      * @tags size, component

package/interfaces/themes/tutoria/index.d.ts

@@ -0,0 +1,65 @@
+import { ThemeCssVars } from '../../general';
+import { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from '../../general/colors';
+import { Adaptive } from '../../general/tools';
+import { Font } from '../../general/typography';
+import { ThemeVkBase, ThemeVkBaseDescription } from '../vkBase';
+export interface ThemeTutoriaLocalSizes {
+    tutoriaSizePaddingCard: number;
+    tutoriaLayoutMaxWidth: number;
+    tutoriaSizeButtonBaseSmallBorderRadius: number;
+    tutoriaSizeButtonBaseMediumBorderRadius: number;
+    tutoriaSizeButtonBaseLargeBorderRadius: number;
+}
+export interface ThemeTutoriaOverValues {
+}
+export interface LocalTutoriaColorsDescriptionStruct {
+    tutoriaColorBackgroundPrimary: ColorDescription;
+    tutoriaColorBackgroundContentInverse: ColorDescription;
+    tutoriaColorBackgroundOverlayAlpha: ColorDescription;
+    tutoriaColorBackgroundNeutral: ColorDescription;
+    tutoriaColorBackgroundAccentTint: ColorDescription;
+    tutoriaColorBackgroundWarning: ColorDescription;
+    tutoriaColorBackgroundWarningTint: ColorDescription;
+    tutoriaColorBackgroundPositiveTint: ColorDescription;
+    tutoriaColorBackgroundNegativeTint: ColorDescription;
+    tutoriaColorBackgroundInfo: ColorDescription;
+    tutoriaColorBackgroundInfoTint: ColorDescription;
+    tutoriaColorCardBoxShadowAlpha: ColorDescription;
+    tutoriaColorTextWarning: ColorDescription;
+    tutoriaColorTextInfo: ColorDescription;
+    tutoriaColorIconWarning: ColorDescription;
+    tutoriaColorIconInfo: ColorDescription;
+    tutoriaColorIconLink: ColorDescription;
+    tutoriaColorSeparatorPrimaryAlpha: ColorDescription;
+    tutoriaColorSeparatorSecondaryAlpha: ColorDescription;
+    tutoriaColorStrokePrimary: ColorDescription;
+    tutoriaColorStrokeSecondary: ColorDescription;
+    tutoriaColorStrokeTertiary: ColorDescription;
+    tutoriaColorStrokeAccentTint: ColorDescription;
+    tutoriaColorStrokePositiveTint: ColorDescription;
+    tutoriaColorStrokeWarning: ColorDescription;
+    tutoriaColorStrokeWarningTint: ColorDescription;
+    tutoriaColorStrokeNegativeTint: ColorDescription;
+    tutoriaColorStrokeInfo: ColorDescription;
+    tutoriaColorStrokeInfoTint: ColorDescription;
+}
+export interface LocalTutoriaFontStruct {
+    tutoriaFontTextTitle1: Font;
+    tutoriaFontTextTitle2: Font;
+    tutoriaFontTextTitle3: Font;
+}
+type ThemeTutoriaAdaptiveValues = LocalTutoriaFontStruct & ThemeTutoriaLocalSizes;
+export type ThemeTutoriaAdaptiveTokens = {
+    [key in keyof ThemeTutoriaAdaptiveValues]: Adaptive<ThemeTutoriaAdaptiveValues[key]>;
+};
+export type TutoriaLocalColors = {
+    [key in keyof LocalTutoriaColorsDescriptionStruct]: ColorWithStates;
+};
+export interface ThemeTutoriaDescription extends ThemeVkBaseDescription, ThemeTutoriaOverValues, ThemeTutoriaAdaptiveTokens {
+    colors: LocalTutoriaColorsDescriptionStruct & ColorsDescriptionStruct;
+}
+export interface ThemeTutoria extends ThemeVkBase, ThemeTutoriaOverValues, TutoriaLocalColors, ThemeTutoriaAdaptiveTokens {
+}
+export interface ThemeTutoriaCssVars extends ThemeCssVars<ThemeTutoria> {
+}
+export {};

package/interfaces/themes/tutoria/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/interfaces/themes/tutoriaDark/index.d.ts

@@ -0,0 +1,4 @@
+import { ThemeTutoria, ThemeTutoriaCssVars, ThemeTutoriaDescription } from '../tutoria';
+export type ThemeTutoriaDark = ThemeTutoria;
+export type ThemeTutoriaDarkDescription = ThemeTutoriaDescription;
+export type ThemeTutoriaDarkCssVars = ThemeTutoriaCssVars;

package/interfaces/themes/tutoriaDark/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/interfaces/themes/widgets/index.d.ts

@@ -0,0 +1,7 @@
+import { ParadigmTheme, ParadigmThemeCssVars, ParadigmThemeDescription } from '../../namespaces/paradigm';
+export interface ThemeWidgetsDescription extends ParadigmThemeDescription {
+}
+export interface ThemeWidgets extends ParadigmTheme {
+}
+export interface ThemeWidgetsCssVars extends ParadigmThemeCssVars {
+}

package/interfaces/themes/widgets/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/interfaces/themes/widgetsDark/index.d.ts

@@ -0,0 +1,7 @@
+import { ParadigmTheme, ParadigmThemeCssVars, ParadigmThemeDescription } from '../../namespaces/paradigm';
+export interface ThemeWidgetsDarkDescription extends ParadigmThemeDescription {
+}
+export interface ThemeWidgetsDark extends ParadigmTheme {
+}
+export interface ThemeWidgetsDarkCssVars extends ParadigmThemeCssVars {
+}

package/interfaces/themes/widgetsDark/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.50.1-dev-6f67f8.0",
+  "version": "4.52.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "homepage": "https://vkcom.github.io/vkui-tokens",
@@ -43,7 +43,7 @@
     "csstype": "^3.1.1"
   },
   "devDependencies": {
-    "@babel/core": "7.24.7",
+    "@babel/core": "7.25.2",
     "@svgr/webpack": "8.1.0",
     "@types/color": "3.0.6",
     "@types/common-tags": "1.8.4",
@@ -56,7 +56,7 @@
     "@vkontakte/icons": "2.124.0",
     "@vkontakte/prettier-config": "0.1.0",
     "@vkontakte/vk-bridge": "2.14.2",
-    "@vkontakte/vkjs": "1.2.0",
+    "@vkontakte/vkjs": "1.3.0",
     "@vkontakte/vkui": "6.3.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
@@ -81,10 +81,10 @@
     "eslint-plugin-unicorn": "51.0.1",
     "fs-extra": "11.2.0",
     "html-webpack-plugin": "5.6.0",
-    "husky": "9.1.3",
+    "husky": "9.1.4",
     "jest": "29.7.0",
     "jest-junit": "16.0.0",
-    "lint-staged": "15.2.7",
+    "lint-staged": "15.2.9",
     "lodash": "4.17.21",
     "prettier": "3.3.2",
     "react": "18.3.1",
@@ -92,7 +92,7 @@
     "rimraf": "5.0.7",
     "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.10",
-    "ts-jest": "29.1.5",
+    "ts-jest": "29.2.4",
     "ts-loader": "9.5.1",
     "ts-morph": "20.0.0",
     "ts-node": "10.9.2",
@@ -101,7 +101,7 @@
     "type-fest": "4.23.0",
     "typescript": "5.2.2",
     "typescript-eslint": "7.0.1",
-    "webpack": "5.92.1",
+    "webpack": "5.93.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.0.4",
     "webpack-notifier": "1.15.0"

package/themeDescriptions/base/paradigm.js

@@ -32,9 +32,9 @@ exports.lightColors = {
     colorsScheme: 'light',
     colors: {
         // Background
-        colorBackgroundAccent: '#005FF9',
-        colorBackgroundAccentThemed: '#005FF9',
-        colorBackgroundAccentThemedAlpha: 'rgba(0, 95, 249, 0.2)',
+        colorBackgroundAccent: '#0077FF',
+        colorBackgroundAccentThemed: '#0077FF',
+        colorBackgroundAccentThemedAlpha: 'rgba(0, 119, 255, 0.2)',
         colorBackgroundAccentAlternative: '#FF9E00',
         colorBackgroundContent: '#FFFFFF',
         colorBackgroundSecondary: '#F0F1F3',
@@ -51,7 +51,7 @@ exports.lightColors = {
             active: 'rgba(255, 255, 255, 0.28)',
         },
         colorBackgroundWarning: '#FFF1AD',
-        colorBackgroundNegative: '#ED0A34',
+        colorBackgroundNegative: '#ED330A',
         colorBackgroundTertiary: colorBackgroundTertiaryLight,
         colorBackgroundTertiaryAlpha: {
             normal: 'rgba(0, 0, 0, 0.04)',
@@ -60,7 +60,7 @@ exports.lightColors = {
         },
         colorBackgroundModal: '#FFFFFF',
         colorBackgroundPositive: '#0DC268',
-        colorBackgroundNegativeTint: '#FAEBEB',
+        colorBackgroundNegativeTint: '#FEEFEB',
         colorBackgroundPositiveTint: '#ECFAF3',
         colorFieldBackground: '#ffffff',
         colorBackgroundModalInverse: '#303030',
@@ -69,12 +69,12 @@ exports.lightColors = {
         colorBackgroundAccentTint: '#5a9eff',
         colorBackgroundInfoTint: '#f0f4ff',
         // Text
-        colorTextAccent: '#005FF9',
-        colorTextAccentThemed: '#005FF9',
-        colorTextNegative: '#ED0A34',
-        colorTextLink: '#005BD1',
+        colorTextAccent: '#0070f0',
+        colorTextAccentThemed: '#0070f0',
+        colorTextNegative: '#ED330a',
+        colorTextLink: '#0070f0',
         colorTextLinkTint: '#71AAEB',
-        colorTextLinkThemed: '#005BD1',
+        colorTextLinkThemed: '#0070f0',
         colorTextMuted: '#2C2D2E',
         colorTextPrimary: '#2C2D2E',
         colorTextPrimaryInvariably: '#2C2D2E',
@@ -87,8 +87,8 @@ exports.lightColors = {
         colorLinkContrast: '#FFFFFF',
         colorTextPositive: '#0DC268',
         // Icons
-        colorIconAccent: '#005FF9',
-        colorIconAccentThemed: '#005FF9',
+        colorIconAccent: '#0077ff',
+        colorIconAccentThemed: '#0077ff',
         colorIconPrimary: '#2C2D2E',
         colorIconPrimaryInvariably: '#2C2D2E',
         colorIconMedium: '#919399',
@@ -101,13 +101,13 @@ exports.lightColors = {
         colorIconContrastThemed: '#FFFFFF',
         colorIconPositive: '#0DC268',
         colorIconWarning: '#FF9E00',
-        colorIconNegative: '#ED0A34',
+        colorIconNegative: '#ED033a',
         colorIconContrastSecondary: '#F2F3F5',
         // Stroke
-        colorStrokeAccent: '#005FF9',
-        colorStrokeAccentThemed: '#005FF9',
+        colorStrokeAccent: '#0077ff',
+        colorStrokeAccentThemed: '#0077ff',
         colorStrokeContrast: '#FFFFFF',
-        colorStrokeNegative: '#ED0A34',
+        colorStrokeNegative: '#ED033a',
         colorImageBorderAlpha: 'rgba(0, 16, 61, 0.08)',
         colorFieldBorderAlpha: 'rgba(0, 16, 61, 0.12)',
         colorSeparatorPrimaryAlpha: 'rgba(0, 16, 61, 0.12)',
@@ -117,9 +117,9 @@ exports.lightColors = {
         colorSeparatorPrimary2x: '#CDD0D5',
         colorSeparatorPrimary3x: '#BFC3CA',
         // Palette
-        colorAccentBlue: '#005FF9',
+        colorAccentBlue: '#0077FF',
         colorAccentGray: '#A5A7AD',
-        colorAccentRed: '#ED0A34',
+        colorAccentRed: '#ED033A',
         colorAccentOrangeFire: '#F05C44',
         colorAccentOrange: '#FF9E00',
         colorAccentOrangePeach: '#F9B54F',
@@ -127,15 +127,15 @@ exports.lightColors = {
         colorAccentGreen: '#0DC268',
         colorAccentCyan: '#07E5F9',
         colorAccentAzure: '#0077FF',
-        colorAccentPurple: '#4F6DDC',
+        colorAccentPurple: '#8C64FF',
         colorAccentViolet: '#C15DF3',
         colorAccentRaspberryPink: '#E03FAB',
         colorAccentPink: '#FF3985',
         colorAccentSecondary: '#FF9E00',
         // Other
-        colorActionSheetText: '#005FF9',
+        colorActionSheetText: '#0077ff',
         colorHeaderBackground: '#FFFFFF',
-        colorPanelHeaderIcon: '#005FF9',
+        colorPanelHeaderIcon: '#0077ff',
         colorWriteBarInputBackground: '#F0F1F3',
         colorWriteBarInputBorder: '#E1E3E6',
         colorWriteBarInputBorderAlpha: 'rgba(0, 16, 61, 0.8)',
@@ -144,7 +144,7 @@ exports.lightColors = {
         colorImagePlaceholder: '#E6E7EB',
         colorImagePlaceholderAlpha: 'rgba(0, 16, 61, 0.8)',
         colorSearchFieldBackground: '#E6E7EB',
-        colorWriteBarIcon: '#005FF9',
+        colorWriteBarIcon: '#0077ff',
         colorSkeletonFrom: '#F3F3F5',
         colorSkeletonTo: '#E0E1E6',
         colorAvatarOverlay: 'rgba(145, 147, 153, 0.48)',
@@ -153,9 +153,9 @@ exports.lightColors = {
         colorOverlaySecondary: 'rgba(44, 45, 46, 0.5)',
         colorSegmentedControl: '#FFFFFF',
         colorTabbarTextInactive: '#99A2AD',
-        colorButtonText: '#005FF9',
-        colorButtonIcon: '#005FF9',
-        colorButtonStroke: '#005FF9',
+        colorButtonText: '#0077ff',
+        colorButtonIcon: '#0077ff',
+        colorButtonStroke: '#0077ff',
         colorTransparent: 'transparent',
     },
 };
@@ -163,7 +163,7 @@ exports.darkColors = {
     colorsScheme: 'dark',
     colors: {
         // Background
-        colorBackgroundAccent: '#2775FC',
+        colorBackgroundAccent: '#0077FF',
         colorBackgroundAccentThemed: '#FFFFFF',
         colorBackgroundAccentThemedAlpha: 'rgba(255, 255, 255, 0.2)',
         colorBackgroundAccentAlternative: '#FF9E00',
@@ -200,10 +200,10 @@ exports.darkColors = {
         colorBackgroundAccentTint: '#5a9eff',
         colorBackgroundInfoTint: '#19202f',
         // Text
-        colorTextAccent: '#3C82FD',
+        colorTextAccent: '#1A85FF',
         colorTextAccentThemed: '#FFFFFF',
         colorTextNegative: '#FF5C5C',
-        colorTextLink: '#589BFF',
+        colorTextLink: '#1A85FF',
         colorTextLinkTint: '#71AAEB',
         colorTextLinkThemed: '#FFFFFF',
         colorTextMuted: '#E7E8EA',
@@ -218,7 +218,7 @@ exports.darkColors = {
         colorLinkContrast: '#FFFFFF',
         colorTextPositive: '#0DC268',
         // Icons
-        colorIconAccent: '#3C82FD',
+        colorIconAccent: '#0077FF',
         colorIconAccentThemed: '#FFFFFF',
         colorIconPrimary: '#D9DADD',
         colorIconPrimaryInvariably: '#2C2D2E',
@@ -235,7 +235,7 @@ exports.darkColors = {
         colorIconNegative: '#FF5C5C',
         colorIconContrastSecondary: '#F2F3F5',
         // Stroke
-        colorStrokeAccent: '#3C82FD',
+        colorStrokeAccent: '#0077FF',
         colorStrokeAccentThemed: '#FFFFFF',
         colorStrokeContrast: '#FFFFFF',
         colorStrokeNegative: '#FF5C5C',
@@ -248,9 +248,9 @@ exports.darkColors = {
         colorSeparatorPrimary3x: '#2d2d2f',
         colorStrokePositive: '#0DC268',
         // Palette
-        colorAccentBlue: '#2775FC',
+        colorAccentBlue: '#0077ff',
         colorAccentGray: '#9C9DA2',
-        colorAccentRed: '#ED0A34',
+        colorAccentRed: '#ED330A',
         colorAccentOrangeFire: '#F05C44',
         colorAccentOrange: '#FF9E00',
         colorAccentOrangePeach: '#FFC062',
@@ -258,15 +258,15 @@ exports.darkColors = {
         colorAccentGreen: '#0DC268',
         colorAccentCyan: '#07E5F9',
         colorAccentAzure: '#0077FF',
-        colorAccentPurple: '#4F6DDC',
+        colorAccentPurple: '#8C64FF',
         colorAccentViolet: '#C15DF3',
         colorAccentRaspberryPink: '#F060C0',
         colorAccentPink: '#FF3985',
         colorAccentSecondary: '#FF9E00',
         // Other
-        colorActionSheetText: '#3C82FD',
+        colorActionSheetText: '#0077FF',
         colorHeaderBackground: '#232324',
-        colorPanelHeaderIcon: '#3C82FD',
+        colorPanelHeaderIcon: '#0077FF',
         colorWriteBarInputBackground: '#2A2A2B',
         colorWriteBarInputBorder: '#2C2D2E',
         colorWriteBarInputBorderAlpha: 'rgba(255, 255, 255, 0.8)',
@@ -275,7 +275,7 @@ exports.darkColors = {
         colorImagePlaceholderAlpha: 'rgba(255, 255, 255, 0.8)',
         colorImagePlaceholder: '#393A3B',
         colorSearchFieldBackground: '#393A3B',
-        colorWriteBarIcon: '#3C82FD',
+        colorWriteBarIcon: '#0077FF',
         colorSkeletonFrom: '#2A2A2B',
         colorSkeletonTo: '#3E3F40',
         colorAvatarOverlay: 'rgba(176, 178, 182, 0.48)',
@@ -654,7 +654,9 @@ exports.lightTheme = __assign(__assign(__assign({}, exports.lightThemeBase), com
             active: 'rgba(255, 255, 255, 0.6)',
         }, colorButtonContrast: (0, overlayColors_1.overlayColors)(function (theme) { return theme.colors.colorBackgroundContent; }, function (theme) { return theme.colors.colorButtonContrastAlpha; }), colorThumbErrorBackgroundAlpha: 'rgba(237, 10, 52, 0.12)', 
         // Тонированные цвета для проектов
-        colorBackgroundAccentTintThemedAlpha: 'rgba(0, 95, 249, 0.06)', colorBackgroundAccentTintAlpha: 'rgba(0, 95, 249, 0.06)', colorBackgroundAccentTintThemed: '#f0f4ff', colorBackgroundWarningTintThemedAlpha: 'rgba(255, 241, 173, 0.48)', colorBackgroundWarningTintAlpha: 'rgba(255, 241, 173, 0.48)', colorBackgroundWarningTintThemed: '#fffce0', colorBackgroundWarningTint: '#fffce0', colorBackgroundNegativeTintThemedAlpha: 'rgba(237, 10, 52, 0.08)', colorBackgroundNegativeTintAlpha: 'rgba(237, 10, 52, 0.08)', colorBackgroundNegativeTintThemed: '#faebeb', colorBackgroundPositiveTintThemedAlpha: 'rgba(13, 194, 104, 0.08)', colorBackgroundPositiveTintAlpha: 'rgba(13, 194, 104, 0.08)', colorBackgroundPositiveTintThemed: '#ECFAF3', colorTooltipBackgroundBlueTint: '#DDE9FF', colorTooltipBackgroundGreenTint: '#CEEEE6', colorTooltipBackgroundOrangeTint: '#F9D3BD', colorTooltipBackgroundPurpleTint: '#F2E8FF', colorTooltipTextBlueThemed: '#1C4479', colorTooltipTextGreenThemed: '#087C6D', colorTooltipTextOrangeThemed: '#78472A', colorTooltipTextPurpleThemed: '#73519F' }), breakpoints: {
+        colorBackgroundAccentTintThemedAlpha: 'rgba(0, 119, 255, 0.06)', colorBackgroundAccentTintAlpha: 'rgba(0, 119, 255, 0.06)', colorBackgroundAccentTintThemed: '#f0f7ff', colorBackgroundWarningTintThemedAlpha: 'rgba(255, 241, 173, 0.48)', colorBackgroundWarningTintAlpha: 'rgba(255, 241, 173, 0.48)', colorBackgroundWarningTintThemed: '#fffce0', colorBackgroundWarningTint: '#fffce0', colorBackgroundNegativeTintThemedAlpha: 'rgba(237, 51, 10, 0.08)', colorBackgroundNegativeTintAlpha: 'rgba(237, 51, 10, 0.08)', colorBackgroundNegativeTintThemed: '#feefeb', colorBackgroundPositiveTintThemedAlpha: 'rgba(13, 194, 104, 0.08)', colorBackgroundPositiveTintAlpha: 'rgba(13, 194, 104, 0.08)', colorBackgroundPositiveTintThemed: '#ECFAF3', colorTooltipBackgroundBlueTint: '#DDE9FF', colorTooltipBackgroundGreenTint: '#CEEEE6', colorTooltipBackgroundOrangeTint: '#F9D3BD', colorTooltipBackgroundPurpleTint: '#F2E8FF', colorTooltipTextBlueThemed: '#1C4479', colorTooltipTextGreenThemed: '#087C6D', colorTooltipTextOrangeThemed: '#78472A', colorTooltipTextPurpleThemed: '#73519F', 
+        // Byte colors
+        colorBackgroundSky: '#cce4ff', colorBackgroundSkyAlpha: 'rgba(204, 228, 255, 0.9)' }), breakpoints: {
         touch: {
             breakpoint: 0,
             adaptiveValue: 'regular',
@@ -833,7 +835,9 @@ exports.darkTheme = __assign(__assign(__assign(__assign({}, exports.lightTheme),
             active: 'rgba(255, 255, 255, 0.24)',
         }, colorThumbErrorBackgroundAlpha: 'rgba(237, 10, 52, 0.12)', 
         // Тонированные цвета для проектов
-        colorBackgroundAccentTintThemedAlpha: 'rgba(255, 255, 255, 0.08)', colorBackgroundAccentTintAlpha: 'rgba(0, 95, 249, 0.1)', colorBackgroundAccentTintThemed: '#2b2b2c', colorBackgroundWarningTintThemedAlpha: 'rgba(255, 255, 255, 0.08)', colorBackgroundWarningTintAlpha: 'rgba(255, 158, 0, 0.1)', colorBackgroundWarningTintThemed: '#2b2b2c', colorBackgroundWarningTint: '#302617', colorBackgroundNegativeTintThemedAlpha: 'rgba(255, 255, 255, 0.08)', colorBackgroundNegativeTintAlpha: 'rgba(237, 10, 52, 0.1)', colorBackgroundNegativeTintThemed: '#2b2b2c', colorBackgroundPositiveTintThemedAlpha: 'rgba(255, 255, 255, 0.08)', colorBackgroundPositiveTintAlpha: 'rgba(13, 194, 104, 0.1)', colorBackgroundPositiveTintThemed: '#2b2b2c', colorTooltipBackgroundBlueTint: '#1C4479', colorTooltipBackgroundGreenTint: '#087C6D', colorTooltipBackgroundOrangeTint: '#78472A', colorTooltipBackgroundPurpleTint: '#73519F', colorTooltipTextBlueThemed: '#FFFFFF', colorTooltipTextGreenThemed: '#FFFFFF', colorTooltipTextOrangeThemed: '#FFFFFF', colorTooltipTextPurpleThemed: '#FFFFFF' }) });
+        colorBackgroundAccentTintThemedAlpha: 'rgba(255, 255, 255, 0.08)', colorBackgroundAccentTintAlpha: 'rgba(0, 119, 255, 0.1)', colorBackgroundAccentTintThemed: '#2b2b2c', colorBackgroundWarningTintThemedAlpha: 'rgba(255, 255, 255, 0.08)', colorBackgroundWarningTintAlpha: 'rgba(255, 158, 0, 0.1)', colorBackgroundWarningTintThemed: '#2b2b2c', colorBackgroundWarningTint: '#302617', colorBackgroundNegativeTintThemedAlpha: 'rgba(255, 255, 255, 0.08)', colorBackgroundNegativeTintAlpha: 'rgba(237, 51, 10, 0.1)', colorBackgroundNegativeTintThemed: '#2b2b2c', colorBackgroundPositiveTintThemedAlpha: 'rgba(255, 255, 255, 0.08)', colorBackgroundPositiveTintAlpha: 'rgba(13, 194, 104, 0.1)', colorBackgroundPositiveTintThemed: '#2b2b2c', colorTooltipBackgroundBlueTint: '#1C4479', colorTooltipBackgroundGreenTint: '#087C6D', colorTooltipBackgroundOrangeTint: '#78472A', colorTooltipBackgroundPurpleTint: '#73519F', colorTooltipTextBlueThemed: '#FFFFFF', colorTooltipTextGreenThemed: '#FFFFFF', colorTooltipTextOrangeThemed: '#FFFFFF', colorTooltipTextPurpleThemed: '#FFFFFF', 
+        // Byte colors
+        colorBackgroundSky: '#2b2b2c', colorBackgroundSkyAlpha: 'rgba(51, 51, 51, 0.8)' }) });
 // Для экспорта базовой темы прописываем токен themeNameBase отдельно
 // В darkThemeBase прописать не можем, т.к. он тогда перетрёт themeNameBase
 // в продуктовых темах.