3.0.0-rc.2

Fixed

• All of the variables can now be overridden by users

Breaking

• 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

3.0.0-rc.1

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

2.0.0

Added

• 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
• Added $bitstyles-grays-hint-color-mix and $bitstyles-grays-hint-color variables to allow control over how the gray color palette is generated
• Added $bitstyles-color-mix-percentages list variable, giving control over which percentage intervals are generated in each color’s palette
• There’s now the generate-palette($base-color, $mix-color, $percentages) function to automate generating palettes of individual colors
• Color scales based on the semantic colors (brand-1, warning etc.) are now available in shades as well as tints (brand-1-shades, warning-shades etc.)
• Inputs’ placeholder text font-weight and font-style can now be customized using $bitstyles-input-placeholder-font-weight and $bitstyles-input-placeholder-font-style variables respectively
• The .u-gap classes are now available at m and xl breakpoints
• The .u-align, .u-self, and .u-justify sets of utility classes are now all available at m breakpoint. The available breakpoints can be customized
• The various .u-flex- classes are now available at the m breakpoint. The available breakpoints can be customized by overriding $bitstyles-flex-breakpoints
• Adds .u-flex-nowrap and .u-flex-row classes
• Adds url-encode-color function to our color tools, to encode hex colors correctly

Changed

• Background color of the html element is now the background color at 100% instead of 95%
• Default color scales are now generated with colors at more percentage mixes: 1, 2, 3, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 97, 98, 99, 100

Docs

• Adds a Design Tokens section to the storybook, and lists all available colors

Fixed

• Selects now correctly display the icon specified as a background in Sass, even when postcss isn’t being used (note that you’ll have to deal with the prefixing of the appearance property, prefereably using autoprefixer)

Breaking

• Renamed u-flex__shrink-x (where x is a number) to u-flex-shrink-x
• Renamed u-flex__grow-x (where x is a number) to u-flex-grow-x
• Renamed u-flex--wrap to u-flex-wrap
• Renamed u-flex--col to u-flex-col

v1.5.0

Added

• .u-grid-cols classes are available at the xl breakpoint
• All .u-grid-cols, .u-col-span, and .u-col-start classes are now specified using Sass variables, and can therefore be overridden

Breaking

• All .u-grid--x-col classes, where x is a number, have been renamed to u-grid-cols-x
• All .u-grid__col-span-x classes, where x is a number, have been renamed to .u-col-span-x
• All .u-grid__col-x classes, where x is a number, have been renamed to .u-col-start-x

v1.4.0

Added

• We have a new media-query available in $bitstyles-breakpoints: motion-ok. It’s available using the media-query mixin, and applies when the user has not set a preference to reduce motion in their UIs, allowing a no-motion-first approach to animations
• All dropdown, sidebar, and navbar examples in our storybook documentation have JS behaviour using alpinejs
• Modal behavior is implemented using a11y-dialog

Changed

• The topbar atom is now not fixed by default. Set the variable $bitstyles-topbar-position to fixed to replace that behavior

Breaking

• The topbar atom no longer sets a background and foreground color, and the corresponding variables ($bitstyles-topbar-color and $bitstyles-topbar-background-color) have been removed. If you were using that functionality, use the u-fg and u-bg utility classes instead

v1.3.0

Added

• Dropdown atom has a new variant .a-dropdown--full-width that causes the dropdown to span the full width of its nearest position: relative parent element. Combinable with a-dropdown--top
• Gap sizes can now be specified, and the class suffixes named, using a Sass variable
• You can now override which directions the margin and padding utility classes are output for (top, bottom, etc.), and what those classes are named independently of the CSS property, using $bitstyles-margin-directions and $bitstyles-padding-directions respectively
• You can now override the sizes the margin & padding utility classes are output for, using $bitstyles-margin-sizes and $bitstyles-padding-sizes respectively
• Border utility classes are now available at all four directions, and on a per-color basis. Currectly only gray-10 and gray-70, this can now be customized using sass variables.
• Border utility classes can now be available at breakpoints by overriding the $bitstyles-border-breakpoints variable
• Default breakpoints now include xl, for ultra-widescreens
• .a-content max-width and padding is now customisable using Sass variables, and by default now includes a 100% option
• A new .u-z utility class for setting z-index

Changed

• The size of gap generated by .u-gap-m is now 1rem, not 0.8rem

Fixed

• The checkbox checkmark is now correctly centered, and only rendered once

Breaking

• The double-dashes have been removed from the .u-margin and .u-padding classes (e.g. .u-margin-m--top). To migrate, replace the -- in the classnames with -
• The .u-border--top .u-border--bottom classes have been replaced with .u-border-gray-70-top and .u-border-gray-10-bottom respectively
• .u-fixed-ratio is renamed .u-aspect-ratio, and the double-dashes are replaced with single. Please rename all uses e.g. .u-fixed-ratio--16-9 becomes .u-aspect-ratio-16-9
• .u-fixed-ratio__inner has been removed, and is no longer necessary. To migrate, move other classes that may be on that element to the .u-fixed-ratio element, and remove the .u-fixed-ratio__inner element
• Now requires version ^1.34.0 of dart-sass, in order to use the new Math.div function and remove all the division using / characters.
• Removes the content mixin. If you need the content functionality, use the .a-content classname instead (it’s customisable using Sass variables, see the settings.scss file)

v1.2.0

Added

• More aspects of the sidebar organism can now be specified in Sass variables
• a-dropdown--top variant of dropdown component

Changed

• Sidebar examples now include the closed state, so that it can be seen on small-viewports

Breaking

• Sidebar Sass variables have been renamed, so if you were using or overriding those variables in your project, you’ll need to rename $sidebar-width to $bitstyles-sidebar-large-width
• Renames .a-dropdown--reverse to .a-dropdown--right

v1.1.0

[1.1.0] - 2021-04-15

Added

• New component in UI layer: sidebar
• Added this changelog

Changed

• [Docs] Improved documentation: added links to classes used in the storybook examples
• [Docs] Navbar examples are now in iframes of fixed height, so the examples are clearly visible in docs view
• Webfonts are now included in the release
• Updated the modal component visual styles, and added examples for dialogs, alerts, and informational modals
• Breadcrumbs & pagination components are now wrapped in labelled <nav> elements
• Imports of Sass partials are now alphabetized within each layer
• Navbar component (largescreen version) now scrolls instead of wrapping when the links inside take up more space than available

Fixed

• a-button--nav and a-button--nav-large are no longer centered

Breaking

• Node version bumped to LTS (14.16.0)

1.0.6

[#436] Add npmignore file (2)

Removes the npmignore, in favour of the build key in package.json

1.0.5

• [#436] Add npmignore file
• [#435] Update dependencies
• [#429] Improve form examples
• [#431] Breadcrumb arrows to the right