From 9ec1d75d32ca5f61324d04c7381cc8d32a9bb3e7 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sun, 10 Jul 2022 12:15:49 -0700
Subject: [PATCH] Recreate theme variables with new style values

---
 .../tokens/color/antd-overrides.yaml          |  30 +-
 .../tokens/color/default-theme.yaml           |  56 ++--
 .../tokens/color/owncast-admin.yaml           |  28 ++
 .../tokens/color/owncast-colors.yaml          | 135 ++-------
 web/styles/ant-overrides.scss                 |  51 +---
 web/styles/globals.scss                       | 266 ++++++------------
 web/styles/theme.less                         | 116 +++-----
 web/styles/variables.css                      | 124 +++-----
 8 files changed, 271 insertions(+), 535 deletions(-)
 create mode 100644 web/style-definitions/tokens/color/owncast-admin.yaml

diff --git a/web/style-definitions/tokens/color/antd-overrides.yaml b/web/style-definitions/tokens/color/antd-overrides.yaml
index 9aae1e99d..e2bf491fd 100644
--- a/web/style-definitions/tokens/color/antd-overrides.yaml
+++ b/web/style-definitions/tokens/color/antd-overrides.yaml
@@ -3,34 +3,14 @@
 # https://github.com/ant-design/ant-design/blob/master/components/style/themes/dark.less
 
 text-color:
-  value: 'var(--theme-text-color)'
+  value: 'var(--theme-text-primary)'
 text-color-secondary:
-  value: 'var(--theme-text-color-secondary)'
+  value: 'var(--theme-text-secondary)'
 link-color:
-  value: 'var(--theme-link-color)'
+  value: 'var(--theme-text-link)'
 popover-background:
-  value: 'var(--theme-text-color-secondary)'
+  value: 'var(--theme-background-secondary)'
 background-color-light:
   value: 'var(--theme-background-secondary)'
 layout-body-background:
-  value: 'var(--theme-background)'
-
-# These values require explicit colors and cannot take css variables.
-primary-color:
-  value: '{color.owncast.purple.700.value}'
-info-color:
-  value: '{color.owncast.gray.500.value}'
-success-color:
-  value: '{color.owncast.green.500.value}'
-warning-color:
-  value: '{color.owncast.orange.500.value}'
-error-color:
-  value: '{color.owncast.red.500.value}'
-purple-base:
-  value: '{color.owncast.purple.500.value}'
-green-base:
-  value: '{color.owncast.green.500.value}'
-red-base:
-  value: '{color.owncast.red.500.value}'
-orange-base:
-  value: '{color.owncast.orange.500.value}'
+  value: 'var(--theme-background-primary)'
diff --git a/web/style-definitions/tokens/color/default-theme.yaml b/web/style-definitions/tokens/color/default-theme.yaml
index 719bbd072..0c1616389 100644
--- a/web/style-definitions/tokens/color/default-theme.yaml
+++ b/web/style-definitions/tokens/color/default-theme.yaml
@@ -4,40 +4,38 @@
 # The fewer there are the easier it'll be easier to customize and document.
 
 theme:
-  primary-color:
-    value: '{color.owncast.purple.700.value}'
+  unknown:
+    value: '{color.unknown.value}'
+  unknown-2:
+    value: '{color.unknown-2.value}'
+  primary:
+    value: '{color.unknown.value}'
     comment: 'The primary color of the application used for rendering controls.'
-  text-color:
-    value: '{color.owncast.gray.300.value}'
-    comment: 'The color of the text in the application.'
-  text-color-secondary:
-    value: '{color.owncast.gray.500.value}'
-  link-color:
-    value: '{color.owncast.purple.500.value}'
-  font-family:
-    value: '{font.owncast.family.value}'
-  header-font-family:
-    value: '{font.owncast.header-family.value}'
+  text:
+    primary:
+      value: '{color.owncast.text.primary.value}'
+      comment: 'The color of the text in the application.'
+    secondary:
+      value: '{color.owncast.text.secondary.value}'
+    link:
+      value: '{color.owncast.text.bright.value}'
+    body-font-family:
+      value: '{font.owncast.body.value}'
+    display-font-family:
+      value: '{font.owncast.display.value}'
   background:
-    value: '{color.owncast.background.value}'
-    comment: 'The main background color of the page.'
-  background-secondary:
-    value: '{color.owncast.background-secondary.value}'
-    comment: 'A secondary background color used in sections and controls.'
-  rounded-corners:
-    value: '.4rem'
-    comment: 'The radius of rounded corners used in places.'
+    primary:
+      value: '{color.owncast.background.primary.value}'
+      comment: 'The main background color of the page.'
+    secondary:
+      value: '{color.owncast.background.secondary.value}'
+      comment: 'A secondary background color used in sections and controls.'
 
-  success-color:
-    value: '{color.owncast.green.500.value}'
-  info-color:
-    value: '{color.owncast.purple.300.value}'
-  warning-color:
-    value: '{color.owncast.orange.500.value}'
-  error-color:
-    value: '{color.owncast.red.500.value}'
+  rounded-corners:
+    value: '{rounded-corners.value}'
 
   user-colors:
+    comment: 'Colors used to display chat users.'
     1:
       value: '{color.owncast.user.1.value}'
     2:
diff --git a/web/style-definitions/tokens/color/owncast-admin.yaml b/web/style-definitions/tokens/color/owncast-admin.yaml
new file mode 100644
index 000000000..a4ae95fe6
--- /dev/null
+++ b/web/style-definitions/tokens/color/owncast-admin.yaml
@@ -0,0 +1,28 @@
+# Values used in the admin and should be migrated to variables or removed.
+# See ant-overrides.scss.
+owncast-purple:
+  value: '{color.unknown.value}'
+owncast-purple-25:
+  value: 'rgba(120, 113, 255, 0.25)'
+owncast-purple-50:
+  value: 'rgba(120, 113, 255, 0.5)'
+online-color:
+  value: '#73dd3f'
+offline-color:
+  value: '#999'
+pink:
+  value: '{color.unknown.value}'
+purple:
+  value: '{color.unknown-2.value}'
+blue:
+  value: '{color.unknown.value}'
+white-88:
+  value: '{color.unknown-2.value}'
+purple-dark:
+  value: '{color.unknown.value}'
+default-link-color:
+  value: '{color.owncast.text.bright.value}'
+default-bg-color:
+  value: '{color.owncast.background.primary.value}'
+default-text-color:
+  value: '{color.owncast.text.primary.value}'
diff --git a/web/style-definitions/tokens/color/owncast-colors.yaml b/web/style-definitions/tokens/color/owncast-colors.yaml
index 10b456119..ca2299392 100644
--- a/web/style-definitions/tokens/color/owncast-colors.yaml
+++ b/web/style-definitions/tokens/color/owncast-colors.yaml
@@ -1,80 +1,14 @@
 # These are colors that make up the Owncast-specific color palette.
 color:
-  # The Owncast color definitions.
+  unknown:
+    value: '#00FF00'
+  unknown-2:
+    value: '#FF0000'
   owncast:
-    purple:
-      100:
-        value: '#f4ebff'
-      300:
-        value: '#d6bbfb'
-      500:
-        value: '#9e77ed'
-      700:
-        value: '#6941c6'
-      900:
-        value: '#42307d'
-
-    green:
-      100:
-        value: '#d15ad5'
-      300:
-        value: '#6ce9a6'
-      500:
-        value: '#12b76a'
-      700:
-        value: '#027a48'
-      900:
-        value: '#054f31'
-
-    red:
-      100:
-        value: '#fee4e2'
-      300:
-        value: '#fda29b'
-      500:
-        value: '#f04438'
-      700:
-        value: '#b42318'
-      900:
-        value: '#7a271a'
-
-    orange:
-      100:
-        value: '#fef0c7'
-      300:
-        value: '#fec84b'
-      500:
-        value: '#f79009'
-      700:
-        value: '#b54708'
-      900:
-        value: '#93370d'
-
-    gray:
-      100:
-        value: '#f2f4f7'
-      300:
-        value: '#d0d5dd'
-      500:
-        value: '#667085'
-      700:
-        value: '#344054'
-      900:
-        value: '#101828'
-
-    logo:
-      purple:
-        value: 'rgba(120, 113, 255, 1)'
-      pink:
-        value: 'rgba(201, 139, 254, 1)'
-      blue:
-        value: 'rgba(32, 134, 225, 1)'
-
-    background:
-      value: 'rgba(32, 34, 50, 1.0)'
-    background-secondary:
-      value: '#282A30'
-
+    # These are the colors assigned to chat users.
+    # If you add more colors here make sure to add them to
+    # GenerateRandomDisplayColor in the Go codebase so it knows the max
+    # number of colors to use.
     user:
       1:
         value: 'rgb(244, 11, 11)'
@@ -93,42 +27,33 @@ color:
       8:
         value: 'rgb(244, 11, 244)'
 
+    text:
+      primary:
+        value: '#030208'
+      secondary:
+        value: '#63638E'
+      highlight:
+        value: '#030208'
+      bright:
+        value: '#5353A6'
+    background:
+      highlight:
+        value: '#F0E678'
+      primary:
+        value: '#FFFCF2'
+      secondary:
+        value: '#F0EFE4'
+
+rounded-corners:
+  value: '0.5em'
+
 font:
   owncast:
-    family:
+    body:
       value: "'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
         'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
         'Segoe UI Symbol', 'Noto Color Emoji'"
-    header-family:
+    display:
       value: "'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
         'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
         'Segoe UI Symbol', 'Noto Color Emoji'"
-
-# Values used in the admin and should be migrated to variables or removed.
-# See ant-overrides.scss.
-owncast-purple:
-  value: '{color.owncast.logo.purple.value}'
-owncast-purple-25:
-  value: 'rgba(120, 113, 255, 0.25)'
-owncast-purple-50:
-  value: 'rgba(120, 113, 255, 0.5)'
-online-color:
-  value: '#73dd3f'
-offline-color:
-  value: '#999'
-pink:
-  value: '{color.owncast.logo.pink.value}'
-purple:
-  value: '{color.owncast.purple.500.value}'
-blue:
-  value: '{color.owncast.logo.blue.value}'
-white-88:
-  value: '{color.owncast.gray.500.value}'
-purple-dark:
-  value: '{color.owncast.purple.900.value}'
-default-link-color:
-  value: '{color.owncast.purple.700.value}'
-default-bg-color:
-  value: '{color.owncast.background.value}'
-default-text-color:
-  value: '{color.owncast.gray.100.value}'
diff --git a/web/styles/ant-overrides.scss b/web/styles/ant-overrides.scss
index 2baf2c072..c4eaa1350 100644
--- a/web/styles/ant-overrides.scss
+++ b/web/styles/ant-overrides.scss
@@ -5,17 +5,20 @@
 .ant-btn {
   height: 2rem;
   padding: .3rem 1rem;
+  background-color: var(--theme-unknown);
   font-size: .85rem;
   font-weight: bold;
   border-radius: var(--theme-rounded-corners);
   border-color: transparent;
-  background-color: var(--color-owncast-gray-500);
-  color: var(--color-owncast-gray-100);
+  color: var(--theme-unknown-2);
   &:hover,
   &:focus {
-    background-color: var(--color-owncast-gray-700);
+    background-color: var(--theme-primary);
     border-color: transparent;
-    color: inherit;
+    color: var(--theme-unknown-2);
+  }
+  &:focus {
+    border-color: var(--theme-unknown-2);
   }
   &[ant-click-animating-without-extra-node]:after {
     animation: 0s !important;
@@ -23,30 +26,25 @@
 }
 
 .ant-btn-primary {
-  background-color: var(--color-owncast-purple-700);
-  &:hover,
-  &:focus {
-    background-color: var(--color-owncast-purple-500);
-    border-color: transparent;
-  }
+  background-color: var(--theme-unknown);
 }
 
 .ant-btn-primary[disabled] {
-  background-color: var(--white-25);
+  background-color: var(--theme-unknown);
+  color: var(--theme-unknown-2);
   &:hover {
-    background-color: var(--white-35);
+    background-color: var(--theme-unknown);
   }
 }
 
-.ant-btn-ghost {
+.ant-btn-background-ghost {
   border: 0px;
   box-shadow: none !important;
-  background-color: transparent !important;
   &:hover,
   &:focus {
-    background-color: var(--theme-info-color);
+    background-color: var(--theme-unknown);
   }
-} 
+}
 
 /* ------------------------- //
   DROPDOWN
@@ -54,24 +52,5 @@
 
 .ant-dropdown-menu {
   border-radius: var(--theme-rounded-corners);
-  background-color: var(--color-owncast-background-secondary);
-}
-
-/* ------------------------- //
-  TABS
-// ------------------------- */
-
-@media (max-width: 768px) {
-  .ant-tabs-content {
-    height: 100%;
-  }
-}
-
-/* ------------------------- //
-  TOOLTIP
-// ------------------------- */
-
-.ant-tooltip {
-  // border-radius: var(--theme-rounded-corners);
-  // overflow: hidden;
+  background-color: var(--color-background-secondary);
 }
diff --git a/web/styles/globals.scss b/web/styles/globals.scss
index e74409163..3ff7426cd 100644
--- a/web/styles/globals.scss
+++ b/web/styles/globals.scss
@@ -1,17 +1,88 @@
-@import "@fontsource/open-sans/variable.css";
-@import "@fontsource/poppins/400.css";
-@import "@fontsource/poppins/600.css";
+@import '@fontsource/open-sans/variable.css';
+@import '@fontsource/poppins/400.css';
+@import '@fontsource/poppins/600.css';
 
-// @import "~antd/dist/antd.dark";
-
-html,
 body {
-  padding: 0;
+  font-family: var(--theme-text-body-font-family);
+  font-size: 16px;
+  line-height: 1.5em;
   margin: 0;
-  font-family: var(--theme-font-family), var(--theme-header-font-family), sans-serif;
-  font-size: clamp(14px, 1vw, 17px);
-  background-color: var(--default-bg-color);
-  color: var(--default-text-color);
+  padding: 0;
+
+  color: var(--theme-text-primary);
+  background-color: var(--theme-background-primary);
+
+  div,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    margin: 0.7em 0 0 0;
+    padding: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--theme-text-display-font-family);
+  }
+
+  h1 {
+    font-size: 2em;
+  }
+
+  h2 {
+    font-size: 1.5em;
+    font-weight: 400;
+  }
+
+  h3 {
+    font-family: var(--theme-text-body-font-family);
+    font-size: 1.25em;
+    font-weight: 500;
+  }
+
+  h4 {
+    font-size: 1em;
+  }
+
+  ul {
+    list-style: square;
+  }
+
+  ul,
+  ol {
+    margin: 0.7em 0 0 0;
+    padding: 0 1em;
+
+    ul,
+    ol {
+      margin: 0;
+    }
+
+    li {
+      margin: 0.175em 0 0 0;
+    }
+  }
+
+  a {
+    color: var(--theme-text-link);
+
+    &:visited {
+      color: var(--theme-text-primary);
+    }
+  }
+
+  strong,
+  b {
+    font-weight: 700;
+  }
 }
 
 @media (max-width: 768px) {
@@ -19,176 +90,3 @@ body {
     overflow: hidden;
   }
 }
-
-// a {
-//   color: inherit;
-//   text-decoration: none;
-//   color: var(--default-link-color);
-
-//   &:hover {
-//     color: var(--default-text-color);
-//   }
-// }
-
-// * {
-//   box-sizing: border-box;
-// }
-
-// p,
-// p.description,
-// .description,
-// .ant-typography {
-//   font-weight: 500;
-//   margin: 1em 0;
-//   color: var(--white-75);
-// }
-
-// .description.reduced-margins {
-//   margin-top: 5px;
-//   margin-bottom: 5px;
-// }
-
-// pre {
-//   display: block;
-//   padding: 1rem;
-//   margin: 0.5rem 0;
-//   background-color: var(--code-bg-color);
-//   color: var(--white-50);
-// }
-
-// code {
-//   color: var(--code-color);
-//   background-color: var(--white-15);
-//   display: inline-block;
-//   padding: 2px 4px;
-//   border-radius: 4px;
-//   font-size: 0.88em;
-// }
-
-// strong {
-//   font-weight: 600;
-// }
-
-// .logo-svg {
-//   height: 2rem;
-//   width: 2rem;
-// }
-
-// .line-chart-container {
-//   margin: 2em auto;
-//   margin-bottom: 0px;
-//   padding: 1em;
-//   border: 1px solid var(--gray-dark);
-
-//   canvas {
-//     max-width: 100%;
-//   }
-// }
-
-// .form-module {
-//   margin: 1em 0;
-//   background-color: var(--container-bg-color);
-//   padding: 2em;
-//   border-radius: var(--container-border-radius);
-
-//   h3 {
-//     &:first-of-type {
-//       margin-top: 0;
-//     }
-//   }
-// }
-
-// .form-module.disabled {
-//   opacity: 0.4;
-//   cursor: not-allowed;
-// }
-
-// .row {
-//   display: flex;
-//   flex-direction: row;
-//   justify-content: space-between;
-//   align-items: flex-start;
-
-//   @media (max-width: 980px) {
-//     flex-direction: column;
-//     .form-module {
-//       width: 100%;
-//     }
-//   }
-// }
-
-// input {
-//   &:not(:focus) {
-//     &:invalid {
-//       color: var(--ant-error);
-//     }
-//   }
-// }
-
-// .table-container {
-//   .ant-table-tbody > tr > td {
-//     transition: background-color 0.15s;
-//   }
-//   .ant-table-tbody > tr.ant-table-row:hover > td {
-//     background-color: var(--gray);
-//   }
-//   .ant-table-small {
-//     .ant-table-cell {
-//       font-size: 12px;
-//     }
-//     .ant-table-selection-column {
-//       width: 20px;
-//       min-width: 20px;
-//     }
-//   }
-//   .ant-table-row.hidden {
-//     .ant-table-cell {
-//       color: var(--black-35);
-//     }
-//     @media (prefers-color-scheme: dark) {
-//       .ant-table-cell {
-//         color: var(--white-25);
-//       }
-//     }
-//   }
-//   .ant-table-cell {
-//     &.actions-col {
-//       text-align: right;
-//     }
-//   }
-//   td.number-col {
-//     text-align: right;
-//   }
-// }
-
-// .ant-tabs-tab {
-//   color: var(--owncast-purple);
-
-//   .ant-tabs-tab-active {
-//     border-color: var(--nav-selected-text);
-//   }
-// }
-
-// .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
-//   color: var(--nav-selected-text);
-// }
-
-// .ant-tabs-ink-bar {
-//   background: var(--nav-selected-text);
-// }
-
-// #fediverse-post-container {
-//   max-width: 50vw;
-//   width: 100%;
-
-//   #fediverse-post-input {
-//     color: var(--white-75);
-//     border-color: var(--owncast-purple);
-//     background-color: var(--default-bg-color);
-//     height: 250px;
-//   }
-
-//   .ant-input-textarea-show-count::after {
-//     color: var(--owncast-purple);
-//   }
-// }
diff --git a/web/styles/theme.less b/web/styles/theme.less
index 8976e9fa2..98ef81f46 100644
--- a/web/styles/theme.less
+++ b/web/styles/theme.less
@@ -1,39 +1,28 @@
 
 // Do not edit directly
-// Generated on Sun, 10 Jul 2022 05:37:28 GMT
+// Generated on Sun, 10 Jul 2022 17:52:44 GMT
 // 
 // How to edit these values:
 // Edit the corresponding token file under the style-definitions directory
 // in the Owncast web project.
 
-@text-color: var(--theme-text-color);
-@text-color-secondary: var(--theme-text-color-secondary);
-@link-color: var(--theme-link-color);
-@popover-background: var(--theme-text-color-secondary);
+@text-color: var(--theme-text-primary);
+@text-color-secondary: var(--theme-text-secondary);
+@link-color: var(--theme-text-link);
+@popover-background: var(--theme-background-secondary);
 @background-color-light: var(--theme-background-secondary);
-@layout-body-background: var(--theme-background);
-@primary-color: #6941c6;
-@info-color: #667085;
-@success-color: #12b76a;
-@warning-color: #f79009;
-@error-color: #f04438;
-@purple-base: #9e77ed;
-@green-base: #12b76a;
-@red-base: #f04438;
-@orange-base: #f79009;
-@theme-primary-color: #6941c6; // The primary color of the application used for rendering controls.
-@theme-text-color: #d0d5dd; // The color of the text in the application.
-@theme-text-color-secondary: #667085;
-@theme-link-color: #9e77ed;
-@theme-font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-@theme-header-font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-@theme-background: #202232; // The main background color of the page.
-@theme-background-secondary: #282a30; // A secondary background color used in sections and controls.
-@theme-rounded-corners: .5rem; // The radius of rounded corners used in places.
-@theme-success-color: #12b76a;
-@theme-info-color: #d6bbfb;
-@theme-warning-color: #f79009;
-@theme-error-color: #f04438;
+@layout-body-background: var(--theme-background-primary);
+@theme-unknown: #00ff00;
+@theme-unknown-2: #ff0000;
+@theme-primary: #00ff00; // The primary color of the application used for rendering controls.
+@theme-text-primary: #030208; // The color of the text in the application.
+@theme-text-secondary: #63638e;
+@theme-text-link: #5353a6;
+@theme-text-body-font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+@theme-text-display-font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+@theme-background-primary: #fffcf2; // The main background color of the page.
+@theme-background-secondary: #f0efe4; // A secondary background color used in sections and controls.
+@theme-rounded-corners: 0.5em;
 @theme-user-colors-1: #f40b0b;
 @theme-user-colors-2: #f4800b;
 @theme-user-colors-3: #f4f40b;
@@ -42,37 +31,21 @@
 @theme-user-colors-6: #0ba6f4;
 @theme-user-colors-7: #6666ff;
 @theme-user-colors-8: #f40bf4;
-@color-owncast-purple-100: #f4ebff;
-@color-owncast-purple-300: #d6bbfb;
-@color-owncast-purple-500: #9e77ed;
-@color-owncast-purple-700: #6941c6;
-@color-owncast-purple-900: #42307d;
-@color-owncast-green-100: #d15ad5;
-@color-owncast-green-300: #6ce9a6;
-@color-owncast-green-500: #12b76a;
-@color-owncast-green-700: #027a48;
-@color-owncast-green-900: #054f31;
-@color-owncast-red-100: #fee4e2;
-@color-owncast-red-300: #fda29b;
-@color-owncast-red-500: #f04438;
-@color-owncast-red-700: #b42318;
-@color-owncast-red-900: #7a271a;
-@color-owncast-orange-100: #fef0c7;
-@color-owncast-orange-300: #fec84b;
-@color-owncast-orange-500: #f79009;
-@color-owncast-orange-700: #b54708;
-@color-owncast-orange-900: #93370d;
-@color-owncast-gray-100: #f2f4f7;
-@color-owncast-gray-300: #d0d5dd;
-@color-owncast-gray-500: #667085;
-@color-owncast-gray-600: #4b4c4d;
-@color-owncast-gray-700: #344054;
-@color-owncast-gray-900: #101828;
-@color-owncast-logo-purple: #7871ff;
-@color-owncast-logo-pink: #c98bfe;
-@color-owncast-logo-blue: #2086e1;
-@color-owncast-background: #202232;
-@color-owncast-background-secondary: #282a30;
+@owncast-purple: #00ff00;
+@owncast-purple-25: rgba(120, 113, 255, 0.25);
+@owncast-purple-50: rgba(120, 113, 255, 0.5);
+@online-color: #73dd3f;
+@offline-color: #999;
+@pink: #00ff00;
+@purple: #ff0000;
+@blue: #00ff00;
+@white-88: #ff0000;
+@purple-dark: #00ff00;
+@default-link-color: #5353a6;
+@default-bg-color: #fffcf2;
+@default-text-color: #030208;
+@color-unknown: #00ff00;
+@color-unknown-2: #ff0000;
 @color-owncast-user-1: #f40b0b;
 @color-owncast-user-2: #f4800b;
 @color-owncast-user-3: #f4f40b;
@@ -81,18 +54,13 @@
 @color-owncast-user-6: #0ba6f4;
 @color-owncast-user-7: #6666ff;
 @color-owncast-user-8: #f40bf4;
-@font-owncast-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-@font-owncast-header-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-@owncast-purple: #7871ff;
-@owncast-purple-25: rgba(120, 113, 255, 0.25);
-@owncast-purple-50: rgba(120, 113, 255, 0.5);
-@online-color: #73dd3f;
-@offline-color: #999;
-@pink: #c98bfe;
-@purple: #9e77ed;
-@blue: #2086e1;
-@white-88: #667085;
-@purple-dark: #42307d;
-@default-link-color: #6941c6;
-@default-bg-color: #202232;
-@default-text-color: #f2f4f7;
\ No newline at end of file
+@color-owncast-text-primary: #030208;
+@color-owncast-text-secondary: #63638e;
+@color-owncast-text-highlight: #030208;
+@color-owncast-text-bright: #5353a6;
+@color-owncast-background-highlight: #f0e678;
+@color-owncast-background-primary: #fffcf2;
+@color-owncast-background-secondary: #f0efe4;
+@rounded-corners: 0.5em;
+@font-owncast-body: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+@font-owncast-display: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
\ No newline at end of file
diff --git a/web/styles/variables.css b/web/styles/variables.css
index db1ca3b5a..8f51b2caf 100644
--- a/web/styles/variables.css
+++ b/web/styles/variables.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 10 Jul 2022 05:37:28 GMT
+ * Generated on Sun, 10 Jul 2022 17:52:44 GMT
  * 
  * How to edit these values:
  * Edit the corresponding token file under the style-definitions directory
@@ -8,38 +8,23 @@
  */
 
 :root {
-  --text-color: var(--theme-text-color);
-  --text-color-secondary: var(--theme-text-color-secondary);
-  --link-color: var(--theme-link-color);
-  --popover-background: var(--theme-text-color-secondary);
+  --text-color: var(--theme-text-primary);
+  --text-color-secondary: var(--theme-text-secondary);
+  --link-color: var(--theme-text-link);
+  --popover-background: var(--theme-background-secondary);
   --background-color-light: var(--theme-background-secondary);
-  --layout-body-background: var(--theme-background);
-  --primary-color: #6941c6;
-  --info-color: #667085;
-  --success-color: #12b76a;
-  --warning-color: #f79009;
-  --error-color: #f04438;
-  --purple-base: #9e77ed;
-  --green-base: #12b76a;
-  --red-base: #f04438;
-  --orange-base: #f79009;
-  --theme-primary-color: #6941c6; /* The primary color of the application used for rendering controls. */
-  --theme-text-color: #d0d5dd; /* The color of the text in the application. */
-  --theme-text-color-secondary: #667085;
-  --theme-link-color: #9e77ed;
-  --theme-font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
-  --theme-header-font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
-  --theme-background: #202232; /* The main background color of the page. */
-  --theme-background-secondary: #282a30; /* A secondary background color used in sections and controls. */
-  --theme-rounded-corners: 0.5rem; /* The radius of rounded corners used in places. */
-  --theme-success-color: #12b76a;
-  --theme-info-color: #d6bbfb;
-  --theme-warning-color: #f79009;
-  --theme-error-color: #f04438;
+  --layout-body-background: var(--theme-background-primary);
+  --theme-unknown: #00ff00;
+  --theme-unknown-2: #ff0000;
+  --theme-primary: #00ff00; /* The primary color of the application used for rendering controls. */
+  --theme-text-primary: #030208; /* The color of the text in the application. */
+  --theme-text-secondary: #63638e;
+  --theme-text-link: #5353a6;
+  --theme-text-body-font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --theme-text-display-font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --theme-background-primary: #fffcf2; /* The main background color of the page. */
+  --theme-background-secondary: #f0efe4; /* A secondary background color used in sections and controls. */
+  --theme-rounded-corners: 0.5em;
   --theme-user-colors-1: #f40b0b;
   --theme-user-colors-2: #f4800b;
   --theme-user-colors-3: #f4f40b;
@@ -48,37 +33,21 @@
   --theme-user-colors-6: #0ba6f4;
   --theme-user-colors-7: #6666ff;
   --theme-user-colors-8: #f40bf4;
-  --color-owncast-purple-100: #f4ebff;
-  --color-owncast-purple-300: #d6bbfb;
-  --color-owncast-purple-500: #9e77ed;
-  --color-owncast-purple-700: #6941c6;
-  --color-owncast-purple-900: #42307d;
-  --color-owncast-green-100: #d15ad5;
-  --color-owncast-green-300: #6ce9a6;
-  --color-owncast-green-500: #12b76a;
-  --color-owncast-green-700: #027a48;
-  --color-owncast-green-900: #054f31;
-  --color-owncast-red-100: #fee4e2;
-  --color-owncast-red-300: #fda29b;
-  --color-owncast-red-500: #f04438;
-  --color-owncast-red-700: #b42318;
-  --color-owncast-red-900: #7a271a;
-  --color-owncast-orange-100: #fef0c7;
-  --color-owncast-orange-300: #fec84b;
-  --color-owncast-orange-500: #f79009;
-  --color-owncast-orange-700: #b54708;
-  --color-owncast-orange-900: #93370d;
-  --color-owncast-gray-100: #f2f4f7;
-  --color-owncast-gray-300: #d0d5dd;
-  --color-owncast-gray-500: #667085;
-  --color-owncast-gray-600: #4b4c4d;
-  --color-owncast-gray-700: #344054;
-  --color-owncast-gray-900: #101828;
-  --color-owncast-logo-purple: #7871ff;
-  --color-owncast-logo-pink: #c98bfe;
-  --color-owncast-logo-blue: #2086e1;
-  --color-owncast-background: #202232;
-  --color-owncast-background-secondary: #282a30;
+  --owncast-purple: #00ff00;
+  --owncast-purple-25: rgba(120, 113, 255, 0.25);
+  --owncast-purple-50: rgba(120, 113, 255, 0.5);
+  --online-color: #73dd3f;
+  --offline-color: #999;
+  --pink: #00ff00;
+  --purple: #ff0000;
+  --blue: #00ff00;
+  --white-88: #ff0000;
+  --purple-dark: #00ff00;
+  --default-link-color: #5353a6;
+  --default-bg-color: #fffcf2;
+  --default-text-color: #030208;
+  --color-unknown: #00ff00;
+  --color-unknown-2: #ff0000;
   --color-owncast-user-1: #f40b0b;
   --color-owncast-user-2: #f4800b;
   --color-owncast-user-3: #f4f40b;
@@ -87,23 +56,14 @@
   --color-owncast-user-6: #0ba6f4;
   --color-owncast-user-7: #6666ff;
   --color-owncast-user-8: #f40bf4;
-  --font-owncast-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-owncast-header-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
-  --owncast-purple: #7871ff;
-  --owncast-purple-25: rgba(120, 113, 255, 0.25);
-  --owncast-purple-50: rgba(120, 113, 255, 0.5);
-  --online-color: #73dd3f;
-  --offline-color: #999;
-  --pink: #c98bfe;
-  --purple: #9e77ed;
-  --blue: #2086e1;
-  --white-88: #667085;
-  --purple-dark: #42307d;
-  --default-link-color: #6941c6;
-  --default-bg-color: #202232;
-  --default-text-color: #f2f4f7;
+  --color-owncast-text-primary: #030208;
+  --color-owncast-text-secondary: #63638e;
+  --color-owncast-text-highlight: #030208;
+  --color-owncast-text-bright: #5353a6;
+  --color-owncast-background-highlight: #f0e678;
+  --color-owncast-background-primary: #fffcf2;
+  --color-owncast-background-secondary: #f0efe4;
+  --rounded-corners: 0.5em;
+  --font-owncast-body: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-owncast-display: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 }