@coopdigital/styles 0.1.0 → 0.2.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.
Files changed (19) hide show
  1. package/dist/breakpoints.css +0 -0
  2. package/dist/vars-legacy.css +391 -0
  3. package/dist/vars.css +106 -2
  4. package/package.json +3 -3
  5. package/src/breakpoints.scss +13 -0
  6. package/src/vars/_colours-buttons.scss +32 -0
  7. package/src/vars/_colours-notifications.scss +14 -0
  8. package/src/vars/_colours.scss +70 -0
  9. package/src/vars/_spacing.scss +12 -0
  10. package/src/vars/_typography.scss +32 -0
  11. package/src/vars/_ui.scss +7 -0
  12. package/src/vars-legacy/_colours-cls-legacy.scss +8 -0
  13. package/src/vars-legacy/_colours-legacy.scss +230 -0
  14. package/src/vars-legacy/_colours-membership-legacy.scss +129 -0
  15. package/src/vars-legacy/_spacing-legacy.scss +15 -0
  16. package/src/vars-legacy/_typography-legacy.scss +37 -0
  17. package/src/vars-legacy/_ui-legacy.scss +8 -0
  18. package/src/vars-legacy.scss +6 -0
  19. package/src/vars.scss +7 -5
package/dist/breakpoints.css ADDED
File without changes
package/dist/vars-legacy.css ADDED
@@ -0,0 +1,391 @@
1
+ :root {
2
+ /* Spacing: Base */
3
+ --spacing-base: var(--spacing-32);
4
+ --spacing-base--3-4: var(--spacing-24);
5
+ --spacing-base--1-2: var(--spacing-16);
6
+ --spacing-base--1-4: var(--spacing-8);
7
+ --spacing-base--1-8: var(--spacing-2);
8
+ /* Spacing: Medium */
9
+ --spacing-medium: var(--spacing-64);
10
+ --spacing-medium--3-4: var(--spacing-48);
11
+ --spacing-medium--1-2: var(--spacing-32);
12
+ --spacing-medium--1-4: var(--spacing-16);
13
+ --spacing-medium--1-8: var(--spacing-8);
14
+ }
15
+
16
+ :root {
17
+ --color-brand-cls-blue-dark: #114d94;
18
+ --color-brand-cls-blue-mid: #0761c2;
19
+ --color-brand-cls-blue-light: #287cdf;
20
+ /* Bereavement Advice Centre */
21
+ --color-brand-bac-purple: #674170;
22
+ }
23
+
24
+ :root {
25
+ /* Core brands */
26
+ --color-brand-coop: #00a1cc;
27
+ --color-brand-deals: #d12430;
28
+ /* Core brands (backwards compatibility) */
29
+ --color-brand: var(--color-brand-coop);
30
+ --color-deal-red: var(--color-brand-deals);
31
+ /* Colours */
32
+ --color-white: #ffffff;
33
+ --color-black: #000000;
34
+ /* Text greys */
35
+ --color-text: #282828;
36
+ --color-text-alt: #595959;
37
+ /* Tints */
38
+ --color-tint-purple: #fef2ff;
39
+ --color-tint-pink: #ffeaf2;
40
+ --color-tint-green: #f9fbdd;
41
+ --color-tint-orange: #ffede0;
42
+ --color-tint-red: #ffe8e9;
43
+ --color-tint-yellow: #fff6da;
44
+ --color-tint-lilac: #f2f2ff;
45
+ --color-tint-blue: #e6f6fa;
46
+ /* Grey backgrounds */
47
+ --color-grey-mid-light: #d8d8d8;
48
+ --color-grey-mid: #c4c4c4;
49
+ --color-grey-dark: #6e6e6e;
50
+ /* Neutral backgrounds */
51
+ --color-grey-neutral-light: #f3f3f3;
52
+ --color-grey-light: var(--color-grey-neutral-light);
53
+ --color-grey-neutral-warm: #f5f5f0;
54
+ --color-grey-neutral-cool: #dde9ed;
55
+ --color-grey-neutral-cool-light: #f2f4f7;
56
+ /* Links */
57
+ --color-link: #00729a;
58
+ --color-link-hover: #00394e;
59
+ --color-link-focus: #8d44d8;
60
+ --color-link-active: #002c3d;
61
+ --color-link-visited: var(--color-link-active);
62
+ /* Phasing out the '--' for modifiers as it causes issues with design token processing (EG lodash) */
63
+ --color-link--hover: var(--color-link-hover);
64
+ --color-link--focus: var(--color-link-focus);
65
+ --color-link--active: var(--color-link-active);
66
+ --color-link--visited: var(--color-link-active);
67
+ /* Buttons */
68
+ /* Primary green */
69
+ --color-button-green-primary: #0f8482;
70
+ --color-button-green-primary-hover: #1c6b6a;
71
+ --color-button-green-primary-active: #124948;
72
+ --color-button-primary: var(--color-button-green-primary);
73
+ --color-button-primary--hover: var(--color-button-green-primary-hover);
74
+ --color-button-primary--active: var(--color-button-green-primary-active);
75
+ /* Blue button */
76
+ --color-button-blue: #005878;
77
+ --color-button-blue-hover: #003e55;
78
+ --color-button-blue-active: #001f2b;
79
+ --color-button-dark: var(--color-button-blue);
80
+ --color-button-dark--hover: var(--color-button-blue-hover);
81
+ --color-button-dark--active: var(--color-button-blue-active);
82
+ /* Grey button */
83
+ --color-button-grey: #efefef;
84
+ --color-button-grey-hover: var(--color-grey-mid-light);
85
+ --color-button-grey-active: var(--color-grey-mid);
86
+ /* White button */
87
+ --color-button-white: var(--color-white);
88
+ --color-button-white-hover: var(--color-button-grey);
89
+ --color-button-white-active: var(--color-grey-mid-light);
90
+ /* default button */
91
+ --color-button: var(--color-button-blue);
92
+ --color-button--hover: var(--color-button-blue-hover);
93
+ --color-button--active: var(--color-button-blue-active);
94
+ /* Notifications */
95
+ --color-red-error: #e20f14;
96
+ --color-red-error-text: #d12430;
97
+ --color-red-error-light: #fcf1f1;
98
+ --color-orange-alert: #f8d156;
99
+ --color-orange-alert-light: #f8eec7;
100
+ --color-green-success: #50811b;
101
+ --color-green-success-light: #d7e3c6;
102
+ --color-blue-inform: #0761c2;
103
+ --color-blue-inform-light: #eef3fc;
104
+ --color-blue-notification: var(--color-blue-inform);
105
+ --color-blue-notification-light: var(--color-blue-inform-light);
106
+ /* The numeric value at the end tallies to the lightness value of the colours in HSL to give some granularity to the system */
107
+ /* Reds */
108
+ --color-red-dark-4: #ba2327;
109
+ --color-red-mid-5: var(--color-red-error);
110
+ --color-red-light-7: #ff6a6d;
111
+ --color-red-light-8: #ffc1c3;
112
+ --color-red-light-9: #ffdbdb;
113
+ --color-red-light-10: #fcf1f1;
114
+ --color-red-dark: var(--color-red-dark-4);
115
+ --color-red-mid: var(--color-red-mid-5);
116
+ /* Oranges */
117
+ --color-orange-dark-4: #be4015;
118
+ --color-orange-mid-5: #fc5724;
119
+ --color-orange-mid-6: #fd7b3b;
120
+ --color-orange-mid-7: #fd9c59;
121
+ --color-orange-light-8: #fdb979;
122
+ --color-orange-light-9: #fee7c1;
123
+ --color-orange-light-10: #fff8e7;
124
+ --color-orange-mid: var(--color-orange-mid-5);
125
+ /* Yellows */
126
+ --color-yellow-dark-4: #cfb214;
127
+ --color-yellow-mid-5: #ffd309;
128
+ --color-yellow-mid-6: #ffe53b;
129
+ --color-yellow-mid-7: #fff372;
130
+ --color-yellow-light-8: #fffca9;
131
+ --color-yellow-light-9: #fffbcd;
132
+ --color-yellow-light-10: #fcf9ee;
133
+ --color-yellow-mid: var(--color-yellow-mid-5);
134
+ --color-yellow-light: var(--color-yellow-mid-7);
135
+ --color-yellow-bright: var(--color-yellow-mid-6);
136
+ /* Greens */
137
+ --color-green-dark-2: #3a6002;
138
+ --color-green-mid-3: #4f820d;
139
+ --color-green-mid-4: #72aa24;
140
+ --color-green-mid-5: #96cb48;
141
+ --color-green-light-6: #b9e277;
142
+ --color-green-light-8: #e7f7cb;
143
+ --color-green-light-10: #f6fce9;
144
+ --color-green-dark: var(--color-green-dark-2);
145
+ --color-green-mid: var(--color-green-mid-3);
146
+ --color-green-light: var(--color-green-mid-5);
147
+ --color-green-bright: var(--color-green-light-6);
148
+ /* Teals */
149
+ --color-teal-dark-2: #046062;
150
+ --color-teal-mid-3: #0f8482;
151
+ --color-teal-mid-4: #27aaab;
152
+ --color-teal-mid-6: #4bc7cc;
153
+ --color-teal-light-7: #79dce3;
154
+ --color-teal-light-9: #ccf2f7;
155
+ --color-teal-light-10: #e9fafc;
156
+ --color-turquoise-dark: var(--color-teal-dark-2);
157
+ --color-turquoise-mid: var(--color-teal-mid-3);
158
+ --color-turquoise-light: var(--color-teal-light-7);
159
+ --color-turquoise-bright: var(--color-teal-light-7);
160
+ /* Blues */
161
+ --color-blue-dark-3: #114d94;
162
+ --color-blue-mid-4: #0761c2;
163
+ --color-blue-mid-6: #519af5;
164
+ --color-blue-light-8: #80b7ff;
165
+ --color-blue-light-9: #cfe3ff;
166
+ --color-blue-light-10: #eef3fc;
167
+ --color-blue-dark: var(--color-blue-dark-3);
168
+ --color-blue-bright: var(--color-blue-mid-6);
169
+ --color-blue-light: var(--color-blue-light-9);
170
+ --color-blue-mid: var(--color-blue-mid-4);
171
+ /* Indigos */
172
+ --color-indigo-dark-4: #3b427f;
173
+ --color-indigo-mid-5: #4f52a8;
174
+ --color-indigo-mid-7: #8d9ae4;
175
+ --color-indigo-light-8: #afbdf5;
176
+ --color-indigo-light-9: #cfdbfe;
177
+ --color-indigo-light-10: #eff3fa;
178
+ /* Purples */
179
+ --color-purple-dark-3: #51178c;
180
+ --color-purple-mid-4: #6727b9;
181
+ --color-purple-mid-6: #8d44d8;
182
+ --color-purple-light-8: #d395fe;
183
+ --color-purple-light-9: #edc3ff;
184
+ --color-purple-light-10: #f9edfc;
185
+ --color-purple-dark: var(--color-purple-dark-3);
186
+ /* Magentas */
187
+ --color-magenta-dark-3: #812373;
188
+ --color-magenta-mid-4: #ab278d;
189
+ --color-magenta-mid-7: #f690f1;
190
+ --color-magenta-light-8: #feb8ff;
191
+ --color-magenta-light-9: #fad1fe;
192
+ --color-magenta-light-10: #faeafc;
193
+ --color-purple-mid: var(--color-magenta-mid-4);
194
+ --color-pink-light: var(--color-magenta-mid-7);
195
+ --color-pink-bright: var(--color-magenta-light-9);
196
+ /* Reintroducing Co-op branding colours */
197
+ --color-navy: #003057;
198
+ --color-light-purple: #f8beff;
199
+ --color-light-pink: #ff94bf;
200
+ --color-light-green: #e1ec54;
201
+ --color-light-orange: #ffa465;
202
+ --color-light-red: #ff8c90;
203
+ --color-light-yellow: #ffd245;
204
+ --color-light-lilac: #bfbffd;
205
+ --color-light-blue: #bfe7f2;
206
+ --color-dark-purple: #c164c9;
207
+ --color-dark-pink: #f85792;
208
+ --color-dark-green: #819c00;
209
+ --color-dark-orange: #e85a00;
210
+ --color-dark-red: #f14f57;
211
+ --color-dark-yellow: #c08a00;
212
+ --color-dark-lilac: #6762f9;
213
+ --color-brand-ric-color-navy: var(--color-navy);
214
+ --color-brand-ric-color-light-purple: var(--color-light-purple);
215
+ --color-brand-ric-color-light-pink: var(--color-light-pink);
216
+ --color-brand-ric-color-light-green: var(--color-light-green);
217
+ --color-brand-ric-color-light-orange: var(--color-light-orange);
218
+ --color-brand-ric-color-light-red: var(--color-light-red);
219
+ --color-brand-ric-color-light-yellow: var(--color-light-yellow);
220
+ --color-brand-ric-color-light-lilac: var(--color-light-lilac);
221
+ --color-brand-ric-color-light-blue: var(--color-light-blue);
222
+ --color-brand-ric-color-dark-purple: var(--color-dark-purple);
223
+ --color-brand-ric-color-dark-pink: var(--color-dark-pink);
224
+ --color-brand-ric-color-dark-green: var(--color-dark-green);
225
+ --color-brand-ric-color-dark-orange: var(--color-dark-orange);
226
+ --color-brand-ric-color-dark-red: var(--color-dark-red);
227
+ --color-brand-ric-color-dark-yellow: var(--color-dark-yellow);
228
+ --color-brand-ric-color-dark-lilac: var(--color-dark-lilac);
229
+ }
230
+
231
+ :root {
232
+ /* Membership (Purple) */
233
+ --color-brand-membership-purple-dark-1: #483965;
234
+ --color-brand-membership-purple-dark-2: #635385;
235
+ --color-brand-membership-purple-dark-3: #776ca7;
236
+ --color-brand-membership-purple-mid-5: #8e88ba; /* core */
237
+ --color-brand-membership-purple-mid-6: #847db5; /* screen */
238
+ --color-brand-membership-purple-light-8: #b2aece;
239
+ --color-brand-membership-purple-light-9: #d3d1e4;
240
+ --color-brand-membership-purple-light-10: #eae8f4;
241
+ --color-brand-membership-purple-dark: var(--color-brand-membership-purple-dark-3);
242
+ --color-brand-membership-purple-mid: var(--color-brand-membership-purple-mid-5);
243
+ --color-brand-membership-purple-bright: var(--color-brand-membership-purple-mid-6);
244
+ --color-brand-membership-purple-light: var(--color-brand-membership-purple-light-8);
245
+ --color-brand-membership-purple-lighter: var(--color-brand-membership-purple-light-9);
246
+ --color-brand-membership-purple-lightest: var(--color-brand-membership-purple-light-10);
247
+ /* Membership (Lilac) */
248
+ --color-brand-membership-lilac-dark-1: #52355e;
249
+ --color-brand-membership-lilac-dark-2: #715287;
250
+ --color-brand-membership-lilac-dark-3: #806697;
251
+ --color-brand-membership-lilac-mid-5: #9976a8; /* core */
252
+ --color-brand-membership-lilac-mid-6: #a976bb; /* screen */
253
+ --color-brand-membership-lilac-light-8: #bba2c6;
254
+ --color-brand-membership-lilac-light-9: #ccbad4;
255
+ --color-brand-membership-lilac-light-10: #e6dde9;
256
+ --color-brand-membership-lilac-dark: var(--color-brand-membership-lilac-dark-3);
257
+ --color-brand-membership-lilac-mid: var(--color-brand-membership-lilac-mid-5);
258
+ --color-brand-membership-lilac-bright: var(--color-brand-membership-lilac-mid-6);
259
+ --color-brand-membership-lilac-light: var(--color-brand-membership-lilac-light-8);
260
+ --color-brand-membership-lilac-lighter: var(--color-brand-membership-lilac-light-9);
261
+ --color-brand-membership-lilac-lightest: var(--color-brand-membership-lilac-light-10);
262
+ /* Membership (Pink) */
263
+ --color-brand-membership-pink-dark-1: #6c3e53;
264
+ --color-brand-membership-pink-dark-2: #864e68;
265
+ --color-brand-membership-pink-dark-3: #9d5b7b;
266
+ --color-brand-membership-pink-mid-5: #bc7190; /* core */
267
+ --color-brand-membership-pink-mid-6: #d15c8c; /* screen */
268
+ --color-brand-membership-pink-light-8: #d19fb4;
269
+ --color-brand-membership-pink-light-9: #e3cbd4;
270
+ --color-brand-membership-pink-light-10: #f0e5eb;
271
+ --color-brand-membership-pink-dark: var(--color-brand-membership-pink-dark-3);
272
+ --color-brand-membership-pink-mid: var(--color-brand-membership-pink-mid-5);
273
+ --color-brand-membership-pink-bright: var(--color-brand-membership-pink-mid-6);
274
+ --color-brand-membership-pink-light: var(--color-brand-membership-pink-light-8);
275
+ --color-brand-membership-pink-lighter: var(--color-brand-membership-pink-light-9);
276
+ --color-brand-membership-pink-lightest: var(--color-brand-membership-pink-light-10);
277
+ /* Membership (Orange) */
278
+ --color-brand-membership-orange-dark-1: #783620;
279
+ --color-brand-membership-orange-dark-2: #9b462b;
280
+ --color-brand-membership-orange-dark-3: #b45d2b;
281
+ --color-brand-membership-orange-mid-5: #e69c39; /* core */
282
+ --color-brand-membership-orange-mid-6: #f5a74b; /* screen */
283
+ --color-brand-membership-orange-light-8: #e6bb8f;
284
+ --color-brand-membership-orange-light-9: #f0ddd1;
285
+ --color-brand-membership-orange-light-10: #f7eeeb;
286
+ --color-brand-membership-orange-dark: var(--color-brand-membership-orange-dark-3);
287
+ --color-brand-membership-orange-mid: var(--color-brand-membership-orange-mid-5);
288
+ --color-brand-membership-orange-bright: var(--color-brand-membership-orange-mid-6);
289
+ --color-brand-membership-orange-light: var(--color-brand-membership-orange-light-8);
290
+ --color-brand-membership-orange-lighter: var(--color-brand-membership-orange-light-9);
291
+ --color-brand-membership-orange-lightest: var(--color-brand-membership-orange-light-10);
292
+ /* Membership (Yellow) */
293
+ --color-brand-membership-yellow-dark-1: #704e24;
294
+ --color-brand-membership-yellow-dark-2: #916b3a;
295
+ --color-brand-membership-yellow-dark-3: #bf843e;
296
+ --color-brand-membership-yellow-mid-5: #ecd16d; /* core */
297
+ --color-brand-membership-yellow-mid-6: #f8da6d; /* screen */
298
+ --color-brand-membership-yellow-light-8: #edd273;
299
+ --color-brand-membership-yellow-light-9: #f3e2a4;
300
+ --color-brand-membership-yellow-light-10: #f9f1d1;
301
+ --color-brand-membership-yellow-dark: var(--color-brand-membership-yellow-dark-3);
302
+ --color-brand-membership-yellow-mid: var(--color-brand-membership-yellow-mid-5);
303
+ --color-brand-membership-yellow-bright: var(--color-brand-membership-yellow-mid-6);
304
+ --color-brand-membership-yellow-light: var(--color-brand-membership-yellow-light-8);
305
+ --color-brand-membership-yellow-lighter: var(--color-brand-membership-yellow-light-9);
306
+ --color-brand-membership-yellow-lightest: var(--color-brand-membership-yellow-light-10);
307
+ /* Membership (Green) */
308
+ --color-brand-membership-green-dark-1: #3b3f25;
309
+ --color-brand-membership-green-dark-2: #565734;
310
+ --color-brand-membership-green-dark-3: #6a7345;
311
+ --color-brand-membership-green-mid-5: #c6c978; /* core */
312
+ --color-brand-membership-green-mid-6: #b3ce7b; /* screen */
313
+ --color-brand-membership-green-light-8: #d1d4a5;
314
+ --color-brand-membership-green-light-9: #e4e5c6;
315
+ --color-brand-membership-green-light-10: #f6f6eb;
316
+ --color-brand-membership-green-dark: var(--color-brand-membership-green-dark-3);
317
+ --color-brand-membership-green-mid: var(--color-brand-membership-green-mid-5);
318
+ --color-brand-membership-green-bright: var(--color-brand-membership-green-mid-6);
319
+ --color-brand-membership-green-light: var(--color-brand-membership-green-light-8);
320
+ --color-brand-membership-green-lighter: var(--color-brand-membership-green-light-9);
321
+ --color-brand-membership-green-lightest: var(--color-brand-membership-green-light-10);
322
+ /* Membership (Turquoise) */
323
+ --color-brand-membership-turquoise-dark-1: #2b4946;
324
+ --color-brand-membership-turquoise-dark-2: #39615f;
325
+ --color-brand-membership-turquoise-dark-3: #487d7b;
326
+ --color-brand-membership-turquoise-mid-5: #81b8b8; /* core */
327
+ --color-brand-membership-turquoise-mid-6: #87cdcd; /* screen */
328
+ --color-brand-membership-turquoise-light-8: #b9dad9;
329
+ --color-brand-membership-turquoise-light-9: #d3e7e5;
330
+ --color-brand-membership-turquoise-light-10: #ecf5f7;
331
+ --color-brand-membership-turquoise-dark: var(--color-brand-membership-turquoise-dark-3);
332
+ --color-brand-membership-turquoise-mid: var(--color-brand-membership-turquoise-mid-5);
333
+ --color-brand-membership-turquoise-bright: var(--color-brand-membership-turquoise-mid-6);
334
+ --color-brand-membership-turquoise-light: var(--color-brand-membership-turquoise-light-8);
335
+ --color-brand-membership-turquoise-lighter: var(--color-brand-membership-turquoise-light-9);
336
+ --color-brand-membership-turquoise-lightest: var(--color-brand-membership-turquoise-light-10);
337
+ /* Membership (Blue) */
338
+ --color-brand-membership-blue-dark-1: #2c4258;
339
+ --color-brand-membership-blue-dark-2: #456588;
340
+ --color-brand-membership-blue-dark-3: #5177a3;
341
+ --color-brand-membership-blue-mid-5: #8bb5e0; /* core */
342
+ --color-brand-membership-blue-mid-6: #8fbae6; /* screen */
343
+ --color-brand-membership-blue-light-8: #c1d7ee;
344
+ --color-brand-membership-blue-light-9: #d8e6f4;
345
+ --color-brand-membership-blue-light-10: #f0f6fd;
346
+ --color-brand-membership-blue-dark: var(--color-brand-membership-blue-dark-3);
347
+ --color-brand-membership-blue-mid: var(--color-brand-membership-blue-mid-5);
348
+ --color-brand-membership-blue-bright: var(--color-brand-membership-blue-mid-6);
349
+ --color-brand-membership-blue-light: var(--color-brand-membership-blue-light-8);
350
+ --color-brand-membership-blue-lighter: var(--color-brand-membership-blue-light-9);
351
+ --color-brand-membership-blue-lightest: var(--color-brand-membership-blue-light-10);
352
+ }
353
+
354
+ :root {
355
+ --font-family: "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
356
+ --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
357
+ /* Typography */
358
+ --type-headline-mega-m: 5.125rem; /* 82px */
359
+ --type-headline-mega-s: 4rem; /* 64px */
360
+ --type-headline-mega-xs: 3rem; /* 48px */
361
+ --type-headline-h1-m: 4rem; /* 64px */
362
+ --type-headline-h1-s: 3rem; /* 48px */
363
+ --type-headline-h1-xs: 2.5rem; /* 40px */
364
+ --type-body-l: 1.25rem; /* 20px */
365
+ --type-body-s: 1.125rem; /* 18px */
366
+ --type-line-height: 1.5; /* 32px */
367
+ --type-h1-mega-l: 3.5rem; /* 56px */
368
+ --type-h1-mega-s: 3rem; /* 48px */
369
+ --type-h1-l: 2.875rem; /* 46px */
370
+ --type-h1-s: 1.875rem; /* 30px */
371
+ --type-h2-l: 2rem; /* 32px */
372
+ --type-h2-s: 1.625rem; /* 26px */
373
+ --type-h3-l: 1.625rem; /* 26px */
374
+ --type-h3-s: 1.375rem; /* 22px */
375
+ --type-h456-l: 1.375rem; /* 22px */
376
+ --type-h456-s: 1.125rem; /* 18px */
377
+ --type-blockquote: 1.25rem; /* 18px */
378
+ --type-lp-l: 1.625rem; /* 26px */
379
+ --type-lp-s: 1.375rem; /* 22px */
380
+ --type-sp-l: 1.25rem; /* 18px */
381
+ --type-sp-s: 1rem; /* 16px */
382
+ }
383
+
384
+ :root {
385
+ --ui-shadow: 0 2px 10px 0 rgb(0 0 0 / 15%);
386
+ --ui-shadow-hover: 0 2px 10px 0 rgb(0 0 0 / 25%);
387
+ --ui-shadow--hover: var(--ui-shadow-hover); /* stylelint-disable-line */
388
+ --ui-border-radius: 8px;
389
+ --ui-transition-hover: 0.15s ease-in-out;
390
+ --ui-transition-hover-property: background-color, color;
391
+ }
package/dist/vars.css CHANGED
@@ -1,5 +1,109 @@
1
1
  :root {
2
- --type-line-height: 1.5;
3
- --type-size-default: 1rem;
2
+ /* Core brands */
3
+ --color-brand-coop: #00a1cc;
4
+ --color-brand-deals: #d12430;
5
+ /* Core brands (backwards compatibility) */
6
+ --color-brand: var(--color-brand-coop);
7
+ --color-deal-red: var(--color-brand-deals);
8
+ /* Colours */
9
+ --color-white: #fff;
10
+ --color-black: #000;
11
+ /* Text greys */
4
12
  --color-text: #282828;
13
+ --color-text-alt: #595959;
14
+ /* Tints */
15
+ --color-tint-purple: #fef2ff;
16
+ --color-tint-pink: #ffeaf2;
17
+ --color-tint-green: #f9fbdd;
18
+ --color-tint-orange: #ffede0;
19
+ --color-tint-red: #ffe8e9;
20
+ --color-tint-yellow: #fff6da;
21
+ --color-tint-lilac: #f2f2ff;
22
+ --color-tint-blue: #e6f6fa;
23
+ /* Grey backgrounds */
24
+ --color-grey-mid-light: #d8d8d8;
25
+ --color-grey-mid: #c4c4c4;
26
+ --color-grey-dark: #6e6e6e;
27
+ --color-grey-light: #f3f3f3;
28
+ --color-grey-neutral-light: #f3f3f3;
29
+ --color-grey-neutral-warm: #f5f5f0;
30
+ --color-grey-neutral-cool: #dde9ed;
31
+ --color-grey-neutral-cool-light: #f2f4f7;
32
+ /* Links */
33
+ --color-link: #00729a;
34
+ --color-link-hover: #00394e;
35
+ --color-link-focus: #8d44d8;
36
+ --color-link-active: #002c3d;
37
+ --color-link-visited: #002c3d;
38
+ /* Reintroducing Co-op branding colours */
39
+ --color-navy: #003057;
40
+ --color-light-purple: #f8beff;
41
+ --color-light-pink: #ff94bf;
42
+ --color-light-green: #e1ec54;
43
+ --color-light-orange: #ffa465;
44
+ --color-light-red: #ff8c90;
45
+ --color-light-yellow: #ffd245;
46
+ --color-light-lilac: #bfbffd;
47
+ --color-light-blue: #bfe7f2;
48
+ --color-dark-purple: #c164c9;
49
+ --color-dark-pink: #f85792;
50
+ --color-dark-green: #819c00;
51
+ --color-dark-orange: #e85a00;
52
+ --color-dark-red: #f14f57;
53
+ --color-dark-yellow: #c08a00;
54
+ --color-dark-lilac: #6762f9;
55
+ /* Shades in use */
56
+ --color-green-light-6: #b9e277;
57
+ --color-red-dark-4: #ba2327;
58
+ /* Alternative colours */
59
+ --color-alt-light-blue: #99e0f5;
60
+ --color-alt-light-pink: #ffdbdb;
61
+ }
62
+
63
+ :root {
64
+ --ui-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
65
+ --ui-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 35%);
66
+ --ui-border-radius: 4px;
67
+ --ui-transition-hover: 0.1s ease-out;
68
+ --ui-transition-hover-property: background-color, color;
69
+ }
70
+
71
+ :root {
72
+ /* Spacing */
73
+ --spacing-64: 4rem;
74
+ --spacing-48: 3rem;
75
+ --spacing-32: 2rem;
76
+ --spacing-24: 1.5rem;
77
+ --spacing-16: 1rem;
78
+ --spacing-12: 0.75rem;
79
+ --spacing-8: 0.5rem;
80
+ --spacing-4: 0.25rem;
81
+ --spacing-2: 0.125rem;
82
+ }
83
+
84
+ :root {
85
+ --font-family: "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
86
+ --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
87
+ /* Typography Sizes */
88
+ --type-size-12: 0.75rem;
89
+ --type-size-14: 0.875rem;
90
+ --type-size-16: 1rem;
91
+ --type-size-18: 1.125rem;
92
+ --type-size-20: 1.25rem;
93
+ --type-size-22: 1.375rem;
94
+ --type-size-24: 1.5rem;
95
+ --type-size-26: 1.625rem;
96
+ --type-size-28: 1.75rem;
97
+ --type-size-30: 1.875rem;
98
+ --type-size-32: 2rem;
99
+ --type-size-40: 2.5rem;
100
+ --type-size-46: 2.875rem;
101
+ --type-size-48: 3rem;
102
+ --type-size-56: 3.5rem;
103
+ --type-size-64: 4rem;
104
+ --type-size-82: 5.125rem;
105
+ /* Typography Line Height */
106
+ --type-line-height-default: 1.5;
107
+ --type-line-height-tight: 1.25;
108
+ --type-line-height-headline: 1.05;
5
109
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@coopdigital/styles",
3
3
  "type": "module",
4
- "version": "0.1.0",
4
+ "version": "0.2.0",
5
5
  "private": false,
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -20,7 +20,7 @@
20
20
  "description": "",
21
21
  "devDependencies": {
22
22
  "glob": "^11.0.1",
23
- "sass-embedded": "^1.83.4"
23
+ "sass-embedded": "^1.85.0"
24
24
  },
25
- "gitHead": "a8fc664a2f4931af694002d4fe3b7832cff99569"
25
+ "gitHead": "52c2b7a0bd9ddde9ee7203b6961940bafe84b61a"
26
26
  }
package/src/breakpoints.scss ADDED
@@ -0,0 +1,13 @@
1
+ $mq-xxsmall: 20em; // 320/16
2
+
3
+ $mq-xsmall: 25.875em; // 414/16
4
+
5
+ $mq-small: 37.5em; // 600/16
6
+
7
+ $mq-medium: 48em; // 768/16
8
+
9
+ $mq-large: 64em; // 1024/16
10
+
11
+ $mq-xlarge: 81.25em; // 1300/16
12
+
13
+ $mq-xxlarge: 90em; // 1440/16
package/src/vars/_colours-buttons.scss ADDED
@@ -0,0 +1,32 @@
1
+ :root {
2
+ /* Primary green */
3
+ --color-button-green-primary: #0f8482;
4
+ --color-button-green-primary-hover: #1c6b6a;
5
+ --color-button-green-primary-active: #124948;
6
+ --color-button-primary: var(--color-button-green-primary);
7
+ --color-button-primary-hover: var(--color-button-green-primary-hover);
8
+ --color-button-primary-active: var(--color-button-green-primary-active);
9
+
10
+ /* Blue button */
11
+ --color-button-blue: #005878;
12
+ --color-button-blue-hover: #003e55;
13
+ --color-button-blue-active: #001f2b;
14
+ --color-button-dark: var(--color-button-blue);
15
+ --color-button-dark-hover: var(--color-button-blue-hover);
16
+ --color-button-dark-active: var(--color-button-blue-active);
17
+
18
+ /* Grey button */
19
+ --color-button-grey: #efefef;
20
+ --color-button-grey-hover: var(--color-grey-mid-light);
21
+ --color-button-grey-active: var(--color-grey-mid);
22
+
23
+ /* White button */
24
+ --color-button-white: var(--color-white);
25
+ --color-button-white-hover: var(--color-button-grey);
26
+ --color-button-white-active: var(--color-grey-mid-light);
27
+
28
+ /* default button */
29
+ --color-button: var(--color-button-blue);
30
+ --color-button-hover: var(--color-button-blue-hover);
31
+ --color-button-active: var(--color-button-blue-active);
32
+ }
package/src/vars/_colours-notifications.scss ADDED
@@ -0,0 +1,14 @@
1
+ :root {
2
+ /* Notifications */
3
+ --color-red-error: #e20f14;
4
+ --color-red-error-text: #d12430;
5
+ --color-red-error-light: #fcf1f1;
6
+ --color-orange-alert: #f8d156;
7
+ --color-orange-alert-light: #f8eec7;
8
+ --color-green-success: #50811b;
9
+ --color-green-success-light: #d7e3c6;
10
+ --color-blue-inform: #0761c2;
11
+ --color-blue-inform-light: #eef3fc;
12
+ --color-blue-notification: var(--color-blue-inform);
13
+ --color-blue-notification-light: var(--color-blue-inform-light);
14
+ }
package/src/vars/_colours.scss ADDED
@@ -0,0 +1,70 @@
1
+ :root {
2
+ /* Core brands */
3
+ --color-brand-coop: #00a1cc;
4
+ --color-brand-deals: #d12430;
5
+
6
+ /* Core brands (backwards compatibility) */
7
+ --color-brand: var(--color-brand-coop);
8
+ --color-deal-red: var(--color-brand-deals);
9
+
10
+ /* Colours */
11
+ --color-white: #fff;
12
+ --color-black: #000;
13
+
14
+ /* Text greys */
15
+ --color-text: #282828;
16
+ --color-text-alt: #595959;
17
+
18
+ /* Tints */
19
+ --color-tint-purple: #fef2ff;
20
+ --color-tint-pink: #ffeaf2;
21
+ --color-tint-green: #f9fbdd;
22
+ --color-tint-orange: #ffede0;
23
+ --color-tint-red: #ffe8e9;
24
+ --color-tint-yellow: #fff6da;
25
+ --color-tint-lilac: #f2f2ff;
26
+ --color-tint-blue: #e6f6fa;
27
+
28
+ /* Grey backgrounds */
29
+ --color-grey-mid-light: #d8d8d8;
30
+ --color-grey-mid: #c4c4c4;
31
+ --color-grey-dark: #6e6e6e;
32
+ --color-grey-light: #f3f3f3;
33
+ --color-grey-neutral-light: #f3f3f3;
34
+ --color-grey-neutral-warm: #f5f5f0;
35
+ --color-grey-neutral-cool: #dde9ed;
36
+ --color-grey-neutral-cool-light: #f2f4f7;
37
+
38
+ /* Links */
39
+ --color-link: #00729a;
40
+ --color-link-hover: #00394e;
41
+ --color-link-focus: #8d44d8;
42
+ --color-link-active: #002c3d;
43
+ --color-link-visited: #002c3d;
44
+
45
+ /* Reintroducing Co-op branding colours */
46
+ --color-navy: #003057;
47
+ --color-light-purple: #f8beff;
48
+ --color-light-pink: #ff94bf;
49
+ --color-light-green: #e1ec54;
50
+ --color-light-orange: #ffa465;
51
+ --color-light-red: #ff8c90;
52
+ --color-light-yellow: #ffd245;
53
+ --color-light-lilac: #bfbffd;
54
+ --color-light-blue: #bfe7f2;
55
+ --color-dark-purple: #c164c9;
56
+ --color-dark-pink: #f85792;
57
+ --color-dark-green: #819c00;
58
+ --color-dark-orange: #e85a00;
59
+ --color-dark-red: #f14f57;
60
+ --color-dark-yellow: #c08a00;
61
+ --color-dark-lilac: #6762f9;
62
+
63
+ /* Shades in use */
64
+ --color-green-light-6: #b9e277;
65
+ --color-red-dark-4: #ba2327;
66
+
67
+ /* Alternative colours */
68
+ --color-alt-light-blue: #99e0f5;
69
+ --color-alt-light-pink: #ffdbdb;
70
+ }
package/src/vars/_spacing.scss ADDED
@@ -0,0 +1,12 @@
1
+ :root {
2
+ /* Spacing */
3
+ --spacing-64: 4rem;
4
+ --spacing-48: 3rem;
5
+ --spacing-32: 2rem;
6
+ --spacing-24: 1.5rem;
7
+ --spacing-16: 1rem;
8
+ --spacing-12: 0.75rem;
9
+ --spacing-8: 0.5rem;
10
+ --spacing-4: 0.25rem;
11
+ --spacing-2: 0.125rem;
12
+ }
package/src/vars/_typography.scss ADDED
@@ -0,0 +1,32 @@
1
+ :root {
2
+ --font-family: "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
3
+ --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
4
+
5
+ /* Typography Sizes */
6
+ --type-size-12: 0.75rem;
7
+ --type-size-14: 0.875rem;
8
+ --type-size-16: 1rem;
9
+ --type-size-18: 1.125rem;
10
+ --type-size-20: 1.25rem;
11
+ --type-size-22: 1.375rem;
12
+ --type-size-24: 1.5rem;
13
+ --type-size-26: 1.625rem;
14
+ --type-size-28: 1.75rem;
15
+ --type-size-30: 1.875rem;
16
+ --type-size-32: 2rem;
17
+
18
+ --type-size-40: 2.5rem;
19
+ --type-size-46: 2.875rem;
20
+
21
+ --type-size-48: 3rem;
22
+ --type-size-56: 3.5rem;
23
+
24
+ --type-size-64: 4rem;
25
+
26
+ --type-size-82: 5.125rem;
27
+
28
+ /* Typography Line Height */
29
+ --type-line-height-default: 1.5;
30
+ --type-line-height-tight: 1.25;
31
+ --type-line-height-headline: 1.05;
32
+ }
package/src/vars/_ui.scss ADDED
@@ -0,0 +1,7 @@
1
+ :root {
2
+ --ui-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
3
+ --ui-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 35%);
4
+ --ui-border-radius: 4px;
5
+ --ui-transition-hover: 0.1s ease-out;
6
+ --ui-transition-hover-property: background-color, color;
7
+ }
package/src/vars-legacy/_colours-cls-legacy.scss ADDED
@@ -0,0 +1,8 @@
1
+ :root {
2
+ --color-brand-cls-blue-dark: #114d94;
3
+ --color-brand-cls-blue-mid: #0761c2;
4
+ --color-brand-cls-blue-light: #287cdf;
5
+
6
+ /* Bereavement Advice Centre */
7
+ --color-brand-bac-purple: #674170;
8
+ }
package/src/vars-legacy/_colours-legacy.scss ADDED
@@ -0,0 +1,230 @@
1
+ :root {
2
+ /* Core brands */
3
+ --color-brand-coop: #00a1cc;
4
+ --color-brand-deals: #d12430;
5
+
6
+ /* Core brands (backwards compatibility) */
7
+ --color-brand: var(--color-brand-coop);
8
+ --color-deal-red: var(--color-brand-deals);
9
+
10
+ /* Colours */
11
+ --color-white: #ffffff;
12
+ --color-black: #000000;
13
+
14
+ /* Text greys */
15
+ --color-text: #282828;
16
+ --color-text-alt: #595959;
17
+
18
+ /* Tints */
19
+ --color-tint-purple: #fef2ff;
20
+ --color-tint-pink: #ffeaf2;
21
+ --color-tint-green: #f9fbdd;
22
+ --color-tint-orange: #ffede0;
23
+ --color-tint-red: #ffe8e9;
24
+ --color-tint-yellow: #fff6da;
25
+ --color-tint-lilac: #f2f2ff;
26
+ --color-tint-blue: #e6f6fa;
27
+
28
+ /* Grey backgrounds */
29
+ --color-grey-mid-light: #d8d8d8;
30
+ --color-grey-mid: #c4c4c4;
31
+ --color-grey-dark: #6e6e6e;
32
+
33
+ /* Neutral backgrounds */
34
+ --color-grey-neutral-light: #f3f3f3;
35
+ --color-grey-light: var(--color-grey-neutral-light);
36
+ --color-grey-neutral-warm: #f5f5f0;
37
+ --color-grey-neutral-cool: #dde9ed;
38
+ --color-grey-neutral-cool-light: #f2f4f7;
39
+
40
+ /* Links */
41
+ --color-link: #00729a;
42
+ --color-link-hover: #00394e;
43
+ --color-link-focus: #8d44d8;
44
+ --color-link-active: #002c3d;
45
+ --color-link-visited: var(--color-link-active);
46
+ /* Phasing out the '--' for modifiers as it causes issues with design token processing (EG lodash) */
47
+ --color-link--hover: var(--color-link-hover);
48
+ --color-link--focus: var(--color-link-focus);
49
+ --color-link--active: var(--color-link-active);
50
+ --color-link--visited: var(--color-link-active);
51
+
52
+ /* Buttons */
53
+ /* Primary green */
54
+ --color-button-green-primary: #0f8482;
55
+ --color-button-green-primary-hover: #1c6b6a;
56
+ --color-button-green-primary-active: #124948;
57
+ --color-button-primary: var(--color-button-green-primary);
58
+ --color-button-primary--hover: var(--color-button-green-primary-hover);
59
+ --color-button-primary--active: var(--color-button-green-primary-active);
60
+
61
+ /* Blue button */
62
+ --color-button-blue: #005878;
63
+ --color-button-blue-hover: #003e55;
64
+ --color-button-blue-active: #001f2b;
65
+ --color-button-dark: var(--color-button-blue);
66
+ --color-button-dark--hover: var(--color-button-blue-hover);
67
+ --color-button-dark--active: var(--color-button-blue-active);
68
+
69
+ /* Grey button */
70
+ --color-button-grey: #efefef;
71
+ --color-button-grey-hover: var(--color-grey-mid-light);
72
+ --color-button-grey-active: var(--color-grey-mid);
73
+
74
+ /* White button */
75
+ --color-button-white: var(--color-white);
76
+ --color-button-white-hover: var(--color-button-grey);
77
+ --color-button-white-active: var(--color-grey-mid-light);
78
+
79
+ /* default button */
80
+ --color-button: var(--color-button-blue);
81
+ --color-button--hover: var(--color-button-blue-hover);
82
+ --color-button--active: var(--color-button-blue-active);
83
+
84
+ /* Notifications */
85
+ --color-red-error: #e20f14;
86
+ --color-red-error-text: #d12430;
87
+ --color-red-error-light: #fcf1f1;
88
+ --color-orange-alert: #f8d156;
89
+ --color-orange-alert-light: #f8eec7;
90
+ --color-green-success: #50811b;
91
+ --color-green-success-light: #d7e3c6;
92
+ --color-blue-inform: #0761c2;
93
+ --color-blue-inform-light: #eef3fc;
94
+ --color-blue-notification: var(--color-blue-inform);
95
+ --color-blue-notification-light: var(--color-blue-inform-light);
96
+
97
+ /* The numeric value at the end tallies to the lightness value of the colours in HSL to give some granularity to the system */
98
+ /* Reds */
99
+ --color-red-dark-4: #ba2327;
100
+ --color-red-mid-5: var(--color-red-error);
101
+ --color-red-light-7: #ff6a6d;
102
+ --color-red-light-8: #ffc1c3;
103
+ --color-red-light-9: #ffdbdb;
104
+ --color-red-light-10: #fcf1f1;
105
+ --color-red-dark: var(--color-red-dark-4);
106
+ --color-red-mid: var(--color-red-mid-5);
107
+
108
+ /* Oranges */
109
+ --color-orange-dark-4: #be4015;
110
+ --color-orange-mid-5: #fc5724;
111
+ --color-orange-mid-6: #fd7b3b;
112
+ --color-orange-mid-7: #fd9c59;
113
+ --color-orange-light-8: #fdb979;
114
+ --color-orange-light-9: #fee7c1;
115
+ --color-orange-light-10: #fff8e7;
116
+ --color-orange-mid: var(--color-orange-mid-5);
117
+
118
+ /* Yellows */
119
+ --color-yellow-dark-4: #cfb214;
120
+ --color-yellow-mid-5: #ffd309;
121
+ --color-yellow-mid-6: #ffe53b;
122
+ --color-yellow-mid-7: #fff372;
123
+ --color-yellow-light-8: #fffca9;
124
+ --color-yellow-light-9: #fffbcd;
125
+ --color-yellow-light-10: #fcf9ee;
126
+ --color-yellow-mid: var(--color-yellow-mid-5);
127
+ --color-yellow-light: var(--color-yellow-mid-7);
128
+ --color-yellow-bright: var(--color-yellow-mid-6);
129
+
130
+ /* Greens */
131
+ --color-green-dark-2: #3a6002;
132
+ --color-green-mid-3: #4f820d;
133
+ --color-green-mid-4: #72aa24;
134
+ --color-green-mid-5: #96cb48;
135
+ --color-green-light-6: #b9e277;
136
+ --color-green-light-8: #e7f7cb;
137
+ --color-green-light-10: #f6fce9;
138
+ --color-green-dark: var(--color-green-dark-2);
139
+ --color-green-mid: var(--color-green-mid-3);
140
+ --color-green-light: var(--color-green-mid-5);
141
+ --color-green-bright: var(--color-green-light-6);
142
+
143
+ /* Teals */
144
+ --color-teal-dark-2: #046062;
145
+ --color-teal-mid-3: #0f8482;
146
+ --color-teal-mid-4: #27aaab;
147
+ --color-teal-mid-6: #4bc7cc;
148
+ --color-teal-light-7: #79dce3;
149
+ --color-teal-light-9: #ccf2f7;
150
+ --color-teal-light-10: #e9fafc;
151
+ --color-turquoise-dark: var(--color-teal-dark-2);
152
+ --color-turquoise-mid: var(--color-teal-mid-3);
153
+ --color-turquoise-light: var(--color-teal-light-7);
154
+ --color-turquoise-bright: var(--color-teal-light-7);
155
+
156
+ /* Blues */
157
+ --color-blue-dark-3: #114d94;
158
+ --color-blue-mid-4: #0761c2;
159
+ --color-blue-mid-6: #519af5;
160
+ --color-blue-light-8: #80b7ff;
161
+ --color-blue-light-9: #cfe3ff;
162
+ --color-blue-light-10: #eef3fc;
163
+ --color-blue-dark: var(--color-blue-dark-3);
164
+ --color-blue-bright: var(--color-blue-mid-6);
165
+ --color-blue-light: var(--color-blue-light-9);
166
+ --color-blue-mid: var(--color-blue-mid-4);
167
+
168
+ /* Indigos */
169
+ --color-indigo-dark-4: #3b427f;
170
+ --color-indigo-mid-5: #4f52a8;
171
+ --color-indigo-mid-7: #8d9ae4;
172
+ --color-indigo-light-8: #afbdf5;
173
+ --color-indigo-light-9: #cfdbfe;
174
+ --color-indigo-light-10: #eff3fa;
175
+
176
+ /* Purples */
177
+ --color-purple-dark-3: #51178c;
178
+ --color-purple-mid-4: #6727b9;
179
+ --color-purple-mid-6: #8d44d8;
180
+ --color-purple-light-8: #d395fe;
181
+ --color-purple-light-9: #edc3ff;
182
+ --color-purple-light-10: #f9edfc;
183
+ --color-purple-dark: var(--color-purple-dark-3);
184
+
185
+ /* Magentas */
186
+ --color-magenta-dark-3: #812373;
187
+ --color-magenta-mid-4: #ab278d;
188
+ --color-magenta-mid-7: #f690f1;
189
+ --color-magenta-light-8: #feb8ff;
190
+ --color-magenta-light-9: #fad1fe;
191
+ --color-magenta-light-10: #faeafc;
192
+ --color-purple-mid: var(--color-magenta-mid-4);
193
+ --color-pink-light: var(--color-magenta-mid-7);
194
+ --color-pink-bright: var(--color-magenta-light-9);
195
+
196
+ /* Reintroducing Co-op branding colours */
197
+ --color-navy: #003057;
198
+ --color-light-purple: #f8beff;
199
+ --color-light-pink: #ff94bf;
200
+ --color-light-green: #e1ec54;
201
+ --color-light-orange: #ffa465;
202
+ --color-light-red: #ff8c90;
203
+ --color-light-yellow: #ffd245;
204
+ --color-light-lilac: #bfbffd;
205
+ --color-light-blue: #bfe7f2;
206
+ --color-dark-purple: #c164c9;
207
+ --color-dark-pink: #f85792;
208
+ --color-dark-green: #819c00;
209
+ --color-dark-orange: #e85a00;
210
+ --color-dark-red: #f14f57;
211
+ --color-dark-yellow: #c08a00;
212
+ --color-dark-lilac: #6762f9;
213
+
214
+ --color-brand-ric-color-navy: var(--color-navy);
215
+ --color-brand-ric-color-light-purple: var(--color-light-purple);
216
+ --color-brand-ric-color-light-pink: var(--color-light-pink);
217
+ --color-brand-ric-color-light-green: var(--color-light-green);
218
+ --color-brand-ric-color-light-orange: var(--color-light-orange);
219
+ --color-brand-ric-color-light-red: var(--color-light-red);
220
+ --color-brand-ric-color-light-yellow: var(--color-light-yellow);
221
+ --color-brand-ric-color-light-lilac: var(--color-light-lilac);
222
+ --color-brand-ric-color-light-blue: var(--color-light-blue);
223
+ --color-brand-ric-color-dark-purple: var(--color-dark-purple);
224
+ --color-brand-ric-color-dark-pink: var(--color-dark-pink);
225
+ --color-brand-ric-color-dark-green: var(--color-dark-green);
226
+ --color-brand-ric-color-dark-orange: var(--color-dark-orange);
227
+ --color-brand-ric-color-dark-red: var(--color-dark-red);
228
+ --color-brand-ric-color-dark-yellow: var(--color-dark-yellow);
229
+ --color-brand-ric-color-dark-lilac: var(--color-dark-lilac);
230
+ }
package/src/vars-legacy/_colours-membership-legacy.scss ADDED
@@ -0,0 +1,129 @@
1
+ :root {
2
+ /* Membership (Purple) */
3
+ --color-brand-membership-purple-dark-1: #483965;
4
+ --color-brand-membership-purple-dark-2: #635385;
5
+ --color-brand-membership-purple-dark-3: #776ca7;
6
+ --color-brand-membership-purple-mid-5: #8e88ba; /* core */
7
+ --color-brand-membership-purple-mid-6: #847db5; /* screen */
8
+ --color-brand-membership-purple-light-8: #b2aece;
9
+ --color-brand-membership-purple-light-9: #d3d1e4;
10
+ --color-brand-membership-purple-light-10: #eae8f4;
11
+ --color-brand-membership-purple-dark: var(--color-brand-membership-purple-dark-3);
12
+ --color-brand-membership-purple-mid: var(--color-brand-membership-purple-mid-5);
13
+ --color-brand-membership-purple-bright: var(--color-brand-membership-purple-mid-6);
14
+ --color-brand-membership-purple-light: var(--color-brand-membership-purple-light-8);
15
+ --color-brand-membership-purple-lighter: var(--color-brand-membership-purple-light-9);
16
+ --color-brand-membership-purple-lightest: var(--color-brand-membership-purple-light-10);
17
+
18
+ /* Membership (Lilac) */
19
+ --color-brand-membership-lilac-dark-1: #52355e;
20
+ --color-brand-membership-lilac-dark-2: #715287;
21
+ --color-brand-membership-lilac-dark-3: #806697;
22
+ --color-brand-membership-lilac-mid-5: #9976a8; /* core */
23
+ --color-brand-membership-lilac-mid-6: #a976bb; /* screen */
24
+ --color-brand-membership-lilac-light-8: #bba2c6;
25
+ --color-brand-membership-lilac-light-9: #ccbad4;
26
+ --color-brand-membership-lilac-light-10: #e6dde9;
27
+ --color-brand-membership-lilac-dark: var(--color-brand-membership-lilac-dark-3);
28
+ --color-brand-membership-lilac-mid: var(--color-brand-membership-lilac-mid-5);
29
+ --color-brand-membership-lilac-bright: var(--color-brand-membership-lilac-mid-6);
30
+ --color-brand-membership-lilac-light: var(--color-brand-membership-lilac-light-8);
31
+ --color-brand-membership-lilac-lighter: var(--color-brand-membership-lilac-light-9);
32
+ --color-brand-membership-lilac-lightest: var(--color-brand-membership-lilac-light-10);
33
+
34
+ /* Membership (Pink) */
35
+ --color-brand-membership-pink-dark-1: #6c3e53;
36
+ --color-brand-membership-pink-dark-2: #864e68;
37
+ --color-brand-membership-pink-dark-3: #9d5b7b;
38
+ --color-brand-membership-pink-mid-5: #bc7190; /* core */
39
+ --color-brand-membership-pink-mid-6: #d15c8c; /* screen */
40
+ --color-brand-membership-pink-light-8: #d19fb4;
41
+ --color-brand-membership-pink-light-9: #e3cbd4;
42
+ --color-brand-membership-pink-light-10: #f0e5eb;
43
+ --color-brand-membership-pink-dark: var(--color-brand-membership-pink-dark-3);
44
+ --color-brand-membership-pink-mid: var(--color-brand-membership-pink-mid-5);
45
+ --color-brand-membership-pink-bright: var(--color-brand-membership-pink-mid-6);
46
+ --color-brand-membership-pink-light: var(--color-brand-membership-pink-light-8);
47
+ --color-brand-membership-pink-lighter: var(--color-brand-membership-pink-light-9);
48
+ --color-brand-membership-pink-lightest: var(--color-brand-membership-pink-light-10);
49
+
50
+ /* Membership (Orange) */
51
+ --color-brand-membership-orange-dark-1: #783620;
52
+ --color-brand-membership-orange-dark-2: #9b462b;
53
+ --color-brand-membership-orange-dark-3: #b45d2b;
54
+ --color-brand-membership-orange-mid-5: #e69c39; /* core */
55
+ --color-brand-membership-orange-mid-6: #f5a74b; /* screen */
56
+ --color-brand-membership-orange-light-8: #e6bb8f;
57
+ --color-brand-membership-orange-light-9: #f0ddd1;
58
+ --color-brand-membership-orange-light-10: #f7eeeb;
59
+ --color-brand-membership-orange-dark: var(--color-brand-membership-orange-dark-3);
60
+ --color-brand-membership-orange-mid: var(--color-brand-membership-orange-mid-5);
61
+ --color-brand-membership-orange-bright: var(--color-brand-membership-orange-mid-6);
62
+ --color-brand-membership-orange-light: var(--color-brand-membership-orange-light-8);
63
+ --color-brand-membership-orange-lighter: var(--color-brand-membership-orange-light-9);
64
+ --color-brand-membership-orange-lightest: var(--color-brand-membership-orange-light-10);
65
+
66
+ /* Membership (Yellow) */
67
+ --color-brand-membership-yellow-dark-1: #704e24;
68
+ --color-brand-membership-yellow-dark-2: #916b3a;
69
+ --color-brand-membership-yellow-dark-3: #bf843e;
70
+ --color-brand-membership-yellow-mid-5: #ecd16d; /* core */
71
+ --color-brand-membership-yellow-mid-6: #f8da6d; /* screen */
72
+ --color-brand-membership-yellow-light-8: #edd273;
73
+ --color-brand-membership-yellow-light-9: #f3e2a4;
74
+ --color-brand-membership-yellow-light-10: #f9f1d1;
75
+ --color-brand-membership-yellow-dark: var(--color-brand-membership-yellow-dark-3);
76
+ --color-brand-membership-yellow-mid: var(--color-brand-membership-yellow-mid-5);
77
+ --color-brand-membership-yellow-bright: var(--color-brand-membership-yellow-mid-6);
78
+ --color-brand-membership-yellow-light: var(--color-brand-membership-yellow-light-8);
79
+ --color-brand-membership-yellow-lighter: var(--color-brand-membership-yellow-light-9);
80
+ --color-brand-membership-yellow-lightest: var(--color-brand-membership-yellow-light-10);
81
+
82
+ /* Membership (Green) */
83
+ --color-brand-membership-green-dark-1: #3b3f25;
84
+ --color-brand-membership-green-dark-2: #565734;
85
+ --color-brand-membership-green-dark-3: #6a7345;
86
+ --color-brand-membership-green-mid-5: #c6c978; /* core */
87
+ --color-brand-membership-green-mid-6: #b3ce7b; /* screen */
88
+ --color-brand-membership-green-light-8: #d1d4a5;
89
+ --color-brand-membership-green-light-9: #e4e5c6;
90
+ --color-brand-membership-green-light-10: #f6f6eb;
91
+ --color-brand-membership-green-dark: var(--color-brand-membership-green-dark-3);
92
+ --color-brand-membership-green-mid: var(--color-brand-membership-green-mid-5);
93
+ --color-brand-membership-green-bright: var(--color-brand-membership-green-mid-6);
94
+ --color-brand-membership-green-light: var(--color-brand-membership-green-light-8);
95
+ --color-brand-membership-green-lighter: var(--color-brand-membership-green-light-9);
96
+ --color-brand-membership-green-lightest: var(--color-brand-membership-green-light-10);
97
+
98
+ /* Membership (Turquoise) */
99
+ --color-brand-membership-turquoise-dark-1: #2b4946;
100
+ --color-brand-membership-turquoise-dark-2: #39615f;
101
+ --color-brand-membership-turquoise-dark-3: #487d7b;
102
+ --color-brand-membership-turquoise-mid-5: #81b8b8; /* core */
103
+ --color-brand-membership-turquoise-mid-6: #87cdcd; /* screen */
104
+ --color-brand-membership-turquoise-light-8: #b9dad9;
105
+ --color-brand-membership-turquoise-light-9: #d3e7e5;
106
+ --color-brand-membership-turquoise-light-10: #ecf5f7;
107
+ --color-brand-membership-turquoise-dark: var(--color-brand-membership-turquoise-dark-3);
108
+ --color-brand-membership-turquoise-mid: var(--color-brand-membership-turquoise-mid-5);
109
+ --color-brand-membership-turquoise-bright: var(--color-brand-membership-turquoise-mid-6);
110
+ --color-brand-membership-turquoise-light: var(--color-brand-membership-turquoise-light-8);
111
+ --color-brand-membership-turquoise-lighter: var(--color-brand-membership-turquoise-light-9);
112
+ --color-brand-membership-turquoise-lightest: var(--color-brand-membership-turquoise-light-10);
113
+
114
+ /* Membership (Blue) */
115
+ --color-brand-membership-blue-dark-1: #2c4258;
116
+ --color-brand-membership-blue-dark-2: #456588;
117
+ --color-brand-membership-blue-dark-3: #5177a3;
118
+ --color-brand-membership-blue-mid-5: #8bb5e0; /* core */
119
+ --color-brand-membership-blue-mid-6: #8fbae6; /* screen */
120
+ --color-brand-membership-blue-light-8: #c1d7ee;
121
+ --color-brand-membership-blue-light-9: #d8e6f4;
122
+ --color-brand-membership-blue-light-10: #f0f6fd;
123
+ --color-brand-membership-blue-dark: var(--color-brand-membership-blue-dark-3);
124
+ --color-brand-membership-blue-mid: var(--color-brand-membership-blue-mid-5);
125
+ --color-brand-membership-blue-bright: var(--color-brand-membership-blue-mid-6);
126
+ --color-brand-membership-blue-light: var(--color-brand-membership-blue-light-8);
127
+ --color-brand-membership-blue-lighter: var(--color-brand-membership-blue-light-9);
128
+ --color-brand-membership-blue-lightest: var(--color-brand-membership-blue-light-10);
129
+ }
package/src/vars-legacy/_spacing-legacy.scss ADDED
@@ -0,0 +1,15 @@
1
+ :root {
2
+ /* Spacing: Base */
3
+ --spacing-base: var(--spacing-32);
4
+ --spacing-base--3-4: var(--spacing-24);
5
+ --spacing-base--1-2: var(--spacing-16);
6
+ --spacing-base--1-4: var(--spacing-8);
7
+ --spacing-base--1-8: var(--spacing-2);
8
+
9
+ /* Spacing: Medium */
10
+ --spacing-medium: var(--spacing-64);
11
+ --spacing-medium--3-4: var(--spacing-48);
12
+ --spacing-medium--1-2: var(--spacing-32);
13
+ --spacing-medium--1-4: var(--spacing-16);
14
+ --spacing-medium--1-8: var(--spacing-8);
15
+ }
package/src/vars-legacy/_typography-legacy.scss ADDED
@@ -0,0 +1,37 @@
1
+ :root {
2
+ --font-family: "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
3
+ --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
4
+
5
+ /* Typography */
6
+ --type-headline-mega-m: 5.125rem; /* 82px */
7
+ --type-headline-mega-s: 4rem; /* 64px */
8
+ --type-headline-mega-xs: 3rem; /* 48px */
9
+
10
+ --type-headline-h1-m: 4rem; /* 64px */
11
+ --type-headline-h1-s: 3rem; /* 48px */
12
+ --type-headline-h1-xs: 2.5rem; /* 40px */
13
+
14
+ --type-body-l: 1.25rem; /* 20px */
15
+ --type-body-s: 1.125rem; /* 18px */
16
+
17
+ --type-line-height: 1.5; /* 32px */
18
+
19
+ --type-h1-mega-l: 3.5rem; /* 56px */
20
+ --type-h1-mega-s: 3rem; /* 48px */
21
+ --type-h1-l: 2.875rem; /* 46px */
22
+ --type-h1-s: 1.875rem; /* 30px */
23
+ --type-h2-l: 2rem; /* 32px */
24
+ --type-h2-s: 1.625rem; /* 26px */
25
+ --type-h3-l: 1.625rem; /* 26px */
26
+ --type-h3-s: 1.375rem; /* 22px */
27
+ --type-h456-l: 1.375rem; /* 22px */
28
+ --type-h456-s: 1.125rem; /* 18px */
29
+
30
+ --type-blockquote: 1.25rem; /* 18px */
31
+
32
+ --type-lp-l: 1.625rem; /* 26px */
33
+ --type-lp-s: 1.375rem; /* 22px */
34
+
35
+ --type-sp-l: 1.25rem; /* 18px */
36
+ --type-sp-s: 1rem; /* 16px */
37
+ }
package/src/vars-legacy/_ui-legacy.scss ADDED
@@ -0,0 +1,8 @@
1
+ :root {
2
+ --ui-shadow: 0 2px 10px 0 rgb(0 0 0 / 15%);
3
+ --ui-shadow-hover: 0 2px 10px 0 rgb(0 0 0 / 25%);
4
+ --ui-shadow--hover: var(--ui-shadow-hover); /* stylelint-disable-line */
5
+ --ui-border-radius: 8px;
6
+ --ui-transition-hover: 0.15s ease-in-out;
7
+ --ui-transition-hover-property: background-color, color;
8
+ }
package/src/vars-legacy.scss ADDED
@@ -0,0 +1,6 @@
1
+ @use "./vars-legacy/spacing-legacy";
2
+ @use "./vars-legacy/colours-cls-legacy";
3
+ @use "./vars-legacy/colours-legacy";
4
+ @use "./vars-legacy/colours-membership-legacy";
5
+ @use "./vars-legacy/typography-legacy";
6
+ @use "./vars-legacy/ui-legacy";
package/src/vars.scss CHANGED
@@ -1,6 +1,8 @@
1
- :root {
2
- --type-line-height: 1.5;
3
- --type-size-default: 1rem;
1
+ @use "./vars/colours";
4
2
 
5
- --color-text: #282828;
6
- }
3
+ // @use "./vars/colours-buttons";
4
+ // @use "./vars/colours-notifications";
5
+
6
+ @use "./vars/ui";
7
+ @use "./vars/spacing";
8
+ @use "./vars/typography";