@helsenorge/designsystem-react 10.6.1 → 10.6.3

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

package/components/Step/styles.module.scss

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

package/components/StepButtons/styles.module.scss

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

package/components/Stepper/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/breakpoints' as breakpoints;
+@import '../../scss/breakpoints';
+@import '../../scss/spacers';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
 
 .stepper-wrapper {
   display: flex;
   align-items: center;
-  min-height: spacers.getSpacer(l);
+  min-height: getSpacer(l);
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    min-height: spacers.getSpacer(xl);
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    min-height: getSpacer(xl);
   }
 }
 
@@ -47,15 +47,7 @@ $dot-offset: calc($stepper-padding-x + $dot-size / 2);
   display: block;
   height: $stepper-height;
   border-radius: 4px;
-  background:
-    linear-gradient(
-      to right,
-      palette.$blueberry600,
-      palette.$blueberry600 $dot-offset,
-      palette.$blueberry50 $dot-offset,
-      palette.$blueberry50
-    ),
-    palette.$blueberry600;
+  background: linear-gradient(to right, $blueberry600, $blueberry600 $dot-offset, $blueberry50 $dot-offset, $blueberry50), $blueberry600;
   background-repeat: no-repeat;
 
   @media (prefers-reduced-motion: no-preference) {
@@ -67,8 +59,8 @@ $dot-offset: calc($stepper-padding-x + $dot-size / 2);
     width: $marker-size;
     height: $marker-size;
     top: calc(($stepper-height - $marker-size) / 2);
-    background-color: palette.$white;
-    border: 6px solid palette.$blueberry600;
+    background-color: $white;
+    border: 6px solid $blueberry600;
     border-radius: 50%;
 
     @media (prefers-reduced-motion: no-preference) {
@@ -79,11 +71,11 @@ $dot-offset: calc($stepper-padding-x + $dot-size / 2);
   &__number {
     min-width: 2.5rem;
     text-align: right;
-    margin-left: spacers.getSpacer(xs);
-    font-size: font-settings.$font-size-xs;
-    line-height: font-settings.$lineheight-size-xs;
+    margin-left: getSpacer(xs);
+    font-size: $font-size-xs;
+    line-height: $lineheight-size-xs;
     font-weight: 700;
-    color: palette.$blueberry700;
+    color: $blueberry700;
   }
 
   &__dot {
@@ -91,7 +83,7 @@ $dot-offset: calc($stepper-padding-x + $dot-size / 2);
     top: calc(($stepper-height - $dot-size) / 2);
     width: $dot-size;
     height: $dot-size;
-    background-color: palette.$blueberry600;
+    background-color: $blueberry600;
     border-radius: 50%;
 
     @media (prefers-reduced-motion: no-preference) {
@@ -99,7 +91,7 @@ $dot-offset: calc($stepper-padding-x + $dot-size / 2);
     }
 
     &--completed {
-      background-color: palette.$blueberry50;
+      background-color: $blueberry50;
     }
 
     &--left {

package/components/StickyNote/styles.module.scss

@@ -1,5 +1,5 @@
-@use '../../scss/font-settings' as font-settings;
-@import '../../scss/supernova/styles/colors.css';
+@use '../../scss/supernova/styles/colors' as *;
+@use '../../scss/font-settings' as fonts;
 
 .sticky-note {
   position: relative;
@@ -95,7 +95,7 @@
   &__error-text {
     color: var(--color-notification-status-error);
     line-height: 1.875rem;
-    font-size: font-settings.$font-size-sm;
+    font-size: fonts.$font-size-sm;
     margin-top: 0.75rem;
   }
 }

package/components/Table/styles.module.scss

@@ -1,10 +1,10 @@
 // Kan fjernes når konvensjonen for BEM er tillatt.
 /* stylelint-disable selector-class-pattern */
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-settings' as font-settings;
+@import '../../scss/spacers';
 @import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
 @import '../../scss/grid';
 
 /* fix outline for Safari */
@@ -72,7 +72,7 @@ table .table-body .table-row {
       top: 0;
       left: 0;
       width: 60%;
-      padding-right: spacers.$spacer;
+      padding-right: $spacer;
       white-space: normal;
       display: block;
       float: left;
@@ -85,7 +85,7 @@ table .table-body .table-row {
 
   .table__expander-cell-mobile {
     padding-left: 0.75rem;
-    border-bottom: 1px solid palette.$neutral500;
+    border-bottom: 1px solid $neutral500;
 
     &--expanded {
       border-bottom: 0;
@@ -99,7 +99,7 @@ table .table-body .table-row {
 
   .table__cell:first-child {
     border-collapse: collapse;
-    border-top: 1px solid palette.$neutral500;
+    border-top: 1px solid $neutral500;
   }
 
   .table__expanded-row {
@@ -117,7 +117,7 @@ table .table-body .table-row {
   .table__row--expandable {
     .table__cell:nth-child(2) {
       border-collapse: collapse;
-      border-top: 1px solid palette.$neutral500;
+      border-top: 1px solid $neutral500;
     }
 
     &:focus-within {
@@ -126,7 +126,7 @@ table .table-body .table-row {
   }
 
   .table-row:last-child .table__cell:last-child {
-    border-bottom: 1px solid palette.$neutral500;
+    border-bottom: 1px solid $neutral500;
   }
 }
 
@@ -153,10 +153,10 @@ table .table-body .table-row {
 }
 
 .table__head {
-  background: palette.$blueberry50;
+  background: $blueberry50;
 
   &--normal {
-    background: palette.$neutral50;
+    background: $neutral50;
   }
 
   &--transparent {
@@ -164,7 +164,7 @@ table .table-body .table-row {
   }
 
   &--sortable {
-    background: palette.$blueberry50;
+    background: $blueberry50;
   }
 
   @media (min-width: map.get($grid-breakpoints, lg)) {
@@ -184,46 +184,46 @@ table .table-body .table-row {
   // Fix for firefox hover feil
   background-clip: padding-box;
   height: 3.625rem;
-  font-size: font-settings.$font-size-sm;
-  line-height: font-settings.$lineheight-size-xs;
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-xs;
   text-align: left;
   vertical-align: bottom;
   font-weight: 700;
   padding: 0.5rem 0.75rem;
-  border: 1px solid palette.$neutral500;
+  border: 1px solid $neutral500;
 
   &--sortable {
     position: relative;
   }
 
   &--sortable:hover {
-    background-color: palette.$blueberry100;
+    background-color: $blueberry100;
     cursor: pointer;
   }
 
   &--sortable:focus-within {
-    outline: 3px solid palette.$black;
+    outline: 3px solid $black;
     outline-offset: -3px;
   }
 
   @media (min-width: map.get($grid-breakpoints, lg)) {
     padding: 1rem;
     height: 5.5rem;
-    font-size: font-settings.$font-size-md;
-    line-height: font-settings.$lineheight-size-sm;
+    font-size: $font-size-md;
+    line-height: $lineheight-size-sm;
     font-weight: 700;
   }
 
   &--compact {
-    padding: spacers.getSpacer(2xs) spacers.getSpacer(3xs) spacers.getSpacer(4xs);
+    padding: getSpacer(2xs) getSpacer(3xs) getSpacer(4xs);
     line-height: 18px;
     font-size: 14px;
     height: unset;
 
     @media (min-width: map.get($grid-breakpoints, sm)) {
-      padding: spacers.getSpacer(s) spacers.getSpacer(3xs) spacers.getSpacer(3xs);
+      padding: getSpacer(s) getSpacer(3xs) getSpacer(3xs);
       line-height: 20px;
-      font-size: font-settings.$font-size-xs;
+      font-size: $font-size-xs;
       height: unset;
     }
   }
@@ -235,11 +235,11 @@ table .table-body .table-row {
 
 .table__cell {
   height: 2, 375;
-  font-size: font-settings.$font-size-xs;
+  font-size: $font-size-xs;
   line-height: 1.5rem;
   padding: 0.5rem 0.75rem;
   text-align: left;
-  border: 1px solid palette.$neutral500;
+  border: 1px solid $neutral500;
 
   &--center {
     text-align: center;
@@ -256,17 +256,17 @@ table .table-body .table-row {
   @media (min-width: map.get($grid-breakpoints, lg)) {
     padding: 1rem;
     height: 3.625rem;
-    font-size: font-settings.$font-size-sm;
+    font-size: $font-size-sm;
     line-height: 1.75rem;
   }
 
   &--compact {
-    padding: spacers.getSpacer(4xs) spacers.getSpacer(3xs);
+    padding: getSpacer(4xs) getSpacer(3xs);
     font-size: 14px;
 
     @media (min-width: map.get($grid-breakpoints, sm)) {
-      padding: spacers.getSpacer(3xs);
-      font-size: font-settings.$font-size-xs;
+      padding: getSpacer(3xs);
+      font-size: $font-size-xs;
     }
   }
 }
@@ -274,18 +274,18 @@ table .table-body .table-row {
 .table__cell-expander {
   text-align: center;
   width: min-content;
-  padding: 0 spacers.getSpacer(3xs);
+  padding: 0 getSpacer(3xs);
   vertical-align: middle;
 }
 
 .table__row--expandable {
   &--selected {
-    background: palette.$neutral100;
+    background: $neutral100;
   }
 
   &:hover {
     cursor: pointer;
-    background: palette.$blueberry50;
+    background: $blueberry50;
   }
 }
 
@@ -301,7 +301,7 @@ table .table-body .table-row {
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
       &--open {
-        border-bottom: 1px solid palette.$neutral100;
+        border-bottom: 1px solid $neutral100;
       }
     }
   }

package/components/Tabs/TabList/styles.module.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../../../scss/breakpoints' as breakpoints;
 @import '../../../scss/supernova/styles/colors';
+@import '../../../scss/breakpoints';
 
 .tab-list {
   $tab-list: &;
@@ -25,7 +25,7 @@
     display: none; /* Safari */
   }
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     padding-left: 0;
     padding-right: 0;
 

package/components/Tabs/TabPanel/styles.module.scss

@@ -1,14 +1,14 @@
 @use 'sass:map';
-@use '../../../scss/spacers' as spacers;
-@use '../../../scss/palette' as palette;
-@use '../../../scss/breakpoints' as breakpoints;
+@import '../../../scss/spacers';
+@import '../../../scss/palette';
+@import '../../../scss/breakpoints';
 @import '../../../scss/supernova/styles/colors';
 
 .tab-panel {
   $tab-panel: &;
   $colors: 'blueberry', 'neutral', 'white';
 
-  padding: spacers.getSpacer(l) spacers.getSpacer(s) spacers.getSpacer(xl);
+  padding: getSpacer(l) getSpacer(s) getSpacer(xl);
   width: 100%;
   border-bottom: 1px solid var(--color-action-border-onlight-focus);
 
@@ -18,16 +18,16 @@
     }
   }
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     border-radius: 0 0 0.5rem 0.5rem;
     border: 1px solid var(--color-action-border-onlight-focus);
     border-top: 0;
-    padding: spacers.getSpacer(xl) spacers.getSpacer(m) spacers.getSpacer(2xl);
+    padding: getSpacer(xl) getSpacer(m) getSpacer(2xl);
 
     &#{$tab-panel}--first {
       border-radius: 0;
 
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      @media (min-width: map.get($grid-breakpoints, md)) {
         border-radius: 0 0 0.5rem 0.5rem;
       }
     }

package/components/Tabs/styles.module.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
+@import '../../scss/supernova/styles/colors';
+@import '../../scss/breakpoints';
 
 .tab-list-wrapper {
   position: relative;
@@ -21,7 +21,7 @@
   border-radius: 0;
   height: 50px;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     border-right: 1px solid var(--color-action-border-onlight-focus);
     border-left: 1px solid var(--color-action-border-onlight-focus);
     height: 50px;

package/components/Tag/styles.module.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
 
 .tag {
   $tag: &;
@@ -28,45 +28,45 @@
     &--#{$color}[type='button'] {
       // banana og kiwi har unntak fra hovedregelen
       @if $color == 'banana' {
-        color: map.get(palette.$palette-map, #{$color}900);
-        border-color: map.get(palette.$palette-map, #{$color}300);
+        color: map.get($palette-map, #{$color}900);
+        border-color: map.get($palette-map, #{$color}300);
       } @else if $color == 'kiwi' {
-        color: map.get(palette.$palette-map, #{$color}900);
-        border-color: map.get(palette.$palette-map, #{$color}200);
+        color: map.get($palette-map, #{$color}900);
+        border-color: map.get($palette-map, #{$color}200);
       } @else {
-        color: map.get(palette.$palette-map, #{$color}800);
-        border-color: map.get(palette.$palette-map, #{$color}200);
+        color: map.get($palette-map, #{$color}800);
+        border-color: map.get($palette-map, #{$color}200);
       }
 
       &#{$tag}--emphasised {
-        background-color: map.get(palette.$palette-map, #{$color}50);
+        background-color: map.get($palette-map, #{$color}50);
       }
     }
   }
 
   &--medium {
-    padding: 0 spacers.getSpacer(xs);
+    padding: 0 getSpacer(xs);
     min-height: 1.625rem;
 
     &#{$tag}--has-icon {
-      padding: 0 spacers.getSpacer(xs) 0 0.375rem;
+      padding: 0 getSpacer(xs) 0 0.375rem;
     }
 
     #{$tag}__icon {
-      margin-right: spacers.getSpacer(4xs);
+      margin-right: getSpacer(4xs);
     }
   }
 
   &--large {
-    padding: 0 spacers.getSpacer(xs);
+    padding: 0 getSpacer(xs);
     min-height: 1.875rem;
 
     &#{$tag}--has-icon {
-      padding: spacers.getSpacer(4xs) spacers.getSpacer(xs) spacers.getSpacer(4xs) 0.375rem;
+      padding: getSpacer(4xs) getSpacer(xs) getSpacer(4xs) 0.375rem;
     }
 
     #{$tag}__icon {
-      margin-right: spacers.getSpacer(4xs);
+      margin-right: getSpacer(4xs);
     }
   }
 }

package/components/TagList/styles.module.scss

@@ -1,13 +1,13 @@
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
 
 .tag-list {
   all: unset;
   display: inline-flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: spacers.getSpacer(2xs);
+  gap: getSpacer(2xs);
 
   &__item {
     all: unset;

package/components/Textarea/styles.module.scss

@@ -1,22 +1,22 @@
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-mixins' as fonts;
-@use '../../scss/input' as input;
-@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/input';
+@import '../../scss/font-mixins';
 
 .textarea {
-  @include input.input-wrapper;
+  @include input-wrapper;
 
   &--gutterBottom {
-    margin-bottom: spacers.getSpacer(s);
+    margin-bottom: getSpacer(s);
   }
 }
 
 .input-container {
-  @include input.input-container;
+  @include input-container;
 
   &__input {
-    @include fonts.input-text;
+    @include input-text;
 
     height: auto;
     padding: 16px;