@mekari/pixel3-theme 0.2.2-dev.5 → 0.2.2-dev.6

package/dist/index.js

@@ -1929,8 +1929,8 @@ var badgeRecipe = (0, import_dev14.defineRecipe)({
         color: "white"
       },
       subtle: {},
-      "additionalInformation": {},
-      "tableStatus": {},
+      additionalInformation: {},
+      tableStatus: {},
       indicator: {}
     },
     variantColor: {
@@ -4972,11 +4972,7 @@ var import_dev35 = require("@pandacss/dev");
 var carouselSlotRecipe = (0, import_dev35.defineSlotRecipe)({
   className: "carousel",
   jsx: ["MpCarousel", "mp-carousel"],
-  slots: [
-    "root",
-    "buttonRight",
-    "buttonLeft"
-  ],
+  slots: ["root", "buttonRight", "buttonLeft"],
   base: {
     root: {
       display: "block",
@@ -5339,7 +5335,11 @@ var timelineSeparatorSlotRecipe = (0, import_dev38.defineSlotRecipe)({
     root: {
       display: "flex",
       flexDirection: "column",
-      alignItems: "center"
+      alignItems: "center",
+      "&[data-accordion-child=true]": {
+        alignItems: "start",
+        marginLeft: "9px"
+      }
     },
     topConnector: {
       height: "6px",
@@ -5349,8 +5349,20 @@ var timelineSeparatorSlotRecipe = (0, import_dev38.defineSlotRecipe)({
       "&[data-position=first]": {
         backgroundColor: "transparent"
       },
+      "&[data-hide=true]": {
+        backgroundColor: "transparent"
+      },
+      "&[data-accordion-child=true]": {
+        roundedBottom: ""
+      },
       _nextTheme: {
-        backgroundColor: "border.default"
+        backgroundColor: "border.default",
+        "&[data-position=first]": {
+          backgroundColor: "transparent"
+        },
+        "&[data-hide=true]": {
+          backgroundColor: "transparent"
+        }
       }
     },
     bottomConnector: {
@@ -5362,10 +5374,19 @@ var timelineSeparatorSlotRecipe = (0, import_dev38.defineSlotRecipe)({
       "&[data-position=last]": {
         backgroundColor: "transparent"
       },
+      "&[data-hide=true]": {
+        backgroundColor: "transparent"
+      },
+      "&[data-accordion-child=true]": {
+        roundedTop: ""
+      },
       _nextTheme: {
         backgroundColor: "border.default",
         "&[data-position=last]": {
           backgroundColor: "transparent"
+        },
+        "&[data-hide=true]": {
+          backgroundColor: "transparent"
         }
       }
     }
@@ -6691,16 +6712,28 @@ var spacing2 = import_dev59.defineTokens.spacing({
 var import_dev60 = require("@pandacss/dev");
 var shadows2 = import_dev60.defineTokens.shadows({
   xs: {
-    value: ["0px 2px 4px 0px {colors.background.shadow}", "0px 0px 2px 0px {colors.background.shadow}"]
+    value: [
+      "0px 2px 4px 0px {colors.background.shadow}",
+      "0px 0px 2px 0px {colors.background.shadow}"
+    ]
   },
   sm: {
-    value: ["0px 10px 15px -3px {colors.background.shadow}", "0px 4px 6px -2px {colors.background.shadow}"]
+    value: [
+      "0px 10px 15px -3px {colors.background.shadow}",
+      "0px 4px 6px -2px {colors.background.shadow}"
+    ]
   },
   md: {
-    value: ["0px 20px 25px -5px {colors.background.shadow}", "0px 10px 10px -5px {colors.background.shadow}"]
+    value: [
+      "0px 20px 25px -5px {colors.background.shadow}",
+      "0px 10px 10px -5px {colors.background.shadow}"
+    ]
   },
   lg: {
-    value: ["0px 25px 30px -10px {colors.background.shadow}", "0px 15px 15px -10px {colors.background.shadow}"]
+    value: [
+      "0px 25px 30px -10px {colors.background.shadow}",
+      "0px 15px 15px -10px {colors.background.shadow}"
+    ]
   },
   focus: {
     value: "0 0 0 1px {colors.border.focused}"
@@ -7129,6 +7162,16 @@ var colors3 = import_dev62.defineSemanticTokens.colors({
           }
         }
       }
+    },
+    airene: {
+      value: {
+        base: "radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)",
+        // Doens't have raw token
+        _light: "radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)",
+        // Doesn't have raw token
+        _dark: "radial-gradient(108.28% 139.29% at 0% 0%, #1D2656 0%, #2B2549 100%)"
+        // Doesn't have raw token
+      }
     }
   },
   nav: {

package/dist/index.mjs

@@ -1903,8 +1903,8 @@ var badgeRecipe = defineRecipe6({
         color: "white"
       },
       subtle: {},
-      "additionalInformation": {},
-      "tableStatus": {},
+      additionalInformation: {},
+      tableStatus: {},
       indicator: {}
     },
     variantColor: {
@@ -4946,11 +4946,7 @@ import { defineSlotRecipe as defineSlotRecipe24 } from "@pandacss/dev";
 var carouselSlotRecipe = defineSlotRecipe24({
   className: "carousel",
   jsx: ["MpCarousel", "mp-carousel"],
-  slots: [
-    "root",
-    "buttonRight",
-    "buttonLeft"
-  ],
+  slots: ["root", "buttonRight", "buttonLeft"],
   base: {
     root: {
       display: "block",
@@ -5313,7 +5309,11 @@ var timelineSeparatorSlotRecipe = defineSlotRecipe27({
     root: {
       display: "flex",
       flexDirection: "column",
-      alignItems: "center"
+      alignItems: "center",
+      "&[data-accordion-child=true]": {
+        alignItems: "start",
+        marginLeft: "9px"
+      }
     },
     topConnector: {
       height: "6px",
@@ -5323,8 +5323,20 @@ var timelineSeparatorSlotRecipe = defineSlotRecipe27({
       "&[data-position=first]": {
         backgroundColor: "transparent"
       },
+      "&[data-hide=true]": {
+        backgroundColor: "transparent"
+      },
+      "&[data-accordion-child=true]": {
+        roundedBottom: ""
+      },
       _nextTheme: {
-        backgroundColor: "border.default"
+        backgroundColor: "border.default",
+        "&[data-position=first]": {
+          backgroundColor: "transparent"
+        },
+        "&[data-hide=true]": {
+          backgroundColor: "transparent"
+        }
       }
     },
     bottomConnector: {
@@ -5336,10 +5348,19 @@ var timelineSeparatorSlotRecipe = defineSlotRecipe27({
       "&[data-position=last]": {
         backgroundColor: "transparent"
       },
+      "&[data-hide=true]": {
+        backgroundColor: "transparent"
+      },
+      "&[data-accordion-child=true]": {
+        roundedTop: ""
+      },
       _nextTheme: {
         backgroundColor: "border.default",
         "&[data-position=last]": {
           backgroundColor: "transparent"
+        },
+        "&[data-hide=true]": {
+          backgroundColor: "transparent"
         }
       }
     }
@@ -6665,16 +6686,28 @@ var spacing2 = defineTokens15.spacing({
 import { defineTokens as defineTokens16 } from "@pandacss/dev";
 var shadows2 = defineTokens16.shadows({
   xs: {
-    value: ["0px 2px 4px 0px {colors.background.shadow}", "0px 0px 2px 0px {colors.background.shadow}"]
+    value: [
+      "0px 2px 4px 0px {colors.background.shadow}",
+      "0px 0px 2px 0px {colors.background.shadow}"
+    ]
   },
   sm: {
-    value: ["0px 10px 15px -3px {colors.background.shadow}", "0px 4px 6px -2px {colors.background.shadow}"]
+    value: [
+      "0px 10px 15px -3px {colors.background.shadow}",
+      "0px 4px 6px -2px {colors.background.shadow}"
+    ]
   },
   md: {
-    value: ["0px 20px 25px -5px {colors.background.shadow}", "0px 10px 10px -5px {colors.background.shadow}"]
+    value: [
+      "0px 20px 25px -5px {colors.background.shadow}",
+      "0px 10px 10px -5px {colors.background.shadow}"
+    ]
   },
   lg: {
-    value: ["0px 25px 30px -10px {colors.background.shadow}", "0px 15px 15px -10px {colors.background.shadow}"]
+    value: [
+      "0px 25px 30px -10px {colors.background.shadow}",
+      "0px 15px 15px -10px {colors.background.shadow}"
+    ]
   },
   focus: {
     value: "0 0 0 1px {colors.border.focused}"
@@ -7103,6 +7136,16 @@ var colors3 = defineSemanticTokens.colors({
           }
         }
       }
+    },
+    airene: {
+      value: {
+        base: "radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)",
+        // Doens't have raw token
+        _light: "radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)",
+        // Doesn't have raw token
+        _dark: "radial-gradient(108.28% 139.29% at 0% 0%, #1D2656 0%, #2B2549 100%)"
+        // Doesn't have raw token
+      }
     }
   },
   nav: {

package/dist/semanticTokens/colors.d.mts

@@ -378,6 +378,13 @@ declare const colors: {
                 };
             };
         };
+        airene: {
+            value: {
+                base: string;
+                _light: string;
+                _dark: string;
+            };
+        };
     };
     nav: {
         parent: {

package/dist/semanticTokens/colors.d.ts

@@ -378,6 +378,13 @@ declare const colors: {
                 };
             };
         };
+        airene: {
+            value: {
+                base: string;
+                _light: string;
+                _dark: string;
+            };
+        };
     };
     nav: {
         parent: {

package/dist/semanticTokens/index.d.mts

@@ -379,6 +379,13 @@ declare const semanticTokens: {
                     };
                 };
             };
+            airene: {
+                value: {
+                    base: string;
+                    _light: string;
+                    _dark: string;
+                };
+            };
         };
         nav: {
             parent: {

package/dist/semanticTokens/index.d.ts

@@ -379,6 +379,13 @@ declare const semanticTokens: {
                     };
                 };
             };
+            airene: {
+                value: {
+                    base: string;
+                    _light: string;
+                    _dark: string;
+                };
+            };
         };
         nav: {
             parent: {

package/package.json

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

package/src/conditions.ts

@@ -4,7 +4,8 @@ export const conditions = {
     invalid: '&:is([aria-invalid=true], [data-invalid])',
     active: '&:is(:active, [data-active=true])',
     checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state=checked])',
-    indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])',
+    indeterminate:
+      '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])',
     closed: '&:is([data-state=closed])',
     open: '&:is([open], [data-state=open])',
     hidden: '&:is([hidden])',
@@ -20,6 +21,6 @@ export const conditions = {
     placementRight: '&[data-placement=right]',
     nextTheme: '[data-panda-theme=next] &',
     light: '.light &',
-    dark: '.dark &',
+    dark: '.dark &'
   }
 }

package/src/fonts.ts

@@ -6,7 +6,7 @@ export const globalFontface = {
         'url("https://cdn.mekari.design/fonts/Inter/Inter-Regular.ttf") format("truetype")'
       ],
       fontStyle: 'normal',
-      fontWeight: '400',
+      fontWeight: '400'
       // fontDisplay: 'swap'
     },
     {
@@ -15,7 +15,7 @@ export const globalFontface = {
         'url("https://cdn.mekari.design/fonts/Inter/Inter-SemiBold.ttf") format("truetype")'
       ],
       fontStyle: 'normal',
-      fontWeight: '600',
+      fontWeight: '600'
       // fontDisplay: 'swap'
     },
     {
@@ -24,8 +24,8 @@ export const globalFontface = {
         'url("https://cdn.mekari.design/fonts/Inter/Inter-SemiBoldItalic.ttf") format("truetype")'
       ],
       fontStyle: 'italic',
-      fontWeight: '600',
+      fontWeight: '600'
       // fontDisplay: 'swap'
-    },
+    }
   ]
 }

package/src/global-css.ts

@@ -5,7 +5,7 @@ export const globalCss = defineGlobalStyles({
     MozOsxFontSmoothing: 'grayscale',
     textRendering: 'optimizeLegibility',
     WebkitFontSmoothing: 'antialiased',
-    WebkitTextSizeAdjust: '100%',
+    WebkitTextSizeAdjust: '100%'
   },
   body: {
     background: 'var(--mp-colors-white)',
@@ -18,8 +18,8 @@ export const globalCss = defineGlobalStyles({
       colorScheme: 'dark'
     },
     _nextTheme: {
-      background: 'var(--mp-colors-background-neutral)', 
-      color: 'var(--mp-colors-text-default)',
+      background: 'var(--mp-colors-background-neutral)',
+      color: 'var(--mp-colors-text-default)'
     }
   },
   '*, *::before, *::after': {

package/src/index.ts

@@ -29,7 +29,7 @@ const preset: Preset = definePreset({
     next: {
       tokens: tokensNext,
       semanticTokens
-    },
+    }
   },
   conditions,
   globalCss,

package/src/recipes/avatar.ts

@@ -2,7 +2,7 @@ import { defineSlotRecipe } from '@pandacss/dev'
 
 const variantColor = {
   gray: {
-    root: { 
+    root: {
       backgroundColor: 'gray.50',
       _nextTheme: {
         backgroundColor: 'background.neutral.subtle'
@@ -10,7 +10,7 @@ const variantColor = {
     }
   },
   sky: {
-    root: { 
+    root: {
       backgroundColor: 'sky.400',
       _nextTheme: {
         backgroundColor: 'chart.cat01'
@@ -18,7 +18,7 @@ const variantColor = {
     }
   },
   teal: {
-    root: { 
+    root: {
       backgroundColor: 'teal.400',
       _nextTheme: {
         backgroundColor: 'chart.cat02'
@@ -26,15 +26,15 @@ const variantColor = {
     }
   },
   violet: {
-    root: { 
+    root: {
       backgroundColor: 'violet.400',
       _nextTheme: {
         backgroundColor: 'chart.cat03'
-      } 
+      }
     }
   },
   amber: {
-    root: { 
+    root: {
       backgroundColor: 'amber.400',
       _nextTheme: {
         backgroundColor: 'chart.cat04'
@@ -42,7 +42,7 @@ const variantColor = {
     }
   },
   rose: {
-    root: { 
+    root: {
       backgroundColor: 'rose.400',
       _nextTheme: {
         backgroundColor: 'chart.cat06'
@@ -50,7 +50,7 @@ const variantColor = {
     }
   },
   stone: {
-    root: { 
+    root: {
       backgroundColor: 'stone.400',
       _nextTheme: {
         backgroundColor: 'chart.cat05'
@@ -58,7 +58,7 @@ const variantColor = {
     }
   },
   lime: {
-    root: { 
+    root: {
       backgroundColor: 'lime.400',
       _nextTheme: {
         backgroundColor: 'chart.cat07'
@@ -66,7 +66,7 @@ const variantColor = {
     }
   },
   pink: {
-    root: { 
+    root: {
       backgroundColor: 'pink.400',
       _nextTheme: {
         backgroundColor: 'chart.cat08'
@@ -174,7 +174,7 @@ const avatarSlotRecipe = defineSlotRecipe({
     {
       variantColor: 'gray',
       css: {
-        root: { 
+        root: {
           color: 'gray.600',
           _nextTheme: {
             color: 'text.secondary'
@@ -212,40 +212,48 @@ const avatarGroupSlotRecipe = defineSlotRecipe({
       cursor: 'var(--mp-avatar-group--cursor)',
       _nextTheme: {
         color: 'text.inverse',
-        backgroundColor: 'background.brand.bold',
+        backgroundColor: 'background.brand.bold'
       }
     }
   },
   variants: {
     size: {
       sm: {
-        root: { 
+        root: {
           '& > [data-pixel-component=MpAvatar]': {
-            width: '6.5', height: '6.5', fontSize: 'sm'
+            width: '6.5',
+            height: '6.5',
+            fontSize: 'sm'
           }
         },
         excess: { width: '5', height: '5', fontSize: 'sm' }
       },
       md: {
-        root: { 
+        root: {
           '& > [data-pixel-component=MpAvatar]': {
-            width: '7', height: '7', fontSize: 'md'
+            width: '7',
+            height: '7',
+            fontSize: 'md'
           }
         },
         excess: { width: '6', height: '6', fontSize: 'md' }
       },
       lg: {
-        root: { 
+        root: {
           '& > [data-pixel-component=MpAvatar]': {
-            width: '9.5', height: '9.5', fontSize: 'sm'
+            width: '9.5',
+            height: '9.5',
+            fontSize: 'sm'
           }
         },
         excess: { width: '9', height: '9', fontSize: 'sm' }
       },
       xl: {
-        root: { 
+        root: {
           '& > [data-pixel-component=MpAvatar]': {
-            width: '82px', height: '82px', fontSize: '32px'
+            width: '82px',
+            height: '82px',
+            fontSize: '32px'
           }
         },
         excess: { width: '20', height: '20', fontSize: '32px' }

package/src/recipes/badge.ts

@@ -8,7 +8,7 @@ const badgeRecipe = defineRecipe<RecipeVariantRecord>({
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: '999px',
+    borderRadius: '999px'
   },
 
   variants: {
@@ -17,8 +17,8 @@ const badgeRecipe = defineRecipe<RecipeVariantRecord>({
         color: 'white'
       },
       subtle: {},
-      'additionalInformation': {},
-      'tableStatus': {},
+      additionalInformation: {},
+      tableStatus: {},
       indicator: {}
     },
     variantColor: {
@@ -39,13 +39,13 @@ const badgeRecipe = defineRecipe<RecipeVariantRecord>({
         fontSize: 'xs',
         fontWeight: 'semiBold',
         lineHeight: '0',
-        letterSpacing: 'normal',
+        letterSpacing: 'normal'
       },
       md: {
         fontSize: 'md',
         fontWeight: 'regular',
         lineHeight: '0',
-        letterSpacing: 'normal',
+        letterSpacing: 'normal'
       }
     }
   },
@@ -151,7 +151,7 @@ const badgeRecipe = defineRecipe<RecipeVariantRecord>({
       }
     },
     {
-      variant: ['solid', 'additionalInformation']  ,
+      variant: ['solid', 'additionalInformation'],
       variantColor: ['gray', 'announcement'],
       css: {
         backgroundColor: 'stone.400',
@@ -280,7 +280,7 @@ const badgeRecipe = defineRecipe<RecipeVariantRecord>({
           backgroundColor: 'icon.default'
         }
       }
-    },
+    }
   ],
 
   defaultVariants: {

package/src/recipes/banner.ts

@@ -23,15 +23,15 @@ const bannerSlotRecipe = defineSlotRecipe({
   variants: {
     variant: {
       info: {
-        root: { 
+        root: {
           backgroundColor: 'blue.50',
           _nextTheme: {
-            backgroundColor: 'background.brand',
+            backgroundColor: 'background.brand'
           }
         }
       },
       success: {
-        root: { 
+        root: {
           backgroundColor: 'green.50',
           _nextTheme: {
             backgroundColor: 'background.success'
@@ -39,7 +39,7 @@ const bannerSlotRecipe = defineSlotRecipe({
         }
       },
       danger: {
-        root: { 
+        root: {
           backgroundColor: 'red.50',
           _nextTheme: {
             backgroundColor: 'background.danger'
@@ -47,7 +47,7 @@ const bannerSlotRecipe = defineSlotRecipe({
         }
       },
       warning: {
-        root: { 
+        root: {
           backgroundColor: 'orange.50',
           _nextTheme: {
             backgroundColor: 'background.warning'
@@ -74,7 +74,7 @@ const bannerTitleRecipe = defineRecipe({
     color: 'dark',
     marginBottom: '1',
     _nextTheme: {
-      color: 'text.default',
+      color: 'text.default'
     }
   },
   variants: {},
@@ -93,7 +93,7 @@ const bannerDescriptionRecipe = defineRecipe({
     letterSpacing: 'normal',
     color: 'dark',
     _nextTheme: {
-      color: 'text.default',
+      color: 'text.default'
     }
   },
   variants: {},