fulldev-ui 0.3.0-beta.3 → 0.3.3

package/src/components/segment/Group.astro

@@ -1,29 +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> & {
-    color?: 'base' | 'brand'
-    size?: 'sm' | 'md' | 'lg'
-    structure?: 'row' | 'column' | 'wrap'
-  }
-
-const { ...rest } = Astro.props
----
-
-<Component
-  class:list={['group']}
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('group') {
-    justify-content: stretch;
-    align-items: center;
-  }
-</style>

package/src/components/typography/todo.md

@@ -1,3 +0,0 @@
-# New components
-- Highlight (for highlighint stuff in headings for example, with a primary background etc. Should accept same variants as badge)
-

package/src/css/color.css

@@ -1,88 +0,0 @@
-: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

@@ -1,20 +0,0 @@
-.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

@@ -1,153 +0,0 @@
-: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

@@ -1 +0,0 @@
-

package/src/css/props/position.scss

@@ -1,33 +0,0 @@
-.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

@@ -1 +0,0 @@
-

package/src/css/props/structure.scss

@@ -1,228 +0,0 @@
-/* Horizontal */
-.structure-row {
-  display: flex;
-
-  & > .full {
-    margin-top: 0;
-  }
-}
-
-/* Vertical */
-.structure-column {
-  display: flex;
-  flex-direction: column;
-
-  & > .full {
-    margin-left: 0;
-  }
-}
-
-/* Horizontal with equa columns */
-.structure-split {
-  display: grid;
-  grid-template-columns: 1fr;
-
-  & > .full {
-    margin: 0;
-  }
-
-  @media (min-width: 1024px) {
-    grid-auto-columns: 1fr;
-    grid-auto-flow: column;
-    column-gap: var(--space-6);
-
-    & > .full {
-      margin-top: 0;
-    }
-  }
-}
-
-/* Horizontal and wrapping */
-.structure-wrap {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: stretch;
-  gap: var(--space-2);
-}
-
-/* Horizontal with space-between */
-.structure-spread {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: stretch;
-  gap: var(--space-4);
-  width: 100%;
-
-  & > .full {
-    width: auto;
-  }
-}
-
-/* Equal columns and rows */
-.structure-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%;
-}
-
-/* Equal rows, but not columns */
-.structure-bento {
-  display: grid;
-  position: relative;
-  grid-template-columns: 1fr;
-  width: 100%;
-
-  @media (min-width: 1024px) {
-    grid-template-columns: 1fr 1fr 1fr;
-
-    & > *:nth-child(2n) {
-      grid-column-start: span 2;
-    }
-  }
-}
-
-/* Equal columns, but not rows */
-.structure-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);
-  }
-}
-
-/* Equal columns, scrollable horizontally */
-.structure-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;
-  }
-}
-
-@mixin space-x {
-  > {
-    .full + .full {
-      margin-left: var(--space-5);
-    }
-
-    .full + .group,
-    .full + .button,
-    .full + .switch {
-      margin-left: var(--space-4);
-    }
-
-    .full + .heading,
-    .full + .label,
-    .full + .link,
-    .full + .list,
-    .full + .paragraph,
-    .full + .tagline,
-    .full + .input,
-    .full + .badge,
-    .full + .rating {
-      margin-left: var(--space-3);
-    }
-
-    .paragraph + .paragraph,
-    .button:not(.variant-link) + .button:not(.variant-link),
-    .input + .button {
-      margin-left: var(--space-2);
-    }
-
-    .label + .input {
-      margin-left: var(--space-1);
-    }
-
-    .image + .full,
-    .icon + .full {
-      margin-left: var(--space-5);
-    }
-  }
-}
-
-@mixin space-y {
-  > {
-    .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:not(.variant-link) + .button:not(.variant-link),
-    .input + .button {
-      margin-top: var(--space-2);
-    }
-
-    .label + .input {
-      margin-top: var(--space-1);
-    }
-
-    .image + .full,
-    .icon + .full {
-      margin-top: var(--space-5);
-    }
-  }
-}
-
-/* For ALL */
-.structure-split {
-  @media (max-width: 1023.999px) {
-    @include space-y;
-  }
-}
-
-.structure-row {
-  @include space-x;
-}
-
-.structure-column {
-  @include space-y;
-}

package/src/css/props/variant.scss

@@ -1,130 +0,0 @@
-.variant-solid {
-  background-color: var(--solid);
-  color: var(--solid-contrast);
-
-  .full {
-    color: var(--background);
-  }
-
-  &:is(a, button),
-  &[href] {
-    &:hover {
-      background-color: var(--solid-hover);
-    }
-
-    &:active {
-      background-color: var(--solid-hover);
-    }
-  }
-}
-
-.variant-soft {
-  background-color: var(--background-soft);
-  color: var(--foreground);
-
-  &:is(a, button),
-  &[href] {
-    &:hover {
-      background-color: var(--background-hover);
-    }
-
-    &:active {
-      background-color: var(--background-active);
-    }
-  }
-
-  &.contrast {
-    color: var(--foreground-contrast);
-  }
-}
-
-.variant-surface {
-  // box-shadow: inset 0 0 0 1px var(--border-outline);
-  border: 1px solid var(--border-outline);
-  background-color: var(--background-surface);
-  color: var(--foreground);
-
-  &:is(a, button),
-  &[href] {
-    &:hover {
-      // box-shadow: inset 0 0 0 1px var(--border-hover);
-      border: 1px solid var(--border-hover);
-      background-color: var(--background-surface);
-    }
-
-    &:active {
-      // box-shadow: inset 0 0 0 1px var(--border-hover);
-      border: 1px solid var(--border-hover);
-      background-color: var(--background-active);
-    }
-  }
-
-  &.contrast {
-    color: var(--foreground-contrast);
-  }
-}
-
-.variant-outline {
-  // box-shadow: inset 0 0 0 1px var(--border-outline);
-  border: 1px solid var(--border-outline);
-  color: var(--foreground);
-
-  &:is(a, button),
-  &[href] {
-    &:hover {
-      // box-shadow: inset 0 0 0 1px var(--border-hover);
-      border: 1px solid var(--border-hover);
-      background-color: var(--background-surface);
-    }
-
-    &:active {
-      // box-shadow: inset 0 0 0 1px var(--border-hover);
-      border: 1px solid var(--border-hover);
-      background-color: var(--background-active);
-    }
-  }
-
-  &.contrast {
-    color: var(--foreground-contrast);
-  }
-}
-
-.variant-ghost {
-  box-shadow: none;
-
-  &:is(a, button),
-  &[href] {
-    &:hover {
-      background-color: var(--background-soft);
-    }
-
-    &:active {
-      background-color: var(--background-active);
-    }
-  }
-
-  &.contrast {
-    color: var(--foreground-contrast);
-  }
-}
-
-.variant-subtle {
-  // box-shadow: inset 0 0 0 1px var(--border);
-  border: 1px solid var(--border);
-  background-color: var(--background-subtle);
-  color: var(--foreground);
-
-  &:is(a, button),
-  &[href] {
-    &:hover {
-      // box-shadow: inset 0 0 0 1px var(--border-hover);
-      border: 1px solid var(--border-hover);
-    }
-  }
-
-
-
-  &.contrast {
-    color: var(--foreground-contrast);
-  }
-}