@squadbase/vantage 0.6.1-dev.2d25e94 → 0.6.1-dev.90c1a41
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.
package/package.json
CHANGED
|
@@ -106,12 +106,10 @@ node <このスキルの場所>/scripts/contrast.mjs '<文字色>' '<背景色>'
|
|
|
106
106
|
見出しだけに使う色は 3:1 以上。`var(--color-*)` で書いた値は Tailwind の `oklch()` 値に直してから渡す。
|
|
107
107
|
落ちたら明度を調整して、提案に戻らずに直してよい(直したことは報告する)。
|
|
108
108
|
|
|
109
|
-
### 5. プレビューを見せる
|
|
109
|
+
### 5. プレビューを見せる
|
|
110
110
|
|
|
111
|
-
-
|
|
112
|
-
|
|
113
|
-
トークンで書く。既存ページやホームで代用しない ― ホームなどの画面はチャートやボタンを持たないことが
|
|
114
|
-
多く、変更後の色が見えない。
|
|
111
|
+
- 使い捨てページ `src/design-preview.tsx`(`src/` が無ければルート直下)を作る: KPI カード 3〜4 枚、
|
|
112
|
+
`EChart` の棒または折れ線 1 つ(5 系列)、主要ボタン・破壊的ボタン、補足の文字。すべてトークンで書く。
|
|
115
113
|
- スライドがあるなら既存のデッキの URL を案内する(プレビュー用のデッキは作らない)。
|
|
116
114
|
- **ユーザーが承認したら `src/design-preview.tsx` を削除する。** 残すとナビに出る。
|
|
117
115
|
|
|
@@ -123,14 +121,6 @@ npx vantage check
|
|
|
123
121
|
|
|
124
122
|
`HARDCODED_COLOR`(ページ内の色コード)や `DESIGN_MD_TOO_LONG` が出たらその場で直す。
|
|
125
123
|
|
|
126
|
-
### 7. 完了を報告する
|
|
127
|
-
|
|
128
|
-
報告には、更新したファイル(`DESIGN.md` / `styles.css`)に加えて次を**必ず**入れる。
|
|
129
|
-
|
|
130
|
-
- プレビューページのパスと URL(`src/design-preview.tsx` → `/design-preview`)。
|
|
131
|
-
- 「ホームなど既存の画面は一部の色しか使っていないので、変更が見えないことがある。配色はプレビュー
|
|
132
|
-
ページで確認してほしい」という一言。
|
|
133
|
-
|
|
134
124
|
## 会話中の指示との関係
|
|
135
125
|
|
|
136
126
|
- 会話中の個別の指示(「このグラフだけ赤で」)は `DESIGN.md` より優先する。そのページだけ直せばよい。
|
|
@@ -1,53 +1,38 @@
|
|
|
1
1
|
# 初期デザインのプリセット
|
|
2
2
|
|
|
3
3
|
プロジェクト作成時に選ぶ 4 つの出発点。**id(`default` / `calm` / `vivid` / `mono`)はプロジェクト
|
|
4
|
-
作成のワークフローが参照するので変えないこと。** どれも「チャートのプリセット 1 つ +
|
|
5
|
-
`DESIGN.md`
|
|
6
|
-
値を明示する)。チャートだけ変えるとホームのような色の少ない画面では見た目が変わらず、別のプリセットから
|
|
7
|
-
切り替えたときに前の `--primary` が残るため。
|
|
4
|
+
作成のワークフローが参照するので変えないこと。** どれも「チャートのプリセット 1 つ + 必要なら
|
|
5
|
+
`--primary` の上書き + `DESIGN.md` の差分」でできている。
|
|
8
6
|
|
|
9
7
|
適用の手順は共通:
|
|
10
8
|
|
|
11
9
|
1. `npx @squadbase/vantage-template chart <チャートのプリセット>` で `styles.css` のマーカーブロックを
|
|
12
10
|
差し替える。**マーカーブロックの中(`--chart-1..5`)は手で編集しない** ― コマンドの生成物で、
|
|
13
11
|
次の適用で消える。
|
|
14
|
-
2.
|
|
15
|
-
`:root`
|
|
12
|
+
2. `--primary` の上書きがあるプリセットは、`styles.css` のマーカーの**外**(先頭の `:root` ブロック)に
|
|
13
|
+
`:root` と `.dark, [data-theme="dark"]` の両方を書く。
|
|
16
14
|
3. `DESIGN.md` を `format.md` の雛形から作り、下の「DESIGN.md の差分」の行だけを書き換える。
|
|
17
15
|
4. `scripts/contrast.mjs` で `--primary-foreground` / `--primary` をライトとダークで確かめる。
|
|
18
16
|
|
|
19
17
|
| id | トーン | チャートのプリセット | `--primary` |
|
|
20
18
|
| --- | --- | --- | --- |
|
|
21
|
-
| `default` |
|
|
22
|
-
| `calm` | 落ち着いた寒色。報告書・経営向け | `ocean` |
|
|
23
|
-
| `vivid` | 明るい暖色。営業・マーケティング向け | `sunset` | 濃いオレンジ
|
|
24
|
-
| `mono` | モノクロ。印刷・資料への貼り付け向け | `mono` |
|
|
19
|
+
| `default` | 中立・無彩色のベース。データだけが色を持つ | `blue` | 上書きしない(既定の無彩色) |
|
|
20
|
+
| `calm` | 落ち着いた寒色。報告書・経営向け | `ocean` | 任意で深い青 |
|
|
21
|
+
| `vivid` | 明るい暖色。営業・マーケティング向け | `sunset` | 濃いオレンジ |
|
|
22
|
+
| `mono` | モノクロ。印刷・資料への貼り付け向け | `mono` | 上書きしない |
|
|
25
23
|
|
|
26
24
|
## `default`
|
|
27
25
|
|
|
28
26
|
- トーン: 落ち着いた無彩色のベースに、データだけが色を持つ業務ダッシュボード。装飾より読みやすさ。
|
|
29
27
|
- チャート: `blue`(青 → ティール → フクシア → バイオレット → グレー)。
|
|
30
|
-
-
|
|
31
|
-
|
|
32
|
-
```css
|
|
33
|
-
:root {
|
|
34
|
-
--primary: oklch(0.205 0 0);
|
|
35
|
-
--primary-foreground: oklch(0.985 0 0);
|
|
36
|
-
}
|
|
37
|
-
.dark,
|
|
38
|
-
[data-theme="dark"] {
|
|
39
|
-
--primary: oklch(0.922 0 0);
|
|
40
|
-
--primary-foreground: oklch(0.205 0 0);
|
|
41
|
-
}
|
|
42
|
-
```
|
|
43
|
-
|
|
28
|
+
- `styles.css`: チャートのブロックだけ。`--primary` は触らない。
|
|
44
29
|
- `DESIGN.md`: 雛形そのまま(`format.md` の雛形は `default` を説明している)。
|
|
45
30
|
|
|
46
31
|
## `calm`
|
|
47
32
|
|
|
48
33
|
- トーン: 寒色でまとめた静かな画面。強調は控えめにし、数字と罫線で読ませる。
|
|
49
34
|
- チャート: `ocean`(スカイ → シアン → インディゴ → ティール → スレート)。
|
|
50
|
-
- `--primary`(
|
|
35
|
+
- `--primary`(任意。ボタンにも色を持たせたいときだけ):
|
|
51
36
|
|
|
52
37
|
```css
|
|
53
38
|
:root {
|
|
@@ -91,20 +76,7 @@
|
|
|
91
76
|
|
|
92
77
|
- トーン: 白黒と灰色だけ。色で意味を運ばず、太さ・順番・ラベルで読ませる。
|
|
93
78
|
- チャート: `mono`(ジンク 900 → 200。ダークでは反転)。
|
|
94
|
-
-
|
|
95
|
-
|
|
96
|
-
```css
|
|
97
|
-
:root {
|
|
98
|
-
--primary: var(--color-zinc-900);
|
|
99
|
-
--primary-foreground: oklch(0.985 0 0);
|
|
100
|
-
}
|
|
101
|
-
.dark,
|
|
102
|
-
[data-theme="dark"] {
|
|
103
|
-
--primary: var(--color-zinc-200);
|
|
104
|
-
--primary-foreground: oklch(0.205 0 0);
|
|
105
|
-
}
|
|
106
|
-
```
|
|
107
|
-
|
|
79
|
+
- `styles.css`: チャートのブロックだけ。`--primary` は触らない(既定が無彩色)。
|
|
108
80
|
- `DESIGN.md` の差分: トーンを上の文に。強調 = `--chart-1`(最も濃い灰)。良い = 専用色なし(▲ と
|
|
109
81
|
符号)、悪い = `--destructive`(**画面で唯一の有彩色**として使う)。チャートは系列を 3 つまでにし、
|
|
110
82
|
それ以上は直接ラベルを付ける。禁止: 隣り合う `--chart-4` と `--chart-5`(明度差が小さい)。
|