@povio/ui 0.0.1 → 0.0.3

package/src/components/buttons/Button/button.cva.ts

@@ -0,0 +1,678 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+import { uiOutlineClass } from "#ui/components/outline.clsx";
+import type { TypographyVariantProps } from "#ui/components/text/Typography/typography.cva";
+import { compoundMapper } from "#ui/utils/compoundMapper";
+
+export const button = cva(["group inline-flex items-center justify-center border border-solid", uiOutlineClass], {
+  variants: {
+    width: {
+      fill: "w-full",
+      hug: "w-auto",
+    },
+    size: {
+      xxs: "",
+      xs: "",
+      s: "",
+      m: "",
+      l: "",
+    },
+    color: {
+      primary: "",
+      secondary: "",
+      success: "",
+      warning: "",
+      error: "",
+      dual: "",
+    },
+    variant: {
+      contained: "",
+      outlined: "",
+      subtle: "",
+      text: "",
+      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]:border-r-interactive-contained-primary-on-idle!",
+      ],
+    },
+    {
+      variant: "outlined",
+      color: ["primary", "dual"],
+      className: [
+        "border-interactive-outlined-primary-outline-idle text-interactive-outlined-primary-on-idle",
+        "hover:border-interactive-outlined-primary-outline-hover hover:text-interactive-outlined-primary-on-hover",
+        "pressed:border-interactive-outlined-primary-outline-pressed pressed:text-interactive-outlined-primary-on-pressed",
+        "disabled:border-interactive-outlined-primary-outline-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-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]:border-r-interactive-contained-primary-on-idle!",
+      ],
+    },
+    {
+      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]:border-r-interactive-contained-secondary-on-idle!",
+      ],
+    },
+    {
+      variant: "outlined",
+      color: "secondary",
+      className: [
+        "border-interactive-outlined-secondary-outline-idle text-interactive-outlined-secondary-on-idle",
+        "hover:border-interactive-outlined-secondary-outline-hover hover:text-interactive-outlined-secondary-on-hover",
+        "pressed:border-interactive-outlined-secondary-outline-pressed pressed:text-interactive-outlined-secondary-on-pressed",
+        "disabled:border-interactive-outlined-secondary-outline-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-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]:border-r-interactive-contained-secondary-on-idle!",
+      ],
+    },
+    {
+      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]:border-r-interactive-contained-success-on-idle!",
+      ],
+    },
+    {
+      variant: "outlined",
+      color: "success",
+      className: [
+        "border-interactive-outlined-success-outline-idle text-interactive-outlined-success-on-idle",
+        "hover:border-interactive-outlined-success-outline-hover hover:text-interactive-outlined-success-on-hover",
+        "pressed:border-interactive-outlined-success-outline-pressed pressed:text-interactive-outlined-success-on-pressed",
+        "disabled:border-interactive-outlined-success-outline-disabled disabled:text-interactive-outlined-success-on-disabled",
+        "focus-visible:outline-interactive-outlined-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",
+      ],
+    },
+    {
+      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-idle",
+        "pressed:border-interactive-subtle-success-pressed pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-idle",
+        "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-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]:border-r-interactive-contained-success-on-idle!",
+      ],
+    },
+    {
+      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]:border-r-interactive-contained-warning-on-idle!",
+      ],
+    },
+    {
+      variant: "outlined",
+      color: "warning",
+      className: [
+        "border-interactive-outlined-warning-outline-idle text-interactive-outlined-warning-on-idle",
+        "hover:border-interactive-outlined-warning-outline-hover hover:text-interactive-outlined-warning-on-hover",
+        "pressed:border-interactive-outlined-warning-outline-pressed pressed:text-interactive-outlined-warning-on-pressed",
+        "disabled:border-interactive-outlined-warning-outline-disabled disabled:text-interactive-outlined-warning-on-disabled",
+        "focus-visible:outline-interactive-outlined-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",
+      ],
+    },
+    {
+      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-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]:border-r-interactive-contained-warning-on-idle!",
+      ],
+    },
+    {
+      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]:border-r-interactive-contained-error-on-idle!",
+      ],
+    },
+    {
+      variant: "outlined",
+      color: "error",
+      className: [
+        "border-interactive-outlined-error-outline-idle text-interactive-outlined-error-on-idle",
+        "hover:border-interactive-outlined-error-outline-hover hover:text-interactive-outlined-error-on-hover",
+        "pressed:border-interactive-outlined-error-outline-pressed pressed:text-interactive-outlined-error-on-pressed",
+        "disabled:border-interactive-outlined-error-outline-disabled disabled:text-interactive-outlined-error-on-disabled",
+        "focus-visible:outline-interactive-outlined-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",
+      ],
+    },
+    {
+      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-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]:border-r-interactive-contained-error-on-idle!",
+      ],
+    },
+    {
+      variant: "text",
+      color: "primary",
+      inverted: false,
+      className: [
+        "border-transparent",
+        "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:border-interactive-subtle-primary-toggled-idle selected:bg-interactive-subtle-primary-toggled-idle selected:text-interactive-subtle-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",
+      ],
+    },
+    {
+      variant: "ghost",
+      color: "primary",
+      className: [
+        "border-transparent",
+        "text-interactive-text-primary-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",
+        "focus-visible:outline-interactive-subtle-primary-focus",
+        "disabled:border-transparent disabled:bg-transparent disabled:text-interactive-text-primary-disabled",
+        "selected:border-interactive-subtle-primary-toggled-idle selected:bg-interactive-subtle-primary-toggled-idle selected:text-interactive-subtle-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",
+      ],
+    },
+    {
+      variant: "text",
+      color: "secondary",
+      className: [
+        "border-transparent",
+        "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: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",
+      ],
+    },
+    {
+      variant: "ghost",
+      color: "secondary",
+      className: [
+        "border-transparent",
+        "text-interactive-text-secondary-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-transparent disabled:bg-transparent disabled:text-interactive-text-secondary-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",
+      ],
+    },
+    {
+      variant: "text",
+      color: "success",
+      inverted: false,
+      className: [
+        "border-transparent",
+        "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: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",
+      ],
+    },
+    {
+      variant: "ghost",
+      color: "success",
+      inverted: false,
+      className: [
+        "border-transparent",
+        "text-interactive-text-success-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-transparent disabled:bg-transparent disabled:text-interactive-text-success-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",
+      ],
+    },
+    {
+      variant: "text",
+      color: "warning",
+      inverted: false,
+      className: [
+        "border-transparent",
+        "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: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",
+      ],
+    },
+    {
+      variant: "ghost",
+      color: "warning",
+      className: [
+        "border-transparent",
+        "text-interactive-text-warning-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-transparent disabled:bg-transparent disabled:text-interactive-text-warning-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",
+      ],
+    },
+    {
+      variant: "text",
+      color: "error",
+      inverted: false,
+      className: [
+        "border-transparent",
+        "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: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",
+      ],
+    },
+    {
+      variant: "ghost",
+      color: "error",
+      className: [
+        "border-transparent",
+        "text-interactive-text-error-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-transparent disabled:bg-transparent disabled:text-interactive-text-error-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",
+      ],
+    },
+    {
+      variant: "text",
+      color: "primary",
+      inverted: true,
+      className: [
+        "border-transparent",
+        "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",
+        "selected:border-interactive-subtle-primary-toggled-idle selected:bg-interactive-subtle-primary-toggled-idle selected:text-interactive-subtle-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",
+      ],
+    },
+    {
+      variant: "text",
+      color: "secondary",
+      inverted: true,
+      className: [
+        "border-transparent",
+        "text-interactive-text-secondary-idle-inverted",
+        "hover:text-interactive-text-secondary-hover-inverted",
+        "pressed:text-interactive-text-secondary-pressed-inverted",
+        "disabled:text-interactive-text-secondary-disabled-inverted",
+        "focus-visible:outline-interactive-text-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",
+      ],
+    },
+    {
+      variant: "text",
+      color: "success",
+      inverted: true,
+      className: [
+        "border-transparent",
+        "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",
+        "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",
+      ],
+    },
+    {
+      variant: "text",
+      color: "warning",
+      inverted: true,
+      className: [
+        "border-transparent",
+        "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",
+        "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",
+      ],
+    },
+    {
+      variant: "text",
+      color: "error",
+      inverted: true,
+      className: [
+        "border-transparent",
+        "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",
+        "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",
+      ],
+    },
+    {
+      variant: "text",
+      color: "dual",
+      className: [
+        "border-transparent",
+        "text-interactive-text-secondary-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",
+
+        "[&_svg]:text-interactive-text-primary-idle",
+        "hover:[&_svg]:text-interactive-text-primary-hover",
+        "pressed:[&_svg]:text-interactive-text-primary-pressed",
+        "disabled:[&_svg]:text-interactive-text-primary-disabled",
+      ],
+    },
+  ],
+  defaultVariants: {
+    width: "fill",
+    color: "primary",
+    variant: "contained",
+    inverted: false,
+  },
+});
+
+// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
+export interface ButtonVariantProps extends VariantProps<typeof button> {}
+
+export const buttonSize = cva("", {
+  variants: {
+    size: {
+      xxs: "rounded-button-rounding-m",
+      xs: "rounded-button-rounding-m",
+      s: "rounded-button-rounding-m",
+      m: "rounded-button-rounding-m",
+      l: "rounded-button-rounding-m",
+    },
+    iconOnly: {
+      true: "",
+      false: "",
+    },
+  },
+  compoundVariants: [
+    {
+      size: "xxs",
+      iconOnly: false,
+      className: "px-button-side-xxs py-button-height-none",
+    },
+    {
+      size: "xs",
+      iconOnly: false,
+      className: "px-button-side-xs py-button-height-xs",
+    },
+    {
+      size: "s",
+      iconOnly: false,
+      className: "px-button-side-s py-button-height-s",
+    },
+    {
+      size: "m",
+      iconOnly: false,
+      className: "px-button-side-m py-button-height-m",
+    },
+    {
+      size: "l",
+      iconOnly: false,
+      className: "px-button-side-l py-button-height-l",
+    },
+    {
+      size: "xxs",
+      iconOnly: true,
+      className: "p-button-height-none",
+    },
+    {
+      size: "xs",
+      iconOnly: true,
+      className: "p-button-height-xs",
+    },
+    {
+      size: "s",
+      iconOnly: true,
+      className: "p-button-height-s",
+    },
+    {
+      size: "m",
+      iconOnly: true,
+      className: "p-button-height-m",
+    },
+    {
+      size: "l",
+      iconOnly: true,
+      className: "p-button-height-l",
+    },
+  ],
+  defaultVariants: {
+    size: "m",
+    iconOnly: false,
+  },
+});
+
+export const buttonContent = cva("", {
+  variants: {
+    size: {
+      xxs: "gap-button-button-content-icon-to-label",
+      xs: "gap-button-button-content-icon-to-label",
+      s: "gap-button-button-content-icon-to-label",
+      m: "gap-button-button-content-icon-to-label",
+      l: "gap-button-button-content-icon-to-label",
+    },
+    iconPosition: {
+      left: "",
+      right: "",
+      none: "",
+    },
+    iconOnly: {
+      true: "p-0",
+      false: "",
+    },
+  },
+  compoundVariants: [
+    { iconOnly: false, iconPosition: "left", className: "pr-button-button-content-side-default" },
+    { iconOnly: false, iconPosition: "right", className: "pl-button-button-content-side-default" },
+  ],
+
+  defaultVariants: {
+    size: "m",
+    iconPosition: "left",
+    iconOnly: false,
+  },
+});
+
+export const buttonIconSize = cva("", {
+  variants: {
+    size: {
+      xxs: "h-6 w-6",
+      xs: "h-6 w-6",
+      s: "h-6 w-6",
+      m: "h-6 w-6",
+      l: "h-6 w-6",
+    },
+  },
+  defaultVariants: {
+    size: "m",
+  },
+});
+
+export const buttonTypography = compoundMapper<TypographyVariantProps, ButtonVariantProps>({
+  defaultVariants: {
+    size: "m",
+  },
+  compoundVariants: [
+    {
+      size: "xs",
+      value: {
+        size: "label-2",
+        variant: "prominent-1",
+      },
+    },
+    {
+      size: "s",
+      value: {
+        size: "label-2",
+        variant: "prominent-1",
+      },
+    },
+    {
+      size: "m",
+      value: {
+        size: "label-2",
+        variant: "prominent-1",
+      },
+    },
+    {
+      size: "l",
+      value: {
+        size: "label-2",
+        variant: "prominent-1",
+      },
+    },
+  ],
+});