Use a numbered pre-named set of user colors instead of random. Closes #1974

web/style-definitions/config.js

@@ -1,5 +1,17 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 const yaml = require('yaml');
+const StyleDictionary = require('style-dictionary');
+
+StyleDictionary.registerFileHeader({
+  name: 'myCustomHeader',
+  fileHeader: defaultMessage => [
+    ...defaultMessage,
+    ``,
+    `How to edit these values:`,
+    `Edit the corresponding token file under the style-definitions directory`,
+    `in the Owncast web project.`,
+  ],
+});
 
 module.exports = {
   parsers: [
@@ -24,6 +36,9 @@ module.exports = {
         {
           destination: 'variables.css',
           format: 'css/variables',
+          options: {
+            fileHeader: 'myCustomHeader',
+          },
         },
       ],
     },
@@ -34,6 +49,9 @@ module.exports = {
         {
           destination: 'variables.less',
           format: 'less/variables',
+          options: {
+            fileHeader: 'myCustomHeader',
+          },
         },
       ],
     },

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

@@ -36,3 +36,21 @@ theme:
     value: '{color.owncast.orange.500.value}'
   error-color:
     value: '{color.owncast.red.500.value}'
+
+  user-colors:
+    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}'
+    8:
+      value: '{color.owncast.user.8.value}'

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

@@ -75,6 +75,24 @@ color:
     background-secondary:
       value: '#282A30'
 
+    user:
+      1:
+        value: 'rgb(244, 11, 11)'
+      2:
+        value: 'rgb(244, 128, 11)'
+      3:
+        value: 'rgb(244, 244, 11)'
+      4:
+        value: 'rgb(88, 244, 11)'
+      5:
+        value: 'rgb(11, 244, 244)'
+      6:
+        value: 'rgb(11, 166, 244)'
+      7:
+        value: 'rgb(102, 102, 255)'
+      8:
+        value: 'rgb(244, 11, 244)'
+
 font:
   owncast:
     family: