@oscarpalmer/oui 0.36.0 → 0.37.0

package/src/css/mixins.scss

@@ -1,30 +1,72 @@
 @mixin badge() {
-	--oui-shadow-mixed: color-mix(in oklab, var(--oui-shadow, var(--oui-gray-6)), transparent 92.5%);
+	--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 shadow(var(--oui-shadow-mixed));
+	@include 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-0)), transparent 25%);
+	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);
+}
+
 @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-shadow-inset: color-mix(in oklab, white, transparent 75%);
+	--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, var(--oui-gray-6)),
+		var(--oui-outline-value),
 		transparent var(--oui-shadow-percentage)
 	);
 
-	@include shadow(var(--oui-shadow-value), var(--oui-shadow-inset));
+	@include shadow-2(var(--oui-shadow-value), var(--oui-shadow-inset));
 
 	padding: 0.5em 0.75em;
 	display: inline-flex;
@@ -34,30 +76,91 @@
 	border-radius: 0.25em;
 	background-color: color-mix(
 		in oklab,
-		var(--oui-background-value, var(--oui-gray-2)),
+		var(--oui-background-value),
 		transparent var(--oui-background-percentage)
 	);
 	outline: 4px solid
-		color-mix(
-			in oklab,
-			var(--oui-outline-value, var(--oui-gray-6)),
-			transparent var(--oui-outline-percentage)
-		);
+		color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
 	border: none;
 	color: color-mix(
 		in oklab,
-		var(--oui-foreground-value, var(--oui-gray-8)),
+		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);
+	}
+
+	&[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);
 }
 
 @mixin card(
 	$backgroundColor: var(--oui-absolute),
 	$boxShadowColor: color-mix(in oklab, var(--oui-gray-6), transparent 92.5%)
 ) {
-	@include shadow($boxShadowColor);
+	@include shadow-1($boxShadowColor);
 
 	padding: 1em 1.25em;
 	background-color: $backgroundColor;
@@ -73,29 +176,29 @@
 	inset-block: var(--margin-top) var(--margin-bottom);
 	inset-inline: var(--margin-left) var(--margin-right);
 
-	&[oui-position$='bottom'] {
+	&[oui-position$='bottom' i] {
 		--margin-bottom: 0;
 	}
 
-	&[oui-position$='end'] {
+	&[oui-position$='end' i] {
 		--margin-right: 0;
 	}
 
-	&[oui-position$='start'] {
+	&[oui-position$='start' i] {
 		--margin-left: 0;
 	}
 
-	&[oui-position$='top'] {
+	&[oui-position$='top' i] {
 		--margin-top: 0;
 	}
 }
 
 @mixin input {
+	@include input-outlined;
+
 	--oui-background-percentage: 0%;
 	--oui-foreground-percentage: 0%;
 
-	@include input-outlined;
-
 	align-content: center;
 	background-color: color-mix(
 		in oklab,
@@ -114,6 +217,57 @@
 		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() {
@@ -145,7 +299,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 input-valid() {
@@ -155,7 +308,56 @@
 	--oui-outline-value: var(--oui-green-6);
 }
 
-@mixin shadow($color: rgb(0 0 0 / 5%), $inset: transparent) {
+@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);
+}
+
+@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,
@@ -163,7 +365,26 @@
 		0 2px 4px -1px $color;
 }
 
-@mixin shadow-overlay($color: rgb(0 0 0 / 5%), $inset: transparent) {
+@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,
@@ -171,16 +392,20 @@
 		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;
+		0 16px 32px -8px $color;
 }
 
-@mixin shadow-small($color: rgb(0 0 0 / 5%), $inset: transparent) {
+@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 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;
 }
 
 @mixin visually-hidden() {