@greese/ui 1.0.0 → 1.2.0

package/src/components/ScrollCarousel/ScrollCarousel.scss

@@ -0,0 +1,142 @@
+@use '../../styles/mixins';
+@use '../../styles/slides';
+
+@layer greese.components {
+  .greese-ScrollCarousel {
+    @include mixins.component-root;
+
+    position: relative;
+    display: grid;
+    gap: var(--greese-space-3);
+    min-inline-size: 0;
+  }
+
+  // Native scrolling and snapping: swipe, trackpad and keys all work.
+  .greese-ScrollCarousel-viewport {
+    --greese-scrollcarousel-per-view: 1;
+    --greese-scrollcarousel-gap: var(--greese-space-3);
+
+    display: flex;
+    gap: var(--greese-scrollcarousel-gap);
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    border-radius: var(--greese-corner-panel);
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    @include mixins.focus-ring;
+
+    // The buttons and dots read this to choose a smooth or instant scroll.
+    @include mixins.motion-safe {
+      scroll-behavior: smooth;
+    }
+  }
+
+  // Vertical: a column in a viewport of its own height, snapping on y.
+  .greese-ScrollCarousel--vertical > .greese-ScrollCarousel-viewport {
+    flex-direction: column;
+    block-size: var(--greese-scrollcarousel-size, 20rem);
+    overflow: hidden auto;
+    overscroll-behavior: auto contain;
+    scroll-snap-type: y mandatory;
+  }
+
+  // Each slide's width: the viewport shared by `per-view` slides and the gaps.
+  .greese-ScrollCarouselSlide {
+    --greese-scrollcarousel-gaps: calc(
+      (var(--greese-scrollcarousel-per-view) - 1) * var(--greese-scrollcarousel-gap)
+    );
+
+    flex: 0 0
+      calc(
+        (100% - var(--greese-scrollcarousel-gaps)) / var(--greese-scrollcarousel-per-view)
+      );
+    min-inline-size: 0;
+    scroll-snap-align: start;
+  }
+
+  @include slides.controls('greese-ScrollCarousel', scrollcarousel);
+
+  // Vertical: the buttons sit centred on the top and bottom edges, the
+  // chevron turned to point up and down.
+  .greese-ScrollCarousel--vertical > .greese-ScrollCarousel-control {
+    inset-inline: 0;
+    margin-inline: auto;
+    translate: none;
+
+    > svg {
+      rotate: 90deg;
+      scale: 1;
+    }
+  }
+
+  .greese-ScrollCarousel--vertical > .greese-ScrollCarousel-control--previous {
+    inset-block-start: var(--greese-space-2);
+  }
+
+  .greese-ScrollCarousel--vertical > .greese-ScrollCarousel-control--next {
+    inset-block: auto calc(var(--greese-space-2) + var(--greese-scrollcarousel-dots, 0px));
+
+    > svg {
+      rotate: -90deg;
+    }
+  }
+
+  // A strip of controls (tabs, a toolbar): each as wide as its content, no
+  // snapping, and small buttons over the ends that scroll it a view along.
+  .greese-ScrollCarousel--strip {
+    gap: 0;
+
+    > .greese-ScrollCarousel-viewport {
+      --greese-scrollcarousel-gap: var(--greese-space-1);
+
+      align-items: center;
+      scroll-snap-type: none;
+      border-radius: 0;
+    }
+
+    > .greese-ScrollCarousel-control {
+      inset-block-start: 50%;
+      inline-size: 1.5rem;
+      block-size: 1.5rem;
+      box-shadow: var(--greese-shadow-sm);
+
+      > svg {
+        inline-size: 0.875rem;
+        block-size: 0.875rem;
+      }
+    }
+
+    > .greese-ScrollCarousel-control--previous {
+      inset-inline-start: 0;
+    }
+
+    > .greese-ScrollCarousel-control--next {
+      inset-inline-end: 0;
+    }
+  }
+
+  .greese-ScrollCarousel--strip
+    > .greese-ScrollCarousel-viewport
+    > .greese-ScrollCarouselSlide {
+    flex: none;
+    scroll-snap-align: none;
+  }
+
+  // Phones swipe; the buttons come back where a pointer can hover.
+  @media (hover: none) {
+    .greese-ScrollCarousel-control {
+      display: none;
+    }
+  }
+
+  @include mixins.responsive-prop(
+    'greese-ScrollCarousel',
+    'per-view',
+    --greese-scrollcarousel-per-view
+  );
+}

package/src/components/Select/Select.scss

@@ -17,6 +17,10 @@
     padding-inline: var(--greese-select-padding)
       calc(var(--greese-select-padding) + 1.5em);
     font: inherit;
+
+    // A line no taller than the text, so the frame's height is the size's on
+    // every pointer, not the font's default line.
+    line-height: 1.25;
     color: inherit;
     cursor: pointer;
     background: none;

package/src/components/Slider/Slider.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use '../../styles/controls';
 @use '../../styles/mixins';
 
 // Vendor pseudo-elements are the only way to style range parts.
@@ -13,6 +15,18 @@
   border-radius: var(--greese-corner-pill);
 }
 
+// The thumb's size, on the wrapper as well as the slider: a custom property
+// inherits down, and the bubble's anchor is the slider's sibling, so reading
+// it from the slider alone would leave the anchor's `calc()` invalid.
+@mixin thumb-size {
+  --greese-slider-thumb: 1.25rem;
+
+  // A thumb big enough for fingers.
+  @media (pointer: coarse) {
+    --greese-slider-thumb: 1.75rem;
+  }
+}
+
 @mixin thumb {
   box-sizing: border-box;
   inline-size: var(--greese-slider-thumb);
@@ -24,8 +38,44 @@
 }
 
 @layer greese.components {
+  // The thumb follows the control scale, so a slider in a row of inputs is
+  // the same height as they are.
+  @each $size, $spec in controls.$sizes {
+    .greese-Slider--size-#{$size} {
+      --greese-slider-thumb: calc(#{map.get($spec, height)} * 0.5);
+    }
+  }
+
+  // Only present when the slider shows a value bubble, so a plain slider's
+  // markup is unchanged.
+  .greese-Slider-wrap {
+    @include thumb-size;
+
+    position: relative;
+    display: block;
+  }
+
+  // A zero-size anchor sitting at the centre of the thumb, so the bubble
+  // follows the value. The thumb's travel is inset by half its width at each
+  // end, which is why this is not simply the fill percentage.
+  .greese-Slider-thumbAnchor {
+    --greese-slider-travel: calc(100% - var(--greese-slider-thumb));
+    --greese-slider-offset: calc(
+      var(--greese-slider-travel) * var(--greese-slider-ratio, 0)
+    );
+
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(
+      var(--greese-slider-thumb) / 2 + var(--greese-slider-offset)
+    );
+    inline-size: 0;
+    block-size: var(--greese-slider-thumb);
+  }
+
   .greese-Slider {
-    --greese-slider-thumb: 1.25rem;
+    @include thumb-size;
+
     --greese-slider-towards: right;
 
     @include mixins.component-root;
@@ -42,11 +92,6 @@
       --greese-slider-towards: left;
     }
 
-    // A thumb big enough for fingers.
-    @media (pointer: coarse) {
-      --greese-slider-thumb: 1.75rem;
-    }
-
     &:focus-visible {
       outline: none;
     }

package/src/components/Stack/Stack.scss

@@ -1,4 +1,4 @@
-@use '../../styles/mixins';
+@use '../../styles/layout-props';
 
 @layer greese.components {
   .greese-Stack {
@@ -7,51 +7,5 @@
     min-inline-size: 0;
   }
 
-  @include mixins.responsive-prop(
-    'greese-Stack',
-    'direction',
-    flex-direction,
-    (
-      row: row,
-      column: column,
-      row-reverse: row-reverse,
-      column-reverse: column-reverse,
-    )
-  );
-  @include mixins.responsive-prop('greese-Stack', 'gap', gap, mixins.space-tokens());
-  @include mixins.responsive-prop(
-    'greese-Stack',
-    'align',
-    align-items,
-    (
-      start: flex-start,
-      center: center,
-      end: flex-end,
-      stretch: stretch,
-      baseline: baseline,
-    )
-  );
-  @include mixins.responsive-prop(
-    'greese-Stack',
-    'justify',
-    justify-content,
-    (
-      start: flex-start,
-      center: center,
-      end: flex-end,
-      between: space-between,
-      around: space-around,
-      evenly: space-evenly,
-    )
-  );
-  @include mixins.responsive-prop(
-    'greese-Stack',
-    'wrap',
-    flex-wrap,
-    (
-      wrap: wrap,
-      nowrap: nowrap,
-      wrap-reverse: wrap-reverse,
-    )
-  );
+  @include layout-props.stack;
 }

package/src/components/Switch/Switch.scss

@@ -6,8 +6,8 @@
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
-    inline-size: 2.25rem;
-    block-size: 1.25rem;
+    inline-size: calc(var(--greese-choice-box, 1.125rem) * 2);
+    block-size: calc(var(--greese-choice-box, 1.125rem) * 1.111);
     margin-block: calc((1lh - 1.25rem) / 2);
   }
 
@@ -43,8 +43,8 @@
 
   .greese-Switch-thumb {
     position: relative;
-    inline-size: 1rem;
-    block-size: 1rem;
+    inline-size: calc(var(--greese-choice-box, 1.125rem) * 0.889);
+    block-size: calc(var(--greese-choice-box, 1.125rem) * 0.889);
     margin-inline-start: 0.125rem;
     pointer-events: none;
     background-color: var(--greese-color-canvas);
@@ -53,11 +53,14 @@
     transition: translate var(--greese-duration-fast) var(--greese-easing-standard);
   }
 
+  // The track's width less the thumb and a margin each side (the thumb is
+  // 0.889 of a box and the track 2), so it ends inside the track at every
+  // size: a fixed 1rem overshot the small one.
   .greese-Switch-input:checked + .greese-Switch-thumb {
-    translate: 1rem 0;
+    translate: calc(125% - 0.25rem) 0;
 
     &:dir(rtl) {
-      translate: -1rem 0;
+      translate: calc(0.25rem - 125%) 0;
     }
   }
 }

package/src/components/Text/Text.scss

@@ -6,14 +6,17 @@
     margin: 0;
   }
 
+  // Doubled with `.greese-Text` to beat the type variant every Text carries
+  // (`greese-Type--p1` when none is named), which comes later and sets weight
+  // and colour too. Text only renders a weight with no variant named.
   @each $weight in (regular, medium, semibold, bold) {
-    .greese-Text--#{$weight} {
+    .greese-Text.greese-Text--#{$weight} {
       font-weight: var(--greese-font-weight-#{$weight});
     }
   }
 
   @each $tone, $pair in tones.$tones {
-    .greese-Text--#{$tone} {
+    .greese-Text.greese-Text--#{$tone} {
       color: list.nth($pair, 1);
     }
   }

package/src/styles/_breakpoint-vars.scss

@@ -1,16 +1,22 @@
-// 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.
+// The breakpoints the stylesheet is built with, as custom properties for CSS
+// and JavaScript to read: `--greese-breakpoint-md: 900px`, and the keys in
+// order, `--greese-breakpoint-keys: xs sm md lg xl`, which
+// `configureBreakpoints()` reads. Media queries can't use them, so they're
+// written once, here, from the configured breakpoints.
+@use 'sass:list';
+@use 'sass:map';
 @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};
-      }
+@layer greese.tokens {
+  :root {
+    @each $key, $min in config.$breakpoints {
+      --greese-breakpoint-#{$key}: #{$min};
     }
+
+    --greese-breakpoint-keys: #{list.join(
+        map.keys(config.$breakpoints),
+        (),
+        $separator: space
+      )};
   }
 }

package/src/styles/_controls.scss

@@ -5,8 +5,8 @@
 /// Control size scale: block size, inline padding, font size.
 $sizes: (
   xs: (
-    height: 1rem,
-    padding: var(--greese-space-1),
+    height: 1.5rem,
+    padding: var(--greese-space-2),
     font: var(--greese-type-p3-font-size),
   ),
   sm: (

package/src/styles/_core.scss

@@ -1,4 +1,5 @@
 // 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 'breakpoint-vars';
 @use 'typography-vars';