From d5fa81f76e6a44acbd17f497ec34594ed496d51e Mon Sep 17 00:00:00 2001
From: gingervitis <omqmail@gmail.com>
Date: Mon, 29 Aug 2022 23:17:12 -0700
Subject: [PATCH] Draft: rough-ish draft of proposed color theme changes
 (#2067)

* color experimentation and troubleshooting

* create color scheme, assign colors, more ant overrides

* fun selection color

* Prettified Code!

* Correctly import opensans

* Prettified Code!

* Organize+standardize colors/names and update the app to use them

* Prettified Code!

* Use css var references instead of resolving value of vars in css files

* Prettified Code!

Co-authored-by: gingervitis <gingervitis@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
Co-authored-by: gabek <gabek@users.noreply.github.com>
---
 .../action-buttons/ActionButton.tsx           |   7 +-
 .../ChatSystemMessage.module.scss             |   5 +-
 .../ChatTextField/ChatTextField.module.scss   |   6 +-
 .../ChatUserMessage.module.scss               |   4 +-
 .../ContentHeader/ContentHeader.module.scss   |  19 +-
 web/components/common/Logo/Logo.module.scss   |   1 -
 .../UserDropdown/UserDropdown.module.scss     |   5 +
 .../common/UserDropdown/UserDropdown.tsx      |   2 +-
 web/components/modals/Follow/FollowModal.tsx  |   6 +-
 web/components/modals/NameChangeModal.tsx     |   2 +-
 web/components/ui/Content/Content.module.scss |  16 +-
 web/components/ui/Content/Content.tsx         |   8 +-
 .../CustomPageContent.module.scss             |  10 +-
 web/components/ui/Footer/Footer.module.scss   |   4 +-
 web/components/ui/Header/Header.module.scss   |  11 +-
 web/components/ui/Logo/Logo.module.scss       |   4 +-
 web/components/ui/Modal/Modal.module.scss     |   1 +
 .../OfflineBanner/OfflineBanner.module.scss   |   3 +-
 web/components/ui/Sidebar/Sidebar.module.scss |   5 +-
 .../ui/Statusbar/Statusbar.module.scss        |   8 +-
 web/components/video/player.scss              |  19 +-
 web/stories/Color.tsx                         |   5 +-
 web/stories/Colors.stories.mdx                | 109 ++++++--
 .../tokens/color/antd-overrides.yaml          |  30 +--
 .../tokens/color/default-theme.yaml           | 252 ++++++++++++++----
 .../tokens/color/owncast-admin.yaml           |  48 ++--
 .../tokens/color/owncast-colors.yaml          |  75 ++++--
 web/styles/ant-overrides.scss                 | 120 ++++++++-
 web/styles/globals.scss                       |  25 +-
 web/styles/theme.less                         | 141 ++++++----
 web/styles/variables.css                      | 173 ++++++++----
 web/styles/variables.scss                     |  18 +-
 32 files changed, 817 insertions(+), 325 deletions(-)

diff --git a/web/components/action-buttons/ActionButton.tsx b/web/components/action-buttons/ActionButton.tsx
index 2e1f2424a..bcade14dd 100644
--- a/web/components/action-buttons/ActionButton.tsx
+++ b/web/components/action-buttons/ActionButton.tsx
@@ -6,10 +6,15 @@ import s from './ActionButton.module.scss';
 
 interface Props {
   action: ExternalAction;
+  primary?: boolean;
 }
+ActionButton.defaultProps = {
+  primary: false,
+};
 
 export default function ActionButton({
   action: { url, title, description, icon, color, openExternally },
+  primary = false,
 }: Props) {
   const [showModal, setShowModal] = useState(false);
 
@@ -24,7 +29,7 @@ export default function ActionButton({
   return (
     <>
       <Button
-        type="primary"
+        type={primary ? 'primary' : 'default'}
         className={`${s.button}`}
         onClick={buttonClicked}
         style={{ backgroundColor: color }}
diff --git a/web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss b/web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss
index 56cbb841e..ed9b586c2 100644
--- a/web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss
+++ b/web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss
@@ -1,5 +1,5 @@
 .chatSystemMessage {
-  background: var(--theme-background-secondary);
+  background: var(--theme-color-background-main);
   background: linear-gradient(
     70deg,
     rgb(78, 54, 114) 0%,
@@ -31,8 +31,7 @@
     mark {
       padding-left: 0.35em;
       padding-right: 0.35em;
-      color: var(--theme-text-highlight);
-      background-color: var(--color-bg-highlight);
+      background-color: var(--theme-color-palette-12);
     }
   }
 }
diff --git a/web/components/chat/ChatTextField/ChatTextField.module.scss b/web/components/chat/ChatTextField/ChatTextField.module.scss
index d28f9db8e..81cc06f1e 100644
--- a/web/components/chat/ChatTextField/ChatTextField.module.scss
+++ b/web/components/chat/ChatTextField/ChatTextField.module.scss
@@ -4,14 +4,16 @@
   bottom: 0px;
   width: 100%;
   padding: 0.3rem;
-  color: var(--theme-text-secondary);
+  color: var(--theme-color-components-form-field-text);
   overflow-x: hidden;
+
   div[role='textbox'] {
     font-size: 0.9rem;
     border-radius: 0.2rem;
     padding: 0.6rem;
     padding-right: calc(0.6rem + 44px);
-    background-color: var(--color-owncast-gray-700);
+    background-color: var(--theme-color-components-form-field-background);
+    border-color: var(--theme-color-components-form-field-border);
     box-shadow: 0;
     transition: box-shadow 50ms ease-in-out;
     &:focus {
diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
index d642e96fc..dc5618282 100644
--- a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
+++ b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
@@ -13,12 +13,12 @@
     font-weight: bold;
   }
   .message {
-    color: var(--theme-text-primary);
+    color: var(--theme-color-components-chat-text);
 
     mark {
       padding-left: 0.35em;
       padding-right: 0.35em;
-      color: var(--theme-text-highlight);
+      color: var(--theme-color-palette-12);
     }
   }
 
diff --git a/web/components/common/ContentHeader/ContentHeader.module.scss b/web/components/common/ContentHeader/ContentHeader.module.scss
index 60416dbde..ca1db61b8 100644
--- a/web/components/common/ContentHeader/ContentHeader.module.scss
+++ b/web/components/common/ContentHeader/ContentHeader.module.scss
@@ -1,6 +1,7 @@
 .root {
   position: relative;
   display: grid;
+  padding: 20px;
 }
 
 .buttonsLogoTitleSection {
@@ -28,31 +29,31 @@
 .titleSection {
   display: flex;
   flex-direction: column;
+  margin-left: 10px;
 
   .title {
+    font-family: var(--theme-text-display-font-family);
+    color: var(--theme-color-palette-0);
     font-size: 32px;
     font-weight: bold;
-    color: black;
-    text-transform: uppercase;
     line-height: 30px;
   }
 
   .subtitle {
-    font-size: 24px;
-    font-weight: 400;
-    line-height: 22px;
-    color: var(--theme-text-secondary);
+    font-size: 22px;
+    font-weight: 300;
+    line-height: 1.3;
+    color: var(--theme-color-background-header);
   }
 }
 
 .tagList {
-  font-family: var(--theme-text-display-font-family);
-  color: var(--theme-text-primary);
+  color: var(--theme-color-palette-10);
 
   span {
     display: inline-block;
     margin-right: 8px;
     font-size: 14px;
-    font-weight: 300;
+    font-weight: 500;
   }
 }
diff --git a/web/components/common/Logo/Logo.module.scss b/web/components/common/Logo/Logo.module.scss
index fe64619e1..565d633cf 100644
--- a/web/components/common/Logo/Logo.module.scss
+++ b/web/components/common/Logo/Logo.module.scss
@@ -12,7 +12,6 @@
 .contrast {
   padding: 5px;
   border-radius: 50%;
-  background-color: var(--color-owncast-gray-100);
   svg {
     width: clamp(2rem, 7vw, 40px);
     height: clamp(2rem, 7vw, 40px);
diff --git a/web/components/common/UserDropdown/UserDropdown.module.scss b/web/components/common/UserDropdown/UserDropdown.module.scss
index 9d256e5f2..0ac78eb41 100644
--- a/web/components/common/UserDropdown/UserDropdown.module.scss
+++ b/web/components/common/UserDropdown/UserDropdown.module.scss
@@ -1,5 +1,10 @@
 .root {
   button {
     border: none;
+		.ant-space {
+			.ant-space-item {
+				color: var(--theme-unknown-2);
+			}
+		}
   }
 }
diff --git a/web/components/common/UserDropdown/UserDropdown.tsx b/web/components/common/UserDropdown/UserDropdown.tsx
index 2212e41bc..424b307ea 100644
--- a/web/components/common/UserDropdown/UserDropdown.tsx
+++ b/web/components/common/UserDropdown/UserDropdown.tsx
@@ -68,7 +68,7 @@ export default function UserDropdown({ username: defaultUsername }: Props) {
   return (
     <div className={`${s.root}`}>
       <Dropdown overlay={menu} trigger={['click']}>
-        <Button icon={<UserOutlined style={{ marginRight: '.5rem' }} />}>
+        <Button type="primary" icon={<UserOutlined style={{ marginRight: '.5rem' }} />}>
           <Space>
             {username}
             <CaretDownOutlined />
diff --git a/web/components/modals/Follow/FollowModal.tsx b/web/components/modals/Follow/FollowModal.tsx
index 747307f1f..e32222436 100644
--- a/web/components/modals/Follow/FollowModal.tsx
+++ b/web/components/modals/Follow/FollowModal.tsx
@@ -111,10 +111,12 @@ export default function FollowModal(props: Props) {
           </div>
         </div>
         <Space className={s.buttons}>
-          <Button disabled={!valid} onClick={remoteFollowButtonPressed}>
+          <Button disabled={!valid} type="primary" onClick={remoteFollowButtonPressed}>
             Follow
           </Button>
-          <Button onClick={joinButtonPressed}>Join the Fediverse</Button>
+          <Button onClick={joinButtonPressed} type="primary">
+            Join the Fediverse
+          </Button>
         </Space>
       </Spin>
     </Space>
diff --git a/web/components/modals/NameChangeModal.tsx b/web/components/modals/NameChangeModal.tsx
index 060ac05b6..83c12530c 100644
--- a/web/components/modals/NameChangeModal.tsx
+++ b/web/components/modals/NameChangeModal.tsx
@@ -18,7 +18,7 @@ function UserColor(props: { color: number }): React.ReactElement {
   const { color } = props;
   const style: CSSProperties = {
     textAlign: 'center',
-    backgroundColor: `var(--theme-user-colors-${color})`,
+    backgroundColor: `var(--theme-color-users-${color})`,
     width: '100%',
     height: '100%',
   };
diff --git a/web/components/ui/Content/Content.module.scss b/web/components/ui/Content/Content.module.scss
index bf54dacf1..41083aea6 100644
--- a/web/components/ui/Content/Content.module.scss
+++ b/web/components/ui/Content/Content.module.scss
@@ -1,7 +1,16 @@
 .root {
   display: grid;
   grid-template-columns: 1fr auto;
-  padding: 0.7em;
+
+  background-color: var(--theme-color-background-main);
+
+  .topSection {
+    padding: 0;
+    background-color: var(--theme-color-components-video-background);
+  }
+  .lowerSection {
+    padding: 0em 2em;
+  }
 }
 
 .leftCol {
@@ -22,13 +31,12 @@
     flex-direction: column;
     height: calc(100vh - 64px);
     overflow: hidden;
-    .topHalf {
+    .topSection {
       display: grid;
       grid-template-rows: 30vh 5vh 5vh;
       height: 40vh;
-      // overflow: hidden;
     }
-    .lowerHalf {
+    .lowerSection {
       height: 60vh;
     }
   }
diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx
index 6704c317b..f0c8422fa 100644
--- a/web/components/ui/Content/Content.tsx
+++ b/web/components/ui/Content/Content.tsx
@@ -113,7 +113,8 @@ export default function ContentComponent() {
     <Content className={rootClassName}>
       <div className={s.leftContent}>
         <Spin className={s.loadingSpinner} size="large" spinning={appState.appLoading} />
-        <div className={s.topHalf}>
+
+        <div className={s.topSection}>
           {online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
           {!online && (
             <OfflineBanner
@@ -129,6 +130,8 @@ export default function ContentComponent() {
             lastDisconnectTime={lastDisconnectTime}
             viewerCount={viewerCount}
           />
+        </div>
+        <div className={s.midSection}>
           <div className={s.buttonsLogoTitleSection}>
             <ActionButtonRow>
               {externalActionButtons}
@@ -161,6 +164,9 @@ export default function ContentComponent() {
             links={socialHandles}
             logo="/logo"
           />
+        </div>
+
+        <div className={s.lowerSection}>
           <Tabs defaultActiveKey="0" style={{ height: '100%' }}>
             {isChatVisible && isMobile && (
               <TabPane tab="Chat" key="0" style={{ height: '100%' }}>
diff --git a/web/components/ui/CustomPageContent/CustomPageContent.module.scss b/web/components/ui/CustomPageContent/CustomPageContent.module.scss
index dca2a3bd7..eb3fafa3c 100644
--- a/web/components/ui/CustomPageContent/CustomPageContent.module.scss
+++ b/web/components/ui/CustomPageContent/CustomPageContent.module.scss
@@ -9,12 +9,10 @@
   line-height: 1.5em;
   margin: 0;
   padding: 0;
-  width: 80%;
-  max-width: 1200px;
-
-  color: var(--theme-text);
-  background-color: var(--theme-background-secondary);
-  padding: 1em;
+  color: var(--theme-color-palette-0);
+  background-color: var(--theme-color-palette-4);
+  padding: calc(3 * var(--content-padding));
+  border-radius: var(--theme-rounded-corners);
 
   // Allow the content to fill the width on narrow screens.
   @media only screen and (max-width: 768px) {
diff --git a/web/components/ui/Footer/Footer.module.scss b/web/components/ui/Footer/Footer.module.scss
index f1a8c6872..569d4edff 100644
--- a/web/components/ui/Footer/Footer.module.scss
+++ b/web/components/ui/Footer/Footer.module.scss
@@ -1,5 +1,7 @@
 .footer {
   font-size: 0.85em;
   font-weight: 500;
-  color: var(--theme-text-secondary);
+  color: var(--theme-color-palette-1);
+  background-color: transparent;
+  padding: var(--content-padding);
 }
diff --git a/web/components/ui/Header/Header.module.scss b/web/components/ui/Header/Header.module.scss
index 3b3770e91..6c60d7630 100644
--- a/web/components/ui/Header/Header.module.scss
+++ b/web/components/ui/Header/Header.module.scss
@@ -5,13 +5,18 @@
   align-items: center;
   justify-content: space-between;
   z-index: 20;
-  padding: 0.4rem .7rem;
-  background-color: var(--default-bg-color);
+  padding: 0.4rem 0.7rem;
+  box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%);
+
+  background-color: var(--theme-color-background-header);
+
   .logo {
     display: flex;
     align-items: center;
     span {
-      margin-left: .5rem;
+      color: var(--theme-color-components-text-on-dark);
+      font-family: var(--theme-text-display-font-family);
+      margin-left: 0.5rem;
       font-size: 1.5rem;
       font-weight: 600;
     }
diff --git a/web/components/ui/Logo/Logo.module.scss b/web/components/ui/Logo/Logo.module.scss
index 4d9276889..f7e3e9e47 100644
--- a/web/components/ui/Logo/Logo.module.scss
+++ b/web/components/ui/Logo/Logo.module.scss
@@ -10,8 +10,8 @@
   border-radius: 50%;
   border-width: 5px;
   border-style: solid;
-  border-color: var(--theme-primary-color);
-  background-color: var(--theme-background-secondary);
+  border-color: var(--theme-color-palette-0);
+  background-color: var(--theme-color-palette-4);
 }
 
 .container {
diff --git a/web/components/ui/Modal/Modal.module.scss b/web/components/ui/Modal/Modal.module.scss
index 87960294c..6d9375440 100644
--- a/web/components/ui/Modal/Modal.module.scss
+++ b/web/components/ui/Modal/Modal.module.scss
@@ -8,4 +8,5 @@
   display: block;
   height: 100%;
   padding: 2vw;
+  background-color: var(--theme-color-components-modal-content-background);
 }
diff --git a/web/components/ui/OfflineBanner/OfflineBanner.module.scss b/web/components/ui/OfflineBanner/OfflineBanner.module.scss
index 48bece685..cd5fde6ac 100644
--- a/web/components/ui/OfflineBanner/OfflineBanner.module.scss
+++ b/web/components/ui/OfflineBanner/OfflineBanner.module.scss
@@ -7,7 +7,8 @@
   width: clamp(200px, 100%, 300px);
   display: flex;
   flex-direction: column;
-  background-color: var(--theme-background-secondary);
+  color: var(--theme-color-components-text-on-light);
+  background-color: var(--theme-color-background-main);
   margin: 1rem auto;
   border-radius: var(--theme-rounded-corners);
   padding: 1rem;
diff --git a/web/components/ui/Sidebar/Sidebar.module.scss b/web/components/ui/Sidebar/Sidebar.module.scss
index 28082faac..42e3d6944 100644
--- a/web/components/ui/Sidebar/Sidebar.module.scss
+++ b/web/components/ui/Sidebar/Sidebar.module.scss
@@ -1,5 +1,5 @@
 .root {
-  background-color: var(--theme-background-secondary);
+  background-color: var(--theme-color-components-chat-background);
   display: none;
   --header-h: 64px;
 }
@@ -13,7 +13,7 @@
     max-height: calc(100vh - var(--header-h));
   }
 }
-/* 
+/*
 First div is .ant-layout-sider-children
 Only way to target it apparently
 */
@@ -24,4 +24,3 @@ Only way to target it apparently
   flex-grow: 1 !important;
   height: 100% !important;
 }
-
diff --git a/web/components/ui/Statusbar/Statusbar.module.scss b/web/components/ui/Statusbar/Statusbar.module.scss
index 79e4bedbf..427fedf26 100644
--- a/web/components/ui/Statusbar/Statusbar.module.scss
+++ b/web/components/ui/Statusbar/Statusbar.module.scss
@@ -1,12 +1,10 @@
 .statusbar {
   display: flex;
   align-items: center;
-  font-size: .8rem;
-  padding-left: 10px;
-  padding-right: 10px;
+  font-size: 0.8rem;
   justify-content: space-between;
   height: 2rem;
   width: 100%;
-  color: var(--color-owncast-gray-300);
-  background-color: var(--theme-background-secondary);
+  padding: var(--content-padding);
+  color: var(--theme-color-palette-5);
 }
diff --git a/web/components/video/player.scss b/web/components/video/player.scss
index 58d3ad01b..e1528c696 100644
--- a/web/components/video/player.scss
+++ b/web/components/video/player.scss
@@ -1,20 +1,23 @@
 /* Change all text and icon colors in the player. */
 .vjs-owncast.video-js {
-  color: var(--theme-text-secondary);
+  color: var(--theme-color-components-text-on-light);
 }
 
 .vjs-owncast .vjs-big-play-button {
   z-index: 10;
-  color: var(--theme-text-secondary);
-  font-size: 15rem !important;
+  color: var(--theme-color-action);
+  font-size: 8rem !important;
   border-color: transparent !important;
   border-radius: var(--theme-rounded-corners) !important;
   background-color: transparent !important;
   text-shadow: 2px 3px 4px #0000005f;
 
+  -webkit-text-stroke: 2px white;
+  text-stroke: 2px white;
+
   :hover {
     transition: all 0.2s ease-in-out;
-    font-size: 20rem;
+    font-size: 10rem;
     text-shadow: 2px 5px 4px #00000093;
   }
 }
@@ -22,16 +25,16 @@
 .vjs-owncast .vjs-loading-spinner {
   z-index: 10;
   display: block;
-  color: var(--theme-text-secondary);
+  color: var(--theme-color-components-text-on-light);
 }
 
 .vjs-owncast .vjs-control-bar {
-  color: var(--theme-text-secondary);
-  background-color: var(--theme-background-primary) !important;
+  color: var(--theme-color-components-text-on-light);
+  background-color: var(--theme-color-background-main) !important;
 }
 
 .vjs-owncast .vjs-control {
-  color: var(--theme-text-secondary);
+  color: var(--theme-color-components-text-on-light);
 }
 
 .vjs-airplay .vjs-icon-placeholder::before {
diff --git a/web/stories/Color.tsx b/web/stories/Color.tsx
index ce5f73c9d..202e59196 100644
--- a/web/stories/Color.tsx
+++ b/web/stories/Color.tsx
@@ -1,3 +1,5 @@
+import he from 'date-fns/esm/locale/he/index.js';
+import { unset } from 'lodash';
 import PropTypes from 'prop-types';
 
 export function Color(props) {
@@ -35,8 +37,9 @@ export function Color(props) {
   const colorDescriptionStyle = {
     margin: '5px',
     color: 'gray',
-    fontSize: '0.9vw',
+    fontSize: '0.95vw',
     textAlign: 'center' as 'center',
+    lineHeight: 1.0,
   };
 
   return (
diff --git a/web/stories/Colors.stories.mdx b/web/stories/Colors.stories.mdx
index bf4ae0b38..5720d7d5d 100644
--- a/web/stories/Colors.stories.mdx
+++ b/web/stories/Colors.stories.mdx
@@ -1,34 +1,111 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Color, ColorRow } from './Color';
 
-<Meta title="owncast/Style Guide/Colors" />
+<Meta title="owncast/Style Guide/Default Theme" />
 
-# Colors
+# Default theme colors
 
 These colors are assigned in our [color token](https://github.com/owncast/owncast/tree/webv2/web/style-definitions/tokens/color) files
-and get reflected here as they change. run `npm build-styles` to regenerate.
+and get reflected here as they change. run `npm run build-styles` to regenerate.
 
-Toggle dark mode on and off in the above toolbar to see how these colors look on a dark vs. light background.
+## Default Theme
 
-## Text
+These color names are assigned to specific component variables. They can be overwritten via CSS.
 
-<ColorRow colors={['theme-text-primary', 'theme-text-secondary', 'theme-text-link']} />
+<ColorRow
+  colors={[
+    'theme-color-palette-0',
+    'theme-color-palette-1',
+    'theme-color-palette-2',
+    'theme-color-palette-3',
+    'theme-color-palette-4',
+    'theme-color-palette-5',
+    'theme-color-palette-6',
+    'theme-color-palette-7',
+    'theme-color-palette-8',
+    'theme-color-palette-9',
+    'theme-color-palette-10',
+    'theme-color-palette-11',
+    'theme-color-palette-12',
+    'theme-color-palette-13',
+    'theme-color-palette-error',
+    'theme-color-palette-warning',
+    'theme-color-background-main',
+    'theme-color-background-header',
+    'theme-color-action',
+    'theme-color-action-hover',
+    'theme-color-action-disabled',
+  ]}
+/>
 
-## Backgrounds
+## Component Colors
 
-<ColorRow colors={['theme-background-primary', 'theme-background-secondary']} />
+<ColorRow
+  colors={[
+    'theme-color-components-text-on-light',
+    'theme-color-components-text-on-dark',
+    'theme-color-components-primary-button-background',
+    'theme-color-components-primary-button-background-disabled',
+    'theme-color-components-primary-button-text',
+    'theme-color-components-primary-button-text-disabled',
+    'theme-color-components-primary-button-border',
+    'theme-color-components-secondary-button-background',
+    'theme-color-components-secondary-button-background-disabled',
+    'theme-color-components-secondary-button-text',
+    'theme-color-components-secondary-button-text-disabled',
+    'theme-color-components-secondary-button-border',
+    'theme-color-components-chat-background',
+    'theme-color-components-chat-text',
+    'theme-color-components-modal-header-background',
+    'theme-color-components-modal-header-text',
+    'theme-color-components-modal-content-background',
+    'theme-color-components-modal-content-text',
+    'theme-color-components-menu-background',
+    'theme-color-components-menu-item-text',
+    'theme-color-components-menu-item-bg',
+    'theme-color-components-menu-item-hover-bg',
+    'theme-color-components-menu-item-focus-bg',
+    'theme-color-components-form-field-background',
+    'theme-color-components-form-field-placeholder',
+    'theme-color-components-form-field-text',
+    'theme-color-components-form-field-border',
+  ]}
+/>
+
+## Default Palette
+
+These are the core colors for the default, out of the box, Owncast web application theme.
+They should not be overwritten, instead the theme variables should be overwritten.
+
+<ColorRow
+  colors={[
+    'color-owncast-palette-0',
+    'color-owncast-palette-1',
+    'color-owncast-palette-2',
+    'color-owncast-palette-3',
+    'color-owncast-palette-4',
+    'color-owncast-palette-5',
+    'color-owncast-palette-6',
+    'color-owncast-palette-7',
+    'color-owncast-palette-9',
+    'color-owncast-palette-10',
+    'color-owncast-palette-11',
+    'color-owncast-palette-12',
+    'color-owncast-palette-13',
+  ]}
+/>
 
 ## User Colors
 
 <ColorRow
   colors={[
-    'theme-user-colors-0',
-    'theme-user-colors-1',
-    'theme-user-colors-2',
-    'theme-user-colors-3',
-    'theme-user-colors-4',
-    'theme-user-colors-5',
-    'theme-user-colors-6',
-    'theme-user-colors-7',
+    'theme-color-users-0',
+    'theme-color-users-1',
+    'theme-color-users-2',
+    'theme-color-users-3',
+    'theme-color-users-4',
+    'theme-color-users-5',
+    'theme-color-users-6',
+    'theme-color-users-7',
   ]}
 />
diff --git a/web/style-definitions/tokens/color/antd-overrides.yaml b/web/style-definitions/tokens/color/antd-overrides.yaml
index 0d87272b3..b0b1dd5d1 100644
--- a/web/style-definitions/tokens/color/antd-overrides.yaml
+++ b/web/style-definitions/tokens/color/antd-overrides.yaml
@@ -2,23 +2,17 @@
 # You can find the variable names to override at:
 # https://github.com/ant-design/ant-design/blob/master/components/style/themes/dark.less
 
-text-color:
-  value: 'var(--theme-text-primary)'
-text-color-secondary:
-  value: 'var(--theme-text-secondary)'
 link-color:
-  value: 'var(--theme-text-link)'
-popover-background:
-  value: 'var(--theme-background-secondary)'
+  value: 'var(--theme-color-action)'
+link-hover-color:
+  value: 'var(--theme-color-action-hover)'
+modal-header-bg:
+  value: 'var(--theme-color-components-modal-header-background)'
 modal-content-bg:
-  value: '{color.unknown-2.value}'
-background-color-light:
-  value: 'var(--theme-background-secondary)'
-layout-body-background:
-  value: 'var(--theme-background-primary)'
-
-# These colors need to be explicitly set and cannot use CSS variables.
-component-background:
-  value: '{color.unknown.value}'
-warning-color:
-  value: '{color.unknown-2.value}'
+  value: 'var(--theme-color-background-main)'
+alert-error-bg-color:
+  value: 'var(--theme-color-palette-4)'
+alert-error-border-color:
+  value: 'var(--theme-color-palette-error)'
+popover-background:
+  value: 'var(--theme-color-components-menu-background)'
diff --git a/web/style-definitions/tokens/color/default-theme.yaml b/web/style-definitions/tokens/color/default-theme.yaml
index 12bf1a06e..4142419e3 100644
--- a/web/style-definitions/tokens/color/default-theme.yaml
+++ b/web/style-definitions/tokens/color/default-theme.yaml
@@ -4,51 +4,211 @@
 # The fewer there are the easier it'll be easier to customize and document.
 
 theme:
-  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:
-    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:
-    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.'
-
   rounded-corners:
-    value: '{rounded-corners.value}'
+    value: 0.5rem
+    comment: 'How much corners are rounded in places in the UI.'
+  unknown-1:
+    value: 'green'
+    comment: 'This should never be used and it means something is wrong.'
+  unknown-2:
+    value: 'red'
+    comment: 'This should never be used and it means something is wrong.'
+  color:
+    users:
+      comment: 'Colors used to display chat users.'
+      0:
+        value: 'var(--color-owncast-user-0)'
+      1:
+        value: 'var(--color-owncast-user-1)'
+      2:
+        value: 'var(--color-owncast-user-2)'
+      3:
+        value: 'var(--color-owncast-user-3)'
+      4:
+        value: 'var(--color-owncast-user-4)'
+      5:
+        value: 'var(--color-owncast-user-5)'
+      6:
+        value: 'var(--color-owncast-user-6)'
+      7:
+        value: 'var(--color-owncast-user-7)'
 
-  user-colors:
-    comment: 'Colors used to display chat users.'
-    0:
-      value: '{color.owncast.user.0.value}'
-    1:
-      value: '{color.owncast.user.1.value}'
-    2:
-      value: '{color.owncast.user.2.value}'
-    3:
-      value: '{color.owncast.user.3.value}'
-    4:
-      value: '{color.owncast.user.4.value}'
-    5:
-      value: '{color.owncast.user.5.value}'
-    6:
-      value: '{color.owncast.user.6.value}'
-    7:
-      value: '{color.owncast.user.7.value}'
+    palette:
+      comment: 'Colors used in the user interface for the default theme.'
+      0:
+        value: 'var(--color-owncast-palette-0)'
+        comment: '{color.owncast.palette.0.comment}'
+      1:
+        value: 'var(--color-owncast-palette-1)'
+        comment: '{color.owncast.palette.1.comment}'
+      2:
+        value: 'var(--color-owncast-palette-2)'
+        comment: '{color.owncast.palette.2.comment}'
+      3:
+        value: 'var(--color-owncast-palette-3)'
+        comment: '{color.owncast.palette.3.comment}'
+      4:
+        value: 'var(--color-owncast-palette-4)'
+        comment: '{color.owncast.palette.4.comment}'
+      5:
+        value: 'var(--color-owncast-palette-5)'
+        comment: '{color.owncast.palette.5.comment}'
+      6:
+        value: 'var(--color-owncast-palette-6)'
+        comment: '{color.owncast.palette.6.comment}'
+      7:
+        value: 'var(--color-owncast-palette-7)'
+        comment: '{color.owncast.palette.7.comment}'
+      8:
+        value: 'var(--color-owncast-palette-8)'
+        comment: '{color.owncast.palette.8.comment}'
+      9:
+        value: 'var(--color-owncast-palette-9)'
+        comment: '{color.owncast.palette.9.comment}'
+      10:
+        value: 'var(--color-owncast-palette-10)'
+        comment: '{color.owncast.palette.10.comment}'
+      11:
+        value: 'var(--color-owncast-palette-11)'
+        comment: '{color.owncast.palette.11.comment}'
+      12:
+        value: 'var(--color-owncast-palette-12)'
+        comment: '{color.owncast.palette.12.comment}'
+      13:
+        value: 'var(--color-owncast-palette-13)'
+        comment: '{color.owncast.palette.13.comment}'
+      error:
+        value: 'var(--color-owncast-palette-error)'
+        comment: '{color.owncast.palette.error.comment}'
+      warning:
+        value: 'var(--color-owncast-palette-warning)'
+        comment: '{color.owncast.palette.warning.comment}'
+
+    background:
+      main:
+        value: 'var(--theme-color-palette-3)'
+        comment: '{theme.color.palette.3.comment}'
+      header:
+        value: 'var(--theme-color-palette-0)'
+        comment: '{theme.color.palette.0.comment}'
+    action:
+      value: 'var(--theme-color-palette-6)'
+      comment: '{theme.color.palette.6.comment}'
+    action-hover:
+      value: 'var(--theme-color-palette-7)'
+      comment: '{theme.color.palette.7.comment}'
+    action-disabled:
+      value: 'var(--theme-color-palette-8)'
+      comment: '{theme.color.palette.8.comment}'
+
+    error:
+      value: 'var(--theme-color-palette-error)'
+      comment: '{theme.color.palette.error.comment}'
+    warning:
+      value: 'var(--theme-color-palette-warning)'
+      comment: '{theme.color.palette.warning.comment}'
+
+    components:
+      text-on-light:
+        value: 'var(--theme-color-palette-0)'
+        comment: '{theme.color.palette.0.comment}'
+      text-on-dark:
+        value: 'var(--theme-color-palette-3)'
+        comment: '{theme.color.palette.3.comment}'
+
+      primary-button:
+        background:
+          value: 'var(--theme-color-action)'
+          comment: '{theme.color.action.comment}'
+        background-disabled:
+          value: 'var(--theme-color-action-disabled)'
+          comment: '{theme.color.action-disabled.comment}'
+        text:
+          value: 'var(--theme-color-palette-4)'
+          comment: '{theme.color.palette.4.comment}'
+        text-disabled:
+          value: 'var(--theme-color-palette-10)'
+          comment: '{theme.color.palette.10.comment}'
+        border:
+          value: 'var(--theme-color-palette-4)'
+          comment: '{theme.color.palette.4.comment}'
+        border-disabled:
+          value: 'var(--theme-color-action-disabled)'
+          comment: '{theme.color.action-disabled.comment}'
+
+      secondary-button:
+        background:
+          value: 'var(--theme-color-palette-4)'
+          comment: '{theme.color.palette.4.comment}'
+        background-disabled:
+          value: 'transparent'
+        text:
+          value: 'var(--theme-color-action-disabled)'
+          comment: '{theme.color.action-disabled.comment}'
+        text-disabled:
+          value: 'var(--theme-color-action-disabled)'
+          comment: '{theme.color.action-disabled.comment}'
+        border:
+          value: 'var(--theme-color-action)'
+          comment: '{theme.color.action.comment}'
+        border-disabled:
+          value: 'var(--theme-color-action-disabled)'
+          comment: '{theme.color.action-disabled.comment}'
+
+      chat:
+        background:
+          value: 'var(--theme-color-palette-1)'
+          comment: '{theme.color.palette.1.comment}'
+        text:
+          value: 'var(--theme-color-palette-3)'
+          comment: '{theme.color.palette.3.comment}'
+
+      modal:
+        header:
+          background:
+            value: 'var(--theme-color-palette-1)'
+            comment: '{theme.color.palette.1.comment}'
+          text:
+            value: 'var(--theme-color-palette-3)'
+            comment: '{theme.color.palette.3.comment}'
+        content:
+          background:
+            value: 'var(--theme-color-palette-3)'
+            comment: '{theme.color.palette.3.comment}'
+          text:
+            value: 'var(--theme-color-palette-0)'
+            comment: '{theme.color.palette.0.comment}'
+
+      menu:
+        background:
+          value: 'var(--theme-color-palette-3)'
+          comment: '{theme.color.palette.3.comment}'
+        item:
+          text:
+            value: 'var(--theme-color-palette-0)'
+            comment: '{theme.color.palette.0.comment}'
+          bg:
+            value: 'transparent'
+          hover-bg:
+            value: 'rgba(0, 0, 0, 0.05)'
+          focus-bg:
+            value: 'rgba(0, 0, 0, 0.1)'
+
+      form-field:
+        background:
+          value: 'var(--theme-color-palette-4)'
+          comment: '{theme.color.palette.4.comment}'
+        placeholder:
+          value: 'var(--theme-color-action-disabled)'
+          comment: '{theme.color.action-disabled.comment}'
+        text:
+          value: 'var(--theme-color-palette-0)'
+          comment: '{theme.color.palette.0.comment}'
+        border:
+          value: 'var(--theme-color-palette-0)'
+          comment: '{theme.color.palette.0.comment}'
+
+      video:
+        background:
+          value: 'var(--theme-color-palette-2)'
+          comment: '{theme.color.palette.2.comment}'
diff --git a/web/style-definitions/tokens/color/owncast-admin.yaml b/web/style-definitions/tokens/color/owncast-admin.yaml
index a4ae95fe6..453bcd463 100644
--- a/web/style-definitions/tokens/color/owncast-admin.yaml
+++ b/web/style-definitions/tokens/color/owncast-admin.yaml
@@ -1,28 +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:
+#   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}'
+# 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 c1a353372..d58fe29b3 100644
--- a/web/style-definitions/tokens/color/owncast-colors.yaml
+++ b/web/style-definitions/tokens/color/owncast-colors.yaml
@@ -1,9 +1,12 @@
 # These are colors that make up the Owncast-specific color palette.
 color:
   unknown:
-    value: '#00FF00'
+    value: '#7a5cf3'
+
+  # this ends up being primary button text
   unknown-2:
-    value: '#FF0000'
+    value: '#fffffe'
+
   owncast:
     # These are the colors assigned to chat users.
     # If you add more colors here make sure to add them to
@@ -27,25 +30,55 @@ color:
       7:
         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'
+    palette:
+      0:
+        value: '#12161d'
+        comment: 'Dark primary'
+      1:
+        value: '#2D3748'
+        comment: 'Dark secondary'
+      2:
+        value: '#000000'
+        comment: 'Dark alternate'
+      3:
+        value: '#e2e8f0'
+        comment: 'Light primary'
+      4:
+        value: '#ffffff'
+        comment: 'Light secondary'
+      5:
+        value: '#c3dafe'
+        comment: 'Light alternate'
+      6:
+        value: '#7a5cf3'
+        comment: 'Text link/secondary light text'
+      7:
+        value: '#5d38f3'
+        comment: 'Text link hover'
+      8:
+        value: '#b6b3c6'
+        comment: 'Disabled background'
+      9:
+        value: '#39373d'
+        comment: 'Neutral dark'
+      10:
+        value: '#707283'
+        comment: 'Neutral gray light'
+      11:
+        value: '#2386e2'
+        comment: 'Fun color 1'
+      12:
+        value: '#da9eff'
+        comment: 'Fun color 2'
+      13:
+        value: '#42bea6'
+        comment: 'Fun color 3'
+      error:
+        value: '#ff4b39'
+        comment: 'Error'
+      warning:
+        value: '#ffc655'
+        comment: 'Warning'
 
 font:
   owncast:
diff --git a/web/styles/ant-overrides.scss b/web/styles/ant-overrides.scss
index adf0896f7..196b06f1c 100644
--- a/web/styles/ant-overrides.scss
+++ b/web/styles/ant-overrides.scss
@@ -4,36 +4,65 @@
 
 .ant-btn {
   height: 2rem;
-  padding: 0.3rem 1rem;
-  background-color: var(--theme-unknown);
+
   font-size: 0.85rem;
   font-weight: bold;
+  border-width: 2px;
   border-radius: var(--theme-rounded-corners);
-  border-color: transparent;
-  color: var(--theme-unknown-2);
+  color: var(--theme-color-components-primary-button-text);
+  border-color: var(--theme-color-action);
+
   &:hover,
   &:focus {
-    background-color: var(--theme-primary);
-    border-color: transparent;
-    color: var(--theme-unknown-2);
+    border-color: var(--theme-color-action-hover);
+    color: var(--theme-color-action-hover);
+    background-color: var(--theme-color-components-secondary-button-background);
   }
+
   &:focus {
-    border-color: var(--theme-unknown-2);
+    border-color: var(--theme-color-components-secondary-button-text);
   }
   &[ant-click-animating-without-extra-node]:after {
     animation: 0s !important;
   }
 }
+.ant-btn[disabled] {
+  background-color: var(--theme-color-components-secondary-button-background-disabled);
+  color: var(--theme-color-components-secondary-button-text-disabled);
+  border-color: var(--theme-color-components-secondary-button-border-disabled);
+  &:hover,
+  &:focus {
+    background-color: var(--theme-color-components-secondary-button-background-disabled);
+    color: var(--theme-color-components-secondary-button-text-disabled);
+    border-color: var(--theme-color-components-secondary-button-border-disabled);
+  }
+}
 
 .ant-btn-primary {
-  background-color: var(--theme-unknown);
+  background-color: var(--theme-color-components-primary-button-background);
+  color: var(--theme-color-components-primary-button-text);
+  border-color: var(--theme-color-components-primary-button-background);
+  &:hover {
+    background-color: var(--theme-color-action-hover);
+    color: var(--theme-color-components-primary-button-text);
+    border-color: var(--theme-color-action-hover);
+  }
+  &:focus {
+    background-color: var(--theme-color-action-hover);
+    color: var(--theme-color-components-primary-button-text);
+    border-color: var(--theme-color-components-primary-button-text);
+  }
 }
 
 .ant-btn-primary[disabled] {
-  background-color: var(--theme-unknown);
-  color: var(--theme-unknown-2);
-  &:hover {
-    background-color: var(--theme-unknown);
+  background-color: var(--theme-color-components-primary-button-background-disabled);
+  border-color: var(--theme-color-components-primary-button-border-disabled);
+  color: var(--theme-color-components-primary-button-text-disabled);
+  &:hover,
+  &:focus {
+    background-color: var(--theme-color-components-primary-button-background-disabled);
+    border-color: var(--theme-color-components-primary-button-border-disabled);
+    color: var(--theme-color-components-primary-button-text-disabled);
   }
 }
 
@@ -52,5 +81,68 @@
 
 .ant-dropdown-menu {
   border-radius: var(--theme-rounded-corners);
-  background-color: var(--theme-background-secondary);
+  background-color: var(--theme-color-components-menu-background);
+}
+.ant-dropdown-menu-item {
+  color: var(--theme-color-components-menu-item-text);
+  &:hover {
+    background-color: var(--theme-color-components-menu-item-hover-bg);
+  }
+  &:focus {
+    background-color: var(--theme-color-components-menu-item-focus-bg);
+  }
+}
+
+.ant-modal-header {
+  color: var(--theme-color-components-modal-header-text);
+}
+.ant-modal-title {
+  color: var(--theme-color-components-modal-header-text);
+}
+
+.ant-modal {
+  color: var(--theme-color-components-text-on-light);
+  h1 {
+    color: var(--theme-color-components-text-on-light);
+  }
+}
+
+.ant-input {
+  background-color: var(--theme-color-components-form-field-background);
+  color: var(--theme-color-components-form-field-text);
+  border-color: var(--theme-color-components-form-field-border);
+  &::placeholder {
+    color: var(--theme-color-components-form-field-placeholder);
+  }
+}
+
+.ant-alert-error {
+  .ant-alert-icon {
+    color: var(--theme-color-palette-error);
+  }
+  .ant-alert-message {
+    color: var(--theme-color-palette-error);
+  }
+}
+
+.ant-tabs-tab {
+  padding: var(--content-padding);
+  background-color: transparent;
+  border-radius: var(--theme-rounded-corners) var(--theme-rounded-corners) 0 0;
+  font-weight: bold;
+  & + .ant-tabs-tab {
+    margin-left: var(--module-spacing);
+  }
+  &.ant-tabs-tab-active {
+    background-color: var(--theme-color-palette-4);
+    .ant-tabs-tab-btn {
+      color: var(--theme-color-action);
+      &:hover {
+        color: var(--theme-color-action-hover);
+      }
+    }
+  }
+}
+.ant-tabs-ink-bar {
+  background-color: var(--theme-color-action);
 }
diff --git a/web/styles/globals.scss b/web/styles/globals.scss
index 49bc8cccd..7fd4bbce7 100644
--- a/web/styles/globals.scss
+++ b/web/styles/globals.scss
@@ -1,15 +1,26 @@
-@import '@fontsource/open-sans/variable.css';
+@import '@fontsource/open-sans/300.css';
+@import '@fontsource/open-sans/400.css';
+@import '@fontsource/open-sans/600.css';
+@import '@fontsource/open-sans/800.css';
 @import '@fontsource/poppins/400.css';
 @import '@fontsource/poppins/600.css';
 
+:root {
+  --content-padding: 12px;
+  --module-spacing: 12px; // margin size between lines of stuff, if needed
+}
+
+::selection {
+  background-color: var(--theme-color-palette-12);
+}
+
 body {
   font-family: var(--theme-text-body-font-family);
   font-size: 16px;
   line-height: 1.5em;
   margin: 0;
 
-  color: var(--theme-text-primary);
-  background-color: var(--theme-background-primary);
+  background-color: var(--theme-color-background-main);
 
   div,
   h1,
@@ -20,7 +31,6 @@ body {
   h6,
   p {
     padding: 0;
-    color: var(--theme-text-primary);
   }
 
   h1,
@@ -30,6 +40,7 @@ body {
   h5,
   h6 {
     font-family: var(--theme-text-display-font-family);
+    color: unset; // reset some colors from global.less file
   }
 
   h1 {
@@ -71,10 +82,10 @@ body {
   }
 
   a {
-    color: var(--theme-text-link);
+    color: var(--theme-color-action);
 
-    &:visited {
-      color: var(--theme-text-primary);
+    &:hover {
+      color: var(--theme-color-palette-12);
     }
   }
 
diff --git a/web/styles/theme.less b/web/styles/theme.less
index 20711a8d1..dba2c56e0 100644
--- a/web/styles/theme.less
+++ b/web/styles/theme.less
@@ -1,54 +1,85 @@
 
 // Do not edit directly
-// Generated on Tue, 16 Aug 2022 03:27:53 GMT
+// Generated on Tue, 30 Aug 2022 06:12:22 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-primary);
-@text-color-secondary: var(--theme-text-secondary);
-@link-color: var(--theme-text-link);
-@popover-background: var(--theme-background-secondary);
-@modal-content-bg: #ff0000;
-@background-color-light: var(--theme-background-secondary);
-@layout-body-background: var(--theme-background-primary);
-@component-background: #00ff00;
-@warning-color: #ff0000;
-@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-0: #f40b0b;
-@theme-user-colors-1: #f4800b;
-@theme-user-colors-2: #f4f40b;
-@theme-user-colors-3: #58f40b;
-@theme-user-colors-4: #0bf4f4;
-@theme-user-colors-5: #0ba6f4;
-@theme-user-colors-6: #6666ff;
-@theme-user-colors-7: #f40bf4;
-@owncast-purple: #00ff00;
+@link-color: var(--theme-color-action);
+@link-hover-color: var(--theme-color-action-hover);
+@modal-header-bg: var(--theme-color-components-modal-header-background);
+@modal-content-bg: var(--theme-color-background-main);
+@alert-error-bg-color: var(--theme-color-palette-4);
+@alert-error-border-color: var(--theme-color-palette-error);
+@popover-background: var(--theme-color-components-menu-background);
+@theme-rounded-corners: 0.5rem; // How much corners are rounded in places in the UI.
+@theme-unknown-1: green; // This should never be used and it means something is wrong.
+@theme-unknown-2: red; // This should never be used and it means something is wrong.
+@theme-color-users-0: var(--color-owncast-user-0);
+@theme-color-users-1: var(--color-owncast-user-1);
+@theme-color-users-2: var(--color-owncast-user-2);
+@theme-color-users-3: var(--color-owncast-user-3);
+@theme-color-users-4: var(--color-owncast-user-4);
+@theme-color-users-5: var(--color-owncast-user-5);
+@theme-color-users-6: var(--color-owncast-user-6);
+@theme-color-users-7: var(--color-owncast-user-7);
+@theme-color-palette-0: var(--color-owncast-palette-0); // Dark primary
+@theme-color-palette-1: var(--color-owncast-palette-1); // Dark secondary
+@theme-color-palette-2: var(--color-owncast-palette-2); // Dark alternate
+@theme-color-palette-3: var(--color-owncast-palette-3); // Light primary
+@theme-color-palette-4: var(--color-owncast-palette-4); // Light secondary
+@theme-color-palette-5: var(--color-owncast-palette-5); // Light alternate
+@theme-color-palette-6: var(--color-owncast-palette-6); // Text link/secondary light text
+@theme-color-palette-7: var(--color-owncast-palette-7); // Text link hover
+@theme-color-palette-8: var(--color-owncast-palette-8); // Disabled background
+@theme-color-palette-9: var(--color-owncast-palette-9); // Neutral dark
+@theme-color-palette-10: var(--color-owncast-palette-10); // Neutral gray light
+@theme-color-palette-11: var(--color-owncast-palette-11); // Fun color 1
+@theme-color-palette-12: var(--color-owncast-palette-12); // Fun color 2
+@theme-color-palette-13: var(--color-owncast-palette-13); // Fun color 3
+@theme-color-palette-error: var(--color-owncast-palette-error); // Error
+@theme-color-palette-warning: var(--color-owncast-palette-warning); // Warning
+@theme-color-background-main: var(--theme-color-palette-3); // Light primary
+@theme-color-background-header: var(--theme-color-palette-0); // Dark primary
+@theme-color-action: var(--theme-color-palette-6); // Text link/secondary light text
+@theme-color-action-hover: var(--theme-color-palette-7); // Text link hover
+@theme-color-action-disabled: var(--theme-color-palette-8); // Disabled background
+@theme-color-error: var(--theme-color-palette-error); // Error
+@theme-color-warning: var(--theme-color-palette-warning); // Warning
+@theme-color-components-text-on-light: var(--theme-color-palette-0); // Dark primary
+@theme-color-components-text-on-dark: var(--theme-color-palette-3); // Light primary
+@theme-color-components-primary-button-background: var(--theme-color-action); // Text link/secondary light text
+@theme-color-components-primary-button-background-disabled: var(--theme-color-action-disabled); // Disabled background
+@theme-color-components-primary-button-text: var(--theme-color-palette-4); // Light secondary
+@theme-color-components-primary-button-text-disabled: var(--theme-color-palette-10); // Neutral gray light
+@theme-color-components-primary-button-border: var(--theme-color-palette-4); // Light secondary
+@theme-color-components-primary-button-border-disabled: var(--theme-color-action-disabled); // Disabled background
+@theme-color-components-secondary-button-background: var(--theme-color-palette-4); // Light secondary
+@theme-color-components-secondary-button-background-disabled: transparent;
+@theme-color-components-secondary-button-text: var(--theme-color-action-disabled); // Disabled background
+@theme-color-components-secondary-button-text-disabled: var(--theme-color-action-disabled); // Disabled background
+@theme-color-components-secondary-button-border: var(--theme-color-action); // Text link/secondary light text
+@theme-color-components-secondary-button-border-disabled: var(--theme-color-action-disabled); // Disabled background
+@theme-color-components-chat-background: var(--theme-color-palette-1); // Dark secondary
+@theme-color-components-chat-text: var(--theme-color-palette-3); // Light primary
+@theme-color-components-modal-header-background: var(--theme-color-palette-1); // Dark secondary
+@theme-color-components-modal-header-text: var(--theme-color-palette-3); // Light primary
+@theme-color-components-modal-content-background: var(--theme-color-palette-3); // Light primary
+@theme-color-components-modal-content-text: var(--theme-color-palette-0); // Dark primary
+@theme-color-components-menu-background: var(--theme-color-palette-3); // Light primary
+@theme-color-components-menu-item-text: var(--theme-color-palette-0); // Dark primary
+@theme-color-components-menu-item-bg: transparent;
+@theme-color-components-menu-item-hover-bg: rgba(0, 0, 0, 0.05);
+@theme-color-components-menu-item-focus-bg: rgba(0, 0, 0, 0.1);
+@theme-color-components-form-field-background: var(--theme-color-palette-4); // Light secondary
+@theme-color-components-form-field-placeholder: var(--theme-color-action-disabled); // Disabled background
+@theme-color-components-form-field-text: var(--theme-color-palette-0); // Dark primary
+@theme-color-components-form-field-border: var(--theme-color-palette-0); // Dark primary
+@theme-color-components-video-background: var(--theme-color-palette-2); // Dark alternate
 @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-unknown: #7a5cf3;
+@color-unknown-2: #fffffe;
 @color-owncast-user-0: #f40b0b;
 @color-owncast-user-1: #f4800b;
 @color-owncast-user-2: #f4f40b;
@@ -57,13 +88,21 @@
 @color-owncast-user-5: #0ba6f4;
 @color-owncast-user-6: #6666ff;
 @color-owncast-user-7: #f40bf4;
-@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;
+@color-owncast-palette-0: #12161d; // Dark primary
+@color-owncast-palette-1: #2d3748; // Dark secondary
+@color-owncast-palette-2: #000000; // Dark alternate
+@color-owncast-palette-3: #e2e8f0; // Light primary
+@color-owncast-palette-4: #ffffff; // Light secondary
+@color-owncast-palette-5: #c3dafe; // Light alternate
+@color-owncast-palette-6: #7a5cf3; // Text link/secondary light text
+@color-owncast-palette-7: #5d38f3; // Text link hover
+@color-owncast-palette-8: #b6b3c6; // Disabled background
+@color-owncast-palette-9: #39373d; // Neutral dark
+@color-owncast-palette-10: #707283; // Neutral gray light
+@color-owncast-palette-11: #2386e2; // Fun color 1
+@color-owncast-palette-12: #da9eff; // Fun color 2
+@color-owncast-palette-13: #42bea6; // Fun color 3
+@color-owncast-palette-error: #ff4b39; // Error
+@color-owncast-palette-warning: #ffc655; // Warning
 @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 3ed4bff25..3f0ca5565 100644
--- a/web/styles/variables.css
+++ b/web/styles/variables.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 16 Aug 2022 03:27:53 GMT
+ * Generated on Tue, 30 Aug 2022 06:12:22 GMT
  * 
  * How to edit these values:
  * Edit the corresponding token file under the style-definitions directory
@@ -8,53 +8,108 @@
  */
 
 :root {
-  --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);
-  --modal-content-bg: #ff0000;
-  --background-color-light: var(--theme-background-secondary);
-  --layout-body-background: var(--theme-background-primary);
-  --component-background: #00ff00;
-  --warning-color: #ff0000;
-  --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-0: #f40b0b;
-  --theme-user-colors-1: #f4800b;
-  --theme-user-colors-2: #f4f40b;
-  --theme-user-colors-3: #58f40b;
-  --theme-user-colors-4: #0bf4f4;
-  --theme-user-colors-5: #0ba6f4;
-  --theme-user-colors-6: #6666ff;
-  --theme-user-colors-7: #f40bf4;
-  --owncast-purple: #00ff00;
+  --link-color: var(--theme-color-action);
+  --link-hover-color: var(--theme-color-action-hover);
+  --modal-header-bg: var(--theme-color-components-modal-header-background);
+  --modal-content-bg: var(--theme-color-background-main);
+  --alert-error-bg-color: var(--theme-color-palette-4);
+  --alert-error-border-color: var(--theme-color-palette-error);
+  --popover-background: var(--theme-color-components-menu-background);
+  --theme-rounded-corners: 0.5rem; /* How much corners are rounded in places in the UI. */
+  --theme-unknown-1: green; /* This should never be used and it means something is wrong. */
+  --theme-unknown-2: red; /* This should never be used and it means something is wrong. */
+  --theme-color-users-0: var(--color-owncast-user-0);
+  --theme-color-users-1: var(--color-owncast-user-1);
+  --theme-color-users-2: var(--color-owncast-user-2);
+  --theme-color-users-3: var(--color-owncast-user-3);
+  --theme-color-users-4: var(--color-owncast-user-4);
+  --theme-color-users-5: var(--color-owncast-user-5);
+  --theme-color-users-6: var(--color-owncast-user-6);
+  --theme-color-users-7: var(--color-owncast-user-7);
+  --theme-color-palette-0: var(--color-owncast-palette-0); /* Dark primary */
+  --theme-color-palette-1: var(--color-owncast-palette-1); /* Dark secondary */
+  --theme-color-palette-2: var(--color-owncast-palette-2); /* Dark alternate */
+  --theme-color-palette-3: var(--color-owncast-palette-3); /* Light primary */
+  --theme-color-palette-4: var(--color-owncast-palette-4); /* Light secondary */
+  --theme-color-palette-5: var(--color-owncast-palette-5); /* Light alternate */
+  --theme-color-palette-6: var(--color-owncast-palette-6); /* Text link/secondary light text */
+  --theme-color-palette-7: var(--color-owncast-palette-7); /* Text link hover */
+  --theme-color-palette-8: var(--color-owncast-palette-8); /* Disabled background */
+  --theme-color-palette-9: var(--color-owncast-palette-9); /* Neutral dark */
+  --theme-color-palette-10: var(--color-owncast-palette-10); /* Neutral gray light */
+  --theme-color-palette-11: var(--color-owncast-palette-11); /* Fun color 1 */
+  --theme-color-palette-12: var(--color-owncast-palette-12); /* Fun color 2 */
+  --theme-color-palette-13: var(--color-owncast-palette-13); /* Fun color 3 */
+  --theme-color-palette-error: var(--color-owncast-palette-error); /* Error */
+  --theme-color-palette-warning: var(--color-owncast-palette-warning); /* Warning */
+  --theme-color-background-main: var(--theme-color-palette-3); /* Light primary */
+  --theme-color-background-header: var(--theme-color-palette-0); /* Dark primary */
+  --theme-color-action: var(--theme-color-palette-6); /* Text link/secondary light text */
+  --theme-color-action-hover: var(--theme-color-palette-7); /* Text link hover */
+  --theme-color-action-disabled: var(--theme-color-palette-8); /* Disabled background */
+  --theme-color-error: var(--theme-color-palette-error); /* Error */
+  --theme-color-warning: var(--theme-color-palette-warning); /* Warning */
+  --theme-color-components-text-on-light: var(--theme-color-palette-0); /* Dark primary */
+  --theme-color-components-text-on-dark: var(--theme-color-palette-3); /* Light primary */
+  --theme-color-components-primary-button-background: var(
+    --theme-color-action
+  ); /* Text link/secondary light text */
+  --theme-color-components-primary-button-background-disabled: var(
+    --theme-color-action-disabled
+  ); /* Disabled background */
+  --theme-color-components-primary-button-text: var(--theme-color-palette-4); /* Light secondary */
+  --theme-color-components-primary-button-text-disabled: var(
+    --theme-color-palette-10
+  ); /* Neutral gray light */
+  --theme-color-components-primary-button-border: var(
+    --theme-color-palette-4
+  ); /* Light secondary */
+  --theme-color-components-primary-button-border-disabled: var(
+    --theme-color-action-disabled
+  ); /* Disabled background */
+  --theme-color-components-secondary-button-background: var(
+    --theme-color-palette-4
+  ); /* Light secondary */
+  --theme-color-components-secondary-button-background-disabled: transparent;
+  --theme-color-components-secondary-button-text: var(
+    --theme-color-action-disabled
+  ); /* Disabled background */
+  --theme-color-components-secondary-button-text-disabled: var(
+    --theme-color-action-disabled
+  ); /* Disabled background */
+  --theme-color-components-secondary-button-border: var(
+    --theme-color-action
+  ); /* Text link/secondary light text */
+  --theme-color-components-secondary-button-border-disabled: var(
+    --theme-color-action-disabled
+  ); /* Disabled background */
+  --theme-color-components-chat-background: var(--theme-color-palette-1); /* Dark secondary */
+  --theme-color-components-chat-text: var(--theme-color-palette-3); /* Light primary */
+  --theme-color-components-modal-header-background: var(
+    --theme-color-palette-1
+  ); /* Dark secondary */
+  --theme-color-components-modal-header-text: var(--theme-color-palette-3); /* Light primary */
+  --theme-color-components-modal-content-background: var(
+    --theme-color-palette-3
+  ); /* Light primary */
+  --theme-color-components-modal-content-text: var(--theme-color-palette-0); /* Dark primary */
+  --theme-color-components-menu-background: var(--theme-color-palette-3); /* Light primary */
+  --theme-color-components-menu-item-text: var(--theme-color-palette-0); /* Dark primary */
+  --theme-color-components-menu-item-bg: transparent;
+  --theme-color-components-menu-item-hover-bg: rgba(0, 0, 0, 0.05);
+  --theme-color-components-menu-item-focus-bg: rgba(0, 0, 0, 0.1);
+  --theme-color-components-form-field-background: var(
+    --theme-color-palette-4
+  ); /* Light secondary */
+  --theme-color-components-form-field-placeholder: var(
+    --theme-color-action-disabled
+  ); /* Disabled background */
+  --theme-color-components-form-field-text: var(--theme-color-palette-0); /* Dark primary */
+  --theme-color-components-form-field-border: var(--theme-color-palette-0); /* Dark primary */
+  --theme-color-components-video-background: var(--theme-color-palette-2); /* Dark alternate */
   --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-unknown: #7a5cf3;
+  --color-unknown-2: #fffffe;
   --color-owncast-user-0: #f40b0b;
   --color-owncast-user-1: #f4800b;
   --color-owncast-user-2: #f4f40b;
@@ -63,14 +118,22 @@
   --color-owncast-user-5: #0ba6f4;
   --color-owncast-user-6: #6666ff;
   --color-owncast-user-7: #f40bf4;
-  --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;
+  --color-owncast-palette-0: #12161d; /* Dark primary */
+  --color-owncast-palette-1: #2d3748; /* Dark secondary */
+  --color-owncast-palette-2: #000000; /* Dark alternate */
+  --color-owncast-palette-3: #e2e8f0; /* Light primary */
+  --color-owncast-palette-4: #ffffff; /* Light secondary */
+  --color-owncast-palette-5: #c3dafe; /* Light alternate */
+  --color-owncast-palette-6: #7a5cf3; /* Text link/secondary light text */
+  --color-owncast-palette-7: #5d38f3; /* Text link hover */
+  --color-owncast-palette-8: #b6b3c6; /* Disabled background */
+  --color-owncast-palette-9: #39373d; /* Neutral dark */
+  --color-owncast-palette-10: #707283; /* Neutral gray light */
+  --color-owncast-palette-11: #2386e2; /* Fun color 1 */
+  --color-owncast-palette-12: #da9eff; /* Fun color 2 */
+  --color-owncast-palette-13: #42bea6; /* Fun color 3 */
+  --color-owncast-palette-error: #ff4b39; /* Error */
+  --color-owncast-palette-warning: #ffc655; /* Warning */
   --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';
diff --git a/web/styles/variables.scss b/web/styles/variables.scss
index a39d3164a..0dd6dc1b0 100644
--- a/web/styles/variables.scss
+++ b/web/styles/variables.scss
@@ -1,5 +1,5 @@
-@import "@fontsource/open-sans";
-@import "@fontsource/poppins";
+@import '@fontsource/open-sans';
+@import '@fontsource/poppins';
 
 // See theme.less for specific Ant Design overrides.
 :root {
@@ -75,21 +75,7 @@
   --container-bg-color-alt: var(--purple-dark);
   --container-border-radius: 4px;
 
-  --code-color: #9cdcfe;
-  --code-bg-color: var(--owncast-purple-25);
-
   --nav-bg-color: var(--gray-dark);
-  --nav-text: #aaa;
-  --nav-selected-text: var(--pink); //#cd7cff;
-
-  --button-focused: var(--owncast-purple-50);
 
   --textfield-border: var(--white-25);
-  --textfield-bg: var(--black);
-
-  //
-  --popover-base-color: var(--gray);
-  --tooltip-base-color: var(--gray-medium);
-
-  --font-family: var(--theme-font-family);
 }