{"_id":"@brainjam/liverpool-dental-theme","_rev":"3-87301502b6e3288902abc919c98506fc","name":"@brainjam/liverpool-dental-theme","dist-tags":{"latest":"1.1.1"},"versions":{"1.0.0":{"name":"@brainjam/liverpool-dental-theme","version":"1.0.0","keywords":["openedx","theme","css","liverpool","dental","mfe","paragon"],"author":{"name":"BrainJam"},"license":"MIT","_id":"@brainjam/liverpool-dental-theme@1.0.0","maintainers":[{"name":"ra-brainjam","email":"hello@brainjam.works"}],"homepage":"https://github.com/brainjamworks/liverpool-dental-theme#readme","bugs":{"url":"https://github.com/brainjamworks/liverpool-dental-theme/issues"},"dist":{"shasum":"14e8bf749e22e5b7f9a94b8721010315d995f444","tarball":"https://registry.npmjs.org/@brainjam/liverpool-dental-theme/-/liverpool-dental-theme-1.0.0.tgz","fileCount":10,"integrity":"sha512-0g/iuvHYTous0PtmfN30bHPLsln++4ZqOy7vhXRtcXIy2heFoSude7wMv4GLvp5tAwi2oAK0oNj3scs7Fd0mLQ==","signatures":[{"sig":"MEUCIH6zjciq7hmxIxFEJbuJP0/Y03X1Or5Zggr42y1XYKEJAiEAt1lKVlr6aL+0apTvOuzI/K8W0KvrSf9jx4y3ZuyOr/k=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":531204},"main":"liverpool-core-override.css","gitHead":"4c8760fa5987d4e50d20677b50168d5d146eaa03","_npmUser":{"name":"ra-brainjam","email":"hello@brainjam.works"},"jsdelivr":"./","repository":{"url":"git+https://github.com/brainjamworks/liverpool-dental-theme.git","type":"git"},"_npmVersion":"10.9.2","description":"Liverpool Dental Learning Hub CSS theme for OpenEdX MFEs","directories":{},"_nodeVersion":"23.10.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/liverpool-dental-theme_1.0.0_1763055973889_0.726515555266303","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@brainjam/liverpool-dental-theme","version":"1.1.0","keywords":["openedx","theme","css","liverpool","dental","mfe","paragon"],"author":{"name":"BrainJam"},"license":"MIT","_id":"@brainjam/liverpool-dental-theme@1.1.0","maintainers":[{"name":"ra-brainjam","email":"hello@brainjam.works"}],"homepage":"https://github.com/brainjamworks/liverpool-dental-theme#readme","bugs":{"url":"https://github.com/brainjamworks/liverpool-dental-theme/issues"},"dist":{"shasum":"751f40a187b66a8954ebb1634dcae76fe72529bd","tarball":"https://registry.npmjs.org/@brainjam/liverpool-dental-theme/-/liverpool-dental-theme-1.1.0.tgz","fileCount":17,"integrity":"sha512-uw4YSG87x9nOURReuLcc+QgVbdkeCKLaXTbl/B6e+7+1Ft+h16AqDMEK619AlBwEB8QrGmVHgqbEIu/E2KcQ/A==","signatures":[{"sig":"MEQCIDYf9sudHBqv/PI7DbaVc50Owr6f5CFTquHmbuFBVjShAiBNyJvWDH2Tbscthq8hJt+Vdpw2L/dXqNYe9wHcvfo0rA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1054210},"main":"liverpool-core-override.css","gitHead":"9498ae77b0fe987d38e5e2469de3f6d500fd25c1","_npmUser":{"name":"ra-brainjam","email":"hello@brainjam.works"},"jsdelivr":"./","repository":{"url":"git+https://github.com/brainjamworks/liverpool-dental-theme.git","type":"git"},"_npmVersion":"10.9.2","description":"Liverpool Dental Learning Hub CSS theme for OpenEdX MFEs","directories":{},"_nodeVersion":"23.10.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/liverpool-dental-theme_1.1.0_1763062714689_0.39099444236283554","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"_id":"@brainjam/liverpool-dental-theme@1.1.1","bugs":{"url":"https://github.com/brainjamworks/liverpool-dental-theme/issues"},"dist":{"shasum":"ca50b697d3c58175fbb0b4148374c971d89c1386","tarball":"https://registry.npmjs.org/@brainjam/liverpool-dental-theme/-/liverpool-dental-theme-1.1.1.tgz","fileCount":17,"integrity":"sha512-7kYE+//p38RMu55KgrXfVwQBIeg5QQf0M+tLNtY9oK60FlDWxiwoKXA31qHH/4i6vpEW7RIQ7EzEv5CxIk4byA==","signatures":[{"sig":"MEYCIQCrkBPvV+pBNEEwteLnhrARf99cPulU6CTRKv5baTZcvgIhAJyDgmG3anSlOD1rQq9h4RIPXEfV76YwtG7RGhUHUXdD","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIB0Y+gkGaglWs31e7Z6xB8SjPYt9Yf/HftKXi5N7z2JpAiAD2f7Zt/reYhrxYNZSdIjkjUlKrPoqx392w5zxBXD4yQ=="}],"unpackedSize":1057674},"main":"liverpool-core-override.css","name":"@brainjam/liverpool-dental-theme","author":{"name":"BrainJam"},"gitHead":"9498ae77b0fe987d38e5e2469de3f6d500fd25c1","license":"MIT","version":"1.1.1","_npmUser":{"name":"ra-brainjam","email":"hello@brainjam.works"},"homepage":"https://github.com/brainjamworks/liverpool-dental-theme#readme","jsdelivr":"./","keywords":["openedx","theme","css","liverpool","dental","mfe","paragon"],"repository":{"url":"git+https://github.com/brainjamworks/liverpool-dental-theme.git","type":"git"},"_npmVersion":"11.19.0","description":"Liverpool Dental Learning Hub CSS theme for OpenEdX MFEs","directories":{},"maintainers":[{"name":"ra-brainjam","email":"hello@brainjam.works"}],"_nodeVersion":"24.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/liverpool-dental-theme_1.1.1_1790108922117_0.3486113231413348"}}},"time":{"created":"2025-11-13T17:46:13.736Z","modified":"2026-09-22T20:28:42.491Z","1.0.0":"2025-11-13T17:46:14.102Z","1.1.0":"2025-11-13T19:38:34.903Z","1.1.1":"2026-09-22T20:28:42.289Z"},"bugs":{"url":"https://github.com/brainjamworks/liverpool-dental-theme/issues"},"author":{"name":"BrainJam"},"license":"MIT","homepage":"https://github.com/brainjamworks/liverpool-dental-theme#readme","keywords":["openedx","theme","css","liverpool","dental","mfe","paragon"],"repository":{"url":"git+https://github.com/brainjamworks/liverpool-dental-theme.git","type":"git"},"description":"Liverpool Dental Learning Hub CSS theme for OpenEdX MFEs","maintainers":[{"name":"ra-brainjam","email":"hello@brainjam.works"}],"readme":"# Liverpool Dental Learning Hub - CSS Theme\n\nCSS 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.\n\n## 📦 What's Included\n\n### Standalone Token Files (for Default MFEs)\n\nUse these for MFEs that don't need custom styling beyond brand tokens:\n\n- **liverpool-core-override.css** (18KB) - Structural design tokens (typography, spacing, layout, borders)\n- **liverpool-light-override.css** (27KB) - Color tokens and brand colors (Liverpool Red, University Blue)\n\n### All-in-One \"Complete\" Files (for Major MFEs)\n\nThese files are **self-contained** - each includes core tokens + color tokens + header/footer + MFE-specific styles. Use **one file** per MFE:\n\n- **liverpool-learning-complete.css** (159KB)\n  - Contains: Core + Light + Header/Footer + Learning MFE styles\n  - For: Course player, videos, problems, sequence navigation\n\n- **liverpool-learner-dashboard-complete.css** (126KB)\n  - Contains: Core + Light + Header/Footer + Dashboard styles\n  - For: Course cards, progress tracking, learner home\n\n- **liverpool-authoring-complete.css** (129KB)\n  - Contains: Core + Light + Header/Footer + Studio/Authoring styles\n  - For: Course creation, content editing, settings\n\n- **liverpool-authn-complete.css** (73KB)\n  - Contains: Core + Light + Header/Footer\n  - For: Login, registration, password reset\n\n- **liverpool-account-complete.css** (73KB)\n  - Contains: Core + Light + Header/Footer\n  - For: Account settings, preferences\n\n- **liverpool-communications-complete.css** (73KB)\n  - Contains: Core + Light + Header/Footer\n  - For: Course communications, notifications\n\n- **liverpool-discussions-complete.css** (73KB)\n  - Contains: Core + Light + Header/Footer\n  - For: Discussion forums, course discussions\n\n- **liverpool-gradebook-complete.css** (73KB)\n  - Contains: Core + Light + Header/Footer\n  - For: Instructor gradebook, grade management\n\n- **liverpool-ora-grading-complete.css** (73KB)\n  - Contains: Core + Light + Header/Footer\n  - For: Open Response Assessment grading interface\n\n- **liverpool-profile-complete.css** (73KB)\n  - Contains: Core + Light + Header/Footer\n  - For: User profile, public profile pages\n\n### Development & Utility Files\n\nThese are **included in the complete files** but available standalone for development:\n\n- **liverpool-header-footer.css** (28KB) - Custom header and footer (included in complete files)\n- **liverpool-utilities.css** (11KB) - Utility classes (for custom development)\n- **glassmorphism-utilities.css** (10KB) - Glass effects (for custom development)\n\n**Total**: ~1029KB of CSS (but MFEs only load 18-159KB depending on which file they use)\n\n## 🔑 Key Concept: Complete vs Standalone\n\n**Important**: The \"complete\" files are all-in-one bundles. You **don't** need to load multiple files:\n\n❌ **Wrong** - Don't load these together:\n```html\n<link href=\"liverpool-core-override.css\">\n<link href=\"liverpool-light-override.css\">\n<link href=\"liverpool-learning-complete.css\">  <!-- Already contains core + light! -->\n```\n\n✅ **Correct** - Load just the complete file:\n```html\n<link href=\"liverpool-learning-complete.css\">  <!-- Contains everything -->\n```\n\n✅ **Also Correct** - For simple MFEs without custom styles:\n```html\n<link href=\"liverpool-core-override.css\">\n<link href=\"liverpool-light-override.css\">\n```\n\n## 🚀 Usage\n\n### Via CDN (Recommended for Production)\n\nUse jsDelivr CDN for automatic caching and global distribution:\n\n```html\n<!-- Core tokens (load first) -->\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-core-override.css\">\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-light-override.css\">\n\n<!-- MFE-specific (load as needed) -->\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-learning-complete.css\">\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-learner-dashboard-complete.css\">\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-authoring-complete.css\">\n\n<!-- Additional components -->\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-header-footer.css\">\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-utilities.css\">\n```\n\n### Via npm\n\nInstall the package:\n\n```bash\nnpm install @brainjam/liverpool-dental-theme\n```\n\nImport in your application:\n\n```javascript\n// Import all styles\nimport '@brainjam/liverpool-dental-theme/liverpool-core-override.css';\nimport '@brainjam/liverpool-dental-theme/liverpool-light-override.css';\nimport '@brainjam/liverpool-dental-theme/liverpool-learning-complete.css';\n```\n\n### With Tutor Plugin\n\nThis package is designed to work with the `tutor-liverpool-dental` plugin. The plugin uses `PARAGON_THEME_URLS` to configure different CSS for each MFE:\n\n```python\n# Default MFEs (profile, account, etc.) - Use standalone token files\nparagon_theme_urls = {\n    \"core\": {\n        \"urls\": {\n            \"default\": \"https://cdn.jsdelivr.net/npm/@openedx/paragon@23/dist/core.min.css\",\n            \"brandOverride\": \"https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-core-override.css\"\n        }\n    },\n    \"defaultTheme\": \"light\",\n    \"variants\": {\n        \"light\": {\n            \"urls\": {\n                \"default\": \"https://cdn.jsdelivr.net/npm/@openedx/paragon@23/dist/light.min.css\",\n                \"brandOverride\": \"https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-light-override.css\"\n            }\n        }\n    }\n}\n\n# Learning MFE - Use complete file (loaded for BOTH core and light)\nparagon_theme_urls_learning = {\n    \"core\": {\n        \"urls\": {\n            \"default\": \"https://cdn.jsdelivr.net/npm/@openedx/paragon@23/dist/core.min.css\",\n            \"brandOverride\": \"https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-learning-complete.css\"\n        }\n    },\n    \"defaultTheme\": \"light\",\n    \"variants\": {\n        \"light\": {\n            \"urls\": {\n                \"default\": \"https://cdn.jsdelivr.net/npm/@openedx/paragon@23/dist/light.min.css\",\n                \"brandOverride\": \"https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/liverpool-learning-complete.css\"  # Same file!\n            }\n        }\n    }\n}\n\n# Apply via MFE_CONFIG_OVERRIDES\nMFE_CONFIG[\"PARAGON_THEME_URLS\"] = paragon_theme_urls\nMFE_CONFIG_OVERRIDES[\"learning\"] = {\"PARAGON_THEME_URLS\": paragon_theme_urls_learning}\nMFE_CONFIG_OVERRIDES[\"learner-dashboard\"] = {\"PARAGON_THEME_URLS\": paragon_theme_urls_learner_dashboard}\nMFE_CONFIG_OVERRIDES[\"authoring\"] = {\"PARAGON_THEME_URLS\": paragon_theme_urls_authoring}\n```\n\n**Note**: For \"complete\" files, use the **same file** for both `core.brandOverride` and `light.brandOverride`. The file loads once and provides all styling.\n\n## 📋 File Descriptions\n\n### liverpool-core-override.css\nFoundational design tokens including:\n- Typography scale (Poppins font family)\n- Spacing system\n- Layout containers\n- Base component styles\n\n### liverpool-light-override.css\nBrand color palette:\n- Primary: Liverpool Red (#C8102E)\n- Secondary: Blue, Purple, Orange accents\n- Neutral grays\n- Semantic colors (success, warning, error, info)\n\n### liverpool-learning-complete.css\nLearning MFE customization:\n- Course unit navigation\n- Content rendering (HTML, video, problems)\n- Sequence navigation\n- Course outline sidebar\n- Problem feedback styles\n\n### liverpool-learner-dashboard-complete.css\nDashboard MFE customization:\n- Course cards and grid\n- Progress indicators\n- Filters and search\n- Welcome banner\n- Profile quick links\n\n### liverpool-authoring-complete.css\nAuthoring MFE customization:\n- Course outline editor\n- Component editors\n- Settings panels\n- Preview modes\n- Publishing workflow\n\n### liverpool-header-footer.css\nCustom components:\n- Liverpool branded header\n- Custom footer with university branding\n- Navigation menus\n- Responsive mobile layouts\n\n### liverpool-utilities.css\nUtility classes:\n- Spacing helpers\n- Text utilities\n- Display utilities\n- Responsive helpers\n\n### glassmorphism-utilities.css\nModern glass-effect UI:\n- Backdrop blur effects\n- Translucent overlays\n- Card glassmorphism\n- Button glass effects\n\n## 🎨 Design System\n\n### Colors\n\n```css\n/* Primary Brand */\n--liverpool-red: #C8102E;\n--liverpool-red-dark: #A00D24;\n\n/* Secondary Palette */\n--liverpool-blue: #006DAE;\n--liverpool-purple: #7B2D80;\n--liverpool-orange: #ED8B00;\n\n/* Neutrals */\n--gray-50: #F9FAFB;\n--gray-900: #111827;\n```\n\n### Typography\n\n- **Primary Font**: Poppins (Google Fonts)\n- **Weights**: 300 (Light), 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)\n- **Scale**: 12px, 14px, 16px, 18px, 20px, 24px, 30px, 36px, 48px\n\n### Spacing\n\n- **Scale**: 4px base unit\n- **Steps**: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px\n\n## 🔧 Development\n\n### Local Development\n\n```bash\n# Clone the repository\ngit clone https://github.com/brainjamworks/liverpool-dental-theme.git\ncd liverpool-dental-theme\n\n# Serve files locally (for testing)\npython3 -m http.server 3000 --bind localhost\n\n# CSS now available at:\n# http://localhost:3000/liverpool-core-override.css\n```\n\n### Making Changes\n\n1. Edit CSS files directly\n2. Test changes in your OpenEdX environment\n3. Update version in package.json\n4. Commit changes\n5. Publish new version to npm\n\n### Publishing\n\n```bash\n# Bump version\nnpm version patch  # or minor, or major\n\n# Publish to npm\nnpm publish\n\n# Tag the release\ngit tag v1.0.1\ngit push origin v1.0.1\n```\n\n## 📖 Documentation\n\n### CSS Architecture\n\nThe CSS is organized in layers:\n\n1. **Tokens** (core-override, light-override) - Variables and design tokens\n2. **Components** (header-footer) - Reusable component styles\n3. **MFE Specific** (learning, dashboard, authoring) - Application-specific styles\n4. **Utilities** (utilities, glassmorphism) - Helper classes\n\n### Load Order\n\nFor correct styling, load in this order:\n\n```html\n1. liverpool-core-override.css (tokens first)\n2. liverpool-light-override.css (colors second)\n3. MFE-specific CSS (learning/dashboard/authoring)\n4. liverpool-header-footer.css (components)\n5. liverpool-utilities.css (utilities last)\n6. glassmorphism-utilities.css (effects)\n```\n\n## 🔗 Related Projects\n\n- **tutor-liverpool-dental** - Tutor plugin that uses this CSS package\n- **brainjam-openedx-xblocks** - Custom XBlocks for Liverpool Dental\n- **liverpool-frontend-component-footer** - Custom footer component\n- **liverpool-frontend-component-header** - Custom header component\n\n## 📄 License\n\nMIT License - see LICENSE file for details\n\n## 🏥 About\n\nCreated by **BrainJam** for the **University of Liverpool Dental School** continuing professional development (CPD) platform.\n\n---\n\n**Repository**: https://github.com/brainjamworks/liverpool-dental-theme\n**npm Package**: https://www.npmjs.com/package/@brainjam/liverpool-dental-theme\n**CDN**: https://cdn.jsdelivr.net/npm/@brainjam/liverpool-dental-theme@1/\n**Last Updated**: November 2025\n","readmeFilename":"README.md"}