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

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',
@@ -34,7 +34,8 @@ const popoverContentRecipe = defineRecipe({
   defaultVariants: {
     isDark: false,
     isUnstyled: false
-  }
+  },
+  staticCss: ['*']
 })
 
 const popoverListRecipe = defineRecipe({
@@ -83,7 +84,7 @@ const popoverListItemRecipe = defineRecipe({
         color: 'text.default'
       }
     },
-    _active: {
+    '&[data-active="true"]': {
       background: 'ice.50',
       color: 'dark',
       outline: 0,

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%)'
         }
       }
     }

package/src/recipes/table.ts

@@ -16,7 +16,7 @@ const tableRecipe = defineRecipe({
           '& > td': {
             backgroundColor: 'gray.50',
             _nextTheme: {
-              background: 'background.neutral.hovered',
+              background: 'background.neutral.hovered'
             }
           }
         }
@@ -45,7 +45,7 @@ const tableRecipe = defineRecipe({
     '& th, & td': {
       cursor: 'default',
       paddingLeft: '2',
-      paddingRight: '4', 
+      paddingRight: '4',
       height: '52px',
       textStyle: 'label.md',
       textAlign: 'left',
@@ -56,21 +56,21 @@ const tableRecipe = defineRecipe({
       _nextTheme: {
         color: 'text.default',
         borderBottomWidth: 'sm',
-        borderColor: 'border.default',
+        borderColor: 'border.default'
       }
     },
     '& th': {
       fontWeight: 'semiBold',
       background: 'gray.25',
       _nextTheme: {
-        background: 'background.surface',
+        background: 'background.surface'
       }
     },
     '& td': {
       fontWeight: 'regular',
       backgroundColor: 'white',
       _nextTheme: {
-        background: 'background.neutral',
+        background: 'background.neutral'
       }
     },
     '& th[data-table-cell-fixed=true], & td[data-table-cell-fixed=true]': {

package/src/recipes/tabs.ts

@@ -197,8 +197,8 @@ const tabSelectedBorderRecipe = defineRecipe({
         _nextTheme: {
           background: 'border.selected',
           _groupHover: {
-            background: 'border.selected',
-          },
+            background: 'border.selected'
+          }
         }
       }
     },

package/src/recipes/tag.ts

@@ -124,7 +124,8 @@ const tagSlotRecipe = defineSlotRecipe({
   defaultVariants: {
     size: 'md',
     variant: 'gray'
-  }
+  },
+  staticCss: ['*']
 })
 
 export { tagSlotRecipe }

package/src/recipes/textarea.ts

@@ -5,7 +5,7 @@ const textareaRecipe = defineRecipe({
   jsx: ['MpTextarea', 'mp-textarea'],
   base: {
     minHeight: '20',
-    resize: 'both',
+    resize: 'both'
   }
 })
 

package/src/recipes/textlink.ts

@@ -0,0 +1,105 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const textlinkRecipe = defineRecipe({
+  className: 'textlink',
+  jsx: ['MpTextlink', 'mp-textlink'],
+  base: {
+    display: 'inline-flex !important',
+    gap: '1',
+    py: '0 !important',
+    px: '2px !important',
+    backgroundColor: 'transparent !important',
+    textStyle: 'label.md !important',
+    _hover: {
+      textDecoration: 'underline'
+    },
+    _loading: {
+      background: 'white'
+    }
+  },
+  variants: {
+    variant: {
+      primary: {
+        color: 'blue.400',
+        _hover: {
+          color: 'blue.400'
+        },
+        _active: {
+          color: 'blue.700'
+        },
+        _nextTheme: {
+          color: 'text.link',
+          _hover: {
+            color: 'text.link'
+          },
+          _active: {
+            color: 'text.link.pressed'
+          }
+        }
+      },
+      secondary: {
+        color: 'gray.400',
+        _hover: {
+          color: 'gray.400'
+        },
+        _active: {
+          color: 'gray.700'
+        },
+        _nextTheme: {
+          color: 'text.secondary',
+          _hover: {
+            color: 'text.secondary'
+          },
+          _active: {
+            color: 'text.secondary.pressed'
+          }
+        }
+      },
+      danger: {
+        color: 'red.400',
+        _hover: {
+          color: 'red.400'
+        },
+        _active: {
+          color: 'red.700'
+        },
+        _nextTheme: {
+          color: 'text.danger',
+          _hover: {
+            color: 'text.danger'
+          },
+          _active: {
+            color: 'text.danger.pressed'
+          }
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      variant: ['primary', 'secondary', 'danger'],
+      css: {
+        _disabled: {
+          cursor: 'not-allowed',
+          color: 'gray.100',
+          _hover: {
+            color: 'gray.100',
+            textDecoration: 'none'
+          },
+          _nextTheme: {
+            color: 'text.disabled',
+            _hover: {
+              color: 'text.disabled',
+              textDecoration: 'none'
+            }
+          }
+        },
+        _focusVisible: {
+          boxShadow: 'focus'
+        }
+      }
+    }
+  ]
+})
+
+export { textlinkRecipe }

package/src/recipes/timeline.ts

@@ -109,11 +109,13 @@ const timelineLogSlotRecipe = defineSlotRecipe({
   base: {
     root: {
       display: 'flex',
-      flexDirection: 'column'
+      flexDirection: 'column',
+      gap: '1'
     },
     log: {
       display: 'flex',
-      cursor: 'pointer'
+      cursor: 'pointer',
+      gap: '1'
     },
     logText: {
       color: 'gray.400',
@@ -143,7 +145,11 @@ const timelineSeparatorSlotRecipe = defineSlotRecipe({
     root: {
       display: 'flex',
       flexDirection: 'column',
-      alignItems: 'center'
+      alignItems: 'center',
+      '&[data-accordion-child=true]': {
+        alignItems: 'start',
+        marginLeft: '9px'
+      }
     },
     topConnector: {
       height: '6px',
@@ -153,8 +159,20 @@ const timelineSeparatorSlotRecipe = defineSlotRecipe({
       '&[data-position=first]': {
         backgroundColor: 'transparent'
       },
+      '&[data-hide=true]': {
+        backgroundColor: 'transparent'
+      },
+      '&[data-accordion-child=true]': {
+        roundedBottom: '',
+      },
       _nextTheme: {
-        backgroundColor: 'border.default'
+        backgroundColor: 'border.default',
+        '&[data-position=first]': {
+          backgroundColor: 'transparent'
+        },
+        '&[data-hide=true]': {
+          backgroundColor: 'transparent'
+        },
       }
     },
     bottomConnector: {
@@ -166,10 +184,19 @@ const timelineSeparatorSlotRecipe = defineSlotRecipe({
       '&[data-position=last]': {
         backgroundColor: 'transparent'
       },
+      '&[data-hide=true]': {
+        backgroundColor: 'transparent'
+      },
+      '&[data-accordion-child=true]': {
+        roundedTop: '',
+      },
       _nextTheme: {
         backgroundColor: 'border.default',
         '&[data-position=last]': {
           backgroundColor: 'transparent'
+        },
+        '&[data-hide=true]': {
+          backgroundColor: 'transparent'
         }
       }
     }

package/src/recipes/toast.ts

@@ -16,43 +16,63 @@ const toastSlotRecipe = defineSlotRecipe({
       boxShadow: 'lg',
       zIndex: '1700',
       _nextTheme: {
-        backgroundColor: 'background.neutral',
+        backgroundColor: 'background.neutral'
       }
     },
     label: {
       color: 'dark',
       fontSize: 'md',
       _nextTheme: {
-        color: 'text.default',
+        color: 'text.default'
       }
     }
   },
   variants: {
     variant: {
       success: {},
-      error: {}
+      error: {},
+      greeting: {}
     }
   },
   compoundVariants: [
     {
       variant: 'success',
       css: {
-        root: { 
+        root: {
           borderColor: 'green.700',
           _nextTheme: {
-            borderColor: 'border.success',
-          } 
+            borderColor: 'border.success'
+          }
         }
       }
     },
     {
       variant: 'error',
       css: {
-        root: { 
+        root: {
           borderColor: 'red.700',
           _nextTheme: {
-            borderColor: 'border.danger',
-          } 
+            borderColor: 'border.danger'
+          }
+        }
+      }
+    },
+    {
+      variant: 'greeting',
+      css: {
+        root: {
+          borderRadius: '999px',
+          border: 'none',
+          backgroundColor: 'overlay',
+          _nextTheme: {
+            backgroundColor: 'background.overlay'
+          }
+        },
+        label: {
+          color: 'white',
+          _nextTheme: {
+            color: 'text.inverse-static'
+          }
         }
       }
     }

package/src/recipes/toggle.ts

@@ -136,7 +136,7 @@ const toggleSlotRecipe = defineSlotRecipe({
         _nextTheme: {
           transform: 'translateX(2px)',
           background: 'icon.subtle',
-          borderRadius: 'full',
+          borderRadius: 'full'
         }
       }
     },

package/src/semanticTokens/colors.ts

@@ -379,7 +379,14 @@ export const colors = defineSemanticTokens.colors({
           }
         }
       }
-    }
+    },
+    airene: {
+      value: {
+        base: 'radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)', // Doens't have raw token
+        _light: 'radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)', // Doesn't have raw token
+        _dark: 'radial-gradient(108.28% 139.29% at 0% 0%, #1D2656 0%, #2B2549 100%)' // Doesn't have raw token
+      }
+    },
   },
   nav: {
     parent: {

package/src/semanticTokens/index.ts

@@ -5,4 +5,4 @@ import { spacing } from './spacing'
 export const semanticTokens = defineSemanticTokens({
   colors,
   spacing
-})
+})

package/src/semanticTokens/spacing.ts

@@ -2,58 +2,58 @@ import { defineSemanticTokens } from '@pandacss/dev'
 
 export const spacing = defineSemanticTokens.spacing({
   '4xs': {
-    value : {
+    value: {
       base: '0.125rem'
     }
   },
   '3xs': {
-    value : {
+    value: {
       base: '{spacing.1}'
     }
   },
   '2xs': {
-    value : {
+    value: {
       base: '0.375rem'
     }
   },
   xs: {
-    value : {
+    value: {
       base: '{spacing.2}'
     }
   },
   sm: {
-    value : {
+    value: {
       base: '{spacing.3}'
     }
   },
   md: {
-    value : {
+    value: {
       base: '{spacing.4}'
     }
   },
   lg: {
-    value : {
+    value: {
       base: '{spacing.5}'
     }
   },
   xl: {
-    value : {
+    value: {
       base: '{spacing.6}'
     }
   },
   '2xl': {
-    value : {
+    value: {
       base: '{spacing.8}'
     }
   },
   '3xl': {
-    value : {
+    value: {
       base: '{spacing.10}'
     }
   },
   '4xl': {
-    value : {
+    value: {
       base: '{spacing.20}'
     }
   }
-})
+})