@oscarpalmer/oui 0.9.0 → 0.11.0

package/src/css/form.scss

@@ -1,5 +1,66 @@
+/*! https://github.com/oscarpalmer/oui */
+
 @use 'mixins.scss' as mixins;
 
+@mixin focus() {
+	--oui-border-value: var(--oui-blue-6);
+	--oui-foreground-value: inherit;
+	--oui-outline-percentage: 75%;
+	--oui-outline-value: var(--oui-blue-6);
+}
+
+@mixin hover() {
+	--oui-border-value: var(--oui-blue-4);
+	--oui-foreground-percentage: 50%;
+	--oui-foreground-value: inherit;
+	--oui-outline-percentage: 90%;
+	--oui-outline-value: var(--oui-blue-6);
+}
+
+@mixin input {
+	--oui-background-percentage: 0%;
+	--oui-foreground-percentage: 0%;
+
+	@include outlined;
+
+	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%);
+	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-foreground-value: var(--oui-red-9);
+	--oui-outline-percentage: 75%;
+	--oui-outline-value: var(--oui-red-6);
+}
+
+@mixin outlined {
+	--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: 0;
+	transition: 0.125s ease-in-out;
+}
+
+@mixin valid() {
+	--oui-border-value: var(--oui-green-6);
+	--oui-foreground-value: var(--oui-green-9);
+	--oui-outline-percentage: 75%;
+	--oui-outline-value: var(--oui-green-6);
+}
+
 :where(.oui-fieldset) {
 	padding: 1em;
 	border: 1px solid var(--oui-gray-3);
@@ -7,86 +68,267 @@
 }
 
 .oui-input {
-	:where(&) {
+	:where(&:not([type='range' i])) {
+		--oui-background-value: var(--oui-absolute);
+
+		@include input;
+
 		padding: 0.5em 0.75em;
-		outline: 3px solid transparent;
-		outline-offset: 0;
-		background-color: var(--oui-absolute);
-		border-color: var(--oui-gray-3);
 		border-radius: 0.25em;
-		box-shadow: inset 0 1px 2px 0
-			color-mix(in oklab, var(--oui-gray-10), transparent 80%);
-		transition: 0.125s ease-in-out;
 	}
 
-	:where(&:not(textarea)) {
+	:where(&:not([type='range' i], select[multiple], textarea)) {
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
 	}
 
-	:where(
-			&:is(
-					[type='date'],
-					[type='datetime-local'],
-					[type='month'],
-					[type='number'],
-					[type='tel'],
-					[type='time'],
-					[type='url'],
-					[type='week']
-				)
-		) {
+	:where(&:is([list])) {
+		&::-webkit-calendar-picker-indicator {
+			display: none !important;
+		}
+	}
+
+	:where(&:is([type='color' i])) {
+		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])) {
 		font-variant-numeric: tabular-nums;
 	}
 
-	:where(
-			&.oui-validateable:not([disabled], [aria-disabled='true']):is(
-					:user-invalid,
-					[aria-invalid='true']
-				)
-		) {
-		outline-color: color-mix(in oklab, var(--oui-red-6), transparent 60%);
-		border-color: var(--oui-red-6);
+	:where(&:is([type='file' i])) {
+		padding-left: .5em;
+
+		&::file-selector-button {
+			@include mixins.button;
+
+			--oui-outline-value: var(--oui-grey-6);
+
+			margin: 0 .75em 0 0;
+			font-size: .75em;
+			cursor: pointer;
+		}
 	}
 
-	:where(
-			&.oui-validateable:not([disabled], [aria-disabled='true']):is(
-					:user-valid,
-					[aria-invalid='false']
-				)
-		) {
-		outline-color: color-mix(in oklab, var(--oui-green-6), transparent 60%);
-		border-color: var(--oui-green-6);
+	:where(&:is([type='range' i])) {
+		appearance: none;
+		outline: none;
+
+		&::range-track {
+			@include input;
+
+			appearance: none;
+			width: 100%;
+			height: 0.75em;
+			border-radius: .75em;
+			position: relative;
+		}
+
+		&::range-thumb {
+			--oui-background-percentage: 0%;
+			--oui-background-value: var(--oui-blue-6);
+
+			@include outlined;
+
+			appearance: none;
+			width: 1.25em;
+			height: 1.25em;
+			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);
+			cursor: pointer;
+		}
+
+		&::-webkit-slider-thumb {
+			position: relative;
+			top: 50%;
+			transform: translateY(-50%);
+		}
+	}
+
+	:where(&.oui-validatable:not([disabled], [readonly], [aria-disabled='true' i]):is(:user-invalid, [aria-invalid='true' i])) {
+		@include invalid;
+
+		&::file-selector-button {
+			--oui-background-value: var(--oui-red-1);
+			--oui-foreground-value: var(--oui-red-8);
+			--oui-outline-value: var(--oui-red-6);
+		}
+
+		&::range-thumb {
+			--oui-background-value: var(--oui-red-6);
+		}
+
+		&::range-track {
+			@include invalid;
+		}
+	}
+
+	:where(&.oui-validatable:not([disabled], [readonly], [aria-disabled='true' i]):is(:user-valid, [aria-invalid='false' i])) {
+		@include valid;
+
+		&::file-selector-button {
+			--oui-background-value: var(--oui-green-1);
+			--oui-foreground-value: var(--oui-green-8);
+			--oui-outline-value: var(--oui-green-6);
+		}
+
+		&::range-track {
+			@include valid;
+		}
+
+		&::range-thumb {
+			--oui-background-value: var(--oui-green-6);
+		}
+	}
+
+	: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;
+			cursor: pointer;
+
+			@media (hover: hover) {
+				&:hover {
+					outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 75%);
+				}
+			}
+
+			&:focus {
+				outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 75%);
+			}
+		}
 	}
 
-	:where(&:not([disabled], [aria-disabled='true']):focus) {
-		outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 60%);
-		border-color: var(--oui-blue-6);
+	: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-foreground-value: var(--oui-blue-8);
+			--oui-outline-value: var(--oui-blue-6);
+		}
+
+		&::range-thumb,
+		&::range-track {
+			@include focus;
+		}
+
+		&::range-thumb {
+			--oui-background-value: var(--oui-blue-6);
+
+			box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.25);
+		}
 	}
 
 	@media (hover: hover) {
-		:where(&:not([disabled], [aria-disabled='true']):hover) {
-			outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
-			border-color: var(--oui-blue-6);
+		:where(&:not([disabled], [aria-disabled='true' i]):hover) {
+			@include hover;
+
+			&::file-selector-button {
+				--oui-background-value: var(--oui-blue-1);
+				--oui-foreground-value: var(--oui-blue-8);
+				--oui-outline-value: var(--oui-blue-6);
+			}
+
+			&::range-thumb {
+				--oui-background-value: var(--oui-blue-5);
+			}
+
+			&::range-track {
+				@include hover;
+			}
 		}
 	}
 
-	:where(&[readonly]) {
-		color: color-mix(in oklab, currentColor, transparent 12.5%);
+	:where(&[disabled], &[readonly], &[aria-disabled='true' i]) {
+		--oui-foreground-percentage: 25%;
+
+		font-style: italic;
 	}
 
-	:where(&[disabled], &[aria-disabled='true']) {
-		background-color: color-mix(in oklab, var(--oui-gray-0), transparent 50%);
-		color: color-mix(in oklab, currentColor, transparent 25%);
+	:where(&:is([disabled], [readonly], [aria-disabled='true' i]):focus) {
+		--oui-outline-percentage: 75%;
+	}
+
+	:where(&[disabled], &[aria-disabled='true' i]) {
+		--oui-background-percentage: 50%;
+
+		&::file-selector-button,
+		&::range-thumb {
+			--oui-background-value: var(--oui-gray-1);
+
+			cursor: default;
+		}
+
+		&::range-track {
+			--oui-background-percentage: 50%;
+			--oui-background-value: var(--oui-gray-0);
+		}
+
+		&::-webkit-calendar-picker-indicator {
+			color: red;
+			stroke: red;
+		}
 	}
 }
 
-:where(select.oui-input) {
+:where(select.oui-input, .oui-input[list]) {
 	padding-right: 2em;
 	background-position: right 0.5em center;
 }
 
+select.oui-input:is([multiple]) {
+	:where(&) {
+		--oui-off: attr(oui-off);
+		--oui-on: attr(oui-on, '\2713');
+
+		padding: 0;
+	}
+
+	:where(& > option) {
+		padding: 0.5em 0.75em;
+	}
+
+	:where(&[oui-off] > option) {
+		&::before {
+			content: var(--oui-off);
+			margin: 0 0.75em 0 0;
+		}
+	}
+
+	:where(& > option:nth-of-type(2n)) {
+		background-color: color-mix(in oklab, var(--oui-blue-0), transparent 33%);
+	}
+
+	:where(& > option:checked) {
+		background-color: var(--oui-blue-2);
+		color: var(--oui-blue-9);
+
+		&::before {
+			content: var(--oui-on);
+			margin: 0 .75em 0 0;
+		}
+	}
+}
+
 :where(textarea.oui-input) {
 	min-height: 4em;
 	resize: vertical;
@@ -100,6 +342,13 @@
 
 :where(.oui-label) {
 	cursor: pointer;
+	transition: .125s ease-in-out;
+
+	@media (hover: hover) {
+		:where(&[for]:hover) {
+			color: var(--oui-blue-8);
+		}
+	}
 }
 
 :where(.oui-legend) {
@@ -109,11 +358,22 @@
 }
 
 :where(.oui-switch, .oui-toggle) {
+	--oui-background-percentage: 50%;
+	--oui-background-value: var(--oui-gray-1);
+	--oui-border-value: var(--oui-gray-3);
+	--oui-foreground-percentage: 0%;
+	--oui-foreground-value: var(--oui-gray-8);
+	--oui-outline-percentage: 100%;
+	--oui-outline-value: var(--oui-blue-6);
+	--oui-shadow-percentage: 85%;
+	--oui-shadow-value: var(--oui-gray-10);
+
 	position: relative;
 	cursor: pointer;
 
 	&::before,
 	&::after {
+		display: inline-block;
 		font-family: system-ui, sans-serif;
 		position: absolute;
 		transition: 0.125s ease-in-out;
@@ -121,8 +381,19 @@
 	}
 
 	&::before {
-		outline: 3px solid transparent;
+		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(
+			in oklab,
+			var(--oui-outline-value),
+			transparent var(--oui-outline-percentage)
+		);
 		outline-offset: 0;
+		border: 1px solid var(--oui-border-value);
+	}
+
+	&::after {
+		color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
 	}
 }
 
@@ -134,21 +405,17 @@
 			content: '';
 			width: 2.5em;
 			height: 1.5em;
-			display: inline-block;
-			background-color: var(--oui-gray-0);
-			border: 1px solid var(--oui-gray-3);
 			border-radius: 3em;
 			right: 0;
 		}
 
 		&::after {
-			content: '\2715';
+			content: attr(oui-off, '\2715');
 			width: 1.5em;
 			height: 1.5em;
 			background-color: var(--oui-absolute);
 			border-radius: 1.5em;
 			box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.125);
-			color: var(--oui-gray-8);
 			font-size: 0.75em;
 			font-weight: bold;
 			line-height: 1.5em;
@@ -159,10 +426,12 @@
 	}
 
 	:where(&:has(input:checked)) {
+		--oui-foreground-percentage: 0%;
+		--oui-foreground-value: var(--oui-blue-8);
+
 		&::after {
-			content: '\2713';
+			content: attr(oui-on, '\2713');
 			box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25);
-			color: var(--oui-blue-8);
 			right: 0.25em;
 		}
 	}
@@ -170,15 +439,15 @@
 
 .oui-toggle {
 	:where(&) {
+		--oui-background-percentage: 100%;
+		--oui-border-value: var(--oui-gray-4);
+
 		padding: 0 0 0 2em;
 
 		&::before {
 			content: '';
 			width: 1.5em;
 			height: 1.5em;
-			display: inline-block;
-			background-color: transparent;
-			border: 1px solid var(--oui-gray-4);
 			inset: 0 auto auto 0;
 		}
 
@@ -187,16 +456,18 @@
 		}
 	}
 
-	:where(&:has(input[type='checkbox'])) {
+	:where(&:has(input[type='checkbox' i])) {
+		--oui-foreground-percentage: 0%;
+		--oui-foreground-value: white;
+
 		&::before {
 			border-radius: 0.25em;
 		}
 
 		&::after {
-			content: '\2713';
+			content: attr(oui-on, '\2713');
 			width: 1.5em;
 			height: 1.5em;
-			color: white;
 			text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 			font-weight: bold;
 			line-height: 1.5em;
@@ -205,7 +476,9 @@
 		}
 	}
 
-	:where(&:has(input[type='radio'])) {
+	:where(&:has(input[type='radio' i])) {
+		position: relative;
+
 		&::before,
 		&::after {
 			border-radius: 50%;
@@ -231,52 +504,53 @@
 .oui-switch,
 .oui-toggle {
 	:where(&:has(input:checked)) {
-		&::before {
-			background-color: var(--oui-blue-6);
-			border-color: transparent;
-		}
+		--oui-background-percentage: 25%;
+		--oui-background-value: var(--oui-blue-6);
+		--oui-border-value: var(--oui-blue-6);
+		--oui-shadow-percentage: 50%;
+		--oui-shadow-value: var(--oui-blue-8);
 	}
 
-	:where(&:has(input:not([disabled], [aria-disabled='true'])):focus-within) {
+	:where(&:focus-within) {
+		--oui-border-value: var(--oui-blue-6);
+		--oui-outline-percentage: 75%;
+
 		color: var(--oui-blue-8);
+	}
 
-		&::before {
-			outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 60%);
-			border-color: var(--oui-absolute);
-		}
+	:where(&:has(input:not([disabled], [aria-disabled='true' i])):focus-within) {
+		--oui-background-percentage: 50%;
 	}
 
 	@media (hover: hover) {
-		:where(&:has(input:not([disabled], [aria-disabled='true'])):hover) {
-			color: var(--oui-blue-8);
+		:where(&:has(input:not([disabled], [aria-disabled='true' i])):hover) {
+			--oui-border-value: var(--oui-blue-4);
+			--oui-outline-percentage: 90%;
+			--oui-outline-value: var(--oui-blue-6);
 
-			&::before {
-				outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
-				border-color: var(--oui-blue-6);
-			}
+			color: var(--oui-blue-8);
 		}
 
-		:where(
-				&:has(input:not([disabled], [aria-disabled='true']):is(:checked)):hover
-			)::before {
-			background-color: color-mix(in oklab, var(--oui-blue-6), transparent 40%);
+		:where(&:has(input:not([disabled], [aria-disabled='true' i]):is(:checked)):hover) {
+			--oui-background-percentage: 50%;
+			--oui-background-value: var(--oui-blue-6);
 		}
 	}
 
-	:where(&:has(input[disabled], input[aria-disabled='true'])) {
-		cursor: default;
-
-		& {
-			color: color-mix(in oklab, currentColor, transparent 25%);
-		}
+	:where(&:has(input[disabled], input[aria-disabled='true' i])) {
+		--oui-background-percentage: 50%;
+		--oui-background-value: var(--oui-gray-0);
+		--oui-border-value: var(--oui-gray-3);
+		--oui-foreground-percentage: 25%;
+		--oui-foreground-value: currentColor;
 
-		&::after {
-			color: color-mix(in oklab, currentColor, transparent);
-		}
+		color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
+		font-style: italic;
+		cursor: default;
 
+		&::after,
 		&::before {
-			background-color: color-mix(in oklab, var(--oui-gray-0), transparent 50%);
-			border-color: var(--oui-gray-3);
+			font-style: normal;
 		}
 
 		&::after {

package/src/css/message.scss

@@ -1,13 +1,26 @@
+/*! https://github.com/oscarpalmer/oui */
+
 .oui-message {
 	:where(&) {
+		--oui-shadow-value: color-mix(
+			in oklch,
+			var(--oui-shadow, var(--oui-gray-6)),
+			transparent 95%
+		);
+
 		padding: 1em;
 		display: inline-flex;
 		flex-flow: column nowrap;
 		gap: 1em;
-		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-gray-8));
+		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;
 	}
 
@@ -19,7 +32,7 @@
 	:where(& hr) {
 		height: 1px;
 		margin: 0 -1em;
-		background-color: var(--border, var(--oui-gray-2));
+		background-color: var(--oui-shadow-value, var(--oui-gray-2));
 		border: none;
 	}
 
@@ -30,38 +43,38 @@
 	}
 
 	:where(&-blue, &-info) {
-		--background: var(--oui-blue-0);
-		--border: var(--oui-blue-2);
-		--foreground: var(--oui-blue-8);
+		--oui-background: var(--oui-blue-0);
+		--oui-foreground: var(--oui-blue-8);
+		--oui-shadow: var(--oui-blue-6);
 	}
 
 	:where(&-green, &-success) {
-		--background: var(--oui-green-0);
-		--border: var(--oui-green-2);
-		--foreground: var(--oui-green-8);
+		--oui-background: var(--oui-green-0);
+		--oui-foreground: var(--oui-green-8);
+		--oui-shadow: var(--oui-green-6);
 	}
 
 	:where(&-orange, &-warning) {
-		--background: var(--oui-orange-0);
-		--border: var(--oui-orange-2);
-		--foreground: var(--oui-orange-8);
+		--oui-background: var(--oui-orange-0);
+		--oui-foreground: var(--oui-orange-8);
+		--oui-shadow: var(--oui-orange-6);
 	}
 
 	:where(&-purple, &-special) {
-		--background: var(--oui-purple-0);
-		--border: var(--oui-purple-2);
-		--foreground: var(--oui-purple-8);
+		--oui-background: var(--oui-purple-0);
+		--oui-foreground: var(--oui-purple-8);
+		--oui-shadow: var(--oui-purple-6);
 	}
 
 	:where(&-red, &-error) {
-		--background: var(--oui-red-0);
-		--border: var(--oui-red-2);
-		--foreground: var(--oui-red-8);
+		--oui-background: var(--oui-red-0);
+		--oui-foreground: var(--oui-red-8);
+		--oui-shadow: var(--oui-red-6);
 	}
 
 	:where(&-yellow, &-notice) {
-		--background: var(--oui-yellow-0);
-		--border: var(--oui-yellow-2);
-		--foreground: var(--oui-yellow-8);
+		--oui-background: var(--oui-yellow-0);
+		--oui-foreground: var(--oui-yellow-8);
+		--oui-shadow: var(--oui-yellow-6);
 	}
 }