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
  • !22551

v4 Color update

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Mark Otto requested to merge colors into v4-dev May 01, 2017
  • Overview 0
  • Commits 26
  • Pipelines 0
  • Changes 36

While working on the forms update, I noticed we have quite a few ways of reassigning variables for our color system. The $brand- variables have been around for awhile as a support system for semantic naming, but honestly, it's an unhelpful abstraction. Not everyone's primary color is blue or their error state red.

This PR aims to drastically improve the power of our colors, simplify code by removing the $brand- and $state- variables, and increase the number of component variants and utility classes. This has been built in such a way that we can easily expand or add new maps for color shades after v4 ships. I went down a few paths the last couple weeks and ultimately decided this was the one of least resistance given a shorter window.

More specifically, this:

  • Removes the $brand- variables, replaced by ${color} variables. For example, instead of $brand-primary it's $blue.
  • Removes the $state- variables as only alerts and list groups were using them. Fixes #22175 (closed). (For those following along at home, this is the start of the color variable rabbit hole. 😆)
  • Renames all component variants from success, info, warning, and danger to their color counterparts.
  • Fixes #21311 (closed) by adding .btn-gray-dark variant.
  • Closes #19792 (closed) as a won't fix by removing card variants for background and border utils.
  • Fixes #18119 (closed) by adding a color contrast mixin.
  • Closes #22062 (closed) and #22363—no need for customizing the color of badges when there are text color utilities.
  • Updates buttons to use the $colors Sass map to generate more button variants.

More still to come, including:

  • Finish updating Options docs
  • Revamp the colors to create an actual color scheme
  • Ideally improve contrast ratios
  • Consolidate and standardize variant names

See #18462 for first foray into color palette. That PR failed as it started with the brand and state colors vs abandoning them completely for a clearer and more customizable system.

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: colors