trdr-ds-install 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/plugins/trdr-design-system/skills/trdr-ds/SKILL.md +251 -213
  3. package/plugins/trdr-design-system/skills/trdr-ds/references/rules.md +16 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "trdr-ds-install",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "Installs the TRDR Design System skill for Claude Code",
5
5
  "bin": {
6
6
  "trdr-ds-install": "./bin/install.js"
package/plugins/trdr-design-system/skills/trdr-ds/SKILL.md CHANGED
@@ -34,7 +34,7 @@ Identify:
34
34
  - Main global CSS file (globals.css, main.css, index.css, app.css, styles.css)
35
35
  - Whether CSS custom properties already exist (look for `:root {`)
36
36
  - Potential conflicts with TRDR prefixes: `--bg-`, `--content-`, `--action-`, `--surface-`, `--border-`, `--spacing-`, `--radius-`
37
- - Whether fonts (Space Grotesk, Inter, Roboto Mono) are already loaded
37
+ - Whether fonts (JetBrains Mono, Inter, Roboto Mono) are already loaded
38
38
 
39
39
  Determine the best directory for new CSS files:
40
40
  - Next.js with `src/`: → `src/styles/`
@@ -50,7 +50,7 @@ Search for TRDR rule violations across all source files (*.css, *.scss, *.tsx, *
50
50
  Search pattern: `#[0-9A-Fa-f]{3,8}` in CSS/SCSS files; `#[0-9A-Fa-f]{3,8}` in component files within style props or className strings.
51
51
 
52
52
  **B — Hardcoded font-family** (should be var(--font-primary/secondary/mono)):
53
- Search: `font-family.*Inter|font-family.*Space Grotesk|font-family.*Roboto Mono`
53
+ Search: `font-family.*Inter|font-family.*JetBrains Mono|font-family.*Space Grotesk|font-family.*Roboto Mono`
54
54
 
55
55
  **C — Hardcoded px spacing** (should be var(--spacing-*)):
56
56
  Search: `(margin|padding|gap):\s*\d+px` in CSS/SCSS
@@ -61,6 +61,16 @@ Search: `var\(--color-|var\(--space-` in CSS/SCSS/component files
61
61
  **E — Missing tokens.css**:
62
62
  Check if `tokens.css` already exists in the project and if it's imported in the global CSS.
63
63
 
64
+ **F — Hardcoded rgba colors** (should use DS semantic tokens or be flagged):
65
+ Search: `rgba\(` in CSS/SCSS/HTML files (excluding node_modules, vendor)
66
+
67
+ **G — Custom gradients (non-TRDR)** (should use var(--gradient-*) tokens):
68
+ Search: `linear-gradient|radial-gradient` in CSS/SCSS/HTML files
69
+ Flag any gradient that doesn't reference a TRDR gradient token (`var(--gradient-*)`)
70
+
71
+ **H — Hardcoded font-size in px** (should use .trdr-h* / .trdr-body-* text style classes):
72
+ Search: `font-size:\s*\d+px` in CSS/SCSS files (skip tokens.css itself)
73
+
64
74
  ### Step 4 — Fetch latest component list from Hub
65
75
 
66
76
  Fetch the component catalog to know what's currently available:
@@ -95,16 +105,19 @@ Output the following report and **do not proceed** until the developer explicitl
95
105
  ### FILES TO MODIFY:
96
106
  - [ ] `[global-css-file]` — add @import for tokens.css and components.css
97
107
  [list each file with violations, e.g.:]
98
- - [ ] `src/components/Button.css` — 3 violations (hardcoded colors: #3D99FF, #0E0E0E, #FFFFFF)
108
+ - [ ] `src/components/Button.css` — 3 violations (hardcoded colors: #00A8CC, #0E0E0E, #FFFFFF)
99
109
  - [ ] `src/app/globals.css` — 2 violations (font-family: Inter)
100
110
 
101
111
  ### VIOLATIONS FOUND:
102
112
  | Category | Count | Example |
103
113
  |----------|-------|---------|
104
- | Hardcoded colors | N | `color: #3D99FF` in Button.css:14 |
114
+ | Hardcoded colors | N | `color: #00A8CC` in Button.css:14 |
105
115
  | Hardcoded fonts | N | `font-family: Inter` in globals.css:8 |
106
116
  | Hardcoded spacing | N | `padding: 16px` in Card.css:22 |
107
117
  | Primitive token use | N | `var(--color-blue-600)` in Badge.css:31 |
118
+ | Hardcoded rgba | N | `background: rgba(0,0,0,.3)` in card.css:88 |
119
+ | Custom gradients | N | `linear-gradient(135deg, #FF6B6B...)` in header:24 |
120
+ | Hardcoded font-size | N | `font-size: 22px` in card.css:99 |
108
121
 
109
122
  ### TRDR COMPONENTS AVAILABLE (from Hub):
110
123
  [List implemented components from the Hub catalog — these have ready-to-use code]
@@ -153,20 +166,20 @@ Create `tokens.css` in the detected styles directory with this content:
153
166
  PRIMITIVES — COLORS (never use directly in UI — use semantic tokens)
154
167
  ========================================================================= */
155
168
 
156
- /* Blue */
157
- --color-blue-50: #F0F7FF;
158
- --color-blue-100: #E0EEFF;
159
- --color-blue-200: #C1DDFF;
160
- --color-blue-300: #A2CDFF;
161
- --color-blue-400: #84BFFF;
162
- --color-blue-500: #65B0FF;
163
- --color-blue-600: #3D99FF;
164
- --color-blue-700: #1E82FF;
165
- --color-blue-800: #0066FF;
166
- --color-blue-900: #0052CC;
167
- --color-blue-alpha-08: #0052CC14;
168
- --color-blue-alpha-16: #0052CC29;
169
- --color-blue-alpha-32: #0052CC52;
169
+ /* Brand Cyan (formerly Blue) */
170
+ --color-blue-50: #E6FEFF;
171
+ --color-blue-100: #CCFDFF;
172
+ --color-blue-200: #99F9FF;
173
+ --color-blue-300: #5CF3FF;
174
+ --color-blue-400: #29ECFF;
175
+ --color-blue-500: #00D4FF;
176
+ --color-blue-600: #00A8CC;
177
+ --color-blue-700: #007D99;
178
+ --color-blue-800: #005266;
179
+ --color-blue-900: #002933;
180
+ --color-blue-alpha-08: #00D4FF14;
181
+ --color-blue-alpha-16: #00D4FF29;
182
+ --color-blue-alpha-32: #00D4FF52;
170
183
 
171
184
  /* Neutral */
172
185
  --color-neutral-0: #FFFFFF;
@@ -252,19 +265,19 @@ Create `tokens.css` in the detected styles directory with this content:
252
265
  --color-orange-alpha-32: #FF640052;
253
266
 
254
267
  /* Purple */
255
- --color-purple-50: #F5F0FF;
256
- --color-purple-100: #E0CCFF;
257
- --color-purple-200: #C199FF;
258
- --color-purple-300: #A266FF;
259
- --color-purple-400: #8333FF;
260
- --color-purple-500: #7C4DFF;
261
- --color-purple-600: #6200EA;
262
- --color-purple-700: #5000CC;
263
- --color-purple-800: #3C0099;
264
- --color-purple-900: #280066;
265
- --color-purple-alpha-08: #7C4DFF14;
266
- --color-purple-alpha-16: #7C4DFF29;
267
- --color-purple-alpha-32: #7C4DFF52;
268
+ --color-purple-50: #F1EFF5;
269
+ --color-purple-100: #D6D3E5;
270
+ --color-purple-200: #BBB4D6;
271
+ --color-purple-300: #9E94C9;
272
+ --color-purple-400: #8072BE;
273
+ --color-purple-500: #6350B3;
274
+ --color-purple-600: #50418E;
275
+ --color-purple-700: #3E3467;
276
+ --color-purple-800: #2A2542;
277
+ --color-purple-900: #161320;
278
+ --color-purple-alpha-08: #6350B314;
279
+ --color-purple-alpha-16: #6350B329;
280
+ --color-purple-alpha-32: #6350B352;
268
281
 
269
282
  /* =========================================================================
270
283
  PRIMITIVES — SPACING
@@ -331,11 +344,12 @@ Create `tokens.css` in the detected styles directory with this content:
331
344
  --bg-tertiary: #1A1A1A;
332
345
  --bg-inverse: #FFFFFF;
333
346
  --bg-overlay: #FFFFFF29;
334
- --bg-brand: #3D99FF;
347
+ --bg-brand: #00D4FF;
348
+ --bg-brand2: #6350B3;
335
349
  --bg-warning: #FFCC40;
336
350
  --bg-danger: #F34F45;
337
351
  --bg-success: #31DD7E;
338
- --bg-base-alpha-0: rgba(14, 14, 14, 0);
352
+ --bg-base-alpha-0: #0E0E0E00;
339
353
 
340
354
  /* =========================================================================
341
355
  SEMANTIC — SURFACES
@@ -343,13 +357,13 @@ Create `tokens.css` in the detected styles directory with this content:
343
357
  --surface-primary: #4A4A4A;
344
358
  --surface-secondary: #222222;
345
359
  --surface-tertiary: #1A1A1A;
346
- --surface-interactive: #0052CC;
360
+ --surface-interactive: #002933;
347
361
  --surface-disabled: #1A1A1A;
348
- --surface-info: rgba(61, 153, 255, 0.08);
349
- --surface-error: rgba(243, 79, 69, 0.08);
350
- --surface-warning: rgba(255, 204, 64, 0.08);
351
- --surface-success: rgba(79, 226, 144, 0.08);
352
- --surface-brand: rgba(0, 82, 204, 0.16);
362
+ --surface-info: #00D4FF14;
363
+ --surface-error: #F1312614;
364
+ --surface-warning: #FFCC4014;
365
+ --surface-success: #4FE29014;
366
+ --surface-brand: #00D4FF29;
353
367
 
354
368
  /* =========================================================================
355
369
  SEMANTIC — CONTENT (TEXT)
@@ -358,12 +372,13 @@ Create `tokens.css` in the detected styles directory with this content:
358
372
  --content-secondary: #E8E8E8;
359
373
  --content-tertiary: #A4A4A4;
360
374
  --content-disabled: #4A4A4A;
375
+ --content-placeholder: #777777;
361
376
  --content-inverse: #1A1A1A;
362
- --content-info: #65B0FF;
377
+ --content-info: #CCFDFF;
363
378
  --content-warning: #FFCC40;
364
379
  --content-error: #F34F45;
365
380
  --content-success: #4FE290;
366
- --content-brand: #3D99FF;
381
+ --content-brand: #00D4FF;
367
382
  --content-on-brand: #FFFFFF;
368
383
 
369
384
  /* =========================================================================
@@ -372,43 +387,47 @@ Create `tokens.css` in the detected styles directory with this content:
372
387
  --border-default: #4A4A4A;
373
388
  --border-subtle: #222222;
374
389
  --border-strong: #A4A4A4;
375
- --border-focus: #65B0FF;
390
+ --border-focus: #00D4FF;
376
391
  --border-disabled: #777777;
377
392
 
378
393
  /* =========================================================================
379
394
  SEMANTIC — ACTIONS
380
395
  ========================================================================= */
381
396
 
382
- /* Brand (Blue — primary) */
383
- --action-brand-default: #3D99FF;
384
- --action-brand-hover: #1E82FF;
385
- --action-brand-active: #0066FF;
386
- --action-brand-disabled: #0052CC29;
387
- --action-brand-alpha: rgba(61, 153, 255, 0.16);
397
+ /* Brand (Cyan — primary) */
398
+ --action-brand-default: #00D4FF;
399
+ --action-brand-hover: #00A8CC;
400
+ --action-brand-active: #007D99;
401
+ --action-brand-disabled: #777777;
402
+ --action-brand-alpha: #00D4FF14;
388
403
 
389
- /* Brand Inverse (solid blue primary button) */
390
- --action-brand-inverse-default: #0066FF;
391
- --action-brand-inverse-hover: #1E82FF;
392
- --action-brand-inverse-active: #0052CC;
404
+ /* Brand Inverse (solid cyan primary button) */
405
+ --action-brand-inverse-default: #005266;
406
+ --action-brand-inverse-hover: #007D99;
407
+ --action-brand-inverse-active: #002933;
408
+ --action-brand-inverse-alpha: #00D4FF14;
409
+ --action-brand-inverse-disabled: #777777;
393
410
 
394
411
  /* Secondary (Neutral) */
395
412
  --action-secondary-default: #4A4A4A;
396
413
  --action-secondary-hover: #777777;
397
414
  --action-secondary-active: #A4A4A4;
398
415
  --action-secondary-disabled: #1A1A1A;
399
- --action-secondary-alpha: rgba(74, 74, 74, 0.16);
416
+ --action-secondary-alpha: #FFFFFF00;
400
417
 
401
418
  /* Tertiary (Purple) */
402
- --action-tertiary-default: #7C4DFF;
403
- --action-tertiary-hover: #6200EA;
404
- --action-tertiary-active: #5000CC;
405
- --action-tertiary-disabled: #7C4DFF29;
419
+ --action-tertiary-default: #50418E;
420
+ --action-tertiary-hover: #3E3467;
421
+ --action-tertiary-active: #2A2542;
422
+ --action-tertiary-disabled: #777777;
423
+ --action-tertiary-alpha: #6350B314;
406
424
 
407
425
  /* Destructive (Orange) */
408
- --action-destructive-default: #F57C00;
409
- --action-destructive-hover: #FF6400;
410
- --action-destructive-active: #CC5000;
411
- --action-destructive-disabled: #FF640014;
426
+ --action-destructive-default: #EA580C;
427
+ --action-destructive-hover: #C2410C;
428
+ --action-destructive-active: #9A3412;
429
+ --action-destructive-disabled: #777777;
430
+ --action-destructive-alpha: #F9731614;
412
431
 
413
432
  /* =========================================================================
414
433
  SEMANTIC — TRADING CONTEXT
@@ -420,25 +439,27 @@ Create `tokens.css` in the detected styles directory with this content:
420
439
 
421
440
  /* Price */
422
441
  --context-trading-up: #4FE290;
442
+ --context-trading-up-alpha: #4FE29029;
423
443
  --context-trading-down: #F34F45;
444
+ --context-trading-down-alpha: #F1312629;
424
445
 
425
446
  /* Long (Buy) */
426
- --context-trading-long-text: #4FE290;
427
- --context-trading-long-default: rgba(79, 226, 144, 0.08);
428
- --context-trading-long-hover: rgba(79, 226, 144, 0.12);
429
- --context-trading-long-active: rgba(79, 226, 144, 0.16);
447
+ --context-trading-long-text: #6DE7A2;
448
+ --context-trading-long-default: #4FE29014;
449
+ --context-trading-long-hover: #4FE29029;
450
+ --context-trading-long-active: #4FE29052;
430
451
 
431
452
  /* Short (Sell) */
432
- --context-trading-short-text: #F34F45;
433
- --context-trading-short-default: rgba(243, 79, 69, 0.08);
434
- --context-trading-short-hover: rgba(243, 79, 69, 0.12);
435
- --context-trading-short-active: rgba(243, 79, 69, 0.16);
453
+ --context-trading-short-text: #F56D64;
454
+ --context-trading-short-default: #F1312614;
455
+ --context-trading-short-hover: #F1312629;
456
+ --context-trading-short-active: #F1312652;
436
457
 
437
458
  /* Stop Loss */
438
- --context-trading-stop-default: rgba(255, 100, 0, 0.16);
439
- --context-trading-stop-hover: rgba(255, 100, 0, 0.24);
440
- --context-trading-stop-active: rgba(255, 100, 0, 0.32);
441
- --context-trading-stop-alpha: rgba(255, 100, 0, 0.08);
459
+ --context-trading-stop-default: #F97316;
460
+ --context-trading-stop-hover: #EA580C;
461
+ --context-trading-stop-active: #C2410C;
462
+ --context-trading-stop-alpha: #F9731614;
442
463
 
443
464
  /* =========================================================================
444
465
  SCALE — RESPONSIVE SPACING (Desktop default)
@@ -470,18 +491,18 @@ Create `tokens.css` in the detected styles directory with this content:
470
491
 
471
492
  /* =========================================================================
472
493
  FONTS (use Google Fonts or next/font to load these)
473
- Space Grotesk → headings | Inter → body/labels | Roboto Mono → numbers
494
+ JetBrains Mono → headings | Inter → body/labels | Roboto Mono → numbers
474
495
  ========================================================================= */
475
- --font-primary: 'Space Grotesk', sans-serif;
496
+ --font-primary: 'JetBrains Mono', monospace;
476
497
  --font-secondary: 'Inter', sans-serif;
477
498
  --font-mono: 'Roboto Mono', monospace;
478
499
 
479
500
  /* =========================================================================
480
501
  BRAND GRADIENTS (Site/Marketing)
481
502
  ========================================================================= */
482
- --gradient-text-brand: linear-gradient(90deg, #3D99FF 0%, #FFFFFF 100%);
483
- --gradient-text-brand-hero: linear-gradient(90deg, #3D99FF 30%, #FFFFFF 100%);
484
- --gradient-bg-hero: linear-gradient(180deg, #0052CC 0%, #0E0E0E 40%);
503
+ --gradient-text-brand: linear-gradient(90deg, #00D4FF 0%, #FFFFFF 100%);
504
+ --gradient-text-brand-hero: linear-gradient(90deg, #00D4FF 30%, #FFFFFF 100%);
505
+ --gradient-bg-hero: linear-gradient(180deg, #002933 0%, #0E0E0E 40%);
485
506
  --gradient-bg-fade: linear-gradient(180deg, rgba(14,14,14,0) 0%, #0E0E0E 47%);
486
507
  }
487
508
 
@@ -493,159 +514,122 @@ Create `tokens.css` in the detected styles directory with this content:
493
514
  --bg-secondary: #F5F5F5;
494
515
  --bg-tertiary: #FAFAFA;
495
516
  --bg-inverse: #1A1A1A;
496
- --bg-overlay: #00000029;
517
+ --bg-overlay: #FFFFFF52;
497
518
  --surface-primary: #D2D2D2;
498
519
  --surface-secondary: #E8E8E8;
499
520
  --surface-tertiary: #EEEEEE;
500
- --surface-interactive: #84BFFF;
521
+ --surface-interactive: #29ECFF;
501
522
  --surface-disabled: #FAFAFA;
523
+ --surface-brand: #00D4FF29;
502
524
  --content-primary: #1A1A1A;
503
525
  --content-secondary: #222222;
504
526
  --content-tertiary: #4A4A4A;
505
527
  --content-disabled: #777777;
506
528
  --content-inverse: #FFFFFF;
507
- --content-brand: #0066FF;
529
+ --content-brand: #005266;
530
+ --content-info: #00A8CC;
508
531
  --border-default: #A4A4A4;
509
532
  --border-subtle: #E8E8E8;
510
533
  --border-strong: #D2D2D2;
511
534
  --border-disabled: #E8E8E8;
512
- --action-brand-default: #0066FF;
513
- --action-brand-hover: #1E82FF;
514
- --action-brand-active: #3D99FF;
535
+ --border-focus: #00D4FF;
536
+ --action-brand-default: #007D99;
537
+ --action-brand-hover: #005266;
538
+ --action-brand-active: #002933;
539
+ --action-brand-inverse-default: #00A8CC;
540
+ --action-brand-inverse-hover: #007D99;
541
+ --action-brand-inverse-active: #005266;
515
542
  }
516
543
  ```
517
544
 
518
545
  ### Step 2 — Create components.css
519
546
 
520
- Create `components.css` in the same directory as tokens.css. Fetch the latest version from the Hub:
547
+ Fetch all component CSS directly from the Hub. The Hub is the single source of truth — **NEVER use a static fallback. No exceptions.**
548
+
549
+ #### Step 2.a — Fetch component utility classes
521
550
 
522
551
  ```
523
552
  WebFetch: https://trdr.mrocontent.com.br/design-md
524
553
  ```
525
554
 
526
- 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.
555
+ Extract all CSS code blocks from the page that contain `.trdr-*` classes. Copy them verbatim into `components.css`.
527
556
 
528
- If the Hub is unreachable, use this baseline (contains all components as of skill version 1.0):
557
+ **Known Hub components (v1.4) — verify all are present after fetch:**
558
+
559
+ | Slug | CSS Class Prefix |
560
+ |------|-----------------|
561
+ | `button` | `.trdr-btn` |
562
+ | `card` | `.trdr-card` |
563
+ | `text-input` | `.trdr-input` |
564
+ | `dropdown` | `.trdr-dropdown` |
565
+ | `combo-input` | `.trdr-combo` |
566
+ | `checkbox` | `.trdr-checkbox` |
567
+ | `radio-button` | `.trdr-radio` |
568
+ | `switch` | `.trdr-switch` |
569
+ | `segmented-control` | `.trdr-segment` |
570
+ | `tooltip` | `.trdr-tooltip` |
571
+ | `abas` | `.trdr-tabs` |
572
+ | `sub-menu-item` | `.trdr-submenu` |
573
+ | `boleta` | `.trdr-boleta` |
574
+
575
+ For any component whose CSS prefix is not found in the `/design-md` output, fetch its individual page:
576
+
577
+ ```
578
+ WebFetch: https://trdr.mrocontent.com.br/componentes/[slug]
579
+ ```
580
+
581
+ Extract the CSS code block from that page and append it to `components.css`.
582
+
583
+ **If the Hub is unreachable at any point → STOP. Do NOT proceed with any fallback.**
584
+ Report to the developer:
585
+ > ❌ 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.
586
+
587
+ #### Step 2.b — Add typography text style classes
588
+
589
+ 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.
529
590
 
530
591
  ```css
531
592
  /* ==========================================================================
532
- TRDR Design Hub — Component utility classes
533
- Always fetch latest from: https://trdr.mrocontent.com.br
593
+ TRDR Design System — Text Style Utility Classes
594
+ Source: https://trdr.mrocontent.com.br | Text Styles spec
534
595
  ========================================================================== */
535
596
 
536
- /* Card */
537
- .trdr-card {
538
- background-color: var(--bg-secondary);
539
- border: 1px solid var(--border-subtle);
540
- border-radius: var(--radius-md);
541
- padding: var(--spacing-2xl);
542
- }
543
- .trdr-card-hover {
544
- background-color: var(--bg-secondary);
545
- border: 1px solid var(--border-subtle);
546
- border-radius: var(--radius-md);
547
- padding: var(--spacing-2xl);
548
- transition: border-color 0.15s ease, background-color 0.15s ease;
549
- }
550
- .trdr-card-hover:hover {
551
- border-color: var(--border-default);
552
- background-color: var(--bg-tertiary);
553
- }
597
+ /* Headings — var(--font-primary) = JetBrains Mono */
598
+ .trdr-h1 { font-family: var(--font-primary); font-size: 80px; font-weight: 500; line-height: 1.1; }
599
+ .trdr-h2 { font-family: var(--font-primary); font-size: 56px; font-weight: 500; line-height: 1.1; }
600
+ .trdr-h3 { font-family: var(--font-primary); font-size: 46px; font-weight: 700; line-height: 1.15; }
601
+ .trdr-h4 { font-family: var(--font-primary); font-size: 38px; font-weight: 500; line-height: 1.15; }
602
+ .trdr-h5 { font-family: var(--font-primary); font-size: 32px; font-weight: 500; line-height: 1.2; }
603
+ .trdr-h6 { font-family: var(--font-primary); font-size: 26px; font-weight: 500; line-height: 1.2; }
604
+ .trdr-h7 { font-family: var(--font-secondary); font-size: 22px; font-weight: 600; line-height: 1.3; }
605
+
606
+ /* Body — var(--font-secondary) = Inter */
607
+ .trdr-body-b1 { font-family: var(--font-secondary); font-size: 18px; font-weight: 400; line-height: 1.6; }
608
+ .trdr-body-b2 { font-family: var(--font-secondary); font-size: 16px; font-weight: 500; line-height: 1.5; }
609
+ .trdr-body-b3 { font-family: var(--font-secondary); font-size: 14px; font-weight: 400; line-height: 1.5; }
610
+ .trdr-body-b4 { font-family: var(--font-secondary); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.2px; }
611
+ .trdr-body-b5 { font-family: var(--font-secondary); font-size: 10px; font-weight: 400; line-height: 1.4; }
612
+ .trdr-body-aux { font-family: var(--font-secondary); font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0.24px; }
613
+
614
+ /* Labels — var(--font-secondary) = Inter */
615
+ .trdr-label-l2 { font-family: var(--font-secondary); font-size: 16px; font-weight: 600; line-height: 1.4; }
616
+ .trdr-label-l3 { font-family: var(--font-secondary); font-size: 14px; font-weight: 600; line-height: 1.4; }
617
+ ```
554
618
 
555
- /* Gradient text */
556
- .trdr-gradient-text {
557
- background: linear-gradient(90deg, var(--action-brand-default) 30%, #FFFFFF 100%);
558
- -webkit-background-clip: text;
559
- -webkit-text-fill-color: transparent;
560
- background-clip: text;
561
- }
619
+ #### Step 2.c — Flag missing components
562
620
 
563
- /* Buttons */
564
- .trdr-btn {
565
- display: inline-flex;
566
- align-items: center;
567
- justify-content: center;
568
- gap: var(--spacing-xs);
569
- height: 24px;
570
- padding: 0 var(--spacing-sm);
571
- border-radius: var(--radius-md);
572
- font-family: var(--font-secondary);
573
- font-size: 14px;
574
- font-weight: 600;
575
- line-height: 1;
576
- white-space: nowrap;
577
- transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
578
- cursor: pointer;
579
- border: none;
580
- text-decoration: none;
581
- }
582
- .trdr-btn-lg { height: 32px; padding: 0 var(--spacing-md); font-size: 14px; }
583
-
584
- .trdr-btn-primary { background-color: var(--action-brand-inverse-default); color: var(--content-primary); border: 0.5px solid var(--action-brand-inverse-default); }
585
- .trdr-btn-primary:hover { background-color: var(--action-brand-inverse-hover); border-color: var(--action-brand-inverse-hover); }
586
- .trdr-btn-primary:active { background-color: var(--action-brand-inverse-active); }
587
- .trdr-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
588
-
589
- .trdr-btn-secondary { background-color: var(--action-secondary-default); color: var(--content-primary); }
590
- .trdr-btn-secondary:hover { background-color: var(--action-secondary-hover); }
591
- .trdr-btn-secondary:active { background-color: var(--action-secondary-active); }
592
- .trdr-btn-secondary:disabled { background-color: var(--action-secondary-disabled); color: var(--content-disabled); cursor: not-allowed; }
593
-
594
- .trdr-btn-ghost { background-color: transparent; color: var(--content-secondary); border: 1px solid var(--border-default); }
595
- .trdr-btn-ghost:hover { background-color: var(--surface-secondary); border-color: var(--border-strong); color: var(--content-primary); }
596
- .trdr-btn-ghost:active { background-color: var(--surface-primary); }
597
- .trdr-btn-ghost:disabled { color: var(--content-disabled); border-color: var(--border-disabled); cursor: not-allowed; opacity: 0.5; }
598
-
599
- .trdr-btn-destructive { background-color: var(--action-destructive-default); color: var(--content-primary); }
600
- .trdr-btn-destructive:hover { background-color: var(--action-destructive-hover); }
601
- .trdr-btn-destructive:active { background-color: var(--action-destructive-active); }
602
-
603
- .trdr-btn-link { background-color: transparent; color: var(--content-brand); padding-left: 0; padding-right: 0; }
604
- .trdr-btn-link:hover { color: var(--action-brand-hover); text-decoration: underline; }
605
-
606
- .trdr-btn-long { background-color: var(--context-trading-long-default); color: var(--context-trading-long-text); min-width: 80px; }
607
- .trdr-btn-long:hover { background-color: var(--context-trading-long-hover); }
608
- .trdr-btn-long:active { background-color: var(--context-trading-long-active); }
609
-
610
- .trdr-btn-short { background-color: var(--context-trading-short-default); color: var(--context-trading-short-text); min-width: 80px; }
611
- .trdr-btn-short:hover { background-color: var(--context-trading-short-hover); }
612
- .trdr-btn-short:active { background-color: var(--context-trading-short-active); }
613
-
614
- /* Badge */
615
- .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; }
616
- .trdr-badge-brand { background-color: var(--surface-brand); color: var(--content-brand); border: 1px solid var(--border-subtle); }
617
- .trdr-badge-success { background-color: var(--surface-success); color: var(--content-success); border: 1px solid var(--border-subtle); }
618
- .trdr-badge-neutral { background-color: var(--surface-secondary); color: var(--content-tertiary); border: 1px solid var(--border-subtle); }
619
- .trdr-badge-warning { background-color: var(--surface-warning); color: var(--content-warning); }
620
-
621
- /* Segmented control */
622
- .trdr-segment-control { display: inline-flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }
623
- .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; }
624
- .trdr-segment-active { background-color: var(--action-brand-inverse-default); color: var(--content-primary); }
625
- .trdr-segment-inactive { background-color: var(--surface-secondary); color: var(--content-tertiary); }
626
- .trdr-segment-inactive:hover { color: var(--content-secondary); }
627
-
628
- /* Input */
629
- .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; }
630
- .trdr-input::placeholder { color: var(--content-tertiary); }
631
- .trdr-input:focus { border-color: var(--border-focus); }
632
-
633
- /* Table */
634
- .trdr-table { width: 100%; border-collapse: collapse; }
635
- .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); }
636
- .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; }
637
- .trdr-table tr:last-child td { border-bottom: none; }
638
- .trdr-table tr:hover td { background-color: var(--bg-tertiary); }
639
-
640
- /* Divider */
641
- .trdr-divider { width: 100%; height: 1px; background-color: var(--border-subtle); margin: var(--spacing-2xl) 0; }
642
-
643
- /* Section headings */
644
- .trdr-section-title { font-family: var(--font-primary); font-size: 24px; font-weight: 500; color: var(--content-primary); margin-bottom: var(--spacing-sm); }
645
- .trdr-section-subtitle { font-size: 14px; color: var(--content-tertiary); margin-bottom: var(--spacing-3xl); line-height: 1.5; }
646
- ```
621
+ 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:
622
+
623
+ ```markdown
624
+ # Missing Hub Components
647
625
 
648
- > **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.
626
+ These patterns were found in the project but have no corresponding component in the TRDR Design Hub.
627
+ Request their implementation at: https://trdr.mrocontent.com.br
628
+
629
+ | Pattern found | File | Status |
630
+ |---------------|------|--------|
631
+ | [pattern name] | [file:line] | ⚠️ Missing from Hub |
632
+ ```
649
633
 
650
634
  ### Step 3 — Update global CSS
651
635
 
@@ -675,10 +659,12 @@ Full reference: https://trdr.mrocontent.com.br
675
659
  1. NEVER use primitive tokens directly (--color-*, --space-*) — always use semantic tokens
676
660
  2. Backgrounds: --bg-primary (#0E0E0E), --bg-secondary (#141519), --bg-tertiary (#1A1A1A)
677
661
  3. Text: --content-primary (white), --content-secondary (#E8E8E8), --content-tertiary (#A4A4A4)
678
- 4. Primary CTA: --action-brand-inverse-default (#0066FF) for filled buttons
679
- 5. Fonts: --font-primary = Space Grotesk (headings) | --font-secondary = Inter (body) | --font-mono = Roboto Mono (numbers)
662
+ 4. Primary CTA: --action-brand-inverse-default (#005266) for filled buttons
663
+ 5. Fonts: --font-primary = JetBrains Mono (headings) | --font-secondary = Inter (body) | --font-mono = Roboto Mono (numbers)
680
664
  6. Spacing: always var(--spacing-xs/sm/md/lg/xl/2xl/3xl) — never hardcoded px
681
665
  7. Border radius: always var(--radius-sm/md/lg/full) — never hardcoded px
666
+ 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
667
+ 9. No colors outside the DS anywhere — rgba(), inline gradients, hardcoded hex all require a semantic token. No exceptions.
682
668
 
683
669
  ## Token files
684
670
  - Tokens: [detected-path]/tokens.css
@@ -691,25 +677,32 @@ Full reference: https://trdr.mrocontent.com.br
691
677
  | Surface | --surface-secondary | #222222 |
692
678
  | Text primary | --content-primary | #FFFFFF |
693
679
  | Text secondary | --content-tertiary | #A4A4A4 |
694
- | Primary button | --action-brand-inverse-default | #0066FF |
680
+ | Brand (text/icon) | --content-brand | #00A8CC |
681
+ | Primary button | --action-brand-inverse-default | #005266 |
695
682
  | Border | --border-default | #4A4A4A |
696
- | Focus ring | --border-focus | #65B0FF |
683
+ | Focus ring | --border-focus | #00D4FF |
697
684
  | Success | --content-success | #4FE290 |
698
685
  | Error | --content-error | #F34F45 |
699
686
  | Warning | --content-warning | #FFCC40 |
700
687
 
688
+ ## Text Style Classes
689
+ Headings: .trdr-h1 (80px) → .trdr-h2 (56px) → .trdr-h3 (46px) → .trdr-h4 (38px) → .trdr-h5 (32px) → .trdr-h6 (26px) → .trdr-h7 (22px/Inter)
690
+ 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)
691
+ Labels: .trdr-label-l2 (16px/semibold) → .trdr-label-l3 (14px/semibold)
692
+ All headings use var(--font-primary) = JetBrains Mono. Body/labels use var(--font-secondary) = Inter.
693
+
701
694
  ## Pre-built component classes
702
695
  .trdr-btn, .trdr-btn-primary, .trdr-btn-secondary, .trdr-btn-ghost, .trdr-btn-destructive
703
696
  .trdr-btn-long (buy), .trdr-btn-short (sell)
704
697
  .trdr-badge, .trdr-badge-brand, .trdr-badge-success, .trdr-badge-neutral
705
698
  .trdr-card, .trdr-card-hover
706
- .trdr-input
707
- .trdr-table
699
+ .trdr-input, .trdr-dropdown, .trdr-combo, .trdr-checkbox, .trdr-radio, .trdr-switch
708
700
  .trdr-segment-control, .trdr-segment-active, .trdr-segment-inactive
701
+ .trdr-tabs, .trdr-submenu, .trdr-tooltip, .trdr-boleta
709
702
 
710
703
  ## Getting component code
711
704
  For any component, go to: https://trdr.mrocontent.com.br/componentes/[slug]
712
- Available: button, text-input, switch, dropdown, checkbox, radio-button, combo-input, tooltip, boleta
705
+ Available: button, text-input, switch, dropdown, checkbox, radio-button, combo-input, tooltip, boleta, segmented-control, abas, sub-menu-item, card
713
706
  (Check Hub for latest — new components are added regularly)
714
707
 
715
708
  ## Layer hierarchy
@@ -735,18 +728,19 @@ For each violation found in Phase 1, apply the semantic token replacement.
735
728
  | `#FFFFFF` | text/bg | `var(--content-primary)` or `var(--bg-inverse)` |
736
729
  | `#E8E8E8` | text | `var(--content-secondary)` |
737
730
  | `#A4A4A4` | text | `var(--content-tertiary)` |
738
- | `#3D99FF` | action/text | `var(--action-brand-default)` or `var(--content-brand)` |
739
- | `#0066FF` | button bg | `var(--action-brand-inverse-default)` |
731
+ | `#00A8CC` | action/text brand | `var(--action-brand-default)` or `var(--content-brand)` |
732
+ | `#005266` | button bg CTA | `var(--action-brand-inverse-default)` |
733
+ | `#00D4FF` | focus/info | `var(--border-focus)` or `var(--content-info)` |
740
734
  | `#F34F45` | error/trading | `var(--content-error)` or `var(--context-trading-down)` |
741
735
  | `#4FE290` | success/trading | `var(--content-success)` or `var(--context-trading-up)` |
742
736
  | `#FFCC40` | warning | `var(--content-warning)` |
743
- | `#65B0FF` | focus/info | `var(--border-focus)` or `var(--content-info)` |
744
737
  | `#F57C00` | destructive | `var(--action-destructive-default)` |
745
738
 
746
739
  **Font mapping:**
747
740
  | Hardcoded | Replace with |
748
741
  |-----------|-------------|
749
742
  | `font-family: 'Inter'` | `font-family: var(--font-secondary)` |
743
+ | `font-family: 'JetBrains Mono'` | `font-family: var(--font-primary)` |
750
744
  | `font-family: 'Space Grotesk'` | `font-family: var(--font-primary)` |
751
745
  | `font-family: 'Roboto Mono'` | `font-family: var(--font-mono)` |
752
746
 
@@ -763,11 +757,45 @@ For each violation found in Phase 1, apply the semantic token replacement.
763
757
 
764
758
  **Ambiguous colors:** Use property context to decide — `background-color` → bg/surface token, `color` → content token, `border-color` → border token.
765
759
 
760
+ **rgba() mapping:**
761
+ | Hardcoded pattern | Context | Replace with |
762
+ |-------------------|---------|-------------|
763
+ | `rgba(0,0,0,*)` | box-shadow | No TRDR shadow token exists → flag in DS_MIGRATION.md as "Missing shadow token" |
764
+ | `rgba(255,255,255,.29)` approx | overlay/backdrop | `var(--bg-overlay)` |
765
+ | `rgba(255,255,255,*)` other | overlay | flag in DS_MIGRATION.md |
766
+ | Any other `rgba(N,N,N,*)` | various | Map to nearest semantic alpha token (--surface-brand, --surface-info, --action-*-alpha, etc.) or flag |
767
+
768
+ **Gradient mapping:**
769
+ | Pattern | Replace with |
770
+ |---------|-------------|
771
+ | `linear-gradient(...)` using only TRDR brand colors | `var(--gradient-text-brand)`, `var(--gradient-bg-hero)`, or `var(--gradient-bg-fade)` as appropriate |
772
+ | `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 |
773
+ | Gradient inside SVG data URI embedded in CSS | Flag in DS_MIGRATION.md |
774
+
775
+ **Font-size mapping:**
776
+ | Hardcoded value | Replace with |
777
+ |----------------|-------------|
778
+ | `font-size: 80px` | Add `.trdr-h1` class to the element; remove the rule |
779
+ | `font-size: 56px` | `.trdr-h2` class |
780
+ | `font-size: 46px` | `.trdr-h3` class |
781
+ | `font-size: 38px` | `.trdr-h4` class |
782
+ | `font-size: 32px` | `.trdr-h5` class |
783
+ | `font-size: 26px` | `.trdr-h6` class |
784
+ | `font-size: 22px` | `.trdr-h7` class |
785
+ | `font-size: 18px` | `.trdr-body-b1` class |
786
+ | `font-size: 16px` | `.trdr-body-b2` or `.trdr-label-l2` (check weight context) |
787
+ | `font-size: 14px` | `.trdr-body-b3` or `.trdr-label-l3` (check weight context) |
788
+ | `font-size: 12px` | `.trdr-body-b4` or `.trdr-body-aux` (check letter-spacing) |
789
+ | `font-size: 10px` | `.trdr-body-b5` class |
790
+ | `font-size: [other px]` | Nearest text style class — flag in DS_MIGRATION.md if no match |
791
+
766
792
  **Do NOT replace:**
767
- - Hex values inside SVG paths or image files
768
- - Values in third-party library overrides where the semantic token would break the library layout
793
+ - Hex values inside binary image files (PNG, JPG, GIF)
794
+ - SVG external files — flag them in DS_MIGRATION.md but do not auto-edit
769
795
  - Values in commented-out code
770
796
 
797
+ **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.
798
+
771
799
  ### Step 6 — Fetch component-specific code (if applicable)
772
800
 
773
801
  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:
@@ -805,8 +833,8 @@ Skill version: trdr-ds v1.0 | Hub: https://trdr.mrocontent.com.br
805
833
  ## Manual steps required
806
834
  Check these before shipping:
807
835
 
808
- - [ ] **Fonts**: Ensure Space Grotesk, Inter, and Roboto Mono are loaded
809
- - Next.js: use `next/font/google` in layout.tsx
836
+ - [ ] **Fonts**: Ensure JetBrains Mono, Inter, and Roboto Mono are loaded
837
+ - Next.js: use `next/font/google` in layout.tsx (`JetBrains_Mono`, `Inter`, `Roboto_Mono`)
810
838
  - Others: add Google Fonts `<link>` in HTML head
811
839
 
812
840
  - [ ] **Dark/light mode**: tokens.css uses [data-theme="light"] for overrides
@@ -818,6 +846,16 @@ Check these before shipping:
818
846
  - [ ] **Skipped files**: [list any files excluded from migration]
819
847
  These still have hardcoded values — migrate manually or run /trdr-ds again
820
848
 
849
+ ## Missing DS tokens (flagged — no semantic token available)
850
+ [List patterns found in the project that have no TRDR token yet — request these in the Hub]
851
+ | Pattern | File | Suggestion |
852
+ |---------|------|-----------|
853
+ | `box-shadow: rgba(0,0,0,*)` | [file:line] | Request shadow token in Hub |
854
+ | `linear-gradient(...)` non-TRDR | [file:line] | Request gradient token or remove |
855
+
856
+ ## Missing Hub components (flagged)
857
+ [See MISSING_COMPONENTS.md if generated]
858
+
821
859
  ## Design System Reference
822
860
  - Hub: https://trdr.mrocontent.com.br
823
861
  - Tokens: https://trdr.mrocontent.com.br/tokens/semanticos
package/plugins/trdr-design-system/skills/trdr-ds/references/rules.md CHANGED
@@ -16,9 +16,9 @@ Use os equivalentes semânticos: bg.*, surface.*, content.*, scale.spacing.*
16
16
  Tabelas de preços, P&L, quantidades, qualquer dado numérico de trading.
17
17
  - `font-family: var(--font-mono)`
18
18
 
19
- ### Regra 4 — Títulos de página e headings → Space Grotesk
20
- Space Grotesk é a fonte primária da marca TRDR.
21
- - `font-family: var(--font-primary)`
19
+ ### Regra 4 — Títulos de página e headings → JetBrains Mono
20
+ JetBrains Mono é a fonte primária do TRDR DS (`--font-primary`). Use as classes de text style.
21
+ - `font-family: var(--font-primary)` — ou melhor: classe `.trdr-h1` a `.trdr-h6`
22
22
 
23
23
  ### Regra 5 — Todo restante da UI → Inter
24
24
  Body text, labels, inputs, nav, tooltips — tudo que não é heading ou número.
@@ -67,6 +67,19 @@ bg.primary (fundo base)
67
67
  | Candle verde | context.chart.candles.up |
68
68
  | Candle vermelho | context.chart.candles.down |
69
69
 
70
+ ### Regra 8 — Text Styles → sempre use as classes utilitárias
71
+ Nunca use `font-size` em px diretamente. Use as classes de text style do DS:
72
+ - Títulos: `.trdr-h1` a `.trdr-h7`
73
+ - Corpo: `.trdr-body-b1` a `.trdr-body-b5`, `.trdr-body-aux`
74
+ - Labels: `.trdr-label-l2`, `.trdr-label-l3`
75
+
76
+ ### Regra 9 — Nenhuma cor fora do DS, em lugar nenhum
77
+ `rgba()`, gradientes inline, `#hex` hardcoded são SEMPRE uma violação — sem exceções para gradientes "decorativos" ou sombras.
78
+ Se não existe token semântico para o padrão → registrar em `MISSING_COMPONENTS.md` e solicitar o token no Hub.
79
+ - ❌ `box-shadow: 0 4px 16px rgba(0,0,0,.3)`
80
+ - ❌ `background: linear-gradient(135deg, #FF6B6B, #4158F6)`
81
+ - ✅ Usar token semântico existente ou solicitar novo token ao Hub
82
+
70
83
  ---
71
84
 
72
85
  ## Hub de Referência