@quadrel-enterprise-ui/framework 19.8.1 → 20.0.0

package/src/assets/styles/components/_components.grid.scss

@@ -1,22 +1,22 @@
-@import "../settings/settings.grid";
-@import "../settings/settings.globalVars";
-@import "../tools/tools.grid";
-@import "../tools/tools.breakpoints";
+@use "../settings/settings.grid";
+@use "../settings/settings.globalVars" as settings2;
+@use "../tools/tools.grid";
+@use "../tools/tools.breakpoints" as tools2;
 
 .qd-columns {
   display: grid;
-  grid-column-gap: $gridColumnGap;
+  grid-column-gap: settings.$gridColumnGap;
 
-  @for $desktopGridSize from 1 through $desktopMaxGridSize {
+  @for $desktopGridSize from 1 through settings.$desktopMaxGridSize {
     &.qd-columns-#{$desktopGridSize} {
-      @include setResponsiveGridSize($desktopGridSize);
-      @include setResponsiveColspans($desktopGridSize);
+      @include tools.setResponsiveGridSize($desktopGridSize);
+      @include tools.setResponsiveColspans($desktopGridSize);
 
       @for $columnsMax from 1 to $desktopGridSize {
         &.qd-columns-max-#{$columnsMax} {
-          @include setResponsiveGridSize($columnsMax);
-          @include setResponsiveGridMarginRightForColumnsMax($desktopGridSize, $columnsMax);
-          @include setResponsiveColspans($columnsMax);
+          @include tools.setResponsiveGridSize($columnsMax);
+          @include tools.setResponsiveGridMarginRightForColumnsMax($desktopGridSize, $columnsMax);
+          @include tools.setResponsiveColspans($columnsMax);
         }
       }
     }
@@ -24,9 +24,9 @@
 
   // classes to override colspan for specific breakpoints
   .qd-column {
-    @each $breakpoint, $windowWidth in get-breakpoint-map($settings) {
-      @include for-screen-only($breakpoint) {
-        @for $colspan from 1 through $desktopMaxGridSize {
+    @each $breakpoint, $windowWidth in tools2.get-breakpoint-map(settings2.$settings) {
+      @include tools2.for-screen-only($breakpoint) {
+        @for $colspan from 1 through settings.$desktopMaxGridSize {
           &.#{$breakpoint}-#{$colspan} {
             grid-column: span $colspan !important;
           }

package/src/assets/styles/generic/_generic.all.scss

@@ -1,6 +1,6 @@
-@import "generic.normalize";
-@import "generic.fonts";
-@import "generic.layout";
-@import "generic.resetButton";
-@import "generic.checkbox";
+@use "generic.normalize";
+@use "generic.fonts" as generic2;
+@use "generic.layout" as generic3;
+@use "generic.resetButton" as generic4;
+@use "generic.checkbox" as generic5;
 @import "@angular/cdk/overlay-prebuilt.css";

package/src/assets/styles/generic/_generic.normalize.scss

@@ -1,4 +1,4 @@
-@import "../tools/tools.getBaseFontSize";
+@use "../tools/tools.getBaseFontSize";
 
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
@@ -24,7 +24,7 @@ html {
 
 body {
   margin: 0;
-  font-size: get-base-font-size();
+  font-size: tools.get-base-font-size();
 }
 
 /**

package/src/assets/styles/index.scss

@@ -1,9 +1,9 @@
 // ITCSS: https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
 
-@import "settings/setting.all";
-@import "tools/tools.all";
-@import "generic/generic.all";
-@import "elements/elements.all";
-@import "objects/objects.all";
-@import "components/components.all";
-@import "utilities/utilities.all";
+@use "settings/setting.all";
+@use "tools/tools.all";
+@use "generic/generic.all";
+@use "elements/elements.all";
+@use "objects/objects.all";
+@use "components/components.all";
+@use "utilities/utilities.all";

package/src/assets/styles/objects/_objects.a11y.scss

@@ -1,4 +1,4 @@
-@import "../tools/tools.convertPxToRem";
+@use "../tools/tools.convertPxToRem";
 
 // Tables only TODO: (refactor in PI10)
 .qd-a11y-visually-hidden {
@@ -13,11 +13,11 @@
 .qd-visually-hidden {
   position: absolute;
   overflow: hidden;
-  width: rem(1);
-  height: rem(1);
+  width: tools.to-rem(1);
+  height: tools.to-rem(1);
   padding: 0;
   border: 0;
-  margin: -(rem(1));
+  margin: -(tools.to-rem(1));
   clip: rect(0 0 0 0);
   outline: 0;
   white-space: nowrap;

package/src/assets/styles/objects/_objects.all.scss

@@ -1,3 +1,3 @@
-@import "objects.forceLineBreak";
-@import "objects.hasTooltip";
-@import "objects.a11y";
+@use "objects.forceLineBreak";
+@use "objects.hasTooltip" as objects2;
+@use "objects.a11y" as objects3;

package/src/assets/styles/settings/_setting.all.scss

@@ -1,13 +1,13 @@
-@import "settings.fonts";
-@import "settings.iconFont";
-@import "settings.colors";
-@import "settings.formFields";
-@import "settings.globalVars";
-@import "settings.horizontalSpacing";
-@import "settings.variables";
-@import "settings.verticalRythm";
-@import "settings.material";
-@import "settings.layoutHeader";
-@import "settings.page";
-@import "settings.shell";
-@import "settings.grid";
+@use "settings.fonts";
+@use "settings.iconFont" as settings2;
+@use "settings.colors" as settings3;
+@use "settings.formFields" as settings4;
+@use "settings.globalVars" as settings5;
+@use "settings.horizontalSpacing" as settings6;
+@use "settings.tokens" as settings7;
+@use "settings.verticalRythm" as settings8;
+@use "settings.material" as settings9;
+@use "settings.layoutHeader" as settings10;
+@use "settings.page" as settings11;
+@use "settings.shell" as settings12;
+@use "settings.grid" as settings13;

package/src/assets/styles/settings/_settings.formFields.scss

@@ -1,4 +1,4 @@
-@import "settings.verticalRythm";
+@use "settings.verticalRythm";
 
 $form-field-height: 4.5rem;
-$form-field-margin-button: $vertical-spacing-small;
+$form-field-margin-button: settings.$vertical-spacing-small;

package/src/assets/styles/settings/_settings.grid.scss

@@ -1,8 +1,6 @@
-/* stylelint-disable */
+@use "../settings/settings.horizontalSpacing";
 
-@import "../settings/settings.horizontalSpacing";
-
-$gridColumnGap: $horizontal-spacing-default;
+$gridColumnGap: settings.$horizontal-spacing-default;
 $desktopMaxGridSize: 6;
 $tabletLandscapeMaxGridSize: 4;
 $tabletLandscapeColspansMapping: (

package/src/assets/styles/settings/_settings.horizontalSpacing.scss

@@ -1,5 +1,5 @@
-@import "../tools/tools.convertPxToRem";
+@use "../tools/tools.convertPxToRem";
 
-$horizontal-spacing-extrasmall: rem(12);
-$horizontal-spacing-small: rem(16);
-$horizontal-spacing-default: rem(24);
+$horizontal-spacing-extrasmall: tools.to-rem(12);
+$horizontal-spacing-small: tools.to-rem(16);
+$horizontal-spacing-default: tools.to-rem(24);

package/src/assets/styles/settings/_settings.layoutHeader.scss

@@ -1,15 +1,15 @@
-@import "../tools/tools.convertPxToRem";
-@import "../settings/settings.colors";
-@import "../settings/settings.verticalRythm";
+@use "../tools/tools.convertPxToRem";
+@use "../settings/settings.colors";
+@use "../settings/settings.verticalRythm" as settings2;
 
 $layout-header-font-weight: 400;
-$layout-header-font-size: rem(24);
-$layout-header-total-height: rem(100);
-$layout-header-content-height: rem(36);
-$layout-header-border-width: rem(2);
-$layout-header-border-color: $light-gray;
-$layout-header-margin-bottom: $vertical-spacing-default;
-$layout-header-padding-bottom-navigation: $vertical-spacing-large;
+$layout-header-font-size: tools.to-rem(24);
+$layout-header-total-height: tools.to-rem(100);
+$layout-header-content-height: tools.to-rem(36);
+$layout-header-border-width: tools.to-rem(2);
+$layout-header-border-color: settings.$light-gray;
+$layout-header-margin-bottom: settings2.$vertical-spacing-default;
+$layout-header-padding-bottom-navigation: settings2.$vertical-spacing-large;
 $layout-header-padding-bottom: (
   $layout-header-total-height - $layout-header-content-height - $layout-header-border-width
 );

package/src/assets/styles/settings/_settings.material.scss

@@ -1,4 +1,4 @@
-@import "settings.colors";
+@use "settings.colors";
 
 // TODO: Now it's copied from Oblique. Quadrel Color does not cover all range from 5% to 90%.
 $primary-50: #f2f7fa;
@@ -6,7 +6,7 @@ $primary-100: #cce0eb;
 $primary-200: #99c2d6;
 $primary-300: #66a3c2;
 $primary-400: #267da8;
-$primary-500: $cerulean;
+$primary-500: settings.$cerulean;
 $primary-600: #0a5b84;
 $primary-700: #14516f;
 $primary-800: #214456;
@@ -21,7 +21,7 @@ $error-100: #fbcad2;
 $error-200: #ea959b;
 $error-300: #de6c74;
 $error-400: #de2839;
-$error-500: $error-response;
+$error-500: settings.$error-response;
 $error-600: #a31a17;
 $error-700: #931012;
 $error-800: #86090c;
@@ -47,20 +47,20 @@ $primary-palette: (
   a400: $primary-a400,
   a700: $primary-a700,
   contrast: (
-    50: $licorice,
-    100: $licorice,
-    200: $licorice,
-    300: $licorice,
-    400: $white,
-    500: $white,
-    600: $white,
-    700: $white,
-    800: $white,
-    900: $white,
-    a100: $licorice,
-    a200: $licorice,
-    a400: $white,
-    a700: $white
+    50: settings.$licorice,
+    100: settings.$licorice,
+    200: settings.$licorice,
+    300: settings.$licorice,
+    400: settings.$white,
+    500: settings.$white,
+    600: settings.$white,
+    700: settings.$white,
+    800: settings.$white,
+    900: settings.$white,
+    a100: settings.$licorice,
+    a200: settings.$licorice,
+    a400: settings.$white,
+    a700: settings.$white
   )
 ) !default;
 $accent-palette: $primary-palette !default;
@@ -80,19 +80,19 @@ $warn-palette: (
   a400: $error-a400,
   a700: $error-a700,
   contrast: (
-    50: $licorice,
-    100: $licorice,
-    200: $licorice,
-    300: $white,
-    400: $white,
-    500: $white,
-    600: $white,
-    700: $white,
-    800: $white,
-    900: $white,
-    a100: $licorice,
-    a200: $licorice,
-    a400: $licorice,
-    a700: $licorice
+    50: settings.$licorice,
+    100: settings.$licorice,
+    200: settings.$licorice,
+    300: settings.$white,
+    400: settings.$white,
+    500: settings.$white,
+    600: settings.$white,
+    700: settings.$white,
+    800: settings.$white,
+    900: settings.$white,
+    a100: settings.$licorice,
+    a200: settings.$licorice,
+    a400: settings.$licorice,
+    a700: settings.$licorice
   )
 );

package/src/assets/styles/settings/_settings.page.scss

@@ -1,4 +1,4 @@
-@import "../tools/tools.convertPxToRem";
+@use "../tools/tools.convertPxToRem";
 
-$page-horizontal-spacing: rem(20);
-$page-horizontal-spacing-mobile: rem(15);
+$page-horizontal-spacing: tools.to-rem(20);
+$page-horizontal-spacing-mobile: tools.to-rem(15);

package/src/assets/styles/settings/_settings.shell.scss

@@ -1,6 +1,6 @@
-@import "../tools/tools.convertPxToRem";
+@use "../tools/tools.convertPxToRem";
 
-$shell-header-height-large: rem(95);
-$shell-header-height-small: rem(65);
-$shell-header-height-mobile: rem(60);
-$shell-footer-height: rem(40);
+$shell-header-height-large: tools.to-rem(95);
+$shell-header-height-small: tools.to-rem(65);
+$shell-header-height-mobile: tools.to-rem(60);
+$shell-footer-height: tools.to-rem(40);

package/src/assets/styles/settings/_settings.verticalRythm.scss

@@ -1,6 +1,6 @@
-@import "../tools/tools.convertPxToRem";
+@use "../tools/tools.convertPxToRem";
 
-$vertical-spacing-extrasmall: rem(8);
-$vertical-spacing-small: rem(12);
-$vertical-spacing-default: rem(16);
-$vertical-spacing-large: rem(24);
+$vertical-spacing-extrasmall: tools.to-rem(8);
+$vertical-spacing-small: tools.to-rem(12);
+$vertical-spacing-default: tools.to-rem(16);
+$vertical-spacing-large: tools.to-rem(24);

package/src/assets/styles/tools/_tools.all.scss

@@ -1,15 +1,15 @@
 // NEW
-@import "tools.fonts";
+@use "tools.fonts";
 
 // OLD
-@import "tools.boxShadowOverlay";
-@import "tools.breakpoints";
-@import "tools.rwdDisabled";
-@import "tools.mixins";
-@import "tools.toolTip";
-@import "tools.colorMapper";
-@import "tools.layoutWidth";
-@import "tools.convertPxToRem";
-@import "tools.layoutHeader";
-@import "tools.overlayBackdrop";
-@import "tools.grid";
+@use "tools.boxShadowOverlay" as tools2;
+@use "tools.breakpoints" as tools3;
+@use "tools.rwdDisabled" as tools4;
+@use "tools.mixins" as tools5;
+@use "tools.toolTip" as tools6;
+@use "tools.colorMapper" as tools7;
+@use "tools.layoutWidth" as tools8;
+@use "tools.convertPxToRem" as tools9;
+@use "tools.layoutHeader" as tools10;
+@use "tools.overlayBackdrop" as tools11;
+@use "tools.grid" as tools12;

package/src/assets/styles/tools/_tools.boxShadowOverlay.scss

@@ -1,6 +1,6 @@
-@import "./tools.convertPxToRem";
-@import "../settings/settings.colors";
+@use "tools.convertPxToRem";
+@use "../settings/settings.colors";
 
 @mixin box-shadow-overlay {
-  box-shadow: 0 0 rem(10) $pebble;
+  box-shadow: 0 0 tools.to-rem(10) settings.$pebble;
 }

package/src/assets/styles/tools/_tools.breakpoints.scss

@@ -1,11 +1,13 @@
-@import "../settings/settings.globalVars";
+@use "sass:list";
+@use "sass:map";
+@use "../settings/settings.globalVars";
 
 // TODO: Convert px to rem!
 // Breakpoint values from the "global-vars" map
 @function get-breakpoint-map($settings) {
-  @if map-has-key($settings, "breakpoints") {
+  @if map.has-key($settings, "breakpoints") {
     @each $property, $values in $settings {
-      @if length($values) != 0 {
+      @if list.length($values) != 0 {
         @return $values;
       } @else {
         @error 'No breakpoint value available.';
@@ -19,36 +21,52 @@
 // Name of the next breakpoint, or null for the last breakpoint.
 @function breakpoint-next(
   $name,
-  $breakpoints: get-breakpoint-map($settings),
-  $breakpoint-names: map-keys($breakpoints)
+  $breakpoints: get-breakpoint-map(settings.$settings),
+  $breakpoint-names: map.keys($breakpoints)
 ) {
-  $n: index($breakpoint-names, $name);
+  $n: list.index($breakpoint-names, $name);
 
-  @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+  @if $n != null and $n < list.length($breakpoint-names) {
+    @return list.nth($breakpoint-names, $n + 1);
+  } @else {
+    @return null;
+  }
 }
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
-@function breakpoint-min($name, $breakpoints: get-breakpoint-map($settings)) {
-  $min: map-get($breakpoints, $name);
+@function breakpoint-min($name, $breakpoints: get-breakpoint-map(settings.$settings)) {
+  $min: map.get($breakpoints, $name);
 
-  @return if($min != 0, $min, null);
+  @if $min != 0 {
+    @return $min;
+  } @else {
+    @return null;
+  }
 }
 
 // Maximum breakpoint width. Null for the largest (last) breakpoint.
-@function breakpoint-max($name, $breakpoints: get-breakpoint-map($settings)) {
+@function breakpoint-max($name, $breakpoints: get-breakpoint-map(settings.$settings)) {
   $next: breakpoint-next($name, $breakpoints);
 
-  @return if($next, breakpoint-min($next, $breakpoints) - 0.02, null);
+  @if $next {
+    @return breakpoint-min($next, $breakpoints) - 0.02;
+  } @else {
+    @return null;
+  }
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
-@function breakpoint-infix($name, $breakpoints: get-breakpoint-map($settings)) {
-  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+@function breakpoint-infix($name, $breakpoints: get-breakpoint-map(settings.$settings)) {
+  @if breakpoint-min($name, $breakpoints) == null {
+    @return "";
+  } @else {
+    @return "-#{$name}";
+  }
 }
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Use: @include for-screen-up(lg) { ... }
-@mixin for-screen-up($name, $breakpoints: get-breakpoint-map($settings)) {
+@mixin for-screen-up($name, $breakpoints: get-breakpoint-map(settings.$settings)) {
   $min: breakpoint-min($name, $breakpoints);
 
   @if $min {
@@ -62,7 +80,7 @@
 
 // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
 // Use: @include for-screen-down(lg) { ... }
-@mixin for-screen-down($name, $breakpoints: get-breakpoint-map($settings)) {
+@mixin for-screen-down($name, $breakpoints: get-breakpoint-map(settings.$settings)) {
   $max: breakpoint-max($name, $breakpoints);
 
   @if $max {
@@ -76,7 +94,7 @@
 
 // Media that spans multiple breakpoint widths.
 // Use: @include for-screen-between(md, xl) { ... }
-@mixin for-screen-between($lower, $upper, $breakpoints: get-breakpoint-map($settings)) {
+@mixin for-screen-between($lower, $upper, $breakpoints: get-breakpoint-map(settings.$settings)) {
   $min: breakpoint-min($lower, $breakpoints);
   $max: breakpoint-max($upper, $breakpoints);
 
@@ -97,7 +115,7 @@
 
 // Media between the breakpoint's minimum and maximum widths.
 // Use: @include for-screen-only(xs) { ... }
-@mixin for-screen-only($name, $breakpoints: get-breakpoint-map($settings)) {
+@mixin for-screen-only($name, $breakpoints: get-breakpoint-map(settings.$settings)) {
   $min: breakpoint-min($name, $breakpoints);
   $max: breakpoint-max($name, $breakpoints);
 

package/src/assets/styles/tools/_tools.colorMapper.scss

@@ -1,17 +1,18 @@
-@import "../settings/settings.colors";
+@use "sass:map";
+@use "../settings/settings.colors";
 
 @mixin buttonColor($colors...) {
   @each $color in $colors {
     $mappedColors: (
-      "primary": $cerulean,
-      "secondary": $licorice,
-      "error": $error-default
+      "primary": settings.$cerulean,
+      "secondary": settings.$licorice,
+      "error": settings.$error-default
     );
 
-    @if map-has-key($mappedColors, $color) {
+    @if map.has-key($mappedColors, $color) {
       &.#{$color} {
         .qd-icon {
-          color: map-get($mappedColors, $color);
+          color: map.get($mappedColors, $color);
         }
       }
     } @else {

package/src/assets/styles/tools/_tools.convertPxToRem.scss

@@ -1,17 +1,20 @@
 @use "sass:math";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
 
-@import "tools.getBaseFontSize";
+@use "tools.getBaseFontSize";
 
-$base-font-size: get-base-font-size();
+$base-font-size: tools.get-base-font-size();
 
-@function rem($pxValue) {
+@function to-rem($pxValue) {
   $value: #{math.div(strip-unit-if-present($pxValue), strip-unit-if-present($base-font-size))};
 
   @return cast-to-number($value) * 1rem;
 }
 
 @function strip-unit-if-present($value) {
-  @if type-of($value) == "number" and str-index($value + "", "px") == null {
+  @if meta.type-of($value) == "number" and string.index($value + "", "px") == null {
     @return $value;
   } @else {
     $strippedValue: math.div($value, 1px);
@@ -21,15 +24,15 @@ $base-font-size: get-base-font-size();
 }
 
 @function cast-to-number($value) {
-  @if type-of($value) == "number" {
+  @if meta.type-of($value) == "number" {
     @return $value;
-  } @else if type-of($value) != "string" {
+  } @else if meta.type-of($value) != "string" {
     @error 'The parameter "#{$value}" should be of type "number" or "string".';
   }
 
   $result: 0;
   $digits: 0;
-  $minus: str-slice($value, 1, 1) == "-";
+  $minus: string.slice($value, 1, 1) == "-";
   $numbers: (
     "0": 0,
     "1": 1,
@@ -42,19 +45,27 @@ $base-font-size: get-base-font-size();
     "8": 8,
     "9": 9
   );
+  $start: 1;
+  @if $minus {
+    $start: 2;
+  }
 
-  @for $i from if($minus, 2, 1) through str-length($value) {
-    $character: str-slice($value, $i, $i);
+  @for $i from $start through string.length($value) {
+    $character: string.slice($value, $i, $i);
 
     @if $character == "." {
       $digits: 1;
     } @else if $digits == 0 {
-      $result: $result * 10 + map-get($numbers, $character);
+      $result: $result * 10 + map.get($numbers, $character);
     } @else {
       $digits: $digits * 10;
-      $result: $result + math.div(map-get($numbers, $character), $digits);
+      $result: $result + math.div(map.get($numbers, $character), $digits);
     }
   }
 
-  @return if($minus, -$result, $result);
+  @if $minus {
+    @return -$result;
+  } @else {
+    @return $result;
+  }
 }

package/src/assets/styles/tools/_tools.fonts.scss

@@ -1,51 +1,51 @@
-@import "../tools/tools.convertPxToRem";
-@import "../settings/settings.colors";
+@use "../tools/tools.convertPxToRem";
+@use "../settings/settings.colors";
 
-@mixin qd-font-distinction($weight: 300, $color: $licorice, $line-height: rem(45)) {
+@mixin qd-font-distinction($weight: 300, $color: settings.$licorice, $line-height: tools.to-rem(45)) {
   color: $color;
-  font-size: rem(30);
+  font-size: tools.to-rem(30);
   font-weight: $weight;
   line-height: $line-height;
 }
 
-@mixin qd-font-extra-large($weight: 500, $color: $licorice, $line-height: rem(36)) {
+@mixin qd-font-extra-large($weight: 500, $color: settings.$licorice, $line-height: tools.to-rem(36)) {
   color: $color;
-  font-size: rem(24);
+  font-size: tools.to-rem(24);
   font-weight: $weight;
   line-height: $line-height;
 }
 
-@mixin qd-font-basic-large($weight: 500, $color: $licorice, $line-height: rem(27)) {
+@mixin qd-font-basic-large($weight: 500, $color: settings.$licorice, $line-height: tools.to-rem(27)) {
   color: $color;
-  font-size: rem(18);
+  font-size: tools.to-rem(18);
   font-weight: $weight;
   line-height: $line-height;
 }
 
-@mixin qd-font-basic($weight: 500, $color: $licorice, $line-height: rem(24)) {
+@mixin qd-font-basic($weight: 500, $color: settings.$licorice, $line-height: tools.to-rem(24)) {
   color: $color;
-  font-size: rem(16);
+  font-size: tools.to-rem(16);
   font-weight: $weight;
   line-height: $line-height;
 }
 
-@mixin qd-font-basic-small($weight: 700, $color: $licorice, $line-height: rem(21)) {
+@mixin qd-font-basic-small($weight: 700, $color: settings.$licorice, $line-height: tools.to-rem(21)) {
   color: $color;
-  font-size: rem(14);
+  font-size: tools.to-rem(14);
   font-weight: $weight;
   line-height: $line-height;
 }
 
-@mixin qd-font-fine-print($weight: 700, $color: $licorice, $line-height: rem(18)) {
+@mixin qd-font-fine-print($weight: 700, $color: settings.$licorice, $line-height: tools.to-rem(18)) {
   color: $color;
-  font-size: rem(12);
+  font-size: tools.to-rem(12);
   font-weight: $weight;
   line-height: $line-height;
 }
 
-@mixin qd-font-basic-extra-small($weight: 700, $color: $licorice, $line-height: rem(15)) {
+@mixin qd-font-basic-extra-small($weight: 700, $color: settings.$licorice, $line-height: tools.to-rem(15)) {
   color: $color;
-  font-size: rem(10);
+  font-size: tools.to-rem(10);
   font-weight: $weight;
   line-height: $line-height;
 }