Use tailwind-alike classes for new styles

apps/desktop/electron-builder.json

@@ -67,7 +67,6 @@
       ],
       "CFBundleDevelopmentRegion": "en"
     },
-    "provisioningProfile": "bitwarden_desktop_developer_id.provisionprofile",
     "singleArchFiles": "node_modules/@bitwarden/desktop-napi/desktop_napi.darwin-*.node",
     "extraFiles": [
       {
@@ -146,8 +145,7 @@
     "extendInfo": {
       "LSMinimumSystemVersion": "12",
       "ElectronTeamID": "LTZ2PFU5D6"
-    },
-    "provisioningProfile": "bitwarden_desktop_appstore.provisionprofile"
+    }
   },
   "nsisWeb": {
     "oneClick": false,

apps/desktop/src/autofill/modal/credentials/fido2-create.component.html

@@ -1,9 +1,9 @@
 <div class="tw-flex tw-flex-col tw-h-full tw-bg-background-alt">
   <bit-section
     disableMargin
-    class="passkey-header-sticky tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300"
+    class="tw-app-region-header-sticky tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300"
   >
-    <bit-section-header class="passkey-header tw-bg-background">
+    <bit-section-header class="tw-app-region-drag tw-bg-background">
       <div class="tw-flex tw-items-center">
         <bit-icon [icon]="Icons.BitwardenShield" class="tw-w-10 tw-mt-2 tw-ml-2"></bit-icon>
 
@@ -16,7 +16,7 @@
         type="button"
         bitIconButton="bwi-close"
         slot="end"
-        class="passkey-header-close tw-mb-4 tw-mr-2"
+        class="tw-app-region-no-drag tw-mb-4 tw-mr-2"
         (click)="closeModal()"
       >
         {{ "close" | i18n }}

apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html

@@ -3,7 +3,7 @@
     disableMargin
     class="tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300"
   >
-    <bit-section-header class="passkey-header tw-bg-background">
+    <bit-section-header class="tw-app-region-drag tw-bg-background">
       <div class="tw-flex tw-items-center">
         <bit-icon [icon]="Icons.BitwardenShield" class="tw-w-10 tw-mt-2 tw-ml-2"></bit-icon>
 
@@ -16,7 +16,7 @@
         type="button"
         bitIconButton="bwi-close"
         slot="end"
-        class="passkey-header-close tw-mb-4 tw-mr-2"
+        class="tw-app-region-no-drag tw-mb-4 tw-mr-2"
         (click)="closeModal()"
       >
         {{ "close" | i18n }}

apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html

@@ -1,9 +1,9 @@
 <div class="tw-flex tw-flex-col tw-h-full">
   <bit-section
     disableMargin
-    class="passkey-header-sticky tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300"
+    class="tw-app-region-header-sticky tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300"
   >
-    <bit-section-header class="passkey-header tw-bg-background">
+    <bit-section-header class="tw-app-region-drag tw-bg-background">
       <div class="tw-flex tw-items-center">
         <bit-icon [icon]="Icons.BitwardenShield" class="tw-w-10 tw-mt-2 tw-ml-2"></bit-icon>
 
@@ -13,7 +13,7 @@
         type="button"
         bitIconButton="bwi-close"
         slot="end"
-        class="passkey-header-close tw-mb-4 tw-mr-2"
+        class="tw-app-region-no-drag tw-mb-4 tw-mr-2"
         (click)="closeModal()"
       >
         {{ "close" | i18n }}

apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts

@@ -1,7 +1,16 @@
 import { CommonModule } from "@angular/common";
 import { Component, OnInit, OnDestroy } from "@angular/core";
 import { RouterModule, Router } from "@angular/router";
-import { firstValueFrom, map, BehaviorSubject, Observable, Subject, takeUntil } from "rxjs";
+import {
+  firstValueFrom,
+  map,
+  combineLatest,
+  of,
+  BehaviorSubject,
+  Observable,
+  Subject,
+  takeUntil,
+} from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";

apps/desktop/src/scss/header.scss

@@ -232,17 +232,3 @@
     font-size: $font-size-small;
   }
 }
-
-.passkey-header {
-  -webkit-app-region: drag;
-}
-
-.passkey-header-close {
-  -webkit-app-region: no-drag;
-}
-
-.passkey-header-sticky {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}

eslint.config.mjs

@@ -182,7 +182,12 @@ export default tseslint.config(
         {
           // uses negative lookahead to whitelist any class that doesn't start with "tw-"
           // in other words: classnames that start with tw- must be valid TailwindCSS classes
-          whitelist: ["(?!(tw)\\-).*"],
+          whitelist: [
+            "(?!(tw)\\-).*",
+            "tw-app-region-drag",
+            "tw-app-region-no-drag",
+            "tw-app-region-header-sticky",
+          ],
         },
       ],
       "tailwindcss/enforces-negative-arbitrary-values": "error",
@@ -325,6 +330,7 @@ export default tseslint.config(
             "file-selector",
             "mfaType.*",
             "filter.*", // Temporary until filters are migrated
+            "tw-app-region*", // Custom utility for native passkey modals
           ],
         },
       ],

libs/components/src/tw-theme.css

@@ -172,6 +172,24 @@
     text-align: unset;
   }
 
+  /**
+  * tw-app-region-drag and tw-app-region-no-drag are used for Electron window dragging behavior
+  * These will replace direct -webkit-app-region usage as part of the migration to Tailwind CSS
+  */
+  .tw-app-region-drag {
+    -webkit-app-region: drag;
+  }
+
+  .tw-app-region-no-drag {
+    -webkit-app-region: no-drag;
+  }
+
+  .tw-app-region-header-sticky {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
   /**
   * Bootstrap uses z-index: 1050 for modals, dialogs and drag-and-drop previews should appear above them.
   * When bootstrap is removed, test if these styles are still needed and that overlays display properly over other content.