fulldev-ui 0.1.64 → 0.2.10

package/src/css/sizes.css

@@ -1,37 +1,5 @@
 :root,
-.full-density-base {
-  --text-sm: 14px;
-  --text-md: 16px;
-  --text-lg: 18px;
-
-  --text-element-sm: 12px;
-  --text-element-md: 14px;
-  --text-element-lg: 16px;
-
-  --text-heading-xs: 20px;
-  --text-heading-sm: 24px;
-  --text-heading-md: 30px;
-  --text-heading-lg: 36px;
-  --text-heading-xl: 36px;
-  --text-heading-2xl: 36px;
-
-  @media (min-width: 1024px) {
-    --text-sm: 16px;
-    --text-md: 18px;
-    --text-lg: 20px;
-
-    --text-element-sm: 14px;
-    --text-element-md: 16px;
-    --text-element-lg: 16px;
-
-    --text-heading-xs: 24px;
-    --text-heading-sm: 30px;
-    --text-heading-md: 36px;
-    --text-heading-lg: 48px;
-    --text-heading-xl: 60px;
-    --text-heading-2xl: 72px;
-  }
-
+.density-base {
   --space-sm-1: 3px;
   --space-sm-2: 6px;
   --space-sm-3: 12px;
@@ -51,36 +19,52 @@
   --space-lg-5: 80px;
   --space-lg-6: 160px;
 
-  --space-element-sm-1: 6px;
-  --space-element-sm-2: 9px;
-  --space-element-sm-3: 12px;
-  --space-element-md-1: 8px;
-  --space-element-md-2: 12px;
-  --space-element-md-3: 16px;
-  --space-element-lg-1: 10px;
-  --space-element-lg-2: 16px;
-  --space-element-lg-3: 20px;
-}
-
-.full-density-compact {
-  --text-sm: 12px;
-  --text-md: 14px;
-  --text-lg: 16px;
+  --element-sm-1: 6px;
+  --element-sm-2: 9px;
+  --element-sm-3: 12px;
+  --element-md-1: 8px;
+  --element-md-2: 12px;
+  --element-md-3: 16px;
+  --element-lg-1: 10px;
+  --element-lg-2: 16px;
+  --element-lg-3: 20px;
+
+  --text-sm-1: 12px;
+  --text-sm-2: 14px;
+  --text-sm-3: 20px;
+  --text-sm-4: 24px;
+  --text-sm-5: 30px;
+  --text-md-1: 14px;
+  --text-md-2: 16px;
+  --text-md-3: 24px;
+  --text-md-4: 30px;
+  --text-md-5: 36px;
+  --text-lg-1: 16px;
+  --text-lg-2: 18px;
+  --text-lg-3: 30px;
+  --text-lg-4: 36px;
+  --text-lg-5: 36px;
 
-  --text-element-sm: 12px;
-  --text-element-md: 14px;
-  --text-element-lg: 14px;
-
-  --text-heading-xs: 12px;
-  --text-heading-sm: 14px;
-  --text-heading-md: 16px;
-  --text-heading-lg: 18px;
-  --text-heading-xl: 20px;
-  --text-heading-2xl: 24px;
-  --text-heading-3xl: 24px;
-  --text-heading-4xl: 24px;
-  --text-heading-5xl: 24px;
+  @media (min-width: 1024px) {
+    --text-sm-1: 14px;
+    --text-sm-2: 16px;
+    --text-sm-3: 24px;
+    --text-sm-4: 30px;
+    --text-sm-5: 36px;
+    --text-md-1: 16px;
+    --text-md-2: 18px;
+    --text-md-3: 30px;
+    --text-md-4: 36px;
+    --text-md-5: 48px;
+    --text-lg-1: 16px;
+    --text-lg-2: 20px;
+    --text-lg-3: 36px;
+    --text-lg-4: 48px;
+    --text-lg-5: 60px;
+  }
+}
 
+.density-compact {
   --space-sm-1: 3px;
   --space-sm-2: 6px;
   --space-sm-3: 9px;
@@ -100,61 +84,58 @@
   --space-lg-5: 25px;
   --space-lg-6: 30px;
 
-  --space-element-sm-1: 6px;
-  --space-element-sm-2: 8px;
-  --space-element-sm-3: 10px;
-  --space-element-md-1: 8px;
-  --space-element-md-2: 10px;
-  --space-element-md-3: 12px;
-  --space-element-lg-1: 10px;
-  --space-element-lg-2: 12px;
-  --space-element-lg-3: 14px;
+  --element-sm-1: 6px;
+  --element-sm-2: 8px;
+  --element-sm-3: 10px;
+  --element-md-1: 8px;
+  --element-md-2: 10px;
+  --element-md-3: 12px;
+  --element-lg-1: 10px;
+  --element-lg-2: 12px;
+  --element-lg-3: 14px;
+
+  --text-sm-1: 12px;
+  --text-sm-2: 12px;
+  --text-sm-3: 12px;
+  --text-sm-4: 14px;
+  --text-sm-5: 16px;
+  --text-md-1: 14px;
+  --text-md-2: 14px;
+  --text-md-3: 14px;
+  --text-md-4: 16px;
+  --text-md-5: 18px;
+  --text-lg-1: 14px;
+  --text-lg-2: 16px;
+  --text-lg-3: 16px;
+  --text-lg-4: 18px;
+  --text-lg-5: 20px;
+
+  @media (min-width: 1024px) {
+    --text-sm-1: 12px;
+    --text-sm-2: 14px;
+    --text-sm-3: 14px;
+    --text-sm-4: 16px;
+    --text-sm-5: 18px;
+    --text-md-1: 14px;
+    --text-md-2: 16px;
+    --text-md-3: 16px;
+    --text-md-4: 18px;
+    --text-md-5: 20px;
+    --text-lg-1: 16px;
+    --text-lg-2: 18px;
+    --text-lg-3: 18px;
+    --text-lg-4: 20px;
+    --text-lg-5: 24px;
+  }
 }
 
 /* --------------------------- */
 /* Generate sizes */
 /* --------------------------- */
 
-.full-size-xs,
-.full-size-xs
-  *:not(
-    .full-size-xs,
-    .full-size-xs *,
-    .full-size-sm,
-    .full-size-sm *,
-    .full-size-md,
-    .full-size-md *,
-    .full-size-lg,
-    .full-size-lg *,
-    .full-size-xl,
-    .full-size-xl *,
-    .full-size-2xl,
-    .full-size-2xl *
-  ) {
-  --text: var(--text-xs);
-  --text-heading: var(--text-heading-xs);
-}
-
-.full-size-sm,
-.full-size-sm
-  *:not(
-    .full-size-xs,
-    .full-size-xs *,
-    .full-size-sm,
-    .full-size-sm *,
-    .full-size-md,
-    .full-size-md *,
-    .full-size-lg,
-    .full-size-lg *,
-    .full-size-xl,
-    .full-size-xl *,
-    .full-size-2xl,
-    .full-size-2xl *
-  ) {
-  --text: var(--text-sm);
-  --text-heading: var(--text-heading-sm);
-  --text-element: var(--text-element-sm);
-
+.size-sm,
+.size-sm
+  [class*='density-']:not(.size-sm [class*='size-'] [class*='density-']) {
   --space-1: var(--space-sm-1);
   --space-2: var(--space-sm-2);
   --space-3: var(--space-sm-3);
@@ -162,33 +143,26 @@
   --space-5: var(--space-sm-5);
   --space-6: var(--space-sm-6);
 
-  --space-element-1: var(--space-element-sm-1);
-  --space-element-2: var(--space-element-sm-2);
-  --space-element-3: var(--space-element-sm-3);
-}
+  --element-1: var(--element-sm-1);
+  --element-2: var(--element-sm-2);
+  --element-3: var(--element-sm-3);
 
-:root,
-:where([class*='full-density-']),
-.full-size-md,
-.full-size-md
-  *:not(
-    .full-size-xs,
-    .full-size-xs *,
-    .full-size-sm,
-    .full-size-sm *,
-    .full-size-md,
-    .full-size-md *,
-    .full-size-lg,
-    .full-size-lg *,
-    .full-size-xl,
-    .full-size-xl *,
-    .full-size-2xl,
-    .full-size-2xl *
-  ) {
-  --text: var(--text-md);
-  --text-heading: var(--text-heading-md);
-  --text-element: var(--text-element-md);
+  --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);
 
+  --radius-1: calc(var(--border-radius, 1) * var(--element-sm-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--element-sm-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--element-sm-3));
+}
+
+:where(:root),
+:where([class*='density-']),
+.size-md,
+.size-md
+  [class*='density-']:not(.size-md [class*='size-'] [class*='density-']) {
   --space-1: var(--space-md-1);
   --space-2: var(--space-md-2);
   --space-3: var(--space-md-3);
@@ -196,31 +170,24 @@
   --space-5: var(--space-md-5);
   --space-6: var(--space-md-6);
 
-  --space-element-1: var(--space-element-md-1);
-  --space-element-2: var(--space-element-md-2);
-  --space-element-3: var(--space-element-md-3);
-}
+  --element-1: var(--element-md-1);
+  --element-2: var(--element-md-2);
+  --element-3: var(--element-md-3);
 
-.full-size-lg,
-.full-size-lg
-  *:not(
-    .full-size-xs,
-    .full-size-xs *,
-    .full-size-sm,
-    .full-size-sm *,
-    .full-size-md,
-    .full-size-md *,
-    .full-size-lg,
-    .full-size-lg *,
-    .full-size-xl,
-    .full-size-xl *,
-    .full-size-2xl,
-    .full-size-2xl *
-  ) {
-  --text: var(--text-lg);
-  --text-heading: var(--text-heading-lg);
-  --text-element: var(--text-element-lg);
+  --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);
 
+  --radius-1: calc(var(--border-radius, 1) * var(--element-md-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--element-md-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--element-md-3));
+}
+
+.size-lg,
+.size-lg
+  [class*='density-']:not(.size-lg [class*='size-'] [class*='density-']) {
   --space-1: var(--space-lg-1);
   --space-2: var(--space-lg-2);
   --space-3: var(--space-lg-3);
@@ -228,46 +195,17 @@
   --space-5: var(--space-lg-5);
   --space-6: var(--space-lg-6);
 
-  --space-element-1: var(--space-element-lg-1);
-  --space-element-2: var(--space-element-lg-2);
-  --space-element-3: var(--space-element-lg-3);
-}
+  --element-1: var(--element-lg-1);
+  --element-2: var(--element-lg-2);
+  --element-3: var(--element-lg-3);
 
-.full-size-xl,
-.full-size-xl
-  *:not(
-    .full-size-xs,
-    .full-size-xs *,
-    .full-size-sm,
-    .full-size-sm *,
-    .full-size-md,
-    .full-size-md *,
-    .full-size-lg,
-    .full-size-lg *,
-    .full-size-xl,
-    .full-size-xl *,
-    .full-size-2xl,
-    .full-size-2xl *
-  ) {
-  --text: var(--text-xl);
-  --text-heading: var(--text-heading-xl);
-}
+  --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);
 
-.full-size-2xl,
-.full-size-2xl
-  *:not(
-    .full-size-xs,
-    .full-size-xs *,
-    .full-size-sm,
-    .full-size-sm *,
-    .full-size-md,
-    .full-size-md *,
-    .full-size-lg,
-    .full-size-lg *,
-    .full-size-xl,
-    .full-size-xl *,
-    .full-size-2xl,
-    .full-size-2xl *
-  ) {
-  --text-heading: var(--text-heading-2xl);
+  --radius-1: calc(var(--border-radius, 1) * var(--element-lg-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--element-lg-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--element-lg-3));
 }

package/src/css/styles.css

@@ -0,0 +1,15 @@
+:root,
+.full {
+  --transition: cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
+  --border-width: 1px;
+  --border-radius: 1;
+
+  --font-family: 'IBM Plex Sans', sans-serif;
+  --font-weight: 400;
+
+  --heading-font-family: var(--font-family);
+  --heading-font-weight: 700;
+
+  --button-font-family: var(--font-family);
+  --button-font-weight: 500;
+}

package/src/css/utils.scss

@@ -0,0 +1,16 @@
+$layer: 'fulldev' !default;
+
+@mixin component($name) {
+  @if $layer {
+    @layer #{$layer} {
+      .full.#{$name} {
+        @content;
+      }
+    }
+
+  } @else {
+    .full.#{$name} {
+      @content;
+    }
+  }
+}

package/src/index.ts

@@ -32,31 +32,38 @@ export { default as Video } from './components/base/Video.astro'
 export { default as Heading } from './components/typography/Heading.astro'
 export { default as Label } from './components/typography/Label.astro'
 export { default as Link } from './components/typography/Link.astro'
-export { default as Links } from './components/typography/Links.astro'
 export { default as List } from './components/typography/List.astro'
 export { default as ListItem } from './components/typography/ListItem.astro'
 export { default as Paragraph } from './components/typography/Paragraph.astro'
 export { default as Tagline } from './components/typography/Tagline.astro'
 
-// Wrapper components
-export { default as Body } from './components/wrapper/Body.astro'
-export { default as Card } from './components/wrapper/Card.astro'
-export { default as Deck } from './components/wrapper/Deck.astro'
-export { default as Footer } from './components/wrapper/Footer.astro'
-export { default as Form } from './components/wrapper/Form.astro'
-export { default as Group } from './components/wrapper/Group.astro'
-export { default as Header } from './components/wrapper/Header.astro'
-export { default as Main } from './components/wrapper/Main.astro'
-export { default as Nav } from './components/wrapper/Nav.astro'
-export { default as Prose } from './components/wrapper/Prose.astro'
-export { default as Section } from './components/wrapper/Section.astro'
-export { default as Writeup } from './components/wrapper/Writeup.astro'
+// Structure components
+export { default as Bento } from './components/structure/Bento.astro'
+export { default as Carousel } from './components/structure/Carousel.astro'
+export { default as Grid } from './components/structure/Grid.astro'
+export { default as Group } from './components/structure/Group.astro'
+export { default as Masonry } from './components/structure/Masonry.astro'
+export { default as Split } from './components/structure/Split.astro'
+export { default as Spread } from './components/structure/Spread.astro'
+export { default as Stack } from './components/structure/Stack.astro'
+
+// Segment components
+export { default as Body } from './components/segment/Body.astro'
+export { default as Card } from './components/segment/Card.astro'
+export { default as Deck } from './components/segment/Deck.astro'
+export { default as Footer } from './components/segment/Footer.astro'
+export { default as Form } from './components/segment/Form.astro'
+export { default as Header } from './components/segment/Header.astro'
+export { default as Main } from './components/segment/Main.astro'
+export { default as Nav } from './components/segment/Nav.astro'
+export { default as Prose } from './components/segment/Prose.astro'
+export { default as Section } from './components/segment/Section.astro'
+export { default as Writeup } from './components/segment/Writeup.astro'
 
 // Utility components
 export { default as Block } from './components/_Block.astro'
 export { default as Blocks } from './components/_Blocks.astro'
 export { default as Children } from './components/_Children.astro'
-export { default as DecorativeBox } from './components/utility/DecorativeBox.astro'
 export { default as Head } from './components/utility/Head.astro'
 
 // Layouts

package/src/integration/integration.ts

@@ -1,61 +1,43 @@
-// import type { AstroIntegration } from 'astro'
-// import autoprefixer from 'autoprefixer'
-// import postcssNesting from 'postcss-nesting'
-// import postcssPresetEnv from 'postcss-preset-env'
-// import { mergeDeep } from 'remeda'
-// import virtual from 'vite-plugin-virtual'
+import type { AstroIntegration } from 'astro'
+import { mergeDeep } from 'remeda'
+import virtual from 'vite-plugin-virtual'
 
-// const defaultConfig = {
-//   color: {
-//     accent: 'indigo',
-//     base: 'slate',
-//   },
-//   size: {
-//     scale: 1,
-//     space: 1,
-//     radius: 1,
-//     text: 1,
-//   },
-//   theme: {
-//     border: '1px',
-//   },
-//   font: {
-//     heading.text: 'IMB Plex Sans:700',
-//     subheading.text: 'IMB Plex Sans:700',
-//     text: 'IMB Plex Sans:400',
-//     tagline: 'IMB Plex Sans:400',
-//     button: 'IMB Plex Sans:500',
-//   },
-// }
+const defaultConfig = {
+  layer: 'fulldev',
+}
 
-// export default function fulluiIntegration(userConfig: any): AstroIntegration {
-//   const config: any = mergeDeep(defaultConfig || {}, userConfig || {})
+export default function fulluiIntegration(
+  userConfig: any = {}
+): AstroIntegration {
+  const config: any = mergeDeep(defaultConfig || {}, userConfig || {})
 
-//   return {
-//     name: '/integration',
-//     hooks: {
-//       'astro:config:setup': async ({
-//         // config: astroConfig,
-//         updateConfig,
-//         injectScript,
-//       }) => {
-//         updateConfig({
-//           vite: {
-//             plugins: [
-//               virtual({
-//                 'virtual:/config': `export default ${JSON.stringify(config)}`,
-//               }) as any,
-//             ],
-//             css: {
-//               postcss: {
-//                 plugins: [postcssNesting, postcssPresetEnv, autoprefixer],
-//               },
-//             },
-//           },
-//         })
+  return {
+    name: '/integration',
+    hooks: {
+      'astro:config:setup': async ({
+        // config: astroConfig,
+        updateConfig,
+        injectScript,
+      }) => {
+        updateConfig({
+          vite: {
+            plugins: [
+              virtual({
+                'virtual:/config': `export default ${JSON.stringify(config)}`,
+              }) as any,
+            ],
+            css: {
+              preprocessorOptions: {
+                scss: {
+                  additionalData: `$layer: ${config.layer};`,
+                },
+              },
+            },
+          },
+        })
 
-//         // injectScript('page-ssr', 'import "fulldev-ui/css";')
-//       },
-//     },
-//   }
-// }
+        // injectScript('page-ssr', 'import "fulldev-ui/css";')
+      },
+    },
+  }
+}

package/src/layouts/Layout.astro

@@ -1,8 +1,8 @@
 ---
 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 Body from '../components/wrapper/Body.astro'
 
 interface Props extends ComponentProps<typeof Tag> {
   title: ComponentProps<typeof Head>['title']
@@ -16,10 +16,14 @@ const { title, description, image, theme, head, body, ...rest } = Astro.props
 ---
 
 <Tag
-  class:list={['full-layout']}
+  class={[
+    'layout',
+    {
+      [`theme-${theme}`]: theme,
+    },
+  ]}
   as="html"
   if={true}
-  {theme}
   {...rest}
 >
   <Head

package/src/types/Structuremorphic.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'astro/types'
+import type Carousel from '../components/structure/Carousel.astro'
+import type Stack from '../components/structure/Column.astro'
+
+export type Structuremorphic<
+  S extends
+    | 'bento'
+    | 'carousel'
+    | 'grid'
+    | 'masonry'
+    | 'split'
+    | 'spread'
+    | 'stack',
+> = S extends 'stack'
+  ? ComponentProps<typeof Stack>
+  : S extends 'carousel'
+    ? ComponentProps<typeof Carousel>
+    : undefined

package/src/components/typography/Links.astro

@@ -1,15 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import type { Pluralmorphic } from '../../types/Pluralmorphic'
-import Plural from '../_Plural.astro'
-import Link from './Link.astro'
-
-type Props = Pluralmorphic<ComponentProps<typeof Link>>
-
-const { props } = Astro
----
-
-<Plural
-  component={Link}
-  {...props}
-/>

package/src/components/typography/_Typography.astro

@@ -1,28 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Children from '../_Children.astro'
-import Tag from '../_Tag.astro'
-
-type Props<As extends HTMLTag> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
-    html?: string
-    text?: string
-    variant?: 'base' | 'muted'
-  }
-
-const { ...rest } = Astro.props
----
-
-<Tag
-  class:list={['full-typography']}
-  {...rest}
->
-  <slot name="before" />
-  <Children {...rest} />
-  <slot />
-</Tag>
-
-<style is:global lang="scss">
-  .full-typography {
-  }
-</style>