diff options
13 files changed, 28 insertions, 51 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx index d095323973..6add6e8e1c 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx @@ -9,7 +9,6 @@ import { useAppContext } from '../context'; import { formatAccountNumber } from '../lib/account'; import useActions from '../lib/actionsHook'; import { Box, Button, Flex, Icon, Label, LabelTiny, Spinner, TitleMedium } from '../lib/components'; -import { DeprecatedColors } from '../lib/foundations'; import { formatHtml } from '../lib/html-formatter'; import { IconBadge } from '../lib/icon-badge'; import accountActions from '../redux/account/actions'; @@ -370,7 +369,7 @@ class Login extends React.Component<IProps, IState> { private createFooter() { return ( <Flex $flexDirection="column" $gap="small"> - <LabelTiny color={DeprecatedColors.white60}> + <LabelTiny color="white60"> {messages.pgettext('login-view', 'Don’t have an account number?')} </LabelTiny> <Button onClick={this.props.createNewAccount} disabled={!this.allowCreateAccount()}> @@ -448,7 +447,7 @@ function AccountDropdownItem({ label, onRemove, onSelect, value }: AccountDropdo accountNumber: label, }, )}> - <TitleMedium color={DeprecatedColors.blue80}>{label}</TitleMedium> + <TitleMedium color="blue80">{label}</TitleMedium> </StyledAccountDropdownItemButton> <Box $height="48px" $width="48px" center> <StyledAccountDropdownItemIconButton diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx index eb3b7b905d..6a98cd171e 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx @@ -3,7 +3,6 @@ import styled from 'styled-components'; import { InAppNotificationSubtitle } from '../../shared/notifications'; import { LabelTiny } from '../lib/components'; -import { DeprecatedColors } from '../lib/foundations'; import { formatHtml } from '../lib/html-formatter'; import { ExternalLink } from './ExternalLink'; import { InternalLink } from './InternalLink'; @@ -47,14 +46,14 @@ export const NotificationSubtitle = ({ subtitle, ...props }: NotificationSubtitl if (!Array.isArray(subtitle)) { return ( - <LabelTiny color={DeprecatedColors.white60} {...props}> + <LabelTiny color="white60" {...props}> {formatHtml(subtitle)} </LabelTiny> ); } return ( - <LabelTiny color={DeprecatedColors.white60} {...props}> + <LabelTiny color="white60" {...props}> {subtitle.map((subtitle, index, arr) => { const content = formatSubtitle(subtitle); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx index 24b69409de..70d3fb9f43 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import styled from 'styled-components'; import { Flex, LabelTiny, TitleBig } from '../lib/components'; -import { DeprecatedColors } from '../lib/foundations'; export const HeaderTitle = styled(TitleBig)({ wordWrap: 'break-word', @@ -10,7 +9,7 @@ export const HeaderTitle = styled(TitleBig)({ }); export const HeaderSubTitle = styled(LabelTiny).attrs({ - color: DeprecatedColors.white60, + color: 'white60', })({}); interface SettingsHeaderProps { diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx index 7e54ef3d14..427e1f2fa9 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx @@ -586,7 +586,7 @@ function MacOsSplitTunnelingAvailability({ {messages.pgettext('split-tunneling-view', 'Open System Settings')} </Button.Text> </Button> - <FootnoteMini color={DeprecatedColors.white60}> + <FootnoteMini color="white60"> {messages.pgettext( 'split-tunneling-view', 'Enabled "Full disk access" and still having issues?', diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx index 0b544a1dd5..12c5814494 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx @@ -5,7 +5,6 @@ import { closeToExpiry, formatRemainingTime, hasExpired } from '../../../../shar import { messages } from '../../../../shared/gettext'; import { capitalizeEveryWord } from '../../../../shared/string-helpers'; import { Flex, FootnoteMini } from '../../../lib/components'; -import { DeprecatedColors } from '../../../lib/foundations'; import { useSelector } from '../../../redux/store'; const StyledTimeLeftLabel = styled(FootnoteMini)({ @@ -30,7 +29,7 @@ export const AppMainHeaderDeviceInfo = () => { return ( <Flex $gap="large" $margin={{ top: 'tiny' }}> - <StyledDeviceLabel color={DeprecatedColors.white80}> + <StyledDeviceLabel color="white80"> {sprintf( // TRANSLATORS: A label that will display the newly created device name to inform the user // TRANSLATORS: about it. @@ -43,7 +42,7 @@ export const AppMainHeaderDeviceInfo = () => { )} </StyledDeviceLabel> {accountExpiry && !closeToExpiry(accountExpiry) && !isOutOfTime && ( - <StyledTimeLeftLabel color={DeprecatedColors.white80}> + <StyledTimeLeftLabel color="white80"> {sprintf(messages.pgettext('device-management', 'Time left: %(timeLeft)s'), { timeLeft: formattedExpiry, })} diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx index 4a598fdef7..73de4044e0 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx @@ -1,12 +1,12 @@ import styled from 'styled-components'; import { LabelTiny } from '../../lib/components'; -import { DeprecatedColors, spacings } from '../../lib/foundations'; +import { spacings } from '../../lib/foundations'; export const CellFooter = styled.div({ margin: `${spacings.tiny} ${spacings.large} 0px`, }); export const CellFooterText = styled(LabelTiny).attrs({ - color: DeprecatedColors.white60, + color: 'white60', })({}); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx index ca1b70a8e1..5e044d74bf 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx @@ -2,7 +2,6 @@ import styled from 'styled-components'; import { messages } from '../../../../shared/gettext'; import { BodySmall, Container, Flex, TitleBig, TitleLarge } from '../../../lib/components'; -import { DeprecatedColors } from '../../../lib/foundations'; import { useHistory } from '../../../lib/history'; import { useSelector } from '../../../redux/store'; import { AppNavigationHeader } from '../../'; @@ -44,13 +43,13 @@ export const ChangelogView = () => { {changelog.length ? ( <StyledList as="ul" $flexDirection="column" $gap="medium"> {changelog.map((item, i) => ( - <BodySmall as="li" key={i} color={DeprecatedColors.white60}> + <BodySmall as="li" key={i} color="white60"> {item} </BodySmall> ))} </StyledList> ) : ( - <BodySmall color={DeprecatedColors.white60}> + <BodySmall color="white60"> {messages.pgettext( 'changelog-view', 'No updates or changes were made in this release for this platform.', diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonText.tsx index 8bdaa4ea40..eccc6cfa1d 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonText.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonText.tsx @@ -1,7 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { DeprecatedColors } from '../../../foundations'; import { BodySmallSemiBold, BodySmallSemiBoldProps } from '../../typography'; import { useButtonContext } from '../ButtonContext'; @@ -10,10 +9,5 @@ export const StyledButtonText = styled(BodySmallSemiBold)``; export function ButtonText<T extends React.ElementType = 'span'>(props: ButtonTextProps<T>) { const { disabled } = useButtonContext(); - return ( - <StyledButtonText - color={disabled ? DeprecatedColors.white40 : DeprecatedColors.white} - {...props} - /> - ); + return <StyledButtonText color={disabled ? 'white40' : 'white100'} {...props} />; } diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipText.tsx index dfffdd1d6c..a13f71d5fd 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipText.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipText.tsx @@ -1,6 +1,5 @@ import styled from 'styled-components'; -import { DeprecatedColors } from '../../../foundations'; import { BodySmallSemiBoldProps, LabelTiny } from '../../typography'; import { useFilterChipContext } from '../FilterChipContext'; @@ -12,7 +11,5 @@ export const FilterChipText = <T extends React.ElementType = 'span'>( props: FilterChipTextProps<T>, ) => { const { disabled } = useFilterChipContext(); - return ( - <StyledText color={disabled ? DeprecatedColors.white40 : DeprecatedColors.white} {...props} /> - ); + return <StyledText color={disabled ? 'white40' : 'white100'} {...props} />; }; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/Link.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/Link.tsx index 4af0f60345..2d17c8bed9 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/Link.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/Link.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from 'styled-components'; -import { DeprecatedColors, Radius } from '../../foundations'; +import { Colors, colors, Radius } from '../../foundations'; import { Text, TextProps } from '../typography'; import { LinkIcon } from './components'; @@ -10,7 +10,7 @@ export type LinkProps<T extends React.ElementType = 'a'> = TextProps<T> & { }; const StyledText = styled(Text)<{ - $hoverColor: DeprecatedColors | undefined; + $hoverColor: Colors | undefined; }>((props) => ({ background: 'transparent', cursor: 'default', @@ -24,15 +24,15 @@ const StyledText = styled(Text)<{ }, '&&:focus-visible': { borderRadius: Radius.radius4, - outline: `2px solid ${DeprecatedColors.white}`, + outline: `2px solid ${colors.white60}`, outlineOffset: '2px', }, })); -const getHoverColor = (color: DeprecatedColors | undefined) => { +const getHoverColor = (color: Colors | undefined) => { switch (color) { - case DeprecatedColors.white60: - return DeprecatedColors.white; + case 'white60': + return 'white100'; default: return undefined; } diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemLabel.tsx index 44e5bd732b..05b8ff8790 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemLabel.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemLabel.tsx @@ -1,4 +1,3 @@ -import { DeprecatedColors } from '../../../foundations'; import { LabelTinyProps, TitleMedium } from '../../typography'; import { useListItem } from '../ListItemContext'; @@ -8,7 +7,5 @@ export const ListItemLabel = <E extends React.ElementType = 'span'>( props: ListItemLabelProps<E>, ) => { const { disabled } = useListItem(); - return ( - <TitleMedium color={disabled ? DeprecatedColors.white40 : DeprecatedColors.white} {...props} /> - ); + return <TitleMedium color={disabled ? 'white40' : 'white100'} {...props} />; }; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemText.tsx index 187ca0fb75..5dbad8b066 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemText.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemText.tsx @@ -1,4 +1,3 @@ -import { DeprecatedColors } from '../../../foundations'; import { Text, TextProps } from '../../typography'; import { useListItem } from '../ListItemContext'; @@ -6,11 +5,5 @@ export type ListItemProps<E extends React.ElementType = 'span'> = TextProps<E>; export const ListItemText = <E extends React.ElementType = 'span'>(props: ListItemProps<E>) => { const { disabled } = useListItem(); - return ( - <Text - variant="labelTiny" - color={disabled ? DeprecatedColors.white40 : DeprecatedColors.white60} - {...props} - /> - ); + return <Text variant="labelTiny" color={disabled ? 'white40' : 'white60'} {...props} />; }; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx index 9d15a40c03..5c7bb62949 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx @@ -1,22 +1,23 @@ import React from 'react'; import styled from 'styled-components'; -import { DeprecatedColors, Typography, typography } from '../../foundations'; +import { Colors, colors, Typography, typography } from '../../foundations'; import { PolymorphicProps, TransientProps } from '../../types'; type TextBaseProps = { variant?: Typography; - color?: DeprecatedColors; + color?: Colors; }; export type TextProps<T extends React.ElementType = 'span'> = PolymorphicProps<T, TextBaseProps>; const StyledText = styled.span<TransientProps<TextBaseProps>>( - ({ $variant = 'bodySmall', $color = DeprecatedColors.white }) => { + ({ $variant = 'bodySmall', $color = 'white100' }) => { const { fontFamily, fontSize, fontWeight, lineHeight } = typography[$variant]; + const color = colors[$color]; return ` - --color: ${$color}; - + --color: ${color}; + color: var(--color); font-family: ${fontFamily}; font-size: ${fontSize}; |