@coopdigital/styles 0.16.2 → 0.16.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.
package/README.md
CHANGED
|
@@ -6,14 +6,11 @@
|
|
|
6
6
|
|
|
7
7
|
# Experience Kit for Styles
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[all_contributors_badge]: https://img.shields.io/badge/all_contributors-17-C08A00.svg ''
|
|
11
|
-
<!-- ALL-CONTRIBUTORS-BADGE:END -->
|
|
9
|
+
|
|
12
10
|
|
|
13
11
|
<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>
|
|
14
12
|
<img alt="NPM Last Update" src="https://img.shields.io/npm/last-update/%40coopdigital%2Fstyles?label=published&color=6762F9">
|
|
15
13
|
<img alt="NPM Downloads" src="https://img.shields.io/npm/d18m/%40coopdigital%2Fstyles?color=819C00">
|
|
16
|
-
[![All Contributors][all_contributors_badge]](#contributors)
|
|
17
14
|
|
|
18
15
|
> Styles for the Experience Library design system.
|
|
19
16
|
|
|
@@ -44,115 +41,6 @@ Projects that use SASS files directly are responsible for their own processing.
|
|
|
44
41
|
|
|
45
42
|
This package can be used alongside our [react components package](https://www.npmjs.com/package/@coopdigital/react).
|
|
46
43
|
|
|
47
|
-
## Contributors ✨
|
|
48
|
-
|
|
49
|
-
Thanks goes to these wonderful people:
|
|
50
|
-
|
|
51
|
-
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
|
|
52
|
-
<!-- prettier-ignore-start -->
|
|
53
|
-
<!-- markdownlint-disable -->
|
|
54
|
-
<table>
|
|
55
|
-
<tbody>
|
|
56
|
-
<tr>
|
|
57
|
-
<td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/aaronrleslie">
|
|
58
|
-
<div><img src="https://ca.slack-edge.com/T0C9E3ZF0-UKMP0F917-34a22da610d8-150" width="200px;" alt=""/></div>
|
|
59
|
-
<small>Aaron Leslie</small>
|
|
60
|
-
<div><a href="#infra-aaronrleslie" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></div>
|
|
61
|
-
</a></td>
|
|
62
|
-
<td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/catia.costa1">
|
|
63
|
-
<div><img src="https://gitlab.com/uploads/-/system/user/avatar/25728410/avatar.png" width="200px;" alt=""/></div>
|
|
64
|
-
<small>Catia Costa</small>
|
|
65
|
-
<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>
|
|
66
|
-
</a></td>
|
|
67
|
-
<td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/chris.latimer">
|
|
68
|
-
<div><img src="https://gitlab.com/uploads/-/system/user/avatar/10570471/avatar.png" width="200px;" alt=""/></div>
|
|
69
|
-
<small>Chris Latimer</small>
|
|
70
|
-
<div><a href="#infra-chris.latimer" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#code-chris.latimer" title="Code">💻</a></div>
|
|
71
|
-
</a></td>
|
|
72
|
-
<td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/craig.mckay">
|
|
73
|
-
<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
|
|
74
|
-
<small>Craig Mckay</small>
|
|
75
|
-
<div><a href="#projectManagement-craig.mckay" title="Project Management">📆</a></div>
|
|
76
|
-
</a></td>
|
|
77
|
-
<td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/daniel.lippross">
|
|
78
|
-
<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
|
|
79
|
-
<small>Daniel Lippross</small>
|
|
80
|
-
<div><a href="#platform-daniel.lippross" title="Packaging/porting to new platform">📦</a></div>
|
|
81
|
-
</a></td>
|
|
82
|
-
<td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/emalin.matthews">
|
|
83
|
-
<div><img src="https://ca.slack-edge.com/T0C9E3ZF0-UMGDXU8JH-ade541a7f09e-150" width="200px;" alt=""/></div>
|
|
84
|
-
<small>Emalin Matthews</small>
|
|
85
|
-
<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>
|
|
86
|
-
</a></td>
|
|
87
|
-
<td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/jelena.milosevic">
|
|
88
|
-
<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
|
|
89
|
-
<small>Jelena Milosevic</small>
|
|
90
|
-
<div><a href="#infra-jelena.milosevic" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></div>
|
|
91
|
-
</a></td>
|
|
92
|
-
</tr><br />
|
|
93
|
-
<tr>
|
|
94
|
-
<td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/kamini.pagare">
|
|
95
|
-
<div><img src="https://gitlab.com/uploads/-/system/user/avatar/23337489/avatar.png" width="200px;" alt=""/></div>
|
|
96
|
-
<small>Kamini Pagare</small>
|
|
97
|
-
<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>
|
|
98
|
-
</a></td>
|
|
99
|
-
<td align="center" valign="top" width="14.28%"><a href="">
|
|
100
|
-
<div><img src="https://ca.slack-edge.com/T0C9E3ZF0-U3AJ40BGS-ec515dc443cb-150" width="200px;" alt=""/></div>
|
|
101
|
-
<small>Lee Connolly</small>
|
|
102
|
-
<div><a href="#projectManagement-lee.connolly" title="Project Management">📆</a></div>
|
|
103
|
-
</a></td>
|
|
104
|
-
<td align="center" valign="top" width="14.28%"><a href="">
|
|
105
|
-
<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
|
|
106
|
-
<small>Liam Hall</small>
|
|
107
|
-
<div><a href="#projectManagement-liam.hall" title="Project Management">📆</a></div>
|
|
108
|
-
</a></td>
|
|
109
|
-
<td align="center" valign="top" width="14.28%"><a href="">
|
|
110
|
-
<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/meg.jpg" width="200px;" alt=""/></div>
|
|
111
|
-
<small>Meg White</small>
|
|
112
|
-
<div><a href="#projectManagement-meg.white" title="Project Management">📆</a></div>
|
|
113
|
-
</a></td>
|
|
114
|
-
<td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/omid.kashan">
|
|
115
|
-
<div><img src="https://secure.gravatar.com/avatar/faf90b70d749cf9460eb603fa1700add94fd7d3a32645b4be6fa12eb45c4ffa3?s=80&d=identicon" width="200px;" alt=""/></div>
|
|
116
|
-
<small>Omid Kashan</small>
|
|
117
|
-
<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>
|
|
118
|
-
</a></td>
|
|
119
|
-
<td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/phil.wolstenholme">
|
|
120
|
-
<div><img src="https://gitlab.com/uploads/-/system/user/avatar/25900363/avatar.png" width="200px;" alt=""/></div>
|
|
121
|
-
<small>Phil Wolstenholme</small>
|
|
122
|
-
<div><a href="#a11y-phil.wolstenholme" title="Accessibility">️️️️♿️</a></div>
|
|
123
|
-
</a></td>
|
|
124
|
-
<td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/romain.chen">
|
|
125
|
-
<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
|
|
126
|
-
<small>Romain Chen</small>
|
|
127
|
-
<div><a href="#design-romain.chen" title="Design">🎨</a></div>
|
|
128
|
-
</a></td>
|
|
129
|
-
</tr><br />
|
|
130
|
-
<tr>
|
|
131
|
-
<td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/sam.harden">
|
|
132
|
-
<div><img src="https://ca.slack-edge.com/T0C9E3ZF0-U03NT7D39L6-2fc82e7f7c6e-150" width="200px;" alt=""/></div>
|
|
133
|
-
<small>Sam Harden</small>
|
|
134
|
-
<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>
|
|
135
|
-
</a></td>
|
|
136
|
-
<td align="center" valign="top" width="14.28%"><a href="">
|
|
137
|
-
<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
|
|
138
|
-
<small>Shweta Jaju</small>
|
|
139
|
-
<div><a href="#userTesting-shweta.jaju" title="User Testing">📓</a></div>
|
|
140
|
-
</a></td>
|
|
141
|
-
<td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/theodore.kouzelis">
|
|
142
|
-
<div><img src="https://secure.gravatar.com/avatar/3988f940029d9053174ac68e7f5bfa8fd61f184872d46281f44e2e698711d37d?s=80&d=identicon" width="200px;" alt=""/></div>
|
|
143
|
-
<small>Theo Kouzelis</small>
|
|
144
|
-
<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>
|
|
145
|
-
</a></td>
|
|
146
|
-
</tr>
|
|
147
|
-
</tbody></table>
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
<!-- markdownlint-restore -->
|
|
151
|
-
<!-- prettier-ignore-end -->
|
|
152
|
-
|
|
153
|
-
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
|
154
|
-
|
|
155
|
-
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification.
|
|
156
44
|
|
|
157
45
|
## License
|
|
158
46
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.coop-button{--bg-color:var(--color-green);--bg-color-hover:var(--color-green-hover);--bg-color-active:var(--color-green-active);--shadow:0;--shadow-hover:0;--text-color:var(--color-white);--text-color-hover:var(--color-white);--padding-x:var(--spacing-20);--padding-y:var(--spacing-12);--type-size:var(--type-size-16);--min-height:var(--spacing-48);cursor:pointer;
|
|
1
|
+
@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.coop-button{--bg-color:var(--color-green);--bg-color-hover:var(--color-green-hover);--bg-color-active:var(--color-green-active);--shadow:0;--shadow-hover:0;--text-color:var(--color-white);--text-color-hover:var(--color-white);--padding-x:var(--spacing-20);--padding-y:var(--spacing-12);--type-size:var(--type-size-16);--min-height:var(--spacing-48);cursor:pointer;width:max-content;height:var(--min-height);margin-bottom:var(--spacing-8);padding:var(--padding-y)var(--padding-x);border-radius:var(--ui-border-radius-m);font-size:var(--type-size);font-weight:500;line-height:var(--type-line-height-default);color:var(--text-color);text-align:center;background:var(--bg-color);box-shadow:var(--shadow);border:0;outline:none;justify-content:center;align-items:center;gap:.5rem;-webkit-text-decoration:underline #0000;text-decoration:underline #0000;transition:background-color .15s ease-in-out,color .15s ease-in-out,text-decoration-color .15s ease-in-out;display:inline-flex}.coop-button[data-size=sm]{--padding-y:var(--spacing-8);--padding-x:var(--spacing-24);--min-height:var(--spacing-40)}.coop-button[data-size=lg]{--type-size:var(--type-size-18);--min-height:var(--spacing-52)}.coop-button[data-size=xl]{--type-size:var(--type-size-20);--min-height:var(--spacing-54)}.coop-button:focus{outline:2px solid var(--color-focus-ring);outline-offset:3px;transition:none}.coop-button:not([data-loading]):active{background:var(--bg-color-active)}.coop-button:not([data-loading],[aria-disabled]):hover{color:var(--text-color-hover);-webkit-text-decoration-color:var(--text-color-hover);text-decoration-color:var(--text-color-hover);background:var(--bg-color-hover);box-shadow:var(--shadow-hover)}.coop-button[data-width=full]{width:100%}.coop-button[data-loading]{cursor:wait;position:relative}.coop-button[data-loading] svg{width:1em;height:1em;animation:1.25s linear infinite spin}.coop-button>*{pointer-events:none}.coop-button[aria-disabled]{--bg-color:var(--color-grey-mid);--bg-color-active:var(--color-grey-mid);--bg-color-hover:var(--color-grey-mid);--text-color:var(--color-white);cursor:auto;outline:0}.coop-button[aria-disabled][data-variant*=ghost]{--bg-color:transparent;--bg-color-active:transparent;--bg-color-hover:transparent;--text-color:var(--color-grey-mid);--shadow:inset 0 0 0 2px var(--color-grey-mid)}@media (width>=48em){.coop-button{--padding-x:var(--spacing-40)}}.coop-button[data-variant=blue]:not([aria-disabled]){--bg-color:var(--color-blue);--bg-color-hover:var(--color-blue-hover);--bg-color-active:var(--color-blue-active);--text-color:var(--color-white);--text-color-hover:var(--color-white)}.coop-button[data-variant=white]:not([aria-disabled]){--bg-color:var(--color-white);--bg-color-hover:var(--color-white-hover);--bg-color-active:var(--color-white-active);--text-color:var(--color-black);--text-color-hover:var(--color-black)}.coop-button[data-variant=grey]:not([aria-disabled]){--bg-color:var(--color-grey);--bg-color-hover:var(--color-grey-hover);--bg-color-active:var(--color-grey-active);--text-color:var(--color-black);--text-color-hover:var(--color-black)}.coop-button[data-variant=green-ghost]:not([aria-disabled]){--bg-color:transparent;--bg-color-hover:transparent;--bg-color-active:transparent;--text-color:var(--color-green);--text-color-hover:var(--color-green-hover);--shadow:inset 0 0 0 2px var(--color-green);--shadow-hover:inset 0 0 0 2px var(--color-green-hover)}.coop-button[data-variant=blue-ghost]:not([aria-disabled]){--bg-color:transparent;--bg-color-hover:transparent;--bg-color-active:transparent;--text-color:var(--color-blue);--text-color-hover:var(--color-blue-hover);--shadow:inset 0 0 0 2px var(--color-blue);--shadow-hover:inset 0 0 0 2px var(--color-blue-hover)}.coop-button[data-variant=white-ghost]:not([aria-disabled]){--bg-color:transparent;--bg-color-hover:transparent;--bg-color-active:transparent;--text-color:var(--color-white);--text-color-hover:var(--color-white-hover);--shadow:inset 0 0 0 2px var(--color-white);--shadow-hover:inset 0 0 0 2px var(--color-white-hover)}.coop-button[data-variant=grey-ghost]:not([aria-disabled]){--bg-color:transparent;--bg-color-hover:transparent;--bg-color-active:transparent;--text-color:var(--color-grey);--text-color-hover:var(--color-grey-hover);--shadow:inset 0 0 0 2px var(--color-grey);--shadow-hover:inset 0 0 0 2px var(--color-grey-hover)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.coop-search-box{--padding-x:var(--spacing-16);--padding-y:var(--spacing-12);--type-size:var(--type-size-16);--border-color:var(--color-grey-neutral-cool);width:100%;font-size:var(--type-size);flex-direction:column;gap:.5rem;display:flex}.coop-search-box label{width:100%;font-size:var(--type-size-18);font-weight:var(--type-weight-demibold);display:block}.coop-search-box--inner{align-items:stretch;width:100%;display:inline-flex}.coop-search-box--inner:has(input:focus){border-radius:var(--ui-border-radius-m);outline:2px solid var(--color-focus-ring);outline-offset:3px;transition:none}.coop-search-box button{border-radius:0 var(--ui-border-radius-m)var(--ui-border-radius-m)0;margin:0;padding-left:1rem;padding-right:1rem}.coop-search-box button .coop-icon{width:1em;height:1em}.coop-search-box[data-size=sm]{--padding-y:var(--spacing-8);--padding-x:var(--spacing-12)}.coop-search-box[data-size=lg]{--type-size:var(--type-size-18)}.coop-search-box[data-size=xl]{--type-size:var(--type-size-20);min-height:3.5rem}.coop-search-box input{width:100%;min-width:80px;padding:var(--padding-y)var(--padding-x);border:2px solid var(--border-color);border-radius:var(--ui-border-radius-m)0 0 var(--ui-border-radius-m);border-right:0;outline:0}.coop-search-box input:focus{border-color:var(--color-grey-mid)}.coop-search-box[data-variant*=ghost] .coop-search-box--inner{border:2px solid var(--border-color);border-radius:var(--ui-border-radius-m)}.coop-search-box[data-variant*=ghost] input{border:0}.coop-search-box[data-variant*=ghost] button,.coop-search-box[data-variant*=ghost] button:hover{box-shadow:unset}@media (width>=48em){.coop-search-box button{--padding-x:var(--spacing-12)}}.coop-search-box[data-variant=green-ghost]{--border-color:var(--color-green)}.coop-search-box[data-variant=blue-ghost]{--border-color:var(--color-blue)}.coop-search-box[data-variant=white-ghost]{--border-color:var(--color-white)}.coop-search-box[data-variant=grey-ghost]{--border-color:var(--color-grey)}
|
|
1
|
+
.coop-search-box{--padding-x:var(--spacing-16);--padding-y:var(--spacing-12);--type-size:var(--type-size-16);--border-color:var(--color-grey-neutral-cool);width:100%;font-size:var(--type-size);flex-direction:column;gap:.5rem;display:flex}.coop-search-box label{width:100%;font-size:var(--type-size-18);font-weight:var(--type-weight-demibold);display:block}.coop-search-box--inner{align-items:stretch;width:100%;display:inline-flex}.coop-search-box--inner:has(input:focus){border-radius:var(--ui-border-radius-m);outline:2px solid var(--color-focus-ring);outline-offset:3px;transition:none}.coop-search-box button{border-radius:0 var(--ui-border-radius-m)var(--ui-border-radius-m)0;margin:0;padding-left:1rem;padding-right:1rem}.coop-search-box button .coop-icon{width:1em;height:1em}.coop-search-box[data-size=sm]{--padding-y:var(--spacing-8);--padding-x:var(--spacing-12)}.coop-search-box[data-size=lg]{--type-size:var(--type-size-18)}.coop-search-box[data-size=xl]{--type-size:var(--type-size-20);min-height:3.5rem}.coop-search-box input{width:100%;min-width:80px;padding:var(--padding-y)var(--padding-x);border:2px solid var(--border-color);border-radius:var(--ui-border-radius-m)0 0 var(--ui-border-radius-m);border-right:0;outline:0}.coop-search-box input:focus{border-color:var(--color-grey-mid)}.coop-search-box[data-variant*=ghost] .coop-search-box--inner{border:2px solid var(--border-color);border-radius:var(--ui-border-radius-m)}.coop-search-box[data-variant*=ghost] input{border:0}.coop-search-box[data-variant*=ghost] button,.coop-search-box[data-variant*=ghost] button:hover{box-shadow:unset}.coop-search-box[data-variant=white] input{border:0}@media (width>=48em){.coop-search-box button{--padding-x:var(--spacing-12)}}.coop-search-box[data-variant=green-ghost]{--border-color:var(--color-green)}.coop-search-box[data-variant=blue-ghost]{--border-color:var(--color-blue)}.coop-search-box[data-variant=white-ghost]{--border-color:var(--color-white)}.coop-search-box[data-variant=grey-ghost]{--border-color:var(--color-grey)}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coopdigital/styles",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.16.
|
|
4
|
+
"version": "0.16.4",
|
|
5
5
|
"private": false,
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"lightningcss": "^1.29.3",
|
|
36
36
|
"sass-embedded": "^1.87.0"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "7d7bc474a5da58c536c9579eec660106366f73ee"
|
|
39
39
|
}
|
|
@@ -79,7 +79,8 @@ $button-variants: (
|
|
|
79
79
|
align-items: center;
|
|
80
80
|
justify-content: center;
|
|
81
81
|
|
|
82
|
-
|
|
82
|
+
width: max-content;
|
|
83
|
+
height: var(--min-height);
|
|
83
84
|
margin-bottom: var(--spacing-8);
|
|
84
85
|
padding: var(--padding-y) var(--padding-x);
|
|
85
86
|
border: 0;
|