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

refactor(shared-tailwind): rewrite themes.css to single-layer shadcn convention

Browse source 
Pre-launch theme system audit found multiple parallel layers in themes.css
(--theme-X full hsl strings, --X partial shadcn aliases, --color-X populated
by runtime store with raw channels) plus dead-code companion files. The
inconsistency caused light-mode regressions when scoped-CSS consumers
wrote `var(--color-X)` standalone — the variable holds raw HSL channels
which is invalid as a color value, browser fell back to inherited (white).

Rewrite to one consistent layer:

  - Source of truth: --color-X defined as raw HSL channels (e.g.
    `0 0% 17%`) in :root, .dark, and all variant [data-theme="..."]
    blocks. Matches the format the runtime store
    (@mana/shared-theme/src/utils.ts) writes, eliminating the
    static-fallback-vs-runtime mismatch and the corresponding flash
    of unstyled content on hydration.

  - @theme inline uses self-reference + Tailwind v4 <alpha-value>
    placeholder so utility classes generate correctly AND opacity
    modifiers work: `text-foreground/50` → `hsl(var(--color-foreground) / 0.5)`.

  - @layer components (.btn-primary, .card, .badge, etc.) wraps
    var(--color-X) refs with hsl() — they were broken in light mode
    too for the same reason.

Convention going forward (also documented in the file header):

  1. Markup: use Tailwind utility classes (text-foreground, bg-card, …)
  2. Scoped CSS: hsl(var(--color-X)) — always wrap with hsl()
  3. NEVER raw var(--color-X) in CSS — that's the bug pattern

Net file: 692 → 580 LOC. Single source layer, no indirection.

Also delete dead companion files (zero imports anywhere):
  - tailwind-v4.css (had broken self-reference, never imported)
  - theme-variables.css (legacy hex-based palette)
  - components.css (legacy component utilities)
  - index.js / preset.js / colors.js (Tailwind v3 preset format,
    irrelevant under Tailwind v4)

package.json exports map shrinks accordingly to just `./themes.css`.

Consumers using `hsl(var(--color-X))` (~379 files across mana-web,
manavoxel-web, arcade-web) keep working unchanged — the public API
name `--color-X` is preserved. Only the broken pattern `var(--color-X)`
(~61 files) needs a follow-up sweep, handled in a separate commit.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-09 01:13:06 +02:00
parent 3a3cd126cf
commit 919fcca4b7
63 changed files with 1072 additions and 5398 deletions
Download patch file Download diff file Expand all files Collapse all files

11
apps/api/src/modules/guides/routes.ts
View file

@ -6,7 +6,8 @@
* This module handles web import via mana-search + mana-llm, and share links.
*/
import { Hono } from 'hono';
import { Hono, type Context } from 'hono';
import { logger } from '@mana/shared-hono';
const MANA_SEARCH_URL = process.env.MANA_SEARCH_URL ?? 'http://localhost:3021';
const MANA_LLM_URL = process.env.MANA_LLM_URL ?? 'http://localhost:3030';
@ -35,7 +36,7 @@ routes.post('/import/url', async (c) => {
extracted = await res.json();
}
} catch (e) {
console.error('mana-search extract failed:', e);
logger.error('guides.extract_failed', { error: e instanceof Error ? e.message : String(e) });
}
const content = extracted.markdown ?? extracted.content ?? '';
@ -128,7 +129,7 @@ routes.get('/share/:token', (c) => {
// ─── Shared: LLM guide generation ──────────────────────────
async function generateGuideFromText(
c: Parameters<Parameters<typeof Hono.prototype.post>[1]>[0],
c: Context,
opts: { text: string; title?: string; sourceUrl?: string; isAiPrompt?: boolean }
) {
const systemPrompt = `Du bist ein Experte für das Erstellen strukturierter Schritt-für-Schritt-Anleitungen.
@ -189,7 +190,7 @@ Regeln:
throw new Error(`LLM error: ${llmRes.status}`);
}
const llmData = await llmRes.json<{ content: string }>();
const llmData = (await llmRes.json()) as { content: string };
const rawJson = llmData.content.trim();
// Extract JSON from potential markdown code fences
@ -209,7 +210,7 @@ Regeln:
sections: parsed.sections ?? [],
});
} catch (e) {
console.error('Guide generation failed:', e);
logger.error('guides.generate_failed', { error: e instanceof Error ? e.message : String(e) });
return c.json({ error: 'Guide-Generierung fehlgeschlagen', details: String(e) }, 500);
}
}