@jaimevalasek/aioson 1.4.0 → 1.6.0

package/template/.aioson/skills/design/glassmorphism-ui/references/dashboards.md

@@ -0,0 +1,236 @@
+# Dashboards — Glassmorphism UI
+
+Dashboard compositions and presets. All dashboards use the App Shell from `patterns.md`.
+
+---
+
+## General Rules for All Dashboards
+
+1. **Background always gradient** — never solid. The gradient is what makes glass visible.
+2. **Stat numbers**: sans-serif bold, optionally with gradient text (`var(--accent-gradient)` with `-webkit-background-clip: text`).
+3. **Charts**: accent violet as primary, semi-transparent gradient fills, rgba grid lines.
+4. **Cards**: glass with visible blur — the user must perceive the glass. Not solid cards with a blur filter.
+5. **Card hover**: `glass-bg` → `glass-bg-hover` + `shadow-sm` → `shadow-md`, 200ms.
+6. **One hero element** per dashboard: one card or number that is significantly larger/more prominent — the "anchor" the user reads first.
+
+---
+
+## Chart Color Palette
+
+```css
+--chart-1: var(--accent);              /* #7C3AED violet */
+--chart-2: var(--accent-secondary);   /* #3B82F6 blue */
+--chart-3: #10B981;                   /* emerald */
+--chart-4: #F59E0B;                   /* amber */
+--chart-5: #EC4899;                   /* pink */
+--chart-6: #6366F1;                   /* indigo */
+
+/* Gradient area fills (for area/line charts) */
+--chart-fill-1: linear-gradient(180deg, rgba(124, 58, 237, 0.25) 0%, rgba(124, 58, 237, 0) 100%);
+--chart-fill-2: linear-gradient(180deg, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0) 100%);
+--chart-fill-3: linear-gradient(180deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0) 100%);
+--chart-fill-4: linear-gradient(180deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0) 100%);
+```
+
+### Chart rules
+- **Area charts**: always gradient fill (top color → transparent), never solid fill. Makes chart feel part of the glass environment.
+- **Bar charts**: gradient fill (vertical, accent → accent-strong), top radius 4px.
+- **Donut charts**: accent palette, center area transparent (glass shows through).
+- **Line charts**: accent color line (2px), gradient fill below the line.
+- **Grid lines**: `rgba(255, 255, 255, 0.10)` on dark, `rgba(0, 0, 0, 0.06)` on light.
+- **Tooltips**: glass card (blur, transparent bg, luminous border) — never solid white box.
+- **Axis labels**: `var(--text-muted)`, `text-xs`.
+
+---
+
+## 1. Fintech Dashboard
+
+**Expression mode**: Crystal Dashboard
+**Feel**: premium, trustworthy, sophisticated
+
+Layout:
+```
+Header: "My Portfolio" + date range + refresh icon
+Row 1: 4 stat glass cards (full-width)
+  ├─ Total Value: large gradient text number + portfolio growth %
+  ├─ Today's P&L: number + green/red trend
+  ├─ Annual Return: % + sparkline (mini area chart)
+  └─ Cash Balance: number + "available to invest"
+
+Row 2 (2 columns):
+  Left (60%): Performance chart — area chart with gradient fill
+    Time range tabs: 1D / 1W / 1M / 3M / 1Y / All
+    X-axis: dates, Y-axis: portfolio value
+    Gradient fill: accent-fill-1 (violet → transparent)
+  Right (40%): Asset Allocation — donut chart glass card
+    Donut center: "Total" label + value
+    Legend: assets with colored indicators + %
+
+Row 3: Holdings glass table card
+  Columns: Asset / Allocation / Price / 24h Change / Value / P&L
+  Rows: 48px, ticker bold + full name text-muted, change colored green/red
+  Search input above table (glass input)
+```
+
+Signature: portfolio value number in gradient text (violet → blue), repeated in the donut center and in the hero stat card.
+
+---
+
+## 2. Crypto Dashboard
+
+**Expression mode**: Crystal Dashboard
+**Feel**: modern, fast-moving, high-information-density
+
+Layout:
+```
+Header: "Crypto Portfolio" + total value (hero: text-4xl gradient) + 24h change badge
+
+Row 1: 4 compact glass stat cards
+  ├─ BTC Price + 24h change sparkline
+  ├─ ETH Price + change
+  ├─ Portfolio BTC value
+  └─ Unrealized P&L (green or red gradient text)
+
+Row 2 (main chart): Price chart glass card (full width)
+  Pair selector: BTC/USD ETH/USD SOL/USD (glass chips)
+  Time: 1H 4H 1D 1W (glass chip tabs)
+  Chart: area with gradient fill, price overlay label on hover
+  Volume bars: at bottom of chart area, rgba fill
+
+Row 3 (2 columns):
+  Left (60%): Watchlist — glass cards in a list
+    Each: coin icon + name + price + 24h sparkline + change %
+    Sorted by: 24h performance (glass sort chips)
+  Right (40%): Order Book glass card
+    Bids: green, rgba green bg on rows
+    Asks: red, rgba red bg on rows
+    Spread: centered label between sections
+
+Row 4: Recent Transactions — glass table
+  Columns: Asset / Type (buy/sell badge) / Amount / Price / Date / Status
+```
+
+Signature: live-feeling price numbers with slight pulsing opacity animation on change, bid/ask rows with semantic glass tints.
+
+---
+
+## 3. Analytics Dashboard
+
+**Expression mode**: Crystal Dashboard
+**Feel**: efficient, data-rich, clear
+
+Layout:
+```
+Header: "Analytics" + date range picker (glass input with calendar icon) + comparison toggle
+
+Metric strip (glass bar, full width): 4-5 metrics inline
+  Sessions | Pageviews | Bounce Rate | Avg Duration | Conversions
+  Dividers: 1px glass-border between metrics
+  Each: label text-xs text-muted + value text-2xl weight-bold + trend arrow
+
+Primary trend chart (full width glass card):
+  Line chart: sessions over time, comparison line dashed
+  Gradient fill below primary line
+  Legend: glass chips for each series
+
+Row (2 columns):
+  Left (55%): Traffic Sources — horizontal bar chart glass card
+    Sources: Organic / Direct / Referral / Social / Email
+    Bar: gradient fill, label + % at end
+  Right (45%): Top Pages — glass table
+    Columns: Page / Views / Bounce / Duration
+    Rows compact 40px
+
+Row: Geographic distribution — world map with glass overlay points
+  OR: Country table glass card with flag + country + sessions + %
+
+Row: Device breakdown — 3 mini glass cards (Desktop / Mobile / Tablet)
+  Each: device icon + % + bar progress
+```
+
+Signature: metric strip as a standalone glass bar (not individual cards) — unusual, memorable, efficient.
+
+---
+
+## 4. Media Dashboard
+
+**Expression mode**: Media Player
+**Feel**: immersive, atmospheric, alive
+
+Special rule: **the background adapts to the dominant color of the current track/album**. Extract primary color → generate gradient → smooth transition on track change.
+
+Layout:
+```
+Background: extracted album art color → aurora gradient (dynamic)
+  Transition: 800ms when track changes
+
+Hero (top section): Now Playing glass card (centered, large)
+  Album art: rounded (radius-2xl), 160px, with reflection effect below
+  Track title: text-2xl weight-bold text-heading
+  Artist: text-base text-secondary
+  Progress bar (glass strip): current time / total time
+  Controls: ← prev | play/pause (large glass button, accent gradient) | next →
+  Volume: glass knob or slider
+
+Row 2 (3 columns):
+  Left (25%): glass stat cards (small)
+    ├─ Listening streak (days)
+    ├─ Minutes today
+    └─ Tracks played
+  Center (50%): Main listening chart — area chart (weekly listening hours)
+    Gradient fill matching current album color (not fixed violet)
+  Right (25%): Recently Played — glass list
+    Each: thumbnail + track + artist + duration
+
+Row 3 (2 columns):
+  Left: Top Artists — glass cards grid (3x2)
+    Each: avatar (rounded) + name + genre badge
+  Right: Queue / Playlist — glass list
+    Each: # + thumbnail + title + artist + duration + remove icon (hover)
+```
+
+Signature: the entire dashboard color scheme shifts to match the current track — headline feature, not decoration.
+
+---
+
+## 5. Wellness Dashboard
+
+**Expression mode**: Zen Workspace (or Crystal if the product is data-rich)
+**Feel**: calm, focused, encouraging, clear
+
+Layout:
+```
+Header: "Good morning, [Name]" + date + last sync timestamp
+
+Hero (prominent glass card, radius-2xl):
+  Daily Wellness Score: circular progress (SVG or canvas)
+  Center: score number text-4xl weight-bold + label text-sm text-secondary
+  Ring: gradient stroke (green → accent), animated on load
+  Context: "Better than yesterday" or "Getting there" — positive framing only
+
+Row 1: 4 mini glass stat cards
+  Sleep: hours + sleep quality badge + moon icon
+  Steps: number + goal progress bar + footprint icon
+  Heart Rate: bpm + status badge (resting/elevated) + heart icon
+  Hydration: glasses + goal % + drop icon
+
+Row 2 (2 columns):
+  Left (60%): Activity Chart — 7-day area chart
+    Two series: steps + activity minutes (different gradient fills)
+    X-axis: days of week
+    Highlight: today's bar/point with accent glow
+  Right (40%): Sleep Analysis — bar chart
+    Bars: sleep duration per night, 7 nights
+    Color: semantic green for ≥7h, amber for 6-7h, red for <6h
+    Reference line: 8h goal, dashed
+
+Row 3 (2 columns):
+  Left: Weekly Comparison — glass table
+    Metric / This week / Last week / Change
+    Change: semantic green/red with arrow
+  Right: Mood Tracker — glass card with emoji indicators
+    7 days × mood rating (1-5)
+    Emoji circles with glass bg, selected state accent tinted
+```
+
+Signature: circular progress score as the hero — large, centered, with animated ring. Reinforced by all metric cards using subtle circular mini-progress indicators.

package/template/.aioson/skills/design/glassmorphism-ui/references/design-tokens.md

@@ -0,0 +1,274 @@
+# Design Tokens — Glassmorphism UI
+
+This is the source of truth for all CSS custom properties. Apply these on `:root` (or `[data-theme]`) and never hardcode values in components.
+
+---
+
+## Typography
+
+### Font families
+```css
+--font-display: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
+--font-body:    'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
+--font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
+```
+
+Note: SF Pro as first system fallback gives the Apple/iOS feel when Inter is not loaded. The differentiator in glassmorphism is not the typeface — it is the glass effects. Use headings weight 600-700, tracking -0.02em. Body weight 400.
+
+### Font sizes
+```css
+--text-xs:   0.75rem;    /* 12px */
+--text-sm:   0.875rem;   /* 14px */
+--text-base: 1rem;       /* 16px */
+--text-lg:   1.125rem;   /* 18px */
+--text-xl:   1.25rem;    /* 20px */
+--text-2xl:  1.5rem;     /* 24px */
+--text-3xl:  2rem;       /* 32px */
+--text-4xl:  2.5rem;     /* 40px — stat numbers, hero subheadings */
+--text-5xl:  3.5rem;     /* 56px — hero headlines */
+```
+
+---
+
+## Colors — Light Theme (default)
+
+Apply on `:root` or `[data-theme="light"]`.
+
+```css
+/* Backgrounds */
+--bg-void:     #E8E6F0;
+--bg-base:     #F0EEF6;
+--bg-gradient: linear-gradient(135deg, #F0EEF6 0%, #E0DFF0 30%, #D8E0F0 70%, #EDE8F0 100%);
+
+/* Glass surfaces — TRANSPARENT by design */
+--bg-surface:  rgba(255, 255, 255, 0.60);   /* standard glass card */
+--bg-elevated: rgba(255, 255, 255, 0.80);   /* hover state, nested card */
+--bg-overlay:  rgba(255, 255, 255, 0.40);   /* transparent overlay */
+
+/* Text */
+--text-heading:   #1A1A2E;
+--text-primary:   #2D2D44;
+--text-secondary: #6B6B8A;
+--text-muted:     #9B9BB5;
+
+/* Accent */
+--accent:          #7C3AED;                              /* violet-600 */
+--accent-strong:   #6D28D9;                              /* violet-700 */
+--accent-dim:      rgba(124, 58, 237, 0.12);
+--accent-hover:    #6D28D9;
+--accent-contrast: #FFFFFF;
+
+/* Accent secondary + gradient */
+--accent-secondary: #3B82F6;                             /* blue-500 */
+--accent-gradient:  linear-gradient(135deg, #7C3AED, #3B82F6);
+
+/* Semantic */
+--semantic-green:     #10B981;
+--semantic-green-dim: rgba(16, 185, 129, 0.12);
+--semantic-amber:     #F59E0B;
+--semantic-amber-dim: rgba(245, 158, 11, 0.12);
+--semantic-red:       #EF4444;
+--semantic-red-dim:   rgba(239, 68, 68, 0.12);
+--semantic-blue:      #3B82F6;
+--semantic-blue-dim:  rgba(59, 130, 246, 0.12);
+```
+
+---
+
+## Colors — Dark Theme
+
+Apply on `[data-theme="dark"]`.
+
+```css
+/* Backgrounds */
+--bg-void:     #0F0F1A;
+--bg-base:     #141425;
+--bg-gradient: linear-gradient(135deg, #141425 0%, #1A1535 30%, #151A30 70%, #1A1425 100%);
+
+/* Glass surfaces — TRANSPARENT by design */
+--bg-surface:  rgba(255, 255, 255, 0.08);
+--bg-elevated: rgba(255, 255, 255, 0.12);
+--bg-overlay:  rgba(255, 255, 255, 0.05);
+
+/* Text */
+--text-heading:   #F0F0FA;
+--text-primary:   #C8C8E0;
+--text-secondary: #8888A8;
+--text-muted:     #5A5A78;
+
+/* Accent */
+--accent:          #8B5CF6;                              /* violet-500 — brighter for dark */
+--accent-strong:   #7C3AED;
+--accent-dim:      rgba(139, 92, 246, 0.18);
+--accent-hover:    #7C3AED;
+--accent-contrast: #FFFFFF;
+
+/* Accent secondary + gradient */
+--accent-secondary: #60A5FA;                             /* blue-400 */
+--accent-gradient:  linear-gradient(135deg, #8B5CF6, #60A5FA);
+
+/* Semantic (same values work on dark) */
+--semantic-green:     #10B981;
+--semantic-green-dim: rgba(16, 185, 129, 0.15);
+--semantic-amber:     #F59E0B;
+--semantic-amber-dim: rgba(245, 158, 11, 0.15);
+--semantic-red:       #EF4444;
+--semantic-red-dim:   rgba(239, 68, 68, 0.15);
+--semantic-blue:      #60A5FA;
+--semantic-blue-dim:  rgba(96, 165, 250, 0.15);
+```
+
+---
+
+## Glass Tokens (unique to this skill)
+
+These tokens define the glass effect system. They are the core differentiator.
+
+```css
+/* Blur intensities */
+--glass-blur-sm: blur(8px);    /* subtle — zen mode, mobile (performance) */
+--glass-blur-md: blur(16px);   /* standard — most cards and containers */
+--glass-blur-lg: blur(24px);   /* strong — sidebars, modals, nav bars */
+--glass-blur-xl: blur(40px);   /* extreme — media player, decorative blobs */
+
+/* Glass surfaces — light theme */
+--glass-bg:           rgba(255, 255, 255, 0.60);
+--glass-bg-hover:     rgba(255, 255, 255, 0.75);
+--glass-bg-active:    rgba(255, 255, 255, 0.85);
+--glass-border:       rgba(255, 255, 255, 0.40);   /* luminous border */
+--glass-border-focus: rgba(124, 58, 237, 0.50);    /* accent ring */
+--glass-highlight:    linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
+
+/* Glass surfaces — dark theme */
+--glass-bg-dark:           rgba(255, 255, 255, 0.08);
+--glass-bg-dark-hover:     rgba(255, 255, 255, 0.12);
+--glass-bg-dark-active:    rgba(255, 255, 255, 0.16);
+--glass-border-dark:       rgba(255, 255, 255, 0.12);
+--glass-highlight-dark:    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 50%);
+
+/* Fallback (when backdrop-filter is unsupported) */
+--glass-fallback-bg:  rgba(255, 255, 255, 0.95);   /* light */
+--glass-fallback-dark: rgba(20, 20, 37, 0.95);      /* dark */
+```
+
+Usage note: always wrap `backdrop-filter` in `@supports`:
+```css
+.glass-card {
+  background: var(--glass-fallback-bg);
+}
+@supports (backdrop-filter: blur(1px)) {
+  .glass-card {
+    background: var(--glass-bg);
+    backdrop-filter: var(--glass-blur-md);
+  }
+}
+```
+
+---
+
+## Shadows (colored, not black)
+
+Shadows use the accent color (violet) at very low opacity, creating a subtle glow instead of a dark shadow. Combined with `--glass-highlight` for the top reflection.
+
+```css
+--shadow-xs:    0 1px 3px rgba(124, 58, 237, 0.04);
+--shadow-sm:    0 4px 12px rgba(124, 58, 237, 0.06);
+--shadow-md:    0 8px 24px rgba(124, 58, 237, 0.08);
+--shadow-lg:    0 16px 48px rgba(124, 58, 237, 0.10);
+--shadow-glow:  0 0 40px rgba(124, 58, 237, 0.15);    /* accent glow for featured elements */
+--shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.15);  /* top inner highlight */
+```
+
+Dark theme shadow adjustment (same structure, slightly more visible):
+```css
+--shadow-sm:  0 4px 12px rgba(0, 0, 0, 0.20);
+--shadow-md:  0 8px 24px rgba(0, 0, 0, 0.30);
+--shadow-lg:  0 16px 48px rgba(0, 0, 0, 0.40);
+--shadow-glow: 0 0 40px rgba(139, 92, 246, 0.25);
+```
+
+---
+
+## Border Radius (generous)
+
+```css
+--radius-sm:   0.375rem;   /* 6px — badges, chips */
+--radius-md:   0.5rem;     /* 8px — inputs, small buttons */
+--radius-lg:   0.75rem;    /* 12px — small cards, dropdowns */
+--radius-xl:   1rem;       /* 16px — standard cards */
+--radius-2xl:  1.25rem;    /* 20px — large cards, modals */
+--radius-3xl:  1.5rem;     /* 24px — hero cards, feature cards */
+--radius-full: 9999px;     /* pills, avatars, toggles */
+```
+
+---
+
+## Control Heights
+
+```css
+--control-xs: 1.75rem;    /* 28px — compact chips */
+--control-sm: 2rem;       /* 32px — compact controls */
+--control-md: 2.25rem;    /* 36px — standard inputs */
+--control-lg: 2.75rem;    /* 44px — glass buttons (generous touch target) */
+```
+
+---
+
+## Spacing
+
+4px rhythm base (same as other skills):
+
+```css
+--space-1:  0.25rem;   /* 4px */
+--space-2:  0.5rem;    /* 8px */
+--space-3:  0.75rem;   /* 12px */
+--space-4:  1rem;      /* 16px */
+--space-5:  1.25rem;   /* 20px */
+--space-6:  1.5rem;    /* 24px */
+--space-8:  2rem;      /* 32px */
+--space-10: 2.5rem;    /* 40px */
+--space-12: 3rem;      /* 48px */
+--space-16: 4rem;      /* 64px */
+--space-20: 5rem;      /* 80px */
+--space-24: 6rem;      /* 96px */
+--space-32: 8rem;      /* 128px — hero sections */
+```
+
+---
+
+## Layout
+
+```css
+--sidebar-width:   256px;
+--content-sm:      480px;
+--content-md:      640px;
+--content-lg:      800px;
+--content-xl:      1024px;
+--content-max:     1280px;
+
+--nav-height:      64px;   /* glass top bar */
+--nav-height-web:  68px;   /* glass website nav */
+```
+
+---
+
+## Breakpoints
+
+```css
+--breakpoint-sm:  640px;
+--breakpoint-md:  768px;
+--breakpoint-lg:  1024px;
+--breakpoint-xl:  1280px;
+```
+
+---
+
+## Transitions
+
+```css
+--transition-fast:  120ms ease;
+--transition-base:  200ms ease;
+--transition-slow:  350ms cubic-bezier(0.16, 1, 0.3, 1);
+--transition-glass: backdrop-filter 300ms ease, background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
+--transition-hero:  600ms cubic-bezier(0.16, 1, 0.3, 1);
+```