[CL-210] Change base font size from 14px to 16px (#10779)

2026-02-13 06:54:07 +00:00 · 2024-09-03 14:14:32 -04:00
parent 698b292d52
commit 4b770daab2
13 changed files with 21 additions and 25 deletions
--- a/apps/browser/src/popup/scss/variables.scss
+++ b/apps/browser/src/popup/scss/variables.scss
@@ -4,7 +4,7 @@ $dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord";

 $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/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
@@ -97,8 +97,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/billing/shared/payment/payment.component.ts
+++ b/apps/web/src/app/billing/shared/payment/payment.component.ts
@@ -81,7 +81,7 @@ export class PaymentComponent implements OnInit, OnDestroy {
        fontFamily:
          '"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
@@ -13,8 +13,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 = 74;
+export const RowHeightClass = `tw-h-[74px]`;

 const MaxSelectionCount = 500;

--- 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/bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.ts
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.ts
@@ -49,8 +49,8 @@ export class MembersComponent extends BaseMembersComponent<ProviderUser> {
  dataSource = new MembersTableDataSource();
  loading = true;
  providerId: string;
-  rowHeight = 62;
-  rowHeightClass = `tw-h-[62px]`;
+  rowHeight = 69;
+  rowHeightClass = `tw-h-[69px]`;
  status: ProviderUserStatusType = null;

  userStatusType = ProviderUserStatusType;
--- a/libs/common/src/billing/services/payment-processors/stripe.service.ts
+++ b/libs/common/src/billing/services/payment-processors/stripe.service.ts
@@ -110,9 +110,9 @@ export class StripeService implements StripeServiceAbstraction {
        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/libs/components/src/checkbox/checkbox.component.ts
+++ b/libs/components/src/checkbox/checkbox.component.ts
@@ -83,7 +83,7 @@ export class CheckboxComponent implements BitFormControlAbstraction {

  @HostBinding("style.--mask-image")
  protected maskImage =
-    `url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="11" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E')`;
+    `url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E')`;

  @HostBinding("style.--indeterminate-mask-image")
  protected indeterminateImage =
--- a/libs/components/src/form-field/form-field.component.html
+++ b/libs/components/src/form-field/form-field.component.html
@@ -31,7 +31,9 @@
          [attr.for]="input.labelForId"
        >
          <ng-container *ngTemplateOutlet="labelContent"></ng-container>
-          <span *ngIf="input.required" class="tw-text-[0.625rem]"> ({{ "required" | i18n }})</span>
+          <span *ngIf="input.required" class="tw-text-[0.625rem] tw-relative tw-bottom-[-1px]">
+            ({{ "required" | i18n }})</span
+          >
        </label>
      </div>
      <div
--- a/libs/components/src/item/item.component.ts
+++ b/libs/components/src/item/item.component.ts
@@ -8,16 +8,16 @@ import { ItemActionComponent } from "./item-action.component";
 /**
 * The class used to set the height of a bit item's inner content.
 */
-export const BitItemHeightClass = `tw-h-[52px]`;
+export const BitItemHeightClass = `tw-h-[60px]`;

 /**
 * The height of a bit item in pixels. Includes any margin, padding, or border. Used by the virtual scroll
 * to estimate how many items can be displayed at once and how large the virtual container should be.
 * Needs to be updated if the item height or spacing changes.
 *
- * 52px + 5.25px bottom margin + 1px border = 58.25px
+ * 60px + 6px bottom margin + 1px border = 67px
 */
-export const BitItemHeight = 58.25; //
+export const BitItemHeight = 67; //

@Component({
  selector: "bit-item",
--- a/libs/components/src/styles.css
+++ b/libs/components/src/styles.css
@@ -7,5 +7,5 @@
@tailwind utilities;

 html {
-  font-size: 14px;
+  font-size: 16px;
 }