@vkontakte/vkui-tokens 4.56.0 → 4.56.2

package/build/compilers/structJSON/compileStructJSON.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -42,9 +31,9 @@ function parseRawToken(rawToken) {
             var varName = varNameRaw[1];
             var varValue = rawToken.slice(varNameRaw[0].length, -1).trim().slice(1).trim();
             return {
+                step: step,
                 color: varValue,
                 token: (0, convertSnakeToCamel_1.convertSnakeToCamel)(varName),
-                step: step,
                 alpha: new color_1.default(varValue).alpha(),
             };
         }
@@ -63,8 +52,16 @@ function compileStructGradients(cssGradients) {
         var rawPoints = cssGradients[key].split('%').slice(0, -1);
         structGradients[key] = rawPoints.map(parseRawToken).map(function (structToken, index, array) {
             var _a;
-            if (index > 0 && !structToken.token) {
-                return __assign(__assign({}, structToken), { token: (_a = structToken.token) !== null && _a !== void 0 ? _a : array[0].token });
+            if (!structToken.token) {
+                return {
+                    step: structToken.step,
+                    color: structToken.color,
+                    // Только последнее значение распространяется на все точки
+                    // (как в градиенте, сгенерированном по 1 переменной)
+                    // Тут могут всплыть ошибки, так что заранее сорри
+                    token: (_a = structToken.token) !== null && _a !== void 0 ? _a : array[array.length - 1].token,
+                    alpha: structToken.alpha,
+                };
             }
             return structToken;
         });

package/build/compilers/structJSON/compileStructJSON.test.js

@@ -18,14 +18,14 @@ var compileStructJSON_1 = require("./compileStructJSON");
                 'rgba(0, 0, 255, 1) 100%',
             ].join(', '),
             gradientOneVariable: [
-                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0)) 0%',
-                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.05)) 15%',
-                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.2)) 30%',
-                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.8)) 70%',
-                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.95)) 85%',
+                'rgba(0, 0, 255, 0) 0%',
+                'rgba(0, 0, 255, 0.05) 15%',
+                'rgba(0, 0, 255, 0.2) 30%',
+                'rgba(0, 0, 255, 0.8) 70%',
+                'rgba(0, 0, 255, 0.95) 85%',
                 'var(--vkui--color_icon_primary, rgba(0, 0, 255, 1)) 100%',
             ].join(', '),
         };
-        (0, globals_1.expect)((0, compileStructJSON_1.compileStructJSON)(testData)).toBe("{\n\t\"color\": {\n\t\t\"colorA\": \"#fff\"\n\t},\n\t\"colorsScheme\": {\n\t\t\"colorsScheme\": \"scheme\"\n\t},\n\t\"other\": {\n\t\t\"randomToken\": 123\n\t},\n\t\"gradient\": {\n\t\t\"gradientTest\": [\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(255, 255, 255, 1)\",\n\t\t\t\t\"token\": \"colorBackgroundContent\",\n\t\t\t\t\"step\": 0,\n\t\t\t\t\"alpha\": 1\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 0, 0)\",\n\t\t\t\t\"step\": 1,\n\t\t\t\t\"alpha\": 0,\n\t\t\t\t\"token\": \"colorBackgroundContent\"\n\t\t\t}\n\t\t],\n\t\t\"gradientOneColor\": [\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0)\",\n\t\t\t\t\"step\": 0,\n\t\t\t\t\"alpha\": 0\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.05)\",\n\t\t\t\t\"step\": 0.15,\n\t\t\t\t\"alpha\": 0.05\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.2)\",\n\t\t\t\t\"step\": 0.3,\n\t\t\t\t\"alpha\": 0.2\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.8)\",\n\t\t\t\t\"step\": 0.7,\n\t\t\t\t\"alpha\": 0.8\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.95)\",\n\t\t\t\t\"step\": 0.85,\n\t\t\t\t\"alpha\": 0.95\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 1)\",\n\t\t\t\t\"step\": 1,\n\t\t\t\t\"alpha\": 1\n\t\t\t}\n\t\t],\n\t\t\"gradientOneVariable\": [\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0)\",\n\t\t\t\t\"token\": \"colorIconPrimary\",\n\t\t\t\t\"step\": 0,\n\t\t\t\t\"alpha\": 0\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.05)\",\n\t\t\t\t\"token\": \"colorIconPrimary\",\n\t\t\t\t\"step\": 0.15,\n\t\t\t\t\"alpha\": 0.05\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.2)\",\n\t\t\t\t\"token\": \"colorIconPrimary\",\n\t\t\t\t\"step\": 0.3,\n\t\t\t\t\"alpha\": 0.2\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.8)\",\n\t\t\t\t\"token\": \"colorIconPrimary\",\n\t\t\t\t\"step\": 0.7,\n\t\t\t\t\"alpha\": 0.8\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.95)\",\n\t\t\t\t\"token\": \"colorIconPrimary\",\n\t\t\t\t\"step\": 0.85,\n\t\t\t\t\"alpha\": 0.95\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 1)\",\n\t\t\t\t\"token\": \"colorIconPrimary\",\n\t\t\t\t\"step\": 1,\n\t\t\t\t\"alpha\": 1\n\t\t\t}\n\t\t]\n\t}\n}");
+        (0, globals_1.expect)((0, compileStructJSON_1.compileStructJSON)(testData)).toBe("{\n\t\"color\": {\n\t\t\"colorA\": \"#fff\"\n\t},\n\t\"colorsScheme\": {\n\t\t\"colorsScheme\": \"scheme\"\n\t},\n\t\"other\": {\n\t\t\"randomToken\": 123\n\t},\n\t\"gradient\": {\n\t\t\"gradientTest\": [\n\t\t\t{\n\t\t\t\t\"step\": 0,\n\t\t\t\t\"color\": \"rgba(255, 255, 255, 1)\",\n\t\t\t\t\"token\": \"colorBackgroundContent\",\n\t\t\t\t\"alpha\": 1\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"step\": 1,\n\t\t\t\t\"color\": \"rgba(0, 0, 0, 0)\",\n\t\t\t\t\"alpha\": 0\n\t\t\t}\n\t\t],\n\t\t\"gradientOneColor\": [\n\t\t\t{\n\t\t\t\t\"step\": 0,\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0)\",\n\t\t\t\t\"alpha\": 0\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"step\": 0.15,\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.05)\",\n\t\t\t\t\"alpha\": 0.05\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"step\": 0.3,\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.2)\",\n\t\t\t\t\"alpha\": 0.2\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"step\": 0.7,\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.8)\",\n\t\t\t\t\"alpha\": 0.8\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"step\": 0.85,\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.95)\",\n\t\t\t\t\"alpha\": 0.95\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"step\": 1,\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 1)\",\n\t\t\t\t\"alpha\": 1\n\t\t\t}\n\t\t],\n\t\t\"gradientOneVariable\": [\n\t\t\t{\n\t\t\t\t\"step\": 0,\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0)\",\n\t\t\t\t\"token\": \"colorIconPrimary\",\n\t\t\t\t\"alpha\": 0\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"step\": 0.15,\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.05)\",\n\t\t\t\t\"token\": \"colorIconPrimary\",\n\t\t\t\t\"alpha\": 0.05\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"step\": 0.3,\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.2)\",\n\t\t\t\t\"token\": \"colorIconPrimary\",\n\t\t\t\t\"alpha\": 0.2\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"step\": 0.7,\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.8)\",\n\t\t\t\t\"token\": \"colorIconPrimary\",\n\t\t\t\t\"alpha\": 0.8\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"step\": 0.85,\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.95)\",\n\t\t\t\t\"token\": \"colorIconPrimary\",\n\t\t\t\t\"alpha\": 0.95\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"step\": 1,\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 1)\",\n\t\t\t\t\"token\": \"colorIconPrimary\",\n\t\t\t\t\"alpha\": 1\n\t\t\t}\n\t\t]\n\t}\n}");
     });
 });

package/build/helpers/tokenHelpers.js

@@ -56,7 +56,9 @@ function gradient() {
             var pointOpacity = _a[0], pointCoordinate = _a[1];
             var stop = (_b = stops[index]) !== null && _b !== void 0 ? _b : stops[stops.length - 1];
             var _c = typeof stop === 'function' ? stop(theme) : [undefined, stop], stopKey = _c[0], stopValue = _c[1];
-            var pointRaw = (0, getGradientPointsFromColor_1.makeGradientPointRaw)(stopValue, stopKey);
+            var pointRaw = (0, getGradientPointsFromColor_1.makeGradientPointRaw)(stopValue, 
+            // Привязываем к переменной только стопы с оригинальной прозрачностью
+            pointOpacity === 1 ? stopKey : undefined);
             return (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(pointRaw, 1, [[pointOpacity, pointCoordinate]]);
         })
             .join(', ');

package/build/helpers/tokenHelpers.test.js

@@ -45,11 +45,11 @@ var tokenHelpers_1 = require("./tokenHelpers");
             var gradientToken = (0, tokenHelpers_1.gradient)((0, tokenHelpers_1.namedAlias)('colorIconPrimary'));
             var gradientValue = gradientToken({ colors: { colorIconPrimary: 'blue' } });
             (0, globals_1.expect)(gradientValue).toEqual([
-                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0)) 0%',
-                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.05)) 15%',
-                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.2)) 30%',
-                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.8)) 70%',
-                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.95)) 85%',
+                'rgba(0, 0, 255, 0) 0%',
+                'rgba(0, 0, 255, 0.05) 15%',
+                'rgba(0, 0, 255, 0.2) 30%',
+                'rgba(0, 0, 255, 0.8) 70%',
+                'rgba(0, 0, 255, 0.95) 85%',
                 'var(--vkui--color_icon_primary, rgba(0, 0, 255, 1)) 100%',
             ].join(', '));
         });

package/interfaces/themes/workspaceAdmin/index.d.ts

@@ -1,9 +1,10 @@
 import { ThemeCssVars } from '../../general';
 import { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from '../../general/colors';
+import { Adaptive } from '../../general/tools';
 import { Font } from '../../general/typography';
 import { LocalParadigmColorsDescriptionStruct, ParadigmTheme, ParadigmThemeDescription } from '../../namespaces/paradigm';
 export interface ThemeWorkspaceOverValues {
-    fontHeadline3: Font;
+    fontHeadline3: Adaptive<Font>;
 }
 export interface LocalWorkspaceAdminColorsDescriptionStruct {
     colorAvatarsBlue: ColorDescription;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.56.0",
+  "version": "4.56.2",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "homepage": "https://vkcom.github.io/vkui-tokens",

package/themes/calendar/struct.json

@@ -1398,129 +1398,129 @@
 	"gradient": {
 		"gradientBlack": [
 			{
-				"color": "rgba(0, 0, 0, 0)",
 				"step": 0,
+				"color": "rgba(0, 0, 0, 0)",
 				"alpha": 0
 			},
 			{
-				"color": "rgba(0, 0, 0, 0.02)",
 				"step": 0.15,
+				"color": "rgba(0, 0, 0, 0.02)",
 				"alpha": 0.02
 			},
 			{
-				"color": "rgba(0, 0, 0, 0.08)",
 				"step": 0.3,
+				"color": "rgba(0, 0, 0, 0.08)",
 				"alpha": 0.08
 			},
 			{
-				"color": "rgba(0, 0, 0, 0.32)",
 				"step": 0.7,
+				"color": "rgba(0, 0, 0, 0.32)",
 				"alpha": 0.32
 			},
 			{
-				"color": "rgba(0, 0, 0, 0.38)",
 				"step": 0.85,
+				"color": "rgba(0, 0, 0, 0.38)",
 				"alpha": 0.38
 			},
 			{
-				"color": "rgba(0, 0, 0, 0.4)",
 				"step": 1,
+				"color": "rgba(0, 0, 0, 0.4)",
 				"alpha": 0.4
 			}
 		],
 		"gradientWhite": [
 			{
-				"color": "rgba(255, 255, 255, 0)",
 				"step": 0,
+				"color": "rgba(255, 255, 255, 0)",
 				"alpha": 0
 			},
 			{
-				"color": "rgba(255, 255, 255, 0.05)",
 				"step": 0.15,
+				"color": "rgba(255, 255, 255, 0.05)",
 				"alpha": 0.05
 			},
 			{
-				"color": "rgba(255, 255, 255, 0.2)",
 				"step": 0.3,
+				"color": "rgba(255, 255, 255, 0.2)",
 				"alpha": 0.2
 			},
 			{
-				"color": "rgba(255, 255, 255, 0.8)",
 				"step": 0.7,
+				"color": "rgba(255, 255, 255, 0.8)",
 				"alpha": 0.8
 			},
 			{
-				"color": "rgba(255, 255, 255, 0.95)",
 				"step": 0.85,
+				"color": "rgba(255, 255, 255, 0.95)",
 				"alpha": 0.95
 			},
 			{
-				"color": "rgba(255, 255, 255, 1)",
 				"step": 1,
+				"color": "rgba(255, 255, 255, 1)",
 				"alpha": 1
 			}
 		],
 		"gradientTint": [
 			{
-				"color": "rgba(246, 247, 248, 0)",
 				"step": 0,
+				"color": "rgba(246, 247, 248, 0)",
 				"alpha": 0
 			},
 			{
-				"color": "rgba(246, 247, 248, 0.05)",
 				"step": 0.15,
+				"color": "rgba(246, 247, 248, 0.05)",
 				"alpha": 0.05
 			},
 			{
-				"color": "rgba(246, 247, 248, 0.2)",
 				"step": 0.3,
+				"color": "rgba(246, 247, 248, 0.2)",
 				"alpha": 0.2
 			},
 			{
-				"color": "rgba(246, 247, 248, 0.8)",
 				"step": 0.7,
+				"color": "rgba(246, 247, 248, 0.8)",
 				"alpha": 0.8
 			},
 			{
-				"color": "rgba(246, 247, 248, 0.95)",
 				"step": 0.85,
+				"color": "rgba(246, 247, 248, 0.95)",
 				"alpha": 0.95
 			},
 			{
-				"color": "rgba(246, 247, 248, 1)",
 				"step": 1,
+				"color": "rgba(246, 247, 248, 1)",
 				"alpha": 1
 			}
 		],
 		"gradient": [
 			{
-				"color": "rgba(255, 255, 255, 0)",
 				"step": 0,
+				"color": "rgba(255, 255, 255, 0)",
 				"alpha": 0
 			},
 			{
-				"color": "rgba(255, 255, 255, 0.05)",
 				"step": 0.15,
+				"color": "rgba(255, 255, 255, 0.05)",
 				"alpha": 0.05
 			},
 			{
-				"color": "rgba(255, 255, 255, 0.2)",
 				"step": 0.3,
+				"color": "rgba(255, 255, 255, 0.2)",
 				"alpha": 0.2
 			},
 			{
-				"color": "rgba(255, 255, 255, 0.8)",
 				"step": 0.7,
+				"color": "rgba(255, 255, 255, 0.8)",
 				"alpha": 0.8
 			},
 			{
-				"color": "rgba(255, 255, 255, 0.95)",
 				"step": 0.85,
+				"color": "rgba(255, 255, 255, 0.95)",
 				"alpha": 0.95
 			},
 			{
-				"color": "rgba(255, 255, 255, 1)",
 				"step": 1,
+				"color": "rgba(255, 255, 255, 1)",
 				"alpha": 1
 			}
 		]

package/themes/calendarDark/struct.json

@@ -1398,129 +1398,129 @@
 	"gradient": {
 		"gradientBlack": [
 			{
-				"color": "rgba(0, 0, 0, 0)",
 				"step": 0,
+				"color": "rgba(0, 0, 0, 0)",
 				"alpha": 0
 			},
 			{
-				"color": "rgba(0, 0, 0, 0.02)",
 				"step": 0.15,
+				"color": "rgba(0, 0, 0, 0.02)",
 				"alpha": 0.02
 			},
 			{
-				"color": "rgba(0, 0, 0, 0.08)",
 				"step": 0.3,
+				"color": "rgba(0, 0, 0, 0.08)",
 				"alpha": 0.08
 			},
 			{
-				"color": "rgba(0, 0, 0, 0.32)",
 				"step": 0.7,
+				"color": "rgba(0, 0, 0, 0.32)",
 				"alpha": 0.32
 			},
 			{
-				"color": "rgba(0, 0, 0, 0.38)",
 				"step": 0.85,
+				"color": "rgba(0, 0, 0, 0.38)",
 				"alpha": 0.38
 			},
 			{
-				"color": "rgba(0, 0, 0, 0.4)",
 				"step": 1,
+				"color": "rgba(0, 0, 0, 0.4)",
 				"alpha": 0.4
 			}
 		],
 		"gradientWhite": [
 			{
-				"color": "rgba(255, 255, 255, 0)",
 				"step": 0,
+				"color": "rgba(255, 255, 255, 0)",
 				"alpha": 0
 			},
 			{
-				"color": "rgba(255, 255, 255, 0.05)",
 				"step": 0.15,
+				"color": "rgba(255, 255, 255, 0.05)",
 				"alpha": 0.05
 			},
 			{
-				"color": "rgba(255, 255, 255, 0.2)",
 				"step": 0.3,
+				"color": "rgba(255, 255, 255, 0.2)",
 				"alpha": 0.2
 			},
 			{
-				"color": "rgba(255, 255, 255, 0.8)",
 				"step": 0.7,
+				"color": "rgba(255, 255, 255, 0.8)",
 				"alpha": 0.8
 			},
 			{
-				"color": "rgba(255, 255, 255, 0.95)",
 				"step": 0.85,
+				"color": "rgba(255, 255, 255, 0.95)",
 				"alpha": 0.95
 			},
 			{
-				"color": "rgba(255, 255, 255, 1)",
 				"step": 1,
+				"color": "rgba(255, 255, 255, 1)",
 				"alpha": 1
 			}
 		],
 		"gradientTint": [
 			{
-				"color": "rgba(246, 247, 248, 0)",
 				"step": 0,
+				"color": "rgba(246, 247, 248, 0)",
 				"alpha": 0
 			},
 			{
-				"color": "rgba(246, 247, 248, 0.05)",
 				"step": 0.15,
+				"color": "rgba(246, 247, 248, 0.05)",
 				"alpha": 0.05
 			},
 			{
-				"color": "rgba(246, 247, 248, 0.2)",
 				"step": 0.3,
+				"color": "rgba(246, 247, 248, 0.2)",
 				"alpha": 0.2
 			},
 			{
-				"color": "rgba(246, 247, 248, 0.8)",
 				"step": 0.7,
+				"color": "rgba(246, 247, 248, 0.8)",
 				"alpha": 0.8
 			},
 			{
-				"color": "rgba(246, 247, 248, 0.95)",
 				"step": 0.85,
+				"color": "rgba(246, 247, 248, 0.95)",
 				"alpha": 0.95
 			},
 			{
-				"color": "rgba(246, 247, 248, 1)",
 				"step": 1,
+				"color": "rgba(246, 247, 248, 1)",
 				"alpha": 1
 			}
 		],
 		"gradient": [
 			{
-				"color": "rgba(255, 255, 255, 0)",
 				"step": 0,
+				"color": "rgba(255, 255, 255, 0)",
 				"alpha": 0
 			},
 			{
-				"color": "rgba(255, 255, 255, 0.05)",
 				"step": 0.15,
+				"color": "rgba(255, 255, 255, 0.05)",
 				"alpha": 0.05
 			},
 			{
-				"color": "rgba(255, 255, 255, 0.2)",
 				"step": 0.3,
+				"color": "rgba(255, 255, 255, 0.2)",
 				"alpha": 0.2
 			},
 			{
-				"color": "rgba(255, 255, 255, 0.8)",
 				"step": 0.7,
+				"color": "rgba(255, 255, 255, 0.8)",
 				"alpha": 0.8
 			},
 			{
-				"color": "rgba(255, 255, 255, 0.95)",
 				"step": 0.85,
+				"color": "rgba(255, 255, 255, 0.95)",
 				"alpha": 0.95
 			},
 			{
-				"color": "rgba(255, 255, 255, 1)",
 				"step": 1,
+				"color": "rgba(255, 255, 255, 1)",
 				"alpha": 1
 			}
 		]

package/themes/calls/struct.json

@@ -685,129 +685,129 @@
 	"gradient": {
 		"gradientBlack": [
 			{
-				"color": "rgba(0, 0, 0, 0)",
 				"step": 0,
+				"color": "rgba(0, 0, 0, 0)",
 				"alpha": 0
 			},
 			{
-				"color": "rgba(0, 0, 0, 0.02)",
 				"step": 0.15,
+				"color": "rgba(0, 0, 0, 0.02)",
 				"alpha": 0.02
 			},
 			{
-				"color": "rgba(0, 0, 0, 0.08)",
 				"step": 0.3,
+				"color": "rgba(0, 0, 0, 0.08)",
 				"alpha": 0.08
 			},
 			{
-				"color": "rgba(0, 0, 0, 0.32)",
 				"step": 0.7,
+				"color": "rgba(0, 0, 0, 0.32)",
 				"alpha": 0.32
 			},
 			{
-				"color": "rgba(0, 0, 0, 0.38)",
 				"step": 0.85,
+				"color": "rgba(0, 0, 0, 0.38)",
 				"alpha": 0.38
 			},
 			{
-				"color": "rgba(0, 0, 0, 0.4)",
 				"step": 1,
+				"color": "rgba(0, 0, 0, 0.4)",
 				"alpha": 0.4
 			}
 		],
 		"gradientWhite": [
 			{
-				"color": "rgba(255, 255, 255, 0)",
 				"step": 0,
+				"color": "rgba(255, 255, 255, 0)",
 				"alpha": 0
 			},
 			{
-				"color": "rgba(255, 255, 255, 0.05)",
 				"step": 0.15,
+				"color": "rgba(255, 255, 255, 0.05)",
 				"alpha": 0.05
 			},
 			{
-				"color": "rgba(255, 255, 255, 0.2)",
 				"step": 0.3,
+				"color": "rgba(255, 255, 255, 0.2)",
 				"alpha": 0.2
 			},
 			{
-				"color": "rgba(255, 255, 255, 0.8)",
 				"step": 0.7,
+				"color": "rgba(255, 255, 255, 0.8)",
 				"alpha": 0.8
 			},
 			{
-				"color": "rgba(255, 255, 255, 0.95)",
 				"step": 0.85,
+				"color": "rgba(255, 255, 255, 0.95)",
 				"alpha": 0.95
 			},
 			{
-				"color": "rgba(255, 255, 255, 1)",
 				"step": 1,
+				"color": "rgba(255, 255, 255, 1)",
 				"alpha": 1
 			}
 		],
 		"gradientTint": [
 			{
-				"color": "rgba(37, 37, 37, 0)",
 				"step": 0,
+				"color": "rgba(37, 37, 37, 0)",
 				"alpha": 0
 			},
 			{
-				"color": "rgba(37, 37, 37, 0.05)",
 				"step": 0.15,
+				"color": "rgba(37, 37, 37, 0.05)",
 				"alpha": 0.05
 			},
 			{
-				"color": "rgba(37, 37, 37, 0.2)",
 				"step": 0.3,
+				"color": "rgba(37, 37, 37, 0.2)",
 				"alpha": 0.2
 			},
 			{
-				"color": "rgba(37, 37, 37, 0.8)",
 				"step": 0.7,
+				"color": "rgba(37, 37, 37, 0.8)",
 				"alpha": 0.8
 			},
 			{
-				"color": "rgba(37, 37, 37, 0.95)",
 				"step": 0.85,
+				"color": "rgba(37, 37, 37, 0.95)",
 				"alpha": 0.95
 			},
 			{
-				"color": "rgba(37, 37, 37, 1)",
 				"step": 1,
+				"color": "rgba(37, 37, 37, 1)",
 				"alpha": 1
 			}
 		],
 		"gradient": [
 			{
-				"color": "rgba(35, 35, 36, 0)",
 				"step": 0,
+				"color": "rgba(35, 35, 36, 0)",
 				"alpha": 0
 			},
 			{
-				"color": "rgba(35, 35, 36, 0.05)",
 				"step": 0.15,
+				"color": "rgba(35, 35, 36, 0.05)",
 				"alpha": 0.05
 			},
 			{
-				"color": "rgba(35, 35, 36, 0.2)",
 				"step": 0.3,
+				"color": "rgba(35, 35, 36, 0.2)",
 				"alpha": 0.2
 			},
 			{
-				"color": "rgba(35, 35, 36, 0.8)",
 				"step": 0.7,
+				"color": "rgba(35, 35, 36, 0.8)",
 				"alpha": 0.8
 			},
 			{
-				"color": "rgba(35, 35, 36, 0.95)",
 				"step": 0.85,
+				"color": "rgba(35, 35, 36, 0.95)",
 				"alpha": 0.95
 			},
 			{
-				"color": "rgba(35, 35, 36, 1)",
 				"step": 1,
+				"color": "rgba(35, 35, 36, 1)",
 				"alpha": 1
 			}
 		]