diff options
| author | Oliver <oliver@mohlin.dev> | 2025-05-02 14:34:05 +0200 |
|---|---|---|
| committer | Tobias Järvelöv <tobias.jarvelov@mullvad.net> | 2025-05-19 14:28:48 +0200 |
| commit | 3f5e1c8a32ad127224f2b4f409e9c87006f2862b (patch) | |
| tree | 7824cc92e592836f5b954064b7652ff3ac7e00e2 | |
| parent | b70c47ce36f7e27c9a73315df249ea92ef690fbd (diff) | |
| download | mullvadvpn-3f5e1c8a32ad127224f2b4f409e9c87006f2862b.tar.xz mullvadvpn-3f5e1c8a32ad127224f2b4f409e9c87006f2862b.zip | |
Update color token names for consistency
82 files changed, 289 insertions, 293 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx index 5a60b716cb..aacef7f662 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx @@ -28,12 +28,12 @@ const AccountRowText = styled.span({ export const AccountRowLabel = styled(AccountRowText)(tinyText, { lineHeight: '20px', marginBottom: '5px', - color: colors.white60, + color: colors.whiteAlpha60, }); export const AccountRowValue = styled(AccountRowText)(normalText, { fontWeight: 600, - color: colors.white100, + color: colors.white, }); export const DeviceRowValue = styled(AccountRowValue)({ @@ -41,7 +41,7 @@ export const DeviceRowValue = styled(AccountRowValue)({ }); export const AccountOutOfTime = styled(AccountRowValue)({ - color: colors.brandRed, + color: colors.red, }); export const StyledDeviceNameRow = styled.div({ diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx index a5dde00d11..0d5842cdeb 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx @@ -39,7 +39,7 @@ const StyledTestResultCircle = styled.div<{ $result: boolean }>((props) => ({ width: '10px', height: '10px', borderRadius: '50%', - backgroundColor: props.$result ? colors.brandGreen : colors.brandRed, + backgroundColor: props.$result ? colors.green : colors.red, marginRight: spacings.small, })); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx index 6bf589376f..4a8e9f8b64 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx @@ -18,7 +18,7 @@ const StyledIcon = styled(Icon)({ alignSelf: 'stretch', justifyContent: 'center', '&&:hover': { - backgroundColor: colors.white100, + backgroundColor: colors.white, }, }); @@ -27,7 +27,7 @@ export default function ChevronButton(props: IProps) { return ( <Button {...otherProps}> - <StyledIcon color="white60" icon={up ? 'chevron-up' : 'chevron-down'} /> + <StyledIcon color="whiteAlpha60" icon={up ? 'chevron-up' : 'chevron-down'} /> </Button> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx index 0f1a7d4a71..504e55eba5 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx @@ -70,7 +70,7 @@ export default function ClipboardLabel(props: IProps) { </IconButton> )} {justCopied ? ( - <Icon icon="checkmark" color="brandGreen"></Icon> + <Icon icon="checkmark" color="green"></Icon> ) : ( <IconButton onClick={onCopy} diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx index e79c1fd8b2..4ab61b87e4 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx @@ -114,7 +114,7 @@ const StyledMenu = styled.div<StyledMenuProps>((props) => { right: props.$align === 'left' ? 'auto' : iconMargin, padding: '7px 4px', background: colors.blue40, - border: `1px solid ${colors.brandDarkBlue}`, + border: `1px solid ${colors.darkBlue}`, borderRadius: '8px', zIndex: 1, }; @@ -127,17 +127,17 @@ const StyledMenuItem = styled.button(smallText, (props) => ({ background: 'transparent', border: 'none', textAlign: 'left', - color: props.disabled ? colors.white40 : colors.white100, + color: props.disabled ? colors.whiteAlpha40 : colors.white, '&&:hover': { - background: props.disabled ? 'transparent' : colors.brandBlue, + background: props.disabled ? 'transparent' : colors.blue, }, })); const StyledSeparator = styled.hr({ height: '1px', border: 'none', - backgroundColor: colors.brandDarkBlue, + backgroundColor: colors.darkBlue, margin: '4px 9px', }); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx index ba9118b79f..920bafb328 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx @@ -18,7 +18,7 @@ export const StyledCustomScrollbars = styled(CustomScrollbars)({ export const StyledContainer = styled(Container)({ paddingTop: '22px', minHeight: '100%', - backgroundColor: colors.brandDarkBlue, + backgroundColor: colors.darkBlue, }); export const StyledBody = styled.div({ @@ -31,12 +31,12 @@ export const StyledBody = styled.div({ export const StyledTitle = styled.span(bigText, { lineHeight: '38px', marginBottom: '8px', - color: colors.white100, + color: colors.white, }); export const StyledMessage = styled.span(smallText, { marginBottom: measurements.rowVerticalMargin, - color: colors.white100, + color: colors.white, }); export function DeviceRevokedView() { diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx index 61a08d7c3f..1a01189059 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx @@ -19,7 +19,7 @@ const Subtitle = styled.span({ fontSize: '14px', lineHeight: '20px', margin: `0 ${measurements.horizontalViewMargin}`, - color: colors.white40, + color: colors.whiteAlpha40, textAlign: 'center', }); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx index ad3c090ed8..e4267d76dc 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx @@ -36,7 +36,7 @@ export const StyledCustomScrollbars = styled(CustomScrollbars)({ export const StyledContainer = styled(Container)({ paddingTop: '22px', minHeight: '100%', - backgroundColor: colors.brandDarkBlue, + backgroundColor: colors.darkBlue, }); export const StyledBody = styled.div({ @@ -54,7 +54,7 @@ export const StyledTitle = styled.span(hugeText, { export const StyledLabel = styled.span(tinyText, { lineHeight: '20px', - color: colors.white100, + color: colors.white, marginBottom: '9px', }); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorViewStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorViewStyles.tsx index da9b41597f..b39e4900fb 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorViewStyles.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorViewStyles.tsx @@ -12,7 +12,7 @@ export const StyledAccountNumberLabel = styled(AccountNumberLabel)({ lineHeight: '20px', fontSize: '20px', fontWeight: 700, - color: colors.white100, + color: colors.white, }); export const StyledModalCellContainer = styled(Cell.Container)({ @@ -28,7 +28,7 @@ export const StyledCustomScrollbars = styled(CustomScrollbars)({ export const StyledContainer = styled(Container)({ paddingTop: '22px', minHeight: '100%', - backgroundColor: colors.brandDarkBlue, + backgroundColor: colors.darkBlue, }); export const StyledBody = styled.div({ @@ -45,11 +45,11 @@ export const StyledTitle = styled.span(hugeText, { export const StyledMessage = styled.span(tinyText, { marginBottom: '20px', - color: colors.white100, + color: colors.white, }); export const StyledAccountNumberMessage = styled.span(tinyText, { - color: colors.white100, + color: colors.white, }); export const StyledAccountNumberContainer = styled.div({ @@ -60,5 +60,5 @@ export const StyledAccountNumberContainer = styled.div({ export const StyledDeviceLabel = styled.span(tinyText, { lineHeight: '20px', - color: colors.white100, + color: colors.white, }); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx index ff05d43510..12c0d40ad4 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx @@ -28,7 +28,7 @@ import { NavigationContainer } from './NavigationContainer'; import { NavigationScrollbars } from './NavigationScrollbars'; const StyledNavigationScrollbars = styled(NavigationScrollbars)({ - backgroundColor: colors.brandDarkBlue, + backgroundColor: colors.darkBlue, flex: 1, }); @@ -230,7 +230,7 @@ function FilterByOwnership(props: IFilterByOwnershipProps) { <AriaLabel> <Cell.Label>{messages.pgettext('filter-view', 'Ownership')}</Cell.Label> </AriaLabel> - <Icon color="white80" icon={expanded ? 'chevron-up' : 'chevron-down'} /> + <Icon color="whiteAlpha80" icon={expanded ? 'chevron-up' : 'chevron-down'} /> </Cell.CellButton> <Accordion expanded={expanded}> @@ -276,7 +276,7 @@ function FilterByProvider(props: IFilterByProviderProps) { <> <Cell.CellButton onClick={toggleExpanded}> <Cell.Label>{messages.pgettext('filter-view', 'Providers')}</Cell.Label> - <Icon color="white80" icon={expanded ? 'chevron-up' : 'chevron-down'} /> + <Icon color="whiteAlpha80" icon={expanded ? 'chevron-up' : 'chevron-down'} /> </Cell.CellButton> <Accordion expanded={expanded}> <CheckboxRow @@ -310,7 +310,7 @@ const StyledCheckbox = styled.div({ display: 'flex', alignItems: 'center', justifyContent: 'center', - backgroundColor: colors.white100, + backgroundColor: colors.white, borderRadius: '4px', }); @@ -323,7 +323,7 @@ const StyledRow = styled(Cell.Row)({ const StyledRowTitle = styled.label<IStyledRowTitleProps>(normalText, (props) => ({ fontWeight: props.$bold ? 600 : 400, - color: colors.white100, + color: colors.white, marginLeft: '22px', })); @@ -341,7 +341,7 @@ function CheckboxRow(props: ICheckboxRowProps) { return ( <StyledRow onClick={onToggle}> <StyledCheckbox role="checkbox" aria-label={props.label} aria-checked={props.checked}> - {props.checked && <Icon icon="checkmark" color="brandGreen" />} + {props.checked && <Icon icon="checkmark" color="green" />} </StyledCheckbox> <StyledRowTitle aria-hidden $bold={props.$bold}> {props.label} diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx index 0eb1442242..43e1434314 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx @@ -26,7 +26,7 @@ export default function Launch() { } const StyledFooter = styled(Footer)({ - backgroundColor: colors.brandBlue, + backgroundColor: colors.blue, transition: 'opacity 250ms ease-in-out', }); @@ -34,14 +34,14 @@ const StyledFooterInner = styled.div({ display: 'flex', flexDirection: 'column', flex: 1, - backgroundColor: colors.brandDarkBlue, + backgroundColor: colors.darkBlue, borderRadius: '8px', margin: 0, padding: '16px', }); const StyledFooterMessage = styled.span(tinyText, { - color: colors.white100, + color: colors.white, margin: `8px 0 ${measurements.buttonVerticalMargin} 0`, }); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx index 67e7963eae..28596536a4 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx @@ -9,7 +9,7 @@ export const Container = styled.div({ display: 'flex', flexDirection: 'column', flex: 1, - backgroundColor: colors.brandBlue, + backgroundColor: colors.blue, overflow: 'hidden', }); @@ -22,7 +22,7 @@ export const Layout = styled.div({ }); export const SettingsContainer = styled(Container)({ - backgroundColor: colors.brandDarkBlue, + backgroundColor: colors.darkBlue, }); export const SettingsNavigationScrollbars = styled(NavigationScrollbars)({ diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx index 63d269d66d..0e86ed9ac7 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx @@ -370,7 +370,7 @@ class Login extends React.Component<IProps, IState> { private createFooter() { return ( <Flex $flexDirection="column" $gap="small"> - <LabelTiny color="white60"> + <LabelTiny color="whiteAlpha60"> {messages.pgettext('login-view', 'Don’t have an account number?')} </LabelTiny> <Button onClick={this.props.createNewAccount} disabled={!this.allowCreateAccount()}> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx index 81b887ef89..0a650ddc90 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx @@ -26,13 +26,13 @@ const baseButtonStyles = { ...buttonReset, width: '100%', height: '100%', - backgroundColor: colors.white60, + backgroundColor: colors.whiteAlpha60, cursor: 'default', '&&:hover': { - backgroundColor: colors.white40, + backgroundColor: colors.whiteAlpha40, }, '&:focus-visible': { - outline: `2px solid ${colors.white100}`, + outline: `2px solid ${colors.white}`, outlineOffset: '-2px', }, }; @@ -54,7 +54,7 @@ export const StyledAccountDropdownTrailingButton = styled.button({ backgroundColor: 'transparent', cursor: 'pointer', '&:focus-visible': { - outline: `2px solid ${colors.white100}`, + outline: `2px solid ${colors.white}`, outlineOffset: '2px', }, }); @@ -79,7 +79,7 @@ export const StyledFooter = styled(Footer)<{ $show: boolean }>((props) => ({ width: '100%', bottom: 0, transform: `translateY(${props.$show ? 0 : 100}%)`, - backgroundColor: colors.brandDarkBlue, + backgroundColor: colors.darkBlue, transition: 'transform 250ms ease-in-out', })); @@ -112,14 +112,14 @@ export const StyledAccountInputGroup = styled.form<IStyledAccountInputGroupProps borderStyle: 'solid', borderRadius: '8px', overflow: 'hidden', - borderColor: props.$error ? colors.red40 : props.$active ? colors.brandDarkBlue : 'transparent', + borderColor: props.$error ? colors.red40 : props.$active ? colors.darkBlue : 'transparent', opacity: props.$editable ? 1 : 0.6, })); export const StyledAccountInputBackdrop = styled.div({ display: 'flex', - backgroundColor: colors.white100, - borderColor: colors.brandDarkBlue, + backgroundColor: colors.white, + borderColor: colors.darkBlue, }); export const StyledInputButton = styled.button<{ $visible: boolean }>((props) => ({ @@ -130,12 +130,12 @@ export const StyledInputButton = styled.button<{ $visible: boolean }>((props) => justifyContent: 'center', opacity: props.$visible ? 1 : 0, transition: 'opacity 250ms ease-in-out', - backgroundColor: colors.brandGreen, + backgroundColor: colors.green, })); export const StyledDropdownSpacer = styled.div({ height: 1, - backgroundColor: colors.brandDarkBlue, + backgroundColor: colors.darkBlue, }); export const StyledTitle = styled.h1(hugeText, { @@ -149,7 +149,7 @@ export const StyledInput = styled(FormattableTextInput)(largeText, { minWidth: 0, borderWidth: 0, padding: '12px 12px 12px', - color: colors.brandBlue, + color: colors.blue, backgroundColor: 'transparent', flex: 1, '&&::placeholder': { @@ -162,19 +162,19 @@ export const StyledBlockMessageContainer = styled.div({ flexDirection: 'column', flex: 1, alignSelf: 'start', - backgroundColor: colors.brandDarkBlue, + backgroundColor: colors.darkBlue, borderRadius: '8px', margin: '5px 16px 10px', padding: '16px', }); export const StyledBlockTitle = styled.div(smallText, { - color: colors.white100, + color: colors.white, marginBottom: '5px', fontWeight: 700, }); export const StyledBlockMessage = styled.div(tinyText, { - color: colors.white100, + color: colors.white, marginBottom: '10px', }); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Modal.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Modal.tsx index 39acbba38f..39deff20c1 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Modal.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Modal.tsx @@ -28,7 +28,7 @@ const ModalContent = styled.div({ }); const ModalBackground = styled.div<{ $visible: boolean }>((props) => ({ - backgroundColor: props.$visible ? colors.black50 : 'transparent', + backgroundColor: props.$visible ? colors.blackAlpha50 : 'transparent', backdropFilter: props.$visible ? 'blur(1.5px)' : '', position: 'absolute', display: 'flex', @@ -128,13 +128,13 @@ const StyledModalAlert = styled.div<{ $visible: boolean; $closing: boolean }>((p return { display: 'flex', flexDirection: 'column', - backgroundColor: colors.brandDarkBlue, + backgroundColor: colors.darkBlue, borderRadius: '11px', padding: '16px 0 16px 16px', maxHeight: '80vh', opacity: props.$visible && !props.$closing ? 1 : 0, transform, - boxShadow: `0px 15px 35px 5px ${colors.black50}`, + boxShadow: `0px 15px 35px 5px ${colors.blackAlpha50}`, transition: 'all 150ms ease-out', }; }); @@ -314,15 +314,15 @@ class ModalAlertImpl extends React.Component<IModalAlertImplProps, IModalAlertSt switch (type) { case ModalAlertType.info: source = 'info-circle'; - color = 'white100'; + color = 'white'; break; case ModalAlertType.caution: source = 'alert-circle'; - color = 'white100'; + color = 'white'; break; case ModalAlertType.warning: source = 'alert-circle'; - color = 'brandRed'; + color = 'red'; break; case ModalAlertType.loading: return <Spinner size="big" />; @@ -343,13 +343,13 @@ class ModalAlertImpl extends React.Component<IModalAlertImplProps, IModalAlertSt } const ModalTitle = styled.h1(normalText, { - color: colors.white100, + color: colors.white, fontWeight: 600, margin: '18px 0 0 0', }); export const ModalMessage = styled.span(tinyText, { - color: colors.white60, + color: colors.whiteAlpha60, marginTop: '16px', [`${ModalTitle} ~ &&`]: { @@ -360,5 +360,5 @@ export const ModalMessage = styled.span(tinyText, { export const ModalMessageList = styled.ul({ listStyle: 'disc outside', paddingLeft: '20px', - color: colors.white80, + color: colors.whiteAlpha80, }); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx index 21b707d367..c8d0c53ca4 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx @@ -12,11 +12,11 @@ import { tinyText } from './common-styles'; const NOTIFICATION_AREA_ID = 'notification-area'; export const NotificationTitle = styled.span(tinyText, { - color: colors.white100, + color: colors.white, }); export const NotificationSubtitleText = styled.span(tinyText, { - color: colors.white60, + color: colors.whiteAlpha60, }); interface INotificationSubtitleProps { @@ -90,9 +90,9 @@ interface INotificationIndicatorProps { } const notificationIndicatorTypeColorMap = { - success: colors.brandGreen, - warning: colors.brandYellow, - error: colors.brandRed, + success: colors.green, + warning: colors.yellow, + error: colors.red, }; export const NotificationIndicator = styled.div<INotificationIndicatorProps>((props) => ({ diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx index 6a98cd171e..0a43452513 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx @@ -46,14 +46,14 @@ export const NotificationSubtitle = ({ subtitle, ...props }: NotificationSubtitl if (!Array.isArray(subtitle)) { return ( - <LabelTiny color="white60" {...props}> + <LabelTiny color="whiteAlpha60" {...props}> {formatHtml(subtitle)} </LabelTiny> ); } return ( - <LabelTiny color="white60" {...props}> + <LabelTiny color="whiteAlpha60" {...props}> {subtitle.map((subtitle, index, arr) => { const content = formatSubtitle(subtitle); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx index a75ad2a2a9..ca7f755e92 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx @@ -153,10 +153,10 @@ const StyledPageIndicator = styled.div<{ $current: boolean }>((props) => ({ width: '8px', height: '8px', borderRadius: '50%', - backgroundColor: props.$current ? colors.white80 : colors.white40, + backgroundColor: props.$current ? colors.whiteAlpha80 : colors.whiteAlpha40, [`${StyledTransparentButton}:hover &&`]: { - backgroundColor: colors.white80, + backgroundColor: colors.whiteAlpha80, }, })); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReportStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReportStyles.tsx index 95152f68d8..10fdbaf505 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReportStyles.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReportStyles.tsx @@ -37,8 +37,8 @@ const input = { flex: 1, borderRadius: '4px', padding: '14px', - color: colors.brandBlue, - backgroundColor: colors.white100, + color: colors.blue, + backgroundColor: colors.white, border: 'none', }; @@ -60,16 +60,16 @@ export const StyledStatusIcon = styled.div({ export const StyledSentMessage = styled.span(smallText, { overflow: 'visible', - color: colors.white60, + color: colors.whiteAlpha60, }); export const StyledThanks = styled.span({ - color: colors.brandGreen, + color: colors.green, }); export const StyledEmail = styled.span({ fontWeight: 900, - color: colors.white100, + color: colors.white, }); export const StyledSendStatus = styled.span(hugeText, { diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucherStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucherStyles.tsx index 09c9c6d24d..b6235a3c7f 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucherStyles.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucherStyles.tsx @@ -5,7 +5,7 @@ import { normalText, smallText, tinyText } from './common-styles'; import FormattableTextInput from './FormattableTextInput'; export const StyledLabel = styled.span(smallText, { - color: colors.white100, + color: colors.white, marginBottom: '9px', }); @@ -15,8 +15,8 @@ export const StyledInput = styled(FormattableTextInput)(normalText, { padding: '14px', fontWeight: 600, lineHeight: '26px', - color: colors.brandBlue, - backgroundColor: colors.white100, + color: colors.blue, + backgroundColor: colors.white, border: 'none', borderRadius: '4px', '&&::placeholder': { @@ -27,7 +27,7 @@ export const StyledInput = styled(FormattableTextInput)(normalText, { export const StyledResponse = styled.span(tinyText, { lineHeight: '20px', marginTop: '8px', - color: colors.white100, + color: colors.white, }); export const StyledProgressResponse = styled(StyledResponse)({ @@ -35,7 +35,7 @@ export const StyledProgressResponse = styled(StyledResponse)({ }); export const StyledErrorResponse = styled(StyledResponse)({ - color: colors.brandRed, + color: colors.red, }); export const StyledEmptyResponse = styled.span({ @@ -46,6 +46,6 @@ export const StyledEmptyResponse = styled.span({ export const StyledTitle = styled.span(smallText, { lineHeight: '22px', fontWeight: 400, - color: colors.white100, + color: colors.white, marginBottom: '5px', }); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx index 44fa9412e1..bf21b535c6 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx @@ -14,7 +14,7 @@ const indicatorStyles: Styles< }; const StyledRelayStatus = styled.div<{ $active: boolean }>(indicatorStyles, (props) => ({ - backgroundColor: props.$active ? colors.brandGreen : colors.brandRed, + backgroundColor: props.$active ? colors.green : colors.red, })); const TickIcon = styled(Cell.CellIcon)({ @@ -29,12 +29,12 @@ interface IProps { export default function RelayStatusIndicator(props: IProps) { return props.selected ? ( - <TickIcon color="white100" icon="checkmark" /> + <TickIcon color="white" icon="checkmark" /> ) : ( <StyledRelayStatus $active={props.active} /> ); } export const SpecialLocationIndicator = styled.div(indicatorStyles, { - backgroundColor: colors.white100, + backgroundColor: colors.white, }); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx index cf7010cde0..edbcb6df97 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx @@ -20,14 +20,14 @@ export const StyledSearchInput = styled.input.attrs({ type: 'text' })({ padding: '9px 38px', margin: 0, lineHeight: '24px', - color: colors.white60, + color: colors.whiteAlpha60, backgroundColor: colors.whiteOnDarkBlue10, '&&::placeholder': { color: colors.whiteOnDarkBlue60, }, '&&:focus': { - color: colors.brandBlue, - backgroundColor: colors.white100, + color: colors.blue, + backgroundColor: colors.white, }, }); @@ -51,7 +51,7 @@ export const StyledSearchIcon = styled(Icon)({ transform: 'translateY(-50%)', left: '8px', [`${StyledSearchInput}:focus ~ &&`]: { - backgroundColor: colors.brandBlue, + backgroundColor: colors.blue, }, }); @@ -96,7 +96,7 @@ export default function SearchBar(props: ISearchBarProps) { onInput={onInput} placeholder={messages.gettext('Search for...')} /> - <StyledSearchIcon icon="search" color="white60" /> + <StyledSearchIcon icon="search" color="whiteAlpha60" /> {props.searchTerm.length > 0 && ( <StyledClearButton variant="secondary" onClick={onClear}> <StyledClearIcon icon="cross-circle" /> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SecuredLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SecuredLabel.tsx index ba960bf0fd..20939571b1 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SecuredLabel.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SecuredLabel.tsx @@ -15,14 +15,14 @@ export enum SecuredDisplayStyle { } const securedDisplayStyleColorMap = { - [SecuredDisplayStyle.securing]: colors.white100, - [SecuredDisplayStyle.securingPq]: colors.white100, - [SecuredDisplayStyle.unsecuring]: colors.white100, - [SecuredDisplayStyle.secured]: colors.brandGreen, - [SecuredDisplayStyle.securedPq]: colors.brandGreen, - [SecuredDisplayStyle.blocked]: colors.white100, - [SecuredDisplayStyle.unsecured]: colors.brandRed, - [SecuredDisplayStyle.failedToSecure]: colors.brandRed, + [SecuredDisplayStyle.securing]: colors.white, + [SecuredDisplayStyle.securingPq]: colors.white, + [SecuredDisplayStyle.unsecuring]: colors.white, + [SecuredDisplayStyle.secured]: colors.green, + [SecuredDisplayStyle.securedPq]: colors.green, + [SecuredDisplayStyle.blocked]: colors.white, + [SecuredDisplayStyle.unsecured]: colors.red, + [SecuredDisplayStyle.failedToSecure]: colors.red, }; const StyledSecuredLabel = styled.span<{ $displayStyle: SecuredDisplayStyle }>((props) => ({ diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx index 70d3fb9f43..57df7e5c7c 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx @@ -9,7 +9,7 @@ export const HeaderTitle = styled(TitleBig)({ }); export const HeaderSubTitle = styled(LabelTiny).attrs({ - color: 'white60', + color: 'whiteAlpha60', })({}); interface SettingsHeaderProps { diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx index bbf8f0f74c..0ca1dbddd3 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx @@ -203,7 +203,7 @@ const StyledStatusTitle = styled.div(normalText, { alignItems: 'center', fontWeight: 'bold', lineHeight: '20px', - color: colors.white100, + color: colors.white, gap: spacings.tiny, }); @@ -231,9 +231,9 @@ function SettingsImportStatus(props: ImportStatusProps) { iconProps = props.status.successful ? { icon: 'checkmark', - color: 'brandGreen', + color: 'green', } - : { icon: 'cross', color: 'brandRed' }; + : { icon: 'cross', color: 'red' }; if (props.status.successful) { subtitle = @@ -273,7 +273,7 @@ function SettingsImportStatus(props: ImportStatusProps) { {iconProps !== undefined && <Icon {...iconProps} size="medium" />} </StyledStatusTitle> {subtitle !== undefined && ( - <LabelTiny data-testid="status-subtitle" color="white60"> + <LabelTiny data-testid="status-subtitle" color="whiteAlpha60"> {subtitle} </LabelTiny> )} diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx index 222471c5e5..33cf7ad739 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx @@ -17,7 +17,7 @@ const StyledTextArea = styled.textarea({ width: '100%', flex: 1, padding: '13px', - color: colors.brandBlue, + color: colors.blue, }); export default function SettingsTextImport() { diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx index cadbc6b166..7ee3277335 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx @@ -202,7 +202,7 @@ function LinuxSplitTunnelingSettings(props: IPlatformSplitTunnelingSettingsProps <ModalAlert isOpen={browseError !== undefined} type={ModalAlertType.warning} - iconColor={colors.brandRed} + iconColor={colors.red} message={sprintf( // TRANSLATORS: Error message showed in a dialog when an application fails to launch. messages.pgettext( @@ -241,7 +241,7 @@ function LinuxApplicationRow(props: ILinuxApplicationRowProps) { const hideWarningDialog = useCallback(() => setShowWarning(false), []); const disabled = props.application.warning === 'launches-elsewhere'; - const warningColor: Colors = disabled ? 'brandRed' : 'brandYellow'; + const warningColor: Colors = disabled ? 'red' : 'yellow'; const warningMessage = disabled ? sprintf( messages.pgettext( @@ -586,7 +586,7 @@ function MacOsSplitTunnelingAvailability({ {messages.pgettext('split-tunneling-view', 'Open System Settings')} </Button.Text> </Button> - <FootnoteMini color="white60"> + <FootnoteMini color="whiteAlpha60"> {messages.pgettext( 'split-tunneling-view', 'Enabled "Full disk access" and still having issues?', diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx index daa6c285df..5ec3c597e1 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx @@ -23,7 +23,7 @@ export const StyledNavigationScrollbars = styled(NavigationScrollbars)({ export const StyledCellButton = styled(Cell.CellButton)<{ $lookDisabled?: boolean }>((props) => ({ '&&:not(:disabled):hover': { - backgroundColor: props.$lookDisabled ? colors.brandBlue : undefined, + backgroundColor: props.$lookDisabled ? colors.blue : undefined, }, })); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Switch.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Switch.tsx index 68b57cdf9f..48c3ff6b1a 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Switch.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Switch.tsx @@ -18,7 +18,7 @@ const SwitchContainer = styled.div<{ disabled: boolean }>((props) => ({ position: 'relative', width: '34px', height: '22px', - borderColor: props.disabled ? colors.white20 : colors.white80, + borderColor: props.disabled ? colors.whiteAlpha20 : colors.whiteAlpha80, borderWidth: '2px', borderStyle: 'solid', borderRadius: '11px', @@ -26,7 +26,7 @@ const SwitchContainer = styled.div<{ disabled: boolean }>((props) => ({ })); const Knob = styled.div<{ $isOn: boolean; disabled: boolean }>((props) => { - let backgroundColor: ColorVariables = props.$isOn ? colors.brandGreen : colors.brandRed; + let backgroundColor: ColorVariables = props.$isOn ? colors.green : colors.red; if (props.disabled) { backgroundColor = props.$isOn ? colors.green40 : colors.red40; } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx index 6839839d6c..5ffdfc0f55 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx @@ -42,7 +42,7 @@ const StyledBody = styled.div({ const StyledTitle = styled.span(bigText, { lineHeight: '38px', margin: `0 ${measurements.horizontalViewMargin} 8px`, - color: colors.white100, + color: colors.white, }); const StyledLabel = styled.span({ @@ -50,7 +50,7 @@ const StyledLabel = styled.span({ fontSize: '12px', fontWeight: 600, lineHeight: '20px', - color: colors.white100, + color: colors.white, margin: `0 ${measurements.horizontalViewMargin} 18px`, }); @@ -74,7 +74,7 @@ const StyledDeviceName = styled.span(normalText, { const StyledDeviceDate = styled.span(tinyText, { fontSize: '10px', lineHeight: '10px', - color: colors.white60, + color: colors.whiteAlpha60, }); export default function TooManyDevices() { @@ -256,7 +256,7 @@ function Device(props: IDeviceProps) { <ModalAlert isOpen={confirmationVisible} type={ModalAlertType.warning} - iconColor={colors.brandRed} + iconColor={colors.red} buttons={[ <Button variant="destructive" key="remove" onClick={onRemove} disabled={deleting}> <Button.Text> @@ -290,7 +290,7 @@ function Device(props: IDeviceProps) { <ModalAlert isOpen={error} type={ModalAlertType.warning} - iconColor={colors.brandRed} + iconColor={colors.red} buttons={[ <Button key="close" onClick={resetError}> <Button.Text>{messages.gettext('Close')}</Button.Text> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/YellowLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/YellowLabel.tsx index c0f40167b0..98c202b901 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/YellowLabel.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/YellowLabel.tsx @@ -5,13 +5,13 @@ import { colors } from '../lib/foundations'; export default styled.span({ display: 'inline-block', fontFamily: 'Open Sans', - color: colors.brandBlue, + color: colors.blue, fontSize: '12px', fontWeight: 800, lineHeight: '20px', padding: '1px 8px', marginLeft: '8px', - background: colors.brandYellow, + background: colors.yellow, borderRadius: '5px', textAlign: 'center', verticalAlign: 'middle', 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 12c5814494..3af5718bbf 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 @@ -29,7 +29,7 @@ export const AppMainHeaderDeviceInfo = () => { return ( <Flex $gap="large" $margin={{ top: 'tiny' }}> - <StyledDeviceLabel color="white80"> + <StyledDeviceLabel color="whiteAlpha80"> {sprintf( // TRANSLATORS: A label that will display the newly created device name to inform the user // TRANSLATORS: about it. @@ -42,7 +42,7 @@ export const AppMainHeaderDeviceInfo = () => { )} </StyledDeviceLabel> {accountExpiry && !closeToExpiry(accountExpiry) && !isOutOfTime && ( - <StyledTimeLeftLabel color="white80"> + <StyledTimeLeftLabel color="whiteAlpha80"> {sprintf(messages.pgettext('device-management', 'Time left: %(timeLeft)s'), { timeLeft: formattedExpiry, })} diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx index 6c7431d91f..9ab01c83ae 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx @@ -15,11 +15,11 @@ interface IStyledCellButtonProps extends React.HTMLAttributes<HTMLButtonElement> const StyledCellButton = styled(Row)<IStyledCellButtonProps>((props) => { const backgroundColor = props.$selected - ? colors.brandGreen + ? colors.green : props.$containedInSection ? colors.blue40 - : colors.brandBlue; - const backgroundColorHover = props.$selected ? colors.brandGreen : colors.blue80; + : colors.blue; + const backgroundColorHover = props.$selected ? colors.green : colors.blue80; return { paddingRight: spacings.medium, 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 73de4044e0..d0cabbacde 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx @@ -8,5 +8,5 @@ export const CellFooter = styled.div({ }); export const CellFooterText = styled(LabelTiny).attrs({ - color: 'white60', + color: 'whiteAlpha60', })({}); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx index adac056d1e..79ff60f774 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx @@ -30,10 +30,9 @@ const StyledInput = styled.input<{ $focused: boolean; $valid?: boolean }>((props border: 'none', width: '100%', height: '100%', - color: - props.$valid === false ? colors.brandRed : props.$focused ? colors.brandBlue : colors.white100, + color: props.$valid === false ? colors.red : props.$focused ? colors.blue : colors.white, '&&::placeholder': { - color: props.$focused ? colors.blue60 : colors.white60, + color: props.$focused ? colors.blue60 : colors.whiteAlpha60, }, })); @@ -179,7 +178,7 @@ export const Input = React.memo(React.forwardRef(InputWithRef)); const InputFrame = styled.div<{ $focused: boolean }>((props) => ({ display: 'flex', flexGrow: 0, - backgroundColor: props.$focused ? colors.white100 : colors.whiteOnBlue10, + backgroundColor: props.$focused ? colors.white : colors.whiteOnBlue10, borderRadius: '4px', padding: '6px 8px', })); @@ -282,7 +281,7 @@ const StyledTextArea = styled.textarea<{ $invalid?: boolean }>(normalText, (prop fontWeight: 400, resize: 'none', padding: '10px 25px 10px 0', - color: props.$invalid ? colors.brandRed : 'auto', + color: props.$invalid ? colors.red : 'auto', })); const StyledInputFiller = styled.div({ @@ -295,7 +294,7 @@ const StyledInputFiller = styled.div({ const StyledIconButton = styled(IconButton)<{ $disabled: boolean }>(({ $disabled }) => ({ ['> div']: { - backgroundColor: $disabled ? colors.blue60 : colors.brandBlue, + backgroundColor: $disabled ? colors.blue60 : colors.blue, }, ['&&:hover > div']: { backgroundColor: $disabled ? colors.blue60 : colors.blue80, diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx index 3a6dca3c1d..5b0070329c 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx @@ -11,7 +11,7 @@ const StyledLabel = styled.div<{ disabled: boolean }>(buttonText, (props) => ({ display: 'flex', margin: '10px 0', flex: 1, - color: props.disabled ? colors.white40 : colors.white100, + color: props.disabled ? colors.whiteAlpha40 : colors.white, textAlign: 'left', [`${LabelContainer} &&`]: { @@ -27,7 +27,7 @@ const StyledLabel = styled.div<{ disabled: boolean }>(buttonText, (props) => ({ })); const StyledSubText = styled.span<{ disabled: boolean }>(tinyText, (props) => ({ - color: props.disabled ? colors.white20 : colors.white60, + color: props.disabled ? colors.whiteAlpha20 : colors.whiteAlpha60, flex: -1, textAlign: 'right', margin: `0 ${spacings.small}`, @@ -56,7 +56,7 @@ const StyledTintedIcon = styled(Icon)<IconProps & { disabled?: boolean }>( const StyledSubLabel = styled.div<{ disabled: boolean }>(tinyText, { display: 'flex', alignItems: 'center', - color: colors.white60, + color: colors.whiteAlpha60, marginBottom: '5px', lineHeight: '14px', height: '14px', diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Row.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Row.tsx index 25ab602e1b..bbf3103994 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Row.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Row.tsx @@ -14,7 +14,7 @@ export const Row = styled.div.withConfig({ })<RowProps>((props) => ({ display: 'flex', alignItems: 'center', - backgroundColor: colors.brandBlue, + backgroundColor: colors.blue, minHeight: measurements.rowMinHeight, paddingLeft: measurements.horizontalViewMargin, paddingRight: measurements.horizontalViewMargin, diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx index 9b9332b301..a21a70c034 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx @@ -23,7 +23,7 @@ interface SectionTitleProps { export const SectionTitle = styled(Row)<SectionTitleProps>(buttonText, (props) => ({ paddingRight: spacings.medium, - color: props.disabled ? colors.white20 : colors.white100, + color: props.disabled ? colors.whiteAlpha20 : colors.white, fontWeight: props.$thin ? 400 : 600, fontSize: props.$thin ? '15px' : '18px', ...(props.$thin ? openSans : sourceSansPro), diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx index dabdd09acd..4dfa25d731 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx @@ -228,9 +228,9 @@ interface StyledCustomContainerProps { } const StyledCustomContainer = styled(Cell.Container)<StyledCustomContainerProps>((props) => ({ - backgroundColor: props.selected ? colors.brandGreen : colors.blue40, + backgroundColor: props.selected ? colors.green : colors.blue40, '&&:hover': { - backgroundColor: props.selected ? colors.brandGreen : colors.brandBlue, + backgroundColor: props.selected ? colors.green : colors.blue, }, })); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsGroup.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsGroup.tsx index 81d6db17c1..777a610ef2 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsGroup.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsGroup.tsx @@ -15,7 +15,7 @@ const StyledContainer = styled.div({ const StyledTitle = styled.h2(tinyText, { display: 'flex', alignItems: 'center', - color: colors.white80, + color: colors.whiteAlpha80, margin: `0 ${measurements.horizontalViewMargin} 8px`, lineHeight: '17px', }); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRadioGroup.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRadioGroup.tsx index 70cc2866b9..38e9ca9369 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRadioGroup.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRadioGroup.tsx @@ -60,7 +60,7 @@ const StyledRadioButton = styled.input.attrs({ type: 'radio' })({ height: '12px', borderRadius: '50%', backgroundColor: 'transparent', - border: `1px ${colors.white100} solid`, + border: `1px ${colors.white} solid`, top: 0, left: 0, }, @@ -71,7 +71,7 @@ const StyledRadioButton = styled.input.attrs({ type: 'radio' })({ width: '8px', height: '8px', borderRadius: '50%', - backgroundColor: colors.white100, + backgroundColor: colors.white, top: '3px', left: '3px', }, @@ -85,7 +85,7 @@ const StyledRadioButtonContainer = styled.div({ }); const StyledRadioButtonLabel = styled.label(smallNormalText, { - color: colors.white100, + color: colors.white, marginLeft: '8px', }); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx index d3473e8214..f177625a85 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx @@ -36,11 +36,11 @@ const StyledSettingsRow = styled.label<{ $invalid: boolean }>((props) => ({ outlineWidth: '1px', borderStyle: 'solid', outlineStyle: 'solid', - borderColor: props.$invalid ? colors.brandRed : 'transparent', - outlineColor: props.$invalid ? colors.brandRed : 'transparent', + borderColor: props.$invalid ? colors.red : 'transparent', + outlineColor: props.$invalid ? colors.red : 'transparent', '&&:focus-within': { - borderColor: props.$invalid ? colors.brandRed : colors.white100, - outlineColor: props.$invalid ? colors.brandRed : colors.white100, + borderColor: props.$invalid ? colors.red : colors.white, + outlineColor: props.$invalid ? colors.red : colors.white, }, })); @@ -61,7 +61,7 @@ const StyledSettingsRowErrorMessage = styled.div(tinyText, { alignItems: 'center', marginLeft: measurements.horizontalViewMargin, marginTop: '5px', - color: colors.white60, + color: colors.whiteAlpha60, }); const StyledErrorMessageAlertIcon = styled(Icon)({ @@ -132,7 +132,7 @@ export function SettingsRow(props: React.PropsWithChildren<IndentedRowProps>) { export function SettingsRowErrorMessage(props: React.PropsWithChildren) { return ( <StyledSettingsRowErrorMessage> - <StyledErrorMessageAlertIcon icon="alert-circle" color="brandRed" size="small" /> + <StyledErrorMessageAlertIcon icon="alert-circle" color="red" size="small" /> {props.children} </StyledSettingsRowErrorMessage> ); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx index 41a115f43d..b81d841f6f 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx @@ -20,13 +20,13 @@ const StyledSelect = styled.div.attrs({ tabIndex: 0 })(smallNormalText, { position: 'relative', background: 'transparent', border: 'none', - color: colors.white100, + color: colors.white, borderRadius: '4px', height: '26px', '&&:focus': { - outline: `1px ${colors.brandDarkBlue} solid`, - backgroundColor: colors.brandBlue, + outline: `1px ${colors.darkBlue} solid`, + backgroundColor: colors.blue, }, }); @@ -37,7 +37,7 @@ const StyledItems = styled.div<{ $direction: 'down' | 'up' }>((props) => ({ top: props.$direction === 'down' ? 'calc(100% + 4px)' : 'auto', bottom: props.$direction === 'up' ? 'calc(100% + 4px)' : 'auto', right: '-1px', - backgroundColor: colors.brandDarkBlue, + backgroundColor: colors.darkBlue, border: `1px ${colors.darkerBlue50} solid`, borderRadius: '4px', padding: '4px 8px', @@ -155,7 +155,7 @@ export function SettingsSelect<T extends string>(props: SettingsSelectProps<T>) <StyledSelectedText> {props.items.find((item) => item.value === value)?.label ?? ''} </StyledSelectedText> - <StyledChevron color="white60" icon="chevron-down" /> + <StyledChevron color="whiteAlpha60" icon="chevron-down" /> </StyledSelectedContainerInner> <StyledInvisibleItems> {props.items.map((item) => ( @@ -220,7 +220,7 @@ const StyledItem = styled.div<{ $selected: boolean }>((props) => ({ paddingRight: '18px', whiteSpace: 'nowrap', '&&:hover': { - backgroundColor: colors.brandBlue, + backgroundColor: colors.blue, }, })); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsTextInput.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsTextInput.tsx index 7f1da42216..aa292632ea 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsTextInput.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsTextInput.tsx @@ -13,7 +13,7 @@ const StyledInput = styled.input(smallNormalText, { textAlign: 'right', background: 'transparent', border: 'none', - color: colors.white100, + color: colors.white, width: '100px', '&&::placeholder': { diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx index 0d804a0f81..502e1afecf 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx @@ -22,7 +22,7 @@ export const SideButton = styled.button<ButtonColors & { $noSeparator?: boolean bottom: 0, height: '50%', width: '1px', - backgroundColor: colors.brandDarkBlue, + backgroundColor: colors.darkBlue, }, }), ); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts index 94827351e7..13499f80bd 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts @@ -22,7 +22,7 @@ export const smallText = { fontSize: '14px', fontWeight: 600, lineHeight: '20px', - color: colors.white80, + color: colors.whiteAlpha80, }; export const smallNormalText = { @@ -45,7 +45,7 @@ export const largeText = { export const buttonText = { ...largeText, - color: colors.white100, + color: colors.white, }; export const bigText = { @@ -60,7 +60,7 @@ export const hugeText = { fontSize: '32px', fontWeight: 700, lineHeight: '34px', - color: colors.white100, + color: colors.white, }; export const measurements = { diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionDetails.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionDetails.tsx index 15ba2fa4b6..3f24480339 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionDetails.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionDetails.tsx @@ -38,7 +38,7 @@ const StyledConnectionDetailsHeading = styled.h2(tinyText, { margin: '0 0 4px', fontSize: '10px', lineHeight: '15px', - color: colors.white60, + color: colors.whiteAlpha60, }); const StyledConnectionDetailsContainer = styled.div({ @@ -58,13 +58,13 @@ const StyledIpLabelContainer = styled.div({ const StyledConnectionDetailsLabel = styled.span(tinyText, { display: 'block', - color: colors.white100, + color: colors.white, fontWeight: '400', minHeight: '1em', }); const StyledConnectionDetailsTitle = styled(StyledConnectionDetailsLabel)({ - color: colors.white60, + color: colors.whiteAlpha60, whiteSpace: 'nowrap', }); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionPanel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionPanel.tsx index 1a8f20ec19..01aa87553b 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionPanel.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionPanel.tsx @@ -62,7 +62,7 @@ const StyledConnectionStatusContainer = styled.div<{ }>((props) => ({ paddingBottom: props.$hasFeatureIndicators || props.$expanded ? '16px' : 0, marginBottom: props.$expanded && props.$hasFeatureIndicators ? '16px' : 0, - borderBottom: props.$expanded ? `1px ${colors.white20} solid` : 'none', + borderBottom: props.$expanded ? `1px ${colors.whiteAlpha20} solid` : 'none', transitionProperty: 'margin-bottom, padding-bottom', transitionDuration: '300ms', transitionTimingFunction: 'ease-out', diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionStatus.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionStatus.tsx index 87c5c7eecf..a789ef8450 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionStatus.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionStatus.tsx @@ -29,14 +29,14 @@ export default function ConnectionStatus() { function getConnectionSTatusLabelColor(tunnelState: TunnelState, lockdownMode: boolean) { switch (tunnelState.state) { case 'connected': - return colors.brandGreen; + return colors.green; case 'connecting': case 'disconnecting': - return colors.white100; + return colors.white; case 'disconnected': - return lockdownMode ? colors.white100 : colors.brandRed; + return lockdownMode ? colors.white : colors.red; case 'error': - return tunnelState.details.blockingError ? colors.brandRed : colors.white100; + return tunnelState.details.blockingError ? colors.red : colors.white; } } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/FeatureIndicators.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/FeatureIndicators.tsx index 8a4337b53b..c98bb0bc62 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/FeatureIndicators.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/FeatureIndicators.tsx @@ -28,7 +28,7 @@ const StyledTitle = styled.h2(tinyText, { margin: '0 0 2px', fontSize: '10px', lineHeight: '15px', - color: colors.white60, + color: colors.whiteAlpha60, }); const StyledFeatureIndicators = styled.div({ @@ -50,8 +50,8 @@ const StyledFeatureIndicatorLabel = styled.span(tinyText, (props) => ({ justifyContent: 'center', alignItems: 'center', borderRadius: '4px', - background: colors.brandDarkBlue, - color: colors.white100, + background: colors.darkBlue, + color: colors.white, fontWeight: 400, whiteSpace: 'nowrap', visibility: 'hidden', @@ -59,7 +59,7 @@ const StyledFeatureIndicatorLabel = styled.span(tinyText, (props) => ({ // Style clickable feature indicators with a border and on-hover effect boxSizing: 'border-box', // make border act as padding rather than margin border: 'solid 1px', - borderColor: props.onClick ? colors.brandBlue : colors.brandDarkBlue, + borderColor: props.onClick ? colors.blue : colors.darkBlue, transition: 'background ease-in-out 300ms', '&&:hover': { background: props.onClick ? colors.blue60 : undefined, @@ -69,7 +69,7 @@ const StyledFeatureIndicatorLabel = styled.span(tinyText, (props) => ({ const StyledBaseEllipsis = styled.span<{ $display: boolean }>(tinyText, (props) => ({ position: 'absolute', top: `${LINE_HEIGHT + GAP}px`, - color: colors.white100, + color: colors.white, padding: '2px 8px 2px 16px', display: props.$display ? 'inline' : 'none', })); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Hostname.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Hostname.tsx index 8bdb292f3c..c46c7261af 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Hostname.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Hostname.tsx @@ -14,7 +14,7 @@ const StyledAccordion = styled(ConnectionPanelAccordion)({ }); const StyledHostname = styled.span(smallText, { - color: colors.white60, + color: colors.whiteAlpha60, fontWeight: '400', flexShrink: 0, minHeight: '1em', diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Location.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Location.tsx index 036152f13f..fff4fabe4f 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Location.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Location.tsx @@ -8,7 +8,7 @@ import Marquee from '../Marquee'; import { ConnectionPanelAccordion } from './styles'; const StyledLocation = styled.span(largeText, { - color: colors.white100, + color: colors.white, flexShrink: 0, }); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomListDialogs.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomListDialogs.tsx index 9bdaec3a78..caf179d710 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomListDialogs.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomListDialogs.tsx @@ -105,7 +105,7 @@ const StyledSelectListItemLabel = styled(Cell.Label)(normalText, { const StyledSelectListItemIcon = styled(Cell.CellTintedIcon)({ [`${Cell.CellButton}:not(:disabled):hover &&`]: { - backgroundColor: colors.white80, + backgroundColor: colors.whiteAlpha80, }, }); @@ -137,7 +137,7 @@ function SelectList(props: SelectListProps) { const StyledInputErrorText = styled.span(tinyText, { marginTop: '6px', - color: colors.brandRed, + color: colors.red, }); interface EditListProps { diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomLists.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomLists.tsx index eebc74a025..c16badd158 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomLists.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomLists.tsx @@ -30,7 +30,7 @@ const StyledInputContainer = styled.div({ display: 'flex', alignItems: 'center', flex: 1, - backgroundColor: colors.brandBlue, + backgroundColor: colors.blue, paddingLeft: measurements.horizontalViewMargin, height: measurements.rowMinHeight, }); @@ -38,7 +38,7 @@ const StyledInputContainer = styled.div({ const StyledHeaderLabel = styled(Cell.Label)({ display: 'block', flex: 1, - backgroundColor: colors.brandBlue, + backgroundColor: colors.blue, paddingLeft: measurements.horizontalViewMargin, margin: 0, height: measurements.rowMinHeight, @@ -55,17 +55,17 @@ const StyledAddListCellButton = styled(StyledCellButton)({ const StyledSideButtonIcon = styled(Cell.CellIcon)({ [`${StyledCellButton}:disabled &&, ${StyledAddListCellButton}:disabled &&`]: { - backgroundColor: colors.white40, + backgroundColor: colors.whiteAlpha40, }, [`${StyledCellButton}:not(:disabled):hover &&, ${StyledAddListCellButton}:not(:disabled):hover &&`]: { - backgroundColor: colors.white100, + backgroundColor: colors.white, }, }); const StyledInput = styled(SimpleInput)<{ $error: boolean }>((props) => ({ - color: props.$error ? colors.brandRed : 'auto', + color: props.$error ? colors.red : 'auto', })); interface CustomListsProps { @@ -103,10 +103,10 @@ export default function CustomLists(props: CustomListsProps) { {messages.pgettext('select-location-view', 'Custom lists')} </StyledHeaderLabel> <StyledCellButton - $backgroundColor={colors.brandBlue} + $backgroundColor={colors.blue} $backgroundColorHover={colors.blue80} onClick={showAddList}> - <StyledSideButtonIcon icon="add-circle" color="white60" /> + <StyledSideButtonIcon icon="add-circle" color="whiteAlpha60" /> </StyledCellButton> </StyledCellContainer> @@ -198,11 +198,11 @@ function AddListForm(props: AddListFormProps) { </StyledInputContainer> <StyledAddListCellButton - $backgroundColor={colors.brandBlue} + $backgroundColor={colors.blue} $backgroundColorHover={colors.blue80} disabled={!nameValid} onClick={createList}> - <StyledSideButtonIcon icon="checkmark" color="white60" /> + <StyledSideButtonIcon icon="checkmark" color="whiteAlpha60" /> </StyledAddListCellButton> </StyledCellContainer> <Cell.CellFooter> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/LocationRowStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/LocationRowStyles.tsx index 42cffe2192..16e71d3337 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/LocationRowStyles.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/LocationRowStyles.tsx @@ -83,10 +83,10 @@ export const StyledHoverIconButton = styled.button<ButtonColors & HoverButtonPro ); export const StyledHoverIcon = styled(Icon).attrs({ - color: 'white60', + color: 'whiteAlpha60', })({ [`${StyledHoverIconButton}:hover &&`]: { - backgroundColor: colors.white100, + backgroundColor: colors.white, }, }); @@ -98,7 +98,7 @@ export const StyledHoverInfoButton = styled(InfoButton)<ButtonColors & HoverButt export function getButtonColor(selected: boolean, level: number, disabled?: boolean) { let backgroundColor: ColorVariables = colors.blue60; if (selected) { - backgroundColor = colors.brandGreen; + backgroundColor = colors.green; } else if (level === 1) { backgroundColor = colors.blue40; } else if (level === 2) { diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/ScopeBar.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/ScopeBar.tsx index 02c22f77f8..2d43fa1103 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/ScopeBar.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/ScopeBar.tsx @@ -40,12 +40,12 @@ const StyledScopeBarItem = styled.button<{ selected?: boolean }>(smallText, (pro flex: 1, flexBasis: 0, padding: '4px 8px', - color: colors.white100, + color: colors.white, textAlign: 'center', border: 'none', - backgroundColor: props.selected ? colors.brandGreen : 'transparent', + backgroundColor: props.selected ? colors.green : 'transparent', '&&:hover': { - backgroundColor: props.selected ? colors.brandGreen : colors.blue40, + backgroundColor: props.selected ? colors.green : colors.blue40, }, })); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocationStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocationStyles.tsx index 9aaa8e2d45..e509e4e996 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocationStyles.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocationStyles.tsx @@ -23,7 +23,7 @@ export const StyledNavigationBarAttachment = styled.div({ export const StyledFilterRow = styled.div({ ...tinyText, - color: colors.white100, + color: colors.white, margin: '0 6px 16px', }); @@ -31,11 +31,11 @@ export const StyledFilter = styled.div({ ...tinyText, display: 'inline-flex', alignItems: 'center', - backgroundColor: colors.brandBlue, + backgroundColor: colors.blue, borderRadius: '4px', padding: '3px 8px', marginLeft: '6px', - color: colors.white100, + color: colors.white, }); export const StyledClearFilterButton = styled.div({ diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx index 7f8ff06445..e77d98c9ea 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx @@ -35,7 +35,7 @@ export function AppVersionListItem() { const message = !consistentVersion ? inconsistentVersionMessage : updateAvailableMessage; - alertIcon = <Cell.CellIcon icon="alert-circle" color="brandRed" />; + alertIcon = <Cell.CellIcon icon="alert-circle" color="red" />; footer = ( <Cell.CellFooter> <Cell.CellFooterText>{message}</Cell.CellFooterText> 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 5e044d74bf..32bf4e7a9e 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 @@ -43,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="white60"> + <BodySmall as="li" key={i} color="whiteAlpha60"> {item} </BodySmall> ))} </StyledList> ) : ( - <BodySmall color="white60"> + <BodySmall color="whiteAlpha60"> {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/Button.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx index 53787d1c6f..f526800c2a 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx @@ -15,17 +15,17 @@ const styles = { radius: Radius.radius4, variants: { primary: { - background: colors.brandBlue, + background: colors.blue, hover: colors.blue60, disabled: colors.blue40, }, success: { - background: colors.brandGreen, + background: colors.green, hover: colors.green80, disabled: colors.green40, }, destructive: { - background: colors.brandRed, + background: colors.red, hover: colors.red80, disabled: colors.red40, }, @@ -75,7 +75,7 @@ export const StyledButton = styled(ButtonBase)<ButtonProps>` } &:focus-visible { - outline: 2px solid ${colors.white100}; + outline: 2px solid ${colors.white}; outline-offset: 2px; } diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonIcon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonIcon.tsx index 438c14632c..94054d909d 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonIcon.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonIcon.tsx @@ -13,7 +13,7 @@ export function ButtonIcon({ ...props }: ButtonIconProps) { <StyledButtonIcon size="medium" aria-hidden="true" - color={disabled ? 'white40' : 'white100'} + color={disabled ? 'whiteAlpha40' : 'white'} {...props} /> ); 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 eccc6cfa1d..79e8291142 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 @@ -9,5 +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 ? 'white40' : 'white100'} {...props} />; + return <StyledButtonText color={disabled ? 'whiteAlpha40' : 'white'} {...props} />; } diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/dot/Dot.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/dot/Dot.tsx index a2cf2d1fab..3b1abf87cd 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/dot/Dot.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/dot/Dot.tsx @@ -21,10 +21,10 @@ const sizes = { }; const dotColors = { - primary: colors.white80, - success: colors.brandGreen, - warning: colors.brandYellow, - error: colors.brandRed, + primary: colors.whiteAlpha80, + success: colors.green, + warning: colors.yellow, + error: colors.red, }; export const Dot = ({ variant = 'primary', size = 'medium', ...props }: DotProps) => { diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/FilterChip.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/FilterChip.tsx index c773c797a4..e728abb986 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/FilterChip.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/FilterChip.tsx @@ -12,7 +12,7 @@ export interface FilterChipProps extends React.ButtonHTMLAttributes<HTMLButtonEl } const variables = { - background: colors.brandBlue, + background: colors.blue, hover: colors.blue60, disabled: colors.blue50, } as const; @@ -34,7 +34,7 @@ const StyledButton = styled.button({ background: 'var(--disabled)', }, '&:focus-visible': { - outline: `2px solid ${colors.white100}`, + outline: `2px solid ${colors.white}`, }, }); diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipIcon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipIcon.tsx index 4ae9c752f1..0dd02707d3 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipIcon.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipIcon.tsx @@ -9,5 +9,5 @@ export const StyledIcon = styled(Icon)({}); export const FilterChipIcon = ({ ...props }: FilterChipIconProps) => { const { disabled } = useFilterChipContext(); - return <Icon size="small" color={disabled ? 'white40' : 'white100'} {...props} />; + return <Icon size="small" color={disabled ? 'whiteAlpha40' : 'white'} {...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 a13f71d5fd..3da18bf38f 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 @@ -11,5 +11,5 @@ export const FilterChipText = <T extends React.ElementType = 'span'>( props: FilterChipTextProps<T>, ) => { const { disabled } = useFilterChipContext(); - return <StyledText color={disabled ? 'white40' : 'white100'} {...props} />; + return <StyledText color={disabled ? 'whiteAlpha40' : 'white'} {...props} />; }; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx index 62cf1a1c3e..3dca3f1286 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx @@ -23,7 +23,7 @@ const StyledButton = styled(ButtonBase)<{ $size: IconButtonProps['size'] }>` width: var(--size); border-radius: 100%; &:focus-visible { - outline: 2px solid ${colors.white100}; + outline: 2px solid ${colors.white}; outline-offset: 1px; } `; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/IconButtonIcon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/IconButtonIcon.tsx index e62b0a1db3..9d4ed6f3b1 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/IconButtonIcon.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/IconButtonIcon.tsx @@ -7,14 +7,14 @@ export type IconButtonIconProps = IconProps; const variants = { primary: { - background: 'white100', - hover: 'white60', - disabled: 'white40', + background: 'white', + hover: 'whiteAlpha60', + disabled: 'whiteAlpha40', }, secondary: { - background: 'white60', - hover: 'white80', - disabled: 'white40', + background: 'whiteAlpha60', + hover: 'whiteAlpha80', + disabled: 'whiteAlpha40', }, } as const; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx index 6728bf9596..fe0edcefef 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx @@ -35,7 +35,7 @@ const PATH_PREFIX = process.env.NODE_ENV === 'development' ? '../' : ''; export const Icon = ({ icon: iconProp, size = 'medium', - color: colorProp = 'white100', + color: colorProp = 'white', ...props }: IconProps) => { const icon = icons[iconProp]; 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 2d17c8bed9..45775fbea8 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 @@ -24,15 +24,15 @@ const StyledText = styled(Text)<{ }, '&&:focus-visible': { borderRadius: Radius.radius4, - outline: `2px solid ${colors.white60}`, + outline: `2px solid ${colors.whiteAlpha60}`, outlineOffset: '2px', }, })); const getHoverColor = (color: Colors | undefined) => { switch (color) { - case 'white60': - return 'white100'; + case 'whiteAlpha60': + return 'white'; 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 05b8ff8790..85fff79648 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 @@ -7,5 +7,5 @@ export const ListItemLabel = <E extends React.ElementType = 'span'>( props: ListItemLabelProps<E>, ) => { const { disabled } = useListItem(); - return <TitleMedium color={disabled ? 'white40' : 'white100'} {...props} />; + return <TitleMedium color={disabled ? 'whiteAlpha40' : 'white'} {...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 5dbad8b066..cec3d51aef 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 @@ -5,5 +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 ? 'white40' : 'white60'} {...props} />; + return <Text variant="labelTiny" color={disabled ? 'whiteAlpha40' : 'whiteAlpha60'} {...props} />; }; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemTrigger.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemTrigger.tsx index 496ab120f0..a46c5a9139 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemTrigger.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemTrigger.tsx @@ -20,7 +20,7 @@ const StyledButton = styled(ButtonBase)<{ $disabled?: boolean }>` `} &&:focus-visible { - outline: 2px solid ${colors.white100}; + outline: 2px solid ${colors.white}; outline-offset: -1px; z-index: 10; } diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/levels.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/levels.ts index 64a819cdcb..c3700a3761 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/levels.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/levels.ts @@ -1,7 +1,7 @@ import { colors } from '../../foundations'; export const levels = { - 0: { enabled: colors.brandBlue, disabled: colors.blue40 }, + 0: { enabled: colors.blue, disabled: colors.blue40 }, 1: { enabled: colors.blue60, disabled: colors.blue40 }, 2: { enabled: colors.blue40, disabled: colors.blue20 }, 3: { enabled: colors.blue20, disabled: colors.blue10 }, diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/main-header/MainHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/main-header/MainHeader.tsx index 16f03a904f..1370a335b2 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/main-header/MainHeader.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/main-header/MainHeader.tsx @@ -18,9 +18,9 @@ const sizes = { }; const variants: Record<HeaderVariant, Colors> = { - default: 'brandBlue', - error: 'brandRed', - success: 'brandGreen', + default: 'blue', + error: 'red', + success: 'green', }; const StyledHeader = styled.header<TransientProps<HeaderProps>>( diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/NavigationHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/NavigationHeader.tsx index be628819eb..5933d38e1c 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/NavigationHeader.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/NavigationHeader.tsx @@ -15,7 +15,7 @@ export type NavigationHeaderProps = React.PropsWithChildren<{ }>; const StyledHeader = styled.nav<TransientProps<NavigationHeaderProps>>({ - backgroundColor: colors.brandDarkBlue, + backgroundColor: colors.darkBlue, }); export const StyledContent = styled.div({ diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressPercent.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressPercent.tsx index 00d90c520c..0b8db6ea7e 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressPercent.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressPercent.tsx @@ -14,7 +14,7 @@ export const ProgressPercent = <T extends React.ElementType = 'span'>({ ...props }: ProgressPercentProps<T>) => { const { percent, disabled } = useProgress(); - const defaultColor = disabled ? 'white40' : 'white100'; + const defaultColor = disabled ? 'whiteAlpha40' : 'white'; return ( <StyledText color={color ?? defaultColor} {...props}> {`${Math.round(percent)}%`} diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressRange.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressRange.tsx index e7d050b052..88dc38a7b4 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressRange.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressRange.tsx @@ -6,7 +6,7 @@ import { useProgress } from '../ProgressContext'; const StyledDiv = styled.div<{ disabled?: boolean; }>` - background-color: ${({ disabled }) => (disabled ? colors.white80 : colors.white100)}; + background-color: ${({ disabled }) => (disabled ? colors.whiteAlpha80 : colors.white)}; border-radius: ${Radius.radius4}; height: 100%; width: 100%; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressText.tsx index a92f4c6f13..46f0cb9a9a 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressText.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressText.tsx @@ -5,5 +5,5 @@ export type ProgressTextProps<T extends React.ElementType = 'span'> = LabelTinyP export const ProgressText = <T extends React.ElementType = 'span'>(props: ProgressTextProps<T>) => { const { disabled } = useProgress(); - return <LabelTiny color={disabled ? 'white40' : 'white60'} {...props} />; + return <LabelTiny color={disabled ? 'whiteAlpha40' : 'whiteAlpha60'} {...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 5c7bb62949..dff1a9dc08 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 @@ -12,7 +12,7 @@ type TextBaseProps = { export type TextProps<T extends React.ElementType = 'span'> = PolymorphicProps<T, TextBaseProps>; const StyledText = styled.span<TransientProps<TextBaseProps>>( - ({ $variant = 'bodySmall', $color = 'white100' }) => { + ({ $variant = 'bodySmall', $color = 'white' }) => { const { fontFamily, fontSize, fontWeight, lineHeight } = typography[$variant]; const color = colors[$color]; return ` diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/color-tokens.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/color-tokens.ts index f8d9fa51af..32378399df 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/color-tokens.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/color-tokens.ts @@ -32,38 +32,37 @@ export enum DeprecatedColorTokens { } export const colorTokens = { - white100: 'rgba(255, 255, 255, 1)', - white80: 'rgba(255, 255, 255, 0.8)', - white60: 'rgba(255, 255, 255, 0.6)', - white40: 'rgba(255, 255, 255, 0.4)', - white20: 'rgba(255, 255, 255, 0.2)', + white: 'rgba(255, 255, 255, 1)', + whiteAlpha80: 'rgba(255, 255, 255, 0.8)', + whiteAlpha60: 'rgba(255, 255, 255, 0.6)', + whiteAlpha40: 'rgba(255, 255, 255, 0.4)', + whiteAlpha20: 'rgba(255, 255, 255, 0.2)', black: 'rgba(0, 0, 0, 1)', - black50: 'rgba(0, 0, 0, 0.5)', + blackAlpha50: 'rgba(0, 0, 0, 0.5)', - brandRed: 'rgba(227, 64, 57, 1)', - brandGreen: 'rgba(68, 173, 77, 1)', - brandYellow: 'rgba(255, 213, 36, 1)', - brandFur: 'rgba(210, 148, 59, 1)', - brandNose: 'rgba(255, 205, 134, 1)', - brandBlue: 'rgba(41, 77, 115, 1)', - brandDarkBlue: 'rgba(25, 46, 69, 1)', + red: 'rgba(227, 64, 57, 1)', + redAlpha40: 'rgba(227, 64, 57, 0.4)', + red80: 'rgba(187, 60, 59, 1)', + red40: 'rgba(106, 53, 64, 1)', - greenAlpha: 'rgba(68, 173, 77, 0.4)', + green: 'rgba(68, 173, 77, 1)', + greenAlpha40: 'rgba(68, 173, 77, 0.4)', green80: 'rgba(59, 148, 75, 1)', green40: 'rgba(59, 148, 75, 1)', - redAlpha: 'rgba(227, 64, 57, 0.4)', - red: 'rgba(235, 93, 64, 1)', - red80: 'rgba(187, 60, 59, 1)', - red40: 'rgba(106, 53, 64, 1)', + yellow: 'rgba(255, 213, 36, 1)', + fur: 'rgba(210, 148, 59, 1)', + nose: 'rgba(255, 205, 134, 1)', + blue: 'rgba(41, 77, 115, 1)', + darkBlue: 'rgba(25, 46, 69, 1)', dark: 'rgba(78, 73, 73, 1)', darkerBlue50: 'rgba(25, 38, 56, 1)', + darkerBlue50Alpha80: 'rgba(25, 38, 56, 0.8)', darkerBlue10: 'rgba(16, 24, 35, 1)', darkerBlue10Alpha80: 'rgba(16, 24, 35, 0.8)', darkerBlue10Alpha40: 'rgba(16, 24, 35, 0.4)', - darkerBlue50Alpha80: 'rgba(25, 38, 56, 0.8)', blue10: 'rgba(27, 49, 74, 1)', blue20: 'rgba(28, 52, 78, 1)', @@ -88,8 +87,8 @@ export const colorTokens = { whiteOnBlue60: 'rgba(169, 184, 199, 1)', whiteOnBlue80: 'rgba(212, 219, 227, 1)', - chalk100: 'rgba(248, 247, 241, 1)', + chalk: 'rgba(248, 247, 241, 1)', + chalkAlpha80: 'rgba(248, 247, 241, 0.8)', + chalkAlpha40: 'rgba(248, 247, 241, 0.4)', chalk80: 'rgba(246, 242, 213, 1)', - chalk80Alpha: 'rgba(248, 247, 241, 0.8)', - chalk40Alpha: 'rgba(248, 247, 241, 0.4)', } as const; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/color-variables.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/color-variables.ts index 108cb51f52..4a171e1658 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/color-variables.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/color-variables.ts @@ -67,38 +67,37 @@ export enum DeprecatedColors { } export const colorPrimitives = { - '--color-white100': colorTokens.white100, - '--color-white80': colorTokens.white80, - '--color-white60': colorTokens.white60, - '--color-white40': colorTokens.white40, - '--color-white20': colorTokens.white20, + '--color-white': colorTokens.white, + '--color-white-alpha80': colorTokens.whiteAlpha80, + '--color-white-alpha60': colorTokens.whiteAlpha60, + '--color-white-alpha40': colorTokens.whiteAlpha40, + '--color-white-alpha20': colorTokens.whiteAlpha20, '--color-black': colorTokens.black, - '--color-black50': colorTokens.black50, + '--color-black-alpha50': colorTokens.blackAlpha50, - '--color-brand-red': colorTokens.brandRed, - '--color-brand-green': colorTokens.brandGreen, - '--color-brand-yellow': colorTokens.brandYellow, - '--color-brand-fur': colorTokens.brandFur, - '--color-brand-nose': colorTokens.brandNose, - '--color-brand-blue': colorTokens.brandBlue, - '--color-brand-dark-blue': colorTokens.brandDarkBlue, + '--color-red': colorTokens.red, + '--color-red-alpha40': colorTokens.redAlpha40, + '--color-red80': colorTokens.red80, + '--color-red40': colorTokens.red40, - '--color-green-alpha': colorTokens.greenAlpha, + '--color-green': colorTokens.green, + '--color-green-alpha40': colorTokens.greenAlpha40, '--color-green80': colorTokens.green80, '--color-green40': colorTokens.green40, - '--color-red': colorTokens.red, - '--color-red-alpha': colorTokens.redAlpha, - '--color-red80': colorTokens.red80, - '--color-red40': colorTokens.red40, + '--color-yellow': colorTokens.yellow, + '--color-fur': colorTokens.fur, + '--color-nose': colorTokens.nose, + '--color-blue': colorTokens.blue, + '--color-dark-blue': colorTokens.darkBlue, '--color-dark': colorTokens.dark, '--color-darker-blue50': colorTokens.darkerBlue50, + '--color-darker-blue50-alpha80': colorTokens.darkerBlue50Alpha80, '--color-darker-blue10': colorTokens.darkerBlue10, '--color-darker-blue10-alpha80': colorTokens.darkerBlue10Alpha80, '--color-darker-blue10-alpha40': colorTokens.darkerBlue10Alpha40, - '--color-darker-blue50-alpha80': colorTokens.darkerBlue50Alpha80, '--color-blue10': colorTokens.blue10, '--color-blue20': colorTokens.blue20, @@ -123,38 +122,37 @@ export const colorPrimitives = { '--color-white-on-blue60': colorTokens.whiteOnBlue60, '--color-white-on-blue80': colorTokens.whiteOnBlue80, - '--color-chalk100': colorTokens.chalk100, + '--color-chalk': colorTokens.chalk, + '--color-chalk-alpha80': colorTokens.chalkAlpha80, + '--color-chalk-alpha40': colorTokens.chalkAlpha40, '--color-chalk80': colorTokens.chalk80, - '--color-chalk80Alpha': colorTokens.chalk80Alpha, - '--color-chalk40Alpha': colorTokens.chalk40Alpha, } as const; -export const colors = { - white100: 'var(--color-white100)', - white80: 'var(--color-white80)', - white60: 'var(--color-white60)', - white40: 'var(--color-white40)', - white20: 'var(--color-white20)', +export const colors: Record<keyof typeof colorTokens, `var(${keyof typeof colorPrimitives})`> = { + white: 'var(--color-white)', + whiteAlpha80: 'var(--color-white-alpha80)', + whiteAlpha60: 'var(--color-white-alpha60)', + whiteAlpha40: 'var(--color-white-alpha40)', + whiteAlpha20: 'var(--color-white-alpha20)', black: 'var(--color-black)', - black50: 'var(--color-black50)', + blackAlpha50: 'var(--color-black-alpha50)', - brandRed: 'var(--color-brand-red)', - brandGreen: 'var(--color-brand-green)', - brandYellow: 'var(--color-brand-yellow)', - brandFur: 'var(--color-brand-fur)', - brandNose: 'var(--color-brand-nose)', - brandBlue: 'var(--color-brand-blue)', - brandDarkBlue: 'var(--color-brand-dark-blue)', + red: 'var(--color-red)', + redAlpha40: 'var(--color-red-alpha40)', + red80: 'var(--color-red80)', + red40: 'var(--color-red40)', - greenAlpha: 'var(--color-green-alpha)', + green: 'var(--color-green)', + greenAlpha40: 'var(--color-green-alpha40)', green80: 'var(--color-green80)', green40: 'var(--color-green40)', - redAlpha: 'var(--color-red-alpha)', - red: 'var(--color-red)', - red80: 'var(--color-red80)', - red40: 'var(--color-red40)', + yellow: 'var(--color-yellow)', + fur: 'var(--color-fur)', + nose: 'var(--color-nose)', + blue: 'var(--color-blue)', + darkBlue: 'var(--color-dark-blue)', dark: 'var(--color-dark)', darkerBlue50: 'var(--color-darker-blue50)', @@ -186,10 +184,10 @@ export const colors = { whiteOnBlue60: 'var(--color-white-on-blue60)', whiteOnBlue80: 'var(--color-white-on-blue80)', - chalk100: 'var(--color-chalk100)', + chalk: 'var(--color-chalk)', + chalkAlpha40: 'var(--color-chalk-alpha40)', + chalkAlpha80: 'var(--color-chalk-alpha80)', chalk80: 'var(--color-chalk80)', - chalk80Alpha: 'var(--color-chalk80Alpha)', - chalk40Alpha: 'var(--color-chalk40Alpha)', } as const; export type Colors = keyof typeof colors; |