fix: use figma contrast colors (#2841)

tolgee · Jan 14, 2025 · 38df038 · 38df038
1 parent 88ca695
commit 38df038
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/webapp/src/ThemeProvider.tsx b/webapp/src/ThemeProvider.tsx
@@ -11,6 +11,7 @@ import RighteousLatinWoff2 from './fonts/Righteous/righteous-latin.woff2';
 import RubikWoff2 from './fonts/Rubik/Rubik-Regular.woff2';
 import { colors } from './colors';
 import { tolgeeColors, tolgeePalette } from 'figmaTheme';
+import { fromFigmaColor } from 'tg.fixtures/figma';
 
 const LOCALSTORAGE_THEME_MODE = 'themeMode';
 
@@ -124,13 +125,13 @@ const getTheme = (mode: PaletteMode) => {
     },
     palette: {
       mode,
-      primary: tPalette.primary,
+      primary: fromFigmaColor(tPalette.primary),
       primaryText: c.primaryText,
-      secondary: tPalette.secondary,
+      secondary: fromFigmaColor(tPalette.secondary),
       default: createColor(c.default),
-      info: tPalette.info,
-      warning: tPalette.warning,
-      error: tPalette.error,
+      info: fromFigmaColor(tPalette.info),
+      warning: fromFigmaColor(tPalette.warning),
+      error: fromFigmaColor(tPalette.error),
       common: {
         white: c.white,
       },

diff --git a/webapp/src/fixtures/figma.ts b/webapp/src/fixtures/figma.ts
@@ -0,0 +1,23 @@
+import { PaletteColorOptions } from '@mui/material';
+
+type FigmaColor = {
+  main: string;
+  dark: string;
+  light: string;
+  contrast: string;
+};
+
+/**
+ * Transforms color from figma to mui theme format
+ */
+export const fromFigmaColor = ({
+  main,
+  dark,
+  light,
+  contrast,
+}: FigmaColor): PaletteColorOptions => ({
+  main,
+  dark,
+  light,
+  contrastText: contrast,
+});