@oscarpalmer/oui 0.36.0 → 0.38.0

package/src/css/floatable.scss

@@ -1,4 +1,7 @@
-@use 'mixins.scss' as mixins;
+/*! https://github.com/oscarpalmer/oui */
+
+@use './mixins/misc.mixins.scss' as miscMixins;
+@use './mixins/shadow.mixins.scss' as shadowMixins;
 
 :where([oui-dialog], [oui-popover], [oui-tooltip-content]),
 :where([oui-dialog])::backdrop {
@@ -8,7 +11,7 @@
 }
 
 :where([oui-dialog], [oui-popover], [oui-tooltip-content]) {
-	@include mixins.shadow-overlay;
+	@include shadowMixins.shadow-5;
 
 	background-color: var(--oui-absolute);
 	scale: 0.9;
@@ -46,7 +49,7 @@
 }
 
 :where([oui-popover], [oui-tooltip-content]) {
-	@include mixins.floatable;
+	@include miscMixins.floatable;
 }
 
 :where([oui-popover]) {
@@ -97,49 +100,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

@@ -1,6 +1,8 @@
 /*! https://github.com/oscarpalmer/oui */
 
-@use 'mixins.scss' as mixins;
+@use './mixins/button.mixins.scss' as buttonMixins;
+@use './mixins/input.mixins.scss' as inputMixins;
+@use './mixins/misc.mixins.scss' as miscMixins;
 
 :where(.oui-fieldset) {
 	padding: 1em;
@@ -14,7 +16,7 @@
 	}
 
 	:where(&:not([type='range' i])) {
-		@include mixins.input;
+		@include inputMixins.input;
 
 		padding: 0.5em 0.75em;
 		border-radius: 0.25em;
@@ -51,16 +53,41 @@
 		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;
 
 		&::file-selector-button {
-			@include mixins.button;
+			@include buttonMixins.button;
 
 			--oui-background-value: var(--oui-grey-2);
 			--oui-outline-value: var(--oui-grey-6);
 
 			margin: 0 0.75em 0 0;
+			outline: none;
 			font-size: 0.75em;
 			cursor: pointer;
 		}
@@ -71,7 +98,7 @@
 		outline: none;
 
 		&::range-track {
-			@include mixins.input;
+			@include inputMixins.input;
 
 			appearance: none;
 			width: 100%;
@@ -84,7 +111,7 @@
 			--oui-background-percentage: 0%;
 			--oui-background-value: var(--oui-blue-6);
 
-			@include mixins.input-outlined;
+			@include inputMixins.input-outlined;
 
 			appearance: none;
 			width: 1.25em;
@@ -108,13 +135,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);
@@ -126,7 +155,7 @@
 		}
 
 		&::range-track {
-			@include mixins.input-invalid;
+			@include inputMixins.input-invalid;
 		}
 
 		& > option:checked {
@@ -136,13 +165,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);
@@ -150,7 +181,7 @@
 		}
 
 		&::range-track {
-			@include mixins.input-valid;
+			@include inputMixins.input-valid;
 		}
 
 		&::range-thumb {
@@ -163,72 +194,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 inputMixins.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 inputMixins.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 +261,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 +276,6 @@
 			--oui-background-percentage: 50%;
 			--oui-background-value: var(--oui-gray-0);
 		}
-
-		&::-webkit-calendar-picker-indicator {
-			opacity: 0.5;
-		}
 	}
 }
 
@@ -317,12 +329,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 +371,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;
 	}
 
@@ -557,5 +571,5 @@ select.oui-input:is([multiple]) {
 }
 
 :where(.oui-switch input, .oui-toggle input) {
-	@include mixins.visually-hidden;
+	@include miscMixins.visually-hidden;
 }

package/src/css/listbox.scss

@@ -1,6 +1,7 @@
 /*! https://github.com/oscarpalmer/oui */
 
-@use './mixins.scss' as mixins;
+@use './mixins/input.mixins.scss' as inputMixins;
+@use './mixins/misc.mixins.scss' as miscMixins;
 
 :where(oui-listbox, [oui-listbox-content]) {
 	display: flex;
@@ -36,7 +37,7 @@
 
 [oui-listbox-filter-input] {
 	:where(&) {
-		@include mixins.input;
+		@include inputMixins.input;
 
 		--oui-background-value: var(--oui-absolute);
 
@@ -45,32 +46,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]) {
@@ -84,7 +59,7 @@
 }
 
 :where([oui-listbox-hidden]) {
-	@include mixins.visually-hidden;
+	@include miscMixins.visually-hidden;
 
 	position: absolute;
 }
@@ -117,11 +92,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 +104,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

@@ -1,17 +1,21 @@
 /*! https://github.com/oscarpalmer/oui */
 
-@use './mixins.scss' as mixins;
+@use './mixins/message.mixins.scss' as messageMixins;
+@use './mixins/misc.mixins.scss' as miscMixins;
 
 .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)),
 			transparent 92.5%
 		);
 
-		@include mixins.card(
-			color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%),
+		@include miscMixins.card(
+			color-mix(in oklab, var(--oui-background), transparent 25%),
 			var(--oui-shadow-mixed)
 		);
 
@@ -19,12 +23,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 +36,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 +49,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 messageMixins.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 messageMixins.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 messageMixins.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 messageMixins.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 messageMixins.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 messageMixins.message-yellow;
 	}
 }

package/src/css/mixins/badge.mixins.scss

@@ -0,0 +1,53 @@
+@use './shadow.mixins.scss' as shadowMixins;
+
+@mixin badge() {
+	--oui-shadow-inset: color-mix(in oklab, var(--oui-absolute), transparent 50%);
+	--oui-shadow-value: var(--oui-gray-6);
+	--oui-shadow-mixed: color-mix(in oklab, var(--oui-shadow-value), transparent 87.5%);
+
+	@include shadowMixins.shadow-1(var(--oui-shadow-mixed), var(--oui-shadow-inset));
+
+	display: inline-flex;
+	flex-flow: row nowrap;
+	gap: 0.5em;
+	background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-1)), transparent 25%);
+	color: var(--oui-foreground, var(--oui-gray-8));
+	text-shadow: 0 1px 0 var(--oui-absolute);
+	line-height: 1.25;
+}
+
+@mixin badge-blue() {
+	--oui-background: var(--oui-blue-1);
+	--oui-foreground: var(--oui-blue-8);
+	--oui-shadow-value: var(--oui-blue-6);
+}
+
+@mixin badge-green() {
+	--oui-background: var(--oui-green-1);
+	--oui-foreground: var(--oui-green-8);
+	--oui-shadow-value: var(--oui-green-6);
+}
+
+@mixin badge-orange() {
+	--oui-background: var(--oui-orange-1);
+	--oui-foreground: var(--oui-orange-8);
+	--oui-shadow-value: var(--oui-orange-6);
+}
+
+@mixin badge-purple() {
+	--oui-background: var(--oui-purple-1);
+	--oui-foreground: var(--oui-purple-8);
+	--oui-shadow-value: var(--oui-purple-6);
+}
+
+@mixin badge-red() {
+	--oui-background: var(--oui-red-1);
+	--oui-foreground: var(--oui-red-8);
+	--oui-shadow-value: var(--oui-red-6);
+}
+
+@mixin badge-yellow() {
+	--oui-background: var(--oui-yellow-1);
+	--oui-foreground: var(--oui-yellow-8);
+	--oui-shadow-value: var(--oui-yellow-6);
+}