@jack200714/mafw 4.5.1 → 4.8.0

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

@@ -1,236 +0,0 @@
-# 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

@@ -1,214 +0,0 @@
-# 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

@@ -1,203 +0,0 @@
-# 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;
-}
-```