@vkontakte/vkui-tokens 4.35.2-dev-cfbf64.0 → 4.37.0

package/themes/vkontakteComDark/index.scss

@@ -25,6 +25,7 @@ $size-popup-header-padding--regular: 24px;
 $size-popup-header-padding--compact: 16px;
 $size-label-horizontal-margin--regular: 16px;
 $size-border-radius--regular: 8px;
+$size-border-radius-rounded--regular: 48px;
 $size-check-border-radius--regular: 4px;
 $size-border-radius-paper--regular: 12px;
 $size-border-radius-promo--regular: 20px;
@@ -196,12 +197,12 @@ $color-background-positive--active: #59B959;
 $color-background-negative: #FF5C5C;
 $color-background-negative--hover: #FF6363;
 $color-background-negative--active: #FF6969;
-$color-background-negative-tint: #522E2E;
+$color-background-negative-tint: #522e2e;
 $color-background-negative-tint--hover: #593636;
 $color-background-negative-tint--active: #603F3F;
-$color-background-positive-tint: #E8f9e8;
-$color-background-positive-tint--hover: #E9F9E9;
-$color-background-positive-tint--active: #EAF9EA;
+$color-background-positive-tint: #b1d6b1;
+$color-background-positive-tint--hover: #B4D8B4;
+$color-background-positive-tint--active: #B7D9B7;
 $color-field-background: #292929;
 $color-field-background--hover: #323232;
 $color-field-background--active: #3A3A3A;
@@ -247,10 +248,10 @@ $color-text-link--active: #7CB1ED;
 $color-text-link-themed: #939393;
 $color-text-link-themed--hover: #979797;
 $color-text-link-themed--active: #9C9C9C;
-$color-text-link-tint: #71AAEB;
+$color-text-link-tint: #71aaeb;
 $color-text-link-tint--hover: #77ADEC;
 $color-text-link-tint--active: #7CB1ED;
-$color-text-link-visited: #4986CC;
+$color-text-link-visited: #4986cc;
 $color-text-link-visited--hover: #508BCE;
 $color-text-link-visited--active: #5890D0;
 $color-text-muted: #CCCCCC;
@@ -268,7 +269,7 @@ $color-icon-accent--active: #7CB1ED;
 $color-icon-accent-themed: #E1E3E6;
 $color-icon-accent-themed--hover: #E2E4E7;
 $color-icon-accent-themed--active: #E3E5E8;
-$color-icon-primary: #E1E3E6;
+$color-icon-primary: #e1e3e6;
 $color-icon-primary--hover: #E2E4E7;
 $color-icon-primary--active: #E3E5E8;
 $color-icon-primary-invariably: #333333;
@@ -298,7 +299,7 @@ $color-icon-contrast--active: #E3E5E8;
 $color-icon-contrast-themed: #222222;
 $color-icon-contrast-themed--hover: #2B2B2B;
 $color-icon-contrast-themed--active: #343434;
-$color-icon-contrast-secondary: #F2F3F5;
+$color-icon-contrast-secondary: #f2f3f5;
 $color-icon-contrast-secondary--hover: #F3F3F5;
 $color-icon-contrast-secondary--active: #F3F4F6;
 $color-icon-positive: #4BB34B;
@@ -364,7 +365,7 @@ $color-accent-green--active: #59B959;
 $color-accent-orange: #FFA000;
 $color-accent-orange--hover: #FFA40A;
 $color-accent-orange--active: #FFA814;
-$color-accent-orange-fire: #F05C44;
+$color-accent-orange-fire: #f05c44;
 $color-accent-orange-fire--hover: #F1634B;
 $color-accent-orange-fire--active: #F16953;
 $color-accent-purple: #937FF5;
@@ -373,22 +374,28 @@ $color-accent-purple--active: #9C89F6;
 $color-accent-violet: #A393F5;
 $color-accent-violet--hover: #A797F5;
 $color-accent-violet--active: #AA9CF6;
-$color-accent-raspberry-pink: #F060C0;
+$color-accent-raspberry-pink: #f060c0;
 $color-accent-raspberry-pink--hover: #F166C3;
 $color-accent-raspberry-pink--active: #F16DC5;
-$color-accent-secondary: #3F8AE0;
+$color-accent-secondary: #3f8ae0;
 $color-accent-secondary--hover: #478FE1;
 $color-accent-secondary--active: #4E93E2;
-$color-overlay-primary: rgba(0, 0, 0, 0.4);
+$color-overlay-primary: rgba(0, 0, 0, 0.40);
 $color-overlay-primary--hover: rgba(0, 0, 0, 0.44);
 $color-overlay-primary--active: rgba(0, 0, 0, 0.48);
-$color-avatar-overlay: rgba(0, 0, 0, 0.6);
+$color-overlay-secondary: rgb(55, 56, 57, 0.5);
+$color-overlay-secondary--hover: rgba(55, 56, 57, 0.54);
+$color-overlay-secondary--active: rgba(55, 56, 57, 0.58);
+$color-avatar-overlay: rgba(0, 0, 0, 0.60);
 $color-avatar-overlay--hover: rgba(0, 0, 0, 0.64);
 $color-avatar-overlay--active: rgba(0, 0, 0, 0.68);
 $color-avatar-overlay-inverse-alpha: rgba(255, 255, 255, 0.85);
 $color-avatar-overlay-inverse-alpha--hover: rgba(255, 255, 255, 0.89);
 $color-avatar-overlay-inverse-alpha--active: rgba(255, 255, 255, 0.93);
-$color-image-placeholder: #2A2B2C;
+$color-action-sheet-text: #71aaeb;
+$color-action-sheet-text--hover: #77ADEC;
+$color-action-sheet-text--active: #7CB1ED;
+$color-image-placeholder: #2a2b2c;
 $color-image-placeholder--hover: #333334;
 $color-image-placeholder--active: #3B3C3D;
 $color-image-placeholder-alpha: rgba(241, 247, 255, 0.08);
@@ -412,9 +419,6 @@ $color-write-bar-input-border--active: #636363;
 $color-write-bar-input-border-alpha: rgba(255, 255, 255, 0.8);
 $color-write-bar-input-border-alpha--hover: rgba(255, 255, 255, 0.84);
 $color-write-bar-input-border-alpha--active: rgba(255, 255, 255, 0.88);
-$color-action-sheet-text: #529EF4;
-$color-action-sheet-text--hover: #59A2F4;
-$color-action-sheet-text--active: #60A6F5;
 $color-track-background: #828282;
 $color-track-background--hover: #878787;
 $color-track-background--active: #8C8C8C;
@@ -430,6 +434,9 @@ $color-panel-header-icon--active: #7CB1ED;
 $color-segmented-control: #626364;
 $color-segmented-control--hover: #68696A;
 $color-segmented-control--active: #6F6F70;
+$color-tabbar-text-inactive: #76787a;
+$color-tabbar-text-inactive--hover: #7B7D7F;
+$color-tabbar-text-inactive--active: #818385;
 $color-transparent: transparent;
 $color-transparent--hover: rgba(255, 255, 255, 0.04);
 $color-transparent--active: rgba(255, 255, 255, 0.08);

package/themes/vkontakteComDark/index.styl

@@ -25,6 +25,7 @@ $size-popup-header-padding--regular = 24px;
 $size-popup-header-padding--compact = 16px;
 $size-label-horizontal-margin--regular = 16px;
 $size-border-radius--regular = 8px;
+$size-border-radius-rounded--regular = 48px;
 $size-check-border-radius--regular = 4px;
 $size-border-radius-paper--regular = 12px;
 $size-border-radius-promo--regular = 20px;
@@ -196,12 +197,12 @@ $color-background-positive--active = #59B959;
 $color-background-negative = #FF5C5C;
 $color-background-negative--hover = #FF6363;
 $color-background-negative--active = #FF6969;
-$color-background-negative-tint = #522E2E;
+$color-background-negative-tint = #522e2e;
 $color-background-negative-tint--hover = #593636;
 $color-background-negative-tint--active = #603F3F;
-$color-background-positive-tint = #E8f9e8;
-$color-background-positive-tint--hover = #E9F9E9;
-$color-background-positive-tint--active = #EAF9EA;
+$color-background-positive-tint = #b1d6b1;
+$color-background-positive-tint--hover = #B4D8B4;
+$color-background-positive-tint--active = #B7D9B7;
 $color-field-background = #292929;
 $color-field-background--hover = #323232;
 $color-field-background--active = #3A3A3A;
@@ -247,10 +248,10 @@ $color-text-link--active = #7CB1ED;
 $color-text-link-themed = #939393;
 $color-text-link-themed--hover = #979797;
 $color-text-link-themed--active = #9C9C9C;
-$color-text-link-tint = #71AAEB;
+$color-text-link-tint = #71aaeb;
 $color-text-link-tint--hover = #77ADEC;
 $color-text-link-tint--active = #7CB1ED;
-$color-text-link-visited = #4986CC;
+$color-text-link-visited = #4986cc;
 $color-text-link-visited--hover = #508BCE;
 $color-text-link-visited--active = #5890D0;
 $color-text-muted = #CCCCCC;
@@ -268,7 +269,7 @@ $color-icon-accent--active = #7CB1ED;
 $color-icon-accent-themed = #E1E3E6;
 $color-icon-accent-themed--hover = #E2E4E7;
 $color-icon-accent-themed--active = #E3E5E8;
-$color-icon-primary = #E1E3E6;
+$color-icon-primary = #e1e3e6;
 $color-icon-primary--hover = #E2E4E7;
 $color-icon-primary--active = #E3E5E8;
 $color-icon-primary-invariably = #333333;
@@ -298,7 +299,7 @@ $color-icon-contrast--active = #E3E5E8;
 $color-icon-contrast-themed = #222222;
 $color-icon-contrast-themed--hover = #2B2B2B;
 $color-icon-contrast-themed--active = #343434;
-$color-icon-contrast-secondary = #F2F3F5;
+$color-icon-contrast-secondary = #f2f3f5;
 $color-icon-contrast-secondary--hover = #F3F3F5;
 $color-icon-contrast-secondary--active = #F3F4F6;
 $color-icon-positive = #4BB34B;
@@ -364,7 +365,7 @@ $color-accent-green--active = #59B959;
 $color-accent-orange = #FFA000;
 $color-accent-orange--hover = #FFA40A;
 $color-accent-orange--active = #FFA814;
-$color-accent-orange-fire = #F05C44;
+$color-accent-orange-fire = #f05c44;
 $color-accent-orange-fire--hover = #F1634B;
 $color-accent-orange-fire--active = #F16953;
 $color-accent-purple = #937FF5;
@@ -373,22 +374,28 @@ $color-accent-purple--active = #9C89F6;
 $color-accent-violet = #A393F5;
 $color-accent-violet--hover = #A797F5;
 $color-accent-violet--active = #AA9CF6;
-$color-accent-raspberry-pink = #F060C0;
+$color-accent-raspberry-pink = #f060c0;
 $color-accent-raspberry-pink--hover = #F166C3;
 $color-accent-raspberry-pink--active = #F16DC5;
-$color-accent-secondary = #3F8AE0;
+$color-accent-secondary = #3f8ae0;
 $color-accent-secondary--hover = #478FE1;
 $color-accent-secondary--active = #4E93E2;
-$color-overlay-primary = rgba(0, 0, 0, 0.4);
+$color-overlay-primary = rgba(0, 0, 0, 0.40);
 $color-overlay-primary--hover = rgba(0, 0, 0, 0.44);
 $color-overlay-primary--active = rgba(0, 0, 0, 0.48);
-$color-avatar-overlay = rgba(0, 0, 0, 0.6);
+$color-overlay-secondary = rgb(55, 56, 57, 0.5);
+$color-overlay-secondary--hover = rgba(55, 56, 57, 0.54);
+$color-overlay-secondary--active = rgba(55, 56, 57, 0.58);
+$color-avatar-overlay = rgba(0, 0, 0, 0.60);
 $color-avatar-overlay--hover = rgba(0, 0, 0, 0.64);
 $color-avatar-overlay--active = rgba(0, 0, 0, 0.68);
 $color-avatar-overlay-inverse-alpha = rgba(255, 255, 255, 0.85);
 $color-avatar-overlay-inverse-alpha--hover = rgba(255, 255, 255, 0.89);
 $color-avatar-overlay-inverse-alpha--active = rgba(255, 255, 255, 0.93);
-$color-image-placeholder = #2A2B2C;
+$color-action-sheet-text = #71aaeb;
+$color-action-sheet-text--hover = #77ADEC;
+$color-action-sheet-text--active = #7CB1ED;
+$color-image-placeholder = #2a2b2c;
 $color-image-placeholder--hover = #333334;
 $color-image-placeholder--active = #3B3C3D;
 $color-image-placeholder-alpha = rgba(241, 247, 255, 0.08);
@@ -412,9 +419,6 @@ $color-write-bar-input-border--active = #636363;
 $color-write-bar-input-border-alpha = rgba(255, 255, 255, 0.8);
 $color-write-bar-input-border-alpha--hover = rgba(255, 255, 255, 0.84);
 $color-write-bar-input-border-alpha--active = rgba(255, 255, 255, 0.88);
-$color-action-sheet-text = #529EF4;
-$color-action-sheet-text--hover = #59A2F4;
-$color-action-sheet-text--active = #60A6F5;
 $color-track-background = #828282;
 $color-track-background--hover = #878787;
 $color-track-background--active = #8C8C8C;
@@ -430,6 +434,9 @@ $color-panel-header-icon--active = #7CB1ED;
 $color-segmented-control = #626364;
 $color-segmented-control--hover = #68696A;
 $color-segmented-control--active = #6F6F70;
+$color-tabbar-text-inactive = #76787a;
+$color-tabbar-text-inactive--hover = #7B7D7F;
+$color-tabbar-text-inactive--active = #818385;
 $color-transparent = transparent;
 $color-transparent--hover = rgba(255, 255, 255, 0.04);
 $color-transparent--active = rgba(255, 255, 255, 0.08);

package/themes/vkontakteComDark/struct.json

@@ -211,6 +211,9 @@
 		"sizeBorderRadius": {
 			"regular": 8
 		},
+		"sizeBorderRadiusRounded": {
+			"regular": 48
+		},
 		"sizeCheckBorderRadius": {
 			"regular": 4
 		},
@@ -858,14 +861,14 @@
 			"active": "#FF6969"
 		},
 		"colorBackgroundNegativeTint": {
-			"normal": "#522E2E",
+			"normal": "#522e2e",
 			"hover": "#593636",
 			"active": "#603F3F"
 		},
 		"colorBackgroundPositiveTint": {
-			"normal": "#E8f9e8",
-			"hover": "#E9F9E9",
-			"active": "#EAF9EA"
+			"normal": "#b1d6b1",
+			"hover": "#B4D8B4",
+			"active": "#B7D9B7"
 		},
 		"colorFieldBackground": {
 			"normal": "#292929",
@@ -943,12 +946,12 @@
 			"active": "#9C9C9C"
 		},
 		"colorTextLinkTint": {
-			"normal": "#71AAEB",
+			"normal": "#71aaeb",
 			"hover": "#77ADEC",
 			"active": "#7CB1ED"
 		},
 		"colorTextLinkVisited": {
-			"normal": "#4986CC",
+			"normal": "#4986cc",
 			"hover": "#508BCE",
 			"active": "#5890D0"
 		},
@@ -978,7 +981,7 @@
 			"active": "#E3E5E8"
 		},
 		"colorIconPrimary": {
-			"normal": "#E1E3E6",
+			"normal": "#e1e3e6",
 			"hover": "#E2E4E7",
 			"active": "#E3E5E8"
 		},
@@ -1028,7 +1031,7 @@
 			"active": "#343434"
 		},
 		"colorIconContrastSecondary": {
-			"normal": "#F2F3F5",
+			"normal": "#f2f3f5",
 			"hover": "#F3F3F5",
 			"active": "#F3F4F6"
 		},
@@ -1138,7 +1141,7 @@
 			"active": "#FFA814"
 		},
 		"colorAccentOrangeFire": {
-			"normal": "#F05C44",
+			"normal": "#f05c44",
 			"hover": "#F1634B",
 			"active": "#F16953"
 		},
@@ -1153,22 +1156,27 @@
 			"active": "#AA9CF6"
 		},
 		"colorAccentRaspberryPink": {
-			"normal": "#F060C0",
+			"normal": "#f060c0",
 			"hover": "#F166C3",
 			"active": "#F16DC5"
 		},
 		"colorAccentSecondary": {
-			"normal": "#3F8AE0",
+			"normal": "#3f8ae0",
 			"hover": "#478FE1",
 			"active": "#4E93E2"
 		},
 		"colorOverlayPrimary": {
-			"normal": "rgba(0, 0, 0, 0.4)",
+			"normal": "rgba(0, 0, 0, 0.40)",
 			"hover": "rgba(0, 0, 0, 0.44)",
 			"active": "rgba(0, 0, 0, 0.48)"
 		},
+		"colorOverlaySecondary": {
+			"normal": "rgb(55, 56, 57, 0.5)",
+			"hover": "rgba(55, 56, 57, 0.54)",
+			"active": "rgba(55, 56, 57, 0.58)"
+		},
 		"colorAvatarOverlay": {
-			"normal": "rgba(0, 0, 0, 0.6)",
+			"normal": "rgba(0, 0, 0, 0.60)",
 			"hover": "rgba(0, 0, 0, 0.64)",
 			"active": "rgba(0, 0, 0, 0.68)"
 		},
@@ -1177,8 +1185,13 @@
 			"hover": "rgba(255, 255, 255, 0.89)",
 			"active": "rgba(255, 255, 255, 0.93)"
 		},
+		"colorActionSheetText": {
+			"normal": "#71aaeb",
+			"hover": "#77ADEC",
+			"active": "#7CB1ED"
+		},
 		"colorImagePlaceholder": {
-			"normal": "#2A2B2C",
+			"normal": "#2a2b2c",
 			"hover": "#333334",
 			"active": "#3B3C3D"
 		},
@@ -1217,11 +1230,6 @@
 			"hover": "rgba(255, 255, 255, 0.84)",
 			"active": "rgba(255, 255, 255, 0.88)"
 		},
-		"colorActionSheetText": {
-			"normal": "#529EF4",
-			"hover": "#59A2F4",
-			"active": "#60A6F5"
-		},
 		"colorTrackBackground": {
 			"normal": "#828282",
 			"hover": "#878787",
@@ -1247,6 +1255,11 @@
 			"hover": "#68696A",
 			"active": "#6F6F70"
 		},
+		"colorTabbarTextInactive": {
+			"normal": "#76787a",
+			"hover": "#7B7D7F",
+			"active": "#818385"
+		},
 		"colorTransparent": {
 			"normal": "transparent",
 			"hover": "rgba(255, 255, 255, 0.04)",