design-tokens-updates (#11352)

* update color tokens usage

in order to support upcoming dt changes

* chore(deps): upgrade @gitbutler/design-core from 1.3.9 to 1.3.11 across workspace files to pick up bug fixes and updated integrity hashes

Author: PavelLaptev

apps/desktop/package.json

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

apps/desktop/src/components/CommitFailedModalContent.svelte

@@ -116,7 +116,6 @@
 	.commit-failed__wrapper {
 		display: flex;
 		flex-direction: column;
-		/* max-height: 620px; */
 		overflow: hidden;
 	}
 

apps/desktop/src/components/SyncButton.svelte

@@ -49,7 +49,7 @@
 		}
 	}}
 >
-	<span class="capitalize-first">
+	<span class="capitalize">
 		{#if loading}
 			Fetching...
 		{:else if lastFetched}
@@ -72,14 +72,6 @@
 </Button>
 
 <style lang="postcss">
-	.capitalize-first {
-		display: block;
-	}
-
-	.capitalize-first::first-letter {
-		text-transform: uppercase;
-	}
-
 	.target-branch {
 		display: inline-flex;
 		align-items: center;

apps/web/package.json

@@ -15,7 +15,7 @@
 	},
 	"devDependencies": {
 		"@csstools/postcss-global-data": "^3.0.0",
-		"@gitbutler/design-core": "1.3.9",
+		"@gitbutler/design-core": "1.3.11",
 		"@gitbutler/core": "workspace:*",
 		"@gitbutler/shared": "workspace:*",
 		"@gitbutler/ui": "workspace:*",

apps/web/src/routes/(home)/components/CtaButton.svelte

@@ -143,7 +143,7 @@
 		border: 1px solid var(--clr-scale-pop-60);
 		border-radius: var(--radius-xl);
 		background-color: var(--clr-theme-pop-soft);
-		color: var(--clr-theme-pop-on-soft);
+		color: var(--clr-scale-pop-10);
 		transition:
 			transform 0.15s ease-out,
 			color 0.15s ease,

packages/ui/package.json

@@ -47,7 +47,7 @@
 		"@codemirror/language": "^6.11.2",
 		"@codemirror/legacy-modes": "^6.5.2",
 		"@csstools/postcss-bundler": "^2.0.8",
-		"@gitbutler/design-core": "1.3.9",
+		"@gitbutler/design-core": "1.3.11",
 		"@lezer/common": "^1.2.3",
 		"@lezer/highlight": "^1.2.1",
 		"@playwright/experimental-ct-svelte": "^1.56.1",

packages/ui/src/lib/components/Badge.svelte

@@ -65,8 +65,8 @@
 
 		/* SOLID */
 		&.neutral.solid {
-			background-color: var(--clr-scale-ntrl-40);
-			color: var(--clr-scale-ntrl-100);
+			background-color: var(--clr-theme-ntrl-element);
+			color: var(--clr-theme-ntrl-on-element);
 		}
 
 		&.pop.solid {
@@ -96,8 +96,8 @@
 
 		/* SOFT */
 		&.neutral.soft {
-			background-color: var(--clr-scale-ntrl-80);
-			color: var(--clr-text-1);
+			background-color: var(--clr-theme-ntrl-soft);
+			color: var(--clr-theme-ntrl-on-soft);
 		}
 
 		&.pop.soft {