@elliemae/ds-basic 2.1.0-rc.7 → 2.2.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/css/dimsum.css +646 -651
  2. package/css/dimsum.min.css +1 -1
  3. package/css/dimsum.min.css.map +1 -1
  4. package/package.json +44 -44
  5. package/styles/base/fonts/font-base.scss +1 -7
  6. package/styles/components/packages/ds-basic/styles/base/fonts/font-base.scss +1 -7
  7. package/styles/components/packages/ds-basic/styles/themes/theme-default.scss +28 -30
  8. package/styles/components/packages/ds-button/DSButton.scss +7 -7
  9. package/styles/components/packages/ds-date-picker/components/DatePickerPicker/DatePickerPicker.scss +1 -1
  10. package/styles/themes/theme-default.scss +28 -30
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-basic",
3
- "version": "2.1.0-rc.7",
3
+ "version": "2.2.0-alpha.1",
4
4
  "license": "MIT",
5
5
  "description": "EllieMae UI Design System Library",
6
6
  "module": "./esm/index.js",
@@ -296,49 +296,49 @@
296
296
  "dev": "node ../../scripts/build/build.js -w"
297
297
  },
298
298
  "dependencies": {
299
- "@elliemae/ds-accordion": "2.1.0-rc.7",
300
- "@elliemae/ds-app-picker": "2.1.0-rc.7",
301
- "@elliemae/ds-backdrop": "2.1.0-rc.7",
302
- "@elliemae/ds-breadcrumb": "2.1.0-rc.7",
303
- "@elliemae/ds-button": "2.1.0-rc.7",
304
- "@elliemae/ds-button-group": "2.1.0-rc.7",
305
- "@elliemae/ds-card": "2.1.0-rc.7",
306
- "@elliemae/ds-circular-progress-indicator": "2.1.0-rc.7",
307
- "@elliemae/ds-form": "2.1.0-rc.7",
308
- "@elliemae/ds-grid": "2.1.0-rc.7",
309
- "@elliemae/ds-group-box": "2.1.0-rc.7",
310
- "@elliemae/ds-header": "2.1.0-rc.7",
311
- "@elliemae/ds-hidden": "2.1.0-rc.7",
312
- "@elliemae/ds-icon": "2.1.0-rc.7",
313
- "@elliemae/ds-indeterminate-progress-indicator": "2.1.0-rc.7",
314
- "@elliemae/ds-label-value": "2.1.0-rc.7",
315
- "@elliemae/ds-list-section-header": "2.1.0-rc.7",
316
- "@elliemae/ds-loading-indicator": "2.1.0-rc.7",
317
- "@elliemae/ds-menu": "2.1.0-rc.7",
318
- "@elliemae/ds-overlay": "2.1.0-rc.7",
319
- "@elliemae/ds-page-header": "2.1.0-rc.7",
320
- "@elliemae/ds-page-number": "2.1.0-rc.7",
321
- "@elliemae/ds-pills": "2.1.0-rc.7",
322
- "@elliemae/ds-popover": "2.1.0-rc.7",
323
- "@elliemae/ds-popper": "2.1.0-rc.7",
324
- "@elliemae/ds-portal": "2.1.0-rc.7",
325
- "@elliemae/ds-progress-indicator": "2.1.0-rc.7",
326
- "@elliemae/ds-read-more": "2.1.0-rc.7",
327
- "@elliemae/ds-resizeable-container": "2.1.0-rc.7",
328
- "@elliemae/ds-separator": "2.1.0-rc.7",
329
- "@elliemae/ds-side-panel": "2.1.0-rc.7",
330
- "@elliemae/ds-slider": "2.1.0-rc.7",
331
- "@elliemae/ds-spinner": "2.1.0-rc.7",
332
- "@elliemae/ds-tabs": "2.1.0-rc.7",
333
- "@elliemae/ds-text-wrapper": "2.1.0-rc.7",
334
- "@elliemae/ds-time-picker": "2.1.0-rc.7",
335
- "@elliemae/ds-toast": "2.1.0-rc.7",
336
- "@elliemae/ds-toolbar": "2.1.0-rc.7",
337
- "@elliemae/ds-tooltip": "2.1.0-rc.7",
338
- "@elliemae/ds-truncated-expandable-text": "2.1.0-rc.7",
339
- "@elliemae/ds-truncated-tooltip-text": "2.1.0-rc.7",
340
- "@elliemae/ds-zipcode-search": "2.1.0-rc.7",
341
- "@elliemae/ds-zoom": "2.1.0-rc.7"
299
+ "@elliemae/ds-accordion": "2.2.0-alpha.1",
300
+ "@elliemae/ds-app-picker": "2.2.0-alpha.1",
301
+ "@elliemae/ds-backdrop": "2.2.0-alpha.1",
302
+ "@elliemae/ds-breadcrumb": "2.2.0-alpha.1",
303
+ "@elliemae/ds-button": "2.2.0-alpha.1",
304
+ "@elliemae/ds-button-group": "2.2.0-alpha.1",
305
+ "@elliemae/ds-card": "2.2.0-alpha.1",
306
+ "@elliemae/ds-circular-progress-indicator": "2.2.0-alpha.1",
307
+ "@elliemae/ds-form": "2.2.0-alpha.1",
308
+ "@elliemae/ds-grid": "2.2.0-alpha.1",
309
+ "@elliemae/ds-group-box": "2.2.0-alpha.1",
310
+ "@elliemae/ds-header": "2.2.0-alpha.1",
311
+ "@elliemae/ds-hidden": "2.2.0-alpha.1",
312
+ "@elliemae/ds-icon": "2.2.0-alpha.1",
313
+ "@elliemae/ds-indeterminate-progress-indicator": "2.2.0-alpha.1",
314
+ "@elliemae/ds-label-value": "2.2.0-alpha.1",
315
+ "@elliemae/ds-list-section-header": "2.2.0-alpha.1",
316
+ "@elliemae/ds-loading-indicator": "2.2.0-alpha.1",
317
+ "@elliemae/ds-menu": "2.2.0-alpha.1",
318
+ "@elliemae/ds-overlay": "2.2.0-alpha.1",
319
+ "@elliemae/ds-page-header": "2.2.0-alpha.1",
320
+ "@elliemae/ds-page-number": "2.2.0-alpha.1",
321
+ "@elliemae/ds-pills": "2.2.0-alpha.1",
322
+ "@elliemae/ds-popover": "2.2.0-alpha.1",
323
+ "@elliemae/ds-popper": "2.2.0-alpha.1",
324
+ "@elliemae/ds-portal": "2.2.0-alpha.1",
325
+ "@elliemae/ds-progress-indicator": "2.2.0-alpha.1",
326
+ "@elliemae/ds-read-more": "2.2.0-alpha.1",
327
+ "@elliemae/ds-resizeable-container": "2.2.0-alpha.1",
328
+ "@elliemae/ds-separator": "2.2.0-alpha.1",
329
+ "@elliemae/ds-side-panel": "2.2.0-alpha.1",
330
+ "@elliemae/ds-slider": "2.2.0-alpha.1",
331
+ "@elliemae/ds-spinner": "2.2.0-alpha.1",
332
+ "@elliemae/ds-tabs": "2.2.0-alpha.1",
333
+ "@elliemae/ds-text-wrapper": "2.2.0-alpha.1",
334
+ "@elliemae/ds-time-picker": "2.2.0-alpha.1",
335
+ "@elliemae/ds-toast": "2.2.0-alpha.1",
336
+ "@elliemae/ds-toolbar": "2.2.0-alpha.1",
337
+ "@elliemae/ds-tooltip": "2.2.0-alpha.1",
338
+ "@elliemae/ds-truncated-expandable-text": "2.2.0-alpha.1",
339
+ "@elliemae/ds-truncated-tooltip-text": "2.2.0-alpha.1",
340
+ "@elliemae/ds-zipcode-search": "2.2.0-alpha.1",
341
+ "@elliemae/ds-zoom": "2.2.0-alpha.1"
342
342
  },
343
343
  "devDependencies": {
344
344
  "gulp": "~4.0.2",
package/styles/base/fonts/font-base.scss CHANGED
@@ -1,9 +1,3 @@
1
1
  // Note: The URLs here don't match with filesystem due to a defect in node-sass and webpack sass loader.
2
2
 
3
- @font-face {
4
- font-family: 'proxima-nova';
5
- src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaRegular.woff2') format('woff2'),
6
- url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaRegular.woff') format('woff');
7
- font-weight: normal;
8
- font-style: normal;
9
- }
3
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
package/styles/components/packages/ds-basic/styles/base/fonts/font-base.scss CHANGED
@@ -1,9 +1,3 @@
1
1
  // Note: The URLs here don't match with filesystem due to a defect in node-sass and webpack sass loader.
2
2
 
3
- @font-face {
4
- font-family: 'proxima-nova';
5
- src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaRegular.woff2') format('woff2'),
6
- url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaRegular.woff') format('woff');
7
- font-weight: normal;
8
- font-style: normal;
9
- }
3
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
package/styles/components/packages/ds-basic/styles/themes/theme-default.scss CHANGED
@@ -18,15 +18,15 @@ Change these color values below to your brand colors.
18
18
  // Brand - Primary
19
19
  $theme-color-brand-primary-900: null;
20
20
  $theme-color-brand-primary-800: #005181;
21
- $theme-color-brand-primary-700: #006AA9;
21
+ $theme-color-brand-primary-700: #006aa9;
22
22
  $theme-color-brand-primary-600: #1e79c2;
23
- $theme-color-brand-primary-500: #1394E5;
24
- $theme-color-brand-primary-400: #52A6EC;
25
- $theme-color-brand-primary-300: #A3D6FF;
26
- $theme-color-brand-primary-200: #EBF6FF;
27
- $theme-color-brand-primary-100: #F6FBFF;
23
+ $theme-color-brand-primary-500: #1394e5;
24
+ $theme-color-brand-primary-400: #52a6ec;
25
+ $theme-color-brand-primary-300: #a3d6ff;
26
+ $theme-color-brand-primary-200: #ebf6ff;
27
+ $theme-color-brand-primary-100: #f6fbff;
28
28
 
29
- // Brand - Secondary
29
+ // Brand - Secondary
30
30
  $theme-color-brand-secondary-900: null;
31
31
  $theme-color-brand-secondary-800: null;
32
32
  $theme-color-brand-secondary-700: null;
@@ -40,60 +40,58 @@ $theme-color-brand-secondary-100: null;
40
40
  //Neutral - Used for text, borders, shadows, background, etc
41
41
  $theme-color-neutral-1000: #000000;
42
42
  $theme-color-neutral-900: #333333;
43
- $theme-color-neutral-800: #25292F;
44
- $theme-color-neutral-700: #353C46;
45
- $theme-color-neutral-600: #464F5C;
43
+ $theme-color-neutral-800: #25292f;
44
+ $theme-color-neutral-700: #353c46;
45
+ $theme-color-neutral-600: #464f5c;
46
46
  $theme-color-neutral-500: #697489;
47
- $theme-color-neutral-400: #8C93A6;
48
- $theme-color-neutral-300: #B0B9C8;
49
- $theme-color-neutral-200: #CBCFD7;
50
- $theme-color-neutral-100: #E0E3E8;
51
- $theme-color-neutral-080: #EBEDF0;
52
- $theme-color-neutral-050: #F6F7F9;
53
- $theme-color-neutral-000: #FFFFFF;
47
+ $theme-color-neutral-400: #8c93a6;
48
+ $theme-color-neutral-300: #b0b9c8;
49
+ $theme-color-neutral-200: #cbcfd7;
50
+ $theme-color-neutral-100: #e0e3e8;
51
+ $theme-color-neutral-080: #ebedf0;
52
+ $theme-color-neutral-050: #f6f7f9;
53
+ $theme-color-neutral-000: #ffffff;
54
54
 
55
- // Success - Used to communicate status or feedback to the user
56
- $theme-color-success-900: #207E56;
55
+ // Success - Used to communicate status or feedback to the user
56
+ $theme-color-success-900: #207e56;
57
57
  $theme-color-success-800: null;
58
58
  $theme-color-success-700: null;
59
59
  $theme-color-success-600: null;
60
60
  $theme-color-success-500: null;
61
61
  $theme-color-success-400: null;
62
- $theme-color-success-300: #D4F0E5;
62
+ $theme-color-success-300: #d4f0e5;
63
63
  $theme-color-success-200: null;
64
64
  $theme-color-success-100: null;
65
65
  // Danger - Used to communicate status or feedback to the user
66
- $theme-color-danger-900: #C64252;
66
+ $theme-color-danger-900: #c64252;
67
67
  $theme-color-danger-800: null;
68
68
  $theme-color-danger-700: null;
69
69
  $theme-color-danger-600: null;
70
70
  $theme-color-danger-500: null;
71
71
  $theme-color-danger-400: null;
72
72
  $theme-color-danger-300: null;
73
- $theme-color-danger-200: #F7CDD2;
73
+ $theme-color-danger-200: #f7cdd2;
74
74
  $theme-color-danger-100: null;
75
75
  // Warning - Used to communicate status or feedback to the user
76
- $theme-color-warning-900: #D17A00;
76
+ $theme-color-warning-900: #d17a00;
77
77
  $theme-color-warning-800: null;
78
- $theme-color-warning-700: #FF9400;
79
- $theme-color-warning-600: #FBB431;
80
- $theme-color-warning-500: #FBB431;
81
- $theme-color-warning-400: #FBDE31;
78
+ $theme-color-warning-700: #ff9400;
79
+ $theme-color-warning-600: #fbb431;
80
+ $theme-color-warning-500: #fbb431;
81
+ $theme-color-warning-400: #fbde31;
82
82
  $theme-color-warning-300: null;
83
83
  $theme-color-warning-200: null;
84
84
  $theme-color-warning-100: null;
85
85
 
86
-
87
86
  // **TYPOGRAPHY**
88
87
  // Typeface
89
88
  // Change the typeface.
90
- $theme-font-family: "proxima-nova", Arial, sans-serif !default;
89
+ $theme-font-family: Roboto !default;
91
90
 
92
91
  // Type Scale
93
92
  // Change the font-sizes of HTML typed tags below.
94
93
  $theme-base-font-size: 13px;
95
94
 
96
-
97
95
  // **BORDER RADIUS**
98
96
  // How round would you like your containers to be?
99
97
  $theme-base-border-radius: 2px;
package/styles/components/packages/ds-button/DSButton.scss CHANGED
@@ -52,7 +52,7 @@ $text-disabled: #5c6574;
52
52
  position: relative;
53
53
 
54
54
  &:after {
55
- content: "";
55
+ content: '';
56
56
  position: absolute;
57
57
  top: 0;
58
58
  left: 0;
@@ -288,7 +288,7 @@ div.#{$btn-el} {
288
288
 
289
289
  // ********************************************
290
290
  // Secondary
291
- .#{$btn-el-secondary}{
291
+ .#{$btn-el-secondary} {
292
292
  color: color(brand-primary, 600);
293
293
  background-color: color(neutral, 000);
294
294
  border: $border-type color(neutral, 400);
@@ -393,10 +393,10 @@ div.#{$btn-el} {
393
393
  }
394
394
 
395
395
  $intent-colors: (
396
- "success": color("success", 900),
397
- "danger": color("danger", 900),
398
- "warning": color("warning", 900),
399
- "info": color("brand-primary", 600),
396
+ 'success': color('success', 900),
397
+ 'danger': color('danger', 900),
398
+ 'warning': color('warning', 900),
399
+ 'info': color('brand-primary', 600),
400
400
  );
401
401
 
402
402
  @each $intent, $color in $intent-colors {
@@ -425,7 +425,7 @@ $intent-colors: (
425
425
  &:hover:not([disabled]),
426
426
  &.#{$btn-el-vhover} {
427
427
  color: $color;
428
-
428
+
429
429
  span.label-wrapper.no-icon {
430
430
  &:before {
431
431
  background-color: transparent;
package/styles/components/packages/ds-date-picker/components/DatePickerPicker/DatePickerPicker.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  @include border-radius(0 $radius $radius 0);
3
3
  padding: 0 calc(#{space(xxs)} * 0.5);
4
4
 
5
- &:hover:not([disabled]) {
5
+ &:hover:not([disabled]) {
6
6
  border: $border-type color(brand-primary, 600);
7
7
  }
8
8
 
package/styles/themes/theme-default.scss CHANGED
@@ -18,15 +18,15 @@ Change these color values below to your brand colors.
18
18
  // Brand - Primary
19
19
  $theme-color-brand-primary-900: null;
20
20
  $theme-color-brand-primary-800: #005181;
21
- $theme-color-brand-primary-700: #006AA9;
21
+ $theme-color-brand-primary-700: #006aa9;
22
22
  $theme-color-brand-primary-600: #1e79c2;
23
- $theme-color-brand-primary-500: #1394E5;
24
- $theme-color-brand-primary-400: #52A6EC;
25
- $theme-color-brand-primary-300: #A3D6FF;
26
- $theme-color-brand-primary-200: #EBF6FF;
27
- $theme-color-brand-primary-100: #F6FBFF;
23
+ $theme-color-brand-primary-500: #1394e5;
24
+ $theme-color-brand-primary-400: #52a6ec;
25
+ $theme-color-brand-primary-300: #a3d6ff;
26
+ $theme-color-brand-primary-200: #ebf6ff;
27
+ $theme-color-brand-primary-100: #f6fbff;
28
28
 
29
- // Brand - Secondary
29
+ // Brand - Secondary
30
30
  $theme-color-brand-secondary-900: null;
31
31
  $theme-color-brand-secondary-800: null;
32
32
  $theme-color-brand-secondary-700: null;
@@ -40,60 +40,58 @@ $theme-color-brand-secondary-100: null;
40
40
  //Neutral - Used for text, borders, shadows, background, etc
41
41
  $theme-color-neutral-1000: #000000;
42
42
  $theme-color-neutral-900: #333333;
43
- $theme-color-neutral-800: #25292F;
44
- $theme-color-neutral-700: #353C46;
45
- $theme-color-neutral-600: #464F5C;
43
+ $theme-color-neutral-800: #25292f;
44
+ $theme-color-neutral-700: #353c46;
45
+ $theme-color-neutral-600: #464f5c;
46
46
  $theme-color-neutral-500: #697489;
47
- $theme-color-neutral-400: #8C93A6;
48
- $theme-color-neutral-300: #B0B9C8;
49
- $theme-color-neutral-200: #CBCFD7;
50
- $theme-color-neutral-100: #E0E3E8;
51
- $theme-color-neutral-080: #EBEDF0;
52
- $theme-color-neutral-050: #F6F7F9;
53
- $theme-color-neutral-000: #FFFFFF;
47
+ $theme-color-neutral-400: #8c93a6;
48
+ $theme-color-neutral-300: #b0b9c8;
49
+ $theme-color-neutral-200: #cbcfd7;
50
+ $theme-color-neutral-100: #e0e3e8;
51
+ $theme-color-neutral-080: #ebedf0;
52
+ $theme-color-neutral-050: #f6f7f9;
53
+ $theme-color-neutral-000: #ffffff;
54
54
 
55
- // Success - Used to communicate status or feedback to the user
56
- $theme-color-success-900: #207E56;
55
+ // Success - Used to communicate status or feedback to the user
56
+ $theme-color-success-900: #207e56;
57
57
  $theme-color-success-800: null;
58
58
  $theme-color-success-700: null;
59
59
  $theme-color-success-600: null;
60
60
  $theme-color-success-500: null;
61
61
  $theme-color-success-400: null;
62
- $theme-color-success-300: #D4F0E5;
62
+ $theme-color-success-300: #d4f0e5;
63
63
  $theme-color-success-200: null;
64
64
  $theme-color-success-100: null;
65
65
  // Danger - Used to communicate status or feedback to the user
66
- $theme-color-danger-900: #C64252;
66
+ $theme-color-danger-900: #c64252;
67
67
  $theme-color-danger-800: null;
68
68
  $theme-color-danger-700: null;
69
69
  $theme-color-danger-600: null;
70
70
  $theme-color-danger-500: null;
71
71
  $theme-color-danger-400: null;
72
72
  $theme-color-danger-300: null;
73
- $theme-color-danger-200: #F7CDD2;
73
+ $theme-color-danger-200: #f7cdd2;
74
74
  $theme-color-danger-100: null;
75
75
  // Warning - Used to communicate status or feedback to the user
76
- $theme-color-warning-900: #D17A00;
76
+ $theme-color-warning-900: #d17a00;
77
77
  $theme-color-warning-800: null;
78
- $theme-color-warning-700: #FF9400;
79
- $theme-color-warning-600: #FBB431;
80
- $theme-color-warning-500: #FBB431;
81
- $theme-color-warning-400: #FBDE31;
78
+ $theme-color-warning-700: #ff9400;
79
+ $theme-color-warning-600: #fbb431;
80
+ $theme-color-warning-500: #fbb431;
81
+ $theme-color-warning-400: #fbde31;
82
82
  $theme-color-warning-300: null;
83
83
  $theme-color-warning-200: null;
84
84
  $theme-color-warning-100: null;
85
85
 
86
-
87
86
  // **TYPOGRAPHY**
88
87
  // Typeface
89
88
  // Change the typeface.
90
- $theme-font-family: "proxima-nova", Arial, sans-serif !default;
89
+ $theme-font-family: Roboto !default;
91
90
 
92
91
  // Type Scale
93
92
  // Change the font-sizes of HTML typed tags below.
94
93
  $theme-base-font-size: 13px;
95
94
 
96
-
97
95
  // **BORDER RADIUS**
98
96
  // How round would you like your containers to be?
99
97
  $theme-base-border-radius: 2px;