@elliemae/ds-basic 3.51.0-next.0 → 3.51.0-next.11

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

@@ -0,0 +1,33 @@
+// 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/styles/base/grid/xy-grid/_position.scss

@@ -0,0 +1,28 @@
+// 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/styles/base/grid/xy-grid/_xy-grid.scss

@@ -0,0 +1,51 @@
+// 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/styles/base/grid.scss

@@ -0,0 +1,8 @@
+// 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/styles/base/iconography.scss

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

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

@@ -0,0 +1,18 @@
+$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/styles/base/spacing.scss

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

@@ -0,0 +1,37 @@
+$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/styles/base/utility-functions/_functions-base.scss

@@ -0,0 +1,7 @@
+@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/styles/base/utility-functions/border-functions.scss

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

@@ -0,0 +1,171 @@
+// @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/static-build/styles/components/packages/ds-basic/styles/base/utility-functions/depth-functions.scss

@@ -0,0 +1,26 @@
+/// 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/static-build/styles/components/packages/ds-basic/styles/base/utility-functions/iconography-functions.scss

@@ -0,0 +1,14 @@
+/// 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/static-build/styles/components/packages/ds-basic/styles/base/utility-functions/motion-functions.scss

@@ -0,0 +1,26 @@
+/// 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}';
+  }
+}