fulldev-ui 0.4.0-beta.1 → 0.4.11

package/src/components/experimental/Prose.astro

@@ -16,139 +16,141 @@ const { as = 'div', ...rest } = Astro.props
 </Root>
 
 <style is:global lang="scss">
-  .prose {
-    width: 100%;
-    max-width: 768px;
-    scroll-margin-top: var(--space-6);
-    color: var(--color-11);
-    font-weight: var(--font-weight);
-    font-size: var(--text-3);
-    line-height: 1.7;
-    font-family: var(--font-family);
-
-    > {
-      .astro-code,
-      .window {
-        margin-top: var(--space-5);
-      }
-
-      * {
-        margin: 0;
-      }
-
-      p {
-        margin-top: var(--space-4);
-      }
-
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        color: var(--color-12);
-        font-weight: 700;
-        line-height: 1.2;
-      }
+  @layer fulldev {
+    .prose {
+      width: 100%;
+      scroll-margin-top: var(--space-6);
+      color: var(--color-11);
+      font-weight: var(--font-weight);
+      font-size: var(--text-3);
+      line-height: 1.7;
+      font-family: var(--font-family);
+
+      > {
+        .astro-code,
+        .window,
+        .table {
+          margin-top: var(--space-5);
+        }
 
-      h1 {
-        margin-top: var(--space-6);
-        scroll-margin-top: var(--space-6);
-        font-size: var(--text-8);
-      }
+        * {
+          margin: 0;
+        }
 
-      h2 {
-        margin-top: var(--space-6);
-        scroll-margin-top: var(--space-6);
-        font-size: var(--text-7);
-      }
+        p {
+          margin-top: var(--space-4);
+        }
 
-      h3 {
-        margin-top: var(--space-6);
-        scroll-margin-top: var(--space-6);
-        font-size: var(--text-6);
-      }
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          color: var(--color-12);
+          font-weight: 700;
+          line-height: 1.2;
+        }
 
-      h4 {
-        margin-top: var(--space-5);
-        scroll-margin-top: var(--space-5);
-        font-size: var(--text-5);
-      }
+        h1 {
+          margin-top: var(--space-6);
+          scroll-margin-top: var(--space-6);
+          font-size: var(--text-8);
+        }
 
-      h5 {
-        margin-top: var(--space-5);
-        scroll-margin-top: var(--space-5);
-        font-size: var(--text-4);
-      }
+        h2 {
+          margin-top: var(--space-6);
+          scroll-margin-top: var(--space-6);
+          font-size: var(--text-7);
+        }
 
-      h6 {
-        margin-top: var(--space-5);
-        scroll-margin-top: var(--space-5);
-        font-size: var(--text-3);
-      }
+        h3 {
+          margin-top: var(--space-6);
+          scroll-margin-top: var(--space-6);
+          font-size: var(--text-6);
+        }
 
-      *:first-child {
-        margin-top: 0;
-      }
-    }
+        h4 {
+          margin-top: var(--space-5);
+          scroll-margin-top: var(--space-5);
+          font-size: var(--text-5);
+        }
 
-    .display {
-      display: grid;
-      width: 100%;
-      max-width: none;
+        h5 {
+          margin-top: var(--space-5);
+          scroll-margin-top: var(--space-5);
+          font-size: var(--text-4);
+        }
 
-      table {
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
         h6 {
-          margin: var(--space-2) 0;
+          margin-top: var(--space-5);
+          scroll-margin-top: var(--space-5);
+          font-size: var(--text-3);
+        }
 
-          font: 600 var(--text-3) 'Saira';
+        *:first-child {
+          margin-top: 0;
+        }
+      }
 
-          & + p {
-            color: var(--hue11);
+      .display {
+        display: grid;
+        width: 100%;
+        max-width: none;
+
+        table {
+          h1,
+          h2,
+          h3,
+          h4,
+          h5,
+          h6 {
+            margin: var(--space-2) 0;
+
+            font: 600 var(--text-3) 'Saira';
+
+            & + p {
+              color: var(--hue11);
+            }
           }
         }
       }
-    }
 
-    table {
-      margin: var(--space-5) 0;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-1) !important;
-      border-collapse: collapse;
-      width: 100%;
-    }
+      table {
+        margin: var(--space-5) 0;
+        border: 1px solid var(--border);
+        border-radius: var(--radius-1) !important;
+        border-collapse: collapse;
+        width: 100%;
+      }
 
-    th {
-      border-bottom: 1px solid var(--border);
-      background: var(--raised-background) !important;
-      color: var(--muted-foreground) !important;
-      font-weight: 500 !important;
-      font-size: var(--text-3) !important;
-    }
+      th {
+        border-bottom: 1px solid var(--border);
+        background: var(--raised-background) !important;
+        color: var(--muted-foreground) !important;
+        font-weight: 500 !important;
+        font-size: var(--text-3) !important;
+      }
 
-    td {
-      color: var(--muted-foreground) !important;
-    }
+      td {
+        color: var(--muted-foreground) !important;
+      }
 
-    th,
-    td {
-      padding: var(--space-2);
-    }
+      th,
+      td {
+        padding: var(--space-2);
+      }
 
-    table a {
-      color: var(--solid) !important;
-      font-size: var(--text-3) !important;
-      line-height: 1 !important;
-      white-space: nowrap;
-    }
+      table a {
+        color: var(--solid) !important;
+        font-size: var(--text-3) !important;
+        line-height: 1 !important;
+        white-space: nowrap;
+      }
 
-    table a:hover {
-      text-decoration: underline;
+      table a:hover {
+        text-decoration: underline;
+      }
     }
   }
 </style>

package/src/components/experimental/Window.astro

@@ -52,80 +52,82 @@ const isComponent =
 }
 
 <style lang="scss" is:global>
-  .window {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    width: 100%;
-
-    .code-container {
+  @layer fulldev {
+    .window {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
       width: 100%;
 
-      .astro-code {
-        margin: 0;
-        background-color: var(--base-2) !important;
-        padding: var(--space-5);
-      }
-    }
+      .code-container {
+        width: 100%;
 
-    &.component {
-      border: 1px solid var(--base-6);
-      border-radius: var(--radius-2);
-      overflow: hidden;
-
-      .example-container {
-        display: flex;
-        flex-direction: column;
-        align-items: start;
-        gap: var(--space-4);
-        padding: var(--space-5);
+        .astro-code {
+          margin: 0;
+          background-color: var(--base-2) !important;
+          padding: var(--space-5);
+        }
       }
 
-      .code-container {
-        border: none;
-        border-top: 1px solid var(--base-6);
-        border-radius: 0px;
+      &.component {
+        border: 1px solid var(--base-6);
+        border-radius: var(--radius-2);
+        overflow: hidden;
+
+        .example-container {
+          display: flex;
+          flex-direction: column;
+          align-items: start;
+          gap: var(--space-4);
+          padding: var(--space-5);
+        }
 
-        .astro-code {
+        .code-container {
           border: none;
+          border-top: 1px solid var(--base-6);
           border-radius: 0px;
+
+          .astro-code {
+            border: none;
+            border-radius: 0px;
+          }
         }
       }
-    }
 
-    &.block {
-      gap: var(--space-2);
-      padding-top: var(--space-7);
-      padding-bottom: var(--space-7);
+      &.block {
+        gap: var(--space-2);
+        padding-top: var(--space-7);
+        padding-bottom: var(--space-7);
 
-      .button-header {
-        padding: 0 var(--gutter);
-      }
-
-      .code-container {
-        display: none;
-        padding: 0 var(--gutter);
-        max-width: calc(100% - (2 * var(--gutter)));
-      }
+        .button-header {
+          padding: 0 var(--gutter);
+        }
 
-      .window-toggle {
-        display: none;
-        visibility: hidden;
-        opacity: 0;
-      }
+        .code-container {
+          display: none;
+          padding: 0 var(--gutter);
+          max-width: calc(100% - (2 * var(--gutter)));
+        }
 
-      .window-toggle:checked {
-        & ~ .example-container {
+        .window-toggle {
           display: none;
+          visibility: hidden;
+          opacity: 0;
         }
-        & ~ .code-container {
-          display: block;
+
+        .window-toggle:checked {
+          & ~ .example-container {
+            display: none;
+          }
+          & ~ .code-container {
+            display: block;
+          }
         }
-      }
 
-      .example-container {
-        border-top: 1px solid var(--base-6);
-        width: 100%;
+        .example-container {
+          border-top: 1px solid var(--base-6);
+          width: 100%;
+        }
       }
     }
   }

package/src/content/pages/index.mdx

@@ -2,6 +2,7 @@
 seo:
   title: Fulldev UI - Astro component and block library, open-source
   description: Make websites rapidly with pre-built components and blocks.
+  image: /images/og-image.png
 
 sections:
   hero:
@@ -9,7 +10,7 @@ sections:
     color: brand
     badge:
       as: a
-      text: We just released a big update 🎉
+      text: We just released our biggest update yet 🎉
       href: https://discord.gg/vXZqMbadm8
     heading: The Astro UI library to build content sites
     text: Make websites with prebuilt components and blocks
@@ -38,7 +39,7 @@ sections:
     _bookshop_name: Content
     color: brand
     label: Components
-    heading: Or built your own, with easy to use components
+    heading: Or build your own, with easy to use components
     text: our rich set of components make it easy to build your own blocks with great customizability through props and global theming.
     image: /images/component-code.png
     reverse: odd

package/src/content/pages/overview/frameworks.mdx

@@ -4,6 +4,7 @@ settings: components
 ---
 
 # Frameworks
+
 Fulldev UI is written in vanilla CSS and .astro files. It is framework agnostic.
 
 ## JS frameworks
@@ -13,7 +14,6 @@ All styles in Fulldev UI use regular CSS and classes. Classes use the following
 - Component classes are the same as the component name, like `button` for `<Button>`.
 - Prop classes have the prop name as prefix, like `variant-primary` for `<Button variant="primary">`.
 - If a prop is a boolean the class is added without a prefix, like `contrast`.
-- To prevent conflicts, all styles only apply if there is a `full` class on the element too.
 
 This means you can apply Fulldev UI styles to any framework component as follows:
 
@@ -22,7 +22,7 @@ This means you can apply Fulldev UI styles to any framework component as follows
 import Button from 'fulldev-ui/components/Button.astro'
 ---
 
-<a class="full button variant-primary contrast radius-auto"> Button </a>
+<a class="button variant-primary contrast radius-auto"> Button </a>
 <Button contrast> Button </Button>
 ```
 
@@ -47,16 +47,6 @@ export default defineConfig({
 
 In your `uno.config.ts` add the following:
 
-```ts
-// uno.config.ts
-import fulldevUI from 'fulldev-ui/unocss'
-
-export default defineConfig({
-  presets: [fulldevUI],
-})
-```
-
-
 ```ts
 // uno.config.ts
 import fulldevUI from 'fulldev-ui/unocss'
@@ -72,9 +62,10 @@ The following classes are available when using the Tailwind plugin or UnoCSS pre
 
 ### Spacing
 
-The following spacing classes are added to your tailwind/uno config. 
+The following spacing classes are added to your tailwind/uno config.
 
 You can use them like `p-space-1`, `m-space-1`, `h-space-1`, `w-space-1`, etc.
+
 ```ts
 spacing: {
   'space-1': 'var(--space-1)',
@@ -89,7 +80,7 @@ spacing: {
 
 ### Font size
 
-The following spacing classes are added to your tailwind/uno config. 
+The following spacing classes are added to your tailwind/uno config.
 
 You can use them like `text-1`, `text-2`, `text-3`, etc.
 
@@ -108,7 +99,7 @@ fontSize: {
 
 ### Border radius
 
-The following border radius classes are added to your tailwind/uno config. 
+The following border radius classes are added to your tailwind/uno config.
 
 You can use them like `rounded-1`, `rounded-2`, `rounded-3`, etc.
 
@@ -122,7 +113,7 @@ borderRadius: {
 
 ### Color classes
 
-The following color classes are added to your tailwind/uno config. 
+The following color classes are added to your tailwind/uno config.
 
 You can use them like `bg-color-1`, `text-base-2`, `border-base-6`, etc.
 
@@ -177,4 +168,4 @@ colors: {
     background: 'var(--color-brand-background)',
   }
 }
-```
+```

package/src/content/pages/overview/introduction.mdx

@@ -5,7 +5,7 @@ settings: components
 
 # Introduction
 
-Fulldev UI focusses on content websites rather than applications.
+Fulldev UI focuses on content websites rather than applications.
 
 ##### Build entire websites with just components
 

package/src/content/settings/base.yml

@@ -1,3 +1,6 @@
+seo:
+  image: /images/og-image.png
+
 header:
   heading: Fulldev UI
   variant: base

package/src/css/custom.css

@@ -47,13 +47,8 @@ mark {
 }
 
 .astro-code {
-  margin: 0;
   border: 1px solid var(--base-6);
   border-radius: var(--radius-2);
   background-color: var(--base-2) !important;
   padding: var(--space-5);
 }
-
-a {
-  color: var(--primary-5);
-}