From 89deb2689c10556a4bbe8bb3297a6fb819176b47 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Tue, 28 Mar 2023 13:15:47 -0700
Subject: [PATCH] feat(@clayui/css): Utilities adds c-prefers-reduced-motion

    - This removes CSS transitions in child elements
---
 .../components/_utilities-functional-important.scss   |  6 ++++++
 .../src/scss/cadmin/variables/_utilities.scss         | 11 +++++++++++
 .../components/_utilities-functional-important.scss   |  6 ++++++
 packages/clay-css/src/scss/mixins/_globals.scss       |  6 ++++++
 packages/clay-css/src/scss/mixins/_transition.scss    |  6 ++++++
 packages/clay-css/src/scss/variables/_utilities.scss  | 11 +++++++++++
 6 files changed, 46 insertions(+)

diff --git a/packages/clay-css/src/scss/cadmin/components/_utilities-functional-important.scss b/packages/clay-css/src/scss/cadmin/components/_utilities-functional-important.scss
index 349dbaf243..20b23cb375 100644
--- a/packages/clay-css/src/scss/cadmin/components/_utilities-functional-important.scss
+++ b/packages/clay-css/src/scss/cadmin/components/_utilities-functional-important.scss
@@ -840,3 +840,9 @@
 .invisible {
 	visibility: hidden !important;
 }
+
+// Transitions
+
+.c-prefers-reduced-motion {
+	@include clay-css($cadmin-c-prefers-reduced-motion);
+}
diff --git a/packages/clay-css/src/scss/cadmin/variables/_utilities.scss b/packages/clay-css/src/scss/cadmin/variables/_utilities.scss
index 9a0638b999..1b43abfc25 100644
--- a/packages/clay-css/src/scss/cadmin/variables/_utilities.scss
+++ b/packages/clay-css/src/scss/cadmin/variables/_utilities.scss
@@ -541,3 +541,14 @@ $cadmin-text-decorations: map-deep-merge(
 	),
 	$cadmin-text-decorations
 );
+
+// Transitions
+
+$cadmin-c-prefers-reduced-motion: () !default;
+$cadmin-c-prefers-reduced-motion: map-merge(
+	(
+		scroll-behavior: auto,
+		transition: clay-enable-transitions(none),
+	),
+	$cadmin-c-prefers-reduced-motion
+);
diff --git a/packages/clay-css/src/scss/components/_utilities-functional-important.scss b/packages/clay-css/src/scss/components/_utilities-functional-important.scss
index 497faafee9..86da191f15 100644
--- a/packages/clay-css/src/scss/components/_utilities-functional-important.scss
+++ b/packages/clay-css/src/scss/components/_utilities-functional-important.scss
@@ -816,3 +816,9 @@
 .invisible {
 	visibility: hidden !important;
 }
+
+// Transitions
+
+.c-prefers-reduced-motion {
+	@include clay-css($c-prefers-reduced-motion);
+}
diff --git a/packages/clay-css/src/scss/mixins/_globals.scss b/packages/clay-css/src/scss/mixins/_globals.scss
index 0474499cb4..3a49c7be2a 100644
--- a/packages/clay-css/src/scss/mixins/_globals.scss
+++ b/packages/clay-css/src/scss/mixins/_globals.scss
@@ -275,6 +275,12 @@
 						@media (prefers-reduced-motion: reduce) {
 							transition: none;
 						}
+
+						@at-root {
+							.c-prefers-reduced-motion & {
+								transition: none;
+							}
+						}
 					}
 				} @else if ($key == 'extend') {
 					@extend #{$value} !optional;
diff --git a/packages/clay-css/src/scss/mixins/_transition.scss b/packages/clay-css/src/scss/mixins/_transition.scss
index ee8c0703d9..31e6cd02b4 100644
--- a/packages/clay-css/src/scss/mixins/_transition.scss
+++ b/packages/clay-css/src/scss/mixins/_transition.scss
@@ -32,5 +32,11 @@
 		@media (prefers-reduced-motion: reduce) {
 			transition: none;
 		}
+
+		@at-root {
+			.c-prefers-reduced-motion & {
+				transition: none;
+			}
+		}
 	}
 }
diff --git a/packages/clay-css/src/scss/variables/_utilities.scss b/packages/clay-css/src/scss/variables/_utilities.scss
index 24450f5688..1086f15fb0 100644
--- a/packages/clay-css/src/scss/variables/_utilities.scss
+++ b/packages/clay-css/src/scss/variables/_utilities.scss
@@ -525,3 +525,14 @@ $text-decorations: map-deep-merge(
 	),
 	$text-decorations
 );
+
+// Transitions
+
+$c-prefers-reduced-motion: () !default;
+$c-prefers-reduced-motion: map-merge(
+	(
+		scroll-behavior: auto,
+		transition: clay-enable-transitions(none),
+	),
+	$c-prefers-reduced-motion
+);