@mekari/pixel3-theme 0.2.2-dev.4 → 0.2.2-dev.6

package/src/recipes/avatar.ts

@@ -2,7 +2,7 @@ import { defineSlotRecipe } from '@pandacss/dev'
 
 const variantColor = {
   gray: {
-    root: { 
+    root: {
       backgroundColor: 'gray.50',
       _nextTheme: {
         backgroundColor: 'background.neutral.subtle'
@@ -10,7 +10,7 @@ const variantColor = {
     }
   },
   sky: {
-    root: { 
+    root: {
       backgroundColor: 'sky.400',
       _nextTheme: {
         backgroundColor: 'chart.cat01'
@@ -18,7 +18,7 @@ const variantColor = {
     }
   },
   teal: {
-    root: { 
+    root: {
       backgroundColor: 'teal.400',
       _nextTheme: {
         backgroundColor: 'chart.cat02'
@@ -26,15 +26,15 @@ const variantColor = {
     }
   },
   violet: {
-    root: { 
+    root: {
       backgroundColor: 'violet.400',
       _nextTheme: {
         backgroundColor: 'chart.cat03'
-      } 
+      }
     }
   },
   amber: {
-    root: { 
+    root: {
       backgroundColor: 'amber.400',
       _nextTheme: {
         backgroundColor: 'chart.cat04'
@@ -42,7 +42,7 @@ const variantColor = {
     }
   },
   rose: {
-    root: { 
+    root: {
       backgroundColor: 'rose.400',
       _nextTheme: {
         backgroundColor: 'chart.cat06'
@@ -50,7 +50,7 @@ const variantColor = {
     }
   },
   stone: {
-    root: { 
+    root: {
       backgroundColor: 'stone.400',
       _nextTheme: {
         backgroundColor: 'chart.cat05'
@@ -58,7 +58,7 @@ const variantColor = {
     }
   },
   lime: {
-    root: { 
+    root: {
       backgroundColor: 'lime.400',
       _nextTheme: {
         backgroundColor: 'chart.cat07'
@@ -66,7 +66,7 @@ const variantColor = {
     }
   },
   pink: {
-    root: { 
+    root: {
       backgroundColor: 'pink.400',
       _nextTheme: {
         backgroundColor: 'chart.cat08'
@@ -174,7 +174,7 @@ const avatarSlotRecipe = defineSlotRecipe({
     {
       variantColor: 'gray',
       css: {
-        root: { 
+        root: {
           color: 'gray.600',
           _nextTheme: {
             color: 'text.secondary'
@@ -212,40 +212,48 @@ const avatarGroupSlotRecipe = defineSlotRecipe({
       cursor: 'var(--mp-avatar-group--cursor)',
       _nextTheme: {
         color: 'text.inverse',
-        backgroundColor: 'background.brand.bold',
+        backgroundColor: 'background.brand.bold'
       }
     }
   },
   variants: {
     size: {
       sm: {
-        root: { 
+        root: {
           '& > [data-pixel-component=MpAvatar]': {
-            width: '6.5', height: '6.5', fontSize: 'sm'
+            width: '6.5',
+            height: '6.5',
+            fontSize: 'sm'
           }
         },
         excess: { width: '5', height: '5', fontSize: 'sm' }
       },
       md: {
-        root: { 
+        root: {
           '& > [data-pixel-component=MpAvatar]': {
-            width: '7', height: '7', fontSize: 'md'
+            width: '7',
+            height: '7',
+            fontSize: 'md'
           }
         },
         excess: { width: '6', height: '6', fontSize: 'md' }
       },
       lg: {
-        root: { 
+        root: {
           '& > [data-pixel-component=MpAvatar]': {
-            width: '9.5', height: '9.5', fontSize: 'sm'
+            width: '9.5',
+            height: '9.5',
+            fontSize: 'sm'
           }
         },
         excess: { width: '9', height: '9', fontSize: 'sm' }
       },
       xl: {
-        root: { 
+        root: {
           '& > [data-pixel-component=MpAvatar]': {
-            width: '82px', height: '82px', fontSize: '32px'
+            width: '82px',
+            height: '82px',
+            fontSize: '32px'
           }
         },
         excess: { width: '20', height: '20', fontSize: '32px' }

package/src/recipes/badge.ts

@@ -8,7 +8,7 @@ const badgeRecipe = defineRecipe<RecipeVariantRecord>({
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: '999px',
+    borderRadius: '999px'
   },
 
   variants: {
@@ -17,8 +17,8 @@ const badgeRecipe = defineRecipe<RecipeVariantRecord>({
         color: 'white'
       },
       subtle: {},
-      'additionalInformation': {},
-      'tableStatus': {},
+      additionalInformation: {},
+      tableStatus: {},
       indicator: {}
     },
     variantColor: {
@@ -39,13 +39,13 @@ const badgeRecipe = defineRecipe<RecipeVariantRecord>({
         fontSize: 'xs',
         fontWeight: 'semiBold',
         lineHeight: '0',
-        letterSpacing: 'normal',
+        letterSpacing: 'normal'
       },
       md: {
         fontSize: 'md',
         fontWeight: 'regular',
         lineHeight: '0',
-        letterSpacing: 'normal',
+        letterSpacing: 'normal'
       }
     }
   },
@@ -151,7 +151,7 @@ const badgeRecipe = defineRecipe<RecipeVariantRecord>({
       }
     },
     {
-      variant: ['solid', 'additionalInformation']  ,
+      variant: ['solid', 'additionalInformation'],
       variantColor: ['gray', 'announcement'],
       css: {
         backgroundColor: 'stone.400',
@@ -280,7 +280,7 @@ const badgeRecipe = defineRecipe<RecipeVariantRecord>({
           backgroundColor: 'icon.default'
         }
       }
-    },
+    }
   ],
 
   defaultVariants: {

package/src/recipes/banner.ts

@@ -23,15 +23,15 @@ const bannerSlotRecipe = defineSlotRecipe({
   variants: {
     variant: {
       info: {
-        root: { 
+        root: {
           backgroundColor: 'blue.50',
           _nextTheme: {
-            backgroundColor: 'background.brand',
+            backgroundColor: 'background.brand'
           }
         }
       },
       success: {
-        root: { 
+        root: {
           backgroundColor: 'green.50',
           _nextTheme: {
             backgroundColor: 'background.success'
@@ -39,7 +39,7 @@ const bannerSlotRecipe = defineSlotRecipe({
         }
       },
       danger: {
-        root: { 
+        root: {
           backgroundColor: 'red.50',
           _nextTheme: {
             backgroundColor: 'background.danger'
@@ -47,7 +47,7 @@ const bannerSlotRecipe = defineSlotRecipe({
         }
       },
       warning: {
-        root: { 
+        root: {
           backgroundColor: 'orange.50',
           _nextTheme: {
             backgroundColor: 'background.warning'
@@ -74,7 +74,7 @@ const bannerTitleRecipe = defineRecipe({
     color: 'dark',
     marginBottom: '1',
     _nextTheme: {
-      color: 'text.default',
+      color: 'text.default'
     }
   },
   variants: {},
@@ -93,7 +93,7 @@ const bannerDescriptionRecipe = defineRecipe({
     letterSpacing: 'normal',
     color: 'dark',
     _nextTheme: {
-      color: 'text.default',
+      color: 'text.default'
     }
   },
   variants: {},

package/src/recipes/broadcast.ts

@@ -43,88 +43,114 @@ const broadcastSlotRecipe = defineSlotRecipe({
         color: 'icon.inverse!',
         _hover: {
           color: 'icon.inverse!'
-        },
+        }
       }
     }
   },
   variants: {
     variant: {
       announcement: {
-        container: { 
+        container: {
           backgroundColor: 'stone.400',
           _nextTheme: {
-            backgroundColor: 'background.neutral.bold',
+            backgroundColor: 'background.neutral.bold'
           }
         },
-        icon: { 
+        icon: {
           color: 'white',
           _nextTheme: {
             color: 'icon.inverse'
           }
         },
-        label: { 
+        label: {
           color: 'white',
           _nextTheme: {
             color: 'text.inverse'
           }
         },
-        textLink: { 
+        textLink: {
           color: 'white',
           _nextTheme: {
             color: 'text.inverse'
-          } 
+          }
         }
       },
       information: {
-        container: { 
+        container: {
           backgroundColor: 'violet.400',
           _nextTheme: {
-            backgroundColor: 'background.highlight.bold',
+            backgroundColor: 'background.highlight.bold'
           }
         },
-        icon: { 
+        icon: {
           color: 'white',
           _nextTheme: {
             color: 'icon.inverse.static'
           }
         },
-        label: { 
+        label: {
           color: 'white',
           _nextTheme: {
             color: 'text.inverse'
           }
         },
-        textLink: { 
+        textLink: {
           color: 'white',
           _nextTheme: {
             color: 'text.inverse'
-          } 
+          }
         }
       },
       important: {
-        container: { 
+        container: {
           backgroundColor: 'amber.100',
           _nextTheme: {
-            backgroundColor: 'background.warning.bold',
+            backgroundColor: 'background.warning.bold'
           }
         },
-        icon: { 
+        icon: {
           color: 'dark',
           _nextTheme: {
             color: 'icon.warning.inverse'
           }
         },
-        label: { 
+        label: {
           color: 'dark',
           _nextTheme: {
             color: 'text.warning.inverse'
           }
         },
-        textLink: { 
+        textLink: {
           color: 'dark',
           _nextTheme: {
             color: 'text.warning.inverse'
-          } 
+          }
+        }
+      },
+      critical: {
+        container: {
+          backgroundColor: 'rose.400',
+          _nextTheme: {
+            backgroundColor: 'background.danger.bold'
+          }
+        },
+        icon: {
+          color: 'white',
+          _nextTheme: {
+            color: 'icon.inverse'
+          }
+        },
+        label: {
+          color: 'white',
+          _nextTheme: {
+            color: 'text.inverse'
+          }
+        },
+        textLink: {
+          color: 'white',
+          _nextTheme: {
+            color: 'text.inverse'
+          }
         }
       }
     }

package/src/recipes/button.ts

@@ -20,6 +20,9 @@ const buttonRecipe = defineRecipe({
     transitionDuration: '250ms',
     transitionProperty: 'background, border-color, color, box-shadow',
     transitionTimingFunction: 'linear',
+    _isFullWidth: {
+      width: 'full'
+    },
     _loading: {
       cursor: 'wait',
       position: 'absolute',
@@ -288,7 +291,7 @@ const buttonRecipe = defineRecipe({
             '[data-icon-position=right]': {
               paddingLeft: '2',
               paddingRight: '1.5'
-            },
+            }
           },
 
           _nextTheme: {
@@ -402,7 +405,7 @@ const buttonRecipe = defineRecipe({
             _hasIcon: {
               background: 'transparent',
               borderColor: 'transparent'
-            },
+            }
           },
           _hasIcon: {
             background: 'transparent',
@@ -418,12 +421,12 @@ const buttonRecipe = defineRecipe({
               _hasIcon: {
                 background: 'transparent',
                 borderColor: 'transparent'
-              },
+              }
             },
             _hasIcon: {
               background: 'transparent',
               borderColor: 'transparent'
-            },
+            }
           }
         }
       }

package/src/recipes/carousel.ts

@@ -3,11 +3,7 @@ import { defineSlotRecipe } from '@pandacss/dev'
 const carouselSlotRecipe = defineSlotRecipe({
   className: 'carousel',
   jsx: ['MpCarousel', 'mp-carousel'],
-  slots: [
-    'root',
-    'buttonRight',
-    'buttonLeft'
-  ],
+  slots: ['root', 'buttonRight', 'buttonLeft'],
   base: {
     root: {
       display: 'block',
@@ -52,4 +48,4 @@ const carouselSlotRecipe = defineSlotRecipe({
   }
 })
 
-export { carouselSlotRecipe }
+export { carouselSlotRecipe }

package/src/recipes/color-picker.ts

@@ -157,7 +157,7 @@ const colorPickerSlotRecipe = defineSlotRecipe({
       position: 'relative',
       display: 'flex',
       flexDirection: 'column',
-      gap: '2',
+      gap: '2'
     },
     wrapperPreset: {
       position: 'relative',

package/src/recipes/date-picker.ts

@@ -349,7 +349,7 @@ const monthItemRecipe = defineRecipe({
       }
     },
     _nextTheme: {
-      color: 'text.default',
+      color: 'text.default'
     }
   },
   variants: {

package/src/recipes/divider.ts

@@ -20,7 +20,7 @@ const dividerSlotRecipe = defineSlotRecipe({
       borderColor: 'gray.100',
       color: 'gray.600',
       _nextTheme: {
-        color: 'text.secondary',
+        color: 'text.secondary'
       },
       _before: {
         content: '""',
@@ -30,7 +30,7 @@ const dividerSlotRecipe = defineSlotRecipe({
         borderColor: 'gray.100',
         _nextTheme: {
           borderColor: 'border.default'
-        },
+        }
       },
       _after: {
         content: '""',
@@ -40,7 +40,7 @@ const dividerSlotRecipe = defineSlotRecipe({
         borderColor: 'gray.100',
         _nextTheme: {
           borderColor: 'border.default'
-        },
+        }
       }
     }
   }

package/src/recipes/form-control.ts

@@ -18,7 +18,7 @@ const formControlSlotRecipe = defineSlotRecipe({
       color: 'red.400',
       marginLeft: '1',
       _nextTheme: {
-        color: 'text.danger',
+        color: 'text.danger'
       }
     },
     helpText: {
@@ -26,7 +26,7 @@ const formControlSlotRecipe = defineSlotRecipe({
       fontSize: 'sm',
       marginTop: '1',
       _nextTheme: {
-        color: 'text.secondary',
+        color: 'text.secondary'
       }
     },
     errorMessage: {
@@ -37,7 +37,7 @@ const formControlSlotRecipe = defineSlotRecipe({
       verticalAlign: 'middle',
       display: 'flex',
       _nextTheme: {
-        color: 'text.danger',
+        color: 'text.danger'
       }
     }
   },

package/src/recipes/index.ts

@@ -64,6 +64,7 @@ import {
 import { colorPickerSlotRecipe } from './color-picker'
 import { sliderSlotRecipe } from './slider'
 import { tourSlotRecipe } from './tour'
+import { textlinkRecipe } from './textlink'
 
 export const recipes = {
   buttonRecipe,
@@ -91,7 +92,8 @@ export const recipes = {
   dateItemRecipe,
   monthItemRecipe,
   yearItemRecipe,
-  timeItemRecipe
+  timeItemRecipe,
+  textlinkRecipe
 }
 
 export const slotRecipes = {

package/src/recipes/input.ts

@@ -19,7 +19,7 @@ const inputSlotRecipe = defineSlotRecipe({
         '& > [data-pixel-component=MpInputClear]': {
           '--mp-input--right': '12px'
         }
-      },
+      }
     },
     control: {
       minWidth: '22',
@@ -40,15 +40,15 @@ const inputSlotRecipe = defineSlotRecipe({
       _isFullWidth: {
         width: 'full'
       },
-      _placeholder: { 
-        color: 'gray.400',
+      _placeholder: {
+        color: 'gray.400'
       },
       _nextTheme: {
         color: 'text.default',
         caretColor: 'border.selected',
-        _placeholder: { 
-          borderColor: 'text.placeholder',
-        },
+        _placeholder: {
+          borderColor: 'text.placeholder'
+        }
       }
     },
     clear: {
@@ -69,7 +69,7 @@ const inputSlotRecipe = defineSlotRecipe({
         opacity: 'var(--mp-input--opacity)'
       },
       _nextTheme: {
-        color: 'icon.default',
+        color: 'icon.default'
       }
     }
   },
@@ -90,7 +90,7 @@ const inputSlotRecipe = defineSlotRecipe({
             borderColor: 'gray.400',
             _invalid: {
               borderColor: 'red.400'
-            },
+            }
           },
           _focus: {
             borderColor: 'blue.500',
@@ -129,13 +129,13 @@ const inputSlotRecipe = defineSlotRecipe({
               borderColor: 'border.focused',
               boxShadow: 'focus',
               _hover: {
-                borderColor: 'border.focused',
+                borderColor: 'border.focused'
               },
               _invalid: {
                 borderColor: 'border.focused',
                 _hover: {
-                  borderColor: 'border.focused',
-                },
+                  borderColor: 'border.focused'
+                }
               }
             },
             _disabled: {
@@ -144,12 +144,12 @@ const inputSlotRecipe = defineSlotRecipe({
               borderColor: 'border.disabled',
               _hover: {
                 borderColor: 'border.disabled',
-                backgroundColor: 'background.disabled',
-              },
+                backgroundColor: 'background.disabled'
+              }
             },
             _invalid: {
               borderColor: 'border.danger'
-            },
+            }
           }
         }
       }
@@ -195,7 +195,7 @@ const inputGroupSlotRecipe = defineSlotRecipe({
       '&[data-with-left-addon=true]': {
         '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
           paddingLeft: 'calc(var(--mp-input-offset--left) + 14px)'
-        },
+        }
       },
       '&[data-with-clearable=true]': {
         '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
@@ -208,7 +208,7 @@ const inputGroupSlotRecipe = defineSlotRecipe({
       '&[data-with-left-bg-addon=true]': {
         '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
           paddingLeft: 'calc(var(--mp-input-offset--left) + 14px)'
-        },
+        }
       },
       '&[data-with-right-addon=true]': {
         '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
@@ -245,7 +245,7 @@ const inputGroupSlotRecipe = defineSlotRecipe({
         },
         '&:has(input:disabled) [data-pixel-component=MpInputAddon][data-has-background=true]': {
           backgroundColor: 'background.neutral.subtle.pressed'
-        },
+        }
       }
     }
   },
@@ -268,11 +268,11 @@ const inputAddonSlotRecipe = defineSlotRecipe({
       zIndex: '2',
       transition: 'all 250ms',
       _hasBackground: {
-        backgroundColor: 'gray.50',
+        backgroundColor: 'gray.50'
       },
       _nextTheme: {
         _hasBackground: {
-          backgroundColor: 'background.neutral.subtle',
+          backgroundColor: 'background.neutral.subtle'
         }
       }
     }
@@ -304,12 +304,12 @@ const inputAddonSlotRecipe = defineSlotRecipe({
           height: '6.5',
           borderRadius: '2xs',
           _hasBackground: {
-            _placementLeft: { 
+            _placementLeft: {
               left: '0.5',
               minWidth: '24px',
               justifyContent: 'center'
             },
-            _placementRight: { 
+            _placementRight: {
               right: '0.5',
               minWidth: '24px',
               justifyContent: 'center'
@@ -322,12 +322,12 @@ const inputAddonSlotRecipe = defineSlotRecipe({
           height: '32px',
           borderRadius: 'sm',
           _hasBackground: {
-            _placementLeft: { 
+            _placementLeft: {
               left: '3px',
               minWidth: '32px',
               justifyContent: 'center'
             },
-            _placementRight: { 
+            _placementRight: {
               right: '3px',
               minWidth: '32px',
               justifyContent: 'center'