1[data-type="success"] {
2  --color: oklch(47.06% 0.17 148.76);
3}
4@supports (color: color-mix(in oklch, red, white)) {
5  aside {
6    border-color: color-mix(in oklch, var(--color) 5%, oklch(100% 0 0 / 15%));
7    background: color-mix(in oklch, var(--color), oklch(0% 0 0 / 50%));
8    color: color-mix(in oklch, var(--color), oklch(100% 0 0));
9  }
10}
11@supports (color: rgb(from white r g b)) {
12  aside {
13    border-color: oklch(from var(--color) l c h / 0.25);
14    background: oklch(from var(--color) calc(l * 0.75) c h / 0.5);
15    color: oklch(from var(--color) calc(l * 1.5) c h);
16  }
17}