@abgov/design-tokens 1.2.0 → 1.3.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/data/global-ddi.json +285 -0
- package/dist/tokens.css +149 -94
- package/dist/tokens.scss +149 -94
- package/lib/design-tokens.js +6 -0
- package/package.json +1 -1
package/data/global-ddi.json
CHANGED
|
@@ -509,6 +509,11 @@
|
|
|
509
509
|
}
|
|
510
510
|
},
|
|
511
511
|
"borderWidth": {
|
|
512
|
+
"none": {
|
|
513
|
+
"value": "0px",
|
|
514
|
+
"type": "borderWidth",
|
|
515
|
+
"description": "No border"
|
|
516
|
+
},
|
|
512
517
|
"s": {
|
|
513
518
|
"value": "1px",
|
|
514
519
|
"type": "borderWidth",
|
|
@@ -562,5 +567,285 @@
|
|
|
562
567
|
"type": "boxShadow",
|
|
563
568
|
"description": "Drop shadow for modals."
|
|
564
569
|
}
|
|
570
|
+
},
|
|
571
|
+
"button": {
|
|
572
|
+
"border-radius": {
|
|
573
|
+
"value": "{borderRadius.m.value}",
|
|
574
|
+
"type": "borderRadius",
|
|
575
|
+
"description": "Button border radius"
|
|
576
|
+
},
|
|
577
|
+
"text": {
|
|
578
|
+
"value": "{typography.button.default.value}",
|
|
579
|
+
"type": "fontFamily",
|
|
580
|
+
"description": "Button text style"
|
|
581
|
+
},
|
|
582
|
+
"padding-lr": {
|
|
583
|
+
"value": "{space.s.value}",
|
|
584
|
+
"type": "spacing",
|
|
585
|
+
"description": "Padding for the left and right sides of a regular button"
|
|
586
|
+
},
|
|
587
|
+
"padding-lr-compact": {
|
|
588
|
+
"value": "{space.xs.value}",
|
|
589
|
+
"type": "spacing",
|
|
590
|
+
"description": "Padding for the left and right sides of a compact button"
|
|
591
|
+
},
|
|
592
|
+
"height": {
|
|
593
|
+
"value": "2.625rem",
|
|
594
|
+
"type": "spacing",
|
|
595
|
+
"description": "Button regular height (42px)"
|
|
596
|
+
},
|
|
597
|
+
"height-compact": {
|
|
598
|
+
"value": "2rem",
|
|
599
|
+
"type": "spacing",
|
|
600
|
+
"description": "Button compact height (36px)"
|
|
601
|
+
},
|
|
602
|
+
"height-start": {
|
|
603
|
+
"value": "3.25rem",
|
|
604
|
+
"type": "spacing",
|
|
605
|
+
"description": "Height for the start button type (52px)"
|
|
606
|
+
}
|
|
607
|
+
},
|
|
608
|
+
"accordion": {
|
|
609
|
+
"color-bg-heading": {
|
|
610
|
+
"value": "{color.greyscale.100.value}",
|
|
611
|
+
"type": "color",
|
|
612
|
+
"description": "Background color of accordion heading"
|
|
613
|
+
},
|
|
614
|
+
"color-bg-content": {
|
|
615
|
+
"value": "{color.greyscale.white.value}",
|
|
616
|
+
"type": "color",
|
|
617
|
+
"description": "Background color of accordion content"
|
|
618
|
+
},
|
|
619
|
+
"color-heading": {
|
|
620
|
+
"value": "{color.text.default.value}",
|
|
621
|
+
"type": "color",
|
|
622
|
+
"description": "Color of accordion heading text"
|
|
623
|
+
},
|
|
624
|
+
"border": {
|
|
625
|
+
"value": "{borderWidth.s.value} solid {color.greyscale.200.value}",
|
|
626
|
+
"type": "border",
|
|
627
|
+
"description": "Border of accordion"
|
|
628
|
+
},
|
|
629
|
+
"border-radius": {
|
|
630
|
+
"value": "{borderRadius.m.value}",
|
|
631
|
+
"type": "borderRadius",
|
|
632
|
+
"description": "Border radius of accordion"
|
|
633
|
+
},
|
|
634
|
+
"padding-heading": {
|
|
635
|
+
"value": "{space.s.value} {space.m.value} {space.s.value} 0",
|
|
636
|
+
"type": "spacing",
|
|
637
|
+
"description": "Padding of accordion heading"
|
|
638
|
+
},
|
|
639
|
+
"heading-s": {
|
|
640
|
+
"value": "{typography.heading.s.value}",
|
|
641
|
+
"type": "fontFamily",
|
|
642
|
+
"description": "Typography of accordion heading"
|
|
643
|
+
},
|
|
644
|
+
"heading-m": {
|
|
645
|
+
"value": "{typography.heading.m.value}",
|
|
646
|
+
"type": "fontFamily",
|
|
647
|
+
"description": "Typography of accordion heading"
|
|
648
|
+
},
|
|
649
|
+
"padding-content-wide": {
|
|
650
|
+
"value": "{space.l.value} {space.l.value} {space.xl.value} 56px",
|
|
651
|
+
"type": "spacing",
|
|
652
|
+
"description": "Padding of accordion content"
|
|
653
|
+
},
|
|
654
|
+
"padding-content-narrow": {
|
|
655
|
+
"value": "{space.l.value}",
|
|
656
|
+
"type": "spacing",
|
|
657
|
+
"description": "Padding of accordion content"
|
|
658
|
+
},
|
|
659
|
+
"color-bg-heading-hover": {
|
|
660
|
+
"value": "{color.greyscale.200.value}",
|
|
661
|
+
"type": "color",
|
|
662
|
+
"description": "Background color of accordion heading on hover"
|
|
663
|
+
},
|
|
664
|
+
"color-heading-hover": {
|
|
665
|
+
"value": "{color.text.default.value}",
|
|
666
|
+
"type": "color",
|
|
667
|
+
"description": "Color of accordion heading text on hover"
|
|
668
|
+
}
|
|
669
|
+
},
|
|
670
|
+
"callout": {
|
|
671
|
+
"border-radius": {
|
|
672
|
+
"value": "{borderRadius.none.value}",
|
|
673
|
+
"type": "borderRadius",
|
|
674
|
+
"description": "Border radius of callout"
|
|
675
|
+
},
|
|
676
|
+
"l-border-width": {
|
|
677
|
+
"value": "{borderWidth.none.value}",
|
|
678
|
+
"type": "borderWidth",
|
|
679
|
+
"description": "Border width of callout"
|
|
680
|
+
},
|
|
681
|
+
"l-heading-size": {
|
|
682
|
+
"value": "{typography.heading.m.value}",
|
|
683
|
+
"type": "fontSizes",
|
|
684
|
+
"description": "Large heading size"
|
|
685
|
+
},
|
|
686
|
+
"l-text-size": {
|
|
687
|
+
"value": "{typography.body.m.value}",
|
|
688
|
+
"type": "fontSizes",
|
|
689
|
+
"description": "Large text size"
|
|
690
|
+
},
|
|
691
|
+
"l-content-padding": {
|
|
692
|
+
"value": "{space.l.value}",
|
|
693
|
+
"type": "spacing",
|
|
694
|
+
"description": "Large content padding"
|
|
695
|
+
},
|
|
696
|
+
"l-content-gap": {
|
|
697
|
+
"value": "{space.m.value}",
|
|
698
|
+
"type": "spacing",
|
|
699
|
+
"description": "Large content gap"
|
|
700
|
+
},
|
|
701
|
+
"l-statusbar-padding": {
|
|
702
|
+
"value": "{space.l.value} {space.s.value}",
|
|
703
|
+
"type": "spacing",
|
|
704
|
+
"description": "Large status bar padding"
|
|
705
|
+
},
|
|
706
|
+
"m-border-width": {
|
|
707
|
+
"value": "{borderWidth.none.value}",
|
|
708
|
+
"type": "borderWidth",
|
|
709
|
+
"description": "Border width of callout"
|
|
710
|
+
},
|
|
711
|
+
"m-heading-size": {
|
|
712
|
+
"value": "{typography.heading.xs.value}",
|
|
713
|
+
"type": "fontSizes",
|
|
714
|
+
"description": "Medium heading size"
|
|
715
|
+
},
|
|
716
|
+
"m-text-size": {
|
|
717
|
+
"value": "{typography.body.s.value}",
|
|
718
|
+
"type": "fontSizes",
|
|
719
|
+
"description": "Medium text size"
|
|
720
|
+
},
|
|
721
|
+
"m-content-padding": {
|
|
722
|
+
"value": "{space.s.value}",
|
|
723
|
+
"type": "spacing",
|
|
724
|
+
"description": "Medium content padding"
|
|
725
|
+
},
|
|
726
|
+
"m-content-gap": {
|
|
727
|
+
"value": "{space.2xs.value}",
|
|
728
|
+
"type": "spacing",
|
|
729
|
+
"description": "Medium content gap"
|
|
730
|
+
},
|
|
731
|
+
"m-statusbar-padding": {
|
|
732
|
+
"value": "{space.s.value} {space.2xs.value}",
|
|
733
|
+
"type": "spacing",
|
|
734
|
+
"description": "Medium status bar padding"
|
|
735
|
+
},
|
|
736
|
+
"info-color-bg-content": {
|
|
737
|
+
"value": "{color.greyscale.100.value}",
|
|
738
|
+
"type": "color",
|
|
739
|
+
"description": "Background color of info callout content"
|
|
740
|
+
},
|
|
741
|
+
"info-icon-color": {
|
|
742
|
+
"value": "{color.greyscale.white.value}",
|
|
743
|
+
"type": "color",
|
|
744
|
+
"description": "Icon color of info callout"
|
|
745
|
+
},
|
|
746
|
+
"info-color-bg-statusbar": {
|
|
747
|
+
"value": "{color.info.default.value}",
|
|
748
|
+
"type": "color",
|
|
749
|
+
"description": "Background color of info callout status bar"
|
|
750
|
+
},
|
|
751
|
+
"info-border-color": {
|
|
752
|
+
"value": "none",
|
|
753
|
+
"type": "color",
|
|
754
|
+
"description": "Border color of info callout"
|
|
755
|
+
},
|
|
756
|
+
"warning-color-bg-content": {
|
|
757
|
+
"value": "{color.greyscale.100.value}",
|
|
758
|
+
"type": "color",
|
|
759
|
+
"description": "Background color of warning callout content"
|
|
760
|
+
},
|
|
761
|
+
"warning-color-bg-statusbar": {
|
|
762
|
+
"value": "{color.warning.default.value}",
|
|
763
|
+
"type": "color",
|
|
764
|
+
"description": "Background color of warning callout status bar"
|
|
765
|
+
},
|
|
766
|
+
"warning-icon-color": {
|
|
767
|
+
"value": "{color.greyscale.black.value}",
|
|
768
|
+
"type": "color",
|
|
769
|
+
"description": "Icon color of warning callout"
|
|
770
|
+
},
|
|
771
|
+
"warning-border-color": {
|
|
772
|
+
"value": "none",
|
|
773
|
+
"type": "color",
|
|
774
|
+
"description": "Border color of warning callout"
|
|
775
|
+
},
|
|
776
|
+
"success-color-bg-content": {
|
|
777
|
+
"value": "{color.greyscale.100.value}",
|
|
778
|
+
"type": "color",
|
|
779
|
+
"description": "Background color of success callout content"
|
|
780
|
+
},
|
|
781
|
+
"success-color-bg-statusbar": {
|
|
782
|
+
"value": "{color.success.default.value}",
|
|
783
|
+
"type": "color",
|
|
784
|
+
"description": "Background color of success callout status bar"
|
|
785
|
+
},
|
|
786
|
+
"success-icon-color": {
|
|
787
|
+
"value": "{color.greyscale.white.value}",
|
|
788
|
+
"type": "color",
|
|
789
|
+
"description": "Icon color of success callout"
|
|
790
|
+
},
|
|
791
|
+
"success-border-color": {
|
|
792
|
+
"value": "none",
|
|
793
|
+
"type": "color",
|
|
794
|
+
"description": "Border color of success callout"
|
|
795
|
+
},
|
|
796
|
+
"emergency-color-bg-content": {
|
|
797
|
+
"value": "{color.greyscale.100.value}",
|
|
798
|
+
"type": "color",
|
|
799
|
+
"description": "Background color of emergency callout content"
|
|
800
|
+
},
|
|
801
|
+
"emergency-color-bg-statusbar": {
|
|
802
|
+
"value": "{color.emergency.default.value}",
|
|
803
|
+
"type": "color",
|
|
804
|
+
"description": "Background color of emergency callout status bar"
|
|
805
|
+
},
|
|
806
|
+
"emergency-icon-color": {
|
|
807
|
+
"value": "{color.greyscale.white.value}",
|
|
808
|
+
"type": "color",
|
|
809
|
+
"description": "Icon color of emergency callout"
|
|
810
|
+
},
|
|
811
|
+
"emergency-border-color": {
|
|
812
|
+
"value": "none",
|
|
813
|
+
"type": "color",
|
|
814
|
+
"description": "Border color of emergency callout"
|
|
815
|
+
},
|
|
816
|
+
"event-icon-color": {
|
|
817
|
+
"value": "{color.greyscale.white.value}",
|
|
818
|
+
"type": "color",
|
|
819
|
+
"description": "Icon color of event callout"
|
|
820
|
+
}
|
|
821
|
+
},
|
|
822
|
+
"container": {
|
|
823
|
+
"border-radius": {
|
|
824
|
+
"value": "{borderRadius.m.value}",
|
|
825
|
+
"type": "borderRadius",
|
|
826
|
+
"description": "Border radius of container"
|
|
827
|
+
},
|
|
828
|
+
"border": {
|
|
829
|
+
"value": "{borderWidth.s.value} solid {color.greyscale.200.value}",
|
|
830
|
+
"type": "border",
|
|
831
|
+
"description": "Border of container"
|
|
832
|
+
},
|
|
833
|
+
"padding": {
|
|
834
|
+
"value": "{space.l.value}",
|
|
835
|
+
"type": "spacing",
|
|
836
|
+
"description": "Padding of container"
|
|
837
|
+
}
|
|
838
|
+
},
|
|
839
|
+
"table": {
|
|
840
|
+
"color-heading": {
|
|
841
|
+
"value": "{color.text.secondary.value}",
|
|
842
|
+
"type": "color",
|
|
843
|
+
"description": "Color of table heading text"
|
|
844
|
+
},
|
|
845
|
+
"color-border-heading": {
|
|
846
|
+
"value": "{color.greyscale.600.value}",
|
|
847
|
+
"type": "color",
|
|
848
|
+
"description": "Color of table heading border"
|
|
849
|
+
}
|
|
565
850
|
}
|
|
566
851
|
}
|
package/dist/tokens.css
CHANGED
|
@@ -1,101 +1,156 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Wed, 09 Oct 2024 15:56:39 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
7
|
-
--goa-
|
|
8
|
-
--goa-
|
|
9
|
-
--goa-
|
|
10
|
-
--goa-
|
|
11
|
-
--goa-
|
|
12
|
-
--goa-
|
|
13
|
-
--goa-
|
|
14
|
-
--goa-color-interactive-disabled: #80b7e1;
|
|
15
|
-
--goa-color-text-default: #333333;
|
|
16
|
-
--goa-color-text-secondary: #666666;
|
|
17
|
-
--goa-color-text-light: #ffffff;
|
|
18
|
-
--goa-color-text-disabled: #666666;
|
|
19
|
-
--goa-color-info-default: #004a8f;
|
|
20
|
-
--goa-color-info-light: #aac9e7;
|
|
21
|
-
--goa-color-info-dark: #003b70;
|
|
22
|
-
--goa-color-info-background: #eff8ff;
|
|
23
|
-
--goa-color-warning-default: #f9ce2d;
|
|
24
|
-
--goa-color-warning-light: #ffeab6;
|
|
25
|
-
--goa-color-warning-dark: #bf8d23;
|
|
26
|
-
--goa-color-warning-background: #fff6e5;
|
|
27
|
-
--goa-color-emergency-default: #da291c;
|
|
28
|
-
--goa-color-emergency-light: #fbd1ce;
|
|
29
|
-
--goa-color-emergency-dark: #a91a10;
|
|
30
|
-
--goa-color-emergency-background: #fff1f2;
|
|
31
|
-
--goa-color-success-default: #006f4c;
|
|
32
|
-
--goa-color-success-light: #cce4dc;
|
|
33
|
-
--goa-color-success-dark: #00563a;
|
|
34
|
-
--goa-color-success-background: #eef9f3;
|
|
35
|
-
--goa-color-greyscale-50: #f8f8f8;
|
|
36
|
-
--goa-color-greyscale-100: #f1f1f1;
|
|
37
|
-
--goa-color-greyscale-200: #dcdcdc;
|
|
38
|
-
--goa-color-greyscale-400: #adadad;
|
|
39
|
-
--goa-color-greyscale-500: #949494;
|
|
40
|
-
--goa-color-greyscale-600: #858585;
|
|
41
|
-
--goa-color-greyscale-700: #666666;
|
|
42
|
-
--goa-color-greyscale-black: #333333;
|
|
43
|
-
--goa-color-greyscale-white: #ffffff;
|
|
44
|
-
--goa-font-weight-regular: 400;
|
|
45
|
-
--goa-font-weight-medium: 500;
|
|
46
|
-
--goa-font-weight-bold: 700;
|
|
47
|
-
--goa-font-size-1: 0.75rem;
|
|
48
|
-
--goa-font-size-2: 0.875rem;
|
|
49
|
-
--goa-font-size-3: 1rem;
|
|
50
|
-
--goa-font-size-4: 1.125rem;
|
|
51
|
-
--goa-font-size-5: 1.25rem;
|
|
52
|
-
--goa-font-size-6: 1.375rem;
|
|
53
|
-
--goa-font-size-7: 1.5rem;
|
|
54
|
-
--goa-font-size-8: 2rem;
|
|
55
|
-
--goa-font-size-9: 2.25rem;
|
|
56
|
-
--goa-font-size-10: 3rem;
|
|
57
|
-
--goa-space-none: 0rem;
|
|
58
|
-
--goa-space-3xs: 0.125rem;
|
|
59
|
-
--goa-space-2xs: 0.25rem;
|
|
60
|
-
--goa-space-xs: 0.5rem;
|
|
61
|
-
--goa-space-s: 0.75rem;
|
|
62
|
-
--goa-space-m: 1rem;
|
|
63
|
-
--goa-space-l: 1.5rem;
|
|
64
|
-
--goa-space-xl: 2rem;
|
|
65
|
-
--goa-space-2xl: 3rem;
|
|
66
|
-
--goa-space-3xl: 4rem;
|
|
67
|
-
--goa-space-4xl: 8rem;
|
|
68
|
-
--goa-border-radius-none: 0rem;
|
|
69
|
-
--goa-border-radius-m: 0.25rem;
|
|
70
|
-
--goa-opacity-background-modal: 50%;
|
|
71
|
-
--goa-opacity-background-loading: 90%;
|
|
72
|
-
--goa-line-height-1: 1.25rem;
|
|
73
|
-
--goa-line-height-2: 1.5rem;
|
|
74
|
-
--goa-line-height-3: 1.75rem;
|
|
75
|
-
--goa-line-height-4: 2rem;
|
|
76
|
-
--goa-line-height-5: 2.5rem;
|
|
77
|
-
--goa-line-height-6: 2.75rem;
|
|
78
|
-
--goa-line-height-7: 3.5rem;
|
|
79
|
-
--goa-line-height-05: 1.125rem;
|
|
80
|
-
--goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
81
|
-
--goa-font-family-number: roboto-mono, monospace;
|
|
82
|
-
--goa-typography-heading-xs: 700 1rem/1.5rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
83
|
-
--goa-typography-heading-s: 700 1.125rem/1.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
84
|
-
--goa-typography-heading-m: 400 1.5rem/2rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
85
|
-
--goa-typography-heading-l: 400 2.25rem/2.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
86
|
-
--goa-typography-heading-xl: 700 3rem/3.5rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
87
|
-
--goa-typography-body-xs: 400 0.875rem/1.25rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
88
|
-
--goa-typography-body-s: 400 1rem/1.5rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
89
|
-
--goa-typography-body-m: 400 1.125rem/1.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
90
|
-
--goa-typography-body-l: 400 1.5rem/2rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
91
|
-
--goa-typography-button-default: 400 1.125rem/1.25rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
92
|
-
--goa-typography-number-m: 500 1.125rem/1.75rem roboto-mono, monospace;
|
|
93
|
-
--goa-border-width-s: 1px;
|
|
94
|
-
--goa-border-width-m: 2px;
|
|
95
|
-
--goa-border-width-l: 3px;
|
|
96
|
-
--goa-letter-spacing-button: 0.0125rem;
|
|
97
|
-
--goa-icon-size-s: 1rem;
|
|
98
|
-
--goa-icon-size-m: 1.25rem;
|
|
99
|
-
--goa-icon-size-l: 1.5rem;
|
|
7
|
+
--goa-callout-emergency-border-color: none;
|
|
8
|
+
--goa-callout-success-border-color: none;
|
|
9
|
+
--goa-callout-warning-border-color: none;
|
|
10
|
+
--goa-callout-info-border-color: none;
|
|
11
|
+
--goa-button-height-start: 3.25rem;
|
|
12
|
+
--goa-button-height-compact: 2rem;
|
|
13
|
+
--goa-button-height: 2.625rem;
|
|
100
14
|
--goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
|
|
15
|
+
--goa-icon-size-l: 1.5rem;
|
|
16
|
+
--goa-icon-size-m: 1.25rem;
|
|
17
|
+
--goa-icon-size-s: 1rem;
|
|
18
|
+
--goa-letter-spacing-button: 0.0125rem;
|
|
19
|
+
--goa-border-width-l: 3px;
|
|
20
|
+
--goa-border-width-m: 2px;
|
|
21
|
+
--goa-border-width-s: 1px;
|
|
22
|
+
--goa-border-width-none: 0px;
|
|
23
|
+
--goa-font-family-number: roboto-mono, monospace;
|
|
24
|
+
--goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
25
|
+
--goa-line-height-05: 1.125rem;
|
|
26
|
+
--goa-line-height-7: 3.5rem;
|
|
27
|
+
--goa-line-height-6: 2.75rem;
|
|
28
|
+
--goa-line-height-5: 2.5rem;
|
|
29
|
+
--goa-line-height-4: 2rem;
|
|
30
|
+
--goa-line-height-3: 1.75rem;
|
|
31
|
+
--goa-line-height-2: 1.5rem;
|
|
32
|
+
--goa-line-height-1: 1.25rem;
|
|
33
|
+
--goa-opacity-background-loading: 90%;
|
|
34
|
+
--goa-opacity-background-modal: 50%;
|
|
35
|
+
--goa-border-radius-m: 0.25rem;
|
|
36
|
+
--goa-border-radius-none: 0rem;
|
|
37
|
+
--goa-space-4xl: 8rem;
|
|
38
|
+
--goa-space-3xl: 4rem;
|
|
39
|
+
--goa-space-2xl: 3rem;
|
|
40
|
+
--goa-space-xl: 2rem;
|
|
41
|
+
--goa-space-l: 1.5rem;
|
|
42
|
+
--goa-space-m: 1rem;
|
|
43
|
+
--goa-space-s: 0.75rem;
|
|
44
|
+
--goa-space-xs: 0.5rem;
|
|
45
|
+
--goa-space-2xs: 0.25rem;
|
|
46
|
+
--goa-space-3xs: 0.125rem;
|
|
47
|
+
--goa-space-none: 0rem;
|
|
48
|
+
--goa-font-size-10: 3rem;
|
|
49
|
+
--goa-font-size-9: 2.25rem;
|
|
50
|
+
--goa-font-size-8: 2rem;
|
|
51
|
+
--goa-font-size-7: 1.5rem;
|
|
52
|
+
--goa-font-size-6: 1.375rem;
|
|
53
|
+
--goa-font-size-5: 1.25rem;
|
|
54
|
+
--goa-font-size-4: 1.125rem;
|
|
55
|
+
--goa-font-size-3: 1rem;
|
|
56
|
+
--goa-font-size-2: 0.875rem;
|
|
57
|
+
--goa-font-size-1: 0.75rem;
|
|
58
|
+
--goa-font-weight-bold: 700;
|
|
59
|
+
--goa-font-weight-medium: 500;
|
|
60
|
+
--goa-font-weight-regular: 400;
|
|
61
|
+
--goa-color-greyscale-white: #ffffff;
|
|
62
|
+
--goa-color-greyscale-black: #333333;
|
|
63
|
+
--goa-color-greyscale-700: #666666;
|
|
64
|
+
--goa-color-greyscale-600: #858585;
|
|
65
|
+
--goa-color-greyscale-500: #949494;
|
|
66
|
+
--goa-color-greyscale-400: #adadad;
|
|
67
|
+
--goa-color-greyscale-200: #dcdcdc;
|
|
68
|
+
--goa-color-greyscale-100: #f1f1f1;
|
|
69
|
+
--goa-color-greyscale-50: #f8f8f8;
|
|
70
|
+
--goa-color-success-background: #eef9f3;
|
|
71
|
+
--goa-color-success-dark: #00563a;
|
|
72
|
+
--goa-color-success-light: #cce4dc;
|
|
73
|
+
--goa-color-success-default: #006f4c;
|
|
74
|
+
--goa-color-emergency-background: #fff1f2;
|
|
75
|
+
--goa-color-emergency-dark: #a91a10;
|
|
76
|
+
--goa-color-emergency-light: #fbd1ce;
|
|
77
|
+
--goa-color-emergency-default: #da291c;
|
|
78
|
+
--goa-color-warning-background: #fff6e5;
|
|
79
|
+
--goa-color-warning-dark: #bf8d23;
|
|
80
|
+
--goa-color-warning-light: #ffeab6;
|
|
81
|
+
--goa-color-warning-default: #f9ce2d;
|
|
82
|
+
--goa-color-info-background: #eff8ff;
|
|
83
|
+
--goa-color-info-dark: #003b70;
|
|
84
|
+
--goa-color-info-light: #aac9e7;
|
|
85
|
+
--goa-color-info-default: #004a8f;
|
|
86
|
+
--goa-color-interactive-disabled: #80b7e1;
|
|
87
|
+
--goa-color-interactive-focus: #feba35;
|
|
88
|
+
--goa-color-interactive-error: #ec040b;
|
|
89
|
+
--goa-color-interactive-hover: #004f84;
|
|
90
|
+
--goa-color-interactive-default: #0070c4;
|
|
91
|
+
--goa-color-brand-light: #c8eefa;
|
|
92
|
+
--goa-color-brand-dark: #005072;
|
|
93
|
+
--goa-color-brand-default: #0081a2;
|
|
94
|
+
--goa-table-color-border-heading: var(--goa-color-greyscale-600);
|
|
95
|
+
--goa-container-padding: var(--goa-space-l);
|
|
96
|
+
--goa-container-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
|
|
97
|
+
--goa-container-border-radius: var(--goa-border-radius-m);
|
|
98
|
+
--goa-callout-event-icon-color: var(--goa-color-greyscale-white);
|
|
99
|
+
--goa-callout-emergency-icon-color: var(--goa-color-greyscale-white);
|
|
100
|
+
--goa-callout-emergency-color-bg-statusbar: var(--goa-color-emergency-default);
|
|
101
|
+
--goa-callout-emergency-color-bg-content: var(--goa-color-greyscale-100);
|
|
102
|
+
--goa-callout-success-icon-color: var(--goa-color-greyscale-white);
|
|
103
|
+
--goa-callout-success-color-bg-statusbar: var(--goa-color-success-default);
|
|
104
|
+
--goa-callout-success-color-bg-content: var(--goa-color-greyscale-100);
|
|
105
|
+
--goa-callout-warning-icon-color: var(--goa-color-greyscale-black);
|
|
106
|
+
--goa-callout-warning-color-bg-statusbar: var(--goa-color-warning-default);
|
|
107
|
+
--goa-callout-warning-color-bg-content: var(--goa-color-greyscale-100);
|
|
108
|
+
--goa-callout-info-color-bg-statusbar: var(--goa-color-info-default);
|
|
109
|
+
--goa-callout-info-icon-color: var(--goa-color-greyscale-white);
|
|
110
|
+
--goa-callout-info-color-bg-content: var(--goa-color-greyscale-100);
|
|
111
|
+
--goa-callout-m-statusbar-padding: var(--goa-space-s) var(--goa-space-2xs);
|
|
112
|
+
--goa-callout-m-content-gap: var(--goa-space-2xs);
|
|
113
|
+
--goa-callout-m-content-padding: var(--goa-space-s);
|
|
114
|
+
--goa-callout-m-border-width: var(--goa-border-width-none);
|
|
115
|
+
--goa-callout-l-statusbar-padding: var(--goa-space-l) var(--goa-space-s);
|
|
116
|
+
--goa-callout-l-content-gap: var(--goa-space-m);
|
|
117
|
+
--goa-callout-l-content-padding: var(--goa-space-l);
|
|
118
|
+
--goa-callout-l-border-width: var(--goa-border-width-none);
|
|
119
|
+
--goa-callout-border-radius: var(--goa-border-radius-none);
|
|
120
|
+
--goa-accordion-color-bg-heading-hover: var(--goa-color-greyscale-200);
|
|
121
|
+
--goa-accordion-padding-content-narrow: var(--goa-space-l);
|
|
122
|
+
--goa-accordion-padding-content-wide: var(--goa-space-l) var(--goa-space-l) var(--goa-space-xl) 56px;
|
|
123
|
+
--goa-accordion-padding-heading: var(--goa-space-s) var(--goa-space-m) var(--goa-space-s) 0;
|
|
124
|
+
--goa-accordion-border-radius: var(--goa-border-radius-m);
|
|
125
|
+
--goa-accordion-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
|
|
126
|
+
--goa-accordion-color-bg-content: var(--goa-color-greyscale-white);
|
|
127
|
+
--goa-accordion-color-bg-heading: var(--goa-color-greyscale-100);
|
|
128
|
+
--goa-button-padding-lr-compact: var(--goa-space-xs);
|
|
129
|
+
--goa-button-padding-lr: var(--goa-space-s);
|
|
130
|
+
--goa-button-border-radius: var(--goa-border-radius-m);
|
|
131
|
+
--goa-typography-number-m: var(--goa-font-weight-medium) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-number);
|
|
132
|
+
--goa-typography-button-default: var(--goa-font-weight-regular) var(--goa-font-size-4)/var(--goa-line-height-1) var(--goa-font-family-sans);
|
|
133
|
+
--goa-typography-body-l: var(--goa-font-weight-regular) var(--goa-font-size-7)/var(--goa-line-height-4) var(--goa-font-family-sans);
|
|
134
|
+
--goa-typography-body-m: var(--goa-font-weight-regular) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-sans);
|
|
135
|
+
--goa-typography-body-s: var(--goa-font-weight-regular) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-sans);
|
|
136
|
+
--goa-typography-body-xs: var(--goa-font-weight-regular) var(--goa-font-size-2)/var(--goa-line-height-1) var(--goa-font-family-sans);
|
|
137
|
+
--goa-typography-heading-xl: var(--goa-font-weight-bold) var(--goa-font-size-10)/var(--goa-line-height-7) var(--goa-font-family-sans);
|
|
138
|
+
--goa-typography-heading-l: var(--goa-font-weight-regular) var(--goa-font-size-9)/var(--goa-line-height-6) var(--goa-font-family-sans);
|
|
139
|
+
--goa-typography-heading-m: var(--goa-font-weight-regular) var(--goa-font-size-7)/var(--goa-line-height-4) var(--goa-font-family-sans);
|
|
140
|
+
--goa-typography-heading-s: var(--goa-font-weight-bold) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-sans);
|
|
141
|
+
--goa-typography-heading-xs: var(--goa-font-weight-bold) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-sans);
|
|
142
|
+
--goa-color-text-disabled: var(--goa-color-greyscale-700);
|
|
143
|
+
--goa-color-text-light: var(--goa-color-greyscale-white);
|
|
144
|
+
--goa-color-text-secondary: var(--goa-color-greyscale-700);
|
|
145
|
+
--goa-color-text-default: var(--goa-color-greyscale-black);
|
|
146
|
+
--goa-table-color-heading: var(--goa-color-text-secondary);
|
|
147
|
+
--goa-callout-m-text-size: var(--goa-typography-body-s);
|
|
148
|
+
--goa-callout-m-heading-size: var(--goa-typography-heading-xs);
|
|
149
|
+
--goa-callout-l-text-size: var(--goa-typography-body-m);
|
|
150
|
+
--goa-callout-l-heading-size: var(--goa-typography-heading-m);
|
|
151
|
+
--goa-accordion-color-heading-hover: var(--goa-color-text-default);
|
|
152
|
+
--goa-accordion-heading-m: var(--goa-typography-heading-m);
|
|
153
|
+
--goa-accordion-heading-s: var(--goa-typography-heading-s);
|
|
154
|
+
--goa-accordion-color-heading: var(--goa-color-text-default);
|
|
155
|
+
--goa-button-text: var(--goa-typography-button-default);
|
|
101
156
|
}
|
package/dist/tokens.scss
CHANGED
|
@@ -1,98 +1,153 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Wed, 09 Oct 2024 15:56:39 GMT
|
|
4
4
|
|
|
5
|
-
$goa-
|
|
6
|
-
$goa-
|
|
7
|
-
$goa-
|
|
8
|
-
$goa-
|
|
9
|
-
$goa-
|
|
10
|
-
$goa-
|
|
11
|
-
$goa-
|
|
12
|
-
$goa-
|
|
13
|
-
$goa-color-text-default: #333333;
|
|
14
|
-
$goa-color-text-secondary: #666666;
|
|
15
|
-
$goa-color-text-light: #ffffff;
|
|
16
|
-
$goa-color-text-disabled: #666666;
|
|
17
|
-
$goa-color-info-default: #004a8f;
|
|
18
|
-
$goa-color-info-light: #aac9e7;
|
|
19
|
-
$goa-color-info-dark: #003b70;
|
|
20
|
-
$goa-color-info-background: #eff8ff;
|
|
21
|
-
$goa-color-warning-default: #f9ce2d;
|
|
22
|
-
$goa-color-warning-light: #ffeab6;
|
|
23
|
-
$goa-color-warning-dark: #bf8d23;
|
|
24
|
-
$goa-color-warning-background: #fff6e5;
|
|
25
|
-
$goa-color-emergency-default: #da291c;
|
|
26
|
-
$goa-color-emergency-light: #fbd1ce;
|
|
27
|
-
$goa-color-emergency-dark: #a91a10;
|
|
28
|
-
$goa-color-emergency-background: #fff1f2;
|
|
29
|
-
$goa-color-success-default: #006f4c;
|
|
30
|
-
$goa-color-success-light: #cce4dc;
|
|
31
|
-
$goa-color-success-dark: #00563a;
|
|
32
|
-
$goa-color-success-background: #eef9f3;
|
|
33
|
-
$goa-color-greyscale-50: #f8f8f8;
|
|
34
|
-
$goa-color-greyscale-100: #f1f1f1;
|
|
35
|
-
$goa-color-greyscale-200: #dcdcdc;
|
|
36
|
-
$goa-color-greyscale-400: #adadad;
|
|
37
|
-
$goa-color-greyscale-500: #949494;
|
|
38
|
-
$goa-color-greyscale-600: #858585;
|
|
39
|
-
$goa-color-greyscale-700: #666666;
|
|
40
|
-
$goa-color-greyscale-black: #333333;
|
|
41
|
-
$goa-color-greyscale-white: #ffffff;
|
|
42
|
-
$goa-font-weight-regular: 400;
|
|
43
|
-
$goa-font-weight-medium: 500;
|
|
44
|
-
$goa-font-weight-bold: 700;
|
|
45
|
-
$goa-font-size-1: 0.75rem;
|
|
46
|
-
$goa-font-size-2: 0.875rem;
|
|
47
|
-
$goa-font-size-3: 1rem;
|
|
48
|
-
$goa-font-size-4: 1.125rem;
|
|
49
|
-
$goa-font-size-5: 1.25rem;
|
|
50
|
-
$goa-font-size-6: 1.375rem;
|
|
51
|
-
$goa-font-size-7: 1.5rem;
|
|
52
|
-
$goa-font-size-8: 2rem;
|
|
53
|
-
$goa-font-size-9: 2.25rem;
|
|
54
|
-
$goa-font-size-10: 3rem;
|
|
55
|
-
$goa-space-none: 0rem;
|
|
56
|
-
$goa-space-3xs: 0.125rem;
|
|
57
|
-
$goa-space-2xs: 0.25rem;
|
|
58
|
-
$goa-space-xs: 0.5rem;
|
|
59
|
-
$goa-space-s: 0.75rem;
|
|
60
|
-
$goa-space-m: 1rem;
|
|
61
|
-
$goa-space-l: 1.5rem;
|
|
62
|
-
$goa-space-xl: 2rem;
|
|
63
|
-
$goa-space-2xl: 3rem;
|
|
64
|
-
$goa-space-3xl: 4rem;
|
|
65
|
-
$goa-space-4xl: 8rem;
|
|
66
|
-
$goa-border-radius-none: 0rem;
|
|
67
|
-
$goa-border-radius-m: 0.25rem;
|
|
68
|
-
$goa-opacity-background-modal: 50%;
|
|
69
|
-
$goa-opacity-background-loading: 90%;
|
|
70
|
-
$goa-line-height-1: 1.25rem;
|
|
71
|
-
$goa-line-height-2: 1.5rem;
|
|
72
|
-
$goa-line-height-3: 1.75rem;
|
|
73
|
-
$goa-line-height-4: 2rem;
|
|
74
|
-
$goa-line-height-5: 2.5rem;
|
|
75
|
-
$goa-line-height-6: 2.75rem;
|
|
76
|
-
$goa-line-height-7: 3.5rem;
|
|
77
|
-
$goa-line-height-05: 1.125rem;
|
|
78
|
-
$goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
79
|
-
$goa-font-family-number: roboto-mono, monospace;
|
|
80
|
-
$goa-typography-heading-xs: 700 1rem/1.5rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
81
|
-
$goa-typography-heading-s: 700 1.125rem/1.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
82
|
-
$goa-typography-heading-m: 400 1.5rem/2rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
83
|
-
$goa-typography-heading-l: 400 2.25rem/2.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
84
|
-
$goa-typography-heading-xl: 700 3rem/3.5rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
85
|
-
$goa-typography-body-xs: 400 0.875rem/1.25rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
86
|
-
$goa-typography-body-s: 400 1rem/1.5rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
87
|
-
$goa-typography-body-m: 400 1.125rem/1.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
88
|
-
$goa-typography-body-l: 400 1.5rem/2rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
89
|
-
$goa-typography-button-default: 400 1.125rem/1.25rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
90
|
-
$goa-typography-number-m: 500 1.125rem/1.75rem roboto-mono, monospace;
|
|
91
|
-
$goa-border-width-s: 1px;
|
|
92
|
-
$goa-border-width-m: 2px;
|
|
93
|
-
$goa-border-width-l: 3px;
|
|
94
|
-
$goa-letter-spacing-button: 0.0125rem;
|
|
95
|
-
$goa-icon-size-s: 1rem;
|
|
96
|
-
$goa-icon-size-m: 1.25rem;
|
|
5
|
+
$goa-callout-emergency-border-color: none;
|
|
6
|
+
$goa-callout-success-border-color: none;
|
|
7
|
+
$goa-callout-warning-border-color: none;
|
|
8
|
+
$goa-callout-info-border-color: none;
|
|
9
|
+
$goa-button-height-start: 3.25rem;
|
|
10
|
+
$goa-button-height-compact: 2rem;
|
|
11
|
+
$goa-button-height: 2.625rem;
|
|
12
|
+
$goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
|
|
97
13
|
$goa-icon-size-l: 1.5rem;
|
|
98
|
-
$goa-
|
|
14
|
+
$goa-icon-size-m: 1.25rem;
|
|
15
|
+
$goa-icon-size-s: 1rem;
|
|
16
|
+
$goa-letter-spacing-button: 0.0125rem;
|
|
17
|
+
$goa-border-width-l: 3px;
|
|
18
|
+
$goa-border-width-m: 2px;
|
|
19
|
+
$goa-border-width-s: 1px;
|
|
20
|
+
$goa-border-width-none: 0px;
|
|
21
|
+
$goa-font-family-number: roboto-mono, monospace;
|
|
22
|
+
$goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
23
|
+
$goa-line-height-05: 1.125rem;
|
|
24
|
+
$goa-line-height-7: 3.5rem;
|
|
25
|
+
$goa-line-height-6: 2.75rem;
|
|
26
|
+
$goa-line-height-5: 2.5rem;
|
|
27
|
+
$goa-line-height-4: 2rem;
|
|
28
|
+
$goa-line-height-3: 1.75rem;
|
|
29
|
+
$goa-line-height-2: 1.5rem;
|
|
30
|
+
$goa-line-height-1: 1.25rem;
|
|
31
|
+
$goa-opacity-background-loading: 90%;
|
|
32
|
+
$goa-opacity-background-modal: 50%;
|
|
33
|
+
$goa-border-radius-m: 0.25rem;
|
|
34
|
+
$goa-border-radius-none: 0rem;
|
|
35
|
+
$goa-space-4xl: 8rem;
|
|
36
|
+
$goa-space-3xl: 4rem;
|
|
37
|
+
$goa-space-2xl: 3rem;
|
|
38
|
+
$goa-space-xl: 2rem;
|
|
39
|
+
$goa-space-l: 1.5rem;
|
|
40
|
+
$goa-space-m: 1rem;
|
|
41
|
+
$goa-space-s: 0.75rem;
|
|
42
|
+
$goa-space-xs: 0.5rem;
|
|
43
|
+
$goa-space-2xs: 0.25rem;
|
|
44
|
+
$goa-space-3xs: 0.125rem;
|
|
45
|
+
$goa-space-none: 0rem;
|
|
46
|
+
$goa-font-size-10: 3rem;
|
|
47
|
+
$goa-font-size-9: 2.25rem;
|
|
48
|
+
$goa-font-size-8: 2rem;
|
|
49
|
+
$goa-font-size-7: 1.5rem;
|
|
50
|
+
$goa-font-size-6: 1.375rem;
|
|
51
|
+
$goa-font-size-5: 1.25rem;
|
|
52
|
+
$goa-font-size-4: 1.125rem;
|
|
53
|
+
$goa-font-size-3: 1rem;
|
|
54
|
+
$goa-font-size-2: 0.875rem;
|
|
55
|
+
$goa-font-size-1: 0.75rem;
|
|
56
|
+
$goa-font-weight-bold: 700;
|
|
57
|
+
$goa-font-weight-medium: 500;
|
|
58
|
+
$goa-font-weight-regular: 400;
|
|
59
|
+
$goa-color-greyscale-white: #ffffff;
|
|
60
|
+
$goa-color-greyscale-black: #333333;
|
|
61
|
+
$goa-color-greyscale-700: #666666;
|
|
62
|
+
$goa-color-greyscale-600: #858585;
|
|
63
|
+
$goa-color-greyscale-500: #949494;
|
|
64
|
+
$goa-color-greyscale-400: #adadad;
|
|
65
|
+
$goa-color-greyscale-200: #dcdcdc;
|
|
66
|
+
$goa-color-greyscale-100: #f1f1f1;
|
|
67
|
+
$goa-color-greyscale-50: #f8f8f8;
|
|
68
|
+
$goa-color-success-background: #eef9f3;
|
|
69
|
+
$goa-color-success-dark: #00563a;
|
|
70
|
+
$goa-color-success-light: #cce4dc;
|
|
71
|
+
$goa-color-success-default: #006f4c;
|
|
72
|
+
$goa-color-emergency-background: #fff1f2;
|
|
73
|
+
$goa-color-emergency-dark: #a91a10;
|
|
74
|
+
$goa-color-emergency-light: #fbd1ce;
|
|
75
|
+
$goa-color-emergency-default: #da291c;
|
|
76
|
+
$goa-color-warning-background: #fff6e5;
|
|
77
|
+
$goa-color-warning-dark: #bf8d23;
|
|
78
|
+
$goa-color-warning-light: #ffeab6;
|
|
79
|
+
$goa-color-warning-default: #f9ce2d;
|
|
80
|
+
$goa-color-info-background: #eff8ff;
|
|
81
|
+
$goa-color-info-dark: #003b70;
|
|
82
|
+
$goa-color-info-light: #aac9e7;
|
|
83
|
+
$goa-color-info-default: #004a8f;
|
|
84
|
+
$goa-color-interactive-disabled: #80b7e1;
|
|
85
|
+
$goa-color-interactive-focus: #feba35;
|
|
86
|
+
$goa-color-interactive-error: #ec040b;
|
|
87
|
+
$goa-color-interactive-hover: #004f84;
|
|
88
|
+
$goa-color-interactive-default: #0070c4;
|
|
89
|
+
$goa-color-brand-light: #c8eefa;
|
|
90
|
+
$goa-color-brand-dark: #005072;
|
|
91
|
+
$goa-color-brand-default: #0081a2;
|
|
92
|
+
$goa-table-color-border-heading: $goa-color-greyscale-600;
|
|
93
|
+
$goa-container-padding: $goa-space-l;
|
|
94
|
+
$goa-container-border: $goa-border-width-s solid $goa-color-greyscale-200;
|
|
95
|
+
$goa-container-border-radius: $goa-border-radius-m;
|
|
96
|
+
$goa-callout-event-icon-color: $goa-color-greyscale-white;
|
|
97
|
+
$goa-callout-emergency-icon-color: $goa-color-greyscale-white;
|
|
98
|
+
$goa-callout-emergency-color-bg-statusbar: $goa-color-emergency-default;
|
|
99
|
+
$goa-callout-emergency-color-bg-content: $goa-color-greyscale-100;
|
|
100
|
+
$goa-callout-success-icon-color: $goa-color-greyscale-white;
|
|
101
|
+
$goa-callout-success-color-bg-statusbar: $goa-color-success-default;
|
|
102
|
+
$goa-callout-success-color-bg-content: $goa-color-greyscale-100;
|
|
103
|
+
$goa-callout-warning-icon-color: $goa-color-greyscale-black;
|
|
104
|
+
$goa-callout-warning-color-bg-statusbar: $goa-color-warning-default;
|
|
105
|
+
$goa-callout-warning-color-bg-content: $goa-color-greyscale-100;
|
|
106
|
+
$goa-callout-info-color-bg-statusbar: $goa-color-info-default;
|
|
107
|
+
$goa-callout-info-icon-color: $goa-color-greyscale-white;
|
|
108
|
+
$goa-callout-info-color-bg-content: $goa-color-greyscale-100;
|
|
109
|
+
$goa-callout-m-statusbar-padding: $goa-space-s $goa-space-2xs;
|
|
110
|
+
$goa-callout-m-content-gap: $goa-space-2xs;
|
|
111
|
+
$goa-callout-m-content-padding: $goa-space-s;
|
|
112
|
+
$goa-callout-m-border-width: $goa-border-width-none;
|
|
113
|
+
$goa-callout-l-statusbar-padding: $goa-space-l $goa-space-s;
|
|
114
|
+
$goa-callout-l-content-gap: $goa-space-m;
|
|
115
|
+
$goa-callout-l-content-padding: $goa-space-l;
|
|
116
|
+
$goa-callout-l-border-width: $goa-border-width-none;
|
|
117
|
+
$goa-callout-border-radius: $goa-border-radius-none;
|
|
118
|
+
$goa-accordion-color-bg-heading-hover: $goa-color-greyscale-200;
|
|
119
|
+
$goa-accordion-padding-content-narrow: $goa-space-l;
|
|
120
|
+
$goa-accordion-padding-content-wide: $goa-space-l $goa-space-l $goa-space-xl 56px;
|
|
121
|
+
$goa-accordion-padding-heading: $goa-space-s $goa-space-m $goa-space-s 0;
|
|
122
|
+
$goa-accordion-border-radius: $goa-border-radius-m;
|
|
123
|
+
$goa-accordion-border: $goa-border-width-s solid $goa-color-greyscale-200;
|
|
124
|
+
$goa-accordion-color-bg-content: $goa-color-greyscale-white;
|
|
125
|
+
$goa-accordion-color-bg-heading: $goa-color-greyscale-100;
|
|
126
|
+
$goa-button-padding-lr-compact: $goa-space-xs;
|
|
127
|
+
$goa-button-padding-lr: $goa-space-s;
|
|
128
|
+
$goa-button-border-radius: $goa-border-radius-m;
|
|
129
|
+
$goa-typography-number-m: $goa-font-weight-medium $goa-font-size-4/$goa-line-height-3 $goa-font-family-number;
|
|
130
|
+
$goa-typography-button-default: $goa-font-weight-regular $goa-font-size-4/$goa-line-height-1 $goa-font-family-sans;
|
|
131
|
+
$goa-typography-body-l: $goa-font-weight-regular $goa-font-size-7/$goa-line-height-4 $goa-font-family-sans;
|
|
132
|
+
$goa-typography-body-m: $goa-font-weight-regular $goa-font-size-4/$goa-line-height-3 $goa-font-family-sans;
|
|
133
|
+
$goa-typography-body-s: $goa-font-weight-regular $goa-font-size-3/$goa-line-height-2 $goa-font-family-sans;
|
|
134
|
+
$goa-typography-body-xs: $goa-font-weight-regular $goa-font-size-2/$goa-line-height-1 $goa-font-family-sans;
|
|
135
|
+
$goa-typography-heading-xl: $goa-font-weight-bold $goa-font-size-10/$goa-line-height-7 $goa-font-family-sans;
|
|
136
|
+
$goa-typography-heading-l: $goa-font-weight-regular $goa-font-size-9/$goa-line-height-6 $goa-font-family-sans;
|
|
137
|
+
$goa-typography-heading-m: $goa-font-weight-regular $goa-font-size-7/$goa-line-height-4 $goa-font-family-sans;
|
|
138
|
+
$goa-typography-heading-s: $goa-font-weight-bold $goa-font-size-4/$goa-line-height-3 $goa-font-family-sans;
|
|
139
|
+
$goa-typography-heading-xs: $goa-font-weight-bold $goa-font-size-3/$goa-line-height-2 $goa-font-family-sans;
|
|
140
|
+
$goa-color-text-disabled: $goa-color-greyscale-700;
|
|
141
|
+
$goa-color-text-light: $goa-color-greyscale-white;
|
|
142
|
+
$goa-color-text-secondary: $goa-color-greyscale-700;
|
|
143
|
+
$goa-color-text-default: $goa-color-greyscale-black;
|
|
144
|
+
$goa-table-color-heading: $goa-color-text-secondary;
|
|
145
|
+
$goa-callout-m-text-size: $goa-typography-body-s;
|
|
146
|
+
$goa-callout-m-heading-size: $goa-typography-heading-xs;
|
|
147
|
+
$goa-callout-l-text-size: $goa-typography-body-m;
|
|
148
|
+
$goa-callout-l-heading-size: $goa-typography-heading-m;
|
|
149
|
+
$goa-accordion-color-heading-hover: $goa-color-text-default;
|
|
150
|
+
$goa-accordion-heading-m: $goa-typography-heading-m;
|
|
151
|
+
$goa-accordion-heading-s: $goa-typography-heading-s;
|
|
152
|
+
$goa-accordion-color-heading: $goa-color-text-default;
|
|
153
|
+
$goa-button-text: $goa-typography-button-default;
|
package/lib/design-tokens.js
CHANGED
|
@@ -47,6 +47,9 @@ function generate(outputPath) {
|
|
|
47
47
|
{
|
|
48
48
|
destination: "tokens.scss",
|
|
49
49
|
format: "scss/variables",
|
|
50
|
+
options: {
|
|
51
|
+
outputReferences: true,
|
|
52
|
+
},
|
|
50
53
|
},
|
|
51
54
|
],
|
|
52
55
|
},
|
|
@@ -62,6 +65,9 @@ function generate(outputPath) {
|
|
|
62
65
|
{
|
|
63
66
|
destination: "tokens.css",
|
|
64
67
|
format: "css/variables",
|
|
68
|
+
options: {
|
|
69
|
+
outputReferences: true,
|
|
70
|
+
},
|
|
65
71
|
},
|
|
66
72
|
],
|
|
67
73
|
},
|