@primer/react-brand 0.5.3 → 0.6.0-rc.120c46b

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 (112) hide show
  1. package/lib/ButtonGroup/ButtonGroup.d.ts +15 -0
  2. package/lib/ButtonGroup/ButtonGroup.visual.spec.d.ts +1 -0
  3. package/lib/ButtonGroup/index.d.ts +1 -0
  4. package/lib/ComparisonTable/ComparisonTable.d.ts +42 -0
  5. package/lib/ComparisonTable/ComparisonTable.visual.spec.d.ts +1 -0
  6. package/lib/ComparisonTable/index.d.ts +1 -0
  7. package/lib/LayoutExamples/LayoutExamples.visual.spec.d.ts +1 -0
  8. package/lib/css/main.css +334 -19
  9. package/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes.css +1 -1
  10. package/lib/design-tokens/css/tokens/base/colors/color-scales.css +1 -1
  11. package/lib/design-tokens/css/tokens/base/size/size.css +1 -1
  12. package/lib/design-tokens/css/tokens/base/typography/typography.css +1 -1
  13. package/lib/design-tokens/css/tokens/functional/colors/global-with-modes.css +1 -1
  14. package/lib/design-tokens/css/tokens/functional/colors/global.css +1 -1
  15. package/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css +1 -1
  16. package/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css +1 -1
  17. package/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes.css +15 -0
  18. package/lib/design-tokens/css/tokens/functional/components/control/base.css +1 -1
  19. package/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css +1 -1
  20. package/lib/design-tokens/css/tokens/functional/components/faq/base.css +1 -1
  21. package/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css +1 -1
  22. package/lib/design-tokens/css/tokens/functional/components/faq/colors.css +1 -1
  23. package/lib/design-tokens/css/tokens/functional/components/hero/base.css +1 -1
  24. package/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes.css +1 -1
  25. package/lib/design-tokens/css/tokens/functional/components/inline-link/colors.css +1 -1
  26. package/lib/design-tokens/css/tokens/functional/components/river/base.css +1 -1
  27. package/lib/design-tokens/css/tokens/functional/components/subdomain-nav-bar/colors-with-modes.css +2 -2
  28. package/lib/design-tokens/css/tokens/functional/size/border.css +1 -1
  29. package/lib/design-tokens/css/tokens/functional/size/breakpoints.css +1 -1
  30. package/lib/design-tokens/css/tokens/functional/size/size-coarse.css +1 -1
  31. package/lib/design-tokens/css/tokens/functional/size/size-fine.css +1 -1
  32. package/lib/design-tokens/css/tokens/functional/size/size.css +1 -1
  33. package/lib/design-tokens/css/tokens/functional/typography/typography-responsive.css +1 -1
  34. package/lib/design-tokens/css/tokens/functional/typography/typography.css +1 -1
  35. package/lib/design-tokens/js/module/tokens/base/colors/color-scales.js +1 -1
  36. package/lib/design-tokens/js/module/tokens/base/size/size.js +1 -1
  37. package/lib/design-tokens/js/module/tokens/base/typography/typography.js +1 -1
  38. package/lib/design-tokens/js/module/tokens/functional/colors/global.js +1 -1
  39. package/lib/design-tokens/js/module/tokens/functional/components/control/base.js +1 -1
  40. package/lib/design-tokens/js/module/tokens/functional/components/faq/base.js +1 -1
  41. package/lib/design-tokens/js/module/tokens/functional/components/faq/colors.js +1 -1
  42. package/lib/design-tokens/js/module/tokens/functional/components/hero/base.js +1 -1
  43. package/lib/design-tokens/js/module/tokens/functional/components/inline-link/colors.js +1 -1
  44. package/lib/design-tokens/js/module/tokens/functional/components/river/base.js +1 -1
  45. package/lib/design-tokens/js/module/tokens/functional/size/border.js +1 -1
  46. package/lib/design-tokens/js/module/tokens/functional/size/breakpoints.js +1 -1
  47. package/lib/design-tokens/js/module/tokens/functional/size/size-coarse.js +1 -1
  48. package/lib/design-tokens/js/module/tokens/functional/size/size-fine.js +1 -1
  49. package/lib/design-tokens/js/module/tokens/functional/size/size.js +1 -1
  50. package/lib/design-tokens/js/module/tokens/functional/size/viewport.js +1 -1
  51. package/lib/design-tokens/js/module/tokens/functional/typography/typography-responsive.js +1 -1
  52. package/lib/design-tokens/js/module/tokens/functional/typography/typography.js +1 -1
  53. package/lib/design-tokens/js/tokens/base/colors/color-scales.js +1 -1
  54. package/lib/design-tokens/js/tokens/base/size/size.js +1 -1
  55. package/lib/design-tokens/js/tokens/base/typography/typography.js +1 -1
  56. package/lib/design-tokens/js/tokens/functional/colors/global.js +1 -1
  57. package/lib/design-tokens/js/tokens/functional/components/control/base.js +1 -1
  58. package/lib/design-tokens/js/tokens/functional/components/faq/base.js +1 -1
  59. package/lib/design-tokens/js/tokens/functional/components/faq/colors.js +1 -1
  60. package/lib/design-tokens/js/tokens/functional/components/hero/base.js +1 -1
  61. package/lib/design-tokens/js/tokens/functional/components/inline-link/colors.js +1 -1
  62. package/lib/design-tokens/js/tokens/functional/components/river/base.js +1 -1
  63. package/lib/design-tokens/js/tokens/functional/size/border.js +1 -1
  64. package/lib/design-tokens/js/tokens/functional/size/breakpoints.js +1 -1
  65. package/lib/design-tokens/js/tokens/functional/size/size-coarse.js +1 -1
  66. package/lib/design-tokens/js/tokens/functional/size/size-fine.js +1 -1
  67. package/lib/design-tokens/js/tokens/functional/size/size.js +1 -1
  68. package/lib/design-tokens/js/tokens/functional/size/viewport.js +1 -1
  69. package/lib/design-tokens/js/tokens/functional/typography/typography-responsive.js +1 -1
  70. package/lib/design-tokens/js/tokens/functional/typography/typography.js +1 -1
  71. package/lib/design-tokens/ts/tokens/base/colors/color-scales.d.ts +1 -1
  72. package/lib/design-tokens/ts/tokens/base/colors/color-scales.js +1 -1
  73. package/lib/design-tokens/ts/tokens/base/size/size.d.ts +1 -1
  74. package/lib/design-tokens/ts/tokens/base/size/size.js +1 -1
  75. package/lib/design-tokens/ts/tokens/base/typography/typography.d.ts +1 -1
  76. package/lib/design-tokens/ts/tokens/base/typography/typography.js +1 -1
  77. package/lib/design-tokens/ts/tokens/functional/colors/global.d.ts +1 -1
  78. package/lib/design-tokens/ts/tokens/functional/colors/global.js +1 -1
  79. package/lib/design-tokens/ts/tokens/functional/components/control/base.d.ts +1 -1
  80. package/lib/design-tokens/ts/tokens/functional/components/control/base.js +1 -1
  81. package/lib/design-tokens/ts/tokens/functional/components/faq/base.d.ts +1 -1
  82. package/lib/design-tokens/ts/tokens/functional/components/faq/base.js +1 -1
  83. package/lib/design-tokens/ts/tokens/functional/components/faq/colors.d.ts +1 -1
  84. package/lib/design-tokens/ts/tokens/functional/components/faq/colors.js +1 -1
  85. package/lib/design-tokens/ts/tokens/functional/components/hero/base.d.ts +1 -1
  86. package/lib/design-tokens/ts/tokens/functional/components/hero/base.js +1 -1
  87. package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.d.ts +1 -1
  88. package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.js +1 -1
  89. package/lib/design-tokens/ts/tokens/functional/components/river/base.d.ts +1 -1
  90. package/lib/design-tokens/ts/tokens/functional/components/river/base.js +1 -1
  91. package/lib/design-tokens/ts/tokens/functional/size/border.d.ts +1 -1
  92. package/lib/design-tokens/ts/tokens/functional/size/border.js +1 -1
  93. package/lib/design-tokens/ts/tokens/functional/size/breakpoints.d.ts +1 -1
  94. package/lib/design-tokens/ts/tokens/functional/size/breakpoints.js +1 -1
  95. package/lib/design-tokens/ts/tokens/functional/size/size-coarse.d.ts +1 -1
  96. package/lib/design-tokens/ts/tokens/functional/size/size-coarse.js +1 -1
  97. package/lib/design-tokens/ts/tokens/functional/size/size-fine.d.ts +1 -1
  98. package/lib/design-tokens/ts/tokens/functional/size/size-fine.js +1 -1
  99. package/lib/design-tokens/ts/tokens/functional/size/size.d.ts +1 -1
  100. package/lib/design-tokens/ts/tokens/functional/size/size.js +1 -1
  101. package/lib/design-tokens/ts/tokens/functional/size/viewport.d.ts +1 -1
  102. package/lib/design-tokens/ts/tokens/functional/size/viewport.js +1 -1
  103. package/lib/design-tokens/ts/tokens/functional/typography/typography-responsive.d.ts +1 -1
  104. package/lib/design-tokens/ts/tokens/functional/typography/typography-responsive.js +1 -1
  105. package/lib/design-tokens/ts/tokens/functional/typography/typography.d.ts +1 -1
  106. package/lib/design-tokens/ts/tokens/functional/typography/typography.js +1 -1
  107. package/lib/forms/Checkbox/Checkbox.d.ts +1 -1
  108. package/lib/forms/Select/Select.d.ts +1 -1
  109. package/lib/forms/TextInput/TextInput.d.ts +1 -1
  110. package/lib/index.d.ts +2 -0
  111. package/lib/index.js +1 -1
  112. package/package.json +3 -4
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ import type { BaseProps } from '../component-helpers';
3
+ import { ButtonProps } from '../Button';
4
+ declare type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' | 'a'>>>;
5
+ export declare type ButtonGroupProps = BaseProps<HTMLDivElement> & {
6
+ children: PrimerBrandButtonType[] | PrimerBrandButtonType;
7
+ buttonSize?: ButtonProps<'button' | 'a'>['size'];
8
+ buttonsAs?: React.ElementType;
9
+ };
10
+ export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<BaseProps<HTMLDivElement> & {
11
+ children: PrimerBrandButtonType[] | PrimerBrandButtonType;
12
+ buttonSize?: ButtonProps<'button' | 'a'>['size'];
13
+ buttonsAs?: React.ElementType<any> | undefined;
14
+ }, "children" | "className" | "id" | "buttonSize" | "buttonsAs"> & React.RefAttributes<HTMLDivElement>>;
15
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export * from './ButtonGroup';
@@ -0,0 +1,42 @@
1
+ import React, { PropsWithChildren } from 'react';
2
+ import type { BaseProps } from '../component-helpers';
3
+ /**
4
+ * Design tokens
5
+ */
6
+ import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes.css';
7
+ export declare type ComparisonTableProps<C extends React.ElementType> = BaseProps<C> & {
8
+ as?: C;
9
+ heading?: string;
10
+ variant?: 'default' | 'minimal';
11
+ featuredColumn?: number;
12
+ } & React.ComponentPropsWithoutRef<C>;
13
+ export declare const _ComparisonTable: React.ForwardRefExoticComponent<Pick<BaseProps<React.ElementType<any>> & {
14
+ as?: React.ElementType<any> | undefined;
15
+ heading?: string | undefined;
16
+ variant?: "default" | "minimal" | undefined;
17
+ featuredColumn?: number | undefined;
18
+ } & Pick<any, string | number | symbol>, string | number | symbol> & React.RefAttributes<HTMLDivElement>>;
19
+ declare type RowProps = {
20
+ header?: boolean;
21
+ };
22
+ export declare type CellProps = BaseProps<HTMLTableCellElement> & {
23
+ as?: 'td' | 'th';
24
+ };
25
+ export declare type FootnoteProps = BaseProps<HTMLParagraphElement>;
26
+ /**
27
+ * @description
28
+ * Comparison tables are used to aid decision-making by displaying a list of features and their associated qualities side-by-side.
29
+ * They are useful for comparing products, plans, or features in marketing pages.
30
+ * @see https://primer.style/brand/components/ComparisonTable
31
+ */
32
+ export declare const ComparisonTable: React.ForwardRefExoticComponent<Pick<BaseProps<React.ElementType<any>> & {
33
+ as?: React.ElementType<any> | undefined;
34
+ heading?: string | undefined;
35
+ variant?: "default" | "minimal" | undefined;
36
+ featuredColumn?: number | undefined;
37
+ } & Pick<any, string | number | symbol>, string | number | symbol> & React.RefAttributes<HTMLDivElement>> & {
38
+ Row: ({ children, ...rest }: PropsWithChildren<RowProps>) => JSX.Element;
39
+ Cell: ({ as, children, ...props }: PropsWithChildren<CellProps>) => JSX.Element;
40
+ Footnote: ({ children, ...props }: PropsWithChildren<FootnoteProps>) => JSX.Element;
41
+ };
42
+ export {};
@@ -0,0 +1 @@
1
+ export * from './ComparisonTable';
@@ -0,0 +1 @@
1
+ export {};
package/lib/css/main.css CHANGED
@@ -89,7 +89,7 @@ select {
89
89
 
90
90
  /**
91
91
  * Do not edit directly
92
- * Generated on Thu, 20 Oct 2022 09:09:41 GMT
92
+ * Generated on Fri, 04 Nov 2022 12:50:23 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 Thu, 20 Oct 2022 09:09:41 GMT
632
+ * Generated on Fri, 04 Nov 2022 12:50:23 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 Thu, 20 Oct 2022 09:09:40 GMT
657
+ * Generated on Fri, 04 Nov 2022 12:50:23 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 Thu, 20 Oct 2022 09:09:41 GMT
672
+ * Generated on Fri, 04 Nov 2022 12:50:23 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 Thu, 20 Oct 2022 09:09:40 GMT
851
+ * Generated on Fri, 04 Nov 2022 12:50:23 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 Thu, 20 Oct 2022 09:09:40 GMT
865
+ * Generated on Fri, 04 Nov 2022 12:50:23 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 Thu, 20 Oct 2022 09:09:41 GMT
883
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
884
884
  */
885
885
 
886
886
  :root,
@@ -1076,7 +1076,7 @@ select {
1076
1076
 
1077
1077
  /**
1078
1078
  * Do not edit directly
1079
- * Generated on Thu, 20 Oct 2022 09:09:41 GMT
1079
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
1080
1080
  */
1081
1081
 
1082
1082
  :root,
@@ -1223,7 +1223,7 @@ select {
1223
1223
 
1224
1224
  /**
1225
1225
  * Do not edit directly
1226
- * Generated on Thu, 20 Oct 2022 09:09:40 GMT
1226
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
1227
1227
  */
1228
1228
 
1229
1229
  :root {
@@ -1231,9 +1231,20 @@ select {
1231
1231
  --brand-Hero-narrow-padding: var(--base-size-96) 0;
1232
1232
  }
1233
1233
 
1234
+ .Primer_Brand__ButtonGroup-module__ButtonGroup___QQSsj {
1235
+ display: inline-flex;
1236
+ gap: var(--base-size-8);
1237
+ flex-direction: row;
1238
+ flex-wrap: wrap;
1239
+ }
1240
+
1241
+ .Primer_Brand__ButtonGroup-module__ButtonGroup___QQSsj > * {
1242
+ flex-grow: 1;
1243
+ }
1244
+
1234
1245
  /**
1235
1246
  * Do not edit directly
1236
- * Generated on Thu, 20 Oct 2022 09:09:40 GMT
1247
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
1237
1248
  */
1238
1249
 
1239
1250
  :root {
@@ -2019,7 +2030,7 @@ select {
2019
2030
 
2020
2031
  /**
2021
2032
  * Do not edit directly
2022
- * Generated on Thu, 20 Oct 2022 09:09:41 GMT
2033
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
2023
2034
  */
2024
2035
 
2025
2036
  :root,
@@ -2028,7 +2039,7 @@ select {
2028
2039
  --brand-SubdomainNavBar-canvas-search: var(--base-color-scale-white-0);
2029
2040
  --brand-SubdomainNavBar-canvas-overflow-default: var(--base-color-scale-white-0);
2030
2041
  --brand-SubdomainNavBar-canvas-overflow-hover: var(--base-color-scale-gray-0);
2031
- --brand-SubdomainNavBar-fg-overflow-default: var(--brand-color-fg-default);
2042
+ --brand-SubdomainNavBar-fg-overflow-default: var(--brand-color-text-default);
2032
2043
  --brand-SubdomainNavBar-border-nav-default: var(--base-color-scale-gray-9);
2033
2044
  --brand-SubdomainNavBar-border-nav-pressed: var(--base-color-scale-black-0);
2034
2045
  --brand-SubdomainNavBar-border-button-hover: var(--base-color-scale-black-0);
@@ -2047,7 +2058,7 @@ select {
2047
2058
 
2048
2059
  /**
2049
2060
  * Do not edit directly
2050
- * Generated on Thu, 20 Oct 2022 09:09:41 GMT
2061
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
2051
2062
  */
2052
2063
 
2053
2064
  :root,
@@ -2152,7 +2163,7 @@ select {
2152
2163
 
2153
2164
  /**
2154
2165
  * Do not edit directly
2155
- * Generated on Thu, 20 Oct 2022 09:09:41 GMT
2166
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
2156
2167
  */
2157
2168
 
2158
2169
  :root,
@@ -2294,7 +2305,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
2294
2305
 
2295
2306
  /**
2296
2307
  * Do not edit directly
2297
- * Generated on Thu, 20 Oct 2022 09:09:40 GMT
2308
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
2298
2309
  */
2299
2310
 
2300
2311
  :root {
@@ -2304,7 +2315,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
2304
2315
 
2305
2316
  /**
2306
2317
  * Do not edit directly
2307
- * Generated on Thu, 20 Oct 2022 09:09:41 GMT
2318
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
2308
2319
  */
2309
2320
 
2310
2321
  :root,
@@ -2374,7 +2385,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
2374
2385
 
2375
2386
  /**
2376
2387
  * Do not edit directly
2377
- * Generated on Thu, 20 Oct 2022 09:09:40 GMT
2388
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
2378
2389
  */
2379
2390
 
2380
2391
  :root {
@@ -2393,7 +2404,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
2393
2404
 
2394
2405
  /**
2395
2406
  * Do not edit directly
2396
- * Generated on Thu, 20 Oct 2022 09:09:41 GMT
2407
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
2397
2408
  */
2398
2409
 
2399
2410
  :root,
@@ -3070,7 +3081,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
3070
3081
 
3071
3082
  /**
3072
3083
  * Do not edit directly
3073
- * Generated on Thu, 20 Oct 2022 09:09:40 GMT
3084
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
3074
3085
  */
3075
3086
 
3076
3087
  :root {
@@ -3353,3 +3364,307 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
3353
3364
  margin-right: auto;
3354
3365
  }
3355
3366
 
3367
+ /**
3368
+ * Do not edit directly
3369
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
3370
+ */
3371
+
3372
+ :root,
3373
+ [data-color-mode="light"] {
3374
+ --brand-ComparisonTable-featured-color-start: var(--base-color-scale-pink-4);
3375
+ --brand-ComparisonTable-featured-color-end: var(--base-color-scale-indigo-5);
3376
+ }
3377
+
3378
+ [data-color-mode="dark"] {
3379
+ --brand-ComparisonTable-featured-color-start: var(--base-color-scale-pink-2);
3380
+ --brand-ComparisonTable-featured-color-end: var(--base-color-scale-indigo-3);
3381
+ }
3382
+
3383
+ /*
3384
+ * Heading
3385
+ */
3386
+ .Primer_Brand__ComparisonTable-module__ComparisonTable--heading___CeSsH {
3387
+ text-align: left;
3388
+ }
3389
+
3390
+ @media screen and (min-width: 34rem) {
3391
+ .Primer_Brand__ComparisonTable-module__ComparisonTable--heading___CeSsH {
3392
+ text-align: center;
3393
+ margin-bottom: var(--base-size-40);
3394
+ }
3395
+ }
3396
+
3397
+ /**
3398
+ * Footnotes
3399
+ */
3400
+
3401
+ .Primer_Brand__ComparisonTable-module__ComparisonTable-footnote___rf35Q {
3402
+ text-align: center;
3403
+ margin: var(--base-size-24) 0;
3404
+ }
3405
+
3406
+ /*
3407
+ * Table
3408
+ */
3409
+
3410
+ .Primer_Brand__ComparisonTable-module__ComparisonTable___N2YLX {
3411
+ border-collapse: collapse;
3412
+ border-spacing: 0;
3413
+ font-family: var(--brand-body-fontFamily);
3414
+ width: 100%;
3415
+ }
3416
+
3417
+ .Primer_Brand__ComparisonTable-module__ComparisonTable___N2YLX tr {
3418
+ display: flex;
3419
+ flex-direction: column;
3420
+ width: 100%;
3421
+ text-align: left;
3422
+ }
3423
+
3424
+ .Primer_Brand__ComparisonTable-module__ComparisonTable-cell___kifYR {
3425
+ color: var(--brand-color-text-default);
3426
+ font-weight: var(--brand-text-weight-300);
3427
+ font-size: var(--brand-text-size-300);
3428
+ line-height: var(--brand-text-lineHeight-300);
3429
+ padding-bottom: var(--base-size-24);
3430
+ }
3431
+
3432
+ .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___QlGCM {
3433
+ font-weight: var(--base-text-weight-semibold);
3434
+ font-size: var(--brand-text-size-300);
3435
+ line-height: var(--brand-text-lineHeight-300);
3436
+ }
3437
+
3438
+ .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-container___AHNr0 {
3439
+ display: block;
3440
+ padding-top: var(--base-size-8);
3441
+ }
3442
+
3443
+ /*
3444
+ * Narrow viewport-only styles
3445
+ */
3446
+ @media screen and (max-width: 34rem) {
3447
+ .Primer_Brand__ComparisonTable-module__ComparisonTable___N2YLX thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___QlGCM {
3448
+ display: none;
3449
+ }
3450
+
3451
+ .Primer_Brand__ComparisonTable-module__ComparisonTable-cell___kifYR {
3452
+ margin-bottom: var(--base-size-32);
3453
+ padding-bottom: 0;
3454
+ }
3455
+
3456
+ .Primer_Brand__ComparisonTable-module__ComparisonTable___N2YLX thead tr {
3457
+ border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
3458
+ }
3459
+
3460
+ .Primer_Brand__ComparisonTable-module__ComparisonTable___N2YLX tbody tr {
3461
+ border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
3462
+ }
3463
+
3464
+ .Primer_Brand__ComparisonTable-module__ComparisonTable-inline-cell-label___hE3hL {
3465
+ font-weight: var(--brand-heading-weight-600);
3466
+ font-size: var(--brand-text-size-600);
3467
+ line-height: var(--brand-heading-lineHeight-600);
3468
+ }
3469
+
3470
+ .Primer_Brand__ComparisonTable-module__ComparisonTable___N2YLX tbody .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___QlGCM {
3471
+ margin-top: var(--base-size-24);
3472
+ margin-bottom: var(--base-size-16);
3473
+ font-weight: var(--brand-heading-weight-500);
3474
+ font-size: var(--brand-text-size-500);
3475
+ line-height: var(--brand-heading-lineHeight-500);
3476
+ }
3477
+ }
3478
+
3479
+ /*
3480
+ * Narrow landscape and above viewport styles
3481
+ */
3482
+ @media screen and (min-width: 34rem) {
3483
+ .Primer_Brand__ComparisonTable-module__ComparisonTable___N2YLX tr {
3484
+ flex-direction: row;
3485
+ }
3486
+
3487
+ .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-container___AHNr0 {
3488
+ padding-top: var(--base-size-24);
3489
+ }
3490
+
3491
+ .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___QlGCM {
3492
+ text-align: left;
3493
+ }
3494
+
3495
+ .Primer_Brand__ComparisonTable-module__ComparisonTable___N2YLX th:first-of-type {
3496
+ width: 25%;
3497
+ margin-right: 40px;
3498
+ }
3499
+
3500
+ .Primer_Brand__ComparisonTable-module__ComparisonTable___N2YLX tr td:nth-of-type(1),
3501
+ .Primer_Brand__ComparisonTable-module__ComparisonTable___N2YLX tr:nth-of-type(1) th:nth-of-type(2) {
3502
+ width: 40%;
3503
+ }
3504
+ .Primer_Brand__ComparisonTable-module__ComparisonTable___N2YLX tr td:nth-of-type(2),
3505
+ .Primer_Brand__ComparisonTable-module__ComparisonTable___N2YLX tr:nth-of-type(1) th:nth-of-type(3) {
3506
+ width: 35%;
3507
+ margin-left: 40px;
3508
+ }
3509
+
3510
+ .Primer_Brand__ComparisonTable-module__ComparisonTable--hide-element-on-narrow___GnYyu {
3511
+ display: none;
3512
+ }
3513
+
3514
+ .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-container___AHNr0 {
3515
+ border-top: var(--brand-borderWidth-thick) solid var(--brand-color-border-default);
3516
+ }
3517
+ }
3518
+
3519
+ /*
3520
+ * Default presentation
3521
+ */
3522
+ .ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--first___Ps2aK {
3523
+ color: var(--brand-color-text-muted);
3524
+ }
3525
+
3526
+ .ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___QlGCM {
3527
+ padding: var(--base-size-24) 0 var(--base-size-16);
3528
+ }
3529
+
3530
+ .ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading-label--featured___c_wMH {
3531
+ position: relative;
3532
+ z-index: 2;
3533
+ }
3534
+
3535
+ /*
3536
+ * Narrow viewport-only styles
3537
+ */
3538
+ @media screen and (max-width: 34rem) {
3539
+ .ComparisonTable--default {
3540
+ margin-top: var(--base-size-8);
3541
+ }
3542
+
3543
+ .ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell___kifYR:not(.Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___QlGCM) {
3544
+ position: relative;
3545
+ padding-left: 25px;
3546
+ }
3547
+ .ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell___kifYR::before {
3548
+ content: '';
3549
+ position: absolute;
3550
+ top: 0;
3551
+ bottom: 0;
3552
+ left: 0;
3553
+ width: 5px;
3554
+ background: var(--brand-color-border-default);
3555
+ }
3556
+ .ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell--featured___f0LZk::before {
3557
+ background: linear-gradient(
3558
+ 180deg,
3559
+ var(--brand-ComparisonTable-featured-color-start),
3560
+ var(--brand-ComparisonTable-featured-color-end)
3561
+ );
3562
+ }
3563
+ }
3564
+
3565
+ /*
3566
+ * Narrow landscape and above viewport styles
3567
+ */
3568
+ @media screen and (min-width: 34rem) {
3569
+ .ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading-label--featured___c_wMH {
3570
+ color: transparent;
3571
+ background: linear-gradient(
3572
+ 89.46deg,
3573
+ var(--brand-ComparisonTable-featured-color-start) 0.87%,
3574
+ var(--brand-ComparisonTable-featured-color-end) 75.12%
3575
+ );
3576
+ -webkit-background-clip: text;
3577
+ background-clip: text;
3578
+ }
3579
+ .ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___QlGCM {
3580
+ font-weight: var(--brand-heading-weight-500);
3581
+ font-size: var(--brand-text-size-500);
3582
+ line-height: var(--brand-heading-lineHeight-500);
3583
+ display: inline-flex;
3584
+ align-items: flex-end;
3585
+ }
3586
+ .ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--first___Ps2aK {
3587
+ font-weight: var(--brand-heading-weight-400);
3588
+ font-size: var(--brand-text-size-400);
3589
+ line-height: var(--brand-heading-lineHeight-400);
3590
+ }
3591
+
3592
+ .ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell--featured___f0LZk,
3593
+ .ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--featured___tkzzb {
3594
+ padding-left: var(--base-size-24);
3595
+ padding-right: var(--base-size-24);
3596
+ border-right: 2px solid var(--brand-ComparisonTable-featured-color-end);
3597
+ border-left: 2px solid var(--brand-ComparisonTable-featured-color-start);
3598
+ }
3599
+ .ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--featured___tkzzb {
3600
+ position: relative;
3601
+ border-top-left-radius: 0.45rem;
3602
+ border-top-right-radius: 0.45rem;
3603
+ background: var(--brand-color-canvas-default);
3604
+ }
3605
+ .ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--featured___tkzzb::before,
3606
+ .ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--featured___tkzzb::after {
3607
+ position: absolute;
3608
+ top: -2px;
3609
+ right: -2px;
3610
+ bottom: 0;
3611
+ left: -2px;
3612
+ z-index: 0;
3613
+ content: '';
3614
+ background: linear-gradient(
3615
+ 90deg,
3616
+ var(--brand-ComparisonTable-featured-color-start),
3617
+ var(--brand-ComparisonTable-featured-color-end)
3618
+ );
3619
+ border-top-left-radius: 0.45rem;
3620
+ border-top-right-radius: 0.45rem;
3621
+ }
3622
+
3623
+ .ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--featured___tkzzb::after {
3624
+ z-index: 1;
3625
+ background: var(--brand-color-canvas-default);
3626
+ top: 0px;
3627
+ left: 0;
3628
+ right: 0;
3629
+ border-top-right-radius: 0.35rem;
3630
+ border-top-left-radius: 0.35rem;
3631
+ }
3632
+ .ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell--featured___f0LZk.Primer_Brand__ComparisonTable-module__ComparisonTable-cell--lastrow___zmShm {
3633
+ position: relative;
3634
+ background: var(--brand-color-canvas-default);
3635
+ border-bottom-right-radius: 0.45rem;
3636
+ border-bottom-left-radius: 0.45rem;
3637
+ }
3638
+ .ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell--featured___f0LZk.Primer_Brand__ComparisonTable-module__ComparisonTable-cell--lastrow___zmShm::after,
3639
+ .ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell--featured___f0LZk.Primer_Brand__ComparisonTable-module__ComparisonTable-cell--lastrow___zmShm::before {
3640
+ position: absolute;
3641
+ top: 0;
3642
+ right: -2px;
3643
+ bottom: 0;
3644
+ left: -2px;
3645
+ z-index: 0;
3646
+ content: '';
3647
+ background: linear-gradient(
3648
+ 90deg,
3649
+ var(--brand-ComparisonTable-featured-color-start),
3650
+ var(--brand-ComparisonTable-featured-color-end)
3651
+ );
3652
+ border-bottom-right-radius: 0.5rem;
3653
+ border-bottom-left-radius: 0.5rem;
3654
+ }
3655
+ .ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell--featured___f0LZk.Primer_Brand__ComparisonTable-module__ComparisonTable-cell--lastrow___zmShm::after {
3656
+ z-index: 1;
3657
+ background: var(--brand-color-canvas-default);
3658
+ bottom: 2px;
3659
+ left: 0;
3660
+ right: 0;
3661
+ border-bottom-right-radius: 0.35rem;
3662
+ border-bottom-left-radius: 0.35rem;
3663
+ }
3664
+
3665
+ .ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-container--featured___x6tKO {
3666
+ position: relative;
3667
+ z-index: 2;
3668
+ }
3669
+ }
3670
+
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 20 Oct 2022 09:09:41 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
4
4
  */
5
5
 
6
6
  :root,
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 20 Oct 2022 09:09:40 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 20 Oct 2022 09:09:41 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 20 Oct 2022 09:09:40 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 20 Oct 2022 09:09:41 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
4
4
  */
5
5
 
6
6
  :root,
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 20 Oct 2022 09:09:40 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 20 Oct 2022 09:09:41 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
4
4
  */
5
5
 
6
6
  :root,
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 20 Oct 2022 09:09:41 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
4
4
  */
5
5
 
6
6
  :root,
@@ -0,0 +1,15 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
4
+ */
5
+
6
+ :root,
7
+ [data-color-mode="light"] {
8
+ --brand-ComparisonTable-featured-color-start: var(--base-color-scale-pink-4);
9
+ --brand-ComparisonTable-featured-color-end: var(--base-color-scale-indigo-5);
10
+ }
11
+
12
+ [data-color-mode="dark"] {
13
+ --brand-ComparisonTable-featured-color-start: var(--base-color-scale-pink-2);
14
+ --brand-ComparisonTable-featured-color-end: var(--base-color-scale-indigo-3);
15
+ }
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 20 Oct 2022 09:09:40 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 20 Oct 2022 09:09:41 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
4
4
  */
5
5
 
6
6
  :root,
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 20 Oct 2022 09:09:40 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:50:23 GMT
4
4
  */
5
5
 
6
6
  :root {