@coopdigital/styles 0.16.0 → 0.16.2

package/dist/components/Card.css

@@ -1 +1 @@
-.coop-card{--card-direction:column;--image-max-width:100%;--image-border-radius:var(--ui-border-radius-m)var(--ui-border-radius-m)0 0;--label-bg:none;--card-bg:var(--color-white);--badge-x:.5rem;--badge-y:.5rem;flex-direction:var(--card-direction);border-radius:var(--ui-border-radius-m);background:var(--card-bg);box-shadow:var(--ui-shadow);transition:box-shadow var(--ui-transition-hover);display:flex;position:relative}@media (width>=48em){.coop-card[data-layout=horizontal]{--card-direction:row;--image-max-width:calc(100%/3);--image-border-radius:var(--ui-border-radius-m)0 0 var(--ui-border-radius-m)}.coop-card[data-layout=horizontal][data-image-pos=right]{--card-direction:row-reverse;--image-border-radius:0 var(--ui-border-radius-m)var(--ui-border-radius-m)0}}.coop-card[data-badge-pos=popout]{--badge-x:-10px;--badge-y:-10px}.coop-card .coop-card--heading{font-size:var(--type-size-20);font-weight:var(--type-weight-demibold);margin:0}.coop-card picture{max-width:var(--image-max-width);border-radius:var(--image-border-radius);margin:0;overflow:hidden}.coop-card img{width:100%;height:100%}.coop-card p{margin:0}.coop-card--link{color:inherit;outline:0;text-decoration:none}.coop-card--link:before{content:"";border-radius:var(--ui-border-radius-m);position:absolute;inset:0}.coop-card--link:focus-within:before{outline:2px solid var(--color-focus-ring);outline-offset:3px}.coop-card--link:hover .coop-card--heading,.coop-card--link:focus .coop-card--heading{text-decoration:underline}.coop-card--content{gap:var(--spacing-6);flex-direction:column;display:flex}.coop-card--inner{gap:var(--spacing-12);width:100%;padding:var(--spacing-24);border-radius:var(--ui-border-radius-m);justify-content:space-between;align-items:flex-start;display:flex}.coop-card--icon{pointer-events:none;justify-content:flex-end;align-self:center;min-width:1rem;transition:transform .2s ease-out;display:flex}.coop-card--icon svg{height:1rem}.coop-card--badge{z-index:10;top:var(--badge-y);right:var(--badge-x);transition:transform .1s ease-out;position:absolute}.coop-card--label{background:var(--label-bg);width:fit-content;display:inline-block}.coop-card[data-label-bg] .coop-card--label{padding:var(--spacing-6)var(--spacing-12);border-radius:var(--ui-border-radius);font-weight:var(--type-weight-demibold)}.coop-card:hover,.coop-card:focus{box-shadow:var(--ui-shadow-hover)}.coop-card:hover .coop-card--icon,.coop-card:focus .coop-card--icon{transform:translate(.25rem)}.coop-card:hover .coop-card--badge,.coop-card:focus .coop-card--badge{transform:scale(1.05)}.coop-card[data-bg=purple]{--card-bg:var(--color-tint-purple)}.coop-card[data-bg=orange]{--card-bg:var(--color-tint-orange)}.coop-card[data-bg=pink]{--card-bg:var(--color-tint-pink)}.coop-card[data-bg=red]{--card-bg:var(--color-tint-red)}.coop-card[data-bg=green]{--card-bg:var(--color-tint-green)}.coop-card[data-bg=yellow]{--card-bg:var(--color-tint-yellow)}.coop-card[data-bg=lilac]{--card-bg:var(--color-tint-lilac)}.coop-card[data-bg=blue]{--card-bg:var(--color-tint-blue)}.coop-card[data-bg=brown]{--card-bg:var(--color-tint-brown)}.coop-card[data-bg=grey]{--card-bg:var(--color-tint-grey)}.coop-card[data-label-bg=green]{--label-bg:var(--color-light-green)}.coop-card[data-label-bg=orange]{--label-bg:var(--color-light-orange)}.coop-card[data-label-bg=pink]{--label-bg:var(--color-light-pink)}.coop-card[data-label-bg=red]{--label-bg:var(--color-light-red)}.coop-card[data-label-bg=purple]{--label-bg:var(--color-light-purple)}.coop-card[data-label-bg=blue]{--label-bg:var(--color-light-blue)}.coop-card[data-label-bg=lilac]{--label-bg:var(--color-light-lilac)}.coop-card[data-label-bg=yellow]{--label-bg:var(--color-light-yellow)}
+.coop-card{--card-direction:column;--image-max-width:100%;--image-border-radius:var(--ui-border-radius-m)var(--ui-border-radius-m)0 0;--label-bg:none;--card-bg:var(--color-white);--badge-x:.5rem;--badge-y:.5rem;flex-direction:var(--card-direction);border-radius:var(--ui-border-radius-m);box-shadow:var(--ui-shadow);transition:box-shadow var(--ui-transition-hover);display:flex;position:relative}@media (width>=48em){.coop-card[data-layout=horizontal]{--card-direction:row;--image-max-width:calc(100%/3);--image-border-radius:var(--ui-border-radius-m)0 0 var(--ui-border-radius-m)}.coop-card[data-layout=horizontal][data-image-pos=right]{--card-direction:row-reverse;--image-border-radius:0 var(--ui-border-radius-m)var(--ui-border-radius-m)0}}.coop-card[data-badge-pos=popout]{--badge-x:-10px;--badge-y:-10px}.coop-card .coop-card--heading{font-size:var(--type-size-20);font-weight:var(--type-weight-demibold);margin:0}.coop-card picture{max-width:var(--image-max-width);border-radius:var(--image-border-radius);margin:0;overflow:hidden}.coop-card img{width:100%;height:100%}.coop-card p{margin:0}.coop-card--link:is(a){color:inherit;outline:0;text-decoration:none}.coop-card--link:is(a):before{content:"";border-radius:var(--ui-border-radius-m);position:absolute;inset:0}.coop-card--link:is(a):focus-within:before{outline:2px solid var(--color-focus-ring);outline-offset:3px}.coop-card--link:is(a):hover .coop-card--heading,.coop-card--link:is(a):focus .coop-card--heading{text-decoration:underline}.coop-card--content{gap:var(--spacing-6);flex-direction:column;display:flex}.coop-card--inner{gap:var(--spacing-12);width:100%;padding:var(--spacing-24);border-radius:var(--ui-border-radius-m);justify-content:space-between;align-items:flex-start;display:flex}.coop-card--icon{pointer-events:none;justify-content:flex-end;align-self:center;min-width:1rem;transition:transform .2s ease-out;display:flex}.coop-card--icon svg{height:1rem}.coop-card--badge{z-index:10;top:var(--badge-y);right:var(--badge-x);transition:transform .1s ease-out;position:absolute}.coop-card--label{width:fit-content;display:inline-block}.coop-card--label[class*=bg-]{padding:var(--spacing-6)var(--spacing-12);border-radius:var(--ui-border-radius);font-weight:var(--type-weight-demibold)}.coop-card:hover,.coop-card:focus{box-shadow:var(--ui-shadow-hover)}.coop-card:hover .coop-card--icon,.coop-card:focus .coop-card--icon{transform:translate(.25rem)}.coop-card:hover .coop-card--badge,.coop-card:focus .coop-card--badge{transform:scale(1.05)}

package/dist/components/Expandable.css

@@ -1 +1 @@
-.coop-expandable{--background-colour:var(--color-grey-light);padding:var(--spacing-10)var(--spacing-16);border-radius:var(--ui-border-radius-m);font-size:var(--spacing-18);background-color:var(--background-colour);display:inline-block}.coop-expandable>summary{cursor:pointer;font-size:var(--type-size-20);font-weight:var(--type-weight-default);align-items:center;list-style:none;display:flex;position:relative}.coop-expandable>summary svg{margin:-1px 0 0 1rem;transition:transform .2s ease-out}.coop-expandable[open]{box-shadow:0 0 0 var(--spacing-10)var(--background-colour)}.coop-expandable[open] svg{transform:rotate(180deg)}.coop-expandable[open]>summary{margin-bottom:var(--spacing-10);font-weight:var(--type-weight-medium)}.coop-expandable[data-bg=purple]{--background-colour:var(--color-tint-purple)}.coop-expandable[data-bg=orange]{--background-colour:var(--color-tint-orange)}.coop-expandable[data-bg=pink]{--background-colour:var(--color-tint-pink)}.coop-expandable[data-bg=red]{--background-colour:var(--color-tint-red)}.coop-expandable[data-bg=green]{--background-colour:var(--color-tint-green)}.coop-expandable[data-bg=yellow]{--background-colour:var(--color-tint-yellow)}.coop-expandable[data-bg=lilac]{--background-colour:var(--color-tint-lilac)}.coop-expandable[data-bg=blue]{--background-colour:var(--color-tint-blue)}.coop-expandable[data-bg=white]{--background-colour:var(--color-white)}.coop-expandable[data-bg=brown]{--background-colour:var(--color-tint-brown)}.coop-expandable[data-bg=grey]{--background-colour:var(--color-tint-grey)}.coop-expandable[data-bg=transparent]{--background-colour:transparent}
+.coop-expandable{padding:var(--spacing-10)var(--spacing-16);border-radius:var(--ui-border-radius-m);font-size:var(--spacing-18);display:inline-block}.coop-expandable>summary{cursor:pointer;font-size:var(--type-size-20);font-weight:var(--type-weight-default);align-items:center;list-style:none;display:flex;position:relative}.coop-expandable>summary svg{margin:-1px 0 0 1rem;transition:transform .2s ease-out}.coop-expandable[open]{box-shadow:0 0 0 var(--spacing-10)var(--background-color)}.coop-expandable[open] svg{transform:rotate(180deg)}.coop-expandable[open]>summary{margin-bottom:var(--spacing-10);font-weight:var(--type-weight-medium)}

package/dist/components/Pill.css

@@ -1 +1 @@
-.coop-pill{--type-size-badge:var(--type-size-10);--type-size-pill:var(--type-size-16);padding:var(--spacing-12)var(--spacing-20);border-radius:var(--ui-border-radius-xl);font-size:var(--type-size-pill);line-height:var(--type-line-height-default);color:var(--color-text);background-color:var(--color-blue-light-10);text-decoration:none;display:inline-block}.coop-pill[data-badge]{position:relative}.coop-pill[data-badge]:after{content:attr(data-badge);top:0;right:var(--spacing-12);padding:var(--spacing-2)var(--spacing-6);border-radius:var(--ui-border-radius-m);font-size:var(--type-size-badge);font-weight:600;line-height:var(--type-line-height);color:var(--color-white);text-transform:uppercase;position:absolute;transform:translateY(-50%)}.coop-pill[data-size=sm]{--type-size-pill:var(--type-size-14)}.coop-pill[data-size=lg]{--type-size-pill:var(--type-size-18);--type-size-badge:var(--type-size-12)}.coop-pill[data-size=xl]{--type-size-pill:var(--type-size-20);--type-size-badge:var(--type-size-12);padding:var(--spacing-14)var(--spacing-24)}.coop-pill[data-badge-color=green]:after{background-color:var(--color-dark-green)}.coop-pill[data-badge-color=orange]:after{background-color:var(--color-dark-orange)}.coop-pill[data-badge-color=pink]:after{background-color:var(--color-dark-pink)}.coop-pill[data-badge-color=red]:after{background-color:var(--color-red-dark-4)}.coop-pill[data-pill-color=blue]{background-color:var(--color-blue-light-10)}.coop-pill[data-pill-color=pink]{background-color:var(--color-alt-light-pink)}.coop-pill+.coop-pill{margin-bottom:var(--spacing-16);margin-left:var(--spacing-16)}a.coop-pill:focus,a.coop-pill:hover{color:var(--color-text);text-decoration:underline}
+.coop-pill{--type-size-badge:var(--type-size-10);--type-size-pill:var(--type-size-16);padding:var(--spacing-12)var(--spacing-20);border-radius:var(--ui-border-radius-xl);font-size:var(--type-size-pill);line-height:var(--type-line-height-default);color:var(--color-text);text-decoration:none;display:inline-block;position:relative}.coop-pill .coop-pill--badge{top:0;right:var(--spacing-12);padding:var(--spacing-2)var(--spacing-6);border-radius:var(--ui-border-radius-m);font-size:var(--type-size-badge);font-weight:600;line-height:var(--type-line-height);color:var(--color-white);text-transform:uppercase;position:absolute;transform:translateY(-50%)}.coop-pill[data-size=sm]{--type-size-pill:var(--type-size-14)}.coop-pill[data-size=lg]{--type-size-pill:var(--type-size-18);--type-size-badge:var(--type-size-12)}.coop-pill[data-size=xl]{--type-size-pill:var(--type-size-20);--type-size-badge:var(--type-size-12);padding:var(--spacing-14)var(--spacing-24)}.coop-pill+.coop-pill{margin-bottom:var(--spacing-16);margin-left:var(--spacing-16)}a.coop-pill:focus,a.coop-pill:hover{text-decoration:underline}

package/dist/components/Squircle.css

@@ -1 +1 @@
-.coop-squircle{aspect-ratio:1;width:100px;color:var(--color-white);background:var(--color-red-dark-4);clip-path:url(#squircle);justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:relative}.coop-squircle figcaption{flex-direction:column;justify-content:center;align-items:center;gap:.5rem;display:flex}.coop-squircle figcaption span{line-height:.9}.coop-squircle--label-small{font-size:var(--type-size-18)}.coop-squircle--label-large{font-size:var(--type-size-36);font-weight:var(--type-weight-demibold);letter-spacing:-2px}
+.coop-squircle{--size:100px;aspect-ratio:1;width:var(--size);color:var(--color-white);clip-path:url(#squircle);justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:relative;overflow:hidden}.coop-squircle[data-size=sm]{--size:32px}.coop-squircle[data-size=md]{--size:50px}.coop-squircle figcaption{flex-direction:column;justify-content:center;align-items:center;gap:.5rem;display:flex}.coop-squircle figcaption span{line-height:.9}.coop-squircle--label-small{font-size:var(--type-size-18)}.coop-squircle--label-large{font-size:var(--type-size-36);font-weight:var(--type-weight-demibold);letter-spacing:-2px}

package/dist/components/Tag.css

@@ -1 +1 @@
-.coop-tag{padding:var(--spacing-4)var(--spacing-16);border-radius:var(--ui-border-radius-xxl);font-size:var(--type-size-16);font-weight:var(--type-weight-medium);line-height:var(--type-line-height-default);color:var(--color-text);white-space:nowrap;background-color:var(--color-grey-neutral-warm);text-decoration:none;display:inline-block}.coop-tag[data-tag-color=white]{background-color:var(--color-white)}.coop-tag[data-tag-color=purple]{background-color:var(--color-tint-purple)}.coop-tag[data-tag-color=orange]{background-color:var(--color-tint-orange)}.coop-tag[data-tag-color=pink]{background-color:var(--color-tint-pink)}.coop-tag[data-tag-color=red]{background-color:var(--color-tint-red)}.coop-tag[data-tag-color=green]{background-color:var(--color-tint-green)}.coop-tag[data-tag-color=yellow]{background-color:var(--color-tint-yellow)}.coop-tag[data-tag-color=lilac]{background-color:var(--color-tint-lilac)}.coop-tag[data-tag-color=blue]{background-color:var(--color-tint-blue)}.coop-tag[data-tag-color=brown]{background-color:var(--color-tint-brown)}.coop-tag[data-tag-color=grey]{background-color:var(--color-tint-grey)}a.coop-tag:focus,a.coop-tag:hover{color:var(--color-text);text-decoration:underline}
+.coop-tag{padding:var(--spacing-4)var(--spacing-16);border-radius:var(--ui-border-radius-xxl);font-size:var(--type-size-16);font-weight:var(--type-weight-medium);line-height:var(--type-line-height-default);white-space:nowrap;text-decoration:none;display:inline-block}a.coop-tag:focus,a.coop-tag:hover{text-decoration:underline}

package/dist/main.css

@@ -1 +1 @@
-@import "https://cdn.fonts.net/t/1.css?apiType=css&projectid=d984f56e-f9bd-4c14-bb29-2558d7ff893e";: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-tint-grey:#f3f3f3;--color-tint-brown:#f5f5f0;--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-green:#0f8482;--color-green-hover:#1c6b6a;--color-green-active:#124948;--color-blue:#005878;--color-blue-hover:#003e55;--color-blue-active:#001f2b;--color-grey:#efefef;--color-grey-hover:#d8d8d8;--color-grey-active:#c4c4c4;--color-white-hover:var(--color-grey);--color-white-active:#d8d8d8;--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;--ui-border-radius-xxl:120px;--ui-text-underline-offset:3px;--spacing-64:4rem;--spacing-58:3.625rem;--spacing-54:3.375rem;--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-36:2.25rem;--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;--type-line-height-loose:1.75}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}html,body{font-family:Avenir Next,sans-serif;font-size:var(--type-size-default);color:var(--color-text)}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;line-height:var(--type-line-height);border:0;margin:0;padding:0}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}h1,h2,h3,h4,h5,h6,ul,ol,p,address{margin-top:0}input,button,textarea,select{font-family:inherit;font-size:inherit}button,input,label{line-height:1.1}a,button{text-underline-offset:var(--ui-text-underline-offset)}a:not([class]){-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}img[data-crop],picture[data-crop]{object-fit:cover}img[data-crop=square],picture[data-crop=square]{aspect-ratio:1}img[data-crop=wide],picture[data-crop=wide]{aspect-ratio:16/9}:target{scroll-margin-block:5ex}.sr-only:not(:focus,:active){white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}@font-face{font-family:Avenir-Next;font-weight:400;font-display:swap;src:url(https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextRegular_normal_normal.woff2)format("woff2"),url(https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextRegular_normal_normal.woff)format("woff")}@font-face{font-family:Avenir-Next;font-weight:500;font-display:swap;src:url(https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextMedium_normal_normal.woff2)format("woff2"),url(https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextMedium_normal_normal.woff)format("woff")}@font-face{font-family:Avenir-Next;font-weight:600;font-display:swap;src:url(https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextDemi_normal_normal.woff2)format("woff2"),url(https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextDemi_normal_normal.woff)format("woff")}@font-face{font-family:Co-opHeadline;font-weight:700;font-display:swap;src:url(https://coop-fonts.s3.eu-west-1.amazonaws.com/Co-opHeadline/Co-opHeadline-Bold.woff2)format("woff2"),url(https://coop-fonts.s3.eu-west-1.amazonaws.com/Co-opHeadline/Co-opHeadline-Bold.woff)format("woff")}.coop-link{color:var(--color-link);text-decoration:underline}.coop-link:hover{color:var(--color-link-hover)}.coop-link:active,.coop-link:focus{outline:2px solid var(--color-focus-ring);outline-offset:3px;transition:none}button.coop-link{cursor:pointer;text-align:inherit;appearance:none;background:0 0;border:0;border-radius:0;margin:0;padding:0;display:inline}p,ul,ol{margin-bottom:var(--spacing-16)}@media (width>=48em){p,ul,ol{margin-bottom:var(--spacing-18)}}ul,ol{padding-left:var(--spacing-24)}h1.coop-t-mega{margin-bottom:var(--spacing-8);font-size:var(--type-size-48)}@media (width>=48em){h1.coop-t-mega{margin-bottom:var(--spacing-16);font-size:var(--type-size-56)}}h1{margin-bottom:var(--spacing-8);font-size:var(--type-size-30)}@media (width>=48em){h1{margin-bottom:var(--spacing-16);font-size:var(--type-size-46)}}h2{margin-bottom:var(--spacing-8);font-size:var(--type-size-26)}@media (width>=48em){h2{margin-bottom:var(--spacing-16);font-size:var(--type-size-32)}}h3{margin-bottom:var(--spacing-8);font-size:var(--type-size-26)}@media (width>=48em){h3{margin-bottom:var(--spacing-16);font-size:var(--type-size-26)}}h4,h5,h6{margin-bottom:var(--spacing-8);font-size:var(--type-size-18)}@media (width>=48em){h4,h5,h6{margin-bottom:var(--spacing-16);font-size:var(--type-size-22)}}.coop-t-headline{font-family:var(--font-family-headline);line-height:105%}.coop-t-headline-blue{color:var(--color-brand-coop)}.coop-t-headline-upper{font-family:var(--font-family-headline);text-transform:uppercase;line-height:100%}h1.coop-t-headline-mega{font-family:var(--font-family-headline);font-size:var(--type-size-48);color:var(--color-brand-coop)}@media (width>=37.5em){h1.coop-t-headline-mega{font-size:var(--type-size-64)}}@media (width>=48em){h1.coop-t-headline-mega{font-size:var(--type-size-82)}}h1.coop-t-headline{font-size:var(--type-size-40);color:var(--color-brand-coop)}@media (width>=37.5em){h1.coop-t-headline{font-size:var(--type-size-48)}}@media (width>=48em){h1.coop-t-headline{font-size:var(--type-size-64)}}.coop-t-lead-p{margin-bottom:var(--spacing-16);font-size:var(--type-size-22)}@media (width>=48em){.coop-t-lead-p{font-size:var(--type-size-26)}}hr{height:0;margin:var(--spacing-16)0;border-color:var(--color-grey-mid);color:var(--color-grey-mid);border-style:solid;border-width:0 0 1px;display:block}@media (width>=48em){hr{margin:var(--spacing-32)0}}.grayscale{filter:grayscale()}
+@import "https://cdn.fonts.net/t/1.css?apiType=css&projectid=d984f56e-f9bd-4c14-bb29-2558d7ff893e";: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-navy:#003057;--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-tint-grey:#f3f3f3;--color-tint-brown:#f5f5f0;--color-grey-dark:#333;--color-grey-mid-dark:#6e6e6e;--color-grey-mid:#c4c4c4;--color-grey-mid-light:#d8d8d8;--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-dark-blue:#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-green:#0f8482;--color-green-hover:#1c6b6a;--color-green-active:#124948;--color-blue:#005878;--color-blue-hover:#003e55;--color-blue-active:#001f2b;--color-grey:#efefef;--color-grey-hover:#d8d8d8;--color-grey-active:#c4c4c4;--color-white-hover:var(--color-grey);--color-white-active:#d8d8d8;--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;--ui-border-radius-xxl:120px;--ui-text-underline-offset:3px;--spacing-64:4rem;--spacing-58:3.625rem;--spacing-54:3.375rem;--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-36:2.25rem;--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;--type-line-height-loose:1.75}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}html,body{font-family:Avenir Next,sans-serif;font-size:var(--type-size-default);color:var(--color-text)}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;line-height:var(--type-line-height);border:0;margin:0;padding:0}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}h1,h2,h3,h4,h5,h6,ul,ol,p,address{margin-top:0}input,button,textarea,select{font-family:inherit;font-size:inherit}button,input,label{line-height:1.1}a,button{text-underline-offset:var(--ui-text-underline-offset)}a:not([class]){-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}img[data-crop],picture[data-crop]{object-fit:cover}img[data-crop=square],picture[data-crop=square]{aspect-ratio:1}img[data-crop=wide],picture[data-crop=wide]{aspect-ratio:16/9}:target{scroll-margin-block:5ex}.sr-only:not(:focus,:active){white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}@font-face{font-family:Avenir-Next;font-weight:400;font-display:swap;src:url(https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextRegular_normal_normal.woff2)format("woff2"),url(https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextRegular_normal_normal.woff)format("woff")}@font-face{font-family:Avenir-Next;font-weight:500;font-display:swap;src:url(https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextMedium_normal_normal.woff2)format("woff2"),url(https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextMedium_normal_normal.woff)format("woff")}@font-face{font-family:Avenir-Next;font-weight:600;font-display:swap;src:url(https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextDemi_normal_normal.woff2)format("woff2"),url(https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextDemi_normal_normal.woff)format("woff")}@font-face{font-family:Co-opHeadline;font-weight:700;font-display:swap;src:url(https://coop-fonts.s3.eu-west-1.amazonaws.com/Co-opHeadline/Co-opHeadline-Bold.woff2)format("woff2"),url(https://coop-fonts.s3.eu-west-1.amazonaws.com/Co-opHeadline/Co-opHeadline-Bold.woff)format("woff")}.coop-link{color:var(--color-link);text-decoration:underline}.coop-link:hover{color:var(--color-link-hover)}.coop-link:active,.coop-link:focus{outline:2px solid var(--color-focus-ring);outline-offset:3px;transition:none}button.coop-link{cursor:pointer;text-align:inherit;appearance:none;background:0 0;border:0;border-radius:0;margin:0;padding:0;display:inline}p,ul,ol{margin-bottom:var(--spacing-16)}@media (width>=48em){p,ul,ol{margin-bottom:var(--spacing-18)}}ul,ol{padding-left:var(--spacing-24)}h1.coop-t-mega{margin-bottom:var(--spacing-8);font-size:var(--type-size-48)}@media (width>=48em){h1.coop-t-mega{margin-bottom:var(--spacing-16);font-size:var(--type-size-56)}}h1{margin-bottom:var(--spacing-8);font-size:var(--type-size-30)}@media (width>=48em){h1{margin-bottom:var(--spacing-16);font-size:var(--type-size-46)}}h2{margin-bottom:var(--spacing-8);font-size:var(--type-size-26)}@media (width>=48em){h2{margin-bottom:var(--spacing-16);font-size:var(--type-size-32)}}h3{margin-bottom:var(--spacing-8);font-size:var(--type-size-26)}@media (width>=48em){h3{margin-bottom:var(--spacing-16);font-size:var(--type-size-26)}}h4,h5,h6{margin-bottom:var(--spacing-8);font-size:var(--type-size-18)}@media (width>=48em){h4,h5,h6{margin-bottom:var(--spacing-16);font-size:var(--type-size-22)}}.coop-t-headline{font-family:var(--font-family-headline);line-height:105%}.coop-t-headline-blue{color:var(--color-brand-coop)}.coop-t-headline-upper{font-family:var(--font-family-headline);text-transform:uppercase;line-height:100%}h1.coop-t-headline-mega{font-family:var(--font-family-headline);font-size:var(--type-size-48);color:var(--color-brand-coop)}@media (width>=37.5em){h1.coop-t-headline-mega{font-size:var(--type-size-64)}}@media (width>=48em){h1.coop-t-headline-mega{font-size:var(--type-size-82)}}h1.coop-t-headline{font-size:var(--type-size-40);color:var(--color-brand-coop)}@media (width>=37.5em){h1.coop-t-headline{font-size:var(--type-size-48)}}@media (width>=48em){h1.coop-t-headline{font-size:var(--type-size-64)}}.coop-t-lead-p{margin-bottom:var(--spacing-16);font-size:var(--type-size-22)}@media (width>=48em){.coop-t-lead-p{font-size:var(--type-size-26)}}hr{height:0;margin:var(--spacing-16)0;border-color:var(--color-grey-mid);color:var(--color-grey-mid);border-style:solid;border-width:0 0 1px;display:block}@media (width>=48em){hr{margin:var(--spacing-32)0}}.grayscale{filter:grayscale()}.bg-dark-green{background:var(--color-dark-green)}.bg-dark-orange{background:var(--color-dark-orange)}.bg-dark-pink{background:var(--color-dark-pink)}.bg-dark-red{background:var(--color-dark-red)}.bg-dark-purple{background:var(--color-dark-purple)}.bg-dark-blue{background:var(--color-dark-blue)}.bg-dark-lilac{background:var(--color-dark-lilac)}.bg-dark-yellow{background:var(--color-dark-yellow)}.bg-tint-purple{background:var(--color-tint-purple)}.bg-tint-orange{background:var(--color-tint-orange)}.bg-tint-pink{background:var(--color-tint-pink)}.bg-tint-red{background:var(--color-tint-red)}.bg-tint-green{background:var(--color-tint-green)}.bg-tint-yellow{background:var(--color-tint-yellow)}.bg-tint-lilac{background:var(--color-tint-lilac)}.bg-tint-blue{background:var(--color-tint-blue)}.bg-tint-brown{background:var(--color-tint-brown)}.bg-tint-grey{background:var(--color-tint-grey)}.bg-light-green{background:var(--color-light-green)}.bg-light-orange{background:var(--color-light-orange)}.bg-light-pink{background:var(--color-light-pink)}.bg-light-red{background:var(--color-light-red)}.bg-light-purple{background:var(--color-light-purple)}.bg-light-blue{background:var(--color-light-blue)}.bg-light-lilac{background:var(--color-light-lilac)}.bg-light-yellow{background:var(--color-light-yellow)}.bg-dark-grey{background:var(--color-grey-dark)}.bg-mid-dark-grey{background:var(--color-grey-mid-dark)}.bg-mid-grey{background:var(--color-grey-mid)}.bg-mid-light-grey{background:var(--color-grey-mid-light)}.bg-light-grey{background:var(--color-grey-light)}.bg-coop-blue{background:var(--color-brand-coop)}.bg-offers-red{background:var(--color-deal-red)}.bg-white{background:var(--color-white)}.bg-black{background:var(--color-black)}.bg-blue{background:var(---color-blue)}.bg-green{background:var(--color-green)}.bg-none{background:0 0}[class*=bg-dark],[class*=bg-mid-dark],.bg-offers-red,.bg-black,.bg-blue,.bg-green,.bg-coop-blue{color:var(--color-white)}[class*=bg-light],[class*=bg-tint],[class*=bg-mid-light],.bg-mid-grey,.bg-white,.bg-none{color:var(--color-text)}

package/dist/utilities/bg-colors.css

@@ -0,0 +1 @@
+.bg-dark-green{background:var(--color-dark-green)}.bg-dark-orange{background:var(--color-dark-orange)}.bg-dark-pink{background:var(--color-dark-pink)}.bg-dark-red{background:var(--color-dark-red)}.bg-dark-purple{background:var(--color-dark-purple)}.bg-dark-blue{background:var(--color-dark-blue)}.bg-dark-lilac{background:var(--color-dark-lilac)}.bg-dark-yellow{background:var(--color-dark-yellow)}.bg-tint-purple{background:var(--color-tint-purple)}.bg-tint-orange{background:var(--color-tint-orange)}.bg-tint-pink{background:var(--color-tint-pink)}.bg-tint-red{background:var(--color-tint-red)}.bg-tint-green{background:var(--color-tint-green)}.bg-tint-yellow{background:var(--color-tint-yellow)}.bg-tint-lilac{background:var(--color-tint-lilac)}.bg-tint-blue{background:var(--color-tint-blue)}.bg-tint-brown{background:var(--color-tint-brown)}.bg-tint-grey{background:var(--color-tint-grey)}.bg-light-green{background:var(--color-light-green)}.bg-light-orange{background:var(--color-light-orange)}.bg-light-pink{background:var(--color-light-pink)}.bg-light-red{background:var(--color-light-red)}.bg-light-purple{background:var(--color-light-purple)}.bg-light-blue{background:var(--color-light-blue)}.bg-light-lilac{background:var(--color-light-lilac)}.bg-light-yellow{background:var(--color-light-yellow)}.bg-dark-grey{background:var(--color-grey-dark)}.bg-mid-dark-grey{background:var(--color-grey-mid-dark)}.bg-mid-grey{background:var(--color-grey-mid)}.bg-mid-light-grey{background:var(--color-grey-mid-light)}.bg-light-grey{background:var(--color-grey-light)}.bg-coop-blue{background:var(--color-brand-coop)}.bg-offers-red{background:var(--color-deal-red)}.bg-white{background:var(--color-white)}.bg-black{background:var(--color-black)}.bg-blue{background:var(---color-blue)}.bg-green{background:var(--color-green)}.bg-none{background:0 0}[class*=bg-dark],[class*=bg-mid-dark],.bg-offers-red,.bg-black,.bg-blue,.bg-green,.bg-coop-blue{color:var(--color-white)}[class*=bg-light],[class*=bg-tint],[class*=bg-mid-light],.bg-mid-grey,.bg-white,.bg-none{color:var(--color-text)}

package/dist/utilities.css

@@ -0,0 +1 @@
+.bg-dark-green{background:var(--color-dark-green)}.bg-dark-orange{background:var(--color-dark-orange)}.bg-dark-pink{background:var(--color-dark-pink)}.bg-dark-red{background:var(--color-dark-red)}.bg-dark-purple{background:var(--color-dark-purple)}.bg-dark-blue{background:var(--color-dark-blue)}.bg-dark-lilac{background:var(--color-dark-lilac)}.bg-dark-yellow{background:var(--color-dark-yellow)}.bg-tint-purple{background:var(--color-tint-purple)}.bg-tint-orange{background:var(--color-tint-orange)}.bg-tint-pink{background:var(--color-tint-pink)}.bg-tint-red{background:var(--color-tint-red)}.bg-tint-green{background:var(--color-tint-green)}.bg-tint-yellow{background:var(--color-tint-yellow)}.bg-tint-lilac{background:var(--color-tint-lilac)}.bg-tint-blue{background:var(--color-tint-blue)}.bg-tint-brown{background:var(--color-tint-brown)}.bg-tint-grey{background:var(--color-tint-grey)}.bg-light-green{background:var(--color-light-green)}.bg-light-orange{background:var(--color-light-orange)}.bg-light-pink{background:var(--color-light-pink)}.bg-light-red{background:var(--color-light-red)}.bg-light-purple{background:var(--color-light-purple)}.bg-light-blue{background:var(--color-light-blue)}.bg-light-lilac{background:var(--color-light-lilac)}.bg-light-yellow{background:var(--color-light-yellow)}.bg-dark-grey{background:var(--color-grey-dark)}.bg-mid-dark-grey{background:var(--color-grey-mid-dark)}.bg-mid-grey{background:var(--color-grey-mid)}.bg-mid-light-grey{background:var(--color-grey-mid-light)}.bg-light-grey{background:var(--color-grey-light)}.bg-coop-blue{background:var(--color-brand-coop)}.bg-offers-red{background:var(--color-deal-red)}.bg-white{background:var(--color-white)}.bg-black{background:var(--color-black)}.bg-blue{background:var(---color-blue)}.bg-green{background:var(--color-green)}.bg-none{background:0 0}[class*=bg-dark],[class*=bg-mid-dark],.bg-offers-red,.bg-black,.bg-blue,.bg-green,.bg-coop-blue{color:var(--color-white)}[class*=bg-light],[class*=bg-tint],[class*=bg-mid-light],.bg-mid-grey,.bg-white,.bg-none{color:var(--color-text)}

package/dist/vars.css

@@ -1 +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-tint-grey:#f3f3f3;--color-tint-brown:#f5f5f0;--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-green:#0f8482;--color-green-hover:#1c6b6a;--color-green-active:#124948;--color-blue:#005878;--color-blue-hover:#003e55;--color-blue-active:#001f2b;--color-grey:#efefef;--color-grey-hover:#d8d8d8;--color-grey-active:#c4c4c4;--color-white-hover:var(--color-grey);--color-white-active:#d8d8d8;--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;--ui-border-radius-xxl:120px;--ui-text-underline-offset:3px;--spacing-64:4rem;--spacing-58:3.625rem;--spacing-54:3.375rem;--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-36:2.25rem;--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;--type-line-height-loose:1.75}
+: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-navy:#003057;--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-tint-grey:#f3f3f3;--color-tint-brown:#f5f5f0;--color-grey-dark:#333;--color-grey-mid-dark:#6e6e6e;--color-grey-mid:#c4c4c4;--color-grey-mid-light:#d8d8d8;--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-dark-blue:#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-green:#0f8482;--color-green-hover:#1c6b6a;--color-green-active:#124948;--color-blue:#005878;--color-blue-hover:#003e55;--color-blue-active:#001f2b;--color-grey:#efefef;--color-grey-hover:#d8d8d8;--color-grey-active:#c4c4c4;--color-white-hover:var(--color-grey);--color-white-active:#d8d8d8;--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;--ui-border-radius-xxl:120px;--ui-text-underline-offset:3px;--spacing-64:4rem;--spacing-58:3.625rem;--spacing-54:3.375rem;--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-36:2.25rem;--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;--type-line-height-loose:1.75}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/styles",
   "type": "module",
-  "version": "0.16.0",
+  "version": "0.16.2",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -35,5 +35,5 @@
     "lightningcss": "^1.29.3",
     "sass-embedded": "^1.87.0"
   },
-  "gitHead": "c3b9ce837060a373926286d2a770796f75f8c168"
+  "gitHead": "b4d3393b2a29e9bffb2b80ee443266106e8f91db"
 }

package/src/components/Card.scss

@@ -1,29 +1,6 @@
 @use "../breakpoints.scss" as *;
 
 .coop-card {
-  $bg-colors: (
-    "purple": var(--color-tint-purple),
-    "orange": var(--color-tint-orange),
-    "pink": var(--color-tint-pink),
-    "red": var(--color-tint-red),
-    "green": var(--color-tint-green),
-    "yellow": var(--color-tint-yellow),
-    "lilac": var(--color-tint-lilac),
-    "blue": var(--color-tint-blue),
-    "brown": var(--color-tint-brown),
-    "grey": var(--color-tint-grey),
-  );
-  $label-bg-colors: (
-    "green": var(--color-light-green),
-    "orange": var(--color-light-orange),
-    "pink": var(--color-light-pink),
-    "red": var(--color-light-red),
-    "purple": var(--color-light-purple),
-    "blue": var(--color-light-blue),
-    "lilac": var(--color-light-lilac),
-    "yellow": var(--color-light-yellow),
-  );
-
   --card-direction: column;
   --image-max-width: 100%;
   --image-border-radius: var(--ui-border-radius-m) var(--ui-border-radius-m) 0 0;
@@ -39,7 +16,6 @@
 
   border-radius: var(--ui-border-radius-m);
 
-  background: var(--card-bg);
   box-shadow: var(--ui-shadow);
 
   transition: box-shadow var(--ui-transition-hover);
@@ -86,7 +62,7 @@
     margin: 0;
   }
 
-  &--link {
+  &--link:is(a) {
     color: inherit;
     text-decoration: none;
     outline: 0;
@@ -156,13 +132,12 @@
   &--label {
     display: inline-block;
     width: fit-content;
-    background: var(--label-bg);
-  }
 
-  &[data-label-bg] &--label {
-    padding: var(--spacing-6) var(--spacing-12);
-    border-radius: var(--ui-border-radius);
-    font-weight: var(--type-weight-demibold);
+    &[class*="bg-"] {
+      padding: var(--spacing-6) var(--spacing-12);
+      border-radius: var(--ui-border-radius);
+      font-weight: var(--type-weight-demibold);
+    }
   }
 
   &:hover,
@@ -177,16 +152,4 @@
       transform: scale(1.05);
     }
   }
-
-  @each $key, $bg-color in $bg-colors {
-    &[data-bg="#{$key}"] {
-      --card-bg: #{$bg-color};
-    }
-  }
-
-  @each $key, $label-bg-color in $label-bg-colors {
-    &[data-label-bg="#{$key}"] {
-      --label-bg: #{$label-bg-color};
-    }
-  }
 }

package/src/components/Expandable.scss

@@ -1,29 +1,9 @@
 .coop-expandable {
-  $bg-colors: (
-    "purple": var(--color-tint-purple),
-    "orange": var(--color-tint-orange),
-    "pink": var(--color-tint-pink),
-    "red": var(--color-tint-red),
-    "green": var(--color-tint-green),
-    "yellow": var(--color-tint-yellow),
-    "lilac": var(--color-tint-lilac),
-    "blue": var(--color-tint-blue),
-    "white": var(--color-white),
-    "brown": var(--color-tint-brown),
-    "grey": var(--color-tint-grey),
-    "transparent": "transparent",
-  );
-  --background-colour: var(--color-grey-light);
-
   display: inline-block;
-
   padding: var(--spacing-10) var(--spacing-16);
   border-radius: var(--ui-border-radius-m);
-
   font-size: var(--spacing-18);
 
-  background-color: var(--background-colour);
-
   & > summary {
     cursor: pointer;
 
@@ -43,7 +23,7 @@
   }
 
   &[open] {
-    box-shadow: 0 0 0 var(--spacing-10) var(--background-colour);
+    box-shadow: 0 0 0 var(--spacing-10) var(--background-color);
 
     svg {
       transform: rotate(180deg);
@@ -54,10 +34,4 @@
       font-weight: var(--type-weight-medium);
     }
   }
-
-  @each $key, $bg-color in $bg-colors {
-    &[data-bg="#{$key}"] {
-      --background-colour: #{$bg-color};
-    }
-  }
 }

package/src/components/Pill.scss

@@ -1,18 +1,9 @@
 .coop-pill {
-  $badge-colors: (
-    "green": var(--color-dark-green),
-    "orange": var(--color-dark-orange),
-    "pink": var(--color-dark-pink),
-    "red": var(--color-red-dark-4),
-  );
-  $pill-colors: (
-    "blue": var(--color-blue-light-10),
-    "pink": var(--color-alt-light-pink),
-  );
-
   --type-size-badge: var(--type-size-10);
   --type-size-pill: var(--type-size-16);
 
+  position: relative;
+
   display: inline-block;
 
   padding: var(--spacing-12) var(--spacing-20);
@@ -23,28 +14,20 @@
   color: var(--color-text);
   text-decoration: none;
 
-  background-color: var(--color-blue-light-10);
-
-  &[data-badge] {
-    position: relative;
-
-    &::after {
-      content: attr(data-badge);
-
-      position: absolute;
-      top: 0;
-      right: var(--spacing-12);
-      transform: translateY(-50%);
+  .coop-pill--badge {
+    position: absolute;
+    top: 0;
+    right: var(--spacing-12);
+    transform: translateY(-50%);
 
-      padding: var(--spacing-2) var(--spacing-6);
-      border-radius: var(--ui-border-radius-m);
+    padding: var(--spacing-2) var(--spacing-6);
+    border-radius: var(--ui-border-radius-m);
 
-      font-size: var(--type-size-badge);
-      font-weight: 600;
-      line-height: var(--type-line-height);
-      color: var(--color-white);
-      text-transform: uppercase;
-    }
+    font-size: var(--type-size-badge);
+    font-weight: 600;
+    line-height: var(--type-line-height);
+    color: var(--color-white);
+    text-transform: uppercase;
   }
 
   &[data-size="sm"] {
@@ -63,18 +46,6 @@
     padding: var(--spacing-14) var(--spacing-24);
   }
 
-  @each $key, $badge-color in $badge-colors {
-    &[data-badge-color="#{$key}"]::after {
-      background-color: $badge-color;
-    }
-  }
-
-  @each $key, $pill-color in $pill-colors {
-    &[data-pill-color="#{$key}"] {
-      background-color: $pill-color;
-    }
-  }
-
   /* GROUP RULES */
   & + & {
     margin-bottom: var(--spacing-16);
@@ -85,7 +56,6 @@
 a.coop-pill {
   &:focus,
   &:hover {
-    color: var(--color-text);
     text-decoration: underline;
   }
 }

package/src/components/Squircle.scss

@@ -1,22 +1,32 @@
 @use "../breakpoints.scss" as *;
 
 .coop-squircle {
+  --size: 100px;
+
   position: relative;
 
+  overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
 
   aspect-ratio: 1 / 1;
-  width: 100px;
+  width: var(--size);
   margin: 0;
   padding: 0;
 
   color: var(--color-white);
 
-  background: var(--color-red-dark-4);
   clip-path: url("#squircle");
 
+  &[data-size="sm"] {
+    --size: 32px;
+  }
+
+  &[data-size="md"] {
+    --size: 50px;
+  }
+
   figcaption {
     display: flex;
     flex-direction: column;

package/src/components/Tag.scss

@@ -1,18 +1,4 @@
 .coop-tag {
-  $tag-colors: (
-    "white": var(--color-white),
-    "purple": var(--color-tint-purple),
-    "orange": var(--color-tint-orange),
-    "pink": var(--color-tint-pink),
-    "red": var(--color-tint-red),
-    "green": var(--color-tint-green),
-    "yellow": var(--color-tint-yellow),
-    "lilac": var(--color-tint-lilac),
-    "blue": var(--color-tint-blue),
-    "brown": var(--color-tint-brown),
-    "grey": var(--color-tint-grey),
-  );
-
   display: inline-block;
 
   padding: var(--spacing-4) var(--spacing-16);
@@ -21,23 +7,13 @@
   font-size: var(--type-size-16);
   font-weight: var(--type-weight-medium);
   line-height: var(--type-line-height-default);
-  color: var(--color-text);
   text-decoration: none;
   white-space: nowrap;
-
-  background-color: var(--color-grey-neutral-warm);
-
-  @each $key, $tag-color in $tag-colors {
-    &[data-tag-color="#{$key}"] {
-      background-color: $tag-color;
-    }
-  }
 }
 
 a.coop-tag {
   &:focus,
   &:hover {
-    color: var(--color-text);
     text-decoration: underline;
   }
 }

package/src/main.scss

@@ -1,3 +1,4 @@
 @use "./vars";
 @use "./reset";
 @use "./typography";
+@use "./utilities";

package/src/utilities/bg-colors.scss

@@ -0,0 +1,97 @@
+$dark-colors: (
+  "green": var(--color-dark-green),
+  "orange": var(--color-dark-orange),
+  "pink": var(--color-dark-pink),
+  "red": var(--color-dark-red),
+  "purple": var(--color-dark-purple),
+  "blue": var(--color-dark-blue),
+  "lilac": var(--color-dark-lilac),
+  "yellow": var(--color-dark-yellow),
+);
+$light-colors: (
+  "green": var(--color-light-green),
+  "orange": var(--color-light-orange),
+  "pink": var(--color-light-pink),
+  "red": var(--color-light-red),
+  "purple": var(--color-light-purple),
+  "blue": var(--color-light-blue),
+  "lilac": var(--color-light-lilac),
+  "yellow": var(--color-light-yellow),
+);
+$tint-colors: (
+  "purple": var(--color-tint-purple),
+  "orange": var(--color-tint-orange),
+  "pink": var(--color-tint-pink),
+  "red": var(--color-tint-red),
+  "green": var(--color-tint-green),
+  "yellow": var(--color-tint-yellow),
+  "lilac": var(--color-tint-lilac),
+  "blue": var(--color-tint-blue),
+  "brown": var(--color-tint-brown),
+  "grey": var(--color-tint-grey),
+);
+$grey-colors: (
+  "dark-grey": var(--color-grey-dark),
+  "mid-dark-grey": var(--color-grey-mid-dark),
+  "mid-grey": var(--color-grey-mid),
+  "mid-light-grey": var(--color-grey-mid-light),
+  "light-grey": var(--color-grey-light),
+);
+$standalone-colors: (
+  coop-blue: var(--color-brand-coop),
+  offers-red: var(--color-deal-red),
+  white: var(--color-white),
+  black: var(--color-black),
+  blue: var(---color-blue),
+  green: var(--color-green),
+  none: none,
+);
+
+@each $key, $bg-color in $dark-colors {
+  .bg-dark-#{$key} {
+    background: #{$bg-color};
+  }
+}
+
+@each $key, $bg-color in $tint-colors {
+  .bg-tint-#{$key} {
+    background: #{$bg-color};
+  }
+}
+
+@each $key, $bg-color in $light-colors {
+  .bg-light-#{$key} {
+    background: #{$bg-color};
+  }
+}
+
+@each $key, $bg-color in $grey-colors {
+  .bg-#{$key} {
+    background: #{$bg-color};
+  }
+}
+
+@each $key, $bg-color in $standalone-colors {
+  .bg-#{$key + ""} {
+    background: #{$bg-color};
+  }
+}
+
+[class*="bg-dark"],
+[class*="bg-mid-dark"],
+.bg-offers-red,
+.bg-black,
+.bg-blue,
+.bg-green,
+.bg-coop-blue {
+  color: var(--color-white);
+}
+
+[class*="bg-light"],
+[class*="bg-tint"],
+[class*="bg-mid-light"],
+.bg-mid-grey,
+.bg-white,
+.bg-none {
+  color: var(--color-text);
+}

package/src/utilities.scss

@@ -0,0 +1 @@
+@use "./utilities/bg-colors";

package/src/vars/_colours.scss

@@ -10,6 +10,7 @@
   /* Colours */
   --color-white: #fff;
   --color-black: #000;
+  --color-navy: #003057;
 
   /* Text greys */
   --color-text: #282828;
@@ -28,10 +29,13 @@
   --color-tint-brown: #f5f5f0;
 
   /* Grey backgrounds */
-  --color-grey-mid-light: #d8d8d8;
+
+  --color-grey-dark: #333;
+  --color-grey-mid-dark: #6e6e6e;
   --color-grey-mid: #c4c4c4;
-  --color-grey-dark: #6e6e6e;
+  --color-grey-mid-light: #d8d8d8;
   --color-grey-light: #f3f3f3;
+
   --color-grey-neutral-light: #f3f3f3;
   --color-grey-neutral-warm: #f5f5f0;
   --color-grey-neutral-cool: #dde9ed;
@@ -62,7 +66,7 @@
   --color-dark-red: #f14f57;
   --color-dark-yellow: #c08a00;
   --color-dark-lilac: #6762f9;
-  --color-navy: #003057;
+  --color-dark-blue: #003057;
 
   /* Shades in use */
   --color-green-light-6: #b9e277;