[@mantine/core] Expose --mantine-primary-color-x CSS variables (#5331)

mantinedev · Dec 4, 2023 · 31f2682 · 31f2682
1 parent dd146de
commit 31f2682
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/...ntine/core/src/core/MantineProvider/MantineCssVariables/default-css-variables-resolver.ts b/...ntine/core/src/core/MantineProvider/MantineCssVariables/default-css-variables-resolver.ts
@@ -80,6 +80,11 @@ export const defaultCssVariablesResolver: CSSVariablesResolver = (theme) => {
   assignSizeVariables(result.variables, theme.shadows, 'shadow');
   assignSizeVariables(result.variables, theme.radius, 'radius');
 
+  theme.colors[theme.primaryColor].forEach((_, index) => {
+    result.variables[`--mantine-primary-color-${index}`] =
+      `var(--mantine-color-${theme.primaryColor}-${index})`;
+  });
+
   keys(theme.colors).forEach((color) => {
     theme.colors[color].forEach((shade, index) => {
       result.variables[`--mantine-color-${color}-${index}`] = shade;

diff --git a/packages/@mantine/core/src/core/MantineProvider/global.css b/packages/@mantine/core/src/core/MantineProvider/global.css
@@ -119,6 +119,16 @@ body {
     Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
   --mantine-heading-font-weight: 700;
   --mantine-radius-default: calc(0.25rem * var(--mantine-scale));
+  --mantine-primary-color-0: var(--mantine-color-blue-0);
+  --mantine-primary-color-1: var(--mantine-color-blue-1);
+  --mantine-primary-color-2: var(--mantine-color-blue-2);
+  --mantine-primary-color-3: var(--mantine-color-blue-3);
+  --mantine-primary-color-4: var(--mantine-color-blue-4);
+  --mantine-primary-color-5: var(--mantine-color-blue-5);
+  --mantine-primary-color-6: var(--mantine-color-blue-6);
+  --mantine-primary-color-7: var(--mantine-color-blue-7);
+  --mantine-primary-color-8: var(--mantine-color-blue-8);
+  --mantine-primary-color-9: var(--mantine-color-blue-9);
   --mantine-primary-color-filled: var(--mantine-color-blue-filled);
   --mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover);
   --mantine-primary-color-light: var(--mantine-color-blue-light);