@helsenorge/designsystem-react 10.2.0 → 10.3.0

package/components/HelpPanel/styles.module.scss

@@ -1,5 +1,5 @@
-@import '../../scss/palette';
+@use '../../scss/palette' as palette;
 
 .help-panel {
-  background-color: $plum50 !important;
+  background-color: palette.$plum50 !important;
 }

package/components/HelpQuestion/styles.module.scss

@@ -1,49 +1,49 @@
 @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 *;
 
 .helpquestion {
   display: inline-flex;
   align-items: center;
   text-align: left;
-  gap: getSpacer(2xs);
-  padding: getSpacer(xs) getSpacer(xs) getSpacer(xs) getSpacer(3xs);
+  gap: spacers.getSpacer(2xs);
+  padding: spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(3xs);
   border: 0;
   outline: none;
   background-color: transparent;
   cursor: pointer;
-  color: $plum600;
+  color: palette.$plum600;
   font-weight: 600;
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-xs;
+  font-size: font-settings.$font-size-sm;
+  line-height: font-settings.$lineheight-size-xs;
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    gap: getSpacer(2xs);
-    font-size: $font-size-md;
-    line-height: $lineheight-size-sm;
+    gap: spacers.getSpacer(2xs);
+    font-size: font-settings.$font-size-md;
+    line-height: font-settings.$lineheight-size-sm;
   }
 
   &:hover {
-    color: $plum800;
-    background-color: rgba($plum600, 0.1);
+    color: palette.$plum800;
+    background-color: rgba(palette.$plum600, 0.1);
   }
 
   &:focus-visible {
-    box-shadow: inset 0 0 0 3px $black;
+    box-shadow: inset 0 0 0 3px palette.$black;
   }
 
   &--selected {
-    color: $plum800;
-    background-color: rgba($plum600, 0.1);
+    color: palette.$plum800;
+    background-color: rgba(palette.$plum600, 0.1);
 
     &:hover {
-      background-color: rgba($plum600, 0.2);
+      background-color: rgba(palette.$plum600, 0.2);
     }
 
     &:focus-visible {
-      background-color: rgba($plum600, 0.1);
+      background-color: rgba(palette.$plum600, 0.1);
     }
   }
 }

package/components/HighlightPanel/styles.module.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/screen-reader' as *;
+@use '../../scss/breakpoints' as *;
 @import '../../scss/grid';
-@import '../../scss/screen-reader';
 @import '../../scss/supernova/styles/colors';
 
 @mixin content-wrapper-with-icon-flex {
@@ -17,7 +17,7 @@
 }
 
 @mixin content-wrapper-with-icon-padding {
-  padding-top: getSpacer(m);
+  padding-top: spacers.getSpacer(m);
 }
 
 .highlightpanel {
@@ -48,35 +48,35 @@
 
   &--large {
     #{$panel}__content-wrapper {
-      padding: getSpacer(m) getSpacer(s) getSpacer(l);
+      padding: spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l);
 
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding-top: getSpacer(l);
-        padding-bottom: getSpacer(xl);
+        padding-top: spacers.getSpacer(l);
+        padding-bottom: spacers.getSpacer(xl);
       }
     }
   }
 
   &--medium {
     #{$panel}__content-wrapper {
-      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);
       }
 
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding: getSpacer(l);
+        padding: spacers.getSpacer(l);
       }
     }
   }
 
   // fluid skal ha bakgrunnsfarge på den ytre containeren
   &--fluid {
-    padding: getSpacer(m) getSpacer(s) getSpacer(l);
+    padding: spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l);
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
-      padding: getSpacer(m) getSpacer(m) getSpacer(l);
+      padding: spacers.getSpacer(m) spacers.getSpacer(m) spacers.getSpacer(l);
     }
 
     @each $color in $colors {
@@ -98,7 +98,7 @@
       @include content-wrapper-with-icon-flex-responsive;
 
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding-left: getSpacer(m);
+        padding-left: spacers.getSpacer(m);
       }
     }
   }
@@ -112,17 +112,17 @@
       @include content-wrapper-with-icon-padding;
 
       @media (min-width: map.get($grid-breakpoints, sm)) {
-        padding-left: getSpacer(s);
+        padding-left: spacers.getSpacer(s);
       }
 
       @media (min-width: map.get($grid-breakpoints, md)) {
-        padding-left: getSpacer(m);
+        padding-left: spacers.getSpacer(m);
       }
 
       @media (min-width: map.get($grid-breakpoints, lg)) {
         padding-left: 0;
-        padding-top: getSpacer(l);
-        padding-bottom: getSpacer(xl);
+        padding-top: spacers.getSpacer(l);
+        padding-bottom: spacers.getSpacer(xl);
       }
     }
 
@@ -134,7 +134,7 @@
         display: flex;
         justify-content: flex-end;
         margin-right: 0;
-        padding-right: getSpacer(s);
+        padding-right: spacers.getSpacer(s);
       }
     }
 
@@ -160,8 +160,8 @@
 
   &__icon {
     display: inline-flex;
-    margin-right: getSpacer(s);
-    margin-bottom: getSpacer(2xs);
+    margin-right: spacers.getSpacer(s);
+    margin-bottom: spacers.getSpacer(2xs);
 
     @media (min-width: map.get($grid-breakpoints, md)) {
       margin-bottom: 0;

package/components/HorizontalScroll/styles.module.scss

@@ -1,5 +1,6 @@
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/breakpoints' as *;
 
 // Disables fordi stylelint og prettier er uenige
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
@@ -15,7 +16,7 @@ $gradient:
     display: flex;
 
     &:focus-visible {
-      outline: getSpacer(4xs) solid $black;
+      outline: spacers.getSpacer(4xs) solid palette.$black;
       outline-offset: -1px;
     }
 

package/components/Input/styles.module.scss

@@ -1,14 +1,14 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/input';
-@import '../../scss/font-mixins';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/input' as input;
+@use '../../scss/font-mixins' as fonts;
+@use '../../scss/breakpoints' as *;
 
 .input-wrapper {
-  @include input-wrapper;
+  @include input.input-wrapper;
 
-  margin: getSpacer(l) 0;
+  margin: spacers.getSpacer(l) 0;
 }
 
 .input-wrapper:first-of-type {
@@ -37,7 +37,7 @@
   padding: 0.5rem 0;
   align-items: center;
 
-  @include input-container;
+  @include input.input-container;
 
   &--with-icon {
     padding: 1px 0;
@@ -48,13 +48,13 @@
   }
 
   &--with-icon#{&}--large {
-    padding: getSpacer(2xs) 0;
+    padding: spacers.getSpacer(2xs) 0;
   }
 
   &__input {
-    @include input-text;
+    @include fonts.input-text;
 
-    height: getSpacer(m);
+    height: spacers.getSpacer(m);
 
     &--large {
       height: 2.5rem;
@@ -64,7 +64,7 @@
       height: 2.125rem;
 
       &--large {
-        @include input-text-large;
+        @include fonts.input-text-large;
 
         height: 3.5rem;
       }

package/components/Label/styles.module.scss

@@ -1,16 +1,16 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-settings';
-@import '../../scss/font-mixins';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/font-mixins' as fonts;
+@use '../../scss/breakpoints' as *;
 
 .label-wrapper {
-  margin-bottom: getSpacer(2xs);
-  line-height: $lineheight-size-xs;
+  margin-bottom: spacers.getSpacer(2xs);
+  line-height: font-settings.$lineheight-size-xs;
 
   @media (min-width: map.get($grid-breakpoints, sm)) {
-    line-height: $lineheight-size-sm;
+    line-height: font-settings.$lineheight-size-sm;
   }
 
   &--no-bottom-margin {
@@ -29,14 +29,14 @@
 }
 
 .label {
-  @include label;
+  @include fonts.label;
 
   &--subdued {
-    @include label-subdued;
+    @include fonts.label-subdued;
   }
 
   &--on-dark {
-    color: $white;
+    color: palette.$white;
   }
 
   &::after {
@@ -49,14 +49,14 @@
 }
 
 .sublabel {
-  @include sublabel;
+  @include fonts.sublabel;
 
   &--subdued {
-    @include sublabel-subdued;
+    @include fonts.sublabel-subdued;
   }
 
   &--on-dark {
-    color: $white;
+    color: palette.$white;
   }
 
   &::after {
@@ -65,5 +65,5 @@
 }
 
 .after-label-children {
-  padding-left: getSpacer(xs);
+  padding-left: spacers.getSpacer(xs);
 }

package/components/LinkList/styles.module.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/font-settings';
-@import '../../scss/palette';
+@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';
 
 .link-list {
@@ -22,42 +22,42 @@
 
     &--outline {
       &--white {
-        border-top: getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-left: getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-right: getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-top: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-left: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-right: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
 
         &:last-of-type {
-          border-bottom: getSpacer(2xs) var(--core-color-neutral-100) solid;
+          border-bottom: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
         }
       }
 
       &--blueberry {
-        border-top: getSpacer(2xs) var(--core-color-blueberry-100) solid;
-        border-left: getSpacer(2xs) var(--core-color-blueberry-100) solid;
-        border-right: getSpacer(2xs) var(--core-color-blueberry-100) solid;
+        border-top: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
+        border-left: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
+        border-right: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
 
         &:last-of-type {
-          border-bottom: getSpacer(2xs) var(--core-color-blueberry-100) solid;
+          border-bottom: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
         }
       }
 
       &--cherry {
-        border-top: getSpacer(2xs) var(--core-color-cherry-100) solid;
-        border-left: getSpacer(2xs) var(--core-color-cherry-100) solid;
-        border-right: getSpacer(2xs) var(--core-color-cherry-100) solid;
+        border-top: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
+        border-left: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
+        border-right: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
 
         &:last-of-type {
-          border-bottom: getSpacer(2xs) var(--core-color-cherry-100) solid;
+          border-bottom: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
         }
       }
 
       &--neutral {
-        border-top: getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-left: getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-right: getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-top: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-left: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-right: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
 
         &:last-of-type {
-          border-bottom: getSpacer(2xs) var(--core-color-neutral-100) solid;
+          border-bottom: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
         }
       }
     }
@@ -100,7 +100,7 @@
 
     &--fill,
     &--fill-negative {
-      margin-top: getSpacer(s);
+      margin-top: spacers.getSpacer(s);
     }
 
     &--fill-negative {
@@ -108,34 +108,34 @@
     }
 
     &--small {
-      font-size: $font-size-xs;
-      line-height: $lineheight-size-xs;
+      font-size: font-settings.$font-size-xs;
+      line-height: font-settings.$lineheight-size-xs;
     }
 
     &--medium {
-      font-size: $font-size-sm;
-      line-height: $lineheight-size-sm;
+      font-size: font-settings.$font-size-sm;
+      line-height: font-settings.$lineheight-size-sm;
     }
 
     &--large {
-      font-size: $font-size-md;
-      line-height: $lineheight-size-md;
+      font-size: font-settings.$font-size-md;
+      line-height: font-settings.$lineheight-size-md;
     }
 
     @media (min-width: map.get($grid-breakpoints, md)) {
       &--small {
-        font-size: $font-size-sm;
-        line-height: $lineheight-size-sm;
+        font-size: font-settings.$font-size-sm;
+        line-height: font-settings.$lineheight-size-sm;
       }
 
       &--medium {
-        font-size: $font-size-md;
-        line-height: $lineheight-size-md;
+        font-size: font-settings.$font-size-md;
+        line-height: font-settings.$lineheight-size-md;
       }
 
       &--large {
-        font-size: $font-size-lg;
-        line-height: $lineheight-size-lg;
+        font-size: font-settings.$font-size-lg;
+        line-height: font-settings.$lineheight-size-lg;
       }
     }
 

package/components/ListHeader/styles.module.scss

@@ -1,16 +1,16 @@
 @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 *;
 
 .list-header {
   display: grid;
   grid-template:
     'icon text badge chevron' 4rem
     '. text . .' auto / min-content auto min-content min-content;
-  column-gap: getSpacer(2xs);
-  margin-left: getSpacer(2xs);
-  margin-right: getSpacer(2xs);
+  column-gap: spacers.getSpacer(2xs);
+  margin-left: spacers.getSpacer(2xs);
+  margin-right: spacers.getSpacer(2xs);
   width: 100%;
   height: 100%;
   text-align: left;
@@ -38,12 +38,12 @@
     }
 
     &--spacing {
-      margin-left: getSpacer(2xs);
+      margin-left: spacers.getSpacer(2xs);
     }
 
     :focus > &,
     :focus-visible > & {
-      border-color: $black;
+      border-color: palette.$black;
     }
   }
 

package/components/Loader/styles.module.scss

@@ -1,6 +1,6 @@
-@import '../../scss/spacers';
-@import '../../scss/palette';
-@import '../../scss/screen-reader';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/screen-reader' as *;
 
 @mixin keyframes($name) {
   @keyframes #{$name} {
@@ -48,7 +48,7 @@
 
   &--inline {
     align-self: center;
-    padding-left: getSpacer(2xs);
+    padding-left: spacers.getSpacer(2xs);
   }
 
   &--overlay {
@@ -58,7 +58,7 @@
   }
 
   &--overlay-screen {
-    background: $transparent-grey;
+    background: palette.$transparent-grey;
     position: fixed;
     inset: 0;
   }
@@ -67,7 +67,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    background: $transparent-grey;
+    background: palette.$transparent-grey;
     height: 100%;
     width: 100%;
   }
@@ -102,7 +102,7 @@
     position: absolute;
     width: 8px;
     height: 8px;
-    background-color: $blueberry500;
+    background-color: palette.$blueberry500;
     border-radius: 50%;
 
     // Sets a form of easing animation curve
@@ -124,31 +124,31 @@
     }
 
     &--banana {
-      background-color: $banana500;
+      background-color: palette.$banana500;
     }
 
     &--cherry {
-      background-color: $cherry500;
+      background-color: palette.$cherry500;
     }
 
     &--kiwi {
-      background-color: $kiwi500;
+      background-color: palette.$kiwi500;
     }
 
     &--neutral {
-      background-color: $neutral500;
+      background-color: palette.$neutral500;
     }
 
     &--plum {
-      background-color: $plum500;
+      background-color: palette.$plum500;
     }
 
     &--black {
-      background-color: $black;
+      background-color: palette.$black;
     }
 
     &--white {
-      background-color: $white;
+      background-color: palette.$white;
     }
 
     // Scales up the first dot

package/components/MaxCharacters/styles.module.scss

@@ -1,28 +1,28 @@
 @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 *;
 
 .max-characters {
   display: flex;
   justify-content: flex-end;
-  padding-top: getSpacer(2xs);
+  padding-top: spacers.getSpacer(2xs);
   padding-right: 2px;
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
+  font-size: font-settings.$font-size-sm;
+  line-height: font-settings.$lineheight-size-sm;
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    line-height: $lineheight-size-md;
-    font-size: $font-size-md;
+    line-height: font-settings.$lineheight-size-md;
+    font-size: font-settings.$font-size-md;
   }
 
   &--on-dark {
-    color: $white;
+    color: palette.$white;
   }
 
   &--invalid {
-    color: $cherry600;
+    color: palette.$cherry600;
     font-weight: 600;
   }
 }