1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-26 23:04:32 +02:00

Drop color(), theme-color() & gray() functions (#29083)

Drop `color()`, `theme-color()` & `gray()` functions  in favor of variables. The functions just called a `map-get()` of a map where just the variables were defined. 

Also the `theme-color-level()` now accepts any color you want instead of only `$theme-colors` colors. The first value now is a variable instead of the `$theme-colors` key.
This commit is contained in:
Martijn Cuppens
2019-07-25 09:41:13 +02:00
committed by XhmikosR
parent 172d580db3
commit 1c05c1dbf1
7 changed files with 30 additions and 58 deletions

View File

@@ -46,6 +46,6 @@
@each $color, $value in $theme-colors {
.alert-#{$color} {
@include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
@include alert-variant(color-level($value, $alert-bg-level), color-level($value, $alert-border-level), color-level($value, $alert-color-level));
}
}

View File

@@ -93,22 +93,8 @@
@return if($yiq >= $yiq-contrasted-threshold, $dark, $light);
}
// Retrieve color Sass maps
@function color($key: "blue") {
@return map-get($colors, $key);
}
@function theme-color($key: "primary") {
@return map-get($theme-colors, $key);
}
@function gray($key: "100") {
@return map-get($grays, $key);
}
// Request a theme color level
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
// Request a color level
@function color-level($color: $primary, $level: 0) {
$color-base: if($level > 0, $black, $white);
$level: abs($level);

View File

@@ -155,5 +155,5 @@
// Organizationally, this must come after the `:hover` states.
@each $color, $value in $theme-colors {
@include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
@include list-group-item-variant($color, color-level($value, -9), color-level($value, 6));
}

View File

@@ -106,7 +106,7 @@
// inheritance to nested tables.
@each $color, $value in $theme-colors {
@include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
@include table-row-variant($color, color-level($value, $table-bg-level), color-level($value, $table-border-level));
}
@include table-row-variant(active, $table-active-bg);

View File

@@ -161,7 +161,7 @@ $body-text-align: null !default;
//
// Style anchor elements.
$link-color: theme-color("primary") !default;
$link-color: $primary !default;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;
@@ -244,7 +244,7 @@ $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
$component-active-color: $white !default;
$component-active-bg: theme-color("primary") !default;
$component-active-bg: $primary !default;
$caret-width: .3em !default;
$caret-vertical-align: $caret-width * .85 !default;
@@ -661,8 +661,8 @@ $form-file-button-bg: $input-group-addon-bg !default;
$form-feedback-margin-top: $form-text-margin-top !default;
$form-feedback-font-size: $small-font-size !default;
$form-feedback-valid-color: theme-color("success") !default;
$form-feedback-invalid-color: theme-color("danger") !default;
$form-feedback-valid-color: $success !default;
$form-feedback-invalid-color: $danger !default;
$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
@@ -985,7 +985,7 @@ $progress-bg: $gray-200 !default;
$progress-border-radius: $border-radius !default;
$progress-box-shadow: $box-shadow-inset !default;
$progress-bar-color: $white !default;
$progress-bar-bg: theme-color("primary") !default;
$progress-bar-bg: $primary !default;
$progress-bar-animation-timing: 1s linear infinite !default;
$progress-bar-transition: width .6s ease !default;