Skip to content

2.0.0

Choose a tag to compare

@planktonic planktonic released this 22 Jul 10:37
· 159 commits to main since this release

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