@bitrix24/b24ui-nuxt 0.7.1 → 1.0.1

package/.nuxt/b24ui/button.ts

@@ -1,4 +1,19 @@
 const color = [
+  "air-primary",
+  "air-primary-success",
+  "air-primary-alert",
+  "air-primary-copilot",
+  "air-secondary",
+  "air-secondary-alert",
+  "air-secondary-accent",
+  "air-secondary-accent-1",
+  "air-secondary-accent-2",
+  "air-secondary-no-accent",
+  "air-tertiary",
+  "air-tertiary-accent",
+  "air-tertiary-no-accent",
+  "air-selection",
+  "air-boost",
   "default",
   "danger",
   "success",
@@ -17,28 +32,49 @@ const depth = [
 ] as const
 
 const size = [
+  "xss",
   "xs",
   "sm",
   "md",
-  "lg"
+  "lg",
+  "xl"
 ] as const
 
 export default {
   "slots": {
     "base": [
+      "ui-btn",
+      "font-[family-name:var(--ui-font-family-primary)]",
       "select-none cursor-pointer inline-flex items-center",
       "relative",
       "outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2",
-      "disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:opacity-50",
-      "transition duration-150 ease-linear"
+      "disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30",
+      "transition duration-0 ease-linear",
+      "border-(length:--ui-btn-border-width)",
+      "text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color)",
+      "hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover)",
+      "focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover)",
+      "active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active)",
+      "disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color)",
+      "aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color)",
+      "focus-visible:outline-(--ui-btn-background)",
+      "ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover)",
+      "h-(--ui-btn-height)",
+      "text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight)",
+      ""
     ],
-    "baseLine": "inline-flex items-center",
-    "label": "truncate",
-    "leadingIcon": "shrink-0",
-    "leadingAvatar": "shrink-0",
+    "baseLoading": "h-full w-full absolute inset-0 flex flex-row flex-nowrap items-center justify-center",
+    "baseLoadingWaitIcon": "text-(--ui-btn-color) size-[calc(var(--ui-btn-wait-icon-size)_+_7px)]",
+    "baseLoadingClockIcon": "text-(--ui-btn-color) size-[calc(var(--ui-btn-wait-icon-size)_+_7px)]",
+    "baseLoadingSpinnerIcon": "text-(--ui-btn-color) size-(--ui-btn-wait-icon-size) animate-spin stroke-2",
+    "baseLine": "w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) ps-(--ui-btn-padding-left) pe-(--ui-btn-padding-right)",
+    "label": "h-(--ui-btn-height) max-w-full inline-flex items-center tracking-(--ui-btn-letter-spacing) overflow-visible text-clip mt-(--ui-btn-title-compensation)",
+    "labelInner": "truncate inline-block max-w-full mt-(--ui-btn-title-compensation)",
+    "leadingIcon": "text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)",
+    "leadingAvatar": "shrink-0 me-[4px]",
     "leadingAvatarSize": "",
-    "trailingIcon": "shrink-0",
-    "safeList": "h-full w-full absolute inset-0 flex flex-row flex-nowrap items-center justify-center w-[28px] h-[28px] size-lg animate-spin stroke-2 invisible"
+    "trailingIcon": "text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size) mt-(--ui-btn-title-compensation)",
+    "safeList": "invisible"
   },
   "variants": {
     "buttonGroup": {
@@ -49,15 +85,32 @@ export default {
       "false": "group-[.is-button-group]/items:not-only:not-first:after:content-[''] group-[.is-button-group]/items:not-only:not-first:after:absolute group-[.is-button-group]/items:not-only:not-first:after:top-[7px] group-[.is-button-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-button-group]/items:not-only:not-first:after:left-0 group-[.is-button-group]/items:not-only:not-first:after:w-px group-[.is-button-group]/items:not-only:not-first:after:bg-current/30"
     },
     "color": {
-      "default": "text-white dark:text-base-100 bg-base-650 border border-base-650 hover:bg-base-850 hover:border-base-850 hover:focus-visible:ring-0 active:bg-slate-850 active:border-slate-850 active:focus-visible:ring-0 disabled:bg-base-650 aria-disabled:bg-base-650 disabled:border-base-650 aria-disabled:border-base-650 focus-visible:outline-base-650 ring-base-850 focus:outline-none focus-visible:ring-base-850",
-      "danger": "text-white dark:text-red-100 bg-red-720 border border-red-720 hover:bg-red-790 hover:border-red-790 hover:focus-visible:ring-0 active:bg-red-730 active:border-red-730 active:focus-visible:ring-0 disabled:bg-red-720 aria-disabled:bg-red-720 disabled:border-red-720 aria-disabled:border-red-720 focus-visible:outline-red-720 ring-red-800 focus:outline-none focus-visible:ring-red-800",
-      "success": "text-base-900 bg-green-450 border border-green-450 hover:bg-green-370 hover:border-green-370 hover:focus-visible:ring-0 active:bg-green-430 active:border-green-430 active:focus-visible:ring-0 disabled:bg-green-450 aria-disabled:bg-green-450 disabled:border-green-450 aria-disabled:border-green-450 focus-visible:outline-green-450 ring-green-500 focus:outline-none focus-visible:ring-green-500",
-      "warning": "text-white dark:text-orange-100 bg-orange-500 border border-orange-500 hover:bg-orange-500/75 hover:border-orange-500/75 hover:focus-visible:ring-0 active:bg-orange-500/85 active:border-orange-500/85 active:focus-visible:ring-0 disabled:bg-orange-500 aria-disabled:bg-orange-500 disabled:border-bg-orange-500 aria-disabled:border-bg-orange-500 focus-visible:outline-orange-500 ring-orange-800 focus:outline-none focus-visible:ring-orange-800",
-      "primary": "text-white dark:text-blue-100 bg-blue-530 border border-blue-530 hover:bg-blue-450 hover:border-blue-450 hover:focus-visible:ring-0 active:bg-blue-550 active:border-blue-550 active:focus-visible:ring-0 disabled:bg-blue-530 aria-disabled:bg-blue-530 disabled:border-blue-530 aria-disabled:border-blue-530 focus-visible:outline-blue-530 ring-blue-800 focus:outline-none focus-visible:ring-blue-800",
-      "secondary": "text-base-900 bg-cyan-160 border border-cyan-230 hover:bg-cyan-150 hover:border-cyan-230 hover:focus-visible:ring-0 active:bg-cyan-230 active:border-cyan-230 active:focus-visible:ring-0 disabled:bg-cyan-160 aria-disabled:bg-cyan-160 disabled:border-cyan-230 aria-disabled:border-cyan-230 focus-visible:outline-cyan-160 ring-cyan-500 focus:outline-none focus-visible:ring-cyan-500",
-      "collab": "text-white dark:text-collab-100 bg-collab-600 border border-collab-600 hover:bg-collab-500 hover:border-collab-500 hover:focus-visible:ring-0 active:bg-collab-700 active:border-collab-700 active:focus-visible:ring-0 disabled:bg-collab-600 aria-disabled:bg-collab-600 disabled:border-collab-600 aria-disabled:border-collab-600 focus-visible:outline-collab-600 ring-collab-900 focus:outline-none focus-visible:ring-collab-900",
-      "ai": "text-white dark:text-ai-100 bg-ai-450 border border-ai-450 hover:bg-ai-370 hover:border-ai-370 hover:focus-visible:ring-0 active:bg-ai-550 active:border-ai-550 active:focus-visible:ring-0 disabled:bg-ai-450 aria-disabled:bg-ai-450 disabled:border-ai-450 aria-disabled:border-ai-450 focus-visible:outline-ai-450 ring-ai-900 focus:outline-none focus-visible:ring-ai-900",
-      "link": "no-underline decoration-solid decoration-auto text-base-900 decoration-gray-900 bg-transparent border border-transparent dark:text-base-300 hover:text-base-750 dark:hover:text-base-400 hover:focus-visible:ring-0 active:text-base-900 dark:active:text-base-700 active:focus-visible:ring-0 disabled:text-base-900 aria-disabled:text-base-900 dark:disabled:text-base-300 dark:aria-disabled:disabled:text-base-300 focus-visible:outline-base-400 ring-base-850 focus:outline-none focus-visible:ring-base-850"
+      "air-primary": "--style-filled",
+      "air-primary-success": "--style-filled-success",
+      "air-primary-alert": "--style-filled-alert",
+      "air-primary-copilot": "--style-filled-copilot",
+      "air-secondary": "--style-tinted",
+      "air-secondary-alert": "--style-tinted-alert",
+      "air-secondary-accent": "--style-outline",
+      "air-secondary-accent-1": "--style-outline-accent-1",
+      "air-secondary-accent-2": "--style-outline-accent-2",
+      "air-secondary-no-accent": "--style-outline-no-accent",
+      "air-tertiary": "--style-plain",
+      "air-tertiary-accent": "--style-plain-accent",
+      "air-tertiary-no-accent": "--style-plain-no-accent",
+      "air-selection": "--style-selection",
+      "air-boost": {
+        "base": "--style-filled-boost bg-transparent hover:bg-transparent focus:bg-transparent active:bg-transparent disabled:bg-transparent aria-disabled:bg-transparent from-0% via-58.65% to-100% bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] from-(--ui-color-design-filled-boost-bg-gradient-1) via-(--ui-color-design-filled-boost-bg-gradient-2) to-(--ui-color-design-filled-boost-bg-gradient-3) hover:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] hover:from-(--hover-color-1) via-(--hover-color-2) hover:via-58.65% hover:to-(--hover-color-3) focus:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] focus:from-(--hover-color-1) via-(--hover-color-2) focus:via-58.65% to-(--hover-color-3) active:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] active:from-(--active-color-1) via-(--active-color-2) active:via-58.65% to-(--active-color-3) disabled:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] disabled:from-(--ui-color-design-filled-boost-bg-gradient-1) via-(--ui-color-design-filled-boost-bg-gradient-2) to-(--ui-color-design-filled-boost-bg-gradient-3) aria-disabled:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] aria-disabled:from-(--ui-color-design-filled-boost-bg-gradient-1) aria-disabled:via-(--ui-color-design-filled-boost-bg-gradient-2) aria-disabled:to-(--ui-color-design-filled-boost-bg-gradient-3)"
+      },
+      "default": "",
+      "danger": "",
+      "success": "",
+      "warning": "",
+      "primary": "",
+      "secondary": "",
+      "collab": "",
+      "ai": "",
+      "link": ""
     },
     "depth": {
       "light": "",
@@ -65,55 +118,60 @@ export default {
       "dark": ""
     },
     "size": {
+      "xss": {
+        "base": "ui-btn-xss",
+        "leadingAvatarSize": "2xs"
+      },
       "xs": {
-        "base": "h-xl2 ps-4 pe-4 text-3xs leading-none",
-        "baseLine": "gap-1",
-        "leadingIcon": "size-5",
-        "leadingAvatarSize": "2xs",
-        "trailingIcon": "size-md2"
+        "base": "ui-btn-xs",
+        "leadingAvatarSize": "2xs"
       },
       "sm": {
-        "base": "h-3xl ps-[18px] pe-[18px] text-xs leading-none",
-        "baseLine": "gap-1.5",
-        "leadingIcon": "size-6",
-        "leadingAvatarSize": "xs",
-        "trailingIcon": "size-lg"
+        "base": "ui-btn-sm",
+        "leadingAvatarSize": "xs"
       },
       "md": {
-        "base": "h-5xl ps-5 pe-5 text-xs leading-none",
-        "baseLine": "gap-1.5",
-        "leadingIcon": "size-xl2",
-        "leadingAvatarSize": "sm",
-        "trailingIcon": "size-lg"
+        "base": "ui-btn-md",
+        "leadingAvatarSize": "xs"
       },
       "lg": {
-        "base": "h-6xl ps-[28px] pe-[28px] text-xs leading-none",
-        "baseLine": "gap-2",
-        "leadingIcon": "size-xl2",
-        "leadingAvatarSize": "md",
-        "trailingIcon": "size-lg"
+        "base": "ui-btn-lg",
+        "leadingAvatarSize": "md"
+      },
+      "xl": {
+        "base": "ui-btn-xl",
+        "leadingAvatarSize": "md"
       }
     },
     "block": {
       "true": {
-        "base": "w-full",
-        "baseLine": "w-full justify-center",
-        "trailingIcon": "ms-auto"
+        "base": "w-full"
       }
     },
     "rounded": {
-      "true": "rounded-full",
-      "false": "rounded-2xs"
+      "true": "rounded-(--ui-border-radius-lg)",
+      "false": "rounded-(--ui-btn-radius)"
     },
     "leading": {
       "true": ""
     },
+    "active": {
+      "true": {
+        "base": ""
+      },
+      "false": {
+        "base": ""
+      }
+    },
     "useLabel": {
       "true": "",
-      "false": "ps-1.5 pe-1.5 justify-center"
+      "false": {
+        "baseLine": "ps-[4px] pe-[4px]",
+        "leadingAvatar": "me-0"
+      }
     },
     "useDropdown": {
-      "true": "ps-2 pe-2"
+      "true": ""
     },
     "useWait": {
       "true": ""
@@ -125,229 +183,180 @@ export default {
       "true": ""
     },
     "normalCase": {
-      "true": "font-semibold normal-case",
-      "false": "font-bold uppercase"
+      "true": "normal-case",
+      "false": "uppercase"
     },
-    "active": {
-      "true": {
-        "base": ""
-      },
-      "false": {
-        "base": ""
-      }
+    "isAir": {
+      "true": "--air",
+      "false": ""
     }
   },
   "compoundVariants": [
     {
       "color": "default" as typeof color[number],
       "depth": "light" as typeof depth[number],
-      "class": "text-base-800 dark:text-base-800 bg-base-200 border border-base-300 hover:bg-base-320 hover:border-base-320 hover:focus-visible:ring-0 active:bg-base-250 active:border-base-250 active:focus-visible:ring-0 disabled:bg-base-200 aria-disabled:bg-base-200 disabled:border-base-300 aria-disabled:border-base-300 focus-visible:outline-base-200 ring-base-320 focus-visible:ring-base-320"
+      "class": "--style-default-light"
+    },
+    {
+      "color": "default" as typeof color[number],
+      "depth": "normal" as typeof depth[number],
+      "class": "--style-default"
     },
     {
       "color": "default" as typeof color[number],
       "depth": "dark" as typeof depth[number],
-      "class": "text-white dark:text-base-100 bg-base-900 border border-base-900 hover:bg-base-900/75 hover:border-base-900/75 hover:focus-visible:ring-0 active:bg-base-900/85 active:border-base-900/85 active:focus-visible:ring-0 disabled:bg-base-900 aria-disabled:bg-base-900 disabled:border-base-900 aria-disabled:border-base-900 focus-visible:outline-base-900 ring-base-700 focus-visible:ring-base-700"
+      "class": "--style-default-dark"
     },
     {
       "color": "danger" as typeof color[number],
       "depth": "light" as typeof depth[number],
-      "class": "text-red-750 dark:text-red-760 bg-red-270 border border-red-270 hover:bg-red-250 hover:border-red-250 dark:hover:bg-red-200 dark:hover:border-red-200 hover:focus-visible:ring-0 active:bg-red-350 active:border-red-350 dark:active:bg-red-350 dark:active:border-red-350 active:focus-visible:ring-0 disabled:bg-red-270 aria-disabled:bg-red-270 disabled:border-red-270 aria-disabled:border-red-270 dark:disabled:bg-red-270 dark:aria-disabled:bg-red-270 dark:disabled:border-red-270 dark:aria-disabled:border-red-270 focus-visible:outline-red-270"
+      "class": "--style-danger-light"
+    },
+    {
+      "color": "danger" as typeof color[number],
+      "depth": "normal" as typeof depth[number],
+      "class": "--style-danger"
     },
     {
       "color": "danger" as typeof color[number],
       "depth": "dark" as typeof depth[number],
-      "class": "text-white dark:text-red-100 bg-red-850 border border-red-850 hover:bg-red-760 hover:border-red-760 hover:focus-visible:ring-0 active:bg-red-930 active:border-red-930 active:focus-visible:ring-0 disabled:bg-red-850 aria-disabled:bg-red-850 disabled:border-red-850 aria-disabled:border-red-850 focus-visible:outline-red-850 ring-red-950 focus-visible:ring-red-950"
+      "class": "--style-danger-dark"
     },
     {
       "color": "success" as typeof color[number],
       "depth": "light" as typeof depth[number],
-      "class": "text-green-780 bg-green-280 border border-green-280 hover:bg-green-270 hover:border-green-270 hover:focus-visible:ring-0 dark:hover:bg-green-200 dark:hover:border-green-200 active:bg-green-330 active:border-green-270 active:focus-visible:ring-0 dark:active:bg-green-330 dark:active:border-green-270 disabled:bg-green-280 aria-disabled:bg-green-280 disabled:border-green-280 aria-disabled:border-green-280 dark:disabled:bg-green-280 dark:aria-disabled:bg-green-280 dark:disabled:border-green-280 dark:aria-disabled:border-green-280 focus-visible:outline-green-280"
+      "class": "--style-success-light"
+    },
+    {
+      "color": "success" as typeof color[number],
+      "depth": "normal" as typeof depth[number],
+      "class": "--style-success"
     },
     {
       "color": "success" as typeof color[number],
       "depth": "dark" as typeof depth[number],
-      "class": "text-white dark:text-green-100 bg-green-730 border border-green-730 hover:bg-green-570 hover:border-green-570 hover:focus-visible:ring-0 active:bg-green-570 active:border-green-570 active:focus-visible:ring-0 disabled:bg-green-730 aria-disabled:bg-green-730 disabled:border-green-730 aria-disabled:border-green-730 focus-visible:outline-green-730 ring-green-900 focus-visible:ring-green-900"
+      "class": "--style-success-dark"
     },
     {
       "color": "warning" as typeof color[number],
       "depth": "light" as typeof depth[number],
-      "class": "text-orange-750 dark:text-orange-750 bg-orange-350/80 border border-orange-350/80 dark:bg-orange-230 dark:border-orange-230 hover:bg-orange-500/65 hover:border-orange-500/65 dark:hover:bg-orange-400 dark:hover:border-orange-400 hover:focus-visible:ring-0 active:bg-orange-550 active:border-orange-550 dark:active:bg-orange-600 dark:active:border-orange-600 active:focus-visible:ring-0 disabled:bg-orange-230 aria-disabled:bg-orange-230 disabled:border-orange-230 aria-disabled:border-orange-230 dark:disabled:bg-orange-230 dark:aria-disabled:bg-orange-230 dark:disabled:border-orange-230 dark:aria-disabled:border-orange-230 focus-visible:outline-orange-230"
+      "class": "--style-warning-light"
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "depth": "normal" as typeof depth[number],
+      "class": "--style-warning"
     },
     {
       "color": "warning" as typeof color[number],
       "depth": "dark" as typeof depth[number],
-      "class": "text-white dark:text-orange-100 bg-orange-700 border border-orange-700 hover:bg-orange-700/75 hover:border-orange-700/75 hover:focus-visible:ring-0 active:bg-orange-700/85 active:border-orange-700/85 active:focus-visible:ring-0 disabled:bg-orange-700 aria-disabled:bg-orange-700 disabled:border-orange-700 aria-disabled:border-orange-700 focus-visible:outline-orange-700"
+      "class": "--style-warning-dark"
     },
     {
       "color": "primary" as typeof color[number],
       "depth": "light" as typeof depth[number],
-      "class": "text-blue-800 dark:text-blue-800 bg-blue-300 border border-blue-400 hover:bg-blue-300/75 hover:border-blue-300/75 hover:focus-visible:ring-0 active:bg-blue-300/85 active:border-blue-300/85 active:focus-visible:ring-0 disabled:bg-blue-300 aria-disabled:bg-blue-300 disabled:border-blue-300 aria-disabled:border-blue-300 focus-visible:outline-blue-300"
+      "class": "--style-primary-light"
+    },
+    {
+      "color": "primary" as typeof color[number],
+      "depth": "normal" as typeof depth[number],
+      "class": "--style-primary"
     },
     {
       "color": "primary" as typeof color[number],
       "depth": "dark" as typeof depth[number],
-      "class": "text-white dark:text-blue-100 bg-blue-650 border border-blue-650 hover:bg-blue-630 hover:border-blue-630 hover:focus-visible:ring-0 active:bg-blue-750 active:border-blue-750 active:focus-visible:ring-0 disabled:bg-blue-650 aria-disabled:bg-blue-650 disabled:border-blue-650 aria-disabled:border-blue-650 focus-visible:outline-blue-650"
+      "class": "--style-primary-dark"
     },
     {
       "color": "secondary" as typeof color[number],
       "depth": "light" as typeof depth[number],
-      "class": "text-blue-620 dark:text-blue-850 bg-blue-310 border border-blue-310 hover:bg-cyan-150 hover:border-cyan-150 hover:focus-visible:ring-0 active:bg-cyan-230 active:border-cyan-230 active:focus-visible:ring-0 disabled:bg-blue-310 aria-disabled:bg-blue-310 disabled:border-blue-310 aria-disabled:border-blue-310 focus-visible:outline-blue-310"
+      "class": "--style-secondary-light"
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "depth": "normal" as typeof depth[number],
+      "class": "--style-secondary"
     },
     {
       "color": "secondary" as typeof color[number],
       "depth": "dark" as typeof depth[number],
-      "class": "text-base-900 bg-cyan-350 border-cyan-500 hover:bg-cyan-350/75 hover:focus-visible:ring-0 active:bg-cyan-350/85 active:focus-visible:ring-0 disabled:bg-cyan-350 aria-disabled:bg-cyan-350 focus-visible:outline-cyan-350 ring-cyan-900 focus-visible:ring-cyan-900"
+      "class": "--style-secondary-dark"
     },
     {
       "color": "collab" as typeof color[number],
       "depth": "light" as typeof depth[number],
-      "class": "text-collab-900 dark:text-collab-900 bg-collab-300 border border-collab-400 hover:bg-collab-300/75 hover:border-collab-300/75 hover:focus-visible:ring-0 active:bg-collab-300/85 active:border-collab-300/85 active:focus-visible:ring-0 disabled:bg-collab-300 aria-disabled:bg-collab-300 disabled:border-collab-300 aria-disabled:border-collab-300 focus-visible:outline-collab-300"
+      "class": "--style-collab-light"
+    },
+    {
+      "color": "collab" as typeof color[number],
+      "depth": "normal" as typeof depth[number],
+      "class": "--style-collab"
     },
     {
       "color": "collab" as typeof color[number],
       "depth": "dark" as typeof depth[number],
-      "class": "text-white dark:text-collab-100 bg-collab-700 border border-collab-700 hover:bg-collab-700/75 hover:border-collab-700/75 hover:focus-visible:ring-0 active:bg-collab-700/85 active:border-collab-700/85 active:focus-visible:ring-0 disabled:bg-collab-700 aria-disabled:bg-collab-700 disabled:border-collab-700 aria-disabled:border-collab-700 focus-visible:outline-collab-700"
+      "class": "--style-collab-dark"
     },
     {
       "color": "ai" as typeof color[number],
       "depth": "light" as typeof depth[number],
-      "class": "text-ai-900 dark:text-ai-900 bg-ai-300 border border-ai-400 hover:bg-ai-300/75 hover:border-ai-300/75 hover:focus-visible:ring-0 active:bg-ai-300/85 active:border-ai-300/85 active:focus-visible:ring-0 disabled:bg-ai-300 aria-disabled:bg-ai-300 disabled:border-ai-300 aria-disabled:border-ai-300 focus-visible:outline-ai-300"
+      "class": "--style-ai-light"
     },
     {
       "color": "ai" as typeof color[number],
-      "depth": "dark" as typeof depth[number],
-      "class": "text-white dark:text-ai-100 bg-ai-550 border border-ai-550 hover:bg-ai-550/75 hover:border-ai-550/75 hover:focus-visible:ring-0 active:bg-ai-550/85 active:border-ai-550/85 active:focus-visible:ring-0 disabled:bg-ai-550 aria-disabled:bg-ai-550 disabled:border-ai-550 aria-disabled:border-ai-550 focus-visible:outline-ai-550 ring-ai-900 focus-visible:ring-ai-900"
+      "depth": "normal" as typeof depth[number],
+      "class": "--style-ai"
     },
     {
-      "color": "link" as typeof color[number],
-      "depth": "light" as typeof depth[number],
-      "class": "text-base-900 dark:text-base-300 bg-transparent border border-transparent hover:text-base-master dark:hover:text-base-100 hover:bg-base-30 dark:hover:bg-base-850 hover:focus-visible:ring-0 active:text-base-ebony active:bg-blue-270 dark:active:text-base-100 dark:active:bg-slate-850 active:focus-visible:ring-0 disabled:text-base-master disabled:bg-base-30 aria-disabled:bg-base-30 dark:disabled:text-base-100 dark:aria-disabled:text-base-100 dark:disabled:bg-base-850 dark:aria-disabled:bg-base-850 focus-visible:outline-base-30 dark:focus-visible:outline-base-850"
+      "color": "ai" as typeof color[number],
+      "depth": "dark" as typeof depth[number],
+      "class": "--style-ai-dark"
     },
     {
       "color": "link" as typeof color[number],
       "depth": "light" as typeof depth[number],
-      "useLabel": true,
-      "class": "ps-1.5 pe-1.5"
+      "class": "--style-link-light"
     },
     {
       "color": "link" as typeof color[number],
       "depth": "normal" as typeof depth[number],
-      "useLabel": true,
-      "class": "ps-0 pe-0"
+      "class": "--style-link"
     },
     {
       "color": "link" as typeof color[number],
       "depth": "dark" as typeof depth[number],
-      "class": " border text-base-900 bg-transparent border-base-330 dark:text-base-300 dark:border-base-800 hover:text-base-900 dark:hover:text-base-900 hover:bg-base-320 hover:border-base-330 hover:focus-visible:ring-0 active:text-base-900 dark:active:text-base-900 active:bg-base-250 active:border-base-550 active:focus-visible:ring-0 disabled:bg-transparent disabled:border-base-330 aria-disabled:bg-transparent aria-disabled:border-base-330 dark:disabled:text-base-900 dark:aria-disabled:text-base-900 dark:disabled:border-base-900 dark:aria-disabled:border-base-900 focus-visible:outline-base-330"
+      "class": "--style-link-dark"
     },
     {
-      "size": "xs" as typeof size[number],
       "leading": true,
       "useLabel": true,
       "useDropdown": false,
-      "class": "ps-1.5 pe-4"
-    },
-    {
-      "size": "sm" as typeof size[number],
-      "leading": true,
-      "useLabel": true,
-      "useDropdown": false,
-      "class": "ps-2.5 pe-[18px]"
-    },
-    {
-      "size": "md" as typeof size[number],
-      "leading": true,
-      "useLabel": true,
-      "useDropdown": false,
-      "class": "ps-3.5 pe-5"
-    },
-    {
-      "size": "lg" as typeof size[number],
-      "leading": true,
-      "useLabel": true,
-      "useDropdown": false,
-      "class": "ps-4 pe-[28px]"
-    },
-    {
-      "size": "xs" as typeof size[number],
-      "leading": false,
-      "useLabel": true,
-      "useDropdown": true,
-      "class": "ps-4 pe-1.5"
-    },
-    {
-      "size": "sm" as typeof size[number],
-      "leading": false,
-      "useLabel": true,
-      "useDropdown": true,
-      "class": "ps-[18px] pe-1.5"
-    },
-    {
-      "size": "md" as typeof size[number],
-      "leading": false,
-      "useLabel": true,
-      "useDropdown": true,
-      "class": "ps-5 pe-2.5"
+      "class": {
+        "baseLine": "ps-[calc(var(--ui-btn-padding-left)_-_var(--ui-btn-icon-compensation))]"
+      }
     },
     {
-      "size": "lg" as typeof size[number],
       "leading": false,
       "useLabel": true,
       "useDropdown": true,
-      "class": "ps-[28px] pe-3.5"
-    },
-    {
-      "size": "xs" as typeof size[number],
-      "leading": true,
-      "useLabel": true,
-      "useDropdown": true,
-      "class": "ps-1.5 pe-1.5"
-    },
-    {
-      "size": "sm" as typeof size[number],
-      "leading": true,
-      "useLabel": true,
-      "useDropdown": true,
-      "class": "ps-2.5 pe-1.5"
-    },
-    {
-      "size": "md" as typeof size[number],
-      "leading": true,
-      "useLabel": true,
-      "useDropdown": true,
-      "class": "ps-3.5 pe-2.5"
+      "class": {
+        "baseLine": "pe-[calc(var(--ui-btn-padding-right)_-_var(--ui-btn-icon-compensation))]"
+      }
     },
     {
-      "size": "lg" as typeof size[number],
       "leading": true,
       "useLabel": true,
       "useDropdown": true,
-      "class": "ps-4 pe-3.5"
-    },
-    {
-      "normalCase": true,
-      "size": "xs" as typeof size[number],
-      "class": "text-xs"
-    },
-    {
-      "normalCase": true,
-      "size": "sm" as typeof size[number],
-      "class": "text-sm"
-    },
-    {
-      "normalCase": true,
-      "size": "md" as typeof size[number],
-      "class": "text-md"
-    },
-    {
-      "normalCase": true,
-      "size": "lg" as typeof size[number],
-      "class": "text-md"
+      "class": {
+        "baseLine": "ps-[calc(var(--ui-btn-padding-left)_-_var(--ui-btn-icon-compensation))] pe-[calc(var(--ui-btn-padding-right)_-_var(--ui-btn-icon-compensation))]"
+      }
     }
   ],
   "defaultVariants": {
     "size": "md" as typeof size[number],
-    "color": "default" as typeof color[number],
-    "depth": "normal" as typeof depth[number]
+    "color": "air-secondary-no-accent" as typeof color[number],
+    "depth": "normal" as typeof depth[number],
+    "normalCase": true,
+    "isAir": true
   }
 }