From 5a8a13a136495e3337ab902aea1018bf17177584 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 5 May 2024 14:22:10 +0200
Subject: [PATCH] add no-reduce-motion as tailwind variant
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/components/sidebar-menu.tsx | 4 ++--
 tailwind.config.ts              | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index a862372ee..13011dfec 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -143,7 +143,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
       }
     >
       <div
-        className={clsx('fixed inset-0 bg-gray-500 transition-opacity black:bg-gray-900 dark:bg-gray-700', {
+        className={clsx('fixed inset-0 bg-gray-500 black:bg-gray-900 no-reduce-motion:transition-opacity dark:bg-gray-700', {
           'opacity-0': !sidebarVisible,
           'opacity-90': sidebarVisible,
         })}
@@ -155,7 +155,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
         <div
           className={
             clsx({
-              'flex flex-col flex-1 bg-white black:bg-black dark:bg-primary-900 -translate-x-full rtl:translate-x-full w-full max-w-xs transition-transform ease-in-out': true,
+              'flex flex-col flex-1 bg-white black:bg-black dark:bg-primary-900 -translate-x-full rtl:translate-x-full w-full max-w-xs no-reduce-motion:transition-transform ease-in-out': true,
               '!translate-x-0': sidebarVisible,
             })
           }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 707639804..a630ab7a6 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -7,6 +7,7 @@ import plugin from 'tailwindcss/plugin';
 import { parseColorMatrix } from './tailwind/colors';
 
 const blackVariantPlugin = plugin(({ addVariant }) => addVariant('black', '.black &'));
+const reducedMotionPlugin = plugin(({ addVariant }) => addVariant('no-reduce-motion', '.no-reduce-motion &'));
 
 const config: Config = {
   content: ['./src/**/*.{html,js,ts,tsx}', './custom/instance/**/*.html', './index.html'],
@@ -109,6 +110,7 @@ const config: Config = {
     formsPlugin,
     typographyPlugin,
     blackVariantPlugin,
+    reducedMotionPlugin,
   ],
 };