@collectivetrait/lineaui 0.0.0-stage → 1.0.0

package/scss/blocks/_site-footer.scss

@@ -0,0 +1,135 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+@use '../tools/rhythm' as r;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'site-footer') {
+  @layer blocks {
+    @include b.block('site-footer') {
+      font: 400 0.875rem/2rem var(--f-ui);
+      color: var(--c-muted);
+
+      @include b.element('inner') {
+        max-width: var(--container-wide);
+        margin-inline: auto;
+      }
+
+      @include b.element('brand') {
+        margin-bottom: var(--s4);
+      }
+
+      @include b.element('columns') {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
+        gap: var(--s4) var(--s4);
+        margin-bottom: r.lines(2);
+      }
+
+      @include b.element('heading') {
+        font-weight: 600;
+        font-size: var(--t-body-s);
+        line-height: var(--t-body-lh);
+        margin-bottom: var(--s2);
+        color: var(--text);
+      }
+
+      @include b.element('links') {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--s1);
+      }
+
+      @include b.element('link') {
+        color: var(--c-muted);
+        text-decoration: none;
+        transition: color var(--dur-fast) var(--e-standard);
+
+        &:hover {
+          color: var(--link-hover);
+        }
+      }
+
+      @include b.element('description') {
+        margin-top: 0;
+      }
+
+      @include b.element('social') {
+        display: flex;
+        gap: var(--s2);
+        margin-bottom: var(--s4);
+      }
+
+      @include b.element('bottom') {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--s2);
+        padding-top: calc(var(--s3) - var(--bd1));
+        border-top: var(--bd1) solid var(--border);
+      }
+
+      @include b.element('legal') {
+        font-size: var(--t-meta-s);
+        line-height: var(--t-meta-lh);
+        color: var(--c-subtle);
+      }
+
+      @include b.modifier('compact') {
+        .#{s.$prefix}site-footer__columns {
+          margin-bottom: r.lines(1);
+        }
+      }
+
+      @include b.modifier('center') {
+        text-align: center;
+
+        .#{s.$prefix}site-footer__columns {
+          justify-items: center;
+        }
+
+        .#{s.$prefix}site-footer__links {
+          align-items: center;
+        }
+
+        .#{s.$prefix}site-footer__social {
+          justify-content: center;
+        }
+
+        .#{s.$prefix}site-footer__bottom {
+          justify-content: center;
+        }
+      }
+
+      @include b.modifier('inverse') {
+        background: var(--surface-inverse);
+        color: var(--c-inverse);
+
+        .#{s.$prefix}site-footer__heading {
+          color: var(--c-inverse);
+        }
+
+        .#{s.$prefix}site-footer__link {
+          color: var(--c-inverse);
+          opacity: 0.7;
+
+          &:hover {
+            opacity: 1;
+          }
+        }
+
+        .#{s.$prefix}site-footer__bottom {
+          border-top-color: rgb(255 255 255 / 0.15);
+        }
+
+        .#{s.$prefix}site-footer__legal {
+          color: var(--c-inverse);
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+}

package/scss/blocks/_skeleton.scss

@@ -0,0 +1,63 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'skeleton') {
+  @layer blocks {
+    @include b.block('skeleton') {
+      display: flex;
+      flex-direction: column;
+      gap: var(--s1);
+
+      @include b.element('line') {
+        height: 24px;
+        background-color: var(--surface-raised);
+        border-radius: var(--r-sm);
+        animation: #{s.$prefix}pulse 1.5s ease-in-out infinite alternate;
+      }
+
+      @include b.element('block') {
+        background-color: var(--surface-raised);
+        border-radius: var(--r-md);
+        animation: #{s.$prefix}pulse 1.5s ease-in-out infinite alternate;
+      }
+
+      @include b.element('circle') {
+        border-radius: var(--r-circle);
+        background-color: var(--surface-raised);
+        animation: #{s.$prefix}pulse 1.5s ease-in-out infinite alternate;
+        aspect-ratio: 1;
+      }
+
+      // Text rhythm variants
+      @include b.modifier('text-body') {
+        .#{s.$prefix}skeleton__line {
+          height: 24px;
+        }
+      }
+
+      @include b.modifier('text-sm') {
+        .#{s.$prefix}skeleton__line {
+          height: 20px;
+        }
+      }
+
+      @include b.modifier('text-h2') {
+        .#{s.$prefix}skeleton__line {
+          height: 48px;
+        }
+      }
+
+      @include b.modifier('text-h3') {
+        .#{s.$prefix}skeleton__line {
+          height: 32px;
+        }
+      }
+    }
+
+    @keyframes #{s.$prefix}pulse {
+      from { opacity: 0.4; }
+      to { opacity: 1; }
+    }
+  }
+}

package/scss/blocks/_spinner.scss

@@ -0,0 +1,44 @@
+@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, 'spinner') {
+  @layer blocks {
+    @include b.block('spinner') {
+      --_fill: currentColor;
+      --_size: 24px;
+
+      display: inline-block;
+      width: var(--_size);
+      height: var(--_size);
+      border: 2px solid transparent;
+      border-top-color: var(--_fill);
+      border-left-color: var(--_fill);
+      border-radius: var(--r-circle);
+      animation: #{s.$prefix}spin 1s linear infinite;
+
+      @include b.element('label') {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+      }
+
+      @include b.modifier('sm') { --_size: 16px; }
+      @include b.modifier('md') { --_size: 24px; }
+      @include b.modifier('lg') { --_size: 32px; }
+
+      @include role.role-modifiers;
+    }
+
+    @keyframes #{s.$prefix}spin {
+      to { transform: rotate(360deg); }
+    }
+  }
+}

package/scss/blocks/_stat.scss

@@ -0,0 +1,111 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'stat') {
+  @layer blocks {
+    @include b.block('stat') {
+      padding: 1.5rem;
+      background: var(--surface);
+      border-radius: var(--r-xs);
+      outline: var(--bd1) solid var(--border);
+      outline-offset: calc(-1 * var(--bd1));
+
+      @include b.element('icon') {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border-radius: var(--r-md);
+        background-color: var(--surface-sunken);
+        color: var(--c-muted);
+        margin-bottom: var(--s1);
+      }
+
+      @include b.element('label') {
+        display: block;
+        font: 500 0.875rem/1.5rem var(--f-ui);
+        color: var(--c-muted);
+      }
+
+      @include b.element('value') {
+        display: block;
+        font: 600 2rem/2.5rem var(--f-ui);
+        font-variant-numeric: tabular-nums;
+      }
+
+      @include b.element('unit') {
+        font-size: var(--t-body-s);
+        font-weight: 400;
+        line-height: 1rem;
+        color: var(--c-muted);
+        margin-left: var(--s-h);
+      }
+
+      @include b.element('delta') {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        font: 500 0.875rem/1.5rem var(--f-ui);
+        font-variant-numeric: tabular-nums;
+
+        > :last-child {
+          color: var(--c-subtle);
+          font-weight: 400;
+        }
+
+        @include b.modifier('positive') {
+          color: var(--success-text);
+        }
+
+        @include b.modifier('negative') {
+          color: var(--danger-text);
+        }
+      }
+
+      @include b.element('meta') {
+        font-size: var(--t-meta-s);
+        line-height: var(--t-meta-lh);
+        color: var(--c-subtle);
+      }
+
+      @include b.element('chart') {
+        height: 40px;
+        margin-top: var(--s1);
+      }
+
+      @include b.modifier('sm') {
+        .#{s.$prefix}stat__value {
+          font-size: var(--t-h4-s);
+          line-height: var(--t-h4-lh);
+        }
+      }
+
+      @include b.modifier('lg') {
+        .#{s.$prefix}stat__value {
+          font-size: var(--t-h1-s);
+          line-height: var(--t-h1-lh);
+        }
+      }
+
+      @include b.modifier('flat') {
+        padding: 0;
+        background: none;
+        border-radius: 0;
+        outline: 0;
+      }
+
+      @include b.modifier('inline') {
+        display: flex;
+        align-items: center;
+        gap: var(--s3);
+
+        .#{s.$prefix}stat__value {
+          font-size: var(--t-h3-s);
+          line-height: var(--t-h3-lh);
+        }
+      }
+    }
+  }
+}

package/scss/blocks/_steps.scss

@@ -0,0 +1,147 @@
+@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, 'steps') {
+  @layer blocks {
+    @include b.block('steps') {
+      --_fill: var(--primary);
+      --_on: var(--on-primary);
+
+      display: flex;
+      gap: 0.5rem;
+      list-style: none;
+      align-items: center;
+      flex-wrap: wrap;
+
+      @include b.element('item') {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        height: 2rem;
+        font: 500 0.875rem/1.25rem var(--f-ui);
+        color: var(--c-subtle);
+
+        &.is-complete {
+          color: var(--c-muted);
+        }
+
+        &.is-complete .#{s.$prefix}steps__marker {
+          background: var(--success-subtle);
+          color: var(--success-text);
+          border: 0;
+        }
+
+        &[aria-current="step"] {
+          color: var(--text);
+        }
+
+        &[aria-current="step"] .#{s.$prefix}steps__marker {
+          background: var(--_fill);
+          color: var(--_on);
+          border: 0;
+        }
+
+        &.is-error .#{s.$prefix}steps__marker {
+          background: var(--danger);
+          color: var(--on-danger);
+          border: 0;
+        }
+      }
+
+      @include b.element('marker') {
+        width: 1.5rem;
+        height: 1.5rem;
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+        font: 500 0.75rem/1rem var(--f-mono);
+        border: var(--bd1) solid var(--border-control);
+        flex-shrink: 0;
+      }
+
+      @include b.element('connector') {
+        width: 1.5rem;
+        height: 1px;
+        background: var(--border-control);
+        flex-shrink: 0;
+      }
+
+      @include b.element('label') {
+        font: 500 0.875rem/1.25rem var(--f-ui);
+      }
+
+      @include b.element('description') {
+        font-size: var(--t-meta-s);
+        line-height: var(--t-meta-lh);
+        color: var(--c-muted);
+      }
+
+      // Vertical layout
+      @include b.modifier('vertical') {
+        flex-direction: column;
+        align-items: flex-start;
+        flex-wrap: nowrap;
+
+        .#{s.$prefix}steps__item {
+          flex-direction: row;
+          align-items: flex-start;
+          height: auto;
+          padding-bottom: var(--s4);
+          position: relative;
+        }
+
+        .#{s.$prefix}steps__connector {
+          position: absolute;
+          left: 0.6875rem;
+          top: 1.5rem;
+          bottom: 0;
+          width: 0.125rem;
+          height: auto;
+        }
+
+        .#{s.$prefix}steps__label {
+          padding-top: calc((1.5rem - 1.25rem) / 2);
+        }
+      }
+
+      @include b.modifier('dots') {
+        gap: 0.25rem;
+
+        .#{s.$prefix}steps__marker {
+          width: 0.5rem;
+          height: 0.5rem;
+          font-size: 0;
+          background: var(--border-control);
+          border: 0;
+        }
+
+        .#{s.$prefix}steps__item.is-complete .#{s.$prefix}steps__marker {
+          background: var(--success);
+        }
+
+        .#{s.$prefix}steps__item[aria-current="step"] .#{s.$prefix}steps__marker {
+          width: 0.75rem;
+          height: 0.75rem;
+          background: var(--_fill);
+        }
+
+        .#{s.$prefix}steps__label {
+          display: none;
+        }
+      }
+
+      @include b.modifier('compact') {
+        .#{s.$prefix}steps__marker {
+          width: 1.25rem;
+          height: 1.25rem;
+          font-size: 0.625rem;
+        }
+      }
+
+      @include role.role-modifiers;
+    }
+  }
+}

package/scss/blocks/_swatch.scss

@@ -0,0 +1,117 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'swatch') {
+  @layer blocks {
+    @include b.block('swatch') {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+      height: 1.5rem;
+      border: 0;
+      padding: 0;
+      margin: 0;
+
+      @include b.element('option') {
+        position: relative;
+        display: inline-grid;
+      }
+
+      @include b.element('input') {
+        position: absolute;
+        opacity: 0;
+        inset: 0;
+        margin: 0;
+        cursor: pointer;
+
+        &:checked + .#{s.$prefix}swatch__color {
+          outline: 2px solid var(--text);
+          outline-offset: 2px;
+        }
+
+        &:focus-visible + .#{s.$prefix}swatch__color {
+          outline: 2px solid var(--focus);
+          outline-offset: 4px;
+        }
+
+        &:disabled + .#{s.$prefix}swatch__color {
+          opacity: 0.35;
+          background: linear-gradient(135deg, transparent 45%, var(--c-muted) 45% 55%, transparent 55%), var(--c);
+        }
+      }
+
+      @include b.element('color') {
+        width: 1.5rem;
+        height: 1.5rem;
+        border-radius: 50%;
+        background: var(--c);
+        border: var(--bd1) solid var(--c-subtle);
+      }
+
+      // Text swatch variant
+      @include b.modifier('text') {
+        .#{s.$prefix}swatch__color {
+          width: auto;
+          height: auto;
+          border-radius: var(--r-xs);
+          padding: calc(var(--s1) - var(--bd1)) var(--s2);
+          font: 500 0.875rem/1.25rem var(--f-ui);
+          border: var(--bd1) solid var(--border);
+          background: none;
+        }
+
+        .#{s.$prefix}swatch__input:checked + .#{s.$prefix}swatch__color {
+          border: var(--bd2) solid var(--c, var(--primary));
+          padding: calc(var(--s1) - var(--bd2)) calc(var(--s2) - var(--bd2) + var(--bd1));
+          background-color: color-mix(in srgb, var(--c, var(--primary)) 10%, transparent);
+          color: var(--c, var(--primary-text));
+          outline: none;
+        }
+
+        .#{s.$prefix}swatch__input:disabled + .#{s.$prefix}swatch__color {
+          opacity: 0.4;
+          cursor: not-allowed;
+          background: none;
+        }
+      }
+
+      // Image swatch variant
+      @include b.modifier('image') {
+        .#{s.$prefix}swatch__color {
+          width: 3rem;
+          height: 3rem;
+          overflow: hidden;
+          border: var(--bd1) solid var(--border);
+          background: none;
+
+          > img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        }
+
+        .#{s.$prefix}swatch__input:checked + .#{s.$prefix}swatch__color {
+          outline: 2px solid var(--text);
+          outline-offset: 2px;
+        }
+      }
+
+      // Size modifiers
+      @include b.modifier('sm') {
+        .#{s.$prefix}swatch__color {
+          width: 1rem;
+          height: 1rem;
+        }
+      }
+
+      @include b.modifier('lg') {
+        .#{s.$prefix}swatch__color {
+          width: 2rem;
+          height: 2rem;
+        }
+      }
+    }
+  }
+}