Skip to content

style: remove shadows from buttons and form controls #587

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
ishigakijunichi wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

style: remove shadows from buttons and form controls #587

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/quiet-controls-flat.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@tailor-platform/app-shell": patch
---

Remove the shadow from Button `secondary` and from the text controls (Input, Textarea, Field.Control, DateField, Select, Combobox, Autocomplete).
4 changes: 2 additions & 2 deletions packages/core/__snapshots__/src__components__ai-chat__ai-chat.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`AIChat > snapshots > default 1`] = `"<div data-slot="ai-chat" class="astw:flex astw:h-full astw:min-h-0 astw:flex-1 astw:flex-col"><div data-slot="ai-chat-conversation" class="astw:relative astw:min-h-0 astw:flex-1"><div role="log" class="astw:h-full astw:overflow-y-auto"><div class="astw:flex astw:min-h-full astw:flex-col"><div class="astw:flex astw:flex-1 astw:flex-col astw:gap-3 astw:px-3 astw:py-3"><div data-slot="ai-chat-message" data-from="assistant" class="astw:flex astw:w-full astw:flex-col astw:gap-2"><div data-slot="ai-chat-message-content" class="astw:flex astw:min-w-0 astw:max-w-full astw:flex-col astw:gap-2 astw:text-sm astw:leading-relaxed astw:w-full astw:px-3 astw:py-2 astw:text-foreground"><div data-slot="ai-chat-response" class="astw:space-y-2"><p class="astw:whitespace-pre-wrap">Hello there.</p></div></div></div></div></div></div></div><form data-slot="ai-chat-composer" class="astw:flex astw:shrink-0 astw:flex-col astw:gap-2 astw:p-3 astw:pt-0"><textarea id="base-ui-_r_0_" data-slot="textarea" aria-label="Message" rows="2" class="astw:border-input astw:flex astw:w-full astw:min-w-0 astw:rounded-md astw:border astw:bg-transparent astw:px-3 astw:text-base astw:shadow-xs astw:outline-none astw:md:text-sm astw:dark:bg-input/30 astw:transition-[color,box-shadow] astw:selection:bg-primary astw:selection:text-primary-foreground astw:placeholder:text-muted-foreground astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:pointer-events-none astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:min-h-16 astw:py-2 astw:resize-y astw:data-invalid:border-destructive astw:data-invalid:ring-destructive/20 astw:dark:data-invalid:ring-destructive/40 astw:aria-invalid:border-destructive astw:aria-invalid:ring-destructive/20 astw:dark:aria-invalid:ring-destructive/40"></textarea><div class="astw:flex astw:items-center astw:justify-between astw:gap-2"><div class="astw:flex astw:min-w-0 astw:items-center astw:gap-2"></div><div class="astw:shrink-0"><button type="submit" data-slot="button" class="astw:inline-flex astw:cursor-pointer astw:items-center astw:justify-center astw:gap-2 astw:whitespace-nowrap astw:rounded-md astw:text-sm astw:font-medium astw:transition-all astw:disabled:pointer-events-none astw:disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:shrink-0 astw:[&amp;_svg]:shrink-0 astw:outline-none astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:aria-invalid:ring-destructive/20 astw:dark:aria-invalid:ring-destructive/40 astw:aria-invalid:border-destructive astw:bg-primary astw:text-primary-foreground astw:shadow-xs astw:hover:bg-primary/90 astw:h-9 astw:px-4 astw:py-2 astw:has-[>svg]:px-3" disabled=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up astw:size-4" aria-hidden="true"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg>Send</button></div></div></form></div>"`;
exports[`AIChat > snapshots > default 1`] = `"<div data-slot="ai-chat" class="astw:flex astw:h-full astw:min-h-0 astw:flex-1 astw:flex-col"><div data-slot="ai-chat-conversation" class="astw:relative astw:min-h-0 astw:flex-1"><div role="log" class="astw:h-full astw:overflow-y-auto"><div class="astw:flex astw:min-h-full astw:flex-col"><div class="astw:flex astw:flex-1 astw:flex-col astw:gap-3 astw:px-3 astw:py-3"><div data-slot="ai-chat-message" data-from="assistant" class="astw:flex astw:w-full astw:flex-col astw:gap-2"><div data-slot="ai-chat-message-content" class="astw:flex astw:min-w-0 astw:max-w-full astw:flex-col astw:gap-2 astw:text-sm astw:leading-relaxed astw:w-full astw:px-3 astw:py-2 astw:text-foreground"><div data-slot="ai-chat-response" class="astw:space-y-2"><p class="astw:whitespace-pre-wrap">Hello there.</p></div></div></div></div></div></div></div><form data-slot="ai-chat-composer" class="astw:flex astw:shrink-0 astw:flex-col astw:gap-2 astw:p-3 astw:pt-0"><textarea id="base-ui-_r_0_" data-slot="textarea" aria-label="Message" rows="2" class="astw:border-input astw:flex astw:w-full astw:min-w-0 astw:rounded-md astw:border astw:bg-transparent astw:px-3 astw:text-base astw:outline-none astw:md:text-sm astw:dark:bg-input/30 astw:transition-[color,box-shadow] astw:selection:bg-primary astw:selection:text-primary-foreground astw:placeholder:text-muted-foreground astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:pointer-events-none astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:min-h-16 astw:py-2 astw:resize-y astw:data-invalid:border-destructive astw:data-invalid:ring-destructive/20 astw:dark:data-invalid:ring-destructive/40 astw:aria-invalid:border-destructive astw:aria-invalid:ring-destructive/20 astw:dark:aria-invalid:ring-destructive/40"></textarea><div class="astw:flex astw:items-center astw:justify-between astw:gap-2"><div class="astw:flex astw:min-w-0 astw:items-center astw:gap-2"></div><div class="astw:shrink-0"><button type="submit" data-slot="button" class="astw:inline-flex astw:cursor-pointer astw:items-center astw:justify-center astw:gap-2 astw:whitespace-nowrap astw:rounded-md astw:text-sm astw:font-medium astw:transition-all astw:disabled:pointer-events-none astw:disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:shrink-0 astw:[&amp;_svg]:shrink-0 astw:outline-none astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:aria-invalid:ring-destructive/20 astw:dark:aria-invalid:ring-destructive/40 astw:aria-invalid:border-destructive astw:bg-primary astw:text-primary-foreground astw:shadow-xs astw:hover:bg-primary/90 astw:h-9 astw:px-4 astw:py-2 astw:has-[>svg]:px-3" disabled=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up astw:size-4" aria-hidden="true"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg>Send</button></div></div></form></div>"`;

exports[`AIChat > snapshots > with header 1`] = `"<div data-slot="ai-chat" class="astw:flex astw:h-full astw:min-h-0 astw:flex-1 astw:flex-col"><div data-slot="ai-chat-header" class="astw:flex astw:h-12 astw:shrink-0 astw:items-center astw:justify-between astw:gap-2 astw:border-b astw:border-border astw:px-3"><div class="astw:flex astw:min-w-0 astw:items-center astw:gap-1.5 astw:text-sm astw:font-semibold astw:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles astw:size-4 astw:shrink-0 astw:text-primary" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg><span class="astw:truncate">Assistant</span></div><div class="astw:flex astw:shrink-0 astw:items-center astw:gap-0.5"><button type="button" data-slot="ai-chat-action" class="astw:inline-flex astw:cursor-pointer astw:items-center astw:justify-center astw:gap-2 astw:whitespace-nowrap astw:rounded-md astw:text-sm astw:font-medium astw:transition-all astw:disabled:pointer-events-none astw:disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0 astw:outline-none astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:aria-invalid:ring-destructive/20 astw:dark:aria-invalid:ring-destructive/40 astw:aria-invalid:border-destructive astw:hover:bg-accent astw:dark:hover:bg-accent/50 astw:size-7 astw:shrink-0 astw:text-muted-foreground astw:hover:text-foreground" aria-label="Clear conversation" id="base-ui-_r_2_" data-base-ui-tooltip-trigger=""><span aria-hidden="true">x</span></button></div></div><div data-slot="ai-chat-conversation" class="astw:relative astw:min-h-0 astw:flex-1"><div role="log" class="astw:h-full astw:overflow-y-auto"><div class="astw:flex astw:min-h-full astw:flex-col"><div class="astw:flex astw:flex-1 astw:flex-col astw:gap-3 astw:px-3 astw:py-3"><div></div></div></div></div></div><form data-slot="ai-chat-composer" class="astw:flex astw:shrink-0 astw:flex-col astw:gap-2 astw:p-3 astw:pt-0"><textarea id="base-ui-_r_3_" data-slot="textarea" aria-label="Message" rows="2" class="astw:border-input astw:flex astw:w-full astw:min-w-0 astw:rounded-md astw:border astw:bg-transparent astw:px-3 astw:text-base astw:shadow-xs astw:outline-none astw:md:text-sm astw:dark:bg-input/30 astw:transition-[color,box-shadow] astw:selection:bg-primary astw:selection:text-primary-foreground astw:placeholder:text-muted-foreground astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:pointer-events-none astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:min-h-16 astw:py-2 astw:resize-y astw:data-invalid:border-destructive astw:data-invalid:ring-destructive/20 astw:dark:data-invalid:ring-destructive/40 astw:aria-invalid:border-destructive astw:aria-invalid:ring-destructive/20 astw:dark:aria-invalid:ring-destructive/40"></textarea><div class="astw:flex astw:items-center astw:justify-between astw:gap-2"><div class="astw:flex astw:min-w-0 astw:items-center astw:gap-2"></div><div class="astw:shrink-0"><button type="submit" data-slot="button" class="astw:inline-flex astw:cursor-pointer astw:items-center astw:justify-center astw:gap-2 astw:whitespace-nowrap astw:rounded-md astw:text-sm astw:font-medium astw:transition-all astw:disabled:pointer-events-none astw:disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:shrink-0 astw:[&amp;_svg]:shrink-0 astw:outline-none astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:aria-invalid:ring-destructive/20 astw:dark:aria-invalid:ring-destructive/40 astw:aria-invalid:border-destructive astw:bg-primary astw:text-primary-foreground astw:shadow-xs astw:hover:bg-primary/90 astw:h-9 astw:px-4 astw:py-2 astw:has-[>svg]:px-3" disabled=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up astw:size-4" aria-hidden="true"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg>Send</button></div></div></form></div>"`;
exports[`AIChat > snapshots > with header 1`] = `"<div data-slot="ai-chat" class="astw:flex astw:h-full astw:min-h-0 astw:flex-1 astw:flex-col"><div data-slot="ai-chat-header" class="astw:flex astw:h-12 astw:shrink-0 astw:items-center astw:justify-between astw:gap-2 astw:border-b astw:border-border astw:px-3"><div class="astw:flex astw:min-w-0 astw:items-center astw:gap-1.5 astw:text-sm astw:font-semibold astw:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles astw:size-4 astw:shrink-0 astw:text-primary" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg><span class="astw:truncate">Assistant</span></div><div class="astw:flex astw:shrink-0 astw:items-center astw:gap-0.5"><button type="button" data-slot="ai-chat-action" class="astw:inline-flex astw:cursor-pointer astw:items-center astw:justify-center astw:gap-2 astw:whitespace-nowrap astw:rounded-md astw:text-sm astw:font-medium astw:transition-all astw:disabled:pointer-events-none astw:disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0 astw:outline-none astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:aria-invalid:ring-destructive/20 astw:dark:aria-invalid:ring-destructive/40 astw:aria-invalid:border-destructive astw:hover:bg-accent astw:dark:hover:bg-accent/50 astw:size-7 astw:shrink-0 astw:text-muted-foreground astw:hover:text-foreground" aria-label="Clear conversation" id="base-ui-_r_2_" data-base-ui-tooltip-trigger=""><span aria-hidden="true">x</span></button></div></div><div data-slot="ai-chat-conversation" class="astw:relative astw:min-h-0 astw:flex-1"><div role="log" class="astw:h-full astw:overflow-y-auto"><div class="astw:flex astw:min-h-full astw:flex-col"><div class="astw:flex astw:flex-1 astw:flex-col astw:gap-3 astw:px-3 astw:py-3"><div></div></div></div></div></div><form data-slot="ai-chat-composer" class="astw:flex astw:shrink-0 astw:flex-col astw:gap-2 astw:p-3 astw:pt-0"><textarea id="base-ui-_r_3_" data-slot="textarea" aria-label="Message" rows="2" class="astw:border-input astw:flex astw:w-full astw:min-w-0 astw:rounded-md astw:border astw:bg-transparent astw:px-3 astw:text-base astw:outline-none astw:md:text-sm astw:dark:bg-input/30 astw:transition-[color,box-shadow] astw:selection:bg-primary astw:selection:text-primary-foreground astw:placeholder:text-muted-foreground astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:pointer-events-none astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:min-h-16 astw:py-2 astw:resize-y astw:data-invalid:border-destructive astw:data-invalid:ring-destructive/20 astw:dark:data-invalid:ring-destructive/40 astw:aria-invalid:border-destructive astw:aria-invalid:ring-destructive/20 astw:dark:aria-invalid:ring-destructive/40"></textarea><div class="astw:flex astw:items-center astw:justify-between astw:gap-2"><div class="astw:flex astw:min-w-0 astw:items-center astw:gap-2"></div><div class="astw:shrink-0"><button type="submit" data-slot="button" class="astw:inline-flex astw:cursor-pointer astw:items-center astw:justify-center astw:gap-2 astw:whitespace-nowrap astw:rounded-md astw:text-sm astw:font-medium astw:transition-all astw:disabled:pointer-events-none astw:disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:shrink-0 astw:[&amp;_svg]:shrink-0 astw:outline-none astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:aria-invalid:ring-destructive/20 astw:dark:aria-invalid:ring-destructive/40 astw:aria-invalid:border-destructive astw:bg-primary astw:text-primary-foreground astw:shadow-xs astw:hover:bg-primary/90 astw:h-9 astw:px-4 astw:py-2 astw:has-[>svg]:px-3" disabled=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up astw:size-4" aria-hidden="true"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg>Send</button></div></div></form></div>"`;
Loading
Loading