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

package/src/recipes/button.ts

@@ -11,7 +11,7 @@ const buttonRecipe = defineRecipe({
     gap: '2',
     height: 'fit-content',
     width: 'fit-content',
-    borderWidth: '1px',
+    borderWidth: 'sm',
     whiteSpace: 'nowrap',
     userSelect: 'none',
     appearance: 'none',
@@ -46,6 +46,22 @@ const buttonRecipe = defineRecipe({
         },
         _loading: {
           background: 'blue.400'
+        },
+        _nextTheme: {
+          color: 'text.inverse',
+          background: 'background.brand.bold',
+          borderColor: 'background.brand.bold',
+          _hover: {
+            background: 'background.brand.bold.hovered',
+            borderColor: 'background.brand.bold.hovered'
+          },
+          _active: {
+            background: 'background.brand.bold.pressed',
+            borderColor: 'background.brand.bold.pressed'
+          },
+          _loading: {
+            background: 'background.brand.bold'
+          }
         }
       },
       secondary: {
@@ -62,6 +78,22 @@ const buttonRecipe = defineRecipe({
         },
         _loading: {
           background: 'white'
+        },
+        _nextTheme: {
+          color: 'text.link',
+          background: 'background.neutral',
+          borderColor: 'border.default',
+          _hover: {
+            background: 'background.neutral.hovered',
+            borderColor: 'border.default'
+          },
+          _active: {
+            background: 'background.neutral.pressed',
+            borderColor: 'border.default'
+          },
+          _loading: {
+            background: 'background.neutral'
+          }
         }
       },
       ghost: {
@@ -78,6 +110,22 @@ const buttonRecipe = defineRecipe({
         },
         _loading: {
           background: 'transparent'
+        },
+        _nextTheme: {
+          color: 'text.secondary',
+          background: 'transparent',
+          borderColor: 'transparent',
+          _hover: {
+            background: 'background.neutral.hovered',
+            borderColor: 'background.neutral.hovered'
+          },
+          _active: {
+            background: 'background.neutral.pressed',
+            borderColor: 'background.neutral.pressed'
+          },
+          _loading: {
+            background: 'transparent'
+          }
         }
       },
       danger: {
@@ -92,12 +140,32 @@ const buttonRecipe = defineRecipe({
           background: 'red.700',
           borderColor: 'red.700'
         },
-        _focusVisible: {
+        _focus: {
           borderColor: 'red.400',
           boxShadow: '0 0 0 3px #FDECEE'
         },
         _loading: {
           background: 'red.400'
+        },
+        _nextTheme: {
+          color: 'text.inverse',
+          background: 'background.danger.bold',
+          borderColor: 'background.danger.bold',
+          _hover: {
+            background: 'background.danger.bold.hovered',
+            borderColor: 'background.danger.bold.hovered'
+          },
+          _active: {
+            background: 'background.danger.bold.pressed',
+            borderColor: 'background.danger.bold.pressed'
+          },
+          _focus: {
+            borderColor: 'border.focused',
+            boxShadow: 'focus'
+          },
+          _loading: {
+            background: 'background.danger.bold'
+          }
         }
       },
       textLink: {
@@ -116,11 +184,33 @@ const buttonRecipe = defineRecipe({
           borderColor: 'transparent',
           _hover: {
             borderColor: 'transparent',
-            color: 'gray.400',
+            color: 'gray.400'
           }
         },
         _loading: {
           background: 'white'
+        },
+        _nextTheme: {
+          color: 'text.link',
+          background: 'transparent',
+          borderColor: 'transparent',
+          _hover: {
+            color: 'text.link',
+            textDecoration: 'underline'
+          },
+          _active: {
+            color: 'text.link.pressed'
+          },
+          _disabled: {
+            color: 'text.disabled',
+
+            _hover: {
+              color: 'text.disabled'
+            }
+          },
+          _loading: {
+            background: 'text.inverse'
+          }
         }
       }
     },
@@ -134,11 +224,19 @@ const buttonRecipe = defineRecipe({
         },
         _hasIcon: {
           paddingX: '1',
-          paddingY: '1 !important'
+          paddingY: '1 !important',
+          _nextTheme: {
+            paddingX: '3xs !',
+            paddingY: '3xs !important'
+          }
         },
         _hasLabel: {
           paddingX: '2 !important',
           paddingY: '1',
+          _nextTheme: {
+            paddingX: 'xs !important',
+            paddingY: '3xs'
+          }
         }
       },
       md: {
@@ -150,11 +248,19 @@ const buttonRecipe = defineRecipe({
         },
         _hasIcon: {
           paddingX: '1.5',
-          paddingY: '1.5 !important'
+          paddingY: '1.5 !important',
+          _nextTheme: {
+            paddingX: '2xs',
+            paddingY: '2xs !important'
+          }
         },
         _hasLabel: {
           paddingX: '4 !important',
           paddingY: '2',
+          _nextTheme: {
+            paddingX: 'md !important',
+            paddingY: 'xs'
+          }
         }
       }
     }
@@ -164,9 +270,13 @@ const buttonRecipe = defineRecipe({
       variant: ['textLink'],
       css: {
         borderRadius: 'sm',
-        _focusVisible: {
+        _focus: {
           borderColor: 'white',
-          boxShadow: 'focus'
+          boxShadow: 'focus',
+          _nextTheme: {
+            borderColor: 'border.focused',
+            boxShadow: 'focus'
+          }
         }
       }
     },
@@ -179,9 +289,13 @@ const buttonRecipe = defineRecipe({
     {
       variant: ['primary', 'secondary', 'ghost'],
       css: {
-        _focusVisible: {
+        _focus: {
           borderColor: 'blue.400',
-          boxShadow: 'focus'
+          boxShadow: 'focus',
+          _nextTheme: {
+            borderColor: 'border.focused',
+            boxShadow: 'focus'
+          }
         }
       }
     },
@@ -196,6 +310,15 @@ const buttonRecipe = defineRecipe({
           _hover: {
             background: 'gray.50',
             borderColor: 'gray.50'
+          },
+          _nextTheme: {
+            color: 'text.disabled',
+            background: 'background.disabled',
+            borderColor: 'background.disabled',
+            _hover: {
+              background: 'background.disabled',
+              borderColor: 'background.disabled'
+            }
           }
         }
       }

package/src/recipes/carousel.ts

@@ -19,6 +19,11 @@ const carouselSlotRecipe = defineSlotRecipe({
       borderColor: 'gray.100',
       overflow: 'hidden',
       boxSizing: 'border-box',
+      _nextTheme: {
+        background: 'background.neutral.subtle',
+        borderRadius: 'md',
+        borderColor: 'border.default'
+      }
     },
     buttonRight: {
       display: 'flex',

package/src/recipes/chart.ts

@@ -46,7 +46,6 @@ const chartSlotRecipe = defineSlotRecipe({
       flexDirection: 'row',
       flexWrap: 'wrap',
       alignItems: 'center',
-      wrap: 'wrap',
       width: 'full',
       gap: '4',
       py: '2',
@@ -64,14 +63,20 @@ const chartSlotRecipe = defineSlotRecipe({
     },
     chartTooltip: {
       position: 'absolute',
-      backgroundColor: 'white',
-      border: '1px solid',
-      borderColor: 'gray.400',
       borderRadius: 'md',
+      borderWidth: '1px',
+      borderColor: 'gray.400',
+      background: 'white',
       boxShadow: 'sm',
       zIndex: 'popover',
       pointerEvents: 'none',
-      transition: 'all 0.1s ease 0s'
+      transition: 'all 0.1s ease 0s',
+      _nextTheme: {
+        borderRadius: 'xl',
+        borderColor: 'border.default',
+        background: 'background.stage',
+        boxShadow: 'sm'
+      }
     },
     tooltipWrapper: {
       display: 'flex',

package/src/recipes/checkbox.ts

@@ -7,27 +7,36 @@ const checkboxSlotRecipe = defineSlotRecipe({
   base: {
     root: {
       position: 'relative',
-      display: 'inline-flex',
+      width: 'fit-content',
+      display: 'flex',
       alignItems: 'center',
-      justifyContent: 'center',
-      gap: '2',
+      justifyContent: 'flex-start',
+      gap: '3',
       cursor: 'pointer',
       outline: 'none',
       '&[data-has-description=true]': {
         alignItems: 'flex-start',
         '& .mp-checkbox__control': {
-          marginTop: '1'
+          marginTop: '2px'
         }
       },
       '& .mp-shared__hidden': {
         '&:focus + .mp-checkbox__control': {
           borderColor: 'blue.400',
-          boxShadow: 'focus'
+          boxShadow: 'focus',
+          _nextTheme: {
+            borderColor: 'border.focused',
+            boxShadow: '0 0 0 1px {colors.border.focused}'
+          }
         }
       },
       _hover: {
         '& .mp-checkbox__control': {
-          borderColor: 'gray.400'
+          borderColor: 'gray.400',
+          _nextTheme: {
+            borderColor: 'border.form',
+            background: 'background.neutral.hovered'
+          }
         }
       },
       _disabled: {
@@ -35,34 +44,72 @@ const checkboxSlotRecipe = defineSlotRecipe({
         '& .mp-checkbox__control': {
           borderColor: 'gray.100 !important',
           background: 'gray.50 !important',
-          boxShadow: 'none !important'
+          boxShadow: 'none !important',
+          color: 'gray.100',
+          _nextTheme: {
+            borderColor: 'border.disabled !important',
+            background: 'background.disabled !important',
+            color: 'icon.disabled'
+          }
         }
       },
       _invalid: {
         '& .mp-checkbox__control': {
           borderColor: 'red.400',
-          background: 'white'
+          background: 'white',
+          _nextTheme: {
+            borderColor: 'border.danger !important',
+            background: 'background.neutral'
+          }
         }
       },
       _checked: {
         '& .mp-checkbox__control': {
           borderColor: 'blue.400',
-          background: 'blue.400'
+          background: 'blue.400',
+          color: 'white',
+          _nextTheme: {
+            borderColor: 'border.selected',
+            background: 'background.brand.bold.selected',
+            color: 'icon.inverse'
+          }
         },
         _hover: {
           '& .mp-checkbox__control': {
-            borderColor: 'blue.400'
+            borderColor: 'blue.400',
+            _nextTheme: {
+              borderColor: 'border.selected.hovered',
+              background: 'background.brand.bold.hovered'
+            }
           }
         }
       },
       _indeterminate: {
         '& .mp-checkbox__control': {
           borderColor: 'blue.400',
-          background: 'blue.400'
+          background: 'blue.400',
+          color: 'white',
+          _nextTheme: {
+            borderColor: 'border.selected',
+            background: 'background.brand.bold.selected',
+            color: 'icon.inverse'
+          }
         },
         _hover: {
           '& .mp-checkbox__control': {
-            borderColor: 'blue.400'
+            borderColor: 'blue.400',
+            _nextTheme: {
+              borderColor: 'border.selected.hovered',
+              background: 'background.brand.bold.hovered'
+            }
+          }
+        },
+        _disabled: {
+          '& .mp-checkbox__control': {
+            color: 'gray.600',
+            _nextTheme: {
+              color: 'icon.disabled'
+            }
           }
         }
       }
@@ -81,7 +128,15 @@ const checkboxSlotRecipe = defineSlotRecipe({
       borderWidth: '2px',
       borderColor: 'gray.100',
       borderRadius: 'md',
-      background: 'white'
+      background: 'white',
+      _nextTheme: {
+        width: '4',
+        height: '4',
+        borderWidth: 'sm',
+        borderColor: 'border.form',
+        borderRadius: 'sm',
+        background: 'background.neutral'
+      }
     },
     label: {
       background: 'transparent'

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