- Revert
clear-list
mixin's margin property.
- FIX
transition
: set a fallback default CSS custom property if user has reduced motion. $form-control
: addfont-family
property.$form-label
: addtext-transform
property.$form-switch
: add separate colors.
- FIX
short-ring()
: fix the return at thebutton
option.
- NEW
$form-fieldset
: addlegend-font-family
property. - NEW
$typography
: addletter-spacing-heading
property. - NEW
$colors
: add'strong
option underbase
to customize the<strong>
element's color. - FIX
layout-center()
mixin: addinline-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 overtconfig()
function ortransition()
mixin.). - IMPROVEMENT
transition()
mixin: enable multiple values forproperty
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)
andconfig('border-radius-lg', $display)
.
- Forward plugin folder (generate-normalize mixin).
.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.
.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
.
form-label
: font-family not worked.form-description
: make it explicit.- And many more...
- Use
*-inline-size
and*-block-size
.
- Fix responsive table size.
- Reverse
prefers-reduced-motion
behavior. - Add CSS custom property mode through css-custom-properties setting.
- Fix
selection
mixin - Use
margin-block-start
atlayout-stack
. - Rework utility handling.
- Fix
::-webkit-slider-thumb
bug. - Reorganize generators.
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, themap.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.
- 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).
- Remove unnecessary
$has-outline
argument atgenerate-btn
mixin. - Reorganize print styles into the
generate-print
mixin.
- 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.
- Add
.btn--outline-*
button variants. - Add
font-face
mixin.
- 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.
- Add
$form-check-vertical-alignment
variable add.form-check--vertical-center
and.form-check--vertical-start
. - Add
$table-caption-*
variables.
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.
- Fix
.btn--icon
size padding bug.
- Modify
$container-width
's default value - Cleanup and fix
text-ellipsis
mixin - Modify
$form-control-padding-lg
- Fix field-icon colors
- Fix stylelint error.
- 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.
- Add
.quote
as a helper for cited blockquote.
- Fix color input.
And a lot more minor changes and fixes.
- Add
selection
mixin to handle the::selection
a bit simpler.
- Add
marker
color underbase
to control the list's::marker
. - Add
-webkit-tap-highlight-color
withtransparent
value tohtml
element. - Remove
outline
from[tabindex='-1']:focus
. - Add
$map
argument to thecolor
function to use it any map.
- Fix
text-ellipsis
multiline bug.
- Add
set-css-variable
mixin andget-css-variable
function to handle the prefix using CSS variables.
- 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).
- Fix
text-ellipsis
mixin bug. - Fix null prefix variable generating. Now you can null its value correctly under the $settings map.
- Add
!default
to$table-line-height
.
- Add
spacer-clamp
function which help to generateclamp()
functions from the$spacers
map.
- 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 to1.25
.
- Fix
generate-form-label
order undergenerate-form
mixin.
- Change
start
toflex-start
andend
toflex-end
at flex properties.
- Remove
background-color
fromtransition-property
atgenerate-form-check
mixin.
- Add smaller
line-height
to.form-description
,.field-feedback
and.form-label
. - Update
transition
properties to use new function. - Update
.form-control
’stransition
properties. - Stylelint: enable underscores in class names and placeholders (BEM).
- Fix $font-family-* quotes.
- Add transition function.
- Add scrollbar colors to $colors map.
- Set layout-stack
$width
's default value tofalse
. - Set Stylelint's
color-function-notation
tomodern
.
- Add word-wrap mixin.
- Add in-line table style.
- Add aspect-ratio-* utility classes.
- Rework form-control generator.
- Add display: block; to iframes.
- Remove aspect-ratio mixin.
- Fix import path at elements.
- Add generator mixins.
- Rework preview.
- Fix typos.
- 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.
- `::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).
$font-size-lead
: add !default.
- Add icon button variant (
.btn--icon
).
- 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()
andresponsive-font-size()
function to accept optimal size value. The optimal value will fallback to a global settnigs under the$settings
map.
- Fix some missing !default at variable declaration.
- Add normalize.css as a dependency
- Fix
$foreground
typo atbtn-variant()
mixin (_button.scss)
- Colorize list bullets with
::marker
- Add Autoprefixer to CSS compile
- Add compiled CSS to the repository
- Fix Stylelint errors
- Minor fixes and cleanup
Initial release