Liverpool Dental Learning Hub - CSS Theme

CSS theme files for Liverpool Dental School's OpenEdX MFE customization. This package provides comprehensive styling for all OpenEdX Micro-Frontend applications using Paragon's design token system.

📦 What's Included

Standalone Token Files (for Default MFEs)

Use these for MFEs that don't need custom styling beyond brand tokens:

• liverpool-core-override.css (18KB) - Structural design tokens (typography, spacing, layout, borders)
• liverpool-light-override.css (27KB) - Color tokens and brand colors (Liverpool Red, University Blue)

All-in-One "Complete" Files (for Major MFEs)

These files are self-contained - each includes core tokens + color tokens + header/footer + MFE-specific styles. Use one file per MFE:

• liverpool-learning-complete.css (159KB)

  • Contains: Core + Light + Header/Footer + Learning MFE styles
  • For: Course player, videos, problems, sequence navigation

• liverpool-learner-dashboard-complete.css (126KB)

  • Contains: Core + Light + Header/Footer + Dashboard styles
  • For: Course cards, progress tracking, learner home

• liverpool-authoring-complete.css (129KB)

  • Contains: Core + Light + Header/Footer + Studio/Authoring styles
  • For: Course creation, content editing, settings

• liverpool-authn-complete.css (73KB)

  • Contains: Core + Light + Header/Footer
  • For: Login, registration, password reset

• liverpool-account-complete.css (73KB)

  • Contains: Core + Light + Header/Footer
  • For: Account settings, preferences

• liverpool-communications-complete.css (73KB)

  • Contains: Core + Light + Header/Footer
  • For: Course communications, notifications

• liverpool-discussions-complete.css (73KB)

  • Contains: Core + Light + Header/Footer
  • For: Discussion forums, course discussions

• liverpool-gradebook-complete.css (73KB)

  • Contains: Core + Light + Header/Footer
  • For: Instructor gradebook, grade management

• liverpool-ora-grading-complete.css (73KB)

  • Contains: Core + Light + Header/Footer
  • For: Open Response Assessment grading interface

• liverpool-profile-complete.css (73KB)

  • Contains: Core + Light + Header/Footer
  • For: User profile, public profile pages

Development & Utility Files

These are included in the complete files but available standalone for development:

• liverpool-header-footer.css (28KB) - Custom header and footer (included in complete files)
• liverpool-utilities.css (11KB) - Utility classes (for custom development)
• glassmorphism-utilities.css (10KB) - Glass effects (for custom development)

Total: ~1029KB of CSS (but MFEs only load 18-159KB depending on which file they use)

🔑 Key Concept: Complete vs Standalone

Important: The "complete" files are all-in-one bundles. You don't need to load multiple files:

❌ Wrong - Don't load these together:

<link href="liverpool-core-override.css">
<link href="liverpool-light-override.css">
<link href="liverpool-learning-complete.css">  <!-- Already contains core + light! -->

✅ Correct - Load just the complete file:

<link href="liverpool-learning-complete.css">  <!-- Contains everything -->

✅ Also Correct - For simple MFEs without custom styles:

<link href="liverpool-core-override.css">
<link href="liverpool-light-override.css">

🚀 Usage

Via CDN (Recommended for Production)

Use jsDelivr CDN for automatic caching and global distribution:

<!-- Core tokens (load first) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-core-override.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-light-override.css">

<!-- MFE-specific (load as needed) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-learning-complete.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-learner-dashboard-complete.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-authoring-complete.css">

<!-- Additional components -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-header-footer.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-utilities.css">

Via npm

Install the package:

npm install @brainjam/liverpool-dental-theme

Import in your application:

// Import all styles
import '@brainjam/liverpool-dental-theme/liverpool-core-override.css';
import '@brainjam/liverpool-dental-theme/liverpool-light-override.css';
import '@brainjam/liverpool-dental-theme/liverpool-learning-complete.css';

With Tutor Plugin

This package is designed to work with the tutor-liverpool-dental plugin. The plugin uses PARAGON_THEME_URLS to configure different CSS for each MFE:

# Default MFEs (profile, account, etc.) - Use standalone token files
paragon_theme_urls = {
    "core": {
        "urls": {
            "default": "https://cdn.jsdelivr.net/npm/@openedx/paragon@23/dist/core.min.css",
            "brandOverride": "https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-core-override.css"
        }
    },
    "defaultTheme": "light",
    "variants": {
        "light": {
            "urls": {
                "default": "https://cdn.jsdelivr.net/npm/@openedx/paragon@23/dist/light.min.css",
                "brandOverride": "https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-light-override.css"
            }
        }
    }
}

# Learning MFE - Use complete file (loaded for BOTH core and light)
paragon_theme_urls_learning = {
    "core": {
        "urls": {
            "default": "https://cdn.jsdelivr.net/npm/@openedx/paragon@23/dist/core.min.css",
            "brandOverride": "https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-learning-complete.css"
        }
    },
    "defaultTheme": "light",
    "variants": {
        "light": {
            "urls": {
                "default": "https://cdn.jsdelivr.net/npm/@openedx/paragon@23/dist/light.min.css",
                "brandOverride": "https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-learning-complete.css"  # Same file!
            }
        }
    }
}

# Apply via MFE_CONFIG_OVERRIDES
MFE_CONFIG["PARAGON_THEME_URLS"] = paragon_theme_urls
MFE_CONFIG_OVERRIDES["learning"] = {"PARAGON_THEME_URLS": paragon_theme_urls_learning}
MFE_CONFIG_OVERRIDES["learner-dashboard"] = {"PARAGON_THEME_URLS": paragon_theme_urls_learner_dashboard}
MFE_CONFIG_OVERRIDES["authoring"] = {"PARAGON_THEME_URLS": paragon_theme_urls_authoring}

Note: For "complete" files, use the same file for both core.brandOverride and light.brandOverride. The file loads once and provides all styling.

📋 File Descriptions

liverpool-core-override.css

Foundational design tokens including:

• Typography scale (Poppins font family)
• Spacing system
• Layout containers
• Base component styles

liverpool-light-override.css

Brand color palette:

• Primary: Liverpool Red (#C8102E)
• Secondary: Blue, Purple, Orange accents
• Neutral grays
• Semantic colors (success, warning, error, info)

liverpool-learning-complete.css

Learning MFE customization:

• Course unit navigation
• Content rendering (HTML, video, problems)
• Sequence navigation
• Course outline sidebar
• Problem feedback styles

liverpool-learner-dashboard-complete.css

Dashboard MFE customization:

• Course cards and grid
• Progress indicators
• Filters and search
• Welcome banner
• Profile quick links

liverpool-authoring-complete.css

Authoring MFE customization:

• Course outline editor
• Component editors
• Settings panels
• Preview modes
• Publishing workflow

liverpool-header-footer.css

Custom components:

• Liverpool branded header
• Custom footer with university branding
• Navigation menus
• Responsive mobile layouts

liverpool-utilities.css

Utility classes:

• Spacing helpers
• Text utilities
• Display utilities
• Responsive helpers

glassmorphism-utilities.css

Modern glass-effect UI:

• Backdrop blur effects
• Translucent overlays
• Card glassmorphism
• Button glass effects

🎨 Design System

Colors

/* Primary Brand */
--liverpool-red: #C8102E;
--liverpool-red-dark: #A00D24;

/* Secondary Palette */
--liverpool-blue: #006DAE;
--liverpool-purple: #7B2D80;
--liverpool-orange: #ED8B00;

/* Neutrals */
--gray-50: #F9FAFB;
--gray-900: #111827;

Typography

• Primary Font: Poppins (Google Fonts)
• Weights: 300 (Light), 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)
• Scale: 12px, 14px, 16px, 18px, 20px, 24px, 30px, 36px, 48px

Spacing

• Scale: 4px base unit
• Steps: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px

🔧 Development

Local Development

# Clone the repository
git clone https://github.com/brainjamworks/liverpool-dental-theme.git
cd liverpool-dental-theme

# Serve files locally (for testing)
python3 -m http.server 3000 --bind localhost

# CSS now available at:
# http://localhost:3000/liverpool-core-override.css

Making Changes

1. Edit CSS files directly
2. Test changes in your OpenEdX environment
3. Update version in package.json
4. Commit changes
5. Publish new version to npm

Publishing

# Bump version
npm version patch  # or minor, or major

# Publish to npm
npm publish

# Tag the release
git tag v1.0.1
git push origin v1.0.1

📖 Documentation

CSS Architecture

The CSS is organized in layers:

1. Tokens (core-override, light-override) - Variables and design tokens
2. Components (header-footer) - Reusable component styles
3. MFE Specific (learning, dashboard, authoring) - Application-specific styles
4. Utilities (utilities, glassmorphism) - Helper classes

Load Order

For correct styling, load in this order:

1. liverpool-core-override.css (tokens first)
2. liverpool-light-override.css (colors second)
3. MFE-specific CSS (learning/dashboard/authoring)
4. liverpool-header-footer.css (components)
5. liverpool-utilities.css (utilities last)
6. glassmorphism-utilities.css (effects)

🔗 Related Projects

• tutor-liverpool-dental - Tutor plugin that uses this CSS package
• brainjam-openedx-xblocks - Custom XBlocks for Liverpool Dental
• liverpool-frontend-component-footer - Custom footer component
• liverpool-frontend-component-header - Custom header component

📄 License

MIT License - see LICENSE file for details

🏥 About

Created by BrainJam for the University of Liverpool Dental School continuing professional development (CPD) platform.

Repository: https://github.com/brainjamworks/liverpool-dental-theme npm Package: https://www.npmjs.com/package/@brainjam/liverpool-dental-theme CDN: https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/ Last Updated: November 2025