From f5de72a49f3af8aace5043f327927335ef22c157 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Sat, 21 Sep 2024 15:56:53 -0400 Subject: [PATCH 1/2] fix: SASS deprecated lighten, darken and rgb methods --- package-lock.json | 39 +++++++++++++++++++++++++++----- package.json | 4 ++-- scss/_functions.scss | 9 ++++---- site/assets/scss/_content.scss | 5 ++-- site/assets/scss/_variables.scss | 5 ++-- 5 files changed, 46 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index b43d3cd429cf..81c120c93f7a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -64,7 +64,7 @@ "rollup": "^4.21.2", "rollup-plugin-istanbul": "^5.0.0", "rtlcss": "^4.3.0", - "sass": "^1.77.8", + "sass": "^1.79.3", "sass-true": "^8.0.0", "shelljs": "^0.8.5", "stylelint": "^16.8.1", @@ -10803,13 +10803,12 @@ "license": "MIT" }, "node_modules/sass": { - "version": "1.77.8", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz", - "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==", + "version": "1.79.3", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.3.tgz", + "integrity": "sha512-m7dZxh0W9EZ3cw50Me5GOuYm/tVAJAn91SUnohLRo9cXBixGUOdvmryN+dXpwR831bhoY3Zv7rEFt85PUwTmzA==", "dev": true, - "license": "MIT", "dependencies": { - "chokidar": ">=3.0.0 <4.0.0", + "chokidar": "^4.0.0", "immutable": "^4.0.0", "source-map-js": ">=0.6.2 <2.0.0" }, @@ -10835,6 +10834,34 @@ "node": ">=18" } }, + "node_modules/sass/node_modules/chokidar": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.0.tgz", + "integrity": "sha512-mxIojEAQcuEvT/lyXq+jf/3cO/KoA6z4CeNDGGevTybECPOMFCnQy3OPahluUkbqgPNGw5Bi78UC7Po6Lhy+NA==", + "dev": true, + "dependencies": { + "readdirp": "^4.0.1" + }, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/sass/node_modules/readdirp": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.1.tgz", + "integrity": "sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==", + "dev": true, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/search-insights": { "version": "2.15.0", "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.15.0.tgz", diff --git a/package.json b/package.json index 91e3bc01a302..2007deec545d 100644 --- a/package.json +++ b/package.json @@ -148,7 +148,7 @@ "rollup": "^4.21.2", "rollup-plugin-istanbul": "^5.0.0", "rtlcss": "^4.3.0", - "sass": "^1.77.8", + "sass": "^1.79.3", "sass-true": "^8.0.0", "shelljs": "^0.8.5", "stylelint": "^16.8.1", @@ -184,4 +184,4 @@ "@popperjs/core": "^2.11.8" } } -} +} \ No newline at end of file diff --git a/scss/_functions.scss b/scss/_functions.scss index e04b5c61b39f..b8adf07a1e34 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -1,3 +1,4 @@ +@use 'sass:color'; // Bootstrap functions // // Utility mixins and functions for evaluating source code across our variables, maps, and mixins. @@ -34,7 +35,7 @@ // Colors @function to-rgb($value) { - @return red($value), green($value), blue($value); + @return color.channel($value, "red", $space: rgb), color.channel($value, "green", $space: rgb), color.channel($value, "blue", $space: rgb); } // stylelint-disable scss/dollar-variable-pattern @@ -182,9 +183,9 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio @function luminance($color) { $rgb: ( - "r": red($color), - "g": green($color), - "b": blue($color) + "r": color.channel($color, "red", $space: rgb), + "g": color.channel($color, "green", $space: rgb), + "b": color.channel($color, "blue", $space: rgb) ); @each $name, $value in $rgb { diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index 811883b49aa7..767784ca67d8 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -1,3 +1,4 @@ +@use 'sass:color'; // // Bootstrap docs content theming // @@ -151,9 +152,9 @@ .btn-secondary { --bs-btn-bg: #{mix($gray-600, $blue-400, .5)}; --bs-btn-border-color: #{rgba($white, .25)}; - --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)}; + --bs-btn-hover-bg: #{color.adjust(mix($gray-600, $blue-400, .5), $lightness: -5%)}; --bs-btn-hover-border-color: #{rgba($white, .25)}; - --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)}; + --bs-btn-active-bg: #{color.adjust(mix($gray-600, $blue-400, .5), $lightness: -10%)}; --bs-btn-active-border-color: #{rgba($white, .5)}; --bs-btn-focus-border-color: #{rgba($white, .5)}; --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2); diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index 5e8ab5d6c251..e1b9e241bf02 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -1,7 +1,8 @@ +@use 'sass:color'; // Local docs variables $bd-purple: #4c0bce; -$bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list -$bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list +$bd-violet: color.adjust(saturate($bd-purple, 5%), $lightness: 15%); // stylelint-disable-line function-disallowed-list +$bd-purple-light: color.adjust(saturate($bd-purple, 5%), $lightness: 45%); // stylelint-disable-line function-disallowed-list $bd-accent: #ffe484; $bd-gutter-x: 3rem; From 516c8176f5b78c4834c0ffd70dd089f2cbf238b1 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Sat, 21 Sep 2024 16:21:18 -0400 Subject: [PATCH 2/2] chore: fix linter errors --- scss/_functions.scss | 3 ++- site/assets/scss/_content.scss | 3 ++- site/assets/scss/_variables.scss | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/scss/_functions.scss b/scss/_functions.scss index b8adf07a1e34..e429b6b988fc 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -1,4 +1,4 @@ -@use 'sass:color'; +@use "sass:color"; // Bootstrap functions // // Utility mixins and functions for evaluating source code across our variables, maps, and mixins. @@ -182,6 +182,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 // See https://www.w3.org/TR/WCAG/#dfn-relative-luminance // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio @function luminance($color) { + // stylelint-disable scss/at-function-named-arguments $rgb: ( "r": color.channel($color, "red", $space: rgb), "g": color.channel($color, "green", $space: rgb), diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index 767784ca67d8..40d51640044a 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -1,4 +1,4 @@ -@use 'sass:color'; +@use "sass:color"; // // Bootstrap docs content theming // @@ -149,6 +149,7 @@ --bs-dropdown-link-active-bg: #{$blue-700}; } + // stylelint-disable scss/at-function-named-arguments .btn-secondary { --bs-btn-bg: #{mix($gray-600, $blue-400, .5)}; --bs-btn-border-color: #{rgba($white, .25)}; diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index e1b9e241bf02..b3f8123cec9c 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -1,6 +1,7 @@ -@use 'sass:color'; +@use "sass:color"; // Local docs variables $bd-purple: #4c0bce; +// stylelint-disable scss/at-function-named-arguments $bd-violet: color.adjust(saturate($bd-purple, 5%), $lightness: 15%); // stylelint-disable-line function-disallowed-list $bd-purple-light: color.adjust(saturate($bd-purple, 5%), $lightness: 45%); // stylelint-disable-line function-disallowed-list $bd-accent: #ffe484;