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

Update tailwind plugin #22

Merged
merged 5 commits into from
Dec 5, 2023
Merged

Update tailwind plugin #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c6ac174
remove spacing tokens mapping in tailwind plugin
arturbien Dec 4, 2023
b8ec59f
remove Section component
arturbien Dec 4, 2023
c38a300
remove tailwind plugin props
arturbien Dec 5, 2023
fef3fa6
remove base heading styles from tailwind plugin
arturbien Dec 5, 2023
50c851d
update fontSize in tailwind plugin
arturbien Dec 5, 2023
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
11 changes: 8 additions & 3 deletions apps/playground/app/ghost-balance/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import {
PopoverContent,
PopoverRoot,
PopoverTrigger,
Section,
Theme,
} from 'frosted-ui';

Expand All @@ -28,7 +27,13 @@ export default function Ghost() {
<Container>
<Grid columns="2">
{(['row', 'column'] as const).map((direction) => (
<Section key={direction}>
<div
key={direction}
style={{
paddingTop: 'var(--space-5)',
paddingBottom: 'var(--space-5)',
}}
>
<Flex
direction={direction === 'row' ? 'column' : 'row'}
gap="7"
Expand Down Expand Up @@ -139,7 +144,7 @@ export default function Ghost() {
</PopoverRoot>
</Flex>
</Flex>
</Section>
</div>
))}
</Grid>

Expand Down
26 changes: 18 additions & 8 deletions apps/playground/app/sink/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,6 @@ import {
RadioGroupRoot,
//
ScrollArea,
//
Section,
SelectContent,
SelectGroup,
SelectItem,
Expand Down Expand Up @@ -245,7 +243,12 @@ export default function Sink() {
// dir="rtl"
>
<Container mx="6">
<Section>
<div
style={{
paddingTop: 'var(--space-5)',
padding: 'var(--space-5)',
}}
>
<Grid columns="3" gapY="9">
<DocsGridSectionItem title="Dialog">
<DialogRoot>
Expand Down Expand Up @@ -360,12 +363,17 @@ export default function Sink() {
</PopoverRoot>
</DocsGridSectionItem>
</Grid>
</Section>
</div>
</Container>
<Separator size="4" />

<Container mx="6">
<Section>
<div
style={{
paddingTop: 'var(--space-5)',
padding: 'var(--space-5)',
}}
>
<Grid columns="3" gapY="9">
<div style={{ gridColumn: '1 / span 2' }}>
<DocsGridSectionItem title="DropdownMenu">
Expand Down Expand Up @@ -553,7 +561,7 @@ export default function Sink() {
</table>
</DocsGridSectionItem>
</Grid>
</Section>
</div>
</Container>
<Separator size="4" />

Expand Down Expand Up @@ -4393,14 +4401,16 @@ function DocsSection({
return (
<>
<Container mx="6">
<Section size="2">
<div
style={{ paddingTop: 'var(--space-7)', padding: 'var(--space-7)' }}
>
<Heading size="6" weight="regular" mb="4" as="h2">
<Link href={`#${title}`} id={title}>
{title}
</Link>
</Heading>
{children}
</Section>
</div>
</Container>
<Separator size="4" />
</>
Expand Down
10 changes: 7 additions & 3 deletions apps/playground/app/test-appearance/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {
Flex,
Grid,
Heading,
Section,
Separator,
Switch,
Text,
Expand Down Expand Up @@ -133,12 +132,17 @@ function DocsSection({
return (
<>
<Container mx="6">
<Section size="2">
<div
style={{
paddingTop: 'var(--space-7)',
padding: 'var(--space-7)',
}}
>
<Heading size="6" weight="regular" mb="4" as="h2">
{title}
</Heading>
{children}
</Section>
</div>
</Container>
<Separator size="4" />
</>
Expand Down
22 changes: 13 additions & 9 deletions apps/playground/app/test-classic-button/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import { Pencil2Icon } from '@radix-ui/react-icons';
import {
Button,
Container,
Flex,
Section,
Theme,
ThemePanel,
themeAccentColorsOrdered,
Button,
Container,
Flex,
Theme,
ThemePanel,
themeAccentColorsOrdered,
} from 'frosted-ui';

export default function Test() {
Expand All @@ -17,7 +16,12 @@ export default function Test() {
<div id="root">
<ThemePanel defaultOpen={false} />
<Container px="5">
<Section>
<div
style={{
paddingTop: 'var(--space-5)',
paddingBottom: 'var(--space-5)',
}}
>
<Flex direction="column" gap="2">
{themeAccentColorsOrdered.map((color) => (
<Flex key={color} gap="2">
Expand Down Expand Up @@ -48,7 +52,7 @@ export default function Test() {
</Flex>
))}
</Flex>
</Section>
</div>
</Container>
</div>
</Theme>
Expand Down
88 changes: 46 additions & 42 deletions apps/playground/app/test-inset/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,43 @@
import {
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogRoot,
AlertDialogTitle,
AlertDialogTrigger,
AspectRatio,
Box,
Button,
Card,
Container,
DialogClose,
DialogContent,
DialogDescription,
DialogRoot,
DialogTitle,
DialogTrigger,
Flex,
Grid,
HoverCardContent,
HoverCardRoot,
HoverCardTrigger,
Inset,
Link,
PopoverContent,
PopoverRoot,
PopoverTrigger,
Section,
Separator,
TableBody,
TableCell,
TableColumnHeaderCell,
TableHeader,
TableRoot,
TableRow,
TableRowHeaderCell,
Text,
Theme,
ThemePanel,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogRoot,
AlertDialogTitle,
AlertDialogTrigger,
AspectRatio,
Box,
Button,
Card,
Container,
DialogClose,
DialogContent,
DialogDescription,
DialogRoot,
DialogTitle,
DialogTrigger,
Flex,
Grid,
HoverCardContent,
HoverCardRoot,
HoverCardTrigger,
Inset,
Link,
PopoverContent,
PopoverRoot,
PopoverTrigger,
Separator,
TableBody,
TableCell,
TableColumnHeaderCell,
TableHeader,
TableRoot,
TableRow,
TableRowHeaderCell,
Text,
Theme,
ThemePanel,
} from 'frosted-ui';
import { NextThemeProvider } from '../next-theme-provider';

Expand All @@ -59,7 +58,12 @@ export default function Test() {
<ThemePanel />

<Container>
<Section>
<div
style={{
paddingTop: 'var(--space-5)',
paddingBottom: 'var(--space-5)',
}}
>
<Grid columns="3" gap="9">
<Card size="3">
<Text as="p" size="5" weight="bold" trim="start">
Expand Down Expand Up @@ -216,7 +220,7 @@ export default function Test() {
</div>
</Grid>
</Grid>
</Section>
</div>
</Container>
</div>
</Theme>
Expand Down
37 changes: 18 additions & 19 deletions apps/playground/app/test-responsive/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
import { SunIcon } from '@radix-ui/react-icons';
import {
Button,
Card,
Container,
Flex,
Grid,
IconButton,
Section,
SelectContent,
SelectItem,
SelectRoot,
SelectTrigger,
Text,
TextArea,
TextFieldInput,
Theme,
Button,
Card,
Container,
Flex,
Grid,
IconButton,
SelectContent,
SelectItem,
SelectRoot,
SelectTrigger,
Text,
TextArea,
TextFieldInput,
Theme,
} from 'frosted-ui';
import { NextThemeProvider } from '../next-theme-provider';

Expand All @@ -26,7 +25,7 @@ export default function Test() {
<Theme asChild>
<div id="root">
<Container px="8">
<Section size="3">
<div style={{ padding: '80px 0' }}>
<Card
size={{ initial: '3', sm: '4', lg: '5' }}
style={{ maxWidth: 500 }}
Expand Down Expand Up @@ -98,9 +97,9 @@ export default function Test() {
</Grid>
</Flex>
</Card>
</Section>
</div>

<Section size="3">
<div style={{ padding: '80px 0' }}>
<Flex align="center" gap={{ initial: '3', sm: '4', lg: '5' }}>
<IconButton
variant="ghost"
Expand All @@ -118,7 +117,7 @@ export default function Test() {
Change theme
</Button>
</Flex>
</Section>
</div>
</Container>
</div>
</Theme>
Expand Down
5 changes: 2 additions & 3 deletions apps/playground/app/test-textfield/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import {
Grid,
Heading,
IconButton,
Section,
Text,
TextFieldInput,
TextFieldRoot,
Expand All @@ -34,7 +33,7 @@ export default function Test() {
<div id="root">
<ThemePanel defaultOpen={false} />
<Container>
<Section>
<div style={{ padding: 'var(--space-5) 0' }}>
<Grid columns="3" gap="6">
<Flex direction="column" align="start" gap="3">
<Heading size="3" mb="2">
Expand Down Expand Up @@ -350,7 +349,7 @@ export default function Test() {
</TextFieldRoot>
</Flex>
</Grid>
</Section>
</div>
</Container>
</div>
</Theme>
Expand Down
8 changes: 1 addition & 7 deletions apps/tailwind/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,5 @@ export default {
theme: {
extend: {},
},
plugins: [
frostedThemePlugin({
useTailwindColorNames: false, // optional
useTailwindRadiusNames: false, // optional
mapMissingTailwindColors: false, // optional
}),
],
plugins: [frostedThemePlugin()],
};
Loading