@mekari/pixel3-theme 0.2.1 → 0.2.2-dev.1

package/src/recipes/color-picker.ts

@@ -28,29 +28,86 @@ const colorPickerSlotRecipe = defineSlotRecipe({
       gap: '2'
     },
     popoverTrigger: {
-      display: 'flex',
-      alignItems: 'center',
       cursor: 'pointer',
       position: 'relative',
-      height: '38px',
-      pl: '2',
-      pr: '3',
+      display: 'flex',
+      alignItems: 'center',
+      borderWidth: '1px',
+      borderColor: 'gray.100',
       borderRadius: 'md',
-      border: '1px solid',
+      backgroundColor: 'white',
+      paddingTop: '1.5',
+      paddingBottom: '1.5',
+      paddingLeft: '3',
+      paddingRight: '4',
+      transition: 'all 250ms',
+      outline: 'none',
+      _nextTheme: {
+        borderRadius: 'md',
+        borderColor: 'border.form',
+        background: 'background.neutral'
+      },
+      _hover: {
+        borderColor: 'gray.400',
+        _nextTheme: {
+          borderColor: 'border.form',
+          background: 'background.neutral.hovered'
+        }
+      },
       _focus: {
-        boxShadow: 'outline !important',
-        borderColor: 'blue.400 !important',
-        outline: 'none'
+        boxShadow: 'focus',
+        borderColor: 'blue.400',
+        _nextTheme: {
+          boxShadow: 'focus',
+          borderColor: 'border.focused'
+        },
+        _hover: {
+          borderColor: 'blue.400',
+          _nextTheme: {
+            borderColor: 'border.focused'
+          }
+        }
+      },
+      _disabled: {
+        cursor: 'not-allowed',
+        background: 'gray.50',
+        _nextTheme: {
+          background: 'background.disabled',
+          borderColor: 'border.disabled'
+        },
+
+        _hover: {
+          _nextTheme: {
+            background: 'background.disabled',
+            borderColor: 'border.disabled'
+          }
+        }
+      },
+      _invalid: {
+        borderColor: 'red.400',
+        _nextTheme: {
+          borderColor: 'border.danger'
+        },
+
+        _hover: {
+          borderColor: 'red.400',
+          _nextTheme: {
+            borderColor: 'border.danger'
+          }
+        }
       }
     },
     boxColor: {
       flex: 'none',
       width: '6',
       height: '6',
+      mr: '2',
       borderWidth: '1px',
       borderColor: 'gray.50',
       borderRadius: 'sm',
-      mr: '2'
+      _nextTheme: {
+        borderColor: 'border.default'
+      }
     },
     inputTrigger: {
       margin: '-12px',
@@ -64,26 +121,20 @@ const colorPickerSlotRecipe = defineSlotRecipe({
         outline: 'none'
       }
     },
-    popoverContent: {
-      bg: 'white',
-      rounded: 'md',
-      shadow: 'lg',
-      borderWidth: '1px',
-      borderColor: 'gray.400'
-    },
+    popoverContent: {},
     wrapperAdvance: {
-      display: 'flex',
-      flexDirection: 'column',
       position: 'relative',
       width: '280px',
+      display: 'flex',
+      flexDirection: 'column',
       padding: '3',
       gap: '3'
     },
     wrapperBasic: {
-      display: 'flex',
-      flexDirection: 'column',
       position: 'relative',
       width: '188px',
+      display: 'flex',
+      flexDirection: 'column',
       padding: '3',
       gap: '3'
     },
@@ -103,10 +154,10 @@ const colorPickerSlotRecipe = defineSlotRecipe({
       gap: '2'
     },
     boxPreset: {
+      position: 'relative',
       display: 'flex',
       flexDirection: 'column',
       gap: '2',
-      position: 'relative'
     },
     wrapperPreset: {
       position: 'relative',
@@ -118,7 +169,7 @@ const colorPickerSlotRecipe = defineSlotRecipe({
       position: 'relative',
       display: 'flex',
       flexWrap: 'wrap',
-      gap: '4px'
+      gap: '1'
     }
   }
 })

package/src/recipes/date-picker.ts

@@ -52,7 +52,7 @@ const timePanelSlotRecipe = defineSlotRecipe({
       height: '224px',
       overflowY: 'scroll',
       overflowX: 'hidden',
-      py: '10px',
+      py: '10px'
     }
   }
 })
@@ -70,7 +70,11 @@ const tableDateSlotRecipe = defineSlotRecipe({
   ],
   base: {
     headerRoot: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
-    headerLabel: { cursor: 'pointer', fontWeight: 'semiBold' },
+    headerLabel: {
+      cursor: 'pointer',
+      fontWeight: 'semiBold',
+      _nextTheme: { color: 'text.default' }
+    },
     dayWrapper: { display: 'flex', marginTop: 3 },
     dateItemRoot: { display: 'flex', flexDirection: 'column', gap: 1, marginTop: '1.5' },
     dateItemWrapper: { display: 'flex' },
@@ -89,7 +93,11 @@ const tableMonthSlotRecipe = defineSlotRecipe({
   slots: ['headerRoot', 'headerLabel', 'monthItemRoot', 'monthItemWrapper', 'shortcutLabelWrapper'],
   base: {
     headerRoot: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
-    headerLabel: { cursor: 'pointer', fontWeight: 'semiBold' },
+    headerLabel: {
+      cursor: 'pointer',
+      fontWeight: 'semiBold',
+      _nextTheme: { color: 'text.default' }
+    },
     monthItemRoot: { display: 'flex', flexDirection: 'column', gap: 1, marginTop: '3' },
     monthItemWrapper: { display: 'grid', gridTemplateColumns: '3' },
     shortcutLabelWrapper: {
@@ -107,7 +115,10 @@ const tableYearSlotRecipe = defineSlotRecipe({
   slots: ['headerRoot', 'headerLabel', 'yearItemRoot', 'yearItemWrapper', 'shortcutLabelWrapper'],
   base: {
     headerRoot: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
-    headerLabel: { fontWeight: 'semiBold' },
+    headerLabel: {
+      fontWeight: 'semiBold',
+      _nextTheme: { color: 'text.default' }
+    },
     yearItemRoot: { display: 'flex', flexDirection: 'column', gap: 1, marginTop: '3' },
     yearItemWrapper: { display: 'grid', gridTemplateColumns: '4' },
     shortcutLabelWrapper: {
@@ -135,7 +146,10 @@ const dayItemRecipe = defineRecipe({
     cursor: 'pointer',
     color: 'gray.600',
     fontSize: 'sm',
-    textAlign: 'center'
+    textAlign: 'center',
+    _nextTheme: {
+      color: 'text.default'
+    }
   }
 })
 
@@ -160,7 +174,13 @@ const dateItemRecipe = defineRecipe({
       color: 'gray.400',
       cursor: 'not-allowed',
       borderColor: 'transparent',
-      backgroundColor: 'transparent'
+      backgroundColor: 'transparent',
+      _nextTheme: {
+        color: 'text.disabled'
+      }
+    },
+    _nextTheme: {
+      color: 'text.default'
     }
   },
   variants: {
@@ -169,31 +189,55 @@ const dateItemRecipe = defineRecipe({
         rounded: 'sm',
         _hover: {
           borderColor: 'gray.50',
-          background: 'gray.50'
+          background: 'gray.50',
+          _nextTheme: {
+            borderColor: 'background.neutral.hovered',
+            background: 'background.neutral.hovered'
+          }
         },
         _focus: {
           borderColor: 'blue.400',
           background: 'transparent',
-          shadow: 'outer'
+          shadow: 'outer',
+          _nextTheme: {
+            borderColor: 'border.focused'
+          }
         }
       },
       selected: {
         rounded: 'sm',
         borderColor: 'blue.400',
         backgroundColor: 'blue.400',
-        color: 'white'
+        color: 'white',
+        _nextTheme: {
+          borderColor: 'background.brand.bold.selected',
+          backgroundColor: 'background.brand.bold.selected',
+          color: 'text.inverse'
+        }
       },
       range: {
         borderColor: 'ice.50',
-        backgroundColor: 'ice.50'
+        backgroundColor: 'ice.50',
+        _nextTheme: {
+          borderColor: 'background.brand.selected',
+          backgroundColor: 'background.brand.selected'
+        }
       },
       today: {
         rounded: 'sm',
         borderColor: 'orange.50',
-        backgroundColor: 'orange.50'
+        backgroundColor: 'orange.50',
+        _nextTheme: {
+          borderColor: 'background.warning.bold',
+          backgroundColor: 'background.warning.bold',
+          color: 'text.warning.inverse'
+        }
       },
       notThisMonth: {
-        color: 'gray.600'
+        color: 'gray.600',
+        _nextTheme: {
+          color: 'text.disabled'
+        }
       },
       disabled: {},
 
@@ -201,33 +245,60 @@ const dateItemRecipe = defineRecipe({
       weekHoveredStart: {
         roundedLeft: 'sm',
         borderColor: 'gray.50',
-        background: 'gray.50'
+        background: 'gray.50',
+        _nextTheme: {
+          borderColor: 'background.neutral.hovered',
+          background: 'background.neutral.hovered'
+        }
       },
       weekHoveredMiddle: {
         borderColor: 'gray.50',
-        background: 'gray.50'
+        background: 'gray.50',
+        _nextTheme: {
+          borderColor: 'background.neutral.hovered',
+          background: 'background.neutral.hovered'
+        }
       },
       weekHoveredEnd: {
         roundedRight: 'sm',
         borderColor: 'gray.50',
-        background: 'gray.50'
+        background: 'gray.50',
+        _nextTheme: {
+          borderColor: 'background.neutral.hovered',
+          background: 'background.neutral.hovered'
+        }
       },
       weekSelectedStart: {
         roundedLeft: 'sm',
         borderColor: 'blue.400',
         background: 'blue.400',
-        color: 'white'
+        color: 'white',
+        _nextTheme: {
+          borderColor: 'background.brand.bold.selected',
+          backgroundColor: 'background.brand.bold.selected',
+          color: 'text.inverse'
+        }
       },
       weekSelectedMiddle: {
         borderColor: 'blue.400',
         background: 'blue.400',
-        color: 'white'
+        color: 'white',
+        _nextTheme: {
+          borderColor: 'background.brand.bold.selected',
+          backgroundColor: 'background.brand.bold.selected',
+          color: 'text.inverse'
+        }
       },
       weekSelectedEnd: {
         roundedRight: 'sm',
         borderColor: 'blue.400',
         background: 'blue.400',
-        color: 'white'
+        color: 'white',
+        _nextTheme: {
+          borderColor: 'background.brand.bold.selected',
+          backgroundColor: 'background.brand.bold.selected',
+          color: 'text.inverse'
+        }
       }
     }
   },
@@ -273,6 +344,9 @@ const monthItemRecipe = defineRecipe({
       cursor: 'not-allowed',
       borderColor: 'transparent',
       backgroundColor: 'transparent'
+    },
+    _nextTheme: {
+      color: 'text.default'
     }
   },
   variants: {
@@ -282,28 +356,49 @@ const monthItemRecipe = defineRecipe({
         rounded: 'sm',
         _hover: {
           borderColor: 'gray.50',
-          background: 'gray.50'
+          background: 'gray.50',
+          _nextTheme: {
+            borderColor: 'background.neutral.hovered',
+            background: 'background.neutral.hovered'
+          }
         },
         _focus: {
           borderColor: 'blue.400',
           background: 'transparent',
-          shadow: 'outer'
+          shadow: 'outer',
+          _nextTheme: {
+            borderColor: 'border.focused'
+          }
         }
       },
       selected: {
         rounded: 'sm',
         borderColor: 'blue.400',
         backgroundColor: 'blue.400',
-        color: 'white'
+        color: 'white',
+        _nextTheme: {
+          borderColor: 'background.brand.bold.selected',
+          backgroundColor: 'background.brand.bold.selected',
+          color: 'text.inverse'
+        }
       },
       range: {
         borderColor: 'ice.50',
-        backgroundColor: 'ice.50'
+        backgroundColor: 'ice.50',
+        _nextTheme: {
+          borderColor: 'background.brand.selected',
+          backgroundColor: 'background.brand.selected'
+        }
       },
       today: {
         rounded: 'sm',
         borderColor: 'orange.50',
-        backgroundColor: 'orange.50'
+        backgroundColor: 'orange.50',
+        _nextTheme: {
+          borderColor: 'background.warning.bold',
+          backgroundColor: 'background.warning.bold',
+          color: 'text.warning.inverse'
+        }
       }
     }
   },
@@ -329,6 +424,9 @@ const yearItemRecipe = defineRecipe({
       cursor: 'not-allowed',
       borderColor: 'transparent',
       backgroundColor: 'transparent'
+    },
+    _nextTheme: {
+      color: 'text.default'
     }
   },
   variants: {
@@ -338,28 +436,49 @@ const yearItemRecipe = defineRecipe({
         rounded: 'sm',
         _hover: {
           borderColor: 'gray.50',
-          background: 'gray.50'
+          background: 'gray.50',
+          _nextTheme: {
+            borderColor: 'background.neutral.hovered',
+            background: 'background.neutral.hovered'
+          }
         },
         _focus: {
           borderColor: 'blue.400',
           background: 'transparent',
-          shadow: 'outer'
+          shadow: 'outer',
+          _nextTheme: {
+            borderColor: 'border.focused'
+          }
         }
       },
       selected: {
         rounded: 'sm',
         borderColor: 'blue.400',
         backgroundColor: 'blue.400',
-        color: 'white'
+        color: 'white',
+        _nextTheme: {
+          borderColor: 'background.brand.bold.selected',
+          backgroundColor: 'background.brand.bold.selected',
+          color: 'text.inverse'
+        }
       },
       range: {
         borderColor: 'ice.50',
-        backgroundColor: 'ice.50'
+        backgroundColor: 'ice.50',
+        _nextTheme: {
+          borderColor: 'background.brand.selected',
+          backgroundColor: 'background.brand.selected'
+        }
       },
       today: {
         rounded: 'sm',
         borderColor: 'orange.50',
-        backgroundColor: 'orange.50'
+        backgroundColor: 'orange.50',
+        _nextTheme: {
+          borderColor: 'background.warning.bold',
+          backgroundColor: 'background.warning.bold',
+          color: 'text.warning.inverse'
+        }
       }
     }
   },
@@ -385,6 +504,9 @@ const timeItemRecipe = defineRecipe({
       cursor: 'not-allowed',
       borderColor: 'transparent',
       backgroundColor: 'transparent'
+    },
+    _nextTheme: {
+      color: 'text.default'
     }
   },
   variants: {
@@ -394,19 +516,31 @@ const timeItemRecipe = defineRecipe({
         rounded: 'sm',
         _hover: {
           borderColor: 'gray.50',
-          background: 'gray.50'
+          background: 'gray.50',
+          _nextTheme: {
+            borderColor: 'background.neutral.hovered',
+            background: 'background.neutral.hovered'
+          }
         },
         _focus: {
           borderColor: 'blue.400',
           background: 'transparent',
-          shadow: 'outer'
+          shadow: 'outer',
+          _nextTheme: {
+            borderColor: 'border.focused'
+          }
         }
       },
       selected: {
         rounded: 'sm',
         borderColor: 'blue.400',
         backgroundColor: 'blue.400',
-        color: 'white'
+        color: 'white',
+        _nextTheme: {
+          borderColor: 'background.brand.bold.selected',
+          backgroundColor: 'background.brand.bold.selected',
+          color: 'text.inverse'
+        }
       }
     }
   },

package/src/recipes/divider.ts

@@ -6,7 +6,11 @@ const dividerRecipe = defineRecipe({
   base: {
     border: 0,
     opacity: 0.6,
-    color: 'rgb(208, 214, 221)'
+    color: 'rgb(208, 214, 221)',
+    _nextTheme: {
+      color: 'border.default',
+      opacity: 1,
+    }
   },
   variants: {
     variant: {

package/src/recipes/dropzone.ts

@@ -35,31 +35,80 @@ const dropzoneSlotRecipe = defineSlotRecipe({
       borderColor: 'gray.100',
       borderRadius: 'md',
       borderStyle: 'dashed',
-      background: 'white',
+      background: 'background',
       outline: 'none',
       transition: 'all 250ms',
+      '&[data-variant=avatar]': {
+        borderRadius: 'full'
+      },
+      '&[data-variant=default]': {
+        background: 'white'
+      },
+
+      _nextTheme: {
+        borderRadius: 'md',
+        borderColor: 'border.default',
+        background: 'background.neutral.subtle',
+        '&[data-variant=avatar]': {
+          borderRadius: 'full'
+        },
+
+        '&[data-variant=default]': {
+          background: 'background.neutral'
+        }
+      },
       _hover: {
         borderColor: 'gray.400',
         '& [data-overlay-preview=true]': {
           display: 'flex'
+        },
+        _nextTheme: {
+          borderColor: 'border.default',
+          background: 'background.neutral.hovered'
         }
       },
-      _focusVisible: {
+      _focus: {
         boxShadow: 'focus',
         borderColor: 'blue.400',
+        _nextTheme: {
+          boxShadow: 'none',
+          borderColor: 'border.focused'
+        },
         _hover: {
-          borderColor: 'blue.400'
+          borderColor: 'blue.400',
+          _nextTheme: {
+            borderColor: 'border.focused'
+          }
         }
       },
       _disabled: {
         cursor: 'not-allowed',
-        background: 'gray.50!'
+        background: 'gray.50!',
+        _nextTheme: {
+          background: 'background.disabled!',
+          borderColor: 'border.disabled'
+        },
+
+        _hover: {
+          _nextTheme: {
+            background: 'background.disabled!',
+            borderColor: 'border.disabled'
+          }
+        }
       },
       _invalid: {
         borderColor: 'red.400',
-        backgroundColor: 'red.50!',
+        background: 'red.50!',
+        _nextTheme: {
+          borderColor: 'border.danger',
+          background: 'background.danger'
+        },
         _hover: {
-          borderColor: 'red.400!'
+          borderColor: 'red.400!',
+          _nextTheme: {
+            borderColor: 'border.danger',
+            background: 'background.danger'
+          }
         }
       }
     },
@@ -122,7 +171,19 @@ const dropzoneSlotRecipe = defineSlotRecipe({
       borderRadius: 'md',
       borderWidth: '1px',
       borderColor: 'blue.400',
-      borderStyle: 'dashed'
+      borderStyle: 'dashed',
+      background: 'overlay',
+      '&[data-overlay=white]': {
+        background: 'whiteAlpha.300'
+      },
+
+      _nextTheme: {
+        borderColor: 'border.brand',
+        background: 'background.overlay.dark', // force overlay dark since this variant is black
+        '&[data-overlay=white]': {
+          background: 'background.overlay.light' // force overlay light since this variant is white
+        }
+      }
     },
     preview: {
       display: 'flex',
@@ -152,8 +213,19 @@ const dropzoneSlotRecipe = defineSlotRecipe({
       position: 'absolute',
       zIndex: '2',
       background: 'white',
-      border: '2px solid white',
+      borderWidth: '2px',
+      borderColor: 'white',
       borderRadius: 'full',
+      top: '-10px',
+      right: '-10px',
+      '&[data-variant=avatar]': {
+        top: '-4px',
+        right: '-4px'
+      },
+      _nextTheme: {
+        background: 'background.neutral',
+        borderColor: 'background.neutral'
+      }
     }
   }
 })

package/src/recipes/form-control.ts

@@ -16,12 +16,18 @@ const formControlSlotRecipe = defineSlotRecipe({
     },
     required: {
       color: 'red.400',
-      marginLeft: '1'
+      marginLeft: '1',
+      _nextTheme: {
+        color: 'text.danger',
+      }
     },
     helpText: {
       color: 'gray.600',
       fontSize: 'sm',
-      marginTop: '1'
+      marginTop: '1',
+      _nextTheme: {
+        color: 'text.secondary',
+      }
     },
     errorMessage: {
       color: 'red.400',
@@ -29,7 +35,10 @@ const formControlSlotRecipe = defineSlotRecipe({
       marginTop: '1',
       textAlign: 'left',
       verticalAlign: 'middle',
-      display: 'flex'
+      display: 'flex',
+      _nextTheme: {
+        color: 'text.danger',
+      }
     }
   },
   variants: {},