<section id="content">
  <header>
    <h1>Color Palettes</h1>
    <h2>Created with <code>color-mix()</code></h2>
  </header>

  <p>Using colors from <a href="https://materialui.co/colors/">Material UI</a>.</p>

  <p>The <code>--oklab-base</code> variable will conver the case color to the OKLAB color space, regadless of what color space you use for the base. As long as it's supported in your target browsers, it will convert and the colors will display properly. If it doesn't work the boxes will be blank.</p>

  <p>In order to test other palettes change the value of the <code>--base-color</code> variable. This will propagate to everywhere that uses the color variable</p>

  <p>You can adjust individual values by modifying the corresponding <code>--color-x</code> variable or the associated class (<code>.color-x</code>). You can change the percetage of color you mix or change it to a static color that better matches your brand.</p>

  <p>I'm also exploring how to do this programmatically using JSON design tokens</p>
</section>

<main id="app">
  <div class="item color-50">
    <p>50</p>
  </div>

  <div class="item color-100">
    <p>100</p>
  </div>

  <div class="item color-200">
    <p>200</p>
  </div>

  <div class="item color-300">
    <p>300</p>
  </div>

  <div class="item color-400">
    <p>400</p>
  </div>

  <div class="item color-500">
    <p>500</p>
  </div>

  <div class="item color-600">
    <p>600</p>
  </div>

  <div class="item color-700">
    <p>700</p>
  </div>

  <div class="item color-800">
    <p>800</p>
  </div>

  <div class="item color-900">
    <p>900</p>
  </div>
</main>

@import "https://unpkg.com/open-props" layer(design.system);
@import "https://unpkg.com/open-props/normalize.min.css" layer(demo.support);

@layer demo {
  body {
    display: flex;
    place-content: center;
    padding-block: var(--size-8);
    gap: var(--size-10);
    justify-items: center;
  }

  main {
    display: flex;
    flex-flow: column;
  }

  #content p {
    margin-block: 2rem;
  }

  .item {
    inline-size: 25vw;
    block-size: 8vh;
    border: 1px solid black;
  }

  .item p {
    text-align: center;
  }
}

@layer colors {
  :root {
    /* Change base color to test other possible palettes */
    --base-color: #3949ab;
    /* --base-color: rebeccapurple; */
    /* --base-color: red; */

    /* convert to the target colorspace*/
    --oklab-base: color-mix(in oklab, var(--base-color) 100%, hotpink);

    --color-50: color-mix(in oklab, var(--oklab-base) 50%, white);
    --color-100: color-mix(in oklab, var(--oklab-base) 60%, white);
    --color-200: color-mix(in oklab, var(--oklab-base) 70%, white);
    --color-300: color-mix(in oklab, var(--oklab-base) 80%, white);
    --color-400: color-mix(in oklab, var(--oklab-base) 90%, white);
    /* Base color: equal to --base-color */
    --color-500: color-mix(in oklab, var(--oklab-base) 100%, black);
    --color-600: color-mix(in oklab, var(--oklab-base) 90%, black);
    --color-700: color-mix(in oklab, var(--oklab-base) 80%, black);
    --color-800: color-mix(in oklab, var(--oklab-base) 70%, black);
    --color-900: color-mix(in oklab, var(--oklab-base) 60%, black);
  }

  .color-50 {
    background: var(--color-50);
    color: color-contrast(var(--color-50) vs black, white);
  }

  .color-100 {
    background: var(--color-100);
    color: color-contrast(var(--color-100) vs black, white);
  }

  .color-200 {
    background: var(--color-200);
    color: color-contrast(var(--color-200) vs black, white);
  }

  .color-300 {
    background: var(--color-300);
    color: color-contrast(var(--color-300) vs black, white);
  }

  .color-400 {
    background: var(--color-400);
    color: color-contrast(var(--color-400) vs black, white);
  }

  .color-500 {
    background: var(--color-500);
    color: color-contrast(var(--color-500) vs black, white);
  }

  .color-600 {
    background: var(--color-600);
    color: color-contrast(var(--color-600) vs black, white);
  }

  .color-700 {
    background: var(--color-700);
    color: color-contrast(var(--color-800) vs black, white);
  }

  .color-800 {
    background: var(--color-800);
    color: color-contrast(var(--color-800) vs black, white);
  }

  .color-900 {
    background: var(--color-900);
    color: color-contrast(var(--color-900) vs black, white);
  }
}