trdr-ds-install 1.6.0 → 1.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trdr-ds-install",
-  "version": "1.6.0",
+  "version": "1.6.5",
   "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

@@ -6,7 +6,7 @@ argument-hint: "[analyze|apply|foundation|violations|components|final|resume|sta
 allowed-tools: [Read, Glob, Grep, Edit, Write, Bash, WebFetch]
 ---
 
-**Skill version:** 1.6.0
+**Skill version:** 1.6.5
 **npm package:** trdr-ds-install
 
 You are implementing the **TRDR Design System** in a developer's project. The Design Hub is the single source of truth and lives at **https://trdr.mrocontent.com.br**.
@@ -53,13 +53,13 @@ Run this command silently via Bash:
 npm show trdr-ds-install version 2>/dev/null
 ```
 
-Compare the result with the **Skill version** constant at the top of this file (`1.6.0`).
+Compare the result with the **Skill version** constant at the top of this file (`1.6.5`).
 
 - If the command fails or returns empty (no internet / npm unavailable): skip silently, continue.
 - If registry version == local version: skip silently, continue.
 - If registry version > local version:
   ```
-  🔄 Nova versão da skill disponível: trdr-ds-install@[registry-version] (instalada: 1.6.0)
+  🔄 Nova versão da skill disponível: trdr-ds-install@[registry-version] (instalada: 1.6.5)
 
   Responda:
   - `"atualizar"` / `"update"` — instalar a nova versão agora (requer reiniciar /trdr-ds após)
@@ -114,6 +114,18 @@ Read `package.json` at the project root. Identify:
 
 Save `stylingMode` — it must be referenced throughout Phase 2 wherever the output format differs by framework.
 
+**Dual stylingMode — tailwind + styled-components simultaneously:**
+If `package.json` contains BOTH `tailwindcss` AND `styled-components` (or `@emotion/*`):
+- Set `stylingMode: 'tailwind'` (dominant — utility classes in className)
+- Set `hasStyledComponents: true` to activate additional scan
+- In Step 3, add a styled-components scan alongside the normal CSS scan:
+  - Pattern in `*.tsx, *.ts, *.jsx, *.js`: `` styled\.\w+`[^`]*(?:#[0-9A-Fa-f]{3,8}|font-family|rgba\()[^`]*` ``
+  - For each template literal matched: run A, B, F violation checks against its content (even though it's not a `.css` file)
+  - Fix: replace hardcoded values inside template literals with CSS var tokens:
+    `background: #00A8CC` → `background: var(--action-brand-default);`
+    `font-family: 'Inter'` → `font-family: var(--font-secondary);`
+- Document in `CLAUDE.md` of the project: "This project uses styled-components AND Tailwind. New components: prefer Tailwind + DS classes. Existing styled-components: use DS tokens via CSS vars in template literals."
+
 ### Step 2 — Map style structure
 
 Search for all style files:
@@ -133,6 +145,14 @@ Determine the best directory for new CSS files:
 - React CRA/Vite with `src/`: → `src/styles/` or `src/assets/`
 - Plain HTML: → `css/` or `styles/`
 
+**For `tailwind` stylingMode — additional scan:**
+Read `tailwind.config.js` (or `tailwind.config.ts`) and check `theme.colors` and `theme.extend.colors`:
+- If any color value is a hardcoded `#hex` that matches a TRDR DS token, flag it
+- Add `tailwind.config.js` to "FILES TO MODIFY" in the plan
+- Fix during Sub-fase B: replace each `'#hex'` with `'var(--semantic-token)'`
+- Example: `brand: '#00A8CC'` → `brand: 'var(--content-brand)'`
+- This allows Tailwind classes like `text-brand` to use the DS token automatically
+
 ### Step 3 — Find violations
 
 Search for TRDR rule violations across all source files (*.css, *.scss, *.tsx, *.jsx, *.ts, *.js, *.vue, *.html):
@@ -140,15 +160,30 @@ Search for TRDR rule violations across all source files (*.css, *.scss, *.tsx, *
 **A — Hardcoded colors** (should be CSS vars):
 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.
 
+**Special case — SVG attribute colors** (`stroke=`, `fill=`, `stop-color=` in HTML/JSX/Vue):
+When `#hex` is found inside an SVG attribute (not a CSS property), the fix is different — CSS variables do NOT work in SVG attributes. Instead:
+- If the SVG is a simple icon with a single solid color → replace with `stroke="currentColor"` / `fill="currentColor"` and control color via a CSS class (e.g., `.icon-brand { color: var(--content-brand); }`)
+- If the SVG has multiple distinct colors (multi-tone icon) → it should be replaced as a Category J violation (inline SVG → icon library)
+- Do NOT write `stroke="var(--token)"` — it is invalid in HTML SVG attributes
+
+Track SVG attribute color violations separately as **A\*** in DS_ANALYSIS.md with the note "SVG attribute — requires currentColor + CSS class approach, not var()."
+
 **B — Hardcoded font-family** (should be var(--font-primary/secondary/mono)):
 Search: `font-family.*Inter|font-family.*JetBrains Mono|font-family.*Space Grotesk|font-family.*Roboto Mono`
 
+**Note — JSX camelCase:** In React/Next.js files, font-family appears as `fontFamily` inside `style={{}}` objects. These are NOT detected by Category B (which scans CSS). They are captured by Category I (inline styles with `font` keyword). Do NOT double-count them in Category B; address them in Category I fix instead.
+
 **C — Hardcoded px spacing** (should be var(--spacing-*)):
 Search: `(margin|padding|gap):\s*\d+px` in CSS/SCSS
 
 **D — Primitive token usage** (should be semantic):
 Search: `var\(--color-|var\(--space-` in CSS/SCSS/component files
 
+Also search for **custom CSS variable definitions with primitive naming** in `:root {}` blocks:
+- Pattern: `--color-[a-z]|--space-[0-9]|--font-size-[0-9]` inside `:root {`
+- Flag as: "Custom CSS variable using primitive-style name: `--color-brand`. This duplicates DS token naming. Remove and replace all `var(--color-brand)` usages with the appropriate semantic token."
+- Do NOT auto-remove — flag for manual review in DS_MIGRATION.md
+
 **E — Missing tokens.css**:
 Check if `tokens.css` already exists in the project and if it's imported in the global CSS.
 
@@ -159,10 +194,29 @@ Search: `rgba\(` in CSS/SCSS/HTML files (excluding node_modules, vendor)
 Search: `linear-gradient|radial-gradient` in CSS/SCSS/HTML files
 Flag any gradient that doesn't reference a TRDR gradient token (`var(--gradient-*)`)
 
+**Gradients with hex stops:** Compare against TRDR gradient token approximate values:
+- `--gradient-bg-hero` ≈ `linear-gradient(180deg, #0E0E0E 0%, #141519 100%)`
+- `--gradient-bg-surface` ≈ `linear-gradient(180deg, #141519 0%, #0E0E0E 100%)`
+- `--gradient-brand` ≈ `linear-gradient(90deg, #00A8CC 0%, #00D4FF 100%)`
+If a gradient closely matches one of these: replace with `var(--gradient-name)`.
+If no match: flag in DS_MIGRATION.md as "Custom gradient — no DS token available."
+Non-DS colors in gradient stops (e.g. `#0a1520`) are also A violations — flag separately.
+
+**Gradients with rgba stops:** When gradient stops use `rgba()` instead of hex:
+1. Extract the base color from each rgba stop and identify it in the TRDR color mapping table.
+2. If the base color has a DS token: recommend `rgba(var(--token-rgb), opacity)` if the DS exposes RGB variables, otherwise flag in DS_MIGRATION.md.
+3. **Fade-to-transparent** pattern (e.g. `rgba(0,212,255,0.04) 0%, transparent 100%`):
+   - This is a glow/haze effect. Very unlikely to have a DS token.
+   - Flag as: "Glow effect gradient — no DS token. Consider converting to `box-shadow: 0 0 Xpx var(--token)` or remove if purely decorative."
+4. **Overlay gradient** (e.g. `rgba(255,204,64,0.1) 0%, rgba(255,204,64,0.05) 100%`):
+   - Flag as: "Tinted overlay gradient — no DS equivalent. Map rgba base color to token; keep gradient as-is or convert to a solid rgba with semantic token."
+
 **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)
 
 **I — Inline styles with design properties** (should be CSS classes with tokens):
+
+**I.1 — JSX/HTML style attribute** (standard inline styles):
 Search in `*.html, *.tsx, *.jsx, *.vue, *.svelte`:
 - HTML/Vue: `style="[^"]*(?:color|background|font|padding|margin|gap|border)[^"]*"`
 - React/JSX: `style=\{\{[^}]*(?:color|background|font|padding|margin|gap|border)[^}]*\}\}`
@@ -173,20 +227,85 @@ Do NOT flag (these are acceptable exceptions):
 - `style="--custom-prop: value"` — CSS custom property passing a dynamic value to CSS (e.g. `style="--card-delay:0.1s"`)
 - `style={{ '--custom-prop': value }}` — same in JSX
 
+**I.2 — Dynamic DOM style assignment** (imperative JS manipulation, NOT covered by I.1):
+Search in `*.tsx, *.jsx, *.js, *.ts`:
+- Pattern: `\.style\.[a-zA-Z]+\s*=\s*['"]`
+- Example: `e.currentTarget.style.background = 'rgba(255,255,255,0.03)'`
+- Example: `ref.current.style.color = '#00D4FF'`
+
+This pattern is common in hover handlers (`onMouseEnter/onMouseLeave`) and imperative animations. The assigned value is a hardcoded design value that must be replaced.
+
+**I.2 fix procedure:**
+
+*CASE 1 — onMouseEnter/onMouseLeave hover effect:*
+This is the most common case. Convert to a CSS `:hover` rule:
+```css
+/* Before: onMouseEnter sets background imperatively */
+.item { transition: background 0.15s; }
+.item:hover { background: var(--surface-hover); }
+```
+Remove the `onMouseEnter` and `onMouseLeave` handlers. Add `className="item"` to the element.
+
+*CASE 2 — State-driven imperative style (non-hover):*
+If the DOM assignment is driven by JS logic beyond simple hover, replace the hardcoded value only:
+```tsx
+// Before
+el.style.background = 'rgba(255,255,255,0.03)';
+// After
+el.style.background = 'var(--surface-hover)';
+```
+Document in DS_PROGRESS.md as "I.2 fix — dynamic style value replaced with token."
+
+PRIORITY: Always prefer CASE 1 (CSS pseudo-class) — it's more performant and idiomatic than CASE 2.
+
 **J — SVG icons inline** (should use an icon library):
 Search in `*.html, *.tsx, *.jsx, *.vue`:
 - Pattern: `<svg` in source files (NOT in logo files, NOT in `node_modules/`, `references/`, `assets/icons/`)
 - Do NOT flag: `<svg` in known logo files (those with the official TRDR fingerprint)
 - Count distinct files with inline SVGs, not total occurrences
 
+**Severity sub-classification:**
+- **J.high**: `<svg>` with hardcoded `stroke="#hex"` or `fill="#hex"` — both a J and A* violation; replace with icon library ASAP
+- **J.medium**: `<svg>` with dynamic JSX fill/stroke expression (e.g. `fill={isActive ? 'currentColor' : 'none'}`) — no hex hardcoded, but state-driven SVG attribute that must be preserved during migration; replace with icon library using conditional CSS class
+- **J.low**: `<svg>` using ONLY `currentColor` / `inherit` (no hardcoded colors) — still prefer icon library, but lower priority; note in plan: "SVG uses currentColor (color is CSS-controlled). Migration to Material Icons recommended but non-urgent."
+
+**J.medium fix procedure — dynamic SVG attributes:**
+When an SVG has `fill={condition ? 'currentColor' : 'none'}` or `stroke={value}` (JSX expression):
+1. Identify the two visual states (filled/outlined, active/inactive)
+2. Create CSS classes for each state:
+   ```css
+   .icon-star { color: var(--content-tertiary); }
+   .icon-star.active { color: var(--context-trading-signal); }
+   ```
+3. Replace the SVG with a Material Icon (or equivalent DS icon) using a conditional className:
+   ```tsx
+   <span className={`material-icons icon-star ${isWatching ? 'active' : ''}`}>star</span>
+   ```
+4. The `fill`/`stroke` logic is handled entirely by CSS — never pass state to icon attributes.
+
 **K — Logo missing or incorrect in HTML/JSX** (should use official logo-trdr.svg):
-Search in `*.html, *.tsx, *.jsx, *.vue`:
-- `<img[^>]*(?:logo|brand|mark)[^>]*src="(?!.*logo-trdr)[^"]*"` — img tag with non-official logo src
-- `<span[^>]*>[^<]*TRDR[^<]*</span>` — text "TRDR" in a span used as logo replacement
-- `import\s+\w+\s+from\s+['"][^'"]*logo(?!-trdr)[^'"]*['"]` — logo import that isn't logo-trdr
+Search in `*.html, *.tsx, *.jsx, *.vue` using **two separate Grep calls** (the combined pattern is unreliable in ripgrep):
+
+Call 1 — Non-official img logo (HTML):
+- Pattern: `src="[^"]*logo(?!-trdr)[^"]*"` — img/Image with logo in the src value itself (covers JSX where src is first attribute)
+- Secondary: `<img[^>]*(?:logo|brand|mark)[^>]*src="(?!.*logo-trdr)[^"]*"` — catches cases where logo/brand/mark appears in alt= or class= before src=
+
+Call 1b — Next.js `<Image>` component (Next.js projects only):
+- Pattern: `<Image[^>]*src="[^"]*logo(?!-trdr)[^"]*"` — next/image component with non-official logo
+- Also flag `<Image[^>]*src=\{[^}]*logo(?!Trdr)[^}]*\}` for dynamic src with variable name not matching logoTrdr
+
+Call 2 — Text span as logo (use this pattern, NOT the combined version):
+- Pattern: `>\s*TRDR\s*<` — finds any element with text content "TRDR"
+- Then check if the surrounding element is `<span>` or `<div>` (not `<img alt="TRDR">`)
+- Simpler alternative: `class="[^"]*logo[^"]*"` + check if no `<img` tag on the same line
+
+Call 3 — Wrong logo import:
+- Pattern: `import\s+\w+\s+from\s+['"][^'"]*logo(?!-trdr)[^'"]*['"]` — logo import that isn't logo-trdr
 
 Do NOT flag: `logo-trdr.svg` references — those are correct.
 
+**Note:** The pattern `<span[^>]*>[^<]*TRDR[^<]*</span>` is known to fail in ripgrep — do NOT use it.
+
 Track:
 - `total_violations` = sum of all A–H occurrences
 - `total_files_with_violations` = count of unique files with ≥ 1 violation
@@ -829,10 +948,12 @@ For each batch listed as PENDING in `DS_PROGRESS.md` § Sub-fase B:
 **Font mapping:**
 | Hardcoded | Replace with |
 |-----------|-------------|
-| `font-family: 'Inter'` | `font-family: var(--font-secondary)` |
-| `font-family: 'JetBrains Mono'` | `font-family: var(--font-primary)` |
+| `font-family: 'Inter'` or `font-family: 'Inter', -apple-system, ...` | `font-family: var(--font-secondary)` |
+| `font-family: 'JetBrains Mono'` or `font-family: 'JetBrains Mono', monospace` | `font-family: var(--font-primary)` |
 | `font-family: 'Space Grotesk'` | `font-family: var(--font-primary)` |
-| `font-family: 'Roboto Mono'` | `font-family: var(--font-mono)` |
+| `font-family: 'Roboto Mono'` or `font-family: 'Roboto Mono', monospace` | `font-family: var(--font-mono)` |
+
+**Note:** System font fallbacks (`-apple-system`, `BlinkMacSystemFont`, `sans-serif`) are removed when replacing with a DS token. The token's value in tokens.css already defines the complete font stack including fallbacks — no manual fallback needed.
 
 **Spacing mapping:**
 | Hardcoded | Replace with |
@@ -844,26 +965,102 @@ For each batch listed as PENDING in `DS_PROGRESS.md` § Sub-fase B:
 | `20px` | `var(--spacing-xl)` |
 | `24px` | `var(--spacing-2xl)` |
 | `32px` | `var(--spacing-3xl)` |
+| `0` / `0px` | Keep as `0` (no token needed) |
+| Any other value (48px, 64px, 96px, etc.) | **Keep the value as-is** — no DS token exists for it. Flag in DS_MIGRATION.md as "Custom spacing value: [Npx] in [file:line] — consider refactoring or proposing a new token in the Hub." Do NOT invent a `--spacing-4xl` or similar that doesn't exist in tokens.css. |
+
+**Multi-value spacing shorthands** (`padding: 16px 32px`, `margin: 12px 0 8px`):
+- Replace each value independently using the mapping above
+- Example: `padding: 16px 32px` → `padding: var(--spacing-lg) var(--spacing-3xl)`
+- Example: `margin: 12px 0 8px` → `margin: var(--spacing-md) 0 var(--spacing-sm)`
+- If one value has no token: replace only the mappable ones; keep the others as-is and flag
+
+**Ambiguous colors:** Use property context to decide — `background-color` → bg/surface token, `color` → content token, `border-color` → border token, `accent-color` → action token.
+
+**Tailwind arbitrary value colors** (only when `stylingMode: tailwind`):
+
+Detect in `*.tsx, *.jsx, *.html, *.vue`:
+- Pattern: `(?:bg|text|border|ring|from|to|via|outline|fill|stroke)-\[#[0-9A-Fa-f]{3,8}\]`
+- Also detect `hover:`, `focus:`, `active:`, `dark:` prefixed variants
+
+Fix strategy — apply in order of preference:
 
-**Ambiguous colors:** Use property context to decide — `background-color` → bg/surface token, `color` → content token, `border-color` → border token.
+1. **DS class exists for element role → Opção A (DS class):**
+   Replace the arbitrary Tailwind classes with the DS class, keeping non-color utilities:
+   ```jsx
+   // Before
+   className="bg-[#005266] text-white px-4 py-2 rounded cursor-pointer"
+   // After
+   className="trdr-btn trdr-btn-primary px-4 rounded"
+   ```
+
+2. **No DS class, but color maps to DS token → Opção B (CSS var arbitrary):**
+   ```jsx
+   // Before
+   className="bg-[#1A1A1A] border border-[#222222]"
+   // After
+   className="bg-[var(--bg-tertiary)] border border-[var(--border-subtle)]"
+   ```
+   Token mapping (use same color → semantic table as CSS):
+   - `bg-[#0E0E0E]` → `bg-[var(--bg-primary)]`
+   - `bg-[#141519]` → `bg-[var(--bg-secondary)]`
+   - `bg-[#1A1A1A]` → `bg-[var(--bg-tertiary)]`
+   - `text-[#FFFFFF]` → `text-[var(--content-primary)]`
+   - `text-[#A4A4A4]` → `text-[var(--content-tertiary)]`
+   - `border-[#222222]` → `border-[var(--border-subtle)]`
+   - `border-[#4A4A4A]` → `border-[var(--border-default)]`
+   - `focus:border-[#00D4FF]` → `focus:border-[var(--border-focus)]`
+   - `text-[#4FE290]` → `text-[var(--context-trading-up)]`
+   - `text-[#F34F45]` → `text-[var(--context-trading-down)]`
+
+3. **Color has no DS token (e.g. `hover:bg-[#3DD980]`, `hover:bg-[#E03D3A]`):**
+   - Flag in DS_MIGRATION.md: "Custom hover color `#hex` — no DS token equivalent"
+   - Suggestion: replace with CSS hover effect: `hover:[filter:brightness(1.15)]` or use a utility class
+   - Do NOT invent a token or leave the hardcoded color silently
+
+**`accent-color` property:** Controls native checkbox/radio/range styling.
+- `accent-color: #00A8CC` → `accent-color: var(--action-brand-default)`
+- `accent-color: #4FE290` → `accent-color: var(--content-success)`
 
 **rgba() mapping:**
 | Hardcoded pattern | Context | Replace with |
 |-------------------|---------|-------------|
 | `rgba(0,0,0,*)` | box-shadow | No TRDR shadow token exists → flag in DS_PROGRESS.md / DS_MIGRATION.md as "Missing shadow token" |
+| `rgba(255,255,255,0.03–0.08)` | border / subtle divider | `var(--border-subtle)` if token exists, otherwise flag |
+| `rgba(255,255,255,0.10–0.20)` | hover/hover overlay | `var(--surface-hover)` if token exists, otherwise flag |
 | `rgba(255,255,255,.29)` approx | overlay/backdrop | `var(--bg-overlay)` |
 | `rgba(255,255,255,*)` other | overlay | flag |
+| `rgba(0,212,255,*)` | focus glow/shadow | No alpha token exists for `--border-focus` → flag as "Missing focus-alpha token" |
+| `rgba(0,168,204,*)` | brand alpha bg | Use `var(--surface-brand)` if available, otherwise flag |
+| `rgba(79,226,144,*)` | success alpha bg | Use `var(--surface-success)` if available, otherwise flag |
+| `rgba(243,79,69,*)` | error alpha bg | Use `var(--surface-error)` if available, otherwise flag |
+| `rgba(255,204,64,*)` | warning alpha bg | Use `var(--surface-warning)` if available, otherwise flag |
 | Any other `rgba(N,N,N,*)` | various | Map to nearest semantic alpha token (--surface-brand, --surface-info, --action-*-alpha, etc.) or flag |
 
 **Gradient mapping:**
+
+Known TRDR gradient token values (use to match):
+| Token | Approximate value |
+|-------|------------------|
+| `--gradient-text-brand` | `linear-gradient(90deg, var(--content-brand), var(--border-focus))` — cyan to bright-cyan, horizontal |
+| `--gradient-bg-hero` | `linear-gradient(180deg, var(--bg-secondary), var(--bg-primary))` — dark vertical fade |
+| `--gradient-bg-fade` | `linear-gradient(180deg, var(--bg-tertiary) 0%, transparent 100%)` — surface to transparent |
+
 | 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 |
+| Gradient whose colors map to `--content-brand` + `--border-focus` (horizontal) | `var(--gradient-text-brand)` |
+| Gradient whose colors map to `--bg-secondary` → `--bg-primary` (vertical fade) | `var(--gradient-bg-hero)` |
+| Gradient whose colors map to `--bg-tertiary` → transparent | `var(--gradient-bg-fade)` |
+| Gradient using only TRDR bg colors but not matching any token above | Flag — add comment `/* gradient-bg-custom: consider adding to Hub */` |
 | `linear-gradient(...)` using any non-DS colors | Flag — developer must decide: remove, replace with TRDR gradient token, or add new token to Hub |
 | Gradient inside SVG data URI embedded in CSS | Flag |
 
 **Font-size mapping (bidirectional — CSS + HTML/JSX/Vue):**
 
+**Exception for global selectors:** If `font-size: Npx` is inside a `body {}`, `html {}`, `:root {}`, or `* {}` rule:
+- **Remove the `font-size` property entirely** — do NOT add a DS class to the element
+- Document in DS_MIGRATION.md: "Global font-size reset removed — TRDR DS typography classes manage sizes per-element"
+- Do NOT apply DS text class to `<body>` or `<html>` tags
+
 When a CSS class has a `font-size` that maps to a DS text style, the fix is **two-part**:
 
 **Part 1 — In the CSS file**: remove the properties already provided by the DS class:
@@ -879,6 +1076,12 @@ When a CSS class has a `font-size` that maps to a DS text style, the fix is **tw
 | Vue | `<h1 class="hero-title trdr-h2">` or `:class="['hero-title', 'trdr-h2']"` |
 | `css-modules` | Add `composes: trdr-h2 from global;` inside `.hero-title` in the `.module.css` |
 
+**CSS Modules local composition:** If a class uses `composes: AnotherClass` (without `from global`), it inherits styles from that class within the same file. When fixing:
+- Add `composes: trdr-X from global` to the **base class** (AnotherClass)
+- Do NOT add `composes: trdr-X from global` to the **inheriting class** — it inherits the token transitively
+- Example: `.select { composes: input; }` — add `composes: trdr-text-input from global` only to `.input`, not to `.select`
+- Adding `composes: trdr-X from global` to both would apply DS styles twice, causing doubled specificity
+
 **font-size → DS class table:**
 | font-size | DS Class | Notes |
 |-----------|----------|-------|
@@ -1214,6 +1417,35 @@ Vue:
 <!-- Keep :style only if the value is truly dynamic (changes at runtime based on data) -->
 ```
 
+**Conditional / ternary values in `style={{}}`** (common in React):
+When a style value is a ternary expression or computed value:
+```jsx
+// Before — conditional style object
+style={{
+  background: isActive ? '#4A4A4A' : 'transparent',
+  color: isActive ? '#FFFFFF' : '#A4A4A4',
+}}
+// After — state classes
+className={isActive ? 'tab-active' : 'tab-inactive'}
+// + CSS:
+// .tab-active  { background: var(--surface-primary);  color: var(--content-primary); }
+// .tab-inactive { background: transparent;             color: var(--content-tertiary); }
+```
+Steps:
+1. Identify the boolean condition controlling the state
+2. Create two CSS classes (active/inactive) with semantic token values
+3. Replace `style={{...}}` with `className={condition ? 'active-class' : 'inactive-class'}`
+4. Keep all business logic intact — only change how styles are applied
+5. Document in DS_PROGRESS.md: "Ternary style at [file:line] converted to state classes"
+
+**Special: trading up/down ternary** — when the two values are `#4FE290`/`#F34F45` (or any trading up/down pair):
+```css
+/* Use context.trading tokens, NOT content.success/error */
+.price-up   { color: var(--context-trading-up); }
+.price-down { color: var(--context-trading-down); }
+/* WRONG: .price-up { color: var(--content-success); } — success is for non-trading contexts */
+```
+
 **Add new utility classes to the project's main CSS** (not to components.css or tokens.css — those are skill-managed):
 Group new classes in a clearly labelled block at the bottom of the project's CSS, e.g.:
 ```css