@coopdigital/styles 0.4.1 → 0.5.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 (16) hide show
  1. package/README.md +8 -26
  2. package/dist/components/Pill.css +70 -0
  3. package/dist/main.css +11 -5
  4. package/dist/reset.css +0 -4
  5. package/dist/typography.css +1 -0
  6. package/dist/vars.css +10 -1
  7. package/package.json +2 -2
  8. package/src/components/Pill.scss +87 -0
  9. package/src/reset.scss +0 -4
  10. package/src/typography/_links.scss +1 -0
  11. package/src/vars/_colours.scss +2 -0
  12. package/src/vars/_spacing.scss +5 -0
  13. package/src/vars/_typography.scss +1 -0
  14. package/src/vars/_ui.scss +4 -1
  15. /package/dist/components/{button.css → Button.css} +0 -0
  16. /package/src/components/{button.scss → Button.scss} +0 -0
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/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
+ background-color: var(--color-blue-light-10);
6
+ border-radius: var(--ui-border-radius-xl);
7
+ padding: var(--spacing-12) var(--spacing-20);
8
+ font-size: var(--type-size-pill);
9
+ color: var(--color-text);
10
+ text-decoration: none;
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
+ font-size: var(--type-size-badge);
21
+ font-weight: 600;
22
+ border-radius: var(--ui-border-radius-m);
23
+ padding: var(--spacing-2) var(--spacing-6);
24
+ color: var(--color-white);
25
+ line-height: var(--type-line-height);
26
+ transform: translateY(-50%);
27
+ text-transform: uppercase;
28
+ }
29
+ .coop-pill[data-badge-color=green]::after {
30
+ background-color: var(--color-dark-green);
31
+ }
32
+ .coop-pill[data-badge-color=orange]::after {
33
+ background-color: var(--color-dark-orange);
34
+ }
35
+ .coop-pill[data-badge-color=pink]::after {
36
+ background-color: var(--color-dark-pink);
37
+ }
38
+ .coop-pill[data-badge-color=red]::after {
39
+ background-color: var(--color-red-dark-4);
40
+ }
41
+ .coop-pill[data-pill-color=blue] {
42
+ background-color: var(--color-blue-light-10);
43
+ }
44
+ .coop-pill[data-pill-color=pink] {
45
+ background-color: var(--color-alt-light-pink);
46
+ }
47
+ .coop-pill[data-size=sm] {
48
+ --type-size-pill: var(--type-size-14);
49
+ }
50
+ .coop-pill[data-size=lg] {
51
+ --type-size-pill: var(--type-size-18);
52
+ --type-size-badge: var(--type-size-12);
53
+ }
54
+ .coop-pill[data-size=xl] {
55
+ --type-size-pill: var(--type-size-20);
56
+ --type-size-badge: var(--type-size-12);
57
+ padding: var(--spacing-14) var(--spacing-24);
58
+ }
59
+
60
+ a.coop-pill:focus, a.coop-pill:hover {
61
+ text-decoration: underline;
62
+ color: var(--color-text);
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;
@@ -197,10 +206,6 @@ picture {
197
206
  display: block;
198
207
  }
199
208
 
200
- textarea:not([rows]) {
201
- min-height: 10rem;
202
- }
203
-
204
209
  :target {
205
210
  scroll-margin-block: 5ex;
206
211
  }
@@ -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 {
package/dist/reset.css CHANGED
@@ -85,10 +85,6 @@ picture {
85
85
  display: block;
86
86
  }
87
87
 
88
- textarea:not([rows]) {
89
- min-height: 10rem;
90
- }
91
-
92
88
  :target {
93
89
  scroll-margin-block: 5ex;
94
90
  }
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 {
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.0",
5
5
  "private": false,
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -22,5 +22,5 @@
22
22
  "glob": "^11.0.1",
23
23
  "sass-embedded": "^1.85.0"
24
24
  },
25
- "gitHead": "dce17e1b85785160c7e817e85c61006060572dfb"
25
+ "gitHead": "ccedccf7209f30e95b5312052836bbd745410d0c"
26
26
  }
package/src/components/Pill.scss ADDED
@@ -0,0 +1,87 @@
1
+ .coop-pill {
2
+ --type-size-badge: var(--type-size-10);
3
+ --type-size-pill: var(--type-size-16);
4
+
5
+ display: inline-block;
6
+ background-color: var(--color-blue-light-10);
7
+ border-radius: var(--ui-border-radius-xl);
8
+ padding: var(--spacing-12) var(--spacing-20);
9
+ font-size: var(--type-size-pill); // [data-pill-size="md"]
10
+ color: var(--color-text);
11
+ text-decoration: none;
12
+
13
+ &[data-badge] {
14
+ position: relative;
15
+
16
+ &::after {
17
+ content: attr(data-badge);
18
+ position: absolute;
19
+ top: 0;
20
+ right: var(--spacing-12);
21
+ font-size: var(--type-size-badge);
22
+ font-weight: 600;
23
+ border-radius: var(--ui-border-radius-m);
24
+ padding: var(--spacing-2) var(--spacing-6);
25
+ color: var(--color-white);
26
+ line-height: var(--type-line-height);
27
+ transform: translateY(-50%);
28
+ text-transform: uppercase;
29
+ }
30
+ }
31
+
32
+ $badge-colors: (
33
+ "green": var(--color-dark-green),
34
+ "orange": var(--color-dark-orange),
35
+ "pink": var(--color-dark-pink),
36
+ "red": var(--color-red-dark-4),
37
+ );
38
+
39
+ @each $key, $badge-color in $badge-colors {
40
+ &[data-badge-color="#{$key}"]::after {
41
+ background-color: $badge-color;
42
+ }
43
+ }
44
+
45
+ $pill-colors: (
46
+ "blue": var(--color-blue-light-10),
47
+ "pink": var(--color-alt-light-pink),
48
+ );
49
+
50
+ @each $key, $pill-color in $pill-colors {
51
+ &[data-pill-color="#{$key}"] {
52
+ background-color: $pill-color;
53
+ }
54
+ }
55
+
56
+ &[data-size="sm"] {
57
+ --type-size-pill: var(--type-size-14);
58
+ }
59
+
60
+ &[data-size="lg"] {
61
+ --type-size-pill: var(--type-size-18);
62
+ --type-size-badge: var(--type-size-12);
63
+ }
64
+
65
+ &[data-size="xl"] {
66
+ --type-size-pill: var(--type-size-20);
67
+ --type-size-badge: var(--type-size-12);
68
+
69
+ padding: var(--spacing-14) var(--spacing-24);
70
+ }
71
+ }
72
+
73
+ a.coop-pill {
74
+ &:focus,
75
+ &:hover {
76
+ text-decoration: underline;
77
+ color: var(--color-text);
78
+ }
79
+ }
80
+
81
+ .coop-pill-group {
82
+ margin-bottom: var(--spacing-32);
83
+
84
+ .coop-pill {
85
+ margin-right: var(--spacing-16);
86
+ }
87
+ }
package/src/reset.scss CHANGED
@@ -85,10 +85,6 @@ picture {
85
85
  display: block;
86
86
  }
87
87
 
88
- textarea:not([rows]) {
89
- min-height: 10rem;
90
- }
91
-
92
88
  :target {
93
89
  scroll-margin-block: 5ex;
94
90
  }
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);
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
  }
/package/dist/components/{button.css → Button.css} RENAMED
File without changes
/package/src/components/{button.scss → Button.scss} RENAMED
File without changes