v6.2.0

What's Changed

• Add RELEASE.md by @planktonic in #818
• build(deps): bump tar from 6.1.13 to 6.2.1 by @dependabot in #816
• Update Section Heading component by @ArinzeJeffrey-droid in #795
• build(deps): bump ws from 8.13.0 to 8.17.1 by @dependabot in #821
• [#819] Insufficient 5.0.0 changelog entries by @planktonic in #822
• Allow users of bitstyles to run node 22 by @angelikatyborska in #823
• build(deps-dev): bump webpack from 5.76.2 to 5.94.0 by @dependabot in #830
• build(deps): bump elliptic from 6.5.4 to 6.5.7 by @dependabot in #831
• Bump version 6.2.0 by @planktonic in #833

New Contributors

• @angelikatyborska made their first contribution in #823

Full Changelog: v6.1.1...v6.2.0

6.1.0

What’s Changed

• [#779] Add some layout primitives (switcher) by @planktonic in #784
• Task/internal 26 create a badge with trailing label component 785 by @bluemoonecho in #792
• [#779] Add some layout primitives (stack) by @planktonic in #781
• [#803] Update nodes version in package.json by @planktonic in #806
• [#805] Update stylelint & stylelint config by @planktonic in #807
• Task/internal 31 update sidebar component 763 by @bluemoonecho in #794
• Task/internal 28 update page header component 782 by @bluemoonecho in #793

New Contributors

• @bluemoonecho made their first contribution in #798

Full Changelog: v6.0.0...v6.1.0

v6.0.0

Visual refresh & refactor of components

Starting the visual refresh of our components, and refactoring as we go. Updated components are making use of the new CSS custom property design token system.

What's Changed

• [#710] Update color palette by @planktonic in #738
• [#739] Update sizing scale by @planktonic in #740
• Bump webpack from 5.74.0 to 5.76.0 by @dependabot in #742
• [#741] Update nodejs by @planktonic in #748
• [#745] Simplify npm scripts by @planktonic in #747
• [#737] Return CSS custom properties from design token helper functions by @planktonic in #743
• [#711] Update button variants by @planktonic in #744
• [#755] Update PR template by @planktonic in #756
• [#712] Update typography by @planktonic in #746
• [#752] Update Dropdown component by @planktonic in #753
• [#749] Update badge components by @planktonic in #751
• [#717] Use component CSS for DL component by @planktonic in #723
• [#772] Remove the support for legacy @imports by @planktonic in #773
• [#761] Simplify imports by @planktonic in #774
• [#757] Update Link component by @planktonic in #758
• [#750] Update Flash component by @planktonic in #754
• [#759] Update Button Joined component by @planktonic in #760
• [#769] Refactor getters for design tokens by @planktonic in #776
• [#764] Update skip-link by @planktonic in #780
• Bump version 6.0.0 by @planktonic in #787

Full Changelog: v5.0.0...v6.0.0

v5.0.0-alpha

Moving more of the design tokens to a two- or three-tier system:

• Improved typography
• Improved color palette system

Released for testing these new systems before adding the new button creation system that’s built on top

v4.3.0

What's Changed

• Bump minimist from 1.2.5 to 1.2.6 by @dependabot in #649
• [#640] Add utility: position by @planktonic in #643
• [#642] Missing state: active link by @planktonic in #644
• [#645] Add utility: max-height by @planktonic in #648
• [#641] Add utility: inset by @planktonic in #647
• [#651] Generate line-height utility class by @planktonic in #652
• [#646] Add utility: max-width by @planktonic in #650

Full Changelog: v4.2.0...v4.3.0

v4.2.0

Added

• Configuration of the border-radius utility class is now possible: $bitstyles-border-radius-values, $bitstyles-border-radius-breakpoints, $bitstyles-border-radius-directions
• New u-min-height utility class
• u-height utility class is now configurable using $bitstyles-height-values and $bitstyles-height-breakpoints
• New u-min-width utility class
• New atom component a-skip-link, for skip-to-content links

Breaking

• u-round classes have been renamed u-border-radius

v4.1.0

Added

• New Sass map $bitstyles-shadows-shadows for holding global shadow design tokens as a Sass list, and a shadows.get() function for accessing them in your Sass
• New helper function shadow.generate() to generate multi-layered “natural” shadows based on the color and distances you give
• Two functions (shadow.to-box-shadow() and shadow.to-drop-shadow()) for translating those shadows (which are specified in Sass' list format) into either CSS box-shadow format, or CSS filter drop-shadow format. Not necessary for the shadows accessed using shadows.get()
• New u-shadow and u-drop-shadow utility classes to set box-shadows and drop-shadows respectively
• The smallscreen version of the Sidebar organism can now be positioned to the left or right side of the screen by overriding $bitstyles-sidebar-small-location (defaults to left)

Fixed

• u-bg classes will now be output with the correct breakpoint suffix
• $bitstyles-font-family-breakpoints will now correctly output media-queries

Changed

• Renames tools/_directional-properties.scss -> tools/_properties.scss, so any imports of those files will need to be updated to reflect that
• Renames output-properties() -> output()
• Renames output-directional-properties() -> output-directional()

PRs contained

• Bump postcss from 8.2.10 to 8.2.13 by @dependabot in #600
• [#597] Renaming directional-properties by @planktonic in #601
• Bump nanoid from 3.1.23 to 3.2.0 by @dependabot in #605
• Bump node-fetch from 2.6.1 to 2.6.7 by @dependabot in #606
• Update dependencies by @klappradla in #608
• [#595] Add utility: box-shadow by @planktonic in #607
• [#604] Update linting by @planktonic in #609
• Update workflow name and badges by @klappradla in #614
• Fix broken font-license link by @klappradla in #617
• [#622] List changed utility class in changelog by @planktonic in #623
• [#612] Update atoms/content documentation by @planktonic in #615
• [#603] Cleanup some outdated references in docs by @planktonic in #616
• hotfix/update-storybook by @planktonic in #630
• [#588] allow sidebar organism to change sides by @planktonic in #592
• [#613] Add docs: design tokens by @planktonic in #619
• [#620] Simplify sass module forwarding by @planktonic in #621
• Update dependencies 2022-02-12 by @planktonic in #631
• Bump version 4.1.0 by @planktonic in #636

Full Changelog: v4.0.0...v4.1.0

v4.0.0

Added

• u-bg classes can now be made available at different breakpoints by overriding the $bitstyles-bg-breakpoints variable
• u-fg classes can now be made available at different breakpoints by overriding the $bitstyles-fg-breakpoints variable
• Default settings for u-fg classes now include white as an option
• u-font classes can now be customized by overriding the $bitstyles-font-weight-values and $bitstyles-font-style-values variables. They can be made available at different breakpoints by overriding the $bitstyles-font-weight-breakpoints and $bitstyles-font-style-breakpoints variables
• u-text classes can now be customized by overriding the $bitstyles-text-values variable. They can be made available at different breakpoints by overriding the $bitstyles-text-breakpoints variable
• u-overflow classes are now also available for scroll, hidden, and auto by default, and can be set by overriding $bitstyles-overflow-values
• You can now override the font styles for input-texts, selects, and buttons.
• New u-font classes to specify font-family. Defaults to u-font-header and u-font-body, which apply the respective font stack as specified in settings/typography. This can be overridden using $bitstyles-font-family-values, and can be made responsive by specifying breakpoints in $bitstyles-font-family-breakpoints
• Color & background-color of the html element can now be specified using $bitstyles-html-color and $bitstyles-html-background-color, and default to the text and background colors specified in your global color-palette
• Default key-name to return when asking for a color without specifying it (e.g. palette.get('white')) can now be set using $bitstyles-color-palette-default-key
• There’s now a helper function font-size.get($font-size, $breakpoint) which returns font-sizes from the global map

Fixed

• The height of inputs, selects, and .a-buttons now matches regardless of the border-width
• Modals now only show scrollbars (on OSes/configs where scrollbars are shown) when they’re needed
• Typographic scale of base elements is no longer prefixed when a prefix is specified

Changed

• The font-sizes specified in settings/typography $font-sizes map should now use rem units instead of px. The Sass will still compile if you specify using px as before, but the resulting CSS will not follow current best practices (to use rem units for specifying font-size)

Breaking

• All utility classes which had a double dash in their classname (--) now only have a single dash. You’ll need to rename all these classes to use single dashes e.g. .u-bg--brand-1 becomes .u-bg-brand-1
• Values for the display classes (u-block, u-flex etc.) will now need to be set unquoted. If you previously were overriding the $bitstyles-display-values variable, make sure all the values on the right hand side are unquoted CSS values e.g. 'block': block instead of 'block': 'block', as was previously possible
• If you were using the $bitstyles-input-padding variable, you’ll now need to set $bitstyles-input-padding-vertical and $bitstyles-input-padding-horizontal separately
• The u-overflow-x and u-overflow-y classes were renamed to u-overflow-x-auto and u-overflow-y-auto, respectively
• The media-query/breakpoint mixin is no longer called using media-query.media-query(). You’ll need to update all uses of this to media-query.get()
• Removes the unit-conversions functions

PRs

• [#544] Update remaining utility classes to using single-dash naming by @planktonic in #546
• [#576] select remove half the border width from vertical padding by @planktonic in #581
• Updates browserslist & dependencies by @planktonic in #579
• [#574] modal scrollbars when external mouse is connected by @planktonic in #582
• [#575] overflow scroll utilities by @planktonic in #580
• [#583] add utility font family by @planktonic in #584
• [#586] variables to set color background color of html by @planktonic in #589
• [#587] variable to specify default value for palette get by @planktonic in #590
• [#585] get() for font sizes by @planktonic in #594
• Bump version 4.0.0 by @planktonic in #598

Full Changelog: v3.1.0...v4.0.0

v3.1.0

[3.1.0] - 2021-12-20

Added

• There are now variables to specify the color, text-decoration, background-color, and box-shadow of links in each state
• Default margins for heading elements and paragraphs can now be specified with the $margin-heading and $margin-paragraph variables respectively
• An extra size was added to the default gap classes: u-gap-xs

Fixed

• The border-width and border-style are no longer hardcoded in the dropdown separator styles. The existing default value for the $separator-border variable already set those properties, so you so not need to change anything unless you override that variable in your project. This fixes the issue of an invalid border property when your build does not get automatically fixed by the build tools (in the case of bitstyles, postcss was correcting the border property)
• Link variables can all now be overridden using any of the four import/use methods

Changed

• dl examples are now aligned to the baseline, using the u-items-baseline class. Update dl classnames in your project to match
• $font-family-webfont is now $webfont-family-name. If you’ve overridden this variable, you will need to rename it. The variable should only contain the filename (no filename extensions, as before), as the path to your fonts is now set with the $webfont-base-url variable (which defaults to ../assets/fonts/). If you host your fonts in a different location, you should change this value to match

Breaking

• img and iframe now default to display: block. Use the utility class u-inline if you need to replace the old behavior
• The default margin for paragraphs is now 0. Use the $margin-paragraph variable in typography settings to change this, or use margin utility classes on the HTML elements
• Variable names for links have changed — the word link is now omitted, resulting in e.g. $color-link becoming $color, $link-color, or $bitstyles-link-color, and $color-link-hover becoming $color-hover, $link-color-hover, or $bitstyles-link-color-hover, depending on how you use bitstyles
• Variable names for breakpoints have changed — the word breakpoint is now omittted, resulting in e.g. $breakpoint-boundary-width becoming $boundary-width, $breakpoints-boundary-width, or $bitstyles-breakpoint-boundary-width, depending on how you use bitstyles

v3.0.0

[3.0.0] - 2021-11-17

Added

• The entire library is now compatible with the Sass module system, and backwards compatibile with the existing Sass import system. This means you can import the whole library or its parts with @use/@forward or @import, and override variables in all of the available ways. The functions and mixins are all available in both systems
• The breakpoints at which .a-card is output can now be specified with the $bitstyles-card-breakpoints Sass variable. Default is at m, and l breakpoints
• Padding for .a-cards is specifiable with the $bitstyles-card-sizes Sass variable. By default there is a base size, and a large size
• A new .a-card__header element allows edge-to-edge header sections for cards of all sizes
• Adds row-start utility classes .u-row-start-x where x is a number, to specify which row an element should start in

Fixed

• .u-col-span- and .u-col-start- classes are available at @l breakpoint again. Fixes the complex form example
• $bitstyles-col-span-breakpoints variable has been corrected to $bitstyles-col-start-breakpoints. If you were using this variable, you’ll need to rename it

Breaking

• As .a-card elements now set their own padding, remove any utility padding classes. If the padding does not match your requirements, it can be customized using the cards’ sass variables
• If you output any flashes or other content at the top of an .a-card element using negative-margin utility classes to cancel out the padding, these classes should now be replaced with the .a-card__header class
• Removes settings/color-base, and merges its variables into settings/color-palette. If you’re already using the Sass module system, you’ll need to rename all variables containing color-base to color-palette