ehealthsolutions/healthchat-web
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/healthchat-web.git synced 2026-11-03 16:10:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add new healthchat colors

Browse Source
This commit is contained in:
Joël Poyet
2026-01-05 14:44:24 +01:00
parent 7654282d79
commit a3ec85bd2b
4 changed files with 43 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CLAUDE.md
+2 -1
View File
@@ -85,9 +85,10 @@ Plugin architecture in `/src/modules/`:
### Testing Patterns ### Testing Patterns
- Unit tests in `/test/unit-tests/` using Jest - Unit tests in `/test/unit-tests/` using Jest
- E2E tests in `/playwright/e2e/` using Playwright - E2E tests in `/playwright/e2e/` using Playwright with testcontainers for Synapse/Dendrite
- Mock Matrix client and SDK extensively in tests - Mock Matrix client and SDK extensively in tests
- Component tests via Storybook - Component tests via Storybook
- See `docs/playwright.md` for detailed E2E testing guide
### Important Conventions ### Important Conventions
- TypeScript strict mode - always use explicit types - TypeScript strict mode - always use explicit types
res/manifest.json
+1 -1
View File
@@ -2,7 +2,7 @@
"name": "HealthChat", "name": "HealthChat",
"short_name": "HealthChat", "short_name": "HealthChat",
"display": "standalone", "display": "standalone",
"theme_color": "#76CFA6", "theme_color": "#12325c",
"start_url": "index.html", "start_url": "index.html",
"icons": [ "icons": [
{ {
res/themes/dark/css/_dark.pcss
+18 -17
View File
@@ -35,20 +35,21 @@ $roomtile-default-badge-bg-color: var(--cpd-color-icon-secondary);
* 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); /* HealthChat brand blue color scale (dark mode adjusted) */
$accent-200: var(--cpd-color-green-200); $accent-100: #091729;
$accent-300: var(--cpd-color-green-300); $accent-200: #0d2340;
$accent-400: var(--cpd-color-green-400); $accent-300: #12325c;
$accent-500: var(--cpd-color-green-500); $accent-400: #2a4063;
$accent-600: var(--cpd-color-green-600); $accent-500: #1f4d85;
$accent-700: var(--cpd-color-green-700); $accent-600: #376A91;
$accent-800: var(--cpd-color-green-800); $accent-700: #486581;
$accent-900: var(--cpd-color-green-900); $accent-800: #627d98;
$accent-1000: var(--cpd-color-green-1000); $accent-900: #829ab1;
$accent-1100: var(--cpd-color-green-1100); $accent-1000: #9fb3c8;
$accent-1200: var(--cpd-color-green-1200); $accent-1100: #bcccdc;
$accent-1300: var(--cpd-color-green-1300); $accent-1200: #d9e2ec;
$accent-1400: var(--cpd-color-green-1400); $accent-1300: #e8eff5;
$accent-1400: #f0f4f8;
/* Reused Figma non-compound colors */ /* Reused Figma non-compound colors */
/* ******************** */ /* ******************** */
@@ -191,7 +192,7 @@ $message-action-bar-hover-border-color: $header-panel-text-primary-color;
/* Reaction row */ /* Reaction row */
/* ******************** */ /* ******************** */
$reaction-row-button-hover-border-color: $header-panel-text-primary-color; $reaction-row-button-hover-border-color: $header-panel-text-primary-color;
$reaction-row-button-selected-bg-color: #1f6954; $reaction-row-button-selected-bg-color: #1f4d85; /* HealthChat blue accent-500 */
/* ******************** */ /* ******************** */
/* Voice messages */ /* Voice messages */
@@ -202,7 +203,7 @@ $voice-record-icon-color: $quaternary-content;
/* Bubble tiles */ /* Bubble tiles */
/* ******************** */ /* ******************** */
$eventbubble-self-bg: var(--cpd-color-green-300); $eventbubble-self-bg: #12325c; /* HealthChat blue accent-300 (dark mode) */
$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);
/* ******************** */ /* ******************** */
@@ -301,7 +302,7 @@ body {
} }
.hljs-addition { .hljs-addition {
background: #1a4b59; background: #1f4d85; /* HealthChat blue accent-500 */
} }
.hljs-deletion { .hljs-deletion {
res/themes/light/css/_light.pcss
+22 -21
View File
@@ -36,10 +36,10 @@ $panel-actions: var(--cpd-color-alpha-gray-300);
$separator: var(--cpd-color-gray-400); $separator: var(--cpd-color-gray-400);
$accent: var(--cpd-color-text-action-accent); $accent: #12325c;
$alert: var(--cpd-color-text-critical-primary); $alert: var(--cpd-color-text-critical-primary);
$links: var(--cpd-color-text-link-external); $links: #1f4d85;
$link-external: var(--cpd-color-text-link-external); $link-external: #1f4d85;
$username-variant1-color: var(--cpd-color-text-decorative-1); $username-variant1-color: var(--cpd-color-text-decorative-1);
$username-variant2-color: var(--cpd-color-text-decorative-2); $username-variant2-color: var(--cpd-color-text-decorative-2);
@@ -59,20 +59,21 @@ $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); /* HealthChat brand blue color scale */
$accent-200: var(--cpd-color-green-200); $accent-100: #f0f4f8;
$accent-300: var(--cpd-color-green-300); $accent-200: #d9e2ec;
$accent-400: var(--cpd-color-green-400); $accent-300: #bcccdc;
$accent-500: var(--cpd-color-green-500); $accent-400: #9fb3c8;
$accent-600: var(--cpd-color-green-600); $accent-500: #829ab1;
$accent-700: var(--cpd-color-green-700); $accent-600: #627d98;
$accent-800: var(--cpd-color-green-800); $accent-700: #486581;
$accent-900: var(--cpd-color-green-900); $accent-800: #334e68;
$accent-1000: var(--cpd-color-green-1000); $accent-900: #243b53;
$accent-1100: var(--cpd-color-green-1100); $accent-1000: #1f4d85;
$accent-1200: var(--cpd-color-green-1200); $accent-1100: #2a4063;
$accent-1300: var(--cpd-color-green-1300); $accent-1200: #12325c;
$accent-1400: var(--cpd-color-green-1400); $accent-1300: #0d2340;
$accent-1400: #091729;
/* Reused Figma non-compound colors */ /* Reused Figma non-compound colors */
/* ******************** */ /* ******************** */
@@ -215,7 +216,7 @@ $roomtile-default-badge-bg-color: var(--cpd-color-icon-secondary);
/* ******************** */ /* ******************** */
$e2e-verified-color: var(--cpd-color-icon-success-primary); $e2e-verified-color: var(--cpd-color-icon-success-primary);
$e2e-warning-color: var(--cpd-color-icon-critical-primary); $e2e-warning-color: var(--cpd-color-icon-critical-primary);
$e2e-verified-color-light: var(--cpd-color-green-300); $e2e-verified-color-light: #bcccdc; /* HealthChat blue accent-300 */
$e2e-warning-color-light: var(--cpd-color-red-300); $e2e-warning-color-light: var(--cpd-color-red-300);
/* ******************** */ /* ******************** */
@@ -264,7 +265,7 @@ $message-action-bar-hover-border-color: $focus-bg-color;
/* Reaction row */ /* Reaction row */
/* ******************** */ /* ******************** */
$reaction-row-button-hover-border-color: $focus-bg-color; $reaction-row-button-hover-border-color: $focus-bg-color;
$reaction-row-button-selected-bg-color: #e9fff9; $reaction-row-button-selected-bg-color: #d9e2ec; /* HealthChat blue accent-200 */
/* ******************** */ /* ******************** */
/* Voice messages */ /* Voice messages */
@@ -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: #bcccdc; /* HealthChat blue accent-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);
/* ******************** */ /* ******************** */
@@ -368,7 +369,7 @@ body {
/* diff highlight colors */ /* diff highlight colors */
/* ******************** */ /* ******************** */
.hljs-addition { .hljs-addition {
background: var(--cpd-color-green-500); background: #829ab1; /* HealthChat blue accent-500 */
} }
.hljs-deletion { .hljs-deletion {