@bitrix24/b24ui-nuxt 0.7.1 → 1.0.1

package/.nuxt/b24ui/accordion.ts

@@ -1,11 +1,11 @@
 export default {
   "slots": {
     "root": "w-full",
-    "item": "border-b border-default last:border-b-0",
+    "item": "text-(--b24ui-typography-label-color) border-b border-(--ui-color-divider-vibrant-accent-more) last:border-b-0",
     "header": "flex",
-    "trigger": "group flex-1 flex items-center gap-1.5 font-medium text-sm py-3 focus-visible:outline-primary min-w-0 cursor-pointer",
+    "trigger": "min-w-0 group flex-1 flex items-center gap-1.5 py-3 font-(--ui-font-weight-medium) text-(length:--ui-font-size-sm) focus-visible:outline-(--ui-color-accent-soft-element-blue) cursor-pointer",
     "content": "motion-safe:data-[state=open]:animate-[accordion-down_200ms_ease-out] motion-safe:data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none",
-    "body": "text-sm pb-3",
+    "body": "text-(length:--ui-font-size-sm) pb-3",
     "leadingIcon": "shrink-0 size-5",
     "trailingIcon": "shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200",
     "label": "text-start break-words"

package/.nuxt/b24ui/advice.ts

@@ -5,15 +5,16 @@ const angle = [
 
 export default {
   "slots": {
-    "root": "flex items-end",
+    "root": "light style-outline-accent-1 flex items-end",
     "descriptionWrapper": "relative",
-    "descriptionBorder": "fill-blue-500 dark:fill-blue-300",
-    "descriptionBg": "fill-white dark:fill-base-900",
+    "descriptionBorder": "fill-(--b24ui-border-color)",
+    "descriptionBg": "fill-(--b24ui-background) dark:fill-(--ui-color-base-6)",
     "descriptionAngle": "absolute w-[14px] h-[12px]",
-    "description": "grow w-11/12 py-3 px-md2 ms-2 rounded-[23px] font-b24-secondary text-md leading-md font-normal border-1 border-blue-500 bg-white text-base-950 dark:border-blue-300 dark:bg-base-900 dark:text-base-200",
-    "leading": "me-1.5 ms-2",
+    "description": "grow w-11/12 py-3 px-md2 ms-2 rounded-[23px] font-[family-name:var(--ui-font-family-secondary)] text-(length:--ui-font-size-md)/(--ui-font-line-height-md) font-(--ui-font-weight-normal) border-1 border-(--b24ui-border-color) bg-(--b24ui-background) text-(--b24ui-color) dark:bg-(--ui-color-base-6)",
+    "leading": "me-1.5 ms-2 font-(--ui-font-weight-medium) text-(--ui-color-design-plain-content-icon-secondary)",
     "leadingIcon": "shrink-0 size-[42px]",
     "leadingAvatar": "shrink-0",
+    "leadingAvatarIcon": "text-(--b24ui-typography-label-color) bg-(--ui-color-base-8)",
     "leadingAvatarSize": "lg"
   },
   "variants": {

package/.nuxt/b24ui/alert.ts

@@ -1,4 +1,15 @@
 const color = [
+  "air-primary",
+  "air-primary-success",
+  "air-primary-alert",
+  "air-primary-copilot",
+  "air-primary-warning",
+  "air-secondary",
+  "air-secondary-alert",
+  "air-secondary-accent",
+  "air-secondary-accent-1",
+  "air-secondary-accent-2",
+  "air-tertiary",
   "default",
   "danger",
   "success",
@@ -16,8 +27,8 @@ const size = [
 
 export default {
   "slots": {
-    "root": "relative overflow-hidden w-full rounded-3xs flex",
-    "wrapper": "min-w-0 flex-1 flex flex-col font-b24-primary font-normal",
+    "root": "relative overflow-hidden w-full flex text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) rounded-(--ui-border-radius-md)",
+    "wrapper": "min-w-0 flex-1 flex flex-col font-[family-name:var(--ui-font-family-primary)]",
     "title": "font-bold",
     "description": "",
     "icon": "shrink-0 size-6",
@@ -28,74 +39,75 @@ export default {
   },
   "variants": {
     "color": {
+      "air-primary": {
+        "root": "style-filled"
+      },
+      "air-primary-success": {
+        "root": "style-filled-success"
+      },
+      "air-primary-alert": {
+        "root": "style-filled-alert"
+      },
+      "air-primary-copilot": {
+        "root": "style-filled-copilot"
+      },
+      "air-primary-warning": {
+        "root": "style-filled-warning"
+      },
+      "air-secondary": {
+        "root": "style-tinted"
+      },
+      "air-secondary-alert": {
+        "root": "style-tinted-alert"
+      },
+      "air-secondary-accent": {
+        "root": "style-outline"
+      },
+      "air-secondary-accent-1": {
+        "root": "style-outline-accent-1"
+      },
+      "air-secondary-accent-2": {
+        "root": "style-outline-accent-2"
+      },
+      "air-tertiary": {
+        "root": "style-outline-no-accent"
+      },
       "default": {
-        "root": [
-          "text-base-950 bg-base-200",
-          "dark:text-base-950 dark:bg-base-200"
-        ],
-        "close": "text-base-800 dark:text-base-800 hover:text-base-950 dark:hover:text-base-950"
+        "root": "style-old-default"
       },
       "danger": {
-        "root": [
-          "text-red-700 bg-red-200",
-          "dark:text-red-700 dark:bg-red-300"
-        ],
-        "close": "text-red-700 dark:text-red-700 hover:text-red-800 dark:hover:text-red-800"
+        "root": "style-old-danger"
       },
       "success": {
-        "root": [
-          "text-green-780 bg-green-200",
-          "dark:text-green-780 dark:bg-green-300"
-        ],
-        "close": "text-green-780 dark:text-green-780 hover:text-green-800 dark:hover:text-green-800"
+        "root": "style-old-success"
       },
       "warning": {
-        "root": [
-          "text-orange-700 bg-orange-200",
-          "dark:text-orange-750 dark:bg-orange-300"
-        ],
-        "close": "text-orange-700 dark:text-orange-750 hover:text-orange-800 dark:hover:text-orange-800"
+        "root": "style-old-warning"
       },
       "primary": {
-        "root": [
-          "text-blue-700 bg-blue-200",
-          "dark:text-blue-700 dark:bg-blue-300"
-        ],
-        "close": "text-blue-700 dark:text-blue-700 hover:text-blue-800 dark:hover:text-blue-800"
+        "root": "style-old-primary"
       },
       "secondary": {
-        "root": [
-          "text-cyan-700 bg-cyan-150",
-          "dark:text-cyan-750 dark:bg-cyan-300"
-        ],
-        "close": "text-cyan-700 dark:text-cyan-750 hover:text-cyan-800 dark:hover:text-cyan-800"
+        "root": "style-old-secondary"
       },
       "collab": {
-        "root": [
-          "text-collab-700 bg-collab-200",
-          "dark:text-collab-700 dark:bg-collab-300"
-        ],
-        "close": "text-collab-700 dark:text-collab-700 hover:text-collab-800 dark:hover:text-collab-800"
+        "root": "style-old-collab"
       },
       "ai": {
-        "root": [
-          "text-ai-700 bg-ai-200",
-          "dark:text-ai-700 dark:bg-ai-300"
-        ],
-        "close": "text-ai-700 dark:text-ai-700 hover:text-ai-800 dark:hover:text-ai-800"
+        "root": "style-old-ai"
       }
     },
     "size": {
       "sm": {
         "root": "py-xs ps-sm pe-xs gap-2",
-        "title": "text-sm leading-normal",
-        "description": "text-sm leading-normal",
+        "title": "text-(length:--ui-font-size-sm)/(--ui-font-line-height-lg)",
+        "description": "text-(length:--ui-font-size-sm)/(--ui-font-line-height-lg)",
         "avatarSize": "md"
       },
       "md": {
         "root": "py-md ps-md pe-xs gap-2.5",
-        "title": "text-md leading-none",
-        "description": "text-md leading-[17px]",
+        "title": "text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)",
+        "description": "text-(length:--ui-font-size-md)/(--ui-font-line-height-3xs)",
         "avatarSize": "xl"
       }
     },
@@ -113,11 +125,52 @@ export default {
       "true": {
         "description": "mt-1"
       }
+    },
+    "inverted": {
+      "true": "",
+      "false": ""
     }
   },
-  "compoundVariants": [],
+  "compoundVariants": [
+    {
+      "inverted": true,
+      "color": "air-primary" as typeof color[number],
+      "class": {
+        "root": "style-filled-inverted"
+      }
+    },
+    {
+      "inverted": true,
+      "color": "air-primary-success" as typeof color[number],
+      "class": {
+        "root": "style-filled-success-inverted"
+      }
+    },
+    {
+      "inverted": true,
+      "color": "air-primary-alert" as typeof color[number],
+      "class": {
+        "root": "style-filled-alert-inverted"
+      }
+    },
+    {
+      "inverted": true,
+      "color": "air-primary-copilot" as typeof color[number],
+      "class": {
+        "root": "style-filled-copilot-inverted"
+      }
+    },
+    {
+      "inverted": true,
+      "color": "air-primary-warning" as typeof color[number],
+      "class": {
+        "root": "style-filled-warning-inverted"
+      }
+    }
+  ],
   "defaultVariants": {
-    "color": "default" as typeof color[number],
-    "size": "md" as typeof size[number]
+    "color": "air-secondary-accent" as typeof color[number],
+    "size": "md" as typeof size[number],
+    "inverted": false
   }
 }

package/.nuxt/b24ui/avatar-group.ts

@@ -13,36 +13,36 @@ const size = [
 export default {
   "slots": {
     "root": "inline-flex justify-end",
-    "base": "relative rounded-full ring-white dark:ring-base-700 last:me-0"
+    "base": "relative rounded-full last:me-0"
   },
   "variants": {
     "size": {
       "3xs": {
-        "base": "ring -me-0.5"
+        "base": "-me-0.5"
       },
       "2xs": {
-        "base": "ring -me-0.5"
+        "base": "-me-0.5"
       },
       "xs": {
-        "base": "ring -me-0.5"
+        "base": "-me-0.5"
       },
       "sm": {
-        "base": "ring -me-1.5"
+        "base": "-me-1.5"
       },
       "md": {
-        "base": "ring-2 -me-1.5"
+        "base": "-me-1.5"
       },
       "lg": {
-        "base": "ring-2 -me-1.5"
+        "base": "-me-1.5"
       },
       "xl": {
-        "base": "ring-3 -me-2"
+        "base": "-me-2"
       },
       "2xl": {
-        "base": "ring-3 -me-2"
+        "base": "-me-2"
       },
       "3xl": {
-        "base": "ring-3 -me-2"
+        "base": "-me-2"
       }
     }
   },

package/.nuxt/b24ui/avatar.ts

@@ -12,47 +12,47 @@ const size = [
 
 export default {
   "slots": {
-    "root": "inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-base-100 dark:bg-base-900",
+    "root": "air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7)",
     "image": "h-full w-full rounded-[inherit] object-cover",
-    "fallback": "font-medium text-base-500 dark:text-base-600 truncate",
-    "icon": "text-base-500 shrink-0 dark:text-base-600"
+    "fallback": "font-(--ui-font-weight-medium) text-(--ui-color-design-plain-content-icon-secondary) truncate",
+    "icon": "text-(--ui-color-design-plain-content-icon-secondary) shrink-0"
   },
   "variants": {
     "size": {
       "3xs": {
-        "root": "size-xs2 text-4xs font-regular",
-        "icon": "size-xs2"
+        "root": "size-[10px] text-4xs font-(--ui-font-weight-regular)",
+        "icon": "size-[10px]"
       },
       "2xs": {
-        "root": "size-5 text-4xs font-regular",
-        "icon": "size-5"
+        "root": "size-[20px] text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular)",
+        "icon": "size-[20px]"
       },
       "xs": {
-        "root": "size-6 text-3xs font-regular",
-        "icon": "size-6"
+        "root": "size-[24px] text-(length:--ui-font-size-3xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular)",
+        "icon": "size-[24px]"
       },
       "sm": {
-        "root": "size-7 text-xs",
-        "icon": "size-7"
+        "root": "size-[28px] text-(length:--ui-font-size-xs)/(--ui-font-line-height-reset)",
+        "icon": "size-[28px]"
       },
       "md": {
-        "root": "size-8 text-sm",
-        "icon": "size-8"
+        "root": "size-[32px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)",
+        "icon": "size-[32px]"
       },
       "lg": {
-        "root": "size-[42px] text-2xl",
+        "root": "size-[42px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)",
         "icon": "size-[42px]"
       },
       "xl": {
-        "root": "size-12 text-2xl",
-        "icon": "size-12"
+        "root": "ring-2 size-[48px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)",
+        "icon": "size-[48px]"
       },
       "2xl": {
-        "root": "size-[60px] text-5xl",
+        "root": "ring-2 size-[60px] text-(length:--ui-font-size-5xl)/(--ui-font-line-height-reset)",
         "icon": "size-[60px]"
       },
       "3xl": {
-        "root": "size-[94px] text-[34px]",
+        "root": "ring-2 size-[94px] text-[34px]/(--ui-font-line-height-reset)",
         "icon": "size-[94px]"
       }
     }