@coopdigital/styles 0.43.0 → 0.45.0

package/src/form.scss

@@ -8,7 +8,7 @@
 
 .coop-field {
   --font-size: var(--text-size-18);
-  --field-border: var(--color-mid-dark-grey);
+  --field-border: var(--color-grey-700);
   --field-size: var(--spacing-32);
   --field-gap: var(--spacing-8);
   --field-hint-offset: -2px;
@@ -19,6 +19,10 @@
   gap: var(--field-gap);
 }
 
+.coop-field:has(input:checked) {
+  --field-border: var(--color-text-black);
+}
+
 .coop-field:has(.coop-field-element[data-size="sm"]),
 .coop-fieldset[data-size="sm"] .coop-field {
   --field-size: var(--spacing-24);
@@ -47,7 +51,7 @@
 
 .coop-field-error {
   display: block;
-  color: var(--color-offer-red);
+  color: var(--color-error);
 }
 
 .coop-field-hint {
@@ -74,7 +78,6 @@
 }
 
 /* Field variants */
-/* stylelint-disable no-descending-specificity */
 .coop-field.coop-field-inline {
   .coop-field-markers {
     padding-left: var(--spacing-12);
@@ -86,28 +89,25 @@
   }
 }
 
-.coop-field:has(input:checked) {
-  --field-border: var(--color-text-black);
-}
-
 .coop-fieldset-fields[data-boxed="true"] .coop-field,
 .coop-field[data-boxed="true"] {
-  --min-width: 160px;
-  --field-border: var(--color-mid-dark-grey);
-  --border-width: 2px;
+  --field-min-width: 160px;
+  --field-border: var(--color-grey-700);
+  --field-border-width: 2px;
 
   padding: 1rem;
   border-radius: var(--ui-border-radius-sm);
-  box-shadow: inset 0 0 0 var(--border-width) var(--field-border);
+  box-shadow: inset 0 0 0 var(--field-border-width) var(--field-border);
   transition: box-shadow 0.1s ease-out;
 
   &:has(input:checked),
   &:not(:has(:disabled)):hover {
     --field-border: var(--color-text-black);
-    --border-width: 4px;
+    --field-border-width: 4px;
   }
-
+  /* stylelint-disable-next-line no-descending-specificity */
   .coop-field-label,
+  /* stylelint-disable-next-line no-descending-specificity */
   .coop-field-label > span {
     width: 100%;
   }
@@ -115,6 +115,7 @@
 
 .coop-fieldset-fields[data-boxed="true"] .coop-field.coop-field-inline,
 .coop-field.coop-field-inline[data-boxed="true"] {
+  /* stylelint-disable-next-line no-descending-specificity */
   label > span::after {
     content: "";
 
@@ -160,13 +161,15 @@
 .coop-field:not(.coop-fieldset[data-error="true"] .coop-field, .coop-field[data-hide-error="true"]):has(:user-invalid),
 .coop-fieldset:not([data-hide-error="true"]):is([data-error="true"]) {
   padding-left: var(--spacing-16);
-  border-left: 4px solid var(--color-error-red);
+  border-left: 4px solid var(--color-error);
 }
-
+/* stylelint-disable-next-line no-descending-specificity */
 .coop-field:not(.coop-field-inline):is([data-error="true"]),
+/* stylelint-disable-next-line no-descending-specificity */
 .coop-field:not(.coop-field-inline):has(:user-invalid),
+/* stylelint-disable-next-line no-descending-specificity */
 .coop-fieldset[data-error="true"] .coop-field:not(.coop-field-inline) {
-  --field-border: var(--color-error-red);
+  --field-border: var(--color-error);
 }
 
 // If the below behaviour is not desirable, and we want to keep labels black,
@@ -175,19 +178,22 @@
 // .coop-fieldset:disabled {
 //   .coop-checkbox-wrapper,
 //   .coop-radio-wrapper {
-//     color: var(--color-mid-grey);
+//     color: var(--color-grey-600);
 //   }
 // }
 
 /* Disabled states */
 
+/* stylelint-disable-next-line no-descending-specificity */
 .coop-field:has(.coop-field-element:disabled),
+/* stylelint-disable-next-line no-descending-specificity */
 .coop-fieldset:disabled,
+/* stylelint-disable-next-line no-descending-specificity */
 .coop-fieldset:disabled .coop-field,
 .coop-fieldset-fields[data-boxed] .coop-field:has(.coop-field-element:disabled) {
-  --field-border: var(--color-mid-light-grey);
-  --border-width: 2px;
-
+  --field-border: var(--color-grey-500);
+  --field-border-width: 2px;
+  /* stylelint-disable no-descending-specificity */
   input,
   select,
   textarea,
@@ -200,7 +206,8 @@
   .coop-field-label,
   .coop-field-error,
   .coop-field-hint {
-    color: var(--color-mid-grey);
+    color: var(--color-grey-600);
   }
+
+  /* stylelint-enable no-descending-specificity */
 }
-/* stylelint-enable no-descending-specificity */

package/src/{main.scss → foundations.scss}

@@ -3,4 +3,4 @@
 @use "./typography";
 @use "./layout";
 @use "./form";
-@use "./required-backgrounds";
+@use "./required-utilities";

package/src/required-utilities.scss

@@ -0,0 +1,36 @@
+.bg-tint-grey {
+  --bg-color: var(--color-tint-grey);
+
+  background-color: var(--color-tint-grey);
+}
+
+.bg-offer,
+.bg-red {
+  --bg-color: var(--color-offer);
+
+  background-color: var(--color-offer);
+}
+
+.bg-teal {
+  --bg-color: var(--color-teal);
+
+  background-color: var(--color-teal);
+}
+
+.bg-transparent {
+  --bg-color: transparent;
+
+  background-color: transparent;
+}
+
+.border-grey {
+  --border-color: var(--color-grey-500);
+
+  border-color: var(--color-grey-500);
+}
+
+.border-teal {
+  --border-color: var(--color-teal);
+
+  border-color: var(--color-teal);
+}

package/src/typography/misc.scss

@@ -5,11 +5,11 @@ hr {
 
   height: 0;
   margin: var(--spacing-16) 0;
-  border-color: var(--color-mid-grey);
+  border-color: var(--color-grey-600);
   border-style: solid;
   border-width: 0 0 1px 0;
 
-  color: var(--color-mid-grey);
+  color: var(--color-grey-600);
 
   @media (min-width: $mq-medium) {
     margin: var(--spacing-32) 0;

package/src/typography/text.scss

@@ -62,7 +62,7 @@ kbd {
 
   margin: 0 1px;
   padding: 2px 4px;
-  border: 1px solid var(--color-mid-light-grey);
+  border: 1px solid var(--color-grey-500);
   border-radius: 0.25rem;
 
   font-weight: 500;
@@ -80,20 +80,65 @@ small {
 
 /* Background aware colors */
 [class*="bg-dark"],
-[class*="bg-mid-dark"],
-.bg-offer-red,
+.bg-brand-blue,
 .bg-black,
 .bg-blue,
+.bg-blue-900,
+.bg-blue-700,
+.bg-blue-500,
+.bg-teal,
+.bg-teal-500,
+.bg-grey-900,
+.bg-grey-800,
+.bg-grey-700,
+.bg-grey-warm-900,
+.bg-grey-cool-900,
 .bg-green,
-.bg-coop-blue {
+.bg-green-500,
+.bg-success,
+.bg-red,
+.bg-red-500,
+.bg-error,
+.bg-offer,
+// shortcuts
+.bg-button-primary,
+.bg-button-primary2,
+.bg-purple,
+.bg-purple-500,
+.bg-footer {
   color: var(--color-white);
 }
 
 [class*="bg-light"],
 [class*="bg-tint"],
-[class*="bg-mid-light"],
-.bg-mid-grey,
+.bg-blue-100,
+// notifications
+.bg-red-100,
+.bg-error-light,
+.bg-green-100,
+.bg-success-light,
+.bg-yellow,
+.bg-yellow-500,
+.bg-yellow-100,
+.bg-alert,
+.bg-alert-light,
+// neutrals
+.bg-grey-600,
+.bg-grey-500,
+.bg-grey-400,
+.bg-grey-300,
+.bg-grey-200,
+.bg-grey-100,
+.bg-grey-cool-100,
+.bg-grey-cool-500,
+.bg-grey-warm-100,
+.bg-grey-warm-500,
 .bg-white,
+.bg-primary, // white
+.bg-secondary,
+.bg-membership,
+.bg-footer-light,
+.bg-neutral-warm,
 .bg-none {
   color: var(--color-text-default);
 }

package/src/vars/colors.scss

@@ -1,25 +1,94 @@
 :root {
-  /* Core brands */
+  /* Brand colors */
   --color-brand-blue: #00a1cc;
-  --color-offer-red: #d12430;
-  --color-error-red: #e20f14;
 
-  /* Colors */
+  /* Blues */
+  --color-blue-950: #002c3d; // link:active // INTERNAL USAGE
+  --color-blue-800: #00394e; // link:hover // INTERNAL USAGE
+  --color-blue-700: #005878; // button
+  --color-blue-500: #00729a; // link
+  --color-blue-100: #ecf2fb;
+  --color-blue: var(--color-blue-500);
+
+  /* Semantics for blues */
+  --color-text-link: var(--color-blue-500);
+  // TODO decide if we are going to replace those with function as we do for button:hover/active states
+  --color-text-link-hover: var(--color-blue-800); // blue-800
+  --color-text-link-active: var(--color-blue-950); // blue-950
+  --color-text-link-visited: var(--color-blue-950); // blue-950
+
+  /* Teals */
+  --color-teal-500: #0f8482;
+  --color-teal: var(--color-teal-500);
+
+  /* Purples */
+  --color-purple-500: #8d44d8;
+  --color-purple: var(--color-purple-500);
+  --color-focus: var(--color-purple-500);
+
+  /* Reds */
+  --color-red-100: #fcf1f1;
+  --color-red-500: #d12430;
+  --color-red: var(--color-red-500);
+
+  /* Greens */
+  --color-green-100: #dcedc8;
+  --color-green-500: #5b7f2e;
+  --color-green: var(--color-green-500);
+
+  /* Yellows */
+  --color-yellow-100: #f8eec7;
+  --color-yellow-500: #ffd309;
+  --color-yellow: var(--color-yellow-500);
+
+  --color-offer: var(--color-red-500);
+
+  /* Notifications */
+  --color-error: var(--color-red-500);
+  --color-error-light: var(--color-red-100);
+  --color-alert: var(--color-yellow-500);
+  --color-alert-light: var(--color-yellow-100);
+  --color-success: var(--color-green-500);
+  --color-success-light: var(--color-green-100);
+  // --color-inform: #0761c2;
+  // --color-inform-light: #eef3fc;
+
+  /* NEUTRAL COLOURS */
+
   --color-white: #fff;
   --color-black: #000;
-  --color-navy: #003057;
-  --color-focus: #8d44d8;
+
+  /* Primitive greys */
+
+  --color-grey-warm-100: #f5f5f0;
+  --color-grey-warm-500: #e5e3da;
+  --color-grey-warm-900: #3a352f;
+  --color-grey-warm: var(--color-grey-warm-500);
+
+  --color-grey-cool-100: #f2f4f7;
+  --color-grey-cool-500: #dde9ed; // used as searchbox border
+  --color-grey-cool-900: #1f262c;
+  --color-grey-cool: var(--color-grey-cool-500);
+
+  --color-grey-900: #282828;
+  --color-grey-800: #595959;
+  --color-grey-700: #6e6e6e;
+  --color-grey-600: #c4c4c4;
+  --color-grey-500: #d8d8d8;
+  --color-grey-400: #e6e6e6;
+  --color-grey-300: #efefef; // used on button
+  --color-grey-200: #f3f3f3; // tint-grey
+  --color-grey-100: #fafafa;
+  --color-grey: var(--color-grey-500);
 
   /* Text */
-  --color-text-default: #282828;
-  --color-text-alt: #595959;
+  --color-text-default: var(--color-grey-900); // grey-900
+  --color-text-alt: var(--color-grey-800); // grey-800
   --color-text-black: var(--color-black);
   --color-text-white: var(--color-white);
-  --color-text-navy: var(--color-navy);
-  --color-text-link: #00729a;
-  --color-text-link-hover: #00394e;
-  --color-text-link-active: #002c3d;
-  --color-text-link-visited: #002c3d;
+  --color-text-dark-blue: var(--color-dark-blue);
+
+  /* TERTIARY COLOURS */
 
   /* Tints */
   --color-tint-purple: #fef2ff;
@@ -30,22 +99,11 @@
   --color-tint-yellow: #fff6da;
   --color-tint-lilac: #f2f2ff;
   --color-tint-blue: #e6f6fa;
-  --color-tint-grey: #f3f3f3;
-  --color-tint-brown: #f5f5f0;
-
-  /* Grey backgrounds */
-  --color-dark-grey: #333;
-  --color-mid-dark-grey: #6e6e6e;
-  --color-mid-grey: #c4c4c4;
-  --color-mid-light-grey: #d8d8d8;
-  --color-light-grey: #efefef;
-
-  --color-grey-neutral-light: #f3f3f3;
-  --color-grey-neutral-warm: #f5f5f0;
-  --color-grey-neutral-cool: #dde9ed;
-  --color-grey-neutral-cool-light: #f2f4f7;
-
-  /* Reintroducing Co-op branding colors */
+
+  --color-tint-grey: var(--color-grey-200);
+  --color-tint-brown: var(--color-grey-warm-100); // #f5f5f0
+
+  /* Lights */
   --color-light-purple: #f8beff;
   --color-light-pink: #ff94bf;
   --color-light-green: #e1ec54;
@@ -54,6 +112,8 @@
   --color-light-yellow: #ffd245;
   --color-light-lilac: #bfbffd;
   --color-light-blue: #bfe7f2;
+
+  /* Darks */
   --color-dark-purple: #c164c9;
   --color-dark-pink: #f85792;
   --color-dark-green: #819c00;
@@ -62,33 +122,4 @@
   --color-dark-yellow: #c08a00;
   --color-dark-lilac: #6762f9;
   --color-dark-blue: #003057;
-
-  /* Shades in use */
-  --color-green-light-6: #b9e277;
-  --color-red-dark-4: #ba2327;
-  --color-yellow-mid-5: #ffd309; // for skipnav background
-
-  /* Alternative colors */
-  --color-alt-light-blue: #99e0f5;
-  --color-alt-light-pink: #ffdbdb;
-  --color-blue-light-10: #eef3fc;
-
-  /* Primary green */
-  --color-green: #0f8482;
-  --color-green-hover: #1c6b6a;
-  --color-green-active: #124948;
-
-  /* Primary Blue  */
-  --color-blue: #005878;
-  --color-blue-hover: #003e55;
-  --color-blue-active: #001f2b;
-
-  /* Primary Grey */
-  --color-grey: #efefef;
-  --color-grey-hover: #d8d8d8;
-  --color-grey-active: #c4c4c4;
-
-  /* Primary White */
-  --color-white-hover: var(--color-grey);
-  --color-white-active: #d8d8d8;
 }

package/src/vars.scss

@@ -1,6 +1,4 @@
 @use "./vars/colors";
-@use "./vars/colors-notifications";
-
 @use "./vars/ui";
 @use "./vars/spacing";
 @use "./vars/typography";

package/dist/main.css

@@ -1 +0,0 @@
-@import "https://cdn.fonts.net/t/1.css?apiType=css&projectid=d984f56e-f9bd-4c14-bb29-2558d7ff893e";:root{--color-brand-blue:#00a1cc;--color-offer-red:#d12430;--color-error-red:#e20f14;--color-white:#fff;--color-black:#000;--color-navy:#003057;--color-focus:#8d44d8;--color-text-default:#282828;--color-text-alt:#595959;--color-text-black:var(--color-black);--color-text-white:var(--color-white);--color-text-navy:var(--color-navy);--color-text-link:#00729a;--color-text-link-hover:#00394e;--color-text-link-active:#002c3d;--color-text-link-visited:#002c3d;--color-tint-purple:#fef2ff;--color-tint-pink:#ffeaf2;--color-tint-green:#f9fbdd;--color-tint-orange:#ffede0;--color-tint-red:#ffe8e9;--color-tint-yellow:#fff6da;--color-tint-lilac:#f2f2ff;--color-tint-blue:#e6f6fa;--color-tint-grey:#f3f3f3;--color-tint-brown:#f5f5f0;--color-dark-grey:#333;--color-mid-dark-grey:#6e6e6e;--color-mid-grey:#c4c4c4;--color-mid-light-grey:#d8d8d8;--color-light-grey:#efefef;--color-grey-neutral-light:#f3f3f3;--color-grey-neutral-warm:#f5f5f0;--color-grey-neutral-cool:#dde9ed;--color-grey-neutral-cool-light:#f2f4f7;--color-light-purple:#f8beff;--color-light-pink:#ff94bf;--color-light-green:#e1ec54;--color-light-orange:#ffa465;--color-light-red:#ff8c90;--color-light-yellow:#ffd245;--color-light-lilac:#bfbffd;--color-light-blue:#bfe7f2;--color-dark-purple:#c164c9;--color-dark-pink:#f85792;--color-dark-green:#819c00;--color-dark-orange:#e85a00;--color-dark-red:#f14f57;--color-dark-yellow:#c08a00;--color-dark-lilac:#6762f9;--color-dark-blue:#003057;--color-green-light-6:#b9e277;--color-red-dark-4:#ba2327;--color-yellow-mid-5:#ffd309;--color-alt-light-blue:#99e0f5;--color-alt-light-pink:#ffdbdb;--color-blue-light-10:#eef3fc;--color-green:#0f8482;--color-green-hover:#1c6b6a;--color-green-active:#124948;--color-blue:#005878;--color-blue-hover:#003e55;--color-blue-active:#001f2b;--color-grey:#efefef;--color-grey-hover:#d8d8d8;--color-grey-active:#c4c4c4;--color-white-hover:var(--color-grey);--color-white-active:#d8d8d8;--color-red-error:#e20f14;--color-red-error-text:#d12430;--color-red-error-light:#fcf1f1;--color-orange-alert:#f8d156;--color-orange-alert-light:#f8eec7;--color-green-success:#50811b;--color-green-success-light:#d7e3c6;--color-blue-inform:#0761c2;--color-blue-inform-light:#eef3fc;--color-blue-notification:var(--color-blue-inform);--color-blue-notification-light:var(--color-blue-inform-light);--ui-shadow:0 2px 4px 0 #00000026;--ui-shadow-hover:0 2px 4px 0 #00000040;--ui-transition-hover:.1s ease-out;--ui-transition-hover-property:background-color,color;--ui-border-radius-sm:4px;--ui-border-radius-md:6px;--ui-border-radius-lg:8px;--ui-border-radius-xl:12px;--ui-border-radius-2xl:16px;--ui-border-radius-3xl:24px;--ui-border-radius-full:calc(infinity*1px);--ui-text-underline-offset:3px;--spacing-64:4rem;--spacing-60:3.75rem;--spacing-58:3.625rem;--spacing-56:3.5rem;--spacing-54:3.375rem;--spacing-52:3.25rem;--spacing-48:3rem;--spacing-40:2.5rem;--spacing-32:2rem;--spacing-24:1.5rem;--spacing-20:1.25rem;--spacing-18:1.125rem;--spacing-16:1rem;--spacing-14:.875rem;--spacing-12:.75rem;--spacing-10:.625rem;--spacing-8:.5rem;--spacing-6:.375rem;--spacing-4:.25rem;--spacing-2:.125rem;--font-family:"Avenir Next","Avenir-Next","Helvetica Neue",Helvetica,Arial,sans-serif;--font-family-headline:"Co-opHeadline","Impact Fallback",sans-serif;--font-weight-default:normal;--font-weight-medium:500;--font-weight-demibold:600;--text-size-10:.625rem;--text-size-11:.6875rem;--text-size-12:.75rem;--text-size-13:.8125rem;--text-size-14:.875rem;--text-size-16:1rem;--text-size-18:1.125rem;--text-size-20:1.25rem;--text-size-22:1.375rem;--text-size-24:1.5rem;--text-size-26:1.625rem;--text-size-28:1.75rem;--text-size-30:1.875rem;--text-size-32:2rem;--text-size-36:2.25rem;--text-size-40:2.5rem;--text-size-46:2.875rem;--text-size-48:3rem;--text-size-56:3.5rem;--text-size-60:3.75rem;--text-size-64:4rem;--text-size-72:4.5rem;--text-size-82:5.125rem;--text-size-96:6rem;--text-size-default:var(--text-size-18);--type-line-height-default:1.5;--type-line-height-tight:1.25;--type-line-height-headline:1.05;--type-line-height-loose:1.75}*,:before,:after{box-sizing:border-box}html{text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:1rem}body{min-height:100vh;font-family:var(--font-family);font-size:var(--text-size-default);line-height:var(--type-line-height-default);color:var(--color-text-default);border:0;margin:0;padding:0}body,figure{margin-block-end:0}input,button,textarea,select{font-family:inherit;font-size:inherit}button,input{line-height:1.1}a,button,u{text-underline-offset:var(--ui-text-underline-offset)}a:not([class]){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}svg.coop-icon{overflow:visible}svg.coop-icon:not([width]){width:1em;height:1em}:target{scroll-margin-block:5ex}.sr-only:not(:focus,:active){white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*,:after,:before{animation:none!important}}ul,ol,dl,p{margin:0}dt{font-weight:500}ul,ol,dd{margin-inline-start:var(--spacing-24);padding:0}@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")}@font-face{font-family:Impact Fallback;ascent-override:97%;descent-override:normal;line-gap-override:0%;size-adjust:94%;src:local(Impact)}a:active,a:focus-visible,.coop-link:active,.coop-link:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;transition:none}a:not([class*=bg]),.coop-link{color:var(--color-text-link);text-decoration:underline}a:not([class*=bg]):hover,.coop-link:hover{color:var(--color-text-link-hover)}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-lead-p{font-size:var(--text-size-22)}@media (width>=48em){.coop-lead-p{font-size:var(--text-size-26)}}blockquote{margin-bottom:1rem;margin-left:1rem;padding-left:1rem}blockquote:after,blockquote:before{content:"";background:var(--color-tint-grey);width:3rem;height:6px;margin:1rem 0;display:block}blockquote p{margin-bottom:1rem;font-style:normal;font-weight:400}@media (width>=48em){blockquote{margin-bottom:2rem}}code,kbd,samp{font-family:monospace;font-size:80%}code,samp{border-radius:var(--ui-border-radius-sm);white-space:nowrap;background-color:var(--color-tint-grey);margin:0 2px;padding:3px 5px;line-height:1}kbd{border:1px solid var(--color-mid-light-grey);white-space:nowrap;background-color:var(--color-tint-grey);border-radius:.25rem;margin:0 1px;padding:2px 4px;font-weight:500;line-height:1;display:inline-block;box-shadow:0 1px 1px #0003}small{font-size:.875rem}[class*=bg-dark],[class*=bg-mid-dark],.bg-offer-red,.bg-black,.bg-blue,.bg-green,.bg-coop-blue{color:var(--color-white)}[class*=bg-light],[class*=bg-tint],[class*=bg-mid-light],.bg-mid-grey,.bg-white,.bg-none{color:var(--color-text-default)}.coop-prose ul,.coop-prose ol,.coop-prose dl{margin-block-end:1rem}.coop-prose dd+dt{margin-top:var(--spacing-8)}.coop-prose p{margin-block:0}.coop-prose :is(p,ol,ul,dl)+:not(ol,ul,dl){margin-block-start:var(--spacing-16)}.coop-prose :is(p)+:is(ol,ul,dl){margin-block-start:var(--spacing-8)}h1,h2,h3,h4,h5,h6,strong{font-weight:600}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--spacing-8)}h1{font-size:var(--text-size-30);line-height:var(--type-line-height-tight);text-wrap:balance;margin-bottom:0}h1.coop-mega{font-size:var(--text-size-48)}@media (width>=48em){h1.coop-mega{font-size:var(--text-size-56)}h1{font-size:var(--text-size-46)}}h2{font-size:var(--text-size-26);line-height:var(--type-line-height-tight)}@media (width>=48em){h2{font-size:var(--text-size-32)}}h3{font-size:var(--text-size-22);line-height:var(--type-line-height-default)}@media (width>=48em){h3{font-size:var(--text-size-26)}}h4,h5,h6{font-size:var(--text-size-18);line-height:var(--type-line-height-default)}@media (width>=48em){h4,h5,h6{font-size:var(--text-size-22)}}h1:where(.coop-headline-mega){font-family:var(--font-family-headline);font-size:var(--text-size-48);line-height:var(--type-line-height-headline);color:var(--color-brand-blue)}@media (width>=37.5em){h1:where(.coop-headline-mega){font-size:var(--text-size-64)}}@media (width>=48em){h1:where(.coop-headline-mega){font-size:var(--text-size-82)}}h1:where(.coop-headline-mega-clamp){font-family:var(--font-family-headline);font-size:clamp(var(--text-size-48),10vw,var(--text-size-82));line-height:var(--type-line-height-headline);color:var(--color-brand-blue)}h1:where(.coop-headline){font-family:var(--font-family-headline);font-size:var(--text-size-40);line-height:var(--type-line-height-headline);color:var(--color-brand-blue)}@media (width>=37.5em){h1:where(.coop-headline){font-size:var(--text-size-48)}}@media (width>=48em){h1:where(.coop-headline){font-size:var(--text-size-64)}}h1:where(.coop-headline-clamp){font-family:var(--font-family-headline);font-size:clamp(var(--text-size-40),10vw,var(--text-size-64));line-height:var(--type-line-height-headline);color:var(--color-brand-blue)}[class*=headline].uppercase{line-height:1}hr{height:0;margin:var(--spacing-16)0;border-color:var(--color-mid-grey);color:var(--color-mid-grey);border-style:solid;border-width:0 0 1px;display:block}@media (width>=48em){hr{margin:var(--spacing-32)0}}.grayscale{filter:grayscale()}.coop-wrap{width:calc(100% - 2rem);max-width:var(--coop-wrap-max-width,79rem);margin-left:auto;margin-right:auto}@media (width>=48em){.coop-wrap{width:calc(100% - 3rem)}}@media (width>=82em){.coop-wrap{width:calc(100% - 4rem)}}.padding-responsive{padding:1rem}@media (width>=48em){.padding-responsive{padding:2rem}}.coop-section{width:100%}.coop-form{gap:var(--spacing-32);flex-direction:column;display:flex}.coop-field{--font-size:var(--text-size-18);--field-border:var(--color-mid-dark-grey);--field-size:var(--spacing-32);--field-gap:var(--spacing-8);--field-hint-offset:-2px;gap:var(--field-gap);flex-direction:column;display:flex;position:relative}.coop-field:has(.coop-field-element[data-size=sm]),.coop-fieldset[data-size=sm] .coop-field{--field-size:var(--spacing-24);--font-size:var(--text-size-16);--field-hint-offset:0px}.coop-field:has(.coop-field-element[data-size=lg]),.coop-fieldset[data-size=lg] .coop-field{--field-size:var(--spacing-40);--font-size:var(--text-size-20);--field-hint-offset:-4px}.coop-field-control{align-items:center;display:flex;position:relative}.coop-field-markers{flex-direction:column;flex-grow:1;display:flex}.coop-field-error{color:var(--color-offer-red);display:block}.coop-field-hint{color:var(--color-text-alt);display:block}.coop-field-label{width:fit-content;font-weight:var(--font-weight-medium);color:var(--color-text);align-items:center;padding:0;display:flex}.coop-field-label>span{gap:var(--spacing-8);justify-content:space-between;align-items:center;display:flex}.coop-field.coop-field-inline .coop-field-markers{padding-left:var(--spacing-12)}.coop-field.coop-field-inline .coop-field-label+.coop-field-hint,.coop-field.coop-field-inline .coop-field-label+.coop-field-error{margin-top:var(--field-hint-offset)}.coop-field:has(input:checked){--field-border:var(--color-text-black)}.coop-fieldset-fields[data-boxed=true] .coop-field,.coop-field[data-boxed=true]{--min-width:160px;--field-border:var(--color-mid-dark-grey);--border-width:2px;border-radius:var(--ui-border-radius-sm);box-shadow:inset 0 0 0 var(--border-width)var(--field-border);padding:1rem;transition:box-shadow .1s ease-out}.coop-fieldset-fields[data-boxed=true] .coop-field:has(input:checked),.coop-fieldset-fields[data-boxed=true] .coop-field:not(:has(:disabled)):hover,.coop-field[data-boxed=true]:has(input:checked),.coop-field[data-boxed=true]:not(:has(:disabled)):hover{--field-border:var(--color-text-black);--border-width:4px}.coop-fieldset-fields[data-boxed=true] .coop-field .coop-field-label,.coop-fieldset-fields[data-boxed=true] .coop-field .coop-field-label>span,.coop-field[data-boxed=true] .coop-field-label,.coop-field[data-boxed=true] .coop-field-label>span{width:100%}.coop-fieldset-fields[data-boxed=true] .coop-field.coop-field-inline label>span:after,.coop-field.coop-field-inline[data-boxed=true] label>span:after{content:"";width:calc(100% + 2rem);height:calc(100% + 2rem);position:absolute;top:-1rem;left:-1rem}.coop-fieldset{border:0;flex-direction:column;width:100%;margin:0;padding:0;display:flex}.coop-fieldset-fields{gap:var(--spacing-8)var(--spacing-32);flex-direction:column;display:flex}.coop-fieldset-fields:not(:first-child){margin-top:var(--spacing-8)}.coop-fieldset-fields[data-orientation=horizontal]{flex-flow:wrap}.coop-field:not(.coop-fieldset[data-error=true] .coop-field,.coop-field[data-hide-error=true])[data-error=true],.coop-fieldset:not([data-hide-error=true])[data-error=true]{padding-left:var(--spacing-16);border-left:4px solid var(--color-error-red)}.coop-field:not(.coop-fieldset[data-error=true] .coop-field,.coop-field[data-hide-error=true]):has(:user-invalid){padding-left:var(--spacing-16);border-left:4px solid var(--color-error-red)}.coop-field:not(.coop-field-inline)[data-error=true],.coop-fieldset[data-error=true] .coop-field:not(.coop-field-inline){--field-border:var(--color-error-red)}.coop-field:not(.coop-field-inline):has(:user-invalid){--field-border:var(--color-error-red)}.coop-field:has(.coop-field-element:disabled),.coop-fieldset:disabled,.coop-fieldset:disabled .coop-field,.coop-fieldset-fields[data-boxed] .coop-field:has(.coop-field-element:disabled){--field-border:var(--color-mid-light-grey);--border-width:2px}.coop-field:has(.coop-field-element:disabled) input,.coop-field:has(.coop-field-element:disabled) select,.coop-field:has(.coop-field-element:disabled) textarea,.coop-field:has(.coop-field-element:disabled) label,.coop-field:has(.coop-field-element:disabled) legend,.coop-field:has(.coop-field-element:disabled) input+div:has(label),.coop-fieldset:disabled input,.coop-fieldset:disabled select,.coop-fieldset:disabled textarea,.coop-fieldset:disabled label,.coop-fieldset:disabled legend,.coop-fieldset:disabled input+div:has(label),.coop-fieldset:disabled .coop-field input,.coop-fieldset:disabled .coop-field select,.coop-fieldset:disabled .coop-field textarea,.coop-fieldset:disabled .coop-field label,.coop-fieldset:disabled .coop-field legend,.coop-fieldset:disabled .coop-field input+div:has(label),.coop-fieldset-fields[data-boxed] .coop-field:has(.coop-field-element:disabled) input,.coop-fieldset-fields[data-boxed] .coop-field:has(.coop-field-element:disabled) select,.coop-fieldset-fields[data-boxed] .coop-field:has(.coop-field-element:disabled) textarea,.coop-fieldset-fields[data-boxed] .coop-field:has(.coop-field-element:disabled) label,.coop-fieldset-fields[data-boxed] .coop-field:has(.coop-field-element:disabled) legend,.coop-fieldset-fields[data-boxed] .coop-field:has(.coop-field-element:disabled) input+div:has(label){cursor:not-allowed}.coop-field:has(.coop-field-element:disabled) .coop-field-label,.coop-field:has(.coop-field-element:disabled) .coop-field-error,.coop-field:has(.coop-field-element:disabled) .coop-field-hint,.coop-fieldset:disabled .coop-field-label,.coop-fieldset:disabled .coop-field-error,.coop-fieldset:disabled .coop-field-hint,.coop-fieldset:disabled .coop-field .coop-field-label,.coop-fieldset:disabled .coop-field .coop-field-error,.coop-fieldset:disabled .coop-field .coop-field-hint,.coop-fieldset-fields[data-boxed] .coop-field:has(.coop-field-element:disabled) .coop-field-label,.coop-fieldset-fields[data-boxed] .coop-field:has(.coop-field-element:disabled) .coop-field-error,.coop-fieldset-fields[data-boxed] .coop-field:has(.coop-field-element:disabled) .coop-field-hint{color:var(--color-mid-grey)}.bg-tint-grey{background-color:var(--color-tint-grey)}.bg-offer-red{background-color:var(--color-offer-red)}

package/dist/required-backgrounds.css

@@ -1 +0,0 @@
-.bg-tint-grey{background-color:var(--color-tint-grey)}.bg-offer-red{background-color:var(--color-offer-red)}

package/dist/vars/colors-notifications.css

@@ -1 +0,0 @@
-:root{--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)}

package/src/required-backgrounds.scss

@@ -1,7 +0,0 @@
-.bg-tint-grey {
-  background-color: var(--color-tint-grey);
-}
-
-.bg-offer-red {
-  background-color: var(--color-offer-red);
-}

package/src/vars/colors-notifications.scss

@@ -1,14 +0,0 @@
-:root {
-  /* Notifications */
-  --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);
-}

package/src/vars/colors-palette.scss

@@ -1,54 +0,0 @@
-$dark-colors: (
-  "green": var(--color-dark-green),
-  "orange": var(--color-dark-orange),
-  "pink": var(--color-dark-pink),
-  "red": var(--color-dark-red),
-  "purple": var(--color-dark-purple),
-  "blue": var(--color-dark-blue),
-  "lilac": var(--color-dark-lilac),
-  "yellow": var(--color-dark-yellow),
-);
-$light-colors: (
-  "green": var(--color-light-green),
-  "orange": var(--color-light-orange),
-  "pink": var(--color-light-pink),
-  "red": var(--color-light-red),
-  "purple": var(--color-light-purple),
-  "blue": var(--color-light-blue),
-  "lilac": var(--color-light-lilac),
-  "yellow": var(--color-light-yellow),
-);
-$tint-colors: (
-  "purple": var(--color-tint-purple),
-  "orange": var(--color-tint-orange),
-  "pink": var(--color-tint-pink),
-  "red": var(--color-tint-red),
-  "green": var(--color-tint-green),
-  "yellow": var(--color-tint-yellow),
-  "lilac": var(--color-tint-lilac),
-  "blue": var(--color-tint-blue),
-  "brown": var(--color-tint-brown),
-  "grey": var(--color-tint-grey),
-);
-$grey-colors: (
-  "dark-grey": var(--color-dark-grey),
-  "mid-dark-grey": var(--color-mid-dark-grey),
-  "mid-grey": var(--color-mid-grey),
-  "mid-light-grey": var(--color-mid-light-grey),
-  "light-grey": var(--color-light-grey),
-);
-$text-colors: (
-  "white": var(--color-text-white),
-  "alt": var(--color-text-alt),
-  "default": var(--color-text-default),
-  "black": var(--color-text-black),
-  "navy": var(--color-text-navy),
-  "link": var(--color-text-link),
-);
-$standalone-colors: (
-  "brand-blue": var(--color-brand-blue),
-  "offer-red": var(--color-offer-red),
-  "error-red": var(--color-error-red),
-  "blue": var(--color-blue),
-  "green": var(--color-green),
-);