Skip to content

style: white outline button and capsule tabs fill #588

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: white outline button and capsule tabs fill #588

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
7 changes: 7 additions & 0 deletions .changeset/white-outline-tabs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@tailor-platform/app-shell": patch
---

Button `outline` now has a transparent background (like Input) instead of `--background`, and no shadow, so it no longer shows up as a slightly gray fill on white surfaces such as `Card`. The `cream` and `bloom` themes no longer need their own transparent override for outline buttons, so those rules are removed.

Tabs `capsule` uses a translucent black track (`bg-black/5`) instead of `--background`, and the active capsule tab uses `--card` (white in light mode, a slightly lighter `bg-input/60` in dark mode) instead of a tinted `bg-primary/10`, so it no longer follows the theme colour.
2 changes: 1 addition & 1 deletion packages/core/__snapshots__/src__components__button__button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ exports[`Button > snapshots > large size 1`] = `"<button type="button" data-slot

exports[`Button > snapshots > link variant 1`] = `"<button type="button" 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:text-primary astw:underline-offset-4 astw:hover:underline astw:h-9 astw:px-4 astw:py-2 astw:has-[>svg]:px-3">Link</button>"`;

exports[`Button > snapshots > outline variant 1`] = `"<button type="button" 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:border astw:border-border astw:bg-background astw:shadow-xs astw:hover:bg-accent astw:hover:text-accent-foreground astw:dark:bg-input/30 astw:dark:border-input astw:dark:hover:bg-input/50 astw:h-9 astw:px-4 astw:py-2 astw:has-[>svg]:px-3">Outline</button>"`;
exports[`Button > snapshots > outline variant 1`] = `"<button type="button" 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:border astw:border-border astw:bg-transparent astw:hover:bg-accent astw:hover:text-accent-foreground astw:dark:bg-input/30 astw:dark:border-input astw:dark:hover:bg-input/50 astw:h-9 astw:px-4 astw:py-2 astw:has-[>svg]:px-3">Outline</button>"`;

exports[`Button > snapshots > secondary variant 1`] = `"<button type="button" 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-secondary astw:text-secondary-foreground astw:shadow-xs astw:hover:bg-secondary/80 astw:h-9 astw:px-4 astw:py-2 astw:has-[>svg]:px-3">Secondary</button>"`;

Expand Down
10 changes: 5 additions & 5 deletions packages/core/__snapshots__/src__components__tabs__tabs.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 0 additions & 6 deletions packages/core/src/assets/themes/bloom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,15 +146,9 @@ html
background-color: transparent;
}

html [data-slot="button"][class*="astw:bg-background"][class*="astw:border"],
html [data-slot="data-table-filter-chip"] {
background-color: transparent;
transition:
background-color 0.12s ease,
color 0.12s ease;
}

html [data-slot="button"][class*="astw:bg-background"][class*="astw:border"]:hover:not(:disabled) {
background-color: var(--accent);
color: var(--accent-foreground);
}
6 changes: 0 additions & 6 deletions packages/core/src/assets/themes/cream.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,15 +146,9 @@ html
background-color: transparent;
}

html [data-slot="button"][class*="astw:bg-background"][class*="astw:border"],
html [data-slot="data-table-filter-chip"] {
background-color: transparent;
transition:
background-color 0.12s ease,
color 0.12s ease;
}

html [data-slot="button"][class*="astw:bg-background"][class*="astw:border"]:hover:not(:disabled) {
background-color: var(--accent);
color: var(--accent-foreground);
}
2 changes: 1 addition & 1 deletion packages/core/src/components/button/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const buttonVariants = cva(
destructive:
"astw:bg-destructive astw:text-white astw:shadow-xs astw:hover:bg-destructive/90 astw:focus-visible:ring-destructive/20 astw:dark:focus-visible:ring-destructive/40 astw:dark:bg-destructive/60",
outline:
"astw:border astw:border-border astw:bg-background astw:shadow-xs astw:hover:bg-accent astw:hover:text-accent-foreground astw:dark:bg-input/30 astw:dark:border-input astw:dark:hover:bg-input/50",
"astw:border astw:border-border astw:bg-transparent astw:hover:bg-accent astw:hover:text-accent-foreground astw:dark:bg-input/30 astw:dark:border-input astw:dark:hover:bg-input/50",
secondary:
"astw:bg-secondary astw:text-secondary-foreground astw:shadow-xs astw:hover:bg-secondary/80",
ghost:
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components/tabs/tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@ type TabsSize = "xs" | "sm" | "default" | "lg";

const LIST_VARIANT_CLASSES: Record<TabsVariant, string> = {
line: "astw:h-9 astw:gap-2",
capsule: "astw:gap-0.5 astw:rounded-md astw:bg-background astw:dark:bg-input/30 astw:p-1",
capsule: "astw:gap-0.5 astw:rounded-md astw:bg-black/5 astw:dark:bg-input/30 astw:p-1",
default: "astw:text-muted-foreground astw:h-9 astw:gap-1",
};

const TAB_VARIANT_CLASSES: Record<TabsVariant, string> = {
line: "astw:px-3 astw:py-1.5 astw:-mb-px astw:border-b-2 astw:border-transparent astw:data-active:border-primary astw:data-active:text-foreground",
capsule:
"astw:rounded-md astw:px-3 astw:has-[>svg:only-child]:px-0 astw:[&_svg:not([class*='size-'])]:size-4 astw:data-active:bg-primary/10 astw:data-active:text-primary astw:data-active:shadow-sm",
"astw:rounded-md astw:px-3 astw:has-[>svg:only-child]:px-0 astw:[&_svg:not([class*='size-'])]:size-4 astw:data-active:bg-card astw:dark:data-active:bg-input/60 astw:data-active:text-primary astw:data-active:shadow-sm",
default:
"astw:rounded-md astw:px-3 astw:py-1 astw:data-active:bg-primary/10 astw:data-active:text-primary",
};
Expand Down
Loading