From e7b6522e801134ca2851968c47d49dc20e364ba2 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 6 Jul 2023 10:01:27 +0300
Subject: [PATCH] UBER-142: update buttons. Cleaning CSS. (#3482)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 dev/storybook/stories/Button.stories.ts       |   8 +-
 models/tracker/src/index.ts                   |  10 +-
 .../kanban/src/components/KanbanRow.svelte    |   2 +-
 .../presentation/src/components/Card.svelte   |   7 +-
 .../src/components/DocPopup.svelte            |   2 +-
 .../InlineAttributeBarEditor.svelte           |   2 +-
 .../src/components/MessageBox.svelte          |   2 +-
 .../src/components/PDFViewer.svelte           |   6 +-
 .../src/components/SpaceCreateCard.svelte     |   2 +-
 .../src/components/SpacesMultiPopup.svelte    |   6 +-
 .../src/components/message/Nodes.svelte       |   2 +-
 .../src/components/ReferenceInput.svelte      |  20 +-
 .../src/components/StyleButton.svelte         |   2 +-
 packages/theme/styles/_colors.scss            |  85 +++--
 packages/theme/styles/_layouts.scss           |   8 +-
 packages/theme/styles/button.scss             | 356 +++++++-----------
 packages/theme/styles/common.scss             |   2 +-
 packages/theme/styles/components.scss         |  24 +-
 packages/theme/styles/global.scss             |   2 +-
 packages/theme/styles/popups.scss             |   2 +-
 packages/theme/styles/prose.scss              |   4 +-
 packages/ui/src/components/ActionIcon.svelte  |   2 +-
 packages/ui/src/components/Button.svelte      |  16 +-
 packages/ui/src/components/CheckBox.svelte    |  16 +-
 .../components/CheckBoxWithLabel.svelte.txt   |   2 +-
 .../ui/src/components/CircleButton.svelte     |  22 +-
 packages/ui/src/components/Dialog.svelte      |   2 +-
 .../src/components/DropdownRecordPopup.svelte |   2 +-
 .../ui/src/components/EditWithIcon.svelte     |   2 +-
 packages/ui/src/components/Like.svelte        |   6 +-
 packages/ui/src/components/MiniToggle.svelte  |   4 +-
 packages/ui/src/components/Panel.svelte       |   8 +-
 .../ui/src/components/PanelInstance.svelte    |   1 +
 .../ui/src/components/ProgressCircle.svelte   |   4 +-
 packages/ui/src/components/Scroller.svelte    |   2 +-
 packages/ui/src/components/StepsDialog.svelte |   6 +-
 packages/ui/src/components/StylishEdit.svelte |   2 +-
 packages/ui/src/components/TabList.svelte     |  12 +-
 packages/ui/src/components/TextArea.svelte    |   2 +-
 packages/ui/src/components/Toggle.svelte      |   4 +-
 .../components/calendar/DateInputBox.svelte   |   8 +-
 .../src/components/calendar/DatePopup.svelte  |   2 +-
 .../components/calendar/DatePresenter.svelte  |   8 +-
 .../calendar/DateRangePresenter.svelte        |  10 +-
 .../ui/src/components/calendar/Month.svelte   |   8 +-
 .../components/calendar/MonthCalendar.svelte  |   2 +-
 .../components/calendar/MonthSquare.svelte    |   8 +-
 .../components/calendar/RangeDatePopup.svelte |   2 +-
 .../components/calendar/WeekCalendar.svelte   |   2 +-
 packages/ui/src/types.ts                      |  14 +-
 .../src/components/AccordionEditor.svelte     |   2 +-
 .../src/components/AddAttachment.svelte       |   2 +-
 .../AttachmentGalleryPresenter.svelte         |   4 +-
 .../src/components/AttachmentPresenter.svelte |   6 +-
 .../src/components/AttachmentStyledBox.svelte |   2 +-
 .../src/components/Attachments.svelte         |   2 +-
 .../src/components/FileBrowserFilters.svelte  |   8 +-
 .../src/components/Photos.svelte              |   3 +-
 .../src/components/AddActionTrigger.svelte    |   2 +-
 .../src/components/AddAutomation.svelte       |   2 +-
 .../src/components/AutomationActions.svelte   |   2 +-
 .../AutomationSettingsElement.svelte          |   2 +-
 .../src/components/AutomationTrigger.svelte   |   2 +-
 .../actions/ContentActionCreate.svelte        |   2 +-
 .../components/selectors/IconChooser.svelte   |   2 +-
 .../CreateHRApplicationMapping.svelte         |   6 +-
 .../src/components/AddPanel.svelte            |   2 +-
 .../src/components/BoardHeader.svelte         |   2 +-
 .../src/components/BoardMenu.svelte           |   4 +-
 .../src/components/EditCard.svelte            |   2 +-
 .../src/components/KanbanCard.svelte          |   6 +-
 .../src/components/ListHeader.svelte          |   2 +-
 .../src/components/add-card/AddCard.svelte    |   2 +-
 .../components/editor/CardChecklist.svelte    |   8 +-
 .../components/popups/CardCoverPicker.svelte  |   2 +-
 .../components/popups/DateRangePicker.svelte  |   2 +-
 .../presenters/ChecklistsPresenter.svelte     |   2 +-
 .../presenters/DatePresenter.svelte           |   4 +-
 .../src/components/CalendarView.svelte        |   6 +-
 .../src/components/CreateEvent.svelte         |   6 +-
 .../src/components/CreateReminder.svelte      |   4 +-
 .../src/components/Day.svelte                 |   8 +-
 .../src/components/DocReminder.svelte         |   2 +-
 .../src/components/DocRemindersPopup.svelte   |   2 +-
 .../src/components/Events.svelte              |   2 +-
 .../src/components/ChunterBrowser.svelte      |   8 +-
 .../activity/TxCommentCreate.svelte           |   2 +-
 .../src/components/AssigneeBox.svelte         |   2 +-
 .../src/components/ChannelEditor.svelte       |  10 +-
 .../src/components/Contacts.svelte            |   2 +-
 .../src/components/CreateEmployee.svelte      |   2 +-
 .../src/components/CreateMember.svelte        |   2 +-
 .../src/components/CreateOrganization.svelte  |   4 +-
 .../src/components/CreatePerson.svelte        |   2 +-
 .../src/components/EditAvatarPopup.svelte     |   2 +-
 .../src/components/EditOrganization.svelte    |   4 +-
 .../components/EmployeeRefPresenter.svelte    |   2 +-
 .../src/components/Members.svelte             |   4 +-
 .../src/components/PersonContent.svelte       |   2 +-
 .../src/components/UserBoxItems.svelte        |   2 +-
 .../src/components/CreateDocument.svelte      |   8 +-
 .../src/components/EditDoc.svelte             |   6 +-
 .../src/components/NewDocumentHeader.svelte   |   2 +-
 .../src/components/Chats.svelte               |   6 +-
 .../src/components/Configure.svelte           |   2 +-
 .../src/components/Connect.svelte             |   2 +-
 .../src/components/FullMessage.svelte         |   4 +-
 .../src/components/Main.svelte                |   2 +-
 .../src/components/Message.svelte             |   4 +-
 .../src/components/NewMessage.svelte          |   6 +-
 .../src/components/NewMessages.svelte         |   6 +-
 .../src/components/CreateDepartment.svelte    |   6 +-
 .../src/components/CreateRequest.svelte       |   6 +-
 .../src/components/DepartmentCard.svelte      |   4 +-
 .../src/components/DepartmentStaff.svelte     |   6 +-
 .../src/components/Schedule.svelte            |   8 +-
 .../src/components/Structure.svelte           |   2 +-
 .../schedule/CreatePublicHoliday.svelte       |   2 +-
 .../src/components/schedule/YearView.svelte   |   2 +-
 .../src/components/Categories.svelte          |   2 +-
 .../src/components/CreateCategory.svelte      |   2 +-
 .../src/components/CreateProduct.svelte       |   4 +-
 .../src/components/Variants.svelte            |   2 +-
 .../src/components/CreateCustomer.svelte      |   4 +-
 .../src/components/CreateLead.svelte          |   8 +-
 .../src/components/Leads.svelte               |   2 +-
 .../src/components/MyLeads.svelte             |   2 +-
 .../src/components/NewItemsHeader.svelte      |   2 +-
 .../src/components/InviteLink.svelte          |   4 +-
 .../src/components/SelectWorkspace.svelte     |   2 +-
 .../src/components/StatusControl.svelte       |   4 +-
 .../src/components/EmployeeInbox.svelte       |   2 +-
 .../src/components/Applications.svelte        |  10 +-
 .../src/components/CreateApplication.svelte   |   2 +-
 .../src/components/CreateCandidate.svelte     |  12 +-
 .../src/components/CreateVacancy.svelte       |   6 +-
 .../src/components/EditVacancy.svelte         |  24 +-
 .../src/components/NewCandidateHeader.svelte  |   2 +-
 .../src/components/Organizations.svelte       |   2 +-
 .../src/components/Vacancies.svelte           |   2 +-
 .../src/components/VacancyApplications.svelte |  10 +-
 .../components/VacancyItemPresenter.svelte    |   1 +
 .../src/components/VacancyList.svelte         |   2 +-
 .../components/VacancyTemplateEditor.svelte   |   2 +-
 .../src/components/review/CreateReview.svelte |  12 +-
 .../src/components/review/Opinions.svelte     |   2 +-
 .../src/components/review/Reviews.svelte      |   2 +-
 .../src/components/RequestLabel.svelte        |   7 +-
 .../src/components/Configure.svelte           |   2 +-
 .../src/components/InviteSetting.svelte       |   2 +-
 .../src/components/Owners.svelte              |   2 +-
 .../src/components/Password.svelte            |   2 +-
 .../src/components/PluginCard.svelte          |   8 +-
 .../src/components/statuses/Folders.svelte    |   2 +-
 .../src/components/CategoryBar.svelte         |   2 +-
 .../src/components/CollapsedTags.svelte       |   2 +-
 .../src/components/CreateTagElement.svelte    |   2 +-
 .../src/components/TagFilterPresenter.svelte  |   2 +-
 .../components/TagReferencePresenter.svelte   |   2 +-
 .../src/components/TagsCategoryPopup.svelte   |   6 +-
 .../src/components/TagsEditor.svelte          |   3 +-
 .../src/components/TagsPopup.svelte           |   4 +-
 .../components/TagsReferencePresenter.svelte  |   2 +-
 .../src/components/TagsView.svelte            |   2 +-
 .../src/components/state/StatesEditor.svelte  |   2 +-
 .../src/components/todos/Todos.svelte         |   2 +-
 .../src/components/Chat.svelte                |   8 +-
 .../src/components/Connect.svelte             |   2 +-
 .../src/components/Date.svelte                |   2 +-
 .../src/components/Message.svelte             |   2 +-
 .../src/components/PinPad.svelte              |   4 +-
 .../src/components/Reconnect.svelte           |   2 +-
 .../src/components/Templates.svelte           |   4 +-
 .../src/components/AppItem.svelte             |   4 +-
 .../src/components/CreateIssue.svelte         |  24 +-
 .../src/components/FilterMenuSection.svelte   |   2 +-
 .../src/components/NewIssueHeader.svelte      |   2 +-
 .../src/components/SubIssues.svelte           |   2 +-
 .../components/ComponentBrowser.svelte        |   2 +-
 .../components/ComponentEditor.svelte         |   6 +-
 .../DeleteComponentPresenter.svelte           |   2 +-
 .../components/components/NewComponent.svelte |   4 +-
 .../issues/IssueNotification.svelte           |   2 +-
 .../src/components/issues/IssuePreview.svelte |   6 +-
 .../src/components/issues/IssuesView.svelte   |   2 +-
 .../src/components/issues/KanbanView.svelte   |   2 +-
 .../src/components/issues/Move.svelte         |   8 +-
 .../src/components/issues/ParentIssue.svelte  |   2 +-
 .../issues/edit/CopyToClipboardButton.svelte  |   2 +-
 .../components/issues/edit/EditIssue.svelte   |   6 +-
 .../components/issues/edit/SubIssues.svelte   |   8 +-
 .../issues/edit/SubIssuesSelector.svelte      |   2 +-
 .../related/RelatedIssueSelector.svelte       |   2 +-
 .../related/RelatedIssuesSection.svelte       |   4 +-
 .../EstimationProgressCircle.svelte           |   4 +-
 .../timereport/EstimationSubIssueList.svelte  |   2 +-
 .../timereport/TimeSpendReportPopup.svelte    |   6 +-
 .../timereport/TimeSpendReportsList.svelte    |   4 +-
 .../milestones/MilestoneBrowser.svelte        |   2 +-
 .../milestones/MilestoneDatePresenter.svelte  |   2 +-
 .../milestones/MilestoneEditor.svelte         |   6 +-
 .../milestones/MilestoneRefPresenter.svelte   |   2 +-
 .../components/milestones/NewMilestone.svelte |   6 +-
 .../components/projects/CreateProject.svelte  |   4 +-
 .../projects/ProjectIconChooser.svelte        |   2 +-
 .../templates/CreateIssueTemplate.svelte      |  14 +-
 .../templates/DraftIssueChildEditor.svelte    |   2 +-
 .../templates/EditIssueTemplate.svelte        |   4 +-
 .../templates/IssueTemplateChildEditor.svelte |   2 +-
 .../templates/IssueTemplateChilds.svelte      |   4 +-
 .../templates/IssueTemplatesView.svelte       |   4 +-
 .../components/workflow/RemoveStatus.svelte   |   2 +-
 .../components/workflow/StatusEditor.svelte   |   4 +-
 .../src/components/workflow/Statuses.svelte   |   2 +-
 .../src/components/ActionsPopup.svelte        |   2 +-
 .../src/components/BooleanEditorPopup.svelte  |   6 +-
 .../src/components/ColorsPopup.svelte         |   4 +-
 .../src/components/DateEditor.svelte          |   2 +-
 .../src/components/EditDoc.svelte             |  23 +-
 .../view-resources/src/components/Move.svelte |   2 +-
 .../src/components/NumberEditor.svelte        |   2 +-
 .../src/components/ObjectBox.svelte           |   2 +-
 .../src/components/SpaceHeader.svelte         |  10 -
 .../src/components/Table.svelte               |   2 +-
 .../src/components/UpDownNavigator.svelte     |   4 +-
 .../src/components/ViewOptions.svelte         |   6 +-
 .../src/components/ViewOptionsButton.svelte   |   2 +-
 .../components/ViewletSettingButton.svelte    |   2 +-
 .../src/components/filter/FilterBar.svelte    |   2 +-
 .../filter/FilterRemovedNotification.svelte   |   2 +-
 .../src/components/filter/FilterSave.svelte   |   2 +-
 .../components/filter/FilterSection.svelte    |   2 +-
 .../src/components/list/ListHeader.svelte     |   9 +-
 .../src/components/list/ListPresenter.svelte  |   1 -
 .../src/components/list/SortableList.svelte   |   2 +-
 .../components/list/SortableListItem.svelte   |   4 +-
 plugins/view/src/index.ts                     |   1 +
 .../src/components/AppItem.svelte             |   2 +-
 .../src/components/HelpAndSupport.svelte      |   4 +-
 .../src/components/Logo.svelte                |   2 +-
 .../src/components/SpaceBrowser.svelte        |   6 +-
 .../src/components/SpaceHeader.svelte         |   2 +-
 .../src/components/SpecialView.svelte         |   2 +-
 243 files changed, 701 insertions(+), 778 deletions(-)

diff --git a/dev/storybook/stories/Button.stories.ts b/dev/storybook/stories/Button.stories.ts
index 2556b0cb3e..bf97c1bc1c 100644
--- a/dev/storybook/stories/Button.stories.ts
+++ b/dev/storybook/stories/Button.stories.ts
@@ -17,11 +17,11 @@ const meta = {
     },
     kind: {
       control: 'select',
-      options: ['primary', 'secondary', 'no-border', 'transparent', 'link', 'link-bordered', 'dangerous', 'list', 'list-header'],
+      options: ['accented', 'regular', 'no-border', 'ghost', 'link', 'link-bordered', 'dangerous', 'list', 'list-header'],
       description: 'kind description',
       table: {
         type: { summary: 'ButtonKind' },
-        defaultValue: { summary: '"secondary"' },
+        defaultValue: { summary: '"regular"' },
       }
     },
     size: {
@@ -109,7 +109,7 @@ type Story = StoryObj<typeof meta>;
 export const Ok: Story = {
   args: {
     label: uiPlugin.string.Ok,
-    kind: 'primary',
+    kind: 'accented',
     size: 'medium',
     shape: undefined,
     justify: 'left',
@@ -125,7 +125,7 @@ export const Ok: Story = {
 export const Cancel: Story = {
   args: {
     label: uiPlugin.string.Cancel,
-    kind: 'primary',
+    kind: 'accented',
     size: 'medium',
     shape: undefined,
     justify: 'left',
diff --git a/models/tracker/src/index.ts b/models/tracker/src/index.ts
index 4ec8ff1547..5494a020bc 100644
--- a/models/tracker/src/index.ts
+++ b/models/tracker/src/index.ts
@@ -496,12 +496,12 @@ export function createModel (builder: Builder): void {
           props: {
             kind: 'list',
             size: 'small',
-            shape: 'round',
             shouldShowPlaceholder: false
           },
           displayProps: {
             key: 'milestone',
             excludeByKey: 'milestone',
+            compression: true,
             optional: true
           }
         },
@@ -512,12 +512,12 @@ export function createModel (builder: Builder): void {
           props: {
             kind: 'list',
             size: 'small',
-            shape: 'round',
             shouldShowPlaceholder: false
           },
           displayProps: {
             key: 'component',
             excludeByKey: 'component',
+            compression: true,
             optional: true
           }
         },
@@ -629,11 +629,11 @@ export function createModel (builder: Builder): void {
           props: {
             kind: 'list',
             size: 'small',
-            shape: 'round',
             shouldShowPlaceholder: false
           },
           displayProps: {
             excludeByKey: 'milestone',
+            compression: true,
             optional: true
           }
         },
@@ -703,7 +703,7 @@ export function createModel (builder: Builder): void {
             size: 'small',
             shouldShowPlaceholder: false
           },
-          displayProps: { key: 'component', optional: true }
+          displayProps: { key: 'component', compression: true, optional: true }
         },
         {
           key: '',
@@ -714,7 +714,7 @@ export function createModel (builder: Builder): void {
             size: 'small',
             shouldShowPlaceholder: false
           },
-          displayProps: { key: 'milestone', optional: true }
+          displayProps: { key: 'milestone', compression: true, optional: true }
         },
         {
           key: '',
diff --git a/packages/kanban/src/components/KanbanRow.svelte b/packages/kanban/src/components/KanbanRow.svelte
index 201aac0758..c74a8c091c 100644
--- a/packages/kanban/src/components/KanbanRow.svelte
+++ b/packages/kanban/src/components/KanbanRow.svelte
@@ -146,7 +146,7 @@
     }
     &.selection,
     &.checked.selection {
-      box-shadow: 0 0 1px 1px var(--primary-button-enabled);
+      box-shadow: 0 0 1px 1px var(--accented-button-default);
       animation: anim-border 1s ease-in-out;
 
       &:hover {
diff --git a/packages/presentation/src/components/Card.svelte b/packages/presentation/src/components/Card.svelte
index 3de22638c5..14a16f810d 100644
--- a/packages/presentation/src/components/Card.svelte
+++ b/packages/presentation/src/components/Card.svelte
@@ -68,9 +68,8 @@
         id="card-close"
         focusIndex={10002}
         icon={IconClose}
-        iconSize={'medium'}
-        iconProps={{ fill: 'var(--theme-dark-color)' }}
-        kind={'transparent'}
+        iconProps={{ size: 'medium', fill: 'var(--theme-dark-color)' }}
+        kind={'ghost'}
         size={'small'}
         on:click={() => {
           if (onCancel) {
@@ -116,7 +115,7 @@
         focusIndex={10001}
         disabled={!canSave}
         label={okLabel}
-        kind={'primary'}
+        kind={'accented'}
         size={'large'}
         on:click={() => {
           if (okProcessing) {
diff --git a/packages/presentation/src/components/DocPopup.svelte b/packages/presentation/src/components/DocPopup.svelte
index ccdea5009b..e8acabb46d 100644
--- a/packages/presentation/src/components/DocPopup.svelte
+++ b/packages/presentation/src/components/DocPopup.svelte
@@ -178,7 +178,7 @@
       <div class="ml-2">
         <Button
           focusIndex={2}
-          kind={'transparent'}
+          kind={'ghost'}
           {size}
           icon={IconAdd}
           showTooltip={{ label: create.label }}
diff --git a/packages/presentation/src/components/InlineAttributeBarEditor.svelte b/packages/presentation/src/components/InlineAttributeBarEditor.svelte
index 3bb3216301..d1b0a28dda 100644
--- a/packages/presentation/src/components/InlineAttributeBarEditor.svelte
+++ b/packages/presentation/src/components/InlineAttributeBarEditor.svelte
@@ -61,7 +61,7 @@
           readonly={isReadonly}
           label={attribute?.label}
           placeholder={attribute?.label}
-          kind={'secondary'}
+          kind={'regular'}
           size={'large'}
           width={'100%'}
           justify={'left'}
diff --git a/packages/presentation/src/components/MessageBox.svelte b/packages/presentation/src/components/MessageBox.svelte
index 78cc159490..e1dc05384d 100644
--- a/packages/presentation/src/components/MessageBox.svelte
+++ b/packages/presentation/src/components/MessageBox.svelte
@@ -43,7 +43,7 @@
       focusIndex={1}
       label={okLabel ?? presentation.string.Ok}
       size={'large'}
-      kind={'primary'}
+      kind={'accented'}
       loading={processing}
       on:click={() => {
         processing = true
diff --git a/packages/presentation/src/components/PDFViewer.svelte b/packages/presentation/src/components/PDFViewer.svelte
index 0835110a4f..fc9782be84 100644
--- a/packages/presentation/src/components/PDFViewer.svelte
+++ b/packages/presentation/src/components/PDFViewer.svelte
@@ -66,7 +66,7 @@
     <a class="no-line" href={getFileUrl(file, 'full', name)} download={name} bind:this={download}>
       <Button
         icon={Download}
-        kind={'transparent'}
+        kind={'ghost'}
         on:click={() => {
           download.click()
         }}
@@ -98,8 +98,8 @@
     height: 2rem;
     font-weight: 500;
     font-size: 0.625rem;
-    color: var(--primary-button-color);
-    background-color: var(--primary-button-enabled);
+    color: var(--accented-button-color);
+    background-color: var(--accented-button-default);
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 0.5rem;
     cursor: pointer;
diff --git a/packages/presentation/src/components/SpaceCreateCard.svelte b/packages/presentation/src/components/SpaceCreateCard.svelte
index 0a0a06b106..d5edbd4649 100644
--- a/packages/presentation/src/components/SpaceCreateCard.svelte
+++ b/packages/presentation/src/components/SpaceCreateCard.svelte
@@ -41,7 +41,7 @@
     <Button
       disabled={!canSave}
       label={presentation.string.Create}
-      kind={'primary'}
+      kind={'accented'}
       on:click={() => {
         okAction()
         dispatch('close')
diff --git a/packages/presentation/src/components/SpacesMultiPopup.svelte b/packages/presentation/src/components/SpacesMultiPopup.svelte
index 1ebed249d9..a662dcb2ee 100644
--- a/packages/presentation/src/components/SpacesMultiPopup.svelte
+++ b/packages/presentation/src/components/SpacesMultiPopup.svelte
@@ -95,17 +95,17 @@
           }}
         >
           <div class="check pointer-events-none">
-            <CheckBox checked={isSelected(space)} primary />
+            <CheckBox checked={isSelected(space)} accented />
           </div>
           <SpaceInfo size={'medium'} value={space} />
           {#if allowDeselect && space._id === selected}
             <div class="check pointer-events-none">
               {#if titleDeselect}
                 <div class="clear-mins" use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
-                  <CheckBox checked circle primary />
+                  <CheckBox checked circle accented />
                 </div>
               {:else}
-                <CheckBox checked circle primary />
+                <CheckBox checked circle accented />
               {/if}
             </div>
           {/if}
diff --git a/packages/presentation/src/components/message/Nodes.svelte b/packages/presentation/src/components/message/Nodes.svelte
index 2a299b56cd..140ed1e62a 100644
--- a/packages/presentation/src/components/message/Nodes.svelte
+++ b/packages/presentation/src/components/message/Nodes.svelte
@@ -173,7 +173,7 @@
     padding: 0 0.25rem;
     font-family: var(--mono-font);
     color: var(--theme-content-color);
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     border: 1px solid var(--theme-button-border);
     border-radius: 0.25rem;
   }
diff --git a/packages/text-editor/src/components/ReferenceInput.svelte b/packages/text-editor/src/components/ReferenceInput.svelte
index 842d0f8fcb..c745bfefb6 100644
--- a/packages/text-editor/src/components/ReferenceInput.svelte
+++ b/packages/text-editor/src/components/ReferenceInput.svelte
@@ -255,7 +255,7 @@
     <div class="formatPanelRef buttons-group xsmall-gap" class:withoutTopBorder>
       <Button
         icon={Bold}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         selected={activeModes.has('bold')}
         showTooltip={{ label: textEditorPlugin.string.Bold }}
@@ -263,7 +263,7 @@
       />
       <Button
         icon={Italic}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         selected={activeModes.has('italic')}
         showTooltip={{ label: textEditorPlugin.string.Italic }}
@@ -271,7 +271,7 @@
       />
       <Button
         icon={Strikethrough}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         selected={activeModes.has('strike')}
         showTooltip={{ label: textEditorPlugin.string.Strikethrough }}
@@ -279,7 +279,7 @@
       />
       <Button
         icon={Link}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         selected={activeModes.has('link')}
         disabled={isSelectionEmpty && !activeModes.has('link')}
@@ -289,7 +289,7 @@
       <div class="buttons-divider" />
       <Button
         icon={ListNumber}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         selected={activeModes.has('orderedList')}
         showTooltip={{ label: textEditorPlugin.string.OrderedList }}
@@ -297,7 +297,7 @@
       />
       <Button
         icon={ListBullet}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         selected={activeModes.has('bulletList')}
         showTooltip={{ label: textEditorPlugin.string.BulletedList }}
@@ -306,7 +306,7 @@
       <div class="buttons-divider" />
       <Button
         icon={Quote}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         selected={activeModes.has('blockquote')}
         showTooltip={{ label: textEditorPlugin.string.Blockquote }}
@@ -315,7 +315,7 @@
       <div class="buttons-divider" />
       <Button
         icon={Code}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         selected={activeModes.has('code')}
         showTooltip={{ label: textEditorPlugin.string.Code }}
@@ -323,7 +323,7 @@
       />
       <Button
         icon={CodeBlock}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         selected={activeModes.has('codeBlock')}
         showTooltip={{ label: textEditorPlugin.string.CodeBlock }}
@@ -513,7 +513,7 @@
           }
         }
         &:focus {
-          box-shadow: 0 0 0 2px var(--primary-button-focused-border);
+          box-shadow: 0 0 0 2px var(--accented-button-outline);
 
           & > .icon {
             color: var(--theme-caption-color);
diff --git a/packages/text-editor/src/components/StyleButton.svelte b/packages/text-editor/src/components/StyleButton.svelte
index 06942086ff..590877c1c7 100644
--- a/packages/text-editor/src/components/StyleButton.svelte
+++ b/packages/text-editor/src/components/StyleButton.svelte
@@ -50,7 +50,7 @@
     }
     &:focus {
       color: var(--theme-caption-color);
-      box-shadow: 0 0 0 2px var(--primary-button-focused-border);
+      box-shadow: 0 0 0 2px var(--accented-button-focused-border);
     }
     &.selected {
       background-color: var(--theme-button-pressed);
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 6fc947f62f..2724ada939 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -15,15 +15,28 @@
 
 /* Common Colors */
 * {
-  // --primary-button-color: #fff;
-  // --primary-button-enabled: #4474F6;
-  // --primary-button-hovered: #2A5FF6;
-  // --primary-button-pressed: #194CD7;
-  // --primary-button-focused: #194CD7;
-  // --primary-button-disabled: #5771B9;
-  // --primary-button-focused-border: #7393EB;
-  // --primary-button-outline: rgba(87, 132, 255, .3);
-  // --primary-button-border: rgba(255, 255, 255, .09);
+  --accented-button-color: #fff;
+  --accented-button-border: rgba(255, 255, 255, .09);
+  --accented-button-focused-border: #fff;
+  --accented-button-outline: #5190EC;
+  --accented-button-transparent: rgba(43, 81, 144, 0.2);
+
+  --accented-button-default: #2B5190;
+  --accented-button-hovered: #325FA9;
+  --accented-button-pressed: #284B86;
+  --accented-button-focused: #284B86;
+  --brand-button-default: #4169E1;
+  --brand-button-hovered: #587BE5;
+  --brand-button-pressed: #2C58DE;
+  --brand-button-focused: #2C58DE;
+  --positive-button-default: #26A869;
+  --positive-button-hovered: #2BBB75;
+  --positive-button-pressed: #21915B;
+  --positive-button-focused: #21915B;
+  --negative-button-default: #CA4242;
+  --negative-button-hovered: #D05858;
+  --negative-button-pressed: #BF3636;
+  --negative-button-focused: #BF3636;
 
   --white-color: #fff;
   --duotone-color: rgba(126, 134, 158, .25);
@@ -53,24 +66,21 @@
 
 /* Dark Theme */
 .theme-dark {
-  --primary-button-color: #fff;
-  --primary-button-enabled: #2B5190;
-  --primary-button-transparent: rgba(43, 81, 144, 0.2);
-  --primary-button-hovered: #325FA9;
-  --primary-button-pressed: #284B86;
-  --primary-button-focused: #144CA8;
-  --primary-button-disabled: #484662;
-  --primary-button-disabled-color: rgba(255, 255, 255, .5);
-  --primary-button-focused-border: #6E9FED;
-  --primary-button-border: rgba(255, 255, 255, .09);
-  --primary-button-outline: rgba(87, 132, 255, .3); // OLD
+  --accented-button-disabled: #12213B;
+  --accented-button-disabled-color: #5E88CF;
+  --brand-button-disabled: #111F4B;
+  --brand-button-disabled-color: #6585E7;
+  --positive-button-disabled: #092518;
+  --positive-button-disabled-color: #25A265;
+  --negative-button-disabled: #330F0F;
+  --negative-button-disabled-color: #D06262;
 
-  --theme-button-enabled: rgba(255, 255, 255, .02);
+  --theme-button-default: rgba(255, 255, 255, .02);
   --theme-button-hovered: rgba(255, 255, 255, .04);
   --theme-button-pressed: rgba(255, 255, 255, .08);
   --theme-button-focused: rgba(255, 255, 255, .04);
-  --theme-button-disabled: rgba(255, 255, 255, .02);
-  --theme-button-disabled-color: rgba(255, 255, 255, .5);
+  --theme-button-focused-border: rgba(255, 255, 255, .09);
+  --theme-button-disabled: rgba(255, 255, 255, .08);
   --theme-button-border: rgba(255, 255, 255, .09);
 
   --theme-button-contrast-color: #000;
@@ -250,24 +260,21 @@
 
 /* Light Theme */
 .theme-light {
-  --primary-button-color: #fff;
-  --primary-button-enabled: #2B5190;
-  --primary-button-transparent: rgba(43, 81, 144, 0.2);
-  --primary-button-hovered: #325FA9;
-  --primary-button-pressed: #284B86;
-  --primary-button-focused: #144CA8;
-  --primary-button-disabled: #EBEBEB;
-  --primary-button-disabled-color: rgba(0, 0, 0, .5);
-  --primary-button-focused-border: #6E9FED; // DARK
-  --primary-button-border: rgba(255, 255, 255, .09);
-  --primary-button-outline: rgba(87, 132, 255, .3); // OLD
-  
-  --theme-button-enabled: rgba(0, 0, 0, .02);
+  --accented-button-disabled: #E0E8F6;
+  --accented-button-disabled-color: #284B86;
+  --brand-button-disabled: #DCE3F9;
+  --brand-button-disabled-color: #2C58DE;
+  --positive-button-disabled: #DEF7EB;
+  --positive-button-disabled-color: #1A7046;
+  --negative-button-disabled: #F6E0E0;
+  --negative-button-disabled-color: #962C2C;
+
+  --theme-button-default: rgba(0, 0, 0, .02);
   --theme-button-hovered: rgba(0, 0, 0, .04);
   --theme-button-pressed: rgba(0, 0, 0, .08);
-  --theme-button-focused: rgba(0, 0, 0, .04);
-  --theme-button-disabled: rgba(0, 0, 0, .02);
-  --theme-button-disabled-color: rgba(0, 0, 0, .5);
+  --theme-button-focused: rgba(0, 0, 0, .08);
+  --theme-button-focused-border: #fff;
+  --theme-button-disabled: rgba(0, 0, 0, .08);
   --theme-button-border: rgba(0, 0, 0, .09);
 
   --theme-button-contrast-color: #fff;
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 211cf9a0b1..5a54f3fd5d 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -844,7 +844,7 @@ a.no-line {
 }
 
 .focused-button {
-  background-color: var(--theme-button-enabled);
+  background-color: var(--theme-button-default);
   border: 1px solid transparent;
 
   & > .icon { color: var(--theme-content-color); }
@@ -859,7 +859,7 @@ a.no-line {
   }
   &:focus {
     border: 1px solid var(--theme-button-border);
-    box-shadow: 0 0 0 2px var(--primary-button-focused-border);
+    box-shadow: 0 0 0 2px var(--accented-button-outline);
     & > .icon { color: var(--theme-caption-color); }
   }
 
@@ -900,7 +900,7 @@ a.no-line {
 .background-highlight-red { background-color: var(--highlight-red); }
 .background-button-bg-color { background-color: var(--button-bg-color); }
 .background-button-noborder-bg-hover { background-color: var(--noborder-bg-hover); }
-.background-primary-color { background-color: var(--primary-button-enabled); }
+.background-primary-color { background-color: var(--accented-button-default); }
 .background-content-accent-color { background-color: var(--accent-color); }
 
 .content-trans-color { color: var(--theme-trans-color); }
@@ -921,7 +921,7 @@ a.no-line {
 .border-radius-right-1 { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
 .border-radius-top-1 { border-top-right-radius: 0.25rem; border-top-left-radius: 0.25rem; }
 .border-divider-color {border: 1px solid var(--divider-color);}
-.border-primary-button { border-color: var(--primary-button-border); }
+.border-primary-button { border-color: var(--accented-button-border); }
 
 .top-divider { border-top: 1px solid var(--divider-color); }
 .bottom-divider { border-bottom: 1px solid var(--divider-color); }
diff --git a/packages/theme/styles/button.scss b/packages/theme/styles/button.scss
index a7ad45b2b9..547bedde04 100644
--- a/packages/theme/styles/button.scss
+++ b/packages/theme/styles/button.scss
@@ -2,231 +2,138 @@
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  padding: 0 0.75rem;
+  padding: 0 .75rem;
   min-width: 1.375rem;
   white-space: nowrap;
-  color: var(--theme-caption-color);
+  font-size: .8125rem;
+  color: var(--theme-content-color);
   background-color: transparent;
   border: 1px solid transparent;
   transition-property: border, background-color, color, box-shadow;
-  transition-duration: 0.15s;
+  transition-duration: .15s;
 
   &.inline {
     height: 1.375rem;
-    font-size: 0.75rem;
-    line-height: 0.75rem;
-    &.only-icon {
-      width: 1.375rem;
-    }
+    font-size: .75rem;
+    line-height: .75rem;
+    &.only-icon { width: 1.375rem; }
   }
   &.x-small {
     height: 1.5rem;
-    font-size: 0.75rem;
-    &.only-icon {
-      width: 1.5rem;
-    }
+    font-size: .75rem;
+    &.only-icon { width: 1.5rem; }
   }
   &.small {
     height: 1.75rem;
-    font-size: 0.8125rem;
-    &.only-icon {
-      width: 1.75rem;
-    }
+    font-size: .8125rem;
+    &.only-icon { width: 1.75rem; }
   }
   &.medium {
     height: 2rem;
-    &.only-icon {
-      width: 2rem;
-    }
+    &.only-icon { width: 2rem; }
   }
   &.large {
     height: 2.25rem;
-    &.only-icon {
-      width: 2.25rem;
-    }
+    &.only-icon { width: 2.25rem; }
   }
   &.x-large {
     height: 2.75rem;
-    &.only-icon {
-      width: 2.75rem;
-    }
+    &.only-icon { width: 2.75rem; }
   }
 
-  &.iconL:not(.iconR) {
-    padding: 0 1rem 0 0.75rem;
-  }
-  &.iconR:not(.iconL) {
-    padding: 0 0.75rem 0 1rem;
-  }
-  &.accent {
-    font-weight: 500;
-  }
+  &.iconL:not(.iconR) { padding: 0 1rem 0 .75rem; }
+  &.iconR:not(.iconL) { padding: 0 .75rem 0 1rem; }
   .btn-icon {
     color: var(--theme-content-color);
-    transition: color 0.15s;
+    transition: color .15s;
     pointer-events: none;
   }
   .btn-right-icon {
-    margin-left: 0.5rem;
+    margin-left: .5rem;
     color: var(--theme-halfcontent-color);
-    transition: color 0.15s;
+    transition: color .15s;
     pointer-events: none;
   }
-  &:not(.only-icon) .btn-icon:not(.spinner) {
-    margin-right: 0.375rem;
-  }
-  &:not(.only-icon) .btn-right-icon {
-    margin-left: 0.375rem;
-  }
-  &.no-border:not(.only-icon) .btn-icon,
-  &.link-bordered:not(.only-icon) .btn-icon,
-  &.list:not(.only-icon) .btn-icon,
-  &.sh-circle:not(.only-icon) .btn-icon {
-    margin-right: 0.25rem;
-  }
+  &:not(.only-icon) .btn-icon:not(.spinner) { margin-right: .375rem; }
+  &:not(.only-icon) .btn-right-icon { margin-left: .375rem; }
 
-  &.short {
-    max-width: 8.5rem;
-  }
-  &.sh-no-shape {
-    border-radius: 0.25rem;
-  }
-  &.sh-round {
-    border-radius: 0.5rem;
-  }
-  &.sh-round2 {
-    border-radius: 0.75rem;
-  }
-  &.sh-circle {
-    border-radius: 1rem;
-    &.link {
-      padding: 0 0.5rem 0 0.25rem;
-    }
-  }
+  &.short { max-width: 8.5rem; }
+  &.accent { font-weight: 500; }
+  &.sh-no-shape { border-radius: .25rem; }
+  &.sh-round { border-radius: .5rem; }
+  &.sh-round2 { border-radius: .75rem; }
+  &.sh-circle { border-radius: 1rem; }
   &.sh-rectangle-right {
-    border-top-left-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
+    border-top-left-radius: .25rem;
+    border-bottom-left-radius: .25rem;
   }
   &.sh-rectangle-left {
-    border-top-right-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
-  }
-  &.sh-filter {
-    border-radius: 0 0 0.5rem 0.5rem;
-  }
-  &.bs-solid {
-    border-style: solid;
-  }
-  &.bs-dashed {
-    border-style: dashed;
+    border-top-right-radius: .25rem;
+    border-bottom-right-radius: .25rem;
   }
+  &.sh-filter { border-radius: 0 0 .5rem .5rem; }
 
   &.highlight {
-    box-shadow: inset 0 0 1px 1px var(--primary-button-enabled);
+    box-shadow: inset 0 0 1px 1px var(--accented-button-outline);
+    &:hover { box-shadow: inset 0 0 1px 2px var(--accented-button-outline); }
+  }
 
-    &:hover {
-      box-shadow: inset 0 0 1px 1px var(--primary-button-hovered);
-    }
-  }
-  &:hover {
-    .btn-icon {
-      color: var(--theme-caption-color);
-    }
-  }
+  &:hover .btn-icon { color: var(--theme-caption-color); }
   &:not(.no-focus):focus {
-    &:not(.sh-filter) {
-      box-shadow: 0 0 0 2px var(--primary-button-focused-border);
-    }
-    &.sh-filter {
-      border-color: var(--primary-button-focused-border);
-    }
-  }
-  &:disabled {
-    color: var(--theme-dark-color);
-    cursor: not-allowed;
-
-    .btn-icon {
-      opacity: 0.5;
-    }
+    &:not(.sh-filter) { box-shadow: 0 0 0 2px var(--accented-button-outline); }
+    &.sh-filter { border-color: var(--accented-button-outline); }
   }
 
-  &.jf-left {
-    justify-content: flex-start;
-  }
-  &.jf-center {
-    justify-content: center;
-  }
-  &.only-icon {
-    padding: 0;
-  }
+  &.bs-solid { border-style: solid; }
+  &.bs-dashed { border-style: dashed; }
+  &.jf-left { justify-content: flex-start; }
+  &.jf-center { justify-content: center; }
+  &.only-icon { padding: 0; }
 
-  &.secondary {
-    background-color: var(--theme-button-enabled);
+  &.regular {
+    background-color: var(--theme-button-default);
     border-color: var(--theme-button-border);
 
-    // &.medium:not(.only-icon) {
-    //   padding: 0 0.75rem;
-    // }
-    &:hover {
-      background-color: var(--theme-button-hovered);
-    }
-    &:active {
-      background-color: var(--theme-button-pressed);
-    }
+    &:hover { background-color: var(--theme-button-hovered); }
+    &:active { background-color: var(--theme-button-pressed); }
     &:focus {
       background-color: var(--theme-button-focused);
+      border-color: var(--theme-button-focused-border);
     }
-    &:disabled {
-      color: var(--theme-button-disabled-color);
-      background-color: var(--theme-button-disabled);
-    }
-
+    &:disabled { background-color: var(--theme-button-disabled); }
     &.selected {
       background-color: var(--theme-button-hovered);
-      .btn-icon {
-        color: var(--theme-caption-color);
-      }
+      .btn-icon { color: var(--theme-caption-color); }
     }
   }
   &.no-border {
-    font-weight: 400;
     color: var(--theme-content-color);
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     box-shadow: var(--button-shadow);
 
     &:hover {
       color: var(--theme-caption-color);
       background-color: var(--theme-button-hovered);
 
-      .btn-icon {
-        color: var(--theme-caption-color);
-      }
+      .btn-icon { color: var(--theme-caption-color); }
     }
     &:disabled {
       color: var(--theme-trans-color);
       background-color: var(--theme-list-button-color);
       cursor: default;
-      .btn-icon {
-        color: var(--theme-trans-color);
-      }
+
+      .btn-icon { color: var(--theme-trans-color); }
       &:hover {
         color: var(--theme-trans-color);
-        .btn-icon {
-          color: var(--theme-trans-color);
-        }
+        .btn-icon { color: var(--theme-trans-color); }
       }
     }
   }
-  &.transparent {
-    &:hover {
-      background-color: var(--theme-button-hovered);
-    }
-    &.selected {
-      background-color: var(--highlight-select);
-    }
-    &.selected:hover {
-      background-color: var(--highlight-select-hover);
-    }
+  &.ghost {
+    &:hover { background-color: var(--theme-button-hovered); }
+    &:active { background-color: var(--theme-button-pressed); }
+    &.selected { background-color: var(--highlight-select); }
+    &.selected:hover { background-color: var(--highlight-select-hover); }
   }
   &.link {
     padding: 0 0.875rem;
@@ -234,9 +141,8 @@
       color: var(--theme-caption-color);
       background-color: var(--theme-bg-color);
       border-color: var(--theme-divider-color);
-      .btn-icon {
-        color: var(--theme-content-color);
-      }
+
+      .btn-icon { color: var(--theme-content-color); }
     }
     &:disabled {
       color: var(--theme-dark-color);
@@ -244,39 +150,31 @@
       border-color: transparent;
       cursor: auto;
 
-      .btn-icon {
-        color: var(--theme-content-color);
-      }
-    }
-    &.small {
-      padding: 0 0.25rem;
+      .btn-icon { color: var(--theme-content-color); }
     }
+    &.small { padding: 0 .25rem; }
   }
   &.link-bordered {
-    padding: 0 0.5rem;
+    padding: 0 .5rem;
     color: var(--theme-content-color);
     background-color: var(--theme-link-button-color);
     border-color: var(--theme-button-border);
+
     &:hover {
       color: var(--theme-caption-color);
       background-color: var(--theme-link-button-hover);
       border-color: var(--theme-list-divider-color);
-      .btn-icon {
-        color: var(--theme-caption-color);
-      }
-    }
-    &.small {
-      padding: 0 0.25rem;
+
+      .btn-icon { color: var(--theme-caption-color); }
     }
+    // &.small { padding: 0 .25rem; }
   }
   &.list {
-    padding: 0 0.625em;
+    padding: 0 .625em;
     color: var(--theme-content-color);
-    background-color: var(--theme-button-enabled);
-    border: 1px solid var(--theme-button-border);
+    background-color: var(--theme-button-default);
+    border-color: var(--theme-button-border);
     border-radius: 1.5rem;
-    // transition-property: border, color, background-color;
-    // transition-duration: 0.15s;
 
     &:not(.inline, .x-small) { min-height: 1.75rem; }
     .btn-icon { color: var(--theme-dark-color); }
@@ -287,28 +185,55 @@
     }
     &:not(.no-focus):focus { box-shadow: none; }
   }
-  &.primary {
-    padding: 0 0.75rem;
-    font-weight: 500;
-    color: var(--primary-button-color);
-    background-color: var(--primary-button-enabled);
-    border-color: var(--primary-button-border);
+  &.accented,
+  &.brand,
+  &.positive,
+  &.negative {
+    padding: 0 1.5rem;
+    color: var(--accented-button-color);
+    border-color: var(--accented-button-border);
 
-    .btn-icon {
-      color: var(--white-color);
-    }
-    &:hover {
-      background-color: var(--primary-button-hovered);
-    }
-    &:active {
-      background-color: var(--primary-button-pressed);
-    }
-    &:focus {
-      background-color: var(--primary-button-focused);
-    }
+    .btn-icon { color: var(--accented-button-color); }
+    &:focus { border-color: var(--accented-button-focused-border); }
+  }
+  &.accented {
+    background-color: var(--accented-button-default);
+    &:hover { background-color: var(--accented-button-hovered); }
+    &:active { background-color: var(--accented-button-pressed); }
+    &:focus { background-color: var(--accented-button-focused); }
     &:disabled {
-      color: var(--primary-button-disabled-color);
-      background-color: var(--primary-button-disabled);
+      color: var(--accented-button-disabled-color);
+      background-color: var(--accented-button-disabled);
+    }
+  }
+  &.brand {
+    background-color: var(--brand-button-default);
+    &:hover { background-color: var(--brand-button-hovered); }
+    &:active { background-color: var(--brand-button-pressed); }
+    &:focus { background-color: var(--brand-button-focused); }
+    &:disabled {
+      color: var(--brand-button-disabled-color);
+      background-color: var(--brand-button-disabled);
+    }
+  }
+  &.positive {
+    background-color: var(--positive-button-default);
+    &:hover { background-color: var(--positive-button-hovered); }
+    &:active { background-color: var(--positive-button-pressed); }
+    &:focus { background-color: var(--positive-button-focused); }
+    &:disabled {
+      color: var(--positive-button-disabled-color);
+      background-color: var(--positive-button-disabled);
+    }
+  }
+  &.negative {
+    background-color: var(--negative-button-default);
+    &:hover { background-color: var(--negative-button-hovered); }
+    &:active { background-color: var(--negative-button-pressed); }
+    &:focus { background-color: var(--negative-button-focused); }
+    &:disabled {
+      color: var(--negative-button-disabled-color);
+      background-color: var(--negative-button-disabled);
     }
   }
   &.contrast {
@@ -318,18 +243,11 @@
     background-color: var(--theme-button-contrast-enabled);
     border-color: var(--theme-button-contrast-border);
 
-    .btn-icon {
-      color: var(--theme-button-contrast-color);
-    }
-    &:hover {
-      background-color: var(--theme-button-contrast-hovered);
-    }
-    &:active {
-      background-color: var(--theme-button-contrast-pressed);
-    }
-    &:focus {
-      background-color: var(--theme-button-contrast-hovered);
-    }
+    .btn-icon { color: var(--theme-button-contrast-color); }
+
+    &:hover { background-color: var(--theme-button-contrast-hovered); }
+    &:active { background-color: var(--theme-button-contrast-pressed); }
+    &:focus { background-color: var(--theme-button-contrast-hovered); }
     &:disabled {
       color: var(--theme-button-contrast-disabled-color);
       background-color: var(--theme-button-contrast-disabled);
@@ -339,13 +257,9 @@
   &.notSelected {
     color: var(--theme-dark-color);
 
-    .btn-icon {
-      color: var(--theme-darker-color);
-    }
+    .btn-icon { color: var(--theme-darker-color); }
     &:hover,
-    &:hover .btn-icon {
-      color: var(--theme-content-color);
-    }
+    &:hover .btn-icon { color: var(--theme-content-color); }
   }
 
   &.dangerous {
@@ -353,15 +267,17 @@
     background-color: var(--dangerous-bg-color);
     border-color: var(--dangerous-bg-color);
 
-    &:hover {
-      background-color: var(--dangerous-bg-hover);
-    }
-    &:not(.no-focus):focus {
-      box-shadow: var(--dangerous-shadow);
-    }
+    &:hover { background-color: var(--dangerous-bg-hover); }
+    &:not(.no-focus):focus { box-shadow: var(--dangerous-shadow); }
   }
 
-  .resetIconSize {
-    font-size: 16px;
+  &:disabled {
+    color: var(--theme-trans-color);
+    border-color: transparent;
+    cursor: not-allowed;
+
+    .btn-icon { opacity: .5; }
   }
+
+  .resetIconSize { font-size: 16px; }
 }
\ No newline at end of file
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index 3a327abd4d..42e7b97f27 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -436,7 +436,7 @@
       padding: .3125rem .5rem;
       min-width: 0;
       font-size: .875rem;
-      background-color: var(--theme-button-enabled);
+      background-color: var(--theme-button-default);
       color: var(--theme-halfcontent-color);
       border: 1px solid var(--theme-button-border);
       border-radius: .25rem;
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 54c0cbb3e1..22d2109d55 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -69,6 +69,13 @@
       align-self: flex-end;
       margin-top: .5rem;
     }
+    &.header-with-mode-selector {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+    &.header-without-label {
+      padding-left: 0;
+    }
   }
 
   .ac-header__wrap-description,
@@ -268,7 +275,7 @@
           background-color: var(--theme-button-hovered);
         }
         &.selected {
-          background-color: var(--theme-button-enabled);
+          background-color: var(--theme-button-default);
           border-color: var(--theme-button-border);
           cursor: auto;
         }
@@ -332,7 +339,7 @@
       // height: 1.5rem;
     }
     &__element {
-      fill: var(--theme-button-enabled);
+      fill: var(--theme-button-default);
       stroke: var(--theme-button-border);
       stroke-linecap: round;
       stroke-linejoin: round;
@@ -371,7 +378,7 @@
   display: flex;
   flex-direction: column;
   padding: 1rem 1.5rem 1.25rem;
-  background-color: var(--theme-button-enabled);
+  background-color: var(--theme-button-default);
   border: 1px solid var(--theme-button-border);
   border-radius: 0.5rem;
   transition-property: box-shadow, background-color, border-color;
@@ -390,8 +397,8 @@
   .logo {
     width: 4.5rem;
     height: 4.5rem;
-    color: var(--primary-button-color);
-    background-color: var(--primary-button-enabled);
+    color: var(--accented-button-color);
+    background-color: var(--accented-button-default);
     border-radius: 50%;
   }
   .label {
@@ -679,8 +686,8 @@
       border-color: transparent;
     }
     &:focus {
-      border-color: var(--primary-button-focused-border);
-      box-shadow: 0 0 0 3px var(--primary-button-outline);
+      border-color: var(--accented-button-focused-border);
+      box-shadow: 0 0 0 3px var(--accented-button-outline);
       & > .icon { color: var(--caption-color); }
     }
   }
@@ -724,7 +731,7 @@
       position: absolute;
       width: 6px;
       height: 6px;
-      background-color: var(--primary-button-enabled);
+      background-color: var(--accented-button-default);
     }
     &::before {
       top: -2px;
@@ -931,6 +938,7 @@
 }
 
 /* Kanban - global style */
+.kanban-container .card-container .antiButton.link-bordered { padding: 0 .5rem; }
 .kanban-container .card-container .card-labels > *:not(.labels-container),
 .kanban-container .card-container .card-labels.labels .labels-container > * {
   margin: .25rem .25rem 0 0;
diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss
index 0c12b262a3..13e41ce5f6 100644
--- a/packages/theme/styles/global.scss
+++ b/packages/theme/styles/global.scss
@@ -16,13 +16,13 @@
 @import "./_colors.scss";
 @import "./_layouts.scss";
 @import "./common.scss";
+@import "./button.scss";
 @import "./components.scss";
 @import "./dialogs.scss";
 @import "./popups.scss";
 @import "./mixins.scss";
 @import "./panel.scss";
 @import "./prose.scss";
-@import "./button.scss";
 @import "./_text-editor.scss";
 
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400;1,500&display=swap');
diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
index 4fbbd38fc4..eea2361c7c 100644
--- a/packages/theme/styles/popups.scss
+++ b/packages/theme/styles/popups.scss
@@ -70,7 +70,7 @@
   
       &.show {
         color: var(--theme-content-color);
-        background-color: var(--theme-button-enabled);
+        background-color: var(--theme-button-default);
         cursor: pointer;
         &:hover {
           color: var(--theme-caption-color);
diff --git a/packages/theme/styles/prose.scss b/packages/theme/styles/prose.scss
index d2bb00b204..38ab42af65 100644
--- a/packages/theme/styles/prose.scss
+++ b/packages/theme/styles/prose.scss
@@ -50,7 +50,7 @@ table.proseTable {
   padding: 0 .25rem;
   font-family: var(--mono-font);
   color: var(--theme-content-color);
-  background-color: var(--theme-button-enabled);
+  background-color: var(--theme-button-default);
   border: 1px solid var(--theme-button-border);
   border-radius: .25rem;
 }
@@ -58,7 +58,7 @@ table.proseTable {
 .proseCodeBlock {
   font-family: var(--mono-font);
   color: var(--theme-content-color);
-  background-color: var(--theme-button-enabled);
+  background-color: var(--theme-button-default);
   border: 1px solid var(--theme-button-border);
   border-radius: .25rem;
   padding: 0.5rem;  
diff --git a/packages/ui/src/components/ActionIcon.svelte b/packages/ui/src/components/ActionIcon.svelte
index 37a803ebbf..a5545a9a01 100644
--- a/packages/ui/src/components/ActionIcon.svelte
+++ b/packages/ui/src/components/ActionIcon.svelte
@@ -60,7 +60,7 @@
       opacity: 1;
     }
     &:focus-visible {
-      box-shadow: 0 0 0 2px var(--primary-button-focused-border);
+      box-shadow: 0 0 0 2px var(--accented-button-outline);
       .icon {
         color: var(--theme-caption-color);
         opacity: 1;
diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte
index 3f87387e08..67810945f8 100644
--- a/packages/ui/src/components/Button.svelte
+++ b/packages/ui/src/components/Button.svelte
@@ -17,20 +17,20 @@
   import { onMount, ComponentType } from 'svelte'
   import { registerFocus } from '../focus'
   import { tooltip } from '../tooltips'
-  import type { AnySvelteComponent, ButtonKind, ButtonShape, ButtonSize, LabelAndProps, IconSize } from '../types'
+  import type { AnySvelteComponent, ButtonKind, ButtonShape, ButtonSize, LabelAndProps, IconProps } from '../types'
   import Icon from './Icon.svelte'
   import Label from './Label.svelte'
   import Spinner from './Spinner.svelte'
 
   export let label: IntlString | undefined = undefined
   export let labelParams: Record<string, any> = {}
-  export let kind: ButtonKind = 'secondary'
+  export let kind: ButtonKind = 'regular'
   export let size: ButtonSize = 'medium'
   export let shape: ButtonShape = undefined
   export let icon: Asset | AnySvelteComponent | ComponentType | undefined = undefined
-  export let iconProps: any | undefined = undefined
+  export let iconProps: IconProps = {}
   export let iconRight: Asset | AnySvelteComponent | ComponentType | undefined = undefined
-  export let iconRightProps: any | undefined = undefined
+  export let iconRightProps: IconProps = {}
   export let justify: 'left' | 'center' = 'center'
   export let disabled: boolean = false
   export let loading: boolean = false
@@ -47,14 +47,14 @@
   export let id: string | undefined = undefined
   export let input: HTMLButtonElement | undefined = undefined
   export let showTooltip: LabelAndProps | undefined = undefined
-  export let iconSize: IconSize = size === 'inline' ? 'inline' : 'small'
-  export let iconRightSize: IconSize = 'x-small'
   export let short: boolean = false
   export let shrink: number = 0
   export let accent: boolean = false
   export let noFocus: boolean = false
 
-  // $: iconSize = size === 'inline' ? 'inline' : 'small'
+  $: iconSize =
+    iconProps && iconProps.size !== undefined ? iconProps.size : size && size === 'inline' ? 'inline' : 'small'
+  $: iconRightSize = iconRightProps && iconRightProps.size !== undefined ? iconRightProps.size : 'x-small'
   let iconOnly: boolean = false
   $: iconOnly =
     label === undefined &&
@@ -115,7 +115,7 @@
   style:height
   style:flex-shrink={shrink}
   {title}
-  type={kind === 'primary' ? 'submit' : 'button'}
+  type={kind === 'accented' ? 'submit' : 'button'}
   on:click|stopPropagation|preventDefault
   on:focus
   on:blur
diff --git a/packages/ui/src/components/CheckBox.svelte b/packages/ui/src/components/CheckBox.svelte
index fa50f6227e..502dae5c5b 100644
--- a/packages/ui/src/components/CheckBox.svelte
+++ b/packages/ui/src/components/CheckBox.svelte
@@ -19,7 +19,7 @@
   export let symbol: 'check' | 'minus' = 'check'
   export let size: 'small' | 'medium' = 'small'
   export let circle: boolean = false
-  export let primary: boolean = false
+  export let accented: boolean = false
   export let readonly = false
 
   const dispatch = createEventDispatcher()
@@ -35,14 +35,14 @@
   }
 </script>
 
-<label class="checkbox {size}" class:circle class:primary class:readonly class:checked>
+<label class="checkbox {size}" class:circle class:accented class:readonly class:checked>
   <input class="chBox" disabled={readonly} type="checkbox" bind:checked on:change={handleValueChanged} />
   <svg class="checkSVG" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
     {#if checked}
       {#if symbol === 'minus'}
-        <rect class="check" class:primary x="4" y="7.4" width="8" height="1.2" />
+        <rect class="check" class:accented x="4" y="7.4" width="8" height="1.2" />
       {:else}
-        <polygon class="check" class:primary points="7.3,11.5 4,8.3 5,7.4 7.3,9.7 11.8,5.1 12.7,6.1 " />
+        <polygon class="check" class:accented points="7.3,11.5 4,8.3 5,7.4 7.3,9.7 11.8,5.1 12.7,6.1 " />
       {/if}
     {/if}
   </svg>
@@ -74,8 +74,8 @@
     &.checked {
       background-color: var(--theme-checkbox-bg-color);
     }
-    &.primary.checked {
-      background-color: var(--primary-button-enabled);
+    &.accented.checked {
+      background-color: var(--accented-button-default);
       border-color: transparent;
     }
     &.readonly.checked {
@@ -96,8 +96,8 @@
         & .check {
           visibility: visible;
           fill: var(--theme-checkbox-color);
-          &.primary {
-            fill: var(--primary-button-color);
+          &.accented {
+            fill: var(--accented-button-color);
           }
         }
       }
diff --git a/packages/ui/src/components/CheckBoxWithLabel.svelte.txt b/packages/ui/src/components/CheckBoxWithLabel.svelte.txt
index 23f3528a5e..246099292a 100644
--- a/packages/ui/src/components/CheckBoxWithLabel.svelte.txt
+++ b/packages/ui/src/components/CheckBoxWithLabel.svelte.txt
@@ -119,7 +119,7 @@
       overflow-wrap: break-word;
 
       &:focus {
-        border-color: var(--primary-button-enabled);
+        border-color: var(--accented-button-default);
       }
 
       &::-webkit-contacts-auto-fill-button,
diff --git a/packages/ui/src/components/CircleButton.svelte b/packages/ui/src/components/CircleButton.svelte
index c300a87d72..06c244a5b6 100644
--- a/packages/ui/src/components/CircleButton.svelte
+++ b/packages/ui/src/components/CircleButton.svelte
@@ -19,9 +19,9 @@
 
   export let icon: Asset | AnySvelteComponent | undefined
   export let size: ButtonSize = 'large'
-  export let transparent: boolean = false
+  export let ghost: boolean = false
   export let selected: boolean = false
-  export let primary: boolean = false
+  export let accented: boolean = false
   export let id: string | undefined = undefined
 </script>
 
@@ -30,8 +30,8 @@
   {id}
   class="flex-center icon-button icon-{size}"
   class:selected
-  class:transparent
-  class:primary
+  class:ghost
+  class:accented
   on:click|stopPropagation
   on:mousemove
 >
@@ -61,22 +61,22 @@
     &.selected {
       background-color: var(--menu-bg-select);
     }
-    &.transparent {
+    &.ghost {
       background-color: var(--menu-bg-select-trans);
 
       &:hover {
         background-color: var(--menu-bg-select);
       }
     }
-    &.primary {
-      color: var(--primary-button-color);
-      background-color: var(--primary-button-enabled);
-      border-color: var(--primary-button-border);
+    &.accented {
+      color: var(--accented-button-color);
+      background-color: var(--accented-button-default);
+      border-color: var(--accented-button-border);
       &:hover {
-        background-color: var(--primary-button-hovered);
+        background-color: var(--accented-button-hovered);
       }
       &:active {
-        background-color: var(--primary-button-pressed);
+        background-color: var(--accented-button-pressed);
       }
     }
   }
diff --git a/packages/ui/src/components/Dialog.svelte b/packages/ui/src/components/Dialog.svelte
index e8a01f060d..e6344f2233 100644
--- a/packages/ui/src/components/Dialog.svelte
+++ b/packages/ui/src/components/Dialog.svelte
@@ -55,7 +55,7 @@
       <ScrollBox vertical stretch><slot /></ScrollBox>
     </div>
     <div class="footer">
-      <Button label={okLabel} kind={'primary'} />
+      <Button label={okLabel} kind={'accented'} />
       <Button
         label={ui.string.Cancel}
         on:click={() => {
diff --git a/packages/ui/src/components/DropdownRecordPopup.svelte b/packages/ui/src/components/DropdownRecordPopup.svelte
index 4e621ede86..22b5d47c3f 100644
--- a/packages/ui/src/components/DropdownRecordPopup.svelte
+++ b/packages/ui/src/components/DropdownRecordPopup.svelte
@@ -70,7 +70,7 @@
           >
             <div class="flex-grow caption-color lines-limit-2"><Label label={item[1]} /></div>
             {#if item[0] === selected}
-              <div class="check"><CheckBox checked primary /></div>
+              <div class="check"><CheckBox checked accented /></div>
             {/if}
           </button>
         </svelte:fragment>
diff --git a/packages/ui/src/components/EditWithIcon.svelte b/packages/ui/src/components/EditWithIcon.svelte
index ee9856244d..e225c637b8 100644
--- a/packages/ui/src/components/EditWithIcon.svelte
+++ b/packages/ui/src/components/EditWithIcon.svelte
@@ -56,7 +56,7 @@
     <div class="ml-2">
       <Button
         icon={IconClose}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         noFocus
         on:click={() => {
diff --git a/packages/ui/src/components/Like.svelte b/packages/ui/src/components/Like.svelte
index 9051c93854..1857b3defe 100644
--- a/packages/ui/src/components/Like.svelte
+++ b/packages/ui/src/components/Like.svelte
@@ -58,13 +58,13 @@
 
     &.voted {
       .icon {
-        color: var(--primary-button-enabled);
+        color: var(--accented-button-default);
 
         &:hover {
-          color: var(--primary-button-hovered);
+          color: var(--accented-button-hovered);
         }
         &:active {
-          color: var(--primary-button-pressed);
+          color: var(--accented-button-pressed);
         }
       }
     }
diff --git a/packages/ui/src/components/MiniToggle.svelte b/packages/ui/src/components/MiniToggle.svelte
index 6774d2da21..b6730c741c 100644
--- a/packages/ui/src/components/MiniToggle.svelte
+++ b/packages/ui/src/components/MiniToggle.svelte
@@ -79,9 +79,9 @@
           background: #eee;
         }
       }
-      // &:focus-within + .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
+      // &:focus-within + .toggle-switch { box-shadow: 0 0 0 2px var(--accented-button-outline); }
     }
-    // &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
+    // &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--accented-button-outline); }
     .toggle-switch {
       position: relative;
       display: inline-block;
diff --git a/packages/ui/src/components/Panel.svelte b/packages/ui/src/components/Panel.svelte
index bb34068d8b..fd6863e786 100644
--- a/packages/ui/src/components/Panel.svelte
+++ b/packages/ui/src/components/Panel.svelte
@@ -95,7 +95,7 @@
         <Button
           focusIndex={10000}
           icon={IconClose}
-          kind={'transparent'}
+          kind={'ghost'}
           size={'medium'}
           on:click={() => {
             dispatch('close')
@@ -115,7 +115,7 @@
           <Button
             focusIndex={10008}
             icon={IconDetails}
-            kind={'transparent'}
+            kind={'ghost'}
             size={'medium'}
             selected={asideShown}
             on:click={() => {
@@ -127,7 +127,7 @@
           <Button
             focusIndex={10009}
             icon={useMaxWidth ? IconMaxWidth : IconMinWidth}
-            kind={'transparent'}
+            kind={'ghost'}
             size={'medium'}
             selected={useMaxWidth}
             on:click={() => {
@@ -140,7 +140,7 @@
           <Button
             focusIndex={100010}
             icon={fullSize ? IconScale : IconScaleFull}
-            kind={'transparent'}
+            kind={'ghost'}
             size={'medium'}
             selected={fullSize}
             on:click={() => {
diff --git a/packages/ui/src/components/PanelInstance.svelte b/packages/ui/src/components/PanelInstance.svelte
index 54d90f242c..ea11b780c1 100644
--- a/packages/ui/src/components/PanelInstance.svelte
+++ b/packages/ui/src/components/PanelInstance.svelte
@@ -117,6 +117,7 @@
   onMount(() => {
     if (props) fitPopup(props, contentPanel)
   })
+  $: console.log('[!!!] element: ', props?.element)
 </script>
 
 <svelte:window
diff --git a/packages/ui/src/components/ProgressCircle.svelte b/packages/ui/src/components/ProgressCircle.svelte
index 2af05960ae..f2e4658098 100644
--- a/packages/ui/src/components/ProgressCircle.svelte
+++ b/packages/ui/src/components/ProgressCircle.svelte
@@ -22,7 +22,7 @@
   export let max: number = 100
   export let color: number = 5
   export let size: IconSize = 'small'
-  export let primary: boolean = false
+  export let accented: boolean = false
 
   if (value > max) value = max
   if (value < min) value = min
@@ -49,7 +49,7 @@
     cy={8}
     r={7}
     class="progress-circle"
-    style:stroke={primary ? 'var(--primary-bg-color)' : getPlatformColor(color, $themeStore.dark)}
+    style:stroke={accented ? 'var(--primary-bg-color)' : getPlatformColor(color, $themeStore.dark)}
     style:opacity={dashOffset === 0 ? 0 : 1}
     style:transform={'rotate(-82deg)'}
     style:stroke-dasharray={lenghtC}
diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte
index 01b94c2fd2..165e4aee57 100644
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@@ -623,7 +623,7 @@
       background-color: var(--theme-button-hovered);
     }
     &:focus {
-      box-shadow: 0 0 0 2px var(--primary-button-focused-border);
+      box-shadow: 0 0 0 2px var(--accented-button-outline);
     }
     &.vertical {
       width: 2rem;
diff --git a/packages/ui/src/components/StepsDialog.svelte b/packages/ui/src/components/StepsDialog.svelte
index b59b84a7b9..d3a1eecdb5 100644
--- a/packages/ui/src/components/StepsDialog.svelte
+++ b/packages/ui/src/components/StepsDialog.svelte
@@ -108,13 +108,13 @@
 
     {#if currentStepIndex > 0}
       <Button
-        kind="secondary"
+        kind="regular"
         label={ui.string.Back}
         on:click={async () => await handleStepSelect(currentStepIndex - 1)}
       />
     {/if}
     <Button
-      kind="primary"
+      kind="accented"
       label={isDone ? doneLabel : ui.string.Next}
       disabled={!isStepValid}
       loading={isSaving}
@@ -231,7 +231,7 @@
       background-color: var(--accent-bg-color);
 
       &::before {
-        background-color: var(--primary-button-outline);
+        background-color: var(--accented-button-outline);
       }
     }
 
diff --git a/packages/ui/src/components/StylishEdit.svelte b/packages/ui/src/components/StylishEdit.svelte
index fd2206d219..fcc20e846f 100644
--- a/packages/ui/src/components/StylishEdit.svelte
+++ b/packages/ui/src/components/StylishEdit.svelte
@@ -72,7 +72,7 @@
     padding: 0;
     min-width: 3rem;
     height: 3.25rem;
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     border: 1px solid var(--theme-button-border);
     border-radius: 0.75rem;
     caret-color: var(--theme-caret-color);
diff --git a/packages/ui/src/components/TabList.svelte b/packages/ui/src/components/TabList.svelte
index 21a3831b7d..f830feb1b0 100644
--- a/packages/ui/src/components/TabList.svelte
+++ b/packages/ui/src/components/TabList.svelte
@@ -22,7 +22,7 @@
   export let selected: string | string[] = ''
   export let multiselect: boolean = false
   export let items: TabItem[]
-  export let kind: 'normal' | 'secondary' | 'plain' | 'separated' | 'separated-free' = 'normal'
+  export let kind: 'normal' | 'regular' | 'plain' | 'separated' | 'separated-free' = 'normal'
   export let onlyIcons: boolean = false
   export let size: 'small' | 'medium' = 'medium'
 
@@ -49,7 +49,7 @@
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
         bind:this={tabs[i]}
-        class={kind === 'normal' || kind === 'secondary' ? 'button' : 'plain'}
+        class={kind === 'normal' || kind === 'regular' ? 'button' : 'plain'}
         class:separated={kind === 'separated' || kind === 'separated-free'}
         class:free={kind === 'separated-free'}
         class:onlyIcons
@@ -139,7 +139,7 @@
       &.normal .button {
         height: 1.5rem;
       }
-      &.secondary .button {
+      &.regular .button {
         height: 1.375rem;
       }
     }
@@ -162,7 +162,7 @@
 
         &.selected {
           color: var(--theme-caption-color);
-          background-color: var(--theme-button-enabled);
+          background-color: var(--theme-button-default);
           border-color: var(--theme-button-border);
 
           &:hover {
@@ -171,8 +171,8 @@
         }
       }
     }
-    &.secondary {
-      background-color: var(--theme-button-enabled);
+    &.regular {
+      background-color: var(--theme-button-default);
       border: 1px solid var(--theme-button-border);
       border-radius: 0.25rem;
 
diff --git a/packages/ui/src/components/TextArea.svelte b/packages/ui/src/components/TextArea.svelte
index 361a7d31cb..2cbf8a8fca 100644
--- a/packages/ui/src/components/TextArea.svelte
+++ b/packages/ui/src/components/TextArea.svelte
@@ -88,7 +88,7 @@
       resize: none;
 
       &:focus {
-        border-color: var(--primary-button-enabled);
+        border-color: var(--accented-button-default);
       }
       &::placeholder {
         color: var(--dark-color);
diff --git a/packages/ui/src/components/Toggle.svelte b/packages/ui/src/components/Toggle.svelte
index 097b9a7658..78572eaa0e 100644
--- a/packages/ui/src/components/Toggle.svelte
+++ b/packages/ui/src/components/Toggle.svelte
@@ -73,9 +73,9 @@
           background: #eee;
         }
       }
-      // &:focus-within + .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
+      // &:focus-within + .toggle-switch { box-shadow: 0 0 0 2px var(--accented-button-outline); }
     }
-    // &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
+    // &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--accented-button-outline); }
     .toggle-switch {
       position: relative;
       display: inline-block;
diff --git a/packages/ui/src/components/calendar/DateInputBox.svelte b/packages/ui/src/components/calendar/DateInputBox.svelte
index 1e2752b862..792e40d800 100644
--- a/packages/ui/src/components/calendar/DateInputBox.svelte
+++ b/packages/ui/src/components/calendar/DateInputBox.svelte
@@ -304,7 +304,7 @@
     transition: border-color 0.15s ease;
 
     &:hover {
-      border-color: var(--theme-button-enabled);
+      border-color: var(--theme-button-default);
     }
     &:focus-within {
       color: var(--theme-caption-color);
@@ -319,7 +319,7 @@
       width: 0.75rem;
       height: 0.75rem;
       color: var(--theme-content-color);
-      background-color: var(--theme-button-enabled);
+      background-color: var(--theme-button-default);
       outline: none;
       border-radius: 50%;
       cursor: pointer;
@@ -340,8 +340,8 @@
       border-radius: 0.125rem;
 
       &:focus {
-        color: var(--primary-button-color);
-        background-color: var(--primary-button-enabled);
+        color: var(--accented-button-color);
+        background-color: var(--accented-button-default);
       }
       &::after {
         position: absolute;
diff --git a/packages/ui/src/components/calendar/DatePopup.svelte b/packages/ui/src/components/calendar/DatePopup.svelte
index 884a73e449..be79fe2b9a 100644
--- a/packages/ui/src/components/calendar/DatePopup.svelte
+++ b/packages/ui/src/components/calendar/DatePopup.svelte
@@ -128,7 +128,7 @@
   </div>
   <div class="footer">
     <Button
-      kind={'primary'}
+      kind={'accented'}
       label={ui.string.Save}
       size={'x-large'}
       width={'100%'}
diff --git a/packages/ui/src/components/calendar/DatePresenter.svelte b/packages/ui/src/components/calendar/DatePresenter.svelte
index 7961458d00..2c053d7055 100644
--- a/packages/ui/src/components/calendar/DatePresenter.svelte
+++ b/packages/ui/src/components/calendar/DatePresenter.svelte
@@ -143,7 +143,7 @@
       height: 2.25rem;
     }
 
-    &.primary {
+    &.accented {
       padding: 0 0.5rem;
       min-width: 1.5rem;
       background-color: var(--noborder-bg-color);
@@ -297,9 +297,9 @@
         margin-right: 0.25rem;
       }
     }
-    &.secondary {
+    &.regular {
       color: var(--theme-caption-color);
-      background-color: var(--theme-button-enabled);
+      background-color: var(--theme-button-default);
       border-color: var(--theme-button-border);
       border-radius: 0.25rem;
 
@@ -323,7 +323,7 @@
       //   padding: 0 0.5rem;
       // }
     }
-    &.transparent {
+    &.ghost {
       padding: 0 0.625rem;
       border-radius: 0.25rem;
       background-color: inherit;
diff --git a/packages/ui/src/components/calendar/DateRangePresenter.svelte b/packages/ui/src/components/calendar/DateRangePresenter.svelte
index 224a40f6c6..588355bcea 100644
--- a/packages/ui/src/components/calendar/DateRangePresenter.svelte
+++ b/packages/ui/src/components/calendar/DateRangePresenter.svelte
@@ -30,7 +30,7 @@
   export let editable: boolean = false
   export let iconModifier: 'normal' | 'warning' | 'overdue' = 'normal'
   export let labelNull: IntlString = ui.string.NoDate
-  export let kind: 'default' | 'no-border' | 'link' | 'secondary' = 'default'
+  export let kind: 'default' | 'no-border' | 'link' | 'regular' = 'default'
   export let size: 'small' | 'medium' | 'large' = 'small'
   export let noShift: boolean = false
 
@@ -482,7 +482,7 @@
     &.no-border {
       font-weight: 400;
       color: var(--theme-content-color);
-      background-color: var(--theme-button-enabled);
+      background-color: var(--theme-button-default);
       box-shadow: var(--button-shadow);
 
       &:hover {
@@ -565,10 +565,10 @@
       }
     }
 
-    &.secondary {
+    &.regular {
       padding: 0 0.625rem;
       color: var(--theme-caption-color);
-      background-color: var(--theme-button-enabled);
+      background-color: var(--theme-button-default);
       border-color: var(--theme-button-border);
 
       .btn-icon {
@@ -594,7 +594,7 @@
       width: 0.75rem;
       height: 0.75rem;
       color: var(--theme-content-color);
-      background-color: var(--theme-button-enabled);
+      background-color: var(--theme-button-default);
       outline: none;
       border-radius: 50%;
       cursor: pointer;
diff --git a/packages/ui/src/components/calendar/Month.svelte b/packages/ui/src/components/calendar/Month.svelte
index 12a0592784..d583084976 100644
--- a/packages/ui/src/components/calendar/Month.svelte
+++ b/packages/ui/src/components/calendar/Month.svelte
@@ -211,15 +211,15 @@
         border-radius: 50%;
       }
       &.focused {
-        box-shadow: 0 0 0 3px var(--primary-button-outline);
+        box-shadow: 0 0 0 3px var(--accented-button-outline);
       }
       &.selected {
-        color: var(--primary-button-color);
-        background-color: var(--primary-button-enabled);
+        color: var(--accented-button-color);
+        background-color: var(--accented-button-default);
       }
       &:hover {
         color: var(--caption-color);
-        background-color: var(--primary-button-transparent);
+        background-color: var(--accented-button-transparent);
       }
 
       &:before {
diff --git a/packages/ui/src/components/calendar/MonthCalendar.svelte b/packages/ui/src/components/calendar/MonthCalendar.svelte
index c06fbe9d81..e24b1ee05b 100644
--- a/packages/ui/src/components/calendar/MonthCalendar.svelte
+++ b/packages/ui/src/components/calendar/MonthCalendar.svelte
@@ -95,7 +95,7 @@
     cursor: pointer;
   }
   .cell:hover {
-    color: var(--primary-button-color);
+    color: var(--accented-button-color);
     background-color: var(--highlight-hover);
   }
   .weekend {
diff --git a/packages/ui/src/components/calendar/MonthSquare.svelte b/packages/ui/src/components/calendar/MonthSquare.svelte
index cf6bd0fc67..c15135a493 100644
--- a/packages/ui/src/components/calendar/MonthSquare.svelte
+++ b/packages/ui/src/components/calendar/MonthSquare.svelte
@@ -237,7 +237,7 @@
       &.range:not(.wrongMonth),
       &.selected:not(.wrongMonth) {
         color: var(--caption-color);
-        background-color: var(--primary-button-transparent);
+        background-color: var(--accented-button-transparent);
       }
       &.startRow:not(.wrongMonth) {
         border-top-left-radius: 0.25rem;
@@ -275,13 +275,13 @@
         border-radius: 50%;
       }
       &.selected:not(.wrongMonth) {
-        color: var(--primary-button-color);
-        background-color: var(--primary-button-enabled);
+        color: var(--accented-button-color);
+        background-color: var(--accented-button-default);
       }
 
       &:not(.wrongMonth):hover {
         color: var(--caption-color);
-        background-color: var(--primary-button-transparent);
+        background-color: var(--accented-button-transparent);
       }
     }
 
diff --git a/packages/ui/src/components/calendar/RangeDatePopup.svelte b/packages/ui/src/components/calendar/RangeDatePopup.svelte
index 80a7d3e7b3..09240be6f4 100644
--- a/packages/ui/src/components/calendar/RangeDatePopup.svelte
+++ b/packages/ui/src/components/calendar/RangeDatePopup.svelte
@@ -163,7 +163,7 @@
     </div>
   </div>
   <div class="footer">
-    <Button kind={'primary'} label={ui.string.Save} size={'x-large'} on:click={() => closeDP()} />
+    <Button kind={'accented'} label={ui.string.Save} size={'x-large'} on:click={() => closeDP()} />
   </div>
 </div>
 
diff --git a/packages/ui/src/components/calendar/WeekCalendar.svelte b/packages/ui/src/components/calendar/WeekCalendar.svelte
index ceebfc699c..1eac6b34f6 100644
--- a/packages/ui/src/components/calendar/WeekCalendar.svelte
+++ b/packages/ui/src/components/calendar/WeekCalendar.svelte
@@ -100,7 +100,7 @@
     width: calc(calc(100% - 50px) / 7);
   }
   .cell:hover:not(.wrongMonth) {
-    color: var(--primary-button-color);
+    color: var(--accented-button-color);
     background-color: var(--highlight-hover);
   }
 </style>
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index fd5b20c2bc..ee8e4f6d2f 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -116,10 +116,13 @@ export interface TabItem {
 }
 
 export type ButtonKind =
-  | 'primary'
-  | 'secondary'
+  | 'accented'
+  | 'brand'
+  | 'positive'
+  | 'negative'
+  | 'regular'
+  | 'ghost'
   | 'no-border'
-  | 'transparent'
   | 'link'
   | 'link-bordered'
   | 'dangerous'
@@ -203,6 +206,11 @@ export type IconSize =
   | 'x-large'
   | '2x-large'
   | 'full'
+export interface IconProps {
+  icon?: number
+  size?: IconSize
+  fill?: string
+}
 
 export function getIconSize2x (size: IconSize): IconSize {
   switch (size) {
diff --git a/plugins/attachment-resources/src/components/AccordionEditor.svelte b/plugins/attachment-resources/src/components/AccordionEditor.svelte
index 425d1231bd..56f3584d5f 100644
--- a/plugins/attachment-resources/src/components/AccordionEditor.svelte
+++ b/plugins/attachment-resources/src/components/AccordionEditor.svelte
@@ -102,7 +102,7 @@
             />
           {/if}
         </div>
-        <Button size={'medium'} kind={'transparent'} on:click={(ev) => flip(i, ev)}>
+        <Button size={'medium'} kind={'ghost'} on:click={(ev) => flip(i, ev)}>
           <svelte:fragment slot="icon">
             <div class="rotated-icon {item.state}">
               <IconDownOutline size={'medium'} />
diff --git a/plugins/attachment-resources/src/components/AddAttachment.svelte b/plugins/attachment-resources/src/components/AddAttachment.svelte
index 3a3a756f50..bf4eb2832d 100644
--- a/plugins/attachment-resources/src/components/AddAttachment.svelte
+++ b/plugins/attachment-resources/src/components/AddAttachment.svelte
@@ -60,7 +60,7 @@
   {#if $$slots.control}
     <slot name="control" click={openFile} />
   {:else}
-    <Button icon={IconAdd} kind={'transparent'} shape={'circle'} on:click={openFile} />
+    <Button icon={IconAdd} kind={'ghost'} on:click={openFile} />
   {/if}
   <input
     bind:this={inputFile}
diff --git a/plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte b/plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte
index c13cb3200c..58a6ce10ac 100644
--- a/plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte
@@ -180,8 +180,8 @@
     height: 2rem;
     font-weight: 500;
     font-size: 0.625rem;
-    color: var(--primary-button-color);
-    background-color: var(--primary-button-enabled);
+    color: var(--accented-button-color);
+    background-color: var(--accented-button-default);
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 0.5rem;
     cursor: pointer;
diff --git a/plugins/attachment-resources/src/components/AttachmentPresenter.svelte b/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
index 5392f1181e..b1bed5a78d 100644
--- a/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
@@ -168,8 +168,8 @@
       cursor: pointer;
 
       &:not(.image) {
-        color: var(--primary-button-color);
-        background-color: var(--primary-button-enabled);
+        color: var(--accented-button-color);
+        background-color: var(--accented-button-default);
       }
       &.svg {
         background-color: #fff;
@@ -184,7 +184,7 @@
       padding: 0.5rem 0.75rem;
       width: 100%;
       height: 100%;
-      background-color: var(--theme-button-enabled);
+      background-color: var(--theme-button-default);
       border: 1px solid var(--theme-button-border);
       border-left: none;
       border-radius: 0 0.25rem 0.25rem 0;
diff --git a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
index 1c13eec403..28c5d8e6bb 100644
--- a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
@@ -404,7 +404,7 @@
     color: var(--theme-caption-color);
     overflow-x: auto;
     overflow-y: hidden;
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     border: 1px solid var(--theme-button-border);
     border-radius: 0.25rem;
 
diff --git a/plugins/attachment-resources/src/components/Attachments.svelte b/plugins/attachment-resources/src/components/Attachments.svelte
index d7da3c3bc0..7c83b7ff4f 100644
--- a/plugins/attachment-resources/src/components/Attachments.svelte
+++ b/plugins/attachment-resources/src/components/Attachments.svelte
@@ -90,7 +90,7 @@
         {#if loading}
           <Spinner />
         {:else if !readonly}
-          <Button icon={IconAdd} kind={'transparent'} shape={'circle'} on:click={openFile} />
+          <Button icon={IconAdd} kind={'ghost'} on:click={openFile} />
         {/if}
       </div>
     </div>
diff --git a/plugins/attachment-resources/src/components/FileBrowserFilters.svelte b/plugins/attachment-resources/src/components/FileBrowserFilters.svelte
index 21fd4228ca..4bc88cce90 100644
--- a/plugins/attachment-resources/src/components/FileBrowserFilters.svelte
+++ b/plugins/attachment-resources/src/components/FileBrowserFilters.svelte
@@ -35,7 +35,7 @@
     props={{
       items: selectedParticipants,
       label: attachment.string.FileBrowserFilterFrom,
-      kind: 'transparent',
+      kind: 'ghost',
       size: 'medium'
     }}
     on:update={(evt) => {
@@ -46,7 +46,7 @@
     _classes={requestedSpaceClasses}
     label={attachment.string.FileBrowserFilterIn}
     selectedItems={spaceId ? [spaceId] : []}
-    kind={'transparent'}
+    kind={'ghost'}
     size={'medium'}
     on:update={(evt) => {
       selectedSpaces = evt.detail
@@ -56,14 +56,14 @@
     items={dateFileBrowserFilters}
     label={attachment.string.FileBrowserFilterDate}
     bind:selected={selectedDateId}
-    kind={'transparent'}
+    kind={'ghost'}
     size={'medium'}
   />
   <DropdownLabelsIntl
     items={fileTypeFileBrowserFilters}
     label={attachment.string.FileBrowserFilterFileType}
     bind:selected={selectedFileTypeId}
-    kind={'transparent'}
+    kind={'ghost'}
     size={'medium'}
   />
 </div>
diff --git a/plugins/attachment-resources/src/components/Photos.svelte b/plugins/attachment-resources/src/components/Photos.svelte
index 5756468899..f986c14af2 100644
--- a/plugins/attachment-resources/src/components/Photos.svelte
+++ b/plugins/attachment-resources/src/components/Photos.svelte
@@ -108,8 +108,7 @@
     {:else}
       <Button
         icon={IconAdd}
-        kind={'transparent'}
-        shape={'circle'}
+        kind={'ghost'}
         on:click={() => {
           inputFile.click()
         }}
diff --git a/plugins/automation-resources/src/components/AddActionTrigger.svelte b/plugins/automation-resources/src/components/AddActionTrigger.svelte
index 2fffaa8c59..faeb7ce841 100644
--- a/plugins/automation-resources/src/components/AddActionTrigger.svelte
+++ b/plugins/automation-resources/src/components/AddActionTrigger.svelte
@@ -95,7 +95,7 @@
           />
         </div>
       </div>
-      <Button icon={IconAdd} kind="transparent" disabled={!name || !selectedActionMode} on:click={addActionTrigger} />
+      <Button icon={IconAdd} kind="ghost" disabled={!name || !selectedActionMode} on:click={addActionTrigger} />
     </div>
   {/if}
 </div>
diff --git a/plugins/automation-resources/src/components/AddAutomation.svelte b/plugins/automation-resources/src/components/AddAutomation.svelte
index d12074ab0e..779b43f09e 100644
--- a/plugins/automation-resources/src/components/AddAutomation.svelte
+++ b/plugins/automation-resources/src/components/AddAutomation.svelte
@@ -55,7 +55,7 @@
   <Button
     label={presentation.string.Save}
     disabled={!name || !trigger || !commands.length}
-    kind="primary"
+    kind="accented"
     on:click={save}
   />
 </div>
diff --git a/plugins/automation-resources/src/components/AutomationActions.svelte b/plugins/automation-resources/src/components/AutomationActions.svelte
index d776ba283b..2f8a504bb1 100644
--- a/plugins/automation-resources/src/components/AutomationActions.svelte
+++ b/plugins/automation-resources/src/components/AutomationActions.svelte
@@ -71,7 +71,7 @@
       <CommandPresenter value={command} />
       <Button
         icon={IconDelete}
-        kind="transparent"
+        kind="ghost"
         on:click={() => {
           removeCommand(command)
         }}
diff --git a/plugins/automation-resources/src/components/AutomationSettingsElement.svelte b/plugins/automation-resources/src/components/AutomationSettingsElement.svelte
index 808bbce0f0..b58df7f174 100644
--- a/plugins/automation-resources/src/components/AutomationSettingsElement.svelte
+++ b/plugins/automation-resources/src/components/AutomationSettingsElement.svelte
@@ -16,7 +16,7 @@
     <Button
       icon={isAdding ? IconBack : IconAdd}
       label={isAdding ? ui.string.Cancel : automation.string.Automation}
-      kind={isAdding ? 'no-border' : 'primary'}
+      kind={isAdding ? 'no-border' : 'accented'}
       on:click={() => {
         isAdding = !isAdding
       }}
diff --git a/plugins/automation-resources/src/components/AutomationTrigger.svelte b/plugins/automation-resources/src/components/AutomationTrigger.svelte
index 0bfc00bc28..f1136152b7 100644
--- a/plugins/automation-resources/src/components/AutomationTrigger.svelte
+++ b/plugins/automation-resources/src/components/AutomationTrigger.svelte
@@ -22,7 +22,7 @@
   {#if trigger}
     <div class="flex-between">
       <TriggerPresenter value={trigger} />
-      <Button icon={IconDelete} kind="transparent" on:click={clearTrigger} />
+      <Button icon={IconDelete} kind="ghost" on:click={clearTrigger} />
     </div>
   {:else}
     <AddActionTrigger on:trigger on:targetClass />
diff --git a/plugins/automation-resources/src/components/actions/ContentActionCreate.svelte b/plugins/automation-resources/src/components/actions/ContentActionCreate.svelte
index 76886eae12..d281c2fcf8 100644
--- a/plugins/automation-resources/src/components/actions/ContentActionCreate.svelte
+++ b/plugins/automation-resources/src/components/actions/ContentActionCreate.svelte
@@ -52,6 +52,6 @@
         {/if}
       </div>
     </div>
-    <Button icon={IconAdd} kind="transparent" on:click={add} />
+    <Button icon={IconAdd} kind="ghost" on:click={add} />
   </div>
 {/if}
diff --git a/plugins/automation-resources/src/components/selectors/IconChooser.svelte b/plugins/automation-resources/src/components/selectors/IconChooser.svelte
index 32e51a3da2..ba12390a55 100644
--- a/plugins/automation-resources/src/components/selectors/IconChooser.svelte
+++ b/plugins/automation-resources/src/components/selectors/IconChooser.svelte
@@ -47,7 +47,7 @@
         <Button
           icon={obj}
           size="medium"
-          kind={obj === icon ? 'primary' : 'transparent'}
+          kind={obj === icon ? 'accented' : 'ghost'}
           on:click={() => {
             icon = obj
           }}
diff --git a/plugins/bitrix-resources/src/components/mappings/CreateHRApplicationMapping.svelte b/plugins/bitrix-resources/src/components/mappings/CreateHRApplicationMapping.svelte
index 836dab443f..2205099709 100644
--- a/plugins/bitrix-resources/src/components/mappings/CreateHRApplicationMapping.svelte
+++ b/plugins/bitrix-resources/src/components/mappings/CreateHRApplicationMapping.svelte
@@ -177,12 +177,12 @@
               width={'10rem'}
               label={getEmbeddedLabel('Source state')}
               items={sourceStates}
-              kind={m.sourceName !== '' ? 'primary' : 'secondary'}
+              kind={m.sourceName !== '' ? 'accented' : 'regular'}
               bind:selected={m.sourceName}
             /> =>
             <DropdownLabels
               width={'10rem'}
-              kind={m.targetName !== '' ? 'primary' : 'secondary'}
+              kind={m.targetName !== '' ? 'accented' : 'regular'}
               label={getEmbeddedLabel('Final state')}
               items={stateTitles}
               bind:selected={m.targetName}
@@ -190,7 +190,7 @@
             <span class="ml-4"> Done state: </span>
             <DropdownLabels
               width={'10rem'}
-              kind={m.doneState !== '' ? 'primary' : 'secondary'}
+              kind={m.doneState !== '' ? 'accented' : 'regular'}
               label={getEmbeddedLabel('Done state')}
               items={doneStateTitles}
               bind:selected={m.doneState}
diff --git a/plugins/board-resources/src/components/AddPanel.svelte b/plugins/board-resources/src/components/AddPanel.svelte
index a35b95de0d..5a9a191e0b 100644
--- a/plugins/board-resources/src/components/AddPanel.svelte
+++ b/plugins/board-resources/src/components/AddPanel.svelte
@@ -32,7 +32,7 @@
       icon={IconAdd}
       label={board.string.NewList}
       justify={'left'}
-      kind={'transparent'}
+      kind={'ghost'}
       on:click={() => {
         isOpened = true
       }}
diff --git a/plugins/board-resources/src/components/BoardHeader.svelte b/plugins/board-resources/src/components/BoardHeader.svelte
index f3dd39f3a1..0d27dedfae 100644
--- a/plugins/board-resources/src/components/BoardHeader.svelte
+++ b/plugins/board-resources/src/components/BoardHeader.svelte
@@ -48,7 +48,7 @@
         items={viewslist}
         multiselect={false}
         selected={viewlet?._id}
-        kind={'secondary'}
+        kind={'regular'}
         size={'small'}
         on:select={(result) => {
           if (result.detail !== undefined) {
diff --git a/plugins/board-resources/src/components/BoardMenu.svelte b/plugins/board-resources/src/components/BoardMenu.svelte
index 4f530df011..fc0d456eac 100644
--- a/plugins/board-resources/src/components/BoardMenu.svelte
+++ b/plugins/board-resources/src/components/BoardMenu.svelte
@@ -29,7 +29,7 @@
 {#if page}
   <div class="ac-header flex-between w-full divide">
     {#if trace.length}
-      <Button icon={IconBack} kind="transparent" size="x-large" on:click={onBack} />
+      <Button icon={IconBack} kind="ghost" size="x-large" on:click={onBack} />
     {:else}
       <div class="ml-12" />
     {/if}
@@ -38,7 +38,7 @@
     </div>
     <Button
       icon={IconClose}
-      kind="transparent"
+      kind="ghost"
       size="x-large"
       on:click={() => {
         dispatch('close')
diff --git a/plugins/board-resources/src/components/EditCard.svelte b/plugins/board-resources/src/components/EditCard.svelte
index 91a8fae1cd..812c7fb934 100644
--- a/plugins/board-resources/src/components/EditCard.svelte
+++ b/plugins/board-resources/src/components/EditCard.svelte
@@ -135,7 +135,7 @@
     <svelte:fragment slot="tools">
       <Button
         icon={IconMoreH}
-        kind="transparent"
+        kind="ghost"
         size="medium"
         on:click={(e) => {
           showPopup(
diff --git a/plugins/board-resources/src/components/KanbanCard.svelte b/plugins/board-resources/src/components/KanbanCard.svelte
index 57ebd1be79..d990a20bb3 100644
--- a/plugins/board-resources/src/components/KanbanCard.svelte
+++ b/plugins/board-resources/src/components/KanbanCard.svelte
@@ -97,7 +97,7 @@
       {/if}
       {#if !isEditMode}
         <div class="absolute mr-1 mt-1" style:top="0" style:right="0">
-          <Button icon={IconMoreV} kind="transparent" on:click={enterEditMode} />
+          <Button icon={IconMoreV} kind="ghost" on:click={enterEditMode} />
         </div>
       {/if}
       <div
@@ -129,7 +129,7 @@
     {#if object.cover}
       <div class="relative h-9 border-radius-top-1" style={coverBackground}>
         <div class="absolute mr-1 mt-1" style:top="0" style:right="0">
-          <Button icon={IconMoreV} kind="transparent" on:click={enterEditMode} />
+          <Button icon={IconMoreV} kind="ghost" on:click={enterEditMode} />
         </div>
       </div>
     {/if}
@@ -146,7 +146,7 @@
       {/if}
       {#if !isEditMode && !object.cover}
         <div class="absolute mr-1 mt-1" style:top="0" style:right="0">
-          <Button icon={IconMoreV} kind="transparent" on:click={enterEditMode} />
+          <Button icon={IconMoreV} kind="ghost" on:click={enterEditMode} />
         </div>
       {/if}
       <div
diff --git a/plugins/board-resources/src/components/ListHeader.svelte b/plugins/board-resources/src/components/ListHeader.svelte
index 83726d9c34..de3461c561 100644
--- a/plugins/board-resources/src/components/ListHeader.svelte
+++ b/plugins/board-resources/src/components/ListHeader.svelte
@@ -29,7 +29,7 @@
     <div class="flex-between h-full font-medium pr-2 pl-4">
       <span class="lines-limit-2">{state.name}</span>
       <div class="flex">
-        <Button icon={IconMoreV} kind="transparent" on:click={showMenu} />
+        <Button icon={IconMoreV} kind="ghost" on:click={showMenu} />
       </div>
     </div>
   </div>
diff --git a/plugins/board-resources/src/components/add-card/AddCard.svelte b/plugins/board-resources/src/components/add-card/AddCard.svelte
index 67cb4d9554..ef645e51f0 100644
--- a/plugins/board-resources/src/components/add-card/AddCard.svelte
+++ b/plugins/board-resources/src/components/add-card/AddCard.svelte
@@ -121,7 +121,7 @@
     <Button
       icon={IconAdd}
       label={board.string.AddACard}
-      kind="transparent"
+      kind="ghost"
       width={'100%'}
       justify={'left'}
       on:click={onOpen}
diff --git a/plugins/board-resources/src/components/editor/CardChecklist.svelte b/plugins/board-resources/src/components/editor/CardChecklist.svelte
index ecad394e0d..de082ac2f5 100644
--- a/plugins/board-resources/src/components/editor/CardChecklist.svelte
+++ b/plugins/board-resources/src/components/editor/CardChecklist.svelte
@@ -193,15 +193,15 @@
           <Button
             label={hideDoneItems ? board.string.ShowDoneChecklistItems : board.string.HideDoneChecklistItems}
             labelParams={{ done }}
-            kind="transparent"
+            kind="ghost"
             size="small"
             on:click={() => {
               hideDoneItems = !hideDoneItems
             }}
           />
         {/if}
-        <Button icon={IconAdd} kind="transparent" size="small" on:click={startAddingItem} />
-        <Button icon={IconDelete} kind="transparent" size="small" on:click={deleteChecklist} />
+        <Button icon={IconAdd} kind="ghost" size="small" on:click={startAddingItem} />
+        <Button icon={IconDelete} kind="ghost" size="small" on:click={deleteChecklist} />
       {/if}
     </div>
     <div class="flex-row-stretch mb-2 mt-1">
@@ -282,7 +282,7 @@
                 updateItemAssignee(item, e.detail)
               }}
             />
-            <Button icon={IconMoreH} kind="transparent" size="small" on:click={(e) => showItemMenu(item, e)} />
+            <Button icon={IconMoreH} kind="ghost" size="small" on:click={(e) => showItemMenu(item, e)} />
           </div>
         {/if}
       </div>
diff --git a/plugins/board-resources/src/components/popups/CardCoverPicker.svelte b/plugins/board-resources/src/components/popups/CardCoverPicker.svelte
index 74f9f73ae3..82a389d24c 100644
--- a/plugins/board-resources/src/components/popups/CardCoverPicker.svelte
+++ b/plugins/board-resources/src/components/popups/CardCoverPicker.svelte
@@ -100,6 +100,6 @@
     </div>
   </div>
   <svelte:fragment slot="buttons">
-    <Button label={board.string.RemoveCover} kind="transparent" on:click={removeCover} />
+    <Button label={board.string.RemoveCover} kind="ghost" on:click={removeCover} />
   </svelte:fragment>
 </Popup>
diff --git a/plugins/board-resources/src/components/popups/DateRangePicker.svelte b/plugins/board-resources/src/components/popups/DateRangePicker.svelte
index 1223581d34..83cd157218 100644
--- a/plugins/board-resources/src/components/popups/DateRangePicker.svelte
+++ b/plugins/board-resources/src/components/popups/DateRangePicker.svelte
@@ -76,7 +76,7 @@
     <Button
       label={board.string.Save}
       size={'small'}
-      kind={'primary'}
+      kind={'accented'}
       on:click={() => {
         update()
         dispatch('close')
diff --git a/plugins/board-resources/src/components/presenters/ChecklistsPresenter.svelte b/plugins/board-resources/src/components/presenters/ChecklistsPresenter.svelte
index d16ecb470c..610ed618d7 100644
--- a/plugins/board-resources/src/components/presenters/ChecklistsPresenter.svelte
+++ b/plugins/board-resources/src/components/presenters/ChecklistsPresenter.svelte
@@ -36,7 +36,7 @@
     <Icon icon={board.icon.Card} {size} />
     &nbsp;{done}/{total}
     {#if item.dueTo !== null}
-      &nbsp;<DatePresenter value={item.dueTo} size="x-small" iconModifier={getDateIcon(item)} kind="transparent" />
+      &nbsp;<DatePresenter value={item.dueTo} size="x-small" iconModifier={getDateIcon(item)} kind="ghost" />
     {/if}
   </div>
 {/if}
diff --git a/plugins/board-resources/src/components/presenters/DatePresenter.svelte b/plugins/board-resources/src/components/presenters/DatePresenter.svelte
index 5d5986dd74..a7099a7f7f 100644
--- a/plugins/board-resources/src/components/presenters/DatePresenter.svelte
+++ b/plugins/board-resources/src/components/presenters/DatePresenter.svelte
@@ -15,7 +15,7 @@
     <div class="flex-center h-full" on:click>
       <div class="flex-row-center background-button-bg-color pr-1 pl-1 border-radius-1 w-full">
         {#if value.startDate}
-          <DatePresenter bind:value={value.startDate} {size} kind="transparent" />
+          <DatePresenter bind:value={value.startDate} {size} kind="ghost" />
         {/if}
         {#if value.startDate && value.dueDate}-{/if}
         {#if value.dueDate}
@@ -24,7 +24,7 @@
             mode={DateRangeMode.DATETIME}
             iconModifier={isOverdue ? 'overdue' : undefined}
             {size}
-            kind="transparent"
+            kind="ghost"
           />
         {/if}
       </div>
diff --git a/plugins/calendar-resources/src/components/CalendarView.svelte b/plugins/calendar-resources/src/components/CalendarView.svelte
index 2ce37e8b3a..d7351f4ca6 100644
--- a/plugins/calendar-resources/src/components/CalendarView.svelte
+++ b/plugins/calendar-resources/src/components/CalendarView.svelte
@@ -174,21 +174,21 @@
   <div class="flex-row-center gap-2">
     <Button
       icon={IconBack}
-      kind={'transparent'}
+      kind={'ghost'}
       on:click={() => {
         inc(-1)
       }}
     />
     <Button
       label={calendar.string.Today}
-      kind={'transparent'}
+      kind={'ghost'}
       on:click={() => {
         inc(0)
       }}
     />
     <Button
       icon={IconForward}
-      kind={'transparent'}
+      kind={'ghost'}
       on:click={() => {
         inc(1)
       }}
diff --git a/plugins/calendar-resources/src/components/CreateEvent.svelte b/plugins/calendar-resources/src/components/CreateEvent.svelte
index a8ee3572cd..55d494426c 100644
--- a/plugins/calendar-resources/src/components/CreateEvent.svelte
+++ b/plugins/calendar-resources/src/components/CreateEvent.svelte
@@ -104,7 +104,7 @@
       labelNull={ui.string.SelectDate}
       on:change={async (event) => await handleNewStartDate(event.detail)}
       mode={DateRangeMode.DATETIME}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       editable
     />
@@ -114,10 +114,10 @@
       labelNull={calendar.string.DueTo}
       on:change={async (event) => await handleNewDueDate(event.detail)}
       mode={DateRangeMode.DATETIME}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       editable
     />
-    <UserBoxList bind:items={participants} label={calendar.string.Participants} kind={'secondary'} size={'large'} />
+    <UserBoxList bind:items={participants} label={calendar.string.Participants} kind={'regular'} size={'large'} />
   </svelte:fragment>
 </Card>
diff --git a/plugins/calendar-resources/src/components/CreateReminder.svelte b/plugins/calendar-resources/src/components/CreateReminder.svelte
index c815ce0bdf..6347ff3447 100644
--- a/plugins/calendar-resources/src/components/CreateReminder.svelte
+++ b/plugins/calendar-resources/src/components/CreateReminder.svelte
@@ -78,9 +78,9 @@
       mode={DateRangeMode.DATETIME}
       editable={true}
       labelNull={ui.string.SelectDate}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
     />
-    <UserBoxList bind:items={participants} label={calendar.string.Participants} kind={'secondary'} size={'large'} />
+    <UserBoxList bind:items={participants} label={calendar.string.Participants} kind={'regular'} size={'large'} />
   </svelte:fragment>
 </Card>
diff --git a/plugins/calendar-resources/src/components/Day.svelte b/plugins/calendar-resources/src/components/Day.svelte
index 949ba99b60..a32c2257ec 100644
--- a/plugins/calendar-resources/src/components/Day.svelte
+++ b/plugins/calendar-resources/src/components/Day.svelte
@@ -116,13 +116,13 @@
   }
   .today {
     color: var(--caption-color);
-    background-color: var(--primary-button-enabled);
-    border-color: var(--primary-button-focused-border);
+    background-color: var(--accented-button-default);
+    border-color: var(--accented-button-outline);
   }
   .selected:not(.today, .wrongMonth) {
     color: var(--caption-color);
-    background-color: var(--primary-button-disabled);
-    border-color: var(--primary-button-focused-border);
+    background-color: var(--accented-button-disabled);
+    border-color: var(--accented-button-outline);
   }
   .marker {
     position: absolute;
diff --git a/plugins/calendar-resources/src/components/DocReminder.svelte b/plugins/calendar-resources/src/components/DocReminder.svelte
index 235d357565..ec2e1b330a 100644
--- a/plugins/calendar-resources/src/components/DocReminder.svelte
+++ b/plugins/calendar-resources/src/components/DocReminder.svelte
@@ -59,7 +59,7 @@
 
 <Button
   size={'medium'}
-  kind={'transparent'}
+  kind={'ghost'}
   icon={calendar.icon.Reminder}
   showTooltip={{ label: isEvent ? calendar.string.RemindMeAt : calendar.string.Reminders }}
   on:click={(e) => click(e)}
diff --git a/plugins/calendar-resources/src/components/DocRemindersPopup.svelte b/plugins/calendar-resources/src/components/DocRemindersPopup.svelte
index 475a148223..169b685823 100644
--- a/plugins/calendar-resources/src/components/DocRemindersPopup.svelte
+++ b/plugins/calendar-resources/src/components/DocRemindersPopup.svelte
@@ -35,7 +35,7 @@
 <div class="notifyPopup" class:min-w-168={!isMobile}>
   <div class="header flex-between">
     <span class="fs-title overflow-label"><Label label={calendar.string.Reminders} /></span>
-    <Button icon={IconAdd} size={'medium'} kind={'transparent'} on:click={(e) => click(e)} />
+    <Button icon={IconAdd} size={'medium'} kind={'ghost'} on:click={(e) => click(e)} />
   </div>
   <Scroller>
     <div class="px-4 clear-mins">
diff --git a/plugins/calendar-resources/src/components/Events.svelte b/plugins/calendar-resources/src/components/Events.svelte
index 94d1863d90..57335f02d6 100644
--- a/plugins/calendar-resources/src/components/Events.svelte
+++ b/plugins/calendar-resources/src/components/Events.svelte
@@ -127,7 +127,7 @@
         }}
       />
     {/if}
-    <Button icon={IconAdd} label={createLabel} kind={'primary'} on:click={showCreateDialog} />
+    <Button icon={IconAdd} label={createLabel} kind={'accented'} on:click={showCreateDialog} />
   </div>
 </div>
 <div class="ac-header full divide search-start">
diff --git a/plugins/chunter-resources/src/components/ChunterBrowser.svelte b/plugins/chunter-resources/src/components/ChunterBrowser.svelte
index aaa9b84345..39e6fd6260 100644
--- a/plugins/chunter-resources/src/components/ChunterBrowser.svelte
+++ b/plugins/chunter-resources/src/components/ChunterBrowser.svelte
@@ -71,7 +71,7 @@
           <Button
             label={plugin.string.Messages}
             selected={searchType === SearchType.Messages}
-            kind="transparent"
+            kind="ghost"
             on:click={() => {
               searchType = SearchType.Messages
             }}
@@ -80,7 +80,7 @@
         <div class="ml-1 p-1 btn">
           <Button
             label={plugin.string.Channels}
-            kind="transparent"
+            kind="ghost"
             selected={searchType === SearchType.Channels}
             on:click={() => {
               searchType = SearchType.Channels
@@ -90,7 +90,7 @@
         <div class="ml-1 p-1 btn">
           <Button
             label={attachment.string.Files}
-            kind="transparent"
+            kind="ghost"
             selected={searchType === SearchType.Files}
             on:click={() => {
               searchType = SearchType.Files
@@ -99,7 +99,7 @@
         </div>
         <div class="ml-1 p-1 btn">
           <Button
-            kind="transparent"
+            kind="ghost"
             label={contact.string.Contacts}
             selected={searchType === SearchType.Contacts}
             on:click={() => {
diff --git a/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte b/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
index d42b7555a6..d1afef54ab 100644
--- a/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
+++ b/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
@@ -113,6 +113,6 @@
 
 <style lang="scss">
   .editing {
-    border: 1px solid var(--primary-button-focused-border);
+    border: 1px solid var(--accented-button-outline);
   }
 </style>
diff --git a/plugins/contact-resources/src/components/AssigneeBox.svelte b/plugins/contact-resources/src/components/AssigneeBox.svelte
index 495f8672a9..35073ad75f 100644
--- a/plugins/contact-resources/src/components/AssigneeBox.svelte
+++ b/plugins/contact-resources/src/components/AssigneeBox.svelte
@@ -57,7 +57,7 @@
   export let readonly = false
   export let kind: ButtonKind = 'no-border'
   export let size: ButtonSize = 'small'
-  export let avatarSize: IconSize = kind === 'secondary' ? 'small' : 'card'
+  export let avatarSize: IconSize = kind === 'regular' ? 'small' : 'card'
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = undefined
   export let focusIndex = -1
diff --git a/plugins/contact-resources/src/components/ChannelEditor.svelte b/plugins/contact-resources/src/components/ChannelEditor.svelte
index 91f3c9dd55..313717d6db 100644
--- a/plugins/contact-resources/src/components/ChannelEditor.svelte
+++ b/plugins/contact-resources/src/components/ChannelEditor.svelte
@@ -110,7 +110,7 @@
     </div>
     <Button
       focusIndex={2}
-      kind={'transparent'}
+      kind={'ghost'}
       size={'small'}
       icon={IconClose}
       disabled={value === ''}
@@ -124,7 +124,7 @@
     <Button
       id="channel-ok"
       focusIndex={3}
-      kind={'transparent'}
+      kind={'ghost'}
       size={'small'}
       icon={IconBlueCheck}
       on:click={() => {
@@ -134,7 +134,7 @@
     {#if openable}
       <Button
         focusIndex={4}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         icon={IconArrowRight}
         on:click={() => {
@@ -161,7 +161,7 @@
     >
     <Button
       focusIndex={3}
-      kind={'transparent'}
+      kind={'ghost'}
       size={'small'}
       icon={IconCopy}
       on:mousemove={() => {
@@ -183,7 +183,7 @@
     {#if openable}
       <Button
         focusIndex={5}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         icon={IconArrowRight}
         on:click={() => {
diff --git a/plugins/contact-resources/src/components/Contacts.svelte b/plugins/contact-resources/src/components/Contacts.svelte
index 2c2d68c071..f6a5df62cd 100644
--- a/plugins/contact-resources/src/components/Contacts.svelte
+++ b/plugins/contact-resources/src/components/Contacts.svelte
@@ -91,7 +91,7 @@
     <div class="mb-1 clear-mins">
       <Button
         label={contact.string.ContactCreateLabel}
-        kind={'primary'}
+        kind={'accented'}
         size={'medium'}
         on:click={(ev) => showCreateDialog(ev)}
       />
diff --git a/plugins/contact-resources/src/components/CreateEmployee.svelte b/plugins/contact-resources/src/components/CreateEmployee.svelte
index 101ae9eeac..d167d1f4e2 100644
--- a/plugins/contact-resources/src/components/CreateEmployee.svelte
+++ b/plugins/contact-resources/src/components/CreateEmployee.svelte
@@ -168,7 +168,7 @@
     <ChannelsDropdown
       bind:value={channels}
       focusIndex={10}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       editable
       restricted={[contact.channelProvider.Email]}
diff --git a/plugins/contact-resources/src/components/CreateMember.svelte b/plugins/contact-resources/src/components/CreateMember.svelte
index 4e9d07a8a8..df91b689d7 100644
--- a/plugins/contact-resources/src/components/CreateMember.svelte
+++ b/plugins/contact-resources/src/components/CreateMember.svelte
@@ -59,7 +59,7 @@
 >
   <div class="flex-row-center clear-mins">
     <!-- <div class="mr-3">
-      <Button focusIndex={1} icon={Vacancy} size={'medium'} kind={'link-bordered'} disabled />
+      <Button focusIndex={1} icon={Vacancy} size={'medium'} kind={'link-bordered'} />
     </div>    -->
   </div>
   <svelte:fragment slot="pool">
diff --git a/plugins/contact-resources/src/components/CreateOrganization.svelte b/plugins/contact-resources/src/components/CreateOrganization.svelte
index 0f21ef20fc..31930b4a61 100644
--- a/plugins/contact-resources/src/components/CreateOrganization.svelte
+++ b/plugins/contact-resources/src/components/CreateOrganization.svelte
@@ -88,7 +88,7 @@
 >
   <div class="flex-row-center clear-mins">
     <div class="mr-3">
-      <Button icon={Company} size={'medium'} kind={'link-bordered'} disabled />
+      <Button icon={Company} size={'medium'} kind={'link-bordered'} noFocus />
     </div>
     <EditBox
       placeholder={contact.string.OrganizationNamePlaceholder}
@@ -102,7 +102,7 @@
     <ChannelsDropdown
       bind:value={channels}
       focusIndex={10}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       editable
       highlighted={matchedChannels.map((it) => it.provider)}
diff --git a/plugins/contact-resources/src/components/CreatePerson.svelte b/plugins/contact-resources/src/components/CreatePerson.svelte
index 29a7db7bb5..ac934540a4 100644
--- a/plugins/contact-resources/src/components/CreatePerson.svelte
+++ b/plugins/contact-resources/src/components/CreatePerson.svelte
@@ -119,6 +119,6 @@
     </div>
   </div>
   <svelte:fragment slot="pool">
-    <ChannelsDropdown bind:value={channels} focusIndex={10} kind={'secondary'} size={'large'} editable />
+    <ChannelsDropdown bind:value={channels} focusIndex={10} kind={'regular'} size={'large'} editable />
   </svelte:fragment>
 </Card>
diff --git a/plugins/contact-resources/src/components/EditAvatarPopup.svelte b/plugins/contact-resources/src/components/EditAvatarPopup.svelte
index 390c1c6a8f..038654b87a 100644
--- a/plugins/contact-resources/src/components/EditAvatarPopup.svelte
+++ b/plugins/contact-resources/src/components/EditAvatarPopup.svelte
@@ -66,7 +66,7 @@
       <Cropper bind:this={cropper} image={file} />
     </div>
     <div class="footer">
-      <Button label={presentation.string.Save} kind={'primary'} size={'large'} on:click={onCrop} />
+      <Button label={presentation.string.Save} kind={'accented'} size={'large'} on:click={onCrop} />
       <div class="mx-3 clear-mins">
         <Button label={presentation.string.Change} size={'large'} on:click={selectAnother} />
       </div>
diff --git a/plugins/contact-resources/src/components/EditOrganization.svelte b/plugins/contact-resources/src/components/EditOrganization.svelte
index 362f29adf6..69f4d6f543 100644
--- a/plugins/contact-resources/src/components/EditOrganization.svelte
+++ b/plugins/contact-resources/src/components/EditOrganization.svelte
@@ -76,8 +76,8 @@
   .logo {
     width: 5rem;
     height: 5rem;
-    color: var(--primary-button-color);
-    background-color: var(--primary-button-enabled);
+    color: var(--accented-button-color);
+    background-color: var(--accented-button-default);
     border-radius: 50%;
   }
   .name {
diff --git a/plugins/contact-resources/src/components/EmployeeRefPresenter.svelte b/plugins/contact-resources/src/components/EmployeeRefPresenter.svelte
index 6474e360bd..654dbae920 100644
--- a/plugins/contact-resources/src/components/EmployeeRefPresenter.svelte
+++ b/plugins/contact-resources/src/components/EmployeeRefPresenter.svelte
@@ -13,7 +13,7 @@
   export let accent: boolean = false
   export let inline: boolean = false
   export let shouldShowName: boolean = true
-  export let avatarSize: IconSize = kind === 'secondary' ? 'small' : 'card'
+  export let avatarSize: IconSize = kind === 'regular' ? 'small' : 'card'
 </script>
 
 {#if Array.isArray(value)}
diff --git a/plugins/contact-resources/src/components/Members.svelte b/plugins/contact-resources/src/components/Members.svelte
index ced0d72911..6d1e2d8dcc 100644
--- a/plugins/contact-resources/src/components/Members.svelte
+++ b/plugins/contact-resources/src/components/Members.svelte
@@ -111,8 +111,8 @@
       <Label label={contact.string.Members} />
     </span>
     <div class="buttons-group xsmall-gap">
-      <ViewletSettingButton bind:viewOptions viewlet={descr} />
-      <Button id={contact.string.AddMember} icon={IconAdd} kind={'transparent'} shape={'circle'} on:click={createApp} />
+      <ViewletSettingButton bind:viewOptions viewlet={descr} kind={'ghost'} />
+      <Button id={contact.string.AddMember} icon={IconAdd} kind={'ghost'} on:click={createApp} />
     </div>
   </div>
   {#if members > 0 && descr}
diff --git a/plugins/contact-resources/src/components/PersonContent.svelte b/plugins/contact-resources/src/components/PersonContent.svelte
index 363decb5ee..54e5b53535 100644
--- a/plugins/contact-resources/src/components/PersonContent.svelte
+++ b/plugins/contact-resources/src/components/PersonContent.svelte
@@ -166,7 +166,7 @@
     padding: 0.125rem 0.25rem;
     font-size: 0.75rem;
     color: var(--theme-content-color);
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     border-radius: 0.25rem;
   }
 </style>
diff --git a/plugins/contact-resources/src/components/UserBoxItems.svelte b/plugins/contact-resources/src/components/UserBoxItems.svelte
index 03d75a348f..b909a252e3 100644
--- a/plugins/contact-resources/src/components/UserBoxItems.svelte
+++ b/plugins/contact-resources/src/components/UserBoxItems.svelte
@@ -115,7 +115,7 @@
     align-items: center;
     margin: 0 0.5rem 0.5rem 0;
     padding: 0.375rem 0.625rem 0.375rem 0.5rem;
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     border: 1px solid var(--theme-button-border);
     border-radius: 0.25rem;
   }
diff --git a/plugins/document-resources/src/components/CreateDocument.svelte b/plugins/document-resources/src/components/CreateDocument.svelte
index de368dba26..c42dba296d 100644
--- a/plugins/document-resources/src/components/CreateDocument.svelte
+++ b/plugins/document-resources/src/components/CreateDocument.svelte
@@ -108,7 +108,7 @@
 >
   <div class="flex-row-center clear-mins">
     <div class="mr-3">
-      <Button icon={document.icon.Document} size={'medium'} kind={'link-bordered'} disabled />
+      <Button icon={document.icon.Document} size={'medium'} kind={'link-bordered'} noFocus />
     </div>
     <EditBox
       placeholder={document.string.DocumentNamePlaceholder}
@@ -123,7 +123,7 @@
       items={object.authors}
       label={document.string.Authors}
       emptyLabel={document.string.Authors}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       width={'min-content'}
       on:update={({ detail }) => (object.authors = detail)}
@@ -132,7 +132,7 @@
       items={object.approvers}
       label={document.string.Approvers}
       emptyLabel={document.string.Approvers}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       width={'min-content'}
       on:update={({ detail }) => (object.approvers = detail)}
@@ -141,7 +141,7 @@
       items={object.reviewers}
       label={document.string.Reviewers}
       emptyLabel={document.string.Reviewers}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       width={'min-content'}
       on:update={({ detail }) => (object.reviewers = detail)}
diff --git a/plugins/document-resources/src/components/EditDoc.svelte b/plugins/document-resources/src/components/EditDoc.svelte
index 7589db48f1..9725165249 100644
--- a/plugins/document-resources/src/components/EditDoc.svelte
+++ b/plugins/document-resources/src/components/EditDoc.svelte
@@ -493,7 +493,7 @@
           />
         {/if}
       {/if}
-      <Button icon={IconMoreH} kind={'transparent'} size={'medium'} on:click={showMenu} />
+      <Button icon={IconMoreH} kind={'ghost'} size={'medium'} on:click={showMenu} />
     </svelte:fragment>
 
     <div class="description-preview select-text mt-2 emphasized">
@@ -574,8 +574,8 @@
     transition: border-color 0.1s var(--timing-main), box-shadow 0.1s var(--timing-main);
 
     &:focus-within {
-      border-color: var(--primary-button-focused-border);
-      box-shadow: 0 0 0 3px var(--primary-button-outline);
+      border-color: var(--accented-button-focused-border);
+      box-shadow: 0 0 0 3px var(--accented-button-outline);
     }
   }
 </style>
diff --git a/plugins/document-resources/src/components/NewDocumentHeader.svelte b/plugins/document-resources/src/components/NewDocumentHeader.svelte
index 63f8ae2578..7bc2263e1b 100644
--- a/plugins/document-resources/src/components/NewDocumentHeader.svelte
+++ b/plugins/document-resources/src/components/NewDocumentHeader.svelte
@@ -28,7 +28,7 @@
     label={document.string.CreateDocument}
     justify={'left'}
     width={'100%'}
-    kind={'primary'}
+    kind={'accented'}
     size={'large'}
     on:click={newDocument}
   />
diff --git a/plugins/gmail-resources/src/components/Chats.svelte b/plugins/gmail-resources/src/components/Chats.svelte
index b43496bf2c..8cf83a1b10 100644
--- a/plugins/gmail-resources/src/components/Chats.svelte
+++ b/plugins/gmail-resources/src/components/Chats.svelte
@@ -91,7 +91,7 @@
           <Button
             label={gmail.string.PublishSelected}
             size={'small'}
-            kind={'primary'}
+            kind={'accented'}
             disabled={!selected.size}
             on:click={share}
           />
@@ -102,7 +102,7 @@
         <Button
           label={gmail.string.CreateMessage}
           size={'small'}
-          kind={'primary'}
+          kind={'accented'}
           on:click={() => {
             newMessage = true
           }}
@@ -110,7 +110,7 @@
       {/if}
       <Button
         icon={IconShare}
-        kind={'transparent'}
+        kind={'ghost'}
         showTooltip={{ label: gmail.string.ShareMessages }}
         on:click={async () => {
           selectable = !selectable
diff --git a/plugins/gmail-resources/src/components/Configure.svelte b/plugins/gmail-resources/src/components/Configure.svelte
index aebc3359f0..e65d44be8a 100644
--- a/plugins/gmail-resources/src/components/Configure.svelte
+++ b/plugins/gmail-resources/src/components/Configure.svelte
@@ -66,7 +66,7 @@
           <Label label={gmail.string.AvailableTo} />
         </div>
         <AccountArrayEditor
-          kind={'secondary'}
+          kind={'regular'}
           label={gmail.string.AvailableTo}
           excludeItems={[me]}
           value={integration.shared ?? []}
diff --git a/plugins/gmail-resources/src/components/Connect.svelte b/plugins/gmail-resources/src/components/Connect.svelte
index bc848b6d1a..34b053129b 100644
--- a/plugins/gmail-resources/src/components/Connect.svelte
+++ b/plugins/gmail-resources/src/components/Connect.svelte
@@ -62,7 +62,7 @@
   <div class="content">
     <Label label={gmail.string.RedirectGoogle} />
     <div class="footer">
-      <Button label={gmail.string.Connect} kind={'primary'} disabled={connecting} on:click={sendRequest} />
+      <Button label={gmail.string.Connect} kind={'accented'} disabled={connecting} on:click={sendRequest} />
     </div>
   </div>
 </div>
diff --git a/plugins/gmail-resources/src/components/FullMessage.svelte b/plugins/gmail-resources/src/components/FullMessage.svelte
index f5fa7460e8..2b272d205f 100644
--- a/plugins/gmail-resources/src/components/FullMessage.svelte
+++ b/plugins/gmail-resources/src/components/FullMessage.svelte
@@ -54,7 +54,7 @@
     <div class="flex-row-center clear-mins">
       <Button
         icon={IconArrowLeft}
-        kind={'transparent'}
+        kind={'ghost'}
         on:click={() => {
           dispatch('close')
         }}
@@ -73,7 +73,7 @@
       <Button
         label={gmail.string.Reply}
         size={'small'}
-        kind={'primary'}
+        kind={'accented'}
         on:click={() => {
           newMessage = true
         }}
diff --git a/plugins/gmail-resources/src/components/Main.svelte b/plugins/gmail-resources/src/components/Main.svelte
index a4055cb381..d052445b26 100644
--- a/plugins/gmail-resources/src/components/Main.svelte
+++ b/plugins/gmail-resources/src/components/Main.svelte
@@ -118,7 +118,7 @@
       {#if integrations.length === 0}
         <Button
           label={gmail.string.Connect}
-          kind={'primary'}
+          kind={'accented'}
           on:click={(e) => {
             showPopup(Connect, {}, eventToHTMLElement(e))
           }}
diff --git a/plugins/gmail-resources/src/components/Message.svelte b/plugins/gmail-resources/src/components/Message.svelte
index 94bd0b0d61..a65abae096 100644
--- a/plugins/gmail-resources/src/components/Message.svelte
+++ b/plugins/gmail-resources/src/components/Message.svelte
@@ -57,7 +57,7 @@
     </div>
   </div>
   {#if selectable}
-    <div class="ml-4"><CheckBox circle primary bind:checked={selected} /></div>
+    <div class="ml-4"><CheckBox circle accented bind:checked={selected} /></div>
   {/if}
 </div>
 
@@ -77,7 +77,7 @@
     flex-grow: 1;
 
     &.selected {
-      background-color: var(--primary-button-enabled);
+      background-color: var(--accented-button-default);
     }
   }
 </style>
diff --git a/plugins/gmail-resources/src/components/NewMessage.svelte b/plugins/gmail-resources/src/components/NewMessage.svelte
index ddf7929f28..9159ac0fee 100644
--- a/plugins/gmail-resources/src/components/NewMessage.svelte
+++ b/plugins/gmail-resources/src/components/NewMessage.svelte
@@ -172,7 +172,7 @@
     <div class="buttons-group">
       <Button
         icon={IconArrowLeft}
-        kind={'transparent'}
+        kind={'ghost'}
         on:click={() => {
           dispatch('close')
         }}
@@ -185,12 +185,12 @@
     <div class="buttons-group small-gap">
       <Button
         icon={IconAttachment}
-        kind={'transparent'}
+        kind={'ghost'}
         on:click={() => {
           inputFile.click()
         }}
       />
-      <Button label={plugin.string.Send} size={'small'} kind={'primary'} on:click={sendMsg} />
+      <Button label={plugin.string.Send} size={'small'} kind={'accented'} on:click={sendMsg} />
     </div>
   </div>
 </div>
diff --git a/plugins/gmail-resources/src/components/NewMessages.svelte b/plugins/gmail-resources/src/components/NewMessages.svelte
index 7fe3175def..c25cc0dd8f 100644
--- a/plugins/gmail-resources/src/components/NewMessages.svelte
+++ b/plugins/gmail-resources/src/components/NewMessages.svelte
@@ -248,7 +248,7 @@
     {#if integrations.length === 0}
       <Button
         label={plugin.string.Connect}
-        kind={'primary'}
+        kind={'accented'}
         on:click={(e) => {
           showPopup(Connect, {}, eventToHTMLElement(e))
         }}
@@ -287,7 +287,7 @@
       <div class="buttons-group small-gap">
         <Button
           icon={IconAttachment}
-          kind={'transparent'}
+          kind={'ghost'}
           disabled={channels.length === 0}
           on:click={() => {
             inputFile.click()
@@ -297,7 +297,7 @@
           <Button
             label={plugin.string.Send}
             size={'small'}
-            kind={'primary'}
+            kind={'accented'}
             disabled={channels.length === 0}
             on:click={sendMsg}
           />
diff --git a/plugins/hr-resources/src/components/CreateDepartment.svelte b/plugins/hr-resources/src/components/CreateDepartment.svelte
index 9d792ccace..b58242fd84 100644
--- a/plugins/hr-resources/src/components/CreateDepartment.svelte
+++ b/plugins/hr-resources/src/components/CreateDepartment.svelte
@@ -62,7 +62,7 @@
 >
   <div class="flex-row-center clear-mins">
     <div class="mr-3">
-      <Button focusIndex={1} icon={hr.icon.Department} size={'medium'} kind={'link-bordered'} disabled />
+      <Button focusIndex={1} icon={hr.icon.Department} size={'medium'} kind={'link-bordered'} noFocus />
     </div>
     <div class="clear-mins flex-grow">
       <EditBox
@@ -79,7 +79,7 @@
       _class={hr.class.Department}
       label={hr.string.ParentDepartmentLabel}
       bind:space
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
     />
   </svelte:fragment>
@@ -88,7 +88,7 @@
       focusIndex={3}
       label={hr.string.TeamLead}
       placeholder={hr.string.TeamLead}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       bind:value={lead}
       allowDeselect
diff --git a/plugins/hr-resources/src/components/CreateRequest.svelte b/plugins/hr-resources/src/components/CreateRequest.svelte
index dd3c55da5b..30dd75e315 100644
--- a/plugins/hr-resources/src/components/CreateRequest.svelte
+++ b/plugins/hr-resources/src/components/CreateRequest.svelte
@@ -123,7 +123,7 @@
     <EmployeeBox
       label={hr.string.SelectEmployee}
       placeholder={hr.string.SelectEmployee}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       bind:value={employee}
       {readonly}
@@ -150,12 +150,12 @@
     placeholder={core.string.Description}
   />
   <svelte:fragment slot="pool">
-    <DateRangePresenter bind:value editable labelNull={ui.string.SelectDate} kind={'secondary'} size={'large'} />
+    <DateRangePresenter bind:value editable labelNull={ui.string.SelectDate} kind={'regular'} size={'large'} />
     <DateRangePresenter
       bind:value={dueDate}
       labelNull={calendar.string.DueTo}
       editable
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
     />
   </svelte:fragment>
diff --git a/plugins/hr-resources/src/components/DepartmentCard.svelte b/plugins/hr-resources/src/components/DepartmentCard.svelte
index a4c0b1e21a..357fdf6680 100644
--- a/plugins/hr-resources/src/components/DepartmentCard.svelte
+++ b/plugins/hr-resources/src/components/DepartmentCard.svelte
@@ -163,7 +163,7 @@
 
 <style lang="scss">
   .container {
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     border: 1px solid var(--theme-button-border);
     border-radius: 0.5rem;
 
@@ -172,7 +172,7 @@
       cursor: pointer;
     }
     &.dragging {
-      border-color: var(--primary-button-focused-border);
+      border-color: var(--accented-button-outline);
     }
   }
 </style>
diff --git a/plugins/hr-resources/src/components/DepartmentStaff.svelte b/plugins/hr-resources/src/components/DepartmentStaff.svelte
index 7e7f14c089..49b9da4d4f 100644
--- a/plugins/hr-resources/src/components/DepartmentStaff.svelte
+++ b/plugins/hr-resources/src/components/DepartmentStaff.svelte
@@ -108,9 +108,9 @@
     <span class="antiSection-header__title">
       <Label label={hr.string.Members} />
     </span>
-    <div class="buttons-group xsmall-gap">
-      <ViewletSettingButton bind:viewOptions viewlet={descr} />
-      <Button id={hr.string.AddEmployee} icon={IconAdd} kind={'transparent'} shape={'circle'} on:click={add} />
+    <div class="flex-row-center gap-2 reverse">
+      <ViewletSettingButton bind:viewOptions viewlet={descr} kind={'ghost'} />
+      <Button id={hr.string.AddEmployee} icon={IconAdd} kind={'ghost'} on:click={add} />
     </div>
   </div>
   {#if (value?.members.length ?? 0) > 0}
diff --git a/plugins/hr-resources/src/components/Schedule.svelte b/plugins/hr-resources/src/components/Schedule.svelte
index 5c5fbcd0ac..0291d9e2cc 100644
--- a/plugins/hr-resources/src/components/Schedule.svelte
+++ b/plugins/hr-resources/src/components/Schedule.svelte
@@ -124,7 +124,7 @@
       label={hr.string.Department}
       bind:space={department}
       size={'medium'}
-      kind={'secondary'}
+      kind={'regular'}
     />
   </div>
 </div>
@@ -142,21 +142,21 @@
   <div class="ac-header-full small-gap">
     <Button
       icon={IconBack}
-      kind={'transparent'}
+      kind={'ghost'}
       on:click={() => {
         inc(-1)
       }}
     />
     <Button
       label={calendar.string.Today}
-      kind={'transparent'}
+      kind={'ghost'}
       on:click={() => {
         currentDate = new Date()
       }}
     />
     <Button
       icon={IconForward}
-      kind={'transparent'}
+      kind={'ghost'}
       on:click={() => {
         inc(1)
       }}
diff --git a/plugins/hr-resources/src/components/Structure.svelte b/plugins/hr-resources/src/components/Structure.svelte
index 7098084d7c..42f43281d0 100644
--- a/plugins/hr-resources/src/components/Structure.svelte
+++ b/plugins/hr-resources/src/components/Structure.svelte
@@ -85,7 +85,7 @@
   </div>
 
   <div class="mb-1 clear-mins">
-    <Button icon={IconAdd} label={hr.string.CreateDepartmentLabel} kind={'primary'} on:click={showCreateDialog} />
+    <Button icon={IconAdd} label={hr.string.CreateDepartmentLabel} kind={'accented'} on:click={showCreateDialog} />
   </div>
 </div>
 <div class="ac-header full divide search-start">
diff --git a/plugins/hr-resources/src/components/schedule/CreatePublicHoliday.svelte b/plugins/hr-resources/src/components/schedule/CreatePublicHoliday.svelte
index 5db4f1fc4b..c800c89205 100644
--- a/plugins/hr-resources/src/components/schedule/CreatePublicHoliday.svelte
+++ b/plugins/hr-resources/src/components/schedule/CreatePublicHoliday.svelte
@@ -86,7 +86,7 @@
   </svelte:fragment>
   <svelte:fragment slot="buttons">
     {#if existingHoliday}
-      <Button label={presentation.string.Remove} kind="transparent" on:click={() => deleteHoliday()} />
+      <Button label={presentation.string.Remove} kind="ghost" on:click={() => deleteHoliday()} />
     {/if}
   </svelte:fragment>
 </Card>
diff --git a/plugins/hr-resources/src/components/schedule/YearView.svelte b/plugins/hr-resources/src/components/schedule/YearView.svelte
index cdd5ef2dd5..1875d2691e 100644
--- a/plugins/hr-resources/src/components/schedule/YearView.svelte
+++ b/plugins/hr-resources/src/components/schedule/YearView.svelte
@@ -205,7 +205,7 @@
       border: none;
       color: var(--caption-color);
       &.today {
-        background-color: var(--primary-button-disabled);
+        background-color: var(--accented-button-disabled);
       }
       &.summary {
         font-weight: 600;
diff --git a/plugins/inventory-resources/src/components/Categories.svelte b/plugins/inventory-resources/src/components/Categories.svelte
index d2179f2a1f..e6c8adb8da 100644
--- a/plugins/inventory-resources/src/components/Categories.svelte
+++ b/plugins/inventory-resources/src/components/Categories.svelte
@@ -42,7 +42,7 @@
   </div>
 
   <div class="mb-1 clear-mins">
-    <Button icon={IconAdd} label={inventory.string.CategoryCreateLabel} kind={'primary'} on:click={showCreateDialog} />
+    <Button icon={IconAdd} label={inventory.string.CategoryCreateLabel} kind={'accented'} on:click={showCreateDialog} />
   </div>
 </div>
 <div class="ac-header full divide search-start">
diff --git a/plugins/inventory-resources/src/components/CreateCategory.svelte b/plugins/inventory-resources/src/components/CreateCategory.svelte
index f27bae41a5..5bacebfb03 100644
--- a/plugins/inventory-resources/src/components/CreateCategory.svelte
+++ b/plugins/inventory-resources/src/components/CreateCategory.svelte
@@ -67,7 +67,7 @@
   <StatusControl slot="error" {status} />
   <div class="flex-row-center clear-mins">
     <div class="mr-3">
-      <Button focusIndex={1} icon={inventory.icon.Categories} size={'medium'} kind={'link-bordered'} disabled />
+      <Button focusIndex={1} icon={inventory.icon.Categories} size={'medium'} kind={'link-bordered'} noFocus />
     </div>
     <EditBox bind:value={name} placeholder={inventory.string.Category} kind={'large-style'} autoFocus />
   </div>
diff --git a/plugins/inventory-resources/src/components/CreateProduct.svelte b/plugins/inventory-resources/src/components/CreateProduct.svelte
index 859a067ca7..219ce7237f 100644
--- a/plugins/inventory-resources/src/components/CreateProduct.svelte
+++ b/plugins/inventory-resources/src/components/CreateProduct.svelte
@@ -78,14 +78,14 @@
 >
   <div class="flex-row-center clear-mins">
     <div class="mr-3">
-      <Button focusIndex={1} icon={inventory.icon.Products} size={'medium'} kind={'link-bordered'} disabled />
+      <Button focusIndex={1} icon={inventory.icon.Products} size={'medium'} kind={'link-bordered'} noFocus />
     </div>
     <EditBox bind:value={doc.name} placeholder={inventory.string.Product} kind={'large-style'} autoFocus />
   </div>
   <svelte:fragment slot="pool">
     <DropdownLabels
       items={categories}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       bind:selected={doc.attachedTo}
       placeholder={inventory.string.Categories}
diff --git a/plugins/inventory-resources/src/components/Variants.svelte b/plugins/inventory-resources/src/components/Variants.svelte
index a6b2bed58b..ab479a7a6b 100644
--- a/plugins/inventory-resources/src/components/Variants.svelte
+++ b/plugins/inventory-resources/src/components/Variants.svelte
@@ -33,7 +33,7 @@
     <span class="antiSection-header__title">
       <Label label={inventory.string.Variants} />
     </span>
-    <Button icon={IconAdd} kind={'transparent'} shape={'circle'} on:click={create} />
+    <Button icon={IconAdd} kind={'ghost'} on:click={create} />
   </div>
   {#if variants > 0}
     <Table
diff --git a/plugins/lead-resources/src/components/CreateCustomer.svelte b/plugins/lead-resources/src/components/CreateCustomer.svelte
index 0c3c53056e..68c898d883 100644
--- a/plugins/lead-resources/src/components/CreateCustomer.svelte
+++ b/plugins/lead-resources/src/components/CreateCustomer.svelte
@@ -199,7 +199,7 @@
   {:else}
     <div class="flex-row-center clear-mins">
       <div class="mr-3">
-        <Button icon={contact.icon.Company} size={'medium'} kind={'link-bordered'} disabled />
+        <Button icon={contact.icon.Company} size={'medium'} kind={'link-bordered'} noFocus />
       </div>
       <EditBox
         placeholder={contact.string.OrganizationNamePlaceholder}
@@ -214,7 +214,7 @@
     <ChannelsDropdown
       bind:value={channels}
       focusIndex={10}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       editable
       highlighted={matchedChannels.map((it) => it.provider)}
diff --git a/plugins/lead-resources/src/components/CreateLead.svelte b/plugins/lead-resources/src/components/CreateLead.svelte
index 9a21b43567..53f88c5c7f 100644
--- a/plugins/lead-resources/src/components/CreateLead.svelte
+++ b/plugins/lead-resources/src/components/CreateLead.svelte
@@ -114,7 +114,7 @@
     <SpaceSelector
       _class={lead.class.Funnel}
       label={lead.string.FunnelName}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       bind:space={_space}
       create={{
@@ -134,7 +134,7 @@
           label={lead.string.Leads}
           placeholder={lead.string.Leads}
           bind:value={customer}
-          kind={'secondary'}
+          kind={'regular'}
           size={'large'}
         />
       {/if}
@@ -145,7 +145,7 @@
   <StatusControl slot="error" {status} />
   <div class="flex-row-center clear-mins">
     <div class="mr-3">
-      <Button focusIndex={1} icon={lead.icon.Lead} size={'medium'} kind={'link-bordered'} disabled />
+      <Button focusIndex={1} icon={lead.icon.Lead} size={'medium'} kind={'link-bordered'} noFocus />
     </div>
     <EditBox
       focusIndex={1}
@@ -164,7 +164,7 @@
         label={lead.string.Customer}
         placeholder={lead.string.SelectCustomer}
         bind:value={customer}
-        kind={'secondary'}
+        kind={'regular'}
         size={'large'}
         create={{ component: lead.component.CreateCustomer, label: lead.string.CreateCustomer }}
       />
diff --git a/plugins/lead-resources/src/components/Leads.svelte b/plugins/lead-resources/src/components/Leads.svelte
index 5ad6b0875c..6977e74c20 100644
--- a/plugins/lead-resources/src/components/Leads.svelte
+++ b/plugins/lead-resources/src/components/Leads.svelte
@@ -35,7 +35,7 @@
     <span class="antiSection-header__title">
       <Label label={lead.string.Leads} />
     </span>
-    <Button icon={IconAdd} kind={'transparent'} shape={'circle'} on:click={createLead} />
+    <Button icon={IconAdd} kind={'ghost'} on:click={createLead} />
   </div>
   {#if leads !== undefined && leads > 0}
     {#if wSection < 640}
diff --git a/plugins/lead-resources/src/components/MyLeads.svelte b/plugins/lead-resources/src/components/MyLeads.svelte
index 66875e8b86..636aa5cc4b 100644
--- a/plugins/lead-resources/src/components/MyLeads.svelte
+++ b/plugins/lead-resources/src/components/MyLeads.svelte
@@ -120,7 +120,7 @@
 </script>
 
 <div
-  class="ac-header full divide"
+  class="ac-header short divide caption-height"
   class:header-with-mode-selector={modeSelectorProps !== undefined}
   class:header-without-label={!labelTasks}
 >
diff --git a/plugins/lead-resources/src/components/NewItemsHeader.svelte b/plugins/lead-resources/src/components/NewItemsHeader.svelte
index b6dfe5e273..e0500adc0c 100644
--- a/plugins/lead-resources/src/components/NewItemsHeader.svelte
+++ b/plugins/lead-resources/src/components/NewItemsHeader.svelte
@@ -28,7 +28,7 @@
     label={lead.string.CreateCustomerLabel}
     justify={'left'}
     width={'100%'}
-    kind={'primary'}
+    kind={'accented'}
     size={'large'}
     on:click={newIssue}
   />
diff --git a/plugins/login-resources/src/components/InviteLink.svelte b/plugins/login-resources/src/components/InviteLink.svelte
index c5b782f6d6..bd0db34180 100644
--- a/plugins/login-resources/src/components/InviteLink.svelte
+++ b/plugins/login-resources/src/components/InviteLink.svelte
@@ -163,7 +163,7 @@
       <Button
         label={login.string.Close}
         size={'medium'}
-        kind={'primary'}
+        kind={'accented'}
         on:click={() => {
           dispatch('close')
         }}
@@ -175,7 +175,7 @@
       <Button
         label={login.string.GetLink}
         size={'medium'}
-        kind={'primary'}
+        kind={'accented'}
         on:click={() => {
           ;((limit !== undefined && limit > 0) || noLimit) && getLink(expHours, emailMask, limit)
         }}
diff --git a/plugins/login-resources/src/components/SelectWorkspace.svelte b/plugins/login-resources/src/components/SelectWorkspace.svelte
index 42424dd911..7dfffe2a09 100644
--- a/plugins/login-resources/src/components/SelectWorkspace.svelte
+++ b/plugins/login-resources/src/components/SelectWorkspace.svelte
@@ -103,7 +103,7 @@
         {/each}
         {#if !workspaces.length && account?.confirmed === true}
           <div class="form-row send">
-            <Button label={login.string.CreateWorkspace} kind={'primary'} width="100%" on:click={createWorkspace} />
+            <Button label={login.string.CreateWorkspace} kind={'accented'} width="100%" on:click={createWorkspace} />
           </div>
         {/if}
       </div>
diff --git a/plugins/login-resources/src/components/StatusControl.svelte b/plugins/login-resources/src/components/StatusControl.svelte
index d0c2cd2930..f101cde452 100644
--- a/plugins/login-resources/src/components/StatusControl.svelte
+++ b/plugins/login-resources/src/components/StatusControl.svelte
@@ -30,7 +30,7 @@
 <style lang="scss">
   .container {
     padding: 0.75rem 1rem;
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     border: 1px solid var(--theme-button-border);
     border-radius: 0.5rem;
   }
@@ -38,7 +38,7 @@
   .error {
     color: var(--system-error-color);
     fill: var(--system-error-color);
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     border-color: var(--system-error-60-color);
   }
 </style>
diff --git a/plugins/notification-resources/src/components/EmployeeInbox.svelte b/plugins/notification-resources/src/components/EmployeeInbox.svelte
index ec38eb14ff..5396d796e3 100644
--- a/plugins/notification-resources/src/components/EmployeeInbox.svelte
+++ b/plugins/notification-resources/src/components/EmployeeInbox.svelte
@@ -195,7 +195,7 @@
     {/if}
   </div>
   {#if me !== accountId}
-    <Button label={chunter.string.Message} kind="primary" on:click={openDM} />
+    <Button label={chunter.string.Message} kind="accented" on:click={openDM} />
   {/if}
 </div>
 <div class="inbox-activity">
diff --git a/plugins/recruit-resources/src/components/Applications.svelte b/plugins/recruit-resources/src/components/Applications.svelte
index d2bf8d0cb8..76cfd6c940 100644
--- a/plugins/recruit-resources/src/components/Applications.svelte
+++ b/plugins/recruit-resources/src/components/Applications.svelte
@@ -66,10 +66,12 @@
     <span class="antiSection-header__title">
       <Label label={recruit.string.Applications} />
     </span>
-    {#if viewlet && viewOptions}
-      <ViewletSettingButton bind:viewOptions {viewlet} kind={'transparent'} />
-    {/if}
-    <Button id="appls.add" icon={IconAdd} kind={'transparent'} shape={'circle'} on:click={createApp} />
+    <div class="flex-row-center gap-2 reverse">
+      {#if viewlet && viewOptions}
+        <ViewletSettingButton bind:viewOptions {viewlet} kind={'ghost'} />
+      {/if}
+      <Button id="appls.add" icon={IconAdd} kind={'ghost'} on:click={createApp} />
+    </div>
   </div>
   {#if applications > 0 && viewlet && !loading}
     <Scroller horizontal>
diff --git a/plugins/recruit-resources/src/components/CreateApplication.svelte b/plugins/recruit-resources/src/components/CreateApplication.svelte
index 8db1cf1fd6..635285f7aa 100644
--- a/plugins/recruit-resources/src/components/CreateApplication.svelte
+++ b/plugins/recruit-resources/src/components/CreateApplication.svelte
@@ -363,7 +363,7 @@
         bind:value={doc.assignee}
         allowDeselect
         showNavigate={false}
-        kind={'secondary'}
+        kind={'regular'}
         size={'large'}
         titleDeselect={recruit.string.UnAssignRecruiter}
       />
diff --git a/plugins/recruit-resources/src/components/CreateCandidate.svelte b/plugins/recruit-resources/src/components/CreateCandidate.svelte
index 8926747113..a402bde69d 100644
--- a/plugins/recruit-resources/src/components/CreateCandidate.svelte
+++ b/plugins/recruit-resources/src/components/CreateCandidate.svelte
@@ -573,7 +573,7 @@
       focusIndex={10}
       bind:value={object.channels}
       highlighted={matchedChannels.map((it) => it.provider)}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
     />
     <YesNo
@@ -582,7 +582,7 @@
       label={recruit.string.Onsite}
       tooltip={recruit.string.WorkLocationPreferences}
       bind:value={object.onsite}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
     />
     <YesNo
@@ -591,7 +591,7 @@
       label={recruit.string.Remote}
       tooltip={recruit.string.WorkLocationPreferences}
       bind:value={object.remote}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
     />
     <Component
@@ -606,7 +606,7 @@
         elements,
         newElements,
         countLabel: recruit.string.NumberSkills,
-        kind: 'secondary',
+        kind: 'regular',
         size: 'large'
       }}
       on:open={(evt) => {
@@ -722,12 +722,12 @@
 
 <style lang="scss">
   .resume {
-    box-shadow: 0 0 0 0 var(--primary-button-focused-border);
+    box-shadow: 0 0 0 0 var(--accented-button-outline);
     border-radius: 0.25rem;
     transition: box-shadow 0.15s ease-in-out;
 
     &.solid {
-      box-shadow: 0 0 0 2px var(--primary-button-focused-border);
+      box-shadow: 0 0 0 2px var(--accented-button-outline);
     }
   }
   .skills-box {
diff --git a/plugins/recruit-resources/src/components/CreateVacancy.svelte b/plugins/recruit-resources/src/components/CreateVacancy.svelte
index 18701aef15..3ce5e2b7ff 100644
--- a/plugins/recruit-resources/src/components/CreateVacancy.svelte
+++ b/plugins/recruit-resources/src/components/CreateVacancy.svelte
@@ -245,7 +245,7 @@
 >
   <div class="flex-row-center clear-mins">
     <div class="mr-3">
-      <Button focusIndex={1} icon={Vacancy} size={'medium'} kind={'link-bordered'} disabled />
+      <Button focusIndex={1} icon={Vacancy} size={'medium'} kind={'link-bordered'} noFocus />
     </div>
     <div class="clear-mins flex-grow">
       <EditBox
@@ -282,7 +282,7 @@
       bind:value={company}
       allowDeselect
       titleDeselect={recruit.string.UnAssignCompany}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       icon={Company}
       readonly={preserveCompany}
@@ -295,7 +295,7 @@
         folders: [recruit.space.VacancyTemplates],
         template: templateId,
         focusIndex: 4,
-        kind: 'secondary',
+        kind: 'regular',
         size: 'large'
       }}
       on:change={handleTemplateChange}
diff --git a/plugins/recruit-resources/src/components/EditVacancy.svelte b/plugins/recruit-resources/src/components/EditVacancy.svelte
index 5e268caf03..8b2595c31a 100644
--- a/plugins/recruit-resources/src/components/EditVacancy.svelte
+++ b/plugins/recruit-resources/src/components/EditVacancy.svelte
@@ -133,6 +133,7 @@
     isAside={true}
     {embedded}
     {object}
+    on:open
     on:close={() => {
       dispatch('close')
     }}
@@ -170,20 +171,15 @@
       {/if}
     </svelte:fragment>
     <svelte:fragment slot="utils">
-      <div class="p-1">
-        <Button icon={IconMoreH} kind={'transparent'} size={'medium'} on:click={showMenu} />
-      </div>
-      <div class="p-1">
-        <Button
-          icon={IconMixin}
-          kind={'transparent'}
-          shape={'round'}
-          selected={showAllMixins}
-          on:click={() => {
-            showAllMixins = !showAllMixins
-          }}
-        />
-      </div>
+      <Button icon={IconMoreH} kind={'ghost'} size={'medium'} on:click={showMenu} />
+      <Button
+        icon={IconMixin}
+        kind={'ghost'}
+        selected={showAllMixins}
+        on:click={() => {
+          showAllMixins = !showAllMixins
+        }}
+      />
     </svelte:fragment>
 
     <!-- <EditBox bind:value={object.description} placeholder={recruit.string.VacancyDescription} focusable on:blur={save} /> -->
diff --git a/plugins/recruit-resources/src/components/NewCandidateHeader.svelte b/plugins/recruit-resources/src/components/NewCandidateHeader.svelte
index 92d72b476b..c954162f07 100644
--- a/plugins/recruit-resources/src/components/NewCandidateHeader.svelte
+++ b/plugins/recruit-resources/src/components/NewCandidateHeader.svelte
@@ -38,7 +38,7 @@
     icon={IconAdd}
     label={draftExists ? recruit.string.ResumeDraft : recruit.string.CreateTalent}
     justify={'left'}
-    kind={'primary'}
+    kind={'accented'}
     width={'100%'}
     size={'large'}
     on:click={newCandidate}
diff --git a/plugins/recruit-resources/src/components/Organizations.svelte b/plugins/recruit-resources/src/components/Organizations.svelte
index 2e40287320..bb6afef880 100644
--- a/plugins/recruit-resources/src/components/Organizations.svelte
+++ b/plugins/recruit-resources/src/components/Organizations.svelte
@@ -231,7 +231,7 @@
     <span class="ac-header__title"><Label label={recruit.string.Organizations} /></span>
   </div>
   <div class="clear-mins mb-1">
-    <Button icon={IconAdd} label={recruit.string.CompanyCreateLabel} kind={'primary'} on:click={showCreateDialog} />
+    <Button icon={IconAdd} label={recruit.string.CompanyCreateLabel} kind={'accented'} on:click={showCreateDialog} />
   </div>
 </div>
 <div class="ac-header full divide search-start">
diff --git a/plugins/recruit-resources/src/components/Vacancies.svelte b/plugins/recruit-resources/src/components/Vacancies.svelte
index dc08f83f9d..10ccd56126 100644
--- a/plugins/recruit-resources/src/components/Vacancies.svelte
+++ b/plugins/recruit-resources/src/components/Vacancies.svelte
@@ -175,7 +175,7 @@
         document.body.removeChild(link)
       }}
     />
-    <Button icon={IconAdd} label={recruit.string.VacancyCreateLabel} kind={'primary'} on:click={showCreateDialog} />
+    <Button icon={IconAdd} label={recruit.string.VacancyCreateLabel} kind={'accented'} on:click={showCreateDialog} />
   </div>
 </div>
 <div class="ac-header full divide search-start">
diff --git a/plugins/recruit-resources/src/components/VacancyApplications.svelte b/plugins/recruit-resources/src/components/VacancyApplications.svelte
index a751a36db0..c4d7b11d40 100644
--- a/plugins/recruit-resources/src/components/VacancyApplications.svelte
+++ b/plugins/recruit-resources/src/components/VacancyApplications.svelte
@@ -74,10 +74,12 @@
         <Label label={recruit.string.Applications} />
       </NavLink>
     </span>
-    {#if viewlet && viewOptions}
-      <ViewletSettingButton bind:viewOptions {viewlet} kind={'transparent'} />
-    {/if}
-    <Button id="appls.add" icon={IconAdd} kind={'transparent'} shape={'circle'} on:click={createApp} />
+    <div class="flex-row-center gap-2 reverse">
+      {#if viewlet && viewOptions}
+        <ViewletSettingButton bind:viewOptions {viewlet} kind={'ghost'} />
+      {/if}
+      <Button id="appls.add" icon={IconAdd} kind={'ghost'} on:click={createApp} />
+    </div>
   </div>
   {#if applications > 0}
     {#if viewlet && !loading}
diff --git a/plugins/recruit-resources/src/components/VacancyItemPresenter.svelte b/plugins/recruit-resources/src/components/VacancyItemPresenter.svelte
index be17523fa5..1752b1f32e 100644
--- a/plugins/recruit-resources/src/components/VacancyItemPresenter.svelte
+++ b/plugins/recruit-resources/src/components/VacancyItemPresenter.svelte
@@ -28,6 +28,7 @@
 </script>
 
 {#if value}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
     class="flex-presenter"
     class:inline-presenter={inline}
diff --git a/plugins/recruit-resources/src/components/VacancyList.svelte b/plugins/recruit-resources/src/components/VacancyList.svelte
index 098b1ad802..28e5c75bbc 100644
--- a/plugins/recruit-resources/src/components/VacancyList.svelte
+++ b/plugins/recruit-resources/src/components/VacancyList.svelte
@@ -54,7 +54,7 @@
     <span class="antiSection-header__title">
       <Label label={recruit.string.Vacancies} />
     </span>
-    <Button id="appls.add" icon={IconAdd} kind={'transparent'} shape={'circle'} on:click={createApp} />
+    <Button id="appls.add" icon={IconAdd} kind={'ghost'} on:click={createApp} />
   </div>
   {#if (vacancies ?? 0) > 0}
     <Scroller horizontal>
diff --git a/plugins/recruit-resources/src/components/VacancyTemplateEditor.svelte b/plugins/recruit-resources/src/components/VacancyTemplateEditor.svelte
index a5621f1263..13b0d32704 100644
--- a/plugins/recruit-resources/src/components/VacancyTemplateEditor.svelte
+++ b/plugins/recruit-resources/src/components/VacancyTemplateEditor.svelte
@@ -78,7 +78,7 @@
         icon={IconAdd}
         label={undefined}
         labelParams={{ subIssues: 0 }}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         on:click={() => showPopup(tracker.component.CreateIssueTemplate, { relatedTo: template })}
       />
diff --git a/plugins/recruit-resources/src/components/review/CreateReview.svelte b/plugins/recruit-resources/src/components/review/CreateReview.svelte
index f919420e24..8fba7b0231 100644
--- a/plugins/recruit-resources/src/components/review/CreateReview.svelte
+++ b/plugins/recruit-resources/src/components/review/CreateReview.svelte
@@ -167,7 +167,7 @@
         bind:value={doc.attachedTo}
         label={recruit.string.Talent}
         placeholder={recruit.string.Talents}
-        kind={'secondary'}
+        kind={'regular'}
         size={'large'}
         create={{ component: recruit.component.CreateCandidate, label: recruit.string.CreateTalent }}
       />
@@ -177,7 +177,7 @@
       bind:value={company}
       label={recruit.string.Company}
       icon={IconCompany}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       showNavigate={false}
       create={{ component: contact.component.CreateOrganization, label: contact.string.CreateOrganization }}
@@ -187,7 +187,7 @@
       bind:value={application}
       label={recruit.string.Application}
       placeholder={recruit.string.ApplicationCreateLabel}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       searchField={'number'}
       showNavigate={false}
@@ -198,7 +198,7 @@
       labelNull={recruit.string.StartDate}
       mode={DateRangeMode.DATETIME}
       editable
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       on:change={updateStart}
     />
@@ -207,9 +207,9 @@
       labelNull={recruit.string.DueDate}
       mode={DateRangeMode.DATETIME}
       editable
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
     />
-    <UserBoxList bind:items={doc.participants} label={calendar.string.Participants} kind={'secondary'} size={'large'} />
+    <UserBoxList bind:items={doc.participants} label={calendar.string.Participants} kind={'regular'} size={'large'} />
   </svelte:fragment>
 </Card>
diff --git a/plugins/recruit-resources/src/components/review/Opinions.svelte b/plugins/recruit-resources/src/components/review/Opinions.svelte
index 46983b01e1..451e82e41c 100644
--- a/plugins/recruit-resources/src/components/review/Opinions.svelte
+++ b/plugins/recruit-resources/src/components/review/Opinions.svelte
@@ -34,7 +34,7 @@
     <span class="antiSection-header__title">
       <Label label={recruit.string.Opinions} />
     </span>
-    <Button icon={IconAdd} kind={'transparent'} shape={'circle'} on:click={createApp} />
+    <Button icon={IconAdd} kind={'ghost'} on:click={createApp} />
   </div>
   {#if opinions > 0}
     <Table
diff --git a/plugins/recruit-resources/src/components/review/Reviews.svelte b/plugins/recruit-resources/src/components/review/Reviews.svelte
index 2224197132..308f93156d 100644
--- a/plugins/recruit-resources/src/components/review/Reviews.svelte
+++ b/plugins/recruit-resources/src/components/review/Reviews.svelte
@@ -54,7 +54,7 @@
     <span class="antiSection-header__title">
       <Label {label} />
     </span>
-    <Button icon={IconAdd} kind={'transparent'} shape={'circle'} on:click={createApp} />
+    <Button icon={IconAdd} kind={'ghost'} on:click={createApp} />
   </div>
   {#if reviews > 0}
     <Scroller horizontal>
diff --git a/plugins/request-resources/src/components/RequestLabel.svelte b/plugins/request-resources/src/components/RequestLabel.svelte
index cc9861d53e..3b7d2554b1 100644
--- a/plugins/request-resources/src/components/RequestLabel.svelte
+++ b/plugins/request-resources/src/components/RequestLabel.svelte
@@ -51,7 +51,12 @@
         {:else}
           <div class="flex-row-center content-color text-sm pointer-events-none">
             <div class="mr-1">
-              <ProgressCircle max={value.requiredApprovesCount} value={value.approved.length} size={'inline'} primary />
+              <ProgressCircle
+                max={value.requiredApprovesCount}
+                value={value.approved.length}
+                size={'inline'}
+                accented
+              />
             </div>
             {value.approved.length}/{value.requiredApprovesCount}
           </div>
diff --git a/plugins/setting-resources/src/components/Configure.svelte b/plugins/setting-resources/src/components/Configure.svelte
index d01e34742a..8fb59698ba 100644
--- a/plugins/setting-resources/src/components/Configure.svelte
+++ b/plugins/setting-resources/src/components/Configure.svelte
@@ -75,7 +75,7 @@
     padding: 1rem;
     width: 24rem;
     height: 10rem;
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     border: 1px solid var(--theme-button-border);
     border-radius: 0.5rem;
     &.enabled {
diff --git a/plugins/setting-resources/src/components/InviteSetting.svelte b/plugins/setting-resources/src/components/InviteSetting.svelte
index aaf945f521..9ee506e923 100644
--- a/plugins/setting-resources/src/components/InviteSetting.svelte
+++ b/plugins/setting-resources/src/components/InviteSetting.svelte
@@ -71,7 +71,7 @@
     </div>
   {/if}
   <div class="mt-2">
-    <Button label={presentation.string.Save} size={'medium'} kind={'primary'} on:click={() => setInviteSettings()} />
+    <Button label={presentation.string.Save} size={'medium'} kind={'accented'} on:click={() => setInviteSettings()} />
   </div>
 </div>
 
diff --git a/plugins/setting-resources/src/components/Owners.svelte b/plugins/setting-resources/src/components/Owners.svelte
index 3ce08a64fc..d44e716a45 100644
--- a/plugins/setting-resources/src/components/Owners.svelte
+++ b/plugins/setting-resources/src/components/Owners.svelte
@@ -76,7 +76,7 @@
             <DropdownLabelsIntl
               label={setting.string.Role}
               disabled={account.role > currentRole || (account.role === AccountRole.Owner && owners.length === 1)}
-              kind={'primary'}
+              kind={'accented'}
               size={'medium'}
               {items}
               selected={account.role.toString()}
diff --git a/plugins/setting-resources/src/components/Password.svelte b/plugins/setting-resources/src/components/Password.svelte
index 6dbfe370d5..89844676b7 100644
--- a/plugins/setting-resources/src/components/Password.svelte
+++ b/plugins/setting-resources/src/components/Password.svelte
@@ -98,7 +98,7 @@
         <Button
           {label}
           {disabled}
-          kind={'primary'}
+          kind={'accented'}
           on:click={() => {
             save()
           }}
diff --git a/plugins/setting-resources/src/components/PluginCard.svelte b/plugins/setting-resources/src/components/PluginCard.svelte
index 4e1e5f7549..dc3eb60a2a 100644
--- a/plugins/setting-resources/src/components/PluginCard.svelte
+++ b/plugins/setting-resources/src/components/PluginCard.svelte
@@ -98,12 +98,12 @@
       {#if integrationType.createComponent}
         <Button
           label={setting.string.Add}
-          kind={'primary'}
+          kind={'accented'}
           on:click={(ev) => handleConfigure(ev, integrationType.createComponent)}
         />
       {/if}
     {:else if (integration?.disabled ?? false) && integrationType.reconnectComponent}
-      <Button label={setting.string.Reconnect} kind={'primary'} on:click={handleReconnect} />
+      <Button label={setting.string.Reconnect} kind={'accented'} on:click={handleReconnect} />
     {:else if integration?.value !== ''}
       {#if integrationType.onDisconnect}
         <Button label={setting.string.Disconnect} on:click={disconnect} />
@@ -111,7 +111,7 @@
       {#if integrationType.configureComponent !== undefined}
         <Button
           label={setting.string.Configure}
-          kind={'primary'}
+          kind={'accented'}
           on:click={(ev) => handleConfigure(ev, integrationType.configureComponent, 'top')}
         />
       {/if}
@@ -121,7 +121,7 @@
 
 <style lang="scss">
   .plugin-container {
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     border: 1px solid var(--theme-button-border);
     border-radius: 0.75rem;
   }
diff --git a/plugins/setting-resources/src/components/statuses/Folders.svelte b/plugins/setting-resources/src/components/statuses/Folders.svelte
index 4e9fd9a5c2..f2f3ea1e75 100644
--- a/plugins/setting-resources/src/components/statuses/Folders.svelte
+++ b/plugins/setting-resources/src/components/statuses/Folders.svelte
@@ -69,7 +69,7 @@
   }
   .item {
     padding: 1.25rem 1rem 1.25rem 1.25rem;
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     border: 1px solid var(--theme-button-border);
     border-radius: 0.75rem;
     cursor: pointer;
diff --git a/plugins/tags-resources/src/components/CategoryBar.svelte b/plugins/tags-resources/src/components/CategoryBar.svelte
index 0b006c0bff..8a6e2f4db0 100644
--- a/plugins/tags-resources/src/components/CategoryBar.svelte
+++ b/plugins/tags-resources/src/components/CategoryBar.svelte
@@ -158,7 +158,7 @@
     <div class="buttons-group small-gap">
       <Button
         label={tags.string.AllCategories}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'large'}
         on:click={() => {
           category = undefined
diff --git a/plugins/tags-resources/src/components/CollapsedTags.svelte b/plugins/tags-resources/src/components/CollapsedTags.svelte
index 4959554b15..4c4b16c1ed 100644
--- a/plugins/tags-resources/src/components/CollapsedTags.svelte
+++ b/plugins/tags-resources/src/components/CollapsedTags.svelte
@@ -47,7 +47,7 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     height: 1.5rem;
     border-radius: 1.5rem;
     border: 1px solid var(--theme-button-border);
diff --git a/plugins/tags-resources/src/components/CreateTagElement.svelte b/plugins/tags-resources/src/components/CreateTagElement.svelte
index ad178635fb..557c261732 100644
--- a/plugins/tags-resources/src/components/CreateTagElement.svelte
+++ b/plugins/tags-resources/src/components/CreateTagElement.svelte
@@ -142,7 +142,7 @@
         <DropdownLabels
           icon={IconFolder}
           label={tags.string.CategoryLabel}
-          kind={'secondary'}
+          kind={'regular'}
           size={'large'}
           bind:selected={category}
           items={categoryItems}
diff --git a/plugins/tags-resources/src/components/TagFilterPresenter.svelte b/plugins/tags-resources/src/components/TagFilterPresenter.svelte
index 4c370a70ab..60383cc0dc 100644
--- a/plugins/tags-resources/src/components/TagFilterPresenter.svelte
+++ b/plugins/tags-resources/src/components/TagFilterPresenter.svelte
@@ -32,7 +32,7 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     border: 1px solid var(--theme-button-border);
     border-radius: 1.5rem;
     height: 1.5rem;
diff --git a/plugins/tags-resources/src/components/TagReferencePresenter.svelte b/plugins/tags-resources/src/components/TagReferencePresenter.svelte
index 438ce0e6fa..37a6670d19 100644
--- a/plugins/tags-resources/src/components/TagReferencePresenter.svelte
+++ b/plugins/tags-resources/src/components/TagReferencePresenter.svelte
@@ -77,7 +77,7 @@
     height: 1.75rem;
     min-width: 0;
     min-height: 0;
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     border: 1px solid var(--theme-button-border);
     border-radius: 1.5rem;
     user-select: none;
diff --git a/plugins/tags-resources/src/components/TagsCategoryPopup.svelte b/plugins/tags-resources/src/components/TagsCategoryPopup.svelte
index d7d06c4116..7865d1b103 100644
--- a/plugins/tags-resources/src/components/TagsCategoryPopup.svelte
+++ b/plugins/tags-resources/src/components/TagsCategoryPopup.svelte
@@ -147,7 +147,7 @@
                 }}
               >
                 <div class="check pointer-events-none">
-                  <CheckBox checked={isSelected(element, selected)} primary />
+                  <CheckBox checked={isSelected(element, selected)} accented />
                 </div>
                 <div class="tag" style="background-color: {color.background};" />
                 <span style:color={color.title}>
@@ -170,14 +170,14 @@
   </div>
   <div class="flex-between p-2">
     <Button
-      kind={'transparent'}
+      kind={'ghost'}
       label={tags.string.SelectAll}
       on:click={() => {
         selected = elements.map((it) => it._id)
       }}
     />
     <Button
-      kind={'transparent'}
+      kind={'ghost'}
       label={tags.string.SelectNone}
       on:click={() => {
         selected = []
diff --git a/plugins/tags-resources/src/components/TagsEditor.svelte b/plugins/tags-resources/src/components/TagsEditor.svelte
index a92edd69a9..248f5ccbbd 100644
--- a/plugins/tags-resources/src/components/TagsEditor.svelte
+++ b/plugins/tags-resources/src/components/TagsEditor.svelte
@@ -97,8 +97,7 @@
       <div class="buttons-group x-small">
         <Button
           icon={IconAdd}
-          kind={'transparent'}
-          shape={'circle'}
+          kind={'ghost'}
           showTooltip={{ label: tags.string.AddTagTooltip, props: { word: keyLabel } }}
           id={'add-tag'}
           on:click={addTag}
diff --git a/plugins/tags-resources/src/components/TagsPopup.svelte b/plugins/tags-resources/src/components/TagsPopup.svelte
index 91c69cc762..4d2a68098f 100644
--- a/plugins/tags-resources/src/components/TagsPopup.svelte
+++ b/plugins/tags-resources/src/components/TagsPopup.svelte
@@ -117,7 +117,7 @@
     />
     {#if !isSingleCategory}
       <Button
-        kind={'transparent'}
+        kind={'ghost'}
         size={'large'}
         icon={show ? IconView : IconViewHide}
         on:click={() => {
@@ -125,7 +125,7 @@
         }}
       />
     {/if}
-    {#if !hideAdd}<Button kind={'transparent'} size={'large'} icon={IconAdd} on:click={createTagElement} />{/if}
+    {#if !hideAdd}<Button kind={'ghost'} size={'large'} icon={IconAdd} on:click={createTagElement} />{/if}
   </div>
   <div class="scroll">
     <div class="box">
diff --git a/plugins/tags-resources/src/components/TagsReferencePresenter.svelte b/plugins/tags-resources/src/components/TagsReferencePresenter.svelte
index 939af70a5a..6df8d1298d 100644
--- a/plugins/tags-resources/src/components/TagsReferencePresenter.svelte
+++ b/plugins/tags-resources/src/components/TagsReferencePresenter.svelte
@@ -57,7 +57,7 @@
     height: 1.75rem;
     min-width: 0;
     min-height: 0;
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     border: 1px solid var(--theme-button-border);
     border-radius: 1.5rem;
     user-select: none;
diff --git a/plugins/tags-resources/src/components/TagsView.svelte b/plugins/tags-resources/src/components/TagsView.svelte
index d5f2ca1942..e495bdc189 100644
--- a/plugins/tags-resources/src/components/TagsView.svelte
+++ b/plugins/tags-resources/src/components/TagsView.svelte
@@ -95,7 +95,7 @@
   </div>
 
   <div class="clear-mins mb-1">
-    <Button icon={IconAdd} label={сreateItemLabel} kind={'primary'} on:click={showCreateDialog} />
+    <Button icon={IconAdd} label={сreateItemLabel} kind={'accented'} on:click={showCreateDialog} />
   </div>
 </div>
 <div class="ac-header full divide search-start">
diff --git a/plugins/task-resources/src/components/state/StatesEditor.svelte b/plugins/task-resources/src/components/state/StatesEditor.svelte
index 5bec750f18..5e4cb61837 100644
--- a/plugins/task-resources/src/components/state/StatesEditor.svelte
+++ b/plugins/task-resources/src/components/state/StatesEditor.svelte
@@ -261,7 +261,7 @@
   .states {
     padding: 0.5rem 1rem;
     color: var(--theme-caption-color);
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     border: 1px solid var(--theme-button-border);
     border-radius: 0.5rem;
     user-select: none;
diff --git a/plugins/task-resources/src/components/todos/Todos.svelte b/plugins/task-resources/src/components/todos/Todos.svelte
index 1a3fdb5008..c98279d934 100644
--- a/plugins/task-resources/src/components/todos/Todos.svelte
+++ b/plugins/task-resources/src/components/todos/Todos.svelte
@@ -45,7 +45,7 @@
     <span class="antiSection-header__title">
       <Label label={plugin.string.Todos} />
     </span>
-    <Button icon={IconAdd} kind={'transparent'} shape={'circle'} on:click={createApp} />
+    <Button icon={IconAdd} kind={'ghost'} on:click={createApp} />
   </div>
   {#if todos.length > 0}
     {#if wSection < 640}
diff --git a/plugins/telegram-resources/src/components/Chat.svelte b/plugins/telegram-resources/src/components/Chat.svelte
index dc14bd9d72..70c11c53b6 100644
--- a/plugins/telegram-resources/src/components/Chat.svelte
+++ b/plugins/telegram-resources/src/components/Chat.svelte
@@ -250,7 +250,7 @@
       {#if integration === undefined}
         <Button
           label={telegram.string.Connect}
-          kind={'primary'}
+          kind={'accented'}
           on:click={(e) => {
             showPopup(Connect, {}, eventToHTMLElement(e), onConnectClose)
           }}
@@ -258,7 +258,7 @@
       {:else if integration.disabled}
         <Button
           label={setting.string.Reconnect}
-          kind={'primary'}
+          kind={'accented'}
           on:click={(e) => {
             showPopup(Reconnect, {}, eventToHTMLElement(e), onReconnect)
           }}
@@ -266,7 +266,7 @@
       {/if}
       <Button
         icon={IconShare}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'medium'}
         showTooltip={{ label: telegram.string.Share }}
         on:click={async () => {
@@ -293,7 +293,7 @@
               <Button
                 label={telegram.string.PublishSelected}
                 size={'medium'}
-                kind={'primary'}
+                kind={'accented'}
                 disabled={!selected.size}
                 on:click={share}
               />
diff --git a/plugins/telegram-resources/src/components/Connect.svelte b/plugins/telegram-resources/src/components/Connect.svelte
index 5ee4843392..8dfd534755 100644
--- a/plugins/telegram-resources/src/components/Connect.svelte
+++ b/plugins/telegram-resources/src/components/Connect.svelte
@@ -154,7 +154,7 @@
       <EditBox label={telegram.string.Phone} placeholder={telegram.string.PhonePlaceholder} bind:value={phone} />
     {/if}
     <div class="footer">
-      <Button {label} kind={'primary'} {disabled} on:click={click} />
+      <Button {label} kind={'accented'} {disabled} on:click={click} />
       {#if requested || secondFactor}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div class="link over-underline" on:click={back}><Label label={telegram.string.Back} /></div>
diff --git a/plugins/telegram-resources/src/components/Date.svelte b/plugins/telegram-resources/src/components/Date.svelte
index 1e115d9202..33a4efe2f6 100644
--- a/plugins/telegram-resources/src/components/Date.svelte
+++ b/plugins/telegram-resources/src/components/Date.svelte
@@ -43,7 +43,7 @@
     width: fit-content;
     font-weight: 500;
     color: var(--theme-caption-color);
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     border-radius: 1.25rem;
     user-select: text;
   }
diff --git a/plugins/telegram-resources/src/components/Message.svelte b/plugins/telegram-resources/src/components/Message.svelte
index 37eed35b82..dc361e3b35 100644
--- a/plugins/telegram-resources/src/components/Message.svelte
+++ b/plugins/telegram-resources/src/components/Message.svelte
@@ -43,7 +43,7 @@
     }}
   >
     <div class="check-box">
-      {#if selectable}<CheckBox circle primary bind:checked={selected} />{/if}
+      {#if selectable}<CheckBox circle accented bind:checked={selected} />{/if}
     </div>
     <div class="message-container" class:out={!message.incoming}>
       <div class="message" class:outcoming={!message.incoming} class:selected>
diff --git a/plugins/telegram-resources/src/components/PinPad.svelte b/plugins/telegram-resources/src/components/PinPad.svelte
index e0c2e4780d..9b9f5503df 100644
--- a/plugins/telegram-resources/src/components/PinPad.svelte
+++ b/plugins/telegram-resources/src/components/PinPad.svelte
@@ -116,8 +116,8 @@
     }
 
     &:focus {
-      border: 1px solid var(--primary-button-focused-border);
-      box-shadow: 0 0 0 3px var(--primary-button-outline);
+      border: 1px solid var(--accented-button-focused-border);
+      box-shadow: 0 0 0 3px var(--accented-button-outline);
     }
   }
 
diff --git a/plugins/telegram-resources/src/components/Reconnect.svelte b/plugins/telegram-resources/src/components/Reconnect.svelte
index 50f000af9a..27a8401c1f 100644
--- a/plugins/telegram-resources/src/components/Reconnect.svelte
+++ b/plugins/telegram-resources/src/components/Reconnect.svelte
@@ -169,7 +169,7 @@
       {/await}
     {/if}
     <div class="footer">
-      <Button {label} kind={'primary'} {disabled} on:click={click} />
+      <Button {label} kind={'accented'} {disabled} on:click={click} />
       {#if requested || secondFactor}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div class="link over-underline" on:click={back}><Label label={telegram.string.Back} /></div>
diff --git a/plugins/templates-resources/src/components/Templates.svelte b/plugins/templates-resources/src/components/Templates.svelte
index 7c9d1969d8..506aee585e 100644
--- a/plugins/templates-resources/src/components/Templates.svelte
+++ b/plugins/templates-resources/src/components/Templates.svelte
@@ -225,7 +225,7 @@
               <div class="ml-2">
                 <Button
                   disabled={newTemplate.title.trim().length === 0}
-                  kind={'primary'}
+                  kind={'accented'}
                   label={templatesPlugin.string.SaveTemplate}
                   on:click={saveNewTemplate}
                 />
@@ -250,7 +250,7 @@
           </div>
           <div class="flex flex-reverse">
             <Button
-              kind={'primary'}
+              kind={'accented'}
               label={templatesPlugin.string.EditTemplate}
               on:click={() => {
                 mode = Mode.Edit
diff --git a/plugins/tracker-resources/src/components/AppItem.svelte b/plugins/tracker-resources/src/components/AppItem.svelte
index c73c080884..d397e81448 100644
--- a/plugins/tracker-resources/src/components/AppItem.svelte
+++ b/plugins/tracker-resources/src/components/AppItem.svelte
@@ -60,8 +60,8 @@
       color: var(--caption-color);
     }
     &:focus {
-      border: 1px solid var(--primary-button-focused-border);
-      box-shadow: 0 0 0 3px var(--primary-button-outline);
+      border: 1px solid var(--accented-button-focused-border);
+      box-shadow: 0 0 0 3px var(--accented-button-outline);
       .icon-container {
         color: var(--caption-color);
       }
diff --git a/plugins/tracker-resources/src/components/CreateIssue.svelte b/plugins/tracker-resources/src/components/CreateIssue.svelte
index 635e813c53..cb345080e0 100644
--- a/plugins/tracker-resources/src/components/CreateIssue.svelte
+++ b/plugins/tracker-resources/src/components/CreateIssue.svelte
@@ -549,7 +549,7 @@
       _class={tracker.class.Project}
       label={tracker.string.Project}
       bind:space={_space}
-      kind={'secondary'}
+      kind={'regular'}
       size={'small'}
       component={ProjectPresenter}
       iconWithEmoji={tracker.component.IconWithEmoji}
@@ -562,7 +562,7 @@
         space: _space
       }}
       on:change={handleTemplateChange}
-      kind={'secondary'}
+      kind={'regular'}
       size={'small'}
       label={tracker.string.NoIssueTemplate}
       icon={tracker.icon.IssueTemplates}
@@ -657,7 +657,7 @@
       <StatusEditor
         focusIndex={3}
         value={object}
-        kind={'secondary'}
+        kind={'regular'}
         size={'large'}
         defaultIssueStatus={currentProject?.defaultIssueStatus}
         shouldShowLabel={true}
@@ -678,7 +678,7 @@
         value={object}
         shouldShowLabel
         isEditable
-        kind={'secondary'}
+        kind={'regular'}
         size={'large'}
         justify="center"
         on:change={({ detail }) => {
@@ -691,7 +691,7 @@
       <AssigneeEditor
         focusIndex={5}
         {object}
-        kind={'secondary'}
+        kind={'regular'}
         size={'large'}
         short
         on:change={({ detail }) => {
@@ -709,7 +709,7 @@
         key,
         targetClass: tracker.class.Issue,
         countLabel: tracker.string.NumberLabels,
-        kind: 'secondary',
+        kind: 'regular',
         size: 'large'
       }}
       on:open={(evt) => {
@@ -724,12 +724,12 @@
       value={object.component}
       onChange={handleComponentIdChanged}
       isEditable={true}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       short
     />
     <div id="estimation-editor" class="new-line">
-      <EstimationEditor focusIndex={7} kind={'secondary'} size={'large'} value={object} />
+      <EstimationEditor focusIndex={7} kind={'regular'} size={'large'} value={object} />
     </div>
     <div id="milestone-editor" class="new-line">
       <MilestoneSelector
@@ -737,7 +737,7 @@
         value={object.milestone}
         onChange={handleMilestoneIdChanged}
         useComponent={(!originalIssue && object.component) || undefined}
-        kind={'secondary'}
+        kind={'regular'}
         size={'large'}
         short
       />
@@ -746,7 +746,7 @@
       <DatePresenter
         bind:value={object.dueDate}
         labelNull={tracker.string.DueDate}
-        kind={'secondary'}
+        kind={'regular'}
         size={'large'}
         editable
       />
@@ -755,7 +755,7 @@
       <Button
         icon={tracker.icon.Parent}
         label={object.parentIssue ? tracker.string.RemoveParent : tracker.string.SetParent}
-        kind={'secondary'}
+        kind={'regular'}
         size={'large'}
         notSelected={object.parentIssue === undefined}
         on:click={object.parentIssue ? clearParentIssue : setParentIssue}
@@ -782,7 +782,7 @@
       icon={IconAttachment}
       iconProps={{ fill: 'var(--theme-dark-color)' }}
       size={'large'}
-      kind={'transparent'}
+      kind={'ghost'}
       on:click={() => {
         descriptionBox.attach()
       }}
diff --git a/plugins/tracker-resources/src/components/FilterMenuSection.svelte b/plugins/tracker-resources/src/components/FilterMenuSection.svelte
index 60cac69fe1..605665ea65 100644
--- a/plugins/tracker-resources/src/components/FilterMenuSection.svelte
+++ b/plugins/tracker-resources/src/components/FilterMenuSection.svelte
@@ -89,7 +89,7 @@
           <div class="buttonContent">
             {#if i !== 0 || (i === 0 && !onBack)}
               <div class="flex check pointer-events-none">
-                <CheckBox checked={selectedElementsMap[i]} primary />
+                <CheckBox checked={selectedElementsMap[i]} accented />
               </div>
             {/if}
             {#if action.icon}
diff --git a/plugins/tracker-resources/src/components/NewIssueHeader.svelte b/plugins/tracker-resources/src/components/NewIssueHeader.svelte
index a0fbd2c1b3..87a8c8ca27 100644
--- a/plugins/tracker-resources/src/components/NewIssueHeader.svelte
+++ b/plugins/tracker-resources/src/components/NewIssueHeader.svelte
@@ -54,7 +54,7 @@
     icon={IconAdd}
     {label}
     justify={'left'}
-    kind={'primary'}
+    kind={'accented'}
     width={'100%'}
     size={'large'}
     on:click={newIssue}
diff --git a/plugins/tracker-resources/src/components/SubIssues.svelte b/plugins/tracker-resources/src/components/SubIssues.svelte
index 3c1cc6e8cf..b48f79847d 100644
--- a/plugins/tracker-resources/src/components/SubIssues.svelte
+++ b/plugins/tracker-resources/src/components/SubIssues.svelte
@@ -176,7 +176,7 @@
       width="min-content"
       icon={isCollapsed ? Collapsed : Expanded}
       size="small"
-      kind="transparent"
+      kind="ghost"
       label={tracker.string.SubIssuesList}
       labelParams={{ subIssues: subIssues.length }}
       on:click={() => (isCollapsed = !isCollapsed)}
diff --git a/plugins/tracker-resources/src/components/components/ComponentBrowser.svelte b/plugins/tracker-resources/src/components/components/ComponentBrowser.svelte
index 0056c61352..db96eb0dc9 100644
--- a/plugins/tracker-resources/src/components/components/ComponentBrowser.svelte
+++ b/plugins/tracker-resources/src/components/components/ComponentBrowser.svelte
@@ -104,7 +104,7 @@
           (viewlet = viewlets && detail?.id ? updateActiveViewlet(viewlets, detail.id) : viewlet)}
       />
     {/if}
-    <Button icon={IconAdd} label={tracker.string.Component} kind="primary" on:click={showCreateDialog} />
+    <Button icon={IconAdd} label={tracker.string.Component} kind="accented" on:click={showCreateDialog} />
   </div>
 </div>
 <div class="ac-header full divide search-start">
diff --git a/plugins/tracker-resources/src/components/components/ComponentEditor.svelte b/plugins/tracker-resources/src/components/components/ComponentEditor.svelte
index 91b3dc106d..b2a0d96a1d 100644
--- a/plugins/tracker-resources/src/components/components/ComponentEditor.svelte
+++ b/plugins/tracker-resources/src/components/components/ComponentEditor.svelte
@@ -57,7 +57,7 @@
 
 {#if (value.component && value.component !== $activeComponent && groupBy !== 'component') || shouldShowPlaceholder}
   <div
-    class="label-wrapper"
+    class={compression ? 'label-wrapper' : 'clear-mins'}
     class:minus-margin={kind === 'list-header'}
     use:tooltip={{ label: value.component ? tracker.string.MoveToComponent : tracker.string.AddToComponent }}
   >
@@ -65,7 +65,7 @@
       {kind}
       {size}
       {shape}
-      width={compression ? 'min-content' : width}
+      {width}
       {justify}
       {space}
       {isEditable}
@@ -75,7 +75,7 @@
       {enlargedText}
       {shrink}
       value={value.component}
-      short
+      short={compression}
       onChange={handleComponentIdChanged}
     />
   </div>
diff --git a/plugins/tracker-resources/src/components/components/DeleteComponentPresenter.svelte b/plugins/tracker-resources/src/components/components/DeleteComponentPresenter.svelte
index d28dcd5758..f2ba439772 100644
--- a/plugins/tracker-resources/src/components/components/DeleteComponentPresenter.svelte
+++ b/plugins/tracker-resources/src/components/components/DeleteComponentPresenter.svelte
@@ -21,7 +21,7 @@
   import tracker from '../../plugin'
 
   export let value: Component
-  export let kind: ButtonKind = 'secondary'
+  export let kind: ButtonKind = 'regular'
   export let size: ButtonSize = 'medium'
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = 'min-content'
diff --git a/plugins/tracker-resources/src/components/components/NewComponent.svelte b/plugins/tracker-resources/src/components/components/NewComponent.svelte
index bd5f3c0662..25e8a49649 100644
--- a/plugins/tracker-resources/src/components/components/NewComponent.svelte
+++ b/plugins/tracker-resources/src/components/components/NewComponent.svelte
@@ -55,7 +55,7 @@
       _class={tracker.class.Project}
       label={tracker.string.Project}
       bind:space
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       component={ProjectPresenter}
       iconWithEmoji={tracker.component.IconWithEmoji}
@@ -82,7 +82,7 @@
       allowDeselect
       titleDeselect={tracker.string.Unassigned}
       showNavigate={false}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
     />
   </svelte:fragment>
diff --git a/plugins/tracker-resources/src/components/issues/IssueNotification.svelte b/plugins/tracker-resources/src/components/issues/IssueNotification.svelte
index 6b48b5693f..bb9a423f5c 100644
--- a/plugins/tracker-resources/src/components/issues/IssueNotification.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssueNotification.svelte
@@ -101,7 +101,7 @@
       {/if}
       <span class="overflow-label fs-bold caption-color">{title}</span>
     </div>
-    <Button icon={IconClose} kind="transparent" size="small" on:click={onRemove} />
+    <Button icon={IconClose} kind="ghost" size="small" on:click={onRemove} />
   </div>
 
   <div class="content flex-row-center flex-wrap gap-2 reverse">
diff --git a/plugins/tracker-resources/src/components/issues/IssuePreview.svelte b/plugins/tracker-resources/src/components/issues/IssuePreview.svelte
index 1511122b4e..b796e13974 100644
--- a/plugins/tracker-resources/src/components/issues/IssuePreview.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuePreview.svelte
@@ -80,10 +80,10 @@
   </div>
   <Scroller padding={'0.75rem 1.75rem 0'} noFade>
     <div class="flex-row-center gap-2 mb-2">
-      <StatusEditor value={issue} shouldShowLabel kind={'secondary'} />
-      <PriorityEditor value={issue} shouldShowLabel kind={'secondary'} />
+      <StatusEditor value={issue} shouldShowLabel kind={'regular'} />
+      <PriorityEditor value={issue} shouldShowLabel kind={'regular'} />
       {#if issue.assignee}
-        <AssigneeEditor object={issue} kind={'secondary'} />
+        <AssigneeEditor object={issue} kind={'regular'} />
       {/if}
     </div>
 
diff --git a/plugins/tracker-resources/src/components/issues/IssuesView.svelte b/plugins/tracker-resources/src/components/issues/IssuesView.svelte
index 0235a6753b..e8abff4a33 100644
--- a/plugins/tracker-resources/src/components/issues/IssuesView.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuesView.svelte
@@ -110,7 +110,7 @@
       <div class="buttons-divider" />
       <Button
         icon={asideShown ? IconDetailsFilled : IconDetails}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'medium'}
         selected={asideShown}
         on:click={() => {
diff --git a/plugins/tracker-resources/src/components/issues/KanbanView.svelte b/plugins/tracker-resources/src/components/issues/KanbanView.svelte
index 98c6815450..5060424838 100644
--- a/plugins/tracker-resources/src/components/issues/KanbanView.svelte
+++ b/plugins/tracker-resources/src/components/issues/KanbanView.svelte
@@ -328,7 +328,7 @@
         <div class="tools gap-1">
           <Button
             icon={IconAdd}
-            kind={'transparent'}
+            kind={'ghost'}
             showTooltip={{ label: tracker.string.AddIssueTooltip, direction: 'left' }}
             on:click={() => {
               showPopup(CreateIssue, { space: currentSpace, [groupByKey]: state._id }, 'top')
diff --git a/plugins/tracker-resources/src/components/issues/Move.svelte b/plugins/tracker-resources/src/components/issues/Move.svelte
index eb2c32af7b..096186a643 100644
--- a/plugins/tracker-resources/src/components/issues/Move.svelte
+++ b/plugins/tracker-resources/src/components/issues/Move.svelte
@@ -253,7 +253,7 @@
       <span class="fs-title aligned-text">
         <Label label={tracker.string.MoveIssues} />
       </span>
-      <Button icon={IconClose} iconProps={{ size: 'medium' }} kind="transparent" on:click={() => dispatch('close')} />
+      <Button icon={IconClose} iconProps={{ size: 'medium' }} kind="ghost" on:click={() => dispatch('close')} />
     </div>
 
     <div>
@@ -266,7 +266,7 @@
           _class={currentSpace._class}
           label={hierarchy.getClass(tracker.class.Project).label}
           bind:space
-          kind={'secondary'}
+          kind={'regular'}
           size={'small'}
           component={ProjectPresenter}
           iconWithEmoji={tracker.component.IconWithEmoji}
@@ -309,7 +309,7 @@
       >
         <Label label={getEmbeddedLabel('<    Manage attributes')} />
       </span>
-      <Button icon={IconClose} iconProps={{ size: 'medium' }} kind="transparent" on:click={() => dispatch('close')} />
+      <Button icon={IconClose} iconProps={{ size: 'medium' }} kind="ghost" on:click={() => dispatch('close')} />
     </div>
     <div class="divider" />
 
@@ -378,7 +378,7 @@
         label={view.string.Move}
         size={'small'}
         disabled={docs[0]?.space === currentSpace?._id}
-        kind={'primary'}
+        kind={'accented'}
         on:click={moveAll}
         loading={processing}
       />
diff --git a/plugins/tracker-resources/src/components/issues/ParentIssue.svelte b/plugins/tracker-resources/src/components/issues/ParentIssue.svelte
index 4839df2b62..4d9ea6068b 100644
--- a/plugins/tracker-resources/src/components/issues/ParentIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/ParentIssue.svelte
@@ -45,7 +45,7 @@
   <Button
     icon={IconClose}
     showTooltip={{ label: tracker.string.RemoveParent, direction: 'bottom' }}
-    kind={'transparent'}
+    kind={'ghost'}
     size={'small'}
     on:click={() => dispatch('close')}
   />
diff --git a/plugins/tracker-resources/src/components/issues/edit/CopyToClipboardButton.svelte b/plugins/tracker-resources/src/components/issues/edit/CopyToClipboardButton.svelte
index 2fa0b8a29a..d6e165b589 100644
--- a/plugins/tracker-resources/src/components/issues/edit/CopyToClipboardButton.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/CopyToClipboardButton.svelte
@@ -24,7 +24,7 @@
 
 <Button
   {icon}
-  kind={'transparent'}
+  kind={'ghost'}
   showTooltip={{ label: title, direction: 'bottom' }}
   on:click={() => copyTextToClipboard(text)}
 />
diff --git a/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte b/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
index 25617e04bc..b29db12bdd 100644
--- a/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
@@ -230,13 +230,13 @@
       {#if issueId}{issueId}{/if}
     </span>
     <svelte:fragment slot="utils">
-      <Button icon={IconMoreH} kind={'transparent'} size={'medium'} on:click={showMenu} />
+      <Button icon={IconMoreH} kind={'ghost'} size={'medium'} on:click={showMenu} />
       {#if issueId}
         <CopyToClipboard issueUrl={generateIssueShortLink(issueId)} {issueId} />
       {/if}
       <Button
         icon={setting.icon.Setting}
-        kind={'transparent'}
+        kind={'ghost'}
         showTooltip={{ label: setting.string.ClassSetting }}
         on:click={(ev) => {
           ev.stopPropagation()
@@ -251,7 +251,7 @@
         }}
       />
       <Button
-        kind={'transparent'}
+        kind={'ghost'}
         selected={showAllMixins}
         on:click={() => {
           showAllMixins = !showAllMixins
diff --git a/plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte b/plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte
index 6dfe5aa79f..624e9905b7 100644
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte
@@ -89,7 +89,7 @@
   {#if hasSubIssues}
     <Button
       width="min-content"
-      kind="transparent"
+      kind="ghost"
       on:click={() => {
         isCollapsed = !isCollapsed
       }}
@@ -102,12 +102,12 @@
   {/if}
   <div class="flex-row-center gap-2">
     {#if viewlet && hasSubIssues && viewOptions}
-      <ViewletSettingButton bind:viewOptions {viewlet} kind={'transparent'} />
+      <ViewletSettingButton bind:viewOptions {viewlet} kind={'ghost'} />
     {/if}
     {#if hasSubIssues}
       <Button
         icon={IconScaleFull}
-        kind={'transparent'}
+        kind={'ghost'}
         showTooltip={{ label: tracker.string.OpenSubIssues, direction: 'bottom' }}
         on:click={() => {
           const filter = createFilter(tracker.class.Issue, 'attachedTo', [issue._id])
@@ -130,7 +130,7 @@
       icon={hasSubIssues ? IconAdd : undefined}
       label={hasSubIssues ? undefined : tracker.string.AddSubIssues}
       labelParams={{ subIssues: 0 }}
-      kind={'transparent'}
+      kind={'ghost'}
       showTooltip={{ label: tracker.string.AddSubIssues, props: { subIssues: 1 }, direction: 'bottom' }}
       on:click={() => {
         isCollapsed = false
diff --git a/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte b/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte
index 7998919aa3..8406f11733 100644
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte
@@ -153,7 +153,7 @@
           <div class="flex-row-center content-color text-sm pointer-events-none">
             {#if !compactMode}
               <div class="mr-1-5">
-                <ProgressCircle bind:value={countComplete} bind:max={subIssues.length} size={'small'} primary />
+                <ProgressCircle bind:value={countComplete} bind:max={subIssues.length} size={'small'} accented />
               </div>
             {/if}
             {countComplete}/{subIssues.length}
diff --git a/plugins/tracker-resources/src/components/issues/related/RelatedIssueSelector.svelte b/plugins/tracker-resources/src/components/issues/related/RelatedIssueSelector.svelte
index c7ad644099..c2d64f1a57 100644
--- a/plugins/tracker-resources/src/components/issues/related/RelatedIssueSelector.svelte
+++ b/plugins/tracker-resources/src/components/issues/related/RelatedIssueSelector.svelte
@@ -133,7 +133,7 @@
           <div class="flex-row-center content-color text-sm pointer-events-none">
             {#if !compactMode}
               <div class="mr-1-5">
-                <ProgressCircle bind:value={countComplete} bind:max={subIssues.length} size={'small'} primary />
+                <ProgressCircle bind:value={countComplete} bind:max={subIssues.length} size={'small'} accented />
               </div>
             {/if}
             {countComplete}/{subIssues.length}
diff --git a/plugins/tracker-resources/src/components/issues/related/RelatedIssuesSection.svelte b/plugins/tracker-resources/src/components/issues/related/RelatedIssuesSection.svelte
index ca60f0b184..8d4c73249d 100644
--- a/plugins/tracker-resources/src/components/issues/related/RelatedIssuesSection.svelte
+++ b/plugins/tracker-resources/src/components/issues/related/RelatedIssuesSection.svelte
@@ -67,14 +67,14 @@
       {/if}
       <div class="flex-row-center gap-2">
         {#if viewlet && viewOptions}
-          <ViewletSettingButton bind:viewOptions {viewlet} kind={'transparent'} />
+          <ViewletSettingButton bind:viewOptions {viewlet} kind={'ghost'} />
         {/if}
         <Button
           id="add-sub-issue"
           icon={IconAdd}
           label={undefined}
           labelParams={{ subIssues: 0 }}
-          kind={'transparent'}
+          kind={'ghost'}
           on:click={createIssue}
         />
       </div>
diff --git a/plugins/tracker-resources/src/components/issues/timereport/EstimationProgressCircle.svelte b/plugins/tracker-resources/src/components/issues/timereport/EstimationProgressCircle.svelte
index 49ead718ae..3f1f6515a0 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/EstimationProgressCircle.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/EstimationProgressCircle.svelte
@@ -19,7 +19,7 @@
   export let min: number = 0
   export let max: number = 100
   export let size: IconSize = 'small'
-  export let primary: boolean = false
+  export let accented: boolean = false
 
   export let color: string = 'var(--theme-progress-color)'
   export let greenColor: string = FernColor
@@ -50,7 +50,7 @@
       cy={8}
       r={7}
       class="progress-circle"
-      style:stroke={primary ? 'var(--primary-bg-color)' : color}
+      style:stroke={accented ? 'var(--primary-bg-color)' : color}
       style:opacity={dashOffset === 0 ? 0 : 1}
       style:transform={'rotate(-82deg)'}
       style:stroke-dasharray={lenghtC}
diff --git a/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte b/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte
index db380d985e..c96298cf5b 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte
@@ -64,7 +64,7 @@
         <FixedColumn key={'estimation_issue_assignee'} justify={'right'}>
           <AssigneeBox
             width={'100%'}
-            kind={'transparent'}
+            kind={'ghost'}
             label={tracker.string.Assignee}
             _class={contact.class.Employee}
             value={issue.assignee}
diff --git a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportPopup.svelte b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportPopup.svelte
index 6c00fb2162..2211442d39 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportPopup.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportPopup.svelte
@@ -133,13 +133,13 @@
     <UserBox
       _class={contact.class.Employee}
       label={contact.string.Employee}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       bind:value={data.employee}
       showNavigate={false}
     />
     <TimeReportDayDropdown
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       bind:selected={selectedTimeReportDay}
       on:selected={({ detail }) => (data.date = getTimeReportDate(detail))}
@@ -147,7 +147,7 @@
     <DatePresenter
       bind:value={data.date}
       editable
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       on:change={({ detail }) => (selectedTimeReportDay = getTimeReportDayType(detail))}
     />
diff --git a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte
index 2fe550c95e..4434f92dd5 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte
@@ -96,7 +96,7 @@
         <FixedColumn key={'timespend_assignee'} justify={'left'}>
           <UserBox
             width={'100%'}
-            kind={'transparent'}
+            kind={'ghost'}
             label={tracker.string.Assignee}
             _class={contact.class.Employee}
             value={report.employee}
@@ -108,7 +108,7 @@
           <TimePresenter value={report.value} />
         </FixedColumn>
         <FixedColumn key={'timespend_date'} justify={'left'}>
-          <DatePresenter value={report.date} kind={'transparent'} size={'small'} />
+          <DatePresenter value={report.date} kind={'ghost'} size={'small'} />
         </FixedColumn>
       </div>
     </div></svelte:fragment
diff --git a/plugins/tracker-resources/src/components/milestones/MilestoneBrowser.svelte b/plugins/tracker-resources/src/components/milestones/MilestoneBrowser.svelte
index fd5e83eb66..12c033c33e 100644
--- a/plugins/tracker-resources/src/components/milestones/MilestoneBrowser.svelte
+++ b/plugins/tracker-resources/src/components/milestones/MilestoneBrowser.svelte
@@ -130,7 +130,7 @@
   </div>
 
   <div class="ac-header-full medium-gap mb-1">
-    <Button icon={IconAdd} label={tracker.string.Milestone} kind={'primary'} on:click={showCreateDialog} />
+    <Button icon={IconAdd} label={tracker.string.Milestone} kind={'accented'} on:click={showCreateDialog} />
   </div>
 </div>
 <div class="ac-header full divide search-start">
diff --git a/plugins/tracker-resources/src/components/milestones/MilestoneDatePresenter.svelte b/plugins/tracker-resources/src/components/milestones/MilestoneDatePresenter.svelte
index db4a767e75..42e4e1605e 100644
--- a/plugins/tracker-resources/src/components/milestones/MilestoneDatePresenter.svelte
+++ b/plugins/tracker-resources/src/components/milestones/MilestoneDatePresenter.svelte
@@ -21,7 +21,7 @@
 
   export let value: Milestone
   export let field = 'targetDate'
-  export let kind: 'transparent' | 'primary' | 'link' | 'list' = 'primary'
+  export let kind: 'ghost' | 'accented' | 'link' | 'list' = 'accented'
   export let size: ButtonSize | 'x-small' = 'small'
 
   const client = getClient()
diff --git a/plugins/tracker-resources/src/components/milestones/MilestoneEditor.svelte b/plugins/tracker-resources/src/components/milestones/MilestoneEditor.svelte
index ce8e57c039..eab4675e51 100644
--- a/plugins/tracker-resources/src/components/milestones/MilestoneEditor.svelte
+++ b/plugins/tracker-resources/src/components/milestones/MilestoneEditor.svelte
@@ -78,7 +78,7 @@
 
 {#if kind === 'list'}
   {#if value.milestone}
-    <div class="label-wrapper">
+    <div class={compression ? 'label-wrapper' : 'clear-mins'}>
       <MilestoneSelector
         {kind}
         {size}
@@ -89,7 +89,7 @@
         {popupPlaceholder}
         {onlyIcon}
         {enlargedText}
-        short
+        short={compression}
         showTooltip={{ label: value.milestone ? tracker.string.MoveToMilestone : tracker.string.AddToMilestone }}
         value={value.milestone}
         onChange={handleMilestoneIdChanged}
@@ -128,7 +128,7 @@
     {#if milestone && kind === 'list-header'}
       <div class="flex-row-center" class:minus-margin-space={kind === 'list-header'} class:text-sm={twoRows}>
         {#if milestone}
-          <DatePresenter value={milestone.targetDate} kind={'transparent'} />
+          <DatePresenter value={milestone.targetDate} kind={'ghost'} />
         {/if}
       </div>
     {/if}
diff --git a/plugins/tracker-resources/src/components/milestones/MilestoneRefPresenter.svelte b/plugins/tracker-resources/src/components/milestones/MilestoneRefPresenter.svelte
index 26a734892d..32ed2b067e 100644
--- a/plugins/tracker-resources/src/components/milestones/MilestoneRefPresenter.svelte
+++ b/plugins/tracker-resources/src/components/milestones/MilestoneRefPresenter.svelte
@@ -64,7 +64,7 @@
   {#if milestone && kind === 'list-header' && display !== 'kanban'}
     <div class="flex-row-center" class:minus-margin-space={kind === 'list-header'} class:text-sm={twoRows}>
       {#if milestone}
-        <DatePresenter value={milestone.targetDate} kind={'transparent'} />
+        <DatePresenter value={milestone.targetDate} kind={'ghost'} />
       {/if}
     </div>
   {/if}
diff --git a/plugins/tracker-resources/src/components/milestones/NewMilestone.svelte b/plugins/tracker-resources/src/components/milestones/NewMilestone.svelte
index 85ce9b8b3b..22e4cdb04f 100644
--- a/plugins/tracker-resources/src/components/milestones/NewMilestone.svelte
+++ b/plugins/tracker-resources/src/components/milestones/NewMilestone.svelte
@@ -58,7 +58,7 @@
     <SpaceSelector
       _class={tracker.class.Project}
       label={tracker.string.Project}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       bind:space
       component={ProjectPresenter}
@@ -79,13 +79,13 @@
     showButtons={false}
   />
   <svelte:fragment slot="pool">
-    <MilestoneStatusEditor bind:value={object.status} {object} kind="secondary" />
+    <MilestoneStatusEditor bind:value={object.status} {object} kind="regular" />
     <DatePresenter
       bind:value={object.targetDate}
       editable
       label={tracker.string.TargetDate}
       detail={ui.string.SelectDate}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
     />
   </svelte:fragment>
diff --git a/plugins/tracker-resources/src/components/projects/CreateProject.svelte b/plugins/tracker-resources/src/components/projects/CreateProject.svelte
index f210a17244..2d2308b9c5 100644
--- a/plugins/tracker-resources/src/components/projects/CreateProject.svelte
+++ b/plugins/tracker-resources/src/components/projects/CreateProject.svelte
@@ -300,7 +300,7 @@
         value={members}
         label={tracker.string.Members}
         onChange={(refs) => (members = refs)}
-        kind={'secondary'}
+        kind={'regular'}
         size={'large'}
       />
     </div>
@@ -312,7 +312,7 @@
       <AssigneeBox
         label={tracker.string.Assignee}
         placeholder={tracker.string.Assignee}
-        kind={'secondary'}
+        kind={'regular'}
         size={'large'}
         avatarSize={'card'}
         bind:value={defaultAssignee}
diff --git a/plugins/tracker-resources/src/components/projects/ProjectIconChooser.svelte b/plugins/tracker-resources/src/components/projects/ProjectIconChooser.svelte
index c7e8b275ab..9ba3f46726 100644
--- a/plugins/tracker-resources/src/components/projects/ProjectIconChooser.svelte
+++ b/plugins/tracker-resources/src/components/projects/ProjectIconChooser.svelte
@@ -71,7 +71,7 @@
                 icon={obj}
                 iconProps={{ fill: getPlatformColor(_color ?? 0, $themeStore.dark) }}
                 size="medium"
-                kind={obj === _icon ? 'primary' : 'transparent'}
+                kind={obj === _icon ? 'accented' : 'ghost'}
                 on:click={() => {
                   _icon = obj
                 }}
diff --git a/plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte b/plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte
index 7cae58e9da..1c31ac40cb 100644
--- a/plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte
+++ b/plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte
@@ -137,7 +137,7 @@
       _class={tracker.class.Project}
       label={tracker.string.Project}
       bind:space={_space}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       component={ProjectPresenter}
       iconWithEmoji={tracker.component.IconWithEmoji}
@@ -174,14 +174,14 @@
       value={object}
       shouldShowLabel
       isEditable
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       justify="center"
       on:change={({ detail }) => (object.priority = detail)}
     />
     <AssigneeEditor
       object={{ ...object, space }}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       on:change={({ detail }) => (object.assignee = detail)}
     />
@@ -192,7 +192,7 @@
         key,
         targetClass: tracker.class.Issue,
         countLabel: tracker.string.NumberLabels,
-        kind: 'secondary',
+        kind: 'regular',
         size: 'large'
       }}
       on:open={(evt) => {
@@ -202,19 +202,19 @@
         labels = labels.filter((it) => it._id !== evt.detail)
       }}
     />
-    <EstimationEditor kind={'secondary'} size={'large'} value={object} />
+    <EstimationEditor kind={'regular'} size={'large'} value={object} />
     <ComponentSelector
       value={object.component}
       onChange={handleComponentIdChanged}
       isEditable={true}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
     />
     <MilestoneSelector
       value={object.milestone}
       onChange={handleMilestoneIdChanged}
       useComponent={object.component ?? undefined}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
     />
   </svelte:fragment>
diff --git a/plugins/tracker-resources/src/components/templates/DraftIssueChildEditor.svelte b/plugins/tracker-resources/src/components/templates/DraftIssueChildEditor.svelte
index 0e5e518118..0dfa64be6d 100644
--- a/plugins/tracker-resources/src/components/templates/DraftIssueChildEditor.svelte
+++ b/plugins/tracker-resources/src/components/templates/DraftIssueChildEditor.svelte
@@ -244,7 +244,7 @@
       />
     </div>
     <div class="buttons-group small-gap">
-      <Button label={presentation.string.Cancel} size="small" kind="transparent" on:click={close} />
+      <Button label={presentation.string.Cancel} size="small" kind="ghost" on:click={close} />
       <Button
         disabled={!canSave}
         label={presentation.string.Save}
diff --git a/plugins/tracker-resources/src/components/templates/EditIssueTemplate.svelte b/plugins/tracker-resources/src/components/templates/EditIssueTemplate.svelte
index da2b2837b4..6bbb07c218 100644
--- a/plugins/tracker-resources/src/components/templates/EditIssueTemplate.svelte
+++ b/plugins/tracker-resources/src/components/templates/EditIssueTemplate.svelte
@@ -211,10 +211,10 @@
       {/if}
     </svelte:fragment>
     <svelte:fragment slot="utils">
-      <Button icon={IconMoreH} kind={'transparent'} size={'medium'} on:click={showMenu} />
+      <Button icon={IconMoreH} kind={'ghost'} size={'medium'} on:click={showMenu} />
       <Button
         icon={setting.icon.Setting}
-        kind={'transparent'}
+        kind={'ghost'}
         showTooltip={{ label: setting.string.ClassSetting }}
         on:click={(ev) => {
           ev.stopPropagation()
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplateChildEditor.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplateChildEditor.svelte
index 68b1c5f4d8..1e2cef7839 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplateChildEditor.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplateChildEditor.svelte
@@ -181,7 +181,7 @@
       />
     </div>
     <div class="ml-2 buttons-group small-gap">
-      <Button label={presentation.string.Cancel} size="small" kind="transparent" on:click={close} />
+      <Button label={presentation.string.Cancel} size="small" kind="ghost" on:click={close} />
       <Button
         disabled={!canSave}
         label={presentation.string.Save}
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte
index 48591a98ab..ef33914658 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte
@@ -60,7 +60,7 @@
       width="min-content"
       icon={isCollapsed ? Collapsed : Expanded}
       size="small"
-      kind="transparent"
+      kind="ghost"
       label={tracker.string.SubIssuesList}
       labelParams={{ subIssues: children.length }}
       on:click={() => {
@@ -76,7 +76,7 @@
     icon={hasSubIssues ? IconAdd : undefined}
     label={hasSubIssues ? undefined : tracker.string.AddSubIssues}
     labelParams={{ subIssues: 0 }}
-    kind={'transparent'}
+    kind={'ghost'}
     size={'small'}
     showTooltip={{ label: tracker.string.AddSubIssues, props: { subIssues: 1 } }}
     on:click={() => {
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
index e3bd84a26d..db3d4b2fe3 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
@@ -104,13 +104,13 @@
     <slot name="label_selector" />
   </svelte:fragment>
   <svelte:fragment slot="header-tools">
-    <Button icon={IconAdd} label={tracker.string.IssueTemplate} kind={'primary'} on:click={showCreateDialog} />
+    <Button icon={IconAdd} label={tracker.string.IssueTemplate} kind={'accented'} on:click={showCreateDialog} />
   </svelte:fragment>
   <svelte:fragment slot="extra">
     {#if asideFloat && $$slots.aside}
       <Button
         icon={asideShown ? IconDetailsFilled : IconDetails}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'medium'}
         selected={asideShown}
         on:click={() => {
diff --git a/plugins/tracker-resources/src/components/workflow/RemoveStatus.svelte b/plugins/tracker-resources/src/components/workflow/RemoveStatus.svelte
index ebc5408582..66237f9b2f 100644
--- a/plugins/tracker-resources/src/components/workflow/RemoveStatus.svelte
+++ b/plugins/tracker-resources/src/components/workflow/RemoveStatus.svelte
@@ -89,7 +89,7 @@
       focus
       label={presentation.string.Ok}
       size={'small'}
-      kind={'primary'}
+      kind={'accented'}
       loading={processing}
       on:click={remove}
     />
diff --git a/plugins/tracker-resources/src/components/workflow/StatusEditor.svelte b/plugins/tracker-resources/src/components/workflow/StatusEditor.svelte
index d6cfe3a0a8..1d95f690dd 100644
--- a/plugins/tracker-resources/src/components/workflow/StatusEditor.svelte
+++ b/plugins/tracker-resources/src/components/workflow/StatusEditor.svelte
@@ -68,8 +68,8 @@
     </div>
   </div>
   <div class="buttons-group small-gap flex-no-shrink ml-2 mr-1">
-    <Button label={presentation.string.Cancel} kind="secondary" on:click={() => dispatch('cancel')} />
-    <Button label={presentation.string.Save} kind="primary" disabled={!canSave} on:click={() => dispatch('save')} />
+    <Button label={presentation.string.Cancel} kind="regular" on:click={() => dispatch('cancel')} />
+    <Button label={presentation.string.Save} kind="accented" disabled={!canSave} on:click={() => dispatch('save')} />
   </div>
 </div>
 
diff --git a/plugins/tracker-resources/src/components/workflow/Statuses.svelte b/plugins/tracker-resources/src/components/workflow/Statuses.svelte
index 98640d333b..762418bb9e 100644
--- a/plugins/tracker-resources/src/components/workflow/Statuses.svelte
+++ b/plugins/tracker-resources/src/components/workflow/Statuses.svelte
@@ -273,7 +273,7 @@
               width="min-content"
               icon={IconAdd}
               size="small"
-              kind="transparent"
+              kind="ghost"
               on:click={() => {
                 closeTooltip()
                 editingStatus = { category: category._id, color: category.color }
diff --git a/plugins/view-resources/src/components/ActionsPopup.svelte b/plugins/view-resources/src/components/ActionsPopup.svelte
index 85375f8b9b..7a6ef48a2b 100644
--- a/plugins/view-resources/src/components/ActionsPopup.svelte
+++ b/plugins/view-resources/src/components/ActionsPopup.svelte
@@ -305,7 +305,7 @@
     padding: 0 0.5rem;
     min-width: 1.5rem;
     color: var(--theme-caption-color);
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     border: 1px solid var(--theme-button-border);
     border-radius: 0.25rem;
   }
diff --git a/plugins/view-resources/src/components/BooleanEditorPopup.svelte b/plugins/view-resources/src/components/BooleanEditorPopup.svelte
index b5d27f550e..d45a92b7d0 100644
--- a/plugins/view-resources/src/components/BooleanEditorPopup.svelte
+++ b/plugins/view-resources/src/components/BooleanEditorPopup.svelte
@@ -29,7 +29,7 @@
     <BooleanPresenter value={true} />
     {#if value === true}
       <div class="check">
-        <CheckBox checked={value === true} primary />
+        <CheckBox checked={value === true} accented />
       </div>
     {/if}
   </div>
@@ -37,7 +37,7 @@
     <BooleanPresenter value={false} />
     {#if value === false}
       <div class="check">
-        <CheckBox checked={value === false} primary />
+        <CheckBox checked={value === false} accented />
       </div>
     {/if}
   </div>
@@ -46,7 +46,7 @@
       <BooleanPresenter value={undefined} />
       {#if value === undefined}
         <div class="check">
-          <CheckBox checked={value === undefined} primary />
+          <CheckBox checked={value === undefined} accented />
         </div>
       {/if}
     </div>
diff --git a/plugins/view-resources/src/components/ColorsPopup.svelte b/plugins/view-resources/src/components/ColorsPopup.svelte
index 787cc51511..fb0588eb3a 100644
--- a/plugins/view-resources/src/components/ColorsPopup.svelte
+++ b/plugins/view-resources/src/components/ColorsPopup.svelte
@@ -54,8 +54,8 @@
       cursor: pointer;
 
       &:hover {
-        border-color: var(--primary-button-focused-border);
-        box-shadow: 0 0 0 3px var(--primary-button-outline);
+        border-color: var(--accented-button-focused-border);
+        box-shadow: 0 0 0 3px var(--accented-button-outline);
       }
       &.selected {
         border-color: var(--caption-color);
diff --git a/plugins/view-resources/src/components/DateEditor.svelte b/plugins/view-resources/src/components/DateEditor.svelte
index 97634dc7f7..5962c5d0e7 100644
--- a/plugins/view-resources/src/components/DateEditor.svelte
+++ b/plugins/view-resources/src/components/DateEditor.svelte
@@ -21,7 +21,7 @@
   export let type: TypeDate | undefined
   export let label: IntlString | undefined = undefined
   export let onChange: (value: any) => void
-  export let kind: 'no-border' | 'link' | 'secondary' = 'no-border'
+  export let kind: 'no-border' | 'link' | 'regular' = 'no-border'
   export let size: 'small' | 'medium' | 'large' = 'small'
 </script>
 
diff --git a/plugins/view-resources/src/components/EditDoc.svelte b/plugins/view-resources/src/components/EditDoc.svelte
index 4383b43c3f..6683f3eb69 100644
--- a/plugins/view-resources/src/components/EditDoc.svelte
+++ b/plugins/view-resources/src/components/EditDoc.svelte
@@ -309,20 +309,15 @@
     </svelte:fragment>
 
     <svelte:fragment slot="utils">
-      <div class="p-1">
-        <Button icon={IconMoreH} kind={'transparent'} size={'medium'} on:click={showMenu} />
-      </div>
-      <div class="p-1">
-        <Button
-          icon={IconMixin}
-          kind={'transparent'}
-          shape={'round'}
-          selected={showAllMixins}
-          on:click={() => {
-            showAllMixins = !showAllMixins
-          }}
-        />
-      </div>
+      <Button icon={IconMoreH} kind={'ghost'} size={'medium'} on:click={showMenu} />
+      <Button
+        icon={IconMixin}
+        kind={'ghost'}
+        selected={showAllMixins}
+        on:click={() => {
+          showAllMixins = !showAllMixins
+        }}
+      />
     </svelte:fragment>
 
     <svelte:fragment slot="attributes" let:direction={dir}>
diff --git a/plugins/view-resources/src/components/Move.svelte b/plugins/view-resources/src/components/Move.svelte
index 7bdaf1baf1..1d19d9dc75 100644
--- a/plugins/view-resources/src/components/Move.svelte
+++ b/plugins/view-resources/src/components/Move.svelte
@@ -121,7 +121,7 @@
       label={view.string.Move}
       size={'small'}
       disabled={space === currentSpace?._id || status !== OK}
-      kind={'primary'}
+      kind={'accented'}
       on:click={moveAll}
     />
     <Button
diff --git a/plugins/view-resources/src/components/NumberEditor.svelte b/plugins/view-resources/src/components/NumberEditor.svelte
index 090c095897..64dfe85190 100644
--- a/plugins/view-resources/src/components/NumberEditor.svelte
+++ b/plugins/view-resources/src/components/NumberEditor.svelte
@@ -43,7 +43,7 @@
 
 {#if kind === 'button' || kind === 'link'}
   <Button
-    kind={kind === 'button' ? 'secondary' : kind}
+    kind={kind === 'button' ? 'regular' : kind}
     {size}
     {justify}
     {width}
diff --git a/plugins/view-resources/src/components/ObjectBox.svelte b/plugins/view-resources/src/components/ObjectBox.svelte
index 5e7faf7529..73a7fba763 100644
--- a/plugins/view-resources/src/components/ObjectBox.svelte
+++ b/plugins/view-resources/src/components/ObjectBox.svelte
@@ -122,7 +122,7 @@
       {focusIndex}
       width={width ?? 'min-content'}
       {icon}
-      iconProps={{ size: kind === 'link' || kind === 'secondary' ? 'small' : size }}
+      iconProps={{ size: kind === 'link' || kind === 'regular' ? 'small' : size }}
       {size}
       {kind}
       {justify}
diff --git a/plugins/view-resources/src/components/SpaceHeader.svelte b/plugins/view-resources/src/components/SpaceHeader.svelte
index 5a91a087a7..2bdc5b00f9 100644
--- a/plugins/view-resources/src/components/SpaceHeader.svelte
+++ b/plugins/view-resources/src/components/SpaceHeader.svelte
@@ -73,13 +73,3 @@
     <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
   </div>
 </div>
-
-<style lang="scss">
-  .header-with-mode-selector {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-  .header-without-label {
-    padding-left: 0;
-  }
-</style>
diff --git a/plugins/view-resources/src/components/Table.svelte b/plugins/view-resources/src/components/Table.svelte
index 52ad33de50..be7ebde7a8 100644
--- a/plugins/view-resources/src/components/Table.svelte
+++ b/plugins/view-resources/src/components/Table.svelte
@@ -395,7 +395,7 @@
 
         <Button
           label={ui.string.ShowMore}
-          kind={'transparent'}
+          kind={'ghost'}
           size={'small'}
           on:click={() => {
             limit = limit + 100
diff --git a/plugins/view-resources/src/components/UpDownNavigator.svelte b/plugins/view-resources/src/components/UpDownNavigator.svelte
index a0c3375421..02d3fbd5c9 100644
--- a/plugins/view-resources/src/components/UpDownNavigator.svelte
+++ b/plugins/view-resources/src/components/UpDownNavigator.svelte
@@ -37,14 +37,14 @@
   <Button
     focusIndex={10005}
     icon={IconDownOutline}
-    kind={'secondary'}
+    kind={'regular'}
     size={'medium'}
     on:click={(evt) => next(evt, true)}
   />
   <Button
     focusIndex={10006}
     icon={IconUpOutline}
-    kind={'secondary'}
+    kind={'regular'}
     size={'medium'}
     on:click={(evt) => next(evt, false)}
   />
diff --git a/plugins/view-resources/src/components/ViewOptions.svelte b/plugins/view-resources/src/components/ViewOptions.svelte
index 564a4ac70e..ae649e3f81 100644
--- a/plugins/view-resources/src/components/ViewOptions.svelte
+++ b/plugins/view-resources/src/components/ViewOptions.svelte
@@ -73,7 +73,7 @@
       <span class="overflow-label"><Label label={i === 0 ? view.string.Grouping : view.string.Then} /></span>
       <DropdownLabelsIntl
         label={view.string.Grouping}
-        kind={'secondary'}
+        kind={'regular'}
         size={'medium'}
         items={getItems(groupBy, i, viewOptions.groupBy)}
         selected={group}
@@ -87,7 +87,7 @@
     <span class="overflow-label"><Label label={view.string.Ordering} /></span>
     <DropdownLabelsIntl
       label={view.string.Ordering}
-      kind={'secondary'}
+      kind={'regular'}
       size={'medium'}
       items={orderBy}
       selected={viewOptions.orderBy[0]}
@@ -119,7 +119,7 @@
         {@const items = model.values.filter(({ hidden }) => !hidden?.(viewOptions))}
         <DropdownLabelsIntl
           label={model.label}
-          kind={'secondary'}
+          kind={'regular'}
           size={'medium'}
           {items}
           selected={viewOptions[model.key] ?? model.defaultValue}
diff --git a/plugins/view-resources/src/components/ViewOptionsButton.svelte b/plugins/view-resources/src/components/ViewOptionsButton.svelte
index 0cc0e304b1..4b48b591ba 100644
--- a/plugins/view-resources/src/components/ViewOptionsButton.svelte
+++ b/plugins/view-resources/src/components/ViewOptionsButton.svelte
@@ -22,7 +22,7 @@
   import ViewOptionsEditor from './ViewOptions.svelte'
 
   export let viewlet: Viewlet | undefined
-  export let kind: ButtonKind = 'secondary'
+  export let kind: ButtonKind = 'regular'
   export let viewOptions: ViewOptions
 
   const dispatch = createEventDispatcher()
diff --git a/plugins/view-resources/src/components/ViewletSettingButton.svelte b/plugins/view-resources/src/components/ViewletSettingButton.svelte
index 7a246e9bd1..7055064680 100644
--- a/plugins/view-resources/src/components/ViewletSettingButton.svelte
+++ b/plugins/view-resources/src/components/ViewletSettingButton.svelte
@@ -20,7 +20,7 @@
   import ViewletSetting from './ViewletSetting.svelte'
 
   export let viewlet: Viewlet | undefined
-  export let kind: ButtonKind = 'secondary'
+  export let kind: ButtonKind = 'regular'
   export let viewOptions: ViewOptions
 
   let btn: HTMLButtonElement
diff --git a/plugins/view-resources/src/components/filter/FilterBar.svelte b/plugins/view-resources/src/components/filter/FilterBar.svelte
index d48d07533b..d9b7ba3ca2 100644
--- a/plugins/view-resources/src/components/filter/FilterBar.svelte
+++ b/plugins/view-resources/src/components/filter/FilterBar.svelte
@@ -183,7 +183,7 @@
         />
       {/each}
       <div class="add-filter">
-        <Button size={'small'} icon={IconAdd} kind={'transparent'} on:click={add} />
+        <Button size={'small'} icon={IconAdd} kind={'ghost'} on:click={add} />
       </div>
     </div>
 
diff --git a/plugins/view-resources/src/components/filter/FilterRemovedNotification.svelte b/plugins/view-resources/src/components/filter/FilterRemovedNotification.svelte
index ed5a844ec0..634c875710 100644
--- a/plugins/view-resources/src/components/filter/FilterRemovedNotification.svelte
+++ b/plugins/view-resources/src/components/filter/FilterRemovedNotification.svelte
@@ -18,7 +18,7 @@
     </div>
   </div>
   <div class="close-button">
-    <Button icon={IconClose} kind="transparent" size="small" on:click={onRemove} />
+    <Button icon={IconClose} kind="ghost" size="small" on:click={onRemove} />
   </div>
 </div>
 
diff --git a/plugins/view-resources/src/components/filter/FilterSave.svelte b/plugins/view-resources/src/components/filter/FilterSave.svelte
index 2cbf1569fe..8b0067fe27 100644
--- a/plugins/view-resources/src/components/filter/FilterSave.svelte
+++ b/plugins/view-resources/src/components/filter/FilterSave.svelte
@@ -50,7 +50,7 @@
 >
   <div class="flex-row-center clear-mins">
     <div class="mr-3">
-      <Button focusIndex={1} icon={view.icon.Filter} size={'medium'} kind={'link-bordered'} disabled />
+      <Button focusIndex={1} icon={view.icon.Filter} size={'medium'} kind={'link-bordered'} noFocus />
     </div>
     <div class="clear-mins flex-grow">
       <EditBox
diff --git a/plugins/view-resources/src/components/filter/FilterSection.svelte b/plugins/view-resources/src/components/filter/FilterSection.svelte
index c76d35dc2a..4743293252 100644
--- a/plugins/view-resources/src/components/filter/FilterSection.svelte
+++ b/plugins/view-resources/src/components/filter/FilterSection.svelte
@@ -188,7 +188,7 @@
     display: flex;
     align-items: center;
     margin-bottom: 0.375rem;
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     padding: 0.125rem;
     border-radius: 0.25rem;
 
diff --git a/plugins/view-resources/src/components/list/ListHeader.svelte b/plugins/view-resources/src/components/list/ListHeader.svelte
index 02f68072bc..12c42f38ba 100644
--- a/plugins/view-resources/src/components/list/ListHeader.svelte
+++ b/plugins/view-resources/src/components/list/ListHeader.svelte
@@ -166,15 +166,10 @@
     </div>
     {#if createItemDialog !== undefined && createItemLabel !== undefined}
       <div class:on-hover={!mouseOver} class="flex-row-center">
-        <Button
-          icon={IconAdd}
-          kind={'transparent'}
-          showTooltip={{ label: createItemLabel }}
-          on:click={handleCreateItem}
-        />
+        <Button icon={IconAdd} kind={'ghost'} showTooltip={{ label: createItemLabel }} on:click={handleCreateItem} />
         <Button
           icon={selected.length > 0 ? IconBack : IconCheck}
-          kind={'transparent'}
+          kind={'ghost'}
           showTooltip={{ label: view.string.Select }}
           on:click={() => {
             let newSelection = [...$selectionStore]
diff --git a/plugins/view-resources/src/components/list/ListPresenter.svelte b/plugins/view-resources/src/components/list/ListPresenter.svelte
index da73575dfb..0119f6995d 100644
--- a/plugins/view-resources/src/components/list/ListPresenter.svelte
+++ b/plugins/view-resources/src/components/list/ListPresenter.svelte
@@ -23,7 +23,6 @@
   export let onChange: ((value: any) => void) | undefined
   export let value: any
   export let props: Record<string, any>
-  export let compression: boolean = false
   export let hideDivider: boolean = false
   export let compactMode: boolean = false
 
diff --git a/plugins/view-resources/src/components/list/SortableList.svelte b/plugins/view-resources/src/components/list/SortableList.svelte
index f1e8ca04bf..abefb2796b 100644
--- a/plugins/view-resources/src/components/list/SortableList.svelte
+++ b/plugins/view-resources/src/components/list/SortableList.svelte
@@ -187,7 +187,7 @@
             width="min-content"
             icon={IconAdd}
             size="small"
-            kind="transparent"
+            kind="ghost"
             on:click={create}
           />
         </div>
diff --git a/plugins/view-resources/src/components/list/SortableListItem.svelte b/plugins/view-resources/src/components/list/SortableListItem.svelte
index e60e2b9f26..b26ed01118 100644
--- a/plugins/view-resources/src/components/list/SortableListItem.svelte
+++ b/plugins/view-resources/src/components/list/SortableListItem.svelte
@@ -47,10 +47,10 @@
     {#if areButtonsVisible}
       <div class="ml-auto pl-2 buttons-group small-gap flex-no-shrink">
         {#if isEditing}
-          <Button label={presentation.string.Cancel} kind="secondary" on:click={() => dispatch('cancel')} />
+          <Button label={presentation.string.Cancel} kind="regular" on:click={() => dispatch('cancel')} />
           <Button
             label={presentation.string.Save}
-            kind="primary"
+            kind="accented"
             loading={isSaving}
             disabled={!canSave}
             on:click={() => dispatch('save')}
diff --git a/plugins/view/src/index.ts b/plugins/view/src/index.ts
index 9b3909f7c8..bed0f8ceb0 100644
--- a/plugins/view/src/index.ts
+++ b/plugins/view/src/index.ts
@@ -537,6 +537,7 @@ export interface DisplayProps {
   fixed?: 'left' | 'right' // using for align items in row
   suffix?: boolean
   optional?: boolean
+  compression?: boolean
   grow?: boolean
   dividerBefore?: boolean // should show divider before
 }
diff --git a/plugins/workbench-resources/src/components/AppItem.svelte b/plugins/workbench-resources/src/components/AppItem.svelte
index f0f5a9d87f..20bc87cfd5 100644
--- a/plugins/workbench-resources/src/components/AppItem.svelte
+++ b/plugins/workbench-resources/src/components/AppItem.svelte
@@ -70,7 +70,7 @@
       color: var(--theme-caption-color);
     }
     &:focus {
-      box-shadow: 0 0 0 2px var(--primary-button-focused-border);
+      box-shadow: 0 0 0 2px var(--accented-button-outline);
       .icon-container {
         color: var(--theme-caption-color);
       }
diff --git a/plugins/workbench-resources/src/components/HelpAndSupport.svelte b/plugins/workbench-resources/src/components/HelpAndSupport.svelte
index 1b34b07362..640d75aac5 100644
--- a/plugins/workbench-resources/src/components/HelpAndSupport.svelte
+++ b/plugins/workbench-resources/src/components/HelpAndSupport.svelte
@@ -173,7 +173,7 @@
     <Button
       id="contact-us"
       icon={setting.icon.Support}
-      kind={'transparent'}
+      kind={'ghost'}
       disabled={true}
       label={workbench.string.ContactUs}
     />
@@ -210,7 +210,7 @@
     padding: 0 0.5rem;
     min-width: 1.5rem;
     color: var(--theme-caption-color);
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     border: 1px solid var(--theme-divider-color);
     border-radius: 0.25rem;
   }
diff --git a/plugins/workbench-resources/src/components/Logo.svelte b/plugins/workbench-resources/src/components/Logo.svelte
index 2ea93e0cfe..90bb0fd4fa 100644
--- a/plugins/workbench-resources/src/components/Logo.svelte
+++ b/plugins/workbench-resources/src/components/Logo.svelte
@@ -26,7 +26,7 @@
     align-items: center;
     flex-shrink: 0;
     font-weight: 500;
-    color: var(--primary-button-color);
+    color: var(--accented-button-color);
     border-radius: 0.25rem;
     outline: none;
     cursor: pointer;
diff --git a/plugins/workbench-resources/src/components/SpaceBrowser.svelte b/plugins/workbench-resources/src/components/SpaceBrowser.svelte
index b5fcb0bcda..268c17d52d 100644
--- a/plugins/workbench-resources/src/components/SpaceBrowser.svelte
+++ b/plugins/workbench-resources/src/components/SpaceBrowser.svelte
@@ -119,7 +119,7 @@
     </div>
     {#if createItemDialog}
       <div class="mb-1 clear-mins">
-        <Button label={createItemLabel} kind={'primary'} size={'medium'} on:click={(ev) => showCreateDialog(ev)} />
+        <Button label={createItemLabel} kind={'accented'} size={'medium'} on:click={(ev) => showCreateDialog(ev)} />
       </div>
     {/if}
   </div>
@@ -176,7 +176,7 @@
             <Button size={'x-large'} label={plugin.string.Leave} on:click={() => leave(space)} />
           {:else}
             <Button size={'x-large'} label={plugin.string.View} on:click={() => view(space)} />
-            <Button size={'x-large'} kind={'primary'} label={plugin.string.Join} on:click={() => join(space)} />
+            <Button size={'x-large'} kind={'accented'} label={plugin.string.Join} on:click={() => join(space)} />
           {/if}
         </div>
       </div>
@@ -184,7 +184,7 @@
   </div>
   {#if createItemDialog}
     <div class="flex-center mt-10">
-      <Button size={'x-large'} kind={'primary'} label={createItemLabel} on:click={(ev) => showCreateDialog(ev)} />
+      <Button size={'x-large'} kind={'accented'} label={createItemLabel} on:click={(ev) => showCreateDialog(ev)} />
     </div>
   {/if}
 </Scroller>
diff --git a/plugins/workbench-resources/src/components/SpaceHeader.svelte b/plugins/workbench-resources/src/components/SpaceHeader.svelte
index e559d3e5f4..4ecb93b01e 100644
--- a/plugins/workbench-resources/src/components/SpaceHeader.svelte
+++ b/plugins/workbench-resources/src/components/SpaceHeader.svelte
@@ -108,7 +108,7 @@
         />
       {/if}
       {#if createItemDialog}
-        <Button icon={IconAdd} label={createItemLabel} kind={'primary'} on:click={(ev) => showCreateDialog(ev)} />
+        <Button icon={IconAdd} label={createItemLabel} kind={'accented'} on:click={(ev) => showCreateDialog(ev)} />
       {/if}
     </div>
   </div>
diff --git a/plugins/workbench-resources/src/components/SpecialView.svelte b/plugins/workbench-resources/src/components/SpecialView.svelte
index 03a281b02e..efb6187033 100644
--- a/plugins/workbench-resources/src/components/SpecialView.svelte
+++ b/plugins/workbench-resources/src/components/SpecialView.svelte
@@ -167,7 +167,7 @@
       <Button
         icon={IconAdd}
         label={createLabel}
-        kind={'primary'}
+        kind={'accented'}
         disabled={isCreationDisabled}
         on:click={() => showCreateDialog()}
       />