refactor-remove-unused-css-variables (#11576)

* refactor(ui): remove unused css classes

* fix broken variables

* update hover variables

* feat(ui): replace 'error' with 'danger' modal type

* style: Replace hardcoded hover color with CSS variable to enable themeability

Author: PavelLaptev

apps/desktop/package.json

@@ -25,7 +25,7 @@
 	"devDependencies": {
 		"@anthropic-ai/sdk": "^0.59.0",
 		"@gitbutler/core": "workspace:*",
-		"@gitbutler/design-core": "1.5.1",
+		"@gitbutler/design-core": "1.6.0",
 		"@gitbutler/shared": "workspace:*",
 		"@gitbutler/svelte-comment-injector": "workspace:*",
 		"@gitbutler/ui": "workspace:*",

apps/desktop/src/components/BranchCommitList.svelte

@@ -455,7 +455,7 @@
 		cursor: pointer;
 
 		&:not(.selected):hover {
-			background: var(--clr-bg-1-muted);
+			background: var(--hover-bg-1);
 		}
 
 		&:first-child {

apps/desktop/src/components/BranchHeader.svelte

@@ -242,7 +242,7 @@
 
 		/* Selected but NOT in focus */
 		&:hover {
-			--branch-selected-bg: var(--clr-bg-1-muted);
+			--branch-selected-bg: var(--hover-bg-1);
 
 			& .branch-header__drag-handle {
 				width: 16px;

apps/desktop/src/components/BranchLabel.svelte

@@ -182,7 +182,7 @@
 		&:not([readonly]):not([disabled]):focus {
 			border: 1px solid color-mix(in srgb, var(--clr-text-1), transparent 70%);
 			outline: none;
-			background-color: var(--hover-bg);
+			background-color: var(--hover-bg-1);
 		}
 
 		&[disabled] {

apps/desktop/src/components/ChromeHeader.svelte

@@ -226,9 +226,9 @@
 					<div class="chrome-current-branch">
 						<div class="chrome-current-branch__content">
 							<Icon name="branch-remote" color="var(--clr-text-2)" />
-							<span class="text-12 text-semibold clr-text-1 truncate">{currentBranchName}</span>
+							<span class="text-12 text-bold clr-text-2 truncate">{currentBranchName}</span>
 							{#if isNotInWorkspace}
-								<span class="text-12 text-semibold clr-text-2"> read-only </span>
+								<span class="text-12 text-bold clr-text-2 op-60"> read-only </span>
 							{/if}
 						</div>
 					</div>
@@ -327,7 +327,6 @@
 		border-left: none;
 		border-top-right-radius: 100px;
 		border-bottom-right-radius: 100px;
-		background-color: var(--clr-bg-2-muted);
 	}
 
 	.chrome-current-branch__content {
@@ -336,7 +335,7 @@
 		overflow: hidden;
 		gap: 4px;
 		text-wrap: nowrap;
-		opacity: 0.7;
+		opacity: 0.8;
 	}
 
 	.chrome-left {

apps/desktop/src/components/CodegenRow.svelte

@@ -182,7 +182,7 @@
 
 		&.active.selected,
 		&[type='button']:hover {
-			background-color: var(--clr-theme-purple-bg-muted);
+			background-color: var(--hover-purple-bg);
 		}
 	}
 

apps/desktop/src/components/CommitFailedModalContent.svelte

@@ -69,7 +69,7 @@
 <div class="commit-failed__wrapper">
 	<ModalHeader
 		sticky={!isScrollTopVisible}
-		type={data.newCommitId ? 'warning' : 'error'}
+		type={data.newCommitId ? 'warning' : 'danger'}
 		closeButton
 		{oncloseclick}
 		closeButtonTestId={TestId.GlobalModalActionButton}

apps/desktop/src/components/CommitRow.svelte

@@ -205,7 +205,7 @@
 
 		&:hover,
 		&.menu-shown {
-			background-color: var(--clr-bg-1-muted);
+			background-color: var(--hover-bg-1);
 		}
 
 		&:hover .commit-row__drag-handle {
@@ -234,7 +234,7 @@
 
 			&:not(.selected):hover,
 			&.menu-shown {
-				background-color: var(--clr-theme-danger-bg-muted);
+				background-color: var(--hover-danger-bg);
 			}
 
 			.commit-name {
@@ -332,7 +332,7 @@
 		padding: 0 4px;
 		border: 1px solid var(--clr-border-2);
 		border-radius: var(--radius-ml);
-		background-color: var(--clr-bg-1-muted);
+		background-color: var(--clr-bg-muted);
 		color: var(--clr-text-2);
 		line-height: 1;
 		cursor: pointer;

apps/desktop/src/components/DialogBubble.svelte

@@ -86,7 +86,6 @@
 	.bubble-wrap {
 		display: flex;
 		flex-direction: column;
-
 		width: 100%;
 		padding: 0 16px;
 
@@ -117,7 +116,7 @@
 
 		& .bubble__header,
 		& .bubble-message {
-			background-color: var(--clr-theme-pop-bg-muted);
+			background-color: var(--clr-theme-pop-bg);
 		}
 	}
 

apps/desktop/src/components/FilePreviewPlaceholder.svelte

@@ -30,7 +30,6 @@
 			height: 520px;
 			transform: translate(-50%, -50%);
 			border-radius: 100%;
-			background-color: red;
 			background: radial-gradient(var(--clr-bg-2) 10%, oklch(from var(--clr-bg-2) l c h / 0) 50%);
 			content: '';
 			transition: opacity 0.1s;