[CL-652] Remove bootstrap and enable tailwind preflight (#8071)

Wraps up the tailwind migration by removing bootstrap from the web vault.

apps/browser/src/platform/popup/layout/popup-layout.stories.ts

@@ -117,7 +117,7 @@ class MockPopoutButtonComponent {}
 @Component({
   selector: "mock-current-account",
   template: `
-    <button class="tw-bg-transparent tw-border-none tw-p-0 tw-me-1" type="button">
+    <button class="tw-bg-transparent tw-border-none tw-p-0 tw-me-1 tw-align-middle" type="button">
       <bit-avatar text="Ash Ketchum" size="small"></bit-avatar>
     </button>
   `,

apps/browser/src/popup/scss/tailwind.css

@@ -1,9 +1,5 @@
 @import "../../../../../libs/components/src/tw-theme.css";
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 @layer components {
   /** Safari Support */
   html.browser_safari .tw-styled-scrollbar::-webkit-scrollbar {

apps/desktop/src/scss/tailwind.css

@@ -1,5 +1 @@
 @import "../../../../libs/components/src/tw-theme.css";
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

apps/desktop/src/vault/app/vault/vault-filter/filters/organization-filter.component.html

@@ -49,7 +49,7 @@
               <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
               &nbsp;{{ organization.name }}
             </button>
-            <span *ngIf="!organization.enabled" class="ml-auto">
+            <span *ngIf="!organization.enabled" class="tw-ml-auto">
               <i
                 class="bwi bwi-fw bwi-exclamation-triangle text-danger mr-auto"
                 attr.aria-label="{{ 'organizationIsDisabled' | i18n }}"
@@ -124,7 +124,7 @@
               <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
               &nbsp;{{ organization.name }}
             </button>
-            <span *ngIf="!organization.enabled" class="ml-auto">
+            <span *ngIf="!organization.enabled" class="tw-ml-auto">
               <i
                 class="bwi bwi-fw bwi-exclamation-triangle text-danger mr-auto"
                 attr.aria-label="{{ 'organizationIsDisabled' | i18n }}"

apps/web/src/app/layouts/header/web-header.component.html

@@ -30,7 +30,7 @@
           <button
             type="button"
             [bitMenuTriggerFor]="accountMenu"
-            class="tw-border-0 tw-bg-transparent tw-p-0"
+            class="tw-border-0 tw-bg-transparent tw-p-0 tw-shrink-0"
           >
             <dynamic-avatar [id]="account.id" [text]="account | userName"></dynamic-avatar>
           </button>

apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.html

@@ -9,6 +9,7 @@
     >
       {{ "filters" | i18n }}
       <a
+        bitLink
         class="tw-float-right"
         href="https://bitwarden.com/help/searching-vault/"
         target="_blank"

apps/web/src/app/vault/individual-vault/vault-filter/shared/components/vault-filter-section.component.html

@@ -84,7 +84,7 @@
             ></i>
             &nbsp;{{ f.node.name }}
           </button>
-          <span class="ml-auto tw-flex tw-items-center">
+          <span class="tw-ml-auto tw-flex tw-items-center">
             <button
               type="button"
               *ngIf="editInfo && f.node.id"

apps/web/src/connectors/webauthn.scss

@@ -1,5 +0,0 @@
-@import "../scss/styles.scss";
-
-body {
-  min-width: 0px !important;
-}

apps/web/src/connectors/webauthn.ts

@@ -3,10 +3,6 @@
 import { b64Decode, getQsParam } from "./common";
 import { buildDataString, parseWebauthnJson } from "./common-webauthn";
 
-// FIXME: Remove when updating file. Eslint update
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-require("./webauthn.scss");
-
 const mobileCallbackUri = "bitwarden://webauthn-callback";
 
 let parsed = false;

apps/web/src/scss/base.scss

@@ -1,308 +0,0 @@
-html {
-  font-size: 16px;
-}
-
-body {
-  min-width: 1010px;
-  position: relative;
-
-  &.layout_frontend {
-    @media (prefers-color-scheme: dark) {
-      background-color: $darkDarkBlue2;
-    }
-    @media (prefers-color-scheme: light) {
-      background-color: $white;
-    }
-    @include themify($themes) {
-      background-color: themed("layoutFrontendColor");
-      color: themed("textHeadingColor");
-    }
-  }
-
-  @include themify($themes) {
-    background-color: themed("backgroundColor");
-    color: themed("textColor");
-  }
-
-  &.full-width:not(.layout_frontend) {
-    .container {
-      min-width: 980px;
-      width: 90%;
-    }
-  }
-}
-
-.container {
-  margin: 0 auto;
-  max-width: none !important;
-  padding: 0;
-  width: 980px;
-}
-
-.page-header,
-.secondary-header,
-.tabbed-header {
-  margin-bottom: 0.5rem;
-  padding-bottom: 0.6rem;
-
-  &:not(.text-danger) {
-    h1,
-    h2,
-    h3,
-    h4 {
-      margin: 0;
-      @include themify($themes) {
-        color: themed("textHeadingColor");
-      }
-    }
-  }
-}
-
-.page-header,
-.secondary-header {
-  @include themify($themes) {
-    border-bottom: 1px solid themed("separator");
-  }
-}
-
-.secondary-header,
-.spaced-header {
-  margin-top: 4rem;
-}
-
-.tabbed-header {
-  margin-top: 1.5rem;
-}
-
-img.logo {
-  display: block;
-  height: 43px;
-  margin: 0 auto;
-  width: 284px;
-}
-
-img.logo-themed {
-  @include themify($themes) {
-    content: url("../images/logo-" + themed("logoSuffix") + "@2x.png");
-  }
-}
-
-.page-content {
-  margin-top: 20px;
-}
-
-hr,
-.dropdown-divider {
-  @include themify($themes) {
-    border-top: 1px solid themed("separatorHr");
-  }
-}
-
-.min-height-fix {
-  min-height: 1px;
-}
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
-.cursor-move {
-  cursor: move !important;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5 {
-  @include themify($themes) {
-    color: themed("textHeadingColor");
-  }
-
-  small {
-    font-size: 80%;
-  }
-
-  &.spaced-header {
-    @include themify($themes) {
-      color: themed("textHeadingColor");
-    }
-  }
-}
-
-a {
-  @include themify($themes) {
-    color: themed("linkColor");
-  }
-
-  &.text-body {
-    @include themify($themes) {
-      color: themed("textHeadingColor") !important;
-      font-weight: themed("linkWeight");
-    }
-  }
-}
-
-code {
-  @include themify($themes) {
-    color: themed("codeColor");
-  }
-}
-
-.bwi-icon-above-input {
-  height: 1.5em;
-}
-
-.text-lg {
-  font-size: $font-size-lg;
-}
-
-.text-strike {
-  text-decoration: line-through;
-}
-
-.font-weight-semibold {
-  font-weight: 600;
-}
-
-.btn:focus,
-.btn.focus,
-.form-control:focus {
-  @include themify($themes) {
-    box-shadow: 0 0 0 0.2rem themed("focus");
-  }
-}
-
-/* Override Bootstrap theming */
-
-.bg-primary {
-  @include themify($themes) {
-    background-color: themed("bgPrimaryColor");
-  }
-}
-
-.bg-light {
-  @include themify($themes) {
-    background-color: themed("bgLightColor") !important;
-  }
-}
-
-.bg-success {
-  @include themify($themes) {
-    background-color: themed("success") !important;
-    color: themed("textSuccessColor") !important;
-  }
-}
-
-.bg-warning {
-  @include themify($themes) {
-    background-color: themed("warning") !important;
-    color: themed("textWarningColor") !important;
-  }
-}
-
-.bg-error,
-.bg-danger {
-  @include themify($themes) {
-    background-color: themed("danger") !important;
-    color: themed("textDangerColor") !important;
-  }
-}
-
-.bg-info {
-  @include themify($themes) {
-    background-color: themed("info") !important;
-    color: themed("textInfoColor") !important;
-  }
-}
-
-.border-primary {
-  @include themify($themes) {
-    border-color: themed("borderPrimaryColor") !important;
-  }
-}
-
-.border-warning {
-  @include themify($themes) {
-    border-color: themed("warning") !important;
-  }
-}
-
-.border-danger {
-  @include themify($themes) {
-    border-color: themed("danger") !important;
-  }
-}
-
-.border-info {
-  @include themify($themes) {
-    border-color: themed("info") !important;
-  }
-}
-
-.text-success {
-  @include themify($themes) {
-    color: themed("success") !important;
-  }
-
-  & > h1,
-  h2,
-  h3,
-  h4 {
-    @include themify($themes) {
-      color: themed("success") !important;
-    }
-  }
-}
-
-.text-warning {
-  @include themify($themes) {
-    color: themed("warning") !important;
-  }
-
-  & > h1,
-  h2,
-  h3,
-  h4 {
-    @include themify($themes) {
-      color: themed("warning") !important;
-    }
-  }
-}
-
-.text-danger {
-  &:not(.dropdown-item) {
-    @include themify($themes) {
-      color: themed("danger") !important;
-    }
-
-    & > h1,
-    h2,
-    h3,
-    h4 {
-      @include themify($themes) {
-        color: themed("danger") !important;
-      }
-    }
-  }
-}
-
-.text-muted {
-  @include themify($themes) {
-    color: themed("textMuted") !important;
-  }
-}
-
-button:not([bitbutton]):not([biticonbutton]) i.bwi,
-a i.bwi {
-  margin-right: 0.25rem;
-}
-
-.no-items {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}

apps/web/src/scss/buttons.scss

@@ -1,202 +0,0 @@
-.btn-primary {
-  @include themify($themes) {
-    background-color: themed("btnPrimary");
-    border-color: themed("btnPrimary");
-    color: themed("btnPrimaryText");
-  }
-
-  &:hover:not(:disabled),
-  &:active:not(:disabled) {
-    @include themify($themes) {
-      background-color: themed("btnPrimaryHover");
-      border-color: themed("btnPrimaryBorderHover");
-      color: themed("btnPrimaryText");
-    }
-  }
-
-  &:disabled {
-    opacity: 0.65;
-  }
-}
-
-.btn-outline-primary {
-  @include themify($themes) {
-    background-color: themed("btnOutlinePrimaryBackground");
-    border-color: themed("btnOutlinePrimaryBorder");
-    color: themed("btnOutlinePrimaryText");
-  }
-
-  &:hover:not(:disabled),
-  &:active {
-    @include themify($themes) {
-      background-color: themed("btnOutlinePrimaryBackgroundHover");
-      border-color: themed("btnOutlinePrimaryBorderHover");
-      color: themed("btnOutlinePrimaryTextHover");
-    }
-  }
-}
-
-.btn-secondary {
-  @include themify($themes) {
-    background-color: themed("btnSecondary");
-    border-color: themed("btnSecondaryBorder");
-    color: themed("btnSecondaryText");
-  }
-
-  &:hover:not(:disabled),
-  &:active:not(:disabled) {
-    @include themify($themes) {
-      background-color: themed("btnSecondaryHover");
-      border-color: themed("btnSecondaryBorderHover");
-      color: themed("btnSecondaryTextHover");
-    }
-  }
-
-  &:disabled {
-    opacity: 0.65;
-  }
-
-  &:focus,
-  &.focus {
-    @include themify($themes) {
-      box-shadow: 0 0 0 $btn-focus-width
-        rgba(mix(color-yiq(themed("primary")), themed("primary"), 15%), 0.5);
-    }
-  }
-}
-
-.btn-outline-secondary {
-  @include themify($themes) {
-    background-color: themed("btnOutlineSecondaryBackground");
-    border-color: themed("btnOutlineSecondaryBorder");
-    color: themed("btnOutlineSecondaryText");
-  }
-
-  &:hover:not(:disabled),
-  &:active {
-    @include themify($themes) {
-      background-color: themed("btnOutlineSecondaryBackgroundHover");
-      border-color: themed("btnOutlineSecondaryBorderHover");
-      color: themed("btnOutlineSecondaryTextHover");
-    }
-  }
-}
-
-.show > .btn-outline-secondary {
-  &.dropdown-toggle,
-  &:focus {
-    @include themify($themes) {
-      background-color: themed("btnOutlineSecondaryBackground");
-      border-color: themed("btnOutlineSecondaryBorder");
-      color: themed("btnOutlineSecondaryText");
-    }
-  }
-
-  &:hover {
-    @include themify($themes) {
-      background-color: themed("btnOutlineSecondaryBackgroundHover");
-      border-color: themed("btnOutlineSecondaryBorderHover");
-      color: themed("btnOutlineSecondaryTextHover");
-    }
-  }
-}
-
-.btn-danger {
-  @include themify($themes) {
-    background-color: themed("btnDanger");
-    border-color: themed("btnDanger");
-    color: themed("btnDangerText");
-  }
-
-  &:hover:not(:disabled),
-  &:active:not(:disabled) {
-    @include themify($themes) {
-      background-color: themed("btnDangerHover");
-      border-color: themed("btnDangerHover");
-      color: themed("btnDangerText");
-    }
-  }
-}
-
-.btn-outline-danger {
-  @include themify($themes) {
-    background-color: themed("btnOutlineDangerBackground");
-    border-color: themed("btnOutlineDangerBorder");
-    color: themed("btnOutlineDangerText");
-  }
-
-  &:hover:not(:disabled),
-  &:active {
-    @include themify($themes) {
-      background-color: themed("btnOutlineDangerBackgroundHover");
-      border-color: themed("btnOutlineDangerBorderHover");
-      color: themed("btnOutlineDangerTextHover");
-    }
-  }
-}
-
-.btn-link {
-  &:focus,
-  &.focus {
-    outline-color: -webkit-focus-ring-color;
-    outline-offset: 1px;
-    outline-style: auto;
-    outline-width: 1px;
-  }
-
-  &:not(.text-danger):not(.cursor-move) {
-    @include themify($themes) {
-      color: themed("btnLinkText");
-    }
-  }
-
-  &:hover:not(.text-danger):not(.cursor-move) {
-    @include themify($themes) {
-      color: themed("btnLinkTextHover");
-    }
-  }
-}
-
-.btn-submit {
-  position: relative;
-
-  .bwi-spinner {
-    align-items: center;
-    bottom: 0;
-    display: none;
-    justify-content: center;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-
-  &:disabled:not(.manual),
-  &[aria-disabled="true"]:not(.manual),
-  &.loading {
-    .bwi-spinner {
-      display: flex;
-    }
-
-    span {
-      visibility: hidden;
-    }
-  }
-}
-
-button.no-btn,
-a.no-btn {
-  background: transparent;
-  border: none;
-  padding: 0;
-  color: inherit;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  &:hover,
-  &:focus {
-    background: transparent;
-    box-shadow: none;
-    color: inherit;
-  }
-}

apps/web/src/scss/cards.scss

@@ -1,98 +0,0 @@
-.card {
-  @include themify($themes) {
-    background-color: themed("foregroundColor");
-    border-color: themed("borderColor");
-    color: themed("textColor");
-  }
-
-  &.text-danger {
-    &.text-danger > .card-body {
-      @include themify($themes) {
-        color: themed("danger");
-      }
-    }
-  }
-}
-
-.card-header,
-.modal-header {
-  font-weight: bold;
-  text-transform: uppercase;
-
-  small {
-    font-weight: normal;
-    text-transform: none;
-    @extend .text-muted;
-  }
-}
-
-.card-header {
-  @include themify($themes) {
-    background-color: themed("headerColor");
-    color: themed("textHeadingColor");
-  }
-
-  a:hover {
-    &:not(.badge) {
-      @include themify($themes) {
-        color: themed("learnMoreHover");
-      }
-    }
-  }
-}
-
-.card-body-header {
-  font-size: $font-size-lg;
-  @extend .mb-4;
-}
-
-.card ul.bwi-ul.card-ul {
-  margin-left: 1.9em;
-
-  li {
-    word-break: break-all;
-  }
-
-  .bwi-li {
-    top: 4px;
-  }
-
-  &.carets {
-    margin-left: 1.1em;
-
-    .bwi-li {
-      left: -17px;
-      width: 1.1em;
-    }
-  }
-
-  ul {
-    &.carets {
-      margin-left: 0.85em;
-    }
-  }
-
-  &.no-margin {
-    margin-left: 0;
-  }
-}
-
-.card-org-plans {
-  h2 {
-    font-size: $font-size-lg;
-  }
-}
-
-.card-body {
-  &:not(.bg-light > .card-body) {
-    @include themify($themes) {
-      background-color: themed("foregroundColor");
-      color: themed("textColor");
-    }
-    &.card-body a:not(li a) {
-      @include themify($themes) {
-        font-weight: themed("linkWeight");
-      }
-    }
-  }
-}

apps/web/src/scss/forms.scss

@@ -1,224 +0,0 @@
-::-ms-reveal {
-  display: none;
-}
-
-::placeholder {
-  @include themify($themes) {
-    color: themed("inputPlaceholderColor");
-  }
-}
-
-input,
-select,
-textarea {
-  &:required {
-    box-shadow: none;
-  }
-}
-
-input[type="search"]::-webkit-search-cancel-button {
-  -webkit-appearance: -cancel-button;
-}
-
-label:not(.form-check-label):not(.btn):not(:has(bit-label)),
-label.bold {
-  font-weight: 600;
-  @include themify($themes) {
-    color: themed("textHeadingColor");
-  }
-}
-
-label.form-check-label,
-.form-control-file {
-  @include themify($themes) {
-    color: themed("textHeadingColor");
-  }
-}
-
-.form-check-block {
-  .form-check-label {
-    font-weight: 600;
-
-    > small {
-      display: block;
-      font-weight: normal;
-      @include themify($themes) {
-        color: themed("textMuted");
-      }
-    }
-
-    > span {
-      display: block;
-      font-weight: normal;
-      @extend .mt-2;
-    }
-  }
-}
-
-.form-check-block + .form-check-block {
-  &:not(.mt-2) {
-    @extend .mt-3;
-  }
-}
-
-.form-group {
-  .form-group-child-check {
-    @extend .ml-4;
-  }
-}
-
-.form-inline {
-  input[type="datetime-local"] {
-    width: 200px;
-  }
-}
-
-.form-control {
-  @include themify($themes) {
-    background-color: themed("inputBackgroundColor");
-    border-color: themed("inputBorderColor");
-    color: themed("inputTextColor");
-
-    option {
-      background-color: themed("backgroundColor");
-    }
-  }
-
-  &:disabled,
-  &[readonly] {
-    @include themify($themes) {
-      background-color: themed("inputDisabledBackground");
-      color: themed("inputDisabledColor");
-    }
-  }
-}
-
-input[type="radio"],
-input[type="checkbox"] {
-  cursor: pointer;
-}
-
-.dropdown-menu,
-.dropdown-item {
-  @include themify($themes) {
-    background-color: themed("dropdownBackground");
-    color: themed("dropdownTextColor");
-  }
-}
-
-.dropdown-item {
-  @include themify($themes) {
-    color: themed("dropdownTextColor");
-  }
-
-  &.text-danger {
-    @include themify($themes) {
-      color: themed("danger") !important;
-    }
-  }
-  &:hover {
-    @include themify($themes) {
-      background-color: themed("dropdownHover");
-    }
-  }
-  &:active {
-    background-color: rgba(0, 0, 0, 0.1) !important;
-  }
-}
-
-.dropdown-menu {
-  button {
-    cursor: pointer;
-  }
-  @include themify($themes) {
-    border: 1px solid themed("listItemBorder");
-  }
-}
-
-.list-group-item {
-  &:focus,
-  &.focus {
-    z-index: 100;
-  }
-  @include themify($themes) {
-    background-color: themed("foregroundColor");
-    border-color: themed("listItemBorder");
-    color: themed("textColor");
-  }
-  > .two-factor-content {
-    justify-content: center;
-    flex-direction: row;
-    display: flex;
-    > .text-col {
-      flex-direction: column;
-      flex: 1;
-    }
-    > .logo-col {
-      min-width: 100px;
-      margin-right: 20px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      img {
-        height: fit-content;
-      }
-    }
-    > .btn-col {
-      width: 85px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
-
-.list-group-item.active {
-  font-weight: bold !important;
-  padding-left: calc(#{$list-group-item-padding-x} - 3px);
-  @include themify($themes) {
-    border-color: themed("borderColor");
-    border-left: 3px solid themed("borderPrimaryColor");
-    color: themed("listItemActive");
-  }
-}
-
-.section-header {
-  h3,
-  .btn.btn-link {
-    @include themify($themes) {
-      color: themed("headingColor");
-    }
-  }
-
-  h3 {
-    font-weight: normal;
-    text-transform: uppercase;
-  }
-}
-
-.error-inline {
-  @include themify($themes) {
-    color: themed("danger");
-  }
-}
-
-// Theming for invalid form elements in the SSO Config Form only
-// Will be deprecated by component-level styling in the Component Library
-app-org-manage-sso form {
-  .form-control.ng-invalid,
-  app-input-text.ng-invalid .form-control,
-  app-select.ng-invalid .form-control {
-    @include themify($themes) {
-      border-color: themed("danger");
-    }
-  }
-}
-
-// Browser specific icons overlayed on input fields. e.g. caps lock indicator on password field
-::-webkit-calendar-picker-indicator,
-input::-webkit-caps-lock-indicator,
-input::-webkit-credentials-auto-fill-button {
-  @include themify($themes) {
-    filter: themed("browserInputIconsFilter");
-  }
-}

apps/web/src/scss/modals.scss

@@ -1,179 +0,0 @@
-.modal-content {
-  border: none;
-  border-radius: none;
-  @include themify($themes) {
-    background-color: themed("backgroundColor");
-  }
-}
-
-.modal-dialog {
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 0.3rem;
-  width: $modal-md;
-}
-
-.modal-sm {
-  width: $modal-sm;
-}
-
-.modal-lg {
-  width: $modal-lg;
-}
-
-.modal-header {
-  @include themify($themes) {
-    background-color: themed("foregroundColor");
-    border-bottom: 1px solid themed("separator");
-    color: themed("textColor");
-  }
-
-  .modal-title {
-    font-size: 1.3rem;
-  }
-}
-
-.modal-body {
-  @include themify($themes) {
-    background-color: themed("foregroundColor");
-    color: themed("textColor");
-  }
-
-  h3,
-  .section-header > * {
-    font-weight: normal;
-    text-transform: uppercase;
-    @include themify($themes) {
-      color: themed("textMuted");
-    }
-  }
-}
-.modal .list-group-flush {
-  :first-child {
-    border-top: none;
-  }
-
-  :last-child {
-    border-bottom: none;
-  }
-}
-
-.modal .list-group-flush-2fa {
-  div {
-    border-left: none;
-    border-right: none;
-  }
-  div:first-child {
-    border-top: none;
-  }
-
-  div:last-child {
-    border-bottom: none;
-  }
-}
-
-.modal-footer {
-  justify-content: flex-start;
-  @include themify($themes) {
-    background-color: themed("footerBackgroundColor");
-    border-top: 1px solid themed("separator");
-  }
-}
-
-.close {
-  @include themify($themes) {
-    color: themed("textColor");
-  }
-}
-
-.totp {
-  .totp-code {
-    @extend .text-monospace;
-    font-size: 1.2rem;
-  }
-
-  .totp-countdown {
-    display: block;
-    margin: 3px 3px 0 0;
-    user-select: none;
-
-    .totp-sec {
-      font-size: 0.85em;
-      line-height: 32px;
-      position: absolute;
-      text-align: center;
-      width: 32px;
-    }
-
-    svg {
-      height: 32px;
-      transform: rotate(-90deg);
-      width: 32px;
-    }
-
-    .totp-circle {
-      fill: none;
-      @include themify($themes) {
-        stroke: themed("primary");
-      }
-
-      &.inner {
-        stroke-dasharray: 78.6;
-        stroke-dashoffset: 0;
-        stroke-width: 3;
-      }
-
-      &.outer {
-        stroke-dasharray: 88;
-        stroke-dashoffset: 0;
-        stroke-width: 2;
-      }
-    }
-
-    .totp-circle-muted {
-      fill: none;
-      @include themify($themes) {
-        stroke: themed("info");
-      }
-
-      &.inner {
-        stroke-dasharray: 78.6;
-        stroke-dashoffset: 0;
-        stroke-width: 3;
-      }
-
-      &.outer {
-        stroke-dasharray: 88;
-        stroke-dashoffset: 0;
-        stroke-width: 2;
-      }
-    }
-  }
-
-  > .align-items-center {
-    margin-bottom: -5px;
-  }
-
-  &.low {
-    .totp-sec,
-    .totp-code {
-      @include themify($themes) {
-        color: themed("danger");
-      }
-    }
-
-    .totp-circle {
-      @include themify($themes) {
-        stroke: themed("danger");
-      }
-    }
-  }
-}
-
-.cdk-drag-preview {
-  border-radius: $border-radius;
-  opacity: 0.8;
-  z-index: $zindex-tooltip !important;
-  @include themify($themes) {
-    background: themed("cdkDraggingBackground");
-  }
-}

apps/web/src/scss/pages.scss

@@ -1,117 +0,0 @@
-tools-import {
-  textarea {
-    height: 150px;
-  }
-}
-
-app-avatar {
-  img {
-    @extend .rounded;
-  }
-}
-
-app-user-billing {
-  .progress {
-    height: 20px;
-
-    .progress-bar {
-      min-width: 50px;
-    }
-  }
-}
-
-app-sponsored-families {
-  .inset-list {
-    padding-left: 1.5rem;
-  }
-}
-
-/* Register Layout Page */
-.layout {
-  &.default,
-  &.teams,
-  &.teams1,
-  &.teams2,
-  &.enterprise,
-  &.enterprise1,
-  &.enterprise2,
-  &.cnetcmpgnent,
-  &.cnetcmpgnteams,
-  &.cnetcmpgnind {
-    header {
-      background: #175ddc;
-      color: #ced4da;
-      height: 70px;
-
-      &:before {
-        background: #175ddc;
-        content: "";
-        height: 520px;
-        left: 0;
-        position: absolute;
-        top: -80px;
-        transform: skewY(-3deg);
-        width: 100%;
-        z-index: -1;
-      }
-      img.logo {
-        height: 57px;
-        margin: 12px 0 0;
-        max-width: 284px;
-        width: 284px;
-      }
-    }
-
-    h1 {
-      color: #ffffff;
-      font-size: 3.5rem;
-      margin: 50px 0 0;
-    }
-
-    h2 {
-      color: #ffffff;
-      font-size: 2rem;
-      line-height: 1.5;
-      margin: 20px 0 140px;
-    }
-
-    p {
-      font-size: 2rem;
-      margin: 10px 0 70px 0;
-
-      &:before {
-        content: "/";
-        padding-right: 12px;
-      }
-      &:not(.highlight) {
-        &:before {
-          color: #1252a3;
-        }
-      }
-
-      b {
-        &:after {
-          content: "⟶";
-          font-size: 2rem;
-          padding-left: 6px;
-        }
-      }
-    }
-
-    figure {
-      margin: 0;
-    }
-
-    blockquote {
-      font-size: 1.4rem;
-      margin: 20px 0 0;
-    }
-  }
-
-  &.cnetcmpgnind {
-    p {
-      font-size: 1.5rem;
-      margin: 10px 0 50px 0;
-    }
-  }
-}

apps/web/src/scss/plugins.scss

@@ -1,126 +0,0 @@
-#duo-frame {
-  height: 330px;
-  @include themify($themes) {
-    background: themed("imgLoading") 0 0 no-repeat;
-  }
-
-  iframe {
-    border: none;
-    height: 100%;
-    width: 100%;
-  }
-}
-
-#web-authn-frame {
-  height: 40px;
-  @include themify($themes) {
-    background: themed("imgLoading") 0 0 no-repeat;
-  }
-
-  iframe {
-    border: none;
-    height: 100%;
-    width: 100%;
-  }
-}
-
-@each $mfaType in $mfaTypes {
-  .mfaType#{$mfaType} {
-    content: url("../images/two-factor/" + $mfaType + ".png");
-    max-width: 120px;
-  }
-}
-
-.mfaType0 {
-  @include themify($themes) {
-    content: url("../images/two-factor/0.png");
-    max-width: 120px;
-    max-height: 62px;
-  }
-}
-
-.mfaType1 {
-  @include themify($themes) {
-    content: url("../images/two-factor/1" + themed("mfaLogoSuffix"));
-    max-width: 120px;
-    max-height: 62px;
-  }
-}
-
-.mfaType7 {
-  @include themify($themes) {
-    content: url("../images/two-factor/7" + themed("mfaLogoSuffix"));
-    max-width: 120px;
-  }
-}
-
-.progress {
-  @include themify($themes) {
-    background-color: themed("pwStrengthBackground");
-  }
-}
-
-// Braintree
-
-#bt-dropin-container {
-  min-height: 50px;
-  @include themify($themes) {
-    background: themed("loadingSvg") center center no-repeat;
-  }
-}
-
-.braintree-placeholder,
-.braintree-sheet__header {
-  display: none;
-}
-
-.braintree-sheet__content--button {
-  min-height: 0;
-  padding: 0;
-  text-align: left;
-}
-
-.braintree-sheet__container {
-  margin-bottom: 0;
-}
-
-.braintree-sheet {
-  border: none;
-}
-
-// hide duplicate paypal iframe
-.braintree-sheet__content--button
-  .braintree-sheet__button--paypal
-  iframe.zoid-prerender-frame.zoid-invisible {
-  display: none !important;
-}
-
-[data-braintree-id="upper-container"]::before {
-  @include themify($themes) {
-    background-color: themed("backgroundColor");
-  }
-}
-
-.card [data-braintree-id="upper-container"]::before {
-  @include themify($themes) {
-    background-color: themed("foregroundColor");
-  }
-}
-
-[data-braintree-id="paypal-button"] {
-  @include themify($themes) {
-    background-color: themed("backgroundColor");
-  }
-}
-
-.card [data-braintree-id="paypal-button"] {
-  @include themify($themes) {
-    background-color: themed("foregroundColor");
-  }
-}
-
-.paypal-button-text {
-  @include themify($themes) {
-    color: themed("textColor");
-  }
-}

apps/web/src/scss/styles.scss

@@ -1,55 +1,10 @@
-@import "../../../../libs/angular/src/scss/webfonts.css";
 @import "./variables";
+
+@import "../../../../libs/angular/src/scss/webfonts.css";
 @import "../../../../libs/angular/src/scss/bwicons/styles/style.scss";
 @import "../../../../libs/angular/src/scss/icons.scss";
 @import "../../../../libs/components/src/multi-select/scss/bw.theme";
 @import "@angular/cdk/overlay-prebuilt.css";
 @import "@angular/cdk/text-field-prebuilt.css";
 
-//@import "~bootstrap/scss/bootstrap";
-@import "~bootstrap/scss/_functions";
-@import "~bootstrap/scss/_variables";
-@import "~bootstrap/scss/_mixins";
-@import "~bootstrap/scss/_root";
-@import "~bootstrap/scss/_reboot";
-@import "~bootstrap/scss/_type";
-@import "~bootstrap/scss/_images";
-@import "~bootstrap/scss/_code";
-@import "~bootstrap/scss/_grid";
-@import "~bootstrap/scss/_tables";
-@import "~bootstrap/scss/_forms";
-@import "~bootstrap/scss/_buttons";
-@import "~bootstrap/scss/_transitions";
-@import "~bootstrap/scss/_dropdown";
-// @import "~bootstrap/scss/_button-group";
-@import "~bootstrap/scss/_input-group";
-// @import "~bootstrap/scss/_custom-forms";
-@import "~bootstrap/scss/_nav";
-// @import "~bootstrap/scss/_navbar";
-@import "~bootstrap/scss/_card";
-// @import "~bootstrap/scss/_breadcrumb";
-// @import "~bootstrap/scss/_pagination";
-// @import "~bootstrap/scss/_jumbotron";
-// @import "~bootstrap/scss/_alert";
-@import "~bootstrap/scss/_progress";
-// @import "~bootstrap/scss/_media";
-@import "~bootstrap/scss/_list-group";
-@import "~bootstrap/scss/_close";
-//@import "~bootstrap/scss/_toasts";
-@import "~bootstrap/scss/_modal";
-// @import "~bootstrap/scss/_tooltip";
-// @import "~bootstrap/scss/_popover";
-// @import "~bootstrap/scss/_carousel";
-// @import "~bootstrap/scss/_spinners";
-@import "~bootstrap/scss/_utilities";
-@import "~bootstrap/scss/_print";
-
-@import "./base";
-@import "./buttons";
-@import "./cards";
-@import "./forms";
-@import "./modals";
-@import "./pages";
-@import "./plugins";
-@import "./tables";
 @import "./vault-filters";

apps/web/src/scss/tables.scss

@@ -1,145 +0,0 @@
-.table {
-  @include themify($themes) {
-    color: themed("textColor");
-  }
-
-  td {
-    vertical-align: middle;
-    @include themify($themes) {
-      color: themed("textColor");
-    }
-
-    & > a {
-      &:not(.badge) {
-        @include themify($themes) {
-          color: themed("tableLinkColor");
-        }
-        &:hover {
-          @include themify($themes) {
-            color: themed("tableLinkColorHover");
-          }
-        }
-      }
-    }
-
-    &.reduced-lh {
-      line-height: 1;
-
-      small {
-        font-size: 80%;
-      }
-    }
-
-    small,
-    > .bwi,
-    .icon {
-      @include themify($themes) {
-        color: themed("textMuted");
-      }
-    }
-
-    .bwi-globe {
-      @include themify($themes) {
-        color: themed("iconColor");
-      }
-    }
-  }
-
-  td.wrap {
-    word-break: break-all;
-  }
-
-  td.table-list-options {
-    height: 50px;
-    max-width: 76px;
-    text-align: right;
-    width: 76px;
-
-    &.wider {
-      max-width: 100px;
-      width: 100px;
-    }
-
-    .btn {
-      line-height: 1;
-      transition: initial;
-    }
-
-    .dropdown-menu {
-      line-height: $line-height-base;
-    }
-  }
-
-  td.table-action-right {
-    text-align: right;
-  }
-
-  // Deprecated: only used for old Bootstrap table-list-option menus before the End User Vault Refresh.
-  // New menus should be permanently visible.
-  tr:not(:hover) td.table-list-options {
-    > .dropdown:not(.show) button:not(:focus):not(:active),
-    > button.dropdown-toggle:not(:focus):not(:active) {
-      @extend .sr-only;
-    }
-  }
-
-  td.table-list-icon {
-    max-width: 45px;
-    text-align: center;
-    width: 45px;
-
-    img {
-      @extend .rounded;
-      @extend .img-fluid;
-      max-height: 24px;
-    }
-  }
-
-  td.table-list-checkbox {
-    max-width: 35px;
-    width: 35px;
-  }
-
-  td.table-list-strike {
-    text-decoration: line-through;
-    @include themify($themes) {
-      color: themed("textMuted");
-    }
-  }
-
-  &.table-list {
-    &.table td,
-    .table th {
-      &:not(tr:first-child td) {
-        @include themify($themes) {
-          border-top: 1px solid themed("tableSeparator");
-        }
-      }
-    }
-
-    thead th {
-      border-top: none;
-    }
-
-    tr:first-child {
-      td {
-        border: none;
-      }
-    }
-  }
-}
-
-.table-hover tbody tr:hover {
-  @include themify($themes) {
-    background-color: themed("tableRowHover");
-    color: themed("tableColorHover");
-  }
-}
-
-// Restrict app-vault-icon in new bit-table to max height of 24px
-// Can be removed when app-vault-icon is migrated to use Tailwind
-bit-table td app-vault-icon img {
-  @extend .rounded;
-  @extend .img-fluid;
-  max-height: 24px;
-}

apps/web/src/scss/tailwind.css

@@ -1,7 +1,4 @@
-@import "../../../../libs/components/src/tw-theme.css";
+@import "../../../../libs/components/src/tw-theme-preflight.css";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 
 /*
  * Web specific global styling.

apps/web/src/scss/variables.scss

@@ -1,336 +1 @@
 $dark-icon-themes: "theme_dark";
-
-$primary: #175ddc;
-$primary-accent: #1252a3;
-$secondary: #ced4da;
-$secondary-alt: #1a3b66;
-$success: #017e45;
-$info: #555555;
-$warning: #8b6609;
-$danger: #c83522;
-$white: #ffffff;
-
-// Bootstrap Variable Overrides
-
-$theme-colors: (
-  "primary-accent": $primary-accent,
-  "secondary-alt": $secondary-alt,
-);
-
-$body-bg: $white;
-$body-color: #1b2029;
-
-$font-family-sans-serif:
-  Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-  "Segoe UI Symbol";
-
-$h1-font-size: 1.7rem;
-$h2-font-size: 1.3rem;
-$h3-font-size: 1rem;
-$h4-font-size: 1rem;
-$h5-font-size: 1rem;
-$h6-font-size: 1rem;
-
-$small-font-size: 90%;
-$font-size-lg: 1.15rem;
-$code-font-size: 100%;
-
-$grid-gutter-width: 20px;
-$card-spacer-y: 0.6rem;
-
-$list-group-item-padding-y: 0.6rem;
-$list-group-active-color: $body-color;
-$list-group-active-bg: $white;
-$list-group-active-border-color: rgba(#000000, 0.125);
-
-$dropdown-link-color: $body-color;
-$dropdown-link-hover-bg: rgba(#000000, 0.06);
-$dropdown-link-active-color: $dropdown-link-color;
-$dropdown-link-active-bg: rgba(#000000, 0.1);
-$dropdown-item-padding-x: 1rem;
-
-$input-bg: #fbfbfb;
-$input-focus-bg: $white;
-$input-disabled-bg: #e0e0e0;
-$input-placeholder-color: #b4b4b4;
-
-$table-accent-bg: rgba(#000000, 0.02);
-$table-hover-bg: rgba(#000000, 0.03);
-
-$modal-backdrop-opacity: 0.3;
-$btn-font-weight: 600;
-$lead-font-weight: normal;
-
-$grid-breakpoints: (
-  xs: 0,
-  sm: 1px,
-  md: 2px,
-  lg: 3px,
-  xl: 4px,
-);
-
-$border-color: $secondary;
-
-// MFA Types for logo styling with no dark theme alternative
-
-$mfaTypes: 0, 2, 3, 4, 6;
-
-// Theme Variables
-// Light
-
-$lightDangerHover: #c43421;
-$lightInputColor: #465057;
-$lightInputPlaceholderColor: #b6b8b8;
-$lightCodeColor: #c01176;
-
-// Dark
-
-$darkPrimary: #6a99f0;
-$darkPrimary-alt: #b4ccf9;
-$darkDanger: #ff8d85;
-$darkDangerHover: #ffbfbb;
-$darkSuccess: #52e07c;
-$darkWarning: #ffeb66;
-$darkInfo: #a4b0c6;
-$darkLinks: #6a99f0;
-$darkGrey1: #bac0ce;
-$darkGrey2: #8d94a5;
-$darkBlue1: #4c525f;
-$darkBlue2: #3c424e;
-$darkDarkBlue1: #2f343d;
-$darkDarkBlue2: #1f242e;
-$darkInputColor: $white;
-$darkInputPlaceholderColor: $darkGrey1;
-$darkCodeColor: #f08dc7;
-
-$themes: (
-  light: (
-    primary: $primary,
-    primaryAlt: $primary-accent,
-    danger: $danger,
-    info: #343a40,
-    success: $success,
-    warning: $warning,
-    backgroundColor: $white,
-    badgeDangerBackground: $danger,
-    badgeDangerText: $white,
-    badgeInfoBackground: #555555,
-    badgeInfoText: $white,
-    badgePrimaryBackground: $primary,
-    badgePrimaryBackgroundHover: #134eb9,
-    badgePrimaryText: $white,
-    badgeSecondaryBackground: #ced4da,
-    badgeSecondaryText: #212529,
-    bgLightColor: #f8f9fa,
-    bgPrimaryColor: $primary,
-    borderColor: $border-color,
-    borderPrimaryColor: $primary,
-    browserInputIconsFilter: invert(0),
-    btnDanger: $danger,
-    btnDangerHover: $lightDangerHover,
-    btnDangerText: $white,
-    btnLinkText: $primary,
-    btnLinkTextHover: #104097,
-    btnOutlineDangerBackground: $input-bg,
-    btnOutlineDangerBackgroundHover: $danger,
-    btnOutlineDangerBorder: #ced4da,
-    btnOutlineDangerBorderHover: $danger,
-    btnOutlineDangerText: $danger,
-    btnOutlineDangerTextHover: $white,
-    btnOutlinePrimaryBackground: $input-bg,
-    btnOutlinePrimaryBackgroundHover: $primary,
-    btnOutlinePrimaryBorder: #ced4da,
-    btnOutlinePrimaryBorderHover: $primary,
-    btnOutlinePrimaryText: $primary,
-    btnOutlinePrimaryTextHover: $white,
-    btnOutlineSecondaryBackground: $input-bg,
-    btnOutlineSecondaryBackgroundHover: #ced4da,
-    btnOutlineSecondaryBorder: #ced4da,
-    btnOutlineSecondaryBorderHover: #ced4da,
-    btnOutlineSecondaryText: #6c757d,
-    btnOutlineSecondaryTextHover: #333333,
-    btnPrimary: $primary,
-    btnPrimaryBorderHover: #1249ae,
-    btnPrimaryHover: #134eb9,
-    btnPrimaryText: $white,
-    btnSecondary: $secondary,
-    btnSecondaryBorder: $secondary,
-    btnSecondaryBorderHover: #b1bbc4,
-    btnSecondaryHover: #b8c1ca,
-    btnSecondaryText: #212529,
-    btnSecondaryTextHover: #212529,
-    calloutBackground: #fafafa,
-    calloutColor: #212529,
-    cdkDraggingBackground: $white,
-    codeColor: $lightCodeColor,
-    dropdownBackground: $white,
-    dropdownHover: rgba(0, 0, 0, 0.06),
-    dropdownTextColor: $body-color,
-    dropdownTextMuted: #6c757d,
-    focus: rgb(23 93 220 / 25%),
-    footerBackgroundColor: #fbfbfb,
-    foregroundColor: $white,
-    headerColor: rgba(0, 0, 0, 0.03),
-    iconColor: #777777,
-    iconHover: $body-color,
-    imgFilter: invert(0) grayscale(0),
-    inputBackgroundColor: $input-bg,
-    inputBorderColor: $border-color,
-    inputDisabledBackground: #e0e0e0,
-    inputDisabledColor: #6c757d,
-    inputPlaceholderColor: $lightInputPlaceholderColor,
-    inputTextColor: $lightInputColor,
-    layoutFrontendColor: #ecf0f5,
-    learnMoreHover: #104097,
-    linkColor: $primary,
-    linkColorHover: #104097,
-    linkWeight: 400,
-    listItemActive: $body-color,
-    listItemBorder: rgba(0, 0, 0, 0.125),
-    loadingSvg: url("../images/loading.svg"),
-    logoSuffix: "dark",
-    mfaLogoSuffix: ".png",
-    pwStrengthBackground: #e9ecef,
-    separator: $secondary,
-    separatorHr: rgb(0, 0, 0, 0.1),
-    tableColorHover: #333333,
-    tableLinkColor: $primary,
-    tableLinkColorHover: #104097,
-    tableRowHover: rgba(0, 0, 0, 0.03),
-    tableSeparator: #dee2e6,
-    textColor: $body-color,
-    textDangerColor: $white,
-    textInfoColor: $white,
-    textHeadingColor: $body-color,
-    textMuted: #6c757d,
-    textSuccessColor: $white,
-    textWarningColor: $white,
-    svgSuffix: "-light.svg",
-  ),
-  dark: (
-    primary: $darkPrimary,
-    primaryAlt: $darkPrimary-alt,
-    danger: $darkDanger,
-    info: $darkInfo,
-    success: $darkSuccess,
-    warning: $darkWarning,
-    backgroundColor: $darkDarkBlue2,
-    badgeDangerBackground: $darkDanger,
-    badgeDangerText: $darkDarkBlue2,
-    badgeInfoBackground: $darkInfo,
-    badgeInfoText: $darkDarkBlue2,
-    badgePrimaryBackground: $darkLinks,
-    badgePrimaryBackgroundHover: $darkPrimary-alt,
-    badgePrimaryText: $darkDarkBlue2,
-    badgeSecondaryBackground: $darkGrey2,
-    badgeSecondaryText: $darkDarkBlue2,
-    bgLightColor: $darkDarkBlue2,
-    bgPrimaryColor: $darkPrimary,
-    borderColor: $darkBlue1,
-    borderPrimaryColor: $darkPrimary,
-    browserInputIconsFilter: invert(1),
-    btnDanger: $darkDanger,
-    btnDangerHover: $darkDangerHover,
-    btnDangerText: $darkDarkBlue2,
-    btnLinkText: $white,
-    btnLinkTextHover: $darkGrey1,
-    btnOutlineDangerBackground: $darkDanger,
-    btnOutlineDangerBackgroundHover: $darkDangerHover,
-    btnOutlineDangerBorder: $darkDanger,
-    btnOutlineDangerBorderHover: $darkDangerHover,
-    btnOutlineDangerText: $darkDarkBlue2,
-    btnOutlineDangerTextHover: $darkDarkBlue2,
-    btnOutlinePrimaryBackground: $darkPrimary,
-    btnOutlinePrimaryBackgroundHover: $darkPrimary-alt,
-    btnOutlinePrimaryBorder: $darkPrimary,
-    btnOutlinePrimaryBorderHover: $darkPrimary-alt,
-    btnOutlinePrimaryText: $darkDarkBlue2,
-    btnOutlinePrimaryTextHover: $darkDarkBlue2,
-    btnOutlineSecondaryBackground: transparent,
-    btnOutlineSecondaryBackgroundHover: transparent,
-    btnOutlineSecondaryBorder: $darkGrey1,
-    btnOutlineSecondaryBorderHover: $darkGrey2,
-    btnOutlineSecondaryText: $white,
-    btnOutlineSecondaryTextHover: $darkGrey2,
-    btnPrimary: $darkLinks,
-    btnPrimaryBorderHover: $darkPrimary-alt,
-    btnPrimaryHover: $darkPrimary-alt,
-    btnPrimaryText: $darkDarkBlue2,
-    btnSecondary: transparent,
-    btnSecondaryBorder: $darkGrey1,
-    btnSecondaryBorderHover: $darkGrey2,
-    btnSecondaryHover: transparent,
-    btnSecondaryText: $white,
-    btnSecondaryTextHover: $darkGrey2,
-    calloutBackground: $darkBlue2,
-    calloutColor: $white,
-    cdkDraggingBackground: $darkDarkBlue1,
-    codeColor: $darkCodeColor,
-    dropdownBackground: $darkDarkBlue1,
-    dropdownHover: rgba(255, 255, 255, 0.03),
-    dropdownTextColor: $white,
-    dropdownTextMuted: #bec6cf,
-    focus: rgb(106 153 240 / 25%),
-    footerBackgroundColor: $darkBlue1,
-    foregroundColor: $darkDarkBlue1,
-    headerColor: $darkBlue1,
-    iconColor: #777777,
-    iconHover: $darkGrey2,
-    imgFilter: invert(1) grayscale(1),
-    inputBackgroundColor: transparent,
-    inputBorderColor: $darkGrey1,
-    inputDisabledBackground: $darkBlue2,
-    inputDisabledColor: $darkGrey1,
-    inputPlaceholderColor: $darkInputPlaceholderColor,
-    inputTextColor: $darkInputColor,
-    layoutFrontendColor: $darkDarkBlue2,
-    learnMoreHover: $darkPrimary-alt,
-    linkColor: $darkLinks,
-    linkColorHover: $darkLinks,
-    linkWeight: 600,
-    listItemActive: $darkPrimary,
-    listItemBorder: $darkBlue1,
-    loadingSvg: url("../images/loading-white.svg"),
-    logoSuffix: "white",
-    mfaLogoSuffix: "-w.png",
-    pwStrengthBackground: $darkBlue2,
-    separator: $darkBlue1,
-    separatorHr: $darkBlue1,
-    tableColorHover: $darkGrey1,
-    tableLinkColor: $white,
-    tableLinkColorHover: $white,
-    tableRowHover: rgba(255, 255, 255, 0.03),
-    tableSeparator: $darkBlue1,
-    textColor: $darkGrey1,
-    textDangerColor: $darkDarkBlue2,
-    textHeadingColor: $white,
-    textInfoColor: $darkDarkBlue2,
-    textMuted: $darkGrey1,
-    textSuccessColor: $darkDarkBlue2,
-    textWarningColor: $darkDarkBlue2,
-    svgSuffix: "-dark.svg",
-  ),
-);
-
-@mixin themify($themes: $themes) {
-  @each $theme, $map in $themes {
-    html.theme_#{$theme} & {
-      $theme-map: () !global;
-      @each $key, $submap in $map {
-        $value: map-get(map-get($themes, $theme), "#{$key}");
-        $theme-map: map-merge(
-          $theme-map,
-          (
-            $key: $value,
-          )
-        ) !global;
-      }
-      @content;
-      $theme-map: null !global;
-    }
-  }
-}
-
-@function themed($key) {
-  @return map-get($theme-map, $key);
-}

apps/web/src/scss/vault-filters.scss

@@ -7,22 +7,13 @@
   align-items: center;
 
   * {
-    @include themify($themes) {
+    font-size: 1rem;
-      color: themed("headingColor");
-    }
-    font-size: $font-size-base;
-  }
-
-  button {
-    @extend .no-btn;
   }
 
   h3,
   button.filter-button {
     margin: 0;
-    @include themify($themes) {
+    color: rgb(var(--color-text-muted));
-      color: themed("textMuted");
-    }
   }
 
   .filter-button {
@@ -31,9 +22,7 @@
       &:hover,
       &:focus,
       &.active {
-        @include themify($themes) {
+        color: rgb(var(--color-primary-600));
-          color: themed("linkColor") !important;
-        }
       }
       &.active {
         font-weight: bold;
@@ -44,12 +33,6 @@
   button.toggle-button,
   button.add-button {
     margin-right: 0.25rem;
-    &:hover,
-    &:focus {
-      @include themify($themes) {
-        color: themed("iconHover") !important;
-      }
-    }
   }
 }
 
@@ -65,16 +48,12 @@
 }
 
 .filter-option {
-  @include themify($themes) {
+  color: rgb(var(--color-text-main));
-    color: themed("textColor");
-  }
 
   &.active {
     > .filter-buttons {
       .filter-button {
-        @include themify($themes) {
+        color: rgb(var(--color-primary-600));
-          color: themed("linkColor") !important;
-        }
         font-weight: bold;
       }
 
@@ -89,23 +68,12 @@
   display: flex;
   align-items: center;
 
-  button,
-  a {
-    @extend .no-btn;
-  }
-
   .contents {
     display: contents;
   }
 
   .toggle-button {
     margin-right: 0.25rem;
-    &:hover,
-    &:focus {
-      @include themify($themes) {
-        color: themed("iconHover") !important;
-      }
-    }
   }
 
   .filter-button {
@@ -115,9 +83,7 @@
     &:hover,
     &:focus,
     &:active {
-      @include themify($themes) {
+      color: rgb(var(--color-primary-600));
-        color: themed("linkColor") !important;
-      }
       text-decoration: none;
     }
 
@@ -130,15 +96,11 @@
     visibility: hidden;
     margin-left: auto;
 
-    @include themify($themes) {
+    color: rgb(var(--color-primary-600));
-      color: themed("headingButtonColor");
-    }
 
     &:hover,
     &:focus {
-      @include themify($themes) {
+      color: rgb(var(--color-text-main));
-        color: themed("iconHover") !important;
-      }
     }
   }
 
@@ -152,33 +114,15 @@
     margin-bottom: 0;
   }
 
-  a {
-    @include themify($themes) {
-      color: themed("textHeadingColor");
-    }
-  }
-  .show-active {
-    display: none;
-  }
-  li.active {
-    > .show-active,
-    > div .show-active {
-      display: inline;
-    }
-  }
   li.active {
     > button:first-of-type,
     > div button:first-of-type {
-      @include themify($themes) {
+      color: rgb(var(--color-primary-600));
-        color: themed("linkColor");
-      }
     }
 
     > .bwi,
     > div > .bwi {
-      @include themify($themes) {
+      color: rgb(var(--color-primary-600));
-        color: themed("linkColor");
-      }
     }
   }
 }

apps/web/tailwind.config.js

@@ -10,5 +10,6 @@ config.content = [
   "../../libs/angular/src/**/*.{html,ts}",
   "../../bitwarden_license/bit-web/src/**/*.{html,ts}",
 ];
+config.corePlugins.preflight = true;
 
 module.exports = config;

libs/auth/src/angular/input-password/input-password.component.html

@@ -133,6 +133,7 @@
     <bit-label>
       {{ "rotateAccountEncKey" | i18n }}
       <a
+        bitLink
         href="https://bitwarden.com/help/account-encryption-key/#rotate-your-encryption-key"
         target="_blank"
         rel="noreferrer"

libs/auth/src/angular/input-password/input-password.component.ts

@@ -28,6 +28,7 @@ import {
   FormFieldModule,
   IconButtonModule,
   InputModule,
+  LinkModule,
   ToastService,
   Translation,
 } from "@bitwarden/components";
@@ -112,6 +113,7 @@ interface InputPasswordForm {
     PasswordCalloutComponent,
     PasswordStrengthV2Component,
     ReactiveFormsModule,
+    LinkModule,
     SharedModule,
   ],
 })

libs/components/src/avatar/avatar.component.ts

@@ -50,7 +50,7 @@ export class AvatarComponent implements OnChanges {
   }
 
   get classList() {
-    return ["tw-rounded-full"]
+    return ["tw-rounded-full", "tw-inline"]
       .concat(SizeClasses[this.size()] ?? [])
       .concat(this.border() ? ["tw-border", "tw-border-solid", "tw-border-secondary-600"] : []);
   }

libs/components/src/form-field/form-field.component.html

@@ -56,7 +56,7 @@
         <ng-container *ngTemplateOutlet="prefixContent"></ng-container>
       </div>
       <div
-        class="tw-w-full tw-relative tw-py-1 has-[bit-select]:tw-p-0 has-[bit-multi-select]:tw-p-0 has-[input:read-only:not([hidden])]:tw-bg-secondary-100 has-[textarea:read-only:not([hidden])]:tw-bg-secondary-100"
+        class="tw-w-full tw-relative tw-py-1 has-[bit-select]:tw-p-0 has-[bit-multi-select]:tw-p-0 has-[input:read-only:not([hidden])]:tw-bg-secondary-100 has-[textarea:read-only:not([hidden])]:tw-bg-secondary-100 has-[textarea]:tw-my-1"
         data-default-content
         [ngClass]="[
           prefixHasChildren() ? '' : 'tw-rounded-s-lg tw-ps-3',

libs/components/src/input/input.directive.ts

@@ -45,6 +45,7 @@ export class BitInputDirective implements BitFormFieldControl {
       "tw-block",
       "tw-w-full",
       "tw-h-full",
+      "tw-px-1",
       "tw-text-main",
       "tw-placeholder-text-muted",
       "tw-bg-background",

libs/components/src/stepper/stepper.component.html

@@ -36,7 +36,13 @@
               </span>
             }
             <div class="tw-leading-snug tw-text-left">
-              <p bitTypography="body1" class="tw-m-0">{{ step.label }}</p>
+              <p
+                bitTypography="body1"
+                class="tw-m-0"
+                [ngClass]="{ 'tw-text-muted': isCurrentStepDisabled }"
+              >
+                {{ step.label }}
+              </p>
 
               @if (step.subLabel()) {
                 <p bitTypography="body2" class="tw-m-0 tw-mt-1 tw-text-muted">
@@ -95,7 +101,13 @@
           </span>
         }
         <div class="tw-leading-snug tw-text-left">
-          <p bitTypography="body1" class="tw-m-0">{{ step.label }}</p>
+          <p
+            bitTypography="body1"
+            class="tw-m-0"
+            [ngClass]="{ 'tw-text-muted': isCurrentStepDisabled }"
+          >
+            {{ step.label }}
+          </p>
 
           @if (step.subLabel()) {
             <div bitTypography="body2" class="tw-m-0 tw-mt-1 tw-text-muted">

libs/components/src/styles.css

@@ -1,10 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
 
-@import "./tw-theme.css";
+@import "./tw-theme-preflight.css";
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 
 html {
   font-size: 16px;

libs/components/src/styles.scss

@@ -1,52 +1,15 @@
 $icomoon-font-path: "../fonts/";
 $card-icons-base: "../../src/billing/images/cards/";
 
-@import "../../angular/src/scss/webfonts.css";
 @import "./variables";
+
+@import "../../angular/src/scss/webfonts.css";
 @import "../../angular/src/scss/bwicons/styles/style.scss";
 @import "../../angular/src/scss/icons.scss";
+@import "multi-select/scss/bw.theme.scss";
 
 @import "@angular/cdk/overlay-prebuilt.css";
-
+@import "@angular/cdk/text-field-prebuilt.css";
-@import "bootstrap/scss/_functions";
-@import "bootstrap/scss/_variables";
-@import "bootstrap/scss/_mixins";
-@import "bootstrap/scss/_root";
-@import "bootstrap/scss/_reboot";
-@import "bootstrap/scss/_type";
-@import "bootstrap/scss/_images";
-@import "bootstrap/scss/_code";
-@import "bootstrap/scss/_grid";
-@import "bootstrap/scss/_tables";
-@import "bootstrap/scss/_forms";
-@import "bootstrap/scss/_buttons";
-@import "bootstrap/scss/_transitions";
-@import "bootstrap/scss/_dropdown";
-@import "bootstrap/scss/_button-group";
-@import "bootstrap/scss/_input-group";
-@import "bootstrap/scss/_custom-forms";
-@import "bootstrap/scss/_nav";
-@import "bootstrap/scss/_navbar";
-@import "bootstrap/scss/_card";
-@import "bootstrap/scss/_breadcrumb";
-@import "bootstrap/scss/_pagination";
-@import "bootstrap/scss/_badge";
-@import "bootstrap/scss/_jumbotron";
-@import "bootstrap/scss/_alert";
-@import "bootstrap/scss/_progress";
-@import "bootstrap/scss/_media";
-@import "bootstrap/scss/_list-group";
-@import "bootstrap/scss/_close";
-//@import "bootstrap/scss/_toasts";
-@import "bootstrap/scss/_modal";
-@import "bootstrap/scss/_tooltip";
-@import "bootstrap/scss/_popover";
-@import "bootstrap/scss/_carousel";
-@import "bootstrap/scss/_spinners";
-@import "bootstrap/scss/_utilities";
-@import "bootstrap/scss/_print";
-
-@import "multi-select/scss/bw.theme.scss";
 
 // Workaround for https://bitwarden.atlassian.net/browse/CL-110
 .sbdocs-preview pre.prismjs {

libs/components/src/table/sortable.component.ts

@@ -106,9 +106,6 @@ export class SortableComponent implements OnInit {
   get classList() {
     return [
       "tw-min-w-max",
-
-      // Offset to border and padding
-      "-tw-m-1.5",
       "tw-font-bold",
 
       // Below is copied from BitIconButtonComponent

libs/components/src/tw-theme-preflight.css

@@ -0,0 +1,68 @@
+/**
+ * Bitwarden Tailwind configuration to use with preflight enabled
+ */
+
+@import "./tw-theme.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply tw-text-base tw-text-main;
+  }
+
+  h1 {
+    @apply tw-text-3xl tw-font-semibold tw-text-main tw-mb-2;
+  }
+  h2 {
+    @apply tw-text-2xl tw-font-semibold tw-text-main tw-mb-2;
+  }
+  h3 {
+    @apply tw-text-xl tw-font-semibold tw-text-main tw-mb-2;
+  }
+  h4 {
+    @apply tw-text-lg tw-font-semibold tw-text-main tw-mb-2;
+  }
+  h5 {
+    @apply tw-text-base tw-font-bold tw-text-main tw-mb-1.5;
+  }
+  h6 {
+    @apply tw-text-sm tw-font-bold tw-text-main tw-mb-1.5;
+  }
+
+  code {
+    @apply tw-text-code;
+  }
+
+  p {
+    @apply tw-mb-4;
+  }
+
+  ul {
+    @apply tw-mb-4 tw-list-disc tw-ps-10;
+  }
+
+  ul ul,
+  ul ol {
+    @apply tw-mb-0;
+  }
+
+  /* Bootstrap considered this to have higher priority than classes */
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+
+  hr {
+    border-color: rgba(0, 0, 0, 0.1);
+  }
+
+  html.theme_dark hr {
+    border-color: #4c525f;
+  }
+
+  select {
+    appearance: none;
+  }
+}

libs/components/src/tw-theme.css

@@ -6,6 +6,10 @@
 @import "./toast/toastr.css";
 @import "./search/search.component.css";
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   --color-transparent-hover: rgb(0 0 0 / 0.02);
   --color-shadow: 168 179 200;
@@ -142,47 +146,49 @@
   --color-illustration-logo: 255 255 255;
 }
 
-/**
+@layer components {
- * tw-break-words does not work with table cells:
+  /**
- * https://github.com/tailwindlabs/tailwindcss/issues/835
+  * tw-break-words does not work with table cells:
- */
+  * https://github.com/tailwindlabs/tailwindcss/issues/835
-td.tw-break-words {
+  */
-  overflow-wrap: anywhere;
+  td.tw-break-words {
-}
+    overflow-wrap: anywhere;
+  }
 
-/**
+  /**
- * tw-list-none hides summary arrow in Firefox & Chrome but not Safari:
+  * tw-list-none hides summary arrow in Firefox & Chrome but not Safari:
- * https://github.com/tailwindlabs/tailwindcss/issues/924#issuecomment-915509785
+  * https://github.com/tailwindlabs/tailwindcss/issues/924#issuecomment-915509785
- */
+  */
-summary.tw-list-none::marker,
+  summary.tw-list-none::marker,
-summary.tw-list-none::-webkit-details-marker {
+  summary.tw-list-none::-webkit-details-marker {
-  display: none;
+    display: none;
-}
+  }
 
-/**
+  /**
- * Arbitrary values can't be used with `text-align`:
+  * Arbitrary values can't be used with `text-align`:
- * https://github.com/tailwindlabs/tailwindcss/issues/802#issuecomment-849013311
+  * https://github.com/tailwindlabs/tailwindcss/issues/802#issuecomment-849013311
- */
+  */
-.tw-text-unset {
+  .tw-text-unset {
-  text-align: unset;
+    text-align: unset;
-}
+  }
 
-/**
+  /**
- * Bootstrap uses z-index: 1050 for modals, dialogs and drag-and-drop previews should appear above them.
+  * 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.
+  * When bootstrap is removed, test if these styles are still needed and that overlays display properly over other content.
- * CL-483
+  * CL-483
- */
+  */
-.cdk-drag-preview,
+  .cdk-drag-preview,
-.cdk-overlay-container,
+  .cdk-overlay-container,
-.cdk-global-overlay-wrapper,
+  .cdk-global-overlay-wrapper,
-.cdk-overlay-connected-position-bounding-box,
+  .cdk-overlay-connected-position-bounding-box,
-.cdk-overlay-backdrop,
+  .cdk-overlay-backdrop,
-.cdk-overlay-pane {
+  .cdk-overlay-pane {
-  z-index: 2000 !important;
+    z-index: 2000 !important;
-}
+  }
 
-.cdk-global-scrollblock {
+  .cdk-global-scrollblock {
-  position: relative;
+    position: relative;
-  height: 100%;
+    height: 100%;
-  overflow: hidden;
+    overflow: hidden;
+  }
 }

libs/components/src/variables.scss

@@ -1,358 +1 @@
 $dark-icon-themes: "theme_dark";
-
-$primary: #175ddc;
-$primary-accent: #1252a3;
-$secondary: #ced4da;
-$secondary-alt: #1a3b66;
-$success: #017e45;
-$info: #555555;
-$warning: #8b6609;
-$danger: #c83522;
-$white: #ffffff;
-
-// Bootstrap Variable Overrides
-
-$theme-colors: (
-  "primary-accent": $primary-accent,
-  "secondary-alt": $secondary-alt,
-);
-
-$body-bg: $white;
-$body-color: #1b2029;
-
-$font-family-sans-serif:
-  Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-  "Segoe UI Symbol";
-
-$h1-font-size: 1.7rem;
-$h2-font-size: 1.3rem;
-$h3-font-size: 1rem;
-$h4-font-size: 1rem;
-$h5-font-size: 1rem;
-$h6-font-size: 1rem;
-
-$small-font-size: 90%;
-$font-size-lg: 1.15rem;
-$code-font-size: 100%;
-
-$navbar-padding-y: 0.75rem;
-$grid-gutter-width: 20px;
-$card-spacer-y: 0.6rem;
-
-$list-group-item-padding-y: 0.6rem;
-$list-group-active-color: $body-color;
-$list-group-active-bg: $white;
-$list-group-active-border-color: rgba(#000000, 0.125);
-
-$dropdown-link-color: $body-color;
-$dropdown-link-hover-bg: rgba(#000000, 0.06);
-$dropdown-link-active-color: $dropdown-link-color;
-$dropdown-link-active-bg: rgba(#000000, 0.1);
-$dropdown-item-padding-x: 1rem;
-
-$navbar-brand-font-size: 35px;
-$navbar-brand-height: 35px;
-$navbar-brand-padding-y: 0;
-$navbar-dark-color: rgba($white, 0.7);
-$navbar-dark-hover-color: rgba($white, 0.9);
-$navbar-nav-link-padding-x: 0.8rem;
-
-$input-bg: #fbfbfb;
-$input-focus-bg: $white;
-$input-disabled-bg: #e0e0e0;
-$input-placeholder-color: #b4b4b4;
-
-$table-accent-bg: rgba(#000000, 0.02);
-$table-hover-bg: rgba(#000000, 0.03);
-
-$modal-backdrop-opacity: 0.3;
-$btn-font-weight: 600;
-$lead-font-weight: normal;
-
-$grid-breakpoints: (
-  xs: 0,
-  sm: 1px,
-  md: 2px,
-  lg: 3px,
-  xl: 4px,
-);
-
-$border-color: $secondary;
-
-// MFA Types for logo styling with no dark theme alternative
-
-$mfaTypes: 0, 2, 3, 4, 6;
-
-// Theme Variables
-// Light
-
-$lightDangerHover: #c83522;
-$lightInputColor: #465057;
-$lightInputPlaceholderColor: #b6b8b8;
-
-// Dark
-
-$darkPrimary: #6a99f0;
-$darkPrimary-alt: #b4ccf9;
-$darkDanger: #ff8d85;
-$darkDangerHover: #ffbfbb;
-$darkSuccess: #52e07c;
-$darkWarning: #ffeb66;
-$darkInfo: #a4b0c6;
-$darkLinks: #6a99f0;
-$darkGrey1: #bac0ce;
-$darkGrey2: #8d94a5;
-$darkBlue1: #4c525f;
-$darkBlue2: #3c424e;
-$darkDarkBlue1: #2f343d;
-$darkDarkBlue2: #1f242e;
-$darkInputColor: $white;
-$darkInputPlaceholderColor: $darkGrey1;
-
-$themes: (
-  light: (
-    primary: $primary,
-    primaryAlt: $primary-accent,
-    danger: $danger,
-    info: #343a40,
-    success: $success,
-    warning: $warning,
-    backgroundColor: $white,
-    badgeDangerBackground: $danger,
-    badgeDangerText: $white,
-    badgeInfoBackground: #555555,
-    badgeInfoText: $white,
-    badgePrimaryBackground: $primary,
-    badgePrimaryBackgroundHover: #134eb9,
-    badgePrimaryText: $white,
-    badgeSecondaryBackground: #ced4da,
-    badgeSecondaryText: #212529,
-    bgLightColor: #f8f9fa,
-    bgPrimaryColor: $primary,
-    borderColor: $border-color,
-    borderPrimaryColor: $primary,
-    browserInputIconsFilter: invert(0),
-    btnDanger: $danger,
-    btnDangerHover: $lightDangerHover,
-    btnDangerText: $white,
-    btnLinkText: $primary,
-    btnLinkTextHover: #104097,
-    btnOutlineDangerBackground: $input-bg,
-    btnOutlineDangerBackgroundHover: $danger,
-    btnOutlineDangerBorder: #ced4da,
-    btnOutlineDangerBorderHover: $danger,
-    btnOutlineDangerText: $danger,
-    btnOutlineDangerTextHover: $white,
-    btnOutlinePrimaryBackground: $input-bg,
-    btnOutlinePrimaryBackgroundHover: $primary,
-    btnOutlinePrimaryBorder: #ced4da,
-    btnOutlinePrimaryBorderHover: $primary,
-    btnOutlinePrimaryText: $primary,
-    btnOutlinePrimaryTextHover: $white,
-    btnOutlineSecondaryBackground: $input-bg,
-    btnOutlineSecondaryBackgroundHover: #ced4da,
-    btnOutlineSecondaryBorder: #ced4da,
-    btnOutlineSecondaryBorderHover: #ced4da,
-    btnOutlineSecondaryText: #6c757d,
-    btnOutlineSecondaryTextHover: #333333,
-    btnPrimary: $primary,
-    btnPrimaryBorderHover: #1249ae,
-    btnPrimaryHover: #134eb9,
-    btnPrimaryText: $white,
-    btnSecondary: $secondary,
-    btnSecondaryBorder: $secondary,
-    btnSecondaryBorderHover: #b1bbc4,
-    btnSecondaryHover: #b8c1ca,
-    btnSecondaryText: #212529,
-    btnSecondaryTextHover: #212529,
-    calloutBackground: #fafafa,
-    calloutColor: #212529,
-    cdkDraggingBackground: $white,
-    codeColor: #e83e8c,
-    dropdownBackground: $white,
-    dropdownHover: rgba(0, 0, 0, 0.06),
-    dropdownTextColor: $body-color,
-    dropdownTextMuted: #6c757d,
-    focus: rgb(23 93 220 / 25%),
-    footerBackgroundColor: #fbfbfb,
-    foregroundColor: $white,
-    headerColor: rgba(0, 0, 0, 0.03),
-    iconColor: #777777,
-    iconHover: $body-color,
-    imgFilter: invert(0) grayscale(0),
-    inputBackgroundColor: $input-bg,
-    inputBorderColor: $border-color,
-    inputDisabledBackground: #e0e0e0,
-    inputDisabledColor: #6c757d,
-    inputPlaceholderColor: $lightInputPlaceholderColor,
-    inputTextColor: $lightInputColor,
-    layoutFrontendColor: #ecf0f5,
-    learnMoreHover: #104097,
-    linkColor: $primary,
-    linkColorHover: #104097,
-    linkWeight: 400,
-    listItemActive: $body-color,
-    listItemBorder: rgba(0, 0, 0, 0.125),
-    loadingSvg: url("../images/loading.svg"),
-    logoSuffix: "dark",
-    mfaLogoSuffix: ".png",
-    navActiveBackground: $white,
-    navActiveWeight: 600,
-    navBackground: $primary,
-    navBackgroundAlt: $secondary-alt,
-    navOrgBackgroundColor: #fbfbfb,
-    navWeight: 600,
-    pwLetter: $body-color,
-    pwNumber: #007fde,
-    pwSpecial: #c40800,
-    pwStrengthBackground: #e9ecef,
-    separator: $secondary,
-    separatorHr: rgb(0, 0, 0, 0.1),
-    tableColorHover: #333333,
-    tableLinkColor: $primary,
-    tableLinkColorHover: #104097,
-    tableRowHover: rgba(0, 0, 0, 0.03),
-    tableSeparator: #dee2e6,
-    textColor: $body-color,
-    textDangerColor: $white,
-    textInfoColor: $white,
-    textHeadingColor: $body-color,
-    textMuted: #6c757d,
-    textSuccessColor: $white,
-    textWarningColor: $white,
-  ),
-  dark: (
-    primary: $darkPrimary,
-    primaryAlt: $darkPrimary-alt,
-    danger: $darkDanger,
-    info: $darkInfo,
-    success: $darkSuccess,
-    warning: $darkWarning,
-    backgroundColor: $darkDarkBlue2,
-    badgeDangerBackground: $darkDanger,
-    badgeDangerText: $darkDarkBlue2,
-    badgeInfoBackground: $darkInfo,
-    badgeInfoText: $darkDarkBlue2,
-    badgePrimaryBackground: $darkLinks,
-    badgePrimaryBackgroundHover: $darkPrimary-alt,
-    badgePrimaryText: $darkDarkBlue2,
-    badgeSecondaryBackground: $darkGrey2,
-    badgeSecondaryText: $darkDarkBlue2,
-    bgLightColor: $darkDarkBlue2,
-    bgPrimaryColor: $darkPrimary,
-    borderColor: $darkBlue1,
-    borderPrimaryColor: $darkPrimary,
-    browserInputIconsFilter: invert(1),
-    btnDanger: $darkDanger,
-    btnDangerHover: $darkDangerHover,
-    btnDangerText: $darkDarkBlue2,
-    btnLinkText: $white,
-    btnLinkTextHover: $darkGrey1,
-    btnOutlineDangerBackground: $darkDanger,
-    btnOutlineDangerBackgroundHover: $darkDangerHover,
-    btnOutlineDangerBorder: $darkDanger,
-    btnOutlineDangerBorderHover: $darkDangerHover,
-    btnOutlineDangerText: $darkDarkBlue2,
-    btnOutlineDangerTextHover: $darkDarkBlue2,
-    btnOutlinePrimaryBackground: $darkPrimary,
-    btnOutlinePrimaryBackgroundHover: $darkPrimary-alt,
-    btnOutlinePrimaryBorder: $darkPrimary,
-    btnOutlinePrimaryBorderHover: $darkPrimary-alt,
-    btnOutlinePrimaryText: $darkDarkBlue2,
-    btnOutlinePrimaryTextHover: $darkDarkBlue2,
-    btnOutlineSecondaryBackground: transparent,
-    btnOutlineSecondaryBackgroundHover: transparent,
-    btnOutlineSecondaryBorder: $darkGrey1,
-    btnOutlineSecondaryBorderHover: $darkGrey2,
-    btnOutlineSecondaryText: $white,
-    btnOutlineSecondaryTextHover: $darkGrey2,
-    btnPrimary: $darkLinks,
-    btnPrimaryBorderHover: $darkPrimary-alt,
-    btnPrimaryHover: $darkPrimary-alt,
-    btnPrimaryText: $darkDarkBlue2,
-    btnSecondary: transparent,
-    btnSecondaryBorder: $darkGrey1,
-    btnSecondaryBorderHover: $darkGrey2,
-    btnSecondaryHover: transparent,
-    btnSecondaryText: $white,
-    btnSecondaryTextHover: $darkGrey2,
-    calloutBackground: $darkBlue2,
-    calloutColor: $white,
-    cdkDraggingBackground: $darkDarkBlue1,
-    codeColor: #e83e8c,
-    dropdownBackground: $darkDarkBlue1,
-    dropdownHover: rgba(255, 255, 255, 0.03),
-    dropdownTextColor: $white,
-    dropdownTextMuted: #bec6cf,
-    focus: rgb(106 153 240 / 25%),
-    footerBackgroundColor: $darkBlue1,
-    foregroundColor: $darkDarkBlue1,
-    headerColor: $darkBlue1,
-    iconColor: #777777,
-    iconHover: $darkGrey2,
-    imgFilter: invert(1) grayscale(1),
-    inputBackgroundColor: transparent,
-    inputBorderColor: $darkGrey1,
-    inputDisabledBackground: $darkBlue2,
-    inputDisabledColor: $darkGrey1,
-    inputPlaceholderColor: $darkInputPlaceholderColor,
-    inputTextColor: $darkInputColor,
-    layoutFrontendColor: $darkDarkBlue2,
-    learnMoreHover: $darkPrimary-alt,
-    linkColor: $darkLinks,
-    linkColorHover: $darkLinks,
-    linkWeight: 600,
-    listItemActive: $darkPrimary,
-    listItemBorder: $darkBlue1,
-    loadingSvg: url("../images/loading-white.svg"),
-    logoSuffix: "white",
-    mfaLogoSuffix: "-w.png",
-    navActiveBackground: $darkDarkBlue2,
-    navActiveWeight: 600,
-    navBackground: $darkDarkBlue1,
-    navBackgroundAlt: $darkDarkBlue1,
-    navOrgBackgroundColor: #161c26,
-    navWeight: 400,
-    pwLetter: $white,
-    pwNumber: #52bdfb,
-    pwSpecial: #ff7c70,
-    pwStrengthBackground: $darkBlue2,
-    separator: $darkBlue1,
-    separatorHr: $darkBlue1,
-    tableColorHover: $darkGrey1,
-    tableLinkColor: $white,
-    tableLinkColorHover: $white,
-    tableRowHover: rgba(255, 255, 255, 0.03),
-    tableSeparator: $darkBlue1,
-    textColor: $darkGrey1,
-    textDangerColor: $darkDarkBlue2,
-    textHeadingColor: $white,
-    textInfoColor: $darkDarkBlue2,
-    textMuted: $darkGrey1,
-    textSuccessColor: $darkDarkBlue2,
-    textWarningColor: $darkDarkBlue2,
-  ),
-);
-
-@mixin themify($themes: $themes) {
-  @each $theme, $map in $themes {
-    html.theme_#{$theme} & {
-      $theme-map: () !global;
-      @each $key, $submap in $map {
-        $value: map-get(map-get($themes, $theme), "#{$key}");
-        $theme-map: map-merge(
-          $theme-map,
-          (
-            $key: $value,
-          )
-        ) !global;
-      }
-      @content;
-      $theme-map: null !global;
-    }
-  }
-}
-
-@function themed($key) {
-  @return map-get($theme-map, $key);
-}

libs/components/tailwind.config.base.js

@@ -136,6 +136,28 @@ module.exports = {
         600: rgba("--color-notification-600"),
       },
     },
+    fontFamily: {
+      sans: [
+        "Roboto",
+        '"Helvetica Neue"',
+        "Helvetica",
+        "Arial",
+        "sans-serif",
+        '"Apple Color Emoji"',
+        '"Segoe UI Emoji"',
+        '"Segoe UI Symbol"',
+      ],
+      serif: ["ui-serif", "Georgia", "Cambria", '"Times New Roman"', "Times", "serif"],
+      mono: [
+        "Menlo",
+        "SFMono-Regular",
+        "Monaco",
+        "Consolas",
+        '"Liberation Mono"',
+        '"Courier New"',
+        "monospace",
+      ],
+    },
     ringOffsetColor: ({ theme }) => ({
       DEFAULT: theme("colors.background"),
       ...theme("colors"),

libs/components/tailwind.config.js

@@ -15,5 +15,6 @@ config.safelist = [
     pattern: /tw-bg-(.*)/,
   },
 ];
+config.corePlugins.preflight = true;
 
 module.exports = config;

package-lock.json

@@ -36,7 +36,6 @@
         "@nx/jest": "21.1.2",
         "@nx/js": "21.1.2",
         "big-integer": "1.6.52",
-        "bootstrap": "4.6.0",
         "braintree-web-drop-in": "1.44.0",
         "buffer": "6.0.3",
         "bufferutil": "4.0.9",
@@ -15891,20 +15890,6 @@
       "license": "MIT",
       "optional": true
     },
-    "node_modules/bootstrap": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/bootstrap"
-      },
-      "peerDependencies": {
-        "jquery": "1.9.1 - 3",
-        "popper.js": "^1.16.1"
-      }
-    },
     "node_modules/bootstrap.native": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/bootstrap.native/-/bootstrap.native-5.1.5.tgz",
@@ -25623,13 +25608,6 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
-    "node_modules/jquery": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -32107,18 +32085,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-      "license": "MIT",
-      "peer": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",

package.json

@@ -171,7 +171,6 @@
     "@nx/jest": "21.1.2",
     "@nx/js": "21.1.2",
     "big-integer": "1.6.52",
-    "bootstrap": "4.6.0",
     "braintree-web-drop-in": "1.44.0",
     "buffer": "6.0.3",
     "bufferutil": "4.0.9",