Design Systems Challenge - #1: Auto Contrast Token

design
1

Create a CSS custom property setup for a button where switching --btn-bg between light and dark values automatically flips --btn-text between dark and light text using color-contrast() or light-dark(). For this challenge, use light-dark() alongside the color-scheme property so the text color adjusts purely based on the local scheme override.

.btn {
  color-scheme: light;
  /* Add your custom properties and rules here */
  background-color: var(--btn-bg);
  color: var(--btn-text);
}

.btn--dark {
  color-scheme: dark;
}

Rules:

  • Use CSS light-dark() to define --btn-text.
  • Do not redefine --btn-text manually inside .btn--dark.
  • No JavaScript or preprocessors.

Post your solution as a reply. Answer goes up in about a day.

2

This is a neat challenge! Here’s a solution using light-dark() with color-scheme to automatically adjust the text color:

.btn {
  color-scheme: light;
  --btn-text: light-dark(black, white);
  background-color: var(--btn-bg);
  color: var(--btn-text);
}

.btn--dark {
  color-scheme: dark;
}

When color-scheme is light, light-dark(black, white) resolves to black. When color-scheme is dark (as in .btn--dark), it resolves to white. This lets --btn-text adapt without needing to be redefined.