@bitrix24/b24ui-nuxt 0.7.2 → 1.0.1

package/.nuxt/b24ui/switch.ts

@@ -1,4 +1,9 @@
 const color = [
+  "air-primary",
+  "air-primary-success",
+  "air-primary-alert",
+  "air-primary-copilot",
+  "air-primary-warning",
   "default",
   "danger",
   "success",
@@ -19,78 +24,84 @@ const size = [
 export default {
   "slots": {
     "root": "relative flex items-start",
-    "base": "cursor-pointer inline-flex items-center shrink-0 rounded-full border-2 border-transparent data-[state=unchecked]:bg-base-200 dark:data-[state=unchecked]:bg-base-800 outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200",
+    "base": "cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color)",
     "container": "flex items-center",
-    "thumb": "group pointer-events-none rounded-full bg-white dark:bg-base-100 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center",
-    "icon": "absolute shrink-0 group-data-[state=unchecked]:text-base-400 dark:group-data-[state=unchecked]:text-base-700 opacity-0 p-0.5 size-10/10 transition-[color,opacity] duration-200",
-    "wrapper": "font-b24-primary font-regular ms-2",
-    "label": "cursor-pointer block text-base-master dark:text-base-400",
-    "description": "text-base-500 dark:text-base-600"
+    "thumb": "group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0",
+    "icon": "absolute shrink-0 group-data-[state=unchecked]:text-(--ui-color-base-5) edge-dark:group-data-[state=unchecked]:text-(--ui-color-gray-60) opacity-0 p-0.5 size-full transition-[color,opacity] duration-200 group-data-[state=checked]:text-(--b24ui-background)",
+    "wrapper": "font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) ms-2",
+    "label": "cursor-pointer block text-(--b24ui-typography-label-color)",
+    "description": "text-(--b24ui-typography-description-color)"
   },
   "variants": {
     "color": {
+      "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"
+      },
       "default": {
-        "base": "data-[state=checked]:bg-base-900 focus-visible:outline-base-900 dark:data-[state=checked]:bg-base-100 dark:focus-visible:outline-base-100",
-        "icon": "group-data-[state=checked]:text-base-900 dark:group-data-[state=checked]:text-base-900",
-        "thumb": "dark:data-[state=checked]:bg-base-master"
+        "base": "style-old-default"
       },
       "danger": {
-        "base": "data-[state=checked]:bg-red-500 focus-visible:outline-red-500 dark:data-[state=checked]:bg-red-600 dark:focus-visible:outline-red-600",
-        "icon": "group-data-[state=checked]:text-red-500 dark:group-data-[state=checked]:text-red-600"
+        "base": "style-old-danger"
       },
       "success": {
-        "base": "data-[state=checked]:bg-green-500 focus-visible:outline-green-500 dark:data-[state=checked]:bg-green-600 dark:focus-visible:outline-green-600",
-        "icon": "group-data-[state=checked]:text-green-500 dark:group-data-[state=checked]:text-green-600"
+        "base": "style-old-success"
       },
       "warning": {
-        "base": "data-[state=checked]:bg-orange-500 focus-visible:outline-orange-500 dark:data-[state=checked]:bg-orange-600 dark:focus-visible:outline-orange-600",
-        "icon": "group-data-[state=checked]:text-orange-500 dark:group-data-[state=checked]:text-orange-600"
+        "base": "style-old-warning"
       },
       "primary": {
-        "base": "data-[state=checked]:bg-blue-500 focus-visible:outline-blue-500 dark:data-[state=checked]:bg-blue-600 dark:focus-visible:outline-blue-600",
-        "icon": "group-data-[state=checked]:text-blue-500 dark:group-data-[state=checked]:text-blue-600"
+        "base": "style-old-primary"
       },
       "secondary": {
-        "base": "data-[state=checked]:bg-cyan-350 focus-visible:outline-cyan-350 dark:data-[state=checked]:bg-cyan-500 dark:focus-visible:outline-cyan-500",
-        "icon": "group-data-[state=checked]:text-cyan-350 dark:group-data-[state=checked]:text-cyan-500"
+        "base": "style-old-secondary"
       },
       "collab": {
-        "base": "data-[state=checked]:bg-collab-500 focus-visible:outline-collab-500 dark:data-[state=checked]:bg-collab-600 dark:focus-visible:outline-collab-600",
-        "icon": "group-data-[state=checked]:text-collab-500 dark:group-data-[state=checked]:text-collab-600"
+        "base": "style-old-collab"
       },
       "ai": {
-        "base": "data-[state=checked]:bg-ai-500 focus-visible:outline-ai-500 dark:data-[state=checked]:bg-ai-600 dark:focus-visible:outline-ai-600",
-        "icon": "group-data-[state=checked]:text-ai-500 dark:group-data-[state=checked]:text-ai-600"
+        "base": "style-old-ai"
       }
     },
     "size": {
       "xs": {
-        "base": "w-7",
-        "container": "h-4",
-        "thumb": "size-3 data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3",
-        "wrapper": "text-xs",
-        "label": "leading-4"
+        "base": "w-[28px]",
+        "container": "h-[16px]",
+        "thumb": "size-[12px] data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3",
+        "wrapper": "text-(length:--ui-font-size-xs)",
+        "label": "leading-[16px]"
       },
       "sm": {
-        "base": "w-8",
-        "container": "h-4",
-        "thumb": "size-3.5 data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5",
-        "wrapper": "text-sm",
-        "label": "leading-4"
+        "base": "w-[32px]",
+        "container": "h-[16px]",
+        "thumb": "size-[14px] data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5",
+        "wrapper": "text-(length:--ui-font-size-sm)",
+        "label": "leading-[16px]"
       },
       "md": {
-        "base": "w-9",
-        "container": "h-5",
-        "thumb": "size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4",
-        "wrapper": "text-md",
-        "label": "leading-5"
+        "base": "w-[36px]",
+        "container": "h-[20px]",
+        "thumb": "size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4",
+        "wrapper": "text-(length:--ui-font-size-md)",
+        "label": "leading-[20px]"
       },
       "lg": {
-        "base": "w-10",
-        "container": "h-5",
-        "thumb": "size-5 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4",
-        "wrapper": "text-xl",
-        "label": "leading-5"
+        "base": "w-[40px]",
+        "container": "h-[20px]",
+        "thumb": "size-[20px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4",
+        "wrapper": "text-(length:--ui-font-size-xl)",
+        "label": "leading-[20px]"
       }
     },
     "checked": {
@@ -110,19 +121,19 @@ export default {
     },
     "required": {
       "true": {
-        "label": "after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-600"
+        "label": "after:content-['*'] after:ms-0.5 after:text-(--ui-color-accent-main-alert)"
       }
     },
     "disabled": {
       "true": {
-        "base": "cursor-not-allowed opacity-75",
-        "label": "cursor-not-allowed opacity-75",
-        "description": "cursor-not-allowed opacity-75"
+        "base": "cursor-not-allowed opacity-30",
+        "label": "cursor-not-allowed opacity-30",
+        "description": "cursor-not-allowed opacity-30"
       }
     }
   },
   "defaultVariants": {
-    "color": "primary" as typeof color[number],
+    "color": "air-primary" as typeof color[number],
     "size": "md" as typeof size[number]
   }
 }

package/.nuxt/b24ui/tabs.ts

@@ -1,16 +1,4 @@
-const color = [
-  "default",
-  "danger",
-  "success",
-  "warning",
-  "primary",
-  "secondary",
-  "collab",
-  "ai"
-] as const
-
 const variant = [
-  "pill",
   "link"
 ] as const
 
@@ -20,6 +8,7 @@ const orientation = [
 ] as const
 
 const size = [
+  "xss",
   "xs",
   "sm",
   "md",
@@ -29,36 +18,26 @@ const size = [
 
 export default {
   "slots": {
-    "root": "flex items-center gap-2",
+    "root": [
+      "style-outline-accent-2",
+      "flex items-center gap-2"
+    ],
     "list": "relative flex p-1 group",
     "indicator": "absolute transition-[translate,width] duration-200",
-    "trigger": "group relative inline-flex items-center min-w-0 data-[state=inactive]:text-base-600 dark:data-[state=inactive]:text-base-600 hover:data-[state=inactive]:not-disabled:text-base-master dark:hover:data-[state=inactive]:not-disabled:text-base-150 font-medium rounded-xl cursor-pointer disabled:cursor-not-allowed disabled:opacity-75 transition-colors",
-    "content": "focus:outline-none w-full",
+    "trigger": "group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-color-design-plain-na-content) hover:data-[state=inactive]:not-disabled:text-(--ui-color-design-selection-content) font-(--ui-font-weight-medium) cursor-pointer disabled:cursor-not-allowed disabled:opacity-30 transition-colors rounded-(--ui-border-radius-md)",
     "leadingIcon": "shrink-0",
     "leadingAvatar": "shrink-0",
     "leadingAvatarSize": "",
-    "label": ""
+    "label": "",
+    "trailingBadge": "shrink-0",
+    "trailingBadgeSize": "sm",
+    "content": "focus:outline-none w-full"
   },
   "variants": {
-    "color": {
-      "default": "",
-      "danger": "",
-      "success": "",
-      "warning": "",
-      "primary": "",
-      "secondary": "",
-      "collab": "",
-      "ai": ""
-    },
     "variant": {
-      "pill": {
-        "list": "bg-base-100 dark:bg-transparent rounded-md",
-        "trigger": "grow",
-        "indicator": "rounded-xl shadow-xs"
-      },
       "link": {
-        "list": "border-base-300 dark:border-base-800",
-        "indicator": "rounded-full",
+        "list": "border-(--ui-color-divider-vibrant-accent-more)",
+        "indicator": "rounded-(--ui-border-radius-pill)",
         "trigger": "focus:outline-none"
       }
     },
@@ -75,41 +54,39 @@ export default {
       }
     },
     "size": {
+      "xss": {
+        "trigger": "px-2 py-1 text-(length:--ui-font-size-4xs)/[normal] gap-1",
+        "leadingIcon": "size-4",
+        "leadingAvatarSize": "3xs"
+      },
       "xs": {
-        "trigger": "px-2 py-1 text-xs gap-1",
+        "trigger": "px-2 py-1 text-(length:--ui-font-size-xs)/[normal] gap-1",
         "leadingIcon": "size-4",
         "leadingAvatarSize": "3xs"
       },
       "sm": {
-        "trigger": "px-2.5 py-1.5 text-xs gap-1.5",
+        "trigger": "px-2.5 py-1.5 text-(length:--ui-font-size-sm)/[normal] gap-1.5",
         "leadingIcon": "size-4",
         "leadingAvatarSize": "3xs"
       },
       "md": {
-        "trigger": "px-3 py-1.5 text-sm gap-1.5",
+        "trigger": "px-3 py-1.5 text-(length:--ui-font-size-md)/[normal] gap-1.5",
         "leadingIcon": "size-5",
         "leadingAvatarSize": "2xs"
       },
       "lg": {
-        "trigger": "px-3 py-2 text-sm gap-2",
+        "trigger": "px-3 py-2 text-(length:--ui-font-size-lg)/[normal] gap-2",
         "leadingIcon": "size-5",
         "leadingAvatarSize": "2xs"
       },
       "xl": {
-        "trigger": "px-3 py-2 text-base gap-2",
+        "trigger": "px-3 py-2 text-(length:--ui-font-size-xl)/[normal] gap-2",
         "leadingIcon": "size-6",
         "leadingAvatarSize": "xs"
       }
     }
   },
   "compoundVariants": [
-    {
-      "orientation": "horizontal" as typeof orientation[number],
-      "variant": "pill" as typeof variant[number],
-      "class": {
-        "indicator": "inset-y-1"
-      }
-    },
     {
       "orientation": "horizontal" as typeof orientation[number],
       "variant": "link" as typeof variant[number],
@@ -118,14 +95,6 @@ export default {
         "indicator": "-bottom-px h-px"
       }
     },
-    {
-      "orientation": "vertical" as typeof orientation[number],
-      "variant": "pill" as typeof variant[number],
-      "class": {
-        "indicator": "inset-x-1",
-        "list": "items-center"
-      }
-    },
     {
       "orientation": "vertical" as typeof orientation[number],
       "variant": "link" as typeof variant[number],
@@ -135,200 +104,18 @@ export default {
       }
     },
     {
-      "color": "default" as typeof color[number],
-      "variant": "pill" as typeof variant[number],
-      "class": {
-        "indicator": "bg-base-900 dark:bg-base-900",
-        "trigger": [
-          "data-[state=active]:text-white focus-visible:outline-base-900",
-          "dark:data-[state=active]:text-base-200 dark:focus-visible:outline-base-900",
-          "focus-visible:outline-2 focus-visible:outline-offset-2]"
-        ]
-      }
-    },
-    {
-      "color": "default" as typeof color[number],
-      "variant": "link" as typeof variant[number],
-      "class": {
-        "indicator": "bg-base-900 dark:dark:bg-base-350",
-        "trigger": [
-          "focus-visible:ring-2 focus-visible:ring-inset",
-          "data-[state=active]:text-base-900 focus-visible:ring-base-900",
-          "dark:data-[state=active]:text-base-350 dark:focus-visible:ring-base-350"
-        ]
-      }
-    },
-    {
-      "color": "danger" as typeof color[number],
-      "variant": "pill" as typeof variant[number],
-      "class": {
-        "indicator": "bg-red-900 dark:bg-red-900",
-        "trigger": [
-          "data-[state=active]:text-white focus-visible:outline-red-900",
-          "dark:data-[state=active]:text-red-200 dark:focus-visible:outline-red-900",
-          "focus-visible:outline-2 focus-visible:outline-offset-2]"
-        ]
-      }
-    },
-    {
-      "color": "danger" as typeof color[number],
-      "variant": "link" as typeof variant[number],
-      "class": {
-        "indicator": "bg-red-900 dark:dark:bg-red-300",
-        "trigger": [
-          "focus-visible:ring-2 focus-visible:ring-inset",
-          "data-[state=active]:text-red-900 focus-visible:ring-red-900",
-          "dark:data-[state=active]:text-red-300 dark:focus-visible:ring-red-300"
-        ]
-      }
-    },
-    {
-      "color": "success" as typeof color[number],
-      "variant": "pill" as typeof variant[number],
-      "class": {
-        "indicator": "bg-green-900 dark:bg-green-900",
-        "trigger": [
-          "data-[state=active]:text-white focus-visible:outline-green-900",
-          "dark:data-[state=active]:text-green-200 dark:focus-visible:outline-green-900",
-          "focus-visible:outline-2 focus-visible:outline-offset-2]"
-        ]
-      }
-    },
-    {
-      "color": "success" as typeof color[number],
-      "variant": "link" as typeof variant[number],
-      "class": {
-        "indicator": "bg-green-900 dark:dark:bg-green-300",
-        "trigger": [
-          "focus-visible:ring-2 focus-visible:ring-inset",
-          "data-[state=active]:text-green-900 focus-visible:ring-green-900",
-          "dark:data-[state=active]:text-green-300 dark:focus-visible:ring-green-300"
-        ]
-      }
-    },
-    {
-      "color": "warning" as typeof color[number],
-      "variant": "pill" as typeof variant[number],
-      "class": {
-        "indicator": "bg-orange-900 dark:bg-orange-900",
-        "trigger": [
-          "data-[state=active]:text-white focus-visible:outline-orange-900",
-          "dark:data-[state=active]:text-orange-200 dark:focus-visible:outline-orange-900",
-          "focus-visible:outline-2 focus-visible:outline-offset-2]"
-        ]
-      }
-    },
-    {
-      "color": "warning" as typeof color[number],
-      "variant": "link" as typeof variant[number],
-      "class": {
-        "indicator": "bg-orange-900 dark:dark:bg-orange-300",
-        "trigger": [
-          "focus-visible:ring-2 focus-visible:ring-inset",
-          "data-[state=active]:text-orange-900 focus-visible:ring-orange-900",
-          "dark:data-[state=active]:text-orange-300 dark:focus-visible:ring-orange-300"
-        ]
-      }
-    },
-    {
-      "color": "primary" as typeof color[number],
-      "variant": "pill" as typeof variant[number],
-      "class": {
-        "indicator": "bg-blue-900 dark:bg-blue-900",
-        "trigger": [
-          "data-[state=active]:text-white focus-visible:outline-blue-900",
-          "dark:data-[state=active]:text-blue-200 dark:focus-visible:outline-blue-900",
-          "focus-visible:outline-2 focus-visible:outline-offset-2]"
-        ]
-      }
-    },
-    {
-      "color": "primary" as typeof color[number],
-      "variant": "link" as typeof variant[number],
-      "class": {
-        "indicator": "bg-blue-900 dark:dark:bg-blue-300",
-        "trigger": [
-          "focus-visible:ring-2 focus-visible:ring-inset",
-          "data-[state=active]:text-blue-900 focus-visible:ring-blue-900",
-          "dark:data-[state=active]:text-blue-300 dark:focus-visible:ring-blue-300"
-        ]
-      }
-    },
-    {
-      "color": "secondary" as typeof color[number],
-      "variant": "pill" as typeof variant[number],
-      "class": {
-        "indicator": "bg-cyan-900 dark:bg-cyan-900",
-        "trigger": [
-          "data-[state=active]:text-white focus-visible:outline-cyan-900",
-          "dark:data-[state=active]:text-cyan-200 dark:focus-visible:outline-cyan-900",
-          "focus-visible:outline-2 focus-visible:outline-offset-2]"
-        ]
-      }
-    },
-    {
-      "color": "secondary" as typeof color[number],
-      "variant": "link" as typeof variant[number],
-      "class": {
-        "indicator": "bg-cyan-900 dark:dark:bg-cyan-300",
-        "trigger": [
-          "focus-visible:ring-2 focus-visible:ring-inset",
-          "data-[state=active]:text-cyan-900 focus-visible:ring-cyan-900",
-          "dark:data-[state=active]:text-cyan-300 dark:focus-visible:ring-cyan-300"
-        ]
-      }
-    },
-    {
-      "color": "collab" as typeof color[number],
-      "variant": "pill" as typeof variant[number],
-      "class": {
-        "indicator": "bg-collab-900 dark:bg-collab-900",
-        "trigger": [
-          "data-[state=active]:text-white focus-visible:outline-collab-900",
-          "dark:data-[state=active]:text-collab-200 dark:focus-visible:outline-collab-900",
-          "focus-visible:outline-2 focus-visible:outline-offset-2]"
-        ]
-      }
-    },
-    {
-      "color": "collab" as typeof color[number],
-      "variant": "link" as typeof variant[number],
-      "class": {
-        "indicator": "bg-collab-900 dark:dark:bg-collab-300",
-        "trigger": [
-          "focus-visible:ring-2 focus-visible:ring-inset",
-          "data-[state=active]:text-collab-900 focus-visible:ring-collab-900",
-          "dark:data-[state=active]:text-collab-300 dark:focus-visible:ring-collab-300"
-        ]
-      }
-    },
-    {
-      "color": "ai" as typeof color[number],
-      "variant": "pill" as typeof variant[number],
-      "class": {
-        "indicator": "bg-ai-900 dark:bg-ai-900",
-        "trigger": [
-          "data-[state=active]:text-white focus-visible:outline-ai-900",
-          "dark:data-[state=active]:text-ai-200 dark:focus-visible:outline-ai-900",
-          "focus-visible:outline-2 focus-visible:outline-offset-2]"
-        ]
-      }
-    },
-    {
-      "color": "ai" as typeof color[number],
       "variant": "link" as typeof variant[number],
       "class": {
-        "indicator": "bg-ai-900 dark:dark:bg-ai-300",
+        "indicator": "bg-(--ui-color-design-selection-content)",
         "trigger": [
-          "focus-visible:ring-2 focus-visible:ring-inset",
-          "data-[state=active]:text-ai-900 focus-visible:ring-ai-900",
-          "dark:data-[state=active]:text-ai-300 dark:focus-visible:ring-ai-300"
+          "focus-visible:ring-1 focus-visible:ring-inset",
+          "data-[state=active]:text-(--b24ui-color)",
+          "focus-visible:ring-(--ui-color-design-selection-content)"
         ]
       }
     }
   ],
   "defaultVariants": {
-    "color": "default" as typeof color[number],
     "variant": "link" as typeof variant[number],
     "size": "md" as typeof size[number]
   }