fulldev-ui 0.2.12 → 0.3.0-beta.1

package/src/components/typography/Link.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 = 'a'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
+  ComponentProps<typeof Component> & {
     html?: string
     text?: string
     variant?: 'base' | 'muted' | 'accent'
@@ -12,13 +12,13 @@ type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> &
 const { as = 'a', ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['link']}
   {as}
   {...rest}
 >
   <slot />
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
@@ -30,7 +30,7 @@ const { as = 'a', ...rest } = Astro.props
     gap: var(--space-2);
     color: var(--foreground);
     font-weight: var(--font-weight);
-    font-size: var(--text-2);
+    font-size: var(--text-body);
     font-family: var(--font-family);
     text-decoration: none;
     text-decoration-color: var(--border);

package/src/components/typography/List.astro

@@ -1,20 +1,23 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 import ListItem from './ListItem.astro'
 
 type Props<As extends HTMLTag = 'ul'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
+  ComponentProps<typeof Component> & {
     html?: string
     text?: string
     variant?: 'base' | 'muted' | 'accent'
-    items?: (ComponentProps<typeof ListItem> | string)[]
+    items?: (
+      | ComponentProps<typeof ListItem>
+      | ComponentProps<typeof ListItem>['html']
+    )[]
   }
 
 const { as = 'ul', items, ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['list']}
   {as}
   {...rest}
@@ -26,7 +29,7 @@ const { as = 'ul', items, ...rest } = Astro.props
     })
   }
   <slot />
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
@@ -37,7 +40,7 @@ const { as = 'ul', items, ...rest } = Astro.props
     padding-left: var(--space-4);
     color: var(--foreground);
     font-weight: var(--font-weight);
-    font-size: var(--text-2);
+    font-size: var(--text-body);
     line-height: 1.625;
     font-family: var(--font-family);
     list-style-type: disc;

package/src/components/typography/ListItem.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 = 'li'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
+  ComponentProps<typeof Component> & {
     html?: string
     text?: string
     variant?: 'base' | 'muted' | 'accent'
@@ -12,13 +12,13 @@ type Props<As extends HTMLTag = 'li'> = Polymorphic<{ as: As }> &
 const { as = 'li', ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['list-item']}
   {as}
   {...rest}
 >
   <slot />
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
@@ -28,7 +28,7 @@ const { as = 'li', ...rest } = Astro.props
     max-width: calc(var(--element-3) * 36);
     color: var(--foreground);
     font-weight: var(--font-weight);
-    font-size: var(--text-2);
+    font-size: var(--text-body);
     line-height: 1.625;
     font-family: var(--font-family);
   }

package/src/components/typography/Paragraph.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 = 'p'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
-    html?: string
-    text?: string
-    variant?: 'base' | 'muted' | 'accent'
-  }
+type Props<As extends HTMLTag = 'p'> = Polymorphic<{ as: As }> & {
+  scheme?: 'light' | 'dark'
+  color?: 'base' | 'brand'
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  contrast?: boolean
+  html?: string
+  text?: string
+}
 
 const { as = 'p', ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['paragraph']}
   {as}
   {...rest}
 >
   <slot />
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
@@ -28,8 +30,12 @@ const { as = 'p', ...rest } = Astro.props
     max-width: calc(var(--element-3) * 36);
     color: var(--foreground);
     font-weight: var(--font-weight);
-    font-size: var(--text-2);
+    font-size: var(--text-body);
     line-height: 1.625;
     font-family: var(--font-family);
+
+    &.contrast {
+      color: var(--foreground-contrast);
+    }
   }
 </style>

package/src/components/typography/Tagline.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 = 'span'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
+  ComponentProps<typeof Component> & {
     html?: string
     text?: string
     variant?: 'base' | 'muted' | 'accent'
@@ -12,22 +12,23 @@ type Props<As extends HTMLTag = 'span'> = Polymorphic<{ as: As }> &
 const { as = 'span', ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['tagline']}
   {as}
   {...rest}
 >
   <slot />
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
 
   @include component('tagline') {
+    margin: 0;
     max-width: calc(var(--element-3) * 36);
     color: var(--foreground);
     font-weight: var(--font-weight);
-    font-size: var(--text-1);
+    font-size: var(--text-label);
     line-height: 1.25;
     font-family: var(--font-family);
   }

package/src/components/typography/Text.astro

@@ -0,0 +1,40 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Component from '../_Component.astro'
+
+type Props<As extends HTMLTag = 'p'> = Polymorphic<{ as: As }> & {
+  scheme?: 'light' | 'dark'
+  color?: 'base' | 'brand'
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  contrast?: boolean
+  html?: string
+  text?: string
+}
+
+const { as = 'p', ...rest } = Astro.props
+---
+
+<Component
+  class:list={['text']}
+  {...rest}
+>
+  <slot />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('text') {
+    margin: 0;
+    max-width: calc(var(--element-3) * 36);
+    color: var(--foreground);
+    font-weight: var(--font-weight);
+    font-size: var(--text-body);
+    line-height: 1.625;
+    font-family: var(--font-family);
+
+    &.contrast {
+      color: var(--foreground-contrast);
+    }
+  }
+</style>

package/src/{layouts → components/utility}/Layout.astro

@@ -1,10 +1,10 @@
 ---
 import type { ComponentProps } from 'astro/types'
-import Tag from '../components/_Tag.astro'
-import Body from '../components/segment/Body.astro'
-import Head from '../components/utility/Head.astro'
+import Component from '../_Component.astro'
+import Body from '../_archive/Body.astro'
+import Head from './Head.astro'
 
-interface Props extends ComponentProps<typeof Tag> {
+interface Props extends ComponentProps<typeof Component> {
   title?: ComponentProps<typeof Head>['title']
   description?: ComponentProps<typeof Head>['description']
   image?: ComponentProps<typeof Head>['image']
@@ -15,7 +15,7 @@ interface Props extends ComponentProps<typeof Tag> {
 const { title, description, image, theme, head, body, ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class={[
     'layout',
     {
@@ -40,4 +40,4 @@ const { title, description, image, theme, head, body, ...rest } = Astro.props
     <slot name="before" />
     <slot />
   </Body>
-</Tag>
+</Component>

package/src/content/config.ts

@@ -0,0 +1,14 @@
+import { defineCollection, reference } from 'astro:content'
+import { pageSchema } from '../schemas/collection'
+
+const collection = defineCollection({
+  type: 'content',
+  schema: pageSchema({
+    page: reference('pages'),
+    pages: reference('pages').array(),
+  }),
+})
+
+export const collections = {
+  pages: collection,
+}

package/src/content/pages/index.md

@@ -1,2 +1,3 @@
 ---
+title: hello
 ---

package/src/css/color.css

@@ -0,0 +1,88 @@
+:root,
+.light,
+.light-theme,
+.theme-light,
+[data-theme='light'],
+.dark,
+.dark-theme,
+.theme-dark,
+[data-theme='dark'] {
+  --base-background: var(--base-1);
+  --base-background-surface: var(--base-surface);
+  --base-background-subtle: var(--base-2);
+  --base-background-soft: var(--base-3);
+  --base-background-hover: var(--base-4);
+  --base-background-active: var(--base-5);
+  --base-border: var(--base-6);
+  --base-border-outline: var(--base-7);
+  --base-border-hover: var(--base-8);
+  --base-solid: var(--base-9);
+  --base-solid-hover: var(--base-10);
+  --base-solid-contrast: var(--base-contrast);
+  --base-foreground: var(--base-11);
+  --base-foreground-contrast: var(--base-12);
+
+  --brand-background: var(--brand-1);
+  --brand-background-surface: var(--brand-surface);
+  --brand-background-subtle: var(--brand-2);
+  --brand-background-soft: var(--brand-3);
+  --brand-background-hover: var(--brand-4);
+  --brand-background-active: var(--brand-5);
+  --brand-border: var(--brand-6);
+  --brand-border-outline: var(--brand-7);
+  --brand-border-hover: var(--brand-8);
+  --brand-solid: var(--brand-9);
+  --brand-solid-hover: var(--brand-10);
+  --brand-solid-contrast: var(--brand-contrast);
+  --brand-foreground: var(--brand-11);
+  --brand-foreground-contrast: var(--brand-12);
+}
+
+/* --------------------------- */
+/* Generate colors */
+/* --------------------------- */
+
+:where(:root),
+:where(.theme-light),
+:where(.theme-dark),
+.color-base,
+.color-base
+  [class*='theme-']:not(.color-base [class*='color-'] [class*='theme-']):not(
+    .color-base [class*='color-'][class*='theme-']
+  ) {
+  --background: var(--base-background);
+  --background-surface: var(--base-background-surface);
+  --background-subtle: var(--base-background-subtle);
+  --background-soft: var(--base-background-soft);
+  --background-hover: var(--base-background-hover);
+  --background-active: var(--base-background-active);
+  --border: var(--base-border);
+  --border-outline: var(--base-border-outline);
+  --border-hover: var(--base-border-hover);
+  --solid: var(--base-solid);
+  --solid-hover: var(--base-solid-hover);
+  --solid-contrast: var(--base-solid-contrast);
+  --foreground: var(--base-foreground);
+  --foreground-contrast: var(--base-foreground-contrast);
+}
+
+.color-brand,
+.color-brand
+  [class*='theme-']:not(.color-brand [class*='color-'] [class*='theme-']):not(
+    .color-brand [class*='color-'][class*='theme-']
+  ) {
+  --background: var(--brand-background);
+  --background-surface: var(--brand-background-surface);
+  --background-subtle: var(--brand-background-subtle);
+  --background-soft: var(--brand-background-soft);
+  --background-hover: var(--brand-background-hover);
+  --background-active: var(--brand-background-active);
+  --border: var(--brand-border);
+  --border-outline: var(--brand-border-outline);
+  --border-hover: var(--brand-border-hover);
+  --solid: var(--brand-solid);
+  --solid-hover: var(--brand-solid-hover);
+  --solid-contrast: var(--brand-solid-contrast);
+  --foreground: var(--brand-foreground);
+  --foreground-contrast: var(--brand-foreground-contrast);
+}

package/src/css/props/align.scss

@@ -0,0 +1,20 @@
+.align-start {
+  align-items: flex-start;
+}
+
+.align-center {
+  align-items: center;
+  text-align: var(--space-x, center);
+
+  & > * > * {
+    text-align: left;
+  }
+}
+
+.align-end {
+  align-items: flex-end;
+}
+
+.align-stretch {
+  align-items: stretch;
+}

package/src/css/props/frame.scss

@@ -0,0 +1,153 @@
+:root {
+  --screen: 1536px;
+}
+
+.frame-wrapper,
+.frame-viewport,
+.frame-container,
+.frame-panel {
+  --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
+}
+
+.frame-wrapper,
+.frame-viewport {
+  --inner-x: var(--gutter);
+
+  padding-right: var(--gutter);
+  padding-left: var(--gutter);
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+
+  &:is(.split > &) {
+    @media (min-width: 768px) {
+      &:not(:first-child) {
+        padding-left: 0;
+      }
+
+      &:not(:last-child) {
+        padding-right: 0;
+      }
+    }
+  }
+}
+
+.frame-viewport {
+  min-height: 100%;
+}
+
+.frame-container {
+  margin-right: var(--gutter);
+  margin-left: var(--gutter);
+  max-width: calc(100% - var(--gutter) * 2);
+
+  &:is(.split > &) {
+    @media (min-width: 768px) {
+      &:not(:first-child) {
+        margin-left: 0;
+      }
+
+      &:not(:last-child) {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+.frame-panel {
+  --inner-x: var(--space-6);
+  --inner-y: var(--space-6);
+
+  position: relative;
+  border-radius: var(--radius-3);
+  padding: var(--inner-y) var(--inner-x);
+  width: 100%;
+  overflow: hidden;
+
+  &.section {
+    --inner-x: min(var(--gutter), var(--space-6));
+
+    margin-right: var(--gutter);
+    margin-left: var(--gutter);
+    max-width: calc(100% - var(--gutter) * 2);
+  }
+}
+
+.frame-inset {
+  &:is(.structure-column > &) {
+    margin-right: calc(var(--inner-x) * -1);
+    margin-left: calc(var(--inner-x) * -1);
+    width: calc(100% + var(--inner-x) * 2);
+
+    &:first-child {
+      margin-top: calc(var(--inner-y) * -1);
+      height: calc(100% + var(--inner-y) * 1);
+    }
+
+    &:last-child {
+      margin-bottom: calc(var(--inner-y) * -1);
+      height: calc(100% + var(--inner-y) * 1);
+    }
+  }
+
+  &:is(.structure-split > &) {
+    @media (max-width: 1023.999px) {
+      margin-right: calc(var(--inner-x) * -1);
+      margin-left: calc(var(--inner-x) * -1);
+      width: calc(100% + var(--inner-x) * 2);
+
+      &:first-child {
+        margin-top: calc(var(--inner-y) * -1);
+        height: calc(100% + var(--inner-y) * 1);
+      }
+
+      &:last-child {
+        margin-bottom: calc(var(--inner-y) * -1);
+        height: calc(100% + var(--inner-y) * 1);
+      }
+    }
+
+    @media (min-width: 1024px) {
+      margin-top: calc(var(--inner-y) * -1);
+      margin-bottom: calc(var(--inner-y) * -1);
+      height: calc(100% + var(--inner-y) * 2);
+
+      &:first-child {
+        margin-left: calc(var(--inner-x) * -1);
+        width: calc(100% + var(--inner-x) * 1);
+      }
+
+      &:last-child {
+        margin-right: calc(var(--inner-x) * -1);
+        width: calc(100% + var(--inner-x) * 1);
+      }
+    }
+  }
+}
+
+.frame-cover {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.frame-background {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  order: 1;
+  z-index: -1;
+  margin: 0 !important;
+  border-radius: 0;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  object-fit: cover;
+
+  ~ .full {
+    position: relative;
+    z-index: 1;
+  }
+}

package/src/css/props/mask

@@ -0,0 +1 @@
+

package/src/css/props/position.scss

@@ -0,0 +1,33 @@
+.position-background {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  order: 1;
+  z-index: -1;
+  margin: 0 !important;
+  border-radius: 0;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  object-fit: cover;
+
+  ~ .full {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+.position-cover {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.position-container {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+}

package/src/css/props/ratio

@@ -0,0 +1 @@
+