Merge pull request #412 from omnifed/407-feat-allow-buttons-to-suppor…

…t-all-palettes

feat: Update button and notification palettes

packages/panda-preset/src/recipes/shared/button.base.ts

@@ -1,5 +1,5 @@
 import { focusStates, formStates } from './states'
-import { action, danger } from './palettes'
+import { actionPalettes, statePalettes } from './palettes'
 
 const bgInitial = 'colorPalette.bg.initial'
 const textInitial = 'colorPalette.text.initial'
@@ -42,7 +42,6 @@ export const nonTextStates = {
 
 export const textUsage = {
   colorPalette: 'secondaryAction',
-
   bgColor: 'transparent',
   border: 'none',
   color: textInitial,
@@ -86,9 +85,10 @@ export const outlinedUsage = {
 }
 
 export const buttonPalettes = {
-  action,
+  ...actionPalettes,
+  ...statePalettes,
   danger: {
-    ...danger,
+    ...statePalettes.danger,
     _hover: {
       color: 'danger.text.inverse',
     },

packages/panda-preset/src/recipes/shared/palettes.ts

@@ -44,6 +44,11 @@ export const allPalettes = {
   danger,
 }
 
+export const actionPalettes = {
+  action,
+  secondaryAction,
+}
+
 export const nonActionPalettes = {
   page,
   info,

packages/panda-preset/src/recipes/slots/notification.ts

@@ -106,7 +106,7 @@ export const notification: Partial<SlotRecipeConfig> = defineSlotRecipe({
       bgColor: 'transparent',
       color: 'inherit',
       _hover: {
-        bgColor: 'colorPalette.bg.hover',
+        bgColor: 'colorPalette.ghost.hover',
       },
     },
     closeAll: {
@@ -127,15 +127,7 @@ export const notification: Partial<SlotRecipeConfig> = defineSlotRecipe({
       [INFO]: getNotificationPalette(INFO),
       [SUCCESS]: getNotificationPalette(SUCCESS),
       [WARNING]: getNotificationPalette(WARNING),
-      [DANGER]: {
-        ...getNotificationPalette(DANGER),
-        close: {
-          ...getNotificationPalette(DANGER).close,
-          _hover: {
-            color: 'danger.text.inverse',
-          },
-        },
-      },
+      [DANGER]: getNotificationPalette(DANGER),
     },
   },
 

packages/panda-preset/src/theme/semantic-tokens/success.ts

@@ -1,5 +1,6 @@
 import type { Prominence, SemanticToken } from './types'
-import { colors, deepGetByPaths, rawTokens } from '../../tokens'
+import { colors, deepGetByPaths, rawTokens, semanticColors } from '../../tokens'
+import { SUCCESS } from '../../recipes/shared/palettes'
 
 /**
  * This module is a collection of success tokens that are used to generate the theme.
@@ -18,6 +19,11 @@ export interface SuccessTokens {
       readonly hover: SemanticToken
       readonly active: SemanticToken
     }
+    readonly ghost: {
+      readonly initial: SemanticToken
+      readonly hover: SemanticToken
+      readonly active: SemanticToken
+    }
     readonly surface: {
       readonly initial: SemanticToken
       readonly 100: SemanticToken
@@ -33,7 +39,9 @@ export const successTokens: SuccessTokens = {
   success: {
     border: {
       initial: {
-        description: 'The default border color of success elements.',
+        description:
+          semanticColors.border[SUCCESS].initial.$description ||
+          'The default border color of success elements.',
         value: {
           _cerberusTheme: {
             base: deepGetByPaths(
@@ -56,6 +64,7 @@ export const successTokens: SuccessTokens = {
     bg: {
       initial: {
         description:
+          semanticColors.background[SUCCESS].initial.$description ||
           'The default background color of interactive elements that display a successful state.',
         value: {
           _cerberusTheme: {
@@ -76,6 +85,7 @@ export const successTokens: SuccessTokens = {
       },
       hover: {
         description:
+          semanticColors.background[SUCCESS].hover.$description ||
           'The default background color of interactive elements that display a successful state.',
         value: {
           _cerberusTheme: {
@@ -87,6 +97,7 @@ export const successTokens: SuccessTokens = {
       },
       active: {
         description:
+          semanticColors.background[SUCCESS].active.$description ||
           'The active surface color of interactive elements in a successful state.',
         value: {
           _cerberusTheme: {
@@ -98,9 +109,76 @@ export const successTokens: SuccessTokens = {
       },
     },
 
+    ghost: {
+      initial: {
+        description:
+          semanticColors.ghost[SUCCESS].initial.$description ||
+          'The default ghost color of interactive elements that display a successful state.',
+        value: {
+          _cerberusTheme: {
+            base: deepGetByPaths(
+              colors,
+              rawTokens.semanticColors.dark.ghost.success.initial.$value,
+            ).$value,
+            _lightMode: deepGetByPaths(
+              colors,
+              rawTokens.semanticColors.light.ghost.success.initial.$value,
+            ).$value,
+            _darkMode: deepGetByPaths(
+              colors,
+              rawTokens.semanticColors.dark.ghost.success.initial.$value,
+            ).$value,
+          },
+        },
+      },
+      hover: {
+        description:
+          semanticColors.ghost[SUCCESS].hover.$description ||
+          'The default ghost color of interactive elements that display a successful state.',
+        value: {
+          _cerberusTheme: {
+            base: deepGetByPaths(
+              colors,
+              rawTokens.semanticColors.dark.ghost.success.hover.$value,
+            ).$value,
+            _lightMode: deepGetByPaths(
+              colors,
+              rawTokens.semanticColors.light.ghost.success.hover.$value,
+            ).$value,
+            _darkMode: deepGetByPaths(
+              colors,
+              rawTokens.semanticColors.dark.ghost.success.hover.$value,
+            ).$value,
+          },
+        },
+      },
+      active: {
+        description:
+          semanticColors.ghost[SUCCESS].active.$description ||
+          'The active surface color of interactive elements in a successful state.',
+        value: {
+          _cerberusTheme: {
+            base: deepGetByPaths(
+              colors,
+              rawTokens.semanticColors.dark.ghost.success.active.$value,
+            ).$value,
+            _lightMode: deepGetByPaths(
+              colors,
+              rawTokens.semanticColors.light.ghost.success.active.$value,
+            ).$value,
+            _darkMode: deepGetByPaths(
+              colors,
+              rawTokens.semanticColors.dark.ghost.success.active.$value,
+            ).$value,
+          },
+        },
+      },
+    },
+
     surface: {
       initial: {
         description:
+          semanticColors.surface[SUCCESS].initial.$description ||
           'The default color for a static element (like a card, section, or page) in a successful state.',
         value: {
           _cerberusTheme: {
@@ -121,6 +199,7 @@ export const successTokens: SuccessTokens = {
       },
       100: {
         description:
+          semanticColors.surface[SUCCESS]['100'].$description ||
           'The layer color above initial for a static element (like a card, section, or page) in a successful state.',
         value: {
           _cerberusTheme: {
@@ -141,6 +220,7 @@ export const successTokens: SuccessTokens = {
       },
       200: {
         description:
+          semanticColors.surface[SUCCESS]['200'].$description ||
           'The layer color above 100 for a static element (like a card, section, or page) in a successful state.',
         value: {
           _cerberusTheme: {
@@ -163,7 +243,9 @@ export const successTokens: SuccessTokens = {
 
     text: {
       initial: {
-        description: 'The default text color of success elements.',
+        description:
+          semanticColors.text[SUCCESS].initial.$description ||
+          'The default text color of success elements.',
         value: {
           _cerberusTheme: {
             base: deepGetByPaths(
@@ -182,7 +264,9 @@ export const successTokens: SuccessTokens = {
         },
       },
       100: {
-        description: 'The secondary text color of success elements.',
+        description:
+          semanticColors.text[SUCCESS]['100'].$description ||
+          'The secondary text color of success elements.',
         value: {
           _cerberusTheme: {
             base: deepGetByPaths(
@@ -201,7 +285,9 @@ export const successTokens: SuccessTokens = {
         },
       },
       200: {
-        description: 'The tertiary text color of success elements.',
+        description:
+          semanticColors.text[SUCCESS]['200'].$description ||
+          'The tertiary text color of success elements.',
         value: {
           _cerberusTheme: {
             base: deepGetByPaths(
@@ -221,6 +307,7 @@ export const successTokens: SuccessTokens = {
       },
       inverse: {
         description:
+          semanticColors.text[SUCCESS].inverse.$description ||
           'The text color of success elements when you need a light mode treatment within the dark mode.',
         value: {
           _cerberusTheme: {

packages/react/src/components/Button.tsx

@@ -1,14 +1,17 @@
 import type { ButtonHTMLAttributes } from 'react'
-import { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'
-import { button } from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css'
+import {
+  button,
+  type ButtonVariantProps,
+} from '@cerberus/styled-system/recipes'
 
 /**
  * This module contains the Button component.
  * @module
  */
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
-  RecipeVariantProps<typeof button>
+  ButtonVariantProps
 
 /**
  * A component that allows the user to perform actions

tests/panda-preset/recipes/button.test.ts

@@ -48,6 +48,30 @@ describe('button recipe', () => {
     })
   })
 
+  test('should have a secondaryAction palette variant', () => {
+    expect(button.variants?.palette.secondaryAction).toMatchObject({
+      colorPalette: 'secondaryAction',
+    })
+  })
+
+  test('should have an info palette variant', () => {
+    expect(button.variants?.palette.info).toMatchObject({
+      colorPalette: 'info',
+    })
+  })
+
+  test('should have a success palette variant', () => {
+    expect(button.variants?.palette.success).toMatchObject({
+      colorPalette: 'success',
+    })
+  })
+
+  test('should have a warning palette variant', () => {
+    expect(button.variants?.palette.warning).toMatchObject({
+      colorPalette: 'warning',
+    })
+  })
+
   test('should have an danger palette variant', () => {
     expect(button.variants?.palette.danger).toMatchObject({
       colorPalette: 'danger',

tests/panda-preset/recipes/iconButton.test.ts

@@ -50,6 +50,30 @@ describe('iconButton recipe', () => {
     })
   })
 
+  test('should have a secondaryAction palette variant', () => {
+    expect(iconButton.variants?.palette.secondaryAction).toMatchObject({
+      colorPalette: 'secondaryAction',
+    })
+  })
+
+  test('should have an info palette variant', () => {
+    expect(iconButton.variants?.palette.info).toMatchObject({
+      colorPalette: 'info',
+    })
+  })
+
+  test('should have a success palette variant', () => {
+    expect(iconButton.variants?.palette.success).toMatchObject({
+      colorPalette: 'success',
+    })
+  })
+
+  test('should have a warning palette variant', () => {
+    expect(iconButton.variants?.palette.warning).toMatchObject({
+      colorPalette: 'warning',
+    })
+  })
+
   test('should have an danger palette variant', () => {
     expect(iconButton.variants?.palette.danger).toMatchObject({
       colorPalette: 'danger',

tests/panda-preset/recipes/slots/notification.test.ts

@@ -70,10 +70,40 @@ describe('notification recipe', () => {
 
   test('should have a close style', () => {
     expect(notification.base?.close).toMatchObject({
+      alignItems: 'center',
+      display: 'inline-flex',
+      fontWeight: '600',
+      gap: '2',
+      justifyContent: 'center',
+      lineHeight: '0',
+      outline: 'none',
+      textDecoration: 'none',
+      transitionProperty: 'background-color, color',
+      transitionDuration: 'fast',
+      transitionTimingFunction: 'ease-in-out',
+      userSelect: 'none',
+      whiteSpace: 'nowrap',
+      h: '2.75rem',
+      pxi: '0',
+      rounded: 'full',
+      w: '2.75rem',
       bgColor: 'transparent',
       color: 'inherit',
+      _focusVisible: {
+        boxShadow: 'none',
+        outline: '3px solid',
+        outlineColor: 'action.border.focus',
+        outlineOffset: '2px',
+      },
+      _disabled: {
+        cursor: 'not-allowed',
+        opacity: '0.5',
+      },
+      _readOnly: {
+        cursor: 'default',
+      },
       _hover: {
-        bgColor: 'colorPalette.bg.hover',
+        bgColor: 'colorPalette.ghost.hover',
       },
     })
   })