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
| Name | Required | Description | Default |
|---|---|---|---|
| theme | No | Theme name | |
| enableDarkMode | No | Enable prefers-color-scheme dark styles | |
| palette | No | Custom color palette | |
| typography | No | Typography settings (font family, scale) | |
| spacing | No | Spacing scale tokens | |
| density | No | Density guidance | |
| rtl | No | Include RTL CSS variables |
Implementation Reference
- src/index.ts:1097-1104 (handler)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 } ] }; - src/webapp-generators.ts:1512-1560 (handler)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; } \`\`\` `; } - src/permission-system.ts:59-178 (registration)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'], ]);