A collection of props describing the component

[airen]

Web components are common in web development. Some props can be used to describe the variable properties of a component. This is similar to using Design Token to define the variability of a component.

For example, for a Badge component, we can define the variable parameters needed to build the Badge component like the following figure and use props to describe these variable parameters:

To describe the Badge component, we may need these props:

:where(.badge) {
   --comp-badge-color-background: #6750A4;
  --comp-badge-color-text: #fff;
  --comp-badge-color-border: transparent;
  --comp-badge-size-font: 1rem;
  --comp-badge-size-border: 2px;
  --comp-badge-size-radius: .25rem;
}

.badge {
  color: var(--comp-badge-color-text);
  background-color: var(--comp-badge-color-background);
  border: var(--comp-badge-size-border) solid var(--comp-badge-color-border);
  font-size: var(--comp-badge-size-font);
  border-radius: var(--comp-badge-size-radius);
}

[argyleink]

yep, i think there's lots of clear reasons to do this, and open props can help out:

:where(.badge) {
   --comp-badge-color-background: var(--indigo-5, #6750A4);
  --comp-badge-color-text: var(--indigo-0, #fff);
  --comp-badge-color-border: transparent;
  --comp-badge-size-font: var(--size-3, 1rem);
  --comp-badge-size-border: var(--border-size-2, 2px);
  --comp-badge-size-radius: var(--size-1, .25rem);
}

.badge {
  color: var(--comp-badge-color-text);
  background-color: var(--comp-badge-color-background);
  border: var(--comp-badge-size-border) solid var(--comp-badge-color-border);
  font-size: var(--comp-badge-size-font);
  border-radius: var(--comp-badge-size-radius);
}

[argyleink]

i think it'll be very common for open-props to back component specific props. always a good idea to create component scoped props. i like how Lea Verou outlines much of it here https://lea.verou.me/2021/10/custom-properties-with-defaults/