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

package/src/recipes/timeline.ts

@@ -29,7 +29,10 @@ const timelineSlotRecipe = defineSlotRecipe({
       fontSize: 'sm',
       color: 'gray.400',
       lineHeight: 'sm',
-      marginTop: '0.5'
+      marginTop: '0.5',
+      _nextTheme: {
+        color: 'text.secondary'
+      }
     },
     content: {
       paddingTop: 3
@@ -54,18 +57,24 @@ const timelineDocumentSlotRecipe = defineSlotRecipe({
       borderWidth: '1px',
       borderColor: 'gray.100',
       width: 'full',
-      gap: '3'
+      gap: '3',
+      _nextTheme: {
+        borderColor: 'border.default'
+      }
     },
     content: {
       display: 'flex',
-      flexDirection: 'column',
+      flexDirection: 'column'
     },
     title: {
       fontSize: 'sm',
       lineHeight: 'md',
       fontWeight: 'regular',
       letterSpacing: 'normal',
-      color: 'dark'
+      color: 'dark',
+      _nextTheme: {
+        color: 'text.default'
+      }
     },
     description: {
       display: 'flex',
@@ -76,7 +85,10 @@ const timelineDocumentSlotRecipe = defineSlotRecipe({
       lineHeight: 'md',
       fontWeight: 'regular',
       letterSpacing: 'normal',
-      color: 'gray.400'
+      color: 'gray.400',
+      _nextTheme: {
+        color: 'text.secondary'
+      }
     }
   },
   variants: {
@@ -136,10 +148,14 @@ const timelineSeparatorSlotRecipe = defineSlotRecipe({
     topConnector: {
       height: '6px',
       width: '2px',
+      roundedBottom: '2px',
       backgroundColor: 'gray.100',
       '&[data-position=first]': {
         backgroundColor: 'transparent'
       },
+      _nextTheme: {
+        backgroundColor: 'border.default'
+      }
     },
     bottomConnector: {
       height: '100%',
@@ -150,6 +166,12 @@ const timelineSeparatorSlotRecipe = defineSlotRecipe({
       '&[data-position=last]': {
         backgroundColor: 'transparent'
       },
+      _nextTheme: {
+        backgroundColor: 'border.default',
+        '&[data-position=last]': {
+          backgroundColor: 'transparent'
+        }
+      }
     }
   }
 })
@@ -178,7 +200,10 @@ const timelineAccordionSlotRecipe = defineSlotRecipe({
       '&[data-position=first]': {
         backgroundColor: 'transparent'
       },
-      roundedBottom: 'full'
+      roundedBottom: 'full',
+      _nextTheme: {
+        backgroundColor: 'border.default'
+      }
     },
     bottomConnector: {
       flexGrow: 1,
@@ -187,7 +212,13 @@ const timelineAccordionSlotRecipe = defineSlotRecipe({
       '&[data-position=last]': {
         backgroundColor: 'transparent'
       },
-      roundedTop: 'full'
+      roundedTop: 'full',
+      _nextTheme: {
+        backgroundColor: 'border.default',
+        '&[data-position=last]': {
+          backgroundColor: 'transparent'
+        }
+      }
     },
     title: {
       paddingTop: 1
@@ -197,7 +228,10 @@ const timelineAccordionSlotRecipe = defineSlotRecipe({
       lineHeight: 'md',
       color: 'dark',
       fontWeight: 'semibold',
-      letterSpacing: 'normal'
+      letterSpacing: 'normal',
+      _nextTheme: {
+        color: 'text.default'
+      }
     }
   }
 })

package/src/recipes/toast.ts

@@ -9,16 +9,22 @@ const toastSlotRecipe = defineSlotRecipe({
       display: 'flex',
       alignItems: 'center',
       gap: '2',
-      width: '356px',
       border: '1.5px solid',
       borderRadius: 'md',
       backgroundColor: 'white',
       padding: '3',
       boxShadow: 'lg',
-      zIndex: '9999'
+      zIndex: '1700',
+      _nextTheme: {
+        backgroundColor: 'background.neutral',
+      }
     },
     label: {
-      fontSize: 'md'
+      color: 'dark',
+      fontSize: 'md',
+      _nextTheme: {
+        color: 'text.default',
+      }
     }
   },
   variants: {
@@ -31,13 +37,23 @@ const toastSlotRecipe = defineSlotRecipe({
     {
       variant: 'success',
       css: {
-        root: { borderColor: 'green.700' }
+        root: { 
+          borderColor: 'green.700',
+          _nextTheme: {
+            borderColor: 'border.success',
+          } 
+        }
       }
     },
     {
       variant: 'error',
       css: {
-        root: { borderColor: 'red.700' }
+        root: { 
+          borderColor: 'red.700',
+          _nextTheme: {
+            borderColor: 'border.danger',
+          } 
+        }
       }
     }
   ],

package/src/recipes/toggle.ts

@@ -7,28 +7,39 @@ const toggleSlotRecipe = defineSlotRecipe({
   base: {
     root: {
       position: 'relative',
-      display: 'inline-flex',
+      width: 'fit-content',
+      display: 'flex',
       alignItems: 'center',
-      justifyContent: 'center',
+      justifyContent: 'flex-start',
       gap: '3',
       cursor: 'pointer',
       outline: 'none',
       '&[data-has-description=true]': {
         alignItems: 'flex-start',
         '& .mp-toggle__control': {
-          marginTop: '1'
+          marginTop: '2px'
         }
       },
       '& .mp-shared__hidden': {
-        '&:focus + .mp-toggle__control': {
-          borderColor: 'blue.400',
-          boxShadow: 'focus'
+        _focusVisible: {
+          '& + .mp-toggle__control': {
+            borderColor: 'blue.400',
+            boxShadow: 'focus',
+            _nextTheme: {
+              borderColor: 'border.focused',
+              boxShadow: '0 0 0 1px {colors.border.focused}'
+            }
+          }
         }
       },
       _hover: {
         '& .mp-toggle__control': {
           borderColor: 'gray.400',
-          background: 'gray.400'
+          background: 'gray.400',
+          _nextTheme: {
+            borderColor: 'border.form',
+            background: 'background.neutral.hovered'
+          }
         }
       },
       _disabled: {
@@ -37,37 +48,63 @@ const toggleSlotRecipe = defineSlotRecipe({
           borderColor: 'gray.100 !important',
           background: 'gray.50 !important',
           boxShadow: 'none !important',
+          _nextTheme: {
+            borderColor: 'border.disabled !important',
+            background: 'background.disabled !important'
+          },
 
           '& div': {
-            background: 'gray.100'
+            background: 'gray.100',
+            _nextTheme: {
+              color: 'icon.disabled'
+            }
           }
         }
       },
       _invalid: {
         '& .mp-toggle__control': {
           borderColor: 'red.400',
-          background: 'red.400'
+          background: 'red.400',
+          _nextTheme: {
+            borderColor: 'border.danger !important',
+            background: 'background.neutral'
+          }
         }
       },
       _checked: {
         '& .mp-toggle__control': {
           borderColor: 'blue.400',
           background: 'blue.400',
+          _nextTheme: {
+            borderColor: 'border.selected',
+            background: 'background.brand.bold.selected'
+          },
 
           '& div': {
-            transform: 'translateX(var(--mp-sizes-3))'
+            transform: 'translateX(13px)',
+            _nextTheme: {
+              transform: 'translateX(14px)',
+              background: 'icon.inverse'
+            }
           }
         },
         _hover: {
           '& .mp-toggle__control': {
             borderColor: 'blue.400',
-            background: 'blue.400'
+            background: 'blue.400',
+            _nextTheme: {
+              borderColor: 'border.selected.hovered',
+              background: 'background.brand.bold.hovered'
+            }
           }
         }
       }
     },
     control: {
       flex: 'none',
+      transitionDuration: '250ms',
+      transitionProperty: 'background, border-color, box-shadow',
+      transitionTimingFunction: 'linear',
       position: 'relative',
       display: 'inline-flex',
       alignItems: 'center',
@@ -78,16 +115,29 @@ const toggleSlotRecipe = defineSlotRecipe({
       borderColor: 'gray.100',
       borderRadius: 'lg',
       background: 'gray.100',
+      _nextTheme: {
+        width: '30px',
+        height: '18px',
+        borderWidth: 'sm',
+        borderColor: 'border.form',
+        borderRadius: 'full',
+        background: 'background.neutral'
+      },
 
       '& div': {
         transitionDuration: '250ms',
         transitionProperty: 'transform',
         transitionTimingFunction: 'linear',
-        transform: 'translateX(2px)',
+        transform: 'translateX(1px)',
         width: '3',
         height: '3',
         background: 'white',
-        borderRadius: 'full'
+        borderRadius: 'full',
+        _nextTheme: {
+          transform: 'translateX(2px)',
+          background: 'icon.subtle',
+          borderRadius: 'full',
+        }
       }
     },
     label: {

package/src/recipes/tooltip.ts

@@ -10,6 +10,7 @@ const tooltipRecipe = defineRecipe({
     fontWeight: 'regular',
     pointerEvents: 'none',
     fontSize: 'sm',
+    lineHeight: '20px',
     shadow: 'md',
     maxW: '300px',
     zIndex: 'tooltip',
@@ -17,7 +18,11 @@ const tooltipRecipe = defineRecipe({
     bg: 'overlay',
     color: 'white',
     whiteSpace: 'normal',
-    overflowWrap: 'break-word'
+    overflowWrap: 'break-word',
+    _nextTheme: {
+      background: 'background.overlay',
+      color: 'text.inverse.static'
+    }
   }
 })
 

package/src/recipes/upload.ts

@@ -17,30 +17,65 @@ const uploadSlotRecipe = defineSlotRecipe({
       borderWidth: '1px',
       borderColor: 'gray.100',
       borderRadius: 'md',
-      backgroundColor: 'white',
+      background: 'white',
       outline: 'none',
       transition: 'all 250ms',
+      _nextTheme: {
+        borderRadius: 'md',
+        borderColor: 'border.default',
+        background: 'background.neutral'
+      },
+
       _hover: {
         borderColor: 'gray.400',
         '& .mp-upload__resetButton': {
           display: 'block'
+        },
+
+        _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'
+          }
         }
       }
     },
@@ -69,29 +104,29 @@ const uploadListSlotRecipe = defineSlotRecipe({
       py: '2',
       px: '1',
       borderRadius: 'md',
-      backgroundColor: 'white',
+      background: 'white',
       transition: 'all 250ms',
+      _nextTheme: {
+        borderRadius: 'md',
+        background: 'background.neutral'
+      },
       _hover: {
-        backgroundColor: 'background'
+        background: 'background',
+        _nextTheme: {
+          background: 'background.neutral.hovered'
+        }
       }
     },
     titleWrapper: {
       display: 'flex',
       flexDirection: 'column',
-      minWidth: '1px',
+      minWidth: '1px'
     },
     actionWrapper: {
       display: 'flex',
       flexDirection: 'row',
       gap: '0.5',
-      ml: 'auto',
-      '& > button': {
-        // Remove hover style for Button Icon
-        _hover: {
-          background: 'transparent!important',
-          borderColor: 'transparent!important'
-        }
-      }
+      ml: 'auto'
     }
   }
 })