@primer/react-brand 0.6.0-rc.e989738 → 0.6.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.
Files changed (106) hide show
  1. package/lib/ComparisonTable/ComparisonTable.d.ts +42 -0
  2. package/lib/ComparisonTable/ComparisonTable.visual.spec.d.ts +1 -0
  3. package/lib/ComparisonTable/index.d.ts +1 -0
  4. package/lib/LayoutExamples/LayoutExamples.visual.spec.d.ts +1 -0
  5. package/lib/css/main.css +323 -19
  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/button/colors-with-modes.css +1 -1
  14. package/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes.css +15 -0
  15. package/lib/design-tokens/css/tokens/functional/components/control/base.css +1 -1
  16. package/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css +1 -1
  17. package/lib/design-tokens/css/tokens/functional/components/faq/base.css +1 -1
  18. package/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css +1 -1
  19. package/lib/design-tokens/css/tokens/functional/components/faq/colors.css +1 -1
  20. package/lib/design-tokens/css/tokens/functional/components/hero/base.css +1 -1
  21. package/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes.css +1 -1
  22. package/lib/design-tokens/css/tokens/functional/components/inline-link/colors.css +1 -1
  23. package/lib/design-tokens/css/tokens/functional/components/river/base.css +1 -1
  24. package/lib/design-tokens/css/tokens/functional/components/subdomain-nav-bar/colors-with-modes.css +2 -2
  25. package/lib/design-tokens/css/tokens/functional/size/border.css +1 -1
  26. package/lib/design-tokens/css/tokens/functional/size/breakpoints.css +1 -1
  27. package/lib/design-tokens/css/tokens/functional/size/size-coarse.css +1 -1
  28. package/lib/design-tokens/css/tokens/functional/size/size-fine.css +1 -1
  29. package/lib/design-tokens/css/tokens/functional/size/size.css +1 -1
  30. package/lib/design-tokens/css/tokens/functional/typography/typography-responsive.css +1 -1
  31. package/lib/design-tokens/css/tokens/functional/typography/typography.css +1 -1
  32. package/lib/design-tokens/js/module/tokens/base/colors/color-scales.js +1 -1
  33. package/lib/design-tokens/js/module/tokens/base/size/size.js +1 -1
  34. package/lib/design-tokens/js/module/tokens/base/typography/typography.js +1 -1
  35. package/lib/design-tokens/js/module/tokens/functional/colors/global.js +1 -1
  36. package/lib/design-tokens/js/module/tokens/functional/components/control/base.js +1 -1
  37. package/lib/design-tokens/js/module/tokens/functional/components/faq/base.js +1 -1
  38. package/lib/design-tokens/js/module/tokens/functional/components/faq/colors.js +1 -1
  39. package/lib/design-tokens/js/module/tokens/functional/components/hero/base.js +1 -1
  40. package/lib/design-tokens/js/module/tokens/functional/components/inline-link/colors.js +1 -1
  41. package/lib/design-tokens/js/module/tokens/functional/components/river/base.js +1 -1
  42. package/lib/design-tokens/js/module/tokens/functional/size/border.js +1 -1
  43. package/lib/design-tokens/js/module/tokens/functional/size/breakpoints.js +1 -1
  44. package/lib/design-tokens/js/module/tokens/functional/size/size-coarse.js +1 -1
  45. package/lib/design-tokens/js/module/tokens/functional/size/size-fine.js +1 -1
  46. package/lib/design-tokens/js/module/tokens/functional/size/size.js +1 -1
  47. package/lib/design-tokens/js/module/tokens/functional/size/viewport.js +1 -1
  48. package/lib/design-tokens/js/module/tokens/functional/typography/typography-responsive.js +1 -1
  49. package/lib/design-tokens/js/module/tokens/functional/typography/typography.js +1 -1
  50. package/lib/design-tokens/js/tokens/base/colors/color-scales.js +1 -1
  51. package/lib/design-tokens/js/tokens/base/size/size.js +1 -1
  52. package/lib/design-tokens/js/tokens/base/typography/typography.js +1 -1
  53. package/lib/design-tokens/js/tokens/functional/colors/global.js +1 -1
  54. package/lib/design-tokens/js/tokens/functional/components/control/base.js +1 -1
  55. package/lib/design-tokens/js/tokens/functional/components/faq/base.js +1 -1
  56. package/lib/design-tokens/js/tokens/functional/components/faq/colors.js +1 -1
  57. package/lib/design-tokens/js/tokens/functional/components/hero/base.js +1 -1
  58. package/lib/design-tokens/js/tokens/functional/components/inline-link/colors.js +1 -1
  59. package/lib/design-tokens/js/tokens/functional/components/river/base.js +1 -1
  60. package/lib/design-tokens/js/tokens/functional/size/border.js +1 -1
  61. package/lib/design-tokens/js/tokens/functional/size/breakpoints.js +1 -1
  62. package/lib/design-tokens/js/tokens/functional/size/size-coarse.js +1 -1
  63. package/lib/design-tokens/js/tokens/functional/size/size-fine.js +1 -1
  64. package/lib/design-tokens/js/tokens/functional/size/size.js +1 -1
  65. package/lib/design-tokens/js/tokens/functional/size/viewport.js +1 -1
  66. package/lib/design-tokens/js/tokens/functional/typography/typography-responsive.js +1 -1
  67. package/lib/design-tokens/js/tokens/functional/typography/typography.js +1 -1
  68. package/lib/design-tokens/ts/tokens/base/colors/color-scales.d.ts +1 -1
  69. package/lib/design-tokens/ts/tokens/base/colors/color-scales.js +1 -1
  70. package/lib/design-tokens/ts/tokens/base/size/size.d.ts +1 -1
  71. package/lib/design-tokens/ts/tokens/base/size/size.js +1 -1
  72. package/lib/design-tokens/ts/tokens/base/typography/typography.d.ts +1 -1
  73. package/lib/design-tokens/ts/tokens/base/typography/typography.js +1 -1
  74. package/lib/design-tokens/ts/tokens/functional/colors/global.d.ts +1 -1
  75. package/lib/design-tokens/ts/tokens/functional/colors/global.js +1 -1
  76. package/lib/design-tokens/ts/tokens/functional/components/control/base.d.ts +1 -1
  77. package/lib/design-tokens/ts/tokens/functional/components/control/base.js +1 -1
  78. package/lib/design-tokens/ts/tokens/functional/components/faq/base.d.ts +1 -1
  79. package/lib/design-tokens/ts/tokens/functional/components/faq/base.js +1 -1
  80. package/lib/design-tokens/ts/tokens/functional/components/faq/colors.d.ts +1 -1
  81. package/lib/design-tokens/ts/tokens/functional/components/faq/colors.js +1 -1
  82. package/lib/design-tokens/ts/tokens/functional/components/hero/base.d.ts +1 -1
  83. package/lib/design-tokens/ts/tokens/functional/components/hero/base.js +1 -1
  84. package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.d.ts +1 -1
  85. package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.js +1 -1
  86. package/lib/design-tokens/ts/tokens/functional/components/river/base.d.ts +1 -1
  87. package/lib/design-tokens/ts/tokens/functional/components/river/base.js +1 -1
  88. package/lib/design-tokens/ts/tokens/functional/size/border.d.ts +1 -1
  89. package/lib/design-tokens/ts/tokens/functional/size/border.js +1 -1
  90. package/lib/design-tokens/ts/tokens/functional/size/breakpoints.d.ts +1 -1
  91. package/lib/design-tokens/ts/tokens/functional/size/breakpoints.js +1 -1
  92. package/lib/design-tokens/ts/tokens/functional/size/size-coarse.d.ts +1 -1
  93. package/lib/design-tokens/ts/tokens/functional/size/size-coarse.js +1 -1
  94. package/lib/design-tokens/ts/tokens/functional/size/size-fine.d.ts +1 -1
  95. package/lib/design-tokens/ts/tokens/functional/size/size-fine.js +1 -1
  96. package/lib/design-tokens/ts/tokens/functional/size/size.d.ts +1 -1
  97. package/lib/design-tokens/ts/tokens/functional/size/size.js +1 -1
  98. package/lib/design-tokens/ts/tokens/functional/size/viewport.d.ts +1 -1
  99. package/lib/design-tokens/ts/tokens/functional/size/viewport.js +1 -1
  100. package/lib/design-tokens/ts/tokens/functional/typography/typography-responsive.d.ts +1 -1
  101. package/lib/design-tokens/ts/tokens/functional/typography/typography-responsive.js +1 -1
  102. package/lib/design-tokens/ts/tokens/functional/typography/typography.d.ts +1 -1
  103. package/lib/design-tokens/ts/tokens/functional/typography/typography.js +1 -1
  104. package/lib/index.d.ts +1 -0
  105. package/lib/index.js +1 -1
  106. package/package.json +3 -4
@@ -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, 03 Nov 2022 12:29:40 GMT
92
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:39 GMT
632
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:39 GMT
657
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:39 GMT
672
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:39 GMT
851
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:39 GMT
865
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:40 GMT
883
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:40 GMT
1079
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:39 GMT
1226
+ * Generated on Fri, 04 Nov 2022 12:59:23 GMT
1227
1227
  */
1228
1228
 
1229
1229
  :root {
@@ -1244,7 +1244,7 @@ select {
1244
1244
 
1245
1245
  /**
1246
1246
  * Do not edit directly
1247
- * Generated on Thu, 03 Nov 2022 12:29:39 GMT
1247
+ * Generated on Fri, 04 Nov 2022 12:59:23 GMT
1248
1248
  */
1249
1249
 
1250
1250
  :root {
@@ -2030,7 +2030,7 @@ select {
2030
2030
 
2031
2031
  /**
2032
2032
  * Do not edit directly
2033
- * Generated on Thu, 03 Nov 2022 12:29:40 GMT
2033
+ * Generated on Fri, 04 Nov 2022 12:59:23 GMT
2034
2034
  */
2035
2035
 
2036
2036
  :root,
@@ -2039,7 +2039,7 @@ select {
2039
2039
  --brand-SubdomainNavBar-canvas-search: var(--base-color-scale-white-0);
2040
2040
  --brand-SubdomainNavBar-canvas-overflow-default: var(--base-color-scale-white-0);
2041
2041
  --brand-SubdomainNavBar-canvas-overflow-hover: var(--base-color-scale-gray-0);
2042
- --brand-SubdomainNavBar-fg-overflow-default: var(--brand-color-fg-default);
2042
+ --brand-SubdomainNavBar-fg-overflow-default: var(--brand-color-text-default);
2043
2043
  --brand-SubdomainNavBar-border-nav-default: var(--base-color-scale-gray-9);
2044
2044
  --brand-SubdomainNavBar-border-nav-pressed: var(--base-color-scale-black-0);
2045
2045
  --brand-SubdomainNavBar-border-button-hover: var(--base-color-scale-black-0);
@@ -2058,7 +2058,7 @@ select {
2058
2058
 
2059
2059
  /**
2060
2060
  * Do not edit directly
2061
- * Generated on Thu, 03 Nov 2022 12:29:40 GMT
2061
+ * Generated on Fri, 04 Nov 2022 12:59:23 GMT
2062
2062
  */
2063
2063
 
2064
2064
  :root,
@@ -2163,7 +2163,7 @@ select {
2163
2163
 
2164
2164
  /**
2165
2165
  * Do not edit directly
2166
- * Generated on Thu, 03 Nov 2022 12:29:40 GMT
2166
+ * Generated on Fri, 04 Nov 2022 12:59:23 GMT
2167
2167
  */
2168
2168
 
2169
2169
  :root,
@@ -2305,7 +2305,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
2305
2305
 
2306
2306
  /**
2307
2307
  * Do not edit directly
2308
- * Generated on Thu, 03 Nov 2022 12:29:39 GMT
2308
+ * Generated on Fri, 04 Nov 2022 12:59:23 GMT
2309
2309
  */
2310
2310
 
2311
2311
  :root {
@@ -2315,7 +2315,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
2315
2315
 
2316
2316
  /**
2317
2317
  * Do not edit directly
2318
- * Generated on Thu, 03 Nov 2022 12:29:40 GMT
2318
+ * Generated on Fri, 04 Nov 2022 12:59:23 GMT
2319
2319
  */
2320
2320
 
2321
2321
  :root,
@@ -2385,7 +2385,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
2385
2385
 
2386
2386
  /**
2387
2387
  * Do not edit directly
2388
- * Generated on Thu, 03 Nov 2022 12:29:39 GMT
2388
+ * Generated on Fri, 04 Nov 2022 12:59:23 GMT
2389
2389
  */
2390
2390
 
2391
2391
  :root {
@@ -2404,7 +2404,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
2404
2404
 
2405
2405
  /**
2406
2406
  * Do not edit directly
2407
- * Generated on Thu, 03 Nov 2022 12:29:40 GMT
2407
+ * Generated on Fri, 04 Nov 2022 12:59:23 GMT
2408
2408
  */
2409
2409
 
2410
2410
  :root,
@@ -3081,7 +3081,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
3081
3081
 
3082
3082
  /**
3083
3083
  * Do not edit directly
3084
- * Generated on Thu, 03 Nov 2022 12:29:39 GMT
3084
+ * Generated on Fri, 04 Nov 2022 12:59:23 GMT
3085
3085
  */
3086
3086
 
3087
3087
  :root {
@@ -3364,3 +3364,307 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
3364
3364
  margin-right: auto;
3365
3365
  }
3366
3366
 
3367
+ /**
3368
+ * Do not edit directly
3369
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:40 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:39 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:39 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:39 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:40 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:39 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:40 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:40 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:59: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:59: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, 03 Nov 2022 12:29:39 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:40 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:39 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:40 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:39 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:39 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:59: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, 03 Nov 2022 12:29:40 GMT
3
+ * Generated on Fri, 04 Nov 2022 12:59:23 GMT
4
4
  */
5
5
 
6
6
  :root,