Mislav Lukach 764077ef3d
Feat/create UI dir (#9462)
Co-authored-by: amanape <83104063+amanape@users.noreply.github.com>
2025-07-03 13:26:19 +00:00

31 lines
1.4 KiB
TypeScript

import { cn } from "../../shared/utils/cn";
export type InteractiveChipType = "elevated" | "filled";
export const interactiveChipStyles: Record<InteractiveChipType, string> = {
elevated: cn([
// base
"data-[disabled=false]:border-1 border-light-neutral-400 text-light-neutral-400 bg-light-neutral-950 font-normal",
// hover modifier
"hover:border-light-neutral-100 hover:data-[disabled=false]:text-light-neutral-100 hover:data-[disabled=false]:font-semibold hover:data-[disabled=false]:bg-light-neutral-800",
// focus modifier
"focus:border-light-neutral-100 focus:text-light-neutral-100 focus:font-semibold focus:bg-light-neutral-800",
// active modifier
"active:data-[disabled=false]:border-primary-500 active:data-[disabled=false]:text-primary-500",
// disabled modifier
"data-[disabled=true]:opacity-50 data-[disabled=true]:bg-light-neutral-900",
]),
filled: cn([
// base
"text-grey-985 bg-light-neutral-600 font-normal",
// hover modifier
"hover:data-[disabled=false]:font-semibold hover:data-[disabled=false]:bg-light-neutral-300",
// focus modifier
"focus:data-[disabled=false]:font-semibold focus:data-[disabled=false]:bg-light-neutral-300",
// active modifier
"active:data-[disabled=false]:bg-primary-100",
// disabled modifier
"data-[disabled=true]:opacity-40 data-[disabled=true]:bg-light-neutral-400",
]),
};