tomas-wrobel

* {
	box-sizing: border-box;
}

html {
	font-family: sans-serif;
}

tomas-wrobel

* {
	box-sizing: border-box;
}

html {
	font-family: sans-serif;
}

tomas-wrobel

* {
	box-sizing: border-box;
}

html {
	font-family: sans-serif;
}

tomas-wrobel

class Emitter<E extends Record<string, new (...args: any[]) => Event>> extends EventTarget {
    constructor(public events: E) {
        super();
    }

    on<T extends keyof E>(event: T, listener: (e: InstanceType<E[T]>) => void) {
        this.addEventListener(event as string, listener as (e: Event) => void);
        return this;
    }

tomas-wrobel

@function svg-gradient($type, $transform, $colors...) {
	$stops: "";
	@each $color, $offset in $colors {
		$stops: $stops + "<stop offset='#{$offset}' stop-color='#{$color}' />";
	}
	@return url(
		"data:image/svg+xml;utf8,\
		<svg xmlns='http://www.w3.org/2000/svg'> \
			<#{$type}Gradient id='grad' style='gradient-transform: #{$transform};'> \
				#{$stops} \

tomas-wrobel

import {useState, useEffect, useRef} from "react"

export default function () {
    const {current} = useRef(matchMedia("(prefers-color-scheme: dark)"));
    const [match, setMatches] = useState(current.matches);

    useEffect(() => {
        const updateMatch = () => {
             setMatch(current.matches);
        };