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(コードレベル)
|
## 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
|
```html
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue