@okshaun/components 1.0.1 → 2.0.0

package/src/recipes/button.ts

@@ -6,8 +6,8 @@ const baseButtonStyles = {
     appearance: 'none',
     display: 'flex',
     alignItems: 'center',
-    gap: 4,
-    minWidth: 0,
+    gap: '4',
+    minWidth: '0',
     width: 'fit',
     height: 'fit',
     transitionDuration: 'fast',
@@ -17,33 +17,28 @@ const baseButtonStyles = {
     verticalAlign: 'middle',
     fontFamily: 'sans',
     fontWeight: 'medium',
-    fontSize: 16,
+    fontSize: '16',
     lineHeight: 'default',
-    borderWidth: 1,
+    borderWidth: '1',
     borderStyle: 'solid',
     borderColor: 'transparent',
-    borderRadius: 4,
-    outlineWidth: 2,
+    borderRadius: '4',
+    outlineWidth: '2',
     outlineStyle: 'solid',
     outlineColor: 'transparent',
     textDecoration: 'none',
     whiteSpace: 'nowrap',
     cursor: 'pointer',
-    _focusVisible: {
-      outlineColor: 'border.focused',
-    },
     _disabled: {
       cursor: 'not-allowed',
-      bg: 'bg.disabled',
-      color: 'text.disabled',
-      borderColor: 'border.disabled',
-      icon: { fill: 'icon.disabled' },
-      _hover: {
-        bg: 'bg.disabled',
-        color: 'text.disabled',
-        borderColor: 'border.disabled',
-        icon: { fill: 'icon.disabled' },
-      },
+      opacity: '0.3',
+    },
+    _loading: {
+      cursor: 'not-allowed',
+      opacity: '0.3',
+    },
+    _focusVisible: {
+      outlineColor: 'border.focused',
     },
     _selected: {
       bg: 'bg.selected',
@@ -66,72 +61,143 @@ const buttonVariants = {
       container: {
         bg: 'bg.neutral',
         color: 'text',
-        icon: { fill: 'icon.decorative' },
         _hover: {
           bg: 'bg.neutral.hovered',
-          icon: { fill: 'icon.decorative.hovered' },
         },
         _active: {
           bg: 'bg.neutral.pressed',
-          icon: { fill: 'icon.decorative.hovered' },
         },
       },
+      icon: {
+        fill: 'icon.decorative',
+        mixBlendMode: { base: 'multiply', _dark: 'screen' },
+        _groupHover: { fill: 'current' },
+        _groupActive: { fill: 'current' },
+      },
     },
     primary: {
       container: {
-        bg: 'bg.brand.boldest',
+        bg: 'bg.neutral.boldest',
         color: 'text.inverse',
-        icon: { fill: 'icon.decorative.inverse' },
         _hover: {
-          bg: 'bg.brand.boldest.hovered',
-          icon: { fill: 'icon.inverse' },
+          bg: 'bg.neutral.bold.hovered',
         },
         _active: {
-          bg: 'bg.brand.boldest.pressed',
-          icon: { fill: 'icon.inverse' },
+          bg: 'bg.neutral.bold.pressed',
+        },
+      },
+      icon: {
+        fill: 'icon.decorative.inverse.subtle',
+        mixBlendMode: { base: 'screen', _dark: 'multiply' },
+        _groupHover: { fill: 'icon.decorative.inverse' },
+        _groupActive: { fill: 'icon.decorative.inverse' },
+        _groupDisabled: {
+          fill: 'icon.decorative.inverse.subtle',
         },
       },
     },
-    subtle: {
+    hollow: {
       container: {
         bg: 'bg.neutral.subtle',
-        color: 'text.subtle',
-        icon: { fill: 'icon.decorative' },
+        borderColor: 'border',
+        color: 'text',
         _hover: {
           bg: 'bg.neutral.subtle.hovered',
-          color: 'text',
-          icon: { fill: 'icon.decorative.hovered' },
         },
         _active: {
           bg: 'bg.neutral.subtle.pressed',
-          color: 'text',
-          icon: { fill: 'icon.decorative.hovered' },
         },
       },
+      icon: {
+        fill: 'icon.decorative',
+        mixBlendMode: { base: 'multiply', _dark: 'screen' },
+        _groupHover: { fill: 'current' },
+        _groupActive: { fill: 'current' },
+      },
     },
-    hollow: {
+    ghost: {
       container: {
         bg: 'bg.neutral.subtle',
-        color: 'text.subtle',
-        borderColor: 'border',
-        icon: { fill: 'icon.decorative' },
+        color: 'text',
         _hover: {
           bg: 'bg.neutral.subtle.hovered',
-          color: 'text',
-          borderColor: 'border',
-          icon: { fill: 'icon.decorative.hovered' },
         },
         _active: {
           bg: 'bg.neutral.subtle.pressed',
-          color: 'text',
-          borderColor: 'border',
-          icon: { fill: 'icon.decorative.hovered' },
         },
-        _disabled: {
-          borderColor: 'border.disabled',
-          _hover: {
-            borderColor: 'border.disabled',
-          },
+      },
+      icon: {
+        fill: 'icon.decorative',
+        mixBlendMode: { base: 'multiply', _dark: 'screen' },
+        _groupHover: { fill: 'current' },
+        _groupActive: { fill: 'current' },
+      },
+    },
+    danger: {
+      container: {
+        bg: 'red.50',
+        color: 'neutral.0',
+        _hover: {
+          bg: 'red.40',
+        },
+        _active: {
+          bg: 'red.60',
+        },
+      },
+      icon: {
+        fill: 'icon.decorative.inverse',
+        mixBlendMode: 'screen',
+        _groupHover: { fill: 'icon.decorative.inverse' },
+        _groupActive: { fill: 'icon.decorative.inverse' },
+        _groupDisabled: {
+          fill: 'icon.decorative.inverse',
+        },
+      },
+    },
+    selected: {
+      container: {
+        bg: 'bg.selected',
+        color: 'text.selected',
+        icon: { fill: 'icon.selected' },
+        _hover: {
+          bg: 'bg.selected.hovered',
+          color: 'text.selected.hovered',
+          icon: { fill: 'icon.selected' },
+        },
+        _active: {
+          bg: 'bg.selected.pressed',
+          color: 'text.selected',
+          icon: { fill: 'icon.selected' },
+        },
+      },
+      icon: {
+        fill: 'icon.selected',
+        mixBlendMode: { base: 'multiply', _dark: 'screen' },
+        _groupHover: { fill: 'icon.selected' },
+        _groupActive: { fill: 'icon.selected' },
+        _groupDisabled: {
+          fill: 'icon.selected',
+        },
+      },
+    },
+    selectedBold: {
+      container: {
+        bg: 'bg.selected.bold',
+        color: 'text.inverse',
+        _hover: {
+          bg: 'bg.selected.bold.hovered',
+        },
+        _active: {
+          bg: 'bg.selected.bold.pressed',
+        },
+      },
+      icon: {
+        fill: 'icon.inverse',
+        mixBlendMode: { base: 'screen', _dark: 'multiply' },
+        _groupHover: { fill: 'icon.inverse' },
+        _groupActive: { fill: 'icon.inverse' },
+        _groupDisabled: {
+          fill: 'icon.inverse',
         },
       },
     },
@@ -146,6 +212,17 @@ export const buttonRecipe = defineSlotRecipe({
   variants: {
     ...buttonVariants,
     size: {
+      sm: {
+        container: {
+          fontSize: '14',
+          py: '1',
+          px: '8',
+        },
+        icon: {
+          w: '22',
+          h: '22',
+        },
+      },
       md: {
         container: {
           fontSize: '16',
@@ -157,17 +234,6 @@ export const buttonRecipe = defineSlotRecipe({
           h: '24',
         },
       },
-      xl: {
-        container: {
-          fontSize: '20',
-          py: '9',
-          px: '16',
-        },
-        icon: {
-          w: '28',
-          h: '28',
-        },
-      },
       lg: {
         container: {
           fontSize: '16',
@@ -179,15 +245,15 @@ export const buttonRecipe = defineSlotRecipe({
           h: '24',
         },
       },
-      sm: {
+      xl: {
         container: {
-          fontSize: '14',
-          py: '1',
-          px: '8',
+          fontSize: '20',
+          py: '9',
+          px: '16',
         },
         icon: {
-          w: '22',
-          h: '22',
+          w: '28',
+          h: '28',
         },
       },
     },
@@ -200,31 +266,31 @@ export const buttonRecipe = defineSlotRecipe({
   },
   compoundVariants: [
     {
-      size: 'md',
+      size: 'sm',
       iconBefore: true,
       css: {
-        container: { ps: '3' },
+        container: { ps: '2' },
       },
     },
     {
-      size: 'md',
+      size: 'sm',
       iconAfter: true,
       css: {
-        container: { pe: '3' },
+        container: { pe: '2' },
       },
     },
     {
-      size: 'sm',
+      size: 'md',
       iconBefore: true,
       css: {
-        container: { ps: '2' },
+        container: { ps: '3' },
       },
     },
     {
-      size: 'sm',
+      size: 'md',
       iconAfter: true,
       css: {
-        container: { pe: '2' },
+        container: { pe: '3' },
       },
     },
     {
@@ -270,16 +336,6 @@ export const iconButtonRecipe = defineSlotRecipe({
   variants: {
     ...buttonVariants,
     size: {
-      md: {
-        container: {
-          fontSize: '16',
-          p: '3',
-        },
-        icon: {
-          w: '24',
-          h: '24',
-        },
-      },
       sm: {
         container: {
           fontSize: '14',
@@ -290,6 +346,16 @@ export const iconButtonRecipe = defineSlotRecipe({
           h: '22',
         },
       },
+      md: {
+        container: {
+          fontSize: '16',
+          p: '3',
+        },
+        icon: {
+          w: '24',
+          h: '24',
+        },
+      },
       lg: {
         container: {
           fontSize: '16',

package/src/recipes/card.ts

@@ -32,6 +32,11 @@ export const cardRecipe = defineRecipe({
     outlineStyle: 'solid',
     outlineColor: 'transparent',
     outlineOffset: '0',
+    overflow: 'hidden',
+    _disabled: {
+      opacity: '0.4',
+      cursor: 'not-allowed',
+    },
   },
   variants: {
     variant: {
@@ -143,6 +148,5 @@ export const cardRecipe = defineRecipe({
   ],
   defaultVariants: {
     variant: 'default',
-    interactive: false,
   },
 });

package/src/recipes/checkbox.ts

@@ -3,20 +3,16 @@ import { defineSlotRecipe } from '@pandacss/dev';
 export const checkboxRecipe = defineSlotRecipe({
   className: 'checkbox',
   jsx: ['Checkbox'],
-  slots: ['container', 'input', 'indicator'],
+  slots: ['container', 'input', 'indicator', 'checkBg'],
   base: {
     container: {
       position: 'relative',
       display: 'inline-grid',
+      placeContent: 'center',
       gridTemplateColumns: 'auto 1fr',
-      gap: 4,
       alignItems: 'start',
       cursor: 'pointer',
       userSelect: 'none',
-      color: 'text',
-      _error: {
-        color: 'text.danger',
-      },
     },
     input: {
       position: 'absolute',
@@ -25,15 +21,17 @@ export const checkboxRecipe = defineSlotRecipe({
       height: 'full',
       margin: '0',
       padding: '0',
-      zIndex: 1,
+      zIndex: 'raised',
       cursor: 'inherit',
       "& ~ [name='checkbox']": {
         display: 'inline-grid',
+        zIndex: '3',
       },
       _checked: {
         "& ~ [name='checkbox-checked']": {
           display: 'inline-grid',
           fill: 'icon',
+          zIndex: '2',
         },
         "& ~ [name='checkbox']": {
           display: 'none',
@@ -43,26 +41,17 @@ export const checkboxRecipe = defineSlotRecipe({
         "& ~ [name='checkbox-indeterminate']": {
           display: 'inline-grid',
           fill: 'icon',
-          _disabled: {},
+          zIndex: '3',
         },
         "& ~ [name='checkbox']": {
           display: 'none',
         },
       },
-      _disabled: {
-        '& ~ svg': {
-          // fill: 'icon.disabled',
-          pointerEvents: 'none',
-        },
-        display: 'inline-grid',
-        _hover: {
-          cursor: 'not-allowed',
-        },
-      },
       _error: {
         display: 'inline-grid',
-        '& ~ svg': {
-          fill: 'icon.danger',
+        '& ~ svg:not([name="square"])': {
+          fill: 'red.50',
+          zIndex: '3',
         },
       },
       _focusVisible: {
@@ -70,18 +59,28 @@ export const checkboxRecipe = defineSlotRecipe({
           display: 'inline-grid',
           position: 'absolute',
           fill: 'border.focused',
+          zIndex: '2',
         },
       },
     },
     indicator: {
-      placeContent: 'center',
       display: 'none',
-      width: 24,
-      height: 24,
+      width: '24',
+      height: '24',
+      zIndex: '3',
       "&:is([name='checkbox'])": {
-        display: 'inline-grid',
         fill: 'icon.subtlest',
+        zIndex: '3',
       },
     },
+    checkBg: {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      width: '24',
+      height: '24',
+      fill: 'surface',
+      zIndex: 'base',
+    },
   },
 });

package/src/recipes/checkboxInput.ts

@@ -0,0 +1,25 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const checkboxInputBase = {
+  display: 'flex',
+  alignItems: 'start',
+  gap: '4',
+  '&[class*="-label"]': {
+    fontSize: '{sizes.16}',
+    lineHeight: 'default',
+  },
+  _disabled: {
+    opacity: '40%',
+    cursor: 'not-allowed',
+  },
+  _groupDisabled: {
+    opacity: 1, // let FormField handle disabled state opacity
+  },
+};
+
+export const checkboxInputRecipe = defineRecipe({
+  className: 'checkboxInput',
+  jsx: ['CheckboxInput', 'Checkboxinput'],
+  base: checkboxInputBase,
+  variants: {},
+});

package/src/recipes/chip.ts

@@ -19,24 +19,16 @@ const chipBase = {
     transitionTimingFunction: 'default',
     userSelect: 'none',
     border: 'none',
-    outlineWidth: 2,
+    outlineWidth: '2',
     outlineStyle: 'solid',
     outlineColor: 'transparent',
     bg: 'bg.neutral',
     color: 'text',
-    icon: {
-      fill: 'icon.decorative',
-      transitionDuration: 'fast',
-      transitionProperty: 'fill',
-      transitionTimingFunction: 'default',
-    },
     _hover: {
       bg: 'bg.neutral.hovered',
-      icon: { fill: 'icon.decorative.hovered' },
     },
     _active: {
       bg: 'bg.neutral.pressed',
-      icon: { fill: 'icon.decorative.hovered' },
     },
     _focusVisible: {
       outlineColor: 'border.focused',
@@ -48,72 +40,78 @@ const chipBase = {
     _deleted: {
       textDecoration: 'line-through',
       cursor: 'not-allowed',
-      opacity: 0.6,
+      opacity: '[0.6]',
     },
     _disabled: {
       cursor: 'not-allowed',
       bg: 'bg.disabled',
       color: 'text.disabled',
       borderColor: 'border.disabled',
-      icon: { fill: 'icon.disabled' },
       _hover: {
         bg: 'bg.disabled',
         color: 'text.disabled',
         borderColor: 'border.disabled',
-        icon: { fill: 'icon.disabled' },
       },
     },
     _selected: {
-      bg: 'bg.brand.boldest',
+      bg: 'bg.neutral.boldest',
       color: 'text.inverse',
-      icon: { fill: 'icon.decorative.inverse' },
       _hover: {
-        bg: 'bg.brand.boldest.hovered',
-        icon: { fill: 'icon.inverse' },
+        bg: 'bg.neutral.bold.hovered',
       },
       _active: {
-        bg: 'bg.brand.boldest.pressed',
-        icon: { fill: 'icon.inverse' },
+        bg: 'bg.neutral.bold.pressed',
       },
     },
   },
-  icon: {
+  chipIcon: {
+    fill: 'icon.decorative',
     aspectRatio: 'square',
     transitionDuration: 'fast',
     transitionProperty: 'fill',
     transitionTimingFunction: 'default',
+    _groupHover: { fill: 'icon.decorative.hovered' },
+    _groupActive: { fill: 'icon.decorative.hovered' },
+    _groupDisabled: { fill: 'icon.decorative' },
+
+    '[data-selected=true] &': {
+      fill: 'icon.decorative.inverse',
+    },
+    '.group:is(:hover, [data-hover])[data-selected=true] &': {
+      fill: 'icon.decorative.inverse.hovered',
+    },
   },
 };
 
 export const chipRecipe = defineSlotRecipe({
   className: 'chip',
   jsx: ['Chip'],
-  slots: ['container', 'icon'],
+  slots: ['container', 'chipIcon'],
   base: chipBase,
   variants: {
     size: {
-      md: {
+      sm: {
         container: {
-          gap: '4',
-          h: '24',
-          px: '8',
-          py: '1',
+          gap: '2',
+          h: '20',
+          px: '6',
+          py: '0',
           fontSize: '14',
         },
-        icon: {
+        chipIcon: {
           w: '20',
           h: '20',
         },
       },
-      sm: {
+      md: {
         container: {
-          gap: '2',
-          h: '20',
-          px: '6',
-          py: '0',
+          gap: '4',
+          h: '24',
+          px: '8',
+          py: '1',
           fontSize: '14',
         },
-        icon: {
+        chipIcon: {
           w: '20',
           h: '20',
         },
@@ -126,7 +124,7 @@ export const chipRecipe = defineSlotRecipe({
           py: '4',
           fontSize: '16',
         },
-        icon: {
+        chipIcon: {
           w: '24',
           h: '24',
         },
@@ -141,28 +139,28 @@ export const chipRecipe = defineSlotRecipe({
   },
   compoundVariants: [
     {
-      size: 'md',
+      size: 'sm',
       before: true,
       css: {
         container: { ps: '2' },
       },
     },
     {
-      size: 'md',
+      size: 'sm',
       after: true,
       css: {
         container: { pe: '2' },
       },
     },
     {
-      size: 'sm',
+      size: 'md',
       before: true,
       css: {
         container: { ps: '2' },
       },
     },
     {
-      size: 'sm',
+      size: 'md',
       after: true,
       css: {
         container: { pe: '2' },

package/src/recipes/code.ts

@@ -1,7 +1,7 @@
 import { defineRecipe } from '@pandacss/dev';
 
 const codeBase = {
-  bg: 'gray.80',
+  bg: 'bg.neutral.inverse',
   position: 'relative',
   overflow: 'auto',
   p: '4',
@@ -13,9 +13,9 @@ const preBase = {
   borderRadius: '8',
   overflow: 'hidden',
   borderWidth: '0',
-  borderColor: 'gray.60',
-  bg: 'gray.80',
-  color: 'gray.10',
+  borderColor: 'border',
+  bg: 'bg.neutral.inverse',
+  color: 'text.inverse.subtlest',
   px: '16',
   py: '8',
   my: '8',