@oscarpalmer/oui 0.36.0 → 0.38.0

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