@collectivetrait/lineaui 0.0.0-stage → 1.0.0

package/scss/blocks/_price.scss

@@ -0,0 +1,88 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'price') {
+  @layer blocks {
+    @include b.block('price') {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--s1);
+      font-family: var(--f-ui);
+      font-variant-numeric: tabular-nums;
+
+      @include b.element('current') {
+        font-size: var(--t-h4-s);
+        line-height: var(--t-h4-lh);
+        font-weight: 600;
+        color: var(--text);
+      }
+
+      @include b.element('original') {
+        font-size: var(--t-body-sm-s);
+        line-height: var(--t-body-sm-lh);
+        color: var(--c-muted);
+        text-decoration: line-through;
+      }
+
+      @include b.element('discount') {
+        font-size: var(--t-body-sm-s);
+        line-height: var(--t-body-sm-lh);
+        font-weight: 600;
+        color: var(--danger-text);
+      }
+
+      @include b.element('currency') {
+        font-size: var(--t-body-sm-s);
+        line-height: var(--t-body-sm-lh);
+        font-weight: 500;
+      }
+
+      @include b.element('period') {
+        font-size: var(--t-meta-s);
+        line-height: var(--t-meta-lh);
+        color: var(--c-muted);
+        font-weight: 400;
+      }
+
+      @include b.modifier('sale') {}
+
+      @include b.modifier('range') {
+        &::before {
+          content: 'From';
+          font-size: var(--t-meta-s);
+          line-height: var(--t-meta-lh);
+          color: var(--c-muted);
+          font-weight: 400;
+        }
+      }
+
+      @include b.modifier('stacked') {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0;
+      }
+
+      @include b.modifier('sm') {
+        .#{s.$prefix}price__current {
+          font-size: var(--t-body-s);
+          line-height: var(--t-body-lh);
+        }
+      }
+
+      @include b.modifier('lg') {
+        .#{s.$prefix}price__current {
+          font-size: var(--t-h3-s);
+          line-height: var(--t-h3-lh);
+        }
+      }
+
+      @include b.modifier('xl') {
+        .#{s.$prefix}price__current {
+          font-size: var(--t-h2-s);
+          line-height: var(--t-h2-lh);
+        }
+      }
+    }
+  }
+}

package/scss/blocks/_product-card.scss

@@ -0,0 +1,138 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'product-card') {
+  @layer blocks {
+    @include b.block('product-card') {
+      display: flex;
+      flex-direction: column;
+      background-color: var(--surface);
+      overflow: hidden;
+      position: relative;
+      outline: var(--bd1) solid var(--border);
+      outline-offset: calc(-1 * var(--bd1));
+
+      @include b.element('media') {
+        position: relative;
+        background: var(--surface-sunken);
+      }
+
+      @include b.element('img') {
+        aspect-ratio: var(--ratio, 4 / 5);
+        background: var(--surface-sunken);
+        display: grid;
+        place-items: center;
+        color: var(--c-subtle);
+
+        > img {
+          display: block;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      @include b.element('badges') {
+        position: absolute;
+        top: 0.75rem;
+        left: 0.75rem;
+        display: flex;
+        gap: 0.25rem;
+        z-index: 1;
+      }
+
+      @include b.element('wishlist') {
+        position: absolute;
+        top: 0.75rem;
+        right: 0.75rem;
+        z-index: 2;
+      }
+
+      @include b.element('body') {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+        padding: 1rem;
+      }
+
+      @include b.element('vendor') {
+        font: 500 0.75rem/1rem var(--f-mono);
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        color: var(--c-subtle);
+      }
+
+      @include b.element('title') {
+        font: 500 1rem/1.5rem var(--f-ui);
+        margin: 0;
+        overflow: hidden;
+
+        a {
+          color: var(--text);
+          text-decoration: none;
+
+          &::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+          }
+        }
+      }
+
+      @include b.element('swatches') {
+        position: relative;
+        z-index: 1;
+      }
+
+      @include b.element('actions') {
+        position: relative;
+        z-index: 1;
+      }
+
+      // Aspect ratio modifiers
+      @include b.modifier('ratio-1x1') { --ratio: 1 / 1; }
+      @include b.modifier('ratio-4x5') { --ratio: 4 / 5; }
+      @include b.modifier('ratio-3x4') { --ratio: 3 / 4; }
+
+      @include b.modifier('horizontal') {
+        flex-direction: row;
+
+        .#{s.$prefix}product-card__media {
+          width: 40%;
+          max-width: 200px;
+          flex-shrink: 0;
+          aspect-ratio: auto;
+        }
+      }
+
+      @include b.modifier('compact') {
+        .#{s.$prefix}product-card__body {
+          padding: var(--s2);
+        }
+
+        .#{s.$prefix}product-card__actions {
+          padding: var(--s2);
+          padding-top: 0;
+        }
+      }
+
+      @include b.modifier('center') {
+        text-align: center;
+
+        .#{s.$prefix}product-card__actions {
+          justify-content: center;
+        }
+      }
+
+      @include b.modifier('flat') {
+        outline: 0;
+      }
+
+      &.is-sold-out {
+        opacity: 0.6;
+        pointer-events: none;
+      }
+    }
+  }
+}

package/scss/blocks/_progress.scss

@@ -0,0 +1,68 @@
+@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, 'progress') {
+  @layer blocks {
+    @include b.block('progress') {
+      --_fill: var(--primary);
+      --_track-height: 8px;
+
+      display: flex;
+      flex-direction: column;
+      gap: var(--s1);
+
+      @include b.element('header') {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+      }
+
+      @include b.element('label') {
+        font: 500 var(--t-body-sm-s)/var(--t-body-sm-lh) var(--f-ui);
+        color: var(--text);
+      }
+
+      @include b.element('value') {
+        font: var(--t-meta-s)/var(--t-meta-lh) var(--f-mono);
+        color: var(--c-muted);
+        font-variant-numeric: tabular-nums;
+      }
+
+      @include b.element('track') {
+        width: 100%;
+        height: var(--_track-height);
+        background-color: var(--surface-sunken);
+        border-radius: var(--r-pill);
+        overflow: hidden;
+      }
+
+      @include b.element('bar') {
+        height: 100%;
+        width: var(--progress, 0%);
+        background-color: var(--_fill);
+        border-radius: var(--r-pill);
+        transition: width var(--dur-slow) var(--e-standard);
+      }
+
+      @include b.modifier('xs') { --_track-height: 4px; }
+      @include b.modifier('sm') { --_track-height: 8px; }
+      @include b.modifier('md') { --_track-height: 16px; }
+
+      @include b.modifier('indeterminate') {
+        .#{s.$prefix}progress__bar {
+          width: 40%;
+          animation: #{s.$prefix}progress-indeterminate 1.8s var(--e-standard) infinite;
+        }
+      }
+
+      @include role.role-modifiers;
+    }
+
+    @keyframes #{s.$prefix}progress-indeterminate {
+      0% { transform: translateX(-100%); }
+      100% { transform: translateX(350%); }
+    }
+  }
+}

package/scss/blocks/_prose.scss

@@ -0,0 +1,165 @@
+@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, 'prose') {
+  @layer blocks {
+    @include b.block('prose') {
+      font: var(--t-body-prose-s)/var(--t-body-prose-lh) var(--f-prose);
+      max-width: var(--measure);
+
+      // Headings
+      :is(h1, h2, h3, h4, h5, h6):first-child {
+        margin-top: 0;
+      }
+
+      > * {
+        margin-block: 0;
+      }
+
+      > *:not(:last-child) {
+        margin-block-end: 2rem;
+      }
+
+      > h2 {
+        font: 400 2rem/3rem var(--f-prose);
+        text-wrap: balance;
+      }
+
+      > *:has(+ h2) {
+        margin-block-end: 3rem;
+      }
+
+      > h2:not(:last-child) {
+        margin-block-end: 1.5rem;
+      }
+
+      > ul {
+        padding-left: 1.5rem;
+      }
+
+      li::marker {
+        color: var(--primary-text);
+      }
+
+      .lead {
+        font-size: 1.125rem;
+        line-height: 1.5rem;
+        color: var(--c-muted);
+      }
+
+      em {
+        font-style: italic;
+      }
+
+      code {
+        font: 400 0.8em/1 var(--f-mono);
+        padding: 0.125rem 0.25rem;
+        border-radius: var(--radius);
+        background: var(--surface-sunken);
+      }
+
+      // Links
+      a {
+        text-decoration: underline;
+      }
+
+      // Lists
+      ol {
+        padding-left: 1.5rem;
+      }
+
+      li + li {
+        margin-top: var(--s-h);
+      }
+
+      // Images
+      img {
+        max-width: 100%;
+        height: auto;
+        border-radius: var(--r-md);
+      }
+
+      // Horizontal rule
+      hr {
+        margin: r.lines(1) 0;
+      }
+
+      // Pull quote spacing
+      > *:has(+ .#{s.$prefix}quote--pull) {
+        margin-block-end: 3rem;
+      }
+
+      .#{s.$prefix}quote--pull:not(:last-child) {
+        margin-block-end: 3rem;
+      }
+
+      // WordPress alignment classes
+      .alignleft {
+        float: left;
+        margin-right: var(--s3);
+        margin-bottom: var(--s1);
+        max-width: 50%;
+      }
+
+      .alignright {
+        float: right;
+        margin-left: var(--s3);
+        margin-bottom: var(--s1);
+        max-width: 50%;
+      }
+
+      .aligncenter {
+        display: block;
+        margin-inline: auto;
+      }
+
+      .alignwide {
+        max-width: var(--container-wide);
+        margin-inline: auto;
+      }
+
+      .alignfull {
+        max-width: none;
+        margin-inline: calc(-1 * var(--gutter));
+      }
+
+      // Clearfix
+      &::after {
+        content: '';
+        display: table;
+        clear: both;
+      }
+
+      // Last child margin reset
+      > :last-child {
+        margin-bottom: 0;
+      }
+
+      // Size modifiers
+      @include b.modifier('sm') {
+        font-size: var(--t-body-sm-s);
+        line-height: var(--t-body-sm-lh);
+      }
+
+      @include b.modifier('lg') {
+        font-size: var(--t-body-lg-s);
+        line-height: var(--t-body-lg-lh);
+      }
+
+      @include b.modifier('ui') {
+        font-family: var(--f-ui);
+      }
+
+      @include b.modifier('wide-media') {
+        img,
+        figure,
+        .#{s.$prefix}media {
+          max-width: var(--container);
+          margin-inline: auto;
+        }
+      }
+    }
+  }
+}

package/scss/blocks/_quantity.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, 'quantity') {
+  @layer blocks {
+    @include b.block('quantity') {
+      display: inline-flex;
+      align-items: center;
+      height: 2rem;
+      border-radius: var(--r-xs);
+      border: var(--bd1) solid var(--border-control);
+      background: var(--surface);
+      overflow: hidden;
+
+      @include b.element('button') {
+        width: 2rem;
+        height: 100%;
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+        color: var(--text);
+        cursor: pointer;
+        font: 500 1rem/1.5rem var(--f-ui);
+
+        &:hover {
+          background: var(--surface-raised);
+        }
+
+        &:disabled {
+          color: var(--c-disabled);
+          cursor: not-allowed;
+          background: transparent;
+        }
+      }
+
+      @include b.element('decrement') { @extend .#{s.$prefix}quantity__button; }
+      @include b.element('increment') { @extend .#{s.$prefix}quantity__button; }
+
+      @include b.element('input') {
+        width: 2.5rem;
+        height: 2rem;
+        border: 0;
+        background: transparent;
+        text-align: center;
+        color: var(--text);
+        font: 500 0.875rem/1.25rem var(--f-mono);
+
+        -moz-appearance: textfield;
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+      }
+
+      @include b.modifier('compact') {
+        height: 1.5rem;
+
+        .#{s.$prefix}quantity__button {
+          width: 1.5rem;
+          height: 1.5rem;
+        }
+
+        .#{s.$prefix}quantity__input {
+          width: 2rem;
+          height: 1.5rem;
+          font-size: 0.75rem;
+        }
+      }
+    }
+  }
+}

package/scss/blocks/_quote.scss

@@ -0,0 +1,71 @@
+@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, 'quote') {
+  @layer blocks {
+    @include b.block('quote') {
+      --_edge: var(--_border-color, var(--primary));
+
+      font-family: var(--f-prose);
+      margin-bottom: r.lines(1);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      @include b.element('text') {
+        font-size: var(--t-body-lg-s);
+        line-height: var(--t-body-lg-lh);
+        font-style: italic;
+      }
+
+      @include b.element('footer') {
+        margin-top: var(--s1);
+        display: flex;
+        align-items: center;
+        gap: var(--s2);
+      }
+
+      @include b.element('cite') {
+        font-style: normal;
+        font-size: var(--t-body-sm-s);
+        line-height: var(--t-body-sm-lh);
+        color: var(--c-muted);
+      }
+
+      @include b.element('avatar') {
+        width: 3rem;
+        height: 3rem;
+        border-radius: 50%;
+        object-fit: cover;
+        flex-shrink: 0;
+      }
+
+      @include b.modifier('pull') {
+        font: italic 400 1.25rem/1.5rem var(--f-prose);
+        color: var(--text);
+        text-wrap: balance;
+        padding: 0 0 0 2rem;
+        border-left: 3px solid var(--primary-text);
+      }
+
+      @include b.modifier('card') {
+        background: var(--surface);
+        padding: calc(var(--s3) - var(--bd1));
+        border-radius: var(--r-lg);
+        border: var(--bd1) solid var(--border);
+      }
+
+      @include b.modifier('bordered') {
+        border: var(--bd1) solid var(--border);
+        padding: calc(var(--s3) - var(--bd1));
+        border-radius: var(--r-md);
+      }
+
+      @include role.role-modifiers;
+    }
+  }
+}

package/scss/blocks/_rating.scss

@@ -0,0 +1,50 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'rating') {
+  @layer blocks {
+    @include b.block('rating') {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      height: 1.5rem;
+      font: 400 0.875rem/1.25rem var(--f-ui);
+      color: var(--c-muted);
+
+      @include b.element('stars') {
+        --rating: 0;
+
+        position: relative;
+        width: 5rem;
+        height: 1rem;
+        background: linear-gradient(90deg, var(--star-color, var(--primary)) calc(var(--rating) / 5 * 100%), var(--border) 0);
+        mask: var(--star-mask) repeat-x 0 0 / 16px 16px;
+      }
+
+      @include b.element('value') {
+        color: var(--text);
+        font-weight: 500;
+        font-variant-numeric: tabular-nums;
+      }
+
+      @include b.element('count') {
+        color: var(--c-muted);
+      }
+
+      @include b.modifier('input') {
+        cursor: pointer;
+      }
+
+      @include b.modifier('compact') {
+        .#{s.$prefix}rating__count {
+          display: none;
+        }
+      }
+    }
+
+    :root {
+      --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.2l2 4.3 4.6.5-3.4 3.2.9 4.6L8 11.5l-4.1 2.3.9-4.6L1.4 6l4.6-.5z'/%3E%3C/svg%3E");
+    }
+  }
+}