@helsenorge/designsystem-react 10.6.0 → 10.6.2

package/components/AnchorLink/styles.module.scss

@@ -1,20 +1,21 @@
 @use 'sass:map';
-@use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
 
 $underline-width: 0.0625rem;
 $focus-width: 0.15rem;
 
 @mixin anchorlink-hover {
   cursor: pointer;
-  color: palette.$blueberry700;
-  background-color: palette.$blueberry60010;
-  text-decoration-color: palette.$blueberry600;
+  color: $blueberry700;
+  background-color: $blueberry60010;
+  text-decoration-color: $blueberry600;
 }
 
 @mixin anchorlink-focus {
   outline: none;
-  border: $focus-width solid palette.$black;
+  border: $focus-width solid $black;
 }
 
 @mixin anchorlink {
@@ -23,11 +24,11 @@ $focus-width: 0.15rem;
   overflow-wrap: break-word;
   word-break: break-word;
   text-align: left;
-  color: palette.$blueberry600;
+  color: $blueberry600;
   border: $focus-width solid transparent;
   text-decoration: underline;
   text-underline-offset: 0.16rem;
-  text-decoration-color: palette.$blueberry400;
+  text-decoration-color: $blueberry400;
   text-decoration-thickness: $underline-width;
   padding: 0.1rem;
 

package/components/Avatar/styles.module.scss

@@ -1,13 +1,13 @@
-@use '../../scss/palette' as palette;
-@use '../../scss/font-settings' as font-settings;
+@import '../../scss/palette';
+@import '../../scss/font-settings';
 
 .avatar {
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: 600;
-  background-color: palette.$blueberry500;
-  color: palette.$white;
+  background-color: $blueberry500;
+  color: $white;
 
   &--circle {
     border-radius: 50%;
@@ -18,7 +18,7 @@
   }
 
   &--black {
-    background-color: palette.$neutral900;
+    background-color: $neutral900;
   }
 
   &--selected#{&}--black {
@@ -28,14 +28,14 @@
   &--xsmall {
     width: 2.375rem;
     height: 2.375rem;
-    font-size: font-settings.$font-size-md;
-    line-height: font-settings.$lineheight-size-md;
+    font-size: $font-size-md;
+    line-height: $lineheight-size-md;
   }
 
   &--small {
     width: 3rem;
     height: 3rem;
-    font-size: font-settings.$font-size-lg;
-    line-height: font-settings.$lineheight-size-lg;
+    font-size: $font-size-lg;
+    line-height: $lineheight-size-lg;
   }
 }

package/components/Badge/styles.module.scss

@@ -1,4 +1,4 @@
-@use '../../scss/palette' as palette;
+@import '../../scss/palette';
 
 .badge {
   display: inline-flex;
@@ -10,23 +10,23 @@
   height: 1.375rem;
   border-radius: 1rem;
   padding: 0 0.375rem;
-  color: palette.$white;
-  background-color: palette.$black;
+  color: $white;
+  background-color: $black;
   border: 1px solid;
 
   &--blueberry {
-    background-color: palette.$blueberry500;
-    border-color: palette.$blueberry600;
+    background-color: $blueberry500;
+    border-color: $blueberry600;
   }
 
   &--cherry {
-    background-color: palette.$cherry500;
-    border-color: palette.$cherry600;
+    background-color: $cherry500;
+    border-color: $cherry600;
   }
 
   &--neutral {
-    color: palette.$black;
+    color: $black;
     background-color: transparent;
-    border-color: palette.$neutral600;
+    border-color: $neutral600;
   }
 }

package/components/Button/styles.module.scss

@@ -1,31 +1,25 @@
 @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 *;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
+@import '../../scss/screen-reader';
 @import '../../scss/supernova/styles/colors';
 
 $dark-mode-disabled-transparrent: #ffffffb3;
 $with-icons: // icon-class, size-class, padding-left, padding-right, padding-left desktop, padding-right desktop, svg-margin-left, svg-margin-right, svg-margin-left desktop, svg-margin-right desktop
-  'left-icon' 'normal' spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) 0 spacers.getSpacer(3xs) 0
-    spacers.getSpacer(2xs),
-  'right-icon' 'normal' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(3xs) 0
-    spacers.getSpacer(2xs) 0,
-  'left-icon' 'large' spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l) 0 spacers.getSpacer(2xs) 0
-    spacers.getSpacer(xs),
-  'right-icon' 'large' spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(l) spacers.getSpacer(s) spacers.getSpacer(2xs) 0
-    spacers.getSpacer(xs) 0,
-  'arrow' 'normal' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(m) 0
-    spacers.getSpacer(l) 0,
-  'arrow' 'large' spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(l) spacers.getSpacer(xs) spacers.getSpacer(l) 0
-    spacers.getSpacer(xl) 0,
-  'arrow--both-icons' 'normal' 0 0 0 0 spacers.getSpacer(s) 0 spacers.getSpacer(m) 0,
-  'arrow--both-icons' 'large' 0 0 0 0 spacers.getSpacer(m) 0 spacers.getSpacer(l) 0,
+  'left-icon' 'normal' getSpacer(xs) getSpacer(s) getSpacer(xs) getSpacer(m) 0 getSpacer(3xs) 0 getSpacer(2xs),
+  'right-icon' 'normal' getSpacer(s) getSpacer(xs) getSpacer(m) getSpacer(xs) getSpacer(3xs) 0 getSpacer(2xs) 0,
+  'left-icon' 'large' getSpacer(xs) getSpacer(m) getSpacer(s) getSpacer(l) 0 getSpacer(2xs) 0 getSpacer(xs),
+  'right-icon' 'large' getSpacer(m) getSpacer(xs) getSpacer(l) getSpacer(s) getSpacer(2xs) 0 getSpacer(xs) 0,
+  'arrow' 'normal' getSpacer(s) getSpacer(xs) getSpacer(m) getSpacer(xs) getSpacer(m) 0 getSpacer(l) 0,
+  'arrow' 'large' getSpacer(m) getSpacer(xs) getSpacer(l) getSpacer(xs) getSpacer(l) 0 getSpacer(xl) 0,
+  'arrow--both-icons' 'normal' 0 0 0 0 getSpacer(s) 0 getSpacer(m) 0,
+  'arrow--both-icons' 'large' 0 0 0 0 getSpacer(m) 0 getSpacer(l) 0,
   'only-icon' 'normal' 0.062rem 0.062rem 0.375rem 0.375rem 0 0 0 0,
-  'only-icon' 'large' 0.312rem 0.312rem spacers.getSpacer(3xs) spacers.getSpacer(3xs) 0 0 0 0,
-  'both-icons' 'normal' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0,
-  'both-icons' 'large' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0;
+  'only-icon' 'large' 0.312rem 0.312rem getSpacer(3xs) getSpacer(3xs) 0 0 0 0,
+  'both-icons' 'normal' getSpacer(xs) getSpacer(xs) getSpacer(xs) getSpacer(xs) 0 0 0 0,
+  'both-icons' 'large' getSpacer(xs) getSpacer(xs) getSpacer(xs) getSpacer(xs) 0 0 0 0;
 
 // Brukes til å aktivere hover styling uten at button hovres
 @mixin outline-borderless-hover {
@@ -40,11 +34,11 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 }
 
 @mixin focus-shadow {
-  box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$black;
+  box-shadow: 0 0 0 getSpacer(3xs) $black;
 }
 
 @mixin focus-shadow-on-dark {
-  box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$white;
+  box-shadow: 0 0 0 getSpacer(3xs) $white;
 }
 
 @mixin outline-borderless-background($background-color, $hover-background-color) {
@@ -60,18 +54,18 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 }
 
 @mixin outline($ouline-color, $hover-outline-color) {
-  outline: spacers.getSpacer(4xs) solid $ouline-color;
-  outline-offset: spacers.getSpacer(4xs) * -1;
+  outline: getSpacer(4xs) solid $ouline-color;
+  outline-offset: getSpacer(4xs) * -1;
 
   &:hover {
     box-shadow: none;
   }
 
   :disabled > & {
-    outline-color: palette.$neutral700;
+    outline-color: $neutral700;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      outline-color: palette.$neutral500;
+      outline-color: $neutral500;
     }
   }
 }
@@ -85,13 +79,13 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
   :disabled > & {
     @media (min-width: map.get($grid-breakpoints, md)) {
-      color: palette.$neutral700;
+      color: $neutral700;
     }
   }
 }
 
 @mixin fill-on-dark($background-color) {
-  background-color: palette.$white;
+  background-color: $white;
 
   &:hover {
     box-shadow: none;
@@ -108,7 +102,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     &:hover {
       @include focus-shadow-on-dark;
 
-      background-color: palette.$white;
+      background-color: $white;
     }
   }
 
@@ -122,7 +116,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   color: $color;
 
   :disabled > & {
-    color: palette.$neutral700;
+    color: $neutral700;
   }
 }
 
@@ -131,7 +125,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     @include fill-on-dark(var(--color-action-background-ondark-hover));
   }
   &--on-dark#{&}--destructive {
-    @include fill-on-dark(palette.$cherry50);
+    @include fill-on-dark($cherry50);
   }
   &--on-dark#{&}--outline,
   &--on-dark#{&}--borderless,
@@ -140,11 +134,11 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     background-color: transparent;
 
     &:hover {
-      background-color: palette.$inverted-hover;
+      background-color: $inverted-hover;
     }
   }
   &--on-dark#{&}--outline {
-    outline-color: palette.$white;
+    outline-color: $white;
 
     :disabled > & {
       @media (min-width: map.get($grid-breakpoints, md)) {
@@ -159,14 +153,14 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 
   &--on-dark &__text {
-    @include on-dark-text(palette.$blueberry600);
+    @include on-dark-text($blueberry600);
   }
   &--on-dark#{&}--destructive &__text {
-    @include on-dark-text(palette.$cherry600);
+    @include on-dark-text($cherry600);
   }
   &--on-dark#{&}--outline &__text,
   &--on-dark#{&}--borderless &__text {
-    color: palette.$white;
+    color: $white;
 
     :disabled > & {
       @media (min-width: map.get($grid-breakpoints, md)) {
@@ -201,9 +195,9 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
 .button {
   display: inline-flex;
-  background-color: palette.$blueberry500;
-  padding: 0 spacers.getSpacer(m);
-  font-size: font-settings.$font-size-sm;
+  background-color: $blueberry500;
+  padding: 0 getSpacer(m);
+  font-size: $font-size-sm;
   font-weight: 600;
   font-family: inherit;
   line-height: 1.375rem;
@@ -217,37 +211,37 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   letter-spacing: unset;
 
   &:hover {
-    background-color: palette.$blueberry700;
-    box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$blueberry700;
+    background-color: $blueberry700;
+    box-shadow: 0 0 0 getSpacer(3xs) $blueberry700;
   }
 
   :disabled > & {
     pointer-events: none;
-    outline: spacers.getSpacer(4xs) dashed palette.$neutral700;
-    outline-offset: spacers.getSpacer(4xs) * -1;
-    background-color: palette.$neutral200;
+    outline: getSpacer(4xs) dashed $neutral700;
+    outline-offset: getSpacer(4xs) * -1;
+    background-color: $neutral200;
   }
 
   :disabled > & &__text {
-    color: palette.$neutral800;
+    color: $neutral800;
   }
 
   @media (min-width: map.get($grid-breakpoints, md)) {
     min-height: 3.125rem;
-    padding: 0 spacers.getSpacer(l);
-    font-size: font-settings.$font-size-md;
+    padding: 0 getSpacer(l);
+    font-size: $font-size-md;
     line-height: 1.5rem;
   }
 
   &--large {
     min-height: 3.5rem;
-    padding: 0 spacers.getSpacer(l);
+    padding: 0 getSpacer(l);
     font-size: 1.3125rem;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
       min-height: 4.5rem;
-      padding: 0 spacers.getSpacer(xl);
-      font-size: font-settings.$font-size-lg;
+      padding: 0 getSpacer(xl);
+      font-size: $font-size-lg;
       line-height: 1.5rem;
     }
   }
@@ -277,11 +271,11 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 
   &--destructive {
-    background-color: palette.$cherry500;
+    background-color: $cherry500;
 
     &:hover {
-      background-color: palette.$cherry700;
-      box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$cherry700;
+      background-color: $cherry700;
+      box-shadow: 0 0 0 getSpacer(3xs) $cherry700;
     }
   }
 
@@ -291,19 +285,19 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
   &--outline#{&}--destructive,
   &--borderless#{&}--destructive {
-    @include outline-borderless-background(transparent, palette.$cherry50);
+    @include outline-borderless-background(transparent, $cherry50);
   }
 
   &--outline {
-    @include outline(palette.$blueberry700, palette.$blueberry50);
+    @include outline($blueberry700, $blueberry50);
   }
   &--outline#{&}--destructive {
-    @include outline(palette.$cherry700, palette.$cherry50);
+    @include outline($cherry700, $cherry50);
   }
 
   /* stylelint-disable-next-line */
   &--borderless:not(.button--only-icon) {
-    padding: 0 spacers.getSpacer(3xs);
+    padding: 0 getSpacer(3xs);
   }
 
   /* stylelint-disable-next-line */
@@ -329,7 +323,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
   /* stylelint-disable-next-line */
   &__text {
-    color: palette.$white;
+    color: $white;
     margin: 0 auto 0 0;
     position: relative;
     display: flex;
@@ -362,7 +356,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
   &--outline#{&}--destructive &__text,
   &--borderless#{&}--destructive &__text {
-    @include text-color(palette.$cherry600, palette.$cherry700);
+    @include text-color($cherry600, $cherry700);
   }
 
   /* stylelint-disable-next-line */
@@ -373,8 +367,8 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   @include on-dark;
 
   @include tiny-screens-media-query {
-    min-height: spacers.getSpacer(l);
-    padding: 0 spacers.getSpacer(xs);
+    min-height: getSpacer(l);
+    padding: 0 getSpacer(xs);
   }
 }
 
@@ -387,13 +381,13 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
   &__line {
     display: block;
-    border-bottom: spacers.getSpacer(4xs) dashed palette.$neutral500;
+    border-bottom: getSpacer(4xs) dashed $neutral500;
     transform-origin: top left;
     transform: rotate(37.4deg);
   }
 
   &--on-dark &__line {
-    border-color: palette.$white;
+    border-color: $white;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
       border-color: $dark-mode-disabled-transparrent;