@vkontakte/vkui-tokens 4.78.0 → 4.79.0

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

@@ -1,6 +1,18 @@
 export interface Effects {
+    /**
+	 * @desc Слабое размытие
+	 * @tags blur
+	 */ blurS: number;
     /**
 	 * @desc Среднее размытие
 	 * @tags blur
 	 */ blurM: number;
+    /**
+	 * @desc Сильное размытие
+	 * @tags blur
+	 */ blurL: number;
+    /**
+	 * @desc Очень сильное размытие
+	 * @tags blur
+	 */ blurXL: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.78.0",
+  "version": "4.79.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "type": "module",
   "license": "MIT",

package/themeDescriptions/base/vk.js

@@ -5,7 +5,7 @@ colorTextAccent:o.text_accent,colorTextAccentThemed:o.text_accent_themed,colorTe
 colorIconAccent:i.icon_accent,colorIconAccentThemed:i.icon_accent_themed,colorIconPrimary:i.icon_primary,colorIconPrimaryInvariably:i.icon_primary_invariably,colorIconMedium:i.icon_medium,colorIconMediumAlpha:i.icon_medium_alpha,colorIconSecondary:i.icon_secondary,colorIconSecondaryAlpha:({light:"rgba(0, 0, 0, 0.36)",dark:"rgba(241, 247, 255, 0.43)"})[r],colorIconTertiary:i.icon_tertiary,colorIconTertiaryAlpha:i.icon_tertiary_alpha,colorIconContrast:i.icon_contrast,colorIconContrastThemed:i.icon_contrast_themed,colorIconContrastSecondary:i.icon_contrast_secondary,colorIconPositive:i.icon_positive,colorIconWarning:({light:"#F8A01C",dark:"#EDB055"})[r],colorIconNegative:i.icon_negative,// Stroke
 colorStrokeAccent:n.stroke_accent,colorStrokeAccentThemed:n.stroke_accent_themed,colorSeparatorPrimary:n.separator_primary,colorSeparatorPrimary2x:({light:"#cbcccd",dark:"#444546"})[r],colorSeparatorPrimary3x:({light:"#bebfc1",dark:"#505253"})[r],colorSeparatorPrimaryAlpha:n.separator_primary_alpha,colorSeparatorSecondary:n.separator_secondary,colorStrokePositive:n.stroke_positive,colorStrokeNegative:n.stroke_negative,colorStrokeContrast:n.stroke_contrast,colorStrokePrimary:({light:"#2C2D2E",dark:"#E1E3E6"})[r],colorImageBorderAlpha:n.image_border_alpha,colorFieldBorderAlpha:({light:{normal:"rgba(0, 0, 0, 0.12)",hover:"rgba(0, 0, 0, 0.24)",active:"rgba(0, 0, 0, 0.36)"},dark:"rgba(255, 255, 255, 0.12)"})[r],// Palette
 colorAccentBlue:l.accent_blue,colorAccentGray:l.accent_gray,colorAccentRed:l.accent_red,colorAccentOrangeFire:l.accent_orange_fire,colorAccentOrange:l.accent_orange,colorAccentOrangePeach:({light:"#F9B54F",dark:"#FFC062"})[r],colorAccentLime:({light:"#AFF70D",dark:"#AFF70D"})[r],colorAccentGreen:l.accent_green,colorAccentCyan:({light:"#13FFD0",dark:"#13FFD0"})[r],colorAccentAzure:({light:"#0077FF",dark:"#0077FF"})[r],colorAccentPurple:l.accent_purple,colorAccentViolet:l.accent_violet,colorAccentRaspberryPink:l.accent_raspberry_pink,colorAccentPink:({light:"#F45FFF",dark:"#F45FFF"})[r],colorAccentSecondary:l.accent_secondary,// Other
-colorOverlayPrimary:c.overlay_primary,colorOverlaySecondary:{normal:"rgba(0, 0, 0, 0.27)",hover:"rgba(0, 0, 0, 0.31)",active:"rgba(0, 0, 0, 0.35)"},colorAvatarOverlay:c.avatar_overlay_alpha,colorAvatarOverlayInverseAlpha:c.avatar_overlay_inverse_alpha,colorActionSheetText:c.action_sheet_text,colorImagePlaceholder:c.image_placeholder,colorImagePlaceholderAlpha:c.image_placeholder_alpha,colorSkeletonFrom:c.skeleton_from,colorSkeletonTo:c.skeleton_to,colorButtonText:({light:"#2688eb",dark:"#ffffff"})[r],colorButtonIcon:({light:"#2688eb",dark:"#ffffff"})[r],colorButtonStroke:({light:"#2688eb",dark:"#ffffff"})[r],colorWriteBarIcon:c.write_bar_icon,colorWriteBarInputBackground:c.write_bar_input_background,colorWriteBarInputBorder:c.write_bar_input_border,colorWriteBarInputBorderAlpha:({light:"rgba(0, 0, 0, 0.08)",dark:"rgba(255, 255, 255, 0.8)"})[r],colorTrackBackground:c.track_background,colorTrackBuffer:c.track_buffer,colorSearchFieldBackground:c.search_field_background,colorPanelHeaderIcon:c.panel_header_icon,colorSegmentedControl:c.segmented_control,colorTabbarTextInactive:({light:"#99a2ad",dark:"#76787a"})[r],colorTransparent:"transparent"}}};export var lightColors=colorFromFigma("light");export var lightGradient={gradientBlack:a("#000000",.4),gradientWhite:a("#FFFFFF"),gradientTint:a(t.light.background.background_tertiary),gradient:a("#FFFFFF")};export var lightElevation={elevation1:"0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06)",elevation1InvertY:"0px 0px 2px rgba(0, 0, 0, 0.03), 0px -2px 2px rgba(0, 0, 0, 0.06)",elevation2:"0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06)",elevation3:"0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08)",elevation4:"0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16)"};export var darkColors=colorFromFigma("dark");export var darkGradient={gradientBlack:a("#000000",.4),gradientWhite:a("#FFFFFF"),gradientTint:a(t.dark.background.background_tertiary),gradient:a(t.dark.background.background_content)};export var darkElevation={elevation1:"0px 0px 2px 0px rgba(0, 0, 0, 0.10), 0px 2px 2px 0px rgba(0, 0, 0, 0.20)",elevation1InvertY:"0px 0px 2px 0px rgba(0, 0, 0, 0.10), 0px -2px 2px 0px rgba(0, 0, 0, 0.20)",elevation2:"0px 4px 8px 0px rgba(0, 0, 0, 0.15), 0px 0px 4px 0px rgba(0, 0, 0, 0.20)",elevation3:"0px 0px 2px 0px rgba(0, 0, 0, 0.30), 0px 4px 16px 0px rgba(0, 0, 0, 0.30)",elevation4:"0px 0px 8px 0px rgba(0, 0, 0, 0.10), 0px 16px 16px 0px rgba(0, 0, 0, 0.20)"};export var effects={blurM:16};export var fonts={// Типографика
+colorOverlayPrimary:c.overlay_primary,colorOverlaySecondary:{normal:"rgba(0, 0, 0, 0.27)",hover:"rgba(0, 0, 0, 0.31)",active:"rgba(0, 0, 0, 0.35)"},colorAvatarOverlay:c.avatar_overlay_alpha,colorAvatarOverlayInverseAlpha:c.avatar_overlay_inverse_alpha,colorActionSheetText:c.action_sheet_text,colorImagePlaceholder:c.image_placeholder,colorImagePlaceholderAlpha:c.image_placeholder_alpha,colorSkeletonFrom:c.skeleton_from,colorSkeletonTo:c.skeleton_to,colorButtonText:({light:"#2688eb",dark:"#ffffff"})[r],colorButtonIcon:({light:"#2688eb",dark:"#ffffff"})[r],colorButtonStroke:({light:"#2688eb",dark:"#ffffff"})[r],colorWriteBarIcon:c.write_bar_icon,colorWriteBarInputBackground:c.write_bar_input_background,colorWriteBarInputBorder:c.write_bar_input_border,colorWriteBarInputBorderAlpha:({light:"rgba(0, 0, 0, 0.08)",dark:"rgba(255, 255, 255, 0.8)"})[r],colorTrackBackground:c.track_background,colorTrackBuffer:c.track_buffer,colorSearchFieldBackground:c.search_field_background,colorPanelHeaderIcon:c.panel_header_icon,colorSegmentedControl:c.segmented_control,colorTabbarTextInactive:({light:"#99a2ad",dark:"#76787a"})[r],colorTransparent:"transparent"}}};export var lightColors=colorFromFigma("light");export var lightGradient={gradientBlack:a("#000000",.4),gradientWhite:a("#FFFFFF"),gradientTint:a(t.light.background.background_tertiary),gradient:a("#FFFFFF")};export var lightElevation={elevation1:"0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06)",elevation1InvertY:"0px 0px 2px rgba(0, 0, 0, 0.03), 0px -2px 2px rgba(0, 0, 0, 0.06)",elevation2:"0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06)",elevation3:"0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08)",elevation4:"0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16)"};export var darkColors=colorFromFigma("dark");export var darkGradient={gradientBlack:a("#000000",.4),gradientWhite:a("#FFFFFF"),gradientTint:a(t.dark.background.background_tertiary),gradient:a(t.dark.background.background_content)};export var darkElevation={elevation1:"0px 0px 2px 0px rgba(0, 0, 0, 0.10), 0px 2px 2px 0px rgba(0, 0, 0, 0.20)",elevation1InvertY:"0px 0px 2px 0px rgba(0, 0, 0, 0.10), 0px -2px 2px 0px rgba(0, 0, 0, 0.20)",elevation2:"0px 4px 8px 0px rgba(0, 0, 0, 0.15), 0px 0px 4px 0px rgba(0, 0, 0, 0.20)",elevation3:"0px 0px 2px 0px rgba(0, 0, 0, 0.30), 0px 4px 16px 0px rgba(0, 0, 0, 0.30)",elevation4:"0px 0px 8px 0px rgba(0, 0, 0, 0.10), 0px 16px 16px 0px rgba(0, 0, 0, 0.20)"};export var effects={blurS:8,blurM:16,blurL:48,blurXL:96};export var fonts={// Типографика
 fontFamilyFallbacks:i,fontFamilyAccent:i,fontFamilyBase:i,fontWeightAccent1:600,fontWeightAccent2:500,fontWeightAccent3:400,fontWeightBase1:600,fontWeightBase2:500,fontWeightBase3:400,fontDisplayTitle1:{regular:{fontSize:23,lineHeight:28,fontFamily:i,fontWeight:600}},fontDisplayTitle2:{regular:{fontSize:21,lineHeight:26,fontFamily:i,fontWeight:600},compact:{fontSize:22,lineHeight:24,fontFamily:i,fontWeight:600}},fontDisplayTitle3:{regular:{fontSize:19,lineHeight:24,fontFamily:i,fontWeight:600}},fontDisplayTitle4:{regular:{fontSize:17,lineHeight:22,fontFamily:i,fontWeight:600}},fontTitle1:{regular:{fontSize:24,lineHeight:28,fontFamily:i,fontWeight:600}},fontTitle2:{regular:{fontSize:20,lineHeight:24,fontFamily:i,fontWeight:500}},fontTitle3:{regular:{fontSize:17,lineHeight:22,fontFamily:i,fontWeight:600}},fontHeadline1:{regular:{fontSize:16,lineHeight:20,fontFamily:i,fontWeight:500},compact:{fontSize:15,lineHeight:20}},fontHeadline2:{regular:{fontSize:15,lineHeight:20,fontFamily:i,fontWeight:500},compact:{fontSize:14,lineHeight:20}},fontText:{regular:{fontSize:16,lineHeight:20,fontFamily:i,fontWeight:400},compact:{fontSize:15,lineHeight:20}},fontParagraph:{regular:{fontSize:15,lineHeight:20,fontFamily:i,fontWeight:400}},fontSubhead:{regular:{fontSize:14,lineHeight:18,fontFamily:i,fontWeight:400},compact:{fontSize:13,lineHeight:16}},fontFootnote:{regular:{fontSize:13,lineHeight:16,fontFamily:i,fontWeight:400}},fontFootnoteCaps:{regular:{fontSize:13,lineHeight:16,fontFamily:i,fontWeight:600,textTransform:"uppercase"}},fontCaption1:{regular:{fontSize:12,lineHeight:14,fontFamily:i,fontWeight:400}},fontCaption1Caps:{regular:{fontSize:12,lineHeight:14,fontFamily:i,fontWeight:600,textTransform:"uppercase"}},fontCaption2:{regular:{fontSize:11,lineHeight:14,fontFamily:i,fontWeight:400}},fontCaption2Caps:{regular:{fontSize:11,lineHeight:14,fontFamily:i,fontWeight:600,textTransform:"uppercase"}},fontCaption3:{regular:{fontSize:9,lineHeight:12,fontFamily:i,fontWeight:400}},fontCaption3Caps:{regular:{fontSize:9,lineHeight:12,fontFamily:i,fontWeight:600,textTransform:"uppercase"}}};export var sizes={// Размеры
 sizeSelectIconPadding:{regular:6,compact:7},sizePopupBasePadding:{regular:32,compact:20},sizePopupHeaderPadding:{regular:24,compact:16},sizeLabelHorizontalMargin:{regular:16},sizeBorderRadius:{regular:8},sizeBorderRadiusRounded:{regular:48},sizeCheckBorderRadius:{regular:4},sizeBorderRadiusPaper:{regular:12},sizeBorderRadiusPromo:{regular:20},sizeCellHeight:{regular:48,compact:44},sizeFieldHeight:{regular:44,compact:36},sizeSearchHeight:{regular:36,compact:32},sizeButtonExtraSmallHeight:{regular:24,compact:22},sizeButtonSmallHeight:{regular:30,compact:28},sizeButtonMediumHeight:{regular:36,compact:32},sizeButtonLargeHeight:{regular:44,compact:36},sizeCheckbox:{regular:16},sizeArrow:{regular:8},sizeArrowPromo:{regular:40},sizePopupSmall:{regular:430},sizePopupMedium:{regular:680},sizePopupLarge:{regular:880},sizeFieldHorizontalPadding:{regular:12},sizeButtonPaddingHorizontal:{regular:12},sizeArrowPadding:{regular:12},sizeTooltipMargin:{regular:8},sizeIconUI:{regular:16},sizeAvatarXS:{regular:24},sizeAvatarS:{regular:32},sizeAvatarM:{regular:48},sizeAvatarL:{regular:96},sizeAvatarXL:{regular:128},sizeBadgeXS:{regular:12},sizeBadgeS:{regular:16},sizeBadgeM:{regular:24},sizeBadgeL:{regular:44},sizeBadgeXL:{regular:56},// Токены компонента Cardscroll
 sizeCardgridPadding:{regular:8},sizeCardBorderRadius:{regular:8},sizeCardgridPaddingVertical:{regular:8},sizeBasePaddingHorizontal:{regular:16},sizeBasePaddingVertical:{regular:12},// Токены для ButtonGroup

package/themes/calendar/docs.json

@@ -54,6 +54,17 @@
       }
     ]
   },
+  "blurL": {
+    "tags": [
+      "blur"
+    ],
+    "desc": [
+      {
+        "type": "text",
+        "text": "Сильное размытие"
+      }
+    ]
+  },
   "blurM": {
     "tags": [
       "blur"
@@ -65,6 +76,28 @@
       }
     ]
   },
+  "blurS": {
+    "tags": [
+      "blur"
+    ],
+    "desc": [
+      {
+        "type": "text",
+        "text": "Слабое размытие"
+      }
+    ]
+  },
+  "blurXL": {
+    "tags": [
+      "blur"
+    ],
+    "desc": [
+      {
+        "type": "text",
+        "text": "Очень сильное размытие"
+      }
+    ]
+  },
   "breakpoints": {
     "tags": [],
     "desc": []

package/themes/calendarDark/docs.json

@@ -54,6 +54,17 @@
       }
     ]
   },
+  "blurL": {
+    "tags": [
+      "blur"
+    ],
+    "desc": [
+      {
+        "type": "text",
+        "text": "Сильное размытие"
+      }
+    ]
+  },
   "blurM": {
     "tags": [
       "blur"
@@ -65,6 +76,28 @@
       }
     ]
   },
+  "blurS": {
+    "tags": [
+      "blur"
+    ],
+    "desc": [
+      {
+        "type": "text",
+        "text": "Слабое размытие"
+      }
+    ]
+  },
+  "blurXL": {
+    "tags": [
+      "blur"
+    ],
+    "desc": [
+      {
+        "type": "text",
+        "text": "Очень сильное размытие"
+      }
+    ]
+  },
   "breakpoints": {
     "tags": [],
     "desc": []

package/themes/calls/docs.json

@@ -54,6 +54,17 @@
       }
     ]
   },
+  "blurL": {
+    "tags": [
+      "blur"
+    ],
+    "desc": [
+      {
+        "type": "text",
+        "text": "Сильное размытие"
+      }
+    ]
+  },
   "blurM": {
     "tags": [
       "blur"
@@ -65,6 +76,28 @@
       }
     ]
   },
+  "blurS": {
+    "tags": [
+      "blur"
+    ],
+    "desc": [
+      {
+        "type": "text",
+        "text": "Слабое размытие"
+      }
+    ]
+  },
+  "blurXL": {
+    "tags": [
+      "blur"
+    ],
+    "desc": [
+      {
+        "type": "text",
+        "text": "Очень сильное размытие"
+      }
+    ]
+  },
   "breakpoints": {
     "tags": [],
     "desc": []

package/themes/cloud/docs.json

@@ -54,6 +54,17 @@
       }
     ]
   },
+  "blurL": {
+    "tags": [
+      "blur"
+    ],
+    "desc": [
+      {
+        "type": "text",
+        "text": "Сильное размытие"
+      }
+    ]
+  },
   "blurM": {
     "tags": [
       "blur"
@@ -65,6 +76,28 @@
       }
     ]
   },
+  "blurS": {
+    "tags": [
+      "blur"
+    ],
+    "desc": [
+      {
+        "type": "text",
+        "text": "Слабое размытие"
+      }
+    ]
+  },
+  "blurXL": {
+    "tags": [
+      "blur"
+    ],
+    "desc": [
+      {
+        "type": "text",
+        "text": "Очень сильное размытие"
+      }
+    ]
+  },
   "breakpoints": {
     "tags": [],
     "desc": []

package/themes/cloudDark/docs.json

@@ -54,6 +54,17 @@
       }
     ]
   },
+  "blurL": {
+    "tags": [
+      "blur"
+    ],
+    "desc": [
+      {
+        "type": "text",
+        "text": "Сильное размытие"
+      }
+    ]
+  },
   "blurM": {
     "tags": [
       "blur"
@@ -65,6 +76,28 @@
       }
     ]
   },
+  "blurS": {
+    "tags": [
+      "blur"
+    ],
+    "desc": [
+      {
+        "type": "text",
+        "text": "Слабое размытие"
+      }
+    ]
+  },
+  "blurXL": {
+    "tags": [
+      "blur"
+    ],
+    "desc": [
+      {
+        "type": "text",
+        "text": "Очень сильное размытие"
+      }
+    ]
+  },
   "breakpoints": {
     "tags": [],
     "desc": []

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

@@ -10,7 +10,10 @@
 	--vkui--elevation2: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06);
 	--vkui--elevation3: 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08);
 	--vkui--elevation4: 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16);
+	--vkui--blur_s: 8px;
 	--vkui--blur_m: 16px;
+	--vkui--blur_l: 48px;
+	--vkui--blur_x_l: 96px;
 	--vkui--font_family_fallbacks: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	--vkui--font_family_accent: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	--vkui--font_family_base: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;

package/themes/dobro/cssVars/declarations/noColors.css

@@ -10,7 +10,10 @@
 	--vkui--elevation2: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06);
 	--vkui--elevation3: 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08);
 	--vkui--elevation4: 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16);
+	--vkui--blur_s: 8px;
 	--vkui--blur_m: 16px;
+	--vkui--blur_l: 48px;
+	--vkui--blur_x_l: 96px;
 	--vkui--font_family_fallbacks: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	--vkui--font_family_accent: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	--vkui--font_family_base: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;

package/themes/dobro/cssVars/declarations/noSizes.css

@@ -10,7 +10,10 @@
 	--vkui--elevation2: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06);
 	--vkui--elevation3: 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08);
 	--vkui--elevation4: 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16);
+	--vkui--blur_s: 8px;
 	--vkui--blur_m: 16px;
+	--vkui--blur_l: 48px;
+	--vkui--blur_x_l: 96px;
 	--vkui--spacing_size_3xs: 2px;
 	--vkui--spacing_size_2xs: 2px;
 	--vkui--spacing_size_xs: 4px;

package/themes/dobro/cssVars/declarations/onlyVariables.css

@@ -10,7 +10,10 @@
 	--vkui--elevation2: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06);
 	--vkui--elevation3: 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08);
 	--vkui--elevation4: 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16);
+	--vkui--blur_s: 8px;
 	--vkui--blur_m: 16px;
+	--vkui--blur_l: 48px;
+	--vkui--blur_x_l: 96px;
 	--vkui--font_family_fallbacks: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	--vkui--font_family_accent: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	--vkui--font_family_base: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;