trdr-ds-install 1.0.2 → 1.2.0

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

package/plugins/trdr-design-system/skills/trdr-ds/references/tokens.css

@@ -0,0 +1,399 @@
+/*
+ * SNAPSHOT — TRDR Design Tokens
+ * Sincronizado de: ../trdr-design-hub
+ * Em: 2026-05-08T21:43:59.388Z
+ * Não edite manualmente — atualize via "npm run sync-tokens"
+ */
+
+/* ==========================================================================
+   TRDR Design System — CSS Variables
+   Fonte: Figma Variables | Atualizado: 2026-05-06
+   ========================================================================== */
+
+:root {
+
+  /* =========================================================================
+     PRIMITIVOS — CORES
+     Nunca use diretamente na UI. Use tokens semânticos.
+     ========================================================================= */
+
+  /* Brand Cyan (renomeado de Azul — escala brand principal) */
+  --color-blue-50: #E6FEFF;
+  --color-blue-100: #CCFDFF;
+  --color-blue-200: #99F9FF;
+  --color-blue-300: #5CF3FF;
+  --color-blue-400: #29ECFF;
+  --color-blue-500: #00D4FF;
+  --color-blue-600: #00A8CC;
+  --color-blue-700: #007D99;
+  --color-blue-800: #005266;
+  --color-blue-900: #002933;
+  --color-blue-alpha-08: #00D4FF14;
+  --color-blue-alpha-16: #00D4FF29;
+  --color-blue-alpha-32: #00D4FF52;
+
+  /* Neutro */
+  --color-neutral-0: #FFFFFF;
+  --color-neutral-50: #FAFAFA;
+  --color-neutral-100: #EEEEEE;
+  --color-neutral-200: #E8E8E8;
+  --color-neutral-300: #D2D2D2;
+  --color-neutral-400: #BCBCBC;
+  --color-neutral-500: #A4A4A4;
+  --color-neutral-600: #777777;
+  --color-neutral-700: #4A4A4A;
+  --color-neutral-800: #222222;
+  --color-neutral-900: #1A1A1A;
+  --color-neutral-1000: #141519;
+  --color-neutral-1200: #0E0E0E;
+
+  /* Verde */
+  --color-green-50: #F0FFF7;
+  --color-green-100: #CCFFDF;
+  --color-green-200: #99FFBF;
+  --color-green-300: #66FFA0;
+  --color-green-400: #33FF80;
+  --color-green-500: #00FF60;
+  --color-green-600: #31DD7E;
+  --color-green-700: #00CC4D;
+  --color-green-800: #009933;
+  --color-green-900: #00661F;
+  --color-green-alpha-08: #4FE29014;
+  --color-green-alpha-12: #4FE2901F;
+  --color-green-alpha-16: #4FE29029;
+  --color-green-alpha-32: #4FE29052;
+  --color-green-alpha-40: #4FE29066;
+  --color-green-alpha-48: #4FE2907A;
+  --color-green-alpha-56: #4FE2908F;
+
+  /* Vermelho */
+  --color-red-50: #FFF0F0;
+  --color-red-100: #FFCCCC;
+  --color-red-200: #FF9999;
+  --color-red-300: #FF6666;
+  --color-red-400: #FF3333;
+  --color-red-500: #FF0000;
+  --color-red-600: #F34F45;
+  --color-red-700: #CC0000;
+  --color-red-800: #990000;
+  --color-red-900: #660000;
+  --color-red-alpha-08: #F34F4514;
+  --color-red-alpha-12: #F34F451F;
+  --color-red-alpha-16: #F34F4529;
+  --color-red-alpha-32: #F34F4552;
+  --color-red-alpha-40: #F34F4566;
+  --color-red-alpha-48: #F34F457A;
+  --color-red-alpha-56: #F34F458F;
+
+  /* Amarelo */
+  --color-yellow-50: #FFFBF0;
+  --color-yellow-100: #FFF3CC;
+  --color-yellow-200: #FFE799;
+  --color-yellow-300: #FFDB66;
+  --color-yellow-400: #FFCF33;
+  --color-yellow-500: #FFCC40;
+  --color-yellow-600: #FFB800;
+  --color-yellow-700: #CC9200;
+  --color-yellow-800: #996D00;
+  --color-yellow-900: #664900;
+  --color-yellow-alpha-08: #FFCC4014;
+  --color-yellow-alpha-16: #FFCC4029;
+  --color-yellow-alpha-32: #FFCC4052;
+
+  /* Laranja */
+  --color-orange-50: #FFF5F0;
+  --color-orange-100: #FFE0CC;
+  --color-orange-200: #FFC199;
+  --color-orange-300: #FFA266;
+  --color-orange-400: #FF8333;
+  --color-orange-500: #FF6400;
+  --color-orange-600: #F57C00;
+  --color-orange-700: #CC5000;
+  --color-orange-800: #993C00;
+  --color-orange-900: #662800;
+  --color-orange-alpha-08: #FF640014;
+  --color-orange-alpha-16: #FF640029;
+  --color-orange-alpha-32: #FF640052;
+
+  /* Roxo */
+  --color-purple-50: #F1EFF5;
+  --color-purple-100: #D6D3E5;
+  --color-purple-200: #BBB4D6;
+  --color-purple-300: #9E94C9;
+  --color-purple-400: #8072BE;
+  --color-purple-500: #6350B3;
+  --color-purple-600: #50418E;
+  --color-purple-700: #3E3467;
+  --color-purple-800: #2A2542;
+  --color-purple-900: #161320;
+  --color-purple-alpha-08: #6350B314;
+  --color-purple-alpha-16: #6350B329;
+  --color-purple-alpha-32: #6350B352;
+
+  /* =========================================================================
+     PRIMITIVOS — ESPAÇAMENTOS
+     ========================================================================= */
+  --space-0: 0px;
+  --space-50: 4px;
+  --space-100: 8px;
+  --space-200: 12px;
+  --space-300: 16px;
+  --space-400: 20px;
+  --space-500: 24px;
+  --space-600: 32px;
+  --space-700: 40px;
+  --space-800: 48px;
+  --space-900: 56px;
+  --space-1000: 64px;
+  --space-1200: 80px;
+  --space-1400: 96px;
+
+  /* =========================================================================
+     PRIMITIVOS — BORDER RADIUS
+     ========================================================================= */
+  --radius-prim-0: 0px;
+  --radius-prim-50: 2px;
+  --radius-prim-100: 4px;
+  --radius-prim-200: 8px;
+  --radius-prim-300: 12px;
+  --radius-prim-400: 16px;
+  --radius-prim-500: 20px;
+  --radius-prim-600: 24px;
+  --radius-prim-700: 32px;
+  --radius-prim-full: 9999px;
+
+  /* =========================================================================
+     PRIMITIVOS — TIPOGRAFIA
+     ========================================================================= */
+  --font-size-50: 12px;
+  --font-size-100: 14px;
+  --font-size-200: 16px;
+  --font-size-300: 18px;
+  --font-size-400: 20px;
+  --font-size-500: 24px;
+  --font-size-600: 28px;
+  --font-size-700: 32px;
+  --font-size-800: 40px;
+
+  /* =========================================================================
+     PRIMITIVOS — OPACIDADES
+     ========================================================================= */
+  --opacity-0: 0;
+  --opacity-08: 0.08;
+  --opacity-16: 0.16;
+  --opacity-32: 0.32;
+  --opacity-48: 0.48;
+  --opacity-64: 0.64;
+  --opacity-80: 0.80;
+  --opacity-100: 1;
+
+  /* =========================================================================
+     SEMÂNTICOS — BACKGROUNDS (Dark padrão)
+     ========================================================================= */
+  --bg-primary: #0E0E0E;
+  --bg-secondary: #141519;
+  --bg-tertiary: #1A1A1A;
+  --bg-inverse: #FFFFFF;
+  --bg-overlay: #FFFFFF29;
+  --bg-brand: #00D4FF;
+  --bg-brand2: #6350B3;
+  --bg-warning: #FFCC40;
+  --bg-danger: #F34F45;
+  --bg-success: #31DD7E;
+  --bg-base-alpha-0: #0E0E0E00;
+
+  /* =========================================================================
+     SEMÂNTICOS — SURFACES
+     ========================================================================= */
+  --surface-primary: #4A4A4A;
+  --surface-secondary: #222222;
+  --surface-tertiary: #1A1A1A;
+  --surface-interactive: #002933;
+  --surface-disabled: #1A1A1A;
+  --surface-info: #00D4FF14;
+  --surface-error: #F1312614;
+  --surface-warning: #FFCC4014;
+  --surface-success: #4FE29014;
+  --surface-brand: #00D4FF29;
+
+  /* =========================================================================
+     SEMÂNTICOS — CONTEÚDO (TEXTO)
+     ========================================================================= */
+  --content-primary: #FFFFFF;
+  --content-secondary: #E8E8E8;
+  --content-tertiary: #A4A4A4;
+  --content-placeholder: #A4A4A4;
+  --content-disabled: #4A4A4A;
+  --content-inverse: #1A1A1A;
+  --content-info: #CCFDFF;
+  --content-warning: #FFD35A;
+  --content-error: #F34F45;
+  --content-success: #4FE290;
+  --content-brand: #00D4FF;
+
+  /* =========================================================================
+     SEMÂNTICOS — BORDAS
+     ========================================================================= */
+  --border-default: #4A4A4A;
+  --border-subtle: #222222;
+  --border-strong: #A4A4A4;
+  --border-focus: #00D4FF;
+  --border-disabled: #777777;
+
+  /* =========================================================================
+     SEMÂNTICOS — AÇÕES
+     ========================================================================= */
+
+  /* Brand (Ciano — primário) */
+  --action-brand-default: #00D4FF;
+  --action-brand-hover: #00A8CC;
+  --action-brand-active: #007D99;
+  --action-brand-disabled: #777777;
+  --action-brand-alpha: #00D4FF14;
+
+  /* Brand Inverse (botão CTA primário sólido) */
+  --action-brand-inverse-default: #005266;
+  --action-brand-inverse-hover: #007D99;
+  --action-brand-inverse-active: #002933;
+  --action-brand-inverse-alpha: #00D4FF14;
+  --action-brand-inverse-disabled: #777777;
+
+  /* Secondary (Neutro) */
+  --action-secondary-default: #4A4A4A;
+  --action-secondary-hover: #777777;
+  --action-secondary-active: #A4A4A4;
+  --action-secondary-disabled: #1A1A1A;
+  --action-secondary-alpha: #FFFFFF00;
+
+  /* Tertiary (Roxo) */
+  --action-tertiary-default: #50418E;
+  --action-tertiary-hover: #3E3467;
+  --action-tertiary-active: #2A2542;
+  --action-tertiary-disabled: #777777;
+  --action-tertiary-alpha: #6350B314;
+
+  /* Destructive (Laranja) */
+  --action-destructive-default: #EA580C;
+  --action-destructive-hover: #C2410C;
+  --action-destructive-active: #9A3412;
+  --action-destructive-disabled: #777777;
+  --action-destructive-alpha: #F9731614;
+
+  /* =========================================================================
+     SEMÂNTICOS — CONTEXTO DE TRADING
+     ========================================================================= */
+
+  /* Candlesticks */
+  --context-chart-up: #4FE290;
+  --context-chart-down: #F34F45;
+
+  /* Preço */
+  --context-trading-up: #4FE290;
+  --context-trading-up-alpha: #4FE29029;
+  --context-trading-down: #F34F45;
+  --context-trading-down-alpha: #F1312629;
+
+  /* Long (Compra) */
+  --context-trading-long-text: #6DE7A2;
+  --context-trading-long-default: #4FE29014;
+  --context-trading-long-hover: #4FE29029;
+  --context-trading-long-active: #4FE29052;
+
+  /* Short (Venda) */
+  --context-trading-short-text: #F56D64;
+  --context-trading-short-default: #F1312614;
+  --context-trading-short-hover: #F1312629;
+  --context-trading-short-active: #F1312652;
+
+  /* Stop Loss */
+  --context-trading-stop-default: #F97316;
+  --context-trading-stop-hover: #EA580C;
+  --context-trading-stop-active: #C2410C;
+  --context-trading-stop-alpha: #F9731614;
+
+  /* =========================================================================
+     SCALE — ESPAÇAMENTOS RESPONSIVOS (Desktop padrão)
+     ========================================================================= */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 20px;
+  --spacing-2xl: 24px;
+  --spacing-3xl: 32px;
+  --spacing-3xl-2: 40px;
+  --spacing-3xl-3: 48px;
+  --spacing-3xl-4: 56px;
+  --spacing-3xl-5: 64px;
+  --spacing-3xl-6: 80px;
+  --spacing-3xl-7: 96px;
+
+  /* =========================================================================
+     SCALE — BORDER RADIUS
+     ========================================================================= */
+  --radius-none: 0px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --radius-full: 9999px;
+
+  /* =========================================================================
+     FONTES
+     ========================================================================= */
+  --font-primary: var(--font-jetbrains-mono), 'JetBrains Mono', monospace;
+  --font-secondary: var(--font-inter), 'Inter', sans-serif;
+  --font-mono: var(--font-roboto-mono), 'Roboto Mono', monospace;
+
+  /* =========================================================================
+     GRADIENTES DE BRANDING (Site)
+     ========================================================================= */
+  --gradient-text-brand: linear-gradient(90deg, #00D4FF 0%, #FFFFFF 100%);
+  --gradient-text-brand-hero: linear-gradient(90deg, #00D4FF 30%, #FFFFFF 100%);
+  --gradient-bg-hero: linear-gradient(180deg, #002933 0%, #0E0E0E 40%);
+  --gradient-bg-fade: linear-gradient(180deg, rgba(14,14,14,0) 0%, #0E0E0E 47%);
+}
+
+/* ==========================================================================
+   LIGHT MODE
+   ========================================================================== */
+[data-theme="light"] {
+  --bg-primary: #EEEEEE;
+  --bg-secondary: #F5F5F5;
+  --bg-tertiary: #FAFAFA;
+  --bg-inverse: #1A1A1A;
+  --bg-overlay: #FFFFFF52;
+  --bg-brand: #00A8CC;
+  --bg-base-alpha-0: #FFFFFF00;
+
+  --surface-primary: #D2D2D2;
+  --surface-secondary: #E8E8E8;
+  --surface-tertiary: #EEEEEE;
+  --surface-interactive: #29ECFF;
+  --surface-disabled: #FAFAFA;
+  --surface-brand: #00D4FF29;
+
+  --content-primary: #1A1A1A;
+  --content-secondary: #222222;
+  --content-tertiary: #4A4A4A;
+  --content-disabled: #777777;
+  --content-inverse: #FFFFFF;
+  --content-brand: #007D99;
+  --content-info: #00A8CC;
+  --content-warning: #FFC500;
+  --content-placeholder: #777777;
+
+  --border-default: #A4A4A4;
+  --border-subtle: #E8E8E8;
+  --border-strong: #D2D2D2;
+  --border-disabled: #E8E8E8;
+  --border-focus: #00D4FF;
+
+  --action-brand-default: #00A8CC;
+  --action-brand-hover: #007D99;
+  --action-brand-active: #005266;
+  --action-brand-inverse-default: #00A8CC;
+  --action-brand-inverse-hover: #007D99;
+  --action-brand-inverse-active: #005266;
+}