@helsenorge/designsystem-react 10.1.0 → 10.3.0

package/components/Button/styles.module.scss

@@ -1,25 +1,31 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-settings';
-@import '../../scss/screen-reader';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/screen-reader' as *;
+@use '../../scss/breakpoints' as *;
 @import '../../scss/supernova/styles/colors';
 
 $dark-mode-disabled-transparrent: #ffffffb3;
 $with-icons: // icon-class, size-class, padding-left, padding-right, padding-left desktop, padding-right desktop, svg-margin-left, svg-margin-right, svg-margin-left desktop, svg-margin-right desktop
-  'left-icon' 'normal' getSpacer(xs) getSpacer(s) getSpacer(xs) getSpacer(m) 0 getSpacer(3xs) 0 getSpacer(2xs),
-  'right-icon' 'normal' getSpacer(s) getSpacer(xs) getSpacer(m) getSpacer(xs) getSpacer(3xs) 0 getSpacer(2xs) 0,
-  'left-icon' 'large' getSpacer(xs) getSpacer(m) getSpacer(s) getSpacer(l) 0 getSpacer(2xs) 0 getSpacer(xs),
-  'right-icon' 'large' getSpacer(m) getSpacer(xs) getSpacer(l) getSpacer(s) getSpacer(2xs) 0 getSpacer(xs) 0,
-  'arrow' 'normal' getSpacer(s) getSpacer(xs) getSpacer(m) getSpacer(xs) getSpacer(m) 0 getSpacer(l) 0,
-  'arrow' 'large' getSpacer(m) getSpacer(xs) getSpacer(l) getSpacer(xs) getSpacer(l) 0 getSpacer(xl) 0,
-  'arrow--both-icons' 'normal' 0 0 0 0 getSpacer(s) 0 getSpacer(m) 0,
-  'arrow--both-icons' 'large' 0 0 0 0 getSpacer(m) 0 getSpacer(l) 0,
+  'left-icon' 'normal' spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) 0 spacers.getSpacer(3xs) 0
+    spacers.getSpacer(2xs),
+  'right-icon' 'normal' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(3xs) 0
+    spacers.getSpacer(2xs) 0,
+  'left-icon' 'large' spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l) 0 spacers.getSpacer(2xs) 0
+    spacers.getSpacer(xs),
+  'right-icon' 'large' spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(l) spacers.getSpacer(s) spacers.getSpacer(2xs) 0
+    spacers.getSpacer(xs) 0,
+  'arrow' 'normal' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(m) 0
+    spacers.getSpacer(l) 0,
+  'arrow' 'large' spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(l) spacers.getSpacer(xs) spacers.getSpacer(l) 0
+    spacers.getSpacer(xl) 0,
+  'arrow--both-icons' 'normal' 0 0 0 0 spacers.getSpacer(s) 0 spacers.getSpacer(m) 0,
+  'arrow--both-icons' 'large' 0 0 0 0 spacers.getSpacer(m) 0 spacers.getSpacer(l) 0,
   'only-icon' 'normal' 0.062rem 0.062rem 0.375rem 0.375rem 0 0 0 0,
-  'only-icon' 'large' 0.312rem 0.312rem getSpacer(3xs) getSpacer(3xs) 0 0 0 0,
-  'both-icons' 'normal' getSpacer(xs) getSpacer(xs) getSpacer(xs) getSpacer(xs) 0 0 0 0,
-  'both-icons' 'large' getSpacer(xs) getSpacer(xs) getSpacer(xs) getSpacer(xs) 0 0 0 0;
+  'only-icon' 'large' 0.312rem 0.312rem spacers.getSpacer(3xs) spacers.getSpacer(3xs) 0 0 0 0,
+  'both-icons' 'normal' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0,
+  'both-icons' 'large' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0;
 
 // Brukes til å aktivere hover styling uten at button hovres
 @mixin outline-borderless-hover {
@@ -34,11 +40,11 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 }
 
 @mixin focus-shadow {
-  box-shadow: 0 0 0 getSpacer(3xs) $black;
+  box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$black;
 }
 
 @mixin focus-shadow-on-dark {
-  box-shadow: 0 0 0 getSpacer(3xs) $white;
+  box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$white;
 }
 
 @mixin outline-borderless-background($background-color, $hover-background-color) {
@@ -54,18 +60,18 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 }
 
 @mixin outline($ouline-color, $hover-outline-color) {
-  outline: getSpacer(4xs) solid $ouline-color;
-  outline-offset: getSpacer(4xs) * -1;
+  outline: spacers.getSpacer(4xs) solid $ouline-color;
+  outline-offset: spacers.getSpacer(4xs) * -1;
 
   &:hover {
     box-shadow: none;
   }
 
   :disabled > & {
-    outline-color: $neutral700;
+    outline-color: palette.$neutral700;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      outline-color: $neutral500;
+      outline-color: palette.$neutral500;
     }
   }
 }
@@ -79,13 +85,13 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
   :disabled > & {
     @media (min-width: map.get($grid-breakpoints, md)) {
-      color: $neutral700;
+      color: palette.$neutral700;
     }
   }
 }
 
 @mixin fill-on-dark($background-color) {
-  background-color: $white;
+  background-color: palette.$white;
 
   &:hover {
     box-shadow: none;
@@ -102,7 +108,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     &:hover {
       @include focus-shadow-on-dark;
 
-      background-color: $white;
+      background-color: palette.$white;
     }
   }
 
@@ -116,7 +122,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   color: $color;
 
   :disabled > & {
-    color: $neutral700;
+    color: palette.$neutral700;
   }
 }
 
@@ -125,7 +131,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     @include fill-on-dark(var(--color-action-background-ondark-hover));
   }
   &--on-dark#{&}--destructive {
-    @include fill-on-dark($cherry50);
+    @include fill-on-dark(palette.$cherry50);
   }
   &--on-dark#{&}--outline,
   &--on-dark#{&}--borderless,
@@ -134,11 +140,11 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     background-color: transparent;
 
     &:hover {
-      background-color: $inverted-hover;
+      background-color: palette.$inverted-hover;
     }
   }
   &--on-dark#{&}--outline {
-    outline-color: $white;
+    outline-color: palette.$white;
 
     :disabled > & {
       @media (min-width: map.get($grid-breakpoints, md)) {
@@ -153,14 +159,14 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 
   &--on-dark &__text {
-    @include on-dark-text($blueberry600);
+    @include on-dark-text(palette.$blueberry600);
   }
   &--on-dark#{&}--destructive &__text {
-    @include on-dark-text($cherry600);
+    @include on-dark-text(palette.$cherry600);
   }
   &--on-dark#{&}--outline &__text,
   &--on-dark#{&}--borderless &__text {
-    color: $white;
+    color: palette.$white;
 
     :disabled > & {
       @media (min-width: map.get($grid-breakpoints, md)) {
@@ -195,9 +201,9 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
 .button {
   display: inline-flex;
-  background-color: $blueberry500;
-  padding: 0 getSpacer(m);
-  font-size: $font-size-sm;
+  background-color: palette.$blueberry500;
+  padding: 0 spacers.getSpacer(m);
+  font-size: font-settings.$font-size-sm;
   font-weight: 600;
   font-family: inherit;
   line-height: 1.375rem;
@@ -211,37 +217,37 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   letter-spacing: unset;
 
   &:hover {
-    background-color: $blueberry700;
-    box-shadow: 0 0 0 getSpacer(3xs) $blueberry700;
+    background-color: palette.$blueberry700;
+    box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$blueberry700;
   }
 
   :disabled > & {
     pointer-events: none;
-    outline: getSpacer(4xs) dashed $neutral700;
-    outline-offset: getSpacer(4xs) * -1;
-    background-color: $neutral200;
+    outline: spacers.getSpacer(4xs) dashed palette.$neutral700;
+    outline-offset: spacers.getSpacer(4xs) * -1;
+    background-color: palette.$neutral200;
   }
 
   :disabled > & &__text {
-    color: $neutral800;
+    color: palette.$neutral800;
   }
 
   @media (min-width: map.get($grid-breakpoints, md)) {
     min-height: 3.125rem;
-    padding: 0 getSpacer(l);
-    font-size: $font-size-md;
+    padding: 0 spacers.getSpacer(l);
+    font-size: font-settings.$font-size-md;
     line-height: 1.5rem;
   }
 
   &--large {
     min-height: 3.5rem;
-    padding: 0 getSpacer(l);
+    padding: 0 spacers.getSpacer(l);
     font-size: 1.3125rem;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
       min-height: 4.5rem;
-      padding: 0 getSpacer(xl);
-      font-size: $font-size-lg;
+      padding: 0 spacers.getSpacer(xl);
+      font-size: font-settings.$font-size-lg;
       line-height: 1.5rem;
     }
   }
@@ -271,11 +277,11 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 
   &--destructive {
-    background-color: $cherry500;
+    background-color: palette.$cherry500;
 
     &:hover {
-      background-color: $cherry700;
-      box-shadow: 0 0 0 getSpacer(3xs) $cherry700;
+      background-color: palette.$cherry700;
+      box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$cherry700;
     }
   }
 
@@ -285,19 +291,19 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
   &--outline#{&}--destructive,
   &--borderless#{&}--destructive {
-    @include outline-borderless-background(transparent, $cherry50);
+    @include outline-borderless-background(transparent, palette.$cherry50);
   }
 
   &--outline {
-    @include outline($blueberry700, $blueberry50);
+    @include outline(palette.$blueberry700, palette.$blueberry50);
   }
   &--outline#{&}--destructive {
-    @include outline($cherry700, $cherry50);
+    @include outline(palette.$cherry700, palette.$cherry50);
   }
 
   /* stylelint-disable-next-line */
   &--borderless:not(.button--only-icon) {
-    padding: 0 getSpacer(3xs);
+    padding: 0 spacers.getSpacer(3xs);
   }
 
   /* stylelint-disable-next-line */
@@ -323,7 +329,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
   /* stylelint-disable-next-line */
   &__text {
-    color: $white;
+    color: palette.$white;
     margin: 0 auto 0 0;
     position: relative;
     display: flex;
@@ -356,7 +362,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
   &--outline#{&}--destructive &__text,
   &--borderless#{&}--destructive &__text {
-    @include text-color($cherry600, $cherry700);
+    @include text-color(palette.$cherry600, palette.$cherry700);
   }
 
   /* stylelint-disable-next-line */
@@ -365,6 +371,11 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 
   @include on-dark;
+
+  @include tiny-screens-media-query {
+    min-height: spacers.getSpacer(l);
+    padding: 0 spacers.getSpacer(xs);
+  }
 }
 
 .diagonal {
@@ -376,13 +387,13 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
   &__line {
     display: block;
-    border-bottom: getSpacer(4xs) dashed $neutral500;
+    border-bottom: spacers.getSpacer(4xs) dashed palette.$neutral500;
     transform-origin: top left;
     transform: rotate(37.4deg);
   }
 
   &--on-dark &__line {
-    border-color: $white;
+    border-color: palette.$white;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
       border-color: $dark-mode-disabled-transparrent;