@collectivetrait/lineaui 0.0.0-stage → 1.0.0

package/scss/blocks/_choice.scss

@@ -0,0 +1,163 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'choice') {
+  @layer blocks {
+    @include b.block('choice') {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+
+      @include b.element('option') {
+        display: flex;
+        gap: 0.75rem;
+        align-items: flex-start;
+        cursor: pointer;
+      }
+
+      @include b.element('input') {
+        appearance: none;
+        flex: none;
+        width: 1.25rem;
+        height: 1.25rem;
+        margin: 0.125rem 0 0;
+        border: var(--bd1) solid var(--border-control);
+        border-radius: var(--r-xs);
+        background: var(--surface);
+        display: grid;
+        place-items: center;
+        cursor: pointer;
+
+        &[type="radio"] {
+          border-radius: 50%;
+        }
+
+        &:checked {
+          background: var(--primary);
+          border-color: var(--primary);
+        }
+
+        &[type="checkbox"]:checked::after {
+          content: '';
+          width: 0.625rem;
+          height: 0.375rem;
+          border: 2px solid var(--on-primary);
+          border-top: 0;
+          border-right: 0;
+          transform: translateY(-1px) rotate(-45deg);
+        }
+
+        &[type="radio"]:checked::after {
+          content: '';
+          width: 0.5rem;
+          height: 0.5rem;
+          border-radius: 50%;
+          background: var(--on-primary);
+        }
+
+        &:focus-visible {
+          outline: 2px solid var(--focus);
+          outline-offset: 2px;
+        }
+
+        &[aria-invalid="true"] {
+          border-color: var(--danger);
+        }
+
+        &:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+
+          ~ .#{s.$prefix}choice__label {
+            opacity: 0.5;
+            cursor: not-allowed;
+          }
+        }
+      }
+
+      @include b.element('body') {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+      }
+
+      @include b.element('label') {
+        font: 500 1rem/1.5rem var(--f-ui);
+      }
+
+      @include b.element('description') {
+        font: 400 0.875rem/1.25rem var(--f-ui);
+        color: var(--c-muted);
+      }
+
+      @include b.element('hint') {
+        font: 400 0.875rem/1.25rem var(--f-ui);
+        color: var(--c-muted);
+      }
+
+      @include b.element('aside') {
+        font: 500 1rem/1.5rem var(--f-ui);
+        font-variant-numeric: tabular-nums;
+      }
+
+      @include b.modifier('card') {
+        gap: 1.5rem;
+
+        .#{s.$prefix}choice__option {
+          padding: 0.75rem;
+          border-radius: var(--r-xs);
+          background: var(--surface);
+          outline: var(--bd1) solid var(--border);
+          outline-offset: calc(-1 * var(--bd1));
+
+          &:has(:checked) {
+            background: var(--primary-subtle);
+            outline: var(--bd2) solid var(--primary-text);
+            outline-offset: calc(-1 * var(--bd2));
+          }
+        }
+      }
+
+      @include b.modifier('switch') {
+        gap: 1rem;
+
+        .#{s.$prefix}choice__input {
+          width: 2.5rem;
+          height: 1.5rem;
+          margin: 0;
+          border-radius: 999px;
+          display: block;
+          position: relative;
+
+          &::after {
+            content: '';
+            position: absolute;
+            top: 0.25rem;
+            left: 0.25rem;
+            width: 1rem;
+            height: 1rem;
+            border-radius: 50%;
+            background: var(--c-muted);
+            transition: transform 0.2s;
+          }
+
+          &:checked::after {
+            transform: translateX(1rem);
+            background: var(--on-primary);
+            border: 0;
+            width: 1rem;
+            height: 1rem;
+          }
+        }
+      }
+
+      @include b.modifier('inline') {
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: var(--s3);
+      }
+    }
+  }
+}

package/scss/blocks/_code.scss

@@ -0,0 +1,157 @@
+@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, 'code') {
+  @layer blocks {
+    @include b.block('code') {
+      position: relative;
+      background: var(--surface-sunken);
+      border-radius: var(--radius);
+      overflow: hidden;
+
+      outline: var(--bd1) solid var(--border);
+      outline-offset: calc(-1 * var(--bd1));
+
+      @include b.element('header') {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 1rem calc(0.5rem - var(--bd1));
+        background: color-mix(in srgb, var(--surface-sunken) 80%, var(--surface));
+        border-bottom: var(--bd1) solid var(--border);
+        font: 500 0.75rem/1rem var(--f-mono);
+        color: var(--c-muted);
+        letter-spacing: .02em;
+
+        > i {
+          font-size: 0.875rem;
+          flex: none;
+          color: var(--c-subtle);
+        }
+      }
+
+      @include b.element('lang') {
+        margin-left: auto;
+        font: 400 0.6875rem/1rem var(--f-mono);
+        color: var(--c-subtle);
+        text-transform: uppercase;
+        letter-spacing: .06em;
+      }
+
+      @include b.element('body') {
+        margin: 0;
+        padding: 0;
+        overflow-x: auto;
+        font: 400 0.8125rem/1.5rem var(--f-mono);
+        color: var(--text);
+        tab-size: 2;
+        counter-reset: line;
+
+        code {
+          display: block;
+        }
+      }
+
+      @include b.element('line') {
+        display: block;
+        padding: 0 1rem 0 3.5rem;
+        position: relative;
+        min-height: 1.5rem;
+
+        &::before {
+          content: counter(line);
+          counter-increment: line;
+          position: absolute;
+          left: 0;
+          width: 2.5rem;
+          text-align: right;
+          color: var(--c-disabled);
+          font-variant-numeric: tabular-nums;
+          user-select: none;
+          pointer-events: none;
+        }
+
+        @include b.modifier('highlight') {
+          background: color-mix(in srgb, var(--primary) 10%, transparent);
+          border-left: 3px solid var(--primary-text);
+        }
+      }
+
+      @include b.modifier('wrap') {
+        .#{s.$prefix}code__body {
+          white-space: pre-wrap;
+          word-break: break-word;
+        }
+      }
+
+      @include b.modifier('flush') {
+        border-radius: 0;
+        margin-bottom: 0;
+      }
+
+      // Highlight.js token mappings
+      & .hljs-keyword, & .hljs-selector-tag, & .hljs-built_in,
+      & .hljs-type, & .hljs-meta .hljs-keyword {
+        color: var(--syntax-keyword);
+      }
+
+      & .hljs-string, & .hljs-regexp, & .hljs-addition,
+      & .hljs-template-variable {
+        color: var(--syntax-string);
+      }
+
+      & .hljs-comment, & .hljs-doctag, & .hljs-quote {
+        color: var(--syntax-comment);
+        font-style: italic;
+      }
+
+      & .hljs-title, & .hljs-title\.function_, & .hljs-section {
+        color: var(--syntax-function);
+      }
+
+      & .hljs-number, & .hljs-literal, & .hljs-variable\.constant_,
+      & .hljs-symbol, & .hljs-link {
+        color: var(--syntax-constant);
+      }
+
+      & .hljs-operator, & .hljs-deletion {
+        color: var(--syntax-operator);
+      }
+
+      & .hljs-punctuation {
+        color: var(--syntax-punctuation);
+      }
+
+      & .hljs-tag, & .hljs-name {
+        color: var(--syntax-tag);
+      }
+
+      & .hljs-attr, & .hljs-attribute, & .hljs-property {
+        color: var(--syntax-attribute);
+      }
+
+      & .hljs-variable, & .hljs-params {
+        color: var(--text);
+      }
+
+      & .hljs-meta {
+        color: var(--c-muted);
+      }
+    }
+
+    // Syntax token custom properties
+    :root {
+      --syntax-keyword: var(--primary-text);
+      --syntax-string: var(--success-text);
+      --syntax-comment: var(--c-muted);
+      --syntax-function: var(--info-text);
+      --syntax-constant: var(--warning-text);
+      --syntax-operator: var(--c-muted);
+      --syntax-punctuation: var(--c-subtle);
+      --syntax-tag: var(--danger-text);
+      --syntax-attribute: var(--secondary-text);
+    }
+  }
+}

package/scss/blocks/_data-list.scss

@@ -0,0 +1,92 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'data-list') {
+  @layer blocks {
+    @include b.block('data-list') {
+      display: flex;
+      flex-direction: column;
+      font: var(--t-body-sm-s)/var(--t-body-sm-lh) var(--f-ui);
+
+      @include b.element('item') {
+        display: flex;
+        flex-direction: column;
+        gap: var(--s-h);
+        padding-block: var(--s2);
+      }
+
+      @include b.element('term') {
+        font-weight: 500;
+        color: var(--c-muted);
+        font-size: var(--t-meta-s);
+        line-height: var(--t-meta-lh);
+      }
+
+      @include b.element('value') {
+        color: var(--text);
+      }
+
+      @include b.element('action') {
+        color: var(--primary);
+        text-decoration: none;
+        font-weight: 500;
+        cursor: pointer;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      @include b.modifier('horizontal') {
+        .#{s.$prefix}data-list__item {
+          flex-direction: row;
+          align-items: baseline;
+          justify-content: space-between;
+          gap: var(--s3);
+        }
+
+        .#{s.$prefix}data-list__term {
+          flex-shrink: 0;
+          min-width: 120px;
+        }
+
+        .#{s.$prefix}data-list__value {
+          text-align: end;
+        }
+      }
+
+      @include b.modifier('divided') {
+        .#{s.$prefix}data-list__item {
+          border-bottom: var(--bd1) solid var(--border);
+          padding-bottom: calc(var(--s2) - var(--bd1));
+
+          &:last-child {
+            border-bottom: 0;
+            padding-bottom: var(--s2);
+          }
+        }
+      }
+
+      @include b.modifier('striped') {
+        .#{s.$prefix}data-list__item:nth-child(even) {
+          background-color: var(--surface-sunken);
+          padding-inline: var(--s2);
+          border-radius: var(--r-sm);
+        }
+      }
+
+      @include b.modifier('compact') {
+        .#{s.$prefix}data-list__item {
+          padding-block: var(--s1);
+        }
+      }
+
+      @include b.modifier('cols-2') {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0 var(--s4);
+      }
+    }
+  }
+}

package/scss/blocks/_divider.scss

@@ -0,0 +1,54 @@
+@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, 'divider') {
+  @layer blocks {
+    @include b.block('divider') {
+      --_bw: var(--bd1);
+
+      display: block;
+      border: none;
+      height: 0;
+      margin: var(--s3) 0 calc(var(--s3) - var(--_bw));
+      border-top: var(--_bw) solid var(--border);
+
+      @include b.element('label') {
+        display: flex;
+        align-items: center;
+        gap: var(--s2);
+        font: var(--t-meta-s)/var(--t-meta-lh) var(--f-ui);
+        color: var(--c-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        font-weight: 500;
+
+        &::before,
+        &::after {
+          content: '';
+          flex: 1;
+          height: 0;
+          border-top: var(--_bw) solid var(--border);
+        }
+      }
+
+      @include b.modifier('vertical') {
+        display: inline-block;
+        width: 0;
+        height: 100%;
+        margin: 0 calc(var(--s3) - var(--_bw)) 0 var(--s3);
+        border-top: 0;
+        border-left: var(--_bw) solid var(--border);
+      }
+
+      @include b.modifier('strong') {
+        --_bw: var(--bd2);
+      }
+
+      @include b.modifier('space-md') { margin: r.lines(1) 0 calc(#{r.lines(1)} - var(--_bw)); }
+      @include b.modifier('space-lg') { margin: r.lines(2) 0 calc(#{r.lines(2)} - var(--_bw)); }
+      @include b.modifier('space-xl') { margin: r.lines(3) 0 calc(#{r.lines(3)} - var(--_bw)); }
+    }
+  }
+}

package/scss/blocks/_drawer.scss

@@ -0,0 +1,160 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'drawer') {
+  @layer blocks {
+    @include b.block('drawer') {
+      --_width: 400px;
+
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: min(var(--_width), 100vw);
+      max-width: 100vw;
+      max-height: 100vh;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      background-color: var(--surface-raised);
+      color: var(--text);
+      border: none;
+      border-radius: var(--r-xs);
+      box-shadow: var(--sh4);
+      display: flex;
+      flex-direction: column;
+
+      transform: translateX(0);
+      opacity: 1;
+      transition: transform var(--dur-base) var(--e-exit),
+                  opacity var(--dur-base) var(--e-exit),
+                  overlay var(--dur-base) var(--e-exit) allow-discrete,
+                  display var(--dur-base) var(--e-exit) allow-discrete;
+
+      @starting-style {
+        transform: translateX(100%);
+        opacity: 0;
+      }
+
+      &:not([open]) {
+        transform: translateX(100%);
+        opacity: 0;
+      }
+
+      &::backdrop {
+        background-color: var(--overlay);
+        opacity: 1;
+        transition: opacity var(--dur-base) var(--e-exit),
+                    overlay var(--dur-base) var(--e-exit) allow-discrete,
+                    display var(--dur-base) var(--e-exit) allow-discrete;
+
+        @starting-style {
+          opacity: 0;
+        }
+      }
+
+      &:not([open])::backdrop {
+        opacity: 0;
+      }
+
+      @include b.element('close') {
+        position: absolute;
+        top: var(--s2);
+        right: var(--s2);
+        z-index: 1;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        border: none;
+        background: none;
+        color: var(--c-muted);
+        cursor: pointer;
+        border-radius: var(--r-md);
+        flex-shrink: 0;
+
+        &:hover {
+          color: var(--text);
+          background-color: var(--surface-raised);
+        }
+
+        &:focus-visible {
+          outline: 2px solid var(--focus);
+          outline-offset: -2px;
+        }
+      }
+
+      @include b.element('header') {
+        display: flex;
+        align-items: center;
+        gap: var(--s2);
+        padding: var(--s4) calc(var(--s4) + 32px) calc(var(--s4) - var(--bd1)) var(--s4);
+        flex-shrink: 0;
+        border-bottom: var(--bd1) solid var(--border);
+      }
+
+      @include b.element('title') {
+        font: 600 var(--t-h4-s)/var(--t-h4-lh) var(--f-ui);
+        flex: 1;
+        min-width: 0;
+        margin: 0;
+      }
+
+      @include b.element('body') {
+        padding: 0 var(--s4);
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      @include b.element('footer') {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: var(--s2);
+        padding: var(--s4);
+        padding-top: calc(var(--s4) - var(--bd1));
+        flex-shrink: 0;
+        border-top: var(--bd1) solid var(--border);
+      }
+
+      @include b.modifier('start') {
+        right: auto;
+        left: 0;
+
+        @starting-style {
+          transform: translateX(-100%);
+        }
+
+        &:not([open]) {
+          transform: translateX(-100%);
+        }
+      }
+
+      @include b.modifier('bottom') {
+        top: auto;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: auto;
+        max-height: 80vh;
+        border-radius: var(--r-xs) var(--r-xs) 0 0;
+
+        @starting-style {
+          transform: translateY(100%);
+        }
+
+        &:not([open]) {
+          transform: translateY(100%);
+        }
+      }
+
+      @include b.modifier('sm') { --_width: 320px; }
+      @include b.modifier('md') { --_width: 400px; }
+      @include b.modifier('lg') { --_width: 560px; }
+    }
+  }
+}