@orangesk/orange-design-system 2.0.0-beta.37 → 2.0.0-beta.39

package/src/components/Tooltip/styles/mixins.scss

@@ -1,9 +1,9 @@
-@use 'sass:math' as math;
-@use '../../../styles/tokens/base';
-@use '../../../styles/tools/generate';
-@use '../../../styles/tools/convert';
-@use '../../../styles/tools/layout';
-@use './config';
+@use "sass:math" as math;
+@use "../../../styles/tokens/base";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tools/convert";
+@use "../../../styles/tools/layout";
+@use "./config";
 
 @mixin tooltip($config: config.$layout, $offset: config.$offset) {
   position: absolute;
@@ -18,7 +18,7 @@
   }
 
   @each $direction, $opposite in config.$direction-opposites {
-    &[data-popper-placement^='#{$direction}'] {
+    &[data-popper-placement^="#{$direction}"] {
       padding-#{$opposite}: $offset;
     }
   }
@@ -42,13 +42,14 @@
   $size-unitless: convert.strip-units($size);
   $hypotenuse: math.sqrt(
       math.pow($size-unitless, 2) + math.pow($size-unitless, 2)
-    ) * 1rem;
+    ) *
+    1rem;
   $arrow-position: $offset - math.div($hypotenuse, 4);
 
   display: block;
 
   &::before {
-    content: '';
+    content: "";
     display: block;
     width: $size;
     height: $size;
@@ -59,13 +60,13 @@
   }
 
   @each $direction, $opposite in config.$direction-opposites {
-    [data-popper-placement^='#{$direction}'] & {
+    [data-popper-placement^="#{$direction}"] & {
       #{$opposite}: $arrow-position;
     }
   }
 
   @each $direction, $reset-directions in config.$direction-border-color-reset {
-    [data-popper-placement^='#{$direction}'] &:before {
+    [data-popper-placement^="#{$direction}"] &:before {
       @each $reset-direction in $reset-directions {
         border-#{$reset-direction}-color: transparent;
       }
@@ -80,7 +81,7 @@
   @include base.focusring-round;
 
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     top: convert.to-rem(-10px);
     left: convert.to-rem(-10px);
@@ -91,4 +92,4 @@
 
 @mixin info-tooltip-active-icon {
   color: config.$icon-active-color;
-}
+}

package/src/components/index.ts

@@ -60,7 +60,7 @@ import { IconList, Item } from "./IconList";
 import { Image } from "./Image";
 import { Link } from "./Link";
 import { List, ListItem } from "./List";
-import { Loader } from "./Loader";
+import { Loader, LoaderFullscreen } from "./Loader";
 import { Megamenu, MegamenuBlog } from "./Megamenu";
 import {
   Modal,
@@ -155,6 +155,7 @@ export {
   List,
   ListItem,
   Loader,
+  LoaderFullscreen,
   Megamenu,
   MegamenuBlog,
   Message,

package/src/styles/export/breakpoint.scss

@@ -1,5 +1,5 @@
 @use "sass:string";
-@use '../tokens/breakpoint';
+@use "../tokens/breakpoint";
 
 :export {
   @each $key, $value in breakpoint.$map {

package/src/styles/export/space.scss

@@ -1,5 +1,5 @@
 @use "sass:string";
-@use '../tokens/space';
+@use "../tokens/space";
 
 :export {
   @each $key, $value in space.$map {

package/src/styles/tokens/breakpoint.scss

@@ -1,7 +1,7 @@
 @use "sass:list";
 @use "sass:meta";
-@use 'sass:map' as sassmap;
-@use '../tools/map';
+@use "sass:map" as sassmap;
+@use "../tools/map";
 
 $map: (
   xs: 0,
@@ -12,78 +12,93 @@ $map: (
   xxl: 1380px,
 );
 
-@mixin get( $breakpoint, $param: false) {
-  @if (not sassmap.has-key($map, $breakpoint) and $breakpoint != 'default') {
+@mixin get($breakpoint, $param: false) {
+  @if (not sassmap.has-key($map, $breakpoint) and $breakpoint != "default") {
     @warn 'Breakpoint "#{$breakpoint}" is not defined.';
 
-    @debug 'Available breakpoints:'; // stylelint-disable-line at-rule-disallowed-list
+    @debug "Available breakpoints:"; // stylelint-disable-line at-rule-disallowed-list
     @debug $map; // stylelint-disable-line at-rule-disallowed-list
   }
 
   @if (
     ($breakpoint == list.nth(sassmap.keys($map), 1) and not $param) or
-    ( not $breakpoint ) or
-    ( $breakpoint == 'default' )
+      (not $breakpoint) or
+      ($breakpoint == "default")
   ) {
     @content;
   } @else if not $param {
     // no param, just a standard mobile first media query
-    @if sassmap.has-key( $map, $breakpoint ) {
+    @if sassmap.has-key($map, $breakpoint) {
       // breakpoint is in breakpoint map, let's use stored value
-      @media screen and (min-width: sassmap.get($map, $breakpoint)) { @content; };
+      @media screen and (min-width: sassmap.get($map, $breakpoint)) {
+        @content;
+      }
     } @else {
       // breakpoint is not in breakpoint map, let's use custom value
-      @media screen and (min-width: $breakpoint) { @content; };
+      @media screen and (min-width: $breakpoint) {
+        @content;
+      }
     }
-  } @else if (
-    $param == 'down' and
-    map.next($map, $breakpoint)
-  ) {
+  } @else if ($param == "down" and map.next($map, $breakpoint)) {
     @media screen and (max-width: map.next($map, $breakpoint) - 0.02px) {
       @content;
     }
-  } @else if (
-    $param == 'down' and
-    not sassmap.has-key($map, $breakpoint)
-  ) {
-    @media screen and (max-width: $breakpoint) { @content; };
-  } @else if (
-    $param == 'only' and
-    map.next($map, $breakpoint)
-  ) {
-    @media screen and
-      (min-width: sassmap.get($map, $breakpoint)) and
-      (max-width: map.next($map, $breakpoint) - 0.02px) { @content; };
-  } @else if (
-    sassmap.has-key( $map, $param) and
-    sassmap.has-key( $map, $breakpoint)
-  ) {
-    @media screen and
-      (min-width: sassmap.get($map, $breakpoint)) and
-      (max-width: sassmap.get($map, $param) - 0.02px) { @content; };
-  } @else if (
-    $param == 'downfrom' and
-    sassmap.get($map, $breakpoint) > 0 and
-    $breakpoint != 'xs'
-  ) {
+  } @else if ($param == "down" and not sassmap.has-key($map, $breakpoint)) {
+    @media screen and (max-width: $breakpoint) {
+      @content;
+    }
+  } @else if ($param == "only" and map.next($map, $breakpoint)) {
+    @media screen and (min-width: sassmap.get($map, $breakpoint)) and (max-width: map.next($map, $breakpoint) - 0.02px) {
+      @content;
+    }
+  } @else if
+    (sassmap.has-key($map, $param) and sassmap.has-key($map, $breakpoint))
+  {
+    @media screen and (min-width: sassmap.get($map, $breakpoint)) and (max-width: sassmap.get($map, $param) - 0.02px) {
+      @content;
+    }
+  } @else if
+    (
+      $param ==
+        "downfrom" and
+        sassmap.get($map, $breakpoint) >
+        0 and
+        $breakpoint !=
+        "xs"
+    )
+  {
     @media screen and (max-width: sassmap.get($map, $breakpoint) - 0.02px) {
       @content;
     } // -1
-  } @else if (meta.type-of($param) == 'number') {
+  } @else if (meta.type-of($param) == "number") {
     @if sassmap.has-key($map, $breakpoint) {
       // breakpoint is in breakpoint map
-      @media screen and
-        (min-width: sassmap.get($map, $breakpoint)) and
-        (max-width: $param) { @content; };
+      @media screen and (min-width: sassmap.get($map, $breakpoint)) and (max-width: $param) {
+        @content;
+      }
     } @else {
       // breakpoint is not in breakpoint map, let's use custom value
-      @media screen and (min-width: $breakpoint) and (max-width: $param) { @content; }
+      @media screen and (min-width: $breakpoint) and (max-width: $param) {
+        @content;
+      }
     }
-  } @else if (
-    not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'down') and
-    not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'only') and
-    not ($breakpoint == list.nth(sassmap.keys($map), 1) and $param == 'downfrom')
-  ) {
+  } @else if
+    (
+      not
+        (
+          $breakpoint == list.nth(sassmap.keys($map), -1) and $param == "down"
+        ) and not
+        (
+          $breakpoint == list.nth(sassmap.keys($map), -1) and $param == "only"
+        ) and not
+        (
+          $breakpoint ==
+            list.nth(sassmap.keys($map), 1) and
+            $param ==
+            "downfrom"
+        )
+    )
+  {
     // do nothing on known edge cases. we just dont generate any code.
     @warn 'Breakpoint is not configured properly #{$breakpoint}, #{$param}';
   }
@@ -92,7 +107,7 @@ $map: (
 @mixin each() {
   @each $breakpoint, $size in $map {
     @include get($breakpoint) {
-      @content($breakpoint);
+      @content ($breakpoint);
     }
   }
 }

package/src/styles/tokens/space.scss

@@ -1,14 +1,14 @@
 @use "sass:map";
 @use "sass:math";
-@use '../tools/convert';
+@use "../tools/convert";
 
 $map: (
-  'none': 0,
-  'xsmall': 5px,
-  'small': 10px,
-  'medium': 20px,
-  'large': 30px,
-  'xlarge': 60px,
+  "none": 0,
+  "xsmall": 5px,
+  "small": 10px,
+  "medium": 20px,
+  "large": 30px,
+  "xlarge": 60px,
 );
 
 /// Get space size from $space
@@ -16,11 +16,11 @@ $map: (
 /// @example
 ///   get-space();
 ///   get-space('small');
-@function get($size: 'medium') {
+@function get($size: "medium") {
   @if map.has-key($map, $size) {
     $space: map.get($map, $size);
 
-    @return if(math.unit($space) == 'rem', $space, convert.to-rem($space));
+    @return if(math.unit($space) == "rem", $space, convert.to-rem($space));
   } @else {
     @error 'Cannot find key ($size) \'#{$size}\' in $space \'#{$space}\'';
   }

package/src/styles/tools/generate.scss

@@ -1,5 +1,5 @@
-@use '../tokens/breakpoint';
-@use './map' as *;
+@use "../tokens/breakpoint";
+@use "./map" as *;
 
 /// Get css propeties from map
 ///
@@ -68,7 +68,7 @@
 /// @param {Map} $map - map
 /// @param {Map} $className - class name of element
 /// @param {Map} $classSuffix - suffix for class name of element
-@mixin variants($map, $className: '', $classSuffix: '') {
+@mixin variants($map, $className: "", $classSuffix: "") {
   @each $variant, $props in $map {
     #{if(&, "&", "")}#{$className + variant-name($variant) + $classSuffix} {
       @include css-map($props);
@@ -81,7 +81,7 @@
 /// @param {Map} $map - map
 /// @param {Map} $className - class name of element
 /// @param {Map} $classSuffix - suffix for class name of element
-@mixin responsive-variants($map, $className: '', $classSuffix: '') {
+@mixin responsive-variants($map, $className: "", $classSuffix: "") {
   @each $breakpoint, $props in $map {
     @include breakpoint.get($breakpoint) {
       @include variants($props, $className, $classSuffix);
@@ -97,9 +97,9 @@
 /// // -primary
 ///   variant-name('default')
 ///
-@function variant-name($name, $prefix: '--', $suffix: '') {
+@function variant-name($name, $prefix: "--", $suffix: "") {
   @if not $name or $name == default or $name == xs {
-    @return '';
+    @return "";
   }
 
   @return #{$prefix + $name + $suffix};

package/src/styles/tools/layout.scss

@@ -1,11 +1,11 @@
-@use '../tokens/base';
+@use "../tokens/base";
 
 // -- Nicolas Gallagher's micro clearfix
 @mixin clearfix {
   &::before,
   &::after {
     // For modern browsers
-    content: '';
+    content: "";
     display: table;
   }
 
@@ -18,7 +18,7 @@
  * Resets margin-bottom of the last child to zero
  */
 @mixin reset-last-child-margin-bottom {
-  > :not([class*='mb\-']):last-child {
+  > :not([class*="mb\-"]):last-child {
     margin-bottom: 0;
   }
 }

package/src/styles/tools/map.scss

@@ -9,7 +9,7 @@
 /// @param {Mixed} $key - Key to use as a starting point.
 ///
 /// @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns `null`.
-@function next($map, $key, $return: 'value') {
+@function next($map, $key, $return: "value") {
   // Store the keys of the map as a list
   $values: map.keys($map);
 
@@ -26,7 +26,7 @@
   }
   // Otherwise, return the value
   @else {
-    @if $return == 'value' {
+    @if $return == "value" {
       @return map.get($map, list.nth($values, $i));
     } @else {
       @return list.nth($values, $i);

package/src/styles/tools/text.scss

@@ -12,7 +12,7 @@
 /// @param {String} $search - Substring to replace
 /// @param {String} $replace ('') - New value
 /// @return {String} - Updated string
-@function str-replace($string, $search, $replace: '') {
+@function str-replace($string, $search, $replace: "") {
   $index: string.index($string, $search);
 
   @if $index {

package/src/styles/typography/config.scss

@@ -67,12 +67,12 @@ $body-text: (
 
 $heading-base: (
   margin-top: 0,
-  margin-bottom: space.get("large"), // font-weight: bold,
+  margin-bottom: space.get("large"),
 );
 
 $display-base: (
   margin-top: 0,
-  margin-bottom: space.get("large"), // font-weight: bold,
+  margin-bottom: space.get("large"),
 );
 
 $headings: (
@@ -120,27 +120,27 @@ $headings: (
     default: (
       font-size: convert.to-rem(24px),
       line-height: convert.to-rem(28px),
-      font-weight: 300,
+      font-weight: 700,
       letter-spacing: convert.to-rem(-0.6px),
     ),
     md: (
       font-size: convert.to-rem(28px),
       line-height: convert.to-rem(32px),
-      font-weight: 300,
+      font-weight: 700,
       letter-spacing: convert.to-rem(-0.6px),
     ),
   ),
   4: (
     default: (
-      font-size: convert.to-rem(18px),
-      line-height: convert.to-rem(22px),
-      font-weight: 300,
+      font-size: convert.to-rem(16px),
+      line-height: convert.to-rem(20px),
+      font-weight: 700,
       letter-spacing: convert.to-rem(-0.1px),
     ),
     md: (
       font-size: convert.to-rem(24px),
       line-height: convert.to-rem(28px),
-      font-weight: 300,
+      font-weight: 700,
       letter-spacing: convert.to-rem(-0.4px),
     ),
   ),
@@ -148,27 +148,27 @@ $headings: (
     default: (
       font-size: convert.to-rem(16px),
       line-height: convert.to-rem(20px),
-      font-weight: 300,
+      font-weight: 700,
       letter-spacing: convert.to-rem(-0.1px),
     ),
     md: (
       font-size: convert.to-rem(18px),
       line-height: convert.to-rem(22px),
-      font-weight: 300,
+      font-weight: 700,
       letter-spacing: convert.to-rem(-0.2px),
     ),
   ),
   6: (
     default: (
       font-size: convert.to-rem(16px),
-      line-height: convert.to-rem(24px),
-      font-weight: 400,
+      line-height: convert.to-rem(20px),
+      font-weight: 700,
       letter-spacing: convert.to-rem(-0.1px),
     ),
     md: (
       font-size: convert.to-rem(18px),
-      line-height: convert.to-rem(26px),
-      font-weight: 400,
+      line-height: convert.to-rem(22px),
+      font-weight: 700,
       letter-spacing: convert.to-rem(-0.2px),
     ),
   ),

package/src/styles/utilities/horizontal-scroll.scss

@@ -36,7 +36,7 @@
       &:active::-webkit-scrollbar-thumb,
       &::-webkit-scrollbar-thumb:hover,
       &::-webkit-scrollbar-thumb:active {
-        background-color: var(--color-fill-contrast) !important;
+        background-color: var(--color-fill-secondary) !important;
       }
     }
 

package/src/styles/utilities/index.scss

@@ -1,7 +1,7 @@
-@forward 'color';
-@forward 'text';
-@forward 'border';
-@forward 'layout';
-@forward 'visibility';
-@forward 'ordering';
-@forward 'horizontal-scroll';
+@forward "color";
+@forward "text";
+@forward "border";
+@forward "layout";
+@forward "visibility";
+@forward "ordering";
+@forward "horizontal-scroll";