@xmart/xorder-ui-tokens 0.1.2-dev.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 (10) hide show
  1. package/README.md +108 -0
  2. package/dist/index.d.ts +2 -0
  3. package/dist/index.esm.js +2 -0
  4. package/dist/tokens/tokens.d.ts +201 -0
  5. package/dist/tokens-ChJ8Sxzp.js +202 -0
  6. package/dist/tokens.css +184 -0
  7. package/dist/vanilla-extract.d.ts +3 -0
  8. package/dist/vanilla-extract.esm.js +203 -0
  9. package/dist/xm-vars.css.d.ts +202 -0
  10. package/package.json +34 -0
package/README.md ADDED
@@ -0,0 +1,108 @@
1
+ # @xmart/xorder-ui-tokens
2
+
3
+ [DTCG 2025.10](https://design-tokens.github.io/format/) に沿った xmart のデザイン・トークンを、**Vanilla CSS** と **Vanilla Extract** 用に公開します。
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-*` 名） |
9
+
10
+ `dist` の成果物を参照します。
11
+
12
+ ## データの流れ
13
+
14
+ ```mermaid
15
+ flowchart LR
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
21
+ ```
22
+
23
+ 1. **`dtcg/`** … Figma エクスポートの DTCG JSON（[README](./dtcg/README.md)）。ビルド入力ではない。
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
+ ## よく使うコマンド
44
+
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 だけ:
59
+
60
+ ```css
61
+ @import '@xmart/xorder-ui-tokens/tokens.css';
62
+ ```
63
+
64
+ `xmTokensLayer` は CSS のレイヤー名（現在は `'xm-tokens'`）です。並び順のみをアプリで指定する例:
65
+
66
+ ```css
67
+ @layer reset, xm-tokens, components;
68
+ ```
69
+
70
+ ### Vanilla Extract
71
+
72
+ アプリのルート付近で `tokens.css` を読み込んだうえで、コンポーネントの `style()` では contract 参照を使います（`createGlobalTheme` は不要 — 値は CSS が定義）。
73
+
74
+ ```ts
75
+ import { style } from '@vanilla-extract/css'
76
+ import { xmVars } from '@xmart/xorder-ui-tokens/vanilla-extract'
77
+
78
+ export const label = style({
79
+ color: xmVars.color.foreground.default,
80
+ fontSize: xmVars.fontSize.md,
81
+ backgroundColor: xmVars.color.background.default,
82
+ })
83
+ ```
84
+
85
+ `createGlobalThemeContract(xmCssVars, mapXmVarName)` で、葉の `var(...)` 文字列は使わず path だけから `--xm-*` 名を決めます。
86
+
87
+ `@vanilla-extract/css` は peer dependency です。
88
+
89
+ ### npm に含まれるもの
90
+
91
+ [`package.json` の `files`](./package.json) により、公開 tarball には **`dist`** のみが含まれます。
92
+
93
+ ### `exports`
94
+
95
+ - `./tokens.css` … レイヤ CSS（primitive ∪ semantic。`dist/tokens.css`）
96
+ - `./vanilla-extract` … VE 用 `xmVars`（`dist/vanilla-extract.esm.js`）
97
+
98
+ ## ディレクトリ概要
99
+
100
+ | パス | 役割 |
101
+ | ------------------------ | --------------------------------------------------------------- |
102
+ | `dtcg/` | Figma エクスポートの **参考資料**（[README](./dtcg/README.md)） |
103
+ | `src/tokens/tokens.css` | **`@layer xm-tokens`** の `--xm-*`（手動メンテ） |
104
+ | `src/tokens/tokens.ts` | **`xmCssVars`** 木（手動メンテ、`tokens.css` と同期） |
105
+ | `src/index.ts` | **`xmCssVars`** と補助型のエクスポート |
106
+ | `src/vanilla-extract.ts` | VE エントリ（`xmVars` contract） |
107
+ | `src/xm-vars.css.ts` | `createGlobalThemeContract(xmCssVars, mapXmVarName)` |
108
+ | `dist/` | **ビルド成果物** |
package/dist/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ /** Vanilla CSS 用: DTCG 論理パスに対応した `var(--xm-*)` の `xmCssVars` */
2
+ export { type XmCssVars, xmCssVars, xmTokensLayer } from './tokens/tokens';
package/dist/index.esm.js ADDED
@@ -0,0 +1,2 @@
1
+ import { n as e, t } from "./tokens-ChJ8Sxzp.js";
2
+ export { t as xmCssVars, e as xmTokensLayer };
package/dist/tokens/tokens.d.ts ADDED
@@ -0,0 +1,201 @@
1
+ export declare const xmTokensLayer: "xm-tokens";
2
+ export declare const xmCssVars: {
3
+ readonly color: {
4
+ readonly background: {
5
+ readonly primary: {
6
+ readonly default: "var(--xm-color-background-primary-default)";
7
+ readonly muted: "var(--xm-color-background-primary-muted)";
8
+ };
9
+ readonly danger: "var(--xm-color-background-danger)";
10
+ readonly default: "var(--xm-color-background-default)";
11
+ readonly disabled: "var(--xm-color-background-disabled)";
12
+ readonly emphasis: "var(--xm-color-background-emphasis)";
13
+ readonly info: "var(--xm-color-background-info)";
14
+ readonly success: "var(--xm-color-background-success)";
15
+ readonly supplier: "var(--xm-color-background-supplier)";
16
+ readonly warning: "var(--xm-color-background-warning)";
17
+ readonly white: "var(--xm-color-background-white)";
18
+ };
19
+ readonly hover: {
20
+ readonly primary: {
21
+ readonly default: "var(--xm-color-hover-primary-default)";
22
+ readonly muted: "var(--xm-color-hover-primary-muted)";
23
+ readonly subtle: "var(--xm-color-hover-primary-subtle)";
24
+ };
25
+ readonly default: "var(--xm-color-hover-default)";
26
+ readonly emphasis: "var(--xm-color-hover-emphasis)";
27
+ };
28
+ readonly blue: {
29
+ readonly '50': "var(--xm-color-blue-50)";
30
+ readonly '100': "var(--xm-color-blue-100)";
31
+ readonly '200': "var(--xm-color-blue-200)";
32
+ readonly '300': "var(--xm-color-blue-300)";
33
+ readonly '400': "var(--xm-color-blue-400)";
34
+ readonly '500': "var(--xm-color-blue-500)";
35
+ readonly '600': "var(--xm-color-blue-600)";
36
+ readonly '700': "var(--xm-color-blue-700)";
37
+ readonly '800': "var(--xm-color-blue-800)";
38
+ readonly '900': "var(--xm-color-blue-900)";
39
+ };
40
+ readonly border: {
41
+ readonly danger: "var(--xm-color-border-danger)";
42
+ readonly default: "var(--xm-color-border-default)";
43
+ readonly info: "var(--xm-color-border-info)";
44
+ readonly muted: "var(--xm-color-border-muted)";
45
+ readonly primary: "var(--xm-color-border-primary)";
46
+ readonly subtle: "var(--xm-color-border-subtle)";
47
+ readonly success: "var(--xm-color-border-success)";
48
+ readonly warning: "var(--xm-color-border-warning)";
49
+ };
50
+ readonly foreground: {
51
+ readonly danger: "var(--xm-color-foreground-danger)";
52
+ readonly default: "var(--xm-color-foreground-default)";
53
+ readonly disabled: "var(--xm-color-foreground-disabled)";
54
+ readonly info: "var(--xm-color-foreground-info)";
55
+ readonly inverse: "var(--xm-color-foreground-inverse)";
56
+ readonly placeholder: "var(--xm-color-foreground-placeholder)";
57
+ readonly primary: "var(--xm-color-foreground-primary)";
58
+ readonly subtle: "var(--xm-color-foreground-subtle)";
59
+ readonly success: "var(--xm-color-foreground-success)";
60
+ readonly warning: "var(--xm-color-foreground-warning)";
61
+ };
62
+ readonly gray: {
63
+ readonly '50': "var(--xm-color-gray-50)";
64
+ readonly '100': "var(--xm-color-gray-100)";
65
+ readonly '200': "var(--xm-color-gray-200)";
66
+ readonly '300': "var(--xm-color-gray-300)";
67
+ readonly '400': "var(--xm-color-gray-400)";
68
+ readonly '500': "var(--xm-color-gray-500)";
69
+ readonly '600': "var(--xm-color-gray-600)";
70
+ readonly '700': "var(--xm-color-gray-700)";
71
+ readonly '800': "var(--xm-color-gray-800)";
72
+ readonly '900': "var(--xm-color-gray-900)";
73
+ };
74
+ readonly green: {
75
+ readonly '50': "var(--xm-color-green-50)";
76
+ readonly '100': "var(--xm-color-green-100)";
77
+ readonly '200': "var(--xm-color-green-200)";
78
+ readonly '300': "var(--xm-color-green-300)";
79
+ readonly '400': "var(--xm-color-green-400)";
80
+ readonly '500': "var(--xm-color-green-500)";
81
+ readonly '600': "var(--xm-color-green-600)";
82
+ readonly '700': "var(--xm-color-green-700)";
83
+ readonly '800': "var(--xm-color-green-800)";
84
+ readonly '900': "var(--xm-color-green-900)";
85
+ };
86
+ readonly orange: {
87
+ readonly '50': "var(--xm-color-orange-50)";
88
+ readonly '100': "var(--xm-color-orange-100)";
89
+ readonly '200': "var(--xm-color-orange-200)";
90
+ readonly '300': "var(--xm-color-orange-300)";
91
+ readonly '400': "var(--xm-color-orange-400)";
92
+ readonly '500': "var(--xm-color-orange-500)";
93
+ readonly '600': "var(--xm-color-orange-600)";
94
+ readonly '700': "var(--xm-color-orange-700)";
95
+ readonly '800': "var(--xm-color-orange-800)";
96
+ readonly '900': "var(--xm-color-orange-900)";
97
+ };
98
+ readonly purple: {
99
+ readonly '50': "var(--xm-color-purple-50)";
100
+ readonly '100': "var(--xm-color-purple-100)";
101
+ readonly '200': "var(--xm-color-purple-200)";
102
+ readonly '300': "var(--xm-color-purple-300)";
103
+ readonly '400': "var(--xm-color-purple-400)";
104
+ readonly '500': "var(--xm-color-purple-500)";
105
+ readonly '600': "var(--xm-color-purple-600)";
106
+ readonly '700': "var(--xm-color-purple-700)";
107
+ readonly '800': "var(--xm-color-purple-800)";
108
+ readonly '900': "var(--xm-color-purple-900)";
109
+ };
110
+ readonly red: {
111
+ readonly '50': "var(--xm-color-red-50)";
112
+ readonly '100': "var(--xm-color-red-100)";
113
+ readonly '200': "var(--xm-color-red-200)";
114
+ readonly '300': "var(--xm-color-red-300)";
115
+ readonly '400': "var(--xm-color-red-400)";
116
+ readonly '500': "var(--xm-color-red-500)";
117
+ readonly '600': "var(--xm-color-red-600)";
118
+ readonly '700': "var(--xm-color-red-700)";
119
+ readonly '800': "var(--xm-color-red-800)";
120
+ readonly '900': "var(--xm-color-red-900)";
121
+ };
122
+ readonly yellow: {
123
+ readonly '50': "var(--xm-color-yellow-50)";
124
+ readonly '100': "var(--xm-color-yellow-100)";
125
+ readonly '200': "var(--xm-color-yellow-200)";
126
+ readonly '300': "var(--xm-color-yellow-300)";
127
+ readonly '400': "var(--xm-color-yellow-400)";
128
+ readonly '500': "var(--xm-color-yellow-500)";
129
+ readonly '600': "var(--xm-color-yellow-600)";
130
+ readonly '700': "var(--xm-color-yellow-700)";
131
+ readonly '800': "var(--xm-color-yellow-800)";
132
+ readonly '900': "var(--xm-color-yellow-900)";
133
+ };
134
+ readonly black: "var(--xm-color-black)";
135
+ readonly white: "var(--xm-color-white)";
136
+ };
137
+ readonly fontFamily: {
138
+ readonly base: "var(--xm-font-family-base)";
139
+ readonly mono: "var(--xm-font-family-mono)";
140
+ readonly sans: "var(--xm-font-family-sans)";
141
+ readonly serif: "var(--xm-font-family-serif)";
142
+ };
143
+ readonly fontSize: {
144
+ readonly '2xl': "var(--xm-font-size-2xl)";
145
+ readonly '2xs': "var(--xm-font-size-2xs)";
146
+ readonly '3xl': "var(--xm-font-size-3xl)";
147
+ readonly lg: "var(--xm-font-size-lg)";
148
+ readonly md: "var(--xm-font-size-md)";
149
+ readonly sm: "var(--xm-font-size-sm)";
150
+ readonly xl: "var(--xm-font-size-xl)";
151
+ readonly xs: "var(--xm-font-size-xs)";
152
+ };
153
+ readonly fontWeight: {
154
+ readonly bold: "var(--xm-font-weight-bold)";
155
+ readonly regular: "var(--xm-font-weight-regular)";
156
+ };
157
+ readonly lineHeight: {
158
+ readonly loose: "var(--xm-line-height-loose)";
159
+ readonly normal: "var(--xm-line-height-normal)";
160
+ readonly tight: "var(--xm-line-height-tight)";
161
+ };
162
+ readonly radius: {
163
+ readonly full: "var(--xm-radius-full)";
164
+ readonly lg: "var(--xm-radius-lg)";
165
+ readonly md: "var(--xm-radius-md)";
166
+ readonly none: "var(--xm-radius-none)";
167
+ readonly sm: "var(--xm-radius-sm)";
168
+ readonly xs: "var(--xm-radius-xs)";
169
+ };
170
+ readonly space: {
171
+ readonly '0': "var(--xm-space-0)";
172
+ readonly '2': "var(--xm-space-2)";
173
+ readonly '4': "var(--xm-space-4)";
174
+ readonly '6': "var(--xm-space-6)";
175
+ readonly '8': "var(--xm-space-8)";
176
+ readonly '12': "var(--xm-space-12)";
177
+ readonly '16': "var(--xm-space-16)";
178
+ readonly '20': "var(--xm-space-20)";
179
+ readonly '24': "var(--xm-space-24)";
180
+ readonly '32': "var(--xm-space-32)";
181
+ readonly '40': "var(--xm-space-40)";
182
+ readonly '48': "var(--xm-space-48)";
183
+ readonly '56': "var(--xm-space-56)";
184
+ readonly '64': "var(--xm-space-64)";
185
+ readonly '80': "var(--xm-space-80)";
186
+ readonly '128': "var(--xm-space-128)";
187
+ };
188
+ readonly zIndex: {
189
+ readonly banner: "var(--xm-z-index-banner)";
190
+ readonly base: "var(--xm-z-index-base)";
191
+ readonly docked: "var(--xm-z-index-docked)";
192
+ readonly dropdown: "var(--xm-z-index-dropdown)";
193
+ readonly modal: "var(--xm-z-index-modal)";
194
+ readonly overlay: "var(--xm-z-index-overlay)";
195
+ readonly popover: "var(--xm-z-index-popover)";
196
+ readonly sticky: "var(--xm-z-index-sticky)";
197
+ readonly toast: "var(--xm-z-index-toast)";
198
+ readonly tooltip: "var(--xm-z-index-tooltip)";
199
+ };
200
+ };
201
+ export type XmCssVars = typeof xmCssVars;
package/dist/tokens-ChJ8Sxzp.js ADDED
@@ -0,0 +1,202 @@
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 };
package/dist/tokens.css ADDED
@@ -0,0 +1,184 @@
1
+ /*
2
+ * xmart デザイン・トークン — CSS 変数（`--xm-*`）。
3
+ * 手動メンテ: packages/tokens/src/tokens/tokens.css
4
+ * DTCG 参考資料: packages/tokens/dtcg/
5
+ */
6
+ @layer xm-tokens {
7
+ :root {
8
+ /* -------------------------------------------------------------------------- */
9
+ /* Primitive tokens (xmart.primitive.tokens.json) */
10
+ /* -------------------------------------------------------------------------- */
11
+ /* -- color -- */
12
+ --xm-color-black: #222222;
13
+ --xm-color-blue-50: #eef8fd;
14
+ --xm-color-blue-100: #e4f2ff;
15
+ --xm-color-blue-200: #d8ecff;
16
+ --xm-color-blue-300: #c7e4ff;
17
+ --xm-color-blue-400: #a8d3ff;
18
+ --xm-color-blue-500: #7dbdff;
19
+ --xm-color-blue-600: #49a3ff;
20
+ --xm-color-blue-700: #116fff;
21
+ --xm-color-blue-800: #0050c4;
22
+ --xm-color-blue-900: #004489;
23
+ --xm-color-gray-50: #f4f5f6;
24
+ --xm-color-gray-100: #e9ecef;
25
+ --xm-color-gray-200: #d7dce2;
26
+ --xm-color-gray-300: #bcc4cc;
27
+ --xm-color-gray-400: #98a7b6;
28
+ --xm-color-gray-500: #7d8d9d;
29
+ --xm-color-gray-600: #65788a;
30
+ --xm-color-gray-700: #6b7580;
31
+ --xm-color-gray-800: #3b454e;
32
+ --xm-color-gray-900: #2c3339;
33
+ --xm-color-green-50: #fafff8;
34
+ --xm-color-green-100: #f3ffee;
35
+ --xm-color-green-200: #e6ffdc;
36
+ --xm-color-green-300: #ceffbc;
37
+ --xm-color-green-400: #b7f2a2;
38
+ --xm-color-green-500: #8fe86e;
39
+ --xm-color-green-600: #6acd45;
40
+ --xm-color-green-700: #2cab23;
41
+ --xm-color-green-800: #088000;
42
+ --xm-color-green-900: #0f6408;
43
+ --xm-color-orange-50: #fff5eb;
44
+ --xm-color-orange-100: #ffefe1;
45
+ --xm-color-orange-200: #ffe5ce;
46
+ --xm-color-orange-300: #f9d4b2;
47
+ --xm-color-orange-400: #ffc28a;
48
+ --xm-color-orange-500: #ffaa5c;
49
+ --xm-color-orange-600: #f38827;
50
+ --xm-color-orange-700: #f06000;
51
+ --xm-color-orange-800: #ae4e19;
52
+ --xm-color-orange-900: #8f3301;
53
+ --xm-color-purple-50: #fef9ff;
54
+ --xm-color-purple-100: #fceeff;
55
+ --xm-color-purple-200: #f7d8ff;
56
+ --xm-color-purple-300: #f2c1ff;
57
+ --xm-color-purple-400: #eb9eff;
58
+ --xm-color-purple-500: #e585fe;
59
+ --xm-color-purple-600: #d35af2;
60
+ --xm-color-purple-700: #a807d0;
61
+ --xm-color-purple-800: #86269e;
62
+ --xm-color-purple-900: #72078e;
63
+ --xm-color-red-50: #fff5f4;
64
+ --xm-color-red-100: #ffefed;
65
+ --xm-color-red-200: #ffe0de;
66
+ --xm-color-red-300: #ffcfcc;
67
+ --xm-color-red-400: #ffbeba;
68
+ --xm-color-red-500: #ff9892;
69
+ --xm-color-red-600: #ff685a;
70
+ --xm-color-red-700: #dc0c00;
71
+ --xm-color-red-800: #a10900;
72
+ --xm-color-red-900: #820000;
73
+ --xm-color-white: #ffffff;
74
+ --xm-color-yellow-50: #fffbf0;
75
+ --xm-color-yellow-100: #fff7dc;
76
+ --xm-color-yellow-200: #fff0c5;
77
+ --xm-color-yellow-300: #ffebaf;
78
+ --xm-color-yellow-400: #ffe491;
79
+ --xm-color-yellow-500: #ffdc75;
80
+ --xm-color-yellow-600: #ffcd37;
81
+ --xm-color-yellow-700: #ffbf00;
82
+ --xm-color-yellow-800: #cfa219;
83
+ --xm-color-yellow-900: #977614;
84
+ /* -- space -- */
85
+ --xm-space-0: 0px;
86
+ --xm-space-2: 2px;
87
+ --xm-space-4: 4px;
88
+ --xm-space-6: 6px;
89
+ --xm-space-8: 8px;
90
+ --xm-space-12: 12px;
91
+ --xm-space-16: 16px;
92
+ --xm-space-20: 20px;
93
+ --xm-space-24: 24px;
94
+ --xm-space-32: 32px;
95
+ --xm-space-40: 40px;
96
+ --xm-space-48: 48px;
97
+ --xm-space-56: 56px;
98
+ --xm-space-64: 64px;
99
+ --xm-space-80: 80px;
100
+ --xm-space-128: 128px;
101
+ /* -------------------------------------------------------------------------- */
102
+ /* Semantic tokens (xmart.semantic.tokens.json) */
103
+ /* -------------------------------------------------------------------------- */
104
+ /* -- color -- */
105
+ --xm-color-background-danger: var(--xm-color-red-100);
106
+ --xm-color-background-default: var(--xm-color-gray-50);
107
+ --xm-color-background-disabled: var(--xm-color-gray-100);
108
+ --xm-color-background-emphasis: var(--xm-color-gray-100);
109
+ --xm-color-background-info: var(--xm-color-blue-100);
110
+ --xm-color-background-primary-default: var(--xm-color-orange-700);
111
+ --xm-color-background-primary-muted: var(--xm-color-orange-50);
112
+ --xm-color-background-success: var(--xm-color-green-100);
113
+ --xm-color-background-supplier: var(--xm-color-blue-50);
114
+ --xm-color-background-warning: var(--xm-color-yellow-100);
115
+ --xm-color-background-white: var(--xm-color-white);
116
+ --xm-color-border-danger: var(--xm-color-red-700);
117
+ --xm-color-border-default: var(--xm-color-gray-300);
118
+ --xm-color-border-info: var(--xm-color-blue-700);
119
+ --xm-color-border-muted: var(--xm-color-gray-100);
120
+ --xm-color-border-primary: var(--xm-color-orange-700);
121
+ --xm-color-border-subtle: var(--xm-color-gray-200);
122
+ --xm-color-border-success: var(--xm-color-green-800);
123
+ --xm-color-border-warning: var(--xm-color-orange-800);
124
+ --xm-color-foreground-danger: var(--xm-color-red-700);
125
+ --xm-color-foreground-default: var(--xm-color-black);
126
+ --xm-color-foreground-disabled: var(--xm-color-gray-700);
127
+ --xm-color-foreground-info: var(--xm-color-blue-700);
128
+ --xm-color-foreground-inverse: var(--xm-color-white);
129
+ --xm-color-foreground-placeholder: var(--xm-color-gray-500);
130
+ --xm-color-foreground-primary: var(--xm-color-orange-700);
131
+ --xm-color-foreground-subtle: var(--xm-color-gray-800);
132
+ --xm-color-foreground-success: var(--xm-color-green-800);
133
+ --xm-color-foreground-warning: var(--xm-color-orange-800);
134
+ --xm-color-hover-default: var(--xm-color-gray-50);
135
+ --xm-color-hover-emphasis: var(--xm-color-gray-200);
136
+ --xm-color-hover-primary-default: var(--xm-color-orange-800);
137
+ --xm-color-hover-primary-muted: var(--xm-color-orange-50);
138
+ --xm-color-hover-primary-subtle: var(--xm-color-orange-300);
139
+ /* -- font-family -- */
140
+ --xm-font-family-base:
141
+ 'Hiragino Kaku Gothic Pro', 'Yu Gothic', Meiryo, -apple-system, BlinkMacSystemFont,
142
+ 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
143
+ --xm-font-family-mono:
144
+ 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', 'Source Code Pro', Menlo, Consolas,
145
+ 'DejaVu Sans Mono', monospace;
146
+ --xm-font-family-sans:
147
+ -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
148
+ --xm-font-family-serif: Georgia, 'Times New Roman', Times, serif;
149
+ /* -- font-size -- */
150
+ --xm-font-size-2xl: 24px;
151
+ --xm-font-size-2xs: 10px;
152
+ --xm-font-size-3xl: 32px;
153
+ --xm-font-size-lg: 18px;
154
+ --xm-font-size-md: 16px;
155
+ --xm-font-size-sm: 14px;
156
+ --xm-font-size-xl: 20px;
157
+ --xm-font-size-xs: 12px;
158
+ /* -- font-weight -- */
159
+ --xm-font-weight-bold: 700;
160
+ --xm-font-weight-regular: 400;
161
+ /* -- line-height -- */
162
+ --xm-line-height-loose: 1.75;
163
+ --xm-line-height-normal: 1.5;
164
+ --xm-line-height-tight: 1.3;
165
+ /* -- radius -- */
166
+ --xm-radius-full: 9999px;
167
+ --xm-radius-lg: 16px;
168
+ --xm-radius-md: 8px;
169
+ --xm-radius-none: 0px;
170
+ --xm-radius-sm: 6px;
171
+ --xm-radius-xs: 4px;
172
+ /* -- z-index -- */
173
+ --xm-z-index-banner: 1200;
174
+ --xm-z-index-base: 0;
175
+ --xm-z-index-docked: 10;
176
+ --xm-z-index-dropdown: 1000;
177
+ --xm-z-index-modal: 1400;
178
+ --xm-z-index-overlay: 1300;
179
+ --xm-z-index-popover: 1500;
180
+ --xm-z-index-sticky: 1100;
181
+ --xm-z-index-toast: 1700;
182
+ --xm-z-index-tooltip: 1800;
183
+ }
184
+ }
package/dist/vanilla-extract.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ /** Vanilla Extract 用: `createGlobalThemeContract` による型付き参照 */
2
+ export { xmVars } from './xm-vars.css';
3
+ export { xmTokensLayer, type XmCssVars } from './tokens/tokens';
package/dist/vanilla-extract.esm.js ADDED
@@ -0,0 +1,203 @@
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 ADDED
@@ -0,0 +1,202 @@
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
+ };
package/package.json ADDED
@@ -0,0 +1,34 @@
1
+ {
2
+ "name": "@xmart/xorder-ui-tokens",
3
+ "version": "0.1.2-dev.1",
4
+ "description": "DTCG 由来デザイン・トークン — Vanilla CSS（`tokens.css` / `xmCssVars`）と Vanilla Extract（`xmVars`）",
5
+ "files": [
6
+ "dist"
7
+ ],
8
+ "type": "module",
9
+ "sideEffects": [
10
+ "**/*.css"
11
+ ],
12
+ "main": "./dist/index.esm.js",
13
+ "module": "./dist/index.esm.js",
14
+ "types": "./dist/index.d.ts",
15
+ "exports": {
16
+ ".": {
17
+ "types": "./dist/index.d.ts",
18
+ "import": "./dist/index.esm.js"
19
+ },
20
+ "./tokens.css": "./dist/tokens.css",
21
+ "./vanilla-extract": {
22
+ "types": "./dist/vanilla-extract.d.ts",
23
+ "import": "./dist/vanilla-extract.esm.js"
24
+ }
25
+ },
26
+ "scripts": {
27
+ "prepublishOnly": "vp run build",
28
+ "prebuild": "rm -rf ./dist",
29
+ "build": "vp build"
30
+ },
31
+ "peerDependencies": {
32
+ "@vanilla-extract/css": "^1.20.0"
33
+ }
34
+ }