From d285702a544647029f14275fa96e348e505c0244 Mon Sep 17 00:00:00 2001
From: Christopher Lord <christopher.lord@grafana.com>
Date: Thu, 16 Jan 2025 11:07:25 -0700
Subject: [PATCH] add global css variables

---
 .../src/themes/GlobalStyles/elements.ts       |  3 +
 .../themes/GlobalStyles/globalCssVariables.ts | 55 +++++++++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 packages/grafana-ui/src/themes/GlobalStyles/globalCssVariables.ts

diff --git a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
index 9ef39baccde..4b16f3f1d77 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
@@ -4,6 +4,8 @@ import { GrafanaTheme2, ThemeTypographyVariant } from '@grafana/data';
 
 import { getFocusStyles } from '../mixins';
 
+import { createGlobalCssVars } from './globalCssVariables';
+
 export function getElementStyles(theme: GrafanaTheme2) {
   return css({
     '*, *::before, *::after': {
@@ -32,6 +34,7 @@ export function getElementStyles(theme: GrafanaTheme2) {
 
     ':root': {
       colorScheme: theme.colors.mode,
+      ...createGlobalCssVars(theme),
     },
 
     body: {
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/globalCssVariables.ts b/packages/grafana-ui/src/themes/GlobalStyles/globalCssVariables.ts
new file mode 100644
index 00000000000..ed8ad74b673
--- /dev/null
+++ b/packages/grafana-ui/src/themes/GlobalStyles/globalCssVariables.ts
@@ -0,0 +1,55 @@
+import { GrafanaTheme2 } from '@grafana/data';
+
+const richColors = ['primary', 'secondary', 'info', 'error', 'success', 'warning'] as const;
+/**
+ * Creates CSS variables from the active Grafana theme.
+ * @param theme The Grafana theme to extract variables from
+ * @returns Object containing CSS variable declarations
+ */
+export function createGlobalCssVars(theme: GrafanaTheme2) {
+  const vars: {
+    [key: `--grafana-${'color' | 'gradient'}-${string}`]: string;
+  } = {};
+
+  // Process rich colors (primary, secondary, info, etc)
+  for (const colorName of richColors) {
+    const color = theme.colors[colorName];
+    vars[`--grafana-color-${colorName}-main`] = color.main;
+    vars[`--grafana-color-${colorName}-text`] = color.text;
+    vars[`--grafana-color-${colorName}-border`] = color.border;
+    vars[`--grafana-color-${colorName}-shade`] = color.shade;
+    vars[`--grafana-color-${colorName}-transparent`] = color.transparent;
+    vars[`--grafana-color-${colorName}-border-transparent`] = color.borderTransparent;
+    vars[`--grafana-color-${colorName}-contrast-text`] = color.contrastText;
+  }
+
+  for (const [key, value] of Object.entries(theme.colors.text)) {
+    vars[`--grafana-color-text-${key}`] = value;
+  }
+
+  for (const [key, value] of Object.entries(theme.colors.background)) {
+    vars[`--grafana-color-bg-${key}`] = value;
+  }
+
+  for (const [key, value] of Object.entries(theme.colors.border)) {
+    vars[`--grafana-color-border-${key}`] = value;
+  }
+
+  for (const [key, value] of Object.entries(theme.colors.action)) {
+    if (typeof value === 'string') {
+      vars[`--grafana-color-action-${key}`] = value;
+    } else if (typeof value === 'number') {
+      vars[`--grafana-color-action-${key}`] = value.toString();
+    }
+  }
+
+  for (const [key, value] of Object.entries(theme.colors.gradients)) {
+    vars[`--grafana-gradient-${key}`] = value;
+  }
+
+  vars['--grafana-color-hover-factor'] = theme.colors.hoverFactor.toString();
+  vars['--grafana-color-contrast-threshold'] = theme.colors.contrastThreshold.toString();
+  vars['--grafana-color-tonal-offset'] = theme.colors.tonalOffset.toString();
+
+  return vars;
+}