@norwegian/core-components 7.2.0 → 7.2.2

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

@@ -691,7 +691,7 @@ export declare class FilterComponent extends NasComponentBase implements OnInit,
      * @description
      * The ID of the native input element for Airport Select
      */
-    aiportSelectId: string;
+    airportSelectId: string;
     /**
      * @property Input
      * @required
@@ -833,5 +833,5 @@ export declare class FilterComponent extends NasComponentBase implements OnInit,
     private setLatestSearches;
     private closeDropdowns;
     static ɵfac: i0.ɵɵFactoryDeclaration<FilterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FilterComponent, "nas-filter", never, { "airportRelations": { "alias": "airportRelations"; "required": false; }; "ariaLabelClear": { "alias": "ariaLabelClear"; "required": false; }; "ariaLabelSubtract": { "alias": "ariaLabelSubtract"; "required": false; }; "ariaLabelBackdrop": { "alias": "ariaLabelBackdrop"; "required": false; }; "ariaLabelAdd": { "alias": "ariaLabelAdd"; "required": false; }; "allowedOriginAirports": { "alias": "allowedOriginAirports"; "required": false; }; "allowedDestinationAirports": { "alias": "allowedDestinationAirports"; "required": false; }; "displayLatestSearches": { "alias": "displayLatestSearches"; "required": false; }; "useSwitch": { "alias": "useSwitch"; "required": false; }; "displayClosestAirports": { "alias": "displayClosestAirports"; "required": false; }; "originAirportCode": { "alias": "originAirportCode"; "required": false; }; "destinationAirportCode": { "alias": "destinationAirportCode"; "required": false; }; "passengerSelectLabel": { "alias": "passengerSelectLabel"; "required": false; }; "maxPaxCount": { "alias": "maxPaxCount"; "required": false; }; "passengers": { "alias": "passengers"; "required": false; }; "minAdultCount": { "alias": "minAdultCount"; "required": false; }; "tripSwitchRoundTripLabel": { "alias": "tripSwitchRoundTripLabel"; "required": false; }; "tripSwitchOneWayLabel": { "alias": "tripSwitchOneWayLabel"; "required": false; }; "directOnlyLabel": { "alias": "directOnlyLabel"; "required": false; }; "directTransitLabel": { "alias": "directTransitLabel"; "required": false; }; "minimizeOnMobile": { "alias": "minimizeOnMobile"; "required": false; }; "expandedAccordionMobile": { "alias": "expandedAccordionMobile"; "required": false; }; "defaultSummarySeparator": { "alias": "defaultSummarySeparator"; "required": false; }; "lastSummarySeparator": { "alias": "lastSummarySeparator"; "required": false; }; "passengerSelectTitle": { "alias": "passengerSelectTitle"; "required": false; }; "passengerSelectAdultsLabel": { "alias": "passengerSelectAdultsLabel"; "required": false; }; "passengerSelectYouthsLabel": { "alias": "passengerSelectYouthsLabel"; "required": false; }; "passengerSelectYoungAdultsLabel": { "alias": "passengerSelectYoungAdultsLabel"; "required": false; }; "passengerSelectChildrenLabel": { "alias": "passengerSelectChildrenLabel"; "required": false; }; "passengerSelectInfantsLabel": { "alias": "passengerSelectInfantsLabel"; "required": false; }; "groupBookingLabel": { "alias": "groupBookingLabel"; "required": false; }; "allAirportsLabel": { "alias": "allAirportsLabel"; "required": false; }; "latestSearchesLabel": { "alias": "latestSearchesLabel"; "required": false; }; "closestAirportsLabel": { "alias": "closestAirportsLabel"; "required": false; }; "selectOriginFirstLabel": { "alias": "selectOriginFirstLabel"; "required": false; }; "labelOrigin": { "alias": "labelOrigin"; "required": false; }; "placeholderOrigin": { "alias": "placeholderOrigin"; "required": false; }; "labelDestination": { "alias": "labelDestination"; "required": false; }; "geolocationLabel": { "alias": "geolocationLabel"; "required": false; }; "geolocationBlockedLabel": { "alias": "geolocationBlockedLabel"; "required": false; }; "placeholderDestination": { "alias": "placeholderDestination"; "required": false; }; "keepSelection": { "alias": "keepSelection"; "required": false; }; "editSearchTitle": { "alias": "editSearchTitle"; "required": false; }; "nasFormGroup": { "alias": "nasFormGroup"; "required": false; }; "nasFormControlNameOrigin": { "alias": "nasFormControlNameOrigin"; "required": false; }; "nasFormControlNameDestination": { "alias": "nasFormControlNameDestination"; "required": false; }; "nasFormControlNameTripType": { "alias": "nasFormControlNameTripType"; "required": false; }; "nasFormControlNameDirectOnly": { "alias": "nasFormControlNameDirectOnly"; "required": false; }; "nasFormControlNameOutbound": { "alias": "nasFormControlNameOutbound"; "required": false; }; "nasFormControlNameInbound": { "alias": "nasFormControlNameInbound"; "required": false; }; "nasFormControlGroupBooking": { "alias": "nasFormControlGroupBooking"; "required": false; }; "overrideOrigin": { "alias": "overrideOrigin"; "required": false; }; "enableSuggestions": { "alias": "enableSuggestions"; "required": false; }; "closestAirports": { "alias": "closestAirports"; "required": false; }; "minimize": { "alias": "minimize"; "required": false; }; "airports": { "alias": "airports"; "required": false; }; "tripType": { "alias": "tripType"; "required": false; }; "directOnly": { "alias": "directOnly"; "required": false; }; "groupBookingLimit": { "alias": "groupBookingLimit"; "required": false; }; "ariaLabelPreviousMonth": { "alias": "ariaLabelPreviousMonth"; "required": false; }; "ariaLabelNextMonth": { "alias": "ariaLabelNextMonth"; "required": false; }; "noAvailableFlightsLabel": { "alias": "noAvailableFlightsLabel"; "required": false; }; "availableFlightsLabel": { "alias": "availableFlightsLabel"; "required": false; }; "disablePastSelection": { "alias": "disablePastSelection"; "required": false; }; "outboundLabel": { "alias": "outboundLabel"; "required": false; }; "inboundLabel": { "alias": "inboundLabel"; "required": false; }; "availability": { "alias": "availability"; "required": false; }; "outboundAvailableDates": { "alias": "outboundAvailableDates"; "required": false; }; "inboundAvailableDates": { "alias": "inboundAvailableDates"; "required": false; }; "times": { "alias": "times"; "required": false; }; "dateDisplayFormat": { "alias": "dateDisplayFormat"; "required": false; }; "timeDisplayFormat": { "alias": "timeDisplayFormat"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "outboundDisabled": { "alias": "outboundDisabled"; "required": false; }; "inboundDisabled": { "alias": "inboundDisabled"; "required": false; }; "enableDatepickers": { "alias": "enableDatepickers"; "required": false; }; "minimizingLabel": { "alias": "minimizingLabel"; "required": false; }; "maximizingLabel": { "alias": "maximizingLabel"; "required": false; }; "directOnlyMobileLabel": { "alias": "directOnlyMobileLabel"; "required": false; }; "orLabel": { "alias": "orLabel"; "required": false; }; "passengersTitleLabel": { "alias": "passengersTitleLabel"; "required": false; }; "invalidDestinationText": { "alias": "invalidDestinationText"; "required": false; }; "outboundSelectedDate": { "alias": "outboundSelectedDate"; "required": false; }; "inboundSelectedDate": { "alias": "inboundSelectedDate"; "required": false; }; "enableDestinationSelect": { "alias": "enableDestinationSelect"; "required": false; }; "enablePassengersSelect": { "alias": "enablePassengersSelect"; "required": false; }; "enableTripSwitch": { "alias": "enableTripSwitch"; "required": false; }; "enableTransitSwitch": { "alias": "enableTransitSwitch"; "required": false; }; "datePickerComboInlineFlex": { "alias": "datePickerComboInlineFlex"; "required": false; }; "aiportSelectId": { "alias": "aiportSelectId"; "required": false; }; "passengerSelectId": { "alias": "passengerSelectId"; "required": false; }; "datePickerId": { "alias": "datePickerId"; "required": false; }; "tripTypeId": { "alias": "tripTypeId"; "required": false; }; "transitTypeId": { "alias": "transitTypeId"; "required": false; }; }, { "originOpenChange": "originOpenChange"; "destinationOpenChange": "destinationOpenChange"; "passengerSelectOpenChange": "passengerSelectOpenChange"; "originChange": "originChange"; "destinationChange": "destinationChange"; "passengersChange": "passengersChange"; "tripTypeChange": "tripTypeChange"; "directOnlyChange": "directOnlyChange"; "outboundSelectedDateChange": "outboundSelectedDateChange"; "inboundSelectedDateChange": "inboundSelectedDateChange"; "outboundOpenChange": "outboundOpenChange"; "inboundOpenChange": "inboundOpenChange"; "outboundMonthChange": "outboundMonthChange"; "inboundMonthChange": "inboundMonthChange"; "focusOnNextChange": "focusOnNextChange"; "positionChange": "positionChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FilterComponent, "nas-filter", never, { "airportRelations": { "alias": "airportRelations"; "required": false; }; "ariaLabelClear": { "alias": "ariaLabelClear"; "required": false; }; "ariaLabelSubtract": { "alias": "ariaLabelSubtract"; "required": false; }; "ariaLabelBackdrop": { "alias": "ariaLabelBackdrop"; "required": false; }; "ariaLabelAdd": { "alias": "ariaLabelAdd"; "required": false; }; "allowedOriginAirports": { "alias": "allowedOriginAirports"; "required": false; }; "allowedDestinationAirports": { "alias": "allowedDestinationAirports"; "required": false; }; "displayLatestSearches": { "alias": "displayLatestSearches"; "required": false; }; "useSwitch": { "alias": "useSwitch"; "required": false; }; "displayClosestAirports": { "alias": "displayClosestAirports"; "required": false; }; "originAirportCode": { "alias": "originAirportCode"; "required": false; }; "destinationAirportCode": { "alias": "destinationAirportCode"; "required": false; }; "passengerSelectLabel": { "alias": "passengerSelectLabel"; "required": false; }; "maxPaxCount": { "alias": "maxPaxCount"; "required": false; }; "passengers": { "alias": "passengers"; "required": false; }; "minAdultCount": { "alias": "minAdultCount"; "required": false; }; "tripSwitchRoundTripLabel": { "alias": "tripSwitchRoundTripLabel"; "required": false; }; "tripSwitchOneWayLabel": { "alias": "tripSwitchOneWayLabel"; "required": false; }; "directOnlyLabel": { "alias": "directOnlyLabel"; "required": false; }; "directTransitLabel": { "alias": "directTransitLabel"; "required": false; }; "minimizeOnMobile": { "alias": "minimizeOnMobile"; "required": false; }; "expandedAccordionMobile": { "alias": "expandedAccordionMobile"; "required": false; }; "defaultSummarySeparator": { "alias": "defaultSummarySeparator"; "required": false; }; "lastSummarySeparator": { "alias": "lastSummarySeparator"; "required": false; }; "passengerSelectTitle": { "alias": "passengerSelectTitle"; "required": false; }; "passengerSelectAdultsLabel": { "alias": "passengerSelectAdultsLabel"; "required": false; }; "passengerSelectYouthsLabel": { "alias": "passengerSelectYouthsLabel"; "required": false; }; "passengerSelectYoungAdultsLabel": { "alias": "passengerSelectYoungAdultsLabel"; "required": false; }; "passengerSelectChildrenLabel": { "alias": "passengerSelectChildrenLabel"; "required": false; }; "passengerSelectInfantsLabel": { "alias": "passengerSelectInfantsLabel"; "required": false; }; "groupBookingLabel": { "alias": "groupBookingLabel"; "required": false; }; "allAirportsLabel": { "alias": "allAirportsLabel"; "required": false; }; "latestSearchesLabel": { "alias": "latestSearchesLabel"; "required": false; }; "closestAirportsLabel": { "alias": "closestAirportsLabel"; "required": false; }; "selectOriginFirstLabel": { "alias": "selectOriginFirstLabel"; "required": false; }; "labelOrigin": { "alias": "labelOrigin"; "required": false; }; "placeholderOrigin": { "alias": "placeholderOrigin"; "required": false; }; "labelDestination": { "alias": "labelDestination"; "required": false; }; "geolocationLabel": { "alias": "geolocationLabel"; "required": false; }; "geolocationBlockedLabel": { "alias": "geolocationBlockedLabel"; "required": false; }; "placeholderDestination": { "alias": "placeholderDestination"; "required": false; }; "keepSelection": { "alias": "keepSelection"; "required": false; }; "editSearchTitle": { "alias": "editSearchTitle"; "required": false; }; "nasFormGroup": { "alias": "nasFormGroup"; "required": false; }; "nasFormControlNameOrigin": { "alias": "nasFormControlNameOrigin"; "required": false; }; "nasFormControlNameDestination": { "alias": "nasFormControlNameDestination"; "required": false; }; "nasFormControlNameTripType": { "alias": "nasFormControlNameTripType"; "required": false; }; "nasFormControlNameDirectOnly": { "alias": "nasFormControlNameDirectOnly"; "required": false; }; "nasFormControlNameOutbound": { "alias": "nasFormControlNameOutbound"; "required": false; }; "nasFormControlNameInbound": { "alias": "nasFormControlNameInbound"; "required": false; }; "nasFormControlGroupBooking": { "alias": "nasFormControlGroupBooking"; "required": false; }; "overrideOrigin": { "alias": "overrideOrigin"; "required": false; }; "enableSuggestions": { "alias": "enableSuggestions"; "required": false; }; "closestAirports": { "alias": "closestAirports"; "required": false; }; "minimize": { "alias": "minimize"; "required": false; }; "airports": { "alias": "airports"; "required": false; }; "tripType": { "alias": "tripType"; "required": false; }; "directOnly": { "alias": "directOnly"; "required": false; }; "groupBookingLimit": { "alias": "groupBookingLimit"; "required": false; }; "ariaLabelPreviousMonth": { "alias": "ariaLabelPreviousMonth"; "required": false; }; "ariaLabelNextMonth": { "alias": "ariaLabelNextMonth"; "required": false; }; "noAvailableFlightsLabel": { "alias": "noAvailableFlightsLabel"; "required": false; }; "availableFlightsLabel": { "alias": "availableFlightsLabel"; "required": false; }; "disablePastSelection": { "alias": "disablePastSelection"; "required": false; }; "outboundLabel": { "alias": "outboundLabel"; "required": false; }; "inboundLabel": { "alias": "inboundLabel"; "required": false; }; "availability": { "alias": "availability"; "required": false; }; "outboundAvailableDates": { "alias": "outboundAvailableDates"; "required": false; }; "inboundAvailableDates": { "alias": "inboundAvailableDates"; "required": false; }; "times": { "alias": "times"; "required": false; }; "dateDisplayFormat": { "alias": "dateDisplayFormat"; "required": false; }; "timeDisplayFormat": { "alias": "timeDisplayFormat"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "outboundDisabled": { "alias": "outboundDisabled"; "required": false; }; "inboundDisabled": { "alias": "inboundDisabled"; "required": false; }; "enableDatepickers": { "alias": "enableDatepickers"; "required": false; }; "minimizingLabel": { "alias": "minimizingLabel"; "required": false; }; "maximizingLabel": { "alias": "maximizingLabel"; "required": false; }; "directOnlyMobileLabel": { "alias": "directOnlyMobileLabel"; "required": false; }; "orLabel": { "alias": "orLabel"; "required": false; }; "passengersTitleLabel": { "alias": "passengersTitleLabel"; "required": false; }; "invalidDestinationText": { "alias": "invalidDestinationText"; "required": false; }; "outboundSelectedDate": { "alias": "outboundSelectedDate"; "required": false; }; "inboundSelectedDate": { "alias": "inboundSelectedDate"; "required": false; }; "enableDestinationSelect": { "alias": "enableDestinationSelect"; "required": false; }; "enablePassengersSelect": { "alias": "enablePassengersSelect"; "required": false; }; "enableTripSwitch": { "alias": "enableTripSwitch"; "required": false; }; "enableTransitSwitch": { "alias": "enableTransitSwitch"; "required": false; }; "datePickerComboInlineFlex": { "alias": "datePickerComboInlineFlex"; "required": false; }; "airportSelectId": { "alias": "airportSelectId"; "required": false; }; "passengerSelectId": { "alias": "passengerSelectId"; "required": false; }; "datePickerId": { "alias": "datePickerId"; "required": false; }; "tripTypeId": { "alias": "tripTypeId"; "required": false; }; "transitTypeId": { "alias": "transitTypeId"; "required": false; }; }, { "originOpenChange": "originOpenChange"; "destinationOpenChange": "destinationOpenChange"; "passengerSelectOpenChange": "passengerSelectOpenChange"; "originChange": "originChange"; "destinationChange": "destinationChange"; "passengersChange": "passengersChange"; "tripTypeChange": "tripTypeChange"; "directOnlyChange": "directOnlyChange"; "outboundSelectedDateChange": "outboundSelectedDateChange"; "inboundSelectedDateChange": "inboundSelectedDateChange"; "outboundOpenChange": "outboundOpenChange"; "inboundOpenChange": "inboundOpenChange"; "outboundMonthChange": "outboundMonthChange"; "inboundMonthChange": "inboundMonthChange"; "focusOnNextChange": "focusOnNextChange"; "positionChange": "positionChange"; }, never, never, false, never>;
 }

package/package.json

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

package/styles/1__settings/_colors.scss

@@ -0,0 +1,136 @@
+// Colors
+@function color($color-name, $color-variant: 'base') {
+    @return map-get(map-get($base-colors, $color-name), $color-variant);
+}
+
+// Find the contrast color to any color hex
+@function color-contrast($n) {
+    $color-brightness: round((red($n) * 299) + (green($n) * 587) + (blue($n) * 114) / 1000);
+    $light-color: round((red(#fff) * 299) + (green(#fff) * 587) + (blue(#fff) * 114) / 1000);
+
+    @if abs($color-brightness) < ($light-color / 2) {
+        @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);
+}
+
+// Add percentage of black to a color
+@function shade($color, $percent) {
+    @return mix(black, $color, $percent);
+}
+
+$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)
+);
+
+// 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);
+
+// 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);
+
+// 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);
+
+// 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);
+
+// 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

@@ -0,0 +1,274 @@
+@import '../3__base/animations';
+
+// 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);
+
+      @if (length($f-weight) > 1) {
+        font-family: nth($f-weight, 2), map-get($family, fallback);
+        font-weight: nth($f-weight, 1);
+      }
+
+      @else {
+        font-family: map-get($family, font), map-get($family, fallback);
+        font-weight: $f-weight;
+      }
+    }
+
+    @else {
+      font-family: map-get($family, font), map-get($family, fallback);
+    }
+  }
+
+  @else {
+    font-family: map-get($family, font), map-get($family, fallback);
+  }
+}
+
+// @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 == $size-variant {
+      @include make-font-size($fs-font-size, $skip-line-height);
+    }
+
+    @else {
+      @if map-has-key($fs-breakpoints, $fs-breakpoint) {
+        $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") {
+    font-size: nth($fs-font-size, 1);
+
+    @if ($skip-line-height !=true and length($fs-font-size) > 1) {
+      line-height: nth($fs-font-size, 2);
+    }
+  }
+
+  @else {
+    font-size: $fs-font-size;
+
+    @if ($skip-line-height !=true) {
+      line-height: nth($fs-font-size, 1);
+    }
+  }
+}
+
+// Input placeholder
+@mixin input-placeholder {
+  &:-moz-placeholder {
+    @content;
+  }
+
+  &::-moz-placeholder {
+    @content;
+  }
+
+  &:-ms-input-placeholder {
+    @content;
+  }
+
+  &::-webkit-input-placeholder {
+    @content;
+  }
+}
+
+// Media queries
+@mixin min-width($name) {
+  @if not map-has-key($breakpoints, $name) {
+    @media (min-width: $name) {
+      @content;
+    }
+  }
+
+  @else {
+    @media (min-width: map-get($breakpoints, $name)) {
+      @content;
+    }
+  }
+}
+
+// Some very rare occations we might need this one.. USE WITH CARE!!!
+@mixin between($min, $max) {
+  @if not map-has-key($breakpoints, $min) {
+    @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)) {
+      @content;
+    }
+  }
+}
+
+// Animation delay for childs
+@mixin animation-delay($count, $delay, $initial: 0) {
+  animation-delay: (($count + 1) * $delay) + $initial;
+
+  @for $i from 1 through $count {
+    &:nth-child(#{$i}) {
+      animation-delay: ($i * $delay) + $initial;
+    }
+  }
+}
+
+// Transition delay for childs
+@mixin transition-delay($count, $delay, $initial: 0) {
+  transition-delay: (($count + 1) * $delay) + $initial;
+
+  @for $i from 1 through $count {
+    &:nth-child(#{$i}) {
+      transition-delay: ($i * $delay) + $initial;
+    }
+  }
+}
+
+// Flip in animation. Rember to put perspective: 1000px on parent
+@mixin flip-in($time: 550ms, $pos-y: top, $pos-x: center) {
+  transform-origin: $pos-x $pos-y;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  animation: flip-in $time ease both;
+}
+
+// Flip in animation. Rember to put perspective: 1000px on parent
+@mixin flip-out($time: 200ms, $pos-y: top, $pos-x: center) {
+  transform-origin: $pos-x $pos-y;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  animation: flip-out $time ease both;
+}
+
+// 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;
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+  }
+
+  &-enter {
+    animation: flip-in $time-in ease both;
+  }
+
+  &-leave-active {
+    animation: flip-out $time-out ease-out both;
+  }
+}
+
+@mixin pop-in-from-top($time: 500ms) {
+  animation: pop-in-from-top $time linear both;
+}
+
+// Full-width
+@mixin full-width {
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+}
+
+// No select
+@mixin no-select {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+
+  -webkit-user-drag: none;
+  -moz-user-drag: none;
+  user-drag: none;
+}
+
+// Screenreaders only
+@mixin screenreaders-only($breakpoint: null) {
+  @if ($breakpoint !=null) {
+    @include min-width($breakpoint) {
+      position: absolute;
+      overflow: hidden;
+      width: 1px;
+      height: 1px;
+    }
+  }
+
+  @else {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+  }
+}
+
+// Hyphens: use with care...
+@mixin hyphens {
+  overflow-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
+}
+
+// Overflow text
+@mixin text-overflow {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+// 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;
+}

package/styles/1__settings/_type.scss

@@ -0,0 +1,23 @@
+$fallback: Arial, 'Apercu', 'Helvetica Neue', Helvetica, sans-serif;
+
+$fonts: (
+    base: (font: 'NorwegianTextPro',
+        fallback: $fallback,
+        normal: normal,
+        bold: 700),
+    heading: (font: 'NorwegianDisplayPro',
+        fallback: $fallback,
+        bold: 700)
+);
+
+$font-size: (
+    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/1__settings/_vars.scss

@@ -0,0 +1,61 @@
+// Breakpoints
+$breakpoints: (
+    xs: 380px, // Small and up
+    md: 640px, // Medium and up
+    lg: 1000px, // Large and up
+    xl: 1280px // Extra large and up
+);
+
+// Container max widths
+$container-width: 1180px;
+$container-width--medium: 820px;
+$container-width--tight: 600px;
+$container-width--wide: 1600px;
+
+
+// Spacing
+$spacing--xxxlarge: 96px;
+$spacing--xxlarge: 60px;
+$spacing--xlarge: 48px;
+$spacing--large: 36px;
+$spacing: 24px;
+$spacing--medium: 16px;
+$spacing--small: 12px;
+$spacing--xsmall: 9px;
+$spacing--xxsmall: 6px;
+$spacing--xxxsmall: 3px;
+
+$indention: $spacing + $spacing--xxxsmall;
+
+
+// Border-width
+$border-width--small: 1px;
+$border-width: 2px;
+$border-width--large: 3px;
+$border-width--xlarge: 6px;
+$border-width--xxlarge: 9px;
+$border-width--xxxlarge: 12px;
+
+
+// Border radius
+$border-radius--small: 4px;
+$border-radius: 6px;
+$border-radius--large: 12px;
+
+
+// Better easings
+// http://easings.net/
+$swift-out: cubic-bezier(0, 0, 0.1, 1);
+$ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
+$ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+
+
+// Header
+$header-height: 70px;
+
+
+// Z-Index levels
+$level-1: 10;
+$level-2: 20;
+$level-3: 30;
+$level-4: 40;

package/styles/2__generic/_fonts.scss

@@ -0,0 +1,38 @@
+$import-fonts: (
+    NorwegianDisplayPro-Regular: ('NorwegianDisplayPro',
+        'NorwegianDisplayPro-Regular',
+        normal,
+        normal),
+    NorwegianDisplayPro-Bold: ('NorwegianDisplayPro',
+        'NorwegianDisplayPro-Bold',
+        bold,
+        normal),
+    NorwegianTextPro-Regular: ('NorwegianTextPro',
+        'NorwegianTextPro-Regular',
+        normal,
+        normal),
+    NorwegianTextPro-Italic: ('NorwegianTextPro',
+        'NorwegianTextPro-RegularItalic',
+        normal,
+        italic),
+    NorwegianTextPro-Bold: ('NorwegianTextPro',
+        'NorwegianTextPro-Bold',
+        bold,
+        normal),
+    NorwegianTextPro-BoldItalic: ('NorwegianTextPro',
+        'NorwegianTextPro-BoldItalic',
+        bold,
+        italic)
+);
+
+@each $key,
+$value in $import-fonts {
+    @font-face {
+        font-family: '#{nth($value, 1)}';
+        font-style: nth($value, 4);
+        font-weight: nth($value, 3);
+        font-display: fallback;
+        src: url('../../assets/fonts/#{nth($value, 2)}.woff2') format('woff2'),
+        url('../../assets/fonts/#{nth($value, 2)}.woff') format('woff');
+    }
+}