Skip to content

Add contrast colors Sass map - #23440

Closed
jacobmllr95 wants to merge 7 commits into
twbs:v4-devfrom
jacobmllr95:add-contrast-colors-sass-map
Closed

jacobmllr95 wants to merge 7 commits into
twbs:v4-devfrom
jacobmllr95:add-contrast-colors-sass-map

Conversation

@jacobmllr95

Copy link
Copy Markdown
Contributor

This commit adds a $contrast-colors Sass map to the variables. This makes it possible to define a custom contrast color for a given color. Closes #23418.

Let's say someone wants the color for btn-secondary to be black:

$contrast-colors: (
  $gray-600: $black
);

bootstrap-v4-beta-btn-secondary-black-color

Or if you want to restore the Bootstrap v4 Alpha colors:

$blue:   #0275d8;
$green:  #5cb85c;
$teal:   #5bc0de;
$yellow: #ffd500;
$red:    #d9534f;

$theme-colors: (
  secondary: $white
);

$contrast-colors: (
  $blue: $white,
  $white: $gray-600,
  $green: $white,
  $cyan: $white,
  $yellow: $white,
  $red: $white
);

bootstrap-v4-alpha-button-syles

@Johann-S Johann-S added css Sass sources or compiled CSS v4 v4, the frozen docs on gh-pages labels Oct 5, 2017
@mdo

mdo commented Oct 19, 2017

Copy link
Copy Markdown
Member

Closing for a simpler approach of adding vars for these two colors: #24426. It's not the per-theme-color approach as here, but it provides some flexibility.

@mdo mdo closed this Oct 19, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

css Sass sources or compiled CSS v4 v4, the frozen docs on gh-pages

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants