@terraware/web-components 1.0.47 → 1.0.48

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 (12) hide show
  1. package/components/Autocomplete/styles.scss +3 -2
  2. package/components/Button/styles.scss +59 -58
  3. package/components/DatePicker/styles.scss +9 -8
  4. package/components/DialogBox/styles.scss +7 -6
  5. package/components/ErrorBox/styles.scss +5 -4
  6. package/components/Message/styles.scss +31 -30
  7. package/components/Navbar/styles.scss +21 -20
  8. package/components/Select/styles.scss +37 -36
  9. package/components/Textfield/styles.scss +30 -29
  10. package/components/table/index.d.ts.map +1 -1
  11. package/components/table/index.js +7 -2
  12. package/package.json +1 -1
package/components/Autocomplete/styles.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @import '../../style-dictionary-dist/textfield_variables.scss';
2
+ @import '../../style-dictionary-dist2/terraware.scss';
2
3
 
3
4
  @font-face {
4
5
  font-family: 'Inter';
@@ -14,7 +15,7 @@
14
15
  font-size: $tw-fnt-frm-fld-label-font-size;
15
16
  font-weight: $tw-fnt-frm-fld-label-font-weight;
16
17
  line-height: $tw-fnt-frm-fld-label-line-height;
17
- color: $tw-clr-frm-fld-label;
18
+ color: $tw-clr-txt-secondary;
18
19
  margin-bottom: $tw-spc-base-xx-small;
19
20
  display: block;
20
21
  width: 100%;
@@ -22,7 +23,7 @@
22
23
  }
23
24
 
24
25
  .MuiInputBase-root {
25
- border: 1px solid $tw-clr-base-semantic-passive;
26
+ border: 1px solid $tw-clr-bg-info;
26
27
  position: unset;
27
28
  padding: 0;
28
29
  }
package/components/Button/styles.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @import '../../style-dictionary-dist/button_variables.scss';
2
+ @import '../../style-dictionary-dist2/terraware.scss';
2
3
 
3
4
  @font-face {
4
5
  font-family: 'Inter';
@@ -35,7 +36,7 @@
35
36
  left: calc(#{-$tw-sz-btn-stroke} * 2);
36
37
  right: calc(#{-$tw-sz-btn-stroke} * 2);
37
38
  border-radius: calc(#{$tw-sz-btn-small-height + $tw-sz-btn-stroke * 4} / 2);
38
- border: $tw-sz-btn-stroke solid $tw-clr-btn-stroke-focus;
39
+ border: $tw-sz-btn-stroke solid $tw-clr-brdr-focus;
39
40
  }
40
41
  }
41
42
 
@@ -78,7 +79,7 @@
78
79
  left: calc(#{-$tw-sz-btn-stroke} * 2);
79
80
  right: calc(#{-$tw-sz-btn-stroke} * 2);
80
81
  border-radius: calc(#{$tw-sz-btn-medium-height + $tw-sz-btn-stroke * 4} / 2);
81
- border: $tw-sz-btn-stroke solid $tw-clr-btn-stroke-focus;
82
+ border: $tw-sz-btn-stroke solid $tw-clr-brdr-focus;
82
83
  }
83
84
  }
84
85
  &.button-with-icon {
@@ -120,7 +121,7 @@
120
121
  left: calc(#{-$tw-sz-btn-stroke} * 2);
121
122
  right: calc(#{-$tw-sz-btn-stroke} * 2);
122
123
  border-radius: calc(#{$tw-sz-btn-large-height + $tw-sz-btn-stroke * 4} / 2);
123
- border: $tw-sz-btn-stroke solid $tw-clr-btn-stroke-focus;
124
+ border: $tw-sz-btn-stroke solid $tw-clr-brdr-focus;
124
125
  }
125
126
  }
126
127
  &.button-with-icon {
@@ -161,7 +162,7 @@
161
162
  left: calc(#{-$tw-sz-btn-stroke} * 2);
162
163
  right: calc(#{-$tw-sz-btn-stroke} * 2);
163
164
  border-radius: calc(#{$tw-sz-btn-x-large-height + $tw-sz-btn-stroke * 4} / 2);
164
- border: $tw-sz-btn-stroke solid $tw-clr-btn-stroke-focus;
165
+ border: $tw-sz-btn-stroke solid $tw-clr-brdr-focus;
165
166
  }
166
167
  }
167
168
  &.button-with-icon {
@@ -189,44 +190,44 @@
189
190
  }
190
191
 
191
192
  .productive-primary {
192
- background-color: $tw-clr-btn-productive-primary-fill;
193
- color: $tw-clr-btn-productive-primary-label;
193
+ background-color: $tw-clr-bg-brand;
194
+ color: $tw-clr-txt-on-brand;
194
195
 
195
196
  svg {
196
- fill: $tw-clr-btn-productive-primary-label;
197
+ fill: $tw-clr-txt-on-brand;
197
198
  }
198
199
 
199
200
  &:hover {
200
- background: $tw-clr-btn-productive-primary-fill-hover;
201
+ background: $tw-clr-bg-brand-hover;
201
202
  }
202
203
 
203
204
  &:active {
204
- background-color: $tw-clr-btn-productive-primary-fill-active;
205
+ background-color: $tw-clr-bg-brand-active;
205
206
  }
206
207
 
207
208
  &:disabled {
208
- background-color: rgba($tw-clr-btn-productive-primary-fill, 0.4);
209
- color: rgba($tw-clr-btn-productive-primary-label, 0.4);
209
+ background-color: rgba($tw-clr-bg-brand, 0.4);
210
+ color: rgba($tw-clr-txt-on-brand, 0.4);
210
211
  svg {
211
- fill: rgba($tw-clr-btn-productive-primary-label, 0.4);
212
+ fill: rgba($tw-clr-txt-on-brand, 0.4);
212
213
  }
213
214
  }
214
215
  }
215
216
 
216
217
  .productive-secondary {
217
- background-color: $tw-clr-btn-productive-secondary-fill;
218
- color: $tw-clr-btn-productive-secondary-label;
218
+ background-color: $tw-clr-bg-brand-ghost;
219
+ color: $tw-clr-txt-brand;
219
220
  svg {
220
- fill: $tw-clr-btn-productive-secondary-label;
221
+ fill: $tw-clr-txt-brand;
221
222
  }
222
223
 
223
- border: $tw-sz-btn-stroke solid $tw-clr-btn-productive-secondary-stroke;
224
+ border: $tw-sz-btn-stroke solid $tw-clr-brdr-brand;
224
225
  &:hover {
225
- background: $tw-clr-btn-productive-secondary-fill-hover;
226
+ background: $tw-clr-bg-brand-ghost-hover;
226
227
  }
227
228
 
228
229
  &:active {
229
- background-color: $tw-clr-btn-productive-secondary-fill-active;
230
+ background-color: $tw-clr-bg-brand-ghost-active;
230
231
  }
231
232
 
232
233
  &:focus {
@@ -267,51 +268,51 @@
267
268
  }
268
269
 
269
270
  &:disabled {
270
- background-color: rgba($tw-clr-btn-productive-secondary-fill, 0.4);
271
- border: $tw-sz-btn-stroke solid rgba($tw-clr-btn-productive-secondary-stroke, 0.4);
272
- color: rgba($tw-clr-btn-productive-secondary-label, 0.4);
271
+ background-color: rgba($tw-clr-bg-brand-ghost, 0.4);
272
+ border: $tw-sz-btn-stroke solid rgba($tw-clr-brdr-brand, 0.4);
273
+ color: rgba($tw-clr-txt-brand, 0.4);
273
274
  svg {
274
- fill: rgba($tw-clr-btn-productive-secondary-label, 0.4);
275
+ fill: rgba($tw-clr-txt-brand, 0.4);
275
276
  }
276
277
  }
277
278
  }
278
279
 
279
280
  .passive-primary {
280
- background-color: $tw-clr-btn-passive-primary-fill;
281
- color: $tw-clr-btn-passive-primary-label;
281
+ background-color: $tw-clr-bg-tertiary;
282
+ color: $tw-clr-txt;
282
283
  svg {
283
- fill: $tw-clr-btn-passive-primary-label;
284
+ fill: $tw-clr-txt;
284
285
  }
285
286
  &:hover {
286
- background: $tw-clr-btn-passive-primary-fill-hover;
287
+ background: $tw-clr-bg-tertiary-hover;
287
288
  }
288
289
 
289
290
  &:active {
290
- background-color: $tw-clr-btn-passive-primary-fill-active;
291
+ background-color: $tw-clr-bg-tertiary-active;
291
292
  }
292
293
 
293
294
  &:disabled {
294
- background-color: rgba($tw-clr-btn-passive-primary-fill, 0.4);
295
- color: rgba($tw-clr-btn-passive-primary-label, 0.4);
295
+ background-color: rgba($tw-clr-bg-tertiary, 0.4);
296
+ color: rgba($tw-clr-txt, 0.4);
296
297
  svg {
297
- fill: rgba($tw-clr-btn-passive-primary-label, 0.4);
298
+ fill: rgba($tw-clr-txt, 0.4);
298
299
  }
299
300
  }
300
301
  }
301
302
 
302
303
  .passive-secondary {
303
- background-color: $tw-clr-btn-passive-secondary-fill;
304
- color: $tw-clr-btn-passive-secondary-label;
304
+ background-color: $tw-clr-bg-ghost;
305
+ color: $tw-clr-txt;
305
306
  svg {
306
- fill: $tw-clr-btn-passive-secondary-label;
307
+ fill: $tw-clr-txt;
307
308
  }
308
- border: $tw-sz-btn-stroke solid $tw-clr-btn-passive-secondary-stroke;
309
+ border: $tw-sz-btn-stroke solid $tw-clr-brdr;
309
310
  &:hover {
310
- background: $tw-clr-btn-passive-secondary-fill-hover;
311
+ background: $tw-clr-bg-ghost-hover;
311
312
  }
312
313
 
313
314
  &:active {
314
- background-color: $tw-clr-btn-passive-secondary-fill-active;
315
+ background-color: $tw-clr-bg-ghost-active;
315
316
  }
316
317
 
317
318
  &:focus {
@@ -324,11 +325,11 @@
324
325
  }
325
326
 
326
327
  &:disabled {
327
- background-color: rgba($tw-clr-btn-passive-secondary-fill, 0.4);
328
- border: $tw-sz-btn-stroke solid rgba($tw-clr-btn-passive-secondary-stroke, 0.4);
329
- color: rgba($tw-clr-btn-passive-secondary-label, 0.4);
328
+ background-color: rgba($tw-clr-bg-ghost, 0.4);
329
+ border: $tw-sz-btn-stroke solid rgba($tw-clr-brdr, 0.4);
330
+ color: rgba($tw-clr-txt, 0.4);
330
331
  svg {
331
- fill: rgba($tw-clr-btn-passive-secondary-label, 0.4);
332
+ fill: rgba($tw-clr-txt, 0.4);
332
333
  }
333
334
  }
334
335
 
@@ -362,49 +363,49 @@
362
363
  }
363
364
 
364
365
  .destructive-primary {
365
- background-color: $tw-clr-btn-destructive-primary-fill;
366
- color: $tw-clr-btn-destructive-primary-label;
366
+ background-color: $tw-clr-bg-danger;
367
+ color: $tw-clr-txt-on-danger;
367
368
  svg {
368
- fill: $tw-clr-btn-destructive-primary-label;
369
+ fill: $tw-clr-txt-on-danger;
369
370
  }
370
371
  &:hover {
371
- background: $tw-clr-btn-destructive-primary-fill-hover;
372
+ background: $tw-clr-bg-danger-hover;
372
373
  }
373
374
 
374
375
  &:active {
375
- background-color: $tw-clr-btn-destructive-primary-fill-active;
376
+ background-color: $tw-clr-bg-danger-active;
376
377
  }
377
378
 
378
379
  &:disabled {
379
- background-color: rgba($tw-clr-btn-destructive-primary-fill, 0.4);
380
- color: rgba($tw-clr-btn-destructive-primary-label, 0.4);
380
+ background-color: rgba($tw-clr-bg-danger, 0.4);
381
+ color: rgba($tw-clr-txt-on-danger, 0.4);
381
382
  svg {
382
- fill: rgba($tw-clr-btn-destructive-primary-label, 0.4);
383
+ fill: rgba($tw-clr-txt-on-danger, 0.4);
383
384
  }
384
385
  }
385
386
  }
386
387
 
387
388
  .destructive-secondary {
388
- background-color: $tw-clr-btn-destructive-secondary-fill;
389
- color: $tw-clr-btn-destructive-secondary-label;
389
+ background-color: $tw-clr-bg-danger-ghost;
390
+ color: $tw-clr-txt-danger;
390
391
  svg {
391
- fill: $tw-clr-btn-destructive-secondary-label;
392
+ fill: $tw-clr-txt-danger;
392
393
  }
393
- border: $tw-sz-btn-stroke solid $tw-clr-btn-destructive-secondary-stroke;
394
+ border: $tw-sz-btn-stroke solid $tw-clr-brdr-danger;
394
395
  &:hover {
395
- background: $tw-clr-btn-destructive-secondary-fill-hover;
396
+ background: $tw-clr-bg-danger-ghost-hover;
396
397
  }
397
398
 
398
399
  &:active {
399
- background-color: $tw-clr-btn-destructive-secondary-fill-active;
400
+ background-color: $tw-clr-bg-danger-ghost-active;
400
401
  }
401
402
 
402
403
  &:disabled {
403
- background-color: rgba($tw-clr-btn-destructive-secondary-fill, 0.4);
404
- border: $tw-sz-btn-stroke solid rgba($tw-clr-btn-destructive-secondary-stroke, 0.4);
405
- color: rgba($tw-clr-btn-destructive-secondary-label, 0.4);
404
+ background-color: rgba($tw-clr-bg-danger-ghost, 0.4);
405
+ border: $tw-sz-btn-stroke solid rgba($tw-clr-brdr-danger, 0.4);
406
+ color: rgba($tw-clr-txt-danger, 0.4);
406
407
  svg {
407
- fill: rgba($tw-clr-btn-destructive-secondary-label, 0.4);
408
+ fill: rgba($tw-clr-txt-danger, 0.4);
408
409
  }
409
410
  }
410
411
 
package/components/DatePicker/styles.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @import '../../style-dictionary-dist/textfield_variables.scss';
2
+ @import '../../style-dictionary-dist2/terraware.scss';
2
3
 
3
4
  @font-face {
4
5
  font-family: 'Inter';
@@ -14,7 +15,7 @@
14
15
  font-size: $tw-fnt-frm-fld-label-font-size;
15
16
  font-weight: $tw-fnt-frm-fld-label-font-weight;
16
17
  line-height: $tw-fnt-frm-fld-label-line-height;
17
- color: $tw-clr-frm-fld-label;
18
+ color: $tw-clr-txt-secondary;
18
19
  margin-bottom: $tw-spc-base-xx-small;
19
20
  display: block;
20
21
  width: 100%;
@@ -23,15 +24,15 @@
23
24
 
24
25
  &--error {
25
26
  .MuiInputBase-root {
26
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
27
- background-color: $tw-clr-frm-fld-text-input-fill-error;
27
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
28
+ background-color: $tw-clr-bg-danger-tertiary;
28
29
 
29
30
  &:hover {
30
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
31
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
31
32
  }
32
33
 
33
34
  &:active {
34
- border: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-frm-fld-text-input-stroke-error;
35
+ border: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-danger;
35
36
  }
36
37
  }
37
38
  }
@@ -45,12 +46,12 @@
45
46
  font-size: $tw-fnt-frm-fld-error-text-font-size;
46
47
  font-weight: $tw-fnt-frm-fld-error-text-font-weight;
47
48
  line-height: $tw-fnt-frm-fld-error-text-line-height;
48
- color: $tw-clr-frm-fld-error-text;
49
+ color: $tw-clr-txt-danger;
49
50
  width: 100%;
50
51
  max-width: 100%;
51
52
 
52
53
  &--icon {
53
- fill: $tw-clr-frm-fld-error-text;
54
+ fill: $tw-clr-txt-danger;
54
55
  width: $tw-fnt-frm-fld-error-text-line-height;
55
56
  height: $tw-fnt-frm-fld-error-text-line-height;
56
57
  margin-right: $tw-spc-base-x-small;
@@ -59,7 +60,7 @@
59
60
  }
60
61
 
61
62
  .MuiInputBase-root {
62
- border: 1px solid $tw-clr-base-semantic-passive;
63
+ border: 1px solid $tw-clr-bg-info;
63
64
  position: unset;
64
65
  }
65
66
 
package/components/DialogBox/styles.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @import '../../style-dictionary-dist/dialogBox_variables.scss';
2
+ @import '../../style-dictionary-dist2/terraware.scss';
2
3
 
3
4
  @font-face {
4
5
  font-family: 'Inter';
@@ -40,7 +41,7 @@
40
41
  }
41
42
 
42
43
  .dialog-box {
43
- border: 1px solid $tw-clr-dvdr-fill;
44
+ border: 1px solid $tw-clr-brdr-tertiary;
44
45
  box-shadow: $tw-elvtn-base-800;
45
46
  border-radius: $tw-sz-base-small;
46
47
  display: flex;
@@ -69,7 +70,7 @@
69
70
 
70
71
  &--header {
71
72
  background-color: $tw-clr-base-gray-050;
72
- border-bottom: 1px solid $tw-clr-dvdr-fill;
73
+ border-bottom: 1px solid $tw-clr-brdr-tertiary;
73
74
  padding: $tw-spc-base-small $tw-spc-base-medium;
74
75
  display: flex;
75
76
  justify-content: space-between;
@@ -80,14 +81,14 @@
80
81
  font-size: $tw-fnt-dlg-bx-title-font-size;
81
82
  font-weight: $tw-fnt-dlg-bx-title-font-weight;
82
83
  line-height: $tw-fnt-dlg-bx-title-line-height;
83
- color: $tw-clr-text-fill;
84
+ color: $tw-clr-txt;
84
85
  text-align: center;
85
86
  margin: 0;
86
87
  width: 100%;
87
88
  }
88
89
 
89
90
  .icon-close {
90
- fill: $tw-clr-icon-fill-passive;
91
+ fill: $tw-clr-icn-secondary;
91
92
  height: $tw-sz-base-medium;
92
93
  width: $tw-sz-base-medium;
93
94
  }
@@ -95,7 +96,7 @@
95
96
 
96
97
  &--body {
97
98
  background: $tw-clr-base-white;
98
- border-bottom: 1px solid $tw-clr-dvdr-fill;
99
+ border-bottom: 1px solid $tw-clr-brdr-tertiary;
99
100
  padding: $tw-spc-base-medium;
100
101
  text-align: center;
101
102
  &.scrolled {
@@ -116,7 +117,7 @@
116
117
  font-size: $tw-fnt-dlg-bx-message-font-size;
117
118
  font-weight: $tw-fnt-dlg-bx-message-font-weight;
118
119
  line-height: $tw-fnt-dlg-bx-message-line-height;
119
- color: $tw-clr-text-fill;
120
+ color: $tw-clr-txt;
120
121
  width: 100%;
121
122
  text-align: center;
122
123
  }
package/components/ErrorBox/styles.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @import '../../style-dictionary-dist/textfield_variables.scss';
2
+ @import '../../style-dictionary-dist2/terraware.scss';
2
3
 
3
4
  @font-face {
4
5
  font-family: 'Inter';
@@ -12,7 +13,7 @@
12
13
  background: $tw-clr-base-red-050;
13
14
  padding: 16px;
14
15
  margin: 0 auto;
15
- border: 1px solid $tw-clr-icon-fill-critical;
16
+ border: 1px solid $tw-clr-icn-danger;
16
17
  border-radius: 8px;
17
18
  flex-direction: column;
18
19
 
@@ -31,7 +32,7 @@
31
32
  font-size: $tw-fnt-base-font-size-body-02;
32
33
  font-weight: $tw-fnt-frm-fld-error-text-font-weight;
33
34
  line-height: $tw-fnt-frm-fld-error-text-line-height;
34
- color: $tw-clr-text-fill;
35
+ color: $tw-clr-txt;
35
36
  display: block;
36
37
  width: 100%;
37
38
  max-width: 100%;
@@ -44,7 +45,7 @@
44
45
  font-size: $tw-fnt-base-font-size-body-02;
45
46
  font-weight: $tw-fnt-base-headline-01-semi-bold-font-weight;
46
47
  line-height: $tw-fnt-frm-fld-error-text-line-height;
47
- color: $tw-clr-text-fill;
48
+ color: $tw-clr-txt;
48
49
  display: block;
49
50
  width: 100%;
50
51
  max-width: 100%;
@@ -58,6 +59,6 @@
58
59
  }
59
60
 
60
61
  .error-icon {
61
- fill: $tw-clr-frm-fld-error-text;
62
+ fill: $tw-clr-txt-danger;
62
63
  margin-right: $tw-spc-base-x-small;
63
64
  }
package/components/Message/styles.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @import '../../style-dictionary-dist/message_variables.scss';
2
+ @import '../../style-dictionary-dist2/terraware.scss';
2
3
 
3
4
  @font-face {
4
5
  font-family: 'Inter';
@@ -38,7 +39,7 @@
38
39
  font-size: $tw-fnt-mssg-title-font-size;
39
40
  font-weight: $tw-fnt-mssg-title-font-weight;
40
41
  line-height: $tw-fnt-mssg-title-line-height;
41
- color: $tw-clr-text-fill;
42
+ color: $tw-clr-txt;
42
43
  padding: 0;
43
44
  margin: 0 0 $tw-spc-base-x-small 0;
44
45
  }
@@ -53,7 +54,7 @@
53
54
  font-size: $tw-fnt-mssg-body-font-size;
54
55
  font-weight: $tw-fnt-mssg-body-font-weight;
55
56
  line-height: $tw-fnt-mssg-body-line-height;
56
- color: $tw-clr-text-fill;
57
+ color: $tw-clr-txt;
57
58
  padding: 0;
58
59
  margin: 0;
59
60
  }
@@ -84,7 +85,7 @@
84
85
  font-size: $tw-fnt-mssg-body-font-size;
85
86
  font-weight: $tw-fnt-mssg-body-font-weight;
86
87
  line-height: $tw-fnt-mssg-body-line-height;
87
- color: $tw-clr-text-fill-productive;
88
+ color: $tw-clr-txt-brand;
88
89
  margin-left: $tw-spc-base-x-small;
89
90
  background: none;
90
91
  border: 0;
@@ -95,7 +96,7 @@
95
96
  &--left-side {
96
97
  padding: $tw-spc-base-small $tw-spc-base-small 0 $tw-spc-base-small;
97
98
  .left-side--icon {
98
- fill: $tw-clr-icon-fill-text-inv;
99
+ fill: $tw-clr-icn-inverse;
99
100
  width: $tw-sz-base-medium;
100
101
  height: $tw-sz-base-medium;
101
102
  }
@@ -103,14 +104,14 @@
103
104
 
104
105
  .toast-message--close-icon {
105
106
  margin-left: $tw-spc-base-x-small;
106
- fill: $tw-clr-icon-fill-passive;
107
+ fill: $tw-clr-icn-secondary;
107
108
  width: $tw-sz-base-medium;
108
109
  height: $tw-sz-base-medium;
109
110
  }
110
111
 
111
112
  .page-message--close-icon {
112
113
  margin-left: $tw-spc-base-x-small;
113
- fill: $tw-clr-icon-fill-passive;
114
+ fill: $tw-clr-icn-secondary;
114
115
  width: $tw-sz-base-medium;
115
116
  height: $tw-sz-base-medium;
116
117
  }
@@ -124,72 +125,72 @@
124
125
 
125
126
  &--info {
126
127
  &.tw-message--page {
127
- border: 1px solid $tw-clr-base-semantic-passive;
128
- background-color: $tw-clr-base-semantic-passive-bg;
128
+ border: 1px solid $tw-clr-bg-info;
129
+ background-color: $tw-clr-bg-info-tertiary;
129
130
  .main-content--icon {
130
- fill:$tw-clr-base-semantic-passive;
131
+ fill:$tw-clr-bg-info;
131
132
  }
132
133
  }
133
- border: 1px solid $tw-clr-icon-fill-passive;
134
+ border: 1px solid $tw-clr-icn-secondary;
134
135
  &.tw-message--toast {
135
- box-shadow: 0 2px $tw-clr-icon-fill-passive;
136
+ box-shadow: 0 2px $tw-clr-icn-secondary;
136
137
  }
137
138
  .tw-message--left-side {
138
- background-color: $tw-clr-icon-fill-passive;
139
+ background-color: $tw-clr-icn-secondary;
139
140
  }
140
141
  }
141
142
 
142
143
  &--critical {
143
144
  &.tw-message--page {
144
- border: 1px solid $tw-clr-base-semantic-critical;
145
- background-color: $tw-clr-base-semantic-critical-bg;
145
+ border: 1px solid $tw-clr-bg-danger;
146
+ background-color: $tw-clr-bg-danger-tertiary;
146
147
 
147
148
  .main-content--icon {
148
- fill: $tw-clr-base-semantic-critical
149
+ fill: $tw-clr-bg-danger
149
150
  }
150
151
  }
151
- border: 1px solid $tw-clr-icon-fill-critical;
152
+ border: 1px solid $tw-clr-icn-danger;
152
153
  &.tw-message--toast {
153
- box-shadow: 0 2px $tw-clr-icon-fill-critical;
154
+ box-shadow: 0 2px $tw-clr-icn-danger;
154
155
  }
155
156
  .tw-message--left-side {
156
- background-color: $tw-clr-icon-fill-critical;
157
+ background-color: $tw-clr-icn-danger;
157
158
  }
158
159
  }
159
160
 
160
161
  &--warning {
161
162
  &.tw-message--page {
162
- border: 1px solid $tw-clr-base-semantic-warning;
163
- background-color: $tw-clr-base-semantic-warning-bg;
163
+ border: 1px solid $tw-clr-bg-warning;
164
+ background-color: $tw-clr-bg-warning-tertiary;
164
165
 
165
166
  .main-content--icon {
166
- fill: $tw-clr-base-semantic-warning;
167
+ fill: $tw-clr-bg-warning;
167
168
  }
168
169
  }
169
- border: 1px solid $tw-clr-icon-fill-warning;
170
+ border: 1px solid $tw-clr-icn-warning;
170
171
  &.tw-message--toast {
171
- box-shadow: 0 2px $tw-clr-icon-fill-warning;
172
+ box-shadow: 0 2px $tw-clr-icn-warning;
172
173
  }
173
174
  .tw-message--left-side {
174
- background-color: $tw-clr-icon-fill-warning;
175
+ background-color: $tw-clr-icn-warning;
175
176
  }
176
177
  }
177
178
 
178
179
  &--success {
179
180
  &.tw-message--page {
180
- border: 1px solid $tw-clr-base-semantic-success;
181
- background-color: $tw-clr-base-semantic-success-bg;
181
+ border: 1px solid $tw-clr-bg-success;
182
+ background-color: $tw-clr-bg-success-tertiary;
182
183
 
183
184
  .main-content--icon {
184
- fill: $tw-clr-base-semantic-success;
185
+ fill: $tw-clr-bg-success;
185
186
  }
186
187
  }
187
- border: 1px solid $tw-clr-icon-fill-success;
188
+ border: 1px solid $tw-clr-icn-success;
188
189
  &.tw-message--toast {
189
- box-shadow: 0 2px $tw-clr-icon-fill-success;
190
+ box-shadow: 0 2px $tw-clr-icn-success;
190
191
  }
191
192
  .tw-message--left-side {
192
- background-color: $tw-clr-icon-fill-success;
193
+ background-color: $tw-clr-icn-success;
193
194
  }
194
195
  }
195
196
 
package/components/Navbar/styles.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @import '../../style-dictionary-dist/navbar_variables.scss';
2
+ @import '../../style-dictionary-dist2/terraware.scss';
2
3
 
3
4
  @font-face {
4
5
  font-family: 'Inter';
@@ -6,7 +7,7 @@
6
7
  }
7
8
 
8
9
  .navbar {
9
- background-color: $tw-clr-nvgtn-side-nav-item-fill;
10
+ background-color: $tw-clr-bg-hover;
10
11
  height: 100%;
11
12
  position: fixed;
12
13
  z-index: 1100;
@@ -15,7 +16,7 @@
15
16
  flex-direction: column;
16
17
 
17
18
  .logo {
18
- background-color: $tw-clr-nvgtn-side-nav-item-fill;
19
+ background-color: $tw-clr-bg-hover;
19
20
  padding-bottom: $tw-spc-base-small 0;
20
21
  margin-bottom: $tw-spc-base-small 0;
21
22
 
@@ -25,10 +26,10 @@
25
26
  }
26
27
  }
27
28
  .nav-section {
28
- background-color: $tw-clr-nvgtn-side-nav-section-fill;
29
+ background-color: $tw-clr-bg-hover;
29
30
  padding: $tw-spc-base-x-small $tw-spc-base-small;
30
31
  .divider {
31
- border-top: $tw-sz-dvdr-stroke solid $tw-clr-dvdr-fill;
32
+ border-top: $tw-sz-dvdr-stroke solid $tw-clr-brdr-tertiary;
32
33
  }
33
34
 
34
35
  &--title {
@@ -37,7 +38,7 @@
37
38
  font-weight: $tw-fnt-nvgtn-side-nav-section-title-font-weight;
38
39
  line-height: $tw-fnt-nvgtn-side-nav-section-title-line-height;
39
40
  text-transform: $tw-fnt-nvgtn-side-nav-section-title-text-transform;
40
- color: $tw-clr-nvgtn-side-nav-section-title;
41
+ color: $tw-clr-txt;
41
42
  display: block;
42
43
  margin-top: $tw-spc-base-small;
43
44
  }
@@ -48,8 +49,8 @@
48
49
  font-size: $tw-fnt-nvgtn-side-nav-item-label-font-size;
49
50
  font-weight: $tw-fnt-nvgtn-side-nav-item-label-font-weight;
50
51
  line-height: $tw-fnt-nvgtn-side-nav-item-label-line-height;
51
- color: $tw-clr-nvgtn-side-nav-item-label;
52
- background-color: $tw-clr-nvgtn-side-nav-item-fill;
52
+ color: $tw-clr-txt;
53
+ background-color: $tw-clr-bg-hover;
53
54
 
54
55
  .nav-item-content {
55
56
  padding: $tw-sz-base-small;
@@ -71,14 +72,14 @@
71
72
  }
72
73
 
73
74
  &:hover {
74
- background-color: $tw-clr-nvgtn-side-nav-item-fill-hover;
75
+ background-color: $tw-clr-bg-secondary;
75
76
  // .nav-item {
76
- // background-color: $tw-clr-nvgtn-side-nav-item-fill-hover;
77
+ // background-color: $tw-clr-bg-secondary;
77
78
  // }
78
79
  }
79
80
 
80
81
  &:active {
81
- background-color: $tw-clr-nvgtn-side-nav-item-fill-active;
82
+ background-color: $tw-clr-bg-secondary-hover;
82
83
  }
83
84
 
84
85
  button {
@@ -89,27 +90,27 @@
89
90
  }
90
91
 
91
92
  &--children-selected {
92
- background-color: $tw-clr-nvgtn-side-nav-item-fill-active;
93
+ background-color: $tw-clr-bg-secondary-hover;
93
94
 
94
95
  &:hover {
95
- background-color: $tw-clr-nvgtn-side-nav-item-fill-active;
96
+ background-color: $tw-clr-bg-secondary-hover;
96
97
 
97
98
  & > .nav-item-content {
98
- background-color: $tw-clr-nvgtn-side-nav-item-fill-hover;
99
+ background-color: $tw-clr-bg-secondary;
99
100
  }
100
101
  }
101
102
 
102
103
  .nav-item {
103
- background-color: $tw-clr-nvgtn-side-nav-item-fill-active;
104
+ background-color: $tw-clr-bg-secondary-hover;
104
105
 
105
106
  &:hover {
106
- background-color: $tw-clr-nvgtn-side-nav-item-fill-hover;
107
+ background-color: $tw-clr-bg-secondary;
107
108
  }
108
109
  }
109
110
  }
110
111
 
111
112
  &--selected {
112
- background-color: $tw-clr-nvgtn-side-nav-item-fill-active;
113
+ background-color: $tw-clr-bg-secondary-hover;
113
114
  position: relative;
114
115
  }
115
116
 
@@ -121,11 +122,11 @@
121
122
  top: 0;
122
123
  bottom: 0;
123
124
  width: $tw-sz-nvgtn-side-nav-item-indicator;
124
- background-color: $tw-clr-nvgtn-side-nav-item-indicator-fill;
125
+ background-color: $tw-clr-bg-selected;
125
126
  }
126
127
 
127
128
  &--icon {
128
- fill: $tw-clr-icon-fill-text;
129
+ fill: $tw-clr-icn;
129
130
  margin-right: $tw-spc-base-x-small;
130
131
  line-height: $tw-sz-icon-small;
131
132
  height: $tw-sz-icon-small;
@@ -138,13 +139,13 @@
138
139
  margin-left: $tw-spc-base-x-small;
139
140
 
140
141
  path {
141
- fill: $tw-clr-icon-fill-passive;
142
+ fill: $tw-clr-icn-secondary;
142
143
  }
143
144
  }
144
145
 
145
146
  .subnavbar .nav-item {
146
147
  padding-right: $tw-spc-base-small;
147
- background-color: $tw-clr-nvgtn-side-nav-item-fill-active;
148
+ background-color: $tw-clr-bg-secondary-hover;
148
149
 
149
150
  &-content {
150
151
  padding-left: calc(#{$tw-spc-base-small} * 2);
package/components/Select/styles.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @import '../../style-dictionary-dist/textfield_variables.scss';
2
+ @import '../../style-dictionary-dist2/terraware.scss';
2
3
 
3
4
  @font-face {
4
5
  font-family: 'Inter';
@@ -34,7 +35,7 @@
34
35
  font-size: $tw-fnt-frm-fld-help-text-font-size;
35
36
  font-weight: $tw-fnt-frm-fld-help-text-font-weight;
36
37
  line-height: $tw-fnt-frm-fld-help-text-line-height;
37
- color: $tw-clr-frm-fld-help-text;
38
+ color: $tw-clr-txt-secondary;
38
39
  display: block;
39
40
  width: 100%;
40
41
  max-width: 100%;
@@ -46,7 +47,7 @@
46
47
  font-size: $tw-fnt-frm-fld-text-value-font-size;
47
48
  font-weight: $tw-fnt-frm-fld-text-value-font-weight;
48
49
  line-height: $tw-fnt-frm-fld-text-value-line-height;
49
- color: $tw-clr-frm-fld-value;
50
+ color: $tw-clr-txt;
50
51
  padding-top: 0;
51
52
  padding-bottom: 0;
52
53
  &::placeholder {
@@ -62,20 +63,20 @@
62
63
  }
63
64
 
64
65
  .textfield-value {
65
- background-color: $tw-clr-frm-fld-text-input-fill;
66
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
66
+ background-color: $tw-clr-bg;
67
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
67
68
  padding: $tw-spc-base-x-small;
68
69
  border-radius: $tw-rds-frm-fld-text-input;
69
70
  border-width: $tw-sz-frm-fld-text-input-stroke;
70
71
  display: flex;
71
72
 
72
73
  &:hover {
73
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-hover;
74
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-hover;
74
75
  }
75
76
 
76
77
  &:active {
77
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-hover;
78
- outline: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-hover;
78
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-hover;
79
+ outline: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-hover;
79
80
  }
80
81
 
81
82
  input {
@@ -85,7 +86,7 @@
85
86
  font-size: $tw-fnt-frm-fld-text-value-font-size;
86
87
  font-weight: $tw-fnt-frm-fld-text-value-font-weight;
87
88
  line-height: $tw-fnt-frm-fld-text-value-line-height;
88
- color: $tw-clr-frm-fld-value;
89
+ color: $tw-clr-txt;
89
90
  background: transparent;
90
91
  padding-top: 0;
91
92
  padding-bottom: 0;
@@ -114,62 +115,62 @@
114
115
  opacity: $tw-opcty-semantic-off;
115
116
  pointer-events: none;
116
117
  &:hover {
117
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
118
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
118
119
  }
119
120
 
120
121
  &:active {
121
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
122
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
122
123
  }
123
124
  }
124
125
 
125
126
  &--icon-right {
126
127
  width: $tw-fnt-frm-fld-text-value-line-height;
127
128
  height: $tw-fnt-frm-fld-text-value-line-height;
128
- fill: $tw-clr-frm-fld-value;
129
+ fill: $tw-clr-txt;
129
130
  }
130
131
 
131
132
  &--icon-left {
132
133
  width: $tw-fnt-frm-fld-text-value-line-height;
133
134
  height: $tw-fnt-frm-fld-text-value-line-height;
134
- fill: $tw-clr-frm-fld-value;
135
+ fill: $tw-clr-txt;
135
136
  margin-right: $tw-spc-base-x-small;
136
137
  }
137
138
 
138
139
  &--error {
139
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
140
- background-color: $tw-clr-frm-fld-text-input-fill-error;
140
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
141
+ background-color: $tw-clr-bg-danger-tertiary;
141
142
 
142
143
  &:hover {
143
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
144
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
144
145
  }
145
146
 
146
147
  &:active {
147
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
148
- outline: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
148
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
149
+ outline: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
149
150
  }
150
151
  }
151
152
 
152
153
  &--warning {
153
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-warning;
154
- background-color: $tw-clr-frm-fld-text-input-fill-warning;
154
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning;
155
+ background-color: $tw-clr-bg-warning-tertiary;
155
156
 
156
157
  &:hover {
157
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-warning;
158
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning;
158
159
  }
159
160
 
160
161
  &:active {
161
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-warning;
162
- outline: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-warning;
162
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning;
163
+ outline: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning;
163
164
  }
164
165
  }
165
166
 
166
167
  &--readonly {
167
168
  &:hover {
168
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
169
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
169
170
  }
170
171
 
171
172
  &:active {
172
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
173
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
173
174
  }
174
175
  }
175
176
 
@@ -183,13 +184,13 @@
183
184
  font-size: $tw-fnt-frm-fld-error-text-font-size;
184
185
  font-weight: $tw-fnt-frm-fld-error-text-font-weight;
185
186
  line-height: $tw-fnt-frm-fld-error-text-line-height;
186
- color: $tw-clr-frm-fld-error-text;
187
+ color: $tw-clr-txt-danger;
187
188
  display: block;
188
189
  width: 100%;
189
190
  max-width: 100%;
190
191
 
191
192
  &--icon {
192
- fill: $tw-clr-frm-fld-error-text;
193
+ fill: $tw-clr-txt-danger;
193
194
  width: $tw-fnt-frm-fld-error-text-line-height;
194
195
  height: $tw-fnt-frm-fld-error-text-line-height;
195
196
  margin-right: $tw-spc-base-x-small;
@@ -201,13 +202,13 @@
201
202
  font-size: $tw-fnt-frm-fld-warning-text-font-size;
202
203
  font-weight: $tw-fnt-frm-fld-warning-text-font-weight;
203
204
  line-height: $tw-fnt-frm-fld-warning-text-line-height;
204
- color: $tw-clr-frm-fld-warning-text;
205
+ color: $tw-clr-txt-warning;
205
206
  display: block;
206
207
  width: 100%;
207
208
  max-width: 100%;
208
209
 
209
210
  &--icon {
210
- fill: $tw-clr-frm-fld-warning-text;
211
+ fill: $tw-clr-txt-warning;
211
212
  width: $tw-fnt-frm-fld-error-text-line-height;
212
213
  height: $tw-fnt-frm-fld-error-text-line-height;
213
214
  margin-right: $tw-spc-base-x-small;
@@ -228,8 +229,8 @@
228
229
  top: 42px;
229
230
  list-style-type: none;
230
231
  padding: $tw-spc-base-x-small 0;
231
- background: $tw-clr-frm-fld-select-menu-fill;
232
- border: 1px solid $tw-clr-frm-fld-select-menu-stroke;
232
+ background: $tw-clr-bg;
233
+ border: 1px solid $tw-clr-brdr-secondary;
233
234
  margin: 0;
234
235
  margin-top: $tw-spc-base-xx-small;
235
236
  border-radius: $tw-rds-frm-fld-text-input;
@@ -250,18 +251,18 @@
250
251
  cursor: pointer;
251
252
 
252
253
  &:hover {
253
- background-color: $tw-clr-frm-fld-select-menu-item-fill-hover;
254
- color: $tw-clr-frm-fld-value;
254
+ background-color: $tw-clr-bg-selected-ghost-hover;
255
+ color: $tw-clr-txt;
255
256
  }
256
257
 
257
258
  &:active {
258
- background-color: $tw-clr-frm-fld-select-menu-item-fill-active;
259
- color: $tw-clr-frm-fld-value;
259
+ background-color: $tw-clr-bg-selected-ghost-active;
260
+ color: $tw-clr-txt;
260
261
  }
261
262
 
262
263
  &--selected {
263
- background-color: $tw-clr-frm-fld-select-menu-item-fill-selected;
264
- color: $tw-clr-frm-fld-select-value-selected;
264
+ background-color: $tw-clr-bg-selected;
265
+ color: $tw-clr-txt-on-selected;
265
266
  }
266
267
 
267
268
  &--disabled {
package/components/Textfield/styles.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use 'sass:math';
2
2
 
3
3
  @import '../../style-dictionary-dist/textfield_variables.scss';
4
+ @import '../../style-dictionary-dist2/terraware.scss';
4
5
 
5
6
  @font-face {
6
7
  font-family: 'Inter';
@@ -15,7 +16,7 @@
15
16
  font-size: $tw-fnt-frm-fld-label-font-size;
16
17
  font-weight: $tw-fnt-frm-fld-label-font-weight;
17
18
  line-height: $tw-fnt-frm-fld-label-line-height;
18
- color: $tw-clr-frm-fld-label;
19
+ color: $tw-clr-txt-secondary;
19
20
  margin-bottom: $tw-spc-base-xx-small;
20
21
  display: block;
21
22
  width: 100%;
@@ -29,7 +30,7 @@
29
30
  &--icon-tooltip {
30
31
  width: $tw-fnt-frm-fld-label-line-height;
31
32
  height: $tw-fnt-frm-fld-label-line-height;
32
- fill: $tw-clr-frm-fld-value;
33
+ fill: $tw-clr-txt;
33
34
  }
34
35
  }
35
36
 
@@ -38,7 +39,7 @@
38
39
  font-size: $tw-fnt-frm-fld-help-text-font-size;
39
40
  font-weight: $tw-fnt-frm-fld-help-text-font-weight;
40
41
  line-height: $tw-fnt-frm-fld-help-text-line-height;
41
- color: $tw-clr-frm-fld-help-text;
42
+ color: $tw-clr-txt-secondary;
42
43
  display: block;
43
44
  width: 100%;
44
45
  max-width: 100%;
@@ -50,7 +51,7 @@
50
51
  font-size: $tw-fnt-frm-fld-text-value-font-size;
51
52
  font-weight: $tw-fnt-frm-fld-text-value-font-weight;
52
53
  line-height: $tw-fnt-frm-fld-text-value-line-height;
53
- color: $tw-clr-frm-fld-value;
54
+ color: $tw-clr-txt;
54
55
  padding-top: 0;
55
56
  padding-bottom: 0;
56
57
  &::placeholder {
@@ -66,8 +67,8 @@
66
67
  }
67
68
 
68
69
  .textfield-value {
69
- background-color: $tw-clr-frm-fld-text-input-fill;
70
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
70
+ background-color: $tw-clr-bg;
71
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
71
72
  padding: $tw-spc-base-x-small;
72
73
  border-radius: $tw-rds-frm-fld-text-input;
73
74
  border-width: $tw-sz-frm-fld-text-input-stroke;
@@ -76,12 +77,12 @@
76
77
  display: flex;
77
78
 
78
79
  &:hover {
79
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-hover;
80
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-hover;
80
81
  }
81
82
 
82
83
  &:active {
83
- border: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-frm-fld-text-input-stroke-hover;
84
- outline: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-frm-fld-text-input-stroke-hover;
84
+ border: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-hover;
85
+ outline: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-hover;
85
86
  }
86
87
 
87
88
  input {
@@ -91,7 +92,7 @@
91
92
  font-size: $tw-fnt-frm-fld-text-value-font-size;
92
93
  font-weight: $tw-fnt-frm-fld-text-value-font-weight;
93
94
  line-height: $tw-fnt-frm-fld-text-value-line-height;
94
- color: $tw-clr-frm-fld-value;
95
+ color: $tw-clr-txt;
95
96
  background: transparent;
96
97
  padding-top: 0;
97
98
  padding-bottom: 0;
@@ -119,11 +120,11 @@
119
120
  &--disabled {
120
121
  opacity: $tw-opcty-semantic-off;
121
122
  &:hover {
122
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
123
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
123
124
  }
124
125
 
125
126
  &:active {
126
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
127
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
127
128
  }
128
129
  }
129
130
 
@@ -135,50 +136,50 @@
135
136
  &--icon-right {
136
137
  width: $tw-fnt-frm-fld-text-value-line-height;
137
138
  height: $tw-fnt-frm-fld-text-value-line-height;
138
- fill: $tw-clr-frm-fld-value;
139
+ fill: $tw-clr-txt;
139
140
  }
140
141
 
141
142
  &--icon-left {
142
143
  width: $tw-fnt-frm-fld-text-value-line-height;
143
144
  height: $tw-fnt-frm-fld-text-value-line-height;
144
- fill: $tw-clr-frm-fld-value;
145
+ fill: $tw-clr-txt;
145
146
  margin-right: $tw-spc-base-x-small;
146
147
  }
147
148
 
148
149
  &--error {
149
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
150
- background-color: $tw-clr-frm-fld-text-input-fill-error;
150
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
151
+ background-color: $tw-clr-bg-danger-tertiary;
151
152
 
152
153
  &:hover {
153
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
154
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
154
155
  }
155
156
 
156
157
  &:active {
157
- border: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-frm-fld-text-input-stroke-error;
158
+ border: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-danger;
158
159
  }
159
160
  }
160
161
 
161
162
  &--warning {
162
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-warning;
163
- background-color: $tw-clr-frm-fld-text-input-fill-warning;
163
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning;
164
+ background-color: $tw-clr-bg-warning-tertiary;
164
165
 
165
166
  &:hover {
166
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-warning;
167
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning;
167
168
  }
168
169
 
169
170
  &:active {
170
- border: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-frm-fld-text-input-stroke-warning;
171
+ border: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-warning;
171
172
  }
172
173
  }
173
174
 
174
175
  &--readonly {
175
- background-color: $tw-clr-frm-fld-text-input-fill-read-only;
176
+ background-color: $tw-clr-bg-secondary;
176
177
  &:hover {
177
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
178
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
178
179
  }
179
180
 
180
181
  &:active {
181
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
182
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
182
183
  }
183
184
  }
184
185
  }
@@ -188,13 +189,13 @@
188
189
  font-size: $tw-fnt-frm-fld-error-text-font-size;
189
190
  font-weight: $tw-fnt-frm-fld-error-text-font-weight;
190
191
  line-height: $tw-fnt-frm-fld-error-text-line-height;
191
- color: $tw-clr-frm-fld-error-text;
192
+ color: $tw-clr-txt-danger;
192
193
  display: block;
193
194
  width: 100%;
194
195
  max-width: 100%;
195
196
 
196
197
  &--icon {
197
- fill: $tw-clr-frm-fld-error-text;
198
+ fill: $tw-clr-txt-danger;
198
199
  width: $tw-fnt-frm-fld-error-text-line-height;
199
200
  height: $tw-fnt-frm-fld-error-text-line-height;
200
201
  margin-right: $tw-spc-base-x-small;
@@ -206,13 +207,13 @@
206
207
  font-size: $tw-fnt-frm-fld-warning-text-font-size;
207
208
  font-weight: $tw-fnt-frm-fld-warning-text-font-weight;
208
209
  line-height: $tw-fnt-frm-fld-warning-text-line-height;
209
- color: $tw-clr-frm-fld-warning-text;
210
+ color: $tw-clr-txt-warning;
210
211
  display: block;
211
212
  width: 100%;
212
213
  max-width: 100%;
213
214
 
214
215
  &--icon {
215
- fill: $tw-clr-frm-fld-warning-text;
216
+ fill: $tw-clr-txt-warning;
216
217
  width: $tw-fnt-frm-fld-error-text-line-height;
217
218
  height: $tw-fnt-frm-fld-error-text-line-height;
218
219
  margin-right: $tw-spc-base-x-small;
package/components/table/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2F,YAAY,EAAc,MAAM,eAAe,CAAC;AAClJ,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAuC,SAAS,EAAc,MAAM,QAAQ,CAAC;AAGpF,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAK/E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAsBzC,MAAM,WAAW,QAAQ;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,KAAK,CAAC,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC;IACpD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,KAAK,MAAM,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IACrD,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC5D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,oBAAY,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,YAAY,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAAC;IACjE,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,CAAC,EAAE,EACvC,EAAE,EACF,OAAO,EACP,IAAI,EACJ,KAAK,EAAE,MAAc,EACrB,OAAO,EAAE,QAAQ,EACjB,QAA4B,EAC5B,QAAQ,EACR,eAAe,EACf,cAAqC,EACrC,WAAW,EACX,UAAU,EACV,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,UAAU,EACV,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAqB,EACrB,kBAAkB,EAClB,UAAU,EACV,YAAmB,GACpB,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAqNxB;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,CAAC,EAAE,CAMjG"}
package/components/table/index.js CHANGED
@@ -222,7 +222,12 @@ function EnhancedTable(_ref) {
222
222
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showTopBar && /*#__PURE__*/_react.default.createElement(_EnhancedTableToolbar.default, {
223
223
  numSelected: selectedRows ? selectedRows.length : 0,
224
224
  topBarButtons: topBarButtons
225
- }), /*#__PURE__*/_react.default.createElement(_core.DndContext, {
225
+ }), /*#__PURE__*/_react.default.createElement(_material.TableContainer, {
226
+ id: id,
227
+ sx: {
228
+ overflowX: 'visible'
229
+ }
230
+ }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
226
231
  sensors: sensors,
227
232
  onDragEnd: handleDragEnd
228
233
  }, /*#__PURE__*/_react.default.createElement(_material.Table, {
@@ -292,7 +297,7 @@ function EnhancedTable(_ref) {
292
297
  index: index,
293
298
  row: row
294
299
  }));
295
- })))), showPagination && /*#__PURE__*/_react.default.createElement(_material.Box, {
300
+ }))))), showPagination && /*#__PURE__*/_react.default.createElement(_material.Box, {
296
301
  display: "flex",
297
302
  alignItems: "center",
298
303
  justifyContent: "flex-end",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@terraware/web-components",
3
- "version": "1.0.47",
3
+ "version": "1.0.48",
4
4
  "author": "Terraformation Inc.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {