@vkontakte/vkui-tokens 4.53.3 → 4.54.0

package/build/helpers/getGradientPointsFromColor.js

@@ -5,18 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getGradientPointsFromColor = void 0;
 var color_1 = __importDefault(require("color"));
+// opacityMap.json требуется для android и ios клиентов
+var opacityMap_json_1 = __importDefault(require("./opacityMap.json"));
 function getGradientPointsFromColor(colorArg, opacityMultiplier) {
     if (opacityMultiplier === void 0) { opacityMultiplier = 1; }
-    var opacityMap = [
-        [0, 0],
-        [0.05, 15],
-        [0.2, 30],
-        [0.8, 70],
-        [0.95, 85],
-        [1, 100],
-    ];
     var colorRGB = (0, color_1.default)(colorArg).rgb().array().join(', ');
-    return opacityMap
+    return opacityMap_json_1.default
         .map(function (_a) {
         var pointOpacity = _a[0], pointCoordinate = _a[1];
         return "rgba(".concat(colorRGB, ", ").concat(Math.round(pointOpacity * opacityMultiplier * 1000) / 1000, ") ").concat(pointCoordinate, "%");

package/build/helpers/opacityMap.json

@@ -0,0 +1,8 @@
+[
+  [0, 0],
+  [0.05, 15],
+  [0.2, 30],
+  [0.8, 70],
+  [0.95, 85],
+  [1, 100]
+]

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

@@ -161,6 +161,11 @@ export interface ColorsDescriptionStruct {
      * @tags color, text
      */
     colorTextPrimary: ColorDescription;
+    /**
+     * @desc Основной цвет текста с прозрачностью
+     * @tags color, text, alpha
+     */
+    colorTextPrimaryAlpha: ColorDescription;
     /**
      * @desc Основной цвет текста не меняется в зависимости от темы
      * @tags color, text
@@ -171,6 +176,11 @@ export interface ColorsDescriptionStruct {
      * @tags color, text
      */
     colorTextSecondary: ColorDescription;
+    /**
+     * @desc Второстепенный цвет текста с прозрачностью
+     * @tags color, text, alpha
+     */
+    colorTextSecondaryAlpha: ColorDescription;
     /**
      * @desc Цвет текста подзаголовков
      * @tags color, text

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.53.3",
+  "version": "4.54.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "homepage": "https://vkcom.github.io/vkui-tokens",
@@ -48,14 +48,14 @@
     "@types/color": "3.0.6",
     "@types/common-tags": "1.8.4",
     "@types/fs-extra": "11.0.4",
-    "@types/lodash": "4.17.6",
+    "@types/lodash": "4.17.7",
     "@types/node": "18.11.10",
-    "@types/react": "18.3.3",
+    "@types/react": "18.3.5",
     "@types/react-dom": "18.3.0",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.2.0",
     "@vkontakte/icons": "2.124.0",
     "@vkontakte/prettier-config": "0.1.0",
-    "@vkontakte/vk-bridge": "2.14.2",
+    "@vkontakte/vk-bridge": "2.15.0",
     "@vkontakte/vkjs": "1.3.0",
     "@vkontakte/vkui": "6.3.0",
     "babel-jest": "29.7.0",
@@ -98,10 +98,10 @@
     "ts-node": "10.9.2",
     "tsconfig-paths": "4.2.0",
     "tscpaths": "0.0.9",
-    "type-fest": "4.23.0",
+    "type-fest": "4.26.1",
     "typescript": "5.2.2",
     "typescript-eslint": "7.0.1",
-    "webpack": "5.93.0",
+    "webpack": "5.94.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.0.4",
     "webpack-notifier": "1.15.0"
@@ -109,5 +109,6 @@
   "engines": {
     "npm": ">=9.3.1",
     "yarn": ">=1.21.1 <2"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/themeDescriptions/base/paradigm.js

@@ -77,8 +77,10 @@ exports.lightColors = {
         colorTextLinkThemed: '#0070f0',
         colorTextMuted: '#2C2D2E',
         colorTextPrimary: '#2C2D2E',
+        colorTextPrimaryAlpha: 'rgba(37, 41, 46, 0.84)',
         colorTextPrimaryInvariably: '#2C2D2E',
         colorTextSecondary: '#87898F',
+        colorTextSecondaryAlpha: 'rgba(37, 41, 46, 0.55)',
         colorTextSubhead: '#797A80',
         colorTextTertiary: '#AAADB3',
         colorTextLinkVisited: '#528FDF',
@@ -208,8 +210,10 @@ exports.darkColors = {
         colorTextLinkThemed: '#FFFFFF',
         colorTextMuted: '#E7E8EA',
         colorTextPrimary: '#E7E8EA',
+        colorTextPrimaryAlpha: 'rgba(249, 252, 255, 0.72)',
         colorTextPrimaryInvariably: '#2C2D2E',
         colorTextSecondary: '#8C8E94',
+        colorTextSecondaryAlpha: 'rgba(247, 251, 255, 0.42)',
         colorTextSubhead: '#BFC1C5',
         colorTextTertiary: '#74767A',
         colorTextLinkVisited: '#528FDF',

package/themeDescriptions/base/vk.js

@@ -87,7 +87,7 @@ var colorFromFigma = function (colorsScheme) {
             colorBackgroundContrastInverse: background.background_contrast_inverse,
             colorBackgroundContrastThemed: {
                 light: '#FFFFFF',
-                dark: '#323232',
+                dark: '#2C2D2E',
             }[colorsScheme],
             colorBackgroundModal: {
                 light: '#FFFFFF',
@@ -121,8 +121,16 @@ var colorFromFigma = function (colorsScheme) {
             colorTextAccent: text.text_accent,
             colorTextAccentThemed: text.text_accent_themed,
             colorTextPrimary: text.text_primary,
+            colorTextPrimaryAlpha: {
+                light: 'rgba(37, 41, 46, 0.84)',
+                dark: 'rgba(249, 252, 255, 0.72)',
+            }[colorsScheme],
             colorTextPrimaryInvariably: text.text_primary_invariably,
             colorTextSecondary: text.text_secondary,
+            colorTextSecondaryAlpha: {
+                light: 'rgba(37, 41, 46, 0.55)',
+                dark: 'rgba(247, 251, 255, 0.42)',
+            }[colorsScheme],
             colorTextSubhead: text.text_subhead,
             colorTextTertiary: text.text_tertiary,
             colorTextContrast: text.text_contrast,

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

@@ -511,12 +511,18 @@
 	--vkui--color_text_primary: #2C2D2E;
 	--vkui--color_text_primary--hover: #2A2C2F;
 	--vkui--color_text_primary--active: #282B2F;
+	--vkui--color_text_primary_alpha: rgba(37, 41, 46, 0.84);
+	--vkui--color_text_primary_alpha--hover: rgba(37, 41, 46, 0.88);
+	--vkui--color_text_primary_alpha--active: rgba(37, 41, 46, 0.92);
 	--vkui--color_text_primary_invariably: #2C2D2E;
 	--vkui--color_text_primary_invariably--hover: #2A2C2F;
 	--vkui--color_text_primary_invariably--active: #282B2F;
 	--vkui--color_text_secondary: #93969B;
 	--vkui--color_text_secondary--hover: #8D9197;
 	--vkui--color_text_secondary--active: #878B93;
+	--vkui--color_text_secondary_alpha: rgba(37, 41, 46, 0.55);
+	--vkui--color_text_secondary_alpha--hover: rgba(37, 41, 46, 0.59);
+	--vkui--color_text_secondary_alpha--active: rgba(37, 41, 46, 0.63);
 	--vkui--color_text_subhead: #797A80;
 	--vkui--color_text_subhead--hover: #74767D;
 	--vkui--color_text_subhead--active: #6F727B;

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

@@ -138,12 +138,18 @@
 	--vkui--color_text_primary: #2C2D2E;
 	--vkui--color_text_primary--hover: #2A2C2F;
 	--vkui--color_text_primary--active: #282B2F;
+	--vkui--color_text_primary_alpha: rgba(37, 41, 46, 0.84);
+	--vkui--color_text_primary_alpha--hover: rgba(37, 41, 46, 0.88);
+	--vkui--color_text_primary_alpha--active: rgba(37, 41, 46, 0.92);
 	--vkui--color_text_primary_invariably: #2C2D2E;
 	--vkui--color_text_primary_invariably--hover: #2A2C2F;
 	--vkui--color_text_primary_invariably--active: #282B2F;
 	--vkui--color_text_secondary: #93969B;
 	--vkui--color_text_secondary--hover: #8D9197;
 	--vkui--color_text_secondary--active: #878B93;
+	--vkui--color_text_secondary_alpha: rgba(37, 41, 46, 0.55);
+	--vkui--color_text_secondary_alpha--hover: rgba(37, 41, 46, 0.59);
+	--vkui--color_text_secondary_alpha--active: rgba(37, 41, 46, 0.63);
 	--vkui--color_text_subhead: #797A80;
 	--vkui--color_text_subhead--hover: #74767D;
 	--vkui--color_text_subhead--active: #6F727B;

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

@@ -95,12 +95,18 @@
 	--vkui--color_text_primary: #2C2D2E;
 	--vkui--color_text_primary--hover: #2A2C2F;
 	--vkui--color_text_primary--active: #282B2F;
+	--vkui--color_text_primary_alpha: rgba(37, 41, 46, 0.84);
+	--vkui--color_text_primary_alpha--hover: rgba(37, 41, 46, 0.88);
+	--vkui--color_text_primary_alpha--active: rgba(37, 41, 46, 0.92);
 	--vkui--color_text_primary_invariably: #2C2D2E;
 	--vkui--color_text_primary_invariably--hover: #2A2C2F;
 	--vkui--color_text_primary_invariably--active: #282B2F;
 	--vkui--color_text_secondary: #93969B;
 	--vkui--color_text_secondary--hover: #8D9197;
 	--vkui--color_text_secondary--active: #878B93;
+	--vkui--color_text_secondary_alpha: rgba(37, 41, 46, 0.55);
+	--vkui--color_text_secondary_alpha--hover: rgba(37, 41, 46, 0.59);
+	--vkui--color_text_secondary_alpha--active: rgba(37, 41, 46, 0.63);
 	--vkui--color_text_subhead: #797A80;
 	--vkui--color_text_subhead--hover: #74767D;
 	--vkui--color_text_subhead--active: #6F727B;