till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-16 06:59:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix(skilltree): define the missing branch accent colors

Browse source 
skilltree/types.ts has had `var(--color-branch-{intellect,body,creativity,
social,practical,mindset})` references for as long as I can grep, but those
CSS variables were never defined anywhere. Every skill in the gamified
tree was rendering inherited color (effectively invisible accent), making
the 6 branches visually indistinguishable.

Add the 6 colors as a new "domain accent" section in shared-tailwind/themes.css,
defined once at :root and never overridden by .dark or variant blocks
(they're brand-internal accents, not theme-aware — the same way cycles
keeps its brand pink literal).

  - intellect → blue (217 91% 60%) — knowledge, thinking
  - body      → red (0 84% 60%) — physical, energy
  - creativity → violet (271 91% 65%) — art, expression
  - social    → amber (38 92% 50%) — warmth, relationships
  - practical → teal (173 80% 40%) — craft, tools
  - mindset   → green (142 71% 45%) — calm, growth

Also update skilltree/types.ts to wrap the var() calls with hsl() per
the canonical convention (the values are now raw HSL channels).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-09 12:23:55 +02:00
parent 38a02b77a8
commit c8da2267b7
2 changed files with 22 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

14
apps/mana/apps/web/src/lib/modules/skilltree/types.ts
View file

@ -97,43 +97,43 @@ export const BRANCH_INFO: Record<
intellect: {
name: 'Intellekt',
icon: 'brain',
color: 'var(--color-branch-intellect)',
color: 'hsl(var(--color-branch-intellect))',
description: 'Wissen, Sprachen, Wissenschaft',
},
body: {
name: 'Körper',
icon: 'dumbbell',
color: 'var(--color-branch-body)',
color: 'hsl(var(--color-branch-body))',
description: 'Fitness, Sport, Gesundheit',
},
creativity: {
name: 'Kreativität',
icon: 'palette',
color: 'var(--color-branch-creativity)',
color: 'hsl(var(--color-branch-creativity))',
description: 'Kunst, Musik, Schreiben',
},
social: {
name: 'Sozial',
icon: 'users',
color: 'var(--color-branch-social)',
color: 'hsl(var(--color-branch-social))',
description: 'Kommunikation, Leadership, Empathie',
},
practical: {
name: 'Praktisch',
icon: 'wrench',
color: 'var(--color-branch-practical)',
color: 'hsl(var(--color-branch-practical))',
description: 'Handwerk, Kochen, Technologie',
},
mindset: {
name: 'Mindset',
icon: 'heart',
color: 'var(--color-branch-mindset)',
color: 'hsl(var(--color-branch-mindset))',
description: 'Meditation, Fokus, Resilienz',
},
custom: {
name: 'Eigene',
icon: 'star',
color: 'var(--color-primary)',
color: 'hsl(var(--color-primary))',
description: 'Eigene Kategorien',
},
};

15
packages/shared-tailwind/src/themes.css
View file

@ -124,6 +124,21 @@
100% { transform: translateY(-10px); opacity: 0; }
}
/* ===== Domain Accent Colors =====
Module-internal brand accents that should NOT track the active theme
variant. Defined once at :root, never overridden by .dark or variant
blocks — they look the same regardless of light/dark/lume/ocean/etc.
Consumers wrap with hsl(): `color: hsl(var(--color-branch-intellect));`. */
:root {
/* Skilltree — 6 skill category accents */
--color-branch-intellect: 217 91% 60%; /* blue — knowledge, thinking */
--color-branch-body: 0 84% 60%; /* red — physical, energy */
--color-branch-creativity: 271 91% 65%; /* violet — art, expression */
--color-branch-social: 38 92% 50%; /* amber — warmth, relationships */
--color-branch-practical: 173 80% 40%; /* teal — craft, tools */
--color-branch-mindset: 142 71% 45%; /* green — calm, growth */
}
/* ===== Default Theme (Lume Light) ===== */
:root {
--color-primary: 47 95% 58%;