Automatic.css - Utility Framework for WordPress Page Builders v3.0.2

== Changelog ==

OCTOBER 24, 2023 - v2.7.1

This is our standard post-release update focusing exclusively on bug fixes and improvements.

- Auto BEM fixes
- Color Scheme Switcher fixes
- Form fixes
- Breakout on <figure>: margin now working correctly
- Ribbon default shadow color now uses neutral instead of shade
- Stop triggering calc expansion on certain css properties (grid-area etc.)
- Add missing card-gap and grid classes in Context Menu
- Fix: You do not have sufficient permissions to save the plugin settings
- Fix: contextual colors are now in the Gutenberg palette
- SASS/SCSS import path
- Breakpoint values are now visible in the Header Height Dashboard
- S3 plugin compatibility
- Converted more Shade references to Neutral

== Changelog ==

v2.7.0.1

This is a hotfix to patch an issue with header heights when the XXL breakpoint is enabled.

Fix for XXL Header Height Error on Save
An issue with a missing variable related to header height was preventing users from saving settings on the dashboard when the XXL breakpoint was enabled. This has been resolved.

Tooltip Edits
We’ve updated two tooltips for better accuracy.

Thanks to group buy participants for the updated resource!

2.3.0 Changelog​

• New
  • Customize box shadow names
  • Customize box shadow values
  • Box shadow variables
    • var(—box-shadow-{name})
  • Added reference color swatches for every shade in the ACSS dashboard (Edit Shades dropdown)
  • Added HSL reference values for main colors in the ACSS dashboard (Edit Shades dropdown)
  • Added Hue inputs for all color shades for ultimate fine tuning of shades (Edit Shades dropdown)
  • Variables for color partials (all colors)
    • —{color}-hex (references the hex code for the color)
    • —{color}-hsl(references the hsl value string for the color)
      • Especially valuable when creating custom transparencies… background-color: hsl(var(—primary-hsl) / .22) = your primary color at 22% opacity.
    • —{color}-rgb (references the rgb value string for the color)
    • —{color}-h (references the hue value for the color)
    • —{color}-s (references the saturation value for the color)
    • —{color}-l (references the lightness value for the color)
    • —{color}-r (references the “r” value for the color)
    • —{color}-g (references the “g” value for the color)
    • —{color}-b (references the “b” value for the color)
  • Admin Bar height variable
    • var(—admin-bar-height) to replace the obnoxious clown show WP default variable that nobody can ever remember: var(--wp-admin--admin-bar--height)
  • Set text line lengths for every text size.
    • You can now control the line length for every text size.
  • Set line height for every text size.
    • You can now control the default line height for every text size.
  • Boxed Layout Setting
    • Under “Viewport” you can now choose to enable a boxed layout for your website.
    • Website background color is now in this panel (was previously in the typography tab).
    • Set the website background color and device/browser background color separately.
    • Set a boxed layout width
    • Define a box shadow for your boxed layout
    • Set a top margin for your boxed layout (if you want a more 3 dimensional boxed layout effect)
    • Define borders for your boxed layout (width, color, style).
  • Offset Page Content Automatically
    • New toggle under Additional Styling > Header Styling called “Offset Page Content Automatically.”
    • Automatically offset your page content when using a sticky or fixed header.
    • Also offsets the initial “add element” controls in Bricks’ canvas (so you can still interact with them).
  • .form—light now works to style Bricks’ native search form.
  • .form—light now works to style Oxygen’s native search form.
  • New ‘Help Text’ styling in WS Form Integration (Beta)
  • Pro Mode
    • Turns off all but the most important framework classes. Retains all variables. Lightens the framework load by around 50%. Designed for advanced users who mostly use custom classes and variables.
    • When Pro Mode is activated, and unused buttons and colors are turned off, the framework is up to 85% lighter.
    • Doesn’t remove classes from the auto-suggest / builder database yet. We’re working on a way to do that safely.
• Enhancement
  • Turning off parts of the framework will now only turn off classes associated with that part of the framework. Variables will still work, allowing advanced users to lighten the framework by disabling classes while still using those parts of the framework via variables.
  • Consolidated “Text Styling” into the main Text panel in Typography
  • Consolidated “Heading Styling” into the main Headings panel in Typography
  • Moved “Fix Paragraph & Spacing” option to Options panel
  • var(—header-height) now auto scales down through all breakpoint values so you don’t have to reference the breakpoint variables in your custom code.
• Fix
  • Fixed issues with var/calc expansion expanding links, aspect ratios, and breaking pseudo element colon spacing in CSS, etc
  • Fixed an issue with scroll offsets not respecting the breakpoint values
  • Object fit classes now work when images are wrapped in <figure> tags
  • Fixed —btn-width missing a unit on the value.
  • Fixed fatal error when activating the plugin via WP CLI
  • Bricks Form Integration (Beta)
    • Fixed Checkbox alignements
    • Fixed File Upload button style
  • WS Form Integration (Beta)
    • Fixed Input border style not working
    • Fixed wrong Input Phone field padding
    • Fixed Placeholder text color + text opacity not working
    • Fixed Range Slider background colors
    • Fixed Checkboxes + Radios background color
    • Fixed Radios border color not working
    • Fixed Submit button border style
    • Fixed checkbox label color
    • Fixed Datetime picker gets Action color (not supported in Firefox)

Thanks to group buy participants for the updated resource!

2.2.0.2 Changelog​

• Enhancement
  • Added the new contextual variables to builder autosuggest.
• Fix
  • Adjusted .clickable-parent functionality to make sure it works on text links.
  • Made an adjustment to automatic var expansion to fix the bug where it interpreted variables such as .grid—3-2 as a formula instead of just a variable.
  • Fixed an issue where text selection color wasn’t showing up in Firefox when the text selection color input in ACSS was reset to blank.
  • Fixed an issue where the deprecated contextual utilities in Frames (prefixed with “fr”) were overriding the new contextual utility values.

Thanks to group buy participants for the updated resource!

2.2.0.1 Hotfix Changelog​

Fixed a “Kevin is a moron” issue that was preventing changes to the new contextual variables from the dashboard.

Thanks to group buy participants for the updated resource!

2.2.0 Changelog​

• New
  • Grid variables
    • All supported grid structures, up to 12 columns, and including auto grids.
  • Contextual variables & classes
    • var(—container-gap), var(—content-gap), var(—grid-gap)
    • .container-gap, .content-gap, .grid-gap
    • Editable from dashboard
    • Backwards compatible with Frames contextual utilities
      • Replaces Frames contextual spacing utilities.
  • Automatic variable expansion (Merry Christmas!)
    • Typing a variable, starting simply with “--” and then hitting <enter> will auto-wrap your variable with var(). This works in all input fields in Bricks and Oxygen and saves a tremendous amount of time/typing.
    • In CSS and code blocks, a semicolon “;” is the trigger for expansion rather than <enter>.
    • This feature must be turned on in ACSS options panel. Please note that it’s almost impossible to account for all scenarios out of the gate, so we are going to need to fine tune this feature over time to perfect it.
  • Automatic calc expansion (Merry Christmas!)
    • Typing a calculation (e.g. 5 + 5) and then hitting <enter> will auto wrap the formula in a calc(). This auto expansion can be combined with variable expansion, For example, e.g. —text-m * 1.25 will produce calc(var(—text-m) * 1.25). This works in all input fields in Bricks and Oxygen and saves a tremendous amount of time/typing.
    • In CSS and code blocks, a semicolon “;” is the trigger for expansion rather than <enter>.
    • This feature must be turned on in ACSS options panel. Please note that it’s almost impossible to account for all scenarios out of the gate, so we are going to need to fine tune this feature over time to perfect it.
  • Calc/Variable validation
    • When using a calc or variable in an input field or code block, ACSS will validate the string to ensure it has the proper number of closing brackets. Malformed variables (missing brackets) are a big problem in web design and can result in broken stylesheets that break all site styling. Thus, we’ve put in a validation check to ensure that any time you use variables or calcs, they have the proper number of brackets.
    • This feature must be turned on in ACSS options panel. Please note that it’s almost impossible to account for all scenarios out of the gate, so we are going to need to fine tune this feature over time to perfect it.
• Fixes
  • Fixed an issue with the licensing system of both ACSS and Frames when the WordPress site_url contains a directory
  • Fixed the tooltip for the Bricks style guide remote template URL
  • Skip links now default to the new action color rather than primary.
  • Fixed some input styling not working for Bricks’ native form element.

Thanks to group buy participants for the updated resource!

2.1.4 Changelog​

New

• Added var(—paragraph-spacing) and var(—heading-spacing). These reference the paragraph and heading spacing values for users with the “fix paragraph and heading spacing” turned on so they can easily reference these values when writing custom CSS.
• Support for overlapping grid rows with .row-start— and .row-end—
  • 12 available rows at each breakpoint.
• Added the ability to customize the selection/highlight color for your website (Additional Styles Tab). This is not set by default, so you’ll need to set it in order to see your preferred selection styling.
  • Background selection color
  • Text selection color
  • Alternate selection background color
  • Alternate text selection color
    • Alternate colors are activated via .selection—alt class. Useful for sections where the background color is the same as the current selection color.

Enhancements

• New Action palette will preload in Bricks.
• Required fields in WSForm now inherit the new action color instead of the old primary color.
• .h— classes will now inherit heading line height preference from ACSS dashboard.
• “Fix paragraphs and headings” now applies to Text and HTML form fields.
• Paragraph and heading line lengths in the ACSS dashboard are now set to 100% by default. Users will have to manually change these to a “ch” unit to get the desired effect (highly recommended for best UX & readability).

Fixes

• Fixed an issue where ACSS wasn’t recognizing the Lite version of WSForm.
• Fixed an issue where .breakout—full could cause some content alignment issues.
• Border width inputs now work on Forms.
• Border width now affects Signature field.
• Custom heading scales now work as expected.
• Fixed “click an item to add it to canvas” message in bricks being affected by ACSS’ paragraph max-width setting.
• Fixed checkbox labels not responding to option label font-weight changes.

Thanks to @blow for the updated resource!

Changelog

2.1.3.1 (Hotfix)​

• FIX: btn—action styling not loading (issue with loop).
• FIX: form submit button hover text color defaulted to the wrong color.
• FIX: form option field labels now default to transparent background.
• FIX: —f-light-input-radius variable wasn’t working.
• FIX: Slight tweak to how “fix paragraph spacing” works to account for more scenarios.

2.1.3​

• Fixed .clickable-parent not working on raw links.
• Fixed an issue where “fix headings and paragraph” spacing was removing spacing from a heading that didn’t have any content after it.
• .list—none now works on ordered lists.
• .list—none now removes any default bottom margin from <ul> and <ol> elements that are added by builders.
• Heading and text overrides now support decimal values.
• Added .isolation—isolate
  • Resets the stacking order of a container. Useful when an item has a negative z-index and certain other circumstances.
• Grids that are set to 1 column at any breakpoint will now automatically force their direct children to span only 1 column. This saves you potentially many steps in the process of building more complex grids because you no longer have to manually put col-span—[breakpoint]-1 on all spanned children to reset them to 1 column. It also prevents potential grid breakage on grids where users forget to reset the col-span of children to 1 when the grid is instructed to be 1 column only.
• Added new color set: Action and all associated classes.
  • This is the a color that sets the action color for your website (buttons and links). This frees up Primary to be used for other colors (e.g. the most used color on your site) and reduces confusion as to what “Primary” is used for.
• WSForm Support (Beta)
  • ***************NOTICE: Forms are very complex. Adding support for WSForm requires over 100 SCSS variables and many new dashboard inputs. Because of this, we want to spend time making the .form—light version rock solid before introducing the .form—dark variant. Please let us know if you find any bugs or issues!
  • Adds a .form—light (active) and .form—dark (coming soon) class.
  • Forms built with WSForm (best form plugin for WP in our opinion) can now be styled with the new forms classes.
  • A new Forms area of the ACSS dashboard is now available for styling forms.
  • Once the light form variant is stable we’ll release a .form—dark variant to give users two fully customizable form styles.
  • Forms will automatically inherit action color for submit button and action items (editable) and input fields and buttons will automatically inherit the radius from global button settings (editable), so you’ll find that a lot of form styling is already done for you out of the gate, adhering to styles you’re already using throughout the site.
  • Form buttons will automatically inherit the border radius of inputs. This is editable, but we felt that buttons and inputs should match input border radius by default. Some sites use pill shaped buttons, which are not suitable for many types of form inputs, thus the form input border radius would need to be altered. When this occurs, form buttons will inherit the new input radius automatically so you don’t have to constantly make changes in two places. For sites that don’t use pill shaped buttons, this will be a non-issue.
• Bricks Form Support (Beta)
  • The .form—light class (see above) also works to style Bricks’ native form element.
• Line Lengths are now available for all individual heading levels giving users the ability to set a different line length per heading size.
• Main colors now output exact match hex values.
  • Main colors (primary, secondary, accent, base, shade) are no longer converted to HSL. They will output the exact match hex value. Only shades are passed through HSL conversion. This will ensure that your main brand colors never have a different hex value than what you set in the dashboard (even though any differences were mostly imperceptible before).
• Added the ability to show/hide ACSS in the admin bar (options panel).
• Added the ability to change the location of ACSS in the WP Admin area (options panel).
  • Note: ACSS can’t be nested under another area like Settings because it has multiple menu items.

Thanks to @blow for the updated resource!

Thanks to @blow for the updated resource!