@mekari/pixel3-theme 0.2.3-dev.0 → 0.3.0-dev.1

package/dist/index.js

@@ -25,7 +25,7 @@ __export(theme_exports, {
 module.exports = __toCommonJS(theme_exports);
 
 // src/index.ts
-var import_dev65 = require("@pandacss/dev");
+var import_dev66 = require("@pandacss/dev");
 
 // src/breakpoints.ts
 var breakpoints = {
@@ -110,6 +110,10 @@ var keyframes = (0, import_dev2.defineKeyframes)({
     "0%": { backgroundPosition: "0% 20%" },
     "50%": { backgroundPosition: "100% 50%" },
     "100%": { backgroundPosition: "0% 100%" }
+  },
+  shimmer: {
+    from: { backgroundPosition: "-100% 0" },
+    to: { backgroundPosition: "100% 0" }
   }
 });
 
@@ -5321,18 +5325,33 @@ var timelineLogSlotRecipe = (0, import_dev38.defineSlotRecipe)({
       color: "gray.400",
       _groupHover: {
         color: "blue.500"
+      },
+      _nextTheme: {
+        color: "text.secondary",
+        _groupHover: {
+          color: "text.highlight"
+        }
       }
     },
     logIcon: {
       color: "gray.400",
-      _groupHover: { color: "blue.500" }
+      _groupHover: { color: "blue.500" },
+      _nextTheme: {
+        color: "icon.default",
+        _groupHover: {
+          color: "icon.highlight"
+        }
+      }
     },
     content: {
-      listStyleType: "disc",
+      listStyleType: "none",
       paddingLeft: 5
     },
     logItem: {
-      color: "gray.600"
+      color: "gray.600",
+      _nextTheme: {
+        color: "text.secondary"
+      }
     }
   }
 });
@@ -5943,7 +5962,10 @@ var textlinkRecipe = (0, import_dev43.defineRecipe)({
       textDecoration: "underline"
     },
     _loading: {
-      background: "white"
+      background: "white",
+      _nextTheme: {
+        background: "background.neutral"
+      }
     }
   },
   variants: {
@@ -6034,6 +6056,64 @@ var textlinkRecipe = (0, import_dev43.defineRecipe)({
   }
 });
 
+// src/recipes/skeleton.ts
+var import_dev44 = require("@pandacss/dev");
+var skeletonRecipe = (0, import_dev44.defineRecipe)({
+  className: "skeleton",
+  jsx: ["MpSkeleton", "mp-skeleton"],
+  base: {
+    flexShrink: 0,
+    animation: "shimmer var(--mp-shimmer-duration) infinite reverse",
+    backgroundSize: "200%",
+    pointerEvents: "none",
+    userSelect: "none",
+    _loading: {
+      "& *": {
+        visibility: "hidden"
+      }
+    }
+  },
+  variants: {
+    color: {
+      gray: {
+        backgroundImage: "linear-gradient(90deg, #d0d6dd, #edf0f2 50%, #d0d6dd)",
+        _nextTheme: {
+          backgroundImage: "linear-gradient(90deg, {colors.icon.subtle}, {colors.icon.inverse} 50%, {colors.icon.subtle})"
+        }
+      },
+      blue: {
+        backgroundImage: "linear-gradient(90deg, #E0E9F7, #F5F9FF 50%, #E0E9F7)"
+      },
+      purple: {
+        backgroundImage: "linear-gradient(90deg, #DCCFFF, #F3F0FD 50%, #DCCFFF)",
+        _nextTheme: {
+          backgroundImage: "linear-gradient(90deg, {colors.background.highlight}, {colors.background.highlight.hovered} 50%, {colors.background.highlight})"
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      color: ["gray", "blue", "purple"],
+      css: {
+        "&:is([data-has-children=true])": {
+          "&:is([data-loading=false])": {
+            background: "unset",
+            pointerEvents: "auto",
+            userSelect: "auto",
+            "& *": {
+              visibility: "visible"
+            }
+          }
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "gray"
+  }
+});
+
 // src/recipes/index.ts
 var recipes = {
   buttonRecipe,
@@ -6062,7 +6142,8 @@ var recipes = {
   monthItemRecipe,
   yearItemRecipe,
   timeItemRecipe,
-  textlinkRecipe
+  textlinkRecipe,
+  skeletonRecipe
 };
 var slotRecipes = {
   accordionSlotRecipe,
@@ -6113,8 +6194,8 @@ var slotRecipes = {
 };
 
 // src/text-styles.ts
-var import_dev44 = require("@pandacss/dev");
-var textStyles = (0, import_dev44.defineTextStyles)({
+var import_dev45 = require("@pandacss/dev");
+var textStyles = (0, import_dev45.defineTextStyles)({
   overline: {
     value: {
       fontFamily: "var(--font-inter)",
@@ -6157,11 +6238,11 @@ var textStyles = (0, import_dev44.defineTextStyles)({
 });
 
 // src/tokens/index.ts
-var import_dev55 = require("@pandacss/dev");
+var import_dev56 = require("@pandacss/dev");
 
 // src/tokens/borders.ts
-var import_dev45 = require("@pandacss/dev");
-var borderWidths = import_dev45.defineTokens.borderWidths({
+var import_dev46 = require("@pandacss/dev");
+var borderWidths = import_dev46.defineTokens.borderWidths({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -6169,8 +6250,8 @@ var borderWidths = import_dev45.defineTokens.borderWidths({
 });
 
 // src/tokens/colors.ts
-var import_dev46 = require("@pandacss/dev");
-var colors = import_dev46.defineTokens.colors({
+var import_dev47 = require("@pandacss/dev");
+var colors = import_dev47.defineTokens.colors({
   debug: { value: "blue" },
   currentcolor: { value: "currentcolor" },
   dark: { value: "#232933" },
@@ -6312,16 +6393,16 @@ var colors = import_dev46.defineTokens.colors({
 });
 
 // src/tokens/durations.ts
-var import_dev47 = require("@pandacss/dev");
-var durations = import_dev47.defineTokens.durations({
+var import_dev48 = require("@pandacss/dev");
+var durations = import_dev48.defineTokens.durations({
   slow: { value: "100ms" },
   normal: { value: "250ms" },
   fast: { value: "300ms" }
 });
 
 // src/tokens/opacity.ts
-var import_dev48 = require("@pandacss/dev");
-var opacity = import_dev48.defineTokens.opacity({
+var import_dev49 = require("@pandacss/dev");
+var opacity = import_dev49.defineTokens.opacity({
   0: { value: 0 },
   40: { value: 0.4 },
   60: { value: 0.6 },
@@ -6329,8 +6410,8 @@ var opacity = import_dev48.defineTokens.opacity({
 });
 
 // src/tokens/radii.ts
-var import_dev49 = require("@pandacss/dev");
-var radii = import_dev49.defineTokens.radii({
+var import_dev50 = require("@pandacss/dev");
+var radii = import_dev50.defineTokens.radii({
   none: { value: "0" },
   xs: { value: "0.125rem", description: "2px" },
   sm: { value: "0.25rem", description: "4px" },
@@ -6341,8 +6422,8 @@ var radii = import_dev49.defineTokens.radii({
 });
 
 // src/tokens/shadows.ts
-var import_dev50 = require("@pandacss/dev");
-var shadows = import_dev50.defineTokens.shadows({
+var import_dev51 = require("@pandacss/dev");
+var shadows = import_dev51.defineTokens.shadows({
   xs: {
     value: ["0px 0px 2px 0px rgba(0, 0, 0, 0.12)", "0px 2px 4px 0px rgba(0, 0, 0, 0.14)"]
   },
@@ -6382,8 +6463,8 @@ var shadows = import_dev50.defineTokens.shadows({
 });
 
 // src/tokens/sizes.ts
-var import_dev51 = require("@pandacss/dev");
-var sizes = import_dev51.defineTokens.sizes({
+var import_dev52 = require("@pandacss/dev");
+var sizes = import_dev52.defineTokens.sizes({
   0: { value: "0" },
   0.25: { value: "0.0625rem" },
   0.5: { value: "0.125rem" },
@@ -6412,8 +6493,8 @@ var sizes = import_dev51.defineTokens.sizes({
 });
 
 // src/tokens/spacing.ts
-var import_dev52 = require("@pandacss/dev");
-var spacing = import_dev52.defineTokens.spacing({
+var import_dev53 = require("@pandacss/dev");
+var spacing = import_dev53.defineTokens.spacing({
   0: { value: "0" },
   0.5: { value: "0.125rem", description: "2px" },
   1: { value: "0.25rem", description: "4px" },
@@ -6434,8 +6515,8 @@ var spacing = import_dev52.defineTokens.spacing({
 });
 
 // src/tokens/z-index.ts
-var import_dev53 = require("@pandacss/dev");
-var zIndex = import_dev53.defineTokens.zIndex({
+var import_dev54 = require("@pandacss/dev");
+var zIndex = import_dev54.defineTokens.zIndex({
   hide: { value: -1 },
   base: { value: 0 },
   docked: { value: 10 },
@@ -6447,8 +6528,8 @@ var zIndex = import_dev53.defineTokens.zIndex({
 });
 
 // src/tokens/typography.ts
-var import_dev54 = require("@pandacss/dev");
-var fonts = import_dev54.defineTokens.fonts({
+var import_dev55 = require("@pandacss/dev");
+var fonts = import_dev55.defineTokens.fonts({
   body: {
     value: '"Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
   },
@@ -6456,7 +6537,7 @@ var fonts = import_dev54.defineTokens.fonts({
     value: 'SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace'
   }
 });
-var fontSizes = import_dev54.defineTokens.fontSizes({
+var fontSizes = import_dev55.defineTokens.fontSizes({
   xs: { value: "0.625rem" },
   sm: { value: "0.75rem" },
   md: { value: "0.875rem" },
@@ -6464,12 +6545,12 @@ var fontSizes = import_dev54.defineTokens.fontSizes({
   xl: { value: "1.25rem" },
   "2xl": { value: "1.5rem" }
 });
-var fontWeights = import_dev54.defineTokens.fontWeights({
+var fontWeights = import_dev55.defineTokens.fontWeights({
   regular: { value: "400" },
   semiBold: { value: "600" },
   bold: { value: "800" }
 });
-var lineHeights = import_dev54.defineTokens.lineHeights({
+var lineHeights = import_dev55.defineTokens.lineHeights({
   xs: { value: 1.2 },
   sm: { value: 1.34 },
   md: { value: 1.43 },
@@ -6478,7 +6559,7 @@ var lineHeights = import_dev54.defineTokens.lineHeights({
   "2xl": { value: 1.67 },
   "3xl": { value: 1.71 }
 });
-var letterSpacings = import_dev54.defineTokens.letterSpacings({
+var letterSpacings = import_dev55.defineTokens.letterSpacings({
   tighter: { value: "-0.05em" },
   tight: { value: "-0.025em" },
   normal: { value: "0" },
@@ -6488,7 +6569,7 @@ var letterSpacings = import_dev54.defineTokens.letterSpacings({
 });
 
 // src/tokens/index.ts
-var tokens = (0, import_dev55.defineTokens)({
+var tokens = (0, import_dev56.defineTokens)({
   borderWidths,
   colors,
   durations,
@@ -6506,11 +6587,11 @@ var tokens = (0, import_dev55.defineTokens)({
 });
 
 // src/tokens-next/index.ts
-var import_dev61 = require("@pandacss/dev");
+var import_dev62 = require("@pandacss/dev");
 
 // src/tokens-next/borders.ts
-var import_dev56 = require("@pandacss/dev");
-var borderWidths2 = import_dev56.defineTokens.borderWidths({
+var import_dev57 = require("@pandacss/dev");
+var borderWidths2 = import_dev57.defineTokens.borderWidths({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -6520,8 +6601,8 @@ var borderWidths2 = import_dev56.defineTokens.borderWidths({
 });
 
 // src/tokens-next/colors.ts
-var import_dev57 = require("@pandacss/dev");
-var colors2 = import_dev57.defineTokens.colors({
+var import_dev58 = require("@pandacss/dev");
+var colors2 = import_dev58.defineTokens.colors({
   debug: { value: "red" },
   currentcolor: { value: "currentcolor" },
   white: { value: "#FFFFFF" },
@@ -6693,8 +6774,8 @@ var colors2 = import_dev57.defineTokens.colors({
 });
 
 // src/tokens-next/radii.ts
-var import_dev58 = require("@pandacss/dev");
-var radii2 = import_dev58.defineTokens.radii({
+var import_dev59 = require("@pandacss/dev");
+var radii2 = import_dev59.defineTokens.radii({
   none: { value: "0" },
   sm: { value: "0.25rem", description: "4px" },
   md: { value: "0.375rem", description: "6px" },
@@ -6704,8 +6785,8 @@ var radii2 = import_dev58.defineTokens.radii({
 });
 
 // src/tokens-next/spacing.ts
-var import_dev59 = require("@pandacss/dev");
-var spacing2 = import_dev59.defineTokens.spacing({
+var import_dev60 = require("@pandacss/dev");
+var spacing2 = import_dev60.defineTokens.spacing({
   0: { value: "0" },
   0.5: { value: "0.125rem", description: "2px" },
   1: { value: "0.25rem", description: "4px" },
@@ -6721,8 +6802,8 @@ var spacing2 = import_dev59.defineTokens.spacing({
 });
 
 // src/tokens-next/shadows.ts
-var import_dev60 = require("@pandacss/dev");
-var shadows2 = import_dev60.defineTokens.shadows({
+var import_dev61 = require("@pandacss/dev");
+var shadows2 = import_dev61.defineTokens.shadows({
   xs: {
     value: [
       "0px 2px 4px 0px {colors.background.shadow}",
@@ -6762,7 +6843,7 @@ var shadows2 = import_dev60.defineTokens.shadows({
 });
 
 // src/tokens-next/index.ts
-var tokensNext = (0, import_dev61.defineTokens)({
+var tokensNext = (0, import_dev62.defineTokens)({
   borderWidths: borderWidths2,
   colors: colors2,
   durations,
@@ -6780,11 +6861,11 @@ var tokensNext = (0, import_dev61.defineTokens)({
 });
 
 // src/semanticTokens/index.ts
-var import_dev64 = require("@pandacss/dev");
+var import_dev65 = require("@pandacss/dev");
 
 // src/semanticTokens/colors.ts
-var import_dev62 = require("@pandacss/dev");
-var colors3 = import_dev62.defineSemanticTokens.colors({
+var import_dev63 = require("@pandacss/dev");
+var colors3 = import_dev63.defineSemanticTokens.colors({
   background: {
     surface: {
       value: {
@@ -7710,8 +7791,8 @@ var colors3 = import_dev62.defineSemanticTokens.colors({
 });
 
 // src/semanticTokens/spacing.ts
-var import_dev63 = require("@pandacss/dev");
-var spacing3 = import_dev63.defineSemanticTokens.spacing({
+var import_dev64 = require("@pandacss/dev");
+var spacing3 = import_dev64.defineSemanticTokens.spacing({
   "4xs": {
     value: {
       base: "0.125rem"
@@ -7770,7 +7851,7 @@ var spacing3 = import_dev63.defineSemanticTokens.spacing({
 });
 
 // src/semanticTokens/index.ts
-var semanticTokens = (0, import_dev64.defineSemanticTokens)({
+var semanticTokens = (0, import_dev65.defineSemanticTokens)({
   colors: colors3,
   spacing: spacing3
 });
@@ -7787,6 +7868,15 @@ var globalFontface = {
       fontWeight: "400"
       // fontDisplay: 'swap'
     },
+    {
+      src: [
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-Italic.woff2") format("woff2")',
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-Italic.ttf") format("truetype")'
+      ],
+      fontStyle: "italic",
+      fontWeight: "400"
+      // fontDisplay: 'swap'
+    },
     {
       src: [
         'url("https://cdn.mekari.design/fonts/Inter/Inter-SemiBold.woff2") format("woff2")',
@@ -7809,7 +7899,7 @@ var globalFontface = {
 };
 
 // src/index.ts
-var preset = (0, import_dev65.definePreset)({
+var preset = (0, import_dev66.definePreset)({
   name: "@mekari/pixel3-theme",
   // Main Theme
   theme: {

package/dist/index.mjs

@@ -84,6 +84,10 @@ var keyframes = defineKeyframes({
     "0%": { backgroundPosition: "0% 20%" },
     "50%": { backgroundPosition: "100% 50%" },
     "100%": { backgroundPosition: "0% 100%" }
+  },
+  shimmer: {
+    from: { backgroundPosition: "-100% 0" },
+    to: { backgroundPosition: "100% 0" }
   }
 });
 
@@ -5295,18 +5299,33 @@ var timelineLogSlotRecipe = defineSlotRecipe27({
       color: "gray.400",
       _groupHover: {
         color: "blue.500"
+      },
+      _nextTheme: {
+        color: "text.secondary",
+        _groupHover: {
+          color: "text.highlight"
+        }
       }
     },
     logIcon: {
       color: "gray.400",
-      _groupHover: { color: "blue.500" }
+      _groupHover: { color: "blue.500" },
+      _nextTheme: {
+        color: "icon.default",
+        _groupHover: {
+          color: "icon.highlight"
+        }
+      }
     },
     content: {
-      listStyleType: "disc",
+      listStyleType: "none",
       paddingLeft: 5
     },
     logItem: {
-      color: "gray.600"
+      color: "gray.600",
+      _nextTheme: {
+        color: "text.secondary"
+      }
     }
   }
 });
@@ -5917,7 +5936,10 @@ var textlinkRecipe = defineRecipe14({
       textDecoration: "underline"
     },
     _loading: {
-      background: "white"
+      background: "white",
+      _nextTheme: {
+        background: "background.neutral"
+      }
     }
   },
   variants: {
@@ -6008,6 +6030,64 @@ var textlinkRecipe = defineRecipe14({
   }
 });
 
+// src/recipes/skeleton.ts
+import { defineRecipe as defineRecipe15 } from "@pandacss/dev";
+var skeletonRecipe = defineRecipe15({
+  className: "skeleton",
+  jsx: ["MpSkeleton", "mp-skeleton"],
+  base: {
+    flexShrink: 0,
+    animation: "shimmer var(--mp-shimmer-duration) infinite reverse",
+    backgroundSize: "200%",
+    pointerEvents: "none",
+    userSelect: "none",
+    _loading: {
+      "& *": {
+        visibility: "hidden"
+      }
+    }
+  },
+  variants: {
+    color: {
+      gray: {
+        backgroundImage: "linear-gradient(90deg, #d0d6dd, #edf0f2 50%, #d0d6dd)",
+        _nextTheme: {
+          backgroundImage: "linear-gradient(90deg, {colors.icon.subtle}, {colors.icon.inverse} 50%, {colors.icon.subtle})"
+        }
+      },
+      blue: {
+        backgroundImage: "linear-gradient(90deg, #E0E9F7, #F5F9FF 50%, #E0E9F7)"
+      },
+      purple: {
+        backgroundImage: "linear-gradient(90deg, #DCCFFF, #F3F0FD 50%, #DCCFFF)",
+        _nextTheme: {
+          backgroundImage: "linear-gradient(90deg, {colors.background.highlight}, {colors.background.highlight.hovered} 50%, {colors.background.highlight})"
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      color: ["gray", "blue", "purple"],
+      css: {
+        "&:is([data-has-children=true])": {
+          "&:is([data-loading=false])": {
+            background: "unset",
+            pointerEvents: "auto",
+            userSelect: "auto",
+            "& *": {
+              visibility: "visible"
+            }
+          }
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "gray"
+  }
+});
+
 // src/recipes/index.ts
 var recipes = {
   buttonRecipe,
@@ -6036,7 +6116,8 @@ var recipes = {
   monthItemRecipe,
   yearItemRecipe,
   timeItemRecipe,
-  textlinkRecipe
+  textlinkRecipe,
+  skeletonRecipe
 };
 var slotRecipes = {
   accordionSlotRecipe,
@@ -7761,6 +7842,15 @@ var globalFontface = {
       fontWeight: "400"
       // fontDisplay: 'swap'
     },
+    {
+      src: [
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-Italic.woff2") format("woff2")',
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-Italic.ttf") format("truetype")'
+      ],
+      fontStyle: "italic",
+      fontWeight: "400"
+      // fontDisplay: 'swap'
+    },
     {
       src: [
         'url("https://cdn.mekari.design/fonts/Inter/Inter-SemiBold.woff2") format("woff2")',

package/dist/recipes/index.d.mts

@@ -28,6 +28,7 @@ declare const recipes: {
     yearItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     timeItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     textlinkRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    skeletonRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 };
 declare const slotRecipes: {
     accordionSlotRecipe: _pandacss_types.SlotRecipeConfig;

package/dist/recipes/index.d.ts

@@ -28,6 +28,7 @@ declare const recipes: {
     yearItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     timeItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     textlinkRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    skeletonRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 };
 declare const slotRecipes: {
     accordionSlotRecipe: _pandacss_types.SlotRecipeConfig;

package/dist/recipes/skeleton.d.mts

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

package/dist/recipes/skeleton.d.ts

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

package/package.json

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

package/src/fonts.ts

@@ -9,6 +9,15 @@ export const globalFontface = {
       fontWeight: '400'
       // fontDisplay: 'swap'
     },
+    {
+      src: [
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-Italic.woff2") format("woff2")',
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-Italic.ttf") format("truetype")'
+      ],
+      fontStyle: 'italic',
+      fontWeight: '400'
+      // fontDisplay: 'swap'
+    },
     {
       src: [
         'url("https://cdn.mekari.design/fonts/Inter/Inter-SemiBold.woff2") format("woff2")',

package/src/keyframes.ts

@@ -16,5 +16,9 @@ export const keyframes = defineKeyframes({
     '0%': { backgroundPosition: '0% 20%' },
     '50%': { backgroundPosition: '100% 50%' },
     '100%': { backgroundPosition: '0% 100%' }
+  },
+  shimmer: {
+    from: { backgroundPosition: '-100% 0' },
+    to: { backgroundPosition: '100% 0' } 
   }
 })

package/src/recipes/index.ts

@@ -65,6 +65,7 @@ import { colorPickerSlotRecipe } from './color-picker'
 import { sliderSlotRecipe } from './slider'
 import { tourSlotRecipe } from './tour'
 import { textlinkRecipe } from './textlink'
+import { skeletonRecipe } from './skeleton'
 
 export const recipes = {
   buttonRecipe,
@@ -93,7 +94,8 @@ export const recipes = {
   monthItemRecipe,
   yearItemRecipe,
   timeItemRecipe,
-  textlinkRecipe
+  textlinkRecipe,
+  skeletonRecipe
 }
 
 export const slotRecipes = {

package/src/recipes/skeleton.ts

@@ -0,0 +1,62 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const skeletonRecipe = defineRecipe({
+  className: 'skeleton',
+  jsx: ['MpSkeleton', 'mp-skeleton'],
+  base: {
+    flexShrink: 0,
+    animation: 'shimmer var(--mp-shimmer-duration) infinite reverse',
+    backgroundSize: '200%',
+    pointerEvents: 'none',
+    userSelect: 'none',
+
+    _loading: {
+      '& *': {
+        visibility: 'hidden'
+      }
+    }
+  },
+  variants: {
+    color: {
+      gray: {
+        backgroundImage: 'linear-gradient(90deg, #d0d6dd, #edf0f2 50%, #d0d6dd)',
+        _nextTheme: {
+          backgroundImage:
+            'linear-gradient(90deg, {colors.icon.subtle}, {colors.icon.inverse} 50%, {colors.icon.subtle})'
+        }
+      },
+      blue: {
+        backgroundImage: 'linear-gradient(90deg, #E0E9F7, #F5F9FF 50%, #E0E9F7)'
+      },
+      purple: {
+        backgroundImage: 'linear-gradient(90deg, #DCCFFF, #F3F0FD 50%, #DCCFFF)',
+        _nextTheme: {
+          backgroundImage:
+            'linear-gradient(90deg, {colors.background.highlight}, {colors.background.highlight.hovered} 50%, {colors.background.highlight})'
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      color: ['gray', 'blue', 'purple'],
+      css: {
+        '&:is([data-has-children=true])': {
+          '&:is([data-loading=false])': {
+            background: 'unset',
+            pointerEvents: 'auto',
+            userSelect: 'auto',
+            '& *': {
+              visibility: 'visible'
+            }
+          }
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    color: 'gray'
+  }
+})
+
+export { skeletonRecipe }

package/src/recipes/textlink.ts

@@ -14,7 +14,10 @@ const textlinkRecipe = defineRecipe({
       textDecoration: 'underline'
     },
     _loading: {
-      background: 'white'
+      background: 'white',
+      _nextTheme: {
+        background: 'background.neutral'
+      }
     }
   },
   variants: {
@@ -101,7 +104,7 @@ const textlinkRecipe = defineRecipe({
     }
   ],
   defaultVariants: {
-    variant: 'primary',
+    variant: 'primary'
   }
 })
 

package/src/recipes/timeline.ts

@@ -121,18 +121,33 @@ const timelineLogSlotRecipe = defineSlotRecipe({
       color: 'gray.400',
       _groupHover: {
         color: 'blue.500'
+      },
+      _nextTheme: {
+        color: 'text.secondary',
+        _groupHover: {
+          color: 'text.highlight'
+        }
       }
     },
     logIcon: {
       color: 'gray.400',
-      _groupHover: { color: 'blue.500' }
+      _groupHover: { color: 'blue.500' },
+      _nextTheme: {
+        color: 'icon.default',
+        _groupHover: {
+          color: 'icon.highlight'
+        }
+      }
     },
     content: {
-      listStyleType: 'disc',
+      listStyleType: 'none',
       paddingLeft: 5
     },
     logItem: {
-      color: 'gray.600'
+      color: 'gray.600',
+      _nextTheme: {
+        color: 'text.secondary'
+      }
     }
   }
 })