From aec65af87d231e391ad94eb5d0f38ffadc0502e4 Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Tue, 28 Jun 2022 18:55:21 -0700 Subject: [PATCH] Use a numbered pre-named set of user colors instead of random. Closes #1974 --- openapi.yaml | 4 ++-- utils/utils.go | 9 ++++---- .../chat/ChatUserMessage/ChatUserMessage.tsx | 5 +++-- web/stories/Colors.stories.mdx | 15 +++++++++++++ web/style-definitions/config.js | 18 +++++++++++++++ .../tokens/color/default-theme.yaml | 18 +++++++++++++++ .../tokens/color/owncast-colors.yaml | 18 +++++++++++++++ web/styles/theme.less | 22 ++++++++++++++++++- web/styles/variables.css | 22 ++++++++++++++++++- 9 files changed, 121 insertions(+), 10 deletions(-) diff --git a/openapi.yaml b/openapi.yaml index d94ec809d..2b887c660 100644 --- a/openapi.yaml +++ b/openapi.yaml @@ -276,8 +276,8 @@ components: example: awesome-pizza displayColor: type: integer - description: Hue value for displaying in the UI. - example: 42 + description: Color name number for client rendering. theme-user-colors-n + example: 3 createdAt: type: string format: date-time diff --git a/utils/utils.go b/utils/utils.go index 6cd604940..95e680dc4 100644 --- a/utils/utils.go +++ b/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. -// The UI should determine the right saturation and lightness in order to make it look right. +// GenerateRandomDisplayColor will return a random number that is used for +// referencing a color value client-side. These colors are seen as +// --theme-user-colors-n. func GenerateRandomDisplayColor() int { - rangeLower := 0 - rangeUpper := 360 + rangeLower := 1 + rangeUpper := 8 return rangeLower + rand.Intn(rangeUpper-rangeLower+1) //nolint } diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx index 2294d9b1d..6b8cbe170 100644 --- a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx +++ b/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 bgColor = `hsl(${displayColor}, 20%, 25%)`; + const color = `var(--theme-user-colors-${displayColor})`; + // 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(body); diff --git a/web/stories/Colors.stories.mdx b/web/stories/Colors.stories.mdx index c8fcb6389..d325673b4 100644 --- a/web/stories/Colors.stories.mdx +++ b/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 +## User Colors + + + ## Status [ + ...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', + }, }, ], }, diff --git a/web/style-definitions/tokens/color/default-theme.yaml b/web/style-definitions/tokens/color/default-theme.yaml index 705a9ba38..a17c70a33 100644 --- a/web/style-definitions/tokens/color/default-theme.yaml +++ b/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}' diff --git a/web/style-definitions/tokens/color/owncast-colors.yaml b/web/style-definitions/tokens/color/owncast-colors.yaml index b34e9afaf..10b456119 100644 --- a/web/style-definitions/tokens/color/owncast-colors.yaml +++ b/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: diff --git a/web/styles/theme.less b/web/styles/theme.less index 6f6d426a2..b8131a8ae 100644 --- a/web/styles/theme.less +++ b/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; diff --git a/web/styles/variables.css b/web/styles/variables.css index f1779828e..3606b8c8f 100644 --- a/web/styles/variables.css +++ b/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;