@norwegian/core-components 6.59.0 → 7.0.0

package/lib/components/slider/slider.component.d.ts

@@ -178,6 +178,7 @@ export declare class SliderComponent extends NasComponentBase implements OnInit,
     bubbleValue: string | number;
     isIEOrEdge: boolean;
     showBubbleSuffix: boolean;
+    isViewInit: boolean;
     get sliderId(): string;
     get isBubbleActive(): boolean;
     set isBubbleActive(value: boolean);
@@ -194,7 +195,6 @@ export declare class SliderComponent extends NasComponentBase implements OnInit,
     private stepValue;
     private disabledValue;
     private componentId;
-    private isViewInit;
     private minLabelValue;
     private maxLabelValue;
     private suffixLabelValue;
@@ -209,8 +209,8 @@ export declare class SliderComponent extends NasComponentBase implements OnInit,
     private setBubbleStyle;
     onDisplayBubble(event?: any, type?: string): void;
     private validateRangerSlider;
-    private activateBubble;
-    private setBubbleValue;
+    activateBubble(value: number, type: string): void;
+    setBubbleValue(value: number): string | number;
     static ɵfac: i0.ɵɵFactoryDeclaration<SliderComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SliderComponent, "nas-slider", never, { "id": { "alias": "id"; "required": false; }; "range": { "alias": "range"; "required": false; }; "name": { "alias": "name"; "required": false; }; "title": { "alias": "title"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectedMinValue": { "alias": "selectedMinValue"; "required": false; }; "selectedMaxValue": { "alias": "selectedMaxValue"; "required": false; }; "minDiffRange": { "alias": "minDiffRange"; "required": false; }; "suffix": { "alias": "suffix"; "required": false; }; "isPrefix": { "alias": "isPrefix"; "required": false; }; "min": { "alias": "min"; "required": false; }; "minLabel": { "alias": "minLabel"; "required": false; }; "max": { "alias": "max"; "required": false; }; "maxLabel": { "alias": "maxLabel"; "required": false; }; "step": { "alias": "step"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "nasFormControlName": { "alias": "nasFormControlName"; "required": false; }; "nasFormControlMin": { "alias": "nasFormControlMin"; "required": false; }; "nasFormControlMax": { "alias": "nasFormControlMax"; "required": false; }; "nasFormGroup": { "alias": "nasFormGroup"; "required": false; }; }, { "valueChange": "valueChange"; "selectedMinValueChange": "selectedMinValueChange"; "selectedMaxValueChange": "selectedMaxValueChange"; }, never, never, false, never>;
 }

package/lib/components/status-box/status-box.component.d.ts

@@ -1,6 +1,7 @@
 import { EventEmitter } from '@angular/core';
 import { NasComponentBase } from '../../core/base/nas-component.base';
 import { StatusBoxModel } from './models/status-box.model';
+import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 /**
  * @license
@@ -11,9 +12,6 @@ import * as i0 from "@angular/core";
  * Norwegian Status Box Component | Dialogs and Modals
 */
 export declare class StatusBoxComponent extends NasComponentBase {
-    private statusBoxModel;
-    private trackingEventSource;
-    trackingEvent$: import("rxjs").Observable<string>;
     /**
     * @property Input
     * @description
@@ -82,6 +80,8 @@ export declare class StatusBoxComponent extends NasComponentBase {
      * <nas-button (clickChange)="myFunction()">Click on me!</nas-button>
      */
     clickChange: EventEmitter<Event>;
+    trackingEventSource: Subject<string>;
+    private statusBoxModel;
     constructor();
     get modifiers(): Array<string>;
     getIcon(): string;

package/lib/components/status-box/status-box.module.d.ts

@@ -2,10 +2,10 @@ import * as i0 from "@angular/core";
 import * as i1 from "./status-box.component";
 import * as i2 from "@angular/common";
 import * as i3 from "../../core/directives/nas-class/nas-class.module";
-import * as i4 from "../button-new/button-new.module";
+import * as i4 from "../button/button.module";
 import * as i5 from "../icon/icon.module";
 export declare class StatusBoxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<StatusBoxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<StatusBoxModule, [typeof i1.StatusBoxComponent], [typeof i2.CommonModule, typeof i3.NasClassModule, typeof i4.ButtonNewModule, typeof i5.IconModule], [typeof i1.StatusBoxComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<StatusBoxModule, [typeof i1.StatusBoxComponent], [typeof i2.CommonModule, typeof i3.NasClassModule, typeof i4.ButtonModule, typeof i5.IconModule], [typeof i1.StatusBoxComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<StatusBoxModule>;
 }

package/lib/components/toggle/models/options.model.d.ts

@@ -3,4 +3,5 @@ export declare class OptionModel {
     value: string;
     text: string;
     icon?: string;
+    href?: string;
 }

package/lib/components/toggle/toggle.component.d.ts

@@ -164,6 +164,7 @@ export declare class ToggleComponent extends NasComponentBase implements OnInit
     getOptionId(option: OptionModel): string;
     onChange(option: OptionModel): void;
     mainClasses(): import("@norwegian/core-components").ClassModel;
+    onClickHref(event: MouseEvent, option: OptionModel): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToggleComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ToggleComponent, "nas-toggle", never, { "options": { "alias": "options"; "required": false; }; "large": { "alias": "large"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "light": { "alias": "light"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "small": { "alias": "small"; "required": false; }; "big": { "alias": "big"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; "label": { "alias": "label"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "grouped": { "alias": "grouped"; "required": false; }; "group": { "alias": "group"; "required": false; }; "nasFormControlName": { "alias": "nasFormControlName"; "required": false; }; "nasFormGroup": { "alias": "nasFormGroup"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; }, { "handleChange": "handleChange"; }, never, never, false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norwegian/core-components",
-  "version": "6.59.0",
+  "version": "7.0.0",
   "peerDependencies": {
     "@angular/common": ">=16.0.0 < 22.0.0",
     "@angular/core": ">=16.0.0 < 22.0.0"

package/styles/1__settings/_colors.scss

@@ -1,6 +1,6 @@
 // Colors
 @function color($color-name, $color-variant: 'base') {
-    @return map-get(map-get($colors, $color-name), $color-variant);
+    @return map-get(map-get($base-colors, $color-name), $color-variant);
 }
 
 // Find the contrast color to any color hex
@@ -9,11 +9,14 @@
     $light-color: round((red(#fff) * 299) + (green(#fff) * 587) + (blue(#fff) * 114) / 1000);
 
     @if abs($color-brightness) < ($light-color / 2) {
-        @return $color-light;
-    } @else {
-        @return $color-dark;
+        @return color(white-color, base);
+    }
+
+    @else {
+        @return color(blue-color, 90);
     }
 }
+
 // Add percentage of white to a color
 @function tint($color, $percent) {
     @return mix(white, $color, $percent);
@@ -24,59 +27,110 @@
     @return mix(black, $color, $percent);
 }
 
-$colors: (
-    primary: (
-        base: #E5212D,
-        dark: #d81939
-    ),
-    secondary: (
-        base: #15273f, // #15273f
-        dark: #002a3a
-    ),
-    neutral: (
-        xxxlight: #f1f1f1,
-        xxlight: #e3e3e3,
-        xlight: #d8d8d8,
-        light: #c3c3c3,
-        base: #909090,
-        dark: #6f6f6f,
-        xdark: #424141
-    )
+$base-colors: (
+    blue-color: (10: #EBF4FF,
+        20: #DAEBFF,
+        30: #C2DEFF,
+        40: #9BBEE5,
+        50: #7CA4CD,
+        60: #648FBB,
+        70: #2A5980,
+        80: #15273F,
+        90: #0A2033,
+        100: #071622,
+        base: #15273F),
+    dark-red-color: (10: #FEECE9,
+        20: #FCD7CF,
+        60: #CC3A19,
+        80: #B12A0B,
+        base: #CC3A19),
+    green-color: (10: #F4FAF2,
+        20: #DAEFD3,
+        60: #2EB004,
+        80: #238E00,
+        base: #2EB004),
+    grey-color: (100: #1C1C1C,
+        90: #3C3C3C,
+        80: #5B5B5B,
+        70: #6F6F6F,
+        60: #909090,
+        50: #C3C3C3,
+        40: #E9E7E4,
+        30: #EAEAEA,
+        20: #F1F1F1,
+        10: #F8F8F8,
+        base: #C3C3C3),
+    orange-color: (10: #FFF6EC,
+        20: #FFE8CC,
+        60: #FFC266,
+        80: #FC9E12,
+        base: #FC9E12),
+    red-color: (10: #FFF5F3,
+        20: #FAD1D2,
+        30: #F4A4AA,
+        40: #EF7678,
+        50: #EA4850,
+        60: #E5212D,
+        70: #B71530,
+        80: #891024,
+        90: #5B0B18,
+        100: #2E050C,
+        base: #E5212D),
+    white-color: (base: #FFFFFF),
+    yellow-color: (10: #FFFBD5,
+        20: #FFF9C1,
+        60: #FFE87E,
+        80: #FFDA2C,
+        base: #FFDA2C)
 );
 
-// Specific color's
-// Do not overuse, then your on a wrong path and will be hunted down!
-$color-white: #FFFFFF;
-$color-light: #fff;
-$color-dark: color(secondary, dark);
+// Alerts
+$alert-error: color(dark-red-color, base);
+$alert-error-background: color(red-color, 10);
+$alert-info: color(blue-color, base);
+$alert-info-background: color(blue-color, 10);
+$alert-success: color(green-color, base);
+$alert-success-background: color(green-color, 10);
+$alert-warning: color(orange-color, base);
+$alert-warning-background: color(orange-color, 10);
 
-$color-approve: #238e00;
-$color-information: $color-light;
-$color-focus-ring: #3b99fc;
-$color-focus: #0978E8;
-$color-background-badge: #E0EBFF;
-$color-error: #f1d6dc;
-$color-text: $color-dark;
-$color-muted: color(neutral, dark);
-$color-backdrop: rgba(shade(color(secondary), 50%), 0.17);
-$color-backdrop--strong: rgba(shade(color(secondary), 70%), 0.7);
+// Backgrounds
+$background-canvas: color(grey-color, 10);
+$background-important: color(blue-color, base);
+$background-promotion: color(red-color, base);
+$background-surface-contrast: color(grey-color, 10);
+$background-surface-dark: color(grey-color, 70);
+$background-surface-default: color(white-color, base);
+$background-surface-muted: color(grey-color, 40);
 
-$color-links: #B12A0B;
-//Alert-colors
-$color-error: #CC3A19;
-$color-error-background: #FFF5F3;
-$color-warning: #FC9E12;
-$color-warning-background: #FFF6EC;
-$color-success: #2EB004;
-$color-success-background: #F4FAF2;
-$color-info-background: #EBF4FF;
-$color-neutral: #eaeaea;
-$color-neutral-background: #F9F9F9;
+// Borders
+$border-default: color(grey-color, 70);
+$border-heavy: color(blue-color, base);
+$border-inverted: color(white-color, base);
+$border-muted: color(grey-color, 40);
+$border-primary: color(red-color, base);
+$border-success: color(green-color, 80);
 
-// Typography
-$color-typography-link: #b12a0b;
+// CTAs
+$cta-primary: color(red-color, base);
+$cta-primary-hover: color(red-color, 70);
+$cta-primary-press: color(red-color, 80);
+$cta-secondary: color(blue-color, base);
+$cta-secondary-hover: color(blue-color, 90);
+$cta-secondary-press: color(blue-color, 100);
+$cta-tertiary: color(white-color, base);
+$cta-tertiary-hover: color(grey-color, 10);
+$cta-tertiary-press: color(blue-color, 10);
 
-$color-links-border: color(neutral, xlight);
-$color-links--hover: color(secondary);
-$color-background: color(neutral, xxxlight);
+// Interactive elements
+$interactive-element-default: color(white-color, base);
+$interactive-element-disabled: color(grey-color, 40);
+$interactive-element-hover: color(grey-color, 10);
+$interactive-element-selected: color(blue-color, 10);
 
+// Typography
+$typography-text-default: color(blue-color, base);
+$typography-text-disabled: color(grey-color, 40);
+$typography-text-inverted: color(white-color, base);
+$typography-text-link: color(dark-red-color, 80);
+$typography-text-muted: color(grey-color, 70);

package/styles/1__settings/_mixins.scss

@@ -3,6 +3,7 @@
 // Font family and weights
 @mixin font($font-family: base, $weight: null) {
   $family: map-get($fonts, $font-family);
+
   @if $weight {
     @if map-has-key($family, $weight) {
       $f-weight: map-get($family, $weight);
@@ -10,48 +11,82 @@
       @if (length($f-weight) > 1) {
         font-family: nth($f-weight, 2), map-get($family, fallback);
         font-weight: nth($f-weight, 1);
-      } @else {
+      }
+
+      @else {
         font-family: map-get($family, font), map-get($family, fallback);
         font-weight: $f-weight;
       }
-    } @else {
+    }
+
+    @else {
       font-family: map-get($family, font), map-get($family, fallback);
     }
-  } @else {
+  }
+
+  @else {
     font-family: map-get($family, font), map-get($family, fallback);
   }
 }
 
-@mixin font-size($size: base, $skip-line-height: false) {
+// @mixin font-size($size, $skip-line-height: false, $size-variant: 'base') {
+//   // @mixin font-size($size: base, $skip-line-height: false) {
+//   $fs-breakpoints: $breakpoints;
+//   // $fs-map: map-get($font-size, $size);
+//   $fs-map: map-get(map-get($font-size, $size), $size-variant);
+
+//   @each $fs-breakpoint, $fs-font-size in $fs-map {
+//     @if $fs-breakpoint ==base {
+//       @include make-font-size($fs-font-size, $skip-line-height);
+//     }
+
+//     @else {
+//       @if map-has-key($fs-breakpoints, $fs-breakpoint) {
+//         $fs-breakpoint: map-get($fs-breakpoints, $fs-breakpoint);
+//       }
+
+//       @media screen and (min-width: $fs-breakpoint) {
+//         @include make-font-size($fs-font-size, $skip-line-height);
+//       }
+//     }
+//   }
+// }
+
+@mixin font-size($size, $skip-line-height: false, $size-variant: 'base') {
   $fs-breakpoints: $breakpoints;
   $fs-map: map-get($font-size, $size);
 
   @each $fs-breakpoint, $fs-font-size in $fs-map {
-    @if $fs-breakpoint == base {
+    @if $fs-breakpoint == $size-variant {
       @include make-font-size($fs-font-size, $skip-line-height);
-    } @else {
+    }
+
+    @else {
       @if map-has-key($fs-breakpoints, $fs-breakpoint) {
-        $fs-breakpoint: map-get($fs-breakpoints, $fs-breakpoint);
-      }
-      @media screen and (min-width: $fs-breakpoint) {
-        @include make-font-size($fs-font-size, $skip-line-height);
+        $fs-breakpoint-value: map-get($fs-breakpoints, $fs-breakpoint);
+        @media screen and (min-width: $fs-breakpoint-value) {
+          @include make-font-size($fs-font-size, $skip-line-height);
+        }
       }
     }
   }
 }
 
+
 @mixin make-font-size($fs-font-size, $skip-line-height: false) {
-  @if (type-of($fs-font-size) == "list") {
+  @if (type-of($fs-font-size)=="list") {
     font-size: nth($fs-font-size, 1);
 
-    @if ($skip-line-height != true and length($fs-font-size) > 1) {
+    @if ($skip-line-height !=true and length($fs-font-size) > 1) {
       line-height: nth($fs-font-size, 2);
     }
-  } @else {
+  }
+
+  @else {
     font-size: $fs-font-size;
 
-    @if ($skip-line-height != true) {
-      line-height: nth($fs-font-size, 2);
+    @if ($skip-line-height !=true) {
+      line-height: nth($fs-font-size, 1);
     }
   }
 }
@@ -61,12 +96,15 @@
   &:-moz-placeholder {
     @content;
   }
+
   &::-moz-placeholder {
     @content;
   }
+
   &:-ms-input-placeholder {
     @content;
   }
+
   &::-webkit-input-placeholder {
     @content;
   }
@@ -78,7 +116,9 @@
     @media (min-width: $name) {
       @content;
     }
-  } @else {
+  }
+
+  @else {
     @media (min-width: map-get($breakpoints, $name)) {
       @content;
     }
@@ -91,8 +131,10 @@
     @media (min-width: $min) and (max-width: $max) {
       @content;
     }
-  } @else {
-    @media (min-width: map-get($breakpoints, $min)) and (max-width: map-get($breakpoints, $max) - 1) {
+  }
+
+  @else {
+    @media (min-width: map-get($breakpoints, $min)) and (max-width: (map-get($breakpoints, $max) - 1)) {
       @content;
     }
   }
@@ -121,7 +163,7 @@
 }
 
 // Flip in animation. Rember to put perspective: 1000px on parent
-@mixin flip-in($time: 550ms, $pos-y: top, $pos-x: center) {  
+@mixin flip-in($time: 550ms, $pos-y: top, $pos-x: center) {
   transform-origin: $pos-x $pos-y;
   transform-style: preserve-3d;
   backface-visibility: hidden;
@@ -129,7 +171,7 @@
 }
 
 // Flip in animation. Rember to put perspective: 1000px on parent
-@mixin flip-out($time: 200ms, $pos-y: top, $pos-x: center) {  
+@mixin flip-out($time: 200ms, $pos-y: top, $pos-x: center) {
   transform-origin: $pos-x $pos-y;
   transform-style: preserve-3d;
   backface-visibility: hidden;
@@ -138,6 +180,7 @@
 
 // Flip in and out animation. Dependent on ReactCSSTransitionGroup. Rember to put perspective: 1000px on parent
 @mixin flip-in-out($time-in: 550ms, $time-out: 200ms) {
+
   &-enter,
   &-leave-active {
     transform-origin: center top;
@@ -183,14 +226,16 @@
 
 // Screenreaders only
 @mixin screenreaders-only($breakpoint: null) {
-  @if ($breakpoint != null) {
+  @if ($breakpoint !=null) {
     @include min-width($breakpoint) {
       position: absolute;
       overflow: hidden;
       width: 1px;
       height: 1px;
     }
-  } @else {
+  }
+
+  @else {
     position: absolute;
     overflow: hidden;
     width: 1px;
@@ -215,12 +260,15 @@
 
 // Text stroke...
 @mixin text-stroke($width, $color) {
-  $shadow: ();
-  @for $i from -$width through $width {
-    $shadow: append($shadow, #{$width}px #{$i}px $color, comma);
-    $shadow: append($shadow, #{-$width}px #{$i}px $color, comma);
-    $shadow: append($shadow, #{$i}px #{$width}px $color, comma);
-    $shadow: append($shadow, #{$i}px #{-$width}px $color, comma);
-  }
-  text-shadow: $shadow;
+  $shadow: (
+  );
+
+@for $i from -$width through $width {
+  $shadow: append($shadow, #{$width}px #{$i}px $color, comma);
+  $shadow: append($shadow, #{-$width}px #{$i}px $color, comma);
+  $shadow: append($shadow, #{$i}px #{$width}px $color, comma);
+  $shadow: append($shadow, #{$i}px #{-$width}px $color, comma);
 }
+
+text-shadow: $shadow;
+}

package/styles/1__settings/_type.scss

@@ -1,49 +1,23 @@
-$sans-fallback: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$fallback: 'Apercu', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
 $fonts: (
-    base: (
-        font: 'Apercu',
-        fallback: $sans-fallback,
-        light: 300,
+    base: (font: 'NorwegianTextPro',
+        fallback: $fallback,
         normal: normal,
-        medium: 600,
-        bold: bold
-    ),
-    mono: (
-        font: 'ApercuMono',
-        fallback: $sans-fallback,
-        normal: normal,
-        bold: normal
-    )
+        bold: 700),
+    heading: (font: 'NorwegianDisplayPro',
+        fallback: $fallback,
+        bold: 700)
 );
 
 $font-size: (
-    xsmall: (
-        base: (14px, 20px)
-    ),
-    small: (
-        base: (16px, 26px)
-    ),
-    xregular: (
-        base: (18px, 26px)
-    ),
-    regular: (
-        base: (22px, 28px)
-    ),
-    medium: (
-        base: (24px, 30px)
-    ),
-    large: (
-        base: (28px, 34px),
-        md: (32px, 38px)
-    ),
-    xlarge: (
-        base: (42px, 42px)
-    ),
-    xxlarge: (
-        base: (50px, 56px)
-    ),
-    xxxlarge: (
-        base: (72px, 80px)
-    )
-);
+    xsmall: (base: (14px, 20px)), // compact
+    small: (base: (16px, 24px)), // default
+    xregular: (base: (18px, 24px)), // subheading
+    regular: (base: (24px, 32px), mobile: (20px, 28px)), // subtitle
+    medium: (base: (24px, 32px), mobile: (20px, 28px)), // size_d
+    large: (base: (32px, 40px), mobile: (24px, 32px)), // size_c
+    xlarge: (base: (40px, 48px), mobile: (32px, 40px)), // size_b
+    xxlarge: (base: (48px, 56px), mobile: (40px, 48px)), // size_a
+    xxxlarge: (base: (56px, 64px), mobile: (48px, 56px)) // display
+);

package/styles/2__generic/_fonts.scss

@@ -1,40 +1,28 @@
 $import-fonts: (
-    ApercuProRegular: ('Apercu',
-        'apercu_regular_pro-web',
+    NorwegianDisplayPro-Regular: ('NorwegianDisplayPro',
+        'NorwegianDisplayPro-Regular',
         normal,
         normal),
-    ApercuPro-Italic: ('Apercu',
-        'apercu_regular_italic_pro-web',
-        normal,
-        italic),
-    ApercuProLight: ('Apercu',
-        'apercu_light_pro-web',
-        300,
+    NorwegianDisplayPro-Bold: ('NorwegianDisplayPro',
+        'NorwegianDisplayPro-Bold',
+        bold,
         normal),
-    ApercuProLight-Italic: ('Apercu',
-        'apercu_light_italic_pro-web',
-        300,
-        italic),
-    ApercuProMedium: ('Apercu',
-        'apercu_medium_pro-web',
-        600,
+    NorwegianTextPro-Regular: ('NorwegianTextPro',
+        'NorwegianTextPro-Regular',
+        normal,
         normal),
-    ApercuProMedium-Italic: ('Apercu',
-        'apercu_medium_italic_pro-web',
-        600,
+    NorwegianTextPro-Italic: ('NorwegianTextPro',
+        'NorwegianTextPro-RegularItalic',
+        normal,
         italic),
-    ApercuProBold: ('Apercu',
-        'apercu_bold_pro-web',
+    NorwegianTextPro-Bold: ('NorwegianTextPro',
+        'NorwegianTextPro-Bold',
         bold,
         normal),
-    ApercuProBold-Italic: ('Apercu',
-        'apercu_bold_italic_pro-web',
+    NorwegianTextPro-BoldItalic: ('NorwegianTextPro',
+        'NorwegianTextPro-BoldItalic',
         bold,
-        italic),
-    ApercuProMono: ('ApercuMono',
-        'apercu_mono_pro-web',
-        normal,
-        normal),
+        italic)
 );
 
 @each $key,

package/styles/3__base/_body.scss

@@ -4,7 +4,7 @@ body {
     // Type
     @include font(base, normal);
     @include font-size(small, true);
-    color: $color-text;
+    color: $typography-text-default;
     font-style: normal;
     line-height: 1.4;
     -moz-osx-font-smoothing: grayscale;
@@ -12,7 +12,7 @@ body {
     text-rendering: optimizeLegibility;
 
     overflow-x: hidden;
-    background-color: $color-background;
+    background-color: $background-surface-contrast;
 
 
     &.block-scrolling {
@@ -24,4 +24,4 @@ body {
             position: fixed;
         }
     }
-}
+}