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

package/dist/styles/components/packages/ds-basic/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/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/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/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/styles/base/iconography.scss

@@ -1,12 +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/styles/base/index.scss

@@ -1,23 +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/styles/base/motion.scss

@@ -1,19 +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/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/styles/base/typography.scss

@@ -1,29 +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.9230rem, // 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/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/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/styles/base/utility-functions/color-functions.scss

@@ -1,176 +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';
-  }
-}

package/dist/styles/components/packages/ds-basic/styles/base/utility-functions/depth-functions.scss

@@ -1,26 +0,0 @@
-/// Returns the shadow for the specified depth
-/// @param {String} $depth [base] - The shadow's depth.
-/// @return {List} The shadow value.
-
-@function depth($depth: 100, $alt: false) {
-  $data: $shadows-data;
-  @if ($alt) {
-    $data: $shadows-data-alt;
-  }
-  $fetched-value: map-get($data, $depth);
-
-  @if type-of($fetched-value) == list {
-    @return $fetched-value;
-  } @else {
-    @error 'Shadow variant `#{$depth}` not found. Available variants: #{$shadows-data}';
-  }
-}
-@function drop-shadow-depth($depth: 100) {
-  $fetched-value: map-get($drop-shadow-data, $depth);
-
-  @if type-of($fetched-value) == list {
-    @return $fetched-value;
-  } @else {
-    @error 'Shadow variant `#{$depth}` not found. Available variants: #{$drop-shadow-data}';
-  }
-}

package/dist/styles/components/packages/ds-basic/styles/base/utility-functions/iconography-functions.scss

@@ -1,14 +0,0 @@
-/// Returns the spacing value for a given variant.
-///
-/// @param {String} $space - how much space do you need.
-/// @return {Number} The spacing for the variant in px.
-
-@function icon-size($space: xs) {
-  $fetched-value: map-get($icon-data, $space);
-
-  @if type-of($fetched-value) == number {
-    @return $fetched-value;
-  } @else {
-    @error 'Spacing variant `#{$space}` not found. Available variants: #{$icon-data}';
-  }
-}

package/dist/styles/components/packages/ds-basic/styles/base/utility-functions/motion-functions.scss

@@ -1,26 +0,0 @@
-/// Returns the duration value for a given variant.
-///
-/// @param {String} $variant - The key for the given variant.
-/// @return {Number} The spacing for the variant (in milliseconds).
-
-@function duration($variant: base) {
-  $fetched-value: map-get($duration-data, $variant);
-
-  @if type-of($fetched-value) == number {
-    @return $fetched-value;
-  } @else {
-    @error 'Duration variant `#{$variant}` not found. Available variants: #{$duration-data}';
-  }
-}
-/// Returns the timing-function value for a given variant.
-///
-/// @param {String} $variant - The key for the given variant.
-/// @return {String} The cubic-bezier function (string) for the variant.
-@function easing($variant: base) {
-  $fetched-value: map-get($easing-data, $variant);
-  @if type-of($fetched-value) == string {
-    @return $fetched-value;
-  } @else {
-    @error 'Easing variant `#{$variant}` not found. Available variants: #{$easing-data}';
-  }
-}