@oscarpalmer/oui 0.36.0 → 0.37.0

package/src/css/floatable.scss

@@ -8,7 +8,7 @@
 }
 
 :where([oui-dialog], [oui-popover], [oui-tooltip-content]) {
-	@include mixins.shadow-overlay;
+	@include mixins.shadow-5;
 
 	background-color: var(--oui-absolute);
 	scale: 0.9;
@@ -97,49 +97,49 @@
 		position: absolute;
 	}
 
-	&[oui-position^='above'],
-	&[oui-position^='below'],
-	&[oui-position^='bottom'],
-	&[oui-position^='top'] {
+	&[oui-position^='above' i],
+	&[oui-position^='below' i],
+	&[oui-position^='bottom' i],
+	&[oui-position^='top' i] {
 		&::after {
 			width: 100%;
 			height: 1em;
 		}
 	}
 
-	&[oui-position^='above'],
-	&[oui-position^='top'] {
+	&[oui-position^='above' i],
+	&[oui-position^='top' i] {
 		&::after {
 			inset: calc(100% - 0.5em) 0 0;
 		}
 	}
 
-	&[oui-position^='below'],
-	&[oui-position^='bottom'] {
+	&[oui-position^='below' i],
+	&[oui-position^='bottom' i] {
 		&::after {
 			inset: -0.5em 0 0;
 		}
 	}
 
-	&[oui-position^='end'],
-	&[oui-position^='left'],
-	&[oui-position^='right'],
-	&[oui-position^='start'] {
+	&[oui-position^='end' i],
+	&[oui-position^='left' i],
+	&[oui-position^='right' i],
+	&[oui-position^='start' i] {
 		&::after {
 			width: 1em;
 			height: 100%;
 		}
 	}
 
-	&[oui-position^='end'],
-	&[oui-position^='right'] {
+	&[oui-position^='end' i],
+	&[oui-position^='right' i] {
 		&::after {
 			inset: 0 0 0 -0.5em;
 		}
 	}
 
-	&[oui-position^='left'],
-	&[oui-position^='start'] {
+	&[oui-position^='left' i],
+	&[oui-position^='start' i] {
 		&::after {
 			inset: 0 0 0 calc(100% - 0.5em);
 		}

package/src/css/form.scss

@@ -51,6 +51,30 @@
 		font-variant-numeric: tabular-nums;
 	}
 
+	:where(&:is([type='date' i], [type='datetime-local' i], [type='month' i], [type='week' i])) {
+		&::-webkit-calendar-picker-indicator {
+			--oui-outline-percentage: 100%;
+			--oui-outline-value: var(--oui-blue-6);
+
+			outline: 4px solid
+				color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
+			outline-offset: 2px;
+			border-radius: 1em;
+			transition: outline 0.125s ease-in-out;
+			cursor: pointer;
+
+			&:focus-within {
+				--oui-outline-percentage: 62.5%;
+			}
+
+			@media (hover: hover) {
+				&:hover {
+					--oui-outline-percentage: 85%;
+				}
+			}
+		}
+	}
+
 	:where(&:is([type='file' i])) {
 		padding-left: 0.5em;
 
@@ -61,6 +85,7 @@
 			--oui-outline-value: var(--oui-grey-6);
 
 			margin: 0 0.75em 0 0;
+			outline: none;
 			font-size: 0.75em;
 			cursor: pointer;
 		}
@@ -108,13 +133,15 @@
 	}
 
 	:where(
-		&.oui-validate:not([disabled], [readonly], [aria-disabled='true' i]):is(
-			:user-invalid:not([aria-invalid='false' i]),
-			[aria-invalid='true' i]
-		)
+		&.oui-validate:not(
+				[disabled],
+				[readonly],
+				[aria-disabled='true' i],
+				[aria-readonly='true' i],
+				:focus-visible,
+				:focus-within
+			):is(:user-invalid:not([aria-invalid='false' i]), [aria-invalid='true' i])
 	) {
-		@include mixins.input-invalid;
-
 		&::file-selector-button {
 			--oui-background-value: var(--oui-red-2);
 			--oui-foreground-value: var(--oui-red-8);
@@ -136,13 +163,15 @@
 	}
 
 	:where(
-		&.oui-validate:not([disabled], [readonly], [aria-disabled='true' i]):is(
-			:user-valid:not([aria-invalid='true' i]),
-			[aria-invalid='false' i]
-		)
+		&.oui-validate:not(
+				[disabled],
+				[readonly],
+				[aria-disabled='true' i],
+				[aria-readonly='true' i],
+				:focus-visible,
+				:focus-within
+			):is(:user-valid:not([aria-invalid='true' i]), [aria-invalid='false' i])
 	) {
-		@include mixins.input-valid;
-
 		&::file-selector-button {
 			--oui-background-value: var(--oui-green-2);
 			--oui-foreground-value: var(--oui-green-8);
@@ -163,72 +192,59 @@
 		}
 	}
 
-	:where(&:not([disabled], [readonly], [aria-disabled='true' i])) {
-		&::-webkit-calendar-picker-indicator {
-			outline: 4px solid transparent;
-			outline-offset: 2px;
-			border-radius: 2em;
-			transition: 0.125s ease-in-out;
-			cursor: pointer;
-
-			@media (hover: hover) {
-				&:hover {
-					outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 75%);
-				}
+	&:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) {
+		:where(&:focus-visible, &:focus-within) {
+			&::file-selector-button {
+				--oui-background-value: var(--oui-blue-2);
+				--oui-foreground-value: var(--oui-blue-8);
+				--oui-outline-value: var(--oui-blue-6);
 			}
 
-			&:focus {
-				outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 75%);
+			&::range-thumb,
+			&::range-track {
+				@include mixins.input-focus;
 			}
-		}
-	}
 
-	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus),
-	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus-within) {
-		@include mixins.input-focus;
+			&::range-thumb {
+				--oui-background-value: var(--oui-blue-6);
 
-		&::file-selector-button {
-			--oui-background-value: var(--oui-blue-2);
-			--oui-foreground-value: var(--oui-blue-8);
-			--oui-outline-value: var(--oui-blue-6);
+				box-shadow: 0 1px 2px 2px rgb(0 0 0 / 25%);
+			}
 		}
 
-		&::range-thumb,
-		&::range-track {
-			@include mixins.input-focus;
-		}
+		@media (hover: hover) {
+			:where(&:hover) {
+				&::file-selector-button {
+					--oui-background-value: var(--oui-blue-2);
+					--oui-foreground-value: var(--oui-blue-8);
+					--oui-outline-value: var(--oui-blue-6);
+				}
 
-		&::range-thumb {
-			--oui-background-value: var(--oui-blue-6);
+				&::range-thumb {
+					--oui-background-value: var(--oui-blue-5);
+				}
 
-			box-shadow: 0 1px 2px 2px rgb(0 0 0 / 25%);
+				&::range-track {
+					@include mixins.input-hover;
+				}
+			}
 		}
 	}
 
-	@media (hover: hover) {
-		:where(&:not([disabled], [readonly], [aria-disabled='true' i]):hover) {
-			@include mixins.input-hover;
-
-			&::file-selector-button {
-				--oui-background-value: var(--oui-blue-2);
-				--oui-foreground-value: var(--oui-blue-8);
-				--oui-outline-value: var(--oui-blue-6);
-			}
-
-			&::range-thumb {
-				--oui-background-value: var(--oui-blue-5);
+	:where(&:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i])) {
+		&::-webkit-calendar-picker-indicator {
+			&:focus-within {
+				--oui-outline-percentage: 0%;
+				--oui-outline-value: var(--oui-gray-3);
 			}
 
-			&::range-track {
-				@include mixins.input-hover;
+			@media (hover: hover) {
+				&:hover {
+					--oui-outline-percentage: 0%;
+					--oui-outline-value: var(--oui-gray-3);
+				}
 			}
 		}
-	}
-
-	:where(&:is([disabled], [readonly], [aria-disabled='true' i])) {
-		--oui-foreground-percentage: 25%;
-
-		font-style: italic;
 
 		&::file-selector-button {
 			--oui-background-value: var(--oui-gray-1);
@@ -243,12 +259,10 @@
 		}
 	}
 
-	:where(&:is([disabled], [readonly], [aria-disabled='true' i]):focus) {
-		--oui-outline-percentage: 75%;
-	}
-
 	:where(&:is([disabled], [aria-disabled='true' i])) {
-		--oui-background-percentage: 50%;
+		&::-webkit-calendar-picker-indicator {
+			opacity: 0.5;
+		}
 
 		&::range-thumb {
 			--oui-background-value: var(--oui-gray-1);
@@ -260,10 +274,6 @@
 			--oui-background-percentage: 50%;
 			--oui-background-value: var(--oui-gray-0);
 		}
-
-		&::-webkit-calendar-picker-indicator {
-			opacity: 0.5;
-		}
 	}
 }
 
@@ -317,12 +327,13 @@ select.oui-input:is([multiple]) {
 :where(.oui-label, .oui-legend) {
 	font-size: 0.875rem;
 	font-weight: bold;
+	align-self: flex-start;
 }
 
 .oui-label {
 	:where(&) {
 		cursor: pointer;
-		transition: 0.125s ease-in-out;
+		transition: color 0.125s ease-in-out;
 	}
 
 	@media (hover: hover) {
@@ -358,6 +369,7 @@ select.oui-input:is([multiple]) {
 		font-family: system-ui, sans-serif;
 		position: absolute;
 		transition: 0.125s ease-in-out;
+		transition-property: background, outline, border, box-shadow, color;
 		pointer-events: none;
 	}
 

package/src/css/listbox.scss

@@ -45,32 +45,6 @@
 		border-radius: 0.25em;
 		position: relative;
 	}
-
-	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus) {
-		@include mixins.input-focus;
-	}
-
-	@media (hover: hover) {
-		:where(
-			&:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]):hover
-		) {
-			@include mixins.input-hover;
-		}
-	}
-
-	:where(&:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i])) {
-		--oui-foreground-percentage: 25%;
-
-		font-style: italic;
-	}
-
-	:where(&:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]):focus) {
-		--oui-outline-percentage: 75%;
-	}
-
-	:where(&:is([disabled], [aria-disabled='true' i])) {
-		--oui-background-percentage: 50%;
-	}
 }
 
 :where([oui-listbox-header]) {
@@ -117,11 +91,10 @@
 		outline-offset: -4px;
 		line-height: 1.25;
 		cursor: pointer;
-		transition: 0.125s ease-in-out;
 	}
 
 	:where(&[aria-selected='true' i]) {
-		background-color: var(--oui-blue-3);
+		background-color: var(--oui-blue-2);
 		color: var(--oui-blue-9);
 	}
 
@@ -130,9 +103,7 @@
 		margin: 0 0.75em 0 0;
 	}
 
-	:where(
-		oui-listbox:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) &
-	) {
+	oui-listbox:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) & {
 		@media (hover: hover) {
 			:where(&:hover) {
 				background-color: var(--oui-blue-1);

package/src/css/message.scss

@@ -4,6 +4,9 @@
 
 .oui-message {
 	:where(&) {
+		--oui-background: var(--oui-gray-1);
+		--oui-border: var(--oui-gray-2);
+		--oui-foreground: var(--oui-gray-8);
 		--oui-shadow-mixed: color-mix(
 			in oklab,
 			var(--oui-shadow-value, var(--oui-gray-6)),
@@ -11,7 +14,7 @@
 		);
 
 		@include mixins.card(
-			color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%),
+			color-mix(in oklab, var(--oui-background), transparent 25%),
 			var(--oui-shadow-mixed)
 		);
 
@@ -19,12 +22,12 @@
 		display: inline-flex;
 		flex-flow: column nowrap;
 		gap: 1em;
-		color: var(--oui-foreground, var(--oui-gray-8));
+		color: var(--oui-foreground);
 		line-height: 1.25;
 	}
 
 	:where(& h2, & h3, & h4, & h5, & h6) {
-		color: var(--oui-foreground, var(--oui-gray-10));
+		color: var(--oui-foreground);
 		font-size: 1em;
 		font-weight: bold;
 	}
@@ -32,7 +35,7 @@
 	:where(& hr) {
 		height: 1px;
 		margin: 0 -1.25em;
-		background-color: var(--oui-border, var(--oui-gray-2));
+		background-color: var(--oui-border);
 		border: none;
 	}
 
@@ -45,44 +48,26 @@
 	}
 
 	:where(&--blue, &--info) {
-		--oui-background: var(--oui-blue-0);
-		--oui-border: var(--oui-blue-2);
-		--oui-foreground: var(--oui-blue-8);
-		--oui-shadow-value: var(--oui-blue-6);
+		@include mixins.message-blue;
 	}
 
 	:where(&--green, &--success) {
-		--oui-background: var(--oui-green-0);
-		--oui-border: var(--oui-green-2);
-		--oui-foreground: var(--oui-green-8);
-		--oui-shadow-value: var(--oui-green-6);
+		@include mixins.message-green;
 	}
 
 	:where(&--orange, &--warning) {
-		--oui-background: var(--oui-orange-0);
-		--oui-border: var(--oui-orange-2);
-		--oui-foreground: var(--oui-orange-8);
-		--oui-shadow-value: var(--oui-orange-6);
+		@include mixins.message-orange;
 	}
 
 	:where(&--purple, &--special) {
-		--oui-background: var(--oui-purple-0);
-		--oui-border: var(--oui-purple-2);
-		--oui-foreground: var(--oui-purple-8);
-		--oui-shadow-value: var(--oui-purple-6);
+		@include mixins.message-purple;
 	}
 
 	:where(&--red, &--error) {
-		--oui-background: var(--oui-red-0);
-		--oui-border: var(--oui-red-2);
-		--oui-foreground: var(--oui-red-8);
-		--oui-shadow-value: var(--oui-red-6);
+		@include mixins.message-red;
 	}
 
 	:where(&--yellow, &--notice) {
-		--oui-background: var(--oui-yellow-0);
-		--oui-border: var(--oui-yellow-2);
-		--oui-foreground: var(--oui-yellow-8);
-		--oui-shadow-value: var(--oui-yellow-6);
+		@include mixins.message-yellow;
 	}
 }