qpp-design-system 0.2.1 → 0.3.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/dist/styles/qpp-theme.css +84 -33
- package/package.json +1 -1
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
--color-transparent-white-alpha50: #ffffff80;
|
|
49
49
|
--color-transparent-white-alpha25: #ffffff40;
|
|
50
50
|
--color-background: #ffffff;
|
|
51
|
-
--color-background-inverse: #
|
|
51
|
+
--color-background-inverse: #004d99;
|
|
52
52
|
/* --color-base: #262626; */
|
|
53
53
|
--color-base: #036;
|
|
54
54
|
--color-base-inverse: #ffffff;
|
|
@@ -57,13 +57,13 @@
|
|
|
57
57
|
--color-border-inverse: #ffffff;
|
|
58
58
|
--color-error-lightest: #fef5f7;
|
|
59
59
|
--color-error-lighter: #f7bbc5;
|
|
60
|
-
--color-error-light: #
|
|
60
|
+
--color-error-light: #eb6077;
|
|
61
61
|
--color-error: #e31c3d;
|
|
62
62
|
--color-error-dark: #cc1937;
|
|
63
63
|
--color-error-darker: #9f142b;
|
|
64
64
|
--color-error-darkest: #720e1f;
|
|
65
65
|
--color-focus-light: #ffffff;
|
|
66
|
-
--color-focus-dark: #
|
|
66
|
+
--color-focus-dark: #bd13b8;
|
|
67
67
|
--color-gray-lightest: #f2f2f2;
|
|
68
68
|
--color-gray-lighter: #d9d9d9;
|
|
69
69
|
--color-gray-light: #a6a6a6;
|
|
@@ -71,35 +71,35 @@
|
|
|
71
71
|
--color-gray-dark: #5a5a5a;
|
|
72
72
|
--color-gray-darker: #404040;
|
|
73
73
|
--color-gray-darkest: #262626;
|
|
74
|
-
--color-muted: #
|
|
75
|
-
--color-muted-inverse: #
|
|
76
|
-
--color-primary-lightest: #
|
|
77
|
-
--color-primary-lighter: #
|
|
78
|
-
--color-primary-light: #
|
|
79
|
-
--color-primary: #
|
|
80
|
-
--color-primary-dark: #
|
|
81
|
-
--color-primary-darker: #
|
|
74
|
+
--color-muted: #5a5a5a;
|
|
75
|
+
--color-muted-inverse: #e9ecf1;
|
|
76
|
+
--color-primary-lightest: #e6f5ff;
|
|
77
|
+
--color-primary-lighter: #cbe8ff;
|
|
78
|
+
--color-primary-light: #66bdff;
|
|
79
|
+
--color-primary: #1785e5;
|
|
80
|
+
--color-primary-dark: #0062b8;
|
|
81
|
+
--color-primary-darker: #004d99;
|
|
82
82
|
--color-primary-darkest: #003366;
|
|
83
|
-
--color-secondary-lightest: #
|
|
84
|
-
--color-secondary-lighter: #
|
|
85
|
-
--color-secondary-light: #
|
|
83
|
+
--color-secondary-lightest: #d5fbf3;
|
|
84
|
+
--color-secondary-lighter: #7efbe1;
|
|
85
|
+
--color-secondary-light: #1dc2ae;
|
|
86
86
|
--color-secondary: #008480;
|
|
87
|
-
--color-secondary-dark: #
|
|
88
|
-
--color-secondary-darker: #
|
|
87
|
+
--color-secondary-dark: #0f6460;
|
|
88
|
+
--color-secondary-darker: #0b4b3f;
|
|
89
89
|
--color-secondary-darkest: #123131;
|
|
90
|
-
--color-accent-primary-lightest: #
|
|
91
|
-
--color-accent-primary-lighter: #
|
|
92
|
-
--color-accent-primary-light: #
|
|
93
|
-
--color-accent-primary: #
|
|
94
|
-
--color-accent-primary-dark: #
|
|
95
|
-
--color-accent-primary-darker: #
|
|
96
|
-
--color-accent-primary-darkest: #
|
|
97
|
-
--color-info-lightest: #
|
|
98
|
-
--color-info-lighter: #
|
|
99
|
-
--color-info-light: #
|
|
100
|
-
--color-info: #
|
|
101
|
-
--color-info-dark: #
|
|
102
|
-
--color-info-darker: #
|
|
90
|
+
--color-accent-primary-lightest: #fcebe6;
|
|
91
|
+
--color-accent-primary-lighter: #f5c3b3;
|
|
92
|
+
--color-accent-primary-light: #e7724f;
|
|
93
|
+
--color-accent-primary: #dd3603;
|
|
94
|
+
--color-accent-primary-dark: #c73103;
|
|
95
|
+
--color-accent-primary-darker: #9b2602;
|
|
96
|
+
--color-accent-primary-darkest: #6f1b02;
|
|
97
|
+
--color-info-lightest: #e6f9fd;
|
|
98
|
+
--color-info-lighter: #b3ecf8;
|
|
99
|
+
--color-info-light: #4ed2ee;
|
|
100
|
+
--color-info: #02bfe7;
|
|
101
|
+
--color-info-dark: #02acd0;
|
|
102
|
+
--color-info-darker: #0186a2;
|
|
103
103
|
--color-info-darkest: #016074;
|
|
104
104
|
--color-success-lightest: #f6faf5;
|
|
105
105
|
--color-success-lighter: #b8dcb7;
|
|
@@ -115,7 +115,7 @@
|
|
|
115
115
|
--color-warn-dark: #e6cd07;
|
|
116
116
|
--color-warn-darker: #b3a006;
|
|
117
117
|
--color-warn-darkest: #807204;
|
|
118
|
-
--color-visited: #
|
|
118
|
+
--color-visited: #4c2c92;
|
|
119
119
|
/* --backgroundColor: var(--color-primary-darker); */
|
|
120
120
|
--button__background-color--hover: var(--color-primary-darker);
|
|
121
121
|
--font-size-base: 1rem;
|
|
@@ -136,12 +136,12 @@
|
|
|
136
136
|
--font-line-height-heading: 1.2999999523162842;
|
|
137
137
|
--font-line-height-base: 1.5;
|
|
138
138
|
--font-line-height-lead: 1.7000000476837158;
|
|
139
|
-
font-family: 'Rubik', Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
|
140
139
|
--font-family-heading: 'Rubik', Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
|
141
140
|
--font-family-body: 'Rubik', Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
|
142
141
|
--font-family-button: 'Rubik', Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
|
143
142
|
--font-family-link: 'Rubik', Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
|
144
|
-
--font-family-pagination: 'Rubik', Arial, 'Helvetica Neue', Helvetica,
|
|
143
|
+
--font-family-pagination: 'Rubik', Arial, 'Helvetica Neue', Helvetica,
|
|
144
|
+
sans-serif;
|
|
145
145
|
--font-weight-heading-5xl: var(--font-weight-semibold);
|
|
146
146
|
--font-weight-heading-4xl: var(--font-weight-normal);
|
|
147
147
|
--font-weight-heading-3xl: var(--font-weight-normal);
|
|
@@ -158,7 +158,7 @@
|
|
|
158
158
|
--font-weight-button-sm: var(--font-weight-normal);
|
|
159
159
|
--font-weight-normal: 400;
|
|
160
160
|
--font-weight-bold: 700;
|
|
161
|
-
--font-weight-semibold:
|
|
161
|
+
--font-weight-semibold: 500;
|
|
162
162
|
--global__color: var(--color-base);
|
|
163
163
|
--global__color--inverse: var(--color-base-inverse);
|
|
164
164
|
--global__font-family: var(--font-family-body);
|
|
@@ -498,3 +498,54 @@
|
|
|
498
498
|
);
|
|
499
499
|
--usa-banner-security-icon__color: var(--color-success-light);
|
|
500
500
|
}
|
|
501
|
+
|
|
502
|
+
h1,
|
|
503
|
+
h2,
|
|
504
|
+
h3,
|
|
505
|
+
h4,
|
|
506
|
+
h5,
|
|
507
|
+
h6 {
|
|
508
|
+
font-family: var(--font-family-heading);
|
|
509
|
+
line-height: var(--font-line-height-heading);
|
|
510
|
+
margin-block: 0.5em 0;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
h1 {
|
|
514
|
+
font-size: var(--font-size-4xl); /* 3rem */
|
|
515
|
+
font-weight: var(--font-weight-heading-4xl); /* 400 */
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
h2 {
|
|
519
|
+
font-size: var(--font-size-3xl); /* 2.25rem */
|
|
520
|
+
font-weight: var(--font-weight-heading-3xl); /* 400 */
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
h3 {
|
|
524
|
+
font-size: var(--font-size-2xl); /* 1.5rem */
|
|
525
|
+
font-weight: var(--font-weight-heading-2xl); /* 500 */
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
h4 {
|
|
529
|
+
font-size: var(--font-size-xl); /* 1.3125rem */
|
|
530
|
+
font-weight: var(--font-weight-heading-xl); /* 500 */
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
h5 {
|
|
534
|
+
font-size: var(--font-size-lg); /* 1.125rem */
|
|
535
|
+
font-weight: var(--font-weight-heading-lg); /* 500 */
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
h6 {
|
|
539
|
+
font-size: var(--font-size-md); /* 1rem */
|
|
540
|
+
font-weight: var(--font-weight-heading-md); /* 500 */
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
@media (max-width: 768px) {
|
|
544
|
+
h1 {
|
|
545
|
+
font-size: var(--font-size-4xl--mobile); /* 2.25rem */
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
h2 {
|
|
549
|
+
font-size: var(--font-size-3xl--mobile); /* 1.875rem */
|
|
550
|
+
}
|
|
551
|
+
}
|