aiox-core 5.0.3 → 5.0.4

package/pro/squads/design/tasks/f1-apply-foundations.md

@@ -1,154 +1,154 @@
-# f1-apply-foundations
-
-> **Phase 1, Step 3** — Aplicar tokens mapeados no globals.css e @theme inline.
-
-## Metadata
-
-```yaml
-task:
-  id: f1-apply-foundations
-  phase: 1
-  step: 3
-  agent: ds-foundations-lead
-  depends_on: f1-map-tokens-to-shadcn
-  blocking: false
-  next: f1-qa-foundations
-```
-
-## Objetivo
-
-Editar `app/app/globals.css` para substituir os tokens default do shadcn pelos tokens mapeados do Figma, mantendo a estrutura do arquivo intacta.
-
-## Target File
-
-`app/app/globals.css`
-
-## Estrutura Atual do globals.css
-
-```css
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "shadcn/tailwind.css";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  /* Tailwind bridge: --color-{name}: var(--{name}) */
-  /* Radius scale: --radius-{size}: calc(var(--radius) ± offset) */
-}
-
-:root {
-  /* Light mode tokens in OKLch */
-}
-
-.dark {
-  /* Dark mode tokens in OKLch */
-}
-
-@layer base {
-  * { @apply border-border outline-ring/50; }
-  body { @apply bg-background text-foreground; }
-}
-```
-
-## Execution Steps
-
-### Step 1: Substituir Valores em `:root`
-
-Para cada token mapeado, substituir o valor OKLch:
-
-```css
-:root {
-  --radius: 0.625rem;          /* Usar valor do Figma se fornecido */
-  --background: oklch(...);     /* Novo valor do Figma */
-  --foreground: oklch(...);     /* Novo valor do Figma */
-  /* ... todos os 18 core tokens ... */
-  /* ... 5 chart tokens ... */
-  /* ... 8 sidebar tokens ... */
-}
-```
-
-### Step 2: Substituir Valores em `.dark`
-
-Para cada token mapeado com valor dark:
-
-```css
-.dark {
-  --background: oklch(...);     /* Novo valor dark do Figma */
-  --foreground: oklch(...);     /* Novo valor dark do Figma */
-  /* ... todos os tokens com valores dark ... */
-}
-```
-
-### Step 3: Adicionar Extensoes no @theme inline
-
-Se o Figma define tokens extras (warning, info, success, etc.):
-
-```css
-@theme inline {
-  /* Existing bridges */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  /* ... existentes ... */
-
-  /* Extensions from Figma DS */
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
-  --color-info: var(--info);
-  --color-info-foreground: var(--info-foreground);
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-}
-```
-
-E adicionar os valores em `:root` e `.dark`:
-
-```css
-:root {
-  /* ... core tokens ... */
-  --warning: oklch(...);
-  --warning-foreground: oklch(...);
-  --info: oklch(...);
-  --info-foreground: oklch(...);
-  --success: oklch(...);
-  --success-foreground: oklch(...);
-}
-```
-
-### Step 4: Preservar Estrutura
-
-**NAO alterar:**
-- Imports (`@import`)
-- `@custom-variant dark`
-- `@layer base` block
-- Ordem das sections
-
-**Manter se Figma nao fornecer:**
-- Chart tokens (--chart-1 through --chart-5) — usar defaults
-- Sidebar tokens — derivar de core tokens se nao fornecido:
-  - `--sidebar: var(--background)` pattern
-
-### Step 5: Validar Sintaxe
-
-Verificar que o CSS resultante e valido:
-- Todos os valores OKLch tem formato correto: `oklch(L C H)` ou `oklch(L C H / alpha)`
-- Todas as variaveis referenciadas existem
-- Nenhuma variavel duplicada
-- Nenhuma variavel do shadcn original foi removida sem substituto
-
-## Regras Criticas
-
-1. **NUNCA remover uma variavel** que os 56 componentes shadcn possam referenciar
-2. **SEMPRE usar OKLch** para valores de cor
-3. **MANTER a ordem** das sections no arquivo
-4. **NAO adicionar** CSS custom (classes, resets, etc.) — apenas variaveis
-5. **Extensoes** devem ter bridge em `@theme inline` para funcionar com Tailwind
-
-## Output
-
-- `app/app/globals.css` modificado com novos tokens
-- Log de mudancas: quais tokens foram substituidos, quais adicionados, quais mantidos
-
-## Related Checklists
-
-- `squads/design/checklists/token-mapping-checklist.md`
+# f1-apply-foundations
+
+> **Phase 1, Step 3** — Aplicar tokens mapeados no globals.css e @theme inline.
+
+## Metadata
+
+```yaml
+task:
+  id: f1-apply-foundations
+  phase: 1
+  step: 3
+  agent: ds-foundations-lead
+  depends_on: f1-map-tokens-to-shadcn
+  blocking: false
+  next: f1-qa-foundations
+```
+
+## Objetivo
+
+Editar `app/app/globals.css` para substituir os tokens default do shadcn pelos tokens mapeados do Figma, mantendo a estrutura do arquivo intacta.
+
+## Target File
+
+`app/app/globals.css`
+
+## Estrutura Atual do globals.css
+
+```css
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  /* Tailwind bridge: --color-{name}: var(--{name}) */
+  /* Radius scale: --radius-{size}: calc(var(--radius) ± offset) */
+}
+
+:root {
+  /* Light mode tokens in OKLch */
+}
+
+.dark {
+  /* Dark mode tokens in OKLch */
+}
+
+@layer base {
+  * { @apply border-border outline-ring/50; }
+  body { @apply bg-background text-foreground; }
+}
+```
+
+## Execution Steps
+
+### Step 1: Substituir Valores em `:root`
+
+Para cada token mapeado, substituir o valor OKLch:
+
+```css
+:root {
+  --radius: 0.625rem;          /* Usar valor do Figma se fornecido */
+  --background: oklch(...);     /* Novo valor do Figma */
+  --foreground: oklch(...);     /* Novo valor do Figma */
+  /* ... todos os 18 core tokens ... */
+  /* ... 5 chart tokens ... */
+  /* ... 8 sidebar tokens ... */
+}
+```
+
+### Step 2: Substituir Valores em `.dark`
+
+Para cada token mapeado com valor dark:
+
+```css
+.dark {
+  --background: oklch(...);     /* Novo valor dark do Figma */
+  --foreground: oklch(...);     /* Novo valor dark do Figma */
+  /* ... todos os tokens com valores dark ... */
+}
+```
+
+### Step 3: Adicionar Extensoes no @theme inline
+
+Se o Figma define tokens extras (warning, info, success, etc.):
+
+```css
+@theme inline {
+  /* Existing bridges */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  /* ... existentes ... */
+
+  /* Extensions from Figma DS */
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+}
+```
+
+E adicionar os valores em `:root` e `.dark`:
+
+```css
+:root {
+  /* ... core tokens ... */
+  --warning: oklch(...);
+  --warning-foreground: oklch(...);
+  --info: oklch(...);
+  --info-foreground: oklch(...);
+  --success: oklch(...);
+  --success-foreground: oklch(...);
+}
+```
+
+### Step 4: Preservar Estrutura
+
+**NAO alterar:**
+- Imports (`@import`)
+- `@custom-variant dark`
+- `@layer base` block
+- Ordem das sections
+
+**Manter se Figma nao fornecer:**
+- Chart tokens (--chart-1 through --chart-5) — usar defaults
+- Sidebar tokens — derivar de core tokens se nao fornecido:
+  - `--sidebar: var(--background)` pattern
+
+### Step 5: Validar Sintaxe
+
+Verificar que o CSS resultante e valido:
+- Todos os valores OKLch tem formato correto: `oklch(L C H)` ou `oklch(L C H / alpha)`
+- Todas as variaveis referenciadas existem
+- Nenhuma variavel duplicada
+- Nenhuma variavel do shadcn original foi removida sem substituto
+
+## Regras Criticas
+
+1. **NUNCA remover uma variavel** que os 56 componentes shadcn possam referenciar
+2. **SEMPRE usar OKLch** para valores de cor
+3. **MANTER a ordem** das sections no arquivo
+4. **NAO adicionar** CSS custom (classes, resets, etc.) — apenas variaveis
+5. **Extensoes** devem ter bridge em `@theme inline` para funcionar com Tailwind
+
+## Output
+
+- `app/app/globals.css` modificado com novos tokens
+- Log de mudancas: quais tokens foram substituidos, quais adicionados, quais mantidos
+
+## Related Checklists
+
+- `squads/design/checklists/token-mapping-checklist.md`

package/pro/squads/design/tasks/f1-ingest-figma-tokens.md

@@ -1,130 +1,130 @@
-# f1-ingest-figma-tokens
-
-> **Phase 1, Step 1** — Receber e normalizar tokens do Figma para estrutura intermediaria.
-
-## Metadata
-
-```yaml
-task:
-  id: f1-ingest-figma-tokens
-  phase: 1
-  step: 1
-  agent: ds-foundations-lead
-  delegates_to: ds-token-architect
-  blocking: false
-  next: f1-map-tokens-to-shadcn
-```
-
-## Objetivo
-
-Receber tokens do usuario em qualquer formato suportado e normalizar para uma estrutura JSON intermediaria categorizada.
-
-## Formatos de Input Aceitos
-
-1. **CSS do Dev Mode** — Copy-paste de variaveis CSS do Figma Dev Mode
-2. **JSON export** — Tokens Studio ou Figma Variables API export
-3. **Texto manual** — Lista `nome: valor` fornecida pelo usuario
-4. **Screenshots** — Com validacao humana obrigatoria (marcar valores incertos como `NEEDS_CONFIRMATION`)
-
-## Execution Steps
-
-### Step 1: Solicitar Input
-
-Pergunte ao usuario:
-
-```
-Qual formato voce vai usar para os tokens?
-1. CSS do Figma Dev Mode (copy-paste)
-2. JSON export (Tokens Studio / Variables API)
-3. Lista manual (nome: valor)
-4. Screenshot (precisa validacao manual)
-
-Cole os tokens aqui:
-```
-
-### Step 2: Parse Input
-
-Para cada formato:
-
-- **CSS**: Extrair pares `--nome: valor` de blocos `:root` e `.dark`/`[data-theme]`
-- **JSON**: Extrair tokens respeitando hierarquia de grupos
-- **Manual**: Parsear linhas `nome: valor` ou `nome = valor`
-- **Screenshot**: Solicitar que o usuario confirme cada valor extraido
-
-### Step 3: Categorizar
-
-Organizar tokens nas categorias:
-
-| Categoria | Exemplos |
-|-----------|----------|
-| `color` | Paletas, semanticos, brand colors |
-| `spacing` | Gaps, paddings, margins |
-| `typography` | Font family, size, weight, line-height, letter-spacing |
-| `radius` | Border radius values |
-| `shadow` | Box shadows, drop shadows |
-| `opacity` | Alpha values |
-| `motion` | Duration, easing (se fornecido) |
-
-### Step 4: Identificar Modos
-
-- Detectar se existem modos (light/dark, brand themes)
-- Se apenas um conjunto de valores: assumir `default` mode
-- Se dois conjuntos (claro/escuro): mapear como `default` e `dark`
-
-### Step 5: Normalizar Output
-
-Gerar JSON intermediario:
-
-```json
-{
-  "meta": {
-    "source": "figma-dev-mode",
-    "inputFormat": "css",
-    "timestamp": "2026-02-21T...",
-    "modes": ["default", "dark"]
-  },
-  "tokens": {
-    "color": {
-      "primitives": {
-        "blue-500": { "value": "#3B82F6", "type": "color" }
-      },
-      "semantic": {
-        "primary": { "value": "{color.primitives.blue-500}", "type": "color" },
-        "primary-foreground": { "value": "#FFFFFF", "type": "color" }
-      }
-    },
-    "spacing": {},
-    "typography": {},
-    "radius": {},
-    "shadow": {}
-  },
-  "dark": {
-    "color": {
-      "semantic": {
-        "primary": { "value": "{color.primitives.blue-400}", "type": "color" }
-      }
-    }
-  }
-}
-```
-
-## Validacao
-
-- [ ] Pelo menos uma categoria de token tem valores
-- [ ] Valores de cor sao validos (hex, rgb, hsl, oklch)
-- [ ] Nenhum valor vazio ou placeholder
-- [ ] Modos identificados corretamente
-- [ ] Screenshots tem confirmacao humana
-
-## Output
-
-- Estrutura JSON normalizada (em memoria ou `squads/design/data/tokens-normalized.json`)
-- Report de tokens recebidos por categoria
-
-## Referencia
-
-- IO contract de `@ds-token-architect`: `squads/design/agents/ds-token-architect.md` → `io_contract.inputs.accepted_formats`
-
-## Related Checklists
-
-- `squads/design/checklists/token-mapping-checklist.md`
+# f1-ingest-figma-tokens
+
+> **Phase 1, Step 1** — Receber e normalizar tokens do Figma para estrutura intermediaria.
+
+## Metadata
+
+```yaml
+task:
+  id: f1-ingest-figma-tokens
+  phase: 1
+  step: 1
+  agent: ds-foundations-lead
+  delegates_to: ds-token-architect
+  blocking: false
+  next: f1-map-tokens-to-shadcn
+```
+
+## Objetivo
+
+Receber tokens do usuario em qualquer formato suportado e normalizar para uma estrutura JSON intermediaria categorizada.
+
+## Formatos de Input Aceitos
+
+1. **CSS do Dev Mode** — Copy-paste de variaveis CSS do Figma Dev Mode
+2. **JSON export** — Tokens Studio ou Figma Variables API export
+3. **Texto manual** — Lista `nome: valor` fornecida pelo usuario
+4. **Screenshots** — Com validacao humana obrigatoria (marcar valores incertos como `NEEDS_CONFIRMATION`)
+
+## Execution Steps
+
+### Step 1: Solicitar Input
+
+Pergunte ao usuario:
+
+```
+Qual formato voce vai usar para os tokens?
+1. CSS do Figma Dev Mode (copy-paste)
+2. JSON export (Tokens Studio / Variables API)
+3. Lista manual (nome: valor)
+4. Screenshot (precisa validacao manual)
+
+Cole os tokens aqui:
+```
+
+### Step 2: Parse Input
+
+Para cada formato:
+
+- **CSS**: Extrair pares `--nome: valor` de blocos `:root` e `.dark`/`[data-theme]`
+- **JSON**: Extrair tokens respeitando hierarquia de grupos
+- **Manual**: Parsear linhas `nome: valor` ou `nome = valor`
+- **Screenshot**: Solicitar que o usuario confirme cada valor extraido
+
+### Step 3: Categorizar
+
+Organizar tokens nas categorias:
+
+| Categoria | Exemplos |
+|-----------|----------|
+| `color` | Paletas, semanticos, brand colors |
+| `spacing` | Gaps, paddings, margins |
+| `typography` | Font family, size, weight, line-height, letter-spacing |
+| `radius` | Border radius values |
+| `shadow` | Box shadows, drop shadows |
+| `opacity` | Alpha values |
+| `motion` | Duration, easing (se fornecido) |
+
+### Step 4: Identificar Modos
+
+- Detectar se existem modos (light/dark, brand themes)
+- Se apenas um conjunto de valores: assumir `default` mode
+- Se dois conjuntos (claro/escuro): mapear como `default` e `dark`
+
+### Step 5: Normalizar Output
+
+Gerar JSON intermediario:
+
+```json
+{
+  "meta": {
+    "source": "figma-dev-mode",
+    "inputFormat": "css",
+    "timestamp": "2026-02-21T...",
+    "modes": ["default", "dark"]
+  },
+  "tokens": {
+    "color": {
+      "primitives": {
+        "blue-500": { "value": "#3B82F6", "type": "color" }
+      },
+      "semantic": {
+        "primary": { "value": "{color.primitives.blue-500}", "type": "color" },
+        "primary-foreground": { "value": "#FFFFFF", "type": "color" }
+      }
+    },
+    "spacing": {},
+    "typography": {},
+    "radius": {},
+    "shadow": {}
+  },
+  "dark": {
+    "color": {
+      "semantic": {
+        "primary": { "value": "{color.primitives.blue-400}", "type": "color" }
+      }
+    }
+  }
+}
+```
+
+## Validacao
+
+- [ ] Pelo menos uma categoria de token tem valores
+- [ ] Valores de cor sao validos (hex, rgb, hsl, oklch)
+- [ ] Nenhum valor vazio ou placeholder
+- [ ] Modos identificados corretamente
+- [ ] Screenshots tem confirmacao humana
+
+## Output
+
+- Estrutura JSON normalizada (em memoria ou `squads/design/data/tokens-normalized.json`)
+- Report de tokens recebidos por categoria
+
+## Referencia
+
+- IO contract de `@ds-token-architect`: `squads/design/agents/ds-token-architect.md` → `io_contract.inputs.accepted_formats`
+
+## Related Checklists
+
+- `squads/design/checklists/token-mapping-checklist.md`