@helsenorge/designsystem-react 10.6.1 → 10.6.3

package/scss/_font-mixins.scss

@@ -1,13 +1,13 @@
 @use 'sass:map';
-@use './spacers' as spacers;
-@use './breakpoints' as breakpoints;
+@import './spacers';
+@import './breakpoints';
 
 @mixin title-feature {
   font-size: 2.375rem;
   line-height: 2.875rem;
   font-weight: 600;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 4rem;
     line-height: 5rem;
   }
@@ -18,7 +18,7 @@
   line-height: 2.375rem;
   font-weight: 600;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 3rem;
     line-height: 3.625rem;
   }
@@ -29,7 +29,7 @@
   line-height: 1.938rem;
   font-weight: 600;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 2rem;
     line-height: 2.375rem;
   }
@@ -40,7 +40,7 @@
   line-height: 1.813rem;
   font-weight: 600;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 1.625rem;
     line-height: 2rem;
   }
@@ -51,7 +51,7 @@
   line-height: 1.625rem;
   font-weight: 600;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 1.375rem;
     line-height: 1.813rem;
   }
@@ -64,7 +64,7 @@
   font-weight: 600;
   text-transform: uppercase;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 1.125rem;
     line-height: 1.563rem;
   }
@@ -75,7 +75,7 @@
   line-height: 1.375rem;
   font-weight: 600;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 1.125rem;
     line-height: 1.563rem;
   }
@@ -85,7 +85,7 @@
   font-size: 1.125rem;
   line-height: 1.688rem;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 1.25rem;
     line-height: 1.875rem;
   }
@@ -96,7 +96,7 @@
   line-height: 1.625rem;
   font-weight: 400;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 1.5rem;
     line-height: 1.938rem;
   }
@@ -107,7 +107,7 @@
   line-height: 1.438rem;
   font-weight: 600;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 1.5rem;
     line-height: 1.938rem;
   }
@@ -118,7 +118,7 @@
   line-height: 1.375rem;
   font-weight: 600;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 1.25rem;
     line-height: 1.625rem;
   }
@@ -129,7 +129,7 @@
   line-height: 1.375rem;
   font-weight: 400;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 1.25rem;
     line-height: 1.625rem;
   }
@@ -140,7 +140,7 @@
   line-height: 1.2rem;
   font-weight: 600;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 1.125rem;
     line-height: 1.463rem;
   }
@@ -151,7 +151,7 @@
   line-height: 1.2rem;
   font-weight: 400;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 1.125rem;
     line-height: 1.463rem;
   }
@@ -161,7 +161,7 @@
   font-size: 1rem;
   line-height: 1.5rem;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 1.125rem;
     line-height: 1.4375rem;
   }
@@ -191,7 +191,7 @@
   font-size: 1.125rem;
   line-height: 1.688rem;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     line-height: 1.4375rem;
   }
 }
@@ -200,7 +200,7 @@
   font-size: 1.125rem;
   line-height: 1.563rem;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 1.25rem;
     line-height: 1.75rem;
   }
@@ -211,7 +211,7 @@
   line-height: 1.375rem;
   font-weight: 400;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 1.25rem;
     line-height: 1.625rem;
   }
@@ -222,7 +222,7 @@
   line-height: 1.375rem;
   font-weight: 600;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 1.25rem;
     line-height: 1.625rem;
   }
@@ -233,7 +233,7 @@
   line-height: 1.375rem;
   font-weight: 400;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 1.25rem;
     line-height: 1.625rem;
   }

package/scss/_fonts.scss

@@ -1,3 +1,5 @@
+@import './font-settings';
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';

package/scss/_input.scss

@@ -1,8 +1,5 @@
 @use 'sass:map';
-@use './palette' as palette;
-@use './spacers' as spacers;
-@use './font-settings' as font-settings;
-@use './breakpoints' as breakpoints;
+@import './font-settings';
 
 @mixin input-wrapper {
   width: 100%;
@@ -10,11 +7,11 @@
 
 @mixin input-container {
   display: flex;
-  font-size: font-settings.$font-size-sm;
+  font-size: $font-size-sm;
   width: 100%;
-  border: 2px solid palette.$neutral700;
+  border: 2px solid $neutral700;
   outline: none;
-  background: palette.$white;
+  background: $white;
 
   svg:first-of-type {
     padding-left: 0.375rem;
@@ -25,79 +22,79 @@
   }
 
   &--large {
-    padding: spacers.getSpacer(2xs) 0;
+    padding: getSpacer(2xs) 0;
 
     svg:first-of-type {
-      padding-left: spacers.getSpacer(2xs);
+      padding-left: getSpacer(2xs);
     }
 
     svg:last-of-type {
-      padding-right: spacers.getSpacer(2xs);
+      padding-right: getSpacer(2xs);
     }
   }
 
   &:focus-within {
-    background: palette.$white;
-    border-color: palette.$neutral900;
-    box-shadow: 0 0 0 2px palette.$neutral900;
+    background: $white;
+    border-color: $neutral900;
+    box-shadow: 0 0 0 2px $neutral900;
   }
 
   &:hover {
-    background: palette.$neutral50;
-    border-color: palette.$neutral700;
-    box-shadow: 0 0 0 1px palette.$neutral700;
+    background: $neutral50;
+    border-color: $neutral700;
+    box-shadow: 0 0 0 1px $neutral700;
 
     &:focus-within {
-      border-color: palette.$black;
-      box-shadow: 0 0 0 2px palette.$black;
+      border-color: $black;
+      box-shadow: 0 0 0 2px $black;
     }
   }
 
   &--on-blueberry {
-    border-color: palette.$blueberry500;
+    border-color: $blueberry500;
 
     &:hover {
-      background: palette.$blueberry50;
-      box-shadow: 0 0 0 1px palette.$blueberry500;
-      border-color: palette.$blueberry500;
+      background: $blueberry50;
+      box-shadow: 0 0 0 1px $blueberry500;
+      border-color: $blueberry500;
     }
 
     &:focus-within {
-      background: palette.$white;
-      border-color: palette.$neutral900;
-      box-shadow: 0 0 0 2px palette.$neutral900;
+      background: $white;
+      border-color: $neutral900;
+      box-shadow: 0 0 0 2px $neutral900;
     }
   }
 
   &--on-dark {
-    border-color: palette.$blueberry900;
+    border-color: $blueberry900;
 
     &:hover {
-      background: palette.$blueberry50;
-      border-color: palette.$blueberry900;
-      box-shadow: 0 0 0 1px palette.$blueberry900;
+      background: $blueberry50;
+      border-color: $blueberry900;
+      box-shadow: 0 0 0 1px $blueberry900;
     }
 
     &:focus-within {
-      background: palette.$white;
-      border-color: palette.$neutral900;
-      box-shadow: 0 0 0 2px palette.$neutral900;
+      background: $white;
+      border-color: $neutral900;
+      box-shadow: 0 0 0 2px $neutral900;
     }
   }
 
   &--invalid {
-    border-color: palette.$cherry600;
+    border-color: $cherry600;
 
     &:hover {
-      background: palette.$cherry100;
-      border-color: palette.$cherry600;
-      box-shadow: 0 0 0 2px palette.$cherry600;
+      background: $cherry100;
+      border-color: $cherry600;
+      box-shadow: 0 0 0 2px $cherry600;
     }
 
     &:focus-within {
-      background: palette.$white;
-      border-color: palette.$neutral900;
-      box-shadow: 0 0 0 2px palette.$neutral900;
+      background: $white;
+      border-color: $neutral900;
+      box-shadow: 0 0 0 2px $neutral900;
     }
   }
 
@@ -105,32 +102,32 @@
     background: transparent;
 
     &:hover {
-      background: palette.$neutral100;
+      background: $neutral100;
     }
 
     &:focus-within {
-      background: palette.$white;
+      background: $white;
     }
   }
   &--transparent#{&}--on-blueberry {
     &:hover {
-      background: palette.$blueberry100;
+      background: $blueberry100;
     }
 
     &:focus-within {
-      background: palette.$white;
+      background: $white;
     }
   }
 
   &--disabled {
     background: transparent;
-    border-color: palette.$neutral600;
+    border-color: $neutral600;
     border-style: dashed;
-    color: palette.$neutral700;
+    color: $neutral700;
 
     &:hover {
       background: transparent;
-      border-color: palette.$neutral600;
+      border-color: $neutral600;
       box-shadow: none;
     }
   }
@@ -138,31 +135,31 @@
   &__input {
     line-height: 1.625rem;
     font-family: inherit;
-    font-size: font-settings.$font-size-sm;
-    padding: 0 spacers.getSpacer(2xs);
+    font-size: $font-size-sm;
+    padding: 0 getSpacer(2xs);
     border: none;
     outline: none;
     background-color: transparent;
     width: 100%;
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      font-size: font-settings.$font-size-md;
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      font-size: $font-size-md;
     }
 
     &::placeholder {
-      color: palette.$neutral500;
+      color: $neutral500;
     }
 
     &--disabled {
-      color: palette.$neutral700;
+      color: $neutral700;
     }
 
     &:first-child {
-      padding-left: spacers.getSpacer(s);
+      padding-left: getSpacer(s);
     }
 
     &:last-child {
-      padding-right: spacers.getSpacer(s);
+      padding-right: getSpacer(s);
     }
   }
 }

package/scss/_print.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use 'palette' as palette;
-@use 'breakpoints' as breakpoints;
+@import 'palette';
+@import 'breakpoints';
 
 @media print {
   *,
@@ -15,11 +15,11 @@
   }
 
   body {
-    min-width: map.get(breakpoints.$grid-breakpoints, lg) !important;
+    min-width: map.get($grid-breakpoints, lg) !important;
   }
 
   .container {
-    min-width: map.get(breakpoints.$grid-breakpoints, lg) !important;
+    min-width: map.get($grid-breakpoints, lg) !important;
   }
 
   abbr[title]::after {
@@ -32,7 +32,7 @@
 
   pre,
   blockquote {
-    border: 1px solid palette.$neutral500;
+    border: 1px solid $neutral500;
     page-break-inside: avoid;
   }
 

package/scss/_reset.scss

@@ -1,4 +1,4 @@
-@import 'normalize.css/normalize.css';
+@import 'normalize.css/normalize';
 
 /** Fiks for iOS og Safari 15 */
 button,

package/scss/helsenorge.scss

@@ -1,8 +1,8 @@
-@use 'reset' as *;
-@use 'spacers' as *;
-@use 'breakpoints' as *;
-@use 'palette' as *;
-@use 'fonts' as *;
-@use 'body' as *;
-@use 'print' as *;
+@import 'reset';
+@import 'spacers';
+@import 'breakpoints';
 @import 'bootstrap/scss/bootstrap-grid';
+@import 'palette';
+@import 'fonts';
+@import 'body';
+@import 'print';

package/scss/layout.module.scss

@@ -1,4 +1,4 @@
-@use './breakpoints' as *;
+@import './breakpoints';
 
 /*
 Denne filen er ment til å importeres som en css module:
@@ -8,7 +8,7 @@ import designsystemlayout from './scss/layout.scss'
 
 .container-breakout {
   // This is a copy of how bootstrap's row class sets margins inside a container
-  // https://github.com/twbs/bootstrap/blob/e5643aaa89eb67327a5b4abe7db976f0ea276b70/scss/mixins/_scss#L16C1-L17C30
+  // https://github.com/twbs/bootstrap/blob/e5643aaa89eb67327a5b4abe7db976f0ea276b70/scss/mixins/_grid.scss#L16C1-L17C30
   margin-right: -$grid-gutter-width * 0.5;
   margin-left: -$grid-gutter-width * 0.5;
 }

package/scss/typography.module.scss

@@ -1,10 +1,9 @@
 @use 'sass:map';
-@use './spacers' as spacers;
-@use './palette' as palette;
-@use './font-mixins' as fonts;
-@use './font-settings' as font-settings;
-@use './breakpoints' as breakpoints;
-@use './fonts' as *;
+@import './spacers';
+@import './breakpoints';
+@import './fonts';
+@import './palette';
+@import './font-mixins';
 
 /*
 Denne filen er ment til å importeres som en css module:
@@ -13,123 +12,123 @@ import designsystemtypography from './scss/typography.scss'
 */
 
 .title-feature {
-  @include fonts.title-feature;
+  @include title-feature;
 }
 
 .focused-content {
-  font-size: font-settings.$font-size-sm;
-  line-height: font-settings.$lineheight-size-sm;
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
 }
 
 .title1 {
-  @include fonts.title1;
+  @include title1;
 }
 
 .title2 {
-  @include fonts.title2;
+  @include title2;
 }
 
 .title3 {
-  @include fonts.title3;
+  @include title3;
 }
 
 .title4 {
-  @include fonts.title4;
+  @include title4;
 }
 
 .title5 {
-  @include fonts.title5;
+  @include title5;
 }
 
 .title6 {
-  @include fonts.title6;
+  @include title6;
 }
 
 .body {
-  @include fonts.body;
+  @include body;
 }
 
 .preamble {
-  @include fonts.preamble;
+  @include preamble;
 }
 
 .legend {
-  @include fonts.legend;
+  @include legend;
 }
 
 .label {
-  @include fonts.label;
+  @include label;
 }
 
 .label-subdued {
-  @include fonts.label-subdued;
+  @include label-subdued;
 }
 
 .sublabel {
-  @include fonts.sublabel;
+  @include sublabel;
 }
 
 .sublabel-subdued {
-  @include fonts.sublabel-subdued;
+  @include sublabel-subdued;
 }
 
 .compact-data {
-  @include fonts.compact-data;
+  @include compact-data;
 }
 
 .table-cell {
-  @include fonts.table-cell;
+  @include table-cell;
 }
 
 .strong {
-  font-size: font-settings.$font-size-sm;
-  line-height: font-settings.$lineheight-size-sm;
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    font-size: font-settings.$font-size-md;
-    line-height: font-settings.$lineheight-size-md;
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    font-size: $font-size-md;
+    line-height: $lineheight-size-md;
   }
 }
 
 .form {
-  font-size: font-settings.$font-size-sm;
-  line-height: font-settings.$lineheight-size-sm;
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    font-size: font-settings.$font-size-md;
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    font-size: $font-size-md;
   }
 }
 
 .status-timestamp {
-  @include fonts.status-timestamp;
+  @include status-timestamp;
 }
 
 .image-caption {
-  @include fonts.image-caption;
+  @include image-caption;
 }
 
 .image-credit {
-  @include fonts.image-credit;
+  @include image-credit;
 }
 
 .input-text {
-  @include fonts.input-text;
+  @include input-text;
 }
 
 .input-text-large {
-  @include fonts.input-text-large;
+  @include input-text-large;
 }
 
 .text-list {
-  @include fonts.text-list;
+  @include text-list;
 }
 
 .definition-list-type {
-  @include fonts.definition-list-type;
+  @include definition-list-type;
 }
 
 .definition-list-data {
-  @include fonts.definition-list-data;
+  @include definition-list-data;
 }
 
 .anchorlink-wrapper {
@@ -139,24 +138,24 @@ import designsystemtypography from './scss/typography.scss'
     overflow-wrap: break-word;
     word-break: break-word;
     text-align: left;
-    color: palette.$blueberry600;
+    color: $blueberry600;
     border: 0.15rem solid transparent;
     text-decoration: underline;
     text-underline-offset: 0.16rem;
-    text-decoration-color: palette.$blueberry400;
+    text-decoration-color: $blueberry400;
     text-decoration-thickness: 0.0625rem;
     padding: 0.1rem;
 
     &:hover {
       cursor: pointer;
-      color: palette.$blueberry700;
-      background-color: palette.$blueberry50;
-      text-decoration-color: palette.$blueberry600;
+      color: $blueberry700;
+      background-color: $blueberry50;
+      text-decoration-color: $blueberry600;
     }
 
     &:focus {
       outline: none;
-      border: 0.15rem solid palette.$black;
+      border: 0.15rem solid $black;
     }
 
     &[target='_blank'] {