@helsenorge/designsystem-react 10.2.0 → 10.3.0

package/components/Toggle/styles.module.scss

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

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

@@ -1,5 +1,5 @@
-@import '../../../scss/palette';
-@import '../../../scss/spacers';
+@use '../../../scss/palette' as palette;
+@use '../../../scss/spacers' as 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 $plum400;
+  border-bottom: 0.2rem dotted palette.$plum400;
   line-height: 1.4rem;
 
   &:focus-visible {
-    box-shadow: 0 0 0 getSpacer(4xs) $black;
+    box-shadow: 0 0 0 spacers.getSpacer(4xs) palette.$black;
     outline: none;
   }
 }

package/components/Trigger/styles.module.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@import '../../scss/palette';
-@import '../../scss/icon';
+@use '../../scss/palette' as palette;
+@use '../../scss/icon' as 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-sizes, xs) - $trigger-medium-size) / 2);
-    margin-right: calc((map.get($icon-sizes, xs) - $trigger-medium-size) / 2);
+    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);
 
     &::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-sizes, sm) - $trigger-large-size) / 2);
-    margin-right: calc((map.get($icon-sizes, sm) - $trigger-large-size) / 2);
+    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);
   }
 
   $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-map, #{$color}600);
+      box-shadow: inset 0 0 0 1.6px map.get(palette.$palette-map, #{$color}600);
 
       &:hover,
       &#{$trigger}--hovered {
-        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);
+        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);
       }
 
       &:focus-visible {
-        box-shadow: inset 0 0 0 1.6px $black;
-        outline: 1.6px solid $black;
+        box-shadow: inset 0 0 0 1.6px palette.$black;
+        outline: 1.6px solid palette.$black;
       }
 
       &#{$trigger}--selected {
-        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);
+        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);
 
         &:hover,
         &#{$trigger}--hovered {
-          background-color: rgba(map.get($palette-map, #{$color}600), 0.2);
+          background-color: rgba(map.get(palette.$palette-map, #{$color}600), 0.2);
         }
 
         &:focus {
-          background-color: rgba(map.get($palette-map, #{$color}600), 0.1);
+          background-color: rgba(map.get(palette.$palette-map, #{$color}600), 0.1);
         }
       }
     }
   }
 
   &--ondark {
-    box-shadow: inset 0 0 0 1.6px $white;
+    box-shadow: inset 0 0 0 1.6px palette.$white;
 
     &:hover {
-      background-color: rgba($plum50, 0.2);
+      background-color: rgba(palette.$plum50, 0.2);
     }
 
     &:focus-visible {
-      outline: 1.6px solid $white;
+      outline: 1.6px solid palette.$white;
     }
 
     &#{$trigger}--selected {
-      background-color: rgba($plum50, 0.1);
+      background-color: rgba(palette.$plum50, 0.1);
 
       &:hover,
       &#{$trigger}--hovered {
-        background-color: rgba($plum50, 0.2);
+        background-color: rgba(palette.$plum50, 0.2);
       }
 
       &:focus-visible {
-        background-color: rgba($plum50, 0.1);
+        background-color: rgba(palette.$plum50, 0.1);
       }
     }
   }

package/components/Validation/styles.module.scss

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

package/package.json

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

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,

package/scss/_font-mixins.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@import './spacers';
-@import './breakpoints';
+@use './spacers' as spacers;
+@use './breakpoints' as *;
 
 @mixin title-feature {
   font-size: 2.375rem;

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

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