Skip to main content

Glsass v1.1.0

· 2 min read
Johann Pinson

The version 1.1.0 is available and introduce new features, like 5 components, and tools.

Moreover, it completely change the logic behind the color deduction for better contrast.

What's new?​

New feature​

The main change is about colors function, more precisely the contrast ratio calculation to select a color to use.

The old function yiq-contrast works well in many cases, but it didn't respect the WCAG standard about minimal contrast between background and foreground colors.

The contrast module add functions following the WCAG requirements to respect at least a 4.5:1 contrast ratio. Theses functions are all documentated in the a dedicated page.

All internal functions are now working this module to determine the best color to use.

The framework also delivers 5 additionnal components, two about forms, a new utility (elevation) and create two NPM packages for customizing layers requirements.

Summary:

  • new contrast tool (5 functions) (docs)
  • new switch components - add an further display for input[type=checkbox] (docs)
  • new range component - allow to personalize input[type=range] (docs)
  • new breadcrumb component (docs)
  • new pagination component (docs)
  • new tooltip component (docs)
  • new elevation utility (docs)
  • new @glsass/basics package - Generics + Elements layers (npm)
  • new @glsass/patterns package - Objects + Components layers (npm)

Breaking change​

The variable names from @glsass/grapgics/graphics.fonts change to make it more consistent and logic through the codebase. It also adds variables about each baseline (used for line-height).

Bug fix​

This new version contains the previous fix from the v1.0.1 to add the index.scss file on the object layer.

Documentation​

Documentation is already updated with the changes listed, and the v1.1.0 now become the default version.

The first sections add more details about exitCSS (inspiration and concept) and the vertical rhythm.

You can find all versions available here.

Patchs​

v1.1.1​

  • fix: wrong namespace between internal dependencies 86ac082

v1.1.2​

  • fix: wrong variables names in graphics (old settings) 4bfeaea
  • fix: some variables weren't overridable in the navbar component 13b0282
  • fix: navbar component didn't respect bemit classes names b30cb08