till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-22 07:26:42 +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

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%;