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

package/src/recipes/button.ts

@@ -140,7 +140,7 @@ const buttonRecipe = defineRecipe({
           background: 'red.700',
           borderColor: 'red.700'
         },
-        _focus: {
+        _focusVisible: {
           borderColor: 'red.400',
           boxShadow: '0 0 0 3px #FDECEE'
         },
@@ -159,7 +159,7 @@ const buttonRecipe = defineRecipe({
             background: 'background.danger.bold.pressed',
             borderColor: 'background.danger.bold.pressed'
           },
-          _focus: {
+          _focusVisible: {
             borderColor: 'border.focused',
             boxShadow: 'focus'
           },
@@ -168,6 +168,38 @@ const buttonRecipe = defineRecipe({
           }
         }
       },
+      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: {
         color: 'blue.400',
         background: 'transparent',
@@ -205,13 +237,28 @@ const buttonRecipe = defineRecipe({
             color: 'text.disabled',
 
             _hover: {
-              color: 'text.disabled'
+              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: {
@@ -224,18 +271,39 @@ const buttonRecipe = defineRecipe({
         },
         _hasIcon: {
           paddingX: '1',
-          paddingY: '1 !important',
+          paddingY: '1',
           _nextTheme: {
-            paddingX: '3xs !',
-            paddingY: '3xs !important'
+            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 !important',
-            paddingY: '3xs'
+            paddingX: 'xs',
+            paddingY: '3xs',
+            _hasIcon: {
+              '[data-icon-position=left]': {
+                paddingLeft: '2xs',
+                paddingRight: 'xs'
+              },
+              '[data-icon-position=right]': {
+                paddingLeft: 'xs',
+                paddingRight: '2xs'
+              }
+            }
           }
         }
       },
@@ -248,18 +316,39 @@ const buttonRecipe = defineRecipe({
         },
         _hasIcon: {
           paddingX: '1.5',
-          paddingY: '1.5 !important',
+          paddingY: '1.5',
           _nextTheme: {
-            paddingX: '2xs',
-            paddingY: '2xs !important'
+            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 !important',
-            paddingY: 'xs'
+            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'
+              }
+            }
           }
         }
       }
@@ -270,7 +359,7 @@ const buttonRecipe = defineRecipe({
       variant: ['textLink'],
       css: {
         borderRadius: 'sm',
-        _focus: {
+        _focusVisible: {
           borderColor: 'white',
           boxShadow: 'focus',
           _nextTheme: {
@@ -287,9 +376,9 @@ const buttonRecipe = defineRecipe({
       }
     },
     {
-      variant: ['primary', 'secondary', 'ghost'],
+      variant: ['primary', 'secondary', 'ghost', 'tertiary'],
       css: {
-        _focus: {
+        _focusVisible: {
           borderColor: 'blue.400',
           boxShadow: 'focus',
           _nextTheme: {
@@ -300,7 +389,7 @@ const buttonRecipe = defineRecipe({
       }
     },
     {
-      variant: ['primary', 'secondary', 'ghost', 'danger'],
+      variant: ['primary', 'secondary', 'ghost', 'danger', 'tertiary'],
       css: {
         _disabled: {
           cursor: 'not-allowed',
@@ -309,7 +398,15 @@ 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',
@@ -317,8 +414,16 @@ const buttonRecipe = defineRecipe({
             borderColor: 'background.disabled',
             _hover: {
               background: 'background.disabled',
-              borderColor: 'background.disabled'
-            }
+              borderColor: 'background.disabled',
+              _hasIcon: {
+                background: 'transparent',
+                borderColor: 'transparent'
+              },
+            },
+            _hasIcon: {
+              background: 'transparent',
+              borderColor: 'transparent'
+            },
           }
         }
       }

package/src/recipes/checkbox.ts

@@ -21,12 +21,14 @@ const checkboxSlotRecipe = defineSlotRecipe({
         }
       },
       '& .mp-shared__hidden': {
-        '&:focus + .mp-checkbox__control': {
-          borderColor: 'blue.400',
-          boxShadow: 'focus',
-          _nextTheme: {
-            borderColor: 'border.focused',
-            boxShadow: '0 0 0 1px {colors.border.focused}'
+        _focusVisible: {
+          '& + .mp-checkbox__control': {
+            borderColor: 'blue.400',
+            boxShadow: 'focus',
+            _nextTheme: {
+              borderColor: 'border.focused',
+              boxShadow: '0 0 0 1px {colors.border.focused}'
+            }
           }
         }
       },

package/src/recipes/dropzone.ts

@@ -71,7 +71,7 @@ const dropzoneSlotRecipe = defineSlotRecipe({
         boxShadow: 'focus',
         borderColor: 'blue.400',
         _nextTheme: {
-          boxShadow: 'focus',
+          boxShadow: 'none',
           borderColor: 'border.focused'
         },
         _hover: {

package/src/recipes/icon.ts

@@ -11,7 +11,9 @@ export const iconRecipe = defineRecipe({
     flexShrink: 0,
     '&:not(:root)': {
       overflow: 'hidden'
-    }
+    },
+    width: 'var(--mp-icon-size)',
+    height: 'var(--mp-icon-size)'
   },
   variants: {
     size: {

package/src/recipes/index.ts

@@ -1,5 +1,6 @@
 import { tagSlotRecipe } from './tag'
 import { avatarSlotRecipe, avatarGroupSlotRecipe } from './avatar'
+import { aireneButtonSlotRecipe } from './airene-button'
 import { buttonRecipe, buttonGroupRecipe } from './button'
 import { inputSlotRecipe, inputGroupSlotRecipe, inputAddonSlotRecipe } from './input'
 import { selectSlotRecipe } from './select'
@@ -137,5 +138,6 @@ export const slotRecipes = {
   tabListSlotRecipe,
   colorPickerSlotRecipe,
   sliderSlotRecipe,
-  tourSlotRecipe
+  tourSlotRecipe,
+  aireneButtonSlotRecipe
 }

package/src/recipes/input.ts

@@ -36,7 +36,7 @@ const inputSlotRecipe = defineSlotRecipe({
       paddingInline: '3',
       appearance: 'none',
       caretColor: 'blue.500',
-      transition: 'all 250ms',
+      transition: 'border-color 250ms, background-color 250ms',
       _isFullWidth: {
         width: 'full'
       },
@@ -194,7 +194,7 @@ const inputGroupSlotRecipe = defineSlotRecipe({
       width: 'full',
       '&[data-with-left-addon=true]': {
         '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
-          paddingLeft: 'calc(var(--mp-input-offset--left) + 24px)'
+          paddingLeft: 'calc(var(--mp-input-offset--left) + 14px)'
         },
       },
       '&[data-with-clearable=true]': {
@@ -212,14 +212,14 @@ const inputGroupSlotRecipe = defineSlotRecipe({
       },
       '&[data-with-right-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]': {
             paddingRight: 'calc(var(--mp-input-offset--right) + 54px)'
           },
           '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]': {
-            '--mp-input--right': 'calc(var(--mp-input-offset--right) + 24px)'
+            '--mp-input--right': 'calc(var(--mp-input-offset--right) + 14px)'
           }
         }
       },
@@ -281,16 +281,20 @@ const inputAddonSlotRecipe = defineSlotRecipe({
     placement: {
       left: {
         root: {
-          left: '3',
+          left: '2',
           borderTopRightRadius: 'none!',
-          borderBottomRightRadius: 'none!'
+          borderBottomRightRadius: 'none!',
+          minWidth: '32px',
+          justifyContent: 'center'
         }
       },
       right: {
         root: {
-          right: '3',
+          right: '2',
           borderTopLeftRadius: 'none!',
-          borderBottomLeftRadius: 'none!'
+          borderBottomLeftRadius: 'none!',
+          minWidth: '32px',
+          justifyContent: 'center'
         }
       }
     },
@@ -300,8 +304,16 @@ const inputAddonSlotRecipe = defineSlotRecipe({
           height: '6.5',
           borderRadius: '2xs',
           _hasBackground: {
-            _placementLeft: { left: '0.5' },
-            _placementRight: { right: '0.5' }
+            _placementLeft: { 
+              left: '0.5',
+              minWidth: '24px',
+              justifyContent: 'center'
+            },
+            _placementRight: { 
+              right: '0.5',
+              minWidth: '24px',
+              justifyContent: 'center'
+            }
           }
         }
       },
@@ -310,8 +322,16 @@ const inputAddonSlotRecipe = defineSlotRecipe({
           height: '32px',
           borderRadius: 'sm',
           _hasBackground: {
-            _placementLeft: { left: '3px' },
-            _placementRight: { right: '3px' }
+            _placementLeft: { 
+              left: '3px',
+              minWidth: '32px',
+              justifyContent: 'center'
+            },
+            _placementRight: { 
+              right: '3px',
+              minWidth: '32px',
+              justifyContent: 'center'
+            }
           }
         }
       }

package/src/recipes/modal.ts

@@ -53,7 +53,10 @@ export const modalSlotRecipe = defineSlotRecipe({
       _nextTheme: {
         background: 'background.stage',
         borderColor: 'border.bold',
-        color: 'text.default'
+        color: 'text.default',
+        '&[data-modal-type="drawer"]': {
+          borderColor: 'border.default',
+        }
       }
     },
 
@@ -72,6 +75,10 @@ export const modalSlotRecipe = defineSlotRecipe({
         color: 'text.default',
         background: 'background.neutral.subtle',
         borderBottomColor: 'border.default'
+      },
+      '&[data-modal-presentation="drawer"]': {
+        borderTopLeftRadius: 'none',
+        borderTopRightRadius: 'none',
       }
     },
     closeButton: {
@@ -120,7 +127,7 @@ export const modalSlotRecipe = defineSlotRecipe({
           borderRadius: 'md'
         }
       }
-    }
+    },
   },
 
   defaultVariants: {

package/src/recipes/radio.ts

@@ -21,12 +21,14 @@ const radioSlotRecipe = defineSlotRecipe({
         }
       },
       '& .mp-shared__hidden': {
-        '&:focus + .mp-radio__control': {
-          borderColor: 'blue.400',
-          boxShadow: 'focus',
-          _nextTheme: {
-            borderColor: 'border.focused',
-            boxShadow: '0 0 0 1px {colors.border.focused}'
+        _focusVisible: {
+          '& + .mp-radio__control': {
+            borderColor: 'blue.400',
+            boxShadow: 'focus',
+            _nextTheme: {
+              borderColor: 'border.focused',
+              boxShadow: '0 0 0 1px {colors.border.focused}'
+            }
           }
         }
       },

package/src/recipes/segmented-control.ts

@@ -87,7 +87,7 @@ const segmentedControlSlotRecipe = defineSlotRecipe({
         {
           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',
         _nextTheme: {

package/src/recipes/tabs.ts

@@ -62,7 +62,7 @@ const tabRecipe = defineRecipe({
       opacity: 0.4,
       cursor: 'not-allowed'
     },
-    _focus: {
+    _focusVisible: {
       shadow: '0 0 0 2px #E0EEFF',
       borderRadius: 'sm'
     },
@@ -71,7 +71,7 @@ const tabRecipe = defineRecipe({
       _hover: {
         color: 'text.default'
       },
-      _focus: {
+      _focusVisible: {
         shadow: '0 0 0 2px var(--mp-colors-border-focused)'
       }
     }

package/src/recipes/tag.ts

@@ -34,7 +34,7 @@ const tagSlotRecipe = defineSlotRecipe({
       right: '0',
       paddingTop: '1',
       padding: '0',
-      transition: 'all 250ms!',
+      transition: 'opacity 250ms!',
       visibility: 'hidden',
       opacity: '0',
       _groupHover: {
@@ -97,9 +97,9 @@ const tagSlotRecipe = defineSlotRecipe({
           borderBottomLeftRadius: '0',
           color: 'gray.600',
           _nextTheme: {
-            background: 'background.danger',
+            background: 'background.neutral.subtle',
             boxShadow: '-7px 0px 15px -3px #0000001A',
-            color: 'icon.danger',
+            color: 'icon.default',
           }
         }
       }

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/timeline.ts

@@ -167,7 +167,10 @@ const timelineSeparatorSlotRecipe = defineSlotRecipe({
         backgroundColor: 'transparent'
       },
       _nextTheme: {
-        backgroundColor: 'border.default'
+        backgroundColor: 'border.default',
+        '&[data-position=last]': {
+          backgroundColor: 'transparent'
+        }
       }
     }
   }
@@ -211,7 +214,10 @@ const timelineAccordionSlotRecipe = defineSlotRecipe({
       },
       roundedTop: 'full',
       _nextTheme: {
-        backgroundColor: 'border.default'
+        backgroundColor: 'border.default',
+        '&[data-position=last]': {
+          backgroundColor: 'transparent'
+        }
       }
     },
     title: {

package/src/recipes/toast.ts

@@ -9,13 +9,12 @@ 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',
       }

package/src/recipes/toggle.ts

@@ -21,12 +21,14 @@ const toggleSlotRecipe = defineSlotRecipe({
         }
       },
       '& .mp-shared__hidden': {
-        '&:focus + .mp-toggle__control': {
-          borderColor: 'blue.400',
-          boxShadow: 'focus',
-          _nextTheme: {
-            borderColor: 'border.focused',
-            boxShadow: '0 0 0 1px {colors.border.focused}'
+        _focusVisible: {
+          '& + .mp-toggle__control': {
+            borderColor: 'blue.400',
+            boxShadow: 'focus',
+            _nextTheme: {
+              borderColor: 'border.focused',
+              boxShadow: '0 0 0 1px {colors.border.focused}'
+            }
           }
         }
       },

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',

package/src/text-styles.ts

@@ -14,7 +14,7 @@ export const textStyles = defineTextStyles({
   },
   label: {
     sm: { value: { fontFamily: 'var(--font-inter)', fontSize: 'sm', lineHeight: 'sm' } },
-    md: { value: { fontFamily: 'var(--font-inter)', fontSize: 'md', lineHeight: 'lg' } }
+    md: { value: { fontFamily: 'var(--font-inter)', fontSize: 'md', lineHeight: 'md' } }
   },
   h3: {
     value: {

package/src/tokens/colors.ts

@@ -7,6 +7,7 @@ export const colors = defineTokens.colors({
   background: { value: '#F1F5F9' },
   overlay: { value: 'rgba(22, 26, 32, 0.8)' },
   white: { value: '#FFFFFF' },
+  vibrantPurple: { value: 'linear-gradient(98deg, #F8F9FB 0%, #B5A2EC 50.01%, #4B61DD 100%)' },
   whiteAlpha: {
     50: { value: 'rgba(255, 255, 255, 0.04)' },
     100: { value: 'rgba(255, 255, 255, 0.06)' },

package/src/tokens-next/colors.ts

@@ -4,6 +4,7 @@ export const colors = defineTokens.colors({
   debug: { value: 'red' },
   currentcolor: { value: 'currentcolor' },
   white: { value: '#FFFFFF' },
+  vibrantPurple: { value: 'linear-gradient(98deg, #F8F9FB 0%, #B5A2EC 50.01%, #4B61DD 100%)' },
   dark: {
     '-100': {
       value: '#101214'