@mekari/pixel3-theme 0.3.0-dev.1 → 0.3.0-dev.2

package/dist/index.js

@@ -25,7 +25,7 @@ __export(theme_exports, {
 module.exports = __toCommonJS(theme_exports);
 
 // src/index.ts
-var import_dev66 = require("@pandacss/dev");
+var import_dev67 = require("@pandacss/dev");
 
 // src/breakpoints.ts
 var breakpoints = {
@@ -6114,6 +6114,27 @@ var skeletonRecipe = (0, import_dev44.defineRecipe)({
   }
 });
 
+// src/recipes/scrollbar.ts
+var import_dev45 = require("@pandacss/dev");
+var scrollbarRecipe = (0, import_dev45.defineRecipe)({
+  className: "skeleton",
+  jsx: ["MpScrollbar", "mp-scrollbar"],
+  base: {
+    "& .os-scrollbar": {
+      "--os-handle-bg": "colors.gray.100!",
+      "--os-handle-bg-hover": "colors.gray.400!",
+      "--os-handle-bg-active": "colors.gray.400!"
+    },
+    _nextTheme: {
+      "& .os-scrollbar": {
+        "--os-handle-bg": "colors.icon.subtle!",
+        "--os-handle-bg-hover": "colors.icon.default!",
+        "--os-handle-bg-active": "colors.icon.default!"
+      }
+    }
+  }
+});
+
 // src/recipes/index.ts
 var recipes = {
   buttonRecipe,
@@ -6143,7 +6164,8 @@ var recipes = {
   yearItemRecipe,
   timeItemRecipe,
   textlinkRecipe,
-  skeletonRecipe
+  skeletonRecipe,
+  scrollbarRecipe
 };
 var slotRecipes = {
   accordionSlotRecipe,
@@ -6194,8 +6216,8 @@ var slotRecipes = {
 };
 
 // src/text-styles.ts
-var import_dev45 = require("@pandacss/dev");
-var textStyles = (0, import_dev45.defineTextStyles)({
+var import_dev46 = require("@pandacss/dev");
+var textStyles = (0, import_dev46.defineTextStyles)({
   overline: {
     value: {
       fontFamily: "var(--font-inter)",
@@ -6238,11 +6260,11 @@ var textStyles = (0, import_dev45.defineTextStyles)({
 });
 
 // src/tokens/index.ts
-var import_dev56 = require("@pandacss/dev");
+var import_dev57 = require("@pandacss/dev");
 
 // src/tokens/borders.ts
-var import_dev46 = require("@pandacss/dev");
-var borderWidths = import_dev46.defineTokens.borderWidths({
+var import_dev47 = require("@pandacss/dev");
+var borderWidths = import_dev47.defineTokens.borderWidths({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -6250,8 +6272,8 @@ var borderWidths = import_dev46.defineTokens.borderWidths({
 });
 
 // src/tokens/colors.ts
-var import_dev47 = require("@pandacss/dev");
-var colors = import_dev47.defineTokens.colors({
+var import_dev48 = require("@pandacss/dev");
+var colors = import_dev48.defineTokens.colors({
   debug: { value: "blue" },
   currentcolor: { value: "currentcolor" },
   dark: { value: "#232933" },
@@ -6393,16 +6415,16 @@ var colors = import_dev47.defineTokens.colors({
 });
 
 // src/tokens/durations.ts
-var import_dev48 = require("@pandacss/dev");
-var durations = import_dev48.defineTokens.durations({
+var import_dev49 = require("@pandacss/dev");
+var durations = import_dev49.defineTokens.durations({
   slow: { value: "100ms" },
   normal: { value: "250ms" },
   fast: { value: "300ms" }
 });
 
 // src/tokens/opacity.ts
-var import_dev49 = require("@pandacss/dev");
-var opacity = import_dev49.defineTokens.opacity({
+var import_dev50 = require("@pandacss/dev");
+var opacity = import_dev50.defineTokens.opacity({
   0: { value: 0 },
   40: { value: 0.4 },
   60: { value: 0.6 },
@@ -6410,8 +6432,8 @@ var opacity = import_dev49.defineTokens.opacity({
 });
 
 // src/tokens/radii.ts
-var import_dev50 = require("@pandacss/dev");
-var radii = import_dev50.defineTokens.radii({
+var import_dev51 = require("@pandacss/dev");
+var radii = import_dev51.defineTokens.radii({
   none: { value: "0" },
   xs: { value: "0.125rem", description: "2px" },
   sm: { value: "0.25rem", description: "4px" },
@@ -6422,8 +6444,8 @@ var radii = import_dev50.defineTokens.radii({
 });
 
 // src/tokens/shadows.ts
-var import_dev51 = require("@pandacss/dev");
-var shadows = import_dev51.defineTokens.shadows({
+var import_dev52 = require("@pandacss/dev");
+var shadows = import_dev52.defineTokens.shadows({
   xs: {
     value: ["0px 0px 2px 0px rgba(0, 0, 0, 0.12)", "0px 2px 4px 0px rgba(0, 0, 0, 0.14)"]
   },
@@ -6463,8 +6485,8 @@ var shadows = import_dev51.defineTokens.shadows({
 });
 
 // src/tokens/sizes.ts
-var import_dev52 = require("@pandacss/dev");
-var sizes = import_dev52.defineTokens.sizes({
+var import_dev53 = require("@pandacss/dev");
+var sizes = import_dev53.defineTokens.sizes({
   0: { value: "0" },
   0.25: { value: "0.0625rem" },
   0.5: { value: "0.125rem" },
@@ -6493,8 +6515,8 @@ var sizes = import_dev52.defineTokens.sizes({
 });
 
 // src/tokens/spacing.ts
-var import_dev53 = require("@pandacss/dev");
-var spacing = import_dev53.defineTokens.spacing({
+var import_dev54 = require("@pandacss/dev");
+var spacing = import_dev54.defineTokens.spacing({
   0: { value: "0" },
   0.5: { value: "0.125rem", description: "2px" },
   1: { value: "0.25rem", description: "4px" },
@@ -6515,8 +6537,8 @@ var spacing = import_dev53.defineTokens.spacing({
 });
 
 // src/tokens/z-index.ts
-var import_dev54 = require("@pandacss/dev");
-var zIndex = import_dev54.defineTokens.zIndex({
+var import_dev55 = require("@pandacss/dev");
+var zIndex = import_dev55.defineTokens.zIndex({
   hide: { value: -1 },
   base: { value: 0 },
   docked: { value: 10 },
@@ -6528,8 +6550,8 @@ var zIndex = import_dev54.defineTokens.zIndex({
 });
 
 // src/tokens/typography.ts
-var import_dev55 = require("@pandacss/dev");
-var fonts = import_dev55.defineTokens.fonts({
+var import_dev56 = require("@pandacss/dev");
+var fonts = import_dev56.defineTokens.fonts({
   body: {
     value: '"Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
   },
@@ -6537,7 +6559,7 @@ var fonts = import_dev55.defineTokens.fonts({
     value: 'SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace'
   }
 });
-var fontSizes = import_dev55.defineTokens.fontSizes({
+var fontSizes = import_dev56.defineTokens.fontSizes({
   xs: { value: "0.625rem" },
   sm: { value: "0.75rem" },
   md: { value: "0.875rem" },
@@ -6545,12 +6567,12 @@ var fontSizes = import_dev55.defineTokens.fontSizes({
   xl: { value: "1.25rem" },
   "2xl": { value: "1.5rem" }
 });
-var fontWeights = import_dev55.defineTokens.fontWeights({
+var fontWeights = import_dev56.defineTokens.fontWeights({
   regular: { value: "400" },
   semiBold: { value: "600" },
   bold: { value: "800" }
 });
-var lineHeights = import_dev55.defineTokens.lineHeights({
+var lineHeights = import_dev56.defineTokens.lineHeights({
   xs: { value: 1.2 },
   sm: { value: 1.34 },
   md: { value: 1.43 },
@@ -6559,7 +6581,7 @@ var lineHeights = import_dev55.defineTokens.lineHeights({
   "2xl": { value: 1.67 },
   "3xl": { value: 1.71 }
 });
-var letterSpacings = import_dev55.defineTokens.letterSpacings({
+var letterSpacings = import_dev56.defineTokens.letterSpacings({
   tighter: { value: "-0.05em" },
   tight: { value: "-0.025em" },
   normal: { value: "0" },
@@ -6569,7 +6591,7 @@ var letterSpacings = import_dev55.defineTokens.letterSpacings({
 });
 
 // src/tokens/index.ts
-var tokens = (0, import_dev56.defineTokens)({
+var tokens = (0, import_dev57.defineTokens)({
   borderWidths,
   colors,
   durations,
@@ -6587,11 +6609,11 @@ var tokens = (0, import_dev56.defineTokens)({
 });
 
 // src/tokens-next/index.ts
-var import_dev62 = require("@pandacss/dev");
+var import_dev63 = require("@pandacss/dev");
 
 // src/tokens-next/borders.ts
-var import_dev57 = require("@pandacss/dev");
-var borderWidths2 = import_dev57.defineTokens.borderWidths({
+var import_dev58 = require("@pandacss/dev");
+var borderWidths2 = import_dev58.defineTokens.borderWidths({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -6601,8 +6623,8 @@ var borderWidths2 = import_dev57.defineTokens.borderWidths({
 });
 
 // src/tokens-next/colors.ts
-var import_dev58 = require("@pandacss/dev");
-var colors2 = import_dev58.defineTokens.colors({
+var import_dev59 = require("@pandacss/dev");
+var colors2 = import_dev59.defineTokens.colors({
   debug: { value: "red" },
   currentcolor: { value: "currentcolor" },
   white: { value: "#FFFFFF" },
@@ -6774,8 +6796,8 @@ var colors2 = import_dev58.defineTokens.colors({
 });
 
 // src/tokens-next/radii.ts
-var import_dev59 = require("@pandacss/dev");
-var radii2 = import_dev59.defineTokens.radii({
+var import_dev60 = require("@pandacss/dev");
+var radii2 = import_dev60.defineTokens.radii({
   none: { value: "0" },
   sm: { value: "0.25rem", description: "4px" },
   md: { value: "0.375rem", description: "6px" },
@@ -6785,8 +6807,8 @@ var radii2 = import_dev59.defineTokens.radii({
 });
 
 // src/tokens-next/spacing.ts
-var import_dev60 = require("@pandacss/dev");
-var spacing2 = import_dev60.defineTokens.spacing({
+var import_dev61 = require("@pandacss/dev");
+var spacing2 = import_dev61.defineTokens.spacing({
   0: { value: "0" },
   0.5: { value: "0.125rem", description: "2px" },
   1: { value: "0.25rem", description: "4px" },
@@ -6802,8 +6824,8 @@ var spacing2 = import_dev60.defineTokens.spacing({
 });
 
 // src/tokens-next/shadows.ts
-var import_dev61 = require("@pandacss/dev");
-var shadows2 = import_dev61.defineTokens.shadows({
+var import_dev62 = require("@pandacss/dev");
+var shadows2 = import_dev62.defineTokens.shadows({
   xs: {
     value: [
       "0px 2px 4px 0px {colors.background.shadow}",
@@ -6843,7 +6865,7 @@ var shadows2 = import_dev61.defineTokens.shadows({
 });
 
 // src/tokens-next/index.ts
-var tokensNext = (0, import_dev62.defineTokens)({
+var tokensNext = (0, import_dev63.defineTokens)({
   borderWidths: borderWidths2,
   colors: colors2,
   durations,
@@ -6861,11 +6883,11 @@ var tokensNext = (0, import_dev62.defineTokens)({
 });
 
 // src/semanticTokens/index.ts
-var import_dev65 = require("@pandacss/dev");
+var import_dev66 = require("@pandacss/dev");
 
 // src/semanticTokens/colors.ts
-var import_dev63 = require("@pandacss/dev");
-var colors3 = import_dev63.defineSemanticTokens.colors({
+var import_dev64 = require("@pandacss/dev");
+var colors3 = import_dev64.defineSemanticTokens.colors({
   background: {
     surface: {
       value: {
@@ -7791,8 +7813,8 @@ var colors3 = import_dev63.defineSemanticTokens.colors({
 });
 
 // src/semanticTokens/spacing.ts
-var import_dev64 = require("@pandacss/dev");
-var spacing3 = import_dev64.defineSemanticTokens.spacing({
+var import_dev65 = require("@pandacss/dev");
+var spacing3 = import_dev65.defineSemanticTokens.spacing({
   "4xs": {
     value: {
       base: "0.125rem"
@@ -7851,7 +7873,7 @@ var spacing3 = import_dev64.defineSemanticTokens.spacing({
 });
 
 // src/semanticTokens/index.ts
-var semanticTokens = (0, import_dev65.defineSemanticTokens)({
+var semanticTokens = (0, import_dev66.defineSemanticTokens)({
   colors: colors3,
   spacing: spacing3
 });
@@ -7899,7 +7921,7 @@ var globalFontface = {
 };
 
 // src/index.ts
-var preset = (0, import_dev66.definePreset)({
+var preset = (0, import_dev67.definePreset)({
   name: "@mekari/pixel3-theme",
   // Main Theme
   theme: {

package/dist/index.mjs

@@ -6088,6 +6088,27 @@ var skeletonRecipe = defineRecipe15({
   }
 });
 
+// src/recipes/scrollbar.ts
+import { defineRecipe as defineRecipe16 } from "@pandacss/dev";
+var scrollbarRecipe = defineRecipe16({
+  className: "skeleton",
+  jsx: ["MpScrollbar", "mp-scrollbar"],
+  base: {
+    "& .os-scrollbar": {
+      "--os-handle-bg": "colors.gray.100!",
+      "--os-handle-bg-hover": "colors.gray.400!",
+      "--os-handle-bg-active": "colors.gray.400!"
+    },
+    _nextTheme: {
+      "& .os-scrollbar": {
+        "--os-handle-bg": "colors.icon.subtle!",
+        "--os-handle-bg-hover": "colors.icon.default!",
+        "--os-handle-bg-active": "colors.icon.default!"
+      }
+    }
+  }
+});
+
 // src/recipes/index.ts
 var recipes = {
   buttonRecipe,
@@ -6117,7 +6138,8 @@ var recipes = {
   yearItemRecipe,
   timeItemRecipe,
   textlinkRecipe,
-  skeletonRecipe
+  skeletonRecipe,
+  scrollbarRecipe
 };
 var slotRecipes = {
   accordionSlotRecipe,

package/dist/recipes/index.d.mts

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

package/dist/recipes/index.d.ts

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

package/dist/recipes/scrollbar.d.mts

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

package/dist/recipes/scrollbar.d.ts

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

package/package.json

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

package/src/recipes/index.ts

@@ -66,6 +66,7 @@ import { sliderSlotRecipe } from './slider'
 import { tourSlotRecipe } from './tour'
 import { textlinkRecipe } from './textlink'
 import { skeletonRecipe } from './skeleton'
+import { scrollbarRecipe } from './scrollbar'
 
 export const recipes = {
   buttonRecipe,
@@ -95,7 +96,8 @@ export const recipes = {
   yearItemRecipe,
   timeItemRecipe,
   textlinkRecipe,
-  skeletonRecipe
+  skeletonRecipe,
+  scrollbarRecipe
 }
 
 export const slotRecipes = {

package/src/recipes/scrollbar.ts

@@ -0,0 +1,22 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const scrollbarRecipe = defineRecipe({
+  className: 'skeleton',
+  jsx: ['MpScrollbar', 'mp-scrollbar'],
+  base: {
+    '& .os-scrollbar': {
+      '--os-handle-bg': 'colors.gray.100!',
+      '--os-handle-bg-hover': 'colors.gray.400!',
+      '--os-handle-bg-active': 'colors.gray.400!'
+    },
+    _nextTheme: {
+      '& .os-scrollbar': {
+        '--os-handle-bg': 'colors.icon.subtle!',
+        '--os-handle-bg-hover': 'colors.icon.default!',
+        '--os-handle-bg-active': 'colors.icon.default!'
+      }
+    }
+  }
+})
+
+export { scrollbarRecipe }