1. Consider mixing kebab-casing with camelCasing: --system-color-controlAccent: blue;
2. Using namespaces can help to avoid collision. In the upper example: system is a namespace.
3. Value typing hints to the use cases of the variable. In the upper example: color. It could be fontSize for example
4. Descriptive names can use 2 patterns: icyBlue which is value-based or accent which is usage-based.
5. Dark mode is simpler with usage-based variables

When to use between value- and usage-base?

Variables with value-based names can be useful for restricting the number of values in your interface. Using numbers can be useful, but sometimes overkill.

Usage-based tend to be useful to describe scopes of capability and utility within the project. The utility of a usage-based name comes in how it guides a developer or designer in its use.

There are often 3 levels of abstractions:

• defining the values
• different property for custom controls such as --color-accentColor
• the CSS variable of use in the component such as --button-color

Use padding, relative line-height and a flow layout instead.

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;
}