Sprucecss Versions Save

What's Changed

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

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).

What's Changed

• Forward plugin folder (generate-normalize mixin).

What's Changed

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

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...

What's Changed

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

Bugfix

• Fix responsive table size.

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).

Improvements

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

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.

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.