trdr-ds-install 1.0.0 → 1.0.2

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 (2) hide show
  1. package/package.json +1 -1
  2. package/plugins/trdr-design-system/skills/trdr-ds/SKILL.md +109 -93
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "trdr-ds-install",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
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
@@ -95,13 +95,13 @@ Output the following report and **do not proceed** until the developer explicitl
95
95
  ### FILES TO MODIFY:
96
96
  - [ ] `[global-css-file]` — add @import for tokens.css and components.css
97
97
  [list each file with violations, e.g.:]
98
- - [ ] `src/components/Button.css` — 3 violations (hardcoded colors: #3D99FF, #0E0E0E, #FFFFFF)
98
+ - [ ] `src/components/Button.css` — 3 violations (hardcoded colors: #00A8CC, #0E0E0E, #FFFFFF)
99
99
  - [ ] `src/app/globals.css` — 2 violations (font-family: Inter)
100
100
 
101
101
  ### VIOLATIONS FOUND:
102
102
  | Category | Count | Example |
103
103
  |----------|-------|---------|
104
- | Hardcoded colors | N | `color: #3D99FF` in Button.css:14 |
104
+ | Hardcoded colors | N | `color: #00A8CC` in Button.css:14 |
105
105
  | Hardcoded fonts | N | `font-family: Inter` in globals.css:8 |
106
106
  | Hardcoded spacing | N | `padding: 16px` in Card.css:22 |
107
107
  | Primitive token use | N | `var(--color-blue-600)` in Badge.css:31 |
@@ -153,20 +153,20 @@ Create `tokens.css` in the detected styles directory with this content:
153
153
  PRIMITIVES — COLORS (never use directly in UI — use semantic tokens)
154
154
  ========================================================================= */
155
155
 
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;
156
+ /* Brand Cyan (formerly Blue) */
157
+ --color-blue-50: #E6FEFF;
158
+ --color-blue-100: #CCFDFF;
159
+ --color-blue-200: #99F9FF;
160
+ --color-blue-300: #5CF3FF;
161
+ --color-blue-400: #29ECFF;
162
+ --color-blue-500: #00D4FF;
163
+ --color-blue-600: #00A8CC;
164
+ --color-blue-700: #007D99;
165
+ --color-blue-800: #005266;
166
+ --color-blue-900: #002933;
167
+ --color-blue-alpha-08: #00D4FF14;
168
+ --color-blue-alpha-16: #00D4FF29;
169
+ --color-blue-alpha-32: #00D4FF52;
170
170
 
171
171
  /* Neutral */
172
172
  --color-neutral-0: #FFFFFF;
@@ -252,19 +252,19 @@ Create `tokens.css` in the detected styles directory with this content:
252
252
  --color-orange-alpha-32: #FF640052;
253
253
 
254
254
  /* 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;
255
+ --color-purple-50: #F1EFF5;
256
+ --color-purple-100: #D6D3E5;
257
+ --color-purple-200: #BBB4D6;
258
+ --color-purple-300: #9E94C9;
259
+ --color-purple-400: #8072BE;
260
+ --color-purple-500: #6350B3;
261
+ --color-purple-600: #50418E;
262
+ --color-purple-700: #3E3467;
263
+ --color-purple-800: #2A2542;
264
+ --color-purple-900: #161320;
265
+ --color-purple-alpha-08: #6350B314;
266
+ --color-purple-alpha-16: #6350B329;
267
+ --color-purple-alpha-32: #6350B352;
268
268
 
269
269
  /* =========================================================================
270
270
  PRIMITIVES — SPACING
@@ -331,11 +331,12 @@ Create `tokens.css` in the detected styles directory with this content:
331
331
  --bg-tertiary: #1A1A1A;
332
332
  --bg-inverse: #FFFFFF;
333
333
  --bg-overlay: #FFFFFF29;
334
- --bg-brand: #3D99FF;
334
+ --bg-brand: #00D4FF;
335
+ --bg-brand2: #6350B3;
335
336
  --bg-warning: #FFCC40;
336
337
  --bg-danger: #F34F45;
337
338
  --bg-success: #31DD7E;
338
- --bg-base-alpha-0: rgba(14, 14, 14, 0);
339
+ --bg-base-alpha-0: #0E0E0E00;
339
340
 
340
341
  /* =========================================================================
341
342
  SEMANTIC — SURFACES
@@ -343,13 +344,13 @@ Create `tokens.css` in the detected styles directory with this content:
343
344
  --surface-primary: #4A4A4A;
344
345
  --surface-secondary: #222222;
345
346
  --surface-tertiary: #1A1A1A;
346
- --surface-interactive: #0052CC;
347
+ --surface-interactive: #002933;
347
348
  --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);
349
+ --surface-info: #00D4FF14;
350
+ --surface-error: #F1312614;
351
+ --surface-warning: #FFCC4014;
352
+ --surface-success: #4FE29014;
353
+ --surface-brand: #00D4FF29;
353
354
 
354
355
  /* =========================================================================
355
356
  SEMANTIC — CONTENT (TEXT)
@@ -358,12 +359,13 @@ Create `tokens.css` in the detected styles directory with this content:
358
359
  --content-secondary: #E8E8E8;
359
360
  --content-tertiary: #A4A4A4;
360
361
  --content-disabled: #4A4A4A;
362
+ --content-placeholder: #777777;
361
363
  --content-inverse: #1A1A1A;
362
- --content-info: #65B0FF;
364
+ --content-info: #CCFDFF;
363
365
  --content-warning: #FFCC40;
364
366
  --content-error: #F34F45;
365
367
  --content-success: #4FE290;
366
- --content-brand: #3D99FF;
368
+ --content-brand: #00D4FF;
367
369
  --content-on-brand: #FFFFFF;
368
370
 
369
371
  /* =========================================================================
@@ -372,43 +374,47 @@ Create `tokens.css` in the detected styles directory with this content:
372
374
  --border-default: #4A4A4A;
373
375
  --border-subtle: #222222;
374
376
  --border-strong: #A4A4A4;
375
- --border-focus: #65B0FF;
377
+ --border-focus: #00D4FF;
376
378
  --border-disabled: #777777;
377
379
 
378
380
  /* =========================================================================
379
381
  SEMANTIC — ACTIONS
380
382
  ========================================================================= */
381
383
 
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);
384
+ /* Brand (Cyan — primary) */
385
+ --action-brand-default: #00D4FF;
386
+ --action-brand-hover: #00A8CC;
387
+ --action-brand-active: #007D99;
388
+ --action-brand-disabled: #777777;
389
+ --action-brand-alpha: #00D4FF14;
388
390
 
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;
391
+ /* Brand Inverse (solid cyan primary button) */
392
+ --action-brand-inverse-default: #005266;
393
+ --action-brand-inverse-hover: #007D99;
394
+ --action-brand-inverse-active: #002933;
395
+ --action-brand-inverse-alpha: #00D4FF14;
396
+ --action-brand-inverse-disabled: #777777;
393
397
 
394
398
  /* Secondary (Neutral) */
395
399
  --action-secondary-default: #4A4A4A;
396
400
  --action-secondary-hover: #777777;
397
401
  --action-secondary-active: #A4A4A4;
398
402
  --action-secondary-disabled: #1A1A1A;
399
- --action-secondary-alpha: rgba(74, 74, 74, 0.16);
403
+ --action-secondary-alpha: #FFFFFF00;
400
404
 
401
405
  /* Tertiary (Purple) */
402
- --action-tertiary-default: #7C4DFF;
403
- --action-tertiary-hover: #6200EA;
404
- --action-tertiary-active: #5000CC;
405
- --action-tertiary-disabled: #7C4DFF29;
406
+ --action-tertiary-default: #50418E;
407
+ --action-tertiary-hover: #3E3467;
408
+ --action-tertiary-active: #2A2542;
409
+ --action-tertiary-disabled: #777777;
410
+ --action-tertiary-alpha: #6350B314;
406
411
 
407
412
  /* Destructive (Orange) */
408
- --action-destructive-default: #F57C00;
409
- --action-destructive-hover: #FF6400;
410
- --action-destructive-active: #CC5000;
411
- --action-destructive-disabled: #FF640014;
413
+ --action-destructive-default: #EA580C;
414
+ --action-destructive-hover: #C2410C;
415
+ --action-destructive-active: #9A3412;
416
+ --action-destructive-disabled: #777777;
417
+ --action-destructive-alpha: #F9731614;
412
418
 
413
419
  /* =========================================================================
414
420
  SEMANTIC — TRADING CONTEXT
@@ -420,25 +426,27 @@ Create `tokens.css` in the detected styles directory with this content:
420
426
 
421
427
  /* Price */
422
428
  --context-trading-up: #4FE290;
429
+ --context-trading-up-alpha: #4FE29029;
423
430
  --context-trading-down: #F34F45;
431
+ --context-trading-down-alpha: #F1312629;
424
432
 
425
433
  /* 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);
434
+ --context-trading-long-text: #6DE7A2;
435
+ --context-trading-long-default: #4FE29014;
436
+ --context-trading-long-hover: #4FE29029;
437
+ --context-trading-long-active: #4FE29052;
430
438
 
431
439
  /* 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);
440
+ --context-trading-short-text: #F56D64;
441
+ --context-trading-short-default: #F1312614;
442
+ --context-trading-short-hover: #F1312629;
443
+ --context-trading-short-active: #F1312652;
436
444
 
437
445
  /* 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);
446
+ --context-trading-stop-default: #F97316;
447
+ --context-trading-stop-hover: #EA580C;
448
+ --context-trading-stop-active: #C2410C;
449
+ --context-trading-stop-alpha: #F9731614;
442
450
 
443
451
  /* =========================================================================
444
452
  SCALE — RESPONSIVE SPACING (Desktop default)
@@ -470,18 +478,18 @@ Create `tokens.css` in the detected styles directory with this content:
470
478
 
471
479
  /* =========================================================================
472
480
  FONTS (use Google Fonts or next/font to load these)
473
- Space Grotesk → headings | Inter → body/labels | Roboto Mono → numbers
481
+ JetBrains Mono → headings | Inter → body/labels | Roboto Mono → numbers
474
482
  ========================================================================= */
475
- --font-primary: 'Space Grotesk', sans-serif;
483
+ --font-primary: 'JetBrains Mono', monospace;
476
484
  --font-secondary: 'Inter', sans-serif;
477
485
  --font-mono: 'Roboto Mono', monospace;
478
486
 
479
487
  /* =========================================================================
480
488
  BRAND GRADIENTS (Site/Marketing)
481
489
  ========================================================================= */
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%);
490
+ --gradient-text-brand: linear-gradient(90deg, #00D4FF 0%, #FFFFFF 100%);
491
+ --gradient-text-brand-hero: linear-gradient(90deg, #00D4FF 30%, #FFFFFF 100%);
492
+ --gradient-bg-hero: linear-gradient(180deg, #002933 0%, #0E0E0E 40%);
485
493
  --gradient-bg-fade: linear-gradient(180deg, rgba(14,14,14,0) 0%, #0E0E0E 47%);
486
494
  }
487
495
 
@@ -493,25 +501,31 @@ Create `tokens.css` in the detected styles directory with this content:
493
501
  --bg-secondary: #F5F5F5;
494
502
  --bg-tertiary: #FAFAFA;
495
503
  --bg-inverse: #1A1A1A;
496
- --bg-overlay: #00000029;
504
+ --bg-overlay: #FFFFFF52;
497
505
  --surface-primary: #D2D2D2;
498
506
  --surface-secondary: #E8E8E8;
499
507
  --surface-tertiary: #EEEEEE;
500
- --surface-interactive: #84BFFF;
508
+ --surface-interactive: #29ECFF;
501
509
  --surface-disabled: #FAFAFA;
510
+ --surface-brand: #00D4FF29;
502
511
  --content-primary: #1A1A1A;
503
512
  --content-secondary: #222222;
504
513
  --content-tertiary: #4A4A4A;
505
514
  --content-disabled: #777777;
506
515
  --content-inverse: #FFFFFF;
507
- --content-brand: #0066FF;
516
+ --content-brand: #005266;
517
+ --content-info: #00A8CC;
508
518
  --border-default: #A4A4A4;
509
519
  --border-subtle: #E8E8E8;
510
520
  --border-strong: #D2D2D2;
511
521
  --border-disabled: #E8E8E8;
512
- --action-brand-default: #0066FF;
513
- --action-brand-hover: #1E82FF;
514
- --action-brand-active: #3D99FF;
522
+ --border-focus: #00D4FF;
523
+ --action-brand-default: #007D99;
524
+ --action-brand-hover: #005266;
525
+ --action-brand-active: #002933;
526
+ --action-brand-inverse-default: #00A8CC;
527
+ --action-brand-inverse-hover: #007D99;
528
+ --action-brand-inverse-active: #005266;
515
529
  }
516
530
  ```
517
531
 
@@ -675,8 +689,8 @@ Full reference: https://trdr.mrocontent.com.br
675
689
  1. NEVER use primitive tokens directly (--color-*, --space-*) — always use semantic tokens
676
690
  2. Backgrounds: --bg-primary (#0E0E0E), --bg-secondary (#141519), --bg-tertiary (#1A1A1A)
677
691
  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)
692
+ 4. Primary CTA: --action-brand-inverse-default (#005266) for filled buttons
693
+ 5. Fonts: --font-primary = JetBrains Mono (headings) | --font-secondary = Inter (body) | --font-mono = Roboto Mono (numbers)
680
694
  6. Spacing: always var(--spacing-xs/sm/md/lg/xl/2xl/3xl) — never hardcoded px
681
695
  7. Border radius: always var(--radius-sm/md/lg/full) — never hardcoded px
682
696
 
@@ -691,9 +705,10 @@ Full reference: https://trdr.mrocontent.com.br
691
705
  | Surface | --surface-secondary | #222222 |
692
706
  | Text primary | --content-primary | #FFFFFF |
693
707
  | Text secondary | --content-tertiary | #A4A4A4 |
694
- | Primary button | --action-brand-inverse-default | #0066FF |
708
+ | Brand (text/icon) | --content-brand | #00A8CC |
709
+ | Primary button | --action-brand-inverse-default | #005266 |
695
710
  | Border | --border-default | #4A4A4A |
696
- | Focus ring | --border-focus | #65B0FF |
711
+ | Focus ring | --border-focus | #00D4FF |
697
712
  | Success | --content-success | #4FE290 |
698
713
  | Error | --content-error | #F34F45 |
699
714
  | Warning | --content-warning | #FFCC40 |
@@ -735,18 +750,19 @@ For each violation found in Phase 1, apply the semantic token replacement.
735
750
  | `#FFFFFF` | text/bg | `var(--content-primary)` or `var(--bg-inverse)` |
736
751
  | `#E8E8E8` | text | `var(--content-secondary)` |
737
752
  | `#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)` |
753
+ | `#00A8CC` | action/text brand | `var(--action-brand-default)` or `var(--content-brand)` |
754
+ | `#005266` | button bg CTA | `var(--action-brand-inverse-default)` |
755
+ | `#00D4FF` | focus/info | `var(--border-focus)` or `var(--content-info)` |
740
756
  | `#F34F45` | error/trading | `var(--content-error)` or `var(--context-trading-down)` |
741
757
  | `#4FE290` | success/trading | `var(--content-success)` or `var(--context-trading-up)` |
742
758
  | `#FFCC40` | warning | `var(--content-warning)` |
743
- | `#65B0FF` | focus/info | `var(--border-focus)` or `var(--content-info)` |
744
759
  | `#F57C00` | destructive | `var(--action-destructive-default)` |
745
760
 
746
761
  **Font mapping:**
747
762
  | Hardcoded | Replace with |
748
763
  |-----------|-------------|
749
764
  | `font-family: 'Inter'` | `font-family: var(--font-secondary)` |
765
+ | `font-family: 'JetBrains Mono'` | `font-family: var(--font-primary)` |
750
766
  | `font-family: 'Space Grotesk'` | `font-family: var(--font-primary)` |
751
767
  | `font-family: 'Roboto Mono'` | `font-family: var(--font-mono)` |
752
768
 
@@ -805,8 +821,8 @@ Skill version: trdr-ds v1.0 | Hub: https://trdr.mrocontent.com.br
805
821
  ## Manual steps required
806
822
  Check these before shipping:
807
823
 
808
- - [ ] **Fonts**: Ensure Space Grotesk, Inter, and Roboto Mono are loaded
809
- - Next.js: use `next/font/google` in layout.tsx
824
+ - [ ] **Fonts**: Ensure JetBrains Mono, Inter, and Roboto Mono are loaded
825
+ - Next.js: use `next/font/google` in layout.tsx (`JetBrains_Mono`, `Inter`, `Roboto_Mono`)
810
826
  - Others: add Google Fonts `<link>` in HTML head
811
827
 
812
828
  - [ ] **Dark/light mode**: tokens.css uses [data-theme="light"] for overrides