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

package/dist/tokens-next/radii.d.mts

@@ -0,0 +1,26 @@
+declare const radii: {
+    none: {
+        value: string;
+    };
+    sm: {
+        value: string;
+        description: string;
+    };
+    md: {
+        value: string;
+        description: string;
+    };
+    lg: {
+        value: string;
+        description: string;
+    };
+    xl: {
+        value: string;
+        description: string;
+    };
+    full: {
+        value: string;
+    };
+};
+
+export { radii };

package/dist/tokens-next/radii.d.ts

@@ -0,0 +1,26 @@
+declare const radii: {
+    none: {
+        value: string;
+    };
+    sm: {
+        value: string;
+        description: string;
+    };
+    md: {
+        value: string;
+        description: string;
+    };
+    lg: {
+        value: string;
+        description: string;
+    };
+    xl: {
+        value: string;
+        description: string;
+    };
+    full: {
+        value: string;
+    };
+};
+
+export { radii };

package/dist/tokens-next/shadows.d.mts

@@ -0,0 +1,28 @@
+declare const shadows: {
+    xs: {
+        value: string[];
+    };
+    sm: {
+        value: string[];
+    };
+    md: {
+        value: string[];
+    };
+    lg: {
+        value: string[];
+    };
+    focus: {
+        value: string;
+    };
+    outline: {
+        value: string;
+    };
+    outer: {
+        value: string;
+    };
+    none: {
+        value: string;
+    };
+};
+
+export { shadows };

package/dist/tokens-next/shadows.d.ts

@@ -0,0 +1,28 @@
+declare const shadows: {
+    xs: {
+        value: string[];
+    };
+    sm: {
+        value: string[];
+    };
+    md: {
+        value: string[];
+    };
+    lg: {
+        value: string[];
+    };
+    focus: {
+        value: string;
+    };
+    outline: {
+        value: string;
+    };
+    outer: {
+        value: string;
+    };
+    none: {
+        value: string;
+    };
+};
+
+export { shadows };

package/dist/tokens-next/spacing.d.mts

@@ -0,0 +1,51 @@
+declare const spacing: {
+    0: {
+        value: string;
+    };
+    0.5: {
+        value: string;
+        description: string;
+    };
+    1: {
+        value: string;
+        description: string;
+    };
+    1.5: {
+        value: string;
+        description: string;
+    };
+    2: {
+        value: string;
+        description: string;
+    };
+    3: {
+        value: string;
+        description: string;
+    };
+    4: {
+        value: string;
+        description: string;
+    };
+    5: {
+        value: string;
+        description: string;
+    };
+    6: {
+        value: string;
+        description: string;
+    };
+    8: {
+        value: string;
+        description: string;
+    };
+    10: {
+        value: string;
+        description: string;
+    };
+    20: {
+        value: string;
+        description: string;
+    };
+};
+
+export { spacing };

package/dist/tokens-next/spacing.d.ts

@@ -0,0 +1,51 @@
+declare const spacing: {
+    0: {
+        value: string;
+    };
+    0.5: {
+        value: string;
+        description: string;
+    };
+    1: {
+        value: string;
+        description: string;
+    };
+    1.5: {
+        value: string;
+        description: string;
+    };
+    2: {
+        value: string;
+        description: string;
+    };
+    3: {
+        value: string;
+        description: string;
+    };
+    4: {
+        value: string;
+        description: string;
+    };
+    5: {
+        value: string;
+        description: string;
+    };
+    6: {
+        value: string;
+        description: string;
+    };
+    8: {
+        value: string;
+        description: string;
+    };
+    10: {
+        value: string;
+        description: string;
+    };
+    20: {
+        value: string;
+        description: string;
+    };
+};
+
+export { spacing };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mekari/pixel3-theme",
   "description": "Theme for mekari pixel 3",
-  "version": "0.2.1",
+  "version": "0.2.2-dev.0",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [

package/src/conditions.ts

@@ -2,9 +2,9 @@ export const conditions = {
   extend: {
     disabled: '&:is(:disabled, [disabled], [aria-disabled=true], [data-disabled])',
     invalid: '&:is([aria-invalid=true], [data-invalid])',
+    active: '&:is(:active, [data-active], [data-active=true])',
     checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state=checked])',
-    indeterminate:
-      '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])',
+    indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])',
     closed: '&:is([data-state=closed])',
     open: '&:is([open], [data-state=open])',
     hidden: '&:is([hidden])',
@@ -12,12 +12,14 @@ export const conditions = {
     loading: '& > [data-loading=true], &:is([data-loading], [aria-busy=true])',
     hasIcon: '&[data-has-icon=true]',
     hasLabel: '&[data-has-label=true]',
-    active: '&[data-active=true], [data-active]',
     highlight: '&[data-highlight=true], [data-highlight]',
     hasBorder: '&[data-has-border=true]',
     hasBackground: '&[data-has-background=true]',
     isFullWidth: '&[data-is-full-width=true]',
     placementLeft: '&[data-placement=left]',
-    placementRight: '&[data-placement=right]'
+    placementRight: '&[data-placement=right]',
+    nextTheme: '[data-panda-theme=next] &',
+    light: '.light &',
+    dark: '.dark &',
   }
 }

package/src/global-css.ts

@@ -16,6 +16,10 @@ export const globalCss = defineGlobalStyles({
     lineHeight: 'var(--mp-line-heights-lg)',
     _dark: {
       colorScheme: 'dark'
+    },
+    _nextTheme: {
+      background: 'var(--mp-colors-background-neutral)', 
+      color: 'var(--mp-colors-text-default)',
     }
   },
   '*, *::before, *::after': {

package/src/index.ts

@@ -7,23 +7,36 @@ import { keyframes } from './keyframes'
 import { recipes, slotRecipes } from './recipes'
 import { textStyles } from './text-styles'
 import { tokens } from './tokens'
+import { tokensNext } from './tokens-next'
+import { semanticTokens } from './semanticTokens'
 import { globalFontface } from './fonts'
 
 const preset: Preset = definePreset({
   name: '@mekari/pixel3-theme',
+  // Main Theme
   theme: {
     extend: {
+      tokens,
       breakpoints,
       keyframes,
       textStyles,
-      tokens,
       recipes,
       slotRecipes
     }
   },
+  // Alternate Theme
+  themes: {
+    next: {
+      tokens: tokensNext,
+      semanticTokens
+    },
+  },
   conditions,
-  globalFontface,
   globalCss,
+  staticCss: {
+    themes: ['next']
+  },
+  globalFontface,
   globalVars: {
     '--font-inter': 'Inter, sans-serif'
   }

package/src/recipes/accordion.ts

@@ -23,12 +23,22 @@ export const accordionSlotRecipe = defineSlotRecipe({
       fontWeight: 'semiBold',
       fontSize: 'md',
       color: 'dark',
-      _disabled: { opacity: '0.4', cursor: 'not-allowed' }
+      _disabled: { opacity: '0.4', cursor: 'not-allowed' },
+      _nextTheme: {
+        color: 'text.default'
+      }
     },
     item: {
       borderBottomWidth: '1px',
       borderColor: 'gray.100',
-      _last: { borderBottomWidth: '1px', borderColor: 'gray.100' }
+      _last: {
+        borderBottomWidth: '1px',
+        borderColor: 'gray.100',
+        _nextTheme: { borderColor: 'border.default' }
+      },
+      _nextTheme: {
+        borderColor: 'border.default'
+      }
     },
     panel: {
       py: 3

package/src/recipes/autocomplete.ts

@@ -28,7 +28,12 @@ const autocompleteSlotRecipe = defineSlotRecipe({
       zIndex: '999',
       py: 2,
       height: '9.5',
-      _hover: { color: 'blue.500' }
+      _hover: { color: 'blue.500', _nextTheme: { color: 'text.link' } },
+      _nextTheme: {
+        background: 'background.stage',
+        borderColor: 'border.default',
+        color: 'text.link',
+      }
     },
     emptyText: {
       px: 3, 

package/src/recipes/avatar.ts

@@ -2,31 +2,76 @@ import { defineSlotRecipe } from '@pandacss/dev'
 
 const variantColor = {
   gray: {
-    root: { backgroundColor: 'gray.50' }
+    root: { 
+      backgroundColor: 'gray.50',
+      _nextTheme: {
+        backgroundColor: 'background.neutral.subtle'
+      }
+    }
   },
   sky: {
-    root: { backgroundColor: 'sky.400' }
+    root: { 
+      backgroundColor: 'sky.400',
+      _nextTheme: {
+        backgroundColor: 'chart.cat01'
+      }
+    }
   },
   teal: {
-    root: { backgroundColor: 'teal.400' }
+    root: { 
+      backgroundColor: 'teal.400',
+      _nextTheme: {
+        backgroundColor: 'chart.cat02'
+      }
+    }
   },
   violet: {
-    root: { backgroundColor: 'violet.400' }
+    root: { 
+      backgroundColor: 'violet.400',
+      _nextTheme: {
+        backgroundColor: 'chart.cat03'
+      } 
+    }
   },
   amber: {
-    root: { backgroundColor: 'amber.400' }
+    root: { 
+      backgroundColor: 'amber.400',
+      _nextTheme: {
+        backgroundColor: 'chart.cat04'
+      }
+    }
   },
   rose: {
-    root: { backgroundColor: 'rose.400' }
+    root: { 
+      backgroundColor: 'rose.400',
+      _nextTheme: {
+        backgroundColor: 'chart.cat06'
+      }
+    }
   },
   stone: {
-    root: { backgroundColor: 'stone.400' }
+    root: { 
+      backgroundColor: 'stone.400',
+      _nextTheme: {
+        backgroundColor: 'chart.cat05'
+      }
+    }
   },
   lime: {
-    root: { backgroundColor: 'lime.400' }
+    root: { 
+      backgroundColor: 'lime.400',
+      _nextTheme: {
+        backgroundColor: 'chart.cat07'
+      }
+    }
   },
   pink: {
-    root: { backgroundColor: 'pink.400' }
+    root: { 
+      backgroundColor: 'pink.400',
+      _nextTheme: {
+        backgroundColor: 'chart.cat08'
+      }
+    }
   }
 }
 
@@ -52,6 +97,9 @@ const avatarSlotRecipe = defineSlotRecipe({
       cursor: 'var(--mp-avatar--cursor)',
       _hasBorder: {
         borderWidth: '0.125rem'
+      },
+      _nextTheme: {
+        color: 'text.inverse'
       }
     },
     fallback: {
@@ -126,7 +174,12 @@ const avatarSlotRecipe = defineSlotRecipe({
     {
       variantColor: 'gray',
       css: {
-        root: { color: 'gray.600' }
+        root: { 
+          color: 'gray.600',
+          _nextTheme: {
+            color: 'text.secondary'
+          }
+        }
       }
     }
   ],
@@ -156,7 +209,11 @@ const avatarGroupSlotRecipe = defineSlotRecipe({
       justifyContent: 'center',
       borderRadius: 'full',
       userSelect: 'none',
-      cursor: 'var(--mp-avatar-group--cursor)'
+      cursor: 'var(--mp-avatar-group--cursor)',
+      _nextTheme: {
+        color: 'text.inverse',
+        backgroundColor: 'background.brand.bold',
+      }
     }
   },
   variants: {