[CL-265] CL/extension refresh feature branch

.github/whitelist-capital-letters.txt

@@ -5,16 +5,6 @@
 ./apps/browser/store/windows/Assets
 ./bitwarden_license/README.md
 ./libs/angular/src/directives/cipherListVirtualScroll.directive.ts
-./libs/angular/src/scss/webfonts/Open_Sans-italic-700.woff
-./libs/angular/src/scss/webfonts/Open_Sans-normal-300.woff
-./libs/angular/src/scss/webfonts/Open_Sans-normal-700.woff
-./libs/angular/src/scss/webfonts/Open_Sans-italic-300.woff
-./libs/angular/src/scss/webfonts/Open_Sans-italic-600.woff
-./libs/angular/src/scss/webfonts/Open_Sans-italic-800.woff
-./libs/angular/src/scss/webfonts/Open_Sans-italic-400.woff
-./libs/angular/src/scss/webfonts/Open_Sans-normal-600.woff
-./libs/angular/src/scss/webfonts/Open_Sans-normal-800.woff
-./libs/angular/src/scss/webfonts/Open_Sans-normal-400.woff
 ./libs/admin-console/README.md
 ./libs/auth/README.md
 ./libs/billing/README.md

apps/browser/gulpfile.js

@@ -24,7 +24,7 @@ const paths = {
 const filters = {
   fonts: [
     "!build/popup/fonts/*",
-    "build/popup/fonts/Open_Sans*.woff",
+    "build/popup/fonts/dm-sans[opsz,wght].woff2",
     "build/popup/fonts/bwi-font.woff2",
     "build/popup/fonts/bwi-font.woff",
     "build/popup/fonts/bwi-font.ttf",

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-size-base: 14px;
 $text-color: #212529;
 $muted-text-color: #6c747c;

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">

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>

apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html

@@ -6,7 +6,7 @@
     <div class="tw-flex tw-flex-1">
       <a
         *ngFor="let button of navButtons"
-        class="tw-group tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 tw-pt-3 tw-w-1/4 tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-500"
+        class="tw-group tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 tw-pt-3 tw-w-1/4 tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-600"
         [ngClass]="rla.isActive ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'"
         [title]="button.label"
         [routerLink]="button.page"

apps/browser/src/popup/scss/base.scss

@@ -83,9 +83,9 @@ a:not(popup-page a, popup-tab-navigation a) {
   }
 }
 
-input,
-select,
-textarea {
+input:not(bit-form-field 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 +95,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 +286,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;

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;

apps/browser/src/popup/scss/tailwind.css

@@ -3,3 +3,26 @@
 @tailwind utilities;
 
 @import "../../../../../libs/components/src/tw-theme.css";
+
+@layer base {
+  /* Chrome & Safari support */
+  ::-webkit-scrollbar {
+    @apply tw-overflow-auto;
+  }
+  ::-webkit-scrollbar-thumb {
+    @apply tw-bg-secondary-500 tw-rounded-lg tw-border-4 tw-border-solid tw-border-transparent tw-bg-clip-content;
+  }
+  ::-webkit-scrollbar-track {
+    @apply tw-bg-background-alt;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    @apply tw-bg-secondary-600;
+  }
+
+  /* FireFox support */
+  * {
+    @supports (-moz-appearance: none) {
+      scrollbar-color: rgb(var(--color-secondary-500)) rgb(var(--color-background-alt));
+    }
+  }
+}

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;

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;

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;

apps/web/src/404.html

@@ -30,7 +30,7 @@ <h1 class="tw-mb-0 tw-h1">Sorry, this page isn't available.</h1>
 
       <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>

apps/web/src/app/admin-console/organizations/manage/groups.component.ts

@@ -81,8 +81,8 @@
   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);

apps/web/src/app/admin-console/organizations/members/members.component.ts

@@ -99,8 +99,8 @@
   );
 
   // Fixed sizes used for cdkVirtualScroll
-  protected rowHeight = 62;
-  protected rowHeightClass = `tw-h-[62px]`;
+  protected rowHeight = 69;
+  protected rowHeightClass = `tw-h-[69px]`;
 
   constructor(
     apiService: ApiService,

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"

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"

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,

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,

apps/web/src/app/vault/components/vault-items/vault-items.component.ts

@@ -13,8 +13,8 @@
 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 = 74;
+export const RowHeightClass = `tw-h-[74px]`;
 
 const MaxSelectionCount = 500;
 

apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.html

@@ -8,7 +8,7 @@
   {{ "updateBrowserDesc" | i18n }}
   <a
     bitLink
-    linkType="contrast"
+    linkType="secondary"
     target="_blank"
     href="https://browser-update.org/update-browser.html"
     rel="noreferrer noopener"
@@ -25,7 +25,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>
@@ -46,7 +46,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>

apps/web/src/scss/base.scss

@@ -1,5 +1,5 @@
 html {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 body {

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 {

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;

bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-add-edit-dialog/domain-add-edit-dialog.component.html

@@ -33,12 +33,10 @@
         <button
           type="button"
           bitSuffix
-          bitButton
+          bitIconButton="bwi-clone"
           appA11yTitle="{{ 'copyDnsTxtRecord' | i18n }}"
           (click)="copyDnsTxt()"
-        >
-          <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-        </button>
+        ></button>
       </bit-form-field>
 
       <bit-callout

bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.ts

@@ -49,8 +49,8 @@
   dataSource = new MembersTableDataSource();
   loading = true;
   providerId: string;
-  rowHeight = 62;
-  rowHeightClass = `tw-h-[62px]`;
+  rowHeight = 69;
+  rowHeightClass = `tw-h-[69px]`;
   status: ProviderUserStatusType = null;
 
   userStatusType = ProviderUserStatusType;

bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html

@@ -50,7 +50,7 @@
     <a
       href="https://bitwarden.com/contact/"
       bitLink
-      linkType="contrast"
+      linkType="secondary"
       target="_blank"
       rel="noreferrer"
     >