From 5ce63d937d7a679c178bdf73b51d20d797ee792d Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <manu@habite.la>
Date: Wed, 24 Jul 2024 15:38:10 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(css)=20remove=20'=5Fra-*'=20?=
 =?UTF-8?q?helpers=20from=20panda?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

they are not really helpful, i'd rather stick to the react-aria wording,
easier to understand when looking at react aria examples, converting
code, etc. Not a great value adding this api in our tiny heads
---
 src/frontend/panda.config.ts                | 12 ------------
 src/frontend/src/primitives/A.tsx           |  4 ++--
 src/frontend/src/primitives/Button.tsx      |  4 ++--
 src/frontend/src/primitives/PopoverList.tsx |  2 +-
 4 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/src/frontend/panda.config.ts b/src/frontend/panda.config.ts
index 4742398f..6e8b6101 100644
--- a/src/frontend/panda.config.ts
+++ b/src/frontend/panda.config.ts
@@ -35,18 +35,6 @@ const config: Config = {
   exclude: [],
   jsxFramework: 'react',
   outdir: 'src/styled-system',
-  conditions: {
-    extend: {
-      // React Aria builds upon data attributes instead of css pseudo-classes, in case we style a React Aria component
-      // we dont want to trigger pseudo class related styles
-      'ra-hover': '&:is([data-hovered])',
-      'ra-focus': '&:is([data-focused])',
-      'ra-focusVisible': '&:is([data-focus-visible])',
-      'ra-disabled': '&:is([data-disabled])',
-      pressed: '&:is([data-pressed])',
-      'ra-pressed': '&:is([data-pressed])',
-    },
-  },
   theme: {
     ...pandaPreset.theme,
     // media queries are defined in em so that zooming with text-only mode triggers breakpoints
diff --git a/src/frontend/src/primitives/A.tsx b/src/frontend/src/primitives/A.tsx
index f23b9d4e..6a032062 100644
--- a/src/frontend/src/primitives/A.tsx
+++ b/src/frontend/src/primitives/A.tsx
@@ -7,10 +7,10 @@ const link = cva({
     textUnderlineOffset: '2',
     cursor: 'pointer',
     borderRadius: 2,
-    '_ra-hover': {
+    '&[data-hovered]': {
       textDecoration: 'none',
     },
-    '_ra-pressed': {
+    '&[data-pressed]': {
       textDecoration: 'underline',
     },
   },
diff --git a/src/frontend/src/primitives/Button.tsx b/src/frontend/src/primitives/Button.tsx
index 66cf47a4..a6990897 100644
--- a/src/frontend/src/primitives/Button.tsx
+++ b/src/frontend/src/primitives/Button.tsx
@@ -14,10 +14,10 @@ const button = cva({
     border: '1px solid transparent',
     color: 'colorPalette.text',
     backgroundColor: 'colorPalette',
-    '_ra-hover': {
+    '&[data-hovered]': {
       backgroundColor: 'colorPalette.hover',
     },
-    '_ra-pressed': {
+    '&[data-pressed]': {
       backgroundColor: 'colorPalette.active',
     },
   },
diff --git a/src/frontend/src/primitives/PopoverList.tsx b/src/frontend/src/primitives/PopoverList.tsx
index d9aaa4c2..5009a6b8 100644
--- a/src/frontend/src/primitives/PopoverList.tsx
+++ b/src/frontend/src/primitives/PopoverList.tsx
@@ -15,7 +15,7 @@ const ListItem = styled(Button, {
     borderRadius: 4,
     cursor: 'pointer',
     color: 'primary',
-    '_ra-hover': {
+    '&[data-hovered]': {
       color: 'primary.subtle-text',
       backgroundColor: 'primary.subtle',
     },