Skip to content

Commit 537e3ae

Browse files
lucaslarrochelucaslarroche
committed
refactor: replace deprecated global functions to fix Sass warnings
1 parent 0a77e6f commit 537e3ae

File tree

9 files changed

+65
-39
lines changed

9 files changed

+65
-39
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
"lint": "run-s \"lint:*\" --silent",
3737
"lint:prettier": "prettier --write --log-level silent 'scss/**/*.scss'",
3838
"lint:sort-scss": "postcss --config scss ./scss/**/*.scss --replace",
39-
"build:css": "sass --no-source-map --style expanded --no-error-css scss/:css/ --silence-deprecation=global-builtin",
39+
"build:css": "sass --no-source-map --style expanded --no-error-css scss/:css/",
4040
"build:themes": "node scripts/build-themes",
4141
"build:autoprefix": "postcss --config css --replace css/*.css !css/*.min.css",
4242
"build:minify": "cleancss -O1 --with-rebase --batch --batch-suffix .min css/*.css !css/*.min.css",

‎scripts/build-themes.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,6 @@ themeColors.forEach((themeColor, colorIndex) => {
129129
path.join(tempScssFoldername, `${version.name}.${themeColor}.scss`),
130130
{
131131
outputStyle: "compressed",
132-
silenceDeprecations: ["global-builtin"],
133132
},
134133
);
135134

‎scss/colors/utilities/_background-colors.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:list";
12
@use "sass:map";
23
@use "../../colors";
34
@use "settings";
@@ -30,7 +31,7 @@ $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
3031
@if map.get(settings.$utilities, "background-colors") {
3132
// Loop through color families
3233
@each $family, $colors in colors.$colors {
33-
@if index(map.get(settings.$palette, "color-families"), $family) {
34+
@if list.index(map.get(settings.$palette, "color-families"), $family) {
3435
$css-var-family-name: #{$css-var-color-prefix}-#{$family};
3536
$class-family-name: #{$background-color-property-name}-#{$family};
3637

@@ -52,7 +53,7 @@ $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
5253

5354
// Shades
5455
@else if
55-
index(map.get(settings.$palette, "shades"), $shade) and
56+
list.index(map.get(settings.$palette, "shades"), $shade) and
5657
map.get(settings.$palette, "enable-shades")
5758
{
5859
$value: $color-value;

‎scss/colors/utilities/_colors.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:list";
12
@use "sass:map";
23
@use "../../colors";
34
@use "settings";
@@ -11,7 +12,7 @@
1112

1213
// Loop through color families
1314
@each $family, $colors in colors.$colors {
14-
@if index(map.get(settings.$palette, "color-families"), $family) {
15+
@if list.index(map.get(settings.$palette, "color-families"), $family) {
1516
$css-var-family-name: #{$css-var-color-prefix}-#{$family};
1617
$class-family-name: #{$color-property-name}-#{$family};
1718

@@ -31,7 +32,7 @@
3132

3233
// Shades
3334
@else if
34-
index(map.get(settings.$palette, "shades"), $shade) and
35+
list.index(map.get(settings.$palette, "shades"), $shade) and
3536
map.get(settings.$palette, "enable-shades")
3637
{
3738
@if $enable-css-vars {

‎scss/colors/utilities/_css-vars.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:list";
12
@use "sass:map";
23
@use "../../colors";
34
@use "settings";
@@ -13,7 +14,7 @@
1314
:host {
1415
// Loop through color families
1516
@each $family, $colors in colors.$colors {
16-
@if index(map.get(settings.$palette, "color-families"), $family) {
17+
@if list.index(map.get(settings.$palette, "color-families"), $family) {
1718
$css-var-family-name: #{$css-var-color-prefix}-#{$family};
1819

1920
// Loop through colors
@@ -25,7 +26,7 @@
2526

2627
// Shades
2728
@else if
28-
index(map.get(settings.$palette, "shades"), $shade) and
29+
list.index(map.get(settings.$palette, "shades"), $shade) and
2930
map.get(settings.$palette, "enable-shades")
3031
{
3132
#{$css-var-family-name}-#{$shade}: #{utils.display-color($color-value)};

‎scss/helpers/_functions.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
@use "sass:color";
2+
@use "sass:string";
23

34
// Display color as RGB
45
@function display-rgb($color) {
5-
@return unquote(
6+
@return string.unquote(
67
"rgb(" + color.channel($color, "red") + ", " + color.channel($color, "green") + ", " +
78
color.channel($color, "blue") + ")"
89
);

‎scss/themes/default/_dark.scss

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12
@use "sass:map";
23
@use "../../colors" as *;
34
@use "../../settings" as *;
@@ -7,7 +8,7 @@
78
// Default: Dark theme
89
@mixin theme {
910
color-scheme: dark;
10-
#{$css-var-prefix}background-color: #{mix($slate-950, $slate-900)};
11+
#{$css-var-prefix}background-color: #{color.mix($slate-950, $slate-900)};
1112

1213
// Text color
1314
#{$css-var-prefix}color: #{$zinc-200};
@@ -56,7 +57,7 @@
5657
#{$css-var-prefix}contrast-inverse: #{$black};
5758

5859
// Box shadow
59-
#{$css-var-prefix}box-shadow: functions.shadow(mix($black, $slate-950));
60+
#{$css-var-prefix}box-shadow: functions.shadow(color.mix($black, $slate-950));
6061

6162
// Typography
6263
@if map.get($modules, "content/typography") {
@@ -73,8 +74,8 @@
7374
#{$css-var-prefix}mark-color: #{$white};
7475

7576
// Inserted (<ins>) & Deleted (<del>)
76-
#{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-200)};
77-
#{$css-var-prefix}del-color: #{mix($red-500, $zinc-200)};
77+
#{$css-var-prefix}ins-color: #{color.mix($jade-450, $zinc-200)};
78+
#{$css-var-prefix}del-color: #{color.mix($red-500, $zinc-200)};
7879

7980
// Blockquote
8081
#{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
@@ -97,30 +98,42 @@
9798

9899
// Code
99100
@if map.get($modules, "content/code") {
100-
#{$css-var-prefix}code-background-color: #{mix($slate-900, $slate-850, 75%)};
101+
#{$css-var-prefix}code-background-color: #{color.mix($slate-900, $slate-850, 75%)};
101102
#{$css-var-prefix}code-color: #{$zinc-400};
102103
#{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
103104
#{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
104105
}
105106

106107
// Form elements
107108
@if map.get($modules, "forms/basics") {
108-
#{$css-var-prefix}form-element-background-color: #{mix($slate-900, $slate-850)};
109+
#{$css-var-prefix}form-element-background-color: #{color.mix($slate-900, $slate-850)};
109110
#{$css-var-prefix}form-element-selected-background-color: #{$slate-800};
110111
#{$css-var-prefix}form-element-border-color: #{$slate-800};
111112
#{$css-var-prefix}form-element-color: #{$zinc-100};
112113
#{$css-var-prefix}form-element-placeholder-color: #{$zinc-400};
113-
#{$css-var-prefix}form-element-active-background-color: #{mix($slate-900, $slate-850, 75%)};
114+
#{$css-var-prefix}form-element-active-background-color: #{color.mix(
115+
$slate-900,
116+
$slate-850,
117+
75%
118+
)};
114119
#{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
115120
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
116121
#{$css-var-prefix}form-element-disabled-opacity: 0.5;
117-
#{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $slate-600)};
118-
#{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $slate-600, 75%)};
122+
#{$css-var-prefix}form-element-invalid-border-color: #{color.mix($red-500, $slate-600)};
123+
#{$css-var-prefix}form-element-invalid-active-border-color: #{color.mix(
124+
$red-500,
125+
$slate-600,
126+
75%
127+
)};
119128
#{$css-var-prefix}form-element-invalid-focus-color: var(
120129
#{$css-var-prefix}form-element-invalid-active-border-color
121130
);
122-
#{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $slate-600)};
123-
#{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $slate-600, 75%)};
131+
#{$css-var-prefix}form-element-valid-border-color: #{color.mix($jade-450, $slate-600)};
132+
#{$css-var-prefix}form-element-valid-active-border-color: #{color.mix(
133+
$jade-450,
134+
$slate-600,
135+
75%
136+
)};
124137
#{$css-var-prefix}form-element-valid-focus-color: var(
125138
#{$css-var-prefix}form-element-valid-active-border-color
126139
);
@@ -156,7 +169,7 @@
156169
#{$css-var-prefix}card-background-color: #{$slate-900};
157170
#{$css-var-prefix}card-border-color: var(#{$css-var-prefix}card-background-color);
158171
#{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
159-
#{$css-var-prefix}card-sectioning-background-color: #{mix($slate-900, $slate-850, 75%)};
172+
#{$css-var-prefix}card-sectioning-background-color: #{color.mix($slate-900, $slate-850, 75%)};
160173
}
161174

162175
// Dropdown (details.dropdown)
@@ -175,7 +188,7 @@
175188

176189
// Modal (<dialog>)
177190
@if map.get($modules, "components/modal") {
178-
#{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($black, $zinc-950), 0.75)};
191+
#{$css-var-prefix}modal-overlay-background-color: #{rgba(color.mix($black, $zinc-950), 0.75)};
179192
}
180193

181194
// Progress
@@ -192,8 +205,8 @@
192205

193206
// Form validation icons
194207
@if map.get($modules, "forms/basics") {
195-
#{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
196-
#{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
208+
#{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
209+
#{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
197210
}
198211

199212
// Focus for buttons, radio and select

‎scss/themes/default/_light.scss

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12
@use "sass:map";
23
@use "../../colors" as *;
34
@use "../../settings" as *;
@@ -17,7 +18,7 @@
1718

1819
// Muted colors
1920
#{$css-var-prefix}muted-color: #{$zinc-550};
20-
#{$css-var-prefix}muted-border-color: #{mix($slate-100, $slate-50)};
21+
#{$css-var-prefix}muted-border-color: #{color.mix($slate-100, $slate-50)};
2122

2223
// Primary colors
2324
#{$css-var-prefix}primary: theme-colors.get("primary", "light");
@@ -69,12 +70,12 @@
6970
#{$css-var-prefix}h6-color: #{$zinc-550};
7071

7172
// Highlighted text (<mark>)
72-
#{$css-var-prefix}mark-background-color: #{mix($amber-100, $amber-50)};
73+
#{$css-var-prefix}mark-background-color: #{color.mix($amber-100, $amber-50)};
7374
#{$css-var-prefix}mark-color: #{$zinc-950};
7475

7576
// Inserted (<ins>) & Deleted (<del>)
76-
#{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-750)};
77-
#{$css-var-prefix}del-color: #{mix($red-500, $zinc-750)};
77+
#{$css-var-prefix}ins-color: #{color.mix($jade-450, $zinc-750)};
78+
#{$css-var-prefix}del-color: #{color.mix($red-500, $zinc-750)};
7879

7980
// Blockquote
8081
#{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
@@ -97,15 +98,15 @@
9798

9899
// Code
99100
@if map.get($modules, "content/code") {
100-
#{$css-var-prefix}code-background-color: #{mix($slate-50, $white, 75%)};
101+
#{$css-var-prefix}code-background-color: #{color.mix($slate-50, $white, 75%)};
101102
#{$css-var-prefix}code-color: #{$zinc-550};
102103
#{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
103104
#{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
104105
}
105106

106107
// Form elements
107108
@if map.get($modules, "forms/basics") {
108-
#{$css-var-prefix}form-element-background-color: #{mix($slate-50, $white, 25%)};
109+
#{$css-var-prefix}form-element-background-color: #{color.mix($slate-50, $white, 25%)};
109110
#{$css-var-prefix}form-element-selected-background-color: #{$slate-100};
110111
#{$css-var-prefix}form-element-border-color: #{$slate-150};
111112
#{$css-var-prefix}form-element-color: #{$zinc-850};
@@ -114,13 +115,21 @@
114115
#{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
115116
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
116117
#{$css-var-prefix}form-element-disabled-opacity: 0.5;
117-
#{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $zinc-350)};
118-
#{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $zinc-350, 75%)};
118+
#{$css-var-prefix}form-element-invalid-border-color: #{color.mix($red-500, $zinc-350)};
119+
#{$css-var-prefix}form-element-invalid-active-border-color: #{color.mix(
120+
$red-500,
121+
$zinc-350,
122+
75%
123+
)};
119124
#{$css-var-prefix}form-element-invalid-focus-color: var(
120125
#{$css-var-prefix}form-element-invalid-active-border-color
121126
);
122-
#{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $zinc-350)};
123-
#{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $zinc-350, 75%)};
127+
#{$css-var-prefix}form-element-valid-border-color: #{color.mix($jade-450, $zinc-350)};
128+
#{$css-var-prefix}form-element-valid-active-border-color: #{color.mix(
129+
$jade-450,
130+
$zinc-350,
131+
75%
132+
)};
124133
#{$css-var-prefix}form-element-valid-focus-color: var(
125134
#{$css-var-prefix}form-element-valid-active-border-color
126135
);
@@ -156,7 +165,7 @@
156165
#{$css-var-prefix}card-background-color: var(#{$css-var-prefix}background-color);
157166
#{$css-var-prefix}card-border-color: var(#{$css-var-prefix}muted-border-color);
158167
#{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
159-
#{$css-var-prefix}card-sectioning-background-color: #{mix($slate-50, $white, 25%)};
168+
#{$css-var-prefix}card-sectioning-background-color: #{color.mix($slate-50, $white, 25%)};
160169
}
161170

162171
// Dropdown (details.dropdown)
@@ -175,7 +184,7 @@
175184

176185
// Modal (<dialog>)
177186
@if map.get($modules, "components/modal") {
178-
#{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($zinc-100, $zinc-50), 0.75)};
187+
#{$css-var-prefix}modal-overlay-background-color: #{rgba(color.mix($zinc-100, $zinc-50), 0.75)};
179188
}
180189

181190
// Progress
@@ -192,8 +201,8 @@
192201

193202
// Form validation icons
194203
@if map.get($modules, "forms/basics") {
195-
#{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($jade-450, $zinc-350))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
196-
#{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($red-500, $zinc-350, 75%))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
204+
#{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($jade-450, $zinc-350))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
205+
#{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($red-500, $zinc-350, 75%))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
197206
}
198207

199208
// Focus for buttons, radio and select

‎scss/themes/default/_theme-colors.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12
@use "sass:map";
23
@use "../../colors" as *;
34
@use "../../settings" as *;
@@ -442,7 +443,7 @@ $color-mappings: (
442443
"primary-background": $yellow-100,
443444
"primary-underline": rgba($yellow-350, 0.5),
444445
"primary-hover": $yellow-250,
445-
"primary-hover-background": mix($yellow-100, $yellow-50),
446+
"primary-hover-background": color.mix($yellow-100, $yellow-50),
446447
"primary-focus": rgba($yellow-350, 0.375),
447448
"primary-inverse": $black,
448449
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),

0 commit comments

Comments
 (0)