@madgex/design-system 1.16.7 → 1.17.0
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/dist/_tokens/css/_tokens.css +16 -1
- package/dist/_tokens/js/_tokens-module.js +318 -1
- package/dist/_tokens/scss/_tokens.scss +39 -1
- package/dist/css/index.css +22 -4
- package/package.json +1 -1
- package/src/helpers/message/README.md +9 -0
- package/src/helpers/message/message.njk +4 -0
- package/src/scss/core/__index.scss +1 -0
- package/src/scss/core/_message.scss +23 -0
- package/src/tokens/color.json +59 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Thu, 18 Jul 2019 11:
|
|
3
|
+
* Generated on Thu, 18 Jul 2019 11:38:18 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -19,6 +19,21 @@
|
|
|
19
19
|
--mds-color-brand-3-lightest: #e8fcfb;
|
|
20
20
|
--mds-color-brand-3-dark: #119389;
|
|
21
21
|
--mds-color-brand-3-darkest: #063733;
|
|
22
|
+
--mds-color-status-error-base: #e1021d;
|
|
23
|
+
--mds-color-status-error-light: #fd0826;
|
|
24
|
+
--mds-color-status-error-lightest: #ffe3e6;
|
|
25
|
+
--mds-color-status-error-dark: #d0021b;
|
|
26
|
+
--mds-color-status-error-darkest: #ae0216;
|
|
27
|
+
--mds-color-status-success-base: #5ba927;
|
|
28
|
+
--mds-color-status-success-light: #6ac52d;
|
|
29
|
+
--mds-color-status-success-lightest: #f0faea;
|
|
30
|
+
--mds-color-status-success-dark: #549b24;
|
|
31
|
+
--mds-color-status-success-darkest: #45801d;
|
|
32
|
+
--mds-color-status-info-base: #ffb411;
|
|
33
|
+
--mds-color-status-info-light: #ffc442;
|
|
34
|
+
--mds-color-status-info-lightest: #fff7e5;
|
|
35
|
+
--mds-color-status-info-dark: #f4aa08;
|
|
36
|
+
--mds-color-status-info-darkest: #d99500;
|
|
22
37
|
--mds-color-background-body: #ffffff;
|
|
23
38
|
--mds-color-background-site-container: #f8f8f8;
|
|
24
39
|
--mds-color-background-surface: #ffffff;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Thu, 18 Jul 2019 11:
|
|
3
|
+
* Generated on Thu, 18 Jul 2019 11:38:18 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
module.exports = {
|
|
@@ -322,6 +322,323 @@ module.exports = {
|
|
|
322
322
|
}
|
|
323
323
|
}
|
|
324
324
|
},
|
|
325
|
+
"status": {
|
|
326
|
+
"error": {
|
|
327
|
+
"base": {
|
|
328
|
+
"value": "#e1021d",
|
|
329
|
+
"original": {
|
|
330
|
+
"value": "#e1021d"
|
|
331
|
+
},
|
|
332
|
+
"name": "MdsColorStatusErrorBase",
|
|
333
|
+
"attributes": {
|
|
334
|
+
"category": "color",
|
|
335
|
+
"type": "status",
|
|
336
|
+
"item": "error",
|
|
337
|
+
"subitem": "base"
|
|
338
|
+
},
|
|
339
|
+
"path": [
|
|
340
|
+
"color",
|
|
341
|
+
"status",
|
|
342
|
+
"error",
|
|
343
|
+
"base"
|
|
344
|
+
]
|
|
345
|
+
},
|
|
346
|
+
"light": {
|
|
347
|
+
"value": "#fd0826",
|
|
348
|
+
"scssColorFunction": "lighten($mds-color-status-error-base,10%)",
|
|
349
|
+
"original": {
|
|
350
|
+
"value": "#fd0826",
|
|
351
|
+
"scssColorFunction": "lighten($mds-color-status-error-base,10%)"
|
|
352
|
+
},
|
|
353
|
+
"name": "MdsColorStatusErrorLight",
|
|
354
|
+
"attributes": {
|
|
355
|
+
"category": "color",
|
|
356
|
+
"type": "status",
|
|
357
|
+
"item": "error",
|
|
358
|
+
"subitem": "light"
|
|
359
|
+
},
|
|
360
|
+
"path": [
|
|
361
|
+
"color",
|
|
362
|
+
"status",
|
|
363
|
+
"error",
|
|
364
|
+
"light"
|
|
365
|
+
]
|
|
366
|
+
},
|
|
367
|
+
"lightest": {
|
|
368
|
+
"value": "#ffe3e6",
|
|
369
|
+
"scssColorFunction": "lighten($mds-color-status-error-base,(95% - lightness($mds-color-status-error-base)))",
|
|
370
|
+
"original": {
|
|
371
|
+
"value": "#ffe3e6",
|
|
372
|
+
"scssColorFunction": "lighten($mds-color-status-error-base,(95% - lightness($mds-color-status-error-base)))"
|
|
373
|
+
},
|
|
374
|
+
"name": "MdsColorStatusErrorLightest",
|
|
375
|
+
"attributes": {
|
|
376
|
+
"category": "color",
|
|
377
|
+
"type": "status",
|
|
378
|
+
"item": "error",
|
|
379
|
+
"subitem": "lightest"
|
|
380
|
+
},
|
|
381
|
+
"path": [
|
|
382
|
+
"color",
|
|
383
|
+
"status",
|
|
384
|
+
"error",
|
|
385
|
+
"lightest"
|
|
386
|
+
]
|
|
387
|
+
},
|
|
388
|
+
"dark": {
|
|
389
|
+
"value": "#d0021b",
|
|
390
|
+
"scssColorFunction": "darken($mds-color-status-error-base,10%)",
|
|
391
|
+
"original": {
|
|
392
|
+
"value": "#d0021b",
|
|
393
|
+
"scssColorFunction": "darken($mds-color-status-error-base,10%)"
|
|
394
|
+
},
|
|
395
|
+
"name": "MdsColorStatusErrorDark",
|
|
396
|
+
"attributes": {
|
|
397
|
+
"category": "color",
|
|
398
|
+
"type": "status",
|
|
399
|
+
"item": "error",
|
|
400
|
+
"subitem": "dark"
|
|
401
|
+
},
|
|
402
|
+
"path": [
|
|
403
|
+
"color",
|
|
404
|
+
"status",
|
|
405
|
+
"error",
|
|
406
|
+
"dark"
|
|
407
|
+
]
|
|
408
|
+
},
|
|
409
|
+
"darkest": {
|
|
410
|
+
"value": "#ae0216",
|
|
411
|
+
"scssColorFunction": "darken($mds-color-status-error-base,(lightness($mds-color-status-error-base) - 12%))",
|
|
412
|
+
"original": {
|
|
413
|
+
"value": "#ae0216",
|
|
414
|
+
"scssColorFunction": "darken($mds-color-status-error-base,(lightness($mds-color-status-error-base) - 12%))"
|
|
415
|
+
},
|
|
416
|
+
"name": "MdsColorStatusErrorDarkest",
|
|
417
|
+
"attributes": {
|
|
418
|
+
"category": "color",
|
|
419
|
+
"type": "status",
|
|
420
|
+
"item": "error",
|
|
421
|
+
"subitem": "darkest"
|
|
422
|
+
},
|
|
423
|
+
"path": [
|
|
424
|
+
"color",
|
|
425
|
+
"status",
|
|
426
|
+
"error",
|
|
427
|
+
"darkest"
|
|
428
|
+
]
|
|
429
|
+
}
|
|
430
|
+
},
|
|
431
|
+
"success": {
|
|
432
|
+
"base": {
|
|
433
|
+
"value": "#5ba927",
|
|
434
|
+
"original": {
|
|
435
|
+
"value": "#5ba927"
|
|
436
|
+
},
|
|
437
|
+
"name": "MdsColorStatusSuccessBase",
|
|
438
|
+
"attributes": {
|
|
439
|
+
"category": "color",
|
|
440
|
+
"type": "status",
|
|
441
|
+
"item": "success",
|
|
442
|
+
"subitem": "base"
|
|
443
|
+
},
|
|
444
|
+
"path": [
|
|
445
|
+
"color",
|
|
446
|
+
"status",
|
|
447
|
+
"success",
|
|
448
|
+
"base"
|
|
449
|
+
]
|
|
450
|
+
},
|
|
451
|
+
"light": {
|
|
452
|
+
"value": "#6ac52d",
|
|
453
|
+
"scssColorFunction": "lighten($mds-color-status-success-base,10%)",
|
|
454
|
+
"original": {
|
|
455
|
+
"value": "#6ac52d",
|
|
456
|
+
"scssColorFunction": "lighten($mds-color-status-success-base,10%)"
|
|
457
|
+
},
|
|
458
|
+
"name": "MdsColorStatusSuccessLight",
|
|
459
|
+
"attributes": {
|
|
460
|
+
"category": "color",
|
|
461
|
+
"type": "status",
|
|
462
|
+
"item": "success",
|
|
463
|
+
"subitem": "light"
|
|
464
|
+
},
|
|
465
|
+
"path": [
|
|
466
|
+
"color",
|
|
467
|
+
"status",
|
|
468
|
+
"success",
|
|
469
|
+
"light"
|
|
470
|
+
]
|
|
471
|
+
},
|
|
472
|
+
"lightest": {
|
|
473
|
+
"value": "#f0faea",
|
|
474
|
+
"scssColorFunction": "lighten($mds-color-status-success-base,(95% - lightness($mds-color-status-success-base)))",
|
|
475
|
+
"original": {
|
|
476
|
+
"value": "#f0faea",
|
|
477
|
+
"scssColorFunction": "lighten($mds-color-status-success-base,(95% - lightness($mds-color-status-success-base)))"
|
|
478
|
+
},
|
|
479
|
+
"name": "MdsColorStatusSuccessLightest",
|
|
480
|
+
"attributes": {
|
|
481
|
+
"category": "color",
|
|
482
|
+
"type": "status",
|
|
483
|
+
"item": "success",
|
|
484
|
+
"subitem": "lightest"
|
|
485
|
+
},
|
|
486
|
+
"path": [
|
|
487
|
+
"color",
|
|
488
|
+
"status",
|
|
489
|
+
"success",
|
|
490
|
+
"lightest"
|
|
491
|
+
]
|
|
492
|
+
},
|
|
493
|
+
"dark": {
|
|
494
|
+
"value": "#549b24",
|
|
495
|
+
"scssColorFunction": "darken($mds-color-status-success-base,10%)",
|
|
496
|
+
"original": {
|
|
497
|
+
"value": "#549b24",
|
|
498
|
+
"scssColorFunction": "darken($mds-color-status-success-base,10%)"
|
|
499
|
+
},
|
|
500
|
+
"name": "MdsColorStatusSuccessDark",
|
|
501
|
+
"attributes": {
|
|
502
|
+
"category": "color",
|
|
503
|
+
"type": "status",
|
|
504
|
+
"item": "success",
|
|
505
|
+
"subitem": "dark"
|
|
506
|
+
},
|
|
507
|
+
"path": [
|
|
508
|
+
"color",
|
|
509
|
+
"status",
|
|
510
|
+
"success",
|
|
511
|
+
"dark"
|
|
512
|
+
]
|
|
513
|
+
},
|
|
514
|
+
"darkest": {
|
|
515
|
+
"value": "#45801d",
|
|
516
|
+
"scssColorFunction": "darken($mds-color-status-success-base,(lightness($mds-color-status-success-base) - 12%))",
|
|
517
|
+
"original": {
|
|
518
|
+
"value": "#45801d",
|
|
519
|
+
"scssColorFunction": "darken($mds-color-status-success-base,(lightness($mds-color-status-success-base) - 12%))"
|
|
520
|
+
},
|
|
521
|
+
"name": "MdsColorStatusSuccessDarkest",
|
|
522
|
+
"attributes": {
|
|
523
|
+
"category": "color",
|
|
524
|
+
"type": "status",
|
|
525
|
+
"item": "success",
|
|
526
|
+
"subitem": "darkest"
|
|
527
|
+
},
|
|
528
|
+
"path": [
|
|
529
|
+
"color",
|
|
530
|
+
"status",
|
|
531
|
+
"success",
|
|
532
|
+
"darkest"
|
|
533
|
+
]
|
|
534
|
+
}
|
|
535
|
+
},
|
|
536
|
+
"info": {
|
|
537
|
+
"base": {
|
|
538
|
+
"value": "#ffb411",
|
|
539
|
+
"original": {
|
|
540
|
+
"value": "#ffb411"
|
|
541
|
+
},
|
|
542
|
+
"name": "MdsColorStatusInfoBase",
|
|
543
|
+
"attributes": {
|
|
544
|
+
"category": "color",
|
|
545
|
+
"type": "status",
|
|
546
|
+
"item": "info",
|
|
547
|
+
"subitem": "base"
|
|
548
|
+
},
|
|
549
|
+
"path": [
|
|
550
|
+
"color",
|
|
551
|
+
"status",
|
|
552
|
+
"info",
|
|
553
|
+
"base"
|
|
554
|
+
]
|
|
555
|
+
},
|
|
556
|
+
"light": {
|
|
557
|
+
"value": "#ffc442",
|
|
558
|
+
"scssColorFunction": "lighten($mds-color-status-info-base,10%)",
|
|
559
|
+
"original": {
|
|
560
|
+
"value": "#ffc442",
|
|
561
|
+
"scssColorFunction": "lighten($mds-color-status-info-base,10%)"
|
|
562
|
+
},
|
|
563
|
+
"name": "MdsColorStatusInfoLight",
|
|
564
|
+
"attributes": {
|
|
565
|
+
"category": "color",
|
|
566
|
+
"type": "status",
|
|
567
|
+
"item": "info",
|
|
568
|
+
"subitem": "light"
|
|
569
|
+
},
|
|
570
|
+
"path": [
|
|
571
|
+
"color",
|
|
572
|
+
"status",
|
|
573
|
+
"info",
|
|
574
|
+
"light"
|
|
575
|
+
]
|
|
576
|
+
},
|
|
577
|
+
"lightest": {
|
|
578
|
+
"value": "#fff7e5",
|
|
579
|
+
"scssColorFunction": "lighten($mds-color-status-info-base,(95% - lightness($mds-color-status-info-base)))",
|
|
580
|
+
"original": {
|
|
581
|
+
"value": "#fff7e5",
|
|
582
|
+
"scssColorFunction": "lighten($mds-color-status-info-base,(95% - lightness($mds-color-status-info-base)))"
|
|
583
|
+
},
|
|
584
|
+
"name": "MdsColorStatusInfoLightest",
|
|
585
|
+
"attributes": {
|
|
586
|
+
"category": "color",
|
|
587
|
+
"type": "status",
|
|
588
|
+
"item": "info",
|
|
589
|
+
"subitem": "lightest"
|
|
590
|
+
},
|
|
591
|
+
"path": [
|
|
592
|
+
"color",
|
|
593
|
+
"status",
|
|
594
|
+
"info",
|
|
595
|
+
"lightest"
|
|
596
|
+
]
|
|
597
|
+
},
|
|
598
|
+
"dark": {
|
|
599
|
+
"value": "#f4aa08",
|
|
600
|
+
"scssColorFunction": "darken($mds-color-status-info-base,10%)",
|
|
601
|
+
"original": {
|
|
602
|
+
"value": "#f4aa08",
|
|
603
|
+
"scssColorFunction": "darken($mds-color-status-info-base,10%)"
|
|
604
|
+
},
|
|
605
|
+
"name": "MdsColorStatusInfoDark",
|
|
606
|
+
"attributes": {
|
|
607
|
+
"category": "color",
|
|
608
|
+
"type": "status",
|
|
609
|
+
"item": "info",
|
|
610
|
+
"subitem": "dark"
|
|
611
|
+
},
|
|
612
|
+
"path": [
|
|
613
|
+
"color",
|
|
614
|
+
"status",
|
|
615
|
+
"info",
|
|
616
|
+
"dark"
|
|
617
|
+
]
|
|
618
|
+
},
|
|
619
|
+
"darkest": {
|
|
620
|
+
"value": "#d99500",
|
|
621
|
+
"scssColorFunction": "darken($mds-color-status-info-base,(lightness($mds-color-status-info-base) - 12%))",
|
|
622
|
+
"original": {
|
|
623
|
+
"value": "#d99500",
|
|
624
|
+
"scssColorFunction": "darken($mds-color-status-info-base,(lightness($mds-color-status-info-base) - 12%))"
|
|
625
|
+
},
|
|
626
|
+
"name": "MdsColorStatusInfoDarkest",
|
|
627
|
+
"attributes": {
|
|
628
|
+
"category": "color",
|
|
629
|
+
"type": "status",
|
|
630
|
+
"item": "info",
|
|
631
|
+
"subitem": "darkest"
|
|
632
|
+
},
|
|
633
|
+
"path": [
|
|
634
|
+
"color",
|
|
635
|
+
"status",
|
|
636
|
+
"info",
|
|
637
|
+
"darkest"
|
|
638
|
+
]
|
|
639
|
+
}
|
|
640
|
+
}
|
|
641
|
+
},
|
|
325
642
|
"background": {
|
|
326
643
|
"body": {
|
|
327
644
|
"value": "#ffffff",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
3
|
Do not edit directly
|
|
4
|
-
Generated on Thu, 18 Jul 2019 11:
|
|
4
|
+
Generated on Thu, 18 Jul 2019 11:38:18 GMT
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
$mds-color-brand-1-base: #1b75bb !default;
|
|
@@ -19,6 +19,21 @@ $mds-color-brand-3-light: lighten($mds-color-brand-3-base,10%) !default;
|
|
|
19
19
|
$mds-color-brand-3-lightest: lighten($mds-color-brand-3-base,(95% - lightness($mds-color-brand-3-base))) !default;
|
|
20
20
|
$mds-color-brand-3-dark: darken($mds-color-brand-3-base,10%) !default;
|
|
21
21
|
$mds-color-brand-3-darkest: darken($mds-color-brand-3-base,(lightness($mds-color-brand-3-base) - 12%)) !default;
|
|
22
|
+
$mds-color-status-error-base: #e1021d !default;
|
|
23
|
+
$mds-color-status-error-light: lighten($mds-color-status-error-base,10%) !default;
|
|
24
|
+
$mds-color-status-error-lightest: lighten($mds-color-status-error-base,(95% - lightness($mds-color-status-error-base))) !default;
|
|
25
|
+
$mds-color-status-error-dark: darken($mds-color-status-error-base,10%) !default;
|
|
26
|
+
$mds-color-status-error-darkest: darken($mds-color-status-error-base,(lightness($mds-color-status-error-base) - 12%)) !default;
|
|
27
|
+
$mds-color-status-success-base: #5ba927 !default;
|
|
28
|
+
$mds-color-status-success-light: lighten($mds-color-status-success-base,10%) !default;
|
|
29
|
+
$mds-color-status-success-lightest: lighten($mds-color-status-success-base,(95% - lightness($mds-color-status-success-base))) !default;
|
|
30
|
+
$mds-color-status-success-dark: darken($mds-color-status-success-base,10%) !default;
|
|
31
|
+
$mds-color-status-success-darkest: darken($mds-color-status-success-base,(lightness($mds-color-status-success-base) - 12%)) !default;
|
|
32
|
+
$mds-color-status-info-base: #ffb411 !default;
|
|
33
|
+
$mds-color-status-info-light: lighten($mds-color-status-info-base,10%) !default;
|
|
34
|
+
$mds-color-status-info-lightest: lighten($mds-color-status-info-base,(95% - lightness($mds-color-status-info-base))) !default;
|
|
35
|
+
$mds-color-status-info-dark: darken($mds-color-status-info-base,10%) !default;
|
|
36
|
+
$mds-color-status-info-darkest: darken($mds-color-status-info-base,(lightness($mds-color-status-info-base) - 12%)) !default;
|
|
22
37
|
$mds-color-background-body: #ffffff !default;
|
|
23
38
|
$mds-color-background-site-container: #f8f8f8 !default;
|
|
24
39
|
$mds-color-background-surface: #ffffff !default;
|
|
@@ -155,6 +170,29 @@ $tokens: (
|
|
|
155
170
|
'darkest': $mds-color-brand-3-darkest
|
|
156
171
|
)
|
|
157
172
|
),
|
|
173
|
+
'status': (
|
|
174
|
+
'error': (
|
|
175
|
+
'base': $mds-color-status-error-base,
|
|
176
|
+
'light': $mds-color-status-error-light,
|
|
177
|
+
'lightest': $mds-color-status-error-lightest,
|
|
178
|
+
'dark': $mds-color-status-error-dark,
|
|
179
|
+
'darkest': $mds-color-status-error-darkest
|
|
180
|
+
),
|
|
181
|
+
'success': (
|
|
182
|
+
'base': $mds-color-status-success-base,
|
|
183
|
+
'light': $mds-color-status-success-light,
|
|
184
|
+
'lightest': $mds-color-status-success-lightest,
|
|
185
|
+
'dark': $mds-color-status-success-dark,
|
|
186
|
+
'darkest': $mds-color-status-success-darkest
|
|
187
|
+
),
|
|
188
|
+
'info': (
|
|
189
|
+
'base': $mds-color-status-info-base,
|
|
190
|
+
'light': $mds-color-status-info-light,
|
|
191
|
+
'lightest': $mds-color-status-info-lightest,
|
|
192
|
+
'dark': $mds-color-status-info-dark,
|
|
193
|
+
'darkest': $mds-color-status-info-darkest
|
|
194
|
+
)
|
|
195
|
+
),
|
|
158
196
|
'background': (
|
|
159
197
|
'body': $mds-color-background-body,
|
|
160
198
|
'site-container': $mds-color-background-site-container,
|
package/dist/css/index.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
2
|
Do not edit directly
|
|
3
|
-
Generated on Thu, 18 Jul 2019 11:
|
|
3
|
+
Generated on Thu, 18 Jul 2019 11:38:18 GMT
|
|
4
4
|
*/
|
|
5
5
|
html,
|
|
6
6
|
body,
|
|
@@ -1382,6 +1382,24 @@ body {
|
|
|
1382
1382
|
}
|
|
1383
1383
|
}
|
|
1384
1384
|
|
|
1385
|
+
.mds-message.mds-message--error {
|
|
1386
|
+
color: #3d0108;
|
|
1387
|
+
background-color: #ffe6e9;
|
|
1388
|
+
border-color: #e1021d;
|
|
1389
|
+
}
|
|
1390
|
+
|
|
1391
|
+
.mds-message.mds-message--success {
|
|
1392
|
+
color: #1b320b;
|
|
1393
|
+
background-color: #f1faea;
|
|
1394
|
+
border-color: #5ba927;
|
|
1395
|
+
}
|
|
1396
|
+
|
|
1397
|
+
.mds-message.mds-message--info {
|
|
1398
|
+
color: #3d2a00;
|
|
1399
|
+
background-color: #fff7e6;
|
|
1400
|
+
border-color: #ffb411;
|
|
1401
|
+
}
|
|
1402
|
+
|
|
1385
1403
|
.mds-icon {
|
|
1386
1404
|
display: inline-block;
|
|
1387
1405
|
width: 1em;
|
|
@@ -1759,7 +1777,7 @@ body {
|
|
|
1759
1777
|
margin: 8px;
|
|
1760
1778
|
}
|
|
1761
1779
|
|
|
1762
|
-
.mds-padding-b3 {
|
|
1780
|
+
.mds-padding-b3, .mds-message {
|
|
1763
1781
|
padding: 12px;
|
|
1764
1782
|
}
|
|
1765
1783
|
|
|
@@ -4351,7 +4369,7 @@ body {
|
|
|
4351
4369
|
}
|
|
4352
4370
|
}
|
|
4353
4371
|
|
|
4354
|
-
.mds-border, .mds-surface {
|
|
4372
|
+
.mds-border, .mds-surface, .mds-message {
|
|
4355
4373
|
border: 1px solid #dddddd;
|
|
4356
4374
|
}
|
|
4357
4375
|
|
|
@@ -4559,7 +4577,7 @@ body {
|
|
|
4559
4577
|
}
|
|
4560
4578
|
}
|
|
4561
4579
|
|
|
4562
|
-
.mds-border-radius, .mds-surface {
|
|
4580
|
+
.mds-border-radius, .mds-surface, .mds-message {
|
|
4563
4581
|
border-radius: 4px;
|
|
4564
4582
|
}
|
|
4565
4583
|
|
package/package.json
CHANGED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<p class="mds-message" role="alert">This is a message</p>
|
|
2
|
+
<p class="mds-message mds-message--error" role="alert">This is an error message</p>
|
|
3
|
+
<p class="mds-message mds-message--success" role="alert">This is a success message</p>
|
|
4
|
+
<p class="mds-message mds-message--info" role="alert">This is an info message</p>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
.mds-message{
|
|
2
|
+
@extend .mds-padding-b3;
|
|
3
|
+
@extend .mds-border-radius;
|
|
4
|
+
@extend .mds-border;
|
|
5
|
+
|
|
6
|
+
&.mds-message--error{
|
|
7
|
+
color: $mds-color-status-error-darkest;
|
|
8
|
+
background-color: $mds-color-status-error-lightest;
|
|
9
|
+
border-color: $mds-color-status-error-base;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
&.mds-message--success{
|
|
13
|
+
color: $mds-color-status-success-darkest;
|
|
14
|
+
background-color: $mds-color-status-success-lightest;
|
|
15
|
+
border-color: $mds-color-status-success-base;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&.mds-message--info{
|
|
19
|
+
color: $mds-color-status-info-darkest;
|
|
20
|
+
background-color: $mds-color-status-info-lightest;
|
|
21
|
+
border-color: $mds-color-status-info-base;
|
|
22
|
+
}
|
|
23
|
+
}
|
package/src/tokens/color.json
CHANGED
|
@@ -59,6 +59,65 @@
|
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
},
|
|
62
|
+
"status": {
|
|
63
|
+
"error": {
|
|
64
|
+
"base": { "value": "#e1021d" },
|
|
65
|
+
"light": {
|
|
66
|
+
"value": "#fd0826",
|
|
67
|
+
"scssColorFunction": "lighten($mds-color-status-error-base,10%)"
|
|
68
|
+
},
|
|
69
|
+
"lightest": {
|
|
70
|
+
"value": "#ffe3e6",
|
|
71
|
+
"scssColorFunction": "lighten($mds-color-status-error-base,(95% - lightness($mds-color-status-error-base)))"
|
|
72
|
+
},
|
|
73
|
+
"dark": {
|
|
74
|
+
"value": "#d0021b",
|
|
75
|
+
"scssColorFunction": "darken($mds-color-status-error-base,10%)"
|
|
76
|
+
},
|
|
77
|
+
"darkest": {
|
|
78
|
+
"value": "#ae0216",
|
|
79
|
+
"scssColorFunction": "darken($mds-color-status-error-base,(lightness($mds-color-status-error-base) - 12%))"
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
"success": {
|
|
83
|
+
"base": { "value": "#5ba927" },
|
|
84
|
+
"light": {
|
|
85
|
+
"value": "#6ac52d",
|
|
86
|
+
"scssColorFunction": "lighten($mds-color-status-success-base,10%)"
|
|
87
|
+
},
|
|
88
|
+
"lightest": {
|
|
89
|
+
"value": "#f0faea",
|
|
90
|
+
"scssColorFunction": "lighten($mds-color-status-success-base,(95% - lightness($mds-color-status-success-base)))"
|
|
91
|
+
},
|
|
92
|
+
"dark": {
|
|
93
|
+
"value": "#549b24",
|
|
94
|
+
"scssColorFunction": "darken($mds-color-status-success-base,10%)"
|
|
95
|
+
},
|
|
96
|
+
"darkest": {
|
|
97
|
+
"value": "#45801d",
|
|
98
|
+
"scssColorFunction": "darken($mds-color-status-success-base,(lightness($mds-color-status-success-base) - 12%))"
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
"info": {
|
|
102
|
+
"base": { "value": "#ffb411" },
|
|
103
|
+
"light": {
|
|
104
|
+
"value": "#ffc442",
|
|
105
|
+
"scssColorFunction": "lighten($mds-color-status-info-base,10%)"
|
|
106
|
+
},
|
|
107
|
+
"lightest": {
|
|
108
|
+
"value": "#fff7e5",
|
|
109
|
+
"scssColorFunction": "lighten($mds-color-status-info-base,(95% - lightness($mds-color-status-info-base)))"
|
|
110
|
+
},
|
|
111
|
+
"dark": {
|
|
112
|
+
"value": "#f4aa08",
|
|
113
|
+
"scssColorFunction": "darken($mds-color-status-info-base,10%)"
|
|
114
|
+
},
|
|
115
|
+
"darkest": {
|
|
116
|
+
"value": "#d99500",
|
|
117
|
+
"scssColorFunction": "darken($mds-color-status-info-base,(lightness($mds-color-status-info-base) - 12%))"
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
},
|
|
62
121
|
"background": {
|
|
63
122
|
"body": { "value": "{color.neutral.white.value}" },
|
|
64
123
|
"site-container": { "value": "{color.neutral.lightest.value}" },
|