chore(sass): migrate from deprecated SASS api

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

2 files changed, 13 insertions, 10 deletions

diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 34ccc4331ff..7562f4a4347 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 @use 'variables';
+@use 'sass:color';
 @import 'functions';
 
  /* Specifically override browser styles */
@@ -512,24 +513,24 @@ input {
 		&.checkbox--white {
 			+ label:before,
 			&:focus + label:before {
-				border-color: darken($color-checkbox-radio-white, 27%);
+				border-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl);
 			}
 			&:not(:disabled):not(:checked) + label:hover:before {
 				border-color: $color-checkbox-radio-white;
 			}
 			&:checked + label:before {
 				box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
-				background-color: darken($color-checkbox-radio-white, 14%);
-				border-color: darken($color-checkbox-radio-white, 14%);
+				background-color: color.adjust($color-checkbox-radio-white, $lightness: -14%, $space: hsl);
+				border-color: color.adjust($color-checkbox-radio-white, $lightness: -14%, $space: hsl);
 			}
 			&:disabled + label:before {
-				background-color: darken($color-checkbox-radio-white, 27%) !important; /* override other status */
+				background-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl) !important; /* override other status */
 				border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
 			}
 			&:checked:disabled + label:before {
 				box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
 				border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
-				background-color: darken($color-checkbox-radio-white, 27%);
+				background-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl);
 			}
 		}
 		&.checkbox--white {
diff --git a/core/css/variables.scss b/core/css/variables.scss
index 33a5fbc9e4a..417d1986e01 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -1,14 +1,16 @@
+@use 'sass:color';
+
 /*!
  * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 // SCSS darken/lighten function override
 @function nc-darken($color, $value) {
-	@return darken($color, $value);
+	@return color.adjust($color, $lightness: -$value, $space: hsl);
 }
 
 @function nc-lighten($color, $value) {
-	@return lighten($color, $value);
+	@return color.adjust($color, $lightness: $value, $space: hsl);
 }
 
 // SCSS variables
@@ -35,10 +37,10 @@ $color-primary-light-hover: mix($color-primary-light, $color-main-text, 95%) !de
 $color-primary-text: #ffffff !default;
 // do not use nc-darken/lighten in case of overriding because
 // primary-text is independent of color-main-text
-$color-primary-element-text-dark: darken($color-primary-text, 7%) !default;
+$color-primary-element-text-dark: color.adjust($color-primary-text, $lightness: -7%, $space: hsl) !default;
 $color-primary-element: $color-primary !default;
 $color-primary-element-hover: mix($color-primary-element, $color-main-background, 80%) !default;
-$color-primary-element-light: lighten($color-primary-element, 15%) !default;
+$color-primary-element-light: color.adjust($color-primary-element, $lightness: 15%, $space: hsl) !default;
 
 $color-error: #e9322d;
 $color-error-hover: mix($color-error, $color-main-background, 80%) !default;
@@ -66,7 +68,7 @@ $image-favicon: url('../img/logo/logo.svg?v=1') !default;
 $color-loading-light: #ccc !default;
 $color-loading-dark: #444 !default;
 
-$color-box-shadow: transparentize(nc-darken($color-main-background, 70%), 0.5) !default;
+$color-box-shadow: color.adjust(nc-darken($color-main-background, 70%), $alpha: -0.5, $space: hsl) !default;
 
 // light border like file table or app-content list
 $color-border: nc-darken($color-main-background, 7%) !default;