@helsenorge/designsystem-react 10.6.0 → 10.6.1

package/components/TagList/styles.module.scss

@@ -1,6 +1,6 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .tag-list {
   all: unset;

package/components/Textarea/styles.module.scss

@@ -2,7 +2,7 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/font-mixins' as fonts;
 @use '../../scss/input' as input;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .textarea {
   @include input.input-wrapper;

package/components/Tile/styles.module.scss

@@ -3,8 +3,8 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/spacers' as spacers;
 @use '../../scss/screen-reader' as *;
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .tile {
   // Referanse for grandparent selection i underklassene lenger nede
@@ -22,7 +22,7 @@
   border: 1px solid var(--color-base-border-blueberry);
   outline: none;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     padding: spacers.getSpacer(l) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(s);
     justify-content: flex-start;
   }
@@ -39,7 +39,7 @@
   &--compact {
     padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(xs);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding: spacers.getSpacer(s) spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(s);
     }
   }
@@ -84,7 +84,7 @@
     font-weight: 400;
     margin: spacers.getSpacer(3xs) 0 0;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       text-align: left;
       font-weight: 600;
       font-size: font-settings.$font-size-md;
@@ -96,7 +96,7 @@
       margin: 0 0 0 spacers.getSpacer(3xs);
       text-align: left;
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         margin-left: spacers.getSpacer(2xs);
       }
     }
@@ -126,7 +126,7 @@
   flex-direction: column;
   align-items: center;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     align-items: start;
 
     @media print {

package/components/Toggle/styles.module.scss

@@ -3,8 +3,8 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/font-mixins' as fonts;
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .toggle-container {
   display: flex;
@@ -27,7 +27,7 @@
     color: var(--core-color-neutral-900);
     margin-left: spacers.getSpacer(xs);
 
-    @media (min-width: map.get($grid-breakpoints, sm)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
       margin-left: spacers.getSpacer(s);
     }
 
@@ -39,7 +39,7 @@
       margin-left: 0;
       margin-right: spacers.getSpacer(xs);
 
-      @media (min-width: map.get($grid-breakpoints, sm)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
         margin-right: spacers.getSpacer(s);
       }
     }
@@ -52,7 +52,7 @@
     margin-left: 3.9rem;
     text-align: left;
 
-    @media (min-width: map.get($grid-breakpoints, sm)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
       font-size: font-settings.$font-size-sm;
       line-height: font-settings.$lineheight-size-xs;
       text-align: left;

package/components/Validation/styles.module.scss

@@ -2,13 +2,13 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .validation {
   &__error-wrapper {
     margin-bottom: spacers.getSpacer(2xs);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       margin-bottom: spacers.getSpacer(m);
     }
   }

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "10.6.0",
+  "version": "10.6.1",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {

package/scss/_font-mixins.scss

@@ -1,13 +1,13 @@
 @use 'sass:map';
 @use './spacers' as spacers;
-@use './breakpoints' as *;
+@use './breakpoints' as breakpoints;
 
 @mixin title-feature {
   font-size: 2.375rem;
   line-height: 2.875rem;
   font-weight: 600;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$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($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$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($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$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($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$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($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$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($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$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($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$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($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$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($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$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($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$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($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$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($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$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($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$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($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$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($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$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($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     line-height: 1.4375rem;
   }
 }
@@ -200,7 +200,7 @@
   font-size: 1.125rem;
   line-height: 1.563rem;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$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($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$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($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$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($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: 1.25rem;
     line-height: 1.625rem;
   }

package/scss/_input.scss

@@ -2,7 +2,7 @@
 @use './palette' as palette;
 @use './spacers' as spacers;
 @use './font-settings' as font-settings;
-@use './breakpoints' as *;
+@use './breakpoints' as breakpoints;
 
 @mixin input-wrapper {
   width: 100%;
@@ -145,7 +145,7 @@
     background-color: transparent;
     width: 100%;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       font-size: font-settings.$font-size-md;
     }
 

package/scss/_print.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use 'palette' as palette;
-@import 'breakpoints';
+@use 'breakpoints' as breakpoints;
 
 @media print {
   *,
@@ -15,11 +15,11 @@
   }
 
   body {
-    min-width: map.get($grid-breakpoints, lg) !important;
+    min-width: map.get(breakpoints.$grid-breakpoints, lg) !important;
   }
 
   .container {
-    min-width: map.get($grid-breakpoints, lg) !important;
+    min-width: map.get(breakpoints.$grid-breakpoints, lg) !important;
   }
 
   abbr[title]::after {

package/scss/_reset.scss

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

package/scss/helsenorge.scss

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

package/scss/typography.module.scss

@@ -3,8 +3,8 @@
 @use './palette' as palette;
 @use './font-mixins' as fonts;
 @use './font-settings' as font-settings;
-@use './breakpoints' as *;
-@import './fonts';
+@use './breakpoints' as breakpoints;
+@use './fonts' as *;
 
 /*
 Denne filen er ment til å importeres som en css module:
@@ -85,7 +85,7 @@ import designsystemtypography from './scss/typography.scss'
   font-size: font-settings.$font-size-sm;
   line-height: font-settings.$lineheight-size-sm;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: font-settings.$font-size-md;
     line-height: font-settings.$lineheight-size-md;
   }
@@ -95,7 +95,7 @@ import designsystemtypography from './scss/typography.scss'
   font-size: font-settings.$font-size-sm;
   line-height: font-settings.$lineheight-size-sm;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: font-settings.$font-size-md;
   }
 }