@ethlete/components 1.0.0-next.68 → 1.0.0-next.70

package/src/lib/forms/color-input/color-picker-panel.component.css

@@ -0,0 +1,349 @@
+@layer components {
+  @property --et-color-picker-area-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 240px;
+  }
+
+  @property --et-color-picker-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-color-picker-track-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-color-picker-thumb-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  .et-overlay.et-with-default-animation.et-overlay--color-picker {
+    &.et-animation-enter-from,
+    &.et-animation-leave-to {
+      opacity: 0;
+    }
+
+    &.et-animation-enter-active {
+      transition: opacity 140ms ease;
+    }
+
+    &.et-animation-leave-active {
+      transition: opacity 100ms ease;
+    }
+  }
+
+  .et-color-picker-panel {
+    display: block;
+    box-sizing: border-box;
+    max-inline-size: calc(100vw - 24px);
+    overflow: hidden;
+    padding: 12px;
+    border-radius: 10px;
+    border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    background: var(--et-surface-background-solid, rgb(32 32 32));
+    color: var(--et-surface-color-solid, rgb(244 244 245));
+    box-shadow: var(--et-anchored-panel-shadow, 0 10px 24px rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.16));
+    /* the pane is detached from the field, so it inherits the root font size (10px in this
+       workspace) rather than the field's - it has to name its own */
+    font-size: var(--et-color-picker-font-size);
+
+    &.et-color-picker-panel--resizing {
+      overflow: clip;
+    }
+  }
+
+  .et-color-picker-panel-body {
+    display: grid;
+    /* minmax(0, …), not the implicit auto: an auto track never shrinks below the footer's
+       min-content width, which would push the surfaces out past the pane - where a pointer
+       release counts as "outside" and closes the picker */
+    grid-template-columns: minmax(0, 1fr);
+    /* at least half a thumb: a thumb at an axis end has its centre on the edge, so it reaches
+       half its own size into whatever comes next */
+    gap: 12px;
+    inline-size: var(--et-color-picker-area-size);
+  }
+
+  /* pinned LTR: the gradients below paint physically and the pointer reading in
+     `internals/color-picker-engine.ts` is deliberately not mirrored, so a mirrored surface would
+     put the thumbs' `inset-inline-start` and the range inputs' arrow keys at odds with both */
+  .et-color-picker-area,
+  .et-color-picker-track {
+    direction: ltr;
+  }
+
+  .et-color-picker-area {
+    position: relative;
+    aspect-ratio: 1;
+    border-radius: 8px;
+    background-image:
+      linear-gradient(to top, #000, transparent),
+      linear-gradient(to right, #fff, var(--_et-color-picker-area-hue, #f00));
+    cursor: crosshair;
+
+    &:has(.et-color-picker-channel:focus-visible) {
+      outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+      outline-offset: 2px;
+    }
+  }
+
+  .et-color-picker-track {
+    position: relative;
+    block-size: var(--et-color-picker-track-size);
+    border-radius: 999px;
+
+    &:has(.et-color-picker-channel:focus-visible) {
+      outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+      outline-offset: 2px;
+    }
+  }
+
+  .et-color-picker-track--hue {
+    background-image: linear-gradient(
+      to right,
+      hsl(0 100% 50%),
+      hsl(60 100% 50%),
+      hsl(120 100% 50%),
+      hsl(180 100% 50%),
+      hsl(240 100% 50%),
+      hsl(300 100% 50%),
+      hsl(360 100% 50%)
+    );
+  }
+
+  .et-color-picker-track--alpha {
+    --_et-color-picker-checker: color-mix(in srgb, currentColor 18%, transparent);
+
+    background-image:
+      linear-gradient(to right, transparent, var(--_et-color-picker-alpha-color, #000)),
+      linear-gradient(
+        45deg,
+        var(--_et-color-picker-checker) 25%,
+        transparent 25% 75%,
+        var(--_et-color-picker-checker) 75%
+      ),
+      linear-gradient(
+        45deg,
+        var(--_et-color-picker-checker) 25%,
+        transparent 25% 75%,
+        var(--_et-color-picker-checker) 75%
+      );
+    background-size:
+      100% 100%,
+      8px 8px,
+      8px 8px;
+    background-position:
+      0 0,
+      0 0,
+      4px 4px;
+  }
+
+  /* the ring is white over a dark halo, not a theme token: a thumb sits on the color the user is
+     choosing, so it has to stay legible over every hue a token could not anticipate */
+  .et-color-picker-area-thumb,
+  .et-color-picker-track-thumb {
+    position: absolute;
+    inline-size: var(--et-color-picker-thumb-size);
+    block-size: var(--et-color-picker-thumb-size);
+    border-radius: 50%;
+    border: 2px solid #fff;
+    box-shadow: 0 0 0 1px rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.35);
+    pointer-events: none;
+  }
+
+  .et-color-picker-area-thumb {
+    translate: -50% 50%;
+  }
+
+  .et-color-picker-track-thumb {
+    inset-block-start: 50%;
+    translate: -50% -50%;
+  }
+
+  .et-color-picker-channel {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    margin: 0;
+    padding: 0;
+    appearance: none;
+    background: none;
+    border: none;
+    opacity: 0;
+    cursor: inherit;
+
+    /* a zero-width thumb makes the native value map edge to edge, so the visible thumb above it can
+       sit at the same percentage without drifting half a thumb out at either end */
+    &::-webkit-slider-thumb {
+      appearance: none;
+      inline-size: 0;
+      block-size: 100%;
+    }
+
+    &::-moz-range-thumb {
+      inline-size: 0;
+      block-size: 100%;
+      border: none;
+    }
+  }
+
+  .et-color-picker-area .et-color-picker-channel {
+    pointer-events: none;
+  }
+
+  .et-color-picker-swatches {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .et-color-picker-swatch {
+    inline-size: 20px;
+    block-size: 20px;
+    padding: 0;
+    border-radius: 4px;
+    border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    cursor: pointer;
+
+    &[aria-pressed='true'] {
+      outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+      outline-offset: 1px;
+    }
+
+    &:disabled {
+      cursor: default;
+    }
+  }
+
+  .et-color-picker-preview {
+    --_et-color-picker-checker: color-mix(in srgb, currentColor 18%, transparent);
+    --_et-color-picker-preview-color: transparent;
+
+    flex: none;
+    inline-size: 20px;
+    block-size: 20px;
+    border-radius: 4px;
+    border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    background-image:
+      linear-gradient(var(--_et-color-picker-preview-color), var(--_et-color-picker-preview-color)),
+      linear-gradient(
+        45deg,
+        var(--_et-color-picker-checker) 25%,
+        transparent 25% 75%,
+        var(--_et-color-picker-checker) 75%
+      ),
+      linear-gradient(
+        45deg,
+        var(--_et-color-picker-checker) 25%,
+        transparent 25% 75%,
+        var(--_et-color-picker-checker) 75%
+      );
+    background-size:
+      100% 100%,
+      8px 8px,
+      8px 8px;
+    background-position:
+      0 0,
+      0 0,
+      4px 4px;
+  }
+
+  .et-color-picker-value {
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .et-color-picker-notation {
+    white-space: nowrap;
+  }
+
+  button.et-color-picker-notation {
+    text-decoration: underline dotted from-font;
+    text-underline-offset: 3px;
+
+    &:focus-visible {
+      color: var(--et-surface-color-solid, rgb(244 244 245));
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        color: var(--et-surface-color-solid, rgb(244 244 245));
+      }
+    }
+
+    &:disabled {
+      cursor: default;
+      text-decoration: none;
+    }
+  }
+
+  .et-color-picker-eyedropper {
+    display: grid;
+    flex: none;
+    place-items: center;
+    inline-size: 24px;
+    block-size: 24px;
+    border-radius: 4px;
+
+    i {
+      inline-size: 16px;
+      block-size: 16px;
+    }
+
+    &:disabled {
+      cursor: default;
+    }
+  }
+
+  .et-overlay.et-color-picker-sheet {
+    --et-color-picker-area-size: min(320px, calc(100vw - 48px));
+    --et-color-picker-track-size: 16px;
+    --et-color-picker-thumb-size: 20px;
+
+    border-radius: 16px 16px 0 0;
+
+    .et-overlay-container-drag-handle {
+      display: none;
+    }
+
+    .et-color-picker-panel {
+      max-inline-size: none;
+      border: none;
+      border-radius: 0;
+      box-shadow: none;
+      padding-block: 8px max(16px, env(safe-area-inset-bottom));
+
+      &::before {
+        content: '';
+        display: block;
+        inline-size: 32px;
+        block-size: 4px;
+        margin-inline: auto;
+        margin-block-end: 12px;
+        border-radius: 999px;
+        background: var(--et-surface-border-solid, rgb(255 255 255 / 0.2));
+      }
+    }
+
+    .et-color-picker-panel-body {
+      margin-inline: auto;
+    }
+
+    .et-color-picker-swatch {
+      inline-size: 28px;
+      block-size: 28px;
+    }
+
+    .et-color-picker-eyedropper {
+      inline-size: 40px;
+      block-size: 40px;
+    }
+  }
+}

package/src/lib/forms/date-time/date-input/date-input.component.css

@@ -0,0 +1,35 @@
+@layer components {
+  et-date-input {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-inline-size: 0;
+    color: inherit;
+
+    .et-date-input-field {
+      flex: 1;
+      min-inline-size: 0;
+      border: none;
+      outline: none;
+      background: transparent;
+      font: inherit;
+      color: inherit;
+      padding: 0;
+      caret-color: var(--et-theme-color-primary-solid, currentColor);
+      font-variant-numeric: tabular-nums;
+
+      &::placeholder {
+        color: color-mix(in srgb, currentColor 46%, transparent);
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+    }
+
+    &[data-mixed] .et-date-input-field::placeholder {
+      font-style: italic;
+      color: color-mix(in srgb, currentColor 72%, transparent);
+    }
+  }
+}

package/src/lib/forms/date-time/date-picker-panel.component.css

@@ -0,0 +1,115 @@
+@layer components {
+  .et-overlay.et-with-default-animation.et-overlay--date-picker {
+    &.et-animation-enter-from,
+    &.et-animation-leave-to {
+      opacity: 0;
+    }
+
+    &.et-animation-enter-active {
+      transition:
+        transform 140ms ease,
+        opacity 140ms ease;
+    }
+
+    &.et-animation-leave-active {
+      transition:
+        transform 100ms ease,
+        opacity 100ms ease;
+    }
+  }
+
+  .et-overlay--date-picker[data-overlay-placement^='top'] {
+    &.et-animation-enter-from,
+    &.et-animation-leave-to {
+      transform: translate3d(var(--et-overlay-anchored-x, 0px), var(--et-overlay-anchored-y, 0px), 0) translateY(0.3rem) !important;
+    }
+  }
+
+  .et-overlay--date-picker[data-overlay-placement^='bottom'] {
+    &.et-animation-enter-from,
+    &.et-animation-leave-to {
+      transform: translate3d(var(--et-overlay-anchored-x, 0px), var(--et-overlay-anchored-y, 0px), 0)
+        translateY(-0.3rem) !important;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-overlay.et-with-default-animation.et-overlay--date-picker {
+      &.et-animation-enter-active {
+        transition: opacity 140ms ease;
+      }
+
+      &.et-animation-leave-active {
+        transition: opacity 100ms ease;
+      }
+    }
+
+    .et-overlay--date-picker[data-overlay-placement] {
+      &.et-animation-enter-from,
+      &.et-animation-leave-to {
+        transform: translate3d(var(--et-overlay-anchored-x, 0px), var(--et-overlay-anchored-y, 0px), 0) !important;
+      }
+    }
+  }
+
+  .et-date-picker-panel {
+    display: block;
+    box-sizing: border-box;
+    max-inline-size: calc(100vw - 24px);
+    overflow: hidden;
+    padding: 12px;
+    border-radius: 10px;
+    border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    background: var(--et-surface-background-solid, rgb(32 32 32));
+    color: var(--et-surface-color-solid, rgb(244 244 245));
+    box-shadow: var(
+      --et-date-picker-panel-shadow,
+      var(--et-anchored-panel-shadow, 0 10px 24px rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.16))
+    );
+
+    &.et-date-picker-panel--resizing {
+      overflow: clip;
+    }
+  }
+
+  .et-overlay.et-date-picker-sheet {
+    --et-calendar-cell-size: min(44px, (100vw - 24px) / 7);
+    --et-time-picker-ring-size: min(328px, 100vw - 24px);
+
+    border-radius: 16px 16px 0 0;
+
+    .et-overlay-container-drag-handle {
+      display: none;
+    }
+
+    .et-date-picker-panel {
+      max-inline-size: none;
+      border: none;
+      border-radius: 0;
+      box-shadow: none;
+      padding-block: 8px max(16px, env(safe-area-inset-bottom));
+
+      &::before {
+        content: '';
+        display: block;
+        inline-size: 32px;
+        block-size: 4px;
+        margin-inline: auto;
+        margin-block-end: 12px;
+        border-radius: 999px;
+        background: var(--et-surface-border-solid, rgb(255 255 255 / 0.2));
+      }
+    }
+
+    .et-date-picker-panel-body {
+      display: grid;
+      justify-content: center;
+    }
+
+    /* the tallest case, reserved here and nowhere else: a sheet grows upwards, so a height that
+       followed its content would slide the sheet's top edge under the reader's thumb */
+    .et-calendar-grid {
+      min-block-size: calc(32px + 6 * var(--et-calendar-cell-size));
+    }
+  }
+}

package/src/lib/forms/date-time/date-range-input/date-range-input.component.css

@@ -0,0 +1,16 @@
+@layer components {
+  et-date-range-input {
+    --et-range-input-stack-threshold: 13em;
+    container: et-date-range-input / inline-size;
+
+    @container et-date-range-input (inline-size < 13em) {
+      .et-date-range-input-field {
+        flex-basis: 100%;
+      }
+
+      .et-date-range-input-separator {
+        display: none;
+      }
+    }
+  }
+}

package/src/lib/forms/date-time/date-range-presets.component.css

@@ -0,0 +1,60 @@
+@layer components {
+  @property --et-date-range-presets-gap {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 2px;
+  }
+
+  .et-date-range-presets-layout {
+    display: flex;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .et-date-range-presets {
+    display: flex;
+    flex-direction: column;
+    flex: none;
+    gap: var(--et-date-range-presets-gap);
+    min-inline-size: 12rem;
+    padding-inline-end: 12px;
+    border-inline-end: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.08));
+
+    .et-date-range-preset {
+      justify-content: start;
+    }
+  }
+
+  .et-overlay.et-date-picker-sheet {
+    .et-date-range-presets-layout {
+      flex-direction: column;
+      align-items: center;
+      min-inline-size: 0;
+      max-inline-size: 100%;
+    }
+
+    .et-date-range-presets {
+      --et-date-range-presets-gap: 8px;
+
+      flex-direction: row;
+      align-self: stretch;
+      min-inline-size: 0;
+      padding-inline-end: 0;
+      padding-block-end: 4px;
+      border-inline-end: none;
+      overflow-x: auto;
+      overscroll-behavior-x: contain;
+      scrollbar-width: none;
+
+      .et-date-range-preset {
+        --et-button-border-radius: 999px;
+
+        flex: none;
+      }
+
+      .et-date-range-preset:not([data-pressed='true']) {
+        --_et-button-border-color: var(--et-surface-border-solid, rgb(255 255 255 / 0.16));
+      }
+    }
+  }
+}