Mirrors/trezor-suite
2
0
Fork 0
mirror of https://github.com/trezor/trezor-suite.git synced 2026-03-01 04:54:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(suite): make better mapping for colors

Browse Source
This commit is contained in:
Peter Sanderson
2024-02-07 12:59:15 +01:00
committed by Peter Sanderson
parent 2a14a5ca80
commit 481c82f56e
2 changed files with 37 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
packages/components/src/components/buttons/buttonStyleUtils.ts
View File

@@ -1,5 +1,6 @@
import { css, DefaultTheme } from 'styled-components';
import { Color, Elevation, spacings, spacingsPx } from '@trezor/theme';
import { capitalizeFirstLetter } from '../../../../utils/src/capitalizeFirstLetter';
export type ButtonVariant =
| 'primary'
@@ -11,48 +12,30 @@ export type ButtonVariant =
export type ButtonSize = 'large' | 'medium' | 'small' | 'tiny';
export type IconAlignment = 'left' | 'right';
export const mapElevationToBackgroundTertiaryNormal: Record<Elevation, Color> = {
'-1': 'interactionBackgroundTertiaryDefaultHoverOnElevation3', // For example left menu is negative elevation
const mapElevationToButtonBackground = ({
elevation,
variant,
state,
}: {
elevation: Elevation;
variant: 'destructive' | 'tertiary' | 'info' | 'warning';
state: 'normal' | 'hover';
}): Color => {
const capitalizedVariant = capitalizeFirstLetter(variant);
const capitalizedState = capitalizeFirstLetter(state);
// Button lies always on elevation so for example Button that lies has elevation 0, lies on elevation -1.
// This is why the values here a shifted by 1.
0: 'interactionBackgroundTertiaryDefaultNormalOnElevationNegative',
1: 'interactionBackgroundTertiaryDefaultNormalOnElevation0',
2: 'interactionBackgroundTertiaryDefaultNormalOnElevation1',
3: 'interactionBackgroundTertiaryDefaultNormalOnElevation2',
};
const map: Record<Elevation, Color> = {
'-1': `interactionBackground${capitalizedVariant}DefaultHoverOnElevation3`, // For example left menu is negative elevation
export const mapElevationToBackgroundTertiaryHover: Record<Elevation, Color> = {
'-1': 'interactionBackgroundTertiaryDefaultHoverOnElevation3', // This is here just to satisfy Typescript mapping
// Button lies always on elevation so for example Button that lies has elevation 0, lies on elevation -1.
// This is why the values here a shifted by 1.
0: `interactionBackground${capitalizedVariant}Default${capitalizedState}OnElevationNegative`,
1: `interactionBackground${capitalizedVariant}Default${capitalizedState}OnElevation0`,
2: `interactionBackground${capitalizedVariant}Default${capitalizedState}OnElevation1`,
3: `interactionBackground${capitalizedVariant}Default${capitalizedState}OnElevation2`,
};
// Button lies always on elevation so for example Button that lies has elevation 0, lies on elevation -1.
// This is why the values here a shifted by 1.
0: 'interactionBackgroundTertiaryDefaultHoverOnElevationNegative',
1: 'interactionBackgroundTertiaryDefaultHoverOnElevation0',
2: 'interactionBackgroundTertiaryDefaultHoverOnElevation1',
3: 'interactionBackgroundTertiaryDefaultHoverOnElevation2',
};
export const mapElevationToBackgroundInfoNormal: Record<Elevation, Color> = {
'-1': 'interactionBackgroundInfoDefaultHoverOnElevation3', // For example left menu is negative elevation
// Button lies always on elevation so for example Button that lies has elevation 0, lies on elevation -1.
// This is why the values here a shifted by 1.
0: 'interactionBackgroundInfoDefaultNormalOnElevationNegative',
1: 'interactionBackgroundInfoDefaultNormalOnElevation0',
2: 'interactionBackgroundInfoDefaultNormalOnElevation1',
3: 'interactionBackgroundInfoDefaultNormalOnElevation2',
};
export const mapElevationToBackgroundInfoHover: Record<Elevation, Color> = {
'-1': 'interactionBackgroundInfoDefaultHoverOnElevation3', // This is here just to satisfy Typescript mapping
// Button lies always on elevation so for example Button that lies has elevation 0, lies on elevation -1.
// This is why the values here a shifted by 1.
0: 'interactionBackgroundInfoDefaultHoverOnElevationNegative',
1: 'interactionBackgroundInfoDefaultHoverOnElevation0',
2: 'interactionBackgroundInfoDefaultHoverOnElevation1',
3: 'interactionBackgroundInfoDefaultHoverOnElevation2',
return map[elevation];
};
export const getPadding = (size: ButtonSize, hasLabel?: boolean) => {
@@ -104,7 +87,10 @@ export const getIconSize = (size: ButtonSize) => {
}
};
export const getVariantStyle = (variant: ButtonVariant, elevation: Elevation) => {
export const getVariantStyle = (
variant: ButtonVariant,
elevation: Elevation,
): ReturnType<typeof css> => {
switch (variant) {
case 'primary':
return css`
@@ -132,24 +118,29 @@ export const getVariantStyle = (variant: ButtonVariant, elevation: Elevation) =>
case 'tertiary':
return css`
background: ${({ theme }) =>
theme[mapElevationToBackgroundTertiaryNormal[elevation]]};
theme[mapElevationToButtonBackground({ elevation, variant, state: 'normal' })]};
color: ${({ theme }) => theme.textOnTertiary};
:hover,
:active {
background: ${({ theme }) =>
theme[mapElevationToBackgroundTertiaryHover[elevation]]};
theme[
mapElevationToButtonBackground({ elevation, variant, state: 'hover' })
]};
}
`;
case 'info':
return css`
background: ${({ theme }) => theme[mapElevationToBackgroundInfoNormal[elevation]]};
background: ${({ theme }) =>
theme[mapElevationToButtonBackground({ elevation, variant, state: 'normal' })]};
color: ${({ theme }) => theme.textAlertBlue};
:hover,
:active {
background: ${({ theme }) =>
theme[mapElevationToBackgroundInfoHover[elevation]]};
theme[
mapElevationToButtonBackground({ elevation, variant, state: 'hover' })
]};
}
`;
case 'warning':

3
packages/utils/src/capitalizeFirstLetter.ts
View File

@@ -1 +1,2 @@
export const capitalizeFirstLetter = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
export const capitalizeFirstLetter = <T extends string = string>(str: T): Capitalize<T> =>
(str.charAt(0).toUpperCase() + str.slice(1)) as Capitalize<T>;