feat(plasma-tokens): Add support multiple color in gradient for XML a…

…nd SWIFT themes
salute-developers · Jul 21, 2023 · a4e8113 · a4e8113
1 parent 4bc482a
commit a4e8113
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 34 deletions.
diff --git a/utils/plasma-tokens-native/src/generator/formatters/colorIosSwift.ts b/utils/plasma-tokens-native/src/generator/formatters/colorIosSwift.ts
@@ -97,25 +97,33 @@ const padFormatter = (strings: TemplateStringsArray, ...expressionValues: string
     return finalString.substring(1).replace(/\n/gm, `\n${pads}`);
 };
 
+const getColorToken = (lightColor: string, darkColor: string, pads = ' '.repeat(8)) =>
+    padFormatter`${pads}
+ColorToken(
+    plasmaTokensColorLight: ${lightColor},
+    plasmaTokensColorDark: ${darkColor}
+)`;
+
+const getColorTokenList = (token: Record<ThemeColorType, GradientToken>) => {
+    const tokenCount = token.Light.colors.length === token.Dark.colors.length ? token.Light.colors.length : 0;
+
+    return [...Array(tokenCount).keys()]
+        .map((index) => getColorToken(token.Light.colors[index], token.Dark.colors[index]))
+        .join(',\n        ');
+};
+
 const getPlasmaGradient = (
     token: Record<ThemeColorType, GradientToken>,
     startPoint: string,
     endPoint: string,
     type: GradientType,
-    locations: [number, number],
+    locations: number[],
     pads = ' '.repeat(8),
 ) => padFormatter`${pads}
 GradientToken(
     type: ${type},
     colors: [
-        ColorToken(
-            plasmaTokensColorLight: ${token.Light.startColor},
-            plasmaTokensColorDark: ${token.Dark.startColor}
-        ),
-        ColorToken(
-            plasmaTokensColorLight: ${token.Light.endColor},
-            plasmaTokensColorDark: ${token.Dark.endColor}
-        )
+        ${getColorTokenList(token)}
     ],
     locations: [${locations?.join(', ')}],
     startPoint: ${startPoint},

diff --git a/utils/plasma-tokens-native/src/generator/formatters/colorXML.ts b/utils/plasma-tokens-native/src/generator/formatters/colorXML.ts
@@ -42,11 +42,16 @@ interface GradientToken {
     locations: [number, number];
 }
 
+const getColors = (color: string, name: string, layerNumber: string, index: number) =>
+    `<color name="${name}${layerNumber}_color_${index}">${color}</color>`;
+
+const getLocations = (location: number, name: string, layerNumber: string, index: number) =>
+    `<item name="${name}${layerNumber}_position_${index}" format="float" type="dimen">${location}</item>`;
+
 const getGradient = ({ name, type, layerNumber, comment, colors, locations }: GradientToken) => {
-    const base = `<color name="${name}${layerNumber}_color_0">${colors[0]}</color><!-- ${comment} -->
-  <color name="${name}${layerNumber}_color_1">${colors[1]}</color>
-  <item name="${name}${layerNumber}_position_0" format="float" type="dimen">${locations[0]}</item>
-  <item name="${name}${layerNumber}_position_1" format="float" type="dimen">${locations[1]}</item>`;
+    const base = `<!-- ${comment} -->
+  ${colors.map((color, index) => getColors(color, name, layerNumber, index)).join('\n  ')}
+  ${locations.map((location, index) => getLocations(location, name, layerNumber, index)).join('\n  ')}`;
 
     if (type === '.linear') {
         return getLinearGradient(name, base, layerNumber);
@@ -58,7 +63,7 @@ const getGradient = ({ name, type, layerNumber, comment, colors, locations }: Gr
 };
 
 const getGradientToken = (name: string, gradient: any, comment?: string, layer?: number) => {
-    const { startColor, endColor, locations, type } = gradient;
+    const { colors, locations, type } = gradient;
     const layerNumber = layer !== undefined ? `_z${layer}` : '';
 
     if (!type) {
@@ -69,7 +74,7 @@ const getGradientToken = (name: string, gradient: any, comment?: string, layer?:
         name,
         type,
         comment,
-        colors: [startColor, endColor],
+        colors,
         locations,
         layerNumber,
     });
@@ -88,9 +93,9 @@ const getGradientToken = (name: string, gradient: any, comment?: string, layer?:
 };
 
 const getTokenValue = (token: TransformedToken, themeName: string) => {
-    const prefix = themeName.includes('asdk') ? 'sdkit_' : ''; // INFO: Условие специально для темы asdk
+    const hardcodePrefix = themeName.includes('styles_salute') ? 'sdkit_' : ''; // INFO: Условие специально для темы saluteStyles
 
-    const name = token.name.replace(`color_${themeName}_`, prefix);
+    const name = token.name.replace(`color_${themeName}_`, hardcodePrefix);
     const { comment } = token;
     const { value } = token.original;
 

diff --git a/utils/plasma-tokens-native/src/generator/transformers/gradientSwift.ts b/utils/plasma-tokens-native/src/generator/transformers/gradientSwift.ts
@@ -20,22 +20,21 @@ const getUIColor = (color: string) => {
     return `UIColor(red: ${red}, green: ${green}, blue: ${blue}, alpha: ${alpha})`;
 };
 
-const getGradientStops = (colors: Array<string>) => [getUIColor(colors[0]), getUIColor(colors[1])];
+const getGradientStops = (colors: Array<string>) => colors.map(getUIColor);
 
 const getVectorPoints = (startPoint: Point, endPoint: Point) => ({
     startPoint: `CGPoint(x: ${startPoint.x}, y: ${startPoint.y})`,
     endPoint: `CGPoint(x: ${endPoint.x}, y: ${endPoint.y})`,
 });
 
 const getGradient = (value: any) => {
-    const { type, colors, locations, startPoint: rawStartPoint, endPoint: rawEndPoint } = value;
-    const [startColor, endColor] = getGradientStops(colors);
+    const { type, colors: colorsBase, locations, startPoint: rawStartPoint, endPoint: rawEndPoint } = value;
+    const colors = getGradientStops(colorsBase);
     const { startPoint, endPoint } = getVectorPoints(rawStartPoint, rawEndPoint);
 
     return {
         type,
-        startColor,
-        endColor,
+        colors,
         locations,
         startPoint,
         endPoint,
@@ -67,14 +66,13 @@ const getLinearVectorPointsLegacy = (angle: string) => {
 };
 // TODO: Убрать после того, как переделаем схемы на новый формат градиентов
 const getLinearGradientLegacy = (value: any) => {
-    const { angle, colors, locations = ['0', '100'] } = value;
-    const [startColor, endColor] = getGradientStops(colors);
+    const { angle, colors: colorsBase, locations = ['0', '100'] } = value;
+    const colors = getGradientStops(colorsBase);
     const { startPoint, endPoint } = getLinearVectorPointsLegacy(angle);
 
     return {
         type: '.linear',
-        startColor,
-        endColor,
+        colors,
         locations: locations.map((item: string) => Number((Number(item) / 100).toFixed(2))),
         startPoint,
         endPoint,

diff --git a/utils/plasma-tokens-native/src/generator/transformers/gradientXML.ts b/utils/plasma-tokens-native/src/generator/transformers/gradientXML.ts
@@ -12,16 +12,15 @@ const getAndroidColor = (color: string) => {
     return getNormalizeValue(hexColor);
 };
 
-const getGradientStops = (colors: Array<string>) => [getAndroidColor(colors[0]), getAndroidColor(colors[1])];
+const getGradientStops = (colors: Array<string>) => colors.map(getAndroidColor);
 
 const getGradient = (value: any) => {
-    const { type, colors, locations } = value;
-    const [startColor, endColor] = getGradientStops(colors);
+    const { type, colors: colorsBase, locations } = value;
+    const colors = getGradientStops(colorsBase);
 
     const base = {
         type,
-        startColor,
-        endColor,
+        colors,
         locations,
     };
 

diff --git a/utils/plasma-tokens-native/src/types.ts b/utils/plasma-tokens-native/src/types.ts
@@ -23,12 +23,11 @@ export type ThemeColorType = 'Light' | 'Dark';
 export type GradientType = '.linear' | '.radial';
 
 export interface GradientToken {
-    startColor: string;
-    endColor: string;
+    colors: string[];
     startPoint: string;
     endPoint: string;
     type: GradientType;
-    locations: [number, number];
+    locations: number[];
 }
 
 export type ThemeTokenDataGroups = Record<string, TokenDataGroup<string> | undefined>;