@greese/ui 0.0.0-stage → 1.1.0

package/src/components/Tabs/Tabs.scss

@@ -0,0 +1,108 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Tabs {
+    display: flex;
+    flex-direction: column;
+    gap: var(--greese-space-4);
+
+    &[data-orientation='vertical'] {
+      flex-direction: row;
+    }
+  }
+
+  // Phones: tabs that don't fit scroll sideways rather than wrap or squash.
+  .greese-TabList {
+    display: flex;
+    gap: var(--greese-space-1);
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scroll-snap-type: x proximity;
+    scrollbar-width: none;
+    border-block-end: 1px solid var(--greese-color-border);
+
+    [data-orientation='vertical'] > & {
+      flex-direction: column;
+      flex-shrink: 0;
+      overflow: visible;
+      border-block-end: 0;
+      border-inline-end: 1px solid var(--greese-color-border);
+    }
+  }
+
+  .greese-Tab {
+    @include mixins.touch-target;
+
+    position: relative;
+    flex-shrink: 0;
+    min-block-size: 2.5rem;
+    padding-inline: var(--greese-space-3);
+    font: inherit;
+    font-weight: var(--greese-font-weight-medium);
+    color: var(--greese-color-fg-muted);
+    white-space: nowrap;
+    cursor: pointer;
+    scroll-snap-align: start;
+    background: none;
+    border: 0;
+    border-radius: var(--greese-corner-inset) var(--greese-corner-inset) 0 0;
+    box-shadow: inset 0 -2px 0 transparent;
+    transition:
+      color var(--greese-duration-fast) var(--greese-easing-standard),
+      background-color var(--greese-duration-fast) var(--greese-easing-standard),
+      box-shadow var(--greese-duration-fast) var(--greese-easing-standard);
+
+    @include mixins.focus-ring(-2px);
+
+    @include mixins.hover {
+      color: var(--greese-color-fg);
+      background-color: color-mix(in oklab, var(--greese-color-fg) 6%, transparent);
+    }
+
+    // The current tab is a tinted block over its underline, not a color change
+    // alone. Its fill and edge are hooks a theme reassigns (a color variant
+    // outlines it: `--greese-tab-current-edge: inset 0 0 0 1.5px …`).
+    &[aria-selected='true'] {
+      color: var(--greese-color-fg);
+      background-color: var(
+        --greese-tab-current-bg,
+        color-mix(in oklab, var(--greese-color-primary) 12%, transparent)
+      );
+      box-shadow: var(
+        --greese-tab-current-edge,
+        inset 0 -2px 0 var(--greese-color-primary)
+      );
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+
+    [data-orientation='vertical'] & {
+      text-align: start;
+      border-radius: var(--greese-corner-inset) 0 0 var(--greese-corner-inset);
+
+      &[aria-selected='true'] {
+        box-shadow: var(
+          --greese-tab-current-edge,
+          inset -2px 0 0 var(--greese-color-primary)
+        );
+      }
+    }
+  }
+
+  .greese-TabPanel {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    border-radius: var(--greese-corner-inset);
+
+    @include mixins.focus-ring;
+
+    // A panel's content enters each time its tab is chosen (shown again, it
+    // restarts); the panel itself stays put.
+    @include mixins.content-entrance;
+  }
+
+  @include mixins.content-entrance-keyframes;
+}

package/src/components/Text/Text.scss

@@ -0,0 +1,34 @@
+@use 'sass:list';
+@use '../../styles/tones';
+
+@layer greese.components {
+  .greese-Text {
+    margin: 0;
+  }
+
+  @each $weight in (regular, medium, semibold, bold) {
+    .greese-Text--#{$weight} {
+      font-weight: var(--greese-font-weight-#{$weight});
+    }
+  }
+
+  @each $tone, $pair in tones.$tones {
+    .greese-Text--#{$tone} {
+      color: list.nth($pair, 1);
+    }
+  }
+
+  .greese-Text--truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .greese-Text--clamp {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--greese-text-lines);
+    line-clamp: var(--greese-text-lines);
+  }
+}

package/src/components/TextRotate/TextRotate.scss

@@ -0,0 +1,51 @@
+@use 'sass:math';
+@use '../../styles/mixins';
+
+// Keep in step with TEXT_ROTATE_MAX: each count compiles its own keyframes.
+$max: 6;
+
+@layer greese.components {
+  .greese-TextRotate {
+    display: inline-grid;
+    block-size: 1lh;
+    overflow: hidden;
+    vertical-align: bottom;
+  }
+
+  .greese-TextRotate-track {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .greese-TextRotate-item {
+    block-size: 1lh;
+    white-space: nowrap;
+  }
+
+  // Each count gets keyframes that hold an item, then move up one line in
+  // the last fifth of its slot; the duplicate first item makes the wrap seamless.
+  @for $n from 2 through $max {
+    .greese-TextRotate--#{$n} .greese-TextRotate-track {
+      @include mixins.motion-safe {
+        animation: greese-textrotate-#{$n} var(--greese-textrotate-duration) infinite;
+      }
+    }
+
+    @keyframes greese-textrotate-#{$n} {
+      @for $i from 0 to $n {
+        $start: math.div($i, $n) * 100%;
+        $hold: math.div($i + 0.8, $n) * 100%;
+
+        #{$start},
+        #{$hold} {
+          animation-timing-function: var(--greese-easing-standard);
+          translate: 0 calc(-1lh * #{$i});
+        }
+      }
+
+      100% {
+        translate: 0 calc(-1lh * #{$n});
+      }
+    }
+  }
+}

package/src/components/Textarea/Textarea.scss

@@ -0,0 +1,56 @@
+@use 'sass:map';
+@use '../../styles/controls';
+
+@layer greese.components {
+  // The frame draws the border and states; the textarea inside fills it.
+  .greese-Textarea {
+    @include controls.frame($focus-within: true);
+
+    display: flex;
+    inline-size: 100%;
+  }
+
+  .greese-Textarea-control {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    padding: var(--greese-space-2) var(--greese-textarea-padding);
+    font: inherit;
+    line-height: var(--greese-line-height-normal);
+    color: inherit;
+    resize: vertical;
+    background: none;
+    border: 0;
+    border-radius: inherit;
+    outline: none;
+
+    &::placeholder {
+      color: var(--greese-color-fg-muted);
+      opacity: 1;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  .greese-Textarea--autosize .greese-Textarea-control {
+    // Lines from `rows` up to `maxRows`, in the text's own line height.
+    min-block-size: calc(var(--greese-textarea-rows) * 1lh + 2 * var(--greese-space-2));
+    max-block-size: calc(
+      var(--greese-textarea-max-rows, 1000) * 1lh + 2 * var(--greese-space-2)
+    );
+
+    @supports (field-sizing: content) {
+      field-sizing: content;
+      resize: none;
+    }
+  }
+
+  @each $size, $spec in controls.$sizes {
+    .greese-Textarea--size-#{$size} {
+      --greese-textarea-padding: #{map.get($spec, padding)};
+
+      @include controls.no-zoom-font(map.get($spec, font));
+    }
+  }
+}

package/src/components/ThemeProvider/ThemeProvider.scss

@@ -0,0 +1,7 @@
+@layer greese.components {
+  // A scope, not a box: children lay out as if the wrapper were absent, while
+  // still inheriting its custom properties and color-scheme.
+  .greese-ThemeProvider {
+    display: contents;
+  }
+}

package/src/components/Tile/Tile.scss

@@ -0,0 +1,23 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  // Padding is a default here, so the Box style props (utilities) override it.
+  .greese-Tile {
+    @include mixins.component-root;
+
+    min-inline-size: 0;
+    padding: var(--greese-tile-padding, var(--greese-space-3) var(--greese-space-4));
+    color: var(--greese-color-fg);
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-panel);
+  }
+
+  .greese-Tile--filled {
+    background-color: var(--greese-color-surface);
+  }
+
+  .greese-Tile--dashed {
+    border-style: dashed;
+    border-color: var(--greese-color-border-strong);
+  }
+}

package/src/components/Toast/Toast.scss

@@ -0,0 +1,93 @@
+@use '../../styles/floating';
+@use '../../styles/mixins';
+@use '../../styles/tones';
+
+@layer greese.components {
+  // The region itself is invisible: only the toasts are.
+  .greese-Toaster {
+    inset: auto 0 0;
+    inline-size: 100%;
+    max-inline-size: none;
+    padding: var(--greese-space-3);
+    padding-block-end: max(var(--greese-space-3), env(safe-area-inset-bottom));
+    margin: 0;
+    overflow: visible;
+    pointer-events: none;
+    background: none;
+    border: 0;
+
+    @include mixins.up(md) {
+      inset-inline: auto var(--greese-space-4);
+      inline-size: 24rem;
+      padding: var(--greese-space-4);
+    }
+  }
+
+  .greese-Toaster-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--greese-space-2);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  @include tones.classes(
+    'greese-Toast',
+    'greese-toast-tone',
+    (neutral, primary, secondary, tertiary, info, positive, warning, negative)
+  );
+
+  .greese-Toast {
+    @include floating.surface;
+
+    // The thick start edge in the toast's tone: a hook a shape theme draws
+    // inside the toast, where its clip would cut a border off.
+    --greese-toast-edge: var(--greese-toast-tone);
+
+    display: flex;
+    gap: var(--greese-space-2);
+    align-items: center;
+    padding: var(--greese-space-3);
+    padding-inline-start: var(--greese-space-4);
+    pointer-events: auto;
+    border-inline-start: 3px solid var(--greese-toast-edge);
+
+    // The theme's `toast` role (or a component's `motion()`); the base
+    // theme's rises a little as it fades in.
+    @include mixins.motion-safe {
+      @include mixins.role-entrance(toast, greese-toast-in, normal);
+    }
+  }
+
+  .greese-Toast--neutral {
+    --greese-toast-edge: var(--greese-color-border-strong);
+  }
+
+  .greese-Toast-body {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+
+  .greese-Toast-title,
+  .greese-Toast-description {
+    margin: 0;
+    font-size: var(--greese-type-p3-font-size);
+    line-height: var(--greese-line-height-snug);
+  }
+
+  .greese-Toast-title {
+    font-weight: var(--greese-font-weight-semibold);
+  }
+
+  .greese-Toast-description {
+    color: var(--greese-color-fg-muted);
+  }
+
+  @keyframes greese-toast-in {
+    from {
+      opacity: 0;
+      translate: 0 0.75rem;
+    }
+  }
+}

package/src/components/ToggleButton/ToggleButton.scss

@@ -0,0 +1,23 @@
+@layer greese.components {
+  // Pressed reads as the soft variant of the button's tone, whatever the
+  // resting variant: primary for the default neutral tone, or the tone given
+  // (tone="secondary" presses to a secondary tint).
+  .greese-ToggleButton[aria-pressed='true'] {
+    --greese-button-fg: var(--greese-button-tone);
+    --greese-button-bg: color-mix(in oklab, var(--greese-button-tone) 14%, transparent);
+    --greese-button-bg-hover: color-mix(
+      in oklab,
+      var(--greese-button-tone) 22%,
+      transparent
+    );
+    --greese-button-border: color-mix(
+      in oklab,
+      var(--greese-button-tone) 55%,
+      transparent
+    );
+  }
+
+  .greese-ToggleButton.greese-Button--neutral[aria-pressed='true'] {
+    --greese-button-tone: var(--greese-color-primary);
+  }
+}

package/src/components/Tooltip/Tooltip.scss

@@ -0,0 +1,21 @@
+@use '../../styles/floating';
+
+@layer greese.components {
+  .greese-Tooltip {
+    @include floating.anchored;
+    @include floating.enter-exit(':popover-open', 0 0, tooltip);
+
+    max-inline-size: min(18rem, 100vw - 2 * var(--greese-space-3));
+
+    // A line or two never needs to scroll; not being a scroller lets a
+    // theme's shape draw its border on the tooltip's own box.
+    overflow: visible;
+    padding: var(--greese-space-1) var(--greese-space-2);
+    font-size: var(--greese-type-caption-font-size);
+    line-height: var(--greese-line-height-snug);
+    color: var(--greese-color-canvas);
+    background-color: var(--greese-color-fg);
+    border: 0;
+    border-radius: var(--greese-corner-inset);
+  }
+}

package/src/components/Type/Type.scss

@@ -0,0 +1,35 @@
+// The type variants as classes, for any element: `greese-Type--h2`. Each
+// reads its own custom properties (`--greese-type-h2-font-size`…), which change
+// across breakpoints (src/typography.ts), so the class never does. After
+// Text and Heading, so a variant replaces their weight and line height.
+@use 'sass:map';
+@use '../../../dist/maps' as defaults;
+
+@layer greese.components {
+  @each $variant in map.keys(defaults.$typography) {
+    .greese-Type--#{$variant} {
+      font-size: var(--greese-type-#{$variant}-font-size);
+      font-weight: var(--greese-type-#{$variant}-font-weight);
+      letter-spacing: var(--greese-type-#{$variant}-letter-spacing);
+      line-height: var(--greese-type-#{$variant}-line-height);
+
+      // Inherited unless the variant sets them.
+      @each $prop
+        in (
+          color,
+          font-family,
+          font-style,
+          text-transform,
+          font-feature-settings,
+          font-variation-settings,
+          font-stretch,
+          text-wrap,
+          word-spacing,
+          font-variant-numeric
+        )
+      {
+        #{$prop}: var(--greese-type-#{$variant}-#{$prop}, inherit);
+      }
+    }
+  }
+}

package/src/components/Visibility/Visibility.scss

@@ -0,0 +1,39 @@
+@use 'sass:map';
+@use '../../styles/mixins';
+
+@layer greese.components {
+  // Layout-neutral wrapper when not using asChild.
+  .greese-Visibility {
+    display: contents;
+  }
+}
+
+// Utilities, so hiding beats a component's own display (asChild on a Stack).
+@layer greese.utilities {
+  @each $bp, $min in mixins.$breakpoints {
+    @if $min > 0 {
+      @include mixins.down($bp) {
+        .greese-Visibility--hide-below-#{$bp} {
+          display: none;
+        }
+      }
+
+      @include mixins.up($bp) {
+        .greese-Visibility--hide-from-#{$bp} {
+          display: none;
+        }
+      }
+
+      // Hide's range: from $bp up to (not including) each larger breakpoint.
+      @each $to, $max in mixins.$breakpoints {
+        @if $max > $min {
+          @media (width >= $min) and (width < $max) {
+            .greese-Visibility--hide-#{$bp}-to-#{$to} {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/VisuallyHidden/VisuallyHidden.scss

@@ -0,0 +1,17 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-VisuallyHidden {
+    @include mixins.component-root;
+
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    white-space: nowrap;
+    border: 0;
+    clip-path: inset(50%);
+  }
+}

package/src/styles/_breakpoint-vars.scss

@@ -0,0 +1,16 @@
+// Built with your own breakpoints (changed values or extra keys): the tokens
+// declare the defaults' `--greese-breakpoint-*` custom properties, so
+// redeclare every one with the configured values. Nothing is emitted for the
+// defaults.
+@use 'config';
+@use '../../dist/maps' as defaults;
+
+@if config.$breakpoints != defaults.$breakpoints {
+  @layer greese.tokens {
+    :root {
+      @each $key, $min in config.$breakpoints {
+        --greese-breakpoint-#{$key}: #{$min};
+      }
+    }
+  }
+}

package/src/styles/_config.scss

@@ -0,0 +1,48 @@
+// The configurable part of greese ui's SCSS: the breakpoints. They're fixed
+// when the stylesheet is built (media queries can't read variables), so you
+// change them by compiling with your own, smallest first. Values may change and
+// keys may be added, but xs/sm/md/lg/xl stay, because components use them:
+//   @use 'pkg:@greese/ui/scss' with (
+//     $breakpoints: (xs: 0px, sm: 480px, tablet: 700px, md: 768px, lg: 1024px, xl: 1440px)
+//   );
+// The type system's values can be set the same way (`$typography`, shaped like
+// the defaults: variant -> base | breakpoint -> prop: value; see Typography).
+// Every key gets responsive classes (`greese-Stack--tablet-gap-3`) and a custom
+// property, `--greese-breakpoint-tablet: 700px`. Then call
+// configureBreakpoints({ sm: 480, tablet: 700, … }) so useBreakpoint() and
+// friends agree, and for TypeScript add the key to `BreakpointKeys`.
+@use 'sass:map';
+@use 'sass:string';
+@use '../../dist/maps' as defaults;
+
+$breakpoints: defaults.$breakpoints !default;
+$typography: defaults.$typography !default;
+$space-keys: defaults.$space-keys;
+
+@each $key in map.keys(defaults.$breakpoints) {
+  @if not map.has-key($breakpoints, $key) {
+    @error 'greese ui $breakpoints must keep the key `#{$key}` (components use #{map.keys(defaults.$breakpoints)}); you can add keys and change values. Got #{map.keys($breakpoints)}.';
+  }
+}
+
+// 0 and 0px differ in Sass, and the unit is the point here.
+// stylelint-disable-next-line length-zero-no-unit
+@if map.get($breakpoints, xs) != 0px {
+  @error 'greese ui $breakpoints: `xs` must be 0, got #{map.get($breakpoints, xs)}.';
+}
+
+// Mobile-first rules are emitted in map order, so the map must run smallest
+// to largest, with no two keys sharing a value.
+$_previous: -1px;
+
+@each $key, $min in $breakpoints {
+  @if string.index('#{$key}', '-') {
+    @error 'greese ui $breakpoints: key `#{$key}` must be one word, without dashes, as it goes into class and variable names. Quote a key that starts with a digit (\'2xl\').';
+  }
+
+  @if $min <= $_previous {
+    @error 'greese ui $breakpoints must increase from the first key to the last, but `#{$key}` (#{$min}) does not exceed the one before it.';
+  }
+
+  $_previous: $min;
+}

package/src/styles/_controls.scss

@@ -0,0 +1,88 @@
+// Shared look and sizing for form controls (Input, Select, Textarea, …) and
+// buttons, so every control in a row lines up at the same size.
+@use 'mixins';
+
+/// Control size scale: block size, inline padding, font size.
+$sizes: (
+  xs: (
+    height: 1rem,
+    padding: var(--greese-space-1),
+    font: var(--greese-type-p3-font-size),
+  ),
+  sm: (
+    height: 2rem,
+    padding: var(--greese-space-3),
+    font: var(--greese-type-p3-font-size),
+  ),
+  md: (
+    height: 2.5rem,
+    padding: var(--greese-space-3),
+    font: var(--greese-type-p2-font-size),
+  ),
+  lg: (
+    height: 3rem,
+    padding: var(--greese-space-4),
+    font: var(--greese-type-p2-font-size),
+  ),
+  xl: (
+    height: 4rem,
+    padding: var(--greese-space-4),
+    font: var(--greese-type-p1-font-size),
+  ),
+);
+
+/// iOS Safari zooms the page when a focused control's text is under 16px.
+/// Touch devices therefore never go below 1rem.
+@mixin no-zoom-font($font) {
+  font-size: $font;
+
+  @media (pointer: coarse) {
+    font-size: max(1rem, #{$font});
+  }
+}
+
+/// Border, background, focus ring and state styling for a text-like control.
+/// Apply to the element that draws the frame; `$focus-within` when the real
+/// input sits inside it (Input with adornments, Select).
+@mixin frame($focus-within: false) {
+  @include mixins.component-root;
+
+  color: var(--greese-color-fg);
+  background-color: var(--greese-color-canvas);
+  border: 1px solid var(--greese-color-border-strong);
+  border-radius: var(--greese-corner-field);
+  transition:
+    border-color var(--greese-duration-fast) var(--greese-easing-standard),
+    box-shadow var(--greese-duration-fast) var(--greese-easing-standard);
+
+  @include mixins.hover {
+    border-color: var(--greese-color-fg-muted);
+  }
+
+  @if $focus-within {
+    &:has(:focus-visible) {
+      @include focused;
+    }
+  } @else {
+    &:focus-visible {
+      @include focused;
+    }
+  }
+
+  &[aria-invalid='true'],
+  &[data-invalid] {
+    border-color: var(--greese-color-negative);
+  }
+
+  &:disabled,
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+}
+
+@mixin focused {
+  border-color: var(--greese-color-focus-ring);
+  outline: 2px solid var(--greese-color-focus-ring);
+  outline-offset: -1px;
+}

package/src/styles/_core.scss

@@ -0,0 +1,4 @@
+// What every component needs: the layer order, the tokens and the type
+// system. The whole stylesheet and css/core.css both start from this.
+@use '../../dist/tokens-base';
+@use 'typography-vars';