@vkontakte/vkui-tokens 4.0.0 → 4.2.0

package/themes/vkBaseDark/index.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var theme = {
     "themeName": "vkBaseDark",
+    "themeNameBase": "vkBase",
     "fontFamilyAccent": "\"TT Commons\", -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif",
     "fontFamilyBase": "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif",
     "fontWeightAccent1": 400,
@@ -31,7 +32,7 @@ var theme = {
     "fontTitle3": {
         "regular": {
             "fontSize": 17,
-            "lineHeight": 24,
+            "lineHeight": 22,
             "letterSpacing": "-0.22px",
             "fontFamily": "\"TT Commons\", -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif",
             "fontWeight": 600
@@ -186,7 +187,7 @@ var theme = {
     },
     "sizeButtonSmallHeight": {
         "regular": 30,
-        "compact": 26
+        "compact": 28
     },
     "sizeCheckbox": {
         "regular": 16
@@ -251,6 +252,18 @@ var theme = {
     "sizeBadgeXL": {
         "regular": 56
     },
+    "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)",
@@ -263,9 +276,9 @@ var theme = {
     "opacityDisableAccessibility": 0.64,
     "colorsScheme": "dark",
     "colorBackgroundAccent": {
-        "normal": "#71AAEB",
-        "hover": "#77ADEC",
-        "active": "#7CB1ED"
+        "normal": "#529EF4",
+        "hover": "#59A2F4",
+        "active": "#60A6F5"
     },
     "colorBackgroundAccentThemed": {
         "normal": "#FFFFFF",
@@ -273,9 +286,44 @@ var theme = {
         "active": "#FFFFFF"
     },
     "colorBackgroundAccentAlternative": {
-        "normal": "#71AAEB",
-        "hover": "#77ADEC",
-        "active": "#7CB1ED"
+        "normal": "#529EF4",
+        "hover": "#59A2F4",
+        "active": "#60A6F5"
+    },
+    "colorIconAccent": {
+        "normal": "#529EF4",
+        "hover": "#59A2F4",
+        "active": "#60A6F5"
+    },
+    "colorTextAccent": {
+        "normal": "#529EF4",
+        "hover": "#59A2F4",
+        "active": "#60A6F5"
+    },
+    "colorTextAccentThemed": {
+        "normal": "#FFFFFF",
+        "hover": "#FFFFFF",
+        "active": "#FFFFFF"
+    },
+    "colorStrokeAccent": {
+        "normal": "#529EF4",
+        "hover": "#59A2F4",
+        "active": "#60A6F5"
+    },
+    "colorStrokeAccentThemed": {
+        "normal": "#FFFFFF",
+        "hover": "#FFFFFF",
+        "active": "#FFFFFF"
+    },
+    "colorStrokeContrast": {
+        "normal": "#FFFFFF",
+        "hover": "#FFFFFF",
+        "active": "#FFFFFF"
+    },
+    "colorActionSheetText": {
+        "normal": "#529EF4",
+        "hover": "#59A2F4",
+        "active": "#60A6F5"
     },
     "colorBackgroundContent": {
         "normal": "#19191A",
@@ -322,111 +370,36 @@ var theme = {
         "hover": "#E74D4D",
         "active": "#E85555"
     },
-    "colorBackgroundModal": {
-        "normal": "#2D2D2E",
-        "hover": "#353536",
-        "active": "#3E3E3F"
-    },
-    "colorBackgroundPositive": {
-        "normal": "#4BB34B",
-        "hover": "#52B652",
-        "active": "#59B959"
-    },
     "colorBackgroundNegativeTint": {
-        "normal": "#522e2e",
+        "normal": "#522E2E",
         "hover": "#593636",
         "active": "#603F3F"
     },
-    "colorTextAccent": {
-        "normal": "#71AAEB",
-        "hover": "#77ADEC",
-        "active": "#7CB1ED"
-    },
-    "colorTextAccentThemed": {
-        "normal": "#FFFFFF",
-        "hover": "#FFFFFF",
-        "active": "#FFFFFF"
-    },
     "colorTextNegative": {
         "normal": "#E64646",
         "hover": "#E74D4D",
         "active": "#E85555"
     },
-    "colorTextLink": {
-        "normal": "#71AAEB",
-        "hover": "#77ADEC",
-        "active": "#7CB1ED"
-    },
-    "colorTextLinkThemed": {
-        "normal": "#FFFFFF",
-        "hover": "#FFFFFF",
-        "active": "#FFFFFF"
-    },
-    "colorTextMuted": {
-        "normal": "#E1E3E6",
-        "hover": "#E2E4E7",
-        "active": "#E3E5E8"
-    },
-    "colorTextPrimary": {
-        "normal": "#E1E3E6",
-        "hover": "#E2E4E7",
-        "active": "#E3E5E8"
-    },
-    "colorTextPrimaryInvariably": {
-        "normal": "#000000",
-        "hover": "#0A0A0A",
-        "active": "#141414"
-    },
-    "colorTextSecondary": {
-        "normal": "#76787A",
-        "hover": "#7B7D7F",
-        "active": "#818385"
-    },
-    "colorTextSubhead": {
-        "normal": "#C1C3C6",
-        "hover": "#C3C5C8",
-        "active": "#C6C8CB"
-    },
-    "colorTextTertiary": {
-        "normal": "#636567",
-        "hover": "#696B6D",
-        "active": "#6F7173"
-    },
-    "colorTextLinkVisited": {
-        "normal": "#4986CC",
-        "hover": "#508BCE",
-        "active": "#5890D0"
-    },
-    "colorTextContrast": {
-        "normal": "#FFFFFF",
-        "hover": "#FFFFFF",
-        "active": "#FFFFFF"
-    },
-    "colorTextContrastThemed": {
-        "normal": "#000000",
-        "hover": "#0A0A0A",
-        "active": "#141414"
+    "colorIconNegative": {
+        "normal": "#E64646",
+        "hover": "#E74D4D",
+        "active": "#E85555"
     },
-    "colorLinkContrast": {
-        "normal": "#FFFFFF",
-        "hover": "#FFFFFF",
-        "active": "#FFFFFF"
+    "colorStrokeNegative": {
+        "normal": "#E64646",
+        "hover": "#E74D4D",
+        "active": "#E85555"
     },
-    "colorTextPositive": {
-        "normal": "#4BB34B",
-        "hover": "#52B652",
-        "active": "#59B959"
+    "colorHeaderBackground": {
+        "normal": "#19191A",
+        "hover": "#222223",
+        "active": "#2B2B2C"
     },
-    "colorIconAccent": {
+    "colorPanelHeaderIcon": {
         "normal": "#71AAEB",
         "hover": "#77ADEC",
         "active": "#7CB1ED"
     },
-    "colorIconNegative": {
-        "normal": "#E64646",
-        "hover": "#E74D4D",
-        "active": "#E85555"
-    },
     "colorIconPrimary": {
         "normal": "#E1E3E6",
         "hover": "#E2E4E7",
@@ -467,45 +440,50 @@ var theme = {
         "hover": "rgba(255, 255, 255, 0.34)",
         "active": "rgba(255, 255, 255, 0.38)"
     },
-    "colorIconContrast": {
-        "normal": "#FFFFFF",
-        "hover": "#FFFFFF",
-        "active": "#FFFFFF"
+    "colorImageBorderAlpha": {
+        "normal": "rgba(255, 255, 255, 0.08)",
+        "hover": "rgba(255, 255, 255, 0.12)",
+        "active": "rgba(255, 255, 255, 0.16)"
     },
-    "colorIconContrastThemed": {
-        "normal": "#000000",
-        "hover": "#0A0A0A",
-        "active": "#141414"
+    "colorWriteBarInputBackground": {
+        "normal": "#232324",
+        "hover": "#2C2C2D",
+        "active": "#353536"
     },
-    "colorIconPositive": {
-        "normal": "#4BB34B",
-        "hover": "#52B652",
-        "active": "#59B959"
+    "colorWriteBarInputBorderAlpha": {
+        "normal": "rgba(255, 255, 255, 0.8)",
+        "hover": "rgba(255, 255, 255, 0.84)",
+        "active": "rgba(255, 255, 255, 0.88)"
     },
-    "colorStrokeAccent": {
-        "normal": "#71AAEB",
-        "hover": "#77ADEC",
-        "active": "#7CB1ED"
+    "colorTrackBackground": {
+        "normal": "#202021",
+        "hover": "#29292A",
+        "active": "#323233"
     },
-    "colorStrokeAccentThemed": {
-        "normal": "#FFFFFF",
-        "hover": "#FFFFFF",
-        "active": "#FFFFFF"
+    "colorTrackBuffer": {
+        "normal": "#405772",
+        "hover": "#485E78",
+        "active": "#4F647D"
     },
-    "colorStrokeContrast": {
-        "normal": "#FFFFFF",
-        "hover": "#FFFFFF",
-        "active": "#FFFFFF"
+    "colorBackgroundModal": {
+        "normal": "#2D2D2E",
+        "hover": "#353536",
+        "active": "#3E3E3F"
     },
-    "colorStrokeNegative": {
-        "normal": "#E64646",
-        "hover": "#E74D4D",
-        "active": "#E85555"
+    "colorImagePlaceholderAlpha": {
+        "normal": "rgba(241, 247, 255, 0.08)",
+        "hover": "rgba(241, 247, 255, 0.12)",
+        "active": "rgba(241, 247, 255, 0.16)"
     },
-    "colorImageBorderAlpha": {
-        "normal": "rgba(255, 255, 255, 0.08)",
-        "hover": "rgba(255, 255, 255, 0.12)",
-        "active": "rgba(255, 255, 255, 0.16)"
+    "colorImagePlaceholder": {
+        "normal": "#2A2B2C",
+        "hover": "#333334",
+        "active": "#3B3C3D"
+    },
+    "colorSearchFieldBackground": {
+        "normal": "#232324",
+        "hover": "#2C2C2D",
+        "active": "#353536"
     },
     "colorFieldBorderAlpha": {
         "normal": "rgba(255, 255, 255, 0.12)",
@@ -527,15 +505,55 @@ var theme = {
         "hover": "#19191A",
         "active": "#222223"
     },
-    "colorStrokePositive": {
-        "normal": "#4BB34B",
-        "hover": "#52B652",
-        "active": "#59B959"
+    "colorTextLink": {
+        "normal": "#529EF4",
+        "hover": "#59A2F4",
+        "active": "#60A6F5"
+    },
+    "colorTextLinkThemed": {
+        "normal": "#FFFFFF",
+        "hover": "#FFFFFF",
+        "active": "#FFFFFF"
+    },
+    "colorTextMuted": {
+        "normal": "#E1E3E6",
+        "hover": "#E2E4E7",
+        "active": "#E3E5E8"
+    },
+    "colorTextPrimary": {
+        "normal": "#E1E3E6",
+        "hover": "#E2E4E7",
+        "active": "#E3E5E8"
+    },
+    "colorTextPrimaryInvariably": {
+        "normal": "#000000",
+        "hover": "#0A0A0A",
+        "active": "#141414"
+    },
+    "colorTextSecondary": {
+        "normal": "#76787A",
+        "hover": "#7B7D7F",
+        "active": "#818385"
+    },
+    "colorTextSubhead": {
+        "normal": "#C1C3C6",
+        "hover": "#C3C5C8",
+        "active": "#C6C8CB"
+    },
+    "colorTextTertiary": {
+        "normal": "#636567",
+        "hover": "#696B6D",
+        "active": "#6F7173"
+    },
+    "colorWriteBarIcon": {
+        "normal": "#529EF4",
+        "hover": "#59A2F4",
+        "active": "#60A6F5"
     },
     "colorAccentBlue": {
-        "normal": "#71AAEB",
-        "hover": "#77ADEC",
-        "active": "#7CB1ED"
+        "normal": "#529EF4",
+        "hover": "#59A2F4",
+        "active": "#60A6F5"
     },
     "colorAccentGray": {
         "normal": "#A3ADB8",
@@ -567,75 +585,70 @@ var theme = {
         "hover": "#7E36C3",
         "active": "#843FC5"
     },
+    "colorSkeletonFrom": {
+        "normal": "#F5F5F5",
+        "hover": "#F5F5F5",
+        "active": "#F6F6F6"
+    },
+    "colorSkeletonTo": {
+        "normal": "#E1E3E6",
+        "hover": "#E2E4E7",
+        "active": "#E3E5E8"
+    },
     "colorAccentSecondary": {
         "normal": "#3F8AE0",
         "hover": "#478FE1",
         "active": "#4E93E2"
     },
-    "colorActionSheetText": {
-        "normal": "#71AAEB",
-        "hover": "#77ADEC",
-        "active": "#7CB1ED"
-    },
-    "colorHeaderBackground": {
-        "normal": "#19191A",
-        "hover": "#222223",
-        "active": "#2B2B2C"
-    },
-    "colorPanelHeaderIcon": {
-        "normal": "#71AAEB",
-        "hover": "#77ADEC",
-        "active": "#7CB1ED"
-    },
-    "colorWriteBarInputBackground": {
-        "normal": "#232324",
-        "hover": "#2C2C2D",
-        "active": "#353536"
+    "colorTextLinkVisited": {
+        "normal": "#4986CC",
+        "hover": "#508BCE",
+        "active": "#5890D0"
     },
-    "colorWriteBarInputBorderAlpha": {
-        "normal": "rgba(255, 255, 255, 0.8)",
-        "hover": "rgba(255, 255, 255, 0.84)",
-        "active": "rgba(255, 255, 255, 0.88)"
+    "colorTextContrast": {
+        "normal": "#FFFFFF",
+        "hover": "#FFFFFF",
+        "active": "#FFFFFF"
     },
-    "colorTrackBackground": {
-        "normal": "#202021",
-        "hover": "#29292A",
-        "active": "#323233"
+    "colorTextContrastThemed": {
+        "normal": "#000000",
+        "hover": "#0A0A0A",
+        "active": "#141414"
     },
-    "colorTrackBuffer": {
-        "normal": "#405772",
-        "hover": "#485E78",
-        "active": "#4F647D"
+    "colorIconContrast": {
+        "normal": "#FFFFFF",
+        "hover": "#FFFFFF",
+        "active": "#FFFFFF"
     },
-    "colorImagePlaceholderAlpha": {
-        "normal": "rgba(241, 247, 255, 0.08)",
-        "hover": "rgba(241, 247, 255, 0.12)",
-        "active": "rgba(241, 247, 255, 0.16)"
+    "colorIconContrastThemed": {
+        "normal": "#000000",
+        "hover": "#0A0A0A",
+        "active": "#141414"
     },
-    "colorImagePlaceholder": {
-        "normal": "#2A2B2C",
-        "hover": "#333334",
-        "active": "#3B3C3D"
+    "colorLinkContrast": {
+        "normal": "#FFFFFF",
+        "hover": "#FFFFFF",
+        "active": "#FFFFFF"
     },
-    "colorSearchFieldBackground": {
-        "normal": "#232324",
-        "hover": "#2C2C2D",
-        "active": "#353536"
+    "colorTextPositive": {
+        "normal": "#4BB34B",
+        "hover": "#52B652",
+        "active": "#59B959"
     },
-    "colorWriteBarIcon": {
-        "normal": "#76787A",
-        "hover": "#7B7D7F",
-        "active": "#818385"
+    "colorBackgroundPositive": {
+        "normal": "#4BB34B",
+        "hover": "#52B652",
+        "active": "#59B959"
     },
-    "colorSkeletonFrom": {
-        "normal": "#F5F5F5",
-        "hover": "#F5F5F5",
-        "active": "#F6F6F6"
+    "colorIconPositive": {
+        "normal": "#4BB34B",
+        "hover": "#52B652",
+        "active": "#59B959"
     },
-    "colorSkeletonTo": {
-        "normal": "#E1E3E6",
-        "hover": "#E2E4E7",
-        "active": "#E3E5E8"
+    "colorStrokePositive": {
+        "normal": "#4BB34B",
+        "hover": "#52B652",
+        "active": "#59B959"
     },
     "colorAvatarOverlay": {
         "normal": "rgba(129, 140, 153, 0.48)",