@coopdigital/styles 0.5.2 → 0.5.3

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 (9) hide show
  1. package/dist/main.css +34 -2
  2. package/dist/reset.css +0 -1
  3. package/dist/typography.css +4 -0
  4. package/dist/vars.css +30 -1
  5. package/package.json +2 -2
  6. package/src/reset.scss +0 -1
  7. package/src/typography/_text.scss +4 -0
  8. package/src/vars/_colours.scss +2 -1
  9. package/src/vars.scss +1 -1
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.3",
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": "fdc3cd6c04f66f5b1240f615951d337ac0669eac"
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";