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

openapi.yaml

@@ -276,8 +276,8 @@ components:
           example: awesome-pizza
         displayColor:
           type: integer
-          description: Hue value for displaying in the UI.
+          description: Color name number for client rendering.  theme-user-colors-n
-          example: 42
+          example: 3
         createdAt:
           type: string
           format: date-time

utils/utils.go

@@ -321,11 +321,12 @@ func StringMapKeys(stringMap map[string]interface{}) []string {
 	return stringSlice
 }
 
-// GenerateRandomDisplayColor will return a random _hue_ to be used when displaying a user.
+// GenerateRandomDisplayColor will return a random number that is used for
-// The UI should determine the right saturation and lightness in order to make it look right.
+// referencing a color value client-side. These colors are seen as
+// --theme-user-colors-n.
 func GenerateRandomDisplayColor() int {
-	rangeLower := 0
+	rangeLower := 1
-	rangeUpper := 360
+	rangeUpper := 8
 	return rangeLower + rand.Intn(rangeUpper-rangeLower+1) //nolint
 }
 

web/components/chat/ChatUserMessage/ChatUserMessage.tsx

@@ -22,8 +22,9 @@ export default function ChatUserMessage({
 }: Props) {
   const { body, user, timestamp } = message;
   const { displayName, displayColor } = user;
-  const color = `hsl(${displayColor}, 100%, 65%)`;
+  const color = `var(--theme-user-colors-${displayColor})`;
-  const bgColor = `hsl(${displayColor}, 20%, 25%)`;
+  // TODO: Need to convert the above color to a background color.
+  const bgColor = `hsl(100, 20%, 25%)`;
   const formattedTimestamp = `Sent at ${formatTimestamp(timestamp)}`;
   const [formattedMessage, setFormattedMessage] = useState<string>(body);
 

web/stories/Colors.stories.mdx

@@ -22,6 +22,21 @@ Toggle dark mode on and off in the above toolbar to see how these colors look on
 
 <ColorRow colors={['theme-background', 'theme-background-secondary', 'popover-background']} />
 
+## User Colors
+
+<ColorRow
+  colors={[
+    '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-user-colors-8',
+  ]}
+/>
+
 ## Status
 
 <ColorRow

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:

web/styles/theme.less

@@ -1,6 +1,10 @@
 
 // Do not edit directly
-// Generated on Fri, 24 Jun 2022 23:11:54 GMT
+// Generated on Wed, 29 Jun 2022 00:29:51 GMT
+// 
+// How to edit these values:
+// Edit the corresponding tokens file under the style-definitions directory
+// in the Owncast web project.
 
 @text-color: var(--theme-text-color);
 @text-color-secondary: var(--theme-text-color-secondary);
@@ -30,6 +34,14 @@
 @theme-info-color: #d6bbfb;
 @theme-warning-color: #f79009;
 @theme-error-color: #f04438;
+@theme-user-colors-1: #f40b0b;
+@theme-user-colors-2: #f4800b;
+@theme-user-colors-3: #f4f40b;
+@theme-user-colors-4: #58f40b;
+@theme-user-colors-5: #0bf4f4;
+@theme-user-colors-6: #0ba6f4;
+@theme-user-colors-7: #6666ff;
+@theme-user-colors-8: #f40bf4;
 @color-owncast-purple-100: #f4ebff;
 @color-owncast-purple-300: #d6bbfb;
 @color-owncast-purple-500: #9e77ed;
@@ -60,6 +72,14 @@
 @color-owncast-logo-blue: #2086e1;
 @color-owncast-background: #202232;
 @color-owncast-background-secondary: #282a30;
+@color-owncast-user-1: #f40b0b;
+@color-owncast-user-2: #f4800b;
+@color-owncast-user-3: #f4f40b;
+@color-owncast-user-4: #58f40b;
+@color-owncast-user-5: #0bf4f4;
+@color-owncast-user-6: #0ba6f4;
+@color-owncast-user-7: #6666ff;
+@color-owncast-user-8: #f40bf4;
 @font-owncast-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';
 @font-owncast-header-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';
 @owncast-purple: #7871ff;

web/styles/variables.css

@@ -1,6 +1,10 @@
 /**
  * Do not edit directly
- * Generated on Fri, 24 Jun 2022 23:11:54 GMT
+ * Generated on Wed, 29 Jun 2022 00:29:51 GMT
+ * 
+ * How to edit these values:
+ * Edit the corresponding tokens file under the style-definitions directory
+ * in the Owncast web project.
  */
 
 :root {
@@ -32,6 +36,14 @@
   --theme-info-color: #d6bbfb;
   --theme-warning-color: #f79009;
   --theme-error-color: #f04438;
+  --theme-user-colors-1: #f40b0b;
+  --theme-user-colors-2: #f4800b;
+  --theme-user-colors-3: #f4f40b;
+  --theme-user-colors-4: #58f40b;
+  --theme-user-colors-5: #0bf4f4;
+  --theme-user-colors-6: #0ba6f4;
+  --theme-user-colors-7: #6666ff;
+  --theme-user-colors-8: #f40bf4;
   --color-owncast-purple-100: #f4ebff;
   --color-owncast-purple-300: #d6bbfb;
   --color-owncast-purple-500: #9e77ed;
@@ -62,6 +74,14 @@
   --color-owncast-logo-blue: #2086e1;
   --color-owncast-background: #202232;
   --color-owncast-background-secondary: #282a30;
+  --color-owncast-user-1: #f40b0b;
+  --color-owncast-user-2: #f4800b;
+  --color-owncast-user-3: #f4f40b;
+  --color-owncast-user-4: #58f40b;
+  --color-owncast-user-5: #0bf4f4;
+  --color-owncast-user-6: #0ba6f4;
+  --color-owncast-user-7: #6666ff;
+  --color-owncast-user-8: #f40bf4;
   --font-owncast-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';
   --font-owncast-header-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';
   --owncast-purple: #7871ff;