Skip to content

Commit 61941f5

Browse files
michaelmkrausmfranzkenmerget
authored
feat: change color of label on hovered and active state (#4077)
* feat: change color of label on hovered and active state * test: updated snapshots * refactor: corrected snapshot * test: updated that snapshot * chore: update styles for radio,checkbox and switch * refactor: reverted unrelated changes * chore: update snapshots --------- Co-authored-by: Maximilian Franzke <[email protected]> Co-authored-by: Maximilian Franzke <[email protected]> Co-authored-by: Nicolas Merget <[email protected]>
1 parent e9993cd commit 61941f5

File tree

6 files changed

+468
-419
lines changed

6 files changed

+468
-419
lines changed

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

Lines changed: 76 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,75 @@
2424
}
2525
}
2626

27+
@mixin get-validity-color-check($key: "valid") {
28+
$variant: successful;
29+
30+
@if ($key != "valid") {
31+
$variant: critical;
32+
}
33+
34+
--db-check-element-border-color: var(
35+
--db-#{$variant}-on-bg-basic-emphasis-70-default
36+
);
37+
--db-adaptive-on-bg-basic-emphasis-100-default: var(
38+
--db-#{$variant}-on-bg-basic-emphasis-80-default
39+
);
40+
--db-adaptive-on-bg-basic-emphasis-100-hovered: var(
41+
--db-#{$variant}-on-bg-basic-emphasis-80-hovered
42+
);
43+
--db-adaptive-on-bg-basic-emphasis-100-pressed: var(
44+
--db-#{$variant}-on-bg-basic-emphasis-80-pressed
45+
);
46+
47+
@include form-components.get-validity-message($key);
48+
49+
input {
50+
&:not(:checked) {
51+
--db-adaptive-bg-basic-transparent-default: var(
52+
--db-#{$variant}-bg-basic-transparent-default
53+
);
54+
--db-adaptive-bg-basic-transparent-hovered: var(
55+
--db-#{$variant}-bg-basic-transparent-hovered
56+
);
57+
--db-adaptive-bg-basic-transparent-pressed: var(
58+
--db-#{$variant}-bg-basic-transparent-pressed
59+
);
60+
}
61+
62+
&:checked {
63+
--db-icon-color: var(--db-#{$variant}-on-bg-inverted-default);
64+
--db-adaptive-bg-basic-transparent-full-default: var(
65+
--db-#{$variant}-bg-inverted-contrast-high-default
66+
);
67+
--db-adaptive-bg-basic-transparent-hovered: var(
68+
--db-#{$variant}-bg-inverted-contrast-high-hovered
69+
);
70+
--db-adaptive-bg-basic-transparent-pressed: var(
71+
--db-#{$variant}-bg-inverted-contrast-high-pressed
72+
);
73+
}
74+
}
75+
}
76+
2777
.db-checkbox {
2878
@extend %helper-message;
2979

30-
@include form-components.set-default-check-element(check);
80+
@include form-components.set-default-check-element();
81+
82+
&:not(:has(input:disabled)) {
83+
@include form-components.get-state();
84+
@include form-components.get-state("active");
85+
}
86+
87+
@include form-components.get-validity(check) {
88+
&:has(.db-infotext[data-semantic="successful"]) {
89+
@include get-validity-color-check("valid");
90+
}
91+
}
92+
93+
@include form-components.get-validity(check, "invalid") {
94+
@include get-validity-color-check("invalid");
95+
}
3196

3297
input {
3398
display: flex;
@@ -37,17 +102,21 @@
37102

38103
&:checked {
39104
--db-check-element-border-color: #{colors.$db-adaptive-on-bg-basic-emphasis-70-default};
105+
--db-icon-color: var(--db-adaptive-on-bg-inverted-default);
106+
--db-adaptive-bg-basic-transparent-full-default: var(
107+
--db-adaptive-bg-inverted-contrast-max-default
108+
);
109+
--db-adaptive-bg-basic-transparent-hovered: var(
110+
--db-adaptive-bg-inverted-contrast-max-hovered
111+
);
112+
--db-adaptive-bg-basic-transparent-pressed: var(
113+
--db-adaptive-bg-inverted-contrast-max-pressed
114+
);
40115

41116
@extend %center-icon;
42117

43118
// Check icon
44119
@include icons.set-icon("check");
45-
@include colors.set-current-colors(
46-
colors.$db-adaptive-bg-inverted-contrast-max-default,
47-
colors.$db-adaptive-on-bg-inverted-default,
48-
colors.$db-adaptive-bg-inverted-contrast-max-hovered,
49-
colors.$db-adaptive-bg-inverted-contrast-max-pressed
50-
);
51120

52121
// The icon within the checkbox has the same dimensions as the checkbox itself and that for there can't be any border
53122
border-width: 0;

‎packages/components/src/components/radio/radio.scss

Lines changed: 39 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,49 @@
11
@use "@db-ux/core-foundations/build/styles/variables";
22
@use "@db-ux/core-foundations/build/styles/colors";
3+
@use "@db-ux/core-foundations/build/styles/helpers";
34
@use "../../styles/internal/form-components";
45

6+
@mixin get-radio-validity-colors($variant: "successful") {
7+
--db-check-element-border-color: var(
8+
--db-#{$variant}-on-bg-basic-emphasis-70-default
9+
);
10+
--db-adaptive-on-bg-basic-emphasis-100-default: var(
11+
--db-#{$variant}-on-bg-basic-emphasis-80-default
12+
);
13+
--db-adaptive-on-bg-basic-emphasis-100-hovered: var(
14+
--db-#{$variant}-on-bg-basic-emphasis-80-hovered
15+
);
16+
--db-adaptive-on-bg-basic-emphasis-100-pressed: var(
17+
--db-#{$variant}-on-bg-basic-emphasis-80-pressed
18+
);
19+
--db-adaptive-bg-basic-transparent-default: var(
20+
--db-#{$variant}-bg-basic-transparent-default
21+
);
22+
--db-adaptive-bg-basic-transparent-hovered: var(
23+
--db-#{$variant}-bg-basic-transparent-hovered
24+
);
25+
--db-adaptive-bg-basic-transparent-pressed: var(
26+
--db-#{$variant}-bg-basic-transparent-pressed
27+
);
28+
}
29+
530
.db-radio {
6-
@include form-components.set-default-check-element(radio);
31+
@include form-components.set-default-check-element();
32+
33+
&:not(:has(input:checked, input:disabled)) {
34+
@include form-components.get-state();
35+
@include form-components.get-state("active");
36+
}
37+
38+
@include form-components.get-validity(radio) {
39+
@include get-radio-validity-colors();
40+
}
41+
42+
@include form-components.get-validity(radio, "invalid") {
43+
@include get-radio-validity-colors("critical");
44+
}
745

846
input {
9-
border-color: currentcolor;
1047
border-radius: variables.$db-border-radius-full;
1148

1249
@media screen and (prefers-reduced-motion: no-preference) {
@@ -15,11 +52,6 @@
1552
}
1653

1754
&:checked {
18-
// The radio element still has the default background for the dot on :hover when in checked state
19-
&:not(:disabled):is(:hover, :focus) {
20-
background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
21-
}
22-
2355
&:not([data-size="small"]) {
2456
border-width: calc(
2557
(

‎packages/components/src/components/switch/switch.scss

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,12 @@ $checked-active-transition-size: calc(
3838
.db-switch {
3939
user-select: none;
4040

41-
@include form-components.set-default-check-element(switch);
41+
@include form-components.set-default-check-element();
4242

43-
// This is needed when clicking on the label instead of the input
44-
@include helpers.active {
45-
> input {
43+
&:not(:has(input:disabled)) {
44+
@include form-components.get-state();
45+
46+
@include form-components.get-state("active") {
4647
@extend %active-transition;
4748
}
4849
}
@@ -63,12 +64,13 @@ $checked-active-transition-size: calc(
6364
align-items: center;
6465
/* stylelint-disable-next-line db-ux/use-spacings */
6566
gap: $switch-fixed-padding;
66-
background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
6767
border-radius: variables.$db-border-radius-full;
6868

6969
@include icons.set-icon("cross", "after");
7070

7171
&::after {
72+
--db-icon-color: #{colors.$db-adaptive-on-bg-basic-emphasis-100-default};
73+
7274
visibility: hidden;
7375
align-self: center;
7476
aspect-ratio: 1;
@@ -81,8 +83,8 @@ $checked-active-transition-size: calc(
8183
align-content: center;
8284
aspect-ratio: 1;
8385
block-size: $switch-inactive-thumb-size;
84-
background-color: colors.$db-adaptive-bg-inverted-contrast-max-default;
85-
color: colors.$db-adaptive-bg-inverted-contrast-max-default;
86+
background-color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
87+
color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
8688
border-radius: variables.$db-border-radius-full;
8789
transform: translateX(var(--thumb-offset-x));
8890
margin-inline-end: calc(
@@ -123,6 +125,10 @@ $checked-active-transition-size: calc(
123125
border-color: colors.$db-adaptive-on-bg-basic-emphasis-100-pressed;
124126
}
125127

128+
&::after {
129+
--db-icon-color: #{colors.$db-adaptive-on-bg-inverted-default};
130+
}
131+
126132
&::before {
127133
block-size: $switch-active-thumb-size;
128134
background-color: colors.$db-adaptive-on-bg-inverted-default;
@@ -197,6 +203,14 @@ $checked-active-transition-size: calc(
197203
background-color: colors.$db-adaptive-on-bg-inverted-default;
198204
color: colors.$db-adaptive-on-bg-inverted-default;
199205
}
206+
207+
&::after {
208+
--db-icon-color: #{colors.$db-adaptive-on-bg-inverted-default};
209+
}
210+
}
211+
212+
&::after {
213+
--db-icon-color: #{colors.$db-adaptive-on-bg-inverted-default};
200214
}
201215

202216
&::before {

‎packages/components/src/styles/internal/_form-components.scss

Lines changed: 32 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -428,73 +428,55 @@ $input-valid-types:
428428
}
429429
}
430430

431-
// CHECKBOX & RADIO
432-
433-
@mixin get-validity-color-check($key: "valid") {
431+
@mixin get-validity-color-check-label-color($state, $key: "valid") {
434432
$variant: successful;
435433

436434
@if ($key != "valid") {
437435
$variant: critical;
438436
}
439437

440-
@include get-validity-message($key);
438+
&:has(input:not([role="switch"])) {
439+
&:is(label),
440+
> label {
441+
color: var(--db-#{$variant}-on-bg-basic-emphasis-100-#{$state});
442+
}
443+
}
444+
}
441445

442-
input:not([role="switch"]) {
443-
--db-adaptive-bg-basic-transparent-semi: var(
444-
--db-#{$variant}-bg-basic-transparent-semi-default
445-
);
446-
--db-adaptive-bg-basic-transparent-hovered: var(
447-
--db-#{$variant}-bg-basic-transparent-hovered
448-
);
449-
--db-adaptive-bg-basic-transparent-pressed: var(
450-
--db-#{$variant}-bg-basic-transparent-pressed
451-
);
446+
// CHECKBOX & RADIO
452447

453-
&:not(:checked),
454-
&:is([type="radio"]) {
455-
--db-check-element-border-color: var(
456-
--db-#{$variant}-on-bg-basic-emphasis-70-default
457-
);
458-
}
448+
@mixin get-state($state: "hover") {
449+
$variant: "hovered";
459450

460-
&:not([type="radio"]):checked {
461-
@include colors.set-current-colors(
462-
colors.$db-successful-bg-inverted-contrast-high-default,
463-
colors.$db-successful-on-bg-inverted-default,
464-
colors.$db-successful-bg-inverted-contrast-high-hovered,
465-
colors.$db-successful-bg-inverted-contrast-high-pressed
466-
);
467-
}
451+
@if ($state != "hover") {
452+
$variant: "pressed";
468453
}
469454

470-
&:has(input:not([role="switch"])) {
455+
&:has(input:#{$state}, > label:#{$state}, :is(label):#{$state}) {
456+
--db-check-element-label-color: var(
457+
--db-adaptive-on-bg-basic-emphasis-100-#{$variant}
458+
);
459+
471460
&:is(label),
472461
> label {
473-
color: var(--db-#{$variant}-on-bg-basic-emphasis-80-default);
462+
cursor: helpers.$cursor-pointer;
463+
}
464+
465+
input {
466+
cursor: helpers.$cursor-pointer;
467+
background-color: var(
468+
--db-adaptive-bg-basic-transparent-#{$variant}
469+
);
470+
@content;
474471
}
475472
}
476473
}
477474

478-
@mixin set-default-check-element($selector) {
475+
@mixin set-default-check-element() {
479476
@extend %db-overwrite-font-size-md;
480477

481478
@include set-required-label(input);
482479

483-
@include get-validity($selector) {
484-
@if ($selector == check) {
485-
&:has(.db-infotext[data-semantic="successful"]) {
486-
@include get-validity-color-check("valid");
487-
}
488-
/* stylelint-disable-next-line at-rule-empty-line-before */
489-
} @else {
490-
@include get-validity-color-check("valid");
491-
}
492-
}
493-
494-
@include get-validity($selector, "invalid") {
495-
@include get-validity-color-check("invalid");
496-
}
497-
498480
&:has(input:disabled) {
499481
opacity: component.$default-disabled;
500482
}
@@ -505,11 +487,10 @@ $input-valid-types:
505487
align-items: flex-start;
506488
position: relative;
507489
gap: variables.$db-spacing-fixed-xs;
508-
509-
&:not(:has(input:disabled)) {
510-
@include helpers.hover;
511-
@include helpers.active;
512-
}
490+
color: var(
491+
--db-check-element-label-color,
492+
#{colors.$db-adaptive-on-bg-basic-emphasis-100-default}
493+
);
513494
}
514495

515496
input {
@@ -526,14 +507,6 @@ $input-valid-types:
526507
block-size: $font-size-height;
527508
inline-size: $font-size-height;
528509
padding: 0;
529-
530-
@include helpers.hover {
531-
background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
532-
}
533-
534-
@include helpers.active {
535-
background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
536-
}
537510
}
538511

539512
&[data-size="small"] {

0 commit comments

Comments
 (0)