fix: Replace deprecated SASS rules

- global color functions are now deprecated - use color namespace
- `@import` is deprecated and will be removed (will be native CSS import
  in future)

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

diff --git a/apps/files_sharing/css/icons.scss b/apps/files_sharing/css/icons.scss
index ddfd7f8960211f483c2c52320e6f8fd37842549e..a6c000126f3d34fcfea9f168a0f22f0ca01e2382 100644 (file)
--- a/apps/files_sharing/css/icons.scss
+++ b/apps/files_sharing/css/icons.scss
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 @use 'variables';
-@import 'functions';
+@use 'functions';
 
 // This is the icons used in the sharing ui (multiselect)
 .icon-room {

diff --git a/apps/files_sharing/css/publicView.scss b/apps/files_sharing/css/publicView.scss
index b5d9978e5f496ae2edebf3ab48a755aa4e7ec5cc..32def00193d864866048fe4d7f34044e87e6ea14 100644 (file)
--- a/apps/files_sharing/css/publicView.scss
+++ b/apps/files_sharing/css/publicView.scss
@@ -2,5 +2,5 @@
  * SPDX-FileCopyrightText: 2017 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@import 'public.scss';
-@import 'mobile.scss';
+@use 'public.scss';
+@use 'mobile.scss';

diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
index e2745c40611b3fb05029541f5826c7e6cd8a9317..2ef115f2ac27658f741b813c82d14430ce66ab0e 100644 (file)
--- a/apps/settings/css/settings.scss
+++ b/apps/settings/css/settings.scss
@@ -5,7 +5,7 @@
  */
 @use 'variables';
 @use 'sass:math';
-@import 'functions';
+@use 'functions';
 
 input {
        &#openid, &#webdav {
@@ -20,23 +20,23 @@ input {
 
 /* icons for sidebar */
 .nav-icon-personal-settings {
-       @include icon-color('personal', 'settings', variables.$color-black);
+       @include functions.icon-color('personal', 'settings', variables.$color-black);
 }
 
 .nav-icon-security {
-       @include icon-color('toggle-filelist', 'settings', variables.$color-black);
+       @include functions.icon-color('toggle-filelist', 'settings', variables.$color-black);
 }
 
 .nav-icon-clientsbox {
-       @include icon-color('change', 'settings', variables.$color-black);
+       @include functions.icon-color('change', 'settings', variables.$color-black);
 }
 
 .nav-icon-federated-cloud {
-       @include icon-color('share', 'settings', variables.$color-black);
+       @include functions.icon-color('share', 'settings', variables.$color-black);
 }
 
 .nav-icon-second-factor-backup-codes, .nav-icon-ssl-root-certificate {
-       @include icon-color('password', 'settings', variables.$color-black);
+       @include functions.icon-color('password', 'settings', variables.$color-black);
 }
 
 #personal-settings-avatar-container {

diff --git a/core/css/apps.scss b/core/css/apps.scss
index 25c0b8164bc90a94d22fa43823d47a41179a92e2..507aa920e031295a1841a476c75102c3d9847081 100644 (file)
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -5,7 +5,7 @@
  */
 @use 'variables';
 @use 'sass:math';
-@import 'functions';
+@use 'functions';
 
 @media screen and (max-width: variables.$breakpoint-mobile) {
        // Make the body full width on mobile
@@ -449,7 +449,7 @@ kbd {
                        margin: 0;
                        padding: 0;
                        background: none;
-                       @include icon-color('triangle-s', 'actions', variables.$color-black, 1, true);
+                       @include functions.icon-color('triangle-s', 'actions', variables.$color-black, 1, true);
                        background-size: 16px;
                        background-repeat: no-repeat;
                        background-position: center;
@@ -517,7 +517,7 @@ kbd {
                .app-navigation-entry-utils-menu-button {
                        /* Prevent bg img override if an icon class is set */
                        button:not([class^='icon-']):not([class*=' icon-']) {
-                               @include icon-color('more', 'actions', variables.$color-black, 1, true);
+                               @include functions.icon-color('more', 'actions', variables.$color-black, 1, true);
                        }
                        &:hover button,
                        &:focus button {

diff --git a/core/css/guest.scss b/core/css/guest.scss
index d8afbd58c92ff883a10be5e5449a0508eda9c22b..125f7ebf0d90385362a28ecba61cc364c8010d3c 100644 (file)
--- a/core/css/guest.scss
+++ b/core/css/guest.scss
@@ -3,7 +3,7 @@
  * SPDX-FileCopyrightText: 2016 ownCloud, Inc.
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@import 'animations.scss';
+@use 'animations.scss';
 
 /* Default and reset */
 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; cursor:default; }

diff --git a/core/css/icons.scss b/core/css/icons.scss
index f41e5c22a86672cb29ef1de5d07dd184ca479ca5..2d9327d05a9ae60a0ec8295ae277190e1f62b0a0 100644 (file)
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 @use 'variables';
-@import 'functions';
+@use 'functions';
 
 /* GLOBAL ------------------------------------------------------------------- */
 [class^='icon-'], [class*=' icon-'] {

diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 7562f4a4347920a07c00442d42cd1fbfbdbf33d8..f06689ad5e758a098ba10edba9657f95284eb63f 100644 (file)
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -5,7 +5,7 @@
  */
 @use 'variables';
 @use 'sass:color';
-@import 'functions';
+@use 'functions';
 
  /* Specifically override browser styles */
 input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {
@@ -377,7 +377,7 @@ input {
                        margin-inline-end: 0;
                        &:disabled {
                                cursor: default;
-                               @include icon-color('confirm-fade', 'actions', variables.$color-black, 2, true);
+                               @include functions.icon-color('confirm-fade', 'actions', variables.$color-black, 2, true);
                        }
                }
 

diff --git a/core/css/server.scss b/core/css/server.scss
index e3710e14f5ab9a614a41a83fe80571d426e73340..b056ed81ecf85244ec7ed8f5841e7915a700413e 100644 (file)
--- a/core/css/server.scss
+++ b/core/css/server.scss
@@ -2,15 +2,15 @@
  * SPDX-FileCopyrightText: 2017 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@import 'styles.scss';
-@import 'inputs.scss';
-@import 'header.scss';
-@import 'icons.scss';
-@import 'apps.scss';
-@import 'global.scss';
-@import 'fixes.scss';
-@import 'mobile.scss';
-@import 'tooltip.scss';
+@use 'styles.scss';
+@use 'inputs.scss';
+@use 'header.scss';
+@use 'icons.scss';
+@use 'apps.scss';
+@use 'global.scss';
+@use 'fixes.scss';
+@use 'mobile.scss';
+@use 'tooltip.scss';
 // If you include .css, it will be imported as url
-@import '../../node_modules/@nextcloud/dialogs/dist/style';
-@import 'public.scss';
+@use '../../node_modules/@nextcloud/dialogs/dist/style';
+@use 'public.scss';

diff --git a/core/css/toast.scss b/core/css/toast.scss
index 582713ec3298f18c9dfe7c2e69136499fa73fd5e..323a26b28ff8b0198c46547a7f0879c8c45cb2b4 100644 (file)
--- a/core/css/toast.scss
+++ b/core/css/toast.scss
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 @use 'variables';
-@import 'functions';
+@use 'functions';
 
 .toastify.toast {
        min-width: 200px;
@@ -25,7 +25,7 @@
                width: 38px;
                opacity: 0.4;
                padding: 12px;
-               @include icon-color('close', 'actions', variables.$color-black, 2, true);
+               @include functions.icon-color('close', 'actions', variables.$color-black, 2, true);
                background-position: center;
                background-repeat: no-repeat;
                text-indent: 200%;

diff --git a/core/css/variables.scss b/core/css/variables.scss
index 417d1986e01c3acb15c5ca214a22a61a6fd576b8..35b1ecab8630b8bc80253ae0cc439a2ec00a4752 100644 (file)
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -28,26 +28,26 @@ $color-placeholder-light: nc-darken($color-main-background, 10%) !default;
 $color-placeholder-dark: nc-darken($color-main-background, 20%) !default;
 
 $color-primary: #0082c9 !default;
-$color-primary-hover: mix($color-primary, $color-main-background, 80%) !default;
+$color-primary-hover: color.mix($color-primary, $color-main-background, 80%) !default;
 
-$color-primary-light: mix($color-primary, $color-main-background, 10%) !default;
+$color-primary-light: color.mix($color-primary, $color-main-background, 10%) !default;
 $color-primary-light-text: $color-primary !default;
-$color-primary-light-hover: mix($color-primary-light, $color-main-text, 95%) !default;
+$color-primary-light-hover: color.mix($color-primary-light, $color-main-text, 95%) !default;
 
 $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: 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-hover: color.mix($color-primary-element, $color-main-background, 80%) !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;
+$color-error-hover: color.mix($color-error, $color-main-background, 80%) !default;
 $color-warning: #eca700;
-$color-warning-hover: mix($color-warning, $color-main-background, 80%) !default;
+$color-warning-hover: color.mix($color-warning, $color-main-background, 80%) !default;
 $color-success: #46ba61;
-$color-success-hover: mix($color-success, $color-main-background, 80%) !default;
+$color-success-hover: color.mix($color-success, $color-main-background, 80%) !default;
 // used for svg
 $color-white: #fff;
 $color-black: #000;