@mekari/pixel3-theme 0.0.3 → 0.0.5-dev.0

package/src/recipes/segmented-control.ts

@@ -0,0 +1,91 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const segmentedControlSlotRecipe = defineSlotRecipe({
+  className: 'segmented-control',
+  jsx: ['MpSegmentedControl', 'mp-segmented-control'],
+  slots: ['root', 'item', 'hidden', 'control', 'label', 'icon'],
+  base: {
+    root: {
+      position: 'relative',
+      display: 'inline-flex',
+      gap: '1',
+      flexDirection: 'row',
+      justifyContent: 'var(--mp-segmented-control--justify-content)',
+      alignItems: 'center',
+      width: 'var(--mp-segmented-control--width)',
+      height: '9.5',
+      borderWidth: '1px',
+      borderColor: 'gray.100',
+      borderRadius: 'md',
+      outline: '0px solid transparent',
+      padding: '1'
+    },
+    item: {
+      flex: 'var(--mp-segmented-control--flex)',
+      cursor: 'var(--mp-segmented-control--cursor)'
+    },
+    hidden: {
+      border: '0px',
+      clip: 'rect(0px, 0px, 0px, 0px)',
+      margin: '-1px',
+      padding: '0px',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      height: '1px',
+      width: '1px',
+      position: 'absolute'
+    },
+    control: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'var(--mp-segmented-control--justify-content)',
+      height: '7',
+      paddingY: '1',
+      userSelect: 'none',
+      borderRadius: 'sm',
+      transition: 'all 250ms',
+      color: 'gray.600',
+      backgroundColor: 'white',
+      gap: 'var(--mp-segmented-control--gap)',
+      paddingX: 'var(--mp-segmented-control--padding-x)',
+      'input[type=radio]:hover:not(:disabled):not(:checked) + &': {
+        color: 'blue.700'
+      },
+      'input[type=radio]:checked + &, input[type=radio][aria-checked=mixed] + &': {
+        color: 'blue.400',
+        backgroundColor: 'blue.50'
+      },
+      'input[type=radio]:disabled + &': {
+        color: 'gray.400'
+      },
+      '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 + &': {
+        color: 'blue.700',
+        boxShadow: 'outer'
+      },
+      'input[type=radio]:checked:disabled + &, input[type=radio][aria-checked=mixed]:disabled + &':
+        {
+          color: 'gray.400',
+          backgroundColor: 'gray.50'
+        }
+    },
+    label: {
+      color: 'currentColor',
+      fontSize: 'md',
+      fontFamily: 'body',
+      lineHeight: 'md',
+      opacity: '1'
+    },
+    icon: {
+      color: 'currentColor'
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})
+
+export { segmentedControlSlotRecipe }

package/src/recipes/tag.ts

@@ -23,7 +23,8 @@ const tagSlotRecipe = defineSlotRecipe({
       paddingX: '2',
       whiteSpace: 'normal',
       overflowWrap: 'anywhere',
-      cursor: 'var(--mp-tag--cursor)'
+      cursor: 'var(--mp-tag--cursor)',
+      height: 'fit-content'
     },
     close: {
       position: 'absolute!',

package/src/recipes/text.ts

@@ -10,7 +10,8 @@ export const textRecipe = defineRecipe({
       textDecoration: 'line-through'
     },
     '&[data-text-link=true]': {
-      textDecoration: 'underline'
+      textDecoration: 'underline',
+      cursor: 'pointer'
     }
   },
   variants: {

package/src/recipes/toast.ts

@@ -0,0 +1,49 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const toastSlotRecipe = defineSlotRecipe({
+  className: 'toast',
+  jsx: ['MpToast', 'mp-toast'],
+  slots: ['root', 'icon', 'label'],
+  base: {
+    root: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '2',
+      width: '356px',
+      border: '1.5px solid',
+      borderRadius: 'md',
+      backgroundColor: 'white',
+      padding: '3',
+      boxShadow: 'lg',
+      zIndex: '9999'
+    },
+    label: {
+      fontSize: 'md'
+    }
+  },
+  variants: {
+    variant: {
+      success: {},
+      error: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: 'success',
+      css: {
+        root: { borderColor: 'green.700' }
+      }
+    },
+    {
+      variant: 'error',
+      css: {
+        root: { borderColor: 'red.700' }
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: 'success'
+  }
+})
+
+export { toastSlotRecipe }

package/src/recipes/upload.ts

@@ -64,7 +64,7 @@ const uploadListSlotRecipe = defineSlotRecipe({
       width: 'full',
       display: 'flex',
       alignItems: 'center',
-      justifyContent: 'start',
+      justifyContent: 'flex-start',
       gap: '3',
       py: '2',
       px: '1',

package/src/tokens/colors.ts

@@ -39,7 +39,7 @@ export const colors = defineTokens.colors({
     800: { value: 'rgba(255, 255, 255, 0.80)' },
     900: { value: 'rgba(255, 255, 255, 0.92)' }
   },
-  blackAplpha: {
+  blackAlpha: {
     50: { value: 'rgba(0, 0, 0, 0.04)' },
     100: { value: 'rgba(0, 0, 0, 0.06)' },
     200: { value: 'rgba(0, 0, 0, 0.08)' },

package/src/tokens/typography.ts

@@ -3,7 +3,7 @@ import { defineTokens } from '@pandacss/dev'
 export const fonts = defineTokens.fonts({
   body: {
     value:
-      '"inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+      '"Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
   },
   mono: {
     value: 'SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace'