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

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/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

@@ -15,7 +15,7 @@ const textlinkRecipe = defineRecipe({
     },
     _loading: {
       background: 'white'
-    },
+    }
   },
   variants: {
     variant: {
@@ -30,11 +30,11 @@ const textlinkRecipe = defineRecipe({
         _nextTheme: {
           color: 'text.link',
           _hover: {
-            color: 'text.link',
+            color: 'text.link'
           },
           _active: {
             color: 'text.link.pressed'
-          },
+          }
         }
       },
       secondary: {
@@ -43,16 +43,16 @@ const textlinkRecipe = defineRecipe({
           color: 'gray.400'
         },
         _active: {
-          color: 'gray.700',
+          color: 'gray.700'
         },
         _nextTheme: {
           color: 'text.secondary',
           _hover: {
-            color: 'text.secondary',
+            color: 'text.secondary'
           },
           _active: {
             color: 'text.secondary.pressed'
-          },
+          }
         }
       },
       danger: {
@@ -66,13 +66,13 @@ const textlinkRecipe = defineRecipe({
         _nextTheme: {
           color: 'text.danger',
           _hover: {
-            color: 'text.danger',
+            color: 'text.danger'
           },
           _active: {
             color: 'text.danger.pressed'
-          },
+          }
         }
-      },
+      }
     }
   },
   compoundVariants: [
@@ -99,7 +99,10 @@ const textlinkRecipe = defineRecipe({
         }
       }
     }
-  ]
+  ],
+  defaultVariants: {
+    variant: 'primary',
+  }
 })
 
-export { textlinkRecipe}
+export { textlinkRecipe }

package/src/recipes/timeline.ts

@@ -145,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',
@@ -155,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: {
@@ -168,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,14 +16,14 @@ 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'
       }
     }
   },
@@ -38,40 +38,40 @@ const toastSlotRecipe = defineSlotRecipe({
     {
       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: { 
+        root: {
           borderRadius: '999px',
           border: 'none',
           backgroundColor: 'overlay',
           _nextTheme: {
-            backgroundColor: 'background.overlay',
-          } 
+            backgroundColor: 'background.overlay'
+          }
         },
         label: {
           color: 'white',
           _nextTheme: {
-            color: 'text.inverse-static',
+            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}'
     }
   }
-})
+})

package/src/tokens/colors.ts

@@ -138,5 +138,5 @@ export const colors = defineTokens.colors({
     qontak: { value: '#2979FF' },
     talenta: { value: '#F22929' },
     university: { value: '#448AFF' }
-  },
-})
+  }
+})

package/src/tokens/spacing.ts

@@ -1,14 +1,14 @@
 import { defineTokens } from '@pandacss/dev'
 
 export const spacing = defineTokens.spacing({
-  0: { value: '0'},
+  0: { value: '0' },
   0.5: { value: '0.125rem', description: '2px' },
   1: { value: '0.25rem', description: '4px' },
   1.5: { value: '0.375rem', description: '6px' },
   2: { value: '0.5rem', description: '8px' },
   3: { value: '0.75rem', description: '12px' },
   4: { value: '1rem', description: '16px' },
-  5: { value: '1.3rem', description: '20px'  },
+  5: { value: '1.3rem', description: '20px' },
   6: { value: '1.5rem', description: '24px' },
   8: { value: '2rem', description: '32px' },
   12: { value: '3rem', description: '48px' },

package/src/tokens-next/radii.ts

@@ -7,4 +7,4 @@ export const radii = defineTokens.radii({
   lg: { value: '0.5rem', description: '8px' },
   xl: { value: '0.75rem', description: '12px' },
   full: { value: '999px' }
-})
+})

package/src/tokens-next/shadows.ts

@@ -2,16 +2,28 @@ import { defineTokens } from '@pandacss/dev'
 
 export const shadows = defineTokens.shadows({
   xs: {
-    value: ['0px 2px 4px 0px {colors.background.shadow}', '0px 0px 2px 0px {colors.background.shadow}']
+    value: [
+      '0px 2px 4px 0px {colors.background.shadow}',
+      '0px 0px 2px 0px {colors.background.shadow}'
+    ]
   },
   sm: {
-    value: ['0px 10px 15px -3px {colors.background.shadow}', '0px 4px 6px -2px {colors.background.shadow}']
+    value: [
+      '0px 10px 15px -3px {colors.background.shadow}',
+      '0px 4px 6px -2px {colors.background.shadow}'
+    ]
   },
   md: {
-    value: ['0px 20px 25px -5px {colors.background.shadow}', '0px 10px 10px -5px {colors.background.shadow}']
+    value: [
+      '0px 20px 25px -5px {colors.background.shadow}',
+      '0px 10px 10px -5px {colors.background.shadow}'
+    ]
   },
   lg: {
-    value: ['0px 25px 30px -10px {colors.background.shadow}', '0px 15px 15px -10px {colors.background.shadow}']
+    value: [
+      '0px 25px 30px -10px {colors.background.shadow}',
+      '0px 15px 15px -10px {colors.background.shadow}'
+    ]
   },
   focus: {
     value: '0 0 0 1px {colors.border.focused}'

package/src/tokens-next/spacing.ts

@@ -8,7 +8,7 @@ export const spacing = defineTokens.spacing({
   2: { value: '0.5rem', description: '8px' },
   3: { value: '0.75rem', description: '12px' },
   4: { value: '1rem', description: '16px' },
-  5: { value: '1.3rem', description: '20px'  },
+  5: { value: '1.3rem', description: '20px' },
   6: { value: '1.5rem', description: '24px' },
   8: { value: '2rem', description: '32px' },
   10: { value: '2.5rem', description: '40px' },