@greese/ui 0.0.0-stage → 1.1.0

package/src/components/Diff/Diff.scss

@@ -0,0 +1,125 @@
+@use '../../styles/mixins';
+
+/* stylelint-disable selector-no-vendor-prefix */
+
+@layer greese.components {
+  // Both versions share one grid cell; `before` is clipped at the divider.
+  .greese-Diff {
+    @include mixins.component-root;
+
+    --greese-diff-thumb: 44px;
+
+    position: relative;
+    display: grid;
+    overflow: hidden;
+    user-select: none;
+    border-radius: var(--greese-corner-panel);
+
+    > .greese-Diff-item {
+      grid-area: 1 / 1;
+    }
+  }
+
+  .greese-Diff-item {
+    position: relative;
+    display: grid;
+    min-inline-size: 0;
+
+    > img,
+    > video,
+    > picture {
+      display: block;
+      inline-size: 100%;
+      block-size: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .greese-Diff-item--before {
+    clip-path: inset(0 calc(100% - var(--greese-diff-position)) 0 0);
+
+    &:dir(rtl) {
+      clip-path: inset(0 0 0 calc(100% - var(--greese-diff-position)));
+    }
+  }
+
+  .greese-Diff-tag {
+    position: absolute;
+    inset-block-start: var(--greese-space-2);
+    inset-inline-start: var(--greese-space-2);
+    padding: 0.125rem 0.5rem;
+    font-size: var(--greese-type-caption-font-size);
+    font-weight: var(--greese-font-weight-semibold);
+    color: var(--greese-color-canvas);
+    pointer-events: none;
+    background-color: color-mix(in oklab, var(--greese-color-fg) 70%, transparent);
+    border-radius: var(--greese-corner-pill);
+  }
+
+  .greese-Diff-tag--after {
+    inset-inline: auto var(--greese-space-2);
+  }
+
+  // The divider line with a round grip in the middle.
+  .greese-Diff-handle {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: var(--greese-diff-position);
+    inline-size: 2px;
+    pointer-events: none;
+    background-color: var(--greese-color-canvas);
+    box-shadow: 0 0 0 1px color-mix(in oklab, var(--greese-color-fg) 25%, transparent);
+    translate: -50% 0;
+
+    &:dir(rtl) {
+      translate: 50% 0;
+    }
+
+    &::after {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      inline-size: 2rem;
+      block-size: 2rem;
+      content: '';
+      background-color: var(--greese-color-canvas);
+      border: 2px solid var(--greese-color-border-strong);
+      border-radius: var(--greese-corner-round);
+      box-shadow: var(--greese-shadow-md);
+      translate: -50% -50%;
+    }
+  }
+
+  .greese-Diff:has(.greese-Diff-range:focus-visible) .greese-Diff-handle::after {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  // The real control: a range covering the whole area, invisible, whose
+  // thumb is exactly under the grip, so dragging the grip works on touch.
+  .greese-Diff-range {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(var(--greese-diff-thumb) / -2);
+    inline-size: calc(100% + var(--greese-diff-thumb));
+    block-size: 100%;
+    margin: 0;
+    cursor: ew-resize;
+    touch-action: pan-y;
+    background: transparent;
+    opacity: 0;
+    appearance: none;
+
+    &::-webkit-slider-thumb {
+      inline-size: var(--greese-diff-thumb);
+      block-size: 100vh;
+      appearance: none;
+    }
+
+    &::-moz-range-thumb {
+      inline-size: var(--greese-diff-thumb);
+      block-size: 100vh;
+      border: 0;
+    }
+  }
+}

package/src/components/Divider/Divider.scss

@@ -0,0 +1,22 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Divider {
+    @include mixins.component-root;
+
+    flex-shrink: 0;
+    align-self: stretch;
+    margin: 0;
+    border: 0;
+    border-block-start: 1px solid var(--greese-color-border);
+
+    &[data-orientation='vertical'] {
+      align-self: stretch;
+      inline-size: 0;
+      block-size: auto;
+      min-block-size: 1em;
+      border-block-start: 0;
+      border-inline-start: 1px solid var(--greese-color-border);
+    }
+  }
+}

package/src/components/Dock/Dock.scss

@@ -0,0 +1,86 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Dock {
+    @include mixins.component-root;
+
+    z-index: var(--greese-z-index-sticky);
+    padding-block-end: env(safe-area-inset-bottom);
+    background-color: var(--greese-color-surface-overlay);
+    border-block-start: 1px solid var(--greese-color-border);
+  }
+
+  .greese-Dock--fixed {
+    position: fixed;
+    inset-block-end: 0;
+    inset-inline: 0;
+  }
+
+  @each $bp in (sm, md, lg, xl) {
+    @include mixins.up($bp) {
+      .greese-Dock--hide-from-#{$bp} {
+        display: none;
+      }
+    }
+  }
+
+  .greese-Dock-list {
+    display: flex;
+    justify-content: space-around;
+    max-inline-size: 40rem;
+    padding: 0;
+    margin: 0 auto;
+    list-style: none;
+  }
+
+  .greese-DockItem {
+    display: flex;
+    flex: 1;
+  }
+
+  .greese-DockItem-link {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 0.125rem;
+    align-items: center;
+    justify-content: center;
+    min-block-size: 3.5rem;
+    padding: var(--greese-space-1);
+    font-size: var(--greese-type-caption-font-size);
+    font-weight: var(--greese-font-weight-medium);
+    color: var(--greese-color-fg-muted);
+    text-decoration: none;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--greese-corner-panel);
+    transition: color var(--greese-duration-fast) var(--greese-easing-standard);
+
+    @include mixins.focus-ring(-2px);
+
+    @include mixins.hover {
+      color: var(--greese-color-fg);
+    }
+
+    &[aria-current='page'] {
+      color: var(--greese-color-primary);
+    }
+
+    svg {
+      inline-size: 1.5rem;
+      block-size: 1.5rem;
+    }
+  }
+
+  .greese-DockItem-icon {
+    display: inline-flex;
+  }
+
+  .greese-DockItem-label {
+    max-inline-size: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/src/components/Field/Field.scss

@@ -0,0 +1,38 @@
+@layer greese.components {
+  .greese-Field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--greese-space-2);
+    min-inline-size: 0;
+
+    &[data-disabled] {
+      opacity: 0.7;
+    }
+  }
+
+  .greese-Field-label {
+    font-size: var(--greese-type-p3-font-size);
+    font-weight: var(--greese-font-weight-medium);
+    color: var(--greese-color-fg);
+  }
+
+  .greese-Field-required {
+    margin-inline-start: 0.2em;
+    color: var(--greese-color-negative);
+  }
+
+  .greese-Field-description,
+  .greese-Field-error {
+    margin: 0;
+    font-size: var(--greese-type-p3-font-size);
+    line-height: var(--greese-line-height-snug);
+  }
+
+  .greese-Field-description {
+    color: var(--greese-color-fg-muted);
+  }
+
+  .greese-Field-error {
+    color: var(--greese-color-negative);
+  }
+}

package/src/components/Fieldset/Fieldset.scss

@@ -0,0 +1,63 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Fieldset {
+    @include mixins.component-root;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--greese-space-2);
+    min-inline-size: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+
+    &:disabled {
+      opacity: 0.6;
+    }
+  }
+
+  .greese-Fieldset--card {
+    padding: var(--greese-space-4);
+    background-color: var(--greese-color-surface);
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-surface);
+
+    @include mixins.up(md) {
+      padding: var(--greese-space-5);
+    }
+  }
+
+  // A float takes the legend out of the border, so it lays out like a heading.
+  .greese-Fieldset-legend {
+    float: inline-start;
+    inline-size: 100%;
+    padding: 0;
+    font-size: var(--greese-type-p2-font-size);
+    font-weight: var(--greese-font-weight-semibold);
+    color: var(--greese-color-fg);
+
+    + * {
+      clear: both;
+    }
+  }
+
+  .greese-Fieldset-description {
+    margin: 0;
+    font-size: var(--greese-type-p3-font-size);
+    color: var(--greese-color-fg-muted);
+  }
+
+  .greese-Fieldset-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--greese-space-4);
+    margin-block-start: var(--greese-space-2);
+  }
+
+  .greese-Fieldset-error {
+    margin: 0;
+    font-size: var(--greese-type-p3-font-size);
+    color: var(--greese-color-negative);
+  }
+}

package/src/components/FileInput/FileInput.scss

@@ -0,0 +1,66 @@
+@use 'sass:map';
+@use '../../styles/controls';
+@use '../../styles/mixins';
+
+@layer greese.components {
+  // A greese ui Button (the input's label) and the chosen files' names; the
+  // native input stays in the page, visually hidden, for keyboards and forms.
+  .greese-FileInput {
+    @include mixins.component-root;
+
+    position: relative;
+    display: inline-flex;
+    gap: var(--greese-space-3);
+    align-items: center;
+    max-inline-size: 100%;
+    color: var(--greese-color-fg-muted);
+
+    @include controls.no-zoom-font(var(--greese-file-font));
+
+    // Focus is on the hidden input: the frame shows it, outside any shape the
+    // Button takes.
+    &:has(> .greese-FileInput-control:focus-visible) {
+      border-radius: var(--greese-corner-control);
+      outline: 2px solid var(--greese-color-focus-ring);
+      outline-offset: 2px;
+    }
+
+    &[data-disabled] {
+      cursor: not-allowed;
+      opacity: 0.55;
+
+      > .greese-FileInput-button {
+        pointer-events: none;
+      }
+    }
+  }
+
+  .greese-FileInput-control {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    white-space: nowrap;
+    border: 0;
+    clip-path: inset(50%);
+  }
+
+  .greese-FileInput-button {
+    flex-shrink: 0;
+  }
+
+  .greese-FileInput-files {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  @each $size, $spec in controls.$sizes {
+    .greese-FileInput--size-#{$size} {
+      --greese-file-font: #{map.get($spec, font)};
+    }
+  }
+}

package/src/components/Footer/Footer.scss

@@ -0,0 +1,79 @@
+@use 'sass:map';
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Footer {
+    @include mixins.component-root;
+
+    padding-block: var(--greese-space-7)
+      max(var(--greese-space-6), env(safe-area-inset-bottom));
+    color: var(--greese-color-fg-muted);
+    border-block-start: 1px solid var(--greese-color-border);
+  }
+
+  .greese-Footer-inner {
+    display: grid;
+    gap: var(--greese-space-6);
+    margin-inline: auto;
+    padding-inline: max(var(--greese-space-4), env(safe-area-inset-left))
+      max(var(--greese-space-4), env(safe-area-inset-right));
+  }
+
+  @each $size in (sm, md, lg, xl) {
+    .greese-Footer--size-#{$size} > .greese-Footer-inner {
+      max-inline-size: map.get(mixins.$breakpoints, $size);
+    }
+  }
+
+  // The brand above the columns on phones, beside them from md.
+  .greese-Footer-main {
+    display: grid;
+    gap: var(--greese-space-6);
+
+    @include mixins.up(md) {
+      grid-template-columns: minmax(12rem, 1fr) 2fr;
+    }
+  }
+
+  .greese-Footer-brand {
+    color: var(--greese-color-fg);
+  }
+
+  .greese-Footer-sections {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+    gap: var(--greese-space-5);
+  }
+
+  .greese-Footer-legal {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--greese-space-2) var(--greese-space-4);
+    align-items: center;
+    justify-content: space-between;
+    padding-block-start: var(--greese-space-4);
+    font-size: var(--greese-type-p3-font-size);
+    border-block-start: 1px solid var(--greese-color-border);
+  }
+
+  .greese-FooterSection {
+    display: grid;
+    gap: var(--greese-space-3);
+    align-content: start;
+  }
+
+  .greese-FooterSection-title {
+    margin: 0;
+    font-size: var(--greese-type-p3-font-size);
+    font-weight: var(--greese-font-weight-semibold);
+    color: var(--greese-color-fg);
+  }
+
+  .greese-FooterSection-links {
+    display: grid;
+    gap: var(--greese-space-2);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+}

package/src/components/Grid/Grid.scss

@@ -0,0 +1,86 @@
+@use 'sass:map';
+@use '../../styles/mixins';
+
+$column-counts: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
+
+@function column-tokens() {
+  $map: ();
+
+  @each $n in $column-counts {
+    $map: map.set($map, $n, repeat(#{$n}, minmax(0, 1fr)));
+  }
+
+  @return $map;
+}
+
+@function size-tokens() {
+  $map: (
+    full: #{'1 / -1'},
+  );
+
+  @each $n in $column-counts {
+    $map: map.set($map, $n, span #{$n} / span #{$n});
+  }
+
+  @return $map;
+}
+
+@layer greese.components {
+  // Every Grid can be a cell; `container` makes it a grid too.
+  .greese-Grid {
+    min-inline-size: 0;
+  }
+
+  .greese-Grid--container {
+    display: grid;
+  }
+
+  .greese-Grid--queries {
+    container-type: inline-size;
+  }
+
+  @include mixins.responsive-prop(
+    'greese-Grid',
+    'columns',
+    grid-template-columns,
+    column-tokens()
+  );
+
+  // After `columns`, so it wins where both apply.
+  @include mixins.responsive-prop(
+    'greese-Grid',
+    'min-child',
+    grid-template-columns,
+    $template: 'repeat(auto-fill, minmax(min(VALUE, 100%), 1fr))'
+  );
+  @include mixins.responsive-prop('greese-Grid', 'gap', gap, mixins.space-tokens());
+  @include mixins.responsive-prop(
+    'greese-Grid',
+    'align',
+    align-items,
+    (
+      start: start,
+      center: center,
+      end: end,
+      stretch: stretch,
+    )
+  );
+  @include mixins.responsive-prop(
+    'greese-Grid',
+    'justify',
+    justify-items,
+    (
+      start: start,
+      center: center,
+      end: end,
+      stretch: stretch,
+    )
+  );
+  @include mixins.responsive-prop(
+    'greese-Grid',
+    'size',
+    grid-column,
+    size-tokens(),
+    $container-scope: '.greese-Grid--queries >'
+  );
+}

package/src/components/Header/Header.scss

@@ -0,0 +1,111 @@
+@use 'sass:map';
+@use '../../styles/mixins';
+
+@layer greese.components {
+  // A sticky header keeps in-page links clear of itself (attribute selectors:
+  // these rules are on the page, not the component, so they stay as written
+  // where the Studio nests the component's own under `&`): the page's scroll
+  // padding is its height (`--greese-header-height`; set it on :root when the
+  // row is taller), plus a floating one's inset. No JavaScript, and nothing
+  // for each section to declare.
+  :root:has([class~='greese-Header--sticky']) {
+    --greese-header-inset: calc(env(safe-area-inset-top) + 1px);
+
+    scroll-padding-block-start: calc(
+      var(--greese-header-height, 3.5rem) + var(--greese-header-inset)
+    );
+  }
+
+  :root:has([class~='greese-Header--sticky'][class~='greese-Header--floating']) {
+    --greese-header-inset: calc(env(safe-area-inset-top) + 2 * var(--greese-space-3));
+  }
+
+  .greese-Header {
+    @include mixins.component-root;
+
+    padding-block-start: env(safe-area-inset-top);
+    color: var(--greese-color-fg);
+    background-color: var(--greese-color-surface-overlay);
+    border-block-end: 1px solid var(--greese-color-border);
+  }
+
+  .greese-Header--sticky {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--greese-z-index-sticky);
+
+    // A shadow fades in over the first few rem of scroll, with no JS.
+    @supports (animation-timeline: scroll()) {
+      animation: greese-header-elevate linear both;
+      animation-range: 0 3rem;
+      animation-timeline: scroll(nearest block);
+    }
+  }
+
+  .greese-Header-inner {
+    display: flex;
+    gap: var(--greese-space-3) var(--greese-space-4);
+    align-items: center;
+    min-block-size: var(--greese-header-height, 3.5rem);
+    margin-inline: auto;
+    padding-inline: max(var(--greese-space-4), env(safe-area-inset-left))
+      max(var(--greese-space-4), env(safe-area-inset-right));
+  }
+
+  @each $size in (sm, md, lg, xl) {
+    .greese-Header--size-#{$size} > .greese-Header-inner {
+      max-inline-size: map.get(mixins.$breakpoints, $size);
+    }
+  }
+
+  .greese-Header-brand {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+  }
+
+  // The navigation takes the room between; the actions sit at the end.
+  .greese-Header-nav {
+    display: flex;
+    flex: 1 1 auto;
+    gap: var(--greese-space-2);
+    align-items: center;
+    min-inline-size: 0;
+  }
+
+  .greese-Header-actions {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--greese-space-2);
+    align-items: center;
+  }
+
+  // Floating: the bar itself is inset from the page's edges, rounded and
+  // raised; the header around it lets the page show through the gap.
+  .greese-Header--floating {
+    padding: calc(env(safe-area-inset-top) + var(--greese-space-3)) var(--greese-space-3)
+      0;
+    pointer-events: none;
+    background: none;
+    border-block-end: 0;
+    animation: none;
+
+    > .greese-Header-inner {
+      pointer-events: auto;
+      background-color: var(--greese-color-surface-overlay);
+      border: 1px solid var(--greese-color-border);
+      border-radius: var(--greese-corner-surface);
+      box-shadow: var(--greese-shadow-md);
+    }
+  }
+
+  @keyframes greese-header-elevate {
+    from {
+      box-shadow: none;
+    }
+
+    to {
+      box-shadow: var(--greese-shadow-md);
+    }
+  }
+}

package/src/components/Heading/Heading.scss

@@ -0,0 +1,7 @@
+// A heading's look is a type variant (`greese-Type--h2`, Type.scss), the one
+// for its level unless it names another; this only resets the element's margin.
+@layer greese.components {
+  .greese-Heading {
+    margin: 0;
+  }
+}

package/src/components/Icon/Icon.scss

@@ -0,0 +1,12 @@
+@layer greese.components {
+  .greese-Icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    vertical-align: middle;
+
+    > svg {
+      inline-size: var(--greese-icon-size, 1.25em);
+      block-size: var(--greese-icon-size, 1.25em);
+    }
+  }
+}

package/src/components/IconButton/IconButton.scss

@@ -0,0 +1,6 @@
+@layer greese.components {
+  .greese-IconButton {
+    inline-size: var(--greese-button-height);
+    padding: 0;
+  }
+}