Skip to content
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

Jump to bottom

chore: Component previews design fixes #308

Merged
merged 4 commits into from
Feb 4, 2024
Merged

chore: Component previews design fixes #308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
76d418a
Component previews design fixes
pavelstianko Feb 4, 2024
ef69028
format
pavelstianko Feb 4, 2024
861edb9
Merge branch 'main' into components-design-fixes
huntabyte Feb 4, 2024
d3a0092
fix: hover style
huntabyte Feb 4, 2024
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
4 changes: 2 additions & 2 deletions src/components/demos/alert-dialog-demo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<AlertDialog.Overlay
transition={fade}
transitionConfig={{ duration: 150 }}
class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
class="fixed inset-0 z-50 bg-black/80"
/>
<AlertDialog.Content
transition={flyAndScale}
Expand All @@ -33,7 +33,7 @@
</div>
<div class="flex w-full items-center justify-center gap-2">
<AlertDialog.Cancel
class="inline-flex h-input w-full items-center justify-center rounded-input bg-muted text-[15px] font-medium shadow-mini transition-all hover:bg-muted/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
class="inline-flex h-input w-full items-center justify-center rounded-input bg-muted text-[15px] font-medium shadow-mini transition-all hover:bg-dark-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
>Cancel</AlertDialog.Cancel
>
<AlertDialog.Action
Expand Down
2 changes: 1 addition & 1 deletion src/components/demos/aspect-ratio-demo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { AspectRatio } from "$lib";
</script>

<AspectRatio.Root ratio={16 / 9} class="scale-80 rounded-[15px] bg-transparent">
<AspectRatio.Root ratio={14 / 9} class="scale-80 rounded-[15px] bg-transparent">
<img
src="/abstract.png"
alt="an abstract painting"
Expand Down
2 changes: 1 addition & 1 deletion src/components/demos/avatar-demo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
: 'border-transparent'} bg-muted text-[17px] font-medium uppercase text-muted-foreground"
>
<div
class="flex h-full w-full items-center justify-center rounded-full border border-background"
class="flex h-full w-full items-center justify-center overflow-hidden rounded-full border-2 border-transparent"
>
<Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
<Avatar.Fallback class="border border-muted">HB</Avatar.Fallback>
Expand Down
2 changes: 1 addition & 1 deletion src/components/demos/checkbox-demo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<Checkbox.Root
id="terms"
aria-labelledby="terms-label"
class="peer inline-flex items-center justify-center rounded-md border border-muted bg-foreground sq-[25px] active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background"
class="peer inline-flex items-center justify-center rounded-md border border-muted bg-foreground transition-all duration-150 ease-in-out sq-[25px] active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background data-[state=unchecked]:hover:border-dark-40"
checked="indeterminate"
>
<Checkbox.Indicator
Expand Down
4 changes: 2 additions & 2 deletions src/components/demos/date-field-demo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
>
<DateField.Input
let:segments
class="flex h-input w-full max-w-[232px] select-none items-center rounded-input border border-border-input bg-background p-3 text-sm tracking-[0.01em] text-muted-foreground focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
class="flex h-input w-full max-w-[232px] select-none items-center rounded-input border border-border-input bg-background px-2 py-3 text-sm tracking-[0.01em] text-muted-foreground focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
>
{#each segments as { part, value }}
<div class="inline-block select-none">
Expand All @@ -20,7 +20,7 @@
{:else}
<DateField.Segment
{part}
class="rounded-5px px-2 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
>
{value}
</DateField.Segment>
Expand Down
8 changes: 4 additions & 4 deletions src/components/demos/date-picker-demo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
>
<DatePicker.Input
let:segments
class="flex h-input w-full max-w-[232px] select-none items-center rounded-input border border-border-input bg-background p-3 text-sm tracking-[0.01em] text-muted-foreground focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
class="flex h-input w-full max-w-[232px] select-none items-center rounded-input border border-border-input bg-background px-2 py-3 text-sm tracking-[0.01em] text-muted-foreground focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
>
{#each segments as { part, value }}
<div class="inline-block select-none">
Expand All @@ -22,17 +22,17 @@
{:else}
<DatePicker.Segment
{part}
class="rounded-5px px-2 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
>
{value}
</DatePicker.Segment>
{/if}
</div>
{/each}
<DatePicker.Trigger
class="ml-auto inline-flex items-center justify-center rounded-[5px] transition-all sq-8 hover:bg-muted active:bg-dark-10"
class="ml-auto inline-flex items-center justify-center rounded-[5px] text-foreground/60 transition-all sq-8 hover:bg-muted active:bg-dark-10"
>
<CalendarBlank class="sq-5" />
<CalendarBlank class="sq-6" />
</DatePicker.Trigger>
</DatePicker.Input>
<DatePicker.Content
Expand Down
14 changes: 7 additions & 7 deletions src/components/demos/date-range-field-demo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,19 @@
import { CalendarDate } from "@internationalized/date";

let value = {
start: new CalendarDate(2022, 1, 1),
end: new CalendarDate(2022, 3, 1)
start: new CalendarDate(2024, 1, 1),
end: new CalendarDate(2024, 3, 1)
};
</script>

<DateRangeField.Root bind:value>
<div class="flex w-full max-w-[300px] flex-col gap-1.5">
<div class="flex w-full max-w-[280px] flex-col gap-1.5">
<DateRangeField.Label class="block select-none text-sm font-medium"
>Hotel dates</DateRangeField.Label
>
<DateRangeField.Input
let:segments
class="flex h-input w-full max-w-[300px] select-none items-center rounded-input border border-border-input bg-background p-3 text-sm tracking-[0.01em] text-muted-foreground focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
class="flex h-input w-full max-w-[280px] select-none items-center rounded-input border border-border-input bg-background px-2 py-3 text-sm tracking-[0.01em] text-muted-foreground focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
>
{#each segments.start as { part, value }}
<div class="inline-block select-none">
Expand All @@ -27,14 +27,14 @@
<DateRangeField.Segment
type="start"
{part}
class="rounded-5px px-2 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
>
{value}
</DateRangeField.Segment>
{/if}
</div>
{/each}
<div aria-hidden class="px-1">-</div>
<div aria-hidden class="px-1">–⁠⁠⁠⁠⁠</div>
{#each segments.end as { part, value }}
<div class="inline-block select-none">
{#if part === "literal"}
Expand All @@ -45,7 +45,7 @@
<DateRangeField.Segment
type="end"
{part}
class="rounded-5px px-2 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
>
{value}
</DateRangeField.Segment>
Expand Down
14 changes: 7 additions & 7 deletions src/components/demos/date-range-picker-demo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@
</script>

<DateRangePicker.Root bind:value weekdayFormat="short" fixedWeeks={true}>
<div class="flex w-full max-w-[380px] flex-col gap-1.5">
<div class="flex w-full max-w-[320px] flex-col gap-1.5">
<DateRangePicker.Label class="block select-none text-sm font-medium"
>Rental Days</DateRangePicker.Label
>
<DateRangePicker.Input
let:segments
class="flex h-input w-full max-w-[380px] select-none items-center rounded-input border border-border-input bg-background p-3 text-sm tracking-[0.01em] text-muted-foreground focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
class="flex h-input w-full max-w-[320px] select-none items-center rounded-input border border-border-input bg-background px-2 py-3 text-sm tracking-[0.01em] text-muted-foreground focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
>
{#each segments.start as { part, value }}
<div class="inline-block select-none">
Expand All @@ -25,14 +25,14 @@
<DateRangePicker.Segment
type="start"
{part}
class="rounded-5px px-2 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
>
{value}
</DateRangePicker.Segment>
{/if}
</div>
{/each}
<div aria-hidden class="px-1">-</div>
<div aria-hidden class="px-1">–</div>
{#each segments.end as { part, value }}
<div class="inline-block select-none">
{#if part === "literal"}
Expand All @@ -43,17 +43,17 @@
<DateRangePicker.Segment
type="end"
{part}
class="rounded-5px px-2 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
>
{value}
</DateRangePicker.Segment>
{/if}
</div>
{/each}
<DateRangePicker.Trigger
class="ml-auto inline-flex items-center justify-center rounded-[5px] transition-all sq-8 hover:bg-muted active:bg-dark-10"
class="ml-auto inline-flex items-center justify-center rounded-[5px] text-foreground/60 transition-all sq-8 hover:bg-muted active:bg-dark-10"
>
<CalendarBlank class="sq-5" />
<CalendarBlank class="sq-6" />
</DateRangePicker.Trigger>
</DateRangePicker.Input>
<DateRangePicker.Content
Expand Down
2 changes: 1 addition & 1 deletion src/components/demos/dialog-demo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<Dialog.Overlay
transition={fade}
transitionConfig={{ duration: 150 }}
class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
class="fixed inset-0 z-50 bg-black/80"
/>
<Dialog.Content
transition={flyAndScale}
Expand Down
2 changes: 1 addition & 1 deletion src/components/demos/label-demo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<Checkbox.Root
id="terms"
aria-labelledby="terms-label"
class="peer inline-flex items-center justify-center rounded-md border border-muted bg-foreground sq-[25px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background"
class="peer inline-flex items-center justify-center rounded-md border border-muted bg-foreground transition-all duration-150 ease-in-out sq-[25px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background data-[state=unchecked]:hover:border-dark-40"
checked="indeterminate"
>
<Checkbox.Indicator
Expand Down
4 changes: 2 additions & 2 deletions src/components/demos/link-preview-demo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
: 'border-transparent'} bg-muted text-[17px] font-medium uppercase text-muted-foreground"
>
<div
class="flex h-full w-full items-center justify-center rounded-full border border-background"
class="flex h-full w-full items-center justify-center overflow-hidden rounded-full border-2 border-transparent"
>
<Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
<Avatar.Fallback class="border border-muted">HB</Avatar.Fallback>
Expand All @@ -41,7 +41,7 @@
: 'border-transparent'} bg-muted text-[17px] font-medium uppercase text-muted-foreground"
>
<div
class="flex h-full w-full items-center justify-center rounded-full border border-background"
class="flex h-full w-full items-center justify-center overflow-hidden rounded-full border-2 border-transparent"
>
<Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
<Avatar.Fallback class="border border-muted">HB</Avatar.Fallback>
Expand Down
2 changes: 1 addition & 1 deletion src/components/demos/pagination-demo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
</script>

<Pagination.Root count={100} perPage={10} let:pages let:range>
<div class="mb-[55px] flex items-center">
<div class="my-8 flex items-center">
<Pagination.PrevButton
class="mr-[25px] inline-flex items-center justify-center rounded-[9px] bg-transparent sq-10 hover:bg-dark-10 active:scale-98 disabled:cursor-not-allowed disabled:text-muted-foreground hover:disabled:bg-transparent"
>
Expand Down
6 changes: 3 additions & 3 deletions src/components/demos/radio-group-demo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<RadioGroup.Item
id="amazing"
value="amazing"
class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-100 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
/>
<Label.Root for="amazing">Amazing</Label.Root>
</div>
Expand All @@ -19,7 +19,7 @@
<RadioGroup.Item
id="average"
value="average"
class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-100 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
/>
<Label.Root for="average">Average</Label.Root>
</div>
Expand All @@ -29,7 +29,7 @@
<RadioGroup.Item
id="terrible"
value="terrible"
class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-100 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
/>
<Label.Root for="terrible">Terrible</Label.Root>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/demos/range-calendar-demo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
{date}
month={month.value}
class={cn(
"group relative inline-flex items-center justify-center overflow-visible whitespace-nowrap rounded-9px border border-transparent bg-background bg-transparent p-0 text-sm font-normal text-foreground transition-all sq-10 hover:border-foreground focus-visible:!ring-foreground data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[highlighted]:rounded-none data-[selection-end]:rounded-9px data-[selection-start]:rounded-9px data-[highlighted]:bg-muted data-[selected]:bg-muted data-[selection-end]:bg-foreground data-[selection-start]:bg-foreground data-[selected]:font-medium data-[selection-end]:font-medium data-[selection-start]:font-medium data-[disabled]:text-foreground/30 data-[selected]:text-foreground data-[selection-end]:text-background data-[selection-start]:text-background data-[unavailable]:text-muted-foreground data-[unavailable]:line-through data-[selection-start]:focus-visible:ring-2 data-[selection-start]:focus-visible:!ring-offset-2 data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:rounded-none data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:focus-visible:border-foreground data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:focus-visible:!ring-0 data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:focus-visible:!ring-offset-0"
"group relative inline-flex items-center justify-center overflow-visible whitespace-nowrap rounded-9px border border-transparent bg-background bg-transparent p-0 text-sm font-normal text-foreground sq-10 hover:border-foreground focus-visible:!ring-foreground data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[highlighted]:rounded-none data-[selection-end]:rounded-9px data-[selection-start]:rounded-9px data-[highlighted]:bg-muted data-[selected]:bg-muted data-[selection-end]:bg-foreground data-[selection-start]:bg-foreground data-[selected]:font-medium data-[selection-end]:font-medium data-[selection-start]:font-medium data-[disabled]:text-foreground/30 data-[selected]:text-foreground data-[selection-end]:text-background data-[selection-start]:text-background data-[unavailable]:text-muted-foreground data-[unavailable]:line-through data-[selection-start]:focus-visible:ring-2 data-[selection-start]:focus-visible:!ring-offset-2 data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:rounded-none data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:focus-visible:border-foreground data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:focus-visible:!ring-0 data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:focus-visible:!ring-offset-0"
)}
>
<div
Expand Down
2 changes: 1 addition & 1 deletion src/components/demos/slider-demo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
{#each thumbs as thumb}
<Slider.Thumb
{thumb}
class="block rounded-full border border-border-input bg-background shadow transition-colors sq-[27px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 active:scale-98 disabled:pointer-events-none disabled:opacity-50"
class="block cursor-pointer rounded-full border border-border-input bg-background shadow transition-colors sq-[27px] hover:border-dark-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 active:scale-98 disabled:pointer-events-none disabled:opacity-50"
/>
{/each}
</Slider.Root>
Expand Down
2 changes: 1 addition & 1 deletion src/components/demos/toggle-demo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { Toggle } from "$lib";

let unlocked = false;
$: code = unlocked ? "1985" : "••••";
$: code = unlocked ? "B1T5" : "••••";
</script>

<div
Expand Down
Binary file modified static/avatar-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading