Use some style values so it looks like this page is making progress

web/style-definitions/tokens/color/antd-overrides.yaml

@@ -11,7 +11,7 @@ link-color:
 popover-background:
   value: "var(--theme-background)"
 background-color-light:
-  value: "{color.owncast.purple.100.value}"
+  value: "var(--theme-background-secondary)"
 
 # These values require explicit colors and cannot take css variables.
 primary-color: 

web/style-definitions/tokens/color/default-theme.yaml

@@ -1,16 +1,31 @@
 # These are the variables used in the user interface.
 # They can be overwritten to customize the look and feel.
 # We should write some documentation on how to do that when the time comes.
+# The fewer there are the better as it'll be easier to customize and document.
 
 theme:
   primary-color:
     value: "{color.owncast.purple.500.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}"
+  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: "5px"
+    comment: "The radius of rounded corners."
+
   success-color:
     value: "{color.owncast.green.500.value}"
   info-color:
@@ -18,9 +33,4 @@ theme:
   warning-color:
     value: "{color.owncast.orange.500.value}"
   error-color:
-    value: "{color.owncast.red.500.value}"
-  font-family:
-    value: "{font.owncast.family.value}"
-  background:
-    value: "{color.owncast.background.value}"
-  
+    value: "{color.owncast.red.500.value}"

web/style-definitions/tokens/color/owncast-colors.yaml

@@ -70,22 +70,22 @@ color:
       blue:
         value: "rgba(32, 134, 225, 1)"
 
-    background-light:
-      value: "rgba(27, 26, 38, 1)"
     background:
-      value: "rgba(23, 21, 35, 1)"
+      value: "rgba(27, 26, 38, 1)"
+    background-secondary:
+      value: "rgba(22, 21, 31, 1)"
       
 font:
   owncast:      
     family:
       value: "'Inter', 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';"
+        '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: "{color.owncast.logo.purple.value}"
 owncast-purple-25: 
   value: "rgba(120, 113, 255, 0.25)"
 owncast-purple-50:
@@ -95,18 +95,18 @@ online-color:
 offline-color:
   value: "#999"
 pink:
-  value: "{color.owncast.logo.pink}"
+  value: "{color.owncast.logo.pink.value}"
 purple:
-  value: "{color.owncast.logo.purple}"
+  value: "{color.owncast.purple.500.value}"
 blue:
-  value: "{color.owncast.logo.blue}"
+  value: "{color.owncast.logo.blue.value}"
 white-88:
-  value: "{color.owncast.gray.500}"
+  value: "{color.owncast.gray.500.value}"
 purple-dark:
-  value: "rgba(28, 26, 59, 1)"
+  value: "{color.owncast.purple.900.value}"
 default-link-color:
-  value: "{color.owncast.logo.pink}"
+  value: "{color.owncast.purple.700.value}"
 default-bg-color:
-  value: "black"
+  value: "{color.owncast.background.value}"
 default-text-color:
-  value: "rgba(255, 255, 255, 0.88)"
+  value: "{color.owncast.gray.100.value}"