fulldev-ui 0.3.36 → 0.4.0-beta.0

package/src/content/pages/structure/_wrap.mdx

@@ -0,0 +1,25 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Wrap
+description: Structures children onto one line or can wrap onto multiple lines.
+---
+
+```astro live
+---
+import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro'
+import Wrap from 'fulldev-ui/components/Wrap.astro'
+---
+
+<Wrap>
+  <DecorativeBox />
+  <DecorativeBox />
+  <DecorativeBox />
+  <DecorativeBox />
+  <DecorativeBox />
+  <DecorativeBox />
+  <DecorativeBox />
+  <DecorativeBox />
+</Wrap>
+```

package/src/content/pages/structure/carousel.mdx

@@ -0,0 +1,31 @@
+---
+_layout: BlockLayout
+settings: components
+
+title: Carousel
+---
+
+```astro live
+---
+import Carousel from 'fulldev-ui/components/Carousel.astro'
+import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+---
+
+<Section>
+  <Carousel position="inset">
+    <DecorativeBox />
+    <DecorativeBox />
+    <DecorativeBox />
+    <DecorativeBox />
+    <DecorativeBox />
+    <DecorativeBox />
+    <DecorativeBox />
+    <DecorativeBox />
+    <DecorativeBox />
+    <DecorativeBox />
+    <DecorativeBox />
+    <DecorativeBox />
+  </Carousel>
+</Section>
+```

package/src/content/pages/structure/column.mdx

@@ -0,0 +1,21 @@
+---
+_layout: BlockLayout
+settings: components
+
+title: Column
+---
+
+```astro live
+---
+import Column from 'fulldev-ui/components/Column.astro'
+import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+---
+
+<Section>
+  <Column>
+    <DecorativeBox />
+    <DecorativeBox />
+  </Column>
+</Section>
+```

package/src/content/pages/structure/grid.mdx

@@ -0,0 +1,26 @@
+---
+_layout: BlockLayout
+settings: components
+
+title: Grid
+---
+
+```astro live
+---
+import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro'
+import Grid from 'fulldev-ui/components/Grid.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+---
+
+<Section>
+  <Grid>
+    <DecorativeBox />
+    <DecorativeBox />
+    <DecorativeBox />
+    <DecorativeBox />
+    <DecorativeBox />
+    <DecorativeBox />
+    <DecorativeBox />
+  </Grid>
+</Section>
+```

package/src/content/pages/structure/masonry.mdx

@@ -0,0 +1,32 @@
+---
+_layout: BlockLayout
+settings: components
+
+title: Masonry
+---
+
+```astro live
+---
+import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro'
+import Masonry from 'fulldev-ui/components/Masonry.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+---
+
+<Section>
+  <Masonry>
+    <DecorativeBox style={{ height: '150px' }} />
+    <DecorativeBox style={{ height: '150px' }} />
+    <DecorativeBox />
+    <DecorativeBox style={{ height: '150px' }} />
+    <DecorativeBox />
+    <DecorativeBox style={{ height: '150px' }} />
+    <DecorativeBox style={{ height: '150px' }} />
+    <DecorativeBox />
+    <DecorativeBox />
+    <DecorativeBox style={{ height: '150px' }} />
+    <DecorativeBox />
+    <DecorativeBox style={{ height: '150px' }} />
+    <DecorativeBox />
+  </Masonry>
+</Section>
+```

package/src/content/pages/structure/split.mdx

@@ -0,0 +1,21 @@
+---
+_layout: BlockLayout
+settings: components
+
+title: Split
+---
+
+```astro live
+---
+import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Split from 'fulldev-ui/components/Split.astro'
+---
+
+<Section>
+  <Split>
+    <DecorativeBox />
+    <DecorativeBox />
+  </Split>
+</Section>
+```

package/src/content/pages/structure/spread.mdx

@@ -0,0 +1,21 @@
+---
+_layout: BlockLayout
+settings: components
+
+title: Spread
+---
+
+```astro live
+---
+import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Spread from 'fulldev-ui/components/Spread.astro'
+---
+
+<Section>
+  <Spread>
+    <DecorativeBox />
+    <DecorativeBox />
+  </Spread>
+</Section>
+```

package/src/content/pages/typography/_tagline.mdx

@@ -0,0 +1,36 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Tagline
+---
+
+```astro live
+---
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+---
+
+<Tagline size="sm">This is a tagline</Tagline>
+<Tagline size="md">This is a tagline</Tagline>
+<Tagline size="lg">This is a tagline</Tagline>
+```
+
+```astro live
+---
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+---
+
+<Tagline color="base">The quick brown fox jumps</Tagline>
+<Tagline color="brand">The quick brown fox jumps</Tagline>
+```
+
+Set to `true` by default on Headings, which you can override by setting it to `false`.
+
+```astro live
+---
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+---
+
+<Tagline contrast={true}>The quick brown fox jumps</Tagline>
+<Tagline contrast={false}>The quick brown fox jumps</Tagline>
+```

package/src/content/pages/typography/heading.mdx

@@ -0,0 +1,74 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Heading
+---
+
+# Heading
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Heading from 'fulldev-ui/components/Heading.astro'
+---
+
+<Heading>The quick brown fox jumps</Heading>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Heading from 'fulldev-ui/components/Heading.astro'
+---
+
+<Heading level={1}>The quick brown fox jumps</Heading>
+<Heading level={2}>The quick brown fox jumps</Heading>
+<Heading level={3}>The quick brown fox jumps</Heading>
+<Heading level={4}>The quick brown fox jumps</Heading>
+<Heading level={5}>The quick brown fox jumps</Heading>
+<Heading level={6}>The quick brown fox jumps</Heading>
+```
+
+```astro live
+---
+import Heading from 'fulldev-ui/components/Heading.astro'
+---
+
+<Heading size="sm">The quick brown fox jumps</Heading>
+<Heading size="md">The quick brown fox jumps</Heading>
+<Heading size="lg">The quick brown fox jumps</Heading>
+```
+
+```astro live
+---
+import Heading from 'fulldev-ui/components/Heading.astro'
+---
+
+<Heading>The quick brown fox jumps</Heading>
+<Heading contrast={false}>The quick brown fox jumps</Heading>
+```
+
+```astro live
+---
+import Heading from 'fulldev-ui/components/Heading.astro'
+---
+
+<Heading color="base">The quick brown fox jumps</Heading>
+<Heading color="brand">The quick brown fox jumps</Heading>
+```
+
+```astro live
+---
+import Heading from 'fulldev-ui/components/Heading.astro'
+---
+
+<Heading contrast={false} color="base">The quick brown fox jumps</Heading>
+<Heading contrast={false} color="brand">The quick brown fox jumps</Heading>
+```

package/src/content/pages/typography/label.mdx

@@ -0,0 +1,42 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Label
+---
+
+# Label
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Label from 'fulldev-ui/components/Label.astro'
+---
+
+<Label>Label</Label>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Label from 'fulldev-ui/components/Label.astro'
+---
+
+<Label color="base">Label</Label>
+<Label color="brand">Label</Label>
+```
+
+```astro live
+---
+import Label from 'fulldev-ui/components/Label.astro'
+---
+
+<Label>Label</Label>
+<Label contrast>Label</Label>
+```

package/src/content/pages/typography/link.mdx

@@ -0,0 +1,63 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Link
+---
+
+# Link
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Link from 'fulldev-ui/components/Link.astro'
+---
+
+<Link href="/base/link">Link</Link>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Link from 'fulldev-ui/components/Link.astro'
+---
+
+<Link href="/base/link" size="sm">Link</Link>
+<Link href="/base/link" size="md">Link</Link>
+<Link href="/base/link" size="lg">Link</Link>
+```
+
+```astro live
+---
+import Link from 'fulldev-ui/components/Link.astro'
+---
+
+<Link href="/base/link" underline="auto">Link</Link>
+<Link href="/base/link" underline="always">Link</Link>
+<Link href="/base/link" underline="hover">Link</Link>
+<Link href="/base/link" underline="none">Link</Link>
+```
+
+```astro live
+---
+import Link from 'fulldev-ui/components/Link.astro'
+---
+
+<Link href="#">Link</Link>
+<Link href="#" contrast>Link</Link>
+```
+
+```astro live
+---
+import Link from 'fulldev-ui/components/Link.astro'
+---
+
+<Link color="base">Link</Link>
+<Link color="brand">Link</Link>
+```

package/src/content/pages/typography/list.mdx

@@ -0,0 +1,52 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: List
+---
+
+# List
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import List from 'fulldev-ui/components/List.astro'
+---
+
+<List items={['Item 1', 'Item 2']} />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import List from 'fulldev-ui/components/List.astro'
+---
+
+<List size="sm" items={['Item 1', 'Item 2']} />
+<List size="md" items={['Item 1', 'Item 2']} />
+<List size="lg" items={['Item 1', 'Item 2']} />
+```
+
+```astro live
+---
+import List from 'fulldev-ui/components/List.astro'
+---
+
+<List color="base" items={['Item 1', 'Item 2']} />
+<List color="brand" items={['Item 1', 'Item 2']} />
+```
+
+```astro live
+---
+import List from 'fulldev-ui/components/List.astro'
+---
+
+<List items={['Item 1', 'Item 2']} />
+<List contrast items={['Item 1', 'Item 2']} />
+```

package/src/content/pages/typography/text.mdx

@@ -0,0 +1,62 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Text
+---
+
+# Text
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Text from 'fulldev-ui/components/Text.astro'
+---
+
+<Text>The quick brown fox jumps over the lazy dog</Text>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Text from 'fulldev-ui/components/Text.astro'
+---
+
+<Text size="sm">The quick brown fox jumps over the lazy dog</Text>
+<Text size="md">The quick brown fox jumps over the lazy dog</Text>
+<Text size="lg">The quick brown fox jumps over the lazy dog</Text>
+```
+
+```astro live
+---
+import Text from 'fulldev-ui/components/Text.astro'
+---
+
+<Text lead size="sm">The quick brown fox jumps over the lazy dog</Text>
+<Text lead size="md">The quick brown fox jumps over the lazy dog</Text>
+<Text lead size="lg">The quick brown fox jumps over the lazy dog</Text>
+```
+
+```astro live
+---
+import Text from 'fulldev-ui/components/Text.astro'
+---
+
+<Text color="base">The quick brown fox jumps</Text>
+<Text color="brand">The quick brown fox jumps</Text>
+```
+
+```astro live
+---
+import Text from 'fulldev-ui/components/Text.astro'
+---
+
+<Text>The quick brown fox jumps</Text>
+<Text contrast>The quick brown fox jumps</Text>
+```

package/src/content/records/record.yml

@@ -0,0 +1 @@
+title: Test

package/src/content/settings/base.yml

@@ -0,0 +1,48 @@
+header:
+  heading: Fulldev UI
+  variant: base
+  links:
+    - text: Docs
+      href: /overview/introduction
+    - text: Components
+      href: /typography/heading
+    - text: Blocks
+      href: /blocks
+  search:
+    icon: search
+    variant: soft
+  buttons:
+    - href: https://github.com/fulldotdev/ui
+      target: _blank
+      aria-label: GitHub
+      icon: brand-github
+    - href: https://discord.gg/vXZqMbadm8
+      target: _blank
+      aria-label: Discord
+      icon: brand-discord
+  drawer:
+    - links:
+        - text: Docs
+          href: /overview/introduction
+        - text: Components
+          href: /typography/heading
+        - text: Blocks
+          href: /blocks
+    - heading: Overview
+      links:
+        - text: Introduction
+          href: /overview/introduction
+        - text: Installation
+          href: /overview/installation
+        - text: Integration
+          href: /overview/integration
+        - text: Theming
+          href: /overview/theming
+        - text: Frameworks
+          href: /overview/frameworks
+    - heading: Typography
+      folder: typography
+    - heading: Base
+      folder: base
+    - heading: Structure
+      folder: structure

package/src/content/settings/components.yml

@@ -0,0 +1,27 @@
+sidebar:
+  - heading: Overview
+    links:
+      - text: Introduction
+        href: /overview/introduction
+      - text: Installation
+        href: /overview/installation
+      - text: Integration
+        href: /overview/integration
+      - text: Theming
+        href: /overview/theming
+      - text: Frameworks
+        href: /overview/frameworks
+  - heading: Typography
+    folder: typography
+  - heading: Base
+    folder: base
+  - heading: Structure
+    folder: structure
+
+toc:
+  - heading: On this page
+    links:
+      - text: Props
+        href: /overview/introduction
+      - text: Examples
+        href: /overview/installation

package/src/css/color.css

@@ -1,71 +1,10 @@
-:where(:root),
-:where(.theme-light),
-[data-theme='light'] {
-  --brand-1: #fbf9f8;
-  --brand-2: #fff1ec;
-  --brand-3: #ffe6db;
-  --brand-4: #ffd3c2;
-  --brand-5: #ffc4ad;
-  --brand-6: #ffb397;
-  --brand-7: #ff9e7e;
-  --brand-8: #f5845f;
-  --brand-9: #f50;
-  --brand-10: #ed4d00;
-  --brand-11: #ca4900;
-  --brand-12: #5b2a1a;
-  --brand-contrast: #fff;
-  --brand-background: #fbf9f8;
-
-  --base-1: #f9f9fa;
-  --base-2: #f5f6f8;
-  --base-3: #ececf0;
-  --base-4: #e3e4e9;
-  --base-5: #dcdde2;
-  --base-6: #d4d5dc;
-  --base-7: #c8cad2;
-  --base-8: #b5b7c2;
-  --base-9: #878994;
-  --base-10: #7c7e89;
-  --base-11: #5e6068;
-  --base-12: #1e1f24;
-  --base-contrast: #ffffff;
-  --base-background: #f9f9fa;
-
+.theme-light,
+.theme-light * {
   color-scheme: light;
 }
 
-:where(.theme-dark),
-[data-theme='dark'] {
-  --brand-1: #160f0d;
-  --brand-2: #201511;
-  --brand-3: #38190f;
-  --brand-4: #4f1602;
-  --brand-5: #5e1e07;
-  --brand-6: #6f2c15;
-  --brand-7: #873c23;
-  --brand-8: #ae4d2c;
-  --brand-9: #f50;
-  --brand-10: #ed4d00;
-  --brand-11: #ff976f;
-  --brand-12: #ffd8c9;
-  --brand-contrast: #fff;
-  --brand-background: #160f0d;
-
-  --base-1: #101113;
-  --base-2: #18191b;
-  --base-3: #212225;
-  --base-4: #282a2d;
-  --base-5: #2e3135;
-  --base-6: #373a3f;
-  --base-7: #44474e;
-  --base-8: #5c616a;
-  --base-9: #696e77;
-  --base-10: #777b84;
-  --base-11: #b0b4ba;
-  --base-12: #edeef0;
-  --base-contrast: #ffffff;
-  --base-background: #101113;
-
+.theme-dark,
+.theme-dark * {
   color-scheme: dark;
 }
 
@@ -146,7 +85,7 @@
   --color-contrast: var(--color-1);
 }
 
-:where(:root),
+/* :where(:root),
 :where(.theme-light),
 :where(.theme-dark),
 :where(.color-base),
@@ -226,4 +165,4 @@
   --border: transparent;
   --border-hover: transparent;
   --text: var(--color-contrast);
-}
+} */