[@mantine/core] Fix autoContrast defined on theme not working in so…

…me components (#5655)
mantinedev · Jan 27, 2024 · 41e282e · 41e282e
1 parent dc732bb
commit 41e282e
Show file tree

Hide file tree

Showing 12 changed files with 36 additions and 10 deletions.
diff --git a/packages/@mantine/core/src/components/Checkbox/Checkbox.story.tsx b/packages/@mantine/core/src/components/Checkbox/Checkbox.story.tsx
@@ -34,7 +34,7 @@ export function AutoContrast() {
         value="hello"
         defaultChecked
         color="lime.4"
-        autoContrast
+        // autoContrast
       />
     </div>
   );

diff --git a/packages/@mantine/core/src/components/Checkbox/Checkbox.tsx b/packages/@mantine/core/src/components/Checkbox/Checkbox.tsx
@@ -8,6 +8,7 @@ import {
   extractStyleProps,
   factory,
   Factory,
+  getAutoContrastValue,
   getContrastColor,
   getRadius,
   getSize,
@@ -110,7 +111,7 @@ const varsResolver = createVarsResolver<CheckboxFactory>(
         '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),
         '--checkbox-icon-color': iconColor
           ? getThemeColor(iconColor, theme)
-          : autoContrast
+          : getAutoContrastValue(autoContrast, theme)
             ? getContrastColor({ color, theme })
             : undefined,
       },

diff --git a/packages/@mantine/core/src/components/Indicator/Indicator.tsx b/packages/@mantine/core/src/components/Indicator/Indicator.tsx
@@ -6,6 +6,7 @@ import {
   ElementProps,
   factory,
   Factory,
+  getAutoContrastValue,
   getContrastColor,
   getRadius,
   getThemeColor,
@@ -100,7 +101,9 @@ const varsResolver = createVarsResolver<IndicatorFactory>(
   (theme, { color, position, offset, size, radius, zIndex, autoContrast }) => ({
     root: {
       '--indicator-color': color ? getThemeColor(color, theme) : undefined,
-      '--indicator-text-color': autoContrast ? getContrastColor({ color, theme }) : undefined,
+      '--indicator-text-color': getAutoContrastValue(autoContrast, theme)
+        ? getContrastColor({ color, theme })
+        : undefined,
       '--indicator-size': rem(size),
       '--indicator-radius': radius === undefined ? undefined : getRadius(radius),
       '--indicator-z-index': zIndex?.toString(),

diff --git a/packages/@mantine/core/src/components/Pagination/Pagination.story.tsx b/packages/@mantine/core/src/components/Pagination/Pagination.story.tsx
@@ -19,7 +19,7 @@ export function DynamicTotal() {
 }
 
 export function AutoContrast() {
-  return <Pagination total={45} color="lime.3" autoContrast />;
+  return <Pagination total={45} color="lime.3" />;
 }
 
 export function Controlled() {

diff --git a/packages/@mantine/core/src/components/Pagination/PaginationRoot/PaginationRoot.tsx b/packages/@mantine/core/src/components/Pagination/PaginationRoot/PaginationRoot.tsx
@@ -8,6 +8,7 @@ import {
   ElementProps,
   factory,
   Factory,
+  getAutoContrastValue,
   getContrastColor,
   getFontSize,
   getRadius,
@@ -105,7 +106,9 @@ const varsResolver = createVarsResolver<PaginationRootFactory>(
       '--pagination-control-size': getSize(size, 'pagination-control-size'),
       '--pagination-control-fz': getFontSize(size),
       '--pagination-active-bg': color ? getThemeColor(color, theme) : undefined,
-      '--pagination-active-color': autoContrast ? getContrastColor({ color, theme }) : undefined,
+      '--pagination-active-color': getAutoContrastValue(autoContrast, theme)
+        ? getContrastColor({ color, theme })
+        : undefined,
     },
   })
 );

diff --git a/packages/@mantine/core/src/components/Progress/ProgressSection/ProgressSection.tsx b/packages/@mantine/core/src/components/Progress/ProgressSection/ProgressSection.tsx
@@ -6,6 +6,7 @@ import {
   ElementProps,
   factory,
   Factory,
+  getAutoContrastValue,
   getContrastColor,
   getThemeColor,
   MantineColor,
@@ -87,7 +88,9 @@ export const ProgressSection = factory<ProgressSectionFactory>((props, ref) => {
       __vars={{
         '--progress-section-width': `${value}%`,
         '--progress-section-color': getThemeColor(color, theme),
-        '--progress-label-color': ctx.autoContrast ? getContrastColor({ color, theme }) : undefined,
+        '--progress-label-color': getAutoContrastValue(ctx.autoContrast, theme)
+          ? getContrastColor({ color, theme })
+          : undefined,
       }}
     />
   );

diff --git a/packages/@mantine/core/src/components/Radio/Radio.tsx b/packages/@mantine/core/src/components/Radio/Radio.tsx
@@ -8,6 +8,7 @@ import {
   extractStyleProps,
   factory,
   Factory,
+  getAutoContrastValue,
   getContrastColor,
   getRadius,
   getSize,
@@ -108,7 +109,7 @@ const varsResolver = createVarsResolver<RadioFactory>(
         '--radio-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),
         '--radio-icon-color': iconColor
           ? getThemeColor(iconColor, theme)
-          : autoContrast
+          : getAutoContrastValue(autoContrast, theme)
             ? getContrastColor({ color, theme })
             : undefined,
         '--radio-icon-size': getSize(size, 'radio-icon-size'),

diff --git a/packages/@mantine/core/src/components/Stepper/Stepper.tsx b/packages/@mantine/core/src/components/Stepper/Stepper.tsx
@@ -6,6 +6,7 @@ import {
   ElementProps,
   factory,
   Factory,
+  getAutoContrastValue,
   getContrastColor,
   getFontSize,
   getRadius,
@@ -129,7 +130,9 @@ const varsResolver = createVarsResolver<StepperFactory>(
   (theme, { color, iconSize, size, contentPadding, radius, autoContrast }) => ({
     root: {
       '--stepper-color': color ? getThemeColor(color, theme) : undefined,
-      '--stepper-icon-color': autoContrast ? getContrastColor({ color, theme }) : undefined,
+      '--stepper-icon-color': getAutoContrastValue(autoContrast, theme)
+        ? getContrastColor({ color, theme })
+        : undefined,
       '--stepper-icon-size':
         iconSize === undefined ? getSize(size, 'stepper-icon-size') : rem(iconSize),
       '--stepper-content-padding': getSpacing(contentPadding),

diff --git a/packages/@mantine/core/src/components/Tabs/Tabs.tsx b/packages/@mantine/core/src/components/Tabs/Tabs.tsx
@@ -7,6 +7,7 @@ import {
   ElementProps,
   factory,
   Factory,
+  getAutoContrastValue,
   getContrastColor,
   getRadius,
   getSafeId,
@@ -116,7 +117,9 @@ const varsResolver = createVarsResolver<TabsFactory>((theme, { radius, color, au
   root: {
     '--tabs-radius': getRadius(radius),
     '--tabs-color': getThemeColor(color, theme),
-    '--tabs-text-color': autoContrast ? getContrastColor({ color, theme }) : undefined,
+    '--tabs-text-color': getAutoContrastValue(autoContrast, theme)
+      ? getContrastColor({ color, theme })
+      : undefined,
   },
 }));
 

diff --git a/packages/@mantine/core/src/components/Timeline/Timeline.tsx b/packages/@mantine/core/src/components/Timeline/Timeline.tsx
@@ -6,6 +6,7 @@ import {
   ElementProps,
   factory,
   Factory,
+  getAutoContrastValue,
   getContrastColor,
   getRadius,
   getThemeColor,
@@ -80,7 +81,9 @@ const varsResolver = createVarsResolver<TimelineFactory>(
       '--tl-line-width': rem(lineWidth),
       '--tl-radius': radius === undefined ? undefined : getRadius(radius),
       '--tl-color': color ? getThemeColor(color, theme) : undefined,
-      '--tl-icon-color': autoContrast ? getContrastColor({ color, theme }) : undefined,
+      '--tl-icon-color': getAutoContrastValue(autoContrast, theme)
+        ? getContrastColor({ color, theme })
+        : undefined,
     },
   })
 );

diff --git a/...c/core/MantineProvider/color-functions/get-auto-contrast-value/get-auto-contrast-value.ts b/...c/core/MantineProvider/color-functions/get-auto-contrast-value/get-auto-contrast-value.ts
@@ -0,0 +1,5 @@
+import type { MantineTheme } from '../../theme.types';
+
+export function getAutoContrastValue(autoContrast: boolean | undefined, theme: MantineTheme) {
+  return typeof autoContrast === 'boolean' ? autoContrast : theme.autoContrast;
+}
diff --git a/packages/@mantine/core/src/core/MantineProvider/color-functions/index.ts b/packages/@mantine/core/src/core/MantineProvider/color-functions/index.ts
@@ -9,6 +9,7 @@ export { darken } from './darken/darken';
 export { lighten } from './lighten/lighten';
 export { luminance, isLightColor } from './luminance/luminance';
 export { getContrastColor, getPrimaryContrastColor } from './get-contrast-color/get-contrast-color';
+export { getAutoContrastValue } from './get-auto-contrast-value/get-auto-contrast-value';
 
 export type { RGBA } from './to-rgba/to-rgba';
 export type {