@helsenorge/designsystem-react 10.2.0 → 10.3.0

package/components/Modal/styles.module.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/palette';
-@import '../../scss/breakpoints';
-@import '../../scss/font-settings';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/breakpoints' as *;
 
 .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: $white;
+  background-color: palette.$white;
   animation: open 200ms 1;
   outline: none;
 
   &__title {
     &--error {
-      color: $cherry600;
+      color: palette.$cherry600;
     }
 
     &--success {
-      color: $kiwi900;
+      color: palette.$kiwi900;
     }
   }
 
   &__iconWrapper {
-    padding-right: getSpacer(xs);
+    padding-right: spacers.getSpacer(xs);
   }
 
   &__afterTitleChildren {
-    padding-left: getSpacer(xs);
+    padding-left: spacers.getSpacer(xs);
   }
 
   p {
@@ -59,24 +59,24 @@
   }
 
   &--normal {
-    background-color: $white;
+    background-color: palette.$white;
   }
 
   &--error {
-    background-color: $cherry100;
+    background-color: palette.$cherry100;
   }
 
   &--warning {
-    background-color: $banana50;
+    background-color: palette.$banana50;
   }
 
   &--success {
-    background-color: $kiwi50;
+    background-color: palette.$kiwi50;
   }
 
   &--large {
     width: calc(100vw - 0.75rem);
-    padding-bottom: getSpacer(l);
+    padding-bottom: spacers.getSpacer(l);
 
     @media (max-width: map.get($grid-breakpoints, sm)) {
       p {
@@ -85,7 +85,7 @@
     }
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      padding-bottom: getSpacer(xl);
+      padding-bottom: spacers.getSpacer(xl);
       width: 612px;
     }
 
@@ -94,13 +94,13 @@
     }
 
     @include tiny-screens-media-query {
-      padding-bottom: getSpacer(2xs);
+      padding-bottom: spacers.getSpacer(2xs);
     }
   }
 
   &--medium {
     width: calc(100vw - 0.75rem);
-    padding-bottom: getSpacer(m);
+    padding-bottom: spacers.getSpacer(m);
 
     @media (min-width: map.get($grid-breakpoints, md)) {
       width: 335px;
@@ -160,8 +160,8 @@
 
     &__close {
       position: absolute;
-      right: getSpacer(3xs);
-      top: getSpacer(3xs);
+      right: spacers.getSpacer(3xs);
+      top: spacers.getSpacer(3xs);
     }
   }
 
@@ -172,7 +172,7 @@
     overflow-x: hidden;
 
     &:focus-visible {
-      outline: 1px solid $black;
+      outline: 1px solid palette.$black;
       outline-offset: -1px;
     }
 
@@ -191,30 +191,30 @@
 
     &__scroll {
       &--large {
-        padding: getSpacer(xl) getSpacer(m) getSpacer(2xs);
+        padding: spacers.getSpacer(xl) spacers.getSpacer(m) spacers.getSpacer(2xs);
 
         @media (min-width: map.get($grid-breakpoints, md)) {
-          padding: getSpacer(xl) getSpacer(xl) getSpacer(2xs);
+          padding: spacers.getSpacer(xl) spacers.getSpacer(xl) spacers.getSpacer(2xs);
         }
 
         @include tiny-screens-media-query {
-          padding: getSpacer(2xs) getSpacer(2xs) getSpacer(4xs);
+          padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(4xs);
         }
       }
 
       &--medium {
-        padding: getSpacer(l) getSpacer(m) getSpacer(2xs);
+        padding: spacers.getSpacer(l) spacers.getSpacer(m) spacers.getSpacer(2xs);
 
         @media (min-width: map.get($grid-breakpoints, md)) {
-          padding: getSpacer(xl) getSpacer(m) getSpacer(2xs);
+          padding: spacers.getSpacer(xl) spacers.getSpacer(m) spacers.getSpacer(2xs);
         }
 
         @include tiny-screens-media-query {
-          padding: getSpacer(2xs) getSpacer(3xs) getSpacer(4xs);
+          padding: spacers.getSpacer(2xs) spacers.getSpacer(3xs) spacers.getSpacer(4xs);
         }
       }
       &--large#{&}--image {
-        padding: getSpacer(xl) getSpacer(2xs) getSpacer(l);
+        padding: spacers.getSpacer(xl) spacers.getSpacer(2xs) spacers.getSpacer(l);
       }
     }
 
@@ -240,8 +240,8 @@
     }
 
     &__imageDescription {
-      font-size: $font-size-xs;
-      padding-top: getSpacer(s);
+      font-size: font-settings.$font-size-xs;
+      padding-top: spacers.getSpacer(s);
       display: block;
     }
   }
@@ -258,22 +258,22 @@
     }
 
     &--large {
-      padding: getSpacer(l) getSpacer(m) 0;
+      padding: spacers.getSpacer(l) spacers.getSpacer(m) 0;
 
       @media (min-width: map.get($grid-breakpoints, md)) {
-        padding: getSpacer(l) getSpacer(xl) 0;
+        padding: spacers.getSpacer(l) spacers.getSpacer(xl) 0;
       }
 
       @include tiny-screens-media-query {
-        padding: getSpacer(2xs) getSpacer(2xs) 0;
+        padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) 0;
       }
     }
 
     &--medium {
-      padding: getSpacer(m) getSpacer(m) 0;
+      padding: spacers.getSpacer(m) spacers.getSpacer(m) 0;
 
       @include tiny-screens-media-query {
-        padding: getSpacer(2xs) getSpacer(2xs) 0;
+        padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) 0;
       }
     }
   }

package/components/NotificationPanel/styles.module.scss

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

package/components/Panel/styles.module.scss

@@ -1,22 +1,22 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-settings';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/breakpoints' as *;
 
 @mixin panel-padding {
-  padding: getSpacer(s);
+  padding: spacers.getSpacer(s);
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    padding: getSpacer(l) getSpacer(m) getSpacer(l) getSpacer(l);
+    padding: spacers.getSpacer(l) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(l);
   }
 }
 
 @mixin panel-padding-icon {
-  padding: getSpacer(m) getSpacer(s) getSpacer(l);
+  padding: spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l);
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    padding: getSpacer(m) getSpacer(m) getSpacer(l);
+    padding: spacers.getSpacer(m) spacers.getSpacer(m) spacers.getSpacer(l);
   }
 }
 
@@ -30,8 +30,8 @@
   }
 }
 
-$layout-sm-gap: getSpacer(s);
-$layout-md-col-gap: getSpacer(m);
+$layout-sm-gap: spacers.getSpacer(s);
+$layout-md-col-gap: spacers.getSpacer(m);
 
 .panel-wrapper {
   width: 100%;
@@ -173,13 +173,13 @@ $layout-md-col-gap: getSpacer(m);
     &--layout-2 {
       @media (min-width: map.get($grid-breakpoints, md)) {
         grid-row: span 2;
-        padding-right: getSpacer(2xs);
+        padding-right: spacers.getSpacer(2xs);
       }
     }
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
       grid-row: span 2;
-      padding-right: getSpacer(2xs);
+      padding-right: spacers.getSpacer(2xs);
     }
 
     &--layout-3 {
@@ -234,63 +234,63 @@ $layout-md-col-gap: getSpacer(m);
   }
 
   &--fill {
-    background-color: $neutral50;
+    background-color: palette.$neutral50;
   }
 
   &--fill#{&}--selected {
-    background-color: $neutral100;
+    background-color: palette.$neutral100;
   }
 
   &--fill#{&}--selected#{&}--clickable {
     &:hover {
-      background-color: $neutral200;
+      background-color: palette.$neutral200;
     }
   }
 
   &--white {
-    background-color: $white;
+    background-color: palette.$white;
   }
 
   &--fill#{&}--clickable,
   &--white#{&}--clickable {
-    @include hover-and-focus-effects($neutral100, $neutral600);
+    @include hover-and-focus-effects(palette.$neutral100, palette.$neutral600);
   }
 
   &--white#{&}--selected {
-    box-shadow: inset 0 0 0 6px $neutral100;
+    box-shadow: inset 0 0 0 6px palette.$neutral100;
   }
 
   &--stroke {
-    border: 6px solid $neutral100;
+    border: 6px solid palette.$neutral100;
   }
 
   &--stroke#{&}--clickable {
-    @include hover-and-focus-effects($neutral50, $neutral100);
+    @include hover-and-focus-effects(palette.$neutral50, palette.$neutral100);
 
     &:focus {
-      border-color: $neutral600;
+      border-color: palette.$neutral600;
     }
   }
 
   &--line {
-    background-color: $white;
-    border-color: $neutral500;
+    background-color: palette.$white;
+    border-color: palette.$neutral500;
     border-top: 1px solid;
     border-bottom: 1px solid;
   }
 
   &--line#{&}--clickable {
-    @include hover-and-focus-effects($neutral50, $neutral600);
+    @include hover-and-focus-effects(palette.$neutral50, palette.$neutral600);
   }
 
   &--line#{&}--selected {
-    background-color: $neutral50;
+    background-color: palette.$neutral50;
     border-bottom: 0;
   }
 
   &--line#{&}--selected#{&}--clickable {
     &:hover {
-      background-color: $neutral100;
+      background-color: palette.$neutral100;
     }
   }
 
@@ -316,26 +316,26 @@ $layout-md-col-gap: getSpacer(m);
 
   &--new {
     &::before {
-      border-left-color: $blueberry600;
+      border-left-color: palette.$blueberry600;
     }
   }
 
   &--draft {
     &::before {
       border-left-style: dashed;
-      border-left-color: $neutral500;
+      border-left-color: palette.$neutral500;
     }
   }
 
   &--error {
     &::before {
-      border-left-color: $cherry500;
+      border-left-color: palette.$cherry500;
     }
   }
 }
 
 .title-container {
-  padding-bottom: getSpacer(s);
+  padding-bottom: spacers.getSpacer(s);
 
   &--no-content-a {
     padding-bottom: 0;
@@ -346,7 +346,7 @@ $layout-md-col-gap: getSpacer(m);
     display: inline;
 
     &--badge {
-      padding-right: getSpacer(2xs);
+      padding-right: spacers.getSpacer(2xs);
     }
   }
 
@@ -358,7 +358,7 @@ $layout-md-col-gap: getSpacer(m);
 }
 
 .panel-details {
-  background-color: $neutral50;
+  background-color: palette.$neutral50;
   display: none;
 
   @include panel-padding;
@@ -374,30 +374,30 @@ $layout-md-col-gap: getSpacer(m);
   }
 
   &--line {
-    background: $white;
-    border-bottom: 1px solid $neutral500;
+    background: palette.$white;
+    border-bottom: 1px solid palette.$neutral500;
   }
 
   &--white {
-    background: $white;
+    background: palette.$white;
   }
 }
 
 .status-message {
-  font-size: $font-size-sm;
-  color: $cherry500;
+  font-size: font-settings.$font-size-sm;
+  color: palette.$cherry500;
   display: flex;
-  margin-bottom: getSpacer(2xs) * -1;
+  margin-bottom: spacers.getSpacer(2xs) * -1;
   grid-column: 1 / -1;
 
   span {
     padding-left: 5px;
     align-self: center;
-    font-size: $font-size-sm;
+    font-size: font-settings.$font-size-sm;
   }
 
   &--new {
-    color: $blueberry800;
+    color: palette.$blueberry800;
   }
 }
 
@@ -410,24 +410,24 @@ $layout-md-col-gap: getSpacer(m);
   flex-direction: column;
 
   @media (min-width: map.get($grid-breakpoints, lg)) {
-    padding-top: getSpacer(xs);
+    padding-top: spacers.getSpacer(xs);
     flex-direction: row;
   }
 
   &__icon {
     display: flex;
     align-items: center;
-    padding-bottom: getSpacer(2xs);
+    padding-bottom: spacers.getSpacer(2xs);
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
       padding-top: 0;
-      padding-right: getSpacer(m);
+      padding-right: spacers.getSpacer(m);
       padding-bottom: 0;
     }
 
     span {
-      padding-left: getSpacer(2xs);
-      font-size: $font-size-sm;
+      padding-left: spacers.getSpacer(2xs);
+      font-size: font-settings.$font-size-sm;
     }
   }
 }

package/components/PanelList/styles.module.scss

@@ -1,14 +1,14 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/breakpoints' as *;
 
 .panel-list {
   &__panel:not(:last-child) {
-    margin-bottom: getSpacer(2xs);
+    margin-bottom: spacers.getSpacer(2xs);
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      margin-bottom: getSpacer(s);
+      margin-bottom: spacers.getSpacer(s);
     }
   }
 }