fulldev-ui 0.2.12 → 0.3.0-beta.1

package/src/components/structure/Carousel.astro

@@ -1,43 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag>
-
-const { ...rest } = Astro.props
----
-
-<Tag
-  class:list={['carousel']}
-  {...rest}
->
-  <slot />
-</Tag>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('carousel') {
-    --column-width: calc(16 * var(--element-3));
-
-    display: flex;
-    position: relative;
-    position: relative;
-    flex-direction: row;
-    align-items: flex-start;
-    gap: var(--space-3);
-    padding-bottom: var(--space-3);
-    width: 100%;
-    overflow-x: auto;
-    scroll-behavior: smooth;
-    scroll-snap-type: x mandatory;
-
-    > .full {
-      flex-grow: 0;
-      flex-shrink: 0;
-      width: var(--column-width);
-      scroll-snap-align: center;
-    }
-  }
-</style>

package/src/components/structure/Grid.astro

@@ -1,30 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag>
-
-const { ...rest } = Astro.props
----
-
-<Tag
-  class:list={['grid']}
-  {...rest}
->
-  <slot />
-</Tag>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('grid') {
-    --column-width: calc(15 * var(--element-3));
-
-    display: grid;
-    position: relative;
-    grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
-    gap: var(--space-3);
-    width: 100%;
-  }
-</style>

package/src/components/structure/Masonry.astro

@@ -1,39 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag>
-
-const { ...rest } = Astro.props
----
-
-<Tag
-  class:list={['masonry']}
-  {...rest}
->
-  <slot />
-</Tag>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('masonry') {
-    --column-width: calc(16 * var(--element-3));
-    --gap: var(--space-3);
-
-    position: relative;
-    column-gap: var(--gap);
-    column-fill: balance;
-    column-width: var(--column-width);
-    column-count: 6;
-    break-inside: avoid;
-    width: 100%;
-
-    & > .full + .full {
-      break-inside: avoid;
-      margin-top: var(--gap);
-      margin-bottom: var(--gap);
-    }
-  }
-</style>

package/src/components/structure/Split.astro

@@ -1,41 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
-    align?: 'start' | 'center' | 'end'
-  }
-
-const { ...rest } = Astro.props
----
-
-<Tag
-  class:list={['split']}
-  {...rest}
->
-  <slot />
-</Tag>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('split') {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: var(--space-5) var(--space-5);
-    width: 100%;
-
-    &.align-start {
-      align-items: flex-start;
-    }
-
-    &.align-center {
-      align-items: center;
-    }
-
-    &.align-end {
-      align-items: flex-end;
-    }
-  }
-</style>

package/src/components/structure/Spread.astro

@@ -1,48 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
-    align?: 'start' | 'center' | 'end'
-  }
-
-const { align = 'center', ...rest } = Astro.props
----
-
-<Tag
-  class:list={['spread']}
-  {align}
-  {...rest}
->
-  <slot />
-</Tag>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('spread') {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: stretch;
-    gap: var(--space-4);
-    width: 100%;
-
-    & > .full {
-      width: auto;
-    }
-
-    &.align-start {
-      align-items: flex-start;
-    }
-
-    &.align-center {
-      align-items: center;
-    }
-
-    &.align-end {
-      align-items: flex-end;
-    }
-  }
-</style>

package/src/components/structure/Stack.astro

@@ -1,90 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
-    align?: 'start' | 'center' | 'end'
-  }
-
-const { align = 'start', ...rest } = Astro.props
----
-
-<Tag
-  class:list={['stack']}
-  {align}
-  {...rest}
->
-  <slot />
-</Tag>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('stack') {
-    display: flex;
-    flex-direction: column;
-    gap: 0 !important;
-    width: 100%;
-
-    &.align-start {
-      align-items: flex-start;
-    }
-
-    &.align-center {
-      align-items: center;
-      text-align: center;
-
-      > * > * {
-        text-align: left;
-      }
-    }
-
-    &.align-end {
-      align-items: flex-end;
-    }
-
-    > {
-      .full {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .full + .full {
-        margin-top: var(--space-5);
-      }
-
-      .full + .group,
-      .full + .button,
-      .full + .switch {
-        margin-top: var(--space-4);
-      }
-
-      .full + .heading,
-      .full + .label,
-      .full + .link,
-      .full + .list,
-      .full + .paragraph,
-      .full + .tagline,
-      .full + .input,
-      .full + .badge,
-      .full + .rating {
-        margin-top: var(--space-3);
-      }
-
-      .paragraph + .paragraph,
-      .button + .button {
-        margin-top: var(--space-2);
-      }
-
-      .label + .input {
-        margin-top: var(--space-1);
-      }
-
-      .image + .full,
-      .icon + .full {
-        margin-top: var(--space-5);
-      }
-    }
-  }
-</style>

package/src/components/structure/todo.md

@@ -1,5 +0,0 @@
-# Components
-- Pile
-- Join
-
-# Chores

package/src/css/colors.css

@@ -1,197 +0,0 @@
-:root,
-.theme-light [data-theme='light'] {
-  --base-background: hsl(223, 54%, 98%);
-  --base-hover: hsl(223, 16%, 93%);
-  --base-border: hsl(223, 16%, 87%);
-  --base-focus: hsl(223, 16%, 9%);
-  --base-foreground: hsl(223, 10%, 3%);
-
-  --secondary-background: hsl(223, 20%, 90%);
-  --secondary-hover: hsl(223, 20%, 92%);
-  --secondary-foreground: var(--base-foreground);
-
-  --primary-background: hsl(223, 20%, 9%);
-  --primary-hover: hsl(223, 20%, 16%);
-  --primary-foreground: var(--base-background);
-
-  --outline-border: hsl(223, 16%, 85%);
-  --muted-foreground: hsl(223, 16%, 22%);
-  --raised-background: hsl(223, 38%, 96%);
-  --accent-foreground: var(--primary-background);
-
-  color-scheme: light;
-}
-
-.theme-dark,
-.dark,
-[data-theme='dark'] {
-  --base-background: hsl(223, 54%, 5%);
-  --base-hover: hsl(223, 20%, 10%);
-  --base-border: hsl(223, 16%, 20%);
-  --base-focus: hsl(223, 16%, 100%);
-  --base-foreground: hsl(223, 10%, 100%);
-
-  --secondary-background: hsl(223, 20%, 15%);
-  --secondary-hover: hsl(223, 20%, 13%);
-  --secondary-foreground: var(--base-foreground);
-
-  --primary-background: hsl(223, 16%, 100%);
-  --primary-hover: hsl(223, 16%, 90%);
-  --primary-foreground: var(--base-background);
-
-  --outline-border: hsl(223, 16%, 26%);
-  --muted-foreground: hsl(223, 16%, 86%);
-  --raised-background: hsl(223, 36%, 7%);
-
-  color-scheme: dark;
-}
-/* More neutral color theme. Used in < 0.2 */
-/* :root,
-.theme-light {
-  --base-background: hsl(0, 0%, 100%);
-  --base-hover: hsl(223, 16%, 97%);
-  --base-border: hsl(223, 10%, 87%);
-  --base-focus: hsl(223, 22%, 9%);
-  --base-foreground: hsl(223, 22%, 5%);
-
-  --secondary-background: hsl(223, 10%, 94%);
-  --secondary-hover: hsl(223, 10%, 92%);
-  --secondary-foreground: var(--base-foreground);
-
-  --primary-background: hsl(223, 22%, 9%);
-  --primary-hover: hsl(223, 22%, 15%);
-  --primary-foreground: var(--base-background);
-
-  --outline-border: hsl(223, 10%, 85%);
-  --muted-foreground: hsl(223, 10%, 16%);
-  --raised-background: var(--base-hover);
-  --accent-foreground: var(--primary-background);
-
-  color-scheme: light;
-} */
-/* .theme-dark,
-.dark,
-[data-theme='dark'] {
-  --base-background: hsl(223, 22%, 5%);
-  --base-hover: hsl(223, 16%, 7%);
-  --base-border: hsl(223, 10%, 20%);
-  --base-focus: hsl(223, 10%, 100%);
-  --base-foreground: hsl(223, 10%, 100%);
-
-  --secondary-background: hsl(223, 10%, 13%);
-  --secondary-hover: hsl(223, 10%, 11%);
-  --secondary-foreground: var(--base-foreground);
-
-  --primary-background: hsl(223, 10%, 100%);
-  --primary-hover: hsl(223, 10%, 90%);
-  --primary-foreground: var(--base-background);
-
-  --outline-border: hsl(223, 10%, 26%);
-  --muted-foreground: hsl(223, 10%, 90%);
-  --raised-background: var(--base-hover);
-  --accent-foreground: var(--primary-background);
-
-  color-scheme: dark;
-} */
-
-/* --------------------------- */
-/* Generate colors */
-/* --------------------------- */
-
-:where(:root),
-:where([class*='theme-']),
-.variant-base,
-.variant-base
-  [class*='density-']:not(
-    .variant-base [class*='variant-'] [class*='theme-']
-  ):not(.variant-base[class*='variant-'][class*='theme-']) {
-  --background: var(--base-background);
-  --hover: var(--base-hover);
-  --border: var(--base-border);
-  --focus: var(--base-focus);
-  --foreground: var(--base-foreground);
-}
-
-.variant-primary,
-.variant-primary
-  [class*='density-']:not(
-    .variant-primary [class*='variant-'] [class*='theme-']
-  ):not(.variant-primary[class*='variant-'][class*='theme-']) {
-  --background: var(--primary-background, var(--base-foreground));
-  --hover: var(--primary-hover, var(--base-hover));
-  --border: var(--primary-border, transparent);
-  --focus: var(--primary-focus, var(--base-focus));
-  --foreground: var(--primary-foreground, var(--base-background));
-}
-
-.variant-secondary,
-.variant-secondary
-  [class*='density-']:not(
-    .variant-secondary [class*='variant-'] [class*='theme-']
-  ):not(.variant-secondary[class*='variant-'][class*='theme-']) {
-  --background: var(--secondary-background, var(--base-background));
-  --hover: var(--secondary-hover, var(--base-hover));
-  --border: var(--secondary-border, transparent);
-  --focus: var(--secondary-focus, var(--base-focus));
-  --foreground: var(--secondary-foreground, var(--base-foreground));
-}
-
-.variant-accent,
-.variant-accent
-  [class*='density-']:not(
-    .variant-accent [class*='variant-'] [class*='theme-']
-  ):not(.variant-accent[class*='variant-'][class*='theme-']) {
-  --background: var(--accent-background, var(--base-background));
-  --hover: var(--accent-hover, var(--base-hover));
-  --border: var(--accent-border, var(--base-border));
-  --focus: var(--accent-focus, var(--base-focus));
-  --foreground: var(--accent-foreground, var(--base-foreground));
-}
-
-.variant-muted,
-.variant-muted
-  [class*='density-']:not(
-    .variant-muted [class*='variant-'] [class*='theme-']
-  ):not(.variant-muted[class*='variant-'][class*='theme-']) {
-  --background: var(--muted-background, var(--base-background));
-  --hover: var(--muted-hover, var(--base-hover));
-  --border: var(--muted-border, var(--base-border));
-  --focus: var(--muted-focus, var(--base-focus));
-  --foreground: var(--muted-foreground, var(--base-foreground));
-}
-
-.variant-ghost,
-.variant-ghost
-  [class*='density-']:not(
-    .variant-ghost [class*='variant-'] [class*='theme-']
-  ):not(.variant-ghost[class*='variant-'][class*='theme-']) {
-  --background: var(--ghost-background, transparent);
-  --hover: var(--ghost-hover, var(--base-hover));
-  --border: var(--ghost-border, transparent);
-  --focus: var(--ghost-focus, var(--base-focus));
-  --foreground: var(--ghost-foreground, var(--base-foreground));
-}
-
-.variant-outline,
-.variant-outline
-  [class*='density-']:not(
-    .variant-outline [class*='variant-'] [class*='theme-']
-  ):not(.variant-outline[class*='variant-'][class*='theme-']) {
-  --background: var(--outline-background, transparent);
-  --hover: var(--outline-hover, var(--base-hover));
-  --border: var(--outline-border, var(--base-border));
-  --focus: var(--outline-focus, var(--base-focus));
-  --foreground: var(--outline-foreground, var(--base-foreground));
-}
-
-.variant-raised,
-.variant-raised
-  [class*='density-']:not(
-    .variant-raised [class*='variant-'] [class*='theme-']
-  ):not(.variant-raised[class*='variant-'][class*='theme-']) {
-  --background: var(--raised-background, var(--base-background));
-  --hover: var(--raised-hover, var(--base-hover));
-  --border: var(--raised-border, var(--base-border));
-  --focus: var(--raised-focus, var(--base-focus));
-  --foreground: var(--raised-foreground, var(--base-foreground));
-}

package/src/css/main.css

@@ -1,3 +0,0 @@
-@import './sizes.css';
-@import './colors.css';
-@import './styles.css';