@harry4869/css-tokens 0.1.1 → 0.1.2
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/README.md +168 -55
- package/dist/index.css +120 -64
- package/dist/index.min.css +1 -1
- package/package.json +1 -1
- package/src/components/button.css +86 -0
- package/src/components/card.css +45 -0
- package/src/components/input.css +72 -0
- package/src/index.css +120 -64
- package/tailwind.config.cjs +49 -22
package/README.md
CHANGED
|
@@ -1,28 +1,23 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @harry4869/css-tokens
|
|
2
2
|
|
|
3
3
|
Minimal design-tokens package for Team Mirai.
|
|
4
|
-
# @team-mirai/css-tokens
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
**shadcn/Radix 風の洗練されたカラーパレット、タイポグラフィ、コンポーネント CSS を備えたデザイントークンパッケージです。**
|
|
7
6
|
|
|
8
|
-
主な内容
|
|
9
|
-
- `src/index.css` — カラートークンやダークモードの変数定義（ソース）
|
|
10
|
-
## @team-mirai/css-tokens
|
|
7
|
+
## 主な内容
|
|
11
8
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
主な内容
|
|
15
|
-
|
|
16
|
-
- `src/index.css` — トークンのソース（カラー、ダークモード定義など）
|
|
9
|
+
- `src/index.css` — shadcn/Radix インスパイアのカラーパレット、トークン定義（ソース）
|
|
10
|
+
- `src/components/` — 再利用可能なコンポーネント CSS（カード、ボタン、入力フィールド）
|
|
17
11
|
- `dist/index.css`, `dist/index.min.css` — ビルド済みの配布ファイル
|
|
18
|
-
- `tailwind.config.cjs` —
|
|
12
|
+
- `tailwind.config.cjs` — トークンを Tailwind クラスとして使うための設定
|
|
13
|
+
- `examples/sample/index.html` — 実際の使用例＆スタイルガイド
|
|
19
14
|
|
|
20
15
|
インストール
|
|
21
16
|
|
|
22
17
|
公開パッケージを使う場合:
|
|
23
18
|
|
|
24
19
|
```bash
|
|
25
|
-
npm install @
|
|
20
|
+
npm install @harry4869/css-tokens
|
|
26
21
|
```
|
|
27
22
|
|
|
28
23
|
GitHub リポジトリから直接インストールする場合（公開前のテスト等）:
|
|
@@ -59,21 +54,32 @@ npm run build:prod # minified 版（dist/index.min.css）も生成
|
|
|
59
54
|
1) 直接 CSS をインポート（例: Next.js / SvelteKit 等）
|
|
60
55
|
|
|
61
56
|
```ts
|
|
62
|
-
import '@
|
|
57
|
+
import '@harry4869/css-tokens/dist/index.css'
|
|
63
58
|
```
|
|
64
59
|
|
|
65
60
|
CSS 内でトークンを使用:
|
|
66
61
|
|
|
67
62
|
```css
|
|
68
63
|
body {
|
|
69
|
-
background: var(--background);
|
|
70
|
-
color: var(--foreground);
|
|
64
|
+
background: hsl(var(--background));
|
|
65
|
+
color: hsl(var(--foreground));
|
|
71
66
|
}
|
|
72
67
|
|
|
73
68
|
.card {
|
|
74
|
-
background: var(--card);
|
|
75
|
-
color: var(--card-foreground);
|
|
76
|
-
border
|
|
69
|
+
background: hsl(var(--card));
|
|
70
|
+
color: hsl(var(--card-foreground));
|
|
71
|
+
border: 1px solid hsl(var(--border));
|
|
72
|
+
border-radius: var(--radius-lg);
|
|
73
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.button {
|
|
77
|
+
background: hsl(var(--primary));
|
|
78
|
+
color: hsl(var(--primary-foreground));
|
|
79
|
+
border-radius: var(--radius-lg);
|
|
80
|
+
padding: 0.5rem 1rem;
|
|
81
|
+
font-weight: 500;
|
|
82
|
+
transition: all 0.2s ease-in-out;
|
|
77
83
|
}
|
|
78
84
|
```
|
|
79
85
|
|
|
@@ -83,7 +89,7 @@ body {
|
|
|
83
89
|
|
|
84
90
|
```js
|
|
85
91
|
// tailwind.config.js
|
|
86
|
-
const mirai = require('@
|
|
92
|
+
const mirai = require('@harry4869/css-tokens/tailwind.config.cjs')
|
|
87
93
|
|
|
88
94
|
module.exports = {
|
|
89
95
|
content: ['./src/**/*.{js,ts,jsx,tsx,html}'],
|
|
@@ -96,26 +102,88 @@ module.exports = {
|
|
|
96
102
|
その後エントリで CSS を読み込みます:
|
|
97
103
|
|
|
98
104
|
```ts
|
|
99
|
-
import '@
|
|
105
|
+
import '@harry4869/css-tokens/dist/index.css'
|
|
100
106
|
```
|
|
101
107
|
|
|
102
108
|
テンプレート例:
|
|
103
109
|
|
|
104
110
|
```html
|
|
105
|
-
<button class="bg-primary text-primary-foreground rounded">
|
|
111
|
+
<button class="bg-primary text-primary-foreground px-4 py-2 rounded-lg">
|
|
112
|
+
Primary Button
|
|
113
|
+
</button>
|
|
114
|
+
|
|
115
|
+
<div class="bg-card border border-border rounded-lg p-6 shadow-sm">
|
|
116
|
+
<h3 class="text-lg font-semibold">Card Title</h3>
|
|
117
|
+
<p class="text-muted-foreground mt-2">Card description goes here.</p>
|
|
118
|
+
</div>
|
|
106
119
|
```
|
|
107
120
|
|
|
108
121
|
3) CSS 変数のみを使用
|
|
109
122
|
|
|
110
123
|
```css
|
|
111
|
-
@import '@
|
|
124
|
+
@import '@harry4869/css-tokens/dist/index.css';
|
|
125
|
+
|
|
126
|
+
:root {
|
|
127
|
+
--my-primary: hsl(var(--primary));
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.component {
|
|
131
|
+
color: var(--my-primary);
|
|
132
|
+
background: hsl(var(--background));
|
|
133
|
+
padding: var(--radius-lg);
|
|
134
|
+
}
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
## コンポーネント（オプション）
|
|
112
138
|
|
|
113
|
-
|
|
139
|
+
パッケージに含まれる再利用可能なコンポーネント CSS を使うことで、一貫性のある UI をすぐに実装できます。
|
|
114
140
|
|
|
115
|
-
|
|
141
|
+
### カード
|
|
142
|
+
|
|
143
|
+
```html
|
|
144
|
+
<div class="card">
|
|
145
|
+
<div class="card-header">
|
|
146
|
+
<h3 class="card-title">Card Title</h3>
|
|
147
|
+
<p class="card-description">Card description</p>
|
|
148
|
+
</div>
|
|
149
|
+
<div class="card-content">
|
|
150
|
+
Content goes here.
|
|
151
|
+
</div>
|
|
152
|
+
<div class="card-footer">
|
|
153
|
+
<button class="btn btn-secondary">Cancel</button>
|
|
154
|
+
<button class="btn btn-primary">Save</button>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### ボタン
|
|
160
|
+
|
|
161
|
+
```html
|
|
162
|
+
<!-- Variants -->
|
|
163
|
+
<button class="btn btn-primary">Primary</button>
|
|
164
|
+
<button class="btn btn-secondary">Secondary</button>
|
|
165
|
+
<button class="btn btn-ghost">Ghost</button>
|
|
166
|
+
<button class="btn btn-destructive">Delete</button>
|
|
167
|
+
|
|
168
|
+
<!-- Sizes -->
|
|
169
|
+
<button class="btn btn-primary btn-sm">Small</button>
|
|
170
|
+
<button class="btn btn-primary btn-lg">Large</button>
|
|
171
|
+
|
|
172
|
+
<!-- Disabled -->
|
|
173
|
+
<button class="btn btn-primary" disabled>Disabled</button>
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
### フォーム
|
|
177
|
+
|
|
178
|
+
```html
|
|
179
|
+
<div class="form-group">
|
|
180
|
+
<label class="label">Email</label>
|
|
181
|
+
<input type="email" class="input" placeholder="your@email.com">
|
|
182
|
+
<p class="helper-text">We'll never share your email.</p>
|
|
183
|
+
</div>
|
|
116
184
|
```
|
|
117
185
|
|
|
118
|
-
ダークモード
|
|
186
|
+
## ダークモード
|
|
119
187
|
|
|
120
188
|
パッケージは `.dark` セレクタ内のダークトークン定義を含みます。Tailwind をクラスベースのダークモードにする場合の例:
|
|
121
189
|
|
|
@@ -123,9 +191,25 @@ import '@team-mirai/css-tokens/dist/index.css'
|
|
|
123
191
|
module.exports = { darkMode: 'class' }
|
|
124
192
|
```
|
|
125
193
|
|
|
126
|
-
HTML のルートに `class="dark"`
|
|
194
|
+
HTML のルートに `class="dark"` を付与するとダークトークンが自動的に適用されます:
|
|
127
195
|
|
|
128
|
-
|
|
196
|
+
```html
|
|
197
|
+
<html class="dark">
|
|
198
|
+
<body>
|
|
199
|
+
<!-- Dark mode tokens apply here -->
|
|
200
|
+
</body>
|
|
201
|
+
</html>
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
JavaScript でも切り替え可能:
|
|
205
|
+
|
|
206
|
+
```js
|
|
207
|
+
function toggleDarkMode() {
|
|
208
|
+
document.documentElement.classList.toggle('dark');
|
|
209
|
+
}
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
## 開発・ビルド
|
|
129
213
|
|
|
130
214
|
```bash
|
|
131
215
|
npm run build # 通常ビルド（dist/index.css）
|
|
@@ -134,44 +218,73 @@ npm run lint # stylelint を実行
|
|
|
134
218
|
npm run test # テストを実行
|
|
135
219
|
```
|
|
136
220
|
|
|
137
|
-
|
|
221
|
+
## トークンの編集
|
|
138
222
|
|
|
139
223
|
1. `src/index.css` を編集（ソースが単一の真実）
|
|
140
224
|
2. `npm run build` または `npm run build:prod` を実行
|
|
141
225
|
3. `src/` と `dist/` をコミットしてプッシュ
|
|
142
226
|
|
|
143
|
-
Prepare スクリプトについて
|
|
227
|
+
## Prepare スクリプトについて
|
|
144
228
|
|
|
145
229
|
このパッケージは `prepare` スクリプトを持ちます。GitHub 経由でインストールされた場合、インストール後に自動的に `prepare` が走り `dist/` を生成します。受け手側にビルドツールが無いと失敗する可能性があるため、確実性を重視する場合は `dist/` をコミットして配布することを推奨します。
|
|
146
230
|
|
|
147
|
-
|
|
231
|
+
## 利用可能なトークン
|
|
232
|
+
|
|
233
|
+
### カラー
|
|
234
|
+
|
|
235
|
+
- `--primary`, `--primary-accent`, `--primary-foreground` — 鮮やかなインディゴ/ブルー系
|
|
236
|
+
- `--secondary`, `--secondary-foreground` — セカンダリカラー
|
|
237
|
+
- `--background`, `--foreground` — ページ背景とテキスト色
|
|
238
|
+
- `--card`, `--card-foreground` — カード背景とテキスト色
|
|
239
|
+
- `--muted`, `--muted-foreground` — 無効な状態、淡い色
|
|
240
|
+
- `--accent`, `--accent-foreground` — アクセント色
|
|
241
|
+
- `--destructive`, `--destructive-foreground` — エラー・危険状態
|
|
242
|
+
- `--border`, `--input`, `--ring` — ボーダー、入力フィールド、フォーカスリング
|
|
148
243
|
|
|
149
|
-
|
|
150
|
-
- `--secondary`, `--secondary-foreground`
|
|
151
|
-
- `--background`, `--foreground`, `--card`, `--card-foreground`
|
|
152
|
-
- `--accent`, `--destructive`, `--border`, `--input`, `--ring`
|
|
153
|
-
- `--chart-1` ～ `--chart-5`
|
|
154
|
-
- `--radius`, `--leading-relaxed`
|
|
244
|
+
### スペーシング・タイポグラフィ
|
|
155
245
|
|
|
156
|
-
|
|
246
|
+
- `--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-xl` — 角丸の大きさ
|
|
247
|
+
- `--leading-relaxed` — 行間（1.875）
|
|
248
|
+
- `--tracking-tight`, `--tracking-normal` — 文字間隔
|
|
249
|
+
- `--font-size-sm`, `--font-size-base`, `--font-size-lg`, `--font-size-xl`, `--font-size-2xl` — フォントサイズ
|
|
157
250
|
|
|
158
|
-
|
|
159
|
-
2. Git に push とタグ送信
|
|
160
|
-
3. （任意）GitHub Release を作成して `dist/` を添付
|
|
161
|
-
4. npm に公開する場合: `npm publish --access public`
|
|
251
|
+
### チャート色
|
|
162
252
|
|
|
163
|
-
|
|
253
|
+
- `--chart-1` ～ `--chart-5` — データ可視化用の色
|
|
164
254
|
|
|
165
|
-
|
|
166
|
-
- トークンが反映されない: エントリで `dist/index.css` を確実に読み込んでいるか確認してください。
|
|
167
|
-
- ダークモードが効かない: Tailwind で `darkMode: 'class'` を有効にし、ルートに `class="dark"` を付与してください。
|
|
255
|
+
## リリース・公開
|
|
168
256
|
|
|
169
|
-
|
|
257
|
+
```bash
|
|
258
|
+
# バージョン更新とタグ付け
|
|
259
|
+
npm version patch # または minor/major に応じて
|
|
260
|
+
git push && git push --tags
|
|
261
|
+
|
|
262
|
+
# npm に公開（2FA が有効な場合は OTP を入力）
|
|
263
|
+
npm publish --access public
|
|
264
|
+
|
|
265
|
+
# GitHub Release 作成
|
|
266
|
+
gh release create v0.1.1 --generate-notes
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
**詳細手順:**
|
|
270
|
+
1. `package.json` の version を更新
|
|
271
|
+
2. `CHANGELOG.md` にリリースノートを記載
|
|
272
|
+
3. Git にコミット＆プッシュ、タグを作成
|
|
273
|
+
4. `npm publish --access public` で npm に公開
|
|
274
|
+
5. GitHub Release を作成して `dist/` ファイルを添付（オプション）
|
|
170
275
|
|
|
171
|
-
|
|
172
|
-
サンプルは `mirai-css-tokens/dist/index.css` を読み込み、カードとボタンの簡単な例を表示します。
|
|
276
|
+
## トラブルシューティング
|
|
173
277
|
|
|
174
|
-
|
|
278
|
+
- **dist が見つからない**: `npm run build` を実行してください。
|
|
279
|
+
- **トークンが反映されない**: エントリで `dist/index.css` を確実に読み込んでいるか確認してください。
|
|
280
|
+
- **ダークモードが効かない**: Tailwind で `darkMode: 'class'` を有効にし、ルートに `class="dark"` を付与してください。
|
|
281
|
+
- **コンポーネント CSS がスタイルされない**: `@import './components/*.css'` が `src/index.css` に含まれていることを確認し、ビルドを実行してください。
|
|
282
|
+
|
|
283
|
+
## Examples（ローカルサンプル）
|
|
284
|
+
|
|
285
|
+
リポジトリには詳細なサンプルが含まれています: [examples/sample/index.html](../../examples/sample/index.html)
|
|
286
|
+
|
|
287
|
+
ローカルで確認：
|
|
175
288
|
|
|
176
289
|
```bash
|
|
177
290
|
cd examples/sample
|
|
@@ -179,9 +292,9 @@ npx http-server -p 8080
|
|
|
179
292
|
# ブラウザで http://127.0.0.1:8080 を開く
|
|
180
293
|
```
|
|
181
294
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
295
|
+
サンプルには以下が含まれます:
|
|
296
|
+
- カラーパレット（プライマリ、ミュート、デストラクティブなど）
|
|
297
|
+
- コンポーネント（カード、ボタン、フォーム）
|
|
298
|
+
- タイポグラフィ例
|
|
299
|
+
- ダークモード切り替えボタン
|
|
187
300
|
|
package/dist/index.css
CHANGED
|
@@ -5,75 +5,126 @@
|
|
|
5
5
|
Consumers should import the distributed CSS from the package.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
+
/* Token variables (shadcn/Radix inspired) */
|
|
9
|
+
|
|
8
10
|
:root {
|
|
9
|
-
|
|
10
|
-
--
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
--
|
|
23
|
-
--
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
--
|
|
27
|
-
--
|
|
28
|
-
--
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
--
|
|
32
|
-
--
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
--
|
|
36
|
-
--
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
--
|
|
40
|
-
--
|
|
41
|
-
|
|
11
|
+
/* Radius tokens for Tailwind integration */
|
|
12
|
+
--radius-sm: 0.375rem;
|
|
13
|
+
--radius-md: 0.5rem;
|
|
14
|
+
--radius-lg: 0.75rem;
|
|
15
|
+
--radius-xl: 1rem;
|
|
16
|
+
--radius: 0.75rem;
|
|
17
|
+
|
|
18
|
+
/* shadcn/Radix inspired light mode palette */
|
|
19
|
+
/* Clean, minimal design with subtle grays and vibrant indigo/blue accent */
|
|
20
|
+
--background: 0 0% 98.4%; /* zinc-50: very light gray background */
|
|
21
|
+
--foreground: 240 10% 3.9%; /* nearly black text */
|
|
22
|
+
--card: 0 0% 100%; /* pure white for cards */
|
|
23
|
+
--card-foreground: 240 10% 3.9%;
|
|
24
|
+
--popover: 0 0% 100%;
|
|
25
|
+
--popover-foreground: 240 10% 3.9%;
|
|
26
|
+
|
|
27
|
+
/* Primary accent: vibrant indigo/blue (inspired by Team Mirai products) */
|
|
28
|
+
--primary: 221.2 83.2% 53.3%; /* bright indigo/blue */
|
|
29
|
+
--primary-foreground: 210 40% 98%; /* near white */
|
|
30
|
+
--primary-accent: 224.3 76.3% 48%; /* darker indigo */
|
|
31
|
+
|
|
32
|
+
/* Secondary & neutral tones */
|
|
33
|
+
--secondary: 240 4.8% 95.9%; /* zinc-100 */
|
|
34
|
+
--secondary-foreground: 240 10% 3.9%;
|
|
35
|
+
|
|
36
|
+
/* Muted: for disabled/subtle elements */
|
|
37
|
+
--muted: 240 4.8% 95.9%;
|
|
38
|
+
--muted-foreground: 240 3.7% 46.1%; /* zinc-600 */
|
|
39
|
+
|
|
40
|
+
/* Accent: alternative highlight */
|
|
41
|
+
--accent: 221.2 83.2% 53.3%; /* same as primary for consistency */
|
|
42
|
+
--accent-foreground: 210 40% 98%;
|
|
43
|
+
|
|
44
|
+
/* Destructive: error/danger states */
|
|
45
|
+
--destructive: 0 84.2% 60.2%; /* red-500 */
|
|
46
|
+
--destructive-foreground: 0 0% 100%;
|
|
47
|
+
|
|
48
|
+
/* Border & input: delicate grays (key to modern look) */
|
|
49
|
+
--border: 240 5.9% 90%; /* zinc-200: subtle border */
|
|
50
|
+
--input: 240 5.9% 90%;
|
|
51
|
+
--ring: 221.2 83.2% 53.3%; /* primary color for focus ring */
|
|
52
|
+
|
|
53
|
+
/* Chart colors (for data visualization) */
|
|
54
|
+
--chart-1: 12 76% 61%; /* orange */
|
|
55
|
+
--chart-2: 221 83% 53%; /* indigo */
|
|
56
|
+
--chart-3: 262 52% 50%; /* violet */
|
|
57
|
+
--chart-4: 262 80% 50%; /* purple */
|
|
58
|
+
--chart-5: 220 90% 56%; /* blue */
|
|
59
|
+
|
|
60
|
+
/* Sidebar tokens */
|
|
61
|
+
--sidebar: 0 0% 98.4%;
|
|
62
|
+
--sidebar-foreground: 240 10% 3.9%;
|
|
63
|
+
--sidebar-primary: 221.2 83.2% 53.3%;
|
|
64
|
+
--sidebar-primary-foreground: 0 0% 100%;
|
|
65
|
+
--sidebar-accent: 240 4.8% 95.9%;
|
|
66
|
+
--sidebar-accent-foreground: 240 10% 3.9%;
|
|
67
|
+
--sidebar-border: 240 5.9% 90%;
|
|
68
|
+
--sidebar-ring: 221.2 83.2% 53.3%;
|
|
69
|
+
|
|
70
|
+
/* Typography & Spacing */
|
|
42
71
|
--leading-relaxed: 1.875;
|
|
72
|
+
--tracking-tight: -0.015em;
|
|
73
|
+
--tracking-normal: 0;
|
|
74
|
+
--font-size-sm: 0.875rem; /* 14px */
|
|
75
|
+
--font-size-base: 1rem; /* 16px */
|
|
76
|
+
--font-size-lg: 1.125rem; /* 18px */
|
|
77
|
+
--font-size-xl: 1.25rem; /* 20px */
|
|
78
|
+
--font-size-2xl: 1.5rem; /* 24px */
|
|
43
79
|
}
|
|
44
80
|
|
|
45
81
|
.dark {
|
|
46
|
-
|
|
47
|
-
--
|
|
48
|
-
--
|
|
49
|
-
--card
|
|
50
|
-
--
|
|
51
|
-
--popover
|
|
52
|
-
--
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
--
|
|
56
|
-
--
|
|
57
|
-
--
|
|
58
|
-
|
|
59
|
-
--
|
|
60
|
-
--
|
|
61
|
-
|
|
62
|
-
--
|
|
63
|
-
--
|
|
64
|
-
|
|
65
|
-
--
|
|
66
|
-
--
|
|
67
|
-
|
|
68
|
-
--
|
|
69
|
-
--
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
--
|
|
73
|
-
--
|
|
74
|
-
--
|
|
75
|
-
|
|
76
|
-
|
|
82
|
+
/* Dark mode: carefully chosen palette for contrast & readability */
|
|
83
|
+
--background: 240 10% 8%; /* nearly black: almost black but not pure */
|
|
84
|
+
--foreground: 0 0% 98%; /* almost white text */
|
|
85
|
+
--card: 240 10% 14%; /* slightly lighter than background */
|
|
86
|
+
--card-foreground: 0 0% 98%;
|
|
87
|
+
--popover: 240 10% 14%;
|
|
88
|
+
--popover-foreground: 0 0% 98%;
|
|
89
|
+
|
|
90
|
+
/* Primary remains vibrant indigo (good contrast in dark) */
|
|
91
|
+
--primary: 221.2 83.2% 53.3%;
|
|
92
|
+
--primary-foreground: 240 10% 8%;
|
|
93
|
+
--primary-accent: 224.3 76.3% 48%;
|
|
94
|
+
|
|
95
|
+
--secondary: 240 10% 20%;
|
|
96
|
+
--secondary-foreground: 0 0% 98%;
|
|
97
|
+
|
|
98
|
+
--muted: 240 10% 20%;
|
|
99
|
+
--muted-foreground: 240 4.8% 60%; /* lighter gray for muted text in dark */
|
|
100
|
+
|
|
101
|
+
--accent: 221.2 83.2% 53.3%;
|
|
102
|
+
--accent-foreground: 240 10% 8%;
|
|
103
|
+
|
|
104
|
+
--destructive: 0 72% 50.6%; /* red-600: slightly darker for dark mode */
|
|
105
|
+
--destructive-foreground: 0 0% 98%;
|
|
106
|
+
|
|
107
|
+
/* Dark borders: very subtle (10% opacity white or light gray) */
|
|
108
|
+
--border: 240 4.8% 20%; /* zinc-800 */
|
|
109
|
+
--input: 240 4.8% 20%;
|
|
110
|
+
--ring: 221.2 83.2% 53.3%;
|
|
111
|
+
|
|
112
|
+
/* Dark chart colors (better contrast) */
|
|
113
|
+
--chart-1: 12 76% 61%;
|
|
114
|
+
--chart-2: 221 83% 53%;
|
|
115
|
+
--chart-3: 262 52% 50%;
|
|
116
|
+
--chart-4: 262 80% 50%;
|
|
117
|
+
--chart-5: 220 90% 56%;
|
|
118
|
+
|
|
119
|
+
/* Dark sidebar */
|
|
120
|
+
--sidebar: 240 10% 12%;
|
|
121
|
+
--sidebar-foreground: 0 0% 98%;
|
|
122
|
+
--sidebar-primary: 221.2 83.2% 53.3%;
|
|
123
|
+
--sidebar-primary-foreground: 240 10% 8%;
|
|
124
|
+
--sidebar-accent: 240 10% 20%;
|
|
125
|
+
--sidebar-accent-foreground: 0 0% 98%;
|
|
126
|
+
--sidebar-border: 240 4.8% 20%;
|
|
127
|
+
--sidebar-ring: 221.2 83.2% 53.3%;
|
|
77
128
|
}
|
|
78
129
|
|
|
79
130
|
/* Export helpers for consumers
|
|
@@ -84,3 +135,8 @@
|
|
|
84
135
|
.tokens-root {
|
|
85
136
|
all: initial;
|
|
86
137
|
}
|
|
138
|
+
|
|
139
|
+
/* Component styles (optional but recommended) */
|
|
140
|
+
@import './components/card.css';
|
|
141
|
+
@import './components/button.css';
|
|
142
|
+
@import './components/input.css';
|
package/dist/index.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--radius:0.
|
|
1
|
+
:root{--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius:0.75rem;--background:0 0% 98.4%;--foreground:240 10% 3.9%;--card:0 0% 100%;--card-foreground:240 10% 3.9%;--popover:0 0% 100%;--popover-foreground:240 10% 3.9%;--primary:221.2 83.2% 53.3%;--primary-foreground:210 40% 98%;--primary-accent:224.3 76.3% 48%;--secondary:240 4.8% 95.9%;--secondary-foreground:240 10% 3.9%;--muted:240 4.8% 95.9%;--muted-foreground:240 3.7% 46.1%;--accent:221.2 83.2% 53.3%;--accent-foreground:210 40% 98%;--destructive:0 84.2% 60.2%;--destructive-foreground:0 0% 100%;--border:240 5.9% 90%;--input:240 5.9% 90%;--ring:221.2 83.2% 53.3%;--chart-1:12 76% 61%;--chart-2:221 83% 53%;--chart-3:262 52% 50%;--chart-4:262 80% 50%;--chart-5:220 90% 56%;--sidebar:0 0% 98.4%;--sidebar-foreground:240 10% 3.9%;--sidebar-primary:221.2 83.2% 53.3%;--sidebar-primary-foreground:0 0% 100%;--sidebar-accent:240 4.8% 95.9%;--sidebar-accent-foreground:240 10% 3.9%;--sidebar-border:240 5.9% 90%;--sidebar-ring:221.2 83.2% 53.3%;--leading-relaxed:1.875;--tracking-tight:-0.015em;--tracking-normal:0;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem}.dark{--background:240 10% 8%;--foreground:0 0% 98%;--card:240 10% 14%;--card-foreground:0 0% 98%;--popover:240 10% 14%;--popover-foreground:0 0% 98%;--primary:221.2 83.2% 53.3%;--primary-foreground:240 10% 8%;--primary-accent:224.3 76.3% 48%;--secondary:240 10% 20%;--secondary-foreground:0 0% 98%;--muted:240 10% 20%;--muted-foreground:240 4.8% 60%;--accent:221.2 83.2% 53.3%;--accent-foreground:240 10% 8%;--destructive:0 72% 50.6%;--destructive-foreground:0 0% 98%;--border:240 4.8% 20%;--input:240 4.8% 20%;--ring:221.2 83.2% 53.3%;--chart-1:12 76% 61%;--chart-2:221 83% 53%;--chart-3:262 52% 50%;--chart-4:262 80% 50%;--chart-5:220 90% 56%;--sidebar:240 10% 12%;--sidebar-foreground:0 0% 98%;--sidebar-primary:221.2 83.2% 53.3%;--sidebar-primary-foreground:240 10% 8%;--sidebar-accent:240 10% 20%;--sidebar-accent-foreground:0 0% 98%;--sidebar-border:240 4.8% 20%;--sidebar-ring:221.2 83.2% 53.3%}.tokens-root{all:initial}@import "./components/card.css";@import "./components/button.css";@import "./components/input.css";
|
package/package.json
CHANGED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
/* Button components: versatile styles for various use cases */
|
|
2
|
+
|
|
3
|
+
.btn {
|
|
4
|
+
display: inline-flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
justify-content: center;
|
|
7
|
+
gap: 0.5rem;
|
|
8
|
+
padding: 0.5rem 1rem;
|
|
9
|
+
font-size: var(--font-size-base);
|
|
10
|
+
font-weight: 500;
|
|
11
|
+
border: 1px solid transparent;
|
|
12
|
+
border-radius: var(--radius-lg);
|
|
13
|
+
cursor: pointer;
|
|
14
|
+
transition: all 0.2s ease-in-out;
|
|
15
|
+
white-space: nowrap;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* Primary button */
|
|
19
|
+
.btn-primary {
|
|
20
|
+
background: var(--primary);
|
|
21
|
+
color: var(--primary-foreground);
|
|
22
|
+
border-color: var(--primary);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.btn-primary:hover {
|
|
26
|
+
opacity: 0.9;
|
|
27
|
+
transform: translateY(-1px);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.btn-primary:active {
|
|
31
|
+
transform: translateY(0);
|
|
32
|
+
opacity: 0.85;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* Secondary/outline button */
|
|
36
|
+
.btn-secondary {
|
|
37
|
+
background: transparent;
|
|
38
|
+
color: var(--foreground);
|
|
39
|
+
border-color: var(--border);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.btn-secondary:hover {
|
|
43
|
+
background: var(--secondary);
|
|
44
|
+
border-color: var(--border);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* Ghost (minimal) button */
|
|
48
|
+
.btn-ghost {
|
|
49
|
+
background: transparent;
|
|
50
|
+
color: var(--foreground);
|
|
51
|
+
border-color: transparent;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.btn-ghost:hover {
|
|
55
|
+
background: var(--secondary);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Destructive button */
|
|
59
|
+
.btn-destructive {
|
|
60
|
+
background: var(--destructive);
|
|
61
|
+
color: var(--destructive-foreground);
|
|
62
|
+
border-color: var(--destructive);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.btn-destructive:hover {
|
|
66
|
+
opacity: 0.9;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* Size variants */
|
|
70
|
+
.btn-sm {
|
|
71
|
+
padding: 0.375rem 0.75rem;
|
|
72
|
+
font-size: var(--font-size-sm);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.btn-lg {
|
|
76
|
+
padding: 0.75rem 1.5rem;
|
|
77
|
+
font-size: var(--font-size-lg);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* Disabled state */
|
|
81
|
+
.btn:disabled,
|
|
82
|
+
.btn[disabled] {
|
|
83
|
+
opacity: 0.5;
|
|
84
|
+
cursor: not-allowed;
|
|
85
|
+
pointer-events: none;
|
|
86
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/* Card component: clean, minimal design with subtle border and shadow */
|
|
2
|
+
.card {
|
|
3
|
+
background: var(--card);
|
|
4
|
+
color: var(--card-foreground);
|
|
5
|
+
border: 1px solid var(--border);
|
|
6
|
+
border-radius: var(--radius-lg);
|
|
7
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.card-header {
|
|
11
|
+
padding: 1.5rem;
|
|
12
|
+
border-bottom: 1px solid var(--border);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.card-header:first-child {
|
|
16
|
+
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.card-title {
|
|
20
|
+
font-size: var(--font-size-xl);
|
|
21
|
+
font-weight: 600;
|
|
22
|
+
line-height: var(--leading-relaxed);
|
|
23
|
+
margin: 0;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.card-description {
|
|
27
|
+
font-size: var(--font-size-sm);
|
|
28
|
+
color: var(--muted-foreground);
|
|
29
|
+
margin-top: 0.25rem;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.card-content {
|
|
33
|
+
padding: 1.5rem;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.card-footer {
|
|
37
|
+
display: flex;
|
|
38
|
+
gap: 1rem;
|
|
39
|
+
padding: 1.5rem;
|
|
40
|
+
border-top: 1px solid var(--border);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.card-footer:last-child {
|
|
44
|
+
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
|
|
45
|
+
}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/* Input field and form elements */
|
|
2
|
+
|
|
3
|
+
.input {
|
|
4
|
+
display: block;
|
|
5
|
+
width: 100%;
|
|
6
|
+
padding: 0.5rem 0.75rem;
|
|
7
|
+
font-size: var(--font-size-base);
|
|
8
|
+
font-family: inherit;
|
|
9
|
+
border: 1px solid var(--border);
|
|
10
|
+
border-radius: var(--radius-md);
|
|
11
|
+
background: var(--background);
|
|
12
|
+
color: var(--foreground);
|
|
13
|
+
transition: border-color 0.2s ease-in-out;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.input:focus {
|
|
17
|
+
outline: none;
|
|
18
|
+
border-color: var(--ring);
|
|
19
|
+
box-shadow: 0 0 0 3px rgba(var(--ring), 0.1);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.input:disabled {
|
|
23
|
+
background: var(--muted);
|
|
24
|
+
color: var(--muted-foreground);
|
|
25
|
+
cursor: not-allowed;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.input::placeholder {
|
|
29
|
+
color: var(--muted-foreground);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Textarea */
|
|
33
|
+
textarea.input {
|
|
34
|
+
resize: vertical;
|
|
35
|
+
min-height: 2.5rem;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* Label */
|
|
39
|
+
.label {
|
|
40
|
+
display: block;
|
|
41
|
+
margin-bottom: 0.5rem;
|
|
42
|
+
font-size: var(--font-size-base);
|
|
43
|
+
font-weight: 500;
|
|
44
|
+
color: var(--foreground);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* Form group wrapper */
|
|
48
|
+
.form-group {
|
|
49
|
+
display: flex;
|
|
50
|
+
flex-direction: column;
|
|
51
|
+
gap: 0.25rem;
|
|
52
|
+
margin-bottom: 1rem;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.form-group .label {
|
|
56
|
+
margin-bottom: 0.5rem;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.form-group .helper-text {
|
|
60
|
+
font-size: var(--font-size-sm);
|
|
61
|
+
color: var(--muted-foreground);
|
|
62
|
+
margin-top: 0.25rem;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* Error state */
|
|
66
|
+
.input.error {
|
|
67
|
+
border-color: var(--destructive);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.input.error:focus {
|
|
71
|
+
box-shadow: 0 0 0 3px rgba(var(--destructive), 0.1);
|
|
72
|
+
}
|
package/src/index.css
CHANGED
|
@@ -5,75 +5,126 @@
|
|
|
5
5
|
Consumers should import the distributed CSS from the package.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
+
/* Token variables (shadcn/Radix inspired) */
|
|
9
|
+
|
|
8
10
|
:root {
|
|
9
|
-
|
|
10
|
-
--
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
--
|
|
23
|
-
--
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
--
|
|
27
|
-
--
|
|
28
|
-
--
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
--
|
|
32
|
-
--
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
--
|
|
36
|
-
--
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
--
|
|
40
|
-
--
|
|
41
|
-
|
|
11
|
+
/* Radius tokens for Tailwind integration */
|
|
12
|
+
--radius-sm: 0.375rem;
|
|
13
|
+
--radius-md: 0.5rem;
|
|
14
|
+
--radius-lg: 0.75rem;
|
|
15
|
+
--radius-xl: 1rem;
|
|
16
|
+
--radius: 0.75rem;
|
|
17
|
+
|
|
18
|
+
/* shadcn/Radix inspired light mode palette */
|
|
19
|
+
/* Clean, minimal design with subtle grays and vibrant indigo/blue accent */
|
|
20
|
+
--background: 0 0% 98.4%; /* zinc-50: very light gray background */
|
|
21
|
+
--foreground: 240 10% 3.9%; /* nearly black text */
|
|
22
|
+
--card: 0 0% 100%; /* pure white for cards */
|
|
23
|
+
--card-foreground: 240 10% 3.9%;
|
|
24
|
+
--popover: 0 0% 100%;
|
|
25
|
+
--popover-foreground: 240 10% 3.9%;
|
|
26
|
+
|
|
27
|
+
/* Primary accent: vibrant indigo/blue (inspired by Team Mirai products) */
|
|
28
|
+
--primary: 221.2 83.2% 53.3%; /* bright indigo/blue */
|
|
29
|
+
--primary-foreground: 210 40% 98%; /* near white */
|
|
30
|
+
--primary-accent: 224.3 76.3% 48%; /* darker indigo */
|
|
31
|
+
|
|
32
|
+
/* Secondary & neutral tones */
|
|
33
|
+
--secondary: 240 4.8% 95.9%; /* zinc-100 */
|
|
34
|
+
--secondary-foreground: 240 10% 3.9%;
|
|
35
|
+
|
|
36
|
+
/* Muted: for disabled/subtle elements */
|
|
37
|
+
--muted: 240 4.8% 95.9%;
|
|
38
|
+
--muted-foreground: 240 3.7% 46.1%; /* zinc-600 */
|
|
39
|
+
|
|
40
|
+
/* Accent: alternative highlight */
|
|
41
|
+
--accent: 221.2 83.2% 53.3%; /* same as primary for consistency */
|
|
42
|
+
--accent-foreground: 210 40% 98%;
|
|
43
|
+
|
|
44
|
+
/* Destructive: error/danger states */
|
|
45
|
+
--destructive: 0 84.2% 60.2%; /* red-500 */
|
|
46
|
+
--destructive-foreground: 0 0% 100%;
|
|
47
|
+
|
|
48
|
+
/* Border & input: delicate grays (key to modern look) */
|
|
49
|
+
--border: 240 5.9% 90%; /* zinc-200: subtle border */
|
|
50
|
+
--input: 240 5.9% 90%;
|
|
51
|
+
--ring: 221.2 83.2% 53.3%; /* primary color for focus ring */
|
|
52
|
+
|
|
53
|
+
/* Chart colors (for data visualization) */
|
|
54
|
+
--chart-1: 12 76% 61%; /* orange */
|
|
55
|
+
--chart-2: 221 83% 53%; /* indigo */
|
|
56
|
+
--chart-3: 262 52% 50%; /* violet */
|
|
57
|
+
--chart-4: 262 80% 50%; /* purple */
|
|
58
|
+
--chart-5: 220 90% 56%; /* blue */
|
|
59
|
+
|
|
60
|
+
/* Sidebar tokens */
|
|
61
|
+
--sidebar: 0 0% 98.4%;
|
|
62
|
+
--sidebar-foreground: 240 10% 3.9%;
|
|
63
|
+
--sidebar-primary: 221.2 83.2% 53.3%;
|
|
64
|
+
--sidebar-primary-foreground: 0 0% 100%;
|
|
65
|
+
--sidebar-accent: 240 4.8% 95.9%;
|
|
66
|
+
--sidebar-accent-foreground: 240 10% 3.9%;
|
|
67
|
+
--sidebar-border: 240 5.9% 90%;
|
|
68
|
+
--sidebar-ring: 221.2 83.2% 53.3%;
|
|
69
|
+
|
|
70
|
+
/* Typography & Spacing */
|
|
42
71
|
--leading-relaxed: 1.875;
|
|
72
|
+
--tracking-tight: -0.015em;
|
|
73
|
+
--tracking-normal: 0;
|
|
74
|
+
--font-size-sm: 0.875rem; /* 14px */
|
|
75
|
+
--font-size-base: 1rem; /* 16px */
|
|
76
|
+
--font-size-lg: 1.125rem; /* 18px */
|
|
77
|
+
--font-size-xl: 1.25rem; /* 20px */
|
|
78
|
+
--font-size-2xl: 1.5rem; /* 24px */
|
|
43
79
|
}
|
|
44
80
|
|
|
45
81
|
.dark {
|
|
46
|
-
|
|
47
|
-
--
|
|
48
|
-
--
|
|
49
|
-
--card
|
|
50
|
-
--
|
|
51
|
-
--popover
|
|
52
|
-
--
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
--
|
|
56
|
-
--
|
|
57
|
-
--
|
|
58
|
-
|
|
59
|
-
--
|
|
60
|
-
--
|
|
61
|
-
|
|
62
|
-
--
|
|
63
|
-
--
|
|
64
|
-
|
|
65
|
-
--
|
|
66
|
-
--
|
|
67
|
-
|
|
68
|
-
--
|
|
69
|
-
--
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
--
|
|
73
|
-
--
|
|
74
|
-
--
|
|
75
|
-
|
|
76
|
-
|
|
82
|
+
/* Dark mode: carefully chosen palette for contrast & readability */
|
|
83
|
+
--background: 240 10% 8%; /* nearly black: almost black but not pure */
|
|
84
|
+
--foreground: 0 0% 98%; /* almost white text */
|
|
85
|
+
--card: 240 10% 14%; /* slightly lighter than background */
|
|
86
|
+
--card-foreground: 0 0% 98%;
|
|
87
|
+
--popover: 240 10% 14%;
|
|
88
|
+
--popover-foreground: 0 0% 98%;
|
|
89
|
+
|
|
90
|
+
/* Primary remains vibrant indigo (good contrast in dark) */
|
|
91
|
+
--primary: 221.2 83.2% 53.3%;
|
|
92
|
+
--primary-foreground: 240 10% 8%;
|
|
93
|
+
--primary-accent: 224.3 76.3% 48%;
|
|
94
|
+
|
|
95
|
+
--secondary: 240 10% 20%;
|
|
96
|
+
--secondary-foreground: 0 0% 98%;
|
|
97
|
+
|
|
98
|
+
--muted: 240 10% 20%;
|
|
99
|
+
--muted-foreground: 240 4.8% 60%; /* lighter gray for muted text in dark */
|
|
100
|
+
|
|
101
|
+
--accent: 221.2 83.2% 53.3%;
|
|
102
|
+
--accent-foreground: 240 10% 8%;
|
|
103
|
+
|
|
104
|
+
--destructive: 0 72% 50.6%; /* red-600: slightly darker for dark mode */
|
|
105
|
+
--destructive-foreground: 0 0% 98%;
|
|
106
|
+
|
|
107
|
+
/* Dark borders: very subtle (10% opacity white or light gray) */
|
|
108
|
+
--border: 240 4.8% 20%; /* zinc-800 */
|
|
109
|
+
--input: 240 4.8% 20%;
|
|
110
|
+
--ring: 221.2 83.2% 53.3%;
|
|
111
|
+
|
|
112
|
+
/* Dark chart colors (better contrast) */
|
|
113
|
+
--chart-1: 12 76% 61%;
|
|
114
|
+
--chart-2: 221 83% 53%;
|
|
115
|
+
--chart-3: 262 52% 50%;
|
|
116
|
+
--chart-4: 262 80% 50%;
|
|
117
|
+
--chart-5: 220 90% 56%;
|
|
118
|
+
|
|
119
|
+
/* Dark sidebar */
|
|
120
|
+
--sidebar: 240 10% 12%;
|
|
121
|
+
--sidebar-foreground: 0 0% 98%;
|
|
122
|
+
--sidebar-primary: 221.2 83.2% 53.3%;
|
|
123
|
+
--sidebar-primary-foreground: 240 10% 8%;
|
|
124
|
+
--sidebar-accent: 240 10% 20%;
|
|
125
|
+
--sidebar-accent-foreground: 0 0% 98%;
|
|
126
|
+
--sidebar-border: 240 4.8% 20%;
|
|
127
|
+
--sidebar-ring: 221.2 83.2% 53.3%;
|
|
77
128
|
}
|
|
78
129
|
|
|
79
130
|
/* Export helpers for consumers
|
|
@@ -84,3 +135,8 @@
|
|
|
84
135
|
.tokens-root {
|
|
85
136
|
all: initial;
|
|
86
137
|
}
|
|
138
|
+
|
|
139
|
+
/* Component styles (optional but recommended) */
|
|
140
|
+
@import './components/card.css';
|
|
141
|
+
@import './components/button.css';
|
|
142
|
+
@import './components/input.css';
|
package/tailwind.config.cjs
CHANGED
|
@@ -6,33 +6,60 @@ module.exports = {
|
|
|
6
6
|
theme: {
|
|
7
7
|
extend: {
|
|
8
8
|
colors: {
|
|
9
|
-
background: 'var(--background)',
|
|
10
|
-
foreground: 'var(--foreground)',
|
|
11
|
-
card: 'var(--card)',
|
|
12
|
-
'card-foreground': 'var(--card-foreground)',
|
|
13
|
-
popover: 'var(--popover)',
|
|
14
|
-
'popover-foreground': 'var(--popover-foreground)',
|
|
15
|
-
primary: 'var(--primary)',
|
|
16
|
-
'primary-accent': 'var(--primary-accent)',
|
|
17
|
-
'primary-foreground': 'var(--primary-foreground)',
|
|
18
|
-
secondary: 'var(--secondary)',
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
9
|
+
background: 'hsl(var(--background))',
|
|
10
|
+
foreground: 'hsl(var(--foreground))',
|
|
11
|
+
card: 'hsl(var(--card))',
|
|
12
|
+
'card-foreground': 'hsl(var(--card-foreground))',
|
|
13
|
+
popover: 'hsl(var(--popover))',
|
|
14
|
+
'popover-foreground': 'hsl(var(--popover-foreground))',
|
|
15
|
+
primary: 'hsl(var(--primary))',
|
|
16
|
+
'primary-accent': 'hsl(var(--primary-accent))',
|
|
17
|
+
'primary-foreground': 'hsl(var(--primary-foreground))',
|
|
18
|
+
secondary: 'hsl(var(--secondary))',
|
|
19
|
+
'secondary-foreground': 'hsl(var(--secondary-foreground))',
|
|
20
|
+
muted: 'hsl(var(--muted))',
|
|
21
|
+
'muted-foreground': 'hsl(var(--muted-foreground))',
|
|
22
|
+
accent: 'hsl(var(--accent))',
|
|
23
|
+
'accent-foreground': 'hsl(var(--accent-foreground))',
|
|
24
|
+
destructive: 'hsl(var(--destructive))',
|
|
25
|
+
'destructive-foreground': 'hsl(var(--destructive-foreground))',
|
|
26
|
+
border: 'hsl(var(--border))',
|
|
27
|
+
input: 'hsl(var(--input))',
|
|
28
|
+
ring: 'hsl(var(--ring))',
|
|
29
|
+
chart1: 'hsl(var(--chart-1))',
|
|
30
|
+
chart2: 'hsl(var(--chart-2))',
|
|
31
|
+
chart3: 'hsl(var(--chart-3))',
|
|
32
|
+
chart4: 'hsl(var(--chart-4))',
|
|
33
|
+
chart5: 'hsl(var(--chart-5))',
|
|
34
|
+
sidebar: 'hsl(var(--sidebar))',
|
|
35
|
+
'sidebar-foreground': 'hsl(var(--sidebar-foreground))',
|
|
36
|
+
'sidebar-primary': 'hsl(var(--sidebar-primary))',
|
|
37
|
+
'sidebar-primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
|
|
38
|
+
'sidebar-accent': 'hsl(var(--sidebar-accent))',
|
|
39
|
+
'sidebar-accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
|
|
40
|
+
'sidebar-border': 'hsl(var(--sidebar-border))',
|
|
41
|
+
'sidebar-ring': 'hsl(var(--sidebar-ring))'
|
|
30
42
|
},
|
|
31
43
|
borderRadius: {
|
|
32
44
|
sm: 'var(--radius-sm)',
|
|
33
45
|
md: 'var(--radius-md)',
|
|
34
46
|
lg: 'var(--radius-lg)',
|
|
35
|
-
xl: 'var(--radius-xl)'
|
|
47
|
+
xl: 'var(--radius-xl)',
|
|
48
|
+
base: 'var(--radius)'
|
|
49
|
+
},
|
|
50
|
+
lineHeight: {
|
|
51
|
+
relaxed: 'var(--leading-relaxed)'
|
|
52
|
+
},
|
|
53
|
+
letterSpacing: {
|
|
54
|
+
tight: 'var(--tracking-tight)',
|
|
55
|
+
normal: 'var(--tracking-normal)'
|
|
56
|
+
},
|
|
57
|
+
fontSize: {
|
|
58
|
+
sm: 'var(--font-size-sm)',
|
|
59
|
+
base: 'var(--font-size-base)',
|
|
60
|
+
lg: 'var(--font-size-lg)',
|
|
61
|
+
xl: 'var(--font-size-xl)',
|
|
62
|
+
'2xl': 'var(--font-size-2xl)'
|
|
36
63
|
}
|
|
37
64
|
}
|
|
38
65
|
}
|