@greese/ui 0.0.0-stage → 1.1.0

package/src/components/Breadcrumbs/Breadcrumbs.scss

@@ -0,0 +1,59 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Breadcrumbs-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--greese-space-1) var(--greese-space-2);
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    font-size: var(--greese-type-p3-font-size);
+    list-style: none;
+  }
+
+  .greese-BreadcrumbItem {
+    display: inline-flex;
+    gap: var(--greese-space-2);
+    align-items: center;
+    min-inline-size: 0;
+    color: var(--greese-color-fg-muted);
+
+    // Silent separator: the alt text after the slash is empty.
+    & + &::before {
+      color: var(--greese-color-border-strong);
+      content: '/' / '';
+    }
+  }
+
+  .greese-BreadcrumbItem-link,
+  .greese-Breadcrumbs-expand {
+    color: inherit;
+    text-decoration: none;
+    border-radius: var(--greese-corner-inset);
+
+    @include mixins.focus-ring(1px);
+
+    @include mixins.hover {
+      color: var(--greese-color-fg);
+      text-decoration: underline;
+      text-underline-offset: 0.2em;
+    }
+  }
+
+  .greese-Breadcrumbs-expand {
+    padding: 0 var(--greese-space-1);
+    font: inherit;
+    cursor: pointer;
+    background: none;
+    border: 0;
+  }
+
+  .greese-BreadcrumbItem-current {
+    overflow: hidden;
+    font-weight: var(--greese-font-weight-medium);
+    color: var(--greese-color-fg);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/src/components/Button/Button.scss

@@ -0,0 +1,231 @@
+@use 'sass:map';
+@use '../../styles/mixins';
+@use '../../styles/controls';
+@use '../../styles/tones';
+
+@layer greese.components {
+  .greese-Button {
+    @include mixins.component-root;
+
+    // Per-instance theming hooks: override these on any button.
+    --greese-button-tone: var(--greese-color-primary);
+    --greese-button-on-tone: var(--greese-color-primary-content);
+
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: var(--greese-space-2);
+    align-items: center;
+    justify-content: center;
+    min-block-size: var(--greese-button-height);
+    padding-inline: var(--greese-button-padding);
+
+    // The `button` type variant, but for its size (the `size` prop sets that).
+    font-family: var(--greese-type-button-font-family, inherit);
+    font-style: var(--greese-type-button-font-style, normal);
+    font-weight: var(--greese-type-button-font-weight);
+    line-height: var(--greese-type-button-line-height);
+    text-transform: var(--greese-type-button-text-transform, none);
+    letter-spacing: var(--greese-type-button-letter-spacing);
+    color: var(--greese-button-fg);
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    background-color: var(--greese-button-bg);
+    border: 1px solid var(--greese-button-border, transparent);
+    border-radius: var(--greese-corner-control);
+    transition:
+      background-color var(--greese-duration-fast) var(--greese-easing-standard),
+      border-color var(--greese-duration-fast) var(--greese-easing-standard),
+      color var(--greese-duration-fast) var(--greese-easing-standard);
+
+    @include mixins.focus-ring;
+    @include mixins.touch-target;
+
+    @include mixins.hover {
+      background-color: var(--greese-button-bg-hover);
+    }
+
+    &:active:not([aria-disabled='true'], :disabled) {
+      background-color: var(--greese-button-bg-active);
+    }
+
+    &:disabled,
+    &[aria-disabled='true']:not([data-loading]) {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+
+    // A disabled link (or other `asChild` element) has no native `disabled`:
+    // the pointer passes through it, so it can't be followed with no script.
+    &:not(button)[aria-disabled='true'] {
+      pointer-events: none;
+    }
+  }
+
+  // Tones
+  .greese-Button--neutral {
+    --greese-button-tone: var(--greese-color-fg);
+    --greese-button-on-tone: var(--greese-color-canvas);
+  }
+
+  @each $tone in tones.$brand {
+    .greese-Button--#{$tone} {
+      --greese-button-tone: var(--greese-color-#{$tone});
+      --greese-button-on-tone: var(--greese-color-#{$tone}-content);
+    }
+  }
+
+  .greese-Button--negative {
+    --greese-button-tone: var(--greese-color-negative);
+    --greese-button-on-tone: var(--greese-color-negative-content);
+  }
+
+  // Variants. color-mix() derives hover/soft states from the tone, toward the
+  // on-tone color, so they work in light and dark without extra tokens.
+  .greese-Button--solid {
+    --greese-button-fg: var(--greese-button-on-tone);
+    --greese-button-bg: var(--greese-button-tone);
+    --greese-button-bg-hover: color-mix(
+      in oklab,
+      var(--greese-button-tone),
+      var(--greese-button-on-tone) 14%
+    );
+    --greese-button-bg-active: color-mix(
+      in oklab,
+      var(--greese-button-tone),
+      var(--greese-button-on-tone) 24%
+    );
+  }
+
+  .greese-Button--soft {
+    --greese-button-fg: var(--greese-button-tone);
+    --greese-button-bg: color-mix(in oklab, var(--greese-button-tone) 12%, transparent);
+    --greese-button-bg-hover: color-mix(
+      in oklab,
+      var(--greese-button-tone) 20%,
+      transparent
+    );
+    --greese-button-bg-active: color-mix(
+      in oklab,
+      var(--greese-button-tone) 28%,
+      transparent
+    );
+  }
+
+  .greese-Button--outline {
+    --greese-button-fg: var(--greese-button-tone);
+    --greese-button-bg: transparent;
+    --greese-button-border: color-mix(
+      in oklab,
+      var(--greese-button-tone) 55%,
+      transparent
+    );
+    --greese-button-bg-hover: color-mix(
+      in oklab,
+      var(--greese-button-tone) 8%,
+      transparent
+    );
+    --greese-button-bg-active: color-mix(
+      in oklab,
+      var(--greese-button-tone) 16%,
+      transparent
+    );
+  }
+
+  .greese-Button--ghost {
+    --greese-button-fg: var(--greese-button-tone);
+    --greese-button-bg: transparent;
+    --greese-button-bg-hover: color-mix(
+      in oklab,
+      var(--greese-button-tone) 10%,
+      transparent
+    );
+    --greese-button-bg-active: color-mix(
+      in oklab,
+      var(--greese-button-tone) 18%,
+      transparent
+    );
+  }
+
+  // Plain text: the surrounding text's color and no box, so it reads as
+  // text and only a faint tint on hover says it's a button.
+  .greese-Button--text {
+    --greese-button-fg: currentcolor;
+    --greese-button-bg: transparent;
+    --greese-button-bg-hover: color-mix(
+      in oklab,
+      var(--greese-button-tone) 8%,
+      transparent
+    );
+    --greese-button-bg-active: color-mix(
+      in oklab,
+      var(--greese-button-tone) 14%,
+      transparent
+    );
+  }
+
+  // Sizes
+  @each $size, $spec in controls.$sizes {
+    .greese-Button--size-#{$size} {
+      --greese-button-height: #{map.get($spec, height)};
+      --greese-button-padding: #{map.get($spec, padding)};
+
+      font-size: map.get($spec, font);
+    }
+  }
+
+  .greese-Button-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+
+    > svg {
+      inline-size: 1.25em;
+      block-size: 1.25em;
+    }
+  }
+
+  // Loading: hide the content (keeping its width) and spin a ring in its place.
+  .greese-Button[data-loading] {
+    color: transparent;
+    cursor: progress;
+
+    &::before {
+      position: absolute;
+      inset: 0;
+      inline-size: 1.1em;
+      block-size: 1.1em;
+      margin: auto;
+      content: '';
+      border: 2px solid var(--greese-button-fg);
+      border-inline-end-color: transparent;
+      border-radius: 50%;
+
+      @include mixins.motion-safe {
+        animation: greese-button-spin 0.7s linear infinite;
+      }
+    }
+
+    > * {
+      visibility: hidden;
+    }
+  }
+
+  @include mixins.responsive-prop(
+    'greese-Button',
+    'width',
+    inline-size,
+    (
+      full: 100%,
+      auto: auto,
+    )
+  );
+
+  @keyframes greese-button-spin {
+    to {
+      rotate: 1turn;
+    }
+  }
+}

package/src/components/ButtonGroup/ButtonGroup.scss

@@ -0,0 +1,56 @@
+@layer greese.components {
+  .greese-ButtonGroup {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--greese-space-2);
+
+    &[data-orientation='vertical'] {
+      flex-direction: column;
+    }
+  }
+
+  // Attached groups join buttons and field frames (Select, Input) alike, so a
+  // button can sit flush against a select or an input.
+  .greese-ButtonGroup--attached {
+    flex-wrap: nowrap;
+    gap: 0;
+
+    > :is(.greese-Button, .greese-Select, .greese-Input) {
+      &:is(:focus-visible, :focus-within) {
+        z-index: 1;
+      }
+    }
+
+    > :is(.greese-Select, .greese-Input) {
+      flex: 1 1 auto;
+      inline-size: auto;
+    }
+
+    &[data-orientation='horizontal']
+      > :is(.greese-Button, .greese-Select, .greese-Input) {
+      &:not(:first-child) {
+        margin-inline-start: -1px;
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
+
+      &:not(:last-child) {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+      }
+    }
+
+    &[data-orientation='vertical'] > :is(.greese-Button, .greese-Select, .greese-Input) {
+      &:not(:first-child) {
+        margin-block-start: -1px;
+        border-start-start-radius: 0;
+        border-start-end-radius: 0;
+      }
+
+      &:not(:last-child) {
+        border-end-start-radius: 0;
+        border-end-end-radius: 0;
+      }
+    }
+  }
+}

package/src/components/Card/Card.scss

@@ -0,0 +1,99 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Card {
+    // Resolved padding, readable by CardMedia to bleed through it.
+    --greese-card-padding: var(--greese-space-4);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--greese-space-4);
+    min-inline-size: 0;
+    padding: var(--greese-card-padding);
+    overflow: hidden;
+    color: var(--greese-color-fg);
+    border-radius: var(--greese-corner-surface);
+
+    @include mixins.up(md) {
+      --greese-card-padding: var(--greese-space-5);
+    }
+  }
+
+  .greese-Card--outline {
+    background-color: var(--greese-color-surface-overlay);
+    border: 1px solid var(--greese-color-border);
+  }
+
+  .greese-Card--elevated {
+    background-color: var(--greese-color-surface-overlay);
+    box-shadow: var(--greese-shadow-md);
+  }
+
+  .greese-Card--filled {
+    background-color: var(--greese-color-surface);
+  }
+
+  .greese-Card--interactive {
+    position: relative;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      box-shadow var(--greese-duration-normal) var(--greese-easing-standard),
+      border-color var(--greese-duration-normal) var(--greese-easing-standard),
+      translate var(--greese-duration-normal) var(--greese-easing-standard);
+
+    @include mixins.focus-ring;
+
+    @include mixins.hover {
+      border-color: var(--greese-color-border-strong);
+      box-shadow: var(--greese-shadow-lg);
+
+      @include mixins.motion-safe {
+        translate: 0 -2px;
+      }
+    }
+
+    // Hovered, the card rises 2px: its hit area reaches the 2px below it, so
+    // a pointer resting on its lower edge stays over it, instead of the card
+    // rising away, settling back under the pointer and rising again. That
+    // strip is outside the box, so this card doesn't clip its overflow (which
+    // would clip the strip too); CardMedia rounds its own corners instead.
+    overflow: visible;
+
+    // It's measured from the padding box, inside any border, so it reaches
+    // 4px: the 2px rise, with room for an outline's border.
+    &::before {
+      position: absolute;
+      inset-block: 100% -4px;
+      inset-inline: 0;
+      content: '';
+    }
+  }
+
+  // Media clips itself to the card's corners where it bleeds to an edge, so
+  // it fits a card that doesn't clip (an interactive one) as well.
+  .greese-CardMedia {
+    margin-inline: calc(-1 * var(--greese-card-padding));
+    overflow: hidden;
+
+    &:first-child {
+      margin-block-start: calc(-1 * var(--greese-card-padding));
+      border-start-start-radius: inherit;
+      border-start-end-radius: inherit;
+    }
+
+    &:last-child {
+      margin-block-end: calc(-1 * var(--greese-card-padding));
+      border-end-start-radius: inherit;
+      border-end-end-radius: inherit;
+    }
+
+    > :is(img, video, picture) {
+      display: block;
+      inline-size: 100%;
+    }
+  }
+
+  // After the default, so a padding prop wins at every breakpoint.
+  @include mixins.responsive-prop('greese-Card', 'padding', --greese-card-padding);
+}

package/src/components/Carousel/Carousel.scss

@@ -0,0 +1,161 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Carousel {
+    @include mixins.component-root;
+
+    position: relative;
+    display: grid;
+    gap: var(--greese-space-3);
+    min-inline-size: 0;
+  }
+
+  // Native scrolling and snapping: swipe, trackpad and keys all work.
+  .greese-Carousel-viewport {
+    --greese-carousel-per-view: 1;
+    --greese-carousel-gap: var(--greese-space-3);
+
+    display: flex;
+    gap: var(--greese-carousel-gap);
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    border-radius: var(--greese-corner-panel);
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    @include mixins.focus-ring;
+
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
+    }
+  }
+
+  // Each slide's width: the viewport shared by `per-view` slides and the gaps.
+  .greese-CarouselSlide {
+    --greese-carousel-gaps: calc(
+      (var(--greese-carousel-per-view) - 1) * var(--greese-carousel-gap)
+    );
+
+    flex: 0 0 calc((100% - var(--greese-carousel-gaps)) / var(--greese-carousel-per-view));
+    min-inline-size: 0;
+    scroll-snap-align: start;
+  }
+
+  // Previous and next sit over the viewport's edges, centred on it.
+  .greese-Carousel-control {
+    position: absolute;
+    inset-block-start: calc(50% - 1.25rem - var(--greese-carousel-dots, 0px) / 2);
+    display: inline-grid;
+    place-items: center;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    padding: 0;
+    color: var(--greese-color-fg);
+    cursor: pointer;
+    background-color: color-mix(
+      in oklab,
+      var(--greese-color-surface-overlay) 88%,
+      transparent
+    );
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-round);
+    box-shadow: var(--greese-shadow-md);
+    translate: 0 -50%;
+    transition: opacity var(--greese-duration-fast) var(--greese-easing-standard);
+
+    @include mixins.focus-ring;
+    @include mixins.touch-target;
+
+    &:disabled {
+      cursor: default;
+      opacity: 0;
+    }
+
+    > svg {
+      inline-size: 1.125rem;
+      block-size: 1.125rem;
+    }
+  }
+
+  .greese-Carousel:has(.greese-Carousel-indicators) {
+    --greese-carousel-dots: calc(0.5rem + var(--greese-space-3));
+  }
+
+  .greese-Carousel-control--previous {
+    inset-inline-start: var(--greese-space-2);
+  }
+
+  .greese-Carousel-control--next {
+    inset-inline-end: var(--greese-space-2);
+
+    > svg {
+      scale: -1 1;
+    }
+  }
+
+  // The chevron points to the inline start; mirror both in RTL.
+  .greese-Carousel-control:dir(rtl) > svg {
+    scale: -1 1;
+  }
+
+  .greese-Carousel-control--next:dir(rtl) > svg {
+    scale: 1;
+  }
+
+  // Phones swipe; the buttons come back where a pointer can hover.
+  @media (hover: none) {
+    .greese-Carousel-control {
+      display: none;
+    }
+  }
+
+  .greese-Carousel-indicators {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--greese-space-1);
+    justify-content: center;
+  }
+
+  // Each dot keeps one size; the active pill is drawn by clip-path, which
+  // never changes layout. A width change would: mid-scroll, every frame of
+  // it made WebKit re-snap the viewport and pull it back a slide.
+  .greese-Carousel-indicator {
+    position: relative;
+    inline-size: 1.5rem;
+    block-size: 0.5rem;
+    padding: 0;
+    cursor: pointer;
+    background: none;
+    border: 0;
+
+    @include mixins.focus-ring;
+    @include mixins.touch-target(24px);
+
+    &::before {
+      position: absolute;
+      inset: 0;
+      content: '';
+      background-color: var(--greese-color-border-strong);
+      border-radius: var(--greese-corner-pill);
+      clip-path: inset(0 calc(50% - 0.25rem) round var(--greese-corner-pill));
+      transition:
+        clip-path var(--greese-duration-normal) var(--greese-easing-standard),
+        background-color var(--greese-duration-normal) var(--greese-easing-standard);
+    }
+
+    &[aria-current='true']::before {
+      background-color: var(--greese-color-primary);
+      clip-path: inset(0 round var(--greese-corner-pill));
+    }
+  }
+
+  @include mixins.responsive-prop(
+    'greese-Carousel',
+    'per-view',
+    --greese-carousel-per-view
+  );
+}

package/src/components/Center/Center.scss

@@ -0,0 +1,11 @@
+@layer greese.components {
+  .greese-Center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .greese-Center--inline {
+    display: inline-flex;
+  }
+}