Add style-dictionary definitions

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

@@ -0,0 +1,34 @@
+# Ant Design component color overrides.
+# 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-color)"
+text-color-secondry:
+  value: "var(--theme-text-color-secondary)"
+link-color:
+  value: "var(--theme-link-color)"
+popover-background:
+  value: "var(--theme-background)"
+background-color-light:
+  value: "{color.owncast.purple.100.value}"
+
+# These values require explicit colors and cannot take css variables.
+primary-color: 
+  value: "{color.owncast.purple.500.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}"

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

@@ -0,0 +1,26 @@
+# 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.
+
+theme:
+  primary-color:
+    value: "{color.owncast.purple.500.value}"
+  text-color:
+    value: "{color.owncast.gray.300.value}"
+  text-color-secondary:
+    value: "{color.owncast.gray.500.value}"
+  link-color:
+    value: "{color.owncast.purple.500.value}"
+  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}"
+  font-family:
+    value: "{font.owncast.family.value}"
+  background:
+    value: "{color.owncast.background.value}"
+  

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

@@ -0,0 +1,112 @@
+# These are colors that make up the Owncast-specific color palette.
+color:
+  # The Owncast color definitions.
+  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-light:
+      value: "rgba(27, 26, 38, 1)"
+    background:
+      value: "rgba(23, 21, 35, 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';"
+
+# Values used in the admin and should be migrated to variables or removed.
+# See ant-overrides.scss.
+owncast-purple:
+  value: "{color.owncast.logo.purple}"
+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}"
+purple:
+  value: "{color.owncast.logo.purple}"
+blue:
+  value: "{color.owncast.logo.blue}"
+white-88:
+  value: "{color.owncast.gray.500}"
+purple-dark:
+  value: "rgba(28, 26, 59, 1)"
+default-link-color:
+  value: "{color.owncast.logo.pink}"
+default-bg-color:
+  value: "black"
+default-text-color:
+  value: "rgba(255, 255, 255, 0.88)"