@mekari/pixel3-theme 0.3.0 → 0.3.1-dev.0

package/dist/index.js

@@ -25,7 +25,7 @@ __export(theme_exports, {
 module.exports = __toCommonJS(theme_exports);
 
 // src/index.ts
-var import_dev69 = require("@pandacss/dev");
+var import_dev70 = require("@pandacss/dev");
 
 // src/breakpoints.ts
 var breakpoints = {
@@ -6364,6 +6364,75 @@ var aireneBubbleSlotRecipe = (0, import_dev47.defineSlotRecipe)({
   defaultVariants: {}
 });
 
+// src/recipes/rating.ts
+var import_dev48 = require("@pandacss/dev");
+var ratingSlotRecipe = (0, import_dev48.defineSlotRecipe)({
+  className: "rating",
+  jsx: ["MpRating", "mp-rating"],
+  slots: ["root", "wrapper", "value", "backgroundIconWrapper", "activeIconWrapper"],
+  base: {
+    root: {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "4",
+      py: "1"
+    },
+    wrapper: {
+      position: "relative",
+      width: "fit-content"
+    },
+    value: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      mt: "2px"
+    },
+    backgroundIconWrapper: {
+      display: "flex",
+      gap: "2",
+      "& svg": {
+        display: "flex",
+        width: "6",
+        height: "6",
+        color: "gray.100 !important",
+        _nextTheme: {
+          color: "icon.disabled !important"
+        }
+      }
+    },
+    activeIconWrapper: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      display: "flex",
+      gap: "2",
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      "& svg": {
+        flex: "none",
+        width: "6",
+        height: "6",
+        '&[data-variant="star"]': {
+          color: "amber.400",
+          _nextTheme: {
+            color: "chart.cat04.bold"
+          }
+        },
+        '&[data-variant="heart"]': {
+          color: "rose.400",
+          _nextTheme: {
+            color: "chart.cat06.bold"
+          }
+        }
+      }
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+});
+
 // src/recipes/index.ts
 var recipes = {
   buttonRecipe,
@@ -6443,12 +6512,13 @@ var slotRecipes = {
   tourSlotRecipe,
   aireneButtonSlotRecipe,
   aireneInputSlotRecipe,
-  aireneBubbleSlotRecipe
+  aireneBubbleSlotRecipe,
+  ratingSlotRecipe
 };
 
 // src/text-styles.ts
-var import_dev48 = require("@pandacss/dev");
-var textStyles = (0, import_dev48.defineTextStyles)({
+var import_dev49 = require("@pandacss/dev");
+var textStyles = (0, import_dev49.defineTextStyles)({
   overline: {
     value: {
       fontFamily: "var(--font-inter)",
@@ -6491,11 +6561,11 @@ var textStyles = (0, import_dev48.defineTextStyles)({
 });
 
 // src/tokens/index.ts
-var import_dev59 = require("@pandacss/dev");
+var import_dev60 = require("@pandacss/dev");
 
 // src/tokens/borders.ts
-var import_dev49 = require("@pandacss/dev");
-var borderWidths = import_dev49.defineTokens.borderWidths({
+var import_dev50 = require("@pandacss/dev");
+var borderWidths = import_dev50.defineTokens.borderWidths({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -6503,8 +6573,8 @@ var borderWidths = import_dev49.defineTokens.borderWidths({
 });
 
 // src/tokens/colors.ts
-var import_dev50 = require("@pandacss/dev");
-var colors = import_dev50.defineTokens.colors({
+var import_dev51 = require("@pandacss/dev");
+var colors = import_dev51.defineTokens.colors({
   debug: { value: "blue" },
   currentcolor: { value: "currentcolor" },
   dark: { value: "#232933" },
@@ -6647,16 +6717,16 @@ var colors = import_dev50.defineTokens.colors({
 });
 
 // src/tokens/durations.ts
-var import_dev51 = require("@pandacss/dev");
-var durations = import_dev51.defineTokens.durations({
+var import_dev52 = require("@pandacss/dev");
+var durations = import_dev52.defineTokens.durations({
   slow: { value: "100ms" },
   normal: { value: "250ms" },
   fast: { value: "300ms" }
 });
 
 // src/tokens/opacity.ts
-var import_dev52 = require("@pandacss/dev");
-var opacity = import_dev52.defineTokens.opacity({
+var import_dev53 = require("@pandacss/dev");
+var opacity = import_dev53.defineTokens.opacity({
   0: { value: 0 },
   40: { value: 0.4 },
   60: { value: 0.6 },
@@ -6664,8 +6734,8 @@ var opacity = import_dev52.defineTokens.opacity({
 });
 
 // src/tokens/radii.ts
-var import_dev53 = require("@pandacss/dev");
-var radii = import_dev53.defineTokens.radii({
+var import_dev54 = require("@pandacss/dev");
+var radii = import_dev54.defineTokens.radii({
   none: { value: "0" },
   xs: { value: "0.125rem", description: "2px" },
   sm: { value: "0.25rem", description: "4px" },
@@ -6676,8 +6746,8 @@ var radii = import_dev53.defineTokens.radii({
 });
 
 // src/tokens/shadows.ts
-var import_dev54 = require("@pandacss/dev");
-var shadows = import_dev54.defineTokens.shadows({
+var import_dev55 = require("@pandacss/dev");
+var shadows = import_dev55.defineTokens.shadows({
   xs: {
     value: ["0px 0px 2px 0px rgba(0, 0, 0, 0.12)", "0px 2px 4px 0px rgba(0, 0, 0, 0.14)"]
   },
@@ -6717,8 +6787,8 @@ var shadows = import_dev54.defineTokens.shadows({
 });
 
 // src/tokens/sizes.ts
-var import_dev55 = require("@pandacss/dev");
-var sizes = import_dev55.defineTokens.sizes({
+var import_dev56 = require("@pandacss/dev");
+var sizes = import_dev56.defineTokens.sizes({
   0: { value: "0" },
   0.25: { value: "0.0625rem" },
   0.5: { value: "0.125rem" },
@@ -6747,8 +6817,8 @@ var sizes = import_dev55.defineTokens.sizes({
 });
 
 // src/tokens/spacing.ts
-var import_dev56 = require("@pandacss/dev");
-var spacing = import_dev56.defineTokens.spacing({
+var import_dev57 = require("@pandacss/dev");
+var spacing = import_dev57.defineTokens.spacing({
   0: { value: "0" },
   0.5: { value: "0.125rem", description: "2px" },
   1: { value: "0.25rem", description: "4px" },
@@ -6769,8 +6839,8 @@ var spacing = import_dev56.defineTokens.spacing({
 });
 
 // src/tokens/z-index.ts
-var import_dev57 = require("@pandacss/dev");
-var zIndex = import_dev57.defineTokens.zIndex({
+var import_dev58 = require("@pandacss/dev");
+var zIndex = import_dev58.defineTokens.zIndex({
   hide: { value: -1 },
   base: { value: 0 },
   docked: { value: 10 },
@@ -6782,8 +6852,8 @@ var zIndex = import_dev57.defineTokens.zIndex({
 });
 
 // src/tokens/typography.ts
-var import_dev58 = require("@pandacss/dev");
-var fonts = import_dev58.defineTokens.fonts({
+var import_dev59 = require("@pandacss/dev");
+var fonts = import_dev59.defineTokens.fonts({
   body: {
     value: '"Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
   },
@@ -6791,7 +6861,7 @@ var fonts = import_dev58.defineTokens.fonts({
     value: 'SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace'
   }
 });
-var fontSizes = import_dev58.defineTokens.fontSizes({
+var fontSizes = import_dev59.defineTokens.fontSizes({
   xs: { value: "0.625rem" },
   sm: { value: "0.75rem" },
   md: { value: "0.875rem" },
@@ -6799,12 +6869,12 @@ var fontSizes = import_dev58.defineTokens.fontSizes({
   xl: { value: "1.25rem" },
   "2xl": { value: "1.5rem" }
 });
-var fontWeights = import_dev58.defineTokens.fontWeights({
+var fontWeights = import_dev59.defineTokens.fontWeights({
   regular: { value: "400" },
   semiBold: { value: "600" },
   bold: { value: "800" }
 });
-var lineHeights = import_dev58.defineTokens.lineHeights({
+var lineHeights = import_dev59.defineTokens.lineHeights({
   xs: { value: 1.2 },
   sm: { value: 1.34 },
   md: { value: 1.43 },
@@ -6813,7 +6883,7 @@ var lineHeights = import_dev58.defineTokens.lineHeights({
   "2xl": { value: 1.67 },
   "3xl": { value: 1.71 }
 });
-var letterSpacings = import_dev58.defineTokens.letterSpacings({
+var letterSpacings = import_dev59.defineTokens.letterSpacings({
   tighter: { value: "-0.05em" },
   tight: { value: "-0.025em" },
   normal: { value: "0" },
@@ -6823,7 +6893,7 @@ var letterSpacings = import_dev58.defineTokens.letterSpacings({
 });
 
 // src/tokens/index.ts
-var tokens = (0, import_dev59.defineTokens)({
+var tokens = (0, import_dev60.defineTokens)({
   borderWidths,
   colors,
   durations,
@@ -6841,11 +6911,11 @@ var tokens = (0, import_dev59.defineTokens)({
 });
 
 // src/tokens-next/index.ts
-var import_dev65 = require("@pandacss/dev");
+var import_dev66 = require("@pandacss/dev");
 
 // src/tokens-next/borders.ts
-var import_dev60 = require("@pandacss/dev");
-var borderWidths2 = import_dev60.defineTokens.borderWidths({
+var import_dev61 = require("@pandacss/dev");
+var borderWidths2 = import_dev61.defineTokens.borderWidths({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -6855,8 +6925,8 @@ var borderWidths2 = import_dev60.defineTokens.borderWidths({
 });
 
 // src/tokens-next/colors.ts
-var import_dev61 = require("@pandacss/dev");
-var colors2 = import_dev61.defineTokens.colors({
+var import_dev62 = require("@pandacss/dev");
+var colors2 = import_dev62.defineTokens.colors({
   debug: { value: "red" },
   currentcolor: { value: "currentcolor" },
   white: { value: "#FFFFFF" },
@@ -7031,8 +7101,8 @@ var colors2 = import_dev61.defineTokens.colors({
 });
 
 // src/tokens-next/radii.ts
-var import_dev62 = require("@pandacss/dev");
-var radii2 = import_dev62.defineTokens.radii({
+var import_dev63 = require("@pandacss/dev");
+var radii2 = import_dev63.defineTokens.radii({
   none: { value: "0" },
   sm: { value: "0.25rem", description: "4px" },
   md: { value: "0.375rem", description: "6px" },
@@ -7042,8 +7112,8 @@ var radii2 = import_dev62.defineTokens.radii({
 });
 
 // src/tokens-next/spacing.ts
-var import_dev63 = require("@pandacss/dev");
-var spacing2 = import_dev63.defineTokens.spacing({
+var import_dev64 = require("@pandacss/dev");
+var spacing2 = import_dev64.defineTokens.spacing({
   0: { value: "0" },
   0.5: { value: "0.125rem", description: "2px" },
   1: { value: "0.25rem", description: "4px" },
@@ -7059,8 +7129,8 @@ var spacing2 = import_dev63.defineTokens.spacing({
 });
 
 // src/tokens-next/shadows.ts
-var import_dev64 = require("@pandacss/dev");
-var shadows2 = import_dev64.defineTokens.shadows({
+var import_dev65 = require("@pandacss/dev");
+var shadows2 = import_dev65.defineTokens.shadows({
   xs: {
     value: [
       "0px 2px 4px 0px {colors.background.shadow}",
@@ -7100,7 +7170,7 @@ var shadows2 = import_dev64.defineTokens.shadows({
 });
 
 // src/tokens-next/index.ts
-var tokensNext = (0, import_dev65.defineTokens)({
+var tokensNext = (0, import_dev66.defineTokens)({
   borderWidths: borderWidths2,
   colors: colors2,
   durations,
@@ -7118,11 +7188,11 @@ var tokensNext = (0, import_dev65.defineTokens)({
 });
 
 // src/semanticTokens/index.ts
-var import_dev68 = require("@pandacss/dev");
+var import_dev69 = require("@pandacss/dev");
 
 // src/semanticTokens/colors.ts
-var import_dev66 = require("@pandacss/dev");
-var colors3 = import_dev66.defineSemanticTokens.colors({
+var import_dev67 = require("@pandacss/dev");
+var colors3 = import_dev67.defineSemanticTokens.colors({
   background: {
     surface: {
       value: {
@@ -8048,8 +8118,8 @@ var colors3 = import_dev66.defineSemanticTokens.colors({
 });
 
 // src/semanticTokens/spacing.ts
-var import_dev67 = require("@pandacss/dev");
-var spacing3 = import_dev67.defineSemanticTokens.spacing({
+var import_dev68 = require("@pandacss/dev");
+var spacing3 = import_dev68.defineSemanticTokens.spacing({
   "4xs": {
     value: {
       base: "0.125rem"
@@ -8108,7 +8178,7 @@ var spacing3 = import_dev67.defineSemanticTokens.spacing({
 });
 
 // src/semanticTokens/index.ts
-var semanticTokens = (0, import_dev68.defineSemanticTokens)({
+var semanticTokens = (0, import_dev69.defineSemanticTokens)({
   colors: colors3,
   spacing: spacing3
 });
@@ -8156,7 +8226,7 @@ var globalFontface = {
 };
 
 // src/index.ts
-var preset = (0, import_dev69.definePreset)({
+var preset = (0, import_dev70.definePreset)({
   name: "@mekari/pixel3-theme",
   // Main Theme
   theme: {

package/dist/index.mjs

@@ -6338,6 +6338,75 @@ var aireneBubbleSlotRecipe = defineSlotRecipe33({
   defaultVariants: {}
 });
 
+// src/recipes/rating.ts
+import { defineSlotRecipe as defineSlotRecipe34 } from "@pandacss/dev";
+var ratingSlotRecipe = defineSlotRecipe34({
+  className: "rating",
+  jsx: ["MpRating", "mp-rating"],
+  slots: ["root", "wrapper", "value", "backgroundIconWrapper", "activeIconWrapper"],
+  base: {
+    root: {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "4",
+      py: "1"
+    },
+    wrapper: {
+      position: "relative",
+      width: "fit-content"
+    },
+    value: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      mt: "2px"
+    },
+    backgroundIconWrapper: {
+      display: "flex",
+      gap: "2",
+      "& svg": {
+        display: "flex",
+        width: "6",
+        height: "6",
+        color: "gray.100 !important",
+        _nextTheme: {
+          color: "icon.disabled !important"
+        }
+      }
+    },
+    activeIconWrapper: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      display: "flex",
+      gap: "2",
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      "& svg": {
+        flex: "none",
+        width: "6",
+        height: "6",
+        '&[data-variant="star"]': {
+          color: "amber.400",
+          _nextTheme: {
+            color: "chart.cat04.bold"
+          }
+        },
+        '&[data-variant="heart"]': {
+          color: "rose.400",
+          _nextTheme: {
+            color: "chart.cat06.bold"
+          }
+        }
+      }
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+});
+
 // src/recipes/index.ts
 var recipes = {
   buttonRecipe,
@@ -6417,7 +6486,8 @@ var slotRecipes = {
   tourSlotRecipe,
   aireneButtonSlotRecipe,
   aireneInputSlotRecipe,
-  aireneBubbleSlotRecipe
+  aireneBubbleSlotRecipe,
+  ratingSlotRecipe
 };
 
 // src/text-styles.ts

package/dist/recipes/index.d.mts

@@ -79,6 +79,7 @@ declare const slotRecipes: {
     aireneButtonSlotRecipe: _pandacss_types.SlotRecipeConfig;
     aireneInputSlotRecipe: _pandacss_types.SlotRecipeConfig;
     aireneBubbleSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    ratingSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/dist/recipes/index.d.ts

@@ -79,6 +79,7 @@ declare const slotRecipes: {
     aireneButtonSlotRecipe: _pandacss_types.SlotRecipeConfig;
     aireneInputSlotRecipe: _pandacss_types.SlotRecipeConfig;
     aireneBubbleSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    ratingSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/dist/recipes/rating.d.mts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const ratingSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+
+export { ratingSlotRecipe };

package/dist/recipes/rating.d.ts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const ratingSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+
+export { ratingSlotRecipe };

package/package.json

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

package/src/recipes/index.ts

@@ -69,6 +69,7 @@ import { skeletonRecipe } from './skeleton'
 import { scrollbarRecipe } from './scrollbar'
 import { aireneInputSlotRecipe } from './airene-chat-input'
 import { aireneBubbleSlotRecipe } from './airene-chat-bubble'
+import { ratingSlotRecipe } from './rating'
 
 export const recipes = {
   buttonRecipe,
@@ -149,5 +150,6 @@ export const slotRecipes = {
   tourSlotRecipe,
   aireneButtonSlotRecipe,
   aireneInputSlotRecipe,
-  aireneBubbleSlotRecipe
+  aireneBubbleSlotRecipe,
+  ratingSlotRecipe
 }

package/src/recipes/rating.ts

@@ -0,0 +1,77 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const ratingSlotRecipe = defineSlotRecipe({
+  className: 'rating',
+  jsx: ['MpRating', 'mp-rating'],
+  slots: ['root', 'wrapper', 'value', 'backgroundIconWrapper', 'activeIconWrapper'],
+  base: {
+    root: {
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '4',
+      py: '1'
+    },
+    wrapper: {
+      position: 'relative',
+      width: 'fit-content'
+    },
+    value: {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center',
+      mt: '2px'
+    },
+    backgroundIconWrapper: {
+      display: 'flex',
+      gap: '2',
+
+      '& svg': {
+        display: 'flex',
+        width: '6',
+        height: '6',
+        color: 'gray.100 !important',
+
+        _nextTheme: {
+          color: 'icon.disabled !important'
+        }
+      }
+    },
+    activeIconWrapper: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      display: 'flex',
+      gap: '2',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+
+      '& svg': {
+        flex: 'none',
+        width: '6',
+        height: '6',
+
+        '&[data-variant="star"]': {
+          color: 'amber.400',
+
+          _nextTheme: {
+            color: 'chart.cat04.bold'
+          }
+        },
+
+        '&[data-variant="heart"]': {
+          color: 'rose.400',
+
+          _nextTheme: {
+            color: 'chart.cat06.bold'
+          }
+        }
+      }
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})
+
+export { ratingSlotRecipe }