UI tweaks #2 (#4104)

* Zen PC styles updated * UI update: Textbox count button hover * Profile sidebar hovers update * Tokens update * formatting
gitbutlerapp · Jun 18, 2024 · 32a08f1 · 32a08f1
1 parent c1e5796
commit 32a08f1
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/app/src/lib/components/Board.svelte b/app/src/lib/components/Board.svelte
@@ -279,7 +279,7 @@
 			transform: translateX(-50%) scale(1.15);
 			border-radius: 100%;
 			background-color: var(--clr-illustration-outline);
-			opacity: 0.08;
+			opacity: 0.1;
 			animation-delay: 3s;
 		}
 	}
@@ -288,7 +288,7 @@
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		transform: translate(-50%, -70%) translateZ(0);
+		transform: translate(-50%, -66%) translateZ(0);
 		width: 212px;
 	}
 

diff --git a/app/src/lib/components/TextBox.svelte b/app/src/lib/components/TextBox.svelte
@@ -261,7 +261,7 @@
 		&:hover,
 		&:focus {
 			outline: none;
-			background-color: var(--clr-bg-2);
+			background-color: var(--clr-bg-1-muted);
 			color: var(--clr-scale-ntrl-40);
 		}
 	}

diff --git a/app/src/lib/components/settings/Sidebar.svelte b/app/src/lib/components/settings/Sidebar.svelte
@@ -199,7 +199,7 @@
 
 		&:not(.item_selected):hover {
 			transition: none;
-			background-color: var(--clr-bg-2);
+			background-color: var(--clr-bg-1-muted);
 		}
 
 		& span {
@@ -238,7 +238,7 @@
 		transition: background-color var(--transition-fast);
 
 		&:hover {
-			background-color: var(--clr-bg-2);
+			background-color: var(--clr-bg-1-muted);
 		}
 	}
 </style>
diff --git a/app/src/styles/tokens.css b/app/src/styles/tokens.css
@@ -328,7 +328,7 @@
 	--clr-theme-err-element: var(--clr-core-err-40);
 	--clr-theme-err-element-hover: var(--clr-core-err-30);
 	--clr-theme-err-on-element: var(--clr-core-err-95);
-	--clr-theme-err-on-soft: var(--clr-core-err-95);
+	--clr-theme-err-on-soft: var(--clr-core-err-90);
 	--clr-theme-err-soft: var(--clr-core-err-20);
 	--clr-theme-err-soft-hover: var(--clr-core-err-30);
 	--clr-theme-ntrl-element: var(--clr-core-ntrl-80);
@@ -341,28 +341,28 @@
 	--clr-theme-pop-element: var(--clr-core-pop-40);
 	--clr-theme-pop-element-hover: var(--clr-core-pop-30);
 	--clr-theme-pop-on-element: var(--clr-core-ntrl-100);
-	--clr-theme-pop-on-soft: var(--clr-core-pop-95);
+	--clr-theme-pop-on-soft: var(--clr-core-pop-90);
 	--clr-theme-pop-soft: var(--clr-core-pop-10);
 	--clr-theme-pop-soft-hover: var(--clr-core-pop-20);
 	--clr-theme-purp-bg: var(--clr-core-purp-10);
 	--clr-theme-purp-element: var(--clr-core-purp-40);
 	--clr-theme-purp-element-hover: var(--clr-core-purp-30);
 	--clr-theme-purp-on-element: var(--clr-core-purp-90);
-	--clr-theme-purp-on-soft: var(--clr-core-purp-95);
+	--clr-theme-purp-on-soft: var(--clr-core-purp-90);
 	--clr-theme-purp-soft: var(--clr-core-purp-20);
 	--clr-theme-purp-soft-hover: var(--clr-core-purp-10);
 	--clr-theme-succ-bg: var(--clr-core-succ-10);
 	--clr-theme-succ-element: var(--clr-core-succ-40);
 	--clr-theme-succ-element-hover: var(--clr-core-succ-30);
 	--clr-theme-succ-on-element: var(--clr-core-succ-90);
-	--clr-theme-succ-on-soft: var(--clr-core-succ-95);
+	--clr-theme-succ-on-soft: var(--clr-core-succ-90);
 	--clr-theme-succ-soft: var(--clr-core-succ-10);
 	--clr-theme-succ-soft-hover: var(--clr-core-succ-20);
 	--clr-theme-warn-bg: var(--clr-core-warn-10);
 	--clr-theme-warn-element: var(--clr-core-warn-40);
 	--clr-theme-warn-element-hover: var(--clr-core-warn-30);
 	--clr-theme-warn-on-element: var(--clr-core-warn-90);
-	--clr-theme-warn-on-soft: var(--clr-core-warn-95);
+	--clr-theme-warn-on-soft: var(--clr-core-warn-90);
 	--clr-theme-warn-soft: var(--clr-core-warn-20);
 	--clr-theme-warn-soft-hover: var(--clr-core-warn-30);
 }