@helsenorge/designsystem-react 10.2.0 → 10.2.1-beta.0

package/components/ErrorWrapper/styles.module.scss

@@ -1,34 +1,24 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-settings';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/breakpoints' as breakpoints;
+@use '../../scss/font-mixins' as fonts;
 
 .error-wrapper {
-  position: relative;
-
   &--with-error {
-    padding-top: getSpacer(s);
-    margin-left: getSpacer(xs) * -1;
-    margin-right: getSpacer(xs) * -1;
-    padding-left: getSpacer(2xs);
-    padding-right: getSpacer(xs);
-    background-color: $cherry100;
-    border-left: getSpacer(3xs) solid $cherry600;
+    padding: spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(2xs);
+    background-color: var(--color-notification-background-error);
+    border: 1px solid var(--core-color-cherry-400);
+    border-left: 4px solid var(--color-notification-border-error);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
-      margin-left: (getSpacer(m) + 0.25rem) * -1;
-      margin-right: (getSpacer(m) + 0.25rem) * -1;
-      padding-left: getSpacer(m);
-      padding-right: getSpacer(m);
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      padding: spacers.getSpacer(s) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(m);
     }
   }
 
   &__errors {
-    line-height: 1.875rem;
-    font-size: $font-size-sm;
-    font-weight: 600;
-    color: $cherry600;
     margin-top: 0;
+    color: var(--color-notification-border-error);
+
+    @include fonts.label;
   }
 }

package/components/ErrorWrapper/styles.module.scss.d.ts

@@ -1,5 +1,4 @@
 export type Styles = {
-  'error-wrapper': string;
   'error-wrapper__errors': string;
   'error-wrapper--with-error': string;
 };

package/components/Expander/styles.module.scss

@@ -1,11 +1,11 @@
 /* stylelint-disable no-descending-specificity */
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-settings';
-@import '../../scss/supernova/styles/colors';
-@import '../Button/styles.module';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
+@use '../Button/styles.module' as button;
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .expander {
   position: initial;
@@ -16,7 +16,7 @@
   }
 
   @media print {
-    border: 1px solid $black;
+    border: 1px solid palette.$black;
   }
 
   &__icon {
@@ -24,27 +24,27 @@
     align-items: center;
 
     &--left {
-      margin-right: getSpacer(2xs);
+      margin-right: spacers.getSpacer(2xs);
     }
 
     &--right {
       margin-left: auto;
-      padding-left: getSpacer(2xs);
+      padding-left: spacers.getSpacer(2xs);
     }
   }
 
   &__button {
     position: relative;
-    padding-right: getSpacer(s);
+    padding-right: spacers.getSpacer(s);
     text-align: left;
 
     &--expanded {
-      @include outline-borderless-hover;
+      @include button.outline-borderless-hover;
     }
   }
 
   &__button &__button__text {
-    @include outline-borderless-text-hover;
+    @include button.outline-borderless-text-hover;
   }
 
   &__trigger {
@@ -55,31 +55,31 @@
     align-items: center;
     border: none;
     outline: none;
-    font-size: $font-size-sm;
-    line-height: $lineheight-size-sm;
+    font-size: font-settings.$font-size-sm;
+    line-height: font-settings.$lineheight-size-sm;
     font-weight: 600;
     text-align: left;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
-      font-size: $font-size-md;
-      line-height: $lineheight-size-md;
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      font-size: font-settings.$font-size-md;
+      line-height: font-settings.$lineheight-size-md;
     }
 
     &--large {
       width: 100%;
-      padding: getSpacer(xs) getSpacer(2xs) getSpacer(xs) getSpacer(s);
+      padding: spacers.getSpacer(xs) spacers.getSpacer(2xs) spacers.getSpacer(xs) spacers.getSpacer(s);
       cursor: pointer;
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
-        padding: getSpacer(xs) getSpacer(s) getSpacer(xs) getSpacer(l);
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+        padding: spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(l);
       }
     }
 
     &--icon {
-      padding-left: getSpacer(2xs);
+      padding-left: spacers.getSpacer(2xs);
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
-        padding-left: getSpacer(s);
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+        padding-left: spacers.getSpacer(s);
       }
     }
 
@@ -87,22 +87,22 @@
 
     @each $color in $colors {
       &--#{$color} {
-        background-color: map.get($palette-map, #{$color}50);
+        background-color: map.get(palette.$palette-map, #{$color}50);
 
         &:hover {
-          background-color: map.get($palette-map, #{$color}100);
+          background-color: map.get(palette.$palette-map, #{$color}100);
         }
 
         &:focus {
           box-shadow:
-            0 0 0 1.5px $neutral600,
-            inset 0 0 0 1.5px $neutral600;
+            0 0 0 1.5px palette.$neutral600,
+            inset 0 0 0 1.5px palette.$neutral600;
         }
         &#{$trigger}--expanded {
-          background-color: map.get($palette-map, #{$color}100);
+          background-color: map.get(palette.$palette-map, #{$color}100);
 
           &:hover {
-            background-color: map.get($palette-map, #{$color}200);
+            background-color: map.get(palette.$palette-map, #{$color}200);
           }
         }
       }
@@ -110,25 +110,25 @@
 
     // Hvit bakgrunn har egne regler for bakgrunnsfarge, hover og fokus
     &--white {
-      background-color: $white;
+      background-color: palette.$white;
 
       &:hover {
-        background-color: $neutral100;
+        background-color: palette.$neutral100;
       }
 
       &:focus {
         box-shadow:
-          0 0 0 1.5px $neutral600,
-          inset 0 0 0 1.5px $neutral600;
+          0 0 0 1.5px palette.$neutral600,
+          inset 0 0 0 1.5px palette.$neutral600;
       }
       &#{$trigger}--expanded {
-        box-shadow: inset 0 0 0 6px $neutral100;
+        box-shadow: inset 0 0 0 6px palette.$neutral100;
 
         &:focus {
           box-shadow:
-            0 0 0 1.5px $neutral600,
-            inset 0 0 0 1.5px $neutral600,
-            inset 0 0 0 6px $neutral100;
+            0 0 0 1.5px palette.$neutral600,
+            inset 0 0 0 1.5px palette.$neutral600,
+            inset 0 0 0 6px palette.$neutral100;
         }
       }
     }
@@ -136,7 +136,7 @@
 
   &__button-container {
     &--sticky {
-      background-color: $white;
+      background-color: palette.$white;
     }
   }
 
@@ -163,17 +163,17 @@
     }
 
     &--small {
-      margin-top: getSpacer(s);
+      margin-top: spacers.getSpacer(s);
     }
     &--small#{&}--sticky {
       margin-top: 1.25rem;
     }
 
     &--nested-line {
-      padding-left: getSpacer(s);
-      border-left: solid 3px $neutral200;
+      padding-left: spacers.getSpacer(s);
+      border-left: solid 3px palette.$neutral200;
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         margin-left: calc(38px / 2 - 1px); // Halvparten av chevron-ikonets bredde minus halve bredden på border
         padding-left: calc(
           38px / 2 + 12px - 2px
@@ -182,44 +182,44 @@
     }
 
     &--large {
-      padding: getSpacer(s) getSpacer(m) getSpacer(l) getSpacer(s);
+      padding: spacers.getSpacer(s) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(s);
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
-        padding: getSpacer(m) getSpacer(l) getSpacer(xl);
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+        padding: spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(xl);
       }
       &#{$content}--icon {
-        @media (min-width: map.get($grid-breakpoints, md)) {
+        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
           padding-left: 70px;
         }
       }
     }
 
     &--neutral {
-      background-color: $neutral50;
+      background-color: palette.$neutral50;
     }
 
     &--blueberry {
-      background-color: $blueberry50;
+      background-color: palette.$blueberry50;
     }
 
     &--cherry {
-      background-color: $cherry50;
+      background-color: palette.$cherry50;
     }
 
     &--kiwi {
-      background-color: $kiwi50;
+      background-color: palette.$kiwi50;
     }
 
     &--banana {
-      background-color: $banana50;
+      background-color: palette.$banana50;
     }
 
     &--plum {
-      background-color: $plum50;
+      background-color: palette.$plum50;
     }
 
     &--white {
-      background-color: $white;
+      background-color: palette.$white;
     }
   }
 }

package/components/ExpanderHierarchy/expander.module.scss

@@ -1,14 +1,14 @@
 @use 'sass:map';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/spacers';
-@import '../../scss/font-mixins';
+@use '../../scss/palette' as palette;
+@use '../../scss/spacers' as spacers;
+@use '../../scss/font-mixins' as fonts;
+@use '../../scss/breakpoints' as breakpoints;
 
 .expander {
   $item: &;
 
   &:first-of-type {
-    border-top: 1px solid $neutral500;
+    border-top: 1px solid palette.$neutral500;
   }
 
   &__button {
@@ -20,41 +20,41 @@
     width: 100%;
     cursor: pointer;
     background-color: transparent;
-    border-bottom: 1px solid $neutral500;
-    padding: getSpacer(xs) 0;
+    border-bottom: 1px solid palette.$neutral500;
+    padding: spacers.getSpacer(xs) 0;
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       flex-direction: row-reverse;
       justify-content: start;
-      padding: getSpacer(s) getSpacer(s) getSpacer(s) getSpacer(2xs);
+      padding: spacers.getSpacer(s) spacers.getSpacer(s) spacers.getSpacer(s) spacers.getSpacer(2xs);
     }
 
     &:hover,
     &:focus {
-      background-color: $neutral100;
+      background-color: palette.$neutral100;
     }
 
     &:focus {
       text-decoration: underline;
-      outline: getSpacer(4xs) solid $black;
+      outline: spacers.getSpacer(4xs) solid palette.$black;
     }
 
     &[aria-expanded='true'] {
-      background-color: $neutral100;
+      background-color: palette.$neutral100;
       border-bottom: none;
     }
 
     @media print {
       &--print {
-        background-color: $neutral100;
+        background-color: palette.$neutral100;
       }
     }
 
     &--2-and-lower {
-      padding: getSpacer(2xs) 0;
+      padding: spacers.getSpacer(2xs) 0;
 
-      @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding: getSpacer(xs) getSpacer(s) getSpacer(xs) getSpacer(2xs);
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+        padding: spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(2xs);
       }
     }
   }
@@ -63,19 +63,19 @@
     margin: 0;
 
     &--1 {
-      @include title2;
+      @include fonts.title2;
     }
 
     &--2 {
-      @include title3;
+      @include fonts.title3;
     }
 
     &--3 {
-      @include title4;
+      @include fonts.title4;
     }
 
     &--4-and-lower {
-      @include title5;
+      @include fonts.title5;
     }
 
     &--expanded {
@@ -95,44 +95,44 @@
 
   &__content {
     display: none;
-    border-bottom: 1px solid $neutral500;
-    padding-top: getSpacer(m);
-    padding-left: getSpacer(2xs);
-    padding-bottom: getSpacer(m);
+    border-bottom: 1px solid palette.$neutral500;
+    padding-top: spacers.getSpacer(m);
+    padding-left: spacers.getSpacer(2xs);
+    padding-bottom: spacers.getSpacer(m);
 
     &--1 {
-      padding-top: getSpacer(xl);
+      padding-top: spacers.getSpacer(xl);
     }
 
     &--1,
     &--2 {
-      @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding-left: getSpacer(2xl);
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+        padding-left: spacers.getSpacer(2xl);
       }
     }
 
     &--3-and-lower {
-      @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding-left: getSpacer(xl);
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+        padding-left: spacers.getSpacer(xl);
       }
     }
   }
 
   &__icon {
-    margin-left: getSpacer(s);
+    margin-left: spacers.getSpacer(s);
 
     &--2-and-lower {
-      margin-left: getSpacer(xs);
+      margin-left: spacers.getSpacer(xs);
     }
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       margin-left: 0;
-      margin-right: getSpacer(s);
+      margin-right: spacers.getSpacer(s);
     }
 
     &--3-and-lower {
-      @media (min-width: map.get($grid-breakpoints, lg)) {
-        margin-right: getSpacer(xs);
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+        margin-right: spacers.getSpacer(xs);
       }
     }
   }

package/components/ExpanderHierarchy/styles.module.scss

@@ -1,6 +1,5 @@
-@import '../../scss/palette';
-@import '../../scss/spacers';
-@import '../../scss/font-mixins';
+@use '../../scss/palette' as palette;
+@use '../../scss/spacers' as spacers;
 
 .expanderhierarchy {
   list-style: none;
@@ -8,10 +7,10 @@
   margin: 0;
 
   &--2 {
-    margin-top: getSpacer(xl);
+    margin-top: spacers.getSpacer(xl);
   }
 
   &--3-and-lower {
-    margin-top: getSpacer(m);
+    margin-top: spacers.getSpacer(m);
   }
 }

package/components/ExpanderList/styles.module.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/font-settings';
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .expander-list {
   list-style: none;
@@ -46,42 +46,42 @@
       background-color: var(--color-base-background-white);
 
       &--white {
-        border-top: getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-left: getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-right: getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-top: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-left: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-right: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
 
         &:last-of-type {
-          border-bottom: getSpacer(2xs) var(--core-color-neutral-100) solid;
+          border-bottom: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
         }
       }
 
       &--blueberry {
-        border-top: getSpacer(2xs) var(--core-color-blueberry-100) solid;
-        border-left: getSpacer(2xs) var(--core-color-blueberry-100) solid;
-        border-right: getSpacer(2xs) var(--core-color-blueberry-100) solid;
+        border-top: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
+        border-left: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
+        border-right: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
 
         &:last-of-type {
-          border-bottom: getSpacer(2xs) var(--core-color-blueberry-100) solid;
+          border-bottom: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
         }
       }
 
       &--cherry {
-        border-top: getSpacer(2xs) var(--core-color-cherry-100) solid;
-        border-left: getSpacer(2xs) var(--core-color-cherry-100) solid;
-        border-right: getSpacer(2xs) var(--core-color-cherry-100) solid;
+        border-top: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
+        border-left: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
+        border-right: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
 
         &:last-of-type {
-          border-bottom: getSpacer(2xs) var(--core-color-cherry-100) solid;
+          border-bottom: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
         }
       }
 
       &--neutral {
-        border-top: getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-left: getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-right: getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-top: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-left: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-right: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
 
         &:last-of-type {
-          border-bottom: getSpacer(2xs) var(--core-color-neutral-100) solid;
+          border-bottom: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
         }
       }
     }
@@ -117,8 +117,8 @@
 .expander-list-link {
   padding: 0;
   position: relative;
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
+  font-size: font-settings.$font-size-sm;
+  line-height: font-settings.$lineheight-size-sm;
   display: flex;
   cursor: pointer;
   font-family: inherit;
@@ -131,9 +131,9 @@
   width: 100%;
   outline: none;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: $font-size-md;
-    line-height: $lineheight-size-md;
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: font-settings.$font-size-md;
+    line-height: font-settings.$lineheight-size-md;
   }
 
   &--open {
@@ -142,7 +142,7 @@
 
   &--fill,
   &--fill-negative {
-    margin-top: getSpacer(s);
+    margin-top: spacers.getSpacer(s);
   }
 
   &--fill-negative {
@@ -150,7 +150,7 @@
   }
 
   &--closed#{&}--fill {
-    margin-bottom: getSpacer(s);
+    margin-bottom: spacers.getSpacer(s);
   }
 
   &:focus-visible:not(.expander-list-link--outline) {
@@ -237,21 +237,21 @@
   }
 
   &--large {
-    font-size: $font-size-lg;
-    line-height: $lineheight-size-lg;
+    font-size: font-settings.$font-size-lg;
+    line-height: font-settings.$lineheight-size-lg;
   }
 
   &__icon {
     display: flex;
     align-items: center;
-    margin-right: getSpacer(2xs);
+    margin-right: spacers.getSpacer(2xs);
   }
 
   &__chevron {
     display: flex;
     align-items: center;
     margin-left: auto;
-    padding-left: getSpacer(2xs);
+    padding-left: spacers.getSpacer(2xs);
   }
 
   &__main-content {
@@ -267,7 +267,7 @@
     }
 
     &--padding {
-      padding: getSpacer(xs) getSpacer(s) getSpacer(l);
+      padding: spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(l);
     }
   }
 }

package/components/EyebrowHeader/styles.module.scss

@@ -1,5 +1,3 @@
-@import '../../scss/spacers';
-
 .subtitle {
   margin: 0;
 }

package/components/FormGroup/styles.module.scss

@@ -1,12 +1,12 @@
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-mixins';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-mixins' as fonts;
+@use '../../scss/breakpoints' as breakpoints;
 
 .form-group-wrapper {
   &__title {
     &--on-dark {
-      color: $white;
+      color: palette.$white;
     }
   }
 }
@@ -21,20 +21,20 @@
   margin: 0;
   display: flex;
   flex-flow: column;
-  gap: getSpacer(s);
+  gap: spacers.getSpacer(s);
 
   > div {
     padding-bottom: 0;
   }
 
   &__legend {
-    margin-bottom: getSpacer(m);
+    margin-bottom: spacers.getSpacer(m);
     margin-top: 0;
 
-    @include legend;
+    @include fonts.legend;
 
     &--on-dark {
-      color: $white;
+      color: palette.$white;
     }
   }
 }