mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00
Code Activity

Colors rewrite (#30622)

Browse Source
This commit is contained in:
Martijn Cuppens
2020-10-13 09:58:06 +02:00
committed by GitHub
parent 5c6925385e
commit cdc12165a9
15 changed files with 150 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.0/customize/sass.md
+9 -5
View File
@@ -152,7 +152,7 @@ For example, we use the `primary`, `success`, and `danger` keys from `$theme-col
### Colors
In Bootstrap 5, we've dropped the `color()`, `theme-color()` and `gray()` functions because the values are also available as standalone variables. So instead of using `theme-color("primary")`, you can now just use the `$primary` variable.
Next to the [Sass maps]({{< docsref "/customize/color#color-sass-maps" >}}) we have, theme colors can also be used as standalone variables, like `$primary`.
{{< highlight scss >}}
.custom-element {
@@ -161,15 +161,19 @@ In Bootstrap 5, we've dropped the `color()`, `theme-color()` and `gray()` functi
}
{{< /highlight >}}
We also have a function for getting a particular _level_ of color. Negative level values will lighten the color, while higher levels will darken.
You can lighten or darken colors with Bootstrap's `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass' native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn't lead to the desired effect.
{{< scss-docs name="color-level" file="scss/_functions.scss" >}}
{{< scss-docs name="color-functions" file="scss/_functions.scss" >}}
In practice, you'd call the function and pass in two parameters: the name of the color from `$theme-colors` (e.g., primary or danger) and a numeric level.
In practice, you'd call the function and pass in the color and weight parameters.
{{< highlight scss >}}
.custom-element {
color: color-level($primary, -10);
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
{{< /highlight >}}