From f1cd1180b7d5ea8c1b2a0c4e730a5dfed2c3ff37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 12 Dec 2023 08:08:19 +0100 Subject: [PATCH] Docs: add `shift-color()` usage example in sass customization page (#39435) --- site/content/docs/5.3/customize/sass.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/site/content/docs/5.3/customize/sass.md b/site/content/docs/5.3/customize/sass.md index 231bfa9d6d..a2b2bb26ca 100644 --- a/site/content/docs/5.3/customize/sass.md +++ b/site/content/docs/5.3/customize/sass.md @@ -244,6 +244,8 @@ Next to the [Sass maps]({{< docsref "/customize/color#color-sass-maps" >}}) we h 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. +`shift-color()` combines these two functions by shading the color if the weight is positive and tinting the color if the weight is negative. + {{< scss-docs name="color-functions" file="scss/_functions.scss" >}} In practice, you'd call the function and pass in the color and weight parameters. @@ -256,6 +258,11 @@ In practice, you'd call the function and pass in the color and weight parameters .custom-element-2 { color: shade-color($danger, 30%); } + +.custom-element-3 { + color: shift-color($success, 40%); + background-color: shift-color($success, -60%); +} ``` ### Color contrast