:where(html) { 
  /* Disabled */
  --disabled: var(--grey-5); /* base color */
  --disabled-contrast: var(--grey-contrast); /* Opposite of the base color; should be visible against the base color */
  --disabled-shade: var(--grey-shade); /* slightly darker version of the base color */
  --disabled-tint: var(--grey-tint);  /* slightly lighter version of the base color */
  --disabled-text-color: var(--disabled); /* text color */
  --disabled-border-color: var(--disabled); /* border color */
  --disabled-weak: var(--disabled-tint);
}

.disabled,
.disabled-color {
  color: var(--disabled);
}
.disabled-weak,
.disabled-weak-bg {
  background-color: var(--disabled-tint);
}
.disabled-bg {
  background-color: var(--disabled);
}
.disabled-fill {
  fill: var(--disabled);
}
.disabled-stroke {
  stroke: var(--disabled);
}.disabled-box {
  color: var(--disabled-contrast);
  background-color: var(--disabled);
  border: var(--border-width-base) var(--border-style-base) var(--disabled);
  border-radius: var(--border-radius-sharp);
}