[@mantine/core] Migrate components to theme.fn.variant from theme.fn.…

…themeColor
mantinedev · Aug 5, 2022 · c9b5e7e · c9b5e7e
1 parent 9eab2e3
commit c9b5e7e
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 14 deletions.
diff --git a/src/mantine-core/src/Indicator/Indicator.styles.ts b/src/mantine-core/src/Indicator/Indicator.styles.ts
@@ -87,11 +87,8 @@ export default createStyles(
       paddingLeft: withLabel ? theme.spacing.xs / 2 : 0,
       paddingRight: withLabel ? theme.spacing.xs / 2 : 0,
       borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),
-      backgroundColor: theme.fn.themeColor(
-        color || theme.primaryColor,
-        theme.fn.primaryShade(),
-        false
-      ),
+      backgroundColor: theme.fn.variant({ variant: 'filled', primaryFallback: false, color })
+        .background,
       border: withBorder
         ? `2px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white}`
         : undefined,

diff --git a/src/mantine-core/src/Loader/Loader.tsx b/src/mantine-core/src/Loader/Loader.tsx
@@ -49,14 +49,13 @@ export function Loader(props: LoaderProps) {
   );
   const theme = useMantineTheme();
   const defaultLoader = variant in LOADERS ? variant : theme.loader;
-  const _color = color || theme.primaryColor;
 
   return (
     <Box
       role="presentation"
       component={LOADERS[defaultLoader] || LOADERS.bars}
       size={theme.fn.size({ size, sizes })}
-      color={_color in theme.colors ? theme.fn.themeColor(_color, theme.fn.primaryShade()) : color}
+      color={theme.fn.variant({ variant: 'filled', primaryFallback: false, color }).background}
       {...others}
     />
   );

diff --git a/src/mantine-core/src/Menu/MenuItem/MenuItem.styles.ts b/src/mantine-core/src/Menu/MenuItem/MenuItem.styles.ts
@@ -21,7 +21,7 @@ export default createStyles((theme, { color, radius }: MenuItemStylesParams) =>
     cursor: 'pointer',
     borderRadius: theme.fn.radius(radius),
     color: color
-      ? theme.fn.themeColor(color, theme.colorScheme === 'dark' ? 5 : 7)
+      ? theme.fn.variant({ variant: 'filled', primaryFallback: false, color }).background
       : theme.colorScheme === 'dark'
       ? theme.colors.dark[0]
       : theme.black,

diff --git a/src/mantine-core/src/Progress/Progress.styles.ts b/src/mantine-core/src/Progress/Progress.styles.ts
@@ -40,11 +40,11 @@ export default createStyles(
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
-      backgroundColor: theme.fn.themeColor(
-        color || theme.primaryColor,
-        theme.fn.primaryShade(),
-        false
-      ),
+      backgroundColor: theme.fn.variant({
+        variant: 'filled',
+        primaryFallback: false,
+        color: color || theme.primaryColor,
+      }).background,
       transition: 'width 100ms linear',
       animation: animate ? `${stripesAnimation} 1000ms linear infinite` : 'none',
       backgroundSize: '20px 20px',

diff --git a/src/mantine-core/src/Progress/Progress.tsx b/src/mantine-core/src/Progress/Progress.tsx
@@ -92,7 +92,11 @@ export const Progress = forwardRef<HTMLDivElement, ProgressProps>((props, ref) =
           sx={{
             width: `${section.value}%`,
             left: `${section.accumulated}%`,
-            backgroundColor: theme.fn.themeColor(section.color, theme.fn.primaryShade(), false),
+            backgroundColor: theme.fn.variant({
+              variant: 'filled',
+              primaryFallback: false,
+              color: section.color || theme.primaryColor,
+            }).background,
           }}
         >
           {section.label && <Text className={classes.label}>{section.label}</Text>}

diff --git a/src/mantine-core/src/Text/Text.story.tsx b/src/mantine-core/src/Text/Text.story.tsx
@@ -6,3 +6,7 @@ export default { title: 'Text' };
 export function WithNumberAsSize() {
   return <Text size={112}>112px text</Text>;
 }
+
+export function ColorIndex() {
+  return <Text color="red.1">Red 1 text</Text>;
+}