CHANGELOG.md

Spruce CSS Changelog

v2.3.5 (2026-03-11)

What's Changed

• Clear Sass if deprecation warnings

v2.3.4 (2025-04-09)

What's Changed

• Clear Sass deprecation warnings

v2.3.3 (2024-08-20)

What's Changed

• Revert clear-list mixin's margin property.

v2.3.2 (2024-08-20)

What's Changed

• FIX transition: set a fallback default CSS custom property if user has reduced motion.
• $form-control: add font-family property.
• $form-label: add text-transform property.
• $form-switch: add separate colors.

v2.3.1 (2023-12-18)

What's Changed

• FIX short-ring(): fix the return at the button option.

v2.3.0 (2023-12-17)

What's Changed

• NEW $form-fieldset: add legend-font-family property.
• NEW $typography: add letter-spacing-heading property.
• NEW $colors: add 'strong option under base to customize the <strong> element's color.
• FIX layout-center() mixin: add inline-size: 100%;.
• IMPROVEMENT layout-grid(), layout-flex(), layout-sidebar() mixins: enable multiple $gap value like 'm:l' to control both block and inline values.
• IMPROVEMENT spacer() function: enable multiple value shorthand like 'm:l' to control both block and inline values.
• BREAKING CHANGE Remove the transition() function (you can migrate overt config() function or transition() mixin.).
• IMPROVEMENT transition() mixin: enable multiple values for property with quotes.
• NEW short-ring() mixin: add a new mixin as a shorthand to access the two basic ring styling on focus quickly (input, button).
• Modify the defaults for config('border-radius-sm', $display) and config('border-radius-lg', $display).

v2.2.2 (2023-08-17)

What's Changed

• Forward plugin folder (generate-normalize mixin).

v2.2.1 (2023-07-26)

What's Changed

• .form-group--stacked: fix the border-radius when only one element is present.

v2.2.0 (2023-07-17)

In this release we have a lot of small changes and fixes with some improvement.

What's Changed

• .form-group--row: now uses container query.
• .form-group--row: add vertical alignment option.
• Add disabled state range input.
• Add color-value function to get only the color value.
• form-check: add font-weight option.
• Add drop-shadow button variants.
• Change outline button generator, make it more customizable.
• Add global font scaler option.
• Add pointer-events: none; to the .btn__icon.

Bugfix

• form-label: font-family not worked.
• form-description: make it explicit.
• And many more...

v2.1.0 (2023-05-28)

What's Changed

• Use *-inline-size and *-block-size.

Bugfix

• Fix responsive table size.

v2.0.0 (2023-05-04)

What's Changed

• Reverse prefers-reduced-motion behavior.
• Add CSS custom property mode through css-custom-properties setting.
• Fix selection mixin
• Use margin-block-start at layout-stack.
• Rework utility handling.
• Fix ::-webkit-slider-thumb bug.
• Reorganize generators.

Breaking changes

Because it is a major release, there are some breaking changes. In general, the changes are more of an optimization and reorganization.

• The most significant change is the reorganization of variables. Now, almost all are in a Sass map and accessible with the config() function. You must use the config() function if you plan to use CSS custom properties; otherwise, the map.get also works.
• We modified the generators. Now we have one main generator, generate-styles, and we can control its values through the $generators map.

Others

• Clean up the complete documentation.
• Update all of the Spruce UI components to v2.
• Comment code.
• Start with Sass tests.
• Remove JS code from the package.
• Update coding guides: use quotes when asking for a string value.
• Remove namespaced imports to simplify the use of members (variables, functions, mixins).

v1.2.1 (2023-01-28)

Improvements

• Remove unnecessary $has-outline argument at generate-btn mixin.
• Reorganize print styles into the generate-print mixin.

v1.2.0 (2022-12-27)

Improvements

• Introduce $table-stripe variable to control the table stripe pattern (odd, even).
• Enable selector at generate-table mixin.
• Add --min-width variable to .responsive-table to control width individually.
• Add $font-weight-base variable.
• Allow generic value at spacer-clamp mixin (not just map key).
• Add transition mixin to get the default transition values easier.

New features

• Add .btn--outline-* button variants.
• Add font-face mixin.

v1.1.0 (2022-11-05)

Improvements

• Rework the focus states by adding focus-ring() mixin to control the different variations of focus states.
• Add variables related to focus.
• Make $font-size-lead responsive by default.
• Add $form-check-checkbox-border-radius variable.
• Change $form-switch-margin-bottom variable to $form-switch-margin-block-start.
• Handle null values at color mixin.
• Hack that date/time input height in webkit.

New features

• Add $form-check-vertical-alignment variable add .form-check--vertical-center and .form-check--vertical-start.
• Add $table-caption-* variables.

Breaking changes

Although this is not a major feature, some moderate breaking changes can be related to the focus-ring() mixin and its colors.

And other smaller modifications and fixes.

v1.0.3 (2022-09-15)

Bugfix

• Fix .btn--icon size padding bug.

Improvements

• Modify $container-width's default value
• Cleanup and fix text-ellipsis mixin
• Modify $form-control-padding-lg

v1.0.2 (2022-08-13)

Bugfix

• Fix field-icon colors

v1.0.1 (2022-08-13)

Bugfix

• Fix stylelint error.

v1.0.0 (2022-08-13)

New features

• Add new form element stylings: .form-file, .form-range, .form-switch.
• Add different input display options under .form-group.
• Add a small set of print styles.
• Add an optional cookie helper script.

Improvements

• Add .quote as a helper for cited blockquote.

Bugfix

• Fix color input.

And a lot more minor changes and fixes.

v0.10.0 (2022-07-08)

New features

• Add selection mixin to handle the ::selection a bit simpler.

Improvements

• Add marker color under base to control the list's ::marker.
• Add -webkit-tap-highlight-color with transparent value to html element.
• Remove outline from [tabindex='-1']:focus.
• Add $map argument to the color function to use it any map.

Bugfix

• Fix text-ellipsis multiline bug.

v0.9.0 (2022-06-24)

New features

• Add set-css-variable mixin and get-css-variable function to handle the prefix using CSS variables.

Improvements

• Add $form-check-margin variable to control the .form-check vertical offset.
• Modify layout-* mixins to accept a shorthand value of for spacer from the $spacers map (now you can use any defined key like m, l, xl and so on).

Bugfix

• Fix text-ellipsis mixin bug.
• Fix null prefix variable generating. Now you can null its value correctly under the $settings map.

v0.8.1 (2022-06-08)

Bugfix

• Add !default to $table-line-height.

v0.8.0 (2022-06-08)

New features

• Add spacer-clamp function which help to generate clamp() functions from the $spacers map.

Improvements

• Add html-smooth-scrolling to $settings.
• Add $form-check-font-weight variable.
• Add $form-check-line-height variable.
• Add $table-line-height variable.
• Modify $font-size-ratio’s default value to 1.25.

Bugfix

• Fix generate-form-label order under generate-form mixin.

v0.7.1 (2022-04-21)

Bugfix

• Change start to flex-start and end to flex-end at flex properties.

v0.7.1 (2022-04-18)

Bugfix

• Remove background-color from transition-property at generate-form-check mixin.

v0.7.0 (2022-04-18)

Improvements

• Add smaller line-height to .form-description, .field-feedback and .form-label.
• Update transition properties to use new function.
• Update .form-control’s transition properties.
• Stylelint: enable underscores in class names and placeholders (BEM).

Bugfix

• Fix $font-family-* quotes.

v0.6.0 (2022-04-05)

New features

• Add transition function.

Improvements

• Add scrollbar colors to $colors map.
• Set layout-stack $width's default value to false.
• Set Stylelint's color-function-notation to modern.

v0.5.0 (2022-03-15)

New features

• Add word-wrap mixin.
• Add in-line table style.
• Add aspect-ratio-* utility classes.

Improvements

• Rework form-control generator.
• Add display: block; to iframes.

Removed

• Remove aspect-ratio mixin.

v0.4.1 (2022-03-03)

Bugfix

• Fix import path at elements.

v0.4.0 (2022-03-03)

Improvements

• Add generator mixins.
• Rework preview.

v0.3.1 (2022-02-23)

• Fix typos.

v0.3.0 (2022-02-22)

New features

• Add reset ul, ol mixin with clear-list().
• Add clear button style mixin with clear-btn().
• Add a11y-card-link() mixin.
• New table variants: sm size, bordered, clear-border style.
• Add hidden utility class.
• Add generate-color-variables() mixins to generate color variables.
• Add field-icon() mixin to get and color form element images.

Improvements

• `::selection' add foreground color variable.
• Move $prefix under the $settings map.
• Use as * import internally.
• Add color variable to the table.
• Add font-size variable to .form-check--lg.
• Use newer HSL syntax at colors.
• Fieldset stack gap got a variable.
• Button icon got a new, smaller size option.
• layout-stack() has !important parameter.
• Reorganize .form-check styling under a mixin.
• Simplify button declaration colors (now we can init a button with only two colors).

Bugfix

• $font-size-lead: add !default.

v0.2.0 (2022-01-28)

New features

• Add icon button variant (.btn--icon).

Improvements

• Add $btn-font-family to control the button's font family.
• Add $heading-font-weight to control the heading's font-weight.
• Rename some keys in the $colors map (mark-color : mark-foreground, code-color : code-foreground).
• Reorganize the recurrent colors into variables.
• Modify btn-variant() mixin: add hover foreground color.
• Global switch to color() function's fallback value under the $settings map.
• Modify the scrollbar() mixin to accept hover thumb background-color value.
• Make $breakpoints overwritable by key.
• Modify font-size() and responsive-font-size() function to accept optimal size value. The optimal value will fallback to a global settnigs under the $settings map.

Bugfix

• Fix some missing !default at variable declaration.

v0.1.3 (2022-01-04)

Bugfix

• Add normalize.css as a dependency

v0.1.2 (2021-12-30)

Bugfix

• Fix $foreground typo at btn-variant() mixin (_button.scss)

v0.1.1 (2021-12-30)

Improvements

• Colorize list bullets with ::marker
• Add Autoprefixer to CSS compile
• Add compiled CSS to the repository
• Fix Stylelint errors
• Minor fixes and cleanup

v0.1.0 (2021-12-19)

Initial release