Replace @import with @use

desktop/src/app.scss

@@ -1,33 +1,33 @@
 @use 'sass:color';
 
 $mdi-font-path: 'fonts' !default;
-@import '../node_modules/@mdi/font/css/materialdesignicons';
-
-@import '@fontsource/open-sans/variable-full.css';
-@import "@fontsource/open-sans/variable-full-italic.css";
-
-@import 'app/components/variables';
-@import 'app/components/messages/messages';
-@import 'bootstrap';
-@import 'app/components/initialization';
-@import 'app/components/spinner';
-@import 'app/components/buttons';
-@import 'app/components/slider';
-@import 'app/components/navbar/navbar';
-@import 'app/components/default-page';
-@import 'app/components/resources/resources';
-@import 'app/components/import/import';
-@import 'app/components/export/export';
-@import 'app/components/settings/settings';
-@import 'app/components/viewmodal/view-modal';
-@import 'app/components/widgets/widgets';
-@import 'app/components/docedit/docedit';
-@import 'app/components/image/image';
-@import 'app/components/matrix/matrix-view';
-@import 'app/components/help/help';
-@import 'app/components/configuration/configuration';
-@import 'app/components/project/project';
-@import 'app/components/backup/backup';
+@use '../node_modules/@mdi/font/css/materialdesignicons';
+
+@use '@fontsource/open-sans/variable-full.css';
+@use "@fontsource/open-sans/variable-full-italic.css";
+
+@use 'bootstrap' as *;
+
+@use 'app/components/messages/messages';
+@use 'app/components/spinner';
+@use 'app/components/buttons';
+@use 'app/components/slider';
+@use 'app/components/navbar/navbar';
+@use 'app/components/default-page';
+@use 'app/components/resources/resources';
+@use 'app/components/import/import';
+@use 'app/components/export/export';
+@use 'app/components/settings/settings';
+@use 'app/components/viewmodal/view-modal';
+@use 'app/components/widgets/widgets';
+@use 'app/components/docedit/docedit';
+@use 'app/components/image/image';
+@use 'app/components/matrix/matrix-view';
+@use 'app/components/help/help';
+@use 'app/components/configuration/configuration';
+@use 'app/components/project/project';
+@use 'app/components/backup/backup';
+@use 'app/components/variables' as *;
 
 .search-help-tooltip {
   .tooltip-inner {

desktop/src/app/components/buttons.scss

@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use './variables' as *;
 
 .btn {
   cursor: default !important;

desktop/src/app/components/configuration/add/category/category-listing.scss

@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use '../../../variables' as *;
 
 category-listing {
   display: block;

desktop/src/app/components/configuration/add/field/field-listing.scss

@@ -1,3 +1,5 @@
+@use '../../../variables' as *;
+
 field-listing {
   display: block;
   width: 100%;

desktop/src/app/components/configuration/add/group/group-listing.scss

@@ -1,3 +1,5 @@
+@use '../../../variables' as *;
+
 group-listing {
   display: block;
   width: 100%;

desktop/src/app/components/configuration/add/listing.scss

@@ -1,3 +1,5 @@
+@use '../../variables' as *;
+
 .listing {
   height: 100%;
   width: 100%;

desktop/src/app/components/configuration/add/valuelist/valuelist-listing.scss

@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use '../../../variables' as *;
 
 valuelist-listing {
   display: block;

desktop/src/app/components/configuration/browse/configuration-category.scss

@@ -1,3 +1,5 @@
+@use '../../variables' as *;
+
 configuration-category {
   user-select: none;
 

desktop/src/app/components/configuration/browse/configuration-field-drag-element.scss

@@ -1,3 +1,5 @@
+@use '../../variables' as *;
+
 .field-drag-element {
   box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.2),
               0 9px 11px 2px rgba(0, 0, 0, 0.14),

desktop/src/app/components/configuration/browse/configuration-field.scss

@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use '../../variables' as *;
 
 configuration-field {
   .card {

desktop/src/app/components/configuration/browse/hierarchical-relations-info.scss

@@ -1,3 +1,5 @@
+@use 'bootstrap' as *;
+
 hierarchical-relations-info {
   .btn {
     position: relative;

desktop/src/app/components/configuration/configuration.scss

@@ -1,43 +1,44 @@
 @use 'sass:color';
 
-@import './browse/configuration-category';
-@import './browse/configuration-field';
-@import './browse/configuration-field-drag-element';
-@import './browse/hierarchical-relations-info';
-@import './editor/configuration-editor-modal';
-@import './editor/field/field-editor-modal';
-@import './editor/field/subfield-editor-modal';
-@import './editor/field/widgets/input-type-selector';
-@import './editor/field/widgets/valuelist-selector';
-@import './editor/field/widgets/subfields-section';
-@import './editor/category/category-editor-modal';
-@import './editor/valuelist/valuelist-editor-modal';
-@import './editor/valuelist/value-editor-modal';
-@import './editor/widgets/multi-language-input';
-@import './editor/widgets/references-input';
-@import './delete/delete-modal';
-@import './add/listing';
-@import './add/preview';
-@import './add/category/add-category-modal';
-@import './add/category/swap-category-form-modal';
-@import './add/category/category-listing';
-@import './add/category/category-preview';
-@import './add/field/add-field-modal';
-@import './add/field/field-listing';
-@import './add/field/field-preview';
-@import './add/group/add-group-modal';
-@import './add/group/group-listing';
-@import './add/valuelist/add-valuelist-modal';
-@import './add/valuelist/manage-valuelists-modal';
-@import './add/valuelist/valuelist-listing';
-@import './add/valuelist/valuelist-preview';
-@import './add/valuelist/valuelist-search-bar';
-@import './add/valuelist/extend-valuelist-modal';
-@import './widgets/valuelist-view';
-@import './notifications/configuration-change-notification-modal';
-@import './conflicts/configuration-conflicts-modal';
-@import './import/import-configuration-modal';
-@import './save/save-modal';
+@use './browse/configuration-category';
+@use './browse/configuration-field';
+@use './browse/configuration-field-drag-element';
+@use './browse/hierarchical-relations-info';
+@use './editor/configuration-editor-modal';
+@use './editor/field/field-editor-modal';
+@use './editor/field/subfield-editor-modal';
+@use './editor/field/widgets/input-type-selector';
+@use './editor/field/widgets/valuelist-selector';
+@use './editor/field/widgets/subfields-section';
+@use './editor/category/category-editor-modal';
+@use './editor/valuelist/valuelist-editor-modal';
+@use './editor/valuelist/value-editor-modal';
+@use './editor/widgets/multi-language-input';
+@use './editor/widgets/references-input';
+@use './delete/delete-modal';
+@use './add/listing';
+@use './add/preview';
+@use './add/category/add-category-modal';
+@use './add/category/swap-category-form-modal';
+@use './add/category/category-listing';
+@use './add/category/category-preview';
+@use './add/field/add-field-modal';
+@use './add/field/field-listing';
+@use './add/field/field-preview';
+@use './add/group/add-group-modal';
+@use './add/group/group-listing';
+@use './add/valuelist/add-valuelist-modal';
+@use './add/valuelist/manage-valuelists-modal';
+@use './add/valuelist/valuelist-listing';
+@use './add/valuelist/valuelist-preview';
+@use './add/valuelist/valuelist-search-bar';
+@use './add/valuelist/extend-valuelist-modal';
+@use './widgets/valuelist-view';
+@use './notifications/configuration-change-notification-modal';
+@use './conflicts/configuration-conflicts-modal';
+@use './import/import-configuration-modal';
+@use './save/save-modal';
+@use '../variables' as *;
 
 #configuration-loading-icon-container {
   width: 100%;

desktop/src/app/components/configuration/editor/configuration-editor-modal.scss

@@ -1,3 +1,6 @@
+@use 'bootstrap' as *;
+@use '../../variables' as *;
+
 .configuration-editor-modal-header {
   height: 54px;
   padding: 7px;

desktop/src/app/components/default-page.scss

@@ -1,7 +1,7 @@
 .default-nav {
   position: relative;
   z-index: 1001;
-  border-bottom: 1px solid $gray-200;
+  border-bottom: 1px solid #e9ecef;
   height: 50px;
   padding-top: 5px;
 }

desktop/src/app/components/docedit/core/edit-form.scss

@@ -1,3 +1,5 @@
+@use '../../variables' as *;
+
 #document-edit-wrapper {
   main {
     .container-fluid {

desktop/src/app/components/docedit/core/forms/array-field/object-array-entry-modal.scss

@@ -1,3 +1,5 @@
+@use '../../../../variables' as *;
+
 .object-array-entry-modal {
     top: 55px;
 

desktop/src/app/components/docedit/core/forms/forms.scss

@@ -1,3 +1,5 @@
+@use 'bootstrap' as *;
+
 form-field-dating,
 form-field-dimension,
 form-field-literature,

desktop/src/app/components/docedit/core/forms/identifier.scss

@@ -1,3 +1,6 @@
+
+@use '../../../variables' as *;
+
 form-field-identifier {
   .identifier-prefix-label {
     height: 33px;

desktop/src/app/components/docedit/docedit.scss

@@ -1,33 +1,34 @@
-@import 'relations';
-@import 'tabs/docedit-conflicts-tab';
-@import 'widgets/category-switcher-button';
-@import 'widgets/image-picker';
-@import 'widgets/relationpicker/relation-picker';
-@import 'widgets/relationpicker/relation-picker-group';
-@import 'core/edit-form';
-@import 'core/edit-form-group';
-@import 'core/forms/forms';
-@import 'core/forms/geometry';
-@import 'core/forms/date';
-@import 'core/forms/dropdown';
-@import 'core/forms/dropdown-range';
-@import 'core/forms/input';
-@import 'core/forms/multi-input';
-@import 'core/forms/valuelist-multi-input';
-@import 'core/forms/identifier';
-@import 'core/forms/type-relation/type-row';
-@import 'core/forms/type-relation/type-relation-picker';
-@import 'core/forms/array-field/object-array-entry-modal';
-@import 'core/forms/array-field/dating-entry-modal';
-@import 'core/forms/array-field/dimension-entry-modal';
-@import 'core/forms/array-field/literature-entry-modal';
-@import 'core/forms/array-field/composite/composite-entry-modal';
-@import 'core/forms/array-field/composite/composite';
-@import 'core/forms/widgets/outliers';
-@import 'core/forms/widgets/empty-valuelist-info';
-@import 'core/forms/widgets/invalid-field-data';
-@import 'core/forms/widgets/multi-language-text-field';
-@import 'dialog/duplicate-modal';
+@use 'relations';
+@use 'tabs/docedit-conflicts-tab';
+@use 'widgets/category-switcher-button';
+@use 'widgets/image-picker';
+@use 'widgets/relationpicker/relation-picker';
+@use 'widgets/relationpicker/relation-picker-group';
+@use 'core/edit-form';
+@use 'core/edit-form-group';
+@use 'core/forms/forms';
+@use 'core/forms/geometry';
+@use 'core/forms/date';
+@use 'core/forms/dropdown';
+@use 'core/forms/dropdown-range';
+@use 'core/forms/input';
+@use 'core/forms/multi-input';
+@use 'core/forms/valuelist-multi-input';
+@use 'core/forms/identifier';
+@use 'core/forms/type-relation/type-row';
+@use 'core/forms/type-relation/type-relation-picker';
+@use 'core/forms/array-field/object-array-entry-modal';
+@use 'core/forms/array-field/dating-entry-modal';
+@use 'core/forms/array-field/dimension-entry-modal';
+@use 'core/forms/array-field/literature-entry-modal';
+@use 'core/forms/array-field/composite/composite-entry-modal';
+@use 'core/forms/array-field/composite/composite';
+@use 'core/forms/widgets/outliers';
+@use 'core/forms/widgets/empty-valuelist-info';
+@use 'core/forms/widgets/invalid-field-data';
+@use 'core/forms/widgets/multi-language-text-field';
+@use 'dialog/duplicate-modal';
+@use '../variables' as *;
 
 #document-edit-wrapper {
   height: calc(100vh - 84px);

desktop/src/app/components/docedit/relations.scss

@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 .add-relation {
   display: block;
   width: 35px;

desktop/src/app/components/docedit/tabs/docedit-conflicts-tab.scss

@@ -1,4 +1,5 @@
-@import './revision-selector';
+@use './revision-selector';
+@use '../../variables' as *;
 
 #conflict-resolver {
   height: calc(100vh - 161px);

desktop/src/app/components/help/help.scss

@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 /**
  * @author Thomas Kleinke
  */

desktop/src/app/components/image/grid/drop-area.scss

@@ -1,3 +1,5 @@
+@use '../../variables' as *;
+
 .droparea {
   height: 100%;
   color: gray;

desktop/src/app/components/image/grid/image-grid.scss

@@ -1,5 +1,6 @@
-@import 'image-grid-cell';
-@import 'drop-area';
+@use 'image-grid-cell';
+@use 'drop-area';
+@use '../../variables' as *;
 
 .image-grid {
   margin-top: 15px;

desktop/src/app/components/image/image.scss

@@ -1,5 +1,5 @@
-@import 'row/image-row';
-@import 'grid/image-grid';
-@import 'overview/image-overview';
-@import 'upload/image-upload';
-@import 'viewer/image-viewer';
+@use 'row/image-row';
+@use 'grid/image-grid';
+@use 'overview/image-overview';
+@use 'upload/image-upload';
+@use 'viewer/image-viewer';

desktop/src/app/components/image/overview/image-overview.scss

@@ -1,5 +1,6 @@
-@import 'deletion/delete-modal';
-@import 'searchbar/image-overview-search-bar';
+@use 'deletion/delete-modal';
+@use 'searchbar/image-overview-search-bar';
+@use '../../variables' as *;
 
 .image-overview {
   .image-grid {
@@ -13,7 +14,7 @@
   .image-overview-nav {
     position: relative;
     z-index: 1001;
-    border-bottom: 1px solid $gray-200;
+    border-bottom: 1px solid #e9ecef;
     height: $toolbar-height;
     display: flex;
 

desktop/src/app/components/image/upload/image-upload.scss

@@ -1 +1 @@
-@import 'image-upload-metadata-modal.scss';
+@use 'image-upload-metadata-modal.scss';

desktop/src/app/components/matrix/matrix-view.scss

@@ -3,14 +3,14 @@
  * @author Daniel de Oliveira
  */
 
-@import 'graph';
-@import 'matrix-options-menu';
+@use 'graph';
+@use 'matrix-options-menu';
 
 #matrix-view {
   position: relative;
   height: 50px;
   padding: 6px;
-  border-bottom: 1px solid $gray-200;
+  border-bottom: 1px solid #e9ecef;
   z-index: 1001;
   user-select: none;
   cursor: default;