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

package/scss/_body.scss

@@ -1,12 +1,11 @@
 @use 'sass:map';
-@import './palette';
-@import './breakpoints';
-@import './font-mixins';
+@use './palette' as palette;
+@use './font-mixins' as fonts;
 
 body {
   font-family: 'Source Sans Pro', Arial, Verdana, sans-serif;
-  background-color: $white;
-  color: $black;
+  background-color: palette.$white;
+  color: palette.$black;
 
-  @include body;
+  @include fonts.body;
 }

package/scss/_breakpoints.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
-@import 'spacers';
+@use 'spacers' as spacers;
 
-$grid-gutter-width: map.get($spacers, 5);
+$grid-gutter-width: map.get(spacers.$spacers, 5);
 $grid-columns: 12;
 $grid-breakpoints: (
   xxs: 0,
@@ -21,3 +21,9 @@ $container-max-widths: (
   md: 612px,
   lg: 1056px,
 );
+
+@mixin tiny-screens-media-query {
+  @media (width <= 319px), (height <= 308px) {
+    @content;
+  }
+}

package/scss/_font-mixins.scss

@@ -1,13 +1,13 @@
 @use 'sass:map';
-@import './spacers';
-@import './breakpoints';
+@use './spacers' as spacers;
+@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,17 +129,39 @@
   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;
   }
 }
 
+@mixin sublabel {
+  font-size: 1rem;
+  line-height: 1.2rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
+}
+
+@mixin sublabel-subdued {
+  font-size: 1rem;
+  line-height: 1.2rem;
+  font-weight: 400;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
+}
+
 @mixin compact-data {
   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;
   }
@@ -169,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;
   }
 }
@@ -178,8 +200,41 @@
   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;
   }
 }
+
+@mixin text-list {
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  font-weight: 400;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+@mixin definition-list-type {
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+@mixin definition-list-data {
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  font-weight: 400;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}

package/scss/_fonts.scss

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

package/scss/_input.scss

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

package/scss/_print.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@import 'palette';
-@import 'breakpoints';
+@use 'palette' as palette;
+@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 {
@@ -32,7 +32,7 @@
 
   pre,
   blockquote {
-    border: 1px solid $neutral500;
+    border: 1px solid palette.$neutral500;
     page-break-inside: avoid;
   }
 

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/layout.module.scss

@@ -1,4 +1,4 @@
-@import './breakpoints';
+@use './breakpoints' as *;
 
 /*
 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/_grid.scss#L16C1-L17C30
+  // https://github.com/twbs/bootstrap/blob/e5643aaa89eb67327a5b4abe7db976f0ea276b70/scss/mixins/_scss#L16C1-L17C30
   margin-right: -$grid-gutter-width * 0.5;
   margin-left: -$grid-gutter-width * 0.5;
 }