We’ve hit a very important milestone with this update. Keep an eye on the blog for an official write-up!
Button styles compatibility with Bricks UI
You can now use the Bricks button styles UI to apply button style classes to buttons. This feature must be enabled in the Bricks Enhancements area of the dashboard.
Card Framework: Add control for card button size
You can now control default button size for cards.
Card Framework: Exclude "group" classes from activating auto-targeting
Classes like .service-card-group were triggering the card framework. Much like “wrapper,” “group” is now an anti-keyword.
Focus styles no longer show on click
Clicking an element that has hover focus no longer shows the focus styling. This makes for a cleaner user experience.
Headings now default to "700" to match browser default
Headings would be 700 either way, based on browser default, but some users wanted it to show 700 as the value in the dashboard for added clarity.
Show all semantic colors with transparencies in contextual menus
The context menus have now been updated to include all contextual shades and transparencies.
Improve var() stripping in dashboard inputs
We now only strip var() instances when there’s a single variable in use. For more complex scenarios, we leave the vars intact. You don’t have to write var() as we’ll add it for you automatically, but we won’t visually strip them if there’s more than one.
Dark/Light button variant classes can now be added with the context menus
We’ve updated the context menus to support dark/light button variants.
Minor fixes related to hot reloading
Font families wrapped in quotes now output correctly
In rare situations, font families need to be wrapped in quotes (e.g. “Source Sans 3”), but our parser was stripping quotes. This is now fixed.
Fix for dashboard not loading when a specific flag is set to false
Clashing JS variables caused the dashboard not to load when setting the ACSS_FLAG_LOAD_DASHBOARD_SCRIPTS_AS_MODULE flag to false. This is fixed.
Background position was missing in CSS for textures 2-5
This was found during internal testing and wasn’t yet reported by users. The background position property wasn’t being output for textures 2 through 5. This is now fixed.
Disabled transparencies no longer show up in Gutenberg color palettes
Disabled transparencies were showing placeholder swatches in Gutenberg color palettes. This is now fixed.
Gutenberg: Fix "Replace Color Palette" not working
Existing color palettes by Gutenberg or third party tools were still remaining. This is now fixed.
Fix syntax error in custom SCSS triggering a fatal error
Guess what? We’re on pace to have a completely clear issue tracker by mid-December. That means ZERO tracked issues. Once that happens, keep an eye out for a blog post detailing our ACSS team mantra for 2025.
"Auto Container Query" support for Card Framework
The Card Framework is now supercharged with our automatic and innovative approach to container query support.
Card Container Query Recipe
Card Container Recipe.
Card Container Query Mixin
Card Container Mixin
Refactor: Light/Dark style management for form styling
Internal improvement.
Converted old properties to logic properties for form styling
Update to follow standards.
Refactor: Contain classes
Added option to turn on/off container query classes.
Fix instant preview sometimes only targeting the first instance of an element
Hotfix for shade saving action
A seemingly unrelated change to value reversion was affecting the saving of shades. This is now fixed.
Small update to address the lingering “save changes” notice. Expect one more minor release early next week to fix a small dashboard pinning position glitch. With the complete refactoring of pinning, we’re having to go back through and handle the same edge cases with various builders and contexts as we did with the initial dashboard release.
Fix the browser-triggered save changes notice when changes are already saved.
.center--self classes no longer apply any flex properties other than align-self: center
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