fulldev-ui 0.1.65 → 0.2.11

package/src/components/typography/Label.astro

@@ -1,36 +1,35 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Typography from './_Typography.astro'
+import Tag from '../_Tag.astro'
 
 type Props<As extends HTMLTag = 'label'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Typography> & {
-    variant?: 'base' | 'muted'
-    text?: string
+  ComponentProps<typeof Tag> & {
     html?: string
+    text?: string
+    variant?: 'base' | 'muted' | 'accent'
   }
 
-const { as = 'label', text, html, ...rest } = Astro.props
+const { as = 'label', ...rest } = Astro.props
 ---
 
-<Typography
-  class:list={['full-label']}
+<Tag
+  class:list={['label']}
   {as}
   {...rest}
 >
-  <slot name="before" />
-  <Fragment set:html={html} />
-  {text}
   <slot />
-</Typography>
+</Tag>
 
 <style is:global lang="scss">
-  .full-label {
+  @import '../../css/utils.scss';
+
+  @include component('label') {
     display: flex;
     flex-direction: column;
     color: var(--foreground);
-    font-weight: var(--full-font-weight);
-    font-size: var(--text-element);
-    font-family: var(--full-font-family);
+    font-weight: var(--font-weight);
+    font-size: var(--text-1);
+    font-family: var(--font-family);
     text-align: left;
   }
 </style>

package/src/components/typography/Link.astro

@@ -1,32 +1,37 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Typography from './_Typography.astro'
+import Tag from '../_Tag.astro'
 
 type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Typography>
+  ComponentProps<typeof Tag> & {
+    html?: string
+    text?: string
+    variant?: 'base' | 'muted' | 'accent'
+  }
 
 const { as = 'a', ...rest } = Astro.props
 ---
 
-<Typography
-  class:list={['full-link']}
+<Tag
+  class:list={['link']}
   {as}
   {...rest}
 >
-  <slot name="before" />
   <slot />
-</Typography>
+</Tag>
 
 <style is:global lang="scss">
-  .full-link {
+  @import '../../css/utils.scss';
+
+  @include component('link') {
     display: inline-flex;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--space-2);
     color: var(--foreground);
-    font-weight: var(--full-font-weight);
-    font-size: var(--text);
-    font-family: var(--full-font-family);
+    font-weight: var(--font-weight);
+    font-size: var(--text-2);
+    font-family: var(--font-family);
     text-decoration: none;
     text-decoration-color: var(--border);
     white-space: nowrap;

package/src/components/typography/List.astro

@@ -1,42 +1,45 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import { isObject } from 'radash'
+import Tag from '../_Tag.astro'
 import ListItem from './ListItem.astro'
-import Typography from './_Typography.astro'
 
 type Props<As extends HTMLTag = 'ul'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Typography> & {
+  ComponentProps<typeof Tag> & {
+    html?: string
+    text?: string
+    variant?: 'base' | 'muted' | 'accent'
     items?: (ComponentProps<typeof ListItem> | string)[]
   }
 
 const { as = 'ul', items, ...rest } = Astro.props
 ---
 
-<Typography
-  class:list={['full-list']}
+<Tag
+  class:list={['list']}
   {as}
   {...rest}
 >
-  <slot name="before" />
   {
     items?.map((item) => {
-      if (isObject(item)) return <ListItem {...item} />
-      else return <ListItem html={item} />
+      if (typeof item === 'string') return <ListItem html={item} />
+      else return <ListItem {...item} />
     })
   }
   <slot />
-</Typography>
+</Tag>
 
 <style is:global lang="scss">
-  .full-list {
+  @import '../../css/utils.scss';
+
+  @include component('list') {
     display: flex;
     flex-direction: column;
     padding-left: var(--space-4);
     color: var(--foreground);
-    font-weight: var(--full-font-weight);
-    font-size: var(--text);
+    font-weight: var(--font-weight);
+    font-size: var(--text-2);
     line-height: 1.625;
-    font-family: var(--full-font-family);
+    font-family: var(--font-family);
     list-style-type: disc;
   }
 </style>

package/src/components/typography/ListItem.astro

@@ -1,30 +1,35 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Typography from './_Typography.astro'
+import Tag from '../_Tag.astro'
 
 type Props<As extends HTMLTag = 'li'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Typography>
+  ComponentProps<typeof Tag> & {
+    html?: string
+    text?: string
+    variant?: 'base' | 'muted' | 'accent'
+  }
 
 const { as = 'li', ...rest } = Astro.props
 ---
 
-<Typography
-  class:list={['full-list-item']}
+<Tag
+  class:list={['list-item']}
   {as}
   {...rest}
 >
-  <slot name="before" />
   <slot />
-</Typography>
+</Tag>
 
 <style is:global lang="scss">
-  .full-item {
+  @import '../../css/utils.scss';
+
+  @include component('list-item') {
     align-items: center;
-    max-width: calc(var(--space-element-3) * 36);
+    max-width: calc(var(--element-3) * 36);
     color: var(--foreground);
-    font-weight: var(--full-font-weight);
-    font-size: var(--text);
+    font-weight: var(--font-weight);
+    font-size: var(--text-2);
     line-height: 1.625;
-    font-family: var(--full-font-family);
+    font-family: var(--font-family);
   }
 </style>

package/src/components/typography/Paragraph.astro

@@ -1,38 +1,35 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Typography from './_Typography.astro'
+import Tag from '../_Tag.astro'
 
 type Props<As extends HTMLTag = 'p'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Typography>
+  ComponentProps<typeof Tag> & {
+    html?: string
+    text?: string
+    variant?: 'base' | 'muted' | 'accent'
+  }
 
 const { as = 'p', ...rest } = Astro.props
 ---
 
-<Typography
-  class:list={['full-paragraph']}
+<Tag
+  class:list={['paragraph']}
   {as}
   {...rest}
 >
-  <slot name="before" />
   <slot />
-</Typography>
+</Tag>
 
 <style is:global lang="scss">
-  .full-paragraph {
-    max-width: calc(var(--space-element-3) * 36);
+  @import '../../css/utils.scss';
+
+  @include component('paragraph') {
+    margin: 0;
+    max-width: calc(var(--element-3) * 36);
     color: var(--foreground);
-    font-weight: var(--full-font-weight);
-    font-size: var(--text);
+    font-weight: var(--font-weight);
+    font-size: var(--text-2);
     line-height: 1.625;
-    font-family: var(--full-font-family);
-
-    .full-tag + & {
-      --my-spacer: var(--space-5);
-    }
-
-    .full-heading + &,
-    .full-paragraph + & {
-      --my-spacer: var(--space-3);
-    }
+    font-family: var(--font-family);
   }
 </style>

package/src/components/typography/Tagline.astro

@@ -1,39 +1,34 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Typography from './_Typography.astro'
+import Tag from '../_Tag.astro'
 
 type Props<As extends HTMLTag = 'span'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Typography>
+  ComponentProps<typeof Tag> & {
+    html?: string
+    text?: string
+    variant?: 'base' | 'muted' | 'accent'
+  }
 
-const { as = 'span', variant, ...rest } = Astro.props
+const { as = 'span', ...rest } = Astro.props
 ---
 
-<Typography
-  class:list={['full-tagline']}
+<Tag
+  class:list={['tagline']}
   {as}
-  {variant}
   {...rest}
 >
-  <slot name="before" />
   <slot />
-</Typography>
+</Tag>
 
 <style is:global lang="scss">
-  .full-tagline {
-    max-width: calc(var(--space-element-3) * 36);
+  @import '../../css/utils.scss';
+
+  @include component('tagline') {
+    max-width: calc(var(--element-3) * 36);
     color: var(--foreground);
-    font-weight: var(--full-font-weight);
-    font-size: var(--text-element);
+    font-weight: var(--font-weight);
+    font-size: var(--text-1);
     line-height: 1.25;
-    font-family: var(--full-font-family);
-
-    .full-tag + & {
-      --my-spacer: var(--space-5);
-    }
-
-    .full-heading + &,
-    .full-paragraph + & {
-      --my-spacer: var(--space-3);
-    }
+    font-family: var(--font-family);
   }
 </style>

package/src/components/typography/todo.md

@@ -1,15 +1,3 @@
-# Chores
-
-
 # New components
-- Highlight (for highlighint stuff in headings for example, with a primary background etc. Should accept same colors as badge)
-- Field (for form fields with label etc. Should adapt based on the element, like horizontal for checkboxes)
+- Highlight (for highlighint stuff in headings for example, with a primary background etc. Should accept same variants as badge)
 
-## Low priority
-- Toast
-- Modal
-- Drawer
-- Alert
-- Tooltip
-- Legal
-- Banner