@helsenorge/designsystem-react 10.6.1 → 10.6.3

package/components/ExpanderList/styles.module.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/font-settings';
+@import '../../scss/supernova/styles/colors';
 
 .expander-list {
   list-style: none;
@@ -46,42 +46,42 @@
       background-color: var(--color-base-background-white);
 
       &--white {
-        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;
+        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;
 
         &:last-of-type {
-          border-bottom: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+          border-bottom: getSpacer(2xs) var(--core-color-neutral-100) solid;
         }
       }
 
       &--blueberry {
-        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;
+        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;
 
         &:last-of-type {
-          border-bottom: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
+          border-bottom: getSpacer(2xs) var(--core-color-blueberry-100) solid;
         }
       }
 
       &--cherry {
-        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;
+        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;
 
         &:last-of-type {
-          border-bottom: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
+          border-bottom: getSpacer(2xs) var(--core-color-cherry-100) solid;
         }
       }
 
       &--neutral {
-        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;
+        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;
 
         &:last-of-type {
-          border-bottom: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+          border-bottom: getSpacer(2xs) var(--core-color-neutral-100) solid;
         }
       }
     }
@@ -117,8 +117,8 @@
 .expander-list-link {
   padding: 0;
   position: relative;
-  font-size: font-settings.$font-size-sm;
-  line-height: font-settings.$lineheight-size-sm;
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
   display: flex;
   cursor: pointer;
   font-family: inherit;
@@ -131,9 +131,9 @@
   width: 100%;
   outline: none;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    font-size: font-settings.$font-size-md;
-    line-height: font-settings.$lineheight-size-md;
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    font-size: $font-size-md;
+    line-height: $lineheight-size-md;
   }
 
   &--open {
@@ -142,7 +142,7 @@
 
   &--fill,
   &--fill-negative {
-    margin-top: spacers.getSpacer(s);
+    margin-top: getSpacer(s);
   }
 
   &--fill-negative {
@@ -150,7 +150,7 @@
   }
 
   &--closed#{&}--fill {
-    margin-bottom: spacers.getSpacer(s);
+    margin-bottom: getSpacer(s);
   }
 
   &:focus-visible:not(.expander-list-link--outline) {
@@ -237,21 +237,21 @@
   }
 
   &--large {
-    font-size: font-settings.$font-size-lg;
-    line-height: font-settings.$lineheight-size-lg;
+    font-size: $font-size-lg;
+    line-height: $lineheight-size-lg;
   }
 
   &__icon {
     display: flex;
     align-items: center;
-    margin-right: spacers.getSpacer(2xs);
+    margin-right: getSpacer(2xs);
   }
 
   &__chevron {
     display: flex;
     align-items: center;
     margin-left: auto;
-    padding-left: spacers.getSpacer(2xs);
+    padding-left: getSpacer(2xs);
   }
 
   &__main-content {
@@ -267,7 +267,7 @@
     }
 
     &--padding {
-      padding: spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(l);
+      padding: getSpacer(xs) getSpacer(s) getSpacer(l);
     }
   }
 }

package/components/EyebrowHeader/styles.module.scss

@@ -1,3 +1,5 @@
+@import '../../scss/spacers';
+
 .subtitle {
   margin: 0;
 }

package/components/FormGroup/styles.module.scss

@@ -1,12 +1,12 @@
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-mixins' as fonts;
-@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-mixins';
 
 .form-group-wrapper {
   &__title {
     &--on-dark {
-      color: palette.$white;
+      color: $white;
     }
   }
 }
@@ -21,20 +21,20 @@
   margin: 0;
   display: flex;
   flex-flow: column;
-  gap: spacers.getSpacer(s);
+  gap: getSpacer(s);
 
   > div {
     padding-bottom: 0;
   }
 
   &__legend {
-    margin-bottom: spacers.getSpacer(m);
+    margin-bottom: getSpacer(m);
     margin-top: 0;
 
-    @include fonts.legend;
+    @include legend;
 
     &--on-dark {
-      color: palette.$white;
+      color: $white;
     }
   }
 }

package/components/FormLayout/styles.module.scss

@@ -1,15 +1,16 @@
-@use '../../scss/spacers' as spacers;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
 
 .form-layout-container {
-  // Settes med harde verdier fordi calc() lenger nede ikke støtter spacers.getSpacer()
+  // Settes med harde verdier fordi calc() lenger nede ikke støtter getSpacer()
   --column-gap: 2rem;
 
   display: flex;
   flex-wrap: wrap;
-  gap: spacers.getSpacer(s) var(--column-gap);
+  gap: getSpacer(s) var(--column-gap);
 
   &--large {
-    row-gap: spacers.getSpacer(2xs);
+    row-gap: getSpacer(2xs);
   }
 }
 

package/components/HelpBubble/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 '../AnchorLink/styles.module' as anchorlink;
-@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
+@import '../AnchorLink/styles.module';
 
 .helpbubble {
   $bubble: &;
@@ -12,12 +12,12 @@
   align-items: flex-start !important;
   text-align: start;
   font-family: inherit;
-  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, lg)) {
-    font-size: font-settings.$font-size-md;
-    line-height: font-settings.$lineheight-size-md;
+  @media (min-width: map.get($grid-breakpoints, lg)) {
+    font-size: $font-size-md;
+    line-height: $lineheight-size-md;
   }
 
   &__content {
@@ -26,8 +26,8 @@
     flex-direction: column;
     align-items: flex-start;
     overflow-wrap: anywhere;
-    row-gap: spacers.getSpacer(2xs);
-    padding: spacers.getSpacer(s) spacers.getSpacer(s) spacers.getSpacer(m);
+    row-gap: getSpacer(2xs);
+    padding: getSpacer(s) getSpacer(s) getSpacer(m);
 
     &--close {
       padding-right: 0;
@@ -41,11 +41,11 @@
   &__link {
     all: unset;
 
-    @include anchorlink.anchorlink;
+    @include anchorlink;
   }
 
   &__close {
     order: 2;
-    padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) 0 0;
+    padding: getSpacer(2xs) getSpacer(2xs) 0 0;
   }
 }

package/components/HelpPanel/styles.module.scss

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

package/components/HelpQuestion/styles.module.scss

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

package/components/HighlightPanel/styles.module.scss

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

package/components/HorizontalScroll/styles.module.scss

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

package/components/Input/styles.module.scss

@@ -1,14 +1,14 @@
 @use 'sass:map';
-@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 breakpoints;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/input';
+@import '../../scss/font-mixins';
 
 .input-wrapper {
-  @include input.input-wrapper;
+  @include input-wrapper;
 
-  margin: spacers.getSpacer(l) 0;
+  margin: getSpacer(l) 0;
 }
 
 .input-wrapper:first-of-type {
@@ -37,34 +37,34 @@
   padding: 0.5rem 0;
   align-items: center;
 
-  @include input.input-container;
+  @include input-container;
 
   &--with-icon {
     padding: 1px 0;
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       padding: 0.375rem 0;
     }
   }
 
   &--with-icon#{&}--large {
-    padding: spacers.getSpacer(2xs) 0;
+    padding: getSpacer(2xs) 0;
   }
 
   &__input {
-    @include fonts.input-text;
+    @include input-text;
 
-    height: spacers.getSpacer(m);
+    height: getSpacer(m);
 
     &--large {
       height: 2.5rem;
     }
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       height: 2.125rem;
 
       &--large {
-        @include fonts.input-text-large;
+        @include input-text-large;
 
         height: 3.5rem;
       }

package/components/Label/styles.module.scss

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