feat/tokenized-gradients: fix gradient token helper

VKCOM · Sep 24, 2024 · 4624626 · 4624626
1 parent 6eb7fc0
commit 4624626
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 20 deletions.
diff --git a/src/build/helpers/getGradientPointsFromColor.ts b/src/build/helpers/getGradientPointsFromColor.ts
@@ -41,12 +41,12 @@ export function getGradientPointsFromColor(
 ): GradientPoints {
 	const gradientPointData = typeof colorArg === 'function' ? colorArg() : { value: colorArg };
 
-	const colorRGB: string = color(gradientPointData.value).rgb().array().join(', ');
+	const colorRGB: string = color(gradientPointData.value).rgb().array().slice(0, 3).join(', ');
 	const colorAlpha = color(gradientPointData.value).alpha();
 
 	return opacityPoints
 		.map(([pointOpacity, pointCoordinate]) => {
-			const targetOpacity = colorAlpha < 1 ? colorAlpha : pointOpacity;
+			const targetOpacity = colorAlpha * pointOpacity;
 			const colorValue = `rgba(${colorRGB}, ${Math.round(targetOpacity * opacityMultiplier * 1000) / 1000})`;
 
 			if (typeof gradientPointData.key === 'string') {

diff --git a/src/build/helpers/tokenHelpers.test.ts b/src/build/helpers/tokenHelpers.test.ts
@@ -35,18 +35,53 @@ describe('tokenHelpers', () => {
 	});
 
 	describe('gradient', () => {
-		test('calculates gradient string', () => {
+		test('calculates gradient string from 1 color with variable', () => {
+			const gradientToken = gradient(['blue']);
+			const gradientValue = gradientToken({});
+
+			expect(gradientValue).toEqual(
+				[
+					'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%',
+					'rgba(0, 0, 255, 1) 100%',
+				].join(', '),
+			);
+		});
+
+		test('calculates gradient string from 1 color with variable', () => {
+			const gradientToken = gradient([namedAlias('colorIconPrimary')]);
+			const gradientValue = gradientToken({ colors: { colorIconPrimary: 'blue' } as any });
+
+			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%',
+					'var(--vkui--color_icon_primary, rgba(0, 0, 255, 1)) 100%',
+				].join(', '),
+			);
+		});
+
+		test('calculates gradient string from 2 colors', () => {
 			const gradientToken = gradient([namedAlias('colorIconPrimary'), 'transparent']);
 			const gradientValue = gradientToken({ colors: { colorIconPrimary: 'blue' } as any });
 
 			expect(gradientValue).toEqual(
-				'var(--vkui--color_icon_primary, rgba(0, 0, 255, 1)) 0%, rgba(0, 0, 0, 0, 0) 100%',
+				'var(--vkui--color_icon_primary, rgba(0, 0, 255, 1)) 0%, rgba(0, 0, 0, 0) 100%',
 			);
 		});
 
-		test('fails if bad number of arguments is given', () => {
-			expect(() => gradient([namedAlias('colorIconPrimary')])).toThrowError(
-				'Gradient stops length (1) is not equal to the number of opacity points given (2)',
+		test('calculates gradient string from 3 colors', () => {
+			const gradientToken = gradient(['blue', 'black', 'red']);
+			const gradientValue = gradientToken({});
+
+			expect(gradientValue).toEqual(
+				'rgba(0, 0, 255, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 0, 0, 1) 100%',
 			);
 		});
 	});

diff --git a/src/build/helpers/tokenHelpers.ts b/src/build/helpers/tokenHelpers.ts
@@ -3,7 +3,12 @@ import type { Property } from 'csstype';
 import { ThemeDescription } from '@/interfaces/general';
 import { Token } from '@/interfaces/general/tools/tokenValue';
 
-import { getGradientPointsFromColor, makeGradientPointRaw } from './getGradientPointsFromColor';
+import {
+	defaultOpacityPoints,
+	getGradientPointsFromColor,
+	makeGradientPointRaw,
+	OpacityPoints,
+} from './getGradientPointsFromColor';
 
 export type TokenFunction<T extends ThemeDescription> = (theme: Partial<T>) => Token<any, T>;
 export type NamedTokenFunction<T extends ThemeDescription> = (
@@ -32,25 +37,26 @@ export function staticRef<T>(value: Token<T, any>): T {
 	return value;
 }
 
+function makeOpacityPoints(count: number): OpacityPoints {
+	const result: OpacityPoints = [];
+
+	for (let i = 0; i < count; i++) {
+		const percent = Math.round(i * (1 / (count - 1)) * 100);
+		result.push([1, percent]);
+	}
+
+	return result;
+}
+
 export function gradient<T extends ThemeDescription>(
 	stops: (Property.Color | NamedTokenFunction<T>)[],
-	opacityPoints: OpacityPoint[] = [
-		[1, 0],
-		[1, 100],
-	],
 ): TokenFunction<T> {
-	if (stops.length !== opacityPoints.length) {
-		throw new Error(
-			`Gradient stops length (${
-				stops.length
-			}) is not equal to the number of opacity points given (${opacityPoints.length})`,
-		);
-	}
+	const opacityPoints = stops.length > 1 ? makeOpacityPoints(stops.length) : defaultOpacityPoints;
 
 	return (theme) => {
 		return opacityPoints
 			.map(([pointOpacity, pointCoordinate], index) => {
-				const stop = stops[index];
+				const stop = stops[index] ?? stops[stops.length - 1];
 				const [stopKey, stopValue] = typeof stop === 'function' ? stop(theme) : [undefined, stop];
 
 				const pointRaw = makeGradientPointRaw(stopValue, stopKey);