fulldev-ui 0.3.0-beta.3 → 0.3.2

package/src/css/size.scss

@@ -0,0 +1,293 @@
+:root {
+  --space-sm-1: 3px;
+  --space-sm-2: 6px;
+  --space-sm-3: 9px;
+  --space-sm-4: 12px;
+  --space-sm-5: 24px;
+  --space-sm-6: 48px;
+  --space-sm-7: 72px;
+
+  --space-md-1: 4px;
+  --space-md-2: 8px;
+  --space-md-3: 12px;
+  --space-md-4: 16px;
+  --space-md-5: 32px;
+  --space-md-6: 64px;
+  --space-md-7: 96px;
+
+  --space-lg-1: 5px;
+  --space-lg-2: 10px;
+  --space-lg-3: 15px;
+  --space-lg-4: 20px;
+  --space-lg-5: 40px;
+  --space-lg-6: 80px;
+  --space-lg-7: 120px;
+
+  --text-xs-1: 12px;
+  --text-xs-2: 12px;
+  --text-xs-3: 12px;
+  --text-xs-4: 14px;
+  --text-xs-5: 16px;
+  --text-xs-6: 18px;
+  --text-xs-7: 20px;
+
+  --text-sm-1: 12px;
+  --text-sm-2: 14px;
+  --text-sm-3: 14px;
+  --text-sm-4: 16px;
+  --text-sm-5: 18px;
+  --text-sm-6: 20px;
+  --text-sm-7: 24px;
+
+  --text-md-1: 14px;
+  --text-md-2: 16px;
+  --text-md-3: 16px;
+  --text-md-4: 18px;
+  --text-md-5: 20px;
+  --text-md-6: 24px;
+  --text-md-7: 30px;
+
+  --text-lg-1: 16px;
+  --text-lg-2: 18px;
+  --text-lg-3: 18px;
+  --text-lg-4: 20px;
+  --text-lg-5: 24px;
+  --text-lg-6: 30px;
+  --text-lg-7: 36px;
+
+  --text-xl-1: 16px;
+  --text-xl-2: 18px;
+  --text-xl-3: 20px;
+  --text-xl-4: 24px;
+  --text-xl-5: 30px;
+  --text-xl-6: 36px;
+  --text-xl-7: 48px;
+
+  @media (min-width: 768px) {
+    --text-xs-3: 14px;
+    --text-xs-4: 16px;
+    --text-xs-5: 18px;
+    --text-xs-6: 20px;
+    --text-xs-7: 24px;
+
+    --text-sm-3: 16px;
+    --text-sm-4: 18px;
+    --text-sm-5: 20px;
+    --text-sm-6: 24px;
+    --text-sm-7: 30px;
+
+    --text-md-3: 18px;
+    --text-md-4: 20px;
+    --text-md-5: 24px;
+    --text-md-6: 30px;
+    --text-md-7: 36px;
+
+    --text-lg-3: 20px;
+    --text-lg-4: 24px;
+    --text-lg-5: 30px;
+    --text-lg-6: 36px;
+    --text-lg-7: 48px;
+
+    --text-xl-2: 20px;
+    --text-xl-3: 24px;
+    --text-xl-4: 30px;
+    --text-xl-5: 36px;
+    --text-xl-6: 48px;
+    --text-xl-7: 60px;
+  }
+}
+
+.compact {
+  --space-sm-1: 3px;
+  --space-sm-2: 6px;
+  --space-sm-3: 7.5px;
+  --space-sm-4: 9px;
+  --space-sm-5: 12px;
+  --space-sm-6: 15px;
+  --space-sm-7: 18px;
+
+  --space-md-1: 4px;
+  --space-md-2: 8px;
+  --space-md-3: 10px;
+  --space-md-4: 12px;
+  --space-md-5: 16px;
+  --space-md-6: 20px;
+  --space-md-7: 24px;
+
+  --space-lg-1: 5px;
+  --space-lg-2: 10px;
+  --space-lg-3: 12.5px;
+  --space-lg-4: 15px;
+  --space-lg-5: 20px;
+  --space-lg-6: 25px;
+  --space-lg-7: 30px;
+
+  --text-xs-1: 12px;
+  --text-xs-2: 12px;
+  --text-xs-3: 12px;
+  --text-xs-4: 14px;
+  --text-xs-5: 16px;
+  --text-xs-6: 18px;
+  --text-xs-7: 20px;
+
+  --text-sm-1: 12px;
+  --text-sm-2: 14px;
+  --text-sm-3: 14px;
+  --text-sm-4: 16px;
+  --text-sm-5: 18px;
+  --text-sm-6: 20px;
+  --text-sm-7: 24px;
+
+  --text-md-1: 14px;
+  --text-md-2: 16px;
+  --text-md-3: 16px;
+  --text-md-4: 18px;
+  --text-md-5: 20px;
+  --text-md-6: 24px;
+  --text-md-7: 30px;
+
+  --text-lg-1: 16px;
+  --text-lg-2: 18px;
+  --text-lg-3: 18px;
+  --text-lg-4: 20px;
+  --text-lg-5: 24px;
+  --text-lg-6: 30px;
+  --text-lg-7: 30px;
+
+  --text-xl-1: 16px;
+  --text-xl-2: 18px;
+  --text-xl-3: 20px;
+  --text-xl-4: 24px;
+  --text-xl-5: 30px;
+  --text-xl-6: 30px;
+  --text-xl-7: 30px;
+}
+
+/* --------------------------- */
+/* Generate sizes */
+/* --------------------------- */
+
+@mixin selector($selector,
+  $selectors: $selector) {
+  #{$selectors},
+  #{$selector},
+  #{$selector}
+    .compact:not(#{$selector} [class*='size-'] .compact):not(
+      #{$selector} [class*='size-'].compact
+    ) {
+    @content;
+  }
+}
+
+@include selector('.size-xs') {
+  --space-1: var(--space-sm-1);
+  --space-2: var(--space-sm-2);
+  --space-3: var(--space-sm-3);
+  --space-4: var(--space-sm-4);
+  --space-5: var(--space-sm-5);
+  --space-6: var(--space-sm-6);
+  --space-7: var(--space-sm-7);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--space-sm-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--space-sm-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--space-sm-3));
+
+  --text-1: var(--text-xs-1);
+  --text-2: var(--text-xs-2);
+  --text-3: var(--text-xs-3);
+  --text-4: var(--text-xs-4);
+  --text-5: var(--text-xs-5);
+  --text-6: var(--text-xs-6);
+  --text-7: var(--text-xs-7);
+}
+
+@include selector('.size-sm') {
+  --space-1: var(--space-sm-1);
+  --space-2: var(--space-sm-2);
+  --space-3: var(--space-sm-3);
+  --space-4: var(--space-sm-4);
+  --space-5: var(--space-sm-5);
+  --space-6: var(--space-sm-6);
+  --space-7: var(--space-sm-7);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--space-sm-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--space-sm-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--space-sm-3));
+
+  --text-1: var(--text-sm-1);
+  --text-2: var(--text-sm-2);
+  --text-3: var(--text-sm-3);
+  --text-4: var(--text-sm-4);
+  --text-5: var(--text-sm-5);
+  --text-6: var(--text-sm-6);
+  --text-7: var(--text-sm-7);
+}
+
+@include selector(
+  '.size-md',
+  ':where(:root), :where(.compact)'
+) {
+  --space-1: var(--space-md-1);
+  --space-2: var(--space-md-2);
+  --space-3: var(--space-md-3);
+  --space-4: var(--space-md-4);
+  --space-5: var(--space-md-5);
+  --space-6: var(--space-md-6);
+  --space-7: var(--space-md-7);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--space-md-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--space-md-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--space-md-3));
+
+  --text-1: var(--text-md-1);
+  --text-2: var(--text-md-2);
+  --text-3: var(--text-md-3);
+  --text-4: var(--text-md-4);
+  --text-5: var(--text-md-5);
+  --text-6: var(--text-md-6);
+  --text-7: var(--text-md-7);
+}
+
+@include selector('.size-lg') {
+  --space-1: var(--space-lg-1);
+  --space-2: var(--space-lg-2);
+  --space-3: var(--space-lg-3);
+  --space-4: var(--space-lg-4);
+  --space-5: var(--space-lg-5);
+  --space-6: var(--space-lg-6);
+  --space-7: var(--space-lg-7);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--space-lg-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--space-lg-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--space-lg-3));
+
+  --text-1: var(--text-lg-1);
+  --text-2: var(--text-lg-2);
+  --text-3: var(--text-lg-3);
+  --text-4: var(--text-lg-4);
+  --text-5: var(--text-lg-5);
+  --text-6: var(--text-lg-6);
+  --text-7: var(--text-lg-7);
+}
+
+@include selector('.size-xl') {
+  --space-1: var(--space-lg-1);
+  --space-2: var(--space-lg-2);
+  --space-3: var(--space-lg-3);
+  --space-4: var(--space-lg-4);
+  --space-5: var(--space-lg-5);
+  --space-6: var(--space-lg-6);
+  --space-7: var(--space-lg-7);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--space-lg-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--space-lg-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--space-lg-3));
+
+  --text-1: var(--text-xl-1);
+  --text-2: var(--text-xl-2);
+  --text-3: var(--text-xl-3);
+  --text-4: var(--text-xl-4);
+  --text-5: var(--text-xl-5);
+  --text-6: var(--text-xl-6);
+  --text-7: var(--text-xl-7);
+}

package/src/css/space.scss

@@ -0,0 +1,94 @@
+@mixin space-x {
+  > {
+    .full + .full {
+      margin-left: var(--space-6);
+    }
+
+    .full + .group,
+    .full + .row,
+    .full + .wrap,
+    .full + .button,
+    .full + .switch {
+      margin-left: var(--space-5);
+    }
+
+    .full + .heading,
+    .full + .link,
+    .full + .list,
+    .full + .paragraph,
+    .full + .text,
+    .full + .tagline,
+    .full + .input,
+    .full + .badge,
+    .full + .rating {
+      margin-left: var(--space-4);
+    }
+
+    .paragraph + .paragraph,
+    .text + .text,
+    .button + .button,
+    .input + .button {
+      margin-left: var(--space-3);
+    }
+
+    .full + .label,
+    .label + .full {
+      margin-left: var(--space-2);
+    }
+
+    .image + .full,
+    .icon + .full {
+      margin-left: var(--space-6);
+    }
+  }
+}
+
+@mixin space-y {
+  > {
+    .full + .full {
+      margin-top: var(--space-6);
+    }
+
+    .full + .group,
+    .full + .row,
+    .full + .wrap,
+    .full + .button,
+    .full + .switch {
+      margin-top: var(--space-5);
+    }
+
+    .full + .heading,
+    .full + .label,
+    .full + .link,
+    .full + .list,
+    .full + .paragraph,
+    .full + .text,
+    .full + .tagline,
+    .full + .input,
+    .full + .textarea,
+    .full + .select,
+    .full + .badge,
+    .full + .rating {
+      margin-top: var(--space-4);
+    }
+
+    .paragraph + .paragraph,
+    .text + .text,
+    .button:not(.variant-link) + .button:not(.variant-link),
+    .input + .button {
+      margin-top: var(--space-3);
+    }
+
+    .label + .input,
+    .variant-link + .variant-link,
+    .label + .textarea,
+    .label + .select {
+      margin-top: var(--space-2);
+    }
+
+    .image + .full,
+    .icon + .full {
+      margin-top: var(--space-6);
+    }
+  }
+}

package/src/css/styles.css

@@ -1,9 +1,8 @@
 :root,
 .full {
   --transition: cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
-  --border-width: 1px;
 
-  --font-family: 'IBM Plex Sans', sans-serif;
+  --font-family: 'Raleway', sans-serif;
   --font-weight: 400;
 
   --text-heading-font-family: var(--font-family);

package/src/index.ts

@@ -4,18 +4,28 @@ export * from './schemas/collection'
 // Base components
 export { default as Badge } from './components/base/Badge.astro'
 export { default as Button } from './components/base/Button.astro'
-export { default as Checkbox } from './components/base/Checkbox.astro'
 export { default as Icon } from './components/base/Icon.astro'
 export { default as Image } from './components/base/Image.astro'
-export { default as Input } from './components/base/Input.astro'
 export { default as Logo } from './components/base/Logo.astro'
-export { default as Radio } from './components/base/Radio.astro'
 export { default as Rating } from './components/base/Rating.astro'
-export { default as Select } from './components/base/Select.astro'
-export { default as SelectOption } from './components/base/SelectOption.astro'
-export { default as Switch } from './components/base/Switch.astro'
-export { default as Textarea } from './components/base/Textarea.astro'
 export { default as Video } from './components/base/Video.astro'
+export { default as Checkbox } from './components/base/checkbox/Checkbox.astro'
+export { default as Input } from './components/base/input/Input.astro'
+export { default as InputElement } from './components/base/input/InputElement.astro'
+export { default as Radio } from './components/base/radio/Radio.astro'
+export { default as Select } from './components/base/select/Select.astro'
+export { default as SelectElement } from './components/base/select/SelectElement.astro'
+export { default as SelectOption } from './components/base/select/SelectOption.astro'
+export { default as Switch } from './components/base/switch/Switch.astro'
+export { default as Table } from './components/base/table/Table.astro'
+export { default as TableBody } from './components/base/table/TableBody.astro'
+export { default as TableCell } from './components/base/table/TableCell.astro'
+export { default as TableFooter } from './components/base/table/TableFooter.astro'
+export { default as TableHead } from './components/base/table/TableHead.astro'
+export { default as TableHeader } from './components/base/table/TableHeader.astro'
+export { default as TableRow } from './components/base/table/TableRow.astro'
+export { default as Textarea } from './components/base/textarea/Textarea.astro'
+export { default as TextareaElement } from './components/base/textarea/TextareaElement.astro'
 
 // Typography components
 export { default as Heading } from './components/typography/Heading.astro'
@@ -31,17 +41,25 @@ export { default as Text } from './components/typography/Text.astro'
 export { default as Body } from './components/_archive/Body.astro'
 export { default as Main } from './components/_archive/Main.astro'
 export { default as Nav } from './components/_archive/Nav.astro'
-export { default as Footer } from './components/_todo/Footer.astro'
 export { default as Form } from './components/_todo/Form.astro'
 export { default as Prose } from './components/_todo/Prose.astro'
 export { default as Writeup } from './components/_todo/Writeup.astro'
-export { default as Box } from './components/segment/Box.astro'
 export { default as Card } from './components/segment/Card.astro'
-export { default as Deck } from './components/segment/Deck.astro'
-export { default as Group } from './components/segment/Group.astro'
+export { default as Footer } from './components/segment/Footer.astro'
 export { default as Header } from './components/segment/Header.astro'
 export { default as Section } from './components/segment/Section.astro'
 
+// Structure components
+export { default as Bento } from './components/structure/Bento.astro'
+export { default as Carousel } from './components/structure/Carousel.astro'
+export { default as Column } from './components/structure/Column.astro'
+export { default as Grid } from './components/structure/Grid.astro'
+export { default as Masonry } from './components/structure/Masonry.astro'
+export { default as Row } from './components/structure/Row.astro'
+export { default as Split } from './components/structure/Split.astro'
+export { default as Spread } from './components/structure/Spread.astro'
+export { default as Wrap } from './components/structure/Wrap.astro'
+
 // Utility components
 export { default as Block } from './components/_Block.astro'
 export { default as Blocks } from './components/_Blocks.astro'

package/src/integration/tailwind.ts

@@ -0,0 +1,34 @@
+import plugin from 'tailwindcss/plugin'
+
+export default plugin(() => {}, {
+  theme: {
+    spacing: {
+      'space-1': 'var(--space-1)',
+      'space-2': 'var(--space-2)',
+      'space-3': 'var(--space-3)',
+      'space-4': 'var(--space-4)',
+      'space-5': 'var(--space-5)',
+      'space-6': 'var(--space-6)',
+      'space-7': 'var(--space-7)',
+    },
+    borderRadius: {
+      1: 'var(--radius-1)',
+      2: 'var(--radius-2)',
+      3: 'var(--radius-3)',
+    },
+    fontSize: {
+      1: 'var(--text-1)',
+      2: 'var(--text-2)',
+      3: 'var(--text-3)',
+      4: 'var(--text-4)',
+      5: 'var(--text-5)',
+      6: 'var(--text-6)',
+      7: 'var(--text-7)',
+    },
+    colors: {
+      background: 'var(--background)',
+      text: 'var(--text)',
+      border: 'var(--border)',
+    },
+  },
+})

package/src/integration/unocss.ts

@@ -0,0 +1,38 @@
+import { definePreset, presetUno } from 'unocss'
+
+export default definePreset((options?: any) => {
+  return {
+    name: 'fullUI',
+    presets: [presetUno()],
+    theme: {
+      spacing: {
+        'space-1': 'var(--space-1)',
+        'space-2': 'var(--space-2)',
+        'space-3': 'var(--space-3)',
+        'space-4': 'var(--space-4)',
+        'space-5': 'var(--space-5)',
+        'space-6': 'var(--space-6)',
+        'space-7': 'var(--space-7)',
+      },
+      borderRadius: {
+        1: 'var(--radius-1)',
+        2: 'var(--radius-2)',
+        3: 'var(--radius-3)',
+      },
+      fontSize: {
+        1: 'var(--text-1)',
+        2: 'var(--text-2)',
+        3: 'var(--text-3)',
+        4: 'var(--text-4)',
+        5: 'var(--text-5)',
+        6: 'var(--text-6)',
+        7: 'var(--text-7)',
+      },
+      colors: {
+        background: 'var(--background)',
+        text: 'var(--text)',
+        border: 'var(--border)',
+      },
+    },
+  }
+})

package/src/components/_archive/Row.astro

@@ -1,26 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component>
-
-const { ...rest } = Astro.props
----
-
-<Component
-  class:list={['row']}
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('row') {
-    display: flex;
-    align-items: center;
-    gap: var(--space-4);
-  }
-</style>

package/src/components/_todo/Footer.astro

@@ -1,66 +0,0 @@
----
-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/_todo/todo.md

@@ -1,10 +0,0 @@
-# Chores
-
-# New components
-- Footer
-- Header
-- Nav
-- Prose
-- Writeup
-- Join
-- Pile

package/src/components/base/Checkbox.astro

@@ -1,41 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-
-type Props = ComponentProps<typeof Component>
-
-const { as = 'input', type = 'checkbox', name, ...rest } = Astro.props
----
-
-<Component
-  class:list={['checkbox']}
-  if={true}
-  {as}
-  type="checkbox"
-  {...rest}
-/>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('checkbox') {
-    display: block;
-    border-width: var(--border-width);
-    border-color: var(--border-color);
-    border-radius: var(--full-border-radius-2);
-    background: var(--background);
-    min-width: var(--element-2);
-    color: var(--color);
-    accent-color: var(--10);
-    font-size: var(--text-body);
-
-    &:hover {
-      border: var(--border-color-hover);
-      background: var(--background-hover);
-    }
-
-    &:active {
-      border: var(--border-color-active);
-      background: var(--background-active);
-    }
-  }
-</style>