From b8b18b230421b5d5cb2c76f269fe6f1f74bc85a6 Mon Sep 17 00:00:00 2001 From: izhulien Date: Tue, 30 Aug 2022 03:46:56 +0300 Subject: [PATCH] [@mantine/core] ActionIcon: Fix broken styles for loading state. --- .../src/ActionIcon/ActionIcon.styles.ts | 8 - .../src/ActionIcon/ActionIcon.tsx | 3 +- .../theme/functions/fns/variant/variant.ts | 207 ++++++++++-------- 3 files changed, 119 insertions(+), 99 deletions(-) diff --git a/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts b/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts index 86aea970ad8..bb766eb0f16 100644 --- a/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts +++ b/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts @@ -42,14 +42,6 @@ interface GetVariantStyles { } function getVariantStyles({ variant, theme, color, gradient }: GetVariantStyles) { - if (variant === 'transparent') { - return { - border: '1px solid transparent', - color: theme.fn.variant({ variant: 'subtle', color }).color, - backgroundColor: 'transparent', - }; - } - const colors = theme.fn.variant({ color, variant, gradient }); if (variant === 'gradient') { diff --git a/src/mantine-core/src/ActionIcon/ActionIcon.tsx b/src/mantine-core/src/ActionIcon/ActionIcon.tsx index 8caeb0ee1f6..deb8ba21be7 100644 --- a/src/mantine-core/src/ActionIcon/ActionIcon.tsx +++ b/src/mantine-core/src/ActionIcon/ActionIcon.tsx @@ -71,7 +71,8 @@ export const _ActionIcon = forwardRef((props { size, radius, color, variant, gradient }, { name: 'ActionIcon', unstyled } ); - const colors = theme.fn.variant({ color, variant: 'light' }); + + const colors = theme.fn.variant({ color, variant }); const loader = ( diff --git a/src/mantine-styles/src/theme/functions/fns/variant/variant.ts b/src/mantine-styles/src/theme/functions/fns/variant/variant.ts index 23da39d1f97..96ab9819fce 100644 --- a/src/mantine-styles/src/theme/functions/fns/variant/variant.ts +++ b/src/mantine-styles/src/theme/functions/fns/variant/variant.ts @@ -1,3 +1,4 @@ +import { CSSProperties } from 'react'; import type { MantineColor, MantineGradient, MantineThemeBase } from '../../../types'; import { rgba } from '../rgba/rgba'; import { themeColor } from '../theme-color/theme-color'; @@ -5,17 +6,25 @@ import { primaryShade } from '../primary-shade/primary-shade'; import { gradient } from '../gradient/gradient'; export interface VariantInput { - variant: 'filled' | 'light' | 'outline' | 'default' | 'gradient' | 'white' | 'subtle'; + variant: + | 'filled' + | 'light' + | 'outline' + | 'default' + | 'gradient' + | 'white' + | 'subtle' + | 'transparent'; color?: MantineColor; gradient?: MantineGradient; primaryFallback?: boolean; } export interface VariantOutput { - border: string; - background: string; - color: string; - hover: string; + border: CSSProperties['borderColor']; + background: CSSProperties['backgroundColor']; + color: CSSProperties['color']; + hover: CSSProperties['backgroundColor']; } interface ColorInfo { @@ -46,91 +55,109 @@ export function variant(theme: MantineThemeBase) { return ({ variant, color, gradient, primaryFallback }: VariantInput): VariantOutput => { const colorInfo = getColorIndexInfo(color, theme); - if (variant === 'light') { - return { - border: 'transparent', - background: rgba( - getThemeColor(color, theme.colorScheme === 'dark' ? 8 : 0, primaryFallback, false), - theme.colorScheme === 'dark' ? 0.2 : 1 - ), - color: - color === 'dark' - ? theme.colorScheme === 'dark' - ? theme.colors.dark[0] - : theme.colors.dark[9] - : getThemeColor(color, theme.colorScheme === 'dark' ? 2 : getPrimaryShade('light')), - hover: rgba( - getThemeColor(color, theme.colorScheme === 'dark' ? 7 : 1, primaryFallback, false), - theme.colorScheme === 'dark' ? 0.25 : 0.65 - ), - }; + switch (variant) { + case 'light': { + return { + border: 'transparent', + background: rgba( + getThemeColor(color, theme.colorScheme === 'dark' ? 8 : 0, primaryFallback, false), + theme.colorScheme === 'dark' ? 0.2 : 1 + ), + color: + color === 'dark' + ? theme.colorScheme === 'dark' + ? theme.colors.dark[0] + : theme.colors.dark[9] + : getThemeColor(color, theme.colorScheme === 'dark' ? 2 : getPrimaryShade('light')), + hover: rgba( + getThemeColor(color, theme.colorScheme === 'dark' ? 7 : 1, primaryFallback, false), + theme.colorScheme === 'dark' ? 0.25 : 0.65 + ), + }; + } + + case 'subtle': { + return { + border: 'transparent', + background: 'transparent', + color: + color === 'dark' + ? theme.colorScheme === 'dark' + ? theme.colors.dark[0] + : theme.colors.dark[9] + : getThemeColor(color, theme.colorScheme === 'dark' ? 2 : getPrimaryShade('light')), + hover: rgba( + getThemeColor(color, theme.colorScheme === 'dark' ? 8 : 0, primaryFallback, false), + theme.colorScheme === 'dark' ? 0.2 : 1 + ), + }; + } + + case 'outline': { + return { + border: getThemeColor(color, theme.colorScheme === 'dark' ? 5 : getPrimaryShade('light')), + background: 'transparent', + color: getThemeColor(color, theme.colorScheme === 'dark' ? 5 : getPrimaryShade('light')), + hover: + theme.colorScheme === 'dark' + ? rgba(getThemeColor(color, 5, primaryFallback, false), 0.05) + : rgba(getThemeColor(color, 0, primaryFallback, false), 0.35), + }; + } + + case 'default': { + return { + border: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4], + background: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white, + color: theme.colorScheme === 'dark' ? theme.white : theme.black, + hover: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[0], + }; + } + + case 'white': { + return { + border: 'transparent', + background: theme.white, + color: getThemeColor(color, getPrimaryShade()), + hover: null, + }; + } + + case 'transparent': { + return { + border: 'transparent', + color: + color === 'dark' + ? theme.colorScheme === 'dark' + ? theme.colors.dark[0] + : theme.colors.dark[9] + : getThemeColor(color, theme.colorScheme === 'dark' ? 2 : getPrimaryShade('light')), + background: 'transparent', + hover: null, + }; + } + + case 'gradient': { + return { + background: getGradient(gradient), + color: theme.white, + border: 'transparent', + hover: null, + }; + } + + default: { + const _primaryShade = getPrimaryShade(); + const _shade = colorInfo.isSplittedColor ? colorInfo.shade : _primaryShade; + const _color = colorInfo.isSplittedColor ? colorInfo.key : color; + + return { + border: 'transparent', + background: getThemeColor(_color, _shade, primaryFallback), + color: theme.white, + hover: getThemeColor(_color, _shade === 9 ? 8 : _shade + 1), + }; + } } - - if (variant === 'default') { - return { - border: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4], - background: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white, - color: theme.colorScheme === 'dark' ? theme.white : theme.black, - hover: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[0], - }; - } - - if (variant === 'white') { - return { - border: 'transparent', - background: theme.white, - color: getThemeColor(color, getPrimaryShade()), - hover: null, - }; - } - - if (variant === 'outline') { - return { - border: getThemeColor(color, theme.colorScheme === 'dark' ? 5 : getPrimaryShade('light')), - background: 'transparent', - color: getThemeColor(color, theme.colorScheme === 'dark' ? 5 : getPrimaryShade('light')), - hover: - theme.colorScheme === 'dark' - ? rgba(getThemeColor(color, 5, primaryFallback, false), 0.05) - : rgba(getThemeColor(color, 0, primaryFallback, false), 0.35), - }; - } - - if (variant === 'gradient') { - return { - background: getGradient(gradient), - color: theme.white, - border: 'transparent', - hover: null, - }; - } - - if (variant === 'subtle') { - return { - border: 'transparent', - background: 'transparent', - color: - color === 'dark' - ? theme.colorScheme === 'dark' - ? theme.colors.dark[0] - : theme.colors.dark[9] - : getThemeColor(color, theme.colorScheme === 'dark' ? 2 : getPrimaryShade('light')), - hover: rgba( - getThemeColor(color, theme.colorScheme === 'dark' ? 8 : 0, primaryFallback, false), - theme.colorScheme === 'dark' ? 0.2 : 1 - ), - }; - } - - const _primaryShade = getPrimaryShade(); - const _shade = colorInfo.isSplittedColor ? colorInfo.shade : _primaryShade; - const _color = colorInfo.isSplittedColor ? colorInfo.key : color; - - return { - border: 'transparent', - background: getThemeColor(_color, _shade, primaryFallback), - color: theme.white, - hover: getThemeColor(_color, _shade === 9 ? 8 : _shade + 1), - }; }; }