qpp-design-system 0.2.1 → 0.3.1

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 (2) hide show
  1. package/dist/styles/qpp-theme.css +94 -43
  2. package/package.json +1 -1
package/dist/styles/qpp-theme.css CHANGED
@@ -48,22 +48,22 @@
48
48
  --color-transparent-white-alpha50: #ffffff80;
49
49
  --color-transparent-white-alpha25: #ffffff40;
50
50
  --color-background: #ffffff;
51
- --color-background-inverse: #004D99;
52
- /* --color-base: #262626; */
53
- --color-base: #036;
51
+ --color-background-inverse: #004d99;
52
+ --color-base: #262626;
53
+ /* --color-base: #036; */
54
54
  --color-base-inverse: #ffffff;
55
55
  --color-border: #d9d9d9;
56
56
  --color-border-dark: #0f1e38;
57
57
  --color-border-inverse: #ffffff;
58
58
  --color-error-lightest: #fef5f7;
59
59
  --color-error-lighter: #f7bbc5;
60
- --color-error-light: #EB6077;
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: #BD13B8;
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: #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;
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: #D5FBF3;
84
- --color-secondary-lighter: #7EFBE1;
85
- --color-secondary-light: #1DC2AE;
83
+ --color-secondary-lightest: #d5fbf3;
84
+ --color-secondary-lighter: #7efbe1;
85
+ --color-secondary-light: #1dc2ae;
86
86
  --color-secondary: #008480;
87
- --color-secondary-dark: #0F6460;
88
- --color-secondary-darker: #0B4B3F;
87
+ --color-secondary-dark: #0f6460;
88
+ --color-secondary-darker: #0b4b3f;
89
89
  --color-secondary-darkest: #123131;
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;
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: #4C2C92;
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, sans-serif;
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);
@@ -157,24 +157,24 @@
157
157
  --font-weight-button-md: var(--font-weight-bold);
158
158
  --font-weight-button-sm: var(--font-weight-normal);
159
159
  --font-weight-normal: 400;
160
- --font-weight-bold: 700;
161
- --font-weight-semibold: 600;
160
+ --font-weight-bold: 500;
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);
165
165
  --global__font-size: var(--font-size-base);
166
166
  --global__line-height: var(--font-line-height-base);
167
167
  --accordion__color: var(--color-base);
168
- --accordion__border-top-left-radius: 20px;
169
- --accordion__border-top-right-radius: 20px;
168
+ --accordion__border-top-left-radius: 0px;
169
+ --accordion__border-top-right-radius: 0px;
170
170
  --accordion__border-bottom-left-radius: 0px;
171
171
  --accordion__border-bottom-right-radius: 0px;
172
- --accordion__border-width: 1px;
173
- --accordion-button__color: var(--color-base);
172
+ --accordion__border-width: 0px;
173
+ --accordion-button__color: var(--color-primary-dark);
174
174
  --accordion-content__background-color: var(--color-white);
175
- --accordion__background-color: var(--color-primary-lightest);
176
- --accordion__background-color--hover: var(--color-primary-lighter);
177
- --accordion__border-color: var(--color-gray-lightest);
175
+ --accordion__background-color: var(--color-white);
176
+ --accordion__background-color--hover: var(--color-white);
177
+ --accordion__border-color: var(--color-white);
178
178
  --alert__background-color--lightweight: var(--color-white);
179
179
  --alert__border-left-color: var(--color-info);
180
180
  --alert__border-color--error: var(--color-error);
@@ -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
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qpp-design-system",
3
- "version": "0.2.1",
3
+ "version": "0.3.1",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "description": "QPP Design System",