Adds the Clarity theme files

README.md

@@ -1,2 +1,27 @@
-# clarity
-Clarity is a refreshed version of the clean theme that prioritises accessibility
+# Clarity
+
+A more modern theme for Janeway with a switchable colour palette system and accessibility improvements over the Clean theme.
+
+## Installation
+
+Clone or copy this theme into `src/themes/`, restart the server, then select **Clarity** under General Settings.
+
+## Repository Support
+
+Clarity includes repository (preprint) front-end templates. To enable them, add a local copy of the `REPOSITORY_THEMES` setting to your `settings.py` that includes `clarity`:
+
+```python
+REPOSITORY_THEMES = [
+    "OLH",
+    "material",
+    "clarity",
+]
+```
+
+## Colour Palettes
+
+Clarity ships with five palettes: `evergreen`, `ocean`, `cardinal` and `midnight` (dark mode). To switch, edit the `@import` line near the top of `clarity.css`:
+
+```css
+@import url('/static/clarity/css/evergreen.css');
+```

assets/css/cardinal.css

@@ -0,0 +1,98 @@
+:root {
+  /* Brand & Theme Colors */
+  --brand-primary: #9b2c2c;
+  --brand-secondary: #c05555;
+  --text-link-alt: #7c2d2d;
+  --focus-shadow: #5a1515;
+  --color-success: #5cb85c;
+    /* Highlight color (shared across themes) */
+  --highlight-color: #FFEB3B;
+
+  /* Text Colors */
+  /* Must pass WCAG color contrast at --recede-opacity */
+  --text-primary: #212529;
+  --text-muted: #747474;
+  --text-on-dark: white;
+  --text-link: var(--body-text);
+  --text-black: #000;
+  --text-white: #fff;
+  --text-header: var(--text-black);
+  --body-text: #525252;
+  --nav-text: #636363;
+  --nav-text-active: var(--brand-primary);
+  --recede-opacity: 70%;
+
+  /* Link Decoration */
+  --link-decoration: underline;
+  --link-decoration-hover: underline;
+  --nav-link-decoration: none;
+  --nav-link-decoration-hover: underline;
+  --dropdown-item-decoration: none;
+  --dropdown-item-decoration-hover: underline;
+  --link-hover-color: var(--brand-primary);
+  --link-transition: color 0.2s ease;
+
+  /* Background Colors */
+  --bg-body: #fff;
+  --bg-content: white;
+  --bg-footer: #FCFCFC;
+  --bg-card-alt: #f8f9fa;
+  --bg-blockquote: #F0F0F0;
+  --bg-overlay: rgba(55, 55, 55, 0.8);
+
+  /* UI State Colors */
+  --color-success: green;
+  --color-danger: darkred;
+
+  /* Border Colors */
+  --border-light: #e5e5e5;
+  --border-medium: #6c757d;
+  --border-gray-200: rgb(229, 231, 235);
+
+  /* Header & Navigation */
+  --header-bg: var(--brand-primary);
+  --bg-nav: #fefeff;
+
+  /* Button Colors */
+  --btn-primary-bg: var(--brand-primary);
+  --btn-primary-border: var(--brand-primary);
+  --btn-primary-text: white;
+  --btn-outline-secondary: #6c757d;
+
+  /* Focus & Accessibility */
+  --focus-outline: #F9F9F9;
+  --focus-ring-size: 4px;
+
+  /* Typography */
+  --main-font: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+
+  /* Spacing */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 15px;
+  --spacing-lg: 20px;
+  --spacing-xl: 30px;
+
+  /* Sizes */
+  --border-radius: 3px;
+  --border-radius-lg: 2rem;
+  --header-height: 120px;
+  --footer-height: 70px;
+  --card-image-height: 250px;
+  --carousel-min-height: 500px;
+  --icon-size: 16px;
+
+  /* Transitions */
+  --transition-standard: all 1s ease;
+
+  /* Pagination Colors - Light Mode */
+  --pagination-color: var(--body-text);
+  --pagination-bg: var(--bg-content);
+  --pagination-border: var(--border-light);
+  --pagination-hover-color: var(--brand-primary);
+  --pagination-hover-bg: var(--bg-card-alt);
+  --pagination-active-color: var(--btn-primary-text);
+  --pagination-active-bg: var(--btn-primary-bg);
+  --pagination-active-border: var(--btn-primary-border);
+  --pagination-disabled-color: var(--text-muted);
+}