Skip to content

Commit a3f84c2

Browse files
hummelstrandhummelstrand
committed
chore: Tweaked typographic styling of segment and part names.
1 parent 01a9f84 commit a3f84c2

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
@@ -92,7 +92,7 @@ $hold-status-color: $liveline-timecode-color;
9292

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

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

133133
background: linear-gradient(
134134
90deg,
@@ -141,7 +141,7 @@ $hold-status-color: $liveline-timecode-color;
141141
color: $general-fast-color;
142142
//text-shadow: 0px 0px 6px $general-fast-color--shadow;
143143
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
144-
'YTLC' 514, 'YTUC' 712, 'opsz' 100, 'slnt' 0, 'wdth' 70, 'wght' 600;
144+
'YTLC' 548, 'YTUC' 712, 'opsz' 100, 'slnt' 0, 'wdth' 70, 'wght' 600;
145145
}
146146
}
147147
}
@@ -212,7 +212,7 @@ $hold-status-color: $liveline-timecode-color;
212212
font-size: 25em;
213213
font-feature-settings: 'liga' off, 'tnum' on;
214214
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
215-
'YTLC' 514, 'YTUC' 712, 'opsz' 120, 'slnt' 0, 'wdth' 70, 'wght' 500;
215+
'YTLC' 548, 'YTUC' 712, 'opsz' 120, 'slnt' 0, 'wdth' 70, 'wght' 500;
216216
padding: 0 0.1em;
217217
line-height: 1em;
218218
display: flex;
@@ -221,7 +221,7 @@ $hold-status-color: $liveline-timecode-color;
221221
> .overtime {
222222
color: $general-late-color;
223223
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
224-
'YTLC' 514, 'YTUC' 712, 'opsz' 100, 'slnt' 0, 'wdth' 70, 'wght' 600;
224+
'YTLC' 548, 'YTUC' 712, 'opsz' 100, 'slnt' 0, 'wdth' 70, 'wght' 600;
225225
}
226226

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

236236
.freeze-counter {
@@ -281,15 +281,17 @@ $hold-status-color: $liveline-timecode-color;
281281
clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
282282
// font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
283283
// 'YTLC' 548, 'YTUC' 712, 'slnt' 0, 'opsz' 3;
284+
letter-spacing: 0.05em;
284285
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
285-
'YTLC' 514, 'YTUC' 712, 'opsz' 30, 'slnt' 0, 'wdth' 50, 'wght' 700;
286+
'YTLC' 548, 'YTUC' 712, 'opsz' 30, 'slnt' 0, 'wdth' 70, 'wght' 400;
286287
}
287288
.director-screen__body__part__auto-icon {
288289
border-radius: 0 25px 25px 0;
289290
// font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
290291
// 'YTLC' 548, 'YTUC' 712, 'slnt' -7, 'opsz' 3;
292+
letter-spacing: 0.05em;
291293
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
292-
'YTLC' 514, 'YTUC' 712, 'opsz' 30, 'slnt' 0, 'wdth' 50, 'wght' 700;
294+
'YTLC' 548, 'YTUC' 712, 'opsz' 30, 'slnt' 0, 'wdth' 70, 'wght' 400;
293295
}
294296
.director-screen__body__part__next-icon,
295297
.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)