Michael Schiemer
55a330b223
- Add DISCOVERY_LOG_LEVEL=debug - Add DISCOVERY_SHOW_PROGRESS=true - Temporary changes for debugging InitializerProcessor fixes on production
276 lines
11 KiB
PHP
276 lines
11 KiB
PHP
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||
background-color: #f8fafc;
|
||
color: #334155;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.header, .nav, .main, .nav-list, .nav-link {
|
||
/* Same base styles as other views */
|
||
}
|
||
|
||
.token-section {
|
||
background: white;
|
||
padding: 1.5rem;
|
||
border-radius: 8px;
|
||
border: 1px solid #e2e8f0;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.token-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 1rem;
|
||
}
|
||
|
||
.token-card {
|
||
padding: 1rem;
|
||
border-radius: 6px;
|
||
border: 1px solid #e2e8f0;
|
||
background-color: #f8fafc;
|
||
}
|
||
|
||
.token-name {
|
||
font-weight: 600;
|
||
color: #1e293b;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.token-value {
|
||
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
||
background: white;
|
||
padding: 0.5rem;
|
||
border-radius: 4px;
|
||
border: 1px solid #e2e8f0;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.token-type {
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: #64748b;
|
||
}
|
||
</style>
|
||
|
||
<header class="header">
|
||
<h1>Design System - Design Tokens</h1>
|
||
</header>
|
||
|
||
<nav class="nav">
|
||
<ul class="nav-list">
|
||
<li><a href="/design-system" class="nav-link">Dashboard</a></li>
|
||
<li><a href="/design-system/tokens" class="nav-link active">Design Tokens</a></li>
|
||
<li><a href="/design-system/colors" class="nav-link">Farben</a></li>
|
||
<li><a href="/design-system/components" class="nav-link">Components</a></li>
|
||
<li><a href="/design-system/conventions" class="nav-link">Conventions</a></li>
|
||
<li><a href="/design-system/roadmap" class="nav-link">Roadmap</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<section class="token-section">
|
||
<h2>Token Übersicht</h2>
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 1rem;">
|
||
<div class="stat-card">
|
||
<div class="stat-value">{{coverage.total_tokens}}</div>
|
||
<div class="stat-label">Gesamt Tokens</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value">{{coverage.used_tokens}}</div>
|
||
<div class="stat-label">Verwendet</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value">{{coverage.usage_percentage}}%</div>
|
||
<div class="stat-label">Nutzungsgrad</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="token-section">
|
||
<h2>🎨 Design Tokens (All Types)</h2>
|
||
<p style="color: #64748b; margin-bottom: 1rem;">
|
||
Alle verfügbaren Design Tokens in Ihrem System ({{analysis.totalTokens}} gesamt).
|
||
</p>
|
||
<div class="token-grid">
|
||
<!-- Static test tokens to verify template rendering -->
|
||
<div class="token-card">
|
||
<div class="token-name">--color-primary</div>
|
||
<div class="token-value">#412785</div>
|
||
<div class="token-type">color</div>
|
||
</div>
|
||
|
||
<div class="token-card">
|
||
<div class="token-name">--space-md</div>
|
||
<div class="token-value">1rem</div>
|
||
<div class="token-type">spacing</div>
|
||
</div>
|
||
|
||
<div class="token-card">
|
||
<div class="token-name">--radius-lg</div>
|
||
<div class="token-value">1rem</div>
|
||
<div class="token-type">radius</div>
|
||
</div>
|
||
|
||
<div class="token-card">
|
||
<div class="token-name">--bg</div>
|
||
<div class="token-value">oklch(18% .01 270)</div>
|
||
<div class="token-type">color</div>
|
||
</div>
|
||
|
||
<div class="token-card">
|
||
<div class="token-name">--accent</div>
|
||
<div class="token-value">oklch(70% .2 295)</div>
|
||
<div class="token-type">color</div>
|
||
</div>
|
||
|
||
<div class="token-card">
|
||
<div class="token-name">--success</div>
|
||
<div class="token-value">var(--success-base)</div>
|
||
<div class="token-type">semantic</div>
|
||
</div>
|
||
|
||
<div class="token-card">
|
||
<div class="token-name">--error</div>
|
||
<div class="token-value">var(--error-base)</div>
|
||
<div class="token-type">semantic</div>
|
||
</div>
|
||
|
||
<div class="token-card">
|
||
<div class="token-name">--warning</div>
|
||
<div class="token-value">var(--warning-base)</div>
|
||
<div class="token-type">semantic</div>
|
||
</div>
|
||
|
||
<!-- Show first 8 real tokens from data -->
|
||
<for var="token" in="tokens_by_type.color">
|
||
<div class="token-card" style="border-color: #10b981;">
|
||
<div class="token-name" style="color: #065f46;">--{{token.name}}</div>
|
||
<div class="token-value" style="background: #ecfdf5;">{{token.value}}</div>
|
||
<div class="token-type" style="color: #047857;">{{token.type}} (live)</div>
|
||
</div>
|
||
</for>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="token-section" if="tokens_by_type.spacing">
|
||
<h2>📏 Spacing Tokens</h2>
|
||
<div class="token-grid">
|
||
<for var="token" in="tokens_by_type.spacing">
|
||
<div class="token-card">
|
||
<div class="token-name">--{{token.name}}</div>
|
||
<div class="token-value">{{token.value}}</div>
|
||
<div class="token-type">spacing</div>
|
||
</div>
|
||
</for>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="token-section" if="tokens_by_type.typography">
|
||
<h2>📝 Typography Tokens</h2>
|
||
<div class="token-grid">
|
||
<for var="token" in="tokens_by_type.typography">
|
||
<div class="token-card">
|
||
<div class="token-name">--{{token.name}}</div>
|
||
<div class="token-value">{{token.value}}</div>
|
||
<div class="token-type">typography</div>
|
||
</div>
|
||
</for>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="token-section" if="tokens_by_type.radius">
|
||
<h2>📐 Radius Tokens</h2>
|
||
<div class="token-grid">
|
||
<for var="token" in="tokens_by_type.radius">
|
||
<div class="token-card">
|
||
<div class="token-name">--{{token.name}}</div>
|
||
<div class="token-value">{{token.value}}</div>
|
||
<div class="token-type">radius</div>
|
||
</div>
|
||
</for>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="token-section" if="tokens_by_type.shadow">
|
||
<h2>🌊 Shadow Tokens</h2>
|
||
<div class="token-grid">
|
||
<for var="token" in="tokens_by_type.shadow">
|
||
<div class="token-card">
|
||
<div class="token-name">--{{token.name}}</div>
|
||
<div class="token-value">{{token.value}}</div>
|
||
<div class="token-type">shadow</div>
|
||
</div>
|
||
</for>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="token-section" if="unused_tokens">
|
||
<h2>🚫 Unbenutzte Tokens</h2>
|
||
<p style="color: #64748b; margin-bottom: 1rem;">
|
||
Diese Tokens sind definiert, werden aber nicht verwendet und können entfernt werden.
|
||
</p>
|
||
|
||
<div class="token-grid">
|
||
<for var="token" in="unused_tokens">
|
||
<div class="token-card" style="background-color: #fef2f2; border-color: #fecaca;">
|
||
<div class="token-name">--{{token.name}}</div>
|
||
<div class="token-value">{{token.value}}</div>
|
||
<div class="token-type">{{token.type}}</div>
|
||
</div>
|
||
</for>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="token-section" if="missing_tokens.color">
|
||
<h2>➕ Missing Color Tokens</h2>
|
||
<p style="color: #64748b; margin-bottom: 1rem;">
|
||
Diese Standard-Color-Tokens fehlen und sollten hinzugefügt werden.
|
||
</p>
|
||
<div class="token-grid">
|
||
<for var="token_name" in="missing_tokens.color">
|
||
<div class="token-card" style="background-color: #f0fdf4; border-color: #bbf7d0;">
|
||
<div class="token-name">--{{token_name}}</div>
|
||
<div class="token-type">color (empfohlen)</div>
|
||
</div>
|
||
</for>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="token-section" if="missing_tokens.spacing">
|
||
<h2>➕ Missing Spacing Tokens</h2>
|
||
<p style="color: #64748b; margin-bottom: 1rem;">
|
||
Diese Standard-Spacing-Tokens fehlen und sollten hinzugefügt werden.
|
||
</p>
|
||
<div class="token-grid">
|
||
<for var="token_name" in="missing_tokens.spacing">
|
||
<div class="token-card" style="background-color: #f0fdf4; border-color: #bbf7d0;">
|
||
<div class="token-name">--{{token_name}}</div>
|
||
<div class="token-type">spacing (empfohlen)</div>
|
||
</div>
|
||
</for>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="token-section" if="missing_tokens.typography">
|
||
<h2>➕ Missing Typography Tokens</h2>
|
||
<p style="color: #64748b; margin-bottom: 1rem;">
|
||
Diese Standard-Typography-Tokens fehlen und sollten hinzugefügt werden.
|
||
</p>
|
||
<div class="token-grid">
|
||
<for var="token_name" in="missing_tokens.typography">
|
||
<div class="token-card" style="background-color: #f0fdf4; border-color: #bbf7d0;">
|
||
<div class="token-name">--{{token_name}}</div>
|
||
<div class="token-type">typography (empfohlen)</div>
|
||
</div>
|
||
</for>
|
||
</div>
|
||
</section>
|