Fix a11y icon, FAB label colors, add high-contrast stylesheet, sync theme vars
- Fix faIcon() to use <i> elements (FA7 compatibility) - Fix #mokoThemeFab .label and button colors to white (visible on both light and dark themes) - Fix font-weight typo (600px → 600) - Add --footer-padding-* variables to all 6 theme files - Create a11y-high-contrast.css with WCAG AAA contrast ratios for both light and dark modes - Register high-contrast stylesheet in joomla.asset.json - Lazy-load high-contrast CSS when a11y contrast toggle is activated Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
227
src/media/css/a11y-high-contrast.css
Normal file
227
src/media/css/a11y-high-contrast.css
Normal file
@@ -0,0 +1,227 @@
|
||||
@charset "UTF-8";
|
||||
/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* This file is part of a Moko Consulting project.
|
||||
*
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*
|
||||
* FILE INFORMATION
|
||||
* DEFGROUP: Joomla.Template.Site
|
||||
* INGROUP: MokoCassiopeia.Accessibility
|
||||
* REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia
|
||||
* PATH: ./media/css/a11y-high-contrast.css
|
||||
* VERSION: 03.09.14
|
||||
* BRIEF: High-contrast stylesheet for accessibility toolbar
|
||||
*/
|
||||
|
||||
/* ===================================================================
|
||||
* HIGH CONTRAST MODE
|
||||
* Applied when .a11y-high-contrast is on <html>.
|
||||
* Overrides theme variables to maximise contrast ratios (WCAG AAA).
|
||||
* =================================================================== */
|
||||
|
||||
/* ── Light mode high contrast ─────────────────────────────────────── */
|
||||
:root[data-bs-theme="light"].a11y-high-contrast {
|
||||
--body-color: #000;
|
||||
--body-color-rgb: 0, 0, 0;
|
||||
--body-bg: #fff;
|
||||
--body-bg-rgb: 255, 255, 255;
|
||||
--heading-color: #000;
|
||||
--emphasis-color: #000;
|
||||
--secondary-color: #000000bf;
|
||||
--tertiary-color: #00000080;
|
||||
--muted-color: #333;
|
||||
|
||||
/* Links — strong blue on white */
|
||||
--color-link: #0000ee;
|
||||
--link-color: #0000ee;
|
||||
--link-color-rgb: 0, 0, 238;
|
||||
--color-hover: #cc0000;
|
||||
--link-hover-color: #cc0000;
|
||||
--link-hover-color-rgb: 204, 0, 0;
|
||||
|
||||
/* Borders — visible on all backgrounds */
|
||||
--border-color: #000;
|
||||
--border-color-soft: #333;
|
||||
|
||||
/* Backgrounds */
|
||||
--secondary-bg: #e0e0e0;
|
||||
--secondary-bg-rgb: 224, 224, 224;
|
||||
--tertiary-bg: #f0f0f0;
|
||||
--tertiary-bg-rgb: 240, 240, 240;
|
||||
|
||||
/* Navigation */
|
||||
--nav-bg-color: #000;
|
||||
--nav-text-color: #fff;
|
||||
--mainmenu-nav-link-color: #fff;
|
||||
|
||||
/* Buttons */
|
||||
--btn-color: #fff;
|
||||
--btn-bg: #000;
|
||||
--btn-border-color: #000;
|
||||
--btn-hover-color: #000;
|
||||
--btn-hover-bg: #ffff00;
|
||||
--btn-hover-border-color: #000;
|
||||
--btn-active-color: #000;
|
||||
--btn-active-bg: #ffff00;
|
||||
--btn-active-border-color: #000;
|
||||
|
||||
/* Forms */
|
||||
--input-color: #000;
|
||||
--input-bg: #fff;
|
||||
--input-border-color: #000;
|
||||
--input-focus-color: #000;
|
||||
--input-focus-bg: #ffffcc;
|
||||
--input-focus-border-color: #0000ee;
|
||||
--input-placeholder-color: #555;
|
||||
|
||||
/* Cards */
|
||||
--card-border-color: #000;
|
||||
--card-bg: #fff;
|
||||
--card-cap-bg: #e0e0e0;
|
||||
|
||||
/* Tables */
|
||||
--table-color: #000;
|
||||
--table-bg: #fff;
|
||||
--table-border-color: #000;
|
||||
--table-striped-bg: #f0f0f0;
|
||||
--table-hover-bg: #ffff99;
|
||||
|
||||
/* Alerts */
|
||||
--alert-border-width: 2px;
|
||||
|
||||
/* Code */
|
||||
--code-color: #000;
|
||||
--code-bg-color: #ffffcc;
|
||||
|
||||
/* Selection */
|
||||
--selection-bg: #0000ee;
|
||||
--selection-ink: #fff;
|
||||
|
||||
/* Focus indicator — always visible */
|
||||
--focus-ring-color: #0000ee;
|
||||
--focus-ring-width: 3px;
|
||||
}
|
||||
|
||||
/* ── Dark mode high contrast ──────────────────────────────────────── */
|
||||
:root[data-bs-theme="dark"].a11y-high-contrast {
|
||||
--body-color: #fff;
|
||||
--body-color-rgb: 255, 255, 255;
|
||||
--body-bg: #000;
|
||||
--body-bg-rgb: 0, 0, 0;
|
||||
--heading-color: #fff;
|
||||
--emphasis-color: #fff;
|
||||
--secondary-color: #ffffffbf;
|
||||
--tertiary-color: #ffffff80;
|
||||
--muted-color: #ccc;
|
||||
|
||||
/* Links — bright yellow on black */
|
||||
--color-link: #ffff00;
|
||||
--link-color: #ffff00;
|
||||
--link-color-rgb: 255, 255, 0;
|
||||
--color-hover: #00ffff;
|
||||
--link-hover-color: #00ffff;
|
||||
--link-hover-color-rgb: 0, 255, 255;
|
||||
|
||||
/* Borders */
|
||||
--border-color: #fff;
|
||||
--border-color-soft: #ccc;
|
||||
|
||||
/* Backgrounds */
|
||||
--secondary-bg: #1a1a1a;
|
||||
--secondary-bg-rgb: 26, 26, 26;
|
||||
--tertiary-bg: #111;
|
||||
--tertiary-bg-rgb: 17, 17, 17;
|
||||
|
||||
/* Navigation */
|
||||
--nav-bg-color: #000;
|
||||
--nav-text-color: #fff;
|
||||
--mainmenu-nav-link-color: #ffff00;
|
||||
|
||||
/* Buttons */
|
||||
--btn-color: #000;
|
||||
--btn-bg: #ffff00;
|
||||
--btn-border-color: #ffff00;
|
||||
--btn-hover-color: #000;
|
||||
--btn-hover-bg: #00ffff;
|
||||
--btn-hover-border-color: #00ffff;
|
||||
--btn-active-color: #000;
|
||||
--btn-active-bg: #00ffff;
|
||||
--btn-active-border-color: #00ffff;
|
||||
|
||||
/* Forms */
|
||||
--input-color: #fff;
|
||||
--input-bg: #000;
|
||||
--input-border-color: #fff;
|
||||
--input-focus-color: #fff;
|
||||
--input-focus-bg: #1a1a1a;
|
||||
--input-focus-border-color: #ffff00;
|
||||
--input-placeholder-color: #aaa;
|
||||
|
||||
/* Cards */
|
||||
--card-border-color: #fff;
|
||||
--card-bg: #000;
|
||||
--card-cap-bg: #1a1a1a;
|
||||
|
||||
/* Tables */
|
||||
--table-color: #fff;
|
||||
--table-bg: #000;
|
||||
--table-border-color: #fff;
|
||||
--table-striped-bg: #111;
|
||||
--table-hover-bg: #333;
|
||||
|
||||
/* Alerts */
|
||||
--alert-border-width: 2px;
|
||||
|
||||
/* Code */
|
||||
--code-color: #00ff00;
|
||||
--code-bg-color: #1a1a1a;
|
||||
|
||||
/* Selection */
|
||||
--selection-bg: #ffff00;
|
||||
--selection-ink: #000;
|
||||
|
||||
/* Focus indicator */
|
||||
--focus-ring-color: #ffff00;
|
||||
--focus-ring-width: 3px;
|
||||
}
|
||||
|
||||
/* ── Shared high-contrast overrides (both modes) ──────────────────── */
|
||||
.a11y-high-contrast * {
|
||||
border-color: var(--border-color) !important;
|
||||
}
|
||||
|
||||
.a11y-high-contrast *:focus-visible {
|
||||
outline: var(--focus-ring-width, 3px) solid var(--focus-ring-color, #0000ee) !important;
|
||||
outline-offset: 2px !important;
|
||||
}
|
||||
|
||||
.a11y-high-contrast img {
|
||||
outline: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.a11y-high-contrast a {
|
||||
text-decoration: underline !important;
|
||||
text-decoration-thickness: 2px !important;
|
||||
}
|
||||
|
||||
.a11y-high-contrast button,
|
||||
.a11y-high-contrast .btn,
|
||||
.a11y-high-contrast input,
|
||||
.a11y-high-contrast select,
|
||||
.a11y-high-contrast textarea {
|
||||
border-width: 2px !important;
|
||||
border-style: solid !important;
|
||||
}
|
||||
|
||||
.a11y-high-contrast .badge,
|
||||
.a11y-high-contrast .alert {
|
||||
border: 2px solid var(--border-color) !important;
|
||||
}
|
||||
|
||||
/* Ensure disabled states are still distinguishable */
|
||||
.a11y-high-contrast [disabled],
|
||||
.a11y-high-contrast .disabled {
|
||||
opacity: .5 !important;
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
Reference in New Issue
Block a user