UI-Update-button-and-tags (#5878)

* Update Terrazzo config

* Update design tokens

* UI: update button oacity with variables

* Update `Badge` component

* replace non-clickable buttons with tags

* css fix: `overflow: hidden` was cutting off the kebabab menu

* ui: size badge update

Author: PavelLaptev

apps/desktop/src/lib/branch/ActiveBranchStatus.svelte

@@ -7,6 +7,7 @@
 	import { openExternalUrl } from '$lib/utils/url';
 	import { BranchController } from '$lib/vbranches/branchController';
 	import { getContext } from '@gitbutler/shared/context';
+	import Badge from '@gitbutler/ui/Badge.svelte';
 	import Button from '@gitbutler/ui/Button.svelte';
 	import Icon from '@gitbutler/ui/Icon.svelte';
 	import Modal from '@gitbutler/ui/Modal.svelte';
@@ -45,9 +46,9 @@
 			<div class="header__remote-branch">
 				{#if remoteBranch}
 					<Tooltip text="At least some of your changes have been pushed">
-						<Button size="tag" icon="branch-small" style="neutral" kind="solid" clickable={false}>
+						<Badge size="tag" icon="branch-small" style="neutral" kind="solid">
 							{localBranch ? 'local and remote' : 'remote'}
-						</Button>
+						</Badge>
 					</Tooltip>
 
 					{#if forgeBranch}
@@ -75,7 +76,6 @@
 				{#if pr?.htmlUrl}
 					<Button
 						size="tag"
-						clickable
 						icon="pr-small"
 						style="ghost"
 						outline

apps/desktop/src/lib/branch/BranchPreviewHeader.svelte

@@ -86,7 +86,6 @@
 		&.is-last {
 			border-bottom: none;
 			border-radius: 0 0 var(--radius-m) var(--radius-m);
-			overflow: hidden;
 		}
 
 		&.is-open {

apps/desktop/src/lib/commit/CommitsAccordion.svelte

@@ -266,7 +266,7 @@
 		<div bind:this={filesList} class="card files">
 			<div class="header" class:show-border={isCommitListScrolled}>
 				<h3 class="text-13 text-semibold">Commit files</h3>
-				<Badge label={files.length} />
+				<Badge>{files.length}</Badge>
 			</div>
 			<ScrollableContainer
 				onscroll={(e) => {

apps/desktop/src/lib/components/EditMode.svelte

@@ -206,7 +206,7 @@
 		{#if $base}
 			<div class="section">
 				<h3 class="text-14 text-semibold section-title">
-					<span>Incoming changes</span><Badge label={$base.upstreamCommits.length} />
+					<span>Incoming changes</span><Badge>{$base.upstreamCommits.length}</Badge>
 				</h3>
 				<div class="scroll-wrap">
 					<ScrollableContainer maxHeight={pxToRem(268)}>

apps/desktop/src/lib/components/IntegrateUpstreamModal.svelte

@@ -9,6 +9,7 @@
 	import { BranchController } from '$lib/vbranches/branchController';
 	import { VirtualBranchService } from '$lib/vbranches/virtualBranch';
 	import { getContext } from '@gitbutler/shared/context';
+	import Badge from '@gitbutler/ui/Badge.svelte';
 	import Button from '@gitbutler/ui/Button.svelte';
 	import Modal from '@gitbutler/ui/Modal.svelte';
 	import Textbox from '@gitbutler/ui/Textbox.svelte';
@@ -96,11 +97,9 @@
 				</span>
 			</h2>
 			{#if pr.draft}
-				<Button size="tag" clickable={false} style="neutral" icon="draft-pr-small">Draft</Button>
+				<Badge size="tag" style="neutral" icon="draft-pr-small">Draft</Badge>
 			{:else}
-				<Button size="tag" clickable={false} style="success" kind="solid" icon="pr-small">
-					Open
-				</Button>
+				<Badge size="tag" style="success" kind="solid" icon="pr-small">Open</Badge>
 			{/if}
 		</div>
 

apps/desktop/src/lib/components/PullRequestPreview.svelte

@@ -17,7 +17,6 @@
 
 <Button
 	size="tag"
-	clickable
 	reversedDirection
 	style="ghost"
 	outline

apps/desktop/src/lib/components/SyncButton.svelte

@@ -70,7 +70,7 @@
 		{/if}
 		<div class="header__title text-13 text-semibold">
 			<span>{title}</span>
-			<Badge label={files.length + (conflictedFiles?.entries.size || 0)} />
+			<Badge>{files.length + (conflictedFiles?.entries.size || 0)}</Badge>
 		</div>
 	</div>
 </div>

apps/desktop/src/lib/file/BranchFilesHeader.svelte

@@ -2,6 +2,7 @@
 	import FileStatusTag from './FileStatusTag.svelte';
 	import { computeFileStatus } from '$lib/utils/fileStatus';
 	import { computeAddedRemovedByFiles } from '$lib/utils/metrics';
+	import Badge from '@gitbutler/ui/Badge.svelte';
 	import Button from '@gitbutler/ui/Button.svelte';
 	import FileIcon from '@gitbutler/ui/file/FileIcon.svelte';
 	import { splitFilePath } from '@gitbutler/ui/utils/filePath';
@@ -33,32 +34,25 @@
 				{#if file.conflicted || isFileLocked}
 					<div class="header__tag-group">
 						{#if isFileLocked}
-							<Button
+							<Badge
 								size="tag"
-								clickable={false}
 								icon="locked-small"
 								style="warning"
 								tooltip="File changes cannot be moved because part of this file was already committed into this branch"
-								>Locked</Button
+								>Locked</Badge
 							>
 						{/if}
 						{#if file.conflicted}
-							<Button size="tag" clickable={false} icon="warning-small" style="error"
-								>Has conflicts</Button
-							>
+							<Badge size="tag" icon="warning-small" style="error">Has conflicts</Badge>
 						{/if}
 					</div>
 				{/if}
 				<div class="header__tag-group">
 					{#if fileStats.added}
-						<Button size="tag" clickable={false} style="success" kind="soft"
-							>+{fileStats.added}</Button
-						>
+						<Badge size="icon" style="success" kind="soft">+{fileStats.added}</Badge>
 					{/if}
 					{#if fileStats.removed}
-						<Button size="tag" clickable={false} style="error" kind="soft"
-							>-{fileStats.removed}</Button
-						>
+						<Badge size="icon" style="error" kind="soft">-{fileStats.removed}</Badge>
 					{/if}
 					{#if fileStatus}
 						<FileStatusTag status={fileStatus} />

apps/desktop/src/lib/file/FileCardHeader.svelte

@@ -141,7 +141,6 @@
 			<ul class="file-list">
 				{#each item.files as file}
 					<FileListItem filePath={file.path} fileStatus={file.status} clickable={false} />
-					<!-- <li><code class="code-string">{file.path}</code></li> -->
 				{/each}
 			</ul>
 		{:else}