@xmart/xorder-ui-tokens 0.1.2-dev.1 → 0.3.0-dev.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 +77 -71
- package/dist/index.d.ts +2 -2
- package/dist/index.esm.js +202 -2
- package/dist/tokens/tokens.d.ts +2 -2
- package/dist/tokens.css +32 -32
- package/package.json +13 -10
- package/dist/tokens-ChJ8Sxzp.js +0 -202
- package/dist/vanilla-extract.d.ts +0 -3
- package/dist/vanilla-extract.esm.js +0 -203
- package/dist/xm-vars.css.d.ts +0 -202
package/README.md
CHANGED
|
@@ -1,108 +1,114 @@
|
|
|
1
1
|
# @xmart/xorder-ui-tokens
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
xmart のデザイン・トークン（`--xm-*`）を npm パッケージとして公開します。
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
| **Vanilla CSS** | `@xmart/xorder-ui-tokens/tokens.css` + `@xmart/xorder-ui-tokens` | `@layer xm-tokens` の `--xm-*` 定義と `xmCssVars`（`var(--xm-*)` 文字列の木） |
|
|
8
|
-
| **Vanilla Extract** | `@xmart/xorder-ui-tokens/vanilla-extract` | 同じ木を `createGlobalThemeContract(..., mapXmVarName)` に載せた `xmVars`（path から `--xm-*` 名） |
|
|
5
|
+
- **CSS** … `@layer xm-tokens` 付きの変数定義（`tokens.css`）
|
|
6
|
+
- **TypeScript** … 論理パスに対応した `xmVars`（各葉は `var(--xm-*)` 文字列）と型 `XmVars`
|
|
9
7
|
|
|
10
|
-
`
|
|
8
|
+
`dtcg/` に Figma エクスポート JSON を置いていますが、**自動生成は行いません**。アプリが参照する正は [`src/tokens/`](./src/tokens/) の手動メンテファイルです。
|
|
11
9
|
|
|
12
|
-
##
|
|
10
|
+
## インストール
|
|
13
11
|
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
DTCG["dtcg/*.json\n参考資料"]
|
|
17
|
-
SRC["src/tokens/\ntokens.css + tokens.ts\n手動メンテ"]
|
|
18
|
-
PKG["dist/（vp build）"]
|
|
19
|
-
DTCG -.->|"参照のみ"| SRC
|
|
20
|
-
SRC --> PKG
|
|
12
|
+
```bash
|
|
13
|
+
vp add @xmart/xorder-ui-tokens
|
|
21
14
|
```
|
|
22
15
|
|
|
23
|
-
|
|
24
|
-
2. **`src/tokens/`** … 公開用トークン定義。**手動で編集**する（`tokens.css` と `tokens.ts` を同期）。
|
|
25
|
-
3. **`vp build`** … `prebuild` で `dist` をクリアしたあと、`src/` からライブラリをビルドし `tokens.css` を `dist/` にコピー。
|
|
26
|
-
|
|
27
|
-
## Primitive と Semantic（語彙の区切り）
|
|
28
|
-
|
|
29
|
-
| 側 | 参考 JSON | 載せるものの目安 |
|
|
30
|
-
| ------------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
|
|
31
|
-
| **Primitive** | `xmart.primitive.tokens.json` | ブランドのスケール。**意味を持たない RAW**（パレット `color.*`、間隔 `space.*`、影 `shadow.*` など）。 |
|
|
32
|
-
| **Semantic** | `xmart.semantic.tokens.json` | **製品側の名前**（`color.foreground`、`color.background` のように読めるラベル）。テーマ差し替えは語彙側に寄せると追いやすい。 |
|
|
33
|
-
|
|
34
|
-
出力 CSS では **`--xm-` プレフィクス**が付きます（例: `color.black` → `--xm-color-black`）。**実装・レイアウトからは semantic を、パレットの根は primitive を触る**という区切りが目安です。
|
|
35
|
-
|
|
36
|
-
## トークンを更新するとき
|
|
37
|
-
|
|
38
|
-
1. 必要なら Figma から DTCG JSON を `dtcg/` に上書き（参考用）
|
|
39
|
-
2. [`src/tokens/tokens.css`](./src/tokens/tokens.css) を編集
|
|
40
|
-
3. [`src/tokens/tokens.ts`](./src/tokens/tokens.ts) の `xmCssVars` を同期
|
|
41
|
-
4. `yarn workspace @xmart/xorder-ui-tokens build` で `dist/` を確認
|
|
42
|
-
|
|
43
|
-
## よく使うコマンド
|
|
16
|
+
## 使い方
|
|
44
17
|
|
|
45
|
-
|
|
46
|
-
| -------------------------- | --------------------------------------------------------------------------- |
|
|
47
|
-
| 依存のインストール | `vp install` |
|
|
48
|
-
| トークンパッケージのビルド | `vp run build:tokens` または `yarn workspace @xmart/xorder-ui-tokens build` |
|
|
49
|
-
|
|
50
|
-
## パッケージとしての利用
|
|
51
|
-
|
|
52
|
-
### Vanilla CSS
|
|
53
|
-
|
|
54
|
-
```ts
|
|
55
|
-
import { type XmCssVars, xmCssVars, xmTokensLayer } from '@xmart/xorder-ui-tokens'
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
CSS だけ:
|
|
18
|
+
### 1. CSS 変数を読み込む
|
|
59
19
|
|
|
60
20
|
```css
|
|
61
21
|
@import '@xmart/xorder-ui-tokens/tokens.css';
|
|
62
22
|
```
|
|
63
23
|
|
|
64
|
-
`
|
|
24
|
+
`tokens.css` は先頭で `@layer xm-tokens { :root { … } }` を定義します。**import するだけで** `--xm-*` が使えます。
|
|
25
|
+
|
|
26
|
+
他の `@layer` と並べるときは、レイヤー名 `xm-tokens`（`xmTokensLayer` と同じ）を並び順に含めます。
|
|
65
27
|
|
|
66
28
|
```css
|
|
67
29
|
@layer reset, xm-tokens, components;
|
|
68
30
|
```
|
|
69
31
|
|
|
70
|
-
###
|
|
32
|
+
### 2. TypeScript から参照する
|
|
33
|
+
|
|
34
|
+
```ts
|
|
35
|
+
import { type XmVars, xmVars, xmTokensLayer } from '@xmart/xorder-ui-tokens'
|
|
36
|
+
|
|
37
|
+
xmTokensLayer // 'xm-tokens'
|
|
38
|
+
xmVars.color.foreground.default // 'var(--xm-color-foreground-default)'
|
|
39
|
+
```
|
|
71
40
|
|
|
72
|
-
|
|
41
|
+
Vanilla Extract の `style()` でも、**同じ `xmVars` をそのまま**使えます（専用サブパスはありません）。あらかじめ `tokens.css` をアプリ側で読み込んでください。
|
|
73
42
|
|
|
74
43
|
```ts
|
|
75
44
|
import { style } from '@vanilla-extract/css'
|
|
76
|
-
import { xmVars } from '@xmart/xorder-ui-tokens
|
|
45
|
+
import { xmVars } from '@xmart/xorder-ui-tokens'
|
|
77
46
|
|
|
78
47
|
export const label = style({
|
|
79
48
|
color: xmVars.color.foreground.default,
|
|
80
49
|
fontSize: xmVars.fontSize.md,
|
|
81
|
-
backgroundColor: xmVars.color.background.default,
|
|
82
50
|
})
|
|
83
51
|
```
|
|
84
52
|
|
|
85
|
-
|
|
53
|
+
## 公開 API（`package.json` の `exports`）
|
|
54
|
+
|
|
55
|
+
| サブパス | 内容 |
|
|
56
|
+
| -------------- | ----------------------------------------- |
|
|
57
|
+
| `.` | `xmVars`, `XmVars`, `xmTokensLayer` |
|
|
58
|
+
| `./tokens.css` | `dist/tokens.css`（primitive ∪ semantic） |
|
|
59
|
+
|
|
60
|
+
npm tarball に含まれるのは **`dist/` のみ**（[`files`](./package.json) 参照）。
|
|
61
|
+
|
|
62
|
+
## トークンを変更するとき
|
|
63
|
+
|
|
64
|
+
1. （任意）Figma から DTCG JSON を [`dtcg/`](./dtcg/) に置く — [参考資料の説明](./dtcg/README.md)
|
|
65
|
+
2. [`src/tokens/tokens.css`](./src/tokens/tokens.css) を編集
|
|
66
|
+
3. [`src/tokens/tokens.ts`](./src/tokens/tokens.ts) の `xmVars` を同期
|
|
67
|
+
4. `vp run build:tokens` または `yarn workspace @xmart/xorder-ui-tokens build` で `dist/` を確認
|
|
68
|
+
|
|
69
|
+
## Primitive / Semantic（語彙の目安）
|
|
86
70
|
|
|
87
|
-
|
|
71
|
+
`dtcg/` の JSON は primitive（RAW スケール）と semantic（製品語彙）に分かれています。出力 CSS ではどちらも `--xm-` プレフィクス付きのフラットな変数になります（例: `color.black` → `--xm-color-black`）。
|
|
88
72
|
|
|
89
|
-
|
|
73
|
+
| 側 | 参考 JSON | 目安 |
|
|
74
|
+
| ------------- | ----------------------------- | ---------------------------------------------- |
|
|
75
|
+
| **Primitive** | `xmart.primitive.tokens.json` | パレット・間隔・影など、意味を持たないスケール |
|
|
76
|
+
| **Semantic** | `xmart.semantic.tokens.json` | `color.foreground` など、UI から読める名前 |
|
|
90
77
|
|
|
91
|
-
|
|
78
|
+
実装では **semantic を優先**し、パレットの根は primitive を触る、という区切りが扱いやすいです。
|
|
92
79
|
|
|
93
|
-
|
|
80
|
+
## リポジトリ内の構成
|
|
94
81
|
|
|
95
|
-
|
|
96
|
-
|
|
82
|
+
```mermaid
|
|
83
|
+
flowchart LR
|
|
84
|
+
DTCG["dtcg/*.json\n参考"]
|
|
85
|
+
SRC["src/tokens/\ntokens.css + tokens.ts"]
|
|
86
|
+
DIST["dist/\nnpm 公開物"]
|
|
87
|
+
DTCG -.-> SRC
|
|
88
|
+
SRC --> DIST
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
| パス | 役割 |
|
|
92
|
+
| ----------------------- | --------------------------------- |
|
|
93
|
+
| `dtcg/` | Figma エクスポート（参考） |
|
|
94
|
+
| `src/tokens/tokens.css` | `--xm-*` 定義（手動メンテ） |
|
|
95
|
+
| `src/tokens/tokens.ts` | `xmVars` / `XmVars`（手動メンテ） |
|
|
96
|
+
| `src/index.ts` | パッケージ入口 |
|
|
97
|
+
| `src/storybook/` | Storybook 用 UI（**人間非保守**） |
|
|
98
|
+
| `dist/` | ビルド成果物（publish 対象） |
|
|
99
|
+
|
|
100
|
+
### Storybook
|
|
101
|
+
|
|
102
|
+
トークン一覧・コピー用の Storybook は [`src/storybook/`](./src/storybook/README.md) にあります。**人間は通常保守しません**（書き換え可。崩れや不具合は AI に直してもらう運用。レビューは成果物が問題なければ OK）。
|
|
103
|
+
|
|
104
|
+
```bash
|
|
105
|
+
vp run storybook # tokens → Design Tokens
|
|
106
|
+
```
|
|
97
107
|
|
|
98
|
-
##
|
|
108
|
+
## コマンド
|
|
99
109
|
|
|
100
|
-
|
|
|
101
|
-
|
|
|
102
|
-
|
|
|
103
|
-
| `
|
|
104
|
-
|
|
|
105
|
-
| `src/index.ts` | **`xmCssVars`** と補助型のエクスポート |
|
|
106
|
-
| `src/vanilla-extract.ts` | VE エントリ（`xmVars` contract） |
|
|
107
|
-
| `src/xm-vars.css.ts` | `createGlobalThemeContract(xmCssVars, mapXmVarName)` |
|
|
108
|
-
| `dist/` | **ビルド成果物** |
|
|
110
|
+
| 目的 | コマンド |
|
|
111
|
+
| ---------- | --------------------------------------------------------------------------- |
|
|
112
|
+
| 依存の更新 | `vp install`（リポジトリルート） |
|
|
113
|
+
| ビルド | `vp run build:tokens` または `yarn workspace @xmart/xorder-ui-tokens build` |
|
|
114
|
+
| npm 公開 | ルートの `vp run publish:tokens`（CI ワークフローあり） |
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/** Vanilla CSS 用: DTCG 論理パスに対応した `var(--xm-*)` の `
|
|
2
|
-
export { type
|
|
1
|
+
/** Vanilla CSS 用: DTCG 論理パスに対応した `var(--xm-*)` の `xmVars` */
|
|
2
|
+
export { type XmVars, xmVars, xmTokensLayer } from './tokens/tokens';
|
package/dist/index.esm.js
CHANGED
|
@@ -1,2 +1,202 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
//#region src/tokens/tokens.ts
|
|
2
|
+
var e = "xm-tokens", t = {
|
|
3
|
+
color: {
|
|
4
|
+
background: {
|
|
5
|
+
primary: {
|
|
6
|
+
default: "var(--xm-color-background-primary-default)",
|
|
7
|
+
muted: "var(--xm-color-background-primary-muted)"
|
|
8
|
+
},
|
|
9
|
+
danger: "var(--xm-color-background-danger)",
|
|
10
|
+
default: "var(--xm-color-background-default)",
|
|
11
|
+
disabled: "var(--xm-color-background-disabled)",
|
|
12
|
+
emphasis: "var(--xm-color-background-emphasis)",
|
|
13
|
+
info: "var(--xm-color-background-info)",
|
|
14
|
+
success: "var(--xm-color-background-success)",
|
|
15
|
+
supplier: "var(--xm-color-background-supplier)",
|
|
16
|
+
warning: "var(--xm-color-background-warning)",
|
|
17
|
+
white: "var(--xm-color-background-white)"
|
|
18
|
+
},
|
|
19
|
+
hover: {
|
|
20
|
+
primary: {
|
|
21
|
+
default: "var(--xm-color-hover-primary-default)",
|
|
22
|
+
muted: "var(--xm-color-hover-primary-muted)",
|
|
23
|
+
subtle: "var(--xm-color-hover-primary-subtle)"
|
|
24
|
+
},
|
|
25
|
+
default: "var(--xm-color-hover-default)",
|
|
26
|
+
emphasis: "var(--xm-color-hover-emphasis)"
|
|
27
|
+
},
|
|
28
|
+
blue: {
|
|
29
|
+
50: "var(--xm-color-blue-50)",
|
|
30
|
+
100: "var(--xm-color-blue-100)",
|
|
31
|
+
200: "var(--xm-color-blue-200)",
|
|
32
|
+
300: "var(--xm-color-blue-300)",
|
|
33
|
+
400: "var(--xm-color-blue-400)",
|
|
34
|
+
500: "var(--xm-color-blue-500)",
|
|
35
|
+
600: "var(--xm-color-blue-600)",
|
|
36
|
+
700: "var(--xm-color-blue-700)",
|
|
37
|
+
800: "var(--xm-color-blue-800)",
|
|
38
|
+
900: "var(--xm-color-blue-900)"
|
|
39
|
+
},
|
|
40
|
+
border: {
|
|
41
|
+
danger: "var(--xm-color-border-danger)",
|
|
42
|
+
default: "var(--xm-color-border-default)",
|
|
43
|
+
info: "var(--xm-color-border-info)",
|
|
44
|
+
muted: "var(--xm-color-border-muted)",
|
|
45
|
+
primary: "var(--xm-color-border-primary)",
|
|
46
|
+
subtle: "var(--xm-color-border-subtle)",
|
|
47
|
+
success: "var(--xm-color-border-success)",
|
|
48
|
+
warning: "var(--xm-color-border-warning)"
|
|
49
|
+
},
|
|
50
|
+
foreground: {
|
|
51
|
+
danger: "var(--xm-color-foreground-danger)",
|
|
52
|
+
default: "var(--xm-color-foreground-default)",
|
|
53
|
+
disabled: "var(--xm-color-foreground-disabled)",
|
|
54
|
+
info: "var(--xm-color-foreground-info)",
|
|
55
|
+
inverse: "var(--xm-color-foreground-inverse)",
|
|
56
|
+
placeholder: "var(--xm-color-foreground-placeholder)",
|
|
57
|
+
primary: "var(--xm-color-foreground-primary)",
|
|
58
|
+
subtle: "var(--xm-color-foreground-subtle)",
|
|
59
|
+
success: "var(--xm-color-foreground-success)",
|
|
60
|
+
warning: "var(--xm-color-foreground-warning)"
|
|
61
|
+
},
|
|
62
|
+
gray: {
|
|
63
|
+
50: "var(--xm-color-gray-50)",
|
|
64
|
+
100: "var(--xm-color-gray-100)",
|
|
65
|
+
200: "var(--xm-color-gray-200)",
|
|
66
|
+
300: "var(--xm-color-gray-300)",
|
|
67
|
+
400: "var(--xm-color-gray-400)",
|
|
68
|
+
500: "var(--xm-color-gray-500)",
|
|
69
|
+
600: "var(--xm-color-gray-600)",
|
|
70
|
+
700: "var(--xm-color-gray-700)",
|
|
71
|
+
800: "var(--xm-color-gray-800)",
|
|
72
|
+
900: "var(--xm-color-gray-900)"
|
|
73
|
+
},
|
|
74
|
+
green: {
|
|
75
|
+
50: "var(--xm-color-green-50)",
|
|
76
|
+
100: "var(--xm-color-green-100)",
|
|
77
|
+
200: "var(--xm-color-green-200)",
|
|
78
|
+
300: "var(--xm-color-green-300)",
|
|
79
|
+
400: "var(--xm-color-green-400)",
|
|
80
|
+
500: "var(--xm-color-green-500)",
|
|
81
|
+
600: "var(--xm-color-green-600)",
|
|
82
|
+
700: "var(--xm-color-green-700)",
|
|
83
|
+
800: "var(--xm-color-green-800)",
|
|
84
|
+
900: "var(--xm-color-green-900)"
|
|
85
|
+
},
|
|
86
|
+
orange: {
|
|
87
|
+
50: "var(--xm-color-orange-50)",
|
|
88
|
+
100: "var(--xm-color-orange-100)",
|
|
89
|
+
200: "var(--xm-color-orange-200)",
|
|
90
|
+
300: "var(--xm-color-orange-300)",
|
|
91
|
+
400: "var(--xm-color-orange-400)",
|
|
92
|
+
500: "var(--xm-color-orange-500)",
|
|
93
|
+
600: "var(--xm-color-orange-600)",
|
|
94
|
+
700: "var(--xm-color-orange-700)",
|
|
95
|
+
800: "var(--xm-color-orange-800)",
|
|
96
|
+
900: "var(--xm-color-orange-900)"
|
|
97
|
+
},
|
|
98
|
+
purple: {
|
|
99
|
+
50: "var(--xm-color-purple-50)",
|
|
100
|
+
100: "var(--xm-color-purple-100)",
|
|
101
|
+
200: "var(--xm-color-purple-200)",
|
|
102
|
+
300: "var(--xm-color-purple-300)",
|
|
103
|
+
400: "var(--xm-color-purple-400)",
|
|
104
|
+
500: "var(--xm-color-purple-500)",
|
|
105
|
+
600: "var(--xm-color-purple-600)",
|
|
106
|
+
700: "var(--xm-color-purple-700)",
|
|
107
|
+
800: "var(--xm-color-purple-800)",
|
|
108
|
+
900: "var(--xm-color-purple-900)"
|
|
109
|
+
},
|
|
110
|
+
red: {
|
|
111
|
+
50: "var(--xm-color-red-50)",
|
|
112
|
+
100: "var(--xm-color-red-100)",
|
|
113
|
+
200: "var(--xm-color-red-200)",
|
|
114
|
+
300: "var(--xm-color-red-300)",
|
|
115
|
+
400: "var(--xm-color-red-400)",
|
|
116
|
+
500: "var(--xm-color-red-500)",
|
|
117
|
+
600: "var(--xm-color-red-600)",
|
|
118
|
+
700: "var(--xm-color-red-700)",
|
|
119
|
+
800: "var(--xm-color-red-800)",
|
|
120
|
+
900: "var(--xm-color-red-900)"
|
|
121
|
+
},
|
|
122
|
+
yellow: {
|
|
123
|
+
50: "var(--xm-color-yellow-50)",
|
|
124
|
+
100: "var(--xm-color-yellow-100)",
|
|
125
|
+
200: "var(--xm-color-yellow-200)",
|
|
126
|
+
300: "var(--xm-color-yellow-300)",
|
|
127
|
+
400: "var(--xm-color-yellow-400)",
|
|
128
|
+
500: "var(--xm-color-yellow-500)",
|
|
129
|
+
600: "var(--xm-color-yellow-600)",
|
|
130
|
+
700: "var(--xm-color-yellow-700)",
|
|
131
|
+
800: "var(--xm-color-yellow-800)",
|
|
132
|
+
900: "var(--xm-color-yellow-900)"
|
|
133
|
+
},
|
|
134
|
+
black: "var(--xm-color-black)",
|
|
135
|
+
white: "var(--xm-color-white)"
|
|
136
|
+
},
|
|
137
|
+
fontFamily: {
|
|
138
|
+
base: "var(--xm-font-family-base)",
|
|
139
|
+
mono: "var(--xm-font-family-mono)",
|
|
140
|
+
sans: "var(--xm-font-family-sans)",
|
|
141
|
+
serif: "var(--xm-font-family-serif)"
|
|
142
|
+
},
|
|
143
|
+
fontSize: {
|
|
144
|
+
"2xl": "var(--xm-font-size-2xl)",
|
|
145
|
+
"2xs": "var(--xm-font-size-2xs)",
|
|
146
|
+
"3xl": "var(--xm-font-size-3xl)",
|
|
147
|
+
lg: "var(--xm-font-size-lg)",
|
|
148
|
+
md: "var(--xm-font-size-md)",
|
|
149
|
+
sm: "var(--xm-font-size-sm)",
|
|
150
|
+
xl: "var(--xm-font-size-xl)",
|
|
151
|
+
xs: "var(--xm-font-size-xs)"
|
|
152
|
+
},
|
|
153
|
+
fontWeight: {
|
|
154
|
+
bold: "var(--xm-font-weight-bold)",
|
|
155
|
+
regular: "var(--xm-font-weight-regular)"
|
|
156
|
+
},
|
|
157
|
+
lineHeight: {
|
|
158
|
+
loose: "var(--xm-line-height-loose)",
|
|
159
|
+
normal: "var(--xm-line-height-normal)",
|
|
160
|
+
tight: "var(--xm-line-height-tight)"
|
|
161
|
+
},
|
|
162
|
+
radius: {
|
|
163
|
+
full: "var(--xm-radius-full)",
|
|
164
|
+
lg: "var(--xm-radius-lg)",
|
|
165
|
+
md: "var(--xm-radius-md)",
|
|
166
|
+
none: "var(--xm-radius-none)",
|
|
167
|
+
sm: "var(--xm-radius-sm)",
|
|
168
|
+
xs: "var(--xm-radius-xs)"
|
|
169
|
+
},
|
|
170
|
+
space: {
|
|
171
|
+
0: "var(--xm-space-0)",
|
|
172
|
+
2: "var(--xm-space-2)",
|
|
173
|
+
4: "var(--xm-space-4)",
|
|
174
|
+
6: "var(--xm-space-6)",
|
|
175
|
+
8: "var(--xm-space-8)",
|
|
176
|
+
12: "var(--xm-space-12)",
|
|
177
|
+
16: "var(--xm-space-16)",
|
|
178
|
+
20: "var(--xm-space-20)",
|
|
179
|
+
24: "var(--xm-space-24)",
|
|
180
|
+
32: "var(--xm-space-32)",
|
|
181
|
+
40: "var(--xm-space-40)",
|
|
182
|
+
48: "var(--xm-space-48)",
|
|
183
|
+
56: "var(--xm-space-56)",
|
|
184
|
+
64: "var(--xm-space-64)",
|
|
185
|
+
80: "var(--xm-space-80)",
|
|
186
|
+
128: "var(--xm-space-128)"
|
|
187
|
+
},
|
|
188
|
+
zIndex: {
|
|
189
|
+
banner: "var(--xm-z-index-banner)",
|
|
190
|
+
base: "var(--xm-z-index-base)",
|
|
191
|
+
docked: "var(--xm-z-index-docked)",
|
|
192
|
+
dropdown: "var(--xm-z-index-dropdown)",
|
|
193
|
+
modal: "var(--xm-z-index-modal)",
|
|
194
|
+
overlay: "var(--xm-z-index-overlay)",
|
|
195
|
+
popover: "var(--xm-z-index-popover)",
|
|
196
|
+
sticky: "var(--xm-z-index-sticky)",
|
|
197
|
+
toast: "var(--xm-z-index-toast)",
|
|
198
|
+
tooltip: "var(--xm-z-index-tooltip)"
|
|
199
|
+
}
|
|
200
|
+
};
|
|
201
|
+
//#endregion
|
|
202
|
+
export { e as xmTokensLayer, t as xmVars };
|
package/dist/tokens/tokens.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const xmTokensLayer: "xm-tokens";
|
|
2
|
-
export declare const
|
|
2
|
+
export declare const xmVars: {
|
|
3
3
|
readonly color: {
|
|
4
4
|
readonly background: {
|
|
5
5
|
readonly primary: {
|
|
@@ -198,4 +198,4 @@ export declare const xmCssVars: {
|
|
|
198
198
|
readonly tooltip: "var(--xm-z-index-tooltip)";
|
|
199
199
|
};
|
|
200
200
|
};
|
|
201
|
-
export type
|
|
201
|
+
export type XmVars = typeof xmVars;
|
package/dist/tokens.css
CHANGED
|
@@ -81,23 +81,23 @@
|
|
|
81
81
|
--xm-color-yellow-700: #ffbf00;
|
|
82
82
|
--xm-color-yellow-800: #cfa219;
|
|
83
83
|
--xm-color-yellow-900: #977614;
|
|
84
|
-
/* -- space -- */
|
|
85
|
-
--xm-space-0:
|
|
86
|
-
--xm-space-2:
|
|
87
|
-
--xm-space-4:
|
|
88
|
-
--xm-space-6:
|
|
89
|
-
--xm-space-8:
|
|
90
|
-
--xm-space-12:
|
|
91
|
-
--xm-space-16:
|
|
92
|
-
--xm-space-20:
|
|
93
|
-
--xm-space-24:
|
|
94
|
-
--xm-space-32:
|
|
95
|
-
--xm-space-40:
|
|
96
|
-
--xm-space-48:
|
|
97
|
-
--xm-space-56:
|
|
98
|
-
--xm-space-64:
|
|
99
|
-
--xm-space-80:
|
|
100
|
-
--xm-space-128:
|
|
84
|
+
/* -- space -- (16px = 1rem) */
|
|
85
|
+
--xm-space-0: 0;
|
|
86
|
+
--xm-space-2: 0.125rem;
|
|
87
|
+
--xm-space-4: 0.25rem;
|
|
88
|
+
--xm-space-6: 0.375rem;
|
|
89
|
+
--xm-space-8: 0.5rem;
|
|
90
|
+
--xm-space-12: 0.75rem;
|
|
91
|
+
--xm-space-16: 1rem;
|
|
92
|
+
--xm-space-20: 1.25rem;
|
|
93
|
+
--xm-space-24: 1.5rem;
|
|
94
|
+
--xm-space-32: 2rem;
|
|
95
|
+
--xm-space-40: 2.5rem;
|
|
96
|
+
--xm-space-48: 3rem;
|
|
97
|
+
--xm-space-56: 3.5rem;
|
|
98
|
+
--xm-space-64: 4rem;
|
|
99
|
+
--xm-space-80: 5rem;
|
|
100
|
+
--xm-space-128: 8rem;
|
|
101
101
|
/* -------------------------------------------------------------------------- */
|
|
102
102
|
/* Semantic tokens (xmart.semantic.tokens.json) */
|
|
103
103
|
/* -------------------------------------------------------------------------- */
|
|
@@ -146,15 +146,15 @@
|
|
|
146
146
|
--xm-font-family-sans:
|
|
147
147
|
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
148
148
|
--xm-font-family-serif: Georgia, 'Times New Roman', Times, serif;
|
|
149
|
-
/* -- font-size -- */
|
|
150
|
-
--xm-font-size-2xl:
|
|
151
|
-
--xm-font-size-2xs:
|
|
152
|
-
--xm-font-size-3xl:
|
|
153
|
-
--xm-font-size-lg:
|
|
154
|
-
--xm-font-size-md:
|
|
155
|
-
--xm-font-size-sm:
|
|
156
|
-
--xm-font-size-xl:
|
|
157
|
-
--xm-font-size-xs:
|
|
149
|
+
/* -- font-size -- (16px = 1rem) */
|
|
150
|
+
--xm-font-size-2xl: 1.5rem;
|
|
151
|
+
--xm-font-size-2xs: 0.625rem;
|
|
152
|
+
--xm-font-size-3xl: 2rem;
|
|
153
|
+
--xm-font-size-lg: 1.125rem;
|
|
154
|
+
--xm-font-size-md: 1rem;
|
|
155
|
+
--xm-font-size-sm: 0.875rem;
|
|
156
|
+
--xm-font-size-xl: 1.25rem;
|
|
157
|
+
--xm-font-size-xs: 0.75rem;
|
|
158
158
|
/* -- font-weight -- */
|
|
159
159
|
--xm-font-weight-bold: 700;
|
|
160
160
|
--xm-font-weight-regular: 400;
|
|
@@ -162,13 +162,13 @@
|
|
|
162
162
|
--xm-line-height-loose: 1.75;
|
|
163
163
|
--xm-line-height-normal: 1.5;
|
|
164
164
|
--xm-line-height-tight: 1.3;
|
|
165
|
-
/* -- radius -- */
|
|
165
|
+
/* -- radius -- (16px = 1rem) */
|
|
166
166
|
--xm-radius-full: 9999px;
|
|
167
|
-
--xm-radius-lg:
|
|
168
|
-
--xm-radius-md:
|
|
169
|
-
--xm-radius-none:
|
|
170
|
-
--xm-radius-sm:
|
|
171
|
-
--xm-radius-xs:
|
|
167
|
+
--xm-radius-lg: 1rem;
|
|
168
|
+
--xm-radius-md: 0.5rem;
|
|
169
|
+
--xm-radius-none: 0;
|
|
170
|
+
--xm-radius-sm: 0.375rem;
|
|
171
|
+
--xm-radius-xs: 0.25rem;
|
|
172
172
|
/* -- z-index -- */
|
|
173
173
|
--xm-z-index-banner: 1200;
|
|
174
174
|
--xm-z-index-base: 0;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xmart/xorder-ui-tokens",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "DTCG 由来デザイン・トークン — Vanilla CSS（`tokens.css` / `
|
|
3
|
+
"version": "0.3.0-dev.2",
|
|
4
|
+
"description": "DTCG 由来デザイン・トークン — Vanilla CSS（`tokens.css` / `xmVars`）",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
7
7
|
],
|
|
@@ -17,18 +17,21 @@
|
|
|
17
17
|
"types": "./dist/index.d.ts",
|
|
18
18
|
"import": "./dist/index.esm.js"
|
|
19
19
|
},
|
|
20
|
-
"./tokens.css": "./dist/tokens.css"
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
"./tokens.css": "./dist/tokens.css"
|
|
21
|
+
},
|
|
22
|
+
"publishConfig": {
|
|
23
|
+
"exports": {
|
|
24
|
+
".": {
|
|
25
|
+
"types": "./dist/index.d.ts",
|
|
26
|
+
"import": "./dist/index.esm.js"
|
|
27
|
+
},
|
|
28
|
+
"./tokens.css": "./dist/tokens.css"
|
|
29
|
+
},
|
|
30
|
+
"types": "./dist/index.d.ts"
|
|
25
31
|
},
|
|
26
32
|
"scripts": {
|
|
27
33
|
"prepublishOnly": "vp run build",
|
|
28
34
|
"prebuild": "rm -rf ./dist",
|
|
29
35
|
"build": "vp build"
|
|
30
|
-
},
|
|
31
|
-
"peerDependencies": {
|
|
32
|
-
"@vanilla-extract/css": "^1.20.0"
|
|
33
36
|
}
|
|
34
37
|
}
|
package/dist/tokens-ChJ8Sxzp.js
DELETED
|
@@ -1,202 +0,0 @@
|
|
|
1
|
-
//#region src/tokens/tokens.ts
|
|
2
|
-
var e = "xm-tokens", t = {
|
|
3
|
-
color: {
|
|
4
|
-
background: {
|
|
5
|
-
primary: {
|
|
6
|
-
default: "var(--xm-color-background-primary-default)",
|
|
7
|
-
muted: "var(--xm-color-background-primary-muted)"
|
|
8
|
-
},
|
|
9
|
-
danger: "var(--xm-color-background-danger)",
|
|
10
|
-
default: "var(--xm-color-background-default)",
|
|
11
|
-
disabled: "var(--xm-color-background-disabled)",
|
|
12
|
-
emphasis: "var(--xm-color-background-emphasis)",
|
|
13
|
-
info: "var(--xm-color-background-info)",
|
|
14
|
-
success: "var(--xm-color-background-success)",
|
|
15
|
-
supplier: "var(--xm-color-background-supplier)",
|
|
16
|
-
warning: "var(--xm-color-background-warning)",
|
|
17
|
-
white: "var(--xm-color-background-white)"
|
|
18
|
-
},
|
|
19
|
-
hover: {
|
|
20
|
-
primary: {
|
|
21
|
-
default: "var(--xm-color-hover-primary-default)",
|
|
22
|
-
muted: "var(--xm-color-hover-primary-muted)",
|
|
23
|
-
subtle: "var(--xm-color-hover-primary-subtle)"
|
|
24
|
-
},
|
|
25
|
-
default: "var(--xm-color-hover-default)",
|
|
26
|
-
emphasis: "var(--xm-color-hover-emphasis)"
|
|
27
|
-
},
|
|
28
|
-
blue: {
|
|
29
|
-
50: "var(--xm-color-blue-50)",
|
|
30
|
-
100: "var(--xm-color-blue-100)",
|
|
31
|
-
200: "var(--xm-color-blue-200)",
|
|
32
|
-
300: "var(--xm-color-blue-300)",
|
|
33
|
-
400: "var(--xm-color-blue-400)",
|
|
34
|
-
500: "var(--xm-color-blue-500)",
|
|
35
|
-
600: "var(--xm-color-blue-600)",
|
|
36
|
-
700: "var(--xm-color-blue-700)",
|
|
37
|
-
800: "var(--xm-color-blue-800)",
|
|
38
|
-
900: "var(--xm-color-blue-900)"
|
|
39
|
-
},
|
|
40
|
-
border: {
|
|
41
|
-
danger: "var(--xm-color-border-danger)",
|
|
42
|
-
default: "var(--xm-color-border-default)",
|
|
43
|
-
info: "var(--xm-color-border-info)",
|
|
44
|
-
muted: "var(--xm-color-border-muted)",
|
|
45
|
-
primary: "var(--xm-color-border-primary)",
|
|
46
|
-
subtle: "var(--xm-color-border-subtle)",
|
|
47
|
-
success: "var(--xm-color-border-success)",
|
|
48
|
-
warning: "var(--xm-color-border-warning)"
|
|
49
|
-
},
|
|
50
|
-
foreground: {
|
|
51
|
-
danger: "var(--xm-color-foreground-danger)",
|
|
52
|
-
default: "var(--xm-color-foreground-default)",
|
|
53
|
-
disabled: "var(--xm-color-foreground-disabled)",
|
|
54
|
-
info: "var(--xm-color-foreground-info)",
|
|
55
|
-
inverse: "var(--xm-color-foreground-inverse)",
|
|
56
|
-
placeholder: "var(--xm-color-foreground-placeholder)",
|
|
57
|
-
primary: "var(--xm-color-foreground-primary)",
|
|
58
|
-
subtle: "var(--xm-color-foreground-subtle)",
|
|
59
|
-
success: "var(--xm-color-foreground-success)",
|
|
60
|
-
warning: "var(--xm-color-foreground-warning)"
|
|
61
|
-
},
|
|
62
|
-
gray: {
|
|
63
|
-
50: "var(--xm-color-gray-50)",
|
|
64
|
-
100: "var(--xm-color-gray-100)",
|
|
65
|
-
200: "var(--xm-color-gray-200)",
|
|
66
|
-
300: "var(--xm-color-gray-300)",
|
|
67
|
-
400: "var(--xm-color-gray-400)",
|
|
68
|
-
500: "var(--xm-color-gray-500)",
|
|
69
|
-
600: "var(--xm-color-gray-600)",
|
|
70
|
-
700: "var(--xm-color-gray-700)",
|
|
71
|
-
800: "var(--xm-color-gray-800)",
|
|
72
|
-
900: "var(--xm-color-gray-900)"
|
|
73
|
-
},
|
|
74
|
-
green: {
|
|
75
|
-
50: "var(--xm-color-green-50)",
|
|
76
|
-
100: "var(--xm-color-green-100)",
|
|
77
|
-
200: "var(--xm-color-green-200)",
|
|
78
|
-
300: "var(--xm-color-green-300)",
|
|
79
|
-
400: "var(--xm-color-green-400)",
|
|
80
|
-
500: "var(--xm-color-green-500)",
|
|
81
|
-
600: "var(--xm-color-green-600)",
|
|
82
|
-
700: "var(--xm-color-green-700)",
|
|
83
|
-
800: "var(--xm-color-green-800)",
|
|
84
|
-
900: "var(--xm-color-green-900)"
|
|
85
|
-
},
|
|
86
|
-
orange: {
|
|
87
|
-
50: "var(--xm-color-orange-50)",
|
|
88
|
-
100: "var(--xm-color-orange-100)",
|
|
89
|
-
200: "var(--xm-color-orange-200)",
|
|
90
|
-
300: "var(--xm-color-orange-300)",
|
|
91
|
-
400: "var(--xm-color-orange-400)",
|
|
92
|
-
500: "var(--xm-color-orange-500)",
|
|
93
|
-
600: "var(--xm-color-orange-600)",
|
|
94
|
-
700: "var(--xm-color-orange-700)",
|
|
95
|
-
800: "var(--xm-color-orange-800)",
|
|
96
|
-
900: "var(--xm-color-orange-900)"
|
|
97
|
-
},
|
|
98
|
-
purple: {
|
|
99
|
-
50: "var(--xm-color-purple-50)",
|
|
100
|
-
100: "var(--xm-color-purple-100)",
|
|
101
|
-
200: "var(--xm-color-purple-200)",
|
|
102
|
-
300: "var(--xm-color-purple-300)",
|
|
103
|
-
400: "var(--xm-color-purple-400)",
|
|
104
|
-
500: "var(--xm-color-purple-500)",
|
|
105
|
-
600: "var(--xm-color-purple-600)",
|
|
106
|
-
700: "var(--xm-color-purple-700)",
|
|
107
|
-
800: "var(--xm-color-purple-800)",
|
|
108
|
-
900: "var(--xm-color-purple-900)"
|
|
109
|
-
},
|
|
110
|
-
red: {
|
|
111
|
-
50: "var(--xm-color-red-50)",
|
|
112
|
-
100: "var(--xm-color-red-100)",
|
|
113
|
-
200: "var(--xm-color-red-200)",
|
|
114
|
-
300: "var(--xm-color-red-300)",
|
|
115
|
-
400: "var(--xm-color-red-400)",
|
|
116
|
-
500: "var(--xm-color-red-500)",
|
|
117
|
-
600: "var(--xm-color-red-600)",
|
|
118
|
-
700: "var(--xm-color-red-700)",
|
|
119
|
-
800: "var(--xm-color-red-800)",
|
|
120
|
-
900: "var(--xm-color-red-900)"
|
|
121
|
-
},
|
|
122
|
-
yellow: {
|
|
123
|
-
50: "var(--xm-color-yellow-50)",
|
|
124
|
-
100: "var(--xm-color-yellow-100)",
|
|
125
|
-
200: "var(--xm-color-yellow-200)",
|
|
126
|
-
300: "var(--xm-color-yellow-300)",
|
|
127
|
-
400: "var(--xm-color-yellow-400)",
|
|
128
|
-
500: "var(--xm-color-yellow-500)",
|
|
129
|
-
600: "var(--xm-color-yellow-600)",
|
|
130
|
-
700: "var(--xm-color-yellow-700)",
|
|
131
|
-
800: "var(--xm-color-yellow-800)",
|
|
132
|
-
900: "var(--xm-color-yellow-900)"
|
|
133
|
-
},
|
|
134
|
-
black: "var(--xm-color-black)",
|
|
135
|
-
white: "var(--xm-color-white)"
|
|
136
|
-
},
|
|
137
|
-
fontFamily: {
|
|
138
|
-
base: "var(--xm-font-family-base)",
|
|
139
|
-
mono: "var(--xm-font-family-mono)",
|
|
140
|
-
sans: "var(--xm-font-family-sans)",
|
|
141
|
-
serif: "var(--xm-font-family-serif)"
|
|
142
|
-
},
|
|
143
|
-
fontSize: {
|
|
144
|
-
"2xl": "var(--xm-font-size-2xl)",
|
|
145
|
-
"2xs": "var(--xm-font-size-2xs)",
|
|
146
|
-
"3xl": "var(--xm-font-size-3xl)",
|
|
147
|
-
lg: "var(--xm-font-size-lg)",
|
|
148
|
-
md: "var(--xm-font-size-md)",
|
|
149
|
-
sm: "var(--xm-font-size-sm)",
|
|
150
|
-
xl: "var(--xm-font-size-xl)",
|
|
151
|
-
xs: "var(--xm-font-size-xs)"
|
|
152
|
-
},
|
|
153
|
-
fontWeight: {
|
|
154
|
-
bold: "var(--xm-font-weight-bold)",
|
|
155
|
-
regular: "var(--xm-font-weight-regular)"
|
|
156
|
-
},
|
|
157
|
-
lineHeight: {
|
|
158
|
-
loose: "var(--xm-line-height-loose)",
|
|
159
|
-
normal: "var(--xm-line-height-normal)",
|
|
160
|
-
tight: "var(--xm-line-height-tight)"
|
|
161
|
-
},
|
|
162
|
-
radius: {
|
|
163
|
-
full: "var(--xm-radius-full)",
|
|
164
|
-
lg: "var(--xm-radius-lg)",
|
|
165
|
-
md: "var(--xm-radius-md)",
|
|
166
|
-
none: "var(--xm-radius-none)",
|
|
167
|
-
sm: "var(--xm-radius-sm)",
|
|
168
|
-
xs: "var(--xm-radius-xs)"
|
|
169
|
-
},
|
|
170
|
-
space: {
|
|
171
|
-
0: "var(--xm-space-0)",
|
|
172
|
-
2: "var(--xm-space-2)",
|
|
173
|
-
4: "var(--xm-space-4)",
|
|
174
|
-
6: "var(--xm-space-6)",
|
|
175
|
-
8: "var(--xm-space-8)",
|
|
176
|
-
12: "var(--xm-space-12)",
|
|
177
|
-
16: "var(--xm-space-16)",
|
|
178
|
-
20: "var(--xm-space-20)",
|
|
179
|
-
24: "var(--xm-space-24)",
|
|
180
|
-
32: "var(--xm-space-32)",
|
|
181
|
-
40: "var(--xm-space-40)",
|
|
182
|
-
48: "var(--xm-space-48)",
|
|
183
|
-
56: "var(--xm-space-56)",
|
|
184
|
-
64: "var(--xm-space-64)",
|
|
185
|
-
80: "var(--xm-space-80)",
|
|
186
|
-
128: "var(--xm-space-128)"
|
|
187
|
-
},
|
|
188
|
-
zIndex: {
|
|
189
|
-
banner: "var(--xm-z-index-banner)",
|
|
190
|
-
base: "var(--xm-z-index-base)",
|
|
191
|
-
docked: "var(--xm-z-index-docked)",
|
|
192
|
-
dropdown: "var(--xm-z-index-dropdown)",
|
|
193
|
-
modal: "var(--xm-z-index-modal)",
|
|
194
|
-
overlay: "var(--xm-z-index-overlay)",
|
|
195
|
-
popover: "var(--xm-z-index-popover)",
|
|
196
|
-
sticky: "var(--xm-z-index-sticky)",
|
|
197
|
-
toast: "var(--xm-z-index-toast)",
|
|
198
|
-
tooltip: "var(--xm-z-index-tooltip)"
|
|
199
|
-
}
|
|
200
|
-
};
|
|
201
|
-
//#endregion
|
|
202
|
-
export { e as n, t };
|
|
@@ -1,203 +0,0 @@
|
|
|
1
|
-
import { n as e } from "./tokens-ChJ8Sxzp.js";
|
|
2
|
-
//#region src/xm-vars.css.ts
|
|
3
|
-
var t = {
|
|
4
|
-
color: {
|
|
5
|
-
background: {
|
|
6
|
-
primary: {
|
|
7
|
-
default: "var(--xm-color-background-primary-default)",
|
|
8
|
-
muted: "var(--xm-color-background-primary-muted)"
|
|
9
|
-
},
|
|
10
|
-
danger: "var(--xm-color-background-danger)",
|
|
11
|
-
default: "var(--xm-color-background-default)",
|
|
12
|
-
disabled: "var(--xm-color-background-disabled)",
|
|
13
|
-
emphasis: "var(--xm-color-background-emphasis)",
|
|
14
|
-
info: "var(--xm-color-background-info)",
|
|
15
|
-
success: "var(--xm-color-background-success)",
|
|
16
|
-
supplier: "var(--xm-color-background-supplier)",
|
|
17
|
-
warning: "var(--xm-color-background-warning)",
|
|
18
|
-
white: "var(--xm-color-background-white)"
|
|
19
|
-
},
|
|
20
|
-
hover: {
|
|
21
|
-
primary: {
|
|
22
|
-
default: "var(--xm-color-hover-primary-default)",
|
|
23
|
-
muted: "var(--xm-color-hover-primary-muted)",
|
|
24
|
-
subtle: "var(--xm-color-hover-primary-subtle)"
|
|
25
|
-
},
|
|
26
|
-
default: "var(--xm-color-hover-default)",
|
|
27
|
-
emphasis: "var(--xm-color-hover-emphasis)"
|
|
28
|
-
},
|
|
29
|
-
blue: {
|
|
30
|
-
50: "var(--xm-color-blue-50)",
|
|
31
|
-
100: "var(--xm-color-blue-100)",
|
|
32
|
-
200: "var(--xm-color-blue-200)",
|
|
33
|
-
300: "var(--xm-color-blue-300)",
|
|
34
|
-
400: "var(--xm-color-blue-400)",
|
|
35
|
-
500: "var(--xm-color-blue-500)",
|
|
36
|
-
600: "var(--xm-color-blue-600)",
|
|
37
|
-
700: "var(--xm-color-blue-700)",
|
|
38
|
-
800: "var(--xm-color-blue-800)",
|
|
39
|
-
900: "var(--xm-color-blue-900)"
|
|
40
|
-
},
|
|
41
|
-
border: {
|
|
42
|
-
danger: "var(--xm-color-border-danger)",
|
|
43
|
-
default: "var(--xm-color-border-default)",
|
|
44
|
-
info: "var(--xm-color-border-info)",
|
|
45
|
-
muted: "var(--xm-color-border-muted)",
|
|
46
|
-
primary: "var(--xm-color-border-primary)",
|
|
47
|
-
subtle: "var(--xm-color-border-subtle)",
|
|
48
|
-
success: "var(--xm-color-border-success)",
|
|
49
|
-
warning: "var(--xm-color-border-warning)"
|
|
50
|
-
},
|
|
51
|
-
foreground: {
|
|
52
|
-
danger: "var(--xm-color-foreground-danger)",
|
|
53
|
-
default: "var(--xm-color-foreground-default)",
|
|
54
|
-
disabled: "var(--xm-color-foreground-disabled)",
|
|
55
|
-
info: "var(--xm-color-foreground-info)",
|
|
56
|
-
inverse: "var(--xm-color-foreground-inverse)",
|
|
57
|
-
placeholder: "var(--xm-color-foreground-placeholder)",
|
|
58
|
-
primary: "var(--xm-color-foreground-primary)",
|
|
59
|
-
subtle: "var(--xm-color-foreground-subtle)",
|
|
60
|
-
success: "var(--xm-color-foreground-success)",
|
|
61
|
-
warning: "var(--xm-color-foreground-warning)"
|
|
62
|
-
},
|
|
63
|
-
gray: {
|
|
64
|
-
50: "var(--xm-color-gray-50)",
|
|
65
|
-
100: "var(--xm-color-gray-100)",
|
|
66
|
-
200: "var(--xm-color-gray-200)",
|
|
67
|
-
300: "var(--xm-color-gray-300)",
|
|
68
|
-
400: "var(--xm-color-gray-400)",
|
|
69
|
-
500: "var(--xm-color-gray-500)",
|
|
70
|
-
600: "var(--xm-color-gray-600)",
|
|
71
|
-
700: "var(--xm-color-gray-700)",
|
|
72
|
-
800: "var(--xm-color-gray-800)",
|
|
73
|
-
900: "var(--xm-color-gray-900)"
|
|
74
|
-
},
|
|
75
|
-
green: {
|
|
76
|
-
50: "var(--xm-color-green-50)",
|
|
77
|
-
100: "var(--xm-color-green-100)",
|
|
78
|
-
200: "var(--xm-color-green-200)",
|
|
79
|
-
300: "var(--xm-color-green-300)",
|
|
80
|
-
400: "var(--xm-color-green-400)",
|
|
81
|
-
500: "var(--xm-color-green-500)",
|
|
82
|
-
600: "var(--xm-color-green-600)",
|
|
83
|
-
700: "var(--xm-color-green-700)",
|
|
84
|
-
800: "var(--xm-color-green-800)",
|
|
85
|
-
900: "var(--xm-color-green-900)"
|
|
86
|
-
},
|
|
87
|
-
orange: {
|
|
88
|
-
50: "var(--xm-color-orange-50)",
|
|
89
|
-
100: "var(--xm-color-orange-100)",
|
|
90
|
-
200: "var(--xm-color-orange-200)",
|
|
91
|
-
300: "var(--xm-color-orange-300)",
|
|
92
|
-
400: "var(--xm-color-orange-400)",
|
|
93
|
-
500: "var(--xm-color-orange-500)",
|
|
94
|
-
600: "var(--xm-color-orange-600)",
|
|
95
|
-
700: "var(--xm-color-orange-700)",
|
|
96
|
-
800: "var(--xm-color-orange-800)",
|
|
97
|
-
900: "var(--xm-color-orange-900)"
|
|
98
|
-
},
|
|
99
|
-
purple: {
|
|
100
|
-
50: "var(--xm-color-purple-50)",
|
|
101
|
-
100: "var(--xm-color-purple-100)",
|
|
102
|
-
200: "var(--xm-color-purple-200)",
|
|
103
|
-
300: "var(--xm-color-purple-300)",
|
|
104
|
-
400: "var(--xm-color-purple-400)",
|
|
105
|
-
500: "var(--xm-color-purple-500)",
|
|
106
|
-
600: "var(--xm-color-purple-600)",
|
|
107
|
-
700: "var(--xm-color-purple-700)",
|
|
108
|
-
800: "var(--xm-color-purple-800)",
|
|
109
|
-
900: "var(--xm-color-purple-900)"
|
|
110
|
-
},
|
|
111
|
-
red: {
|
|
112
|
-
50: "var(--xm-color-red-50)",
|
|
113
|
-
100: "var(--xm-color-red-100)",
|
|
114
|
-
200: "var(--xm-color-red-200)",
|
|
115
|
-
300: "var(--xm-color-red-300)",
|
|
116
|
-
400: "var(--xm-color-red-400)",
|
|
117
|
-
500: "var(--xm-color-red-500)",
|
|
118
|
-
600: "var(--xm-color-red-600)",
|
|
119
|
-
700: "var(--xm-color-red-700)",
|
|
120
|
-
800: "var(--xm-color-red-800)",
|
|
121
|
-
900: "var(--xm-color-red-900)"
|
|
122
|
-
},
|
|
123
|
-
yellow: {
|
|
124
|
-
50: "var(--xm-color-yellow-50)",
|
|
125
|
-
100: "var(--xm-color-yellow-100)",
|
|
126
|
-
200: "var(--xm-color-yellow-200)",
|
|
127
|
-
300: "var(--xm-color-yellow-300)",
|
|
128
|
-
400: "var(--xm-color-yellow-400)",
|
|
129
|
-
500: "var(--xm-color-yellow-500)",
|
|
130
|
-
600: "var(--xm-color-yellow-600)",
|
|
131
|
-
700: "var(--xm-color-yellow-700)",
|
|
132
|
-
800: "var(--xm-color-yellow-800)",
|
|
133
|
-
900: "var(--xm-color-yellow-900)"
|
|
134
|
-
},
|
|
135
|
-
black: "var(--xm-color-black)",
|
|
136
|
-
white: "var(--xm-color-white)"
|
|
137
|
-
},
|
|
138
|
-
fontFamily: {
|
|
139
|
-
base: "var(--xm-font-family-base)",
|
|
140
|
-
mono: "var(--xm-font-family-mono)",
|
|
141
|
-
sans: "var(--xm-font-family-sans)",
|
|
142
|
-
serif: "var(--xm-font-family-serif)"
|
|
143
|
-
},
|
|
144
|
-
fontSize: {
|
|
145
|
-
"2xl": "var(--xm-font-size-2xl)",
|
|
146
|
-
"2xs": "var(--xm-font-size-2xs)",
|
|
147
|
-
"3xl": "var(--xm-font-size-3xl)",
|
|
148
|
-
lg: "var(--xm-font-size-lg)",
|
|
149
|
-
md: "var(--xm-font-size-md)",
|
|
150
|
-
sm: "var(--xm-font-size-sm)",
|
|
151
|
-
xl: "var(--xm-font-size-xl)",
|
|
152
|
-
xs: "var(--xm-font-size-xs)"
|
|
153
|
-
},
|
|
154
|
-
fontWeight: {
|
|
155
|
-
bold: "var(--xm-font-weight-bold)",
|
|
156
|
-
regular: "var(--xm-font-weight-regular)"
|
|
157
|
-
},
|
|
158
|
-
lineHeight: {
|
|
159
|
-
loose: "var(--xm-line-height-loose)",
|
|
160
|
-
normal: "var(--xm-line-height-normal)",
|
|
161
|
-
tight: "var(--xm-line-height-tight)"
|
|
162
|
-
},
|
|
163
|
-
radius: {
|
|
164
|
-
full: "var(--xm-radius-full)",
|
|
165
|
-
lg: "var(--xm-radius-lg)",
|
|
166
|
-
md: "var(--xm-radius-md)",
|
|
167
|
-
none: "var(--xm-radius-none)",
|
|
168
|
-
sm: "var(--xm-radius-sm)",
|
|
169
|
-
xs: "var(--xm-radius-xs)"
|
|
170
|
-
},
|
|
171
|
-
space: {
|
|
172
|
-
0: "var(--xm-space-0)",
|
|
173
|
-
2: "var(--xm-space-2)",
|
|
174
|
-
4: "var(--xm-space-4)",
|
|
175
|
-
6: "var(--xm-space-6)",
|
|
176
|
-
8: "var(--xm-space-8)",
|
|
177
|
-
12: "var(--xm-space-12)",
|
|
178
|
-
16: "var(--xm-space-16)",
|
|
179
|
-
20: "var(--xm-space-20)",
|
|
180
|
-
24: "var(--xm-space-24)",
|
|
181
|
-
32: "var(--xm-space-32)",
|
|
182
|
-
40: "var(--xm-space-40)",
|
|
183
|
-
48: "var(--xm-space-48)",
|
|
184
|
-
56: "var(--xm-space-56)",
|
|
185
|
-
64: "var(--xm-space-64)",
|
|
186
|
-
80: "var(--xm-space-80)",
|
|
187
|
-
128: "var(--xm-space-128)"
|
|
188
|
-
},
|
|
189
|
-
zIndex: {
|
|
190
|
-
banner: "var(--xm-z-index-banner)",
|
|
191
|
-
base: "var(--xm-z-index-base)",
|
|
192
|
-
docked: "var(--xm-z-index-docked)",
|
|
193
|
-
dropdown: "var(--xm-z-index-dropdown)",
|
|
194
|
-
modal: "var(--xm-z-index-modal)",
|
|
195
|
-
overlay: "var(--xm-z-index-overlay)",
|
|
196
|
-
popover: "var(--xm-z-index-popover)",
|
|
197
|
-
sticky: "var(--xm-z-index-sticky)",
|
|
198
|
-
toast: "var(--xm-z-index-toast)",
|
|
199
|
-
tooltip: "var(--xm-z-index-tooltip)"
|
|
200
|
-
}
|
|
201
|
-
};
|
|
202
|
-
//#endregion
|
|
203
|
-
export { e as xmTokensLayer, t as xmVars };
|
package/dist/xm-vars.css.d.ts
DELETED
|
@@ -1,202 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* `xmCssVars` と同じ木。`--xm-*` 名は path から導出（葉の `var(...)` は map で無視される）
|
|
3
|
-
*/
|
|
4
|
-
export declare const xmVars: {
|
|
5
|
-
readonly color: {
|
|
6
|
-
readonly background: {
|
|
7
|
-
readonly primary: {
|
|
8
|
-
readonly default: `var(--${string})`;
|
|
9
|
-
readonly muted: `var(--${string})`;
|
|
10
|
-
};
|
|
11
|
-
readonly danger: `var(--${string})`;
|
|
12
|
-
readonly default: `var(--${string})`;
|
|
13
|
-
readonly disabled: `var(--${string})`;
|
|
14
|
-
readonly emphasis: `var(--${string})`;
|
|
15
|
-
readonly info: `var(--${string})`;
|
|
16
|
-
readonly success: `var(--${string})`;
|
|
17
|
-
readonly supplier: `var(--${string})`;
|
|
18
|
-
readonly warning: `var(--${string})`;
|
|
19
|
-
readonly white: `var(--${string})`;
|
|
20
|
-
};
|
|
21
|
-
readonly hover: {
|
|
22
|
-
readonly primary: {
|
|
23
|
-
readonly default: `var(--${string})`;
|
|
24
|
-
readonly muted: `var(--${string})`;
|
|
25
|
-
readonly subtle: `var(--${string})`;
|
|
26
|
-
};
|
|
27
|
-
readonly default: `var(--${string})`;
|
|
28
|
-
readonly emphasis: `var(--${string})`;
|
|
29
|
-
};
|
|
30
|
-
readonly blue: {
|
|
31
|
-
readonly '50': `var(--${string})`;
|
|
32
|
-
readonly '100': `var(--${string})`;
|
|
33
|
-
readonly '200': `var(--${string})`;
|
|
34
|
-
readonly '300': `var(--${string})`;
|
|
35
|
-
readonly '400': `var(--${string})`;
|
|
36
|
-
readonly '500': `var(--${string})`;
|
|
37
|
-
readonly '600': `var(--${string})`;
|
|
38
|
-
readonly '700': `var(--${string})`;
|
|
39
|
-
readonly '800': `var(--${string})`;
|
|
40
|
-
readonly '900': `var(--${string})`;
|
|
41
|
-
};
|
|
42
|
-
readonly border: {
|
|
43
|
-
readonly danger: `var(--${string})`;
|
|
44
|
-
readonly default: `var(--${string})`;
|
|
45
|
-
readonly info: `var(--${string})`;
|
|
46
|
-
readonly muted: `var(--${string})`;
|
|
47
|
-
readonly primary: `var(--${string})`;
|
|
48
|
-
readonly subtle: `var(--${string})`;
|
|
49
|
-
readonly success: `var(--${string})`;
|
|
50
|
-
readonly warning: `var(--${string})`;
|
|
51
|
-
};
|
|
52
|
-
readonly foreground: {
|
|
53
|
-
readonly danger: `var(--${string})`;
|
|
54
|
-
readonly default: `var(--${string})`;
|
|
55
|
-
readonly disabled: `var(--${string})`;
|
|
56
|
-
readonly info: `var(--${string})`;
|
|
57
|
-
readonly inverse: `var(--${string})`;
|
|
58
|
-
readonly placeholder: `var(--${string})`;
|
|
59
|
-
readonly primary: `var(--${string})`;
|
|
60
|
-
readonly subtle: `var(--${string})`;
|
|
61
|
-
readonly success: `var(--${string})`;
|
|
62
|
-
readonly warning: `var(--${string})`;
|
|
63
|
-
};
|
|
64
|
-
readonly gray: {
|
|
65
|
-
readonly '50': `var(--${string})`;
|
|
66
|
-
readonly '100': `var(--${string})`;
|
|
67
|
-
readonly '200': `var(--${string})`;
|
|
68
|
-
readonly '300': `var(--${string})`;
|
|
69
|
-
readonly '400': `var(--${string})`;
|
|
70
|
-
readonly '500': `var(--${string})`;
|
|
71
|
-
readonly '600': `var(--${string})`;
|
|
72
|
-
readonly '700': `var(--${string})`;
|
|
73
|
-
readonly '800': `var(--${string})`;
|
|
74
|
-
readonly '900': `var(--${string})`;
|
|
75
|
-
};
|
|
76
|
-
readonly green: {
|
|
77
|
-
readonly '50': `var(--${string})`;
|
|
78
|
-
readonly '100': `var(--${string})`;
|
|
79
|
-
readonly '200': `var(--${string})`;
|
|
80
|
-
readonly '300': `var(--${string})`;
|
|
81
|
-
readonly '400': `var(--${string})`;
|
|
82
|
-
readonly '500': `var(--${string})`;
|
|
83
|
-
readonly '600': `var(--${string})`;
|
|
84
|
-
readonly '700': `var(--${string})`;
|
|
85
|
-
readonly '800': `var(--${string})`;
|
|
86
|
-
readonly '900': `var(--${string})`;
|
|
87
|
-
};
|
|
88
|
-
readonly orange: {
|
|
89
|
-
readonly '50': `var(--${string})`;
|
|
90
|
-
readonly '100': `var(--${string})`;
|
|
91
|
-
readonly '200': `var(--${string})`;
|
|
92
|
-
readonly '300': `var(--${string})`;
|
|
93
|
-
readonly '400': `var(--${string})`;
|
|
94
|
-
readonly '500': `var(--${string})`;
|
|
95
|
-
readonly '600': `var(--${string})`;
|
|
96
|
-
readonly '700': `var(--${string})`;
|
|
97
|
-
readonly '800': `var(--${string})`;
|
|
98
|
-
readonly '900': `var(--${string})`;
|
|
99
|
-
};
|
|
100
|
-
readonly purple: {
|
|
101
|
-
readonly '50': `var(--${string})`;
|
|
102
|
-
readonly '100': `var(--${string})`;
|
|
103
|
-
readonly '200': `var(--${string})`;
|
|
104
|
-
readonly '300': `var(--${string})`;
|
|
105
|
-
readonly '400': `var(--${string})`;
|
|
106
|
-
readonly '500': `var(--${string})`;
|
|
107
|
-
readonly '600': `var(--${string})`;
|
|
108
|
-
readonly '700': `var(--${string})`;
|
|
109
|
-
readonly '800': `var(--${string})`;
|
|
110
|
-
readonly '900': `var(--${string})`;
|
|
111
|
-
};
|
|
112
|
-
readonly red: {
|
|
113
|
-
readonly '50': `var(--${string})`;
|
|
114
|
-
readonly '100': `var(--${string})`;
|
|
115
|
-
readonly '200': `var(--${string})`;
|
|
116
|
-
readonly '300': `var(--${string})`;
|
|
117
|
-
readonly '400': `var(--${string})`;
|
|
118
|
-
readonly '500': `var(--${string})`;
|
|
119
|
-
readonly '600': `var(--${string})`;
|
|
120
|
-
readonly '700': `var(--${string})`;
|
|
121
|
-
readonly '800': `var(--${string})`;
|
|
122
|
-
readonly '900': `var(--${string})`;
|
|
123
|
-
};
|
|
124
|
-
readonly yellow: {
|
|
125
|
-
readonly '50': `var(--${string})`;
|
|
126
|
-
readonly '100': `var(--${string})`;
|
|
127
|
-
readonly '200': `var(--${string})`;
|
|
128
|
-
readonly '300': `var(--${string})`;
|
|
129
|
-
readonly '400': `var(--${string})`;
|
|
130
|
-
readonly '500': `var(--${string})`;
|
|
131
|
-
readonly '600': `var(--${string})`;
|
|
132
|
-
readonly '700': `var(--${string})`;
|
|
133
|
-
readonly '800': `var(--${string})`;
|
|
134
|
-
readonly '900': `var(--${string})`;
|
|
135
|
-
};
|
|
136
|
-
readonly black: `var(--${string})`;
|
|
137
|
-
readonly white: `var(--${string})`;
|
|
138
|
-
};
|
|
139
|
-
readonly fontFamily: {
|
|
140
|
-
readonly base: `var(--${string})`;
|
|
141
|
-
readonly mono: `var(--${string})`;
|
|
142
|
-
readonly sans: `var(--${string})`;
|
|
143
|
-
readonly serif: `var(--${string})`;
|
|
144
|
-
};
|
|
145
|
-
readonly fontSize: {
|
|
146
|
-
readonly '2xl': `var(--${string})`;
|
|
147
|
-
readonly '2xs': `var(--${string})`;
|
|
148
|
-
readonly '3xl': `var(--${string})`;
|
|
149
|
-
readonly lg: `var(--${string})`;
|
|
150
|
-
readonly md: `var(--${string})`;
|
|
151
|
-
readonly sm: `var(--${string})`;
|
|
152
|
-
readonly xl: `var(--${string})`;
|
|
153
|
-
readonly xs: `var(--${string})`;
|
|
154
|
-
};
|
|
155
|
-
readonly fontWeight: {
|
|
156
|
-
readonly bold: `var(--${string})`;
|
|
157
|
-
readonly regular: `var(--${string})`;
|
|
158
|
-
};
|
|
159
|
-
readonly lineHeight: {
|
|
160
|
-
readonly loose: `var(--${string})`;
|
|
161
|
-
readonly normal: `var(--${string})`;
|
|
162
|
-
readonly tight: `var(--${string})`;
|
|
163
|
-
};
|
|
164
|
-
readonly radius: {
|
|
165
|
-
readonly full: `var(--${string})`;
|
|
166
|
-
readonly lg: `var(--${string})`;
|
|
167
|
-
readonly md: `var(--${string})`;
|
|
168
|
-
readonly none: `var(--${string})`;
|
|
169
|
-
readonly sm: `var(--${string})`;
|
|
170
|
-
readonly xs: `var(--${string})`;
|
|
171
|
-
};
|
|
172
|
-
readonly space: {
|
|
173
|
-
readonly '0': `var(--${string})`;
|
|
174
|
-
readonly '2': `var(--${string})`;
|
|
175
|
-
readonly '4': `var(--${string})`;
|
|
176
|
-
readonly '6': `var(--${string})`;
|
|
177
|
-
readonly '8': `var(--${string})`;
|
|
178
|
-
readonly '12': `var(--${string})`;
|
|
179
|
-
readonly '16': `var(--${string})`;
|
|
180
|
-
readonly '20': `var(--${string})`;
|
|
181
|
-
readonly '24': `var(--${string})`;
|
|
182
|
-
readonly '32': `var(--${string})`;
|
|
183
|
-
readonly '40': `var(--${string})`;
|
|
184
|
-
readonly '48': `var(--${string})`;
|
|
185
|
-
readonly '56': `var(--${string})`;
|
|
186
|
-
readonly '64': `var(--${string})`;
|
|
187
|
-
readonly '80': `var(--${string})`;
|
|
188
|
-
readonly '128': `var(--${string})`;
|
|
189
|
-
};
|
|
190
|
-
readonly zIndex: {
|
|
191
|
-
readonly banner: `var(--${string})`;
|
|
192
|
-
readonly base: `var(--${string})`;
|
|
193
|
-
readonly docked: `var(--${string})`;
|
|
194
|
-
readonly dropdown: `var(--${string})`;
|
|
195
|
-
readonly modal: `var(--${string})`;
|
|
196
|
-
readonly overlay: `var(--${string})`;
|
|
197
|
-
readonly popover: `var(--${string})`;
|
|
198
|
-
readonly sticky: `var(--${string})`;
|
|
199
|
-
readonly toast: `var(--${string})`;
|
|
200
|
-
readonly tooltip: `var(--${string})`;
|
|
201
|
-
};
|
|
202
|
-
};
|