fulldev-ui 0.3.0-beta.3 → 0.3.3

package/src/components/structure/Wrap.astro

@@ -0,0 +1,44 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Component from '../_Component.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
+  color?: 'base' | 'brand'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  compact?: boolean
+  align?: 'start' | 'center' | 'end'
+}
+
+const { align = 'center', ...rest } = Astro.props
+---
+
+<Component
+  class:list={['wrap']}
+  {align}
+  {...rest}
+>
+  <slot />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('wrap') {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: stretch;
+    gap: var(--space-2);
+
+    &.align-start {
+      align-items: flex-start;
+    }
+
+    &.align-center {
+      align-items: center;
+    }
+
+    &.align-end {
+      align-items: flex-end;
+    }
+  }
+</style>

package/src/components/typography/Heading.astro

@@ -1,35 +1,24 @@
 ---
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import type { HTMLTag, Polymorphic } from 'astro/types'
 import Component from '../_Component.astro'
 
-type Props<As extends HTMLTag = 'h2'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component> & {
-    scheme?: 'light' | 'dark'
-    color?: 'base' | 'brand'
-    size?:
-      | 'xs'
-      | 'sm'
-      | 'md'
-      | 'lg'
-      | 'xl'
-      | '2xl'
-      | '3xl'
-      | '4xl'
-      | '5xl'
-      | '6xl'
-    html?: string
-    text?: string
-    contrast?: boolean
-    variant?: 'base' | 'muted' | 'accent'
-  }
+type Props<As extends HTMLTag = 'h2'> = Polymorphic<{ as: As }> & {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'
+  color?: 'base' | 'brand'
+  level?: 1 | 2 | 3 | 4 | 5 | 6
+  contrast?: boolean
+  html?: string
+  text?: string
+}
 
-const { as = 'h2', contrast = true, ...rest } = Astro.props
+const { level = 2, as = `h${level}`, contrast = true, ...rest } = Astro.props
 ---
 
 <Component
   class:list={['heading']}
   {as}
   {contrast}
+  {level}
   {...rest}
 >
   <slot />
@@ -40,18 +29,38 @@ const { as = 'h2', contrast = true, ...rest } = Astro.props
 
   @include component('heading') {
     margin: 0;
-    max-width: calc(var(--element-3) * 36);
-    scroll-margin: var(--space-4);
-    color: var(--foreground);
+    max-width: calc(var(--space-4) * 36);
+    scroll-margin: var(--space-5);
+    color: var(--text);
     font-weight: var(--heading-font-weight);
-    font-size: var(--text-heading);
+    font-weight: 700;
     line-height: 1.1;
     font-family: var(--heading-font-family);
     letter-spacing: -0.025em;
     text-decoration: none;
 
-    &.contrast {
-      color: var(--foreground-contrast);
+    &.level-1 {
+      font-size: var(--text-7);
+    }
+
+    &.level-2 {
+      font-size: var(--text-6);
+    }
+
+    &.level-3 {
+      font-size: var(--text-5);
+    }
+
+    &.level-4 {
+      font-size: var(--text-4);
+    }
+
+    &.level-5 {
+      font-size: var(--text-3);
+    }
+
+    &.level-6 {
+      font-size: var(--text-2);
     }
   }
 </style>

package/src/components/typography/Label.astro

@@ -3,9 +3,8 @@ import type { HTMLTag, Polymorphic } from 'astro/types'
 import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'label'> = Polymorphic<{ as: As }> & {
-  scheme?: 'light' | 'dark'
-  color?: 'base' | 'brand'
   size?: 'sm' | 'md' | 'lg'
+  color?: 'base' | 'brand'
   contrast?: boolean
   html?: string
   text?: string
@@ -28,14 +27,11 @@ const { as = 'label', ...rest } = Astro.props
   @include component('label') {
     display: flex;
     flex-direction: column;
-    color: var(--foreground);
+    color: var(--text);
     font-weight: var(--font-weight);
-    font-size: var(--text-label);
+    font-size: var(--text-1);
+    line-height: 1;
     font-family: var(--font-family);
     text-align: left;
-
-    &.contrast {
-      color: var(--foreground-contrast);
-    }
   }
 </style>

package/src/components/typography/Link.astro

@@ -1,20 +1,23 @@
 ---
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import type { HTMLTag, Polymorphic } from 'astro/types'
 import Component from '../_Component.astro'
 
-type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component> & {
-    html?: string
-    text?: string
-    variant?: 'base' | 'muted' | 'accent'
-  }
+type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  color?: 'base' | 'brand'
+  underline?: 'auto' | 'always' | 'hover' | 'none'
+  contrast?: boolean
+  html?: string
+  text?: string
+}
 
-const { as = 'a', ...rest } = Astro.props
+const { as = 'a', underline = 'auto', ...rest } = Astro.props
 ---
 
 <Component
   class:list={['link']}
   {as}
+  {underline}
   {...rest}
 >
   <slot />
@@ -28,16 +31,41 @@ const { as = 'a', ...rest } = Astro.props
     flex-wrap: wrap;
     align-items: center;
     gap: var(--space-2);
-    color: var(--foreground);
+    cursor: pointer;
+    border: none;
+    background: none;
+    color: var(--text);
     font-weight: var(--font-weight);
-    font-size: var(--text-body);
+    font-size: var(--text-2);
     font-family: var(--font-family);
-    text-decoration: none;
-    text-decoration-color: var(--border);
+    text-decoration-color: var(--border); // FIXME, werkt niet
     white-space: nowrap;
 
     &:hover {
+      color: var(--color-12);
+    }
+
+    &.underline-auto {
+      text-decoration: none;
+
+      &:is(p > &) {
+        text-decoration: underline;
+      }
+    }
+
+    &.underline-always {
       text-decoration: underline;
     }
+
+    &.underline-hover {
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    &.underline-none {
+      text-decoration: none;
+    }
   }
 </style>

package/src/components/typography/List.astro

@@ -3,16 +3,15 @@ import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
 import Component from '../_Component.astro'
 import ListItem from './ListItem.astro'
 
-type Props<As extends HTMLTag = 'ul'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component> & {
-    html?: string
-    text?: string
-    variant?: 'base' | 'muted' | 'accent'
-    items?: (
-      | ComponentProps<typeof ListItem>
-      | ComponentProps<typeof ListItem>['html']
-    )[]
-  }
+type Props<As extends HTMLTag = 'ul'> = Polymorphic<{ as: As }> & {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  color?: 'base' | 'brand'
+  contrast?: boolean
+  items?: (
+    | ComponentProps<typeof ListItem>
+    | ComponentProps<typeof ListItem>['html']
+  )[]
+}
 
 const { as = 'ul', items, ...rest } = Astro.props
 ---
@@ -37,10 +36,10 @@ const { as = 'ul', items, ...rest } = Astro.props
   @include component('list') {
     display: flex;
     flex-direction: column;
-    padding-left: var(--space-4);
-    color: var(--foreground);
+    padding-left: var(--space-5);
+    color: var(--text);
     font-weight: var(--font-weight);
-    font-size: var(--text-body);
+    font-size: var(--text-2);
     line-height: 1.625;
     font-family: var(--font-family);
     list-style-type: disc;

package/src/components/typography/ListItem.astro

@@ -1,13 +1,14 @@
 ---
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import type { HTMLTag, Polymorphic } from 'astro/types'
 import Component from '../_Component.astro'
 
-type Props<As extends HTMLTag = 'li'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component> & {
-    html?: string
-    text?: string
-    variant?: 'base' | 'muted' | 'accent'
-  }
+type Props<As extends HTMLTag = 'li'> = Polymorphic<{ as: As }> & {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  color?: 'base' | 'brand'
+  contrast?: boolean
+  html?: string
+  text?: string
+}
 
 const { as = 'li', ...rest } = Astro.props
 ---
@@ -25,10 +26,10 @@ const { as = 'li', ...rest } = Astro.props
 
   @include component('list-item') {
     align-items: center;
-    max-width: calc(var(--element-3) * 36);
-    color: var(--foreground);
+    max-width: calc(var(--space-4) * 36);
+    color: var(--text);
     font-weight: var(--font-weight);
-    font-size: var(--text-body);
+    font-size: var(--text-2);
     line-height: 1.625;
     font-family: var(--font-family);
   }

package/src/components/typography/Paragraph.astro

@@ -3,9 +3,8 @@ import type { HTMLTag, Polymorphic } from 'astro/types'
 import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'p'> = Polymorphic<{ as: As }> & {
-  scheme?: 'light' | 'dark'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   color?: 'base' | 'brand'
-  size?: 'sm' | 'md' | 'lg' | 'xl'
   contrast?: boolean
   html?: string
   text?: string
@@ -27,15 +26,11 @@ const { as = 'p', ...rest } = Astro.props
 
   @include component('paragraph') {
     margin: 0;
-    max-width: calc(var(--element-3) * 36);
-    color: var(--foreground);
+    max-width: calc(var(--space-4) * 36);
+    color: var(--text);
     font-weight: var(--font-weight);
-    font-size: var(--text-body);
+    font-size: var(--text-2);
     line-height: 1.625;
     font-family: var(--font-family);
-
-    &.contrast {
-      color: var(--foreground-contrast);
-    }
   }
 </style>

package/src/components/typography/Tagline.astro

@@ -1,13 +1,14 @@
 ---
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import type { HTMLTag, Polymorphic } from 'astro/types'
 import Component from '../_Component.astro'
 
-type Props<As extends HTMLTag = 'span'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component> & {
-    html?: string
-    text?: string
-    variant?: 'base' | 'muted' | 'accent'
-  }
+type Props<As extends HTMLTag = 'span'> = Polymorphic<{ as: As }> & {
+  size?: 'sm' | 'md' | 'lg'
+  color?: 'base' | 'brand'
+  contrast?: boolean
+  html?: string
+  text?: string
+}
 
 const { as = 'span', ...rest } = Astro.props
 ---
@@ -25,10 +26,10 @@ const { as = 'span', ...rest } = Astro.props
 
   @include component('tagline') {
     margin: 0;
-    max-width: calc(var(--element-3) * 36);
-    color: var(--foreground);
+    max-width: calc(var(--space-4) * 36);
+    color: var(--text);
     font-weight: var(--font-weight);
-    font-size: var(--text-label);
+    font-size: var(--text-1);
     line-height: 1.25;
     font-family: var(--font-family);
   }

package/src/components/typography/Text.astro

@@ -3,9 +3,8 @@ import type { HTMLTag, Polymorphic } from 'astro/types'
 import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'p'> = Polymorphic<{ as: As }> & {
-  scheme?: 'light' | 'dark'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   color?: 'base' | 'brand'
-  size?: 'sm' | 'md' | 'lg' | 'xl'
   contrast?: boolean
   html?: string
   text?: string
@@ -16,6 +15,7 @@ const { as = 'p', ...rest } = Astro.props
 
 <Component
   class:list={['text']}
+  {as}
   {...rest}
 >
   <slot />
@@ -26,15 +26,11 @@ const { as = 'p', ...rest } = Astro.props
 
   @include component('text') {
     margin: 0;
-    max-width: calc(var(--element-3) * 36);
-    color: var(--foreground);
+    max-width: calc(var(--space-4) * 36);
+    color: var(--text, var(--color-11));
     font-weight: var(--font-weight);
-    font-size: var(--text-body);
+    font-size: var(--text-2);
     line-height: 1.625;
     font-family: var(--font-family);
-
-    &.contrast {
-      color: var(--foreground-contrast);
-    }
   }
 </style>

package/src/content/config.ts

@@ -1,5 +1,5 @@
 import { defineCollection, reference } from 'astro:content'
-import { pageSchema } from '../schemas/collection'
+import { pageSchema } from '../schemas/schemas'
 
 const collection = defineCollection({
   type: 'content',