@helsenorge/designsystem-react 10.6.1 → 10.6.2

package/components/Drawer/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/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
+@import '../../scss/spacers';
+@import '../../scss/palette';
+@import '../../scss/breakpoints';
+@import '../../scss/font-settings';
+@import '../../scss/supernova/styles/colors';
 
 .drawer {
   position: fixed;
@@ -32,7 +32,7 @@
     border-radius: 0.75rem 0.75rem 0 0;
     outline: none;
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       justify-content: space-between;
       height: 100%;
       max-height: 100dvh;
@@ -43,14 +43,14 @@
     }
 
     &--right {
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      @media (min-width: map.get($grid-breakpoints, md)) {
         transform: translateX(100%);
         right: 0;
         left: unset;
       }
     }
 
-    @include breakpoints.tiny-screens-media-query {
+    @include tiny-screens-media-query {
       max-height: 100dvh;
       border-radius: 0;
     }
@@ -61,11 +61,11 @@
       max-height: inherit;
       overflow: hidden;
 
-      @include breakpoints.tiny-screens-media-query {
+      @include tiny-screens-media-query {
         overflow-y: auto;
 
         &:focus-visible {
-          outline: 1px solid palette.$black;
+          outline: 1px solid $black;
           outline-offset: -1px;
         }
       }
@@ -76,15 +76,15 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: spacers.getSpacer(xs) spacers.getSpacer(2xs);
+    padding: getSpacer(xs) getSpacer(2xs);
     border-bottom: 1px solid var(--color-base-border-neutral);
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      padding: spacers.getSpacer(xs);
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      padding: getSpacer(xs);
     }
 
-    @include breakpoints.tiny-screens-media-query {
-      padding: spacers.getSpacer(4xs) 0;
+    @include tiny-screens-media-query {
+      padding: getSpacer(4xs) 0;
       flex-direction: column-reverse;
       align-items: flex-start;
     }
@@ -92,36 +92,36 @@
 
   &__content {
     overflow-y: auto;
-    padding: spacers.getSpacer(xs) spacers.getSpacer(2xs);
+    padding: getSpacer(xs) getSpacer(2xs);
 
     &:focus-visible {
-      outline: 1px solid palette.$black;
+      outline: 1px solid $black;
       outline-offset: -1px;
     }
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      padding: spacers.getSpacer(s) spacers.getSpacer(xs);
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      padding: getSpacer(s) getSpacer(xs);
     }
 
-    @include breakpoints.tiny-screens-media-query {
+    @include tiny-screens-media-query {
       overflow-y: unset;
     }
   }
 
   &__footer {
     display: flex;
-    gap: spacers.getSpacer(m);
+    gap: getSpacer(m);
     border-top: 1px solid var(--color-base-border-neutral);
-    padding: spacers.getSpacer(s) spacers.getSpacer(2xs);
+    padding: getSpacer(s) getSpacer(2xs);
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      padding: spacers.getSpacer(m) spacers.getSpacer(xs);
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      padding: getSpacer(m) getSpacer(xs);
     }
 
-    @include breakpoints.tiny-screens-media-query {
+    @include tiny-screens-media-query {
       flex-wrap: wrap;
-      gap: spacers.getSpacer(2xs) 0;
-      padding: spacers.getSpacer(2xs) 0;
+      gap: getSpacer(2xs) 0;
+      padding: getSpacer(2xs) 0;
     }
   }
 }

package/components/Dropdown/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';
 
 .dropdown {
   position: relative;
@@ -20,14 +20,14 @@
     border-radius: 0;
     border-width: 2px;
     border-style: solid;
-    padding: 0 spacers.getSpacer(3xs) 0 spacers.getSpacer(s);
+    padding: 0 getSpacer(3xs) 0 getSpacer(s);
     font-family: inherit;
-    font-size: font-settings.$font-size-sm;
+    font-size: $font-size-sm;
     line-height: 1.3rem; // Custom fordi teksten skal henge bedre sammen om den går over to linjer
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      padding: spacers.getSpacer(3xs) spacers.getSpacer(3xs) spacers.getSpacer(3xs) spacers.getSpacer(s);
-      font-size: font-settings.$font-size-md;
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      padding: getSpacer(3xs) getSpacer(3xs) getSpacer(3xs) getSpacer(s);
+      font-size: $font-size-md;
       line-height: 1.5rem;
     }
 
@@ -37,80 +37,80 @@
 
     &:disabled {
       cursor: initial;
-      color: palette.$neutral700;
+      color: $neutral700;
       background-color: transparent;
-      border-color: palette.$neutral600;
+      border-color: $neutral600;
       border-style: dashed;
     }
 
     &--on-white,
     &--on-grey {
-      border-color: palette.$neutral700;
-      background-color: palette.$white;
+      border-color: $neutral700;
+      background-color: $white;
 
       &:hover {
-        background-color: palette.$neutral50;
-        box-shadow: 0 0 0 1px palette.$neutral700;
+        background-color: $neutral50;
+        box-shadow: 0 0 0 1px $neutral700;
       }
 
       &:focus {
-        border-color: palette.$black;
-        box-shadow: 0 0 0 1px palette.$black;
+        border-color: $black;
+        box-shadow: 0 0 0 1px $black;
       }
     }
 
     &--on-blueberry {
-      border-color: palette.$blueberry500;
-      background-color: palette.$white;
+      border-color: $blueberry500;
+      background-color: $white;
 
       &:hover {
-        background-color: palette.$blueberry50;
-        box-shadow: 0 0 0 1px palette.$blueberry500;
+        background-color: $blueberry50;
+        box-shadow: 0 0 0 1px $blueberry500;
       }
 
       &:focus {
-        border-color: palette.$black;
-        box-shadow: 0 0 0 1px palette.$black;
+        border-color: $black;
+        box-shadow: 0 0 0 1px $black;
       }
     }
 
     &--on-cherry {
-      border-color: palette.$cherry500;
-      background-color: palette.$white;
+      border-color: $cherry500;
+      background-color: $white;
 
       &:hover {
-        background-color: palette.$cherry50;
-        box-shadow: 0 0 0 1px palette.$cherry500;
+        background-color: $cherry50;
+        box-shadow: 0 0 0 1px $cherry500;
       }
 
       &:focus {
-        border-color: palette.$black;
-        box-shadow: 0 0 0 1px palette.$black;
+        border-color: $black;
+        box-shadow: 0 0 0 1px $black;
       }
     }
 
     &--open#{&}--on-white,
     &--open#{&}--on-grey {
-      background-color: palette.$neutral50;
+      background-color: $neutral50;
 
       &:hover {
-        background-color: palette.$white;
+        background-color: $white;
       }
     }
 
     &--open#{&}--on-blueberry {
-      background-color: palette.$blueberry50;
+      background-color: $blueberry50;
 
       &:hover {
-        background-color: palette.$white;
+        background-color: $white;
       }
     }
 
     &--open#{&}--on-cherry {
-      background-color: palette.$cherry50;
+      background-color: $cherry50;
 
       &:hover {
-        background-color: palette.$white;
+        background-color: $white;
       }
     }
 
@@ -120,24 +120,24 @@
 
     &--transparent#{&}--on-grey {
       &:hover {
-        background-color: palette.$neutral100;
+        background-color: $neutral100;
       }
     }
 
     &--transparent#{&}--on-blueberry {
       &:hover {
-        background-color: palette.$blueberry100;
+        background-color: $blueberry100;
       }
     }
 
     &--transparent#{&}--on-cherry {
       &:hover {
-        background-color: palette.$cherry100;
+        background-color: $cherry100;
       }
     }
 
     &--transparent#{&}--open#{&}--on-grey {
-      background-color: palette.$neutral100;
+      background-color: $neutral100;
 
       &:hover {
         background-color: transparent;
@@ -145,7 +145,7 @@
     }
 
     &--transparent#{&}--open#{&}--on-blueberry {
-      background-color: palette.$blueberry100;
+      background-color: $blueberry100;
 
       &:hover {
         background-color: transparent;
@@ -153,7 +153,7 @@
     }
 
     &--transparent#{&}--open#{&}--on-cherry {
-      background-color: palette.$cherry100;
+      background-color: $cherry100;
 
       &:hover {
         background-color: transparent;
@@ -165,24 +165,24 @@
     }
 
     &__label {
-      padding: spacers.getSpacer(3xs) 0;
+      padding: getSpacer(3xs) 0;
 
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        padding: spacers.getSpacer(2xs) 0;
+      @media (min-width: map.get($grid-breakpoints, md)) {
+        padding: getSpacer(2xs) 0;
       }
     }
   }
 
   &__icon {
-    margin-left: spacers.getSpacer(2xs);
+    margin-left: getSpacer(2xs);
   }
 
   &__content {
     display: none;
     position: absolute;
-    background-color: palette.$white;
-    margin-top: spacers.getSpacer(2xs);
-    box-shadow: 0 0 0 2px palette.$blueberry500;
+    background-color: $white;
+    margin-top: getSpacer(2xs);
+    box-shadow: 0 0 0 2px $blueberry500;
     z-index: 1;
 
     &--open {
@@ -197,21 +197,21 @@
     padding: 0;
     margin: 0;
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       max-height: 464px;
     }
   }
 
   &__close {
-    padding: spacers.getSpacer(s);
+    padding: getSpacer(s);
   }
 
   &__input {
-    border-bottom: 1px solid palette.$neutral300;
-    padding: spacers.getSpacer(2xs) spacers.getSpacer(s);
+    border-bottom: 1px solid $neutral300;
+    padding: getSpacer(2xs) getSpacer(s);
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      padding: spacers.getSpacer(s);
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      padding: getSpacer(s);
     }
 
     &:last-child {

package/components/Duolist/styles.module.scss

@@ -1,15 +1,14 @@
 @use 'sass:map';
 @use '../../scss/font-mixins' as fonts;
 @use '../../scss/spacers' as spacers;
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
+@import '../../scss/breakpoints';
+@import '../../scss/font-settings';
+@import '../../scss/palette';
 
 .duolist-wrapper {
   &--border {
     padding: spacers.getSpacer(s) spacers.getSpacer(s) spacers.getSpacer(l);
-    border: 0.062rem solid palette.$neutral500;
+    border: 0.062rem solid $neutral500;
   }
 
   &--extra-padding-top {

package/components/EmptyState/styles.module.scss

@@ -1,19 +1,19 @@
 @use 'sass:map';
 @use '../../scss/font-mixins' as fonts;
-@use '../../scss/spacers' as spacers;
-@use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/supernova/styles/colors';
 
 .emptystate {
   display: flex;
   flex-flow: row;
-  gap: spacers.getSpacer(s);
-  padding: spacers.getSpacer(s);
+  gap: getSpacer(s);
+  padding: getSpacer(s);
   align-items: center;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    gap: spacers.getSpacer(m);
-    padding: spacers.getSpacer(l);
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    gap: getSpacer(m);
+    padding: getSpacer(l);
   }
 
   &--dashed {
@@ -26,16 +26,16 @@
   &--blank {
     border: none;
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      padding-left: spacers.getSpacer(2xs);
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      padding-left: getSpacer(2xs);
     }
   }
 
   &--compact {
     border-radius: 4px;
-    gap: spacers.getSpacer(3xs);
-    padding: spacers.getSpacer(2xs);
-    min-height: spacers.getSpacer(2xl);
+    gap: getSpacer(3xs);
+    padding: getSpacer(2xs);
+    min-height: getSpacer(2xl);
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.25rem;
@@ -49,10 +49,10 @@
   &__text {
     display: flex;
     flex-flow: column;
-    gap: spacers.getSpacer(3xs);
+    gap: getSpacer(3xs);
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      gap: spacers.getSpacer(xs);
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      gap: getSpacer(xs);
     }
   }
 

package/components/ErrorWrapper/styles.module.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use '../../scss/spacers' as spacers;
-@use '../../scss/breakpoints' as breakpoints;
+@use '../../scss/breakpoints' as *;
 @use '../../scss/font-mixins' as fonts;
 
 .error-wrapper {
@@ -10,7 +10,7 @@
     border: 1px solid var(--core-color-cherry-400);
     border-left: 4px solid var(--color-notification-border-error);
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       padding: spacers.getSpacer(s) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(m);
     }
   }