improve <style>area in index.twig

[d0ubIeU]

Small addition to display the <style> area in HTML Code only when needed.

Summary by CodeRabbit

• Refactor

  • Conditional loading of inline custom CSS so custom styles are emitted only when defined.

• Style / Accessibility

  • Adds a high-contrast mode with a dedicated accessible typeface, stronger emphasis weights, and a yellow high-visibility palette.
  • Enhances high-contrast styling across controls, navigation, dropdowns, badges, alerts, tables, and a theme switcher for improved focus, hover, and readability.

• Documentation

  • Adds the SIL Open Font License text accompanying the new accessible font.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Adds a Twig conditional to emit inline custom CSS only when present, and introduces high-contrast accessibility assets: SCSS overrides (yellow-focused UI rules) plus font-face and typography adjustments for a high-contrast theme.

Changes

Cohort / File(s)	Summary
Template: conditional CSS rendering phpmyfaq/assets/templates/default/index.twig	Wraps the inline custom CSS <style> block in {% if customCss is not empty %}...{% endif %} so the style tag is emitted only when customCss is defined/truthy.
High-contrast SCSS updates phpmyfaq/assets/scss/layout/_theme-switcher.scss	Adds high-contrast theme rules and overrides (theme switcher button, form controls, dropdowns, navigation, cards, overlays, badges, alerts, breadcrumbs, tables) using a yellow emphasis; adjusts sizes and hover/focus/active states to improve legibility.
High-contrast font + license phpmyfaq/assets/templates/default/theme.css, phpmyfaq/assets/fonts/OFL.txt	Adds @font-face declarations for "Atkinson Hyperlegible Next" and applies high-contrast typography overrides (font-family, weight, size) within the high-contrast theme block; includes SIL Open Font License text in OFL.txt.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Check Twig conditional placement for unintended layout/whitespace effects.
• Verify SCSS specificity and cascade so high-contrast rules target only intended themes.
• Confirm font-face sources, weights, and fallback fonts; ensure licensing file location is correct.
• Visual test of high-contrast mode across major UI components (theme switcher, forms, dropdowns, cards).

Poem

🐇
I hop on keys and tweak a line,
Bright yellow rails and fonts that shine.
A subtle style, a clearer sight,
Small changes, big help — hop, delight.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'improve <style>area in index.twig' directly addresses the main change: making the inline CSS block conditional in index.twig. However, it's somewhat vague and could be clearer about the specific improvement (conditional rendering).
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between be07d8c and bc5ba57.

⛔ Files ignored due to path filters (2)

• phpmyfaq/assets/fonts/AtkinsonHyperlegibleNext-Italic-VariableFont_wght.ttf is excluded by !**/*.ttf
• phpmyfaq/assets/fonts/AtkinsonHyperlegibleNext-VariableFont_wght.ttf is excluded by !**/*.ttf

📒 Files selected for processing (2)

• phpmyfaq/assets/fonts/OFL.txt (1 hunks)
• phpmyfaq/assets/templates/default/theme.css (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• phpmyfaq/assets/templates/default/theme.css

🔇 Additional comments (1)

phpmyfaq/assets/fonts/OFL.txt (1)

1-93: Verify that font asset files are present in the directory and properly referenced.

The SIL Open Font License Version 1.1 is correctly provided with accurate copyright attribution for the Atkinson Hyperlegible Next font. However, confirmation is needed that the actual font files (.ttf, .otf, .woff, or .woff2) exist in phpmyfaq/assets/fonts/ and are referenced in the project's CSS or HTML to ensure this license file serves its required purpose.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a558ab0 and 6957187.

📒 Files selected for processing (1)

• phpmyfaq/assets/templates/default/index.twig (1 hunks)

🔇 Additional comments (1)

phpmyfaq/assets/templates/default/index.twig (1)

20-24: Good improvement: conditional rendering prevents empty style tags.

The conditional wrapper correctly prevents rendering an empty <style> block when customCss is undefined, null, or empty. This is a best practice that keeps the HTML cleaner.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (3)

phpmyfaq/assets/templates/default/theme.css (1)

78-84: CSS formatting issue and font-weight consideration.

Line 78 has inconsistent spacing: body{ should be body { per CSS3 standards. Additionally, font-weight: 800 is the maximum weight and may reduce readability of body text; consider using 700 for better legibility while maintaining high-contrast emphasis. The !important flag and other properties (font-optical-sizing, font-size) are well-suited for accessibility.

Apply this diff to fix formatting and reconsidering the font-weight:

  [data-bs-theme='high-contrast'] {
    --bs-light: #ffffff;
    --bs-dark: #000000;
    --bs-primary: #ffff00;
    --bs-secondary: #00ffff;
    --bs-info: #00ffff;
    --bs-success: #00ff00;
    --bs-warning: #ffff00;
    --bs-danger: #ff0000;
    --bs-pmf-nav: #000000;
    --bs-pmf-footer: #000000;
    --bs-pmf-background: #000000;

    /* Bootstrap body variables for high contrast mode */
    --bs-body-bg: #000000;
    --bs-body-color: #ffffff;
    --bs-border-color: #ffffff;
    --bs-link-color: #ffff00;
    --bs-link-hover-color: #ffff66;

    /* Individual high-contrast adjustments */

-   body{
+   body {
      font-family: "Atkinson Hyperlegible Next" !important;
      font-size: 1.3rem;
      font-optical-sizing: auto;
-     font-weight: 800;
+     font-weight: 700;
      font-style: normal;
    }
  }

phpmyfaq/assets/scss/layout/_theme-switcher.scss (2)

376-395: Standardize font-size across high-contrast form elements.

Line 380 sets dropdown-menu font-size to 1.2rem, but form controls (line 367) use 1.3rem. For consistency and predictable cascade, either unify to 1.3rem or document the rationale for the difference.

---

524-528: Fix spacing in !important declaration.

Line 525 has improper spacing in the !important flag: color: #000!important; should be color: #000 !important; per SCSS/CSS style conventions.

Apply this diff:

    &:hover {
      background-color: #ffff00;
-     color: #000!important;
+     color: #000 !important;
      border-radius: 5px;
    }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6957187 and f6d24af.

📒 Files selected for processing (2)

• phpmyfaq/assets/scss/layout/_theme-switcher.scss (4 hunks)
• phpmyfaq/assets/templates/default/theme.css (2 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{html,css,scss}

📄 CodeRabbit inference engine (AGENTS.md)

Use HTML5 and CSS3 standards for frontend code

Files:

• phpmyfaq/assets/templates/default/theme.css
• phpmyfaq/assets/scss/layout/_theme-switcher.scss

**/*.{html,scss,css}

📄 CodeRabbit inference engine (AGENTS.md)

Use Bootstrap components and utilities for layout and styling

Files:

• phpmyfaq/assets/templates/default/theme.css
• phpmyfaq/assets/scss/layout/_theme-switcher.scss

🔇 Additional comments (3)

phpmyfaq/assets/templates/default/theme.css (1)

16-17: Google Fonts import for accessibility — good practice.

The external font import with flexible weight ranges is appropriate for the accessibility goal. The font-display=swap ensures the page remains readable during font load.

phpmyfaq/assets/scss/layout/_theme-switcher.scss (2)

364-374: Consider form control styling consistency and placeholder visibility.

The yellow background (#ffff00) with black text provides excellent contrast, but the combination may be visually intense. Verify that the placeholder text remains visible and readable. Also, ensure this doesn't conflict with the body font-size: 1.3rem already applied—form controls should inherit appropriately.

---

250-529: Excellent high-contrast theme implementation with accessibility focus.

The high-contrast mode styling comprehensively addresses WCAG AAA standards with:

• Strong black/white contrast (#000000/#ffffff)
• Yellow accents (#ffff00) for interactive elements, links, and focus states
• Increased font-sizes across form controls and dropdowns
• Enhanced borders (2px solid) for clear visual hierarchy
• Appropriate removal of overlays (card-cover::before) in high-contrast mode for clarity

The Atkinson Hyperlegible Next font pairing with high-contrast colors demonstrates a well-considered accessibility strategy. Bootstrap 5 variable conventions are correctly used throughout.