From a8f64f5a3624a1e6f85c0ea78491840d37d979e7 Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <manu@habite.la>
Date: Tue, 6 Aug 2024 11:37:18 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(buttons)=20new=20button=20styles?=
 =?UTF-8?q?=20("invisible"=20toggled=20+=20danger)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

this will be used for toggled on/off mic and camera buttons. We want
toggled-on buttons that don't look pressed as it looks a bit weird
(we'll change icons on pressed/unpressed state). And we want red buttons
for when the buttons are not pressed, so adding the "danger" variant
too.

the whole colorpalette stuff needs a bit of work to be clean but it'll
do for now
---
 src/frontend/panda.config.ts                |  1 +
 src/frontend/src/primitives/buttonRecipe.ts | 40 +++++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/src/frontend/panda.config.ts b/src/frontend/panda.config.ts
index 1574a509..0e285059 100644
--- a/src/frontend/panda.config.ts
+++ b/src/frontend/panda.config.ts
@@ -199,6 +199,7 @@ const config: Config = {
           text: { value: '{colors.white}' },
           subtle: { value: '{colors.red.100}' },
           'subtle-text': { value: '{colors.red.700}' },
+          ...pandaPreset.theme.tokens.colors.red,
         },
         success: {
           DEFAULT: { value: '{colors.green.700}' },
diff --git a/src/frontend/src/primitives/buttonRecipe.ts b/src/frontend/src/primitives/buttonRecipe.ts
index 1a590235..52b2561b 100644
--- a/src/frontend/src/primitives/buttonRecipe.ts
+++ b/src/frontend/src/primitives/buttonRecipe.ts
@@ -20,6 +20,9 @@ export const buttonRecipe = cva({
     '&[data-pressed]': {
       backgroundColor: 'colorPalette.active',
     },
+    '&[data-selected]': {
+      backgroundColor: 'colorPalette.active',
+    },
   },
   variants: {
     size: {
@@ -49,6 +52,7 @@ export const buttonRecipe = cva({
     variant: {
       default: {
         colorPalette: 'control',
+        borderColor: 'control.subtle',
       },
       primary: {
         colorPalette: 'primary',
@@ -66,6 +70,18 @@ export const buttonRecipe = cva({
           backgroundColor: 'success.subtle!',
         },
       },
+      danger: {
+        colorPalette: 'danger',
+        borderColor: 'danger.600',
+        color: 'danger.subtle-text',
+        backgroundColor: 'danger.subtle',
+        '&[data-hovered]': {
+          backgroundColor: 'danger.200',
+        },
+        '&[data-pressed]': {
+          backgroundColor: 'danger.subtle!',
+        },
+      },
     },
     outline: {
       true: {
@@ -98,6 +114,29 @@ export const buttonRecipe = cva({
         width: 'full',
       },
     },
+    // if the button is next to other ones to make a "button group", tell where the button is to handle radius
+    groupPosition: {
+      left: {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+      },
+      right: {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+        borderLeft: 0,
+      },
+      center: {
+        borderRadius: 0,
+      },
+    },
+    // some toggle buttons make more sense without a "pushed button" style when selected because their content changes to mark the state
+    toggledStyles: {
+      false: {
+        '&[data-selected]': {
+          backgroundColor: 'colorPalette',
+        },
+      },
+    },
     legacyStyle: {
       true: {
         borderColor: 'gray.400',
@@ -121,5 +160,6 @@ export const buttonRecipe = cva({
     size: 'default',
     variant: 'default',
     outline: false,
+    toggledStyles: true,
   },
 })