Skip to content

Commit 27a2d72

Browse files
paulbalandanpaulbalandan
authored
chore: migrate SCSS from deprecated @import usage (#10066)
1 parent ff47149 commit 27a2d72

5 files changed

Lines changed: 107 additions & 86 deletions

File tree

‎.github/workflows/test-scss.yml‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,7 @@ jobs:
3838
- name: Setup Node
3939
uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
4040
with:
41-
# node version based on dart-sass test workflow
42-
node-version: 16
41+
node-version: '24'
4342

4443
- name: Install Dart Sass
4544
run: |

‎admin/css/debug-toolbar/_theme-dark.scss‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,23 @@
22
// ========================================================================== */
33

44
// The "box-shadow" mixin uses colors
5-
@import '_mixins';
5+
@use '_mixins';
66

77
// Graphic charter
8-
@import '_graphic-charter';
8+
@use '_graphic-charter';
99

1010

1111
// DEBUG ICON
1212
// ========================================================================== */
1313

1414
#debug-icon {
15-
background-color: $t-dark;
16-
@include box-shadow(0, 0, 4px, $m-gray);
15+
background-color: graphic-charter.$t-dark;
16+
@include mixins.box-shadow(0, 0, 4px, graphic-charter.$m-gray);
1717

1818
a:active,
1919
a:link,
2020
a:visited {
21-
color: $g-orange;
21+
color: graphic-charter.$g-orange;
2222
}
2323
}
2424

@@ -27,8 +27,8 @@
2727
// ========================================================================== */
2828

2929
#debug-bar {
30-
background-color: $t-dark;
31-
color: $m-gray;
30+
background-color: graphic-charter.$t-dark;
31+
color: graphic-charter.$m-gray;
3232

3333
// Reset to prevent conflict with other CSS files
3434
h1,
@@ -44,44 +44,44 @@
4444
button,
4545
.toolbar {
4646
background-color: transparent;
47-
color: $m-gray;
47+
color: graphic-charter.$m-gray;
4848
}
4949

5050
// Buttons
5151
button {
52-
background-color: $t-dark;
52+
background-color: graphic-charter.$t-dark;
5353
}
5454

5555
// Tables
5656
table {
5757
strong {
58-
color: $g-orange;
58+
color: graphic-charter.$g-orange;
5959
}
6060

6161
tbody tr {
6262
&:hover {
63-
background-color: $g-gray;
63+
background-color: graphic-charter.$g-gray;
6464
}
6565

6666
&.current {
67-
background-color: $m-orange;
67+
background-color: graphic-charter.$m-orange;
6868

6969
td {
70-
color: $t-dark;
70+
color: graphic-charter.$t-dark;
7171
}
7272

7373
&:hover td {
74-
background-color: $g-red;
75-
color: $t-light;
74+
background-color: graphic-charter.$g-red;
75+
color: graphic-charter.$t-light;
7676
}
7777
}
7878
}
7979
}
8080

8181
// The toolbar
8282
.toolbar {
83-
background-color: $g-gray;
84-
@include box-shadow(0, 0, 4px, $g-gray);
83+
background-color: graphic-charter.$g-gray;
84+
@include mixins.box-shadow(0, 0, 4px, graphic-charter.$g-gray);
8585

8686
img {
8787
filter: brightness(0) invert(1);
@@ -91,24 +91,24 @@
9191
// Fixed top
9292
&.fixed-top {
9393
.toolbar {
94-
@include box-shadow(0, 0, 4px, $g-gray);
94+
@include mixins.box-shadow(0, 0, 4px, graphic-charter.$g-gray);
9595
}
9696

9797
.tab {
98-
@include box-shadow(0, 1px, 4px, $g-gray);
98+
@include mixins.box-shadow(0, 1px, 4px, graphic-charter.$g-gray);
9999
}
100100
}
101101

102102
// "Muted" elements
103103
.muted {
104-
color: $m-gray;
104+
color: graphic-charter.$m-gray;
105105

106106
td {
107-
color: $g-gray;
107+
color: graphic-charter.$g-gray;
108108
}
109109

110110
&:hover td {
111-
color: $m-gray;
111+
color: graphic-charter.$m-gray;
112112
}
113113
}
114114

@@ -121,34 +121,34 @@
121121
// The toolbar menus
122122
.ci-label {
123123
&.active {
124-
background-color: $t-dark;
124+
background-color: graphic-charter.$t-dark;
125125
}
126126

127127
&:hover {
128-
background-color: $t-dark;
128+
background-color: graphic-charter.$t-dark;
129129
}
130130

131131
.badge {
132-
background-color: $g-red;
133-
color: $t-light;
132+
background-color: graphic-charter.$g-red;
133+
color: graphic-charter.$t-light;
134134
}
135135
}
136136

137137
// The tabs container
138138
.tab {
139-
background-color: $t-dark;
140-
@include box-shadow(0, -1px, 4px, $g-gray);
139+
background-color: graphic-charter.$t-dark;
140+
@include mixins.box-shadow(0, -1px, 4px, graphic-charter.$g-gray);
141141
}
142142

143143
// The "Timeline" tab
144144
.timeline {
145145
th,
146146
td {
147-
border-color: $g-gray;
147+
border-color: graphic-charter.$g-gray;
148148
}
149149

150150
.timer {
151-
background-color: $g-orange;
151+
background-color: graphic-charter.$g-orange;
152152
}
153153
}
154154
}
@@ -158,10 +158,10 @@
158158
// ========================================================================== */
159159

160160
.debug-view.show-view {
161-
border-color: $g-orange;
161+
border-color: graphic-charter.$g-orange;
162162
}
163163

164164
.debug-view-path {
165-
background-color: $m-orange;
166-
color: $g-gray;
165+
background-color: graphic-charter.$m-orange;
166+
color: graphic-charter.$g-gray;
167167
}

‎admin/css/debug-toolbar/_theme-light.scss‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,23 @@
22
// ========================================================================== */
33

44
// The "box-shadow" mixin uses colors
5-
@import '_mixins';
5+
@use '_mixins';
66

77
// Graphic charter
8-
@import '_graphic-charter';
8+
@use '_graphic-charter';
99

1010

1111
// DEBUG ICON
1212
// ========================================================================== */
1313

1414
#debug-icon {
15-
background-color: $t-light;
16-
@include box-shadow(0, 0, 4px, $m-gray);
15+
background-color: graphic-charter.$t-light;
16+
@include mixins.box-shadow(0, 0, 4px, graphic-charter.$m-gray);
1717

1818
a:active,
1919
a:link,
2020
a:visited {
21-
color: $g-orange;
21+
color: graphic-charter.$g-orange;
2222
}
2323
}
2424

@@ -27,8 +27,8 @@
2727
// ========================================================================== */
2828

2929
#debug-bar {
30-
background-color: $t-light;
31-
color: $g-gray;
30+
background-color: graphic-charter.$t-light;
31+
color: graphic-charter.$g-gray;
3232

3333
// Reset to prevent conflict with other CSS files
3434
h1,
@@ -44,40 +44,40 @@
4444
button,
4545
.toolbar {
4646
background-color: transparent;
47-
color: $g-gray;
47+
color: graphic-charter.$g-gray;
4848
}
4949

5050
// Buttons
5151
button {
52-
background-color: $t-light;
52+
background-color: graphic-charter.$t-light;
5353
}
5454

5555
// Tables
5656
table {
5757
strong {
58-
color: $g-orange;
58+
color: graphic-charter.$g-orange;
5959
}
6060

6161
tbody tr {
6262
&:hover {
63-
background-color: $m-gray;
63+
background-color: graphic-charter.$m-gray;
6464
}
6565

6666
&.current {
67-
background-color: $m-orange;
67+
background-color: graphic-charter.$m-orange;
6868

6969
&:hover td {
70-
background-color: $g-red;
71-
color: $t-light;
70+
background-color: graphic-charter.$g-red;
71+
color: graphic-charter.$t-light;
7272
}
7373
}
7474
}
7575
}
7676

7777
// The toolbar
7878
.toolbar {
79-
background-color: $t-light;
80-
@include box-shadow(0, 0, 4px, $m-gray);
79+
background-color: graphic-charter.$t-light;
80+
@include mixins.box-shadow(0, 0, 4px, graphic-charter.$m-gray);
8181

8282
img {
8383
filter: brightness(0) invert(0.4);
@@ -87,24 +87,24 @@
8787
// Fixed top
8888
&.fixed-top {
8989
.toolbar {
90-
@include box-shadow(0, 0, 4px, $m-gray);
90+
@include mixins.box-shadow(0, 0, 4px, graphic-charter.$m-gray);
9191
}
9292

9393
.tab {
94-
@include box-shadow(0, 1px, 4px, $m-gray);
94+
@include mixins.box-shadow(0, 1px, 4px, graphic-charter.$m-gray);
9595
}
9696
}
9797

9898
// "Muted" elements
9999
.muted {
100-
color: $g-gray;
100+
color: graphic-charter.$g-gray;
101101

102102
td {
103-
color: $m-gray;
103+
color: graphic-charter.$m-gray;
104104
}
105105

106106
&:hover td {
107-
color: $g-gray;
107+
color: graphic-charter.$g-gray;
108108
}
109109
}
110110

@@ -117,34 +117,34 @@
117117
// The toolbar menus
118118
.ci-label {
119119
&.active {
120-
background-color: $m-gray;
120+
background-color: graphic-charter.$m-gray;
121121
}
122122

123123
&:hover {
124-
background-color: $m-gray;
124+
background-color: graphic-charter.$m-gray;
125125
}
126126

127127
.badge {
128-
background-color: $g-red;
129-
color: $t-light;
128+
background-color: graphic-charter.$g-red;
129+
color: graphic-charter.$t-light;
130130
}
131131
}
132132

133133
// The tabs container
134134
.tab {
135-
background-color: $t-light;
136-
@include box-shadow(0, -1px, 4px, $m-gray);
135+
background-color: graphic-charter.$t-light;
136+
@include mixins.box-shadow(0, -1px, 4px, graphic-charter.$m-gray);
137137
}
138138

139139
// The "Timeline" tab
140140
.timeline {
141141
th,
142142
td {
143-
border-color: $m-gray;
143+
border-color: graphic-charter.$m-gray;
144144
}
145145

146146
.timer {
147-
background-color: $g-orange;
147+
background-color: graphic-charter.$g-orange;
148148
}
149149
}
150150
}
@@ -154,10 +154,10 @@
154154
// ========================================================================== */
155155

156156
.debug-view.show-view {
157-
border-color: $g-orange;
157+
border-color: graphic-charter.$g-orange;
158158
}
159159

160160
.debug-view-path {
161-
background-color: $m-orange;
162-
color: $g-gray;
161+
background-color: graphic-charter.$m-orange;
162+
color: graphic-charter.$g-gray;
163163
}

0 commit comments

Comments
 (0)