Update VPN client and gateway behavior

src/web/styles/features/subscription.css

@@ -9,9 +9,9 @@
 
 .client-inline-error.is-subscription small {
   flex-basis: 100%;
-  font-size: 8px;
-  font-weight: 500;
-  letter-spacing: 0.04em;
+  font: var(--type-micro);
+  letter-spacing: var(--type-micro-tracking);
+  text-transform: var(--type-micro-transform);
   opacity: 0.45;
   animation: client-subscription-code-in 560ms 90ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
@@ -56,8 +56,9 @@
 .client-profiles-header h2 {
   flex: 1;
   margin: 0;
-  font-size: 16px;
-  letter-spacing: 0.02em;
+  font: var(--type-drawer-title);
+  letter-spacing: var(--type-drawer-title-tracking);
+  text-transform: var(--type-drawer-title-transform);
 }
 
 .client-profile-list {
@@ -95,7 +96,7 @@
 
 .client-profile-chevron {
   color: var(--client-muted);
-  font-size: 20px;
+  font-size: var(--font-size-icon-chevron);
   transform: rotate(0);
   transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
 }
@@ -126,28 +127,34 @@
 }
 
 .client-profile-title strong {
-  font-size: 12px;
-  letter-spacing: -0.02em;
+  font: var(--type-data);
+  letter-spacing: var(--type-data-tracking);
+  text-transform: var(--type-data-transform);
 }
 
 .client-profile-title small {
   color: var(--client-muted);
-  font-size: 9px;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-profile-title em {
   padding: 0;
   color: var(--client-accent);
-  font-size: 7px;
+  font: var(--type-micro);
+  letter-spacing: var(--type-micro-tracking);
+  text-transform: var(--type-micro-transform);
   font-style: normal;
-  letter-spacing: 0.08em;
 }
 
 .client-profile-usage {
   max-width: 126px;
   overflow: hidden;
   color: var(--client-muted);
-  font-size: 8px;
+  font: var(--type-micro);
+  letter-spacing: var(--type-micro-tracking);
+  text-transform: var(--type-micro-transform);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -293,14 +300,18 @@
 .client-profile-selected-server strong {
   min-width: 0;
   overflow: hidden;
-  font-size: 10px;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .client-profile-selected-server small {
   color: var(--client-muted);
-  font-size: 8px;
+  font: var(--type-micro);
+  letter-spacing: var(--type-micro-tracking);
+  text-transform: var(--type-micro-transform);
   white-space: nowrap;
 }
 
@@ -321,9 +332,9 @@
   border: 0;
   background: transparent;
   color: var(--client-accent);
-  font: 600 9px/1 inherit;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   cursor: pointer;
 }
 
@@ -377,8 +388,9 @@
   min-height: 18px;
   margin: 0;
   color: var(--client-muted);
-  font-size: 8px;
-  line-height: 1.45;
+  font: var(--type-micro);
+  letter-spacing: var(--type-micro-tracking);
+  text-transform: var(--type-micro-transform);
 }
 
 .client-profile-local-status {
@@ -403,7 +415,9 @@
   outline: 0;
   background: transparent;
   color: var(--client-text);
-  font: 500 10px/1 inherit;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
 }
 
 .client-profile-add input:focus {
@@ -426,7 +440,9 @@
   border: 0;
   background: transparent;
   color: var(--client-muted);
-  font: 600 9px/1 inherit;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   cursor: pointer;
 }
 
@@ -451,13 +467,15 @@
 
 .client-first-run-copy span {
   color: var(--client-muted);
-  font-size: 9px;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-first-run-copy strong {
-  font-size: 16px;
+  font: var(--type-section-title);
+  letter-spacing: var(--type-section-title-tracking);
+  text-transform: var(--type-section-title-transform);
 }
 
 @media (max-width: 520px) {
@@ -471,8 +489,7 @@
 
   .client-profile-disclosure,
   .client-profile-refresh,
-  .client-profile-delete,
-  .client-profiles-header > button:not(.client-drawer-close) {
+  .client-profile-delete {
     min-height: 44px;
   }
 }