@mekari/pixel3-theme 0.2.1 → 0.2.2-dev.0

package/src/recipes/badge.ts

@@ -1,6 +1,7 @@
 import { defineRecipe } from '@pandacss/dev'
+import type { RecipeVariantRecord } from '@mekari/pixel3-styled-system/types'
 
-const badgeRecipe = defineRecipe({
+const badgeRecipe = defineRecipe<RecipeVariantRecord>({
   className: 'badge',
   jsx: ['MpBadge', 'mp-badge'],
   base: {
@@ -15,14 +16,23 @@ const badgeRecipe = defineRecipe({
       solid: {
         color: 'white'
       },
-      subtle: {}
+      subtle: {},
+      'additionalInformation': {},
+      'tableStatus': {},
+      indicator: {}
     },
     variantColor: {
       blue: {},
       green: {},
       orange: {},
       red: {},
-      gray: {}
+      gray: {},
+
+      announcement: {},
+      information: {},
+      warning: {},
+      completed: {},
+      critical: {}
     },
     size: {
       sm: {
@@ -30,16 +40,12 @@ const badgeRecipe = defineRecipe({
         fontWeight: 'semiBold',
         lineHeight: '0',
         letterSpacing: 'normal',
-        minWidth: '4',
-        height: '4'
       },
       md: {
         fontSize: 'md',
         fontWeight: 'regular',
         lineHeight: '0',
         letterSpacing: 'normal',
-        minWidth: '5',
-        height: '5'
       }
     }
   },
@@ -47,122 +53,240 @@ const badgeRecipe = defineRecipe({
   compoundVariants: [
     // Size
     {
-      variant: 'solid',
+      variant: ['solid', 'additionalInformation', 'tableStatus'],
       size: 'md',
       css: {
         paddingX: '1.5',
-        paddingY: '0.5'
+        paddingY: '0.5',
+        minWidth: '5',
+        height: '5'
       }
     },
     {
-      variant: 'solid',
+      variant: ['solid', 'additionalInformation', 'tableStatus'],
       size: 'sm',
       css: {
         paddingX: '1',
-        paddingY: '0.5'
+        paddingY: '0.5',
+        minWidth: '4',
+        height: '4'
       }
     },
     {
-      variant: 'subtle',
+      variant: ['subtle', 'additionalInformation', 'tableStatus'],
       size: 'md',
       css: {
         paddingX: '2',
-        paddingY: '0'
+        paddingY: '0',
+        minWidth: '5',
+        height: '5'
       }
     },
     {
-      variant: 'subtle',
+      variant: ['subtle', 'additionalInformation', 'tableStatus'],
       size: 'sm',
       css: {
         paddingX: '1',
-        paddingY: '0'
+        paddingY: '0',
+        minWidth: '4',
+        height: '4'
+      }
+    },
+    {
+      variant: 'indicator',
+      size: ['sm', 'md'],
+      css: {
+        width: '3',
+        height: '3'
       }
     },
 
-    // Solid
+    // Solid / Additional Information
     {
-      variant: 'solid',
-      variantColor: 'blue',
+      variant: ['solid', 'additionalInformation'],
+      variantColor: ['blue', 'information'],
       css: {
-        backgroundColor: 'sky.400'
+        backgroundColor: 'sky.400',
+        color: 'white',
+        _nextTheme: {
+          backgroundColor: 'background.brand.bold',
+          color: 'text.inverse'
+        }
       }
     },
     {
-      variant: 'solid',
-      variantColor: 'green',
+      variant: ['solid', 'additionalInformation'],
+      variantColor: ['green', 'completed'],
       css: {
-        backgroundColor: 'teal.400'
+        backgroundColor: 'teal.400',
+        color: 'white',
+        _nextTheme: {
+          backgroundColor: 'background.success.bold',
+          color: 'text.inverse'
+        }
       }
     },
     {
-      variant: 'solid',
-      variantColor: 'orange',
+      variant: ['solid', 'additionalInformation'],
+      variantColor: ['orange', 'warning'],
       css: {
-        backgroundColor: 'amber.400'
+        backgroundColor: 'amber.400',
+        color: 'white',
+        _nextTheme: {
+          backgroundColor: 'background.warning.bold',
+          color: 'text.warning.inverse'
+        }
       }
     },
     {
-      variant: 'solid',
-      variantColor: 'red',
+      variant: ['solid', 'additionalInformation'],
+      variantColor: ['red', 'critical'],
       css: {
-        backgroundColor: 'rose.400'
+        backgroundColor: 'rose.400',
+        color: 'white',
+        _nextTheme: {
+          backgroundColor: 'background.danger.bold',
+          color: 'text.inverse'
+        }
       }
     },
     {
-      variant: 'solid',
-      variantColor: 'gray',
+      variant: ['solid', 'additionalInformation']  ,
+      variantColor: ['gray', 'announcement'],
       css: {
-        backgroundColor: 'stone.400'
+        backgroundColor: 'stone.400',
+        color: 'white',
+        _nextTheme: {
+          backgroundColor: 'background.neutral.bold',
+          color: 'text.inverse'
+        }
       }
     },
 
-    // Subtle
+    // Subtle / Table Status
     {
-      variant: ['subtle'],
-      variantColor: 'blue',
+      variant: ['subtle', 'tableStatus'],
+      variantColor: ['blue', 'information'],
       css: {
         backgroundColor: 'blue.50',
-        color: 'blue.700'
+        color: 'blue.700',
+        _nextTheme: {
+          backgroundColor: 'background.brand',
+          color: 'text.information'
+        }
       }
     },
     {
-      variant: ['subtle'],
-      variantColor: 'green',
+      variant: ['subtle', 'tableStatus'],
+      variantColor: ['green', 'completed'],
       css: {
         backgroundColor: 'green.50',
-        color: 'green.700'
+        color: 'green.700',
+        _nextTheme: {
+          backgroundColor: 'background.success',
+          color: 'text.success'
+        }
       }
     },
     {
-      variant: ['subtle'],
-      variantColor: 'orange',
+      variant: ['subtle', 'tableStatus'],
+      variantColor: ['orange', 'warning'],
       css: {
         backgroundColor: 'orange.50',
-        color: 'orange.700'
+        color: 'orange.700',
+        _nextTheme: {
+          backgroundColor: 'background.warning',
+          color: 'text.warning'
+        }
       }
     },
     {
-      variant: ['subtle'],
-      variantColor: 'red',
+      variant: ['subtle', 'tableStatus'],
+      variantColor: ['red', 'critical'],
       css: {
         backgroundColor: 'red.50',
-        color: 'red.700'
+        color: 'red.700',
+        _nextTheme: {
+          backgroundColor: 'background.danger',
+          color: 'text.danger'
+        }
       }
     },
     {
-      variant: ['subtle'],
-      variantColor: 'gray',
+      variant: ['subtle', 'tableStatus'],
+      variantColor: ['gray', 'announcement'],
       css: {
         backgroundColor: 'gray.50',
-        color: 'black'
+        color: 'black',
+        _nextTheme: {
+          color: 'text.default',
+          backgroundColor: 'background.neutral.subtle'
+        }
       }
-    }
+    },
+
+    // Indicator
+    {
+      variant: 'indicator',
+      variantColor: ['blue', 'information'],
+      css: {
+        backgroundColor: 'sky.400',
+        _nextTheme: {
+          backgroundColor: 'icon.brand',
+          color: 'text.inverse'
+        }
+      }
+    },
+    {
+      variant: 'indicator',
+      variantColor: ['green', 'completed'],
+      css: {
+        backgroundColor: 'teal.400',
+        _nextTheme: {
+          backgroundColor: 'icon.success',
+          color: 'text.inverse'
+        }
+      }
+    },
+    {
+      variant: 'indicator',
+      variantColor: ['orange', 'warning'],
+      css: {
+        backgroundColor: 'amber.400',
+        _nextTheme: {
+          backgroundColor: 'icon.warning',
+          color: 'text.warning.inverse'
+        }
+      }
+    },
+    {
+      variant: 'indicator',
+      variantColor: ['red', 'critical'],
+      css: {
+        backgroundColor: 'rose.400',
+        _nextTheme: {
+          backgroundColor: 'icon.danger',
+          color: 'text.inverse'
+        }
+      }
+    },
+    {
+      variant: 'indicator',
+      variantColor: ['gray', 'announcement'],
+      css: {
+        backgroundColor: 'stone.400',
+        _nextTheme: {
+          color: 'text.inverse',
+          backgroundColor: 'icon.default'
+        }
+      }
+    },
   ],
 
   defaultVariants: {
-    variant: 'solid',
+    variant: 'additionalInformation',
     size: 'md',
-    variantColor: 'blue'
+    variantColor: 'information'
   }
 })
 

package/src/recipes/banner.ts

@@ -10,8 +10,8 @@ const bannerSlotRecipe = defineSlotRecipe({
       position: 'relative',
       alignItems: 'var(--mp-banner--align-items)',
       borderRadius: 'md',
-      paddingY: 'var(--mp-banner--padding-y)',
-      paddingX: 'var(--mp-banner--padding-x)'
+      paddingY: '3',
+      paddingX: '4'
     },
     body: {
       display: 'flex',
@@ -23,16 +23,36 @@ const bannerSlotRecipe = defineSlotRecipe({
   variants: {
     variant: {
       info: {
-        root: { backgroundColor: 'blue.50' }
+        root: { 
+          backgroundColor: 'blue.50',
+          _nextTheme: {
+            backgroundColor: 'background.brand',
+          }
+        }
       },
       success: {
-        root: { backgroundColor: 'green.50' }
+        root: { 
+          backgroundColor: 'green.50',
+          _nextTheme: {
+            backgroundColor: 'background.success'
+          }
+        }
       },
       danger: {
-        root: { backgroundColor: 'red.50' }
+        root: { 
+          backgroundColor: 'red.50',
+          _nextTheme: {
+            backgroundColor: 'background.danger'
+          }
+        }
       },
       warning: {
-        root: { backgroundColor: 'orange.50' }
+        root: { 
+          backgroundColor: 'orange.50',
+          _nextTheme: {
+            backgroundColor: 'background.warning'
+          }
+        }
       }
     }
   },
@@ -53,7 +73,10 @@ const bannerTitleRecipe = defineRecipe({
     letterSpacing: 'normal',
     color: 'dark',
     marginTop: '0.5',
-    marginBottom: '1.5'
+    marginBottom: '1',
+    _nextTheme: {
+      color: 'text.default',
+    }
   },
   variants: {},
   compoundVariants: [],
@@ -69,7 +92,10 @@ const bannerDescriptionRecipe = defineRecipe({
     fontWeight: 'regular',
     lineHeight: 'md',
     letterSpacing: 'normal',
-    color: 'dark'
+    color: 'dark',
+    _nextTheme: {
+      color: 'text.default',
+    }
   },
   variants: {},
   compoundVariants: [],
@@ -106,7 +132,6 @@ const bannerLinkRecipe = defineRecipe({
   base: {
     display: 'flex',
     gap: '4',
-    marginBottom: 'var(--mp-banner-link--margin-bottom)',
     marginTop: 'var(--mp-banner-link--margin-top)'
   },
   variants: {},
@@ -119,8 +144,8 @@ const bannerCloseButtonRecipe = defineRecipe({
   jsx: ['MpBannerCloseButton', 'mp-banner-close-button'],
   base: {
     position: 'absolute',
-    top: 'var(--mp-banner-close-button--top)',
-    right: 'var(--mp-banner-close-button--right)',
+    top: '3',
+    right: '4',
     display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',

package/src/recipes/broadcast.ts

@@ -38,28 +38,94 @@ const broadcastSlotRecipe = defineSlotRecipe({
       marginLeft: '3',
       _hover: {
         color: 'white!'
+      },
+      _nextTheme: {
+        color: 'icon.inverse!',
+        _hover: {
+          color: 'icon.inverse!'
+        },
       }
     }
   },
   variants: {
     variant: {
       announcement: {
-        container: { backgroundColor: 'stone.400' },
-        icon: { color: 'white' },
-        label: { color: 'white' },
-        textLink: { color: 'white' }
+        container: { 
+          backgroundColor: 'stone.400',
+          _nextTheme: {
+            backgroundColor: 'background.neutral.bold',
+          }
+        },
+        icon: { 
+          color: 'white',
+          _nextTheme: {
+            color: 'icon.inverse'
+          }
+        },
+        label: { 
+          color: 'white',
+          _nextTheme: {
+            color: 'text.inverse'
+          }
+        },
+        textLink: { 
+          color: 'white',
+          _nextTheme: {
+            color: 'text.inverse'
+          } 
+        }
       },
       information: {
-        container: { backgroundColor: 'violet.400' },
-        icon: { color: 'white' },
-        label: { color: 'white' },
-        textLink: { color: 'white' }
+        container: { 
+          backgroundColor: 'violet.400',
+          _nextTheme: {
+            backgroundColor: 'background.highlight.bold',
+          }
+        },
+        icon: { 
+          color: 'white',
+          _nextTheme: {
+            color: 'icon.inverse.static'
+          }
+        },
+        label: { 
+          color: 'white',
+          _nextTheme: {
+            color: 'text.inverse'
+          }
+        },
+        textLink: { 
+          color: 'white',
+          _nextTheme: {
+            color: 'text.inverse'
+          } 
+        }
       },
       important: {
-        container: { backgroundColor: 'amber.100' },
-        icon: { color: 'dark' },
-        label: { color: 'dark' },
-        textLink: { color: 'dark' }
+        container: { 
+          backgroundColor: 'amber.100',
+          _nextTheme: {
+            backgroundColor: 'background.warning.bold',
+          }
+        },
+        icon: { 
+          color: 'dark',
+          _nextTheme: {
+            color: 'icon.warning.inverse'
+          }
+        },
+        label: { 
+          color: 'dark',
+          _nextTheme: {
+            color: 'text.warning.inverse'
+          }
+        },
+        textLink: { 
+          color: 'dark',
+          _nextTheme: {
+            color: 'text.warning.inverse'
+          } 
+        }
       }
     }
   },