.jpg)
|
On Monday, we looked at how to create an accessible color palette. Today, we're going to learn how to take that palette and use it to create semantic color variables that we can use throughout our design system. This approach is at the heart of Kelp, my UI library for people who love HTML. Let's dig in! What are semantic colors?In Monday's article, we built out a collection of CSS variables that use the color's name and shade: Arguably, these variables are already semantic. They describe the color and its value. But if you're using a design system, you don't want to have to change a bunch of specific color names through your CSS files every time you work with a new client or your company rebrands. In an ideal world, you'd have variable names that describe what the color does rather than what it is, and use those instead. Things like Creating semantic color groupsFor each color type, we probably need a collection of shades for different use cases…
And for these different colors, we might have a few variants…
The way the lightness/chroma curve is setup in the color palette generator, a difference of 50 or more in shade variables should result in a WCAG AA passing contrast, and a difference of 60 or more should result in a WCAG AAA passing contrast. Start with grayscalesLet's start by building out our neutral colors: the grayscale tones we'll use by default. We'll create The vivid color is quite dark, so we'll use Repeating the process with other colorsWe'll repeat this process for things like This is honestly mostly just a copy/paste/replace process. Applying the colors in your design systemLet's look at something like a Inside the class, we'll define a handful of generic CSS variables for your colors. Then, we'll use those colors to set our CSS properties. (The extra step here will make sense in a minute.) So far, so good. Color variantsLet's say you want some variations on your In addition to the default grayscale version, you want ones in your primary and secondary colors, as well as ones you can use as success and danger alerts. Rather than create component-specific variations like you'd find in a system like BEM, we'll create some more generic modifiers that we can reuse across components. For example, a As long as we use these same variable names in our components, we can slap the We can repeat this process on everything: buttons, tags, progress bars, icons, and so on. Style variationsYou can use this same approach to change the style of various components without having to write component-based modifiers that do the same thing on every single component. For example, imagine you want variations of your components that have no background color and just an outline. You might create a class like this… Which you could then add to your components as a standalone class or with a color variant, like this… These classes become Legos you can mix-and-match on any component. Why do this?Once you have this setup, updating your colors throughout the whole system becomes trivial. Let's say you're a freelancer, and you pick up a new client. The last one had a blue and red color brand color. This one uses shades of purple. You can swap out the And now the entire design system picks up the new design. There's no build step required. No Sass files to compile. The whole thing automatically updates everywhere. I'll be setting up the theme builder we looked at on Monday to automatically do this mapping for you, so you can just copy/paste/go when setting up a new site. Learn more about KelpI'll be releasing alpha code and documentation on Kelp UI this week. Head over to KelpUI.com to learn more, and get notifications when code is ready to play around with. Tomorrow, I'm going to show you how this setup also makes it really easy to have light and dark modes without having to write a bunch of conditional code throughout your CSS file. Like this? A Go Make Things membership is the best way to support my work and help me create more free content. Cheers, Want to share this with others or read it later? View it in a browser. |
0 Komentar untuk "[Go Make Things] Creating a semantic color palette"