@collectivetrait/lineaui 0.0.0-stage → 1.0.0

package/scss/blocks/_avatar.scss

@@ -0,0 +1,104 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'avatar') {
+  @layer blocks {
+    @include b.block('avatar') {
+      --_size: 40px;
+
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--_size);
+      height: var(--_size);
+      border-radius: var(--r-circle);
+      background-color: var(--primary-subtle);
+      color: var(--primary-text);
+      font: 600 calc(var(--_size) * 0.4)/1 var(--f-ui);
+      flex-shrink: 0;
+      position: relative;
+
+      @include b.element('img') {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: inherit;
+        overflow: hidden;
+      }
+
+      @include b.element('initials') {
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+      }
+
+      @include b.element('status') {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: 25%;
+        height: 25%;
+        min-width: 8px;
+        min-height: 8px;
+        border-radius: var(--r-circle);
+        background-color: var(--_status-color, var(--success));
+        box-shadow: 0 0 0 2px var(--surface);
+
+        &--success { --_status-color: var(--success); }
+        &--warning { --_status-color: var(--warning); }
+        &--danger  { --_status-color: var(--danger); }
+        &--neutral { --_status-color: var(--c-subtle); }
+      }
+
+      @include b.modifier('xs') { --_size: 24px; }
+      @include b.modifier('sm') { --_size: 32px; }
+      @include b.modifier('md') { --_size: 40px; }
+      @include b.modifier('lg') { --_size: 48px; }
+      @include b.modifier('xl') { --_size: 64px; }
+
+      @include b.modifier('square') {
+        border-radius: var(--r-md);
+      }
+    }
+
+    @include b.block('avatar-group') {
+      display: flex;
+      align-items: center;
+
+      > .#{s.$prefix}avatar {
+        box-shadow: 0 0 0 2px var(--surface);
+        margin-left: -8px;
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+
+      @include b.element('more') {
+        --_size: 40px;
+
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--_size);
+        height: var(--_size);
+        border-radius: var(--r-circle);
+        background-color: var(--surface-raised);
+        color: var(--c-muted);
+        font: 500 var(--t-body-sm-s)/1 var(--f-mono);
+        box-shadow: 0 0 0 2px var(--surface);
+        margin-left: -8px;
+      }
+
+      @include b.modifier('spread') {
+        > .#{s.$prefix}avatar {
+          margin-left: 0;
+        }
+
+        .#{s.$prefix}avatar-group__more {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}

package/scss/blocks/_badge.scss

@@ -0,0 +1,72 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+@use '../tools/role-engine' as role;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'badge') {
+  @layer blocks {
+    @include b.block('badge') {
+      --_fill: var(--surface-raised);
+      --_on: var(--text);
+      --_text: var(--c-muted);
+      --_subtle: var(--surface-sunken);
+
+      display: inline-block;
+      height: 1.5rem;
+      padding-inline: 0.5rem;
+      border-radius: 999px;
+      font: 500 0.75rem / 1.5rem var(--f-ui);
+      background: var(--_subtle);
+      color: var(--_text);
+      white-space: nowrap;
+      vertical-align: middle;
+
+      @include b.modifier('solid') {
+        background: var(--_fill);
+        color: var(--_on);
+      }
+
+      @include b.modifier('outline') {
+        background: transparent;
+        border: var(--bd1) solid currentColor;
+      }
+
+      @include b.modifier('sm') {
+        padding: 0 var(--s-h);
+        font-size: 10px;
+        line-height: 16px;
+      }
+
+      @include b.modifier('pill') {
+        border-radius: 999px;
+      }
+
+      @include b.modifier('count') {
+        font: 500 0.75rem / 1.5rem var(--f-mono);
+        padding-inline: 0.375rem;
+        min-width: 1.5rem;
+        text-align: center;
+      }
+
+      @include b.element('dot') {
+        display: inline-block;
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 50%;
+        background: currentColor;
+        vertical-align: middle;
+        margin-top: -2px;
+        margin-right: 0.25rem;
+      }
+
+      @include b.element('icon') {
+        width: 1em;
+        height: 1em;
+        flex: none;
+      }
+
+      // Role modifiers
+      @include role.role-modifiers;
+    }
+  }
+}

package/scss/blocks/_breadcrumb.scss

@@ -0,0 +1,65 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'breadcrumb') {
+  @layer blocks {
+    @include b.block('breadcrumb') {
+
+      @include b.element('list') {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        font: 400 0.875rem/1.5rem var(--f-ui);
+        color: var(--c-muted);
+      }
+
+      @include b.element('item') {
+        display: inline-flex;
+        align-items: center;
+
+        & + &::before {
+          content: '/';
+          margin-right: 0.5rem;
+          color: var(--c-subtle);
+        }
+      }
+
+      @include b.element('link') {
+        color: var(--c-muted);
+        text-decoration: none;
+
+        &:hover {
+          color: var(--text);
+          text-decoration: underline;
+        }
+      }
+
+      @include b.element('current') {
+        color: var(--text);
+      }
+
+      @include b.modifier('sm') {
+        .#{s.$prefix}breadcrumb__list {
+          font-size: var(--t-meta-s);
+          line-height: var(--t-meta-lh);
+        }
+      }
+
+      @include b.modifier('truncate') {
+        .#{s.$prefix}breadcrumb__list {
+          flex-wrap: nowrap;
+        }
+
+        .#{s.$prefix}breadcrumb__item {
+          &:not(:first-child):not(:last-child):not(:nth-last-child(2)) {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}

package/scss/blocks/_button-group.scss

@@ -0,0 +1,73 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'button-group') {
+  @layer blocks {
+    @include b.block('button-group') {
+      display: inline-flex;
+      flex-wrap: wrap;
+      gap: var(--s1);
+
+      @include b.modifier('attached') {
+        gap: 0;
+
+        .#{s.$prefix}button {
+          border-radius: 0;
+
+          &:not(:first-child) {
+            margin-left: -1px;
+          }
+
+          &:first-child {
+            border-start-start-radius: var(--r-md);
+            border-end-start-radius: var(--r-md);
+          }
+
+          &:last-child {
+            border-start-end-radius: var(--r-md);
+            border-end-end-radius: var(--r-md);
+          }
+        }
+      }
+
+      @include b.modifier('vertical') {
+        flex-direction: column;
+
+        &.#{s.$prefix}button-group--attached {
+          .#{s.$prefix}button {
+            border-radius: 0;
+
+            &:not(:first-child) {
+              margin-left: 0;
+              border-top: 0;
+            }
+
+            &:first-child {
+              border-start-start-radius: var(--r-md);
+              border-start-end-radius: var(--r-md);
+            }
+
+            &:last-child {
+              border-end-start-radius: var(--r-md);
+              border-end-end-radius: var(--r-md);
+            }
+          }
+        }
+      }
+
+      @include b.modifier('fill') {
+        width: 100%;
+
+        .#{s.$prefix}button {
+          flex: 1 1;
+          min-width: 0;
+        }
+
+        &.#{s.$prefix}button-group--vertical .#{s.$prefix}button {
+          flex: auto;
+        }
+      }
+    }
+  }
+}

package/scss/blocks/_button.scss

@@ -0,0 +1,212 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+@use '../tools/role-engine' as role;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'button') {
+  @layer blocks {
+    @include b.block('button') {
+      --_fill: var(--primary);
+      --_on: var(--on-primary);
+      --_text: var(--primary-text);
+      --_subtle: var(--primary-subtle);
+      --_h: 2.5rem;
+      --_px: 1rem;
+      --_fs: 0.9375rem;
+      --_lh: 1.5rem;
+
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      height: var(--_h);
+      padding-inline: var(--_px);
+      border: 0;
+      font: 500 var(--_fs) / var(--_lh) var(--f-ui);
+      white-space: nowrap;
+      cursor: pointer;
+      background: var(--_fill);
+      color: var(--_on);
+      text-decoration: none;
+      transition: background-color .12s, box-shadow .12s, color .12s;
+      text-box: trim-both cap alphabetic;
+
+      &:hover {
+        background: color-mix(in srgb, var(--_fill) 88%, var(--text));
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--focus);
+        outline-offset: 2px;
+      }
+
+      &:disabled,
+      &[aria-disabled="true"] {
+        background: var(--surface-raised);
+        color: var(--c-subtle);
+        border: var(--bd1) solid var(--border);
+        cursor: not-allowed;
+      }
+
+      &[aria-busy="true"] {
+        cursor: progress;
+
+        .#{s.$prefix}button__spinner {
+          display: inline-flex;
+        }
+      }
+
+      // Elements
+      @include b.element('label') {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      @include b.element('icon') {
+        font-size: 1rem;
+        flex: none;
+      }
+
+      @include b.element('spinner') {
+        display: none;
+        align-items: center;
+      }
+
+      @include b.element('badge') {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      // Variant modifiers
+      @include b.modifier('neutral') {
+        --_fill: var(--surface-raised);
+        --_on: var(--text);
+        --_text: var(--text);
+        --_subtle: var(--surface-sunken);
+        border: var(--bd1) solid var(--border-control);
+      }
+
+      @include b.modifier('subtle') {
+        background: var(--_subtle);
+        color: var(--_text);
+        border: 0;
+
+        &:hover {
+          background: color-mix(in srgb, var(--_subtle) 80%, var(--_text));
+        }
+      }
+
+      @include b.modifier('outline') {
+        background: transparent;
+        color: var(--_text);
+        border: var(--bd1) solid var(--_text);
+
+        &:hover {
+          background: transparent;
+        }
+      }
+
+      @include b.modifier('ghost') {
+        background: transparent;
+        color: var(--_text);
+        border: 0;
+
+        &:hover {
+          background: var(--_subtle);
+        }
+      }
+
+      @include b.modifier('link') {
+        background: transparent;
+        color: var(--_text);
+        padding-inline: 0;
+        text-decoration: underline;
+        text-underline-offset: .2em;
+        border: 0;
+
+        &:hover {
+          background: transparent;
+          text-decoration-thickness: 2px;
+        }
+      }
+
+      // Size modifiers
+      @include b.modifier('sm') {
+        --_h: 2rem;
+        --_px: 0.75rem;
+        --_fs: 0.875rem;
+        --_lh: 1.25rem;
+      }
+
+      @include b.modifier('lg') {
+        --_h: 3rem;
+        --_px: 1.5rem;
+        --_fs: 1rem;
+        --_lh: 1.5rem;
+      }
+
+      // Layout modifiers
+      @include b.modifier('block') {
+        width: 100%;
+      }
+
+      // Responsive size modifiers
+      @each $bp, $val in s.$breakpoints {
+        @media (min-width: #{$val}) {
+          &--sm\@#{$bp} {
+            --_h: 2rem;
+            --_px: 0.75rem;
+            --_fs: 0.875rem;
+            --_lh: 1.25rem;
+          }
+
+          &--lg\@#{$bp} {
+            --_h: 3rem;
+            --_px: 1.5rem;
+            --_fs: 1rem;
+            --_lh: 1.5rem;
+          }
+
+          &--block\@#{$bp} {
+            width: 100%;
+          }
+        }
+      }
+
+      @include b.modifier('icon') {
+        padding-inline: 0;
+        width: var(--_h);
+      }
+
+      @include b.modifier('pill') {
+        border-radius: var(--r-pill);
+      }
+
+      @include b.modifier('square') {
+        border-radius: 0;
+      }
+
+      @include b.modifier('rounded-sm') {
+        border-radius: var(--r-sm);
+      }
+
+      @include b.modifier('rounded-md') {
+        border-radius: var(--r-md);
+      }
+
+      @include b.modifier('rounded-lg') {
+        border-radius: var(--r-lg);
+      }
+
+      @include b.modifier('rounded-xl') {
+        border-radius: var(--r-xl);
+      }
+
+      // Role modifiers
+      @include role.role-modifiers;
+    }
+
+
+  }
+}

package/scss/blocks/_card.scss

@@ -0,0 +1,146 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+@use '../tools/rhythm' as r;
+@use '../tools/role-engine' as role;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'card') {
+  @layer blocks {
+    @include b.block('card') {
+      --_bg: var(--surface);
+      --_border-color: var(--border);
+      --_pad: var(--s3);
+
+      display: flex;
+      flex-direction: column;
+      padding: var(--_pad);
+      background-color: var(--_bg);
+      overflow: hidden;
+      position: relative;
+      outline: var(--bd1) solid var(--_border-color);
+      outline-offset: calc(-1 * var(--bd1));
+
+      @include b.element('media') {
+        margin: calc(-1 * var(--_pad));
+        margin-bottom: 0;
+      }
+
+      @include b.element('media-object') {
+        align-content: center;
+      }
+
+      @include b.element('header') {
+        margin-bottom: 1.5rem;
+      }
+
+      @include b.element('eyebrow') {
+        font: var(--t-meta-s)/var(--t-meta-lh) var(--f-mono);
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-weight: 500;
+        color: var(--c-muted);
+        margin-bottom: var(--s-h);
+      }
+
+      @include b.element('title') {
+        font: 600 var(--t-h4-s)/var(--t-h4-lh) var(--f-ui);
+        margin: 0;
+      }
+
+      @include b.element('subtitle') {
+        font-size: var(--t-body-sm-s);
+        line-height: var(--t-body-sm-lh);
+        color: var(--c-muted);
+      }
+
+      @include b.element('body') {
+        flex: 1;
+        margin-bottom: 1.5rem;
+      }
+
+      @include b.element('footer') {
+        display: flex;
+        flex-direction: column;
+        margin-top: auto;
+      }
+
+      @include b.element('actions') {
+        display: flex;
+        gap: var(--s1);
+      }
+
+      @include b.element('link') {
+        text-decoration: none;
+        color: inherit;
+
+        &::after {
+          content: '';
+          position: absolute;
+          inset: 0;
+          z-index: 1;
+        }
+      }
+
+      // Variant modifiers
+      @include b.modifier('flat') {
+        outline: 0;
+      }
+
+      @include b.modifier('shadow-1') { box-shadow: var(--sh1); }
+      @include b.modifier('shadow-2') { box-shadow: var(--sh2); }
+      @include b.modifier('shadow-3') { box-shadow: var(--sh3); }
+      @include b.modifier('shadow-4') { box-shadow: var(--sh4); }
+
+      @include b.modifier('interactive') {
+        cursor: pointer;
+        overflow: visible;
+        box-shadow: var(--sh1);
+        transition: box-shadow var(--dur-fast) var(--e-standard),
+                    transform var(--dur-fast) var(--e-standard);
+
+        &:hover {
+          box-shadow: var(--sh3);
+          transform: translateY(-2px);
+        }
+      }
+
+      // Layout modifiers
+      @include b.modifier('horizontal') {
+        flex-direction: row;
+
+        .#{s.$prefix}card__media {
+          width: 40%;
+          max-width: 200px;
+          flex-shrink: 0;
+          margin: calc(-1 * var(--_pad));
+          margin-right: 1.5rem;
+        }
+
+        .#{s.$prefix}card__media-object {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      @include b.modifier('pad-sm') { --_pad: var(--s2); }
+      @include b.modifier('pad-md') { --_pad: var(--s3); }
+      @include b.modifier('pad-lg') { --_pad: var(--s4); }
+
+      // Role modifiers
+      @include role.role-modifiers;
+
+      @include b.modifier('subtle') {
+        --_bg: var(--_subtle, var(--surface-sunken));
+      }
+
+      // Selected state
+      &[aria-selected="true"],
+      &:has(:checked) {
+        --_border-color: var(--primary);
+        outline: var(--bd2) solid var(--_border-color);
+        outline-offset: calc(-1 * var(--bd2));
+      }
+    }
+  }
+}