Merge pull request #1808 from gitbutlerapp/commit

style updates

packages/ui/src/lib/icons/icons.json

@@ -41,5 +41,6 @@
 	"bin": "M6.04999 11V8H7.54999V11H6.04999Z M8.45001 8V11H9.95001V8H8.45001Z M11.15 3V4.85H15.2V6.35H13.55V12C13.55 13.5188 12.3188 14.75 10.8 14.75H5.20001C3.68123 14.75 2.45001 13.5188 2.45001 12V6.35H0.799988V4.85H4.84998V3C4.84998 2.0335 5.63348 1.25 6.59998 1.25H9.39998C10.3665 1.25 11.15 2.0335 11.15 3ZM6.34998 3C6.34998 2.86193 6.46191 2.75 6.59998 2.75H9.39998C9.53805 2.75 9.64998 2.86193 9.64998 3V4.85H6.34998V3ZM3.95001 6.35H12.05V12C12.05 12.6904 11.4904 13.25 10.8 13.25H5.20001C4.50966 13.25 3.95001 12.6904 3.95001 12V6.35Z",
 	"update-small": "M4.75 8C4.75 6.20507 6.20507 4.75 8 4.75C9.72541 4.75 11.1368 6.09454 11.2435 7.79304H9.61155C9.25972 7.79304 9.07927 8.21454 9.32211 8.46912L11.6021 10.8594C11.7597 11.0246 12.0234 11.0246 12.181 10.8594L14.4609 8.46912C14.7038 8.21454 14.5233 7.79304 14.1715 7.79304H12.7456C12.6372 5.2657 10.554 3.25 8 3.25C5.37665 3.25 3.25 5.37665 3.25 8C3.25 10.6234 5.37665 12.75 8 12.75C8.66233 12.75 9.29484 12.614 9.86961 12.3677L9.27878 10.989C8.88728 11.1567 8.4555 11.25 8 11.25C6.20507 11.25 4.75 9.79493 4.75 8Z",
 	"tick-extrasmall": "M7.21418 8.67239C7.31349 8.78274 7.48652 8.78274 7.58583 8.67239L10.4425 5.49828L11.5575 6.50172L8.70077 9.67584C8.0056 10.4483 6.79441 10.4483 6.09924 9.67584L4.44254 7.83506L5.55748 6.83161L7.21418 8.67239Z",
-	"empty-checkbox-small": "M4.25 6C4.25 5.0335 5.0335 4.25 6 4.25H10C10.9665 4.25 11.75 5.0335 11.75 6V10C11.75 10.9665 10.9665 11.75 10 11.75H6C5.0335 11.75 4.25 10.9665 4.25 10V6ZM6 5.75C5.86193 5.75 5.75 5.86193 5.75 6V10C5.75 10.1381 5.86193 10.25 6 10.25H10C10.1381 10.25 10.25 10.1381 10.25 10V6C10.25 5.86193 10.1381 5.75 10 5.75H6Z"
+	"empty-checkbox-small": "M4.25 6C4.25 5.0335 5.0335 4.25 6 4.25H10C10.9665 4.25 11.75 5.0335 11.75 6V10C11.75 10.9665 10.9665 11.75 10 11.75H6C5.0335 11.75 4.25 10.9665 4.25 10V6ZM6 5.75C5.86193 5.75 5.75 5.86193 5.75 6V10C5.75 10.1381 5.86193 10.25 6 10.25H10C10.1381 10.25 10.25 10.1381 10.25 10V6C10.25 5.86193 10.1381 5.75 10 5.75H6Z",
+	"undo-small": "M6 3L2.5 6L6 9V6.75H9.75C10.7165 6.75 11.5 7.5335 11.5 8.5C11.5 9.4665 10.7165 10.25 9.75 10.25H4V11.75H9.75C11.5449 11.75 13 10.2949 13 8.5C13 6.70507 11.5449 5.25 9.75 5.25H6V3Z"
 }

packages/ui/src/routes/[projectId]/components/BranchLabel.svelte

@@ -45,6 +45,7 @@
 		border: 1px solid transparent;
 	}
 	.branch-name {
+		cursor: text;
 		display: inline-block;
 		&:hover {
 			background-color: var(--clr-theme-container-pale);

packages/ui/src/routes/[projectId]/components/Tag.svelte

@@ -1,5 +1,11 @@
 <script lang="ts" context="module">
-	export type TagColor = 'success' | 'error' | 'warning' | 'neutral-light' | 'neutral-dim';
+	export type TagColor =
+		| 'success'
+		| 'error'
+		| 'warning'
+		| 'neutral-light'
+		| 'neutral-dim'
+		| 'ghost';
 </script>
 
 <script lang="ts">
@@ -20,8 +26,8 @@
 	class:warning={color == 'warning'}
 	class:neutral-light={color == 'neutral-light'}
 	class:neutral-dim={color == 'neutral-dim'}
-	class:text-semibold={filled}
-	class:border
+	class:ghost={color == 'ghost'}
+	class:tag-border={border}
 	class:filled
 	class:not-button={!clickable}
 	on:click
@@ -46,6 +52,7 @@
 		height: var(--size-btn-s);
 		padding: var(--space-2) var(--space-4);
 		border-radius: var(--radius-m);
+		transition: background-color var(--transition-fast);
 	}
 	.icon {
 		flex-shrink: 0;
@@ -54,14 +61,27 @@
 		display: inline-block;
 		padding: 0 var(--space-2);
 	}
+
+	/* colors */
+
+	.ghost {
+		color: var(--clr-theme-scale-ntrl-40);
+		&:hover {
+			background: var(--clr-theme-container-sub);
+		}
+		&.tag-border {
+			box-shadow: inset 0 0 0 1px var(--clr-theme-scale-ntrl-60);
+		}
+	}
+
 	.success {
 		color: var(--clr-theme-succ-outline-dark);
 		background: var(--clr-theme-succ-container);
 		&:hover {
 			background: var(--clr-theme-succ-container-dim);
 		}
-		&.border {
-			border: 1px solid var(--clr-theme-scale-succ-60);
+		&.tag-border {
+			box-shadow: inset 0 0 0 1px var(--clr-theme-scale-succ-60);
 		}
 		&.filled {
 			background: var(--clr-theme-succ-element);
@@ -77,8 +97,8 @@
 		&:hover {
 			background: var(--clr-theme-err-container-dim);
 		}
-		&.border {
-			border: 1px solid var(--clr-theme-scale-err-60);
+		&.tag-border {
+			box-shadow: inset 0 0 0 1px var(--clr-theme-scale-err-60);
 		}
 		&.filled {
 			color: var(--clr-theme-err-on-element);
@@ -94,8 +114,8 @@
 		&:hover {
 			background: var(--clr-theme-warn-container-dim);
 		}
-		&.border {
-			border: 1px solid var(--clr-theme-scale-warn-60);
+		&.tag-border {
+			box-shadow: inset 0 0 0 1px var(--clr-theme-scale-warn-60);
 		}
 		&.filled {
 			background: var(--clr-theme-warn-element);
@@ -104,14 +124,15 @@
 			}
 		}
 	}
+
 	.neutral-light {
 		color: var(--clr-theme-scale-ntrl-40);
 		background: var(--clr-theme-container-mid);
 		&:hover {
 			background: var(--clr-theme-container-dim);
 		}
-		&.border {
-			border: 1px solid var(--clr-theme-scale-ntrl-60);
+		&.tag-border {
+			box-shadow: inset 0 0 0 1px var(--clr-theme-scale-ntrl-60);
 		}
 		&.filled {
 			background: var(--clr-theme-scale-ntrl-40);
@@ -120,14 +141,15 @@
 			}
 		}
 	}
+
 	.neutral-dim {
 		color: var(--clr-theme-scale-ntrl-20);
 		background: var(--clr-theme-container-dim);
 		&:hover {
 			background: var(--clr-theme-container-dark);
 		}
-		&.border {
-			border: 1px solid var(--clr-theme-scale-ntrl-60);
+		&.tag-border {
+			box-shadow: inset 0 0 0 1px var(--clr-theme-scale-ntrl-40);
 		}
 		&.filled {
 			background: var(--clr-theme-scale-ntrl-30);
@@ -136,6 +158,9 @@
 			}
 		}
 	}
+
+	/* modifiers */
+
 	.not-button {
 		pointer-events: none;
 	}

packages/ui/src/styles/tokens.css

@@ -185,7 +185,7 @@
 	--clr-theme-scale-warn-90: var(--clr-core-warn-90);
 	--clr-theme-succ-container: var(--clr-core-succ-90);
 	--clr-theme-succ-container-dark: var(--clr-core-succ-70);
-	--clr-theme-succ-conteiner-dim: var(--clr-core-succ-80);
+	--clr-theme-succ-container-dim: var(--clr-core-succ-80);
 	--clr-theme-succ-element: var(--clr-core-succ-50);
 	--clr-theme-succ-element-dark: var(--clr-core-succ-35);
 	--clr-theme-succ-element-dim: var(--clr-core-succ-40);