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

package/src/recipes/broadcast.ts

@@ -38,28 +38,94 @@ const broadcastSlotRecipe = defineSlotRecipe({
       marginLeft: '3',
       _hover: {
         color: 'white!'
+      },
+      _nextTheme: {
+        color: 'icon.inverse!',
+        _hover: {
+          color: 'icon.inverse!'
+        },
       }
     }
   },
   variants: {
     variant: {
       announcement: {
-        container: { backgroundColor: 'stone.400' },
-        icon: { color: 'white' },
-        label: { color: 'white' },
-        textLink: { color: 'white' }
+        container: { 
+          backgroundColor: 'stone.400',
+          _nextTheme: {
+            backgroundColor: 'background.neutral.bold',
+          }
+        },
+        icon: { 
+          color: 'white',
+          _nextTheme: {
+            color: 'icon.inverse'
+          }
+        },
+        label: { 
+          color: 'white',
+          _nextTheme: {
+            color: 'text.inverse'
+          }
+        },
+        textLink: { 
+          color: 'white',
+          _nextTheme: {
+            color: 'text.inverse'
+          } 
+        }
       },
       information: {
-        container: { backgroundColor: 'violet.400' },
-        icon: { color: 'white' },
-        label: { color: 'white' },
-        textLink: { color: 'white' }
+        container: { 
+          backgroundColor: 'violet.400',
+          _nextTheme: {
+            backgroundColor: 'background.highlight.bold',
+          }
+        },
+        icon: { 
+          color: 'white',
+          _nextTheme: {
+            color: 'icon.inverse.static'
+          }
+        },
+        label: { 
+          color: 'white',
+          _nextTheme: {
+            color: 'text.inverse'
+          }
+        },
+        textLink: { 
+          color: 'white',
+          _nextTheme: {
+            color: 'text.inverse'
+          } 
+        }
       },
       important: {
-        container: { backgroundColor: 'amber.100' },
-        icon: { color: 'dark' },
-        label: { color: 'dark' },
-        textLink: { color: 'dark' }
+        container: { 
+          backgroundColor: 'amber.100',
+          _nextTheme: {
+            backgroundColor: 'background.warning.bold',
+          }
+        },
+        icon: { 
+          color: 'dark',
+          _nextTheme: {
+            color: 'icon.warning.inverse'
+          }
+        },
+        label: { 
+          color: 'dark',
+          _nextTheme: {
+            color: 'text.warning.inverse'
+          }
+        },
+        textLink: { 
+          color: 'dark',
+          _nextTheme: {
+            color: 'text.warning.inverse'
+          } 
+        }
       }
     }
   },

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: {
@@ -98,6 +146,58 @@ const buttonRecipe = defineRecipe({
         },
         _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'
+          },
+          _focusVisible: {
+            borderColor: 'border.focused',
+            boxShadow: 'focus'
+          },
+          _loading: {
+            background: 'background.danger.bold'
+          }
+        }
+      },
+      tertiary: {
+        color: 'white',
+        background: '#282E33',
+        borderColor: '#282E33',
+        _hover: {
+          background: '#38414A',
+          borderColor: '#38414A'
+        },
+        _active: {
+          background: '#454F59',
+          borderColor: '#454F59'
+        },
+        _loading: {
+          background: '#282E33'
+        },
+        _nextTheme: {
+          color: 'text.inverse.static',
+          background: 'background.tertiary',
+          borderColor: 'background.tertiary',
+          _hover: {
+            background: 'background.tertiary.hovered',
+            borderColor: 'background.tertiary.hovered'
+          },
+          _active: {
+            background: 'background.tertiary.pressed',
+            borderColor: 'background.tertiary.pressed'
+          },
+          _loading: {
+            background: 'background.tertiary'
+          }
         }
       },
       textLink: {
@@ -116,12 +216,49 @@ 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',
+              textDecoration: 'none'
+            }
+          },
+          _loading: {
+            background: 'text.inverse'
+          }
         }
+      },
+      unstyled: {
+        display: 'inline',
+        color: 'inherit',
+        backgroundColor: 'transparent',
+        border: 'none',
+        outline: 'none',
+        margin: '0',
+        padding: '0',
+        fontSize: 'inherit',
+        fontWeight: 'inherit',
+        lineHeight: 'inherit',
+        userSelect: 'inherit',
+        textAlign: 'inherit'
       }
     },
     size: {
@@ -134,11 +271,40 @@ const buttonRecipe = defineRecipe({
         },
         _hasIcon: {
           paddingX: '1',
-          paddingY: '1 !important'
+          paddingY: '1',
+          _nextTheme: {
+            paddingX: '3xs',
+            paddingY: '3xs'
+          }
         },
         _hasLabel: {
-          paddingX: '2 !important',
+          paddingX: '2',
           paddingY: '1',
+          _hasIcon: {
+            '[data-icon-position=left]': {
+              paddingLeft: '1.5',
+              paddingRight: '2'
+            },
+            '[data-icon-position=right]': {
+              paddingLeft: '2',
+              paddingRight: '1.5'
+            },
+          },
+
+          _nextTheme: {
+            paddingX: 'xs',
+            paddingY: '3xs',
+            _hasIcon: {
+              '[data-icon-position=left]': {
+                paddingLeft: '2xs',
+                paddingRight: 'xs'
+              },
+              '[data-icon-position=right]': {
+                paddingLeft: 'xs',
+                paddingRight: '2xs'
+              }
+            }
+          }
         }
       },
       md: {
@@ -150,11 +316,40 @@ const buttonRecipe = defineRecipe({
         },
         _hasIcon: {
           paddingX: '1.5',
-          paddingY: '1.5 !important'
+          paddingY: '1.5',
+          _nextTheme: {
+            paddingX: 'xs',
+            paddingY: 'xs'
+          }
         },
         _hasLabel: {
-          paddingX: '4 !important',
+          paddingX: '4',
           paddingY: '2',
+          _hasIcon: {
+            '&[data-icon-position=left]': {
+              paddingLeft: '3 !important',
+              paddingRight: '4 !important'
+            },
+            '& [data-icon-position=right]': {
+              paddingLeft: '4 !important',
+              paddingRight: '3 !important'
+            }
+          },
+
+          _nextTheme: {
+            paddingX: 'md',
+            paddingY: 'xs',
+            _hasIcon: {
+              '[data-icon-position=left]': {
+                paddingLeft: 'sm !important',
+                paddingRight: 'md !important'
+              },
+              '[data-icon-position=right]': {
+                paddingLeft: 'md !important',
+                paddingRight: 'sm !important'
+              }
+            }
+          }
         }
       }
     }
@@ -166,7 +361,11 @@ const buttonRecipe = defineRecipe({
         borderRadius: 'sm',
         _focusVisible: {
           borderColor: 'white',
-          boxShadow: 'focus'
+          boxShadow: 'focus',
+          _nextTheme: {
+            borderColor: 'border.focused',
+            boxShadow: 'focus'
+          }
         }
       }
     },
@@ -177,16 +376,20 @@ const buttonRecipe = defineRecipe({
       }
     },
     {
-      variant: ['primary', 'secondary', 'ghost'],
+      variant: ['primary', 'secondary', 'ghost', 'tertiary'],
       css: {
         _focusVisible: {
           borderColor: 'blue.400',
-          boxShadow: 'focus'
+          boxShadow: 'focus',
+          _nextTheme: {
+            borderColor: 'border.focused',
+            boxShadow: 'focus'
+          }
         }
       }
     },
     {
-      variant: ['primary', 'secondary', 'ghost', 'danger'],
+      variant: ['primary', 'secondary', 'ghost', 'danger', 'tertiary'],
       css: {
         _disabled: {
           cursor: 'not-allowed',
@@ -195,7 +398,32 @@ const buttonRecipe = defineRecipe({
           borderColor: 'gray.50',
           _hover: {
             background: 'gray.50',
-            borderColor: 'gray.50'
+            borderColor: 'gray.50',
+            _hasIcon: {
+              background: 'transparent',
+              borderColor: 'transparent'
+            },
+          },
+          _hasIcon: {
+            background: 'transparent',
+            borderColor: 'transparent'
+          },
+          _nextTheme: {
+            color: 'text.disabled',
+            background: 'background.disabled',
+            borderColor: 'background.disabled',
+            _hover: {
+              background: 'background.disabled',
+              borderColor: 'background.disabled',
+              _hasIcon: {
+                background: 'transparent',
+                borderColor: 'transparent'
+              },
+            },
+            _hasIcon: {
+              background: 'transparent',
+              borderColor: 'transparent'
+            },
           }
         }
       }

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,38 @@ 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'
+        _focusVisible: {
+          '& + .mp-checkbox__control': {
+            borderColor: 'blue.400',
+            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 +46,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 +130,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'