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

package/dist/styles/_get-started.md

@@ -1 +0,0 @@
-# Get Started

package/dist/styles/base/_docs/color.md

@@ -1,47 +0,0 @@
-# Color
-
-Dimsum groups color into 3 types; Brand, Neutral, and Feedback Colors.
-
-- Brand Colors: These establish the personality of the brand. They should be used for accent elements such as primary buttons, CTA's and links.
-- Neutral Colors: These are used for things like text, borders, shadows, background colors, etc.
-- Feedback Colors: These are used to communicate status to the user and provide them with feedback. 
-
-A color palette is all of these colors put together. DimSum offers a default palette that contains all of these types of colors. 
-
-## Color System
-Color follows a predictable scale driven by type and a range. Each heu or color has a Base `(400)` and from this base, we extract shades and tints of that heu. Each variation of this color is given a three-digit rage number. This provides a predictable color scale of "allowed" colors in the system; the higher a number is, the darker the color. 
-
-## Usage
-We make use of Sass Functions to extract colors from each type in a consistent way.
-
-#### `color($type, $range)`
-
-Applies a color from our palette to a CSS property. `$type` refers to the type of color you would like to use (`brand`, `neutral`, `feedback`). `$range` refers to the scale or how dark you would like to color to be. If `$range` is not specified, the color will default to the base color for that type.
-
-```sass
-.div-container {
-    background-color: color(brand-primary, 700); // returns a hex value for that type of color and its range
-}
-```
-
-#### `color-contrast($background-color, $dark-color: color(neutral, 900), $light-color: color(neutral, 000))`
-
-Applies a color from our palette to a CSS property based on a given background color in accordance with accessibility standards. `$background-color` refers to the background color in which the foreground color is going to sit. `$dark-color` (Optional) refers to the dark color you wish to display if there is enough contrast. `$light-color` (Optional) refers to the light color you wish to display if there is enough contrast. If neither `$dark-color` or $light-color` are specified, the colors will default to `color(neutral, 900)` and `color(neutral, 000)` respectively.
-
-```sass
-$button-background-color: color(brand-primary, 700);
-$button-text-color-dark: color(brand-primary, 800);
-$button-text-color-light: color(brand-primary, 200);
-
-.button {
-    background-color: $button-background-color; 
-    color: color-contrast($button-background-color, $button-text-color-dark, $button-text-color-light); // returns a hex value with enough contrast for its background
-}
-```
-
-
-
-### Supporting Material
-* [Color in Design Sytems](https://medium.com/eightshapes-llc/color-in-design-systems-a1c80f65fa3)
-* [The Color System](https://material.io/design/color/the-color-system.html#color-usage-palettes)
-

package/dist/styles/base/_docs/depth.md

@@ -1,31 +0,0 @@
-# Depth
-
-Users interact with analog objects all the time. So, if we are able to translate nature digitally, they will feel more at ease. In the physical world, objects can be stacked or affixed to one another, but cannot pass through each other. Objects also cast shadows and reflect light. We follow those principles closely by having a predictable scale for how elevated an element is. Usually, as an element is closer to you, it is more important than they surrounding elements so we use the z-axis to declare hierarchy.
-
-## Depth System
-DimSum provides a predictable scale for depth using numbers. The higher the number, the closer it will appear. 
-
-```scss
-$shadows-data: (
-  500: (0 27px 24px 0 rgba(0, 0, 0, 0.24), 0 40px 77px 0 rgba(0, 0, 0, 0.19)),
-  400: (0 16px 28px 0 rgba(0, 0, 0, 0.24), 0 25px 55px 0 rgba(0, 0, 0, 0.19)),
-  300: (0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19)),
-  200: (0 6px 20px 0 rgba(0, 0, 0, 0.24), 0 8px 17px 0 rgba(0, 0, 0, 0.19)),
-  100: (0 1px 5px 0 rgba(0, 0, 0, 0.13), 0 2px 4px 0 rgba(0, 0, 0, 0.2)),
-  000: 0 0 0 0 transparent
-);
-```
-
-## Usage
-We make use of Sass functions specify the box-shadow we want to apply to objects in our mark up. 
-
-### Functions
-
-#### `depth($depth: 100)`
-Applies a box-shadow to a CSS property. `$depth` refers to the number in elevation you need. The higher the number, the higher the element will appear. If used but no value is passed as a parameter, it defaults to `100`,
-
-```sass
-.div-container {
-  box-shadow: depth(500); // returns a box-shadow value(s)
-}
-```

package/dist/styles/base/_docs/motion.md

@@ -1,45 +0,0 @@
-# Motion
-
-CSS transitions allows you to change property values smoothly (from one value to another), over a given duration. Speed is how fast or slow an element moves or changes. Easing explains how the element moves or changes through a given path.
-
-## Motion System
-DimSum provides a predictable scale for motion with semantic meaning. 
-
-```scss
-$unit: 100ms;
-
-$duration-data: (
-  fast: $unit,
-  base: $unit * 2,
-  slow: $unit * 3,
-  slower: $unit * 4,
-  slowest: $unit * 5,
-);
-
-$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),
-);
-
-```
-
-## Usage
-We make use of Sass functions specify the transition bezier and timing we want to apply to objects as they transition from one state to another one. 
-
-### Functions
-
-#### `motion($variant: base)`
-Applies a timing to a CSS property. `$variant` refers to the speed or duration in which you need the element to transition. If used but no value is passed as a parameter, it defaults to `base`.
-
-#### `duration($variant: base)`
-Applies a cubic-bezier to a CSS property. `$variant` refers to *how* you need that element to transition. If used but no value is passed as a parameter, it defaults to `base`.
-
-```sass
-.div-container {
-  transition: duration(slowest) easing(overshoot); // the first one returns a number in `ms` units, and the second one returns a cubic-bezier.
-}
-```

package/dist/styles/base/_docs/spacing.md

@@ -1,59 +0,0 @@
-# Spacing
-
-DimSum uses an 8-point grid system as its base for overall space. This means that space uses multiples of 8px to define dimensions, padding, and margin of both block and inline elements. This ensures all measures follow the same spacing rules and avoids many headaches when designers are discussing space with developers. Smaller components, such as iconography and typography, can align to a 4px grid. Regardless of form-factor, most popular screen sizes are divisible by 8 on at least one axis - usually both. This allows us to achieve symmetry in our UI. 
-
-## Spacing System
-DimSum provides a predictable scale for fixed space using t-shirt sizing. 
-
-```scss
-$point-unit: 8px !default;
-
-$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
-);
-```
-
-## Usage
-We make use of Sass functions specify the space we want to apply to objects in our mark up. 
-
-### Functions
-
-#### `space($space)`
-Applies spacing rules to a CSS property. `$space` refers to the scale in 8px of how much space you need. The higher the number, the bigger the space.
-
-```sass
-.div-container {
-  padding: space(m) space(xl); // returns a pixel value for those variables
-}
-```
-
-#### `rem($value)`
-Returns the value in rem for a given pixel value.
-
-```sass
-.div-container {
-  padding: rem(space(xl)); // returns a value in rems
-}
-```
-
-#### `em($value)`
-Returns the value in ems for a given pixel value. Note that this only works for elements that have had no font-size changes.
-
-```sass
-.div-container {
-  padding: em(space(xl)); // returns a value in ems
-}
-```
-
-
-### Supporting Material
-* [Intro to the 8-point Grid System](https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632)
-* [The Layout System](https://material.io/design/layout/understanding-layout.html#usage)
-

package/dist/styles/base/_docs/theming.md

@@ -1,131 +0,0 @@
-# Theming
-
-DimSum Themes are used to customize components to fit the specific needs of a brand or product.
-
-## Introduction to Theming
-Developers and designers can use DimSum Themes to modify existing components to fit their own specific visual styles and needs. Rather than changing each individual component's scss or building modified components from scratch, components can be easily customized by changing a set of universal variables in one place that seamlessly propagate across all of the components. 
-
-A lot of work goes in to making sure our System provides a great user experience and is also accessible by everyone everywhere. Some of our products that we support need the ability to be themed to match a specific brand (e.i consumer connect product or partner portals). When creating a new Theme, instead of giving the ability to customize every element on a interface, DimSum only allows a consumer of the System to customize Typography (Typeface and base font-size), Colors, and Border Radiuses. At first, this might seem constricting, however most consumers of a Design System are only concerned with these 3, as well as providing curated and delightful user experiences, and how fast they can get set up.  Supporting full customization is really hard to maintain. If further customization is desired, and although not advisable, we make our CSS classes available for a consumer of the System to override. 
-
-![theming](_images/theming.gif)
-
-### Dimsum Theme
-
-The Dimsum Design System has a default theme which is based off of the Styles shared by most of our products. When the system is downloaded and installed, all components are preset to use the default theme.
-
-The default theme acts as a starting point; from there designers and developers only need to define how their own components and styles deviate from the default. A theme can change all of the values or as little as only one. 
-
-## Usage
-To add a new theme you only have to create a new stylesheet following a specific schema. This Stylesheet is the entry point of the system and everything else in the system is relative to the values you specify in there.
-
-1. Add a new SCSS stylesheet `./src/styles/themes/`
-
-2. Import your new theme SCSS stylesheet in `./src/styles/dimsum.scss` and comment out or erase the other themes files in there.
-
->  The new theme stylesheet needs to follow the following schema: 
-```scss
-// **GLOBAL PREFIX**
-// This prefix will be added to all sass classes in the system
-$prefix: em-ds;
-
-/**
-Color Palette
-Change these color values below to your brand colors.
-*/
-// Brand - Primary
-$theme-color-brand-primary-900: null;
-$theme-color-brand-primary-800: #005181;
-$theme-color-brand-primary-700: #006AA9;
-$theme-color-brand-primary-600: #2080CD;
-$theme-color-brand-primary-500: #1394E5;
-$theme-color-brand-primary-400: #52A6EC;
-$theme-color-brand-primary-300: #A3D6FF;
-$theme-color-brand-primary-200: #EBF6FF;
-$theme-color-brand-primary-100: #F6FBFF;
-
-// Brand - Secondary 
-$theme-color-brand-secondary-900: null;
-$theme-color-brand-secondary-800: null;
-$theme-color-brand-secondary-700: null;
-$theme-color-brand-secondary-600: null;
-$theme-color-brand-secondary-500: null;
-$theme-color-brand-secondary-400: null;
-$theme-color-brand-secondary-300: null;
-$theme-color-brand-secondary-200: null;
-$theme-color-brand-secondary-100: null;
-
-//Neutral - Used for text, borders, shadows, background, etc
-$theme-color-neutral-1000: #000000;
-$theme-color-neutral-900: #333333;
-$theme-color-neutral-800: #25292F;
-$theme-color-neutral-700: #353C46;
-$theme-color-neutral-600: #464F5C;
-$theme-color-neutral-500: #697489;
-$theme-color-neutral-400: #8C93A6;
-$theme-color-neutral-300: #B0B9C8;
-$theme-color-neutral-200: #CBCFD7;
-$theme-color-neutral-100: #E0E3E8;
-$theme-color-neutral-080: #EBEDF0;
-$theme-color-neutral-050: #F6F7F9;
-$theme-color-neutral-000: #FFFFFF;
-
-// Success - Used to communicate status or feedback to the user 
-$theme-color-success-900: #32B87C;
-$theme-color-success-800: null;
-$theme-color-success-700: null;
-$theme-color-success-600: null;
-$theme-color-success-500: null;
-$theme-color-success-400: null;
-$theme-color-success-300: #D4F0E5;
-$theme-color-success-200: null;
-$theme-color-success-100: null;
-// Danger - Used to communicate status or feedback to the user
-$theme-color-danger-900: #E34256;
-$theme-color-danger-800: null;
-$theme-color-danger-700: null;
-$theme-color-danger-600: null;
-$theme-color-danger-500: null;
-$theme-color-danger-400: null;
-$theme-color-danger-300: null;
-$theme-color-danger-200: #F7CDD2;
-$theme-color-danger-100: null;
-// Warning - Used to communicate status or feedback to the user
-$theme-color-warning-900: #FF6300;
-$theme-color-warning-800: null;
-$theme-color-warning-700: #FF9400;
-$theme-color-warning-600: null;
-$theme-color-warning-500: #FBB431;
-$theme-color-warning-400: null;
-$theme-color-warning-300: null;
-$theme-color-warning-200: null;
-$theme-color-warning-100: null;
-
-
-// **TYPOGRAPHY**
-// Typeface
-// Change the typeface.
-$theme-font-family: "proxima-nova", Arial, sans-serif !default;
-
-// Type Scale
-// Change the font-sizes of HTML typed tags below.
-$theme-base-font-size: 13px;
-
-
-// **BORDER RADIUS**
-// How round would you like your containers to be?
-$theme-base-border-radius: 2px; 
-);
-```
-
-### Colors 
-Color is divided into Brand Colors (specific to a product), Neutral Colors (used for text, borders, shadows, etc), and Feedback Colors. If you only have one value for each type of color, you can specify a HEX or rgba value in the `400` level and the system will programmatically calculate the tints and shades of that color. Also the system's components makes use of a SASS function called `color-contrast()` which checks for color contrast and changes a foreground color based on the color contrast ratio of a background color.  
-
-### Typography
-Import your Typeface or use the default `Proxima Nova`. You can also specify the base font-size. All typographic styles and the Type Scale is relative to this value. 
-
-### Border Radius 
-Specify how round the corners of elements like card, buttons, sections, etc would be. 
-
-
-### Supporting Material
-* [Material Theming](https://material.io/design/material-theming/overview.html#using-material-theming)

package/dist/styles/base/_docs/typography.md

@@ -1,193 +0,0 @@
-# Typography
-
-DimSum uses Proxima Nova as it Font Family with specific typographic styles that define a hierarchy for both mobile and web. 
-* H1 
-* H2
-* H3
-* H4
-* H5
-* section-header
-* body
-* body-small
-
-## Type System
-Font size, font weight, and line-height have their own predictive scales.
-
-### Font Size
-We use three digits to convey in size. The higher the range number, the higher the font-size. 
-```scss
-$font-size-data: (
-  700: 2.7692rem, // 36px
-  600: 1.3846rem, // 18px
-  500: 1.2307rem, // 16px
-  400: 1.0769rem, // 14px
-  300: 1rem, // 13px
-  200: 1rem, // 13px
-  100: 0.9230rem// 12px
-);
-```
-
-### Font Weight
-For font-weight we use words.
-```sass
-$font-weight-data: (
-  bold: 900,
-  semibold: 600,
-  regular: 400,
-  light: 300,
-  thin: 100
-);
-```
-
-### Line Height
-We use three digits to convey in line-height. The higher the range number, the higher the line-height. 
-```sass
-$line-height-data: (
-  normal: normal,
-  600: 1.2,
-  500: 1.2,
-  400: 1.5,
-  300: 1.5,
-  200: 1.5
-);
-```
-
-## Usage
-We make use of Sass functions and mixins to use in our mark up. 
-
-### Functions
-
-#### `font-size($range)`
-Applies a font size from the allowed sizes in the system to a CSS property. `$range` refers to the scale of how big you would like the font-size to be. The higher the number, the bigger the font-size.
-
-```sass
-.div-container {
-    font-size: font-size(500); // returns a pixel value for that range
-}
-```
-
-#### `font-weight($weight)`
-Applies a font weight from the allowed weights in the system to a CSS property. `$weight` refers to either bold, semibold, base, light, etc.
-
-```sass
-.div-container {
-    font-size: font-weight(bold); // returns a weight value for that range (300 - 900)
-}
-```
-
-#### `line-height($range)`
-Applies a line height from the allowed line heights in the system to a CSS property. `$range` refers to how high you would like the line-height to be. The higher the number, the higher the line-height.
-
-```sass
-.div-container {
-    font-size: font-weight(bold); // returns a weight value for that range (300 - 900)
-}
-```
-
-### Mixins
-
-#### `h1-text-style($weight)`
-Applies all the text styling needed by Typographic Style defined in the system to a CSS declaration. `$weight` refers to the weight in the system you would like to use - optional parameter. 
-
-```sass
-.div-container {
-    @include h1-text-style(bold); // returns all the styles applied to the type style (font-size, line-height, and font-weight).
-}
-```
-
-#### `h2-text-style($weight)`
-Applies all the text styling needed by Typographic Style defined in the system to a CSS declaration. `$weight` refers to the weight in the system you would like to use - optional parameter. 
-
-```sass
-.div-container {
-    @include h2-text-style(bold); // returns all the styles applied to the type style (font-size, line-height, and font-weight).
-}
-```
-
-#### `h3-text-style($weight)`
-
-Applies all the text styling needed by Typographic Style defined in the system to a CSS declaration. `$weight` refers to the weight in the system you would like to use - optional parameter. 
-
-```sass
-.div-container {
-    @include h3-text-style(bold); // returns all the styles applied to the type style (font-size, line-height, and font-weight).
-}
-```
-
-#### `h4-text-style($weight)`
-Applies all the text styling needed by Typographic Style defined in the system to a CSS declaration. `$weight` refers to the weight in the system you would like to use - optional parameter. 
-
-```sass
-.div-container {
-    @include h4-text-style(bold); // returns all the styles applied to the type style (font-size, line-height, and font-weight).
-}
-```
-
-#### `h5-text-style($weight)`
-Applies all the text styling needed by Typographic Style defined in the system to a CSS declaration. `$weight` refers to the weight in the system you would like to use - optional parameter. 
-
-```sass
-.div-container {
-    @include h5-text-style(bold); // returns all the styles applied to the type style (font-size, line-height, and font-weight).
-}
-```
-
-#### `section-header-text-style($weight)`
-Applies all the text styling needed by Typographic Style defined in the system to a CSS declaration. `$weight` refers to the weight in the system you would like to use - optional parameter. 
-
-```sass
-.div-container {
-    @include section-header-text-style(bold); // returns all the styles applied to the type style (font-size, line-height, and font-weight).
-}
-```
-
-#### `body-text-style($weight)`
-Applies all the text styling needed by Typographic Style defined in the system to a CSS declaration. `$weight` refers to the weight in the system you would like to use - optional parameter. 
-
-```sass
-.div-container {
-    @include body-text-style(bold); // returns all the styles applied to the type style (font-size, line-height, and font-weight).
-}
-```
-
-#### `body-small-text-style($weight)`
-Applies all the text styling needed by Typographic Style defined in the system to a CSS declaration. `$weight` refers to the weight in the system you would like to use - optional parameter. 
-
-```sass
-.div-container {
-    @include body-small-text-style(bold); // returns all the styles applied to the type style (font-size, line-height, and font-weight).
-}
-```
-
-#### `body-micro-text-style($weight)`
-Applies all the text styling needed by Typographic Style defined in the system to a CSS declaration. `$weight` refers to the weight in the system you would like to use - optional parameter. 
-
-```sass
-.div-container {
-    @include body-micro-text-style(bold); // returns all the styles applied to the type style (font-size, line-height, and font-weight).
-}
-```
-
-#### `body-list-text-style($weight)`
-Applies all the text styling needed by Typographic Style defined in the system to a CSS declaration. `$weight` refers to the weight in the system you would like to use - optional parameter. 
-
-```sass
-.div-container {
-    @include body-list-text-style(bold); // returns all the styles applied to the type style (font-size, line-height, and font-weight).
-}
-```
-
-#### `body-link-text-style($weight)`
-Applies all the text styling needed by Typographic Style defined in the system to a CSS declaration. `$weight` refers to the weight in the system you would like to use - optional parameter. 
-
-```sass
-.div-container {
-    @include body-link-text-style(bold); // returns all the styles applied to the type style (font-size, line-height, and font-weight).
-}
-```
-
-### Supporting Material
-* [Responsive Typography With Sass Maps](https://www.smashingmagazine.com/2015/06/responsive-typography-with-sass-maps/)
-* [The Type System](https://material.io/design/typography/the-type-system.html#type-scale)
-* [Modular Scale](http://www.modularscale.com/)
-

package/dist/styles/base/_elements/_elements.scss

@@ -1,65 +0,0 @@
-$primary-text-color: color(neutral, 900);
-
-:root {
-  font-family: $theme-font-family;
-  font-size: $theme-base-font-size;
-  color: $primary-text-color;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-}
-
-h1 {
-  @include h1-text-style;
-}
-
-h2 {
-  @include h2-text-style;
-}
-
-h3 {
-  @include h3-text-style;
-}
-
-h4 {
-  @include h4-text-style;
-}
-
-p {
-  @include body-text-style;
-}
-
-a {
-  @include link-text-style;
-}
-
-.#{$prefix}-h1-text-style {
-  @include h1-text-style;
-}
-
-.#{$prefix}-h2-text-style {
-  @include h2-text-style;
-}
-
-.#{$prefix}-h3-text-style {
-  @include h3-text-style;
-}
-
-.#{$prefix}-h4-text-style {
-  @include h4-text-style;
-}
-
-.#{$prefix}-section-header-text-style {
-  @include section-header-text-style;
-}
-
-.#{$prefix}-body-text-style {
-  @include body-text-style;
-}
-
-.#{$prefix}-body-small-text-style {
-  @include body-small-text-style;
-}
-
-.#{$prefix}-link-text-style {
-  @include link-text-style;
-}