@oscarpalmer/oui 0.11.0 → 0.13.0

package/src/css/form.scss

@@ -3,7 +3,7 @@
 @use 'mixins.scss' as mixins;
 
 @mixin focus() {
-	--oui-border-value: var(--oui-blue-6);
+	--oui-border-value: var(--oui-blue-5);
 	--oui-foreground-value: inherit;
 	--oui-outline-percentage: 75%;
 	--oui-outline-value: var(--oui-blue-6);
@@ -11,7 +11,7 @@
 
 @mixin hover() {
 	--oui-border-value: var(--oui-blue-4);
-	--oui-foreground-percentage: 50%;
+	--oui-foreground-percentage: 0%;
 	--oui-foreground-value: inherit;
 	--oui-outline-percentage: 90%;
 	--oui-outline-value: var(--oui-blue-6);
@@ -23,20 +23,29 @@
 
 	@include outlined;
 
-	background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
+	background-color: color-mix(
+		in oklab,
+		var(--oui-background-value),
+		transparent var(--oui-background-percentage)
+	);
 	border: 1px solid var(--oui-border-value, var(--oui-gray-3));
-	box-shadow: inset 0 1px 2px 0 color-mix(in oklab, var(--oui-gray-10), transparent 75%);
+	box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
 	color: color-mix(
-			in oklab,
-			var(--oui-foreground-value, inherit),
-			transparent var(--oui-foreground-percentage)
-		);
+		in oklab,
+		var(--oui-foreground-value, inherit),
+		transparent var(--oui-foreground-percentage)
+	);
+	-webkit-text-fill-color: color-mix(
+		in oklab,
+		var(--oui-foreground-value, inherit),
+		transparent var(--oui-foreground-percentage)
+	);
 }
 
 @mixin invalid() {
-	--oui-border-value: var(--oui-red-6);
+	--oui-border-value: var(--oui-red-5);
 	--oui-foreground-value: var(--oui-red-9);
-	--oui-outline-percentage: 75%;
+	--oui-outline-percentage: 82.5%;
 	--oui-outline-value: var(--oui-red-6);
 }
 
@@ -55,9 +64,9 @@
 }
 
 @mixin valid() {
-	--oui-border-value: var(--oui-green-6);
+	--oui-border-value: var(--oui-green-5);
 	--oui-foreground-value: var(--oui-green-9);
-	--oui-outline-percentage: 75%;
+	--oui-outline-percentage: 82.5%;
 	--oui-outline-value: var(--oui-green-6);
 }
 
@@ -93,27 +102,32 @@
 		padding: 0;
 	}
 
-	:where(&:is([type='date' i],
-			[type='datetime-local' i],
-			[type='month' i],
-			[type='number' i],
-			[type='tel' i],
-			[type='time' i],
-			[type='url' i],
-			[type='week' i])) {
+	:where(
+			&:is(
+					[type='date' i],
+					[type='datetime-local' i],
+					[type='month' i],
+					[type='number' i],
+					[type='tel' i],
+					[type='time' i],
+					[type='url' i],
+					[type='week' i]
+				)
+		) {
 		font-variant-numeric: tabular-nums;
 	}
 
 	:where(&:is([type='file' i])) {
-		padding-left: .5em;
+		padding-left: 0.5em;
 
 		&::file-selector-button {
 			@include mixins.button;
 
+			--oui-background-value: var(--oui-grey-2);
 			--oui-outline-value: var(--oui-grey-6);
 
-			margin: 0 .75em 0 0;
-			font-size: .75em;
+			margin: 0 0.75em 0 0;
+			font-size: 0.75em;
 			cursor: pointer;
 		}
 	}
@@ -128,7 +142,7 @@
 			appearance: none;
 			width: 100%;
 			height: 0.75em;
-			border-radius: .75em;
+			border-radius: 0.75em;
 			position: relative;
 		}
 
@@ -141,12 +155,11 @@
 			appearance: none;
 			width: 1.25em;
 			height: 1.25em;
-			background-color:
-				color-mix(
-					in oklab,
-					var(--oui-background-value),
-					transparent var(--oui-background-percentage)
-				);
+			background-color: color-mix(
+				in oklab,
+				var(--oui-background-value),
+				transparent var(--oui-background-percentage)
+			);
 			border: 2px solid var(--oui-absolute);
 			border-radius: 1.25em;
 			box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.125);
@@ -160,11 +173,20 @@
 		}
 	}
 
-	:where(&.oui-validatable:not([disabled], [readonly], [aria-disabled='true' i]):is(:user-invalid, [aria-invalid='true' i])) {
+	:where(
+			&.oui-validatable:not(
+					[disabled],
+					[readonly],
+					[aria-disabled='true' i]
+				):is(
+					:user-invalid:not([aria-invalid='false' i]),
+					[aria-invalid='true' i]
+				)
+		) {
 		@include invalid;
 
 		&::file-selector-button {
-			--oui-background-value: var(--oui-red-1);
+			--oui-background-value: var(--oui-red-2);
 			--oui-foreground-value: var(--oui-red-8);
 			--oui-outline-value: var(--oui-red-6);
 		}
@@ -176,13 +198,24 @@
 		&::range-track {
 			@include invalid;
 		}
+
+		& > option:checked {
+			background-color: var(--oui-red-2);
+			color: var(--oui-red-9);
+		}
 	}
 
-	:where(&.oui-validatable:not([disabled], [readonly], [aria-disabled='true' i]):is(:user-valid, [aria-invalid='false' i])) {
+	:where(
+			&.oui-validatable:not(
+					[disabled],
+					[readonly],
+					[aria-disabled='true' i]
+				):is(:user-valid:not([aria-invalid='true' i]), [aria-invalid='false' i])
+		) {
 		@include valid;
 
 		&::file-selector-button {
-			--oui-background-value: var(--oui-green-1);
+			--oui-background-value: var(--oui-green-2);
 			--oui-foreground-value: var(--oui-green-8);
 			--oui-outline-value: var(--oui-green-6);
 		}
@@ -194,19 +227,28 @@
 		&::range-thumb {
 			--oui-background-value: var(--oui-green-6);
 		}
+
+		& > option:checked {
+			background-color: var(--oui-green-2);
+			color: var(--oui-green-9);
+		}
 	}
 
-	:where(&:not([disabled], [readonly], [aria-disabled="true" i])) {
+	:where(&:not([disabled], [readonly], [aria-disabled='true' i])) {
 		&::-webkit-calendar-picker-indicator {
 			outline: 4px solid transparent;
 			outline-offset: 2px;
 			border-radius: 2em;
-			transition: .125s ease-in-out;
+			transition: 0.125s ease-in-out;
 			cursor: pointer;
 
 			@media (hover: hover) {
 				&:hover {
-					outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 75%);
+					outline-color: color-mix(
+						in oklab,
+						var(--oui-blue-6),
+						transparent 75%
+					);
 				}
 			}
 
@@ -216,12 +258,12 @@
 		}
 	}
 
-	:where(&:not([disabled], [readonly], [aria-disabled="true" i]):focus),
-	:where(&:not([disabled], [readonly], [aria-disabled="true" i]):focus-within) {
+	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus),
+	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus-within) {
 		@include focus;
 
 		&::file-selector-button {
-			--oui-background-value: var(--oui-blue-1);
+			--oui-background-value: var(--oui-blue-2);
 			--oui-foreground-value: var(--oui-blue-8);
 			--oui-outline-value: var(--oui-blue-6);
 		}
@@ -239,11 +281,11 @@
 	}
 
 	@media (hover: hover) {
-		:where(&:not([disabled], [aria-disabled='true' i]):hover) {
+		:where(&:not([disabled], [readonly], [aria-disabled='true' i]):hover) {
 			@include hover;
 
 			&::file-selector-button {
-				--oui-background-value: var(--oui-blue-1);
+				--oui-background-value: var(--oui-blue-2);
 				--oui-foreground-value: var(--oui-blue-8);
 				--oui-outline-value: var(--oui-blue-6);
 			}
@@ -262,6 +304,12 @@
 		--oui-foreground-percentage: 25%;
 
 		font-style: italic;
+
+		&::file-selector-button {
+			--oui-background-value: var(--oui-gray-1);
+
+			cursor: default;
+		}
 	}
 
 	:where(&:is([disabled], [readonly], [aria-disabled='true' i]):focus) {
@@ -271,7 +319,6 @@
 	:where(&[disabled], &[aria-disabled='true' i]) {
 		--oui-background-percentage: 50%;
 
-		&::file-selector-button,
 		&::range-thumb {
 			--oui-background-value: var(--oui-gray-1);
 
@@ -284,8 +331,7 @@
 		}
 
 		&::-webkit-calendar-picker-indicator {
-			color: red;
-			stroke: red;
+			opacity: 0.5;
 		}
 	}
 }
@@ -315,7 +361,7 @@ select.oui-input:is([multiple]) {
 	}
 
 	:where(& > option:nth-of-type(2n)) {
-		background-color: color-mix(in oklab, var(--oui-blue-0), transparent 33%);
+		background-color: color-mix(in oklab, var(--oui-blue-0), transparent 50%);
 	}
 
 	:where(& > option:checked) {
@@ -324,7 +370,7 @@ select.oui-input:is([multiple]) {
 
 		&::before {
 			content: var(--oui-on);
-			margin: 0 .75em 0 0;
+			margin: 0 0.75em 0 0;
 		}
 	}
 }
@@ -342,7 +388,7 @@ select.oui-input:is([multiple]) {
 
 :where(.oui-label) {
 	cursor: pointer;
-	transition: .125s ease-in-out;
+	transition: 0.125s ease-in-out;
 
 	@media (hover: hover) {
 		:where(&[for]:hover) {
@@ -381,19 +427,33 @@ select.oui-input:is([multiple]) {
 	}
 
 	&::before {
-		background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
-		box-shadow: inset 0 1px 2px 0 color-mix(in oklab, var(--oui-shadow-value), transparent var(--oui-shadow-percentage));
-		outline: 4px solid color-mix(
+		background-color: color-mix(
 			in oklab,
-			var(--oui-outline-value),
-			transparent var(--oui-outline-percentage)
+			var(--oui-background-value),
+			transparent var(--oui-background-percentage)
 		);
+		outline: 4px solid
+			color-mix(
+				in oklab,
+				var(--oui-outline-value),
+				transparent var(--oui-outline-percentage)
+			);
 		outline-offset: 0;
 		border: 1px solid var(--oui-border-value);
+		box-shadow: inset 0 1px 2px 0
+			color-mix(
+				in oklab,
+				var(--oui-shadow-value),
+				transparent var(--oui-shadow-percentage)
+			);
 	}
 
 	&::after {
-		color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
+		color: color-mix(
+			in oklab,
+			var(--oui-foreground-value),
+			transparent var(--oui-foreground-percentage)
+		);
 	}
 }
 
@@ -531,7 +591,11 @@ select.oui-input:is([multiple]) {
 			color: var(--oui-blue-8);
 		}
 
-		:where(&:has(input:not([disabled], [aria-disabled='true' i]):is(:checked)):hover) {
+		:where(
+				&:has(
+						input:not([disabled], [aria-disabled='true' i]):is(:checked)
+					):hover
+			) {
 			--oui-background-percentage: 50%;
 			--oui-background-value: var(--oui-blue-6);
 		}
@@ -544,7 +608,11 @@ select.oui-input:is([multiple]) {
 		--oui-foreground-percentage: 25%;
 		--oui-foreground-value: currentColor;
 
-		color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
+		color: color-mix(
+			in oklab,
+			var(--oui-foreground-value),
+			transparent var(--oui-foreground-percentage)
+		);
 		font-style: italic;
 		cursor: default;
 

package/src/css/message.scss

@@ -1,25 +1,27 @@
 /*! https://github.com/oscarpalmer/oui */
 
+@use './mixins.scss' as mixins;
+
 .oui-message {
 	:where(&) {
-		--oui-shadow-value: color-mix(
-			in oklch,
-			var(--oui-shadow, var(--oui-gray-6)),
-			transparent 95%
+		--oui-shadow-mixed: color-mix(
+			in oklab,
+			var(--oui-shadow-value, var(--oui-gray-6)),
+			transparent 92.5%
+		);
+
+		@include mixins.card(
+			color-mix(
+				in oklab,
+				var(--oui-background, var(--oui-gray-0)),
+				transparent 25%
+			),
+			var(--oui-shadow-mixed),
 		);
 
-		padding: 1em;
 		display: inline-flex;
 		flex-flow: column nowrap;
 		gap: 1em;
-		background-color: color-mix(
-			in oklab,
-			var(--oui-background, var(--oui-gray-0)),
-			transparent 25%
-		);
-		border-radius: 0.5em;
-		box-shadow: 0 0 0 1px var(--oui-shadow-value),
-			0 1px 2px 0 var(--oui-shadow-value), 0 2px 4px 0 var(--oui-shadow-value);
 		color: var(--oui-foreground, var(--oui-gray-8));
 		line-height: 1.25;
 	}
@@ -31,8 +33,8 @@
 
 	:where(& hr) {
 		height: 1px;
-		margin: 0 -1em;
-		background-color: var(--oui-shadow-value, var(--oui-gray-2));
+		margin: 0 -1.25em;
+		background-color: var(--oui-border, var(--oui-gray-2));
 		border: none;
 	}
 
@@ -44,37 +46,43 @@
 
 	:where(&-blue, &-info) {
 		--oui-background: var(--oui-blue-0);
+		--oui-border: var(--oui-blue-2);
 		--oui-foreground: var(--oui-blue-8);
-		--oui-shadow: var(--oui-blue-6);
+		--oui-shadow-value: var(--oui-blue-6);
 	}
 
 	:where(&-green, &-success) {
 		--oui-background: var(--oui-green-0);
+		--oui-border: var(--oui-green-2);
 		--oui-foreground: var(--oui-green-8);
-		--oui-shadow: var(--oui-green-6);
+		--oui-shadow-value: var(--oui-green-6);
 	}
 
 	:where(&-orange, &-warning) {
 		--oui-background: var(--oui-orange-0);
+		--oui-border: var(--oui-orange-2);
 		--oui-foreground: var(--oui-orange-8);
-		--oui-shadow: var(--oui-orange-6);
+		--oui-shadow-value: var(--oui-orange-6);
 	}
 
 	:where(&-purple, &-special) {
 		--oui-background: var(--oui-purple-0);
+		--oui-border: var(--oui-purple-2);
 		--oui-foreground: var(--oui-purple-8);
-		--oui-shadow: var(--oui-purple-6);
+		--oui-shadow-value: var(--oui-purple-6);
 	}
 
 	:where(&-red, &-error) {
 		--oui-background: var(--oui-red-0);
+		--oui-border: var(--oui-red-2);
 		--oui-foreground: var(--oui-red-8);
-		--oui-shadow: var(--oui-red-6);
+		--oui-shadow-value: var(--oui-red-6);
 	}
 
 	:where(&-yellow, &-notice) {
 		--oui-background: var(--oui-yellow-0);
+		--oui-border: var(--oui-yellow-2);
 		--oui-foreground: var(--oui-yellow-8);
-		--oui-shadow: var(--oui-yellow-6);
+		--oui-shadow-value: var(--oui-yellow-6);
 	}
 }

package/src/css/mixins.scss

@@ -2,14 +2,17 @@
 	--oui-background-percentage: 25%;
 	--oui-foreground-percentage: 0%;
 	--oui-outline-percentage: 100%;
-	--oui-shadow-percentage: 85%;
+	--oui-shadow-inset: color-mix(in oklab, white, transparent 75%);
+	--oui-shadow-percentage: 82.5%;
 
 	--oui-shadow-value: color-mix(
-		in oklch,
+		in oklab,
 		var(--oui-outline-value, var(--oui-gray-6)),
 		transparent var(--oui-shadow-percentage)
 	);
 
+	@include shadow(var(--oui-shadow-value), var(--oui-shadow-inset));
+
 	padding: 0.5em 0.75em;
 	display: inline-flex;
 	flex-flow: row wrap;
@@ -28,10 +31,6 @@
 			transparent var(--oui-outline-percentage)
 		);
 	border: none;
-	box-shadow:
-		0 0 0 1px var(--oui-shadow-value),
-		0 1px 2px 0 var(--oui-shadow-value),
-		0 2px 4px 0 var(--oui-shadow-value);
 	color: color-mix(
 		in oklab,
 		var(--oui-foreground-value, var(--oui-gray-8)),
@@ -41,6 +40,39 @@
 	transition: 0.125s ease-in-out;
 }
 
+@mixin card($backgroundColor: var(--oui-absolute), $boxShadowColor: color-mix(
+		in oklab,
+		var(--oui-gray-6),
+		transparent 92.5%
+	)) {
+	@include shadow($boxShadowColor);
+
+	padding: 1em 1.25em;
+	background-color: $backgroundColor;
+	border-radius: 0.5em;
+}
+
+@mixin shadow($color: rgba(0, 0, 0, 0.05), $inset: transparent) {
+	box-shadow:
+		inset 0 1px 0 0 $inset,
+		0 0 0 1px $color,
+		0 1px 2px -.5px $color,
+		0 2px 4px -1px $color;
+}
+
+@mixin shadowOverlay($color: rgba(0, 0, 0, 0.05), $inset: transparent) {
+	box-shadow:
+		inset 0 1px 0 0 $inset,
+		0 0 0 1px $color,
+		0 1px 2px -.5px $color,
+		0 2px 4px -1px $color,
+		0 4px 8px -2px $color,
+		0 8px 16px -4px $color,
+		0 16px 32px -8px $color,
+		0 32px 64px -16px $color,
+		0 64px 128px -32px $color;
+}
+
 @mixin visuallyHidden() {
 	width: 1px !important;
 	height: 1px !important;

package/src/css/reset.scss

@@ -178,8 +178,9 @@
 :where(select, input[list]) {
 	appearance: none; // Change the inconsistent appearance in all browsers [SE]
 	padding-right: 1em; // ditto
-	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E")
-		no-repeat right center / 1em; // ditto
+	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
+	background-position: right center / 1em; // ditto
+	background-repeat: no-repeat; // ditto
 	border-radius: 0; // ditto
 }
 

package/src/css/table.scss

@@ -3,6 +3,7 @@
 .oui-table {
 	:where(&) {
 		width: 100%;
+		background-color: var(--oui-absolute);
 	}
 
 	:where(&-wrapper) {
@@ -29,41 +30,65 @@
 	}
 
 	:where(& tbody tr:nth-of-type(2n)) {
-		background-color: color-mix(in oklab, var(--oui-blue-0), transparent 67%);
+		background-color: color-mix(in oklab, var(--oui-blue-0), transparent 50%);
 	}
 
 	:where(& th, & tfoot td) {
 		background-color: var(--oui-gray-1);
 		border: solid var(--oui-gray-3);
 		border-width: 0 1px 0 0;
+	}
+
+	:where(& thead th, & tfoot td) {
 		position: sticky;
 		left: 0;
 		z-index: 1;
 
 		&::after {
 			content: '';
-			border-bottom: 1px solid var(--oui-gray-3);
+			width: 100%;
+			height: 4px;
+			background-image: linear-gradient(
+				to var(--oui-shadow-direction),
+				rgba(0, 0, 0, 0.1),
+				transparent
+			);
 			position: absolute;
 		}
 	}
 
 	:where(& th, & td) {
-		padding: .5em;
+		padding: .5em .625rem;
 	}
 
-	:where(& th) {
-		top: 2em;
+	:where(& thead th) {
+		font-size: .75rem;
+		font-weight: bold;
+		letter-spacing: .1em;
+		text-align: left;
+		text-transform: uppercase;
+		top: 0;
 
 		&::after {
-			inset: auto 0 0 0;
+			--oui-shadow-direction: bottom;
+
+			border-top: 1px solid var(--oui-gray-3);
+			inset: 100% 0 0 0;
 		}
 	}
 
+	:where(&:has(caption) thead th) {
+		top: 2rem;
+	}
+
 	:where(& tfoot td) {
 		bottom: 0;
 
 		&::after {
-			inset: 0 0 auto 0;
+			--oui-shadow-direction: top;
+
+			border-bottom: 1px solid var(--oui-gray-3);
+			inset: -4px 0 0 0;
 		}
 	}
 

package/src/css/tooltip.scss

@@ -0,0 +1,14 @@
+@use 'mixins.scss' as mixins;
+
+:where([oui-tooltip-content]) {
+	@include mixins.shadowOverlay;
+
+	max-width: 48ch;
+	padding: 0.75em 1em;
+	background-color: var(--oui-absolute);
+	border-radius: 0.25rem;
+	font-size: 0.875rem;
+	position: fixed;
+	inset: 0 auto auto 0;
+	z-index: 10;
+}