Merge pull request #516 from zendesk/gianluca/GG-3786-theme-colors

fix: fixed styles with dark background and light brand color
zendesk · Aug 16, 2024 · 285aff6 · 285aff6
2 parents 38a130e + d173e64
commit 285aff6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/assets/shared-bundle.js b/assets/shared-bundle.js
diff --git a/src/modules/shared/garden-theme/createTheme.ts b/src/modules/shared/garden-theme/createTheme.ts
@@ -1,10 +1,13 @@
+import type { IButtonProps } from "@zendeskgarden/react-buttons";
 import type { IGardenTheme } from "@zendeskgarden/react-theming";
 import { DEFAULT_THEME } from "@zendeskgarden/react-theming";
 import { css } from "styled-components";
 
 export interface Settings {
+  background_color: string;
   text_color: string;
   brand_color: string;
+  brand_text_color: string;
   link_color: string;
   hover_link_color: string;
   visited_link_color: string;
@@ -16,6 +19,7 @@ export function createTheme(settings: Settings): IGardenTheme {
     rtl: document.dir === "rtl",
     colors: {
       ...DEFAULT_THEME.colors,
+      background: settings.background_color,
       foreground: settings.text_color,
       primaryHue: settings.brand_color,
     },
@@ -33,6 +37,13 @@ export function createTheme(settings: Settings): IGardenTheme {
           color: ${settings.visited_link_color};
         }
       `,
+      "buttons.button": css`
+        ${(props: IButtonProps) =>
+          props.isPrimary &&
+          css`
+            color: ${settings.brand_text_color};
+          `}
+      `,
     },
   };
 }