Update tailwind plugin (#22)

whopio · Dec 5, 2023 · 507b462 · 507b462
1 parent fffc0a6
commit 507b462
Show file tree

Hide file tree

Showing 15 changed files with 132 additions and 532 deletions.
diff --git a/apps/playground/app/ghost-balance/page.tsx b/apps/playground/app/ghost-balance/page.tsx
@@ -15,7 +15,6 @@ import {
   PopoverContent,
   PopoverRoot,
   PopoverTrigger,
-  Section,
   Theme,
 } from 'frosted-ui';
 
@@ -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"
@@ -139,7 +144,7 @@ export default function Ghost() {
                         </PopoverRoot>
                       </Flex>
                     </Flex>
-                  </Section>
+                  </div>
                 ))}
               </Grid>
 

diff --git a/apps/playground/app/sink/page.tsx b/apps/playground/app/sink/page.tsx
@@ -97,8 +97,6 @@ import {
   RadioGroupRoot,
   //
   ScrollArea,
-  //
-  Section,
   SelectContent,
   SelectGroup,
   SelectItem,
@@ -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>
@@ -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">
@@ -553,7 +561,7 @@ export default function Sink() {
                           </table>
                         </DocsGridSectionItem>
                       </Grid>
-                    </Section>
+                    </div>
                   </Container>
                   <Separator size="4" />
 
@@ -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" />
     </>

diff --git a/apps/playground/app/test-appearance/page.tsx b/apps/playground/app/test-appearance/page.tsx
@@ -4,7 +4,6 @@ import {
   Flex,
   Grid,
   Heading,
-  Section,
   Separator,
   Switch,
   Text,
@@ -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" />
     </>

diff --git a/apps/playground/app/test-classic-button/page.tsx b/apps/playground/app/test-classic-button/page.tsx
@@ -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() {
@@ -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">
@@ -48,7 +52,7 @@ export default function Test() {
                     </Flex>
                   ))}
                 </Flex>
-              </Section>
+              </div>
             </Container>
           </div>
         </Theme>

diff --git a/apps/playground/app/test-inset/page.tsx b/apps/playground/app/test-inset/page.tsx
@@ -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';
 
@@ -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">
@@ -216,7 +220,7 @@ export default function Test() {
                       </div>
                     </Grid>
                   </Grid>
-                </Section>
+                </div>
               </Container>
             </div>
           </Theme>

diff --git a/apps/playground/app/test-responsive/page.tsx b/apps/playground/app/test-responsive/page.tsx
@@ -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';
 
@@ -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 }}
@@ -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"
@@ -118,7 +117,7 @@ export default function Test() {
                       Change theme
                     </Button>
                   </Flex>
-                </Section>
+                </div>
               </Container>
             </div>
           </Theme>

diff --git a/apps/playground/app/test-textfield/page.tsx b/apps/playground/app/test-textfield/page.tsx
@@ -16,7 +16,6 @@ import {
   Grid,
   Heading,
   IconButton,
-  Section,
   Text,
   TextFieldInput,
   TextFieldRoot,
@@ -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">
@@ -350,7 +349,7 @@ export default function Test() {
                     </TextFieldRoot>
                   </Flex>
                 </Grid>
-              </Section>
+              </div>
             </Container>
           </div>
         </Theme>

diff --git a/apps/tailwind/tailwind.config.js b/apps/tailwind/tailwind.config.js
@@ -10,11 +10,5 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [
-    frostedThemePlugin({
-      useTailwindColorNames: false, // optional
-      useTailwindRadiusNames: false, // optional
-      mapMissingTailwindColors: false, // optional
-    }),
-  ],
+  plugins: [frostedThemePlugin()],
 };