Rename typography variant to labelTiny to labelTinySemiBold

14 files changed, 30 insertions, 20 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
index 837b0701cf..6053f7a1d4 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
@@ -19,20 +19,20 @@ const formatSubtitle = (subtitle: InAppNotificationSubtitle) => {
     switch (subtitle.action.type) {
       case 'navigate-internal':
         return (
-          <InternalLink variant="labelTiny" {...subtitle.action.link}>
+          <InternalLink variant="labelTinySemiBold" {...subtitle.action.link}>
             <InternalLink.Text>{content}</InternalLink.Text>
           </InternalLink>
         );
       case 'navigate-external':
         return (
-          <ExternalLink variant="labelTiny" {...subtitle.action.link}>
+          <ExternalLink variant="labelTinySemiBold" {...subtitle.action.link}>
             <ExternalLink.Text>{content}</ExternalLink.Text>
             <ExternalLink.Icon icon="external" />
           </ExternalLink>
         );
       case 'run-function':
         return (
-          <StyledLink forwardedAs="button" variant="labelTiny" {...subtitle.action.button}>
+          <StyledLink forwardedAs="button" variant="labelTinySemiBold" {...subtitle.action.button}>
             <StyledLink.Text>{content}</StyledLink.Text>
           </StyledLink>
         );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/ManualDownloadLink.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/ManualDownloadLink.tsx
index fba67726d6..d6d0554a39 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/ManualDownloadLink.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/ManualDownloadLink.tsx
@@ -6,7 +6,7 @@ export function ManualDownloadLink() {
   const downloadUrl = useDownloadUrl();
 
   return (
-    <ExternalLink variant="labelTiny" to={downloadUrl}>
+    <ExternalLink variant="labelTinySemiBold" to={downloadUrl}>
       <ExternalLink.Text>
         {
           // TRANSLATORS: Link shown to optionally manually download the update
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx
index 5e0aa6d11f..4835b28040 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx
@@ -50,7 +50,7 @@ export function DaitaSettingsView() {
                 {showDaitaMultihopInfo && (
                   <Flex $gap="small" $alignItems="center">
                     <Icon icon="info-circle" color="whiteOnBlue60" size="small" />
-                    <Text variant="labelTiny" color="whiteAlpha60">
+                    <Text variant="labelTinySemiBold" color="whiteAlpha60">
                       {messages.pgettext(
                         'wireguard-settings-view',
                         'Multihop is being used to enable DAITA for your selected location',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/footer-text/FooterText.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/footer-text/FooterText.tsx
index 61e605fb81..ca51410798 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/footer-text/FooterText.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/footer-text/FooterText.tsx
@@ -3,5 +3,5 @@ import { Text, TextProps } from '../../../../../../../lib/components';
 export type FooterTextProps = TextProps;
 
 export function FooterText(props: FooterTextProps) {
-  return <Text variant="labelTiny" {...props}></Text>;
+  return <Text variant="labelTinySemiBold" {...props}></Text>;
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/login/LoginView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/login/LoginView.tsx
index 939eb82e20..e219e09a97 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/login/LoginView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/login/LoginView.tsx
@@ -158,7 +158,7 @@ class Login extends React.Component<IProps, IState> {
               </FlexColumn>
               <Flex $justifyContent="center">
                 <StyledLine $margin={{ vertical: 'small', right: 'small' }} />
-                <Text variant="labelTiny">
+                <Text variant="labelTinySemiBold">
                   {
                     // TRANSLATORS: Text shown between two horizontal lines above the "create account" button.
                     // TRANSLATORS: In this context it is used to separate the users alternative of logging in
@@ -372,7 +372,11 @@ class Login extends React.Component<IProps, IState> {
     return (
       <>
         <Flex $flexDirection="column" $gap="tiny">
-          <Label htmlFor={inputId} variant="labelTiny" color="whiteAlpha60" data-testid="subtitle">
+          <Label
+            htmlFor={inputId}
+            variant="labelTinySemiBold"
+            color="whiteAlpha60"
+            data-testid="subtitle">
             {this.formSubtitle()}
           </Label>
           <form onSubmit={this.onSubmit}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/FeatureIndicators.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/FeatureIndicators.tsx
index b2cadb7aac..9fb26997e8 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/FeatureIndicators.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/FeatureIndicators.tsx
@@ -180,7 +180,7 @@ export function FeatureIndicators(props: FeatureIndicatorsProps) {
             })}
           </StyledFeatureIndicatorsWrapper>
           <StyledEllipsisSpacer
-            variant="labelTiny"
+            variant="labelTinySemiBold"
             $display={!props.expanded}
             ref={ellipsisSpacerRef}>
             {
@@ -190,7 +190,7 @@ export function FeatureIndicators(props: FeatureIndicatorsProps) {
             }
           </StyledEllipsisSpacer>
           <StyledEllipsis
-            variant="labelTiny"
+            variant="labelTinySemiBold"
             onClick={props.expandIsland}
             $display={!props.expanded}
             ref={ellipsisRef}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/header-description/HeaderDescription.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/header-description/HeaderDescription.tsx
index bb6a602731..ae89618cba 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/header-description/HeaderDescription.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/header-description/HeaderDescription.tsx
@@ -38,7 +38,7 @@ export function HeaderDescription() {
               aria-description={message}
               as="button"
               onClick={showUnsupportedDialog}
-              variant="labelTiny">
+              variant="labelTinySemiBold">
               <Link.Text>
                 {
                   // TRANSLATORS: Link for learning more
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/custom-dns-enabled-footer/CustomDnsEnabledFooter.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/custom-dns-enabled-footer/CustomDnsEnabledFooter.tsx
index 931471d231..d592727583 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/custom-dns-enabled-footer/CustomDnsEnabledFooter.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/custom-dns-enabled-footer/CustomDnsEnabledFooter.tsx
@@ -17,7 +17,7 @@ export function CustomDnsEnabledFooter() {
 
   return (
     <Flex $padding={{ top: 'tiny', horizontal: 'medium' }}>
-      <Text variant="labelTiny" color="whiteAlpha60">
+      <Text variant="labelTinySemiBold" color="whiteAlpha60">
         {sprintf(blockingDisabledText, { customDnsFeatureName })}
       </Text>
     </Flex>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx
index 80ca4991c8..b3cce5b04d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx
@@ -98,7 +98,7 @@ export function TunnelProtocolSetting() {
                 { openVpn: strings.openvpn },
               )}{' '}
             </SettingsListbox.Text>
-            <ExternalLink variant="labelTiny" to={urls.removingOpenVpnBlog}>
+            <ExternalLink variant="labelTinySemiBold" to={urls.removingOpenVpnBlog}>
               <ExternalLink.Text>
                 {sprintf(
                   // TRANSLATORS: Link in tunnel protocol selector footer to blog post
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx
index 5589764c56..0ac893db9e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx
@@ -74,7 +74,7 @@ export function ObfuscationSettings() {
               <SettingsListbox.SplitOption.Label>
                 {messages.pgettext('wireguard-settings-view', 'Shadowsocks')}
               </SettingsListbox.SplitOption.Label>
-              <Text variant="labelTiny" color="whiteAlpha60">
+              <Text variant="labelTinySemiBold" color="whiteAlpha60">
                 {sprintf(subLabelTemplate, {
                   port: formatPortForSubLabel(obfuscationSettings.shadowsocksSettings.port),
                 })}
@@ -92,7 +92,7 @@ export function ObfuscationSettings() {
               <SettingsListbox.SplitOption.Label>
                 {messages.pgettext('wireguard-settings-view', 'UDP-over-TCP')}
               </SettingsListbox.SplitOption.Label>
-              <Text variant="labelTiny" color="whiteAlpha60">
+              <Text variant="labelTinySemiBold" color="whiteAlpha60">
                 {sprintf(subLabelTemplate, {
                   port: formatPortForSubLabel(obfuscationSettings.udp2tcpSettings.port),
                 })}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text/ListItemText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text/ListItemText.tsx
index 0b76c45934..9296ff294b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text/ListItemText.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text/ListItemText.tsx
@@ -5,5 +5,11 @@ export type ListItemTextProps<E extends React.ElementType = 'span'> = TextProps<
 
 export const ListItemText = <E extends React.ElementType = 'span'>(props: ListItemTextProps<E>) => {
   const { disabled } = useListItemContext();
-  return <Text variant="labelTiny" color={disabled ? 'whiteAlpha40' : 'whiteAlpha60'} {...props} />;
+  return (
+    <Text
+      variant="labelTinySemiBold"
+      color={disabled ? 'whiteAlpha40' : 'whiteAlpha60'}
+      {...props}
+    />
+  );
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text-field/components/text-field-label/TextFieldLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text-field/components/text-field-label/TextFieldLabel.tsx
index dad212cf43..8439ec10db 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text-field/components/text-field-label/TextFieldLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text-field/components/text-field-label/TextFieldLabel.tsx
@@ -5,5 +5,5 @@ export type TextFieldLabelProps = TextProps;
 
 export const TextFieldLabel = (props: TextFieldLabelProps) => {
   const { labelId } = useTextFieldContext();
-  return <Text id={labelId} variant="labelTiny" {...props} />;
+  return <Text id={labelId} variant="labelTinySemiBold" {...props} />;
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTiny.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTiny.tsx
index c8dc9865cc..dcdec8cce3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTiny.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTiny.tsx
@@ -3,5 +3,5 @@ import { Text, TextProps } from './Text';
 export type LabelTinyProps<E extends React.ElementType = 'span'> = TextProps<E>;
 
 export const LabelTiny = <T extends React.ElementType = 'span'>(props: LabelTinyProps<T>) => (
-  <Text variant="labelTiny" {...props} />
+  <Text variant="labelTinySemiBold" {...props} />
 );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/typography-variables.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/typography-variables.ts
index 121bb2af89..9ec5c787cf 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/typography-variables.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/typography-variables.ts
@@ -71,7 +71,7 @@ export type Typography =
   | 'titleMedium'
   | 'bodySmall'
   | 'bodySmallSemibold'
-  | 'labelTiny'
+  | 'labelTinySemiBold'
   | 'footnoteMini';
 
 export interface TypographyProperties {
@@ -112,7 +112,7 @@ export const typography: Record<Typography, TypographyProperties> = {
     fontSize: FontSizes.small,
     lineHeight: LineHeights.small,
   },
-  labelTiny: {
+  labelTinySemiBold: {
     fontFamily: Fonts.label,
     fontWeight: FontWeights.semiBold,
     fontSize: FontSizes.tiny,