Skip to content

Commit 1ce65c0

Browse files
nmergetgithub-actions[bot]mfranzke
authored
refactor: variables for transparent-hovered/-pressed (#4565)
* refactor: variables for transparent-hovered/-pressed * auto update snapshots (#4574) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update v2.x.x-to-v3.0.0.md --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Maximilian Franzke <[email protected]>
1 parent b50c005 commit 1ce65c0

38 files changed

+468
-167
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ Check our migration docs for breaking changes:
100100
6. [v0.6 ➡ v0.7](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/v0.6.x-to-v0.7.x.md)
101101
7. [v0.7 ➡ v1.0](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/v0.7.x-to-v1.0.0.md)
102102
8. [v1.x ➡ v2.0](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/v1.x.x-to-v2.0.0.md)
103+
9. [v2.x ➡ v3.0](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/v2.x.x-to-v3.0.0.md)
103104

104105
## FAQ
105106

‎__snapshots__/checkbox/showcase/mobile-chrome/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png

2 Bytes
Loading

‎__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png

0 Bytes
Loading

‎docs/migration/v2.x.x-to-v3.0.0.md

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,19 @@
11
## Migration Beta (1.x.x) ➡ 2.0.0
22

3+
## transparent-hovered/-pressed
4+
5+
We aligned some variables with design.
6+
7+
`db-adaptive-bg-basic-transparent-hovered` becomes:
8+
9+
- `db-adaptive-bg-basic-transparent-full-hovered`
10+
- `db-adaptive-bg-basic-transparent-semi-hovered`
11+
12+
`db-adaptive-bg-basic-transparent-pressed` becomes:
13+
14+
- `db-adaptive-bg-basic-transparent-full-pressed`
15+
- `db-adaptive-bg-basic-transparent-semi-pressed`
16+
317
## db-button/DBButton type
418

519
### `type` property
@@ -51,7 +65,7 @@ We updated some breakpoints to align with design:
5165

5266
We renamed the `data-icon-after` and `data-icon-before` properties to `data-icon-trailing` and `data-icon-leading`,
5367
as well the properties in components to `iconTrailing` and/or `iconLeading`.
54-
Furthermore, we added the possibility to set a a trailing icon on the `db-button`/`DBButton` component.
68+
Furthermore, we added the possibility to set a trailing icon on the `db-button`/`DBButton` component.
5569

5670
You can still use `db-icon`/`icon` in most elements/components, which results in showing the default icon.
5771
Most of the time this will be the leading icon, but in some cases it might be the trailing icon, depending on the component.

‎packages/components/src/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,11 @@ Main use-case to overwrite a color or change colors by `data-variant`. Example:
5252

5353
.db-xxx {
5454
@include helpers.hover {
55-
background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
55+
background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
5656
}
5757

5858
@include helpers.active {
59-
background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
59+
background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
6060
}
6161

6262
@each $name in colors.$variant-colors {

‎packages/components/src/components/button/button.scss

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,6 @@
2121
// disable text-decoration if someone wants to use the button for an <a> tag
2222
text-decoration: none;
2323

24-
@include helpers.hover {
25-
background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
26-
}
27-
28-
@include helpers.active {
29-
background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
30-
}
31-
3224
// Square icon only buttons
3325
&[data-no-text="true"] {
3426
@include icons.is-icon-text-replace();
@@ -92,10 +84,26 @@
9284
&[data-variant=""],
9385
&[data-variant="ghost"] {
9486
background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
87+
88+
@include helpers.hover {
89+
background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
90+
}
91+
92+
@include helpers.active {
93+
background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
94+
}
9595
}
9696

9797
&[data-variant="filled"] {
9898
background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
99+
100+
@include helpers.hover {
101+
background-color: colors.$db-adaptive-bg-basic-transparent-semi-hovered;
102+
}
103+
104+
@include helpers.active {
105+
background-color: colors.$db-adaptive-bg-basic-transparent-semi-pressed;
106+
}
99107
}
100108

101109
&:disabled {

‎packages/components/src/components/checkbox/checkbox.scss

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,14 @@
4848

4949
input {
5050
&:not(:checked) {
51-
--db-adaptive-bg-basic-transparent-default: var(
52-
--db-#{$variant}-bg-basic-transparent-default
51+
--db-adaptive-bg-basic-transparent-full-default: var(
52+
--db-#{$variant}-bg-basic-transparent-full-default
5353
);
54-
--db-adaptive-bg-basic-transparent-hovered: var(
55-
--db-#{$variant}-bg-basic-transparent-hovered
54+
--db-adaptive-bg-basic-transparent-full-hovered: var(
55+
--db-#{$variant}-bg-basic-transparent-full-hovered
5656
);
57-
--db-adaptive-bg-basic-transparent-pressed: var(
58-
--db-#{$variant}-bg-basic-transparent-pressed
57+
--db-adaptive-bg-basic-transparent-full-pressed: var(
58+
--db-#{$variant}-bg-basic-transparent-full-pressed
5959
);
6060
}
6161

@@ -64,10 +64,10 @@
6464
--db-adaptive-bg-basic-transparent-full-default: var(
6565
--db-#{$variant}-bg-inverted-contrast-high-default
6666
);
67-
--db-adaptive-bg-basic-transparent-hovered: var(
67+
--db-adaptive-bg-basic-transparent-full-hovered: var(
6868
--db-#{$variant}-bg-inverted-contrast-high-hovered
6969
);
70-
--db-adaptive-bg-basic-transparent-pressed: var(
70+
--db-adaptive-bg-basic-transparent-full-pressed: var(
7171
--db-#{$variant}-bg-inverted-contrast-high-pressed
7272
);
7373
}
@@ -106,10 +106,10 @@
106106
--db-adaptive-bg-basic-transparent-full-default: var(
107107
--db-adaptive-bg-inverted-contrast-max-default
108108
);
109-
--db-adaptive-bg-basic-transparent-hovered: var(
109+
--db-adaptive-bg-basic-transparent-full-hovered: var(
110110
--db-adaptive-bg-inverted-contrast-max-hovered
111111
);
112-
--db-adaptive-bg-basic-transparent-pressed: var(
112+
--db-adaptive-bg-basic-transparent-full-pressed: var(
113113
--db-adaptive-bg-inverted-contrast-max-pressed
114114
);
115115

‎packages/components/src/components/custom-select-list-item/custom-select-list-item.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@ db-custom-select-list-item:not(:last-of-type) {
2525
&:has(> label) {
2626
&:not(:has(input[type="radio"]:checked)) {
2727
@include helpers.hover {
28-
background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
28+
background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
2929
}
3030

3131
@include helpers.active {
32-
background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
32+
background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
3333
}
3434
}
3535
}
@@ -71,8 +71,8 @@ db-custom-select-list-item:not(:last-of-type) {
7171

7272
> input {
7373
// We revert interaction states for checkbox
74-
--db-adaptive-bg-basic-transparent-hovered: #{colors.$db-adaptive-bg-basic-transparent-full-default};
75-
--db-adaptive-bg-basic-transparent-pressed: #{colors.$db-adaptive-bg-basic-transparent-full-default};
74+
--db-adaptive-bg-basic-transparent-full-hovered: #{colors.$db-adaptive-bg-basic-transparent-full-default};
75+
--db-adaptive-bg-basic-transparent-full-pressed: #{colors.$db-adaptive-bg-basic-transparent-full-default};
7676

7777
&::after {
7878
position: absolute;

‎packages/components/src/components/input/input.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -162,11 +162,11 @@ $icon-padding: calc(
162162

163163
&:hover,
164164
&:focus {
165-
background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
165+
background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
166166
}
167167

168168
&:active {
169-
background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
169+
background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
170170
}
171171
}
172172
}

‎packages/components/src/components/navigation-item/navigation-item.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,15 +65,15 @@
6565
justify-content: space-between;
6666

6767
@include helpers.hover {
68-
background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
68+
background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
6969
}
7070

7171
@include helpers.active {
72-
background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
72+
background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
7373
}
7474

7575
&:has(~ .db-sub-navigation:is(:hover, :focus)) {
76-
background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
76+
background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
7777
}
7878
}
7979

0 commit comments

Comments
 (0)