@inspark/components-web 14.0.12 → 14.0.14

package/index.css

@@ -2166,8 +2166,8 @@ markup:
 Styleguide 6.1.1.9
 */
 .c-btn {
-  display: inline-block; /* [1] */
-  vertical-align: middle; /* [2] */
+  display: inline-flex; /* [1] */
+  align-items: center; /* [2] */
   font: inherit; /* [3] */
   text-align: center; /* [4] */
   margin: 0; /* [4] */
@@ -2204,8 +2204,8 @@ Styleguide 6.1.1.9
 .c-btn:active {
   border-color: transparent;
   box-shadow: none;
-  background-color: black;
-  background-color: var(--ids-theme-btn-default-background--pressed, black);
+  background-color: hsl(225, 7.5949367089%, -9.0196078431%);
+  background-color: var(--ids-theme-btn-default-background--pressed, hsl(225, 7.5949367089%, -9.0196078431%));
   outline: none;
 }
 .c-btn:disabled {
@@ -2329,8 +2329,8 @@ Styleguide 6.1.1.9
 }
 .c-btn_secondary:active {
   border-color: transparent;
-  background-color: black;
-  background-color: var(--ids-theme-btn-secondary-background--pressed, black);
+  background-color: hsl(192.1621621622, 39.7849462366%, -3.5294117647%);
+  background-color: var(--ids-theme-btn-secondary-background--pressed, hsl(192.1621621622, 39.7849462366%, -3.5294117647%));
 }
 
 .c-btn_tertiary {
@@ -2351,8 +2351,8 @@ Styleguide 6.1.1.9
 }
 .c-btn_tertiary:active {
   border-color: transparent;
-  background-color: black;
-  background-color: var(--ids-theme-btn-tertiary-background--pressed, black);
+  background-color: hsl(225, 7.5949367089%, -9.0196078431%);
+  background-color: var(--ids-theme-btn-tertiary-background--pressed, hsl(225, 7.5949367089%, -9.0196078431%));
 }
 
 .c-btn_destroy:active, .c-btn_destroy:hover {
@@ -9753,8 +9753,8 @@ markup:
   color: inherit;
 }
 .c-list-group__item_active .c-list-group__item-text {
-  color: rgba(255, 255, 255, 0.4);
-  color: var(--ids-theme-list-group-active-text-color, rgba(255, 255, 255, 0.4));
+  color: hsla(184.8888888889, 100%, 123.5294117647%, 0.4);
+  color: var(--ids-theme-list-group-active-text-color, hsla(184.8888888889, 100%, 123.5294117647%, 0.4));
 }
 
 .c-list-group_flush .c-list-group__item {
@@ -18286,6 +18286,10 @@ Functional colors
   overflow: hidden;
 }
 
+.u-overflow-visible {
+  overflow: visible;
+}
+
 .u-overflow-y-auto {
   overflow-y: auto;
 }

package/package.json

@@ -1 +1 @@
-{"name":"@inspark/components-web","version":"14.0.12","description":"Web components for Inspark products","main":"index.css","author":"Inspark","private":false,"license":"ISC","homepage":"https://github.com/inspark/inspark-design-system-web#readme","peerDependencies":{"@ng-bootstrap/ng-bootstrap":"^13.1.1","d3":"^7.8.5","ng-inline-svg":"^8.6.3","ng2-nvd3":"^2.0.0","nvd3":"^1.8.5"},"dependencies":{"sass":"^1.70.0"}}
+{"name":"@inspark/components-web","version":"14.0.14","description":"Web components for Inspark products","main":"index.css","author":"Inspark","private":false,"license":"ISC","homepage":"https://github.com/inspark/inspark-design-system-web#readme","peerDependencies":{"@ng-bootstrap/ng-bootstrap":"^13.1.1","d3":"^7.8.5","ng-inline-svg":"^8.6.3","ng2-nvd3":"^2.0.0","nvd3":"^1.8.5"},"dependencies":{"sass":"^1.70.0"}}

package/src/base/_functions.scss

@@ -5,11 +5,13 @@
 // Example usage:
 //
 // @if (inuit-config(debug) == true) { ...  }
-
+@use "sass:color";
+@use "sass:map";
 @function inuit-config($key) {
-  @return map-get($inuit-config, $key);
+  @return map.get($inuit-config, $key);
 }
 
 @function hex-to-rgb-numbers($color) {
-  @return red($color) + ',' + green($color) + ',' + blue($color)
+  @return '#{color.red($color)},#{color.green($color)},#{color.blue($color)}';
+  //@return color.channel($color, "red", $space: rgb) + ',' + color.channel($color, "green", $space: rgb) + ',' + color.channel($color, "blue", $space: rgb)
 }

package/src/base/_mixins.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "./variables";
 @import "./functions";
 @import "../typography/variables";
@@ -767,8 +768,8 @@
 
   html,
   %html {
-    font-size: (12px / 16px) * 1em; /* [1] */
-    line-height: $inuit-global-line-height / $inuit-global-font-size; /* [1] */
+    font-size: math.div(12, 16) * 1em; /* [1] */
+    line-height: math.div($inuit-global-line-height, $inuit-global-font-size); /* [1] */
     //overflow-y: scroll; /* [2] */
     //min-height: 100%; /* [3] */
     overflow-y: auto;
@@ -794,7 +795,7 @@
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
     @include screen_large-and-up {
-      font-size: ($inuit-global-font-size / 16px) * 1em;
+      font-size: math.div($inuit-global-font-size, 16px) * 1em;
     }
   }
 

package/src/base/_variables.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+@use "sass:meta";
 @import "../theme/variables";
 
 ///* ========================================================================
@@ -43,7 +45,7 @@ $inuit-global-line-height:  23px !default;
 // your baseline grid). It is not recommended that you modify these following
 // variables (it can break your vertical rhythm), but if you need to, you can.
 
-$inuit-global-spacing-unit: round($inuit-global-line-height) !default;
+$inuit-global-spacing-unit: math.round($inuit-global-line-height) !default;
 
 
 // How many times larger/smaller than the default should our spacing unit
@@ -70,9 +72,9 @@ $inuit-global-spacing-unit-factor-huge:   4    !default;
   $inuit-global-font-size
   $inuit-global-line-height {
 
-  @if (type-of($_inuit-font-globals) == number) {
+  @if (meta.type-of($_inuit-font-globals) == number) {
 
-    @if (unit($_inuit-font-globals) != "px") {
+    @if (math.unit($_inuit-font-globals) != "px") {
       @error "`#{$_inuit-font-globals}` needs to be a pixel value.";
     }
 
@@ -91,9 +93,9 @@ $inuit-global-spacing-unit-factor-huge:   4    !default;
   $inuit-global-spacing-unit-factor-large
   $inuit-global-spacing-unit-factor-huge {
 
-  @if (type-of($_inuit-spacing-unit) == number) {
+  @if (meta.type-of($_inuit-spacing-unit) == number) {
 
-    @if (unitless($_inuit-spacing-unit) == false) {
+    @if (math.is-unitless($_inuit-spacing-unit) == false) {
       @error "`#{$_inuit-spacing-unit}` needs to be unitless.";
     }
 
@@ -104,11 +106,11 @@ $inuit-global-spacing-unit-factor-huge:   4    !default;
 }
 
 
-// Private/framework-only reassignment. Do not alter anything below.
-$inuit-global-spacing-unit-tiny:  round($inuit-global-spacing-unit * $inuit-global-spacing-unit-factor-tiny);
-$inuit-global-spacing-unit-small: round($inuit-global-spacing-unit * $inuit-global-spacing-unit-factor-small);
-$inuit-global-spacing-unit-large: round($inuit-global-spacing-unit * $inuit-global-spacing-unit-factor-large);
-$inuit-global-spacing-unit-huge:  round($inuit-global-spacing-unit * $inuit-global-spacing-unit-factor-huge);
+// Private framework-only reassignment. Do not alter anything below.
+$inuit-global-spacing-unit-tiny:  math.round($inuit-global-spacing-unit * $inuit-global-spacing-unit-factor-tiny);
+$inuit-global-spacing-unit-small: math.round($inuit-global-spacing-unit * $inuit-global-spacing-unit-factor-small);
+$inuit-global-spacing-unit-large: math.round($inuit-global-spacing-unit * $inuit-global-spacing-unit-factor-large);
+$inuit-global-spacing-unit-huge:  math.round($inuit-global-spacing-unit * $inuit-global-spacing-unit-factor-huge);
 
 
 // Connect all necessary font-families
@@ -124,9 +126,9 @@ $FontPathMaterial: "../assets/fonts/material-design-icons" !default;
 
 $global-radius: 3px !default;
 $global-radius-rounded: 30em !default;
-$global-transition: (1/3) + s !default;
+$global-transition: math.div(1,3) + s !default;
 
-$line-height-computed: $inuit-global-line-height / $inuit-global-font-size;
+$line-height-computed: math.div($inuit-global-line-height, $inuit-global-font-size);
 
 
 // Reassign `$inuit-global-spacing-unit` to `$unit`.

package/src/button/_mixins.scss

@@ -23,8 +23,8 @@ markup:
 
 @mixin c-btn {
   .c-btn {
-    display: inline-block; /* [1] */
-    vertical-align: middle; /* [2] */
+    display: inline-flex; /* [1] */
+    align-items: center; /* [2] */
     font: inherit; /* [3] */
     text-align: center; /* [4] */
     margin: 0; /* [4] */
@@ -364,7 +364,7 @@ markup:
   }
 
   &.c-btn_tiny {
-    padding: (($inuit-global-spacing-unit-tiny - $btn-ghost-border-width) / 2) ($inuit-global-spacing-unit-tiny - $btn-ghost-border-width);
+    padding: (($inuit-global-spacing-unit-tiny - $btn-ghost-border-width) * 0.5) ($inuit-global-spacing-unit-tiny - $btn-ghost-border-width);
   }
 
   &.c-btn_small {

package/src/button/_variables.scss

@@ -1,9 +1,13 @@
+@use "sass:color";
+
 $btn-border-radius: $global-radius !default;
 $btn-default-border: none !default;
 $btn-default-background: $color-gray-40 !default;
 $btn-default-color: $text-color !default;
-$btn-default-background--hover: darken($btn-default-background, 20%) !default;
-$btn-default-background--pressed: darken($btn-default-background, 40%) !default;
+$btn-default-background--hover: color.adjust($btn-default-background, $lightness: -20%) !default;
+$btn-default-background--hover-old: color.adjust($btn-default-background, $lightness: -20%) !default;
+$btn-default-background--pressed: color.adjust($btn-default-background, $lightness: -40%) !default;
+$btn-default-background--pressed-old: color.adjust($btn-default-background, $lightness: -40%) !default;
 
 $btn-shadow: none !default;
 
@@ -17,22 +21,22 @@ $btn-disabled-color: rgba($color-base-white, 0.4) !default;
 $btn-primary-color: $color-gray-80 !default;
 $btn-primary-border-color: transparent !default;
 $btn-primary-background: $ids-theme-primary !default;
-$btn-primary-background--hover: darken($btn-primary-background, 20%) !default;
-$btn-primary-background--pressed: darken($btn-primary-background, 40%) !default;
+$btn-primary-background--hover: color.adjust($btn-primary-background, $lightness: -20%) !default;
+$btn-primary-background--pressed: color.adjust($btn-primary-background, $lightness: -40%) !default;
 $btn-primary-background--disabled: $btn-disabled-background !default;
 $btn-primary-color--disabled: rgba($color-base-black, 0.4) !default;
 
 $btn-secondary-color: $color-base-white !default;
 $btn-secondary-border-color: transparent !default;
 $btn-secondary-background: $ids-theme-secondary !default;
-$btn-secondary-background--hover: darken($btn-secondary-background, 20%) !default;
-$btn-secondary-background--pressed: darken($btn-secondary-background, 40%) !default;
+$btn-secondary-background--hover: color.adjust($btn-secondary-background, $lightness: -20%) !default;
+$btn-secondary-background--pressed: color.adjust($btn-secondary-background, $lightness: -40%) !default;
 
 $btn-tertiary-color: $color-base-white !default;
 $btn-tertiary-border-color: transparent !default;
 $btn-tertiary-background: $color-gray-40 !default;
-$btn-tertiary-background--hover: darken($btn-tertiary-background, 20%) !default;
-$btn-tertiary-background--pressed: darken($btn-tertiary-background, 40%) !default;
+$btn-tertiary-background--hover: color.adjust($btn-tertiary-background, $lightness: -20%) !default;
+$btn-tertiary-background--pressed: color.adjust($btn-tertiary-background, $lightness: -40%) !default;
 
 $btn-disabled-border-color: transparent !default;
 $btn-disabled-background: $color-gray-35 !default;

package/src/card/_mixins.scss

@@ -115,7 +115,7 @@
   }
 
   .c-card-subtitle {
-    margin-top: -($card-spacer-y / 2);
+    margin-top: -($card-spacer-y * 0.5);
     margin-bottom: 0;
   }
 
@@ -161,15 +161,15 @@
   //
 
   .c-card__header-tabs {
-    margin-right: -($card-spacer-x / 2);
+    margin-right: -($card-spacer-x * 0.5);
     margin-bottom: -$card-spacer-y;
-    margin-left: -($card-spacer-x / 2);
+    margin-left: -($card-spacer-x * 0.5);
     border-bottom: 0;
   }
 
   .c-card__header-pills {
-    margin-right: -($card-spacer-x / 2);
-    margin-left: -($card-spacer-x / 2);
+    margin-right: -($card-spacer-x * 0.5);
+    margin-left: -($card-spacer-x * 0.5);
   }
 }
 

package/src/card/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "../grid/variables";
 
 // Cards
@@ -13,7 +14,7 @@ $card-bg: $color-gray-90 !default;
 
 $card-img-overlay-padding: 1.25rem !default;
 
-$card-group-margin: ($grid-gutter-width / 2) !default;
+$card-group-margin: math.div($grid-gutter-width, 2) !default;
 $card-deck-margin: $card-group-margin !default;
 
 $card-columns-count: 3 !default;

package/src/crop/_mixins.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+@use "sass:math";
 @import "./variables";
 
 /* ==========================================================================
@@ -108,16 +110,16 @@ markup:
 
     @each $antecedent, $consequent in $crop {
 
-      @if (type-of($antecedent) != number) {
+      @if (meta.type-of($antecedent) != number) {
         @error "`#{$antecedent}` needs to be a number."
       }
 
-      @if (type-of($consequent) != number) {
+      @if (meta.type-of($consequent) != number) {
         @error "`#{$consequent}` needs to be a number."
       }
 
       .o-crop_#{$antecedent}\:#{$consequent} {
-        padding-bottom: ($consequent/$antecedent) * 100%;
+        padding-bottom: math.div($consequent, $antecedent) * 100%;
       }
 
     }

package/src/grid/_variables.scss

@@ -1,5 +1,8 @@
+@use 'sass:map';
+@use 'sass:math';
 @import "../mediaqueries/variables";
 
+
 //== Grid system (from blaze.css) [Deprecated]
 //
 //## Define your custom responsive grid.
@@ -8,27 +11,27 @@
 //
 $grid-gutter: $unit-tiny !default;
 $grid-widths: (
-  5: 5 / 100,
-  10: 1 / 10,
-  16: 16.6 / 100,
-  20: 1 / 5,
-  25: 1 / 4,
-  30: 3 / 10,
-  33: 1 / 3,
-  35: 35 / 100,
-  40: 2 / 5,
-  45: 45 / 100,
-  50: 1 / 2,
-  55: 55 / 100,
-  60: 3 / 5,
-  65: 65 / 100,
-  66: 2 / 3,
-  70: 7 / 10,
-  75: 3 / 4,
-  80: 4 / 5,
-  85: 85 / 100,
-  90: 9 / 10,
-  95: 95 / 100,
+  5: math.div(5, 100),
+  10: math.div(1, 10),
+  16: math.div(16.6, 100),
+  20: math.div(1, 5),
+  25: math.div(1, 4),
+  30: math.div(3, 10),
+  33: math.div(1, 3),
+  35: math.div(35, 100),
+  40: math.div(2, 5),
+  45: math.div(45, 100),
+  50: math.div(1, 2),
+  55: math.div(55, 100),
+  60: math.div(3, 5),
+  65: math.div(65, 100),
+  66: math.div(2, 3),
+  70: math.div(7, 10),
+  75: math.div(3, 4),
+  80: math.div(4, 5),
+  85: math.div(85, 100),
+  90: math.div(9, 10),
+  95: math.div(95, 100),
   100: 1
 );
 
@@ -39,7 +42,7 @@ $grid-gutter-width: 30px !default;
 $grid-gutter-width-base: $grid-gutter-width;
 // Navbar collapse
 //** Point at which the navbar becomes uncollapsed.
-$grid-float-breakpoint: #{map-get($screen-limits, medium)} !default;
+$grid-float-breakpoint: #{map.get($screen-limits, medium)} !default;
 //** Point at which the navbar begins collapsing.
 $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
 

package/src/icon/_mixins.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "../base/variables";
 @import "../typography/variables";
 @import "./variables";
@@ -11,7 +12,7 @@
     &_flag {
       position: relative;
       display: inline-block;
-      width: (4 / 3) * 1em;
+      width: math.div(4, 3) * 1em;
       padding: 0;
       border-radius: 0;
       line-height: $line-height-base;

package/src/input/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "../form/variables";
 @import "../base/functions";
 
@@ -8,13 +9,13 @@ $input-tap-highlight-color-rgb: hex-to-rgb-numbers($color-base-black) !default;
 $input-height-base: ($line-height-computed * $font-size-base + ($unit * 2) + 2) !default;
 
 // Large `.form-control` height
-$input-height-large: (ceil($font-size-lg * $line-height-computed) + ($unit-large * 2) + 2) !default;
+$input-height-large: (math.ceil($font-size-lg * $line-height-computed) + ($unit-large * 2) + 2) !default;
 
 // Small `.form-control` height
-$input-height-small: (floor($font-size-sm * $line-height-computed) + ($unit-small * 2) + 2) !default;
+$input-height-small: (math.floor($font-size-sm * $line-height-computed) + ($unit-small * 2) + 2) !default;
 
 // Tiny `.form-control` height
-$input-height-tiny: (floor($font-size-xs * $line-height-computed) + ($unit-tiny * 2) + 2) !default;
+$input-height-tiny: (math.floor($font-size-xs * $line-height-computed) + ($unit-tiny * 2) + 2) !default;
 
 $ids-input-theme-property-values: (
   input-tap-highlight-color: $input-tap-highlight-color,

package/src/list-group/_mixins.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @import "../base/variables";
 @import "./variables";
 
@@ -250,7 +251,7 @@ markup:
 
     @include hover-focus {
       color: $color;
-      background-color: darken($background, 5%);
+      background-color: color.adjust($background, $lightness: -5%);
     }
 
     &.active {

package/src/list-group/_variables.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // List group
 
 $list-group-color: $body-color !default;
@@ -12,7 +14,7 @@ $list-group-hover-bg: $color-gray-40 !default;
 $list-group-active-color: $component-active-color !default;
 $list-group-active-bg: $component-active-bg !default;
 $list-group-active-border: $list-group-active-bg !default;
-$list-group-active-text-color: lighten($list-group-active-bg, 50%) !default;
+$list-group-active-text-color: color.adjust($list-group-active-bg, $lightness: 50%) !default;
 
 $list-group-disabled-color: $color-gray-20 !default;
 $list-group-disabled-bg: $color-gray-40 !default;
@@ -33,7 +35,7 @@ $ids-list-group-theme-property-values: (
   list-group-active-color: $component-active-color,
   list-group-active-bg: $component-active-bg,
   list-group-active-border: $list-group-active-bg,
-  list-group-active-text-color: lighten($list-group-active-bg, 50%),
+  list-group-active-text-color: color.adjust($list-group-active-bg, $lightness: 50%),
   list-group-disabled-color: $color-gray-20,
   list-group-disabled-bg: $color-gray-40,
   list-group-disabled-text-color: $list-group-disabled-color,

package/src/mediaqueries/_mixins.scss

@@ -1,79 +1,80 @@
+@use "sass:map";
 @import "./variables";
 
 @mixin screen_xsmall-and-up {
-  @media (min-width: #{map-get($screen-limits, xsmall)}) {
+  @media (min-width: #{map.get($screen-limits, xsmall)}) {
     @content;
   }
 }
 
 @mixin screen_small-and-up {
-  @media (min-width: #{map-get($screen-limits, small)}) {
+  @media (min-width: #{map.get($screen-limits, small)}) {
     @content;
   }
 }
 
 @mixin screen_medium-and-up {
-  @media (min-width: #{map-get($screen-limits, medium)}) {
+  @media (min-width: #{map.get($screen-limits, medium)}) {
     @content;
   }
 }
 
 @mixin screen_large-and-up {
-  @media (min-width: #{map-get($screen-limits, large)}) {
+  @media (min-width: #{map.get($screen-limits, large)}) {
     @content;
   }
 }
 
 @mixin screen_larger-and-up {
-  @media (min-width: #{map-get($screen-limits, larger)}) {
+  @media (min-width: #{map.get($screen-limits, larger)}) {
     @content;
   }
 }
 
 @mixin screen_xlarge-and-up {
-  @media (min-width: #{map-get($screen-limits, xlarge)}) {
+  @media (min-width: #{map.get($screen-limits, xlarge)}) {
     @content;
   }
 }
 
 @mixin screen_super-and-up {
-  @media (min-width: #{map-get($screen-limits, super)}) {
+  @media (min-width: #{map.get($screen-limits, super)}) {
     @content;
   }
 }
 
 @mixin screen_xsmall-only {
-  @media (max-width: #{map-get($screen-limits, xsmall) - $screen-adjustment}) {
+  @media (max-width: #{map.get($screen-limits, xsmall) - $screen-adjustment}) {
     @content;
   }
 }
 
 @mixin screen_small-only {
-  @media (min-width: #{map-get($screen-limits, xsmall)}) and (max-width: #{map-get($screen-limits, small) - $screen-adjustment}) {
+  @media (min-width: #{map.get($screen-limits, xsmall)}) and (max-width: #{map.get($screen-limits, small) - $screen-adjustment}) {
     @content;
   }
 }
 
 @mixin screen_medium-only {
-  @media (min-width: #{map-get($screen-limits, small)}) and (max-width: #{map-get($screen-limits, medium) - $screen-adjustment}) {
+  @media (min-width: #{map.get($screen-limits, small)}) and (max-width: #{map.get($screen-limits, medium) - $screen-adjustment}) {
     @content;
   }
 }
 
 @mixin screen_large-only {
-  @media (min-width: #{map-get($screen-limits, medium)}) and (max-width: #{map-get($screen-limits, large) - $screen-adjustment}) {
+  @media (min-width: #{map.get($screen-limits, medium)}) and (max-width: #{map.get($screen-limits, large) - $screen-adjustment}) {
     @content;
   }
 }
 
 @mixin screen_xlarge-only {
-  @media (min-width: #{map-get($screen-limits, large)}) and (max-width: #{map-get($screen-limits, xlarge)  - $screen-adjustment}) {
+  @media (min-width: #{map.get($screen-limits, large)}) and (max-width: #{map.get($screen-limits, xlarge)  - $screen-adjustment}) {
     @content;
   }
 }
 
 @mixin screen_super-only {
-  @media (min-width: #{map-get($screen-limits, large)}) {
+  @media (min-width: #{map.get($screen-limits, large)}) {
     @content;
   }
 }

package/src/nav/_mixins.scss

@@ -41,7 +41,7 @@
 
 @mixin nav-divider($color: #e5e5e5) {
   height: 1px;
-  margin: (($line-height-computed / 2) - 1) 0;
+  margin: (($line-height-computed * 0.5) - 1) 0;
   overflow: hidden;
   background-color: $color;
 }

package/src/navbar/_mixins.scss

@@ -123,8 +123,8 @@ sg-wrapper:
 
 // todo: add _ to mixin name
 @mixin navbar-vertical-align($element-height) {
-  margin-top: (($navbar-height - $element-height) / 2);
-  margin-bottom: (($navbar-height - $element-height) / 2);
+  margin-top: (($navbar-height - $element-height) * 0.5);
+  margin-bottom: (($navbar-height - $element-height) * 0.5);
 }
 
 // Navbar collapse (body)

package/src/navbar/_variables.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+@use "sass:color";
 @import "../theme/variables";
 @import "../base/variables";
 
@@ -7,27 +9,26 @@
 $navbar-height: $inuit-global-spacing-unit-tiny * 9 !default;
 $navbar-margin-bottom: 0 !default; //$line-height-computed
 $navbar-border-radius: 0 !default;
-$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;
+$navbar-padding-horizontal: math.floor(math.div($grid-gutter-width, 2)) !default;
 $navbar-line-height: $navbar-height !default;
-$navbar-padding-vertical: (($navbar-height - $navbar-line-height) / 2) !default;
+$navbar-padding-vertical: (math.div(($navbar-height - $navbar-line-height), 2)) !default;
 $navbar-collapse-max-height: 340px !default;
-
 $navbar-default-color: $color-base-white !default;
 $navbar-default-bg: $color-gray-80 !default;
-$navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
+$navbar-default-border: color.adjust($navbar-default-bg, $lightness: -6.5%) !default;
 
 // Navbar links
 $navbar-default-link-color: $color-base-white !default;
 $navbar-default-link-hover-color: $ids-theme-secondary !default;
 $navbar-default-link-hover-bg: transparent !default;
 $navbar-default-link-active-color: $ids-theme-primary !default;
-$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default;
+$navbar-default-link-active-bg: color.adjust($navbar-default-bg, $lightness: -6.5%) !default;
 $navbar-default-link-disabled-color: #ccc !default;
 $navbar-default-link-disabled-bg: transparent !default;
 
 // Navbar brand label
 $navbar-default-brand-color: $navbar-default-link-color !default;
-$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default;
+$navbar-default-brand-hover-color: color.adjust($navbar-default-brand-color, $lightness: -10%) !default;
 $navbar-default-brand-hover-bg: transparent !default;
 
 // Navbar toggle
@@ -39,16 +40,16 @@ $navbar-default-toggle-color: $color-base-white !default;
 
 //=== Inverted navbar
 // Reset inverted navbar basics
-$navbar-inverse-color: lighten($color-gray-35, 15%) !default;
+$navbar-inverse-color: color.adjust($color-gray-35, $lightness: 15%) !default;
 $navbar-inverse-bg: #222 !default;
-$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;
+$navbar-inverse-border: color.adjust($navbar-inverse-bg, $lightness: -10%) !default;
 
 // Inverted navbar links
-$navbar-inverse-link-color: lighten($color-gray-35, 15%) !default;
+$navbar-inverse-link-color: color.adjust($color-gray-35, $lightness: 15%) !default;
 $navbar-inverse-link-hover-color: #fff !default;
 $navbar-inverse-link-hover-bg: transparent !default;
 $navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default;
-$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default;
+$navbar-inverse-link-active-bg: color.adjust($navbar-inverse-bg, $lightness: -10%) !default;
 $navbar-inverse-link-disabled-color: #444 !default;
 $navbar-inverse-link-disabled-bg: transparent !default;
 

package/src/nvd3/_variables-theme-contrast.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @import "../theme/variables";
 @import "../base/variables";
 @import "../typography/variables";
@@ -87,7 +88,7 @@ $nvd3-pie-path: $color-base-white;
 // Sparkline
 $nvd3-sparkline-path-fill: none;
 $nvd3-sparklineplus-hovervalue-stroke: $color-gray-80;
-$nvd3-sparklineplus-yvalue-stroke: lighten($ids-theme-status-error, 20%);
+$nvd3-sparklineplus-yvalue-stroke: color.adjust($ids-theme-status-error, $lightness: 20%) !default;
 $nvd3-sparklineplus-maxvalue-stroke: $ids-theme-status-success;
 $nvd3-sparklineplus-maxvalue-fill: $ids-theme-status-success;
 $nvd3-sparklineplus-minvalue-stroke: $ids-theme-status-error;