@coopdigital/styles 0.43.0 → 0.45.0

package/dist/vars-legacy.css

@@ -1 +1 @@
-:root{--spacing-base:var(--spacing-32);--spacing-base--3-4:var(--spacing-24);--spacing-base--1-2:var(--spacing-16);--spacing-base--1-4:var(--spacing-8);--spacing-base--1-8:var(--spacing-2);--spacing-medium:var(--spacing-64);--spacing-medium--3-4:var(--spacing-48);--spacing-medium--1-2:var(--spacing-32);--spacing-medium--1-4:var(--spacing-16);--spacing-medium--1-8:var(--spacing-8);--color-brand-cls-blue-dark:#114d94;--color-brand-cls-blue-mid:#0761c2;--color-brand-cls-blue-light:#287cdf;--color-brand-bac-purple:#674170;--color-brand-coop:#00a1cc;--color-brand-deals:#d12430;--color-brand:var(--color-brand-coop);--color-deal-red:var(--color-brand-deals);--color-white:#fff;--color-black:#000;--color-text:#282828;--color-text-alt:#595959;--color-tint-purple:#fef2ff;--color-tint-pink:#ffeaf2;--color-tint-green:#f9fbdd;--color-tint-orange:#ffede0;--color-tint-red:#ffe8e9;--color-tint-yellow:#fff6da;--color-tint-lilac:#f2f2ff;--color-tint-blue:#e6f6fa;--color-tint-grey:#f3f3f3;--color-tint-brown:#f5f5f0;--color-grey-mid-light:#d8d8d8;--color-grey-mid:#c4c4c4;--color-grey-dark:#6e6e6e;--color-grey-neutral-light:#f3f3f3;--color-grey-light:var(--color-grey-neutral-light);--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:var(--color-link-active);--color-link--hover:var(--color-link-hover);--color-link--focus:var(--color-link-focus);--color-link--active:var(--color-link-active);--color-link--visited:var(--color-link-active);--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:var(--color-grey-mid-light);--color-button-grey-active:var(--color-grey-mid);--color-button-white:var(--color-white);--color-button-white-hover:var(--color-button-grey);--color-button-white-active:var(--color-grey-mid-light);--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);--color-red-dark-4:#ba2327;--color-red-mid-5:var(--color-red-error);--color-red-light-7:#ff6a6d;--color-red-light-8:#ffc1c3;--color-red-light-9:#ffdbdb;--color-red-light-10:#fcf1f1;--color-red-dark:var(--color-red-dark-4);--color-red-mid:var(--color-red-mid-5);--color-orange-dark-4:#be4015;--color-orange-mid-5:#fc5724;--color-orange-mid-6:#fd7b3b;--color-orange-mid-7:#fd9c59;--color-orange-light-8:#fdb979;--color-orange-light-9:#fee7c1;--color-orange-light-10:#fff8e7;--color-orange-mid:var(--color-orange-mid-5);--color-yellow-dark-4:#cfb214;--color-yellow-mid-5:#ffd309;--color-yellow-mid-6:#ffe53b;--color-yellow-mid-7:#fff372;--color-yellow-light-8:#fffca9;--color-yellow-light-9:#fffbcd;--color-yellow-light-10:#fcf9ee;--color-yellow-mid:var(--color-yellow-mid-5);--color-yellow-light:var(--color-yellow-mid-7);--color-yellow-bright:var(--color-yellow-mid-6);--color-green-dark-2:#3a6002;--color-green-mid-3:#4f820d;--color-green-mid-4:#72aa24;--color-green-mid-5:#96cb48;--color-green-light-6:#b9e277;--color-green-light-8:#e7f7cb;--color-green-light-10:#f6fce9;--color-green-dark:var(--color-green-dark-2);--color-green-mid:var(--color-green-mid-3);--color-green-light:var(--color-green-mid-5);--color-green-bright:var(--color-green-light-6);--color-teal-dark-2:#046062;--color-teal-mid-3:#0f8482;--color-teal-mid-4:#27aaab;--color-teal-mid-6:#4bc7cc;--color-teal-light-7:#79dce3;--color-teal-light-9:#ccf2f7;--color-teal-light-10:#e9fafc;--color-turquoise-dark:var(--color-teal-dark-2);--color-turquoise-mid:var(--color-teal-mid-3);--color-turquoise-light:var(--color-teal-light-7);--color-turquoise-bright:var(--color-teal-light-7);--color-blue-dark-3:#114d94;--color-blue-mid-4:#0761c2;--color-blue-mid-6:#519af5;--color-blue-light-8:#80b7ff;--color-blue-light-9:#cfe3ff;--color-blue-light-10:#eef3fc;--color-blue-dark:var(--color-blue-dark-3);--color-blue-bright:var(--color-blue-mid-6);--color-blue-light:var(--color-blue-light-9);--color-blue-mid:var(--color-blue-mid-4);--color-indigo-dark-4:#3b427f;--color-indigo-mid-5:#4f52a8;--color-indigo-mid-7:#8d9ae4;--color-indigo-light-8:#afbdf5;--color-indigo-light-9:#cfdbfe;--color-indigo-light-10:#eff3fa;--color-purple-dark-3:#51178c;--color-purple-mid-4:#6727b9;--color-purple-mid-6:#8d44d8;--color-purple-light-8:#d395fe;--color-purple-light-9:#edc3ff;--color-purple-light-10:#f9edfc;--color-purple-dark:var(--color-purple-dark-3);--color-magenta-dark-3:#812373;--color-magenta-mid-4:#ab278d;--color-magenta-mid-7:#f690f1;--color-magenta-light-8:#feb8ff;--color-magenta-light-9:#fad1fe;--color-magenta-light-10:#faeafc;--color-purple-mid:var(--color-magenta-mid-4);--color-pink-light:var(--color-magenta-mid-7);--color-pink-bright:var(--color-magenta-light-9);--color-navy:#003057;--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-brand-ric-color-navy:var(--color-navy);--color-brand-ric-color-light-purple:var(--color-light-purple);--color-brand-ric-color-light-pink:var(--color-light-pink);--color-brand-ric-color-light-green:var(--color-light-green);--color-brand-ric-color-light-orange:var(--color-light-orange);--color-brand-ric-color-light-red:var(--color-light-red);--color-brand-ric-color-light-yellow:var(--color-light-yellow);--color-brand-ric-color-light-lilac:var(--color-light-lilac);--color-brand-ric-color-light-blue:var(--color-light-blue);--color-brand-ric-color-dark-purple:var(--color-dark-purple);--color-brand-ric-color-dark-pink:var(--color-dark-pink);--color-brand-ric-color-dark-green:var(--color-dark-green);--color-brand-ric-color-dark-orange:var(--color-dark-orange);--color-brand-ric-color-dark-red:var(--color-dark-red);--color-brand-ric-color-dark-yellow:var(--color-dark-yellow);--color-brand-ric-color-dark-lilac:var(--color-dark-lilac);--color-brand-membership-purple-dark-1:#483965;--color-brand-membership-purple-dark-2:#635385;--color-brand-membership-purple-dark-3:#776ca7;--color-brand-membership-purple-mid-5:#8e88ba;--color-brand-membership-purple-mid-6:#847db5;--color-brand-membership-purple-light-8:#b2aece;--color-brand-membership-purple-light-9:#d3d1e4;--color-brand-membership-purple-light-10:#eae8f4;--color-brand-membership-purple-dark:var(--color-brand-membership-purple-dark-3);--color-brand-membership-purple-mid:var(--color-brand-membership-purple-mid-5);--color-brand-membership-purple-bright:var(--color-brand-membership-purple-mid-6);--color-brand-membership-purple-light:var(--color-brand-membership-purple-light-8);--color-brand-membership-purple-lighter:var(--color-brand-membership-purple-light-9);--color-brand-membership-purple-lightest:var(--color-brand-membership-purple-light-10);--color-brand-membership-lilac-dark-1:#52355e;--color-brand-membership-lilac-dark-2:#715287;--color-brand-membership-lilac-dark-3:#806697;--color-brand-membership-lilac-mid-5:#9976a8;--color-brand-membership-lilac-mid-6:#a976bb;--color-brand-membership-lilac-light-8:#bba2c6;--color-brand-membership-lilac-light-9:#ccbad4;--color-brand-membership-lilac-light-10:#e6dde9;--color-brand-membership-lilac-dark:var(--color-brand-membership-lilac-dark-3);--color-brand-membership-lilac-mid:var(--color-brand-membership-lilac-mid-5);--color-brand-membership-lilac-bright:var(--color-brand-membership-lilac-mid-6);--color-brand-membership-lilac-light:var(--color-brand-membership-lilac-light-8);--color-brand-membership-lilac-lighter:var(--color-brand-membership-lilac-light-9);--color-brand-membership-lilac-lightest:var(--color-brand-membership-lilac-light-10);--color-brand-membership-pink-dark-1:#6c3e53;--color-brand-membership-pink-dark-2:#864e68;--color-brand-membership-pink-dark-3:#9d5b7b;--color-brand-membership-pink-mid-5:#bc7190;--color-brand-membership-pink-mid-6:#d15c8c;--color-brand-membership-pink-light-8:#d19fb4;--color-brand-membership-pink-light-9:#e3cbd4;--color-brand-membership-pink-light-10:#f0e5eb;--color-brand-membership-pink-dark:var(--color-brand-membership-pink-dark-3);--color-brand-membership-pink-mid:var(--color-brand-membership-pink-mid-5);--color-brand-membership-pink-bright:var(--color-brand-membership-pink-mid-6);--color-brand-membership-pink-light:var(--color-brand-membership-pink-light-8);--color-brand-membership-pink-lighter:var(--color-brand-membership-pink-light-9);--color-brand-membership-pink-lightest:var(--color-brand-membership-pink-light-10);--color-brand-membership-orange-dark-1:#783620;--color-brand-membership-orange-dark-2:#9b462b;--color-brand-membership-orange-dark-3:#b45d2b;--color-brand-membership-orange-mid-5:#e69c39;--color-brand-membership-orange-mid-6:#f5a74b;--color-brand-membership-orange-light-8:#e6bb8f;--color-brand-membership-orange-light-9:#f0ddd1;--color-brand-membership-orange-light-10:#f7eeeb;--color-brand-membership-orange-dark:var(--color-brand-membership-orange-dark-3);--color-brand-membership-orange-mid:var(--color-brand-membership-orange-mid-5);--color-brand-membership-orange-bright:var(--color-brand-membership-orange-mid-6);--color-brand-membership-orange-light:var(--color-brand-membership-orange-light-8);--color-brand-membership-orange-lighter:var(--color-brand-membership-orange-light-9);--color-brand-membership-orange-lightest:var(--color-brand-membership-orange-light-10);--color-brand-membership-yellow-dark-1:#704e24;--color-brand-membership-yellow-dark-2:#916b3a;--color-brand-membership-yellow-dark-3:#bf843e;--color-brand-membership-yellow-mid-5:#ecd16d;--color-brand-membership-yellow-mid-6:#f8da6d;--color-brand-membership-yellow-light-8:#edd273;--color-brand-membership-yellow-light-9:#f3e2a4;--color-brand-membership-yellow-light-10:#f9f1d1;--color-brand-membership-yellow-dark:var(--color-brand-membership-yellow-dark-3);--color-brand-membership-yellow-mid:var(--color-brand-membership-yellow-mid-5);--color-brand-membership-yellow-bright:var(--color-brand-membership-yellow-mid-6);--color-brand-membership-yellow-light:var(--color-brand-membership-yellow-light-8);--color-brand-membership-yellow-lighter:var(--color-brand-membership-yellow-light-9);--color-brand-membership-yellow-lightest:var(--color-brand-membership-yellow-light-10);--color-brand-membership-green-dark-1:#3b3f25;--color-brand-membership-green-dark-2:#565734;--color-brand-membership-green-dark-3:#6a7345;--color-brand-membership-green-mid-5:#c6c978;--color-brand-membership-green-mid-6:#b3ce7b;--color-brand-membership-green-light-8:#d1d4a5;--color-brand-membership-green-light-9:#e4e5c6;--color-brand-membership-green-light-10:#f6f6eb;--color-brand-membership-green-dark:var(--color-brand-membership-green-dark-3);--color-brand-membership-green-mid:var(--color-brand-membership-green-mid-5);--color-brand-membership-green-bright:var(--color-brand-membership-green-mid-6);--color-brand-membership-green-light:var(--color-brand-membership-green-light-8);--color-brand-membership-green-lighter:var(--color-brand-membership-green-light-9);--color-brand-membership-green-lightest:var(--color-brand-membership-green-light-10);--color-brand-membership-turquoise-dark-1:#2b4946;--color-brand-membership-turquoise-dark-2:#39615f;--color-brand-membership-turquoise-dark-3:#487d7b;--color-brand-membership-turquoise-mid-5:#81b8b8;--color-brand-membership-turquoise-mid-6:#87cdcd;--color-brand-membership-turquoise-light-8:#b9dad9;--color-brand-membership-turquoise-light-9:#d3e7e5;--color-brand-membership-turquoise-light-10:#ecf5f7;--color-brand-membership-turquoise-dark:var(--color-brand-membership-turquoise-dark-3);--color-brand-membership-turquoise-mid:var(--color-brand-membership-turquoise-mid-5);--color-brand-membership-turquoise-bright:var(--color-brand-membership-turquoise-mid-6);--color-brand-membership-turquoise-light:var(--color-brand-membership-turquoise-light-8);--color-brand-membership-turquoise-lighter:var(--color-brand-membership-turquoise-light-9);--color-brand-membership-turquoise-lightest:var(--color-brand-membership-turquoise-light-10);--color-brand-membership-blue-dark-1:#2c4258;--color-brand-membership-blue-dark-2:#456588;--color-brand-membership-blue-dark-3:#5177a3;--color-brand-membership-blue-mid-5:#8bb5e0;--color-brand-membership-blue-mid-6:#8fbae6;--color-brand-membership-blue-light-8:#c1d7ee;--color-brand-membership-blue-light-9:#d8e6f4;--color-brand-membership-blue-light-10:#f0f6fd;--color-brand-membership-blue-dark:var(--color-brand-membership-blue-dark-3);--color-brand-membership-blue-mid:var(--color-brand-membership-blue-mid-5);--color-brand-membership-blue-bright:var(--color-brand-membership-blue-mid-6);--color-brand-membership-blue-light:var(--color-brand-membership-blue-light-8);--color-brand-membership-blue-lighter:var(--color-brand-membership-blue-light-9);--color-brand-membership-blue-lightest:var(--color-brand-membership-blue-light-10);--font-family:"Avenir Next","Avenir-Next","Helvetica Neue",Helvetica,Arial,sans-serif;--font-family-headline:"Co-opHeadline","Impact",Helvetica,Arial,sans-serif;--type-headline-mega-m:5.125rem;--type-headline-mega-s:4rem;--type-headline-mega-xs:3rem;--type-headline-h1-m:4rem;--type-headline-h1-s:3rem;--type-headline-h1-xs:2.5rem;--type-body-l:1.25rem;--type-body-s:1.125rem;--type-line-height:1.5;--type-h1-mega-l:3.5rem;--type-h1-mega-s:3rem;--type-h1-l:2.875rem;--type-h1-s:1.875rem;--type-h2-l:2rem;--type-h2-s:1.625rem;--type-h3-l:1.625rem;--type-h3-s:1.375rem;--type-h456-l:1.375rem;--type-h456-s:1.125rem;--type-blockquote:1.25rem;--type-lp-l:1.625rem;--type-lp-s:1.375rem;--type-sp-l:1.25rem;--type-sp-s:1rem;--ui-shadow:0 2px 10px 0 #00000026;--ui-shadow-hover:0 2px 10px 0 #00000040;--ui-shadow--hover:var(--ui-shadow-hover);--ui-border-radius:8px;--ui-transition-hover:.15s ease-in-out;--ui-transition-hover-property:background-color,color}
+:root{--spacing-base:var(--spacing-32);--spacing-base--3-4:var(--spacing-24);--spacing-base--1-2:var(--spacing-16);--spacing-base--1-4:var(--spacing-8);--spacing-base--1-8:var(--spacing-2);--spacing-medium:var(--spacing-64);--spacing-medium--3-4:var(--spacing-48);--spacing-medium--1-2:var(--spacing-32);--spacing-medium--1-4:var(--spacing-16);--spacing-medium--1-8:var(--spacing-8);--color-brand-cls-blue-dark:#114d94;--color-brand-cls-blue-mid:#0761c2;--color-brand-cls-blue-light:#287cdf;--color-brand-bac-purple:#674170;--color-brand-coop:#00a1cc;--color-brand-deals:#d12430;--color-brand:var(--color-brand-coop);--color-deal-red:var(--color-brand-deals);--color-white:#fff;--color-black:#000;--color-text:#282828;--color-text-alt:#595959;--color-tint-purple:#fef2ff;--color-tint-pink:#ffeaf2;--color-tint-green:#f9fbdd;--color-tint-orange:#ffede0;--color-tint-red:#ffe8e9;--color-tint-yellow:#fff6da;--color-tint-lilac:#f2f2ff;--color-tint-blue:#e6f6fa;--color-tint-grey:#f3f3f3;--color-tint-brown:#f5f5f0;--color-grey-mid-light:#d8d8d8;--color-grey-mid:#c4c4c4;--color-grey-dark:#6e6e6e;--color-grey-neutral-light:#f3f3f3;--color-grey-light:var(--color-grey-neutral-light);--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:var(--color-link-active);--color-link--hover:var(--color-link-hover);--color-link--focus:var(--color-link-focus);--color-link--active:var(--color-link-active);--color-link--visited:var(--color-link-active);--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:var(--color-grey-mid-light);--color-button-grey-active:var(--color-grey-mid);--color-button-white:var(--color-white);--color-button-white-hover:var(--color-button-grey);--color-button-white-active:var(--color-grey-mid-light);--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);--color-red-dark-4:#ba2327;--color-red-mid-5:var(--color-red-error);--color-red-light-7:#ff6a6d;--color-red-light-8:#ffc1c3;--color-red-light-9:#ffdbdb;--color-red-light-10:#fcf1f1;--color-red-dark:var(--color-red-dark-4);--color-red-mid:var(--color-red-mid-5);--color-orange-dark-4:#be4015;--color-orange-mid-5:#fc5724;--color-orange-mid-6:#fd7b3b;--color-orange-mid-7:#fd9c59;--color-orange-light-8:#fdb979;--color-orange-light-9:#fee7c1;--color-orange-light-10:#fff8e7;--color-orange-mid:var(--color-orange-mid-5);--color-yellow-dark-4:#cfb214;--color-yellow-mid-5:#ffd309;--color-yellow-mid-6:#ffe53b;--color-yellow-mid-7:#fff372;--color-yellow-light-8:#fffca9;--color-yellow-light-9:#fffbcd;--color-yellow-light-10:#fcf9ee;--color-yellow-mid:var(--color-yellow-mid-5);--color-yellow-light:var(--color-yellow-mid-7);--color-yellow-bright:var(--color-yellow-mid-6);--color-green-dark-2:#3a6002;--color-green-mid-3:#4f820d;--color-green-mid-4:#72aa24;--color-green-mid-5:#96cb48;--color-green-light-6:#b9e277;--color-green-light-8:#e7f7cb;--color-green-light-10:#f6fce9;--color-green-dark:var(--color-green-dark-2);--color-green-mid:var(--color-green-mid-3);--color-green-light:var(--color-green-mid-5);--color-green-bright:var(--color-green-light-6);--color-teal-dark-2:#046062;--color-teal-mid-3:#0f8482;--color-teal-mid-4:#27aaab;--color-teal-mid-6:#4bc7cc;--color-teal-light-7:#79dce3;--color-teal-light-9:#ccf2f7;--color-teal-light-10:#e9fafc;--color-turquoise-dark:var(--color-teal-dark-2);--color-turquoise-mid:var(--color-teal-mid-3);--color-turquoise-light:var(--color-teal-light-7);--color-turquoise-bright:var(--color-teal-light-7);--color-blue-dark-3:#114d94;--color-blue-mid-4:#0761c2;--color-blue-mid-6:#519af5;--color-blue-light-8:#80b7ff;--color-blue-light-9:#cfe3ff;--color-blue-light-10:#eef3fc;--color-blue-dark:var(--color-blue-dark-3);--color-blue-bright:var(--color-blue-mid-6);--color-blue-light:var(--color-blue-light-9);--color-blue-mid:var(--color-blue-mid-4);--color-indigo-dark-4:#3b427f;--color-indigo-mid-5:#4f52a8;--color-indigo-mid-7:#8d9ae4;--color-indigo-light-8:#afbdf5;--color-indigo-light-9:#cfdbfe;--color-indigo-light-10:#eff3fa;--color-purple-dark-3:#51178c;--color-purple-mid-4:#6727b9;--color-purple-mid-6:#8d44d8;--color-purple-light-8:#d395fe;--color-purple-light-9:#edc3ff;--color-purple-light-10:#f9edfc;--color-purple-dark:var(--color-purple-dark-3);--color-magenta-dark-3:#812373;--color-magenta-mid-4:#ab278d;--color-magenta-mid-7:#f690f1;--color-magenta-light-8:#feb8ff;--color-magenta-light-9:#fad1fe;--color-magenta-light-10:#faeafc;--color-purple-mid:var(--color-magenta-mid-4);--color-pink-light:var(--color-magenta-mid-7);--color-pink-bright:var(--color-magenta-light-9);--color-navy:#003057;--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-brand-ric-color-navy:var(--color-navy);--color-brand-ric-color-light-purple:var(--color-light-purple);--color-brand-ric-color-light-pink:var(--color-light-pink);--color-brand-ric-color-light-green:var(--color-light-green);--color-brand-ric-color-light-orange:var(--color-light-orange);--color-brand-ric-color-light-red:var(--color-light-red);--color-brand-ric-color-light-yellow:var(--color-light-yellow);--color-brand-ric-color-light-lilac:var(--color-light-lilac);--color-brand-ric-color-light-blue:var(--color-light-blue);--color-brand-ric-color-dark-purple:var(--color-dark-purple);--color-brand-ric-color-dark-pink:var(--color-dark-pink);--color-brand-ric-color-dark-green:var(--color-dark-green);--color-brand-ric-color-dark-orange:var(--color-dark-orange);--color-brand-ric-color-dark-red:var(--color-dark-red);--color-brand-ric-color-dark-yellow:var(--color-dark-yellow);--color-brand-ric-color-dark-lilac:var(--color-dark-lilac);--color-brand-membership-purple-dark-1:#483965;--color-brand-membership-purple-dark-2:#635385;--color-brand-membership-purple-dark-3:#776ca7;--color-brand-membership-purple-mid-5:#8e88ba;--color-brand-membership-purple-mid-6:#847db5;--color-brand-membership-purple-light-8:#b2aece;--color-brand-membership-purple-light-9:#d3d1e4;--color-brand-membership-purple-light-10:#eae8f4;--color-brand-membership-purple-dark:var(--color-brand-membership-purple-dark-3);--color-brand-membership-purple-mid:var(--color-brand-membership-purple-mid-5);--color-brand-membership-purple-bright:var(--color-brand-membership-purple-mid-6);--color-brand-membership-purple-light:var(--color-brand-membership-purple-light-8);--color-brand-membership-purple-lighter:var(--color-brand-membership-purple-light-9);--color-brand-membership-purple-lightest:var(--color-brand-membership-purple-light-10);--color-brand-membership-lilac-dark-1:#52355e;--color-brand-membership-lilac-dark-2:#715287;--color-brand-membership-lilac-dark-3:#806697;--color-brand-membership-lilac-mid-5:#9976a8;--color-brand-membership-lilac-mid-6:#a976bb;--color-brand-membership-lilac-light-8:#bba2c6;--color-brand-membership-lilac-light-9:#ccbad4;--color-brand-membership-lilac-light-10:#e6dde9;--color-brand-membership-lilac-dark:var(--color-brand-membership-lilac-dark-3);--color-brand-membership-lilac-mid:var(--color-brand-membership-lilac-mid-5);--color-brand-membership-lilac-bright:var(--color-brand-membership-lilac-mid-6);--color-brand-membership-lilac-light:var(--color-brand-membership-lilac-light-8);--color-brand-membership-lilac-lighter:var(--color-brand-membership-lilac-light-9);--color-brand-membership-lilac-lightest:var(--color-brand-membership-lilac-light-10);--color-brand-membership-pink-dark-1:#6c3e53;--color-brand-membership-pink-dark-2:#864e68;--color-brand-membership-pink-dark-3:#9d5b7b;--color-brand-membership-pink-mid-5:#bc7190;--color-brand-membership-pink-mid-6:#d15c8c;--color-brand-membership-pink-light-8:#d19fb4;--color-brand-membership-pink-light-9:#e3cbd4;--color-brand-membership-pink-light-10:#f0e5eb;--color-brand-membership-pink-dark:var(--color-brand-membership-pink-dark-3);--color-brand-membership-pink-mid:var(--color-brand-membership-pink-mid-5);--color-brand-membership-pink-bright:var(--color-brand-membership-pink-mid-6);--color-brand-membership-pink-light:var(--color-brand-membership-pink-light-8);--color-brand-membership-pink-lighter:var(--color-brand-membership-pink-light-9);--color-brand-membership-pink-lightest:var(--color-brand-membership-pink-light-10);--color-brand-membership-orange-dark-1:#783620;--color-brand-membership-orange-dark-2:#9b462b;--color-brand-membership-orange-dark-3:#b45d2b;--color-brand-membership-orange-mid-5:#e69c39;--color-brand-membership-orange-mid-6:#f5a74b;--color-brand-membership-orange-light-8:#e6bb8f;--color-brand-membership-orange-light-9:#f0ddd1;--color-brand-membership-orange-light-10:#f7eeeb;--color-brand-membership-orange-dark:var(--color-brand-membership-orange-dark-3);--color-brand-membership-orange-mid:var(--color-brand-membership-orange-mid-5);--color-brand-membership-orange-bright:var(--color-brand-membership-orange-mid-6);--color-brand-membership-orange-light:var(--color-brand-membership-orange-light-8);--color-brand-membership-orange-lighter:var(--color-brand-membership-orange-light-9);--color-brand-membership-orange-lightest:var(--color-brand-membership-orange-light-10);--color-brand-membership-yellow-dark-1:#704e24;--color-brand-membership-yellow-dark-2:#916b3a;--color-brand-membership-yellow-dark-3:#bf843e;--color-brand-membership-yellow-mid-5:#ecd16d;--color-brand-membership-yellow-mid-6:#f8da6d;--color-brand-membership-yellow-light-8:#edd273;--color-brand-membership-yellow-light-9:#f3e2a4;--color-brand-membership-yellow-light-10:#f9f1d1;--color-brand-membership-yellow-dark:var(--color-brand-membership-yellow-dark-3);--color-brand-membership-yellow-mid:var(--color-brand-membership-yellow-mid-5);--color-brand-membership-yellow-bright:var(--color-brand-membership-yellow-mid-6);--color-brand-membership-yellow-light:var(--color-brand-membership-yellow-light-8);--color-brand-membership-yellow-lighter:var(--color-brand-membership-yellow-light-9);--color-brand-membership-yellow-lightest:var(--color-brand-membership-yellow-light-10);--color-brand-membership-green-dark-1:#3b3f25;--color-brand-membership-green-dark-2:#565734;--color-brand-membership-green-dark-3:#6a7345;--color-brand-membership-green-mid-5:#c6c978;--color-brand-membership-green-mid-6:#b3ce7b;--color-brand-membership-green-light-8:#d1d4a5;--color-brand-membership-green-light-9:#e4e5c6;--color-brand-membership-green-light-10:#f6f6eb;--color-brand-membership-green-dark:var(--color-brand-membership-green-dark-3);--color-brand-membership-green-mid:var(--color-brand-membership-green-mid-5);--color-brand-membership-green-bright:var(--color-brand-membership-green-mid-6);--color-brand-membership-green-light:var(--color-brand-membership-green-light-8);--color-brand-membership-green-lighter:var(--color-brand-membership-green-light-9);--color-brand-membership-green-lightest:var(--color-brand-membership-green-light-10);--color-brand-membership-turquoise-dark-1:#2b4946;--color-brand-membership-turquoise-dark-2:#39615f;--color-brand-membership-turquoise-dark-3:#487d7b;--color-brand-membership-turquoise-mid-5:#81b8b8;--color-brand-membership-turquoise-mid-6:#87cdcd;--color-brand-membership-turquoise-light-8:#b9dad9;--color-brand-membership-turquoise-light-9:#d3e7e5;--color-brand-membership-turquoise-light-10:#ecf5f7;--color-brand-membership-turquoise-dark:var(--color-brand-membership-turquoise-dark-3);--color-brand-membership-turquoise-mid:var(--color-brand-membership-turquoise-mid-5);--color-brand-membership-turquoise-bright:var(--color-brand-membership-turquoise-mid-6);--color-brand-membership-turquoise-light:var(--color-brand-membership-turquoise-light-8);--color-brand-membership-turquoise-lighter:var(--color-brand-membership-turquoise-light-9);--color-brand-membership-turquoise-lightest:var(--color-brand-membership-turquoise-light-10);--color-brand-membership-blue-dark-1:#2c4258;--color-brand-membership-blue-dark-2:#456588;--color-brand-membership-blue-dark-3:#5177a3;--color-brand-membership-blue-mid-5:#8bb5e0;--color-brand-membership-blue-mid-6:#8fbae6;--color-brand-membership-blue-light-8:#c1d7ee;--color-brand-membership-blue-light-9:#d8e6f4;--color-brand-membership-blue-light-10:#f0f6fd;--color-brand-membership-blue-dark:var(--color-brand-membership-blue-dark-3);--color-brand-membership-blue-mid:var(--color-brand-membership-blue-mid-5);--color-brand-membership-blue-bright:var(--color-brand-membership-blue-mid-6);--color-brand-membership-blue-light:var(--color-brand-membership-blue-light-8);--color-brand-membership-blue-lighter:var(--color-brand-membership-blue-light-9);--color-brand-membership-blue-lightest:var(--color-brand-membership-blue-light-10);--font-family:"Avenir Next", "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;--font-family-headline:"Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;--type-headline-mega-m:5.125rem;--type-headline-mega-s:4rem;--type-headline-mega-xs:3rem;--type-headline-h1-m:4rem;--type-headline-h1-s:3rem;--type-headline-h1-xs:2.5rem;--type-body-l:1.25rem;--type-body-s:1.125rem;--type-line-height:1.5;--type-h1-mega-l:3.5rem;--type-h1-mega-s:3rem;--type-h1-l:2.875rem;--type-h1-s:1.875rem;--type-h2-l:2rem;--type-h2-s:1.625rem;--type-h3-l:1.625rem;--type-h3-s:1.375rem;--type-h456-l:1.375rem;--type-h456-s:1.125rem;--type-blockquote:1.25rem;--type-lp-l:1.625rem;--type-lp-s:1.375rem;--type-sp-l:1.25rem;--type-sp-s:1rem;--ui-shadow:0 2px 10px 0 #00000026;--ui-shadow-hover:0 2px 10px 0 #00000040;--ui-shadow--hover:var(--ui-shadow-hover);--ui-border-radius:8px;--ui-transition-hover:.15s ease-in-out;--ui-transition-hover-property:background-color, color}

package/dist/vars.css

@@ -1 +1 @@
-: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}
+:root{--color-brand-blue:#00a1cc;--color-blue-950:#002c3d;--color-blue-800:#00394e;--color-blue-700:#005878;--color-blue-500:#00729a;--color-blue-100:#ecf2fb;--color-blue:var(--color-blue-500);--color-text-link:var(--color-blue-500);--color-text-link-hover:var(--color-blue-800);--color-text-link-active:var(--color-blue-950);--color-text-link-visited:var(--color-blue-950);--color-teal-500:#0f8482;--color-teal:var(--color-teal-500);--color-purple-500:#8d44d8;--color-purple:var(--color-purple-500);--color-focus:var(--color-purple-500);--color-red-100:#fcf1f1;--color-red-500:#d12430;--color-red:var(--color-red-500);--color-green-100:#dcedc8;--color-green-500:#5b7f2e;--color-green:var(--color-green-500);--color-yellow-100:#f8eec7;--color-yellow-500:#ffd309;--color-yellow:var(--color-yellow-500);--color-offer:var(--color-red-500);--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-white:#fff;--color-black:#000;--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;--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;--color-grey-200:#f3f3f3;--color-grey-100:#fafafa;--color-grey:var(--color-grey-500);--color-text-default:var(--color-grey-900);--color-text-alt:var(--color-grey-800);--color-text-black:var(--color-black);--color-text-white:var(--color-white);--color-text-dark-blue:var(--color-dark-blue);--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:var(--color-grey-200);--color-tint-brown:var(--color-grey-warm-100);--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;--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}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/styles",
   "type": "module",
-  "version": "0.43.0",
+  "version": "0.45.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -37,8 +37,8 @@
   "license": "MIT",
   "description": "Styles for the Experience Library design system",
   "devDependencies": {
-    "lightningcss": "^1.30.2",
-    "sass": "^1.97.2"
+    "lightningcss": "^1.31.1",
+    "sass": "^1.97.3"
   },
-  "gitHead": "852062f66857a8245d7fadcb942853b28dbbcab2"
+  "gitHead": "d15d7ae0d231bf28986a18a9e097537802f845db"
 }

package/presets/uno/__tests__/rules.test.js

@@ -0,0 +1,101 @@
+import { describe, test, expect } from "vitest"
+import { bgColorRule, borderColorRule } from "../rules"
+
+const theme = {
+  colors: {
+    "brand-blue": "var(--color-brand-blue)",
+    red: {
+      100: "var(--color-red-100)",
+      500: "var(--color-red-500)",
+      DEFAULT: "var(--color-red-500)",
+    },
+    blue: {
+      DEFAULT: "var(--color-blue-500)",
+    },
+    teal: "var(--color-teal-500)",
+  },
+}
+
+describe("Test makeColorRule()", () => {
+  const bgRule = bgColorRule
+  const borderRule = borderColorRule
+
+  function runRule(rule, className) {
+    const [regex, handler] = rule
+    const match = className.match(regex)
+    if (!match) return null
+    return handler(match, { theme })
+  }
+
+  // ---------------------------
+  // Flat color tests
+  // ---------------------------
+
+  test("bg-brand-blue uses flat color var", () => {
+    const result = runRule(bgRule, "bg-brand-blue")
+    expect(result).toEqual({
+      "--bg-color": "var(--color-brand-blue)",
+      "background-color": "var(--color-brand-blue)",
+    })
+  })
+
+  test("bg-teal uses flat color but different var name", () => {
+    const result = runRule(bgRule, "bg-teal")
+    expect(result).toEqual({
+      "--bg-color": "var(--color-teal-500)",
+      "background-color": "var(--color-teal-500)",
+    })
+  })
+
+  // ---------------------------
+  // Nested color tests
+  // ---------------------------
+
+  test("bg-red-500 resolves nested shade", () => {
+    const result = runRule(bgRule, "bg-red-500")
+    expect(result).toEqual({
+      "--bg-color": "var(--color-red-500)",
+      "background-color": "var(--color-red-500)",
+    })
+  })
+
+  test("bg-red falls back to DEFAULT shade", () => {
+    const result = runRule(bgRule, "bg-red")
+    expect(result).toEqual({
+      "--bg-color": "var(--color-red-500)",
+      "background-color": "var(--color-red-500)",
+    })
+  })
+
+  // ---------------------------
+  // Rule not matching
+  // ---------------------------
+
+  test("bg-red-200 returns undefined as 200 shade doesn't exist", () => {
+    const result = runRule(bgRule, "bg-red-200")
+    expect(result).toBeUndefined()
+  })
+
+  test("non-existent bg-yellow returns nothing", () => {
+    const result = runRule(bgRule, "bg-yellow")
+    expect(result).toBeUndefined()
+  })
+
+  test("wrong prefix does not match the regex (bg!=border)", () => {
+    const result = runRule(bgRule, "border-red-500")
+    expect(result).toBeNull()
+  })
+
+  // ---------------------------
+  // Border rule test
+  // ---------------------------
+
+  test("border-red-100 uses border props", () => {
+    const result = runRule(borderRule, "border-red-100")
+    expect(result).toEqual({
+      "--border-color": "var(--color-red-100)",
+      "border-color": "var(--color-red-100)",
+    })
+  })
+})
+;``

package/presets/uno/index.js

@@ -1,4 +1,19 @@
 import { definePreset } from "unocss"
+import { bgColorRule, borderColorRule } from "./rules"
+
+function generateTertiaryColors() {
+  const hues = ["blue", "green", "lilac", "orange", "pink", "purple", "red", "yellow"]
+  const variants = ["light", "tint", "dark"]
+  const out = {}
+  for (const h of hues) {
+    for (const v of variants) {
+      const key = `${v}-${h}` // e.g. "light-blue"
+      const cssVar = `var(--color-${key})`
+      out[key] = cssVar
+    }
+  }
+  return out
+}
 
 const presetCoop = definePreset(() => {
   return {
@@ -8,52 +23,82 @@ const presetCoop = definePreset(() => {
         ...theme,
         breakpoints: {
           ...theme.breakpoints,
-          lg: "1024px",
-          md: "768px",
+          xxs: "320px",
+          xs: "414px",
           sm: "600px",
+          md: "768px",
+          lg: "1024px",
           xl: "1312px",
-          xs: "414px",
           xxl: "1536px",
-          xxs: "320px",
         },
         colors: {
           ...theme.colors,
-          blue: "var(--color-blue)",
           "brand-blue": "var(--color-brand-blue)",
-          "dark-blue": "var(--color-dark-blue)",
-          "dark-green": "var(--color-dark-green)",
-          "dark-grey": "var(--color-dark-grey)",
-          "dark-lilac": "var(--color-dark-lilac)",
-          "dark-orange": "var(--color-dark-orange)",
-          "dark-pink": "var(--color-dark-pink)",
-          "dark-purple": "var(--color-dark-purple)",
-          "dark-red": "var(--color-dark-red)",
-          "dark-yellow": "var(--color-dark-yellow)",
-          green: "var(--color-green)",
-          "light-blue": "var(--color-light-blue)",
-          "light-green": "var(--color-light-green)",
-          "light-grey": "var(--color-light-grey)",
-          "light-lilac": "var(--color-light-lilac)",
-          "light-orange": "var(--color-light-orange)",
-          "light-pink": "var(--color-light-pink)",
-          "light-purple": "var(--color-light-purple)",
-          "light-red": "var(--color-light-red)",
-          "light-yellow": "var(--color-light-yellow)",
-          "mid-dark-grey": "var(--color-mid-dark-grey)",
-          "mid-grey": "var(--color-mid-grey)",
-          "mid-light-grey": "var(--color-mid-light-grey)",
-          "offer-red": "var(--color-offer-red)",
-          red: "var(--color-offer-red)",
-          "tint-blue": "var(--color-tint-blue)",
-          "tint-brown": "var(--color-tint-brown)",
-          "tint-green": "var(--color-tint-green)",
-          "tint-grey": "var(--color-tint-grey)",
-          "tint-lilac": "var(--color-tint-lilac)",
-          "tint-orange": "var(--color-tint-orange)",
-          "tint-pink": "var(--color-tint-pink)",
-          "tint-purple": "var(--color-tint-purple)",
-          "tint-red": "var(--color-tint-red)",
-          "tint-yellow": "var(--color-tint-yellow)",
+          // BLUES
+          blue: {
+            500: "var(--color-blue-500)",
+            700: "var(--color-blue-700)",
+            DEFAULT: "var(--color-blue)",
+          },
+          // REDS
+          red: {
+            500: "var(--color-red-500)",
+            100: "var(--color-red-100)",
+            DEFAULT: "var(--color-red)",
+          },
+          // PURPLES
+          purple: {
+            500: "var(--color-purple-500)",
+            DEFAULT: "var(--color-purple)",
+          },
+          // YELLOWS
+          yellow: {
+            500: "var(--color-yellow-500)",
+            100: "var(--color-yellow-100)",
+            DEFAULT: "var(--color-yellow)",
+          },
+          // GREENS
+          green: {
+            500: "var(--color-green-500)",
+            100: "var(--color-green-100)",
+            DEFAULT: "var(--color-green)",
+          },
+          // TEALS
+          teal: {
+            500: "var(--color-teal-500)",
+            DEFAULT: "var(--color-teal)",
+          },
+          // NEUTRALS
+          white: "var(--color-white)",
+          black: "var(--color-black)",
+          "grey-warm": {
+            100: "var(--color-grey-warm-100)",
+            500: "var(--color-grey-warm-500)",
+            900: "var(--color-grey-warm-900)",
+            DEFAULT: "var(--color-grey-warm)",
+          },
+          "grey-cool": {
+            100: "var(--color-grey-cool-100)",
+            500: "var(--color-grey-cool-500)",
+            900: "var(--color-grey-cool-900)",
+            DEFAULT: "var(--color-grey-cool)",
+          },
+          grey: {
+            900: "var(--color-grey-900)",
+            800: "var(--color-grey-800)",
+            700: "var(--color-grey-700)",
+            600: "var(--color-grey-600)",
+            500: "var(--color-grey-500)",
+            400: "var(--color-grey-400)",
+            300: "var(--color-grey-300)",
+            200: "var(--color-grey-200)",
+            100: "var(--color-grey-100)",
+            DEFAULT: "var(--color-grey)",
+          },
+          // TERTIARY colours: tints, lights and darks
+          ...generateTertiaryColors(),
+          "tint-brown": "var(--color-grey-warm-100)",
+          "tint-grey": "var(--color-grey-200)",
         },
       }
     },
@@ -67,6 +112,31 @@ const presetCoop = definePreset(() => {
       ],
       ["font-headline", { "font-family": "'Co-opHeadline', 'Impact Fallback', sans-serif" }],
 
+      [
+        /^(bg|border)-(.*)$/,
+        function* ([, rule, color], { theme }) {
+          const root = color.split("-")[0]
+
+          // console.log(root, color)
+
+          if (root in theme.colors || color in theme.colors) {
+            const cssVar = `var(--color-${color})`
+            //const cssVar = extractColorVarName(value)
+            switch (rule) {
+              case "bg":
+                yield { "background-color": cssVar, "--bg-color": cssVar }
+                break
+              case "border":
+                yield { "border-color": cssVar, "--border-color": cssVar }
+                break
+            }
+          }
+        },
+      ],
+
+      //bgColorRule,
+      //borderColorRule,
+
       /* 
       To support presetWind3 and presetWind4 and probably future presets 
       we decided to use rules instead of editing font-size inside theme 
@@ -93,12 +163,68 @@ const presetCoop = definePreset(() => {
     ],
     shortcuts: [
       {
-        "border-default": "border-solid border-1 border-black",
         "flex-center": "flex justify-center items-center",
         "flex-center-around": "flex justify-around items-center",
         "flex-center-between": "flex justify-between items-center",
         "flex-responsive": "flex flex-col md:flex-row",
         "flex-stack-vertical": "flex flex-col gap-4",
+
+        // SEMANTIC COLORS
+
+        // Blues
+        "text-link": "text-blue-500",
+        //"text-button-secondary2": "text-blue-700",
+        //"bg-button-primary2": "bg-blue-700",
+        "icon-brand-blue": "fill-brand-blue",
+
+        // Teal
+        //"text-button-secondary": "text-teal",
+        //"bg-button-primary": "bg-teal",
+
+        // Reds
+        "text-offer": "text-red-500",
+        "text-error": "text-red-500",
+        "bg-offer": "bg-red-500",
+        "bg-error": "bg-red-500",
+        "bg-error-light": "bg-red-100",
+        "border-offer": "border-red-500",
+        "border-error": "border-red-500",
+
+        // Purples
+        "border-focus-ring": "border-purple-500",
+
+        // Whites
+        "text-inverse": "text-white",
+        "icon-inverse": "fill-white",
+
+        // Greys
+        "text-primary": "text-grey-900",
+        "text-secondary": "text-grey-800",
+        "bg-primary": "bg-white",
+        "bg-secondary": "bg-grey-200",
+        // "bg-membership": "bg-tint-blue",
+        "bg-footer": "bg-grey-900",
+        "bg-footer-light": "bg-grey-cool-100", // bg-footer-shop
+        // "bg-neutral-warm": "bg-grey-warm-100",
+        "border-divider": "border-grey-600",
+
+        // Yellows
+        "border-alert": "border-yellow-500",
+        "bg-alert-light": "bg-yellow-100",
+
+        // Greens
+        "text-success": "text-green-500",
+        "border-success": "border-green-500",
+        "bg-success-light": "bg-green-100",
+
+        // Tertiaries
+        "text-brand-red": "text-dark-red",
+        "text-brand-orange": "text-dark-orange",
+        "text-brand-yellow": "text-dark-yellow",
+        "text-brand-green": "text-dark-green",
+        "text-brand-lilac": "text-dark-purple",
+        "text-brand-purple": "text-dark-lilac",
+        "text-brand-pink": "text-dark-pink",
       },
     ],
   }

package/presets/uno/rules.js

@@ -0,0 +1,72 @@
+function extractColorVarName(value) {
+  const match = /var\(\s*(--[^)]+)\s*\)/.exec(value)
+  return match ? match[1] : null
+}
+
+function makeColorRule(prefix, props) {
+  const regex = new RegExp(`^${prefix}-(.+)$`)
+
+  return [
+    regex,
+    ([, token], ctx) => {
+      const colors = ctx.theme && ctx.theme.colors
+      if (!colors) return
+
+      let value = null
+
+      //
+      // 1. True flat colors — must NOT be an object
+      //
+      if (token in colors && typeof colors[token] !== "object") {
+        value = colors[token]
+      }
+      //
+      // 2. Nested colors (object) eg: red-500 or red (DEFAULT)
+      //
+      else {
+        const parts = token.split("-")
+        const shade = parts.pop() // "500"
+        const name = parts.join("-") || token
+
+        const colorObj = colors[name]
+
+        if (colorObj && typeof colorObj === "object") {
+          // Normalize keys to strings
+          const keys = Object.keys(colorObj).map(String)
+
+          let selectedShade = null
+
+          // If the user-specified shade exists → use it
+          if (keys.includes(shade)) {
+            selectedShade = shade
+          }
+          // If user DID NOT specify a shade (like "bg-red") → use DEFAULT
+          else if (token === name) {
+            // example: token="red", name="red"
+            if (keys.includes("DEFAULT")) {
+              selectedShade = "DEFAULT"
+            }
+          }
+
+          // If no matching shade found → undefined
+          if (selectedShade === null) return
+
+          value = colorObj[selectedShade]
+        }
+      }
+
+      if (!value) return
+
+      const varName = extractColorVarName(value)
+      if (!varName) return
+
+      const out = {}
+      props.forEach((prop) => (out[prop] = `var(${varName})`))
+      return out
+    },
+  ]
+}
+
+export const bgColorRule = makeColorRule("bg", ["--bg-color", "background-color"])
+
+export const borderColorRule = makeColorRule("border", ["--border-color", "border-color"])

package/src/components/AlertBanner.scss

@@ -1,7 +1,7 @@
 .coop-alert-banner {
-  --bg-color: var(--color-orange-alert-light);
-  --text-color: var(--color-text-default);
-  --border-left: solid 0.25rem var(--color-orange-alert);
+  --alert-bg-color: var(--color-alert-light);
+  --alert-text-color: var(--color-text-default);
+  --alert-border-left: solid 0.25rem var(--color-alert);
 
   display: flex;
   flex-direction: column;
@@ -9,16 +9,16 @@
 
   width: 100%;
   padding: var(--spacing-16);
-  border-left: var(--border-left);
+  border-left: var(--alert-border-left);
 
-  color: var(--text-color);
+  color: var(--alert-text-color);
 
-  background-color: var(--bg-color);
+  background-color: var(--alert-bg-color);
 
   &[data-variant="black"] {
-    --bg-color: var(--color-black);
-    --text-color: var(--color-white);
-    --border-left: 0;
+    --alert-bg-color: var(--color-black);
+    --alert-text-color: var(--color-white);
+    --alert-border-left: 0;
   }
 
   a {