chore: Default "font-variation-settings" values correctly set for the segment labels.

Author: hummelstrand

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

@@ -82,18 +82,23 @@ $hold-status-color: $liveline-timecode-color;
 				vertical-align: middle;
 				color: #fff;
 				position: relative;
-				font-weight: 700;
+				//font-weight: 700;
 				font-size: 100px;
 				line-height: 110%;
 				height: 11vh;
 				/* or 110px */
 				letter-spacing: 0.01em;
-				font-feature-settings: 'pnum' on, 'lnum' on;
+				font-feature-settings: 'tnum' on, 'liga' off;
 
 				color: #ffffff;
-				font-stretch: 100;
-				font-variation-settings: 'GRAD' -90, 'XOPQ' 96, 'XTRA' 372, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
-					'YTLC' 514, 'YTUC' 712, 'slnt' 0, 'opsz' 38;
+				//font-stretch: 100;
+
+				// Default Roboto Flex settings:
+				font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712, 
+					'opsz' 100,
+					'slnt' 0, 
+					'wdth' 100, 
+					'wght' 550;
 
 				text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
 				box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
@@ -126,9 +131,12 @@ $hold-status-color: $liveline-timecode-color;
 					padding-left: 8vw;
 					padding-top: 6px;
 					color: #ff0;
-					font-stretch: 40;
-					font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
-						'YTLC' 548, 'YTUC' 712, 'slnt' 0, 'opsz' 100;
+					//font-stretch: 40;
+					font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712, 
+					'opsz' 100,
+					'slnt' 0, 
+					'wdth' 100, 
+					'wght' 550;
 
 					background: linear-gradient(
 						90deg,

packages/webui/src/client/ui/util/AdjustLabelFit.tsx

@@ -90,7 +90,7 @@ export const AdjustLabelFit: React.FC<AdjustLabelFitProps> = ({
 	fontSize,
 	minFontWidth = 50,
 	maxFontWidth = 120,
-	defaultOpticalSize = 120,
+	defaultOpticalSize = 100,
 	defaultWidth = 100,
 	useLetterSpacing = false,
 	minLetterSpacing = -1,
@@ -151,7 +151,9 @@ export const AdjustLabelFit: React.FC<AdjustLabelFitProps> = ({
 		resetLabelStyles()
 
 		// Apply the new width setting
-		labelElement.style.fontVariationSettings = `'opsz' ${defaultOpticalSize}, 'wdth' ${defaultWidth}`
+		//labelElement.style.fontVariationSettings = `'opsz' ${defaultOpticalSize}, 'wdth' ${defaultWidth}`
+		labelElement.style.fontVariationSettings = `'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712, 'opsz' ${defaultOpticalSize}, 'slnt' 0, 'wdth' ${defaultWidth}, 'wght' 550`
+
 		// Reset label content if it was cut
 		labelElement.textContent = label
 
@@ -181,7 +183,8 @@ export const AdjustLabelFit: React.FC<AdjustLabelFitProps> = ({
 		currentWidth = Math.max(currentWidth, minFontWidth)
 		currentWidth = Math.min(currentWidth, maxFontWidth)
 
-		labelElement.style.fontVariationSettings = `'opsz' ${defaultOpticalSize}, 'wdth' ${currentWidth}`
+		//labelElement.style.fontVariationSettings = `'opsz' ${defaultOpticalSize}, 'wdth' ${currentWidth}`
+		labelElement.style.fontVariationSettings = `'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712, 'opsz' ${defaultOpticalSize}, 'slnt' 0, 'wdth' ${currentWidth}, 'wght' 550`
 
 		// Remeasure text width after adjustment:
 		void labelElement.offsetWidth