Pollen is a highly configurable, responsive library of style-agnostic CSS variables for your next design system. It lets you write faster, more consistent, and more maintainable styles.

A great way to use CSS properties is to make "private" properties for a class and then create variants based on other CSS class modifiers that sets these variables.

The semantic version is 8 × smaller, renders faster, and is easier to modify and extend.

A class named "secondary" is definitely more explicit.

It will solves a lot of tooltip or popover issues

A search input that expands itself on focus. It animates the width, but it uses CSS grid for the main layout.

We can use css (attributes) selectors to style external links, and I think it is a great idea.

Examples of relevant class names.

A consistent set of design tokens already defined

I didn't push the thought to this point! The distinction between the focus indication area and the contrasting area is also pertinent.

A set of resources to use fluid typography instead of media queries

The state of the art CSS parser and minifier.

This tool is used by Mozilla for Firefox.

Each theme provides an accent, special, and neutral palette with 6 tints and 6 shades for a total of 13 generated colors each. Some themes use preset hues for each color, and others are generated based on color-theory.

A dark mode with an invert option is provided.

Using 0 as CSS value breaks the calc function if the two values are not pixels.

The only difference between a , a , and a is in the units applied. A like 1 becomes a if you add length-units (1px, 1em, etc) and a if you add time-units (1s, 1ms, etc).

Actually

For zero and only zero, we can use a when CSS expects a .

0 is not allowed in some functions such as rgb or HSL, because these expects degree or percentages.

A color gamut is a dimension in which we define colors, and the color space defines how we define a color inside the gamut.

For example, sRGB is a color gamut that spans a range of colors, and Hex, RGB and HSL are the spaces available to explore the gamut.

and the sRGB gamut becomes inconvenient:

• The technology allows better colors (at least a wider gamut than allowed by sRGB)
• Dead grey zones between two points in space.
• inconsistent levels of lightness

So two units have landed. One is oklch:

• l controls the lightness, and measured in a range of 0% to 100%
• c is the chroma value, measured in decimals between 0 and 0.37
• h is the same old hue of HSL, in the same range of 0deg to 360deg
• / a is the alpha in the oklch.

The chroma limit value could be infinite, but P3 Iphone display and sRGB are limited to 0.37.

“Chroma refers to the purity of a color. A hue with high chroma has no black, white, or gray added to it. Conversely, adding white, black, or gray reduces its chroma. It’s similar to saturation but not quite the same. Chroma can be thought of as the brightness of a color in comparison to white.” — Cameron Chapman

How to make an accessible skeleton with ARIA ?

Note that the skeleton pattern hides a bad design where the UI is slower than expected. So avoid it as much as possible.

That would be awesome indeed: using @scope (.classname) to specify styles that only applies from this class.

In the meantime:

.visually-hidden:not(:focus):not(:active) {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

A company buy a concurrent. Then they do not put effort into creating new content or the one existing on it.

It is sad for the users, Digitalocean.

CSS tricks is indeed full of resources.

Basic validation can be done with HTML/CSS and the CSS selector :user-valid or :user-invalid pseudo-selectors