@bitrix24/b24ui-nuxt 0.7.1 → 1.0.1

package/.nuxt/b24ui/badge.ts

@@ -4,6 +4,18 @@ const buttonGroup = [
 ] as const
 
 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",
+  "air-selection",
   "default",
   "danger",
   "success",
@@ -14,13 +26,8 @@ const color = [
   "ai"
 ] as const
 
-const depth = [
-  "light",
-  "normal",
-  "dark"
-] as const
-
 const size = [
+  "xss",
   "xs",
   "sm",
   "md",
@@ -30,13 +37,13 @@ const size = [
 
 export default {
   "slots": {
-    "base": "select-none font-b24-secondary font-normal inline-flex items-center transition-all duration-200 ease-linear px-2 leading-normal rounded-md",
-    "wrapper": "inline-flex items-center",
+    "base": "ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width)",
+    "wrapper": "h-(--ui-label-height) inline-flex items-center",
     "label": "max-w-full whitespace-nowrap text-ellipsis decoration-from-font",
     "leadingIcon": "shrink-0",
     "leadingAvatar": "shrink-0",
     "leadingAvatarSize": "",
-    "trailingIcon": "shrink-0 cursor-pointer hover:rounded-full hover:bg-current/20 dark:hover:bg-current/35"
+    "trailingIcon": "shrink-0 cursor-pointer hover:rounded-(--ui-border-radius-circle) hover:bg-current/20"
   },
   "variants": {
     "buttonGroup": {
@@ -54,201 +61,194 @@ export default {
       }
     },
     "useClose": {
-      "true": "pe-2xs"
-    },
-    "useFill": {
-      "true": "",
-      "false": "bg-transparent"
+      "true": "pe-2xs",
+      "false": ""
     },
     "leading": {
-      "true": "ps-1"
+      "true": "ps-1",
+      "false": ""
     },
     "color": {
-      "default": "",
-      "danger": "",
-      "success": "",
-      "warning": "",
-      "primary": "",
-      "secondary": "",
-      "collab": "",
-      "ai": ""
-    },
-    "depth": {
-      "light": "font-normal",
-      "normal": "font-bold",
-      "dark": "font-bold"
+      "air-primary": {
+        "base": "style-filled"
+      },
+      "air-primary-success": {
+        "base": "style-filled-success"
+      },
+      "air-primary-alert": {
+        "base": "style-filled-alert"
+      },
+      "air-primary-copilot": {
+        "base": "style-filled-copilot"
+      },
+      "air-primary-warning": {
+        "base": "style-filled-warning"
+      },
+      "air-secondary": {
+        "base": "style-tinted"
+      },
+      "air-secondary-alert": {
+        "base": "style-tinted-alert"
+      },
+      "air-secondary-accent": {
+        "base": "style-outline"
+      },
+      "air-secondary-accent-1": {
+        "base": "style-outline-accent-1"
+      },
+      "air-secondary-accent-2": {
+        "base": "style-outline-accent-2"
+      },
+      "air-tertiary": {
+        "base": "style-outline-no-accent"
+      },
+      "air-selection": {
+        "base": "style-selection"
+      },
+      "default": {
+        "base": "style-old-default"
+      },
+      "danger": {
+        "base": "style-old-danger"
+      },
+      "success": {
+        "base": "style-old-success"
+      },
+      "warning": {
+        "base": "style-old-warning"
+      },
+      "primary": {
+        "base": "style-old-primary"
+      },
+      "secondary": {
+        "base": "style-old-secondary"
+      },
+      "collab": {
+        "base": "style-old-collab"
+      },
+      "ai": {
+        "base": "style-old-ai"
+      }
     },
     "size": {
+      "xss": {
+        "base": "ui-label-xss gap-0.5",
+        "wrapper": "gap-0.5",
+        "label": "underline-offset-1",
+        "leadingIcon": "size-[12px]",
+        "leadingAvatarSize": "3xs",
+        "trailingIcon": "size-[12px]"
+      },
       "xs": {
-        "base": "text-5xs gap-0.5",
-        "wrapper": "h-[14px] gap-0.5",
+        "base": "ui-label-xs gap-0.5",
+        "wrapper": "gap-0.5",
         "label": "underline-offset-1",
-        "leadingIcon": "size-sm",
+        "leadingIcon": "size-[12px]",
         "leadingAvatarSize": "3xs",
-        "trailingIcon": "size-sm "
+        "trailingIcon": "size-[12px]"
       },
       "sm": {
-        "base": "text-4xs gap-1",
-        "wrapper": "h-[16px] gap-1",
+        "base": "ui-label-sm gap-1",
+        "wrapper": "gap-1",
         "label": "underline-offset-1",
-        "leadingIcon": "size-sm2",
+        "leadingIcon": "size-[14px]",
         "leadingAvatarSize": "3xs",
-        "trailingIcon": "size-sm2"
+        "trailingIcon": "size-[14px]"
       },
       "md": {
-        "base": "text-3xs gap-1",
-        "wrapper": "h-[17px] gap-1",
+        "base": "ui-label-md gap-1",
+        "wrapper": "gap-1",
         "label": "underline-offset-1",
         "leadingIcon": "size-[15px]",
         "leadingAvatarSize": "3xs",
         "trailingIcon": "size-[15px]"
       },
       "lg": {
-        "base": "text-xs gap-1 rounded-lg",
-        "wrapper": "h-[24px] gap-1",
+        "base": "ui-label-lg gap-1",
+        "wrapper": "gap-1",
+        "label": "",
         "leadingIcon": "size-[22px]",
         "leadingAvatarSize": "2xs",
         "trailingIcon": "size-[22px]"
       },
       "xl": {
-        "base": "text-md gap-1 rounded-xl",
-        "wrapper": "h-[31px] gap-1",
-        "leadingIcon": "size-[26px]",
-        "leadingAvatarSize": "xs",
-        "trailingIcon": "size-[26px]"
+        "base": "ui-label-xl gap-1",
+        "wrapper": "gap-1",
+        "label": "",
+        "leadingIcon": "size-[22px]",
+        "leadingAvatarSize": "2xs",
+        "trailingIcon": "size-[22px]"
       }
     },
     "square": {
-      "true": ""
+      "true": {
+        "base": "rounded-[calc(var(--ui-label-height)_/_4)] ",
+        "wrapper": "w-(--ui-label-height)",
+        "label": "overflow-hidden"
+      },
+      "false": {
+        "base": "rounded-[calc(var(--ui-label-height)_/_2)]"
+      }
+    },
+    "inverted": {
+      "true": {
+        "base": "border-(--b24ui-color)"
+      },
+      "false": ""
     }
   },
   "compoundVariants": [
     {
-      "color": "default" as typeof color[number],
-      "depth": "light" as typeof depth[number],
-      "class": "ring ring-inset text-base-900 bg-base-100 ring-base-100 dark:text-base-900 dark:bg-base-150 dark:ring-base-150"
-    },
-    {
-      "color": "default" as typeof color[number],
-      "depth": "normal" as typeof depth[number],
-      "class": "ring ring-inset text-base-800 bg-base-150 ring-base-300 dark:text-base-950 dark:bg-base-200 dark:ring-base-800"
-    },
-    {
-      "color": "default" as typeof color[number],
-      "depth": "dark" as typeof depth[number],
-      "class": "ring ring-inset text-white bg-base-500 ring-base-500 dark:text-base-50 dark:bg-base-600 dark:ring-base-600"
-    },
-    {
-      "color": "danger" as typeof color[number],
-      "depth": "light" as typeof depth[number],
-      "class": "ring ring-inset text-red-800 bg-red-500/17 ring-red-500/17 dark:text-red-900 dark:bg-red-300 dark:ring-red-300"
-    },
-    {
-      "color": "danger" as typeof color[number],
-      "depth": "normal" as typeof depth[number],
-      "class": "ring ring-inset text-red-800 bg-red-250 ring-red-250 dark:text-red-800 dark:bg-red-350 dark:ring-red-350"
-    },
-    {
-      "color": "danger" as typeof color[number],
-      "depth": "dark" as typeof depth[number],
-      "class": "ring ring-inset text-white bg-red-500 ring-red-500 dark:text-red-250 dark:bg-red-600 dark:ring-red-600"
-    },
-    {
-      "color": "success" as typeof color[number],
-      "depth": "light" as typeof depth[number],
-      "class": "ring ring-inset text-green-800 bg-green-500/17 ring-green-500/17 dark:text-green-900 dark:bg-green-300 dark:ring-green-300"
-    },
-    {
-      "color": "success" as typeof color[number],
-      "depth": "normal" as typeof depth[number],
-      "class": "ring ring-inset text-green-800 bg-green-300 ring-green-300 dark:text-green-800 dark:bg-green-330 dark:ring-green-330"
-    },
-    {
-      "color": "success" as typeof color[number],
-      "depth": "dark" as typeof depth[number],
-      "class": "ring ring-inset text-white bg-green-500 ring-green-500 dark:text-green-250 dark:bg-green-600 dark:ring-green-600"
-    },
-    {
-      "color": "warning" as typeof color[number],
-      "depth": "light" as typeof depth[number],
-      "class": "ring ring-inset text-orange-800 bg-orange-250 ring-orange-300 dark:text-orange-900 dark:bg-orange-300 dark:ring-orange-300"
-    },
-    {
-      "color": "warning" as typeof color[number],
-      "depth": "normal" as typeof depth[number],
-      "class": "ring ring-inset text-orange-800 bg-orange-300 ring-orange-300 dark:text-orange-800 dark:bg-orange-400 dark:ring-orange-400"
-    },
-    {
-      "color": "warning" as typeof color[number],
-      "depth": "dark" as typeof depth[number],
-      "class": "ring ring-inset text-white bg-orange-500 ring-orange-500 dark:text-orange-250 dark:bg-orange-600 dark:ring-orange-600"
-    },
-    {
-      "color": "primary" as typeof color[number],
-      "depth": "light" as typeof depth[number],
-      "class": "ring ring-inset text-blue-800 bg-blue-500/17 ring-blue-500/17 dark:text-blue-900 dark:bg-blue-300 dark:ring-blue-300"
-    },
-    {
-      "color": "primary" as typeof color[number],
-      "depth": "normal" as typeof depth[number],
-      "class": "ring ring-inset text-blue-700 bg-blue-250 ring-blue-250 dark:text-blue-700 dark:bg-blue-300 dark:ring-blue-300"
-    },
-    {
-      "color": "primary" as typeof color[number],
-      "depth": "dark" as typeof depth[number],
-      "class": "ring ring-inset text-white bg-blue-500 ring-blue-500 dark:text-blue-250 dark:bg-blue-600 dark:ring-blue-600"
-    },
-    {
-      "color": "secondary" as typeof color[number],
-      "depth": "light" as typeof depth[number],
-      "class": "ring ring-inset text-base-master bg-blue-320 ring-blue-320 dark:text-base-master dark:bg-blue-400 dark:ring-blue-400"
-    },
-    {
-      "color": "secondary" as typeof color[number],
-      "depth": "normal" as typeof depth[number],
-      "class": "ring ring-inset text-white bg-cyan-350 ring-cyan-350 dark:text-cyan-100 dark:bg-cyan-400 dark:ring-cyan-400"
-    },
-    {
-      "color": "secondary" as typeof color[number],
-      "depth": "dark" as typeof depth[number],
-      "class": "ring ring-inset text-white bg-cyan-500 ring-cyan-500 dark:text-cyan-250 dark:bg-cyan-600 dark:ring-cyan-600"
-    },
-    {
-      "color": "collab" as typeof color[number],
-      "depth": "light" as typeof depth[number],
-      "class": "ring ring-inset text-collab-800 bg-collab-500/17 ring-collab-500/17 dark:text-collab-900 dark:bg-collab-300 dark:ring-collab-300"
+      "inverted": true,
+      "color": "air-primary" as typeof color[number],
+      "class": {
+        "base": "style-filled-inverted"
+      }
     },
     {
-      "color": "collab" as typeof color[number],
-      "depth": "normal" as typeof depth[number],
-      "class": "ring ring-inset text-collab-800 bg-collab-300 ring-collab-300 dark:text-collab-800 dark:bg-collab-300 dark:ring-collab-300"
+      "inverted": true,
+      "color": "air-primary-success" as typeof color[number],
+      "class": {
+        "base": "style-filled-success-inverted"
+      }
     },
     {
-      "color": "collab" as typeof color[number],
-      "depth": "dark" as typeof depth[number],
-      "class": "ring ring-inset text-white bg-collab-500 ring-collab-500 dark:text-collab-250 dark:bg-collab-600 dark:ring-collab-600"
+      "inverted": true,
+      "color": "air-primary-alert" as typeof color[number],
+      "class": {
+        "base": "style-filled-alert-inverted"
+      }
     },
     {
-      "color": "ai" as typeof color[number],
-      "depth": "light" as typeof depth[number],
-      "class": "ring ring-inset text-ai-500 bg-white ring-ai-10 dark:text-ai-500 dark:bg-ai-50 dark:ring-ai-50"
+      "inverted": true,
+      "color": "air-primary-copilot" as typeof color[number],
+      "class": {
+        "base": "style-filled-copilot-inverted"
+      }
     },
     {
-      "color": "ai" as typeof color[number],
-      "depth": "normal" as typeof depth[number],
-      "class": "ring ring-inset text-ai-500 bg-ai-150 ring-ai-150 dark:text-ai-600 dark:bg-ai-200 dark:ring-ai-200"
+      "inverted": true,
+      "color": "air-primary-warning" as typeof color[number],
+      "class": {
+        "base": "style-filled-warning-inverted"
+      }
     },
     {
-      "color": "ai" as typeof color[number],
-      "depth": "dark" as typeof depth[number],
-      "class": "ring ring-inset text-white bg-ai-330 ring-ai-330 dark:text-ai-100 dark:bg-ai-400 dark:ring-ai-400"
+      "size": "xss" as typeof size[number],
+      "square": true,
+      "class": {
+        "base": "p-0 ps-0 pe-0",
+        "wrapper": "px-[2px] gap-0",
+        "leadingIcon": "size-[6px]"
+      }
     },
     {
       "size": "xs" as typeof size[number],
       "square": true,
       "class": {
         "base": "p-0 ps-0 pe-0",
-        "wrapper": "p-0.5 gap-0"
+        "wrapper": "px-[2px] gap-0",
+        "leadingIcon": "size-[10px]"
       }
     },
     {
@@ -256,7 +256,8 @@ export default {
       "square": true,
       "class": {
         "base": "p-0 ps-0 pe-0",
-        "wrapper": "p-1 gap-0"
+        "wrapper": "p-[1px] gap-0",
+        "leadingIcon": "size-[16px]"
       }
     },
     {
@@ -264,7 +265,8 @@ export default {
       "square": true,
       "class": {
         "base": "p-0 ps-0 pe-0",
-        "wrapper": "p-1 gap-0"
+        "wrapper": "p-[1px] gap-0",
+        "leadingIcon": "size-[18px]"
       }
     },
     {
@@ -272,7 +274,8 @@ export default {
       "square": true,
       "class": {
         "base": "p-0 ps-0 pe-0",
-        "wrapper": "p-1 gap-0"
+        "wrapper": "p-[1px] gap-0",
+        "leadingIcon": "size-[23px]"
       }
     },
     {
@@ -280,34 +283,22 @@ export default {
       "square": true,
       "class": {
         "base": "p-0 ps-0 pe-0",
-        "wrapper": "p-1 gap-0"
+        "wrapper": "p-[1px] gap-0",
+        "leadingIcon": "size-[28px]"
       }
     },
-    {
-      "useLink": true,
-      "useFill": false,
-      "class": ""
-    },
-    {
-      "useFill": false,
-      "class": "text-base-800 dark:text-base-250 bg-transparent dark:bg-transparent"
-    },
-    {
-      "useClose": true,
-      "class": ""
-    },
     {
       "buttonGroup": [
         "horizontal" as typeof buttonGroup[number],
         "vertical" as typeof buttonGroup[number]
       ],
-      "class": "rounded-2xs"
+      "class": "rounded-(--ui-border-radius-md)"
     }
   ],
   "defaultVariants": {
-    "color": "default" as typeof color[number],
-    "depth": "normal" as typeof depth[number],
+    "color": "air-primary" as typeof color[number],
     "size": "md" as typeof size[number],
-    "useFill": false
+    "square": false,
+    "inverted": false
   }
 }

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

@@ -2,10 +2,12 @@ export default {
   "base": "relative",
   "variants": {
     "size": {
+      "xss": "",
       "xs": "",
       "sm": "",
       "md": "",
-      "lg": ""
+      "lg": "",
+      "xl": ""
     },
     "orientation": {
       "horizontal": "flex flex-row -space-x-px",