@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.
- package/lib/ComparisonTable/ComparisonTable.d.ts +42 -0
- package/lib/ComparisonTable/ComparisonTable.visual.spec.d.ts +1 -0
- package/lib/ComparisonTable/index.d.ts +1 -0
- package/lib/LayoutExamples/LayoutExamples.visual.spec.d.ts +1 -0
- package/lib/css/main.css +323 -19
- package/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/base/colors/color-scales.css +1 -1
- package/lib/design-tokens/css/tokens/base/size/size.css +1 -1
- package/lib/design-tokens/css/tokens/base/typography/typography.css +1 -1
- package/lib/design-tokens/css/tokens/functional/colors/global-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/colors/global.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes.css +15 -0
- package/lib/design-tokens/css/tokens/functional/components/control/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/hero/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/inline-link/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/river/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/subdomain-nav-bar/colors-with-modes.css +2 -2
- package/lib/design-tokens/css/tokens/functional/size/border.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/breakpoints.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size-coarse.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size-fine.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size.css +1 -1
- package/lib/design-tokens/css/tokens/functional/typography/typography-responsive.css +1 -1
- package/lib/design-tokens/css/tokens/functional/typography/typography.css +1 -1
- package/lib/design-tokens/js/module/tokens/base/colors/color-scales.js +1 -1
- package/lib/design-tokens/js/module/tokens/base/size/size.js +1 -1
- package/lib/design-tokens/js/module/tokens/base/typography/typography.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/colors/global.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/control/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/faq/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/faq/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/inline-link/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/border.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/breakpoints.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size-coarse.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size-fine.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/viewport.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/typography/typography-responsive.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/typography/typography.js +1 -1
- package/lib/design-tokens/js/tokens/base/colors/color-scales.js +1 -1
- package/lib/design-tokens/js/tokens/base/size/size.js +1 -1
- package/lib/design-tokens/js/tokens/base/typography/typography.js +1 -1
- package/lib/design-tokens/js/tokens/functional/colors/global.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/control/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/faq/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/faq/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/inline-link/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/border.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/breakpoints.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/size-coarse.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/size-fine.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/size.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/viewport.js +1 -1
- package/lib/design-tokens/js/tokens/functional/typography/typography-responsive.js +1 -1
- package/lib/design-tokens/js/tokens/functional/typography/typography.js +1 -1
- package/lib/design-tokens/ts/tokens/base/colors/color-scales.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/base/colors/color-scales.js +1 -1
- package/lib/design-tokens/ts/tokens/base/size/size.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/base/size/size.js +1 -1
- package/lib/design-tokens/ts/tokens/base/typography/typography.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/base/typography/typography.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/colors/global.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/colors/global.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/control/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/control/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/hero/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/border.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/border.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/breakpoints.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/breakpoints.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-coarse.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-coarse.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-fine.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-fine.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/viewport.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/viewport.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography-responsive.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography-responsive.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography.js +1 -1
- package/lib/index.d.ts +1 -0
- package/lib/index.js +1 -1
- 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 {};
|
|
@@ -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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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-
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
+
|
package/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes.css
ADDED
|
@@ -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
|
+
}
|