@coopdigital/styles 0.5.0 → 0.5.2

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 (13) hide show
  1. package/README.md +39 -13
  2. package/dist/components/Button.css +13 -13
  3. package/dist/components/Pill.css +19 -19
  4. package/dist/main.css +25 -25
  5. package/dist/reset.css +4 -4
  6. package/dist/typography.css +21 -21
  7. package/package.json +11 -2
  8. package/src/components/Button.scss +18 -13
  9. package/src/components/Pill.scss +36 -31
  10. package/src/reset.scss +5 -4
  11. package/src/typography/_links.scss +8 -4
  12. package/src/typography/_misc.scss +5 -3
  13. package/src/typography/_text.scss +14 -14
package/README.md CHANGED
@@ -10,12 +10,15 @@
10
10
  [all_contributors_badge]: https://img.shields.io/badge/all_contributors-15-C08A00.svg ''
11
11
  <!-- ALL-CONTRIBUTORS-BADGE:END -->
12
12
 
13
-
14
13
  <a href="https://www.npmjs.com/package/@coopdigital/styles"><img src="https://img.shields.io/npm/v/%40coopdigital%2Fstyles?color=E85A00" alt="npm version" /></a>
15
14
  <img alt="NPM Last Update" src="https://img.shields.io/npm/last-update/%40coopdigital%2Fstyles?label=published&color=6762F9">
16
15
  <img alt="NPM Downloads" src="https://img.shields.io/npm/d18m/%40coopdigital%2Fstyles?color=819C00">
17
16
  [![All Contributors][all_contributors_badge]](#contributors)
18
17
 
18
+ > Styles for the Experience Library design system.
19
+
20
+ You can see the full range of styles and documentation on the [Experience Kit Storybook](https://static.coop.co.uk/experience-kit-storybook-react)
21
+
19
22
  ## Getting started
20
23
 
21
24
  Install the package from NPM:
@@ -23,22 +26,21 @@ Install the package from NPM:
23
26
  npm install @coopdigital/styles
24
27
  ```
25
28
 
26
- Import styles in the format that you need:
29
+ ## Usage
30
+
31
+ Import the main stylesheet and any corresponding component styles you need:
27
32
  ```
28
- @import "@coopdigital/styles/components/Button.css"
29
- @use "@coopdigital/styles/components/Button.scss"
33
+ import "@coopdigital/styles/dist/main.css"
34
+ import "@coopdigital/styles/dist/components/Pill.css"
30
35
  ```
31
36
 
32
- ## Package Scripts
33
-
34
- The following scripts should be run inside the styles package folder.
35
-
37
+ Alternatively if your project uses SASS you can import the source stylesheets using either the @use or @import format:
38
+ ```
39
+ @use "@coopdigital/styles/src/main.scss"
40
+ @use "@coopdigital/styles/src/components/Pill.scss"
41
+ ```
36
42
 
37
- | Script | Action |
38
- | -------------------- | ---------------------------------------- |
39
- | `npm run test` | To run vitest |
40
- | `npm run test:coverage` | To run vitest test coverage |
41
- | `npm run build` | To run build script |
43
+ This package can be used alongside our [react components package](https://www.npmjs.com/package/@coopdigital/react).
42
44
 
43
45
  ## Contributors ✨
44
46
 
@@ -139,3 +141,27 @@ Thanks goes to these wonderful people:
139
141
  <!-- ALL-CONTRIBUTORS-LIST:END -->
140
142
 
141
143
  This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification.
144
+
145
+ ## License
146
+
147
+ MIT License
148
+
149
+ Copyright (c) Co-operative Group Limited
150
+
151
+ Permission is hereby granted, free of charge, to any person obtaining a copy
152
+ of this software and associated documentation files (the "Software"), to deal
153
+ in the Software without restriction, including without limitation the rights
154
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
155
+ copies of the Software, and to permit persons to whom the Software is
156
+ furnished to do so, subject to the following conditions:
157
+
158
+ The above copyright notice and this permission notice shall be included in all
159
+ copies or substantial portions of the Software.
160
+
161
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
162
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
163
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
164
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
165
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
166
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
167
+ SOFTWARE.
package/dist/components/Button.css CHANGED
@@ -1,24 +1,24 @@
1
1
  .coop-button {
2
+ cursor: pointer;
2
3
  display: inline-block;
3
4
  display: inline-flex;
4
5
  align-items: center;
5
6
  justify-content: center;
6
7
  min-height: 3.25rem;
7
8
  padding: 1rem 1.25rem;
8
- color: white;
9
- background: #005878;
10
- font-size: 1.125rem;
9
+ border: 0;
10
+ border-radius: 8px;
11
11
  font-family: Avenir-Next, "Helvetica Neue", Helvetica, Arial, sans-serif;
12
+ font-size: 1.125rem;
12
13
  font-weight: 400;
13
14
  line-height: 1.2;
15
+ color: white;
14
16
  text-align: center;
15
- border: 0;
16
- border-radius: 8px;
17
+ text-decoration: none;
18
+ background: #005878;
19
+ outline: none;
17
20
  transition: 0.15s ease-in-out;
18
21
  transition-property: background-color, color;
19
- outline: none;
20
- text-decoration: none;
21
- cursor: pointer;
22
22
  }
23
23
  @media (--mq-medium) {
24
24
  .coop-button {
@@ -30,21 +30,21 @@
30
30
 
31
31
  .coop-button:hover,
32
32
  .coop-button:focus {
33
- background: #003e55;
34
- color: #fff;
35
33
  border: 0;
34
+ color: #fff;
36
35
  text-decoration: underline;
36
+ background: #003e55;
37
37
  }
38
38
 
39
39
  .coop-button:focus {
40
- transition: none;
41
40
  outline: 2px solid #8d44d8;
42
41
  outline-offset: 4px;
42
+ transition: none;
43
43
  }
44
44
 
45
45
  .coop-button:active {
46
- background: #001f2b;
47
46
  color: #fff;
47
+ background: #001f2b;
48
48
  outline: 0;
49
49
  }
50
50
 
@@ -53,6 +53,6 @@
53
53
  }
54
54
 
55
55
  .coop-button--primary {
56
- background: #0f8482;
57
56
  color: #fff;
57
+ background: #0f8482;
58
58
  }
package/dist/components/Pill.css CHANGED
@@ -2,12 +2,12 @@
2
2
  --type-size-badge: var(--type-size-10);
3
3
  --type-size-pill: var(--type-size-16);
4
4
  display: inline-block;
5
- background-color: var(--color-blue-light-10);
6
- border-radius: var(--ui-border-radius-xl);
7
5
  padding: var(--spacing-12) var(--spacing-20);
6
+ border-radius: var(--ui-border-radius-xl);
8
7
  font-size: var(--type-size-pill);
9
8
  color: var(--color-text);
10
9
  text-decoration: none;
10
+ background-color: var(--color-blue-light-10);
11
11
  }
12
12
  .coop-pill[data-badge] {
13
13
  position: relative;
@@ -17,15 +17,27 @@
17
17
  position: absolute;
18
18
  top: 0;
19
19
  right: var(--spacing-12);
20
+ transform: translateY(-50%);
21
+ padding: var(--spacing-2) var(--spacing-6);
22
+ border-radius: var(--ui-border-radius-m);
20
23
  font-size: var(--type-size-badge);
21
24
  font-weight: 600;
22
- border-radius: var(--ui-border-radius-m);
23
- padding: var(--spacing-2) var(--spacing-6);
24
- color: var(--color-white);
25
25
  line-height: var(--type-line-height);
26
- transform: translateY(-50%);
26
+ color: var(--color-white);
27
27
  text-transform: uppercase;
28
28
  }
29
+ .coop-pill[data-size=sm] {
30
+ --type-size-pill: var(--type-size-14);
31
+ }
32
+ .coop-pill[data-size=lg] {
33
+ --type-size-pill: var(--type-size-18);
34
+ --type-size-badge: var(--type-size-12);
35
+ }
36
+ .coop-pill[data-size=xl] {
37
+ --type-size-pill: var(--type-size-20);
38
+ --type-size-badge: var(--type-size-12);
39
+ padding: var(--spacing-14) var(--spacing-24);
40
+ }
29
41
  .coop-pill[data-badge-color=green]::after {
30
42
  background-color: var(--color-dark-green);
31
43
  }
@@ -44,22 +56,10 @@
44
56
  .coop-pill[data-pill-color=pink] {
45
57
  background-color: var(--color-alt-light-pink);
46
58
  }
47
- .coop-pill[data-size=sm] {
48
- --type-size-pill: var(--type-size-14);
49
- }
50
- .coop-pill[data-size=lg] {
51
- --type-size-pill: var(--type-size-18);
52
- --type-size-badge: var(--type-size-12);
53
- }
54
- .coop-pill[data-size=xl] {
55
- --type-size-pill: var(--type-size-20);
56
- --type-size-badge: var(--type-size-12);
57
- padding: var(--spacing-14) var(--spacing-24);
58
- }
59
59
 
60
60
  a.coop-pill:focus, a.coop-pill:hover {
61
- text-decoration: underline;
62
61
  color: var(--color-text);
62
+ text-decoration: underline;
63
63
  }
64
64
 
65
65
  .coop-pill-group {
package/dist/main.css CHANGED
@@ -139,13 +139,13 @@ body {
139
139
  }
140
140
 
141
141
  body {
142
+ min-height: 100vh;
142
143
  margin: 0;
143
144
  padding: 0;
144
145
  border: 0;
145
- min-height: 100vh;
146
- line-height: var(--type-line-height);
147
146
  -webkit-font-smoothing: antialiased;
148
147
  -moz-osx-font-smoothing: grayscale;
148
+ line-height: var(--type-line-height);
149
149
  }
150
150
 
151
151
  body,
@@ -196,14 +196,14 @@ h4 {
196
196
  }
197
197
 
198
198
  a:not([class]) {
199
- text-decoration-skip-ink: auto;
200
199
  color: currentcolor;
200
+ text-decoration-skip-ink: auto;
201
201
  }
202
202
 
203
203
  img,
204
204
  picture {
205
- max-width: 100%;
206
205
  display: block;
206
+ max-width: 100%;
207
207
  }
208
208
 
209
209
  :target {
@@ -247,21 +247,21 @@ a:hover,
247
247
  a:active, a:focus,
248
248
  .coop-link:active,
249
249
  .coop-link:focus {
250
- transition: none;
251
250
  outline: 2px solid var(--color-focus-ring);
252
251
  outline-offset: 3px;
252
+ transition: none;
253
253
  }
254
254
 
255
255
  button.coop-link {
256
+ cursor: pointer;
256
257
  display: inline;
257
258
  margin: 0;
258
259
  padding: 0;
259
- appearance: none;
260
- background: none;
261
260
  border: 0;
262
261
  border-radius: 0;
263
- cursor: pointer;
264
262
  text-align: inherit;
263
+ appearance: none;
264
+ background: none;
265
265
  }
266
266
 
267
267
  .coop-link-white {
@@ -298,61 +298,61 @@ ol {
298
298
  }
299
299
 
300
300
  h1.coop-t-mega {
301
- font-size: var(--type-size-48);
302
301
  margin-bottom: var(--spacing-8);
302
+ font-size: var(--type-size-48);
303
303
  }
304
304
  @media (min-width: 48em) {
305
305
  h1.coop-t-mega {
306
- font-size: var(--type-size-56);
307
306
  margin-bottom: var(--spacing-16);
307
+ font-size: var(--type-size-56);
308
308
  }
309
309
  }
310
310
 
311
311
  h1 {
312
- font-size: var(--type-size-30);
313
312
  margin-bottom: var(--spacing-8);
313
+ font-size: var(--type-size-30);
314
314
  }
315
315
  @media (min-width: 48em) {
316
316
  h1 {
317
- font-size: var(--type-size-46);
318
317
  margin-bottom: var(--spacing-16);
318
+ font-size: var(--type-size-46);
319
319
  }
320
320
  }
321
321
 
322
322
  h2 {
323
- font-size: var(--type-size-26);
324
323
  margin-bottom: var(--spacing-8);
324
+ font-size: var(--type-size-26);
325
325
  }
326
326
  @media (min-width: 48em) {
327
327
  h2 {
328
- font-size: var(--type-size-32);
329
328
  margin-bottom: var(--spacing-16);
329
+ font-size: var(--type-size-32);
330
330
  }
331
331
  }
332
332
 
333
333
  h3 {
334
- font-size: var(--type-size-26);
335
334
  margin-bottom: var(--spacing-8);
335
+ font-size: var(--type-size-26);
336
336
  }
337
337
  @media (min-width: 48em) {
338
338
  h3 {
339
- font-size: var(--type-size-26);
340
339
  margin-bottom: var(--spacing-16);
340
+ font-size: var(--type-size-26);
341
341
  }
342
342
  }
343
343
 
344
344
  h4,
345
345
  h5,
346
346
  h6 {
347
- font-size: var(--type-size-18);
348
347
  margin-bottom: var(--spacing-8);
348
+ font-size: var(--type-size-18);
349
349
  }
350
350
  @media (min-width: 48em) {
351
351
  h4,
352
352
  h5,
353
353
  h6 {
354
- font-size: var(--type-size-22);
355
354
  margin-bottom: var(--spacing-16);
355
+ font-size: var(--type-size-22);
356
356
  }
357
357
  }
358
358
 
@@ -363,14 +363,14 @@ h6 {
363
363
 
364
364
  .coop-t-headline-upper {
365
365
  font-family: var(--font-family-headline);
366
- text-transform: uppercase;
367
366
  line-height: 100%;
367
+ text-transform: uppercase;
368
368
  }
369
369
 
370
370
  h1.coop-t-headline-mega {
371
371
  font-family: var(--font-family-headline);
372
- color: var(--color-brand-coop);
373
372
  font-size: var(--type-size-48);
373
+ color: var(--color-brand-coop);
374
374
  }
375
375
  @media (min-width: 37.5em) {
376
376
  h1.coop-t-headline-mega {
@@ -384,8 +384,8 @@ h1.coop-t-headline-mega {
384
384
  }
385
385
 
386
386
  h1.coop-t-headline {
387
- color: var(--color-brand-coop);
388
387
  font-size: var(--type-size-40);
388
+ color: var(--color-brand-coop);
389
389
  }
390
390
  @media (min-width: 37.5em) {
391
391
  h1.coop-t-headline {
@@ -399,8 +399,8 @@ h1.coop-t-headline {
399
399
  }
400
400
 
401
401
  .coop-t-lead-p {
402
- font-size: var(--type-size-22);
403
402
  margin-bottom: var(--spacing-16);
403
+ font-size: var(--type-size-22);
404
404
  }
405
405
  @media (min-width: 48em) {
406
406
  .coop-t-lead-p {
@@ -410,12 +410,12 @@ h1.coop-t-headline {
410
410
 
411
411
  hr {
412
412
  display: block;
413
- border-style: solid;
413
+ height: 0;
414
+ margin: var(--spacing-16) 0;
414
415
  border-color: var(--color-grey-mid);
416
+ border-style: solid;
415
417
  border-width: 0 0 1px 0;
416
- height: 0;
417
418
  color: var(--color-grey-mid);
418
- margin: var(--spacing-16) 0;
419
419
  }
420
420
  @media (min-width: 48em) {
421
421
  hr {
package/dist/reset.css CHANGED
@@ -18,13 +18,13 @@ body {
18
18
  }
19
19
 
20
20
  body {
21
+ min-height: 100vh;
21
22
  margin: 0;
22
23
  padding: 0;
23
24
  border: 0;
24
- min-height: 100vh;
25
- line-height: var(--type-line-height);
26
25
  -webkit-font-smoothing: antialiased;
27
26
  -moz-osx-font-smoothing: grayscale;
27
+ line-height: var(--type-line-height);
28
28
  }
29
29
 
30
30
  body,
@@ -75,14 +75,14 @@ h4 {
75
75
  }
76
76
 
77
77
  a:not([class]) {
78
- text-decoration-skip-ink: auto;
79
78
  color: currentcolor;
79
+ text-decoration-skip-ink: auto;
80
80
  }
81
81
 
82
82
  img,
83
83
  picture {
84
- max-width: 100%;
85
84
  display: block;
85
+ max-width: 100%;
86
86
  }
87
87
 
88
88
  :target {
package/dist/typography.css CHANGED
@@ -36,21 +36,21 @@ a:hover,
36
36
  a:active, a:focus,
37
37
  .coop-link:active,
38
38
  .coop-link:focus {
39
- transition: none;
40
39
  outline: 2px solid var(--color-focus-ring);
41
40
  outline-offset: 3px;
41
+ transition: none;
42
42
  }
43
43
 
44
44
  button.coop-link {
45
+ cursor: pointer;
45
46
  display: inline;
46
47
  margin: 0;
47
48
  padding: 0;
48
- appearance: none;
49
- background: none;
50
49
  border: 0;
51
50
  border-radius: 0;
52
- cursor: pointer;
53
51
  text-align: inherit;
52
+ appearance: none;
53
+ background: none;
54
54
  }
55
55
 
56
56
  .coop-link-white {
@@ -87,61 +87,61 @@ ol {
87
87
  }
88
88
 
89
89
  h1.coop-t-mega {
90
- font-size: var(--type-size-48);
91
90
  margin-bottom: var(--spacing-8);
91
+ font-size: var(--type-size-48);
92
92
  }
93
93
  @media (min-width: 48em) {
94
94
  h1.coop-t-mega {
95
- font-size: var(--type-size-56);
96
95
  margin-bottom: var(--spacing-16);
96
+ font-size: var(--type-size-56);
97
97
  }
98
98
  }
99
99
 
100
100
  h1 {
101
- font-size: var(--type-size-30);
102
101
  margin-bottom: var(--spacing-8);
102
+ font-size: var(--type-size-30);
103
103
  }
104
104
  @media (min-width: 48em) {
105
105
  h1 {
106
- font-size: var(--type-size-46);
107
106
  margin-bottom: var(--spacing-16);
107
+ font-size: var(--type-size-46);
108
108
  }
109
109
  }
110
110
 
111
111
  h2 {
112
- font-size: var(--type-size-26);
113
112
  margin-bottom: var(--spacing-8);
113
+ font-size: var(--type-size-26);
114
114
  }
115
115
  @media (min-width: 48em) {
116
116
  h2 {
117
- font-size: var(--type-size-32);
118
117
  margin-bottom: var(--spacing-16);
118
+ font-size: var(--type-size-32);
119
119
  }
120
120
  }
121
121
 
122
122
  h3 {
123
- font-size: var(--type-size-26);
124
123
  margin-bottom: var(--spacing-8);
124
+ font-size: var(--type-size-26);
125
125
  }
126
126
  @media (min-width: 48em) {
127
127
  h3 {
128
- font-size: var(--type-size-26);
129
128
  margin-bottom: var(--spacing-16);
129
+ font-size: var(--type-size-26);
130
130
  }
131
131
  }
132
132
 
133
133
  h4,
134
134
  h5,
135
135
  h6 {
136
- font-size: var(--type-size-18);
137
136
  margin-bottom: var(--spacing-8);
137
+ font-size: var(--type-size-18);
138
138
  }
139
139
  @media (min-width: 48em) {
140
140
  h4,
141
141
  h5,
142
142
  h6 {
143
- font-size: var(--type-size-22);
144
143
  margin-bottom: var(--spacing-16);
144
+ font-size: var(--type-size-22);
145
145
  }
146
146
  }
147
147
 
@@ -152,14 +152,14 @@ h6 {
152
152
 
153
153
  .coop-t-headline-upper {
154
154
  font-family: var(--font-family-headline);
155
- text-transform: uppercase;
156
155
  line-height: 100%;
156
+ text-transform: uppercase;
157
157
  }
158
158
 
159
159
  h1.coop-t-headline-mega {
160
160
  font-family: var(--font-family-headline);
161
- color: var(--color-brand-coop);
162
161
  font-size: var(--type-size-48);
162
+ color: var(--color-brand-coop);
163
163
  }
164
164
  @media (min-width: 37.5em) {
165
165
  h1.coop-t-headline-mega {
@@ -173,8 +173,8 @@ h1.coop-t-headline-mega {
173
173
  }
174
174
 
175
175
  h1.coop-t-headline {
176
- color: var(--color-brand-coop);
177
176
  font-size: var(--type-size-40);
177
+ color: var(--color-brand-coop);
178
178
  }
179
179
  @media (min-width: 37.5em) {
180
180
  h1.coop-t-headline {
@@ -188,8 +188,8 @@ h1.coop-t-headline {
188
188
  }
189
189
 
190
190
  .coop-t-lead-p {
191
- font-size: var(--type-size-22);
192
191
  margin-bottom: var(--spacing-16);
192
+ font-size: var(--type-size-22);
193
193
  }
194
194
  @media (min-width: 48em) {
195
195
  .coop-t-lead-p {
@@ -199,12 +199,12 @@ h1.coop-t-headline {
199
199
 
200
200
  hr {
201
201
  display: block;
202
- border-style: solid;
202
+ height: 0;
203
+ margin: var(--spacing-16) 0;
203
204
  border-color: var(--color-grey-mid);
205
+ border-style: solid;
204
206
  border-width: 0 0 1px 0;
205
- height: 0;
206
207
  color: var(--color-grey-mid);
207
- margin: var(--spacing-16) 0;
208
208
  }
209
209
  @media (min-width: 48em) {
210
210
  hr {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@coopdigital/styles",
3
3
  "type": "module",
4
- "version": "0.5.0",
4
+ "version": "0.5.2",
5
5
  "private": false,
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -10,8 +10,17 @@
10
10
  "dist",
11
11
  "src"
12
12
  ],
13
+ "keywords": [
14
+ "co-op",
15
+ "design-system",
16
+ "experience-kit",
17
+ "experience-library",
18
+ "styles",
19
+ "sass"
20
+ ],
13
21
  "scripts": {
14
22
  "test": "vitest run",
23
+ "test:watch": "vitest",
15
24
  "test:coverage": "vitest run --coverage",
16
25
  "build": "tsx scripts build"
17
26
  },
@@ -22,5 +31,5 @@
22
31
  "glob": "^11.0.1",
23
32
  "sass-embedded": "^1.85.0"
24
33
  },
25
- "gitHead": "ccedccf7209f30e95b5312052836bbd745410d0c"
34
+ "gitHead": "827c8ec0c84d2f8034e28acde178e7c3e7ed488b"
26
35
  }
package/src/components/Button.scss CHANGED
@@ -1,24 +1,29 @@
1
1
  .coop-button {
2
+ cursor: pointer;
3
+
2
4
  display: inline-block;
3
5
  display: inline-flex;
4
6
  align-items: center;
5
7
  justify-content: center;
8
+
6
9
  min-height: 3.25rem;
7
10
  padding: 1rem 1.25rem;
8
- color: white;
9
- background: #005878;
10
- font-size: 1.125rem;
11
+ border: 0;
12
+ border-radius: 8px;
13
+
11
14
  font-family: Avenir-Next, "Helvetica Neue", Helvetica, Arial, sans-serif;
15
+ font-size: 1.125rem;
12
16
  font-weight: 400;
13
17
  line-height: 1.2;
18
+ color: white;
14
19
  text-align: center;
15
- border: 0;
16
- border-radius: 8px;
20
+ text-decoration: none;
21
+
22
+ background: #005878;
23
+ outline: none;
24
+
17
25
  transition: 0.15s ease-in-out;
18
26
  transition-property: background-color, color;
19
- outline: none;
20
- text-decoration: none;
21
- cursor: pointer;
22
27
 
23
28
  @media (--mq-medium) {
24
29
  min-height: 3.75rem;
@@ -29,21 +34,21 @@
29
34
 
30
35
  .coop-button:hover,
31
36
  .coop-button:focus {
32
- background: #003e55;
33
- color: #fff;
34
37
  border: 0;
38
+ color: #fff;
35
39
  text-decoration: underline;
40
+ background: #003e55;
36
41
  }
37
42
 
38
43
  .coop-button:focus {
39
- transition: none;
40
44
  outline: 2px solid #8d44d8;
41
45
  outline-offset: 4px;
46
+ transition: none;
42
47
  }
43
48
 
44
49
  .coop-button:active {
45
- background: #001f2b;
46
50
  color: #fff;
51
+ background: #001f2b;
47
52
  outline: 0;
48
53
  }
49
54
 
@@ -52,6 +57,6 @@
52
57
  }
53
58
 
54
59
  .coop-button--primary {
55
- background: #0f8482;
56
60
  color: #fff;
61
+ background: #0f8482;
57
62
  }
package/src/components/Pill.scss CHANGED
@@ -1,58 +1,51 @@
1
1
  .coop-pill {
2
+ $badge-colors: (
3
+ "green": var(--color-dark-green),
4
+ "orange": var(--color-dark-orange),
5
+ "pink": var(--color-dark-pink),
6
+ "red": var(--color-red-dark-4),
7
+ );
8
+ $pill-colors: (
9
+ "blue": var(--color-blue-light-10),
10
+ "pink": var(--color-alt-light-pink),
11
+ );
12
+
2
13
  --type-size-badge: var(--type-size-10);
3
14
  --type-size-pill: var(--type-size-16);
4
15
 
5
16
  display: inline-block;
6
- background-color: var(--color-blue-light-10);
7
- border-radius: var(--ui-border-radius-xl);
17
+
8
18
  padding: var(--spacing-12) var(--spacing-20);
19
+ border-radius: var(--ui-border-radius-xl);
20
+
9
21
  font-size: var(--type-size-pill); // [data-pill-size="md"]
10
22
  color: var(--color-text);
11
23
  text-decoration: none;
12
24
 
25
+ background-color: var(--color-blue-light-10);
26
+
13
27
  &[data-badge] {
14
28
  position: relative;
15
29
 
16
30
  &::after {
17
31
  content: attr(data-badge);
32
+
18
33
  position: absolute;
19
34
  top: 0;
20
35
  right: var(--spacing-12);
36
+ transform: translateY(-50%);
37
+
38
+ padding: var(--spacing-2) var(--spacing-6);
39
+ border-radius: var(--ui-border-radius-m);
40
+
21
41
  font-size: var(--type-size-badge);
22
42
  font-weight: 600;
23
- border-radius: var(--ui-border-radius-m);
24
- padding: var(--spacing-2) var(--spacing-6);
25
- color: var(--color-white);
26
43
  line-height: var(--type-line-height);
27
- transform: translateY(-50%);
44
+ color: var(--color-white);
28
45
  text-transform: uppercase;
29
46
  }
30
47
  }
31
48
 
32
- $badge-colors: (
33
- "green": var(--color-dark-green),
34
- "orange": var(--color-dark-orange),
35
- "pink": var(--color-dark-pink),
36
- "red": var(--color-red-dark-4),
37
- );
38
-
39
- @each $key, $badge-color in $badge-colors {
40
- &[data-badge-color="#{$key}"]::after {
41
- background-color: $badge-color;
42
- }
43
- }
44
-
45
- $pill-colors: (
46
- "blue": var(--color-blue-light-10),
47
- "pink": var(--color-alt-light-pink),
48
- );
49
-
50
- @each $key, $pill-color in $pill-colors {
51
- &[data-pill-color="#{$key}"] {
52
- background-color: $pill-color;
53
- }
54
- }
55
-
56
49
  &[data-size="sm"] {
57
50
  --type-size-pill: var(--type-size-14);
58
51
  }
@@ -68,13 +61,25 @@
68
61
 
69
62
  padding: var(--spacing-14) var(--spacing-24);
70
63
  }
64
+
65
+ @each $key, $badge-color in $badge-colors {
66
+ &[data-badge-color="#{$key}"]::after {
67
+ background-color: $badge-color;
68
+ }
69
+ }
70
+
71
+ @each $key, $pill-color in $pill-colors {
72
+ &[data-pill-color="#{$key}"] {
73
+ background-color: $pill-color;
74
+ }
75
+ }
71
76
  }
72
77
 
73
78
  a.coop-pill {
74
79
  &:focus,
75
80
  &:hover {
76
- text-decoration: underline;
77
81
  color: var(--color-text);
82
+ text-decoration: underline;
78
83
  }
79
84
  }
80
85
 
package/src/reset.scss CHANGED
@@ -18,13 +18,14 @@ body {
18
18
  }
19
19
 
20
20
  body {
21
+ min-height: 100vh;
21
22
  margin: 0;
22
23
  padding: 0;
23
24
  border: 0;
24
- min-height: 100vh;
25
- line-height: var(--type-line-height);
25
+
26
26
  -webkit-font-smoothing: antialiased;
27
27
  -moz-osx-font-smoothing: grayscale;
28
+ line-height: var(--type-line-height);
28
29
  }
29
30
 
30
31
  body,
@@ -75,14 +76,14 @@ h4 {
75
76
  }
76
77
 
77
78
  a:not([class]) {
78
- text-decoration-skip-ink: auto;
79
79
  color: currentcolor;
80
+ text-decoration-skip-ink: auto;
80
81
  }
81
82
 
82
83
  img,
83
84
  picture {
84
- max-width: 100%;
85
85
  display: block;
86
+ max-width: 100%;
86
87
  }
87
88
 
88
89
  :target {
package/src/typography/_links.scss CHANGED
@@ -11,22 +11,26 @@ a,
11
11
 
12
12
  &:active,
13
13
  &:focus {
14
- transition: none;
15
14
  outline: 2px solid var(--color-focus-ring);
16
15
  outline-offset: 3px;
16
+ transition: none;
17
17
  }
18
18
  }
19
19
 
20
20
  button.coop-link {
21
+ cursor: pointer;
22
+
21
23
  display: inline;
24
+
22
25
  margin: 0;
23
26
  padding: 0;
24
- appearance: none;
25
- background: none;
26
27
  border: 0;
27
28
  border-radius: 0;
28
- cursor: pointer;
29
+
29
30
  text-align: inherit;
31
+
32
+ appearance: none;
33
+ background: none;
30
34
  }
31
35
 
32
36
  .coop-link-white {
package/src/typography/_misc.scss CHANGED
@@ -2,12 +2,14 @@
2
2
 
3
3
  hr {
4
4
  display: block;
5
- border-style: solid;
5
+
6
+ height: 0;
7
+ margin: var(--spacing-16) 0;
6
8
  border-color: var(--color-grey-mid);
9
+ border-style: solid;
7
10
  border-width: 0 0 1px 0;
8
- height: 0;
11
+
9
12
  color: var(--color-grey-mid);
10
- margin: var(--spacing-16) 0;
11
13
 
12
14
  @media (min-width: $mq-medium) {
13
15
  margin: var(--spacing-32) 0;
package/src/typography/_text.scss CHANGED
@@ -16,54 +16,54 @@ ol {
16
16
  }
17
17
 
18
18
  h1.coop-t-mega {
19
- font-size: var(--type-size-48);
20
19
  margin-bottom: var(--spacing-8);
20
+ font-size: var(--type-size-48);
21
21
 
22
22
  @media (min-width: $mq-medium) {
23
- font-size: var(--type-size-56);
24
23
  margin-bottom: var(--spacing-16);
24
+ font-size: var(--type-size-56);
25
25
  }
26
26
  }
27
27
 
28
28
  h1 {
29
- font-size: var(--type-size-30);
30
29
  margin-bottom: var(--spacing-8);
30
+ font-size: var(--type-size-30);
31
31
 
32
32
  @media (min-width: $mq-medium) {
33
- font-size: var(--type-size-46);
34
33
  margin-bottom: var(--spacing-16);
34
+ font-size: var(--type-size-46);
35
35
  }
36
36
  }
37
37
 
38
38
  h2 {
39
- font-size: var(--type-size-26);
40
39
  margin-bottom: var(--spacing-8);
40
+ font-size: var(--type-size-26);
41
41
 
42
42
  @media (min-width: $mq-medium) {
43
- font-size: var(--type-size-32);
44
43
  margin-bottom: var(--spacing-16);
44
+ font-size: var(--type-size-32);
45
45
  }
46
46
  }
47
47
 
48
48
  h3 {
49
- font-size: var(--type-size-26);
50
49
  margin-bottom: var(--spacing-8);
50
+ font-size: var(--type-size-26);
51
51
 
52
52
  @media (min-width: $mq-medium) {
53
- font-size: var(--type-size-26);
54
53
  margin-bottom: var(--spacing-16);
54
+ font-size: var(--type-size-26);
55
55
  }
56
56
  }
57
57
 
58
58
  h4,
59
59
  h5,
60
60
  h6 {
61
- font-size: var(--type-size-18);
62
61
  margin-bottom: var(--spacing-8);
62
+ font-size: var(--type-size-18);
63
63
 
64
64
  @media (min-width: $mq-medium) {
65
- font-size: var(--type-size-22);
66
65
  margin-bottom: var(--spacing-16);
66
+ font-size: var(--type-size-22);
67
67
  }
68
68
  }
69
69
 
@@ -74,14 +74,14 @@ h6 {
74
74
 
75
75
  .coop-t-headline-upper {
76
76
  font-family: var(--font-family-headline);
77
- text-transform: uppercase;
78
77
  line-height: 100%;
78
+ text-transform: uppercase;
79
79
  }
80
80
 
81
81
  h1.coop-t-headline-mega {
82
82
  font-family: var(--font-family-headline);
83
- color: var(--color-brand-coop);
84
83
  font-size: var(--type-size-48);
84
+ color: var(--color-brand-coop);
85
85
 
86
86
  @media (min-width: $mq-small) {
87
87
  font-size: var(--type-size-64);
@@ -93,8 +93,8 @@ h1.coop-t-headline-mega {
93
93
  }
94
94
 
95
95
  h1.coop-t-headline {
96
- color: var(--color-brand-coop);
97
96
  font-size: var(--type-size-40);
97
+ color: var(--color-brand-coop);
98
98
 
99
99
  @media (min-width: $mq-small) {
100
100
  font-size: var(--type-size-48);
@@ -106,8 +106,8 @@ h1.coop-t-headline {
106
106
  }
107
107
 
108
108
  .coop-t-lead-p {
109
- font-size: var(--type-size-22);
110
109
  margin-bottom: var(--spacing-16);
110
+ font-size: var(--type-size-22);
111
111
 
112
112
  @media (min-width: $mq-medium) {
113
113
  font-size: var(--type-size-26);