@oscarpalmer/oui 0.7.0 → 0.9.0

package/package.json

@@ -6,15 +6,45 @@
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"devDependencies": {
 		"@biomejs/biome": "^1.9",
-		"sass": "^1.83",
-		"stylelint": "^16.14"
+		"@oscarpalmer/atoms": "^0.89.1",
+		"@oscarpalmer/toretto": "^0.18",
+		"@rollup/plugin-node-resolve": "^16",
+		"@rollup/plugin-typescript": "^12.1",
+		"@types/node": "^22.13",
+		"@vitest/coverage-istanbul": "^3",
+		"dts-bundle-generator": "^9.5",
+		"glob": "^11",
+		"happy-dom": "^17.4",
+		"sass": "^1.86",
+		"stylelint": "^16.17",
+		"tslib": "^2.8",
+		"typescript": "^5.8",
+		"vite": "^6.2",
+		"vitest": "^3"
 	},
 	"exports": {
-		"./css/a11y": "./dist/css/a11y.css",
-		"./css/flex": "./dist/css/flex.css",
-		"./css/reset": "./dist/css/reset.css"
+		".": {
+			"import": {
+				"types": "./types/index.d.ts",
+				"default": "./dist/js/index.js"
+			},
+			"require": {
+				"types": "./types/index.d.cts",
+				"default": "./dist/js/index.cjs"
+			}
+		},
+		"./focus-trap": {
+			"import": {
+				"types": "./types/focus-trap.d.ts",
+				"default": "./dist/js/focus-trap.js"
+			},
+			"require": {
+				"types": "./types/focus-trap.d.cts",
+				"default": "./dist/js/focus-trap.cjs"
+			}
+		}
 	},
-	"files": ["dist", "src"],
+	"files": ["dist", "src", "types"],
 	"keywords": [
 		"css",
 		"scss",
@@ -26,15 +56,25 @@
 		"utility"
 	],
 	"license": "MIT",
+	"main": "dist/js/index.cjs",
+	"module": "dist/js/index.js",
 	"name": "@oscarpalmer/oui",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/oscarpalmer/oui.git"
 	},
 	"scripts": {
-		"build": "npx sass ./src/css:./dist/css --no-source-map",
-		"watch": "npx sass ./src/css:./dist/css --no-source-map --watch"
+		"build": "npm run clean && npm run build:css && npm run build:js",
+		"build:css": "npx sass ./src/css:./dist/css --no-source-map",
+		"build:js": "npx vite build && npm run types",
+		"clean": "rm -rf ./dist && rm -rf ./types && rm -f ./tsconfig.tsbuildinfo",
+		"rollup": "npx rollup -c --watch",
+		"test": "npx vitest --coverage",
+		"types": "npx tsc && npx dts-bundle-generator --config ./dts.config.cts --silent",
+		"watch:css": "npx sass ./src/css:./dist/css --no-source-map --watch",
+		"watch:js": "npx vite build --watch"
 	},
 	"type": "module",
-	"version": "0.7.0"
+	"types": "types/index.d.cts",
+	"version": "0.9.0"
 }

package/src/css/{badges.scss → badge.scss}

@@ -3,9 +3,9 @@
 		display: inline-flex;
 		flex-flow: row nowrap;
 		gap: .5em;
-		background-color: var(--background, var(--oui-grey-1, #eee));
-		border: 1px solid var(--border, var(--oui-grey-3, #ccc));
-		color: var(--foreground, var(--oui-grey-8, #333));
+		background-color: var(--background, var(--oui-gray-1));
+		border: 1px solid var(--border, var(--oui-gray-3));
+		color: var(--foreground, var(--oui-gray-8));
 		line-height: 1.125;
 	}
 
@@ -33,36 +33,36 @@
 	:where(&-pill-blue, &-tag-blue) {
 		--background: var(--oui-blue-1);
 		--border: var(--oui-blue-3);
-		--foreground: var(--oui-blue-9);
+		--foreground: var(--oui-blue-8);
 	}
 
 	:where(&-pill-green, &-tag-green) {
 		--background: var(--oui-green-1);
 		--border: var(--oui-green-3);
-		--foreground: var(--oui-green-9);
+		--foreground: var(--oui-green-8);
 	}
 
 	:where(&-pill-orange, &-tag-orange) {
 		--background: var(--oui-orange-1);
 		--border: var(--oui-orange-3);
-		--foreground: var(--oui-orange-9);
+		--foreground: var(--oui-orange-8);
 	}
 
 	:where(&-pill-purple, &-tag-purple) {
 		--background: var(--oui-purple-1);
 		--border: var(--oui-purple-3);
-		--foreground: var(--oui-purple-9);
+		--foreground: var(--oui-purple-8);
 	}
 
 	:where(&-pill-red, &-tag-red) {
 		--background: var(--oui-red-1);
 		--border: var(--oui-red-3);
-		--foreground: var(--oui-red-9);
+		--foreground: var(--oui-red-8);
 	}
 
 	:where(&-pill-yellow, &-tag-yellow) {
 		--background: var(--oui-yellow-1);
 		--border: var(--oui-yellow-3);
-		--foreground: var(--oui-yellow-9);
+		--foreground: var(--oui-yellow-8);
 	}
 }

package/src/css/color.scss

@@ -0,0 +1,113 @@
+@use './mixins' as mixins;
+
+:root {
+	--oui-absolute: light-dark(white, black);
+
+	--oui-blue-0: light-dark(oklch(0.98 0.015 260), oklch(0.18 0.1 250));
+	--oui-blue-1: light-dark(oklch(0.95 0.03 259), oklch(0.24 0.12 251));
+	--oui-blue-2: light-dark(oklch(0.9 0.05 258), oklch(0.32 0.14 252));
+	--oui-blue-3: light-dark(oklch(0.83 0.07 257), oklch(0.4 0.16 253));
+	--oui-blue-4: light-dark(oklch(0.75 0.09 256), oklch(0.5 0.14 254));
+	--oui-blue-5: light-dark(oklch(0.67 0.11 255), oklch(0.6 0.11 255));
+	--oui-blue-6: light-dark(oklch(0.58 0.14 254), oklch(0.7 0.09 256));
+	--oui-blue-7: light-dark(oklch(0.48 0.16 253), oklch(0.78 0.07 257));
+	--oui-blue-8: light-dark(oklch(0.34 0.14 252), oklch(0.85 0.05 258));
+	--oui-blue-9: light-dark(oklch(0.22 0.12 251), oklch(0.91 0.03 259));
+	--oui-blue-10: light-dark(oklch(0.18 0.1 250), oklch(0.97 0.01 260));
+
+	--oui-green-0: light-dark(oklch(0.98 0.015 150), oklch(0.18 0.1 140));
+	--oui-green-1: light-dark(oklch(0.95 0.03 149), oklch(0.24 0.12 141));
+	--oui-green-2: light-dark(oklch(0.9 0.05 148), oklch(0.32 0.14 142));
+	--oui-green-3: light-dark(oklch(0.83 0.07 147), oklch(0.4 0.15 143));
+	--oui-green-4: light-dark(oklch(0.75 0.09 146), oklch(0.5 0.14 144));
+	--oui-green-5: light-dark(oklch(0.67 0.11 145), oklch(0.6 0.12 145));
+	--oui-green-6: light-dark(oklch(0.58 0.14 144), oklch(0.7 0.09 146));
+	--oui-green-7: light-dark(oklch(0.48 0.15 143), oklch(0.78 0.07 147));
+	--oui-green-8: light-dark(oklch(0.34 0.14 142), oklch(0.85 0.05 148));
+	--oui-green-9: light-dark(oklch(0.22 0.12 141), oklch(0.91 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.985 0.02 60), oklch(0.18 0.1 50));
+	--oui-orange-1: light-dark(oklch(0.95 0.03 59), oklch(0.24 0.11 51));
+	--oui-orange-2: light-dark(oklch(0.9 0.05 58), oklch(0.32 0.12 52));
+	--oui-orange-3: light-dark(oklch(0.83 0.08 57), oklch(0.4 0.13 53));
+	--oui-orange-4: light-dark(oklch(0.75 0.11 56), oklch(0.5 0.14 54));
+	--oui-orange-5: light-dark(oklch(0.67 0.13 55), oklch(0.6 0.13 55));
+	--oui-orange-6: light-dark(oklch(0.57 0.14 54), oklch(0.7 0.11 56));
+	--oui-orange-7: light-dark(oklch(0.46 0.13 53), oklch(0.78 0.08 57));
+	--oui-orange-8: light-dark(oklch(0.34 0.12 53), oklch(0.85 0.05 58));
+	--oui-orange-9: light-dark(oklch(0.22 0.11 51), oklch(0.91 0.03 59));
+	--oui-orange-10: light-dark(oklch(0.18 0.1 50), oklch(0.97 0.02 60));
+
+	--oui-purple-0: light-dark(oklch(0.98 0.015 300), oklch(0.18 0.1 290));
+	--oui-purple-1: light-dark(oklch(0.95 0.03 299), oklch(0.24 0.11 291));
+	--oui-purple-2: light-dark(oklch(0.9 0.05 298), oklch(0.32 0.12 292));
+	--oui-purple-3: light-dark(oklch(0.83 0.07 297), oklch(0.4 0.13 293));
+	--oui-purple-4: light-dark(oklch(0.75 0.09 296), oklch(0.5 0.12 294));
+	--oui-purple-5: light-dark(oklch(0.67 0.11 295), oklch(0.6 0.11 295));
+	--oui-purple-6: light-dark(oklch(0.58 0.12 294), oklch(0.7 0.09 296));
+	--oui-purple-7: light-dark(oklch(0.48 0.13 293), oklch(0.78 0.07 297));
+	--oui-purple-8: light-dark(oklch(0.34 0.12 292), oklch(0.85 0.05 298));
+	--oui-purple-9: light-dark(oklch(0.22 0.11 291), oklch(0.91 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.98 0.015 15), oklch(0.18 0.1 25));
+	--oui-red-1: light-dark(oklch(0.95 0.025 16), oklch(0.24 0.125 24));
+	--oui-red-2: light-dark(oklch(0.9 0.045 17), oklch(0.32 0.15 23));
+	--oui-red-3: light-dark(oklch(0.83 0.08 18), oklch(0.4 0.17 22));
+	--oui-red-4: light-dark(oklch(0.75 0.11 19), oklch(0.5 0.16 21));
+	--oui-red-5: light-dark(oklch(0.67 0.15 20), oklch(0.6 0.15 20));
+	--oui-red-6: light-dark(oklch(0.58 0.16 21), oklch(0.7 0.11 19));
+	--oui-red-7: light-dark(oklch(0.48 0.17 22), oklch(0.78 0.08 18));
+	--oui-red-8: light-dark(oklch(0.34 0.15 23), oklch(0.85 0.045 17));
+	--oui-red-9: light-dark(oklch(0.22 0.125 24), oklch(0.91 0.025 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.985 0.02 100), oklch(0.18 0.1 90));
+	--oui-yellow-1: light-dark(oklch(0.955 0.04 99), oklch(0.24 0.12 91));
+	--oui-yellow-2: light-dark(oklch(0.915 0.08 98), oklch(0.32 0.14 92));
+	--oui-yellow-3: light-dark(oklch(0.865 0.12 97), oklch(0.4 0.16 93));
+	--oui-yellow-4: light-dark(oklch(0.805 0.14 96), oklch(0.5 0.18 94));
+	--oui-yellow-5: light-dark(oklch(0.735 0.16 95), oklch(0.6 0.16 95));
+	--oui-yellow-6: light-dark(oklch(0.635 0.18 94), oklch(0.7 0.14 96));
+	--oui-yellow-7: light-dark(oklch(0.515 0.16 93), oklch(0.78 0.12 97));
+	--oui-yellow-8: light-dark(oklch(0.385 0.14 92), oklch(0.85 0.08 98));
+	--oui-yellow-9: light-dark(oklch(0.255 0.12 91), oklch(0.91 0.04 99));
+	--oui-yellow-10: light-dark(oklch(0.1875 0.1 90), oklch(0.97 0.02 100));
+
+	--oui-gray-0: light-dark(oklch(0.99 0 0), oklch(0.18 0 0));
+	--oui-gray-1: light-dark(oklch(0.97 0 0), oklch(0.24 0 0));
+	--oui-gray-2: light-dark(oklch(0.94 0 0), oklch(0.32 0 0));
+	--oui-gray-3: light-dark(oklch(0.88 0 0), oklch(0.4 0 0));
+	--oui-gray-4: light-dark(oklch(0.78 0 0), oklch(0.5 0 0));
+	--oui-gray-5: light-dark(oklch(0.67 0 0), oklch(0.6 0 0));
+	--oui-gray-6: light-dark(oklch(0.58 0 0), oklch(0.7 0 0));
+	--oui-gray-7: light-dark(oklch(0.48 0 0), oklch(0.78 0 0));
+	--oui-gray-8: light-dark(oklch(0.34 0 0), oklch(0.85 0 0));
+	--oui-gray-9: light-dark(oklch(0.22 0 0), oklch(0.91 0 0));
+	--oui-gray-10: light-dark(oklch(0.18 0 0), oklch(0.97 0 0));
+
+	--oui-slate-0: light-dark(oklch(0.99 0.0033 255), oklch(0.18 0.005 255));
+	--oui-slate-1: light-dark(oklch(0.97 0.0067 255), oklch(0.24 0.0075 255));
+	--oui-slate-2: light-dark(oklch(0.94 0.01 255), oklch(0.32 0.01 255));
+	--oui-slate-3: light-dark(oklch(0.88 0.0125 255), oklch(0.4 0.0125 255));
+	--oui-slate-4: light-dark(oklch(0.78 0.015 255), oklch(0.5 0.015 255));
+	--oui-slate-5: light-dark(oklch(0.67 0.02 255), oklch(0.6 0.02 255));
+	--oui-slate-6: light-dark(oklch(0.58 0.015 255), oklch(0.7 0.015 255));
+	--oui-slate-7: light-dark(oklch(0.48 0.0125 255), oklch(0.78 0.0125 255));
+	--oui-slate-8: light-dark(oklch(0.34 0.01 255), oklch(0.85 0.01 255));
+	--oui-slate-9: light-dark(oklch(0.22 0.0075 255), oklch(0.91 0.0075 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.99 0.0033 95), oklch(0.18 0.005 95));
+	--oui-stone-1: light-dark(oklch(0.97 0.0067 95), oklch(0.24 0.0075 95));
+	--oui-stone-2: light-dark(oklch(0.94 0.01 95), oklch(0.32 0.01 95));
+	--oui-stone-3: light-dark(oklch(0.88 0.0125 95), oklch(0.4 0.0125 95));
+	--oui-stone-4: light-dark(oklch(0.78 0.015 95), oklch(0.5 0.015 95));
+	--oui-stone-5: light-dark(oklch(0.67 0.02 95), oklch(0.6 0.02 95));
+	--oui-stone-6: light-dark(oklch(0.58 0.015 95), oklch(0.7 0.015 95));
+	--oui-stone-7: light-dark(oklch(0.48 0.0125 95), oklch(0.78 0.0125 95));
+	--oui-stone-8: light-dark(oklch(0.34 0.01 95), oklch(0.85 0.01 95));
+	--oui-stone-9: light-dark(oklch(0.22 0.0075 95), oklch(0.91 0.0075 95));
+	--oui-stone-10: light-dark(oklch(0.18 0.005 95), oklch(0.97 0.005 95));
+}

package/src/css/form.scss

@@ -2,7 +2,7 @@
 
 :where(.oui-fieldset) {
 	padding: 1em;
-	border: 1px solid var(--oui-grey-3);
+	border: 1px solid var(--oui-gray-3);
 	border-radius: 0.25em;
 }
 
@@ -12,10 +12,10 @@
 		outline: 3px solid transparent;
 		outline-offset: 0;
 		background-color: var(--oui-absolute);
-		border-color: var(--oui-grey-3);
+		border-color: var(--oui-gray-3);
 		border-radius: 0.25em;
 		box-shadow: inset 0 1px 2px 0
-			color-mix(in srgb, var(--oui-grey-10), transparent 80%);
+			color-mix(in oklab, var(--oui-gray-10), transparent 80%);
 		transition: 0.125s ease-in-out;
 	}
 
@@ -46,7 +46,7 @@
 					[aria-invalid='true']
 				)
 		) {
-		outline-color: color-mix(in srgb, var(--oui-red-6), transparent 60%);
+		outline-color: color-mix(in oklab, var(--oui-red-6), transparent 60%);
 		border-color: var(--oui-red-6);
 	}
 
@@ -56,29 +56,29 @@
 					[aria-invalid='false']
 				)
 		) {
-		outline-color: color-mix(in srgb, var(--oui-green-6), transparent 60%);
+		outline-color: color-mix(in oklab, var(--oui-green-6), transparent 60%);
 		border-color: var(--oui-green-6);
 	}
 
 	:where(&:not([disabled], [aria-disabled='true']):focus) {
-		outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 60%);
+		outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 60%);
 		border-color: var(--oui-blue-6);
 	}
 
 	@media (hover: hover) {
 		:where(&:not([disabled], [aria-disabled='true']):hover) {
-			outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 80%);
+			outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
 			border-color: var(--oui-blue-6);
 		}
 	}
 
 	:where(&[readonly]) {
-		color: color-mix(in srgb, currentColor, transparent 12.5%);
+		color: color-mix(in oklab, currentColor, transparent 12.5%);
 	}
 
 	:where(&[disabled], &[aria-disabled='true']) {
-		background-color: color-mix(in srgb, var(--oui-grey-0), transparent 50%);
-		color: color-mix(in srgb, currentColor, transparent 25%);
+		background-color: color-mix(in oklab, var(--oui-gray-0), transparent 50%);
+		color: color-mix(in oklab, currentColor, transparent 25%);
 	}
 }
 
@@ -104,7 +104,7 @@
 
 :where(.oui-legend) {
 	padding: 0.5em;
-	border: 1px solid var(--oui-grey-3);
+	border: 1px solid var(--oui-gray-3);
 	border-radius: 0.25em;
 }
 
@@ -135,8 +135,8 @@
 			width: 2.5em;
 			height: 1.5em;
 			display: inline-block;
-			background-color: var(--oui-grey-0);
-			border: 1px solid var(--oui-grey-3);
+			background-color: var(--oui-gray-0);
+			border: 1px solid var(--oui-gray-3);
 			border-radius: 3em;
 			right: 0;
 		}
@@ -148,7 +148,7 @@
 			background-color: var(--oui-absolute);
 			border-radius: 1.5em;
 			box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.125);
-			color: var(--oui-grey-8);
+			color: var(--oui-gray-8);
 			font-size: 0.75em;
 			font-weight: bold;
 			line-height: 1.5em;
@@ -178,7 +178,7 @@
 			height: 1.5em;
 			display: inline-block;
 			background-color: transparent;
-			border: 1px solid var(--oui-grey-4);
+			border: 1px solid var(--oui-gray-4);
 			inset: 0 auto auto 0;
 		}
 
@@ -241,7 +241,7 @@
 		color: var(--oui-blue-8);
 
 		&::before {
-			outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 60%);
+			outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 60%);
 			border-color: var(--oui-absolute);
 		}
 	}
@@ -251,7 +251,7 @@
 			color: var(--oui-blue-8);
 
 			&::before {
-				outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 80%);
+				outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
 				border-color: var(--oui-blue-6);
 			}
 		}
@@ -259,25 +259,28 @@
 		:where(
 				&:has(input:not([disabled], [aria-disabled='true']):is(:checked)):hover
 			)::before {
-			background-color: color-mix(in srgb, var(--oui-blue-6), transparent 40%);
+			background-color: color-mix(in oklab, var(--oui-blue-6), transparent 40%);
 		}
 	}
 
 	:where(&:has(input[disabled], input[aria-disabled='true'])) {
 		cursor: default;
 
-		&,
+		& {
+			color: color-mix(in oklab, currentColor, transparent 25%);
+		}
+
 		&::after {
-			color: color-mix(in srgb, currentColor, transparent 25%);
+			color: color-mix(in oklab, currentColor, transparent);
 		}
 
 		&::before {
-			background-color: color-mix(in srgb, var(--oui-grey-0), transparent 50%);
-			border-color: var(--oui-grey-3);
+			background-color: color-mix(in oklab, var(--oui-gray-0), transparent 50%);
+			border-color: var(--oui-gray-3);
 		}
 
 		&::after {
-			box-shadow: 0 0 0 1px var(--oui-grey-3);
+			box-shadow: 0 0 0 1px var(--oui-gray-3);
 			text-shadow: none;
 		}
 	}

package/src/css/message.scss

@@ -4,10 +4,10 @@
 		display: inline-flex;
 		flex-flow: column nowrap;
 		gap: 1em;
-		background-color: var(--background, var(--oui-grey-0, #eee));
-		border: 1px solid var(--border, var(--oui-grey-2, #ccc));
+		background-color: var(--background, var(--oui-gray-0));
+		border: 1px solid var(--border, var(--oui-gray-2));
 		border-radius: .5em;
-		color: var(--foreground, var(--oui-grey-8, #333));
+		color: var(--foreground, var(--oui-gray-8));
 		line-height: 1.25;
 	}
 
@@ -19,7 +19,7 @@
 	:where(& hr) {
 		height: 1px;
 		margin: 0 -1em;
-		background-color: var(--border, var(--oui-grey-2));
+		background-color: var(--border, var(--oui-gray-2));
 		border: none;
 	}
 

package/src/css/mixins.scss

@@ -1,59 +1,3 @@
-@mixin colour($name, $zero, $six, $ten, $dark-zero, $dark-six, $dark-ten) {
-	& {
-		--oui-#{$name}-0: #{$zero};
-		--oui-#{$name}-1: color-mix(
-			in srgb,
-			var(--oui-#{$name}-0),
-			var(--oui-#{$name}-6) 5%
-		);
-		--oui-#{$name}-2: color-mix(
-			in srgb,
-			var(--oui-#{$name}-0),
-			var(--oui-#{$name}-6) 15%
-		);
-		--oui-#{$name}-3: color-mix(
-			in srgb,
-			var(--oui-#{$name}-0),
-			var(--oui-#{$name}-6) 30%
-		);
-		--oui-#{$name}-4: color-mix(
-			in srgb,
-			var(--oui-#{$name}-0),
-			var(--oui-#{$name}-6) 50%
-		);
-		--oui-#{$name}-5: color-mix(
-			in srgb,
-			var(--oui-#{$name}-0),
-			var(--oui-#{$name}-6) 75%
-		);
-		--oui-#{$name}-6: #{$six};
-		--oui-#{$name}-7: color-mix(
-			in srgb,
-			var(--oui-#{$name}-10),
-			var(--oui-#{$name}-6) 75%
-		);
-		--oui-#{$name}-8: color-mix(
-			in srgb,
-			var(--oui-#{$name}-10),
-			var(--oui-#{$name}-6) 50%
-		);
-		--oui-#{$name}-9: color-mix(
-			in srgb,
-			var(--oui-#{$name}-10),
-			var(--oui-#{$name}-6) 25%
-		);
-		--oui-#{$name}-10: #{$ten};
-
-		@media (prefers-color-scheme: dark) {
-			& {
-				--oui-#{$name}-0: #{$dark-zero};
-				--oui-#{$name}-6: #{$dark-six};
-				--oui-#{$name}-10: #{$dark-ten};
-			}
-		}
-	}
-}
-
 @mixin visuallyHidden() {
 	width: 1px !important;
 	height: 1px !important;

package/src/css/table.scss

@@ -6,7 +6,7 @@
 	:where(&-wrapper) {
 		max-height: 32em;
 		overflow: auto;
-		border: 1px solid var(--oui-grey-3);
+		border: 1px solid var(--oui-gray-3);
 		border-radius: .25em;
 		position: relative;
 		overscroll-behavior-y: none;
@@ -15,8 +15,8 @@
 	:where(& caption) {
 		height: 2rem;
 		align-content: center;
-		background-color: var(--oui-grey-1);
-		border: solid var(--oui-grey-3);
+		background-color: var(--oui-gray-1);
+		border: solid var(--oui-gray-3);
 		border-width: 0 0 1px 0;
 		font-size: .875rem;
 		text-align: left;
@@ -27,12 +27,12 @@
 	}
 
 	:where(& tbody tr:nth-child(2n)) {
-		background-color: var(--oui-blue-0);
+		background-color: color-mix(in oklab, var(--oui-blue-0), transparent 67%);
 	}
 
 	:where(& th, & tfoot td) {
-		background-color: var(--oui-grey-1);
-		border: solid var(--oui-grey-3);
+		background-color: var(--oui-gray-1);
+		border: solid var(--oui-gray-3);
 		border-width: 0 1px 0 0;
 		position: sticky;
 		left: 0;
@@ -40,7 +40,7 @@
 
 		&::after {
 			content: '';
-			border-bottom: 1px solid var(--oui-grey-3);
+			border-bottom: 1px solid var(--oui-gray-3);
 			position: absolute;
 		}
 	}
@@ -66,7 +66,7 @@
 	}
 
 	:where(& tbody td) {
-		border: solid var(--oui-grey-3);
+		border: solid var(--oui-gray-3);
 		border-width: 0 1px 1px 0;
 	}