Skip to content

Commit bc5c4b9

Browse files
mfranzkemfranzke
authored
refactor(sass): version migration (#1011)
* refactor: using internal color functions * refactor: using internal string function * refactor: using internal map.merge function * refactor: using internal map.get function * refactor: using internal string.unquote function * refactor: use the internal map.get function * refactor: running prettier
1 parent 89ea629 commit bc5c4b9

File tree

8 files changed

+37
-25
lines changed

8 files changed

+37
-25
lines changed

‎source/_patterns/00-base/_helpers.scss

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12
@mixin rgba2hex(
23
$cssProperty,
34
$hexValue,
@@ -6,10 +7,12 @@
67
$rgbBackground: #fdfdfd
78
) {
89
#{$cssProperty}: rgb(
9-
(1 - $alphaValue) * red($rgbBackground) + $alphaValue * red($hexValue),
10-
(1 - $alphaValue) * green($rgbBackground) + $alphaValue *
11-
green($hexValue),
12-
(1 - $alphaValue) * blue($rgbBackground) + $alphaValue * blue($hexValue)
10+
(1 - $alphaValue) * color.red($rgbBackground) + $alphaValue *
11+
color.red($hexValue),
12+
(1 - $alphaValue) * color.green($rgbBackground) + $alphaValue *
13+
color.green($hexValue),
14+
(1 - $alphaValue) * color.blue($rgbBackground) + $alphaValue *
15+
color.blue($hexValue)
1316
);
1417
}
1518

‎source/_patterns/00-base/_init.global.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12
// *! this is an opionionated (especially based on "enhancing" normalize.css) version of minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css
23
html,
34
body {
@@ -61,7 +62,7 @@ a {
6162

6263
code {
6364
background-color: #f5f5f5;
64-
color: darken($db-color-red, 2%);
65+
color: color.adjust($db-color-red, $lightness: -2%);
6566
font-size: 0.875em;
6667
font-weight: normal;
6768
padding: 0.25em 0.5em;

‎source/_patterns/00-base/icons/_icons.font-faces.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:string";
12
@import "../../../css/db-ui-core.variables";
23

34
@import "icons.variables";
@@ -32,7 +33,7 @@
3233
url("#{$icons-path}functional/fonts/#{$icon-font-family+ "-" + $icon-category}.woff?4r2098")
3334
format("woff");
3435

35-
unicode-range: unquote($icon-font-unicodes);
36+
unicode-range: string.unquote($icon-font-unicodes);
3637
}
3738
}
3839
}

‎source/_patterns/00-base/icons/_icons.helpers.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:map";
12
// Icon SCSS mixin
23
@mixin icon(
34
$glyph: "",
@@ -99,7 +100,7 @@
99100

100101
// Icon glyph mixin
101102
@function glyph($glyph) {
102-
@return map-get($icon-glyphs, $glyph);
103+
@return map.get($icon-glyphs, $glyph);
103104
}
104105

105106
// Icon meta data mixin

‎source/_patterns/00-base/icons/enterprise/_icons.variables.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:map";
12
@import "../../../../css/helpers/functions";
23
@import "../icons.variables";
34

@@ -81,4 +82,4 @@ $icon-glyphs-enterprise: (
8182
// "upload-cloud": "\e923",
8283
// "watch": "\1f552"
8384
);
84-
$icon-glyphs: map-merge($icon-glyphs-enterprise, $icon-glyphs-personenverkehr);
85+
$icon-glyphs: map.merge($icon-glyphs-enterprise, $icon-glyphs-personenverkehr);

‎source/_patterns/00-base/type/_fonts.scss

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1+
@use "sass:map";
12
@import "../../../css/db-ui-core.variables";
23
@import "fonts.variables";
34

45
@each $font-name, $font-meta in $font-families {
5-
$font-family: map-get($font-meta, "font-family");
6-
$font-filename: map-get($font-meta, "font-filename");
7-
$font-weight: map-get($font-meta, "font-weight");
8-
$font-style: map-get($font-meta, "font-style");
9-
$font-local-name: map-get($font-meta, "font-local-name");
10-
$font-local-name-short: map-get($font-meta, "font-local-name-short");
6+
$font-family: map.get($font-meta, "font-family");
7+
$font-filename: map.get($font-meta, "font-filename");
8+
$font-weight: map.get($font-meta, "font-weight");
9+
$font-style: map.get($font-meta, "font-style");
10+
$font-local-name: map.get($font-meta, "font-local-name");
11+
$font-local-name-short: map.get($font-meta, "font-local-name-short");
1112

1213
@font-face {
1314
font-family: $font-family;

‎source/_patterns/01-elements/buttons/button.scss

+11-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@charset "utf-8";
22

3+
@use "sass:string";
34
@import "button.variables";
45

56
.elm-button {
@@ -46,7 +47,7 @@
4647
background-color: $button-brand-primary--backgroundColor;
4748

4849
&:disabled {
49-
background-color: unquote(
50+
background-color: string.unquote(
5051
$button-brand-primary--backgroundColor + "40"
5152
);
5253
}
@@ -67,7 +68,9 @@
6768
background-color: $button-primary--backgroundColor;
6869

6970
&:disabled {
70-
background-color: unquote($button-primary--backgroundColor + "40");
71+
background-color: string.unquote(
72+
$button-primary--backgroundColor + "40"
73+
);
7174
}
7275

7376
&:not(:disabled) {
@@ -90,8 +93,8 @@
9093
color: $db-color-cool-gray-700;
9194

9295
&:disabled {
93-
color: unquote($db-color-cool-gray-700 + "80");
94-
border-color: unquote($db-color-cool-gray-700 + "40");
96+
color: string.unquote($db-color-cool-gray-700 + "80");
97+
border-color: string.unquote($db-color-cool-gray-700 + "40");
9598
}
9699

97100
&:not(:disabled) {
@@ -111,8 +114,8 @@
111114
color: $db-color-cool-gray-700;
112115

113116
&:disabled {
114-
color: unquote($db-color-cool-gray-700 + "80");
115-
background-color: unquote(
117+
color: string.unquote($db-color-cool-gray-700 + "80");
118+
background-color: string.unquote(
116119
$button-secondarySolid--backgroundColor + "40"
117120
);
118121
}
@@ -135,7 +138,7 @@
135138
color: $db-color-cool-gray-700;
136139

137140
&:disabled {
138-
color: unquote($db-color-cool-gray-700 + "80");
141+
color: string.unquote($db-color-cool-gray-700 + "80");
139142
}
140143

141144
&:not(:disabled) {
@@ -214,7 +217,7 @@
214217
}
215218

216219
&:disabled {
217-
color: unquote($button---color + "80");
220+
color: string.unquote($button---color + "80");
218221
}
219222

220223
// width

‎source/_patterns/01-elements/loading-indicator/loading-indicator.scss

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@charset "utf-8";
2+
@use "sass:map";
23
@use "sass:math";
34

45
@import "loading-indicator.variables";
@@ -17,12 +18,12 @@
1718
&%size-#{$size} {
1819
--loadingindicator--stroke-width: #{math.div(
1920
44px,
20-
map-get($db-spinner-sizes, $size)
21+
map.get($db-spinner-sizes, $size)
2122
) *
2223
$stroke-width};
2324
--loadingindicator--r: 19px;
24-
height: map-get($db-spinner-sizes, $size);
25-
width: map-get($db-spinner-sizes, $size);
25+
height: map.get($db-spinner-sizes, $size);
26+
width: map.get($db-spinner-sizes, $size);
2627
}
2728
}
2829
}

0 commit comments

Comments
 (0)