@norwegian/core-components 7.1.2 → 7.2.0

package/styles/1__settings/_colors.scss

@@ -1,136 +0,0 @@
-// 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

@@ -1,274 +0,0 @@
-@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

@@ -1,23 +0,0 @@
-$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

@@ -1,61 +0,0 @@
-// 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

@@ -1,38 +0,0 @@
-$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');
-    }
-}