standby-design-mcp 0.1.3 → 0.1.4
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/LICENSE +21 -21
- package/dist/http.js +26 -23
- package/dist/index.js +26 -23
- package/package.json +53 -53
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2026 Karsten Kreh
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Karsten Kreh
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/http.js
CHANGED
|
@@ -2144,8 +2144,8 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
|
|
|
2144
2144
|
["muted", "surface", 850],
|
|
2145
2145
|
["muted-foreground", "surface", 300],
|
|
2146
2146
|
[null, null, "Accent"],
|
|
2147
|
-
["accent", "brand",
|
|
2148
|
-
["accent-foreground", "brand", fgStep(brandMap[
|
|
2147
|
+
["accent", "brand", 850],
|
|
2148
|
+
["accent-foreground", "brand", fgStep(brandMap[850]?.hex, brandMap, 50, 950, fgMode)],
|
|
2149
2149
|
[null, null, "Destructive"],
|
|
2150
2150
|
destDark,
|
|
2151
2151
|
destFgDark,
|
|
@@ -2155,15 +2155,15 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
|
|
|
2155
2155
|
[null, null, "Border / Input / Ring"],
|
|
2156
2156
|
["border", "surface", 600],
|
|
2157
2157
|
["border-muted", "surface", 700],
|
|
2158
|
-
["input", "surface",
|
|
2158
|
+
["input", "surface", 600],
|
|
2159
2159
|
["ring", "surface", 500],
|
|
2160
2160
|
[null, null, "Sidebar"],
|
|
2161
|
-
["sidebar", "surface",
|
|
2161
|
+
["sidebar", "surface", 825],
|
|
2162
2162
|
["sidebar-foreground", "surface", 25],
|
|
2163
2163
|
sbPrimDark,
|
|
2164
2164
|
sbPrimFgDark,
|
|
2165
|
-
["sidebar-accent", "brand",
|
|
2166
|
-
["sidebar-accent-foreground", "brand", fgStep(brandMap[
|
|
2165
|
+
["sidebar-accent", "brand", 850],
|
|
2166
|
+
["sidebar-accent-foreground", "brand", fgStep(brandMap[850]?.hex, brandMap, 50, 950, fgMode)],
|
|
2167
2167
|
["sidebar-border", "surface", 600],
|
|
2168
2168
|
["sidebar-ring", "surface", 500]
|
|
2169
2169
|
]);
|
|
@@ -2196,12 +2196,12 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
|
|
|
2196
2196
|
[`${n}-popover-foreground`, `${n}-surface`, 975],
|
|
2197
2197
|
[null, null, "Secondary"],
|
|
2198
2198
|
[`${n}-secondary`, n, 200],
|
|
2199
|
-
[`${n}-secondary-foreground`, n, 900],
|
|
2199
|
+
[`${n}-secondary-foreground`, n, fgStep(aMap[200]?.hex, aMap, 100, 900, fgMode)],
|
|
2200
2200
|
[null, null, "Muted / Subtle / Accent"],
|
|
2201
2201
|
[`${n}-muted`, `${n}-surface`, 75],
|
|
2202
2202
|
[`${n}-muted-foreground`, `${n}-surface`, 700],
|
|
2203
2203
|
[`${n}-accent`, n, 100],
|
|
2204
|
-
[`${n}-accent-foreground`, n, 950],
|
|
2204
|
+
[`${n}-accent-foreground`, n, fgStep(aMap[100]?.hex, aMap, 50, 950, fgMode)],
|
|
2205
2205
|
[`${n}-subtle`, n, 100],
|
|
2206
2206
|
[`${n}-subtle-foreground`, n, 950],
|
|
2207
2207
|
[null, null, "Border / Input / Ring"],
|
|
@@ -2223,18 +2223,18 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
|
|
|
2223
2223
|
[`${n}-popover-foreground`, `${n}-surface`, 25],
|
|
2224
2224
|
[null, null, "Secondary"],
|
|
2225
2225
|
[`${n}-secondary`, n, 800],
|
|
2226
|
-
[`${n}-secondary-foreground`, n, 100],
|
|
2226
|
+
[`${n}-secondary-foreground`, n, fgStep(aMap[800]?.hex, aMap, 100, 900, fgMode)],
|
|
2227
2227
|
[null, null, "Muted / Subtle / Accent"],
|
|
2228
2228
|
[`${n}-muted`, `${n}-surface`, 850],
|
|
2229
2229
|
[`${n}-muted-foreground`, `${n}-surface`, 300],
|
|
2230
|
-
[`${n}-accent`, n,
|
|
2231
|
-
[`${n}-accent-foreground`, n, 50],
|
|
2230
|
+
[`${n}-accent`, n, 850],
|
|
2231
|
+
[`${n}-accent-foreground`, n, fgStep(aMap[850]?.hex, aMap, 50, 950, fgMode)],
|
|
2232
2232
|
[`${n}-subtle`, n, 850],
|
|
2233
2233
|
[`${n}-subtle-foreground`, n, 50],
|
|
2234
2234
|
[null, null, "Border / Input / Ring"],
|
|
2235
|
-
[`${n}-border`, `${n}-surface`,
|
|
2235
|
+
[`${n}-border`, `${n}-surface`, 600],
|
|
2236
2236
|
[`${n}-border-muted`, `${n}-surface`, 700],
|
|
2237
|
-
[`${n}-input`, `${n}-surface`,
|
|
2237
|
+
[`${n}-input`, `${n}-surface`, 600],
|
|
2238
2238
|
[`${n}-ring`, `${n}-surface`, 500]
|
|
2239
2239
|
]);
|
|
2240
2240
|
accentBlocks += `
|
|
@@ -2260,7 +2260,7 @@ function generateLlmBriefing(brandHex, effectiveBgHex, effectiveErrorHex, accent
|
|
|
2260
2260
|
)
|
|
2261
2261
|
].join("\n");
|
|
2262
2262
|
const pinnedNote = brandPin || errorPin || accentPalettes.some((a) => a.pin) ? `
|
|
2263
|
-
> **Pinned** means the exact input hex is used
|
|
2263
|
+
> **Pinned** means the exact input hex is used instead of the generated palette step \u2014 for the primary (\`brand-600/400\`), destructive (\`error-600/400\`), or accent (\`{accent}-600/400\`) role of that color.
|
|
2264
2264
|
` : "";
|
|
2265
2265
|
let pinnedContrastWarning = "";
|
|
2266
2266
|
if (brandPin) {
|
|
@@ -2290,23 +2290,24 @@ ${pinnedNote}${pinnedContrastWarning}
|
|
|
2290
2290
|
| \`--primary-subtle\` | brand-100 | brand-850 | Tinted brand fills: callouts, selected items |
|
|
2291
2291
|
| \`--secondary\` | brand-200 | brand-800 | Secondary buttons |
|
|
2292
2292
|
| \`--muted\` | surface-75 | surface-850 | Muted backgrounds |
|
|
2293
|
-
| \`--accent\` | brand-100 | brand-
|
|
2293
|
+
| \`--accent\` | brand-100 | brand-850 | Interaction highlights (hover, selected) |
|
|
2294
2294
|
| \`--destructive\` | error-600 | error-400 | Error/delete actions |
|
|
2295
2295
|
| \`--destructive-subtle\` | error-100 | error-850 | Inline errors, alert backgrounds |
|
|
2296
2296
|
| \`--destructive-border\` | error-surface-300 | error-surface-700 | Error borders |
|
|
2297
2297
|
| \`--border\` | surface-300 | surface-600 | Default borders |
|
|
2298
2298
|
| \`--border-muted\` | surface-200 | surface-700 | Subtle separators |
|
|
2299
|
-
| \`--input\` | surface-300 | surface-
|
|
2299
|
+
| \`--input\` | surface-300 | surface-600 | Form-control borders (input, select, textarea) |
|
|
2300
2300
|
| \`--ring\` | surface-400 | surface-500 | Focus rings |
|
|
2301
2301
|
|
|
2302
2302
|
### Sidebar
|
|
2303
2303
|
|
|
2304
2304
|
| Token | Light | Dark |
|
|
2305
2305
|
|-------|-------|------|
|
|
2306
|
-
| \`--sidebar\` | surface-25 | surface-
|
|
2306
|
+
| \`--sidebar\` | surface-25 | surface-825 |
|
|
2307
2307
|
| \`--sidebar-primary\` | brand-600 | brand-400 |
|
|
2308
|
-
| \`--sidebar-accent\` | brand-100 | brand-
|
|
2308
|
+
| \`--sidebar-accent\` | brand-100 | brand-850 |
|
|
2309
2309
|
| \`--sidebar-border\` | surface-300 | surface-600 |
|
|
2310
|
+
| \`--sidebar-ring\` | surface-400 | surface-500 |
|
|
2310
2311
|
|
|
2311
2312
|
Every background token has a matching \`*-foreground\` counterpart. Always pair them.
|
|
2312
2313
|
${accentPalettes.length > 0 ? `
|
|
@@ -2318,11 +2319,10 @@ ${accentPalettes.map((a) => `- **${a.name}** (\`--${a.cssName}\`): \`-foreground
|
|
|
2318
2319
|
## How to Use
|
|
2319
2320
|
|
|
2320
2321
|
1. **Use semantic tokens** (\`--primary\`, \`--background\`, etc.) in component code \u2014 never reference primitive step numbers directly.
|
|
2321
|
-
2. **Tailwind**:
|
|
2322
|
+
2. **Tailwind v4**: The export ships plain CSS custom properties. To get utilities like \`bg-primary\` or \`text-foreground\`, map the variables once via \`@theme inline { --color-primary: var(--primary); \u2026 }\` \u2014 see tailwindcss.com/docs/theme.
|
|
2322
2323
|
3. **Dark mode**: Add \`.dark\` to \`<html>\` or a container. All semantic tokens remap automatically.
|
|
2323
2324
|
4. **Borders**: Default to \`--border-muted\` for subtle separation (dividers, table rows). Use \`--border\` for visible borders (cards, panels). Form controls (\`input\`, \`select\`, \`textarea\`) always use \`--input\` \u2014 never \`--border\`.
|
|
2324
2325
|
5. **Shadows and radii**: see standby.design/shape for hue-matched shadow tokens and border-radius scales.
|
|
2325
|
-
6. **Border-radius**: Base \`--radius: 0.625rem\`. Derived sizes: \`--radius-sm\` (0.6\xD7) through \`--radius-4xl\` (2.6\xD7).
|
|
2326
2326
|
|
|
2327
2327
|
## Primitive Scale Reference
|
|
2328
2328
|
|
|
@@ -2332,10 +2332,13 @@ Each color uses an 18-step scale: **25, 50, 75, 100, 200\u2013800, 825, 850, 875
|
|
|
2332
2332
|
- **200\u2013800** \u2014 core palette (buttons, text, accents)
|
|
2333
2333
|
- **825\u2013875** \u2014 dark-mode surfaces
|
|
2334
2334
|
- **900\u2013975** \u2014 high-contrast surfaces
|
|
2335
|
+
- **0 / 1000** \u2014 neutral only: pure white and pure black endpoints (\`--color-neutral-0\`, \`--color-neutral-1000\`)
|
|
2335
2336
|
|
|
2336
|
-
|
|
2337
|
+
Chroma variants:
|
|
2337
2338
|
- \`--color-{name}-{step}\` \u2014 full chroma (interactive elements)
|
|
2338
|
-
- \`--color-
|
|
2339
|
+
- \`--color-surface-{step}\` \u2014 the brand's ${pct}%-chroma counterpart (backgrounds, containers)
|
|
2340
|
+
- \`--color-error-surface-{step}\` and \`--color-{accent}-surface-{step}\` \u2014 reduced-chroma twins for error and extra accents
|
|
2341
|
+
- \`--color-neutral-{step}\` \u2014 0% chroma, no surface twin
|
|
2339
2342
|
|
|
2340
2343
|
## Settings
|
|
2341
2344
|
|
|
@@ -3454,7 +3457,7 @@ ${output}`);
|
|
|
3454
3457
|
}
|
|
3455
3458
|
|
|
3456
3459
|
// src/server.ts
|
|
3457
|
-
var SERVER_VERSION = "0.1.
|
|
3460
|
+
var SERVER_VERSION = "0.1.4";
|
|
3458
3461
|
function createServer() {
|
|
3459
3462
|
const server = new McpServer(
|
|
3460
3463
|
{ name: "standby-design", version: SERVER_VERSION },
|
package/dist/index.js
CHANGED
|
@@ -2143,8 +2143,8 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
|
|
|
2143
2143
|
["muted", "surface", 850],
|
|
2144
2144
|
["muted-foreground", "surface", 300],
|
|
2145
2145
|
[null, null, "Accent"],
|
|
2146
|
-
["accent", "brand",
|
|
2147
|
-
["accent-foreground", "brand", fgStep(brandMap[
|
|
2146
|
+
["accent", "brand", 850],
|
|
2147
|
+
["accent-foreground", "brand", fgStep(brandMap[850]?.hex, brandMap, 50, 950, fgMode)],
|
|
2148
2148
|
[null, null, "Destructive"],
|
|
2149
2149
|
destDark,
|
|
2150
2150
|
destFgDark,
|
|
@@ -2154,15 +2154,15 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
|
|
|
2154
2154
|
[null, null, "Border / Input / Ring"],
|
|
2155
2155
|
["border", "surface", 600],
|
|
2156
2156
|
["border-muted", "surface", 700],
|
|
2157
|
-
["input", "surface",
|
|
2157
|
+
["input", "surface", 600],
|
|
2158
2158
|
["ring", "surface", 500],
|
|
2159
2159
|
[null, null, "Sidebar"],
|
|
2160
|
-
["sidebar", "surface",
|
|
2160
|
+
["sidebar", "surface", 825],
|
|
2161
2161
|
["sidebar-foreground", "surface", 25],
|
|
2162
2162
|
sbPrimDark,
|
|
2163
2163
|
sbPrimFgDark,
|
|
2164
|
-
["sidebar-accent", "brand",
|
|
2165
|
-
["sidebar-accent-foreground", "brand", fgStep(brandMap[
|
|
2164
|
+
["sidebar-accent", "brand", 850],
|
|
2165
|
+
["sidebar-accent-foreground", "brand", fgStep(brandMap[850]?.hex, brandMap, 50, 950, fgMode)],
|
|
2166
2166
|
["sidebar-border", "surface", 600],
|
|
2167
2167
|
["sidebar-ring", "surface", 500]
|
|
2168
2168
|
]);
|
|
@@ -2195,12 +2195,12 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
|
|
|
2195
2195
|
[`${n}-popover-foreground`, `${n}-surface`, 975],
|
|
2196
2196
|
[null, null, "Secondary"],
|
|
2197
2197
|
[`${n}-secondary`, n, 200],
|
|
2198
|
-
[`${n}-secondary-foreground`, n, 900],
|
|
2198
|
+
[`${n}-secondary-foreground`, n, fgStep(aMap[200]?.hex, aMap, 100, 900, fgMode)],
|
|
2199
2199
|
[null, null, "Muted / Subtle / Accent"],
|
|
2200
2200
|
[`${n}-muted`, `${n}-surface`, 75],
|
|
2201
2201
|
[`${n}-muted-foreground`, `${n}-surface`, 700],
|
|
2202
2202
|
[`${n}-accent`, n, 100],
|
|
2203
|
-
[`${n}-accent-foreground`, n, 950],
|
|
2203
|
+
[`${n}-accent-foreground`, n, fgStep(aMap[100]?.hex, aMap, 50, 950, fgMode)],
|
|
2204
2204
|
[`${n}-subtle`, n, 100],
|
|
2205
2205
|
[`${n}-subtle-foreground`, n, 950],
|
|
2206
2206
|
[null, null, "Border / Input / Ring"],
|
|
@@ -2222,18 +2222,18 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
|
|
|
2222
2222
|
[`${n}-popover-foreground`, `${n}-surface`, 25],
|
|
2223
2223
|
[null, null, "Secondary"],
|
|
2224
2224
|
[`${n}-secondary`, n, 800],
|
|
2225
|
-
[`${n}-secondary-foreground`, n, 100],
|
|
2225
|
+
[`${n}-secondary-foreground`, n, fgStep(aMap[800]?.hex, aMap, 100, 900, fgMode)],
|
|
2226
2226
|
[null, null, "Muted / Subtle / Accent"],
|
|
2227
2227
|
[`${n}-muted`, `${n}-surface`, 850],
|
|
2228
2228
|
[`${n}-muted-foreground`, `${n}-surface`, 300],
|
|
2229
|
-
[`${n}-accent`, n,
|
|
2230
|
-
[`${n}-accent-foreground`, n, 50],
|
|
2229
|
+
[`${n}-accent`, n, 850],
|
|
2230
|
+
[`${n}-accent-foreground`, n, fgStep(aMap[850]?.hex, aMap, 50, 950, fgMode)],
|
|
2231
2231
|
[`${n}-subtle`, n, 850],
|
|
2232
2232
|
[`${n}-subtle-foreground`, n, 50],
|
|
2233
2233
|
[null, null, "Border / Input / Ring"],
|
|
2234
|
-
[`${n}-border`, `${n}-surface`,
|
|
2234
|
+
[`${n}-border`, `${n}-surface`, 600],
|
|
2235
2235
|
[`${n}-border-muted`, `${n}-surface`, 700],
|
|
2236
|
-
[`${n}-input`, `${n}-surface`,
|
|
2236
|
+
[`${n}-input`, `${n}-surface`, 600],
|
|
2237
2237
|
[`${n}-ring`, `${n}-surface`, 500]
|
|
2238
2238
|
]);
|
|
2239
2239
|
accentBlocks += `
|
|
@@ -2259,7 +2259,7 @@ function generateLlmBriefing(brandHex, effectiveBgHex, effectiveErrorHex, accent
|
|
|
2259
2259
|
)
|
|
2260
2260
|
].join("\n");
|
|
2261
2261
|
const pinnedNote = brandPin || errorPin || accentPalettes.some((a) => a.pin) ? `
|
|
2262
|
-
> **Pinned** means the exact input hex is used
|
|
2262
|
+
> **Pinned** means the exact input hex is used instead of the generated palette step \u2014 for the primary (\`brand-600/400\`), destructive (\`error-600/400\`), or accent (\`{accent}-600/400\`) role of that color.
|
|
2263
2263
|
` : "";
|
|
2264
2264
|
let pinnedContrastWarning = "";
|
|
2265
2265
|
if (brandPin) {
|
|
@@ -2289,23 +2289,24 @@ ${pinnedNote}${pinnedContrastWarning}
|
|
|
2289
2289
|
| \`--primary-subtle\` | brand-100 | brand-850 | Tinted brand fills: callouts, selected items |
|
|
2290
2290
|
| \`--secondary\` | brand-200 | brand-800 | Secondary buttons |
|
|
2291
2291
|
| \`--muted\` | surface-75 | surface-850 | Muted backgrounds |
|
|
2292
|
-
| \`--accent\` | brand-100 | brand-
|
|
2292
|
+
| \`--accent\` | brand-100 | brand-850 | Interaction highlights (hover, selected) |
|
|
2293
2293
|
| \`--destructive\` | error-600 | error-400 | Error/delete actions |
|
|
2294
2294
|
| \`--destructive-subtle\` | error-100 | error-850 | Inline errors, alert backgrounds |
|
|
2295
2295
|
| \`--destructive-border\` | error-surface-300 | error-surface-700 | Error borders |
|
|
2296
2296
|
| \`--border\` | surface-300 | surface-600 | Default borders |
|
|
2297
2297
|
| \`--border-muted\` | surface-200 | surface-700 | Subtle separators |
|
|
2298
|
-
| \`--input\` | surface-300 | surface-
|
|
2298
|
+
| \`--input\` | surface-300 | surface-600 | Form-control borders (input, select, textarea) |
|
|
2299
2299
|
| \`--ring\` | surface-400 | surface-500 | Focus rings |
|
|
2300
2300
|
|
|
2301
2301
|
### Sidebar
|
|
2302
2302
|
|
|
2303
2303
|
| Token | Light | Dark |
|
|
2304
2304
|
|-------|-------|------|
|
|
2305
|
-
| \`--sidebar\` | surface-25 | surface-
|
|
2305
|
+
| \`--sidebar\` | surface-25 | surface-825 |
|
|
2306
2306
|
| \`--sidebar-primary\` | brand-600 | brand-400 |
|
|
2307
|
-
| \`--sidebar-accent\` | brand-100 | brand-
|
|
2307
|
+
| \`--sidebar-accent\` | brand-100 | brand-850 |
|
|
2308
2308
|
| \`--sidebar-border\` | surface-300 | surface-600 |
|
|
2309
|
+
| \`--sidebar-ring\` | surface-400 | surface-500 |
|
|
2309
2310
|
|
|
2310
2311
|
Every background token has a matching \`*-foreground\` counterpart. Always pair them.
|
|
2311
2312
|
${accentPalettes.length > 0 ? `
|
|
@@ -2317,11 +2318,10 @@ ${accentPalettes.map((a) => `- **${a.name}** (\`--${a.cssName}\`): \`-foreground
|
|
|
2317
2318
|
## How to Use
|
|
2318
2319
|
|
|
2319
2320
|
1. **Use semantic tokens** (\`--primary\`, \`--background\`, etc.) in component code \u2014 never reference primitive step numbers directly.
|
|
2320
|
-
2. **Tailwind**:
|
|
2321
|
+
2. **Tailwind v4**: The export ships plain CSS custom properties. To get utilities like \`bg-primary\` or \`text-foreground\`, map the variables once via \`@theme inline { --color-primary: var(--primary); \u2026 }\` \u2014 see tailwindcss.com/docs/theme.
|
|
2321
2322
|
3. **Dark mode**: Add \`.dark\` to \`<html>\` or a container. All semantic tokens remap automatically.
|
|
2322
2323
|
4. **Borders**: Default to \`--border-muted\` for subtle separation (dividers, table rows). Use \`--border\` for visible borders (cards, panels). Form controls (\`input\`, \`select\`, \`textarea\`) always use \`--input\` \u2014 never \`--border\`.
|
|
2323
2324
|
5. **Shadows and radii**: see standby.design/shape for hue-matched shadow tokens and border-radius scales.
|
|
2324
|
-
6. **Border-radius**: Base \`--radius: 0.625rem\`. Derived sizes: \`--radius-sm\` (0.6\xD7) through \`--radius-4xl\` (2.6\xD7).
|
|
2325
2325
|
|
|
2326
2326
|
## Primitive Scale Reference
|
|
2327
2327
|
|
|
@@ -2331,10 +2331,13 @@ Each color uses an 18-step scale: **25, 50, 75, 100, 200\u2013800, 825, 850, 875
|
|
|
2331
2331
|
- **200\u2013800** \u2014 core palette (buttons, text, accents)
|
|
2332
2332
|
- **825\u2013875** \u2014 dark-mode surfaces
|
|
2333
2333
|
- **900\u2013975** \u2014 high-contrast surfaces
|
|
2334
|
+
- **0 / 1000** \u2014 neutral only: pure white and pure black endpoints (\`--color-neutral-0\`, \`--color-neutral-1000\`)
|
|
2334
2335
|
|
|
2335
|
-
|
|
2336
|
+
Chroma variants:
|
|
2336
2337
|
- \`--color-{name}-{step}\` \u2014 full chroma (interactive elements)
|
|
2337
|
-
- \`--color-
|
|
2338
|
+
- \`--color-surface-{step}\` \u2014 the brand's ${pct}%-chroma counterpart (backgrounds, containers)
|
|
2339
|
+
- \`--color-error-surface-{step}\` and \`--color-{accent}-surface-{step}\` \u2014 reduced-chroma twins for error and extra accents
|
|
2340
|
+
- \`--color-neutral-{step}\` \u2014 0% chroma, no surface twin
|
|
2338
2341
|
|
|
2339
2342
|
## Settings
|
|
2340
2343
|
|
|
@@ -3453,7 +3456,7 @@ ${output}`);
|
|
|
3453
3456
|
}
|
|
3454
3457
|
|
|
3455
3458
|
// src/server.ts
|
|
3456
|
-
var SERVER_VERSION = "0.1.
|
|
3459
|
+
var SERVER_VERSION = "0.1.4";
|
|
3457
3460
|
function createServer() {
|
|
3458
3461
|
const server2 = new McpServer(
|
|
3459
3462
|
{ name: "standby-design", version: SERVER_VERSION },
|
package/package.json
CHANGED
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "standby-design-mcp",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"mcpName": "io.github.KarstenKreh/standby-design-mcp",
|
|
5
|
-
"description": "MCP server for standby.design — generate production-ready design systems (OKLCH color palettes, fluid type scales, spacing & layout, shape and icon tokens) and export them as CSS, Tailwind v4, or W3C design tokens. Every result links back to the standby.design web UI for visual fine-tuning.",
|
|
6
|
-
"license": "MIT",
|
|
7
|
-
"type": "module",
|
|
8
|
-
"homepage": "https://standby.design",
|
|
9
|
-
"repository": {
|
|
10
|
-
"type": "git",
|
|
11
|
-
"url": "git+https://github.com/KarstenKreh/Standby.Design.git",
|
|
12
|
-
"directory": "packages/mcp-server"
|
|
13
|
-
},
|
|
14
|
-
"bugs": {
|
|
15
|
-
"url": "https://github.com/KarstenKreh/Standby.Design/issues"
|
|
16
|
-
},
|
|
17
|
-
"bin": {
|
|
18
|
-
"standby-design-mcp": "./dist/index.js"
|
|
19
|
-
},
|
|
20
|
-
"files": [
|
|
21
|
-
"dist"
|
|
22
|
-
],
|
|
23
|
-
"engines": {
|
|
24
|
-
"node": ">=18"
|
|
25
|
-
},
|
|
26
|
-
"scripts": {
|
|
27
|
-
"build": "node build.mjs",
|
|
28
|
-
"prepublishOnly": "node build.mjs && node smoke.mjs",
|
|
29
|
-
"typecheck": "tsc --noEmit",
|
|
30
|
-
"smoke": "node smoke.mjs",
|
|
31
|
-
"start": "node dist/index.js"
|
|
32
|
-
},
|
|
33
|
-
"keywords": [
|
|
34
|
-
"mcp",
|
|
35
|
-
"model-context-protocol",
|
|
36
|
-
"design-system",
|
|
37
|
-
"design-tokens",
|
|
38
|
-
"color-palette",
|
|
39
|
-
"oklch",
|
|
40
|
-
"typography",
|
|
41
|
-
"tailwind",
|
|
42
|
-
"shadcn"
|
|
43
|
-
],
|
|
44
|
-
"dependencies": {
|
|
45
|
-
"@modelcontextprotocol/sdk": "^1.12.0",
|
|
46
|
-
"zod": "^3.24.0"
|
|
47
|
-
},
|
|
48
|
-
"devDependencies": {
|
|
49
|
-
"@types/node": "^22.19.21",
|
|
50
|
-
"esbuild": "^0.25.0",
|
|
51
|
-
"typescript": "^5.6.0"
|
|
52
|
-
}
|
|
53
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "standby-design-mcp",
|
|
3
|
+
"version": "0.1.4",
|
|
4
|
+
"mcpName": "io.github.KarstenKreh/standby-design-mcp",
|
|
5
|
+
"description": "MCP server for standby.design — generate production-ready design systems (OKLCH color palettes, fluid type scales, spacing & layout, shape and icon tokens) and export them as CSS, Tailwind v4, or W3C design tokens. Every result links back to the standby.design web UI for visual fine-tuning.",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"type": "module",
|
|
8
|
+
"homepage": "https://standby.design",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "git+https://github.com/KarstenKreh/Standby.Design.git",
|
|
12
|
+
"directory": "packages/mcp-server"
|
|
13
|
+
},
|
|
14
|
+
"bugs": {
|
|
15
|
+
"url": "https://github.com/KarstenKreh/Standby.Design/issues"
|
|
16
|
+
},
|
|
17
|
+
"bin": {
|
|
18
|
+
"standby-design-mcp": "./dist/index.js"
|
|
19
|
+
},
|
|
20
|
+
"files": [
|
|
21
|
+
"dist"
|
|
22
|
+
],
|
|
23
|
+
"engines": {
|
|
24
|
+
"node": ">=18"
|
|
25
|
+
},
|
|
26
|
+
"scripts": {
|
|
27
|
+
"build": "node build.mjs",
|
|
28
|
+
"prepublishOnly": "node build.mjs && node smoke.mjs",
|
|
29
|
+
"typecheck": "tsc --noEmit",
|
|
30
|
+
"smoke": "node smoke.mjs",
|
|
31
|
+
"start": "node dist/index.js"
|
|
32
|
+
},
|
|
33
|
+
"keywords": [
|
|
34
|
+
"mcp",
|
|
35
|
+
"model-context-protocol",
|
|
36
|
+
"design-system",
|
|
37
|
+
"design-tokens",
|
|
38
|
+
"color-palette",
|
|
39
|
+
"oklch",
|
|
40
|
+
"typography",
|
|
41
|
+
"tailwind",
|
|
42
|
+
"shadcn"
|
|
43
|
+
],
|
|
44
|
+
"dependencies": {
|
|
45
|
+
"@modelcontextprotocol/sdk": "^1.12.0",
|
|
46
|
+
"zod": "^3.24.0"
|
|
47
|
+
},
|
|
48
|
+
"devDependencies": {
|
|
49
|
+
"@types/node": "^22.19.21",
|
|
50
|
+
"esbuild": "^0.25.0",
|
|
51
|
+
"typescript": "^5.6.0"
|
|
52
|
+
}
|
|
53
|
+
}
|