From 2cd12d961105cd90500e363fe3e0c3093606e018 Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Tue, 9 Dec 2025 21:40:00 +0100
Subject: [PATCH] [CL-434] Swap extension to use tailwind preflight (#17054)

Co-authored-by: Vicki League <vleague@bitwarden.com>
---
 .../current-account.component.html            |   2 +-
 .../layout/popup-tab-navigation.component.ts  |   2 +-
 apps/browser/src/popup/app.component.html     |   9 +-
 apps/browser/src/popup/scss/base.scss         | 453 -------------
 apps/browser/src/popup/scss/box.scss          | 620 ------------------
 apps/browser/src/popup/scss/buttons.scss      | 118 ----
 apps/browser/src/popup/scss/environment.scss  |  43 --
 apps/browser/src/popup/scss/grid.scss         |  11 -
 apps/browser/src/popup/scss/misc.scss         | 348 ----------
 apps/browser/src/popup/scss/pages.scss        | 144 ----
 apps/browser/src/popup/scss/plugins.scss      |  23 -
 apps/browser/src/popup/scss/popup.scss        |  53 +-
 apps/browser/src/popup/scss/tailwind.css      | 157 ++++-
 apps/browser/src/popup/scss/variables.scss    | 146 +----
 apps/browser/tailwind.config.js               |   1 +
 15 files changed, 215 insertions(+), 1915 deletions(-)
 delete mode 100644 apps/browser/src/popup/scss/base.scss
 delete mode 100644 apps/browser/src/popup/scss/box.scss
 delete mode 100644 apps/browser/src/popup/scss/buttons.scss
 delete mode 100644 apps/browser/src/popup/scss/environment.scss
 delete mode 100644 apps/browser/src/popup/scss/grid.scss
 delete mode 100644 apps/browser/src/popup/scss/misc.scss
 delete mode 100644 apps/browser/src/popup/scss/pages.scss
 delete mode 100644 apps/browser/src/popup/scss/plugins.scss

diff --git a/apps/browser/src/auth/popup/account-switching/current-account.component.html b/apps/browser/src/auth/popup/account-switching/current-account.component.html
index 2e2440f6258..7ab55f36753 100644
--- a/apps/browser/src/auth/popup/account-switching/current-account.component.html
+++ b/apps/browser/src/auth/popup/account-switching/current-account.component.html
@@ -2,7 +2,7 @@
   <button
     *ngIf="currentAccount$ | async as currentAccount; else defaultButton"
     type="button"
-    class="tw-rounded-full hover:tw-outline hover:tw-outline-1 hover:tw-outline-offset-1 hover:tw-outline-primary-600"
+    class="tw-rounded-full hover:tw-outline hover:tw-outline-1 hover:tw-outline-primary-600"
     (click)="currentAccountClicked()"
   >
     <span class="tw-sr-only"> {{ "bitwardenAccount" | i18n }} {{ currentAccount.email }}</span>
diff --git a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts
index 4abd9cd4803..26138d57954 100644
--- a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts
+++ b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts
@@ -22,7 +22,7 @@ export type NavButton = {
   templateUrl: "popup-tab-navigation.component.html",
   imports: [CommonModule, LinkModule, RouterModule, JslibModule, IconModule],
   host: {
-    class: "tw-block tw-h-full tw-w-full tw-flex tw-flex-col",
+    class: "tw-block tw-size-full tw-flex tw-flex-col",
   },
 })
 export class PopupTabNavigationComponent {
diff --git a/apps/browser/src/popup/app.component.html b/apps/browser/src/popup/app.component.html
index 3d81354ca35..3a5c8021e17 100644
--- a/apps/browser/src/popup/app.component.html
+++ b/apps/browser/src/popup/app.component.html
@@ -13,8 +13,11 @@
     </bit-callout>
   </div>
 } @else {
-  <div [@routerTransition]="getRouteElevation(outlet)">
-    <router-outlet #outlet="outlet"></router-outlet>
+  <!-- eslint-disable-next-line -->
+  <div class="tw-h-screen tw-w-screen">
+    <div [@routerTransition]="getRouteElevation(outlet)" class="tw-size-full">
+      <router-outlet #outlet="outlet"></router-outlet>
+    </div>
+    <bit-toast-container></bit-toast-container>
   </div>
-  <bit-toast-container></bit-toast-container>
 }
diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss
deleted file mode 100644
index 01b9d3f05d5..00000000000
--- a/apps/browser/src/popup/scss/base.scss
+++ /dev/null
@@ -1,453 +0,0 @@
-@import "variables.scss";
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html {
-  overflow: hidden;
-  min-height: 600px;
-  height: 100%;
-
-  &.body-sm {
-    min-height: 500px;
-  }
-
-  &.body-xs {
-    min-height: 400px;
-  }
-
-  &.body-xxs {
-    min-height: 300px;
-  }
-
-  &.body-3xs {
-    min-height: 240px;
-  }
-
-  &.body-full {
-    min-height: unset;
-    width: 100%;
-    height: 100%;
-
-    & body {
-      width: 100%;
-    }
-  }
-}
-
-html,
-body {
-  font-family: $font-family-sans-serif;
-  font-size: $font-size-base;
-  line-height: $line-height-base;
-  -webkit-font-smoothing: antialiased;
-}
-
-body {
-  width: 380px;
-  height: 100%;
-  position: relative;
-  min-height: inherit;
-  overflow: hidden;
-  color: $text-color;
-  background-color: $background-color;
-
-  @include themify($themes) {
-    color: themed("textColor");
-    background-color: themed("backgroundColor");
-  }
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: $font-family-sans-serif;
-  font-size: $font-size-base;
-  font-weight: normal;
-}
-
-p {
-  margin-bottom: 10px;
-}
-
-ul,
-ol {
-  margin-bottom: 10px;
-}
-
-img {
-  border: none;
-}
-
-a:not(popup-page a, popup-tab-navigation a) {
-  text-decoration: none;
-
-  @include themify($themes) {
-    color: themed("primaryColor");
-  }
-
-  &:hover,
-  &:focus {
-    @include themify($themes) {
-      color: darken(themed("primaryColor"), 6%);
-    }
-  }
-}
-
-input:not(bit-form-field input, bit-search input, input[bitcheckbox]),
-select:not(bit-form-field select),
-textarea:not(bit-form-field textarea) {
-  @include themify($themes) {
-    color: themed("textColor");
-    background-color: themed("inputBackgroundColor");
-  }
-}
-
-input:not(input[bitcheckbox]),
-select,
-textarea,
-button:not(bit-chip-select button) {
-  font-size: $font-size-base;
-  font-family: $font-family-sans-serif;
-}
-
-input[type*="date"] {
-  @include themify($themes) {
-    color-scheme: themed("dateInputColorScheme");
-  }
-}
-
-::-webkit-calendar-picker-indicator {
-  @include themify($themes) {
-    filter: themed("webkitCalendarPickerFilter");
-  }
-}
-
-::-webkit-calendar-picker-indicator:hover {
-  @include themify($themes) {
-    filter: themed("webkitCalendarPickerHoverFilter");
-  }
-  cursor: pointer;
-}
-
-select {
-  width: 100%;
-  padding: 0.35rem;
-}
-
-button {
-  cursor: pointer;
-}
-
-textarea {
-  resize: vertical;
-}
-
-app-root > div {
-  height: 100%;
-  width: 100%;
-}
-
-main::-webkit-scrollbar,
-cdk-virtual-scroll-viewport::-webkit-scrollbar,
-.vault-select::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-
-main::-webkit-scrollbar-track,
-.vault-select::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-cdk-virtual-scroll-viewport::-webkit-scrollbar-track {
-  @include themify($themes) {
-    background-color: themed("backgroundColor");
-  }
-}
-
-main::-webkit-scrollbar-thumb,
-cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb,
-.vault-select::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  margin-right: 1px;
-
-  @include themify($themes) {
-    background-color: themed("scrollbarColor");
-  }
-
-  &:hover {
-    @include themify($themes) {
-      background-color: themed("scrollbarHoverColor");
-    }
-  }
-}
-
-header:not(bit-callout header, bit-dialog header, popup-page header) {
-  height: 44px;
-  display: flex;
-
-  &:not(.no-theme) {
-    border-bottom: 1px solid #000000;
-
-    @include themify($themes) {
-      color: themed("headerColor");
-      background-color: themed("headerBackgroundColor");
-      border-bottom-color: themed("headerBorderColor");
-    }
-  }
-
-  .header-content {
-    display: flex;
-    flex: 1 1 auto;
-  }
-
-  .header-content > .right,
-  .header-content > .right > .right {
-    height: 100%;
-  }
-
-  .left,
-  .right {
-    flex: 1;
-    display: flex;
-    min-width: -webkit-min-content; /* Workaround to Chrome bug */
-    .header-icon {
-      margin-right: 5px;
-    }
-  }
-
-  .right {
-    justify-content: flex-end;
-    align-items: center;
-    app-avatar {
-      max-height: 30px;
-      margin-right: 5px;
-    }
-  }
-
-  .center {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    min-width: 0;
-  }
-
-  .login-center {
-    margin: auto;
-  }
-
-  app-pop-out > button,
-  div > button:not(app-current-account button):not(.home-acc-switcher-btn),
-  div > a {
-    border: none;
-    padding: 0 10px;
-    text-decoration: none;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    white-space: pre;
-
-    &:not(.home-acc-switcher-btn):hover,
-    &:not(.home-acc-switcher-btn):focus {
-      @include themify($themes) {
-        background-color: themed("headerBackgroundHoverColor");
-        color: themed("headerColor");
-      }
-    }
-
-    &[disabled] {
-      opacity: 0.65;
-      cursor: default !important;
-      background-color: inherit !important;
-    }
-
-    i + span {
-      margin-left: 5px;
-    }
-  }
-
-  app-pop-out {
-    display: flex;
-    padding-right: 0.5em;
-  }
-
-  .title {
-    font-weight: bold;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .search {
-    padding: 7px 10px;
-    width: 100%;
-    text-align: left;
-    position: relative;
-    display: flex;
-
-    .bwi {
-      position: absolute;
-      top: 15px;
-      left: 20px;
-
-      @include themify($themes) {
-        color: themed("headerInputPlaceholderColor");
-      }
-    }
-
-    input:not(bit-form-field input) {
-      width: 100%;
-      margin: 0;
-      border: none;
-      padding: 5px 10px 5px 30px;
-      border-radius: $border-radius;
-
-      @include themify($themes) {
-        background-color: themed("headerInputBackgroundColor");
-        color: themed("headerInputColor");
-      }
-
-      &::selection {
-        @include themify($themes) {
-          // explicitly set text selection to invert foreground/background
-          background-color: themed("headerInputColor");
-          color: themed("headerInputBackgroundColor");
-        }
-      }
-
-      &:focus {
-        border-radius: $border-radius;
-        outline: none;
-
-        @include themify($themes) {
-          background-color: themed("headerInputBackgroundFocusColor");
-        }
-      }
-
-      &::-webkit-input-placeholder {
-        @include themify($themes) {
-          color: themed("headerInputPlaceholderColor");
-        }
-      }
-      /** make the cancel button visible in both dark/light themes **/
-      &[type="search"]::-webkit-search-cancel-button {
-        -webkit-appearance: none;
-        appearance: none;
-        height: 15px;
-        width: 15px;
-        background-repeat: no-repeat;
-        mask-image: url("../images/close-button-white.svg");
-        -webkit-mask-image: url("../images/close-button-white.svg");
-        @include themify($themes) {
-          background-color: themed("headerInputColor");
-        }
-      }
-    }
-  }
-
-  .left + .search,
-  .left + .sr-only + .search {
-    padding-left: 0;
-
-    .bwi {
-      left: 10px;
-    }
-  }
-
-  .search + .right {
-    margin-left: -10px;
-  }
-}
-
-.content {
-  padding: 15px 5px;
-}
-
-app-root {
-  width: 100%;
-  height: 100vh;
-  display: flex;
-
-  @include themify($themes) {
-    background-color: themed("backgroundColor");
-  }
-}
-
-main:not(popup-page main):not(auth-anon-layout main) {
-  position: absolute;
-  top: 44px;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  @include themify($themes) {
-    background-color: themed("backgroundColor");
-  }
-
-  &.no-header {
-    top: 0;
-  }
-
-  &.flex {
-    display: flex;
-    flex-flow: column;
-    height: calc(100% - 44px);
-  }
-}
-
-.center-content,
-.no-items,
-.full-loading-spinner {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  flex-direction: column;
-  flex-grow: 1;
-}
-
-.no-items,
-.full-loading-spinner {
-  text-align: center;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  .no-items-image {
-    @include themify($themes) {
-      content: url("../images/search-desktop" + themed("svgSuffix"));
-    }
-  }
-
-  .bwi {
-    margin-bottom: 10px;
-
-    @include themify($themes) {
-      color: themed("disabledIconColor");
-    }
-  }
-}
-
-// cdk-virtual-scroll
-.cdk-virtual-scroll-viewport {
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.cdk-virtual-scroll-content-wrapper {
-  width: 100%;
-}
diff --git a/apps/browser/src/popup/scss/box.scss b/apps/browser/src/popup/scss/box.scss
deleted file mode 100644
index 763f73a15cb..00000000000
--- a/apps/browser/src/popup/scss/box.scss
+++ /dev/null
@@ -1,620 +0,0 @@
-@import "variables.scss";
-
-.box {
-  position: relative;
-  width: 100%;
-
-  &.first {
-    margin-top: 0;
-  }
-
-  .box-header {
-    margin: 0 10px 5px 10px;
-    text-transform: uppercase;
-    display: flex;
-
-    @include themify($themes) {
-      color: themed("headingColor");
-    }
-  }
-
-  .box-content {
-    @include themify($themes) {
-      background-color: themed("backgroundColor");
-      border-color: themed("borderColor");
-    }
-
-    &.box-content-padded {
-      padding: 10px 15px;
-    }
-
-    &.condensed .box-content-row,
-    .box-content-row.condensed {
-      padding-top: 5px;
-      padding-bottom: 5px;
-    }
-
-    &.no-hover .box-content-row,
-    .box-content-row.no-hover {
-      &:hover,
-      &:focus {
-        @include themify($themes) {
-          background-color: themed("boxBackgroundColor") !important;
-        }
-      }
-    }
-
-    &.single-line .box-content-row,
-    .box-content-row.single-line {
-      padding-top: 10px;
-      padding-bottom: 10px;
-      margin: 5px;
-    }
-
-    &.row-top-padding {
-      padding-top: 10px;
-    }
-  }
-
-  .box-footer {
-    margin: 0 5px 5px 5px;
-    padding: 0 10px 5px 10px;
-    font-size: $font-size-small;
-
-    button.btn {
-      font-size: $font-size-small;
-      padding: 0;
-    }
-
-    button.btn.primary {
-      font-size: $font-size-base;
-      padding: 7px 15px;
-      width: 100%;
-
-      &:hover {
-        @include themify($themes) {
-          border-color: themed("borderHoverColor") !important;
-        }
-      }
-    }
-
-    @include themify($themes) {
-      color: themed("mutedColor");
-    }
-  }
-
-  &.list {
-    margin: 10px 0 20px 0;
-    .box-content {
-      .virtual-scroll-item {
-        display: inline-block;
-        width: 100%;
-      }
-
-      .box-content-row {
-        text-decoration: none;
-        border-radius: $border-radius;
-        // background-color: $background-color;
-
-        @include themify($themes) {
-          color: themed("textColor");
-          background-color: themed("boxBackgroundColor");
-        }
-
-        &.padded {
-          padding-top: 10px;
-          padding-bottom: 10px;
-        }
-
-        &.no-hover {
-          &:hover {
-            @include themify($themes) {
-              background-color: themed("boxBackgroundColor") !important;
-            }
-          }
-        }
-
-        &:hover,
-        &:focus,
-        &.active {
-          @include themify($themes) {
-            background-color: themed("listItemBackgroundHoverColor");
-          }
-        }
-
-        &:focus {
-          border-left: 5px solid #000000;
-          padding-left: 5px;
-
-          @include themify($themes) {
-            border-left-color: themed("mutedColor");
-          }
-        }
-
-        .action-buttons {
-          .row-btn {
-            padding-left: 5px;
-            padding-right: 5px;
-          }
-        }
-
-        .text:not(.no-ellipsis),
-        .detail {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        .row-main {
-          display: flex;
-          min-width: 0;
-          align-items: normal;
-
-          .row-main-content {
-            min-width: 0;
-          }
-        }
-      }
-
-      &.single-line {
-        .box-content-row {
-          display: flex;
-          padding-top: 10px;
-          padding-bottom: 10px;
-          margin: 5px;
-          border-radius: $border-radius;
-        }
-      }
-    }
-  }
-}
-
-.box-content-row {
-  display: block;
-  padding: 5px 10px;
-  position: relative;
-  z-index: 1;
-  border-radius: $border-radius;
-  margin: 3px 5px;
-
-  @include themify($themes) {
-    background-color: themed("boxBackgroundColor");
-  }
-
-  &:last-child {
-    &:before {
-      border: none;
-      height: 0;
-    }
-  }
-
-  &.override-last:last-child:before {
-    border-bottom: 1px solid #000000;
-    @include themify($themes) {
-      border-bottom-color: themed("boxBorderColor");
-    }
-  }
-
-  &.last:last-child:before {
-    border-bottom: 1px solid #000000;
-    @include themify($themes) {
-      border-bottom-color: themed("boxBorderColor");
-    }
-  }
-
-  &:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
-  &:hover,
-  &:focus,
-  &.active {
-    @include themify($themes) {
-      background-color: themed("boxBackgroundHoverColor");
-    }
-  }
-
-  &.pre {
-    white-space: pre;
-    overflow-x: auto;
-  }
-
-  &.pre-wrap {
-    white-space: pre-wrap;
-    overflow-x: auto;
-  }
-
-  .row-label,
-  label {
-    font-size: $font-size-small;
-    display: block;
-    width: 100%;
-    margin-bottom: 5px;
-
-    @include themify($themes) {
-      color: themed("mutedColor");
-    }
-
-    .sub-label {
-      margin-left: 10px;
-    }
-  }
-
-  .flex-label {
-    font-size: $font-size-small;
-    display: flex;
-    flex-grow: 1;
-    margin-bottom: 5px;
-
-    @include themify($themes) {
-      color: themed("mutedColor");
-    }
-
-    > a {
-      flex-grow: 0;
-    }
-  }
-
-  .text,
-  .detail {
-    display: block;
-    text-align: left;
-
-    @include themify($themes) {
-      color: themed("textColor");
-    }
-  }
-
-  .detail {
-    font-size: $font-size-small;
-
-    @include themify($themes) {
-      color: themed("mutedColor");
-    }
-  }
-
-  .img-right,
-  .txt-right {
-    float: right;
-    margin-left: 10px;
-  }
-
-  .row-main {
-    flex-grow: 1;
-    min-width: 0;
-  }
-
-  &.box-content-row-flex,
-  .box-content-row-flex,
-  &.box-content-row-checkbox,
-  &.box-content-row-link,
-  &.box-content-row-input,
-  &.box-content-row-slider,
-  &.box-content-row-multi {
-    display: flex;
-    align-items: center;
-    word-break: break-all;
-
-    &.box-content-row-word-break {
-      word-break: normal;
-    }
-  }
-
-  &.box-content-row-multi {
-    input:not([type="checkbox"]) {
-      width: 100%;
-    }
-
-    input + label.sr-only + select {
-      margin-top: 5px;
-    }
-
-    > a,
-    > button {
-      padding: 8px 8px 8px 4px;
-      margin: 0;
-
-      @include themify($themes) {
-        color: themed("dangerColor");
-      }
-    }
-  }
-
-  &.box-content-row-multi,
-  &.box-content-row-newmulti {
-    padding-left: 10px;
-  }
-
-  &.box-content-row-newmulti {
-    @include themify($themes) {
-      color: themed("primaryColor");
-    }
-  }
-
-  &.box-content-row-checkbox,
-  &.box-content-row-link,
-  &.box-content-row-input,
-  &.box-content-row-slider {
-    padding-top: 10px;
-    padding-bottom: 10px;
-    margin: 5px;
-
-    label,
-    .row-label {
-      font-size: $font-size-base;
-      display: block;
-      width: initial;
-      margin-bottom: 0;
-
-      @include themify($themes) {
-        color: themed("textColor");
-      }
-    }
-
-    > span {
-      @include themify($themes) {
-        color: themed("mutedColor");
-      }
-    }
-
-    > input {
-      margin: 0 0 0 auto;
-      padding: 0;
-    }
-
-    > * {
-      margin-right: 15px;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
-
-  &.box-content-row-checkbox-left {
-    justify-content: flex-start;
-
-    > input {
-      margin: 0 15px 0 0;
-    }
-  }
-
-  &.box-content-row-input {
-    label {
-      white-space: nowrap;
-    }
-
-    input {
-      text-align: right;
-
-      &[type="number"] {
-        max-width: 50px;
-      }
-    }
-  }
-
-  &.box-content-row-slider {
-    input[type="range"] {
-      height: 10px;
-    }
-
-    input[type="number"] {
-      width: 45px;
-    }
-
-    label {
-      white-space: nowrap;
-    }
-  }
-
-  input:not([type="checkbox"]):not([type="radio"]),
-  textarea {
-    border: none;
-    width: 100%;
-    background-color: transparent !important;
-
-    &::-webkit-input-placeholder {
-      @include themify($themes) {
-        color: themed("inputPlaceholderColor");
-      }
-    }
-
-    &:not([type="file"]):focus {
-      outline: none;
-    }
-  }
-
-  select {
-    width: 100%;
-    border: 1px solid #000000;
-    border-radius: $border-radius;
-    padding: 7px 4px;
-
-    @include themify($themes) {
-      border-color: themed("inputBorderColor");
-    }
-  }
-
-  .action-buttons {
-    display: flex;
-    margin-left: 5px;
-
-    &.action-buttons-fixed {
-      align-self: start;
-      margin-top: 2px;
-    }
-
-    .row-btn {
-      cursor: pointer;
-      padding: 10px 8px;
-      background: none;
-      border: none;
-
-      @include themify($themes) {
-        color: themed("boxRowButtonColor");
-      }
-
-      &:hover,
-      &:focus {
-        @include themify($themes) {
-          color: themed("boxRowButtonHoverColor");
-        }
-      }
-
-      &.disabled,
-      &[disabled] {
-        @include themify($themes) {
-          color: themed("disabledIconColor");
-          opacity: themed("disabledBoxOpacity");
-        }
-
-        &:hover {
-          @include themify($themes) {
-            color: themed("disabledIconColor");
-            opacity: themed("disabledBoxOpacity");
-          }
-        }
-        cursor: default !important;
-      }
-    }
-
-    &.no-pad .row-btn {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-  }
-
-  &:not(.box-draggable-row) {
-    .action-buttons .row-btn:last-child {
-      margin-right: -3px;
-    }
-  }
-
-  &.box-draggable-row {
-    &.box-content-row-checkbox {
-      input[type="checkbox"] + .drag-handle {
-        margin-left: 10px;
-      }
-    }
-  }
-
-  .drag-handle {
-    cursor: move;
-    padding: 10px 2px 10px 8px;
-    user-select: none;
-
-    @include themify($themes) {
-      color: themed("mutedColor");
-    }
-  }
-
-  &.cdk-drag-preview {
-    position: relative;
-    display: flex;
-    align-items: center;
-    opacity: 0.8;
-
-    @include themify($themes) {
-      background-color: themed("boxBackgroundColor");
-    }
-  }
-
-  select.field-type {
-    margin: 5px 0 0 25px;
-    width: calc(100% - 25px);
-  }
-
-  .icon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-width: 34px;
-    margin-left: -5px;
-
-    @include themify($themes) {
-      color: themed("mutedColor");
-    }
-
-    &.icon-small {
-      min-width: 25px;
-    }
-
-    img {
-      border-radius: $border-radius;
-      max-height: 20px;
-      max-width: 20px;
-    }
-  }
-
-  .progress {
-    display: flex;
-    height: 5px;
-    overflow: hidden;
-    margin: 5px -15px -10px;
-
-    .progress-bar {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      white-space: nowrap;
-      background-color: $brand-primary;
-    }
-  }
-
-  .radio-group {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    margin-bottom: 5px;
-
-    input {
-      flex-grow: 0;
-    }
-
-    label {
-      margin: 0 0 0 5px;
-      flex-grow: 1;
-      font-size: $font-size-base;
-      display: block;
-      width: 100%;
-
-      @include themify($themes) {
-        color: themed("textColor");
-      }
-    }
-
-    &.align-start {
-      align-items: start;
-      margin-top: 10px;
-
-      label {
-        margin-top: -4px;
-      }
-    }
-  }
-}
-
-.truncate {
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-form {
-  .box {
-    .box-content {
-      .box-content-row {
-        &.no-hover {
-          &:hover {
-            @include themify($themes) {
-              background-color: themed("transparentColor") !important;
-            }
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/apps/browser/src/popup/scss/buttons.scss b/apps/browser/src/popup/scss/buttons.scss
deleted file mode 100644
index e9af536dc3d..00000000000
--- a/apps/browser/src/popup/scss/buttons.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-@import "variables.scss";
-
-.btn {
-  border-radius: $border-radius;
-  padding: 7px 15px;
-  border: 1px solid #000000;
-  font-size: $font-size-base;
-  text-align: center;
-  cursor: pointer;
-
-  @include themify($themes) {
-    background-color: themed("buttonBackgroundColor");
-    border-color: themed("buttonBorderColor");
-    color: themed("buttonColor");
-  }
-
-  &.primary {
-    @include themify($themes) {
-      color: themed("buttonPrimaryColor");
-    }
-  }
-
-  &.danger {
-    @include themify($themes) {
-      color: themed("buttonDangerColor");
-    }
-  }
-
-  &.callout-half {
-    font-weight: bold;
-    max-width: 50%;
-  }
-
-  &:hover:not([disabled]) {
-    cursor: pointer;
-
-    @include themify($themes) {
-      background-color: darken(themed("buttonBackgroundColor"), 1.5%);
-      border-color: darken(themed("buttonBorderColor"), 17%);
-      color: darken(themed("buttonColor"), 10%);
-    }
-
-    &.primary {
-      @include themify($themes) {
-        color: darken(themed("buttonPrimaryColor"), 6%);
-      }
-    }
-
-    &.danger {
-      @include themify($themes) {
-        color: darken(themed("buttonDangerColor"), 6%);
-      }
-    }
-  }
-
-  &:focus:not([disabled]) {
-    cursor: pointer;
-    outline: 0;
-
-    @include themify($themes) {
-      background-color: darken(themed("buttonBackgroundColor"), 6%);
-      border-color: darken(themed("buttonBorderColor"), 25%);
-    }
-  }
-
-  &[disabled] {
-    opacity: 0.65;
-    cursor: default !important;
-  }
-
-  &.block {
-    display: block;
-    width: calc(100% - 10px);
-    margin: 0 auto;
-  }
-
-  &.link,
-  &.neutral {
-    border: none !important;
-    background: none !important;
-
-    &:focus {
-      text-decoration: underline;
-    }
-  }
-}
-
-.action-buttons {
-  .btn {
-    &:focus {
-      outline: auto;
-    }
-  }
-}
-
-button.box-content-row {
-  display: block;
-  width: calc(100% - 10px);
-  text-align: left;
-  border-color: none;
-
-  @include themify($themes) {
-    background-color: themed("boxBackgroundColor");
-  }
-}
-
-button {
-  border: none;
-  background: transparent;
-  color: inherit;
-}
-
-.login-buttons {
-  .btn.block {
-    width: 100%;
-    margin-bottom: 10px;
-  }
-}
diff --git a/apps/browser/src/popup/scss/environment.scss b/apps/browser/src/popup/scss/environment.scss
deleted file mode 100644
index cd8f6379e2c..00000000000
--- a/apps/browser/src/popup/scss/environment.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@import "variables.scss";
-
-html.browser_safari {
-  &.safari_height_fix {
-    body {
-      height: 360px !important;
-
-      &.body-xs {
-        height: 300px !important;
-      }
-
-      &.body-full {
-        height: 100% !important;
-      }
-    }
-  }
-
-  header {
-    .search .bwi {
-      left: 20px;
-    }
-
-    .left + .search .bwi {
-      left: 10px;
-    }
-  }
-
-  .content {
-    &.login-page {
-      padding-top: 100px;
-    }
-  }
-
-  app-root {
-    border-width: 1px;
-    border-style: solid;
-    border-color: #000000;
-  }
-
-  &.theme_light app-root {
-    border-color: #777777;
-  }
-}
diff --git a/apps/browser/src/popup/scss/grid.scss b/apps/browser/src/popup/scss/grid.scss
deleted file mode 100644
index 8cdb29bb52c..00000000000
--- a/apps/browser/src/popup/scss/grid.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.row {
-  display: flex;
-  margin: 0 -15px;
-  width: 100%;
-}
-
-.col {
-  flex-basis: 0;
-  flex-grow: 1;
-  padding: 0 15px;
-}
diff --git a/apps/browser/src/popup/scss/misc.scss b/apps/browser/src/popup/scss/misc.scss
deleted file mode 100644
index 006e1d35f6a..00000000000
--- a/apps/browser/src/popup/scss/misc.scss
+++ /dev/null
@@ -1,348 +0,0 @@
-@import "variables.scss";
-
-small,
-.small {
-  font-size: $font-size-small;
-}
-
-.bg-primary {
-  @include themify($themes) {
-    background-color: themed("primaryColor") !important;
-  }
-}
-
-.bg-success {
-  @include themify($themes) {
-    background-color: themed("successColor") !important;
-  }
-}
-
-.bg-danger {
-  @include themify($themes) {
-    background-color: themed("dangerColor") !important;
-  }
-}
-
-.bg-info {
-  @include themify($themes) {
-    background-color: themed("infoColor") !important;
-  }
-}
-
-.bg-warning {
-  @include themify($themes) {
-    background-color: themed("warningColor") !important;
-  }
-}
-
-.text-primary {
-  @include themify($themes) {
-    color: themed("primaryColor") !important;
-  }
-}
-
-.text-success {
-  @include themify($themes) {
-    color: themed("successColor") !important;
-  }
-}
-
-.text-muted {
-  @include themify($themes) {
-    color: themed("mutedColor") !important;
-  }
-}
-
-.text-default {
-  @include themify($themes) {
-    color: themed("textColor") !important;
-  }
-}
-
-.text-danger {
-  @include themify($themes) {
-    color: themed("dangerColor") !important;
-  }
-}
-
-.text-info {
-  @include themify($themes) {
-    color: themed("infoColor") !important;
-  }
-}
-
-.text-warning {
-  @include themify($themes) {
-    color: themed("warningColor") !important;
-  }
-}
-
-.text-center {
-  text-align: center;
-}
-
-.font-weight-semibold {
-  font-weight: 600;
-}
-
-p.lead {
-  font-size: $font-size-large;
-  margin-bottom: 20px;
-  font-weight: normal;
-}
-
-.flex-right {
-  margin-left: auto;
-}
-
-.flex-bottom {
-  margin-top: auto;
-}
-
-.no-margin {
-  margin: 0 !important;
-}
-
-.display-block {
-  display: block !important;
-}
-
-.monospaced {
-  font-family: $font-family-monospace;
-}
-
-.show-whitespace {
-  white-space: pre-wrap;
-}
-
-.img-responsive {
-  display: block;
-  max-width: 100%;
-  height: auto;
-}
-
-.img-rounded {
-  border-radius: $border-radius;
-}
-
-.select-index-top {
-  position: relative;
-  z-index: 100;
-}
-
-.sr-only {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  border: 0 !important;
-}
-
-:not(:focus) > .exists-only-on-parent-focus {
-  display: none;
-}
-
-.password-wrapper {
-  overflow-wrap: break-word;
-  white-space: pre-wrap;
-  min-width: 0;
-}
-
-.password-number {
-  @include themify($themes) {
-    color: themed("passwordNumberColor");
-  }
-}
-
-.password-special {
-  @include themify($themes) {
-    color: themed("passwordSpecialColor");
-  }
-}
-
-.password-character {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  width: 30px;
-  height: 36px;
-  font-weight: 600;
-
-  &:nth-child(odd) {
-    @include themify($themes) {
-      background-color: themed("backgroundColor");
-    }
-  }
-}
-
-.password-count {
-  white-space: nowrap;
-  font-size: 8px;
-
-  @include themify($themes) {
-    color: themed("passwordCountText") !important;
-  }
-}
-
-#duo-frame {
-  background: url("../images/loading.svg") 0 0 no-repeat;
-  width: 100%;
-  height: 470px;
-  margin-bottom: -10px;
-
-  iframe {
-    width: 100%;
-    height: 100%;
-    border: none;
-  }
-}
-
-#web-authn-frame {
-  width: 100%;
-  height: 40px;
-
-  iframe {
-    border: none;
-    height: 100%;
-    width: 100%;
-  }
-}
-
-body.linux-webauthn {
-  width: 485px !important;
-  #web-authn-frame {
-    iframe {
-      width: 375px;
-      margin: 0 55px;
-    }
-  }
-}
-
-app-root > #loading {
-  display: flex;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  color: $text-muted;
-
-  @include themify($themes) {
-    color: themed("mutedColor");
-  }
-}
-
-app-vault-icon,
-.app-vault-icon {
-  display: flex;
-}
-
-.logo-image {
-  margin: 0 auto;
-  width: 142px;
-  height: 21px;
-  background-size: 142px 21px;
-  background-repeat: no-repeat;
-  @include themify($themes) {
-    background-image: url("../images/logo-" + themed("logoSuffix") + "@2x.png");
-  }
-  @media (min-width: 219px) {
-    width: 189px;
-    height: 28px;
-    background-size: 189px 28px;
-  }
-  @media (min-width: 314px) {
-    width: 284px;
-    height: 43px;
-    background-size: 284px 43px;
-  }
-}
-
-[hidden] {
-  display: none !important;
-}
-
-.draggable {
-  cursor: move;
-}
-
-input[type="password"]::-ms-reveal {
-  display: none;
-}
-
-.flex {
-  display: flex;
-
-  &.flex-grow {
-    > * {
-      flex: 1;
-    }
-  }
-}
-
-// Text selection styles
-// Set explicit selection styles (assumes primary accent color has sufficient
-// contrast against the background, so its inversion is also still readable)
-// and suppress user selection for most elements (to make it more app-like)
-
-:not(bit-form-field input)::selection {
-  @include themify($themes) {
-    color: themed("backgroundColor");
-    background-color: themed("primaryAccentColor");
-  }
-}
-
-h1,
-h2,
-h3,
-label,
-a,
-button,
-p,
-img,
-.box-header,
-.box-footer,
-.callout,
-.row-label,
-.modal-title,
-.overlay-container {
-  user-select: none;
-
-  &.user-select {
-    user-select: auto;
-  }
-}
-
-/* tweak for inconsistent line heights in cipher view */
-.box-footer button,
-.box-footer a {
-  line-height: 1;
-}
-
-// Workaround for slow performance on external monitors on Chrome + MacOS
-// See: https://bugs.chromium.org/p/chromium/issues/detail?id=971701#c64
-@keyframes redraw {
-  0% {
-    opacity: 0.99;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-html.force_redraw {
-  animation: redraw 1s linear infinite;
-}
-
-/* override for vault icon in browser (pre extension refresh) */
-app-vault-icon:not(app-vault-list-items-container app-vault-icon) > div {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  float: left;
-  height: 36px;
-  width: 34px;
-  margin-left: -5px;
-}
diff --git a/apps/browser/src/popup/scss/pages.scss b/apps/browser/src/popup/scss/pages.scss
deleted file mode 100644
index 56c5f80c86c..00000000000
--- a/apps/browser/src/popup/scss/pages.scss
+++ /dev/null
@@ -1,144 +0,0 @@
-@import "variables.scss";
-
-app-home {
-  position: fixed;
-  height: 100%;
-  width: 100%;
-
-  .center-content {
-    margin-top: -50px;
-    height: calc(100% + 50px);
-  }
-
-  img {
-    width: 284px;
-    margin: 0 auto;
-  }
-
-  p.lead {
-    margin: 30px 0;
-  }
-
-  .btn + .btn {
-    margin-top: 10px;
-  }
-
-  button.settings-icon {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-
-    @include themify($themes) {
-      color: themed("mutedColor");
-    }
-
-    &:not(:hover):not(:focus) {
-      span {
-        clip: rect(0 0 0 0);
-        clip-path: inset(50%);
-        height: 1px;
-        overflow: hidden;
-        position: absolute;
-        white-space: nowrap;
-        width: 1px;
-      }
-    }
-
-    &:hover,
-    &:focus {
-      text-decoration: none;
-
-      @include themify($themes) {
-        color: themed("primaryColor");
-      }
-    }
-  }
-}
-
-body.body-sm,
-body.body-xs {
-  app-home {
-    .center-content {
-      margin-top: 0;
-      height: 100%;
-    }
-
-    p.lead {
-      margin: 15px 0;
-    }
-  }
-}
-
-body.body-full {
-  app-home {
-    .center-content {
-      margin-top: -80px;
-      height: calc(100% + 80px);
-    }
-  }
-}
-
-.createAccountLink {
-  padding: 30px 10px 0 10px;
-}
-
-.remember-email-check {
-  padding-top: 18px;
-  padding-left: 10px;
-  padding-bottom: 18px;
-}
-
-.login-buttons > button {
-  margin: 15px 0 15px 0;
-}
-
-.useBrowserlink {
-  margin-left: 5px;
-  margin-top: 20px;
-
-  span {
-    font-weight: 700;
-    font-size: $font-size-small;
-  }
-}
-
-.fido2-browser-selector-dropdown {
-  @include themify($themes) {
-    background-color: themed("boxBackgroundColor");
-  }
-  padding: 8px;
-  width: 100%;
-  box-shadow:
-    0 2px 2px 0 rgba(0, 0, 0, 0.14),
-    0 3px 1px -2px rgba(0, 0, 0, 0.12),
-    0 1px 5px 0 rgba(0, 0, 0, 0.2);
-  border-radius: $border-radius;
-}
-
-.fido2-browser-selector-dropdown-item {
-  @include themify($themes) {
-    color: themed("textColor") !important;
-  }
-  width: 100%;
-  text-align: left;
-  padding: 0px 15px 0px 5px;
-  margin-bottom: 5px;
-  border-radius: 3px;
-  border: 1px solid transparent;
-  transition: all 0.2s ease-in-out;
-
-  &:hover {
-    @include themify($themes) {
-      background-color: themed("listItemBackgroundHoverColor") !important;
-    }
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-/** Temporary fix for avatar, will not be required once we migrate to tailwind preflight **/
-bit-avatar svg {
-  display: block;
-}
diff --git a/apps/browser/src/popup/scss/plugins.scss b/apps/browser/src/popup/scss/plugins.scss
deleted file mode 100644
index 591e8a1bd0c..00000000000
--- a/apps/browser/src/popup/scss/plugins.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@import "variables.scss";
-
-@each $mfaType in $mfaTypes {
-  .mfaType#{$mfaType} {
-    content: url("../images/two-factor/" + $mfaType + ".png");
-    max-width: 100px;
-  }
-}
-
-.mfaType1 {
-  @include themify($themes) {
-    content: url("../images/two-factor/1" + themed("mfaLogoSuffix"));
-    max-width: 100px;
-    max-height: 45px;
-  }
-}
-
-.mfaType7 {
-  @include themify($themes) {
-    content: url("../images/two-factor/7" + themed("mfaLogoSuffix"));
-    max-width: 100px;
-  }
-}
diff --git a/apps/browser/src/popup/scss/popup.scss b/apps/browser/src/popup/scss/popup.scss
index b150de2c75d..59b4d472f23 100644
--- a/apps/browser/src/popup/scss/popup.scss
+++ b/apps/browser/src/popup/scss/popup.scss
@@ -1,13 +1,50 @@
 @import "../../../../../libs/angular/src/scss/bwicons/styles/style.scss";
 @import "variables.scss";
 @import "../../../../../libs/angular/src/scss/icons.scss";
-@import "base.scss";
-@import "grid.scss";
-@import "box.scss";
-@import "buttons.scss";
-@import "misc.scss";
-@import "environment.scss";
-@import "pages.scss";
-@import "plugins.scss";
 @import "@angular/cdk/overlay-prebuilt.css";
 @import "../../../../../libs/components/src/multi-select/scss/bw.theme";
+
+.cdk-virtual-scroll-content-wrapper {
+  width: 100%;
+}
+
+// MFA Types for logo styling with no dark theme alternative
+$mfaTypes: 0, 2, 3, 4, 6;
+
+@each $mfaType in $mfaTypes {
+  .mfaType#{$mfaType} {
+    content: url("../images/two-factor/" + $mfaType + ".png");
+    max-width: 100px;
+  }
+}
+
+.mfaType0 {
+  content: url("../images/two-factor/0.png");
+  max-width: 100px;
+  max-height: 45px;
+}
+
+.mfaType1 {
+  max-width: 100px;
+  max-height: 45px;
+
+  &:is(.theme_light *) {
+    content: url("../images/two-factor/1.png");
+  }
+
+  &:is(.theme_dark *) {
+    content: url("../images/two-factor/1-w.png");
+  }
+}
+
+.mfaType7 {
+  max-width: 100px;
+
+  &:is(.theme_light *) {
+    content: url("../images/two-factor/7.png");
+  }
+
+  &:is(.theme_dark *) {
+    content: url("../images/two-factor/7-w.png");
+  }
+}
diff --git a/apps/browser/src/popup/scss/tailwind.css b/apps/browser/src/popup/scss/tailwind.css
index 54139990356..f58950cc86a 100644
--- a/apps/browser/src/popup/scss/tailwind.css
+++ b/apps/browser/src/popup/scss/tailwind.css
@@ -1,4 +1,104 @@
-@import "../../../../../libs/components/src/tw-theme.css";
+@import "../../../../../libs/components/src/tw-theme-preflight.css";
+
+@layer base {
+  html {
+    overflow: hidden;
+    min-height: 600px;
+    height: 100%;
+
+    &.body-sm {
+      min-height: 500px;
+    }
+
+    &.body-xs {
+      min-height: 400px;
+    }
+
+    &.body-xxs {
+      min-height: 300px;
+    }
+
+    &.body-3xs {
+      min-height: 240px;
+    }
+
+    &.body-full {
+      min-height: unset;
+      width: 100%;
+      height: 100%;
+
+      & body {
+        width: 100%;
+      }
+    }
+  }
+
+  html.browser_safari {
+    &.safari_height_fix {
+      body {
+        height: 360px !important;
+
+        &.body-xs {
+          height: 300px !important;
+        }
+
+        &.body-full {
+          height: 100% !important;
+        }
+      }
+    }
+
+    app-root {
+      border-width: 1px;
+      border-style: solid;
+      border-color: #000000;
+    }
+
+    &.theme_light app-root {
+      border-color: #777777;
+    }
+  }
+
+  body {
+    width: 380px;
+    height: 100%;
+    position: relative;
+    min-height: inherit;
+    overflow: hidden;
+    @apply tw-bg-background-alt;
+  }
+
+  /**
+   * Workaround for slow performance on external monitors on Chrome + MacOS
+   * See: https://bugs.chromium.org/p/chromium/issues/detail?id=971701#c64
+   */
+  @keyframes redraw {
+    0% {
+      opacity: 0.99;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  html.force_redraw {
+    animation: redraw 1s linear infinite;
+  }
+
+  /** 
+   * Text selection style:
+   * suppress user selection for most elements (to make it more app-like) 
+   */
+  h1,
+  h2,
+  h3,
+  label,
+  a,
+  button,
+  p,
+  img {
+    user-select: none;
+  }
+}
 
 @layer components {
   /** Safari Support */
@@ -19,4 +119,59 @@
   html:not(.browser_safari) .tw-styled-scrollbar {
     scrollbar-color: rgb(var(--color-secondary-500)) rgb(var(--color-background-alt));
   }
+
+  #duo-frame {
+    background: url("../images/loading.svg") 0 0 no-repeat;
+    width: 100%;
+    height: 470px;
+    margin-bottom: -10px;
+
+    iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+  }
+
+  #web-authn-frame {
+    width: 100%;
+    height: 40px;
+
+    iframe {
+      border: none;
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  body.linux-webauthn {
+    width: 485px !important;
+    #web-authn-frame {
+      iframe {
+        width: 375px;
+        margin: 0 55px;
+      }
+    }
+  }
+
+  app-root > #loading {
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+
+    @apply tw-text-muted;
+  }
+
+  /** 
+   * Text selection style:
+   * Set explicit selection styles (assumes primary accent color has sufficient
+   * contrast against the background, so its inversion is also still readable)
+   */
+  :not(bit-form-field input)::selection {
+    @apply tw-text-contrast;
+    @apply tw-bg-primary-700;
+  }
 }
diff --git a/apps/browser/src/popup/scss/variables.scss b/apps/browser/src/popup/scss/variables.scss
index e57e98fd0cc..02a10521bca 100644
--- a/apps/browser/src/popup/scss/variables.scss
+++ b/apps/browser/src/popup/scss/variables.scss
@@ -1,178 +1,42 @@
-$dark-icon-themes: "theme_dark";
+/**
+ * DEPRECATED: DO NOT MODIFY OR USE!
+ */
+
+$dark-icon-themes: "theme_dark";
 
 $font-family-sans-serif: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
-$font-size-base: 16px;
-$font-size-large: 18px;
-$font-size-xlarge: 22px;
-$font-size-xxlarge: 28px;
-$font-size-small: 12px;
 $text-color: #000000;
-$border-color: #f0f0f0;
 $border-color-dark: #ddd;
-$list-item-hover: #fbfbfb;
-$list-icon-color: #767679;
-$disabled-box-opacity: 1;
-$border-radius: 6px;
-$line-height-base: 1.42857143;
-$icon-hover-color: lighten($text-color, 50%);
-
-$mfaTypes: 0, 2, 3, 4, 6;
-
-$gray: #555;
-$gray-light: #777;
-$text-muted: $gray-light;
-
 $brand-primary: #175ddc;
-$brand-danger: #c83522;
 $brand-success: #017e45;
-$brand-info: #555555;
-$brand-warning: #8b6609;
-$brand-primary-accent: #1252a3;
-
 $background-color: #f0f0f0;
-
-$box-background-color: white;
-$box-background-hover-color: $list-item-hover;
-$box-border-color: $border-color;
-$border-color-alt: #c3c5c7;
-
-$button-border-color: darken($border-color-dark, 12%);
-$button-background-color: white;
-$button-color: lighten($text-color, 40%);
 $button-color-primary: darken($brand-primary, 8%);
-$button-color-danger: darken($brand-danger, 10%);
-
-$code-color: #c01176;
-$code-color-dark: #f08dc7;
 
 $themes: (
   light: (
     textColor: $text-color,
-    hoverColorTransparent: rgba($text-color, 0.15),
     borderColor: $border-color-dark,
     backgroundColor: $background-color,
-    borderColorAlt: $border-color-alt,
-    backgroundColorAlt: #ffffff,
-    scrollbarColor: rgba(100, 100, 100, 0.2),
-    scrollbarHoverColor: rgba(100, 100, 100, 0.4),
-    boxBackgroundColor: $box-background-color,
-    boxBackgroundHoverColor: $box-background-hover-color,
-    boxBorderColor: $box-border-color,
-    tabBackgroundColor: #ffffff,
-    tabBackgroundHoverColor: $list-item-hover,
-    headerColor: #ffffff,
-    headerBackgroundColor: $brand-primary,
-    headerBackgroundHoverColor: rgba(255, 255, 255, 0.1),
-    headerBorderColor: $brand-primary,
-    headerInputBackgroundColor: darken($brand-primary, 8%),
-    headerInputBackgroundFocusColor: darken($brand-primary, 10%),
-    headerInputColor: #ffffff,
-    headerInputPlaceholderColor: lighten($brand-primary, 35%),
-    listItemBackgroundHoverColor: $list-item-hover,
-    disabledIconColor: $list-icon-color,
-    disabledBoxOpacity: $disabled-box-opacity,
-    headingColor: $gray-light,
-    labelColor: $gray-light,
-    mutedColor: $text-muted,
-    totpStrokeColor: $brand-primary,
-    boxRowButtonColor: $brand-primary,
-    boxRowButtonHoverColor: darken($brand-primary, 10%),
     inputBorderColor: darken($border-color-dark, 7%),
     inputBackgroundColor: #ffffff,
-    inputPlaceholderColor: lighten($gray-light, 35%),
-    buttonBackgroundColor: $button-background-color,
-    buttonBorderColor: $button-border-color,
-    buttonColor: $button-color,
     buttonPrimaryColor: $button-color-primary,
-    buttonDangerColor: $button-color-danger,
     primaryColor: $brand-primary,
-    primaryAccentColor: $brand-primary-accent,
-    dangerColor: $brand-danger,
     successColor: $brand-success,
-    infoColor: $brand-info,
-    warningColor: $brand-warning,
-    logoSuffix: "dark",
-    mfaLogoSuffix: ".png",
     passwordNumberColor: #007fde,
     passwordSpecialColor: #c40800,
-    passwordCountText: #212529,
-    calloutBorderColor: $border-color-dark,
-    calloutBackgroundColor: $box-background-color,
-    toastTextColor: #ffffff,
-    svgSuffix: "-light.svg",
-    transparentColor: rgba(0, 0, 0, 0),
-    dateInputColorScheme: light,
-    // https://stackoverflow.com/a/53336754
-    webkitCalendarPickerFilter: invert(46%) sepia(69%) saturate(6397%) hue-rotate(211deg)
-      brightness(85%) contrast(103%),
-    // light has no hover so use same color
-    webkitCalendarPickerHoverFilter: invert(46%) sepia(69%) saturate(6397%) hue-rotate(211deg)
-      brightness(85%) contrast(103%),
-    codeColor: $code-color,
   ),
   dark: (
     textColor: #ffffff,
-    hoverColorTransparent: rgba($text-color, 0.15),
     borderColor: #161c26,
     backgroundColor: #161c26,
-    borderColorAlt: #6e788a,
-    backgroundColorAlt: #2f343d,
-    scrollbarColor: #6e788a,
-    scrollbarHoverColor: #8d94a5,
-    boxBackgroundColor: #2f343d,
-    boxBackgroundHoverColor: #3c424e,
-    boxBorderColor: #4c525f,
-    tabBackgroundColor: #2f343d,
-    tabBackgroundHoverColor: #3c424e,
-    headerColor: #ffffff,
-    headerBackgroundColor: #2f343d,
-    headerBackgroundHoverColor: #3c424e,
-    headerBorderColor: #161c26,
-    headerInputBackgroundColor: #3c424e,
-    headerInputBackgroundFocusColor: #4c525f,
-    headerInputColor: #ffffff,
-    headerInputPlaceholderColor: #bac0ce,
-    listItemBackgroundHoverColor: #3c424e,
-    disabledIconColor: #bac0ce,
-    disabledBoxOpacity: 0.5,
-    headingColor: #bac0ce,
-    labelColor: #bac0ce,
-    mutedColor: #bac0ce,
-    totpStrokeColor: #4c525f,
-    boxRowButtonColor: #bac0ce,
-    boxRowButtonHoverColor: #ffffff,
     inputBorderColor: #4c525f,
     inputBackgroundColor: #2f343d,
-    inputPlaceholderColor: #bac0ce,
-    buttonBackgroundColor: #3c424e,
-    buttonBorderColor: #4c525f,
-    buttonColor: #bac0ce,
     buttonPrimaryColor: #6f9df1,
-    buttonDangerColor: #ff8d85,
     primaryColor: #6f9df1,
-    primaryAccentColor: #6f9df1,
-    dangerColor: #ff8d85,
     successColor: #52e07c,
-    infoColor: #a4b0c6,
-    warningColor: #ffeb66,
-    logoSuffix: "white",
-    mfaLogoSuffix: "-w.png",
     passwordNumberColor: #6f9df1,
     passwordSpecialColor: #ff8d85,
-    passwordCountText: #ffffff,
-    calloutBorderColor: #4c525f,
-    calloutBackgroundColor: #3c424e,
-    toastTextColor: #1f242e,
-    svgSuffix: "-dark.svg",
-    transparentColor: rgba(0, 0, 0, 0),
-    dateInputColorScheme: dark,
-    // https://stackoverflow.com/a/53336754 - must prepend brightness(0) saturate(100%) to dark themed date inputs
-    webkitCalendarPickerFilter: brightness(0) saturate(100%) invert(86%) sepia(19%) saturate(152%)
-      hue-rotate(184deg) brightness(87%) contrast(93%),
-    webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(100%) sepia(0%)
-      saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%),
-    codeColor: $code-color-dark,
   ),
 );
 
diff --git a/apps/browser/tailwind.config.js b/apps/browser/tailwind.config.js
index 134001bbf13..faaa7fa4128 100644
--- a/apps/browser/tailwind.config.js
+++ b/apps/browser/tailwind.config.js
@@ -12,5 +12,6 @@ config.content = [
   "../../libs/vault/src/**/*.{html,ts}",
   "../../libs/pricing/src/**/*.{html,ts}",
 ];
+config.corePlugins.preflight = true;
 
 module.exports = config;