From 19387205c80c3e288fc50175c4bd8c23a5aa4713 Mon Sep 17 00:00:00 2001 From: "Ghislain B." Date: Sat, 21 Sep 2024 00:22:20 -0400 Subject: [PATCH] fix: SASS deprecated `lighten` and `darken` methods (#301) * fix: SASS deprecated `lighten` and `darken` methods - another deprecation from SASS which is again displaying a load of console warnings - more info on SASS website: https://sass-lang.com/documentation/breaking-changes/color-functions/ --- packages/demo/package.json | 2 +- packages/multiple-select-vanilla/package.json | 2 +- .../src/styles/_variables.scss | 24 +++++++------- pnpm-lock.yaml | 32 +++++++++++++------ 4 files changed, 37 insertions(+), 23 deletions(-) diff --git a/packages/demo/package.json b/packages/demo/package.json index 9e83ea99..7a509b7d 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -27,7 +27,7 @@ }, "devDependencies": { "@types/dompurify": "^3.0.5", - "sass": "^1.77.8", + "sass": "^1.79.3", "typescript": "5.5.4", "vite": "^5.4.2" } diff --git a/packages/multiple-select-vanilla/package.json b/packages/multiple-select-vanilla/package.json index 62b5b13a..c3a98e34 100644 --- a/packages/multiple-select-vanilla/package.json +++ b/packages/multiple-select-vanilla/package.json @@ -78,7 +78,7 @@ "glob": "^10.4.5", "postcss": "^8.4.44", "postcss-cli": "^11.0.0", - "sass": "^1.77.8", + "sass": "^1.79.3", "typescript": "5.5.4" } } \ No newline at end of file diff --git a/packages/multiple-select-vanilla/src/styles/_variables.scss b/packages/multiple-select-vanilla/src/styles/_variables.scss index a0195be4..4502261d 100644 --- a/packages/multiple-select-vanilla/src/styles/_variables.scss +++ b/packages/multiple-select-vanilla/src/styles/_variables.scss @@ -1,3 +1,5 @@ +@use 'sass:color'; + /* * Multiple-Select-Vanilla SASS variables. * You can also CSS variables by simply replacing `$ms-` prefix with `--ms-` @@ -11,7 +13,7 @@ $ms-primary-color: $primary-color !default; $ms-item-border: 1px solid transparent !default; $ms-item-hover-border: 1px solid #d5d5d5 !default; $ms-checkbox-color: $ms-primary-color !default; -$ms-checkbox-hover-color: darken($ms-primary-color, 3%) !default; +$ms-checkbox-hover-color: color.adjust($ms-primary-color, $lightness: -3%) !default; $ms-checkbox-icon-container-border: 1px solid #d0d0d0 !default; $ms-checkbox-icon-container-height: 1.05rem !default; $ms-checkbox-icon-container-width: 1.05rem !default; @@ -34,7 +36,7 @@ $ms-icon-size: 1em !default; $ms-chevron-icon-size: 1.2em !default; $ms-choice-text-align: left !default; $ms-choice-line-height: 26px !default; -$ms-choice-focus-border-color: lighten($ms-primary-color, 60%) !default; +$ms-choice-focus-border-color: color.adjust($ms-primary-color, $lightness: 60%) !default; $ms-choice-focus-box-shadow: 0 0 0 1.5px rgba($ms-primary-color,.35) !default; $ms-drop-background: #fff !default; $ms-drop-color: #000 !default; @@ -82,7 +84,7 @@ $ms-ok-button-border-width: 1px 0 0 0 !default; $ms-ok-button-font-weight: 600 !default; $ms-ok-button-padding: 0 !default; $ms-ok-button-text-color: $ms-primary-color !default; -$ms-ok-button-text-hover-color: darken($ms-primary-color, 5%) !default; +$ms-ok-button-text-hover-color: color.adjust($ms-primary-color, $lightness: -5%) !default; $ms-ok-button-height: 26px !default; $ms-ok-button-width: 100% !default; $ms-ok-button-text-align: center !default; @@ -109,33 +111,33 @@ $ms-select-all-label-padding: 4px !default; $ms-select-all-line-height: 18px !default; $ms-select-all-padding: 4px !default; $ms-select-all-text-font-weight: normal !default; -$ms-select-all-text-color: darken($ms-primary-color, 5%) !default; +$ms-select-all-text-color: color.adjust($ms-primary-color, $lightness: -5%) !default; $ms-select-all-text-hover-color: transparent !default; .ms-dark-mode { - --ms-checkbox-color: #{lighten($ms-primary-color, 10%)}; - --ms-checkbox-hover-color: #{lighten($ms-primary-color, 13%)}; + --ms-checkbox-color: #{color.adjust($ms-primary-color, $lightness: 10%)}; + --ms-checkbox-hover-color: #{color.adjust($ms-primary-color, $lightness: 13%)}; --ms-checkbox-icon-container-border: 1px solid #797979; --ms-choice-border: 1px solid #757575; --ms-choice-bgcolor: #262b2f; --ms-choice-color: #d4d4d4; --ms-choice-border-hover-color: #7f7f7f; - --ms-choice-focus-border-color: #{lighten($ms-primary-color, 5%)}; + --ms-choice-focus-border-color: #{color.adjust($ms-primary-color, $lightness: 5%)}; --ms-choice-focus-box-shadow: 0 0 0 2px #{rgba($ms-primary-color,.2)}; --ms-drop-background: #2a2f34; --ms-drop-border: 1px solid #585858; --ms-drop-color: #cccccc; - --ms-drop-hide-radio-hover-bgcolor: #{darken($ms-primary-color, 5%)}; + --ms-drop-hide-radio-hover-bgcolor: #{color.adjust($ms-primary-color, $lightness: -5%)}; --ms-drop-option-divider-border-top: 1px solid #696969; --ms-drop-scrollbar-color: #828282 #424242; --ms-icon-color: #bcbcbc; --ms-icon-color-hover: #d0d0d0; - --ms-option-highlight-bg-color: #{darken($ms-primary-color, 10%)}; + --ms-option-highlight-bg-color: #{color.adjust($ms-primary-color, $lightness: -10%)}; --ms-ok-button-bg-color: #262b2f; --ms-ok-button-bg-hover-color: #24282c; --ms-ok-button-border-color: #4a4a4a; - --ms-ok-button-text-color: #{lighten($ms-primary-color, 5%)}; - --ms-ok-button-text-hover-color: #{lighten($ms-primary-color, 5%)}; + --ms-ok-button-text-color: #{color.adjust($ms-primary-color, $lightness: 5%)}; + --ms-ok-button-text-hover-color: #{color.adjust($ms-primary-color, $lightness: 5%)}; --ms-optgroup-color: #fff; --ms-search-input-bg-color: #2f353a; --ms-search-input-color: #d4d4d4; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a6bb0753..8fed7897 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -72,14 +72,14 @@ importers: specifier: ^3.0.5 version: 3.0.5 sass: - specifier: ^1.77.8 - version: 1.77.8 + specifier: ^1.79.3 + version: 1.79.3 typescript: specifier: 5.5.4 version: 5.5.4 vite: specifier: ^5.4.2 - version: 5.4.2(@types/node@22.5.2)(sass@1.77.8) + version: 5.4.2(@types/node@22.5.2)(sass@1.79.3) packages/multiple-select-vanilla: dependencies: @@ -115,8 +115,8 @@ importers: specifier: ^11.0.0 version: 11.0.0(postcss@8.4.44) sass: - specifier: ^1.77.8 - version: 1.77.8 + specifier: ^1.79.3 + version: 1.79.3 typescript: specifier: 5.5.4 version: 5.5.4 @@ -1783,6 +1783,13 @@ packages: fsevents: 2.3.3 dev: true + /chokidar@4.0.0: + resolution: {integrity: sha512-mxIojEAQcuEvT/lyXq+jf/3cO/KoA6z4CeNDGGevTybECPOMFCnQy3OPahluUkbqgPNGw5Bi78UC7Po6Lhy+NA==} + engines: {node: '>= 14.16.0'} + dependencies: + readdirp: 4.0.1 + dev: true + /chownr@2.0.0: resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==} engines: {node: '>=10'} @@ -4167,6 +4174,11 @@ packages: picomatch: 2.3.1 dev: true + /readdirp@4.0.1: + resolution: {integrity: sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==} + engines: {node: '>= 14.16.0'} + dev: true + /require-directory@2.1.1: resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} engines: {node: '>=0.10.0'} @@ -4248,12 +4260,12 @@ packages: dev: true optional: true - /sass@1.77.8: - resolution: {integrity: sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==} + /sass@1.79.3: + resolution: {integrity: sha512-m7dZxh0W9EZ3cw50Me5GOuYm/tVAJAn91SUnohLRo9cXBixGUOdvmryN+dXpwR831bhoY3Zv7rEFt85PUwTmzA==} engines: {node: '>=14.0.0'} hasBin: true dependencies: - chokidar: 3.6.0 + chokidar: 4.0.0 immutable: 4.3.5 source-map-js: 1.2.0 dev: true @@ -4657,7 +4669,7 @@ packages: builtins: 5.0.1 dev: true - /vite@5.4.2(@types/node@22.5.2)(sass@1.77.8): + /vite@5.4.2(@types/node@22.5.2)(sass@1.79.3): resolution: {integrity: sha512-dDrQTRHp5C1fTFzcSaMxjk6vdpKvT+2/mIdE07Gw2ykehT49O0z/VHS3zZ8iV/Gh8BJJKHWOe5RjaNrW5xf/GA==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true @@ -4692,7 +4704,7 @@ packages: esbuild: 0.21.5 postcss: 8.4.44 rollup: 4.21.2 - sass: 1.77.8 + sass: 1.79.3 optionalDependencies: fsevents: 2.3.3 dev: true