@jack200714/mafw 4.5.1

package/.opencode/skills/design-system/references/component-specs.md

@@ -0,0 +1,236 @@
+# Component Specifications
+
+Detailed specs for core components with states and variants.
+
+## Button
+
+### Variants
+
+| Variant | Background | Text | Border | Use Case |
+|---------|------------|------|--------|----------|
+| default | primary | white | none | Primary actions |
+| secondary | gray-100 | gray-900 | none | Secondary actions |
+| outline | transparent | foreground | border | Tertiary actions |
+| ghost | transparent | foreground | none | Subtle actions |
+| link | transparent | primary | none | Navigation |
+| destructive | red-600 | white | none | Dangerous actions |
+
+### Sizes
+
+| Size | Height | Padding X | Padding Y | Font Size | Icon Size |
+|------|--------|-----------|-----------|-----------|-----------|
+| sm | 32px | 12px | 6px | 14px | 16px |
+| default | 40px | 16px | 8px | 14px | 18px |
+| lg | 48px | 24px | 12px | 16px | 20px |
+| icon | 40px | 0 | 0 | - | 18px |
+
+### States
+
+| State | Background | Text | Opacity | Cursor |
+|-------|------------|------|---------|--------|
+| default | token | token | 1 | pointer |
+| hover | darker | token | 1 | pointer |
+| active | darkest | token | 1 | pointer |
+| focus | token | token | 1 | pointer |
+| disabled | muted | muted-fg | 0.5 | not-allowed |
+| loading | token | token | 0.7 | wait |
+
+### Anatomy
+
+```
+┌─────────────────────────────────────┐
+│  [icon]  Label Text  [icon]         │
+└─────────────────────────────────────┘
+     ↑                      ↑
+  leading icon         trailing icon
+```
+
+---
+
+## Input
+
+### Variants
+
+| Variant | Description |
+|---------|-------------|
+| default | Standard text input |
+| textarea | Multi-line text |
+| select | Dropdown selection |
+| checkbox | Boolean toggle |
+| radio | Single selection |
+| switch | Toggle switch |
+
+### Sizes
+
+| Size | Height | Padding | Font Size |
+|------|--------|---------|-----------|
+| sm | 32px | 8px 12px | 14px |
+| default | 40px | 8px 12px | 14px |
+| lg | 48px | 12px 16px | 16px |
+
+### States
+
+| State | Border | Background | Ring |
+|-------|--------|------------|------|
+| default | gray-300 | white | none |
+| hover | gray-400 | white | none |
+| focus | primary | white | primary/20% |
+| error | red-500 | white | red/20% |
+| disabled | gray-200 | gray-100 | none |
+
+### Anatomy
+
+```
+Label (optional)
+┌─────────────────────────────────────┐
+│ [icon] Placeholder/Value   [action] │
+└─────────────────────────────────────┘
+Helper text or error message
+```
+
+---
+
+## Card
+
+### Variants
+
+| Variant | Shadow | Border | Use Case |
+|---------|--------|--------|----------|
+| default | sm | 1px | Standard card |
+| elevated | lg | none | Prominent content |
+| outline | none | 1px | Subtle container |
+| interactive | sm→md | 1px | Clickable card |
+
+### Anatomy
+
+```
+┌─────────────────────────────────────┐
+│ Card Header                         │
+│   Title                             │
+│   Description                       │
+├─────────────────────────────────────┤
+│ Card Content                        │
+│   Main content area                 │
+│                                     │
+├─────────────────────────────────────┤
+│ Card Footer                         │
+│   Actions                           │
+└─────────────────────────────────────┘
+```
+
+### Spacing
+
+| Area | Padding |
+|------|---------|
+| header | 24px 24px 0 |
+| content | 24px |
+| footer | 0 24px 24px |
+| gap | 16px |
+
+---
+
+## Badge
+
+### Variants
+
+| Variant | Background | Text |
+|---------|------------|------|
+| default | primary | white |
+| secondary | gray-100 | gray-900 |
+| outline | transparent | foreground |
+| destructive | red-600 | white |
+| success | green-600 | white |
+| warning | yellow-500 | gray-900 |
+
+### Sizes
+
+| Size | Padding | Font Size | Height |
+|------|---------|-----------|--------|
+| sm | 4px 8px | 11px | 20px |
+| default | 4px 10px | 12px | 24px |
+| lg | 6px 12px | 14px | 28px |
+
+---
+
+## Alert
+
+### Variants
+
+| Variant | Icon | Background | Border |
+|---------|------|------------|--------|
+| default | info | gray-50 | gray-200 |
+| destructive | alert | red-50 | red-200 |
+| success | check | green-50 | green-200 |
+| warning | warning | yellow-50 | yellow-200 |
+
+### Anatomy
+
+```
+┌─────────────────────────────────────┐
+│ [icon]  Title                    [×]│
+│         Description text            │
+└─────────────────────────────────────┘
+```
+
+---
+
+## Dialog
+
+### Sizes
+
+| Size | Max Width | Use Case |
+|------|-----------|----------|
+| sm | 384px | Simple confirmations |
+| default | 512px | Standard dialogs |
+| lg | 640px | Complex forms |
+| xl | 768px | Data-heavy dialogs |
+| full | 100% - 32px | Full-screen on mobile |
+
+### Anatomy
+
+```
+┌───────────────────────────────────────┐
+│ Dialog Header                      [×]│
+│   Title                               │
+│   Description                         │
+├───────────────────────────────────────┤
+│ Dialog Content                        │
+│   Scrollable if needed                │
+│                                       │
+├───────────────────────────────────────┤
+│ Dialog Footer                         │
+│                     [Cancel] [Confirm]│
+└───────────────────────────────────────┘
+```
+
+---
+
+## Table
+
+### Row States
+
+| State | Background | Use Case |
+|-------|------------|----------|
+| default | white | Normal row |
+| hover | gray-50 | Mouse over |
+| selected | primary/10% | Selected row |
+| striped | gray-50/white | Alternating |
+
+### Cell Alignment
+
+| Content Type | Alignment |
+|--------------|-----------|
+| Text | Left |
+| Numbers | Right |
+| Status/Badge | Center |
+| Actions | Right |
+
+### Spacing
+
+| Element | Value |
+|---------|-------|
+| cell padding | 12px 16px |
+| header padding | 12px 16px |
+| row height (compact) | 40px |
+| row height (default) | 48px |
+| row height (comfortable) | 56px |

package/.opencode/skills/design-system/references/component-tokens.md

@@ -0,0 +1,214 @@
+# Component Tokens
+
+Component-specific tokens referencing semantic layer.
+
+## Button Tokens
+
+```css
+:root {
+  /* Default (Primary) */
+  --button-bg: var(--color-primary);
+  --button-fg: var(--color-primary-foreground);
+  --button-hover-bg: var(--color-primary-hover);
+  --button-active-bg: var(--color-primary-active);
+
+  /* Secondary */
+  --button-secondary-bg: var(--color-secondary);
+  --button-secondary-fg: var(--color-secondary-foreground);
+  --button-secondary-hover-bg: var(--color-secondary-hover);
+
+  /* Outline */
+  --button-outline-border: var(--color-border);
+  --button-outline-fg: var(--color-foreground);
+  --button-outline-hover-bg: var(--color-accent);
+
+  /* Ghost */
+  --button-ghost-fg: var(--color-foreground);
+  --button-ghost-hover-bg: var(--color-accent);
+
+  /* Destructive */
+  --button-destructive-bg: var(--color-destructive);
+  --button-destructive-fg: var(--color-destructive-foreground);
+  --button-destructive-hover-bg: var(--color-destructive-hover);
+
+  /* Sizing */
+  --button-padding-x: var(--space-4);
+  --button-padding-y: var(--space-2);
+  --button-padding-x-sm: var(--space-3);
+  --button-padding-y-sm: var(--space-1-5);
+  --button-padding-x-lg: var(--space-6);
+  --button-padding-y-lg: var(--space-3);
+
+  /* Shape */
+  --button-radius: var(--radius-md);
+  --button-font-size: var(--font-size-sm);
+  --button-font-weight: var(--font-weight-medium);
+}
+```
+
+## Input Tokens
+
+```css
+:root {
+  /* Background & Border */
+  --input-bg: var(--color-background);
+  --input-border: var(--color-input);
+  --input-fg: var(--color-foreground);
+
+  /* Placeholder */
+  --input-placeholder: var(--color-muted-foreground);
+
+  /* Focus */
+  --input-focus-border: var(--color-ring);
+  --input-focus-ring: var(--color-ring);
+
+  /* Error */
+  --input-error-border: var(--color-error);
+  --input-error-fg: var(--color-error);
+
+  /* Disabled */
+  --input-disabled-bg: var(--color-muted);
+  --input-disabled-fg: var(--color-muted-foreground);
+
+  /* Sizing */
+  --input-padding-x: var(--space-3);
+  --input-padding-y: var(--space-2);
+  --input-radius: var(--radius-md);
+  --input-font-size: var(--font-size-sm);
+}
+```
+
+## Card Tokens
+
+```css
+:root {
+  /* Background & Border */
+  --card-bg: var(--color-card);
+  --card-fg: var(--color-card-foreground);
+  --card-border: var(--color-border);
+
+  /* Shadow */
+  --card-shadow: var(--shadow-default);
+  --card-shadow-hover: var(--shadow-md);
+
+  /* Spacing */
+  --card-padding: var(--space-6);
+  --card-padding-sm: var(--space-4);
+  --card-gap: var(--space-4);
+
+  /* Shape */
+  --card-radius: var(--radius-lg);
+}
+```
+
+## Badge Tokens
+
+```css
+:root {
+  /* Default */
+  --badge-bg: var(--color-primary);
+  --badge-fg: var(--color-primary-foreground);
+
+  /* Secondary */
+  --badge-secondary-bg: var(--color-secondary);
+  --badge-secondary-fg: var(--color-secondary-foreground);
+
+  /* Outline */
+  --badge-outline-border: var(--color-border);
+  --badge-outline-fg: var(--color-foreground);
+
+  /* Destructive */
+  --badge-destructive-bg: var(--color-destructive);
+  --badge-destructive-fg: var(--color-destructive-foreground);
+
+  /* Sizing */
+  --badge-padding-x: var(--space-2-5);
+  --badge-padding-y: var(--space-0-5);
+  --badge-radius: var(--radius-full);
+  --badge-font-size: var(--font-size-xs);
+}
+```
+
+## Alert Tokens
+
+```css
+:root {
+  /* Default */
+  --alert-bg: var(--color-background);
+  --alert-fg: var(--color-foreground);
+  --alert-border: var(--color-border);
+
+  /* Destructive */
+  --alert-destructive-bg: var(--color-destructive);
+  --alert-destructive-fg: var(--color-destructive-foreground);
+
+  /* Spacing */
+  --alert-padding: var(--space-4);
+  --alert-radius: var(--radius-lg);
+}
+```
+
+## Dialog/Modal Tokens
+
+```css
+:root {
+  /* Overlay */
+  --dialog-overlay-bg: rgb(0 0 0 / 0.5);
+
+  /* Content */
+  --dialog-bg: var(--color-background);
+  --dialog-fg: var(--color-foreground);
+  --dialog-border: var(--color-border);
+  --dialog-shadow: var(--shadow-lg);
+
+  /* Spacing */
+  --dialog-padding: var(--space-6);
+  --dialog-radius: var(--radius-lg);
+  --dialog-max-width: 32rem;
+}
+```
+
+## Table Tokens
+
+```css
+:root {
+  /* Header */
+  --table-header-bg: var(--color-muted);
+  --table-header-fg: var(--color-muted-foreground);
+
+  /* Body */
+  --table-row-bg: var(--color-background);
+  --table-row-hover-bg: var(--color-muted);
+  --table-row-fg: var(--color-foreground);
+
+  /* Border */
+  --table-border: var(--color-border);
+
+  /* Spacing */
+  --table-cell-padding-x: var(--space-4);
+  --table-cell-padding-y: var(--space-3);
+}
+```
+
+## Usage Example
+
+```css
+.button {
+  background: var(--button-bg);
+  color: var(--button-fg);
+  padding: var(--button-padding-y) var(--button-padding-x);
+  border-radius: var(--button-radius);
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
+  transition: background var(--duration-fast);
+}
+
+.button:hover {
+  background: var(--button-hover-bg);
+}
+
+.button.secondary {
+  background: var(--button-secondary-bg);
+  color: var(--button-secondary-fg);
+}
+```

package/.opencode/skills/design-system/references/primitive-tokens.md

@@ -0,0 +1,203 @@
+# Primitive Tokens
+
+Raw design values - foundation of the design system.
+
+## Color Scales
+
+### Gray Scale
+
+```css
+:root {
+  --color-gray-50:  #F9FAFB;
+  --color-gray-100: #F3F4F6;
+  --color-gray-200: #E5E7EB;
+  --color-gray-300: #D1D5DB;
+  --color-gray-400: #9CA3AF;
+  --color-gray-500: #6B7280;
+  --color-gray-600: #4B5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1F2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #030712;
+}
+```
+
+### Primary Colors (Blue)
+
+```css
+:root {
+  --color-blue-50:  #EFF6FF;
+  --color-blue-100: #DBEAFE;
+  --color-blue-200: #BFDBFE;
+  --color-blue-300: #93C5FD;
+  --color-blue-400: #60A5FA;
+  --color-blue-500: #3B82F6;
+  --color-blue-600: #2563EB;
+  --color-blue-700: #1D4ED8;
+  --color-blue-800: #1E40AF;
+  --color-blue-900: #1E3A8A;
+}
+```
+
+### Status Colors
+
+```css
+:root {
+  /* Success - Green */
+  --color-green-500: #22C55E;
+  --color-green-600: #16A34A;
+
+  /* Warning - Yellow */
+  --color-yellow-500: #EAB308;
+  --color-yellow-600: #CA8A04;
+
+  /* Error - Red */
+  --color-red-500: #EF4444;
+  --color-red-600: #DC2626;
+
+  /* Info - Blue */
+  --color-info: var(--color-blue-500);
+}
+```
+
+## Spacing Scale
+
+4px base unit system.
+
+```css
+:root {
+  --space-0:   0;
+  --space-px:  1px;
+  --space-0-5: 0.125rem;  /* 2px */
+  --space-1:   0.25rem;   /* 4px */
+  --space-1-5: 0.375rem;  /* 6px */
+  --space-2:   0.5rem;    /* 8px */
+  --space-2-5: 0.625rem;  /* 10px */
+  --space-3:   0.75rem;   /* 12px */
+  --space-3-5: 0.875rem;  /* 14px */
+  --space-4:   1rem;      /* 16px */
+  --space-5:   1.25rem;   /* 20px */
+  --space-6:   1.5rem;    /* 24px */
+  --space-7:   1.75rem;   /* 28px */
+  --space-8:   2rem;      /* 32px */
+  --space-9:   2.25rem;   /* 36px */
+  --space-10:  2.5rem;    /* 40px */
+  --space-12:  3rem;      /* 48px */
+  --space-14:  3.5rem;    /* 56px */
+  --space-16:  4rem;      /* 64px */
+  --space-20:  5rem;      /* 80px */
+  --space-24:  6rem;      /* 96px */
+}
+```
+
+## Typography Scale
+
+```css
+:root {
+  /* Font Sizes */
+  --font-size-xs:   0.75rem;   /* 12px */
+  --font-size-sm:   0.875rem;  /* 14px */
+  --font-size-base: 1rem;      /* 16px */
+  --font-size-lg:   1.125rem;  /* 18px */
+  --font-size-xl:   1.25rem;   /* 20px */
+  --font-size-2xl:  1.5rem;    /* 24px */
+  --font-size-3xl:  1.875rem;  /* 30px */
+  --font-size-4xl:  2.25rem;   /* 36px */
+  --font-size-5xl:  3rem;      /* 48px */
+
+  /* Line Heights */
+  --leading-none:   1;
+  --leading-tight:  1.25;
+  --leading-snug:   1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose:  2;
+
+  /* Font Weights */
+  --font-weight-normal:   400;
+  --font-weight-medium:   500;
+  --font-weight-semibold: 600;
+  --font-weight-bold:     700;
+
+  /* Letter Spacing */
+  --tracking-tighter: -0.05em;
+  --tracking-tight:   -0.025em;
+  --tracking-normal:  0;
+  --tracking-wide:    0.025em;
+  --tracking-wider:   0.05em;
+}
+```
+
+## Border Radius
+
+```css
+:root {
+  --radius-none:    0;
+  --radius-sm:      0.125rem;  /* 2px */
+  --radius-default: 0.25rem;   /* 4px */
+  --radius-md:      0.375rem;  /* 6px */
+  --radius-lg:      0.5rem;    /* 8px */
+  --radius-xl:      0.75rem;   /* 12px */
+  --radius-2xl:     1rem;      /* 16px */
+  --radius-3xl:     1.5rem;    /* 24px */
+  --radius-full:    9999px;
+}
+```
+
+## Shadows
+
+```css
+:root {
+  --shadow-none: none;
+  --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1),
+                    0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.1),
+                 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.1),
+                 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.1),
+                 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl:  0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+}
+```
+
+## Motion / Duration
+
+```css
+:root {
+  --duration-75:  75ms;
+  --duration-100: 100ms;
+  --duration-150: 150ms;
+  --duration-200: 200ms;
+  --duration-300: 300ms;
+  --duration-500: 500ms;
+  --duration-700: 700ms;
+  --duration-1000: 1000ms;
+
+  /* Semantic durations */
+  --duration-fast:   var(--duration-150);
+  --duration-normal: var(--duration-200);
+  --duration-slow:   var(--duration-300);
+}
+```
+
+## Z-Index Scale
+
+```css
+:root {
+  --z-auto:     auto;
+  --z-0:        0;
+  --z-10:       10;
+  --z-20:       20;
+  --z-30:       30;
+  --z-40:       40;
+  --z-50:       50;
+  --z-dropdown: 1000;
+  --z-sticky:   1100;
+  --z-modal:    1200;
+  --z-popover:  1300;
+  --z-tooltip:  1400;
+}
+```