@greese/ui 1.1.0 → 1.2.0

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';