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

package/src/recipes/input.ts

@@ -33,12 +33,23 @@ const inputSlotRecipe = defineSlotRecipe({
       borderWidth: '1px',
       borderColor: 'inherit',
       borderRadius: 'sm',
-      paddingInline: '12px',
+      paddingInline: '3',
       appearance: 'none',
+      caretColor: 'blue.500',
       transition: 'all 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'
+            },
           }
         }
       }
@@ -157,7 +207,7 @@ 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]': {
@@ -175,7 +225,7 @@ const inputGroupSlotRecipe = defineSlotRecipe({
       },
       '&[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',
+        }
       }
     }
   },
@@ -240,11 +307,11 @@ const inputAddonSlotRecipe = defineSlotRecipe({
       },
       md: {
         root: {
-          height: '7.5',
+          height: '32px',
           borderRadius: 'sm',
           _hasBackground: {
-            _placementLeft: { left: '1' },
-            _placementRight: { right: '1' }
+            _placementLeft: { left: '3px' },
+            _placementRight: { right: '3px' }
           }
         }
       }

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,11 @@ export const modalSlotRecipe = defineSlotRecipe({
       borderColor: 'gray.100',
       bg: 'white',
       marginInline: 'auto',
+      _nextTheme: {
+        background: 'background.stage',
+        borderColor: 'border.bold',
+        color: 'text.default'
+      }
     },
 
     header: {
@@ -51,7 +67,12 @@ 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'
+      }
     },
     closeButton: {
       position: 'absolute',
@@ -65,7 +86,7 @@ export const modalSlotRecipe = defineSlotRecipe({
       pt: 2,
       px: 4,
       pb: 4,
-      justifyContent: 'flex-end',
+      justifyContent: 'flex-end'
     },
     overlay: {
       position: 'fixed',
@@ -74,14 +95,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 +112,7 @@ export const modalSlotRecipe = defineSlotRecipe({
       },
       false: {
         contentRoot: {
-          top: '3.75rem',
+          top: '3.75rem'
         },
         contentChild: {
           height: '100%',
@@ -104,5 +125,5 @@ export const modalSlotRecipe = defineSlotRecipe({
 
   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,36 @@ 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'
+          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 +45,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 +103,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: {

package/src/recipes/rich-text-editor.ts

@@ -30,6 +30,10 @@ const richTextEditorSlotRecipe = defineSlotRecipe({
       paddingY: '1',
       paddingX: '3',
       marginBottom: '1',
+      _nextTheme: {
+        backgroundColor: 'background.neutral.subtle',
+        border: '0px solid'
+      },
       '& button': {
         display: 'flex',
         justifyContent: 'center',
@@ -42,18 +46,30 @@ const richTextEditorSlotRecipe = defineSlotRecipe({
           borderRadius: 'md',
           color: 'blue.400',
           backgroundColor: 'blue.50',
-          cursor: 'pointer'
+          _nextTheme: {
+            color: 'icon.brand',
+            backgroundColor: 'background.brand.hovered'
+          }
         },
         '&.is-active': {
-          color: 'blue.400'
-        }
+          color: 'blue.400',
+          _nextTheme: {
+            color: 'icon.brand'
+          }
+        },
+        _nextTheme: {
+          color: 'icon.default'
+        },
       },
       '& button.mp-popover-list-item': {
         padding: '0',
         '&:hover': {
           borderRadius: '0',
           color: 'blue.400',
-          backgroundColor: 'transparent'
+          backgroundColor: 'transparent',
+          _nextTheme: {
+            color: 'icon.brand'
+          }
         },
         '& div': {
           justifyContent: 'center!',
@@ -78,7 +94,10 @@ const richTextEditorSlotRecipe = defineSlotRecipe({
         content: 'attr(data-placeholder)',
         float: 'left',
         height: '0',
-        pointerEvents: 'none'
+        pointerEvents: 'none',
+        _nextTheme: {
+          color: 'text.placeholder'
+        }
       }
     }
   },
@@ -91,6 +110,7 @@ const RTEStyleProviderRecipe = defineRecipe({
   className: 'typography-style-provider',
   jsx: ['MpTypographyStyleProvider', 'mp-typography-style-provider'],
   base: {
+    color: 'dark',
     '& h1': {
       textStyle: 'h1'
     },
@@ -129,7 +149,13 @@ const RTEStyleProviderRecipe = defineRecipe({
     '& blockquote': {
       borderLeft: '4px solid',
       borderColor: 'dark',
-      padding: '2'
+      padding: '2',
+      _nextTheme: {
+        borderColor: 'text.default'
+      }
+    },
+    _nextTheme: {
+      color: 'text.default'
     }
   },
   variants: {},

package/src/recipes/segmented-control.ts

@@ -18,7 +18,10 @@ const segmentedControlSlotRecipe = defineSlotRecipe({
       borderColor: 'gray.100',
       borderRadius: 'md',
       outline: '0px solid transparent',
-      padding: '1'
+      padding: '1',
+      _nextTheme: {
+        borderColor: 'border.form',
+      }
     },
     item: {
       flex: 'var(--mp-segmented-control--flex)',
@@ -45,18 +48,40 @@ const segmentedControlSlotRecipe = defineSlotRecipe({
       borderRadius: 'sm',
       transition: 'all 250ms',
       color: 'gray.600',
-      backgroundColor: 'white',
+      backgroundColor: 'transparent',
       gap: 'var(--mp-segmented-control--gap)',
       paddingX: 'var(--mp-segmented-control--padding-x)',
       'input[type=radio]:hover:not(:disabled):not(:checked) + &': {
-        color: 'blue.700'
+        color: 'blue.700',
+        _nextTheme: {
+          color: 'text.secondary',
+          backgroundColor: 'background.neutral.hovered',
+          '& > svg': {
+            color: 'icon.default',
+          }
+        }
       },
       'input[type=radio]:checked + &, input[type=radio][aria-checked=mixed] + &': {
         color: 'blue.400',
-        backgroundColor: 'blue.50'
+        backgroundColor: 'blue.50',
+        _nextTheme: {
+          color: 'text.selected',
+          backgroundColor: 'background.brand.selected',
+          '& > svg': {
+            color: 'icon.selected',
+          }
+        }
       },
       'input[type=radio]:disabled + &': {
-        color: 'gray.400'
+        color: 'gray.400',
+        cursor: 'not-allowed',
+        _nextTheme: {
+          color: 'text.disabled',
+          backgroundColor: 'background.disabled',
+          '& > svg': {
+            color: 'icon.disabled',
+          }
+        }
       },
       'input[type=radio]:checked:hover:not(:disabled) + &, input[type=radio][aria-checked=mixed]:hover:not(:disabled) + &':
         {
@@ -64,13 +89,28 @@ const segmentedControlSlotRecipe = defineSlotRecipe({
         },
       'input[type=radio]:checked:focus + &, input[type=radio][aria-checked=mixed]:focus + &': {
         color: 'blue.700',
-        boxShadow: 'outer'
+        boxShadow: 'outer',
+        _nextTheme: {
+          color: 'text.selected',
+          boxShadow: '0 0 0 2px {colors.border.focused}'
+        }
       },
       'input[type=radio]:checked:disabled + &, input[type=radio][aria-checked=mixed]:disabled + &':
         {
           color: 'gray.400',
-          backgroundColor: 'gray.50'
+          backgroundColor: 'gray.50',
+          cursor: 'not-allowed',
+          _nextTheme: {
+            color: 'text.disabled',
+            backgroundColor: 'background.disabled'
+          }
+        },
+      _nextTheme: {
+        color: 'text.secondary',
+        '& > svg': {
+          color: 'icon.default',
         }
+      }
     },
     label: {
       color: 'currentColor',

package/src/recipes/select.ts

@@ -54,6 +54,48 @@ const selectSlotRecipe = defineSlotRecipe({
       },
       _isFullWidth: {
         width: 'full'
+      },
+      _placeholder: { 
+        color: 'gray.400',
+      },
+      _nextTheme: {
+        backgroundColor: 'background.neutral',
+        borderColor: 'border.form',
+        _hover: {
+          borderColor: 'border.form',
+          backgroundColor: 'background.neutral.hovered',
+          _invalid: {
+            borderColor: 'border.danger'
+          }
+        },
+        _focus: {
+          borderColor: 'transparent',
+          boxShadow: 'focus',
+          _hover: {
+            borderColor: 'transparent',
+          },
+          _invalid: {
+            borderColor: 'transparent',
+            _hover: {
+              borderColor: 'transparent',
+            },
+          }
+        },
+        _disabled: {
+          color: 'text.disabled',
+          backgroundColor: 'background.disabled',
+          borderColor: 'border.disabled',
+          _hover: {
+            borderColor: 'border.disabled',
+            backgroundColor: 'background.disabled',
+          },
+        },
+        _invalid: {
+          borderColor: 'border.danger'
+        },
+        _placeholder: { 
+          borderColor: 'text.placeholder',
+        }
       }
     },
     clear: {