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

package/src/recipes/avatar.ts

@@ -2,31 +2,76 @@ import { defineSlotRecipe } from '@pandacss/dev'
 
 const variantColor = {
   gray: {
-    root: { backgroundColor: 'gray.50' }
+    root: { 
+      backgroundColor: 'gray.50',
+      _nextTheme: {
+        backgroundColor: 'background.neutral.subtle'
+      }
+    }
   },
   sky: {
-    root: { backgroundColor: 'sky.400' }
+    root: { 
+      backgroundColor: 'sky.400',
+      _nextTheme: {
+        backgroundColor: 'chart.cat01'
+      }
+    }
   },
   teal: {
-    root: { backgroundColor: 'teal.400' }
+    root: { 
+      backgroundColor: 'teal.400',
+      _nextTheme: {
+        backgroundColor: 'chart.cat02'
+      }
+    }
   },
   violet: {
-    root: { backgroundColor: 'violet.400' }
+    root: { 
+      backgroundColor: 'violet.400',
+      _nextTheme: {
+        backgroundColor: 'chart.cat03'
+      } 
+    }
   },
   amber: {
-    root: { backgroundColor: 'amber.400' }
+    root: { 
+      backgroundColor: 'amber.400',
+      _nextTheme: {
+        backgroundColor: 'chart.cat04'
+      }
+    }
   },
   rose: {
-    root: { backgroundColor: 'rose.400' }
+    root: { 
+      backgroundColor: 'rose.400',
+      _nextTheme: {
+        backgroundColor: 'chart.cat06'
+      }
+    }
   },
   stone: {
-    root: { backgroundColor: 'stone.400' }
+    root: { 
+      backgroundColor: 'stone.400',
+      _nextTheme: {
+        backgroundColor: 'chart.cat05'
+      }
+    }
   },
   lime: {
-    root: { backgroundColor: 'lime.400' }
+    root: { 
+      backgroundColor: 'lime.400',
+      _nextTheme: {
+        backgroundColor: 'chart.cat07'
+      }
+    }
   },
   pink: {
-    root: { backgroundColor: 'pink.400' }
+    root: { 
+      backgroundColor: 'pink.400',
+      _nextTheme: {
+        backgroundColor: 'chart.cat08'
+      }
+    }
   }
 }
 
@@ -52,6 +97,9 @@ const avatarSlotRecipe = defineSlotRecipe({
       cursor: 'var(--mp-avatar--cursor)',
       _hasBorder: {
         borderWidth: '0.125rem'
+      },
+      _nextTheme: {
+        color: 'text.inverse'
       }
     },
     fallback: {
@@ -81,20 +129,20 @@ const avatarSlotRecipe = defineSlotRecipe({
     variantColor: variantColor,
     size: {
       sm: {
-        root: { width: '6', height: '6', fontSize: 'xs' },
-        icon: { width: '4!', height: '4!' }
+        root: { width: '5', height: '5', fontSize: 'sm' },
+        icon: { width: '3!', height: '3!' }
       },
       md: {
-        root: { width: '8', height: '8', fontSize: 'sm' },
-        icon: { width: '5!', height: '5!' }
+        root: { width: '6', height: '6', fontSize: 'md' },
+        icon: { width: '4!', height: '4!' }
       },
       lg: {
-        root: { width: '12', height: '12', fontSize: 'lg' },
-        icon: { width: '8!', height: '8!' }
+        root: { width: '9', height: '9', fontSize: 'sm' },
+        icon: { width: '5!', height: '5!' }
       },
       xl: {
-        root: { width: '20', height: '20', fontSize: '2xl' },
-        icon: { width: '16!', height: '16!' }
+        root: { width: '20', height: '20', fontSize: '32px' },
+        icon: { width: '12!', height: '12!' }
       }
     }
   },
@@ -126,7 +174,12 @@ const avatarSlotRecipe = defineSlotRecipe({
     {
       variantColor: 'gray',
       css: {
-        root: { color: 'gray.600' }
+        root: { 
+          color: 'gray.600',
+          _nextTheme: {
+            color: 'text.secondary'
+          }
+        }
       }
     }
   ],
@@ -147,7 +200,7 @@ const avatarGroupSlotRecipe = defineSlotRecipe({
       zIndex: '0'
     },
     excess: {
-      marginLeft: '2',
+      marginLeft: '1',
       color: 'blue.400',
       backgroundColor: 'blue.50',
       fontWeight: 'semiBold',
@@ -156,22 +209,46 @@ const avatarGroupSlotRecipe = defineSlotRecipe({
       justifyContent: 'center',
       borderRadius: 'full',
       userSelect: 'none',
-      cursor: 'var(--mp-avatar-group--cursor)'
+      cursor: 'var(--mp-avatar-group--cursor)',
+      _nextTheme: {
+        color: 'text.inverse',
+        backgroundColor: 'background.brand.bold',
+      }
     }
   },
   variants: {
     size: {
       sm: {
-        excess: { width: '6', height: '6', fontSize: 'xs' }
+        root: { 
+          '& > [data-pixel-component=MpAvatar]': {
+            width: '6.5', height: '6.5', fontSize: 'sm'
+          }
+        },
+        excess: { width: '5', height: '5', fontSize: 'sm' }
       },
       md: {
-        excess: { width: '8', height: '8', fontSize: 'sm' }
+        root: { 
+          '& > [data-pixel-component=MpAvatar]': {
+            width: '7', height: '7', fontSize: 'md'
+          }
+        },
+        excess: { width: '6', height: '6', fontSize: 'md' }
       },
       lg: {
-        excess: { width: '12', height: '12', fontSize: 'lg' }
+        root: { 
+          '& > [data-pixel-component=MpAvatar]': {
+            width: '9.5', height: '9.5', fontSize: 'sm'
+          }
+        },
+        excess: { width: '9', height: '9', fontSize: 'sm' }
       },
       xl: {
-        excess: { width: '20', height: '20', fontSize: '2xl' }
+        root: { 
+          '& > [data-pixel-component=MpAvatar]': {
+            width: '82px', height: '82px', fontSize: '32px'
+          }
+        },
+        excess: { width: '20', height: '20', fontSize: '32px' }
       }
     }
   },

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'
+          }
+        }
       }
     }
   },
@@ -52,8 +72,10 @@ const bannerTitleRecipe = defineRecipe({
     lineHeight: 'md',
     letterSpacing: 'normal',
     color: 'dark',
-    marginTop: '0.5',
-    marginBottom: '1.5'
+    marginBottom: '1',
+    _nextTheme: {
+      color: 'text.default',
+    }
   },
   variants: {},
   compoundVariants: [],
@@ -69,7 +91,10 @@ const bannerDescriptionRecipe = defineRecipe({
     fontWeight: 'regular',
     lineHeight: 'md',
     letterSpacing: 'normal',
-    color: 'dark'
+    color: 'dark',
+    _nextTheme: {
+      color: 'text.default',
+    }
   },
   variants: {},
   compoundVariants: [],
@@ -106,7 +131,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 +143,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',