Skip to content

Commit 023c6f9

Browse files
hummelstrandolzzon
hummelstrand
authored and
olzzon
committed
chore: Tweaked typographic styling of segment and part names.
1 parent b5b76ba commit 023c6f9

File tree

4 files changed

+20
-19
lines changed

4 files changed

+20
-19
lines changed

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ $hold-status-color: $liveline-timecode-color;
9191

9292
// Default Roboto Flex settings:
9393
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
94-
'YTLC' 514, 'YTUC' 712, 'opsz' 100, 'slnt' 0, 'wdth' 100, 'wght' 550;
94+
'YTLC' 548, 'YTUC' 712, 'opsz' 100, 'slnt' 0, 'wdth' 100, 'wght' 550;
9595

9696
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
9797
box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.3);
@@ -127,7 +127,7 @@ $hold-status-color: $liveline-timecode-color;
127127
font-size: 110px;
128128
color: $general-countdown-to-next-color;
129129
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
130-
'YTLC' 514, 'YTUC' 712, 'opsz' 120, 'slnt' 0, 'wdth' 70, 'wght' 500;
130+
'YTLC' 548, 'YTUC' 712, 'opsz' 120, 'slnt' 0, 'wdth' 70, 'wght' 500;
131131

132132
background: linear-gradient(
133133
90deg,
@@ -140,7 +140,7 @@ $hold-status-color: $liveline-timecode-color;
140140
color: $general-fast-color;
141141
//text-shadow: 0px 0px 6px $general-fast-color--shadow;
142142
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
143-
'YTLC' 514, 'YTUC' 712, 'opsz' 100, 'slnt' 0, 'wdth' 70, 'wght' 600;
143+
'YTLC' 548, 'YTUC' 712, 'opsz' 100, 'slnt' 0, 'wdth' 70, 'wght' 600;
144144
}
145145
}
146146
}
@@ -211,7 +211,7 @@ $hold-status-color: $liveline-timecode-color;
211211
font-size: 25em;
212212
font-feature-settings: 'liga' off, 'tnum' on;
213213
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
214-
'YTLC' 514, 'YTUC' 712, 'opsz' 120, 'slnt' 0, 'wdth' 70, 'wght' 500;
214+
'YTLC' 548, 'YTUC' 712, 'opsz' 120, 'slnt' 0, 'wdth' 70, 'wght' 500;
215215
padding: 0 0.1em;
216216
line-height: 1em;
217217
display: flex;
@@ -220,7 +220,7 @@ $hold-status-color: $liveline-timecode-color;
220220
> .overtime {
221221
color: $general-late-color;
222222
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
223-
'YTLC' 514, 'YTUC' 712, 'opsz' 100, 'slnt' 0, 'wdth' 70, 'wght' 600;
223+
'YTLC' 548, 'YTUC' 712, 'opsz' 100, 'slnt' 0, 'wdth' 70, 'wght' 600;
224224
}
225225

226226
.auto-next-status {
@@ -229,7 +229,7 @@ $hold-status-color: $liveline-timecode-color;
229229
margin-top: -4vh;
230230
color: $general-next-color;
231231
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
232-
'YTLC' 514, 'YTUC' 712, 'opsz' 100, 'slnt' -20, 'wdth' 70, 'wght' 600;
232+
'YTLC' 548, 'YTUC' 712, 'opsz' 100, 'slnt' -20, 'wdth' 70, 'wght' 600;
233233
}
234234

235235
.freeze-counter {
@@ -280,15 +280,17 @@ $hold-status-color: $liveline-timecode-color;
280280
clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
281281
// font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
282282
// 'YTLC' 548, 'YTUC' 712, 'slnt' 0, 'opsz' 3;
283+
letter-spacing: 0.05em;
283284
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
284-
'YTLC' 514, 'YTUC' 712, 'opsz' 30, 'slnt' 0, 'wdth' 50, 'wght' 700;
285+
'YTLC' 548, 'YTUC' 712, 'opsz' 30, 'slnt' 0, 'wdth' 70, 'wght' 400;
285286
}
286287
.director-screen__body__part__auto-icon {
287288
border-radius: 0 25px 25px 0;
288289
// font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
289290
// 'YTLC' 548, 'YTUC' 712, 'slnt' -7, 'opsz' 3;
291+
letter-spacing: 0.05em;
290292
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
291-
'YTLC' 514, 'YTUC' 712, 'opsz' 30, 'slnt' 0, 'wdth' 50, 'wght' 700;
293+
'YTLC' 548, 'YTUC' 712, 'opsz' 30, 'slnt' 0, 'wdth' 70, 'wght' 400;
292294
}
293295
.director-screen__body__part__next-icon,
294296
.director-screen__body__part__auto-icon {

‎packages/webui/src/client/ui/ClockView/ClockViewPieceIcons/ClockViewPieceIcons.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,12 @@ $letter-spacing: 0.03em;
3636
font-family: Roboto Flex;
3737
filter: drop-shadow($text-shadow);
3838
font-size: $font-size-base;
39-
font-weight: 550;
4039
letter-spacing: $letter-spacing;
4140
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712,
4241
'opsz' 80,
4342
'slnt' 0,
4443
'wdth' 50,
45-
'wght' 550;
44+
'wght' 400;
4645

4746
span {
4847
// Common styles

‎packages/webui/src/client/ui/ClockView/DirectorScreen.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -408,7 +408,7 @@ function DirectorScreenRender({
408408
fontSize="0.9em"
409409
minFontWidth={70}
410410
defaultWidth={100}
411-
defaultOpticalSize={120}
411+
defaultOpticalSize={100}
412412
useLetterSpacing={false}
413413
hardCutText={true}
414414
/>
@@ -446,9 +446,9 @@ function DirectorScreenRender({
446446
fontFamily: 'Roboto Flex',
447447
fontSize: '1.5em',
448448
minFontWidth: 55,
449-
defaultWidth: 120,
449+
defaultWidth: 100,
450450
useLetterSpacing: false,
451-
defaultOpticalSize: 120,
451+
defaultOpticalSize: 100,
452452
}}
453453
/>
454454
</div>
@@ -500,7 +500,7 @@ function DirectorScreenRender({
500500
fontSize="0.9em"
501501
minFontWidth={70}
502502
defaultWidth={90}
503-
defaultOpticalSize={120}
503+
defaultOpticalSize={100}
504504
useLetterSpacing={false}
505505
hardCutText={true}
506506
/>
@@ -550,9 +550,9 @@ function DirectorScreenRender({
550550
fontFamily: 'Roboto Flex',
551551
fontSize: '1.5em',
552552
minFontWidth: 55,
553-
defaultWidth: 120,
553+
defaultWidth: 100,
554554
useLetterSpacing: false,
555-
defaultOpticalSize: 120,
555+
defaultOpticalSize: 100,
556556
}}
557557
/>
558558
) : (

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ export const AdjustLabelFit: React.FC<AdjustLabelFitProps> = ({
122122

123123
const resetLabelStyles = () => {
124124
if (labelRef.current) {
125-
labelRef.current.style.letterSpacing = '0px'
125+
labelRef.current.style.letterSpacing = '0.05em'
126126
labelRef.current.style.fontVariationSettings = ''
127127
labelRef.current.textContent = label
128128
labelRef.current.style.wordBreak = 'normal'
@@ -145,7 +145,7 @@ export const AdjustLabelFit: React.FC<AdjustLabelFitProps> = ({
145145

146146
// Apply the new width setting
147147
//labelElement.style.fontVariationSettings = `'opsz' ${defaultOpticalSize}, 'wdth' ${defaultWidth}`
148-
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`
148+
labelElement.style.fontVariationSettings = `'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548, 'YTUC' 712, 'opsz' ${defaultOpticalSize}, 'slnt' 0, 'wdth' ${defaultWidth}, 'wght' 550`
149149

150150
// Reset label content if it was cut
151151
labelElement.textContent = label
@@ -176,7 +176,7 @@ export const AdjustLabelFit: React.FC<AdjustLabelFitProps> = ({
176176
currentWidth = Math.max(currentWidth, minFontWidth)
177177

178178
//labelElement.style.fontVariationSettings = `'opsz' ${defaultOpticalSize}, 'wdth' ${currentWidth}`
179-
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`
179+
labelElement.style.fontVariationSettings = `'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548, 'YTUC' 712, 'opsz' ${defaultOpticalSize}, 'slnt' 0, 'wdth' ${currentWidth}, 'wght' 550`
180180

181181
// Remeasure text width after adjustment:
182182
void labelElement.offsetWidth

0 commit comments

Comments
 (0)