Skip to main content
Glama

dhis2_generate_design_system

Generate design system tokens for DHIS2 applications, including color palettes, typography settings, spacing scales, and dark mode support to ensure consistent UI styling.

Instructions

Generate design system tokens (palette, typography, spacing) and dark mode support

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
themeNoTheme name
enableDarkModeNoEnable prefers-color-scheme dark styles
paletteNoCustom color palette
typographyNoTypography settings (font family, scale)
spacingNoSpacing scale tokens
densityNoDensity guidance
rtlNoInclude RTL CSS variables

Implementation Reference

  • Handler for the 'dhis2_generate_design_system' tool: extracts arguments, calls generateDesignSystemConfig, and returns the generated config as text content.
    case 'dhis2_generate_design_system': const dsArgs = args as any; const dsConfig = generateDesignSystemConfig(dsArgs); return { content: [ { type: 'text', text: dsConfig } ] };
  • Core implementation: generateDesignSystemConfig function that creates CSS custom properties (variables) for a design system theme based on provided palette, typography, and spacing parameters.
    export function generateDesignSystemConfig(args: any): string { const { theme = 'default', enableDarkMode = true, palette = { primary: '#0a6eb4', secondary: '#4a5568', success: '#0E7C86', warning: '#FFA400', danger: '#E53935' }, typography = { fontFamily: 'Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji"', scale: [12, 14, 16, 20, 24, 32] }, spacing = [4, 8, 12, 16, 24, 32] } = args; return `# Design System Configuration ## Theme Tokens (CSS Variables) \`\`\`css :root { --color-primary: ${palette.primary}; --color-secondary: ${palette.secondary}; --color-success: ${palette.success}; --color-warning: ${palette.warning}; --color-danger: ${palette.danger}; --font-family-base: ${typography.fontFamily}; --font-size-xs: ${typography.scale[0]}px; --font-size-sm: ${typography.scale[1]}px; --font-size-md: ${typography.scale[2]}px; --font-size-lg: ${typography.scale[3]}px; --font-size-xl: ${typography.scale[4]}px; --font-size-2xl: ${typography.scale[5]}px; --space-1: ${spacing[0]}px; --space-2: ${spacing[1]}px; --space-3: ${spacing[2]}px; --space-4: ${spacing[3]}px; --space-5: ${spacing[4]}px; --space-6: ${spacing[5]}px; } \`\`\` `; }
  • Tool permission registration: Maps 'dhis2_generate_design_system' to require 'canUseUITools' permission in the TOOL_PERMISSIONS Map used for filtering tools.
    private static readonly TOOL_PERMISSIONS = new Map<string, keyof UserPermissions | Array<keyof UserPermissions>>([ // Configuration and connection ['dhis2_configure', 'canViewSystemInfo'], ['dhis2_get_system_info', 'canViewSystemInfo'], // Metadata operations - Data Elements ['dhis2_list_data_elements', 'canViewMetadata'], ['dhis2_create_data_element', 'canCreateMetadata'], ['dhis2_update_data_element', 'canUpdateMetadata'], ['dhis2_delete_data_element', 'canDeleteMetadata'], // Metadata operations - Data Sets ['dhis2_list_data_sets', 'canViewMetadata'], ['dhis2_create_data_set', 'canCreateMetadata'], // Metadata operations - Categories ['dhis2_list_categories', 'canViewMetadata'], ['dhis2_create_category', 'canCreateMetadata'], ['dhis2_list_category_options', 'canViewMetadata'], ['dhis2_create_category_option', 'canCreateMetadata'], ['dhis2_list_category_combos', 'canViewMetadata'], ['dhis2_create_category_combo', 'canCreateMetadata'], ['dhis2_list_category_option_combos', 'canViewMetadata'], // Organisation Units ['dhis2_list_org_units', 'canViewMetadata'], ['dhis2_list_org_unit_groups', 'canViewMetadata'], ['dhis2_create_org_unit_group', 'canCreateMetadata'], // Validation Rules ['dhis2_list_validation_rules', 'canViewMetadata'], ['dhis2_create_validation_rule', 'canCreateMetadata'], ['dhis2_run_validation', ['canViewData', 'canRunAnalytics']], // Data Values ['dhis2_get_data_values', 'canViewData'], ['dhis2_bulk_import_data_values', 'canImportData'], // Analytics ['dhis2_get_analytics', 'canRunAnalytics'], ['dhis2_get_data_statistics', 'canRunAnalytics'], // Programs (Tracker) ['dhis2_list_programs', 'canViewMetadata'], ['dhis2_create_program', 'canManagePrograms'], ['dhis2_list_tracked_entity_types', 'canViewMetadata'], ['dhis2_create_tracked_entity_type', 'canManagePrograms'], ['dhis2_list_tracked_entity_attributes', 'canViewMetadata'], ['dhis2_create_tracked_entity_attribute', 'canManagePrograms'], ['dhis2_list_program_stages', 'canViewMetadata'], ['dhis2_create_program_stage', 'canManagePrograms'], ['dhis2_list_program_rules', 'canViewMetadata'], ['dhis2_create_program_rule', 'canManagePrograms'], // Tracker Data ['dhis2_list_tracked_entity_instances', 'canViewTEI'], ['dhis2_create_tracked_entity_instance', 'canEnrollTEI'], ['dhis2_list_enrollments', 'canViewTEI'], ['dhis2_create_enrollment', 'canEnrollTEI'], ['dhis2_list_events', 'canViewTEI'], ['dhis2_create_event', 'canManageTrackerData'], ['dhis2_bulk_import_events', 'canImportData'], ['dhis2_get_event_analytics', 'canRunAnalytics'], ['dhis2_get_enrollment_analytics', 'canRunAnalytics'], // Dashboards and Visualizations ['dhis2_list_dashboards', 'canViewData'], ['dhis2_create_dashboard', 'canManageDashboards'], ['dhis2_list_visualizations', 'canViewData'], ['dhis2_create_visualization', 'canManageDashboards'], ['dhis2_list_reports', 'canViewData'], ['dhis2_generate_report', 'canExportData'], // Web App Platform Tools ['dhis2_init_webapp', 'canConfigureApps'], ['dhis2_configure_app_manifest', 'canConfigureApps'], ['dhis2_configure_build_system', 'canConfigureApps'], ['dhis2_setup_dev_environment', 'canConfigureApps'], ['dhis2_generate_app_runtime_config', 'canConfigureApps'], ['dhis2_create_datastore_namespace', 'canConfigureApps'], ['dhis2_manage_datastore_key', 'canConfigureApps'], ['dhis2_setup_authentication_patterns', 'canConfigureApps'], ['dhis2_create_ui_components', 'canUseUITools'], ['dhis2_generate_test_setup', 'canConfigureApps'], // Debugging Tools ['dhis2_diagnose_cors_issues', 'canDebugApplications'], ['dhis2_configure_cors_allowlist', 'canDebugApplications'], ['dhis2_debug_authentication', 'canDebugApplications'], ['dhis2_fix_proxy_configuration', 'canDebugApplications'], ['dhis2_resolve_build_issues', 'canDebugApplications'], ['dhis2_optimize_performance', 'canDebugApplications'], ['dhis2_validate_environment', 'canDebugApplications'], ['dhis2_migration_assistant', 'canDebugApplications'], // Android SDK Tools ['dhis2_android_init_project', 'canUseMobileFeatures'], ['dhis2_android_configure_gradle', 'canUseMobileFeatures'], ['dhis2_android_setup_sync', 'canConfigureMobile'], ['dhis2_android_configure_storage', 'canConfigureMobile'], ['dhis2_android_setup_location_services', 'canUseMobileFeatures'], ['dhis2_android_configure_camera', 'canUseMobileFeatures'], ['dhis2_android_setup_authentication', 'canConfigureMobile'], ['dhis2_android_generate_data_models', 'canUseMobileFeatures'], ['dhis2_android_setup_testing', 'canUseMobileFeatures'], ['dhis2_android_configure_ui_patterns', 'canUseMobileFeatures'], ['dhis2_android_setup_offline_analytics', 'canUseMobileFeatures'], ['dhis2_android_configure_notifications', 'canUseMobileFeatures'], ['dhis2_android_performance_optimization', 'canUseMobileFeatures'], // UI Library Tools ['dhis2_generate_ui_form_patterns', 'canUseUITools'], ['dhis2_generate_ui_data_display', 'canUseUITools'], ['dhis2_generate_ui_navigation_layout', 'canUseUITools'], ['dhis2_generate_design_system', 'canUseUITools'], ['android_generate_material_form', 'canUseMobileFeatures'], ['android_generate_list_adapter', 'canUseMobileFeatures'], ['android_generate_navigation_drawer', 'canUseMobileFeatures'], ['android_generate_bottom_sheet', 'canUseMobileFeatures'], ]);

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/Dradebo/dhis2-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server