@greese/ui 0.0.0-stage → 1.0.0

package/src/components/ColorPicker/ColorPicker.scss

@@ -0,0 +1,235 @@
+@use '../../styles/mixins';
+
+/* stylelint-disable selector-no-vendor-prefix */
+
+// A color picker paints literal colors, whatever the theme: the hue
+// spectrum, the white and black ramps over it, and a transparency checkerboard.
+/* stylelint-disable color-no-hex, function-disallowed-list */
+
+// A checkerboard, so transparency is visible.
+$checker: repeating-conic-gradient(#c8ccd2 0% 25%, #fff 0% 50%) 0 0 / 0.75rem 0.75rem;
+
+@mixin channel-thumb {
+  box-sizing: border-box;
+  inline-size: var(--greese-colorpicker-thumb);
+  block-size: var(--greese-colorpicker-thumb);
+  background: transparent;
+  border: 3px solid #fff;
+  border-radius: var(--greese-corner-round);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--greese-color-black) 35%, transparent),
+    var(--greese-shadow-sm);
+}
+
+@layer greese.components {
+  .greese-ColorPicker {
+    --greese-colorpicker-thumb: 1.125rem;
+
+    @include mixins.component-root;
+
+    display: grid;
+    gap: var(--greese-space-3);
+    inline-size: min(100%, 18rem);
+    color: var(--greese-color-fg);
+
+    @media (pointer: coarse) {
+      --greese-colorpicker-thumb: 1.5rem;
+    }
+
+    &[data-disabled] {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+  }
+
+  .greese-ColorPicker-area {
+    position: relative;
+    aspect-ratio: 4 / 3;
+    cursor: crosshair;
+    background:
+      linear-gradient(to top, #000, transparent),
+      linear-gradient(to right, #fff, transparent),
+      hsl(var(--greese-colorpicker-hue) 100% 50%);
+    border-radius: var(--greese-corner-panel);
+    box-shadow: inset 0 0 0 1px
+      color-mix(in srgb, var(--greese-color-black) 10%, transparent);
+
+    // The page must not scroll while a finger drags the thumb.
+    touch-action: none;
+
+    &:focus-visible {
+      outline: 2px solid var(--greese-color-focus-ring);
+      outline-offset: 2px;
+    }
+
+    [data-disabled] > & {
+      pointer-events: none;
+    }
+  }
+
+  .greese-ColorPicker-thumb {
+    @include channel-thumb;
+
+    position: absolute;
+    inset-block-start: var(--greese-colorpicker-y);
+    inset-inline-start: var(--greese-colorpicker-x);
+    pointer-events: none;
+    background: var(--greese-colorpicker-color);
+    translate: -50% -50%;
+
+    &:dir(rtl) {
+      translate: 50% -50%;
+    }
+  }
+
+  .greese-ColorPicker-controls {
+    display: flex;
+    gap: var(--greese-space-3);
+    align-items: center;
+  }
+
+  .greese-ColorPicker-preview {
+    flex: none;
+    inline-size: 2.25rem;
+    block-size: 2.25rem;
+    background:
+      linear-gradient(
+        var(--greese-colorpicker-current),
+        var(--greese-colorpicker-current)
+      ),
+      $checker;
+    border-radius: var(--greese-corner-round);
+
+    // The theme's border, so dark swatches stay visible on dark surfaces.
+    box-shadow: inset 0 0 0 1px var(--greese-color-border-strong);
+  }
+
+  .greese-ColorPicker-sliders {
+    display: grid;
+    flex: 1;
+    gap: var(--greese-space-3);
+    min-inline-size: 0;
+  }
+
+  .greese-ColorPicker-hue,
+  .greese-ColorPicker-alpha {
+    --greese-colorpicker-track: linear-gradient(
+      to right,
+      #f00,
+      #ff0 17%,
+      #0f0 33%,
+      #0ff 50%,
+      #00f 67%,
+      #f0f 83%,
+      #f00
+    );
+
+    display: block;
+    inline-size: 100%;
+    block-size: var(--greese-colorpicker-thumb);
+    margin: 0;
+    cursor: pointer;
+    background: none;
+    appearance: none;
+
+    &::-webkit-slider-runnable-track {
+      block-size: 0.75rem;
+      background: var(--greese-colorpicker-track);
+      border-radius: var(--greese-corner-pill);
+      box-shadow: inset 0 0 0 1px
+        color-mix(in srgb, var(--greese-color-black) 10%, transparent);
+    }
+
+    &::-moz-range-track {
+      block-size: 0.75rem;
+      background: var(--greese-colorpicker-track);
+      border-radius: var(--greese-corner-pill);
+    }
+
+    &::-webkit-slider-thumb {
+      @include channel-thumb;
+
+      margin-block-start: calc((0.75rem - var(--greese-colorpicker-thumb)) / 2);
+      appearance: none;
+    }
+
+    &::-moz-range-thumb {
+      @include channel-thumb;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    &:focus-visible::-webkit-slider-thumb {
+      outline: 2px solid var(--greese-color-focus-ring);
+      outline-offset: 2px;
+    }
+
+    &:focus-visible::-moz-range-thumb {
+      outline: 2px solid var(--greese-color-focus-ring);
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  .greese-ColorPicker-alpha {
+    --greese-colorpicker-track:
+      linear-gradient(to right, transparent, var(--greese-colorpicker-color)), #{$checker};
+
+    // Hue and opacity run left to right in every direction: they're scales,
+    // not reading order.
+    direction: ltr;
+  }
+
+  .greese-ColorPicker-hue {
+    direction: ltr;
+  }
+
+  .greese-ColorPicker-hex {
+    font-family: var(--greese-font-mono);
+  }
+
+  .greese-ColorPicker-swatches {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--greese-space-2);
+  }
+
+  .greese-ColorPicker-swatch {
+    inline-size: 1.75rem;
+    block-size: 1.75rem;
+    padding: 0;
+    cursor: pointer;
+    background:
+      linear-gradient(var(--greese-colorpicker-swatch), var(--greese-colorpicker-swatch)),
+      $checker;
+    border: 0;
+    border-radius: var(--greese-corner-inset);
+
+    // The theme's border, so dark swatches stay visible on dark surfaces.
+    box-shadow: inset 0 0 0 1px var(--greese-color-border-strong);
+
+    @media (pointer: coarse) {
+      inline-size: 2.25rem;
+      block-size: 2.25rem;
+    }
+
+    &[aria-pressed='true'] {
+      outline: 2px solid var(--greese-color-fg);
+      outline-offset: 2px;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--greese-color-focus-ring);
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+}

package/src/components/Combobox/Combobox.scss

@@ -0,0 +1,83 @@
+@use '../../styles/floating';
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Combobox-toggle {
+    @include mixins.touch-target;
+
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    inline-size: 1.75rem;
+    block-size: 1.75rem;
+    padding: 0;
+    margin-inline-end: calc(-1 * var(--greese-space-2));
+    color: var(--greese-color-fg-muted);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--greese-corner-inset);
+
+    > svg {
+      inline-size: 1rem;
+      block-size: 1rem;
+      rotate: -90deg;
+      transition: rotate var(--greese-duration-fast) var(--greese-easing-standard);
+    }
+
+    &[data-open] > svg {
+      rotate: 90deg;
+    }
+  }
+
+  .greese-Combobox-popup {
+    @include floating.anchored;
+    @include floating.surface;
+
+    max-inline-size: min(28rem, 100vw - 2 * var(--greese-space-3));
+    max-block-size: min(18rem, 50dvh);
+    padding: var(--greese-space-1);
+    overscroll-behavior: contain;
+  }
+
+  .greese-Combobox-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .greese-Combobox-option {
+    display: flex;
+    align-items: center;
+    min-block-size: 2.25rem;
+    padding-inline: var(--greese-space-3);
+    font-size: var(--greese-type-p3-font-size);
+    cursor: pointer;
+    border-radius: var(--greese-corner-inset);
+
+    &[data-active] {
+      background-color: color-mix(in oklab, var(--greese-color-fg) 8%, transparent);
+    }
+
+    &[aria-selected='true'] {
+      font-weight: var(--greese-font-weight-semibold);
+      color: var(--greese-color-primary);
+    }
+
+    &[aria-disabled='true'] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    @media (pointer: coarse) {
+      min-block-size: 2.75rem;
+    }
+  }
+
+  .greese-Combobox-empty {
+    padding: var(--greese-space-2) var(--greese-space-3);
+    margin: 0;
+    font-size: var(--greese-type-p3-font-size);
+    color: var(--greese-color-fg-muted);
+  }
+}

package/src/components/Container/Container.scss

@@ -0,0 +1,28 @@
+@use 'sass:map';
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Container {
+    inline-size: 100%;
+    margin-inline: auto;
+
+    // Safe areas are physical (notch on the left or right in landscape).
+    padding-right: max(var(--greese-space-4), env(safe-area-inset-right));
+    padding-left: max(var(--greese-space-4), env(safe-area-inset-left));
+
+    @include mixins.up(md) {
+      padding-right: max(var(--greese-space-6), env(safe-area-inset-right));
+      padding-left: max(var(--greese-space-6), env(safe-area-inset-left));
+    }
+  }
+
+  @each $size in (sm, md, lg, xl) {
+    .greese-Container--size-#{$size} {
+      max-inline-size: map.get(mixins.$breakpoints, $size);
+    }
+  }
+
+  .greese-Container--size-full {
+    max-inline-size: none;
+  }
+}

package/src/components/Countdown/Countdown.scss

@@ -0,0 +1,28 @@
+@layer greese.components {
+  .greese-Countdown {
+    display: inline-flex;
+    gap: 0.35em;
+    align-items: baseline;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .greese-Countdown--clock {
+    gap: 0;
+  }
+
+  .greese-Countdown-unit {
+    display: inline-flex;
+    align-items: baseline;
+  }
+
+  .greese-Countdown-separator {
+    padding-inline: 0.1em;
+    opacity: 0.6;
+  }
+
+  .greese-Countdown-label {
+    margin-inline-start: 0.1em;
+    font-size: 0.7em;
+    color: var(--greese-color-fg-muted);
+  }
+}

package/src/components/DateField/DateField.scss

@@ -0,0 +1,19 @@
+// Vendor pseudo-elements are the only way to reach native date input parts.
+/* stylelint-disable selector-no-vendor-prefix */
+
+@layer greese.components {
+  .greese-DateField .greese-Input-control {
+    // iOS collapses an empty date input and centres its text.
+    min-block-size: 1.5em;
+    text-align: start;
+
+    &::-webkit-date-and-time-value {
+      text-align: start;
+    }
+
+    &::-webkit-calendar-picker-indicator {
+      cursor: pointer;
+      opacity: 0.7;
+    }
+  }
+}

package/src/components/Dialog/Dialog.scss

@@ -0,0 +1,268 @@
+@use 'sass:list';
+@use 'sass:map';
+@use '../../styles/floating';
+@use '../../styles/mixins';
+
+$widths: (
+  sm: 24rem,
+  md: 32rem,
+  lg: 48rem,
+  xl: 74rem,
+);
+
+@layer greese.components {
+  // Scroll lock: the page stops scrolling while a modal is open. The
+  // scrollbar goes, rather than leaving a reserved gutter: browsers clip the
+  // top layer at a gutter, which left an undimmed strip and a gap beside end
+  // drawers wherever scrollbars always show. Padding by the scrollbar's width
+  // (measured on open) keeps the page from shifting.
+  :root:has(.greese-Dialog:modal) {
+    padding-inline-end: var(--greese-scrollbar-gap, 0);
+    overflow: hidden;
+  }
+
+  .greese-Dialog {
+    @include mixins.component-root;
+    @include floating.surface;
+    @include floating.enter-exit('[open]', 0 0.5rem);
+
+    flex-direction: column;
+    gap: var(--greese-space-3);
+    inline-size: min(
+      var(--greese-dialog-width, 32rem),
+      100vw - 2 * var(--greese-space-4)
+    );
+    max-inline-size: none;
+    max-block-size: calc(100dvh - 2 * var(--greese-space-4));
+    padding: var(--greese-space-5);
+    overflow: hidden;
+    border-radius: var(--greese-corner-surface);
+
+    &[open] {
+      display: flex;
+    }
+
+    // The scrim moves as the theme says too: it arrives with
+    // the theme's `backdrop` role (the base theme fades it in) and stays
+    // rendered for the theme's exit while it fades out.
+    &::backdrop {
+      background-color: var(--greese-color-scrim);
+      opacity: 0;
+      transition-property: opacity, display, overlay;
+      transition-duration: var(
+        --greese-motion-exit-duration,
+        var(--greese-duration-normal)
+      );
+      transition-timing-function: var(
+        --greese-motion-exit-ease,
+        var(--greese-easing-exit)
+      );
+      transition-behavior: allow-discrete;
+    }
+
+    &[open]::backdrop {
+      opacity: 1;
+
+      @include mixins.motion-safe {
+        @include mixins.role-entrance(
+          backdrop,
+          greese-backdrop-in,
+          normal,
+          var(--greese-easing-standard)
+        );
+      }
+    }
+  }
+
+  @each $size, $width in $widths {
+    .greese-Dialog--size-#{$size} {
+      --greese-dialog-width: #{$width};
+    }
+  }
+
+  .greese-Dialog--size-full {
+    inline-size: 100vw;
+    max-block-size: 100dvh;
+    block-size: 100dvh;
+    padding-block: max(var(--greese-space-5), env(safe-area-inset-top))
+      max(var(--greese-space-5), env(safe-area-inset-bottom));
+    border: 0;
+    border-radius: 0;
+  }
+
+  .greese-Dialog-header {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--greese-space-3);
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  .greese-Dialog-title {
+    margin: 0;
+    font-size: var(--greese-type-s2-font-size);
+    font-weight: var(--greese-font-weight-semibold);
+    line-height: var(--greese-line-height-snug);
+  }
+
+  .greese-Dialog-close {
+    margin-block-start: calc(-1 * var(--greese-space-1));
+    margin-inline-end: calc(-1 * var(--greese-space-2));
+  }
+
+  .greese-Dialog-description {
+    flex-shrink: 0;
+    margin: 0;
+    font-size: var(--greese-type-p3-font-size);
+    color: var(--greese-color-fg-muted);
+  }
+
+  .greese-Dialog-body {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  // Phones: actions stack full-width, primary (last) on top, for thumbs.
+  .greese-Dialog-footer {
+    display: flex;
+    flex-direction: column-reverse;
+    flex-shrink: 0;
+    gap: var(--greese-space-2);
+
+    @include mixins.up(sm) {
+      flex-flow: row wrap;
+      justify-content: flex-end;
+    }
+  }
+
+  // Drawer: edge-anchored, in logical terms so start/end follow the writing
+  // direction. Each placement sets every geometry property, so a larger
+  // breakpoint's placement fully replaces a smaller one's.
+  .greese-Drawer {
+    // A drawer is a dialog that comes from its edge: it takes the theme's
+    // `drawer` role, not the dialog's.
+    @include floating.motion-role(drawer, $shared: false);
+
+    --greese-drawer-dir: 1;
+
+    max-block-size: none;
+    margin: 0;
+    border-radius: 0;
+
+    &:dir(rtl) {
+      --greese-drawer-dir: -1;
+    }
+  }
+
+  $edge: var(--greese-corner-surface);
+  $safe-top: max(var(--greese-space-5), env(safe-area-inset-top));
+  $safe-bottom: max(var(--greese-space-5), env(safe-area-inset-bottom));
+  $side-size: min(24rem, 100vw - 3rem);
+  $placements: (
+    end: (
+      inset-block: 0,
+      inset-inline: auto 0,
+      inline-size: $side-size,
+      block-size: 100dvh,
+      max-block-size: none,
+      padding-block: $safe-top $safe-bottom,
+      radius: $edge 0 0 $edge,
+      from: calc(100% * var(--greese-drawer-dir)) 0,
+    ),
+    start: (
+      inset-block: 0,
+      inset-inline: 0 auto,
+      inline-size: $side-size,
+      block-size: 100dvh,
+      max-block-size: none,
+      padding-block: $safe-top $safe-bottom,
+      radius: 0 $edge $edge 0,
+      from: calc(-100% * var(--greese-drawer-dir)) 0,
+    ),
+    bottom: (
+      inset-block: auto 0,
+      inset-inline: 0,
+      inline-size: 100vw,
+      block-size: auto,
+      max-block-size: 85dvh,
+      padding-block: var(--greese-space-5) $safe-bottom,
+      radius: $edge $edge 0 0,
+      from: 0 100%,
+    ),
+    top: (
+      inset-block: 0 auto,
+      inset-inline: 0,
+      inline-size: 100vw,
+      block-size: auto,
+      max-block-size: 85dvh,
+      padding-block: $safe-top var(--greese-space-5),
+      radius: 0 0 $edge $edge,
+      from: 0 -100%,
+    ),
+  );
+
+  @each $bp, $_ in mixins.$breakpoints {
+    @include mixins.up($bp) {
+      @each $placement, $g in $placements {
+        $radius: map.get($g, radius);
+
+        .greese-Drawer--#{$bp}-placement-#{$placement} {
+          // Read by the swipe-to-close handler: which way a drag dismisses.
+          --greese-drawer-edge: #{$placement};
+
+          inset-block: map.get($g, inset-block);
+          inset-inline: map.get($g, inset-inline);
+          inline-size: map.get($g, inline-size);
+          block-size: map.get($g, block-size);
+          max-block-size: map.get($g, max-block-size);
+          padding-block: map.get($g, padding-block);
+          border-start-start-radius: list.nth($radius, 1);
+          border-start-end-radius: list.nth($radius, 2);
+          border-end-end-radius: list.nth($radius, 3);
+          border-end-start-radius: list.nth($radius, 4);
+
+          // Where it opens from: the edge. The theme decides how it moves.
+          --greese-overlay-origin: #{map.get($g, from)};
+        }
+      }
+    }
+  }
+
+  // Swipe-to-close starts on the header; it must not pan the page.
+  .greese-Drawer .greese-Dialog-header {
+    position: relative;
+    touch-action: none;
+  }
+
+  // A grab handle on bottom sheets, at every breakpoint where they are bottom.
+  @each $bp, $_ in mixins.$breakpoints {
+    @include mixins.up($bp) {
+      .greese-Drawer--#{$bp}-placement-bottom .greese-Dialog-header::before {
+        position: absolute;
+        inset-block-start: calc(-1 * var(--greese-space-3));
+        inset-inline: 0;
+        display: block;
+        inline-size: 2.5rem;
+        block-size: 4px;
+        margin-inline: auto;
+        content: '';
+        background-color: var(--greese-color-border-strong);
+        border-radius: var(--greese-corner-pill);
+      }
+
+      @each $placement in (start, end, top) {
+        .greese-Drawer--#{$bp}-placement-#{$placement} .greese-Dialog-header::before {
+          display: none;
+        }
+      }
+    }
+  }
+
+  @keyframes greese-backdrop-in {
+    from {
+      opacity: 0;
+    }
+  }
+}