Use transparent color token throughout app

15 files changed, 24 insertions, 22 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx
index 4ab61b87e4..62e7e87597 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx
@@ -124,13 +124,13 @@ const StyledMenuItem = styled.button(smallText, (props) => ({
   minWidth: '110px',
   padding: '1px 10px 2px',
   lineHeight: `${ITEM_HEIGHT}px`,
-  background: 'transparent',
+  background: colors.transparent,
   border: 'none',
   textAlign: 'left',
   color: props.disabled ? colors.whiteAlpha40 : colors.white,
 
   '&&:hover': {
-    background: props.disabled ? 'transparent' : colors.blue,
+    background: props.disabled ? colors.transparent : colors.blue,
   },
 }));
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettingsStyles.tsx
index 5b3ad153c7..0d6dac8558 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettingsStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettingsStyles.tsx
@@ -39,7 +39,7 @@ export const StyledButton = styled.button({
   alignItems: 'center',
   flex: 1,
   border: 'none',
-  background: 'transparent',
+  background: colors.transparent,
   padding: 0,
   margin: 0,
 });
@@ -56,7 +56,7 @@ export const StyledLabel = styled(Cell.Label)({
 });
 
 export const StyledRemoveButton = styled.button({
-  background: 'transparent',
+  background: colors.transparent,
   border: 'none',
   padding: 0,
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
index 0a650ddc90..883260d474 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
@@ -51,7 +51,7 @@ export const StyledAccountDropdownItemIconButton = styled.button({
 
 export const StyledAccountDropdownTrailingButton = styled.button({
   ...buttonReset,
-  backgroundColor: 'transparent',
+  backgroundColor: colors.transparent,
   cursor: 'pointer',
   '&:focus-visible': {
     outline: `2px solid ${colors.white}`,
@@ -112,7 +112,7 @@ export const StyledAccountInputGroup = styled.form<IStyledAccountInputGroupProps
   borderStyle: 'solid',
   borderRadius: '8px',
   overflow: 'hidden',
-  borderColor: props.$error ? colors.red40 : props.$active ? colors.darkBlue : 'transparent',
+  borderColor: props.$error ? colors.red40 : props.$active ? colors.darkBlue : colors.transparent,
   opacity: props.$editable ? 1 : 0.6,
 }));
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Modal.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Modal.tsx
index 39deff20c1..c978ed4891 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.blackAlpha50 : 'transparent',
+  backgroundColor: props.$visible ? colors.blackAlpha50 : colors.transparent,
   backdropFilter: props.$visible ? 'blur(1.5px)' : '',
   position: 'absolute',
   display: 'flex',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
index c8d0c53ca4..eedbdb3de4 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
@@ -101,7 +101,9 @@ export const NotificationIndicator = styled.div<INotificationIndicatorProps>((pr
   borderRadius: '5px',
   marginTop: '4px',
   marginRight: '8px',
-  backgroundColor: props.$type ? notificationIndicatorTypeColorMap[props.$type] : 'transparent',
+  backgroundColor: props.$type
+    ? notificationIndicatorTypeColorMap[props.$type]
+    : colors.transparent,
 }));
 
 interface ICollapsibleProps {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx
index ca7f755e92..a603eee7bb 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx
@@ -144,7 +144,7 @@ const StyledPageIndicators = styled(StyledControlElement)({
 
 const StyledTransparentButton = styled.button({
   border: 'none',
-  background: 'transparent',
+  background: colors.transparent,
   padding: '4px',
   margin: 0,
 });
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 79ff60f774..9b5ae3ea61 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx
@@ -26,7 +26,7 @@ const inputTextStyles: React.CSSProperties = {
 
 const StyledInput = styled.input<{ $focused: boolean; $valid?: boolean }>((props) => ({
   ...inputTextStyles,
-  backgroundColor: 'transparent',
+  backgroundColor: colors.transparent,
   border: 'none',
   width: '100%',
   height: '100%',
@@ -190,7 +190,7 @@ const StyledAutoSizingTextInputContainer = styled.div({
 const StyledAutoSizingTextInputFiller = styled.pre({
   ...inputTextStyles,
   minWidth: '80px',
-  color: 'transparent',
+  color: colors.transparent,
 });
 
 const StyledAutoSizingTextInputWrapper = styled.div({
@@ -288,7 +288,7 @@ const StyledInputFiller = styled.div({
   whiteSpace: 'pre-wrap',
   overflowWrap: 'break-word',
   minHeight: '24px',
-  color: 'transparent',
+  color: colors.transparent,
   marginRight: '25px',
 });
 
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 38e9ca9369..3b62de16cb 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRadioGroup.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRadioGroup.tsx
@@ -49,7 +49,7 @@ const StyledRadioButton = styled.input.attrs({ type: 'radio' })({
   position: 'relative',
   margin: 0,
   appearance: 'none',
-  backgroundColor: 'transparent',
+  backgroundColor: colors.transparent,
   width: '12px',
   height: '12px',
 
@@ -59,7 +59,7 @@ const StyledRadioButton = styled.input.attrs({ type: 'radio' })({
     width: '12px',
     height: '12px',
     borderRadius: '50%',
-    backgroundColor: 'transparent',
+    backgroundColor: colors.transparent,
     border: `1px ${colors.white} solid`,
     top: 0,
     left: 0,
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 f177625a85..d8b4b29d82 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx
@@ -36,8 +36,8 @@ const StyledSettingsRow = styled.label<{ $invalid: boolean }>((props) => ({
   outlineWidth: '1px',
   borderStyle: 'solid',
   outlineStyle: 'solid',
-  borderColor: props.$invalid ? colors.red : 'transparent',
-  outlineColor: props.$invalid ? colors.red : 'transparent',
+  borderColor: props.$invalid ? colors.red : colors.transparent,
+  outlineColor: props.$invalid ? colors.red : colors.transparent,
   '&&:focus-within': {
     borderColor: props.$invalid ? colors.red : colors.white,
     outlineColor: props.$invalid ? colors.red : colors.white,
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 b81d841f6f..3f6ccf3297 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx
@@ -18,7 +18,7 @@ const StyledSelect = styled.div.attrs({ tabIndex: 0 })(smallNormalText, {
   display: 'flex',
   flex: 1,
   position: 'relative',
-  background: 'transparent',
+  background: colors.transparent,
   border: 'none',
   color: colors.white,
   borderRadius: '4px',
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 aa292632ea..73b7a55e4e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsTextInput.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsTextInput.tsx
@@ -11,7 +11,7 @@ import { useSettingsRowContext } from './SettingsRow';
 const StyledInput = styled.input(smallNormalText, {
   flex: 1,
   textAlign: 'right',
-  background: 'transparent',
+  background: colors.transparent,
   border: 'none',
   color: colors.white,
   width: '100px',
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 2d43fa1103..4c7eba1df3 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
@@ -43,7 +43,7 @@ const StyledScopeBarItem = styled.button<{ selected?: boolean }>(smallText, (pro
   color: colors.white,
   textAlign: 'center',
   border: 'none',
-  backgroundColor: props.selected ? colors.green : 'transparent',
+  backgroundColor: props.selected ? colors.green : colors.transparent,
   '&&:hover': {
     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 e509e4e996..32054e3690 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
@@ -44,7 +44,7 @@ export const StyledClearFilterButton = styled.div({
   padding: 0,
   margin: '0 0 0 6px',
   cursor: 'default',
-  backgroundColor: 'transparent',
+  backgroundColor: colors.transparent,
 });
 
 export const StyledSearchBar = styled(SearchBar)({
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 3dca3f1286..1ae5688be4 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
@@ -18,7 +18,7 @@ const StyledButton = styled(ButtonBase)<{ $size: IconButtonProps['size'] }>`
     return css`
       --size: ${size}px;
 
-      background: transparent;
+      background: ${colors.transparent};
       height: var(--size);
       width: var(--size);
       border-radius: 100%;
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 45775fbea8..40a598b666 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
@@ -12,7 +12,7 @@ export type LinkProps<T extends React.ElementType = 'a'> = TextProps<T> & {
 const StyledText = styled(Text)<{
   $hoverColor: Colors | undefined;
 }>((props) => ({
-  background: 'transparent',
+  background: colors.transparent,
   cursor: 'default',
   textDecoration: 'none',
   display: 'inline',