Skip to content

feat: change color of label on hovered and active state #4077

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 20 commits into from
May 7, 2025
Merged

feat: change color of label on hovered and active state #4077

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
54c5c63
feat: change color of label on hovered and active state
michaelmkraus Apr 17, 2025
d961d48
Merge branch 'main' into feat-optimize-hover-data-inputs
mfranzke Apr 17, 2025
f7a60b2
test: updated snapshots
michaelmkraus Apr 17, 2025
2105f1e
Merge remote-tracking branch 'origin/feat-optimize-hover-data-inputs'…
michaelmkraus Apr 17, 2025
1f6876b
refactor: corrected snapshot
mfranzke Apr 17, 2025
0b032f8
Merge remote-tracking branch 'origin/main' into feat-optimize-hover-d…
michaelmkraus Apr 22, 2025
24c864a
test: updated that snapshot
mfranzke Apr 22, 2025
48d07a0
Merge branch 'main' into feat-optimize-hover-data-inputs
michaelmkraus Apr 22, 2025
6031b62
Merge branch 'main' into feat-optimize-hover-data-inputs
michaelmkraus Apr 22, 2025
5d2a028
Merge branch 'main' into feat-optimize-hover-data-inputs
michaelmkraus Apr 23, 2025
7013447
chore: update styles for radio,checkbox and switch
nmerget May 6, 2025
8b99798
chore: update from main
nmerget May 6, 2025
4e57765
refactor: reverted unrelated changes
mfranzke May 6, 2025
b319459
chore: update snapshots
nmerget May 6, 2025
56ae3a3
Merge remote-tracking branch 'origin/feat-optimize-hover-data-inputs'…
nmerget May 6, 2025
b90a80b
Merge remote-tracking branch 'origin/main' into feat-optimize-hover-d…
nmerget May 6, 2025
6c172dc
Merge branch 'main' into feat-optimize-hover-data-inputs
nmerget May 6, 2025
965ae34
Merge branch 'main' into feat-optimize-hover-data-inputs
nmerget May 7, 2025
67618b4
Merge branch 'main' into feat-optimize-hover-data-inputs
nmerget May 7, 2025
edd6148
Merge branch 'main' into feat-optimize-hover-data-inputs
nmerget May 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 76 additions & 7 deletions packages/components/src/components/checkbox/checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,75 @@
}
}

@mixin get-validity-color-check($key: "valid") {
$variant: successful;

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

--db-check-element-border-color: var(
--db-#{$variant}-on-bg-basic-emphasis-70-default
);
--db-adaptive-on-bg-basic-emphasis-100-default: var(
--db-#{$variant}-on-bg-basic-emphasis-80-default
);
--db-adaptive-on-bg-basic-emphasis-100-hovered: var(
--db-#{$variant}-on-bg-basic-emphasis-80-hovered
);
--db-adaptive-on-bg-basic-emphasis-100-pressed: var(
--db-#{$variant}-on-bg-basic-emphasis-80-pressed
);

@include form-components.get-validity-message($key);

input {
&:not(:checked) {
--db-adaptive-bg-basic-transparent-default: var(
--db-#{$variant}-bg-basic-transparent-default
);
--db-adaptive-bg-basic-transparent-hovered: var(
--db-#{$variant}-bg-basic-transparent-hovered
);
--db-adaptive-bg-basic-transparent-pressed: var(
--db-#{$variant}-bg-basic-transparent-pressed
);
}

&:checked {
--db-icon-color: var(--db-#{$variant}-on-bg-inverted-default);
--db-adaptive-bg-basic-transparent-full-default: var(
--db-#{$variant}-bg-inverted-contrast-high-default
);
--db-adaptive-bg-basic-transparent-hovered: var(
--db-#{$variant}-bg-inverted-contrast-high-hovered
);
--db-adaptive-bg-basic-transparent-pressed: var(
--db-#{$variant}-bg-inverted-contrast-high-pressed
);
}
}
}

.db-checkbox {
@extend %helper-message;

@include form-components.set-default-check-element(check);
@include form-components.set-default-check-element();

&:not(:has(input:disabled)) {
@include form-components.get-state();
@include form-components.get-state("active");
}

@include form-components.get-validity(check) {
&:has(.db-infotext[data-semantic="successful"]) {
@include get-validity-color-check("valid");
}
}

@include form-components.get-validity(check, "invalid") {
@include get-validity-color-check("invalid");
}

input {
display: flex;
Expand All @@ -37,17 +102,21 @@

&:checked {
--db-check-element-border-color: #{colors.$db-adaptive-on-bg-basic-emphasis-70-default};
--db-icon-color: var(--db-adaptive-on-bg-inverted-default);
--db-adaptive-bg-basic-transparent-full-default: var(
--db-adaptive-bg-inverted-contrast-max-default
);
--db-adaptive-bg-basic-transparent-hovered: var(
--db-adaptive-bg-inverted-contrast-max-hovered
);
--db-adaptive-bg-basic-transparent-pressed: var(
--db-adaptive-bg-inverted-contrast-max-pressed
);

@extend %center-icon;

// Check icon
@include icons.set-icon("check");
@include colors.set-current-colors(
colors.$db-adaptive-bg-inverted-contrast-max-default,
colors.$db-adaptive-on-bg-inverted-default,
colors.$db-adaptive-bg-inverted-contrast-max-hovered,
colors.$db-adaptive-bg-inverted-contrast-max-pressed
);

// The icon within the checkbox has the same dimensions as the checkbox itself and that for there can't be any border
border-width: 0;
Expand Down
46 changes: 39 additions & 7 deletions packages/components/src/components/radio/radio.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,49 @@
@use "@db-ux/core-foundations/build/styles/variables";
@use "@db-ux/core-foundations/build/styles/colors";
@use "@db-ux/core-foundations/build/styles/helpers";
@use "../../styles/internal/form-components";

@mixin get-radio-validity-colors($variant: "successful") {
--db-check-element-border-color: var(
--db-#{$variant}-on-bg-basic-emphasis-70-default
);
--db-adaptive-on-bg-basic-emphasis-100-default: var(
--db-#{$variant}-on-bg-basic-emphasis-80-default
);
--db-adaptive-on-bg-basic-emphasis-100-hovered: var(
--db-#{$variant}-on-bg-basic-emphasis-80-hovered
);
--db-adaptive-on-bg-basic-emphasis-100-pressed: var(
--db-#{$variant}-on-bg-basic-emphasis-80-pressed
);
--db-adaptive-bg-basic-transparent-default: var(
--db-#{$variant}-bg-basic-transparent-default
);
--db-adaptive-bg-basic-transparent-hovered: var(
--db-#{$variant}-bg-basic-transparent-hovered
);
--db-adaptive-bg-basic-transparent-pressed: var(
--db-#{$variant}-bg-basic-transparent-pressed
);
}

.db-radio {
@include form-components.set-default-check-element(radio);
@include form-components.set-default-check-element();

&:not(:has(input:checked, input:disabled)) {
@include form-components.get-state();
@include form-components.get-state("active");
}

@include form-components.get-validity(radio) {
@include get-radio-validity-colors();
}

@include form-components.get-validity(radio, "invalid") {
@include get-radio-validity-colors("critical");
}

input {
border-color: currentcolor;
border-radius: variables.$db-border-radius-full;

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

&:checked {
// The radio element still has the default background for the dot on :hover when in checked state
&:not(:disabled):is(:hover, :focus) {
background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
}

&:not([data-size="small"]) {
border-width: calc(
(
Expand Down
28 changes: 21 additions & 7 deletions packages/components/src/components/switch/switch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,12 @@ $checked-active-transition-size: calc(
.db-switch {
user-select: none;

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

// This is needed when clicking on the label instead of the input
@include helpers.active {
> input {
&:not(:has(input:disabled)) {
@include form-components.get-state();

@include form-components.get-state("active") {
@extend %active-transition;
}
}
Expand All @@ -63,12 +64,13 @@ $checked-active-transition-size: calc(
align-items: center;
/* stylelint-disable-next-line db-ux/use-spacings */
gap: $switch-fixed-padding;
background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
border-radius: variables.$db-border-radius-full;

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

&::after {
--db-icon-color: #{colors.$db-adaptive-on-bg-basic-emphasis-100-default};

visibility: hidden;
align-self: center;
aspect-ratio: 1;
Expand All @@ -81,8 +83,8 @@ $checked-active-transition-size: calc(
align-content: center;
aspect-ratio: 1;
block-size: $switch-inactive-thumb-size;
background-color: colors.$db-adaptive-bg-inverted-contrast-max-default;
color: colors.$db-adaptive-bg-inverted-contrast-max-default;
background-color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
border-radius: variables.$db-border-radius-full;
transform: translateX(var(--thumb-offset-x));
margin-inline-end: calc(
Expand Down Expand Up @@ -123,6 +125,10 @@ $checked-active-transition-size: calc(
border-color: colors.$db-adaptive-on-bg-basic-emphasis-100-pressed;
}

&::after {
--db-icon-color: #{colors.$db-adaptive-on-bg-inverted-default};
}

&::before {
block-size: $switch-active-thumb-size;
background-color: colors.$db-adaptive-on-bg-inverted-default;
Expand Down Expand Up @@ -197,6 +203,14 @@ $checked-active-transition-size: calc(
background-color: colors.$db-adaptive-on-bg-inverted-default;
color: colors.$db-adaptive-on-bg-inverted-default;
}

&::after {
--db-icon-color: #{colors.$db-adaptive-on-bg-inverted-default};
}
}

&::after {
--db-icon-color: #{colors.$db-adaptive-on-bg-inverted-default};
}

&::before {
Expand Down
91 changes: 32 additions & 59 deletions packages/components/src/styles/internal/_form-components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -428,73 +428,55 @@ $input-valid-types:
}
}

// CHECKBOX & RADIO

@mixin get-validity-color-check($key: "valid") {
@mixin get-validity-color-check-label-color($state, $key: "valid") {
$variant: successful;

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

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

input:not([role="switch"]) {
--db-adaptive-bg-basic-transparent-semi: var(
--db-#{$variant}-bg-basic-transparent-semi-default
);
--db-adaptive-bg-basic-transparent-hovered: var(
--db-#{$variant}-bg-basic-transparent-hovered
);
--db-adaptive-bg-basic-transparent-pressed: var(
--db-#{$variant}-bg-basic-transparent-pressed
);
// CHECKBOX & RADIO

&:not(:checked),
&:is([type="radio"]) {
--db-check-element-border-color: var(
--db-#{$variant}-on-bg-basic-emphasis-70-default
);
}
@mixin get-state($state: "hover") {
$variant: "hovered";

&:not([type="radio"]):checked {
@include colors.set-current-colors(
colors.$db-successful-bg-inverted-contrast-high-default,
colors.$db-successful-on-bg-inverted-default,
colors.$db-successful-bg-inverted-contrast-high-hovered,
colors.$db-successful-bg-inverted-contrast-high-pressed
);
}
@if ($state != "hover") {
$variant: "pressed";
}

&:has(input:not([role="switch"])) {
&:has(input:#{$state}, > label:#{$state}, :is(label):#{$state}) {
--db-check-element-label-color: var(
--db-adaptive-on-bg-basic-emphasis-100-#{$variant}
);

&:is(label),
> label {
color: var(--db-#{$variant}-on-bg-basic-emphasis-80-default);
cursor: helpers.$cursor-pointer;
}

input {
cursor: helpers.$cursor-pointer;
Comment on lines +462 to +466
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@michaelmkraus how is this related to changing the color ?

background-color: var(
--db-adaptive-bg-basic-transparent-#{$variant}
);
@content;
}
}
}

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

@include set-required-label(input);

@include get-validity($selector) {
@if ($selector == check) {
&:has(.db-infotext[data-semantic="successful"]) {
@include get-validity-color-check("valid");
}
/* stylelint-disable-next-line at-rule-empty-line-before */
} @else {
@include get-validity-color-check("valid");
}
}

@include get-validity($selector, "invalid") {
@include get-validity-color-check("invalid");
}

&:has(input:disabled) {
opacity: component.$default-disabled;
}
Expand All @@ -505,11 +487,10 @@ $input-valid-types:
align-items: flex-start;
position: relative;
gap: variables.$db-spacing-fixed-xs;

&:not(:has(input:disabled)) {
@include helpers.hover;
@include helpers.active;
}
color: var(
--db-check-element-label-color,
#{colors.$db-adaptive-on-bg-basic-emphasis-100-default}
);
}

input {
Expand All @@ -526,14 +507,6 @@ $input-valid-types:
block-size: $font-size-height;
inline-size: $font-size-height;
padding: 0;

@include helpers.hover {
background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
}

@include helpers.active {
background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
}
}

&[data-size="small"] {
Expand Down
Loading
Loading