<!-- https://codepen.io/kevinpowell/pen/wBMbozYhttps://codepen.io/kevinpowell/pen/wBMbozY -->

<!--
oklch maji lepsi vnimani barev a lepe pracuji s posunem barev ..
-->

<div class="toast-grid oklch">
  <h2>using oklch</h2>
  <div class="toast" data-toast="info">Some general info toast</div>
  <div class="toast" data-toast="warning">This might end badly</div>
  <div class="toast" data-toast="error">Oh no, something has gone wrong!</div>
</div>

<div class="toast-grid hsl">
  <h2>using hsl</h2>
  <div class="toast" data-toast="info">Some general info toast</div>
  <div class="toast" data-toast="warning">This might end badly</div>
  <div class="toast" data-toast="error">Oh no, something has gone wrong!</div>
</div>