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

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,32 +48,69 @@ 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) + &':
         {
           color: 'blue.700'
         },
-      'input[type=radio]:checked:focus + &, input[type=radio][aria-checked=mixed]:focus + &': {
+      'input[type=radio]:checked:focus-visible + &, input[type=radio][aria-checked=mixed]:focus-visible + &': {
         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: {

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'
+      }
     }
   }
 })
@@ -56,9 +62,18 @@ const tabRecipe = defineRecipe({
       opacity: 0.4,
       cursor: 'not-allowed'
     },
-    _focus: {
+    _focusVisible: {
       shadow: '0 0 0 2px #E0EEFF',
       borderRadius: 'sm'
+    },
+    _nextTheme: {
+      color: 'text.secondary',
+      _hover: {
+        color: 'text.default'
+      },
+      _focusVisible: {
+        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,19 +23,18 @@ 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!',
+      transition: 'opacity 250ms!',
       visibility: 'hidden',
       opacity: '0',
       _groupHover: {
@@ -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.neutral.subtle',
+            boxShadow: '-7px 0px 15px -3px #0000001A',
+            color: 'icon.default',
+          }
         }
       }
     },
@@ -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/text.ts

@@ -5,7 +5,6 @@ export const textRecipe = defineRecipe({
   jsx: ['MpText', 'mp-text'],
   base: {
     color: 'var(--mp-text-color)',
-    fontVariantNumeric: 'lining-nums tabular-nums',
     '&[data-text-strike=true]': {
       textDecoration: 'line-through'
     },

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'
-    }
   }
 })