@helsenorge/designsystem-react 10.1.0 → 10.3.0

package/components/Select/styles.module.scss

@@ -1,8 +1,8 @@
 @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 *;
 
 .select-wrapper {
   display: flex;
@@ -12,7 +12,7 @@
 .select-inner-wrapper {
   // Grid brukes til å kunne plassere custom ikon fritt over select elementet
   display: inline-grid;
-  background-color: $white;
+  background-color: palette.$white;
   align-items: center;
 
   // Andre kolonne her styrer plassering av select ikonet
@@ -23,23 +23,23 @@
   }
 
   &:hover {
-    background: $neutral50;
+    background: palette.$neutral50;
   }
 
   &--on-blueberry {
     &:hover {
-      background-color: $blueberry50;
+      background-color: palette.$blueberry50;
     }
   }
 
   &--invalid {
     &:hover {
-      background-color: $cherry50;
+      background-color: palette.$cherry50;
     }
   }
 
   &--disabled {
-    color: $neutral700;
+    color: palette.$neutral700;
     background: transparent;
 
     &:hover {
@@ -56,26 +56,26 @@
   background-color: transparent;
   grid-column: 1 / 3;
   grid-row: 1;
-  padding-left: getSpacer(xs);
+  padding-left: spacers.getSpacer(xs);
   border: none;
-  outline: $neutral700 solid 2px;
+  outline: palette.$neutral700 solid 2px;
   outline-offset: -2px;
   font-family: inherit;
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
+  font-size: font-settings.$font-size-sm;
+  line-height: font-settings.$lineheight-size-sm;
   border-radius: 0;
 
   @media (min-width: map.get($grid-breakpoints, md)) {
     height: 3.125rem;
-    font-size: $font-size-md;
+    font-size: font-settings.$font-size-md;
   }
 
   &--on-blueberry {
-    outline-color: $blueberry500;
+    outline-color: palette.$blueberry500;
   }
 
   &--invalid {
-    outline-color: $cherry600;
+    outline-color: palette.$cherry600;
   }
 
   :hover > & {
@@ -84,22 +84,22 @@
   }
 
   &:focus {
-    outline: $black solid 4px;
+    outline: palette.$black solid 4px;
     outline-offset: -2px;
   }
 
   &:disabled {
-    outline: $neutral600 dashed 2px;
+    outline: palette.$neutral600 dashed 2px;
     outline-offset: -2px;
   }
 
   & > option {
-    background: $white;
+    background: palette.$white;
     font-family: inherit;
-    font-size: $font-size-sm;
+    font-size: font-settings.$font-size-sm;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      font-size: $font-size-md;
+      font-size: font-settings.$font-size-md;
     }
   }
 }

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);
   }
 }