💄(buttons) new button styles ("invisible" toggled + danger)

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

@@ -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}' },

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,
   },
 })