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:
parent
251e5316eb
commit
54e50fabf1
25
DESIGN.md
25
DESIGN.md
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue