@coopdigital/styles 0.8.1 → 0.9.0

package/dist/components/Button.css

@@ -1 +1 @@
-@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.coop-button{--bg-color:var(--color-button-blue);--text-color:var(--color-white);--padding-x:var(--spacing-20);--padding-y:var(--spacing-12);--type-size:var(--type-size-16);cursor:pointer;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;text-underline-offset:3px;background:var(--bg-color);border:0;outline:none;justify-content:center;align-items:center;-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)}.coop-button[data-size=lg]{--type-size:var(--type-size-18)}.coop-button[data-size=xl]{--type-size:var(--type-size-20)}.coop-button:not([data-loading]):focus,.coop-button:not([data-loading]):hover{--bg-color:var(--color-button-blue-hover);-webkit-text-decoration-color:var(--text-color);text-decoration-color:var(--text-color)}.coop-button:not([data-loading]):focus{outline:2px solid var(--color-focus-ring);outline-offset:3px;transition:none}.coop-button:not([data-loading]):active{--bg-color:var(--color-button-blue-active)}.coop-button[data-width=full]{width:100%}.coop-button[data-loading]{cursor:auto;position:relative}.coop-button[data-loading]:after{content:"";width:var(--spacing-20);height:var(--spacing-20);margin-left:var(--spacing-10);border:2px solid;border-radius:50%;animation:1.25s linear infinite spin;display:inline-block;border-right-color:#0000!important}@media (width>=48em){.coop-button[data-loading]:after{right:var(--spacing-32)}.coop-button{--padding-x:var(--spacing-40)}}.coop-button[data-variant=primary]{--bg-color:var(--color-button-primary);--text-color:var(--color-white)}.coop-button[data-variant=primary]:not([data-loading]):focus,.coop-button[data-variant=primary]:not([data-loading]):hover{--bg-color:var(--color-button-primary-hover)}.coop-button[data-variant=primary]:not([data-loading]):active{--bg-color:var(--color-button-primary-active)}.coop-button[data-variant=white]{--bg-color:var(--color-white);--text-color:var(--color-black)}.coop-button[data-variant=white]:not([data-loading]):focus,.coop-button[data-variant=white]:not([data-loading]):hover{--bg-color:var(--color-button-white-hover)}.coop-button[data-variant=white]:not([data-loading]):active{--bg-color:var(--color-button-white-active)}.coop-button[data-variant=grey]{--bg-color:var(--color-button-grey);--text-color:var(--color-black)}.coop-button[data-variant=grey]:not([data-loading]):focus,.coop-button[data-variant=grey]:not([data-loading]):hover{--bg-color:var(--color-button-grey-hover)}.coop-button[data-variant=grey]:not([data-loading]):active{--bg-color:var(--color-button-grey-active)}
+@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.coop-button{--bg-color:var(--color-button-primary);--text-color:var(--color-white);--hover-color:var(--color-button-primary-hover);--active-color:var(--color-button-primary-active);--shadow:0;--padding-x:var(--spacing-20);--padding-y:var(--spacing-12);--type-size:var(--type-size-16);cursor:pointer;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;text-underline-offset:3px;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)}.coop-button[data-size=lg]{--type-size:var(--type-size-18)}.coop-button[data-size=xl]{--type-size:var(--type-size-20)}.coop-button:focus{outline:2px solid var(--color-focus-ring);outline-offset:3px;transition:none}.coop-button:not([data-loading]):hover{-webkit-text-decoration-color:var(--text-color);text-decoration-color:var(--text-color);background:var(--hover-color)}.coop-button:not([data-loading]):active{background:var(--active-color)}.coop-button[data-width=full]{width:100%}.coop-button[aria-disabled]{cursor:auto;filter:grayscale()}.coop-button[data-loading]{cursor:wait;position:relative}.coop-button[data-loading] svg{width:1.25rem;height:1.25rem;animation:1.25s linear infinite spin}@media (width>=48em){.coop-button{--padding-x:var(--spacing-40)}}.coop-button[data-variant=secondary]{--bg-color:var(--color-button-blue);--text-color:var(--color-white);--hover-color:var(--color-button-blue-hover);--active-color:var(--color-button-blue-active)}.coop-button[data-variant=white]{--bg-color:var(--color-white);--text-color:var(--color-black);--hover-color:var(--color-button-white-hover);--active-color:var(--color-button-white-active)}.coop-button[data-variant=grey]{--bg-color:var(--color-button-grey);--text-color:var(--color-black);--hover-color:var(--color-button-grey-hover);--active-color:var(--color-button-grey-active)}.coop-button[data-variant=ghost]{--bg-color:transparent;--text-color:var(--color-button-blue-hover);--hover-color:transparent;--active-color:transparent;--shadow:inset 0 0 0 2px var(--color-button-blue-hover)}

package/dist/components/Card.css

@@ -0,0 +1 @@
+.coop-card{--flex-direction:column;--image-max-width:100%;--image-border-radius:var(--ui-border-radius-m)var(--ui-border-radius-m)0 0;--label-background:unset;--badge-x:.5rem;--badge-y:.5rem;flex-direction:var(--flex-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]{--flex-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]{--flex-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 h2,.coop-card h3,.coop-card h4,.coop-card h5,.coop-card h6{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 a{color:inherit;outline:0;text-decoration:none}.coop-card a:before{content:"";border-radius:var(--ui-border-radius-m);position:absolute;inset:0}.coop-card a:focus-within:before{outline:2px solid var(--color-focus-ring);outline-offset:3px}.coop-card a:hover h3,.coop-card a:focus h3{text-decoration:underline}.coop-card--content{gap:var(--spacing-12);flex-direction:column;display:flex}.coop-card--inner{gap:var(--spacing-12);padding:var(--spacing-20);border-radius:var(--ui-border-radius-m);background:var(--color-white);justify-content:space-between;align-items:center;display:flex}.coop-card--icon{justify-content:flex-end;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);position:absolute}.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-background=purple] .coop-card--inner{background-color:var(--color-tint-purple)}.coop-card[data-background=orange] .coop-card--inner{background-color:var(--color-tint-orange)}.coop-card[data-background=pink] .coop-card--inner{background-color:var(--color-tint-pink)}.coop-card[data-background=red] .coop-card--inner{background-color:var(--color-tint-red)}.coop-card[data-background=green] .coop-card--inner{background-color:var(--color-tint-green)}.coop-card[data-background=yellow] .coop-card--inner{background-color:var(--color-tint-yellow)}.coop-card[data-background=lilac] .coop-card--inner{background-color:var(--color-tint-lilac)}.coop-card[data-background=blue] .coop-card--inner{background-color:var(--color-tint-blue)}.coop-card[data-label-background] .coop-card--label{display:flex}.coop-card[data-label-background] .coop-card--label span{padding:var(--spacing-8)var(--spacing-16);border-radius:var(--ui-border-radius-m);font-weight:var(--type-weight-demibold);background:var(--label-background)}.coop-card[data-label-background=green] .coop-card--label span{--label-background:var(--color-light-green)}.coop-card[data-label-background=orange] .coop-card--label span{--label-background:var(--color-light-orange)}.coop-card[data-label-background=pink] .coop-card--label span{--label-background:var(--color-light-pink)}.coop-card[data-label-background=red] .coop-card--label span{--label-background:var(--color-light-red)}.coop-card[data-label-background=purple] .coop-card--label span{--label-background:var(--color-light-purple)}.coop-card[data-label-background=blue] .coop-card--label span{--label-background:var(--color-light-blue)}.coop-card[data-label-background=lilac] .coop-card--label span{--label-background:var(--color-light-lilac)}.coop-card[data-label-background=yellow] .coop-card--label span{--label-background:var(--color-light-yellow)}

package/dist/components/Squircle.css

@@ -0,0 +1 @@
+.coop-squircle{width:100px;color:var(--color-white);justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:relative}.coop-squircle svg{fill:var(--color-red-dark-4)}.coop-squircle figcaption{flex-direction:column;justify-content:center;align-items:center;gap:.25rem;width:95%;display:flex;position:absolute;transform:translateY(-2px)}.coop-squircle figcaption span{line-height:1}.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/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-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-button-green-primary:#0f8482;--color-button-green-primary-hover:#1c6b6a;--color-button-green-primary-active:#124948;--color-button-primary:var(--color-button-green-primary);--color-button-primary-hover:var(--color-button-green-primary-hover);--color-button-primary-active:var(--color-button-green-primary-active);--color-button-blue:#005878;--color-button-blue-hover:#003e55;--color-button-blue-active:#001f2b;--color-button-dark:var(--color-button-blue);--color-button-dark-hover:var(--color-button-blue-hover);--color-button-dark-active:var(--color-button-blue-active);--color-button-grey:#efefef;--color-button-grey-hover:#d8d8d8;--color-button-grey-active:#c4c4c4;--color-button-white:var(--color-white);--color-button-white-hover:var(--color-button-grey);--color-button-white-active:#d8d8d8;--color-button:var(--color-button-blue);--color-button-hover:var(--color-button-blue-hover);--color-button-active:var(--color-button-blue-active);--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;--spacing-64:4rem;--spacing-58:3.625rem;--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-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}*,: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: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}@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")}a:not(.coop-button),.coop-link{color:var(--color-link);text-underline-offset:3px;text-decoration:underline}a:not(.coop-button):hover,.coop-link:hover{color:var(--color-link-hover)}a:not(.coop-button):active,a:not(.coop-button):focus,.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}.coop-link-white{color:var(--color-white);text-decoration:underline}.coop-link-white:hover{color:currentColor}.coop-link-black{color:var(--color-black)}.coop-link-black:hover{color:currentColor}p,ul,ol{margin-bottom:var(--spacing-16)}@media (width>=48em){p,ul,ol{margin-bottom:var(--spacing-24)}}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-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-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-button-green-primary:#0f8482;--color-button-green-primary-hover:#1c6b6a;--color-button-green-primary-active:#124948;--color-button-primary:var(--color-button-green-primary);--color-button-primary-hover:var(--color-button-green-primary-hover);--color-button-primary-active:var(--color-button-green-primary-active);--color-button-blue:#005878;--color-button-blue-hover:#003e55;--color-button-blue-active:#001f2b;--color-button-dark:var(--color-button-blue);--color-button-dark-hover:var(--color-button-blue-hover);--color-button-dark-active:var(--color-button-blue-active);--color-button-grey:#efefef;--color-button-grey-hover:#d8d8d8;--color-button-grey-active:#c4c4c4;--color-button-white:var(--color-white);--color-button-white-hover:var(--color-button-grey);--color-button-white-active:#d8d8d8;--color-button:var(--color-button-blue);--color-button-hover:var(--color-button-blue-hover);--color-button-active:var(--color-button-blue-active);--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;--spacing-64:4rem;--spacing-58:3.625rem;--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}*,: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: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}@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")}a:not(.coop-button),.coop-link{color:var(--color-link);text-underline-offset:3px;text-decoration:underline}a:not(.coop-button):hover,.coop-link:hover{color:var(--color-link-hover)}a:not(.coop-button):active,a:not(.coop-button):focus,.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}.coop-link-white{color:var(--color-white);text-decoration:underline}.coop-link-white:hover{color:currentColor}.coop-link-black{color:var(--color-black)}.coop-link-black:hover{color:currentColor}p,ul,ol{margin-bottom:var(--spacing-16)}@media (width>=48em){p,ul,ol{margin-bottom:var(--spacing-24)}}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()}

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-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-button-green-primary:#0f8482;--color-button-green-primary-hover:#1c6b6a;--color-button-green-primary-active:#124948;--color-button-primary:var(--color-button-green-primary);--color-button-primary-hover:var(--color-button-green-primary-hover);--color-button-primary-active:var(--color-button-green-primary-active);--color-button-blue:#005878;--color-button-blue-hover:#003e55;--color-button-blue-active:#001f2b;--color-button-dark:var(--color-button-blue);--color-button-dark-hover:var(--color-button-blue-hover);--color-button-dark-active:var(--color-button-blue-active);--color-button-grey:#efefef;--color-button-grey-hover:#d8d8d8;--color-button-grey-active:#c4c4c4;--color-button-white:var(--color-white);--color-button-white-hover:var(--color-button-grey);--color-button-white-active:#d8d8d8;--color-button:var(--color-button-blue);--color-button-hover:var(--color-button-blue-hover);--color-button-active:var(--color-button-blue-active);--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;--spacing-64:4rem;--spacing-58:3.625rem;--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-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}
+: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-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-button-green-primary:#0f8482;--color-button-green-primary-hover:#1c6b6a;--color-button-green-primary-active:#124948;--color-button-primary:var(--color-button-green-primary);--color-button-primary-hover:var(--color-button-green-primary-hover);--color-button-primary-active:var(--color-button-green-primary-active);--color-button-blue:#005878;--color-button-blue-hover:#003e55;--color-button-blue-active:#001f2b;--color-button-dark:var(--color-button-blue);--color-button-dark-hover:var(--color-button-blue-hover);--color-button-dark-active:var(--color-button-blue-active);--color-button-grey:#efefef;--color-button-grey-hover:#d8d8d8;--color-button-grey-active:#c4c4c4;--color-button-white:var(--color-white);--color-button-white-hover:var(--color-button-grey);--color-button-white-active:#d8d8d8;--color-button:var(--color-button-blue);--color-button-hover:var(--color-button-blue-hover);--color-button-active:var(--color-button-blue-active);--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;--spacing-64:4rem;--spacing-58:3.625rem;--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}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/styles",
   "type": "module",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -36,5 +36,5 @@
     "lightningcss": "^1.29.3",
     "sass-embedded": "^1.86.0"
   },
-  "gitHead": "6e0b8a1a021138c3f9bd92e8aadd523c1cf4a2f5"
+  "gitHead": "1c68d0c54618e299a4e5d7a89bf43ff17841a3e0"
 }

package/src/components/Button.scss

@@ -3,11 +3,11 @@
 @use "../keyframes/spinner";
 
 $button-variants: (
-  "primary": (
-    bg-color: var(--color-button-primary),
+  "secondary": (
+    bg-color: var(--color-button-blue),
     text-color: var(--color-white),
-    hover-color: var(--color-button-primary-hover),
-    active-color: var(--color-button-primary-active),
+    hover-color: var(--color-button-blue-hover),
+    active-color: var(--color-button-blue-active),
   ),
   "white": (
     bg-color: var(--color-white),
@@ -21,11 +21,22 @@ $button-variants: (
     hover-color: var(--color-button-grey-hover),
     active-color: var(--color-button-grey-active),
   ),
+  "ghost": (
+    bg-color: transparent,
+    text-color: var(--color-button-blue-hover),
+    hover-color: transparent,
+    active-color: transparent,
+    shadow: inset 0 0 0 2px var(--color-button-blue-hover),
+  ),
 );
 
 .coop-button {
-  --bg-color: var(--color-button-blue);
+  --bg-color: var(--color-button-primary);
   --text-color: var(--color-white);
+  --hover-color: var(--color-button-primary-hover);
+  --active-color: var(--color-button-primary-active);
+  --shadow: 0;
+
   --padding-x: var(--spacing-20);
   --padding-y: var(--spacing-12);
   --type-size: var(--type-size-16);
@@ -33,6 +44,7 @@ $button-variants: (
   cursor: pointer;
 
   display: inline-flex;
+  gap: 0.5rem;
   align-items: center;
   justify-content: center;
 
@@ -52,6 +64,7 @@ $button-variants: (
 
   background: var(--bg-color);
   outline: none;
+  box-shadow: var(--shadow);
 
   transition: 0.15s ease-in-out;
   transition-property: background-color, color, text-decoration-color;
@@ -70,21 +83,19 @@ $button-variants: (
     --type-size: var(--type-size-20);
   }
 
-  &:not([data-loading]):focus,
-  &:not([data-loading]):hover {
-    --bg-color: var(--color-button-blue-hover);
-
-    text-decoration-color: var(--text-color);
-  }
-
-  &:not([data-loading]):focus {
+  &:focus {
     outline: 2px solid var(--color-focus-ring);
     outline-offset: 3px;
     transition: none;
   }
 
+  &:not([data-loading]):hover {
+    text-decoration-color: var(--text-color);
+    background: var(--hover-color);
+  }
+
   &:not([data-loading]):active {
-    --bg-color: var(--color-button-blue-active);
+    background: var(--active-color);
   }
 
   /* FULL WIDTH */
@@ -92,6 +103,11 @@ $button-variants: (
     width: 100%;
   }
 
+  &[aria-disabled] {
+    cursor: auto;
+    filter: grayscale(1);
+  }
+
   /* GROUP RULES */
   // & + .coop-button {
   //   margin-bottom: var(--spacing-8);
@@ -100,26 +116,13 @@ $button-variants: (
 
   /* LOADING */
   &[data-loading] {
-    cursor: auto;
+    cursor: wait;
     position: relative;
 
-    &::after {
-      content: "";
-
-      display: inline-block;
-
-      width: var(--spacing-20);
-      height: var(--spacing-20);
-      margin-left: var(--spacing-10);
-      border: 2px solid;
-      border-right-color: transparent !important;
-      border-radius: 50%;
-
+    svg {
+      width: 1.25rem;
+      height: 1.25rem;
       animation: spin 1.25s linear infinite;
-
-      @media (min-width: $mq-medium) {
-        right: var(--spacing-32);
-      }
     }
   }
 
@@ -133,14 +136,11 @@ $button-variants: (
     &[data-variant="#{$variant}"] {
       --bg-color: #{map.get($colors, "bg-color")};
       --text-color: #{map.get($colors, "text-color")};
+      --hover-color: #{map.get($colors, "hover-color")};
+      --active-color: #{map.get($colors, "active-color")};
 
-      &:not([data-loading]):focus,
-      &:not([data-loading]):hover {
-        --bg-color: #{map.get($colors, "hover-color")};
-      }
-
-      &:not([data-loading]):active {
-        --bg-color: #{map.get($colors, "active-color")};
+      @if map.has-key($colors, "shadow") {
+        --shadow: #{map.get($colors, "shadow")};
       }
     }
   }

package/src/components/Card.scss

@@ -0,0 +1,192 @@
+@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),
+  );
+  $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),
+  );
+
+  --flex-direction: column;
+  --image-max-width: 100%;
+  --image-border-radius: var(--ui-border-radius-m) var(--ui-border-radius-m) 0 0;
+  --label-background: unset;
+
+  --badge-x: 0.5rem;
+  --badge-y: 0.5rem;
+
+  position: relative;
+
+  display: flex;
+  flex-direction: var(--flex-direction);
+
+  border-radius: var(--ui-border-radius-m);
+
+  box-shadow: var(--ui-shadow);
+
+  transition: box-shadow var(--ui-transition-hover);
+
+  &[data-layout="horizontal"] {
+    @media (min-width: $mq-medium) {
+      --flex-direction: row;
+      --image-max-width: calc(100% / 3);
+      --image-border-radius: var(--ui-border-radius-m) 0 0 var(--ui-border-radius-m);
+    }
+  }
+
+  &[data-layout="horizontal"][data-image-pos="right"] {
+    @media (min-width: $mq-medium) {
+      --flex-direction: row-reverse;
+      --image-border-radius: 0 var(--ui-border-radius-m) var(--ui-border-radius-m) 0;
+    }
+  }
+
+  &[data-badge-pos="popout"] {
+    --badge-x: -10px;
+    --badge-y: -10px;
+  }
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+    font-size: var(--type-size-20);
+    font-weight: var(--type-weight-demibold);
+  }
+
+  picture {
+    overflow: hidden;
+    max-width: var(--image-max-width);
+    margin: 0;
+    border-radius: var(--image-border-radius);
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+    outline: 0;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0 0 0 0;
+      border-radius: var(--ui-border-radius-m);
+    }
+
+    &:focus-within::before {
+      outline: 2px solid var(--color-focus-ring);
+      outline-offset: 3px;
+    }
+
+    &:hover,
+    &:focus {
+      h3 {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &--content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-12);
+  }
+
+  &--inner {
+    display: flex;
+    gap: var(--spacing-12);
+    align-items: center;
+    justify-content: space-between;
+
+    padding: var(--spacing-20);
+    border-radius: var(--ui-border-radius-m);
+
+    background: var(--color-white);
+  }
+
+  &--icon {
+    display: flex;
+    justify-content: flex-end;
+    min-width: 1rem;
+    transition: transform 0.2s ease-out;
+
+    svg {
+      height: 1rem;
+    }
+  }
+
+  &--badge {
+    position: absolute;
+    z-index: 10;
+    top: var(--badge-y);
+    right: var(--badge-x);
+  }
+
+  &:hover,
+  &:focus {
+    box-shadow: var(--ui-shadow-hover);
+
+    .coop-card--icon {
+      transform: translateX(0.25rem);
+    }
+
+    .coop-card--badge {
+      transform: scale(1.05);
+    }
+  }
+
+  @each $key, $bg-color in $bg-colors {
+    &[data-background="#{$key}"] {
+      .coop-card--inner {
+        background-color: $bg-color;
+      }
+    }
+  }
+
+  &[data-label-background] {
+    .coop-card--label {
+      display: flex;
+
+      span {
+        padding: var(--spacing-8) var(--spacing-16);
+        border-radius: var(--ui-border-radius-m);
+        font-weight: var(--type-weight-demibold);
+        background: var(--label-background);
+      }
+    }
+  }
+
+  @each $key, $label-bg-color in $label-bg-colors {
+    &[data-label-background="#{$key}"] {
+      .coop-card--label span {
+        --label-background: #{$label-bg-color};
+      }
+    }
+  }
+}

package/src/components/Squircle.scss

@@ -0,0 +1,47 @@
+@use "../breakpoints.scss" as *;
+
+.coop-squircle {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100px;
+  margin: 0;
+  padding: 0;
+
+  color: var(--color-white);
+
+  svg {
+    fill: var(--color-red-dark-4);
+  }
+
+  figcaption {
+    position: absolute;
+    // top: 0;
+    transform: translateY(-2px);
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    align-items: center;
+    justify-content: center;
+
+    width: 95%;
+
+    span {
+      line-height: 1;
+    }
+  }
+
+  &--label-small {
+    font-size: var(--type-size-18);
+  }
+
+  &--label-large {
+    font-size: var(--type-size-36);
+    font-weight: var(--type-weight-demibold);
+    letter-spacing: -2px;
+  }
+}

package/src/vars/_typography.scss

@@ -20,6 +20,7 @@
   --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;

package/dist/components/EditorialCard.css

@@ -1 +0,0 @@
-.coop-editorial-card{--flex-direction:column;--image-max-width:100%;--image-border-radius:var(--ui-border-radius-m)var(--ui-border-radius-m)0 0;flex-direction:var(--flex-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-editorial-card[data-layout=horizontal]{--flex-direction:row;--image-max-width:calc(100%/3);--image-border-radius:var(--ui-border-radius-m)0 0 var(--ui-border-radius-m)}}.coop-editorial-card:hover,.coop-editorial-card:focus{box-shadow:var(--ui-shadow-hover)}.coop-editorial-card h2,.coop-editorial-card h3,.coop-editorial-card h4,.coop-editorial-card h5,.coop-editorial-card h6{font-size:var(--type-size-20);font-weight:var(--type-weight-demibold);margin:0}.coop-editorial-card picture{max-width:var(--image-max-width);border-radius:var(--image-border-radius);margin:0;overflow:hidden}.coop-editorial-card img{width:100%;height:100%}.coop-editorial-card p{margin:0}.coop-editorial-card a{color:inherit;outline:0;text-decoration:none}.coop-editorial-card a:before{content:"";border-radius:var(--ui-border-radius-m);position:absolute;inset:0}.coop-editorial-card a:focus-within:before{outline:2px solid var(--color-focus-ring);outline-offset:3px}.coop-editorial-card a:hover h3,.coop-editorial-card a:focus h3{text-decoration:underline}.coop-editorial-card--content{gap:var(--spacing-12);padding:var(--spacing-20);border-radius:var(--ui-border-radius-m);background:var(--color-white);flex-direction:column;display:flex}

package/src/components/EditorialCard.scss

@@ -1,91 +0,0 @@
-@use "../breakpoints.scss" as *;
-
-.coop-editorial-card {
-  --flex-direction: column;
-  --image-max-width: 100%;
-  --image-border-radius: var(--ui-border-radius-m) var(--ui-border-radius-m) 0 0;
-
-  display: flex;
-  position: relative;
-  flex-direction: var(--flex-direction);
-  border-radius: var(--ui-border-radius-m);
-  box-shadow: var(--ui-shadow);
-  transition: box-shadow var(--ui-transition-hover);
-
-  &[data-layout="horizontal"] {
-    @media (min-width: $mq-medium) {
-      --flex-direction: row;
-      --image-max-width: calc(100% / 3);
-      --image-border-radius: var(--ui-border-radius-m) 0 0 var(--ui-border-radius-m);
-    }
-  }
-
-  &:hover,
-  &:focus {
-    box-shadow: var(--ui-shadow-hover);
-  }
-
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 0;
-    font-size: var(--type-size-20);
-    font-weight: var(--type-weight-demibold);
-  }
-
-  picture {
-    overflow: hidden;
-    max-width: var(--image-max-width);
-    margin: 0;
-    border-radius: var(--image-border-radius);
-  }
-
-  img {
-    width: 100%;
-    height: 100%;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  a {
-    color: inherit;
-    text-decoration: none;
-    outline: 0;
-
-    &::before {
-      content: "";
-
-      position: absolute;
-      inset: 0 0 0 0;
-
-      border-radius: var(--ui-border-radius-m);
-    }
-
-    &:focus-within::before {
-      outline: 2px solid var(--color-focus-ring);
-      outline-offset: 3px;
-    }
-
-    &:hover,
-    &:focus {
-      h3 {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  &--content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-12);
-
-    padding: var(--spacing-20);
-    border-radius: var(--ui-border-radius-m);
-
-    background: var(--color-white);
-  }
-}