@cieloazul310/digital-go-pandacss-plugin 0.2.2 → 0.2.3
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/dist/index.cjs +768 -0
- package/dist/index.d.cts +6 -0
- package/dist/index.d.cts.map +1 -0
- package/dist/index.d.mts +5 -3
- package/dist/index.d.mts.map +1 -0
- package/dist/index.mjs +714 -669
- package/dist/index.mjs.map +1 -0
- package/package.json +13 -9
- package/dist/index.d.ts +0 -5
- package/dist/index.js +0 -727
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,768 @@
|
|
|
1
|
+
//#region rolldown:runtime
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
+
for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
11
|
+
key = keys[i];
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except) {
|
|
13
|
+
__defProp(to, key, {
|
|
14
|
+
get: ((k) => from[k]).bind(null, key),
|
|
15
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
return to;
|
|
21
|
+
};
|
|
22
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
23
|
+
value: mod,
|
|
24
|
+
enumerable: true
|
|
25
|
+
}) : target, mod));
|
|
26
|
+
|
|
27
|
+
//#endregion
|
|
28
|
+
let _pandacss_dev = require("@pandacss/dev");
|
|
29
|
+
let _pandacss_preset_panda = require("@pandacss/preset-panda");
|
|
30
|
+
let _cieloazul310_digital_go_pandacss_utils = require("@cieloazul310/digital-go-pandacss-utils");
|
|
31
|
+
let _digital_go_jp_design_tokens = require("@digital-go-jp/design-tokens");
|
|
32
|
+
_digital_go_jp_design_tokens = __toESM(_digital_go_jp_design_tokens);
|
|
33
|
+
|
|
34
|
+
//#region src/semanticTokens/colors.ts
|
|
35
|
+
const colors$1 = _pandacss_dev.defineSemanticTokens.colors({
|
|
36
|
+
keyColor: (0, _cieloazul310_digital_go_pandacss_utils.createKeyColor)("blue"),
|
|
37
|
+
ring: { value: "{colors.yellow.300}" }
|
|
38
|
+
});
|
|
39
|
+
var colors_default$1 = colors$1;
|
|
40
|
+
|
|
41
|
+
//#endregion
|
|
42
|
+
//#region src/semanticTokens/index.ts
|
|
43
|
+
var semanticTokens_default = (0, _pandacss_dev.defineSemanticTokens)({
|
|
44
|
+
colors: colors_default$1,
|
|
45
|
+
fontWeights: {
|
|
46
|
+
N: {
|
|
47
|
+
value: "{fontWeights.400}",
|
|
48
|
+
description: "400 (normal)"
|
|
49
|
+
},
|
|
50
|
+
B: {
|
|
51
|
+
value: "{fontWeights.700}",
|
|
52
|
+
description: "700 (bold)"
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
//#endregion
|
|
58
|
+
//#region src/textStyles/index.ts
|
|
59
|
+
const textStyle = Object.entries({
|
|
60
|
+
dsp: {
|
|
61
|
+
fontFamily: "body",
|
|
62
|
+
description: "Displayテキストは、主に冒頭で大きく掲出されるテキストやメッセージを伝えるヘッドコピーなど、視覚的なインパクトを強く与えたい場合に使用されます。",
|
|
63
|
+
variants: [
|
|
64
|
+
(
|
|
65
|
+
/** Display(Dsp) Bold */
|
|
66
|
+
{
|
|
67
|
+
fontSize: 64,
|
|
68
|
+
fontWeight: "B",
|
|
69
|
+
lineHeight: 140
|
|
70
|
+
}),
|
|
71
|
+
{
|
|
72
|
+
fontSize: 57,
|
|
73
|
+
fontWeight: "B",
|
|
74
|
+
lineHeight: 140
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
fontSize: 48,
|
|
78
|
+
fontWeight: "B",
|
|
79
|
+
lineHeight: 140
|
|
80
|
+
},
|
|
81
|
+
(
|
|
82
|
+
/** Display(Dsp) Normal */
|
|
83
|
+
{
|
|
84
|
+
fontSize: 64,
|
|
85
|
+
fontWeight: "N",
|
|
86
|
+
lineHeight: 140
|
|
87
|
+
}),
|
|
88
|
+
{
|
|
89
|
+
fontSize: 57,
|
|
90
|
+
fontWeight: "N",
|
|
91
|
+
lineHeight: 140
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
fontSize: 48,
|
|
95
|
+
fontWeight: "N",
|
|
96
|
+
lineHeight: 140
|
|
97
|
+
}
|
|
98
|
+
]
|
|
99
|
+
},
|
|
100
|
+
std: {
|
|
101
|
+
fontFamily: "body",
|
|
102
|
+
description: "Standardテキストは、ページの文書構造を形成する見出しや本文など、多くの要素において最も使用される普遍的なテキストスタイルです。",
|
|
103
|
+
variants: [
|
|
104
|
+
(
|
|
105
|
+
/** Standard(Std) Bold */
|
|
106
|
+
{
|
|
107
|
+
fontSize: 45,
|
|
108
|
+
fontWeight: "B",
|
|
109
|
+
lineHeight: 140
|
|
110
|
+
}),
|
|
111
|
+
{
|
|
112
|
+
fontSize: 36,
|
|
113
|
+
fontWeight: "B",
|
|
114
|
+
lineHeight: 140,
|
|
115
|
+
letterSpacing: .01
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
fontSize: 32,
|
|
119
|
+
fontWeight: "B",
|
|
120
|
+
lineHeight: 150,
|
|
121
|
+
letterSpacing: .01
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
fontSize: 28,
|
|
125
|
+
fontWeight: "B",
|
|
126
|
+
lineHeight: 150,
|
|
127
|
+
letterSpacing: .01
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
fontSize: 24,
|
|
131
|
+
fontWeight: "B",
|
|
132
|
+
lineHeight: 150,
|
|
133
|
+
letterSpacing: .02
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
fontSize: 22,
|
|
137
|
+
fontWeight: "B",
|
|
138
|
+
lineHeight: 150,
|
|
139
|
+
letterSpacing: .02
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
fontSize: 20,
|
|
143
|
+
fontWeight: "B",
|
|
144
|
+
lineHeight: 150,
|
|
145
|
+
letterSpacing: .02
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
fontSize: 18,
|
|
149
|
+
fontWeight: "B",
|
|
150
|
+
lineHeight: 160,
|
|
151
|
+
letterSpacing: .02
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
fontSize: 17,
|
|
155
|
+
fontWeight: "B",
|
|
156
|
+
lineHeight: 170,
|
|
157
|
+
letterSpacing: .02
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
fontSize: 16,
|
|
161
|
+
fontWeight: "B",
|
|
162
|
+
lineHeight: 170,
|
|
163
|
+
letterSpacing: .02
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
fontSize: 16,
|
|
167
|
+
fontWeight: "B",
|
|
168
|
+
lineHeight: 175,
|
|
169
|
+
letterSpacing: .02
|
|
170
|
+
},
|
|
171
|
+
(
|
|
172
|
+
/** Standard(Std) Normal */
|
|
173
|
+
{
|
|
174
|
+
fontSize: 45,
|
|
175
|
+
fontWeight: "N",
|
|
176
|
+
lineHeight: 140
|
|
177
|
+
}),
|
|
178
|
+
{
|
|
179
|
+
fontSize: 36,
|
|
180
|
+
fontWeight: "N",
|
|
181
|
+
lineHeight: 140,
|
|
182
|
+
letterSpacing: .01
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
fontSize: 32,
|
|
186
|
+
fontWeight: "N",
|
|
187
|
+
lineHeight: 150,
|
|
188
|
+
letterSpacing: .01
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
fontSize: 28,
|
|
192
|
+
fontWeight: "N",
|
|
193
|
+
lineHeight: 150,
|
|
194
|
+
letterSpacing: .01
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
fontSize: 26,
|
|
198
|
+
fontWeight: "N",
|
|
199
|
+
lineHeight: 150,
|
|
200
|
+
letterSpacing: .02
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
fontSize: 24,
|
|
204
|
+
fontWeight: "N",
|
|
205
|
+
lineHeight: 150,
|
|
206
|
+
letterSpacing: .02
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
fontSize: 22,
|
|
210
|
+
fontWeight: "N",
|
|
211
|
+
lineHeight: 150,
|
|
212
|
+
letterSpacing: .02
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
fontSize: 20,
|
|
216
|
+
fontWeight: "N",
|
|
217
|
+
lineHeight: 150,
|
|
218
|
+
letterSpacing: .02
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
fontSize: 18,
|
|
222
|
+
fontWeight: "N",
|
|
223
|
+
lineHeight: 160,
|
|
224
|
+
letterSpacing: .02
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
fontSize: 17,
|
|
228
|
+
fontWeight: "N",
|
|
229
|
+
lineHeight: 170,
|
|
230
|
+
letterSpacing: .02
|
|
231
|
+
},
|
|
232
|
+
{
|
|
233
|
+
fontSize: 16,
|
|
234
|
+
fontWeight: "N",
|
|
235
|
+
lineHeight: 170,
|
|
236
|
+
letterSpacing: .02
|
|
237
|
+
},
|
|
238
|
+
{
|
|
239
|
+
fontSize: 16,
|
|
240
|
+
fontWeight: "N",
|
|
241
|
+
lineHeight: 175,
|
|
242
|
+
letterSpacing: .02
|
|
243
|
+
}
|
|
244
|
+
]
|
|
245
|
+
},
|
|
246
|
+
dns: {
|
|
247
|
+
fontFamily: "body",
|
|
248
|
+
description: "Denseテキストは管理画面や業務システムなど、限られた画面領域での表示情報量を優先したテキストスタイルです。たとえば、データテーブル内での情報提示など、表示領域に制約がある場合のテキストスタイルとして使用します。",
|
|
249
|
+
variants: [
|
|
250
|
+
(
|
|
251
|
+
/** Dense(Dns) Bold */
|
|
252
|
+
{
|
|
253
|
+
fontSize: 17,
|
|
254
|
+
fontWeight: "B",
|
|
255
|
+
lineHeight: 130
|
|
256
|
+
}),
|
|
257
|
+
{
|
|
258
|
+
fontSize: 17,
|
|
259
|
+
fontWeight: "B",
|
|
260
|
+
lineHeight: 120
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
fontSize: 16,
|
|
264
|
+
fontWeight: "B",
|
|
265
|
+
lineHeight: 130
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
fontSize: 16,
|
|
269
|
+
fontWeight: "B",
|
|
270
|
+
lineHeight: 120
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
fontSize: 14,
|
|
274
|
+
fontWeight: "B",
|
|
275
|
+
lineHeight: 130
|
|
276
|
+
},
|
|
277
|
+
{
|
|
278
|
+
fontSize: 14,
|
|
279
|
+
fontWeight: "B",
|
|
280
|
+
lineHeight: 120
|
|
281
|
+
},
|
|
282
|
+
(
|
|
283
|
+
/** Dense(Dns) Normal */
|
|
284
|
+
{
|
|
285
|
+
fontSize: 17,
|
|
286
|
+
fontWeight: "N",
|
|
287
|
+
lineHeight: 130
|
|
288
|
+
}),
|
|
289
|
+
{
|
|
290
|
+
fontSize: 17,
|
|
291
|
+
fontWeight: "N",
|
|
292
|
+
lineHeight: 120
|
|
293
|
+
},
|
|
294
|
+
{
|
|
295
|
+
fontSize: 16,
|
|
296
|
+
fontWeight: "N",
|
|
297
|
+
lineHeight: 130
|
|
298
|
+
},
|
|
299
|
+
{
|
|
300
|
+
fontSize: 16,
|
|
301
|
+
fontWeight: "N",
|
|
302
|
+
lineHeight: 120
|
|
303
|
+
},
|
|
304
|
+
{
|
|
305
|
+
fontSize: 14,
|
|
306
|
+
fontWeight: "N",
|
|
307
|
+
lineHeight: 130
|
|
308
|
+
},
|
|
309
|
+
{
|
|
310
|
+
fontSize: 14,
|
|
311
|
+
fontWeight: "N",
|
|
312
|
+
lineHeight: 120
|
|
313
|
+
}
|
|
314
|
+
]
|
|
315
|
+
},
|
|
316
|
+
oln: {
|
|
317
|
+
fontFamily: "body",
|
|
318
|
+
description: "Onelineテキストは1行展開を前提として、主にUI要素への適用を想定したテキストスタイルです。行間の余白を最小限にすることでUIパーツに対するデザイン、及びコーディング実装調整コストの軽減を優先したデキストスタイルとなります。",
|
|
319
|
+
variants: [
|
|
320
|
+
(
|
|
321
|
+
/** Oneline(Oln) Bold */
|
|
322
|
+
{
|
|
323
|
+
fontSize: 17,
|
|
324
|
+
fontWeight: "B",
|
|
325
|
+
lineHeight: 100
|
|
326
|
+
}),
|
|
327
|
+
{
|
|
328
|
+
fontSize: 16,
|
|
329
|
+
fontWeight: "B",
|
|
330
|
+
lineHeight: 100
|
|
331
|
+
},
|
|
332
|
+
{
|
|
333
|
+
fontSize: 14,
|
|
334
|
+
fontWeight: "B",
|
|
335
|
+
lineHeight: 100
|
|
336
|
+
},
|
|
337
|
+
(
|
|
338
|
+
/** Oneline(Oln) Normal */
|
|
339
|
+
{
|
|
340
|
+
fontSize: 17,
|
|
341
|
+
fontWeight: "N",
|
|
342
|
+
lineHeight: 100
|
|
343
|
+
}),
|
|
344
|
+
{
|
|
345
|
+
fontSize: 16,
|
|
346
|
+
fontWeight: "N",
|
|
347
|
+
lineHeight: 100
|
|
348
|
+
},
|
|
349
|
+
{
|
|
350
|
+
fontSize: 14,
|
|
351
|
+
fontWeight: "N",
|
|
352
|
+
lineHeight: 100
|
|
353
|
+
}
|
|
354
|
+
]
|
|
355
|
+
},
|
|
356
|
+
mono: {
|
|
357
|
+
fontFamily: "mono",
|
|
358
|
+
description: "Monoテキストはコード系コンテンツへの適用を想定したテキストスタイルです。文字・単語レベルの可読性を優先したモノスペース(等幅フォント)を使用します。",
|
|
359
|
+
variants: [
|
|
360
|
+
(
|
|
361
|
+
/** Mono Bold */
|
|
362
|
+
{
|
|
363
|
+
fontSize: 17,
|
|
364
|
+
fontWeight: "B",
|
|
365
|
+
lineHeight: 150
|
|
366
|
+
}),
|
|
367
|
+
{
|
|
368
|
+
fontSize: 16,
|
|
369
|
+
fontWeight: "B",
|
|
370
|
+
lineHeight: 150
|
|
371
|
+
},
|
|
372
|
+
{
|
|
373
|
+
fontSize: 14,
|
|
374
|
+
fontWeight: "B",
|
|
375
|
+
lineHeight: 150
|
|
376
|
+
},
|
|
377
|
+
(
|
|
378
|
+
/** Oneline(Oln) Normal */
|
|
379
|
+
{
|
|
380
|
+
fontSize: 17,
|
|
381
|
+
fontWeight: "N",
|
|
382
|
+
lineHeight: 150
|
|
383
|
+
}),
|
|
384
|
+
{
|
|
385
|
+
fontSize: 16,
|
|
386
|
+
fontWeight: "N",
|
|
387
|
+
lineHeight: 150
|
|
388
|
+
},
|
|
389
|
+
{
|
|
390
|
+
fontSize: 14,
|
|
391
|
+
fontWeight: "N",
|
|
392
|
+
lineHeight: 150
|
|
393
|
+
}
|
|
394
|
+
]
|
|
395
|
+
}
|
|
396
|
+
});
|
|
397
|
+
const map = /* @__PURE__ */ new Map();
|
|
398
|
+
textStyle.forEach(([key, { fontFamily, description, variants }]) => {
|
|
399
|
+
variants.forEach(({ fontSize, fontWeight, lineHeight, letterSpacing }) => {
|
|
400
|
+
map.set(`${key}-${fontSize}${fontWeight}-${lineHeight}`, {
|
|
401
|
+
value: {
|
|
402
|
+
fontFamily,
|
|
403
|
+
fontSize,
|
|
404
|
+
fontWeight,
|
|
405
|
+
lineHeight,
|
|
406
|
+
letterSpacing: letterSpacing ? `${letterSpacing}em` : void 0
|
|
407
|
+
},
|
|
408
|
+
description
|
|
409
|
+
});
|
|
410
|
+
});
|
|
411
|
+
});
|
|
412
|
+
var textStyles_default = (0, _pandacss_dev.defineTextStyles)(Object.fromEntries(map));
|
|
413
|
+
|
|
414
|
+
//#endregion
|
|
415
|
+
//#region src/tokens/colors.ts
|
|
416
|
+
function mapColorScale(tokenObj, [primary, secondary, tertiary, bg]) {
|
|
417
|
+
const keyMap = {
|
|
418
|
+
primary: {
|
|
419
|
+
DEFAULT: { value: tokenObj[primary]?.$value },
|
|
420
|
+
100: { value: tokenObj[Math.min(primary + 100, 1200)]?.$value },
|
|
421
|
+
200: { value: tokenObj[Math.min(primary + 200, 1200)]?.$value },
|
|
422
|
+
300: { value: tokenObj[Math.min(primary + 300, 1200)]?.$value }
|
|
423
|
+
},
|
|
424
|
+
secondary: { value: tokenObj[secondary]?.$value },
|
|
425
|
+
tertiary: { value: tokenObj[tertiary]?.$value },
|
|
426
|
+
bg: { value: tokenObj[bg]?.$value }
|
|
427
|
+
};
|
|
428
|
+
const shadesMap = Object.fromEntries(Object.entries(tokenObj).filter(([_, v]) => typeof v.$value === "string").map(([k, v]) => [k, { value: v.$value }]));
|
|
429
|
+
return {
|
|
430
|
+
...keyMap,
|
|
431
|
+
...shadesMap
|
|
432
|
+
};
|
|
433
|
+
}
|
|
434
|
+
const colors = _pandacss_dev.defineTokens.colors({
|
|
435
|
+
white: { value: _digital_go_jp_design_tokens.default.Color.Neutral.White.$value },
|
|
436
|
+
black: { value: _digital_go_jp_design_tokens.default.Color.Neutral.Black.$value },
|
|
437
|
+
blue: mapColorScale(_digital_go_jp_design_tokens.default.Color.Primitive.Blue, [
|
|
438
|
+
900,
|
|
439
|
+
700,
|
|
440
|
+
1e3,
|
|
441
|
+
50
|
|
442
|
+
]),
|
|
443
|
+
"light-blue": mapColorScale(_digital_go_jp_design_tokens.default.Color.Primitive.LightBlue, [
|
|
444
|
+
800,
|
|
445
|
+
600,
|
|
446
|
+
1e3,
|
|
447
|
+
50
|
|
448
|
+
]),
|
|
449
|
+
cyan: mapColorScale(_digital_go_jp_design_tokens.default.Color.Primitive.Cyan, [
|
|
450
|
+
800,
|
|
451
|
+
600,
|
|
452
|
+
1e3,
|
|
453
|
+
50
|
|
454
|
+
]),
|
|
455
|
+
green: mapColorScale(_digital_go_jp_design_tokens.default.Color.Primitive.Green, [
|
|
456
|
+
800,
|
|
457
|
+
600,
|
|
458
|
+
1e3,
|
|
459
|
+
50
|
|
460
|
+
]),
|
|
461
|
+
lime: mapColorScale(_digital_go_jp_design_tokens.default.Color.Primitive.Lime, [
|
|
462
|
+
900,
|
|
463
|
+
700,
|
|
464
|
+
1e3,
|
|
465
|
+
50
|
|
466
|
+
]),
|
|
467
|
+
yellow: mapColorScale(_digital_go_jp_design_tokens.default.Color.Primitive.Yellow, [
|
|
468
|
+
900,
|
|
469
|
+
700,
|
|
470
|
+
1e3,
|
|
471
|
+
50
|
|
472
|
+
]),
|
|
473
|
+
orange: mapColorScale(_digital_go_jp_design_tokens.default.Color.Primitive.Orange, [
|
|
474
|
+
800,
|
|
475
|
+
600,
|
|
476
|
+
1100,
|
|
477
|
+
50
|
|
478
|
+
]),
|
|
479
|
+
red: mapColorScale(_digital_go_jp_design_tokens.default.Color.Primitive.Red, [
|
|
480
|
+
800,
|
|
481
|
+
600,
|
|
482
|
+
1e3,
|
|
483
|
+
50
|
|
484
|
+
]),
|
|
485
|
+
magenta: mapColorScale(_digital_go_jp_design_tokens.default.Color.Primitive.Magenta, [
|
|
486
|
+
700,
|
|
487
|
+
500,
|
|
488
|
+
1e3,
|
|
489
|
+
50
|
|
490
|
+
]),
|
|
491
|
+
purple: mapColorScale(_digital_go_jp_design_tokens.default.Color.Primitive.Purple, [
|
|
492
|
+
700,
|
|
493
|
+
500,
|
|
494
|
+
1e3,
|
|
495
|
+
50
|
|
496
|
+
]),
|
|
497
|
+
"solid-gray": {
|
|
498
|
+
50: { value: _digital_go_jp_design_tokens.default.Color.Neutral.SolidGray[50].$value },
|
|
499
|
+
100: { value: _digital_go_jp_design_tokens.default.Color.Neutral.SolidGray[100].$value },
|
|
500
|
+
200: { value: _digital_go_jp_design_tokens.default.Color.Neutral.SolidGray[200].$value },
|
|
501
|
+
300: { value: _digital_go_jp_design_tokens.default.Color.Neutral.SolidGray[300].$value },
|
|
502
|
+
400: { value: _digital_go_jp_design_tokens.default.Color.Neutral.SolidGray[400].$value },
|
|
503
|
+
420: { value: _digital_go_jp_design_tokens.default.Color.Neutral.SolidGray[420].$value },
|
|
504
|
+
500: { value: _digital_go_jp_design_tokens.default.Color.Neutral.SolidGray[500].$value },
|
|
505
|
+
536: { value: _digital_go_jp_design_tokens.default.Color.Neutral.SolidGray[536].$value },
|
|
506
|
+
600: { value: _digital_go_jp_design_tokens.default.Color.Neutral.SolidGray[600].$value },
|
|
507
|
+
700: { value: _digital_go_jp_design_tokens.default.Color.Neutral.SolidGray[700].$value },
|
|
508
|
+
800: { value: _digital_go_jp_design_tokens.default.Color.Neutral.SolidGray[800].$value },
|
|
509
|
+
900: { value: _digital_go_jp_design_tokens.default.Color.Neutral.SolidGray[900].$value },
|
|
510
|
+
primary: {
|
|
511
|
+
DEFAULT: { value: _digital_go_jp_design_tokens.default.Color.Neutral.SolidGray[700].$value },
|
|
512
|
+
100: { value: _digital_go_jp_design_tokens.default.Color.Neutral.SolidGray[800].$value },
|
|
513
|
+
200: { value: _digital_go_jp_design_tokens.default.Color.Neutral.SolidGray[900].$value },
|
|
514
|
+
300: { value: _digital_go_jp_design_tokens.default.Color.Neutral.Black.$value }
|
|
515
|
+
},
|
|
516
|
+
secondary: { value: _digital_go_jp_design_tokens.default.Color.Neutral.SolidGray[536].$value },
|
|
517
|
+
tertiary: { value: _digital_go_jp_design_tokens.default.Color.Neutral.SolidGray[420].$value },
|
|
518
|
+
bg: { value: _digital_go_jp_design_tokens.default.Color.Neutral.SolidGray[50].$value }
|
|
519
|
+
},
|
|
520
|
+
success: {
|
|
521
|
+
1: {
|
|
522
|
+
value: _digital_go_jp_design_tokens.default.Color.Semantic.Success[1].$value,
|
|
523
|
+
description: "成功、安全、完了などを意味するカラー"
|
|
524
|
+
},
|
|
525
|
+
2: {
|
|
526
|
+
value: _digital_go_jp_design_tokens.default.Color.Semantic.Success[2].$value,
|
|
527
|
+
description: "成功、安全、完了などを意味するカラー"
|
|
528
|
+
}
|
|
529
|
+
},
|
|
530
|
+
error: {
|
|
531
|
+
1: {
|
|
532
|
+
value: _digital_go_jp_design_tokens.default.Color.Semantic.Error[1].$value,
|
|
533
|
+
description: "失敗やエラーのほか、危険情報や制約条件の提示など注意喚起を意味するカラー"
|
|
534
|
+
},
|
|
535
|
+
2: {
|
|
536
|
+
value: _digital_go_jp_design_tokens.default.Color.Semantic.Error[2].$value,
|
|
537
|
+
description: "失敗やエラーのほか、危険情報や制約条件の提示など注意喚起を意味するカラー"
|
|
538
|
+
}
|
|
539
|
+
},
|
|
540
|
+
warning: {
|
|
541
|
+
yellow: {
|
|
542
|
+
1: {
|
|
543
|
+
value: _digital_go_jp_design_tokens.default.Color.Semantic.Warning.Yellow[1].$value,
|
|
544
|
+
description: "警告や禁止事項などを意味するカラー"
|
|
545
|
+
},
|
|
546
|
+
2: {
|
|
547
|
+
value: _digital_go_jp_design_tokens.default.Color.Semantic.Warning.Yellow[2].$value,
|
|
548
|
+
description: "警告や禁止事項などを意味するカラー"
|
|
549
|
+
}
|
|
550
|
+
},
|
|
551
|
+
orange: {
|
|
552
|
+
1: {
|
|
553
|
+
value: _digital_go_jp_design_tokens.default.Color.Semantic.Warning.Orange[1].$value,
|
|
554
|
+
description: "警告や禁止事項などを意味するカラー"
|
|
555
|
+
},
|
|
556
|
+
2: {
|
|
557
|
+
value: _digital_go_jp_design_tokens.default.Color.Semantic.Warning.Orange[2].$value,
|
|
558
|
+
description: "警告や禁止事項などを意味するカラー"
|
|
559
|
+
}
|
|
560
|
+
}
|
|
561
|
+
},
|
|
562
|
+
focus: {
|
|
563
|
+
yellow: { value: _digital_go_jp_design_tokens.default.Color.Primitive.Yellow[700].$value },
|
|
564
|
+
blue: { value: _digital_go_jp_design_tokens.default.Color.Primitive.LightBlue[700].$value }
|
|
565
|
+
}
|
|
566
|
+
});
|
|
567
|
+
var colors_default = colors;
|
|
568
|
+
|
|
569
|
+
//#endregion
|
|
570
|
+
//#region src/tokens/typography.ts
|
|
571
|
+
const fonts = _pandacss_dev.defineTokens.fonts({
|
|
572
|
+
body: { value: [
|
|
573
|
+
"Noto Sans JP",
|
|
574
|
+
"-apple-system",
|
|
575
|
+
"BlinkMacSystemFont",
|
|
576
|
+
"sans-serif"
|
|
577
|
+
] },
|
|
578
|
+
mono: { value: ["Noto Sans Mono", "monospace"] }
|
|
579
|
+
});
|
|
580
|
+
const fontSizes = _pandacss_dev.defineTokens.fontSizes({
|
|
581
|
+
"64": {
|
|
582
|
+
value: _digital_go_jp_design_tokens.default.FontSize[64].$value,
|
|
583
|
+
description: "視覚的なインパクトが必要なデザイン要素としての文字サイズ。"
|
|
584
|
+
},
|
|
585
|
+
"57": {
|
|
586
|
+
value: _digital_go_jp_design_tokens.default.FontSize[57].$value,
|
|
587
|
+
description: "視覚的なインパクトが必要なデザイン要素としての文字サイズ。"
|
|
588
|
+
},
|
|
589
|
+
"48": {
|
|
590
|
+
value: _digital_go_jp_design_tokens.default.FontSize[48].$value,
|
|
591
|
+
description: "視覚的なインパクトが必要なデザイン要素としての文字サイズ。"
|
|
592
|
+
},
|
|
593
|
+
"45": {
|
|
594
|
+
value: _digital_go_jp_design_tokens.default.FontSize[45].$value,
|
|
595
|
+
description: "読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。なお、本文やUIにおいては16 CSS px以上が基準値となります。"
|
|
596
|
+
},
|
|
597
|
+
"36": {
|
|
598
|
+
value: _digital_go_jp_design_tokens.default.FontSize[36].$value,
|
|
599
|
+
description: "読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。なお、本文やUIにおいては16 CSS px以上が基準値となります。"
|
|
600
|
+
},
|
|
601
|
+
"32": {
|
|
602
|
+
value: _digital_go_jp_design_tokens.default.FontSize[32].$value,
|
|
603
|
+
description: "読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。なお、本文やUIにおいては16 CSS px以上が基準値となります。"
|
|
604
|
+
},
|
|
605
|
+
"28": {
|
|
606
|
+
value: _digital_go_jp_design_tokens.default.FontSize[28].$value,
|
|
607
|
+
description: "読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。なお、本文やUIにおいては16 CSS px以上が基準値となります。"
|
|
608
|
+
},
|
|
609
|
+
"24": {
|
|
610
|
+
value: _digital_go_jp_design_tokens.default.FontSize[24].$value,
|
|
611
|
+
description: "読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。なお、本文やUIにおいては16 CSS px以上が基準値となります。"
|
|
612
|
+
},
|
|
613
|
+
"22": {
|
|
614
|
+
value: _digital_go_jp_design_tokens.default.FontSize[22].$value,
|
|
615
|
+
description: "読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。なお、本文やUIにおいては16 CSS px以上が基準値となります。"
|
|
616
|
+
},
|
|
617
|
+
"20": {
|
|
618
|
+
value: _digital_go_jp_design_tokens.default.FontSize[20].$value,
|
|
619
|
+
description: "読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。なお、本文やUIにおいては16 CSS px以上が基準値となります。"
|
|
620
|
+
},
|
|
621
|
+
"18": {
|
|
622
|
+
value: _digital_go_jp_design_tokens.default.FontSize[18].$value,
|
|
623
|
+
description: "読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。なお、本文やUIにおいては16 CSS px以上が基準値となります。"
|
|
624
|
+
},
|
|
625
|
+
"17": {
|
|
626
|
+
value: _digital_go_jp_design_tokens.default.FontSize[17].$value,
|
|
627
|
+
description: "読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。なお、本文やUIにおいては16 CSS px以上が基準値となります。"
|
|
628
|
+
},
|
|
629
|
+
"16": {
|
|
630
|
+
value: _digital_go_jp_design_tokens.default.FontSize[16].$value,
|
|
631
|
+
description: "読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。なお、本文やUIにおいては16 CSS px以上が基準値となります。"
|
|
632
|
+
},
|
|
633
|
+
"14": {
|
|
634
|
+
value: _digital_go_jp_design_tokens.default.FontSize[14].$value,
|
|
635
|
+
description: "基本的には使用しません。フッター要素などコンテンツに付随する情報や、UIやコンテンツを構成する際の領域的な制約がある場合のように標準的な文字サイズ(16 CSS px以上)の使用が難しいケースにおいてのみ使用される文字サイズです。なお、14 CSS px未満の大きさの使用は原則として許容されません。"
|
|
636
|
+
}
|
|
637
|
+
});
|
|
638
|
+
const fontWeights = _pandacss_dev.defineTokens.fontWeights({
|
|
639
|
+
"400": { value: _digital_go_jp_design_tokens.default.FontWeight[400].$value },
|
|
640
|
+
"700": { value: _digital_go_jp_design_tokens.default.FontWeight[700].$value }
|
|
641
|
+
});
|
|
642
|
+
const lineHeights = _pandacss_dev.defineTokens.lineHeights({
|
|
643
|
+
"100": {
|
|
644
|
+
value: _digital_go_jp_design_tokens.default.LineHeight[100].$value,
|
|
645
|
+
description: "主にボタンなど、コンポーネント内で使用されるワンラインのテキストで上下の余白を持っていない行間"
|
|
646
|
+
},
|
|
647
|
+
"120": {
|
|
648
|
+
value: _digital_go_jp_design_tokens.default.LineHeight[120].$value,
|
|
649
|
+
description: "主に管理画面や業務システムの画面等で、膨大な情報を一覧表示したりなど、限られた画面領域での表示情報量を最優先した行間"
|
|
650
|
+
},
|
|
651
|
+
"130": {
|
|
652
|
+
value: _digital_go_jp_design_tokens.default.LineHeight[130].$value,
|
|
653
|
+
description: "主に管理画面や業務システムの画面等で使用する、表示情報量を優先した行間"
|
|
654
|
+
},
|
|
655
|
+
"140": {
|
|
656
|
+
value: _digital_go_jp_design_tokens.default.LineHeight[140].$value,
|
|
657
|
+
description: "見出しなど、やや大きな文字に使用される行間"
|
|
658
|
+
},
|
|
659
|
+
"150": {
|
|
660
|
+
value: _digital_go_jp_design_tokens.default.LineHeight[150].$value,
|
|
661
|
+
description: "一般的なウェブサイトの本文や見出しで使用される行間(本文の行間としては最低限度)"
|
|
662
|
+
},
|
|
663
|
+
"160": {
|
|
664
|
+
value: _digital_go_jp_design_tokens.default.LineHeight[160].$value,
|
|
665
|
+
description: "一般的なウェブサイトの本文で使用される行間"
|
|
666
|
+
},
|
|
667
|
+
"170": {
|
|
668
|
+
value: _digital_go_jp_design_tokens.default.LineHeight[170].$value,
|
|
669
|
+
description: "一般的なウェブサイトの本文で使用する、心理的負荷の軽減を考慮した行間"
|
|
670
|
+
},
|
|
671
|
+
"175": {
|
|
672
|
+
value: _digital_go_jp_design_tokens.default.LineHeight[175].$value,
|
|
673
|
+
description: "一般的なウェブサイトの本文で使用する、心理的負荷の軽減を考慮した行間。採用するグリッド幅やフォントサイズに応じて170%と使い分ける"
|
|
674
|
+
}
|
|
675
|
+
});
|
|
676
|
+
|
|
677
|
+
//#endregion
|
|
678
|
+
//#region src/tokens/index.ts
|
|
679
|
+
const { spacing, sizes } = _pandacss_preset_panda.preset.theme.tokens;
|
|
680
|
+
var tokens_default = (0, _pandacss_dev.defineTokens)({
|
|
681
|
+
colors: colors_default,
|
|
682
|
+
fonts,
|
|
683
|
+
fontSizes,
|
|
684
|
+
fontWeights,
|
|
685
|
+
lineHeights,
|
|
686
|
+
radii: {
|
|
687
|
+
"4": { value: _digital_go_jp_design_tokens.default.BorderRadius[4].$value },
|
|
688
|
+
"6": { value: _digital_go_jp_design_tokens.default.BorderRadius[6].$value },
|
|
689
|
+
"8": { value: _digital_go_jp_design_tokens.default.BorderRadius[8].$value },
|
|
690
|
+
"12": { value: _digital_go_jp_design_tokens.default.BorderRadius[12].$value },
|
|
691
|
+
"16": { value: _digital_go_jp_design_tokens.default.BorderRadius[16].$value },
|
|
692
|
+
"24": { value: _digital_go_jp_design_tokens.default.BorderRadius[24].$value },
|
|
693
|
+
"32": { value: _digital_go_jp_design_tokens.default.BorderRadius[32].$value },
|
|
694
|
+
full: { value: _digital_go_jp_design_tokens.default.BorderRadius.Full.$value }
|
|
695
|
+
},
|
|
696
|
+
shadows: {
|
|
697
|
+
"1": { value: _digital_go_jp_design_tokens.default.Elevation[1].$value },
|
|
698
|
+
"2": { value: _digital_go_jp_design_tokens.default.Elevation[2].$value },
|
|
699
|
+
"3": { value: _digital_go_jp_design_tokens.default.Elevation[3].$value },
|
|
700
|
+
"4": { value: _digital_go_jp_design_tokens.default.Elevation[4].$value },
|
|
701
|
+
"5": { value: _digital_go_jp_design_tokens.default.Elevation[5].$value },
|
|
702
|
+
"6": { value: _digital_go_jp_design_tokens.default.Elevation[6].$value },
|
|
703
|
+
"7": { value: _digital_go_jp_design_tokens.default.Elevation[7].$value },
|
|
704
|
+
"8": { value: _digital_go_jp_design_tokens.default.Elevation[8].$value }
|
|
705
|
+
},
|
|
706
|
+
sizes,
|
|
707
|
+
spacing
|
|
708
|
+
});
|
|
709
|
+
|
|
710
|
+
//#endregion
|
|
711
|
+
//#region src/utilities/index.ts
|
|
712
|
+
const utilities = {
|
|
713
|
+
borderInset: (0, _pandacss_dev.defineUtility)({
|
|
714
|
+
deprecated: true,
|
|
715
|
+
className: "border-inset",
|
|
716
|
+
values: [
|
|
717
|
+
"xs",
|
|
718
|
+
"sm",
|
|
719
|
+
"md",
|
|
720
|
+
"lg",
|
|
721
|
+
"xl"
|
|
722
|
+
],
|
|
723
|
+
transform(value, { token }) {
|
|
724
|
+
return { boxShadow: `inset 0 0 0 ${(() => {
|
|
725
|
+
if (value === "xs") return "1px";
|
|
726
|
+
if (value === "sm") return "2px";
|
|
727
|
+
if (value === "lg") return "4px";
|
|
728
|
+
if (value === "xl") return "8px";
|
|
729
|
+
return "3px";
|
|
730
|
+
})()} ${token("colors.ring")}` };
|
|
731
|
+
}
|
|
732
|
+
}),
|
|
733
|
+
focusBox: (0, _pandacss_dev.defineUtility)({
|
|
734
|
+
className: "focus-box",
|
|
735
|
+
values: "borderWidths",
|
|
736
|
+
transform(value, { token }) {
|
|
737
|
+
return { boxShadow: `0 0 0 ${value} ${token("colors.ring")}` };
|
|
738
|
+
}
|
|
739
|
+
})
|
|
740
|
+
};
|
|
741
|
+
var utilities_default = utilities;
|
|
742
|
+
|
|
743
|
+
//#endregion
|
|
744
|
+
//#region src/globalCss.ts
|
|
745
|
+
var globalCss_default = (0, _pandacss_dev.defineGlobalStyles)({
|
|
746
|
+
html: { fontSmoothing: "auto" },
|
|
747
|
+
"h1, h2, h3, h4, h5, h6": { textWrap: "auto" }
|
|
748
|
+
});
|
|
749
|
+
|
|
750
|
+
//#endregion
|
|
751
|
+
//#region src/index.ts
|
|
752
|
+
const { breakpoints, keyframes } = _pandacss_preset_panda.preset.theme;
|
|
753
|
+
const preset = (0, _pandacss_dev.definePreset)({
|
|
754
|
+
name: "digital-go",
|
|
755
|
+
theme: { extend: {
|
|
756
|
+
breakpoints,
|
|
757
|
+
textStyles: textStyles_default,
|
|
758
|
+
semanticTokens: semanticTokens_default,
|
|
759
|
+
tokens: tokens_default,
|
|
760
|
+
keyframes
|
|
761
|
+
} },
|
|
762
|
+
utilities: utilities_default,
|
|
763
|
+
globalCss: globalCss_default
|
|
764
|
+
});
|
|
765
|
+
var src_default = preset;
|
|
766
|
+
|
|
767
|
+
//#endregion
|
|
768
|
+
module.exports = src_default;
|