@elliemae/ds-basic 2.0.0-alpha.1 → 2.0.0-alpha.13

package/styles/components/packages/ds-form/Radio/DSRadio.scss

@@ -16,7 +16,9 @@ $el-children: #{$el-container}__radio-children;
 // ********************************************
 // local
 $border-type: solid 1px;
+$border-type-focus: solid 2px;
 $border-type-mobile: solid 2px;
+$border-type-focus-mobile: solid 3px;
 
 .#{$el-input} {
   position: absolute;
@@ -40,28 +42,13 @@ $border-type-mobile: solid 2px;
   min-width: space(s);
   height: space(s);
   margin-right: space(xs);
-  border: $border-type color(neutral, 500);
+  border: $border-type color(neutral, 400);
   background: color(neutral, 000);
   display: inline-flex;
   justify-content: center;
   align-items: center;
   align-self: flex-start;
   position: relative;
-  cursor: pointer;
-
-  &:after {
-    @include border-radius(50%);
-    transition: duration(base) easing(base);
-    width: space(xs);
-    height: space(xs);
-  }
-  &:hover {
-    @include dsFocus();
-    border: $border-type color(brand-primary, 600);
-  }
-  &:focus {
-    @include dsFocus();
-  }
 }
 
 .#{$el-label} {
@@ -81,60 +68,43 @@ $border-type-mobile: solid 2px;
   width: fit-content;
   padding-bottom: space(s);
   circle.unchecked {
-    fill: color(neutral, 0);
+    fill: color(neutral, 000);
   }
 
   .#{$el-label} {
     &:hover {
       .#{$el-button} {
-        border: $border-type color(brand-primary, 600);
-      }
-      .#{$el-input} {
-        &:checked + .#{$el-button} {
-          @include dsFocus();
-          background-color: color(neutral, 000);
-        }
-      }
-    }
-    &:active {
-      .#{$el-button} {
-        @include dsFocus();
+        border-color: color(brand-primary, 600);
         background-color: color(brand-primary, 200);
       }
       circle.unchecked {
         fill: color(brand-primary, 200);
       }
     }
-    &:focus {
-      .#{$el-button} {
-        background-color: color(brand-primary, 200);
+    .#{$el-button} {
+      &:focus {
+        box-shadow: none;
+      }
+
+      &:focus:not(:active) {
+        border: $border-type-focus color(brand-primary, 700);
       }
-      .#{$el-input} {
-        &:checked + .#{$el-button} {
-          @include dsFocus();
+
+      &:active {
           background-color: color(neutral, 000);
+        circle.unchecked {
+          fill: color(neutral, 000);
         }
       }
-      circle.unchecked {
-        fill: color(brand-primary, 200);
-      }
     }
   }
 
   .#{$el-input} {
     &:checked + .#{$el-button} {
-      border-color: color(brand-primary, 600);
       circle.checked {
         fill: color(brand-primary, 600);
       }
     }
-
-    &:checked + &:hover,
-    &:checked + &:focus {
-      border-color: color(brand-primary, 600);
-      background-color: color(neutral, 000);
-      @include dsFocus();
-    }
   }
 }
 
@@ -142,32 +112,27 @@ $border-type-mobile: solid 2px;
 // Error container & elements             *****
 .#{$el-container-error} {
   .#{$el-button} {
-    border: $border-type color(danger, 900);
-    &:focus {
-      border-color: color(brand-primary, 600);
-    }
+    border-color: color(danger, 900);
   }
 
   .#{$el-label} {
     &:hover {
-      .#{$el-button} {
-        border: $border-type color(danger, 900);
+      .#{$el-button}:not(:focus) {
+        border-color: color(danger, 900);
       }
     }
     &:active {
       .#{$el-button} {
-        background-color: color(danger, 200);
-        box-shadow: unset;
+        border-color: color(danger, 900);;
       }
       circle.unchecked {
-        fill: color(danger, 200);
+        fill: color(neutral, 080);
       }
     }
   }
 
   .#{$el-input} {
     &:checked + .#{$el-button} {
-      border-color: color(danger, 900);
       circle.checked {
         fill: color(danger, 900);
       }
@@ -179,29 +144,37 @@ $border-type-mobile: solid 2px;
 // Disabled container & elements          *****
 .#{$el-container-disabled} {
   circle.checked {
-    fill: color(neutral, 500);
+    fill: color(neutral, 400);
+  }
+  circle.unchecked {
+    fill: color(neutral, 080);
   }
 
   .#{$el-label} {
     cursor: not-allowed;
     &:hover {
       .#{$el-button} {
-        border-color: color(neutral, 500);
+        border-color: color(neutral, 400);
+        background-color: color(neutral, 080);
       }
-      .#{$el-input} {
-        &:checked + .#{$el-button} {
-          background-color: color(neutral, 080);
-        }
+      circle.unchecked {
+        fill: color(neutral, 080);
       }
     }
     &:active {
       .#{$el-button} {
-        background: color(neutral, 080);
+        background-color: color(neutral, 080);
       }
       circle.unchecked {
         fill: color(neutral, 080);
       }
     }
+
+    .#{$el-input} {
+      &:checked + .#{$el-button} {
+        background-color: color(neutral, 080);
+      }
+    }
   }
 
   .#{$el-text} {
@@ -210,27 +183,9 @@ $border-type-mobile: solid 2px;
 
   .#{$el-button} {
     pointer-events: none;
-    border-color: color(neutral, 500);
     background: color(neutral, 080);
-    circle.unchecked {
-      fill: transparent;
-    }
     &:hover {
-      border-color: color(neutral, 500);
-    }
-  }
-
-  .#{$el-input} {
-    background-color: color(neutral, 080);
-    &:checked + .#{$el-button} {
-      border-color: color(neutral, 500);
-      circle.checked {
-        fill: color(neutral, 500);
-      }
-    }
-
-    &:checked + .#{$el-text} {
-      color: color(neutral, 500);
+      border-color: color(neutral, 400);
     }
   }
 }
@@ -238,17 +193,15 @@ $border-type-mobile: solid 2px;
 // ********************************************
 // Read only container & elements         *****
 .#{$el-container-read-only} {
-  .#{$el-button} {
-    border-color: color(neutral, 500);
-    &:focus {
-      border-color: color(brand-primary, 600);
-      @include dsFocus();
+  .#{$el-label} {
+    &:hover {
+      .#{$el-button} {
+        border-color:  color(neutral, 400);
+      }
     }
   }
-
   .#{$el-input} {
     &:checked + .#{$el-button} {
-      border-color: color(neutral, 500);
       circle.checked {
         fill: color(neutral, 500);
       }
@@ -264,11 +217,18 @@ $border-type-mobile: solid 2px;
   .#{$el-container} {
     padding-bottom: calc(#{space(m)} * 0.4);
     -webkit-tap-highlight-color: transparent;
-  }
-  .#{$el-label} {
-    padding: calc(#{space(xxs)} * 0.81) 0;
-  }
 
+    .#{$el-label} {
+      padding: calc(#{space(xxs)} * 0.81) 0;
+      .#{$el-button} {
+        border: $border-type-mobile color(neutral, 400);
+        &:focus {
+          border: $border-type-focus-mobile color(brand-primary, 700);
+        }
+      }
+    }
+  }
+  
   .#{$el-button} {
     width: calc(#{space(s)} * 1.22);
     min-width: calc(#{space(s)} * 1.22);
@@ -278,12 +238,10 @@ $border-type-mobile: solid 2px;
   }
 
   .#{$el-container-error} {
-    .#{$el-button} {
-      border: $border-type-mobile color(danger, 900);
+    .#{$el-label} { // added this specificity so it correctly overwrites the error state
+      .#{$el-button} {
+        border: $border-type-mobile color(danger, 900);
+      }
     }
   }
-
-  .#{$el-button} svg circle {
-    r: 6;
-  }
 }

package/styles/components/packages/ds-page-header/v2/components/PageHeaderEditableTitle/PageHeaderEditableTitle.scss

@@ -13,5 +13,5 @@ $input-container: editable-title-component;
   left: space(xs) * (-1);
   top: 1px;
   margin-left: -1px;
-  margin-right: 1px;
+  margin-right: -9px;
 }

package/styles/components/packages/ds-page-header/v2/components/PageHeaderToolbar/PageHeaderToolbar.scss

@@ -12,7 +12,6 @@ $ph-input-search: #{$prefix}-input-addon-wrapper;
     height: auto;
     background: none;
     & > div {
-      align-items: center;
       .#{$ph-btn} {
         margin-left: space(m) * 0.5;
       }

package/styles/dist-index.scss

@@ -27,7 +27,6 @@
 @import 'packages/ds-progress-indicator/DSProgressIndicator';
 @import 'packages/ds-spinner/DSSpinner';
 @import 'packages/ds-loading-indicator/DSLoadingIndicator';
-@import 'packages/ds-tabs/DSTabs';
 @import 'packages/ds-tooltip/v1/DSTooltip';
 @import 'packages/ds-popover/DSPopover';
 @import 'packages/ds-overlay/DSOverlay';
@@ -48,7 +47,6 @@
 @import 'packages/ds-page-number/DSPageNumber';
 @import 'packages/ds-zipcode-search/DSZipCodeSearch';
 @import 'packages/ds-circular-progress-indicator/DSCircularProgressIndicator';
-@import 'packages/ds-app-picker/DSAppPicker';
 
 @import '~react-dates/lib/css/_datepicker.css';
 

package/styles/themes/theme-default.scss

@@ -18,15 +18,15 @@ 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-700: #006aa9;
 $theme-color-brand-primary-600: #1e79c2;
-$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;
+$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 
+// Brand - Secondary
 $theme-color-brand-secondary-900: null;
 $theme-color-brand-secondary-800: null;
 $theme-color-brand-secondary-700: null;
@@ -40,60 +40,58 @@ $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: #A9B1BE;
-$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: #207E56;
+// Success - Used to communicate status or feedback to the user
+$theme-color-success-900: #207e56;
 $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: #C64252;
+$theme-color-danger-900: #c64252;
 $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.
-$theme-font-family: "proxima-nova", Arial, sans-serif !default;
+$theme-font-family: Roboto !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;

package/styles/themes/theme-demo.scss

@@ -42,7 +42,7 @@ $theme-color-neutral-800: #25292F;
 $theme-color-neutral-700: #353C46;
 $theme-color-neutral-600: #464F5C;
 $theme-color-neutral-500: #697489;
-$theme-color-neutral-400: #A9B1BE;
+$theme-color-neutral-400: #8C93A6;
 $theme-color-neutral-300: #B0B9C8;
 $theme-color-neutral-200: #CBCFD7;
 $theme-color-neutral-100: #E0E3E8;

package/types/form/ComboBox/index.d.ts

@@ -1,4 +1,3 @@
 export * from '@elliemae/ds-form/ComboBox/v1/DSComboBox';
-export * from '@elliemae/ds-form/ComboBox/v2/Combobox';
 export { default } from '@elliemae/ds-form/ComboBox/v2/Combobox';
 export { default as DSComboBox2 } from '@elliemae/ds-form/ComboBox/v2/Combobox';

package/cjs/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "commonjs",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}

package/esm/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "module",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}

package/styles/components/packages/ds-app-picker/DSAppPicker.scss

@@ -1,121 +0,0 @@
-$app-picker: #{$prefix}-app-picker;
-$wrapper: #{$app-picker}__wrapper;
-$grid: #{$app-picker}__grid;
-$row: #{$app-picker}__row;
-$chip: #{$app-picker}__chip;
-$chip-label: #{$app-picker}__chip-label;
-$title: #{$app-picker}__section-title;
-$separator: #{$app-picker}__separator;
-$arrow: #{$app-picker}__arrow;
-
-.#{$wrapper} {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding-bottom: 4px;
-  margin: 0 auto;
-  &:focus {
-    outline: none;
-  }
-}
-
-.#{$arrow} {
-  position: relative;
-  top: -21px;
-  margin: 0;
-  fill: #fff;
-}
-
-.#{$grid} {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  padding: 0 8px;
-}
-
-.#{$row} {
-  display: flex;
-  width: 100%;
-}
-
-.#{$title} {
-  color: color('neutral', 500);
-  font-size: size(m);
-  font-weight: bold;
-  margin: 12px 0 4px;
-}
-
-.#{$chip} {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border-radius: 2%;
-  margin: 4px;
-  padding: 6px;
-  height: 68px;
-  width: 68px;
-  color: color('neutral', 500);
-  cursor: pointer;
-  &:focus,
-  &:hover {
-    @include dsFocus();
-    color: color('neutral', 700);
-    background-color: color('neutral', 000);
-  }
-  &:hover .app-picker__icon {
-    fill: color('brand-primary', 800);
-  }
-  &:active {
-    @include dsActive();
-    box-shadow: none;
-    background-color: #ecf8ff;
-  }
-  &--disabled {
-    color: color('neutral', 500);
-    cursor: not-allowed;
-    &:focus,
-    &:active,
-    &:hover {
-      background-color: #fcfcfc;
-      color: color('neutral', 500);
-      border: 1px solid color('neutral', 500);
-      outline: none;
-      outline-offset: none;
-      box-shadow: none;
-    }
-    &:hover .app-picker__icon {
-      fill: color('neutral', 500);
-    }
-  }
-  &--disabled .app-picker__icon {
-    fill: color('neutral', 500);
-  }
-}
-
-.app-picker__icon {
-  fill: color('brand-primary', 600);
-}
-
-#app-picker__button {
-  &:hover {
-    background-color: transparent;
-  }
-}
-
-.#{$chip-label} {
-  font-size: 12px;
-  font-weight: 600;
-  margin: 5px;
-}
-
-.#{$separator} {
-  border-top: 1px solid color('neutral', 100);
-  border-bottom: none;
-  width: 99%;
-  margin: 0;
-}