docs(design): prohibit colored borderLeft on card lists

Card-type components must not use borderLeft for severity color.
Severity is expressed via icon + dim-bg badge only.
Navigation tree active state remains an exception.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
posimai 2026-04-13 09:19:13 +09:00
parent 251e5316eb
commit 54e50fabf1
1 changed files with 25 additions and 0 deletions

View File

@ -275,6 +275,31 @@ Station・Guard・その他サイバー系アプリで使うダークブルー
## 9. Do's and Don'tsコードレベル
### カードの左縦罫線(禁止)
カード型リストIssueCard, CVECard, LicenseCard, IacCard など)の左辺に severity/状態カラーを使った縦罫線を付けてはいけない。
severity は内部のアイコンと dim-bg バッジで表現する。縦罫線はノイズになり "AIっぽいダサさ" の原因になる。
```tsx
// NG: 左罫線で severity を表現
<div style={{
border: '1px solid var(--border)',
borderLeft: `2px solid ${cfg.color}`, // ← 禁止
}}>
// OK: 左罫線なし。アイコン + dim-bg バッジで severity を示す
<div style={{
border: '1px solid var(--border)',
}}>
<div style={{ background: cfg.dim }}>
<Icon style={{ color: cfg.color }} />
</div>
```
例外: ファイルツリーのアクティブ選択状態(`borderLeft: '2px solid var(--accent)'`)は許可。ナビゲーション状態の表示であり、カードではないため。
---
### 色の使い方
```html