@smwb/ui-styles 2.4.0 → 2.5.0

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

@@ -39,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);
+      }
     }
   }
 

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/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/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.4.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": [