@mekari/pixel3-theme 0.2.0-dev.0 → 0.2.0-dev.2

package/dist/fonts.d.mts

@@ -0,0 +1,9 @@
+declare const globalFontface: {
+    Inter: {
+        src: string[];
+        fontStyle: string;
+        fontWeight: string;
+    }[];
+};
+
+export { globalFontface };

package/dist/fonts.d.ts

@@ -0,0 +1,9 @@
+declare const globalFontface: {
+    Inter: {
+        src: string[];
+        fontStyle: string;
+        fontWeight: string;
+    }[];
+};
+
+export { globalFontface };

package/dist/index.js

@@ -1249,6 +1249,7 @@ var badgeRecipe = (0, import_dev13.defineRecipe)({
   base: {
     display: "inline-flex",
     alignItems: "center",
+    justifyContent: "center",
     borderRadius: "999px"
   },
   variants: {
@@ -1269,15 +1270,17 @@ var badgeRecipe = (0, import_dev13.defineRecipe)({
       sm: {
         fontSize: "xs",
         fontWeight: "semiBold",
-        lineHeight: "sm",
+        lineHeight: "0",
         letterSpacing: "normal",
+        minWidth: "4",
         height: "4"
       },
       md: {
         fontSize: "md",
         fontWeight: "regular",
-        lineHeight: "md",
+        lineHeight: "0",
         letterSpacing: "normal",
+        minWidth: "5",
         height: "5"
       }
     }
@@ -1612,9 +1615,9 @@ var tabRecipe = (0, import_dev16.defineRecipe)({
     isSelected: false
   }
 });
-var selectedBorderRecipe = (0, import_dev16.defineRecipe)({
-  className: "selected-border",
-  jsx: ["MpSelectedBorder", "mp-selected-border"],
+var tabSelectedBorderRecipe = (0, import_dev16.defineRecipe)({
+  className: "tab-selected-border",
+  jsx: ["MpTabSelectedBorder", "mp-tab-selected-border"],
   base: {
     position: "absolute",
     bottom: "-2px",
@@ -4256,7 +4259,7 @@ var recipes = {
   textareaRecipe,
   tooltipRecipe,
   tabRecipe,
-  selectedBorderRecipe,
+  tabSelectedBorderRecipe,
   tableRecipe,
   tableContainerRecipe,
   dividerRecipe,
@@ -4321,34 +4324,42 @@ var slotRecipes = {
 // src/text-styles.ts
 var import_dev42 = require("@pandacss/dev");
 var textStyles = (0, import_dev42.defineTextStyles)({
-  overline: { value: { fontSize: "xs", lineHeight: "xs" } },
+  overline: {
+    value: {
+      fontFamily: "var(--font-inter)",
+      fontSize: "xs",
+      lineHeight: "xs"
+    }
+  },
   body: {
-    sm: { value: { fontSize: "sm", lineHeight: "2xl" } },
-    md: { value: { fontSize: "md", lineHeight: "3xl" } }
+    sm: { value: { fontFamily: "var(--font-inter)", fontSize: "sm", lineHeight: "2xl" } },
+    md: { value: { fontFamily: "var(--font-inter)", fontSize: "md", lineHeight: "3xl" } }
   },
   label: {
-    sm: { value: { fontSize: "sm", lineHeight: "sm" } },
-    md: { value: { fontSize: "md", lineHeight: "lg" } }
+    sm: { value: { fontFamily: "var(--font-inter)", fontSize: "sm", lineHeight: "sm" } },
+    md: { value: { fontFamily: "var(--font-inter)", fontSize: "md", lineHeight: "lg" } }
   },
   h3: {
     value: {
+      fontFamily: "var(--font-inter)",
       fontSize: "lg",
       lineHeight: "xl",
-      fontWeight: "semiBold !important"
+      fontWeight: "semiBold"
     }
   },
   h2: {
     value: {
+      fontFamily: "var(--font-inter)",
       fontSize: "xl",
       lineHeight: "md",
-      fontWeight: "semiBold !important"
+      fontWeight: "semiBold"
     }
   },
   h1: {
     value: {
       fontSize: "2xl",
       lineHeight: "sm",
-      fontWeight: "semiBold !important"
+      fontWeight: "semiBold"
     }
   }
 });
@@ -4706,6 +4717,39 @@ var tokens = (0, import_dev53.defineTokens)({
   zIndex
 });
 
+// src/fonts.ts
+var globalFontface = {
+  Inter: [
+    {
+      src: [
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-Regular.woff2") format("woff2")',
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-Regular.ttf") format("truetype")'
+      ],
+      fontStyle: "normal",
+      fontWeight: "400"
+      // fontDisplay: 'swap'
+    },
+    {
+      src: [
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-SemiBold.woff2") format("woff2")',
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-SemiBold.ttf") format("truetype")'
+      ],
+      fontStyle: "normal",
+      fontWeight: "600"
+      // fontDisplay: 'swap'
+    },
+    {
+      src: [
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-SemiBoldItalic.woff2") format("woff2")',
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-SemiBoldItalic.ttf") format("truetype")'
+      ],
+      fontStyle: "italic",
+      fontWeight: "600"
+      // fontDisplay: 'swap'
+    }
+  ]
+};
+
 // src/index.ts
 var preset = (0, import_dev54.definePreset)({
   name: "@mekari/pixel3-theme",
@@ -4720,7 +4764,11 @@ var preset = (0, import_dev54.definePreset)({
     }
   },
   conditions,
-  globalCss
+  globalFontface,
+  globalCss,
+  globalVars: {
+    "--font-inter": "Inter, sans-serif"
+  }
 });
 var src_default = preset;
 

package/dist/index.mjs

@@ -1223,6 +1223,7 @@ var badgeRecipe = defineRecipe6({
   base: {
     display: "inline-flex",
     alignItems: "center",
+    justifyContent: "center",
     borderRadius: "999px"
   },
   variants: {
@@ -1243,15 +1244,17 @@ var badgeRecipe = defineRecipe6({
       sm: {
         fontSize: "xs",
         fontWeight: "semiBold",
-        lineHeight: "sm",
+        lineHeight: "0",
         letterSpacing: "normal",
+        minWidth: "4",
         height: "4"
       },
       md: {
         fontSize: "md",
         fontWeight: "regular",
-        lineHeight: "md",
+        lineHeight: "0",
         letterSpacing: "normal",
+        minWidth: "5",
         height: "5"
       }
     }
@@ -1586,9 +1589,9 @@ var tabRecipe = defineRecipe9({
     isSelected: false
   }
 });
-var selectedBorderRecipe = defineRecipe9({
-  className: "selected-border",
-  jsx: ["MpSelectedBorder", "mp-selected-border"],
+var tabSelectedBorderRecipe = defineRecipe9({
+  className: "tab-selected-border",
+  jsx: ["MpTabSelectedBorder", "mp-tab-selected-border"],
   base: {
     position: "absolute",
     bottom: "-2px",
@@ -4230,7 +4233,7 @@ var recipes = {
   textareaRecipe,
   tooltipRecipe,
   tabRecipe,
-  selectedBorderRecipe,
+  tabSelectedBorderRecipe,
   tableRecipe,
   tableContainerRecipe,
   dividerRecipe,
@@ -4295,34 +4298,42 @@ var slotRecipes = {
 // src/text-styles.ts
 import { defineTextStyles } from "@pandacss/dev";
 var textStyles = defineTextStyles({
-  overline: { value: { fontSize: "xs", lineHeight: "xs" } },
+  overline: {
+    value: {
+      fontFamily: "var(--font-inter)",
+      fontSize: "xs",
+      lineHeight: "xs"
+    }
+  },
   body: {
-    sm: { value: { fontSize: "sm", lineHeight: "2xl" } },
-    md: { value: { fontSize: "md", lineHeight: "3xl" } }
+    sm: { value: { fontFamily: "var(--font-inter)", fontSize: "sm", lineHeight: "2xl" } },
+    md: { value: { fontFamily: "var(--font-inter)", fontSize: "md", lineHeight: "3xl" } }
   },
   label: {
-    sm: { value: { fontSize: "sm", lineHeight: "sm" } },
-    md: { value: { fontSize: "md", lineHeight: "lg" } }
+    sm: { value: { fontFamily: "var(--font-inter)", fontSize: "sm", lineHeight: "sm" } },
+    md: { value: { fontFamily: "var(--font-inter)", fontSize: "md", lineHeight: "lg" } }
   },
   h3: {
     value: {
+      fontFamily: "var(--font-inter)",
       fontSize: "lg",
       lineHeight: "xl",
-      fontWeight: "semiBold !important"
+      fontWeight: "semiBold"
     }
   },
   h2: {
     value: {
+      fontFamily: "var(--font-inter)",
       fontSize: "xl",
       lineHeight: "md",
-      fontWeight: "semiBold !important"
+      fontWeight: "semiBold"
     }
   },
   h1: {
     value: {
       fontSize: "2xl",
       lineHeight: "sm",
-      fontWeight: "semiBold !important"
+      fontWeight: "semiBold"
     }
   }
 });
@@ -4680,6 +4691,39 @@ var tokens = defineTokens11({
   zIndex
 });
 
+// src/fonts.ts
+var globalFontface = {
+  Inter: [
+    {
+      src: [
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-Regular.woff2") format("woff2")',
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-Regular.ttf") format("truetype")'
+      ],
+      fontStyle: "normal",
+      fontWeight: "400"
+      // fontDisplay: 'swap'
+    },
+    {
+      src: [
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-SemiBold.woff2") format("woff2")',
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-SemiBold.ttf") format("truetype")'
+      ],
+      fontStyle: "normal",
+      fontWeight: "600"
+      // fontDisplay: 'swap'
+    },
+    {
+      src: [
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-SemiBoldItalic.woff2") format("woff2")',
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-SemiBoldItalic.ttf") format("truetype")'
+      ],
+      fontStyle: "italic",
+      fontWeight: "600"
+      // fontDisplay: 'swap'
+    }
+  ]
+};
+
 // src/index.ts
 var preset = definePreset({
   name: "@mekari/pixel3-theme",
@@ -4694,7 +4738,11 @@ var preset = definePreset({
     }
   },
   conditions,
-  globalCss
+  globalFontface,
+  globalCss,
+  globalVars: {
+    "--font-inter": "Inter, sans-serif"
+  }
 });
 var src_default = preset;
 

package/dist/recipes/index.d.mts

@@ -13,7 +13,7 @@ declare const recipes: {
     textareaRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tooltipRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tabRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
-    selectedBorderRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    tabSelectedBorderRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tableRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tableContainerRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     dividerRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;

package/dist/recipes/index.d.ts

@@ -13,7 +13,7 @@ declare const recipes: {
     textareaRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tooltipRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tabRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
-    selectedBorderRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    tabSelectedBorderRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tableRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tableContainerRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     dividerRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;

package/dist/recipes/tabs.d.mts

@@ -2,6 +2,6 @@ import * as _pandacss_dev from '@pandacss/dev';
 
 declare const tabListSlotRecipe: _pandacss_dev.SlotRecipeConfig;
 declare const tabRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
-declare const selectedBorderRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+declare const tabSelectedBorderRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 
-export { selectedBorderRecipe, tabListSlotRecipe, tabRecipe };
+export { tabListSlotRecipe, tabRecipe, tabSelectedBorderRecipe };

package/dist/recipes/tabs.d.ts

@@ -2,6 +2,6 @@ import * as _pandacss_dev from '@pandacss/dev';
 
 declare const tabListSlotRecipe: _pandacss_dev.SlotRecipeConfig;
 declare const tabRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
-declare const selectedBorderRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+declare const tabSelectedBorderRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 
-export { selectedBorderRecipe, tabListSlotRecipe, tabRecipe };
+export { tabListSlotRecipe, tabRecipe, tabSelectedBorderRecipe };

package/package.json

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

package/src/fonts.ts

@@ -0,0 +1,31 @@
+export const globalFontface = {
+  Inter: [
+    {
+      src: [
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-Regular.woff2") format("woff2")',
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-Regular.ttf") format("truetype")'
+      ],
+      fontStyle: 'normal',
+      fontWeight: '400',
+      // fontDisplay: 'swap'
+    },
+    {
+      src: [
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-SemiBold.woff2") format("woff2")',
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-SemiBold.ttf") format("truetype")'
+      ],
+      fontStyle: 'normal',
+      fontWeight: '600',
+      // fontDisplay: 'swap'
+    },
+    {
+      src: [
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-SemiBoldItalic.woff2") format("woff2")',
+        'url("https://cdn.mekari.design/fonts/Inter/Inter-SemiBoldItalic.ttf") format("truetype")'
+      ],
+      fontStyle: 'italic',
+      fontWeight: '600',
+      // fontDisplay: 'swap'
+    },
+  ]
+}

package/src/index.ts

@@ -7,6 +7,7 @@ import { keyframes } from './keyframes'
 import { recipes, slotRecipes } from './recipes'
 import { textStyles } from './text-styles'
 import { tokens } from './tokens'
+import { globalFontface } from './fonts'
 
 const preset: Preset = definePreset({
   name: '@mekari/pixel3-theme',
@@ -21,7 +22,11 @@ const preset: Preset = definePreset({
     }
   },
   conditions,
-  globalCss
+  globalFontface,
+  globalCss,
+  globalVars: {
+    '--font-inter': 'Inter, sans-serif'
+  }
 })
 
 export default preset

package/src/recipes/badge.ts

@@ -6,7 +6,8 @@ const badgeRecipe = defineRecipe({
   base: {
     display: 'inline-flex',
     alignItems: 'center',
-    borderRadius: '999px'
+    justifyContent: 'center',
+    borderRadius: '999px',
   },
 
   variants: {
@@ -27,15 +28,17 @@ const badgeRecipe = defineRecipe({
       sm: {
         fontSize: 'xs',
         fontWeight: 'semiBold',
-        lineHeight: 'sm',
+        lineHeight: '0',
         letterSpacing: 'normal',
+        minWidth: '4',
         height: '4'
       },
       md: {
         fontSize: 'md',
         fontWeight: 'regular',
-        lineHeight: 'md',
+        lineHeight: '0',
         letterSpacing: 'normal',
+        minWidth: '5',
         height: '5'
       }
     }

package/src/recipes/index.ts

@@ -11,7 +11,7 @@ import { popoverContentRecipe, popoverListRecipe, popoverListItemRecipe } from '
 import { badgeRecipe } from './badge'
 import { textareaRecipe } from './textarea'
 import { tooltipRecipe } from './tooltip'
-import { tabListSlotRecipe, tabRecipe, selectedBorderRecipe } from './tabs'
+import { tabListSlotRecipe, tabRecipe, tabSelectedBorderRecipe } from './tabs'
 import { checkboxSlotRecipe } from './checkbox'
 import { radioSlotRecipe } from './radio'
 import { sharedSlotRecipe } from './shared'
@@ -77,7 +77,7 @@ export const recipes = {
   textareaRecipe,
   tooltipRecipe,
   tabRecipe,
-  selectedBorderRecipe,
+  tabSelectedBorderRecipe,
   tableRecipe,
   tableContainerRecipe,
   dividerRecipe,

package/src/recipes/tabs.ts

@@ -132,9 +132,9 @@ const tabRecipe = defineRecipe({
   }
 })
 
-const selectedBorderRecipe = defineRecipe({
-  className: 'selected-border',
-  jsx: ['MpSelectedBorder', 'mp-selected-border'],
+const tabSelectedBorderRecipe = defineRecipe({
+  className: 'tab-selected-border',
+  jsx: ['MpTabSelectedBorder', 'mp-tab-selected-border'],
   base: {
     position: 'absolute',
     bottom: '-2px',
@@ -218,4 +218,4 @@ const selectedBorderRecipe = defineRecipe({
   }
 })
 
-export { tabListSlotRecipe, tabRecipe, selectedBorderRecipe }
+export { tabListSlotRecipe, tabRecipe, tabSelectedBorderRecipe }

package/src/text-styles.ts

@@ -1,34 +1,42 @@
 import { defineTextStyles } from '@pandacss/dev'
 
 export const textStyles = defineTextStyles({
-  overline: { value: { fontSize: 'xs', lineHeight: 'xs' } },
+  overline: {
+    value: {
+      fontFamily: 'var(--font-inter)',
+      fontSize: 'xs',
+      lineHeight: 'xs'
+    }
+  },
   body: {
-    sm: { value: { fontSize: 'sm', lineHeight: '2xl' } },
-    md: { value: { fontSize: 'md', lineHeight: '3xl' } }
+    sm: { value: { fontFamily: 'var(--font-inter)', fontSize: 'sm', lineHeight: '2xl' } },
+    md: { value: { fontFamily: 'var(--font-inter)', fontSize: 'md', lineHeight: '3xl' } }
   },
   label: {
-    sm: { value: { fontSize: 'sm', lineHeight: 'sm' } },
-    md: { value: { fontSize: 'md', lineHeight: 'lg' } }
+    sm: { value: { fontFamily: 'var(--font-inter)', fontSize: 'sm', lineHeight: 'sm' } },
+    md: { value: { fontFamily: 'var(--font-inter)', fontSize: 'md', lineHeight: 'lg' } }
   },
   h3: {
     value: {
+      fontFamily: 'var(--font-inter)',
       fontSize: 'lg',
       lineHeight: 'xl',
-      fontWeight: 'semiBold !important'
+      fontWeight: 'semiBold'
     }
   },
   h2: {
     value: {
+      fontFamily: 'var(--font-inter)',
       fontSize: 'xl',
       lineHeight: 'md',
-      fontWeight: 'semiBold !important'
+      fontWeight: 'semiBold'
     }
   },
   h1: {
     value: {
       fontSize: '2xl',
       lineHeight: 'sm',
-      fontWeight: 'semiBold !important'
+      fontWeight: 'semiBold'
     }
   }
 })