fulldev-ui 0.1.64 → 0.2.10

package/src/components/wrapper/_Wrapper.astro

@@ -1,333 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import Children from '../_Children.astro'
-import Tag from '../_Tag.astro'
-
-interface Props extends ComponentProps<typeof Tag> {
-  html?: string
-  x?: 'start' | 'center' | 'end' | 'between' | 'stretch' | 'fraction'
-  y?: 'start' | 'center' | 'end' | 'between' | 'stretch' | 'fraction'
-}
-
-const {
-  direction = 'vertical',
-  x = 'left',
-  y = 'top',
-  layout,
-  ...rest
-} = Astro.props
----
-
-<Tag
-  class:list={[
-    'full-wrapper',
-    {
-      [`full-direction-${direction}`]: direction,
-      [`full-layout-${layout}`]: layout,
-      [`full-x-${x}`]: x,
-      [`full-y-${y}`]: y,
-    },
-  ]}
-  {...rest}
->
-  <slot name="before" />
-  <Children {...rest} />
-  <slot />
-</Tag>
-
-<style is:global lang="scss">
-  .full-wrapper {
-    * {
-      margin: 0;
-    }
-  }
-
-  .full-direction-horizontal:not(.full-x-fill) {
-    display: flex;
-    flex-direction: row;
-
-    > {
-      .full-tag {
-        + .full-deck,
-        + .full-image:not(.full-position-background),
-        + .full-icon {
-          margin-left: var(--space-5);
-        }
-      }
-
-      .full-deck,
-      .full-image:not(.full-position-background),
-      .full-icon {
-        + .full-tag {
-          margin-left: var(--space-5);
-        }
-      }
-
-      .full-tag {
-        + .full-group,
-        + .full-form {
-          margin-left: var(--space-4);
-        }
-      }
-
-      .full-tag {
-        + .full-paragraph,
-        + .full-link,
-        + .full-heading,
-        + .full-switch {
-          margin-left: var(--space-3);
-        }
-      }
-
-      .full-tag {
-        + .full-link {
-          margin-left: var(--space-4);
-        }
-      }
-
-      .full-tag {
-        + .full-button {
-          margin-left: var(--space-5);
-        }
-      }
-
-      .full-position-background + .full-tag {
-        margin-left: 0;
-      }
-
-      .full-button {
-        + .full-button {
-          margin-left: var(--space-2);
-        }
-      }
-
-      .full-placeholder + .full-placeholder {
-        margin-left: var(--space-4);
-      }
-
-      .full-position-background + .full-tag {
-        margin-left: 0;
-      }
-    }
-  }
-
-  .full-direction-vertical {
-    display: flex;
-    flex-direction: column;
-
-    > {
-      .full-tag {
-        + .full-deck,
-        + .full-image:not(.full-position-background),
-        + .full-icon {
-          margin-top: var(--space-5);
-        }
-      }
-
-      .full-placeholder + .full-placeholder {
-        margin-top: var(--space-4);
-      }
-
-      .full-tag {
-        + .full-group,
-        + .full-card,
-        + .full-form,
-        + .full-button,
-        + .full-list {
-          margin-top: var(--space-4);
-        }
-      }
-
-      .full-list {
-        + .full-tag {
-          margin-top: var(--space-4);
-        }
-      }
-
-      .full-tag {
-        + .full-heading {
-          margin-top: var(--space-3);
-        }
-      }
-
-      .full-rating {
-        + .full-tag {
-          margin-top: var(--space-4);
-        }
-      }
-
-      .full-deck,
-      .full-image:not(.full-position-background),
-      .full-icon {
-        + .full-tag {
-          margin-top: var(--space-5);
-        }
-      }
-
-      .full-button {
-        + .full-button {
-          margin-top: var(--space-2);
-        }
-      }
-
-      .full-paragraph {
-        + .full-paragraph,
-        + .full-label,
-        + .full-input {
-          margin-top: var(--space-2);
-        }
-      }
-
-      .full-tagline {
-        + .full-paragraph,
-        + .full-heading,
-        + .full-label,
-        + .full-input {
-          margin-top: var(--space-3);
-        }
-      }
-
-      .full-heading {
-        + .full-paragraph {
-          margin-top: var(--space-3);
-        }
-      }
-
-      .full-paragraph {
-        + .full-heading {
-          margin-top: var(--space-3);
-        }
-      }
-
-      .full-label {
-        + .full-input,
-        + .full-textarea,
-        + .full-select {
-          margin-top: var(--space-1);
-        }
-      }
-
-      .full-input {
-        + .full-input,
-        + .full-button,
-        + .full-label {
-          margin-top: var(--space-3);
-        }
-      }
-    }
-  }
-
-  .full-direction-vertical {
-    display: flex;
-    flex-direction: column;
-
-    // & > .full-tag:not(:first-child) {
-    //   margin-top: var(--my-spacer);
-    // }
-
-    &.full-x-left {
-      align-items: flex-start;
-    }
-
-    &.full-x-center {
-      align-items: center;
-      text-align: center;
-
-      > .full-tag > .full-tag {
-        text-align: left;
-      }
-    }
-
-    &.full-x-right {
-      align-items: flex-end;
-      text-align: right;
-
-      > .full-tag > .full-tag {
-        text-align: left;
-      }
-    }
-
-    &.full-x-fill {
-      align-items: stretch;
-    }
-
-    &.full-y-top {
-      justify-content: flex-start;
-    }
-
-    &.full-y-center {
-      justify-content: center;
-    }
-
-    &.full-y-bottom {
-      justify-content: flex-end;
-    }
-
-    &.full-y-spread {
-      justify-content: space-between;
-    }
-
-    &.full-y-fill {
-      justify-content: stretch;
-    }
-  }
-
-  .full-direction-horizontal {
-    display: flex;
-    flex-direction: row;
-
-    // & > .full-tag:not(:first-child) {
-    //   margin-left: var(--my-spacer);
-    // }
-
-    &.full-x-left {
-      justify-content: flex-start;
-    }
-
-    &.full-x-center {
-      justify-content: center;
-    }
-
-    &.full-x-right {
-      justify-content: flex-end;
-    }
-
-    &.full-x-spread {
-      justify-content: space-between;
-    }
-
-    &.full-x-fill {
-      display: grid;
-      row-gap: var(--space-5);
-
-      @media (min-width: 1024px) {
-        grid-auto-columns: 1fr;
-        grid-auto-flow: column;
-      }
-
-      & > .full-tag {
-        margin-left: 0;
-      }
-    }
-
-    &.full-y-top {
-      align-items: flex-start;
-    }
-
-    &.full-y-center {
-      align-items: center;
-    }
-
-    &.full-y-bottom {
-      align-items: flex-end;
-    }
-
-    &.full-y-stretch {
-      align-items: stretch;
-    }
-
-    &.full-y-fill {
-      align-items: stretch;
-    }
-  }
-</style>

package/src/components/wrapper/todo.md

@@ -1,20 +0,0 @@
-# Chores
-- Apply props gutter, which controls the outer padding/margin. Now is frame: panel/fill/viewport
-- Apply props spacer, which controls the margin between children. Now is always enabled, but should be optional: none, components, prose (probably not needed with prose and writeup component. This whole prop might be skipped)
-- Should be renamed to 'containers', because 'layouts' are used used for collections. Or maybe 'structures'. Or we should use template for the content collections. We need a name that also fits 'Divider'.
-
-
-# New components
-- Prose (for articles etc. Should apply styling to non-component html elements)
-- Writeup (for small content areas, like in a section. Should apply styling to non-component html elements)
-- Field (for form fields with label etc. Should adapt based on the element, like horizontal for checkboxes)
-- Divider (for separating with a light border)
-
-## Low priority
-- Toast
-- Modal
-- Drawer
-- Alert
-- Tooltip
-- Legal
-- Banner

package/src/css/border.css

@@ -1,23 +0,0 @@
-:root {
-  --border-radius: 1;
-  --full-border-width: 1px;
-  --full-transition: cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
-}
-
-:root,
-.full-compact,
-.full-size-xs,
-.full-size-sm,
-.full-size-md,
-.full-size-lg,
-.full-size-xl {
-  --full-border-radius-1: calc(
-    var(--border-radius) * var(--space-element-2) * 0.25
-  );
-  --full-border-radius-2: calc(
-    var(--border-radius) * var(--space-element-2) * 0.5
-  );
-  --full-border-radius-3: calc(
-    var(--border-radius) * var(--space-element-2) * 1
-  );
-}

package/src/css/font.css

@@ -1,15 +0,0 @@
-:root {
-  --full-font-family: 'IBM Plex Sans', sans-serif;
-  --full-font-weight: 400;
-
-  --full-heading-font-family: var(--full-font-family);
-  --full-heading-font-weight: 700;
-
-  --full-button-font-family: var(--full-font-family);
-  --full-button-font-weight: 500;
-}
-
-.full-density-compact {
-  --full-heading-font-family: var(--full-font-family);
-  --full-heading-font-weight: 600;
-}