UNPKG

@payfit/unity-components

Version:

171 lines (170 loc) 9.93 kB
import { uyTv as e } from "@payfit/unity-themes"; //#region src/components/icon-button/IconButton.variants.ts var t = e({ base: [ "uy:group", "uy:w-5.5 uy:min-w-5.5 uy:h-5.5 uy:sm:w-500 uy:sm:min-w-500 uy:sm:h-500 uy:min-h-500", "uy:inline-flex uy:justify-center uy:items-center", "uy:rounded-100 uy:sm:rounded-75 uy:cursor-pointer", "uy:transition-colors", "uy:data-[focus-visible=\"true\"]:outline-2 uy:data-[focus-visible=\"true\"]:outline-solid uy:data-[focus-visible=\"true\"]:outline-offset-2 uy:data-[focus-visible=\"true\"]:outline-utility-focus-ring" ], variants: { isDisabled: { true: "uy:disabled:cursor-not-allowed", false: "" }, isLoading: { true: "uy:data-[loading]:cursor-progress uy:data-[loading]:text-content-neutral-disabled", false: "" } }, defaultVariants: { isDisabled: !1, isLoading: !1 } }), n = e({ extend: t, variants: { color: { primary: [ "uy:theme-legacy:bg-surface-primary-enabled uy:theme-rebrand:bg-surface-neutral-highest-enabled uy:text-content-inverted-enabled", "uy:theme-legacy:data-[hovered=\"true\"]:bg-surface-primary-hover uy:theme-rebrand:data-[hovered=\"true\"]:bg-surface-neutral-highest-hover uy:data-[hovered=\"true\"]:text-content-inverted-hover", "uy:theme-legacy:active:bg-surface-primary-active uy:theme-rebrand:active:bg-surface-neutral-highest-active uy:active:text-content-inverted-hover", "uy:theme-legacy:data-[pressed]:bg-surface-primary-pressed uy:theme-rebrand:data-[pressed]:bg-surface-neutral-highest-pressed uy:theme-legacy:data-[pressed]:text-content-inverted-pressed uy:theme-rebrand:data-[pressed]:text-content-neutral-pressed" ], warning: [ "uy:bg-surface-warning-enabled uy:text-content-neutral-enabled", "uy:data-[hovered=\"true\"]:bg-surface-warning-hover uy:data-[hovered=\"true\"]:text-content-neutral-hover", "uy:active:bg-surface-warning-active uy:active:text-content-neutral-active", "uy:data-[pressed]:bg-surface-warning-pressed uy:data-[pressed]:text-content-neutral-pressed" ], danger: [ "uy:bg-surface-danger-enabled uy:theme-legacy:text-content-inverted-enabled uy:theme-rebrand:text-content-inverted", "uy:data-[hovered=\"true\"]:bg-surface-danger-hover uy:theme-legacy:data-[hovered=\"true\"]:text-content-inverted-hover", "uy:active:bg-surface-danger-active uy:theme-legacy:active:text-content-inverted", "uy:data-[pressed]:bg-surface-danger-pressed uy:theme-legacy:data-[pressed]:text-content-inverted" ], neutral: [ "uy:bg-surface-neutral-low-enabled uy:text-content-neutral-enabled", "uy:data-[hovered=\"true\"]:bg-surface-neutral-low-hover uy:data-[hovered=\"true\"]:text-content-neutral-hover", "uy:active:bg-surface-neutral-low-active uy:active:text-content-neutral-active", "uy:data-[pressed]:bg-surface-neutral-low-pressed uy:data-[pressed]:text-content-neutral-pressed" ], inverted: [ "uy:bg-surface-neutral-enabled uy:text-content-neutral-enabled", "uy:data-[hovered=\"true\"]:bg-surface-neutral-hover uy:data-[hovered=\"true\"]:text-content-neutral-hover", "uy:active:bg-surface-neutral-active uy:active:text-content-neutral-active", "uy:data-[pressed]:bg-surface-neutral-active uy:data-[pressed]:text-content-neutral-pressed", "uy:data-[focus-visible]:outline-utility-inverted-focus-ring uy:data-[focus-visible]:text-content-neutral-focus uy:data-[focus-visible]:bg-surface-neutral-focus" ], "inverted.low": [ "uy:bg-surface-inverted-low-enabled uy:text-content-inverted-enabled", "uy:data-[hovered=\"true\"]:bg-surface-inverted-low-hover uy:data-[hovered=\"true\"]:text-content-inverted-hover", "uy:active:bg-surface-inverted-low-active uy:active:text-content-inverted-active", "uy:data-[pressed=\"true\"]:bg-surface-inverted-low-pressed uy:data-[pressed=\"true\"]:text-content-inverted-pressed", "uy:data-[focus-visible=\"true\"]:outline-utility-inverted-focus-ring uy:data-[focus-visible=\"true\"]:text-content-inverted-focus uy:data-[focus-visible=\"true\"]:bg-surface-inverted-low-focus" ] }, isDisabled: { true: "uy:disabled:bg-surface-neutral-disabled uy:disabled:text-content-neutral-disabled", false: "" }, isLoading: { true: "uy:data-[loading]:bg-surface-neutral-disabled uy:data-[loading]:text-content-neutral-disabled", false: "" } } }), r = e({ extend: t, base: "uy:border uy:border-solid uy:bg-transparent", variants: { color: { primary: [ "uy:text-content-neutral-enabled uy:border-border-neutral-high-enabled", "uy:data-[hovered=\"true\"]:text-content-neutral-hover uy:data-[hovered=\"true\"]:border-border-neutral-high-hover", "uy:theme-legacy:data-[pressed=\"true\"]:text-content-neutral-high-pressed uy:theme-legacy:data-[pressed=\"true\"]:border-border-neutral-high-pressed", "uy:theme-rebrand:data-[pressed=\"true\"]:text-content-neutral-pressed uy:theme-rebrand:data-[pressed=\"true\"]:bg-surface-neutral-low-pressed uy:theme-rebrand:data-[pressed=\"true\"]:border-surface-neutral-low-pressed", "uy:data-[focus-visible=\"true\"]:border-border-neutral-high-focus uy:data-[focus-visible=\"true\"]:text-content-neutral-focus" ], inverted: [ "uy:text-content-inverted-enabled uy:border-border-inverted-enabled", "uy:theme-legacy:data-[pressed=\"true\"]:text-content-inverted-pressed uy:theme-legacy:data-[pressed=\"true\"]:border-border-inverted-pressed", "uy:theme-rebrand:data-[pressed=\"true\"]:text-content-neutral-pressed uy:theme-rebrand:data-[pressed=\"true\"]:bg-surface-neutral-low-pressed uy:theme-rebrand:data-[pressed=\"true\"]:border-surface-neutral-low-pressed", "uy:data-[focus-visible]:outline-utility-inverted-focus-ring" ] }, isDisabled: { true: "uy:disabled:text-content-neutral-disabled uy:disabled:border-border-neutral-disabled uy:data-[disabled]:border-border-neutral-disabled", false: "" }, isLoading: { true: "uy:data-[loading]:text-content-neutral-disabled uy:data-[loading]:border-border-neutral-disabled" } } }), i = e({ extend: t, variants: { color: { primary: [ "uy:bg-transparent uy:theme-legacy:text-content-primary-enabled uy:theme-rebrand:text-content-neutral-enabled", "uy:theme-legacy:data-[hovered=\"true\"]:bg-surface-primary-lowest-hover uy:theme-rebrand:data-[hovered=\"true\"]:bg-surface-neutral-hover uy:theme-legacy:data-[hovered=\"true\"]:text-content-primary-hover uy:theme-rebrand:data-[hovered=\"true\"]:text-content-neutral-hover", "uy:theme-legacy:active:bg-surface-primary-lowest-active uy:theme-rebrand:active:bg-surface-neutral-active uy:theme-legacy:active:text-content-primary-active uy:theme-rebrand:active:text-content-neutral-active", "uy:theme-legacy:data-[pressed=true]:bg-surface-primary-lowest-pressed uy:theme-rebrand:data-[pressed=true]:bg-surface-neutral-pressed uy:theme-legacy:data-[pressed=true]:text-content-primary-pressed uy:theme-rebrand:data-[pressed=true]:text-content-neutral-pressed", "uy:data-[focus-visible]:bg-transparent uy:theme-rebrand:data-[focus-visible]:text-content-neutral-focus" ], warning: [ "uy:bg-transparent uy:text-content-warning-enabled", "uy:data-[hovered=\"true\"]:bg-surface-warning-lowest-hover uy:data-[hovered=\"true\"]:text-content-warning-hover", "uy:active:bg-surface-warning-lowest-active uy:active:text-content-warning-active", "uy:data-[pressed=true]:bg-surface-warning-lowest-pressed uy:data-[pressed=true]:text-content-warning-pressed", "uy:data-[focus-visible]:bg-transparent" ], danger: [ "uy:bg-transparent uy:text-content-danger-enabled", "uy:data-[hovered=\"true\"]:bg-surface-danger-lowest-hover uy:data-[hovered=\"true\"]:text-content-danger-hover", "uy:active:bg-surface-danger-lowest-active uy:active:text-content-danger-active", "uy:data-[pressed=true]:bg-surface-danger-lowest-pressed uy:data-[pressed=true]:text-content-danger-pressed", "uy:data-[focus-visible]:bg-transparent" ], neutral: [ "uy:bg-transparent uy:text-content-neutral-enabled", "uy:data-[hovered=\"true\"]:bg-surface-neutral-hover uy:data-[hovered=\"true\"]:text-content-neutral-hover", "uy:active:bg-surface-neutral-active uy:active:text-content-neutral-active", "uy:data-[pressed=true]:bg-surface-neutral-pressed uy:data-[pressed=true]:text-content-neutral-pressed", "uy:data-[focus-visible]:bg-transparent" ], "neutral.lowest": [ "uy:bg-transparent uy:text-content-neutral-enabled", "uy:data-[hovered=\"true\"]:bg-surface-neutral-lowest-hover uy:data-[hovered=\"true\"]:text-content-neutral-hover", "uy:active:bg-surface-neutral-lowest-active uy:active:text-content-neutral-active", "uy:data-[pressed=true]:bg-surface-neutral-lowest-pressed uy:data-[pressed=true]:text-content-neutral-pressed", "uy:data-[focus-visible]:bg-transparent" ], inverted: [ "uy:bg-transparent uy:text-content-inverted-enabled", "uy:data-[hovered=\"true\"]:bg-surface-inverted-hover uy:data-[hovered=\"true\"]:text-content-inverted-hover", "uy:active:bg-surface-inverted-active uy:active:text-content-inverted-active", "uy:data-[pressed=true]:bg-surface-inverted-pressed uy:data-[pressed=true]:text-content-inverted-pressed", "uy:data-[focus-visible]:outline-utility-inverted-focus-ring uy:data-[focus-visible]:bg-transparent" ] }, isDisabled: { true: "uy:disabled:text-content-neutral-disabled uy:disabled:bg-transparent", false: "" }, isLoading: { true: "uy:data-[loading]:text-content-neutral-disabled uy:data-[loading]:bg-transparent", false: "" } }, compoundVariants: [{ isDisabled: !0, color: "inverted", className: ["uy:disabled:text-content-inverted-disabled"] }, { isLoading: !0, color: "inverted", className: ["uy:data-[loading]:text-content-inverted-disabled"] }] }); //#endregion export { n as iconButtonFilled, i as iconButtonGhost, r as iconButtonOutlined };