@elliemae/ds-basic 2.2.0-alpha.1 → 3.0.0-next.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 (11) hide show
  1. package/css/dimsum.css +695 -672
  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 +7 -1
  6. package/styles/components/packages/ds-basic/styles/base/fonts/font-base.scss +7 -1
  7. package/styles/components/packages/ds-basic/styles/themes/theme-default.scss +30 -28
  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/components/packages/ds-treeview/Tree.scss +55 -43
  11. package/styles/themes/theme-default.scss +30 -28
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-basic",
3
- "version": "2.2.0-alpha.1",
3
+ "version": "3.0.0-next.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.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"
299
+ "@elliemae/ds-accordion": "3.0.0-next.1",
300
+ "@elliemae/ds-app-picker": "3.0.0-next.1",
301
+ "@elliemae/ds-backdrop": "3.0.0-next.1",
302
+ "@elliemae/ds-breadcrumb": "3.0.0-next.1",
303
+ "@elliemae/ds-button": "3.0.0-next.1",
304
+ "@elliemae/ds-button-group": "3.0.0-next.1",
305
+ "@elliemae/ds-card": "3.0.0-next.1",
306
+ "@elliemae/ds-circular-progress-indicator": "3.0.0-next.1",
307
+ "@elliemae/ds-form": "3.0.0-next.1",
308
+ "@elliemae/ds-grid": "3.0.0-next.1",
309
+ "@elliemae/ds-group-box": "3.0.0-next.1",
310
+ "@elliemae/ds-header": "3.0.0-next.1",
311
+ "@elliemae/ds-hidden": "3.0.0-next.1",
312
+ "@elliemae/ds-icon": "3.0.0-next.1",
313
+ "@elliemae/ds-indeterminate-progress-indicator": "3.0.0-next.1",
314
+ "@elliemae/ds-label-value": "3.0.0-next.1",
315
+ "@elliemae/ds-list-section-header": "3.0.0-next.1",
316
+ "@elliemae/ds-loading-indicator": "3.0.0-next.1",
317
+ "@elliemae/ds-menu": "3.0.0-next.1",
318
+ "@elliemae/ds-overlay": "3.0.0-next.1",
319
+ "@elliemae/ds-page-header": "3.0.0-next.1",
320
+ "@elliemae/ds-page-number": "3.0.0-next.1",
321
+ "@elliemae/ds-pills": "3.0.0-next.1",
322
+ "@elliemae/ds-popover": "3.0.0-next.1",
323
+ "@elliemae/ds-popper": "3.0.0-next.1",
324
+ "@elliemae/ds-portal": "3.0.0-next.1",
325
+ "@elliemae/ds-progress-indicator": "3.0.0-next.1",
326
+ "@elliemae/ds-read-more": "3.0.0-next.1",
327
+ "@elliemae/ds-resizeable-container": "3.0.0-next.1",
328
+ "@elliemae/ds-separator": "3.0.0-next.1",
329
+ "@elliemae/ds-side-panel": "3.0.0-next.1",
330
+ "@elliemae/ds-slider": "3.0.0-next.1",
331
+ "@elliemae/ds-spinner": "3.0.0-next.1",
332
+ "@elliemae/ds-tabs": "3.0.0-next.1",
333
+ "@elliemae/ds-text-wrapper": "3.0.0-next.1",
334
+ "@elliemae/ds-time-picker": "3.0.0-next.1",
335
+ "@elliemae/ds-toast": "3.0.0-next.1",
336
+ "@elliemae/ds-toolbar": "3.0.0-next.1",
337
+ "@elliemae/ds-tooltip": "3.0.0-next.1",
338
+ "@elliemae/ds-truncated-expandable-text": "3.0.0-next.1",
339
+ "@elliemae/ds-truncated-tooltip-text": "3.0.0-next.1",
340
+ "@elliemae/ds-zipcode-search": "3.0.0-next.1",
341
+ "@elliemae/ds-zoom": "3.0.0-next.1"
342
342
  },
343
343
  "devDependencies": {
344
344
  "gulp": "~4.0.2",
package/styles/base/fonts/font-base.scss CHANGED
@@ -1,3 +1,9 @@
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
- @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');
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
+ }
package/styles/components/packages/ds-basic/styles/base/fonts/font-base.scss CHANGED
@@ -1,3 +1,9 @@
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
- @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');
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
+ }
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,58 +40,60 @@ $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
+
86
87
  // **TYPOGRAPHY**
87
88
  // Typeface
88
89
  // Change the typeface.
89
- $theme-font-family: Roboto !default;
90
+ $theme-font-family: "proxima-nova", Arial, sans-serif !default;
90
91
 
91
92
  // Type Scale
92
93
  // Change the font-sizes of HTML typed tags below.
93
94
  $theme-base-font-size: 13px;
94
95
 
96
+
95
97
  // **BORDER RADIUS**
96
98
  // How round would you like your containers to be?
97
99
  $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/components/packages/ds-treeview/Tree.scss CHANGED
@@ -47,39 +47,26 @@ body > .#{$tree-item} {
47
47
  &-children-count-displayer {
48
48
  color: color(neutral, 500);
49
49
  }
50
- &--valid {
51
- &-drop-before {
52
- border-top-width: 2px;
53
- border-top-style: solid;
54
- border-top-color: color(brand-primary, 600);
55
- }
56
- &-drop-in {
57
- border-width: 2px;
58
- border-style: solid;
59
- border-color: color(brand-primary, 600);
60
- }
61
- &-drop-after {
62
- border-bottom-width: 2px;
63
- border-bottom-style: solid;
64
- border-bottom-color: color(brand-primary, 600);
65
- }
66
- }
67
- &--invalid {
68
- &-drop-before {
69
- border-top-width: 2px;
70
- border-top-style: solid;
71
- border-top-color: color(danger, 900);
72
- }
73
- &-drop-in {
74
- border-width: 2px;
75
- border-style: solid;
76
- border-color: color(danger, 900);
77
- }
78
- &-drop-after {
79
- border-bottom-width: 2px;
80
- border-bottom-style: solid;
81
- border-bottom-color: color(danger, 900);
82
- }
50
+ &--valid-drop-in:after {
51
+ content: '';
52
+ display: block;
53
+ position: absolute;
54
+ top: 0;
55
+ left: 0;
56
+ right: 0;
57
+ bottom: 0;
58
+ border: 2px solid color(brand-primary, 600);
59
+ }
60
+
61
+ &--invalid-drop-in:after {
62
+ content: '';
63
+ display: block;
64
+ position: absolute;
65
+ top: 0;
66
+ left: 0;
67
+ right: 0;
68
+ bottom: 0;
69
+ border: 2px solid color(danger, 900);
83
70
  }
84
71
 
85
72
  .#{$tree-item}__value {
@@ -107,20 +94,49 @@ body > .#{$tree-item} {
107
94
  }
108
95
 
109
96
  &.selected {
97
+ &:before {
98
+ content: '';
99
+ position: absolute;
100
+ top: 0;
101
+ left: 0;
102
+ width: 100%;
103
+ height: 100%;
104
+ border: 1px solid color(brand-primary, 500);
105
+ pointer-events: none;
106
+ }
110
107
  background-color: color(brand-primary, 200);
111
108
  }
112
109
 
110
+ &.drag-overlay {
111
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
112
+ border-radius: 2px;
113
+ }
114
+
113
115
  .drag-handle {
116
+ position: relative;
114
117
  transition: duration(fast) easing(base);
115
118
  align-items: center;
116
119
  display: flex;
117
- // height: 100%;
118
- // width: space(s) * 1.3;
120
+ height: 24px;
119
121
  visibility: visible;
120
122
  opacity: 1;
121
123
  margin-left: 8px;
122
-
123
- @include icon-color(color(neutral, 500));
124
+ outline: none;
125
+ cursor: grab;
126
+ &[data-isactive='true'],
127
+ &[data-isdragoverlay='true'] {
128
+ cursor: grabbing;
129
+ }
130
+ &.focuseable:focus:after {
131
+ content: '';
132
+ position: absolute;
133
+ top: 0;
134
+ left: 0;
135
+ width: 100%;
136
+ height: 100%;
137
+ border: 2px solid color(brand-primary, 700);
138
+ pointer-events: none;
139
+ }
124
140
  }
125
141
  .expandable-arrow {
126
142
  margin-left: 8px;
@@ -162,10 +178,6 @@ body > .#{$tree-item} {
162
178
  }
163
179
 
164
180
  &.hover {
165
- .drag-handle {
166
- @include icon-color(color(brand-primary, 800));
167
- }
168
-
169
181
  //Update from mixins when the correct states story comes
170
182
  background-color: color(neutral, 080);
171
183
 
@@ -180,13 +192,13 @@ body > .#{$tree-item} {
180
192
  border-radius: 0px;
181
193
  z-index: 1;
182
194
  &:before {
183
- content: "";
195
+ content: '';
184
196
  position: absolute;
185
197
  top: 0;
186
198
  left: 0;
187
199
  width: 100%;
188
200
  height: 100%;
189
- border: 1px solid color(brand-primary, 600);
201
+ border: 2px solid color(brand-primary, 700);
190
202
  pointer-events: none;
191
203
  }
192
204
  &.selected {
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,58 +40,60 @@ $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
+
86
87
  // **TYPOGRAPHY**
87
88
  // Typeface
88
89
  // Change the typeface.
89
- $theme-font-family: Roboto !default;
90
+ $theme-font-family: "proxima-nova", Arial, sans-serif !default;
90
91
 
91
92
  // Type Scale
92
93
  // Change the font-sizes of HTML typed tags below.
93
94
  $theme-base-font-size: 13px;
94
95
 
96
+
95
97
  // **BORDER RADIUS**
96
98
  // How round would you like your containers to be?
97
99
  $theme-base-border-radius: 2px;