@oscarpalmer/oui 0.18.0 → 0.20.0

package/dist/js/{tooltip.js → tooltip.mjs}

@@ -1,8 +1,9 @@
-import { attributable } from "./attributable.js";
-import { Floatable } from "./floatable.js";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { attributable } from "./attributable.mjs";
+import { Floatable } from "./floatable.mjs";
 import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+//#region src/js/tooltip.ts
 var Tooltip = class {
 	attributes;
 	floatable;
@@ -42,11 +43,11 @@ function closeTooltips(next) {
 	for (const active of tooltips) {
 		if (active === next) continue;
 		if (active.timer != null) clearTimeout(active.timer);
-		active.floatable.options.content.removeAttribute("oui-tooltip-content-active");
+		active.floatable?.options.content.removeAttribute("oui-tooltip-content-active");
 		requestAnimationFrame(() => {
 			active.timer = setTimeout(() => {
 				TOOLTIPS_ACTIVE.delete(active);
-				active.floatable.toggle(false);
+				active.floatable?.toggle(false);
 			}, delay);
 		});
 	}
@@ -114,7 +115,7 @@ function onActivate(event) {
 	onToggle(event, true);
 }
 function onClick(event) {
-	if (findAncestor(event.target, SELECTOR_CONTENT) != null) event.stopPropagation();
+	if (findAncestor(event, SELECTOR_CONTENT) != null) event.stopPropagation();
 }
 function onDeactivate(event) {
 	onToggle(event, false);
@@ -123,7 +124,7 @@ function onToggle(event, activate) {
 	if (toggle != null) cancelAnimationFrame(toggle);
 	toggle = requestAnimationFrame(() => {
 		toggle = void 0;
-		const element = findAncestor(event.target, SELECTOR_FULL);
+		const element = findAncestor(event, SELECTOR_FULL);
 		const tooltip = TOOLTIPS_ALL.get(element);
 		if (TOOLTIPS_ACTIVE.size > 0) closeTooltips(tooltip);
 		if (tooltip == null || tooltip.floatable.options.content.hasAttribute("oui-tooltip-content-active") === activate) return;
@@ -153,22 +154,23 @@ function reset(anchor, attributes) {
 function setDelay(value) {
 	delay = typeof value === "number" && value >= 0 ? value : delay;
 }
-var SELECTOR = "oui-tooltip";
-var ATTRIBUTE_CLASS = `${SELECTOR}-class`;
-var ATTRIBUTE_CONTENT = `${SELECTOR}-content`;
-var ATTRIBUTE_POSITION = `${SELECTOR}-position`;
-var SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
-var SELECTOR_FULL = `[${SELECTOR}], [${ATTRIBUTE_CONTENT}]`;
-var EXPRESSION_WHITESPACE = /\s+/;
-var TOOLTIPS_ACTIVE = /* @__PURE__ */ new Set();
-var TOOLTIPS_ALL = /* @__PURE__ */ new WeakMap();
-var delay = 250;
-var index = 0;
-var toggle;
+const SELECTOR = "oui-tooltip";
+const ATTRIBUTE_CLASS = `${SELECTOR}-class`;
+const ATTRIBUTE_CONTENT = `${SELECTOR}-content`;
+const ATTRIBUTE_POSITION = `${SELECTOR}-position`;
+const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+const SELECTOR_FULL = `[${SELECTOR}], [${ATTRIBUTE_CONTENT}]`;
+const EXPRESSION_WHITESPACE = /\s+/;
+const TOOLTIPS_ACTIVE = /* @__PURE__ */ new Set();
+const TOOLTIPS_ALL = /* @__PURE__ */ new WeakMap();
+let delay = 500;
+let index = 0;
+let toggle;
 attributable(SELECTOR, addTooltip, removeTooltip);
 on(document, "click", onClick, { capture: true });
 on(document, "focusin", onActivate);
 on(document, "focusout", onDeactivate);
 on(document, "mousemove", onActivate);
 on(document, "touchstart", onActivate);
+//#endregion
 export { setDelay };

package/package.json

@@ -1,90 +1,85 @@
 {
+	"name": "@oscarpalmer/oui",
+	"version": "0.20.0",
+	"description": "Styles, components, and utilities for building websites and applications.",
+	"keywords": [
+		"css",
+		"design",
+		"framework",
+		"library",
+		"scss",
+		"style",
+		"stylesheet",
+		"utility"
+	],
+	"license": "MIT",
 	"author": {
 		"name": "Oscar Palmér",
 		"url": "https://oscarpalmer.se"
 	},
-	"dependencies": {
-		"@oscarpalmer/atoms": "^0.112",
-		"@oscarpalmer/toretto": "^0.24"
-	},
-	"description": "Styles, components, and utilities for building websites and applications.",
-	"devDependencies": {
-		"@biomejs/biome": "^2.2",
-		"@rollup/plugin-node-resolve": "^16",
-		"@rollup/plugin-typescript": "^12.1",
-		"@types/node": "^24.7",
-		"@vitest/coverage-istanbul": "^3.2",
-		"autoprefixer": "^10.4",
-		"jsdom": "^27",
-		"postcss-cli": "^11",
-		"postcss-input-range": "^6",
-		"postcss-scss": "^4",
-		"rollup": "^4.52",
-		"sass": "^1.93",
-		"stylelint": "^16.25",
-		"tslib": "^2.8",
-		"typescript": "^5.9",
-		"vite": "npm:rolldown-vite@latest",
-		"vitest": "^3.2"
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/oscarpalmer/oui.git"
 	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"type": "module",
+	"module": "dist/js/index.mjs",
+	"types": "dist/js/index.d.mts",
 	"exports": {
 		".": {
-			"types": "./types/index.d.ts",
-			"default": "./dist/js/index.js"
+			"types": "./dist/js/index.d.mts",
+			"default": "./dist/js/index.mjs"
 		},
 		"./focus-trap": {
-			"types": "./types/focus-trap/standalone.d.ts",
-			"default": "./dist/js/focus-trap/standalone.js"
+			"types": "./dist/js/focus-trap/standalone.d.mts",
+			"default": "./dist/js/focus-trap/standalone.mjs"
 		},
 		"./popover": {
-			"types": "./types/popover.d.ts",
-			"default": "./dist/js/popover.js"
+			"types": "./dist/js/popover.d.mts",
+			"default": "./dist/js/popover.mjs"
 		},
 		"./splitter": {
-			"types": "./types/splitter.d.ts",
-			"default": "./dist/js/splitter.js"
+			"types": "./dist/js/splitter.d.mts",
+			"default": "./dist/js/splitter.mjs"
 		},
 		"./tooltip": {
-			"types": "./types/tooltip.d.ts",
-			"default": "./dist/js/tooltip.js"
+			"types": "./dist/js/tooltip.d.mts",
+			"default": "./dist/js/tooltip.mjs"
 		}
 	},
-	"files": [
-		"dist",
-		"src",
-		"types"
-	],
-	"keywords": [
-		"css",
-		"scss",
-		"design",
-		"framework",
-		"library",
-		"style",
-		"stylesheet",
-		"utility"
-	],
-	"license": "MIT",
-	"module": "dist/js/index.js",
-	"name": "@oscarpalmer/oui",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/oscarpalmer/oui.git"
-	},
 	"scripts": {
-		"build": "npm run clean && npm run build:css && npm run build:js",
-		"build:css": "npm run build:postcss && npx sass ./postcss:./dist/css --no-source-map",
-		"build:postcss": "npx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss",
-		"build:js": "npx vite build && npm run rollup:build && npx tsc",
-		"clean": "rm -rf ./dist && rm -rf ./types && rm -f ./tsconfig.tsbuildinfo",
-		"rollup:build": "npx rollup -c",
-		"rollup:watch": "npx rollup -c --watch",
-		"test": "npx vitest --coverage",
-		"watch:css": "npx sass ./postcss:./dist/css --no-source-map --watch",
-		"watch:postcss": "npx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss --watch",
-		"watch:js": "npx vite build --watch"
+		"build": "vp run build:js && vp run build:css",
+		"build:css": "vp run build:postcss && vpx sass ./postcss:./dist/css --no-source-map",
+		"build:postcss": "vpx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss",
+		"build:js": "vpx vp pack",
+		"test": "vpx vitest --coverage",
+		"tsdown:build": "vpx tsdown -c ./tsdown.config.ts",
+		"tsdown:watch": "vpx tsdown -c ./tsdown.config.ts --watch",
+		"watch:css": "vpx sass ./postcss:./dist/css --no-source-map --watch",
+		"watch:postcss": "vpx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss --watch",
+		"watch:js": "vpx vite build --watch"
 	},
-	"type": "module",
-	"types": "types/index.d.ts",
-	"version": "0.18.0"
-}
+	"dependencies": {
+		"@oscarpalmer/atoms": "^0.170",
+		"@oscarpalmer/toretto": "^0.41"
+	},
+	"devDependencies": {
+		"@vitest/coverage-istanbul": "^4.1",
+		"autoprefixer": "^10.4",
+		"jsdom": "^29",
+		"postcss-cli": "^11",
+		"postcss-input-range": "^6",
+		"postcss-scss": "^4",
+		"sass": "^1.98",
+		"stylelint": "^17.6",
+		"stylelint-config-standard-scss": "^17",
+		"typescript": "^5.9",
+		"vite": "npm:@voidzero-dev/vite-plus-core@latest",
+		"vite-plus": "latest",
+		"vitest": "npm:@voidzero-dev/vite-plus-test@latest"
+	},
+	"packageManager": "npm@11.12.1"
+}

package/src/css/a11y.scss

@@ -8,6 +8,6 @@
 	}
 
 	:where(&:not(:active, :focus, :focus-within)) {
-		@include mixins.visuallyHidden;
+		@include mixins.visually-hidden;
 	}
 }

package/src/css/badge.scss

@@ -14,72 +14,76 @@
 
 		display: inline-flex;
 		flex-flow: row nowrap;
-		gap: .5em;
-		background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%);
+		gap: 0.5em;
+		background-color: color-mix(
+			in oklab,
+			var(--oui-background, var(--oui-gray-0)),
+			transparent 25%
+		);
 		color: var(--oui-foreground, var(--oui-gray-8));
 		line-height: 1.25;
 	}
 
 	:where(&-pill) {
 		border-radius: 3em;
-		padding: .5em 1em;
+		padding: 0.5em 1em;
 	}
 
 	:where(&-tag) {
-		border-radius: .25em;
-		padding: .5em .75em;
+		border-radius: 0.25em;
+		padding: 0.5em 0.75em;
 	}
 
-	:where(&-pill-small, &-tag-small) {
-		font-size: .875em;
+	:where(&-pill--small, &-tag--small) {
+		font-size: 0.875em;
 	}
 
-	:where(&-pill-tiny, &-tag-tiny) {
+	:where(&-pill--tiny, &-tag--tiny) {
 		color: color-mix(in oklab, var(--oui-foreground, var(--oui-gray-8)), transparent 12.5%);
-		font-size: .75em;
+		font-size: 0.75em;
 	}
 
-	:where(&-pill-tiny) {
-		padding: .25em .75em;
+	:where(&-pill--tiny) {
+		padding: 0.25em 0.75em;
 	}
 
-	:where(&-tag-tiny) {
-		padding: .25em .5em;
+	:where(&-tag--tiny) {
+		padding: 0.25em 0.5em;
 	}
 
 	// Colors
 
-	:where(&-pill-blue, &-tag-blue) {
+	:where(&-pill--blue, &-tag--blue) {
 		--oui-background: var(--oui-blue-0);
 		--oui-foreground: var(--oui-blue-8);
 		--oui-shadow: var(--oui-blue-6);
 	}
 
-	:where(&-pill-green, &-tag-green) {
+	:where(&-pill--green, &-tag--green) {
 		--oui-background: var(--oui-green-0);
 		--oui-foreground: var(--oui-green-8);
 		--oui-shadow: var(--oui-green-6);
 	}
 
-	:where(&-pill-orange, &-tag-orange) {
+	:where(&-pill--orange, &-tag--orange) {
 		--oui-background: var(--oui-orange-0);
 		--oui-foreground: var(--oui-orange-8);
 		--oui-shadow: var(--oui-orange-6);
 	}
 
-	:where(&-pill-purple, &-tag-purple) {
+	:where(&-pill--purple, &-tag--purple) {
 		--oui-background: var(--oui-purple-0);
 		--oui-foreground: var(--oui-purple-8);
 		--oui-shadow: var(--oui-purple-6);
 	}
 
-	:where(&-pill-red, &-tag-red) {
+	:where(&-pill--red, &-tag--red) {
 		--oui-background: var(--oui-red-0);
 		--oui-foreground: var(--oui-red-8);
 		--oui-shadow: var(--oui-red-6);
 	}
 
-	:where(&-pill-yellow, &-tag-yellow) {
+	:where(&-pill--yellow, &-tag--yellow) {
 		--oui-background: var(--oui-yellow-0);
 		--oui-foreground: var(--oui-yellow-8);
 		--oui-shadow: var(--oui-yellow-6);

package/src/css/button.scss

@@ -7,54 +7,54 @@
 		@include mixins.button;
 	}
 
-	:where(&-blue) {
+	:where(&--blue) {
 		--oui-background-value: var(--oui-blue-2);
 		--oui-foreground-value: var(--oui-blue-8);
 		--oui-outline-value: var(--oui-blue-6);
 	}
 
-	:where(&-green) {
+	:where(&--green) {
 		--oui-background-value: var(--oui-green-2);
 		--oui-foreground-value: var(--oui-green-8);
 		--oui-outline-value: var(--oui-green-6);
 	}
 
-	:where(&-orange) {
+	:where(&--orange) {
 		--oui-background-value: var(--oui-orange-2);
 		--oui-foreground-value: var(--oui-orange-8);
 		--oui-outline-value: var(--oui-orange-6);
 	}
 
-	:where(&-purple) {
+	:where(&--purple) {
 		--oui-background-value: var(--oui-purple-2);
 		--oui-foreground-value: var(--oui-purple-8);
 		--oui-outline-value: var(--oui-purple-6);
 	}
 
-	:where(&-red) {
+	:where(&--red) {
 		--oui-background-value: var(--oui-red-2);
 		--oui-foreground-value: var(--oui-red-8);
 		--oui-outline-value: var(--oui-red-6);
 	}
 
-	:where(&-yellow) {
+	:where(&--yellow) {
 		--oui-background-value: var(--oui-yellow-2);
 		--oui-foreground-value: var(--oui-yellow-8);
 		--oui-outline-value: var(--oui-yellow-6);
 	}
 
-	:where(&-rounded) {
+	:where(&--rounded) {
 		padding: 0.5em 1em;
 		flex-wrap: nowrap;
 		border-radius: 5em;
 		white-space: nowrap;
 	}
 
-	:where(&-small) {
+	:where(&--small) {
 		font-size: 0.875em;
 	}
 
-	:where(&-tiny) {
+	:where(&--tiny) {
 		--oui-foreground-percentage: 12.5%;
 
 		font-size: 0.75em;

package/src/css/color.scss

@@ -5,111 +5,111 @@
 :root {
 	--oui-absolute: light-dark(white, black);
 
-	--oui-blue-0: light-dark(oklch(0.99 0.01 260), oklch(0.2 0.08 250));
-	--oui-blue-1: light-dark(oklch(0.98 0.02 259), oklch(0.25 0.09 251));
-	--oui-blue-2: light-dark(oklch(0.95 0.03 258), oklch(0.32 0.1 252));
-	--oui-blue-3: light-dark(oklch(0.90 0.04 257), oklch(0.40 0.09 253));
-	--oui-blue-4: light-dark(oklch(0.80 0.06 256), oklch(0.5 0.08 254));
-	--oui-blue-5: light-dark(oklch(0.70 0.08 255), oklch(0.6 0.07 255));
-	--oui-blue-6: light-dark(oklch(0.60 0.1 254), oklch(0.7 0.06 256));
-	--oui-blue-7: light-dark(oklch(0.50 0.12 253), oklch(0.8 0.05 257));
-	--oui-blue-8: light-dark(oklch(0.42 0.11 252), oklch(0.85 0.04 258));
-	--oui-blue-9: light-dark(oklch(0.35 0.1 251), oklch(0.9 0.03 259));
-	--oui-blue-10: light-dark(oklch(0.3 0.09 250), oklch(0.95 0.02 260));
+	--oui-blue-0: light-dark(oklch(99% 0.01 260deg), oklch(20% 0.08 250deg));
+	--oui-blue-1: light-dark(oklch(98% 0.02 259deg), oklch(25% 0.09 251deg));
+	--oui-blue-2: light-dark(oklch(95% 0.03 258deg), oklch(32% 0.1 252deg));
+	--oui-blue-3: light-dark(oklch(90% 0.04 257deg), oklch(40% 0.09 253deg));
+	--oui-blue-4: light-dark(oklch(80% 0.06 256deg), oklch(50% 0.08 254deg));
+	--oui-blue-5: light-dark(oklch(70% 0.08 255deg), oklch(60% 0.07 255deg));
+	--oui-blue-6: light-dark(oklch(60% 0.1 254deg), oklch(70% 0.06 256deg));
+	--oui-blue-7: light-dark(oklch(50% 0.12 253deg), oklch(80% 0.05 257deg));
+	--oui-blue-8: light-dark(oklch(42% 0.11 252deg), oklch(85% 0.04 258deg));
+	--oui-blue-9: light-dark(oklch(35% 0.1 251deg), oklch(90% 0.03 259deg));
+	--oui-blue-10: light-dark(oklch(30% 0.09 250deg), oklch(95% 0.02 260deg));
 
-	--oui-green-0: light-dark(oklch(0.99 0.01 150), oklch(0.2 0.08 140));
-	--oui-green-1: light-dark(oklch(0.98 0.02 149), oklch(0.25 0.09 141));
-	--oui-green-2: light-dark(oklch(0.95 0.03 148), oklch(0.32 0.1 142));
-	--oui-green-3: light-dark(oklch(0.90 0.04 147), oklch(0.4 0.09 143));
-	--oui-green-4: light-dark(oklch(0.80 0.06 146), oklch(0.5 0.08 144));
-	--oui-green-5: light-dark(oklch(0.70 0.08 145), oklch(0.6 0.07 145));
-	--oui-green-6: light-dark(oklch(0.60 0.1 144), oklch(0.7 0.06 146));
-	--oui-green-7: light-dark(oklch(0.50 0.12 143), oklch(0.8 0.05 147));
-	--oui-green-8: light-dark(oklch(0.42 0.11 142), oklch(0.85 0.04 148));
-	--oui-green-9: light-dark(oklch(0.35 0.1 141), oklch(0.9 0.03 149));
-	--oui-green-10: light-dark(oklch(0.3 0.09 140), oklch(0.95 0.02 150));
+	--oui-green-0: light-dark(oklch(99% 0.01 150deg), oklch(20% 0.08 140deg));
+	--oui-green-1: light-dark(oklch(98% 0.02 149deg), oklch(25% 0.09 141deg));
+	--oui-green-2: light-dark(oklch(95% 0.03 148deg), oklch(32% 0.1 142deg));
+	--oui-green-3: light-dark(oklch(90% 0.04 147deg), oklch(40% 0.09 143deg));
+	--oui-green-4: light-dark(oklch(80% 0.06 146deg), oklch(50% 0.08 144deg));
+	--oui-green-5: light-dark(oklch(70% 0.08 145deg), oklch(60% 0.07 145deg));
+	--oui-green-6: light-dark(oklch(60% 0.1 144deg), oklch(70% 0.06 146deg));
+	--oui-green-7: light-dark(oklch(50% 0.12 143deg), oklch(80% 0.05 147deg));
+	--oui-green-8: light-dark(oklch(42% 0.11 142deg), oklch(85% 0.04 148deg));
+	--oui-green-9: light-dark(oklch(35% 0.1 141deg), oklch(90% 0.03 149deg));
+	--oui-green-10: light-dark(oklch(30% 0.09 140deg), oklch(95% 0.02 150deg));
 
-	--oui-orange-0: light-dark(oklch(0.99 0.02 60), oklch(0.2 0.08 50));
-	--oui-orange-1: light-dark(oklch(0.985 0.035 59), oklch(0.25 0.09 51));
-	--oui-orange-2: light-dark(oklch(0.97 0.05 58), oklch(0.32 0.1 52));
-	--oui-orange-3: light-dark(oklch(0.93 0.07 57), oklch(0.4 0.09 53));
-	--oui-orange-4: light-dark(oklch(0.87 0.1 56), oklch(0.5 0.08 54));
-	--oui-orange-5: light-dark(oklch(0.76 0.11 55), oklch(0.6 0.07 55));
-	--oui-orange-6: light-dark(oklch(0.65 0.12 54), oklch(0.7 0.06 56));
-	--oui-orange-7: light-dark(oklch(0.55 0.14 53), oklch(0.8 0.05 57));
-	--oui-orange-8: light-dark(oklch(0.45 0.12 52), oklch(0.85 0.04 58));
-	--oui-orange-9: light-dark(oklch(0.375 0.11 51), oklch(0.9 0.03 59));
-	--oui-orange-10: light-dark(oklch(0.3 0.09 50), oklch(0.95 0.02 60));
+	--oui-orange-0: light-dark(oklch(99% 0.02 60deg), oklch(20% 0.08 50deg));
+	--oui-orange-1: light-dark(oklch(98.5% 0.035 59deg), oklch(25% 0.09 51deg));
+	--oui-orange-2: light-dark(oklch(97% 0.05 58deg), oklch(32% 0.1 52deg));
+	--oui-orange-3: light-dark(oklch(93% 0.07 57deg), oklch(40% 0.09 53deg));
+	--oui-orange-4: light-dark(oklch(87% 0.1 56deg), oklch(50% 0.08 54deg));
+	--oui-orange-5: light-dark(oklch(76% 0.11 55deg), oklch(60% 0.07 55deg));
+	--oui-orange-6: light-dark(oklch(65% 0.12 54deg), oklch(70% 0.06 56deg));
+	--oui-orange-7: light-dark(oklch(55% 0.14 53deg), oklch(80% 0.05 57deg));
+	--oui-orange-8: light-dark(oklch(45% 0.12 52deg), oklch(85% 0.04 58deg));
+	--oui-orange-9: light-dark(oklch(37.5% 0.11 51deg), oklch(90% 0.03 59deg));
+	--oui-orange-10: light-dark(oklch(30% 0.09 50deg), oklch(95% 0.02 60deg));
 
-	--oui-purple-0: light-dark(oklch(0.99 0.02 300), oklch(0.2 0.08 290));
-	--oui-purple-1: light-dark(oklch(0.98 0.035 299), oklch(0.25 0.09 291));
-	--oui-purple-2: light-dark(oklch(0.95 0.05 298), oklch(0.32 0.1 292));
-	--oui-purple-3: light-dark(oklch(0.90 0.07 297), oklch(0.4 0.09 293));
-	--oui-purple-4: light-dark(oklch(0.80 0.1 296), oklch(0.5 0.08 294));
-	--oui-purple-5: light-dark(oklch(0.70 0.11 295), oklch(0.6 0.07 295));
-	--oui-purple-6: light-dark(oklch(0.60 0.12 294), oklch(0.7 0.06 296));
-	--oui-purple-7: light-dark(oklch(0.50 0.14 293), oklch(0.8 0.05 297));
-	--oui-purple-8: light-dark(oklch(0.42 0.12 292), oklch(0.85 0.04 298));
-	--oui-purple-9: light-dark(oklch(0.35 0.11 291), oklch(0.9 0.03 299));
-	--oui-purple-10: light-dark(oklch(0.3 0.09 290), oklch(0.95 0.02 300));
+	--oui-purple-0: light-dark(oklch(99% 0.02 300deg), oklch(20% 0.08 290deg));
+	--oui-purple-1: light-dark(oklch(98% 0.035 299deg), oklch(25% 0.09 291deg));
+	--oui-purple-2: light-dark(oklch(95% 0.05 298deg), oklch(32% 0.1 292deg));
+	--oui-purple-3: light-dark(oklch(90% 0.07 297deg), oklch(40% 0.09 293deg));
+	--oui-purple-4: light-dark(oklch(80% 0.1 296deg), oklch(50% 0.08 294deg));
+	--oui-purple-5: light-dark(oklch(70% 0.11 295deg), oklch(60% 0.07 295deg));
+	--oui-purple-6: light-dark(oklch(60% 0.12 294deg), oklch(70% 0.06 296deg));
+	--oui-purple-7: light-dark(oklch(50% 0.14 293deg), oklch(80% 0.05 297deg));
+	--oui-purple-8: light-dark(oklch(42% 0.12 292deg), oklch(85% 0.04 298deg));
+	--oui-purple-9: light-dark(oklch(35% 0.11 291deg), oklch(90% 0.03 299deg));
+	--oui-purple-10: light-dark(oklch(30% 0.09 290deg), oklch(95% 0.02 300deg));
 
-	--oui-red-0: light-dark(oklch(0.99 0.024 25), oklch(0.2 0.08 25));
-	--oui-red-1: light-dark(oklch(0.985 0.032 24), oklch(0.25 0.09 24));
-	--oui-red-2: light-dark(oklch(0.97 0.05 23), oklch(0.32 0.1 23));
-	--oui-red-3: light-dark(oklch(0.93 0.07 22), oklch(0.4 0.09 22));
-	--oui-red-4: light-dark(oklch(0.87 0.1 21), oklch(0.5 0.08 21));
-	--oui-red-5: light-dark(oklch(0.76 0.11 20), oklch(0.6 0.07 20));
-	--oui-red-6: light-dark(oklch(0.65 0.12 19), oklch(0.7 0.06 19));
-	--oui-red-7: light-dark(oklch(0.55 0.14 18), oklch(0.8 0.05 18));
-	--oui-red-8: light-dark(oklch(0.45 0.12 17), oklch(0.85 0.04 17));
-	--oui-red-9: light-dark(oklch(0.375 0.11 16), oklch(0.9 0.03 16));
-	--oui-red-10: light-dark(oklch(0.3 0.09 15), oklch(0.95 0.02 15));
+	--oui-red-0: light-dark(oklch(99% 0.024 25deg), oklch(20% 0.08 25deg));
+	--oui-red-1: light-dark(oklch(98.5% 0.032 24deg), oklch(25% 0.09 24deg));
+	--oui-red-2: light-dark(oklch(97% 0.05 23deg), oklch(32% 0.1 23deg));
+	--oui-red-3: light-dark(oklch(93% 0.07 22deg), oklch(40% 0.09 22deg));
+	--oui-red-4: light-dark(oklch(87% 0.1 21deg), oklch(50% 0.08 21deg));
+	--oui-red-5: light-dark(oklch(76% 0.11 20deg), oklch(60% 0.07 20deg));
+	--oui-red-6: light-dark(oklch(65% 0.12 19deg), oklch(70% 0.06 19deg));
+	--oui-red-7: light-dark(oklch(55% 0.14 18deg), oklch(80% 0.05 18deg));
+	--oui-red-8: light-dark(oklch(45% 0.12 17deg), oklch(85% 0.04 17deg));
+	--oui-red-9: light-dark(oklch(37.5% 0.11 16deg), oklch(90% 0.03 16deg));
+	--oui-red-10: light-dark(oklch(30% 0.09 15deg), oklch(95% 0.02 15deg));
 
-	--oui-yellow-0: light-dark(oklch(0.99 0.02 100), oklch(0.2 0.08 90));
-	--oui-yellow-1: light-dark(oklch(0.985 0.035 99), oklch(0.25 0.09 91));
-	--oui-yellow-2: light-dark(oklch(0.97 0.05 98), oklch(0.33 0.1 92));
-	--oui-yellow-3: light-dark(oklch(0.93 0.07 97), oklch(0.4 0.09 93));
-	--oui-yellow-4: light-dark(oklch(0.87 0.1 96), oklch(0.5 0.08 94));
-	--oui-yellow-5: light-dark(oklch(.78 0.11 95), oklch(0.6 0.07 95));
-	--oui-yellow-6: light-dark(oklch(0.65 0.12 94), oklch(0.7 0.06 96));
-	--oui-yellow-7: light-dark(oklch(0.55 0.14 93), oklch(0.8 0.05 97));
-	--oui-yellow-8: light-dark(oklch(0.45 0.12 92), oklch(0.85 0.04 98));
-	--oui-yellow-9: light-dark(oklch(0.375 0.11 91), oklch(0.9 0.03 99));
-	--oui-yellow-10: light-dark(oklch(0.3 0.09 90), oklch(0.95 0.02 100));
+	--oui-yellow-0: light-dark(oklch(99% 0.02 100deg), oklch(20% 0.08 90deg));
+	--oui-yellow-1: light-dark(oklch(98.5% 0.035 99deg), oklch(25% 0.09 91deg));
+	--oui-yellow-2: light-dark(oklch(97% 0.05 98deg), oklch(32% 0.1 92deg));
+	--oui-yellow-3: light-dark(oklch(93% 0.07 97deg), oklch(40% 0.09 93deg));
+	--oui-yellow-4: light-dark(oklch(87% 0.1 96deg), oklch(50% 0.08 94deg));
+	--oui-yellow-5: light-dark(oklch(78% 0.11 95deg), oklch(60% 0.07 95deg));
+	--oui-yellow-6: light-dark(oklch(65% 0.12 94deg), oklch(70% 0.06 96deg));
+	--oui-yellow-7: light-dark(oklch(55% 0.14 93deg), oklch(80% 0.05 97deg));
+	--oui-yellow-8: light-dark(oklch(45% 0.12 92deg), oklch(85% 0.04 98deg));
+	--oui-yellow-9: light-dark(oklch(37.5% 0.11 91deg), oklch(90% 0.03 99deg));
+	--oui-yellow-10: light-dark(oklch(30% 0.09 90deg), oklch(95% 0.02 100deg));
 
-	--oui-gray-0: light-dark(oklch(0.98 0 0), oklch(0.22 0 0));
-	--oui-gray-1: light-dark(oklch(0.98 0 0), oklch(0.26 0 0));
-	--oui-gray-2: light-dark(oklch(0.95 0 0), oklch(0.32 0 0));
-	--oui-gray-3: light-dark(oklch(0.90 0 0), oklch(0.4 0 0));
-	--oui-gray-4: light-dark(oklch(0.80 0 0), oklch(0.5 0 0));
-	--oui-gray-5: light-dark(oklch(0.70 0 0), oklch(0.6 0 0));
-	--oui-gray-6: light-dark(oklch(0.60 0 0), oklch(0.7 0 0));
-	--oui-gray-7: light-dark(oklch(0.50 0 0), oklch(0.8 0 0));
-	--oui-gray-8: light-dark(oklch(0.42 0 0), oklch(0.85 0 0));
-	--oui-gray-9: light-dark(oklch(0.35 0 0), oklch(0.9 0 0));
-	--oui-gray-10: light-dark(oklch(0.3 0 0), oklch(0.95 0 0));
+	--oui-gray-0: light-dark(oklch(98% 0 0deg), oklch(22% 0 0deg));
+	--oui-gray-1: light-dark(oklch(98% 0 0deg), oklch(26% 0 0deg));
+	--oui-gray-2: light-dark(oklch(95% 0 0deg), oklch(32% 0 0deg));
+	--oui-gray-3: light-dark(oklch(90% 0 0deg), oklch(40% 0 0deg));
+	--oui-gray-4: light-dark(oklch(80% 0 0deg), oklch(50% 0 0deg));
+	--oui-gray-5: light-dark(oklch(70% 0 0deg), oklch(60% 0 0deg));
+	--oui-gray-6: light-dark(oklch(60% 0 0deg), oklch(70% 0 0deg));
+	--oui-gray-7: light-dark(oklch(50% 0 0deg), oklch(80% 0 0deg));
+	--oui-gray-8: light-dark(oklch(42% 0 0deg), oklch(85% 0 0deg));
+	--oui-gray-9: light-dark(oklch(35% 0 0deg), oklch(90% 0 0deg));
+	--oui-gray-10: light-dark(oklch(30% 0 0deg), oklch(95% 0 0deg));
 
-	--oui-slate-0: light-dark(oklch(0.99 0.0025 255), oklch(0.22 0.005 255));
-	--oui-slate-1: light-dark(oklch(0.98 0.005 255), oklch(0.26 0.0075 255));
-	--oui-slate-2: light-dark(oklch(0.95 0.0075 255), oklch(0.32 0.01 255));
-	--oui-slate-3: light-dark(oklch(0.90 0.01 255), oklch(0.4 0.0125 255));
-	--oui-slate-4: light-dark(oklch(0.80 0.015 255), oklch(0.5 0.015 255));
-	--oui-slate-5: light-dark(oklch(0.70 0.02 255), oklch(0.6 0.02 255));
-	--oui-slate-6: light-dark(oklch(0.60 0.015 255), oklch(0.7 0.015 255));
-	--oui-slate-7: light-dark(oklch(0.50 0.0125 255), oklch(0.8 0.0125 255));
-	--oui-slate-8: light-dark(oklch(0.42 0.01 255), oklch(0.85 0.01 255));
-	--oui-slate-9: light-dark(oklch(0.35 0.0075 255), oklch(0.9 0.0075 255));
-	--oui-slate-10: light-dark(oklch(0.3 0.005 255), oklch(0.95 0.005 255));
+	--oui-slate-0: light-dark(oklch(99% 0.0025 255deg), oklch(22% 0.005 255deg));
+	--oui-slate-1: light-dark(oklch(98% 0.005 255deg), oklch(26% 0.0075 255deg));
+	--oui-slate-2: light-dark(oklch(95% 0.0075 255deg), oklch(32% 0.01 255deg));
+	--oui-slate-3: light-dark(oklch(90% 0.01 255deg), oklch(40% 0.0125 255deg));
+	--oui-slate-4: light-dark(oklch(80% 0.015 255deg), oklch(50% 0.015 255deg));
+	--oui-slate-5: light-dark(oklch(70% 0.02 255deg), oklch(60% 0.02 255deg));
+	--oui-slate-6: light-dark(oklch(60% 0.015 255deg), oklch(70% 0.015 255deg));
+	--oui-slate-7: light-dark(oklch(50% 0.0125 255deg), oklch(80% 0.0125 255deg));
+	--oui-slate-8: light-dark(oklch(42% 0.01 255deg), oklch(85% 0.01 255deg));
+	--oui-slate-9: light-dark(oklch(35% 0.0075 255deg), oklch(90% 0.0075 255deg));
+	--oui-slate-10: light-dark(oklch(30% 0.005 255deg), oklch(95% 0.005 255deg));
 
-	--oui-stone-0: light-dark(oklch(0.99 0.0033 95), oklch(0.22 0.005 95));
-	--oui-stone-1: light-dark(oklch(0.98 0.0067 95), oklch(0.26 0.0075 95));
-	--oui-stone-2: light-dark(oklch(0.95 0.01 95), oklch(0.32 0.01 95));
-	--oui-stone-3: light-dark(oklch(0.90 0.0125 95), oklch(0.4 0.0125 95));
-	--oui-stone-4: light-dark(oklch(0.80 0.015 95), oklch(0.5 0.015 95));
-	--oui-stone-5: light-dark(oklch(0.70 0.02 95), oklch(0.6 0.02 95));
-	--oui-stone-6: light-dark(oklch(0.60 0.015 95), oklch(0.7 0.015 95));
-	--oui-stone-7: light-dark(oklch(0.50 0.0125 95), oklch(0.8 0.0125 95));
-	--oui-stone-8: light-dark(oklch(0.42 0.01 95), oklch(0.85 0.01 95));
-	--oui-stone-9: light-dark(oklch(0.35 0.0075 95), oklch(0.9 0.0075 95));
-	--oui-stone-10: light-dark(oklch(0.3 0.005 95), oklch(0.95 0.005 95));
+	--oui-stone-0: light-dark(oklch(99% 0.0033 95deg), oklch(22% 0.005 95deg));
+	--oui-stone-1: light-dark(oklch(98% 0.0067 95deg), oklch(26% 0.0075 95deg));
+	--oui-stone-2: light-dark(oklch(95% 0.01 95deg), oklch(32% 0.01 95deg));
+	--oui-stone-3: light-dark(oklch(90% 0.0125 95deg), oklch(40% 0.0125 95deg));
+	--oui-stone-4: light-dark(oklch(80% 0.015 95deg), oklch(50% 0.015 95deg));
+	--oui-stone-5: light-dark(oklch(70% 0.02 95deg), oklch(60% 0.02 95deg));
+	--oui-stone-6: light-dark(oklch(60% 0.015 95deg), oklch(70% 0.015 95deg));
+	--oui-stone-7: light-dark(oklch(50% 0.0125 95deg), oklch(80% 0.0125 95deg));
+	--oui-stone-8: light-dark(oklch(42% 0.01 95deg), oklch(85% 0.01 95deg));
+	--oui-stone-9: light-dark(oklch(35% 0.0075 95deg), oklch(90% 0.0075 95deg));
+	--oui-stone-10: light-dark(oklch(30% 0.005 95deg), oklch(95% 0.005 95deg));
 }