@greese/ui 0.0.0-stage → 1.0.0

package/src/components/Steps/Steps.scss

@@ -0,0 +1,216 @@
+@use '../../styles/mixins';
+@use '../../styles/tones';
+
+@layer greese.components {
+  @include tones.classes('greese-Step', 'greese-step-tone');
+
+  // Neutral events read as grey dots, not black ones.
+  .greese-Step--neutral {
+    --greese-step-tone: var(--greese-color-fg-muted);
+  }
+
+  .greese-Steps {
+    @include mixins.component-root;
+
+    --greese-steps-marker: 2rem;
+
+    display: flex;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .greese-Steps--dots {
+    --greese-steps-marker: 1.25rem;
+  }
+
+  .greese-Step {
+    position: relative;
+    min-inline-size: 0;
+    color: var(--greese-color-fg-muted);
+  }
+
+  .greese-Step-marker {
+    position: relative;
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+    inline-size: var(--greese-steps-marker);
+    block-size: var(--greese-steps-marker);
+    font-size: var(--greese-type-p3-font-size);
+    font-weight: var(--greese-font-weight-semibold);
+    color: var(--greese-color-fg-muted);
+    background-color: var(--greese-color-canvas);
+    border: 2px solid var(--greese-color-border-strong);
+    border-radius: var(--greese-corner-round);
+
+    > svg {
+      inline-size: min(1rem, 65%);
+      block-size: min(1rem, 65%);
+    }
+  }
+
+  // Numbers: current and event markers take the tone; complete ones fill.
+  .greese-Step--current .greese-Step-marker,
+  .greese-Step--event .greese-Step-marker {
+    color: var(--greese-step-tone);
+    border-color: var(--greese-step-tone);
+  }
+
+  .greese-Step--complete .greese-Step-marker,
+  .greese-Steps--dots .greese-Step--event .greese-Step-marker {
+    color: var(--greese-step-tone-on);
+    background-color: var(--greese-step-tone);
+    border-color: var(--greese-step-tone);
+  }
+
+  // Dots: the current step is a ring with a dot in it.
+  .greese-Steps--dots .greese-Step--current .greese-Step-marker:empty::before {
+    inline-size: 45%;
+    block-size: 45%;
+    content: '';
+    background-color: currentcolor;
+    border-radius: var(--greese-corner-round);
+  }
+
+  .greese-Step-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--greese-space-1);
+    min-inline-size: 0;
+  }
+
+  .greese-Step-title {
+    font-size: var(--greese-type-p3-font-size);
+    font-weight: var(--greese-font-weight-medium);
+  }
+
+  .greese-Step--current .greese-Step-title,
+  .greese-Step--complete .greese-Step-title,
+  .greese-Step--event .greese-Step-title {
+    color: var(--greese-color-fg);
+  }
+
+  .greese-Step-prefix {
+    font-size: var(--greese-type-caption-font-size);
+    color: var(--greese-color-fg-muted);
+  }
+
+  .greese-Step-description {
+    font-size: var(--greese-type-p3-font-size);
+    color: var(--greese-color-fg-muted);
+  }
+
+  // Horizontal: [prefix], marker and text stacked and centred, in equal
+  // columns. Each step is a size container, so its line can span exactly to
+  // the next marker (100cqi is the step's width, the distance between markers).
+  .greese-Steps--horizontal {
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scrollbar-width: thin;
+
+    > .greese-Step {
+      display: flex;
+      flex: 1 1 0;
+      flex-direction: column;
+      gap: var(--greese-space-2);
+      align-items: center;
+      min-inline-size: 7rem;
+      padding-block-end: var(--greese-space-2);
+      text-align: center;
+      container-type: inline-size;
+    }
+
+    > .greese-Step:not(:last-child) > .greese-Step-marker::after {
+      position: absolute;
+      inset-block-start: calc(50% - 1px);
+      inset-inline-start: calc(100% + var(--greese-space-2));
+      inline-size: calc(100cqi - var(--greese-steps-marker) - 2 * var(--greese-space-2));
+      block-size: 2px;
+      content: '';
+      background-color: var(--greese-color-border);
+    }
+
+    // As specific as the rule above, which it overrides.
+    > .greese-Step--complete:not(:last-child) > .greese-Step-marker::after {
+      background-color: var(--greese-step-tone);
+    }
+
+    // When any step has a prefix above its marker, the others keep a line's
+    // room for one, so every marker (and the lines between them) stays level.
+    &:has(> .greese-Step--prefix-before)
+      > .greese-Step:not(.greese-Step--prefix-before)::before {
+      block-size: 1lh;
+      font-size: var(--greese-type-caption-font-size);
+      content: '';
+    }
+
+    > .greese-Step > .greese-Step-prefix {
+      white-space: nowrap;
+    }
+  }
+
+  // Vertical: a grid of [prefix] marker text. When any step puts its prefix
+  // before the marker, every step gets that column, so markers line up.
+  .greese-Steps--vertical {
+    --greese-steps-before: 0px;
+
+    flex-direction: column;
+
+    &:has(> .greese-Step--prefix-before) {
+      --greese-steps-before: calc(
+        var(--greese-steps-prefix, 6rem) + var(--greese-space-3)
+      );
+    }
+
+    > .greese-Step {
+      display: grid;
+      grid-template-columns: var(--greese-steps-marker) minmax(0, 1fr);
+      column-gap: var(--greese-space-3);
+      padding-block-end: var(--greese-space-5);
+    }
+
+    &:has(> .greese-Step--prefix-before) > .greese-Step {
+      grid-template-columns:
+        var(--greese-steps-prefix, 6rem) var(--greese-steps-marker)
+        minmax(0, 1fr);
+
+      > .greese-Step-marker {
+        grid-column: 2;
+      }
+
+      > .greese-Step-body {
+        grid-column: 3;
+      }
+    }
+
+    > .greese-Step > .greese-Step-prefix {
+      grid-row: 1;
+      grid-column: 1;
+      text-align: end;
+    }
+
+    // Text and prefix start level with the marker's centre.
+    > .greese-Step > .greese-Step-body,
+    > .greese-Step > .greese-Step-prefix {
+      padding-block-start: max(0px, (var(--greese-steps-marker) - 1lh) / 2);
+    }
+
+    // The line, from under this marker down to the next one.
+    > .greese-Step:not(:last-child)::after {
+      position: absolute;
+      inset-block: calc(var(--greese-steps-marker) + var(--greese-space-1))
+        var(--greese-space-1);
+      inset-inline-start: calc(
+        var(--greese-steps-before) + var(--greese-steps-marker) / 2 - 1px
+      );
+      inline-size: 2px;
+      content: '';
+      background-color: var(--greese-color-border);
+    }
+
+    > .greese-Step--complete:not(:last-child)::after {
+      background-color: var(--greese-step-tone);
+    }
+  }
+}

package/src/components/Swap/Swap.scss

@@ -0,0 +1,62 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  // Both faces share one grid cell; the inactive one is hidden.
+  .greese-Swap {
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--greese-corner-control);
+
+    @include mixins.focus-ring;
+
+    @include mixins.hover {
+      background-color: color-mix(in oklab, currentcolor 8%, transparent);
+    }
+
+    svg {
+      inline-size: 1.5rem;
+      block-size: 1.5rem;
+    }
+  }
+
+  .greese-Swap-on,
+  .greese-Swap-off {
+    display: inline-flex;
+    grid-area: 1 / 1;
+    transition:
+      opacity var(--greese-duration-normal) var(--greese-easing-standard),
+      rotate var(--greese-duration-normal) var(--greese-easing-standard),
+      scale var(--greese-duration-normal) var(--greese-easing-standard);
+  }
+
+  .greese-Swap[aria-pressed='true'] .greese-Swap-off,
+  .greese-Swap[aria-pressed='false'] .greese-Swap-on {
+    opacity: 0;
+  }
+
+  .greese-Swap--rotate {
+    &[aria-pressed='true'] .greese-Swap-off {
+      rotate: 45deg;
+    }
+
+    &[aria-pressed='false'] .greese-Swap-on {
+      rotate: -45deg;
+    }
+  }
+
+  .greese-Swap--flip {
+    &[aria-pressed='true'] .greese-Swap-off,
+    &[aria-pressed='false'] .greese-Swap-on {
+      scale: -1 1;
+    }
+  }
+}

package/src/components/Switch/Switch.scss

@@ -0,0 +1,63 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Switch-track {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    inline-size: 2.25rem;
+    block-size: 1.25rem;
+    margin-block: calc((1lh - 1.25rem) / 2);
+  }
+
+  // The input is the track: it takes clicks, focus and the ring.
+  .greese-Switch-input {
+    @include mixins.touch-target;
+
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    cursor: pointer;
+    background-color: var(--greese-color-border-strong);
+    border-radius: var(--greese-corner-pill);
+    appearance: none;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    transition: background-color var(--greese-duration-fast) var(--greese-easing-standard);
+
+    @include mixins.focus-ring;
+
+    &:checked {
+      background-color: var(--greese-color-primary);
+    }
+
+    &[aria-invalid='true'] {
+      outline: 2px solid var(--greese-color-negative);
+      outline-offset: 1px;
+    }
+  }
+
+  .greese-Switch-thumb {
+    position: relative;
+    inline-size: 1rem;
+    block-size: 1rem;
+    margin-inline-start: 0.125rem;
+    pointer-events: none;
+    background-color: var(--greese-color-canvas);
+    border-radius: var(--greese-corner-round);
+    box-shadow: var(--greese-shadow-sm);
+    transition: translate var(--greese-duration-fast) var(--greese-easing-standard);
+  }
+
+  .greese-Switch-input:checked + .greese-Switch-thumb {
+    translate: 1rem 0;
+
+    &:dir(rtl) {
+      translate: -1rem 0;
+    }
+  }
+}

package/src/components/Table/Table.scss

@@ -0,0 +1,183 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Table {
+    @include mixins.component-root;
+    @include mixins.focus-ring;
+
+    max-inline-size: 100%;
+    max-block-size: var(--greese-table-max-height, none);
+    overflow: auto;
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-panel);
+  }
+
+  .greese-Table-table {
+    inline-size: 100%;
+    font-size: var(--greese-type-p3-font-size);
+    font-variant-numeric: tabular-nums;
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  .greese-Table-caption {
+    padding: var(--greese-space-3) var(--greese-space-4);
+    font-weight: var(--greese-font-weight-semibold);
+    text-align: start;
+    caption-side: top;
+  }
+
+  .greese-Table--comfortable {
+    --greese-table-cell-padding: var(--greese-space-3) var(--greese-space-4);
+  }
+
+  .greese-Table--compact {
+    --greese-table-cell-padding: var(--greese-space-1) var(--greese-space-3);
+  }
+
+  .greese-TableHeaderCell,
+  .greese-TableCell {
+    padding: var(--greese-table-cell-padding);
+    text-align: start;
+    vertical-align: middle;
+    border-block-end: 1px solid var(--greese-color-border);
+  }
+
+  .greese-TableHeaderCell {
+    font-weight: var(--greese-font-weight-semibold);
+    color: var(--greese-color-fg-muted);
+    white-space: nowrap;
+    background-color: var(--greese-color-surface);
+  }
+
+  .greese-TableRow:last-child > .greese-TableCell {
+    border-block-end: 0;
+  }
+
+  .greese-Table [data-align='center'] {
+    text-align: center;
+  }
+
+  .greese-Table [data-align='end'] {
+    text-align: end;
+  }
+
+  .greese-Table--striped tbody > .greese-TableRow:nth-child(even) {
+    background-color: color-mix(in oklab, var(--greese-color-surface) 60%, transparent);
+  }
+
+  // Rows arrive as the theme's `rows` role says, one after another; the base
+  // theme assigns none.
+  .greese-Table tbody > .greese-TableRow {
+    @include mixins.motion-safe {
+      @include mixins.role-entrance(rows, none, slow);
+    }
+
+    @for $i from 2 through 10 {
+      &:nth-child(#{$i}) {
+        animation-delay: calc(var(--greese-motion-stagger, 0.04s) * #{$i - 1});
+      }
+    }
+  }
+
+  .greese-Table--hoverable tbody > .greese-TableRow {
+    @include mixins.hover {
+      background-color: color-mix(in oklab, var(--greese-color-primary) 6%, transparent);
+    }
+  }
+
+  .greese-Table--sticky thead .greese-TableHeaderCell {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 1;
+  }
+
+  // Sortable header: the whole header is the button.
+  .greese-TableHeaderCell-sort {
+    @include mixins.focus-ring;
+
+    display: inline-flex;
+    gap: var(--greese-space-1);
+    align-items: center;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--greese-corner-inset);
+
+    > svg {
+      inline-size: 1em;
+      block-size: 1em;
+    }
+
+    @include mixins.hover {
+      color: var(--greese-color-fg);
+    }
+
+    // SortIcon draws an up arrow, then a down arrow: the active one is solid.
+    > svg path {
+      opacity: 0.35;
+    }
+
+    &[data-sort='ascending'] > svg path:first-child,
+    &[data-sort='descending'] > svg path:last-child {
+      opacity: 1;
+    }
+  }
+
+  // Stacked: below the breakpoint each row is a card of label/value pairs.
+  @each $bp in (sm, md, lg) {
+    @include mixins.down($bp) {
+      .greese-Table--stack-below-#{$bp} {
+        border: 0;
+
+        .greese-Table-table,
+        tbody,
+        tfoot,
+        .greese-TableRow,
+        .greese-TableCell {
+          display: block;
+        }
+
+        .greese-Table-caption {
+          display: block;
+          padding-inline: 0;
+        }
+
+        thead {
+          position: absolute;
+          inline-size: 1px;
+          block-size: 1px;
+          overflow: hidden;
+          clip-path: inset(50%);
+        }
+
+        .greese-TableRow {
+          padding: var(--greese-space-2) var(--greese-space-3);
+          margin-block-end: var(--greese-space-3);
+          background-color: var(--greese-color-surface-overlay);
+          border: 1px solid var(--greese-color-border);
+          border-radius: var(--greese-corner-panel);
+        }
+
+        .greese-TableCell {
+          display: grid;
+          grid-template-columns: minmax(6rem, 40%) 1fr;
+          gap: var(--greese-space-3);
+          justify-items: start; // values keep their size (badges don't stretch)
+          padding: var(--greese-space-1) 0;
+          text-align: start;
+          border: 0;
+
+          &::before {
+            font-weight: var(--greese-font-weight-medium);
+            color: var(--greese-color-fg-muted);
+            content: attr(data-label);
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/Tabs/Tabs.scss

@@ -0,0 +1,108 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Tabs {
+    display: flex;
+    flex-direction: column;
+    gap: var(--greese-space-4);
+
+    &[data-orientation='vertical'] {
+      flex-direction: row;
+    }
+  }
+
+  // Phones: tabs that don't fit scroll sideways rather than wrap or squash.
+  .greese-TabList {
+    display: flex;
+    gap: var(--greese-space-1);
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scroll-snap-type: x proximity;
+    scrollbar-width: none;
+    border-block-end: 1px solid var(--greese-color-border);
+
+    [data-orientation='vertical'] > & {
+      flex-direction: column;
+      flex-shrink: 0;
+      overflow: visible;
+      border-block-end: 0;
+      border-inline-end: 1px solid var(--greese-color-border);
+    }
+  }
+
+  .greese-Tab {
+    @include mixins.touch-target;
+
+    position: relative;
+    flex-shrink: 0;
+    min-block-size: 2.5rem;
+    padding-inline: var(--greese-space-3);
+    font: inherit;
+    font-weight: var(--greese-font-weight-medium);
+    color: var(--greese-color-fg-muted);
+    white-space: nowrap;
+    cursor: pointer;
+    scroll-snap-align: start;
+    background: none;
+    border: 0;
+    border-radius: var(--greese-corner-inset) var(--greese-corner-inset) 0 0;
+    box-shadow: inset 0 -2px 0 transparent;
+    transition:
+      color var(--greese-duration-fast) var(--greese-easing-standard),
+      background-color var(--greese-duration-fast) var(--greese-easing-standard),
+      box-shadow var(--greese-duration-fast) var(--greese-easing-standard);
+
+    @include mixins.focus-ring(-2px);
+
+    @include mixins.hover {
+      color: var(--greese-color-fg);
+      background-color: color-mix(in oklab, var(--greese-color-fg) 6%, transparent);
+    }
+
+    // The current tab is a tinted block over its underline, not a color change
+    // alone. Its fill and edge are hooks a theme reassigns (a color variant
+    // outlines it: `--greese-tab-current-edge: inset 0 0 0 1.5px …`).
+    &[aria-selected='true'] {
+      color: var(--greese-color-fg);
+      background-color: var(
+        --greese-tab-current-bg,
+        color-mix(in oklab, var(--greese-color-primary) 12%, transparent)
+      );
+      box-shadow: var(
+        --greese-tab-current-edge,
+        inset 0 -2px 0 var(--greese-color-primary)
+      );
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+
+    [data-orientation='vertical'] & {
+      text-align: start;
+      border-radius: var(--greese-corner-inset) 0 0 var(--greese-corner-inset);
+
+      &[aria-selected='true'] {
+        box-shadow: var(
+          --greese-tab-current-edge,
+          inset -2px 0 0 var(--greese-color-primary)
+        );
+      }
+    }
+  }
+
+  .greese-TabPanel {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    border-radius: var(--greese-corner-inset);
+
+    @include mixins.focus-ring;
+
+    // A panel's content enters each time its tab is chosen (shown again, it
+    // restarts); the panel itself stays put.
+    @include mixins.content-entrance;
+  }
+
+  @include mixins.content-entrance-keyframes;
+}

package/src/components/Text/Text.scss

@@ -0,0 +1,34 @@
+@use 'sass:list';
+@use '../../styles/tones';
+
+@layer greese.components {
+  .greese-Text {
+    margin: 0;
+  }
+
+  @each $weight in (regular, medium, semibold, bold) {
+    .greese-Text--#{$weight} {
+      font-weight: var(--greese-font-weight-#{$weight});
+    }
+  }
+
+  @each $tone, $pair in tones.$tones {
+    .greese-Text--#{$tone} {
+      color: list.nth($pair, 1);
+    }
+  }
+
+  .greese-Text--truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .greese-Text--clamp {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--greese-text-lines);
+    line-clamp: var(--greese-text-lines);
+  }
+}