@xplortech/apollo-core 0.1.1 → 0.2.0

package/build/style.css

@@ -1,3 +1,169 @@
+:root {
+  --xpl-size-spacing-144: 8.75rem;
+  --xpl-size-spacing-112: 7rem;
+  --xpl-size-spacing-80: 5rem;
+  --xpl-size-spacing-64: 4rem;
+  --xpl-size-spacing-48: 3rem;
+  --xpl-size-spacing-32: 2rem;
+  --xpl-size-spacing-24: 1.5rem;
+  --xpl-size-spacing-16: 1rem;
+  --xpl-size-spacing-12: 0.75rem;
+  --xpl-size-spacing-8: 0.5rem;
+  --xpl-size-spacing-4: 0.25rem;
+  --xpl-size-spacing-0: 0rem;
+  --xpl-size-font-caption: 0.75rem;
+  --xpl-size-font-callout: 0.75rem;
+  --xpl-size-font-body: 0.875rem;
+  --xpl-size-font-title-5: 0.875rem;
+  --xpl-size-font-title-4: 1rem;
+  --xpl-size-font-title-3: 1.25rem;
+  --xpl-size-font-title-2: 1.5rem;
+  --xpl-size-font-title-1: 1.875rem;
+  --xpl-font-weight-normal: normal;
+  --xpl-font-weight-medium: medium;
+  --xpl-font-weight-bold: bold;
+  --xpl-font-family-default: apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif;
+  --xpl-color-transparent: rgba(255, 255, 255, 0);
+  --xpl-color-red-900: #731409;
+  --xpl-color-red-800: #961305;
+  --xpl-color-red-700: #c2210f;
+  --xpl-color-red-600: #db321f;
+  --xpl-color-red-500: #f24f3d;
+  --xpl-color-red-400: #f87263;
+  --xpl-color-red-300: #ff9387;
+  --xpl-color-red-200: #fec5be;
+  --xpl-color-red-100: #fed9d5;
+  --xpl-color-red-50: #fef7f3;
+  --xpl-color-pink-900: #730b3f;
+  --xpl-color-pink-800: #990f54;
+  --xpl-color-pink-700: #bf1d7b;
+  --xpl-color-pink-600: #cc3399;
+  --xpl-color-pink-500: #e550c8;
+  --xpl-color-pink-400: #f26ddc;
+  --xpl-color-pink-300: #ff8df4;
+  --xpl-color-pink-200: #ffb8f9;
+  --xpl-color-pink-100: #ffd9fb;
+  --xpl-color-pink-50: #fff0fe;
+  --xpl-color-yellow-900: #5c5002;
+  --xpl-color-yellow-800: #726916;
+  --xpl-color-yellow-700: #8a8220;
+  --xpl-color-yellow-600: #9e9828;
+  --xpl-color-yellow-500: #adab20;
+  --xpl-color-yellow-400: #c6cc4e;
+  --xpl-color-yellow-300: #dce967;
+  --xpl-color-yellow-200: #ecfd91;
+  --xpl-color-yellow-100: #f3febb;
+  --xpl-color-yellow-50: #fbffe5;
+  --xpl-color-green-900: #154737;
+  --xpl-color-green-800: #1d614b;
+  --xpl-color-green-700: #24785d;
+  --xpl-color-green-600: #2e9977;
+  --xpl-color-green-500: #37b88f;
+  --xpl-color-green-400: #4ad4a8;
+  --xpl-color-green-300: #52ebba;
+  --xpl-color-green-200: #74fbd0;
+  --xpl-color-green-100: #c4ffed;
+  --xpl-color-green-50: #ebfff8;
+  --xpl-color-orange-900: #7a2714;
+  --xpl-color-orange-800: #a6361a;
+  --xpl-color-orange-700: #cc4121;
+  --xpl-color-orange-600: #f44e27;
+  --xpl-color-orange-500: #f76d43;
+  --xpl-color-orange-400: #f99170;
+  --xpl-color-orange-300: #ffbda8;
+  --xpl-color-orange-200: #ffdccc;
+  --xpl-color-orange-100: #feede4;
+  --xpl-color-orange-50: #fef6f4;
+  --xpl-color-purple-900: #330d80;
+  --xpl-color-purple-800: #4d1ab2;
+  --xpl-color-purple-700: #6923f4;
+  --xpl-color-purple-600: #793ef7;
+  --xpl-color-purple-500: #8857fa;
+  --xpl-color-purple-400: #a480ff;
+  --xpl-color-purple-300: #c3adff;
+  --xpl-color-purple-200: #ddd1ff;
+  --xpl-color-purple-100: #ebe5ff;
+  --xpl-color-purple-50: #f4f2ff;
+  --xpl-color-gray-1200: #18161f;
+  --xpl-color-gray-1100: #201e29;
+  --xpl-color-gray-1000: #292632;
+  --xpl-color-gray-900: #302d3b;
+  --xpl-color-gray-800: #363240;
+  --xpl-color-gray-700: #3c3847;
+  --xpl-color-gray-600: #6a6d7d;
+  --xpl-color-gray-500: #999ba8;
+  --xpl-color-gray-400: #e1e2e8;
+  --xpl-color-gray-300: #eaebef;
+  --xpl-color-gray-200: #eeeff3;
+  --xpl-color-gray-100: #f3f4f6;
+  --xpl-color-gray-50: #f8f9fa;
+  --xpl-color-gray-0: #ffffff;
+  --xpl-color-text-warning-dm: var(--xpl-color-red-300);
+  --xpl-color-text-warning-lm: var(--xpl-color-red-700);
+  --xpl-color-text-reverse-dm: var(--xpl-color-gray-1000);
+  --xpl-color-text-reverse-lm: var(--xpl-color-gray-0);
+  --xpl-color-text-secondary-dm: var(--xpl-color-gray-500);
+  --xpl-color-text-secondary-lm: var(--xpl-color-gray-600);
+  --xpl-color-text-primary-dm: var(--xpl-color-gray-0);
+  --xpl-color-text-primary-lm: var(--xpl-color-gray-900);
+  --xpl-color-action-warning-hover-dm: var(--xpl-color-red-400);
+  --xpl-color-action-warning-hover-lm: var(--xpl-color-red-800);
+  --xpl-color-action-warning-dm: var(--xpl-color-red-300);
+  --xpl-color-action-warning-lm: var(--xpl-color-red-700);
+  --xpl-color-action-disabled-dm: var(--xpl-color-gray-800);
+  --xpl-color-action-disabled-lm: var(--xpl-color-gray-100);
+  --xpl-color-action-primary-hover-dm: var(--xpl-color-purple-400);
+  --xpl-color-action-primary-hover-lm: var(--xpl-color-purple-800);
+  --xpl-color-action-primary-dm: var(--xpl-color-purple-300);
+  --xpl-color-action-primary-lm: var(--xpl-color-purple-700);
+  --xpl-color-trivial-bg-dm: var(--xpl-color-transparent);
+  --xpl-color-trivial-bg-lm: var(--xpl-color-gray-400);
+  --xpl-color-trivial-dm: var(--xpl-color-gray-500);
+  --xpl-color-trivial-lm: var(--xpl-color-gray-600);
+  --xpl-color-information-bg-dm: var(--xpl-color-transparent);
+  --xpl-color-highlight-bg-dm: var(--xpl-color-transparent);
+  --xpl-color-highlight-bg-lm: var(--xpl-color-yellow-200);
+  --xpl-color-highlight-dm: var(--xpl-color-yellow-200);
+  --xpl-color-highlight-lm: var(--xpl-color-yellow-500);
+  --xpl-color-negative-bg-dm: var(--xpl-color-transparent);
+  --xpl-color-negative-bg-lm: var(--xpl-color-red-100);
+  --xpl-color-negative-dm: var(--xpl-color-red-300);
+  --xpl-color-negative-lm: var(--xpl-color-red-600);
+  --xpl-color-positive-bg-dm: var(--xpl-color-transparent);
+  --xpl-color-positive-bg-lm: var(--xpl-color-green-100);
+  --xpl-color-positive-dm: var(--xpl-color-green-300);
+  --xpl-color-positive-lm: var(--xpl-color-green-500);
+  --xpl-color-secondary-bg-dm: var(--xpl-color-gray-900); /* themable */
+  --xpl-color-secondary-bg-lm: var(--xpl-color-purple-50); /* themable */
+  --xpl-color-secondary-hover-dm: var(--xpl-color-purple-400); /* themable */
+  --xpl-color-secondary-hover-lm: var(--xpl-color-purple-800); /* themable */
+  --xpl-color-secondary-dm: var(--xpl-color-purple-300); /* themable */
+  --xpl-color-secondary-lm: var(--xpl-color-purple-700); /* themable */
+  --xpl-color-primary-bg-dm: var(--xpl-color-gray-900); /* themable */
+  --xpl-color-primary-bg-lm: var(--xpl-color-orange-50); /* themable */
+  --xpl-color-primary-dm: var(--xpl-color-orange-400); /* themable */
+  --xpl-color-primary-lm: var(--xpl-color-orange-600); /* themable */
+  --xpl-color-stroke-dm: var(--xpl-color-gray-700);
+  --xpl-color-stroke-lm: var(--xpl-color-gray-400);
+  --xpl-color-navigation-dm: var(--xpl-color-gray-1000);
+  --xpl-color-navigation-lm: var(--xpl-color-gray-1000);
+  --xpl-color-background-2-dm: var(--xpl-color-gray-1100);
+  --xpl-color-background-2-lm: var(--xpl-color-gray-100);
+  --xpl-color-background-dm: var(--xpl-color-gray-1200);
+  --xpl-color-background-lm: var(--xpl-color-gray-50);
+  --xpl-color-foreground-dm: var(--xpl-color-gray-1000);
+  --xpl-color-foreground-lm: var(--xpl-color-gray-0);
+  --xpl-color-accent-purple: var(--xpl-color-purple-300);
+  --xpl-color-accent-pink: var(--xpl-color-pink-300);
+  --xpl-color-accent-yellow: var(--xpl-color-yellow-200);
+  --xpl-color-accent-green: var(--xpl-color-green-200);
+  --xpl-color-text-action-dm: var(--xpl-color-primary-dm); /* uses themable token */
+  --xpl-color-text-action-lm: var(--xpl-color-primary-lm); /* uses themable token */
+  --xpl-color-information-bg-lm: var(--xpl-color-primary-bg-lm); /* uses themable token */
+  --xpl-color-information-dm: var(--xpl-color-primary-dm); /* uses themable token */
+  --xpl-color-information-lm: var(--xpl-color-primary-lm); /* uses themable token */
+}
+
 /* stylelint-disable no-descending-specificity  */
 
 /*! tailwindcss v2.1.4 | MIT License | https://tailwindcss.com */
@@ -86,7 +252,7 @@ Improve consistency of default fonts in all browsers. (https://github.com/sindre
 
 [class^="xpl-"],
 [class^="xpl-"] * {
-  font-family: var(--xpl-font-family);
+  font-family: var(--xpl-font-family-default);
   line-height: 1.5; /* 2 */
 }
 
@@ -222,7 +388,7 @@ optgroup[class^="xpl-"],
 [class^="xpl-"] select,
 select[class^="xpl-"] [class^="xpl-"] textarea,
 textarea[class^="xpl-"] {
-  font-family: var(--xpl-font-family); /* 1 */
+  font-family: var(--xpl-font-family-default); /* 1 */
   font-size: 100%; /* 1 */
   line-height: 1.15; /* 1 */
   margin: 0; /* 2 */
@@ -473,36 +639,6 @@ textarea[class^="xpl-"] {
   --tw-ring-shadow: 0 0 #0000;
 }
 
-:root {
-  /* Typography */
-  --xpl-font-family:
-    apple-system,
-    system-ui,
-    "Segoe UI",
-    "Arial",
-    "Helvetica",
-    "Roboto",
-    sans-serif;
-  /* Colors */
-  --xpl-primary: #f44e27;
-  --xpl-darkmode-primary: #f99170;
-  --xpl-text-primary: #212633;
-  --xpl-darkmode-text-primary: #fff;
-  --xpl-secondary: #6923f4;
-  --xpl-secondary-dark: #4d1ab2;
-  --xpl-secondary-extra-dark: #330d80;
-  --xpl-secondary-light: #8857fa;
-  --xpl-secondary-extra-light: #ebe5ff;
-  --xpl-darkmode-secondary: #c3adff;
-  --xpl-darkmode-secondary-dark: #a480ff;
-  --xpl-darkmode-secondary-extra-dark: #8857fa;
-  --xpl-darkmode-secondary-light: #ddd1ff;
-  --xpl-text-secondary: #666d7d;
-  --xpl-darkmode-text-secondary: #ced3db;
-  /* Component */
-  --xpl-button-radius: 9999px;
-}
-
 .xpl-avatar {
   border-radius: 9999px;
   display: inline-block;
@@ -535,11 +671,11 @@ a.xpl-avatar {
 }
 
 a.xpl-avatar:focus {
-  --tw-ring-color: var(--xpl-secondary-light);
+  --tw-ring-color: var(--xpl-color-secondary-lm);
 }
 
 .dark a.xpl-avatar:focus {
-  --tw-ring-color: var(--xpl-darkmode-secondary);
+  --tw-ring-color: var(--xpl-color-secondary-dm);
 }
 
 a.xpl-avatar::after {
@@ -574,7 +710,7 @@ a.xpl-avatar:hover::after, a.xpl-avatar:active::after {
 }
 
 .xpl-avatar__placeholder {
-  background-color: var(--xpl-secondary);
+  background-color: var(--xpl-color-secondary-lm);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -586,16 +722,16 @@ a.xpl-avatar:hover::after, a.xpl-avatar:active::after {
 }
 
 .dark .xpl-avatar__placeholder {
-  background-color: var(--xpl-darkmode-secondary);
+  background-color: var(--xpl-color-secondary-dm);
   --tw-text-opacity: 1;
-  color: rgba(33, 38, 51, var(--tw-text-opacity));
+  color: rgba(48, 45, 59, var(--tw-text-opacity));
 }
 
 .xpl-avatar--green .xpl-avatar__placeholder {
   --tw-bg-opacity: 1;
   background-color: rgba(116, 251, 208, var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgba(33, 38, 51, var(--tw-text-opacity));
+  color: rgba(48, 45, 59, var(--tw-text-opacity));
 }
 
 a.xpl-avatar--green:focus,
@@ -607,7 +743,7 @@ a.xpl-avatar--green:focus,
   --tw-bg-opacity: 1;
   background-color: rgba(236, 253, 145, var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgba(33, 38, 51, var(--tw-text-opacity));
+  color: rgba(48, 45, 59, var(--tw-text-opacity));
 }
 
 a.xpl-avatar--yellow:focus,
@@ -617,9 +753,9 @@ a.xpl-avatar--yellow:focus,
 
 .xpl-avatar--pink .xpl-avatar__placeholder {
   --tw-bg-opacity: 1;
-  background-color: rgba(255, 158, 246, var(--tw-bg-opacity));
+  background-color: rgba(255, 141, 244, var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgba(33, 38, 51, var(--tw-text-opacity));
+  color: rgba(48, 45, 59, var(--tw-text-opacity));
 }
 
 a.xpl-avatar--pink:focus,
@@ -628,7 +764,7 @@ a.xpl-avatar--pink:focus,
 }
 
 .xpl-avatar--primary .xpl-avatar__placeholder {
-  background-color: var(--xpl-primary);
+  background-color: var(--xpl-color-primary-lm);
 }
 
 .xpl-avatar--sm img, .xpl-avatar--sm .xpl-avatar__placeholder {
@@ -646,17 +782,17 @@ a.xpl-avatar--pink:focus,
 }
 
 .dark .xpl-avatar--primary .xpl-avatar__placeholder {
-  background-color: var(--xpl-darkmode-primary);
+  background-color: var(--xpl-color-primary-dm);
   --tw-text-opacity: 1;
-  color: rgba(33, 38, 51, var(--tw-text-opacity));
+  color: rgba(48, 45, 59, var(--tw-text-opacity));
 }
 
 a.xpl-avatar--primary:focus {
-  --tw-ring-color: var(--xpl-primary);
+  --tw-ring-color: var(--xpl-color-primary-lm);
 }
 
 .dark a.xpl-avatar--primary:focus {
-  --tw-ring-color: var(--xpl-darkmode-primary);
+  --tw-ring-color: var(--xpl-color-primary-dm);
 }
 
 [class^='xpl-avatar__dot'] {
@@ -676,7 +812,7 @@ a.xpl-avatar--primary:focus {
 
 .dark [class^='xpl-avatar__dot'] {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(33, 38, 51, var(--tw-ring-opacity));
+  --tw-ring-color: rgba(48, 45, 59, var(--tw-ring-opacity));
 }
 
 .xpl-avatar__dot--active {
@@ -701,7 +837,7 @@ a.xpl-avatar--primary:focus {
 
 .xpl-avatar__dot--inactive {
   --tw-bg-opacity: 1;
-  background-color: rgba(157, 163, 175, var(--tw-bg-opacity));
+  background-color: rgba(225, 226, 232, var(--tw-bg-opacity));
 }
 
 .xpl-avatar--md [class^='xpl-avatar__dot'] {
@@ -787,6 +923,24 @@ a.xpl-avatar--primary:focus {
   z-index: 10;
 }
 
+.xpl-backdrop {
+  background-color: var(--xpl-color-gray-1000);
+  opacity: 0.5;
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.dark .xpl-backdrop {
+  background-color: var(--xpl-color-gray-1200);
+  opacity: 0.6;
+}
+
 .xpl-badge {
   padding: 4px 12px;
   --tw-bg-opacity: 1;
@@ -846,37 +1000,37 @@ a.xpl-avatar--primary:focus {
 
 .xpl-badge--warning {
   --tw-bg-opacity: 1;
-  background-color: rgba(244, 253, 197, var(--tw-bg-opacity));
+  background-color: rgba(243, 254, 187, var(--tw-bg-opacity));
 }
 
 .xpl-badge--warning::before {
   --tw-bg-opacity: 1;
-  background-color: rgba(190, 204, 35, var(--tw-bg-opacity));
+  background-color: rgba(173, 171, 32, var(--tw-bg-opacity));
 }
 
 .dark .xpl-badge--warning {
   --tw-border-opacity: 1;
-  border-color: rgba(223, 240, 96, var(--tw-border-opacity));
+  border-color: rgba(220, 233, 103, var(--tw-border-opacity));
 }
 
 .dark .xpl-badge--warning::before {
   --tw-bg-opacity: 1;
-  background-color: rgba(223, 240, 96, var(--tw-bg-opacity));
+  background-color: rgba(220, 233, 103, var(--tw-bg-opacity));
 }
 
 .xpl-badge--inactive {
   --tw-bg-opacity: 1;
-  background-color: rgba(228, 230, 235, var(--tw-bg-opacity));
+  background-color: rgba(238, 239, 243, var(--tw-bg-opacity));
 }
 
 .xpl-badge--inactive::before {
   --tw-bg-opacity: 1;
-  background-color: rgba(157, 163, 175, var(--tw-bg-opacity));
+  background-color: rgba(225, 226, 232, var(--tw-bg-opacity));
 }
 
 .dark .xpl-badge--inactive {
   --tw-border-opacity: 1;
-  border-color: rgba(157, 163, 175, var(--tw-border-opacity));
+  border-color: rgba(225, 226, 232, var(--tw-border-opacity));
 }
 
 .xpl-badge--error {
@@ -901,7 +1055,7 @@ a.xpl-avatar--primary:focus {
 
 a.xpl-button,
 button.xpl-button {
-  background-color: var(--xpl-secondary);
+  background-color: var(--xpl-color-secondary-lm);
   border-radius: var(--xpl-button-radius);
   height: 40px;
   padding: 11px 23px;
@@ -963,17 +1117,17 @@ a.xpl-button, button.xpl-button {
 .dark a.xpl-button,
 .dark button.xpl-button {
   --tw-ring-offset-color: #212633; /* gray-900 */
-  background-color: var(--xpl-darkmode-secondary);
+  background-color: var(--xpl-color-secondary-dm);
 }
 
 .dark a.xpl-button, .dark button.xpl-button {
   --tw-text-opacity: 1;
-  color: rgba(33, 38, 51, var(--tw-text-opacity));
+  color: rgba(48, 45, 59, var(--tw-text-opacity));
 }
 
 a.xpl-button:hover,
 button.xpl-button:hover {
-  background-color: var(--xpl-secondary-dark);
+  background-color: var(--xpl-color-secondary-hover-lm);
 }
 
 a.xpl-button:hover, button.xpl-button:hover {
@@ -983,38 +1137,46 @@ a.xpl-button:hover, button.xpl-button:hover {
 
 a.xpl-button:focus,
 button.xpl-button:focus {
-  --tw-ring-color: var(--xpl-secondary-light);
+  --tw-ring-color: var(--xpl-color-secondary-lm);
 }
 
-button.xpl-button:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgba(228, 230, 235, var(--tw-bg-opacity));
+button.xpl-button:disabled,
+button.xpl-button:disabled:hover {
+  background-color: var(--xpl-color-action-disabled-lm);
+  border-color: var(--xpl-color-action-disabled-lm);
+  color: var(--xpl-color-text-secondary-lm);
+}
+
+button.xpl-button:disabled, button.xpl-button:disabled:hover {
   cursor: not-allowed;
   --tw-shadow: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  --tw-text-opacity: 1;
-  color: rgba(102, 109, 125, var(--tw-text-opacity));
 }
 
 .dark a.xpl-button:hover,
 .dark button.xpl-button:hover {
-  background-color: var(--xpl-darkmode-secondary-dark);
+  background-color: var(--xpl-color-secondary-hover-dm);
 }
 
-.dark button.xpl-button:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgba(68, 75, 92, var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgba(157, 163, 175, var(--tw-text-opacity));
+.dark a.xpl-button:focus,
+.dark button.xpl-button:focus {
+  --tw-ring-color: var(--xpl-color-secondary-dm);
+}
+
+.dark button.xpl-button:disabled,
+.dark button.xpl-button:disabled:hover {
+  background-color: var(--xpl-color-action-disabled-dm);
+  border-color: var(--xpl-color-action-disabled-dm);
+  color: var(--xpl-color-text-secondary-dm);
 }
 
 a.xpl-button--secondary, button.xpl-button--secondary {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
   --tw-border-opacity: 1;
-  border-color: rgba(206, 211, 219, var(--tw-border-opacity));
+  border-color: rgba(234, 235, 239, var(--tw-border-opacity));
   --tw-text-opacity: 1;
-  color: rgba(33, 38, 51, var(--tw-text-opacity));
+  color: rgba(48, 45, 59, var(--tw-text-opacity));
 }
 
 .dark a.xpl-button--secondary, .dark button.xpl-button--secondary {
@@ -1025,7 +1187,7 @@ a.xpl-button--secondary, button.xpl-button--secondary {
 
 a.xpl-button--secondary:hover,
 button.xpl-button--secondary:hover {
-  border-color: var(--xpl-secondary);
+  border-color: var(--xpl-color-secondary-lm);
 }
 
 a.xpl-button--secondary:hover, button.xpl-button--secondary:hover {
@@ -1033,16 +1195,9 @@ a.xpl-button--secondary:hover, button.xpl-button--secondary:hover {
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
 
-button.xpl-button--secondary:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgba(245, 247, 250, var(--tw-bg-opacity));
-  --tw-border-opacity: 1;
-  border-color: rgba(206, 211, 219, var(--tw-border-opacity));
-}
-
 .dark a.xpl-button--secondary:hover,
 .dark button.xpl-button--secondary:hover {
-  border-color: var(--xpl-darkmode-secondary);
+  border-color: var(--xpl-color-secondary-dm);
 }
 
 .dark a.xpl-button--secondary:hover, .dark button.xpl-button--secondary:hover {
@@ -1051,18 +1206,12 @@ button.xpl-button--secondary:disabled {
 
 .dark a.xpl-button--secondary:focus,
 .dark button.xpl-button--secondary:focus {
-  --tw-ring-color: var(--xpl-darkmode-secondary);
+  --tw-ring-color: var(--xpl-color-secondary-dm);
 }
 
 .dark a.xpl-button--secondary:active,
 .dark button.xpl-button--secondary:active {
-  --tw-ring-color: var(--xpl-darkmode-secondary-extra-dark);
-}
-
-.dark button.xpl-button--secondary:disabled {
-  background-color: transparent;
-  --tw-border-opacity: 1;
-  border-color: rgba(206, 211, 219, var(--tw-border-opacity));
+  --tw-ring-color: var(--xpl-color-secondary-dm);
 }
 
 a.xpl-button--subtle, button.xpl-button--subtle {
@@ -1070,7 +1219,7 @@ a.xpl-button--subtle, button.xpl-button--subtle {
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
   border-style: none;
   --tw-text-opacity: 1;
-  color: rgba(33, 38, 51, var(--tw-text-opacity));
+  color: rgba(48, 45, 59, var(--tw-text-opacity));
 }
 
 .dark a.xpl-button--subtle, .dark button.xpl-button--subtle {
@@ -1081,48 +1230,35 @@ a.xpl-button--subtle, button.xpl-button--subtle {
 
 a.xpl-button--subtle:hover, button.xpl-button--subtle:hover {
   --tw-bg-opacity: 1;
-  background-color: rgba(245, 247, 250, var(--tw-bg-opacity));
+  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
 }
 
 a.xpl-button--subtle:focus, button.xpl-button--subtle:focus {
   --tw-bg-opacity: 1;
-  background-color: rgba(245, 247, 250, var(--tw-bg-opacity));
+  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(228, 230, 235, var(--tw-ring-opacity));
+  --tw-ring-color: rgba(238, 239, 243, var(--tw-ring-opacity));
 }
 
 a.xpl-button--subtle:active, button.xpl-button--subtle:active {
   --tw-bg-opacity: 1;
-  background-color: rgba(228, 230, 235, var(--tw-bg-opacity));
-}
-
-button.xpl-button--subtle:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgba(102, 109, 125, var(--tw-text-opacity));
+  background-color: rgba(238, 239, 243, var(--tw-bg-opacity));
 }
 
 .dark a.xpl-button--subtle:hover, .dark button.xpl-button--subtle:hover {
   --tw-bg-opacity: 1;
-  background-color: rgba(55, 62, 78, var(--tw-bg-opacity));
+  background-color: rgba(54, 50, 64, var(--tw-bg-opacity));
 }
 
 .dark a.xpl-button--subtle:focus, .dark button.xpl-button--subtle:focus {
   background-color: transparent;
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(55, 62, 78, var(--tw-ring-opacity));
+  --tw-ring-color: rgba(54, 50, 64, var(--tw-ring-opacity));
 }
 
 .dark a.xpl-button--subtle:active, .dark button.xpl-button--subtle:active {
   --tw-bg-opacity: 1;
-  background-color: rgba(68, 75, 92, var(--tw-bg-opacity));
-}
-
-.dark button.xpl-button--subtle:disabled {
-  background-color: transparent;
-  --tw-text-opacity: 1;
-  color: rgba(157, 163, 175, var(--tw-text-opacity));
+  background-color: rgba(60, 56, 71, var(--tw-bg-opacity));
 }
 
 a.xpl-button--warning, button.xpl-button--warning {
@@ -1140,7 +1276,7 @@ a.xpl-button--warning, button.xpl-button--warning {
   --tw-border-opacity: 1;
   border-color: rgba(255, 147, 135, var(--tw-border-opacity));
   --tw-text-opacity: 1;
-  color: rgba(33, 38, 51, var(--tw-text-opacity));
+  color: rgba(48, 45, 59, var(--tw-text-opacity));
 }
 
 a.xpl-button--warning:hover, button.xpl-button--warning:hover, a.xpl-button--warning:active, button.xpl-button--warning:active {
@@ -1155,15 +1291,6 @@ a.xpl-button--warning:focus, button.xpl-button--warning:focus {
   --tw-ring-color: rgba(194, 33, 15, var(--tw-ring-opacity));
 }
 
-button.xpl-button--warning:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgba(228, 230, 235, var(--tw-bg-opacity));
-  --tw-border-opacity: 1;
-  border-color: rgba(228, 230, 235, var(--tw-border-opacity));
-  --tw-text-opacity: 1;
-  color: rgba(102, 109, 125, var(--tw-text-opacity));
-}
-
 .dark a.xpl-button--warning:hover, .dark button.xpl-button--warning:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(248, 114, 99, var(--tw-bg-opacity));
@@ -1181,15 +1308,6 @@ button.xpl-button--warning:disabled {
   background-color: rgba(248, 114, 99, var(--tw-bg-opacity));
 }
 
-.dark button.xpl-button--warning:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgba(68, 75, 92, var(--tw-bg-opacity));
-  --tw-border-opacity: 1;
-  border-color: rgba(68, 75, 92, var(--tw-border-opacity));
-  --tw-text-opacity: 1;
-  color: rgba(157, 163, 175, var(--tw-text-opacity));
-}
-
 a.xpl-button--sm,
 button.xpl-button--sm {
   padding: 7px 15px;
@@ -1246,6 +1364,94 @@ button.xpl-button--xs.xpl-button--icon-only {
   transform: scale(1);
 }
 
+.xpl-breadcrumbs ol {
+    color: var(--xpl-color-text-secondary-lm);
+  }
+
+.xpl-breadcrumbs ol span {
+      color: var(--xpl-color-text-secondary-dm);
+    }
+
+.xpl-breadcrumbs ol span svg {
+        height: 9px;
+        margin-top: 0.125rem;
+      }
+
+.xpl-breadcrumbs ol span {
+      display: grid;
+      align-content: center;
+}
+
+.xpl-breadcrumbs ol .xpl-breadcrumb-item:hover {
+        color: var(--xpl-color-action-primary-lm);
+      }
+
+.xpl-breadcrumbs ol .xpl-breadcrumb-item a, .xpl-breadcrumbs ol .xpl-breadcrumb-item button, .xpl-breadcrumbs ol .xpl-breadcrumb-item span {
+        padding-right: 0.5rem;
+      }
+
+.xpl-breadcrumbs ol .xpl-breadcrumb-item:nth-last-of-type(3) {
+        display: none;
+      }
+
+@media (min-width: 768px) {
+        .xpl-breadcrumbs ol .xpl-breadcrumb-item:nth-last-of-type(3) {
+          display: flex;
+        }
+      }
+
+.xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child {
+        color: var(--xpl-color-text-primary-lm);
+      }
+
+.xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child:hover {
+          color: var(--xpl-color-action-primary-lm);
+        }
+
+.xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child span {
+          display: none;
+        }
+
+.xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child {
+        cursor: default;
+        pointer-events: none;
+        text-decoration: none;
+}
+
+.xpl-breadcrumbs ol .xpl-breadcrumb-item {
+      display: flex;
+      align-content: center;
+}
+
+.xpl-breadcrumbs ol {
+    display: flex;
+    align-content: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+}
+
+/* stylelint-disable no-descending-specificity, because the rule was expecting some of the code below to appear before some code that is nested above. */
+
+.dark .xpl-breadcrumbs ol {
+    color: var(--xpl-color-text-secondary-dm);
+  }
+
+.dark .xpl-breadcrumbs ol .xpl-breadcrumb-item:hover {
+        color: var(--xpl-color-action-primary-dm);
+      }
+
+.dark .xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child {
+        color: var(--xpl-color-text-primary-dm);
+      }
+
+.dark .xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child:hover {
+          color: var(--xpl-color-action-primary-dm);
+        }
+
+.dark .xpl-breadcrumbs ol span {
+      color: var(--xpl-color-text-secondary-lm);
+    }
+
 /**
  * TODO: A lot of this is copied and pasted from radio.css
  * (especially container, label, description). Could probably condense
@@ -1317,12 +1523,12 @@ button.xpl-button--xs.xpl-button--icon-only {
 }
 
 .xpl-checkbox:checked {
-  background-color: var(--xpl-secondary);
+  background-color: var(--xpl-color-secondary-lm);
 }
 
 .xpl-checkbox:indeterminate {
-  background-color: var(--xpl-secondary);
-  border-color: var(--xpl-secondary);
+  background-color: var(--xpl-color-secondary-lm);
+  border-color: var(--xpl-color-secondary-lm);
 }
 
 .xpl-checkbox:indeterminate::after {
@@ -1333,18 +1539,18 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .xpl-checkbox:active,
 .xpl-checkbox:checked {
-  border-color: var(--xpl-secondary);
+  border-color: var(--xpl-color-secondary-lm);
 }
 
 .xpl-checkbox:disabled {
   border-color: #e4e6eb; /* gray 200 */
   --tw-bg-opacity: 1;
-  background-color: rgba(228, 230, 235, var(--tw-bg-opacity));
+  background-color: rgba(238, 239, 243, var(--tw-bg-opacity));
   cursor: not-allowed;
 }
 
 .xpl-checkbox:focus {
-  --tw-ring-color: var(--xpl-secondary-light);
+  --tw-ring-color: var(--xpl-color-secondary-lm);
 }
 
 .xpl-checkbox:hover::after,
@@ -1362,7 +1568,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 }
 
 .dark .xpl-checkbox:checked {
-  background-color: var(--xpl-darkmode-secondary);
+  background-color: var(--xpl-color-secondary-dm);
 }
 
 .dark .xpl-checkbox:checked::after {
@@ -1370,13 +1576,13 @@ button.xpl-button--xs.xpl-button--icon-only {
 }
 
 .dark .xpl-checkbox:indeterminate {
-  background-color: var(--xpl-darkmode-secondary);
-  border-color: var(--xpl-darkmode-secondary);
+  background-color: var(--xpl-color-secondary-dm);
+  border-color: var(--xpl-color-secondary-dm);
 }
 
 .dark .xpl-checkbox:active,
 .dark .xpl-checkbox:checked {
-  border-color: var(--xpl-darkmode-secondary);
+  border-color: var(--xpl-color-secondary-dm);
 }
 
 .dark .xpl-checkbox:disabled {
@@ -1385,7 +1591,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 }
 
 .dark .xpl-checkbox:focus {
-  --tw-ring-color: var(--xpl-darkmode-secondary-light);
+  --tw-ring-color: var(--xpl-color-secondary-dm);
 }
 
 .xpl-checkbox + label {
@@ -1416,13 +1622,312 @@ button.xpl-button--xs.xpl-button--icon-only {
   font-size: 0.75rem;
   line-height: 1rem;
   --tw-text-opacity: 1;
-  color: rgba(102, 109, 125, var(--tw-text-opacity));
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
 }
 
 .dark .xpl-checkbox + label small {
   color: #ced3db;
 }
 
+.xpl-content-area-wrapper {
+  min-width: 0;
+}
+
+.xpl-content-area-wrapper__wide {
+    padding: 1.5rem;
+  }
+
+@media (min-width: 768px) {
+    .xpl-content-area-wrapper__wide {
+      padding: 2rem;
+    }
+  }
+
+.xpl-content-area-wrapper__narrow {
+    grid-template-areas: ". content .";
+    grid-template-columns: minmax(15%, auto) minmax(auto, 840px) minmax(15%, auto);
+  }
+
+.xpl-content-area-wrapper__narrow .xpl-content-area {
+      padding-top: 5rem;
+      padding-bottom: 5rem;
+      grid-column: span 1 / span 1;
+      grid-column-start: 2;
+    }
+
+@media (max-width: 1023px) {
+
+.xpl-content-area-wrapper__narrow .xpl-content-area {
+        padding: 0px;
+
+        grid-template-columns: none
+    }
+      }
+
+@media (max-width: 1023px) {
+
+.xpl-content-area-wrapper__narrow {
+      padding: 1.5rem;
+
+      grid-template-columns: none;
+
+      grid-template-rows: none;
+  }
+    }
+
+.xpl-content-area-wrapper__narrow {
+    display: grid;
+    justify-items: center;
+    grid-auto-flow: column;
+}
+
+.xpl-content-area-wrapper__full {
+    max-width: none;
+    padding: 1.5rem;
+  }
+
+@media (min-width: 640px) {
+    .xpl-content-area-wrapper__full {
+      padding: 2rem;
+    }
+  }
+
+@media (min-width: 1024px) {
+    .xpl-content-area-wrapper__full {
+      padding: 0px;
+    }
+  }
+
+.xpl-content-area-wrapper {
+  --tw-bg-opacity: 1;
+  background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
+}
+
+.dark .xpl-content-area-wrapper {
+  background-color: var(--xpl-color-gray-1200);
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+/* stylelint-disable no-descending-specificity, because the rule was expecting some of the code below to appear before some code that is nested above. */
+
+.xpl-main-nav {
+  width: 240px;
+}
+
+.xpl-main-nav nav {
+    grid-template-rows: 74px auto;
+  }
+
+.xpl-main-nav nav .xpl-nav-item:last-of-type a {
+        margin-bottom: 74px;
+      }
+
+.xpl-main-nav nav {
+    display: grid;
+    height: 100%;
+    overflow-y: auto;
+}
+
+/* Brand Section */
+
+.xpl-main-nav header {
+    grid-template-columns: -webkit-max-content auto;
+    grid-template-columns: max-content auto;
+  }
+
+.xpl-main-nav header p {
+      display: grid;
+      align-content: center;
+      font-weight: 600;
+      font-size: 1rem;
+      line-height: 1.5rem;
+      margin-left: 1rem;
+      --tw-text-opacity: 1;
+      color: rgba(255, 255, 255, var(--tw-text-opacity));
+    }
+
+.xpl-main-nav header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.5rem;
+    padding: 1rem;
+}
+
+/* Width for different screen sizes */
+
+.xpl-main-nav__md {
+    width: 112px;
+  }
+
+.xpl-main-nav__md .xpl-nav-item a {
+        width: 112px;
+      }
+
+.xpl-main-nav__md .xpl-nav-item a svg {
+          margin-right: 0px;
+        }
+
+.xpl-main-nav__md .xpl-nav-item a {
+        display: grid;
+        justify-items: center;
+        grid-auto-flow: row;
+}
+
+.xpl-main-nav__md .xpl-avatar {
+      margin-left: 1rem;
+    }
+
+.xpl-main-nav__sm {
+    width: 74px;
+  }
+
+.xpl-main-nav__sm .xpl-nav-item a p {
+          display: none;
+        }
+
+.xpl-main-nav__sm .xpl-nav-item a svg {
+          margin-right: 0px;
+        }
+
+.xpl-main-nav__sm .xpl-nav-item a {
+        display: grid;
+        justify-items: center;
+        grid-auto-flow: row;
+}
+
+.xpl-main-nav__sm .xpl-nav-item a, .xpl-main-nav__md .xpl-nav-item a {
+        font-size: 0.875rem;
+        line-height: 1rem;
+        font-weight: 600;
+        padding-top: 0.75rem;
+        padding-bottom: 0.75rem;
+      }
+
+.xpl-main-nav__sm header p, .xpl-main-nav__md header p {
+        display: none;
+      }
+
+.xpl-main-nav__sm header, .xpl-main-nav__md header {
+      align-content: center;
+      justify-content: center;
+      margin-top: 1rem;
+}
+
+.xpl-main-nav__sm footer .xpl-avatar, .xpl-main-nav__md footer .xpl-avatar {
+        margin-right: 0px;
+      }
+
+.xpl-main-nav__sm footer .xpl-nav-item a p, .xpl-main-nav__sm footer .xpl-nav-item div p, .xpl-main-nav__md footer .xpl-nav-item a p, .xpl-main-nav__md footer .xpl-nav-item div p {
+            display: none;
+          }
+
+.xpl-main-nav__sm footer .xpl-nav-item a, .xpl-main-nav__md footer .xpl-nav-item a {
+          display: inline-flex;
+        }
+
+.xpl-main-nav footer .xpl-avatar {
+      margin-right: 1rem;
+    }
+
+.xpl-main-nav footer div p {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+      }
+
+.xpl-main-nav footer div p:first-of-type {
+        --tw-text-opacity: 1;
+        color: rgba(255, 255, 255, var(--tw-text-opacity));
+      }
+
+.xpl-main-nav footer div {
+      overflow-x: auto;
+}
+
+.xpl-main-nav footer .xpl-nav-item > a svg {
+        fill: currentColor;
+        --tw-text-opacity: 1;
+        color: rgba(153, 155, 168, var(--tw-text-opacity));
+      }
+
+.xpl-main-nav footer {
+    --tw-bg-opacity: 1;
+    background-color: rgba(32, 30, 41, var(--tw-bg-opacity));
+    display: grid;
+    align-items: flex-end;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    position: absolute;
+    bottom: 0px;
+    --tw-text-opacity: 1;
+    color: rgba(153, 155, 168, var(--tw-text-opacity));
+    width: 100%;
+    z-index: 20;
+}
+
+.xpl-main-nav {
+  --tw-bg-opacity: 1;
+  background-color: rgba(41, 38, 50, var(--tw-bg-opacity));
+  position: fixed;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+}
+
+.xpl-nav-item a svg {
+      height: 2rem;
+      margin-right: 0.75rem;
+      fill: currentColor;
+      --tw-text-opacity: 1;
+      color: rgba(153, 155, 168, var(--tw-text-opacity));
+      width: 2rem;
+    }
+
+.xpl-nav-item a:hover svg, .xpl-nav-item a:focus svg {
+        fill: currentColor;
+        --tw-text-opacity: 1;
+        color: rgba(255, 255, 255, var(--tw-text-opacity));
+      }
+
+.xpl-nav-item a:hover, .xpl-nav-item a:focus {
+      --tw-bg-opacity: 1;
+      background-color: rgba(24, 22, 31, var(--tw-bg-opacity));
+      --tw-text-opacity: 1;
+      color: rgba(255, 255, 255, var(--tw-text-opacity));
+    }
+
+.xpl-nav-item a.active svg {
+        fill: currentColor;
+        --tw-text-opacity: 1;
+        color: rgba(249, 145, 112, var(--tw-text-opacity));
+      }
+
+.xpl-nav-item a.active {
+      --tw-border-opacity: 1;
+      border-color: rgba(249, 145, 112, var(--tw-border-opacity));
+      border-style: solid;
+      border-right-width: 4px;
+      --tw-text-opacity: 1;
+      color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.xpl-nav-item a {
+    display: flex;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    --tw-text-opacity: 1;
+    color: rgba(153, 155, 168, var(--tw-text-opacity));
+    width: 100%;
+    background-color: transparent;
+    border-color: transparent;
+    border-style: solid;
+    border-right-width: 4px;
+    align-items: center;
+    align-content: center;
+}
+
 .xpl-pagination {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
@@ -1443,7 +1948,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   line-height: 1rem;
   padding-bottom: 0.5rem;
   --tw-text-opacity: 1;
-  color: rgba(68, 75, 92, var(--tw-text-opacity));
+  color: rgba(60, 56, 71, var(--tw-text-opacity));
 }
 
 @media (min-width: 768px) {
@@ -1484,12 +1989,12 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .xpl-pagination .xpl-pagination-prev:hover {
   --tw-bg-opacity: 1;
-  background-color: rgba(250, 251, 252, var(--tw-bg-opacity));
+  background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
 }
 
 .xpl-pagination .xpl-pagination-prev {
   --tw-border-opacity: 1;
-  border-color: rgba(206, 211, 219, var(--tw-border-opacity));
+  border-color: rgba(234, 235, 239, var(--tw-border-opacity));
   border-top-left-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
   border-width: 1px;
@@ -1504,7 +2009,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   padding-right: 0.5rem;
   position: relative;
   --tw-text-opacity: 1;
-  color: rgba(102, 109, 125, var(--tw-text-opacity));
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
 }
 
 .xpl-pagination .xpl-pagination-next {
@@ -1514,12 +2019,12 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .xpl-pagination .xpl-pagination-next:hover {
   --tw-bg-opacity: 1;
-  background-color: rgba(250, 251, 252, var(--tw-bg-opacity));
+  background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
 }
 
 .xpl-pagination .xpl-pagination-next {
   --tw-border-opacity: 1;
-  border-color: rgba(206, 211, 219, var(--tw-border-opacity));
+  border-color: rgba(234, 235, 239, var(--tw-border-opacity));
   border-top-right-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
   border-width: 1px;
@@ -1534,7 +2039,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   padding-right: 0.5rem;
   position: relative;
   --tw-text-opacity: 1;
-  color: rgba(102, 109, 125, var(--tw-text-opacity));
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
 }
 
 .xpl-pagination .xpl-pagination-prev span, .xpl-pagination .xpl-pagination-next span {
@@ -1556,12 +2061,12 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .xpl-pagination a:hover, .xpl-pagination button:hover {
   --tw-bg-opacity: 1;
-  background-color: rgba(250, 251, 252, var(--tw-bg-opacity));
+  background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
 }
 
 .xpl-pagination a, .xpl-pagination button {
   --tw-border-opacity: 1;
-  border-color: rgba(206, 211, 219, var(--tw-border-opacity));
+  border-color: rgba(234, 235, 239, var(--tw-border-opacity));
   border-width: 1px;
   display: inline-flex;
   align-items: center;
@@ -1574,14 +2079,14 @@ button.xpl-button--xs.xpl-button--icon-only {
   padding-right: 1rem;
   position: relative;
   --tw-text-opacity: 1;
-  color: rgba(102, 109, 125, var(--tw-text-opacity));
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
 }
 
 .xpl-pagination-ellipsis {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
   --tw-border-opacity: 1;
-  border-color: rgba(206, 211, 219, var(--tw-border-opacity));
+  border-color: rgba(234, 235, 239, var(--tw-border-opacity));
   border-width: 1px;
   display: inline-flex;
   align-items: center;
@@ -1594,7 +2099,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   padding-right: 1rem;
   position: relative;
   --tw-text-opacity: 1;
-  color: rgba(68, 75, 92, var(--tw-text-opacity));
+  color: rgba(60, 56, 71, var(--tw-text-opacity));
 }
 
 .xpl-pagination .xpl-pagination-current {
@@ -1671,23 +2176,23 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .xpl-radio:active,
 .xpl-radio:checked {
-  border-color: var(--xpl-secondary);
+  border-color: var(--xpl-color-secondary-lm);
 }
 
 .xpl-radio:disabled {
   border-color: #e4e6eb; /* gray 200 */
   --tw-bg-opacity: 1;
-  background-color: rgba(228, 230, 235, var(--tw-bg-opacity));
+  background-color: rgba(238, 239, 243, var(--tw-bg-opacity));
   cursor: not-allowed;
 }
 
 .xpl-radio:focus {
-  --tw-ring-color: var(--xpl-secondary-light);
+  --tw-ring-color: var(--xpl-color-secondary-lm);
 }
 
 .dark .xpl-radio:active,
 .dark .xpl-radio:checked {
-  border-color: var(--xpl-darkmode-secondary);
+  border-color: var(--xpl-color-secondary-dm);
 }
 
 .dark .xpl-radio:disabled {
@@ -1696,7 +2201,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 }
 
 .dark .xpl-radio:focus {
-  --tw-ring-color: var(--xpl-darkmode-secondary-light);
+  --tw-ring-color: var(--xpl-color-secondary-dm);
 }
 
 .xpl-radio + label {
@@ -1727,7 +2232,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   font-size: 0.75rem;
   line-height: 1rem;
   --tw-text-opacity: 1;
-  color: rgba(102, 109, 125, var(--tw-text-opacity));
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
 }
 
 .dark .xpl-radio + label small {
@@ -1736,7 +2241,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .xpl-table-container {
   --tw-border-opacity: 1;
-  border-color: rgba(228, 230, 235, var(--tw-border-opacity));
+  border-color: rgba(238, 239, 243, var(--tw-border-opacity));
   border-radius: 0.375rem;
   border-width: 1px;
   overflow: auto;
@@ -1746,9 +2251,9 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .dark .xpl-table-container {
   --tw-bg-opacity: 1;
-  background-color: rgba(33, 38, 51, var(--tw-bg-opacity));
+  background-color: rgba(48, 45, 59, var(--tw-bg-opacity));
   --tw-border-opacity: 1;
-  border-color: rgba(55, 62, 78, var(--tw-border-opacity));
+  border-color: rgba(54, 50, 64, var(--tw-border-opacity));
 }
 
 .xpl-table > :not([hidden]) ~ :not([hidden]) {
@@ -1756,7 +2261,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
   --tw-divide-opacity: 1;
-  border-color: rgba(228, 230, 235, var(--tw-divide-opacity));
+  border-color: rgba(238, 239, 243, var(--tw-divide-opacity));
 }
 
 .xpl-table {
@@ -1765,7 +2270,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .dark .xpl-table > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
-  border-color: rgba(55, 62, 78, var(--tw-divide-opacity));
+  border-color: rgba(54, 50, 64, var(--tw-divide-opacity));
 }
 
 .xpl-table--abs {
@@ -1782,7 +2287,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   padding-right: 1.5rem;
   text-align: left;
   --tw-text-opacity: 1;
-  color: rgba(102, 109, 125, var(--tw-text-opacity));
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
   white-space: nowrap;
 }
 
@@ -1799,13 +2304,13 @@ button.xpl-button--xs.xpl-button--icon-only {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
   --tw-text-opacity: 1;
-  color: rgba(102, 109, 125, var(--tw-text-opacity));
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
   white-space: nowrap;
 }
 
 .dark .xpl-table-row-selected td {
   --tw-bg-opacity: 1 !important;
-  background-color: rgba(55, 62, 78, var(--tw-bg-opacity)) !important;
+  background-color: rgba(54, 50, 64, var(--tw-bg-opacity)) !important;
 }
 
 .xpl-table--freeze thead th:first-child,
@@ -1817,7 +2322,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
   --tw-border-opacity: 1;
-  border-color: rgba(228, 230, 235, var(--tw-border-opacity));
+  border-color: rgba(238, 239, 243, var(--tw-border-opacity));
   position: sticky;
   left: 0px;
   z-index: 10;
@@ -1825,7 +2330,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .xpl-table--freeze thead th:first-child {
   --tw-bg-opacity: 1;
-  background-color: rgba(250, 251, 252, var(--tw-bg-opacity));
+  background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
 }
 
 .xpl-table tbody tr td:first-child, .xpl-table p {
@@ -1833,31 +2338,29 @@ button.xpl-button--xs.xpl-button--icon-only {
   font-size: 0.875rem;
   line-height: 1.25rem;
   --tw-text-opacity: 1;
-  color: rgba(33, 38, 51, var(--tw-text-opacity));
+  color: rgba(48, 45, 59, var(--tw-text-opacity));
 }
 
 .dark .xpl-table thead th {
   --tw-text-opacity: 1;
-  color: rgba(206, 211, 219, var(--tw-text-opacity));
+  color: rgba(234, 235, 239, var(--tw-text-opacity));
 }
 
 .dark .xpl-table tbody tr td {
   --tw-text-opacity: 1;
-  color: rgba(206, 211, 219, var(--tw-text-opacity));
+  color: rgba(234, 235, 239, var(--tw-text-opacity));
 }
 
 .dark .xpl-table--freeze thead th:first-child {
-  --tw-bg-opacity: 1;
-  background-color: rgba(37, 43, 57, var(--tw-bg-opacity));
+  background-color: var(--xpl-color-background-dm);
   --tw-border-opacity: 1;
-  border-color: rgba(55, 62, 78, var(--tw-border-opacity));
+  border-color: rgba(54, 50, 64, var(--tw-border-opacity));
 }
 
 .dark .xpl-table--freeze tbody td:first-child {
-  --tw-bg-opacity: 1;
-  background-color: rgba(33, 38, 51, var(--tw-bg-opacity));
+  background-color: var(--xpl-color-foreground-dm);
   --tw-border-opacity: 1;
-  border-color: rgba(55, 62, 78, var(--tw-border-opacity));
+  border-color: rgba(54, 50, 64, var(--tw-border-opacity));
 }
 
 .xpl-table--freeze thead th:first-child::after,
@@ -1901,12 +2404,11 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .xpl-table thead {
   --tw-bg-opacity: 1;
-  background-color: rgba(250, 251, 252, var(--tw-bg-opacity));
+  background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
 }
 
 .dark .xpl-table thead {
-  --tw-bg-opacity: 1;
-  background-color: rgba(37, 43, 57, var(--tw-bg-opacity));
+  background-color: var(--xpl-color-background-dm);
 }
 
 .xpl-table tbody > :not([hidden]) ~ :not([hidden]) {
@@ -1914,7 +2416,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
   --tw-divide-opacity: 1;
-  border-color: rgba(228, 230, 235, var(--tw-divide-opacity));
+  border-color: rgba(238, 239, 243, var(--tw-divide-opacity));
 }
 
 .xpl-table tbody {
@@ -1922,18 +2424,18 @@ button.xpl-button--xs.xpl-button--icon-only {
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
 
-.dark .xpl-table tbody > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgba(68, 75, 92, var(--tw-divide-opacity));
+.dark .xpl-table tbody {
+  background-color: var(--xpl-color-foreground-dm);
 }
 
-.dark .xpl-table tbody {
-  background-color: transparent;
+.dark .xpl-table tbody > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgba(60, 56, 71, var(--tw-divide-opacity));
 }
 
 .xpl-table.xpl-table--striped tbody tr:nth-child(2n) td {
   --tw-bg-opacity: 1;
-  background-color: rgba(250, 251, 252, var(--tw-bg-opacity));
+  background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
 }
 
 .dark .xpl-table tbody tr td:first-child, .dark .xpl-table p {
@@ -1943,7 +2445,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .dark .xpl-table.xpl-table--striped tbody tr:nth-child(2n) td {
   --tw-bg-opacity: 1;
-  background-color: rgba(37, 43, 57, var(--tw-bg-opacity));
+  background-color: rgba(48, 45, 59, var(--tw-bg-opacity));
 }
 
 .xpl-table .wrap {
@@ -1984,7 +2486,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .xpl-tabs nav {
   --tw-border-opacity: 1;
-  border-color: rgba(228, 230, 235, var(--tw-border-opacity));
+  border-color: rgba(238, 239, 243, var(--tw-border-opacity));
   border-bottom-width: 1px;
   display: flex;
   min-width: 100%;
@@ -1996,7 +2498,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .xpl-tabs a:hover, .xpl-tabs button:hover {
   --tw-border-opacity: 1;
-  border-color: rgba(228, 230, 235, var(--tw-border-opacity));
+  border-color: rgba(238, 239, 243, var(--tw-border-opacity));
 }
 
 .xpl-tabs a, .xpl-tabs button {
@@ -2010,12 +2512,12 @@ button.xpl-button--xs.xpl-button--icon-only {
   padding-top: 1rem;
   padding-bottom: 1rem;
   --tw-text-opacity: 1;
-  color: rgba(102, 109, 125, var(--tw-text-opacity));
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
 }
 
 .xpl-tabs a:hover, .xpl-tabs button:hover {
   --tw-text-opacity: 1;
-  color: rgba(68, 75, 92, var(--tw-text-opacity));
+  color: rgba(60, 56, 71, var(--tw-text-opacity));
 }
 
 .xpl-tabs a, .xpl-tabs button {
@@ -2024,7 +2526,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .xpl-tabs a span, .xpl-tabs button span {
   --tw-bg-opacity: 1;
-  background-color: rgba(245, 247, 250, var(--tw-bg-opacity));
+  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
   border-radius: 9999px;
   font-weight: 500;
   font-size: 0.625rem;
@@ -2035,7 +2537,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   padding-left: 0.625rem;
   padding-right: 0.625rem;
   --tw-text-opacity: 1;
-  color: rgba(33, 38, 51, var(--tw-text-opacity));
+  color: rgba(48, 45, 59, var(--tw-text-opacity));
 }
 
 .xpl-tabs a.current, .xpl-tabs button.current {
@@ -2086,17 +2588,17 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .dark .xpl-utility-bar {
   --tw-bg-opacity: 1;
-  background-color: rgba(37, 43, 57, var(--tw-bg-opacity));
+  background-color: rgba(48, 45, 59, var(--tw-bg-opacity));
 }
 
 .xpl-utility-bar {
   --tw-border-opacity: 1;
-  border-color: rgba(206, 211, 219, var(--tw-border-opacity));
+  border-color: rgba(234, 235, 239, var(--tw-border-opacity));
 }
 
 .dark .xpl-utility-bar {
   --tw-border-opacity: 1;
-  border-color: rgba(68, 75, 92, var(--tw-border-opacity));
+  border-color: rgba(60, 56, 71, var(--tw-border-opacity));
 }
 
 .xpl-utility-bar {
@@ -2107,12 +2609,12 @@ button.xpl-button--xs.xpl-button--icon-only {
   padding-left: 1rem;
   padding-right: 1rem;
   --tw-text-opacity: 1;
-  color: rgba(102, 109, 125, var(--tw-text-opacity));
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
 }
 
 .dark .xpl-utility-bar {
   --tw-text-opacity: 1;
-  color: rgba(206, 211, 219, var(--tw-text-opacity));
+  color: rgba(234, 235, 239, var(--tw-text-opacity));
 }
 
 .xpl-utility-bar {