Fix colour of avatar and colour matching with username (#11470)

* Use consistent colouring of username with avatar

* Upgrade Compound to fix Firefox issue

* Use the approapriate color shade for usernames

* Use the approapriate color shade for usernames

* Upgrade Compound

* Fix tests
This commit is contained in:
Germain
2023-08-24 17:12:28 +00:00
committed by GitHub
parent 195dc4716b
commit 23897dff4f
31 changed files with 269 additions and 125 deletions
@@ -186,14 +186,14 @@ $call-background: #15191e;
$call-primary-content: #ffffff;
$call-light-quaternary-content: #c1c6cd;
$username-variant1-color: var(--cpd-color-blue-900);
$username-variant2-color: var(--cpd-color-fuchsia-900);
$username-variant3-color: var(--cpd-color-green-900);
$username-variant4-color: var(--cpd-color-pink-900);
$username-variant5-color: var(--cpd-color-orange-900);
$username-variant6-color: var(--cpd-color-cyan-900);
$username-variant7-color: var(--cpd-color-purple-900);
$username-variant8-color: var(--cpd-color-lime-900);
$username-variant1-color: var(--cpd-color-blue-1200);
$username-variant2-color: var(--cpd-color-fuchsia-1200);
$username-variant3-color: var(--cpd-color-green-1200);
$username-variant4-color: var(--cpd-color-pink-1200);
$username-variant5-color: var(--cpd-color-orange-1200);
$username-variant6-color: var(--cpd-color-cyan-1200);
$username-variant7-color: var(--cpd-color-purple-1200);
$username-variant8-color: var(--cpd-color-lime-1200);
/**
* Creating a `semantic` color scale. This will not be needed with the new
@@ -8,14 +8,14 @@ $tertiary-content: var(--cpd-color-gray-800);
$quaternary-content: var(--cpd-color-gray-600);
$quinary-content: var(--cpd-color-gray-400);
$username-variant1-color: var(--cpd-color-blue-900);
$username-variant2-color: var(--cpd-color-fuchsia-900);
$username-variant3-color: var(--cpd-color-green-900);
$username-variant4-color: var(--cpd-color-pink-900);
$username-variant5-color: var(--cpd-color-orange-900);
$username-variant6-color: var(--cpd-color-cyan-900);
$username-variant7-color: var(--cpd-color-purple-900);
$username-variant8-color: var(--cpd-color-lime-900);
$username-variant1-color: var(--cpd-color-blue-1200);
$username-variant2-color: var(--cpd-color-fuchsia-1200);
$username-variant3-color: var(--cpd-color-green-1200);
$username-variant4-color: var(--cpd-color-pink-1200);
$username-variant5-color: var(--cpd-color-orange-1200);
$username-variant6-color: var(--cpd-color-cyan-1200);
$username-variant7-color: var(--cpd-color-purple-1200);
$username-variant8-color: var(--cpd-color-lime-1200);
$accent-alt: $links;
$input-border-color: $secondary-content;
+8 -8
View File
@@ -36,14 +36,14 @@ $alert: var(--cpd-color-text-critical-primary);
$links: var(--cpd-color-text-link-external);
$link-external: var(--cpd-color-text-link-external);
$username-variant1-color: var(--cpd-color-blue-900);
$username-variant2-color: var(--cpd-color-fuchsia-900);
$username-variant3-color: var(--cpd-color-green-900);
$username-variant4-color: var(--cpd-color-pink-900);
$username-variant5-color: var(--cpd-color-orange-900);
$username-variant6-color: var(--cpd-color-cyan-900);
$username-variant7-color: var(--cpd-color-purple-900);
$username-variant8-color: var(--cpd-color-lime-900);
$username-variant1-color: var(--cpd-color-blue-1200);
$username-variant2-color: var(--cpd-color-fuchsia-1200);
$username-variant3-color: var(--cpd-color-green-1200);
$username-variant4-color: var(--cpd-color-pink-1200);
$username-variant5-color: var(--cpd-color-orange-1200);
$username-variant6-color: var(--cpd-color-cyan-1200);
$username-variant7-color: var(--cpd-color-purple-1200);
$username-variant8-color: var(--cpd-color-lime-1200);
/* ******************** */
/**