@oscarpalmer/oui 0.7.0 → 0.9.0

package/src/js/focus-trap.ts

@@ -0,0 +1,181 @@
+import {clamp} from '@oscarpalmer/atoms/number';
+import {on} from '@oscarpalmer/toretto/event';
+import {findAncestor} from '@oscarpalmer/toretto/find';
+import {getFocusable} from '@oscarpalmer/toretto/focusable';
+
+class FocusTrap {
+	active = true;
+
+	constructor(private element: HTMLElement) {
+		element.setAttribute('aria-modal', 'true');
+		element.setAttribute('tabindex', '-1');
+	}
+
+	activate() {
+		this.element.setAttribute('aria-modal', 'true');
+
+		this.active = true;
+	}
+
+	destroy() {
+		this.active = false;
+		this.element = undefined as never;
+	}
+
+	inactivate() {
+		this.element.setAttribute('aria-modal', 'false');
+
+		this.active = false;
+
+		inactive.add(this);
+	}
+}
+
+function addFocusTraps(nodes: Node[] | NodeList): void {
+	const elements = [...nodes].filter(
+		node => node instanceof HTMLElement,
+	) as HTMLElement[];
+
+	const {length} = elements;
+
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
+
+		if (element.hasAttribute(selector)) {
+			focusTraps.set(element, new FocusTrap(element));
+		}
+	}
+}
+
+function onEscape(event: KeyboardEvent): void {
+	if (event.key !== 'Escape') {
+		return;
+	}
+
+	const element = findAncestor(
+		document.activeElement as never,
+		`[${selector}]`,
+	) as HTMLElement;
+
+	focusTraps.get(element)?.inactivate();
+}
+
+function onFocusOut(): void {
+	if (inactive.size === 0) {
+		return;
+	}
+
+	setTimeout(() => {
+		const element = findAncestor(
+			document.activeElement as never,
+			`[${selector}]`,
+		) as HTMLElement;
+
+		if (!focusTraps.has(element)) {
+			for (const focusTrap of inactive) {
+				focusTrap.activate();
+			}
+		}
+	}, 0);
+}
+
+function onTab(event: KeyboardEvent): void {
+	if (event.key !== 'Tab') {
+		return;
+	}
+
+	const element = findAncestor(
+		event.target as never,
+		`[${selector}]`,
+	) as HTMLElement;
+
+	if (!(focusTraps.get(element)?.active ?? false)) {
+		return;
+	}
+
+	event.preventDefault();
+
+	const elements = getFocusable(element);
+	const {length} = elements;
+
+	const index = elements.indexOf(event.target as HTMLElement);
+
+	if (index === -1 || length === 0) {
+		if (length === 0) {
+			element.focus();
+		} else {
+			(elements[0] as HTMLElement).focus();
+		}
+
+		return;
+	}
+
+	const next = clamp(index + (event.shiftKey ? -1 : 1), 0, length - 1, true);
+
+	if (next !== index) {
+		(elements[next] as HTMLElement).focus();
+	}
+}
+
+function removeFocusTraps(nodes: Node[] | NodeList): void {
+	const elements = [...nodes].filter(
+		node => node instanceof HTMLElement,
+	) as HTMLElement[];
+
+	const {length} = elements;
+
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
+
+		focusTraps.get(element)?.destroy();
+		focusTraps.delete(element);
+	}
+}
+
+const focusTraps = new WeakMap<HTMLElement, FocusTrap>();
+const inactive = new Set<FocusTrap>();
+
+const observer = new MutationObserver(entries => {
+	const {length} = entries;
+
+	for (let index = 0; index < length; index += 1) {
+		const entry = entries[index];
+
+		if (entry.type === 'attributes' && entry.target instanceof HTMLElement) {
+			if (entry.target.hasAttribute(selector)) {
+				addFocusTraps([entry.target]);
+			} else {
+				removeFocusTraps([entry.target]);
+			}
+		} else if (entry.type === 'childList') {
+			addFocusTraps(entry.addedNodes);
+			removeFocusTraps(entry.removedNodes);
+		}
+	}
+});
+
+const selector = 'oui-focus-trap';
+
+observer.observe(document, {
+	attributeFilter: [selector],
+	attributes: true,
+	childList: true,
+	subtree: true,
+});
+
+setTimeout(() => {
+	addFocusTraps(document.querySelectorAll(`[${selector}]`));
+
+	on(document, 'focusout', onFocusOut, {
+		capture: true,
+	});
+
+	on(document, 'keydown', onTab, {
+		capture: true,
+		passive: false,
+	});
+
+	on(document, 'keydown', onEscape, {
+		passive: false,
+	});
+}, 0);

package/src/js/index.ts

@@ -0,0 +1 @@
+export * from './focus-trap';

package/types/focus-trap.d.cts

@@ -0,0 +1,3 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export {};

package/types/focus-trap.d.ts

@@ -0,0 +1 @@
+export {};

package/types/index.d.cts

@@ -0,0 +1,3 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export {};

package/types/index.d.ts

@@ -0,0 +1 @@
+export * from './focus-trap';

package/dist/css/colours.css

@@ -1,102 +0,0 @@
-:root {
-  --oui-absolute: light-dark(white, black);
-  --oui-blue-0: light-dark(oklch(0.97 0.01 260), oklch(0.18 0.1 250));
-  --oui-blue-1: light-dark(oklch(0.94 0.03 259), oklch(0.24 0.12 251));
-  --oui-blue-2: light-dark(oklch(0.88 0.05 258), oklch(0.36 0.14 252));
-  --oui-blue-3: light-dark(oklch(0.82 0.07 257), oklch(0.48 0.18 253));
-  --oui-blue-4: light-dark(oklch(0.75 0.09 256), oklch(0.58 0.18 254));
-  --oui-blue-5: light-dark(oklch(0.67 0.11 255), oklch(0.67 0.14 255));
-  --oui-blue-6: light-dark(oklch(0.58 0.14 254), oklch(0.75 0.11 256));
-  --oui-blue-7: light-dark(oklch(0.48 0.18 253), oklch(0.82 0.09 257));
-  --oui-blue-8: light-dark(oklch(0.36 0.14 252), oklch(0.88 0.07 258));
-  --oui-blue-9: light-dark(oklch(0.24 0.12 251), oklch(0.94 0.05 259));
-  --oui-blue-10: light-dark(oklch(0.18 0.1 250), oklch(0.97 0.03 260));
-  --oui-green-0: light-dark(oklch(0.97 0.01 150), oklch(0.18 0.1 140));
-  --oui-green-1: light-dark(oklch(0.94 0.03 149), oklch(0.24 0.12 141));
-  --oui-green-2: light-dark(oklch(0.88 0.05 148), oklch(0.36 0.14 142));
-  --oui-green-3: light-dark(oklch(0.82 0.07 147), oklch(0.48 0.16 143));
-  --oui-green-4: light-dark(oklch(0.75 0.09 146), oklch(0.58 0.14 144));
-  --oui-green-5: light-dark(oklch(0.67 0.11 145), oklch(0.67 0.13 145));
-  --oui-green-6: light-dark(oklch(0.58 0.14 144), oklch(0.75 0.11 146));
-  --oui-green-7: light-dark(oklch(0.48 0.16 143), oklch(0.82 0.07 147));
-  --oui-green-8: light-dark(oklch(0.36 0.14 142), oklch(0.88 0.05 148));
-  --oui-green-9: light-dark(oklch(0.24 0.12 141), oklch(0.94 0.03 149));
-  --oui-green-10: light-dark(oklch(0.18 0.1 140), oklch(0.97 0.01 150));
-  --oui-orange-0: light-dark(oklch(0.975 0.02 60), oklch(0.1875 0.1 50));
-  --oui-orange-1: light-dark(oklch(0.94 0.03 59), oklch(0.255 0.125 51));
-  --oui-orange-2: light-dark(oklch(0.88 0.05 58), oklch(0.385 0.15 52));
-  --oui-orange-3: light-dark(oklch(0.82 0.08 57), oklch(0.515 0.18 53));
-  --oui-orange-4: light-dark(oklch(0.75 0.11 56), oklch(0.635 0.2 54));
-  --oui-orange-5: light-dark(oklch(0.67 0.13 55), oklch(0.735 0.18 55));
-  --oui-orange-6: light-dark(oklch(0.57 0.16 54), oklch(0.795 0.14 56));
-  --oui-orange-7: light-dark(oklch(0.46 0.15 53), oklch(0.855 0.12 57));
-  --oui-orange-8: light-dark(oklch(0.34 0.12 53), oklch(0.905 0.08 58));
-  --oui-orange-9: light-dark(oklch(0.24 0.11 51), oklch(0.945 0.04 59));
-  --oui-orange-10: light-dark(oklch(0.18 0.1 50), oklch(0.975 0.02 60));
-  --oui-purple-0: light-dark(oklch(0.97 0.01 300), oklch(0.18 0.1 290));
-  --oui-purple-1: light-dark(oklch(0.94 0.03 299), oklch(0.24 0.12 291));
-  --oui-purple-2: light-dark(oklch(0.88 0.05 298), oklch(0.36 0.13 292));
-  --oui-purple-3: light-dark(oklch(0.82 0.07 297), oklch(0.48 0.15 293));
-  --oui-purple-4: light-dark(oklch(0.75 0.09 296), oklch(0.58 0.13 294));
-  --oui-purple-5: light-dark(oklch(0.67 0.11 295), oklch(0.67 0.11 295));
-  --oui-purple-6: light-dark(oklch(0.58 0.13 294), oklch(0.75 0.09 296));
-  --oui-purple-7: light-dark(oklch(0.48 0.15 293), oklch(0.82 0.07 297));
-  --oui-purple-8: light-dark(oklch(0.36 0.13 292), oklch(0.88 0.05 298));
-  --oui-purple-9: light-dark(oklch(0.24 0.12 291), oklch(0.94 0.03 299));
-  --oui-purple-10: light-dark(oklch(0.18 0.1 290), oklch(0.97 0.01 300));
-  --oui-red-0: light-dark(oklch(0.97 0.01 15), oklch(0.18 0.1 25));
-  --oui-red-1: light-dark(oklch(0.94 0.03 16), oklch(0.24 0.125 24));
-  --oui-red-2: light-dark(oklch(0.88 0.05 17), oklch(0.36 0.15 23));
-  --oui-red-3: light-dark(oklch(0.82 0.07 18), oklch(0.48 0.18 22));
-  --oui-red-4: light-dark(oklch(0.75 0.09 19), oklch(0.58 0.14 21));
-  --oui-red-5: light-dark(oklch(0.67 0.11 20), oklch(0.67 0.11 20));
-  --oui-red-6: light-dark(oklch(0.58 0.14 21), oklch(0.75 0.09 19));
-  --oui-red-7: light-dark(oklch(0.48 0.18 22), oklch(0.82 0.07 18));
-  --oui-red-8: light-dark(oklch(0.36 0.15 23), oklch(0.88 0.05 17));
-  --oui-red-9: light-dark(oklch(0.24 0.125 24), oklch(0.94 0.03 16));
-  --oui-red-10: light-dark(oklch(0.18 0.1 25), oklch(0.97 0.01 15));
-  --oui-yellow-0: light-dark(oklch(0.975 0.02 100), oklch(0.1875 0.1 90));
-  --oui-yellow-1: light-dark(oklch(0.945 0.04 99), oklch(0.255 0.125 91));
-  --oui-yellow-2: light-dark(oklch(0.905 0.08 98), oklch(0.385 0.15 92));
-  --oui-yellow-3: light-dark(oklch(0.855 0.12 97), oklch(0.515 0.18 93));
-  --oui-yellow-4: light-dark(oklch(0.795 0.14 96), oklch(0.635 0.2 94));
-  --oui-yellow-5: light-dark(oklch(0.735 0.18 95), oklch(0.735 0.18 95));
-  --oui-yellow-6: light-dark(oklch(0.635 0.2 94), oklch(0.795 0.14 96));
-  --oui-yellow-7: light-dark(oklch(0.515 0.18 93), oklch(0.855 0.12 97));
-  --oui-yellow-8: light-dark(oklch(0.385 0.15 92), oklch(0.905 0.08 98));
-  --oui-yellow-9: light-dark(oklch(0.255 0.125 91), oklch(0.945 0.04 99));
-  --oui-yellow-10: light-dark(oklch(0.1875 0.1 90), oklch(0.975 0.02 100));
-  --oui-grey-0: light-dark(oklch(0.97 0 0), oklch(0.18 0 0));
-  --oui-grey-1: light-dark(oklch(0.94 0 0), oklch(0.24 0 0));
-  --oui-grey-2: light-dark(oklch(0.88 0 0), oklch(0.36 0 0));
-  --oui-grey-3: light-dark(oklch(0.82 0 0), oklch(0.48 0 0));
-  --oui-grey-4: light-dark(oklch(0.75 0 0), oklch(0.58 0 0));
-  --oui-grey-5: light-dark(oklch(0.67 0 0), oklch(0.67 0 0));
-  --oui-grey-6: light-dark(oklch(0.58 0 0), oklch(0.75 0 0));
-  --oui-grey-7: light-dark(oklch(0.48 0 0), oklch(0.82 0 0));
-  --oui-grey-8: light-dark(oklch(0.36 0 0), oklch(0.88 0 0));
-  --oui-grey-9: light-dark(oklch(0.24 0 0), oklch(0.94 0 0));
-  --oui-grey-10: light-dark(oklch(0.18 0 0), oklch(0.97 0 0));
-  --oui-slate-0: light-dark(oklch(0.97 0.005 255), oklch(0.18 0.005 255));
-  --oui-slate-1: light-dark(oklch(0.94 0.005 255), oklch(0.24 0.005 255));
-  --oui-slate-2: light-dark(oklch(0.88 0.01 255), oklch(0.36 0.01 255));
-  --oui-slate-3: light-dark(oklch(0.82 0.01 255), oklch(0.48 0.01 255));
-  --oui-slate-4: light-dark(oklch(0.75 0.02 255), oklch(0.58 0.02 255));
-  --oui-slate-5: light-dark(oklch(0.67 0.02 255), oklch(0.67 0.02 255));
-  --oui-slate-6: light-dark(oklch(0.58 0.02 255), oklch(0.75 0.02 255));
-  --oui-slate-7: light-dark(oklch(0.48 0.01 255), oklch(0.82 0.01 255));
-  --oui-slate-8: light-dark(oklch(0.36 0.01 255), oklch(0.88 0.01 255));
-  --oui-slate-9: light-dark(oklch(0.24 0.005 255), oklch(0.94 0.005 255));
-  --oui-slate-10: light-dark(oklch(0.18 0.005 255), oklch(0.97 0.005 255));
-  --oui-stone-0: light-dark(oklch(0.97 0.005 95), oklch(0.18 0.005 95));
-  --oui-stone-1: light-dark(oklch(0.94 0.005 95), oklch(0.24 0.005 95));
-  --oui-stone-2: light-dark(oklch(0.9 0.01 95), oklch(0.36 0.01 95));
-  --oui-stone-3: light-dark(oklch(0.82 0.01 95), oklch(0.48 0.01 95));
-  --oui-stone-4: light-dark(oklch(0.75 0.02 95), oklch(0.58 0.02 95));
-  --oui-stone-5: light-dark(oklch(0.67 0.02 95), oklch(0.67 0.02 95));
-  --oui-stone-6: light-dark(oklch(0.58 0.02 95), oklch(0.75 0.02 95));
-  --oui-stone-7: light-dark(oklch(0.48 0.01 95), oklch(0.82 0.01 95));
-  --oui-stone-8: light-dark(oklch(0.36 0.01 95), oklch(0.9 0.01 95));
-  --oui-stone-9: light-dark(oklch(0.24 0.005 95), oklch(0.94 0.005 95));
-  --oui-stone-10: light-dark(oklch(0.18 0.005 95), oklch(0.97 0.005 95));
-}

package/src/css/colours.scss

@@ -1,113 +0,0 @@
-@use './mixins' as mixins;
-
-:root {
-	--oui-absolute: light-dark(white, black);
-
-	--oui-blue-0: light-dark(oklch(0.97 0.01 260), oklch(0.18 0.1 250));
-	--oui-blue-1: light-dark(oklch(0.94 0.03 259), oklch(0.24 0.12 251));
-	--oui-blue-2: light-dark(oklch(0.88 0.05 258), oklch(0.36 0.14 252));
-	--oui-blue-3: light-dark(oklch(0.82 0.07 257), oklch(0.48 0.18 253));
-	--oui-blue-4: light-dark(oklch(0.75 0.09 256), oklch(0.58 0.18 254));
-	--oui-blue-5: light-dark(oklch(0.67 0.11 255), oklch(0.67 0.14 255));
-	--oui-blue-6: light-dark(oklch(0.58 0.14 254), oklch(0.75 0.11 256));
-	--oui-blue-7: light-dark(oklch(0.48 0.18 253), oklch(0.82 0.09 257));
-	--oui-blue-8: light-dark(oklch(0.36 0.14 252), oklch(0.88 0.07 258));
-	--oui-blue-9: light-dark(oklch(0.24 0.12 251), oklch(0.94 0.05 259));
-	--oui-blue-10: light-dark(oklch(0.18 0.1 250), oklch(0.97 0.03 260));
-
-	--oui-green-0: light-dark(oklch(0.97 0.01 150), oklch(0.18 0.1 140));
-	--oui-green-1: light-dark(oklch(0.94 0.03 149), oklch(0.24 0.12 141));
-	--oui-green-2: light-dark(oklch(0.88 0.05 148), oklch(0.36 0.14 142));
-	--oui-green-3: light-dark(oklch(0.82 0.07 147), oklch(0.48 0.16 143));
-	--oui-green-4: light-dark(oklch(0.75 0.09 146), oklch(0.58 0.14 144));
-	--oui-green-5: light-dark(oklch(0.67 0.11 145), oklch(0.67 0.13 145));
-	--oui-green-6: light-dark(oklch(0.58 0.14 144), oklch(0.75 0.11 146));
-	--oui-green-7: light-dark(oklch(0.48 0.16 143), oklch(0.82 0.07 147));
-	--oui-green-8: light-dark(oklch(0.36 0.14 142), oklch(0.88 0.05 148));
-	--oui-green-9: light-dark(oklch(0.24 0.12 141), oklch(0.94 0.03 149));
-	--oui-green-10: light-dark(oklch(0.18 0.1 140), oklch(0.97 0.01 150));
-
-	--oui-orange-0: light-dark(oklch(0.975 0.02 60), oklch(0.1875 0.1 50));
-	--oui-orange-1: light-dark(oklch(0.94 0.03 59), oklch(0.255 0.125 51));
-	--oui-orange-2: light-dark(oklch(0.88 0.05 58), oklch(0.385 0.15 52));
-	--oui-orange-3: light-dark(oklch(0.82 0.08 57), oklch(0.515 0.18 53));
-	--oui-orange-4: light-dark(oklch(0.75 0.11 56), oklch(0.635 0.2 54));
-	--oui-orange-5: light-dark(oklch(0.67 0.13 55), oklch(0.735 0.18 55));
-	--oui-orange-6: light-dark(oklch(0.57 0.16 54), oklch(0.795 0.14 56));
-	--oui-orange-7: light-dark(oklch(0.46 0.15 53), oklch(0.855 0.12 57));
-	--oui-orange-8: light-dark(oklch(0.34 0.12 53), oklch(0.905 0.08 58));
-	--oui-orange-9: light-dark(oklch(0.24 0.11 51), oklch(0.945 0.04 59));
-	--oui-orange-10: light-dark(oklch(0.18 0.1 50), oklch(0.975 0.02 60));
-
-	--oui-purple-0: light-dark(oklch(0.97 0.01 300), oklch(0.18 0.1 290));
-	--oui-purple-1: light-dark(oklch(0.94 0.03 299), oklch(0.24 0.12 291));
-	--oui-purple-2: light-dark(oklch(0.88 0.05 298), oklch(0.36 0.13 292));
-	--oui-purple-3: light-dark(oklch(0.82 0.07 297), oklch(0.48 0.15 293));
-	--oui-purple-4: light-dark(oklch(0.75 0.09 296), oklch(0.58 0.13 294));
-	--oui-purple-5: light-dark(oklch(0.67 0.11 295), oklch(0.67 0.11 295));
-	--oui-purple-6: light-dark(oklch(0.58 0.13 294), oklch(0.75 0.09 296));
-	--oui-purple-7: light-dark(oklch(0.48 0.15 293), oklch(0.82 0.07 297));
-	--oui-purple-8: light-dark(oklch(0.36 0.13 292), oklch(0.88 0.05 298));
-	--oui-purple-9: light-dark(oklch(0.24 0.12 291), oklch(0.94 0.03 299));
-	--oui-purple-10: light-dark(oklch(0.18 0.1 290), oklch(0.97 0.01 300));
-
-	--oui-red-0: light-dark(oklch(0.97 0.01 15), oklch(0.18 0.1 25));
-	--oui-red-1: light-dark(oklch(0.94 0.03 16), oklch(0.24 0.125 24));
-	--oui-red-2: light-dark(oklch(0.88 0.05 17), oklch(0.36 0.15 23));
-	--oui-red-3: light-dark(oklch(0.82 0.07 18), oklch(0.48 0.18 22));
-	--oui-red-4: light-dark(oklch(0.75 0.09 19), oklch(0.58 0.14 21));
-	--oui-red-5: light-dark(oklch(0.67 0.11 20), oklch(0.67 0.11 20));
-	--oui-red-6: light-dark(oklch(0.58 0.14 21), oklch(0.75 0.09 19));
-	--oui-red-7: light-dark(oklch(0.48 0.18 22), oklch(0.82 0.07 18));
-	--oui-red-8: light-dark(oklch(0.36 0.15 23), oklch(0.88 0.05 17));
-	--oui-red-9: light-dark(oklch(0.24 0.125 24), oklch(0.94 0.03 16));
-	--oui-red-10: light-dark(oklch(0.18 0.1 25), oklch(0.97 0.01 15));
-
-	--oui-yellow-0: light-dark(oklch(0.975 0.02 100), oklch(0.1875 0.1 90));
-	--oui-yellow-1: light-dark(oklch(0.945 0.04 99), oklch(0.255 0.125 91));
-	--oui-yellow-2: light-dark(oklch(0.905 0.08 98), oklch(0.385 0.15 92));
-	--oui-yellow-3: light-dark(oklch(0.855 0.12 97), oklch(0.515 0.18 93));
-	--oui-yellow-4: light-dark(oklch(0.795 0.14 96), oklch(0.635 0.2 94));
-	--oui-yellow-5: light-dark(oklch(0.735 0.18 95), oklch(0.735 0.18 95));
-	--oui-yellow-6: light-dark(oklch(0.635 0.2 94), oklch(0.795 0.14 96));
-	--oui-yellow-7: light-dark(oklch(0.515 0.18 93), oklch(0.855 0.12 97));
-	--oui-yellow-8: light-dark(oklch(0.385 0.15 92), oklch(0.905 0.08 98));
-	--oui-yellow-9: light-dark(oklch(0.255 0.125 91), oklch(0.945 0.04 99));
-	--oui-yellow-10: light-dark(oklch(0.1875 0.1 90), oklch(0.975 0.02 100));
-
-	--oui-grey-0: light-dark(oklch(0.97 0 0), oklch(0.18 0 0));
-	--oui-grey-1: light-dark(oklch(0.94 0 0), oklch(0.24 0 0));
-	--oui-grey-2: light-dark(oklch(0.88 0 0), oklch(0.36 0 0));
-	--oui-grey-3: light-dark(oklch(0.82 0 0), oklch(0.48 0 0));
-	--oui-grey-4: light-dark(oklch(0.75 0 0), oklch(0.58 0 0));
-	--oui-grey-5: light-dark(oklch(0.67 0 0), oklch(0.67 0 0));
-	--oui-grey-6: light-dark(oklch(0.58 0 0), oklch(0.75 0 0));
-	--oui-grey-7: light-dark(oklch(0.48 0 0), oklch(0.82 0 0));
-	--oui-grey-8: light-dark(oklch(0.36 0 0), oklch(0.88 0 0));
-	--oui-grey-9: light-dark(oklch(0.24 0 0), oklch(0.94 0 0));
-	--oui-grey-10: light-dark(oklch(0.18 0 0), oklch(0.97 0 0));
-
-	--oui-slate-0: light-dark(oklch(0.97 0.005 255), oklch(0.18 0.005 255));
-	--oui-slate-1: light-dark(oklch(0.94 0.005 255), oklch(0.24 0.005 255));
-	--oui-slate-2: light-dark(oklch(0.88 0.01 255), oklch(0.36 0.01 255));
-	--oui-slate-3: light-dark(oklch(0.82 0.01 255), oklch(0.48 0.01 255));
-	--oui-slate-4: light-dark(oklch(0.75 0.02 255), oklch(0.58 0.02 255));
-	--oui-slate-5: light-dark(oklch(0.67 0.02 255), oklch(0.67 0.02 255));
-	--oui-slate-6: light-dark(oklch(0.58 0.02 255), oklch(0.75 0.02 255));
-	--oui-slate-7: light-dark(oklch(0.48 0.01 255), oklch(0.82 0.01 255));
-	--oui-slate-8: light-dark(oklch(0.36 0.01 255), oklch(0.88 0.01 255));
-	--oui-slate-9: light-dark(oklch(0.24 0.005 255), oklch(0.94 0.005 255));
-	--oui-slate-10: light-dark(oklch(0.18 0.005 255), oklch(0.97 0.005 255));
-
-	--oui-stone-0: light-dark(oklch(0.97 0.005 95), oklch(0.18 0.005 95));
-	--oui-stone-1: light-dark(oklch(0.94 0.005 95), oklch(0.24 0.005 95));
-	--oui-stone-2: light-dark(oklch(0.9 0.01 95), oklch(0.36 0.01 95));
-	--oui-stone-3: light-dark(oklch(0.82 0.01 95), oklch(0.48 0.01 95));
-	--oui-stone-4: light-dark(oklch(0.75 0.02 95), oklch(0.58 0.02 95));
-	--oui-stone-5: light-dark(oklch(0.67 0.02 95), oklch(0.67 0.02 95));
-	--oui-stone-6: light-dark(oklch(0.58 0.02 95), oklch(0.75 0.02 95));
-	--oui-stone-7: light-dark(oklch(0.48 0.01 95), oklch(0.82 0.01 95));
-	--oui-stone-8: light-dark(oklch(0.36 0.01 95), oklch(0.9 0.01 95));
-	--oui-stone-9: light-dark(oklch(0.24 0.005 95), oklch(0.94 0.005 95));
-	--oui-stone-10: light-dark(oklch(0.18 0.005 95), oklch(0.97 0.005 95));
-}