@mekari/pixel3-theme 0.2.0-dev.1 → 0.2.0-dev.3

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"
       }
     }
@@ -4321,34 +4324,43 @@ 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: {
+      fontFamily: "var(--font-inter)",
       fontSize: "2xl",
       lineHeight: "sm",
-      fontWeight: "semiBold !important"
+      fontWeight: "semiBold"
     }
   }
 });
@@ -4706,6 +4718,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 +4765,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"
       }
     }
@@ -4295,34 +4298,43 @@ 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: {
+      fontFamily: "var(--font-inter)",
       fontSize: "2xl",
       lineHeight: "sm",
-      fontWeight: "semiBold !important"
+      fontWeight: "semiBold"
     }
   }
 });
@@ -4680,6 +4692,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 +4739,11 @@ var preset = definePreset({
     }
   },
   conditions,
-  globalCss
+  globalFontface,
+  globalCss,
+  globalVars: {
+    "--font-inter": "Inter, sans-serif"
+  }
 });
 var src_default = preset;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mekari/pixel3-theme",
   "description": "Theme for mekari pixel 3",
-  "version": "0.2.0-dev.1",
+  "version": "0.2.0-dev.3",
   "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/text-styles.ts

@@ -1,34 +1,43 @@
 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: {
+      fontFamily: 'var(--font-inter)',
       fontSize: '2xl',
       lineHeight: 'sm',
-      fontWeight: 'semiBold !important'
+      fontWeight: 'semiBold'
     }
   }
 })