Gets all the styling hooks in use on SLDS

Hooks.js

export default class Hooks {
	constructor() {
		console.log(this.styleHooks);
	}

	get stylesheets() {
		return [...document.styleSheets, ...document.adoptedStyleSheets];
	}

	get rules() {
		return this.stylesheets.map((s) => [...s.rules]).flat(1);
	}

	get styles() {
		return this.rules.map((r) => r.style).filter((s) => !!s);
	}

	get styleValues() {
		return this.styles
			.map((s) => {
				return Object.values(s);
			})
			.flat(1)
			.filter((x) => !!x);
	}

	get sldsValues() {
		return [...new Set(this.styleValues)].filter(
			(x) => 0 === x.indexOf('--') || x.includes('var(')
		);
	}

	get styleHooks() {
		return [
			...new Set(
				this.sldsValues
					.map((h) =>
						0 === h.indexOf('--') ? h : h.match(/--sl?ds-(.*?),/g)
					)
					.flat(1)
			),
		];
	}
}