@oscarpalmer/oui 0.37.0 → 0.38.0

package/src/css/mixins.scss

@@ -1,419 +0,0 @@
-@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 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);
-}
-
-@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 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);
-	}
-
-	&[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-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 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);
-}
-
-@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,
-		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;
-}
-
-@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;
-}