From 7b10d00df8fa45abfacd8cb60e2684a2fb006699 Mon Sep 17 00:00:00 2001
From: NazarMykhalkevych <nmykhalkevych@exoft.net>
Date: Mon, 9 Jun 2025 09:32:13 +0300
Subject: [PATCH] refactor(ui): buttons style

---
 .../components/header/header.component.html   |   1 +
 .../analytics-kpi.component.html              |   2 +-
 .../contributors-list.component.html          |   4 +-
 .../files/project-files.component.html        |  57 +-
 .../metadata/project-metadata.component.html  |   6 +-
 .../overview-components.component.html        |   4 +-
 ...ct-detail-setting-accordion.component.html |   7 +-
 .../add-email/add-email.component.html        |   3 +-
 .../connected-emails.component.html           |   7 +-
 .../default-confirmation-config.helper.ts     |   1 -
 src/assets/styles/overrides/button.scss       | 625 +++++++++++-------
 11 files changed, 441 insertions(+), 276 deletions(-)

diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html
index 040f23473..9ca7dc3b5 100644
--- a/src/app/core/components/header/header.component.html
+++ b/src/app/core/components/header/header.component.html
@@ -6,6 +6,7 @@
       class="custom-dark-hover"
       icon="fas fa-chevron-down"
       iconPos="right"
+      variant="text"
       [label]="currentUser()?.fullName"
       (click)="menu.toggle($event)"
     ></p-button>
diff --git a/src/app/features/project/analytics/components/analytics-kpi/analytics-kpi.component.html b/src/app/features/project/analytics/components/analytics-kpi/analytics-kpi.component.html
index c7077ab49..c56d71575 100644
--- a/src/app/features/project/analytics/components/analytics-kpi/analytics-kpi.component.html
+++ b/src/app/features/project/analytics/components/analytics-kpi/analytics-kpi.component.html
@@ -9,7 +9,7 @@
 
   @if (showButton()) {
     <div>
-      <p-button severity="secondary">{{ buttonLabel() | translate }}</p-button>
+      <p-button severity="secondary" [label]="buttonLabel() | translate"> </p-button>
     </div>
   }
 </div>
diff --git a/src/app/features/project/contributors/components/contributors-list/contributors-list.component.html b/src/app/features/project/contributors/components/contributors-list/contributors-list.component.html
index e1191541d..16a9176cd 100644
--- a/src/app/features/project/contributors/components/contributors-list/contributors-list.component.html
+++ b/src/app/features/project/contributors/components/contributors-list/contributors-list.component.html
@@ -157,8 +157,8 @@ <h2>{{ 'project.contributors.curatorInfo.heading' | translate }}</h2>
           </div>
         </td>
         <td>
-          <p-button class="btn-icon-text button-shadow-none" (click)="removeContributor(contributor)">
-            <i class="osf-icon-trash red-icon"></i>
+          <p-button variant="text" [severity]="'danger'" (click)="removeContributor(contributor)">
+            <i class="fas fa-trash"></i>
           </p-button>
         </td>
       </tr>
diff --git a/src/app/features/project/files/project-files.component.html b/src/app/features/project/files/project-files.component.html
index fdc953f47..4849b332b 100644
--- a/src/app/features/project/files/project-files.component.html
+++ b/src/app/features/project/files/project-files.component.html
@@ -42,34 +42,39 @@
     </div>
 
     <div class="flex flex-column w-full gap-2 sm:flex-row md:w-max">
-      <div class="btn-full-width">
-        @let id = currentFolder()?.id ?? '';
-        @let rootFolder = !currentFolder()?.relationships?.parentFolderLink;
-        <p-button [disabled]="fileIsUploading" class="no-padding-button" (click)="downloadFolder(id, rootFolder)">
-          <div class="outline-button w-full md:w-max blue">
-            <i class="osf-icon-download"> </i>
-            <span>{{ 'project.files.actions.downloadAsZip' | translate }}</span>
-          </div>
-        </p-button>
-      </div>
+      @let id = currentFolder()?.id ?? '';
+      @let rootFolder = !currentFolder()?.relationships?.parentFolderLink;
+      <p-button
+        [disabled]="fileIsUploading"
+        outlined
+        raised
+        (click)="downloadFolder(id, rootFolder)"
+        [icon]="'fas fa-download'"
+        [label]="'project.files.actions.downloadAsZip' | translate"
+      >
+      </p-button>
 
-      <div class="btn-full-width">
-        <p-button [disabled]="fileIsUploading" class="no-padding-button" (click)="createFolderVisible = true">
-          <div class="outline-button w-full md:w-max green">
-            <i class="osf-icon-plus"> </i>
-            <span>{{ 'project.files.actions.createFolder' | translate }}</span>
-          </div>
-        </p-button>
-      </div>
+      <p-button
+        [disabled]="fileIsUploading"
+        outlined
+        raised
+        severity="success"
+        [icon]="'fas fa-plus'"
+        [label]="'project.files.actions.createFolder' | translate"
+        (click)="createFolderVisible = true"
+      >
+      </p-button>
 
-      <div class="btn-full-width">
-        <p-button [disabled]="fileIsUploading" class="no-padding-button" (click)="fileInput.click()">
-          <div class="outline-button w-full md:w-max green">
-            <i class="osf-icon-upload"> </i>
-            <span>{{ 'project.files.actions.uploadFile' | translate }}</span>
-          </div>
-        </p-button>
-      </div>
+      <p-button
+        [disabled]="fileIsUploading"
+        outlined
+        raised
+        severity="success"
+        [icon]="'fas fa-upload'"
+        [label]="'project.files.actions.uploadFile' | translate"
+        (click)="fileInput.click()"
+      >
+      </p-button>
 
       <input #fileInput type="file" class="hidden" (change)="onFileSelected($event)" />
     </div>
diff --git a/src/app/features/project/metadata/project-metadata.component.html b/src/app/features/project/metadata/project-metadata.component.html
index a2d1db9ad..990b4e0f4 100644
--- a/src/app/features/project/metadata/project-metadata.component.html
+++ b/src/app/features/project/metadata/project-metadata.component.html
@@ -22,13 +22,13 @@ <h2>{{ meta.title }}</h2>
           <p>{{ meta.description }}</p>
         </div>
 
-        <p-button severity="secondary"> Select </p-button>
+        <p-button severity="secondary" label="Select"> </p-button>
       </div>
     }
   </div>
 
-  <div class="flex justify-content-end flex-0 mt-auto">
-    <p-button label="Cancel" [link]="true" severity="info" class="w-10rem btn-full-width"></p-button>
+  <div class="flex justify-content-end flex-0 mt-auto gap-2">
+    <p-button label="Cancel" severity="info" class="w-10rem btn-full-width"></p-button>
     <p-button class="w-10rem btn-full-width bg-primary-blue-second" label="Next"></p-button>
   </div>
 </section>
diff --git a/src/app/features/project/overview/components/overview-components/overview-components.component.html b/src/app/features/project/overview/components/overview-components/overview-components.component.html
index 7c0f9b237..ca6b1e8bd 100644
--- a/src/app/features/project/overview/components/overview-components/overview-components.component.html
+++ b/src/app/features/project/overview/components/overview-components/overview-components.component.html
@@ -22,8 +22,8 @@ <h2 class="flex gap-2">
                 <a class="component-title" [href]="'my-projects/' + component.id">{{ component.title }}</a>
               </h2>
               <div>
-                <p-button class="btn-icon" (click)="componentActionMenu.toggle($event)">
-                  <i class="osf-icon-dots"></i>
+                <p-button severity="contrast" raised variant="outlined" (click)="componentActionMenu.toggle($event)">
+                  <i class="fas fa-ellipsis-vertical"></i>
                 </p-button>
 
                 <p-menu appendTo="body" #componentActionMenu [model]="componentActionItems(component.id)" popup>
diff --git a/src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.html b/src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.html
index a9a4321cb..fb844565e 100644
--- a/src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.html
+++ b/src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.html
@@ -2,12 +2,7 @@
   class="flex justify-between align-items-center mb-2 w-full border-bottom-1 border-gray-300 gap-2 flex-column sm:flex-row sm:gap-4"
 >
   <div class="flex align-items-center gap-2 cursor-pointer w-full sm:w-5">
-    <p-button
-      role="button"
-      [ariaLabel]="'Toggle ' + title()"
-      class="btn-icon-text form-btn button-shadow-none"
-      (click)="toggle()"
-    >
+    <p-button role="button" variant="text" severity="contrast" [ariaLabel]="'Toggle ' + title()" (click)="toggle()">
       <i class="pi" [ngClass]="{ 'pi-plus': !expanded(), 'pi-minus': expanded() }"></i>
     </p-button>
 
diff --git a/src/app/features/settings/account-settings/components/add-email/add-email.component.html b/src/app/features/settings/account-settings/components/add-email/add-email.component.html
index 66059257f..2dc7e295b 100644
--- a/src/app/features/settings/account-settings/components/add-email/add-email.component.html
+++ b/src/app/features/settings/account-settings/components/add-email/add-email.component.html
@@ -16,8 +16,7 @@
       class="w-full"
       styleClass="w-full"
       (onClick)="dialogRef.close()"
-      [text]="true"
-      severity="secondary"
+      severity="info"
       [label]="'settings.accountSettings.addEmail.buttons.cancel' | translate"
     >
     </p-button>
diff --git a/src/app/features/settings/account-settings/components/connected-emails/connected-emails.component.html b/src/app/features/settings/account-settings/components/connected-emails/connected-emails.component.html
index 11d189634..6f50dacc0 100644
--- a/src/app/features/settings/account-settings/components/connected-emails/connected-emails.component.html
+++ b/src/app/features/settings/account-settings/components/connected-emails/connected-emails.component.html
@@ -50,8 +50,11 @@ <h2 class="account-setting-header">{{ 'settings.accountSettings.connectedEmails.
                 }
               </div>
 
-              <p-button severity="secondary" (click)="makePrimary(email.id)">
-                {{ 'settings.accountSettings.connectedEmails.buttons.makePrimary' | translate }}
+              <p-button
+                severity="secondary"
+                (click)="makePrimary(email.id)"
+                [label]="'settings.accountSettings.connectedEmails.buttons.makePrimary' | translate"
+              >
               </p-button>
             </div>
           }
diff --git a/src/app/shared/utils/default-confirmation-config.helper.ts b/src/app/shared/utils/default-confirmation-config.helper.ts
index 54824b77b..c0904cc28 100644
--- a/src/app/shared/utils/default-confirmation-config.helper.ts
+++ b/src/app/shared/utils/default-confirmation-config.helper.ts
@@ -8,7 +8,6 @@ export const defaultConfirmationConfig: Confirmation = {
   rejectButtonProps: {
     label: 'Cancel',
     severity: 'info',
-    outlined: true,
   },
   acceptButtonProps: {
     label: 'Confirm',
diff --git a/src/assets/styles/overrides/button.scss b/src/assets/styles/overrides/button.scss
index 9b4ab9313..208b3de35 100644
--- a/src/assets/styles/overrides/button.scss
+++ b/src/assets/styles/overrides/button.scss
@@ -1,104 +1,104 @@
 @use "../variables" as var;
 @use "../mixins" as mix;
 
-.p-button {
-  flex: 1;
-  border: none;
-  padding: 0.7rem 1.15rem;
-  font-size: 1rem;
-  background-color: var.$pr-blue-1;
-  text-decoration: none;
-  font-weight: 700;
-  --p-button-secondary-color: var(--white);
-
-  .p-button-label {
-    font-weight: 700;
-  }
-
-  &:hover {
-    background-color: var.$pr-blue-3;
-  }
-
-  &:disabled {
-    background-color: var.$pr-blue-2;
-  }
-}
-
-.p-button.p-button-success {
-  background-color: var.$green-1;
-
-  &:hover {
-    background-color: var.$green-3;
-  }
-
-  &:disabled {
-    background-color: var.$green-2;
-  }
-}
-
-.p-button.p-button-danger {
-  background-color: var.$red-1;
-
-  &:hover {
-    background-color: var.$red-3;
-  }
-
-  &:disabled {
-    background-color: var.$red-2;
-  }
-}
-
-.p-button.p-button-contrast {
-  background-color: var.$dark-blue-1;
-
-  &:hover {
-    background-color: var.$dark-blue-2;
-  }
-
-  &:disabled {
-    background-color: var.$grey-1;
-  }
-}
-
-.p-button.p-button-secondary {
-  background-color: var.$bg-blue-3;
-  --p-button-secondary-color: var(--pr-blue-1);
-
-  &:hover {
-    background-color: var.$bg-blue-2;
-    color: var.$pr-blue-3;
-  }
-
-  &:disabled {
-    background-color: var.$grey-3;
-    color: var.$pr-blue-2;
-  }
-}
-
-.secondary-transparent {
-  .p-button.p-button-secondary {
-    padding: 0;
-    background-color: transparent;
-    font-weight: 600;
-  }
-}
-
-.p-button.p-button-info {
-  color: var.$dark-blue-1;
-  background-color: transparent;
-
-  .p-button-label {
-    font-weight: 400;
-  }
-
-  &:hover {
-    outline: 1px solid var.$grey-2;
-  }
-
-  &:disabled {
-    color: var.$grey-1;
-  }
-}
+// .p-button {
+//   flex: 1;
+//   border: none;
+//   padding: 0.7rem 1.15rem;
+//   font-size: 1rem;
+//   background-color: var.$pr-blue-1;
+//   text-decoration: none;
+//   font-weight: 700;
+//   --p-button-secondary-color: var(--white);
+
+//   .p-button-label {
+//     font-weight: 700;
+//   }
+
+//   &:hover {
+//     background-color: var.$pr-blue-3;
+//   }
+
+//   &:disabled {
+//     background-color: var.$pr-blue-2;
+//   }
+// }
+
+// .p-button.p-button-success {
+//   background-color: var.$green-1;
+
+//   &:hover {
+//     background-color: var.$green-3;
+//   }
+
+//   &:disabled {
+//     background-color: var.$green-2;
+//   }
+// }
+
+// .p-button.p-button-danger {
+//   background-color: var.$red-1;
+
+//   &:hover {
+//     background-color: var.$red-3;
+//   }
+
+//   &:disabled {
+//     background-color: var.$red-2;
+//   }
+// }
+
+// .p-button.p-button-contrast {
+//   background-color: var.$dark-blue-1;
+
+//   &:hover {
+//     background-color: var.$dark-blue-2;
+//   }
+
+//   &:disabled {
+//     background-color: var.$grey-1;
+//   }
+// }
+
+// .p-button.p-button-secondary {
+//   background-color: var.$bg-blue-3;
+//   --p-button-secondary-color: var(--pr-blue-1);
+
+//   &:hover {
+//     background-color: var.$bg-blue-2;
+//     color: var.$pr-blue-3;
+//   }
+
+//   &:disabled {
+//     background-color: var.$grey-3;
+//     color: var.$pr-blue-2;
+//   }
+// }
+
+// .secondary-transparent {
+//   .p-button.p-button-secondary {
+//     padding: 0;
+//     background-color: transparent;
+//     font-weight: 600;
+//   }
+// }
+
+// .p-button.p-button-info {
+//   color: var.$dark-blue-1;
+//   background-color: transparent;
+
+//   .p-button-label {
+//     font-weight: 400;
+//   }
+
+//   &:hover {
+//     outline: 1px solid var.$grey-2;
+//   }
+
+//   &:disabled {
+//     color: var.$grey-1;
+//   }
+// }
 
 .btn-icon-text,
 .btn-icon-text-success,
@@ -110,6 +110,7 @@
     font-weight: 600;
     @include mix.flex-center;
     box-shadow: 0 0 4px 0 var.$grey-outline;
+    border: none;
 
     &:hover {
       color: var.$pr-blue-3;
@@ -121,19 +122,18 @@
   }
 }
 
-.btn-icon-text {
-  .p-button {
-    color: var.$pr-blue-1;
+// .btn-icon-text {
+//   .p-button {
+//     color: var.$pr-blue-1;
 
-    &:hover {
-      color: var.$pr-blue-3;
-    }
-  }
-}
+//     &:hover {
+//       color: var.$pr-blue-3;
+//     }
+//   }
+// }
 
 .btn-icon {
   .p-button {
-    background-color: transparent;
     color: var.$dark-blue-1;
     padding: 0.7rem;
 
@@ -147,25 +147,25 @@
   }
 }
 
-.btn-icon-text-success {
-  .p-button {
-    color: var.$green-1;
+// .btn-icon-text-success {
+//   .p-button {
+//     color: var.$green-1;
 
-    &:hover {
-      color: var.$green-3;
-    }
-  }
-}
+//     &:hover {
+//       color: var.$green-3;
+//     }
+//   }
+// }
 
-.topnav-btn {
-  .p-button {
-    padding: 0;
+// .topnav-btn {
+//   .p-button {
+//     padding: 0;
 
-    &:hover {
-      background: none;
-    }
-  }
-}
+//     &:hover {
+//       background: none;
+//     }
+//   }
+// }
 
 .btn-full-width {
   width: 100%;
@@ -175,75 +175,75 @@
   }
 }
 
-.btn-half-width {
-  width: 50%;
-
-  .p-button {
-    width: 100%;
-  }
-}
-
-.form-btn {
-  .p-button {
-    @include mix.flex-center;
-    gap: 0.7rem;
-    color: var.$dark-blue-1;
-    height: 3.125rem;
-
-    &:hover {
-      color: var.$dark-blue-2;
-    }
-
-    .p-button-label {
-      font-weight: 400;
-    }
-  }
-}
-
-.p-button-link {
-  a {
-    color: var.$white;
-    text-decoration: none;
-  }
-}
-
-.p-button-link:hover {
-  .p-button-label {
-    text-decoration: none;
-  }
-}
-
-.wide-button {
-  button {
-    padding: 0.71rem 2.39rem 0.71rem 2.39rem;
-    line-height: 1.71rem;
-  }
-}
-
-.wide-m-button {
-  button {
-    padding: 0.71rem 3.9rem 0.71rem 3.9rem;
-  }
-}
-
-.high-m-button {
-  button {
-    height: 3.125rem;
-  }
-}
-
-.learn-more {
-  button {
-    padding: 0.71rem 1.39rem;
-  }
-}
-
-.remove-button {
-  .p-button {
-    background: var.$white;
-    color: var.$red-1;
-  }
-}
+// .btn-half-width {
+//   width: 50%;
+
+//   .p-button {
+//     width: 100%;
+//   }
+// }
+
+// .form-btn {
+//   .p-button {
+//     @include mix.flex-center;
+//     gap: 0.7rem;
+//     color: var.$dark-blue-1;
+//     height: 3.125rem;
+
+//     &:hover {
+//       color: var.$dark-blue-2;
+//     }
+
+//     .p-button-label {
+//       font-weight: 400;
+//     }
+//   }
+// }
+
+// .p-button-link {
+//   a {
+//     color: var.$white;
+//     text-decoration: none;
+//   }
+// }
+
+// .p-button-link:hover {
+//   .p-button-label {
+//     text-decoration: none;
+//   }
+// }
+
+// .wide-button {
+//   button {
+//     padding: 0.71rem 2.39rem 0.71rem 2.39rem;
+//     line-height: 1.71rem;
+//   }
+// }
+
+// .wide-m-button {
+//   button {
+//     padding: 0.71rem 3.9rem 0.71rem 3.9rem;
+//   }
+// }
+
+// .high-m-button {
+//   button {
+//     height: 3.125rem;
+//   }
+// }
+
+// .learn-more {
+//   button {
+//     padding: 0.71rem 1.39rem;
+//   }
+// }
+
+// .remove-button {
+//   .p-button {
+//     background: var.$white;
+//     color: var.$red-1;
+//   }
+// }
 
 .dropdown-button {
   position: relative;
@@ -262,50 +262,213 @@
   }
 }
 
-.overview-btn {
-  width: mix.rem(80px);
-}
-
-.bookmark-btn {
-  .p-button {
-    .p-button-icon {
-      height: mix.rem(21px);
-      width: mix.rem(21px);
-    }
-  }
-}
-
-.bg-primary-blue-second.p-button {
-  background-color: var.$pr-blue-2;
-}
+// .overview-btn {
+//   width: mix.rem(80px);
+// }
+
+// .bookmark-btn {
+//   .p-button {
+//     .p-button-icon {
+//       height: mix.rem(21px);
+//       width: mix.rem(21px);
+//     }
+//   }
+// }
+
+// .bg-primary-blue-second.p-button {
+//   background-color: var.$pr-blue-2;
+// }
+
+// .button-shadow-none {
+//   .p-button {
+//     box-shadow: none;
+
+//     @media (max-width: var.$breakpoint-sm) {
+//       padding: 0;
+//     }
+//   }
+// }
+
+// .collections-heading-btn {
+//   .p-button {
+//     --p-button-primary-color: #008b7b;
+//     background-color: var(--p-button-primary-color);
+//     color: var.$white;
+
+//     @media (max-width: var.$breakpoint-sm) {
+//       width: 100%;
+//     }
+//   }
+// }
+
+// .secondary-add-btn .p-button.p-button-secondary {
+//   --p-button-secondary-color: var(--dark-blue-1);
+// }
+
+// .no-padding-button .p-button {
+//   background: var.$white;
+//   padding: 0;
+// }
+
+:root {
+  --p-button-padding-x: 1rem;
+  --p-button-padding-y: 0.5625rem;
+
+  --p-button-label-font-weight: 700;
+
+  --p-button-raised-shadow: 0 0 4px 0 var(--grey-outline);
+
+  --p-button-primary-background: var(--pr-blue-1);
+  --p-button-primary-hover-background: var(--pr-blue-3);
+  --p-button-primary-active-background: var(--pr-blue-1);
+  --p-button-primary-border-color: var(--pr-blue-1);
+  --p-button-primary-hover-border-color: var(--pr-blue-3);
+  --p-button-primary-active-border-color: var(--pr-blue-1);
+
+  --p-button-success-background: var(--green-1);
+  --p-button-success-hover-background: var(--green-3);
+  --p-button-success-active-background: var(--green-1);
+  --p-button-success-border-color: var(--green-1);
+  --p-button-success-hover-border-color: var(--green-3);
+  --p-button-success-active-border-color: var(--green-1);
+
+  --p-button-secondary-background: var(--bg-blue-3);
+  --p-button-secondary-hover-background: var(--bg-blue-2);
+  --p-button-secondary-active-background: var(--bg-blue-3);
+  --p-button-secondary-border-color: var(--bg-blue-3);
+  --p-button-secondary-hover-border-color: var(--bg-blue-2);
+  --p-button-secondary-color: var(--pr-blue-1);
+  --p-button-secondary-hover-color: var(--pr-blue-3);
+
+  --p-button-outlined-primary-color: var(--pr-blue-1);
+  --p-button-outlined-primary-hover-background: var(--bg-blue-2);
+  --p-button-outlined-primary-border-color: var(--pr-blue-1);
+  --p-button-outlined-primary-active-background: var(--bg-blue-2);
+  --p-button-outlined-success-color: var(--green-1);
+  --p-button-outlined-success-hover-background: var(--green-2);
+  --p-button-outlined-success-border-color: var(--green-1);
+  --p-button-outlined-success-active-background: var(--green-2);
+
+  --p-button-danger-background: var(--red-1);
+  --p-button-danger-hover-background: var(--red-3);
+  --p-button-danger-active-background: var(--red-1);
+  --p-button-danger-border-color: var(--red-1);
+  --p-button-danger-hover-border-color: var(--red-3);
+  --p-button-danger-active-border-color: var(--red-1);
+
+  --p-button-info-background: transparent;
+  --p-button-info-hover-background: transparent;
+  --p-button-info-active-background: transparent;
+  --p-button-info-border-color: transparent;
+  --p-button-info-hover-border-color: var(--grey-2);
+  --p-button-info-active-border-color: var(--grey-2);
+  --p-button-info-color: var(--dark-blue-1);
+  --p-button-info-hover-color: var(--dark-blue-1);
+  --p-button-info-active-color: var(--dark-blue-1);
+
+  // --p-button-outlined-primary-hover-background: var(--p-primary-50);
+  // --p-button-outlined-primary-active-background: var(--p-primary-100);
+  // --p-button-outlined-primary-border-color: var(--p-primary-200);
+  // --p-button-outlined-primary-color: var(--p-primary-color);
+  // --p-button-outlined-secondary-hover-background: var(--p-surface-50);
+  // --p-button-outlined-secondary-active-background: var(--p-surface-100);
+  // --p-button-outlined-secondary-border-color: var(--p-surface-200);
+  // --p-button-outlined-secondary-color: var(--p-surface-500);
+  // --p-button-outlined-success-hover-background: var(--p-green-50);
+  // --p-button-outlined-success-active-background: var(--p-green-100);
+  // --p-button-outlined-success-border-color: var(--p-green-200);
+  // --p-button-outlined-success-color: var(--p-green-500);
+  // --p-button-outlined-info-hover-background: var(--p-sky-50);
+  // --p-button-outlined-info-active-background: var(--p-sky-100);
+  // --p-button-outlined-info-border-color: var(--p-sky-200);
+  // --p-button-outlined-info-color: var(--p-sky-500);
+  // --p-button-outlined-warn-hover-background: var(--p-orange-50);
+  // --p-button-outlined-warn-active-background: var(--p-orange-100);
+  // --p-button-outlined-warn-border-color: var(--p-orange-200);
+  // --p-button-outlined-warn-color: var(--p-orange-500);
+  // --p-button-outlined-help-hover-background: var(--p-purple-50);
+  // --p-button-outlined-help-active-background: var(--p-purple-100);
+  // --p-button-outlined-help-border-color: var(--p-purple-200);
+  // --p-button-outlined-help-color: var(--p-purple-500);
+  // --p-button-outlined-danger-hover-background: var(--p-red-50);
+  // --p-button-outlined-danger-active-background: var(--p-red-100);
+  // --p-button-outlined-danger-border-color: var(--p-red-200);
+  // --p-button-outlined-danger-color: var(--p-red-500);
+  // --p-button-outlined-contrast-hover-background: var(--p-surface-50);
+  // --p-button-outlined-contrast-active-background: var(--p-surface-100);
+  // --p-button-outlined-contrast-border-color: var(--p-surface-700);
+  // --p-button-outlined-contrast-color: var(--p-surface-950);
+  // --p-button-outlined-plain-hover-background: var(--p-surface-50);
+  // --p-button-outlined-plain-active-background: var(--p-surface-100);
+  // --p-button-outlined-plain-border-color: var(--p-surface-200);
+  // --p-button-outlined-plain-color: var(--p-surface-700);
+  // --p-button-text-primary-hover-background: var(--p-primary-50);
+  // --p-button-text-primary-active-background: var(--p-primary-100);
+  // --p-button-text-primary-color: var(--p-primary-color);
+  // --p-button-text-secondary-hover-background: var(--p-surface-50);
+  // --p-button-text-secondary-active-background: var(--p-surface-100);
+  // --p-button-text-secondary-color: var(--p-surface-500);
+  // --p-button-text-success-hover-background: var(--p-green-50);
+  // --p-button-text-success-active-background: var(--p-green-100);
+  // --p-button-text-success-color: var(--p-green-500);
+  // --p-button-text-info-hover-background: var(--p-sky-50);
+  // --p-button-text-info-active-background: var(--p-sky-100);
+  // --p-button-text-info-color: var(--p-sky-500);
+  // --p-button-text-warn-hover-background: var(--p-orange-50);
+  // --p-button-text-warn-active-background: var(--p-orange-100);
+  // --p-button-text-warn-color: var(--p-orange-500);
+  // --p-button-text-help-hover-background: var(--p-purple-50);
+  // --p-button-text-help-active-background: var(--p-purple-100);
+  // --p-button-text-help-color: var(--p-purple-500);
+  // --p-button-text-danger-hover-background: var(--p-red-50);
+  // --p-button-text-danger-active-background: var(--p-red-100);
+  // --p-button-text-danger-color: var(--p-red-500);
+  // --p-button-text-contrast-hover-background: var(--p-surface-50);
+  // --p-button-text-contrast-active-background: var(--p-surface-100);
+  // --p-button-text-contrast-color: var(--p-surface-950);
+  // --p-button-text-plain-hover-background: var(--p-surface-50);
+  // --p-button-text-plain-active-background: var(--p-surface-100);
+  // --p-button-text-plain-color: var(--p-surface-700);
+  // --p-button-link-color: var(--p-primary-color);
+  // --p-button-link-hover-color: var(--p-primary-color);
+  // --p-button-link-active-color: var(--p-primary-color);
+
+  // --p-button-success-background: var(--green-1);
+  // --p-button-success-border-color: var(--green-1);
+  // --p-button-success-hover-background: var(--green-3);
+  // --p-button-success-hover-border-color: var(--green-3);
+  // --p-button-padding-y: 0.5625rem;
+  // --p-button-padding-x: 1rem;
+  // --p-button-label-font-weight: 700;
+
+  // --p-button-secondary-background: var(--bg-blue-3);
+  // --p-button-secondary-border-color: var(--bg-blue-3);
+  // --p-button-secondary-color: var(--pr-blue-1);
+  // --p-button-secondary-hover-background: var(--bg-blue-2);
+  // --p-button-secondary-hover-border-color: var(--bg-blue-2);
+  // --p-button-secondary-hover-color: var(--pr-blue-3);
+
+  // --p-button-outlined-primary-color: var(--pr-blue-1);
+  // --p-button-outlined-primary-hover-background: var(--bg-blue-2);
 
-.button-shadow-none {
   .p-button {
-    box-shadow: none;
-
-    @media (max-width: var.$breakpoint-sm) {
-      padding: 0;
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+    &.p-button-info {
+      .p-button-label {
+        font-weight: 400;
+      }
     }
   }
-}
-
-.collections-heading-btn {
-  .p-button {
-    --p-button-primary-color: #008b7b;
-    background-color: var(--p-button-primary-color);
-    color: var.$white;
-
-    @media (max-width: var.$breakpoint-sm) {
-      width: 100%;
+  .p-button-outlined {
+    &.p-button-raised {
+      border: none;
     }
   }
-}
-
-.secondary-add-btn .p-button.p-button-secondary {
-  --p-button-secondary-color: var(--dark-blue-1);
-}
 
-.no-padding-button .p-button {
-  background: var.$white;
-  padding: 0;
+  // --p-button-primary-color: var(--pr-blue-1);
+  // --p-button-secondary-color: var(--white);
+  // --p-button-success-color: var(--green-1);
+  // --p-button-danger-color: var(--red-1);
+  // --p-button-contrast-color: var(--dark-blue-1);
 }