This is an enhancement and bug fix release as we continue to put most of the focus on progress for the Card Framework.
Apply heading color relationships to heading utility class variables (h1-h6)
Enhance auto color relationship compatibility for headings
Auto color relationships can now override default heading colors while still remaining changeable by custom classes and text color utilities.
[Internal] Change variables module to tokens
More Card Framework Progress
[Internal] Replace rollup with vite for bundling
Fixes for texture/overlay live preview and tooltips
[Form] Fixed a label in forms settings for consistency
[Form] Fix for border-width tokens missing 'rem' unit
Fixed texture and overlay tooltips for accuracy
Textures & Overlays has graduated out of "experimental"
Textures & Overlays is now an official feature.
Initial foundation for the ACSS Card Framework (Experimental)
We’re building a complete, official framework for managing shared card styles. You’ll see a new Cards dashboard with a toggle switch, but this is only the start of this feature. It’s not yet ready for testing.
Textures & Overlays now support animation
You can now animate textures with CSS (think gradient animations and more).
New fluid() function for generating clamp functions on the fly
In ACSS custom SCSS area, you can create custom clamps for any use case with fluid(). The function accepts a min and max pixel value (unit not required), separated by comma, e.g. fluid(20,28);.
New .smart-spacing--off class for cancelling smart spacing on any box/page/template
You can now selectively cancel out smart spacing anywhere.
Overflow Detection
ACSS now has an overflow detection mode to visually indicate elements that are creating horizontal overflow.
API file for every builder for better maintainability
Upgraded to Svelte 5
Added labels to the color hex and hsl inputs in dashboard
Added picture tag to figure smart spacing targeting
Smart spacing will now apply to <picture> elements the same way it applies to <figure> elements.
Set auto grids to 100% width by default
Some users were using auto grids on divs with no defined width, resulting in the auto grid auto collapsing. 100% default width fixes this.
Specificity adjustment for heading classes
Expanded border classes
All sides are now independently available as well as border-block and border-inline and all are available in default, light, and dark.
Defined new CSS vars for forms
Change default root font size to 100%
ACSS will now default to 100% root font size on fresh installs (existing installs unaffected).
Various improvements for contextual relationships
Dividers now use ::after element instead of ::before
This improves compatibility with overlays.
Removed 0 value avoidance for declaring header height
Header height is now output as a variable even if a value of 0 is used.
Output all global link styles as variables
You can now freely use these global tokens anywhere.
Add divider and new border classes and vars to auto suggest and context menus
Added divider classes to auto suggest and context menu
Fluent Forms: Override default fixed gap with --f-grid-gutter
Various fixes for contextual relationship link/heading colors
Fix for context menus not filling 100% of width for some users
Sticky offset fallback value fix
Sticky was falling back to a variable, which, if undefined, was resulting in no fallback value rendering sticky elements non-sticky. This is now fixed.
Change color picker to default when alt color is turned off.
Revert smart spacing normalize for everywhere
This version was released as 3.1.3.1. The changelog is the same for 3.1.3, but we added an extra build step to account for one additional fix.
Textures/Overlays now support background-repeat
Overlays now support blend mode
Textures/Overlays has now been expanded to five slots/options
Added a function to parse a css string into a map
Added interpolate-size allow keywords for animating keyword values like auto
Improved auto color relationship compatibility with color scheme
Added color scheme support to custom textures and overlays.
(Breaking Change - Experimental Feature): Texture/overlay utilities now use a single dash instead of double
Decoupled config files and improved test coverage on Recipes API
Fixed auto quote wrapping for asssets on texture/overlays 2-5
Increased specificity on heading classes to battle specificity issues
Prevent dashboard crash when pinning
Prevent overflow on certain context menu sections [314]
Additional fixes for hover shade generation
add migration for bg[shade]-link, bg[shade]-link-hover and bg[shade]-button settings
This release was packaged up to coincide with the release of our official Textures & Overlays demo video to ensure users who want to experiment with that feature have all the same options available to them.
Support for Using Textures as Overlays
You can now use a Texture Style as a background AND as an overlay. ACSS will generate .overlay– classes for each Texture style if you turn on the overlay option.
Additional Texture/Overlay Features & Enhancements
Some new controls and refinements have been added.
Conditionally Load Code for Textures & Overlays
Textures & Overlays will not load any code unless an asset is declared. Even if the feature is turned on, no code is loaded unless you’ve defined an asset for the specific Texture you’re creating. You’re free to leave this feature on at all times with blank assets and it will have zero impact on performance.
Specificity Adjustments for Heading/Link Styles in Color Relationships
Small hotfix mainly to fix specificity issues related to default heading styles.
Add missing "related color relationship" fields for Texture 2 & 3
Fix a specificity issue with default heading styles
Feature: External Link Indication (v1)
Users can now automatically indicate links that open in a new tab or window with both a visual and auditory cue for better UX and accessibility. We’ll be adding support for SVGs in a future update.
Fixed GDPR checkbox styling in Fluent Forms
Users can now control the styling of GDPR checkboxes in Fluent Forms. Unfortunately, this won’t fix the atrocity that is GDPR in general.
Use of * selector in textarea inputs is now possible
Users can now use the * selector in textarea inputs in the dashboard without math validation errors.
Enhanced automated testing protocols for better build-time error identification
Improving stability of each release is a top priority. This is yet another part of our process and commitment to stability.
Fixed smart spacing in Gutenberg when "Use Gutenberg for Page Building" is Off
There’s no reason to not smart space content in Gutenberg pages if Smart Spacing is on, so we’ve changed the default behavior.
Fixed page title spacing in non-iframe Gutenberg rendering instances
Gutenberg is a dumpster fire.
Fixed missing opacity control for textarea placeholder text in forms
Users can now control the opacity of placeholder text in textarea inputs.
Removed some unnecessary console log messages
When looking at the console, users were seeing some unnecessary, and at times scary-looking, warnings and messages. We’ve cleared out any unnecessary ones to limit instances of emotional trauma.
Fixed a Breakdance conflict with the dashboard and structure panel
There was a disturbance in the force when opening the dashboard in Breakdance. We let the hate flow through us, so this should be resolved now.
Fixed duplicate inputs appearing on some dashboard searches
@overlap-alt; recipe
There are now two powerful but different overlap recipes to choose from.
@list-none; recipe
You can now easily strip list styling using the @list-none recipe.
@Grid recipes
Full expansions for all standard and uneven grids.
Min-width media query recipes
You can now automagically insert min-width media queries using @breakpoint-up recipes.
Added tertiary color support to color recipes
Tertiary color and shades are now available in color recipes.
Fix for a broken variable causing Gutenberg to lose styling
@overlap; recipe
Kevin has created one of the most powerful approaches to section overlaps with CSS and it’s now available via the new @overlap; recipe. You can watch a demo of the overlap recipe here.
@property; recipe
There’s now a recipe for declaring a CSS custom property using the new Houdini syntax.
Internal: Added plugin detection for specific forms plugins
The dashboard is now informed by the presence of specific forms plugins so we can tailor options to form plugins that are active on the site.
ACSS now loads in Breakdance the same as other builders
Breakdance created an official hook for us so now we can load the dashboard in Breakdance the same way we do in other builders.
Form Fixes & Enhancements
Fixed select arrow color in Bricks native forms
Fixed tab borders when using the .wsf-steps class in WS Form
Added styling control for WS Form “Label Inside” option.
Fixed checkbox item spacing when checkboxes are wrapped in a <fieldset>
Fixed option label spacing variable not being defined
Fixed range slider styling
Fixed Fluent Form progress bar styling missing colors when using .form--light
Fixed an incompatibility issue with Lenis Smooth Scrolling
The ACSS panel wasn’t scrollable when Lenis Smooth Scroller was enabled. This is now fixed.
Fixed Gutenberg title and first paragraph spacing issue
Link Decoration Styles
We’ve added three new controls for global link decoration styles. Users can now control:
Text decoration color for links
Text decoration color for link hover
Text decoration thickness for links
Resolved font conflict involving the Outfit typeface
We load the Outfit font locally to use in the dashboard. This was causing an issue in websites that were loading it to use in the frontend. We renamed our font-name to “ACSS-Outfit” to avoid clashing.
Fixed a discrepancy between the inputted shade hue and the displayed color value
As reported here and here
Fixed an issue where pasting a HEX code caused incorrect hover calculation and prevented edits
Restored access to "Options > Bricks Enhancements" when using Bricks
Refactored and added test coverage for the dashboard loading logic
Enhanced dashboard loading compatibility with Breakdance
The ACSS dashboard now loads within the builder when using Breakdance v2.
For Breakdance v1, the dashboard will load in the preview window due to limitations with external hooks.
Corrected an issue where the range slider did not display the colors set in the dashboard
Fixed incorrect spacing of checkbox items when they are wrapped inside a fieldset
Fixed the dashboard crashes when saving after searching, or after minimizing.
As reported here and here, the dashboard would sometimes crash and appear not to save settings, or prevent from doing so, when searching or editing certain fields. This is now fixed.
[Experimental] Improved script loading to address CDN issues
This update improves the way we load scripts and resolves an issue for users loading scripts from a CDN (e.g., GoDaddy). Affected users may have experienced an inability to open the dashboard and seen CORS errors in their browser console.
To temporarily resolve this, you can add the following to your wp-config.php file:
<span>define</span>( <span>'ACSS_FLAG_LOAD_DASHBOARD_SCRIPTS_AS_MODULE'</span>, <span>false</span> );<br>
We recommend only applying this change if you’re encountering CORS issues. In the future, we plan to enable this flag for all users, but additional testing is required before making it the default.
Fixed dashboard icon showing up twice in Oxygen