@vkontakte/vkui-tokens 4.0.0 → 4.2.0

package/themes/octaviusVK/index.js

@@ -247,6 +247,18 @@ var theme = {
     "sizeBadgeXL": {
         "regular": 56
     },
+    "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)",
@@ -531,19 +543,19 @@ var theme = {
     },
     "colorsScheme": "light",
     "colorBackgroundAccent": {
-        "normal": "#3F8AE0",
-        "hover": "#3C85D9",
-        "active": "#3A80D3"
+        "normal": "#2688EB",
+        "hover": "#2483E4",
+        "active": "#237EDD"
     },
     "colorBackgroundAccentThemed": {
-        "normal": "#3F8AE0",
-        "hover": "#3C85D9",
-        "active": "#3A80D3"
+        "normal": "#2688EB",
+        "hover": "#2483E4",
+        "active": "#237EDD"
     },
     "colorBackgroundAccentAlternative": {
-        "normal": "#3F8AE0",
-        "hover": "#3C85D9",
-        "active": "#3A80D3"
+        "normal": "#2688EB",
+        "hover": "#2483E4",
+        "active": "#237EDD"
     },
     "colorBackgroundContent": {
         "normal": "#ffffff",
@@ -606,14 +618,14 @@ var theme = {
         "active": "#E6D9DD"
     },
     "colorTextAccent": {
-        "normal": "#3F8AE0",
-        "hover": "#3C85D9",
-        "active": "#3A80D3"
+        "normal": "#2688EB",
+        "hover": "#2483E4",
+        "active": "#237EDD"
     },
     "colorTextAccentThemed": {
-        "normal": "#3F8AE0",
-        "hover": "#3C85D9",
-        "active": "#3A80D3"
+        "normal": "#2688EB",
+        "hover": "#2483E4",
+        "active": "#237EDD"
     },
     "colorTextNegative": {
         "normal": "#E64646",
@@ -621,9 +633,9 @@ var theme = {
         "active": "#D44245"
     },
     "colorTextLink": {
-        "normal": "#4986CC",
-        "hover": "#4681C6",
-        "active": "#437DC1"
+        "normal": "#2D81E0",
+        "hover": "#2B7CD9",
+        "active": "#2978D3"
     },
     "colorTextLinkThemed": {
         "normal": "#4986CC",
@@ -686,9 +698,9 @@ var theme = {
         "active": "#45A64A"
     },
     "colorIconAccent": {
-        "normal": "#3F8AE0",
-        "hover": "#3C85D9",
-        "active": "#3A80D3"
+        "normal": "#2688EB",
+        "hover": "#2483E4",
+        "active": "#237EDD"
     },
     "colorIconNegative": {
         "normal": "#E64646",
@@ -751,14 +763,14 @@ var theme = {
         "active": "#45A64A"
     },
     "colorStrokeAccent": {
-        "normal": "#3F8AE0",
-        "hover": "#3C85D9",
-        "active": "#3A80D3"
+        "normal": "#2688EB",
+        "hover": "#2483E4",
+        "active": "#237EDD"
     },
     "colorStrokeAccentThemed": {
-        "normal": "#3F8AE0",
-        "hover": "#3C85D9",
-        "active": "#3A80D3"
+        "normal": "#2688EB",
+        "hover": "#2483E4",
+        "active": "#237EDD"
     },
     "colorStrokeContrast": {
         "normal": "#FFFFFF",
@@ -851,9 +863,9 @@ var theme = {
         "active": "#EBECEF"
     },
     "colorPanelHeaderIcon": {
-        "normal": "#3F8AE0",
-        "hover": "#3C85D9",
-        "active": "#3A80D3"
+        "normal": "#2688EB",
+        "hover": "#2483E4",
+        "active": "#237EDD"
     },
     "colorWriteBarInputBackground": {
         "normal": "#F2F3F5",
@@ -1116,9 +1128,9 @@ var theme = {
         "active": "#DADCE2"
     },
     "octaviusColorBackgroundAccentTonedAlpha": {
-        "normal": "rgba(63, 138, 224, 0.12)",
-        "hover": "rgba(63, 138, 224, 0.16)",
-        "active": "rgba(63, 138, 224, 0.2)"
+        "normal": "rgba(38, 136, 235, 0.12)",
+        "hover": "rgba(38, 136, 235, 0.16)",
+        "active": "rgba(38, 136, 235, 0.2)"
     },
     "octaviusColorOverlayBackground": {
         "normal": "transparent",
@@ -1141,9 +1153,9 @@ var theme = {
         "active": "rgba(0, 16, 61, 0.24)"
     },
     "octaviusColorHeaderIcon": {
-        "normal": "#3F8AE0",
-        "hover": "#3C85D9",
-        "active": "#3A80D3"
+        "normal": "#2688EB",
+        "hover": "#2483E4",
+        "active": "#237EDD"
     },
     "octaviusColorHeaderTextSecondary": {
         "normal": "#818C99",
@@ -1196,9 +1208,9 @@ var theme = {
         "active": "rgba(0, 0, 0, 0.56)"
     },
     "octaviusColorHeaderProgress": {
-        "normal": "#3F8AE0",
-        "hover": "#3C85D9",
-        "active": "#3A80D3"
+        "normal": "#2688EB",
+        "hover": "#2483E4",
+        "active": "#237EDD"
     },
     "octaviusColorPortalMenuBackground": {
         "normal": "#FFFFFF",
@@ -1211,9 +1223,9 @@ var theme = {
         "active": "#282B2F"
     },
     "octaviusColorSidebarItemIconPrimary": {
-        "normal": "#3F8AE0",
-        "hover": "#3C85D9",
-        "active": "#3A80D3"
+        "normal": "#2688EB",
+        "hover": "#2483E4",
+        "active": "#237EDD"
     },
     "octaviusColorSidebarItemTextActive": {
         "normal": "#000000",
@@ -1276,9 +1288,9 @@ var theme = {
         "active": "rgba(0, 16, 61, 0.16)"
     },
     "octaviusColorSidebarItemIconSecondary": {
-        "normal": "#3F8AE0",
-        "hover": "#3C85D9",
-        "active": "#3A80D3"
+        "normal": "#2688EB",
+        "hover": "#2483E4",
+        "active": "#237EDD"
     },
     "octaviusColorSidebarItemTextSecondary": {
         "normal": "#818C99",
@@ -1336,9 +1348,9 @@ var theme = {
         "active": "rgba(0, 0, 0, 0.32)"
     },
     "octaviusColorIconUnread": {
-        "normal": "#3F8AE0",
-        "hover": "#3C85D9",
-        "active": "#3A80D3"
+        "normal": "#2688EB",
+        "hover": "#2483E4",
+        "active": "#237EDD"
     },
     "octaviusColorIconFavorite": {
         "normal": "#FF3347",
@@ -1376,9 +1388,9 @@ var theme = {
         "active": "#D50206"
     },
     "octaviusColorSidebarIconUnread": {
-        "normal": "#3F8AE0",
-        "hover": "#3C85D9",
-        "active": "#3A80D3"
+        "normal": "#2688EB",
+        "hover": "#2483E4",
+        "active": "#237EDD"
     },
     "octaviusColorSidebarIconFavorite": {
         "normal": "#FF3347",

package/themes/octaviusVK/index.json

@@ -245,6 +245,18 @@
 	"sizeBadgeXL": {
 		"regular": 56
 	},
+	"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)",
@@ -529,19 +541,19 @@
 	},
 	"colorsScheme": "light",
 	"colorBackgroundAccent": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
 	},
 	"colorBackgroundAccentThemed": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
 	},
 	"colorBackgroundAccentAlternative": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
 	},
 	"colorBackgroundContent": {
 		"normal": "#ffffff",
@@ -604,14 +616,14 @@
 		"active": "#E6D9DD"
 	},
 	"colorTextAccent": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
 	},
 	"colorTextAccentThemed": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
 	},
 	"colorTextNegative": {
 		"normal": "#E64646",
@@ -619,9 +631,9 @@
 		"active": "#D44245"
 	},
 	"colorTextLink": {
-		"normal": "#4986CC",
-		"hover": "#4681C6",
-		"active": "#437DC1"
+		"normal": "#2D81E0",
+		"hover": "#2B7CD9",
+		"active": "#2978D3"
 	},
 	"colorTextLinkThemed": {
 		"normal": "#4986CC",
@@ -684,9 +696,9 @@
 		"active": "#45A64A"
 	},
 	"colorIconAccent": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
 	},
 	"colorIconNegative": {
 		"normal": "#E64646",
@@ -749,14 +761,14 @@
 		"active": "#45A64A"
 	},
 	"colorStrokeAccent": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
 	},
 	"colorStrokeAccentThemed": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
 	},
 	"colorStrokeContrast": {
 		"normal": "#FFFFFF",
@@ -849,9 +861,9 @@
 		"active": "#EBECEF"
 	},
 	"colorPanelHeaderIcon": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
 	},
 	"colorWriteBarInputBackground": {
 		"normal": "#F2F3F5",
@@ -1114,9 +1126,9 @@
 		"active": "#DADCE2"
 	},
 	"octaviusColorBackgroundAccentTonedAlpha": {
-		"normal": "rgba(63, 138, 224, 0.12)",
-		"hover": "rgba(63, 138, 224, 0.16)",
-		"active": "rgba(63, 138, 224, 0.2)"
+		"normal": "rgba(38, 136, 235, 0.12)",
+		"hover": "rgba(38, 136, 235, 0.16)",
+		"active": "rgba(38, 136, 235, 0.2)"
 	},
 	"octaviusColorOverlayBackground": {
 		"normal": "transparent",
@@ -1139,9 +1151,9 @@
 		"active": "rgba(0, 16, 61, 0.24)"
 	},
 	"octaviusColorHeaderIcon": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
 	},
 	"octaviusColorHeaderTextSecondary": {
 		"normal": "#818C99",
@@ -1194,9 +1206,9 @@
 		"active": "rgba(0, 0, 0, 0.56)"
 	},
 	"octaviusColorHeaderProgress": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
 	},
 	"octaviusColorPortalMenuBackground": {
 		"normal": "#FFFFFF",
@@ -1209,9 +1221,9 @@
 		"active": "#282B2F"
 	},
 	"octaviusColorSidebarItemIconPrimary": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
 	},
 	"octaviusColorSidebarItemTextActive": {
 		"normal": "#000000",
@@ -1274,9 +1286,9 @@
 		"active": "rgba(0, 16, 61, 0.16)"
 	},
 	"octaviusColorSidebarItemIconSecondary": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
 	},
 	"octaviusColorSidebarItemTextSecondary": {
 		"normal": "#818C99",
@@ -1334,9 +1346,9 @@
 		"active": "rgba(0, 0, 0, 0.32)"
 	},
 	"octaviusColorIconUnread": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
 	},
 	"octaviusColorIconFavorite": {
 		"normal": "#FF3347",
@@ -1374,9 +1386,9 @@
 		"active": "#D50206"
 	},
 	"octaviusColorSidebarIconUnread": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
 	},
 	"octaviusColorSidebarIconFavorite": {
 		"normal": "#FF3347",

package/themes/octaviusVK/index.less

@@ -48,6 +48,10 @@
 @size-badge-m--regular: 24px;
 @size-badge-l--regular: 44px;
 @size-badge-x-l--regular: 56px;
+@size-cardgrid-padding--regular: 12px;
+@size-card-border-radius--regular: 16px;
+@size-cardgrid-padding-vertical--regular: 8px;
+@size-base-padding-horizontal--regular: 16px;
 @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);
@@ -166,15 +170,15 @@
 @octavius-size-sidebar-widgets-height-min--regular: 64px;
 @octavius-size-sidebar-widgets-height-compact-min--regular: 104px;
 @colors-scheme: light;
-@color-background-accent: #3F8AE0;
-@color-background-accent--hover: #3C85D9;
-@color-background-accent--active: #3A80D3;
-@color-background-accent-themed: #3F8AE0;
-@color-background-accent-themed--hover: #3C85D9;
-@color-background-accent-themed--active: #3A80D3;
-@color-background-accent-alternative: #3F8AE0;
-@color-background-accent-alternative--hover: #3C85D9;
-@color-background-accent-alternative--active: #3A80D3;
+@color-background-accent: #2688EB;
+@color-background-accent--hover: #2483E4;
+@color-background-accent--active: #237EDD;
+@color-background-accent-themed: #2688EB;
+@color-background-accent-themed--hover: #2483E4;
+@color-background-accent-themed--active: #237EDD;
+@color-background-accent-alternative: #2688EB;
+@color-background-accent-alternative--hover: #2483E4;
+@color-background-accent-alternative--active: #237EDD;
 @color-background-content: #ffffff;
 @color-background-content--hover: #E4E5E9;
 @color-background-content--active: #DADCE2;
@@ -211,18 +215,18 @@
 @color-background-negative-tint: #FAEBEB;
 @color-background-negative-tint--hover: #F0E2E4;
 @color-background-negative-tint--active: #E6D9DD;
-@color-text-accent: #3F8AE0;
-@color-text-accent--hover: #3C85D9;
-@color-text-accent--active: #3A80D3;
-@color-text-accent-themed: #3F8AE0;
-@color-text-accent-themed--hover: #3C85D9;
-@color-text-accent-themed--active: #3A80D3;
+@color-text-accent: #2688EB;
+@color-text-accent--hover: #2483E4;
+@color-text-accent--active: #237EDD;
+@color-text-accent-themed: #2688EB;
+@color-text-accent-themed--hover: #2483E4;
+@color-text-accent-themed--active: #237EDD;
 @color-text-negative: #E64646;
 @color-text-negative--hover: #DD4446;
 @color-text-negative--active: #D44245;
-@color-text-link: #4986CC;
-@color-text-link--hover: #4681C6;
-@color-text-link--active: #437DC1;
+@color-text-link: #2D81E0;
+@color-text-link--hover: #2B7CD9;
+@color-text-link--active: #2978D3;
 @color-text-link-themed: #4986CC;
 @color-text-link-themed--hover: #4681C6;
 @color-text-link-themed--active: #437DC1;
@@ -259,9 +263,9 @@
 @color-text-positive: #4BB34B;
 @color-text-positive--hover: #48AC4A;
 @color-text-positive--active: #45A64A;
-@color-icon-accent: #3F8AE0;
-@color-icon-accent--hover: #3C85D9;
-@color-icon-accent--active: #3A80D3;
+@color-icon-accent: #2688EB;
+@color-icon-accent--hover: #2483E4;
+@color-icon-accent--active: #237EDD;
 @color-icon-negative: #E64646;
 @color-icon-negative--hover: #DD4446;
 @color-icon-negative--active: #D44245;
@@ -298,12 +302,12 @@
 @color-icon-positive: #4BB34B;
 @color-icon-positive--hover: #48AC4A;
 @color-icon-positive--active: #45A64A;
-@color-stroke-accent: #3F8AE0;
-@color-stroke-accent--hover: #3C85D9;
-@color-stroke-accent--active: #3A80D3;
-@color-stroke-accent-themed: #3F8AE0;
-@color-stroke-accent-themed--hover: #3C85D9;
-@color-stroke-accent-themed--active: #3A80D3;
+@color-stroke-accent: #2688EB;
+@color-stroke-accent--hover: #2483E4;
+@color-stroke-accent--active: #237EDD;
+@color-stroke-accent-themed: #2688EB;
+@color-stroke-accent-themed--hover: #2483E4;
+@color-stroke-accent-themed--active: #237EDD;
 @color-stroke-contrast: #FFFFFF;
 @color-stroke-contrast--hover: #F5F5F7;
 @color-stroke-contrast--active: #EBECEF;
@@ -358,9 +362,9 @@
 @color-header-background: #FFFFFF;
 @color-header-background--hover: #F5F5F7;
 @color-header-background--active: #EBECEF;
-@color-panel-header-icon: #3F8AE0;
-@color-panel-header-icon--hover: #3C85D9;
-@color-panel-header-icon--active: #3A80D3;
+@color-panel-header-icon: #2688EB;
+@color-panel-header-icon--hover: #2483E4;
+@color-panel-header-icon--active: #237EDD;
 @color-write-bar-input-background: #F2F3F5;
 @color-write-bar-input-background--hover: #E8EAEE;
 @color-write-bar-input-background--active: #DFE1E6;
@@ -517,9 +521,9 @@
 @octavius-color-background: #EDEEF0;
 @octavius-color-background--hover: #E4E5E9;
 @octavius-color-background--active: #DADCE2;
-@octavius-color-background-accent-toned-alpha: rgba(63, 138, 224, 0.12);
-@octavius-color-background-accent-toned-alpha--hover: rgba(63, 138, 224, 0.16);
-@octavius-color-background-accent-toned-alpha--active: rgba(63, 138, 224, 0.2);
+@octavius-color-background-accent-toned-alpha: rgba(38, 136, 235, 0.12);
+@octavius-color-background-accent-toned-alpha--hover: rgba(38, 136, 235, 0.16);
+@octavius-color-background-accent-toned-alpha--active: rgba(38, 136, 235, 0.2);
 @octavius-color-overlay-background: transparent;
 @octavius-color-overlay-background--hover: rgba(0, 16, 61, 0.04);
 @octavius-color-overlay-background--active: rgba(0, 16, 61, 0.08);
@@ -532,9 +536,9 @@
 @octavius-color-header-button-background-alpha: transparent;
 @octavius-color-header-button-background-alpha--hover: rgba(0, 16, 61, 0.12);
 @octavius-color-header-button-background-alpha--active: rgba(0, 16, 61, 0.24);
-@octavius-color-header-icon: #3F8AE0;
-@octavius-color-header-icon--hover: #3C85D9;
-@octavius-color-header-icon--active: #3A80D3;
+@octavius-color-header-icon: #2688EB;
+@octavius-color-header-icon--hover: #2483E4;
+@octavius-color-header-icon--active: #237EDD;
 @octavius-color-header-text-secondary: #818C99;
 @octavius-color-header-text-secondary--hover: #7C8795;
 @octavius-color-header-text-secondary--active: #778292;
@@ -565,18 +569,18 @@
 @octavius-color-header-filter-text-alpha: rgba(0, 0, 0, 0.48);
 @octavius-color-header-filter-text-alpha--hover: rgba(0, 0, 0, 0.52);
 @octavius-color-header-filter-text-alpha--active: rgba(0, 0, 0, 0.56);
-@octavius-color-header-progress: #3F8AE0;
-@octavius-color-header-progress--hover: #3C85D9;
-@octavius-color-header-progress--active: #3A80D3;
+@octavius-color-header-progress: #2688EB;
+@octavius-color-header-progress--hover: #2483E4;
+@octavius-color-header-progress--active: #237EDD;
 @octavius-color-portal-menu-background: #FFFFFF;
 @octavius-color-portal-menu-background--hover: #F5F5F7;
 @octavius-color-portal-menu-background--active: #EBECEF;
 @octavius-color-sidebar-item-icon-active: #2C2D2E;
 @octavius-color-sidebar-item-icon-active--hover: #2A2C2F;
 @octavius-color-sidebar-item-icon-active--active: #282B2F;
-@octavius-color-sidebar-item-icon-primary: #3F8AE0;
-@octavius-color-sidebar-item-icon-primary--hover: #3C85D9;
-@octavius-color-sidebar-item-icon-primary--active: #3A80D3;
+@octavius-color-sidebar-item-icon-primary: #2688EB;
+@octavius-color-sidebar-item-icon-primary--hover: #2483E4;
+@octavius-color-sidebar-item-icon-primary--active: #237EDD;
 @octavius-color-sidebar-item-text-active: #000000;
 @octavius-color-sidebar-item-text-active--hover: #000102;
 @octavius-color-sidebar-item-text-active--active: #000105;
@@ -613,9 +617,9 @@
 @octavius-color-sidebar-item-button-background-alpha: rgba(0, 16, 61, 0.08);
 @octavius-color-sidebar-item-button-background-alpha--hover: rgba(0, 16, 61, 0.12);
 @octavius-color-sidebar-item-button-background-alpha--active: rgba(0, 16, 61, 0.16);
-@octavius-color-sidebar-item-icon-secondary: #3F8AE0;
-@octavius-color-sidebar-item-icon-secondary--hover: #3C85D9;
-@octavius-color-sidebar-item-icon-secondary--active: #3A80D3;
+@octavius-color-sidebar-item-icon-secondary: #2688EB;
+@octavius-color-sidebar-item-icon-secondary--hover: #2483E4;
+@octavius-color-sidebar-item-icon-secondary--active: #237EDD;
 @octavius-color-sidebar-item-text-secondary: #818C99;
 @octavius-color-sidebar-item-text-secondary--hover: #7C8795;
 @octavius-color-sidebar-item-text-secondary--active: #778292;
@@ -649,9 +653,9 @@
 @octavius-color-content-scrollbar-alpha: rgba(0, 0, 0, 0.24);
 @octavius-color-content-scrollbar-alpha--hover: rgba(0, 0, 0, 0.28);
 @octavius-color-content-scrollbar-alpha--active: rgba(0, 0, 0, 0.32);
-@octavius-color-icon-unread: #3F8AE0;
-@octavius-color-icon-unread--hover: #3C85D9;
-@octavius-color-icon-unread--active: #3A80D3;
+@octavius-color-icon-unread: #2688EB;
+@octavius-color-icon-unread--hover: #2483E4;
+@octavius-color-icon-unread--active: #237EDD;
 @octavius-color-icon-favorite: #FF3347;
 @octavius-color-icon-favorite--hover: #F53247;
 @octavius-color-icon-favorite--active: #EB3046;
@@ -673,9 +677,9 @@
 @octavius-color-icon-fees: #e70101;
 @octavius-color-icon-fees--hover: #DE0203;
 @octavius-color-icon-fees--active: #D50206;
-@octavius-color-sidebar-icon-unread: #3F8AE0;
-@octavius-color-sidebar-icon-unread--hover: #3C85D9;
-@octavius-color-sidebar-icon-unread--active: #3A80D3;
+@octavius-color-sidebar-icon-unread: #2688EB;
+@octavius-color-sidebar-icon-unread--hover: #2483E4;
+@octavius-color-sidebar-icon-unread--active: #237EDD;
 @octavius-color-sidebar-icon-favorite: #FF3347;
 @octavius-color-sidebar-icon-favorite--hover: #F53247;
 @octavius-color-sidebar-icon-favorite--active: #EB3046;