Merge pull request #129 from smithbk/issue-657-fix-json-gradient-on-c…

…olors Issue 657: fix JSON lm and dm Gradient-Background OnColor
finos · Oct 11, 2023 · fa667ba · fa667ba
2 parents 7a98b13 + b01b76e
commit fa667ba
Showing 1 changed file with 7 additions and 7 deletions.
diff --git a/src/code/jsonGenerator.ts b/src/code/jsonGenerator.ts
@@ -585,17 +585,16 @@ export class JSONGenerator {
 
     private getGradientBackgrounds(theme: ColorTheme, lm: boolean): any {
         const self = this;
-        const getShadeName = function (prop: PropertyColorShade, lm: boolean): string | undefined {
+        const getShadeName = function (prop: PropertyColorShade, lm: boolean, onColor?: boolean): string | undefined {
             const shade = prop.getValue();
             if (shade) {
-                return self.getShadeName(shade, lm, theme);
+                return self.getShadeName(shade, lm, theme, onColor);
             }
         };
-        const fcn2 = function (lm: boolean, fromName?: string, toName?: string): any {
-            let color, onColor, button, onButton, icon, hotlink: string | undefined;
+        const fcn2 = function (lm: boolean, fromName?: string, toName?: string, onColor?: string): any {
+            let color, button, onButton, icon, hotlink: string | undefined;
             if (fromName && toName) {
                 color = `linear-gradient(90deg, ${fromName} 0%, ${toName} 100%)`;
-                onColor = fromName;
             }
             button = self.getPropShadeName(theme.button, lm, theme);
             onButton = self.getPropShadeName(theme.button, lm, theme, true);
@@ -614,14 +613,15 @@ export class JSONGenerator {
             }
         };
         const fcn = function (gc: GradientColors, lm: boolean): any {
-            return fcn2(lm, getShadeName(gc.from, lm), getShadeName(gc.to, lm));
+            return fcn2(lm, getShadeName(gc.from, lm), getShadeName(gc.to, lm), getShadeName(gc.from, lm, true));
         };
         const gradient3FromName = lm ? "{Core-Colors.White.Color}" : "{Core-Colors.Gray.Color.900}";
         const gradient3ToName = lm ? "{Core-Colors.Gray.Color.200}" : "{Core-Colors.Gray.Color.900}";
+        const gradient3OnColor = lm ? "{Text.Dark}" : "{Core-Colors.Gray.On-Color.900}";
         return {
             "Gradient-1": fcn(theme.gradient1, lm),
             "Gradient-2": fcn(theme.gradient2, lm),
-            "Gradient-3": fcn2(lm, gradient3FromName, gradient3ToName),
+            "Gradient-3": fcn2(lm, gradient3FromName, gradient3ToName, gradient3OnColor),
         };
     }