@vkontakte/vkui-tokens 4.0.0 → 4.2.0

package/build/helpers/getAllButColors.d.ts

@@ -0,0 +1 @@
+export declare function getAllButColors(theme: Record<string, any>, themeNameBase?: unknown): any;

package/build/helpers/getAllButColors.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAllButColors = void 0;
+var regexSize = /^color/i;
+function getAllButColors(theme, themeNameBase) {
+    return Object.keys(theme).reduce(function (acc, key) {
+        var value = theme[key];
+        var lookupKey = typeof themeNameBase === 'string' && key.startsWith(themeNameBase)
+            ? key.slice(themeNameBase.length)
+            : key;
+        if (!regexSize.test(lookupKey)) {
+            acc[key] = value;
+        }
+        return acc;
+    }, {});
+}
+exports.getAllButColors = getAllButColors;

package/build/helpers/getAllButColors.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/helpers/getAllButColors.test.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var getAllButColors_1 = require("./getAllButColors");
+describe('getAllButColors', function () {
+    it('should filter out tokens that start with "color"', function () {
+        expect(getAllButColors_1.getAllButColors({
+            colorBackground: '#FFF',
+            sizePaddingBase: 20,
+            fontText: {
+                fontFamily: 'Comic Sans',
+            },
+            x10: 5,
+            xxxTokenXxx: '8',
+            octaviusColorBackground: '#ACA',
+            octaviusSizePaddingBase: 8,
+        }, 'octavius')).toEqual({
+            sizePaddingBase: 20,
+            fontText: {
+                fontFamily: 'Comic Sans',
+            },
+            x10: 5,
+            xxxTokenXxx: '8',
+            octaviusSizePaddingBase: 8,
+        });
+    });
+});

package/interfaces/general/geometry/index.d.ts

@@ -32,4 +32,8 @@ export interface Sizes {
     sizeBadgeM: number;
     sizeBadgeL: number;
     sizeBadgeXL: number;
+    sizeCardgridPadding: number;
+    sizeCardBorderRadius: number;
+    sizeCardgridPaddingVertical: number;
+    sizeBasePaddingHorizontal: number;
 }

package/interfaces/general/index.d.ts

@@ -1,3 +1,4 @@
+import { Property } from 'csstype';
 import { Animations } from './animations';
 import { ColorDescription, Colors, ColorsDescriptionStruct } from './colors';
 import { Elevation } from './elevation';
@@ -7,6 +8,7 @@ import { Adaptive } from './tools';
 import { NamifyObject } from './tools/cssVars';
 import { StringifyObject } from './tools/utils';
 import { Fonts, TypographyBaseProps } from './typography';
+import ColorScheme = Property.ColorScheme;
 interface AdaptiveInterfaceValues extends Sizes, Fonts {
 }
 declare type AdaptiveTokens = {
@@ -51,6 +53,8 @@ export interface Theme extends ThemeGeneral, ColorsFinal {
  */
 export declare type PixelifyTheme<T extends Partial<Record<keyof T, any>> = Theme> = StringifyObject<Omit<T, 'breakpoints' | 'themeType'>> & Pick<T, Extract<'breakpoints', keyof T>> & {
     themeType: 'pixelify';
+    themeName: string;
+    colorScheme: ColorScheme;
 };
 /**
  * Тема, которая каждой переменной даёт name и value в виде названия

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

@@ -0,0 +1 @@
+export { ThemeVkCom as ThemeVkComDark, ThemeVkComCssVars as ThemeVkComDarkCssVars, ThemeVkComDescription as ThemeVkComDarkDescription, } from '../vkCom';

package/interfaces/themes/vkComDark/index.js

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

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

@@ -0,0 +1 @@
+export { ThemeVkIOS as ThemeVkIOSDark, ThemeVkIOSCssVars as ThemeVkIOSDarkCssVars, ThemeVkIOSDescription as ThemeVkIOSDarkDescription, } from '../vkIOS';

package/interfaces/themes/vkIOSDark/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.0.0",
+  "version": "4.2.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",

package/themeDescriptions/base/paradigm.js

@@ -234,7 +234,7 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
     }, fontTitle3: {
         regular: {
             fontSize: 17,
-            lineHeight: 24,
+            lineHeight: 22,
             fontFamily: fontFamilyAccent,
             fontWeight: fontWeightAccent3,
         },
@@ -407,6 +407,16 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
     }, sizeBadgeXL: {
         regular: 56,
     }, 
+    // Токены компонента Cardscroll
+    sizeCardgridPadding: {
+        regular: 12,
+    }, sizeCardBorderRadius: {
+        regular: 16,
+    }, sizeCardgridPaddingVertical: {
+        regular: 8,
+    }, sizeBasePaddingHorizontal: {
+        regular: 16,
+    }, 
     // Прочие отступы
     elevation1: '0 2px 0 0 rgba(0, 16, 61, 0.04)', elevation2: '0 4px 32px 0 rgba(0, 16, 61, 0.32)', elevation3: '0 16px 48px 0 rgba(0, 0, 0, 0.48)', elevation4: '0 16px 48px 0 rgba(0, 0, 0, 0.48)', animationDurationL: '0.4s', animationDurationM: '0.2s', animationDurationS: '0.1s', animationEasingDefault: 'cubic-bezier(0.3, 0.3, 0.5, 1)', opacityDisable: 0.48, opacityDisableAccessibility: 0.64 });
 var x05 = common_1.helpers.x05, x1 = common_1.helpers.x1, x2 = common_1.helpers.x2, x3 = common_1.helpers.x3, x4 = common_1.helpers.x4, x5 = common_1.helpers.x5, x6 = common_1.helpers.x6, x8 = common_1.helpers.x8, x10 = common_1.helpers.x10;

package/themeDescriptions/base/vk.js

@@ -23,10 +23,16 @@ var fontWeightBase3 = 600;
 exports.lightColors = {
     colorsScheme: 'light',
     colors: {
-        // Background
-        colorBackgroundAccent: '#3F8AE0',
-        colorBackgroundAccentThemed: '#3F8AE0',
-        colorBackgroundAccentAlternative: '#3F8AE0',
+        colorBackgroundAccent: '#2688EB',
+        colorBackgroundAccentThemed: '#2688EB',
+        colorBackgroundAccentAlternative: '#2688EB',
+        colorIconAccent: '#2688EB',
+        colorTextAccent: '#2688EB',
+        colorTextAccentThemed: '#2688EB',
+        colorStrokeAccent: '#2688EB',
+        colorStrokeAccentThemed: '#2688EB',
+        colorStrokeContrast: '#FFFFFF',
+        colorActionSheetText: '#3F8AE0',
         colorBackgroundContent: '#FFFFFF',
         colorBackgroundSecondary: '#F5F5F5',
         colorBackgroundSecondaryAlpha: {
@@ -40,29 +46,12 @@ exports.lightColors = {
         colorBackgroundContrastSecondaryAlpha: 'rgba(255, 255, 255, 0.20)',
         colorBackgroundWarning: '#FFF2D6',
         colorBackgroundNegative: '#E64646',
-        colorBackgroundModal: '#FFFFFF',
-        colorBackgroundPositive: '#4BB34B',
         colorBackgroundNegativeTint: '#FAEBEB',
-        // Text
-        colorTextAccent: '#3F8AE0',
-        colorTextAccentThemed: '#3F8AE0',
         colorTextNegative: '#E64646',
-        colorTextLink: '#4986CC',
-        colorTextLinkThemed: '#4986CC',
-        colorTextMuted: '#2C2D2E',
-        colorTextPrimary: '#000000',
-        colorTextPrimaryInvariably: '#000000',
-        colorTextSecondary: '#818C99',
-        colorTextSubhead: '#6D7885',
-        colorTextTertiary: '#99A2AD',
-        colorTextLinkVisited: '#4986CC',
-        colorTextContrast: '#FFFFFF',
-        colorTextContrastThemed: '#FFFFFF',
-        colorLinkContrast: '#FFFFFF',
-        colorTextPositive: '#4BB34B',
-        // Icons
-        colorIconAccent: '#3F8AE0',
         colorIconNegative: '#E64646',
+        colorStrokeNegative: '#E64646',
+        colorHeaderBackground: '#FFFFFF',
+        colorPanelHeaderIcon: '#2688EB',
         colorIconPrimary: '#2C2D2E',
         colorIconPrimaryInvariably: '#2C2D2E',
         colorIconMedium: '#818C99',
@@ -71,21 +60,28 @@ exports.lightColors = {
         colorIconSecondaryAlpha: 'rgba(0, 0, 0, 0.36)',
         colorIconTertiary: '#B8C1CC',
         colorIconTertiaryAlpha: 'rgba(0, 0, 0, 0.24)',
-        colorIconContrast: '#FFFFFF',
-        colorIconContrastThemed: '#FFFFFF',
-        colorIconPositive: '#4BB34B',
-        // Stroke
-        colorStrokeAccent: '#3F8AE0',
-        colorStrokeAccentThemed: '#3F8AE0',
-        colorStrokeContrast: '#FFFFFF',
-        colorStrokeNegative: '#E64646',
         colorImageBorderAlpha: 'rgba(0, 0, 0, 0.08)',
+        colorWriteBarInputBackground: '#F2F3F5',
+        colorWriteBarInputBorderAlpha: 'rgba(0, 0, 0, 0.08)',
+        colorTrackBackground: '#E1E3E6',
+        colorTrackBuffer: '#A0BFE4',
+        colorBackgroundModal: '#FFFFFF',
+        colorImagePlaceholderAlpha: 'rgba(0, 28, 61, 0.08)',
+        colorImagePlaceholder: '#F2F3F5',
+        colorSearchFieldBackground: '#EBEDF0',
         colorFieldBorderAlpha: 'rgba(0, 0, 0, 0.12)',
         colorSeparatorPrimaryAlpha: 'rgba(0, 0, 0, 0.12)',
         colorSeparatorSecondary: '#E1E3E6',
         colorSeparatorPrimary: '#D7D8D9',
-        colorStrokePositive: '#4BB34B',
-        // Palette
+        colorTextLink: '#2D81E0',
+        colorTextLinkThemed: '#4986CC',
+        colorTextMuted: '#2C2D2E',
+        colorTextPrimary: '#000000',
+        colorTextPrimaryInvariably: '#000000',
+        colorTextSecondary: '#818C99',
+        colorTextSubhead: '#6D7885',
+        colorTextTertiary: '#99A2AD',
+        colorWriteBarIcon: '#3F8AE0',
         colorAccentBlue: '#3F8AE0',
         colorAccentGray: '#A3ADB8',
         colorAccentRed: '#FF3347',
@@ -93,21 +89,19 @@ exports.lightColors = {
         colorAccentOrange: '#FFA000',
         colorAccentPurple: '#735CE6',
         colorAccentViolet: '#792EC0',
-        colorAccentSecondary: '#3F8AE0',
-        // Other
-        colorActionSheetText: '#3F8AE0',
-        colorHeaderBackground: '#FFFFFF',
-        colorPanelHeaderIcon: '#3F8AE0',
-        colorWriteBarInputBackground: '#F2F3F5',
-        colorWriteBarInputBorderAlpha: 'rgba(0, 0, 0, 0.08)',
-        colorTrackBackground: '#E1E3E6',
-        colorTrackBuffer: '#A0BFE4',
-        colorImagePlaceholderAlpha: 'rgba(0, 28, 61, 0.08)',
-        colorImagePlaceholder: '#F2F3F5',
-        colorSearchFieldBackground: '#EBEDF0',
-        colorWriteBarIcon: '#3F8AE0',
         colorSkeletonFrom: '#F5F5F5',
         colorSkeletonTo: '#E1E3E6',
+        colorAccentSecondary: '#3F8AE0',
+        colorTextLinkVisited: '#4986CC',
+        colorTextContrast: '#FFFFFF',
+        colorTextContrastThemed: '#FFFFFF',
+        colorIconContrast: '#FFFFFF',
+        colorIconContrastThemed: '#FFFFFF',
+        colorLinkContrast: '#FFFFFF',
+        colorTextPositive: '#4BB34B',
+        colorBackgroundPositive: '#4BB34B',
+        colorIconPositive: '#4BB34B',
+        colorStrokePositive: '#4BB34B',
         colorAvatarOverlay: 'rgba(129, 140, 153, 0.48)',
         colorOverlayPrimary: 'rgba(0, 0, 0, 0.4)',
         colorTransparent: 'transparent',
@@ -116,10 +110,16 @@ exports.lightColors = {
 exports.darkColors = {
     colorsScheme: 'dark',
     colors: {
-        // Background
-        colorBackgroundAccent: '#71AAEB',
+        colorBackgroundAccent: '#529EF4',
         colorBackgroundAccentThemed: '#FFFFFF',
-        colorBackgroundAccentAlternative: '#71AAEB',
+        colorBackgroundAccentAlternative: '#529EF4',
+        colorIconAccent: '#529EF4',
+        colorTextAccent: '#529EF4',
+        colorTextAccentThemed: '#FFFFFF',
+        colorStrokeAccent: '#529EF4',
+        colorStrokeAccentThemed: '#FFFFFF',
+        colorStrokeContrast: '#FFFFFF',
+        colorActionSheetText: '#529EF4',
         colorBackgroundContent: '#19191A',
         colorBackgroundSecondary: '#232324',
         colorBackgroundSecondaryAlpha: {
@@ -133,29 +133,12 @@ exports.darkColors = {
         colorBackgroundContrastSecondaryAlpha: 'rgba(255, 255, 255, 0.20)',
         colorBackgroundWarning: '#6C4A00',
         colorBackgroundNegative: '#E64646',
-        colorBackgroundModal: '#2D2D2E',
-        colorBackgroundPositive: '#4BB34B',
-        colorBackgroundNegativeTint: '#522e2e',
-        // Text
-        colorTextAccent: '#71AAEB',
-        colorTextAccentThemed: '#FFFFFF',
+        colorBackgroundNegativeTint: '#522E2E',
         colorTextNegative: '#E64646',
-        colorTextLink: '#71AAEB',
-        colorTextLinkThemed: '#FFFFFF',
-        colorTextMuted: '#E1E3E6',
-        colorTextPrimary: '#E1E3E6',
-        colorTextPrimaryInvariably: '#000000',
-        colorTextSecondary: '#76787A',
-        colorTextSubhead: '#C1C3C6',
-        colorTextTertiary: '#636567',
-        colorTextLinkVisited: '#4986CC',
-        colorTextContrast: '#FFFFFF',
-        colorTextContrastThemed: '#000000',
-        colorLinkContrast: '#FFFFFF',
-        colorTextPositive: '#4BB34B',
-        // Icons
-        colorIconAccent: '#71AAEB',
         colorIconNegative: '#E64646',
+        colorStrokeNegative: '#E64646',
+        colorHeaderBackground: '#19191A',
+        colorPanelHeaderIcon: '#71AAEB',
         colorIconPrimary: '#E1E3E6',
         colorIconPrimaryInvariably: '#2C2D2E',
         colorIconMedium: '#B0B1B6',
@@ -164,22 +147,29 @@ exports.darkColors = {
         colorIconSecondaryAlpha: 'rgba(0, 0, 0, 0.43)',
         colorIconTertiary: '#5D5F61',
         colorIconTertiaryAlpha: 'rgba(255, 255, 255, 0.3)',
-        colorIconContrast: '#FFFFFF',
-        colorIconContrastThemed: '#000000',
-        colorIconPositive: '#4BB34B',
-        // Stroke
-        colorStrokeAccent: '#71AAEB',
-        colorStrokeAccentThemed: '#FFFFFF',
-        colorStrokeContrast: '#FFFFFF',
-        colorStrokeNegative: '#E64646',
         colorImageBorderAlpha: 'rgba(255, 255, 255, 0.08)',
+        colorWriteBarInputBackground: '#232324',
+        colorWriteBarInputBorderAlpha: 'rgba(255, 255, 255, 0.8)',
+        colorTrackBackground: '#202021',
+        colorTrackBuffer: '#405772',
+        colorBackgroundModal: '#2D2D2E',
+        colorImagePlaceholderAlpha: 'rgba(241, 247, 255, 0.08)',
+        colorImagePlaceholder: '#2A2B2C',
+        colorSearchFieldBackground: '#232324',
         colorFieldBorderAlpha: 'rgba(255, 255, 255, 0.12)',
         colorSeparatorPrimaryAlpha: 'rgba(0, 0, 0, 0.4)',
         colorSeparatorSecondary: '#141415',
         colorSeparatorPrimary: '#0F0F10',
-        colorStrokePositive: '#4BB34B',
-        // Palette
-        colorAccentBlue: '#71AAEB',
+        colorTextLink: '#529EF4',
+        colorTextLinkThemed: '#FFFFFF',
+        colorTextMuted: '#E1E3E6',
+        colorTextPrimary: '#E1E3E6',
+        colorTextPrimaryInvariably: '#000000',
+        colorTextSecondary: '#76787A',
+        colorTextSubhead: '#C1C3C6',
+        colorTextTertiary: '#636567',
+        colorWriteBarIcon: '#529EF4',
+        colorAccentBlue: '#529EF4',
         // цвета ниже нужно поменять
         // не успел сделать к релизу тёмной версии vk почты
         colorAccentGray: '#A3ADB8',
@@ -188,27 +178,25 @@ exports.darkColors = {
         colorAccentOrange: '#FFA000',
         colorAccentPurple: '#735CE6',
         colorAccentViolet: '#792EC0',
-        colorAccentSecondary: '#3F8AE0',
-        // Other
-        colorActionSheetText: '#71AAEB',
-        colorHeaderBackground: '#19191A',
-        colorPanelHeaderIcon: '#71AAEB',
-        colorWriteBarInputBackground: '#232324',
-        colorWriteBarInputBorderAlpha: 'rgba(255, 255, 255, 0.8)',
-        colorTrackBackground: '#202021',
-        colorTrackBuffer: '#405772',
-        colorImagePlaceholderAlpha: 'rgba(241, 247, 255, 0.08)',
-        colorImagePlaceholder: '#2A2B2C',
-        colorSearchFieldBackground: '#232324',
-        colorWriteBarIcon: '#76787A',
         colorSkeletonFrom: '#F5F5F5',
         colorSkeletonTo: '#E1E3E6',
+        colorAccentSecondary: '#3F8AE0',
+        colorTextLinkVisited: '#4986CC',
+        colorTextContrast: '#FFFFFF',
+        colorTextContrastThemed: '#000000',
+        colorIconContrast: '#FFFFFF',
+        colorIconContrastThemed: '#000000',
+        colorLinkContrast: '#FFFFFF',
+        colorTextPositive: '#4BB34B',
+        colorBackgroundPositive: '#4BB34B',
+        colorIconPositive: '#4BB34B',
+        colorStrokePositive: '#4BB34B',
         colorAvatarOverlay: 'rgba(129, 140, 153, 0.48)',
         colorOverlayPrimary: 'rgba(0, 0, 0, 0.4)',
         colorTransparent: 'transparent',
     },
 };
-exports.lightTheme = __assign(__assign({ themeName: 'vkBase' }, exports.lightColors), { 
+exports.lightTheme = __assign(__assign({ themeName: 'vkBase', themeNameBase: 'vkBase' }, exports.lightColors), { 
     // Типографика
     fontFamilyAccent: fontFamilyAccent,
     fontFamilyBase: fontFamilyBase,
@@ -236,7 +224,7 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase' }, exports.lightCol
     }, fontTitle3: {
         regular: {
             fontSize: 17,
-            lineHeight: 24,
+            lineHeight: 22,
             letterSpacing: '-0.22px',
             fontFamily: fontFamilyAccent,
             fontWeight: fontWeightAccent3,
@@ -370,7 +358,7 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase' }, exports.lightCol
         compact: 32,
     }, sizeButtonSmallHeight: {
         regular: 30,
-        compact: 26,
+        compact: 28,
     }, sizeCheckbox: {
         regular: 16,
     }, sizeArrow: {
@@ -414,6 +402,16 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase' }, exports.lightCol
     }, sizeBadgeXL: {
         regular: 56,
     }, 
+    // Токены компонента Cardscroll
+    sizeCardgridPadding: {
+        regular: 8,
+    }, sizeCardBorderRadius: {
+        regular: 8,
+    }, sizeCardgridPaddingVertical: {
+        regular: 8,
+    }, sizeBasePaddingHorizontal: {
+        regular: 16,
+    }, 
     // Прочие отступы
     elevation1: '0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06)', elevation2: '0px 0px 2px rgba(0, 0, 0, 0.04), 0px 4px 4px rgba(0, 0, 0, 0.08)', elevation3: '0px 0px 4px rgba(0, 0, 0, 0.08), 0px 8px 8px rgba(0, 0, 0, 0.16)', elevation4: '0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16)', animationDurationL: '0.4s', animationDurationM: '0.2s', animationDurationS: '0.1s', animationEasingDefault: 'cubic-bezier(0.3, 0.3, 0.5, 1)', opacityDisable: 0.4, opacityDisableAccessibility: 0.64 });
 exports.darkTheme = __assign(__assign(__assign({}, exports.lightTheme), exports.darkColors), { themeName: 'vkBaseDark', colorsScheme: 'dark', 

package/themes/calendar/cssVars/declarations/index.css

@@ -119,6 +119,10 @@
 	--vkui--size_badge_m--regular: 24px;
 	--vkui--size_badge_l--regular: 44px;
 	--vkui--size_badge_x_l--regular: 56px;
+	--vkui--size_cardgrid_padding--regular: 12px;
+	--vkui--size_card_border_radius--regular: 16px;
+	--vkui--size_cardgrid_padding_vertical--regular: 8px;
+	--vkui--size_base_padding_horizontal--regular: 16px;
 	--vkui--elevation1: none;
 	--vkui--elevation2: none;
 	--vkui--elevation3: 0px 4px 32px rgba(0, 16, 61, 0.32);
@@ -233,6 +237,7 @@
 	--vkui--tone_value_focus: 0.08;
 	--vkui--type_border_button: solid;
 	--vkui--type_border_position: inset;
+	--vkui--theme_name_base: 'calendar';
 	--vkui--font_event_m--font_size--compact: 17px;
 	--vkui--font_event_m--line_height--compact: 24px;
 	--vkui--font_event_m--font_weight--compact: 500;
@@ -1060,6 +1065,10 @@
 	--vkui--size_badge_m: 24px;
 	--vkui--size_badge_l: 44px;
 	--vkui--size_badge_x_l: 56px;
+	--vkui--size_cardgrid_padding: 12px;
+	--vkui--size_card_border_radius: 16px;
+	--vkui--size_cardgrid_padding_vertical: 8px;
+	--vkui--size_base_padding_horizontal: 16px;
 	--vkui--font_h0--font_size: 32px;
 	--vkui--font_h0--line_height: 40px;
 	--vkui--font_h0--font_weight: 500;