@pantheon-systems/pds-design-tokens 1.0.0-dev.100 → 1.0.0-dev.102

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 (4) hide show
  1. package/build/css/pds-design-tokens.css +7 -5
  2. package/build/figma/pds-design-tokens-figma.json +30 -30
  3. package/build/json/pds-design-tokens.json +80 -28
  4. package/package.json +1 -1
package/build/css/pds-design-tokens.css CHANGED
@@ -32,9 +32,11 @@
32
32
  --pds-container-modal-width-large: 44rem;
33
33
  --pds-container-modal-width-medium: 36rem;
34
34
  --pds-container-modal-width-small: 25rem;
35
- --pds-container-padding-large: 4%;
36
- --pds-container-padding-medium: 4%;
37
- --pds-container-padding-small: 5%;
35
+ --pds-container-padding-base: 6%;
36
+ --pds-container-padding-base-breakpoint-lg: 2%;
37
+ --pds-container-padding-base-breakpoint-md: 4%;
38
+ --pds-container-padding-narrow-breakpoint-lg: 20%;
39
+ --pds-container-padding-narrow-breakpoint-md: 12%;
38
40
  --pds-grid-marketing-column-medium-large: 5.125%;
39
41
  --pds-grid-marketing-column-small: 21.34375%;
40
42
  --pds-grid-marketing-gap-medium-large: 3.5%;
@@ -80,9 +82,9 @@
80
82
  --pds-typography-size-6xl: 3.583rem;
81
83
  --pds-typography-size-l: 1.2rem;
82
84
  --pds-typography-size-m: 1rem;
83
- --pds-typography-size-s: 0.833rem;
85
+ --pds-typography-size-s: 0.8rem;
84
86
  --pds-typography-size-xl: 1.44rem;
85
- --pds-typography-size-xs: 0.694rem;
87
+ --pds-typography-size-xs: 0.64rem;
86
88
  --pds-z-index-dropdown: 200;
87
89
  --pds-z-index-modal: 500;
88
90
  --pds-z-index-navigation: 100;
package/build/figma/pds-design-tokens-figma.json CHANGED
@@ -659,9 +659,9 @@
659
659
  "quote"
660
660
  ]
661
661
  },
662
- "quote-lg": {
662
+ "quote-sm": {
663
663
  "value": {
664
- "fontSize": "2.074 * 16",
664
+ "fontSize": "1.44 * 16",
665
665
  "fontFamily": "Aleo",
666
666
  "fontWeight": "Italic",
667
667
  "letterSpacing": "0.01 * 100%",
@@ -672,7 +672,7 @@
672
672
  "isSource": true,
673
673
  "original": {
674
674
  "value": {
675
- "fontSize": "{typography.size.3XL} * {figma.typography.size.base}",
675
+ "fontSize": "{typography.size.XL} * {figma.typography.size.base}",
676
676
  "fontFamily": "Aleo",
677
677
  "fontWeight": "Italic",
678
678
  "letterSpacing": "{typography.letter-spacing.S} * 100%",
@@ -680,16 +680,16 @@
680
680
  },
681
681
  "type": "typography"
682
682
  },
683
- "name": "text-body-quote-lg",
683
+ "name": "text-body-quote-sm",
684
684
  "attributes": {
685
685
  "category": "text",
686
686
  "type": "body",
687
- "item": "quote-lg"
687
+ "item": "quote-sm"
688
688
  },
689
689
  "path": [
690
690
  "text",
691
691
  "body",
692
- "quote-lg"
692
+ "quote-sm"
693
693
  ]
694
694
  },
695
695
  "overline": {
@@ -729,7 +729,7 @@
729
729
  },
730
730
  "overline-sm": {
731
731
  "value": {
732
- "fontSize": "0.833 * 16",
732
+ "fontSize": "0.8 * 16",
733
733
  "fontFamily": "Poppins",
734
734
  "fontWeight": 700,
735
735
  "letterSpacing": "0.04 * 100%",
@@ -801,7 +801,7 @@
801
801
  "headings": {
802
802
  "h1": {
803
803
  "value": {
804
- "fontSize": "2.986 * 16",
804
+ "fontSize": "2.488 * 16",
805
805
  "fontWeight": 700,
806
806
  "fontFamily": "Poppins",
807
807
  "lineHeight": "120%"
@@ -811,7 +811,7 @@
811
811
  "isSource": true,
812
812
  "original": {
813
813
  "value": {
814
- "fontSize": "{typography.size.5XL} * {figma.typography.size.base}",
814
+ "fontSize": "{typography.size.4XL} * {figma.typography.size.base}",
815
815
  "fontWeight": "{typography.font-weight.bold}",
816
816
  "fontFamily": "Poppins",
817
817
  "lineHeight": "{typography.line-height.S}"
@@ -832,7 +832,7 @@
832
832
  },
833
833
  "h2": {
834
834
  "value": {
835
- "fontSize": "2.488 * 16",
835
+ "fontSize": "2.074 * 16",
836
836
  "fontWeight": 700,
837
837
  "fontFamily": "Poppins",
838
838
  "lineHeight": "120%"
@@ -842,7 +842,7 @@
842
842
  "isSource": true,
843
843
  "original": {
844
844
  "value": {
845
- "fontSize": "{typography.size.4XL} * {figma.typography.size.base}",
845
+ "fontSize": "{typography.size.3XL} * {figma.typography.size.base}",
846
846
  "fontWeight": "{text.headings.h1.value.fontWeight}",
847
847
  "fontFamily": "{text.headings.h1.value.fontFamily}",
848
848
  "lineHeight": "{text.headings.h1.value.lineHeight}"
@@ -863,7 +863,7 @@
863
863
  },
864
864
  "h3": {
865
865
  "value": {
866
- "fontSize": "2.074 * 16",
866
+ "fontSize": "1.728 * 16",
867
867
  "fontWeight": 700,
868
868
  "fontFamily": "Poppins",
869
869
  "lineHeight": "120%"
@@ -873,7 +873,7 @@
873
873
  "isSource": true,
874
874
  "original": {
875
875
  "value": {
876
- "fontSize": "{typography.size.3XL} * {figma.typography.size.base}",
876
+ "fontSize": "{typography.size.2XL} * {figma.typography.size.base}",
877
877
  "fontWeight": "{text.headings.h1.value.fontWeight}",
878
878
  "fontFamily": "{text.headings.h1.value.fontFamily}",
879
879
  "lineHeight": "{text.headings.h1.value.lineHeight}"
@@ -894,7 +894,7 @@
894
894
  },
895
895
  "h4": {
896
896
  "value": {
897
- "fontSize": "1.728 * 16",
897
+ "fontSize": "1.44 * 16",
898
898
  "fontWeight": 700,
899
899
  "fontFamily": "Poppins",
900
900
  "lineHeight": "120%"
@@ -904,8 +904,8 @@
904
904
  "isSource": true,
905
905
  "original": {
906
906
  "value": {
907
- "fontSize": "{typography.size.2XL} * {figma.typography.size.base}",
908
- "fontWeight": "{text.headings.h2.value.fontWeight}",
907
+ "fontSize": "{typography.size.XL} * {figma.typography.size.base}",
908
+ "fontWeight": "{text.headings.h1.value.fontWeight}",
909
909
  "fontFamily": "{text.headings.h1.value.fontFamily}",
910
910
  "lineHeight": "{text.headings.h1.value.lineHeight}"
911
911
  },
@@ -925,7 +925,7 @@
925
925
  },
926
926
  "h5": {
927
927
  "value": {
928
- "fontSize": "1.44 * 16",
928
+ "fontSize": "1.2 * 16",
929
929
  "fontWeight": 700,
930
930
  "fontFamily": "Poppins",
931
931
  "lineHeight": "120%"
@@ -935,8 +935,8 @@
935
935
  "isSource": true,
936
936
  "original": {
937
937
  "value": {
938
- "fontSize": "{typography.size.XL} * {figma.typography.size.base}",
939
- "fontWeight": "{text.headings.h2.value.fontWeight}",
938
+ "fontSize": "{typography.size.L} * {figma.typography.size.base}",
939
+ "fontWeight": "{text.headings.h1.value.fontWeight}",
940
940
  "fontFamily": "{text.headings.h1.value.fontFamily}",
941
941
  "lineHeight": "{text.headings.h1.value.lineHeight}"
942
942
  },
@@ -956,7 +956,7 @@
956
956
  },
957
957
  "h6": {
958
958
  "value": {
959
- "fontSize": "1.2 * 16",
959
+ "fontSize": "1 * 16",
960
960
  "fontWeight": 700,
961
961
  "fontFamily": "Poppins",
962
962
  "lineHeight": "120%"
@@ -966,8 +966,8 @@
966
966
  "isSource": true,
967
967
  "original": {
968
968
  "value": {
969
- "fontSize": "{typography.size.L} * {figma.typography.size.base}",
970
- "fontWeight": "{text.headings.h2.value.fontWeight}",
969
+ "fontSize": "{typography.size.M} * {figma.typography.size.base}",
970
+ "fontWeight": "{text.headings.h1.value.fontWeight}",
971
971
  "fontFamily": "{text.headings.h1.value.fontFamily}",
972
972
  "lineHeight": "{text.headings.h1.value.lineHeight}"
973
973
  },
@@ -1152,7 +1152,7 @@
1152
1152
  },
1153
1153
  "description": {
1154
1154
  "value": {
1155
- "fontSize": "0.833 * 16",
1155
+ "fontSize": "0.8 * 16",
1156
1156
  "fontFamily": "Poppins",
1157
1157
  "fontWeight": 400,
1158
1158
  "lineHeight": "120%"
@@ -1185,7 +1185,7 @@
1185
1185
  "menu": {
1186
1186
  "item-heading": {
1187
1187
  "value": {
1188
- "fontSize": "0.833 * 16",
1188
+ "fontSize": "0.8 * 16",
1189
1189
  "fontFamily": "Poppins",
1190
1190
  "fontWeight": 700,
1191
1191
  "letterSpacing": "0.04 * 100%",
@@ -1473,7 +1473,7 @@
1473
1473
  },
1474
1474
  "S": {
1475
1475
  "value": {
1476
- "fontSize": "0.833 * 16",
1476
+ "fontSize": "0.8 * 16",
1477
1477
  "fontFamily": "Poppins",
1478
1478
  "fontWeight": 400
1479
1479
  },
@@ -1504,7 +1504,7 @@
1504
1504
  },
1505
1505
  "XS": {
1506
1506
  "value": {
1507
- "fontSize": "0.694 * 16",
1507
+ "fontSize": "0.64 * 16",
1508
1508
  "fontFamily": "Poppins",
1509
1509
  "fontWeight": 400
1510
1510
  },
@@ -1787,7 +1787,7 @@
1787
1787
  },
1788
1788
  "S": {
1789
1789
  "value": {
1790
- "fontSize": "0.833 * 16",
1790
+ "fontSize": "0.8 * 16",
1791
1791
  "fontFamily": "Poppins",
1792
1792
  "fontWeight": 600
1793
1793
  },
@@ -1818,7 +1818,7 @@
1818
1818
  },
1819
1819
  "XS": {
1820
1820
  "value": {
1821
- "fontSize": "0.694 * 16",
1821
+ "fontSize": "0.64 * 16",
1822
1822
  "fontFamily": "Poppins",
1823
1823
  "fontWeight": 600
1824
1824
  },
@@ -2101,7 +2101,7 @@
2101
2101
  },
2102
2102
  "S": {
2103
2103
  "value": {
2104
- "fontSize": "0.833 * 16",
2104
+ "fontSize": "0.8 * 16",
2105
2105
  "fontFamily": "Poppins",
2106
2106
  "fontWeight": 700
2107
2107
  },
@@ -2132,7 +2132,7 @@
2132
2132
  },
2133
2133
  "XS": {
2134
2134
  "value": {
2135
- "fontSize": "0.694 * 16",
2135
+ "fontSize": "0.64 * 16",
2136
2136
  "fontFamily": "Poppins",
2137
2137
  "fontWeight": 700
2138
2138
  },
package/build/json/pds-design-tokens.json CHANGED
@@ -521,28 +521,28 @@
521
521
  }
522
522
  },
523
523
  "padding": {
524
- "small": {
525
- "value": "5%",
524
+ "base": {
525
+ "value": "6%",
526
526
  "public": true,
527
527
  "filePath": "tokens/container/base.json",
528
528
  "isSource": true,
529
529
  "original": {
530
- "value": "5%",
530
+ "value": "6%",
531
531
  "public": true
532
532
  },
533
- "name": "container-padding-small",
533
+ "name": "container-padding-base",
534
534
  "attributes": {
535
535
  "category": "container",
536
536
  "type": "padding",
537
- "item": "small"
537
+ "item": "base"
538
538
  },
539
539
  "path": [
540
540
  "container",
541
541
  "padding",
542
- "small"
542
+ "base"
543
543
  ]
544
544
  },
545
- "medium": {
545
+ "base-breakpoint-md": {
546
546
  "value": "4%",
547
547
  "public": true,
548
548
  "filePath": "tokens/container/base.json",
@@ -551,37 +551,79 @@
551
551
  "value": "4%",
552
552
  "public": true
553
553
  },
554
- "name": "container-padding-medium",
554
+ "name": "container-padding-base-breakpoint-md",
555
555
  "attributes": {
556
556
  "category": "container",
557
557
  "type": "padding",
558
- "item": "medium"
558
+ "item": "base-breakpoint-md"
559
559
  },
560
560
  "path": [
561
561
  "container",
562
562
  "padding",
563
- "medium"
563
+ "base-breakpoint-md"
564
564
  ]
565
565
  },
566
- "large": {
567
- "value": "4%",
566
+ "base-breakpoint-lg": {
567
+ "value": "2%",
568
568
  "public": true,
569
569
  "filePath": "tokens/container/base.json",
570
570
  "isSource": true,
571
571
  "original": {
572
- "value": "4%",
572
+ "value": "2%",
573
+ "public": true
574
+ },
575
+ "name": "container-padding-base-breakpoint-lg",
576
+ "attributes": {
577
+ "category": "container",
578
+ "type": "padding",
579
+ "item": "base-breakpoint-lg"
580
+ },
581
+ "path": [
582
+ "container",
583
+ "padding",
584
+ "base-breakpoint-lg"
585
+ ]
586
+ },
587
+ "narrow-breakpoint-md": {
588
+ "value": "12%",
589
+ "public": true,
590
+ "filePath": "tokens/container/base.json",
591
+ "isSource": true,
592
+ "original": {
593
+ "value": "12%",
594
+ "public": true
595
+ },
596
+ "name": "container-padding-narrow-breakpoint-md",
597
+ "attributes": {
598
+ "category": "container",
599
+ "type": "padding",
600
+ "item": "narrow-breakpoint-md"
601
+ },
602
+ "path": [
603
+ "container",
604
+ "padding",
605
+ "narrow-breakpoint-md"
606
+ ]
607
+ },
608
+ "narrow-breakpoint-lg": {
609
+ "value": "20%",
610
+ "public": true,
611
+ "filePath": "tokens/container/base.json",
612
+ "isSource": true,
613
+ "original": {
614
+ "value": "20%",
573
615
  "public": true
574
616
  },
575
- "name": "container-padding-large",
617
+ "name": "container-padding-narrow-breakpoint-lg",
576
618
  "attributes": {
577
619
  "category": "container",
578
620
  "type": "padding",
579
- "item": "large"
621
+ "item": "narrow-breakpoint-lg"
580
622
  },
581
623
  "path": [
582
624
  "container",
583
625
  "padding",
584
- "large"
626
+ "narrow-breakpoint-lg"
585
627
  ]
586
628
  }
587
629
  }
@@ -1732,12 +1774,14 @@
1732
1774
  "value": "2.986",
1733
1775
  "defaultUnit": "rem",
1734
1776
  "public": true,
1777
+ "comment": "Default h1",
1735
1778
  "filePath": "tokens/typography/base/size.json",
1736
1779
  "isSource": true,
1737
1780
  "original": {
1738
1781
  "value": "2.986",
1739
1782
  "defaultUnit": "rem",
1740
- "public": true
1783
+ "public": true,
1784
+ "comment": "Default h1"
1741
1785
  },
1742
1786
  "name": "typography-size-5-xl",
1743
1787
  "attributes": {
@@ -1778,12 +1822,14 @@
1778
1822
  "value": "2.074",
1779
1823
  "defaultUnit": "rem",
1780
1824
  "public": true,
1825
+ "comment": "Default h2",
1781
1826
  "filePath": "tokens/typography/base/size.json",
1782
1827
  "isSource": true,
1783
1828
  "original": {
1784
1829
  "value": "2.074",
1785
1830
  "defaultUnit": "rem",
1786
- "public": true
1831
+ "public": true,
1832
+ "comment": "Default h2"
1787
1833
  },
1788
1834
  "name": "typography-size-3-xl",
1789
1835
  "attributes": {
@@ -1801,12 +1847,14 @@
1801
1847
  "value": "1.728",
1802
1848
  "defaultUnit": "rem",
1803
1849
  "public": true,
1850
+ "comment": "Default h3",
1804
1851
  "filePath": "tokens/typography/base/size.json",
1805
1852
  "isSource": true,
1806
1853
  "original": {
1807
1854
  "value": "1.728",
1808
1855
  "defaultUnit": "rem",
1809
- "public": true
1856
+ "public": true,
1857
+ "comment": "Default h3"
1810
1858
  },
1811
1859
  "name": "typography-size-2-xl",
1812
1860
  "attributes": {
@@ -1824,12 +1872,14 @@
1824
1872
  "value": "1.44",
1825
1873
  "defaultUnit": "rem",
1826
1874
  "public": true,
1875
+ "comment": "Default h4",
1827
1876
  "filePath": "tokens/typography/base/size.json",
1828
1877
  "isSource": true,
1829
1878
  "original": {
1830
1879
  "value": "1.44",
1831
1880
  "defaultUnit": "rem",
1832
- "public": true
1881
+ "public": true,
1882
+ "comment": "Default h4"
1833
1883
  },
1834
1884
  "name": "typography-size-xl",
1835
1885
  "attributes": {
@@ -1847,12 +1897,14 @@
1847
1897
  "value": "1.2",
1848
1898
  "defaultUnit": "rem",
1849
1899
  "public": true,
1900
+ "comment": "Default h5",
1850
1901
  "filePath": "tokens/typography/base/size.json",
1851
1902
  "isSource": true,
1852
1903
  "original": {
1853
1904
  "value": "1.2",
1854
1905
  "defaultUnit": "rem",
1855
- "public": true
1906
+ "public": true,
1907
+ "comment": "Default h5"
1856
1908
  },
1857
1909
  "name": "typography-size-l",
1858
1910
  "attributes": {
@@ -1868,16 +1920,16 @@
1868
1920
  },
1869
1921
  "M": {
1870
1922
  "value": "1",
1871
- "comment": "Base value.",
1872
1923
  "defaultUnit": "rem",
1873
1924
  "public": true,
1925
+ "comment": "Base value.",
1874
1926
  "filePath": "tokens/typography/base/size.json",
1875
1927
  "isSource": true,
1876
1928
  "original": {
1877
1929
  "value": "1",
1878
- "comment": "Base value.",
1879
1930
  "defaultUnit": "rem",
1880
- "public": true
1931
+ "public": true,
1932
+ "comment": "Base value."
1881
1933
  },
1882
1934
  "name": "typography-size-m",
1883
1935
  "attributes": {
@@ -1892,13 +1944,13 @@
1892
1944
  ]
1893
1945
  },
1894
1946
  "S": {
1895
- "value": "0.833",
1947
+ "value": "0.8",
1896
1948
  "defaultUnit": "rem",
1897
1949
  "public": true,
1898
1950
  "filePath": "tokens/typography/base/size.json",
1899
1951
  "isSource": true,
1900
1952
  "original": {
1901
- "value": "0.833",
1953
+ "value": "0.8",
1902
1954
  "defaultUnit": "rem",
1903
1955
  "public": true
1904
1956
  },
@@ -1915,13 +1967,13 @@
1915
1967
  ]
1916
1968
  },
1917
1969
  "XS": {
1918
- "value": "0.694",
1970
+ "value": "0.64",
1919
1971
  "defaultUnit": "rem",
1920
1972
  "public": true,
1921
1973
  "filePath": "tokens/typography/base/size.json",
1922
1974
  "isSource": true,
1923
1975
  "original": {
1924
- "value": "0.694",
1976
+ "value": "0.64",
1925
1977
  "defaultUnit": "rem",
1926
1978
  "public": true
1927
1979
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pantheon-systems/pds-design-tokens",
3
- "version": "1.0.0-dev.100",
3
+ "version": "1.0.0-dev.102",
4
4
  "description": "Design Tokens for the Pantheon Design System",
5
5
  "homepage": "https://pantheon.io",
6
6
  "keywords": [