@helsenorge/designsystem-react 10.6.1 → 10.6.2

package/components/Title/styles.module.scss

@@ -1,4 +1,4 @@
-@use '../../scss/font-mixins' as fonts;
+@import '../../scss/font-mixins';
 
 .title {
   overflow-wrap: break-word;
@@ -7,30 +7,30 @@
   margin-right: 0;
 
   &--feature {
-    @include fonts.title-feature;
+    @include title-feature;
   }
 
   &--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;
   }
 }

package/components/Toggle/styles.module.scss

@@ -1,10 +1,10 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/font-mixins' as fonts;
-@use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
+@import '../../scss/supernova/styles/colors';
+@import '../../scss/font-mixins';
 
 .toggle-container {
   display: flex;
@@ -22,39 +22,39 @@
   }
 
   &__label {
-    @include fonts.label;
+    @include label;
 
     color: var(--core-color-neutral-900);
-    margin-left: spacers.getSpacer(xs);
+    margin-left: getSpacer(xs);
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
-      margin-left: spacers.getSpacer(s);
+    @media (min-width: map.get($grid-breakpoints, sm)) {
+      margin-left: getSpacer(s);
     }
 
     &__text--subdued {
-      @include fonts.label-subdued;
+      @include label-subdued;
     }
 
     &--toggle-right {
       margin-left: 0;
-      margin-right: spacers.getSpacer(xs);
+      margin-right: getSpacer(xs);
 
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
-        margin-right: spacers.getSpacer(s);
+      @media (min-width: map.get($grid-breakpoints, sm)) {
+        margin-right: getSpacer(s);
       }
     }
   }
 
   &__sublabel {
-    font-size: font-settings.$font-size-xs;
+    font-size: $font-size-xs;
     line-height: 1.25rem;
     color: var(--core-color-neutral-800);
     margin-left: 3.9rem;
     text-align: left;
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
-      font-size: font-settings.$font-size-sm;
-      line-height: font-settings.$lineheight-size-xs;
+    @media (min-width: map.get($grid-breakpoints, sm)) {
+      font-size: $font-size-sm;
+      line-height: $lineheight-size-xs;
       text-align: left;
       margin-left: 4.1rem;
     }

package/components/Tooltip/TooltipWord/styles.module.scss

@@ -1,5 +1,5 @@
-@use '../../../scss/palette' as palette;
-@use '../../../scss/spacers' as spacers;
+@import '../../../scss/palette';
+@import '../../../scss/spacers';
 
 .word {
   all: unset;
@@ -8,11 +8,11 @@
   cursor: help;
 
   // bruker border istedet for text-decoration for å komme rundt text-decoraton-thickness begrensninger i safari
-  border-bottom: 0.2rem dotted palette.$plum400;
+  border-bottom: 0.2rem dotted $plum400;
   line-height: 1.4rem;
 
   &:focus-visible {
-    box-shadow: 0 0 0 spacers.getSpacer(4xs) palette.$black;
+    box-shadow: 0 0 0 getSpacer(4xs) $black;
     outline: none;
   }
 }

package/components/Trigger/styles.module.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../../scss/palette' as palette;
-@use '../../scss/icon' as icon;
+@import '../../scss/palette';
+@import '../../scss/icon';
 
 $trigger-medium-size: 24.18px;
 $trigger-medium-click-area: 44px;
@@ -24,8 +24,8 @@ $trigger-large-size: 30.61px;
   &--medium {
     height: $trigger-medium-size;
     width: $trigger-medium-size;
-    margin-left: calc((map.get(icon.$icon-sizes, xs) - $trigger-medium-size) / 2);
-    margin-right: calc((map.get(icon.$icon-sizes, xs) - $trigger-medium-size) / 2);
+    margin-left: calc((map.get($icon-sizes, xs) - $trigger-medium-size) / 2);
+    margin-right: calc((map.get($icon-sizes, xs) - $trigger-medium-size) / 2);
 
     &::after {
       // Increase the clickable area
@@ -41,8 +41,8 @@ $trigger-large-size: 30.61px;
   &--large {
     height: $trigger-large-size;
     width: $trigger-large-size;
-    margin-left: calc((map.get(icon.$icon-sizes, sm) - $trigger-large-size) / 2);
-    margin-right: calc((map.get(icon.$icon-sizes, sm) - $trigger-large-size) / 2);
+    margin-left: calc((map.get($icon-sizes, sm) - $trigger-large-size) / 2);
+    margin-right: calc((map.get($icon-sizes, sm) - $trigger-large-size) / 2);
   }
 
   $variant-map: (
@@ -52,56 +52,56 @@ $trigger-large-size: 30.61px;
 
   @each $variant, $color in $variant-map {
     &--#{$variant} {
-      box-shadow: inset 0 0 0 1.6px map.get(palette.$palette-map, #{$color}600);
+      box-shadow: inset 0 0 0 1.6px map.get($palette-map, #{$color}600);
 
       &:hover,
       &#{$trigger}--hovered {
-        box-shadow: inset 0 0 0 1.6px map.get(palette.$palette-map, #{$color}800);
-        background-color: rgba(map.get(palette.$palette-map, #{$color}600), 0.1);
+        box-shadow: inset 0 0 0 1.6px map.get($palette-map, #{$color}800);
+        background-color: rgba(map.get($palette-map, #{$color}600), 0.1);
       }
 
       &:focus-visible {
-        box-shadow: inset 0 0 0 1.6px palette.$black;
-        outline: 1.6px solid palette.$black;
+        box-shadow: inset 0 0 0 1.6px $black;
+        outline: 1.6px solid $black;
       }
 
       &#{$trigger}--selected {
-        box-shadow: inset 0 0 0 1.6px map.get(palette.$palette-map, #{$color}800);
-        background-color: rgba(map.get(palette.$palette-map, #{$color}600), 0.1);
+        box-shadow: inset 0 0 0 1.6px map.get($palette-map, #{$color}800);
+        background-color: rgba(map.get($palette-map, #{$color}600), 0.1);
 
         &:hover,
         &#{$trigger}--hovered {
-          background-color: rgba(map.get(palette.$palette-map, #{$color}600), 0.2);
+          background-color: rgba(map.get($palette-map, #{$color}600), 0.2);
         }
 
         &:focus {
-          background-color: rgba(map.get(palette.$palette-map, #{$color}600), 0.1);
+          background-color: rgba(map.get($palette-map, #{$color}600), 0.1);
         }
       }
     }
   }
 
   &--ondark {
-    box-shadow: inset 0 0 0 1.6px palette.$white;
+    box-shadow: inset 0 0 0 1.6px $white;
 
     &:hover {
-      background-color: rgba(palette.$plum50, 0.2);
+      background-color: rgba($plum50, 0.2);
     }
 
     &:focus-visible {
-      outline: 1.6px solid palette.$white;
+      outline: 1.6px solid $white;
     }
 
     &#{$trigger}--selected {
-      background-color: rgba(palette.$plum50, 0.1);
+      background-color: rgba($plum50, 0.1);
 
       &:hover,
       &#{$trigger}--hovered {
-        background-color: rgba(palette.$plum50, 0.2);
+        background-color: rgba($plum50, 0.2);
       }
 
       &:focus-visible {
-        background-color: rgba(palette.$plum50, 0.1);
+        background-color: rgba($plum50, 0.1);
       }
     }
   }

package/components/Validation/styles.module.scss

@@ -1,32 +1,32 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/breakpoints';
+@import '../../scss/spacers';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
 
 .validation {
   &__error-wrapper {
-    margin-bottom: spacers.getSpacer(2xs);
+    margin-bottom: getSpacer(2xs);
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      margin-bottom: spacers.getSpacer(m);
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      margin-bottom: getSpacer(m);
     }
   }
 
   &__summary {
-    color: palette.$cherry600;
+    color: $cherry600;
 
     &--visible {
-      margin: spacers.getSpacer(l) 0 spacers.getSpacer(s);
+      margin: getSpacer(l) 0 getSpacer(s);
     }
   }
 
   &__errors {
-    font-size: font-settings.$font-size-sm;
+    font-size: $font-size-sm;
     font-weight: 600;
 
     &--visible {
-      margin: spacers.getSpacer(l) 0 spacers.getSpacer(s);
+      margin: getSpacer(l) 0 getSpacer(s);
     }
   }
 }

package/package.json

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

package/scss/_body.scss

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

package/scss/_breakpoints.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
-@use 'spacers' as spacers;
+@import 'spacers';
 
-$grid-gutter-width: map.get(spacers.$spacers, 5);
+$grid-gutter-width: map.get($spacers, 5);
 $grid-columns: 12;
 $grid-breakpoints: (
   xxs: 0,

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';