@mekari/pixel3-theme 0.7.2 → 1.0.0-next.0

package/dist/recipes/timeline.d.ts

@@ -1,9 +1,22 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const timelineSlotRecipe: _pandacss_dev.SlotRecipeConfig;
-declare const timelineDocumentSlotRecipe: _pandacss_dev.SlotRecipeConfig;
-declare const timelineLogSlotRecipe: _pandacss_dev.SlotRecipeConfig;
-declare const timelineSeparatorSlotRecipe: _pandacss_dev.SlotRecipeConfig;
-declare const timelineAccordionSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const timelineSlotRecipe: _pandacss_types.SlotRecipeConfig<"content" | "caption" | "body" | "root" | "item", _pandacss_types.SlotRecipeVariantRecord<"content" | "caption" | "body" | "root" | "item">>;
+declare const timelineDocumentSlotRecipe: _pandacss_types.SlotRecipeConfig<"content" | "root" | "description" | "title" | "fileSize", {
+    icon: {
+        true: {
+            content: {
+                marginLeft: "3";
+            };
+        };
+        false: {
+            content: {
+                marginLeft: "0";
+            };
+        };
+    };
+}>;
+declare const timelineLogSlotRecipe: _pandacss_types.SlotRecipeConfig<"content" | "root" | "log" | "logText" | "logIcon" | "logItem", _pandacss_types.SlotRecipeVariantRecord<"content" | "root" | "log" | "logText" | "logIcon" | "logItem">>;
+declare const timelineSeparatorSlotRecipe: _pandacss_types.SlotRecipeConfig<"root" | "topConnector" | "bottomConnector", _pandacss_types.SlotRecipeVariantRecord<"root" | "topConnector" | "bottomConnector">>;
+declare const timelineAccordionSlotRecipe: _pandacss_types.SlotRecipeConfig<"icon" | "separator" | "body" | "label" | "title" | "topConnector" | "bottomConnector", _pandacss_types.SlotRecipeVariantRecord<"icon" | "separator" | "body" | "label" | "title" | "topConnector" | "bottomConnector">>;
 
 export { timelineAccordionSlotRecipe, timelineDocumentSlotRecipe, timelineLogSlotRecipe, timelineSeparatorSlotRecipe, timelineSlotRecipe };

package/dist/recipes/toast.d.mts

@@ -1,5 +1,11 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const toastSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const toastSlotRecipe: _pandacss_types.SlotRecipeConfig<"icon" | "root" | "label", {
+    variant: {
+        success: {};
+        error: {};
+        greeting: {};
+    };
+}>;
 
 export { toastSlotRecipe };

package/dist/recipes/toast.d.ts

@@ -1,5 +1,11 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const toastSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const toastSlotRecipe: _pandacss_types.SlotRecipeConfig<"icon" | "root" | "label", {
+    variant: {
+        success: {};
+        error: {};
+        greeting: {};
+    };
+}>;
 
 export { toastSlotRecipe };

package/dist/recipes/toggle.d.mts

@@ -1,5 +1,5 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const toggleSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const toggleSlotRecipe: _pandacss_types.SlotRecipeConfig<"root" | "control" | "label", _pandacss_types.SlotRecipeVariantRecord<"root" | "control" | "label">>;
 
 export { toggleSlotRecipe };

package/dist/recipes/toggle.d.ts

@@ -1,5 +1,5 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const toggleSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const toggleSlotRecipe: _pandacss_types.SlotRecipeConfig<"root" | "control" | "label", _pandacss_types.SlotRecipeVariantRecord<"root" | "control" | "label">>;
 
 export { toggleSlotRecipe };

package/dist/recipes/tooltip.d.mts

@@ -1,5 +1,5 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const tooltipRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+declare const tooltipRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 
 export { tooltipRecipe };

package/dist/recipes/tooltip.d.ts

@@ -1,5 +1,5 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const tooltipRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+declare const tooltipRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 
 export { tooltipRecipe };

package/dist/recipes/tour.d.mts

@@ -1,5 +1,5 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const tourSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const tourSlotRecipe: _pandacss_types.SlotRecipeConfig<"overlay" | "root" | "panel", {}>;
 
 export { tourSlotRecipe };

package/dist/recipes/tour.d.ts

@@ -1,5 +1,5 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const tourSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const tourSlotRecipe: _pandacss_types.SlotRecipeConfig<"overlay" | "root" | "panel", {}>;
 
 export { tourSlotRecipe };

package/dist/recipes/upload.d.mts

@@ -1,6 +1,6 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const uploadSlotRecipe: _pandacss_dev.SlotRecipeConfig;
-declare const uploadListSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const uploadSlotRecipe: _pandacss_types.SlotRecipeConfig<"root" | "resetButton", _pandacss_types.SlotRecipeVariantRecord<"root" | "resetButton">>;
+declare const uploadListSlotRecipe: _pandacss_types.SlotRecipeConfig<"root" | "titleWrapper" | "actionWrapper", _pandacss_types.SlotRecipeVariantRecord<"root" | "titleWrapper" | "actionWrapper">>;
 
 export { uploadListSlotRecipe, uploadSlotRecipe };

package/dist/recipes/upload.d.ts

@@ -1,6 +1,6 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const uploadSlotRecipe: _pandacss_dev.SlotRecipeConfig;
-declare const uploadListSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const uploadSlotRecipe: _pandacss_types.SlotRecipeConfig<"root" | "resetButton", _pandacss_types.SlotRecipeVariantRecord<"root" | "resetButton">>;
+declare const uploadListSlotRecipe: _pandacss_types.SlotRecipeConfig<"root" | "titleWrapper" | "actionWrapper", _pandacss_types.SlotRecipeVariantRecord<"root" | "titleWrapper" | "actionWrapper">>;
 
 export { uploadListSlotRecipe, uploadSlotRecipe };

package/dist/text-styles.d.mts

@@ -1,5 +1,5 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const textStyles: _pandacss_dev.TextStyles;
+declare const textStyles: _pandacss_types.TextStyles;
 
 export { textStyles };

package/dist/text-styles.d.ts

@@ -1,5 +1,5 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const textStyles: _pandacss_dev.TextStyles;
+declare const textStyles: _pandacss_types.TextStyles;
 
 export { textStyles };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mekari/pixel3-theme",
   "description": "Theme for mekari pixel 3",
-  "version": "0.7.2",
+  "version": "1.0.0-next.0",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [
@@ -9,13 +9,14 @@
     "src"
   ],
   "dependencies": {
-    "@pandacss/dev": "1.12.0"
+    "@pandacss/dev": "2.1.2",
+    "@pandacss/preset-base": "2.1.2"
   },
   "peerDependencies": {
     "vue": "^3.4.9"
   },
   "devDependencies": {
-    "@pandacss/types": "1.12.0",
+    "@pandacss/types": "2.1.2",
     "vue": "^3.4.9"
   },
   "publishConfig": {

package/src/index.ts

@@ -1,4 +1,5 @@
 import { definePreset } from '@pandacss/dev'
+import presetBase from '@pandacss/preset-base'
 import type { Preset } from '@pandacss/types'
 import { breakpoints } from './breakpoints'
 import { conditions } from './conditions'
@@ -14,6 +15,9 @@ import { utilities } from './utilities'
 
 const preset: Preset = definePreset({
   name: '@mekari/pixel3-theme',
+  // Panda v2 no longer adds preset-base by default. Included here, as an object, so configs only list
+  // this preset and apps never need to resolve @pandacss/preset-base themselves.
+  presets: [presetBase],
   // Main Theme
   theme: {
     extend: {
@@ -34,9 +38,49 @@ const preset: Preset = definePreset({
   },
   conditions,
   utilities,
+  // Apps use the flex pattern as `MpFlex` (re-exported from @mekari/pixel3). Without these names Panda does
+  // not treat it as the pattern, so `justify` / `align` / `direction` get no CSS unless the value is used
+  // elsewhere.
+  patterns: {
+    extend: {
+      flex: { jsx: ['Flex', 'MpFlex', 'mp-flex'] }
+    }
+  },
   globalCss,
   staticCss: {
-    themes: ['next']
+    themes: ['next'],
+    // Values Pixel components only pass through render functions (`createVNode` in the built dist).
+    // Panda v2 does not read those, so apps that scan Pixel's dist would miss them unless they use the
+    // same values themselves.
+    recipes: {
+      textRecipe: [
+        { size: ['body', 'body-small', 'h1', 'h2', 'h3', 'label-small'], weight: ['semiBold'] }
+      ],
+      spinnerRecipe: [{ size: ['md'] }],
+      timePanelSlotRecipe: ['*']
+    },
+    css: [
+      {
+        properties: {
+          color: [
+            'blue.400',
+            'currentcolor',
+            'dark',
+            'gray.400',
+            'gray.600',
+            'icon.brand',
+            'icon.danger',
+            'icon.default',
+            'red.400',
+            'text.danger',
+            'text.disabled',
+            'text.link',
+            'text.secondary',
+            'white'
+          ]
+        }
+      }
+    ]
   },
   globalFontface,
   globalVars: {

package/src/recipes/airene-button.ts

@@ -5,15 +5,15 @@ const aireneButtonSlotRecipe = defineSlotRecipe({
   jsx: ['MpAireneButton', 'mp-airene-button'],
   slots: ['root', 'badge'],
   base: {
+    // Rendered as MpButton variant="unstyled": its variant keeps the background transparent and the font
+    // size inherited. The white fill comes from `_after`.
     root: {
       display: 'inline-flex!',
       justifyContent: 'center',
       alignItems: 'center',
       position: 'relative',
-      backgroundColor: 'white',
       color: 'blue.400!',
       borderRadius: '25px!',
-      fontSize: 'md',
       fontWeight: 'semiBold!',
       paddingLeft: '0.625rem!',
       paddingRight: '0.625rem!',
@@ -25,7 +25,6 @@ const aireneButtonSlotRecipe = defineSlotRecipe({
       gap: '0!',
       transition: 'color 0.3s ease, background-color 0.3s ease',
       _nextTheme: {
-        backgroundColor: 'background.neutral',
         color: 'text.link!'
       },
       _before: {

package/src/recipes/badge.ts

@@ -1,5 +1,5 @@
 import { defineRecipe } from '@pandacss/dev'
-import type { RecipeVariantRecord } from '@mekari/pixel3-styled-system/types'
+import type { RecipeVariantRecord } from '@pandacss/types'
 
 const badgeRecipe = defineRecipe<RecipeVariantRecord>({
   className: 'badge',

package/src/recipes/select.ts

@@ -103,16 +103,15 @@ const selectSlotRecipe = defineSlotRecipe({
         }
       }
     },
+    // Rendered as MpButton (ghost, sm): its variant sets the color and padding.
     clear: {
       position: 'absolute!',
-      color: 'gray.600',
       border: 'none',
       top: '9px',
       right: '40px',
       width: '5',
       height: '5',
       minWidth: '5',
-      padding: '0',
       transition: 'all 250ms!',
       visibility: 'hidden',
       opacity: '0',
@@ -121,12 +120,11 @@ const selectSlotRecipe = defineSlotRecipe({
         opacity: 'var(--mp-select--opacity)'
       }
     },
+    // Rendered as MpIcon size="sm": its variant sets the 20px size.
     arrow: {
       position: 'absolute!',
       display: 'inline-flex',
       alignItems: 'center',
-      width: '6',
-      height: '6',
       right: '2',
       whiteSpace: 'nowrap',
       pointerEvents: 'none'

package/src/recipes/tag.ts

@@ -87,19 +87,22 @@ const tagSlotRecipe = defineSlotRecipe({
       }
     }
   },
+  // The close slot is an MpButton (ghost), whose own recipe also sets background, color and radius.
+  // `!` keeps these winning in every button state and in both cascade layouts: Panda v1 emits compound
+  // variants as utilities (above recipes), Panda v2 puts slot recipes in a layer below other recipes' variants.
   compoundVariants: [
     {
       variant: 'gray',
       css: {
         close: {
-          background: 'linear-gradient(270deg, #EDF0F2 75%, rgba(237, 240, 242, 0) 111.54%)',
-          borderTopLeftRadius: '0',
-          borderBottomLeftRadius: '0',
-          color: 'gray.600',
+          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'
+            background: 'background.neutral.subtle!',
+            boxShadow: '-7px 0px 15px -3px #0000001A!',
+            color: 'icon.default!'
           }
         }
       }
@@ -108,14 +111,14 @@ const tagSlotRecipe = defineSlotRecipe({
       variant: 'red',
       css: {
         close: {
-          background: 'linear-gradient(270deg, #FDECEE 75%, rgba(237, 240, 242, 0) 111.54%)',
-          borderTopLeftRadius: '0',
-          borderBottomLeftRadius: '0',
-          color: 'red.400',
+          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'
+            background: 'background.danger!',
+            boxShadow: '-7px 0px 15px -3px #0000001A!',
+            color: 'icon.danger!'
           }
         }
       }

package/src/recipes/timeline.ts

@@ -178,7 +178,7 @@ const timelineSeparatorSlotRecipe = defineSlotRecipe({
         backgroundColor: 'transparent'
       },
       '&[data-accordion-child=true]': {
-        roundedBottom: '',
+        roundedBottom: '0'
       },
       _nextTheme: {
         backgroundColor: 'border.default',
@@ -203,7 +203,7 @@ const timelineSeparatorSlotRecipe = defineSlotRecipe({
         backgroundColor: 'transparent'
       },
       '&[data-accordion-child=true]': {
-        roundedTop: '',
+        roundedTop: '0'
       },
       _nextTheme: {
         backgroundColor: 'border.default',