chore(sass): migrate from deprecated SASS api

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

diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 34ccc4331ff3414c64c69e18907613c7f22eacbb..7562f4a4347920a07c00442d42cd1fbfbdbf33d8 100644 (file)
--- 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 33a5fbc9e4a833ebff6b11ffa3e1cb65c939f0d8..417d1986e01c3acb15c5ca214a22a61a6fd576b8 100644 (file)
--- 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;