robodev 0.12.0 → 0.13.0

package/templates/auth-chat/apps/fe/src/styles/overrides/defaults/button.override.ts

@@ -0,0 +1,536 @@
+import { uiOutlineClass, UIOverrides } from "@povio/ui";
+
+export const buttonOverride = UIOverrides.defineOverride("button.cva", {
+  mode: "overrideCva",
+  base: [
+    "group inline-flex items-center justify-center border border-solid",
+    uiOutlineClass,
+    "group-data-[split]/split:data-[separator]:relative",
+    "group-data-[split]/split:data-[separator]:after:content-['']",
+    "group-data-[split]/split:data-[separator]:after:h-full",
+    "group-data-[split]/split:data-[separator]:after:w-px",
+    "group-data-[split]/split:data-[separator]:after:absolute",
+    "group-data-[split]/split:data-[separator]:after:-right-px",
+    "group-data-[split]/split:data-[separator]:after:border-t",
+    "group-data-[split]/split:data-[separator]:after:border-b",
+    "group-data-[split]/split:data-[separator]:after:box-content",
+  ],
+  config: {
+    variants: {
+      width: {
+        fill: "w-full",
+        hug: "w-auto",
+      },
+      size: {
+        none: "",
+        xs: "",
+        s: "",
+        m: "",
+        l: "",
+      },
+      color: {
+        primary: "",
+        secondary: "",
+        success: "",
+        warning: "",
+        error: "",
+        dual: "",
+      },
+      variant: {
+        contained: "",
+        outlined: "",
+        subtle: "",
+        text: "group-data-[split]/split:data-[separator]:after:hidden",
+        ghost: "",
+      },
+      inverted: {
+        true: "",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "contained",
+        color: ["primary", "dual"],
+        className: [
+          "border-interactive-contained-primary-idle bg-interactive-contained-primary-idle text-interactive-contained-primary-on-idle",
+          "hover:border-interactive-contained-primary-hover hover:bg-interactive-contained-primary-hover hover:text-interactive-contained-primary-on-hover",
+          "pressed:border-interactive-contained-primary-pressed pressed:bg-interactive-contained-primary-pressed pressed:text-interactive-contained-primary-on-pressed",
+          "disabled:border-interactive-contained-primary-disabled disabled:bg-interactive-contained-primary-disabled disabled:text-interactive-contained-primary-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+          "selected:border-interactive-contained-primary-toggled-idle selected:bg-interactive-contained-primary-toggled-idle selected:text-interactive-contained-primary-on-toggled-idle",
+          "selected:hover:border-interactive-contained-primary-toggled-hover selected:hover:bg-interactive-contained-primary-toggled-hover selected:hover:text-interactive-contained-primary-on-toggled-hover",
+          "selected:disabled:border-interactive-contained-primary-toggled-disabled selected:disabled:bg-interactive-contained-primary-toggled-disabled selected:disabled:text-interactive-contained-primary-on-toggled-disabled",
+          "group-data-[split]/split:data-[separator]:after:bg-interactive-contained-primary-on-idle!",
+        ],
+      },
+      {
+        variant: "outlined",
+        color: ["primary", "dual"],
+        className: [
+          "border-interactive-outlined-primary-outline-idle bg-interactive-outlined-primary-idle text-interactive-outlined-primary-on-idle",
+          "hover:border-interactive-outlined-primary-outline-hover hover:bg-interactive-outlined-primary-hover hover:text-interactive-outlined-primary-on-hover",
+          "pressed:border-interactive-outlined-primary-outline-pressed pressed:bg-interactive-outlined-primary-pressed pressed:text-interactive-outlined-primary-on-pressed",
+          "disabled:border-interactive-outlined-primary-outline-disabled disabled:bg-interactive-outlined-primary-disabled disabled:text-interactive-outlined-primary-on-disabled",
+          "focus-visible:outline-interactive-outlined-primary-focus",
+          "selected:border-interactive-outlined-primary-toggled-idle selected:bg-interactive-outlined-primary-toggled-idle selected:text-interactive-outlined-primary-on-toggled-idle",
+          "selected:hover:border-interactive-outlined-primary-toggled-hover selected:hover:bg-interactive-outlined-primary-toggled-hover selected:hover:text-interactive-outlined-primary-on-toggled-hover",
+          "selected:disabled:border-interactive-outlined-primary-toggled-disabled selected:disabled:bg-interactive-outlined-primary-toggled-disabled selected:disabled:text-interactive-outlined-primary-on-toggled-disabled",
+        ],
+      },
+      {
+        variant: "subtle",
+        color: ["primary", "dual"],
+        className: [
+          "border-interactive-subtle-primary-idle bg-interactive-subtle-primary-idle text-interactive-subtle-primary-on-idle",
+          "hover:border-interactive-subtle-primary-hover hover:bg-interactive-subtle-primary-hover hover:text-interactive-subtle-primary-on-hover",
+          "pressed:border-interactive-subtle-primary-pressed pressed:bg-interactive-subtle-primary-pressed pressed:text-interactive-subtle-primary-on-pressed",
+          "disabled:border-interactive-subtle-primary-disabled disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled",
+          "focus-visible:outline-interactive-subtle-primary-focus",
+          "selected:border-interactive-contained-primary-toggled-idle selected:bg-interactive-contained-primary-toggled-idle selected:text-interactive-contained-primary-on-toggled-idle",
+          "selected:hover:border-interactive-subtle-primary-toggled-hover selected:hover:bg-interactive-subtle-primary-toggled-hover selected:hover:text-interactive-subtle-primary-on-toggled-hover",
+          "selected:disabled:border-interactive-subtle-primary-toggled-disabled selected:disabled:bg-interactive-subtle-primary-toggled-disabled selected:disabled:text-interactive-subtle-primary-on-toggled-disabled",
+          "group-data-[split]/split:data-[separator]:after:bg-interactive-subtle-primary-on-idle!",
+        ],
+      },
+      {
+        variant: "ghost",
+        color: "primary",
+        className: [
+          "border-interactive-ghost-primary-idle bg-interactive-ghost-primary-idle text-interactive-ghost-primary-on-idle",
+          "hover:border-interactive-ghost-primary-hover hover:bg-interactive-ghost-primary-hover hover:text-interactive-ghost-primary-on-hover",
+          "pressed:border-interactive-ghost-primary-pressed pressed:bg-interactive-ghost-primary-pressed pressed:text-interactive-ghost-primary-on-pressed",
+          "disabled:border-interactive-ghost-primary-disabled disabled:bg-interactive-ghost-primary-disabled disabled:text-interactive-ghost-primary-on-disabled",
+          "focus-visible:outline-interactive-ghost-primary-focus",
+          "selected:border-interactive-ghost-primary-pressed selected:bg-interactive-ghost-primary-toggled-idle selected:text-interactive-ghost-primary-on-toggled-idle",
+          "selected:hover:border-interactive-ghost-primary-toggled-hover selected:hover:bg-interactive-ghost-primary-toggled-hover selected:hover:text-interactive-ghost-primary-on-toggled-hover",
+          "selected:disabled:border-interactive-ghost-primary-toggled-disabled selected:disabled:bg-interactive-ghost-primary-toggled-disabled selected:disabled:text-interactive-ghost-primary-on-toggled-disabled",
+          "group-data-[split]/split:data-[separator]:after:hidden",
+        ],
+      },
+      {
+        variant: "contained",
+        color: "secondary",
+        className: [
+          "border-interactive-contained-secondary-idle bg-interactive-contained-secondary-idle text-interactive-contained-secondary-on-idle",
+          "hover:border-interactive-contained-secondary-hover hover:bg-interactive-contained-secondary-hover hover:text-interactive-contained-secondary-on-hover",
+          "pressed:border-interactive-contained-secondary-pressed pressed:bg-interactive-contained-secondary-pressed pressed:text-interactive-contained-secondary-on-pressed",
+          "disabled:border-interactive-contained-secondary-disabled disabled:bg-interactive-contained-secondary-disabled disabled:text-interactive-contained-secondary-on-disabled",
+          "focus-visible:outline-interactive-contained-secondary-focus",
+          "selected:border-interactive-contained-secondary-toggled-idle selected:bg-interactive-contained-secondary-toggled-idle selected:text-interactive-contained-secondary-on-toggled-idle",
+          "selected:hover:border-interactive-contained-secondary-toggled-hover selected:hover:bg-interactive-contained-secondary-toggled-hover selected:hover:text-interactive-contained-secondary-on-toggled-hover",
+          "selected:disabled:border-interactive-contained-secondary-toggled-disabled selected:disabled:bg-interactive-contained-secondary-toggled-disabled selected:disabled:text-interactive-contained-secondary-on-toggled-disabled",
+          "group-data-[split]/split:data-[separator]:after:bg-interactive-contained-secondary-on-idle!",
+        ],
+      },
+      {
+        variant: "outlined",
+        color: "secondary",
+        className: [
+          "border-interactive-outlined-secondary-outline-idle bg-interactive-outlined-secondary-idle text-interactive-outlined-secondary-on-idle",
+          "hover:border-interactive-outlined-secondary-outline-hover hover:bg-interactive-outlined-secondary-hover hover:text-interactive-outlined-secondary-on-hover",
+          "pressed:border-interactive-outlined-secondary-outline-pressed pressed:bg-interactive-outlined-secondary-pressed pressed:text-interactive-outlined-secondary-on-pressed",
+          "disabled:border-interactive-outlined-secondary-outline-disabled disabled:bg-interactive-outlined-secondary-disabled disabled:text-interactive-outlined-secondary-on-disabled",
+          "focus-visible:outline-interactive-outlined-secondary-focus",
+          "selected:border-interactive-contained-secondary-toggled-idle selected:bg-interactive-contained-secondary-toggled-idle selected:text-interactive-contained-secondary-on-toggled-idle",
+          "selected:hover:border-interactive-contained-secondary-toggled-hover selected:hover:bg-interactive-contained-secondary-toggled-hover selected:hover:text-interactive-contained-secondary-on-toggled-hover",
+          "selected:disabled:border-interactive-contained-secondary-toggled-disabled selected:disabled:bg-interactive-contained-secondary-toggled-disabled selected:disabled:text-interactive-contained-secondary-on-toggled-disabled",
+        ],
+      },
+      {
+        variant: "subtle",
+        color: "secondary",
+        className: [
+          "border-interactive-subtle-secondary-idle bg-interactive-subtle-secondary-idle text-interactive-subtle-secondary-on-idle",
+          "hover:border-interactive-subtle-secondary-hover hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
+          "pressed:border-interactive-subtle-secondary-pressed pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
+          "disabled:border-interactive-subtle-secondary-disabled disabled:bg-interactive-subtle-secondary-disabled disabled:text-interactive-subtle-secondary-on-disabled",
+          "focus-visible:outline-interactive-subtle-secondary-focus",
+          "selected:border-interactive-subtle-secondary-toggled-idle selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
+          "selected:hover:border-interactive-subtle-secondary-toggled-hover selected:hover:bg-interactive-subtle-secondary-toggled-hover selected:hover:text-interactive-subtle-secondary-on-toggled-hover",
+          "selected:disabled:border-interactive-subtle-secondary-toggled-disabled selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled",
+          "group-data-[split]/split:data-[separator]:after:bg-interactive-subtle-secondary-on-idle!",
+        ],
+      },
+      {
+        variant: "ghost",
+        color: "secondary",
+        className: [
+          "border-interactive-ghost-secondary-idle bg-interactive-ghost-secondary-idle text-interactive-ghost-secondary-on-idle",
+          "hover:border-interactive-ghost-secondary-hover hover:bg-interactive-ghost-secondary-hover hover:text-interactive-ghost-secondary-on-hover",
+          "pressed:border-interactive-ghost-secondary-pressed pressed:bg-interactive-ghost-secondary-pressed pressed:text-interactive-ghost-secondary-on-pressed",
+          "disabled:border-interactive-ghost-secondary-disabled disabled:bg-interactive-ghost-secondary-disabled disabled:text-interactive-ghost-secondary-on-disabled",
+          "focus-visible:outline-interactive-ghost-secondary-focus",
+          "selected:border-interactive-ghost-secondary-toggled-idle selected:bg-interactive-ghost-secondary-toggled-idle selected:text-interactive-ghost-secondary-on-toggled-idle",
+          "selected:hover:border-interactive-ghost-secondary-toggled-hover selected:hover:bg-interactive-ghost-secondary-toggled-hover selected:hover:text-interactive-ghost-secondary-on-toggled-hover",
+          "selected:disabled:border-interactive-ghost-secondary-toggled-disabled selected:disabled:bg-interactive-ghost-secondary-toggled-disabled selected:disabled:text-interactive-ghost-secondary-on-toggled-disabled",
+          "group-data-[split]/split:data-[separator]:after:hidden",
+        ],
+      },
+      {
+        variant: "contained",
+        color: "success",
+        className: [
+          "border-interactive-contained-success-idle bg-interactive-contained-success-idle text-interactive-contained-success-on-idle",
+          "hover:border-interactive-contained-success-hover hover:bg-interactive-contained-success-hover hover:text-interactive-contained-success-on-hover",
+          "pressed:border-interactive-contained-success-pressed pressed:bg-interactive-contained-success-pressed pressed:text-interactive-contained-success-on-pressed",
+          "disabled:border-interactive-contained-success-disabled disabled:bg-interactive-contained-success-disabled disabled:text-interactive-contained-success-on-disabled",
+          "focus-visible:outline-interactive-contained-success-focus",
+          "selected:border-interactive-contained-success-toggled-idle selected:bg-interactive-contained-success-toggled-idle selected:text-interactive-contained-success-on-toggled-idle",
+          "selected:hover:border-interactive-contained-success-toggled-hover selected:hover:bg-interactive-contained-success-toggled-hover selected:hover:text-interactive-contained-success-on-toggled-hover",
+          "selected:disabled:border-interactive-contained-success-toggled-disabled selected:disabled:bg-interactive-contained-success-toggled-disabled selected:disabled:text-interactive-contained-success-on-toggled-disabled",
+          "group-data-[split]/split:data-[separator]:after:bg-interactive-contained-success-on-idle!",
+        ],
+      },
+      {
+        variant: "outlined",
+        color: "success",
+        className: [
+          "border-interactive-outlined-success-outline-idle bg-interactive-outlined-success-idle text-interactive-outlined-success-on-idle",
+          "hover:border-interactive-outlined-success-outline-hover hover:bg-interactive-outlined-success-hover hover:text-interactive-outlined-success-on-hover",
+          "pressed:border-interactive-outlined-success-outline-pressed pressed:bg-interactive-outlined-success-pressed pressed:text-interactive-outlined-success-on-pressed",
+          "disabled:border-interactive-outlined-success-outline-disabled disabled:bg-interactive-outlined-success-disabled disabled:text-interactive-outlined-success-on-disabled",
+          "focus-visible:outline-interactive-outlined-success-focus",
+          "selected:border-interactive-outlined-success-toggled-idle selected:bg-interactive-outlined-success-toggled-idle selected:text-interactive-outlined-success-on-toggled-idle",
+          "selected:hover:border-interactive-outlined-success-toggled-hover selected:hover:bg-interactive-outlined-success-toggled-hover selected:hover:text-interactive-outlined-success-on-toggled-hover",
+          "selected:disabled:border-interactive-outlined-success-toggled-disabled selected:disabled:bg-interactive-outlined-success-toggled-disabled selected:disabled:text-interactive-outlined-success-on-toggled-disabled",
+        ],
+      },
+      {
+        variant: "subtle",
+        color: "success",
+        className: [
+          "border-interactive-subtle-success-idle bg-interactive-subtle-success-idle text-interactive-subtle-success-on-idle",
+          "hover:border-interactive-subtle-success-hover hover:bg-interactive-subtle-success-hover hover:text-interactive-subtle-success-on-hover",
+          "pressed:border-interactive-subtle-success-pressed pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-pressed",
+          "disabled:border-interactive-subtle-success-disabled disabled:bg-interactive-subtle-success-disabled disabled:text-interactive-subtle-success-on-disabled",
+          "focus-visible:outline-interactive-subtle-success-focus",
+          "selected:border-interactive-subtle-success-toggled-idle selected:bg-interactive-subtle-success-toggled-idle selected:text-interactive-subtle-success-on-toggled-idle",
+          "selected:hover:border-interactive-subtle-success-toggled-hover selected:hover:bg-interactive-subtle-success-toggled-hover selected:hover:text-interactive-subtle-success-on-toggled-hover",
+          "selected:disabled:border-interactive-subtle-success-toggled-disabled selected:disabled:bg-interactive-subtle-success-toggled-disabled selected:disabled:text-interactive-subtle-success-on-toggled-disabled",
+          "group-data-[split]/split:data-[separator]:after:bg-interactive-subtle-success-on-idle!",
+        ],
+      },
+      {
+        variant: "ghost",
+        color: "success",
+        className: [
+          "border-interactive-ghost-success-idle bg-interactive-ghost-success-idle text-interactive-ghost-success-on-idle",
+          "hover:border-interactive-ghost-success-hover hover:bg-interactive-ghost-success-hover hover:text-interactive-ghost-success-on-hover",
+          "pressed:border-interactive-ghost-success-pressed pressed:bg-interactive-ghost-success-pressed pressed:text-interactive-ghost-success-on-pressed",
+          "disabled:border-interactive-ghost-success-disabled disabled:bg-interactive-ghost-success-disabled disabled:text-interactive-ghost-success-on-disabled",
+          "focus-visible:outline-interactive-ghost-success-focus",
+          "selected:border-interactive-ghost-success-toggled-idle selected:bg-interactive-ghost-success-toggled-idle selected:text-interactive-ghost-success-on-toggled-idle",
+          "selected:hover:border-interactive-ghost-success-toggled-hover selected:hover:bg-interactive-ghost-success-toggled-hover selected:hover:text-interactive-ghost-success-on-toggled-hover",
+          "selected:disabled:border-interactive-ghost-success-toggled-disabled selected:disabled:bg-interactive-ghost-success-toggled-disabled selected:disabled:text-interactive-ghost-success-on-toggled-disabled",
+          "group-data-[split]/split:data-[separator]:after:hidden",
+        ],
+      },
+      {
+        variant: "contained",
+        color: "warning",
+        className: [
+          "border-interactive-contained-warning-idle bg-interactive-contained-warning-idle text-interactive-contained-warning-on-idle",
+          "hover:border-interactive-contained-warning-hover hover:bg-interactive-contained-warning-hover hover:text-interactive-contained-warning-on-hover",
+          "pressed:border-interactive-contained-warning-pressed pressed:bg-interactive-contained-warning-pressed pressed:text-interactive-contained-warning-on-pressed",
+          "disabled:border-interactive-contained-warning-disabled disabled:bg-interactive-contained-warning-disabled disabled:text-interactive-contained-warning-on-disabled",
+          "focus-visible:outline-interactive-contained-warning-focus",
+          "selected:border-interactive-contained-warning-toggled-idle selected:bg-interactive-contained-warning-toggled-idle selected:text-interactive-contained-warning-on-toggled-idle",
+          "selected:hover:border-interactive-contained-warning-toggled-hover selected:hover:bg-interactive-contained-warning-toggled-hover selected:hover:text-interactive-contained-warning-on-toggled-hover",
+          "selected:disabled:border-interactive-contained-warning-toggled-disabled selected:disabled:bg-interactive-contained-warning-toggled-disabled selected:disabled:text-interactive-contained-warning-on-toggled-disabled",
+          "group-data-[split]/split:data-[separator]:after:bg-interactive-contained-warning-on-idle!",
+        ],
+      },
+      {
+        variant: "outlined",
+        color: "warning",
+        className: [
+          "border-interactive-outlined-warning-outline-idle bg-interactive-outlined-warning-idle text-interactive-outlined-warning-on-idle",
+          "hover:border-interactive-outlined-warning-outline-hover hover:bg-interactive-outlined-warning-hover hover:text-interactive-outlined-warning-on-hover",
+          "pressed:border-interactive-outlined-warning-outline-pressed pressed:bg-interactive-outlined-warning-pressed pressed:text-interactive-outlined-warning-on-pressed",
+          "disabled:border-interactive-outlined-warning-outline-disabled disabled:bg-interactive-outlined-warning-disabled disabled:text-interactive-outlined-warning-on-disabled",
+          "focus-visible:outline-interactive-outlined-warning-focus",
+          "selected:border-interactive-outlined-warning-toggled-idle selected:bg-interactive-outlined-warning-toggled-idle selected:text-interactive-outlined-warning-on-toggled-idle",
+          "selected:hover:border-interactive-outlined-warning-toggled-hover selected:hover:bg-interactive-outlined-warning-toggled-hover selected:hover:text-interactive-outlined-warning-on-toggled-hover",
+          "selected:disabled:border-interactive-outlined-warning-toggled-disabled selected:disabled:bg-interactive-outlined-warning-toggled-disabled selected:disabled:text-interactive-outlined-warning-on-toggled-disabled",
+        ],
+      },
+      {
+        variant: "subtle",
+        color: "warning",
+        className: [
+          "border-interactive-subtle-warning-idle bg-interactive-subtle-warning-idle text-interactive-subtle-warning-on-idle",
+          "hover:border-interactive-subtle-warning-hover hover:bg-interactive-subtle-warning-hover hover:text-interactive-subtle-warning-on-hover",
+          "pressed:border-interactive-subtle-warning-pressed pressed:bg-interactive-subtle-warning-pressed pressed:text-interactive-subtle-warning-on-pressed",
+          "disabled:border-interactive-subtle-warning-disabled disabled:bg-interactive-subtle-warning-disabled disabled:text-interactive-subtle-warning-on-disabled",
+          "focus-visible:outline-interactive-subtle-warning-focus",
+          "selected:border-interactive-subtle-warning-toggled-idle selected:bg-interactive-subtle-warning-toggled-idle selected:text-interactive-subtle-warning-on-toggled-idle",
+          "selected:hover:border-interactive-subtle-warning-toggled-hover selected:hover:bg-interactive-subtle-warning-toggled-hover selected:hover:text-interactive-subtle-warning-on-toggled-hover",
+          "selected:disabled:border-interactive-subtle-warning-toggled-disabled selected:disabled:bg-interactive-subtle-warning-toggled-disabled selected:disabled:text-interactive-subtle-warning-on-toggled-disabled",
+          "group-data-[split]/split:data-[separator]:after:bg-interactive-subtle-warning-on-idle!",
+        ],
+      },
+      {
+        variant: "ghost",
+        color: "warning",
+        className: [
+          "border-interactive-ghost-warning-idle bg-interactive-ghost-warning-idle text-interactive-ghost-warning-on-idle",
+          "hover:border-interactive-ghost-warning-hover hover:bg-interactive-ghost-warning-hover hover:text-interactive-ghost-warning-on-hover",
+          "pressed:border-interactive-ghost-warning-pressed pressed:bg-interactive-ghost-warning-pressed pressed:text-interactive-ghost-warning-on-pressed",
+          "disabled:border-interactive-ghost-warning-disabled disabled:bg-interactive-ghost-warning-disabled disabled:text-interactive-ghost-warning-on-disabled",
+          "focus-visible:outline-interactive-ghost-warning-focus",
+          "selected:border-interactive-ghost-warning-toggled-idle selected:bg-interactive-ghost-warning-toggled-idle selected:text-interactive-ghost-warning-on-toggled-idle",
+          "selected:hover:border-interactive-ghost-warning-toggled-hover selected:hover:bg-interactive-ghost-warning-toggled-hover selected:hover:text-interactive-ghost-warning-on-toggled-hover",
+          "selected:disabled:border-interactive-ghost-warning-toggled-disabled selected:disabled:bg-interactive-ghost-warning-toggled-disabled selected:disabled:text-interactive-ghost-warning-on-toggled-disabled",
+          "group-data-[split]/split:data-[separator]:after:hidden",
+        ],
+      },
+      {
+        variant: "contained",
+        color: "error",
+        className: [
+          "border-interactive-contained-error-idle bg-interactive-contained-error-idle text-interactive-contained-error-on-idle",
+          "hover:border-interactive-contained-error-hover hover:bg-interactive-contained-error-hover hover:text-interactive-contained-error-on-hover",
+          "pressed:border-interactive-contained-error-pressed pressed:bg-interactive-contained-error-pressed pressed:text-interactive-contained-error-on-pressed",
+          "disabled:border-interactive-contained-error-disabled disabled:bg-interactive-contained-error-disabled disabled:text-interactive-contained-error-on-disabled",
+          "focus-visible:outline-interactive-contained-error-focus",
+          "selected:border-interactive-contained-error-toggled-idle selected:bg-interactive-contained-error-toggled-idle selected:text-interactive-contained-error-on-toggled-idle",
+          "selected:hover:border-interactive-contained-error-toggled-hover selected:hover:bg-interactive-contained-error-toggled-hover selected:hover:text-interactive-contained-error-on-toggled-hover",
+          "selected:disabled:border-interactive-contained-error-toggled-disabled selected:disabled:bg-interactive-contained-error-toggled-disabled selected:disabled:text-interactive-contained-error-on-toggled-disabled",
+          "group-data-[split]/split:data-[separator]:after:bg-interactive-contained-error-on-idle!",
+        ],
+      },
+      {
+        variant: "outlined",
+        color: "error",
+        className: [
+          "border-interactive-outlined-error-outline-idle bg-interactive-outlined-error-idle text-interactive-outlined-error-on-idle",
+          "hover:border-interactive-outlined-error-outline-hover hover:bg-interactive-outlined-error-hover hover:text-interactive-outlined-error-on-hover",
+          "pressed:border-interactive-outlined-error-outline-pressed pressed:bg-interactive-outlined-error-pressed pressed:text-interactive-outlined-error-on-pressed",
+          "disabled:border-interactive-outlined-error-outline-disabled disabled:bg-interactive-outlined-error-disabled disabled:text-interactive-outlined-error-on-disabled",
+          "focus-visible:outline-interactive-outlined-error-focus",
+          "selected:border-interactive-outlined-error-toggled-idle selected:bg-interactive-outlined-error-toggled-idle selected:text-interactive-outlined-error-on-toggled-idle",
+          "selected:hover:border-interactive-outlined-error-toggled-hover selected:hover:bg-interactive-outlined-error-toggled-hover selected:hover:text-interactive-outlined-error-on-toggled-hover",
+          "selected:disabled:border-interactive-outlined-error-toggled-disabled selected:disabled:bg-interactive-outlined-error-toggled-disabled selected:disabled:text-interactive-outlined-error-on-toggled-disabled",
+        ],
+      },
+      {
+        variant: "subtle",
+        color: "error",
+        className: [
+          "border-interactive-subtle-error-idle bg-interactive-subtle-error-idle text-interactive-subtle-error-on-idle",
+          "hover:border-interactive-subtle-error-hover hover:bg-interactive-subtle-error-hover hover:text-interactive-subtle-error-on-hover",
+          "pressed:border-interactive-subtle-error-pressed pressed:bg-interactive-subtle-error-pressed pressed:text-interactive-subtle-error-on-pressed",
+          "disabled:border-interactive-subtle-error-disabled disabled:bg-interactive-subtle-error-disabled disabled:text-interactive-subtle-error-on-disabled",
+          "focus-visible:outline-interactive-subtle-error-focus",
+          "selected:border-interactive-subtle-error-toggled-idle selected:bg-interactive-subtle-error-toggled-idle selected:text-interactive-subtle-error-on-toggled-idle",
+          "selected:hover:border-interactive-subtle-error-toggled-hover selected:hover:bg-interactive-subtle-error-toggled-hover selected:hover:text-interactive-subtle-error-on-toggled-hover",
+          "selected:disabled:border-interactive-subtle-error-toggled-disabled selected:disabled:bg-interactive-subtle-error-toggled-disabled selected:disabled:text-interactive-subtle-error-on-toggled-disabled",
+          "group-data-[split]/split:data-[separator]:after:bg-interactive-subtle-error-on-idle!",
+        ],
+      },
+      {
+        variant: "ghost",
+        color: "error",
+        className: [
+          "border-interactive-ghost-error-idle bg-interactive-ghost-error-idle text-interactive-ghost-error-on-idle",
+          "hover:border-interactive-ghost-error-hover hover:bg-interactive-ghost-error-hover hover:text-interactive-ghost-error-on-hover",
+          "pressed:border-interactive-ghost-error-pressed pressed:bg-interactive-ghost-error-pressed pressed:text-interactive-ghost-error-on-pressed",
+          "disabled:border-interactive-ghost-error-disabled disabled:bg-interactive-ghost-error-disabled disabled:text-interactive-ghost-error-on-disabled",
+          "focus-visible:outline-interactive-ghost-error-focus",
+          "selected:border-interactive-ghost-error-toggled-idle selected:bg-interactive-ghost-error-toggled-idle selected:text-interactive-ghost-error-on-toggled-idle",
+          "selected:hover:border-interactive-ghost-error-toggled-hover selected:hover:bg-interactive-ghost-error-toggled-hover selected:hover:text-interactive-ghost-error-on-toggled-hover",
+          "selected:disabled:border-interactive-ghost-error-toggled-disabled selected:disabled:bg-interactive-ghost-error-toggled-disabled selected:disabled:text-interactive-ghost-error-on-toggled-disabled",
+          "group-data-[split]/split:data-[separator]:after:hidden",
+        ],
+      },
+      {
+        variant: "text",
+        color: "primary",
+        inverted: false,
+        className: [
+          "font-medium!",
+          "border-support-transparent-outline",
+          "text-interactive-text-primary-idle",
+          "hover:text-interactive-text-primary-hover",
+          "pressed:text-interactive-text-primary-pressed",
+          "disabled:text-interactive-text-primary-disabled",
+          "focus-visible:outline-interactive-text-primary-focus",
+          "selected:text-interactive-text-primary-toggled-idle",
+          "selected:hover:text-interactive-text-primary-toggled-hovered",
+          "selected:disabled:text-interactive-text-primary-toggled-disabled",
+        ],
+      },
+      {
+        variant: "text",
+        color: "secondary",
+        className: [
+          "border-support-transparent-outline",
+          "text-interactive-text-secondary-idle",
+          "hover:text-interactive-text-secondary-hover",
+          "pressed:text-interactive-text-secondary-pressed",
+          "disabled:text-interactive-text-secondary-disabled",
+          "focus-visible:outline-interactive-text-secondary-focus",
+          "selected:text-interactive-text-secondary-toggled-idle",
+          "selected:hover:text-interactive-text-secondary-toggled-hovered",
+          "selected:disabled:text-interactive-text-secondary-toggled-disabled",
+        ],
+      },
+      {
+        variant: "text",
+        color: "success",
+        inverted: false,
+        className: [
+          "border-support-transparent-outline",
+          "text-interactive-text-success-idle",
+          "hover:text-interactive-text-success-hover",
+          "pressed:text-interactive-text-success-pressed",
+          "disabled:text-interactive-text-success-disabled",
+          "focus-visible:outline-interactive-text-success-focus",
+          "selected:text-interactive-text-success-toggled-idle",
+          "selected:hover:text-interactive-text-success-toggled-hovered",
+          "selected:disabled:text-interactive-text-success-toggled-disabled",
+        ],
+      },
+      {
+        variant: "text",
+        color: "warning",
+        inverted: false,
+        className: [
+          "border-support-transparent-outline",
+          "text-interactive-text-warning-idle",
+          "hover:text-interactive-text-warning-hover",
+          "pressed:text-interactive-text-warning-pressed",
+          "disabled:text-interactive-text-warning-disabled",
+          "focus-visible:outline-interactive-text-warning-focus",
+          "selected:text-interactive-text-warning-toggled-idle",
+          "selected:hover:text-interactive-text-warning-toggled-hovered",
+          "selected:disabled:text-interactive-text-warning-toggled-disabled",
+        ],
+      },
+      {
+        variant: "text",
+        color: "error",
+        inverted: false,
+        className: [
+          "border-support-transparent-outline",
+          "text-interactive-text-error-idle",
+          "hover:text-interactive-text-error-hover",
+          "pressed:text-interactive-text-error-pressed",
+          "disabled:text-interactive-text-error-disabled",
+          "focus-visible:outline-interactive-text-error-focus",
+          "selected:text-interactive-text-error-toggled-idle",
+          "selected:hover:text-interactive-text-error-toggled-hovered",
+          "selected:disabled:text-interactive-text-error-toggled-disabled",
+        ],
+      },
+      {
+        variant: "text",
+        color: "primary",
+        inverted: true,
+        className: [
+          "border-support-transparent-outline",
+          "text-interactive-text-primary-idle-inverted",
+          "hover:text-interactive-text-primary-hover-inverted",
+          "pressed:text-interactive-text-primary-pressed-inverted",
+          "disabled:text-interactive-text-primary-disabled-inverted",
+          "focus-visible:outline-interactive-text-primary-focus-inverted",
+          "selected:text-interactive-text-primary-toggled-idle-inverted",
+          "selected:hover:text-interactive-text-primary-toggled-hovered-inverted",
+          "selected:disabled:text-interactive-text-primary-toggled-disabled-inverted",
+        ],
+      },
+      {
+        variant: "text",
+        color: "success",
+        inverted: true,
+        className: [
+          "border-support-transparent-outline",
+          "text-interactive-text-success-idle-inverted",
+          "hover:text-interactive-text-success-hover-inverted",
+          "pressed:text-interactive-text-success-pressed-inverted",
+          "disabled:text-interactive-text-success-disabled-inverted",
+          "focus-visible:outline-interactive-text-success-focus-inverted",
+          "selected:text-interactive-text-success-toggled-idle-inverted",
+          "selected:hover:text-interactive-text-success-toggled-hovered-inverted",
+          "selected:disabled:text-interactive-text-success-toggled-disabled-inverted",
+        ],
+      },
+      {
+        variant: "text",
+        color: "warning",
+        inverted: true,
+        className: [
+          "border-support-transparent-outline",
+          "text-interactive-text-warning-idle-inverted",
+          "hover:text-interactive-text-warning-hover-inverted",
+          "pressed:text-interactive-text-warning-pressed-inverted",
+          "disabled:text-interactive-text-warning-disabled-inverted",
+          "focus-visible:outline-interactive-text-warning-focus-inverted",
+          "selected:text-interactive-text-warning-toggled-idle-inverted",
+          "selected:hover:text-interactive-text-warning-toggled-hovered-inverted",
+          "selected:disabled:text-interactive-text-warning-toggled-disabled-inverted",
+        ],
+      },
+      {
+        variant: "text",
+        color: "error",
+        inverted: true,
+        className: [
+          "border-support-transparent-outline",
+          "text-interactive-text-error-idle-inverted",
+          "hover:text-interactive-text-error-hover-inverted",
+          "pressed:text-interactive-text-error-pressed-inverted",
+          "disabled:text-interactive-text-error-disabled-inverted",
+          "focus-visible:outline-interactive-text-error-focus-inverted",
+          "selected:text-interactive-text-error-toggled-idle-inverted",
+          "selected:hover:text-interactive-text-error-toggled-hovered-inverted",
+          "selected:disabled:text-interactive-text-error-toggled-disabled-inverted",
+        ],
+      },
+      {
+        variant: "text",
+        color: "dual",
+        className: [
+          "border-support-transparent-outline",
+          "text-interactive-text-secondary-idle [&_svg]:text-interactive-text-primary-idle",
+          "hover:text-interactive-text-primary-hover hover:[&_svg]:text-interactive-text-primary-hover",
+          "pressed:text-interactive-text-primary-pressed pressed:[&_svg]:text-interactive-text-primary-pressed",
+          "disabled:text-interactive-text-primary-disabled disabled:[&_svg]:text-interactive-text-primary-disabled",
+          "focus-visible:outline-interactive-text-primary-focus",
+          "selected:text-interactive-text-primery-toggled-idle selected:[&_svg]:text-interactive-text-primery-toggled-idle",
+          "selected:hover:text-interactive-text-primary-toggled-hovered selected:hover:[&_svg]:text-interactive-text-primary-toggled-hovered",
+          "selected:disabled:text-interactive-text-primary-toggled-disabled selected:disabled:[&_svg]:text-interactive-text-primary-toggled-disabled",
+        ],
+      },
+    ],
+    defaultVariants: {
+      width: "hug",
+      color: "primary",
+      variant: "contained",
+      inverted: false,
+    },
+  },
+});
+
+/** 18px — ~25% smaller than the @povio/ui default 24px (size-6). */
+const buttonIconSizeClass = "size-[1.125rem]";
+
+export const buttonIconSizeOverride = UIOverrides.defineOverride("button.iconSize", {
+  mode: "overrideCva",
+  base: [],
+  config: {
+    variants: {
+      size: {
+        none: buttonIconSizeClass,
+        xs: buttonIconSizeClass,
+        s: buttonIconSizeClass,
+        m: buttonIconSizeClass,
+        l: buttonIconSizeClass,
+      },
+    },
+    defaultVariants: {
+      size: "m",
+    },
+  },
+});

package/templates/auth-chat/apps/fe/src/styles/overrides/defaults/checkbox.override.ts

@@ -0,0 +1,71 @@
+import { type CheckboxVariantProps, compoundMapper, UIOverrides, type TypographyVariantProps } from "@povio/ui";
+
+import { uiGroupOutlineClass } from "@/styles/overrides/outline.clsx";
+
+export const checkboxOverride = UIOverrides.defineOverride("checkbox.cva", {
+  mode: "overrideCva",
+  base: ["flex items-center justify-center border-2", "relative size-4 shrink-0 rounded-xs p-1", uiGroupOutlineClass],
+  config: {
+    variants: {
+      variant: {
+        default: [
+          "m-1 border-interactive-outlined-secondary-on-idle",
+          "text-interactive-contained-primary-on-idle",
+          "group-hover:text-interactive-contained-primary-on-hover",
+          "group-pressed:text-interactive-contained-primary-on-pressed",
+          "group-disabled:text-interactive-contained-primary-on-disabled",
+          "group-disabled:border-interactive-outlined-secondary-on-disabled",
+          "group-hover:border-interactive-outlined-secondary-on-hover",
+          "group-pressed:border-interactive-outlined-secondary-on-pressed",
+          "group-selected:border-interactive-contained-primary-idle",
+          "group-selected:bg-interactive-contained-primary-idle",
+          "group-selected:group-hover:bg-interactive-contained-primary-hover",
+          "group-selected:group-hover:border-interactive-contained-primary-hover",
+          "group-selected:group-pressed:bg-interactive-contained-primary-pressed",
+          "group-selected:group-pressed:border-interactive-contained-primary-pressed",
+          "group-selected:group-disabled:bg-interactive-contained-primary-disabled",
+          "group-selected:group-disabled:border-interactive-contained-primary-disabled",
+          "group-indeterminate:border-interactive-contained-primary-idle",
+          "group-indeterminate:bg-interactive-contained-primary-idle",
+          "group-indeterminate:group-hover:bg-interactive-contained-primary-hover",
+          "group-indeterminate:group-hover:border-interactive-contained-primary-hover",
+          "group-indeterminate:group-pressed:bg-interactive-contained-primary-pressed",
+          "group-indeterminate:group-pressed:border-interactive-contained-primary-pressed",
+          "group-indeterminate:group-disabled:bg-interactive-contained-primary-disabled",
+          "group-indeterminate:group-disabled:border-interactive-contained-primary-disabled",
+          "group-invalid:border-interactive-outlined-error-on-idle",
+          "group-focus-visible:outline-interactive-contained-primary-focus",
+        ],
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+});
+
+export const checkboxIndicatorClass = "group flex items-center gap-2";
+
+export const checkboxTypography = compoundMapper<TypographyVariantProps, CheckboxVariantProps>({
+  default: {
+    size: "label-1",
+    sizeMobile: "label-1",
+    variant: "default",
+  },
+});
+
+export const checkboxIconOverride = UIOverrides.defineOverride("checkbox.iconCva", {
+  mode: "overrideCva",
+  base: ["absolute hidden size-3"],
+  config: {
+    variants: {
+      iconVariant: {
+        selected: ["group-selected:block"],
+        indeterminate: ["group-indeterminate:block"],
+      },
+    },
+    defaultVariants: {
+      iconVariant: "selected",
+    },
+  },
+});