feat(branding): apply HealthChat color scheme and font

This commit is contained in:
2026-02-20 11:17:03 +01:00
parent 1b1aefbaed
commit 14e88f6a0d
+17 -16
View File
@@ -11,6 +11,7 @@
digits in flowed text to stand out. digits in flowed text to stand out.
TODO: Consider putting all emoji fonts to the end rather than the front. */ TODO: Consider putting all emoji fonts to the end rather than the front. */
$font-family: $font-family:
"Century Gothic", "Futura", "Trebuchet MS",
"Inter", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "Inter", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif,
"Noto Color Emoji"; "Noto Color Emoji";
@@ -59,20 +60,20 @@ $username-variant6-color: var(--cpd-color-text-decorative-6);
* To use under very rare circumstances, always prefer the semantics defined * To use under very rare circumstances, always prefer the semantics defined
* in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs
*/ */
$accent-100: var(--cpd-color-green-100); $accent-100: var(--cpd-color-blue-100);
$accent-200: var(--cpd-color-green-200); $accent-200: var(--cpd-color-blue-200);
$accent-300: var(--cpd-color-green-300); $accent-300: var(--cpd-color-blue-300);
$accent-400: var(--cpd-color-green-400); $accent-400: var(--cpd-color-blue-400);
$accent-500: var(--cpd-color-green-500); $accent-500: var(--cpd-color-blue-500);
$accent-600: var(--cpd-color-green-600); $accent-600: var(--cpd-color-blue-600);
$accent-700: var(--cpd-color-green-700); $accent-700: var(--cpd-color-blue-700);
$accent-800: var(--cpd-color-green-800); $accent-800: var(--cpd-color-blue-800);
$accent-900: var(--cpd-color-green-900); $accent-900: var(--cpd-color-blue-900);
$accent-1000: var(--cpd-color-green-1000); $accent-1000: var(--cpd-color-blue-1000);
$accent-1100: var(--cpd-color-green-1100); $accent-1100: var(--cpd-color-blue-1100);
$accent-1200: var(--cpd-color-green-1200); $accent-1200: var(--cpd-color-blue-1200);
$accent-1300: var(--cpd-color-green-1300); $accent-1300: var(--cpd-color-blue-1300);
$accent-1400: var(--cpd-color-green-1400); $accent-1400: var(--cpd-color-blue-1400);
/* Reused Figma non-compound colors */ /* Reused Figma non-compound colors */
/* ******************** */ /* ******************** */
@@ -110,7 +111,7 @@ $info-plinth-bg-color: #f7f7f7;
$event-selected-color: var(--cpd-color-bg-subtle-secondary); $event-selected-color: var(--cpd-color-bg-subtle-secondary);
$topleftmenu-color: #212121; $topleftmenu-color: #212121;
$roomtopic-color: #9e9e9e; $roomtopic-color: #9e9e9e;
$spacePanel-bg-color: rgba(232, 232, 232, 0.77); $spacePanel-bg-color: #12325c;
$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1); $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
$h3-color: #3d3b39; $h3-color: #3d3b39;
$event-highlight-bg-color: $yellow-background; $event-highlight-bg-color: $yellow-background;
@@ -279,7 +280,7 @@ $voice-record-icon-color: $tertiary-content;
/* Bubble tiles */ /* Bubble tiles */
/* ******************** */ /* ******************** */
$eventbubble-self-bg: var(--cpd-color-green-300); $eventbubble-self-bg: var(--cpd-color-blue-300);
$eventbubble-others-bg: var(--cpd-color-gray-300); $eventbubble-others-bg: var(--cpd-color-gray-300);
$eventbubble-bg-hover: var(--cpd-color-bg-subtle-secondary); $eventbubble-bg-hover: var(--cpd-color-bg-subtle-secondary);
/* ******************** */ /* ******************** */