@coopdigital/styles 0.0.8 → 0.2.0

package/src/vars-legacy/_colours-membership-legacy.scss

@@ -0,0 +1,129 @@
+:root {
+  /* Membership (Purple) */
+  --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; /* core */
+  --color-brand-membership-purple-mid-6: #847db5; /* screen */
+  --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);
+
+  /* Membership (Lilac) */
+  --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; /* core */
+  --color-brand-membership-lilac-mid-6: #a976bb; /* screen */
+  --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);
+
+  /* Membership (Pink) */
+  --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; /* core */
+  --color-brand-membership-pink-mid-6: #d15c8c; /* screen */
+  --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);
+
+  /* Membership (Orange) */
+  --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; /* core */
+  --color-brand-membership-orange-mid-6: #f5a74b; /* screen */
+  --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);
+
+  /* Membership (Yellow) */
+  --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; /* core */
+  --color-brand-membership-yellow-mid-6: #f8da6d; /* screen */
+  --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);
+
+  /* Membership (Green) */
+  --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; /* core */
+  --color-brand-membership-green-mid-6: #b3ce7b; /* screen */
+  --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);
+
+  /* Membership (Turquoise) */
+  --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; /* core */
+  --color-brand-membership-turquoise-mid-6: #87cdcd; /* screen */
+  --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);
+
+  /* Membership (Blue) */
+  --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; /* core */
+  --color-brand-membership-blue-mid-6: #8fbae6; /* screen */
+  --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);
+}

package/src/vars-legacy/_spacing-legacy.scss

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

package/src/vars-legacy/_typography-legacy.scss

@@ -0,0 +1,37 @@
+:root {
+  --font-family: "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
+
+  /* Typography */
+  --type-headline-mega-m: 5.125rem; /* 82px */
+  --type-headline-mega-s: 4rem; /* 64px */
+  --type-headline-mega-xs: 3rem; /* 48px */
+
+  --type-headline-h1-m: 4rem; /* 64px */
+  --type-headline-h1-s: 3rem; /* 48px */
+  --type-headline-h1-xs: 2.5rem; /* 40px */
+
+  --type-body-l: 1.25rem; /* 20px */
+  --type-body-s: 1.125rem; /* 18px */
+
+  --type-line-height: 1.5; /* 32px */
+
+  --type-h1-mega-l: 3.5rem; /* 56px */
+  --type-h1-mega-s: 3rem; /* 48px */
+  --type-h1-l: 2.875rem; /* 46px */
+  --type-h1-s: 1.875rem; /* 30px */
+  --type-h2-l: 2rem; /* 32px */
+  --type-h2-s: 1.625rem; /* 26px */
+  --type-h3-l: 1.625rem; /* 26px */
+  --type-h3-s: 1.375rem; /* 22px */
+  --type-h456-l: 1.375rem; /* 22px */
+  --type-h456-s: 1.125rem; /* 18px */
+
+  --type-blockquote: 1.25rem; /* 18px */
+
+  --type-lp-l: 1.625rem; /* 26px */
+  --type-lp-s: 1.375rem; /* 22px */
+
+  --type-sp-l: 1.25rem; /* 18px */
+  --type-sp-s: 1rem; /* 16px */
+}

package/src/vars-legacy/_ui-legacy.scss

@@ -0,0 +1,8 @@
+:root {
+  --ui-shadow: 0 2px 10px 0 rgb(0 0 0 / 15%);
+  --ui-shadow-hover: 0 2px 10px 0 rgb(0 0 0 / 25%);
+  --ui-shadow--hover: var(--ui-shadow-hover); /* stylelint-disable-line */
+  --ui-border-radius: 8px;
+  --ui-transition-hover: 0.15s ease-in-out;
+  --ui-transition-hover-property: background-color, color;
+}

package/src/vars-legacy.scss

@@ -0,0 +1,6 @@
+@use "./vars-legacy/spacing-legacy";
+@use "./vars-legacy/colours-cls-legacy";
+@use "./vars-legacy/colours-legacy";
+@use "./vars-legacy/colours-membership-legacy";
+@use "./vars-legacy/typography-legacy";
+@use "./vars-legacy/ui-legacy";

package/src/vars.scss

@@ -0,0 +1,8 @@
+@use "./vars/colours";
+
+// @use "./vars/colours-buttons";
+// @use "./vars/colours-notifications";
+
+@use "./vars/ui";
+@use "./vars/spacing";
+@use "./vars/typography";