<main>
  <header>
    <label>Button color: 
      <input type="color" colorspace="display-p3"
             id="color-picker" 
             value="purple">        
    </label>
  </header>

  <button>This is a button</button>
<!--   <small>The button color is determined by the color picker, while the browser chooses either white or black for text color — whichever provides more contrast.</small> -->

  <dialog open class="support-warning">This browser does not support <code>contrast-color()</code>. Try this demo in a browser that does, like Safari Technology Preview.</dialog>
</main>

:root {
  --button-color: purple;
}
button {
  background-color: var(--button-color);
  color: contrast-color(var(--button-color));
  text-box: cap alphabetic;
}
button:hover {
  --hover-color: oklch(from var(--button-color) calc(l + .2) c h);
  background-color: var(--hover-color);
  color: contrast-color(var(--hover-color));
}


/* ----------------------------------------- */
:root {
  color-scheme: light dark;
  font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;  
}
main {
  height: 100vh;
  display: grid;
  place-items: center; 
}
header {
/*   place-self: center; */
}
button {
  font-family: inherit;
  border-radius: 2lh;
  padding: 0.5lh 1lh;
  border: none;
  box-shadow: 0 0 12px rgb(0, 0, 0, 0.3);
  font-size: 2rem;
  grid-area: 1 / 1;
  width: max-content;
}

header {
  grid-area: 1 / 1;
  place-self: start;
}
label {
  display: flex;
  align-items: center;
  font-weight: 500;
}
input {
  aspect-ratio: 1;
  height: auto;
  border: none;
  background-color: transparent;
  padding-inline-start: 5px;
}
figure {
  
}
figcaption {
 text-align: center;
  margin-block-start: 2lh;
}

dialog {
  background-color: rgb(180, 0, 0);
  box-shadow: 0 0 10px rgb(0, 0, 0, 0.6);
  color: white;
  border: 0;
  padding: 1lh;
}

dialog::backdrop {
  background-color: rgb(0 0 0 / 25%);
}
@supports (color: contrast-color(purple)) {
  dialog {
    display: none;
  }
}