MCP Color Server

Instructions

Implementation Reference

• src/tools/export-scss.ts:55-154 (handler)

  Core handler function that validates input parameters, parses colors, generates SCSS code including variables/maps/mixins, creates additional formats, and returns structured response.
  async function exportScss( params: ExportScssParams ): Promise<ToolResponse | ErrorResponse> { const startTime = Date.now(); try { // Validate parameters const { error, value: validatedParams } = exportScssSchema.validate(params); if (error) { return createErrorResponse( 'export_scss', 'INVALID_PARAMETERS', `Invalid parameters: ${error.details.map(d => d.message).join(', ')}`, Date.now() - startTime ); } // Parse colors const colors: UnifiedColor[] = []; for (const colorStr of validatedParams.colors) { try { const color = new UnifiedColor(colorStr); colors.push(color); } catch { return createErrorResponse( 'export_scss', 'INVALID_COLOR', `Invalid color format: ${colorStr}`, Date.now() - startTime, { details: { provided: colorStr }, suggestions: [ 'Use hex format like #FF0000', 'Use RGB format like rgb(255, 0, 0)', 'Use HSL format like hsl(0, 100%, 50%)', ], } ); } } // Generate SCSS const scss = generateSCSS(colors, validatedParams); // Generate additional export formats const exportFormats = { scss, css: convertScssToCSS(scss), json: { colors: colors.map((color, index) => ({ index: index + 1, hex: color.hex, rgb: color.rgb, hsl: color.hsl, semantic_name: validatedParams.semantic_names?.[index], variable_name: getVariableName(index, validatedParams), })), format: validatedParams.format, prefix: validatedParams.prefix, namespace: validatedParams.namespace, metadata: { total_colors: colors.length, includes_functions: validatedParams.include_functions, includes_variants: validatedParams.include_variants, }, }, }; const executionTime = Date.now() - startTime; return createSuccessResponse( 'export_scss', { scss_output: scss, format: validatedParams.format, color_count: colors.length, prefix: validatedParams.prefix, namespace: validatedParams.namespace, includes_functions: validatedParams.include_functions, includes_variants: validatedParams.include_variants, }, executionTime, { recommendations: [ 'Use SCSS maps for better organization of large color palettes', 'Consider using mixins for consistent color application', 'Use functions for dynamic color manipulation', ], exportFormats, } ); } catch (error) { return createErrorResponse( 'export_scss', 'PROCESSING_ERROR', error instanceof Error ? error.message : 'Unknown error occurred', Date.now() - startTime ); } }
• src/tools/export-scss.ts:10-43 (schema)

  Joi schema defining input parameters for the export_scss tool including colors array, format options, prefixes, flags, and optional semantic names/namespace.
  const exportScssSchema = Joi.object({ colors: Joi.array() .items(Joi.string()) .min(1) .max(100) .required() .description('Array of colors to export'), format: Joi.string() .valid('variables', 'map', 'mixins', 'all') .default('all') .description('SCSS format type'), prefix: Joi.string() .pattern(/^[a-zA-Z][a-zA-Z0-9-_]*$/) .default('color') .description('Prefix for SCSS variable names'), include_functions: Joi.boolean() .default(true) .description('Include utility functions and mixins'), include_variants: Joi.boolean() .default(true) .description('Include lighter/darker variants'), semantic_names: Joi.array() .items(Joi.string()) .description('Optional semantic names for colors'), namespace: Joi.string() .pattern(/^[a-zA-Z][a-zA-Z0-9-_]*$/) .description('Optional namespace for variables'), });
• src/tools/export-scss.ts:337-343 (registration)

  ToolHandler object exporting the tool with name, description, schema-derived parameters, and wrapper around the main exportScss handler.
  export const exportScssTool: ToolHandler = { name: 'export_scss', description: 'Generate SCSS variables, maps, and mixins for color palettes with utility functions', parameters: exportScssSchema.describe(), handler: async (params: unknown) => exportScss(params as ExportScssParams), };
• src/tools/index.ts:140-143 (registration)

  Central registration of the export_scss tool (and related export tools) into the ToolRegistry singleton.
  toolRegistry.registerTool(exportCssTool); toolRegistry.registerTool(exportScssTool); toolRegistry.registerTool(exportTailwindTool); toolRegistry.registerTool(exportJsonTool);
• src/tools/export-scss.ts:159-296 (helper)

  Helper function that generates the actual SCSS code: variables, color maps, utility functions, and mixins based on format, prefixes, variants, etc.
  function generateSCSS( colors: UnifiedColor[], params: ExportScssParams ): string { const { format, prefix, include_functions, include_variants, semantic_names, namespace, } = params; let scss = ''; const ns = namespace ? `${namespace}-` : ''; // Header comment scss += `// Generated SCSS Color Palette\n`; scss += `// Format: ${format}\n`; scss += `// Colors: ${colors.length}\n\n`; // Generate SCSS variables if (format === 'variables' || format === 'all') { scss += `// Color Variables\n`; colors.forEach((color, index) => { const name = semantic_names?.[index] || `${prefix}-${index + 1}`; const safeName = name.toLowerCase().replace(/[^a-z0-9-]/g, '-'); scss += `$${ns}${safeName}: ${color.hex};\n`; if (include_variants) { const lighterColor = new UnifiedColor( `hsl(${color.hsl.h}, ${color.hsl.s}%, ${Math.min(100, color.hsl.l + 15)}%)` ); const darkerColor = new UnifiedColor( `hsl(${color.hsl.h}, ${color.hsl.s}%, ${Math.max(0, color.hsl.l - 15)}%)` ); scss += `$${ns}${safeName}-light: ${lighterColor.hex};\n`; scss += `$${ns}${safeName}-dark: ${darkerColor.hex};\n`; } }); scss += '\n'; } // Generate SCSS color map if (format === 'map' || format === 'all') { scss += `// Color Map\n`; scss += `$${ns}colors: (\n`; colors.forEach((color, index) => { const name = semantic_names?.[index] || `${prefix}-${index + 1}`; const safeName = name.toLowerCase().replace(/[^a-z0-9-]/g, '-'); scss += ` '${safeName}': ${color.hex},\n`; if (include_variants) { const lighterColor = new UnifiedColor( `hsl(${color.hsl.h}, ${color.hsl.s}%, ${Math.min(100, color.hsl.l + 15)}%)` ); const darkerColor = new UnifiedColor( `hsl(${color.hsl.h}, ${color.hsl.s}%, ${Math.max(0, color.hsl.l - 15)}%)` ); scss += ` '${safeName}-light': ${lighterColor.hex},\n`; scss += ` '${safeName}-dark': ${darkerColor.hex},\n`; } }); scss += `);\n\n`; } // Generate utility functions and mixins if ((format === 'mixins' || format === 'all') && include_functions) { scss += `// Utility Functions\n`; // Color getter function scss += `@function ${ns}color($name) {\n`; scss += ` @if map-has-key($${ns}colors, $name) {\n`; scss += ` @return map-get($${ns}colors, $name);\n`; scss += ` }\n`; scss += ` @warn "Color '#{$name}' not found in $${ns}colors map";\n`; scss += ` @return null;\n`; scss += `}\n\n`; // Background color mixin scss += `// Background Color Mixin\n`; scss += `@mixin ${ns}bg-color($name, $opacity: 1) {\n`; scss += ` $color: ${ns}color($name);\n`; scss += ` @if $color {\n`; scss += ` @if $opacity == 1 {\n`; scss += ` background-color: $color;\n`; scss += ` } @else {\n`; scss += ` background-color: rgba($color, $opacity);\n`; scss += ` }\n`; scss += ` }\n`; scss += `}\n\n`; // Text color mixin scss += `// Text Color Mixin\n`; scss += `@mixin ${ns}text-color($name, $opacity: 1) {\n`; scss += ` $color: ${ns}color($name);\n`; scss += ` @if $color {\n`; scss += ` @if $opacity == 1 {\n`; scss += ` color: $color;\n`; scss += ` } @else {\n`; scss += ` color: rgba($color, $opacity);\n`; scss += ` }\n`; scss += ` }\n`; scss += `}\n\n`; // Border color mixin scss += `// Border Color Mixin\n`; scss += `@mixin ${ns}border-color($name, $width: 1px, $style: solid) {\n`; scss += ` $color: ${ns}color($name);\n`; scss += ` @if $color {\n`; scss += ` border: $width $style $color;\n`; scss += ` }\n`; scss += `}\n\n`; // Theme mixin scss += `// Theme Mixin\n`; scss += `@mixin ${ns}theme($background, $text, $accent: null) {\n`; scss += ` @include ${ns}bg-color($background);\n`; scss += ` @include ${ns}text-color($text);\n`; scss += ` \n`; scss += ` @if $accent {\n`; scss += ` a, .accent {\n`; scss += ` @include ${ns}text-color($accent);\n`; scss += ` }\n`; scss += ` }\n`; scss += `}\n\n`; } return scss; }