Skip to content

Commit 60af0df

Browse files
annschannsch
committed
refactor: updated db-ui-base
1 parent a686262 commit 60af0df

File tree

16 files changed

+116
-101
lines changed

16 files changed

+116
-101
lines changed

‎package-lock.json‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
"license": "Apache-2.0",
6161
"dependencies": {
6262
"@csstools/normalize.css": "^12.0.0",
63-
"@db-ui/base": "2.0.0-0-01dc14a"
63+
"@db-ui/base": "2.0.0-2-acc7fa7"
6464
},
6565
"devDependencies": {
6666
"@babel/cli": "^7.19.3",

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424
border-bottom: 4px solid $db-colors-primary-enabled;
2525
border-radius: 5px;
2626
border-top: 3px solid $db-colors-primary-enabled;
27-
border-top: 3px solid $db-color-red-500;
2827
content: "";
2928
display: block;
3029
height: 0;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,6 @@ nav,
6464
list-style-type: "\2022"+ "   ";
6565

6666
li::marker {
67-
color: $db-color-red-500;
67+
color: $db-colors-primary-enabled;
6868
}
6969
}

‎source/_patterns/01-elements/checkbox/checkbox.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,6 @@
6666
}
6767

6868
& + label {
69-
margin-left: $db-spacing-0-5;
69+
margin-left: $db-spacing-fixed-normal-xs;
7070
}
7171
}

‎source/_patterns/01-elements/headline/headline.scss‎

Lines changed: 70 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,79 @@
11
@use "sass:math";
22
@import "headline.variables";
33

4-
.elm-headline {
5-
margin-bottom: to-rem($pxValue: 16);
4+
// .elm-headline {
5+
// margin-bottom: to-rem($pxValue: 16);
66

7-
// * TODO: These declarations make sense for the moment, but should get aligned with overall definitions of spacing around elements
8-
margin-top: to-rem($pxValue: 24);
9-
}
7+
// // * TODO: These declarations make sense for the moment, but should get aligned with overall definitions of spacing around elements
8+
// margin-top: to-rem($pxValue: 24);
9+
// }
1010

11-
h1,
12-
h2,
13-
h3 {
14-
&.elm-headline {
15-
font-family: $db-font-family-headline;
16-
font-weight: 900;
17-
}
18-
}
11+
// h1,
12+
// h2,
13+
// h3 {
14+
// &.elm-headline {
15+
// font-family: $db-font-family-headline;
16+
// font-weight: 900;
17+
// }
18+
// }
1919

20-
h1 {
21-
&.elm-headline {
22-
font-size: to-rem(
23-
$pxValue: $rea-main-h1-font-size
24-
); // * TODO: possibly rework variable naming
25-
line-height: math.div(40, $rea-main-h1-font-size);
26-
@media screen and (max-width: 767px) {
27-
font-size: to-rem(
28-
$pxValue: $rea-main-h1-font-size-small
29-
); // * TODO: possibly rework variable naming
30-
line-height: 1.14;
31-
}
32-
}
33-
}
20+
// h1 {
21+
// &.elm-headline {
22+
// font-size: to-rem(
23+
// $pxValue: $rea-main-h1-font-size
24+
// ); // * TODO: possibly rework variable naming
25+
// line-height: math.div(40, $rea-main-h1-font-size);
26+
// @media screen and (max-width: 767px) {
27+
// font-size: to-rem(
28+
// $pxValue: $rea-main-h1-font-size-small
29+
// ); // * TODO: possibly rework variable naming
30+
// line-height: 1.14;
31+
// }
32+
// }
33+
// }
3434

35-
h2 {
36-
&.elm-headline {
37-
font-size: to-rem(
38-
$pxValue: $rea-main-h2-font-size
39-
); // * TODO: possibly rework variable naming
40-
line-height: math.div(28, $rea-main-h2-font-size);
41-
@media screen and (max-width: 767px) {
42-
font-size: to-rem(
43-
$pxValue: $rea-main-h2-font-size-small
44-
); // * TODO: possibly rework variable naming
45-
line-height: 1.2;
46-
}
47-
}
48-
}
35+
// h2 {
36+
// &.elm-headline {
37+
// font-size: to-rem(
38+
// $pxValue: $rea-main-h2-font-size
39+
// ); // * TODO: possibly rework variable naming
40+
// line-height: math.div(28, $rea-main-h2-font-size);
41+
// @media screen and (max-width: 767px) {
42+
// font-size: to-rem(
43+
// $pxValue: $rea-main-h2-font-size-small
44+
// ); // * TODO: possibly rework variable naming
45+
// line-height: 1.2;
46+
// }
47+
// }
48+
// }
4949

50-
h3 {
51-
&.elm-headline {
52-
font-size: to-rem(
53-
$pxValue: $rea-main-h3-font-size
54-
); // * TODO: possibly rework variable naming
55-
line-height: math.div(24, $rea-main-h3-font-size);
56-
@media screen and (max-width: 767px) {
57-
font-size: to-rem(
58-
$pxValue: $rea-main-h3-font-size-small
59-
); // * TODO: possibly rework variable naming
60-
line-height: 1.33;
61-
}
62-
}
63-
}
50+
// h3 {
51+
// &.elm-headline {
52+
// font-size: to-rem(
53+
// $pxValue: $rea-main-h3-font-size
54+
// ); // * TODO: possibly rework variable naming
55+
// line-height: math.div(24, $rea-main-h3-font-size);
56+
// @media screen and (max-width: 767px) {
57+
// font-size: to-rem(
58+
// $pxValue: $rea-main-h3-font-size-small
59+
// ); // * TODO: possibly rework variable naming
60+
// line-height: 1.33;
61+
// }
62+
// }
63+
// }
6464

65-
h4 {
66-
&.elm-headline {
67-
font-size: to-rem(
68-
$pxValue: $rea-main-h4-font-size
69-
); // * TODO: possibly rework variable naming
70-
font-weight: 400;
71-
line-height: math.div(24, $rea-main-h4-font-size);
72-
@media screen and (max-width: 767px) {
73-
font-size: to-rem(
74-
$pxValue: $rea-main-h4-font-size-small
75-
); // * TODO: possibly rework variable naming
76-
line-height: 1.25;
77-
}
78-
}
79-
}
65+
// h4 {
66+
// &.elm-headline {
67+
// font-size: to-rem(
68+
// $pxValue: $rea-main-h4-font-size
69+
// ); // * TODO: possibly rework variable naming
70+
// font-weight: 400;
71+
// line-height: math.div(24, $rea-main-h4-font-size);
72+
// @media screen and (max-width: 767px) {
73+
// font-size: to-rem(
74+
// $pxValue: $rea-main-h4-font-size-small
75+
// ); // * TODO: possibly rework variable naming
76+
// line-height: 1.25;
77+
// }
78+
// }
79+
// }

‎source/_patterns/01-elements/input/input.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
line-height: to-rem($pxValue: 24);
1414
max-width: 100%;
1515

16-
padding: $db-spacing-1 $db-spacing-2;
16+
padding: $db-spacing-fixed-normal-xs $db-spacing-fixed-normal-m;
1717

1818
width: 100%;
1919

@@ -86,7 +86,10 @@
8686
font-size: to-rem($pxValue: 12);
8787

8888
margin-bottom: -#{to-rem($pxValue: 18)};
89-
transform: translate($db-spacing-2, -#{to-rem($pxValue: 41)});
89+
transform: translate(
90+
$db-spacing-fixed-normal-m,
91+
-#{to-rem($pxValue: 41)}
92+
);
9093

9194
& + .description {
9295
margin-top: 0;

‎source/_patterns/01-elements/radio/radio.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
// }
5151

5252
& + label {
53-
margin-left: $db-spacing-0-5;
53+
margin-left: $db-spacing-fixed-normal-xs;
5454
}
5555

5656
&:disabled {

‎source/_patterns/01-elements/select/select.scss‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@
2525
background-position: right to-rem($pxValue: 11) center;
2626
background-repeat: no-repeat;
2727
height: to-rem($pxValue: 44);
28-
padding: to-rem($pxValue: 20) to-rem($pxValue: 42) 0 $db-spacing-2;
28+
padding: to-rem($pxValue: 20) to-rem($pxValue: 42) 0
29+
$db-spacing-fixed-normal-m;
2930

3031
// Floating labels
3132
& + .elm-label {
@@ -43,7 +44,10 @@
4344
& + .elm-label {
4445
color: $select-floatingLabel--color;
4546
font-size: to-rem($pxValue: 16);
46-
transform: translate($db-spacing-2, -#{to-rem($pxValue: 35)});
47+
transform: translate(
48+
$db-spacing-fixed-normal-m,
49+
-#{to-rem($pxValue: 35)}
50+
);
4751
}
4852
}
4953
}
@@ -70,7 +74,10 @@
7074
display: block;
7175
font-size: to-rem($pxValue: 12);
7276
margin-bottom: -#{to-rem($pxValue: 18)};
73-
transform: translate($db-spacing-2, -#{to-rem($pxValue: 41)});
77+
transform: translate(
78+
$db-spacing-fixed-normal-m,
79+
-#{to-rem($pxValue: 41)}
80+
);
7481
transition: opacity, transform 150ms;
7582
// Adopted by https://www.heise.de/developer/artikel/a11y-Reduced-Motion-4356171.html
7683
@media (prefers-reduced-motion: reduce) {
@@ -82,7 +89,10 @@
8289
margin-top: to-rem($pxValue: 16);
8390

8491
& + .elm-label {
85-
transform: translate($db-spacing-2, -#{to-rem($pxValue: 100)});
92+
transform: translate(
93+
$db-spacing-fixed-normal-m,
94+
-#{to-rem($pxValue: 100)}
95+
);
8696
}
8797
}
8898

‎source/_patterns/02-components/accordion/accordion.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
align-items: center;
1414
display: flex;
1515

16-
padding-block: $db-spacing-1;
16+
padding-block: db-spacing-fixed-normal-xs;
1717
// Negating the padding left for moving the element into that direction with the same measures
1818
transform: translateX(calc(var(--db-accordion---paddingLeft) * -1));
1919
width: calc(
@@ -95,7 +95,7 @@
9595

9696
summary {
9797
font-size: to-rem($pxValue: 20);
98-
padding-block: $db-spacing-2;
98+
padding-block: $db-spacing-fixed-normal-m;
9999

100100
&::before {
101101
--icon-font-size: #{to-rem($pxValue: 32)};

0 commit comments

Comments
 (0)