Skip to content

Commit 0e12c50

Browse files
jstarpljstarpl
committed
chore: upgrade use of deprecated global functions to use new SCSS built-in modules
1 parent e229b75 commit 0e12c50

File tree

7 files changed

+48
-33
lines changed

7 files changed

+48
-33
lines changed

‎packages/webui/src/client/styles/_itemTypeColors.scss‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
1+
@use 'sass:color';
2+
@use 'sass:list';
3+
14
$segment-timeline-background-color: #1f1f1f;
25

3-
$segment-layer-border-unknown: darken(#4b4b4b, 10%);
6+
$segment-layer-border-unknown: color.scale(#4b4b4b, $lightness: -10%);
47
$segment-layer-background-unknown: #4b4b4b;
58
$segment-layer-background-camera: #18791c;
6-
$segment-layer-background-camera--second: darken($segment-layer-background-camera, 10%);
9+
$segment-layer-background-camera--second: color.scale($segment-layer-background-camera, $lightness: -10%);
710
$segment-layer-background-lower-third: #ed7200;
8-
$segment-layer-background-lower-third--second: darken($segment-layer-background-lower-third, 10%);
11+
$segment-layer-background-lower-third--second: color.scale($segment-layer-background-lower-third, $lightness: -10%);
912
$segment-layer-background-graphics: #dc5c00;
10-
$segment-layer-background-graphics--second: darken($segment-layer-background-graphics, 10%);
13+
$segment-layer-background-graphics--second: color.scale($segment-layer-background-graphics, $lightness: -10%);
1114
$segment-layer-border-live-speak: #2f74ff;
1215
/** Gradients need to be defined with each color separately, so that they can be applied in SVG **/
1316
$segment-layer-background-gradient-divider: rgba(0, 0, 0, 0.5) 1px;
@@ -19,8 +22,8 @@ $segment-layer-background-live-speak: linear-gradient(
1922
$segment-layer-background-gradient-divider,
2023
$segment-layer-background-live-speak-2 72%
2124
);
22-
$segment-layer-background-live-speak--second-1: darken(#2f74ff, 10%);
23-
$segment-layer-background-live-speak--second-2: darken(#39762b, 10%);
25+
$segment-layer-background-live-speak--second-1: color.scale(#2f74ff, $lightness: -10%);
26+
$segment-layer-background-live-speak--second-2: color.scale(#39762b, $lightness: -10%);
2427
$segment-layer-background-live-speak--second: linear-gradient(
2528
to bottom,
2629
$segment-layer-background-live-speak--second-1 70%,
@@ -36,23 +39,23 @@ $segment-layer-background-remote-speak: linear-gradient(
3639
$segment-layer-background-gradient-divider,
3740
$segment-layer-background-remote-speak-2 72%
3841
);
39-
$segment-layer-background-remote-speak--second-1: darken(#e80064, 10%);
40-
$segment-layer-background-remote-speak--second-2: darken(#39762b, 10%);
42+
$segment-layer-background-remote-speak--second-1: color.scale(#e80064, $lightness: -10%);
43+
$segment-layer-background-remote-speak--second-2: color.scale(#39762b, $lightness: -10%);
4144
$segment-layer-background-remote-speak--second: linear-gradient(
4245
to bottom,
4346
$segment-layer-background-remote-speak--second-1 70%,
4447
$segment-layer-background-gradient-divider,
4548
$segment-layer-background-remote-speak--second-2 72%
4649
);
4750
$segment-layer-background-remote: #e80064;
48-
$segment-layer-background-remote--second: darken($segment-layer-background-remote, 10%);
51+
$segment-layer-background-remote--second: color.scale($segment-layer-background-remote, $lightness: -10%);
4952
$segment-layer-background-vt: #0a20ed;
50-
$segment-layer-background-vt--second: darken($segment-layer-background-vt, 10%);
53+
$segment-layer-background-vt--second: color.scale($segment-layer-background-vt, $lightness: -10%);
5154
$segment-layer-background-script: #003600;
5255
$segment-layer-background-mic: #1e6820;
5356
$segment-layer-background-guest: #008a92;
5457
$segment-layer-background-local: #9a2bd8;
55-
$segment-layer-background-local--second: darken($segment-layer-background-local, 10%);
58+
$segment-layer-background-local--second: color.scale($segment-layer-background-local, $lightness: -10%);
5659
$segment-layer-background-studio-screen: #641fb3;
5760

5861
$step-counter-background-studio-screen: #2a005b;
@@ -64,7 +67,7 @@ $layer-types-solid:
6467
'unknown', 'camera', 'lower-third', 'graphics', 'remote', 'vt', 'local', 'script', 'mic', 'guest', 'studio-screen';
6568
$layer-types-gradient: 'live-speak', 'remote-speak'; //
6669

67-
$layer-types: join($layer-types-solid, $layer-types-gradient);
70+
$layer-types: list.join($layer-types-solid, $layer-types-gradient);
6871

6972
@mixin item-type-text-outline($selectors) {
7073
@each $layer-type in $layer-types {
@@ -400,8 +403,8 @@ $layer-types: join($layer-types-solid, $layer-types-gradient);
400403
-45deg,
401404
transparent 0%,
402405
transparent 8px,
403-
darken($part-start-color, 50%) 8px,
404-
darken($part-start-color, 50%) 10px
406+
color.scale($part-start-color, $lightness: -50%) 8px,
407+
color.scale($part-start-color, $lightness: -50%) 10px
405408
);
406409
backdrop-filter: saturate(0%) brightness(50%);
407410
}

‎packages/webui/src/client/styles/bootstrap-customize.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use 'sass:color';
2+
13
.btn,
24
.nav-tabs .nav-link {
35
letter-spacing: 0.2px;
@@ -7,7 +9,7 @@
79
-webkit-font-smoothing: antialiased;
810
--color-dark-1: #{$dark-1};
911
--color-dark-2: #{$dark-2};
10-
--color-dark-2-transparent: #{transparentize($dark-2, 0.5)};
12+
--color-dark-2-transparent: #{color.scale($dark-2, $alpha: -50%)};
1113
--color-primary-dark: #{$primary-dark};
1214

1315
--org-color-error: #e62421;

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use 'sass:color';
2+
13
@import 'itemTypeColors';
24

35
:root {
@@ -7,7 +9,7 @@
79
--color-status-warning: gold;
810
--color-status-bad: #ff5e00;
911
--color-status-fatal: #e62421;
10-
--color-status-fatal--translucent: #{transparentize(#e62421, 0.5)};
12+
--color-status-fatal--translucent: #{color.scale(#e62421, $alpha: -50%)};
1113
--color-status-unknown: #777;
1214

1315
//--general-live-color: #FFE900;
@@ -23,7 +25,7 @@
2325
--general-fast-color: #ff0000;
2426
--general-countdown-to-next-color: #ffff00;
2527
--general-freeze-color: #00bfff;
26-
--general-fast-color--shadow: #{transparentize(#ff0000, 0.2)};
28+
--general-fast-color--shadow: #{color.scale(#ff0000, $alpha: -20%)};
2729

2830
--general-clock: #49c0fb;
2931

@@ -33,8 +35,8 @@
3335

3436
--ui-button-primary: #1769ff;
3537
--ui-button-primary--hover: #0050e3;
36-
--ui-button-primary--translucent: #{transparentize(#1769ff, 0.5)};
37-
--ui-button-primary--transparent: #{transparentize(#1769ff, 1)};
38+
--ui-button-primary--translucent: #{color.scale(#1769ff, $alpha: -50%)};
39+
--ui-button-primary--transparent: #{color.scale(#1769ff, $alpha: -100%)};
3840

3941
--ui-dark-color: #252627;
4042
--ui-dark-color-brighter: #5f6164;

‎packages/webui/src/client/styles/rundownView.scss‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use 'sass:color';
2+
13
@import 'utils';
24

35
$output-layer-group-line: 1px solid #5c5c5c;
@@ -36,7 +38,7 @@ $previewline-color: rgb(38, 137, 186);
3638
$segment-timeline-padding: $segment-header-height 0 1.5em 2px;
3739

3840
$segment-layer-height: 1.5em;
39-
$segment-layer-separator-color: transparentize(#000, 0.5);
41+
$segment-layer-separator-color: color.scale(#000, $alpha: -50%);
4042

4143
:root {
4244
--popdown: 2rem;
@@ -71,13 +73,13 @@ $break-width: 35rem;
7173

7274
.segment-timeline-placeholder {
7375
position: relative;
74-
background: lighten($segment-background-color, 10%);
76+
background: color.scale($segment-background-color, $lightness: 10%);
7577
background-image: linear-gradient(
7678
to right,
77-
lighten($segment-background-color, 10%) 0%,
78-
lighten($segment-background-color, 14%) 20%,
79-
lighten($segment-background-color, 10%) 40%,
80-
lighten($segment-background-color, 10%) 100%
79+
color.scale($segment-background-color, $lightness: 10%) 0%,
80+
color.scale($segment-background-color, $lightness: 14%) 20%,
81+
color.scale($segment-background-color, $lightness: 10%) 40%,
82+
color.scale($segment-background-color, $lightness: 10%) 100%
8183
);
8284
background-repeat: repeat-y;
8385
background-size: 800px 1px;
@@ -95,7 +97,7 @@ $break-width: 35rem;
9597
width: $segment-header-width;
9698
left: 0;
9799
bottom: 0;
98-
background: lighten($segment-title-background-color, 70%);
100+
background: color.scale($segment-title-background-color, $lightness: 70%);
99101
opacity: 0.1;
100102
}
101103
}
@@ -1593,8 +1595,8 @@ svg.icon {
15931595
-45deg,
15941596
transparent 0%,
15951597
transparent 8px,
1596-
darken($part-start-color, 50%) 8px,
1597-
darken($part-start-color, 50%) 10px
1598+
color.scale($part-start-color, $lightness: -50%) 8px,
1599+
color.scale($part-start-color, $lightness: -50%) 10px
15981600
);
15991601
backdrop-filter: saturate(0%) brightness(50%);
16001602
}

‎packages/webui/src/client/styles/statusbar.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use 'sass:color';
2+
13
.status-bar {
24
position: fixed;
35
display: flex;
@@ -42,7 +44,7 @@
4244
position: relative;
4345
display: block;
4446
border: none;
45-
background: transparentize(#fff, 1);
47+
background: color.scale(#fff, $alpha: -100%);
4648
width: $fullscreen-controls__button--radius;
4749
height: $fullscreen-controls__button--radius;
4850
border-radius: 100%;
@@ -79,7 +81,7 @@
7981
right: 0;
8082
width: $fullscreen-controls__button--radius;
8183
height: $fullscreen-controls__button--radius;
82-
background: transparentize(#4b4b4b, 0.45);
84+
background: color.scale(#4b4b4b, $alpha: -45%);
8385
transition: 0.3s background-color;
8486
}
8587

‎packages/webui/src/client/ui/SegmentStoryboard/SegmentStoryboard.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use 'sass:color';
2+
13
@import '../../styles/colorScheme';
24
@import '../../styles/utils';
35
@import '../../styles/variables';
@@ -633,8 +635,8 @@ $break-width: 35rem;
633635
-45deg,
634636
transparent 0%,
635637
transparent 8px,
636-
darken($part-start-color, 50%) 8px,
637-
darken($part-start-color, 50%) 10px
638+
color.scale($part-start-color, $lightness: -50%) 8px,
639+
color.scale($part-start-color, $lightness: -50%) 10px
638640
);
639641
backdrop-filter: saturate(0%) brightness(50%);
640642
}

‎packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartThumbnail/StoryboardPartThumbnail.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use 'sass:color';
2+
13
@import '../../../styles/variables';
24

35
.segment-storyboard__part__thumbnail {
@@ -22,7 +24,7 @@
2224
}
2325

2426
&.segment-storyboard__part__thumbnail--placeholder {
25-
background: lighten($segment-background-color, 10%);
27+
background: color.scale($segment-background-color, $lightness: 10%);
2628
}
2729

2830
.segment-storyboard__thumbnail__icon {

0 commit comments

Comments
 (0)