@mekari/pixel3-theme 0.2.2-dev.5 → 0.2.2-dev.7

package/src/recipes/broadcast.ts

@@ -43,116 +43,116 @@ 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: { 
+        container: {
           backgroundColor: 'rose.400',
           _nextTheme: {
-            backgroundColor: 'background.danger.bold',
+            backgroundColor: 'background.danger.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'
-          } 
+          }
         }
-      },
+      }
     }
   },
   compoundVariants: [],

package/src/recipes/button.ts

@@ -291,7 +291,7 @@ const buttonRecipe = defineRecipe({
             '[data-icon-position=right]': {
               paddingLeft: '2',
               paddingRight: '1.5'
-            },
+            }
           },
 
           _nextTheme: {
@@ -405,7 +405,7 @@ const buttonRecipe = defineRecipe({
             _hasIcon: {
               background: 'transparent',
               borderColor: 'transparent'
-            },
+            }
           },
           _hasIcon: {
             background: 'transparent',
@@ -421,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/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'

package/src/recipes/modal.ts

@@ -55,7 +55,7 @@ export const modalSlotRecipe = defineSlotRecipe({
         borderColor: 'border.bold',
         color: 'text.default',
         '&[data-modal-type="drawer"]': {
-          borderColor: 'border.default',
+          borderColor: 'border.default'
         }
       }
     },
@@ -78,7 +78,7 @@ export const modalSlotRecipe = defineSlotRecipe({
       },
       '&[data-modal-presentation="drawer"]': {
         borderTopLeftRadius: 'none',
-        borderTopRightRadius: 'none',
+        borderTopRightRadius: 'none'
       }
     },
     closeButton: {
@@ -130,7 +130,7 @@ export const modalSlotRecipe = defineSlotRecipe({
           borderRadius: 'md'
         }
       }
-    },
+    }
   },
 
   defaultVariants: {

package/src/recipes/popover.ts

@@ -21,7 +21,7 @@ const popoverContentRecipe = defineRecipe({
     isDark: {
       true: {
         background: 'overlay',
-        color: 'white',
+        color: 'white'
       },
       false: {
         background: 'white',

package/src/recipes/rich-text-editor.ts

@@ -59,7 +59,7 @@ const richTextEditorSlotRecipe = defineSlotRecipe({
         },
         _nextTheme: {
           color: 'icon.default'
-        },
+        }
       },
       '& button.mp-popover-list-item': {
         padding: '0',
@@ -134,7 +134,7 @@ const RTEStyleProviderRecipe = defineRecipe({
       cursor: 'pointer',
       textDecoration: 'underline',
       _hover: {
-        color: 'blue.500',
+        color: 'blue.500'
       }
     },
     '& ol, ul': {

package/src/recipes/segmented-control.ts

@@ -20,7 +20,7 @@ const segmentedControlSlotRecipe = defineSlotRecipe({
       outline: '0px solid transparent',
       padding: '1',
       _nextTheme: {
-        borderColor: 'border.form',
+        borderColor: 'border.form'
       }
     },
     item: {
@@ -57,7 +57,7 @@ const segmentedControlSlotRecipe = defineSlotRecipe({
           color: 'text.secondary',
           backgroundColor: 'background.neutral.hovered',
           '& > svg': {
-            color: 'icon.default',
+            color: 'icon.default'
           }
         }
       },
@@ -68,7 +68,7 @@ const segmentedControlSlotRecipe = defineSlotRecipe({
           color: 'text.selected',
           backgroundColor: 'background.brand.selected',
           '& > svg': {
-            color: 'icon.selected',
+            color: 'icon.selected'
           }
         }
       },
@@ -79,7 +79,7 @@ const segmentedControlSlotRecipe = defineSlotRecipe({
           color: 'text.disabled',
           backgroundColor: 'background.disabled',
           '& > svg': {
-            color: 'icon.disabled',
+            color: 'icon.disabled'
           }
         }
       },
@@ -87,14 +87,15 @@ const segmentedControlSlotRecipe = defineSlotRecipe({
         {
           color: 'blue.700'
         },
-      'input[type=radio]:checked:focus-visible + &, input[type=radio][aria-checked=mixed]:focus-visible + &': {
-        color: 'blue.700',
-        boxShadow: 'outer',
-        _nextTheme: {
-          color: 'text.selected',
-          boxShadow: '0 0 0 2px {colors.border.focused}'
-        }
-      },
+      'input[type=radio]:checked:focus-visible + &, input[type=radio][aria-checked=mixed]:focus-visible + &':
+        {
+          color: 'blue.700',
+          boxShadow: 'outer',
+          _nextTheme: {
+            color: 'text.selected',
+            boxShadow: '0 0 0 2px {colors.border.focused}'
+          }
+        },
       'input[type=radio]:checked:disabled + &, input[type=radio][aria-checked=mixed]:disabled + &':
         {
           color: 'gray.400',
@@ -108,7 +109,7 @@ const segmentedControlSlotRecipe = defineSlotRecipe({
       _nextTheme: {
         color: 'text.secondary',
         '& > svg': {
-          color: 'icon.default',
+          color: 'icon.default'
         }
       }
     },

package/src/recipes/select.ts

@@ -55,8 +55,8 @@ const selectSlotRecipe = defineSlotRecipe({
       _isFullWidth: {
         width: 'full'
       },
-      _placeholder: { 
-        color: 'gray.400',
+      _placeholder: {
+        color: 'gray.400'
       },
       _nextTheme: {
         backgroundColor: 'background.neutral',
@@ -72,13 +72,13 @@ const selectSlotRecipe = 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: {
@@ -87,14 +87,14 @@ const selectSlotRecipe = defineSlotRecipe({
           borderColor: 'border.disabled',
           _hover: {
             borderColor: 'border.disabled',
-            backgroundColor: 'background.disabled',
-          },
+            backgroundColor: 'background.disabled'
+          }
         },
         _invalid: {
           borderColor: 'border.danger'
         },
-        _placeholder: { 
-          borderColor: 'text.placeholder',
+        _placeholder: {
+          borderColor: 'text.placeholder'
         }
       }
     },

package/src/recipes/slider.ts

@@ -21,7 +21,7 @@ const sliderSlotRecipe = defineSlotRecipe({
       flexDirection: 'column',
       gap: '10px'
     },
-    labelWrapper: { 
+    labelWrapper: {
       display: 'flex',
       justifyContent: 'space-between'
     },
@@ -61,18 +61,20 @@ const sliderSlotRecipe = defineSlotRecipe({
         boxShadow: 'focus',
 
         _nextTheme: {
-          borderColor  : 'border.focused',
-          boxShadow: 'focus',
-        },
+          borderColor: 'border.focused',
+          boxShadow: 'focus'
+        }
       },
 
       _disabled: {
         '&::-webkit-slider-thumb': {
           cursor: 'not-allowed',
-          background: 'radial-gradient(circle, var(--mp-colors-gray-100) 40%, var(--mp-colors-white) 50%)',
-          
+          background:
+            'radial-gradient(circle, var(--mp-colors-gray-100) 40%, var(--mp-colors-white) 50%)',
+
           _nextTheme: {
-            background: 'radial-gradient(circle, var(--mp-colors-icon-disabled) 40%, var(--mp-colors-background-neutral) 50%)'
+            background:
+              'radial-gradient(circle, var(--mp-colors-icon-disabled) 40%, var(--mp-colors-background-neutral) 50%)'
           }
         }
       },
@@ -80,7 +82,7 @@ const sliderSlotRecipe = defineSlotRecipe({
       '&[minpressed=true], &[maxpressed=true]': {
         '&::-webkit-slider-thumb': {
           borderColor: 'blue.400',
-          
+
           _nextTheme: {
             borderColor: 'border.brand'
           }
@@ -96,9 +98,11 @@ const sliderSlotRecipe = defineSlotRecipe({
         borderRadius: 'full',
         borderStyle: 'solid',
         borderColor: 'gray.100',
-        background: 'radial-gradient(circle, var(--mp-colors-blue-400) 40%, var(--mp-colors-white) 50%)',
+        background:
+          'radial-gradient(circle, var(--mp-colors-blue-400) 40%, var(--mp-colors-white) 50%)',
         boxShadow: 'sm',
-        filter: 'drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.05)) drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.10))',
+        filter:
+          'drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.05)) drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.10))',
         transition: 'border-color 250ms',
 
         _hover: {
@@ -111,7 +115,8 @@ const sliderSlotRecipe = defineSlotRecipe({
 
         _nextTheme: {
           borderColor: 'border.default',
-          background: 'radial-gradient(circle, var(--mp-colors-border-brand) 40%, var(--mp-colors-background-neutral) 50%)'
+          background:
+            'radial-gradient(circle, var(--mp-colors-border-brand) 40%, var(--mp-colors-background-neutral) 50%)'
         }
       }
     }