cax-design-system 2.8.4 → 3.0.0

package/resources/styles/colors.scss

@@ -1,397 +1,568 @@
-:root {
-    --primary-25: var(--blue-25);
-    --primary-50: var(--blue-50); 
-    --primary-75: var(--blue-75);
-    --primary-100: var(--blue-100);
-    --primary-125: var(--blue-125);
-    --primary-150: var(--blue-150);
-    --primary-200: var(--blue-200);
-    --primary-300: var(--blue-300);
-    --primary-400: var(--blue-400);
-    --primary-500: var(--blue-500);
-    --primary-600: var(--blue-600);
-    --primary-700: var(--blue-700);
-    --primary-750: var(--blue-750);
-    --primary-775: var(--blue-775);
-    --primary-800: var(--blue-800);
-    --primary-825: var(--blue-825);
-    --primary-850: var(--blue-850);
-    --primary-875: var(--blue-875);
-    --primary-900: var(--blue-900);
-
-    --neutral-25: var(--grey-25);
-    --neutral-50: var(--grey-50);
-    --neutral-75: var(--grey-75);
-    --neutral-100: var(--grey-100);
-    --neutral-125: var(--grey-125);
-    --neutral-150: var(--grey-150);
-    --neutral-200: var(--grey-200);
-    --neutral-300: var(--grey-300);
-    --neutral-400: var(--grey-400);
-    --neutral-500: var(--grey-500);
-    --neutral-600: var(--grey-600);
-    --neutral-700: var(--grey-700);
-    --neutral-750: var(--grey-750);
-    --neutral-775: var(--grey-775);
-    --neutral-800: var(--grey-800);
-    --neutral-825: var(--grey-825);
-    --neutral-850: var(--grey-850);
-    --neutral-875: var(--grey-875);
-    --neutral-900: var(--grey-900);
-
-    --error-25: var(--red-25);
-    --error-50: var(--red-50);
-    --error-75: var(--red-75); 
-    --error-100: var(--red-100);
-    --error-125: var(--red-125);
-    --error-150: var(--red-150);
-    --error-200: var(--red-200);
-    --error-300: var(--red-300);
-    --error-400: var(--red-400);
-    --error-500: var(--red-500);
-    --error-600: var(--red-600);
-    --error-700: var(--red-700);
-    --error-750: var(--red-750);
-    --error-775: var(--red-775);
-    --error-800: var(--red-800);
-    --error-825: var(--red-825);
-    --error-850: var(--red-850);
-    --error-875: var(--red-875);
-    --error-900: var(--red-900);
-
-    --success-25: var(--green-25);
-    --success-50: var(--green-50);
-    --success-75: var(--green-75);
-    --success-100: var(--green-100);
-    --success-125: var(--green-125);
-    --success-150: var(--green-150);
-    --success-200: var(--green-200);
-    --success-300: var(--green-300);
-    --success-400: var(--green-400);
-    --success-500: var(--green-500);
-    --success-600: var(--green-600);
-    --success-700: var(--green-700);
-    --success-750: var(--green-750);
-    --success-775: var(--green-775);
-    --success-800: var(--green-800);
-    --success-825: var(--green-825);
-    --success-850: var(--green-850);
-    --success-875: var(--green-875);
-    --success-900: var(--green-900);
-
-    --warning-25: var(--orange-25);
-    --warning-50: var(--orange-50);
-    --warning-75: var(--orange-75);
-    --warning-100: var(--orange-100);
-    --warning-125: var(--orange-125);
-    --warning-150: var(--orange-150);
-    --warning-200: var(--orange-200);
-    --warning-300: var(--orange-300);
-    --warning-400: var(--orange-400);
-    --warning-500: var(--orange-500);
-    --warning-600: var(--orange-600);
-    --warning-700: var(--orange-700);
-    --warning-750: var(--orange-750);
-    --warning-775: var(--orange-775);
-    --warning-800: var(--orange-800);
-    --warning-825: var(--orange-825);
-    --warning-850: var(--orange-850);
-    --warning-875: var(--orange-875);
-    --warning-900: var(--orange-900);
-}
-
-:root {
-    --white-10: #ffffff1a;
-    --white-20: #ffffff33;
-    --white-30: #ffffff4d;
-    --white-40: #ffffff66;
-    --white-50: #ffffff80;
-    --white-60: #ffffff99;
-    --white-70: #ffffffb2;
-    --white-80: #ffffffcc;
-    --white-90: #ffffffe5;
-    --white-100: #ffffff;
-
-    --black-10: #0000001a;
-    --black-20: #00000033;
-    --black-30: #0000004d;
-    --black-40: #00000066;
-    --black-50: #00000080;
-    --black-60: #00000099;
-    --black-70: #000000b2;
-    --black-80: #000000cc;
-    --black-90: #000000e5;
-    --black-100: #000000;
-
-    --blue-25: #f0f4fe;
-    --blue-50: #e7edfe;
-    --blue-75: #dde6fd;
-    --blue-100: #cfdbfc;
-    --blue-125: #c0d0fc;
-    --blue-150: #b6c8fb;
-    --blue-200: #9eb6fa;
-    --blue-300: #6e92f7;
-    --blue-400: #3d6ef5;
-    --blue-500: #0c4af3;
-    --blue-600: #0a3bc2;
-    --blue-700: #072c92;
-    --blue-750: #062579;
-    --blue-775: #062270;
-    --blue-800: #051e61;
-    --blue-825: #041952;
-    --blue-850: #041649;
-    --blue-875: #03133f;
-    --blue-900: #030f30;
-
-    --grey-25: #f6f7f8;
-    --grey-50: #f1f2f4;
-    --grey-75: #ebecef;
-    --grey-100: #e2e4e9;
-    --grey-125: #dadde2;
-    --grey-150: #d4d7dd;
-    --grey-200: #c6cad2;
-    --grey-300: #a9afbc;
-    --grey-400: #8d95a5;
-    --grey-500: #707a8f;
-    --grey-600: #5a6272;
-    --grey-700: #434956;
-    --grey-750: #383d47;
-    --grey-775: #343842;
-    --grey-800: #2d3139;
-    --grey-825: #262a31;
-    --grey-850: #22252b;
-    --grey-875: #1d2025;
-    --grey-900: #16181d;
-
-    --red-25: #fff0f0;
-    --red-50: #ffe5e5;
-    --red-75: #ffdbdb;
-    --red-100: #ffcccc;
-    --red-125: #ffbdbd;
-    --red-150: #ffb2b2;
-    --red-200: #ff9999;
-    --red-300: #ff6666;
-    --red-400: #ff3333;
-    --red-500: #ff0000;
-    --red-600: #cc0000;
-    --red-700: #990000;
-    --red-750: #800000;
-    --red-775: #750000;
-    --red-800: #660000;
-    --red-825: #570000;
-    --red-850: #4c0000;
-    --red-875: #420000;
-    --red-900: #330000;
-
-    --green-25: #f5faf5;
-    --green-50: #eef7ee;
-    --green-75: #e7f3e7;
-    --green-100: #ddeedd;
-    --green-125: #d2e9d2;
-    --green-150: #cbe6cb;
-    --green-200: #badeba;
-    --green-300: #98cd98;
-    --green-400: #75bd75;
-    --green-500: #53ac53;
-    --green-600: #428a42;
-    --green-700: #326732;
-    --green-750: #295629;
-    --green-775: #264f26;
-    --green-800: #214521;
-    --green-825: #1c3b1c;
-    --green-850: #193419;
-    --green-875: #162d16;
-    --green-900: #112211;
-
-    --orange-25: #fff6f0;
-    --orange-50: #fef0e6;
-    --orange-75: #feeadc;
-    --orange-100: #fee1cd;
-    --orange-125: #fdd9be;
-    --orange-150: #fdd3b4;
-    --orange-200: #fcc49c;
-    --orange-300: #fba66a;
-    --orange-400: #fa8938;
-    --orange-500: #f96b06;
-    --orange-600: #c75605;
-    --orange-700: #954004;
-    --orange-750: #7c3603;
-    --orange-775: #723103;
-    --orange-800: #632b03;
-    --orange-825: #552402;
-    --orange-850: #4b2002;
-    --orange-875: #411c02;
-    --orange-900: #321501;
-
-    --pink-25: #fff0f0;
-    --pink-100: #f9d2df;
-    --pink-200: #f2a6bf;
-    --pink-500: #df2060;
-    --pink-700: #861339;
-    --pink-800: #590d26;
-
-    --purple-25: #f5f4fb;
-    --purple-100: #dedaf1;
-    --purple-200: #bdb5e3;
-    --purple-500: #5946b9;
-    --purple-700: #362a6f;
-    --purple-800: #241c4a;
-
-    --teal-25: #f3fcfa;
-    --teal-100: #d6f5f0;
-    --teal-200: #adebe0;
-    --teal-500: #33ccb2;
-    --teal-700: #1f7a6b;
-    --teal-800: #145247;
-
-    --logo-blue-500: #20bedf;
-}
-
-// @media (prefers-color-scheme: dark) {
-//     :root {
-//         --white-10: #0000001a;
-//         --white-20: #00000033;
-//         --white-30: #0000004d;
-//         --white-40: #00000066;
-//         --white-50: #00000080;
-//         --white-60: #00000099;
-//         --white-70: #000000b2;
-//         --white-80: #000000cc;
-//         --white-90: #000000e5;
-//         --white-100: #000000;
-
-//         --black-10: #0000001a;
-//         --black-20: #00000033;
-//         --black-30: #0000004d;
-//         --black-40: #00000066;
-//         --black-50: #00000080;
-//         --black-60: #00000099;
-//         --black-70: #000000b2;
-//         --black-80: #000000cc;
-//         --black-90: #000000e5;
-//         --black-100: #000000;
-
-//         --blue-25: #02020e;
-//         --blue-50: #030317;
-//         --blue-75: #040425;
-//         --blue-100: #05052e;
-//         --blue-125: #07073c;
-//         --blue-150: #080845;
-//         --blue-200: #0a0a5c;
-//         --blue-300: #0f0f8a;
-//         --blue-400: #1414b8;
-//         --blue-500: #1919e6;
-//         --blue-600: #4747eb;
-//         --blue-700: #7575f0;
-//         --blue-750: #8c8cf2;
-//         --blue-775: #9a9af4;
-//         --blue-800: #a3a3f5;
-//         --blue-825: #b1b1f6;
-//         --blue-850: #babaf7;
-//         --blue-875: #c3c3f8;
-//         --blue-900: #d1d1fa;
-
-//         --grey-25: #0f1215;
-//         --grey-50: #161a1d;
-//         --grey-75: #1c2126;
-//         --grey-100: #21262c;
-//         --grey-125: #272e34;
-//         --grey-150: #2e363e;
-//         --grey-200: #364049;
-//         --grey-300: #4c5967;
-//         --grey-400: #617384;
-//         --grey-500: #7b8c9e;
-//         --grey-600: #98a6b3;
-//         --grey-700: #b6bfc9;
-//         --grey-750: #c7cfd6;
-//         --grey-775: #cdd4da;
-//         --grey-800: #d3d9de;
-//         --grey-825: #dce0e5;
-//         --grey-850: #e5e8eb;
-//         --grey-875: #eaedf0;
-//         --grey-900: #f0f2f4;
-
-//         --red-25: #200404;
-//         --red-50: #320606;
-//         --red-75: #3c0707;
-//         --red-100: #450808;
-//         --red-125: #530909;
-//         --red-150: #610a0a;
-//         --red-200: #730d0d;
-//         --red-300: #a11212;
-//         --red-400: #cf1717;
-//         --red-500: #e83030;
-//         --red-600: #ed5e5e;
-//         --red-700: #f28c8c;
-//         --red-750: #f5a8a8;
-//         --red-775: #f6b1b1;
-//         --red-800: #f7baba;
-//         --red-825: #f9c8c8;
-//         --red-850: #fad6d6;
-//         --red-875: #fbdfdf;
-//         --red-900: #fce8e8;
-
-//         --green-25: #0c170c;
-//         --green-50: #142414;
-//         --green-75: #172b17;
-//         --green-100: #1b321b;
-//         --green-125: #203c20;
-//         --green-150: #254625;
-//         --green-200: #2d532d;
-//         --green-300: #3e743e;
-//         --green-400: #509550;
-//         --green-500: #69af69;
-//         --green-600: #8bc18b;
-//         --green-700: #acd3ac;
-//         --green-750: #c0ddc0;
-//         --green-775: #c7e1c7;
-//         --green-800: #cde4cd;
-//         --green-825: #d7ead7;
-//         --green-850: #e1efe1;
-//         --green-875: #e8f3e8;
-//         --green-900: #eef6ee;
-
-//         --orange-25: #0f0601;
-//         --orange-50: #190b01;
-//         --orange-75: #220f01;
-//         --orange-100: #311502;
-//         --orange-125: #3f1b03;
-//         --orange-150: #491f04;
-//         --orange-200: #612905;
-//         --orange-300: #913e08;
-//         --orange-400: #c2530a;
-//         --orange-500: #f2680d;
-//         --orange-600: #f5863d;
-//         --orange-700: #f7a46e;
-//         --orange-750: #f8b386;
-//         --orange-775: #f9bc95;
-//         --orange-800: #fac29e;
-//         --orange-825: #fbcbad;
-//         --orange-850: #fbd1b6;
-//         --orange-875: #fcd7c0;
-//         --orange-900: #fde0ce;
-
-//         --pink-25: #590d26;
-//         --pink-100: #861339;
-//         --pink-200: #df2060;
-//         --pink-500: #f2a6bf;
-//         --pink-700: #f9d2df;
-//         --pink-800: #fff0f0;
-
-//         --purple-25: #241c4a;
-//         --purple-100: #362a6f;
-//         --purple-200: #5946b9;
-//         --purple-500: #bdb5e3;
-//         --purple-700: #dedaf1;
-//         --purple-800: #f5f4fb;
-
-//         --teal-25: #145247;
-//         --teal-100: #1f7a6b;
-//         --teal-200: #33ccb2;
-//         --teal-500: #adebe0;
-//         --teal-700: #d6f5ef;
-//         --teal-800: #f3fcfa;
-
-//         --logo-blue-500: #20bedf;
-//     }
-// }
+:root {
+    --primary-25: var(--blue-25);
+    --primary-50: var(--blue-50);
+    --primary-75: var(--blue-75);
+    --primary-100: var(--blue-100);
+    --primary-125: var(--blue-125);
+    --primary-150: var(--blue-150);
+    --primary-200: var(--blue-200);
+    --primary-300: var(--blue-300);
+    --primary-400: var(--blue-400);
+    --primary-500: var(--blue-500);
+    --primary-600: var(--blue-600);
+    --primary-700: var(--blue-700);
+    --primary-750: var(--blue-750);
+    --primary-775: var(--blue-775);
+    --primary-800: var(--blue-800);
+    --primary-825: var(--blue-825);
+    --primary-850: var(--blue-850);
+    --primary-875: var(--blue-875);
+    --primary-900: var(--blue-900);
+
+    --neutral-25: var(--grey-25);
+    --neutral-50: var(--grey-50);
+    --neutral-75: var(--grey-75);
+    --neutral-100: var(--grey-100);
+    --neutral-125: var(--grey-125);
+    --neutral-150: var(--grey-150);
+    --neutral-200: var(--grey-200);
+    --neutral-300: var(--grey-300);
+    --neutral-400: var(--grey-400);
+    --neutral-500: var(--grey-500);
+    --neutral-600: var(--grey-600);
+    --neutral-700: var(--grey-700);
+    --neutral-750: var(--grey-750);
+    --neutral-775: var(--grey-775);
+    --neutral-800: var(--grey-800);
+    --neutral-825: var(--grey-825);
+    --neutral-850: var(--grey-850);
+    --neutral-875: var(--grey-875);
+    --neutral-900: var(--grey-900);
+
+    --error-25: var(--red-25);
+    --error-50: var(--red-50);
+    --error-75: var(--red-75);
+    --error-100: var(--red-100);
+    --error-125: var(--red-125);
+    --error-150: var(--red-150);
+    --error-200: var(--red-200);
+    --error-300: var(--red-300);
+    --error-400: var(--red-400);
+    --error-500: var(--red-500);
+    --error-600: var(--red-600);
+    --error-700: var(--red-700);
+    --error-750: var(--red-750);
+    --error-775: var(--red-775);
+    --error-800: var(--red-800);
+    --error-825: var(--red-825);
+    --error-850: var(--red-850);
+    --error-875: var(--red-875);
+    --error-900: var(--red-900);
+
+    --success-25: var(--green-25);
+    --success-50: var(--green-50);
+    --success-75: var(--green-75);
+    --success-100: var(--green-100);
+    --success-125: var(--green-125);
+    --success-150: var(--green-150);
+    --success-200: var(--green-200);
+    --success-300: var(--green-300);
+    --success-400: var(--green-400);
+    --success-500: var(--green-500);
+    --success-600: var(--green-600);
+    --success-700: var(--green-700);
+    --success-750: var(--green-750);
+    --success-775: var(--green-775);
+    --success-800: var(--green-800);
+    --success-825: var(--green-825);
+    --success-850: var(--green-850);
+    --success-875: var(--green-875);
+    --success-900: var(--green-900);
+
+    --warning-25: var(--orange-25);
+    --warning-50: var(--orange-50);
+    --warning-75: var(--orange-75);
+    --warning-100: var(--orange-100);
+    --warning-125: var(--orange-125);
+    --warning-150: var(--orange-150);
+    --warning-200: var(--orange-200);
+    --warning-300: var(--orange-300);
+    --warning-400: var(--orange-400);
+    --warning-500: var(--orange-500);
+    --warning-600: var(--orange-600);
+    --warning-700: var(--orange-700);
+    --warning-750: var(--orange-750);
+    --warning-775: var(--orange-775);
+    --warning-800: var(--orange-800);
+    --warning-825: var(--orange-825);
+    --warning-850: var(--orange-850);
+    --warning-875: var(--orange-875);
+    --warning-900: var(--orange-900);
+}
+
+:root {
+    --white-10: #ffffff1a;
+    --white-20: #ffffff33;
+    --white-30: #ffffff4d;
+    --white-40: #ffffff66;
+    --white-50: #ffffff80;
+    --white-60: #ffffff99;
+    --white-70: #ffffffb2;
+    --white-80: #ffffffcc;
+    --white-90: #ffffffe5;
+    --white-100: #ffffff;
+
+    --black-10: #0000001a;
+    --black-20: #00000033;
+    --black-30: #0000004d;
+    --black-40: #00000066;
+    --black-50: #00000080;
+    --black-60: #00000099;
+    --black-70: #000000b2;
+    --black-80: #000000cc;
+    --black-90: #000000e5;
+    --black-100: #000000;
+
+    --blue-25: #f0f4fe;
+    --blue-50: #e7edfe;
+    --blue-75: #dde6fd;
+    --blue-100: #cfdbfc;
+    --blue-125: #c0d0fc;
+    --blue-150: #b6c8fb;
+    --blue-200: #9eb6fa;
+    --blue-300: #6e92f7;
+    --blue-400: #3d6ef5;
+    --blue-500: #0c4af3;
+    --blue-600: #0a3bc2;
+    --blue-700: #072c92;
+    --blue-750: #062579;
+    --blue-775: #062270;
+    --blue-800: #051e61;
+    --blue-825: #041952;
+    --blue-850: #041649;
+    --blue-875: #03133f;
+    --blue-900: #030f30;
+
+    --grey-25: #f6f7f8;
+    --grey-50: #f1f2f4;
+    --grey-75: #ebecef;
+    --grey-100: #e2e4e9;
+    --grey-125: #dadde2;
+    --grey-150: #d4d7dd;
+    --grey-200: #c6cad2;
+    --grey-300: #a9afbc;
+    --grey-400: #8d95a5;
+    --grey-500: #707a8f;
+    --grey-600: #5a6272;
+    --grey-700: #434956;
+    --grey-750: #383d47;
+    --grey-775: #343842;
+    --grey-800: #2d3139;
+    --grey-825: #262a31;
+    --grey-850: #22252b;
+    --grey-875: #1d2025;
+    --grey-900: #16181d;
+
+    --red-25: #fff0f0;
+    --red-50: #ffe5e5;
+    --red-75: #ffdbdb;
+    --red-100: #ffcccc;
+    --red-125: #ffbdbd;
+    --red-150: #ffb2b2;
+    --red-200: #ff9999;
+    --red-300: #ff6666;
+    --red-400: #ff3333;
+    --red-500: #ff0000;
+    --red-600: #cc0000;
+    --red-700: #990000;
+    --red-750: #800000;
+    --red-775: #750000;
+    --red-800: #660000;
+    --red-825: #570000;
+    --red-850: #4c0000;
+    --red-875: #420000;
+    --red-900: #330000;
+
+    --green-25: #f5faf5;
+    --green-50: #eef7ee;
+    --green-75: #e7f3e7;
+    --green-100: #ddeedd;
+    --green-125: #d2e9d2;
+    --green-150: #cbe6cb;
+    --green-200: #badeba;
+    --green-300: #98cd98;
+    --green-400: #75bd75;
+    --green-500: #53ac53;
+    --green-600: #428a42;
+    --green-700: #326732;
+    --green-750: #295629;
+    --green-775: #264f26;
+    --green-800: #214521;
+    --green-825: #1c3b1c;
+    --green-850: #193419;
+    --green-875: #162d16;
+    --green-900: #112211;
+
+    --orange-25: #fff6f0;
+    --orange-50: #fef0e6;
+    --orange-75: #feeadc;
+    --orange-100: #fee1cd;
+    --orange-125: #fdd9be;
+    --orange-150: #fdd3b4;
+    --orange-200: #fcc49c;
+    --orange-300: #fba66a;
+    --orange-400: #fa8938;
+    --orange-500: #f96b06;
+    --orange-600: #c75605;
+    --orange-700: #954004;
+    --orange-750: #7c3603;
+    --orange-775: #723103;
+    --orange-800: #632b03;
+    --orange-825: #552402;
+    --orange-850: #4b2002;
+    --orange-875: #411c02;
+    --orange-900: #321501;
+
+    --pink-25: #fde8ef;
+    --pink-50: #fbcedc;
+    --pink-75: #fabbcf;
+    --pink-100: #f8a8c1;
+    --pink-200: #f579a2;
+    --pink-300: #f14b84;
+    --pink-400: #ea2e70;
+    --pink-500: #df2060;
+    --pink-600: #c81c56;
+    --pink-700: #a81548;
+    --pink-800: #861039;
+
+    --purple-25: #f0eefb;
+    --purple-50: #e1ddfc;
+    --purple-75: #d5d0fa;
+    --purple-100: #c9c3f8;
+    --purple-200: #ada3f2;
+    --purple-300: #9183ec;
+    --purple-400: #7263e1;
+    --purple-500: #5946b9;
+    --purple-600: #4e3ea3;
+    --purple-700: #41338a;
+    --purple-800: #34286f;
+
+    --teal-25: #eafbf7;
+    --teal-50: #d6f6ee;
+    --teal-75: #c4f2e7;
+    --teal-100: #b2eee0;
+    --teal-200: #8ae4d1;
+    --teal-300: #63dbc3;
+    --teal-400: #45d3b9;
+    --teal-500: #33ccb2;
+    --teal-600: #2db7a0;
+    --teal-700: #249786;
+    --teal-800: #1c776a;
+
+    --cyan-25: #f0fcff;
+    --cyan-50: #e0f7fa;
+    --cyan-75: #c9f1f6;
+    --cyan-100: #b2ebf2;
+    --cyan-200: #80deea;
+    --cyan-300: #4dd0e1;
+    --cyan-400: #26c6da;
+    --cyan-500: #00bcd4;
+    --cyan-600: #00acc1;
+    --cyan-700: #0097a7;
+    --cyan-800: #00838f;
+
+    --olive-25: #f7faf2;
+    --olive-50: #eef4e4;
+    --olive-75: #e4edd4;
+    --olive-100: #d9e6c3;
+    --olive-200: #c2d69e;
+    --olive-300: #a9c679;
+    --olive-400: #91b755;
+    --olive-500: #7ba833;
+    --olive-600: #6a922c;
+    --olive-700: #597c25;
+    --olive-800: #48661f;
+
+    --azure-25: #f2faff;
+    --azure-50: #e6f4ff;
+    --azure-75: #d9efff;
+    --azure-100: #cce9ff;
+    --azure-200: #99d4ff;
+    --azure-300: #66bfff;
+    --azure-400: #33a9ff;
+    --azure-500: #0094ff;
+    --azure-600: #007ed9;
+    --azure-700: #0068b3;
+    --azure-800: #00528c;
+
+    --magenta-25: #fff2fb;
+    --magenta-50: #ffe6f6;
+    --magenta-75: #ffd9f0;
+    --magenta-100: #ffcce9;
+    --magenta-200: #ff99d3;
+    --magenta-300: #ff66bd;
+    --magenta-400: #f533a7;
+    --magenta-500: #d61c8c;
+    --magenta-600: #b51779;
+    --magenta-700: #941265;
+    --magenta-800: #6e0d4d;
+
+    --logo-blue-500: #20bedf;
+
+    --white-2: #ffffff05;
+    --white-4: #ffffff0a;
+    --white-6: #ffffff0f;
+    --white-8: #ffffff14;
+    --white-10: #ffffff1a;
+    --white-12: #ffffff1f;
+    --white-14: #ffffff24;
+    --white-16: #ffffff29;
+    --white-18: #ffffff2e;
+    --white-20: #ffffff33;
+
+    --black-2: #00000005;
+    --black-4: #0000000a;
+    --black-6: #0000000f;
+    --black-8: #00000014;
+    --black-10: #0000001a;
+    --black-12: #0000001f;
+    --black-14: #00000024;
+    --black-16: #00000029;
+    --black-18: #0000002e;
+    --black-20: #00000033;
+
+    --red-2: #cc000005;
+    --red-4: #cc00000a;
+    --red-6: #cc00000f;
+    --red-8: #cc000014;
+    --red-10: #cc00001a;
+    --red-12: #cc00001f;
+    --red-14: #cc000024;
+    --red-16: #cc000029;
+    --red-18: #cc00002e;
+    --red-20: #cc000033;
+
+    --blue-2: #0c4af305;
+    --blue-4: #0c4af30a;
+    --blue-6: #0c4af30f;
+    --blue-8: #0c4af314;
+    --blue-10: #0c4af31a;
+    --blue-12: #0c4af31f;
+    --blue-14: #0c4af324;
+    --blue-16: #0c4af329;
+    --blue-18: #0c4af32e;
+    --blue-20: #0c4af333;
+}
+
+// @media (prefers-color-scheme: dark) {
+//     :root {
+//         --white-10: #0000001a;
+//         --white-20: #00000033;
+//         --white-30: #0000004d;
+//         --white-40: #00000066;
+//         --white-50: #00000080;
+//         --white-60: #00000099;
+//         --white-70: #000000b2;
+//         --white-80: #000000cc;
+//         --white-90: #000000e5;
+//         --white-100: #000000;
+
+//         --black-10: #0000001a;
+//         --black-20: #00000033;
+//         --black-30: #0000004d;
+//         --black-40: #00000066;
+//         --black-50: #00000080;
+//         --black-60: #00000099;
+//         --black-70: #000000b2;
+//         --black-80: #000000cc;
+//         --black-90: #000000e5;
+//         --black-100: #000000;
+
+//         --blue-25: #02020e;
+//         --blue-50: #030317;
+//         --blue-75: #040425;
+//         --blue-100: #05052e;
+//         --blue-125: #07073c;
+//         --blue-150: #080845;
+//         --blue-200: #0a0a5c;
+//         --blue-300: #0f0f8a;
+//         --blue-400: #1414b8;
+//         --blue-500: #1919e6;
+//         --blue-600: #4747eb;
+//         --blue-700: #7575f0;
+//         --blue-750: #8c8cf2;
+//         --blue-775: #9a9af4;
+//         --blue-800: #a3a3f5;
+//         --blue-825: #b1b1f6;
+//         --blue-850: #babaf7;
+//         --blue-875: #c3c3f8;
+//         --blue-900: #d1d1fa;
+
+//         --grey-25: #0f1215;
+//         --grey-50: #161a1d;
+//         --grey-75: #1c2126;
+//         --grey-100: #21262c;
+//         --grey-125: #272e34;
+//         --grey-150: #2e363e;
+//         --grey-200: #364049;
+//         --grey-300: #4c5967;
+//         --grey-400: #617384;
+//         --grey-500: #7b8c9e;
+//         --grey-600: #98a6b3;
+//         --grey-700: #b6bfc9;
+//         --grey-750: #c7cfd6;
+//         --grey-775: #cdd4da;
+//         --grey-800: #d3d9de;
+//         --grey-825: #dce0e5;
+//         --grey-850: #e5e8eb;
+//         --grey-875: #eaedf0;
+//         --grey-900: #f0f2f4;
+
+//         --red-25: #200404;
+//         --red-50: #320606;
+//         --red-75: #3c0707;
+//         --red-100: #450808;
+//         --red-125: #530909;
+//         --red-150: #610a0a;
+//         --red-200: #730d0d;
+//         --red-300: #a11212;
+//         --red-400: #cf1717;
+//         --red-500: #e83030;
+//         --red-600: #ed5e5e;
+//         --red-700: #f28c8c;
+//         --red-750: #f5a8a8;
+//         --red-775: #f6b1b1;
+//         --red-800: #f7baba;
+//         --red-825: #f9c8c8;
+//         --red-850: #fad6d6;
+//         --red-875: #fbdfdf;
+//         --red-900: #fce8e8;
+
+//         --green-25: #0c170c;
+//         --green-50: #142414;
+//         --green-75: #172b17;
+//         --green-100: #1b321b;
+//         --green-125: #203c20;
+//         --green-150: #254625;
+//         --green-200: #2d532d;
+//         --green-300: #3e743e;
+//         --green-400: #509550;
+//         --green-500: #69af69;
+//         --green-600: #8bc18b;
+//         --green-700: #acd3ac;
+//         --green-750: #c0ddc0;
+//         --green-775: #c7e1c7;
+//         --green-800: #cde4cd;
+//         --green-825: #d7ead7;
+//         --green-850: #e1efe1;
+//         --green-875: #e8f3e8;
+//         --green-900: #eef6ee;
+
+//         --orange-25: #0f0601;
+//         --orange-50: #190b01;
+//         --orange-75: #220f01;
+//         --orange-100: #311502;
+//         --orange-125: #3f1b03;
+//         --orange-150: #491f04;
+//         --orange-200: #612905;
+//         --orange-300: #913e08;
+//         --orange-400: #c2530a;
+//         --orange-500: #f2680d;
+//         --orange-600: #f5863d;
+//         --orange-700: #f7a46e;
+//         --orange-750: #f8b386;
+//         --orange-775: #f9bc95;
+//         --orange-800: #fac29e;
+//         --orange-825: #fbcbad;
+//         --orange-850: #fbd1b6;
+//         --orange-875: #fcd7c0;
+//         --orange-900: #fde0ce;
+
+//         --pink-25: #2a0a14;
+//         --pink-50: #3a0e1c;
+//         --pink-75: #481122;
+//         --pink-100: #551428;
+//         --pink-200: #7a1b3b;
+//         --pink-300: #a1234f;
+//         --pink-400: #c72c64;
+//         --pink-500: #e44a7b;
+//         --pink-600: #ee7aa3;
+//         --pink-700: #f3a6c2;
+//         --pink-800: #f8d0de;
+
+//         --purple-25: #0e0b22;
+//         --purple-50: #171436;
+//         --purple-75: #1d1946;
+//         --purple-100: #231e55;
+//         --purple-200: #322B78;
+//         --purple-300: #42399e;
+//         --purple-400: #544bc4;
+//         --purple-500: #6e66e0;
+//         --purple-600: #8a85eb;
+//         --purple-700: #ada8f4;
+//         --purple-800: #d3d1fb;
+
+//         --teal-25: #08211c;
+//         --teal-50: #0e342c;
+//         --teal-75: #12423a;
+//         --teal-100: #155047;
+//         --teal-200: #1f7567;
+//         --teal-300: #2aa093;
+//         --teal-400: #36c7b6;
+//         --teal-500: #4fe3d0;
+//         --teal-600: #77ecdd;
+//         --teal-700: #a3f4ea;
+//         --teal-800: #cef9f3;
+
+//         --cyan-25: #001f24;
+//         --cyan-50: #003038;
+//         --cyan-75: #003d47;
+//         --cyan-100: #004a56;
+//         --cyan-200: #006b7a;
+//         --cyan-300: #008ca1;
+//         --cyan-400: #00afc8;
+//         --cyan-500: #1ad7f0;
+//         --cyan-600: #4ae6ff;
+//         --cyan-700: #7cf0ff;
+//         --cyan-800: #b3f8ff;
+
+//         --olive-25: #1a1f12;
+//         --olive-50: #eef4e4;
+//         --olive-75: #2c361c;
+//         --olive-100: #d9e6c3;
+//         --olive-200: #4a5c2c;
+//         --olive-300: #617a39;
+//         --olive-400: #79a247;
+//         --olive-500: #95c25a;
+//         --olive-600: #b0d97a;
+//         --olive-700: #c7e79d;
+//         --olive-800: #e1f3c9;
+
+//         --azure-25: #071521;
+//         --azure-50: #0c2236;
+//         --azure-75: #102d45;
+//         --azure-100: #143754;
+//         --azure-200: #1f557a;
+//         --azure-300: #2c73a1;
+//         --azure-400: #3d92c8;
+//         --azure-500: #57b2f0;
+//         --azure-600: #79c8ff;
+//         --azure-700: #a3ddff;
+//         --azure-800: #d6f1ff;
+
+//         --magenta-25: #1f0b16;
+//         --magenta-50: #2e1020;
+//         --magenta-75: #3a1428;
+//         --magenta-100: #46182f;
+//         --magenta-200: #682345;
+//         --magenta-300: #8f315e;
+//         --magenta-400: #b8427a;
+//         --magenta-500: #e85a9c;
+//         --magenta-600: #f07cb3;
+//         --magenta-700: #f6a6ca;
+//         --magenta-800: #fad1e5;
+
+//         --logo-blue-500: #20bedf ;
+
+//     }
+// }