[CL-265] CL/extension refresh feature branch (#8696)

* [CL-245] Update palette to new light and dark theme colors (#8633) * [CL-245] Add new color swatches to storybook (#8697) * [CL-238] update typography (#8997) * [CL-230] [CL-296] Update button styles (#9345) * [CL-237] Update menu styles for extension refresh (#9525) * [CL-267] Add 100-level color variants and update primary-600 (#9550) * [CL-286] Update badge to use focus-visible instead of focus (#9551) * [CL-250] Update badge styles for extension refresh (#9572) * [CL-234] callout style refresh (#9920) * [CL-233] Update form field styles (#9776) * [CL-239][CL-251][CL-342] dialog style refresh (#10096) * [CL-239] simple dialog style refresh * [CL-342] fix text overflow in dialog; add story * [CL-244] readonly fields (#10164) * [CL-352] Fix Angular errors related to form element changes (#10211) * [CL-273] Update styles for checkbox and form control (#10146) * [CL-274] Update styling for radio button (#10333) * [CL-338] Remove extra space in item content when end slot is empty (#10350) * [CL-377] Fix extension style conflict for input background (#10351) * [CL-271] Update styles for toggle (#10377) * [CL-381] Update spacing around form elements (#10432) * [CL-229] Update icon button styles (#10405) * [CL-380] Remove hover state from disabled form fields (#10639) * [CL-405] Allow toggle group input to be full width (#10658) * [CL-389] Exclude end slot label content from truncation (#10508) * [CL-383] Remove manual focus when password toggle is clicked (#10749) * [CL-278][CL-391] misc bit-item style fixes (#10758) * [CL-391] use pointer cursor on hover when link or button * [CL-210] Change base font size from 14px to 16px (#10779) * [CL-291] Finalize styling for chip select (#10771) * [CL-257] update banner component styles (#10766) * [CL-443] Fix sizing issues (#10893) * [CL-445] Fix small sizing and spacing issues (#10962) * [CL-382] Reduce element shifting on readonly hover (#10956) * [CL-396] Update theme colors to new hexes (#10968) * [CL-395] Remove text headers color (#10997) * [CL-404] Switch to primary-600 for all focus indicators (#11015) * [CL-397] Remove primary-500 (#11036) * [CL-447] Ensure DM Sans displays correctly at all font weights (#11041) * [CL-448] Scrollbar Styles (#11111) * CL-252/update toast (#10996) * [CL-275] Update link styles (#11174) * [CL-446] Update hover state for unselected chip selects (#11172) * [CL-454] Improve color a11y for toast and banner interactive elements (#11200) * [CL-457] Center input text for select and multiselect (#11239) * [CL-455] Do not use responsive margin for sections in dialogs or extension (#11243) * [CL-459] Fix chip behavior when opening menu while item is selected (#11227) * [CL-388] Update vertical nav colors for new palette (#11226) * scope styled scrollbar to only select elements (#11247) * edit radio buttons to be block inputs and update spacing (#11291) * [CL-453] Fix multiselect chip spacing and truncation (#11300) * [PM-11131] Prevent duplicated sr labels on form field icon buttons (#11383) * [CL-303] Prevent chip menu from running offscreen (#11348) * [CL-476] Fix DM Sans font on Windows (#11409) * implements scrollbar styles for firefox/chrome and safari (#11447) * [CL-472] Fix search background color in extension (#11466) * [CL-481] Style updates for bit-item, bit-card, and primary-100 (#11473) * [CL-478] Remove underline on hover for most components (#11477) * [CL-477] Remove focus styles for readonly input (#11510) * [CL-487] Fix vault items virtual scroll height (#11581) * [PM-8625] Increase popup width (#11686) * [CL-494] Wrap long words in toggle group (#11659) * [CL-13820] Add class to remove link underline (#11762) * [CL-435] Prevent Windows extension from shifting (#11851) * [CL-503] Add notification color variables (#11802) * [PM-14043] Update size of toggle group label to fit more content (#11881) * [CL-498] Set chip menu width minimum to chip select width (#11905) --------- Co-authored-by: Will Martin <contact@willmartian.com> Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com> Co-authored-by: Nick Krantz <125900171+nick-livefront@users.noreply.github.com> Co-authored-by: Merissa Weinstein <merissa.k.weinstein@gmail.com> Co-authored-by: Danielle Flinn <43477473+danielleflinn@users.noreply.github.com>
2025-12-15 07:43:35 +00:00 · 2024-11-15 09:21:17 -05:00
parent 5c540a86f4
commit 3b5b2d6bd6
150 changed files with 1767 additions and 1059 deletions
--- a/apps/browser/src/autofill/shared/styles/variables.scss
+++ b/apps/browser/src/autofill/shared/styles/variables.scss
@@ -2,7 +2,7 @@

 $dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord";

-$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-source-code-pro: "Source Code Pro", monospace;
 $font-size-base: 14px;
 $text-color: #212529;
--- a/apps/browser/src/platform/popup/layout/popup-footer.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-footer.component.html
@@ -1,5 +1,5 @@
 <footer
-  class="tw-p-3 tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-bg-background"
+  class="tw-p-4 tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-bg-background"
 >
  <div class="tw-max-w-screen-sm tw-mx-auto tw-flex tw-justify-between tw-w-full">
    <div class="tw-flex tw-justify-start tw-gap-2">
--- a/apps/browser/src/platform/popup/layout/popup-header.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-header.component.html
@@ -1,5 +1,5 @@
 <header
-  class="tw-p-4 tw-transition-colors tw-duration-200 tw-border-0 tw-border-b tw-border-solid"
+  class="tw-px-4 tw-py-3 tw-transition-colors tw-duration-200 tw-border-0 tw-border-b tw-border-solid"
  [ngClass]="{
    'tw-bg-background-alt tw-border-transparent':
      this.background === 'alt' && !pageContentScrolled(),
@@ -17,7 +17,7 @@
        [attr.aria-label]="'back' | i18n"
        [bitAction]="backAction"
      ></button>
-      <h1 *ngIf="pageTitle" bitTypography="h3" class="!tw-mb-0.5 tw-text-headers">
+      <h1 *ngIf="pageTitle" bitTypography="h3" class="!tw-mb-0.5">
        {{ pageTitle }}
      </h1>
      <ng-content></ng-content>
--- a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
+++ b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
@@ -39,7 +39,7 @@ class ExtensionContainerComponent {}
@Component({
  selector: "vault-placeholder",
  template: `
-    <bit-section disableMargin>
+    <bit-section>
      <bit-item-group aria-label="Mock Vault Items">
        <bit-item *ngFor="let item of data; index as i">
          <button bit-item-content>
--- a/apps/browser/src/platform/popup/layout/popup-page.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-page.component.html
@@ -12,7 +12,7 @@
    <ng-content select="[slot=above-scroll-area]"></ng-content>
  </div>
  <div
-    class="tw-max-w-screen-sm tw-mx-auto tw-overflow-y-auto tw-flex tw-flex-col tw-w-full tw-h-full"
+    class="tw-max-w-screen-sm tw-mx-auto tw-overflow-y-auto tw-flex tw-flex-col tw-w-full tw-h-full tw-styled-scrollbar"
    (scroll)="handleScroll($event)"
    [ngClass]="{ 'tw-invisible': loading }"
  >
--- a/apps/browser/src/popup/app.module.ts
+++ b/apps/browser/src/popup/app.module.ts
@@ -104,7 +104,7 @@ import "../platform/popup/locales";
      maxOpened: 2,
      autoDismiss: true,
      closeButton: true,
-      positionClass: "toast-bottom-full-width",
+      positionClass: "toast-top-full-width",
    }),
    BrowserAnimationsModule,
    BrowserModule,
--- a/apps/browser/src/popup/images/loading.svg
+++ b/apps/browser/src/popup/images/loading.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
-  <text fill="%23333333" x="50%" y="50%" font-family="\'Open Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
+  <text fill="%23333333" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
        font-size="18" text-anchor="middle">
    Loading...
  </text>
--- a/apps/browser/src/popup/scss/base.scss
+++ b/apps/browser/src/popup/scss/base.scss
@@ -6,6 +6,10 @@
  margin: 0;
 }

+html {
+  overflow: hidden;
+}
+
 html,
 body {
  font-family: $font-family-sans-serif;
@@ -15,7 +19,7 @@ body {
 }

 body {
-  width: 375px !important;
+  width: 380px !important;
  height: 600px !important;
  position: relative;
  min-height: 100vh;
@@ -83,9 +87,9 @@ a:not(popup-page a, popup-tab-navigation a) {
  }
 }

-input,
-select,
-textarea {
+input:not(bit-form-field input, bit-search input),
+select:not(bit-form-field select),
+textarea:not(bit-form-field textarea) {
  @include themify($themes) {
    color: themed("textColor");
    background-color: themed("inputBackgroundColor");
@@ -95,7 +99,7 @@ textarea {
 input,
 select,
 textarea,
-button {
+button:not(bit-chip-select button) {
  font-size: $font-size-base;
  font-family: $font-family-sans-serif;
 }
@@ -286,7 +290,7 @@ header:not(bit-callout header, bit-dialog header, popup-page header) {
      }
    }

-    input {
+    input:not(bit-form-field input) {
      width: 100%;
      margin: 0;
      border: none;
--- a/apps/browser/src/popup/scss/misc.scss
+++ b/apps/browser/src/popup/scss/misc.scss
@@ -306,7 +306,7 @@ input[type="password"]::-ms-reveal {
 // contrast against the background, so its inversion is also still readable)
 // and suppress user selection for most elements (to make it more app-like)

-::selection {
+:not(bit-form-field input)::selection {
  @include themify($themes) {
    color: themed("backgroundColor");
    background-color: themed("primaryAccentColor");
--- a/apps/browser/src/popup/scss/pages.scss
+++ b/apps/browser/src/popup/scss/pages.scss
@@ -301,7 +301,7 @@ app-fido2-v1 {
      margin-top: 32px;

      .subtitle {
-        font-family: Open Sans;
+        font-family: "DM Sans";
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
--- a/apps/browser/src/popup/scss/tailwind.css
+++ b/apps/browser/src/popup/scss/tailwind.css
@@ -3,3 +3,24 @@
@tailwind utilities;

@import "../../../../../libs/components/src/tw-theme.css";
+
+@layer components {
+  /** Safari Support */
+  html.browser_safari .tw-styled-scrollbar::-webkit-scrollbar {
+    @apply tw-overflow-auto;
+  }
+  html.browser_safari .tw-styled-scrollbar::-webkit-scrollbar-thumb {
+    @apply tw-bg-secondary-500 tw-rounded-lg tw-border-4 tw-border-solid tw-border-transparent tw-bg-clip-content;
+  }
+  html.browser_safari .tw-styled-scrollbar::-webkit-scrollbar-track {
+    @apply tw-bg-background-alt;
+  }
+  html.browser_safari .tw-styled-scrollbar::-webkit-scrollbar-thumb:hover {
+    @apply tw-bg-secondary-600;
+  }
+
+  /* FireFox & Chrome support */
+  html:not(.browser_safari) .tw-styled-scrollbar {
+    scrollbar-color: rgb(var(--color-secondary-500)) rgb(var(--color-background-alt));
+  }
+}
--- a/apps/browser/src/popup/scss/variables.scss
+++ b/apps/browser/src/popup/scss/variables.scss
@@ -2,9 +2,9 @@

 $dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord";

-$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
-$font-size-base: 14px;
+$font-size-base: 16px;
 $font-size-large: 18px;
 $font-size-xlarge: 22px;
 $font-size-xxlarge: 28px;
--- a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
+++ b/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
@@ -58,7 +58,11 @@
      </div>
    </div>

-    <div *ngIf="vaultState === null" cdkVirtualScrollingElement class="tw-h-full tw-p-3">
+    <div
+      *ngIf="vaultState === null"
+      cdkVirtualScrollingElement
+      class="tw-h-full tw-p-3 tw-styled-scrollbar"
+    >
      <app-autofill-vault-list-items></app-autofill-vault-list-items>
      <app-vault-list-items-container
        [title]="'favorites' | i18n"
--- a/apps/desktop/src/app/components/avatar.component.ts
+++ b/apps/desktop/src/app/components/avatar.component.ts
@@ -111,7 +111,7 @@ export class AvatarComponent implements OnChanges, OnInit {
    textTag.setAttribute("fill", Utils.pickTextColorBasedOnBgColor(color, 135, true));
    textTag.setAttribute(
      "font-family",
-      '"Open Sans","Helvetica Neue",Helvetica,Arial,' +
+      '"DM Sans","Helvetica Neue",Helvetica,Arial,' +
        'sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
    );
    textTag.textContent = character;
--- a/apps/desktop/src/images/loading.svg
+++ b/apps/desktop/src/images/loading.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
-  <text fill="%23333333" x="50%" y="50%" font-family="\'Open Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
+  <text fill="%23333333" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
        font-size="18" text-anchor="middle">
    Loading...
  </text>
--- a/apps/desktop/src/scss/variables.scss
+++ b/apps/desktop/src/scss/variables.scss
@@ -2,7 +2,7 @@

 $dark-icon-themes: "theme_dark", "theme_nord";

-$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
 $font-size-base: 14px;
 $font-size-large: 18px;
--- a/apps/web/src/404.html
+++ b/apps/web/src/404.html
@@ -30,7 +30,7 @@

      <a href="/" class="tw-btn-secondary tw-inline-block">Go to your web vault</a>
    </main>
-    <footer class="tw-mt-auto tw-h-40 tw-bg-primary-500 tw-flex tw-justify-center tw-items-center">
+    <footer class="tw-mt-auto tw-h-40 tw-bg-primary-600 tw-flex tw-justify-center tw-items-center">
      <i class="bwi bwi-shield tw-text-contrast tw-text-4xl"></i>
    </footer>
  </body>
--- a/apps/web/src/app/admin-console/organizations/manage/groups.component.ts
+++ b/apps/web/src/app/admin-console/organizations/manage/groups.component.ts
@@ -81,8 +81,8 @@ export class GroupsComponent {
  protected searchControl = new FormControl("");

  // Fixed sizes used for cdkVirtualScroll
-  protected rowHeight = 46;
-  protected rowHeightClass = `tw-h-[46px]`;
+  protected rowHeight = 52;
+  protected rowHeightClass = `tw-h-[52px]`;

  protected ModalTabType = GroupAddEditTabType;
  private refreshGroups$ = new BehaviorSubject<void>(null);
--- a/apps/web/src/app/admin-console/organizations/members/members.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/members.component.ts
@@ -104,8 +104,8 @@ export class MembersComponent extends BaseMembersComponent<OrganizationUserView>
  );

  // Fixed sizes used for cdkVirtualScroll
-  protected rowHeight = 62;
-  protected rowHeightClass = `tw-h-[62px]`;
+  protected rowHeight = 69;
+  protected rowHeightClass = `tw-h-[69px]`;

  constructor(
    apiService: ApiService,
--- a/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html
+++ b/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html
@@ -3,13 +3,7 @@
 <div class="tw-flex" *ngIf="!hideMultiSelect">
  <bit-form-field *ngIf="permissionMode == 'edit'" class="tw-mr-3 tw-shrink-0">
    <bit-label>{{ "permission" | i18n }}</bit-label>
-    <!--
-      Built-in select height differs between browsers, this fix makes sure we match bit-multi-select height.
-      We might want to reconsider this fix when/if we implement
-      [CL-78] [Improvement] Completely restyled selects (https://bitwarden.atlassian.net/browse/CL-78)
-    -->
    <select
-      class="tw-h-[35px]"
      bitInput
      [disabled]="disabled"
      [(ngModel)]="initialPermission"
--- a/apps/web/src/app/auth/settings/verify-email.component.html
+++ b/apps/web/src/app/auth/settings/verify-email.component.html
@@ -3,7 +3,7 @@
  <button
    id="sendBtn"
    bitLink
-    linkType="contrast"
+    linkType="secondary"
    bitButton
    type="button"
    buttonType="unstyled"
--- a/apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.html
+++ b/apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.html
@@ -65,7 +65,7 @@
      {{ "launchCloudSubscription" | i18n }}
    </a>
    <form [formGroup]="form">
-      <bit-radio-group formControlName="updateMethod">
+      <bit-radio-group formControlName="updateMethod" [block]="true">
        <h2 class="mt-5">
          {{ "licenseAndBillingManagement" | i18n }}
        </h2>
@@ -73,7 +73,6 @@
          id="automatic-sync"
          [value]="licenseOptions.SYNC"
          [disabled]="disableLicenseSyncControl"
-          class="tw-block"
          *ngIf="showAutomaticSyncAndManualUpload"
        >
          <bit-label
@@ -94,29 +93,31 @@
          </bit-hint>
        </bit-radio-button>
        <ng-container *ngIf="updateMethod === licenseOptions.SYNC">
-          <button
-            bitButton
-            buttonType="secondary"
-            type="button"
-            (click)="manageBillingSyncSelfHosted()"
-          >
-            {{ "manageBillingTokenSync" | i18n }}
-          </button>
-          <button
-            bitButton
-            buttonType="primary"
-            type="button"
-            [bitAction]="syncLicense"
-            [disabled]="!billingSyncEnabled"
-          >
-            {{ "syncLicense" | i18n }}
-          </button>
+          <div class="tw-mt-6">
+            <button
+              bitButton
+              buttonType="secondary"
+              type="button"
+              (click)="manageBillingSyncSelfHosted()"
+            >
+              {{ "manageBillingTokenSync" | i18n }}
+            </button>
+            <button
+              bitButton
+              buttonType="primary"
+              type="button"
+              [bitAction]="syncLicense"
+              [disabled]="!billingSyncEnabled"
+            >
+              {{ "syncLicense" | i18n }}
+            </button>
+          </div>
        </ng-container>

        <bit-radio-button
          id="manual-upload"
          [value]="licenseOptions.UPLOAD"
-          class="tw-mt-6 tw-block"
+          class="tw-mt-6"
          *ngIf="showAutomaticSyncAndManualUpload"
        >
          <bit-label>{{ "manualUpload" | i18n }}</bit-label>
@@ -128,7 +129,7 @@
          <bit-label class="tw-mb-6 tw-block" *ngIf="!showAutomaticSyncAndManualUpload">
            {{ "licenseAndBillingManagementDesc" | i18n }}
          </bit-label>
-          <h3 *ngIf="showAutomaticSyncAndManualUpload" class="tw-font-semibold">
+          <h3 *ngIf="showAutomaticSyncAndManualUpload" class="tw-font-semibold tw-mt-6">
            {{ "uploadLicense" | i18n }}
          </h3>
          <app-update-license
--- a/apps/web/src/app/billing/services/stripe.service.ts
+++ b/apps/web/src/app/billing/services/stripe.service.ts
@@ -157,9 +157,9 @@ export class StripeService {
        base: {
          color: null,
          fontFamily:
-            '"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
+            '"DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
            '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-          fontSize: "14px",
+          fontSize: "16px",
          fontSmoothing: "antialiased",
          "::placeholder": {
            color: null,
--- a/apps/web/src/app/billing/shared/payment/payment.component.ts
+++ b/apps/web/src/app/billing/shared/payment/payment.component.ts
@@ -84,9 +84,9 @@ export class PaymentComponent implements OnInit, OnDestroy {
      base: {
        color: null,
        fontFamily:
-          '"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
+          '"DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
          '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-        fontSize: "14px",
+        fontSize: "16px",
        fontSmoothing: "antialiased",
        "::placeholder": {
          color: null,
--- a/apps/web/src/app/vault/components/vault-items/vault-items.component.ts
+++ b/apps/web/src/app/vault/components/vault-items/vault-items.component.ts
@@ -16,8 +16,8 @@ import { VaultItem } from "./vault-item";
 import { VaultItemEvent } from "./vault-item-event";

 // Fixed manual row height required due to how cdk-virtual-scroll works
-export const RowHeight = 65;
-export const RowHeightClass = `tw-h-[65px]`;
+export const RowHeight = 75.5;
+export const RowHeightClass = `tw-h-[75.5px]`;

 const MaxSelectionCount = 500;

--- a/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.html
+++ b/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.html
@@ -28,7 +28,7 @@
  {{ "updateBrowserDesc" | i18n }}
  <a
    bitLink
-    linkType="contrast"
+    linkType="secondary"
    target="_blank"
    href="https://browser-update.org/update-browser.html"
    rel="noreferrer noopener"
@@ -45,7 +45,7 @@
  (onClose)="dismissBanner(VisibleVaultBanner.KDFSettings)"
 >
  {{ "lowKDFIterationsBanner" | i18n }}
-  <a bitLink linkType="contrast" routerLink="/settings/security/security-keys">
+  <a bitLink linkType="secondary" routerLink="/settings/security/security-keys">
    {{ "changeKDFSettings" | i18n }}
  </a>
 </bit-banner>
@@ -66,7 +66,7 @@
  (onClose)="dismissBanner(VisibleVaultBanner.Premium)"
 >
  {{ "premiumUpgradeUnlockFeatures" | i18n }}
-  <a bitLink linkType="contrast" routerLink="/settings/subscription/premium">
+  <a bitLink linkType="secondary" routerLink="/settings/subscription/premium">
    {{ "goPremium" | i18n }}
  </a>
 </bit-banner>
--- a/apps/web/src/images/loading-white.svg
+++ b/apps/web/src/images/loading-white.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
-  <text fill="%23FBFBFB" x="50%" y="50%" font-family="\'Open Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
+  <text fill="%23FBFBFB" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
        font-size="18" text-anchor="middle">
    Loading...
  </text> 
--- a/apps/web/src/images/loading.svg
+++ b/apps/web/src/images/loading.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
-  <text fill="%23333333" x="50%" y="50%" font-family="\'Open Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
+  <text fill="%23333333" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
        font-size="18" text-anchor="middle">
    Loading...
  </text>
--- a/apps/web/src/scss/base.scss
+++ b/apps/web/src/scss/base.scss
@@ -1,5 +1,5 @@
 html {
-  font-size: 14px;
+  font-size: 16px;
 }

 body {
--- a/apps/web/src/scss/forms.scss
+++ b/apps/web/src/scss/forms.scss
@@ -20,7 +20,7 @@ input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: -cancel-button;
 }

-label:not(.form-check-label):not(.btn),
+label:not(.form-check-label):not(.btn):not(:has(bit-label)),
 label.bold {
  font-weight: 600;
  @include themify($themes) {
@@ -136,12 +136,12 @@ input[type="checkbox"] {
  background-color: rgb(var(--color-background));

  &:hover {
-    border-color: rgb(var(--color-primary-500));
+    border-color: rgb(var(--color-primary-600));
  }

  &.is-focused {
    outline: 0;
-    border-color: rgb(var(--color-primary-500));
+    border-color: rgb(var(--color-primary-600));
  }

  &.is-invalid {
--- a/apps/web/src/scss/variables.scss
+++ b/apps/web/src/scss/variables.scss
@@ -20,7 +20,7 @@ $theme-colors: (
 $body-bg: $white;
 $body-color: #333333;

-$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif,
+$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

 $h1-font-size: 1.7rem;