fulldev-ui 0.2.12 → 0.3.0-beta.1

package/src/components/_todo/Footer.astro

@@ -0,0 +1,66 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Component from '../_Component.astro'
+
+type Props<As extends HTMLTag = 'footer'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Component> & {
+    structure?: 'spread'
+    position?: 'relative' | 'sticky' | 'fixed' | 'absolute'
+    variant?: 'base' | 'raised'
+    frame?: 'wrapper' | 'container' | 'panel'
+    align?: 'start' | 'center' | 'end'
+  }
+
+const {
+  as = 'footer',
+  density = 'base',
+  frame = 'wrapper',
+  ...rest
+} = Astro.props
+---
+
+<Component
+  class:list={['footer']}
+  {as}
+  {density}
+  {frame}
+  {...rest}
+>
+  <slot />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('footer') {
+    --inner: var(--element-3);
+
+    display: flex;
+    top: 0;
+    right: 0;
+    left: 0;
+    justify-content: space-between;
+    align-items: center;
+    z-index: 10;
+    background: var(--background);
+    padding-top: var(--element-3);
+    padding-bottom: var(--element-3);
+    width: 100%;
+
+    // &.panel {
+    //   margin-top: var(--inner);
+    // }
+
+    &.position-fixed {
+      position: fixed;
+    }
+
+    &.position-absolute {
+      position: absolute;
+    }
+
+    &.position-sticky {
+      position: sticky;
+    }
+  }
+</style>

package/src/components/{segment → _todo}/Form.astro

@@ -1,23 +1,23 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'form'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
-    structure?: 'stack' | 'group'
+  ComponentProps<typeof Component> & {
+    structure?: 'column' | 'row' | 'group'
   }
 
-const { as = 'form', structure = 'stack', ...rest } = Astro.props
+const { as = 'form', structure = 'column', ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['form']}
   {as}
   {structure}
   {...rest}
 >
   <slot />
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';

package/src/components/{segment → _todo}/Prose.astro

@@ -1,40 +1,40 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag>
+  ComponentProps<typeof Component>
 
 const { as = 'div', ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['prose']}
   {as}
   {...rest}
 >
   <slot />
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
 
-  @include component('prose') {
-    @media (min-width: 768px) {
-      padding-right: 15vw;
-      padding-left: 15vw;
-    }
-    @media (min-width: 1024px) {
-      padding-right: 25vw;
-      padding-left: 25vw;
-    }
-  }
+  // @include component('prose') {
+  //   @media (min-width: 768px) {
+  //     padding-right: 15vw;
+  //     padding-left: 15vw;
+  //   }
+  //   @media (min-width: 1024px) {
+  //     padding-right: 25vw;
+  //     padding-left: 25vw;
+  //   }
+  // }
 
   // Tables
   .full.prose {
     color: var(--foreground);
     font-weight: var(--font-weight);
-    font-size: var(--text-2);
+    font-size: var(--text-body);
     line-height: 1.625;
     font-family: var(--font-family);
 
@@ -51,7 +51,7 @@ const { as = 'div', ...rest } = Astro.props
         h5,
         h6 {
           margin: var(--space-2) 0;
-          font: 600 var(--text-2) 'Saira';
+          font: 600 var(--text-body) 'Saira';
 
           & + p {
             color: var(--hue11);
@@ -77,7 +77,7 @@ const { as = 'div', ...rest } = Astro.props
       background: var(--raised-background) !important;
       color: var(--muted-foreground) !important;
       font-weight: 500 !important;
-      font-size: var(--text-1) !important;
+      font-size: var(--text-label) !important;
     }
 
     td {
@@ -90,15 +90,15 @@ const { as = 'div', ...rest } = Astro.props
     }
 
     table a {
-      color: var(--primary-background) !important;
-      font-size: var(--text-1) !important;
+      color: var(--solid) !important;
+      font-size: var(--text-label) !important;
       line-height: 1 !important;
       white-space: nowrap;
     }
 
     h6 {
       margin: var(--space-2) 0;
-      font-size: var(--text-2) !important;
+      font-size: var(--text-body) !important;
     }
 
     table a:hover {

package/src/components/{segment → _todo}/Writeup.astro

@@ -1,20 +1,20 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag>
+  ComponentProps<typeof Component>
 
 const { as = 'div', ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['writeup']}
   {as}
   {...rest}
 >
   <slot />
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';

package/src/components/{segment → _todo}/todo.md

@@ -5,4 +5,6 @@
 - Header
 - Nav
 - Prose
-- Writeup
+- Writeup
+- Join
+- Pile

package/src/components/base/Badge.astro

@@ -1,10 +1,10 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 import Icon from './Icon.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
+  ComponentProps<typeof Component> & {
     html?: string
     text?: string
     variant?: 'primary' | 'raised' | 'muted' | 'accent' | 'outline'
@@ -14,13 +14,13 @@ type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
 const { icon, ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['badge']}
   {...rest}
 >
   <slot />
   {typeof icon === 'string' ? <Icon name={icon} /> : <Icon {...icon} />}
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
@@ -38,10 +38,10 @@ const { icon, ...rest } = Astro.props
     background-color: var(--background);
     padding-right: var(--element-2);
     padding-left: var(--element-2);
-    height: calc(var(--text-1) + 2 * var(--element-1));
+    height: calc(var(--text-label) + 2 * var(--element-1));
     color: var(--foreground);
     font-weight: var(--button-font-weight);
-    font-size: var(--text-1);
+    font-size: var(--text-label);
     line-height: 1.625;
     font-family: var(--button-font-family);
     text-align: center;

package/src/components/base/Button.astro

@@ -1,33 +1,45 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 import Icon from './Icon.astro'
 
 type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
+  ComponentProps<typeof Component> & {
     html?: string
     text?: string
-    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'link'
+    variant?: 'solid' | 'soft' | 'surface' | 'outline' | 'ghost' | 'link'
+    color?: 'base' | 'brand'
     icon?: ComponentProps<typeof Icon> | ComponentProps<typeof Icon>['name']
   }
 
-const { as = 'a', variant = 'primary', icon, ...rest } = Astro.props
+const {
+  as = 'a',
+  variant = 'solid',
+  color = variant === 'solid' ? 'brand' : 'base',
+  contrast,
+  icon,
+  ...rest
+} = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['button']}
   {as}
   {variant}
+  {color}
+  {contrast}
   {...rest}
 >
   <slot />
   {typeof icon === 'string' ? <Icon name={icon} /> : <Icon {...icon} />}
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
 
   @include component('button') {
+    @import '../../css/props/variant.scss';
+
     display: inline-flex;
     flex-shrink: 0;
     justify-content: center;
@@ -37,49 +49,46 @@ const { as = 'a', variant = 'primary', icon, ...rest } = Astro.props
     transition: background-color var(--transition);
     cursor: pointer;
     outline: none !important;
-    box-shadow: inset 0 0 0 1px var(--border);
     border: none;
     border-radius: var(--radius-1);
-    background-color: var(--background);
     padding-right: var(--element-3);
     padding-left: var(--element-3);
-    height: calc(var(--text-1) + 2 * var(--element-3));
+    height: calc(var(--text-label) + 2 * var(--element-3));
     color: var(--foreground);
     font-weight: var(--button-font-weight);
-    font-size: var(--text-1);
+    font-size: var(--text-label);
     line-height: 1.625;
     font-family: var(--button-font-family);
     text-align: center;
     text-decoration: none;
     white-space: nowrap;
 
-    &.variant-link {
-      --background: transparent;
-      --hover: transparent;
-      box-shadow: none !important;
-      border-color: transparent;
-      background-color: transparent;
-      padding: 0;
-      font-weight: 400;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-
-    &:hover {
-      background-color: var(--hover);
-    }
-
     &:focus-visible {
       outline: 2px solid var(--focus) !important;
       outline-offset: 2px;
     }
 
+    &.variant-solid {
+      color: var(--background);
+    }
+
     &:disabled {
       opacity: 0.5;
       cursor: not-allowed;
       pointer-events: none;
     }
+
+    &.variant-link {
+      box-shadow: none;
+      padding: 0;
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+      &.contrast {
+        color: var(--foreground-contrast);
+      }
+    }
   }
 </style>

package/src/components/base/Checkbox.astro

@@ -1,13 +1,12 @@
 ---
 import type { ComponentProps } from 'astro/types'
-import Tag from '../_Tag.astro'
 
-type Props = ComponentProps<typeof Tag>
+type Props = ComponentProps<typeof Component>
 
 const { as = 'input', type = 'checkbox', name, ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['checkbox']}
   if={true}
   {as}
@@ -27,7 +26,7 @@ const { as = 'input', type = 'checkbox', name, ...rest } = Astro.props
     min-width: var(--element-2);
     color: var(--color);
     accent-color: var(--10);
-    font-size: var(--text);
+    font-size: var(--text-body);
 
     &:hover {
       border: var(--border-color-hover);

package/src/components/base/Icon.astro

@@ -1,10 +1,10 @@
 ---
 import tablerIcons from '@iconify-json/tabler/icons.json'
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'i'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
+  ComponentProps<typeof Component> & {
     name?: string
   }
 
@@ -16,7 +16,7 @@ const icon = trimmedName
   : undefined
 ---
 
-<Tag
+<Component
   class:list={['icon']}
   if={icon}
   {as}
@@ -31,7 +31,7 @@ const icon = trimmedName
       />
     )
   }
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
@@ -44,7 +44,7 @@ const icon = trimmedName
     width: 1em;
     height: 1em;
     color: var(--foreground);
-    font-size: var(--text-2);
+    font-size: var(--text-body);
 
     svg {
       position: absolute;

package/src/components/base/Image.astro

@@ -1,10 +1,10 @@
 ---
 import type { ComponentProps } from 'astro/types'
 import { isString } from 'remeda'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 
-interface Props extends ComponentProps<typeof Tag> {
-  position?: 'background' | 'cover' | 'panel'
+interface Props extends ComponentProps<typeof Component> {
+  position?: 'background' | 'cover'
   frame?: 'inset'
 }
 
@@ -54,7 +54,7 @@ const {
 
 {
   src && (
-    <Tag
+    <Component
       class:list={['image']}
       if={src}
       {src}
@@ -71,53 +71,20 @@ const {
   @import '../../css/utils.scss';
 
   @include component('image') {
-      display: block;
-      border-radius: var(--radius-1);
-      width: 100%;
-      height: auto;
-      object-fit: cover;
-
-      &.position-background {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        order: 1;
-        z-index: -1;
-
-        /* TODO manier fixen zodat dit met custom classes kan */
-        border-radius: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-
-        ~ .full {
-          position: relative;
-          z-index: 1;
-        }
-      }
-
-      &.position-cover {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-
-      &.position-panel {
-        height: 100%;
-        object-fit: cover;
-      }
-
-      &.mask-sm {
-        -webkit-mask-image: linear-gradient(to top, transparent 0%, black 30%);
-        mask-image: linear-gradient(to top, transparent 0%, black 30%);
-      }
-
-      &.mask {
-        -webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);
-        mask-image: linear-gradient(to top, transparent 0%, black 100%);
-      }
-
+    display: block;
+    border-radius: var(--radius-1);
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+
+    &.mask-sm {
+      -webkit-mask-image: linear-gradient(to top, transparent 0%, black 30%);
+      mask-image: linear-gradient(to top, transparent 0%, black 30%);
+    }
+
+    &.mask {
+      -webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);
+      mask-image: linear-gradient(to top, transparent 0%, black 100%);
+    }
   }
 </style>

package/src/components/base/Input.astro

@@ -1,16 +1,16 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'input'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
+  ComponentProps<typeof Component> & {
     variant?: 'outline'
   }
 
 const { as = 'input', variant = 'outline', ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['input']}
   if={true}
   {as}
@@ -26,23 +26,28 @@ const { as = 'input', variant = 'outline', ...rest } = Astro.props
     position: relative;
     align-items: center;
     outline: none;
-    box-shadow: inset 0 0 0 var(--border-width) var(--border);
+    box-shadow: inset 0 0 0 var(--border-width) var(--border-outline);
     border: 0px;
     border-radius: var(--radius-1);
     background-color: var(--input-background);
     padding: var(--element-2);
     width: 100%;
     min-width: var(--element-2);
-    height: calc(var(--text-1) + 2 * var(--element-3));
+    height: calc(var(--text-label) + 2 * var(--element-3));
     color: var(--foreground);
     font-weight: var(--font-weight);
-    font-size: var(--text-1);
+    font-size: var(--text-label);
     line-height: 1.25;
     font-family: var(--font-family);
 
+    &:hover {
+      outline: none;
+      box-shadow: inset 0 0 0 1px var(--border-hover);
+    }
+
     &:focus {
       outline: none;
-      box-shadow: inset 0 0 0 2px var(--focus);
+      box-shadow: inset 0 0 0 3px var(--border-hover);
     }
 
     &:disabled {

package/src/components/base/Logo.astro

@@ -1,15 +1,15 @@
 ---
 import type { ComponentProps, HTMLTag } from 'astro/types'
 import Children from '../_Children.astro'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 
-type Props<As extends HTMLTag = 'a'> = ComponentProps<typeof Tag> &
+type Props<As extends HTMLTag = 'a'> = ComponentProps<typeof Component> &
   ComponentProps<typeof Children>
 
 const { as = 'a', href = '/', src, ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['logo']}
   {href}
   {as}
@@ -18,7 +18,7 @@ const { as = 'a', href = '/', src, ...rest } = Astro.props
   <slot name="before" />
   <Children {...rest} />
   <slot />
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';

package/src/components/base/Radio.astro

@@ -1,13 +1,12 @@
 ---
 import type { ComponentProps } from 'astro/types'
-import Tag from '../_Tag.astro'
 
-type Props = ComponentProps<typeof Tag>
+type Props = ComponentProps<typeof Component>
 
 const { as = 'input', type = 'radio', name, ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['radio']}
   if={true}
   {as}
@@ -25,7 +24,7 @@ const { as = 'input', type = 'radio', name, ...rest } = Astro.props
     background: var(--background);
     min-width: var(--element-2);
     accent-color: var(--10);
-    font-size: var(--text);
+    font-size: var(--text-body);
 
     &:hover {
       border: var(--border-color-hover);

package/src/components/base/Rating.astro

@@ -1,22 +1,22 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 import Icon from './Icon.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
+  ComponentProps<typeof Component> & {
     value?: number | string
   }
 
-const { variant = 'accent', value = Astro.props.html, ...rest } = Astro.props
+const { value = Astro.props.html, ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['rating']}
   {...rest}
 >
   {value && [1, 2, 3, 4, 5].map(() => <Icon name="star-filled" />)}
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';