diff --git a/src/components/Textarea/Textarea.module.css b/src/components/Textarea/Textarea.module.css index 25f9c3d..46c6b65 100644 --- a/src/components/Textarea/Textarea.module.css +++ b/src/components/Textarea/Textarea.module.css @@ -156,6 +156,24 @@ } } + /* ============================================= + Ghost variant + ============================================= */ + &:where([data-variant="ghost"]) { + /* No background or border by default, blends with container */ + background-color: transparent; + + &:not([data-disabled]) { + &[data-focused="true"] { + box-shadow: 0 0 0 1px var(--input-soft-border-color-focus) inset; + } + + &[data-invalid] { + box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset; + } + } + } + /* ============================================= Invalid ============================================= */ diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx index 5f18d55..65b9815 100644 --- a/src/components/Textarea/Textarea.tsx +++ b/src/components/Textarea/Textarea.tsx @@ -12,8 +12,7 @@ export type TextareaProps = { * Visual style of the textarea * @default outline */ - variant?: Variants<"outline" | "soft"> - /** + variant?: Variants<"outline" | "soft" | "ghost"> /** * Controls the size of the textarea * * | 3xs | 2xs | xs | sm | md | lg | xl | 2xl | 3xl |