Generación de sombra de color con variables CSS: un método sistemático

pregunta

¿podemos imitar la funcionalidad de la función de sass oscura () usando las variables CSS a Genere tonos de un color definido?

usando sintaxis de color relativo

css introduce "sintaxis de color relativo", que habilita lo siguiente:

:root {
  --color-primary: #f00;
  --color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));
  --color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10));
}

aquí así es como funciona:

• -color-primario: define el color base.
• -color-primary-darker: oscurecer el color base por 5% usando hsl ().
• -color-primary-darkest: oscurece el color base por 10% usando hsl ().

use

Use estas variables para elementos de estilo:

.button {
  background: var(--color-primary);
}

.button:hover,
.button:focus {
  background: var(--color-primary-darker);
}

.button:active {
  background: var(--color-primary-darkest);
}

Este enfoque le permite definir tonos de color dinámicamente sin modificar la variable de color, logrando el efecto de gradiente deseado con tres tonos.