Design System - Colors

[muratcorlu]

Design:

Figma Design Document

We'll implement this features on this issue;

• Palette colors will be named semantically
• Colors are conform with accessibility standards
• Colors should calculate mathematically. For example here

[muratcorlu]

During our investigations, together with @buseselvi and @fatihhayri we concluded with a plan:

• Although HSL is known as not a perfect fit for creating a consistent, accessible color palette, because of the lack of browser support of some newer color functions in CSS (like LCH) we decided to use HSL anyway to have a more consistent (comparing to HEX/RGB colors) color coding in our color pallettes.
• We'll update our current color pallette with a list of new colors those passing APCA standards.
• We decided to use APCA over WCAG2.1 because current WCAG standard is already known as not consistent about color contrast in some different use cases. Altough APCA is not a standard yet, it's calcualtion takes the consideration of background/foreground colors and perceptual contrast calculation.
• We'll create a PR with new color definitions with HSL and share some light value of the main color variants like key, hover, background.
• We noticed that we already have some wrong usage of some similar colors (mostly secondary and content colors) while playing with new color palette. Those will be also fixed while implementing new pallette.
• With a better documentation about theming Baklava, we'll focus on creating own color palettes for the projects that uses Baklava. Provided color palette will be a default, accessible palette but people will be free to use current or any other colors if they want.

We made a playground on codepen to test contrast values and their end results on Baklava components: https://codepen.io/muratcorlu/pen/MWXNNMp

Resources:

• MDN CSS Color documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/color
• A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH: https://www.smashingmagazine.com/2021/11/guide-modern-css-colors/
• Color.js contrast calculator documentation: https://colorjs.io/docs/contrast.html
• An online contrast calculator: https://huetone.ardov.me
• Lyft Color System: https://design.lyft.com/re-approaching-color-9e604ba22c88
• Perceptually uniform color spaces: https://programmingdesignsystems.com/color/perceptually-uniform-color-spaces/index.html
• A presentation about OKLCH: https://evilmartians.com/events/oklch
• Moving away from RGB and HSL: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
• Chrome roadmap about new colors in CSS: https://twitter.com/argyleink/status/1583110952492601345
• Color Formats in CSS: https://www.joshwcomeau.com/css/color-formats/

[github-actions]

🎉 This issue has been resolved in version 2.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[muratcorlu]

We couldn't manage to finish A11Y requirements in our default color pallette but we'll come back to this topic in a separate (more specific) issue.