@primer/react-brand 0.17.0-rc.c0b291e → 0.17.0-rc.e3d3fb9

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 (136) hide show
  1. package/lib/Card/Card.d.ts +10 -1
  2. package/lib/Label/Label.d.ts +1 -1
  3. package/lib/Testimonial/Testimonial.d.ts +6 -1
  4. package/lib/constants.d.ts +2 -0
  5. package/lib/css/main.css +269 -45
  6. package/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes.css +1 -1
  7. package/lib/design-tokens/css/tokens/base/colors/color-scales.css +1 -1
  8. package/lib/design-tokens/css/tokens/base/size/size.css +1 -1
  9. package/lib/design-tokens/css/tokens/base/typography/typography.css +1 -1
  10. package/lib/design-tokens/css/tokens/functional/colors/global-with-modes.css +1 -1
  11. package/lib/design-tokens/css/tokens/functional/colors/global.css +1 -1
  12. package/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css +1 -1
  13. package/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css +1 -1
  14. package/lib/design-tokens/css/tokens/functional/components/anchor-nav/colors-with-modes.css +1 -1
  15. package/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css +1 -1
  16. package/lib/design-tokens/css/tokens/functional/components/card/base.css +1 -1
  17. package/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css +57 -1
  18. package/lib/design-tokens/css/tokens/functional/components/card/colors.css +29 -1
  19. package/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes.css +1 -1
  20. package/lib/design-tokens/css/tokens/functional/components/control/base.css +1 -1
  21. package/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css +1 -1
  22. package/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css +1 -1
  23. package/lib/design-tokens/css/tokens/functional/components/faq/base.css +1 -1
  24. package/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css +1 -1
  25. package/lib/design-tokens/css/tokens/functional/components/faq/colors.css +1 -1
  26. package/lib/design-tokens/css/tokens/functional/components/footer/colors-with-modes.css +1 -1
  27. package/lib/design-tokens/css/tokens/functional/components/footer/colors.css +1 -1
  28. package/lib/design-tokens/css/tokens/functional/components/hero/base.css +1 -1
  29. package/lib/design-tokens/css/tokens/functional/components/image/base.css +1 -1
  30. package/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes.css +1 -1
  31. package/lib/design-tokens/css/tokens/functional/components/inline-link/colors.css +1 -1
  32. package/lib/design-tokens/css/tokens/functional/components/label/colors-with-modes.css +3 -3
  33. package/lib/design-tokens/css/tokens/functional/components/label/colors.css +2 -2
  34. package/lib/design-tokens/css/tokens/functional/components/river/base.css +1 -1
  35. package/lib/design-tokens/css/tokens/functional/components/subdomain-nav-bar/colors-with-modes.css +1 -1
  36. package/lib/design-tokens/css/tokens/functional/size/border.css +1 -1
  37. package/lib/design-tokens/css/tokens/functional/size/breakpoints.css +1 -1
  38. package/lib/design-tokens/css/tokens/functional/size/size-coarse.css +1 -1
  39. package/lib/design-tokens/css/tokens/functional/size/size-fine.css +1 -1
  40. package/lib/design-tokens/css/tokens/functional/size/size.css +1 -1
  41. package/lib/design-tokens/css/tokens/functional/typography/typography-responsive.css +1 -1
  42. package/lib/design-tokens/css/tokens/functional/typography/typography.css +1 -1
  43. package/lib/design-tokens/js/module/tokens/base/colors/color-scales.js +1 -1
  44. package/lib/design-tokens/js/module/tokens/base/size/size.js +1 -1
  45. package/lib/design-tokens/js/module/tokens/base/typography/typography.js +1 -1
  46. package/lib/design-tokens/js/module/tokens/functional/colors/global.js +1 -1
  47. package/lib/design-tokens/js/module/tokens/functional/components/card/base.js +1 -1
  48. package/lib/design-tokens/js/module/tokens/functional/components/card/colors.js +539 -1
  49. package/lib/design-tokens/js/module/tokens/functional/components/control/base.js +1 -1
  50. package/lib/design-tokens/js/module/tokens/functional/components/faq/base.js +1 -1
  51. package/lib/design-tokens/js/module/tokens/functional/components/faq/colors.js +1 -1
  52. package/lib/design-tokens/js/module/tokens/functional/components/footer/colors.js +1 -1
  53. package/lib/design-tokens/js/module/tokens/functional/components/hero/base.js +1 -1
  54. package/lib/design-tokens/js/module/tokens/functional/components/image/base.js +1 -1
  55. package/lib/design-tokens/js/module/tokens/functional/components/inline-link/colors.js +1 -1
  56. package/lib/design-tokens/js/module/tokens/functional/components/label/colors.js +5 -5
  57. package/lib/design-tokens/js/module/tokens/functional/components/river/base.js +1 -1
  58. package/lib/design-tokens/js/module/tokens/functional/size/border.js +1 -1
  59. package/lib/design-tokens/js/module/tokens/functional/size/breakpoints.js +1 -1
  60. package/lib/design-tokens/js/module/tokens/functional/size/size-coarse.js +1 -1
  61. package/lib/design-tokens/js/module/tokens/functional/size/size-fine.js +1 -1
  62. package/lib/design-tokens/js/module/tokens/functional/size/size.js +1 -1
  63. package/lib/design-tokens/js/module/tokens/functional/size/viewport.js +1 -1
  64. package/lib/design-tokens/js/module/tokens/functional/typography/typography-responsive.js +1 -1
  65. package/lib/design-tokens/js/module/tokens/functional/typography/typography.js +1 -1
  66. package/lib/design-tokens/js/tokens/base/colors/color-scales.js +1 -1
  67. package/lib/design-tokens/js/tokens/base/size/size.js +1 -1
  68. package/lib/design-tokens/js/tokens/base/typography/typography.js +1 -1
  69. package/lib/design-tokens/js/tokens/functional/colors/global.js +1 -1
  70. package/lib/design-tokens/js/tokens/functional/components/card/base.js +1 -1
  71. package/lib/design-tokens/js/tokens/functional/components/card/colors.js +30 -2
  72. package/lib/design-tokens/js/tokens/functional/components/control/base.js +1 -1
  73. package/lib/design-tokens/js/tokens/functional/components/faq/base.js +1 -1
  74. package/lib/design-tokens/js/tokens/functional/components/faq/colors.js +1 -1
  75. package/lib/design-tokens/js/tokens/functional/components/footer/colors.js +1 -1
  76. package/lib/design-tokens/js/tokens/functional/components/hero/base.js +1 -1
  77. package/lib/design-tokens/js/tokens/functional/components/image/base.js +1 -1
  78. package/lib/design-tokens/js/tokens/functional/components/inline-link/colors.js +1 -1
  79. package/lib/design-tokens/js/tokens/functional/components/label/colors.js +2 -2
  80. package/lib/design-tokens/js/tokens/functional/components/river/base.js +1 -1
  81. package/lib/design-tokens/js/tokens/functional/size/border.js +1 -1
  82. package/lib/design-tokens/js/tokens/functional/size/breakpoints.js +1 -1
  83. package/lib/design-tokens/js/tokens/functional/size/size-coarse.js +1 -1
  84. package/lib/design-tokens/js/tokens/functional/size/size-fine.js +1 -1
  85. package/lib/design-tokens/js/tokens/functional/size/size.js +1 -1
  86. package/lib/design-tokens/js/tokens/functional/size/viewport.js +1 -1
  87. package/lib/design-tokens/js/tokens/functional/typography/typography-responsive.js +1 -1
  88. package/lib/design-tokens/js/tokens/functional/typography/typography.js +1 -1
  89. package/lib/design-tokens/ts/tokens/base/colors/color-scales.d.ts +1 -1
  90. package/lib/design-tokens/ts/tokens/base/colors/color-scales.js +1 -1
  91. package/lib/design-tokens/ts/tokens/base/size/size.d.ts +1 -1
  92. package/lib/design-tokens/ts/tokens/base/size/size.js +1 -1
  93. package/lib/design-tokens/ts/tokens/base/typography/typography.d.ts +1 -1
  94. package/lib/design-tokens/ts/tokens/base/typography/typography.js +1 -1
  95. package/lib/design-tokens/ts/tokens/functional/colors/global.d.ts +1 -1
  96. package/lib/design-tokens/ts/tokens/functional/colors/global.js +1 -1
  97. package/lib/design-tokens/ts/tokens/functional/components/card/base.d.ts +1 -1
  98. package/lib/design-tokens/ts/tokens/functional/components/card/base.js +1 -1
  99. package/lib/design-tokens/ts/tokens/functional/components/card/colors.d.ts +35 -1
  100. package/lib/design-tokens/ts/tokens/functional/components/card/colors.js +35 -1
  101. package/lib/design-tokens/ts/tokens/functional/components/control/base.d.ts +1 -1
  102. package/lib/design-tokens/ts/tokens/functional/components/control/base.js +1 -1
  103. package/lib/design-tokens/ts/tokens/functional/components/faq/base.d.ts +1 -1
  104. package/lib/design-tokens/ts/tokens/functional/components/faq/base.js +1 -1
  105. package/lib/design-tokens/ts/tokens/functional/components/faq/colors.d.ts +1 -1
  106. package/lib/design-tokens/ts/tokens/functional/components/faq/colors.js +1 -1
  107. package/lib/design-tokens/ts/tokens/functional/components/footer/colors.d.ts +1 -1
  108. package/lib/design-tokens/ts/tokens/functional/components/footer/colors.js +1 -1
  109. package/lib/design-tokens/ts/tokens/functional/components/hero/base.d.ts +1 -1
  110. package/lib/design-tokens/ts/tokens/functional/components/hero/base.js +1 -1
  111. package/lib/design-tokens/ts/tokens/functional/components/image/base.d.ts +1 -1
  112. package/lib/design-tokens/ts/tokens/functional/components/image/base.js +1 -1
  113. package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.d.ts +1 -1
  114. package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.js +1 -1
  115. package/lib/design-tokens/ts/tokens/functional/components/label/colors.d.ts +1 -1
  116. package/lib/design-tokens/ts/tokens/functional/components/label/colors.js +2 -2
  117. package/lib/design-tokens/ts/tokens/functional/components/river/base.d.ts +1 -1
  118. package/lib/design-tokens/ts/tokens/functional/components/river/base.js +1 -1
  119. package/lib/design-tokens/ts/tokens/functional/size/border.d.ts +1 -1
  120. package/lib/design-tokens/ts/tokens/functional/size/border.js +1 -1
  121. package/lib/design-tokens/ts/tokens/functional/size/breakpoints.d.ts +1 -1
  122. package/lib/design-tokens/ts/tokens/functional/size/breakpoints.js +1 -1
  123. package/lib/design-tokens/ts/tokens/functional/size/size-coarse.d.ts +1 -1
  124. package/lib/design-tokens/ts/tokens/functional/size/size-coarse.js +1 -1
  125. package/lib/design-tokens/ts/tokens/functional/size/size-fine.d.ts +1 -1
  126. package/lib/design-tokens/ts/tokens/functional/size/size-fine.js +1 -1
  127. package/lib/design-tokens/ts/tokens/functional/size/size.d.ts +1 -1
  128. package/lib/design-tokens/ts/tokens/functional/size/size.js +1 -1
  129. package/lib/design-tokens/ts/tokens/functional/size/viewport.d.ts +1 -1
  130. package/lib/design-tokens/ts/tokens/functional/size/viewport.js +1 -1
  131. package/lib/design-tokens/ts/tokens/functional/typography/typography-responsive.d.ts +1 -1
  132. package/lib/design-tokens/ts/tokens/functional/typography/typography-responsive.js +1 -1
  133. package/lib/design-tokens/ts/tokens/functional/typography/typography.d.ts +1 -1
  134. package/lib/design-tokens/ts/tokens/functional/typography/typography.js +1 -1
  135. package/lib/index.js +1 -1
  136. package/package.json +1 -1
package/lib/css/main.css CHANGED
@@ -89,7 +89,7 @@ select {
89
89
 
90
90
  /**
91
91
  * Do not edit directly
92
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
92
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
93
93
  */
94
94
 
95
95
  :root,
@@ -629,7 +629,7 @@ select {
629
629
 
630
630
  /**
631
631
  * Do not edit directly
632
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
632
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
633
633
  */
634
634
 
635
635
  :root {
@@ -654,7 +654,7 @@ select {
654
654
 
655
655
  /**
656
656
  * Do not edit directly
657
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
657
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
658
658
  */
659
659
 
660
660
  :root {
@@ -669,7 +669,7 @@ select {
669
669
 
670
670
  /**
671
671
  * Do not edit directly
672
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
672
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
673
673
  */
674
674
 
675
675
  :root {
@@ -848,7 +848,7 @@ select {
848
848
 
849
849
  /**
850
850
  * Do not edit directly
851
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
851
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
852
852
  */
853
853
 
854
854
  :root {
@@ -862,7 +862,7 @@ select {
862
862
 
863
863
  /**
864
864
  * Do not edit directly
865
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
865
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
866
866
  */
867
867
 
868
868
  :root {
@@ -880,7 +880,7 @@ select {
880
880
 
881
881
  /**
882
882
  * Do not edit directly
883
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
883
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
884
884
  */
885
885
 
886
886
  :root,
@@ -1182,7 +1182,7 @@ select {
1182
1182
 
1183
1183
  /**
1184
1184
  * Do not edit directly
1185
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
1185
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
1186
1186
  */
1187
1187
 
1188
1188
  :root,
@@ -1632,7 +1632,7 @@ select {
1632
1632
 
1633
1633
  /**
1634
1634
  * Do not edit directly
1635
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
1635
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
1636
1636
  */
1637
1637
 
1638
1638
  :root {
@@ -1653,7 +1653,7 @@ select {
1653
1653
 
1654
1654
  /**
1655
1655
  * Do not edit directly
1656
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
1656
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
1657
1657
  */
1658
1658
 
1659
1659
  :root {
@@ -1900,6 +1900,11 @@ select {
1900
1900
  .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___iQd2r {
1901
1901
  display: none;
1902
1902
  }
1903
+
1904
+ .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list--invisible___HnkQO {
1905
+ display: none;
1906
+ }
1907
+
1903
1908
  .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list--visible___ZeoFv {
1904
1909
  display: block;
1905
1910
  margin: 0;
@@ -1928,15 +1933,22 @@ select {
1928
1933
  /* overflow: hidden; */
1929
1934
  }
1930
1935
  }
1936
+
1937
+ @media screen and (min-width: 768px) {
1938
+ .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___iQd2r {
1939
+ max-width: 100px;
1940
+ }
1941
+ }
1942
+
1931
1943
  @media screen and (min-width: 850px) {
1932
1944
  .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___iQd2r {
1933
- max-width: 320px;
1945
+ max-width: 200px;
1934
1946
  }
1935
1947
  }
1936
1948
 
1937
1949
  @media screen and (min-width: 1024px) {
1938
1950
  .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___iQd2r {
1939
- max-width: 340px;
1951
+ max-width: 300px;
1940
1952
  }
1941
1953
  }
1942
1954
 
@@ -2262,12 +2274,6 @@ select {
2262
2274
  white-space: nowrap;
2263
2275
  }
2264
2276
 
2265
- @media screen and (min-width: 48rem) and (max-width: 1023px) {
2266
- .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-cta-button--secondary___P0FJH {
2267
- display: none;
2268
- }
2269
- }
2270
-
2271
2277
  @media screen and (min-width: 1024px) {
2272
2278
  .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-cta-button--secondary___P0FJH {
2273
2279
  display: inline-flex;
@@ -2451,7 +2457,7 @@ select {
2451
2457
 
2452
2458
  /**
2453
2459
  * Do not edit directly
2454
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
2460
+ * Generated on Wed, 26 Apr 2023 06:27:03 GMT
2455
2461
  */
2456
2462
 
2457
2463
  :root,
@@ -2479,7 +2485,7 @@ select {
2479
2485
 
2480
2486
  /**
2481
2487
  * Do not edit directly
2482
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
2488
+ * Generated on Wed, 26 Apr 2023 06:27:03 GMT
2483
2489
  */
2484
2490
 
2485
2491
  :root,
@@ -2596,12 +2602,12 @@ select {
2596
2602
 
2597
2603
  /**
2598
2604
  * Do not edit directly
2599
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
2605
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
2600
2606
  */
2601
2607
 
2602
2608
  :root,
2603
2609
  [data-color-mode="light"] {
2604
- --brand-Label-color-default: var(--base-color-scale-blue-5);
2610
+ --brand-Label-color-default: var(--brand-color-text-default);
2605
2611
  --brand-Label-color-blue: var(--base-color-scale-blue-5);
2606
2612
  --brand-Label-color-blue-purple-start: var(--base-color-scale-blue-5);
2607
2613
  --brand-Label-color-blue-purple-end: var(--base-color-scale-purple-5);
@@ -2628,7 +2634,7 @@ select {
2628
2634
  }
2629
2635
 
2630
2636
  [data-color-mode="dark"] {
2631
- --brand-Label-color-default: var(--base-color-scale-blue-4);
2637
+ --brand-Label-color-default: var(--brand-color-text-default);
2632
2638
  --brand-Label-color-blue: var(--base-color-scale-blue-0);
2633
2639
  --brand-Label-color-blue-purple-start: var(--base-color-scale-blue-2);
2634
2640
  --brand-Label-color-blue-purple-end: var(--base-color-scale-purple-3);
@@ -2710,7 +2716,7 @@ select {
2710
2716
  }
2711
2717
 
2712
2718
  .Primer_Brand__Label-module__Label--color-default___YCx2l {
2713
- --brand-Label-color: var(--brand-color-text-default);
2719
+ --brand-Label-color: var(--brand-Label-color-default);
2714
2720
  }
2715
2721
 
2716
2722
  .Primer_Brand__Label-module__Label--color-blue___lZSxf {
@@ -2829,7 +2835,7 @@ select {
2829
2835
 
2830
2836
  /**
2831
2837
  * Do not edit directly
2832
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
2838
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
2833
2839
  */
2834
2840
 
2835
2841
  :root,
@@ -2986,7 +2992,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
2986
2992
 
2987
2993
  /**
2988
2994
  * Do not edit directly
2989
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
2995
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
2990
2996
  */
2991
2997
 
2992
2998
  :root {
@@ -2996,7 +3002,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
2996
3002
 
2997
3003
  /**
2998
3004
  * Do not edit directly
2999
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
3005
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
3000
3006
  */
3001
3007
 
3002
3008
  :root,
@@ -3066,7 +3072,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
3066
3072
 
3067
3073
  /**
3068
3074
  * Do not edit directly
3069
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
3075
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
3070
3076
  */
3071
3077
 
3072
3078
  :root {
@@ -3085,7 +3091,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
3085
3091
 
3086
3092
  /**
3087
3093
  * Do not edit directly
3088
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
3094
+ * Generated on Wed, 26 Apr 2023 06:27:03 GMT
3089
3095
  */
3090
3096
 
3091
3097
  :root,
@@ -4028,7 +4034,7 @@ Fixes safari bug where outline doesn't respect border-radius
4028
4034
 
4029
4035
  /**
4030
4036
  * Do not edit directly
4031
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
4037
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
4032
4038
  */
4033
4039
 
4034
4040
  :root {
@@ -4553,12 +4559,24 @@ Fixes safari bug where outline doesn't respect border-radius
4553
4559
  justify-items: center;
4554
4560
  }
4555
4561
 
4562
+ .Primer_Brand__Testimonial-module__Testimonial--size-large___pF70c {
4563
+ gap: var(--base-size-24);
4564
+ }
4565
+
4556
4566
  .Primer_Brand__Testimonial-module__Testimonial-quote___QXF1F {
4557
4567
  font-family: var(--brand-fontStack-sansSerif);
4568
+ font-size: var(--brand-text-size-300);
4558
4569
  margin-top: calc(var(--base-size-16) * -1); /* negate grid gap */
4559
4570
  display: block;
4560
4571
  }
4561
4572
 
4573
+ .Primer_Brand__Testimonial-module__Testimonial--size-large___pF70c .Primer_Brand__Testimonial-module__Testimonial-quote___QXF1F {
4574
+ font-size: var(--brand-text-size-700);
4575
+ font-weight: var(--base-text-weight-semibold);
4576
+ letter-spacing: var(--brand-text-letterSpacing-900);
4577
+ line-height: 1.2; /* requires custom line-height */
4578
+ }
4579
+
4562
4580
  .Primer_Brand__Testimonial-module__Testimonial-from___Kfj__ {
4563
4581
  font-family: var(--brand-fontStack-monospace);
4564
4582
  }
@@ -4570,7 +4588,7 @@ Fixes safari bug where outline doesn't respect border-radius
4570
4588
 
4571
4589
  /**
4572
4590
  * Do not edit directly
4573
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
4591
+ * Generated on Wed, 26 Apr 2023 06:27:03 GMT
4574
4592
  */
4575
4593
 
4576
4594
  :root,
@@ -4880,7 +4898,7 @@ Fixes safari bug where outline doesn't respect border-radius
4880
4898
 
4881
4899
  /**
4882
4900
  * Do not edit directly
4883
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
4901
+ * Generated on Wed, 26 Apr 2023 06:27:03 GMT
4884
4902
  */
4885
4903
 
4886
4904
  :root,
@@ -5279,7 +5297,7 @@ html {
5279
5297
 
5280
5298
  /**
5281
5299
  * Do not edit directly
5282
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
5300
+ * Generated on Wed, 26 Apr 2023 06:27:03 GMT
5283
5301
  */
5284
5302
 
5285
5303
  :root,
@@ -5460,7 +5478,7 @@ html {
5460
5478
 
5461
5479
  /**
5462
5480
  * Do not edit directly
5463
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
5481
+ * Generated on Wed, 26 Apr 2023 06:27:03 GMT
5464
5482
  */
5465
5483
 
5466
5484
  :root,
@@ -5580,7 +5598,7 @@ html {
5580
5598
 
5581
5599
  /**
5582
5600
  * Do not edit directly
5583
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
5601
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
5584
5602
  */
5585
5603
 
5586
5604
  :root {
@@ -5592,22 +5610,76 @@ html {
5592
5610
 
5593
5611
  /**
5594
5612
  * Do not edit directly
5595
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
5613
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
5596
5614
  */
5597
5615
 
5598
5616
  :root,
5599
5617
  [data-color-mode="light"] {
5600
5618
  --brand-Card-background-default: var(--brand-color-canvas-default);
5619
+ --brand-Card-icon-background-default: var(--base-color-scale-gray-0);
5620
+ --brand-Card-icon-background-blue: var(--base-color-scale-blue-0);
5621
+ --brand-Card-icon-background-coral: var(--base-color-scale-coral-0);
5622
+ --brand-Card-icon-background-green: var(--base-color-scale-green-0);
5623
+ --brand-Card-icon-background-gray: var(--base-color-scale-gray-0);
5624
+ --brand-Card-icon-background-indigo: var(--base-color-scale-indigo-0);
5625
+ --brand-Card-icon-background-lemon: var(--base-color-scale-lemon-0);
5626
+ --brand-Card-icon-background-lime: var(--base-color-scale-lime-0);
5627
+ --brand-Card-icon-background-orange: var(--base-color-scale-orange-0);
5628
+ --brand-Card-icon-background-pink: var(--base-color-scale-pink-0);
5629
+ --brand-Card-icon-background-purple: var(--base-color-scale-purple-0);
5630
+ --brand-Card-icon-background-red: var(--base-color-scale-red-0);
5631
+ --brand-Card-icon-background-teal: var(--base-color-scale-teal-0);
5632
+ --brand-Card-icon-background-yellow: var(--base-color-scale-yellow-0);
5633
+ --brand-Card-icon-color-default: var(--brand-color-scale-gray-5);
5634
+ --brand-Card-icon-color-blue: var(--base-color-scale-blue-5);
5635
+ --brand-Card-icon-color-coral: var(--base-color-scale-coral-5);
5636
+ --brand-Card-icon-color-green: var(--base-color-scale-green-5);
5637
+ --brand-Card-icon-color-gray: var(--base-color-scale-gray-6);
5638
+ --brand-Card-icon-color-indigo: var(--base-color-scale-indigo-5);
5639
+ --brand-Card-icon-color-lemon: var(--base-color-scale-lemon-5);
5640
+ --brand-Card-icon-color-lime: var(--base-color-scale-lime-5);
5641
+ --brand-Card-icon-color-orange: var(--base-color-scale-orange-5);
5642
+ --brand-Card-icon-color-pink: var(--base-color-scale-pink-5);
5643
+ --brand-Card-icon-color-purple: var(--base-color-scale-purple-5);
5644
+ --brand-Card-icon-color-red: var(--base-color-scale-red-5);
5645
+ --brand-Card-icon-color-teal: var(--base-color-scale-teal-5);
5646
+ --brand-Card-icon-color-yellow: var(--base-color-scale-yellow-5);
5601
5647
  }
5602
5648
 
5603
5649
  [data-color-mode="dark"] {
5604
5650
  --brand-Card-background-default: var(--brand-color-canvas-subtle);
5651
+ --brand-Card-icon-background-default: var(--base-color-scale-gray-8);
5652
+ --brand-Card-icon-background-blue: var(--base-color-scale-blue-8);
5653
+ --brand-Card-icon-background-coral: var(--base-color-scale-coral-8);
5654
+ --brand-Card-icon-background-green: var(--base-color-scale-green-8);
5655
+ --brand-Card-icon-background-gray: var(--base-color-scale-gray-8);
5656
+ --brand-Card-icon-background-indigo: var(--base-color-scale-indigo-8);
5657
+ --brand-Card-icon-background-lemon: var(--base-color-scale-lemon-8);
5658
+ --brand-Card-icon-background-lime: var(--base-color-scale-lime-8);
5659
+ --brand-Card-icon-background-orange: var(--base-color-scale-orange-8);
5660
+ --brand-Card-icon-background-pink: var(--base-color-scale-pink-8);
5661
+ --brand-Card-icon-background-purple: var(--base-color-scale-purple-8);
5662
+ --brand-Card-icon-background-red: var(--base-color-scale-red-8);
5663
+ --brand-Card-icon-background-teal: var(--base-color-scale-teal-8);
5664
+ --brand-Card-icon-background-yellow: var(--base-color-scale-yellow-8);
5665
+ --brand-Card-icon-color-default: var(--brand-color-scale-gray-3);
5666
+ --brand-Card-icon-color-blue: var(--base-color-scale-blue-3);
5667
+ --brand-Card-icon-color-coral: var(--base-color-scale-coral-3);
5668
+ --brand-Card-icon-color-green: var(--base-color-scale-green-3);
5669
+ --brand-Card-icon-color-gray: var(--base-color-scale-gray-3);
5670
+ --brand-Card-icon-color-indigo: var(--base-color-scale-indigo-3);
5671
+ --brand-Card-icon-color-lemon: var(--base-color-scale-lemon-3);
5672
+ --brand-Card-icon-color-lime: var(--base-color-scale-lime-3);
5673
+ --brand-Card-icon-color-orange: var(--base-color-scale-orange-3);
5674
+ --brand-Card-icon-color-pink: var(--base-color-scale-pink-3);
5675
+ --brand-Card-icon-color-purple: var(--base-color-scale-purple-3);
5676
+ --brand-Card-icon-color-red: var(--base-color-scale-red-3);
5677
+ --brand-Card-icon-color-teal: var(--base-color-scale-teal-3);
5678
+ --brand-Card-icon-color-yellow: var(--base-color-scale-yellow-3);
5605
5679
  }
5606
5680
 
5607
5681
  .Primer_Brand__Card-module__Card___ByGEk {
5608
5682
  max-width: var(--brand-Card-maxWidth);
5609
- display: flex;
5610
- flex-direction: column;
5611
5683
  text-decoration: none;
5612
5684
  color: var(--brand-color-text-default);
5613
5685
  background-color: var(--brand-Card-background-default);
@@ -5616,30 +5688,187 @@ html {
5616
5688
  border-radius: var(--brand-borderRadius-medium);
5617
5689
  padding: var(--base-size-32);
5618
5690
  transition: transform var(--brand-Card-animation-duration) var(--brand-Card-animation-easing);
5691
+ display: grid;
5692
+ grid-template-columns: 1fr 1fr;
5693
+ grid-template-areas:
5694
+ 'icon icon'
5695
+ 'label label'
5696
+ 'heading heading'
5697
+ 'description description'
5698
+ 'action action';
5699
+ flex: auto;
5700
+ grid-template-rows: auto auto auto 1fr;
5701
+ }
5702
+
5703
+ .Primer_Brand__Card-module__Card--has-icon___vBmET {
5704
+ grid-template-areas:
5705
+ 'icon label'
5706
+ 'heading heading'
5707
+ 'description description'
5708
+ 'action action';
5709
+ }
5710
+
5711
+ .Primer_Brand__Card-module__Card--has-icon___vBmET .Primer_Brand__Card-module__Card__label___EAot7 {
5712
+ justify-self: flex-end;
5713
+ }
5714
+
5715
+ .Primer_Brand__Card-module__Card--has-icon___vBmET .Primer_Brand__Card-module__Card__label___EAot7,
5716
+ .Primer_Brand__Card-module__Card--has-icon___vBmET .Primer_Brand__Card-module__Card__icon___H4tc9 {
5717
+ align-self: center;
5619
5718
  }
5620
5719
 
5621
5720
  .Primer_Brand__Card-module__Card___ByGEk:hover {
5622
5721
  transform: scale3d(1.025, 1.025, 1);
5623
5722
  }
5624
5723
 
5724
+ .Primer_Brand__Card-module__Card__icon___H4tc9 {
5725
+ margin-bottom: var(--base-size-16);
5726
+ grid-area: icon;
5727
+ }
5728
+
5729
+ .Primer_Brand__Card-module__Card__icon--badge___p6riH {
5730
+ width: var(--base-size-44);
5731
+ height: var(--base-size-44);
5732
+ border-radius: 50%;
5733
+ display: flex;
5734
+ align-items: center;
5735
+ justify-content: center;
5736
+ }
5737
+
5625
5738
  .Primer_Brand__Card-module__Card__label___EAot7 {
5626
- margin-bottom: var(--base-size-24);
5739
+ margin-bottom: var(--base-size-16);
5740
+ grid-area: label;
5627
5741
  }
5628
5742
 
5629
5743
  .Primer_Brand__Card-module__Card__heading___INFhp {
5630
5744
  margin-bottom: var(--base-size-20);
5745
+ grid-area: heading;
5631
5746
  }
5632
5747
 
5633
5748
  .Primer_Brand__Card-module__Card__description___KN9CH {
5634
5749
  margin-bottom: var(--base-size-48);
5750
+ grid-area: description;
5635
5751
  }
5636
5752
 
5637
5753
  .Primer_Brand__Card-module__Card__action___C6sRY {
5754
+ grid-area: action;
5638
5755
  margin-top: auto;
5639
5756
  display: inline-flex;
5640
5757
  align-items: center;
5641
5758
  }
5642
5759
 
5760
+ .Primer_Brand__Card-module__Card__icon--color-default___Y2DUV {
5761
+ color: var(--brand-Card-icon-color-default);
5762
+ }
5763
+
5764
+ .Primer_Brand__Card-module__Card__icon--color-default___Y2DUV.Primer_Brand__Card-module__Card__icon--badge___p6riH {
5765
+ background-color: var(--brand-Card-icon-background-default);
5766
+ }
5767
+
5768
+ .Primer_Brand__Card-module__Card__icon--color-blue___NuYV8 {
5769
+ color: var(--brand-Card-icon-color-blue);
5770
+ }
5771
+
5772
+ .Primer_Brand__Card-module__Card__icon--color-blue___NuYV8.Primer_Brand__Card-module__Card__icon--badge___p6riH {
5773
+ background-color: var(--brand-Card-icon-background-blue);
5774
+ }
5775
+
5776
+ .Primer_Brand__Card-module__Card__icon--color-coral___rYl0b {
5777
+ color: var(--brand-Card-icon-color-coral);
5778
+ }
5779
+
5780
+ .Primer_Brand__Card-module__Card__icon--color-coral___rYl0b.Primer_Brand__Card-module__Card__icon--badge___p6riH {
5781
+ background-color: var(--brand-Card-icon-background-coral);
5782
+ }
5783
+
5784
+ .Primer_Brand__Card-module__Card__icon--color-green___xz7Vq {
5785
+ color: var(--brand-Card-icon-color-green);
5786
+ }
5787
+
5788
+ .Primer_Brand__Card-module__Card__icon--color-green___xz7Vq.Primer_Brand__Card-module__Card__icon--badge___p6riH {
5789
+ background-color: var(--brand-Card-icon-background-green);
5790
+ }
5791
+
5792
+ .Primer_Brand__Card-module__Card__icon--color-gray___gYwWP {
5793
+ color: var(--brand-Card-icon-color-gray);
5794
+ }
5795
+
5796
+ .Primer_Brand__Card-module__Card__icon--color-gray___gYwWP.Primer_Brand__Card-module__Card__icon--badge___p6riH {
5797
+ background-color: var(--brand-Card-icon-background-gray);
5798
+ }
5799
+
5800
+ .Primer_Brand__Card-module__Card__icon--color-indigo___xHafP {
5801
+ color: var(--brand-Card-icon-color-indigo);
5802
+ }
5803
+
5804
+ .Primer_Brand__Card-module__Card__icon--color-indigo___xHafP.Primer_Brand__Card-module__Card__icon--badge___p6riH {
5805
+ background-color: var(--brand-Card-icon-background-indigo);
5806
+ }
5807
+
5808
+ .Primer_Brand__Card-module__Card__icon--color-lemon___KT2Uh {
5809
+ color: var(--brand-Card-icon-color-lemon);
5810
+ }
5811
+
5812
+ .Primer_Brand__Card-module__Card__icon--color-lemon___KT2Uh.Primer_Brand__Card-module__Card__icon--badge___p6riH {
5813
+ background-color: var(--brand-Card-icon-background-lemon);
5814
+ }
5815
+
5816
+ .Primer_Brand__Card-module__Card__icon--color-lime___P9pP0 {
5817
+ color: var(--brand-Label-color-lime);
5818
+ }
5819
+
5820
+ .Primer_Brand__Card-module__Card__icon--color-lime___P9pP0.Primer_Brand__Card-module__Card__icon--badge___p6riH {
5821
+ background-color: var(--brand-Card-icon-background-lime);
5822
+ }
5823
+
5824
+ .Primer_Brand__Card-module__Card__icon--color-orange___s1gIr {
5825
+ color: var(--brand-Card-icon-color-orange);
5826
+ }
5827
+
5828
+ .Primer_Brand__Card-module__Card__icon--color-orange___s1gIr.Primer_Brand__Card-module__Card__icon--badge___p6riH {
5829
+ background-color: var(--brand-Card-icon-background-orange);
5830
+ }
5831
+
5832
+ .Primer_Brand__Card-module__Card__icon--color-pink___I7Qpw {
5833
+ color: var(--brand-Card-icon-color-pink);
5834
+ }
5835
+
5836
+ .Primer_Brand__Card-module__Card__icon--color-pink___I7Qpw.Primer_Brand__Card-module__Card__icon--badge___p6riH {
5837
+ background-color: var(--brand-Card-icon-background-pink);
5838
+ }
5839
+
5840
+ .Primer_Brand__Card-module__Card__icon--color-purple___G0J2O {
5841
+ color: var(--brand-Card-icon-color-purple);
5842
+ }
5843
+
5844
+ .Primer_Brand__Card-module__Card__icon--color-purple___G0J2O.Primer_Brand__Card-module__Card__icon--badge___p6riH {
5845
+ background-color: var(--brand-Card-icon-background-purple);
5846
+ }
5847
+
5848
+ .Primer_Brand__Card-module__Card__icon--color-red___lGSe1 {
5849
+ color: var(--brand-Card-icon-color-red);
5850
+ }
5851
+
5852
+ .Primer_Brand__Card-module__Card__icon--color-red___lGSe1.Primer_Brand__Card-module__Card__icon--badge___p6riH {
5853
+ background-color: var(--brand-Card-icon-background-red);
5854
+ }
5855
+
5856
+ .Primer_Brand__Card-module__Card__icon--color-teal___CsA4p {
5857
+ color: var(--brand-Card-icon-color-teal);
5858
+ }
5859
+
5860
+ .Primer_Brand__Card-module__Card__icon--color-teal___CsA4p.Primer_Brand__Card-module__Card__icon--badge___p6riH {
5861
+ background-color: var(--brand-Card-icon-background-teal);
5862
+ }
5863
+
5864
+ .Primer_Brand__Card-module__Card__icon--color-yellow___RP8rx {
5865
+ color: var(--brand-Card-icon-color-yellow);
5866
+ }
5867
+
5868
+ .Primer_Brand__Card-module__Card__icon--color-yellow___RP8rx.Primer_Brand__Card-module__Card__icon--badge___p6riH {
5869
+ background-color: var(--brand-Card-icon-background-yellow);
5870
+ }
5871
+
5643
5872
  .Primer_Brand__SectionIntro-module__SectionIntro___RduRB {
5644
5873
  display: flex;
5645
5874
  flex-direction: column;
@@ -5678,7 +5907,7 @@ html {
5678
5907
 
5679
5908
  /**
5680
5909
  * Do not edit directly
5681
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
5910
+ * Generated on Wed, 26 Apr 2023 06:27:03 GMT
5682
5911
  */
5683
5912
 
5684
5913
  :root,
@@ -5862,11 +6091,6 @@ html {
5862
6091
  display: inline-block;
5863
6092
  }
5864
6093
 
5865
- /* Ratio Classes */
5866
- .Primer_Brand__Image-module__Image--___qlfMD {
5867
- display: inline-block;
5868
- }
5869
-
5870
6094
  .Primer_Brand__Image-module__Image--aspect-ratio-custom___gXFxx {
5871
6095
  aspect-ratio: var(--brand-Image-ratio-custom);
5872
6096
  }
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
3
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
4
4
  */
5
5
 
6
6
  :root,
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
3
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
3
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
3
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
3
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
4
4
  */
5
5
 
6
6
  :root,
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
3
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
3
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
4
4
  */
5
5
 
6
6
  :root,
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
3
+ * Generated on Wed, 26 Apr 2023 06:27:03 GMT
4
4
  */
5
5
 
6
6
  :root,
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
3
+ * Generated on Wed, 26 Apr 2023 06:27:03 GMT
4
4
  */
5
5
 
6
6
  :root,
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
3
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
4
4
  */
5
5
 
6
6
  :root,
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 24 Apr 2023 14:39:36 GMT
3
+ * Generated on Wed, 26 Apr 2023 06:27:02 GMT
4
4
  */
5
5
 
6
6
  :root {