feat: adding in variables.css for simpler styling

[jaredwray]

Please check if the PR fulfills these requirements

• Followed the Contributing and Code of Conduct guidelines.
• Tests for the changes have been added (for bug fixes/features) with 100% code coverage.

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)
feat: adding in variables.css for simpler styling

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the styling customization capabilities of the project by introducing a standardized variables.css file for each template. This change allows users to easily modify theme-specific CSS variables by creating their own variables.css file in the site directory, which will override the template's defaults. This approach streamlines the customization process, making it more intuitive and less prone to conflicts with core template updates.

Highlights

• Centralized CSS Variables: Introduced dedicated variables.css files for both 'classic' and 'modern' templates to centralize CSS variable definitions, making styling more modular.
• Styling Refactor: Refactored the 'modern' template's styles.css to remove inline CSS variable declarations, moving them to the new variables.css for better organization.
• Documentation Update: Updated the styling documentation to guide users on how to customize themes using the new variables.css override mechanism.
• New Test Coverage: Added new Playwright tests to ensure variables.css files are correctly served and that user-defined overrides are applied as expected.

Changelog

• site/docs/styling.md
  • Updated the explanation of how variables.css is used for custom styling, clarifying that a user-created variables.css replaces the template's default.
• templates/classic/css/variables.css
  • Added a new file containing the default CSS variables for the classic template.
• templates/modern/css/styles.css
  • Removed the :root and [data-theme="light"] CSS variable definitions, which are now handled by variables.css.
• templates/modern/css/variables.css
  • Added a new file containing the default CSS variables for the modern template, including dark and light theme definitions.
• templates/modern/includes/header.hbs
  • Added a <link> tag to include the new variables.css stylesheet.
• test/fixtures/mega-page-site/variables.css
  • Simplified the content of the test fixture's variables.css to a single --bg variable for testing purposes.
• test/variables-css.spec.ts
  • Added new Playwright tests to verify that variables.css is served correctly and that user-defined CSS variables successfully override template defaults.

Activity

• No human activity has been recorded on this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (c91a74c) to head (01cd0eb).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main      #350   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            7         7           
  Lines         1489      1489           
  Branches       434       428    -6     
=========================================
  Hits          1489      1489           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[gemini-code-assist]

Code Review

This pull request introduces a variables.css file for each template, centralizing CSS variable definitions and allowing for simpler styling overrides. The documentation has been updated to reflect this change, and new tests have been added to ensure the variables.css is served correctly and user overrides are applied. The refactoring of CSS variables from styles.css to variables.css in the modern template is a good improvement for maintainability.

[gemini-code-assist]

The variables.css file defines CSS variables that are consumed by styles.css. For the variables to be correctly interpreted and applied, variables.css must be loaded before styles.css. Currently, styles.css is loaded first, which could lead to undefined CSS variables if styles.css attempts to use them before they are declared.

<link rel="stylesheet" href="/css/variables.css">
<link rel="stylesheet" href="/css/styles.css">

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 01cd0ebfdb

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Keep fallback theme variables when applying site overrides

Moving modern defaults into css/variables.css creates a functional regression because site-level variables.css is copied to the same output path and fully replaces this file (src/builder.ts copies ${sitePath}/variables.css to output/css/variables.css). With a partial override (like only setting --bg), defaults such as --fg, --surface, and the [data-theme="light"] variables disappear, so many var(...) references in styles.css become invalid and the rendered theme breaks for customized sites.

Useful? React with 👍 / 👎.