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

  • Introduces a high-contrast mode with a dedicated accessible font, stronger emphasis weights, and a yellow high-visibility color palette.
  • Enhances high-contrast styling across controls, navigation, badges, and a theme switcher for improved focus, hover, and readability.

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

[coderabbitai]

Walkthrough

Adds a conditional inline custom CSS render in the Twig template and introduces high-contrast theme styles including font import and extensive SCSS adjustments for accessibility.

Changes

Cohort / File(s)	Summary
Template: conditional CSS rendering phpmyfaq/assets/templates/default/index.twig	Wraps the inline custom CSS block in a truthy conditional so the <style> with customCss is emitted only when customCss is defined/truthy.
High-contrast SCSS updates phpmyfaq/assets/scss/layout/_theme-switcher.scss	Adds high-contrast palette and component-specific overrides (theme switcher, form controls, dropdowns, navigation, badges, cards) using a yellow emphasis and adjusts sizes/hover/focus states for visibility.
High-contrast font + theme rules phpmyfaq/assets/templates/default/theme.css	Imports "Atkinson Hyperlegible Next" and applies a high-contrast block setting body font-family, weight, and related font properties for the high-contrast theme.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Inspect Twig conditional for correct syntax and ensure no unintended whitespace or HTML output changes.
• Verify SCSS selectors and specificity do not unintentionally override non-high-contrast styles; review variables and color tokens.
• Confirm font import URL and licensing; ensure fallback fonts and weights are defined.
• Test high-contrast mode across key components (theme switcher, forms, dropdowns, navigation, cards) for visual regressions and accessibility.

Poem

🐇🌿
I nibble at styles, a gentle tweak,
A brighter yellow for those who seek.
Fonts made bold, contrasts that sing,
A hop, a tweak — let clarity bring!

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 focuses on improving the <style> area in index.twig, which matches the main change: conditionally rendering custom CSS only when needed.
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

---

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.