fulldev-ui 0.2.12 → 0.3.0-beta.1

package/src/components/base/Select.astro

@@ -3,24 +3,24 @@
 // I think we should split it up into multiple components, like SelectIcon etc. gr Sil
 import type { ComponentProps, Polymorphic } from 'astro/types'
 import { isObject } from 'radash'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 import Icon from './Icon.astro'
 import SelectOption from './SelectOption.astro'
 
 type Props<As extends 'select'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
+  ComponentProps<typeof Component> & {
     options?: (ComponentProps<typeof SelectOption> | string)[]
   }
 
 const { as = 'select', options, ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   as="div"
   class:list="select-wrapper"
   {...rest}
 >
-  <Tag
+  <Component
     as="select"
     if={options}
     class:list={['select input']}
@@ -34,14 +34,14 @@ const { as = 'select', options, ...rest } = Astro.props
       })
     }
     <slot />
-  </Tag>
+  </Component>
   <div class="select-icon-wrapper">
     <Icon
       class="select-icon"
       name="chevron-down"
     />
   </div>
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';

package/src/components/base/SelectOption.astro

@@ -20,7 +20,7 @@ const { text, ...rest } = Astro.props
   .full.option {
     color: var(--foreground);
     font-weight: var(--font-weight);
-    font-size: var(--text-1);
+    font-size: var(--text-label);
     line-height: 1;
     font-family: var(--font-family);
   }

package/src/components/base/Switch.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 = 'span'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
+  ComponentProps<typeof Component> & {
     name?: string
   }
 
 const { as = 'input', name, ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   as="label"
   class:list="switch"
   if={true}
@@ -22,7 +22,7 @@ const { as = 'input', name, ...rest } = Astro.props
     class="checkbox"
   />
   <div class="checkmark"></div>
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
@@ -37,10 +37,11 @@ const { as = 'input', name, ...rest } = Astro.props
     border-radius: 999px;
     background-color: var(--background);
     padding: var(--space-1);
+    width: fit-content;
     min-width: calc(
-      (var(--text-1) + 2 * var(--element-1) * 2) + 2 * var(--space-1)
+      (var(--text-label) + 2 * var(--element-1) * 2) + 2 * var(--space-1)
     );
-    height: calc(var(--text-1) + 2 * var(--element-1));
+    height: calc(var(--text-label) + 2 * var(--element-1));
 
     .checkbox {
       position: absolute;
@@ -60,7 +61,7 @@ const { as = 'input', name, ...rest } = Astro.props
 
     .checkbox:checked ~ .checkmark {
       transform: translateX(100%);
-      background-color: var(--primary-background);
+      background-color: var(--solid);
     }
 
     &:hover {

package/src/components/base/Textarea.astro

@@ -1,9 +1,9 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'textarea'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag>
+  ComponentProps<typeof Component>
 
 const {
   as = 'textarea',
@@ -14,7 +14,7 @@ const {
 } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['textarea input']}
   if={true}
   {rows}
@@ -28,6 +28,7 @@ const {
 
   @include component('textarea') {
     height: calc((var(--text-1) + 2 * var(--element-3)) * 2);
+    min-height: calc((var(--text-1) + 2 * var(--element-3)) * 1);
     resize: vertical;
   }
 </style>

package/src/components/segment/Box.astro

@@ -0,0 +1,41 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Component from '../_Component.astro'
+
+type Props<As extends HTMLTag = 'section'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Component> & {
+    scheme?: 'light' | 'dark'
+    color?: 'base' | 'brand'
+    size?: 'sm' | 'md' | 'lg'
+    compact?: boolean
+    frame?: 'container' | 'wrapper' | 'panel' | 'viewport' | 'none'
+    variant?: 'fill' | 'subtle' | 'outline' | 'soft' | 'solid' | 'surface'
+    align?: 'start' | 'center' | 'end' | 'stretch'
+    structure?:
+      | 'row'
+      | 'column'
+      | 'split'
+      | 'spread'
+      | 'grid'
+      | 'bento'
+      | 'masonry'
+      | 'carousel'
+  }
+
+const { ...rest } = Astro.props
+---
+
+<Component
+  class:list={['box']}
+  {...rest}
+>
+  <slot />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('box') {
+    position: relative;
+  }
+</style>

package/src/components/segment/Card.astro

@@ -1,37 +1,46 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
-    structure?: 'stack' | 'group' | 'split' | 'spread' | 'row'
+  ComponentProps<typeof Component> & {
+    structure?: 'column' | 'group' | 'split' | 'spread' | 'row'
     align?: 'start' | 'center' | 'end' | 'stretch'
-    variant?: 'base' | 'raised' | 'primary'
-    frame?: 'fill' | 'panel'
+    frame?: 'fill' | 'panel' | 'none'
     ratio?: 'landscape' | 'portrait' | 'square' | number
+    variant?:
+      | 'ghost'
+      | 'subtle'
+      | 'surface'
+      | 'outline'
+      | 'soft'
+      | 'surface'
+      | 'solid'
   }
 
 const {
-  as = Astro.props.href ? 'a' : 'div',
-  structure = 'stack',
-  density = 'compact',
+  href,
+  as = href ? 'a' : 'div',
+  structure = 'column',
+  compact = true,
   frame = 'panel',
-  variant = 'raised',
+  variant = frame === 'panel' ? 'subtle' : undefined,
   ...rest
 } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['card']}
+  {compact}
+  {href}
   {structure}
-  {density}
   {frame}
   {variant}
   {as}
   {...rest}
 >
   <slot />
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
@@ -55,15 +64,6 @@ const {
       }
     }
 
-    &.frame-panel {
-      border: 1px solid var(--border);
-      border-radius: var(--radius-2);
-      background-color: var(--background);
-      padding: var(--space-5);
-      overflow: hidden;
-      color: var(--foreground);
-    }
-
     &.ratio-landscape {
       aspect-ratio: 4/3;
     }
@@ -75,19 +75,5 @@ const {
     &.ratio-portrait {
       aspect-ratio: 3/4;
     }
-
-    & > .frame-inset {
-      margin-right: calc(var(--space-5) * -1);
-      margin-left: calc(var(--space-5) * -1);
-      width: calc(100% + var(--space-5) * 2);
-
-      &:first-child {
-        margin-top: calc(var(--space-5) * -1);
-      }
-
-      &:last-child {
-        margin-bottom: calc(var(--space-5) * -1);
-      }
-    }
   }
 </style>

package/src/components/segment/Deck.astro

@@ -1,23 +1,27 @@
 ---
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Component from '../_Component.astro'
 
-type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
-    structure?: 'grid' | 'carousel' | 'masonry' | 'bento'
-    frame?: 'none' | 'fill' | 'inset'
-  }
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
+  scheme?: 'light' | 'dark'
+  color?: 'base' | 'brand'
+  compact?: boolean
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  structure?: 'grid' | 'carousel' | 'masonry' | 'bento' | 'row' | 'split'
+  frame?: 'wrapper' | 'container'
+}
 
-const { structure = 'grid', ...rest } = Astro.props
+const { as = 'div', structure = 'grid', ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['deck']}
+  {as}
   {structure}
   {...rest}
 >
   <slot />
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
@@ -26,11 +30,11 @@ const { structure = 'grid', ...rest } = Astro.props
     position: relative;
     width: 100%;
 
-    &.frame-fill {
-      margin-right: calc(var(--space-gutter) * -1);
-      margin-left: calc(var(--space-gutter) * -1);
-      padding: 0 var(--space-gutter) var(--space-3);
-      width: calc(100% + var(--space-gutter) * 2);
-    }
+    // &.frame-fill {
+    //   margin-right: calc(var(--space-gutter) * -1);
+    //   margin-left: calc(var(--space-gutter) * -1);
+    //   padding: 0 var(--space-gutter) var(--space-3);
+    //   width: calc(100% + var(--space-gutter) * 2);
+    // }
   }
 </style>

package/src/components/{structure → segment}/Group.astro

@@ -1,28 +1,29 @@
 ---
 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> & {
+    color?: 'base' | 'brand'
+    size?: 'sm' | 'md' | 'lg'
+    structure?: 'row' | 'column' | 'wrap'
+  }
 
 const { ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['group']}
   {...rest}
 >
   <slot />
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
 
   @include component('group') {
-    display: flex;
-    flex-wrap: wrap;
     justify-content: stretch;
     align-items: center;
-    gap: var(--space-2);
   }
 </style>

package/src/components/segment/Header.astro

@@ -1,13 +1,13 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'header'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
-    structure?: 'spread' | 'group' | 'stack'
+  ComponentProps<typeof Component> & {
+    structure?: 'spread' | 'group' | 'column'
     position?: 'relative' | 'sticky' | 'fixed' | 'absolute'
     variant?: 'base' | 'raised'
-    frame?: 'fill' | 'panel'
+    frame?: 'wrapper' | 'container' | 'panel'
     align?: 'start' | 'center' | 'end'
   }
 
@@ -15,23 +15,29 @@ const {
   as = 'header',
   structure = 'spread',
   density = 'compact',
+  frame = 'wrapper',
+  compact = true,
   ...rest
 } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['header']}
   {as}
   {density}
+  {frame}
+  {compact}
   {...rest}
 >
   <slot />
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
 
   @include component('header') {
+    --inner: var(--element-3);
+
     display: flex;
     top: 0;
     right: 0;
@@ -40,9 +46,14 @@ const {
     align-items: center;
     z-index: 10;
     background: var(--background);
-    padding: var(--space-3) var(--space-gutter);
+    padding-top: var(--element-3);
+    padding-bottom: var(--element-3);
     width: 100%;
 
+    // &.panel {
+    //   margin-top: var(--inner);
+    // }
+
     &.position-fixed {
       position: fixed;
     }

package/src/components/segment/Section.astro

@@ -1,66 +1,68 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'section'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
-    structure?: 'stack' | 'split' | 'spread' | 'group'
-    variant?: 'base' | 'raised' | 'primary'
-    frame?: 'fill' | 'viewport' | 'panel'
-    align?: 'start' | 'center' | 'end'
+  ComponentProps<typeof Component> & {
+    scheme?: 'light' | 'dark'
+    color?: 'base' | 'brand'
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'
+    compact?: boolean
+    frame?: 'container' | 'wrapper' | 'panel' | 'viewport' | 'none'
+    variant?: 'fill' | 'subtle' | 'outline' | 'soft' | 'solid' | 'surface'
+    align?: 'start' | 'center' | 'end' | 'stretch'
+    structure?:
+      | 'row'
+      | 'column'
+      | 'split'
+      | 'spread'
+      | 'grid'
+      | 'bento'
+      | 'masonry'
+      | 'carousel'
   }
 
 const {
-  as = 'section',
-  structure = 'stack',
-  align = 'start',
+  frame = 'wrapper',
+  structure = 'column',
+  variant = frame === 'panel' ? 'subtle' : 'fill',
+  as = 'div',
   ...rest
 } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['section']}
-  {structure}
-  {align}
   {as}
+  {frame}
+  {variant}
+  {structure}
   {...rest}
 >
   <slot />
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
 
-  :root,
-  .full {
-    --media: 1536px;
-    --space-spacer: calc(var(--space-5) + 4vw);
-    --space-gutter: max(4vw, calc((100vw - var(--media)) / 2));
-  }
-
   @include component('section') {
+    --inner-y: var(--space-6);
+
     position: relative;
-    gap: var(--space-6) var(--space-5);
-    background: var(--background);
-    padding: var(--space-spacer) var(--space-gutter);
-    width: 100%;
-    overflow-x: hidden;
+    padding-top: var(--inner-y);
+    padding-bottom: var(--inner-y);
 
-    &.frame-panel {
-      margin: var(--space-5) var(--space-gutter);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-3);
+    &.frame-wrapper {
       background-color: var(--background);
-      padding-top: var(--space-5);
-      padding-right: min(var(--space-5), var(--space-gutter));
-      padding-bottom: var(--space-5);
-      padding-left: min(var(--space-5), var(--space-gutter));
-      overflow: hidden;
     }
 
-    &.frame-viewport {
-      height: auto;
-      min-height: 100vh;
+    &.frame-panel {
+      margin-top: var(--inner-y);
+      margin-bottom: var(--inner-y);
+    }
+
+    &:not(.frame-panel) {
+      box-shadow: none !important;
     }
   }
 </style>

package/src/components/typography/Heading.astro

@@ -1,32 +1,39 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'h2'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
+  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'
-    level?: 1 | 2 | 3 | 4 | 5 | 6
   }
 
-const {
-  level = 2,
-  as = `h${level}`,
-  density = level > 3 ? 'compact' : undefined,
-  ...rest
-} = Astro.props
+const { as = 'h2', contrast = true, ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['heading']}
-  {level}
   {as}
-  {density}
+  {contrast}
   {...rest}
 >
   <slot />
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
@@ -34,26 +41,17 @@ const {
   @include component('heading') {
     margin: 0;
     max-width: calc(var(--element-3) * 36);
+    scroll-margin: var(--space-4);
     color: var(--foreground);
     font-weight: var(--heading-font-weight);
+    font-size: var(--text-heading);
     line-height: 1.1;
     font-family: var(--heading-font-family);
     letter-spacing: -0.025em;
     text-decoration: none;
 
-    &.level-1,
-    &.level-4 {
-      font-size: var(--text-5);
-    }
-
-    &.level-2,
-    &.level-5 {
-      font-size: var(--text-4);
-    }
-
-    &.level-3,
-    &.level-6 {
-      font-size: var(--text-3);
+    &.contrast {
+      color: var(--foreground-contrast);
     }
   }
 </style>

package/src/components/typography/Label.astro

@@ -1,24 +1,26 @@
 ---
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Component from '../_Component.astro'
 
-type Props<As extends HTMLTag = 'label'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
-    html?: string
-    text?: string
-    variant?: 'base' | 'muted' | 'accent'
-  }
+type Props<As extends HTMLTag = 'label'> = Polymorphic<{ as: As }> & {
+  scheme?: 'light' | 'dark'
+  color?: 'base' | 'brand'
+  size?: 'sm' | 'md' | 'lg'
+  contrast?: boolean
+  html?: string
+  text?: string
+}
 
 const { as = 'label', ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['label']}
   {as}
   {...rest}
 >
   <slot />
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
@@ -28,8 +30,12 @@ const { as = 'label', ...rest } = Astro.props
     flex-direction: column;
     color: var(--foreground);
     font-weight: var(--font-weight);
-    font-size: var(--text-1);
+    font-size: var(--text-label);
     font-family: var(--font-family);
     text-align: left;
+
+    &.contrast {
+      color: var(--foreground-contrast);
+    }
   }
 </style>