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

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

@@ -1,4 +1,3 @@
-
 $link-text-color: color(brand-primary, 600);
 
 /// Returns desired styles for a given typography style.
@@ -6,67 +5,67 @@ $link-text-color: color(brand-primary, 600);
 /// @param {String} $weight - light, normal, semibold, bold.
 
 @mixin h1-text-style($weight: regular) {
-  font-size:   font-size(900);
+  font-size: font-size(900);
   line-height: line-height(normal);
   font-weight: font-weight($weight);
 }
 
 @mixin h2-text-style($weight: regular) {
-  font-size:   font-size(800);
+  font-size: font-size(800);
   line-height: line-height(normal);
   font-weight: font-weight($weight);
 }
 
 @mixin h3-text-style($weight: regular) {
-  font-size:   font-size(700);
+  font-size: font-size(700);
   line-height: line-height(600);
   font-weight: font-weight($weight);
 }
 
 @mixin h4-text-style($weight: regular) {
-  font-size:   font-size(600);
+  font-size: font-size(600);
   line-height: line-height(normal);
   font-weight: font-weight($weight);
 }
 
 @mixin h5-text-style($weight: regular) {
-  font-size:   font-size(500);
+  font-size: font-size(500);
   line-height: line-height(normal);
   font-weight: font-weight($weight);
 }
 
-@mixin section-header-text-style($weight: semibold) { 
-  font-size:   font-size(500);
+@mixin section-header-text-style($weight: semibold) {
+  font-size: font-size(500);
   line-height: line-height(normal);
   font-weight: font-weight($weight);
   text-transform: uppercase;
 }
 
 @mixin body-text-style($weight: regular) {
-  font-size:   font-size(400);
+  font-size: font-size(400);
   line-height: line-height(normal);
   font-weight: font-weight($weight);
 }
 
-@mixin body-small-text-style($weight: regular) { 
-  font-size:   font-size(300);
+@mixin body-small-text-style($weight: regular) {
+  font-size: font-size(300);
   line-height: line-height(normal);
   font-weight: font-weight($weight);
 }
 
-@mixin body-micro-text-style($weight: regular) { 
-  font-size:   font-size(200);
+@mixin body-micro-text-style($weight: regular) {
+  font-size: font-size(200);
   line-height: line-height(normal);
   font-weight: font-weight($weight);
 }
 
-@mixin list-text-style($weight: regular) { 
-  font-size:   font-size(400);
+@mixin list-text-style($weight: regular) {
+  font-size: font-size(400);
   line-height: line-height(normal);
   font-weight: font-weight($weight);
 }
 
-@mixin link-text-style($weight: regular) { 
+@mixin link-text-style($weight: regular) {
   line-height: line-height(400);
   font-weight: font-weight($weight);
   color: $link-text-color;

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

@@ -7,22 +7,23 @@
 // we need to rethink how the styles are imported, maybe using css modules
 // or even styled component so we have styles more modularized
 @import '~react-dates/lib/css/_datepicker.css';
-@import '../../../../legacy/ds-shuttle/src/DSShuttle.scss';
-@import '../../../../legacy/ds-filterbar/src/DSFilterBar.scss';
-@import '../../../../legacy/ds-modal/src/DSModal.scss';
-@import '../../../../layout/ds-modal-slide/src/DSModalSlide.scss';
-@import '../../../../legacy/ds-datagrids/src/DataGrids.scss';
-@import '../../../../data/ds-treeview/src/Tree';
-@import '../../../../data/ds-query-builder/src/DSQueryBuilder.scss';
-@import '../../../../legacy/ds-search-field/src/DSSearchField.scss';
-@import '../../../../legacy/ds-date-time-recurrence-picker/src/DSDateTimeRecurrenceSelector.scss';
-@import '../../../../legacy/ds-number-range-field/src/DSNumberRangeField.scss';
-@import '../../../../legacy/ds-date-picker/src/DSDatePicker.scss';
-@import '../../../../legacy/ds-date-time-picker/src/DSDateTimePicker.scss';
-@import '../../../../legacy/ds-date-range-picker/src/DSDateRangePicker.scss';
-@import '../../../../legacy/ds-date-range-selector/src/DSDateRangeSelector.scss';
-@import '../../../../legacy/ds-codeeditor/src/DSCodeEditor.scss';
-@import '../../../../legacy/ds-wysiwygeditor/src/DSWYSIWYGEditor.scss';
-@import '../../../../legacy/ds-imagelibrarymodal/src/DSImageLibraryModal.scss';
-@import '../../../../layout/ds-ribbon/src/DSRibbon.scss';
-@import '../../../../legacy/ds-card-array/src/DSCardArray.scss';
+@import '../../../ds-shuttle/src/DSShuttle.scss';
+@import '../../../ds-filterbar/src/DSFilterBar.scss';
+@import '../../../ds-modal/src/DSModal.scss';
+@import '../../../ds-modal-slide/src/DSModalSlide.scss';
+@import '../../../ds-datagrids/src/DataGrids.scss';
+@import '../../../ds-treeview/src/Tree';
+@import '../../../ds-query-builder/src/DSQueryBuilder.scss';
+@import '../../../ds-search-field/src/DSSearchField.scss';
+@import '../../../ds-date-time-recurrence-picker/src/DSDateTimeRecurrenceSelector.scss';
+@import '../../../ds-number-range-field/src/DSNumberRangeField.scss';
+@import '../../../ds-date-picker/src/DSDatePicker.scss';
+@import '../../../ds-date-time-picker/src/DSDateTimePicker.scss';
+@import '../../../ds-date-range-picker/src/DSDateRangePicker.scss';
+@import '../../../ds-date-range-selector/src/DSDateRangeSelector.scss';
+@import '../../../ds-codeeditor/src/DSCodeEditor.scss';
+@import '../../../ds-wysiwygeditor/src/DSWYSIWYGEditor.scss';
+@import '../../../ds-imagelibrarymodal/src/DSImageLibraryModal.scss';
+@import '../../../ds-uploader/src/DSUploader.scss';
+@import '../../../ds-ribbon/src/DSRibbon.scss';
+@import '../../../ds-card-array/src/DSCardArray.scss';

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

@@ -3,7 +3,7 @@
 // include grid data
 @import './base/grid.scss';
 
-// elements scss 
+// elements scss
 @import './base/_elements/_elements.scss';
 
 // components from design system

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/themes/theme-demo.scss

@@ -15,16 +15,16 @@ Change these color values below to your brand colors.
 */
 // Brand - Primary
 $theme-color-brand-primary-900: null;
-$theme-color-brand-primary-800: null; 
+$theme-color-brand-primary-800: null;
 $theme-color-brand-primary-700: null;
 $theme-color-brand-primary-600: null;
-$theme-color-brand-primary-500: #00FC00;
+$theme-color-brand-primary-500: #00fc00;
 $theme-color-brand-primary-400: null;
 $theme-color-brand-primary-300: null;
 $theme-color-brand-primary-200: null;
 $theme-color-brand-primary-100: null;
 
-// Brand - Secondary 
+// Brand - Secondary
 $theme-color-brand-secondary-900: null;
 $theme-color-brand-secondary-800: null;
 $theme-color-brand-secondary-700: null;
@@ -38,51 +38,49 @@ $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-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;
+$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;
+// 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-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-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-200: #f7cdd2;
 $theme-color-danger-100: null;
 // Warning - Used to communicate status or feedback to the user
-$theme-color-warning-900: #D17A00;
+$theme-color-warning-900: #d17a00;
 $theme-color-warning-800: null;
-$theme-color-warning-700: #FF9400;
-$theme-color-warning-600: #FBB431;
-$theme-color-warning-500: #FBB431;
-$theme-color-warning-400: #FBDE31;
+$theme-color-warning-700: #ff9400;
+$theme-color-warning-600: #fbb431;
+$theme-color-warning-500: #fbb431;
+$theme-color-warning-400: #fbde31;
 $theme-color-warning-300: null;
 $theme-color-warning-200: null;
 $theme-color-warning-100: null;
 
-
-
 // **TYPOGRAPHY**
 // Typeface
 // Change the typeface.
@@ -95,4 +93,4 @@ $theme-base-font-size: 13px;
 
 // **BORDER RADIUS**
 // How round would you like your containers to be?
-$theme-base-border-radius: 2px; 
+$theme-base-border-radius: 2px;

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-button-group/DSButtonGroup.scss

@@ -11,18 +11,24 @@ $btn-el: #{$prefix}-button;
 
   &--horizontal {
     &.#{$btn-group-container}--s {
-      & > .#{$btn-el} { margin-right: space(s); }      
-    } 
+      & > .#{$btn-el} {
+        margin-right: space(s);
+      }
+    }
 
-    &.#{$btn-group-container}--m {   
-      & > .#{$btn-el} { margin-right: space(m); }         
-    }    
+    &.#{$btn-group-container}--m {
+      & > .#{$btn-el} {
+        margin-right: space(m);
+      }
+    }
 
-    &.#{$btn-group-container}--l {    
-      & > .#{$btn-el} { margin-right: space(l); }
-    }  
+    &.#{$btn-group-container}--l {
+      & > .#{$btn-el} {
+        margin-right: space(l);
+      }
+    }
 
-    .#{$btn-el} {            
+    .#{$btn-el} {
       &:not(:last-child) {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
@@ -37,23 +43,32 @@ $btn-el: #{$prefix}-button;
 
   &--vertical {
     &.#{$btn-group-container}--s {
-      & > .#{$btn-el} { margin-bottom: space(s); }      
-    } 
+      & > .#{$btn-el} {
+        margin-bottom: space(s);
+      }
+    }
 
-    &.#{$btn-group-container}--m {   
-      & > .#{$btn-el} { margin-bottom: space(m); }         
-    }    
+    &.#{$btn-group-container}--m {
+      & > .#{$btn-el} {
+        margin-bottom: space(m);
+      }
+    }
 
-    &.#{$btn-group-container}--l {    
-      & > .#{$btn-el} { margin-bottom: space(l); }
-    } 
+    &.#{$btn-group-container}--l {
+      & > .#{$btn-el} {
+        margin-bottom: space(l);
+      }
+    }
 
     flex-direction: column;
   }
 
   .#{$btn-el} {
-    &:hover { z-index: 3; }
-    &:focus { z-index: 2; }
+    &:hover {
+      z-index: 3;
+    }
+    &:focus {
+      z-index: 2;
+    }
   }
-
 }

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-button-v1/DSButton.scss

@@ -13,6 +13,7 @@ $btn-el-s: #{$btn-el}--s;
 $btn-el-m: #{$btn-el}--m;
 $btn-el-l: #{$btn-el}--l;
 $btn-el-fluid: #{$btn-el}--fluid-width;
+
 $btn-el-primary: #{$btn-el}--primary;
 $btn-el-text: #{$btn-el}--text;
 $btn-el-secondary: #{$btn-el}--secondary;
@@ -32,6 +33,7 @@ $button-height: space(m) * 1.17;
 $button-border-radius: $theme-base-border-radius;
 $button-width: space(l) * 1.3;
 $button-padding: 0 space(s);
+
 $s-size: space(s) * 1.125; //18px;
 $m-size: space(m) * 1.17; //28px
 $l-size: space(l) * 1.25; //40px;
@@ -42,13 +44,14 @@ $l-font: font-size(600); //16px;
 
 $border-type: solid border-size(xs);
 $border-type-2: solid border-size(m);
+
 $text-disabled: #5c6574;
 
 @mixin withFocus($color: color(brand-primary, 600)) {
   outline: none;
   position: relative;
 
-  &::after {
+  &:after {
     content: '';
     position: absolute;
     top: 0;
@@ -56,7 +59,6 @@ $text-disabled: #5c6574;
     width: 100%;
     height: 100%;
     pointer-events: none;
-
     @include dsFocus($color);
   }
 }
@@ -66,13 +68,12 @@ $text-disabled: #5c6574;
 }
 
 div.#{$btn-el} {
-  appearance: initial;
+  -webkit-appearance: initial;
 }
 
 .#{$btn-el} {
   @include body-text-style(semibold);
-  @include center;
-
+  @include center();
   min-width: $button-width;
   line-height: unset;
   border-radius: $button-border-radius;
@@ -104,7 +105,6 @@ div.#{$btn-el} {
       margin-right: space(xs);
       margin-left: space(xs) * -1;
     }
-
     &:last-child:not(:first-child) {
       margin-left: space(xs);
       margin-right: space(xs) * -1;
@@ -128,7 +128,6 @@ div.#{$btn-el} {
   &.#{$btn-el}--icon-only {
     width: $s-size;
   }
-
   // https://jira.elliemae.io/browse/PUI-6990
   // & .#{$btn-icon} {
   //   height: 12px;
@@ -142,7 +141,6 @@ div.#{$btn-el} {
   &.#{$btn-el}--icon-only {
     width: $m-size;
   }
-
   // https://jira.elliemae.io/browse/PUI-6990
   // & .#{$btn-icon} {
   //   height: 14px;
@@ -190,8 +188,7 @@ div.#{$btn-el} {
     color: $text-disabled;
     background-color: color(neutral, 100);
     border-color: color(neutral, 100);
-
-    @include withDisabled;
+    @include withDisabled();
 
     .#{$btn-icon} {
       @include icon-color($text-disabled);
@@ -266,8 +263,7 @@ div.#{$btn-el} {
   &.#{$btn-el-vdisabled} {
     color: color(neutral, 500);
     background: color(neutral, 000);
-
-    @include withDisabled;
+    @include withDisabled();
 
     .#{$btn-icon} {
       @include icon-color(color(neutral, 500));
@@ -331,8 +327,7 @@ div.#{$btn-el} {
   &.#{$btn-el-vdisabled} {
     color: color(neutral, 500);
     background-color: color(neutral, 000);
-
-    @include withDisabled;
+    @include withDisabled();
 
     .#{$btn-icon} {
       @include icon-color(color(neutral, 500));
@@ -357,8 +352,7 @@ div.#{$btn-el} {
 // ********************************************
 // link
 .#{$btn-el-link} {
-  @include link-text-style;
-
+  @include link-text-style();
   padding: 0;
   color: color(brand-primary, 600);
   border: none;
@@ -379,16 +373,14 @@ div.#{$btn-el} {
 
   &:disabled {
     color: color(neutral, 400);
-
-    @include withDisabled;
+    @include withDisabled();
   }
 
   &.#{$btn-el}--icon-only {
     &:focus,
     &.#{$btn-el-vfocus} {
       span.label-wrapper {
-        @include withFocus;
-
+        @include withFocus();
         &::after {
           top: -2px;
           left: -2px;
@@ -435,7 +427,7 @@ $intent-colors: (
       color: $color;
 
       span.label-wrapper.no-icon {
-        &::before {
+        &:before {
           background-color: transparent;
           border-radius: 2px;
         }
@@ -465,7 +457,7 @@ $intent-colors: (
   }
 
   .#{$btn-el-m} {
-    font-size: tomobile(font-size(600));
+    font-size: toMobile(font-size(600));
     height: calc(#{space(m)} * 1.085);
 
     &.#{$btn-el}--icon-only {
@@ -481,7 +473,7 @@ $intent-colors: (
   }
 
   .#{$btn-el-l} {
-    font-size: tomobile(font-size(600));
+    font-size: toMobile(font-size(600));
     height: calc(#{space(l)} * 1.016);
 
     &.#{$btn-el}--icon-only {

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-card/DSCard.scss

@@ -17,6 +17,7 @@ $el-pull-right: #{$el-header}__pull-right;
 
   .#{$el-header} {
     color: color(neutral, 600);
+    background: color(neutral, 050);
     padding: 6px 15px;
     border-bottom: 1px solid transparent;
     @include border-radius(0);

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-card-array/DSCardArray.scss

@@ -9,32 +9,31 @@ $box: #{$card-array}__box;
   flex-direction: row;
   flex-wrap: wrap;
 
-
   @for $i from 1 through 4 {
-    &--cols-lg-#{$i} { 
+    &--cols-lg-#{$i} {
       .#{$box} {
         $width: 100 / #{$i};
-        width: calc(#{$width}%  - (#{space(s)} * 2));
+        width: calc(#{$width}% - (#{space(s)} * 2));
       }
     }
   }
 
   @media (max-width: 1024px) {
     @for $i from 1 through 4 {
-      &--cols-md-#{$i} { 
+      &--cols-md-#{$i} {
         .#{$box} {
           $width: 100 / #{$i};
-          width: calc(#{$width}%  - (#{space(s)} * 2));
+          width: calc(#{$width}% - (#{space(s)} * 2));
         }
       }
     }
   }
   @media (max-width: 800px) {
     @for $i from 1 through 4 {
-      &--cols-sm-#{$i} { 
+      &--cols-sm-#{$i} {
         .#{$box} {
           $width: 100 / #{$i};
-          width: calc(#{$width}%  - (#{space(s)} * 2));
+          width: calc(#{$width}% - (#{space(s)} * 2));
         }
       }
     }

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-codeeditor/DSCodeEditor.scss

@@ -1 +1 @@
-@import './components/DSCodeEditorImpl';
+@import './components/DSCodeEditorImpl';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-codeeditor/components/DSCodeEditorImpl.scss

@@ -11,59 +11,59 @@ $options-group: #{$el-container}-options-group;
 $ds-checkbox: #{$prefix}-form-element-checkbox;
 
 .#{$el-file-name} {
-	padding-bottom: space(s);
-	border-bottom: 1px solid color(neutral, 050);
+  padding-bottom: space(s);
+  border-bottom: 1px solid color(neutral, 050);
 }
 
 .#{$el-find-replace-btn} {
-    display: flex;
-    margin-top: space(s);
-    margin-bottom: space(s);
+  display: flex;
+  margin-top: space(s);
+  margin-bottom: space(s);
 
-    .em-ds-button:first-child {
-    	margin-right: space(s);
-    }
+  .em-ds-button:first-child {
+    margin-right: space(s);
+  }
 }
 
 .#{$el-next-back-btn},
 .#{$el-replace-btns} {
-	display: flex;
+  display: flex;
 }
 
 .#{$el-replace},
 .#{$el-replace-btns} {
-	margin-top: space(s);
+  margin-top: space(s);
 }
 
 .#{$el-replace-btns} {
-	margin-bottom: space(s);
-	.em-ds-button:first-child {
-    	margin-right: space(s);
-    }
+  margin-bottom: space(s);
+  .em-ds-button:first-child {
+    margin-right: space(s);
+  }
 }
 
 .#{$el-find} {
-	align-items: baseline;
-	.em-ds-input {
-		margin-right: space(xs);
-	}
-	.em-ds-form-element-checkbox {
-		flex: 0.5;
+  align-items: baseline;
+  .em-ds-input {
+    margin-right: space(xs);
+  }
+  .em-ds-form-element-checkbox {
+    flex: 0.5;
 
-		.em-ds-form-element-checkbox__input-button {
-			margin-right: space(xs);
-		}
-	}
+    .em-ds-form-element-checkbox__input-button {
+      margin-right: space(xs);
+    }
+  }
 }
 
 .#{$options-group} {
-	padding: 0 space(xs);
-	display: flex;
-	.#{$ds-checkbox}:not(:last-child) {
-		margin-right: space(s);
-	}
+  padding: 0 space(xs);
+  display: flex;
+  .#{$ds-checkbox}:not(:last-child) {
+    margin-right: space(s);
+  }
 }
 
 .ace_editor {
-	width: 100% !important;
+  width: 100% !important;
 }