@greese/ui 0.0.0-stage → 1.1.0

package/src/components/ChatBubble/ChatBubble.scss

@@ -0,0 +1,119 @@
+@use '../../styles/mixins';
+@use '../../styles/tones';
+
+@layer greese.components {
+  @include tones.classes('greese-ChatBubble', 'greese-chat-tone');
+
+  .greese-ChatBubble--neutral {
+    --greese-chat-tone: var(--greese-color-surface);
+    --greese-chat-tone-on: var(--greese-color-fg);
+  }
+
+  // Avatar column at the bottom, then header, bubble and footer stacked.
+  .greese-ChatBubble {
+    @include mixins.component-root;
+
+    --greese-chat-tail: 0.75rem;
+
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+
+    // Room for the tail between the avatar and the bubble.
+    column-gap: calc(var(--greese-chat-tail) + var(--greese-space-1));
+    justify-items: start;
+
+    // No avatar: keep the tail inside the message's own box.
+    &:not(:has(> .greese-ChatBubble-avatar)) {
+      padding-inline-start: var(--greese-chat-tail);
+    }
+
+    > :not(.greese-ChatBubble-avatar) {
+      grid-column: 2;
+    }
+  }
+
+  .greese-ChatBubble--end {
+    grid-template-columns: minmax(0, 1fr) auto;
+    justify-items: end;
+
+    &:not(:has(> .greese-ChatBubble-avatar)) {
+      padding-inline: 0 var(--greese-chat-tail);
+    }
+
+    > :not(.greese-ChatBubble-avatar) {
+      grid-column: 1;
+    }
+
+    > .greese-ChatBubble-avatar {
+      grid-column: 2;
+    }
+  }
+
+  .greese-ChatBubble-avatar {
+    grid-row: 1 / span 3;
+    align-self: end;
+  }
+
+  .greese-ChatBubble-header {
+    display: flex;
+    gap: var(--greese-space-2);
+    align-items: baseline;
+    margin-block-end: var(--greese-space-1);
+    font-size: var(--greese-type-caption-font-size);
+  }
+
+  .greese-ChatBubble-author {
+    font-weight: var(--greese-font-weight-semibold);
+    color: var(--greese-color-fg);
+  }
+
+  .greese-ChatBubble-time,
+  .greese-ChatBubble-footer {
+    font-size: var(--greese-type-caption-font-size);
+    color: var(--greese-color-fg-muted);
+  }
+
+  .greese-ChatBubble-footer {
+    margin-block-start: var(--greese-space-1);
+  }
+
+  .greese-ChatBubble-bubble {
+    position: relative;
+    max-inline-size: min(36rem, 85%);
+    padding: var(--greese-space-2) var(--greese-space-3);
+    overflow-wrap: anywhere;
+    color: var(--greese-chat-tone-on);
+    background-color: var(--greese-chat-tone);
+    border-radius: var(--greese-corner-surface);
+
+    // Square where the tail joins, so the bubble runs into its point.
+    border-end-start-radius: 0;
+  }
+
+  .greese-ChatBubble--end .greese-ChatBubble-bubble {
+    border-end-start-radius: var(--greese-corner-surface);
+    border-end-end-radius: 0;
+  }
+
+  // The tail: a wedge at the lower corner on the author's side, pointing out.
+  .greese-ChatBubble-bubble::before {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: calc(var(--greese-chat-tail) * -1 + 1px);
+    inline-size: var(--greese-chat-tail);
+    block-size: var(--greese-chat-tail);
+    content: '';
+    background-color: inherit;
+    clip-path: polygon(100% 0, 100% 100%, 0 100%);
+  }
+
+  .greese-ChatBubble--end .greese-ChatBubble-bubble::before {
+    inset-inline: auto calc(var(--greese-chat-tail) * -1 + 1px);
+    clip-path: polygon(0 0, 100% 100%, 0 100%);
+  }
+
+  // clip-path is physical: mirror the wedge in right-to-left text.
+  .greese-ChatBubble-bubble:dir(rtl)::before {
+    scale: -1 1;
+  }
+}

package/src/components/Checkbox/Checkbox.scss

@@ -0,0 +1,66 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Checkbox-input {
+    @include mixins.touch-target;
+
+    position: relative;
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+    margin: 0;
+    cursor: pointer;
+    background-color: var(--greese-color-canvas);
+    border: 1.5px solid var(--greese-color-border-strong);
+    border-radius: var(--greese-corner-inset);
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    appearance: none;
+    transition:
+      background-color var(--greese-duration-fast) var(--greese-easing-standard),
+      border-color var(--greese-duration-fast) var(--greese-easing-standard);
+
+    @include mixins.focus-ring;
+
+    &:checked,
+    &:indeterminate {
+      background-color: var(--greese-color-primary);
+      border-color: var(--greese-color-primary);
+    }
+
+    &[aria-invalid='true'] {
+      border-color: var(--greese-color-negative);
+    }
+  }
+
+  .greese-Checkbox-icon {
+    position: absolute;
+    inline-size: 0.875rem;
+    block-size: 0.875rem;
+    pointer-events: none;
+    fill: none;
+    stroke: var(--greese-color-primary-content);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2.25;
+    opacity: 0;
+  }
+
+  .greese-Checkbox-input:checked + .greese-Checkbox-icon,
+  .greese-Checkbox-input:indeterminate + .greese-Checkbox-icon {
+    opacity: 1;
+  }
+
+  // The icon draws a check, then a dash (CheckDashIcon): checked shows the
+  // first, indeterminate the second.
+  .greese-Checkbox-icon path:last-child,
+  .greese-Checkbox-input:indeterminate + .greese-Checkbox-icon path:first-child {
+    display: none;
+  }
+
+  .greese-Checkbox-input:indeterminate + .greese-Checkbox-icon path:last-child {
+    display: inline;
+  }
+}

package/src/components/Chip/Chip.scss

@@ -0,0 +1,119 @@
+@use 'sass:list';
+@use '../../styles/mixins';
+@use '../../styles/tones';
+
+@layer greese.components {
+  .greese-Chip {
+    display: inline-flex;
+    gap: var(--greese-space-1);
+    align-items: center;
+    min-block-size: 2rem;
+    padding-inline: var(--greese-space-3);
+    font-size: var(--greese-type-p3-font-size);
+    line-height: 1;
+    color: var(--greese-color-fg);
+    white-space: nowrap;
+    background-color: var(--greese-color-surface);
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-pill);
+
+    &:has(.greese-Chip-toggle) {
+      padding-inline: 0;
+    }
+
+    &:has(.greese-Chip-remove) {
+      padding-inline-end: var(--greese-space-1);
+    }
+  }
+
+  $chip-tones: (
+    neutral,
+    primary,
+    secondary,
+    tertiary,
+    accent,
+    positive,
+    negative,
+    warning,
+    info
+  );
+
+  @include tones.classes('greese-Chip', 'greese-chip-tone', $chip-tones);
+
+  // Selected, or a plain (not selectable) chip given a tone: a tint of the
+  // tone. A selectable chip with no tone selects to primary.
+  $plain: ();
+
+  @each $tone in $chip-tones {
+    $plain: list.append(
+      $plain,
+      '.greese-Chip--#{$tone}:not(:has(> .greese-Chip-toggle))',
+      $separator: comma
+    );
+  }
+
+  .greese-Chip--selected,
+  #{$plain} {
+    color: var(--greese-chip-tone, var(--greese-color-primary));
+    background-color: color-mix(
+      in oklab,
+      var(--greese-chip-tone, var(--greese-color-primary)) 14%,
+      transparent
+    );
+    border-color: color-mix(
+      in oklab,
+      var(--greese-chip-tone, var(--greese-color-primary)) 55%,
+      transparent
+    );
+  }
+
+  .greese-Chip-icon {
+    display: inline-flex;
+
+    > svg {
+      inline-size: 1.1em;
+      block-size: 1.1em;
+    }
+  }
+
+  .greese-Chip-toggle,
+  .greese-Chip-remove {
+    @include mixins.touch-target;
+    @include mixins.focus-ring;
+
+    position: relative;
+    display: inline-flex;
+    gap: var(--greese-space-1);
+    align-items: center;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    background: none;
+    border: 0;
+  }
+
+  .greese-Chip-toggle {
+    align-self: stretch;
+    padding-inline: var(--greese-space-3);
+    border-radius: var(--greese-corner-pill);
+  }
+
+  .greese-Chip-remove {
+    justify-content: center;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    color: var(--greese-color-fg-muted);
+    border-radius: var(--greese-corner-round);
+
+    > svg {
+      inline-size: 0.875rem;
+      block-size: 0.875rem;
+    }
+
+    @include mixins.hover {
+      color: var(--greese-color-fg);
+      background-color: color-mix(in oklab, var(--greese-color-fg) 10%, transparent);
+    }
+  }
+}

package/src/components/ChoiceGroup/ChoiceGroup.scss

@@ -0,0 +1,69 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-ChoiceGroup {
+    display: flex;
+    flex-direction: column;
+    gap: var(--greese-space-2);
+    min-inline-size: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+
+    > legend {
+      // Legends ignore flex layout; float makes them participate.
+      float: inline-start;
+      inline-size: 100%;
+      padding: 0;
+      margin-block-end: var(--greese-space-2);
+    }
+  }
+
+  // Shared by Checkbox, Radio and Switch: a label row with the control first.
+  .greese-Checkbox,
+  .greese-Radio,
+  .greese-Switch {
+    @include mixins.component-root;
+
+    display: inline-flex;
+    gap: var(--greese-space-2);
+    align-items: flex-start;
+    font-size: var(--greese-type-p2-font-size);
+    line-height: var(--greese-line-height-snug);
+    color: var(--greese-color-fg);
+
+    &[data-disabled] {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+  }
+
+  .greese-Checkbox-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--greese-space-1);
+  }
+
+  .greese-Checkbox-label {
+    cursor: pointer;
+
+    [data-disabled] > .greese-Checkbox-text > & {
+      cursor: not-allowed;
+    }
+  }
+
+  .greese-Checkbox-description {
+    font-size: var(--greese-type-p3-font-size);
+    color: var(--greese-color-fg-muted);
+  }
+
+  .greese-Checkbox-box {
+    position: relative;
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+
+    // Align the box with the first line of the label.
+    margin-block: calc((1lh - 1.125rem) / 2);
+  }
+}

package/src/components/Code/Code.scss

@@ -0,0 +1,28 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Code {
+    padding: 0.1em 0.35em;
+    font-family: var(--greese-font-mono);
+    font-size: 0.875em;
+    background-color: var(--greese-color-surface);
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-inset);
+  }
+
+  .greese-Code--block {
+    @include mixins.component-root;
+    @include mixins.focus-ring;
+
+    padding: var(--greese-space-4);
+    margin: 0;
+    overflow-x: auto;
+    font-size: var(--greese-type-p3-font-size);
+    line-height: var(--greese-line-height-normal);
+    border-radius: var(--greese-corner-panel);
+
+    > code {
+      font: inherit;
+    }
+  }
+}

package/src/components/Collapsible/Collapsible.scss

@@ -0,0 +1,136 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Collapsible {
+    @include mixins.component-root;
+
+    // Animate open/close where supported (Chromium); elsewhere it snaps.
+    interpolate-size: allow-keywords;
+
+    &::details-content {
+      block-size: 0;
+      overflow: clip;
+      transition:
+        block-size var(--greese-duration-normal) var(--greese-easing-standard),
+        content-visibility var(--greese-duration-normal) allow-discrete;
+    }
+
+    &[open]::details-content {
+      block-size: auto;
+    }
+  }
+
+  .greese-Collapsible-trigger {
+    display: flex;
+    gap: var(--greese-space-3);
+    align-items: center;
+    justify-content: space-between;
+    min-block-size: 2.75rem;
+    padding-block: var(--greese-space-3);
+    font-weight: var(--greese-font-weight-semibold);
+    cursor: pointer;
+    list-style: none;
+    border-radius: var(--greese-corner-inset);
+
+    @include mixins.focus-ring;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+
+  .greese-Collapsible-chevron {
+    fill: none;
+    stroke: currentcolor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 1.75;
+  }
+
+  // The icon: one that turns (`--rotate`), or a closed and an open one stacked
+  // in one cell (`--fade` crossfades them, `--none` switches).
+  .greese-Collapsible-icon {
+    --greese-collapsible-icon-turn: 180deg;
+
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+    inline-size: 1.25em;
+    block-size: 1.25em;
+
+    > * {
+      display: inline-grid;
+      grid-area: 1 / 1;
+      place-items: center;
+
+      > svg {
+        inline-size: 100%;
+        block-size: 100%;
+      }
+    }
+
+    @include mixins.motion-safe {
+      transition: rotate var(--greese-duration-normal) var(--greese-easing-standard);
+
+      > * {
+        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-Collapsible-openIcon {
+    opacity: 0;
+  }
+
+  [open] > .greese-Collapsible-trigger > .greese-Collapsible-icon {
+    &.greese-Collapsible-icon--rotate {
+      rotate: var(--greese-collapsible-icon-turn);
+    }
+
+    > .greese-Collapsible-closedIcon:has(+ .greese-Collapsible-openIcon) {
+      opacity: 0;
+    }
+
+    > .greese-Collapsible-openIcon {
+      opacity: 1;
+    }
+  }
+
+  // Crossfading, each icon turns a quarter as it goes, so the change reads as
+  // one motion.
+  .greese-Collapsible-icon--fade > .greese-Collapsible-openIcon {
+    rotate: -90deg;
+    scale: 0.6;
+  }
+
+  [open] > .greese-Collapsible-trigger > .greese-Collapsible-icon--fade {
+    > .greese-Collapsible-closedIcon {
+      rotate: 90deg;
+      scale: 0.6;
+    }
+
+    > .greese-Collapsible-openIcon {
+      rotate: 0deg;
+      scale: 1;
+    }
+  }
+
+  .greese-Collapsible-icon--none > * {
+    transition: none;
+  }
+
+  .greese-Collapsible-content {
+    padding-block-end: var(--greese-space-4);
+    color: var(--greese-color-fg-muted);
+
+    // Opening, the content's children enter as it grows; the box stays put.
+    [open] > & {
+      @include mixins.content-entrance;
+    }
+  }
+
+  @include mixins.content-entrance-keyframes;
+}