@coopdigital/styles 0.4.1 → 0.5.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 (18) hide show
  1. package/README.md +8 -26
  2. package/dist/components/{button.css → Button.css} +13 -13
  3. package/dist/components/Pill.css +70 -0
  4. package/dist/main.css +36 -30
  5. package/dist/reset.css +4 -8
  6. package/dist/typography.css +22 -21
  7. package/dist/vars.css +10 -1
  8. package/package.json +3 -2
  9. package/src/components/{button.scss → Button.scss} +18 -13
  10. package/src/components/Pill.scss +92 -0
  11. package/src/reset.scss +5 -8
  12. package/src/typography/_links.scss +9 -4
  13. package/src/typography/_misc.scss +5 -3
  14. package/src/typography/_text.scss +14 -14
  15. package/src/vars/_colours.scss +2 -0
  16. package/src/vars/_spacing.scss +5 -0
  17. package/src/vars/_typography.scss +1 -0
  18. package/src/vars/_ui.scss +4 -1
package/README.md CHANGED
@@ -4,8 +4,6 @@
4
4
  <br />
5
5
  </nav>
6
6
 
7
-
8
-
9
7
  # Experience Kit for Styles
10
8
 
11
9
  <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
@@ -18,8 +16,6 @@
18
16
  <img alt="NPM Downloads" src="https://img.shields.io/npm/d18m/%40coopdigital%2Fstyles?color=819C00">
19
17
  [![All Contributors][all_contributors_badge]](#contributors)
20
18
 
21
-
22
-
23
19
  ## Getting started
24
20
 
25
21
  Install the package from NPM:
@@ -33,11 +29,6 @@ Import styles in the format that you need:
33
29
  @use "@coopdigital/styles/components/Button.scss"
34
30
  ```
35
31
 
36
- ## Developing
37
-
38
- Refer to the [root README](https://gitlab.com/coopeng/sds/oneweb/experience-kit/-/blob/main/README.md) for general development setup and usage instructions (lint, formatting, etc).
39
-
40
-
41
32
  ## Package Scripts
42
33
 
43
34
  The following scripts should be run inside the styles package folder.
@@ -49,10 +40,6 @@ The following scripts should be run inside the styles package folder.
49
40
  | `npm run test:coverage` | To run vitest test coverage |
50
41
  | `npm run build` | To run build script |
51
42
 
52
-
53
-
54
-
55
-
56
43
  ## Contributors ✨
57
44
 
58
45
  Thanks goes to these wonderful people:
@@ -71,12 +58,12 @@ Thanks goes to these wonderful people:
71
58
  <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/catia.costa1">
72
59
  <div><img src="https://gitlab.com/uploads/-/system/user/avatar/25728410/avatar.png" width="200px;" alt=""/></div>
73
60
  <small>Catia Costa</small>
74
- <div><a href="#a11y-catia.costa1" title="Accessibility">️️️️♿️</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
61
+ <div><a href="#a11y-catia.costa1" title="Accessibility">️️️️♿️</a> <a href="#code-catia.costa1" title="Code">💻</a> <a href="#doc-catia.costa1" title="Documentation">📖</a> <a href="#test-catia.costa1" title="Tests">⚠️</a></div>
75
62
  </a></td>
76
63
  <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/chris.latimer">
77
64
  <div><img src="https://gitlab.com/uploads/-/system/user/avatar/10570471/avatar.png" width="200px;" alt=""/></div>
78
65
  <small>Chris Latimer</small>
79
- <div><a href="#infra-chris.latimer" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a></div>
66
+ <div><a href="#infra-chris.latimer" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#code-chris.latimer" title="Code">💻</a></div>
80
67
  </a></td>
81
68
  <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/craig.mckay">
82
69
  <div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
@@ -91,7 +78,7 @@ Thanks goes to these wonderful people:
91
78
  <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/emalin.matthews">
92
79
  <div><img src="https://ca.slack-edge.com/T0C9E3ZF0-UMGDXU8JH-ade541a7f09e-150" width="200px;" alt=""/></div>
93
80
  <small>Emalin Matthews</small>
94
- <div><a href="#a11y-emalin.matthews" title="Accessibility">️️️️♿️</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
81
+ <div><a href="#a11y-emalin.matthews" title="Accessibility">️️️️♿️</a> <a href="#code-emalin.matthews" title="Code">💻</a> <a href="#doc-emalin.matthews" title="Documentation">📖</a> <a href="#test-emalin.matthews" title="Tests">⚠️</a></div>
95
82
  </a></td>
96
83
  <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/jelena.milosevic">
97
84
  <div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
@@ -103,7 +90,7 @@ Thanks goes to these wonderful people:
103
90
  <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/kamini.pagare">
104
91
  <div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
105
92
  <small>Kamini Pagare</small>
106
- <div><a href="#a11y-kamini.pagare" title="Accessibility">️️️️♿️</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
93
+ <div><a href="#a11y-kamini.pagare" title="Accessibility">️️️️♿️</a> <a href="#code-kamini.pagare" title="Code">💻</a> <a href="#doc-kamini.pagare" title="Documentation">📖</a> <a href="#test-kamini.pagare" title="Tests">⚠️</a></div>
107
94
  </a></td>
108
95
  <td align="center" valign="top" width="14.28%"><a href="">
109
96
  <div><img src="https://ca.slack-edge.com/T0C9E3ZF0-U3AJ40BGS-ec515dc443cb-150" width="200px;" alt=""/></div>
@@ -123,12 +110,12 @@ Thanks goes to these wonderful people:
123
110
  <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/omid.kashan">
124
111
  <div><img src="https://secure.gravatar.com/avatar/faf90b70d749cf9460eb603fa1700add94fd7d3a32645b4be6fa12eb45c4ffa3?s=80&d=identicon" width="200px;" alt=""/></div>
125
112
  <small>Omid Kashan</small>
126
- <div><a href="#a11y-omid.kashan" title="Accessibility">️️️️♿️</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
113
+ <div><a href="#a11y-omid.kashan" title="Accessibility">️️️️♿️</a> <a href="#code-omid.kashan" title="Code">💻</a> <a href="#doc-omid.kashan" title="Documentation">📖</a> <a href="#test-omid.kashan" title="Tests">⚠️</a></div>
127
114
  </a></td>
128
115
  <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/sam.harden">
129
116
  <div><img src="https://ca.slack-edge.com/T0C9E3ZF0-U03NT7D39L6-2fc82e7f7c6e-150" width="200px;" alt=""/></div>
130
117
  <small>Sam Harden</small>
131
- <div><a href="#a11y-sam.harden" title="Accessibility">️️️️♿️</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
118
+ <div><a href="#a11y-sam.harden" title="Accessibility">️️️️♿️</a> <a href="#code-sam.harden" title="Code">💻</a> <a href="#doc-sam.harden" title="Documentation">📖</a> <a href="#test-sam.harden" title="Tests">⚠️</a></div>
132
119
  </a></td>
133
120
  <td align="center" valign="top" width="14.28%"><a href="">
134
121
  <div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
@@ -140,7 +127,7 @@ Thanks goes to these wonderful people:
140
127
  <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/theodore.kouzelis">
141
128
  <div><img src="https://secure.gravatar.com/avatar/3988f940029d9053174ac68e7f5bfa8fd61f184872d46281f44e2e698711d37d?s=80&d=identicon" width="200px;" alt=""/></div>
142
129
  <small>Theo Kouzelis</small>
143
- <div><a href="#a11y-theodore.kouzelis" title="Accessibility">️️️️♿️</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
130
+ <div><a href="#a11y-theodore.kouzelis" title="Accessibility">️️️️♿️</a> <a href="#code-theodore.kouzelis" title="Code">💻</a> <a href="#doc-theodore.kouzelis" title="Documentation">📖</a> <a href="#test-theodore.kouzelis" title="Tests">⚠️</a></div>
144
131
  </a></td>
145
132
  </tr>
146
133
  </tbody></table>
@@ -151,9 +138,4 @@ Thanks goes to these wonderful people:
151
138
 
152
139
  <!-- ALL-CONTRIBUTORS-LIST:END -->
153
140
 
154
- This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Check out the [contributing guidelines](https://gitlab.com/coopeng/sds/oneweb/experience-kit/-/blob/main/CONTRIBUTING.md) to add new people. Contributions of any kind welcome!
155
-
156
-
157
- ## Troubleshooting
158
-
159
- This is still a work in progress, we appreciate feedback. If you have any issues, please get in touch via [tech query channel on slack](https://co-opdigital.slack.com/archives/C0167V69R8W).
141
+ This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification.
package/dist/components/{button.css → Button.css} RENAMED
@@ -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 ADDED
@@ -0,0 +1,70 @@
1
+ .coop-pill {
2
+ --type-size-badge: var(--type-size-10);
3
+ --type-size-pill: var(--type-size-16);
4
+ display: inline-block;
5
+ padding: var(--spacing-12) var(--spacing-20);
6
+ border-radius: var(--ui-border-radius-xl);
7
+ font-size: var(--type-size-pill);
8
+ color: var(--color-text);
9
+ text-decoration: none;
10
+ background-color: var(--color-blue-light-10);
11
+ }
12
+ .coop-pill[data-badge] {
13
+ position: relative;
14
+ }
15
+ .coop-pill[data-badge]::after {
16
+ content: attr(data-badge);
17
+ position: absolute;
18
+ top: 0;
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);
23
+ font-size: var(--type-size-badge);
24
+ font-weight: 600;
25
+ line-height: var(--type-line-height);
26
+ color: var(--color-white);
27
+ text-transform: uppercase;
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
+ }
41
+ .coop-pill[data-badge-color=green]::after {
42
+ background-color: var(--color-dark-green);
43
+ }
44
+ .coop-pill[data-badge-color=orange]::after {
45
+ background-color: var(--color-dark-orange);
46
+ }
47
+ .coop-pill[data-badge-color=pink]::after {
48
+ background-color: var(--color-dark-pink);
49
+ }
50
+ .coop-pill[data-badge-color=red]::after {
51
+ background-color: var(--color-red-dark-4);
52
+ }
53
+ .coop-pill[data-pill-color=blue] {
54
+ background-color: var(--color-blue-light-10);
55
+ }
56
+ .coop-pill[data-pill-color=pink] {
57
+ background-color: var(--color-alt-light-pink);
58
+ }
59
+
60
+ a.coop-pill:focus, a.coop-pill:hover {
61
+ color: var(--color-text);
62
+ text-decoration: underline;
63
+ }
64
+
65
+ .coop-pill-group {
66
+ margin-bottom: var(--spacing-32);
67
+ }
68
+ .coop-pill-group .coop-pill {
69
+ margin-right: var(--spacing-16);
70
+ }
package/dist/main.css CHANGED
@@ -60,14 +60,17 @@
60
60
  /* Alternative colours */
61
61
  --color-alt-light-blue: #99e0f5;
62
62
  --color-alt-light-pink: #ffdbdb;
63
+ --color-blue-light-10: #eef3fc;
63
64
  }
64
65
 
65
66
  :root {
66
67
  --ui-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
67
68
  --ui-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 35%);
68
- --ui-border-radius: 4px;
69
69
  --ui-transition-hover: 0.1s ease-out;
70
70
  --ui-transition-hover-property: background-color, color;
71
+ --ui-border-radius: 4px;
72
+ --ui-border-radius-m: 8px;
73
+ --ui-border-radius-xl: 20px;
71
74
  }
72
75
 
73
76
  :root {
@@ -76,9 +79,14 @@
76
79
  --spacing-48: 3rem;
77
80
  --spacing-32: 2rem;
78
81
  --spacing-24: 1.5rem;
82
+ --spacing-20: 1.25rem;
83
+ --spacing-18: 1.125rem;
79
84
  --spacing-16: 1rem;
85
+ --spacing-14: 0.875rem;
80
86
  --spacing-12: 0.75rem;
87
+ --spacing-10: 0.625rem;
81
88
  --spacing-8: 0.5rem;
89
+ --spacing-6: 0.375rem;
82
90
  --spacing-4: 0.25rem;
83
91
  --spacing-2: 0.125rem;
84
92
  }
@@ -87,6 +95,7 @@
87
95
  --font-family: "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
88
96
  --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
89
97
  /* Typography Sizes */
98
+ --type-size-10: 0.625rem;
90
99
  --type-size-12: 0.75rem;
91
100
  --type-size-14: 0.875rem;
92
101
  --type-size-16: 1rem;
@@ -130,13 +139,13 @@ body {
130
139
  }
131
140
 
132
141
  body {
142
+ min-height: 100vh;
133
143
  margin: 0;
134
144
  padding: 0;
135
145
  border: 0;
136
- min-height: 100vh;
137
- line-height: var(--type-line-height);
138
146
  -webkit-font-smoothing: antialiased;
139
147
  -moz-osx-font-smoothing: grayscale;
148
+ line-height: var(--type-line-height);
140
149
  }
141
150
 
142
151
  body,
@@ -187,18 +196,14 @@ h4 {
187
196
  }
188
197
 
189
198
  a:not([class]) {
190
- text-decoration-skip-ink: auto;
191
199
  color: currentcolor;
200
+ text-decoration-skip-ink: auto;
192
201
  }
193
202
 
194
203
  img,
195
204
  picture {
196
- max-width: 100%;
197
205
  display: block;
198
- }
199
-
200
- textarea:not([rows]) {
201
- min-height: 10rem;
206
+ max-width: 100%;
202
207
  }
203
208
 
204
209
  :target {
@@ -233,6 +238,7 @@ a,
233
238
  .coop-link {
234
239
  color: var(--color-link);
235
240
  text-decoration: underline;
241
+ text-underline-offset: 2px;
236
242
  }
237
243
  a:hover,
238
244
  .coop-link:hover {
@@ -241,21 +247,21 @@ a:hover,
241
247
  a:active, a:focus,
242
248
  .coop-link:active,
243
249
  .coop-link:focus {
244
- transition: none;
245
250
  outline: 2px solid var(--color-focus-ring);
246
251
  outline-offset: 3px;
252
+ transition: none;
247
253
  }
248
254
 
249
255
  button.coop-link {
256
+ cursor: pointer;
250
257
  display: inline;
251
258
  margin: 0;
252
259
  padding: 0;
253
- appearance: none;
254
- background: none;
255
260
  border: 0;
256
261
  border-radius: 0;
257
- cursor: pointer;
258
262
  text-align: inherit;
263
+ appearance: none;
264
+ background: none;
259
265
  }
260
266
 
261
267
  .coop-link-white {
@@ -292,61 +298,61 @@ ol {
292
298
  }
293
299
 
294
300
  h1.coop-t-mega {
295
- font-size: var(--type-size-48);
296
301
  margin-bottom: var(--spacing-8);
302
+ font-size: var(--type-size-48);
297
303
  }
298
304
  @media (min-width: 48em) {
299
305
  h1.coop-t-mega {
300
- font-size: var(--type-size-56);
301
306
  margin-bottom: var(--spacing-16);
307
+ font-size: var(--type-size-56);
302
308
  }
303
309
  }
304
310
 
305
311
  h1 {
306
- font-size: var(--type-size-30);
307
312
  margin-bottom: var(--spacing-8);
313
+ font-size: var(--type-size-30);
308
314
  }
309
315
  @media (min-width: 48em) {
310
316
  h1 {
311
- font-size: var(--type-size-46);
312
317
  margin-bottom: var(--spacing-16);
318
+ font-size: var(--type-size-46);
313
319
  }
314
320
  }
315
321
 
316
322
  h2 {
317
- font-size: var(--type-size-26);
318
323
  margin-bottom: var(--spacing-8);
324
+ font-size: var(--type-size-26);
319
325
  }
320
326
  @media (min-width: 48em) {
321
327
  h2 {
322
- font-size: var(--type-size-32);
323
328
  margin-bottom: var(--spacing-16);
329
+ font-size: var(--type-size-32);
324
330
  }
325
331
  }
326
332
 
327
333
  h3 {
328
- font-size: var(--type-size-26);
329
334
  margin-bottom: var(--spacing-8);
335
+ font-size: var(--type-size-26);
330
336
  }
331
337
  @media (min-width: 48em) {
332
338
  h3 {
333
- font-size: var(--type-size-26);
334
339
  margin-bottom: var(--spacing-16);
340
+ font-size: var(--type-size-26);
335
341
  }
336
342
  }
337
343
 
338
344
  h4,
339
345
  h5,
340
346
  h6 {
341
- font-size: var(--type-size-18);
342
347
  margin-bottom: var(--spacing-8);
348
+ font-size: var(--type-size-18);
343
349
  }
344
350
  @media (min-width: 48em) {
345
351
  h4,
346
352
  h5,
347
353
  h6 {
348
- font-size: var(--type-size-22);
349
354
  margin-bottom: var(--spacing-16);
355
+ font-size: var(--type-size-22);
350
356
  }
351
357
  }
352
358
 
@@ -357,14 +363,14 @@ h6 {
357
363
 
358
364
  .coop-t-headline-upper {
359
365
  font-family: var(--font-family-headline);
360
- text-transform: uppercase;
361
366
  line-height: 100%;
367
+ text-transform: uppercase;
362
368
  }
363
369
 
364
370
  h1.coop-t-headline-mega {
365
371
  font-family: var(--font-family-headline);
366
- color: var(--color-brand-coop);
367
372
  font-size: var(--type-size-48);
373
+ color: var(--color-brand-coop);
368
374
  }
369
375
  @media (min-width: 37.5em) {
370
376
  h1.coop-t-headline-mega {
@@ -378,8 +384,8 @@ h1.coop-t-headline-mega {
378
384
  }
379
385
 
380
386
  h1.coop-t-headline {
381
- color: var(--color-brand-coop);
382
387
  font-size: var(--type-size-40);
388
+ color: var(--color-brand-coop);
383
389
  }
384
390
  @media (min-width: 37.5em) {
385
391
  h1.coop-t-headline {
@@ -393,8 +399,8 @@ h1.coop-t-headline {
393
399
  }
394
400
 
395
401
  .coop-t-lead-p {
396
- font-size: var(--type-size-22);
397
402
  margin-bottom: var(--spacing-16);
403
+ font-size: var(--type-size-22);
398
404
  }
399
405
  @media (min-width: 48em) {
400
406
  .coop-t-lead-p {
@@ -404,12 +410,12 @@ h1.coop-t-headline {
404
410
 
405
411
  hr {
406
412
  display: block;
407
- border-style: solid;
413
+ height: 0;
414
+ margin: var(--spacing-16) 0;
408
415
  border-color: var(--color-grey-mid);
416
+ border-style: solid;
409
417
  border-width: 0 0 1px 0;
410
- height: 0;
411
418
  color: var(--color-grey-mid);
412
- margin: var(--spacing-16) 0;
413
419
  }
414
420
  @media (min-width: 48em) {
415
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,18 +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;
86
- }
87
-
88
- textarea:not([rows]) {
89
- min-height: 10rem;
85
+ max-width: 100%;
90
86
  }
91
87
 
92
88
  :target {
package/dist/typography.css CHANGED
@@ -27,6 +27,7 @@ a,
27
27
  .coop-link {
28
28
  color: var(--color-link);
29
29
  text-decoration: underline;
30
+ text-underline-offset: 2px;
30
31
  }
31
32
  a:hover,
32
33
  .coop-link:hover {
@@ -35,21 +36,21 @@ a:hover,
35
36
  a:active, a:focus,
36
37
  .coop-link:active,
37
38
  .coop-link:focus {
38
- transition: none;
39
39
  outline: 2px solid var(--color-focus-ring);
40
40
  outline-offset: 3px;
41
+ transition: none;
41
42
  }
42
43
 
43
44
  button.coop-link {
45
+ cursor: pointer;
44
46
  display: inline;
45
47
  margin: 0;
46
48
  padding: 0;
47
- appearance: none;
48
- background: none;
49
49
  border: 0;
50
50
  border-radius: 0;
51
- cursor: pointer;
52
51
  text-align: inherit;
52
+ appearance: none;
53
+ background: none;
53
54
  }
54
55
 
55
56
  .coop-link-white {
@@ -86,61 +87,61 @@ ol {
86
87
  }
87
88
 
88
89
  h1.coop-t-mega {
89
- font-size: var(--type-size-48);
90
90
  margin-bottom: var(--spacing-8);
91
+ font-size: var(--type-size-48);
91
92
  }
92
93
  @media (min-width: 48em) {
93
94
  h1.coop-t-mega {
94
- font-size: var(--type-size-56);
95
95
  margin-bottom: var(--spacing-16);
96
+ font-size: var(--type-size-56);
96
97
  }
97
98
  }
98
99
 
99
100
  h1 {
100
- font-size: var(--type-size-30);
101
101
  margin-bottom: var(--spacing-8);
102
+ font-size: var(--type-size-30);
102
103
  }
103
104
  @media (min-width: 48em) {
104
105
  h1 {
105
- font-size: var(--type-size-46);
106
106
  margin-bottom: var(--spacing-16);
107
+ font-size: var(--type-size-46);
107
108
  }
108
109
  }
109
110
 
110
111
  h2 {
111
- font-size: var(--type-size-26);
112
112
  margin-bottom: var(--spacing-8);
113
+ font-size: var(--type-size-26);
113
114
  }
114
115
  @media (min-width: 48em) {
115
116
  h2 {
116
- font-size: var(--type-size-32);
117
117
  margin-bottom: var(--spacing-16);
118
+ font-size: var(--type-size-32);
118
119
  }
119
120
  }
120
121
 
121
122
  h3 {
122
- font-size: var(--type-size-26);
123
123
  margin-bottom: var(--spacing-8);
124
+ font-size: var(--type-size-26);
124
125
  }
125
126
  @media (min-width: 48em) {
126
127
  h3 {
127
- font-size: var(--type-size-26);
128
128
  margin-bottom: var(--spacing-16);
129
+ font-size: var(--type-size-26);
129
130
  }
130
131
  }
131
132
 
132
133
  h4,
133
134
  h5,
134
135
  h6 {
135
- font-size: var(--type-size-18);
136
136
  margin-bottom: var(--spacing-8);
137
+ font-size: var(--type-size-18);
137
138
  }
138
139
  @media (min-width: 48em) {
139
140
  h4,
140
141
  h5,
141
142
  h6 {
142
- font-size: var(--type-size-22);
143
143
  margin-bottom: var(--spacing-16);
144
+ font-size: var(--type-size-22);
144
145
  }
145
146
  }
146
147
 
@@ -151,14 +152,14 @@ h6 {
151
152
 
152
153
  .coop-t-headline-upper {
153
154
  font-family: var(--font-family-headline);
154
- text-transform: uppercase;
155
155
  line-height: 100%;
156
+ text-transform: uppercase;
156
157
  }
157
158
 
158
159
  h1.coop-t-headline-mega {
159
160
  font-family: var(--font-family-headline);
160
- color: var(--color-brand-coop);
161
161
  font-size: var(--type-size-48);
162
+ color: var(--color-brand-coop);
162
163
  }
163
164
  @media (min-width: 37.5em) {
164
165
  h1.coop-t-headline-mega {
@@ -172,8 +173,8 @@ h1.coop-t-headline-mega {
172
173
  }
173
174
 
174
175
  h1.coop-t-headline {
175
- color: var(--color-brand-coop);
176
176
  font-size: var(--type-size-40);
177
+ color: var(--color-brand-coop);
177
178
  }
178
179
  @media (min-width: 37.5em) {
179
180
  h1.coop-t-headline {
@@ -187,8 +188,8 @@ h1.coop-t-headline {
187
188
  }
188
189
 
189
190
  .coop-t-lead-p {
190
- font-size: var(--type-size-22);
191
191
  margin-bottom: var(--spacing-16);
192
+ font-size: var(--type-size-22);
192
193
  }
193
194
  @media (min-width: 48em) {
194
195
  .coop-t-lead-p {
@@ -198,12 +199,12 @@ h1.coop-t-headline {
198
199
 
199
200
  hr {
200
201
  display: block;
201
- border-style: solid;
202
+ height: 0;
203
+ margin: var(--spacing-16) 0;
202
204
  border-color: var(--color-grey-mid);
205
+ border-style: solid;
203
206
  border-width: 0 0 1px 0;
204
- height: 0;
205
207
  color: var(--color-grey-mid);
206
- margin: var(--spacing-16) 0;
207
208
  }
208
209
  @media (min-width: 48em) {
209
210
  hr {
package/dist/vars.css CHANGED
@@ -59,14 +59,17 @@
59
59
  /* Alternative colours */
60
60
  --color-alt-light-blue: #99e0f5;
61
61
  --color-alt-light-pink: #ffdbdb;
62
+ --color-blue-light-10: #eef3fc;
62
63
  }
63
64
 
64
65
  :root {
65
66
  --ui-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
66
67
  --ui-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 35%);
67
- --ui-border-radius: 4px;
68
68
  --ui-transition-hover: 0.1s ease-out;
69
69
  --ui-transition-hover-property: background-color, color;
70
+ --ui-border-radius: 4px;
71
+ --ui-border-radius-m: 8px;
72
+ --ui-border-radius-xl: 20px;
70
73
  }
71
74
 
72
75
  :root {
@@ -75,9 +78,14 @@
75
78
  --spacing-48: 3rem;
76
79
  --spacing-32: 2rem;
77
80
  --spacing-24: 1.5rem;
81
+ --spacing-20: 1.25rem;
82
+ --spacing-18: 1.125rem;
78
83
  --spacing-16: 1rem;
84
+ --spacing-14: 0.875rem;
79
85
  --spacing-12: 0.75rem;
86
+ --spacing-10: 0.625rem;
80
87
  --spacing-8: 0.5rem;
88
+ --spacing-6: 0.375rem;
81
89
  --spacing-4: 0.25rem;
82
90
  --spacing-2: 0.125rem;
83
91
  }
@@ -86,6 +94,7 @@
86
94
  --font-family: "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
87
95
  --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
88
96
  /* Typography Sizes */
97
+ --type-size-10: 0.625rem;
89
98
  --type-size-12: 0.75rem;
90
99
  --type-size-14: 0.875rem;
91
100
  --type-size-16: 1rem;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@coopdigital/styles",
3
3
  "type": "module",
4
- "version": "0.4.1",
4
+ "version": "0.5.1",
5
5
  "private": false,
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -12,6 +12,7 @@
12
12
  ],
13
13
  "scripts": {
14
14
  "test": "vitest run",
15
+ "test:watch": "vitest",
15
16
  "test:coverage": "vitest run --coverage",
16
17
  "build": "tsx scripts build"
17
18
  },
@@ -22,5 +23,5 @@
22
23
  "glob": "^11.0.1",
23
24
  "sass-embedded": "^1.85.0"
24
25
  },
25
- "gitHead": "dce17e1b85785160c7e817e85c61006060572dfb"
26
+ "gitHead": "5f4108a06b915b2bd2c757bd713026e0710b0eb9"
26
27
  }
package/src/components/{button.scss → Button.scss} RENAMED
@@ -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 ADDED
@@ -0,0 +1,92 @@
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
+
13
+ --type-size-badge: var(--type-size-10);
14
+ --type-size-pill: var(--type-size-16);
15
+
16
+ display: inline-block;
17
+
18
+ padding: var(--spacing-12) var(--spacing-20);
19
+ border-radius: var(--ui-border-radius-xl);
20
+
21
+ font-size: var(--type-size-pill); // [data-pill-size="md"]
22
+ color: var(--color-text);
23
+ text-decoration: none;
24
+
25
+ background-color: var(--color-blue-light-10);
26
+
27
+ &[data-badge] {
28
+ position: relative;
29
+
30
+ &::after {
31
+ content: attr(data-badge);
32
+
33
+ position: absolute;
34
+ top: 0;
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
+
41
+ font-size: var(--type-size-badge);
42
+ font-weight: 600;
43
+ line-height: var(--type-line-height);
44
+ color: var(--color-white);
45
+ text-transform: uppercase;
46
+ }
47
+ }
48
+
49
+ &[data-size="sm"] {
50
+ --type-size-pill: var(--type-size-14);
51
+ }
52
+
53
+ &[data-size="lg"] {
54
+ --type-size-pill: var(--type-size-18);
55
+ --type-size-badge: var(--type-size-12);
56
+ }
57
+
58
+ &[data-size="xl"] {
59
+ --type-size-pill: var(--type-size-20);
60
+ --type-size-badge: var(--type-size-12);
61
+
62
+ padding: var(--spacing-14) var(--spacing-24);
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
+ }
76
+ }
77
+
78
+ a.coop-pill {
79
+ &:focus,
80
+ &:hover {
81
+ color: var(--color-text);
82
+ text-decoration: underline;
83
+ }
84
+ }
85
+
86
+ .coop-pill-group {
87
+ margin-bottom: var(--spacing-32);
88
+
89
+ .coop-pill {
90
+ margin-right: var(--spacing-16);
91
+ }
92
+ }
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,18 +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
- }
87
-
88
- textarea:not([rows]) {
89
- min-height: 10rem;
86
+ max-width: 100%;
90
87
  }
91
88
 
92
89
  :target {
package/src/typography/_links.scss CHANGED
@@ -2,6 +2,7 @@ a,
2
2
  .coop-link {
3
3
  color: var(--color-link);
4
4
  text-decoration: underline;
5
+ text-underline-offset: 2px;
5
6
 
6
7
  &:hover {
7
8
  color: var(--color-link-hover);
@@ -10,22 +11,26 @@ a,
10
11
 
11
12
  &:active,
12
13
  &:focus {
13
- transition: none;
14
14
  outline: 2px solid var(--color-focus-ring);
15
15
  outline-offset: 3px;
16
+ transition: none;
16
17
  }
17
18
  }
18
19
 
19
20
  button.coop-link {
21
+ cursor: pointer;
22
+
20
23
  display: inline;
24
+
21
25
  margin: 0;
22
26
  padding: 0;
23
- appearance: none;
24
- background: none;
25
27
  border: 0;
26
28
  border-radius: 0;
27
- cursor: pointer;
29
+
28
30
  text-align: inherit;
31
+
32
+ appearance: none;
33
+ background: none;
29
34
  }
30
35
 
31
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);
package/src/vars/_colours.scss CHANGED
@@ -68,4 +68,6 @@
68
68
  /* Alternative colours */
69
69
  --color-alt-light-blue: #99e0f5;
70
70
  --color-alt-light-pink: #ffdbdb;
71
+
72
+ --color-blue-light-10: #eef3fc;
71
73
  }
package/src/vars/_spacing.scss CHANGED
@@ -4,9 +4,14 @@
4
4
  --spacing-48: 3rem;
5
5
  --spacing-32: 2rem;
6
6
  --spacing-24: 1.5rem;
7
+ --spacing-20: 1.25rem;
8
+ --spacing-18: 1.125rem;
7
9
  --spacing-16: 1rem;
10
+ --spacing-14: 0.875rem;
8
11
  --spacing-12: 0.75rem;
12
+ --spacing-10: 0.625rem;
9
13
  --spacing-8: 0.5rem;
14
+ --spacing-6: 0.375rem;
10
15
  --spacing-4: 0.25rem;
11
16
  --spacing-2: 0.125rem;
12
17
  }
package/src/vars/_typography.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
4
4
 
5
5
  /* Typography Sizes */
6
+ --type-size-10: 0.625rem;
6
7
  --type-size-12: 0.75rem;
7
8
  --type-size-14: 0.875rem;
8
9
  --type-size-16: 1rem;
package/src/vars/_ui.scss CHANGED
@@ -1,7 +1,10 @@
1
1
  :root {
2
2
  --ui-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
3
3
  --ui-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 35%);
4
- --ui-border-radius: 4px;
5
4
  --ui-transition-hover: 0.1s ease-out;
6
5
  --ui-transition-hover-property: background-color, color;
6
+
7
+ --ui-border-radius: 4px;
8
+ --ui-border-radius-m: 8px;
9
+ --ui-border-radius-xl: 20px;
7
10
  }