@coopdigital/styles 0.9.0 → 0.10.0

package/dist/components/Card.css

@@ -1 +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)}
+.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 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);width:100%;padding:var(--spacing-20);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-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)}

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-group{margin-bottom:var(--spacing-16)}
+.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}

package/dist/components/SkipNav.css

@@ -1 +1 @@
-.coop-skip-nav{--offscreen-position:-9999px;z-index:999;position:absolute;top:0;left:0}.coop-skip-nav ul{margin:0;list-style:none}.coop-skip-nav a{top:0;left:var(--offscreen-position);padding:var(--spacing-16);border-bottom-right-radius:var(--ui-border-radius);border-bottom-left-radius:var(--ui-border-radius);font-size:var(--type-size-18);color:var(--color-black);white-space:nowrap;background:var(--color-yellow-mid-5);position:absolute}.coop-skip-nav a:hover{color:var(--color-black)}.coop-skip-nav a:focus,.coop-skip-nav a:active,.coop-skip-nav a[data-visible=true]{left:var(--spacing-16)}.coop-skip-nav a:focus:not(:focus-visible){left:var(--offscreen-position)}@media (--mq-medium){.coop-skip-nav a{font-size:var(--type-size-20)}}
+.coop-skip-nav{--offscreen-position:-9999px;z-index:999;position:absolute;top:0;left:0}.coop-skip-nav ul{margin:0;list-style:none}.coop-skip-nav a{top:0;left:var(--offscreen-position);padding:var(--spacing-16);border-bottom-right-radius:var(--ui-border-radius);border-bottom-left-radius:var(--ui-border-radius);font-size:var(--type-size-18);color:var(--color-black);white-space:nowrap;background:var(--color-yellow-mid-5);position:absolute}.coop-skip-nav a:hover{color:var(--color-black)}.coop-skip-nav a:focus,.coop-skip-nav a:active,.coop-skip-nav a[data-visible=true]{left:var(--spacing-16)}.coop-skip-nav a:focus:not(:focus-visible){left:var(--offscreen-position)}@media (width>=48em){.coop-skip-nav a{font-size:var(--type-size-20)}}

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-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()}
+@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")}.coop-link{color:var(--color-link);text-underline-offset:3px;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-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/typography.css

@@ -1 +1 @@
-@import "https://cdn.fonts.net/t/1.css?apiType=css&projectid=d984f56e-f9bd-4c14-bb29-2558d7ff893e";@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";@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-underline-offset:3px;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-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/package.json

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

package/src/components/Card.scss

@@ -22,28 +22,29 @@
     "yellow": var(--color-light-yellow),
   );
 
-  --flex-direction: column;
+  --card-direction: column;
   --image-max-width: 100%;
   --image-border-radius: var(--ui-border-radius-m) var(--ui-border-radius-m) 0 0;
-  --label-background: unset;
-
+  --label-bg: none;
+  --card-bg: var(--color-white);
   --badge-x: 0.5rem;
   --badge-y: 0.5rem;
 
   position: relative;
 
   display: flex;
-  flex-direction: var(--flex-direction);
+  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);
 
   &[data-layout="horizontal"] {
     @media (min-width: $mq-medium) {
-      --flex-direction: row;
+      --card-direction: row;
       --image-max-width: calc(100% / 3);
       --image-border-radius: var(--ui-border-radius-m) 0 0 var(--ui-border-radius-m);
     }
@@ -51,7 +52,7 @@
 
   &[data-layout="horizontal"][data-image-pos="right"] {
     @media (min-width: $mq-medium) {
-      --flex-direction: row-reverse;
+      --card-direction: row-reverse;
       --image-border-radius: 0 var(--ui-border-radius-m) var(--ui-border-radius-m) 0;
     }
   }
@@ -121,19 +122,23 @@
   &--inner {
     display: flex;
     gap: var(--spacing-12);
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-between;
 
+    width: 100%;
     padding: var(--spacing-20);
     border-radius: var(--ui-border-radius-m);
-
-    background: var(--color-white);
   }
 
   &--icon {
+    pointer-events: none;
+
     display: flex;
+    align-self: center;
     justify-content: flex-end;
+
     min-width: 1rem;
+
     transition: transform 0.2s ease-out;
 
     svg {
@@ -146,6 +151,20 @@
     z-index: 10;
     top: var(--badge-y);
     right: var(--badge-x);
+
+    transition: transform 0.1s ease-out;
+  }
+
+  &--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);
   }
 
   &:hover,
@@ -162,31 +181,14 @@
   }
 
   @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);
-      }
+    &[data-bg="#{$key}"] {
+      --card-bg: #{$bg-color};
     }
   }
 
   @each $key, $label-bg-color in $label-bg-colors {
-    &[data-label-background="#{$key}"] {
-      .coop-card--label span {
-        --label-background: #{$label-bg-color};
-      }
+    &[data-label-bg="#{$key}"] {
+      --label-bg: #{$label-bg-color};
     }
   }
 }

package/src/components/Pill.scss

@@ -89,7 +89,3 @@ a.coop-pill {
     text-decoration: underline;
   }
 }
-
-.coop-pill-group {
-  margin-bottom: var(--spacing-16);
-}

package/src/components/SkipNav.scss

@@ -1,3 +1,5 @@
+@use "../breakpoints.scss" as *;
+
 .coop-skip-nav {
   --offscreen-position: -9999px;
 
@@ -43,7 +45,7 @@
       left: var(--offscreen-position);
     }
 
-    @media (--mq-medium) {
+    @media (min-width: $mq-medium) {
       font-size: var(--type-size-20);
     }
   }

package/src/typography/_links.scss

@@ -1,4 +1,3 @@
-a:not(.coop-button),
 .coop-link {
   color: var(--color-link);
   text-decoration: underline;
@@ -32,20 +31,20 @@ button.coop-link {
   background: none;
 }
 
-.coop-link-white {
-  color: var(--color-white);
-  text-decoration: underline;
+// .coop-link-white {
+//   color: var(--color-white);
+//   text-decoration: underline;
 
-  &:hover {
-    color: currentcolor;
-    // text-decoration: none;
-  }
-}
+//   &:hover {
+//     color: currentcolor;
+//     // text-decoration: none;
+//   }
+// }
 
-.coop-link-black {
-  color: var(--color-black);
+// .coop-link-black {
+//   color: var(--color-black);
 
-  &:hover {
-    color: currentcolor;
-  }
-}
+//   &:hover {
+//     color: currentcolor;
+//   }
+// }