@harry4869/css-tokens 0.1.1

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.
Files changed (6) hide show
  1. package/README.md +187 -0
  2. package/dist/index.css +86 -0
  3. package/dist/index.min.css +1 -0
  4. package/package.json +51 -0
  5. package/src/index.css +86 -0
  6. package/tailwind.config.cjs +39 -0
package/README.md ADDED
@@ -0,0 +1,187 @@
1
+ # @team-mirai/css-tokens
2
+
3
+ Minimal design-tokens package for Team Mirai.
4
+ # @team-mirai/css-tokens
5
+
6
+ Team Mirai 向けの最小限のデザイントークンパッケージ（CSS 変数）です。
7
+
8
+ 主な内容
9
+ - `src/index.css` — カラートークンやダークモードの変数定義（ソース）
10
+ ## @team-mirai/css-tokens
11
+
12
+ Team Mirai 向けの最小限のデザイントークン（CSS 変数）パッケージです。
13
+
14
+ 主な内容
15
+
16
+ - `src/index.css` — トークンのソース（カラー、ダークモード定義など）
17
+ - `dist/index.css`, `dist/index.min.css` — ビルド済みの配布ファイル
18
+ - `tailwind.config.cjs` — トークンを参照するための最小限の Tailwind 設定
19
+
20
+ インストール
21
+
22
+ 公開パッケージを使う場合:
23
+
24
+ ```bash
25
+ npm install @team-mirai/css-tokens
26
+ ```
27
+
28
+ GitHub リポジトリから直接インストールする場合（公開前のテスト等）:
29
+
30
+ ```bash
31
+ # 最新の main ブランチをインストール
32
+ npm install github:harry2480/Team-Mirai-CSS-Package
33
+
34
+ # 特定のタグ/バージョンを指定してインストール
35
+ npm install github:harry2480/Team-Mirai-CSS-Package#v0.1.0
36
+ ```
37
+
38
+ ローカルから直接インストールする場合:
39
+
40
+ ```bash
41
+ npm install file:../path/to/mirai-css-tokens
42
+ ```
43
+
44
+ クイックスタート
45
+
46
+ 1. パッケージをビルド（パッケージルートで実行）:
47
+
48
+ ```bash
49
+ npm run build # dist/index.css を生成
50
+ npm run build:prod # minified 版（dist/index.min.css）も生成
51
+ ```
52
+
53
+ 2. アプリに読み込む
54
+
55
+ 次のいずれかの方法で利用できます。
56
+
57
+ 使い方（3通り）
58
+
59
+ 1) 直接 CSS をインポート（例: Next.js / SvelteKit 等）
60
+
61
+ ```ts
62
+ import '@team-mirai/css-tokens/dist/index.css'
63
+ ```
64
+
65
+ CSS 内でトークンを使用:
66
+
67
+ ```css
68
+ body {
69
+ background: var(--background);
70
+ color: var(--foreground);
71
+ }
72
+
73
+ .card {
74
+ background: var(--card);
75
+ color: var(--card-foreground);
76
+ border-radius: var(--radius);
77
+ }
78
+ ```
79
+
80
+ 2) Tailwind と統合
81
+
82
+ プロジェクトの `tailwind.config` にパッケージの拡張をマージする例:
83
+
84
+ ```js
85
+ // tailwind.config.js
86
+ const mirai = require('@team-mirai/css-tokens/tailwind.config.cjs')
87
+
88
+ module.exports = {
89
+ content: ['./src/**/*.{js,ts,jsx,tsx,html}'],
90
+ theme: {
91
+ extend: mirai.theme.extend,
92
+ },
93
+ }
94
+ ```
95
+
96
+ その後エントリで CSS を読み込みます:
97
+
98
+ ```ts
99
+ import '@team-mirai/css-tokens/dist/index.css'
100
+ ```
101
+
102
+ テンプレート例:
103
+
104
+ ```html
105
+ <button class="bg-primary text-primary-foreground rounded">Primary</button>
106
+ ```
107
+
108
+ 3) CSS 変数のみを使用
109
+
110
+ ```css
111
+ @import '@team-mirai/css-tokens/dist/index.css';
112
+
113
+ :root { --my-primary: var(--primary); }
114
+
115
+ .component { color: var(--my-primary); }
116
+ ```
117
+
118
+ ダークモード
119
+
120
+ パッケージは `.dark` セレクタ内のダークトークン定義を含みます。Tailwind をクラスベースのダークモードにする場合の例:
121
+
122
+ ```js
123
+ module.exports = { darkMode: 'class' }
124
+ ```
125
+
126
+ HTML のルートに `class="dark"` を付与するとダークトークンが適用されます。
127
+
128
+ 開発・ビルド
129
+
130
+ ```bash
131
+ npm run build # 通常ビルド（dist/index.css）
132
+ npm run build:prod # 本番向け（minified 版を生成）
133
+ npm run lint # stylelint を実行
134
+ npm run test # テストを実行
135
+ ```
136
+
137
+ トークンを編集する手順
138
+
139
+ 1. `src/index.css` を編集（ソースが単一の真実）
140
+ 2. `npm run build` または `npm run build:prod` を実行
141
+ 3. `src/` と `dist/` をコミットしてプッシュ
142
+
143
+ Prepare スクリプトについて
144
+
145
+ このパッケージは `prepare` スクリプトを持ちます。GitHub 経由でインストールされた場合、インストール後に自動的に `prepare` が走り `dist/` を生成します。受け手側にビルドツールが無いと失敗する可能性があるため、確実性を重視する場合は `dist/` をコミットして配布することを推奨します。
146
+
147
+ 利用可能な主なトークン（抜粋）
148
+
149
+ - `--primary`, `--primary-accent`, `--primary-foreground`
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`
155
+
156
+ 公開／リリース手順（概要）
157
+
158
+ 1. バージョンを更新: `npm version patch`
159
+ 2. Git に push とタグ送信
160
+ 3. （任意）GitHub Release を作成して `dist/` を添付
161
+ 4. npm に公開する場合: `npm publish --access public`
162
+
163
+ トラブルシューティング
164
+
165
+ - dist が見つからない: `npm run build` を実行してください。
166
+ - トークンが反映されない: エントリで `dist/index.css` を確実に読み込んでいるか確認してください。
167
+ - ダークモードが効かない: Tailwind で `darkMode: 'class'` を有効にし、ルートに `class="dark"` を付与してください。
168
+
169
+ Examples（ローカルサンプル）
170
+
171
+ リポジトリには簡易サンプルが含まれています: `examples/sample/index.html`。
172
+ サンプルは `mirai-css-tokens/dist/index.css` を読み込み、カードとボタンの簡単な例を表示します。
173
+
174
+ ローカルで確認するには（例）:
175
+
176
+ ```bash
177
+ cd examples/sample
178
+ npx http-server -p 8080
179
+ # ブラウザで http://127.0.0.1:8080 を開く
180
+ ```
181
+
182
+ ダークモードを確認するには、`index.html` の `html` 要素に `class="dark"` を追加してください。
183
+
184
+ 変更を反映する場合は、`mirai-css-tokens` のルートで `npm run build` を実行して `dist/` を更新してください。
185
+
186
+ さらにヘルプが必要であれば、更新や CI の追加などを代行します。
187
+
package/dist/index.css ADDED
@@ -0,0 +1,86 @@
1
+ /*
2
+ mirai-css-tokens — Design tokens (CSS variables)
3
+ Single source of truth: src/index.css
4
+ Keep token values here; the build simply copies this file to `dist/index.css`.
5
+ Consumers should import the distributed CSS from the package.
6
+ */
7
+
8
+ :root {
9
+ --radius: 0.625rem;
10
+ --background: #f7f4ee;
11
+ --foreground: oklch(0.145 0 0);
12
+ --card: oklch(1 0 0);
13
+ --card-foreground: oklch(0.145 0 0);
14
+ --popover: oklch(1 0 0);
15
+ --popover-foreground: oklch(0.145 0 0);
16
+ --primary: #2aa693;
17
+ --primary-accent: #0f8472;
18
+ --primary-foreground: oklch(0.985 0 0);
19
+ --secondary: oklch(0.97 0 0);
20
+ --secondary-foreground: oklch(0.205 0 0);
21
+ --muted: oklch(0.97 0 0);
22
+ --muted-foreground: oklch(0.656 0 0);
23
+ --accent: oklch(0.97 0 0);
24
+ --accent-foreground: oklch(0.205 0 0);
25
+ --destructive: oklch(0.577 0.245 27.325);
26
+ --border: oklch(0.922 0 0);
27
+ --input: oklch(0.922 0 0);
28
+ --ring: oklch(0.708 0 0);
29
+ --chart-1: oklch(0.646 0.222 41.116);
30
+ --chart-2: oklch(0.6 0.118 184.704);
31
+ --chart-3: oklch(0.398 0.07 227.392);
32
+ --chart-4: oklch(0.828 0.189 84.429);
33
+ --chart-5: oklch(0.769 0.188 70.08);
34
+ --sidebar: oklch(0.985 0 0);
35
+ --sidebar-foreground: oklch(0.145 0 0);
36
+ --sidebar-primary: oklch(0.205 0 0);
37
+ --sidebar-primary-foreground: oklch(0.985 0 0);
38
+ --sidebar-accent: oklch(0.97 0 0);
39
+ --sidebar-accent-foreground: oklch(0.205 0 0);
40
+ --sidebar-border: oklch(0.922 0 0);
41
+ --sidebar-ring: oklch(0.708 0 0);
42
+ --leading-relaxed: 1.875;
43
+ }
44
+
45
+ .dark {
46
+ --background: oklch(0.145 0 0);
47
+ --foreground: oklch(0.985 0 0);
48
+ --card: oklch(0.205 0 0);
49
+ --card-foreground: oklch(0.985 0 0);
50
+ --popover: oklch(0.205 0 0);
51
+ --popover-foreground: oklch(0.985 0 0);
52
+ --primary: oklch(0.922 0 0);
53
+ --primary-foreground: oklch(0.205 0 0);
54
+ --secondary: oklch(0.269 0 0);
55
+ --secondary-foreground: oklch(0.985 0 0);
56
+ --muted: oklch(0.269 0 0);
57
+ --muted-foreground: oklch(0.608 0 0);
58
+ --accent: oklch(0.269 0 0);
59
+ --accent-foreground: oklch(0.985 0 0);
60
+ --destructive: oklch(0.704 0.191 22.216);
61
+ --border: oklch(1 0 0 / 0.1);
62
+ --input: oklch(1 0 0 / 0.15);
63
+ --ring: oklch(0.556 0 0);
64
+ --chart-1: oklch(0.488 0.243 264.376);
65
+ --chart-2: oklch(0.696 0.17 162.48);
66
+ --chart-3: oklch(0.769 0.188 70.08);
67
+ --chart-4: oklch(0.627 0.265 303.9);
68
+ --chart-5: oklch(0.645 0.246 16.439);
69
+ --sidebar: oklch(0.205 0 0);
70
+ --sidebar-foreground: oklch(0.985 0 0);
71
+ --sidebar-primary: oklch(0.488 0.243 264.376);
72
+ --sidebar-primary-foreground: oklch(0.985 0 0);
73
+ --sidebar-accent: oklch(0.269 0 0);
74
+ --sidebar-accent-foreground: oklch(0.985 0 0);
75
+ --sidebar-border: oklch(1 0 0 / 0.1);
76
+ --sidebar-ring: oklch(0.556 0 0);
77
+ }
78
+
79
+ /* Export helpers for consumers
80
+ Usage:
81
+ - Import `dist/index.css` to include tokens globally.
82
+ - Use `.tokens-root` to scope tokens and reset inherited properties.
83
+ */
84
+ .tokens-root {
85
+ all: initial;
86
+ }
package/dist/index.min.css ADDED
@@ -0,0 +1 @@
1
+ :root{--radius:0.625rem;--background:#f7f4ee;--foreground:oklch(0.145 0 0);--card:oklch(1 0 0);--card-foreground:oklch(0.145 0 0);--popover:oklch(1 0 0);--popover-foreground:oklch(0.145 0 0);--primary:#2aa693;--primary-accent:#0f8472;--primary-foreground:oklch(0.985 0 0);--secondary:oklch(0.97 0 0);--secondary-foreground:oklch(0.205 0 0);--muted:oklch(0.97 0 0);--muted-foreground:oklch(0.656 0 0);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:oklch(0.577 0.245 27.325);--border:oklch(0.922 0 0);--input:oklch(0.922 0 0);--ring:oklch(0.708 0 0);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--sidebar:oklch(0.985 0 0);--sidebar-foreground:oklch(0.145 0 0);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:oklch(0.922 0 0);--sidebar-ring:oklch(0.708 0 0);--leading-relaxed:1.875}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.205 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.205 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.922 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.608 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.704 0.191 22.216);--border:oklch(1 0 0/0.1);--input:oklch(1 0 0/0.15);--ring:oklch(0.556 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(1 0 0/0.1);--sidebar-ring:oklch(0.556 0 0)}.tokens-root{all:initial}
package/package.json ADDED
@@ -0,0 +1,51 @@
1
+ {
2
+ "name": "@harry4869/css-tokens",
3
+ "version": "0.1.1",
4
+ "description": "Design tokens (CSS variables) and minimal Tailwind theme for Team Mirai projects",
5
+ "main": "dist/index.css",
6
+ "files": [
7
+ "dist/*.css",
8
+ "src/**/*.css",
9
+ "tailwind.config.cjs"
10
+ ],
11
+ "scripts": {
12
+ "build": "node ./scripts/build.js",
13
+ "build:prod": "node ./scripts/build.js --minify",
14
+ "prepare": "node ./scripts/build.js",
15
+ "clean": "node ./scripts/clean.js",
16
+ "test": "node ./scripts/test.js",
17
+ "lint": "stylelint src/**/*.css"
18
+ },
19
+ "keywords": [
20
+ "design-tokens",
21
+ "css-variables",
22
+ "tailwind",
23
+ "theme",
24
+ "mirai"
25
+ ],
26
+ "license": "MIT",
27
+ "publishConfig": {
28
+ "access": "public"
29
+ },
30
+ "repository": {
31
+ "type": "git",
32
+ "url": "https://github.com/harry2480/Team-Mirai-CSS-Package"
33
+ },
34
+ "bugs": {
35
+ "url": "https://github.com/harry2480/Team-Mirai-CSS-Package/issues"
36
+ },
37
+ "homepage": "https://github.com/harry2480/Team-Mirai-CSS-Package#readme",
38
+ "author": {
39
+ "name": "Team Mirai",
40
+ "email": "dev@team-mirai.jp",
41
+ "url": "https://github.com/harry2480"
42
+ },
43
+ "devDependencies": {
44
+ "stylelint": "^16.0.0",
45
+ "stylelint-config-standard": "^36.0.0",
46
+ "postcss": "^8.4.0",
47
+ "tailwindcss": "^3.0.0",
48
+ "autoprefixer": "^10.0.0",
49
+ "cssnano": "^5.0.0"
50
+ }
51
+ }
package/src/index.css ADDED
@@ -0,0 +1,86 @@
1
+ /*
2
+ mirai-css-tokens — Design tokens (CSS variables)
3
+ Single source of truth: src/index.css
4
+ Keep token values here; the build simply copies this file to `dist/index.css`.
5
+ Consumers should import the distributed CSS from the package.
6
+ */
7
+
8
+ :root {
9
+ --radius: 0.625rem;
10
+ --background: #f7f4ee;
11
+ --foreground: oklch(0.145 0 0);
12
+ --card: oklch(1 0 0);
13
+ --card-foreground: oklch(0.145 0 0);
14
+ --popover: oklch(1 0 0);
15
+ --popover-foreground: oklch(0.145 0 0);
16
+ --primary: #2aa693;
17
+ --primary-accent: #0f8472;
18
+ --primary-foreground: oklch(0.985 0 0);
19
+ --secondary: oklch(0.97 0 0);
20
+ --secondary-foreground: oklch(0.205 0 0);
21
+ --muted: oklch(0.97 0 0);
22
+ --muted-foreground: oklch(0.656 0 0);
23
+ --accent: oklch(0.97 0 0);
24
+ --accent-foreground: oklch(0.205 0 0);
25
+ --destructive: oklch(0.577 0.245 27.325);
26
+ --border: oklch(0.922 0 0);
27
+ --input: oklch(0.922 0 0);
28
+ --ring: oklch(0.708 0 0);
29
+ --chart-1: oklch(0.646 0.222 41.116);
30
+ --chart-2: oklch(0.6 0.118 184.704);
31
+ --chart-3: oklch(0.398 0.07 227.392);
32
+ --chart-4: oklch(0.828 0.189 84.429);
33
+ --chart-5: oklch(0.769 0.188 70.08);
34
+ --sidebar: oklch(0.985 0 0);
35
+ --sidebar-foreground: oklch(0.145 0 0);
36
+ --sidebar-primary: oklch(0.205 0 0);
37
+ --sidebar-primary-foreground: oklch(0.985 0 0);
38
+ --sidebar-accent: oklch(0.97 0 0);
39
+ --sidebar-accent-foreground: oklch(0.205 0 0);
40
+ --sidebar-border: oklch(0.922 0 0);
41
+ --sidebar-ring: oklch(0.708 0 0);
42
+ --leading-relaxed: 1.875;
43
+ }
44
+
45
+ .dark {
46
+ --background: oklch(0.145 0 0);
47
+ --foreground: oklch(0.985 0 0);
48
+ --card: oklch(0.205 0 0);
49
+ --card-foreground: oklch(0.985 0 0);
50
+ --popover: oklch(0.205 0 0);
51
+ --popover-foreground: oklch(0.985 0 0);
52
+ --primary: oklch(0.922 0 0);
53
+ --primary-foreground: oklch(0.205 0 0);
54
+ --secondary: oklch(0.269 0 0);
55
+ --secondary-foreground: oklch(0.985 0 0);
56
+ --muted: oklch(0.269 0 0);
57
+ --muted-foreground: oklch(0.608 0 0);
58
+ --accent: oklch(0.269 0 0);
59
+ --accent-foreground: oklch(0.985 0 0);
60
+ --destructive: oklch(0.704 0.191 22.216);
61
+ --border: oklch(1 0 0 / 0.1);
62
+ --input: oklch(1 0 0 / 0.15);
63
+ --ring: oklch(0.556 0 0);
64
+ --chart-1: oklch(0.488 0.243 264.376);
65
+ --chart-2: oklch(0.696 0.17 162.48);
66
+ --chart-3: oklch(0.769 0.188 70.08);
67
+ --chart-4: oklch(0.627 0.265 303.9);
68
+ --chart-5: oklch(0.645 0.246 16.439);
69
+ --sidebar: oklch(0.205 0 0);
70
+ --sidebar-foreground: oklch(0.985 0 0);
71
+ --sidebar-primary: oklch(0.488 0.243 264.376);
72
+ --sidebar-primary-foreground: oklch(0.985 0 0);
73
+ --sidebar-accent: oklch(0.269 0 0);
74
+ --sidebar-accent-foreground: oklch(0.985 0 0);
75
+ --sidebar-border: oklch(1 0 0 / 0.1);
76
+ --sidebar-ring: oklch(0.556 0 0);
77
+ }
78
+
79
+ /* Export helpers for consumers
80
+ Usage:
81
+ - Import `dist/index.css` to include tokens globally.
82
+ - Use `.tokens-root` to scope tokens and reset inherited properties.
83
+ */
84
+ .tokens-root {
85
+ all: initial;
86
+ }
package/tailwind.config.cjs ADDED
@@ -0,0 +1,39 @@
1
+ /**
2
+ * Minimal Tailwind config that maps theme tokens to CSS variables.
3
+ * Consumers should merge this into their own `tailwind.config.*` `theme.extend`.
4
+ */
5
+ module.exports = {
6
+ theme: {
7
+ extend: {
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
+ muted: 'var(--muted)',
20
+ accent: 'var(--accent)',
21
+ destructive: 'var(--destructive)',
22
+ border: 'var(--border)',
23
+ input: 'var(--input)',
24
+ ring: 'var(--ring)',
25
+ chart1: 'var(--chart-1)',
26
+ chart2: 'var(--chart-2)',
27
+ chart3: 'var(--chart-3)',
28
+ chart4: 'var(--chart-4)',
29
+ chart5: 'var(--chart-5)'
30
+ },
31
+ borderRadius: {
32
+ sm: 'var(--radius-sm)',
33
+ md: 'var(--radius-md)',
34
+ lg: 'var(--radius-lg)',
35
+ xl: 'var(--radius-xl)'
36
+ }
37
+ }
38
+ }
39
+ };