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

package/src/recipes/slider.ts

@@ -21,7 +21,7 @@ const sliderSlotRecipe = defineSlotRecipe({
       flexDirection: 'column',
       gap: '10px'
     },
-    labelWrapper: {
+    labelWrapper: { 
       display: 'flex',
       justifyContent: 'space-between'
     },
@@ -53,26 +53,66 @@ const sliderSlotRecipe = defineSlotRecipe({
       background: 'none',
       outline: 'none',
 
-      _focusVisible: {
+      _focus: {
         borderRadius: '100px',
         borderWidth: '1px',
         borderStyle: 'solid',
         borderColor: 'blue.400',
-        boxShadow: 'focus'
+        boxShadow: 'focus',
+
+        _nextTheme: {
+          borderColor  : 'border.focused',
+          boxShadow: 'focus',
+        },
+      },
+
+      _disabled: {
+        '&::-webkit-slider-thumb': {
+          cursor: 'not-allowed',
+          background: 'radial-gradient(circle, var(--mp-colors-gray-100) 40%, var(--mp-colors-white) 50%)',
+          
+          _nextTheme: {
+            background: 'radial-gradient(circle, var(--mp-colors-icon-disabled) 40%, var(--mp-colors-background-neutral) 50%)'
+          }
+        }
+      },
+
+      '&[minpressed=true], &[maxpressed=true]': {
+        '&::-webkit-slider-thumb': {
+          borderColor: 'blue.400',
+          
+          _nextTheme: {
+            borderColor: 'border.brand'
+          }
+        }
       },
 
       '&::-webkit-slider-thumb': {
+        cursor: 'pointer',
         appearance: 'none',
+        pointerEvents: 'auto',
         width: '5',
         height: '5',
         borderRadius: 'full',
         borderStyle: 'solid',
         borderColor: 'gray.100',
+        background: 'radial-gradient(circle, var(--mp-colors-blue-400) 40%, var(--mp-colors-white) 50%)',
         boxShadow: 'sm',
-        filter:
-          'drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.05)) drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.10))',
+        filter: 'drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.05)) drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.10))',
         transition: 'border-color 250ms',
-        pointerEvents: 'auto'
+
+        _hover: {
+          borderColor: 'gray.600',
+
+          _nextTheme: {
+            borderColor: 'border.bold'
+          }
+        },
+
+        _nextTheme: {
+          borderColor: 'border.default',
+          background: 'radial-gradient(circle, var(--mp-colors-border-brand) 40%, var(--mp-colors-background-neutral) 50%)'
+        }
       }
     }
   }

package/src/recipes/table.ts

@@ -14,19 +14,24 @@ const tableRecipe = defineRecipe({
       '& tr': {
         _hover: {
           '& > td': {
-            backgroundColor: 'gray.50'
+            backgroundColor: 'gray.50',
+            _nextTheme: {
+              background: 'background.neutral.hovered',
+            }
           }
         }
       }
     },
     '& > thead': {
       width: 'full',
-      backgroundColor: 'gray.25',
       '&[data-table-head-fixed=true]': {
         position: 'sticky',
         zIndex: 'sticky',
         top: '0',
-        boxShadow: '0px 2px var(--mp-colors-gray-100)'
+        boxShadow: '0px 2px var(--mp-colors-gray-100)',
+        _nextTheme: {
+          boxShadow: '0px 2px var(--mp-colors-border-default)'
+        }
       }
     },
     '& > tbody': {
@@ -40,23 +45,33 @@ const tableRecipe = defineRecipe({
     '& th, & td': {
       cursor: 'default',
       paddingLeft: '2',
-      paddingRight: '4',
-      paddingY: '2',
-      height: '12',
+      paddingRight: '4', 
+      height: '52px',
       textStyle: 'label.md',
       textAlign: 'left',
-      borderBottom: 'sm',
-      borderStyle: 'solid',
+      color: 'dark',
+      borderBottomWidth: 'sm',
       borderColor: 'gray.100',
-      transition: 'background linear 120ms'
+      transition: 'background linear 120ms',
+      _nextTheme: {
+        color: 'text.default',
+        borderBottomWidth: 'sm',
+        borderColor: 'border.default',
+      }
     },
     '& th': {
       fontWeight: 'semiBold',
-      backgroundColor: 'gray.25'
+      background: 'gray.25',
+      _nextTheme: {
+        background: 'background.surface',
+      }
     },
     '& td': {
       fontWeight: 'regular',
-      backgroundColor: 'white'
+      backgroundColor: 'white',
+      _nextTheme: {
+        background: 'background.neutral',
+      }
     },
     '& th[data-table-cell-fixed=true], & td[data-table-cell-fixed=true]': {
       position: 'sticky',

package/src/recipes/tabs.ts

@@ -15,7 +15,10 @@ const tabListSlotRecipe = defineSlotRecipe({
           position: 'absolute',
           right: 0,
           left: 0,
-          bottom: '1px'
+          bottom: '1px',
+          _nextTheme: {
+            background: 'border.default'
+          }
         }
       }
     },
@@ -29,7 +32,10 @@ const tabListSlotRecipe = defineSlotRecipe({
       padding: 0.5,
       alignItems: 'center',
       justifyContent: 'flex-start',
-      maxWidth: 'full'
+      maxWidth: 'full',
+      _nextTheme: {
+        color: 'text.secondary'
+      }
     }
   }
 })
@@ -59,6 +65,15 @@ const tabRecipe = defineRecipe({
     _focus: {
       shadow: '0 0 0 2px #E0EEFF',
       borderRadius: 'sm'
+    },
+    _nextTheme: {
+      color: 'text.secondary',
+      _hover: {
+        color: 'text.default'
+      },
+      _focus: {
+        shadow: '0 0 0 2px var(--mp-colors-border-focused)'
+      }
     }
   },
   variants: {
@@ -81,6 +96,12 @@ const tabRecipe = defineRecipe({
         color: 'blue.400',
         _hover: {
           color: 'blue.500'
+        },
+        _nextTheme: {
+          color: 'text.selected',
+          _hover: {
+            color: 'text.selected'
+          }
         }
       }
     },
@@ -154,6 +175,11 @@ const tabSelectedBorderRecipe = defineRecipe({
         background: 'transparent',
         _groupHover: {
           background: 'gray.400'
+        },
+        _nextTheme: {
+          _groupHover: {
+            background: 'border.bold'
+          }
         }
       },
       true: {}
@@ -166,7 +192,13 @@ const tabSelectedBorderRecipe = defineRecipe({
       css: {
         background: 'blue.400',
         _groupHover: {
-          background: 'blue.500'
+          background: 'border.selected'
+        },
+        _nextTheme: {
+          background: 'border.selected',
+          _groupHover: {
+            background: 'border.selected',
+          },
         }
       }
     },

package/src/recipes/tag.ts

@@ -11,8 +11,7 @@ const tagSlotRecipe = defineSlotRecipe({
       alignItems: 'center',
       userSelect: 'auto',
       outline: '0px solid transparent',
-      borderWidth: '1px',
-      borderColor: 'transparent',
+      borderWidth: '0',
       borderRadius: 'sm',
       transition: 'all 250ms',
       textAlign: 'left',
@@ -24,16 +23,15 @@ const tagSlotRecipe = defineSlotRecipe({
       whiteSpace: 'normal',
       overflowWrap: 'anywhere',
       cursor: 'var(--mp-tag--cursor)',
-      height: 'fit-content'
+      height: 'fit-content',
+      _nextTheme: {
+        paddingX: '1.5'
+      }
     },
     close: {
       position: 'absolute!',
-      color: 'gray.600',
       border: 'none',
       right: '0',
-      width: '5',
-      height: '5',
-      minWidth: '5',
       paddingTop: '1',
       padding: '0',
       transition: 'all 250ms!',
@@ -49,12 +47,20 @@ const tagSlotRecipe = defineSlotRecipe({
     size: {
       sm: {
         root: {
-          paddingY: '0'
+          height: '5',
+        },
+        close: {
+          width: '5',
+          height: '5',
         }
       },
       md: {
         root: {
-          paddingY: '1'
+          height: '7',
+        },
+        close: {
+          width: '7',
+          height: '7',
         }
       }
     },
@@ -62,13 +68,21 @@ const tagSlotRecipe = defineSlotRecipe({
       gray: {
         root: {
           color: 'gray.600',
-          background: 'gray.50'
+          background: 'gray.50',
+          _nextTheme: {
+            color: 'text.secondary',
+            background: 'background.neutral.subtle',
+          }
         }
       },
       red: {
         root: {
           color: 'red.400',
-          backgroundColor: 'red.50'
+          backgroundColor: 'red.50',
+          _nextTheme: {
+            color: 'text.danger',
+            background: 'background.danger',
+          }
         }
       }
     }
@@ -78,7 +92,15 @@ const tagSlotRecipe = defineSlotRecipe({
       variant: 'gray',
       css: {
         close: {
-          background: 'linear-gradient(270deg, #EDF0F2 75%, rgba(237, 240, 242, 0) 111.54%)'
+          background: 'linear-gradient(270deg, #EDF0F2 75%, rgba(237, 240, 242, 0) 111.54%)',
+          borderTopLeftRadius: '0',
+          borderBottomLeftRadius: '0',
+          color: 'gray.600',
+          _nextTheme: {
+            background: 'background.danger',
+            boxShadow: '-7px 0px 15px -3px #0000001A',
+            color: 'icon.danger',
+          }
         }
       }
     },
@@ -86,7 +108,15 @@ const tagSlotRecipe = defineSlotRecipe({
       variant: 'red',
       css: {
         close: {
-          background: 'linear-gradient(270deg, #FDECEE 75%, rgba(237, 240, 242, 0) 111.54%)'
+          background: 'linear-gradient(270deg, #FDECEE 75%, rgba(237, 240, 242, 0) 111.54%)',
+          borderTopLeftRadius: '0',
+          borderBottomLeftRadius: '0',
+          color: 'red.400',
+          _nextTheme: {
+            background: 'background.danger',
+            boxShadow: '-7px 0px 15px -3px #0000001A',
+            color: 'icon.danger',
+          }
         }
       }
     },

package/src/recipes/textarea.ts

@@ -4,54 +4,8 @@ const textareaRecipe = defineRecipe({
   className: 'textarea',
   jsx: ['MpTextarea', 'mp-textarea'],
   base: {
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    outline: '0',
-    borderWidth: '1px',
-    borderColor: 'gray.100',
-    borderRadius: 'md',
-    color: 'dark',
-    backgroundColor: 'white',
-    appearance: 'none',
-    transition: 'all 250ms',
     minHeight: '20',
-    fontSize: 'md',
-    fontWeight: 'regular',
-    lineHeight: 'md',
-    paddingX: '3',
-    paddingTop: '2',
-    paddingBottom: '5',
     resize: 'both',
-    _isFullWidth: {
-      width: 'full'
-    },
-    _hover: {
-      borderColor: 'gray.400'
-    },
-    _focus: {
-      borderColor: 'blue.500',
-      boxShadow: 'outer',
-      _hover: {
-        borderColor: 'blue.500'
-      },
-      _invalid: {
-        borderColor: 'red.400'
-      }
-    },
-    _disabled: {
-      color: 'gray.400',
-      backgroundColor: 'gray.50',
-      borderColor: 'gray.100',
-      cursor: 'not-allowed'
-    },
-    _invalid: {
-      borderColor: 'red.400'
-    },
-    _readOnly: {
-      boxShadow: 'none',
-      userSelect: 'all'
-    }
   }
 })
 

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,9 @@ const timelineSeparatorSlotRecipe = defineSlotRecipe({
       '&[data-position=last]': {
         backgroundColor: 'transparent'
       },
+      _nextTheme: {
+        backgroundColor: 'border.default'
+      }
     }
   }
 })
@@ -178,7 +197,10 @@ const timelineAccordionSlotRecipe = defineSlotRecipe({
       '&[data-position=first]': {
         backgroundColor: 'transparent'
       },
-      roundedBottom: 'full'
+      roundedBottom: 'full',
+      _nextTheme: {
+        backgroundColor: 'border.default'
+      }
     },
     bottomConnector: {
       flexGrow: 1,
@@ -187,7 +209,10 @@ const timelineAccordionSlotRecipe = defineSlotRecipe({
       '&[data-position=last]': {
         backgroundColor: 'transparent'
       },
-      roundedTop: 'full'
+      roundedTop: 'full',
+      _nextTheme: {
+        backgroundColor: 'border.default'
+      }
     },
     title: {
       paddingTop: 1
@@ -197,7 +222,10 @@ const timelineAccordionSlotRecipe = defineSlotRecipe({
       lineHeight: 'md',
       color: 'dark',
       fontWeight: 'semibold',
-      letterSpacing: 'normal'
+      letterSpacing: 'normal',
+      _nextTheme: {
+        color: 'text.default'
+      }
     }
   }
 })

package/src/recipes/toast.ts

@@ -15,10 +15,17 @@ const toastSlotRecipe = defineSlotRecipe({
       backgroundColor: 'white',
       padding: '3',
       boxShadow: 'lg',
-      zIndex: '9999'
+      zIndex: '9999',
+      _nextTheme: {
+        backgroundColor: 'background.neutral',
+      }
     },
     label: {
-      fontSize: 'md'
+      color: 'dark',
+      fontSize: 'md',
+      _nextTheme: {
+        color: 'text.default',
+      }
     }
   },
   variants: {
@@ -31,13 +38,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,37 @@ 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'
+          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 +46,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 +113,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: {