@oscarpalmer/oui 0.37.0 → 0.38.0

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);
+}

package/src/css/mixins/button.mixins.scss

@@ -0,0 +1,112 @@
+@use './shadow.mixins.scss' as shadowMixins;
+
+@mixin button() {
+	--oui-background-percentage: 25%;
+	--oui-background-value: var(--oui-gray-2);
+	--oui-foreground-percentage: 0%;
+	--oui-foreground-value: var(--oui-gray-8);
+	--oui-outline-percentage: 100%;
+	--oui-outline-value: var(--oui-gray-6);
+	--oui-shadow-inset: color-mix(in oklab, var(--oui-absolute), transparent 75%);
+	--oui-shadow-percentage: 82.5%;
+
+	--oui-shadow-value: color-mix(
+		in oklab,
+		var(--oui-outline-value),
+		transparent var(--oui-shadow-percentage)
+	);
+
+	@include shadowMixins.shadow-2(var(--oui-shadow-value), var(--oui-shadow-inset));
+
+	padding: 0.5em 0.75em;
+	display: inline-flex;
+	flex-flow: row wrap;
+	gap: 0.75em;
+	align-items: center;
+	border-radius: 0.25em;
+	background-color: color-mix(
+		in oklab,
+		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));
+	border: none;
+	color: color-mix(
+		in oklab,
+		var(--oui-foreground-value),
+		transparent var(--oui-foreground-percentage)
+	);
+	line-height: 1.25;
+	transition: 0.125s ease-in-out;
+	transition-property: background, outline, box-shadow, color;
+
+	&:focus-visible {
+		--oui-outline-percentage: 75%;
+	}
+
+	@media (hover: hover) {
+		&:not([disabled], [aria-disabled='true' i]):hover {
+			--oui-background-percentage: 50%;
+			--oui-foreground-percentage: 25%;
+			--oui-shadow-percentage: 90%;
+		}
+	}
+
+	&:not([disabled], [aria-disabled='true' i]):active {
+		box-shadow:
+			0 0 0 1px var(--oui-shadow-value),
+			inset 0 1px 2px 0 var(--oui-shadow-value),
+			inset 0 2px 4px 0 var(--oui-shadow-value);
+		scale: 0.95;
+
+		&[aria-pressed='true' i], &[aria-selected='true' i] {
+			scale: 1;
+		}
+	}
+
+	&[disabled],
+	&[aria-disabled='true' i] {
+		--oui-background-percentage: 80%;
+		--oui-foreground-percentage: 25%;
+		--oui-shadow-percentage: 92.5%;
+
+		font-style: italic;
+	}
+}
+
+@mixin button-blue() {
+	--oui-background-value: var(--oui-blue-3);
+	--oui-foreground-value: var(--oui-blue-8);
+	--oui-outline-value: var(--oui-blue-6);
+}
+
+@mixin button-green() {
+	--oui-background-value: var(--oui-green-3);
+	--oui-foreground-value: var(--oui-green-8);
+	--oui-outline-value: var(--oui-green-6);
+}
+
+@mixin button-orange() {
+	--oui-background-value: var(--oui-orange-3);
+	--oui-foreground-value: var(--oui-orange-8);
+	--oui-outline-value: var(--oui-orange-6);
+}
+
+@mixin button-purple() {
+	--oui-background-value: var(--oui-purple-3);
+	--oui-foreground-value: var(--oui-purple-8);
+	--oui-outline-value: var(--oui-purple-6);
+}
+
+@mixin button-red() {
+	--oui-background-value: var(--oui-red-3);
+	--oui-foreground-value: var(--oui-red-8);
+	--oui-outline-value: var(--oui-red-6);
+}
+
+@mixin button-yellow() {
+	--oui-background-value: var(--oui-yellow-3);
+	--oui-foreground-value: var(--oui-yellow-8);
+	--oui-outline-value: var(--oui-yellow-6);
+}

package/src/css/mixins/input.mixins.scss

@@ -0,0 +1,114 @@
+@mixin input {
+	@include input-outlined;
+
+	--oui-background-percentage: 0%;
+	--oui-foreground-percentage: 0%;
+
+	align-content: center;
+	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 2px 4px -1px var(--oui-gray-3);
+	color: color-mix(
+		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)
+	);
+	transition: 0.125s ease-in-out;
+	transition-property: background, outline, border, box-shadow, color;
+
+	&.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 input-invalid;
+	}
+
+	&.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 input-valid;
+	}
+
+	&:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) {
+		&:focus-visible,
+		&:focus-within {
+			@include input-focus;
+		}
+
+		@media (hover: hover) {
+			&:hover {
+				@include input-hover;
+			}
+		}
+	}
+
+	&:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) {
+		--oui-foreground-percentage: 25%;
+
+		font-style: italic;
+	}
+
+	&:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]):focus-visible {
+		--oui-outline-percentage: 75%;
+	}
+
+	&:is([disabled], [aria-disabled='true' i]) {
+		--oui-background-percentage: 50%;
+	}
+}
+
+@mixin input-focus() {
+	--oui-border-value: var(--oui-blue-5);
+	--oui-foreground-value: inherit;
+	--oui-outline-percentage: 75%;
+	--oui-outline-value: var(--oui-blue-6);
+}
+
+@mixin input-hover() {
+	--oui-border-value: var(--oui-blue-4);
+	--oui-foreground-percentage: 0%;
+	--oui-foreground-value: inherit;
+	--oui-outline-percentage: 90%;
+	--oui-outline-value: var(--oui-blue-6);
+}
+
+@mixin input-invalid() {
+	--oui-border-value: var(--oui-red-5);
+	--oui-foreground-value: var(--oui-red-9);
+	--oui-outline-percentage: 82.5%;
+	--oui-outline-value: var(--oui-red-6);
+}
+
+@mixin input-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;
+}
+
+@mixin input-valid() {
+	--oui-border-value: var(--oui-green-5);
+	--oui-foreground-value: var(--oui-green-9);
+	--oui-outline-percentage: 82.5%;
+	--oui-outline-value: var(--oui-green-6);
+}

package/src/css/mixins/message.mixins.scss

@@ -0,0 +1,41 @@
+@mixin message-blue() {
+	--oui-background: var(--oui-blue-1);
+	--oui-border: var(--oui-blue-2);
+	--oui-foreground: var(--oui-blue-8);
+	--oui-shadow-value: var(--oui-blue-6);
+}
+
+@mixin message-green() {
+	--oui-background: var(--oui-green-1);
+	--oui-border: var(--oui-green-2);
+	--oui-foreground: var(--oui-green-8);
+	--oui-shadow-value: var(--oui-green-6);
+}
+
+@mixin message-orange() {
+	--oui-background: var(--oui-orange-1);
+	--oui-border: var(--oui-orange-2);
+	--oui-foreground: var(--oui-orange-8);
+	--oui-shadow-value: var(--oui-orange-6);
+}
+
+@mixin message-purple() {
+	--oui-background: var(--oui-purple-1);
+	--oui-border: var(--oui-purple-2);
+	--oui-foreground: var(--oui-purple-8);
+	--oui-shadow-value: var(--oui-purple-6);
+}
+
+@mixin message-red() {
+	--oui-background: var(--oui-red-1);
+	--oui-border: var(--oui-red-2);
+	--oui-foreground: var(--oui-red-8);
+	--oui-shadow-value: var(--oui-red-6);
+}
+
+@mixin message-yellow() {
+	--oui-background: var(--oui-yellow-1);
+	--oui-border: var(--oui-yellow-2);
+	--oui-foreground: var(--oui-yellow-8);
+	--oui-shadow-value: var(--oui-yellow-6);
+}

package/src/css/mixins/misc.mixins.scss

@@ -0,0 +1,48 @@
+@use './shadow.mixins.scss' as shadowMixins;
+
+@mixin card(
+	$backgroundColor: var(--oui-absolute),
+	$boxShadowColor: color-mix(in oklab, var(--oui-gray-6), transparent 92.5%)
+) {
+	@include shadowMixins.shadow-1($boxShadowColor);
+
+	padding: 1em 1.25em;
+	background-color: $backgroundColor;
+	border-radius: 0.5em;
+}
+
+@mixin floatable() {
+	--margin-bottom: 0.5em;
+	--margin-left: 0.5em;
+	--margin-right: 0.5em;
+	--margin-top: 0.5em;
+
+	inset-block: var(--margin-top) var(--margin-bottom);
+	inset-inline: var(--margin-left) var(--margin-right);
+
+	&[oui-position$='bottom' i] {
+		--margin-bottom: 0;
+	}
+
+	&[oui-position$='end' i] {
+		--margin-right: 0;
+	}
+
+	&[oui-position$='start' i] {
+		--margin-left: 0;
+	}
+
+	&[oui-position$='top' i] {
+		--margin-top: 0;
+	}
+}
+
+@mixin visually-hidden() {
+	width: 1px !important;
+	height: 1px !important;
+	padding: 0 !important;
+	clip-path: inset(50%) !important;
+	overflow: hidden !important;
+	border: 0 !important;
+	white-space: nowrap !important;
+}

package/src/css/mixins/shadow.mixins.scss

@@ -0,0 +1,57 @@
+@mixin shadow-0($color: rgb(0 0 0 / 5%), $inset: transparent) {
+	box-shadow:
+		inset 0 1px 0 0 $inset,
+		0 0 0 1px $color,
+		0 1px 2px -0.5px $color;
+}
+
+@mixin shadow-1($color: rgb(0 0 0 / 5%), $inset: transparent) {
+	box-shadow:
+		inset 0 1px 0 0 $inset,
+		0 0 0 1px $color,
+		0 1px 2px -0.5px $color,
+		0 2px 4px -1px $color;
+}
+
+@mixin shadow-2($color: rgb(0 0 0 / 5%), $inset: transparent) {
+	box-shadow:
+		inset 0 1px 0 0 $inset,
+		0 0 0 1px $color,
+		0 1px 2px -0.5px $color,
+		0 2px 4px -1px $color,
+		0 4px 8px -2px $color;
+}
+
+@mixin shadow-3($color: rgb(0 0 0 / 5%), $inset: transparent) {
+	box-shadow:
+		inset 0 1px 0 0 $inset,
+		0 0 0 1px $color,
+		0 1px 2px -0.5px $color,
+		0 2px 4px -1px $color,
+		0 4px 8px -2px $color,
+		0 8px 16px -4px $color;
+}
+
+@mixin shadow-4($color: rgb(0 0 0 / 5%), $inset: transparent) {
+	box-shadow:
+		inset 0 1px 0 0 $inset,
+		0 0 0 1px $color,
+		0 1px 2px -0.5px $color,
+		0 2px 4px -1px $color,
+		0 4px 8px -2px $color,
+		0 8px 16px -4px $color,
+		0 16px 32px -8px $color;
+}
+
+@mixin shadow-5($color: rgb(0 0 0 / 5%), $inset: transparent) {
+	box-shadow:
+		inset 0 1px 0 0 $inset,
+		0 0 0 1px $color,
+		0 1px 2px -0.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;
+}

package/src/css/reset.scss

@@ -226,9 +226,9 @@
 
 :where(select, input[list]) {
 	appearance: none;
-	padding-right: 1em;
+	padding-right: 1.5em;
 	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;
+	background-position: right 0.5em center;
 	background-repeat: no-repeat;
 	border-radius: 0;
 }

package/src/css/splitter.scss

@@ -1,4 +1,4 @@
-@use 'mixins.scss' as mixins;
+/*! https://github.com/oscarpalmer/oui */
 
 oui-splitter {
 	:where(&) {

package/src/css/tabs.scss

@@ -1,11 +1,13 @@
-@use './mixins.scss' as mixins;
+/*! https://github.com/oscarpalmer/oui */
+
+@use './mixins/button.mixins.scss' as buttonMixins;
 
 oui-tabs {
 	:where(&) {
 		display: flex;
 	}
 
-	:where(&[orientation='horizontal' i]) {
+	:where(&:not([orientation='horizontal' i])) {
 		flex-flow: column nowrap;
 	}
 
@@ -19,31 +21,18 @@ oui-tabs {
 		padding: 1em;
 		flex: 1;
 		background-color: var(--oui-absolute);
-	}
-
-	:where(oui-tabs[orientation='horizontal' i] > &) {
-		border-radius: 0 0 0.5em 0.5em;
-		box-shadow:
-			0 0 0 1px rgb(0 0 0 / 12.5%),
-			inset 0 1px 2px -0.5px rgb(0 0 0 / 5%),
-			inset 0 2px 4px -1px rgb(0 0 0 / 5%);
-	}
-
-	:where(oui-tabs[orientation='vertical' i] > &) {
-		border-radius: 0 0.5em 0.5em 0;
-		box-shadow:
-			0 0 0 1px rgb(0 0 0 / 12.5%),
-			inset 1px 1px 2px -0.5px rgb(0 0 0 / 5%),
-			inset 2px 2px 4px -1px rgb(0 0 0 / 5%);
+		border: 1px solid var(--oui-gray-3);
+		position: relative;
+		z-index: 0;
 	}
 }
 
 [oui-tabs-tab] {
 	:where(&) {
-		@include mixins.button;
-		@include mixins.button-blue;
+		@include buttonMixins.button;
 
-		font-size: 0.875rem;
+		font-size: 0.75rem;
+		flex-shrink: 0;
 		align-self: flex-end;
 	}
 
@@ -61,25 +50,25 @@ oui-tabs {
 	:where(&) {
 		display: flex;
 		gap: 0.5em;
+		position: relative;
+		z-index: 0;
+	}
+
+	:where(&:focus-within) {
+		z-index: 1;
 	}
 
 	&[aria-orientation='horizontal' i] {
 		:where(&) {
-			flex-flow: row nowrap;
-		}
-
-		:where(& > [oui-tabs-tab]) {
-			border-radius: 0.25em 0.25em 0 0;
+			margin: 0 0 0.5em;
+			flex-flow: row wrap;
 		}
 	}
 
 	&[aria-orientation='vertical' i] {
 		:where(&) {
-			flex-flow: column nowrap;
-		}
-
-		:where(& > [oui-tabs-tab]) {
-			border-radius: 0.25em 0 0 0.25em;
+			margin: 0 0.5em 0 0;
+			flex-flow: column wrap;
 		}
 	}
 }