Something went wrong. Try again.
https://clembs.com
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859@mixin focus-hover { &:focus-visible { @content; }
@media (hover: hover) { &:hover { @content; } }}
@mixin generate-colors($baseHue) { --base-hue: #{$baseHue};
--color-900: light-dark(oklch(0 0 0), oklch(1 0 0)); --color-850: light-dark( oklch(0.15 var(--chroma, 0.07) calc(var(--base-hue) + 12)), oklch(0.97 var(--chroma, 0.04) calc(var(--base-hue) + 10)) ); --color-800: light-dark( oklch(0.2 var(--chroma, 0.1) calc(var(--base-hue) + 9)), oklch(0.9 var(--chroma, 0.07) calc(var(--base-hue) + 8)) ); --color-700: light-dark( oklch(0.3 var(--chroma, 0.14) calc(var(--base-hue) + 6)), oklch(0.8 var(--chroma, 0.1) calc(var(--base-hue) + 6)) ); --color-600: light-dark( oklch(0.4 var(--chroma, 0.18) calc(var(--base-hue) + 3)), oklch(0.7 var(--chroma, 0.14) calc(var(--base-hue) + 4)) ); --color-500: light-dark( oklch(0.5 var(--chroma, 0.22) var(--base-hue)), oklch(0.6 var(--chroma, 0.18) calc(var(--base-hue) + 2)) ); --color-400: light-dark( oklch(0.6 var(--chroma, 0.18) calc(var(--base-hue) + 2)), oklch(0.5 var(--chroma, 0.22) var(--base-hue)) ); --color-300: light-dark( oklch(0.7 var(--chroma, 0.14) calc(var(--base-hue) + 4)), oklch(0.4 var(--chroma, 0.18) calc(var(--base-hue) + 3)) ); --color-200: light-dark( oklch(0.8 var(--chroma, 0.1) calc(var(--base-hue) + 6)), oklch(0.3 var(--chroma, 0.14) calc(var(--base-hue) + 6)) ); --color-100: light-dark( oklch(0.9 var(--chroma, 0.07) calc(var(--base-hue) + 8)), oklch(0.25 var(--chroma, 0.1) calc(var(--base-hue) + 9)) ); --color-40: light-dark( oklch(0.96 var(--chroma, 0.04) calc(var(--base-hue) + 10)), oklch(0.15 var(--chroma, 0.07) calc(var(--base-hue) + 12)) ); --color-0: light-dark(oklch(1 0 0), oklch(0 0 0));}