Expose all coreui color definitions as css custom properties.

VEuPathDB · Nov 22, 2024 · d3d6966 · d3d6966
1 parent d1db6f9
commit d3d6966
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/packages/libs/coreui/src/components/theming/UIThemeProvider.tsx b/packages/libs/coreui/src/components/theming/UIThemeProvider.tsx
@@ -3,6 +3,7 @@ import { css, Global, ThemeProvider } from '@emotion/react';
 import { useCoreUIFonts } from '../../hooks';
 
 import { UITheme } from './types';
+import colors from '../../definitions/colors';
 
 export type UIThemeProviderProps = {
   theme: UITheme;
@@ -21,6 +22,15 @@ export default function UIThemeProvider({
       <Global
         styles={css`
           :root {
+            ${Object.entries(colors).flatMap(([colorName, byHueOrValue]) =>
+              typeof byHueOrValue === 'string'
+                ? [`--coreui-${colorName}: ${byHueOrValue};`]
+                : Object.entries(byHueOrValue).map(
+                    ([hueName, colorValue]) =>
+                      `--coreui-${colorName}-${hueName}: ${colorValue};`
+                  )
+            )}
+
             --coreui-color-primary: ${theme.palette.primary.hue[
               theme.palette.primary.level
             ]};