[PM-26984] Use medium instead of semibold or bold, and for headings (#17184)

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;
   }
 }

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;
 

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

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"

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"

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"

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"

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 {

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;
+  }
 }

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"],
+  h1: ["!tw-text-3xl", "tw-text-main", "tw-font-medium"],
-  h2: ["!tw-text-2xl", "tw-text-main"],
+  h2: ["!tw-text-2xl", "tw-text-main", "tw-font-medium"],
-  h3: ["!tw-text-xl", "tw-text-main"],
+  h3: ["!tw-text-xl", "tw-text-main", "tw-font-medium"],
-  h4: ["!tw-text-lg", "tw-text-main"],
+  h4: ["!tw-text-lg", "tw-text-main", "tw-font-medium"],
-  h5: ["!tw-text-base", "tw-text-main"],
+  h5: ["!tw-text-base", "tw-text-main", "tw-font-medium"],
-  h6: ["!tw-text-sm", "tw-text-main"],
+  h6: ["!tw-text-sm", "tw-text-main", "tw-font-medium"],
   body1: ["!tw-text-base"],
   body2: ["!tw-text-sm"],
   helper: ["!tw-text-xs"],