@norwegian/core-components 6.60.0 → 7.0.0

package/styles/3__base/_heading.scss

@@ -36,75 +36,83 @@ h6,
 
 h1,
 .heading1 {
-    @include font-size(large);
-    @include font(base, bold);
+    @include font(heading, bold);
+    @include font-size(xxxlarge);
     margin: 0 0 $spacing;
-    color: color(secondary);
+    color: $typography-text-default;
     letter-spacing: -0.03em;
 
     @include min-width(md) {
-        @include font-size(xlarge);
+        @include font-size(xxxlarge, false, mobile);
     }
 }
 
 h2,
 .heading2 {
-    @include font-size(medium);
-    @include font(base, bold);
+    @include font(heading, bold);
+    @include font-size(xxlarge);
     letter-spacing: -0.03em;
     margin: 0 0 $spacing--xsmall;
 
     @include min-width(md) {
-        @include font-size(large);
+        @include font-size(xxlarge, false, mobile);
     }
 }
 
 h3,
 .heading3 {
-    @include font-size(regular);
-    @include font(base, bold);
+    @include font(heading, bold);
+    @include font-size(xlarge);
     letter-spacing: -0.03em;
     margin: 0 0 $spacing--xxxsmall;
 
     @include min-width(md) {
-        @include font-size(medium);
+        @include font-size(xlarge, false, mobile);
     }
 
 }
 
 h4,
 .heading4 {
-    @include font(base, bold);
-    @include font-size(xregular);
+    @include font(heading, bold);
+    @include font-size(large);
     letter-spacing: 0;
     margin: 0 0 $spacing--xxxsmall;
 
     @include min-width(md) {
-        @include font-size(regular);
+        @include font-size(large, false, mobile);
     }
 }
 
 h5,
 .heading5 {
-    @include font-size(xregular);
-    @include font(base, bold);
+    @include font(heading, bold);
+    @include font-size(medium);
     letter-spacing: 0;
     margin: 0 0 $spacing--xxxsmall;
+
+    @include min-width(md) {
+        @include font-size(medium, false, mobile);
+    }
 }
 
 h6,
 .heading6 {
-    @include font(base, bold);
-    @include font-size(small);
+    @include font(heading, bold);
+    @include font-size(regular);
     margin: 0 0 $spacing--xxxsmall;
 
     a {
-        color: color(secondary);
+        color: $typography-text-default;
         border-bottom: 0;
     }
+
+    @include min-width(md) {
+        @include font-size(regular, false, mobile);
+    }
 }
 
 .heading-line {
-    border-bottom: $border-width solid color(secondary);
+    border-bottom: $border-width solid $border-heavy;
     padding-bottom: $spacing--small;
-}
+}

package/styles/3__base/_hr.scss

@@ -3,7 +3,7 @@ hr,
     margin: $spacing--small 0 $spacing;
     padding: 0;
     border: 0;
-    border-top: $border-width--large solid color(neutral, light);
+    border-top: $border-width--large solid $border-muted;
 
     @include min-width(md) {
         margin: $spacing 0;
@@ -12,7 +12,7 @@ hr,
 
 .separator {
     &--secondary {
-        border-color: color(secondary);
+        border-color: $border-heavy;
     }
 
     &--large {
@@ -21,10 +21,10 @@ hr,
 
         @include min-width(md) {
             border-top-width: $border-width--xlarge;
-	    }
+        }
     }
 
     &--small {
         border-top-width: $border-width--small;
     }
-}
+}

package/styles/3__base/_input.scss

@@ -14,15 +14,15 @@ input[type='tel'] {
     padding: $spacing--small;
     box-sizing: border-box;
     border: 0;
-    color: $color-text;
+    color: $typography-text-default;
     @include font-size(small);
     border-radius: 0;
-    background-color: $color-light;
+    background-color: $background-surface-default;
 
     transition: all 200ms $swift-out;
 
     &[disabled] {
-        color: color(neutral, dark);
+        color: $typography-text-muted;
     }
 
     @include input-placeholder {

package/styles/3__base/_link.scss

@@ -1,48 +1,48 @@
 // Link
 a,
 .link {
-    color: $color-links;
+    color: $typography-text-link;
     cursor: pointer;
     text-decoration: none;
-    border-bottom: $border-width solid $color-links-border;
+    border-bottom: $border-width solid $border-muted;
 
     &:hover,
     &:focus {
-        color: $color-links--hover;
-        border-color: $color-links--hover;
+        color: $typography-text-default;
+        border-color: $border-heavy;
     }
 
     &--disabled {
-        color: $color-links--hover;
-        border-bottom: $border-width solid color(neutral, xxlight);
+        color: $typography-text-default;
+        border-bottom: $border-width solid $border-muted;
         cursor: default;
 
         &:hover,
         &:focus {
-            color: $color-links--hover;
-            border-color: color(neutral, xxlight);
+            color: $typography-text-default;
+            border-color: $border-muted;
         }
     }
 }
 
 .link--light {
-    color: $color-light;
-    border-bottom: $border-width solid $color-light;
+    color: $typography-text-inverted;
+    border-bottom: $border-width solid $border-inverted;
 
     &:hover,
     &:focus {
-        color: rgba($color-light, 0.8);
-        border-color: rgba($color-light, 0.8);
+        color: rgba($typography-text-inverted, 0.8);
+        border-color: rgba($border-inverted, 0.8);
     }
 }
 
 .link--secondary {
-    color: color(secondary);
-    border-bottom: $border-width solid color(secondary);
+    color: $typography-text-default;
+    border-bottom: $border-width solid $border-heavy;
 
     &:hover,
     &:focus {
-        color: color(primary);
-        border-color: color(primary);
+        color: $typography-text-link;
+        border-color: $border-primary;
     }
-}
+}

package/styles/3__base/_table.scss

@@ -12,7 +12,9 @@
         @include font(base, bold);
 
         tr {
-            td, th {
+
+            td,
+            th {
                 padding: $spacing--xsmall 0;
                 text-align: left;
             }
@@ -26,9 +28,11 @@
     tbody {
 
         tr {
-            td, th {
+
+            td,
+            th {
                 padding: $spacing--xsmall 0;
-                border-top: $border-width solid color(neutral, xxlight);
+                border-top: $border-width solid $border-muted;
 
                 code {
                     margin: $spacing--xsmall $spacing--large 0 0;
@@ -39,6 +43,6 @@
 
     .top__row {
         padding: $spacing--xsmall 0;
-        border-top: $border-width solid color(neutral, light);
+        border-top: $border-width solid $border-muted;
     }
-}
+}

package/styles/3__base/_type.scss

@@ -24,7 +24,7 @@ em {
 
 .label {
     margin: 0 0 $spacing--xxxsmall;
-    color: color(neutral, dark);
+    color: $typography-text-muted;
 }
 
 .preamble {
@@ -35,7 +35,7 @@ em {
 }
 
 .text-muted {
-    color: $color-muted;
+    color: $typography-text-muted;
 }
 
 blockquote {
@@ -64,6 +64,6 @@ code {
     border-radius: 4px;
     padding: 1px 4px;
     margin-bottom: 4px;
-    border: 1px solid #d8d8d8;
-    background-color: #fff;
+    border: 1px solid $border-muted;
+    background-color: $background-surface-default;
 }

package/assets/documentation/autocomplete-new/autocomplete-new.md

@@ -1 +0,0 @@
-The autocomplete component is a generic dropdown with possibility to dynamically pass in data models.

package/assets/documentation/datepicker/calendar/calendar.md

@@ -1,3 +0,0 @@
-Calendar is a compelte month view of dates to pick the date from.
-It accepts 'Array' of complete month data to show in 'DayModel' format. i.e. Array<DayModel>
-once selected user can get the date with an event.

package/assets/documentation/number-field-new/number-field-new.md

@@ -1 +0,0 @@
-Number field is a number selector, e.x. selector for passengers (adults, child, infant, etc). The Number field uses a native `input` element, with two native `button` elements to add and subtract. Number field component support max and min limits, and two different styles; compact and simple.

package/assets/documentation/page-header-old/page-header-old.md

@@ -1 +0,0 @@
-The `nas-page-header-old` component is used as the page header for a Norwegian site, and supports links and search field in header, and any content put into it. If no content is added inside the `nas-page-header-old` component, the hamburger menu will not be displayed.

package/assets/documentation/weather-icon/weather-icon.md

@@ -1 +0,0 @@
-`nas-weather-icon` is a dynamic icon which created inline svg based on weather and temperature input.