trdr-ds-install 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trdr-ds-install",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Installs the TRDR Design System skill for Claude Code",
   "bin": {
     "trdr-ds-install": "./bin/install.js"

package/plugins/trdr-design-system/skills/trdr-ds/SKILL.md

@@ -61,6 +61,16 @@ Search: `var\(--color-|var\(--space-` in CSS/SCSS/component files
 **E — Missing tokens.css**:
 Check if `tokens.css` already exists in the project and if it's imported in the global CSS.
 
+**F — Hardcoded rgba colors** (should use DS semantic tokens or be flagged):
+Search: `rgba\(` in CSS/SCSS/HTML files (excluding node_modules, vendor)
+
+**G — Custom gradients (non-TRDR)** (should use var(--gradient-*) tokens):
+Search: `linear-gradient|radial-gradient` in CSS/SCSS/HTML files
+Flag any gradient that doesn't reference a TRDR gradient token (`var(--gradient-*)`)
+
+**H — Hardcoded font-size in px** (should use .trdr-h* / .trdr-body-* text style classes):
+Search: `font-size:\s*\d+px` in CSS/SCSS files (skip tokens.css itself)
+
 ### Step 4 — Fetch latest component list from Hub
 
 Fetch the component catalog to know what's currently available:
@@ -105,6 +115,9 @@ Output the following report and **do not proceed** until the developer explicitl
 | Hardcoded fonts | N | `font-family: Inter` in globals.css:8 |
 | Hardcoded spacing | N | `padding: 16px` in Card.css:22 |
 | Primitive token use | N | `var(--color-blue-600)` in Badge.css:31 |
+| Hardcoded rgba | N | `background: rgba(0,0,0,.3)` in card.css:88 |
+| Custom gradients | N | `linear-gradient(135deg, #FF6B6B...)` in header:24 |
+| Hardcoded font-size | N | `font-size: 22px` in card.css:99 |
 
 ### TRDR COMPONENTS AVAILABLE (from Hub):
 [List implemented components from the Hub catalog — these have ready-to-use code]
@@ -531,135 +544,92 @@ Create `tokens.css` in the detected styles directory with this content:
 
 ### Step 2 — Create components.css
 
-Create `components.css` in the same directory as tokens.css. Fetch the latest version from the Hub:
+Fetch all component CSS directly from the Hub. The Hub is the single source of truth — **NEVER use a static fallback. No exceptions.**
+
+#### Step 2.a — Fetch component utility classes
 
 ```
 WebFetch: https://trdr.mrocontent.com.br/design-md
 ```
 
-Extract the component utility classes section (`.trdr-*` classes). This fetch always gets the most up-to-date classes, including any new components added to the Hub since the last skill update.
+Extract all CSS code blocks from the page that contain `.trdr-*` classes. Copy them verbatim into `components.css`.
 
-If the Hub is unreachable, use this baseline (contains all components as of skill version 1.0):
+**Known Hub components (v1.4) — verify all are present after fetch:**
+
+| Slug | CSS Class Prefix |
+|------|-----------------|
+| `button` | `.trdr-btn` |
+| `card` | `.trdr-card` |
+| `text-input` | `.trdr-input` |
+| `dropdown` | `.trdr-dropdown` |
+| `combo-input` | `.trdr-combo` |
+| `checkbox` | `.trdr-checkbox` |
+| `radio-button` | `.trdr-radio` |
+| `switch` | `.trdr-switch` |
+| `segmented-control` | `.trdr-segment` |
+| `tooltip` | `.trdr-tooltip` |
+| `abas` | `.trdr-tabs` |
+| `sub-menu-item` | `.trdr-submenu` |
+| `boleta` | `.trdr-boleta` |
+
+For any component whose CSS prefix is not found in the `/design-md` output, fetch its individual page:
+
+```
+WebFetch: https://trdr.mrocontent.com.br/componentes/[slug]
+```
+
+Extract the CSS code block from that page and append it to `components.css`.
+
+**If the Hub is unreachable at any point → STOP. Do NOT proceed with any fallback.**
+Report to the developer:
+> ❌ Hub unreachable (https://trdr.mrocontent.com.br). Cannot create components.css — the DS Hub is required for faithful component implementation. Retry when the Hub is accessible.
+
+#### Step 2.b — Add typography text style classes
+
+After the component classes, append the following text style utility classes to `components.css`. These represent the Hub's Text Styles spec (H1–H7, B1–B5, Auxiliar, L2–L3). If `/design-md` already contains these classes verbatim, use those instead.
 
 ```css
 /* ==========================================================================
-   TRDR Design Hub — Component utility classes
-   Always fetch latest from: https://trdr.mrocontent.com.br
+   TRDR Design System — Text Style Utility Classes
+   Source: https://trdr.mrocontent.com.br | Text Styles spec
    ========================================================================== */
 
-/* Card */
-.trdr-card {
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  padding: var(--spacing-2xl);
-}
-.trdr-card-hover {
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  padding: var(--spacing-2xl);
-  transition: border-color 0.15s ease, background-color 0.15s ease;
-}
-.trdr-card-hover:hover {
-  border-color: var(--border-default);
-  background-color: var(--bg-tertiary);
-}
+/* Headings — var(--font-primary) = JetBrains Mono */
+.trdr-h1 { font-family: var(--font-primary); font-size: 80px; font-weight: 500; line-height: 1.1; }
+.trdr-h2 { font-family: var(--font-primary); font-size: 56px; font-weight: 500; line-height: 1.1; }
+.trdr-h3 { font-family: var(--font-primary); font-size: 46px; font-weight: 700; line-height: 1.15; }
+.trdr-h4 { font-family: var(--font-primary); font-size: 38px; font-weight: 500; line-height: 1.15; }
+.trdr-h5 { font-family: var(--font-primary); font-size: 32px; font-weight: 500; line-height: 1.2; }
+.trdr-h6 { font-family: var(--font-primary); font-size: 26px; font-weight: 500; line-height: 1.2; }
+.trdr-h7 { font-family: var(--font-secondary); font-size: 22px; font-weight: 600; line-height: 1.3; }
+
+/* Body — var(--font-secondary) = Inter */
+.trdr-body-b1  { font-family: var(--font-secondary); font-size: 18px; font-weight: 400; line-height: 1.6; }
+.trdr-body-b2  { font-family: var(--font-secondary); font-size: 16px; font-weight: 500; line-height: 1.5; }
+.trdr-body-b3  { font-family: var(--font-secondary); font-size: 14px; font-weight: 400; line-height: 1.5; }
+.trdr-body-b4  { font-family: var(--font-secondary); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.2px; }
+.trdr-body-b5  { font-family: var(--font-secondary); font-size: 10px; font-weight: 400; line-height: 1.4; }
+.trdr-body-aux { font-family: var(--font-secondary); font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0.24px; }
+
+/* Labels — var(--font-secondary) = Inter */
+.trdr-label-l2 { font-family: var(--font-secondary); font-size: 16px; font-weight: 600; line-height: 1.4; }
+.trdr-label-l3 { font-family: var(--font-secondary); font-size: 14px; font-weight: 600; line-height: 1.4; }
+```
 
-/* Gradient text */
-.trdr-gradient-text {
-  background: linear-gradient(90deg, var(--action-brand-default) 30%, #FFFFFF 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
+#### Step 2.c — Flag missing components
 
-/* Buttons */
-.trdr-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-xs);
-  height: 24px;
-  padding: 0 var(--spacing-sm);
-  border-radius: var(--radius-md);
-  font-family: var(--font-secondary);
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 1;
-  white-space: nowrap;
-  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
-  cursor: pointer;
-  border: none;
-  text-decoration: none;
-}
-.trdr-btn-lg { height: 32px; padding: 0 var(--spacing-md); font-size: 14px; }
-
-.trdr-btn-primary { background-color: var(--action-brand-inverse-default); color: var(--content-primary); border: 0.5px solid var(--action-brand-inverse-default); }
-.trdr-btn-primary:hover  { background-color: var(--action-brand-inverse-hover); border-color: var(--action-brand-inverse-hover); }
-.trdr-btn-primary:active { background-color: var(--action-brand-inverse-active); }
-.trdr-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
-
-.trdr-btn-secondary { background-color: var(--action-secondary-default); color: var(--content-primary); }
-.trdr-btn-secondary:hover  { background-color: var(--action-secondary-hover); }
-.trdr-btn-secondary:active { background-color: var(--action-secondary-active); }
-.trdr-btn-secondary:disabled { background-color: var(--action-secondary-disabled); color: var(--content-disabled); cursor: not-allowed; }
-
-.trdr-btn-ghost { background-color: transparent; color: var(--content-secondary); border: 1px solid var(--border-default); }
-.trdr-btn-ghost:hover  { background-color: var(--surface-secondary); border-color: var(--border-strong); color: var(--content-primary); }
-.trdr-btn-ghost:active { background-color: var(--surface-primary); }
-.trdr-btn-ghost:disabled { color: var(--content-disabled); border-color: var(--border-disabled); cursor: not-allowed; opacity: 0.5; }
-
-.trdr-btn-destructive { background-color: var(--action-destructive-default); color: var(--content-primary); }
-.trdr-btn-destructive:hover  { background-color: var(--action-destructive-hover); }
-.trdr-btn-destructive:active { background-color: var(--action-destructive-active); }
-
-.trdr-btn-link { background-color: transparent; color: var(--content-brand); padding-left: 0; padding-right: 0; }
-.trdr-btn-link:hover  { color: var(--action-brand-hover); text-decoration: underline; }
-
-.trdr-btn-long { background-color: var(--context-trading-long-default); color: var(--context-trading-long-text); min-width: 80px; }
-.trdr-btn-long:hover  { background-color: var(--context-trading-long-hover); }
-.trdr-btn-long:active { background-color: var(--context-trading-long-active); }
-
-.trdr-btn-short { background-color: var(--context-trading-short-default); color: var(--context-trading-short-text); min-width: 80px; }
-.trdr-btn-short:hover  { background-color: var(--context-trading-short-hover); }
-.trdr-btn-short:active { background-color: var(--context-trading-short-active); }
-
-/* Badge */
-.trdr-badge { display: inline-flex; align-items: center; height: 16px; padding: 0 4px; border-radius: 5px; font-family: var(--font-secondary); font-size: 12px; font-weight: 500; white-space: nowrap; }
-.trdr-badge-brand   { background-color: var(--surface-brand); color: var(--content-brand); border: 1px solid var(--border-subtle); }
-.trdr-badge-success { background-color: var(--surface-success); color: var(--content-success); border: 1px solid var(--border-subtle); }
-.trdr-badge-neutral { background-color: var(--surface-secondary); color: var(--content-tertiary); border: 1px solid var(--border-subtle); }
-.trdr-badge-warning { background-color: var(--surface-warning); color: var(--content-warning); }
-
-/* Segmented control */
-.trdr-segment-control { display: inline-flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }
-.trdr-segment { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--spacing-lg); font-family: var(--font-secondary); font-size: 14px; cursor: pointer; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; }
-.trdr-segment-active   { background-color: var(--action-brand-inverse-default); color: var(--content-primary); }
-.trdr-segment-inactive { background-color: var(--surface-secondary); color: var(--content-tertiary); }
-.trdr-segment-inactive:hover { color: var(--content-secondary); }
-
-/* Input */
-.trdr-input { width: 100%; height: 36px; padding: 0 var(--spacing-md); background-color: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--content-primary); font-family: var(--font-secondary); font-size: 13px; outline: none; transition: border-color 0.15s ease; }
-.trdr-input::placeholder { color: var(--content-tertiary); }
-.trdr-input:focus { border-color: var(--border-focus); }
-
-/* Table */
-.trdr-table { width: 100%; border-collapse: collapse; }
-.trdr-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--content-tertiary); padding: var(--spacing-sm) var(--spacing-lg); border-bottom: 1px solid var(--border-subtle); }
-.trdr-table td { padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--border-subtle); font-size: 13px; color: var(--content-secondary); vertical-align: middle; }
-.trdr-table tr:last-child td { border-bottom: none; }
-.trdr-table tr:hover td { background-color: var(--bg-tertiary); }
-
-/* Divider */
-.trdr-divider { width: 100%; height: 1px; background-color: var(--border-subtle); margin: var(--spacing-2xl) 0; }
-
-/* Section headings */
-.trdr-section-title { font-family: var(--font-primary); font-size: 24px; font-weight: 500; color: var(--content-primary); margin-bottom: var(--spacing-sm); }
-.trdr-section-subtitle { font-size: 14px; color: var(--content-tertiary); margin-bottom: var(--spacing-3xl); line-height: 1.5; }
-```
+If the developer's project uses a UI pattern that has no corresponding Hub component (e.g., a date picker, a data table, a modal), do NOT invent CSS for it. Instead, create or append to `MISSING_COMPONENTS.md` at the project root:
+
+```markdown
+# Missing Hub Components
 
-> **Note for new components:** As new components are added to the Hub, their CSS classes will appear in the Hub's designtokens.md and component pages. Always fetch from the Hub when you need a component that isn't in this baseline.
+These patterns were found in the project but have no corresponding component in the TRDR Design Hub.
+Request their implementation at: https://trdr.mrocontent.com.br
+
+| Pattern found | File | Status |
+|---------------|------|--------|
+| [pattern name] | [file:line] | ⚠️ Missing from Hub |
+```
 
 ### Step 3 — Update global CSS
 
@@ -693,6 +663,8 @@ Full reference: https://trdr.mrocontent.com.br
 5. Fonts: --font-primary = JetBrains Mono (headings) | --font-secondary = Inter (body) | --font-mono = Roboto Mono (numbers)
 6. Spacing: always var(--spacing-xs/sm/md/lg/xl/2xl/3xl) — never hardcoded px
 7. Border radius: always var(--radius-sm/md/lg/full) — never hardcoded px
+8. Text styles: use .trdr-h1/.../h7 for headings, .trdr-body-b1/.../b5 for paragraphs, .trdr-label-l2/l3 for labels — never raw font-size px
+9. No colors outside the DS anywhere — rgba(), inline gradients, hardcoded hex all require a semantic token. No exceptions.
 
 ## Token files
 - Tokens: [detected-path]/tokens.css
@@ -713,18 +685,24 @@ Full reference: https://trdr.mrocontent.com.br
 | Error | --content-error | #F34F45 |
 | Warning | --content-warning | #FFCC40 |
 
+## Text Style Classes
+Headings: .trdr-h1 (80px) → .trdr-h2 (56px) → .trdr-h3 (46px) → .trdr-h4 (38px) → .trdr-h5 (32px) → .trdr-h6 (26px) → .trdr-h7 (22px/Inter)
+Body: .trdr-body-b1 (18px) → .trdr-body-b2 (16px) → .trdr-body-b3 (14px) → .trdr-body-b4 (12px) → .trdr-body-b5 (10px) → .trdr-body-aux (12px/letter-spacing)
+Labels: .trdr-label-l2 (16px/semibold) → .trdr-label-l3 (14px/semibold)
+All headings use var(--font-primary) = JetBrains Mono. Body/labels use var(--font-secondary) = Inter.
+
 ## Pre-built component classes
 .trdr-btn, .trdr-btn-primary, .trdr-btn-secondary, .trdr-btn-ghost, .trdr-btn-destructive
 .trdr-btn-long (buy), .trdr-btn-short (sell)
 .trdr-badge, .trdr-badge-brand, .trdr-badge-success, .trdr-badge-neutral
 .trdr-card, .trdr-card-hover
-.trdr-input
-.trdr-table
+.trdr-input, .trdr-dropdown, .trdr-combo, .trdr-checkbox, .trdr-radio, .trdr-switch
 .trdr-segment-control, .trdr-segment-active, .trdr-segment-inactive
+.trdr-tabs, .trdr-submenu, .trdr-tooltip, .trdr-boleta
 
 ## Getting component code
 For any component, go to: https://trdr.mrocontent.com.br/componentes/[slug]
-Available: button, text-input, switch, dropdown, checkbox, radio-button, combo-input, tooltip, boleta
+Available: button, text-input, switch, dropdown, checkbox, radio-button, combo-input, tooltip, boleta, segmented-control, abas, sub-menu-item, card
 (Check Hub for latest — new components are added regularly)
 
 ## Layer hierarchy
@@ -779,11 +757,45 @@ For each violation found in Phase 1, apply the semantic token replacement.
 
 **Ambiguous colors:** Use property context to decide — `background-color` → bg/surface token, `color` → content token, `border-color` → border token.
 
+**rgba() mapping:**
+| Hardcoded pattern | Context | Replace with |
+|-------------------|---------|-------------|
+| `rgba(0,0,0,*)` | box-shadow | No TRDR shadow token exists → flag in DS_MIGRATION.md as "Missing shadow token" |
+| `rgba(255,255,255,.29)` approx | overlay/backdrop | `var(--bg-overlay)` |
+| `rgba(255,255,255,*)` other | overlay | flag in DS_MIGRATION.md |
+| Any other `rgba(N,N,N,*)` | various | Map to nearest semantic alpha token (--surface-brand, --surface-info, --action-*-alpha, etc.) or flag |
+
+**Gradient mapping:**
+| Pattern | Replace with |
+|---------|-------------|
+| `linear-gradient(...)` using only TRDR brand colors | `var(--gradient-text-brand)`, `var(--gradient-bg-hero)`, or `var(--gradient-bg-fade)` as appropriate |
+| `linear-gradient(...)` using any non-DS colors | Flag in DS_MIGRATION.md as non-compliant — developer must decide: remove, replace with a TRDR gradient token, or add a new token to the Hub |
+| Gradient inside SVG data URI embedded in CSS | Flag in DS_MIGRATION.md |
+
+**Font-size mapping:**
+| Hardcoded value | Replace with |
+|----------------|-------------|
+| `font-size: 80px` | Add `.trdr-h1` class to the element; remove the rule |
+| `font-size: 56px` | `.trdr-h2` class |
+| `font-size: 46px` | `.trdr-h3` class |
+| `font-size: 38px` | `.trdr-h4` class |
+| `font-size: 32px` | `.trdr-h5` class |
+| `font-size: 26px` | `.trdr-h6` class |
+| `font-size: 22px` | `.trdr-h7` class |
+| `font-size: 18px` | `.trdr-body-b1` class |
+| `font-size: 16px` | `.trdr-body-b2` or `.trdr-label-l2` (check weight context) |
+| `font-size: 14px` | `.trdr-body-b3` or `.trdr-label-l3` (check weight context) |
+| `font-size: 12px` | `.trdr-body-b4` or `.trdr-body-aux` (check letter-spacing) |
+| `font-size: 10px` | `.trdr-body-b5` class |
+| `font-size: [other px]` | Nearest text style class — flag in DS_MIGRATION.md if no match |
+
 **Do NOT replace:**
-- Hex values inside SVG paths or image files
-- Values in third-party library overrides where the semantic token would break the library layout
+- Hex values inside binary image files (PNG, JPG, GIF)
+- SVG external files — flag them in DS_MIGRATION.md but do not auto-edit
 - Values in commented-out code
 
+**All other values MUST be replaced or flagged.** There are no exceptions for "decorative" gradients, shadows, or overlays. If no semantic token exists for a given pattern, flag it in DS_MIGRATION.md under "Missing DS tokens" and notify the developer to request the token in the Hub.
+
 ### Step 6 — Fetch component-specific code (if applicable)
 
 If the developer's project has components that match TRDR component patterns (buttons, inputs, dropdowns, etc.), offer to fetch the exact code from the Hub:
@@ -834,6 +846,16 @@ Check these before shipping:
 - [ ] **Skipped files**: [list any files excluded from migration]
   These still have hardcoded values — migrate manually or run /trdr-ds again
 
+## Missing DS tokens (flagged — no semantic token available)
+[List patterns found in the project that have no TRDR token yet — request these in the Hub]
+| Pattern | File | Suggestion |
+|---------|------|-----------|
+| `box-shadow: rgba(0,0,0,*)` | [file:line] | Request shadow token in Hub |
+| `linear-gradient(...)` non-TRDR | [file:line] | Request gradient token or remove |
+
+## Missing Hub components (flagged)
+[See MISSING_COMPONENTS.md if generated]
+
 ## Design System Reference
 - Hub: https://trdr.mrocontent.com.br
 - Tokens: https://trdr.mrocontent.com.br/tokens/semanticos

package/plugins/trdr-design-system/skills/trdr-ds/references/rules.md

@@ -16,9 +16,9 @@ Use os equivalentes semânticos: bg.*, surface.*, content.*, scale.spacing.*
 Tabelas de preços, P&L, quantidades, qualquer dado numérico de trading.
 - `font-family: var(--font-mono)`
 
-### Regra 4 — Títulos de página e headings → Space Grotesk
-Space Grotesk é a fonte primária da marca TRDR.
-- `font-family: var(--font-primary)`
+### Regra 4 — Títulos de página e headings → JetBrains Mono
+JetBrains Mono é a fonte primária do TRDR DS (`--font-primary`). Use as classes de text style.
+- `font-family: var(--font-primary)` — ou melhor: classe `.trdr-h1` a `.trdr-h6`
 
 ### Regra 5 — Todo restante da UI → Inter
 Body text, labels, inputs, nav, tooltips — tudo que não é heading ou número.
@@ -67,6 +67,19 @@ bg.primary (fundo base)
 | Candle verde | context.chart.candles.up |
 | Candle vermelho | context.chart.candles.down |
 
+### Regra 8 — Text Styles → sempre use as classes utilitárias
+Nunca use `font-size` em px diretamente. Use as classes de text style do DS:
+- Títulos: `.trdr-h1` a `.trdr-h7`
+- Corpo: `.trdr-body-b1` a `.trdr-body-b5`, `.trdr-body-aux`
+- Labels: `.trdr-label-l2`, `.trdr-label-l3`
+
+### Regra 9 — Nenhuma cor fora do DS, em lugar nenhum
+`rgba()`, gradientes inline, `#hex` hardcoded são SEMPRE uma violação — sem exceções para gradientes "decorativos" ou sombras.
+Se não existe token semântico para o padrão → registrar em `MISSING_COMPONENTS.md` e solicitar o token no Hub.
+- ❌ `box-shadow: 0 4px 16px rgba(0,0,0,.3)`
+- ❌ `background: linear-gradient(135deg, #FF6B6B, #4158F6)`
+- ✅ Usar token semântico existente ou solicitar novo token ao Hub
+
 ---
 
 ## Hub de Referência