Diagnosis

A modern, component-based Drupal 11 theme built for the Canvas visual site builder. Diagnosis provides a scalable design system with 30+ Single Directory Components (SDCs), Tailwind CSS 4 integration, and a focus on accessibility and performance.

Features

• Canvas Ready: Fully integrated with Drupal's Canvas visual site builder for intuitive page building
• 30+ SDC Components: Comprehensive library of reusable, configurable components
• Tailwind CSS 4: Modern utility-first CSS framework with custom design tokens
• CVA (Class Variant Authority): Type-safe variant styling for consistent component behavior
• Accessibility First: WCAG 2.1 Level AA compliant components
• PHP 8.3+ Ready: Modern PHP with typed hooks and strict typing
• Flexible Theming: Light/dark mode support with customizable color schemes
• Performance Optimized: Minimal CSS bundle with Tailwind's optimization

Getting Started

Enable the Theme

1. Navigate to Appearance in your Drupal admin
2. Click Install and set as default next to Diagnosis
3. Configure theme settings at Appearance > Settings > Diagnosis

Configure Color Scheme

The theme supports light and dark color schemes:

1. Go to Appearance > Settings > Diagnosis
2. Select your preferred color scheme (Light or Dark)
3. Save the configuration

Component Library

Diagnosis includes 30+ professionally designed components organized into categories:

Base Components

• Heading: Configurable headings with multiple sizes and styling options
• Text: Rich text content with formatting
• Button: Multiple button variants (primary, secondary, inverted) with icons
• Anchor: Styled links with variants
• Icon: Font Awesome icon integration
• Image: Responsive images with lazy loading
• Badge: Label and category badges

Layout Components

• Navbar: Responsive navigation with mobile menu
• Footer: Multi-column footer with social links
• Menu Container: Flexible menu wrapper for navigation

Content Components

• Card: Versatile card component with multiple orientations
• Card Icon: Icon-based feature cards
• Card Logo: Logo showcase cards
• Card Pricing: Pricing table cards
• Card Testimonial: Customer testimonial cards
• Blockquote: Styled quotations

Hero Components

• Hero Billboard: Full-width hero with background image
• Hero Blog: Blog-style hero with metadata
• Hero Side by Side: Split-screen hero layout
• Stats Section: Statistics display with multiple columns
• CTA: Call-to-action sections

Interactive Components

• Accordion: Expandable content sections
• Accordion Container: Wrapper for accordion groups
• Tabs: Tabbed content interface
• Tab: Individual tab panels
• Carousel: Image and content carousels
• Carousel Slide: Individual carousel items

Form Components

• Address: Formatted address display
• Email: Email link component
• Phone: Phone number link component
• Plain Text: Simple text input display
• Date: Formatted date display

Accessibility

Diagnosis is designed with accessibility as a priority:

• WCAG 2.1 Level AA compliant components
• Semantic HTML5 markup
• Proper ARIA labels and roles
• Keyboard navigation support
• Screen reader tested
• Color contrast verified
• Focus indicators on all interactive elements

Performance

• Minimal CSS bundle (~50KB gzipped)
• Optimized component loading
• Lazy loading for images
• No jQuery dependency
• Modern CSS with minimal JavaScript

Support

• Issue Queue: https://www.drupal.org/project/issues/diagnosis
• Source Code: https://git.drupalcode.org/project/diagnosis
• Documentation: See the README.md, CLAUDE.md, and AGENTS.md in the theme directory

Credits

Diagnosis is a fork of the Mercury theme, adapted and enhanced for broader use cases with expanded component library and improved Canvas integration.

Supporting organizations

Kanopi Studios is a woman-owned web design, development, and support agency dedicated to helping you create the strongest possible connections between your content and your audiences.

With concentrations in healthcare, nonprofits, higher education, and corporate work, Kanopi works with a diverse group of organizations that strive to create a better digital world.

The Kanopi Studios project team:

• Design: Nicole Karhoff
• Development: Anne Bonham, Kerry Murphy, & Nicole Karhoff
• Technical Lead: Jim Birch
• Project Management: Ben Merkley