till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-24 00:56:41 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

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',
},
};