@czi-sds/mcp 0.5.1 → 0.5.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/data/tailwind.json +25 -25
- package/data/zeroheight-cache.json +5065 -1
- package/data/zeroheight-exports/Accordion.md +81 -20
- package/data/zeroheight-exports/Banner.md +104 -10
- package/data/zeroheight-exports/Buttons.md +1029 -1454
- package/data/zeroheight-exports/Callout.md +174 -9
- package/data/zeroheight-exports/Colors.md +1164 -41
- package/data/zeroheight-exports/Content-Card.md +148 -0
- package/data/zeroheight-exports/Control-Inputs.md +778 -63
- package/data/zeroheight-exports/Corners.md +8 -15
- package/data/zeroheight-exports/Dialog.md +200 -12
- package/data/zeroheight-exports/Downloads.md +120 -0
- package/data/zeroheight-exports/Dropdown-Input.md +616 -12
- package/data/zeroheight-exports/Dropdown-Menus.md +1150 -0
- package/data/zeroheight-exports/Field-Inputs.md +450 -9
- package/data/zeroheight-exports/Filters.md +238 -9
- package/data/zeroheight-exports/Getting-Started.md +7 -3
- package/data/zeroheight-exports/Hero.md +152 -0
- package/data/zeroheight-exports/Icons.md +1854 -218
- package/data/zeroheight-exports/Intent.md +40 -0
- package/data/zeroheight-exports/Link.md +52 -6
- package/data/zeroheight-exports/Lists.md +364 -6
- package/data/zeroheight-exports/Loading-Indicator.md +8 -0
- package/data/zeroheight-exports/Navigation.md +328 -6
- package/data/zeroheight-exports/Notification.md +172 -12
- package/data/zeroheight-exports/Panel.md +72 -12
- package/data/zeroheight-exports/README.md +17 -19
- package/data/zeroheight-exports/Responsive-Design.md +52 -0
- package/data/zeroheight-exports/Search-Input.md +44 -0
- package/data/zeroheight-exports/Search.md +248 -0
- package/data/zeroheight-exports/Segmented-Control.md +34 -9
- package/data/zeroheight-exports/Table.md +468 -47
- package/data/zeroheight-exports/Tabs.md +542 -9
- package/data/zeroheight-exports/Tags.md +504 -12
- package/data/zeroheight-exports/Text-Link.md +100 -0
- package/data/zeroheight-exports/Theming.md +36 -6
- package/data/zeroheight-exports/Tooltips.md +466 -15
- package/data/zeroheight-exports/Typography.md +64 -32
- package/dist/stdio.js +28 -19
- package/package.json +3 -3
- package/data/zeroheight-exports/Dropdown-Menu.md +0 -3883
|
@@ -187,22 +187,38 @@ Use for emphasis or when there is a need for distinction between fonts on a page
|
|
|
187
187
|
|
|
188
188
|
Use when there is a need for numbers to be an equal width such as in Tables.
|
|
189
189
|
|
|
190
|
-
| **Font Tabular S**
|
|
191
|
-
|
|
|
192
|
-
| _Visual_
|
|
193
|
-
|
|
|
194
|
-
| _CSS / SCSS Variables_
|
|
195
|
-
| `--sds-font-tabular-s-600-font` `$sds-font-tabular-s-600-font` `--sds-font-tabular-s-600-font-variant-numeric` `$sds-font-tabular-s-600-font-variant-numeric` `--sds-font-tabular-s-600-letter-spacing` `$sds-font-tabular-s-600-letter-spacing`
|
|
196
|
-
| `--sds-font-tabular-s-500-font` `$sds-font-tabular-s-500-font` `--sds-font-tabular-s-500-font-variant-numeric` `$sds-font-tabular-s-500-font-variant-numeric` `--sds-font-tabular-s-500-letter-spacing` `$sds-font-tabular-s-500-letter-spacing`
|
|
197
|
-
| `--sds-font-tabular-s-400-font` `$sds-font-tabular-s-400-font` `--sds-font-tabular-s-400-font-variant-numeric` `$sds-font-tabular-s-400-font-variant-numeric` `--sds-font-tabular-s-400-letter-spacing` `$sds-font-tabular-s-400-letter-spacing`
|
|
198
|
-
|
|
|
199
|
-
| **Font Tabular XS**
|
|
200
|
-
| _Visual_
|
|
201
|
-
|
|
|
202
|
-
| _CSS / SCSS Variables_
|
|
203
|
-
| `--sds-font-tabular-xs-600-font` `$sds-font-tabular-xs-600-font` `--sds-font-tabular-xs-600-font-variant-numeric` `$sds-font-tabular-xs-600-font-variant-numeric` `--sds-font-tabular-xs-600-letter-spacing` `$sds-font-tabular-xs-600-letter-spacing`
|
|
204
|
-
| `--sds-font-tabular-xs-500-font` `$sds-font-tabular-xs-500-font` `--sds-font-tabular-xs-500-font-variant-numeric` `$sds-font-tabular-xs-500-font-variant-numeric` `--sds-font-tabular-xs-500-letter-spacing` `$sds-font-tabular-xs-500-letter-spacing`
|
|
205
|
-
| `--sds-font-tabular-xs-400-font` `$sds-font-tabular-xs-400-font` `--sds-font-tabular-xs-400-font-variant-numeric` `$sds-font-tabular-xs-400-font-variant-numeric` `--sds-font-tabular-xs-400-letter-spacing` `$sds-font-tabular-xs-400-letter-spacing`
|
|
190
|
+
| **Font Tabular S** | | |
|
|
191
|
+
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | ----------------------------------------------------------------------------------------------------------- |
|
|
192
|
+
| _Visual_ | | _Figma Variables_ |
|
|
193
|
+
| | | `wide/fontTabularS/600` `wide/fontTabularS/500` `wide/fontTabularS/400` |
|
|
194
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
195
|
+
| `--sds-font-tabular-s-600-font` `$sds-font-tabular-s-600-font` `--sds-font-tabular-s-600-font-variant-numeric` `$sds-font-tabular-s-600-font-variant-numeric` `--sds-font-tabular-s-600-letter-spacing` `$sds-font-tabular-s-600-letter-spacing` | | `font: 600 14px/24px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
196
|
+
| `--sds-font-tabular-s-500-font` `$sds-font-tabular-s-500-font` `--sds-font-tabular-s-500-font-variant-numeric` `$sds-font-tabular-s-500-font-variant-numeric` `--sds-font-tabular-s-500-letter-spacing` `$sds-font-tabular-s-500-letter-spacing` | | `font: 500 14px/24px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
197
|
+
| `--sds-font-tabular-s-400-font` `$sds-font-tabular-s-400-font` `--sds-font-tabular-s-400-font-variant-numeric` `$sds-font-tabular-s-400-font-variant-numeric` `--sds-font-tabular-s-400-letter-spacing` `$sds-font-tabular-s-400-letter-spacing` | | `font: 400 14px/24px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
198
|
+
| | | |
|
|
199
|
+
| **Font Tabular XS** | | |
|
|
200
|
+
| _Visual_ | | _Figma Variables_ |
|
|
201
|
+
| | | `wide/fontTabularXs/600` `wide/fontTabularXs/500` `wide/fontTabularXs/400` |
|
|
202
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
203
|
+
| `--sds-font-tabular-xs-600-font` `$sds-font-tabular-xs-600-font` `--sds-font-tabular-xs-600-font-variant-numeric` `$sds-font-tabular-xs-600-font-variant-numeric` `--sds-font-tabular-xs-600-letter-spacing` `$sds-font-tabular-xs-600-letter-spacing` | | `font: 600 13px/20px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
204
|
+
| `--sds-font-tabular-xs-500-font` `$sds-font-tabular-xs-500-font` `--sds-font-tabular-xs-500-font-variant-numeric` `$sds-font-tabular-xs-500-font-variant-numeric` `--sds-font-tabular-xs-500-letter-spacing` `$sds-font-tabular-xs-500-letter-spacing` | | `font: 500 13px/20px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
205
|
+
| `--sds-font-tabular-xs-400-font` `$sds-font-tabular-xs-400-font` `--sds-font-tabular-xs-400-font-variant-numeric` `$sds-font-tabular-xs-400-font-variant-numeric` `--sds-font-tabular-xs-400-letter-spacing` `$sds-font-tabular-xs-400-letter-spacing` | | `font: 400 13px/20px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
206
|
+
| | | |
|
|
207
|
+
| **Font Tabular XXS** | | |
|
|
208
|
+
| _Visual_ | | _Figma Variables_ |
|
|
209
|
+
| | | `wide/fontTabularXxs/600` `wide/fontTabularXxs/500` `wide/fontTabularXxs/400` |
|
|
210
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
211
|
+
| `--sds-font-tabular-xxs-600-font` `$sds-font-tabular-xxs-600-font` `--sds-font-tabular-xxs-600-font-variant-numeric` `$sds-font-tabular-xxs-600-font-variant-numeric` `--sds-font-tabular-xxs-600-letter-spacing` `$sds-font-tabular-xxs-600-letter-spacing` | | `font: 600 12px/18px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: -0.25px;` |
|
|
212
|
+
| `--sds-font-tabular-xxs-500-font` `$sds-font-tabular-xxs-500-font` `--sds-font-tabular-xxs-500-font-variant-numeric` `$sds-font-tabular-xxs-500-font-variant-numeric` `--sds-font-tabular-xxs-500-letter-spacing` `$sds-font-tabular-xxs-500-letter-spacing` | | `font: 500 12px/18px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: -0.25px;` |
|
|
213
|
+
| `--sds-font-tabular-xxs-400-font` `$sds-font-tabular-xxs-400-font` `--sds-font-tabular-xxs-400-font-variant-numeric` `$sds-font-tabular-xxs-400-font-variant-numeric` `--sds-font-tabular-xxs-400-letter-spacing` `$sds-font-tabular-xxs-400-letter-spacing` | | `font: 400 12px/18px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: -0.25px;` |
|
|
214
|
+
| | | |
|
|
215
|
+
| **Font Tabular XXXS** | | |
|
|
216
|
+
| _Visual_ | | _Figma Variables_ |
|
|
217
|
+
| | | `wide/fontTabularXxxs/600` `wide/fontTabularXxxs/500` `wide/fontTabularXxxs/400` |
|
|
218
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
219
|
+
| `--sds-font-tabular-xxxs-600-font` `$sds-font-tabular-xxxs-600-font` `--sds-font-tabular-xxxs-600-font-variant-numeric` `$sds-font-tabular-xxxs-600-font-variant-numeric` `--sds-font-tabular-xxxs-600-letter-spacing` `$sds-font-tabular-xxxs-600-letter-spacing` | | `font: 600 11px/16px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: -0.25px;` |
|
|
220
|
+
| `--sds-font-tabular-xxxs-500-font` `$sds-font-tabular-xxxs-500-font` `--sds-font-tabular-xxxs-500-font-variant-numeric` `$sds-font-tabular-xxxs-500-font-variant-numeric` `--sds-font-tabular-xxxs-500-letter-spacing` `$sds-font-tabular-xxxs-500-letter-spacing` | | `font: 500 11px/16px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: -0.25px;` |
|
|
221
|
+
| `--sds-font-tabular-xxxs-400-font` `$sds-font-tabular-xxxs-400-font` `--sds-font-tabular-xxxs-400-font-variant-numeric` `$sds-font-tabular-xxxs-400-font-variant-numeric` `--sds-font-tabular-xxxs-400-letter-spacing` `$sds-font-tabular-xxxs-400-letter-spacing` | | `font: 400 11px/16px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: -0.25px;` |
|
|
206
222
|
|
|
207
223
|
#### Code
|
|
208
224
|
|
|
@@ -410,22 +426,38 @@ Use for emphasis or when there is a need for distinction between fonts on a page
|
|
|
410
426
|
|
|
411
427
|
Use when there is a need for numbers to be an equal width such as in Tables.
|
|
412
428
|
|
|
413
|
-
| **Font Tabular S**
|
|
414
|
-
|
|
|
415
|
-
| _Visual_
|
|
416
|
-
|
|
|
417
|
-
| _CSS / SCSS Variables_
|
|
418
|
-
| `--sds-font-tabular-s-600-font-narrow` `$sds-font-tabular-s-600-font-narrow` `--sds-font-tabular-s-600-font-variant-numeric-narrow` `$sds-font-tabular-s-600-font-variant-numeric-narrow` `--sds-font-tabular-s-600-letter-spacing-narrow` `$sds-font-tabular-s-600-letter-spacing-narrow`
|
|
419
|
-
| `--sds-font-tabular-s-500-font-narrow` `$sds-font-tabular-s-500-font-narrow` `--sds-font-tabular-s-500-font-variant-numeric-narrow` `$sds-font-tabular-s-500-font-variant-numeric-narrow` `--sds-font-tabular-s-500-letter-spacing-narrow` `$sds-font-tabular-s-500-letter-spacing-narrow`
|
|
420
|
-
| `--sds-font-tabular-s-400-font-narrow` `$sds-font-tabular-s-400-font-narrow` `--sds-font-tabular-s-400-font-variant-numeric-narrow` `$sds-font-tabular-s-400-font-variant-numeric-narrow` `--sds-font-tabular-s-400-letter-spacing-narrow` `$sds-font-tabular-s-400-letter-spacing-narrow`
|
|
421
|
-
|
|
|
422
|
-
| **Font Tabular XS**
|
|
423
|
-
| _Visual_
|
|
424
|
-
|
|
|
425
|
-
| _CSS / SCSS Variables_
|
|
426
|
-
| `--sds-font-tabular-xs-600-font-narrow` `$sds-font-tabular-xs-600-font-narrow` `--sds-font-tabular-xs-600-font-variant-numeric-narrow` `$sds-font-tabular-xs-600-font-variant-numeric-narrow` `--sds-font-tabular-xs-600-letter-spacing-narrow` `$sds-font-tabular-xs-600-letter-spacing-narrow`
|
|
427
|
-
| `--sds-font-tabular-xs-500-font-narrow` `$sds-font-tabular-xs-500-font-narrow` `--sds-font-tabular-xs-500-font-variant-numeric-narrow` `$sds-font-tabular-xs-500-font-variant-numeric-narrow` `--sds-font-tabular-xs-500-letter-spacing-narrow` `$sds-font-tabular-xs-500-letter-spacing-narrow`
|
|
428
|
-
| `--sds-font-tabular-xs-400-font-narrow` `$sds-font-tabular-xs-400-font-narrow` `--sds-font-tabular-xs-400-font-variant-numeric-narrow` `$sds-font-tabular-xs-400-font-variant-numeric-narrow` `--sds-font-tabular-xs-400-letter-spacing-narrow` `$sds-font-tabular-xs-400-letter-spacing-narrow`
|
|
429
|
+
| **Font Tabular S** | | |
|
|
430
|
+
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | ----------------------------------------------------------------------------------------------------------- |
|
|
431
|
+
| _Visual_ | | _Figma Variables_ |
|
|
432
|
+
| | | `narrow/fontTabularS/600` `narrow/fontTabularS/500` `narrow/fontTabularS/400` |
|
|
433
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
434
|
+
| `--sds-font-tabular-s-600-font-narrow` `$sds-font-tabular-s-600-font-narrow` `--sds-font-tabular-s-600-font-variant-numeric-narrow` `$sds-font-tabular-s-600-font-variant-numeric-narrow` `--sds-font-tabular-s-600-letter-spacing-narrow` `$sds-font-tabular-s-600-letter-spacing-narrow` | | `font: 600 14px/24px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
435
|
+
| `--sds-font-tabular-s-500-font-narrow` `$sds-font-tabular-s-500-font-narrow` `--sds-font-tabular-s-500-font-variant-numeric-narrow` `$sds-font-tabular-s-500-font-variant-numeric-narrow` `--sds-font-tabular-s-500-letter-spacing-narrow` `$sds-font-tabular-s-500-letter-spacing-narrow` | | `font: 500 14px/24px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
436
|
+
| `--sds-font-tabular-s-400-font-narrow` `$sds-font-tabular-s-400-font-narrow` `--sds-font-tabular-s-400-font-variant-numeric-narrow` `$sds-font-tabular-s-400-font-variant-numeric-narrow` `--sds-font-tabular-s-400-letter-spacing-narrow` `$sds-font-tabular-s-400-letter-spacing-narrow` | | `font: 400 14px/24px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
437
|
+
| | | |
|
|
438
|
+
| **Font Tabular XS** | | |
|
|
439
|
+
| _Visual_ | | _Figma Variables_ |
|
|
440
|
+
| | | `narrow/fontTabularXs/600` `narrow/fontTabularXs/500` `narrow/fontTabularXs/400` |
|
|
441
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
442
|
+
| `--sds-font-tabular-xs-600-font-narrow` `$sds-font-tabular-xs-600-font-narrow` `--sds-font-tabular-xs-600-font-variant-numeric-narrow` `$sds-font-tabular-xs-600-font-variant-numeric-narrow` `--sds-font-tabular-xs-600-letter-spacing-narrow` `$sds-font-tabular-xs-600-letter-spacing-narrow` | | `font: 600 13px/20px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
443
|
+
| `--sds-font-tabular-xs-500-font-narrow` `$sds-font-tabular-xs-500-font-narrow` `--sds-font-tabular-xs-500-font-variant-numeric-narrow` `$sds-font-tabular-xs-500-font-variant-numeric-narrow` `--sds-font-tabular-xs-500-letter-spacing-narrow` `$sds-font-tabular-xs-500-letter-spacing-narrow` | | `font: 500 13px/20px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
444
|
+
| `--sds-font-tabular-xs-400-font-narrow` `$sds-font-tabular-xs-400-font-narrow` `--sds-font-tabular-xs-400-font-variant-numeric-narrow` `$sds-font-tabular-xs-400-font-variant-numeric-narrow` `--sds-font-tabular-xs-400-letter-spacing-narrow` `$sds-font-tabular-xs-400-letter-spacing-narrow` | | `font: 400 13px/20px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
445
|
+
| | | |
|
|
446
|
+
| **Font Tabular XXS** | | |
|
|
447
|
+
| _Visual_ | | _Figma Variables_ |
|
|
448
|
+
| | | `narrow/fontTabularXxs/600` `narrow/fontTabularXxs/500` `narrow/fontTabularXxs/400` |
|
|
449
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
450
|
+
| `--sds-font-tabular-xxs-600-font-narrow` `$sds-font-tabular-xxs-600-font-narrow` `--sds-font-tabular-xxs-600-font-variant-numeric-narrow` `$sds-font-tabular-xxs-600-font-variant-numeric-narrow` `--sds-font-tabular-xxs-600-letter-spacing-narrow` `$sds-font-tabular-xxs-600-letter-spacing-narrow` | | `font: 600 12px/18px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: -0.25px;` |
|
|
451
|
+
| `--sds-font-tabular-xxs-500-font-narrow` `$sds-font-tabular-xxs-500-font-narrow` `--sds-font-tabular-xxs-500-font-variant-numeric-narrow` `$sds-font-tabular-xxs-500-font-variant-numeric-narrow` `--sds-font-tabular-xxs-500-letter-spacing-narrow` `$sds-font-tabular-xxs-500-letter-spacing-narrow` | | `font: 500 12px/18px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: -0.25px;` |
|
|
452
|
+
| `--sds-font-tabular-xxs-400-font-narrow` `$sds-font-tabular-xxs-400-font-narrow` `--sds-font-tabular-xxs-400-font-variant-numeric-narrow` `$sds-font-tabular-xxs-400-font-variant-numeric-narrow` `--sds-font-tabular-xxs-400-letter-spacing-narrow` `$sds-font-tabular-xxs-400-letter-spacing-narrow` | | `font: 400 12px/18px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: -0.25px;` |
|
|
453
|
+
| | | |
|
|
454
|
+
| **Font Tabular XXXS** | | |
|
|
455
|
+
| _Visual_ | | _Figma Variables_ |
|
|
456
|
+
| | | `narrow/fontTabularXxxs/600` `narrow/fontTabularXxxs/500` `narrow/fontTabularXxxs/400` |
|
|
457
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
458
|
+
| `--sds-font-tabular-xxxs-600-font-narrow` `$sds-font-tabular-xxxs-600-font-narrow` `--sds-font-tabular-xxxs-600-font-variant-numeric-narrow` `$sds-font-tabular-xxxs-600-font-variant-numeric-narrow` `--sds-font-tabular-xxxs-600-letter-spacing-narrow` `$sds-font-tabular-xxxs-600-letter-spacing-narrow` | | `font: 600 11px/16px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: -0.25px;` |
|
|
459
|
+
| `--sds-font-tabular-xxxs-500-font-narrow` `$sds-font-tabular-xxxs-500-font-narrow` `--sds-font-tabular-xxxs-500-font-variant-numeric-narrow` `$sds-font-tabular-xxxs-500-font-variant-numeric-narrow` `--sds-font-tabular-xxxs-500-letter-spacing-narrow` `$sds-font-tabular-xxxs-500-letter-spacing-narrow` | | `font: 500 11px/16px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: -0.25px;` |
|
|
460
|
+
| `--sds-font-tabular-xxxs-400-font-narrow` `$sds-font-tabular-xxxs-400-font-narrow` `--sds-font-tabular-xxxs-400-font-variant-numeric-narrow` `$sds-font-tabular-xxxs-400-font-variant-numeric-narrow` `--sds-font-tabular-xxxs-400-letter-spacing-narrow` `$sds-font-tabular-xxxs-400-letter-spacing-narrow` | | `font: 400 11px/16px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: -0.25px;` |
|
|
429
461
|
|
|
430
462
|
#### Code
|
|
431
463
|
|
package/dist/stdio.js
CHANGED
|
@@ -200,7 +200,7 @@ var listComponentsTool = {
|
|
|
200
200
|
var TAILWIND_TOKEN_GUIDANCE = {
|
|
201
201
|
colors: {
|
|
202
202
|
category: "Colors",
|
|
203
|
-
description: "Theme-aware color tokens
|
|
203
|
+
description: "Theme-aware color tokens support both light and dark modes. Both modes follow the same token name structure: use light-token-name for light mode colors and dark:dark-token-name for dark mode colors.",
|
|
204
204
|
prefixes: [
|
|
205
205
|
"bg-",
|
|
206
206
|
"border-",
|
|
@@ -223,28 +223,31 @@ var TAILWIND_TOKEN_GUIDANCE = {
|
|
|
223
223
|
examples: [
|
|
224
224
|
{
|
|
225
225
|
description: "Basic text and background colors",
|
|
226
|
-
code: `<div className="bg-sds-color-semantic-base-background-primary dark:bg-sds-color-semantic-base-background-primary text-sds-color-semantic-base-text-primary dark:text-sds-color-semantic-base-text-primary">
|
|
226
|
+
code: `<div className="bg-light-sds-color-semantic-base-background-primary dark:bg-dark-sds-color-semantic-base-background-primary text-light-sds-color-semantic-base-text-primary dark:text-dark-sds-color-semantic-base-text-primary">
|
|
227
227
|
Content with semantic colors
|
|
228
228
|
</div>`
|
|
229
229
|
},
|
|
230
230
|
{
|
|
231
231
|
description: "Dark mode with hover states",
|
|
232
|
-
code: `<button className="bg-sds-color-semantic-accent-fill-primary dark:bg-sds-color-semantic-accent-fill-primary
|
|
233
|
-
hover:bg-sds-color-semantic-accent-fill-hover dark:hover:bg-sds-color-semantic-accent-fill-hover">
|
|
232
|
+
code: `<button className="bg-light-sds-color-semantic-accent-fill-primary dark:bg-dark-sds-color-semantic-accent-fill-primary
|
|
233
|
+
hover:bg-light-sds-color-semantic-accent-fill-hover dark:hover:bg-dark-sds-color-semantic-accent-fill-hover">
|
|
234
234
|
Click me
|
|
235
235
|
</button>`
|
|
236
236
|
},
|
|
237
237
|
{
|
|
238
238
|
description: "Border and focus states",
|
|
239
239
|
code: `<input className="
|
|
240
|
-
border-sds-color-semantic-base-border-primary
|
|
241
|
-
hover:border-sds-color-semantic-base-border-primary-hover
|
|
242
|
-
focus:border-sds-color-semantic-base-border-primary-pressed
|
|
240
|
+
border-light-sds-color-semantic-base-border-primary
|
|
241
|
+
hover:border-light-sds-color-semantic-base-border-primary-hover
|
|
242
|
+
focus:border-light-sds-color-semantic-base-border-primary-pressed
|
|
243
|
+
dark:border-dark-sds-color-semantic-base-border-primary
|
|
244
|
+
dark:hover:border-dark-sds-color-semantic-base-border-primary-hover
|
|
245
|
+
dark:focus:border-dark-sds-color-semantic-base-border-primary-pressed
|
|
243
246
|
"/>`
|
|
244
247
|
}
|
|
245
248
|
],
|
|
246
249
|
tips: [
|
|
247
|
-
"Always use semantic colors (e.g., 'sds-color-semantic-base-background-primary') over primitive colors when possible",
|
|
250
|
+
"Always use semantic colors (e.g., 'bg-light-sds-color-semantic-base-background-primary dark:bg-dark-sds-color-semantic-base-background-primary') over primitive colors when possible",
|
|
248
251
|
"Include both light and dark variants for proper theme support"
|
|
249
252
|
]
|
|
250
253
|
},
|
|
@@ -417,18 +420,24 @@ QUICK START:
|
|
|
417
420
|
2. Use semantic tokens over primitive ones when available
|
|
418
421
|
3. Include responsive and theme variants for robust implementations
|
|
419
422
|
4. Use the @czi-sds/components/dist/tailwind.json file to get the exact token name and value
|
|
420
|
-
5. To use the typography tokens, you need to add the @tailwindcss/typography plugin to your tailwind.config.js file and then use the typography tokens in your
|
|
421
|
-
6. Colors
|
|
422
|
-
7. Use spacing tokens like sds-m for paddings, margins, etc. for example p-sds-m for padding-medium
|
|
423
|
-
8. Use borderRadius tokens like sds-default for rounded corners for example rounded-sds-default
|
|
424
|
-
9. Use boxShadow tokens like sds-s for subtle shadows for example shadow-sds-s
|
|
425
|
-
10. Use
|
|
426
|
-
11. Use fontFamily tokens like sds-body for body font for example font-sds-body
|
|
427
|
-
12. Use fontSize tokens like sds-body-m-400-wide for body font size for example text-sds-body-m-400-wide
|
|
428
|
-
13. Use fontVariantNumeric tokens like sds-body-m-400-wide for body font variant numeric for example font-variant-numeric-sds-body-m-400-wide
|
|
429
|
-
14. Use letterSpacing tokens like sds-body-m-400-wide for body letter spacing for example tracking-sds-body-m-400-wide
|
|
423
|
+
5. To use the typography tokens, you need to add the @tailwindcss/typography plugin to your tailwind.config.js file and then use the typography tokens in your Tailwind classes like prose-[typography-token-name] (for example, prose-sds-body-m-400-wide)
|
|
424
|
+
6. Colors are defined for both light and dark modes using the same structure. Use dark:dark-color-token-name for dark mode colors and light-color-token-name for light mode colors
|
|
425
|
+
7. Use spacing tokens like sds-m for paddings, margins, etc. (for example, p-sds-m for padding-medium)
|
|
426
|
+
8. Use borderRadius tokens like sds-default for rounded corners (for example, rounded-sds-default)
|
|
427
|
+
9. Use boxShadow tokens like sds-s for subtle shadows (for example, shadow-sds-s)
|
|
428
|
+
10. Use breakpoint tokens like sds-m for medium breakpoints (for example, md:sds-m)
|
|
429
|
+
11. Use fontFamily tokens like sds-body for body font (for example, font-sds-body)
|
|
430
|
+
12. Use fontSize tokens like sds-body-m-400-wide for body font size (for example, text-sds-body-m-400-wide)
|
|
431
|
+
13. Use fontVariantNumeric tokens like sds-body-m-400-wide for body font variant numeric (for example, font-variant-numeric-sds-body-m-400-wide)
|
|
432
|
+
14. Use letterSpacing tokens like sds-body-m-400-wide for body letter spacing (for example, tracking-sds-body-m-400-wide)
|
|
430
433
|
|
|
431
|
-
For detailed examples, request a specific category
|
|
434
|
+
For detailed examples, request a specific category. To do so, you'll need to call this tool again and pass the category name as an argument. Below are the categories and their descriptions:
|
|
435
|
+
|
|
436
|
+
fontFamily, fontSize, fontVariantNumeric, letterSpacing, lineHeight, textDecoration, textTransform: These categories can be used for separately formatting font styles in the tailwind.config.js file
|
|
437
|
+
typography: This category can be used for formatting typography in the tailwind.config.js file using the typography plugin and also for using the typography tokens in your Tailwind classes like prose-[typography-token-name] (for example, prose-sds-body-m-400-wide)
|
|
438
|
+
height, width, borderRadius, boxShadow, breakpoints: These categories can be used for formatting height, width, border radius, box shadow, and breakpoints in the tailwind.config.js file
|
|
439
|
+
spacing: This category can be used for formatting spacing in the tailwind.config.js file
|
|
440
|
+
colors: This category can be used for formatting colors in the tailwind.config.js file`;
|
|
432
441
|
}
|
|
433
442
|
const guidance = TAILWIND_TOKEN_GUIDANCE[category];
|
|
434
443
|
if (!guidance) {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@czi-sds/mcp",
|
|
3
3
|
"description": "The official MCP server for SDS",
|
|
4
|
-
"version": "0.5.
|
|
4
|
+
"version": "0.5.3",
|
|
5
5
|
"main": "dist/stdio.js",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"generate:components-list": "tsx scripts/generate-component-list.ts",
|
|
24
24
|
"generate:component-props": "tsx scripts/generate-component-props.ts",
|
|
25
25
|
"generate:zeroheight-export": "tsx scripts/export-zeroheight-pages.ts",
|
|
26
|
-
"generate:all": "yarn generate:tailwind-tokens && yarn generate:components-list && yarn generate:component-props
|
|
26
|
+
"generate:all": "yarn generate:tailwind-tokens && yarn generate:components-list && yarn generate:component-props",
|
|
27
27
|
"prebuild": "yarn generate:all",
|
|
28
28
|
"build": "yarn prebuild && tsup && chmod 755 dist/stdio.js",
|
|
29
29
|
"dev": "tsup --watch",
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"tsx": "^4.20.3",
|
|
63
63
|
"typescript": "^5.9.2"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "b429604fd8fd932c28053faff1a6651cb61ada5f"
|
|
66
66
|
}
|