From c22cba76ecffbe8f9a1b222c0ac4540fdf5b5bae Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Mon, 10 Nov 2025 17:11:35 -0500
Subject: [PATCH] [PM-26984] Use medium instead of semibold or bold, and for
 headings (#17184)

---
 apps/desktop/src/scss/environment.scss        |  2 +-
 apps/desktop/src/scss/modal.scss              |  4 ++--
 .../layouts/header/web-header.component.html  |  2 +-
 .../access/access-list.component.html         |  2 +-
 .../service-accounts-list.component.html      |  2 +-
 .../shared/projects-list.component.html       |  2 +-
 .../shared/secrets-list.component.html        |  2 +-
 .../src/multi-select/scss/bw.theme.scss       |  4 ++--
 libs/components/src/tw-theme-preflight.css    | 20 +++++++++++++------
 .../src/typography/typography.directive.ts    | 12 +++++------
 10 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/apps/desktop/src/scss/environment.scss b/apps/desktop/src/scss/environment.scss
index e1356178208..699f2246b4a 100644
--- a/apps/desktop/src/scss/environment.scss
+++ b/apps/desktop/src/scss/environment.scss
@@ -21,7 +21,7 @@
   padding-left: 15px;
 
   span {
-    font-weight: 600;
+    font-weight: 500;
     font-size: $font-size-small;
   }
 }
diff --git a/apps/desktop/src/scss/modal.scss b/apps/desktop/src/scss/modal.scss
index 1d86b1e880a..b3994946394 100644
--- a/apps/desktop/src/scss/modal.scss
+++ b/apps/desktop/src/scss/modal.scss
@@ -47,7 +47,7 @@ $modal-sm: 300px !default;
 $modal-transition: transform 0.3s ease-out !default;
 
 $close-font-size: $font-size-base * 1.5 !default;
-$close-font-weight: bold !default;
+$close-font-weight: 500 !default;
 $close-color: $black !default;
 $close-text-shadow: 0 1px 0 $white !default;
 
@@ -218,7 +218,7 @@ $close-text-shadow: 0 1px 0 $white !default;
 
   h5 {
     font-size: $font-size-base;
-    font-weight: bold;
+    font-weight: 500;
     display: flex;
     align-items: center;
 
diff --git a/apps/web/src/app/layouts/header/web-header.component.html b/apps/web/src/app/layouts/header/web-header.component.html
index 992ba147075..4b833e771dd 100644
--- a/apps/web/src/app/layouts/header/web-header.component.html
+++ b/apps/web/src/app/layouts/header/web-header.component.html
@@ -12,7 +12,7 @@
       <h1
         bitTypography="h1"
         noMargin
-        class="tw-m-0 tw-mr-2 tw-leading-10 tw-flex tw-gap-1 tw-font-medium"
+        class="tw-m-0 tw-mr-2 tw-leading-10 tw-flex tw-gap-1"
         [title]="title || (routeData.titleId | i18n)"
       >
         <div class="tw-truncate">
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/access-list.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/access-list.component.html
index 3399b550ba5..6172ec22b65 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/access-list.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/access-list.component.html
@@ -21,7 +21,7 @@
   <ng-container header>
     <tr>
       <th bitCell class="tw-w-0">
-        <label class="tw-m-0 tw-flex tw-w-fit tw-gap-2 !tw-font-bold !tw-text-muted">
+        <label class="tw-m-0 tw-flex tw-w-fit tw-gap-2 !tw-font-medium !tw-text-muted">
           <input
             type="checkbox"
             (change)="$event ? toggleAll() : null"
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html
index f2fb49b73f4..bdfd149541c 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html
@@ -21,7 +21,7 @@
   <ng-container header>
     <tr>
       <th bitCell class="tw-w-0">
-        <label class="!tw-mb-0 tw-flex tw-w-fit tw-gap-2 !tw-font-bold !tw-text-muted">
+        <label class="!tw-mb-0 tw-flex tw-w-fit tw-gap-2 !tw-font-medium !tw-text-muted">
           <input
             type="checkbox"
             (change)="$event ? toggleAll() : null"
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/projects-list.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/shared/projects-list.component.html
index ef5df7aaf4c..c205d60b977 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/projects-list.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/projects-list.component.html
@@ -21,7 +21,7 @@
   <ng-container header>
     <tr>
       <th bitCell class="tw-w-0" *ngIf="showMenus">
-        <label class="!tw-mb-0 tw-flex tw-w-fit tw-gap-2 !tw-font-bold !tw-text-muted">
+        <label class="!tw-mb-0 tw-flex tw-w-fit tw-gap-2 !tw-font-medium !tw-text-muted">
           <input
             type="checkbox"
             (change)="$event ? toggleAll() : null"
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html
index 35a9b3c5bba..a7314d969d6 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html
@@ -26,7 +26,7 @@
 <bit-table-scroll *ngIf="secrets?.length >= 1" [dataSource]="dataSource" [rowSize]="66">
   <ng-container header>
     <th bitCell class="tw-w-0">
-      <label class="!tw-mb-0 tw-flex tw-w-fit tw-gap-2 !tw-font-bold !tw-text-muted">
+      <label class="!tw-mb-0 tw-flex tw-w-fit tw-gap-2 !tw-font-medium !tw-text-muted">
         <input
           type="checkbox"
           (change)="$event ? toggleAll() : null"
diff --git a/libs/components/src/multi-select/scss/bw.theme.scss b/libs/components/src/multi-select/scss/bw.theme.scss
index b375c2f739c..dc3f3f32934 100644
--- a/libs/components/src/multi-select/scss/bw.theme.scss
+++ b/libs/components/src/multi-select/scss/bw.theme.scss
@@ -342,7 +342,7 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
       &.ng-option-selected.ng-option-marked {
         color: $ng-select-dropdown-optgroup-marked;
         background-color: $ng-select-selected;
-        font-weight: 600;
+        font-weight: 500;
       }
     }
     .ng-option {
@@ -356,7 +356,7 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
       &.ng-option-selected.ng-option-marked {
         color: $ng-select-selected-text;
         .ng-option-label {
-          font-weight: 600;
+          font-weight: 500;
         }
       }
       &.ng-option-marked {
diff --git a/libs/components/src/tw-theme-preflight.css b/libs/components/src/tw-theme-preflight.css
index 52287611c37..fedc2d1d232 100644
--- a/libs/components/src/tw-theme-preflight.css
+++ b/libs/components/src/tw-theme-preflight.css
@@ -14,22 +14,22 @@
   }
 
   h1 {
-    @apply tw-text-3xl tw-text-main tw-mb-2;
+    @apply tw-text-3xl tw-text-main tw-mb-2 tw-font-medium;
   }
   h2 {
-    @apply tw-text-2xl tw-text-main tw-mb-2;
+    @apply tw-text-2xl tw-text-main tw-mb-2 tw-font-medium;
   }
   h3 {
-    @apply tw-text-xl tw-text-main tw-mb-2;
+    @apply tw-text-xl tw-text-main tw-mb-2 tw-font-medium;
   }
   h4 {
-    @apply tw-text-lg tw-text-main tw-mb-2;
+    @apply tw-text-lg tw-text-main tw-mb-2 tw-font-medium;
   }
   h5 {
-    @apply tw-text-base tw-text-main tw-mb-1.5;
+    @apply tw-text-base tw-text-main tw-mb-1.5 tw-font-medium;
   }
   h6 {
-    @apply tw-text-sm tw-text-main tw-mb-1.5;
+    @apply tw-text-sm tw-text-main tw-mb-1.5 tw-font-medium;
   }
 
   code {
@@ -82,4 +82,12 @@
   th {
     @apply tw-font-medium;
   }
+
+  b {
+    @apply tw-font-medium;
+  }
+
+  strong {
+    @apply tw-font-medium;
+  }
 }
diff --git a/libs/components/src/typography/typography.directive.ts b/libs/components/src/typography/typography.directive.ts
index b92e2e3cb4e..229f38d8b11 100644
--- a/libs/components/src/typography/typography.directive.ts
+++ b/libs/components/src/typography/typography.directive.ts
@@ -3,12 +3,12 @@ import { booleanAttribute, Directive, HostBinding, input } from "@angular/core";
 type TypographyType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "helper";
 
 const styles: Record<TypographyType, string[]> = {
-  h1: ["!tw-text-3xl", "tw-text-main"],
-  h2: ["!tw-text-2xl", "tw-text-main"],
-  h3: ["!tw-text-xl", "tw-text-main"],
-  h4: ["!tw-text-lg", "tw-text-main"],
-  h5: ["!tw-text-base", "tw-text-main"],
-  h6: ["!tw-text-sm", "tw-text-main"],
+  h1: ["!tw-text-3xl", "tw-text-main", "tw-font-medium"],
+  h2: ["!tw-text-2xl", "tw-text-main", "tw-font-medium"],
+  h3: ["!tw-text-xl", "tw-text-main", "tw-font-medium"],
+  h4: ["!tw-text-lg", "tw-text-main", "tw-font-medium"],
+  h5: ["!tw-text-base", "tw-text-main", "tw-font-medium"],
+  h6: ["!tw-text-sm", "tw-text-main", "tw-font-medium"],
   body1: ["!tw-text-base"],
   body2: ["!tw-text-sm"],
   helper: ["!tw-text-xs"],