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

Update Tailwind demos #775

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+314 −314
Open

Update Tailwind demos #775

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a5491f7
Update arbitrary classes
ryanleichty May 6, 2024
2d4ee3a
Sort Tailwind classes
ryanleichty May 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
18 changes: 9 additions & 9 deletions components/demos/Accordion/tailwind/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { ChevronDownIcon } from '@radix-ui/react-icons';

const AccordionDemo = () => (
<Accordion.Root
className="bg-mauve6 w-[300px] rounded-md shadow-[0_2px_10px] shadow-black/5"
className="w-[300px] rounded-md bg-mauve6 shadow-[0_2px_10px] shadow-black/5"
type="single"
defaultValue="item-1"
collapsible
Expand Down Expand Up @@ -34,8 +34,8 @@ const AccordionDemo = () => (
const AccordionItem = React.forwardRef(({ children, className, ...props }, forwardedRef) => (
<Accordion.Item
className={classNames(
'focus-within:shadow-mauve12 mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b focus-within:relative focus-within:z-10 focus-within:shadow-[0_0_0_2px]',
className
'mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b focus-within:relative focus-within:z-10 focus-within:shadow-[0_0_0_2px] focus-within:shadow-mauve12',
className,
)}
{...props}
ref={forwardedRef}
Expand All @@ -48,15 +48,15 @@ const AccordionTrigger = React.forwardRef(({ children, className, ...props }, fo
<Accordion.Header className="flex">
<Accordion.Trigger
className={classNames(
'text-violet11 shadow-mauve6 hover:bg-mauve2 group flex h-[45px] flex-1 cursor-default items-center justify-between bg-white px-5 text-[15px] leading-none shadow-[0_1px_0] outline-none',
className
'group flex h-[45px] flex-1 cursor-default items-center justify-between bg-white px-5 text-[15px] leading-none text-violet11 shadow-[0_1px_0] shadow-mauve6 outline-none hover:bg-mauve2',
className,
)}
{...props}
ref={forwardedRef}
>
{children}
<ChevronDownIcon
className="text-violet10 ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180"
className="text-violet10 transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180"
aria-hidden
/>
</Accordion.Trigger>
Expand All @@ -66,13 +66,13 @@ const AccordionTrigger = React.forwardRef(({ children, className, ...props }, fo
const AccordionContent = React.forwardRef(({ children, className, ...props }, forwardedRef) => (
<Accordion.Content
className={classNames(
'text-mauve11 bg-mauve2 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden text-[15px]',
className
'overflow-hidden bg-mauve2 text-[15px] text-mauve11 data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown',
className,
)}
{...props}
ref={forwardedRef}
>
<div className="py-[15px] px-5">{children}</div>
<div className="px-5 py-[15px]">{children}</div>
</Accordion.Content>
));

Expand Down
14 changes: 7 additions & 7 deletions components/demos/AlertDialog/tailwind/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,28 @@ import * as AlertDialog from '@radix-ui/react-alert-dialog';
const AlertDialogDemo = () => (
<AlertDialog.Root>
<AlertDialog.Trigger asChild>
<button className="text-violet11 hover:bg-mauve3 shadow-blackA4 inline-flex h-[35px] items-center justify-center rounded-[4px] bg-white px-[15px] font-medium leading-none shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black">
<button className="inline-flex h-[35px] items-center justify-center rounded bg-white px-[15px] font-medium leading-none text-violet11 shadow-[0_2px_10px] shadow-blackA4 outline-none hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black">
Delete account
</button>
</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay className="bg-blackA6 data-[state=open]:animate-overlayShow fixed inset-0" />
<AlertDialog.Content className="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[500px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none">
<AlertDialog.Title className="text-mauve12 m-0 text-[17px] font-medium">
<AlertDialog.Overlay className="fixed inset-0 bg-blackA6 data-[state=open]:animate-overlayShow" />
<AlertDialog.Content className="fixed left-1/2 top-1/2 max-h-[85vh] w-[90vw] max-w-[500px] -translate-x-1/2 -translate-y-1/2 rounded-md bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none data-[state=open]:animate-contentShow">
<AlertDialog.Title className="m-0 text-[17px] font-medium text-mauve12">
Are you absolutely sure?
</AlertDialog.Title>
<AlertDialog.Description className="text-mauve11 mt-4 mb-5 text-[15px] leading-normal">
<AlertDialog.Description className="mb-5 mt-[15px] text-[15px] leading-normal text-mauve11">
This action cannot be undone. This will permanently delete your account and remove your
data from our servers.
</AlertDialog.Description>
<div className="flex justify-end gap-[25px]">
<AlertDialog.Cancel asChild>
<button className="text-mauve11 bg-mauve4 hover:bg-mauve5 focus:shadow-mauve7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
<button className="inline-flex h-[35px] items-center justify-center rounded bg-mauve4 px-[15px] font-medium leading-none text-mauve11 outline-none hover:bg-mauve5 focus:shadow-[0_0_0_2px] focus:shadow-mauve7">
Cancel
</button>
</AlertDialog.Cancel>
<AlertDialog.Action asChild>
<button className="text-red11 bg-red4 hover:bg-red5 focus:shadow-red7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
<button className="inline-flex h-[35px] items-center justify-center rounded bg-red4 px-[15px] font-medium leading-none text-red11 outline-none hover:bg-red5 focus:shadow-[0_0_0_2px] focus:shadow-red7">
Yes, delete account
</button>
</AlertDialog.Action>
Expand Down
4 changes: 2 additions & 2 deletions components/demos/AspectRatio/tailwind/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import React from 'react';
import * as AspectRatio from '@radix-ui/react-aspect-ratio';

const AspectRatioDemo = () => (
<div className="shadow-blackA4 w-[300px] overflow-hidden rounded-md shadow-[0_2px_10px]">
<div className="w-[300px] overflow-hidden rounded-md shadow-[0_2px_10px] shadow-blackA4">
<AspectRatio.Root ratio={16 / 9}>
<img
className="h-full w-full object-cover"
className="size-full object-cover"
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
alt="Landscape photograph by Tobias Tullius"
/>
Expand Down
16 changes: 8 additions & 8 deletions components/demos/Avatar/tailwind/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,34 @@ import * as Avatar from '@radix-ui/react-avatar';

const AvatarDemo = () => (
<div className="flex gap-5">
<Avatar.Root className="bg-blackA1 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
<Avatar.Root className="inline-flex size-[45px] select-none items-center justify-center overflow-hidden rounded-full bg-blackA1 align-middle">
<Avatar.Image
className="h-full w-full rounded-[inherit] object-cover"
className="size-full rounded-[inherit] object-cover"
src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
alt="Colm Tuite"
/>
<Avatar.Fallback
className="text-violet11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
className="leading-1 flex size-full items-center justify-center bg-white text-[15px] font-medium text-violet11"
delayMs={600}
>
CT
</Avatar.Fallback>
</Avatar.Root>
<Avatar.Root className="bg-blackA1 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
<Avatar.Root className="inline-flex size-[45px] select-none items-center justify-center overflow-hidden rounded-full bg-blackA1 align-middle">
<Avatar.Image
className="h-full w-full rounded-[inherit] object-cover"
className="size-full rounded-[inherit] object-cover"
src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
alt="Pedro Duarte"
/>
<Avatar.Fallback
className="text-violet11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
className="leading-1 flex size-full items-center justify-center bg-white text-[15px] font-medium text-violet11"
delayMs={600}
>
JD
</Avatar.Fallback>
</Avatar.Root>
<Avatar.Root className="bg-blackA1 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
<Avatar.Fallback className="text-violet11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium">
<Avatar.Root className="inline-flex size-[45px] select-none items-center justify-center overflow-hidden rounded-full bg-blackA1 align-middle">
<Avatar.Fallback className="leading-1 flex size-full items-center justify-center bg-white text-[15px] font-medium text-violet11">
PD
</Avatar.Fallback>
</Avatar.Root>
Expand Down
2 changes: 1 addition & 1 deletion components/demos/Checkbox/tailwind/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const CheckboxDemo = () => (
<form>
<div className="flex items-center">
<Checkbox.Root
className="shadow-blackA4 hover:bg-violet3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px_black]"
className="flex size-[25px] appearance-none items-center justify-center rounded bg-white shadow-[0_2px_10px] shadow-blackA4 outline-none hover:bg-violet3 focus:shadow-[0_0_0_2px_black]"
defaultChecked
id="c1"
>
Expand Down
18 changes: 9 additions & 9 deletions components/demos/Collapsible/tailwind/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,27 @@ const CollapsibleDemo = () => {
const [open, setOpen] = React.useState(false);
return (
<Collapsible.Root className="w-[300px]" open={open} onOpenChange={setOpen}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<span className="text-violet11 text-[15px] leading-[25px]" style={{ color: 'white' }}>
<div className="flex items-center justify-between">
<span className=" text-[15px] leading-[25px] text-white">
@peduarte starred 3 repositories
</span>
<Collapsible.Trigger asChild>
<button className="rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-violet11 shadow-[0_2px_10px] shadow-blackA4 outline-none data-[state=closed]:bg-white data-[state=open]:bg-violet3 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black">
<button className="inline-flex size-[25px] items-center justify-center rounded-full text-violet11 shadow-[0_2px_10px] shadow-blackA4 outline-none hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[state=closed]:bg-white data-[state=open]:bg-violet3">
{open ? <Cross2Icon /> : <RowSpacingIcon />}
</button>
</Collapsible.Trigger>
</div>

<div className="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA4">
<span className="text-violet11 text-[15px] leading-[25px]">@radix-ui/primitives</span>
<div className="my-2.5 rounded bg-white p-2.5 shadow-[0_2px_10px] shadow-blackA4">
<span className="text-[15px] leading-[25px] text-violet11">@radix-ui/primitives</span>
</div>

<Collapsible.Content>
<div className="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA4">
<span className="text-violet11 text-[15px] leading-[25px]">@radix-ui/colors</span>
<div className="my-2.5 rounded bg-white p-2.5 shadow-[0_2px_10px] shadow-blackA4">
<span className="text-[15px] leading-[25px] text-violet11">@radix-ui/colors</span>
</div>
<div className="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA4">
<span className="text-violet11 text-[15px] leading-[25px]">@stitches/react</span>
<div className="my-2.5 rounded bg-white p-2.5 shadow-[0_2px_10px] shadow-blackA4">
<span className="text-[15px] leading-[25px] text-violet11">@stitches/react</span>
</div>
</Collapsible.Content>
</Collapsible.Root>
Expand Down