@smwb/ui-styles 2.3.0 → 2.5.0

package/less/components/bottomBar/bottomBar.less

@@ -13,7 +13,7 @@
     display: flex;
     align-items: stretch;
     width: 100%;
-    min-height: 56px;
+    min-height: @bottomBarHeight;
   }
 
   &__item {

package/less/components/breadcrumbs/breadcrumbs.less

@@ -53,6 +53,13 @@
     &:hover {
       background-color: var(--smui-onSurfaceActive);
     }
+
+    // On a coarse pointer the "..." button is a square of the sm step (44px there): it is
+    // otherwise as tall as a line of text and as wide as its dots.
+    @media (pointer: coarse) {
+      min-width: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+      min-height: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+    }
   }
 
   // One line: the list never wraps, the crumbs shrink and cut their text with an

package/less/components/composer/composer.less

@@ -6,14 +6,14 @@
   box-sizing: border-box;
   margin: 0;
   border: 0;
-  padding: @composerFieldPaddingY @composerFieldPaddingX;
+  padding: var(--smwb-composer-field-padding-y, @composerFieldPaddingY) @composerFieldPaddingX;
   font: inherit;
   letter-spacing: inherit;
   line-height: @composerLineHeight;
   overflow-wrap: anywhere;
   // The height of N rows of text, with the text's own padding.
-  min-height: ~"calc(var(--smwb-composer-min-rows, 1) * @{composerLineHeight} + 2 * @{composerFieldPaddingY})";
-  max-height: ~"calc(var(--smwb-composer-max-rows, 8) * @{composerLineHeight} + 2 * @{composerFieldPaddingY})";
+  min-height: ~"calc(var(--smwb-composer-min-rows, 1) * @{composerLineHeight} + 2 * var(--smwb-composer-field-padding-y, @{composerFieldPaddingY}))";
+  max-height: ~"calc(var(--smwb-composer-max-rows, 8) * @{composerLineHeight} + 2 * var(--smwb-composer-field-padding-y, @{composerFieldPaddingY}))";
 }
 
 // A task input: a growing textarea with an attach button, a toolbar slot, a
@@ -36,6 +36,15 @@
   background-color: @composerBg;
   color: @composerText;
 
+  // Touch density: the icon buttons are the sm step (44px there) at least, and the one-line
+  // field grows with them (24px of text + 2 * padding = the button), so the row stays level.
+  // @composerIconButtonSize is a literal that composer.variables.less declares again after the
+  // theme, so the step is the way to raise it: @smui-control-h-sm-coarse.
+  @media (pointer: coarse) {
+    --smwb-composer-icon-button-size: max(@composerIconButtonSize, var(--smui-control-h-sm, @smui-control-h-sm-coarse));
+    --smwb-composer-field-padding-y: calc((var(--smwb-composer-icon-button-size) - @composerLineHeight) / 2);
+  }
+
   &__attachments {
     grid-area: attachments;
     min-width: 0;
@@ -86,8 +95,8 @@
     justify-content: center;
     box-sizing: border-box;
     flex: none;
-    width: @composerIconButtonSize;
-    height: @composerIconButtonSize;
+    width: var(--smwb-composer-icon-button-size, @composerIconButtonSize);
+    height: var(--smwb-composer-icon-button-size, @composerIconButtonSize);
     margin: 0;
     padding: 0;
     border: 0;
@@ -244,7 +253,7 @@
     .smwb-composer__counter {
       // On the bottom row of text, level with the action.
       align-self: end;
-      padding-bottom: ~"calc((@{composerIconButtonSize} - 1rem) / 2)";
+      padding-bottom: ~"calc((var(--smwb-composer-icon-button-size, @{composerIconButtonSize}) - 1rem) / 2)";
     }
 
     .smwb-composer__attach ~ .smwb-composer__toolbar {

package/less/components/dagView/dagView.less

@@ -267,6 +267,11 @@
     width: 32px;
     height: 32px;
     padding: 0;
+    // On a coarse pointer the buttons are the sm step (44px there) at least.
+    @media (pointer: coarse) {
+      width: max(32px, var(--smui-control-h-sm, @smui-control-h-sm-coarse));
+      height: max(32px, var(--smui-control-h-sm, @smui-control-h-sm-coarse));
+    }
     border: 1px solid var(--smui-dividerColor);
     border-radius: @smui-radius-md;
     background-color: var(--smui-surfaceBackground);

package/less/components/datePicker/dataPicker.less

@@ -93,6 +93,19 @@
       padding: @datePickerYearPadding;
     }
 
+    // On a coarse pointer the TextField adornment button is a square of the sm step (44px there)
+    // at least, the icon in the middle; the 36px it was is padding around the 24px glyph. The
+    // popup's small month and year arrows keep their 34px.
+    @media (pointer: coarse) {
+      &:not(&--small) {
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: center;
+        min-width: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+        min-height: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+      }
+    }
+
     &--edge-start {
       margin-left: -12px;
     }

package/less/components/selectField/selectField.less

@@ -99,6 +99,40 @@
     cursor: pointer;
   }
 
+  // Touch density: on a coarse pointer the clear button and the delete button of a value chip
+  // answer a press from a square of the sm step (44px there), not the small icon they draw.
+  // The clear button is that square itself, in the actions row: its neighbours, the dropdown
+  // arrow and the control, keep their own boxes, so a press on the arrow opens the menu and
+  // never clears it. The negative margin keeps the height the icon gave the field; the row
+  // grows wider by what the square adds. A chip's delete button is laid over a bigger box by
+  // a pseudo-element (a chip must not grow): the box starts at the icon, so it never reaches
+  // back over the label, whose press opens the menu, and extends to the right, into the
+  // chip's padding; the next chip is positioned later and paints over it.
+  @media (pointer: coarse) {
+    &__clear {
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      width: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+      height: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+      margin: calc((16px - var(--smui-control-h-sm, @smui-control-h-sm-coarse)) / 2) 0;
+    }
+
+    .smwb-chip__delete-icon {
+      position: relative;
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+        height: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+        transform: translateY(-50%);
+      }
+    }
+  }
+
   &__values {
     white-space: nowrap;
     font: inherit;

package/less/components/sheet/sheet.less

@@ -3,6 +3,10 @@
   // sets it from its `offsetTop` prop and `AppLayout` publishes its sticky header's height as the
   // page default, so a panel starts below the header; with neither it is 0 and nothing moves.
   @sheetOffsetTop: var(--smui-sheet-offset-top, 0px);
+  // Gap between the bottom edge of the window and the bottom of the sheet and of its modal scrim. `BottomBar`
+  // publishes its height (with the safe-area inset) as the page default, so a panel stops above the bar; with the
+  // bar absent it is 0 and nothing moves.
+  @sheetOffsetBottom: var(--smui-bottom-bar-offset, 0px);
 
   background-color: var(--smui-surfaceBackground);
   position: fixed;
@@ -20,6 +24,11 @@
   display: flex;
   max-width: 100vw;
 
+  // A finger is dragging the panel (swipe to dismiss): it follows without easing.
+  &[data-smwb-swiping] {
+    transition: none;
+  }
+
   &__header {
     display: flex;
     justify-content: space-between;
@@ -30,6 +39,12 @@
 
     .smwb-button {
       min-width: 0;
+
+      // On a coarse pointer the close and size buttons are as wide as they are tall (the sm
+      // step, 44px there); their padding made them 42px wide.
+      @media (pointer: coarse) {
+        min-width: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+      }
     }
   }
 
@@ -121,10 +136,12 @@
 
   &.smwb-bottom {
     border-radius: @sheetBorderRadius @sheetBorderRadius 0 0;
-    bottom: 0;
+    bottom: @sheetOffsetBottom;
     left: 0;
     width: 100%;
     height: var(--sizeProp);
+    // A tall panel stops at the top of the window (below any offset) instead of running past it by the bar's height.
+    max-height: calc(100% - @sheetOffsetTop - @sheetOffsetBottom);
     transform: translateY(100%);
     flex-direction: column;
     .smwb-sheet__header {
@@ -139,7 +156,7 @@
     width: 100%;
     height: var(--sizeProp);
     // A tall panel stops at the bottom of the window instead of running past it by the offset.
-    max-height: calc(100% - @sheetOffsetTop);
+    max-height: calc(100% - @sheetOffsetTop - @sheetOffsetBottom);
     transform: translateY(-100%);
     flex-direction: column;
     .smwb-sheet__header {
@@ -151,7 +168,7 @@
     border-radius: 0 @sheetBorderRadius @sheetBorderRadius 0;
     top: @sheetOffsetTop;
     left: 0;
-    height: calc(100% - @sheetOffsetTop);
+    height: calc(100% - @sheetOffsetTop - @sheetOffsetBottom);
     width: var(--sizeProp);
     transform: translateX(-100%);
     flex-direction: row-reverse;
@@ -166,7 +183,7 @@
     border-radius: @sheetBorderRadius 0 0 @sheetBorderRadius;
     top: @sheetOffsetTop;
     right: 0;
-    height: calc(100% - @sheetOffsetTop);
+    height: calc(100% - @sheetOffsetTop - @sheetOffsetBottom);
     width: var(--sizeProp);
     transform: translateX(100%);
     .smwb-sheet__header {
@@ -180,7 +197,7 @@
     top: @sheetOffsetTop;
     left: 0;
     width: 100%;
-    height: calc(100% - @sheetOffsetTop);
+    height: calc(100% - @sheetOffsetTop - @sheetOffsetBottom);
     display: flex;
     flex-direction: column;
     z-index: 100;
@@ -203,7 +220,7 @@
       .smwb-sheet {
         opacity: 1;
         &.smwb-bottom {
-          transform: translateY(0);
+          transform: translateY(var(--smwb-sheet-swipe, 0px));
           &.smwb-expanded {
             height: 90%;
           }
@@ -221,7 +238,7 @@
           }
         }
         &.smwb-left {
-          transform: translateX(0);
+          transform: translateX(var(--smwb-sheet-swipe, 0px));
           &.smwb-expanded {
             width: 90%;
           }
@@ -230,7 +247,7 @@
           }
         }
         &.smwb-right {
-          transform: translateX(0);
+          transform: translateX(var(--smwb-sheet-swipe, 0px));
           &.smwb-expanded {
             width: 90%;
           }

package/less/components/slider/slider.less

@@ -292,3 +292,29 @@
   white-space: nowrap;
   opacity: 0.7;
 }
+
+// Touch density: on a coarse pointer the zone that takes a press on the rail, the padding around
+// it, is the sm step (44px there) across, 30px otherwise, and so is the thumb's own zone. A mouse
+// keeps all of it. The mark labels hang from the marks, which are centred on the rail, so they follow it.
+@sliderTouchHit: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+@media (pointer: coarse) {
+  .smwb-slider {
+    padding-top: max(@sliderPaddingY, calc((@sliderTouchHit - 4px) / 2));
+    padding-bottom: max(@sliderPaddingY, calc((@sliderTouchHit - 4px) / 2));
+  }
+  .smwb-slider_size-small {
+    padding-top: max(@sliderPaddingY, calc((@sliderTouchHit - 2px) / 2));
+    padding-bottom: max(@sliderPaddingY, calc((@sliderTouchHit - 2px) / 2));
+  }
+  .smwb-slider_size-large {
+    padding-top: max(@sliderPaddingY, calc((@sliderTouchHit - 6px) / 2));
+    padding-bottom: max(@sliderPaddingY, calc((@sliderTouchHit - 6px) / 2));
+  }
+  .smwb-slider--vertical {
+    padding: 0 max(@sliderPaddingY, calc((@sliderTouchHit - 4px) / 2));
+  }
+  .smwb-slider__thumb:after {
+    width: max(42px, @sliderTouchHit);
+    height: max(42px, @sliderTouchHit);
+  }
+}

package/less/components/snackbar/snackbar.less

@@ -4,6 +4,9 @@
   gap: @snackbarGap;
   position: fixed;
   z-index: 777;
+  // Gap above the window's bottom edge for a stack drawn at the bottom: `BottomBar` publishes its height as
+  // --smui-bottom-bar-offset, so the snackbars sit above the bar. With the variable unset it is 0 and nothing moves.
+  @snackbarsBottomOffset: var(--smui-bottom-bar-offset, 0px);
   &.smwb-top {
     top: 1rem;
     left: 50%;
@@ -18,17 +21,17 @@
     top: 1rem;
   }
   &.smwb-bottom {
-    bottom: 1rem;
+    bottom: calc(1rem + @snackbarsBottomOffset);
     left: 50%;
     transform: translateX(-50%);
   }
   &.smwb-bottom-right {
     right: 1rem;
-    bottom: 1rem;
+    bottom: calc(1rem + @snackbarsBottomOffset);
   }
   &.smwb-bottom-left {
     left: 1rem;
-    bottom: 1rem;
+    bottom: calc(1rem + @snackbarsBottomOffset);
   }
 }
 

package/less/components/stack/stack.less

@@ -1,7 +1,34 @@
+@stackDirections: row, row-reverse, column, column-reverse;
+
+// `direction` given per breakpoint: one class per breakpoint and direction, base first and then
+// the breakpoints in ascending order, so a wider one wins at the same specificity.
+.stack-direction(@bp) {
+  each(@stackDirections, {
+    &--direction-@{bp}-@{value} {
+      flex-direction: @value;
+    }
+  });
+}
+
 .smwb-stack {
   // layout is driven by inline flex props; this hook is for overrides
   min-width: 0;
 
+  .stack-direction(base);
+
+  .smui-media-up(sm; {
+    .stack-direction(sm);
+  });
+  .smui-media-up(md; {
+    .stack-direction(md);
+  });
+  .smui-media-up(lg; {
+    .stack-direction(lg);
+  });
+  .smui-media-up(xl; {
+    .stack-direction(xl);
+  });
+
   &__divider {
     display: flex;
     align-items: center;

package/less/components/table/table.less

@@ -182,6 +182,14 @@
   outline: 2px solid var(--smui-primaryColor);
   outline-offset: 2px;
 }
+// On a coarse pointer the sort control is the sm step (44px there) at least, a line of text
+// tall otherwise. The header cell (56px) already has the room.
+@media (pointer: coarse) {
+  .smwb-head-cell_sortable .smwb-head-cell__content {
+    min-width: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+    min-height: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+  }
+}
 
 .smwb-table__row_selected {
   background-color: var(--smui-onSurfaceHover);

package/less/default/globals/default.variables.less

@@ -142,6 +142,10 @@
 // this one carries dark ink instead of @onWarningColor. 5.5:1 on @warningColor.
 @badgeWarningColor: #1c1b1f;
 
+// Height of the `BottomBar` row, without the safe-area inset it adds below; the bar publishes the sum as
+// --smui-bottom-bar-offset.
+@bottomBarHeight: 56px;
+
 @buttonGap: @smui-space-sm;
 @buttonPaddingSmall: @smui-space-xs 10px; // 10 off-grid
 @buttonPaddingMedium: 6px 14px; // off-grid

package/less/foundation/sizing.less

@@ -50,7 +50,10 @@
 //  an `@media (pointer: coarse)` block, which is why most components need no
 //  rule of their own; only what sits off the scale has one (small clickable
 //  or link Chip, Tabs dense and its scroll buttons, TabGroups dense actions button,
-//  Menu dense items, List dense rows). A mouse keeps the sizes above.
+//  Menu dense items, List dense rows, and the targets the controls above do not
+//  cover: Composer icon buttons, Breadcrumbs "..." button, DagView zoom buttons,
+//  Slider rail and thumb zones, SelectField clear button and chip delete zones, Sheet
+//  header buttons, Table sort control, DatePicker adornment button). A mouse keeps the sizes above.
 //  Still exempt on touch: the --filled and --inline fields, the compact Toggle
 //  (capped at @toggleCompactMaxHeight) and a small Chip that is neither a button
 //  nor a link.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-styles",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "Framework-agnostic LESS design tokens and component styles (smwb-*) shared by the @smwb UI libraries. Prebuilt aggregate CSS lives in @smwb/ui-css.",
   "license": "MIT",
   "sideEffects": [