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

package/src/recipes/icon.ts

@@ -11,7 +11,9 @@ export const iconRecipe = defineRecipe({
     flexShrink: 0,
     '&:not(:root)': {
       overflow: 'hidden'
-    }
+    },
+    width: 'var(--mp-icon-size)',
+    height: 'var(--mp-icon-size)'
   },
   variants: {
     size: {

package/src/recipes/index.ts

@@ -1,5 +1,6 @@
 import { tagSlotRecipe } from './tag'
 import { avatarSlotRecipe, avatarGroupSlotRecipe } from './avatar'
+import { aireneButtonSlotRecipe } from './airene-button'
 import { buttonRecipe, buttonGroupRecipe } from './button'
 import { inputSlotRecipe, inputGroupSlotRecipe, inputAddonSlotRecipe } from './input'
 import { selectSlotRecipe } from './select'
@@ -137,5 +138,6 @@ export const slotRecipes = {
   tabListSlotRecipe,
   colorPickerSlotRecipe,
   sliderSlotRecipe,
-  tourSlotRecipe
+  tourSlotRecipe,
+  aireneButtonSlotRecipe
 }

package/src/recipes/input-tag.ts

@@ -31,30 +31,64 @@ const inputTagSlotRecipe = defineSlotRecipe({
       borderWidth: '1px',
       borderColor: 'gray.100',
       borderRadius: 'md',
+      backgroundColor: 'white',
       paddingTop: '2',
       paddingBottom: '2',
       paddingLeft: '3',
       paddingRight: '8',
-      backgroundColor: 'white',
       transition: 'all 250ms',
+      _nextTheme: {
+        borderRadius: 'md',
+        borderColor: 'border.form',
+        background: 'background.neutral'
+      },
       _hover: {
-        borderColor: 'gray.400'
+        borderColor: 'gray.400',
+        _nextTheme: {
+          borderColor: 'border.form',
+          background: 'background.neutral.hovered'
+        }
       },
-      _focusVisible: {
+      _focus: {
         boxShadow: 'focus',
         borderColor: 'blue.400',
+        _nextTheme: {
+          boxShadow: 'focus',
+          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',
+        _nextTheme: {
+          borderColor: 'border.danger'
+        },
+
         _hover: {
-          borderColor: 'red.400'
+          borderColor: 'red.400',
+          _nextTheme: {
+            borderColor: 'border.danger'
+          }
         }
       },
       _hasIcon: {
@@ -65,6 +99,12 @@ const inputTagSlotRecipe = defineSlotRecipe({
       padding: '0 !important',
       margin: '0 !important',
       borderWidth: '0 !important',
+      _placeholder: {
+        color: 'gray.400',
+        _nextTheme: {
+          borderColor: 'text.placeholder'
+        }
+      }
     },
     content: {
       maxHeight: '300px',
@@ -101,7 +141,7 @@ const inputTagSlotRecipe = defineSlotRecipe({
       textAlign: 'left'
     },
     suggestionWrapper: {
-      display: 'flex', 
+      display: 'flex',
       flexDirection: 'column',
       width: '100%'
     },
@@ -112,7 +152,7 @@ const inputTagSlotRecipe = defineSlotRecipe({
       width: 'full',
       height: '9',
       py: '2',
-      px: '3',
+      px: '3'
     }
   }
 })

package/src/recipes/input.ts

@@ -33,12 +33,23 @@ const inputSlotRecipe = defineSlotRecipe({
       borderWidth: '1px',
       borderColor: 'inherit',
       borderRadius: 'sm',
-      paddingInline: '12px',
+      paddingInline: '3',
       appearance: 'none',
-      transition: 'all 250ms',
+      caretColor: 'blue.500',
+      transition: 'border-color 250ms, background-color 250ms',
       _isFullWidth: {
         width: 'full'
       },
+      _placeholder: { 
+        color: 'gray.400',
+      },
+      _nextTheme: {
+        color: 'text.default',
+        caretColor: 'border.selected',
+        _placeholder: { 
+          borderColor: 'text.placeholder',
+        },
+      }
     },
     clear: {
       position: 'absolute!',
@@ -56,6 +67,9 @@ const inputSlotRecipe = defineSlotRecipe({
       _groupHover: {
         visibility: 'var(--mp-input--visibility)',
         opacity: 'var(--mp-input--opacity)'
+      },
+      _nextTheme: {
+        color: 'icon.default',
       }
     }
   },
@@ -76,7 +90,7 @@ const inputSlotRecipe = defineSlotRecipe({
             borderColor: 'gray.400',
             _invalid: {
               borderColor: 'red.400'
-            }
+            },
           },
           _focus: {
             borderColor: 'blue.500',
@@ -100,6 +114,42 @@ const inputSlotRecipe = defineSlotRecipe({
           _readOnly: {
             boxShadow: 'none',
             userSelect: 'all'
+          },
+          _nextTheme: {
+            backgroundColor: 'background.neutral',
+            borderColor: 'border.form',
+            _hover: {
+              borderColor: 'border.form',
+              backgroundColor: 'background.neutral.hovered',
+              _invalid: {
+                borderColor: 'border.danger'
+              }
+            },
+            _focus: {
+              borderColor: 'border.focused',
+              boxShadow: 'focus',
+              _hover: {
+                borderColor: 'border.focused',
+              },
+              _invalid: {
+                borderColor: 'border.focused',
+                _hover: {
+                  borderColor: 'border.focused',
+                },
+              }
+            },
+            _disabled: {
+              color: 'text.disabled',
+              backgroundColor: 'background.disabled',
+              borderColor: 'border.disabled',
+              _hover: {
+                borderColor: 'border.disabled',
+                backgroundColor: 'background.disabled',
+              },
+            },
+            _invalid: {
+              borderColor: 'border.danger'
+            },
           }
         }
       }
@@ -144,7 +194,7 @@ const inputGroupSlotRecipe = defineSlotRecipe({
       width: 'full',
       '&[data-with-left-addon=true]': {
         '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
-          paddingLeft: 'calc(var(--mp-input-offset--left) + 24px)'
+          paddingLeft: 'calc(var(--mp-input-offset--left) + 14px)'
         },
       },
       '&[data-with-clearable=true]': {
@@ -157,25 +207,25 @@ const inputGroupSlotRecipe = defineSlotRecipe({
       },
       '&[data-with-left-bg-addon=true]': {
         '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
-          paddingLeft: 'calc(var(--mp-input-offset--left) + 12px)'
+          paddingLeft: 'calc(var(--mp-input-offset--left) + 14px)'
         },
       },
       '&[data-with-right-addon=true]': {
         '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
-          paddingRight: 'calc(var(--mp-input-offset--right) + 24px)'
+          paddingRight: 'calc(var(--mp-input-offset--right) + 14px)'
         },
         '&[data-with-clearable=true]': {
           '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
             paddingRight: 'calc(var(--mp-input-offset--right) + 54px)'
           },
           '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]': {
-            '--mp-input--right': 'calc(var(--mp-input-offset--right) + 24px)'
+            '--mp-input--right': 'calc(var(--mp-input-offset--right) + 14px)'
           }
         }
       },
       '&[data-with-right-bg-addon=true]': {
         '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
-          paddingRight: 'calc(var(--mp-input-offset--right) + 24px)'
+          paddingRight: 'calc(var(--mp-input-offset--right) + 14px)'
         },
         '&[data-with-clearable=true]': {
           '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
@@ -186,6 +236,17 @@ const inputGroupSlotRecipe = defineSlotRecipe({
           }
         }
       },
+      _nextTheme: {
+        '&:has(input:hover) [data-pixel-component=MpInputAddon][data-has-background=true]': {
+          backgroundColor: 'background.neutral.subtle.hovered'
+        },
+        '&:has(input:focus) [data-pixel-component=MpInputAddon][data-has-background=true]': {
+          backgroundColor: 'background.neutral.subtle.pressed'
+        },
+        '&:has(input:disabled) [data-pixel-component=MpInputAddon][data-has-background=true]': {
+          backgroundColor: 'background.neutral.subtle.pressed'
+        },
+      }
     }
   },
   variants: {},
@@ -205,8 +266,14 @@ const inputAddonSlotRecipe = defineSlotRecipe({
       paddingX: '0',
       whiteSpace: 'nowrap',
       zIndex: '2',
+      transition: 'all 250ms',
       _hasBackground: {
-        backgroundColor: 'gray.50'
+        backgroundColor: 'gray.50',
+      },
+      _nextTheme: {
+        _hasBackground: {
+          backgroundColor: 'background.neutral.subtle',
+        }
       }
     }
   },
@@ -214,16 +281,20 @@ const inputAddonSlotRecipe = defineSlotRecipe({
     placement: {
       left: {
         root: {
-          left: '3',
+          left: '2',
           borderTopRightRadius: 'none!',
-          borderBottomRightRadius: 'none!'
+          borderBottomRightRadius: 'none!',
+          minWidth: '32px',
+          justifyContent: 'center'
         }
       },
       right: {
         root: {
-          right: '3',
+          right: '2',
           borderTopLeftRadius: 'none!',
-          borderBottomLeftRadius: 'none!'
+          borderBottomLeftRadius: 'none!',
+          minWidth: '32px',
+          justifyContent: 'center'
         }
       }
     },
@@ -233,18 +304,34 @@ const inputAddonSlotRecipe = defineSlotRecipe({
           height: '6.5',
           borderRadius: '2xs',
           _hasBackground: {
-            _placementLeft: { left: '0.5' },
-            _placementRight: { right: '0.5' }
+            _placementLeft: { 
+              left: '0.5',
+              minWidth: '24px',
+              justifyContent: 'center'
+            },
+            _placementRight: { 
+              right: '0.5',
+              minWidth: '24px',
+              justifyContent: 'center'
+            }
           }
         }
       },
       md: {
         root: {
-          height: '7.5',
+          height: '32px',
           borderRadius: 'sm',
           _hasBackground: {
-            _placementLeft: { left: '1' },
-            _placementRight: { right: '1' }
+            _placementLeft: { 
+              left: '3px',
+              minWidth: '32px',
+              justifyContent: 'center'
+            },
+            _placementRight: { 
+              right: '3px',
+              minWidth: '32px',
+              justifyContent: 'center'
+            }
           }
         }
       }

package/src/recipes/modal.ts

@@ -4,7 +4,18 @@ export const modalSlotRecipe = defineSlotRecipe({
   className: 'modal',
   description: 'The styles for the Modal component',
   jsx: ['MpModal', 'mp-modal'],
-  slots: ['root', 'rootChild', 'body', 'contentRoot', 'contentChild', 'header', 'footer', 'body', 'overlay', 'closeButton'],
+  slots: [
+    'root',
+    'rootChild',
+    'body',
+    'contentRoot',
+    'contentChild',
+    'header',
+    'footer',
+    'body',
+    'overlay',
+    'closeButton'
+  ],
   base: {
     root: {
       position: 'relative',
@@ -19,14 +30,14 @@ export const modalSlotRecipe = defineSlotRecipe({
     },
     body: {
       p: 4,
-      flex: 1,
+      flex: 1
     },
     contentRoot: {
       pos: 'fixed',
       left: '0',
       w: '100%',
       h: '100%',
-      zIndex: 'modal',
+      zIndex: 'modal'
     },
     contentChild: {
       outline: 0,
@@ -39,6 +50,14 @@ export const modalSlotRecipe = defineSlotRecipe({
       borderColor: 'gray.100',
       bg: 'white',
       marginInline: 'auto',
+      _nextTheme: {
+        background: 'background.stage',
+        borderColor: 'border.bold',
+        color: 'text.default',
+        '&[data-modal-type="drawer"]': {
+          borderColor: 'border.default',
+        }
+      }
     },
 
     header: {
@@ -51,7 +70,16 @@ export const modalSlotRecipe = defineSlotRecipe({
       borderTopLeftRadius: 'md',
       borderTopRightRadius: 'md',
       borderBottom: 'solid 1px',
-      borderBottomColor: 'gray.100'
+      borderBottomColor: 'gray.100',
+      _nextTheme: {
+        color: 'text.default',
+        background: 'background.neutral.subtle',
+        borderBottomColor: 'border.default'
+      },
+      '&[data-modal-presentation="drawer"]': {
+        borderTopLeftRadius: 'none',
+        borderTopRightRadius: 'none',
+      }
     },
     closeButton: {
       position: 'absolute',
@@ -65,7 +93,7 @@ export const modalSlotRecipe = defineSlotRecipe({
       pt: 2,
       px: 4,
       pb: 4,
-      justifyContent: 'flex-end',
+      justifyContent: 'flex-end'
     },
     overlay: {
       position: 'fixed',
@@ -74,14 +102,14 @@ export const modalSlotRecipe = defineSlotRecipe({
       top: '0',
       w: '100vw',
       h: '100vh',
-      zIndex: 'overlay',
+      zIndex: 'overlay'
     }
   },
   variants: {
     full: {
       true: {
         contentRoot: {
-          top: '0',
+          top: '0'
         },
         contentChild: {
           height: '100vh',
@@ -91,7 +119,7 @@ export const modalSlotRecipe = defineSlotRecipe({
       },
       false: {
         contentRoot: {
-          top: '3.75rem',
+          top: '3.75rem'
         },
         contentChild: {
           height: '100%',
@@ -99,10 +127,10 @@ export const modalSlotRecipe = defineSlotRecipe({
           borderRadius: 'md'
         }
       }
-    }
+    },
   },
 
   defaultVariants: {
     full: false
-  },
+  }
 })

package/src/recipes/popover.ts

@@ -12,16 +12,22 @@ const popoverContentRecipe = defineRecipe({
         shadow: 'lg',
         borderWidth: '1px',
         borderColor: 'gray.400',
-        zIndex: 'popover'
+        zIndex: 'popover',
+        _nextTheme: {
+          borderColor: 'border.bold'
+        }
       }
     },
     isDark: {
       true: {
         background: 'overlay',
-        color: 'white'
+        color: 'white',
       },
       false: {
-        background: 'white'
+        background: 'white',
+        _nextTheme: {
+          background: 'background.stage'
+        }
       }
     }
   },
@@ -62,19 +68,32 @@ const popoverListItemRecipe = defineRecipe({
     _disabled: {
       color: 'gray.400',
       bg: 'white',
-      cursor: 'not-allowed'
+      cursor: 'not-allowed',
+      _nextTheme: {
+        background: 'background.disabled',
+        color: 'text.disabled'
+      }
     },
     _highlight: {
-      background: 'white',
-      bg: 'gray.50',
+      background: 'gray.50',
       color: 'dark',
-      outline: 0
+      outline: 0,
+      _nextTheme: {
+        background: 'background.neutral.hovered',
+        color: 'text.default'
+      }
     },
     _active: {
       background: 'ice.50',
-      bg: 'ice.50',
       color: 'dark',
-      outline: 0
+      outline: 0,
+      _nextTheme: {
+        background: 'background.brand.selected',
+        color: 'text.default'
+      }
+    },
+    _nextTheme: {
+      color: 'text.default'
     }
   }
 })

package/src/recipes/progress.ts

@@ -10,7 +10,10 @@ const progressSlotRecipe = defineSlotRecipe({
       width: 'full',
       borderRadius: '100px',
       background: 'gray.100',
-      transition: 'all 250ms linear'
+      transition: 'all 250ms linear',
+      _nextTheme: {
+        background: 'background.subtle'
+      }
     },
     linear: {
       transition: 'all 250ms linear',
@@ -24,7 +27,11 @@ const progressSlotRecipe = defineSlotRecipe({
       height: 'full',
       borderRadius: 'full',
       background:
-        'conic-gradient(var(--mp-progress-color) var(--mp-progress-width), var(--mp-colors-gray-100) 0deg)'
+        'conic-gradient(var(--mp-progress-color) var(--mp-progress-width), var(--mp-colors-gray-100) 0deg)',
+      _nextTheme: {
+        background:
+          'conic-gradient(var(--mp-progress-color) var(--mp-progress-width), var(--mp-colors-background-neutral-subtle) 0deg)'
+      }
     },
     circularTrack: {
       width: 'calc(100% - 6px)',

package/src/recipes/radio.ts

@@ -7,27 +7,38 @@ const radioSlotRecipe = 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-radio__control': {
-          marginTop: '1'
+          marginTop: '2px'
         }
       },
       '& .mp-shared__hidden': {
-        '&:focus + .mp-radio__control': {
-          borderColor: 'blue.400',
-          boxShadow: 'focus'
+        _focusVisible: {
+          '& + .mp-radio__control': {
+            borderColor: 'blue.400',
+            boxShadow: 'focus',
+            _nextTheme: {
+              borderColor: 'border.focused',
+              boxShadow: '0 0 0 1px {colors.border.focused}'
+            }
+          }
         }
       },
       _hover: {
         '& .mp-radio__control': {
-          borderColor: 'gray.400'
+          borderColor: 'gray.400',
+          _nextTheme: {
+            borderColor: 'border.form',
+            background: 'background.neutral.hovered'
+          }
         }
       },
       _disabled: {
@@ -36,37 +47,45 @@ const radioSlotRecipe = defineSlotRecipe({
           borderColor: 'gray.100 !important',
           background: 'gray.50 !important',
           boxShadow: 'none !important',
+          _nextTheme: {
+            borderColor: 'border.disabled !important',
+            background: 'background.disabled !important'
+          },
 
           '& div': {
-            background: 'gray.400'
+            background: 'gray.400',
+            _nextTheme: {
+              color: 'icon.disabled'
+            }
           }
         }
       },
       _invalid: {
         '& .mp-radio__control': {
           borderColor: 'red.400',
-          background: 'white'
+          background: 'white',
+          _nextTheme: {
+            borderColor: 'border.danger !important',
+            background: 'background.neutral'
+          }
         }
       },
       _checked: {
         '& .mp-radio__control': {
           borderColor: 'blue.400',
-          background: 'blue.400'
-        },
-        _hover: {
-          '& .mp-radio__control': {
-            borderColor: 'blue.400'
+          background: 'blue.400',
+          _nextTheme: {
+            borderColor: 'border.selected',
+            background: 'background.brand.bold.selected'
           }
-        }
-      },
-      _indeterminate: {
-        '& .mp-radio__control': {
-          borderColor: 'blue.400',
-          background: 'blue.400'
         },
         _hover: {
           '& .mp-radio__control': {
-            borderColor: 'blue.400'
+            borderColor: 'blue.400',
+            _nextTheme: {
+              borderColor: 'border.selected.hovered',
+              background: 'background.brand.bold.hovered'
+            }
           }
         }
       }
@@ -86,12 +105,26 @@ const radioSlotRecipe = defineSlotRecipe({
       borderColor: 'gray.100',
       borderRadius: 'full',
       background: 'white',
+      _nextTheme: {
+        width: '4',
+        height: '4',
+        borderWidth: 'sm',
+        borderColor: 'border.form',
+        borderRadius: 'full',
+        background: 'background.neutral'
+      },
 
       '& div': {
         width: '2.5',
         height: '2.5',
         background: 'white',
-        borderRadius: 'full'
+        borderRadius: 'full',
+        _nextTheme: {
+          width: '2',
+          height: '2',
+          background: 'icon.inverse',
+          borderRadius: 'full'
+        }
       }
     },
     label: {