@nexub/mcp 0.0.0-stage → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -2
- package/dist/skill/SKILL.md +97 -0
- package/dist/skill/references/components/accordion.md +77 -0
- package/dist/skill/references/components/activity-feed.md +33 -0
- package/dist/skill/references/components/alert-dialog.md +48 -0
- package/dist/skill/references/components/alert.md +54 -0
- package/dist/skill/references/components/amount.md +34 -0
- package/dist/skill/references/components/auth-card.md +33 -0
- package/dist/skill/references/components/autocomplete.md +54 -0
- package/dist/skill/references/components/avatar-group.md +26 -0
- package/dist/skill/references/components/avatar.md +48 -0
- package/dist/skill/references/components/badge.md +71 -0
- package/dist/skill/references/components/banner.md +32 -0
- package/dist/skill/references/components/bento-grid.md +42 -0
- package/dist/skill/references/components/box.md +35 -0
- package/dist/skill/references/components/breadcrumb.md +61 -0
- package/dist/skill/references/components/button-group.md +43 -0
- package/dist/skill/references/components/button.md +118 -0
- package/dist/skill/references/components/callout.md +27 -0
- package/dist/skill/references/components/card.md +74 -0
- package/dist/skill/references/components/checkbox-card.md +49 -0
- package/dist/skill/references/components/checkbox.md +51 -0
- package/dist/skill/references/components/chip.md +35 -0
- package/dist/skill/references/components/citation.md +61 -0
- package/dist/skill/references/components/code-inline.md +25 -0
- package/dist/skill/references/components/collapsible.md +71 -0
- package/dist/skill/references/components/combobox.md +40 -0
- package/dist/skill/references/components/conversation.md +100 -0
- package/dist/skill/references/components/data-table.md +70 -0
- package/dist/skill/references/components/date-picker.md +56 -0
- package/dist/skill/references/components/date-range-picker.md +48 -0
- package/dist/skill/references/components/dialog.md +57 -0
- package/dist/skill/references/components/drawer.md +79 -0
- package/dist/skill/references/components/empty-state.md +77 -0
- package/dist/skill/references/components/error-state.md +37 -0
- package/dist/skill/references/components/error-summary.md +71 -0
- package/dist/skill/references/components/eyebrow-chip.md +28 -0
- package/dist/skill/references/components/filter-bar.md +36 -0
- package/dist/skill/references/components/filter-chip.md +26 -0
- package/dist/skill/references/components/flex.md +47 -0
- package/dist/skill/references/components/form-field.md +26 -0
- package/dist/skill/references/components/gradient-divider.md +13 -0
- package/dist/skill/references/components/grid.md +39 -0
- package/dist/skill/references/components/heading.md +46 -0
- package/dist/skill/references/components/helper-text.md +31 -0
- package/dist/skill/references/components/hover-card.md +34 -0
- package/dist/skill/references/components/icon-button.md +44 -0
- package/dist/skill/references/components/info-list.md +25 -0
- package/dist/skill/references/components/input.md +78 -0
- package/dist/skill/references/components/kbd.md +42 -0
- package/dist/skill/references/components/label.md +37 -0
- package/dist/skill/references/components/link.md +38 -0
- package/dist/skill/references/components/list-detail.md +27 -0
- package/dist/skill/references/components/media-card.md +61 -0
- package/dist/skill/references/components/message-bubble.md +68 -0
- package/dist/skill/references/components/money-input.md +30 -0
- package/dist/skill/references/components/motion-collapse.md +57 -0
- package/dist/skill/references/components/motion-fade.md +64 -0
- package/dist/skill/references/components/motion-scale.md +54 -0
- package/dist/skill/references/components/motion-slide.md +60 -0
- package/dist/skill/references/components/navigation-rail.md +29 -0
- package/dist/skill/references/components/notification-item.md +29 -0
- package/dist/skill/references/components/number-input.md +30 -0
- package/dist/skill/references/components/number-ticker.md +44 -0
- package/dist/skill/references/components/pagination.md +52 -0
- package/dist/skill/references/components/password-input.md +28 -0
- package/dist/skill/references/components/plan-card.md +34 -0
- package/dist/skill/references/components/popover.md +53 -0
- package/dist/skill/references/components/progress.md +39 -0
- package/dist/skill/references/components/prompt-input.md +95 -0
- package/dist/skill/references/components/radio-card.md +83 -0
- package/dist/skill/references/components/radio-group.md +57 -0
- package/dist/skill/references/components/rating.md +39 -0
- package/dist/skill/references/components/scroll-area.md +57 -0
- package/dist/skill/references/components/search-input.md +22 -0
- package/dist/skill/references/components/segmented-control.md +44 -0
- package/dist/skill/references/components/select.md +43 -0
- package/dist/skill/references/components/separator.md +30 -0
- package/dist/skill/references/components/settings-section.md +31 -0
- package/dist/skill/references/components/sheet.md +51 -0
- package/dist/skill/references/components/skeleton.md +38 -0
- package/dist/skill/references/components/slider.md +31 -0
- package/dist/skill/references/components/spinner.md +32 -0
- package/dist/skill/references/components/split-button.md +43 -0
- package/dist/skill/references/components/stack.md +35 -0
- package/dist/skill/references/components/stat-card.md +50 -0
- package/dist/skill/references/components/status-pill.md +37 -0
- package/dist/skill/references/components/step-indicator.md +29 -0
- package/dist/skill/references/components/streaming-text.md +53 -0
- package/dist/skill/references/components/switch.md +36 -0
- package/dist/skill/references/components/table.md +89 -0
- package/dist/skill/references/components/tabs.md +51 -0
- package/dist/skill/references/components/tag.md +25 -0
- package/dist/skill/references/components/text-gradient.md +30 -0
- package/dist/skill/references/components/text.md +45 -0
- package/dist/skill/references/components/textarea.md +40 -0
- package/dist/skill/references/components/thinking-indicator.md +50 -0
- package/dist/skill/references/components/toast.md +141 -0
- package/dist/skill/references/components/toggle-group.md +35 -0
- package/dist/skill/references/components/toggle.md +32 -0
- package/dist/skill/references/components/tooltip.md +34 -0
- package/dist/skill/references/components/user-card.md +27 -0
- package/dist/skill/references/components.md +192 -0
- package/dist/skill/references/tokens.md +234 -0
- package/package.json +41 -3
- package/src/cli.js +9 -0
- package/src/server.js +98 -0
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
# Tokens
|
|
2
|
+
|
|
3
|
+
Nexub DS v1.8.0. Every token is a CSS custom property from `@nexub/tokens/css` (loaded by `@nexub/themes/base`).
|
|
4
|
+
The Tailwind preset (`@nexub/tokens/tailwind`) maps them to utilities. Never hardcode a hex, px spacing or shadow that a token covers.
|
|
5
|
+
|
|
6
|
+
## Color roles
|
|
7
|
+
|
|
8
|
+
Roles are `light-dark()` values: they follow `data-theme` and `data-contrast` automatically. Pair every background role with its `on-` role.
|
|
9
|
+
|
|
10
|
+
| Role | Tailwind | CSS var | Use for |
|
|
11
|
+
| --- | --- | --- | --- |
|
|
12
|
+
| `primary` | `bg-primary` / `text-primary` / `border-primary` | `--color-primary` | The one emphasised action; links |
|
|
13
|
+
| `on-primary` | `bg-on-primary` / `text-on-primary` / `border-on-primary` | `--color-on-primary` | |
|
|
14
|
+
| `primary-container` | `bg-primary-container` / `text-primary-container` / `border-primary-container` | `--color-primary-container` | |
|
|
15
|
+
| `on-primary-container` | `bg-on-primary-container` / `text-on-primary-container` / `border-on-primary-container` | `--color-on-primary-container` | |
|
|
16
|
+
| `secondary` | `bg-secondary` / `text-secondary` / `border-secondary` | `--color-secondary` | |
|
|
17
|
+
| `on-secondary` | `bg-on-secondary` / `text-on-secondary` / `border-on-secondary` | `--color-on-secondary` | |
|
|
18
|
+
| `secondary-container` | `bg-secondary-container` / `text-secondary-container` / `border-secondary-container` | `--color-secondary-container` | |
|
|
19
|
+
| `on-secondary-container` | `bg-on-secondary-container` / `text-on-secondary-container` / `border-on-secondary-container` | `--color-on-secondary-container` | |
|
|
20
|
+
| `error` | `bg-error` / `text-error` / `border-error` | `--color-error` | Destructive / error |
|
|
21
|
+
| `on-error` | `bg-on-error` / `text-on-error` / `border-on-error` | `--color-on-error` | |
|
|
22
|
+
| `error-container` | `bg-error-container` / `text-error-container` / `border-error-container` | `--color-error-container` | |
|
|
23
|
+
| `on-error-container` | `bg-on-error-container` / `text-on-error-container` / `border-on-error-container` | `--color-on-error-container` | |
|
|
24
|
+
| `success` | `bg-success` / `text-success` / `border-success` | `--color-success` | |
|
|
25
|
+
| `on-success` | `bg-on-success` / `text-on-success` / `border-on-success` | `--color-on-success` | |
|
|
26
|
+
| `success-container` | `bg-success-container` / `text-success-container` / `border-success-container` | `--color-success-container` | |
|
|
27
|
+
| `on-success-container` | `bg-on-success-container` / `text-on-success-container` / `border-on-success-container` | `--color-on-success-container` | |
|
|
28
|
+
| `warning` | `bg-warning` / `text-warning` / `border-warning` | `--color-warning` | |
|
|
29
|
+
| `on-warning` | `bg-on-warning` / `text-on-warning` / `border-on-warning` | `--color-on-warning` | |
|
|
30
|
+
| `warning-container` | `bg-warning-container` / `text-warning-container` / `border-warning-container` | `--color-warning-container` | |
|
|
31
|
+
| `on-warning-container` | `bg-on-warning-container` / `text-on-warning-container` / `border-on-warning-container` | `--color-on-warning-container` | |
|
|
32
|
+
| `info` | `bg-info` / `text-info` / `border-info` | `--color-info` | |
|
|
33
|
+
| `on-info` | `bg-on-info` / `text-on-info` / `border-on-info` | `--color-on-info` | |
|
|
34
|
+
| `info-container` | `bg-info-container` / `text-info-container` / `border-info-container` | `--color-info-container` | |
|
|
35
|
+
| `on-info-container` | `bg-on-info-container` / `text-on-info-container` / `border-on-info-container` | `--color-on-info-container` | |
|
|
36
|
+
| `leap` | `bg-leap` / `text-leap` / `border-leap` | `--color-leap` | |
|
|
37
|
+
| `on-leap` | `bg-on-leap` / `text-on-leap` / `border-on-leap` | `--color-on-leap` | |
|
|
38
|
+
| `leap-container` | `bg-leap-container` / `text-leap-container` / `border-leap-container` | `--color-leap-container` | |
|
|
39
|
+
| `on-leap-container` | `bg-on-leap-container` / `text-on-leap-container` / `border-on-leap-container` | `--color-on-leap-container` | |
|
|
40
|
+
| `bookub` | `bg-bookub` / `text-bookub` / `border-bookub` | `--color-bookub` | |
|
|
41
|
+
| `on-bookub` | `bg-on-bookub` / `text-on-bookub` / `border-on-bookub` | `--color-on-bookub` | |
|
|
42
|
+
| `bookub-container` | `bg-bookub-container` / `text-bookub-container` / `border-bookub-container` | `--color-bookub-container` | |
|
|
43
|
+
| `on-bookub-container` | `bg-on-bookub-container` / `text-on-bookub-container` / `border-on-bookub-container` | `--color-on-bookub-container` | |
|
|
44
|
+
| `payub` | `bg-payub` / `text-payub` / `border-payub` | `--color-payub` | |
|
|
45
|
+
| `on-payub` | `bg-on-payub` / `text-on-payub` / `border-on-payub` | `--color-on-payub` | |
|
|
46
|
+
| `payub-container` | `bg-payub-container` / `text-payub-container` / `border-payub-container` | `--color-payub-container` | |
|
|
47
|
+
| `on-payub-container` | `bg-on-payub-container` / `text-on-payub-container` / `border-on-payub-container` | `--color-on-payub-container` | |
|
|
48
|
+
| `founderub` | `bg-founderub` / `text-founderub` / `border-founderub` | `--color-founderub` | |
|
|
49
|
+
| `on-founderub` | `bg-on-founderub` / `text-on-founderub` / `border-on-founderub` | `--color-on-founderub` | |
|
|
50
|
+
| `founderub-container` | `bg-founderub-container` / `text-founderub-container` / `border-founderub-container` | `--color-founderub-container` | |
|
|
51
|
+
| `on-founderub-container` | `bg-on-founderub-container` / `text-on-founderub-container` / `border-on-founderub-container` | `--color-on-founderub-container` | |
|
|
52
|
+
| `surface` | `bg-surface` / `text-surface` / `border-surface` | `--color-surface` | Page background |
|
|
53
|
+
| `surface-dim` | `bg-surface-dim` / `text-surface-dim` / `border-surface-dim` | `--color-surface-dim` | |
|
|
54
|
+
| `surface-bright` | `bg-surface-bright` / `text-surface-bright` / `border-surface-bright` | `--color-surface-bright` | |
|
|
55
|
+
| `surface-container-lowest` | `bg-surface-container-lowest` / `text-surface-container-lowest` / `border-surface-container-lowest` | `--color-surface-container-lowest` | |
|
|
56
|
+
| `surface-container-low` | `bg-surface-container-low` / `text-surface-container-low` / `border-surface-container-low` | `--color-surface-container-low` | In-flow cards, sidebars |
|
|
57
|
+
| `surface-container` | `bg-surface-container` / `text-surface-container` / `border-surface-container` | `--color-surface-container` | Default container |
|
|
58
|
+
| `surface-container-high` | `bg-surface-container-high` / `text-surface-container-high` / `border-surface-container-high` | `--color-surface-container-high` | Pressed / neutral fills |
|
|
59
|
+
| `surface-container-highest` | `bg-surface-container-highest` / `text-surface-container-highest` / `border-surface-container-highest` | `--color-surface-container-highest` | |
|
|
60
|
+
| `surface-elevated` | `bg-surface-elevated` / `text-surface-elevated` / `border-surface-elevated` | `--color-surface-elevated` | Floating layers: menus, popovers, dialogs |
|
|
61
|
+
| `on-surface` | `bg-on-surface` / `text-on-surface` / `border-on-surface` | `--color-on-surface` | Primary text |
|
|
62
|
+
| `on-surface-variant` | `bg-on-surface-variant` / `text-on-surface-variant` / `border-on-surface-variant` | `--color-on-surface-variant` | Secondary text |
|
|
63
|
+
| `on-surface-muted` | `bg-on-surface-muted` / `text-on-surface-muted` / `border-on-surface-muted` | `--color-on-surface-muted` | Tertiary text (still ≥ 4.5:1) |
|
|
64
|
+
| `outline` | `bg-outline` / `text-outline` / `border-outline` | `--color-outline` | Field borders, focus (≥ 3:1) |
|
|
65
|
+
| `outline-variant` | `bg-outline-variant` / `text-outline-variant` / `border-outline-variant` | `--color-outline-variant` | Hairlines, dividers |
|
|
66
|
+
| `inverse-surface` | `bg-inverse-surface` / `text-inverse-surface` / `border-inverse-surface` | `--color-inverse-surface` | |
|
|
67
|
+
| `inverse-on-surface` | `bg-inverse-on-surface` / `text-inverse-on-surface` / `border-inverse-on-surface` | `--color-inverse-on-surface` | |
|
|
68
|
+
| `inverse-primary` | `bg-inverse-primary` / `text-inverse-primary` / `border-inverse-primary` | `--color-inverse-primary` | |
|
|
69
|
+
| `scrim` | `bg-scrim` / `text-scrim` / `border-scrim` | `--color-scrim` | |
|
|
70
|
+
| `tertiary` | `bg-tertiary` / `text-tertiary` / `border-tertiary` | `--color-tertiary` | Product brand accent (remapped by data-product) |
|
|
71
|
+
| `on-tertiary` | `bg-on-tertiary` / `text-on-tertiary` / `border-on-tertiary` | `--color-on-tertiary` | |
|
|
72
|
+
| `tertiary-container` | `bg-tertiary-container` / `text-tertiary-container` / `border-tertiary-container` | `--color-tertiary-container` | |
|
|
73
|
+
| `on-tertiary-container` | `bg-on-tertiary-container` / `text-on-tertiary-container` / `border-on-tertiary-container` | `--color-on-tertiary-container` | |
|
|
74
|
+
|
|
75
|
+
Legacy aliases (`--color-bg-*`, `--color-text-*`, `--color-border-*`, `--color-semantic-*`, raw `--color-brand-*` / `--color-accent-*` scales, `--gradient-*`) still work but must not be used in new code.
|
|
76
|
+
|
|
77
|
+
## Chart colors
|
|
78
|
+
|
|
79
|
+
| CSS var | Value |
|
|
80
|
+
| --- | --- |
|
|
81
|
+
| `--color-chart-1` | #4099f1 |
|
|
82
|
+
| `--color-chart-2` | #10b981 |
|
|
83
|
+
| `--color-chart-3` | #8b5cf6 |
|
|
84
|
+
| `--color-chart-4` | #f59e0b |
|
|
85
|
+
| `--color-chart-5` | #ef4444 |
|
|
86
|
+
| `--color-chart-6` | #06b6d4 |
|
|
87
|
+
| `--color-chart-7` | #ec4899 |
|
|
88
|
+
| `--color-chart-8` | #84cc16 |
|
|
89
|
+
|
|
90
|
+
## Typography roles
|
|
91
|
+
|
|
92
|
+
Fonts: `font-sans` (Inter, UI), `font-display` (Plus Jakarta Sans, headlines), `font-mono` (Geist Mono, code and figures).
|
|
93
|
+
|
|
94
|
+
| Tailwind | Size / line height | Weight |
|
|
95
|
+
| --- | --- | --- |
|
|
96
|
+
| `text-display-lg` | 56px / 60px | 700 |
|
|
97
|
+
| `text-display-md` | 44px / 48px | 700 |
|
|
98
|
+
| `text-display-sm` | 36px / 40px | 700 |
|
|
99
|
+
| `text-headline-lg` | 32px / 38px | 600 |
|
|
100
|
+
| `text-headline-md` | 28px / 34px | 600 |
|
|
101
|
+
| `text-headline-sm` | 24px / 30px | 600 |
|
|
102
|
+
| `text-title-lg` | 20px / 28px | 600 |
|
|
103
|
+
| `text-title-md` | 16px / 24px | 600 |
|
|
104
|
+
| `text-title-sm` | 14px / 20px | 600 |
|
|
105
|
+
| `text-body-lg` | 18px / 28px | 400 |
|
|
106
|
+
| `text-body-md` | 16px / 24px | 400 |
|
|
107
|
+
| `text-body-sm` | 14px / 20px | 400 |
|
|
108
|
+
| `text-label-lg` | 14px / 20px | 500 |
|
|
109
|
+
| `text-label-md` | 13px / 18px | 500 |
|
|
110
|
+
| `text-label-sm` | 12px / 16px | 500 |
|
|
111
|
+
|
|
112
|
+
## Spacing
|
|
113
|
+
|
|
114
|
+
| CSS var | Tailwind (p-, m-, gap-, w-, h-) | Value |
|
|
115
|
+
| --- | --- | --- |
|
|
116
|
+
| `--spacing-0` | `0` | 0px |
|
|
117
|
+
| `--spacing-1` | `1` | 4px |
|
|
118
|
+
| `--spacing-2` | `2` | 8px |
|
|
119
|
+
| `--spacing-3` | `3` | 12px |
|
|
120
|
+
| `--spacing-4` | `4` | 16px |
|
|
121
|
+
| `--spacing-5` | `5` | 20px |
|
|
122
|
+
| `--spacing-6` | `6` | 24px |
|
|
123
|
+
| `--spacing-7` | `7` | 28px |
|
|
124
|
+
| `--spacing-8` | `8` | 32px |
|
|
125
|
+
| `--spacing-9` | `9` | 36px |
|
|
126
|
+
| `--spacing-10` | `10` | 40px |
|
|
127
|
+
| `--spacing-11` | `11` | 44px |
|
|
128
|
+
| `--spacing-12` | `12` | 48px |
|
|
129
|
+
| `--spacing-14` | `14` | 56px |
|
|
130
|
+
| `--spacing-16` | `16` | 64px |
|
|
131
|
+
| `--spacing-20` | `20` | 80px |
|
|
132
|
+
| `--spacing-24` | `24` | 96px |
|
|
133
|
+
| `--spacing-28` | `28` | 112px |
|
|
134
|
+
| `--spacing-32` | `32` | 128px |
|
|
135
|
+
| `--spacing-40` | `40` | 160px |
|
|
136
|
+
| `--spacing-48` | `48` | 192px |
|
|
137
|
+
| `--spacing-56` | `56` | 224px |
|
|
138
|
+
| `--spacing-64` | `64` | 256px |
|
|
139
|
+
| `--spacing-px` | `px` | 1px |
|
|
140
|
+
| `--spacing-0-5` | `0-5` | 2px |
|
|
141
|
+
| `--spacing-1-5` | `1-5` | 6px |
|
|
142
|
+
| `--spacing-2-5` | `2-5` | 10px |
|
|
143
|
+
| `--spacing-3-5` | `3-5` | 14px |
|
|
144
|
+
|
|
145
|
+
Containers: `max-w-container-sm` (640px), `max-w-container-md` (768px), `max-w-container-lg` (1024px), `max-w-container-xl` (1280px), `max-w-container-2xl` (1536px), `max-w-container-nexub` (1440px), `max-w-container-prose` (65ch).
|
|
146
|
+
|
|
147
|
+
## Control and component sizes
|
|
148
|
+
|
|
149
|
+
| CSS var | Tailwind | Value |
|
|
150
|
+
| --- | --- | --- |
|
|
151
|
+
| `--size-control-xs` | `h-control-xs` | 24px |
|
|
152
|
+
| `--size-control-sm` | `h-control-sm` | 32px |
|
|
153
|
+
| `--size-control-md` | `h-control-md` | 40px |
|
|
154
|
+
| `--size-control-lg` | `h-control-lg` | 48px |
|
|
155
|
+
| `--size-control-xl` | `h-control-xl` | 56px |
|
|
156
|
+
| `--size-icon-xs` | | 12px |
|
|
157
|
+
| `--size-icon-sm` | | 16px |
|
|
158
|
+
| `--size-icon-md` | | 20px |
|
|
159
|
+
| `--size-icon-lg` | | 24px |
|
|
160
|
+
| `--size-icon-xl` | | 32px |
|
|
161
|
+
| `--size-avatar-xs` | | 24px |
|
|
162
|
+
| `--size-avatar-sm` | | 32px |
|
|
163
|
+
| `--size-avatar-md` | | 40px |
|
|
164
|
+
| `--size-avatar-lg` | | 48px |
|
|
165
|
+
| `--size-avatar-xl` | | 64px |
|
|
166
|
+
| `--size-nav-header` | | 64px |
|
|
167
|
+
| `--size-nav-sidebar` | | 256px |
|
|
168
|
+
| `--size-nav-sidebar-collapsed` | | 64px |
|
|
169
|
+
|
|
170
|
+
Control heights shrink under `data-density="compact"`. Use the component `size` prop instead of setting heights.
|
|
171
|
+
|
|
172
|
+
## Shape (corner radius by role)
|
|
173
|
+
|
|
174
|
+
| CSS var | Tailwind | Value |
|
|
175
|
+
| --- | --- | --- |
|
|
176
|
+
| `--shape-control` | `rounded-shape-control` | 9999px |
|
|
177
|
+
| `--shape-field` | `rounded-shape-field` | 12px |
|
|
178
|
+
| `--shape-container` | `rounded-shape-container` | 16px |
|
|
179
|
+
| `--shape-overlay` | `rounded-shape-overlay` | 24px |
|
|
180
|
+
| `--shape-tooltip` | `rounded-shape-tooltip` | 8px |
|
|
181
|
+
| `--shape-min` | `rounded-shape-min` | 4px |
|
|
182
|
+
|
|
183
|
+
Raw radii (`rounded-sm` … `rounded-3xl`, `--radius-*`) exist; prefer the shape roles.
|
|
184
|
+
|
|
185
|
+
## Elevation
|
|
186
|
+
|
|
187
|
+
| CSS var | Tailwind | Value |
|
|
188
|
+
| --- | --- | --- |
|
|
189
|
+
| `--elevation-0` | `shadow-elevation-0` | none |
|
|
190
|
+
| `--elevation-1` | `shadow-elevation-1` | 0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.06)), 0 1px 2px light-dark(rgb(26 28 30 / 0.06), rgb(0 0 0 / 0.4)), 0 2px 6px light-dark(rgb(26 28 30 / 0.04), rgb(0 0 0 / 0.3)) |
|
|
191
|
+
| `--elevation-2` | `shadow-elevation-2` | 0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 2px 4px light-dark(rgb(26 28 30 / 0.06), rgb(0 0 0 / 0.4)), 0 8px 20px light-dark(rgb(26 28 30 / 0.08), rgb(0 0 0 / 0.45)) |
|
|
192
|
+
| `--elevation-3` | `shadow-elevation-3` | 0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 4px 8px light-dark(rgb(26 28 30 / 0.08), rgb(0 0 0 / 0.45)), 0 20px 48px light-dark(rgb(26 28 30 / 0.16), rgb(0 0 0 / 0.55)) |
|
|
193
|
+
|
|
194
|
+
Shadows are only for things that float. In-flow cards use tone (`surface-container-*`) and a hairline, not a shadow.
|
|
195
|
+
|
|
196
|
+
## Motion
|
|
197
|
+
|
|
198
|
+
Use springs, not durations. Each spring has a paired easing and duration:
|
|
199
|
+
|
|
200
|
+
| Spring | Tailwind |
|
|
201
|
+
| --- | --- |
|
|
202
|
+
| `--motion-spring-spatial-fast-{easing,duration}` | `ease-spatial-fast duration-spatial-fast` |
|
|
203
|
+
| `--motion-spring-spatial-default-{easing,duration}` | `ease-spatial-default duration-spatial-default` |
|
|
204
|
+
| `--motion-spring-spatial-slow-{easing,duration}` | `ease-spatial-slow duration-spatial-slow` |
|
|
205
|
+
| `--motion-spring-effects-fast-{easing,duration}` | `ease-effects-fast duration-effects-fast` |
|
|
206
|
+
| `--motion-spring-effects-default-{easing,duration}` | `ease-effects-default duration-effects-default` |
|
|
207
|
+
| `--motion-spring-effects-slow-{easing,duration}` | `ease-effects-slow duration-effects-slow` |
|
|
208
|
+
| `--motion-spring-expressive-fast-{easing,duration}` | `ease-expressive-fast duration-expressive-fast` |
|
|
209
|
+
| `--motion-spring-expressive-default-{easing,duration}` | `ease-expressive-default duration-expressive-default` |
|
|
210
|
+
| `--motion-spring-expressive-slow-{easing,duration}` | `ease-expressive-slow duration-expressive-slow` |
|
|
211
|
+
|
|
212
|
+
`spatial` = movement and size, `effects` = color and opacity (no bounce), `expressive` = key moments only. Exits use `fast`. Respect `prefers-reduced-motion`.
|
|
213
|
+
|
|
214
|
+
## Z-index
|
|
215
|
+
|
|
216
|
+
| CSS var | Tailwind | Value |
|
|
217
|
+
| --- | --- | --- |
|
|
218
|
+
| `--z-hide` | `z-hide` | -1 |
|
|
219
|
+
| `--z-base` | `z-base` | 0 |
|
|
220
|
+
| `--z-raised` | `z-raised` | 10 |
|
|
221
|
+
| `--z-dropdown` | `z-dropdown` | 1000 |
|
|
222
|
+
| `--z-sticky` | `z-sticky` | 1100 |
|
|
223
|
+
| `--z-banner` | `z-banner` | 1200 |
|
|
224
|
+
| `--z-overlay` | `z-overlay` | 1300 |
|
|
225
|
+
| `--z-modal` | `z-modal` | 1400 |
|
|
226
|
+
| `--z-popover` | `z-popover` | 1500 |
|
|
227
|
+
| `--z-skipLink` | `z-skipLink` | 1600 |
|
|
228
|
+
| `--z-toast` | `z-toast` | 1700 |
|
|
229
|
+
| `--z-tooltip` | `z-tooltip` | 1800 |
|
|
230
|
+
| `--z-commandK` | `z-commandK` | 1900 |
|
|
231
|
+
|
|
232
|
+
## Breakpoints
|
|
233
|
+
|
|
234
|
+
`sm` 640px · `md` 768px · `lg` 1024px · `xl` 1280px · `2xl` 1536px
|
package/package.json
CHANGED
|
@@ -1,6 +1,44 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nexub/mcp",
|
|
3
|
-
"version": "
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "1.8.0",
|
|
4
|
+
"description": "MCP server for Nexub Design System: gives Claude, Cursor and any MCP client the components, patterns, tokens and design rules of the installed release.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"homepage": "https://github.com/Nexub-AI/nexub-ds#readme",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "https://github.com/Nexub-AI/nexub-ds.git",
|
|
11
|
+
"directory": "packages/mcp"
|
|
12
|
+
},
|
|
13
|
+
"keywords": [
|
|
14
|
+
"mcp",
|
|
15
|
+
"model-context-protocol",
|
|
16
|
+
"design-system",
|
|
17
|
+
"claude",
|
|
18
|
+
"nexub"
|
|
19
|
+
],
|
|
20
|
+
"publishConfig": {
|
|
21
|
+
"access": "public"
|
|
22
|
+
},
|
|
23
|
+
"files": [
|
|
24
|
+
"src",
|
|
25
|
+
"!src/**/*.test.js",
|
|
26
|
+
"dist"
|
|
27
|
+
],
|
|
28
|
+
"bin": {
|
|
29
|
+
"nexub-mcp": "./src/cli.js"
|
|
30
|
+
},
|
|
31
|
+
"exports": {
|
|
32
|
+
".": "./src/server.js",
|
|
33
|
+
"./package.json": "./package.json"
|
|
34
|
+
},
|
|
35
|
+
"dependencies": {
|
|
36
|
+
"@modelcontextprotocol/sdk": "1.32.1",
|
|
37
|
+
"zod": "^4.6.7"
|
|
38
|
+
},
|
|
39
|
+
"scripts": {
|
|
40
|
+
"build": "node -e \"const fs=require('fs');fs.rmSync('dist',{recursive:true,force:true});fs.cpSync('../../plugins/nexub-ds/skills/nexub-ds','dist/skill',{recursive:true})\"",
|
|
41
|
+
"clean": "rm -rf dist",
|
|
42
|
+
"test": "node --test src/*.test.js"
|
|
43
|
+
}
|
|
6
44
|
}
|
package/src/cli.js
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
|
|
3
|
+
import { createServer, skillAvailable } from './server.js';
|
|
4
|
+
|
|
5
|
+
if (!skillAvailable()) {
|
|
6
|
+
console.error('@nexub/mcp: dist/skill is missing. In the monorepo, run `pnpm --filter @nexub/mcp build` first.');
|
|
7
|
+
process.exit(1);
|
|
8
|
+
}
|
|
9
|
+
await createServer().connect(new StdioServerTransport());
|
package/src/server.js
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
// Serves the Nexub DS Claude skill (copied into dist/skill at build) over MCP,
|
|
2
|
+
// so every MCP client gets the same reference the Claude plugin ships.
|
|
3
|
+
import { readFileSync, existsSync } from 'node:fs';
|
|
4
|
+
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
|
|
5
|
+
import { z } from 'zod';
|
|
6
|
+
|
|
7
|
+
const skillDir = new URL('../dist/skill/', import.meta.url);
|
|
8
|
+
const { version } = JSON.parse(readFileSync(new URL('../package.json', import.meta.url), 'utf8'));
|
|
9
|
+
const read = (path) => readFileSync(new URL(path, skillDir), 'utf8');
|
|
10
|
+
const text = (t) => ({ content: [{ type: 'text', text: t }] });
|
|
11
|
+
|
|
12
|
+
/** Parses references/components.md: `## <group>` headings and `- [Title](components/slug.md) \`pkg\`: desc` lines. */
|
|
13
|
+
export function loadCatalog() {
|
|
14
|
+
const catalog = [];
|
|
15
|
+
let group = '';
|
|
16
|
+
for (const line of read('references/components.md').split('\n')) {
|
|
17
|
+
if (line.startsWith('## ')) group = line.slice(3);
|
|
18
|
+
const m = /^- \[(.+?)\]\(components\/([\w-]+)\.md\) `(.+?)`( \*\*\(deprecated\)\*\*)?: (.*)$/.exec(line);
|
|
19
|
+
if (m) catalog.push({ title: m[1], slug: m[2], package: m[3], deprecated: Boolean(m[4]), group, description: m[5] });
|
|
20
|
+
}
|
|
21
|
+
return catalog;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const normalize = (s) => s.toLowerCase().replace(/[^a-z0-9]/g, '');
|
|
25
|
+
|
|
26
|
+
export function createServer() {
|
|
27
|
+
const catalog = loadCatalog();
|
|
28
|
+
const server = new McpServer({ name: 'nexub-ds', version });
|
|
29
|
+
|
|
30
|
+
server.registerTool(
|
|
31
|
+
'get_guidelines',
|
|
32
|
+
{
|
|
33
|
+
title: 'Nexub DS guidelines',
|
|
34
|
+
description:
|
|
35
|
+
'Setup steps, how to build a screen, Calm Depth principles, Liquid Glass rules, UI copy rules and the review checklist. Call this first before building any UI with Nexub DS.',
|
|
36
|
+
},
|
|
37
|
+
async () => text(read('SKILL.md').replace(/^---\n[\s\S]*?\n---\n/, '')),
|
|
38
|
+
);
|
|
39
|
+
|
|
40
|
+
server.registerTool(
|
|
41
|
+
'list_components',
|
|
42
|
+
{
|
|
43
|
+
title: 'List Nexub components and patterns',
|
|
44
|
+
description: 'Lists components (@nexub/react) and patterns (@nexub/patterns) with one-line descriptions. Optional query filters by name, category or description.',
|
|
45
|
+
inputSchema: { query: z.string().optional().describe('e.g. "table", "pricing", "Overlays"') },
|
|
46
|
+
},
|
|
47
|
+
async ({ query }) => {
|
|
48
|
+
const q = query?.toLowerCase();
|
|
49
|
+
const hits = q ? catalog.filter((c) => `${c.title} ${c.group} ${c.description}`.toLowerCase().includes(q)) : catalog;
|
|
50
|
+
if (!hits.length) return text(`No component matches "${query}". Call list_components with no query to see everything.`);
|
|
51
|
+
return text(
|
|
52
|
+
hits
|
|
53
|
+
.map((c) => `- ${c.slug} (${c.title}, ${c.package}, ${c.group})${c.deprecated ? ' DEPRECATED, do not use' : ''}: ${c.description}`)
|
|
54
|
+
.join('\n'),
|
|
55
|
+
);
|
|
56
|
+
},
|
|
57
|
+
);
|
|
58
|
+
|
|
59
|
+
server.registerTool(
|
|
60
|
+
'get_component',
|
|
61
|
+
{
|
|
62
|
+
title: 'Get a Nexub component reference',
|
|
63
|
+
description: 'Props, import, examples, when to use and accessibility notes for one component or pattern. Accepts a slug ("date-picker") or name ("DatePicker").',
|
|
64
|
+
inputSchema: { name: z.string().describe('Component slug or name') },
|
|
65
|
+
},
|
|
66
|
+
async ({ name }) => {
|
|
67
|
+
const hit = catalog.find((c) => normalize(c.slug) === normalize(name) || normalize(c.title) === normalize(name));
|
|
68
|
+
if (hit) return text(read(`references/components/${hit.slug}.md`));
|
|
69
|
+
const close = catalog.filter((c) => normalize(c.slug).includes(normalize(name))).map((c) => c.slug);
|
|
70
|
+
return text(
|
|
71
|
+
`No reference page for "${name}".${close.length ? ` Did you mean: ${close.join(', ')}?` : ''} ` +
|
|
72
|
+
'Some exported components have no page yet; read their props from the package .d.ts.',
|
|
73
|
+
);
|
|
74
|
+
},
|
|
75
|
+
);
|
|
76
|
+
|
|
77
|
+
server.registerTool(
|
|
78
|
+
'get_tokens',
|
|
79
|
+
{
|
|
80
|
+
title: 'Get Nexub design tokens',
|
|
81
|
+
description: 'Color roles, chart colors, typography roles, spacing, sizes, shape, elevation, motion, z-index and breakpoints, with Tailwind utilities and CSS variables. Optional section narrows the output.',
|
|
82
|
+
inputSchema: {
|
|
83
|
+
section: z.string().optional().describe('e.g. "Color roles", "Spacing", "Motion", "Typography roles"'),
|
|
84
|
+
},
|
|
85
|
+
},
|
|
86
|
+
async ({ section }) => {
|
|
87
|
+
const md = read('references/tokens.md');
|
|
88
|
+
if (!section) return text(md);
|
|
89
|
+
const parts = md.split(/\n(?=## )/);
|
|
90
|
+
const hit = parts.find((p) => p.slice(3, p.indexOf('\n')).toLowerCase().includes(section.toLowerCase()));
|
|
91
|
+
return text(hit ?? `No section "${section}". Sections: ${parts.slice(1).map((p) => p.slice(3, p.indexOf('\n'))).join(', ')}`);
|
|
92
|
+
},
|
|
93
|
+
);
|
|
94
|
+
|
|
95
|
+
return server;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
export const skillAvailable = () => existsSync(new URL('SKILL.md', skillDir));
|