Sass refactor

[RachelRVasquez]

All Submissions:

• Have you followed the Contributing guidelines?
• Does your code follow the WordPress' coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

🎉 When compared to the old stylesheet, the newly compiled stylesheet is 310 lines less. 🎉

Bugs Resolved & Tasks Completed:

• A11y: Colors tweaked a little in the Cocoa Ash/Midnight Violet Color Scheme to meet AAA standards.
• Bug: Site title not picking up the color from customizer on the front-end or in the preview.
• Mobile Menu: Removed the underline from "Log Out" link.
• Mobile Menu: Position "Log Out" link to a new line beneath the, "Welcome..." text.
• style.css - Updated the PHP version we support to 7.4.0.
• Bug: Resolved issue where the sticky nav was on top of the WP Admin Bar's dropdown menus.
• Forms: Styles should be closer to PMPro's forms, except they'll match the customizer color scheme.
• Comments: Re-styled and prettified 🌟
• A11y: Ensure author links on archives are underlined.
• Bug: Legacy floats from alignment classes should clear properly now.

Enhancements:

• Build Process: Added a new build command for compiling vanilla CSS to Sass.
• Sass for styling Memberlite: Organized and converted all styles that previously lived in the styles.css file into a src/scss directory.
  • Removed any legacy CSS we no longer needed.
  • New breakpoint mixins for media queries, no need for a separate responsive stylesheet.
  • An updated CSS reset. This is a combination of what we already had and this reset here.
  • Removed the CSS/_grid.css file and instead added a cleaner grid (based on the old one, but less code!) to src/scss/base/_grid.scss.
• Updated the documentation (docs/) about the build process.
• Kept the existing stylesheet enqueued, but added an additional stylesheet that is compiled from Sass and includes a Table of Contents for easier navigating.

How to test the changes in this Pull Request:

1. Follow the documentation on how to build the stylesheet in docs/build-process.md
2. Compare this branch to the memberlite-7-0 branch on the front-end. Two separate environments will make this easier.
3. Browse the site and make note of anything that's off on desktop or mobile.
4. You can also use Playwright for visual testing. I'll create a loom showing how to do that on Monday. 👍

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you successfully run tests with your changes locally?

Changelog entry

This PR refactors Memberlite’s front-end styling from a single large style.css into a Sass-based structure, updates the build tooling to compile Sass into theme CSS assets, and adjusts a couple of bundled color schemes for accessibility/visual fixes.

[Copilot]

Pull request overview

This PR refactors Memberlite’s front-end styling from a single large style.css into a Sass-based structure under src/scss/, updates the build tooling to compile Sass into theme CSS assets, and adjusts a couple of bundled color schemes for accessibility/visual fixes.

Changes:

• Replace the legacy monolithic style.css rules with a Sass codebase (src/scss/**) intended to compile into build/css/main.css.
• Update the theme enqueue/build process: remove the old grid stylesheet, add a new compiled “main” stylesheet, and revise package.json scripts + docs.
• Tweak “Midnight Violet” and “Cocoa Ash” scheme values for improved contrast/accessibility targets.

Reviewed changes

Copilot reviewed 32 out of 33 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
style.css	Keeps only theme header metadata; removes legacy compiled CSS rules.
functions.php	Stops enqueuing css/grid.css; enqueues compiled build/css/main.css.
package.json	Adds Sass + npm-run-all; introduces CSS build/watch scripts and aggregates build.
docs/build-process.md	Updates build documentation to reflect Sass compilation and new scripts.
css/grid.css	Removes legacy standalone grid stylesheet.
adminpages/admin_footer.php	Removes an extra clearing div from admin footer markup.
inc/colors.php	Updates scheme colors (Midnight Violet + Cocoa Ash).
src/scss/main.scss	New Sass entrypoint organizing imports for the compiled stylesheet.
src/scss/abstracts/_variables.scss	Adds Sass variables for alert colors/shadows/fonts.
src/scss/abstracts/_mixins.scss	Adds breakpoint/util mixins for refactored Sass structure.
src/scss/base/_reset.scss	New CSS reset (modernized).
src/scss/base/_base.scss	Base element/type styles migrated from legacy CSS.
src/scss/base/_utilities.scss	Utility classes migrated (align, hide, screen-reader, text sizes).
src/scss/base/_alerts.scss	Alert/message styling migrated and standardized (Sass variables).
src/scss/base/_buttons.scss	Button styling migrated with variant classes and hover states.
src/scss/base/_forms.scss	Form styles migrated and updated (borders, spacing, focus).
src/scss/base/_grid.scss	New Sass-based grid system replacing css/grid.css.
src/scss/blocks/_blocks.scss	Adds block-specific styles (tables, quotes, search, images, query).
src/scss/components/_breadcrumbs.scss	Breadcrumb component styling migrated.
src/scss/components/_comments.scss	Comment list/reply form styling migrated.
src/scss/components/_grid-list.scss	Grid-list component styling migrated.
src/scss/components/_pagination.scss	Pagination/navigation styling migrated.
src/scss/components/_shortcodes.scss	Memberlite shortcode styles migrated (banners/tabs/accordion/etc).
src/scss/components/_widgets.scss	Sidebar/widget styles migrated.
src/scss/components/_banner.scss	Adds bottom banner styles (#banner_bottom) as a separate partial.
src/scss/structure/_header.scss	Header + navigation + mobile nav styles migrated.
src/scss/structure/_masthead.scss	Masthead/banner/byline styles migrated.
src/scss/structure/_footer.scss	Footer widgets/nav/site-info styles migrated.
src/scss/structure/_content.scss	Entry/content/footer/author box styles migrated.
src/scss/pages/_blog.scss	Blog/single layout + alignment rules migrated.
src/scss/pages/_404.scss	404/search-no-results layout styles migrated.
src/scss/pages/_page.scss	Page template layout + alignwide/full handling migrated.
src/scss/plugins/_pmpro.scss	PMPro integration styles migrated and reorganized.

Comments suppressed due to low confidence (4)

src/scss/blocks/_blocks.scss:152

• These selectors compile to .wp-block-image.figure.alignleft/right, which won’t match the usual block markup (.wp-block-image figure.alignleft/right ...). As a result, the mobile float reset won’t apply. Change this to target descendant figure.alignleft/figure.alignright inside .wp-block-image (or otherwise align with the actual rendered HTML structure).

.wp-block-image {
	&.alignfull {
		text-align: center;
	}

	&.figure.alignleft,
	&.figure.alignright {
		@include breakpoint(mobile) {
			@include reset-alignment-floats-mobile;
		}

src/scss/base/_alerts.scss:104

• .alert is using var(--memberlite-color--alert-text) (double -- before alert-text). The theme’s customizer generates variables in the --memberlite-color-{css_var} form, so this variable name won’t exist and the color rule will be ignored. Use the correct variable name (or the existing $color-alert-text Sass variable used elsewhere in this file).

.alert {
	color: var(--memberlite-color--alert-text);
}

src/scss/base/_buttons.scss:99

• .btn_success:hover sets background-color to $color-success-text, which is the same value as the base .btn_success background and differs from the previous behavior (hover used the success link color). This likely prevents any visible hover state for success buttons. Consider switching the hover background to $color-success-link (consistent with the other variants).

.btn_success:hover {
	background-color: $color-success-text;
}

src/scss/main.scss:66

• src/scss/components/_banner.scss defines the #banner_bottom styles, but main.scss doesn’t import that partial. Since #banner_bottom is still rendered by inc/page_banners.php, its styling will be missing from the compiled main.css. Add an import for the banner partial (and include it in the ToC if applicable) so the bottom banner remains styled.

@import "components/breadcrumbs";
@import "components/comments";
@import "components/grid-list";
@import "components/pagination";
@import "components/shortcodes";
@import "components/widgets";

---

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