Merge pull request #13130 from gitbutlerapp/add-change-status-tokens

fix(ui): add change status tokens

Author: PavelLaptev

apps/desktop/package.json

@@ -21,7 +21,7 @@
 	"devDependencies": {
 		"@anthropic-ai/sdk": "^0.80.0",
 		"@gitbutler/core": "workspace:*",
-		"@gitbutler/design-core": "2.0.0",
+		"@gitbutler/design-core": "2.2.1",
 		"@gitbutler/shared": "workspace:*",
 		"@gitbutler/svelte-comment-injector": "workspace:*",
 		"@gitbutler/ui": "workspace:*",

apps/web/package.json

@@ -16,7 +16,7 @@
 	"devDependencies": {
 		"@csstools/postcss-global-data": "^3.0.0",
 		"@gitbutler/core": "workspace:*",
-		"@gitbutler/design-core": "2.0.0",
+		"@gitbutler/design-core": "2.2.1",
 		"@gitbutler/shared": "workspace:*",
 		"@gitbutler/ui": "workspace:*",
 		"@playwright/test": "1.58.2",

packages/ui/package.json

@@ -34,7 +34,7 @@
 	},
 	"devDependencies": {
 		"@csstools/postcss-bundler": "^2.0.8",
-		"@gitbutler/design-core": "2.0.0",
+		"@gitbutler/design-core": "2.2.1",
 		"@playwright/experimental-ct-svelte": "^1.58.2",
 		"@storybook/addon-docs": "^10.2.19",
 		"@storybook/addon-links": "^10.2.19",

packages/ui/src/lib/components/file/FileListItem.svelte

@@ -300,14 +300,6 @@
 			color: var(--fill-pop-fg);
 		}
 
-		/* &.notched {
-			padding-left: 18px;
-		}
-
-		&.notched .draggable-handle {
-			left: 8px;
-		} */
-
 		& .draggable-handle {
 			display: none;
 			position: absolute;
@@ -352,7 +344,7 @@
 
 		& .locked {
 			display: flex;
-			color: var(--fill-warn-bg);
+			color: var(--change-status-modification);
 		}
 	}
 </style>

packages/ui/src/lib/components/file/FileStatusBadge.svelte

@@ -92,16 +92,16 @@
 
 	/* MODIFIERS */
 	.status-dot-wrap.added {
-		--file-dot-color: var(--fill-safe-bg);
+		--file-dot-color: var(--change-status-addition);
 	}
 	.status-dot-wrap.modified {
-		--file-dot-color: var(--fill-warn-bg);
+		--file-dot-color: var(--change-status-modification);
 	}
 	.status-dot-wrap.deleted {
-		--file-dot-color: var(--fill-danger-bg);
+		--file-dot-color: var(--change-status-deletion);
 	}
 	.status-dot-wrap.renamed {
-		--file-dot-color: var(--fill-purple-bg);
+		--file-dot-color: var(--change-status-rename);
 	}
 
 	/* FULL-LARGE VARIANT */