Feature/foundation work

[mikepadiernos]

No description provided.

[Copilot]

Pull request overview

This PR lays groundwork for the theme’s component architecture by expanding Atomic Design imports, restructuring page templates into organism-level includes, and updating the PostCSS pipeline to support custom media queries and CSS nesting.

Changes:

• Add PostCSS support for @custom-media breakpoints and nested CSS, and adjust stylelint config accordingly.
• Introduce new molecule/organism Twig templates (menus, navigation, header/main/footer, form elements) and corresponding CSS.
• Refactor design tokens and layout CSS (spacing variables, grid gutters, off-canvas layout, and form styling).

Reviewed changes

Copilot reviewed 40 out of 41 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
source/matter.source.css	Updates import order; expands imports to molecules/organisms; disables defaults import.
source/04-symbiosis/page/page.html.twig	Refactors page layout to include header/main/footer organism templates via blocks.
source/03-organisms/webform/webform.html.twig	Adds a webform wrapper template including title prefix/suffix.
source/03-organisms/site_main/site-main.html.twig	Adds organism template for main content + optional sidebar.
source/03-organisms/site_header/site-header.organisms.css	Adds nested CSS for responsive header navigation toggle visibility.
source/03-organisms/site_header/site-header.html.twig	Adds header organism with branding/navigation (including a menu toggle).
source/03-organisms/site_footer/site-footer.html.twig	Adds footer organism template.
source/03-organisms/brand/brand.organisms.css	Adds spacing between brand items via gap token.
source/02-molecules/textarea/textarea.html.twig	Adds textarea form element template.
source/02-molecules/page_navigation/variants/page-navigation--focus.html.twig	Adds focused navigation variant template.
source/02-molecules/page_navigation/page-navigation.molecules.css	Adds CSS for navigation toggle positioning and focus alignment.
source/02-molecules/page_navigation/page-navigation.html.twig	Adds base page navigation wrapper template.
source/02-molecules/menu/variants/menu--navigation-focus.html.twig	Adds a menu variant intended for “focus” navigation rendering.
source/02-molecules/menu/variants/menu--main.html.twig	Adds a main navigation menu variant with additional classes.
source/02-molecules/menu/menu.html.twig	Adds base recursive menu rendering macro.
source/02-molecules/form-element/variants/form-element--textfield.html.twig	Adds textfield variant extending the base form-element template.
source/02-molecules/form-element/variants/form-element--textarea.html.twig	Adds textarea variant extending the base form-element template.
source/02-molecules/form-element/form-element.html.twig	Adds base form-element wrapper template with label/description/errors handling.
source/02-molecules/brand_item/brand-item.molecules.css	Adds logo sizing styling for brand item.
source/00-nucleus/root/variables/spacing.css	Renames/introduces spacing tokens (--space--gap*) and adds section comments.
source/00-nucleus/root/variables/sizes.css	Adds --item-height token.
source/00-nucleus/root/variables/breakpoints.css	Introduces @custom-media breakpoints.
source/00-nucleus/root/variables.root.css	Imports new breakpoints variables file.
source/00-nucleus/root/grid/grid-layout.css	Updates gutters, switches to custom-media breakpoints, and refactors grid variables.
source/00-nucleus/root/globals/utilities.css	Adjusts .flex utility (removes built-in gap var usage).
source/00-nucleus/root/globals/styling.css	Updates color/spacing variables for off-canvas link styling.
source/00-nucleus/root/globals/reset.css	Adds list margin/padding rules for lists (and updates reset output).
source/00-nucleus/root/globals/layout.css	Refactors off-canvas header/main/footer layout and adds permission-navigation overrides.
source/00-nucleus/root/globals/forms.old.css	Adds an “old” forms stylesheet (currently present under source/ for linting).
source/00-nucleus/root/globals/forms.css	Refactors form styling under .off-canvas and adds .form-item layout rules.
source/00-nucleus/root/globals/forms.alt.css	Adds an alternate .form-field styling approach.
source/00-nucleus/root/globals.root.css	Enables globals forms stylesheet import.
source/00-nucleus/defaults.nucleus.css	Updates spacing var usages to new token names.
package.json	Adds postcss-custom-media and postcss-nested.
matter.info.yml	Adds body_roles_classes module dependency.
gulpfile.js	Adds PostCSS custom media + nesting plugins to the build pipeline.
assets/css/matter.theme.css.map	Updates generated sourcemap to reflect new sources and processing.
assets/css/matter.theme.css	Updates generated compiled CSS output.
README.md	Expands requirements documentation and adds development tooling requirements.
.stylelintrc.json	Allows @custom-media and relaxes invalid media query checks for custom media usage.
.stylelintignore	Ignores generated assets and common local/dev directories.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.