robodev 0.11.0 → 0.13.0

package/templates/space/apps/fe/src/styles/overrides/defaults/input.override.ts

@@ -0,0 +1,252 @@
+import { UIOverrides, uiOutlineClass } from "@povio/ui";
+
+export const inputBaseOverride = UIOverrides.defineOverride("input.baseCva", {
+  mode: "overrideCva",
+  base: [uiOutlineClass, "flex w-full not-[textarea]:truncate"],
+  config: {
+    variants: {
+      variant: {
+        outlined: "",
+        filled: "",
+      },
+      as: {
+        default: "rounded-input-rounding-default",
+        floating: "rounded-input-rounding-default",
+        filter: "rounded-input-rounding-default",
+        inline: [
+          "h-full",
+          "border-transparent border-b-0 bg-transparent text-text-default-1",
+          "hover:border-input-outlined-outline-hover",
+          "focus-within:border-input-outlined-outline-active",
+          "invalid:border-input-outlined-outline-error",
+          "has-invalid:border-input-outlined-outline-error",
+          "disabled:hover:border-transparent",
+          "has-disabled:hover:border-transparent",
+        ],
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "outlined",
+        as: "default",
+        className: [
+          "border border-input-outlined-outline-idle border-solid bg-input-outlined-idle text-text-default-1",
+          "hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
+          "focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
+          "invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
+          "has-invalid:border-input-outlined-outline-error has-invalid:border-solid has-invalid:bg-input-outlined-error has-invalid:text-text-default-1",
+          "disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-3",
+          "has-disabled:border-input-outlined-outline-disabled has-disabled:border-solid has-disabled:bg-input-outlined-disabled has-disabled:text-text-default-3",
+          "disabled:hover:border-input-outlined-outline-disabled disabled:hover:bg-input-outlined-disabled disabled:hover:text-text-default-3",
+          "has-disabled:hover:border-input-outlined-outline-disabled has-disabled:hover:bg-input-outlined-disabled has-disabled:hover:text-text-default-3",
+          "[&_input]:placeholder:text-text-default-3",
+          "disabled:placeholder:text-interactive-text-secondary-disabled",
+          "has-disabled:placeholder:text-interactive-text-secondary-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+          "has-focus-visible:outline-interactive-contained-primary-focus",
+        ],
+      },
+      {
+        variant: "filled",
+        as: "default",
+        className: [
+          "border border-transparent border-solid bg-input-filled-idle text-text-default-1",
+          "hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
+          "focus-within:border-input-filled-outline-active focus-within:border-solid focus-within:bg-input-filled-active focus-within:text-text-default-1",
+          "invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
+          "has-invalid:border-input-filled-outline-error has-invalid:border-solid has-invalid:bg-input-filled-error has-invalid:text-text-default-1",
+          "disabled:bg-input-filled-disabled disabled:text-text-default-3",
+          "has-disabled:bg-input-filled-disabled has-disabled:text-text-default-3",
+          "disabled:hover:border-transparent disabled:hover:bg-input-filled-disabled disabled:hover:text-text-default-3",
+          "has-disabled:hover:border-transparent has-disabled:hover:bg-input-filled-disabled has-disabled:hover:text-text-default-3",
+          "[&_input]:placeholder:text-text-default-3",
+          "disabled:placeholder:text-interactive-text-secondary-disabled",
+          "has-disabled:placeholder:text-interactive-text-secondary-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+          "has-focus-visible:outline-interactive-contained-primary-focus",
+        ],
+      },
+      {
+        variant: "outlined",
+        as: "floating",
+        className: [
+          "border border-input-outlined-outline-idle border-solid bg-input-outlined-idle text-text-default-1",
+          "hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
+          "focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
+          "invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
+          "has-invalid:border-input-outlined-outline-error has-invalid:border-solid has-invalid:bg-input-outlined-error has-invalid:text-text-default-1",
+          "disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-3",
+          "has-disabled:border-input-outlined-outline-disabled has-disabled:border-solid has-disabled:bg-input-outlined-disabled has-disabled:text-text-default-3",
+          "disabled:hover:border-input-outlined-outline-disabled disabled:hover:bg-input-outlined-disabled disabled:hover:text-text-default-3",
+          "has-disabled:hover:border-input-outlined-outline-disabled has-disabled:hover:bg-input-outlined-disabled has-disabled:hover:text-text-default-3",
+          "[&_input]:placeholder:text-text-default-3",
+          "disabled:placeholder:text-interactive-text-secondary-disabled",
+          "has-disabled:placeholder:text-interactive-text-secondary-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+          "has-focus-visible:outline-interactive-contained-primary-focus",
+        ],
+      },
+      {
+        variant: "filled",
+        as: "floating",
+        className: [
+          "border border-transparent border-solid bg-input-filled-idle text-text-default-1",
+          "hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
+          "focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-idle focus-within:text-text-default-1",
+          "invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
+          "has-invalid:border-input-filled-outline-error has-invalid:border-solid has-invalid:bg-input-filled-error has-invalid:text-text-default-1",
+          "disabled:bg-input-filled-disabled disabled:text-text-default-3",
+          "has-disabled:bg-input-filled-disabled has-disabled:text-text-default-3",
+          "disabled:hover:border-transparent disabled:hover:bg-input-filled-disabled disabled:hover:text-text-default-3",
+          "has-disabled:hover:border-transparent has-disabled:hover:bg-input-filled-disabled has-disabled:hover:text-text-default-3",
+          "[&_input]:placeholder:text-text-default-3",
+          "disabled:placeholder:text-interactive-text-secondary-disabled",
+          "has-disabled:placeholder:text-interactive-text-secondary-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+          "has-focus-visible:outline-interactive-contained-primary-focus",
+        ],
+      },
+      {
+        variant: "outlined",
+        as: "filter",
+        className: [
+          "border border-input-outlined-outline-idle border-solid bg-input-outlined-idle text-text-default-1",
+          "hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
+          "focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
+          "invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
+          "has-invalid:border-input-outlined-outline-error has-invalid:border-solid has-invalid:bg-input-outlined-error has-invalid:text-text-default-1",
+          "disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-3",
+          "has-disabled:border-input-outlined-outline-disabled has-disabled:border-solid has-disabled:bg-input-outlined-disabled has-disabled:text-text-default-3",
+          "disabled:hover:border-input-outlined-outline-disabled disabled:hover:bg-input-outlined-disabled disabled:hover:text-text-default-3",
+          "has-disabled:hover:border-input-outlined-outline-disabled has-disabled:hover:bg-input-outlined-disabled has-disabled:hover:text-text-default-3",
+          "[&_input]:placeholder:text-text-default-3",
+          "disabled:placeholder:text-interactive-text-secondary-disabled",
+          "has-disabled:placeholder:text-interactive-text-secondary-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+          "has-focus-visible:outline-interactive-contained-primary-focus",
+        ],
+      },
+      {
+        variant: "filled",
+        as: "filter",
+        className: [
+          "border border-transparent border-solid bg-input-filled-idle text-text-default-1",
+          "hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
+          "focus-within:border-input-filled-outline-active focus-within:border-solid focus-within:bg-input-filled-active focus-within:text-text-default-1",
+          "has-invalid:border-input-filled-outline-error has-invalid:border-solid has-invalid:bg-input-filled-error has-invalid:text-text-default-1",
+          "invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
+          "disabled:bg-input-filled-disabled disabled:text-text-default-3",
+          "has-disabled:bg-input-filled-disabled has-disabled:text-text-default-3",
+          "disabled:hover:border-transparent disabled:hover:bg-input-filled-disabled disabled:hover:text-text-default-3",
+          "has-disabled:hover:border-transparent has-disabled:hover:bg-input-filled-disabled has-disabled:hover:text-text-default-3",
+          "[&_input]:placeholder:text-text-default-3",
+          "disabled:placeholder:text-interactive-text-secondary-disabled",
+          "has-disabled:placeholder:text-interactive-text-secondary-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+          "has-focus-visible:outline-interactive-contained-primary-focus",
+        ],
+      },
+    ],
+    defaultVariants: {
+      variant: "outlined",
+      as: "default",
+    },
+  },
+});
+
+export const inputSizeOverride = UIOverrides.defineOverride("input.sizeCva", {
+  mode: "overrideCva",
+  base: [""],
+  config: {
+    compoundVariants: [
+      {
+        as: ["default", "filter", "inline"],
+        className: "px-input-side-xs py-input-height-xs text-label-2! [&>button>p]:text-label-2! ",
+        size: "extra-small",
+      },
+      {
+        as: ["default", "filter", "inline"],
+        className: "px-input-side-s py-input-height-s",
+        size: "small",
+      },
+      {
+        as: ["default", "filter", "inline"],
+        className: "px-input-side-m py-input-height-m",
+        size: "default",
+      },
+      {
+        as: ["default", "filter", "inline"],
+        className: "px-input-side-l py-input-height-l",
+        size: "large",
+      },
+      {
+        as: ["filter"],
+        className:
+          "text-label-2! [&_[data-type=select-trigger]]:text-left [&>button]:text-left [&>button>p]:text-left [&>label]:text-text-default-2! pr-0",
+        size: "extra-small",
+      },
+    ],
+    defaultVariants: {
+      as: "default",
+      size: "default",
+    },
+    variants: {
+      as: {
+        default: "",
+        filter: "",
+        floating: [
+          "px-input-side-m",
+          "py-floating-label-input-height-empty",
+
+          // "input-filled" selector defined in tw-ui-plugin.ts in @povio/ui as a Tailwind Plugin
+          "input-filled:pb-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-bottom))]",
+          "input-filled:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top)+var(--text-label-3--line-height)*var(--text-label-3))]",
+        ],
+        inline: "",
+      },
+      size: {
+        default: "text-label-1",
+        "extra-small": "text-label-1",
+        large: "text-label-1",
+        small: "text-label-1",
+      },
+    },
+  },
+});
+
+export const inputSideOverride = UIOverrides.defineOverride("input.sideCva", {
+  mode: "overrideCva",
+  base: [""],
+  config: {
+    compoundVariants: [
+      { className: "left-input-side-xs", size: "extra-small", type: "left" },
+      { className: "right-input-side-xs", size: "extra-small", type: "right" },
+      { className: "--spacing-input-side-xs", size: "extra-small", type: "var" },
+      { className: "left-input-side-s", size: "small", type: "left" },
+      { className: "right-input-side-s", size: "small", type: "right" },
+      { className: "--spacing-input-side-s", size: "small", type: "var" },
+      { className: "left-input-side-m", size: "default", type: "left" },
+      { className: "right-input-side-m", size: "default", type: "right" },
+      { className: "--spacing-input-side-m", size: "default", type: "var" },
+      { className: "left-input-side-l", size: "large", type: "left" },
+      { className: "right-input-side-l", size: "large", type: "right" },
+      { className: "--spacing-input-side-l", size: "large", type: "var" },
+    ],
+    defaultVariants: {
+      size: "default",
+    },
+    variants: {
+      size: {
+        default: "",
+        "extra-small": "",
+        large: "",
+        small: "",
+      },
+      type: {
+        left: "",
+        right: "",
+        var: "",
+      },
+    },
+  },
+});

package/templates/space/apps/fe/src/styles/overrides/defaults/label.override.ts

@@ -0,0 +1,91 @@
+import { type TypographyVariantProps, UIOverrides, compoundMapper, type labelDefinition } from "@povio/ui";
+
+export const labelBaseOverride = UIOverrides.defineOverride("label.cva", {
+  mode: "overrideCva",
+  base: [""],
+  config: {
+    defaultVariants: {
+      as: "default",
+    },
+    variants: {
+      as: {
+        default: ["flex items-start gap-1 text-text-default-1"],
+        filter: ["text-text-default-1"],
+        floating: [
+          "pointer-events-none",
+          "absolute transition-all duration-75",
+          "top-1/2 -translate-y-1/2",
+
+          "text-text-default-3",
+
+          // "input-disabled" selector defined in tw-ui-plugin.ts in @povio/ui as a Tailwind Plugin
+          "input-disabled:text-interactive-text-secondary-disabled!",
+
+          // "input-filled" selector defined in tw-ui-plugin.ts in @povio/ui as a Tailwind Plugin
+          "input-filled:top-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top))]",
+          "input-filled:translate-y-0",
+          "input-filled:text-text-default-1",
+          "input-filled:font-semibold!",
+          "input-filled:text-label-3!",
+
+          // TextArea
+          "group-data-[text-area]/text-area:top-floating-label-input-height-empty group-data-[text-area]/text-area:translate-y-0",
+          "group-has-[textarea:not(:placeholder-shown)]/text-area:hidden",
+
+          // TextEditor
+          "group-data-[text-editor]/text-editor:top-floating-label-input-height-empty group-data-[text-editor]/text-editor:left-input-side-default group-data-[text-editor]/text-editor:translate-y-0",
+          "group-data-[is-filled=true]/text-editor:hidden",
+        ],
+        inline: ["flex items-start gap-1 text-text-default-1"],
+      },
+    },
+  },
+});
+
+export type LabelConfig = NonNullable<typeof labelDefinition.config>;
+export interface LabelBaseProps extends UIOverrides.VariantProps<LabelConfig> {}
+
+export const labelTypography = compoundMapper<TypographyVariantProps, LabelBaseProps>({
+  compoundVariants: [
+    {
+      as: "default",
+      value: {
+        size: "label-2",
+        sizeMobile: "label-2",
+        variant: "prominent-1",
+      },
+    },
+    {
+      as: "filter",
+      value: {
+        size: "label-2",
+        sizeMobile: "label-2",
+        variant: "default",
+      },
+    },
+    {
+      as: "inline",
+      value: {
+        size: "label-2",
+        sizeMobile: "label-2",
+        variant: "prominent-1",
+      },
+    },
+    {
+      as: "floating",
+      value: {
+        size: "label-1",
+        sizeMobile: "label-1",
+        variant: "default",
+      },
+    },
+  ],
+  default: {
+    size: "label-2",
+    sizeMobile: "label-2",
+    variant: "prominent-1",
+  },
+  defaultVariants: {
+    as: "default",
+  },
+});

package/templates/space/apps/fe/src/styles/overrides/defaults/modal.override.ts

@@ -0,0 +1,57 @@
+import { UIOverrides } from "@povio/ui";
+
+export const modalContentOverride = UIOverrides.defineOverride("modal.contentCva", {
+  mode: "overrideCva",
+  base: [
+    "relative flex flex-col items-center gap-modal-gap-content px-modal-side-mobile py-modal-height-mobile md:px-modal-side-desktop md:py-modal-height-desktop",
+    "w-fit max-w-full [&>*]:max-w-full",
+    "border-elevation-outline-default-1 bg-elevation-fill-default-1 outline-none",
+    "pointer-events-auto",
+  ],
+  config: {
+    defaultVariants: {
+      aside: "center",
+    },
+    variants: {
+      aside: {
+        center: "rounded-modal-rounding-default border",
+        left: "h-screen rounded-none border-r",
+        right: "h-screen rounded-none border-l",
+      },
+    },
+  },
+});
+
+export const modalOverlayOverride = UIOverrides.defineOverride("modal.overlayCva", {
+  mode: "overrideCva",
+  base: ["fixed inset-0 z-15 flex h-(--visual-viewport-height) w-screen overflow-y-auto bg-support-overlay"],
+  config: {
+    defaultVariants: {
+      aside: "center",
+    },
+    variants: {
+      aside: {
+        center: "p-4",
+        left: "p-0",
+        right: "p-0",
+      },
+    },
+  },
+});
+
+export const modalMainOverride = UIOverrides.defineOverride("modal.mainCva", {
+  mode: "overrideCva",
+  base: ["pointer-events-none my-auto flex w-full"],
+  config: {
+    defaultVariants: {
+      aside: "center",
+    },
+    variants: {
+      aside: {
+        center: "justify-center",
+        left: "entering:animate-drawer-enter-left exiting:animate-drawer-exit-left justify-start",
+        right: "entering:animate-drawer-enter-right exiting:animate-drawer-exit-right justify-end",
+      },
+    },
+  },
+});

package/templates/space/apps/fe/src/styles/overrides/defaults/radio.override.ts

@@ -0,0 +1,46 @@
+import { type TypographyVariantProps, UIOverrides, compoundMapper } from "@povio/ui";
+
+export const radioOverride = UIOverrides.defineOverride("radio.cva", {
+  mode: "overrideCva",
+  base: [
+    "flex items-center justify-center border-2",
+    "relative size-3-5 rounded-full p-1-5",
+    "before:absolute before:hidden before:size-1 before:rounded-full",
+  ],
+  config: {
+    defaultVariants: {
+      variant: "default",
+    },
+    variants: {
+      variant: {
+        default: [
+          "border-interactive-outlined-secondary-on-idle",
+          "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-disabled:bg-interactive-contained-primary-disabled",
+          "group-selected:group-disabled:border-interactive-contained-primary-disabled",
+          "group-invalid:border-interactive-outlined-error-on-idle",
+          "group-focus-visible:outline-interactive-contained-primary-focus",
+          "before:bg-interactive-contained-primary-on-idle",
+          "group-hover:before:bg-interactive-contained-primary-on-hover",
+          "group-selected:before:block",
+        ],
+      },
+    },
+  },
+});
+
+export interface RadioVariantProps extends UIOverrides.OverrideVariantProps<typeof radioOverride> {}
+
+export const radioIndicatorClass = "group flex items-center gap-2";
+
+export const radioTypography = compoundMapper<TypographyVariantProps, RadioVariantProps>({
+  default: {
+    size: "label-2",
+    sizeMobile: "label-2",
+    variant: "default",
+  },
+});

package/templates/space/apps/fe/src/styles/overrides/defaults/table.override.ts

@@ -0,0 +1,104 @@
+import { UIOverrides } from "@povio/ui";
+
+export const tableHeadDataOverride = UIOverrides.defineOverride("table.headDataCva", {
+  mode: "overrideCva",
+  base: [
+    "border-b border-b-elevation-outline-default-1 border-solid text-left",
+    "px-[calc(var(--container-table-header-cell-container-side-default)+var(--container-table-cell-content-side-m))]",
+    "py-[calc(var(--container-table-header-cell-container-height-xs)+var(--container-table-cell-content-height-m))]",
+    "group-data-[is-sticky=true]/table-head:bg-elevation-fill-default-1",
+  ],
+  config: {
+    defaultVariants: {
+      hasRightBorder: false,
+    },
+    variants: {
+      hasRightBorder: {
+        false: "",
+        true: "border-l border-l-elevation-outline-default-1 border-solid",
+      },
+    },
+  },
+});
+
+export interface TableHeadDataVariantProps extends UIOverrides.OverrideVariantProps<typeof tableHeadDataOverride> {}
+
+export const tableRowOverride = UIOverrides.defineOverride("table.rowCva", {
+  mode: "overrideCva",
+  base: [
+    "h-9 max-h-12",
+    "data-clickable:hover:bg-elevation-fill-default-2-5",
+    "disabled:opacity-50",
+    "selected:bg-elevation-fill-default-4",
+    "data-clickable:hover:selected:bg-elevation-fill-3",
+    "data-clickable:cursor-pointer",
+    "focus-within:bg-elevation-fill-default-4",
+  ],
+  config: {
+    defaultVariants: {
+      actionsOnHover: false,
+      disableInteractions: false,
+    },
+    variants: {
+      actionsOnHover: {
+        false: "",
+        true: "group/actions-on-hover actions-on-hover",
+      },
+      alternatingBackground: {
+        even: "even:bg-elevation-fill-inverted-4/5",
+        odd: "odd:bg-elevation-fill-inverted-4/5",
+      },
+      disableInteractions: {
+        false: "",
+        true: [
+          "hover:!bg-transparent",
+          "focus-within:!bg-transparent",
+          "selected:!bg-transparent",
+          "hover:selected:!bg-transparent",
+          "data-clickable:!cursor-default",
+        ],
+      },
+    },
+  },
+});
+
+export interface TableRowVariantProps extends UIOverrides.OverrideVariantProps<typeof tableRowOverride> {}
+
+export const tableDataOverride = UIOverrides.defineOverride("table.dataCva", {
+  mode: "overrideCva",
+  base: [
+    "relative h-0-5 overflow-hidden text-ellipsis whitespace-nowrap border-t border-t-transparent px-2",
+    "px-[calc(var(--container-table-cell-container-side-default)+var(--container-table-cell-content-side-m))]",
+    "py-[calc(var(--container-table-cell-container-height-xs)+var(--container-table-cell-content-height-s))]",
+    "border-b border-b-elevation-outline-default-1",
+    "has-[*>[data-invalid]]:border-b-input-outlined-outline-error!",
+    "outline-none focus:outline-none focus-visible:outline-none",
+  ],
+  config: {
+    defaultVariants: {
+      hasRightBorder: false,
+    },
+    variants: {
+      hasRightBorder: {
+        false: "",
+        true: "border-l border-l-elevation-outline-default-1",
+      },
+    },
+  },
+});
+
+export interface TableDataVariantProps extends UIOverrides.OverrideVariantProps<typeof tableDataOverride> {}
+
+export const tableHeaderTextOverride = UIOverrides.defineOverride("table.headerTextCva", {
+  mode: "overrideCva",
+  base: ["whitespace-nowrap"],
+});
+
+export interface TableHeaderTextVariantProps extends UIOverrides.OverrideVariantProps<typeof tableHeaderTextOverride> {}
+
+export const tableCellTextOverride = UIOverrides.defineOverride("table.cellTextCva", {
+  mode: "overrideCva",
+  base: ["block overflow-hidden text-ellipsis text-text-default-2"],
+});
+
+export interface TableCellTextVariantProps extends UIOverrides.OverrideVariantProps<typeof tableCellTextOverride> {}

package/templates/space/apps/fe/src/styles/overrides/defaults/tag.override.ts

@@ -0,0 +1,66 @@
+import { UIOverrides, uiOutlineClass } from "@povio/ui";
+
+export const tagOverride = UIOverrides.defineOverride("tag.cva", {
+  mode: "overrideCva",
+  base: [
+    uiOutlineClass,
+    "inline-flex items-center gap-list-gap-icon-to-label",
+    "p-pill-height-s px-1-5",
+    "rounded-pill-rounding-default",
+    "overflow-hidden",
+    "disabled:cursor-default",
+    "border",
+  ],
+  config: {
+    defaultVariants: {
+      color: "primary",
+    },
+    variants: {
+      color: {
+        error: [
+          "border-interactive-subtle-error-idle bg-interactive-subtle-error-idle text-interactive-subtle-error-on-idle",
+          "hover:bg-interactive-subtle-error-hover hover:text-interactive-subtle-error-on-hover",
+          "pressed:bg-interactive-subtle-error-pressed pressed:text-interactive-subtle-error-on-pressed",
+          "disabled:bg-interactive-subtle-error-disabled disabled:text-interactive-subtle-error-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+        ],
+        primary: [
+          "border-interactive-subtle-primary-idle bg-interactive-subtle-primary-idle text-interactive-subtle-primary-on-idle",
+          "hover:bg-interactive-subtle-primary-hover hover:text-interactive-subtle-primary-on-hover",
+          "pressed:bg-interactive-subtle-primary-pressed pressed:text-interactive-subtle-primary-on-pressed",
+          "disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+        ],
+        purple: ["border-support-status-purple-bg bg-support-status-purple-bg text-support-status-purple-on"],
+        secondary: [
+          "border-interactive-subtle-secondary-idle bg-interactive-subtle-secondary-idle text-interactive-subtle-secondary-on-idle",
+          "hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
+          "pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
+          "disabled:bg-interactive-subtle-secondary-disabled disabled:text-interactive-subtle-secondary-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+        ],
+        success: [
+          "border-interactive-subtle-success-idle bg-interactive-subtle-success-idle text-interactive-subtle-success-on-idle",
+          "hover:bg-interactive-subtle-success-hover hover:text-interactive-subtle-success-on-hover",
+          "pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-pressed",
+          "disabled:bg-interactive-subtle-success-disabled disabled:text-interactive-subtle-success-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+        ],
+        teal: ["border-support-status-teal-bg bg-support-status-teal-bg text-support-status-teal-on"],
+        warning: [
+          "border-interactive-subtle-warning-idle bg-interactive-subtle-warning-idle text-interactive-subtle-warning-on-idle",
+          "hover:bg-interactive-subtle-warning-hover hover:text-interactive-subtle-warning-on-hover",
+          "pressed:bg-interactive-subtle-warning-pressed pressed:text-interactive-subtle-warning-on-pressed",
+          "disabled:bg-interactive-subtle-warning-disabled disabled:text-interactive-subtle-warning-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+        ],
+        white: [
+          "border-interactive-subtle-secondary-idle bg-support-status-white-bg text-interactive-subtle-secondary-on-idle",
+        ],
+        yellow: ["border-support-status-yellow-bg bg-support-status-yellow-bg text-support-status-yellow-on"],
+      },
+    },
+  },
+});
+
+export interface TagVariantProps extends UIOverrides.OverrideVariantProps<typeof tagOverride> {}