get_colors

Instructions

Implementation Reference

• src/tools/get-colors.ts:31-58 (handler)

  The main handler function for the get_colors tool. It resolves the design context, filters colors by optional role, and returns colors in the requested format (JSON, CSS, SCSS, or Tailwind).

  export function handler(index: DesignSystemIndex, args: GetColorsArgs) {
    const ctx = args.context ?? 'all';
    const resolved = ctx === 'all' ? index.resolved.all :
      ctx === 'marketing' ? index.resolved.marketing :
      ctx === 'product' ? index.resolved.product :
      index.resolved.all;
  
    let colors = resolved.colors;
  
    if (args.role) {
      colors = colors.filter((c) => c.role?.toLowerCase() === args.role!.toLowerCase());
    }
  
    if (colors.length === 0) {
      return [{ type: 'text' as const, text: `No colors found${args.role ? ` with role "${args.role}"` : ''} in ${ctx} context.` }];
    }
  
    switch (args.format) {
      case 'css':
        return [{ type: 'text' as const, text: colorsToCSSFormat(colors) }];
      case 'scss':
        return [{ type: 'text' as const, text: colorsToSCSSFormat(colors) }];
      case 'tailwind':
        return [{ type: 'text' as const, text: colorsToTailwindFormat(colors) }];
      default:
        return [{ type: 'text' as const, text: JSON.stringify(colors, null, 2) }];
    }
  }

• src/tools/get-colors.ts:19-26 (schema)

  The input schema for the get_colors tool, specifying the context (marketing/product/shared/all), role filter, and output format (json/css/scss/tailwind) parameters.

  export const INPUT_SCHEMA = {
    type: 'object' as const,
    properties: {
      context: { type: 'string', enum: ['marketing', 'product', 'shared', 'all'], default: 'all', description: 'Design context to query' },
      role: { type: 'string', description: 'Filter by semantic role: primary, secondary, accent, neutral, error, success, warning, info' },
      format: { type: 'string', enum: ['json', 'css', 'scss', 'tailwind'], default: 'json', description: 'Output format' },
    },
  };

• src/types/mcp.ts:15-24 (schema)

  The TypeScript interface `GetColorsArgs` defining the typed arguments for the get_colors tool handler.

  export interface GetColorsArgs {
    /** Filter colors to a specific design context */
    context?: 'marketing' | 'product' | 'shared' | 'all';
  
    /** Filter by semantic role (e.g. "primary", "secondary", "accent") */
    role?: string;
  
    /** Output format for the color list */
    format?: 'json' | 'css' | 'scss' | 'tailwind';
  }

• src/tools/index.ts:58-136 (registration)

  Registers all MCP tools including get_colors. The tool is imported as 'colors' from './get-colors.js'. It is listed in ALL_TOOLS (line 38) and wired to the CallToolRequestSchema handler (line 80-81) where `colors.handler` is invoked with the index and parsed args.

  export function registerAllTools(
    server: Server,
    getIndex: () => DesignSystemIndex,
  ): void {
    // ---- Tools --------------------------------------------------------------
  
    server.setRequestHandler(ListToolsRequestSchema, async () => ({
      tools: ALL_TOOLS.map((t) => ({
        name: t.TOOL_NAME,
        description: t.TOOL_DESCRIPTION,
        inputSchema: t.INPUT_SCHEMA,
      })),
    }));
  
    server.setRequestHandler(CallToolRequestSchema, async (request) => {
      const { name, arguments: args = {} } = request.params;
      const index = getIndex();
  
      try {
        switch (name) {
          case brandOverview.TOOL_NAME:
            return { content: brandOverview.handler(index) };
          case colors.TOOL_NAME:
            return { content: colors.handler(index, args as never) };
          case typography.TOOL_NAME:
            return { content: typography.handler(index, args as never) };
          case logos.TOOL_NAME:
            return { content: await logos.handler(index, args as never) };
          case components.TOOL_NAME:
            return { content: components.handler(index, args as never) };
          case guidelines.TOOL_NAME:
            return { content: guidelines.handler(index, args as never) };
          case tokens.TOOL_NAME:
            return { content: tokens.handler(index, args as never) };
          case textures.TOOL_NAME:
            return { content: textures.handler(index, args as never) };
          case css.TOOL_NAME:
            return { content: css.handler(index, args as never) };
          case searchBrand.TOOL_NAME:
            return { content: searchBrand.handler(index, args as never) };
          case contextDiff.TOOL_NAME:
            return { content: contextDiff.handler(index, args as never) };
          case validateUsage.TOOL_NAME:
            return { content: validateUsage.handler(index, args as never) };
          default:
            return {
              content: [{ type: 'text' as const, text: `Unknown tool: ${name}` }],
              isError: true,
            };
        }
      } catch (err) {
        const message = err instanceof Error ? err.message : String(err);
        return {
          content: [{ type: 'text' as const, text: `Error executing ${name}: ${message}` }],
          isError: true,
        };
      }
    });
  
    // ---- Resources ----------------------------------------------------------
  
    server.setRequestHandler(ListResourcesRequestSchema, async () => ({
      resources: listResources(getIndex()),
    }));
  
    server.setRequestHandler(ReadResourceRequestSchema, async (request) => {
      return readResource(request.params.uri, getIndex());
    });
  
    // ---- Prompts ------------------------------------------------------------
  
    server.setRequestHandler(ListPromptsRequestSchema, async () => ({
      prompts: listPrompts(),
    }));
  
    server.setRequestHandler(GetPromptRequestSchema, async (request) => {
      return getPrompt(request.params.name, request.params.arguments ?? {}, getIndex());
    });
  }

• src/formatters/css.ts:13-17 (helper)

  Helper formatter that converts DesignColor[] to CSS custom properties format, used when format='css'.

  export function colorsToCSSFormat(colors: DesignColor[]): string {
    if (colors.length === 0) return '/* No colors defined */';
    const lines = colors.map((c) => `  ${c.token}: ${c.value};`);
    return `:root {\n${lines.join('\n')}\n}`;
  }

• src/formatters/scss.ts:13-21 (helper)

  Helper formatter that converts DesignColor[] to SCSS variable declarations, used when format='scss'.

  export function colorsToSCSSFormat(colors: DesignColor[]): string {
    if (colors.length === 0) return '// No colors defined';
    return colors
      .map((c) => {
        const varName = c.token.replace(/^--/, '$');
        return `${varName}: ${c.value};`;
      })
      .join('\n');
  }

• src/formatters/tailwind.ts:13-39 (helper)

  Helper formatter that converts DesignColor[] to a Tailwind CSS theme extension JSON object, used when format='tailwind'.

  export function colorsToTailwindFormat(colors: DesignColor[]): string {
    const colorMap: Record<string, string | Record<string, string>> = {};
  
    for (const c of colors) {
      const key = c.token
        .replace(/^--color-/, '')
        .replace(/^--/, '');
  
      // Handle nested keys like "primary-light" -> { primary: { light: value } }
      const parts = key.split('-');
      if (parts.length === 1) {
        colorMap[parts[0]] = c.value;
      } else {
        const group = parts[0];
        const variant = parts.slice(1).join('-');
        if (typeof colorMap[group] === 'string') {
          colorMap[group] = { DEFAULT: colorMap[group] as string, [variant]: c.value };
        } else if (typeof colorMap[group] === 'object') {
          (colorMap[group] as Record<string, string>)[variant] = c.value;
        } else {
          colorMap[group] = { [variant]: c.value };
        }
      }
    }
  
    return JSON.stringify({ theme: { extend: { colors: colorMap } } }, null, 2);
  }