@elliemae/ds-basic 3.50.1-next.8 → 3.51.0-next.0

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/base/grid/xy-grid/_frame.scss

@@ -1,76 +0,0 @@
-/// Modifies a grid to give it "frame" behavior (no overflow, no wrap, stretch behavior)
-///
-/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
-/// @param {Boolean} $nested [false] - Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh.
-/// @param {Number|Map} $gutters [null] - Map or single value for gutters.
-/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from.
-/// @param {Boolean} $include-base [true] - Include the base styles that don't vary per breakpoint.
-@mixin xy-grid-frame($vertical: false, $nested: false, $gutters: null, $breakpoint: null, $include-base: true) {
-  @if $include-base {
-    overflow: hidden;
-    position: relative;
-    flex-wrap: nowrap;
-    align-items: stretch;
-  }
-
-  @if $breakpoint == null and type-of($gutters) == 'map' {
-    @include -zf-each-breakpoint() {
-      @include xy-grid-frame($vertical, $nested, $gutters, $-zf-size, false);
-    }
-  } @else {
-    // Get our gutters if applicable
-    $gutter: -zf-get-bp-val($gutters, $breakpoint);
-
-    // If we have a gutter, add it to the width/height
-    @if $gutter {
-      @if $vertical == true {
-        $unit: if($nested == true, 100%, 100vh);
-        $gutter: rem-calc($gutter);
-        height: calc(#{$unit} + #{$gutter});
-      } @else {
-        $unit: if($nested == true, 100%, 100vw);
-        $gutter: rem-calc($gutter);
-        width: calc(#{$unit} + #{$gutter});
-      }
-    } @else {
-      @if $vertical == true {
-        height: if($nested == true, 100%, 100vh);
-      } @else {
-        width: if($nested == true, 100%, 100vw);
-      }
-    }
-  }
-}
-
-/// Modifies a cell to give it "block" behavior (overflow auto, inertial scrolling)
-///
-/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
-@mixin xy-cell-block($vertical: false) {
-  $property: if($vertical == true, 'overflow-y', 'overflow-x');
-
-  @if $vertical == true {
-    overflow-y: auto;
-    max-height: 100%;
-    height: 100%;
-  } @else {
-    overflow-x: auto;
-    max-width: 100%;
-  }
-
-  -webkit-overflow-scrolling: touch;
-  -ms-overflow-stype: -ms-autohiding-scrollbar;
-}
-
-/// Container for inside a grid frame containing multiple blocks. Typically used
-/// as a modifier for a `.cell` to allow the cell to pass along flex sizing
-/// constraints / from parents to children.
-@mixin xy-cell-block-container() {
-  display: flex;
-  flex-direction: column;
-  max-height: 100%;
-
-  > .grid-x {
-    max-height: 100%;
-    flex-wrap: nowrap;
-  }
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/base/grid/xy-grid/_grid.scss

@@ -1,29 +0,0 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-////
-/// @group xy-grid
-////
-
-/// Creates a max width container, designed to house your grid content.
-///
-/// @param {Number} $width [$grid-container] - a width to limit the container to.
-@mixin xy-grid-container($width: $grid-container, $padding: $grid-container-padding) {
-  @include xy-gutters($gutters: $padding, $gutter-type: padding);
-
-  max-width: $width;
-  margin: 0 auto;
-}
-
-/// Creates a container for your flex cells.
-///
-/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.
-/// @param {Boolean} $wrap [true] - If the cells within should wrap or not.
-@mixin xy-grid($direction: horizontal, $wrap: true) {
-  $direction: if($direction == 'horizontal', row, column);
-  $wrap: if($wrap, wrap, nowrap);
-
-  display: flex;
-  flex-flow: $direction $wrap;
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/base/grid/xy-grid/_gutters.scss

@@ -1,44 +0,0 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-////
-/// @group xy-grid
-////
-
-/// Create gutters for a cell/container.
-///
-/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
-/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding.
-/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
-/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.
-@mixin xy-gutters(
-  $gutters: $grid-margin-gutters,
-  $gutter-type: margin,
-  $gutter-position: right left,
-  $negative: false
-) {
-  $operator: if($negative, '-', '');
-
-  // If we have declared negative gutters, force type to `margin.
-  $gutter-type: if($negative, 'margin', $gutter-type);
-
-  // Output our margin gutters.
-  @if (type-of($gutters) == 'map') {
-    @include -zf-breakpoint-value(auto, $gutters) {
-      $gutter: rem-calc($-zf-bp-value) / 2;
-
-      // Loop through each gutter position
-      @each $value in $gutter-position {
-        #{$gutter-type}-#{$value}: unquote('#{$operator}#{$gutter}');
-      }
-    }
-  } @else if (type-of($gutters) == 'number') {
-    $gutter: rem-calc($gutters) / 2;
-
-    // Loop through each gutter position
-    @each $value in $gutter-position {
-      #{$gutter-type}-#{$value}: unquote('#{$operator}#{$gutter}');
-    }
-  }
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/base/grid/xy-grid/_layout.scss

@@ -1,33 +0,0 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-////
-/// @group xy-grid
-////
-
-/// Sizes child elements so that `$n` number of items appear on each row.
-///
-/// @param {Number} $n - Number of elements to display per row.
-/// @param {String} $selector ['.cell'] - Selector(s) to use for child elements.
-/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters
-/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
-/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin` or `padding`.
-/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
-/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
-@mixin xy-grid-layout(
-  $n,
-  $selector: '.cell',
-  $gutter-output: true,
-  $gutters: $grid-margin-gutters,
-  $gutter-type: margin,
-  $gutter-position: right left,
-  $breakpoint: $-zf-zero-breakpoint,
-  $vertical: false
-) {
-  $size: percentage(1 / $n);
-
-  & > #{$selector} {
-    @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);
-  }
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/base/grid/xy-grid/_position.scss

@@ -1,28 +0,0 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-////
-/// @group xy-grid
-////
-
-/// Offsets a column to the right/bottom by `$n` columns.
-///
-/// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `zf-cell()` mixin, such as `6`, `50%`, or `1 of 2`.
-/// @param {Boolean} $vertical [false] Sets the direction of the offset. If set to true will apply margin-top instead.
-@mixin xy-cell-offset(
-  $n,
-  $gutters: $grid-margin-gutters,
-  $gutter-type: margin,
-  $breakpoint: $-zf-zero-breakpoint,
-  $vertical: false
-) {
-  $direction: if($vertical, 'top', $global-left);
-
-  @include -zf-breakpoint-value($breakpoint, $gutters) {
-    $gutter: rem-calc($-zf-bp-value) / 2;
-    $size: if($gutter-type == 'margin', calc(#{xy-cell-size($n)} + #{$gutter}), #{xy-cell-size($n)});
-
-    margin-#{$direction}: #{$size};
-  }
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/base/grid/xy-grid/_xy-grid.scss

@@ -1,51 +0,0 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-////
-/// @group xy-grid
-////
-
-/// Enables the XY grid.
-/// @type Boolean
-$xy-grid: true !default;
-
-/// The maximum width of a grid container.
-/// @type Number
-$grid-container: $global-width !default;
-
-/// The number of columns used in the grid.
-/// @type Number
-$grid-columns: 12 !default;
-
-/// The amount of margin between cells at different screen sizes when using the margin grid. To use just one size, set the variable to a number instead of a map.
-/// @type Map | Length
-$grid-margin-gutters: (
-  small: 20px,
-  medium: 30px,
-) !default;
-
-/// The amount of padding in cells at different screen sizes when using the padding grid. To use just one size, set the variable to a number instead of a map.
-/// @type Map | Length
-$grid-padding-gutters: $grid-margin-gutters !default;
-
-/// The amount of padding to use when padding the grid-container.
-/// @type Map | Length
-$grid-container-padding: $grid-padding-gutters !default;
-
-/// The maximum width to apply to a grid container
-/// @type Number
-$grid-container-max: $global-width !default;
-
-/// The maximum number of cells in an XY block grid.
-/// @type Number
-$xy-block-grid-max: 8 !default;
-
-@import 'gutters';
-@import 'grid';
-@import 'cell';
-@import 'frame';
-@import 'position';
-@import 'layout';
-@import 'collapse';
-@import 'classes';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/base/grid.scss

@@ -1,8 +0,0 @@
-// For customization later on see reference below
-// In the meantime are are only including the XY-Grid component which we'll use as our layout grid
-// https://foundation.zurb.com/sites/docs/sass.html
-//https://foundation.zurb.com/sites/docs/xy-grid.html
-
-@import './grid/grid';
-
-@include foundation-xy-grid-classes;

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/base/iconography.scss

@@ -1,39 +0,0 @@
-$icon-unit: 8px !default;
-
-$icon-data: (
-  none: 0,
-  xxs: (
-    $icon-unit / 2,
-  ),
-  // 4px
-  xs:
-    (
-      $icon-unit,
-    ),
-  // 8px
-  s:
-    (
-      $icon-unit * 2,
-    ),
-  // 16px
-  m:
-    (
-      $icon-unit * 3,
-    ),
-  // 24px
-  l:
-    (
-      $icon-unit * 4,
-    ),
-  // 32px
-  xl:
-    (
-      $icon-unit * 6,
-    ),
-  // 48px
-  xxl:
-    (
-      $icon-unit * 8,
-    )
-    // 64px,
-) !default;

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/base/index.scss

@@ -1,22 +0,0 @@
-// normalizing css & general utility functions
-@import './_generic/_generic-dir.scss';
-
-// include colors data
-@import './color.scss';
-// include typography data
-@import './typography.scss';
-// include spacing data
-@import './spacing.scss';
-// include border data
-@import './border.scss';
-// include motion data
-@import './motion.scss';
-// include depth data
-@import './depth.scss';
-// include iconography data
-@import './iconography.scss';
-
-// include scss functions
-@import './utility-functions/_functions-base.scss';
-// base mixins
-@import './utility-mixins/_mixins-base.scss';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/base/motion.scss

@@ -1,18 +0,0 @@
-$unit: 100ms;
-
-$duration-data: (
-  fast: $unit,
-  base: $unit * 2,
-  slow: $unit * 3,
-  slower: $unit * 4,
-  slowest: $unit * 5,
-) !default;
-
-$easing-data: (
-  base: cubic-bezier(0.64, 0, 0.35, 1),
-  in: cubic-bezier(0.36, 0, 1, 1),
-  out: cubic-bezier(0, 0, 0.42, 1),
-  excite: cubic-bezier(0.18, 0.67, 0.6, 1.22),
-  overshoot: cubic-bezier(0.07, 0.28, 0.32, 1.22),
-  anticipate: cubic-bezier(0.38, -0.4, 0.88, 0.65),
-) !default;

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/base/spacing.scss

@@ -1,71 +0,0 @@
-$point-unit: 8px !default;
-// Point-Grid System
-// Use multiples of this value to define dimensions, padding, and margin of both block and inline elements.
-// Learn more here: https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632
-
-$spacing-data: (
-  none: 0,
-  xxs: rem($point-unit / 2),
-  // 4px
-  xs: rem($point-unit),
-  // 8px
-  s: rem($point-unit * 2),
-  // 16px
-  m: rem($point-unit * 3),
-  // 24px
-  l: rem($point-unit * 4),
-  // 32px
-  xl: rem($point-unit * 6),
-  // 48px
-  xxl: rem($point-unit * 8) // 64px,,,,,,,,
-) !default;
-
-/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.
-/// @type Map
-$breakpoints: (
-  small: 0,
-  medium: 640px,
-  large: 1024px,
-  xlarge: 1200px,
-  xxlarge: 1440px,
-) !default;
-
-// Small devices
-@mixin sm {
-  @media (max-width: 32rem) {
-    @content;
-  }
-}
-// Medium devices
-@mixin md {
-  @media (max-width: 48rem) {
-    @content;
-  }
-  @media only screen and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
-    @content;
-  }
-  @media only screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
-    @content;
-  }
-  @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {
-    @content;
-  }
-  @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
-    @content;
-  }
-  @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {
-    @content;
-  }
-  @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
-    @content;
-  }
-  @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {
-    @content;
-  }
-}
-// Large devices
-@mixin lg {
-  @media (max-width: 64rem) {
-    @content;
-  }
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/base/typography.scss

@@ -1,37 +0,0 @@
-$font-size-data: (
-  900: 2.7692rem,
-  // 36px
-  800: 1.8461rem,
-  // 24px
-  700: 1.3846rem,
-  // 18px
-  600: 1.2307rem,
-  // 16px
-  500: 1.0769rem,
-  // 14px
-  400: 1rem,
-  // 13px
-  300: 0.923rem,
-  // 12px
-  200: 0.8461rem,
-  // 11px
-  100: 0.75rem,
-) !default;
-
-$line-height-data: (
-  normal: normal,
-  // TODO: Need to revise these with visual design team
-  600: 1.2,
-  500: 1.2,
-  400: 1.5,
-  300: 1.5,
-  200: 1.5,
-) !default;
-
-$font-weight-data: (
-  bold: 900,
-  semibold: 600,
-  regular: 400,
-  light: 300,
-  thin: 100,
-) !default;

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/base/utility-functions/_functions-base.scss

@@ -1,7 +0,0 @@
-@import './color-functions.scss';
-@import './typography-functions.scss';
-@import './spacing-functions.scss';
-@import './motion-functions.scss';
-@import './depth-functions.scss';
-@import './border-functions.scss';
-@import './iconography-functions';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/base/utility-functions/border-functions.scss

@@ -1,13 +0,0 @@
-/// Returns the border size for the specified size name
-/// @param {String} $size [xs]
-/// @return {List} The border value.
-
-@function border-size($size: xs) {
-  $fetched-value: map-get($border-size-data, $size);
-
-  @if type-of($fetched-value) == number {
-    @return $fetched-value;
-  } @else {
-    @error 'Border size `#{$size}` not found. Available variants: #{$border-size-data}';
-  }
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/base/utility-functions/color-functions.scss

@@ -1,171 +0,0 @@
-// @import '../../base/_generic/until/math';
-
-/// Returns the color value for a given color name and group.
-///
-/// @param {String} $hue - The color's hue.
-/// @param {Number} $range - The darkness/lightness of the color. Defaults to base. The higher the number, the darker the color.
-/// @return {Color} The color value.
-
-@function color($hue, $range: 600) {
-  $fetched-color: map-get(map-get($color-palette-data, $hue), $range);
-
-  @if map-has-key($color-palette-data, $fetched-color) {
-    $fetched-color: map-get(map-get($color-palette-data, $fetched-color), $range);
-  }
-
-  @if type-of($fetched-color) == color {
-    @return $fetched-color;
-  } @else if $fetched-color == null {
-    $fetched-based-color: map-get(map-get($color-palette-data, $hue), 500);
-
-    @if $range <= 100 {
-      $fetched-color: lighten($fetched-based-color, 40%);
-      @return $fetched-color;
-    } @else if $range == 200 {
-      $fetched-color: lighten($fetched-based-color, 30%);
-      @return $fetched-color;
-    } @else if $range == 300 {
-      $fetched-color: lighten($fetched-based-color, 20%);
-      @return $fetched-color;
-    } @else if $range == 400 {
-      $fetched-color: lighten($fetched-based-color, 10%);
-      @return $fetched-color;
-    } @else if $range == 600 {
-      $fetched-color: darken($fetched-based-color, 10%);
-      @return $fetched-color;
-    } @else if $range == 700 {
-      $fetched-color: darken($fetched-based-color, 20%);
-      @return $fetched-color;
-    } @else if $range == 800 {
-      $fetched-color: darken($fetched-based-color, 30%);
-      @return $fetched-color;
-    } @else if $range >= 900 {
-      $fetched-color: darken($fetched-based-color, 40%);
-      @return $fetched-color;
-    } @else {
-      @error 'The `#{$range}` could not be found. Make sure you have specify a range between 000 and 1000.';
-    }
-  } @else {
-    @error 'Color `#{$hue} - #{$range}` not found. Available colors: #{$color-palette-data}';
-  }
-}
-
-/// Returns a foreground color based on a given background-color in accordance with accessibility standards.
-///
-/// @param {Color} $background-color - The background color where the foreground will sit.
-/// @param {Color} $dark-color - The dark color you wish to display if there is enough contrast.
-/// @param {Color} $light-color - The light color you wish to display if there is enough contrast.
-/// @return {Color} The HEX color of the foreground.
-@function color-contrast($background-color, $dark-color: color(neutral, 900), $light-color: color(neutral, 000)) {
-  @if $background-color == null {
-    @return null;
-  } @else {
-    // Based on the algorithm recommended by W3: https://www.w3.org/TR/AERT/#color-contrast
-    $yiq: (red($background-color) * 299 + green($background-color) * 587 + blue($background-color) * 114) / 1000;
-    @return if($yiq >= 128, $dark-color, $light-color);
-  }
-}
-
-$contrast-warnings: true !default;
-
-////
-/// @group functions
-////
-
-/// Checks the luminance of `$color`.
-///
-/// @param {Color} $color - Color to check the luminance of.
-///
-/// @returns {Number} The luminance of `$color`.
-@function color-luminance($color) {
-  // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
-  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
-  $rgba: red($color), green($color), blue($color);
-  $rgba2: ();
-
-  @for $i from 1 through 3 {
-    $rgb: nth($rgba, $i);
-    $rgb: $rgb / 255;
-
-    $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));
-
-    $rgba2: append($rgba2, $rgb);
-  }
-
-  @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);
-}
-
-/// Checks the contrast ratio of two colors.
-///
-/// @param {Color} $color1 - First color to compare.
-/// @param {Color} $color2 - Second color to compare.
-///
-/// @returns {Number} The contrast ratio of the compared colors.
-@function color-contrast2($color1, $color2) {
-  // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
-  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
-  $luminance1: color-luminance($color1) + 0.05;
-  $luminance2: color-luminance($color2) + 0.05;
-  $ratio: $luminance1 / $luminance2;
-
-  @if $luminance2 > $luminance1 {
-    $ratio: 1 / $ratio;
-  }
-
-  $ratio: round($ratio * 10) / 10;
-
-  @return $ratio;
-}
-
-/// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.
-///
-/// @param {Color} $base - Color to check luminance.
-/// @param {List} $colors [($white, $black)] - Colors to compare.
-/// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance.
-///
-/// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.
-@function color-pick-contrast($base, $colors: ($white, $black), $tolerance: $global-color-pick-contrast-tolerance) {
-  $contrast: color-contrast($base, nth($colors, 1));
-  $best: nth($colors, 1);
-
-  @for $i from 2 through length($colors) {
-    $current-contrast: color-contrast($base, nth($colors, $i));
-    @if ($current-contrast - $contrast > $tolerance) {
-      $contrast: color-contrast($base, nth($colors, $i));
-      $best: nth($colors, $i);
-    }
-  }
-
-  @if ($contrast-warnings and $contrast < 3) {
-    @warn "Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}";
-  }
-
-  @return $best;
-}
-
-/// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness.
-///
-/// @param {Color} $color - Color to scale.
-/// @param {Percentage} $scale [5%] - Amount to scale up or down.
-/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.
-///
-/// @returns {Color} A scaled color.
-@function smart-scale($color, $scale: 5%, $threshold: 40%) {
-  @if lightness($color) > $threshold {
-    $scale: -$scale;
-  }
-  @return scale-color($color, $lightness: $scale);
-}
-
-/// Get color from $color-palette-data
-///
-/// @param {key} color key from $color-palette-data
-///
-/// @returns {Color} color from $color-palette-data
-@function get-color($key) {
-  @if map-has-key($color-palette-data, $key) {
-    @return map-get($color-palette-data, $key);
-  } @else {
-    @error 'given $key is not available in $color-palette-data';
-  }
-}