@helsenorge/designsystem-react 10.2.0 → 10.3.0

package/components/Stepper/styles.module.scss

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

package/components/StickyNote/styles.module.scss

@@ -1,5 +1,5 @@
-@use '../../scss/supernova/styles/colors' as *;
-@use '../../scss/font-settings' as fonts;
+@use '../../scss/font-settings' as font-settings;
+@import '../../scss/supernova/styles/colors';
 
 .sticky-note {
   position: relative;
@@ -95,7 +95,7 @@
   &__error-text {
     color: var(--color-notification-status-error);
     line-height: 1.875rem;
-    font-size: fonts.$font-size-sm;
+    font-size: font-settings.$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';
-@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 *;
 @import '../../scss/grid';
 
 /* fix outline for Safari */
@@ -72,7 +72,7 @@ table .table-body .table-row {
       top: 0;
       left: 0;
       width: 60%;
-      padding-right: $spacer;
+      padding-right: spacers.$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 $neutral500;
+    border-bottom: 1px solid palette.$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 $neutral500;
+    border-top: 1px solid palette.$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 $neutral500;
+      border-top: 1px solid palette.$neutral500;
     }
 
     &:focus-within {
@@ -126,7 +126,7 @@ table .table-body .table-row {
   }
 
   .table-row:last-child .table__cell:last-child {
-    border-bottom: 1px solid $neutral500;
+    border-bottom: 1px solid palette.$neutral500;
   }
 }
 
@@ -153,10 +153,10 @@ table .table-body .table-row {
 }
 
 .table__head {
-  background: $blueberry50;
+  background: palette.$blueberry50;
 
   &--normal {
-    background: $neutral50;
+    background: palette.$neutral50;
   }
 
   &--transparent {
@@ -164,7 +164,7 @@ table .table-body .table-row {
   }
 
   &--sortable {
-    background: $blueberry50;
+    background: palette.$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-size-sm;
-  line-height: $lineheight-size-xs;
+  font-size: font-settings.$font-size-sm;
+  line-height: font-settings.$lineheight-size-xs;
   text-align: left;
   vertical-align: bottom;
   font-weight: 700;
   padding: 0.5rem 0.75rem;
-  border: 1px solid $neutral500;
+  border: 1px solid palette.$neutral500;
 
   &--sortable {
     position: relative;
   }
 
   &--sortable:hover {
-    background-color: $blueberry100;
+    background-color: palette.$blueberry100;
     cursor: pointer;
   }
 
   &--sortable:focus-within {
-    outline: 3px solid $black;
+    outline: 3px solid palette.$black;
     outline-offset: -3px;
   }
 
   @media (min-width: map.get($grid-breakpoints, lg)) {
     padding: 1rem;
     height: 5.5rem;
-    font-size: $font-size-md;
-    line-height: $lineheight-size-sm;
+    font-size: font-settings.$font-size-md;
+    line-height: font-settings.$lineheight-size-sm;
     font-weight: 700;
   }
 
   &--compact {
-    padding: getSpacer(2xs) getSpacer(3xs) getSpacer(4xs);
+    padding: spacers.getSpacer(2xs) spacers.getSpacer(3xs) spacers.getSpacer(4xs);
     line-height: 18px;
     font-size: 14px;
     height: unset;
 
     @media (min-width: map.get($grid-breakpoints, sm)) {
-      padding: getSpacer(s) getSpacer(3xs) getSpacer(3xs);
+      padding: spacers.getSpacer(s) spacers.getSpacer(3xs) spacers.getSpacer(3xs);
       line-height: 20px;
-      font-size: $font-size-xs;
+      font-size: font-settings.$font-size-xs;
       height: unset;
     }
   }
@@ -235,11 +235,11 @@ table .table-body .table-row {
 
 .table__cell {
   height: 2, 375;
-  font-size: $font-size-xs;
+  font-size: font-settings.$font-size-xs;
   line-height: 1.5rem;
   padding: 0.5rem 0.75rem;
   text-align: left;
-  border: 1px solid $neutral500;
+  border: 1px solid palette.$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-size-sm;
+    font-size: font-settings.$font-size-sm;
     line-height: 1.75rem;
   }
 
   &--compact {
-    padding: getSpacer(4xs) getSpacer(3xs);
+    padding: spacers.getSpacer(4xs) spacers.getSpacer(3xs);
     font-size: 14px;
 
     @media (min-width: map.get($grid-breakpoints, sm)) {
-      padding: getSpacer(3xs);
-      font-size: $font-size-xs;
+      padding: spacers.getSpacer(3xs);
+      font-size: font-settings.$font-size-xs;
     }
   }
 }
@@ -274,18 +274,18 @@ table .table-body .table-row {
 .table__cell-expander {
   text-align: center;
   width: min-content;
-  padding: 0 getSpacer(3xs);
+  padding: 0 spacers.getSpacer(3xs);
   vertical-align: middle;
 }
 
 .table__row--expandable {
   &--selected {
-    background: $neutral100;
+    background: palette.$neutral100;
   }
 
   &:hover {
     cursor: pointer;
-    background: $blueberry50;
+    background: palette.$blueberry50;
   }
 }
 
@@ -301,7 +301,7 @@ table .table-body .table-row {
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
       &--open {
-        border-bottom: 1px solid $neutral100;
+        border-bottom: 1px solid palette.$neutral100;
       }
     }
   }

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

@@ -1,6 +1,6 @@
 @use 'sass:map';
+@use '../../../scss/breakpoints' as *;
 @import '../../../scss/supernova/styles/colors';
-@import '../../../scss/breakpoints';
 
 .tab-list {
   $tab-list: &;

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

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

package/components/Tabs/styles.module.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
+@use '../../scss/breakpoints' as *;
 @import '../../scss/supernova/styles/colors';
-@import '../../scss/breakpoints';
 
 .tab-list-wrapper {
   position: relative;

package/components/Tag/styles.module.scss

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

package/components/TagList/styles.module.scss

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

package/components/Textarea/styles.module.scss

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

package/components/Tile/styles.module.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
-@import '../../scss/font-settings';
-@import '../../scss/palette';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/screen-reader';
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/palette' as palette;
+@use '../../scss/spacers' as spacers;
+@use '../../scss/screen-reader' as *;
+@use '../../scss/breakpoints' as *;
 @import '../../scss/supernova/styles/colors';
 
 .tile {
@@ -12,23 +12,23 @@
 
   display: flex;
   width: inherit;
-  padding: getSpacer(2xs) getSpacer(2xs) getSpacer(xs);
+  padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(xs);
   flex-direction: column;
   justify-content: center;
   background-color: var(--core-color-white);
-  color: $black;
+  color: palette.$black;
   text-decoration: none;
   cursor: pointer;
   border: 1px solid var(--color-base-border-blueberry);
   outline: none;
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    padding: getSpacer(l) getSpacer(m) getSpacer(l) getSpacer(s);
+    padding: spacers.getSpacer(l) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(s);
     justify-content: flex-start;
   }
 
   @media print {
-    border: 1px solid $black;
+    border: 1px solid palette.$black;
   }
 
   &--fixed {
@@ -37,10 +37,10 @@
   }
 
   &--compact {
-    padding: getSpacer(2xs) getSpacer(2xs) getSpacer(xs);
+    padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(xs);
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      padding: getSpacer(s) getSpacer(m) getSpacer(s) getSpacer(s);
+      padding: spacers.getSpacer(s) spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(s);
     }
   }
 
@@ -59,14 +59,14 @@
   }
 
   &--highlighted {
-    background-color: $blueberry500;
-    border-color: $blueberry500;
-    color: $white;
+    background-color: palette.$blueberry500;
+    border-color: palette.$blueberry500;
+    color: palette.$white;
 
     &:hover,
     &:active {
-      background-color: $blueberry700;
-      border-color: $blueberry700;
+      background-color: palette.$blueberry700;
+      border-color: palette.$blueberry700;
     }
 
     &:focus-visible {
@@ -78,26 +78,26 @@
     overflow-wrap: break-word;
     word-wrap: break-word;
     word-break: break-word;
-    font-size: $font-size-sm;
+    font-size: font-settings.$font-size-sm;
     text-align: center;
     line-height: 1.74rem;
     font-weight: 400;
-    margin: getSpacer(3xs) 0 0;
+    margin: spacers.getSpacer(3xs) 0 0;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
       text-align: left;
       font-weight: 600;
-      font-size: $font-size-md;
+      font-size: font-settings.$font-size-md;
       line-height: 1.625rem;
-      margin: getSpacer(s) 0 0 getSpacer(2xs);
+      margin: spacers.getSpacer(s) 0 0 spacers.getSpacer(2xs);
     }
 
     &--compact {
-      margin: 0 0 0 getSpacer(3xs);
+      margin: 0 0 0 spacers.getSpacer(3xs);
       text-align: left;
 
       @media (min-width: map.get($grid-breakpoints, md)) {
-        margin-left: getSpacer(2xs);
+        margin-left: spacers.getSpacer(2xs);
       }
     }
   }
@@ -113,11 +113,11 @@
   &__description {
     font-size: 1.125rem;
     line-height: 1.75rem;
-    margin: getSpacer(2xs) 0 0 getSpacer(2xs);
+    margin: spacers.getSpacer(2xs) 0 0 spacers.getSpacer(2xs);
   }
 
   &__children {
-    margin: getSpacer(s) 0 0 getSpacer(2xs);
+    margin: spacers.getSpacer(s) 0 0 spacers.getSpacer(2xs);
   }
 }
 
@@ -137,7 +137,7 @@
   &--compact {
     flex-direction: row;
     align-items: center;
-    padding-right: getSpacer(s);
+    padding-right: spacers.getSpacer(s);
     padding-bottom: 0;
 
     svg {

package/components/Title/styles.module.scss

@@ -1,4 +1,4 @@
-@import '../../scss/font-mixins';
+@use '../../scss/font-mixins' as fonts;
 
 .title {
   overflow-wrap: break-word;
@@ -7,30 +7,30 @@
   margin-right: 0;
 
   &--feature {
-    @include title-feature;
+    @include fonts.title-feature;
   }
 
   &--title1 {
-    @include title1;
+    @include fonts.title1;
   }
 
   &--title2 {
-    @include title2;
+    @include fonts.title2;
   }
 
   &--title3 {
-    @include title3;
+    @include fonts.title3;
   }
 
   &--title4 {
-    @include title4;
+    @include fonts.title4;
   }
 
   &--title5 {
-    @include title5;
+    @include fonts.title5;
   }
 
   &--title6 {
-    @include title6;
+    @include fonts.title6;
   }
 }