@terraware/web-components 1.0.46 → 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.
- package/components/Autocomplete/styles.scss +3 -2
- package/components/Button/styles.scss +59 -58
- package/components/DatePicker/styles.scss +9 -8
- package/components/DialogBox/styles.scss +7 -6
- package/components/ErrorBox/styles.scss +5 -4
- package/components/Message/styles.scss +31 -30
- package/components/Navbar/styles.scss +21 -20
- package/components/ProgressCircle/styles.scss +6 -5
- package/components/Select/styles.scss +37 -36
- package/components/Textfield/styles.scss +30 -29
- package/components/table/index.d.ts.map +1 -1
- package/components/table/index.js +7 -2
- package/license-report.html +1 -1
- package/package.json +1 -1
- package/stories/Theme.stories.d.ts.map +1 -1
- package/style-dictionary-dist2/TerrawareTheme2.d.ts +355 -0
- package/style-dictionary-dist2/TerrawareTheme2.d.ts.map +1 -0
- package/style-dictionary-dist2/TerrawareTheme2.js +186 -0
- package/style-dictionary-dist2/terraware.scss +171 -0
- package/theme.d.ts.map +1 -1
- package/theme.js +3 -1
|
@@ -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-
|
|
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-
|
|
26
|
+
border: 1px solid $tw-clr-bg-info;
|
|
26
27
|
position: unset;
|
|
27
28
|
padding: 0;
|
|
28
29
|
}
|
|
@@ -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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
193
|
-
color: $tw-clr-
|
|
193
|
+
background-color: $tw-clr-bg-brand;
|
|
194
|
+
color: $tw-clr-txt-on-brand;
|
|
194
195
|
|
|
195
196
|
svg {
|
|
196
|
-
fill: $tw-clr-
|
|
197
|
+
fill: $tw-clr-txt-on-brand;
|
|
197
198
|
}
|
|
198
199
|
|
|
199
200
|
&:hover {
|
|
200
|
-
background: $tw-clr-
|
|
201
|
+
background: $tw-clr-bg-brand-hover;
|
|
201
202
|
}
|
|
202
203
|
|
|
203
204
|
&:active {
|
|
204
|
-
background-color: $tw-clr-
|
|
205
|
+
background-color: $tw-clr-bg-brand-active;
|
|
205
206
|
}
|
|
206
207
|
|
|
207
208
|
&:disabled {
|
|
208
|
-
background-color: rgba($tw-clr-
|
|
209
|
-
color: rgba($tw-clr-
|
|
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-
|
|
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-
|
|
218
|
-
color: $tw-clr-
|
|
218
|
+
background-color: $tw-clr-bg-brand-ghost;
|
|
219
|
+
color: $tw-clr-txt-brand;
|
|
219
220
|
svg {
|
|
220
|
-
fill: $tw-clr-
|
|
221
|
+
fill: $tw-clr-txt-brand;
|
|
221
222
|
}
|
|
222
223
|
|
|
223
|
-
border: $tw-sz-btn-stroke solid $tw-clr-
|
|
224
|
+
border: $tw-sz-btn-stroke solid $tw-clr-brdr-brand;
|
|
224
225
|
&:hover {
|
|
225
|
-
background: $tw-clr-
|
|
226
|
+
background: $tw-clr-bg-brand-ghost-hover;
|
|
226
227
|
}
|
|
227
228
|
|
|
228
229
|
&:active {
|
|
229
|
-
background-color: $tw-clr-
|
|
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-
|
|
271
|
-
border: $tw-sz-btn-stroke solid rgba($tw-clr-
|
|
272
|
-
color: rgba($tw-clr-
|
|
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-
|
|
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-
|
|
281
|
-
color: $tw-clr-
|
|
281
|
+
background-color: $tw-clr-bg-tertiary;
|
|
282
|
+
color: $tw-clr-txt;
|
|
282
283
|
svg {
|
|
283
|
-
fill: $tw-clr-
|
|
284
|
+
fill: $tw-clr-txt;
|
|
284
285
|
}
|
|
285
286
|
&:hover {
|
|
286
|
-
background: $tw-clr-
|
|
287
|
+
background: $tw-clr-bg-tertiary-hover;
|
|
287
288
|
}
|
|
288
289
|
|
|
289
290
|
&:active {
|
|
290
|
-
background-color: $tw-clr-
|
|
291
|
+
background-color: $tw-clr-bg-tertiary-active;
|
|
291
292
|
}
|
|
292
293
|
|
|
293
294
|
&:disabled {
|
|
294
|
-
background-color: rgba($tw-clr-
|
|
295
|
-
color: rgba($tw-clr-
|
|
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-
|
|
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-
|
|
304
|
-
color: $tw-clr-
|
|
304
|
+
background-color: $tw-clr-bg-ghost;
|
|
305
|
+
color: $tw-clr-txt;
|
|
305
306
|
svg {
|
|
306
|
-
fill: $tw-clr-
|
|
307
|
+
fill: $tw-clr-txt;
|
|
307
308
|
}
|
|
308
|
-
border: $tw-sz-btn-stroke solid $tw-clr-
|
|
309
|
+
border: $tw-sz-btn-stroke solid $tw-clr-brdr;
|
|
309
310
|
&:hover {
|
|
310
|
-
background: $tw-clr-
|
|
311
|
+
background: $tw-clr-bg-ghost-hover;
|
|
311
312
|
}
|
|
312
313
|
|
|
313
314
|
&:active {
|
|
314
|
-
background-color: $tw-clr-
|
|
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-
|
|
328
|
-
border: $tw-sz-btn-stroke solid rgba($tw-clr-
|
|
329
|
-
color: rgba($tw-clr-
|
|
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-
|
|
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-
|
|
366
|
-
color: $tw-clr-
|
|
366
|
+
background-color: $tw-clr-bg-danger;
|
|
367
|
+
color: $tw-clr-txt-on-danger;
|
|
367
368
|
svg {
|
|
368
|
-
fill: $tw-clr-
|
|
369
|
+
fill: $tw-clr-txt-on-danger;
|
|
369
370
|
}
|
|
370
371
|
&:hover {
|
|
371
|
-
background: $tw-clr-
|
|
372
|
+
background: $tw-clr-bg-danger-hover;
|
|
372
373
|
}
|
|
373
374
|
|
|
374
375
|
&:active {
|
|
375
|
-
background-color: $tw-clr-
|
|
376
|
+
background-color: $tw-clr-bg-danger-active;
|
|
376
377
|
}
|
|
377
378
|
|
|
378
379
|
&:disabled {
|
|
379
|
-
background-color: rgba($tw-clr-
|
|
380
|
-
color: rgba($tw-clr-
|
|
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-
|
|
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-
|
|
389
|
-
color: $tw-clr-
|
|
389
|
+
background-color: $tw-clr-bg-danger-ghost;
|
|
390
|
+
color: $tw-clr-txt-danger;
|
|
390
391
|
svg {
|
|
391
|
-
fill: $tw-clr-
|
|
392
|
+
fill: $tw-clr-txt-danger;
|
|
392
393
|
}
|
|
393
|
-
border: $tw-sz-btn-stroke solid $tw-clr-
|
|
394
|
+
border: $tw-sz-btn-stroke solid $tw-clr-brdr-danger;
|
|
394
395
|
&:hover {
|
|
395
|
-
background: $tw-clr-
|
|
396
|
+
background: $tw-clr-bg-danger-ghost-hover;
|
|
396
397
|
}
|
|
397
398
|
|
|
398
399
|
&:active {
|
|
399
|
-
background-color: $tw-clr-
|
|
400
|
+
background-color: $tw-clr-bg-danger-ghost-active;
|
|
400
401
|
}
|
|
401
402
|
|
|
402
403
|
&:disabled {
|
|
403
|
-
background-color: rgba($tw-clr-
|
|
404
|
-
border: $tw-sz-btn-stroke solid rgba($tw-clr-
|
|
405
|
-
color: rgba($tw-clr-
|
|
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-
|
|
408
|
+
fill: rgba($tw-clr-txt-danger, 0.4);
|
|
408
409
|
}
|
|
409
410
|
}
|
|
410
411
|
|
|
@@ -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-
|
|
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-
|
|
27
|
-
background-color: $tw-clr-
|
|
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-
|
|
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-
|
|
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-
|
|
49
|
+
color: $tw-clr-txt-danger;
|
|
49
50
|
width: 100%;
|
|
50
51
|
max-width: 100%;
|
|
51
52
|
|
|
52
53
|
&--icon {
|
|
53
|
-
fill: $tw-clr-
|
|
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-
|
|
63
|
+
border: 1px solid $tw-clr-bg-info;
|
|
63
64
|
position: unset;
|
|
64
65
|
}
|
|
65
66
|
|
|
@@ -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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
120
|
+
color: $tw-clr-txt;
|
|
120
121
|
width: 100%;
|
|
121
122
|
text-align: center;
|
|
122
123
|
}
|
|
@@ -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-
|
|
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-
|
|
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-
|
|
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-
|
|
62
|
+
fill: $tw-clr-txt-danger;
|
|
62
63
|
margin-right: $tw-spc-base-x-small;
|
|
63
64
|
}
|
|
@@ -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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
128
|
-
background-color: $tw-clr-
|
|
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-
|
|
131
|
+
fill:$tw-clr-bg-info;
|
|
131
132
|
}
|
|
132
133
|
}
|
|
133
|
-
border: 1px solid $tw-clr-
|
|
134
|
+
border: 1px solid $tw-clr-icn-secondary;
|
|
134
135
|
&.tw-message--toast {
|
|
135
|
-
box-shadow: 0 2px $tw-clr-
|
|
136
|
+
box-shadow: 0 2px $tw-clr-icn-secondary;
|
|
136
137
|
}
|
|
137
138
|
.tw-message--left-side {
|
|
138
|
-
background-color: $tw-clr-
|
|
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-
|
|
145
|
-
background-color: $tw-clr-
|
|
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-
|
|
149
|
+
fill: $tw-clr-bg-danger
|
|
149
150
|
}
|
|
150
151
|
}
|
|
151
|
-
border: 1px solid $tw-clr-
|
|
152
|
+
border: 1px solid $tw-clr-icn-danger;
|
|
152
153
|
&.tw-message--toast {
|
|
153
|
-
box-shadow: 0 2px $tw-clr-
|
|
154
|
+
box-shadow: 0 2px $tw-clr-icn-danger;
|
|
154
155
|
}
|
|
155
156
|
.tw-message--left-side {
|
|
156
|
-
background-color: $tw-clr-
|
|
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-
|
|
163
|
-
background-color: $tw-clr-
|
|
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-
|
|
167
|
+
fill: $tw-clr-bg-warning;
|
|
167
168
|
}
|
|
168
169
|
}
|
|
169
|
-
border: 1px solid $tw-clr-
|
|
170
|
+
border: 1px solid $tw-clr-icn-warning;
|
|
170
171
|
&.tw-message--toast {
|
|
171
|
-
box-shadow: 0 2px $tw-clr-
|
|
172
|
+
box-shadow: 0 2px $tw-clr-icn-warning;
|
|
172
173
|
}
|
|
173
174
|
.tw-message--left-side {
|
|
174
|
-
background-color: $tw-clr-
|
|
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-
|
|
181
|
-
background-color: $tw-clr-
|
|
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-
|
|
185
|
+
fill: $tw-clr-bg-success;
|
|
185
186
|
}
|
|
186
187
|
}
|
|
187
|
-
border: 1px solid $tw-clr-
|
|
188
|
+
border: 1px solid $tw-clr-icn-success;
|
|
188
189
|
&.tw-message--toast {
|
|
189
|
-
box-shadow: 0 2px $tw-clr-
|
|
190
|
+
box-shadow: 0 2px $tw-clr-icn-success;
|
|
190
191
|
}
|
|
191
192
|
.tw-message--left-side {
|
|
192
|
-
background-color: $tw-clr-
|
|
193
|
+
background-color: $tw-clr-icn-success;
|
|
193
194
|
}
|
|
194
195
|
}
|
|
195
196
|
|