chore: WIP on the Roboto Flex font styling.

Author: hummelstrand

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

@@ -7,17 +7,17 @@
 	font-size: 7.5rem;
 	font-weight: 500;
 	line-height: 100%;
-	font-feature-settings: 'liga' off;
+	font-feature-settings: 'liga' off, 'tnum' on;
+	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;
 	margin-bottom: 4px;
 }
 
 .counter-component__over-under {
 	color: black;
 	text-align: right;
 
-	font-stretch: 57;
-	font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548,
-		'YTUC' 712, 'slnt' 0, 'opsz' 44;
+	letter-spacing: 0.01em;
+	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;
 
 	.under {
 		background-color: #ff0;
@@ -43,21 +43,17 @@
 		padding-bottom: 0px;
 		display: inline-block;
 
-		font-weight: 630;
-		letter-spacing: -0.035em;
-		font-feature-settings: 'liga' off;
-		font-variation-settings: 'GRAD' 75, 'XOPQ' 82, 'XTRA' 387, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712, 'opsz' 14, 'slnt' 0, 'wdth' 25;
+		font-variation-settings: 'GRAD' 100, 'wdth' 70, 'wght' 600;
 	}
 }
 
 .counter-component__planned-end {
-	font-weight: 400;
+	color: #ffffff;
 	letter-spacing: 0%;
+	text-align: right;
 
-	color: #ffffff;
-	font-stretch: 70;
-	font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548,
-		'YTUC' 712, 'slnt' -7, 'opsz' 100, 'wdth' 80;
+	letter-spacing: 0.01em;
+	font-variation-settings: 'slnt' -7, 'wdth' 70, 'wght' 500;
 }
 
 .counter-component__time-to-planned-end {
@@ -66,17 +62,16 @@
 	text-align: right;
 	margin-left: 1.2vw;
 
-	font-stretch: 57;
-	font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548,
-		'YTUC' 712, 'slnt' 0, 'opsz' 44;
+	letter-spacing: 0.01em;
+	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;
 }
 
 .counter-component__time-since-planned-end {
 	color: #ff5218;
 	text-align: right;
 	margin-left: 1.2vw;
 
-	font-stretch: 57;
-	font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548,
-		'YTUC' 712, 'slnt' 0, 'opsz' 44;
+	letter-spacing: 0.01em;
+	font-variation-settings: 'GRAD' 100, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712, 'opsz' 120, 'slnt' 0, 'wdth' 70, 'wght' 600;
+
 }