@coopdigital/styles 0.6.1 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -1
- package/dist/components/AlertBanner.css +1 -32
- package/dist/components/Button.css +1 -121
- package/dist/components/EditorialCard.css +1 -69
- package/dist/components/Pill.css +1 -73
- package/dist/components/SkipNav.css +1 -40
- package/dist/keyframes/spinner.css +1 -8
- package/dist/main.css +1 -485
- package/dist/reset.css +1 -94
- package/dist/typography.css +1 -217
- package/dist/vars-legacy.css +1 -391
- package/dist/vars.css +1 -172
- package/package.json +3 -2
- package/src/reset.scss +0 -2
- package/src/typography/_misc.scss +4 -0
package/dist/vars.css
CHANGED
|
@@ -1,172 +1 @@
|
|
|
1
|
-
:root
|
|
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 */
|
|
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
|
-
--color-focus-ring: #8d44d8;
|
|
39
|
-
/* Reintroducing Co-op branding colours */
|
|
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
|
-
--color-navy: #003057;
|
|
56
|
-
/* Shades in use */
|
|
57
|
-
--color-green-light-6: #b9e277;
|
|
58
|
-
--color-red-dark-4: #ba2327;
|
|
59
|
-
--color-yellow-mid-5: #ffd309;
|
|
60
|
-
/* Alternative colours */
|
|
61
|
-
--color-alt-light-blue: #99e0f5;
|
|
62
|
-
--color-alt-light-pink: #ffdbdb;
|
|
63
|
-
--color-blue-light-10: #eef3fc;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
:root {
|
|
67
|
-
/* Primary green */
|
|
68
|
-
--color-button-green-primary: #0f8482;
|
|
69
|
-
--color-button-green-primary-hover: #1c6b6a;
|
|
70
|
-
--color-button-green-primary-active: #124948;
|
|
71
|
-
--color-button-primary: var(--color-button-green-primary);
|
|
72
|
-
--color-button-primary-hover: var(--color-button-green-primary-hover);
|
|
73
|
-
--color-button-primary-active: var(--color-button-green-primary-active);
|
|
74
|
-
/* Blue button */
|
|
75
|
-
--color-button-blue: #005878;
|
|
76
|
-
--color-button-blue-hover: #003e55;
|
|
77
|
-
--color-button-blue-active: #001f2b;
|
|
78
|
-
--color-button-dark: var(--color-button-blue);
|
|
79
|
-
--color-button-dark-hover: var(--color-button-blue-hover);
|
|
80
|
-
--color-button-dark-active: var(--color-button-blue-active);
|
|
81
|
-
/* Grey button */
|
|
82
|
-
--color-button-grey: #efefef;
|
|
83
|
-
--color-button-grey-hover: #d8d8d8;
|
|
84
|
-
--color-button-grey-active: #c4c4c4;
|
|
85
|
-
/* White button */
|
|
86
|
-
--color-button-white: var(--color-white);
|
|
87
|
-
--color-button-white-hover: var(--color-button-grey);
|
|
88
|
-
--color-button-white-active: #d8d8d8;
|
|
89
|
-
/* default button */
|
|
90
|
-
--color-button: var(--color-button-blue);
|
|
91
|
-
--color-button-hover: var(--color-button-blue-hover);
|
|
92
|
-
--color-button-active: var(--color-button-blue-active);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
:root {
|
|
96
|
-
/* Notifications */
|
|
97
|
-
--color-red-error: #e20f14;
|
|
98
|
-
--color-red-error-text: #d12430;
|
|
99
|
-
--color-red-error-light: #fcf1f1;
|
|
100
|
-
--color-orange-alert: #f8d156;
|
|
101
|
-
--color-orange-alert-light: #f8eec7;
|
|
102
|
-
--color-green-success: #50811b;
|
|
103
|
-
--color-green-success-light: #d7e3c6;
|
|
104
|
-
--color-blue-inform: #0761c2;
|
|
105
|
-
--color-blue-inform-light: #eef3fc;
|
|
106
|
-
--color-blue-notification: var(--color-blue-inform);
|
|
107
|
-
--color-blue-notification-light: var(--color-blue-inform-light);
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
:root {
|
|
111
|
-
--ui-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
|
|
112
|
-
--ui-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 25%);
|
|
113
|
-
--ui-transition-hover: 0.1s ease-out;
|
|
114
|
-
--ui-transition-hover-property: background-color, color;
|
|
115
|
-
--ui-border-radius: 4px;
|
|
116
|
-
--ui-border-radius-m: 8px;
|
|
117
|
-
--ui-border-radius-xl: 20px;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
:root {
|
|
121
|
-
/* Spacing */
|
|
122
|
-
--spacing-64: 4rem;
|
|
123
|
-
--spacing-58: 3.625rem;
|
|
124
|
-
--spacing-52: 3.25rem;
|
|
125
|
-
--spacing-48: 3rem;
|
|
126
|
-
--spacing-40: 2.5rem;
|
|
127
|
-
--spacing-32: 2rem;
|
|
128
|
-
--spacing-24: 1.5rem;
|
|
129
|
-
--spacing-20: 1.25rem;
|
|
130
|
-
--spacing-18: 1.125rem;
|
|
131
|
-
--spacing-16: 1rem;
|
|
132
|
-
--spacing-14: 0.875rem;
|
|
133
|
-
--spacing-12: 0.75rem;
|
|
134
|
-
--spacing-10: 0.625rem;
|
|
135
|
-
--spacing-8: 0.5rem;
|
|
136
|
-
--spacing-6: 0.375rem;
|
|
137
|
-
--spacing-4: 0.25rem;
|
|
138
|
-
--spacing-2: 0.125rem;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
:root {
|
|
142
|
-
--font-family: "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
143
|
-
--font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
|
|
144
|
-
/* Weights */
|
|
145
|
-
--type-weight-default: normal;
|
|
146
|
-
--type-weight-medium: 500;
|
|
147
|
-
--type-weight-demibold: 600;
|
|
148
|
-
/* Typography Sizes */
|
|
149
|
-
--type-size-10: 0.625rem;
|
|
150
|
-
--type-size-12: 0.75rem;
|
|
151
|
-
--type-size-14: 0.875rem;
|
|
152
|
-
--type-size-16: 1rem;
|
|
153
|
-
--type-size-18: 1.125rem;
|
|
154
|
-
--type-size-20: 1.25rem;
|
|
155
|
-
--type-size-22: 1.375rem;
|
|
156
|
-
--type-size-24: 1.5rem;
|
|
157
|
-
--type-size-26: 1.625rem;
|
|
158
|
-
--type-size-28: 1.75rem;
|
|
159
|
-
--type-size-30: 1.875rem;
|
|
160
|
-
--type-size-32: 2rem;
|
|
161
|
-
--type-size-40: 2.5rem;
|
|
162
|
-
--type-size-46: 2.875rem;
|
|
163
|
-
--type-size-48: 3rem;
|
|
164
|
-
--type-size-56: 3.5rem;
|
|
165
|
-
--type-size-64: 4rem;
|
|
166
|
-
--type-size-82: 5.125rem;
|
|
167
|
-
--type-size-default: var(--type-size-16);
|
|
168
|
-
/* Typography Line Height */
|
|
169
|
-
--type-line-height-default: 1.5;
|
|
170
|
-
--type-line-height-tight: 1.25;
|
|
171
|
-
--type-line-height-headline: 1.05;
|
|
172
|
-
}
|
|
1
|
+
:root{--color-brand-coop:#00a1cc;--color-brand-deals:#d12430;--color-brand:var(--color-brand-coop);--color-deal-red:var(--color-brand-deals);--color-white:#fff;--color-black:#000;--color-text:#282828;--color-text-alt:#595959;--color-tint-purple:#fef2ff;--color-tint-pink:#ffeaf2;--color-tint-green:#f9fbdd;--color-tint-orange:#ffede0;--color-tint-red:#ffe8e9;--color-tint-yellow:#fff6da;--color-tint-lilac:#f2f2ff;--color-tint-blue:#e6f6fa;--color-grey-mid-light:#d8d8d8;--color-grey-mid:#c4c4c4;--color-grey-dark:#6e6e6e;--color-grey-light:#f3f3f3;--color-grey-neutral-light:#f3f3f3;--color-grey-neutral-warm:#f5f5f0;--color-grey-neutral-cool:#dde9ed;--color-grey-neutral-cool-light:#f2f4f7;--color-link:#00729a;--color-link-hover:#00394e;--color-link-focus:#8d44d8;--color-link-active:#002c3d;--color-link-visited:#002c3d;--color-focus-ring:#8d44d8;--color-light-purple:#f8beff;--color-light-pink:#ff94bf;--color-light-green:#e1ec54;--color-light-orange:#ffa465;--color-light-red:#ff8c90;--color-light-yellow:#ffd245;--color-light-lilac:#bfbffd;--color-light-blue:#bfe7f2;--color-dark-purple:#c164c9;--color-dark-pink:#f85792;--color-dark-green:#819c00;--color-dark-orange:#e85a00;--color-dark-red:#f14f57;--color-dark-yellow:#c08a00;--color-dark-lilac:#6762f9;--color-navy:#003057;--color-green-light-6:#b9e277;--color-red-dark-4:#ba2327;--color-yellow-mid-5:#ffd309;--color-alt-light-blue:#99e0f5;--color-alt-light-pink:#ffdbdb;--color-blue-light-10:#eef3fc;--color-button-green-primary:#0f8482;--color-button-green-primary-hover:#1c6b6a;--color-button-green-primary-active:#124948;--color-button-primary:var(--color-button-green-primary);--color-button-primary-hover:var(--color-button-green-primary-hover);--color-button-primary-active:var(--color-button-green-primary-active);--color-button-blue:#005878;--color-button-blue-hover:#003e55;--color-button-blue-active:#001f2b;--color-button-dark:var(--color-button-blue);--color-button-dark-hover:var(--color-button-blue-hover);--color-button-dark-active:var(--color-button-blue-active);--color-button-grey:#efefef;--color-button-grey-hover:#d8d8d8;--color-button-grey-active:#c4c4c4;--color-button-white:var(--color-white);--color-button-white-hover:var(--color-button-grey);--color-button-white-active:#d8d8d8;--color-button:var(--color-button-blue);--color-button-hover:var(--color-button-blue-hover);--color-button-active:var(--color-button-blue-active);--color-red-error:#e20f14;--color-red-error-text:#d12430;--color-red-error-light:#fcf1f1;--color-orange-alert:#f8d156;--color-orange-alert-light:#f8eec7;--color-green-success:#50811b;--color-green-success-light:#d7e3c6;--color-blue-inform:#0761c2;--color-blue-inform-light:#eef3fc;--color-blue-notification:var(--color-blue-inform);--color-blue-notification-light:var(--color-blue-inform-light);--ui-shadow:0 2px 4px 0 #00000026;--ui-shadow-hover:0 2px 4px 0 #00000040;--ui-transition-hover:.1s ease-out;--ui-transition-hover-property:background-color,color;--ui-border-radius:4px;--ui-border-radius-m:8px;--ui-border-radius-xl:20px;--spacing-64:4rem;--spacing-58:3.625rem;--spacing-52:3.25rem;--spacing-48:3rem;--spacing-40:2.5rem;--spacing-32:2rem;--spacing-24:1.5rem;--spacing-20:1.25rem;--spacing-18:1.125rem;--spacing-16:1rem;--spacing-14:.875rem;--spacing-12:.75rem;--spacing-10:.625rem;--spacing-8:.5rem;--spacing-6:.375rem;--spacing-4:.25rem;--spacing-2:.125rem;--font-family:"Avenir-Next","Helvetica Neue",Helvetica,Arial,sans-serif;--font-family-headline:"Co-opHeadline","Impact",Helvetica,Arial,sans-serif;--type-weight-default:normal;--type-weight-medium:500;--type-weight-demibold:600;--type-size-10:.625rem;--type-size-12:.75rem;--type-size-14:.875rem;--type-size-16:1rem;--type-size-18:1.125rem;--type-size-20:1.25rem;--type-size-22:1.375rem;--type-size-24:1.5rem;--type-size-26:1.625rem;--type-size-28:1.75rem;--type-size-30:1.875rem;--type-size-32:2rem;--type-size-40:2.5rem;--type-size-46:2.875rem;--type-size-48:3rem;--type-size-56:3.5rem;--type-size-64:4rem;--type-size-82:5.125rem;--type-size-default:var(--type-size-16);--type-line-height-default:1.5;--type-line-height-tight:1.25;--type-line-height-headline:1.05}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coopdigital/styles",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.8.0",
|
|
5
5
|
"private": false,
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
@@ -29,7 +29,8 @@
|
|
|
29
29
|
"description": "",
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"glob": "^11.0.1",
|
|
32
|
+
"lightningcss": "^1.29.3",
|
|
32
33
|
"sass-embedded": "^1.86.0"
|
|
33
34
|
},
|
|
34
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "d113e05914bad6b718e531e27c21a6db1c58f774"
|
|
35
36
|
}
|
package/src/reset.scss
CHANGED