sprucecss

What's Changed

• Revert clear-list mixin's margin property.

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.

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.

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

Bugfix

• Fix field-icon colors

Bugfix

• Fix stylelint error.

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.

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.

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.

Bugfix

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

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.