@unabridged/midwest 0.0.3

package/app/assets/stylesheets/midwest/color-system.css

@@ -0,0 +1,645 @@
+@layer midwest.color-system {
+  :root {
+    --black: rgb(0, 0, 0, var(--tw-opacity, 1));
+    --white: rgb(255, 255, 255, var(--tw-opacity, 1));
+    --gray-0: rgb(246, 246, 247, var(--tw-opacity, 1));
+    --gray-1: rgb(216, 219, 221, var(--tw-opacity, 1));
+    --gray-2: rgb(187, 191, 195, var(--tw-opacity, 1));
+    --gray-3: rgb(158, 163, 169, var(--tw-opacity, 1));
+    --gray-4: rgb(129, 135, 142, var(--tw-opacity, 1));
+    --gray-5: rgb(101, 108, 115, var(--tw-opacity, 1));
+    --gray-6: rgb(73, 80, 87, var(--tw-opacity, 1));
+    --gray-7: rgb(61, 67, 74, var(--tw-opacity, 1));
+    --gray-8: rgb(48, 55, 61, var(--tw-opacity, 1));
+    --gray-9: rgb(37, 42, 48, var(--tw-opacity, 1));
+    --gray-10: rgb(25, 29, 34, var(--tw-opacity, 1));
+    --gray-11: rgb(14, 17, 19, var(--tw-opacity, 1));
+    --gray-12: rgb(3, 4, 5, var(--tw-opacity, 1));
+    --red-0: rgb(255, 242, 242, var(--tw-opacity, 1));
+    --red-1: rgb(255, 202, 202, var(--tw-opacity, 1));
+    --red-2: rgb(255, 162, 162, var(--tw-opacity, 1));
+    --red-3: rgb(255, 121, 121, var(--tw-opacity, 1));
+    --red-4: rgb(252, 86, 86, var(--tw-opacity, 1));
+    --red-5: rgb(238, 60, 60, var(--tw-opacity, 1));
+    --red-6: rgb(220, 38, 38, var(--tw-opacity, 1));
+    --red-7: rgb(198, 19, 19, var(--tw-opacity, 1));
+    --red-8: rgb(171, 5, 5, var(--tw-opacity, 1));
+    --red-9: rgb(134, 0, 0, var(--tw-opacity, 1));
+    --red-10: rgb(94, 0, 0, var(--tw-opacity, 1));
+    --red-11: rgb(53, 0, 0, var(--tw-opacity, 1));
+    --red-12: rgb(13, 0, 0, var(--tw-opacity, 1));
+    --orange-0: rgb(255, 246, 242, var(--tw-opacity, 1));
+    --orange-1: rgb(255, 219, 202, var(--tw-opacity, 1));
+    --orange-2: rgb(255, 193, 162, var(--tw-opacity, 1));
+    --orange-3: rgb(255, 169, 121, var(--tw-opacity, 1));
+    --orange-4: rgb(255, 146, 81, var(--tw-opacity, 1));
+    --orange-5: rgb(255, 124, 40, var(--tw-opacity, 1));
+    --orange-6: rgb(247, 103, 7, var(--tw-opacity, 1));
+    --orange-7: rgb(215, 83, 0, var(--tw-opacity, 1));
+    --orange-8: rgb(174, 65, 0, var(--tw-opacity, 1));
+    --orange-9: rgb(134, 48, 0, var(--tw-opacity, 1));
+    --orange-10: rgb(94, 32, 0, var(--tw-opacity, 1));
+    --orange-11: rgb(53, 17, 0, var(--tw-opacity, 1));
+    --orange-12: rgb(13, 4, 0, var(--tw-opacity, 1));
+    --gold-0: rgb(255, 252, 242, var(--tw-opacity, 1));
+    --gold-1: rgb(255, 241, 202, var(--tw-opacity, 1));
+    --gold-2: rgb(255, 229, 162, var(--tw-opacity, 1));
+    --gold-3: rgb(255, 214, 121, var(--tw-opacity, 1));
+    --gold-4: rgb(255, 198, 81, var(--tw-opacity, 1));
+    --gold-5: rgb(255, 179, 40, var(--tw-opacity, 1));
+    --gold-6: rgb(245, 159, 0, var(--tw-opacity, 1));
+    --gold-7: rgb(215, 139, 0, var(--tw-opacity, 1));
+    --gold-8: rgb(174, 117, 0, var(--tw-opacity, 1));
+    --gold-9: rgb(134, 93, 0, var(--tw-opacity, 1));
+    --gold-10: rgb(94, 67, 0, var(--tw-opacity, 1));
+    --gold-11: rgb(53, 40, 0, var(--tw-opacity, 1));
+    --gold-12: rgb(13, 10, 0, var(--tw-opacity, 1));
+    --yellow-0: rgb(255, 255, 242, var(--tw-opacity, 1));
+    --yellow-1: rgb(255, 253, 202, var(--tw-opacity, 1));
+    --yellow-2: rgb(255, 247, 162, var(--tw-opacity, 1));
+    --yellow-3: rgb(255, 239, 121, var(--tw-opacity, 1));
+    --yellow-4: rgb(255, 228, 81, var(--tw-opacity, 1));
+    --yellow-5: rgb(255, 213, 46, var(--tw-opacity, 1));
+    --yellow-6: rgb(252, 196, 25, var(--tw-opacity, 1));
+    --yellow-7: rgb(215, 173, 5, var(--tw-opacity, 1));
+    --yellow-8: rgb(174, 147, 0, var(--tw-opacity, 1));
+    --yellow-9: rgb(134, 118, 0, var(--tw-opacity, 1));
+    --yellow-10: rgb(94, 86, 0, var(--tw-opacity, 1));
+    --yellow-11: rgb(53, 51, 0, var(--tw-opacity, 1));
+    --yellow-12: rgb(13, 13, 0, var(--tw-opacity, 1));
+    --lime-0: rgb(250, 255, 242, var(--tw-opacity, 1));
+    --lime-1: rgb(232, 255, 202, var(--tw-opacity, 1));
+    --lime-2: rgb(213, 255, 162, var(--tw-opacity, 1));
+    --lime-3: rgb(193, 249, 121, var(--tw-opacity, 1));
+    --lime-4: rgb(173, 238, 82, var(--tw-opacity, 1));
+    --lime-5: rgb(152, 222, 54, var(--tw-opacity, 1));
+    --lime-6: rgb(130, 201, 30, var(--tw-opacity, 1));
+    --lime-7: rgb(112, 181, 13, var(--tw-opacity, 1));
+    --lime-8: rgb(92, 157, 1, var(--tw-opacity, 1));
+    --lime-9: rgb(72, 128, 0, var(--tw-opacity, 1));
+    --lime-10: rgb(51, 94, 0, var(--tw-opacity, 1));
+    --lime-11: rgb(30, 53, 0, var(--tw-opacity, 1));
+    --lime-12: rgb(7, 13, 0, var(--tw-opacity, 1));
+    --green-0: rgb(242, 254, 245, var(--tw-opacity, 1));
+    --green-1: rgb(202, 248, 214, var(--tw-opacity, 1));
+    --green-2: rgb(162, 239, 184, var(--tw-opacity, 1));
+    --green-3: rgb(121, 225, 155, var(--tw-opacity, 1));
+    --green-4: rgb(81, 208, 127, var(--tw-opacity, 1));
+    --green-5: rgb(49, 188, 100, var(--tw-opacity, 1));
+    --green-6: rgb(22, 163, 74, var(--tw-opacity, 1));
+    --green-7: rgb(9, 147, 60, var(--tw-opacity, 1));
+    --green-8: rgb(0, 127, 46, var(--tw-opacity, 1));
+    --green-9: rgb(0, 104, 34, var(--tw-opacity, 1));
+    --green-10: rgb(0, 77, 23, var(--tw-opacity, 1));
+    --green-11: rgb(0, 46, 12, var(--tw-opacity, 1));
+    --green-12: rgb(0, 0, 0, var(--tw-opacity, 1));
+    --teal-0: rgb(242, 255, 250, var(--tw-opacity, 1));
+    --teal-1: rgb(202, 255, 234, var(--tw-opacity, 1));
+    --teal-2: rgb(162, 250, 216, var(--tw-opacity, 1));
+    --teal-3: rgb(121, 240, 196, var(--tw-opacity, 1));
+    --teal-4: rgb(81, 226, 175, var(--tw-opacity, 1));
+    --teal-5: rgb(42, 208, 153, var(--tw-opacity, 1));
+    --teal-6: rgb(16, 185, 129, var(--tw-opacity, 1));
+    --teal-7: rgb(2, 168, 113, var(--tw-opacity, 1));
+    --teal-8: rgb(0, 146, 95, var(--tw-opacity, 1));
+    --teal-9: rgb(0, 119, 75, var(--tw-opacity, 1));
+    --teal-10: rgb(0, 89, 54, var(--tw-opacity, 1));
+    --teal-11: rgb(0, 53, 32, var(--tw-opacity, 1));
+    --teal-12: rgb(0, 13, 8, var(--tw-opacity, 1));
+    --cyan-0: rgb(242, 254, 255, var(--tw-opacity, 1));
+    --cyan-1: rgb(202, 249, 255, var(--tw-opacity, 1));
+    --cyan-2: rgb(162, 240, 254, var(--tw-opacity, 1));
+    --cyan-3: rgb(121, 229, 247, var(--tw-opacity, 1));
+    --cyan-4: rgb(88, 214, 235, var(--tw-opacity, 1));
+    --cyan-5: rgb(61, 197, 219, var(--tw-opacity, 1));
+    --cyan-6: rgb(38, 176, 199, var(--tw-opacity, 1));
+    --cyan-7: rgb(21, 156, 179, var(--tw-opacity, 1));
+    --cyan-8: rgb(8, 133, 154, var(--tw-opacity, 1));
+    --cyan-9: rgb(0, 108, 126, var(--tw-opacity, 1));
+    --cyan-10: rgb(0, 79, 93, var(--tw-opacity, 1));
+    --cyan-11: rgb(0, 47, 53, var(--tw-opacity, 1));
+    --cyan-12: rgb(0, 12, 13, var(--tw-opacity, 1));
+    --blue-0: rgb(242, 249, 255, var(--tw-opacity, 1));
+    --blue-1: rgb(202, 229, 255, var(--tw-opacity, 1));
+    --blue-2: rgb(162, 209, 255, var(--tw-opacity, 1));
+    --blue-3: rgb(121, 189, 255, var(--tw-opacity, 1));
+    --blue-4: rgb(81, 168, 248, var(--tw-opacity, 1));
+    --blue-5: rgb(51, 147, 234, var(--tw-opacity, 1));
+    --blue-6: rgb(28, 126, 214, var(--tw-opacity, 1));
+    --blue-7: rgb(11, 107, 193, var(--tw-opacity, 1));
+    --blue-8: rgb(0, 87, 167, var(--tw-opacity, 1));
+    --blue-9: rgb(0, 68, 134, var(--tw-opacity, 1));
+    --blue-10: rgb(0, 47, 94, var(--tw-opacity, 1));
+    --blue-11: rgb(0, 27, 53, var(--tw-opacity, 1));
+    --blue-12: rgb(0, 7, 13, var(--tw-opacity, 1));
+    --indigo-0: rgb(242, 245, 255, var(--tw-opacity, 1));
+    --indigo-1: rgb(202, 216, 255, var(--tw-opacity, 1));
+    --indigo-2: rgb(162, 189, 255, var(--tw-opacity, 1));
+    --indigo-3: rgb(121, 163, 255, var(--tw-opacity, 1));
+    --indigo-4: rgb(84, 140, 255, var(--tw-opacity, 1));
+    --indigo-5: rgb(58, 119, 252, var(--tw-opacity, 1));
+    --indigo-6: rgb(37, 99, 235, var(--tw-opacity, 1));
+    --indigo-7: rgb(17, 78, 212, var(--tw-opacity, 1));
+    --indigo-8: rgb(3, 59, 174, var(--tw-opacity, 1));
+    --indigo-9: rgb(0, 42, 134, var(--tw-opacity, 1));
+    --indigo-10: rgb(0, 27, 94, var(--tw-opacity, 1));
+    --indigo-11: rgb(0, 14, 53, var(--tw-opacity, 1));
+    --indigo-12: rgb(0, 3, 13, var(--tw-opacity, 1));
+    --violet-0: rgb(250, 242, 255, var(--tw-opacity, 1));
+    --violet-1: rgb(233, 202, 255, var(--tw-opacity, 1));
+    --violet-2: rgb(217, 162, 255, var(--tw-opacity, 1));
+    --violet-3: rgb(200, 124, 255, var(--tw-opacity, 1));
+    --violet-4: rgb(182, 95, 255, var(--tw-opacity, 1));
+    --violet-5: rgb(165, 71, 250, var(--tw-opacity, 1));
+    --violet-6: rgb(147, 51, 234, var(--tw-opacity, 1));
+    --violet-7: rgb(124, 30, 210, var(--tw-opacity, 1));
+    --violet-8: rgb(102, 14, 174, var(--tw-opacity, 1));
+    --violet-9: rgb(78, 3, 134, var(--tw-opacity, 1));
+    --violet-10: rgb(55, 0, 94, var(--tw-opacity, 1));
+    --violet-11: rgb(31, 0, 53, var(--tw-opacity, 1));
+    --violet-12: rgb(8, 0, 13, var(--tw-opacity, 1));
+    --magenta-0: rgb(253, 242, 255, var(--tw-opacity, 1));
+    --magenta-1: rgb(246, 203, 255, var(--tw-opacity, 1));
+    --magenta-2: rgb(236, 167, 252, var(--tw-opacity, 1));
+    --magenta-3: rgb(224, 135, 245, var(--tw-opacity, 1));
+    --magenta-4: rgb(209, 107, 234, var(--tw-opacity, 1));
+    --magenta-5: rgb(193, 83, 219, var(--tw-opacity, 1));
+    --magenta-6: rgb(174, 62, 201, var(--tw-opacity, 1));
+    --magenta-7: rgb(152, 42, 179, var(--tw-opacity, 1));
+    --magenta-8: rgb(129, 27, 153, var(--tw-opacity, 1));
+    --magenta-9: rgb(103, 14, 124, var(--tw-opacity, 1));
+    --magenta-10: rgb(74, 6, 91, var(--tw-opacity, 1));
+    --magenta-11: rgb(44, 1, 53, var(--tw-opacity, 1));
+    --magenta-12: rgb(11, 0, 13, var(--tw-opacity, 1));
+    --pink-0: rgb(255, 242, 246, var(--tw-opacity, 1));
+    --pink-1: rgb(255, 202, 220, var(--tw-opacity, 1));
+    --pink-2: rgb(255, 162, 195, var(--tw-opacity, 1));
+    --pink-3: rgb(255, 127, 171, var(--tw-opacity, 1));
+    --pink-4: rgb(246, 97, 149, var(--tw-opacity, 1));
+    --pink-5: rgb(232, 72, 128, var(--tw-opacity, 1));
+    --pink-6: rgb(214, 51, 108, var(--tw-opacity, 1));
+    --pink-7: rgb(192, 32, 88, var(--tw-opacity, 1));
+    --pink-8: rgb(165, 16, 68, var(--tw-opacity, 1));
+    --pink-9: rgb(134, 5, 50, var(--tw-opacity, 1));
+    --pink-10: rgb(94, 0, 34, var(--tw-opacity, 1));
+    --pink-11: rgb(53, 0, 18, var(--tw-opacity, 1));
+    --pink-12: rgb(13, 0, 4, var(--tw-opacity, 1));
+
+    --theme-0: var(--blue-0);
+    --theme-1: var(--blue-1);
+    --theme-2: var(--blue-2);
+    --theme-3: var(--blue-3);
+    --theme-4: var(--blue-4);
+    --theme-5: var(--blue-5);
+    --theme-6: var(--blue-6);
+    --theme-7: var(--blue-7);
+    --theme-8: var(--blue-8);
+    --theme-9: var(--blue-9);
+    --theme-10: var(--blue-10);
+    --theme-11: var(--blue-11);
+    --theme-12: var(--blue-12);
+
+    --complement-0: var(--indigo-0);
+    --complement-1: var(--indigo-1);
+    --complement-2: var(--indigo-2);
+    --complement-3: var(--indigo-3);
+    --complement-4: var(--indigo-4);
+    --complement-5: var(--indigo-5);
+    --complement-6: var(--indigo-6);
+    --complement-7: var(--indigo-7);
+    --complement-8: var(--indigo-8);
+    --complement-9: var(--indigo-9);
+    --complement-10: var(--indigo-10);
+    --complement-11: var(--indigo-11);
+    --complement-12: var(--indigo-12);
+  }
+
+  * {
+    accent-color: var(--theme-6);
+  }
+
+  .theme-gray {
+    --theme-0: var(--gray-0);
+    --theme-1: var(--gray-1);
+    --theme-2: var(--gray-2);
+    --theme-3: var(--gray-3);
+    --theme-4: var(--gray-4);
+    --theme-5: var(--gray-5);
+    --theme-6: var(--gray-6);
+    --theme-7: var(--gray-7);
+    --theme-8: var(--gray-8);
+    --theme-9: var(--gray-9);
+    --theme-10: var(--gray-10);
+    --theme-11: var(--gray-11);
+    --theme-12: var(--gray-12);
+  }
+
+  .theme-red {
+    --theme-0: var(--red-0);
+    --theme-1: var(--red-1);
+    --theme-2: var(--red-2);
+    --theme-3: var(--red-3);
+    --theme-4: var(--red-4);
+    --theme-5: var(--red-5);
+    --theme-6: var(--red-6);
+    --theme-7: var(--red-7);
+    --theme-8: var(--red-8);
+    --theme-9: var(--red-9);
+    --theme-10: var(--red-10);
+    --theme-11: var(--red-11);
+    --theme-12: var(--red-12);
+  }
+
+  .theme-orange {
+    --theme-0: var(--orange-0);
+    --theme-1: var(--orange-1);
+    --theme-2: var(--orange-2);
+    --theme-3: var(--orange-3);
+    --theme-4: var(--orange-4);
+    --theme-5: var(--orange-5);
+    --theme-6: var(--orange-6);
+    --theme-7: var(--orange-7);
+    --theme-8: var(--orange-8);
+    --theme-9: var(--orange-9);
+    --theme-10: var(--orange-10);
+    --theme-11: var(--orange-11);
+    --theme-12: var(--orange-12);
+  }
+
+  .theme-gold {
+    --theme-0: var(--gold-0);
+    --theme-1: var(--gold-1);
+    --theme-2: var(--gold-2);
+    --theme-3: var(--gold-3);
+    --theme-4: var(--gold-4);
+    --theme-5: var(--gold-5);
+    --theme-6: var(--gold-6);
+    --theme-7: var(--gold-7);
+    --theme-8: var(--gold-8);
+    --theme-9: var(--gold-9);
+    --theme-10: var(--gold-10);
+    --theme-11: var(--gold-11);
+    --theme-12: var(--gold-12);
+  }
+
+  .theme-yellow {
+    --theme-0: var(--yellow-0);
+    --theme-1: var(--yellow-1);
+    --theme-2: var(--yellow-2);
+    --theme-3: var(--yellow-3);
+    --theme-4: var(--yellow-4);
+    --theme-5: var(--yellow-5);
+    --theme-6: var(--yellow-6);
+    --theme-7: var(--yellow-7);
+    --theme-8: var(--yellow-8);
+    --theme-9: var(--yellow-9);
+    --theme-10: var(--yellow-10);
+    --theme-11: var(--yellow-11);
+    --theme-12: var(--yellow-12);
+  }
+  .theme-lime {
+    --theme-0: var(--lime-0);
+    --theme-1: var(--lime-1);
+    --theme-2: var(--lime-2);
+    --theme-3: var(--lime-3);
+    --theme-4: var(--lime-4);
+    --theme-5: var(--lime-5);
+    --theme-6: var(--lime-6);
+    --theme-7: var(--lime-7);
+    --theme-8: var(--lime-8);
+    --theme-9: var(--lime-9);
+    --theme-10: var(--lime-10);
+    --theme-11: var(--lime-11);
+    --theme-12: var(--lime-12);
+  }
+  .theme-green {
+    --theme-0: var(--green-0);
+    --theme-1: var(--green-1);
+    --theme-2: var(--green-2);
+    --theme-3: var(--green-3);
+    --theme-4: var(--green-4);
+    --theme-5: var(--green-5);
+    --theme-6: var(--green-6);
+    --theme-7: var(--green-7);
+    --theme-8: var(--green-8);
+    --theme-9: var(--green-9);
+    --theme-10: var(--green-10);
+    --theme-11: var(--green-11);
+    --theme-12: var(--green-12);
+  }
+  .theme-teal {
+    --theme-0: var(--teal-0);
+    --theme-1: var(--teal-1);
+    --theme-2: var(--teal-2);
+    --theme-3: var(--teal-3);
+    --theme-4: var(--teal-4);
+    --theme-5: var(--teal-5);
+    --theme-6: var(--teal-6);
+    --theme-7: var(--teal-7);
+    --theme-8: var(--teal-8);
+    --theme-9: var(--teal-9);
+    --theme-10: var(--teal-10);
+    --theme-11: var(--teal-11);
+    --theme-12: var(--teal-12);
+  }
+  .theme-cyan {
+    --theme-0: var(--cyan-0);
+    --theme-1: var(--cyan-1);
+    --theme-2: var(--cyan-2);
+    --theme-3: var(--cyan-3);
+    --theme-4: var(--cyan-4);
+    --theme-5: var(--cyan-5);
+    --theme-6: var(--cyan-6);
+    --theme-7: var(--cyan-7);
+    --theme-8: var(--cyan-8);
+    --theme-9: var(--cyan-9);
+    --theme-10: var(--cyan-10);
+    --theme-11: var(--cyan-11);
+    --theme-12: var(--cyan-12);
+  }
+  .theme-blue {
+    --theme-0: var(--blue-0);
+    --theme-1: var(--blue-1);
+    --theme-2: var(--blue-2);
+    --theme-3: var(--blue-3);
+    --theme-4: var(--blue-4);
+    --theme-5: var(--blue-5);
+    --theme-6: var(--blue-6);
+    --theme-7: var(--blue-7);
+    --theme-8: var(--blue-8);
+    --theme-9: var(--blue-9);
+    --theme-10: var(--blue-10);
+    --theme-11: var(--blue-11);
+    --theme-12: var(--blue-12);
+  }
+  .theme-indigo {
+    --theme-0: var(--indigo-0);
+    --theme-1: var(--indigo-1);
+    --theme-2: var(--indigo-2);
+    --theme-3: var(--indigo-3);
+    --theme-4: var(--indigo-4);
+    --theme-5: var(--indigo-5);
+    --theme-6: var(--indigo-6);
+    --theme-7: var(--indigo-7);
+    --theme-8: var(--indigo-8);
+    --theme-9: var(--indigo-9);
+    --theme-10: var(--indigo-10);
+    --theme-11: var(--indigo-11);
+    --theme-12: var(--indigo-12);
+  }
+  .theme-violet {
+    --theme-0: var(--violet-0);
+    --theme-1: var(--violet-1);
+    --theme-2: var(--violet-2);
+    --theme-3: var(--violet-3);
+    --theme-4: var(--violet-4);
+    --theme-5: var(--violet-5);
+    --theme-6: var(--violet-6);
+    --theme-7: var(--violet-7);
+    --theme-8: var(--violet-8);
+    --theme-9: var(--violet-9);
+    --theme-10: var(--violet-10);
+    --theme-11: var(--violet-11);
+    --theme-12: var(--violet-12);
+  }
+  .theme-magenta {
+    --theme-0: var(--magenta-0);
+    --theme-1: var(--magenta-1);
+    --theme-2: var(--magenta-2);
+    --theme-3: var(--magenta-3);
+    --theme-4: var(--magenta-4);
+    --theme-5: var(--magenta-5);
+    --theme-6: var(--magenta-6);
+    --theme-7: var(--magenta-7);
+    --theme-8: var(--magenta-8);
+    --theme-9: var(--magenta-9);
+    --theme-10: var(--magenta-10);
+    --theme-11: var(--magenta-11);
+    --theme-12: var(--magenta-12);
+  }
+  .theme-pink {
+    --theme-0: var(--pink-0);
+    --theme-1: var(--pink-1);
+    --theme-2: var(--pink-2);
+    --theme-3: var(--pink-3);
+    --theme-4: var(--pink-4);
+    --theme-5: var(--pink-5);
+    --theme-6: var(--pink-6);
+    --theme-7: var(--pink-7);
+    --theme-8: var(--pink-8);
+    --theme-9: var(--pink-9);
+    --theme-10: var(--pink-10);
+    --theme-11: var(--pink-11);
+    --theme-12: var(--pink-12);
+  }
+  .complement-gray {
+    --complement-0: var(--gray-0);
+    --complement-1: var(--gray-1);
+    --complement-2: var(--gray-2);
+    --complement-3: var(--gray-3);
+    --complement-4: var(--gray-4);
+    --complement-5: var(--gray-5);
+    --complement-6: var(--gray-6);
+    --complement-7: var(--gray-7);
+    --complement-8: var(--gray-8);
+    --complement-9: var(--gray-9);
+    --complement-10: var(--gray-10);
+    --complement-11: var(--gray-11);
+    --complement-12: var(--gray-12);
+  }
+  .complement-red {
+    --complement-0: var(--red-0);
+    --complement-1: var(--red-1);
+    --complement-2: var(--red-2);
+    --complement-3: var(--red-3);
+    --complement-4: var(--red-4);
+    --complement-5: var(--red-5);
+    --complement-6: var(--red-6);
+    --complement-7: var(--red-7);
+    --complement-8: var(--red-8);
+    --complement-9: var(--red-9);
+    --complement-10: var(--red-10);
+    --complement-11: var(--red-11);
+    --complement-12: var(--red-12);
+  }
+  .complement-orange {
+    --complement-0: var(--orange-0);
+    --complement-1: var(--orange-1);
+    --complement-2: var(--orange-2);
+    --complement-3: var(--orange-3);
+    --complement-4: var(--orange-4);
+    --complement-5: var(--orange-5);
+    --complement-6: var(--orange-6);
+    --complement-7: var(--orange-7);
+    --complement-8: var(--orange-8);
+    --complement-9: var(--orange-9);
+    --complement-10: var(--orange-10);
+    --complement-11: var(--orange-11);
+    --complement-12: var(--orange-12);
+  }
+  .complement-gold {
+    --complement-0: var(--gold-0);
+    --complement-1: var(--gold-1);
+    --complement-2: var(--gold-2);
+    --complement-3: var(--gold-3);
+    --complement-4: var(--gold-4);
+    --complement-5: var(--gold-5);
+    --complement-6: var(--gold-6);
+    --complement-7: var(--gold-7);
+    --complement-8: var(--gold-8);
+    --complement-9: var(--gold-9);
+    --complement-10: var(--gold-10);
+    --complement-11: var(--gold-11);
+    --complement-12: var(--gold-12);
+  }
+  .complement-yellow {
+    --complement-0: var(--yellow-0);
+    --complement-1: var(--yellow-1);
+    --complement-2: var(--yellow-2);
+    --complement-3: var(--yellow-3);
+    --complement-4: var(--yellow-4);
+    --complement-5: var(--yellow-5);
+    --complement-6: var(--yellow-6);
+    --complement-7: var(--yellow-7);
+    --complement-8: var(--yellow-8);
+    --complement-9: var(--yellow-9);
+    --complement-10: var(--yellow-10);
+    --complement-11: var(--yellow-11);
+    --complement-12: var(--yellow-12);
+  }
+  .complement-lime {
+    --complement-0: var(--lime-0);
+    --complement-1: var(--lime-1);
+    --complement-2: var(--lime-2);
+    --complement-3: var(--lime-3);
+    --complement-4: var(--lime-4);
+    --complement-5: var(--lime-5);
+    --complement-6: var(--lime-6);
+    --complement-7: var(--lime-7);
+    --complement-8: var(--lime-8);
+    --complement-9: var(--lime-9);
+    --complement-10: var(--lime-10);
+    --complement-11: var(--lime-11);
+    --complement-12: var(--lime-12);
+  }
+  .complement-green {
+    --complement-0: var(--green-0);
+    --complement-1: var(--green-1);
+    --complement-2: var(--green-2);
+    --complement-3: var(--green-3);
+    --complement-4: var(--green-4);
+    --complement-5: var(--green-5);
+    --complement-6: var(--green-6);
+    --complement-7: var(--green-7);
+    --complement-8: var(--green-8);
+    --complement-9: var(--green-9);
+    --complement-10: var(--green-10);
+    --complement-11: var(--green-11);
+    --complement-12: var(--green-12);
+  }
+  .complement-teal {
+    --complement-0: var(--teal-0);
+    --complement-1: var(--teal-1);
+    --complement-2: var(--teal-2);
+    --complement-3: var(--teal-3);
+    --complement-4: var(--teal-4);
+    --complement-5: var(--teal-5);
+    --complement-6: var(--teal-6);
+    --complement-7: var(--teal-7);
+    --complement-8: var(--teal-8);
+    --complement-9: var(--teal-9);
+    --complement-10: var(--teal-10);
+    --complement-11: var(--teal-11);
+    --complement-12: var(--teal-12);
+  }
+  .complement-cyan {
+    --complement-0: var(--cyan-0);
+    --complement-1: var(--cyan-1);
+    --complement-2: var(--cyan-2);
+    --complement-3: var(--cyan-3);
+    --complement-4: var(--cyan-4);
+    --complement-5: var(--cyan-5);
+    --complement-6: var(--cyan-6);
+    --complement-7: var(--cyan-7);
+    --complement-8: var(--cyan-8);
+    --complement-9: var(--cyan-9);
+    --complement-10: var(--cyan-10);
+    --complement-11: var(--cyan-11);
+    --complement-12: var(--cyan-12);
+  }
+  .complement-blue {
+    --complement-0: var(--blue-0);
+    --complement-1: var(--blue-1);
+    --complement-2: var(--blue-2);
+    --complement-3: var(--blue-3);
+    --complement-4: var(--blue-4);
+    --complement-5: var(--blue-5);
+    --complement-6: var(--blue-6);
+    --complement-7: var(--blue-7);
+    --complement-8: var(--blue-8);
+    --complement-9: var(--blue-9);
+    --complement-10: var(--blue-10);
+    --complement-11: var(--blue-11);
+    --complement-12: var(--blue-12);
+  }
+  .complement-indigo {
+    --complement-0: var(--indigo-0);
+    --complement-1: var(--indigo-1);
+    --complement-2: var(--indigo-2);
+    --complement-3: var(--indigo-3);
+    --complement-4: var(--indigo-4);
+    --complement-5: var(--indigo-5);
+    --complement-6: var(--indigo-6);
+    --complement-7: var(--indigo-7);
+    --complement-8: var(--indigo-8);
+    --complement-9: var(--indigo-9);
+    --complement-10: var(--indigo-10);
+    --complement-11: var(--indigo-11);
+    --complement-12: var(--indigo-12);
+  }
+  .complement-violet {
+    --complement-0: var(--violet-0);
+    --complement-1: var(--violet-1);
+    --complement-2: var(--violet-2);
+    --complement-3: var(--violet-3);
+    --complement-4: var(--violet-4);
+    --complement-5: var(--violet-5);
+    --complement-6: var(--violet-6);
+    --complement-7: var(--violet-7);
+    --complement-8: var(--violet-8);
+    --complement-9: var(--violet-9);
+    --complement-10: var(--violet-10);
+    --complement-11: var(--violet-11);
+    --complement-12: var(--violet-12);
+  }
+  .complement-magenta {
+    --complement-0: var(--magenta-0);
+    --complement-1: var(--magenta-1);
+    --complement-2: var(--magenta-2);
+    --complement-3: var(--magenta-3);
+    --complement-4: var(--magenta-4);
+    --complement-5: var(--magenta-5);
+    --complement-6: var(--magenta-6);
+    --complement-7: var(--magenta-7);
+    --complement-8: var(--magenta-8);
+    --complement-9: var(--magenta-9);
+    --complement-10: var(--magenta-10);
+    --complement-11: var(--magenta-11);
+    --complement-12: var(--magenta-12);
+  }
+  .complement-pink {
+    --complement-0: var(--pink-0);
+    --complement-1: var(--pink-1);
+    --complement-2: var(--pink-2);
+    --complement-3: var(--pink-3);
+    --complement-4: var(--pink-4);
+    --complement-5: var(--pink-5);
+    --complement-6: var(--pink-6);
+    --complement-7: var(--pink-7);
+    --complement-8: var(--pink-8);
+    --complement-9: var(--pink-9);
+    --complement-10: var(--pink-10);
+    --complement-11: var(--pink-11);
+    --complement-12: var(--pink-12);
+  }
+}

package/app/assets/stylesheets/midwest/dark-mode.css

@@ -0,0 +1,17 @@
+@layer midwest.dark-mode {
+  html {
+    @apply bg-gray-0 dark:bg-gray-12 text-gray-10 dark:text-gray-2;
+  }
+
+  html.dark {
+    @apply bg-gray-12 text-gray-2 !important;
+  }
+
+  h1, h2, h3, h4, h5, h6, label, p {
+    @apply text-black dark:text-white;
+  }
+
+  p {
+    @apply text-gray-10 dark:text-gray-2;
+  }
+}

package/app/assets/stylesheets/midwest/responsive-system.css

@@ -0,0 +1,48 @@
+@layer midwest.responsive {
+  html {
+    @apply subpixel-antialiased;
+    font-variant-numeric: tabular-nums;
+    scroll-behavior: smooth;
+    scroll-padding: 4rem;
+    letter-spacing: 0.02em;
+    /* Responsive typography uses rems to support minimum type across browsers. */
+    /* Credit: Cassey Lottman */
+    font-size: 0.625rem !important /* 10px */ ;
+  }
+
+  @media (min-width: 400px) {
+    html {
+      font-size: 0.6875rem !important /* 11px */ ;
+    }
+  }
+
+  @media (min-width: 600px) {
+    html {
+      font-size: 0.75rem !important /* 12px */;
+    }
+  }
+
+  @media (min-width: 800px) {
+    html {
+      font-size: 0.8125rem !important /* 13px */;
+    }
+  }
+
+  @media (min-width: 1000px) {
+    html {
+      font-size: 0.875rem !important /* 14px */;
+    }
+  }
+
+  @media (min-width: 1200px) {
+    html {
+      font-size: 0.9375rem /* 15px */;
+    }
+  }
+
+  @media (min-width: 1400px) {
+    html {
+      font-size: 1rem /* 16px */;
+    }
+  }
+}