@helsenorge/designsystem-react 10.2.0 → 10.3.0

package/components/ServiceMessage/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 *;
 @import '../../scss/grid';
 
 .service-message {
@@ -16,54 +16,54 @@
   }
 
   &--success {
-    background-color: $kiwi50;
+    background-color: palette.$kiwi50;
 
     &:hover {
-      background-color: rgba-to-rgb(rgba($kiwi500, 0.1), $kiwi50);
+      background-color: rgba-to-rgb(rgba(palette.$kiwi500, 0.1), palette.$kiwi50);
     }
 
     &#{$servicemessage},
     &#{$servicemessage}__label-container {
-      border-color: $kiwi900;
+      border-color: palette.$kiwi900;
     }
   }
 
   &--info {
-    background-color: $blueberry50;
+    background-color: palette.$blueberry50;
 
     &:hover {
-      background-color: rgba-to-rgb(rgba($blueberry500, 0.1), $blueberry50);
+      background-color: rgba-to-rgb(rgba(palette.$blueberry500, 0.1), palette.$blueberry50);
     }
 
     &#{$servicemessage},
     &#{$servicemessage}__label-container {
-      border-color: $blueberry700;
+      border-color: palette.$blueberry700;
     }
   }
 
   &--warn {
-    background-color: $banana50;
+    background-color: palette.$banana50;
 
     &:hover {
-      background-color: rgba-to-rgb(rgba($banana500, 0.1), $banana50);
+      background-color: rgba-to-rgb(rgba(palette.$banana500, 0.1), palette.$banana50);
     }
 
     &#{$servicemessage},
     &#{$servicemessage}__label-container {
-      border-color: $banana700;
+      border-color: palette.$banana700;
     }
   }
 
   &--error {
-    background-color: $cherry50;
+    background-color: palette.$cherry50;
 
     &:hover {
-      background-color: rgba-to-rgb(rgba($cherry500, 0.1), $cherry50);
+      background-color: rgba-to-rgb(rgba(palette.$cherry500, 0.1), palette.$cherry50);
     }
 
     &#{$servicemessage},
     &#{$servicemessage}__label-container {
-      border-color: $cherry700;
+      border-color: palette.$cherry700;
     }
   }
 
@@ -83,16 +83,16 @@
 
   &__label-container {
     position: relative;
-    padding-top: getSpacer(3xs);
-    padding-bottom: getSpacer(3xs);
+    padding-top: spacers.getSpacer(3xs);
+    padding-bottom: spacers.getSpacer(3xs);
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
-      padding-top: getSpacer(2xs);
-      padding-bottom: getSpacer(2xs);
+      padding-top: spacers.getSpacer(2xs);
+      padding-bottom: spacers.getSpacer(2xs);
     }
 
     &--has-expander:has(:focus-visible) {
-      box-shadow: inset 0 0 0 2px $black;
+      box-shadow: inset 0 0 0 2px palette.$black;
     }
   }
 
@@ -100,21 +100,21 @@
     display: flex;
     width: 100%;
     align-items: center;
-    gap: getSpacer(2xs);
+    gap: spacers.getSpacer(2xs);
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      gap: getSpacer(m);
+      gap: spacers.getSpacer(m);
     }
   }
 
   &__title {
     width: 100%;
     font-weight: 700;
-    font-size: $font-size-xs;
+    font-size: font-settings.$font-size-xs;
     line-height: 1.25rem;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      font-size: $font-size-sm;
+      font-size: font-settings.$font-size-sm;
     }
   }
 
@@ -130,43 +130,43 @@
   }
 
   &__content {
-    margin-left: calc(38px + getSpacer(2xs));
-    margin-right: calc(38px + getSpacer(2xs));
-    padding-top: getSpacer(xs);
-    padding-bottom: getSpacer(xs);
+    margin-left: calc(38px + spacers.getSpacer(2xs));
+    margin-right: calc(38px + spacers.getSpacer(2xs));
+    padding-top: spacers.getSpacer(xs);
+    padding-bottom: spacers.getSpacer(xs);
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      margin-left: calc(38px + getSpacer(m));
-      margin-right: calc(38px + getSpacer(m));
+      margin-left: calc(38px + spacers.getSpacer(m));
+      margin-right: calc(38px + spacers.getSpacer(m));
     }
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
-      margin-left: calc(48px + getSpacer(m));
-      margin-right: calc(48px + getSpacer(m));
-      padding-top: getSpacer(2xs);
-      padding-bottom: getSpacer(s);
+      margin-left: calc(48px + spacers.getSpacer(m));
+      margin-right: calc(48px + spacers.getSpacer(m));
+      padding-top: spacers.getSpacer(2xs);
+      padding-bottom: spacers.getSpacer(s);
     }
   }
 
   &__info {
-    font-size: $font-size-xs;
+    font-size: font-settings.$font-size-xs;
     line-height: 1.25rem;
     margin: 0;
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
-      margin-top: getSpacer(xs);
+      margin-top: spacers.getSpacer(xs);
       line-height: 1.625rem;
-      font-size: $font-size-sm;
+      font-size: font-settings.$font-size-sm;
     }
 
     &--extra {
       font-size: 0.875rem;
-      margin-top: getSpacer(2xs);
+      margin-top: spacers.getSpacer(2xs);
 
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        margin-top: getSpacer(xs);
-        font-size: $font-size-xs;
-        line-height: $lineheight-size-xs;
+        margin-top: spacers.getSpacer(xs);
+        font-size: font-settings.$font-size-xs;
+        line-height: font-settings.$lineheight-size-xs;
       }
     }
   }
@@ -175,15 +175,15 @@
     display: flex;
     justify-content: space-between;
     flex-flow: column wrap;
-    gap: getSpacer(2xs);
-    margin-top: getSpacer(2xs);
+    gap: spacers.getSpacer(2xs);
+    margin-top: spacers.getSpacer(2xs);
 
     @media (min-width: map.get($grid-breakpoints, sm)) {
       flex-direction: row;
     }
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
-      margin-top: getSpacer(s);
+      margin-top: spacers.getSpacer(s);
     }
   }
 
@@ -192,15 +192,15 @@
     align-items: center;
     border: none;
     width: fit-content;
-    color: $blueberry700;
+    color: palette.$blueberry700;
     font-weight: 600;
-    font-size: $font-size-xs;
+    font-size: font-settings.$font-size-xs;
     line-height: 1.25rem;
     background-color: transparent;
     text-decoration: none;
     padding: 0.5rem;
     margin-left: -0.5rem;
-    gap: getSpacer(xs);
+    gap: spacers.getSpacer(xs);
 
     &:hover,
     &:active {
@@ -208,7 +208,7 @@
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 2px $black;
+      box-shadow: 0 0 0 2px palette.$black;
       background-color: transparent;
       border: 0;
       outline: none;

package/components/SharingStatus/styles.module.scss

@@ -1,19 +1,19 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-settings';
-@import '../../scss/screen-reader';
+@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 *;
 
 $dot-size: 1.765rem;
 
 .sharing-status {
   display: inline-flex;
   align-items: center;
-  font-size: $font-size-sm;
+  font-size: font-settings.$font-size-sm;
   line-height: 1.25rem;
   font-weight: 600;
-  gap: getSpacer(2xs);
+  gap: spacers.getSpacer(2xs);
 
   &__dot {
     display: inline-flex;
@@ -26,15 +26,15 @@ $dot-size: 1.765rem;
     min-height: $dot-size;
 
     &--kiwi {
-      background: $kiwi900;
+      background: palette.$kiwi900;
     }
 
     &--cherry {
-      background: $cherry500;
+      background: palette.$cherry500;
     }
 
     &--neutral {
-      background: $neutral700;
+      background: palette.$neutral700;
     }
   }
 
@@ -46,15 +46,15 @@ $dot-size: 1.765rem;
     }
 
     &--kiwi {
-      color: $kiwi900;
+      color: palette.$kiwi900;
     }
 
     &--cherry {
-      color: $cherry500;
+      color: palette.$cherry500;
     }
 
     &--neutral {
-      color: $neutral700;
+      color: palette.$neutral700;
     }
   }
 }

package/components/Slider/styles.module.scss

@@ -1,11 +1,11 @@
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/screen-reader';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/screen-reader' as *;
+@use '../../scss/breakpoints' as *;
 @import '../../scss/supernova/styles/colors';
 
 $track-height-offset: 1rem;
-$mark-size: getSpacer(l);
+$mark-size: spacers.getSpacer(l);
 
 .sr-only-slider {
   @include sr-only;
@@ -14,7 +14,7 @@ $mark-size: getSpacer(l);
 .slider {
   display: flex;
   flex-direction: column;
-  row-gap: getSpacer(s);
+  row-gap: spacers.getSpacer(s);
   width: 100%;
   position: relative;
   outline: none !important;
@@ -26,8 +26,8 @@ $mark-size: getSpacer(l);
   &__content-container {
     display: flex;
     flex-direction: column;
-    row-gap: getSpacer(s);
-    padding: 0 getSpacer(s);
+    row-gap: spacers.getSpacer(s);
+    padding: 0 spacers.getSpacer(s);
   }
 
   &__emoji-container,
@@ -58,23 +58,23 @@ $mark-size: getSpacer(l);
   }
 
   &__track {
-    padding: 0 getSpacer(s);
-    border-top: 2px solid $black;
+    padding: 0 spacers.getSpacer(s);
+    border-top: 2px solid palette.$black;
     position: relative;
     top: $track-height-offset;
 
     &--disabled {
-      border-color: $neutral600;
+      border-color: palette.$neutral600;
     }
 
     &__step {
       position: absolute;
       left: -1px;
       width: 2px;
-      height: getSpacer(xs);
+      height: spacers.getSpacer(xs);
       bottom: 0;
       top: (calc($track-height-offset / 2) * -1) + 0.05rem;
-      background-color: $black;
+      background-color: palette.$black;
     }
   }
 
@@ -84,8 +84,8 @@ $mark-size: getSpacer(l);
     align-items: center;
     width: $mark-size;
     height: $mark-size;
-    background-color: $white;
-    border: 0.15rem solid $black;
+    background-color: palette.$white;
+    border: 0.15rem solid palette.$black;
     border-radius: 10rem;
     position: absolute;
     z-index: 9;
@@ -93,12 +93,12 @@ $mark-size: getSpacer(l);
     cursor: pointer;
 
     &--focused {
-      outline: 0.15rem solid $black;
+      outline: 0.15rem solid palette.$black;
     }
 
     &--focused#{&}--selected {
       &::after {
-        background-color: $blueberry700;
+        background-color: palette.$blueberry700;
       }
     }
 
@@ -107,12 +107,12 @@ $mark-size: getSpacer(l);
         content: '';
         width: 1.25rem;
         height: 1.25rem;
-        border: 0.1rem solid $black;
+        border: 0.1rem solid palette.$black;
         border-radius: 10rem;
-        background-color: $blueberry600;
+        background-color: palette.$blueberry600;
 
         :hover > & {
-          background-color: $blueberry700;
+          background-color: palette.$blueberry700;
         }
       }
     }
@@ -122,15 +122,15 @@ $mark-size: getSpacer(l);
     }
 
     &--disabled {
-      border-color: $neutral500;
+      border-color: palette.$neutral500;
       cursor: default;
 
       &::after {
-        border-color: $neutral500;
-        background-color: $neutral200;
+        border-color: palette.$neutral500;
+        background-color: palette.$neutral200;
 
         :hover > & {
-          background-color: $neutral200;
+          background-color: palette.$neutral200;
         }
       }
     }

package/components/Spacer/styles.module.scss

@@ -1,4 +1,4 @@
-@import '../../scss/spacers';
+@use '../../scss/spacers' as spacers;
 
 .spacer {
   display: block;
@@ -6,54 +6,54 @@
   height: 0.125rem;
 
   &--4xs {
-    height: getSpacer(4xs);
+    height: spacers.getSpacer(4xs);
   }
 
   &--3xs {
-    height: getSpacer(3xs);
+    height: spacers.getSpacer(3xs);
   }
 
   &--2xs {
-    height: getSpacer(2xs);
+    height: spacers.getSpacer(2xs);
   }
 
   &--xs {
-    height: getSpacer(xs);
+    height: spacers.getSpacer(xs);
   }
 
   &--s {
-    height: getSpacer(s);
+    height: spacers.getSpacer(s);
   }
 
   &--m {
-    height: getSpacer(m);
+    height: spacers.getSpacer(m);
   }
 
   &--l {
-    height: getSpacer(l);
+    height: spacers.getSpacer(l);
   }
 
   &--xl {
-    height: getSpacer(xl);
+    height: spacers.getSpacer(xl);
   }
 
   &--2xl {
-    height: getSpacer(2xl);
+    height: spacers.getSpacer(2xl);
   }
 
   &--3xl {
-    height: getSpacer(3xl);
+    height: spacers.getSpacer(3xl);
   }
 
   &--4xl {
-    height: getSpacer(4xl);
+    height: spacers.getSpacer(4xl);
   }
 
   &--5xl {
-    height: getSpacer(5xl);
+    height: spacers.getSpacer(5xl);
   }
 
   &--6xl {
-    height: getSpacer(6xl);
+    height: spacers.getSpacer(6xl);
   }
 }

package/components/StatusDot/styles.module.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-settings';
-@import '../../scss/screen-reader';
+@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 *;
 
 $status-dot-size: 0.937rem;
 
@@ -11,17 +11,17 @@ $status-dot-size: 0.937rem;
   position: relative;
   display: inline-flex;
   align-items: flex-start;
-  font-size: $font-size-xs;
+  font-size: font-settings.$font-size-xs;
   line-height: 1.4rem;
   font-weight: 400;
 
   @media (min-width: map.get($grid-breakpoints, sm)) {
-    font-size: $font-size-sm;
+    font-size: font-settings.$font-size-sm;
     line-height: 1.6rem;
   }
 
   &--cancelled {
-    color: $cherry600;
+    color: palette.$cherry600;
   }
 
   &__dot {
@@ -29,8 +29,8 @@ $status-dot-size: 0.937rem;
     align-items: center;
     justify-content: center;
     position: relative;
-    top: getSpacer(4xs);
-    margin-right: getSpacer(2xs);
+    top: spacers.getSpacer(4xs);
+    margin-right: spacers.getSpacer(2xs);
     border-radius: 10rem;
     width: $status-dot-size;
     height: $status-dot-size;
@@ -38,44 +38,44 @@ $status-dot-size: 0.937rem;
     min-height: $status-dot-size;
 
     @media (min-width: map.get($grid-breakpoints, sm)) {
-      top: getSpacer(3xs);
+      top: spacers.getSpacer(3xs);
     }
 
     &--info {
-      background: $kiwi900;
+      background: palette.$kiwi900;
     }
     &--info#{&}--on-dark {
-      background: $kiwi400;
+      background: palette.$kiwi400;
     }
 
     &--warning {
-      background: $banana400;
+      background: palette.$banana400;
     }
 
     &--alert,
     &--cancelled {
-      background: $cherry500;
+      background: palette.$cherry500;
     }
     &--alert#{&}--on-dark {
-      background: $cherry300;
+      background: palette.$cherry300;
     }
     &--cancelled#{&}--on-dark {
-      outline: 2px solid $white;
+      outline: 2px solid palette.$white;
     }
 
     &--active {
-      background: $blueberry500;
+      background: palette.$blueberry500;
     }
     &--active#{&}--on-dark {
-      background: $blueberry300;
+      background: palette.$blueberry300;
     }
 
     &--transparent {
-      border: 2px solid $neutral600;
+      border: 2px solid palette.$neutral600;
     }
     &--transparent#{&}--on-dark {
       border: none;
-      background: $white;
+      background: palette.$white;
     }
 
     svg {
@@ -85,7 +85,7 @@ $status-dot-size: 0.937rem;
 
   &__label {
     &--on-dark {
-      color: $white;
+      color: palette.$white;
     }
   }
 }

package/components/Step/styles.module.scss

@@ -1,12 +1,12 @@
 @use 'sass:map';
-@import '../../scss/spacers';
+@use '../../scss/spacers' as spacers;
 
 .step {
   &__stepper {
-    margin-bottom: getSpacer(m);
+    margin-bottom: spacers.getSpacer(m);
   }
 
   &__content {
-    margin-bottom: getSpacer(s);
+    margin-bottom: spacers.getSpacer(s);
   }
 }

package/components/StepButtons/styles.module.scss

@@ -1,25 +1,25 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/screen-reader';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/screen-reader' as *;
+@use '../../scss/breakpoints' as *;
 
 .stepbuttons {
-  margin-top: getSpacer(m);
-  margin-bottom: getSpacer(s);
+  margin-top: spacers.getSpacer(m);
+  margin-bottom: spacers.getSpacer(s);
   display: flex;
   flex-wrap: wrap;
-  gap: getSpacer(m) getSpacer(l);
+  gap: spacers.getSpacer(m) spacers.getSpacer(l);
 
   &--has-sticky-buttons {
-    background-color: $white;
+    background-color: palette.$white;
     position: sticky;
     bottom: 0;
   }
 
   &__buttons {
     display: flex;
-    gap: getSpacer(s);
+    gap: spacers.getSpacer(s);
 
     @media (max-width: map.get($grid-max-breakpoints, xs)) {
       width: 100%;