@oscarpalmer/oui 0.37.0 → 0.38.0

package/src/css/color-picker.scss

@@ -0,0 +1,344 @@
+/*! https://github.com/oscarpalmer/oui */
+
+@use './mixins/button.mixins.scss' as buttonMixins;
+@use './mixins/input.mixins.scss' as inputMixins;
+@use './mixins/misc.mixins.scss' as miscMixins;
+@use './mixins/shadow.mixins.scss' as shadowMixins;
+
+oui-color-picker {
+	:where(&) {
+		outline: none;
+	}
+}
+
+:where(
+	oui-color-picker[inline] [oui-color-picker-content],
+	[oui-color-picker-content]:popover-open
+) {
+	display: flex !important;
+	flex-flow: column nowrap;
+}
+
+:where(
+	oui-color-picker[inline] [oui-color-picker-content],
+	[oui-color-picker-hue],
+	[oui-color-picker-opacity]
+) {
+	margin: 1em 0 0;
+}
+
+[oui-color-picker-anchor] {
+	:where(&) {
+		display: flex;
+		flex-flow: row nowrap;
+		align-items: stretch;
+	}
+
+	& * {
+		:where(&) {
+			position: relative;
+		}
+
+		:where(&:focus) {
+			z-index: 1;
+		}
+
+		@media (hover: hover) {
+			:where(&:hover) {
+				z-index: 1;
+			}
+		}
+	}
+}
+
+[oui-color-picker-button] {
+	:where(&) {
+		@include buttonMixins.button;
+		@include shadowMixins.shadow-1(var(--oui-shadow-value));
+
+		--oui-background-value: var(--oui-color-picker-hex);
+		--oui-outline-value: var(--oui-gray-6);
+
+		width: 2.5em;
+		margin: 1px 0;
+		border: 2px solid var(--oui-absolute);
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+		position: relative;
+
+		&::after {
+			display: none;
+			color: var(--oui-color-picker-foreground);
+			font-size: 8px;
+			position: absolute;
+			inset: 50% auto auto 50%;
+			transform: translate3d(-50%, -50%, 0);
+		}
+
+		&[aria-expanded='false' i]::after {
+			content: '▶';
+			display: inline-flex;
+		}
+
+		&[aria-expanded='true' i]::after {
+			content: '▼';
+			display: inline-flex;
+		}
+	}
+
+	:where(&:active) {
+		scale: 1;
+	}
+}
+
+[oui-color-picker-content] {
+	&[popover] {
+		:where(&) {
+			@include miscMixins.floatable;
+			@include shadowMixins.shadow-5;
+
+			min-width: anchor-size(width);
+			border-radius: 0.25em;
+		}
+
+		:where(&:not(:has(> [oui-color-picker-opacity]))) {
+			border-radius: 0.25em 0.25em 0.75em 0.75em;
+		}
+
+		:where(
+			[oui-color-picker-content],
+			[oui-color-picker-hue],
+			[oui-color-picker-opacity],
+			[oui-color-picker-well]
+		) {
+			margin: 1em 1em 0;
+		}
+
+		:where(& > :last-child) {
+			margin-bottom: 1em !important;
+		}
+	}
+}
+
+:where([oui-color-picker-hue], [oui-color-picker-opacity]) {
+	position: relative;
+}
+
+:where([oui-color-picker-hue-input], [oui-color-picker-opacity-input]) {
+	opacity: 0;
+	position: absolute;
+	inset: -0.25em -0.75em;
+	z-index: 1;
+}
+
+:where([oui-color-picker-hue-label], [oui-color-picker-opacity-label]) {
+	display: none;
+}
+
+:where([oui-color-picker-hue-knob]),
+:where([oui-color-picker-hue-track]),
+:where([oui-color-picker-opacity-knob]),
+:where([oui-color-picker-opacity-track]),
+:where([oui-color-picker-well-knob]) {
+	--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));
+	transition: outline 0.125s ease-in-out;
+}
+
+:where([oui-color-picker-hue-knob]),
+:where([oui-color-picker-opacity-knob]),
+:where([oui-color-picker-well-knob]) {
+	@include shadowMixins.shadow-5(rgb(0 0 0 / 6.25%));
+
+	width: 1.5em;
+	height: 1.5em;
+	border: 0.3333em solid var(--oui-absolute);
+	border-radius: 1.5em;
+	position: absolute;
+	z-index: 1;
+}
+
+:where([oui-color-picker-hue-knob]),
+:where([oui-color-picker-well-knob]) {
+	background-color: var(--oui-color-picker-hex);
+}
+
+:where([oui-color-picker-hue-knob]),
+:where([oui-color-picker-opacity-knob]) {
+	transform: translate3d(-50%, -0.25em, 0);
+}
+
+:where([oui-color-picker-hue-knob]) {
+	inset: 0 0 0 calc((var(--oui-color-picker-hue) / 360) * 100%);
+	pointer-events: none;
+}
+
+:where([oui-color-picker-hue-track]),
+:where([oui-color-picker-opacity-track]),
+:where([oui-color-picker-well]) {
+	box-shadow:
+		inset 0 0 0 1px rgb(0 0 0 / 5%),
+		inset 0 1px 2px -0.5px rgb(0 0 0 / 5%),
+		inset 0 2px 4px -1px rgb(0 0 0 / 5%),
+		inset 0 4px 8px -2px rgb(0 0 0 / 5%);
+}
+
+:where([oui-color-picker-hue-track]),
+:where([oui-color-picker-opacity-track]) {
+	height: 1em;
+	border: 1px solid transparent;
+	border-radius: 1em;
+	pointer-events: none;
+}
+
+:where([oui-color-picker-hue-track]) {
+	background-image: linear-gradient(
+		to right,
+		hsl(0deg 100% 50%) 0%,
+		hsl(60deg 100% 50%) 16.6667%,
+		hsl(120deg 100% 50%) 33.3333%,
+		hsl(180deg 100% 50%) 50%,
+		hsl(240deg 100% 50%) 66.6667%,
+		hsl(300deg 100% 50%) 83.3333%,
+		hsl(360deg 100% 50%) 100%
+	);
+}
+
+[oui-color-picker-hue-input]:focus-visible + [oui-color-picker-hue-track],
+[oui-color-picker-opacity-input]:focus-visible + [oui-color-picker-opacity-track] {
+	:where(&, & [oui-color-picker-hue-knob], & [oui-color-picker-opacity-knob]) {
+		--oui-outline-percentage: 75%;
+	}
+
+	:where(&) {
+		border-color: var(--oui-absolute);
+	}
+}
+
+[oui-color-picker-input] {
+	:where(&) {
+		@include inputMixins.input;
+
+		--oui-background-value: var(--oui-absolute);
+
+		padding: 0.5em 0.75em;
+		border-radius: 0.25em;
+		font-family: monospace, monospace;
+	}
+
+	:where(&:has(+ button)) {
+		border-radius: 0.25em 0 0 0.25em;
+	}
+
+	:where(&:is([disabled], [aria-disabled='true' i])) {
+		--oui-background-percentage: 50%;
+	}
+}
+
+:where([oui-color-picker-opacity-knob]) {
+	background-color: var(--oui-absolute);
+	background-image: linear-gradient(
+		to right,
+		color-mix(
+				in oklab,
+				var(--oui-color-picker-hex),
+				transparent calc((100 - var(--oui-color-picker-alpha)) * 1%)
+			)
+			0%,
+		color-mix(
+				in oklab,
+				var(--oui-color-picker-hex),
+				transparent calc((100 - var(--oui-color-picker-alpha)) * 1%)
+			)
+			100%
+	);
+	inset: 0 0 0 calc(var(--oui-color-picker-alpha) * 1%);
+}
+
+:where([oui-color-picker-opacity-track]) {
+	background-color: var(--oui-absolute);
+	background-image: linear-gradient(
+		to right,
+		transparent 0%,
+		hsl(var(--oui-color-picker-hue) 100% 50%) 100%
+	);
+	position: relative;
+
+	&::after {
+		content: '';
+		background-image:
+			linear-gradient(45deg, rgb(0 0 0 / 10%) 25%, transparent 25%),
+			linear-gradient(135deg, rgb(0 0 0 / 10%) 25%, transparent 25%),
+			linear-gradient(45deg, transparent 75%, rgb(0 0 0 / 10%) 75%),
+			linear-gradient(135deg, transparent 75%, rgb(0 0 0 / 10%) 75%);
+		background-size: 0.5em 0.5em;
+		background-position:
+			0 0,
+			0.25em 0,
+			0.25em -0.25em,
+			0 0.25em;
+		border-radius: 1em;
+		position: absolute;
+		inset: 0;
+	}
+}
+
+[oui-color-picker-well] {
+	:where(&) {
+		--oui-outline-percentage: 100%;
+		--oui-outline-value: var(--oui-blue-6);
+
+		padding: 100% 0 0;
+		background-color: hsl(var(--oui-color-picker-hue) 100% 50%);
+		background-image:
+			linear-gradient(
+				to bottom,
+				hsl(0deg 0% 100%) 0%,
+				hsl(0deg 0% 100% / 0%) 50%,
+				hsl(0deg 0% 0% / 0%) 50%,
+				hsl(0deg 0% 0%) 100%
+			),
+			linear-gradient(to right, hsl(0deg 0% 50%) 0%, hsl(0deg 0% 50% / 0%) 100%);
+		outline: 4px solid
+			color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
+		outline-offset: 4px;
+		border-radius: 0.125em;
+		position: relative;
+		transition: outline 0.125s ease-in-out;
+	}
+
+	:where(&:has(:focus-visible)) {
+		--oui-outline-percentage: 75%;
+	}
+
+	@media (hover: hover) {
+		:where(&:hover) {
+			--oui-outline-percentage: 75%;
+		}
+	}
+}
+
+[oui-color-picker-well-knob] {
+	:where(&) {
+		--oui-outline-value: var(--oui-absolute);
+
+		outline-offset: 2px;
+		inset: calc((100 - var(--oui-color-picker-lightness)) * 1%) 0 0
+			calc(var(--oui-color-picker-saturation) * 1%);
+		transform: translate3d(-50%, -50%, 0);
+		cursor: move;
+	}
+
+	:where(&:focus-visible) {
+		--oui-outline-percentage: 33.3333%;
+	}
+
+	@media (hover: hover) {
+		:where(&:hover) {
+			--oui-outline-percentage: 33.3333%;
+		}
+	}
+}

package/src/css/color.scss

@@ -1,7 +1,5 @@
 /*! https://github.com/oscarpalmer/oui */
 
-@use './mixins' as mixins;
-
 :root {
 	--oui-absolute: light-dark(white, black);
 

package/src/css/combobox.scss

@@ -1,10 +1,13 @@
 /*! 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;
+@use './mixins/shadow.mixins.scss' as shadowMixins;
 
 [oui-combobox-anchor] {
 	:where(&) {
-		@include mixins.input;
+		@include inputMixins.input;
 
 		--oui-background-value: var(--oui-absolute);
 
@@ -19,12 +22,12 @@
 
 	&:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) {
 		:where(&:focus-visible, &:focus-within, &:has(+ [oui-combobox-content]:focus-within)) {
-			@include mixins.input-focus;
+			@include inputMixins.input-focus;
 		}
 
 		@media (hover: hover) {
 			:where(&:hover) {
-				@include mixins.input-hover;
+				@include inputMixins.input-hover;
 			}
 		}
 	}
@@ -58,8 +61,8 @@
 }
 
 :where([oui-combobox-content]) {
-	@include mixins.floatable;
-	@include mixins.shadow-5;
+	@include miscMixins.floatable;
+	@include shadowMixins.shadow-5;
 
 	width: fit-content;
 	height: fit-content;
@@ -95,7 +98,7 @@
 }
 
 :where([oui-combobox-filter-input]) {
-	@include mixins.input;
+	@include inputMixins.input;
 
 	--oui-background-value: var(--oui-absolute);
 	--oui-border-value: var(--oui-yellow-3);
@@ -118,7 +121,7 @@
 }
 
 :where([oui-combobox-hidden]) {
-	@include mixins.visually-hidden;
+	@include miscMixins.visually-hidden;
 
 	position: absolute;
 }
@@ -184,7 +187,7 @@
 
 [oui-combobox-selection-item] {
 	:where(&) {
-		@include mixins.button;
+		@include buttonMixins.button;
 
 		--oui-background-value: var(--oui-blue-2);
 		--oui-foreground-value: var(--oui-blue-8);

package/src/css/content.scss

@@ -1,9 +1,10 @@
 /*! https://github.com/oscarpalmer/oui */
 
-@use './mixins' as mixins;
+@use './mixins/misc.mixins.scss' as miscMixins;
+@use './mixins/shadow.mixins.scss' as shadowMixins;
 
 @mixin thumb($background, $shadow) {
-	@include mixins.shadow-0(
+	@include shadowMixins.shadow-0(
 		color-mix(in oklab, $shadow, transparent 33%),
 		color-mix(in oklab, var(--oui-absolute), transparent 82.5%)
 	);
@@ -28,7 +29,7 @@
 
 .oui-card {
 	:where(&) {
-		@include mixins.card;
+		@include miscMixins.card;
 	}
 }
 
@@ -85,7 +86,7 @@
 
 .oui-formatted {
 	:where(&) {
-		@include mixins.card;
+		@include miscMixins.card;
 
 		color: var(--oui-gray-8);
 		font-family: monospace, monospace;
@@ -155,26 +156,26 @@
 .oui-shadow {
 	:where(&),
 	:where(&-0) {
-		@include mixins.shadow-0;
+		@include shadowMixins.shadow-0;
 	}
 
 	:where(&-1) {
-		@include mixins.shadow-1;
+		@include shadowMixins.shadow-1;
 	}
 
 	:where(&-2) {
-		@include mixins.shadow-2;
+		@include shadowMixins.shadow-2;
 	}
 
 	:where(&-3) {
-		@include mixins.shadow-3;
+		@include shadowMixins.shadow-3;
 	}
 
 	:where(&-4) {
-		@include mixins.shadow-4;
+		@include shadowMixins.shadow-4;
 	}
 
 	:where(&-5) {
-		@include mixins.shadow-5;
+		@include shadowMixins.shadow-5;
 	}
 }

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-5;
+	@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]) {

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;
@@ -79,7 +81,7 @@
 		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);
@@ -96,7 +98,7 @@
 		outline: none;
 
 		&::range-track {
-			@include mixins.input;
+			@include inputMixins.input;
 
 			appearance: none;
 			width: 100%;
@@ -109,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;
@@ -153,7 +155,7 @@
 		}
 
 		&::range-track {
-			@include mixins.input-invalid;
+			@include inputMixins.input-invalid;
 		}
 
 		& > option:checked {
@@ -179,7 +181,7 @@
 		}
 
 		&::range-track {
-			@include mixins.input-valid;
+			@include inputMixins.input-valid;
 		}
 
 		&::range-thumb {
@@ -202,7 +204,7 @@
 
 			&::range-thumb,
 			&::range-track {
-				@include mixins.input-focus;
+				@include inputMixins.input-focus;
 			}
 
 			&::range-thumb {
@@ -225,7 +227,7 @@
 				}
 
 				&::range-track {
-					@include mixins.input-hover;
+					@include inputMixins.input-hover;
 				}
 			}
 		}
@@ -569,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);
 
@@ -58,7 +59,7 @@
 }
 
 :where([oui-listbox-hidden]) {
-	@include mixins.visually-hidden;
+	@include miscMixins.visually-hidden;
 
 	position: absolute;
 }

package/src/css/message.scss

@@ -1,6 +1,7 @@
 /*! 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(&) {
@@ -13,7 +14,7 @@
 			transparent 92.5%
 		);
 
-		@include mixins.card(
+		@include miscMixins.card(
 			color-mix(in oklab, var(--oui-background), transparent 25%),
 			var(--oui-shadow-mixed)
 		);
@@ -48,26 +49,26 @@
 	}
 
 	:where(&--blue, &--info) {
-		@include mixins.message-blue;
+		@include messageMixins.message-blue;
 	}
 
 	:where(&--green, &--success) {
-		@include mixins.message-green;
+		@include messageMixins.message-green;
 	}
 
 	:where(&--orange, &--warning) {
-		@include mixins.message-orange;
+		@include messageMixins.message-orange;
 	}
 
 	:where(&--purple, &--special) {
-		@include mixins.message-purple;
+		@include messageMixins.message-purple;
 	}
 
 	:where(&--red, &--error) {
-		@include mixins.message-red;
+		@include messageMixins.message-red;
 	}
 
 	:where(&--yellow, &--notice) {
-		@include mixins.message-yellow;
+		@include messageMixins.message-yellow;
 	}
 }