CSS: Button and Tag fixes (#3616)

app/src/lib/components/Button.svelte

@@ -102,39 +102,7 @@
 		&:disabled {
 			cursor: default;
 			pointer-events: none;
-			opacity: 0.7;
+			opacity: 0.5;
-
-			&.neutral.solid,
-			&.pop.solid,
-			&.success.solid,
-			&.error.solid,
-			&.warning.solid,
-			&.purple.solid {
-				--btn-clr: var(--clr-text-2);
-				--btn-bg: var(--clr-bg-3);
-
-				& .badge {
-					--btn-bg: var(--clr-scale-ntrl-100);
-				}
-			}
-
-			&.neutral.soft,
-			&.pop.soft,
-			&.success.soft,
-			&.error.soft,
-			&.warning.soft,
-			&.purple.soft {
-				--btn-clr: var(--clr-text-2);
-				--btn-bg: var(--clr-bg-3);
-			}
-
-			&.ghost {
-				--btn-clr: var(--clr-text-2);
-			}
-
-			&.ghost.solid {
-				border-color: var(--clr-bg-3);
-			}
 		}
 		&.wide {
 			display: flex;
@@ -238,7 +206,7 @@
 
 	.pop {
 		&.soft {
-			--btn-clr: var(--clr-theme-pop-on-bg);
+			--btn-clr: var(--clr-theme-pop-on-soft);
 			--btn-bg: var(--clr-scale-pop-80);
 			/* if button */
 			&:not(.not-clickable, &:disabled):hover {
@@ -261,7 +229,7 @@
 
 	.success {
 		&.soft {
-			--btn-clr: var(--clr-theme-succ-on-bg);
+			--btn-clr: var(--clr-theme-succ-on-soft);
 			--btn-bg: var(--clr-scale-succ-80);
 			/* if button */
 			&:not(.not-clickable, &:disabled):hover {
@@ -284,7 +252,7 @@
 
 	.error {
 		&.soft {
-			--btn-clr: var(--clr-theme-err-on-bg);
+			--btn-clr: var(--clr-theme-err-on-soft);
 			--btn-bg: var(--clr-scale-err-80);
 			/* if button */
 			&:not(.not-clickable, &:disabled):hover {
@@ -307,7 +275,7 @@
 
 	.warning {
 		&.soft {
-			--btn-clr: var(--clr-theme-warn-on-bg);
+			--btn-clr: var(--clr-theme-warn-on-soft);
 			--btn-bg: var(--clr-scale-warn-80);
 			/* if button */
 			&:not(.not-clickable, &:disabled):hover {
@@ -330,7 +298,7 @@
 
 	.purple {
 		&.soft {
-			--btn-clr: var(--clr-theme-purp-on-bg);
+			--btn-clr: var(--clr-theme-purp-on-soft);
 			--btn-bg: var(--clr-scale-purp-80);
 			/* if button */
 			&:not(.not-clickable, &:disabled):hover {

app/src/lib/components/Tag.svelte

@@ -114,7 +114,7 @@
 
 	.pop {
 		&.soft {
-			color: var(--clr-theme-pop-on-bg);
+			color: var(--clr-theme-pop-on-soft);
 			background: var(--clr-scale-pop-80);
 			/* if button */
 			&:not(.not-button, &:disabled):hover {
@@ -134,7 +134,7 @@
 
 	.success {
 		&.soft {
-			color: var(--clr-theme-succ-on-bg);
+			color: var(--clr-theme-succ-on-soft);
 			background: var(--clr-scale-succ-80);
 			/* if button */
 			&:not(.not-button, &:disabled):hover {
@@ -154,7 +154,7 @@
 
 	.error {
 		&.soft {
-			color: var(--clr-theme-err-on-bg);
+			color: var(--clr-theme-err-on-soft);
 			background: var(--clr-scale-err-80);
 			/* if button */
 			&:not(.not-button, &:disabled):hover {
@@ -174,7 +174,7 @@
 
 	.warning {
 		&.soft {
-			color: var(--clr-theme-warn-on-bg);
+			color: var(--clr-theme-warn-on-soft);
 			background: var(--clr-scale-warn-80);
 			/* if button */
 			&:not(.not-button, &:disabled):hover {
@@ -194,7 +194,7 @@
 
 	.purple {
 		&.soft {
-			color: var(--clr-theme-purp-on-bg);
+			color: var(--clr-theme-purp-on-soft);
 			background: var(--clr-scale-purp-80);
 			/* if button */
 			&:not(.not-button, &:disabled):hover {
@@ -214,43 +214,15 @@
 
 	/* modifiers */
 
-	.not-button {
-		cursor: default;
-		user-select: none;
-	}
-
 	.disabled {
 		cursor: default;
 		pointer-events: none;
-		/* opacity: 0.5; */
+		opacity: 0.6;
+	}
 
-		&.neutral.solid,
+	.not-button {
-		&.pop.solid,
+		cursor: default;
-		&.success.solid,
+		user-select: none;
-		&.error.solid,
-		&.warning.solid,
-		&.purple.solid {
-			color: var(--clr-text-2);
-			background: oklch(from var(--clr-scale-ntrl-60) l c h / 0.15);
-		}
-
-		&.neutral.soft,
-		&.pop.soft,
-		&.success.soft,
-		&.error.soft,
-		&.warning.soft,
-		&.purple.soft {
-			color: var(--clr-text-2);
-			background: oklch(from var(--clr-scale-ntrl-60) l c h / 0.15);
-		}
-
-		&.ghost {
-			color: var(--clr-text-2);
-		}
-
-		&.ghost.solid {
-			border: 1px solid oklch(from var(--clr-scale-ntrl-0) l c h / 0.1);
-		}
 	}
 
 	.reversedDirection {