I installed ACSS 4 Alpha 1 on this site and am working through a lot of the changes. If you are a Bricks user and considering jumping on the bandwagon, follow the team’s advice and don’t use this in production. ACSS 4 is 85% lighter than 3.3.6 because we are essentially being forced into Pro mode with minimal reliance on utility classes. Version 4 does represent a lot of positive shifts, but I think it is interesting that just as components are making their way into Bricks and Etch, the one area where utility classes make sense, they’re being taken away.
Since there is no definitive list of what is missing, I decided to let ChatGPT analyze stylesheets from 3.3.6 and 4 alpha 1. Here is the rough comparison. Since the two sources have different setups, there will be some gaps. More updates after beta, RC, and final releases.
Conceptual changes
Color system
3.3.6: Colors defined as hex/HSL/RGB + huge sets of –primary-*, –secondary-*, –danger-*, –info-*, etc., including *-h, *-s, *-l, and dozens of *-trans-* variables for every color.
4.0 alpha: Colors defined in OKLCH (oklch(…)) for –primary, –secondary, –base, –neutral, –danger, –warning, –info, –success, each with *-hover, *-light, *-ultra-dark, etc. The giant “transparency ladder” (e.g., –primary-trans-10 … -90) is gone.
Typography and spacing
4.0 alpha includes “bridging” vars:
New combos like –text-m-to-s, –space-m-to-s, etc.
Structure & organization
v3.3.6 has everything in one big block (:root, .color-scheme–main { … }, then more :root blocks) plus a ton of utilities/components.
v4 splits into clearly labeled “Feature” blocks:
/* Feat: Text, Headings, & Spacing */
/* Feat: Default Section Styles */
/* Feat: Focus Styles */
/* Feat: Space Variables */, etc.
Debug utilities
v3.3.6 includes .overflow-detection that outlines overflowing elements in crimson.
v4 alpha no longer includes .overflow-detection.
Variable-level comparison
Counts
- Shared variable names: 282
- Only in 3.3.6: 653 variables (removed / not yet ported).
- Only in 4.0 alpha: 114 new variables (new concepts/features).
Same name, different value
Here are some variables that keep the same name but change behavior:
| Variable | 3.3.6 value | 4.0 alpha value (shortened) |
|---|---|---|
| –primary | #005ea2 | oklch(0.6008 0.1493 249.64) |
| –secondary | #152d51 | oklch(0.8527 0.1252 186.17) |
| –neutral | #000000 | oklch(0 0 0) |
| –danger | #c80e04 | oklch(0.5915 0.2020 21.24) |
| –warning | #fee685 | oklch(0.8442 0.1718 84.87) |
| –info | #e5eaf7 | oklch(0.9187 0.0298 243.43) |
| –success | #00a91c | oklch(0.6403 0.1748 146.66) |
| –text-line-height | 1.5 | calc(6px + 2ex) |
Examples of variables removed in v4
These exist in 3.3.6 but not in 4.0 alpha:
- Color channel & shade guts:
- –primary-h, –primary-s, –primary-l
- –primary-trans-10 … –primary-trans-90
- –danger-ultra-light-h, –danger-ultra-light-s, –danger-ultra-light-l, etc.
- Neutral/white/black transparency ladders:
- –white-trans-10 … –white-trans-90
- –black-trans-10 … –black-trans-90
- –neutral-light-trans-*, –neutral-dark-trans-*, etc.
- “f-” design tokens:
- –f-btn-border-radius, –f-btn-border-width, –f-btn-padding-x, –f-btn-padding-y
- –f-field-margin-bottom, etc. (these look like “foundation” or fallback tokens).
- Layout helpers:
- –section-padding-x, –section-gutter
- Several ratio and numeric vars like –1-2, –1-3, –10, –20, etc., presumably part of an internal scale.
- .color-scheme–main root color block and .overflow-detection debug styles.
If your custom CSS references any of those, they’ll break under v4.
Examples of variables added in v4
These exist only in 4.0 alpha:
- Richer typography transitions:
- –text-s-to-xs, –text-m-to-s, –text-l-to-m, –text-xl-to-l, –text-xxl-to-xl, etc.
- –h1-to-h2, –h1-to-h3, … –h3-to-h6, –h2-to-h5, –h2-to-h6, etc.
- New section/spacing blends:
- –space-s-to-xs, –space-m-to-s, –space-l-to-xs, –space-xl-to-xs, –space-xxl-to-xs
- –section-space-m-to-s, –section-space-l-to-m, –section-space-l-to-xs, –section-space-xl-to-l, etc.
- Positional vars:
- –position-top-right, –position-top-right-outside, –position-top-outside-right-outside, etc. (used by some components for tooltips/badges/popovers).
Class-level differences
Counts
- Shared class names: ~98
- Only in 3.3.6: ~2300+ classes
- Only in 4.0 alpha: ~374 classes
So most of the old utility/component classes are not present in the alpha file.
Notable points
- Core “atoms” like .btn still exist in both, but a lot of extended variants appear only in v3.3.6.
- Utility & diagnostic classes such as .overflow-detection are gone.
- Many layout and component-level classes (grids, spacing helpers, etc.) are missing from the alpha, which is consistent with it being a work-in-progress core rather than the full framework.
Practical “what breaks?” checklist
If you drop in the 4.0.0-alpha-1 CSS instead of 3.3.6:
- Custom CSS using removed variables
- Any references to –*-trans-*, –*-h, –*-s, –*-l, –section-padding-x, –section-gutter, or –f-* tokens will break
- Color rendering changes
- Even if you only use –primary or –secondary, they’re now OKLCH colors tuned for perceptual contrast; they won’t match the old hex palette exactly.
- Missing utility classes
- If you’re using a lot of Automatic.css utility classes directly (rather than Bricks controls), expect missing selectors in v4 alpha.
