@coopdigital/styles 0.5.2 → 0.5.4

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 (10) hide show
  1. package/README.md +9 -4
  2. package/dist/main.css +34 -2
  3. package/dist/reset.css +0 -1
  4. package/dist/typography.css +4 -0
  5. package/dist/vars.css +30 -1
  6. package/package.json +2 -2
  7. package/src/reset.scss +0 -1
  8. package/src/typography/_text.scss +4 -0
  9. package/src/vars/_colours.scss +2 -1
  10. package/src/vars.scss +1 -1
package/README.md CHANGED
@@ -7,7 +7,7 @@
7
7
  # Experience Kit for Styles
8
8
 
9
9
  <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
10
- [all_contributors_badge]: https://img.shields.io/badge/all_contributors-15-C08A00.svg ''
10
+ [all_contributors_badge]: https://img.shields.io/badge/all_contributors-16-C08A00.svg ''
11
11
  <!-- ALL-CONTRIBUTORS-BADGE:END -->
12
12
 
13
13
  <a href="https://www.npmjs.com/package/@coopdigital/styles"><img src="https://img.shields.io/npm/v/%40coopdigital%2Fstyles?color=E85A00" alt="npm version" /></a>
@@ -90,7 +90,7 @@ Thanks goes to these wonderful people:
90
90
  </tr><br />
91
91
  <tr>
92
92
  <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/kamini.pagare">
93
- <div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
93
+ <div><img src="https://gitlab.com/uploads/-/system/user/avatar/23337489/avatar.png" width="200px;" alt=""/></div>
94
94
  <small>Kamini Pagare</small>
95
95
  <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>
96
96
  </a></td>
@@ -113,19 +113,24 @@ Thanks goes to these wonderful people:
113
113
  <div><img src="https://secure.gravatar.com/avatar/faf90b70d749cf9460eb603fa1700add94fd7d3a32645b4be6fa12eb45c4ffa3?s=80&d=identicon" width="200px;" alt=""/></div>
114
114
  <small>Omid Kashan</small>
115
115
  <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>
116
+ </a></td>
117
+ <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/romain.chen">
118
+ <div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
119
+ <small>Romain Chen</small>
120
+ <div><a href="#design-romain.chen" title="Design">🎨</a></div>
116
121
  </a></td>
117
122
  <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/sam.harden">
118
123
  <div><img src="https://ca.slack-edge.com/T0C9E3ZF0-U03NT7D39L6-2fc82e7f7c6e-150" width="200px;" alt=""/></div>
119
124
  <small>Sam Harden</small>
120
125
  <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>
121
126
  </a></td>
127
+ </tr><br />
128
+ <tr>
122
129
  <td align="center" valign="top" width="14.28%"><a href="">
123
130
  <div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
124
131
  <small>Shweta Jaju</small>
125
132
  <div><a href="#userTesting-shweta.jaju" title="User Testing">📓</a></div>
126
133
  </a></td>
127
- </tr><br />
128
- <tr>
129
134
  <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/theodore.kouzelis">
130
135
  <div><img src="https://secure.gravatar.com/avatar/3988f940029d9053174ac68e7f5bfa8fd61f184872d46281f44e2e698711d37d?s=80&d=identicon" width="200px;" alt=""/></div>
131
136
  <small>Theo Kouzelis</small>
package/dist/main.css CHANGED
@@ -38,7 +38,6 @@
38
38
  --color-link-visited: #002c3d;
39
39
  --color-focus-ring: #8d44d8;
40
40
  /* Reintroducing Co-op branding colours */
41
- --color-navy: #003057;
42
41
  --color-light-purple: #f8beff;
43
42
  --color-light-pink: #ff94bf;
44
43
  --color-light-green: #e1ec54;
@@ -54,6 +53,7 @@
54
53
  --color-dark-red: #f14f57;
55
54
  --color-dark-yellow: #c08a00;
56
55
  --color-dark-lilac: #6762f9;
56
+ --color-navy: #003057;
57
57
  /* Shades in use */
58
58
  --color-green-light-6: #b9e277;
59
59
  --color-red-dark-4: #ba2327;
@@ -63,6 +63,35 @@
63
63
  --color-blue-light-10: #eef3fc;
64
64
  }
65
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: var(--color-grey-mid-light);
84
+ --color-button-grey-active: var(--color-grey-mid);
85
+ /* White button */
86
+ --color-button-white: var(--color-white);
87
+ --color-button-white-hover: var(--color-button-grey);
88
+ --color-button-white-active: var(--color-grey-mid-light);
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
+
66
95
  :root {
67
96
  --ui-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
68
97
  --ui-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 35%);
@@ -196,7 +225,6 @@ h4 {
196
225
  }
197
226
 
198
227
  a:not([class]) {
199
- color: currentcolor;
200
228
  text-decoration-skip-ink: auto;
201
229
  }
202
230
 
@@ -361,6 +389,10 @@ h6 {
361
389
  line-height: 105%;
362
390
  }
363
391
 
392
+ .coop-t-headline-blue {
393
+ color: var(--color-brand-coop);
394
+ }
395
+
364
396
  .coop-t-headline-upper {
365
397
  font-family: var(--font-family-headline);
366
398
  line-height: 100%;
package/dist/reset.css CHANGED
@@ -75,7 +75,6 @@ h4 {
75
75
  }
76
76
 
77
77
  a:not([class]) {
78
- color: currentcolor;
79
78
  text-decoration-skip-ink: auto;
80
79
  }
81
80
 
package/dist/typography.css CHANGED
@@ -150,6 +150,10 @@ h6 {
150
150
  line-height: 105%;
151
151
  }
152
152
 
153
+ .coop-t-headline-blue {
154
+ color: var(--color-brand-coop);
155
+ }
156
+
153
157
  .coop-t-headline-upper {
154
158
  font-family: var(--font-family-headline);
155
159
  line-height: 100%;
package/dist/vars.css CHANGED
@@ -37,7 +37,6 @@
37
37
  --color-link-visited: #002c3d;
38
38
  --color-focus-ring: #8d44d8;
39
39
  /* Reintroducing Co-op branding colours */
40
- --color-navy: #003057;
41
40
  --color-light-purple: #f8beff;
42
41
  --color-light-pink: #ff94bf;
43
42
  --color-light-green: #e1ec54;
@@ -53,6 +52,7 @@
53
52
  --color-dark-red: #f14f57;
54
53
  --color-dark-yellow: #c08a00;
55
54
  --color-dark-lilac: #6762f9;
55
+ --color-navy: #003057;
56
56
  /* Shades in use */
57
57
  --color-green-light-6: #b9e277;
58
58
  --color-red-dark-4: #ba2327;
@@ -62,6 +62,35 @@
62
62
  --color-blue-light-10: #eef3fc;
63
63
  }
64
64
 
65
+ :root {
66
+ /* Primary green */
67
+ --color-button-green-primary: #0f8482;
68
+ --color-button-green-primary-hover: #1c6b6a;
69
+ --color-button-green-primary-active: #124948;
70
+ --color-button-primary: var(--color-button-green-primary);
71
+ --color-button-primary-hover: var(--color-button-green-primary-hover);
72
+ --color-button-primary-active: var(--color-button-green-primary-active);
73
+ /* Blue button */
74
+ --color-button-blue: #005878;
75
+ --color-button-blue-hover: #003e55;
76
+ --color-button-blue-active: #001f2b;
77
+ --color-button-dark: var(--color-button-blue);
78
+ --color-button-dark-hover: var(--color-button-blue-hover);
79
+ --color-button-dark-active: var(--color-button-blue-active);
80
+ /* Grey button */
81
+ --color-button-grey: #efefef;
82
+ --color-button-grey-hover: var(--color-grey-mid-light);
83
+ --color-button-grey-active: var(--color-grey-mid);
84
+ /* White button */
85
+ --color-button-white: var(--color-white);
86
+ --color-button-white-hover: var(--color-button-grey);
87
+ --color-button-white-active: var(--color-grey-mid-light);
88
+ /* default button */
89
+ --color-button: var(--color-button-blue);
90
+ --color-button-hover: var(--color-button-blue-hover);
91
+ --color-button-active: var(--color-button-blue-active);
92
+ }
93
+
65
94
  :root {
66
95
  --ui-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
67
96
  --ui-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 35%);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@coopdigital/styles",
3
3
  "type": "module",
4
- "version": "0.5.2",
4
+ "version": "0.5.4",
5
5
  "private": false,
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -31,5 +31,5 @@
31
31
  "glob": "^11.0.1",
32
32
  "sass-embedded": "^1.85.0"
33
33
  },
34
- "gitHead": "827c8ec0c84d2f8034e28acde178e7c3e7ed488b"
34
+ "gitHead": "634e2f73ada33fd85e9adef7b6ef8d84ae506afd"
35
35
  }
package/src/reset.scss CHANGED
@@ -76,7 +76,6 @@ h4 {
76
76
  }
77
77
 
78
78
  a:not([class]) {
79
- color: currentcolor;
80
79
  text-decoration-skip-ink: auto;
81
80
  }
82
81
 
package/src/typography/_text.scss CHANGED
@@ -72,6 +72,10 @@ h6 {
72
72
  line-height: 105%;
73
73
  }
74
74
 
75
+ .coop-t-headline-blue {
76
+ color: var(--color-brand-coop);
77
+ }
78
+
75
79
  .coop-t-headline-upper {
76
80
  font-family: var(--font-family-headline);
77
81
  line-height: 100%;
package/src/vars/_colours.scss CHANGED
@@ -44,7 +44,7 @@
44
44
  --color-focus-ring: #8d44d8;
45
45
 
46
46
  /* Reintroducing Co-op branding colours */
47
- --color-navy: #003057;
47
+
48
48
  --color-light-purple: #f8beff;
49
49
  --color-light-pink: #ff94bf;
50
50
  --color-light-green: #e1ec54;
@@ -60,6 +60,7 @@
60
60
  --color-dark-red: #f14f57;
61
61
  --color-dark-yellow: #c08a00;
62
62
  --color-dark-lilac: #6762f9;
63
+ --color-navy: #003057;
63
64
 
64
65
  /* Shades in use */
65
66
  --color-green-light-6: #b9e277;
package/src/vars.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use "./vars/colours";
2
2
 
3
- // @use "./vars/colours-buttons";
3
+ @use "./vars/colours-buttons";
4
4
  // @use "./vars/colours-notifications";
5
5
 
6
6
  @use "./vars/ui";