From 958371b6b82dee47d7c068710adc63351e8417f6 Mon Sep 17 00:00:00 2001 From: "Grigorii K. Shartsev" Date: Mon, 14 Oct 2024 18:24:49 +0200 Subject: [PATCH] chore(sass): migrate from deprecated SASS api Signed-off-by: Grigorii K. Shartsev --- core/css/inputs.scss | 11 ++++++----- core/css/variables.scss | 12 +++++++----- 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; -- 2.39.5