@helsenorge/designsystem-react 10.6.0 → 10.6.2

package/components/Dropdown/styles.module.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/screen-reader' as *;
-@use '../../scss/breakpoints' as *;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
+@import '../../scss/screen-reader';
 
 .dropdown {
   position: relative;
@@ -20,14 +20,14 @@
     border-radius: 0;
     border-width: 2px;
     border-style: solid;
-    padding: 0 spacers.getSpacer(3xs) 0 spacers.getSpacer(s);
+    padding: 0 getSpacer(3xs) 0 getSpacer(s);
     font-family: inherit;
-    font-size: font-settings.$font-size-sm;
+    font-size: $font-size-sm;
     line-height: 1.3rem; // Custom fordi teksten skal henge bedre sammen om den går over to linjer
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      padding: spacers.getSpacer(3xs) spacers.getSpacer(3xs) spacers.getSpacer(3xs) spacers.getSpacer(s);
-      font-size: font-settings.$font-size-md;
+      padding: getSpacer(3xs) getSpacer(3xs) getSpacer(3xs) getSpacer(s);
+      font-size: $font-size-md;
       line-height: 1.5rem;
     }
 
@@ -37,80 +37,80 @@
 
     &:disabled {
       cursor: initial;
-      color: palette.$neutral700;
+      color: $neutral700;
       background-color: transparent;
-      border-color: palette.$neutral600;
+      border-color: $neutral600;
       border-style: dashed;
     }
 
     &--on-white,
     &--on-grey {
-      border-color: palette.$neutral700;
-      background-color: palette.$white;
+      border-color: $neutral700;
+      background-color: $white;
 
       &:hover {
-        background-color: palette.$neutral50;
-        box-shadow: 0 0 0 1px palette.$neutral700;
+        background-color: $neutral50;
+        box-shadow: 0 0 0 1px $neutral700;
       }
 
       &:focus {
-        border-color: palette.$black;
-        box-shadow: 0 0 0 1px palette.$black;
+        border-color: $black;
+        box-shadow: 0 0 0 1px $black;
       }
     }
 
     &--on-blueberry {
-      border-color: palette.$blueberry500;
-      background-color: palette.$white;
+      border-color: $blueberry500;
+      background-color: $white;
 
       &:hover {
-        background-color: palette.$blueberry50;
-        box-shadow: 0 0 0 1px palette.$blueberry500;
+        background-color: $blueberry50;
+        box-shadow: 0 0 0 1px $blueberry500;
       }
 
       &:focus {
-        border-color: palette.$black;
-        box-shadow: 0 0 0 1px palette.$black;
+        border-color: $black;
+        box-shadow: 0 0 0 1px $black;
       }
     }
 
     &--on-cherry {
-      border-color: palette.$cherry500;
-      background-color: palette.$white;
+      border-color: $cherry500;
+      background-color: $white;
 
       &:hover {
-        background-color: palette.$cherry50;
-        box-shadow: 0 0 0 1px palette.$cherry500;
+        background-color: $cherry50;
+        box-shadow: 0 0 0 1px $cherry500;
       }
 
       &:focus {
-        border-color: palette.$black;
-        box-shadow: 0 0 0 1px palette.$black;
+        border-color: $black;
+        box-shadow: 0 0 0 1px $black;
       }
     }
 
     &--open#{&}--on-white,
     &--open#{&}--on-grey {
-      background-color: palette.$neutral50;
+      background-color: $neutral50;
 
       &:hover {
-        background-color: palette.$white;
+        background-color: $white;
       }
     }
 
     &--open#{&}--on-blueberry {
-      background-color: palette.$blueberry50;
+      background-color: $blueberry50;
 
       &:hover {
-        background-color: palette.$white;
+        background-color: $white;
       }
     }
 
     &--open#{&}--on-cherry {
-      background-color: palette.$cherry50;
+      background-color: $cherry50;
 
       &:hover {
-        background-color: palette.$white;
+        background-color: $white;
       }
     }
 
@@ -120,24 +120,24 @@
 
     &--transparent#{&}--on-grey {
       &:hover {
-        background-color: palette.$neutral100;
+        background-color: $neutral100;
       }
     }
 
     &--transparent#{&}--on-blueberry {
       &:hover {
-        background-color: palette.$blueberry100;
+        background-color: $blueberry100;
       }
     }
 
     &--transparent#{&}--on-cherry {
       &:hover {
-        background-color: palette.$cherry100;
+        background-color: $cherry100;
       }
     }
 
     &--transparent#{&}--open#{&}--on-grey {
-      background-color: palette.$neutral100;
+      background-color: $neutral100;
 
       &:hover {
         background-color: transparent;
@@ -145,7 +145,7 @@
     }
 
     &--transparent#{&}--open#{&}--on-blueberry {
-      background-color: palette.$blueberry100;
+      background-color: $blueberry100;
 
       &:hover {
         background-color: transparent;
@@ -153,7 +153,7 @@
     }
 
     &--transparent#{&}--open#{&}--on-cherry {
-      background-color: palette.$cherry100;
+      background-color: $cherry100;
 
       &:hover {
         background-color: transparent;
@@ -165,24 +165,24 @@
     }
 
     &__label {
-      padding: spacers.getSpacer(3xs) 0;
+      padding: getSpacer(3xs) 0;
 
       @media (min-width: map.get($grid-breakpoints, md)) {
-        padding: spacers.getSpacer(2xs) 0;
+        padding: getSpacer(2xs) 0;
       }
     }
   }
 
   &__icon {
-    margin-left: spacers.getSpacer(2xs);
+    margin-left: getSpacer(2xs);
   }
 
   &__content {
     display: none;
     position: absolute;
-    background-color: palette.$white;
-    margin-top: spacers.getSpacer(2xs);
-    box-shadow: 0 0 0 2px palette.$blueberry500;
+    background-color: $white;
+    margin-top: getSpacer(2xs);
+    box-shadow: 0 0 0 2px $blueberry500;
     z-index: 1;
 
     &--open {
@@ -203,15 +203,15 @@
   }
 
   &__close {
-    padding: spacers.getSpacer(s);
+    padding: getSpacer(s);
   }
 
   &__input {
-    border-bottom: 1px solid palette.$neutral300;
-    padding: spacers.getSpacer(2xs) spacers.getSpacer(s);
+    border-bottom: 1px solid $neutral300;
+    padding: getSpacer(2xs) getSpacer(s);
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      padding: spacers.getSpacer(s);
+      padding: getSpacer(s);
     }
 
     &:last-child {

package/components/Duolist/styles.module.scss

@@ -1,15 +1,14 @@
 @use 'sass:map';
 @use '../../scss/font-mixins' as fonts;
 @use '../../scss/spacers' as spacers;
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@import '../../scss/breakpoints';
+@import '../../scss/font-settings';
+@import '../../scss/palette';
 
 .duolist-wrapper {
   &--border {
     padding: spacers.getSpacer(s) spacers.getSpacer(s) spacers.getSpacer(l);
-    border: 0.062rem solid palette.$neutral500;
+    border: 0.062rem solid $neutral500;
   }
 
   &--extra-padding-top {

package/components/EmptyState/styles.module.scss

@@ -1,19 +1,19 @@
 @use 'sass:map';
 @use '../../scss/font-mixins' as fonts;
-@use '../../scss/spacers' as spacers;
-@use '../../scss/breakpoints' as *;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
 @import '../../scss/supernova/styles/colors';
 
 .emptystate {
   display: flex;
   flex-flow: row;
-  gap: spacers.getSpacer(s);
-  padding: spacers.getSpacer(s);
+  gap: getSpacer(s);
+  padding: getSpacer(s);
   align-items: center;
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    gap: spacers.getSpacer(m);
-    padding: spacers.getSpacer(l);
+    gap: getSpacer(m);
+    padding: getSpacer(l);
   }
 
   &--dashed {
@@ -27,15 +27,15 @@
     border: none;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      padding-left: spacers.getSpacer(2xs);
+      padding-left: getSpacer(2xs);
     }
   }
 
   &--compact {
     border-radius: 4px;
-    gap: spacers.getSpacer(3xs);
-    padding: spacers.getSpacer(2xs);
-    min-height: spacers.getSpacer(2xl);
+    gap: getSpacer(3xs);
+    padding: getSpacer(2xs);
+    min-height: getSpacer(2xl);
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.25rem;
@@ -49,10 +49,10 @@
   &__text {
     display: flex;
     flex-flow: column;
-    gap: spacers.getSpacer(3xs);
+    gap: getSpacer(3xs);
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      gap: spacers.getSpacer(xs);
+      gap: getSpacer(xs);
     }
   }
 

package/components/Expander/styles.module.scss

@@ -1,11 +1,11 @@
 /* stylelint-disable no-descending-specificity */
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-settings' as font-settings;
-@use '../Button/styles.module' as button;
-@use '../../scss/breakpoints' as *;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
 @import '../../scss/supernova/styles/colors';
+@import '../Button/styles.module';
 
 .expander {
   position: initial;
@@ -16,7 +16,7 @@
   }
 
   @media print {
-    border: 1px solid palette.$black;
+    border: 1px solid $black;
   }
 
   &__icon {
@@ -24,27 +24,27 @@
     align-items: center;
 
     &--left {
-      margin-right: spacers.getSpacer(2xs);
+      margin-right: getSpacer(2xs);
     }
 
     &--right {
       margin-left: auto;
-      padding-left: spacers.getSpacer(2xs);
+      padding-left: getSpacer(2xs);
     }
   }
 
   &__button {
     position: relative;
-    padding-right: spacers.getSpacer(s);
+    padding-right: getSpacer(s);
     text-align: left;
 
     &--expanded {
-      @include button.outline-borderless-hover;
+      @include outline-borderless-hover;
     }
   }
 
   &__button &__button__text {
-    @include button.outline-borderless-text-hover;
+    @include outline-borderless-text-hover;
   }
 
   &__trigger {
@@ -55,31 +55,31 @@
     align-items: center;
     border: none;
     outline: none;
-    font-size: font-settings.$font-size-sm;
-    line-height: font-settings.$lineheight-size-sm;
+    font-size: $font-size-sm;
+    line-height: $lineheight-size-sm;
     font-weight: 600;
     text-align: left;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      font-size: font-settings.$font-size-md;
-      line-height: font-settings.$lineheight-size-md;
+      font-size: $font-size-md;
+      line-height: $lineheight-size-md;
     }
 
     &--large {
       width: 100%;
-      padding: spacers.getSpacer(xs) spacers.getSpacer(2xs) spacers.getSpacer(xs) spacers.getSpacer(s);
+      padding: getSpacer(xs) getSpacer(2xs) getSpacer(xs) getSpacer(s);
       cursor: pointer;
 
       @media (min-width: map.get($grid-breakpoints, md)) {
-        padding: spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(l);
+        padding: getSpacer(xs) getSpacer(s) getSpacer(xs) getSpacer(l);
       }
     }
 
     &--icon {
-      padding-left: spacers.getSpacer(2xs);
+      padding-left: getSpacer(2xs);
 
       @media (min-width: map.get($grid-breakpoints, md)) {
-        padding-left: spacers.getSpacer(s);
+        padding-left: getSpacer(s);
       }
     }
 
@@ -87,22 +87,22 @@
 
     @each $color in $colors {
       &--#{$color} {
-        background-color: map.get(palette.$palette-map, #{$color}50);
+        background-color: map.get($palette-map, #{$color}50);
 
         &:hover {
-          background-color: map.get(palette.$palette-map, #{$color}100);
+          background-color: map.get($palette-map, #{$color}100);
         }
 
         &:focus {
           box-shadow:
-            0 0 0 1.5px palette.$neutral600,
-            inset 0 0 0 1.5px palette.$neutral600;
+            0 0 0 1.5px $neutral600,
+            inset 0 0 0 1.5px $neutral600;
         }
         &#{$trigger}--expanded {
-          background-color: map.get(palette.$palette-map, #{$color}100);
+          background-color: map.get($palette-map, #{$color}100);
 
           &:hover {
-            background-color: map.get(palette.$palette-map, #{$color}200);
+            background-color: map.get($palette-map, #{$color}200);
           }
         }
       }
@@ -110,25 +110,25 @@
 
     // Hvit bakgrunn har egne regler for bakgrunnsfarge, hover og fokus
     &--white {
-      background-color: palette.$white;
+      background-color: $white;
 
       &:hover {
-        background-color: palette.$neutral100;
+        background-color: $neutral100;
       }
 
       &:focus {
         box-shadow:
-          0 0 0 1.5px palette.$neutral600,
-          inset 0 0 0 1.5px palette.$neutral600;
+          0 0 0 1.5px $neutral600,
+          inset 0 0 0 1.5px $neutral600;
       }
       &#{$trigger}--expanded {
-        box-shadow: inset 0 0 0 6px palette.$neutral100;
+        box-shadow: inset 0 0 0 6px $neutral100;
 
         &:focus {
           box-shadow:
-            0 0 0 1.5px palette.$neutral600,
-            inset 0 0 0 1.5px palette.$neutral600,
-            inset 0 0 0 6px palette.$neutral100;
+            0 0 0 1.5px $neutral600,
+            inset 0 0 0 1.5px $neutral600,
+            inset 0 0 0 6px $neutral100;
         }
       }
     }
@@ -136,7 +136,7 @@
 
   &__button-container {
     &--sticky {
-      background-color: palette.$white;
+      background-color: $white;
     }
   }
 
@@ -163,15 +163,15 @@
     }
 
     &--small {
-      margin-top: spacers.getSpacer(s);
+      margin-top: getSpacer(s);
     }
     &--small#{&}--sticky {
       margin-top: 1.25rem;
     }
 
     &--nested-line {
-      padding-left: spacers.getSpacer(s);
-      border-left: solid 3px palette.$neutral200;
+      padding-left: getSpacer(s);
+      border-left: solid 3px $neutral200;
 
       @media (min-width: map.get($grid-breakpoints, md)) {
         margin-left: calc(38px / 2 - 1px); // Halvparten av chevron-ikonets bredde minus halve bredden på border
@@ -182,10 +182,10 @@
     }
 
     &--large {
-      padding: spacers.getSpacer(s) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(s);
+      padding: getSpacer(s) getSpacer(m) getSpacer(l) getSpacer(s);
 
       @media (min-width: map.get($grid-breakpoints, md)) {
-        padding: spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(xl);
+        padding: getSpacer(m) getSpacer(l) getSpacer(xl);
       }
       &#{$content}--icon {
         @media (min-width: map.get($grid-breakpoints, md)) {
@@ -195,31 +195,31 @@
     }
 
     &--neutral {
-      background-color: palette.$neutral50;
+      background-color: $neutral50;
     }
 
     &--blueberry {
-      background-color: palette.$blueberry50;
+      background-color: $blueberry50;
     }
 
     &--cherry {
-      background-color: palette.$cherry50;
+      background-color: $cherry50;
     }
 
     &--kiwi {
-      background-color: palette.$kiwi50;
+      background-color: $kiwi50;
     }
 
     &--banana {
-      background-color: palette.$banana50;
+      background-color: $banana50;
     }
 
     &--plum {
-      background-color: palette.$plum50;
+      background-color: $plum50;
     }
 
     &--white {
-      background-color: palette.$white;
+      background-color: $white;
     }
   }
 }