migrering scss

CHANGELOG.md

@@ -3,7 +3,9 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Change-log](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
-# 12.0.0 (2024-12-18) 
+# 13.1.0 (2025-01-30) 
+- Updated deprecated SCSS imports and removed all @import.
+# 13.0.0 (2024-12-18) 
 - Upgraded to Angular 19.
 # 12.0.4 (2024-11-14) 
 - Updated wcag for `filter-tag-group` so that you tab in/out of the component and inside you use the arrow keys.

projects/komponentkartan/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vgr-komponentkartan",
-  "version": "13.0.0",
+  "version": "13.1.0-beta",
   "peerDependencies": {
     "@angular/cdk": ">=17.0.0",
     "@angular/common": ">=17.0.0",

projects/komponentkartan/src/assets/komponentkartan.scss

@@ -1,18 +1,18 @@
 /* Struktur efter ITCSS, se https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/*/
 
-@import "partials/generic.reset";
-/* SETTINGS */
+@forward "partials/generic.reset";
+// /* SETTINGS */
 
-@import "partials/_base.page.scss";
-@import "partials/_base.links.scss";
-@import "partials/_base.text.scss";
-@import "partials/_base.input.scss";
-/* OBJECTS */
+@forward "partials/_base.page.scss";
+@forward "partials/_base.links.scss";
+@forward "partials/_base.text.scss";
+@forward "partials/_base.input.scss";
+// /* OBJECTS */
 
-@import "partials/_objects.colors.scss";
-@import "partials/_objects.layout.scss";
-@import "partials/_objects.sizes.scss";
-@import "partials/_objects.images.scss";
-@import "partials/_objects.validation.scss";
+@forward "partials/_objects.colors.scss";
+@forward "partials/_objects.layout.scss";
+@forward "partials/_objects.sizes.scss";
+@forward "partials/_objects.images.scss";
+@forward "partials/_objects.validation.scss";
 /* COMPONENTS */
 

projects/komponentkartan/src/assets/partials/_base.input.scss

@@ -1,5 +1,7 @@
-@import "_settings.fonts.scss";
-@import "_settings.sizes.scss";
+@use "_settings.fonts.scss" as *;
+@use "_settings.sizes.scss" as *;
+@use "_settings.colors.scss" as *;
+
 input,
 textarea {
   font-family: $font-family;
@@ -12,8 +14,8 @@ textarea {
   border-radius: 1px;
   border: 1px solid $control-border-color--default;
   height: 30px;
-  &:focus {
-    outline: none;
+  &:focus, :focus-visible {
+    outline: none !important;
   }
 }
 

projects/komponentkartan/src/assets/partials/_base.links.scss

@@ -1,4 +1,4 @@
-@import "_settings.fonts.scss";
+@use "_settings.fonts.scss" as *;
 
 a {
   color: #006298;

projects/komponentkartan/src/assets/partials/_base.page.scss

@@ -1,6 +1,6 @@
-@import "_settings.colors.scss";
-@import "_settings.fonts.scss";
-@import "_settings.sizes.scss";
+@use "_settings.colors.scss" as *;
+@use "_settings.fonts.scss" as *;
+@use "_settings.sizes.scss" as *;
 
 *,
 *:before,

projects/komponentkartan/src/assets/partials/_base.text.scss

@@ -1,6 +1,6 @@
-@import "_settings.colors.scss";
-@import "_settings.fonts.scss";
-@import "_settings.sizes.scss";
+@use "_settings.colors.scss" as *;
+@use "_settings.fonts.scss" as *;
+@use "_settings.sizes.scss" as *;
 
 header,
 p,

projects/komponentkartan/src/assets/partials/_base.themes.scss

@@ -11,6 +11,7 @@
 * .background-color--secondary
 * With themes for all defined colors.
 **********************************************************************************/
+@use './_settings.colors' as *;
 
 @mixin theme($property) {
   .#{$property}--primary {

projects/komponentkartan/src/assets/partials/_base.themify.scss

@@ -1,4 +1,6 @@
- @import "_objects.colors.scss";
+ @use "_objects.colors.scss" as *;
+ @use "_settings.colors.scss" as *;
+ @use "sass:map";
 
 $theme-map: null;
 $themes: (
@@ -30,7 +32,7 @@ $themes: (
 );
 
 @function themed($key) {
-  @return map-get($theme-map, $key);
+  @return map.get($theme-map, $key);
 }
 
 
@@ -40,8 +42,8 @@ $themes: (
     .theme--#{$theme} & {
       $theme-map: () !global;
       @each $key, $submap in $map {
-        $value: map-get(map-get($themes, $theme), '#{$key}');
-        $theme-map: map-merge($theme-map, ($key: $value)) !global;
+        $value: map.get(map.get($themes, $theme), '#{$key}');
+        $theme-map: map.merge($theme-map, ($key: $value)) !global;
       }
 
       @content;

projects/komponentkartan/src/assets/partials/_objects.colors.scss

@@ -1,3 +1,5 @@
+@use "_settings.colors.scss" as *;
+
 .blue--primary {
   background-color: $primary-color--blue;
   color: $text-color--light;

projects/komponentkartan/src/assets/partials/_objects.layout.scss

@@ -1,3 +1,7 @@
+@use './settings.sizes' as *;
+@use './settings.fonts' as *;
+@use './settings.colors' as *;
+
 .row-layout {
   display: flex;
   flex-direction: row;
@@ -133,9 +137,11 @@
   >*:first-child {
     padding-bottom: 10px;
   }
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
+  & {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
 }
 
 .control-without-heading {

projects/komponentkartan/src/assets/partials/_objects.validation.scss

@@ -1,3 +1,5 @@
+@use './settings.colors' as *;
+
 .validation {
   max-height: none;
   // padding: 1px; // för att den skall ha plats för ev. validering (och inte hoppa)

projects/komponentkartan/src/assets/partials/_settings.colors.scss

@@ -1,4 +1,5 @@
-//background
+@use "sass:color";
+//background
 $background-color--default: #f0f0f0;
 $background-color--content: #ffffff;
 $background-color--disabled: #87939f;
@@ -25,10 +26,10 @@ $border-color: #87939f;
 $border-color--light: #dfdfdf;
 //menu
 $menu-text-color: $text-color--default;
-$menu-color--inactive: transparentize($background-color--default, 0.3);
+$menu-color--inactive: color.scale($background-color--default, $alpha: -30%);
 //misc
 $focus-color: #2275D3;
-$modal-background-color: transparentize($text-color--default, 0.35);
+$modal-background-color: color.scale($text-color--default, $alpha: -35%);
 //themes
 $primary-color--blue: #006298;
 $secondary-color--blue: #4C91B7;

projects/komponentkartan/src/lib/controls/action-panel/action-panel.component.scss

@@ -1,5 +1,5 @@
-@import "../../../assets/partials/_settings.sizes.scss";
-@import "../../../assets/partials/_settings.colors.scss";
+@use "../../../assets/partials/_settings.sizes.scss" as *;
+@use "../../../assets/partials/_settings.colors.scss" as *;
 
 .action-panel {
   position: relative;

projects/komponentkartan/src/lib/controls/button/button.base.scss

@@ -1,7 +1,8 @@
-@import "../../../assets/partials/_settings.sizes.scss";
-@import "../../../assets/partials/_settings.colors.scss";
-@import "../../../assets/partials/objects.images";
-@import "../../../assets/partials/base.themify";
+@use "../../../assets/partials/_settings.sizes.scss" as *;
+@use "../../../assets/partials/_settings.colors.scss" as *;
+@use "../../../assets/partials/objects.images" as *;
+@use "../../../assets/partials/base.themify" as *;
+@use "sass:color";
 
   .button__base {
     @include themify($themes) {
@@ -25,7 +26,7 @@
       transform: scale(0.96);
       outline: 0;
       .button__focus-line {
-        background-color: transparentize($secondary-color--default, 0.4);
+        background-color: color.scale($secondary-color--default, $alpha: -40%);
       }
     }
     &:hover:not(.button--disabled),

projects/komponentkartan/src/lib/controls/button/button.component.scss

@@ -1,8 +1,9 @@
-@import "../../../assets/partials/_settings.sizes.scss";
-@import "../../../assets/partials/_settings.colors.scss";
-@import "../../../assets/partials/_settings.fonts.scss";
-@import "./button.base.scss";
-@import "../../../assets/partials/base.themify.scss";
+@use "../../../assets/partials/_settings.sizes.scss" as *;
+@use "../../../assets/partials/_settings.colors.scss" as *;
+@use "../../../assets/partials/_settings.fonts.scss" as *;
+@use "./button.base.scss" as *;
+@use "../../../assets/partials/base.themify.scss" as *;
+@use "sass:color";
 
 @mixin button-enabling--secondary($name, $color) {
   @keyframes #{$name} {
@@ -68,7 +69,7 @@
       transform: scale(0.96);
       outline: 0;
       .button__focus-line {
-        background-color: transparentize($secondary-color--default, 0.4);
+        background-color: color.scale($secondary-color--default, $alpha: -40%);
       }
     }
     &:hover:not(.button--disabled),

projects/komponentkartan/src/lib/controls/card/card.component.scss

@@ -1,6 +1,6 @@
-@import "../../../assets/partials/_settings.sizes.scss";
-@import "../../../assets/partials/_settings.colors.scss";
-@import "../../../assets/partials/_settings.fonts.scss";
+@use "../../../assets/partials/_settings.sizes.scss" as *;
+@use "../../../assets/partials/_settings.colors.scss" as *;
+@use "../../../assets/partials/_settings.fonts.scss" as *;
 
 :host::ng-deep {
   vgr-card-section {

projects/komponentkartan/src/lib/controls/checkbox/checkbox-group.component.scss

@@ -1,9 +1,9 @@
-@import "../../../assets/partials/_settings.sizes.scss";
-@import "../../../assets/partials/_settings.colors.scss";
-@import "../../../assets/partials/_settings.fonts.scss";
+@use "../../../assets/partials/_settings.sizes.scss" as *;
+@use "../../../assets/partials/_settings.colors.scss" as *;
+@use "../../../assets/partials/_settings.fonts.scss" as *;
 
 :host {
-  
+
 
     .checkbox-group-validation-error--active .checkbox-group-validation {
         padding-bottom: 8px;
@@ -31,7 +31,7 @@
 
   .checkbox-group {
     min-width: 120px;
-    width: max-content;    
+    width: max-content;
   }
 }
 

projects/komponentkartan/src/lib/controls/checkbox/checkbox.component.scss

@@ -1,5 +1,4 @@
-@import "../../../assets/partials/_settings.sizes.scss";
-@import "../../../assets/partials/_settings.colors.scss";
+@use "../../../assets/partials/_settings.colors.scss" as *;
 
 /* First, hide the default checkbox. It cannot be styled with CSS.
  * Instead, we will use the "label" that is associated with our textbox.

projects/komponentkartan/src/lib/controls/close-button/close-button.component.scss

@@ -1,6 +1,8 @@
-@import "../../../assets/partials/_settings.colors.scss";
-@import "../../../assets/partials/_settings.sizes.scss";
-@import "../button/button.base.scss";
+@use "../../../assets/partials/_settings.colors.scss" as *;
+@use "../../../assets/partials/_settings.sizes.scss" as *;
+@use "../button/button.base.scss" as *;
+@use "../../../assets/partials/base.themify.scss" as *;
+@use "sass:color";
 
 :host::ng-deep {
   .close-button {
@@ -26,7 +28,7 @@
         transform: scale(0.96);
         outline: 0;
         .button__focus-line {
-          background-color: transparentize($secondary-color--default, 0.4);
+          background-color: color.scale($secondary-color--default, $alpha: -40%);
         }
       }
       &:hover:not(.button--disabled),

projects/komponentkartan/src/lib/controls/combobox/combobox.component.scss

@@ -1,8 +1,9 @@
-@import "../../../assets/partials/_settings.sizes.scss";
-@import "../../../assets/partials/_settings.colors.scss";
-@import "../../../assets/partials/_settings.fonts.scss";
-@import "../../../assets/partials/objects.images";
-@import "../../../assets/partials/base.themify";
+@use "../../../assets/partials/_settings.sizes.scss" as *;
+@use "../../../assets/partials/_settings.colors.scss" as *;
+@use "../../../assets/partials/_settings.fonts.scss" as *;
+@use "../../../assets/partials/objects.images" as *;
+@use "../../../assets/partials/base.themify" as *;
+@use "sass:map";
 
 // @include theme(background-color);
 // @include theme(border-left-color);
@@ -108,7 +109,7 @@
           transition: all 0.6s linear;
 
           .combobox__header__button__icon {
-            background: transparent map-get($imagesBase64, 'bg-image-icon-chevron') center no-repeat;
+            background: transparent map.get($imagesBase64, 'bg-image-icon-chevron') center no-repeat;
             background-size: 40%;
             width: 36px;
             height: 30px;
@@ -137,7 +138,7 @@
         cursor: default;
 
         &::before {
-          background: transparent map-get($imagesBase64, 'bg-image-menu-arrow') center no-repeat;
+          background: transparent map.get($imagesBase64, 'bg-image-menu-arrow') center no-repeat;
           width: 16px;
           height: 21px;
           content: "";

projects/komponentkartan/src/lib/controls/datepicker/datepicker.component.scss

@@ -1,6 +1,6 @@
-@import "../../../assets/partials/_settings.sizes.scss";
-@import "../../../assets/partials/_settings.colors.scss";
-@import "../../../assets/partials/base.themify.scss";
+@use "../../../assets/partials/_settings.sizes.scss" as *;
+@use "../../../assets/partials/_settings.colors.scss" as *;
+@use "../../../assets/partials/base.themify.scss" as *;
 
 
 :host::ng-deep {

projects/komponentkartan/src/lib/controls/dropdown-select/dropdown-select.component.scss

@@ -1,8 +1,9 @@
-@import "../../../assets/partials/_settings.sizes.scss";
-@import "../../../assets/partials/_settings.colors.scss";
-@import "../../../assets/partials/_settings.fonts.scss";
-@import "../../../assets/partials/objects.images";
-@import "../../../assets/partials/base.themify";
+@use "../../../assets/partials/_settings.sizes.scss" as *;
+@use "../../../assets/partials/_settings.colors.scss" as *;
+@use "../../../assets/partials/_settings.fonts.scss" as *;
+@use "../../../assets/partials/objects.images" as *;
+@use "../../../assets/partials/base.themify" as *;
+@use "sass:map";
 
 // @include theme(background-color);
 // @include theme(border-left-color);
@@ -143,7 +144,7 @@
           transition: all 0.6s linear;
 
           .dropdown-select__header__button__icon {
-            background: transparent map-get($imagesBase64, 'bg-image-icon-chevron') center no-repeat;
+            background: transparent map.get($imagesBase64, 'bg-image-icon-chevron') center no-repeat;
             background-size: 40%;
             width: 36px;
             height: 30px;
@@ -190,7 +191,7 @@
 
         &::before {
           // @extend .bg-image-menu-arrow;
-          background: transparent map-get($imagesBase64, 'bg-image-menu-arrow') center no-repeat;
+          background: transparent map.get($imagesBase64, 'bg-image-menu-arrow') center no-repeat;
           width: 16px;
           height: 21px;
           content: "";

projects/komponentkartan/src/lib/controls/editable-table/editable-table.component.scss

@@ -1,6 +1,6 @@
-@import "../../../assets/partials/_settings.sizes.scss";
-@import "../../../assets/partials/_settings.colors.scss";
-@import "../../../assets/partials/base.themify";
+@use "../../../assets/partials/_settings.sizes.scss" as *;
+@use "../../../assets/partials/_settings.colors.scss" as *;
+@use "../../../assets/partials/base.themify" as *;
 
 :host::ng-deep {
   .scroll-container {
@@ -147,7 +147,7 @@
   .list-wrapper {
     border-collapse: collapse;
     display: table;
-    width: 100%; 
+    width: 100%;
     margin-top: 10px;
   }