@nadicodeai/design-system 12.1.82 → 12.1.84

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 (8) hide show
  1. package/DESIGN.md +1786 -238
  2. package/dist/css/host.css +289 -57
  3. package/dist/css/index.css +477 -70
  4. package/dist/css/tokens.css +261 -54
  5. package/dist/tailwind/nadicode.tailwind.json +242 -39
  6. package/dist/tokens/nadicode.dtcg-resolved.json +944 -137
  7. package/dist/tokens/nadicode.dtcg.json +843 -132
  8. package/package.json +1 -1
package/dist/tailwind/nadicode.tailwind.json CHANGED
@@ -7,12 +7,12 @@
7
7
  "action-hover": "#2e2e2e",
8
8
  "action-active": "#000000",
9
9
  "ink": "#111111",
10
- "body": "#444444",
10
+ "body": "#666666",
11
11
  "muted": "#6b6b6b",
12
12
  "canvas": "#ffffff",
13
13
  "canvas-soft": "#fafafa",
14
14
  "canvas-soft-2": "#f5f5f5",
15
- "material-workspace": "#f7f7f7",
15
+ "material-workspace": "#fafafa",
16
16
  "material-solid": "#ffffff",
17
17
  "material-resting": "#ffffff",
18
18
  "material-raised": "#ffffff",
@@ -22,9 +22,9 @@
22
22
  "input": "#757575",
23
23
  "focus-ring": "#111111",
24
24
  "scrim": "#000000",
25
- "link": "#00713d",
26
- "link-deep": "#00522c",
27
- "link-bg-soft": "#c6efd9",
25
+ "link": "#0068d6",
26
+ "link-deep": "#0055b3",
27
+ "link-bg-soft": "#ebf5ff",
28
28
  "info": "#1e3cff",
29
29
  "info-soft": "#e8ecff",
30
30
  "info-deep": "#0e1d8a",
@@ -70,7 +70,7 @@
70
70
  "dark-material-floating": "#111111",
71
71
  "dark-material-modal": "#111111",
72
72
  "dark-ink": "#ededed",
73
- "dark-body": "#c7c7c7",
73
+ "dark-body": "#a1a1a1",
74
74
  "dark-muted": "#9e9e9e",
75
75
  "dark-line": "#262626",
76
76
  "dark-input": "#747474",
@@ -79,9 +79,9 @@
79
79
  "dark-action-foreground": "#0a0a0a",
80
80
  "dark-action-hover": "#d6d6d6",
81
81
  "dark-action-active": "#c7c7c7",
82
- "dark-link": "#4ecf8c",
83
- "dark-link-deep": "#93e3b8",
84
- "dark-link-bg-soft": "#00351c",
82
+ "dark-link": "#52a8ff",
83
+ "dark-link-deep": "#8ec8ff",
84
+ "dark-link-bg-soft": "#0f223d",
85
85
  "dark-focus-ring": "#ededed",
86
86
  "dark-scrim": "#000000",
87
87
  "dark-error": "#f5a3a1",
@@ -110,15 +110,33 @@
110
110
  "dark-chart-3": "#ffd866",
111
111
  "dark-chart-4": "#e8615f",
112
112
  "dark-chart-5": "#33d1cb",
113
- "dark-chart-6": "#9575cd"
113
+ "dark-chart-6": "#9575cd",
114
+ "category-teal-soft": "#e0f7f4",
115
+ "category-teal-deep": "#08665e",
116
+ "dark-category-teal-soft": "#062b28",
117
+ "dark-category-teal-deep": "#75e0d5",
118
+ "category-purple-soft": "#f3e8ff",
119
+ "category-purple-deep": "#7525a7",
120
+ "dark-category-purple-soft": "#2b143e",
121
+ "dark-category-purple-deep": "#d5a3f7",
122
+ "category-pink-soft": "#fce7f1",
123
+ "category-pink-deep": "#a32464",
124
+ "dark-category-pink-soft": "#381525",
125
+ "dark-category-pink-deep": "#f7a3cf"
114
126
  },
115
127
  "fontFamily": {
116
128
  "display-xl": [
117
129
  "Geist, Inter, system-ui, -apple-system, sans-serif"
118
130
  ],
131
+ "display-wide": [
132
+ "Geist, Inter, system-ui, -apple-system, sans-serif"
133
+ ],
119
134
  "display-lg": [
120
135
  "Geist, Inter, system-ui, -apple-system, sans-serif"
121
136
  ],
137
+ "display-section": [
138
+ "Geist, Inter, system-ui, -apple-system, sans-serif"
139
+ ],
122
140
  "display-md": [
123
141
  "Geist, Inter, system-ui, -apple-system, sans-serif"
124
142
  ],
@@ -131,55 +149,116 @@
131
149
  "heading-sm": [
132
150
  "Geist, Inter, system-ui, -apple-system, sans-serif"
133
151
  ],
134
- "body-lg": [
152
+ "heading-xs": [
135
153
  "Geist, Inter, system-ui, -apple-system, sans-serif"
136
154
  ],
137
- "body-md": [
155
+ "heading-compact": [
138
156
  "Geist, Inter, system-ui, -apple-system, sans-serif"
139
157
  ],
140
- "body-sm": [
158
+ "button-lg": [
159
+ "Geist, Inter, system-ui, -apple-system, sans-serif"
160
+ ],
161
+ "button": [
162
+ "Geist, Inter, system-ui, -apple-system, sans-serif"
163
+ ],
164
+ "button-xs": [
165
+ "Geist, Inter, system-ui, -apple-system, sans-serif"
166
+ ],
167
+ "label-display": [
168
+ "Geist, Inter, system-ui, -apple-system, sans-serif"
169
+ ],
170
+ "label-lg": [
171
+ "Geist, Inter, system-ui, -apple-system, sans-serif"
172
+ ],
173
+ "label-md": [
174
+ "Geist, Inter, system-ui, -apple-system, sans-serif"
175
+ ],
176
+ "label": [
177
+ "Geist, Inter, system-ui, -apple-system, sans-serif"
178
+ ],
179
+ "label-sm": [
141
180
  "Geist, Inter, system-ui, -apple-system, sans-serif"
142
181
  ],
143
182
  "caption": [
144
183
  "Geist, Inter, system-ui, -apple-system, sans-serif"
145
184
  ],
146
- "code": [
185
+ "label-mono-lg": [
186
+ "Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace"
187
+ ],
188
+ "label-mono-md": [
147
189
  "Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace"
148
190
  ],
149
191
  "label-mono": [
150
192
  "Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace"
193
+ ],
194
+ "body-display": [
195
+ "Geist, Inter, system-ui, -apple-system, sans-serif"
196
+ ],
197
+ "body-lead": [
198
+ "Geist, Inter, system-ui, -apple-system, sans-serif"
199
+ ],
200
+ "body-lg": [
201
+ "Geist, Inter, system-ui, -apple-system, sans-serif"
202
+ ],
203
+ "body-md": [
204
+ "Geist, Inter, system-ui, -apple-system, sans-serif"
205
+ ],
206
+ "body-sm": [
207
+ "Geist, Inter, system-ui, -apple-system, sans-serif"
208
+ ],
209
+ "body-compact": [
210
+ "Geist, Inter, system-ui, -apple-system, sans-serif"
211
+ ],
212
+ "code": [
213
+ "Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace"
151
214
  ]
152
215
  },
153
216
  "fontSize": {
154
217
  "display-xl": [
155
218
  "72px",
156
219
  {
157
- "lineHeight": "74px",
158
- "letterSpacing": "-2.52px",
159
- "fontWeight": "500"
220
+ "lineHeight": "72px",
221
+ "letterSpacing": "-4.32px",
222
+ "fontWeight": "600"
223
+ }
224
+ ],
225
+ "display-wide": [
226
+ "64px",
227
+ {
228
+ "lineHeight": "64px",
229
+ "letterSpacing": "-3.84px",
230
+ "fontWeight": "600"
160
231
  }
161
232
  ],
162
233
  "display-lg": [
163
- "52px",
234
+ "56px",
164
235
  {
165
- "lineHeight": "54px",
166
- "letterSpacing": "-1.5px",
167
- "fontWeight": "500"
236
+ "lineHeight": "56px",
237
+ "letterSpacing": "-3.36px",
238
+ "fontWeight": "600"
239
+ }
240
+ ],
241
+ "display-section": [
242
+ "48px",
243
+ {
244
+ "lineHeight": "56px",
245
+ "letterSpacing": "-2.88px",
246
+ "fontWeight": "600"
168
247
  }
169
248
  ],
170
249
  "display-md": [
171
250
  "40px",
172
251
  {
173
- "lineHeight": "42px",
174
- "letterSpacing": "-1px",
175
- "fontWeight": "500"
252
+ "lineHeight": "48px",
253
+ "letterSpacing": "-2.4px",
254
+ "fontWeight": "600"
176
255
  }
177
256
  ],
178
257
  "heading-lg": [
179
- "30px",
258
+ "32px",
180
259
  {
181
- "lineHeight": "32px",
182
- "letterSpacing": "0px",
260
+ "lineHeight": "40px",
261
+ "letterSpacing": "-1.28px",
183
262
  "fontWeight": "600"
184
263
  }
185
264
  ],
@@ -187,35 +266,83 @@
187
266
  "24px",
188
267
  {
189
268
  "lineHeight": "32px",
190
- "letterSpacing": "0px",
269
+ "letterSpacing": "-0.96px",
191
270
  "fontWeight": "600"
192
271
  }
193
272
  ],
194
273
  "heading-sm": [
195
274
  "20px",
196
275
  {
197
- "lineHeight": "28px",
198
- "letterSpacing": "0px",
276
+ "lineHeight": "26px",
277
+ "letterSpacing": "-0.4px",
199
278
  "fontWeight": "600"
200
279
  }
201
280
  ],
202
- "body-lg": [
281
+ "heading-xs": [
282
+ "16px",
283
+ {
284
+ "lineHeight": "24px",
285
+ "letterSpacing": "-0.32px",
286
+ "fontWeight": "600"
287
+ }
288
+ ],
289
+ "heading-compact": [
290
+ "14px",
291
+ {
292
+ "lineHeight": "20px",
293
+ "letterSpacing": "-0.28px",
294
+ "fontWeight": "600"
295
+ }
296
+ ],
297
+ "button-lg": [
298
+ "16px",
299
+ {
300
+ "lineHeight": "20px",
301
+ "letterSpacing": "0px",
302
+ "fontWeight": "500"
303
+ }
304
+ ],
305
+ "button": [
306
+ "14px",
307
+ {
308
+ "lineHeight": "20px",
309
+ "letterSpacing": "0px",
310
+ "fontWeight": "500"
311
+ }
312
+ ],
313
+ "button-xs": [
314
+ "12px",
315
+ {
316
+ "lineHeight": "16px",
317
+ "letterSpacing": "0px",
318
+ "fontWeight": "500"
319
+ }
320
+ ],
321
+ "label-display": [
322
+ "20px",
323
+ {
324
+ "lineHeight": "32px",
325
+ "letterSpacing": "0px",
326
+ "fontWeight": "400"
327
+ }
328
+ ],
329
+ "label-lg": [
203
330
  "18px",
204
331
  {
205
- "lineHeight": "27px",
332
+ "lineHeight": "20px",
206
333
  "letterSpacing": "0px",
207
334
  "fontWeight": "400"
208
335
  }
209
336
  ],
210
- "body-md": [
337
+ "label-md": [
211
338
  "16px",
212
339
  {
213
- "lineHeight": "25px",
340
+ "lineHeight": "20px",
214
341
  "letterSpacing": "0px",
215
342
  "fontWeight": "400"
216
343
  }
217
344
  ],
218
- "body-sm": [
345
+ "label": [
219
346
  "14px",
220
347
  {
221
348
  "lineHeight": "20px",
@@ -223,6 +350,14 @@
223
350
  "fontWeight": "400"
224
351
  }
225
352
  ],
353
+ "label-sm": [
354
+ "13px",
355
+ {
356
+ "lineHeight": "16px",
357
+ "letterSpacing": "0px",
358
+ "fontWeight": "400"
359
+ }
360
+ ],
226
361
  "caption": [
227
362
  "12px",
228
363
  {
@@ -231,7 +366,15 @@
231
366
  "fontWeight": "400"
232
367
  }
233
368
  ],
234
- "code": [
369
+ "label-mono-lg": [
370
+ "14px",
371
+ {
372
+ "lineHeight": "20px",
373
+ "letterSpacing": "0px",
374
+ "fontWeight": "400"
375
+ }
376
+ ],
377
+ "label-mono-md": [
235
378
  "13px",
236
379
  {
237
380
  "lineHeight": "20px",
@@ -244,7 +387,63 @@
244
387
  {
245
388
  "lineHeight": "16px",
246
389
  "letterSpacing": "0px",
247
- "fontWeight": "500"
390
+ "fontWeight": "400"
391
+ }
392
+ ],
393
+ "body-display": [
394
+ "24px",
395
+ {
396
+ "lineHeight": "36px",
397
+ "letterSpacing": "0px",
398
+ "fontWeight": "400"
399
+ }
400
+ ],
401
+ "body-lead": [
402
+ "20px",
403
+ {
404
+ "lineHeight": "36px",
405
+ "letterSpacing": "0px",
406
+ "fontWeight": "400"
407
+ }
408
+ ],
409
+ "body-lg": [
410
+ "18px",
411
+ {
412
+ "lineHeight": "28px",
413
+ "letterSpacing": "0px",
414
+ "fontWeight": "400"
415
+ }
416
+ ],
417
+ "body-md": [
418
+ "16px",
419
+ {
420
+ "lineHeight": "24px",
421
+ "letterSpacing": "0px",
422
+ "fontWeight": "400"
423
+ }
424
+ ],
425
+ "body-sm": [
426
+ "14px",
427
+ {
428
+ "lineHeight": "20px",
429
+ "letterSpacing": "0px",
430
+ "fontWeight": "400"
431
+ }
432
+ ],
433
+ "body-compact": [
434
+ "13px",
435
+ {
436
+ "lineHeight": "18px",
437
+ "letterSpacing": "0px",
438
+ "fontWeight": "400"
439
+ }
440
+ ],
441
+ "code": [
442
+ "13px",
443
+ {
444
+ "lineHeight": "18px",
445
+ "letterSpacing": "0px",
446
+ "fontWeight": "400"
248
447
  }
249
448
  ]
250
449
  },
@@ -276,8 +475,12 @@
276
475
  "icon-stroke-sm": "1.25px",
277
476
  "focus-outline-width": "2px",
278
477
  "focus-outline-offset": "2px",
279
- "control-height": "32px",
280
- "control-padding-inline": "10px",
478
+ "control-height": "36px",
479
+ "control-height-sm": "32px",
480
+ "control-height-lg": "40px",
481
+ "control-height-xs": "24px",
482
+ "control-padding-inline": "12px",
483
+ "card-padding": "20px",
281
484
  "touch-target": "44px"
282
485
  }
283
486
  }