From 19bb08f7b8346d58c37f63b28e656fa424143b2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 27 Sep 2023 00:10:45 +0200 Subject: [PATCH] Increase contrast in initialjs avatars Not all the colors initialjs uses by default provide enough contrast against a white text. The default initialjs colors are: ["#1abc9c", "#16a085", "#f1c40f", "#f39c12", "#2ecc71", "#27ae60", "#e67e22", "#d35400", "#3498db", "#2980b9", "#e74c3c", "#c0392b", "#9b59b6", "#8e44ad", "#bdc3c7", "#34495e", "#2c3e50", "#95a5a6", "#7f8c8d", "#ec87bf", "#d870ad", "#f69785", "#9ba37e", "#b49255", "#b49255", "#a94136"] We're replacing them with colors containing less luminosity when necessary in order to get a 4,5:1 contrast (it could be argued that a 3:1 contrast is enough when the icons are big, but that isn't always the case and more contrast doesn't hurt): ["#16836d", "#12826c", "#896f06", "#a06608", "#1e8549", "#1e8549", "#b35e14", "#c75000", "#207ab6", "#2779b0", "#de2f1b", "#c0392b", "#9b59b6", "#8e44ad", "#6c767f", "#34495e", "#2c3e50", "#66797a", "#697677", "#d82286", "#c93b8e", "#db310f", "#727755", "#8a6f3d", "#8a6f3d", "#a94136"] Since initialjs doesn't provide a way to change these colors using JavaScript, we're changing them in Ruby, following the same algorithm used by initialjs. --- app/components/shared/avatar_component.rb | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/app/components/shared/avatar_component.rb b/app/components/shared/avatar_component.rb index 046951588..1009360e9 100644 --- a/app/components/shared/avatar_component.rb +++ b/app/components/shared/avatar_component.rb @@ -10,13 +10,20 @@ class Shared::AvatarComponent < ApplicationComponent private def default_options - { seed: seed } + { background_color: colors[seed % colors.size] } end def options default_options.merge(given_options) end + def colors + ["#16836d", "#12826c", "#896f06", "#a06608", "#1e8549", "#1e8549", "#b35e14", + "#c75000", "#207ab6", "#2779b0", "#de2f1b", "#c0392b", "#9b59b6", "#8e44ad", + "#6c767f", "#34495e", "#2c3e50", "#66797a", "#697677", "#d82286", "#c93b8e", + "#db310f", "#727755", "#8a6f3d", "#8a6f3d", "#a94136"] + end + def seed record.id end