@helsenorge/designsystem-react 10.6.1 → 10.6.2

package/components/MaxCharacters/styles.module.scss

@@ -1,28 +1,28 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
 
 .max-characters {
   display: flex;
   justify-content: flex-end;
-  padding-top: spacers.getSpacer(2xs);
+  padding-top: getSpacer(2xs);
   padding-right: 2px;
-  font-size: font-settings.$font-size-sm;
-  line-height: font-settings.$lineheight-size-sm;
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    line-height: font-settings.$lineheight-size-md;
-    font-size: font-settings.$font-size-md;
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    line-height: $lineheight-size-md;
+    font-size: $font-size-md;
   }
 
   &--on-dark {
-    color: palette.$white;
+    color: $white;
   }
 
   &--invalid {
-    color: palette.$cherry600;
+    color: $cherry600;
     font-weight: 600;
   }
 }

package/components/Modal/styles.module.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/spacers';
+@import '../../scss/palette';
+@import '../../scss/breakpoints';
+@import '../../scss/font-settings';
 
 .modal-overlay {
   background: rgb(51 51 51 / 75%);
@@ -32,26 +32,26 @@
 .modal {
   pointer-events: auto;
   box-shadow: 0 0 5px 0 rgb(0 0 0 / 50%);
-  background-color: palette.$white;
+  background-color: $white;
   animation: open 200ms 1;
   outline: none;
 
   &__title {
     &--error {
-      color: palette.$cherry600;
+      color: $cherry600;
     }
 
     &--success {
-      color: palette.$kiwi900;
+      color: $kiwi900;
     }
   }
 
   &__iconWrapper {
-    padding-right: spacers.getSpacer(xs);
+    padding-right: getSpacer(xs);
   }
 
   &__afterTitleChildren {
-    padding-left: spacers.getSpacer(xs);
+    padding-left: getSpacer(xs);
   }
 
   p {
@@ -59,54 +59,54 @@
   }
 
   &--normal {
-    background-color: palette.$white;
+    background-color: $white;
   }
 
   &--error {
-    background-color: palette.$cherry100;
+    background-color: $cherry100;
   }
 
   &--warning {
-    background-color: palette.$banana50;
+    background-color: $banana50;
   }
 
   &--success {
-    background-color: palette.$kiwi50;
+    background-color: $kiwi50;
   }
 
   &--large {
     width: calc(100vw - 0.75rem);
-    padding-bottom: spacers.getSpacer(l);
+    padding-bottom: getSpacer(l);
 
-    @media (max-width: map.get(breakpoints.$grid-breakpoints, sm)) {
+    @media (max-width: map.get($grid-breakpoints, sm)) {
       p {
         font-size: 1.125rem;
       }
     }
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      padding-bottom: spacers.getSpacer(xl);
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      padding-bottom: getSpacer(xl);
       width: 612px;
     }
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+    @media (min-width: map.get($grid-breakpoints, lg)) {
       width: 696px;
     }
 
-    @include breakpoints.tiny-screens-media-query {
-      padding-bottom: spacers.getSpacer(2xs);
+    @include tiny-screens-media-query {
+      padding-bottom: getSpacer(2xs);
     }
   }
 
   &--medium {
     width: calc(100vw - 0.75rem);
-    padding-bottom: spacers.getSpacer(m);
+    padding-bottom: getSpacer(m);
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       width: 335px;
     }
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+    @media (min-width: map.get($grid-breakpoints, lg)) {
       width: 515px;
     }
   }
@@ -118,7 +118,7 @@
   &--image {
     padding: 0;
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       max-height: calc(100vh - 24px);
       max-width: calc(100vw - 24px);
       width: 100%;
@@ -160,8 +160,8 @@
 
     &__close {
       position: absolute;
-      right: spacers.getSpacer(3xs);
-      top: spacers.getSpacer(3xs);
+      right: getSpacer(3xs);
+      top: getSpacer(3xs);
     }
   }
 
@@ -172,7 +172,7 @@
     overflow-x: hidden;
 
     &:focus-visible {
-      outline: 1px solid palette.$black;
+      outline: 1px solid $black;
       outline-offset: -1px;
     }
 
@@ -181,7 +181,7 @@
       max-height: none;
     }
 
-    @include breakpoints.tiny-screens-media-query {
+    @include tiny-screens-media-query {
       max-height: calc(100dvh - 4rem);
     }
 
@@ -191,30 +191,30 @@
 
     &__scroll {
       &--large {
-        padding: spacers.getSpacer(xl) spacers.getSpacer(m) spacers.getSpacer(2xs);
+        padding: getSpacer(xl) getSpacer(m) getSpacer(2xs);
 
-        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-          padding: spacers.getSpacer(xl) spacers.getSpacer(xl) spacers.getSpacer(2xs);
+        @media (min-width: map.get($grid-breakpoints, md)) {
+          padding: getSpacer(xl) getSpacer(xl) getSpacer(2xs);
         }
 
-        @include breakpoints.tiny-screens-media-query {
-          padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(4xs);
+        @include tiny-screens-media-query {
+          padding: getSpacer(2xs) getSpacer(2xs) getSpacer(4xs);
         }
       }
 
       &--medium {
-        padding: spacers.getSpacer(l) spacers.getSpacer(m) spacers.getSpacer(2xs);
+        padding: getSpacer(l) getSpacer(m) getSpacer(2xs);
 
-        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-          padding: spacers.getSpacer(xl) spacers.getSpacer(m) spacers.getSpacer(2xs);
+        @media (min-width: map.get($grid-breakpoints, md)) {
+          padding: getSpacer(xl) getSpacer(m) getSpacer(2xs);
         }
 
-        @include breakpoints.tiny-screens-media-query {
-          padding: spacers.getSpacer(2xs) spacers.getSpacer(3xs) spacers.getSpacer(4xs);
+        @include tiny-screens-media-query {
+          padding: getSpacer(2xs) getSpacer(3xs) getSpacer(4xs);
         }
       }
       &--large#{&}--image {
-        padding: spacers.getSpacer(xl) spacers.getSpacer(2xs) spacers.getSpacer(l);
+        padding: getSpacer(xl) getSpacer(2xs) getSpacer(l);
       }
     }
 
@@ -240,8 +240,8 @@
     }
 
     &__imageDescription {
-      font-size: font-settings.$font-size-xs;
-      padding-top: spacers.getSpacer(s);
+      font-size: $font-size-xs;
+      padding-top: getSpacer(s);
       display: block;
     }
   }
@@ -258,22 +258,22 @@
     }
 
     &--large {
-      padding: spacers.getSpacer(l) spacers.getSpacer(m) 0;
+      padding: getSpacer(l) getSpacer(m) 0;
 
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        padding: spacers.getSpacer(l) spacers.getSpacer(xl) 0;
+      @media (min-width: map.get($grid-breakpoints, md)) {
+        padding: getSpacer(l) getSpacer(xl) 0;
       }
 
-      @include breakpoints.tiny-screens-media-query {
-        padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) 0;
+      @include tiny-screens-media-query {
+        padding: getSpacer(2xs) getSpacer(2xs) 0;
       }
     }
 
     &--medium {
-      padding: spacers.getSpacer(m) spacers.getSpacer(m) 0;
+      padding: getSpacer(m) getSpacer(m) 0;
 
-      @include breakpoints.tiny-screens-media-query {
-        padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) 0;
+      @include tiny-screens-media-query {
+        padding: getSpacer(2xs) getSpacer(2xs) 0;
       }
     }
   }

package/components/NotificationPanel/styles.module.scss

@@ -1,35 +1,35 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/palette' as palette;
-@use '../AnchorLink/styles.module' as anchorlink;
-@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/font-settings';
+@import '../../scss/palette';
+@import '../AnchorLink/styles.module';
 
 .notification-panel {
   $panel: &;
 
   display: flex;
-  padding: spacers.getSpacer(2xs) spacers.getSpacer(s) spacers.getSpacer(2xs) spacers.getSpacer(2xs);
+  padding: getSpacer(2xs) getSpacer(s) getSpacer(2xs) getSpacer(2xs);
   box-shadow: 0.25rem 0.25rem 0.375rem rgb(0 0 0 / 15%);
   border-radius: 0.25rem;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    padding-left: spacers.getSpacer(s);
-    padding-right: spacers.getSpacer(m);
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    padding-left: getSpacer(s);
+    padding-right: getSpacer(m);
     #{$panel}__icon {
-      margin-right: spacers.getSpacer(m);
+      margin-right: getSpacer(m);
     }
   }
 
   &--compact {
     width: fit-content;
-    font-size: font-settings.$font-size-xs;
+    font-size: $font-size-xs;
     line-height: 1.25rem;
     box-shadow: none;
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      padding-left: spacers.getSpacer(2xs);
-      padding-right: spacers.getSpacer(s);
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      padding-left: getSpacer(2xs);
+      padding-right: getSpacer(s);
     }
 
     &--outline {
@@ -37,28 +37,28 @@
     }
   }
   #{$panel}__icon {
-    margin-right: spacers.getSpacer(2xs);
+    margin-right: getSpacer(2xs);
   }
 
   &--dismissable {
-    padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(m);
+    padding: getSpacer(2xs) getSpacer(2xs) getSpacer(m);
   }
 
   &--small {
-    max-width: map.get(breakpoints.$grid-breakpoints, sm);
+    max-width: map.get($grid-breakpoints, sm);
   }
 
   &--medium {
-    max-width: map.get(breakpoints.$grid-breakpoints, md);
+    max-width: map.get($grid-breakpoints, md);
   }
 
   &--large {
-    max-width: map.get(breakpoints.$grid-breakpoints, lg);
+    max-width: map.get($grid-breakpoints, lg);
   }
 
   &--info {
-    border: 0.125rem solid palette.$blueberry700;
-    background-color: palette.$blueberry50;
+    border: 0.125rem solid $blueberry700;
+    background-color: $blueberry50;
   }
 
   &--info#{&}--compact {
@@ -71,8 +71,8 @@
   }
 
   &--warn {
-    border: 0.125rem solid palette.$banana700;
-    background-color: palette.$banana50;
+    border: 0.125rem solid $banana700;
+    background-color: $banana50;
   }
 
   &--warn#{&}--compact {
@@ -85,8 +85,8 @@
   }
 
   &--error {
-    border: 0.125rem solid palette.$cherry700;
-    background-color: palette.$cherry50;
+    border: 0.125rem solid $cherry700;
+    background-color: $cherry50;
   }
 
   &--error#{&}--compact {
@@ -99,8 +99,8 @@
   }
 
   &--success {
-    border: 0.125rem solid palette.$kiwi900;
-    background-color: palette.$kiwi50;
+    border: 0.125rem solid $kiwi900;
+    background-color: $kiwi50;
   }
 
   &--success#{&}--compact {
@@ -115,36 +115,36 @@
   &__close {
     order: 1;
     margin-left: auto;
-    padding-left: spacers.getSpacer(2xs);
+    padding-left: getSpacer(2xs);
   }
 
   &__content {
     align-self: center;
 
     a {
-      @include anchorlink.anchorlink;
-      @include anchorlink.anchorlink-icon;
+      @include anchorlink;
+      @include anchorlink-icon;
     }
   }
 
   &__label,
   &__children {
-    font-size: font-settings.$font-size-xs;
-    line-height: font-settings.$lineheight-size-xs;
+    font-size: $font-size-xs;
+    line-height: $lineheight-size-xs;
     margin: 0;
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      font-size: font-settings.$font-size-sm;
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      font-size: $font-size-sm;
       line-height: 1.625rem;
     }
   }
 
   &__label {
     font-weight: 700;
-    margin: spacers.getSpacer(2xs) 0 0;
+    margin: getSpacer(2xs) 0 0;
 
     &--compact {
-      font-size: font-settings.$font-size-xs;
+      font-size: $font-size-xs;
       line-height: 1.25rem;
     }
 
@@ -164,16 +164,16 @@
 
   &__children {
     font-weight: 600;
-    padding: spacers.getSpacer(3xs) 0;
+    padding: getSpacer(3xs) 0;
 
     &--with-label {
       font-weight: 500;
     }
 
     &--expander-no-label {
-      margin: spacers.getSpacer(2xs) 0 0;
+      margin: getSpacer(2xs) 0 0;
 
-      @media (max-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+      @media (max-width: map.get($grid-breakpoints, lg)) {
         padding-top: 0;
       }
     }
@@ -188,7 +188,7 @@
   }
 
   &--with-content {
-    padding-bottom: spacers.getSpacer(xs);
+    padding-bottom: getSpacer(xs);
   }
 }