Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !36168

Manually set hover and active backgrounds and borders for dark and light buttons

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Mark Otto requested to merge custom-light-dark-buttons into main Apr 14, 2022
  • Overview 9
  • Commits 1
  • Pipelines 0
  • Changes 1

This isn't elegant at all, and is actually rather annoying for others, but it fixes a problem, so here it goes.

This PR aims to improve the color contrast on hover and active state for light and dark buttons. There's no other way I can find to do this without it being a complete rewrite of the component at this point. Placing two custom conditions in here though—based on the extremes of our color palette—seems okay though.

I'd rather go this route than #35293 because this keeps the customization in the usage of the mixin as opposed to the logic of the mixin. Ideally we could setup custom color functions like #34013, but I can only see us doing that with a rewrite of the mixin as well (which could include an optional parameter or something for specifying tint or shade.

Lastly, I don't see this needing to affect outline buttons. Those have separate issues, yes, but for the moment they have a clear enough hover state at least (though not a clear enough active one).

Definitely need some more thoughts though from @twbs/css-review :).

Closes #35293. Fixes #34123 (closed).

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: custom-light-dark-buttons