feat: add freeze color var and use general colors where applicable

Author: olzzon

packages/webui/src/client/styles/_colorScheme.scss

@@ -1,4 +1,3 @@
-
 // color variables are defined in defaultColors.scss
 
 $color-status-good: var(--color-status-good);
@@ -23,6 +22,7 @@ $general-late-color: var(--general-late-color);
 $general-fast-color: var(--general-fast-color);
 $general-fast-color--shadow: var(--general-fast-color--shadow);
 $general-countdown-to-next-color: var(--general-countdown-to-next-color);
+$general-freeze-color: var(--general-freeze-color);
 
 $general-clock: var(--general-clock);
 

packages/webui/src/client/styles/countdown/director.scss

@@ -125,7 +125,7 @@ $hold-status-color: $liveline-timecode-color;
 					padding-right: 30px;
 
 					font-size: 110px;
-					color: #ff0;
+					color: $general-countdown-to-next-color;
 					font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
 						'YTLC' 514, 'YTUC' 712, 'opsz' 120, 'slnt' 0, 'wdth' 70, 'wght' 500;
 
@@ -233,7 +233,7 @@ $hold-status-color: $liveline-timecode-color;
 					}
 
 					.freeze-counter {
-						color: #00bfff;
+						color: $general-freeze-color;
 						margin-left: 4vw;
 						display: flex;
 						align-items: center;

packages/webui/src/client/styles/counterComponents.scss

@@ -1,3 +1,5 @@
+@import '../styles/colorScheme';
+
 .counter-component__planned-end,
 .counter-component__time-to-planned-end,
 .counter-component__time-since-planned-end,
@@ -22,7 +24,7 @@
 		'YTUC' 712, 'opsz' 120, 'slnt' 0, 'wdth' 70, 'wght' 500;
 
 	.under {
-		background-color: #ff0;
+		background-color: $general-countdown-to-next-color;
 		border-radius: 139px;
 		align-self: stretch;
 		gap: 10px;
@@ -60,7 +62,7 @@
 }
 
 .counter-component__time-to-planned-end {
-	color: #ff0;
+	color: $general-countdown-to-next-color;
 	letter-spacing: 0%;
 	text-align: right;
 	margin-left: 1.2vw;

packages/webui/src/client/styles/defaultColors.scss

@@ -22,6 +22,7 @@
 	--general-late-color: #ff0000;
 	--general-fast-color: #ff0000;
 	--general-countdown-to-next-color: #ffff00;
+	--general-freeze-color: #00bfff;
 	--general-fast-color--shadow: #{transparentize(#ff0000, 0.2)};
 
 	--general-clock: #49c0fb;