From caa0bb608d0076e6e6c2bc1cb1765767648e7116 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Tue, 31 Jan 2023 21:22:45 -0800
Subject: [PATCH] Remove references to variables.scss and replace colors

---
 web/public/styles/admin/chat.css              | 24 +++---
 .../styles/admin/config-edit-string-tags.css  |  7 +-
 .../styles/admin/config-public-details.css    |  6 +-
 .../styles/admin/config-socialhandles.css     |  1 -
 .../styles/admin/config-video-variants.css    |  8 +-
 .../styles/admin/form-misc-elements.css       |  8 +-
 web/public/styles/admin/home.css              | 21 +++--
 web/public/styles/admin/main-layout.css       | 16 ++--
 web/styles/variables.scss                     | 81 -------------------
 9 files changed, 49 insertions(+), 123 deletions(-)
 delete mode 100644 web/styles/variables.scss

diff --git a/web/public/styles/admin/chat.css b/web/public/styles/admin/chat.css
index 93ffe6ca3..ef78c8ddf 100644
--- a/web/public/styles/admin/chat.css
+++ b/web/public/styles/admin/chat.css
@@ -21,19 +21,17 @@
 .chat-messages .bulk-editor {
   margin: 0.5rem 0;
   padding: 0.5rem;
-  border: 1px solid var(--textfield-border);
+  border: 1px solid var(--theme-color-palette-8);
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
   border-radius: 4px;
 }
-.chat-messages .bulk-editor.active .label {
-  color: var(--black-3);
-}
+
 .chat-messages .bulk-editor .label {
   font-size: 0.75rem;
-  color: var(--white-50);
+  color: var(--theme-color-palette-10);
   margin-right: 0.5rem;
 }
 .chat-messages .bulk-editor button {
@@ -67,7 +65,7 @@
   opacity: 1;
 }
 .toggle-switch .ant-btn-text:hover {
-  background-color: var(--black-35);
+  background-color: var(--theme-color-palette-10);
 }
 .blockuser-popover {
   max-width: 400px;
@@ -82,14 +80,14 @@
   outline: none;
 }
 .user-item-container .display-name {
-  color: var(--white);
-  border-bottom: 1px dotted var(--white-50);
+  color: var(--theme-color-palette-4);
+  border-bottom: 1px dotted var(--theme-color-palette-10);
 }
 .user-item-container:hover .display-name {
-  border-color: var(--white);
+  border-color: var(--theme-color-palette-4);
 }
 .user-details h5 {
-  color: var(--white);
+  color: var(--theme-color-palette-4);
 }
 .user-details .created-at {
   font-size: 0.75em;
@@ -110,11 +108,9 @@
 .user-details .previous-names-list .latest .user-name-item {
   font-weight: bold;
   font-style: normal;
-  color: var(--pink);
-}
-.user-details .ant-divider {
-  border-color: var(--white-25);
+  color: var(--theme-color-palette-12);
 }
+
 .block-user-button {
   text-transform: capitalize;
 }
diff --git a/web/public/styles/admin/config-edit-string-tags.css b/web/public/styles/admin/config-edit-string-tags.css
index 6240b5034..ff7fd5401 100644
--- a/web/public/styles/admin/config-edit-string-tags.css
+++ b/web/public/styles/admin/config-edit-string-tags.css
@@ -12,13 +12,12 @@
   margin-left: 0.3rem;
   padding: 2px;
   border-radius: 5rem;
-  color: var(--black);
-  border: 1px solid var(--black);
+  border: 1px solid black;
   transition-duration: var(--ant-transition-duration);
 }
 .edit-current-strings .ant-tag .ant-tag-close-icon:hover {
-  border-color: var(--owncast-purple);
-  background-color: var(--white);
+  border-color: var(--theme-color-palette-6);
+  background-color: var(--theme-color-palette-4);
 }
 .edit-current-strings .ant-tag .ant-tag-close-icon:hover svg {
   fill: black;
diff --git a/web/public/styles/admin/config-public-details.css b/web/public/styles/admin/config-public-details.css
index c3f64e0cd..c057f334e 100644
--- a/web/public/styles/admin/config-public-details.css
+++ b/web/public/styles/admin/config-public-details.css
@@ -41,13 +41,13 @@
   width: 100%;
 }
 .config-public-details-page .social-items-container {
-  background-color: var(--container-bg-color-alt);
+  background-color: var(--theme-color-palette-5);
   padding: 0 0.75em;
   margin-left: 1em;
   max-width: 450px;
 }
 .config-public-details-page .social-items-container .form-module {
-  background-color: var(--black);
+  background-color: var(--theme-color-palette-10);
 }
 .config-public-details-page .social-items-container .social-handles-container {
   min-width: 350px;
@@ -78,5 +78,5 @@
   max-width: 256px;
   margin-right: 1em;
   display: inline-block;
-  border: 1px solid var(--white-25);
+  border: 1px solid var(--theme-color-palette-5);
 }
diff --git a/web/public/styles/admin/config-socialhandles.css b/web/public/styles/admin/config-socialhandles.css
index 54a4f50cc..3e75061dc 100644
--- a/web/public/styles/admin/config-socialhandles.css
+++ b/web/public/styles/admin/config-socialhandles.css
@@ -31,7 +31,6 @@
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-  color: var(--white-75);
 }
 .social-links-edit-container .social-handles-table .social-handle-cell .option-icon {
   height: 2em;
diff --git a/web/public/styles/admin/config-video-variants.css b/web/public/styles/admin/config-video-variants.css
index a097a738f..f1fc50eb6 100644
--- a/web/public/styles/admin/config-video-variants.css
+++ b/web/public/styles/admin/config-video-variants.css
@@ -10,10 +10,10 @@
 .config-variant-form .passthrough-warning {
   text-align: center;
   padding: 1em;
-  color: var(--ant-warning);
+  color: var(--theme-color-palette-error);
   font-size: 0.88em;
   font-weight: 500;
-  background-color: var(--black-50);
+  background-color: var(--theme-color-palette-10);
   border-radius: var(--theme-rounded-corners);
 }
 .config-variant-form .cpu-usage-container,
@@ -43,9 +43,7 @@
 .read-more-subtext {
   font-size: 0.8rem;
 }
-.codec-module .ant-collapse-content-active {
-  background-color: var(--white-15);
-}
+
 .video-text-field-container {
   margin-left: 12px;
   margin-bottom: 30px;
diff --git a/web/public/styles/admin/form-misc-elements.css b/web/public/styles/admin/form-misc-elements.css
index 21c6c84f6..ce220b9af 100644
--- a/web/public/styles/admin/form-misc-elements.css
+++ b/web/public/styles/admin/form-misc-elements.css
@@ -23,7 +23,7 @@
 }
 .field-tip {
   font-size: 0.8em;
-  color: var(--white-50);
+  color: var(--theme-color-palette-10);
 }
 .field-container {
   padding: 0.85em 0 0.5em;
@@ -33,7 +33,7 @@
   margin: auto;
   padding: 1em 2em 0.75em;
   background-color: var(--color-owncast-palette-7);
-  border-radius: var(--container-border-radius);
+  border-radius: var(--theme-rounded-corners);
 }
 .segment-slider-container .status-container {
   width: 100%;
@@ -46,10 +46,10 @@
   text-align: center;
   font-size: 0.75em;
   line-height: normal;
-  color: var(--white);
+  color: var(--theme-color-palette-4);
   padding: 1em;
   border-radius: var(--theme-rounded-corners);
-  background-color: var(--black-35);
+  background-color: var(--theme-color-palette-error);
 }
 .segment-tip {
   width: 10em;
diff --git a/web/public/styles/admin/home.css b/web/public/styles/admin/home.css
index ecd139781..1eef0755e 100644
--- a/web/public/styles/admin/home.css
+++ b/web/public/styles/admin/home.css
@@ -2,7 +2,7 @@
   margin-bottom: 1em;
 }
 .home-container .online-status-section .online-details-card {
-  border-color: var(--online-color);
+  border-color: var(--theme-color-palette-6);
 }
 .home-container .stream-details-item-container {
   margin: 1em 0;
@@ -17,8 +17,8 @@
   margin-bottom: 1em;
 }
 .offline-content .list-section {
-  background-color: var(--container-bg-color-alt);
-  border-radius: var(--container-border-radius);
+  /* background-color: var(--theme-color-palette-3); */
+  border-radius: var(--theme-rounded-corners);
   padding: 1em;
 }
 .offline-content .list-section > .ant-card {
@@ -38,17 +38,18 @@
 .news-feed {
   margin-top: 0;
   padding: 1.5em;
+	border: 1px solid var(--theme-color-palette-15);
 }
 .news-feed h2 {
   font-size: 1.2em;
   margin-top: 0;
-  color: var(--pink);
+  color: var(--theme-color-palette-11);
 }
 .news-feed article {
   padding: 1em 0.25em;
   font-size: 0.9rem;
   color: var(--white-75);
-  border-bottom: 1px solid var(--gray);
+  border-bottom: 1px solid var(--theme-color-palette-10);
 }
 .news-feed article h3 {
   font-size: 1.2em;
@@ -60,5 +61,13 @@
 .news-feed article .timestamp {
   margin-top: 0;
   font-size: 0.75em;
-  color: var(--white-50);
+}
+
+.ant-collapse > .ant-collapse-item:last-child, .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
+	background-color: var(--theme-color-palette-5);
+}
+
+.ant-card-body {
+	/* background-color: var(--theme-color-palette-5); */
+	border: 1px solid var(--theme-color-palette-15);
 }
diff --git a/web/public/styles/admin/main-layout.css b/web/public/styles/admin/main-layout.css
index f7f1c007d..7aaef915b 100644
--- a/web/public/styles/admin/main-layout.css
+++ b/web/public/styles/admin/main-layout.css
@@ -5,11 +5,12 @@
   height: 100vh;
   overflow: auto;
   z-index: 10;
-  background-color: var(--theme-color-background-main);
+  background-color: var(--theme-color-palette-1);
 }
 .app-container .menu-container {
   border-color: transparent;
 	background-color: unset;
+	color: var(--theme-color-components-text-on-dark);
 }
 .app-container h1.owncast-title {
   padding: 1rem;
@@ -20,7 +21,7 @@
   align-items: center;
 }
 .app-container h1.owncast-title .logo-container {
-  background-color: var(--white);
+  background-color: var(--theme-color-palette-4);
   padding-top: 4px;
   padding-right: 6px;
   padding-left: 6px;
@@ -29,7 +30,7 @@
 .app-container h1.owncast-title .title-label {
   display: inline-block;
   margin-left: 1rem;
-  color: var(--white);
+  color: var(--theme-color-palette-4);
   font-size: 1.15rem;
   font-weight: 200;
   text-transform: uppercase;
@@ -45,9 +46,10 @@
   justify-content: flex-end;
   padding-right: 1rem;
   padding-left: 1rem;
-  background-color: var(--nav-bg-color);
+	background-color: var(--theme-color-background-main);
 }
 .app-container .main-content-container {
+	background-color: var(--theme-color-palette-3);
   padding: 2em 3em 3em;
   min-width: 50vw;
 }
@@ -64,7 +66,7 @@
   width: 12.5rem;
 }
 .app-container .online-status-indicator .status-label {
-  color: var(--white);
+  color: var(--theme-color-palette-4);
   text-transform: uppercase;
   font-size: 0.75rem;
   display: inline-block;
@@ -135,3 +137,7 @@
 .ant-select:not(.ant-select-customize-input) .ant-select-selector {
   background-color: var(--theme-color-components-form-field-background);
 }
+
+.ant-menu-item a, .ant-menu-submenu-expand-icon, .ant-menu-submenu-arrow {
+	color: unset;
+}
diff --git a/web/styles/variables.scss b/web/styles/variables.scss
deleted file mode 100644
index 0dd6dc1b0..000000000
--- a/web/styles/variables.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-@import '@fontsource/open-sans';
-@import '@fontsource/poppins';
-
-// See theme.less for specific Ant Design overrides.
-:root {
-  // old colors
-  --white: rgba(255, 255, 255, 1);
-  --white-15: rgba(255, 255, 255, 0.15);
-  --white-25: rgba(255, 255, 255, 0.25);
-  --white-35: rgba(255, 255, 255, 0.35);
-  --white-50: rgba(255, 255, 255, 0.5);
-  --white-75: rgba(255, 255, 255, 0.75);
-  --white-88: rgba(255, 255, 255, 0.88);
-
-  --black: rgba(0, 0, 0, 1);
-  --black-35: rgba(0, 0, 0, 0.35);
-  --black-50: rgba(0, 0, 0, 0.5);
-  --black-75: rgba(0, 0, 0, 0.75);
-
-  // New colors
-  --purple-100: #f4ebff;
-  --purple-300: #d6bbfb;
-  --purple-500: #9e77ed;
-  --purple-700: #6941c6;
-  --purple-900: #42307d;
-
-  --green-100: #d15ad5;
-  --green-300: #6ce9a6;
-  --green-500: #12b76a;
-  --green-700: #027a48;
-  --green-900: #054f31;
-
-  --red-100: #fee4e2;
-  --red-300: #fda29b;
-  --red-500: #f04438;
-  --red-700: #b42318;
-  --red-900: #7a271a;
-
-  --orange-100: #fef0c7;
-  --orange-300: #fec84b;
-  --orange-500: #f79009;
-  --orange-700: #b54708;
-  --orange-900: #93370d;
-
-  --gray-100: #f2f4f7;
-  --gray-300: #d0d5dd;
-  --gray-500: #667085;
-  --gray-700: #344054;
-  --gray-900: #101828;
-
-  // owncast logo color family
-  --owncast-purple: rgba(120, 113, 255, 1);
-  --purple-dark: rgba(28, 26, 59, 1); // #1c1a3b;
-  --pink: rgba(201, 139, 254, 1); // #D18BFE;
-  --blue: rgba(32, 134, 225, 1); // #2086E1;
-
-  // owncast purple variations
-  --owncast-purple-25: rgba(120, 113, 255, 0.25);
-  --owncast-purple-50: rgba(120, 113, 255, 0.5);
-
-  --gray-light: rgba(168, 175, 197, 1);
-  --gray-medium: rgba(102, 107, 120, 1);
-  --gray: rgba(51, 53, 60, 1);
-  --gray-dark: rgba(23, 24, 27, 1); // #17181b;
-
-  --online-color: #73dd3f;
-  --offline-color: #999;
-
-  // ////////////////////////////////
-  --default-text-color: var(--white-88);
-  --default-bg-color: var(--black);
-  --default-link-color: var(--owncast-purple);
-
-  --container-bg-color: var(--gray-dark);
-  --container-bg-color-alt: var(--purple-dark);
-  --container-border-radius: 4px;
-
-  --nav-bg-color: var(--gray-dark);
-
-  --textfield-border: var(--white-25);
-}