Skip to content

Commit

Permalink
chore: Component previews design fixes (#308)
Browse files Browse the repository at this point in the history 
Co-authored-by: Hunter Johnston <johnstonhuntera@gmail.com>
  • Loading branch information
@pavelstianko @huntabyte
pavelstianko and huntabyte authored Feb 4, 2024
1 parent 041c115 commit f0d518a
Show file tree
Hide file tree
Showing 17 changed files with 36 additions and 36 deletions.
4 changes: 2 additions & 2 deletions src/components/demos/alert-dialog-demo.svelte
View file
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit f0d518a

Please sign in to comment.