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>

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 {

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';

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 {

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 {

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; }

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-'] {

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);
 			}
 		}
 

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';

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%;

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;