@elliemae/ds-basic 2.0.0-alpha.0 → 2.0.0-alpha.12

package/styles/themes/theme-default.scss

@@ -44,7 +44,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/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;
-}

package/styles/components/packages/ds-tabs/DSTabs.scss

@@ -1,272 +0,0 @@
-// ********************************************
-// container definition
-$tabs-container: #{$prefix}-tabs;
-$tab-bar-container: #{$tabs-container}-tab-bar;
-$panels-container: #{$tabs-container}-panels;
-
-// ********************************************
-// element definition
-$tab-el: #{$tab-bar-container}__tab;
-$tab-list-el: #{$tabs-container}__list;
-$subtab-list-el: #{$tabs-container}__subtabs-list;
-$tab-separator-el: #{$tabs-container}__tab-separator;
-
-.#{$tabs-container} {
-  &__tab-bar-container {
-    display: flex;
-  }
-}
-
-.#{$tab-bar-container} {
-  &__list {
-    position: relative;
-    border-bottom: border-size() solid color(neutral, 400);
-    display: flex;
-    flex-wrap: nowrap;
-    flex: 1;
-
-    &:not(&--carousel) {
-      padding-left: 16px;
-    }
-  }
-
-  &__list--carousel {
-    max-width: 100%;
-  }
-
-  &__subtabs-list {
-    position: relative;
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    flex: 1;
-
-    .#{$tab-el} {
-      text-transform: capitalize;
-      padding-bottom: 0;
-      padding-top: 0;
-    }
-
-    &--carousel {
-      max-width: 100%;
-    }
-
-    &:not(&--carousel) {
-      padding-left: 16px;
-    }
-  }
-
-  &__tab {
-    position: relative;
-    @include button-link();
-    @include transition(duration(fast) easing(out));
-    text-transform: uppercase;
-    white-space: nowrap;
-    padding: 2px 0;
-    margin-right: space(s);
-    letter-spacing: 0px;
-    line-height: 1.3;
-    color: color(neutral, 700);
-
-    @include onlySafariAndFirefox {
-      -webkit-text-stroke: 0.4px transparent;
-    }
-
-    &:not(:first-child) {
-      margin-left: space(s);
-    }
-
-    &--active {
-      &:not(&--disabled) {
-        @include body-text-style("semibold");
-        color: color(neutral, 700);
-        line-height: 1.3;
-
-        @include safariAndFirefoxBold(color(neutral, 700))
-      }
-    }
-
-    &:not(&--disabled) {
-      &:hover,
-      &:focus {
-        outline: none;
-        color: color(brand-primary, 600);
-
-        @include safariAndFirefoxBold(color(brand-primary, 600))
-      }
-    }
-
-    &--disabled {
-      color: color(neutral, 500);
-      cursor: default;
-
-      &:focus {
-        outline: none;
-      }
-    }
-
-    &--separator:not(:last-child):after {
-      content: "";
-      position: absolute;
-      width: border-size(m);
-      right: -18px;
-      top: 1.4px;
-      height: space(xs) * 1.6;
-      background-color: color(neutral, 400);
-    }
-  }
-
-  &__selection-indicator {
-    position: absolute;
-    margin-top: space(xxs);
-    border-bottom: border-size(xl) solid color(brand-primary, 600);
-    pointer-events: none;
-    @include transition(duration(base) easing(in));
-  }
-}
-
-.#{$panels-container} {
-  &__panel {
-    &:focus {
-      outline: none;
-    }
-    padding-top: space(xs);
-  }
-}
-
-// ********************************************
-// Mobile
-@include md {
-  .#{$tab-bar-container} {
-    &__list {
-      background: color(brand-primary, 200);
-      border-bottom: border-size() solid color(brand-primary, 300);
-
-      &--flexible-table-headers {
-        z-index: 0;
-        overflow-x: scroll;
-        overflow-y: hidden;
-        -ms-overflow-style: none;
-        scrollbar-width: none;
-        &::-webkit-scrollbar {
-          display: none;
-        }
-      }
-
-      &--left-gradients {
-        &::before {
-          position: fixed;
-          left: 0px;
-          content: "";
-          height: 38px;
-          width: 24px;
-          background: linear-gradient(90deg, #ebf6ff 0%, rgba(238, 238, 238, 0) 100%);
-          z-index: 100;
-          // allow clicks to pass through
-          pointer-events: none;
-        }
-      }
-      &--right-gradients {
-        &::after {
-          position: fixed;
-          right: 0px;
-          content: "";
-          height: 38px;
-          width: 24px;
-          background: linear-gradient(90deg, rgba(238, 238, 238, 0) 0%, #ebf6ff 100%);
-          z-index: 100;
-          // allow clicks to pass through
-          pointer-events: none;
-        }
-      }
-
-      &--fixed-table-headers {
-        display: flex;
-        overflow-x: hidden;
-        & .em-ds-tabs-tab-bar__tab {
-          flex: 1;
-          overflow: hidden;
-        }
-      }
-
-      &:not(&--carousel) {
-        padding-left: 14px;
-      }
-    }
-
-    &__tab {
-      height: #{toMobile(space(xl) * 0.83)};
-      color: color(brand-primary, 600);
-      font-weight: font-weight(regular);
-      padding: 0;
-      margin-right: 14px;
-      font-size: 13px;
-      line-height: 1.3;
-
-      @include onlySafariAndFirefox {
-        -webkit-text-stroke: 0.4px transparent;
-      }
-
-      &:not(:first-child) {
-        margin-left: 14px;
-      }
-
-      &:focus,
-      &--active {
-        font-weight: font-weight(regular);
-        font-size: 13px;
-        
-        @include safariAndFirefoxBold(color(brand-primary, 700))
-      }
-
-      &--active {
-        &:not(&--disabled) {
-          font-size: 13px;
-          color: color(brand-primary, 700);
-          line-height: 1.3;
-          font-weight: font-weight(regular);
-          -webkit-font-smoothing: subpixel-antialiased; 
-          -webkit-text-stroke: 0.4px color(brand-primary, 700);
-          
-        }
-      }
-
-      &:focus:not(&--disabled) {
-        color: color(brand-primary, 700);
-        font-size: 13px;
-
-        @include safariAndFirefoxBold(color(brand-primary, 700))
-      }
-
-      &:not(&--disabled) {
-        &:hover,
-        &:focus {
-          outline: none;
-          color: color(brand-primary, 700);
-          
-          @include safariAndFirefoxBold(color(brand-primary, 700))
-        }
-      }
-
-      &--separator:not(:last-child):after {
-        top: 50%;
-        transform: translateY(-50%);
-      }
-    }
-
-    // &__tab-separator {
-    // }
-
-    &__selection-indicator {
-      margin-left: 0rem;
-      margin-top: space(xxs) * 0.5;
-      border-bottom-width: 3px;
-    }
-  }
-
-  .#{$panels-container} {
-    &__panel {
-      padding-top: 0;
-    }
-  }
-}