Skip to content
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.

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

[v4] [core] feat: update checkbox and radio colors #5056

Merged
merged 1 commit into from
Dec 3, 2021

Conversation

johnly13
Copy link
Contributor

@johnly13 johnly13 commented Dec 2, 2021

Changes proposed in this pull request:

Checkboxes and radio buttons currently follow default button styling. However, in dark mode, the need to have a darker border means the fill has to be light, making it stand out as a light box in context.

The visual change not only converts the dark mode unselected states to an outline, but changes the style overall. Unselected states now follow minimal button backgrounds when unselected, and dark mode selected states using a lighter border to match.

Reviewers should focus on:

No regressions, and styles match mocks

Screenshot

Checkbox

Before After
image image
image image

Radio

Before After
image image
image image

@@ -28,14 +28,6 @@ $dark-minimal-button-intents-modern: (
"warning": (rgba($orange3, 0.2), $orange5, rgba($orange3, 0.3), $orange6),
"danger": (rgba($red3, 0.2), $red5, rgba($red3, 0.3), $red6)
);
$minimal-button-background-color-hover: rgba($gray3, 0.15);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

made these overrides the defaults

@@ -237,37 +229,7 @@ $tree-intent-icon-colors-modern: (
}
}

// Contrast for checkboxes and radio buttons
.#{$ns}-control {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

removed most of these except for

    input:focus ~ .#{$ns}-control-indicator {
      outline: $blue5 auto 2px;
    }

@blueprint-bot
Copy link

[v4] [core] feat: update checkbox and radio colors

Previews: documentation | landing | table | modern colors demo

@adidahiya adidahiya merged commit 26e7d26 into next Dec 3, 2021
@adidahiya adidahiya deleted the jl/v4-checkbox-revisions branch December 3, 2021 14:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants