ts-maps 0.3.1 → 0.3.2

package/src/core-map/ts-maps.css

@@ -294,11 +294,13 @@ svg.tsmap-image-layer.tsmap-interactive path {
 /* visual tweaks */
 
 .tsmap-container {
-  background: #ddd;
+  /* Matched to the land colour of a light basemap, so tiles fade in against
+     their own background instead of flashing a dark band on every pan. */
+  background: #e8eaed;
   outline-offset: 1px;
 
   a {
-    color: #0078a8;
+    color: #1a73e8;
   }
 }
 
@@ -314,7 +316,14 @@ path.tsmap-interactive:focus:not(:focus-visible) {
 
 /* general typography */
 .tsmap-container {
-  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif;
   font-size: 12px;
   font-size: 0.75rem;
   line-height: 1.5;
@@ -322,16 +331,33 @@ path.tsmap-interactive:focus:not(:focus-visible) {
 
 /* general toolbar styles */
 
+/*
+ * Map chrome, styled the way a modern map is expected to look.
+ *
+ * What this replaces was inherited from Leaflet's 2011 defaults: 26px targets
+ * (well under the 44px every touch guideline asks for), a 4px radius, and
+ * `0 1px 5px rgba(0,0,0,0.65)` — a shadow at 65% black, which over a light
+ * basemap reads as a smudge rather than elevation.
+ *
+ * The values here follow the conventions every major map now shares: a white
+ * card, an 8px radius, a soft two-part shadow (a tight contact edge plus a
+ * wide ambient falloff), hairline dividers instead of solid #ccc borders, and
+ * the system UI font rather than Lucida Console. Controls also gain a real
+ * focus ring, which the old chrome suppressed entirely.
+ */
 .tsmap-bar {
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
-  border-radius: 4px;
+  box-shadow:
+    0 1px 2px rgba(60, 64, 67, 0.3),
+    0 2px 6px 2px rgba(60, 64, 67, 0.15);
+  border-radius: 8px;
+  overflow: hidden;
 
   a {
+    position: relative;
     background-color: #fff;
-    border-bottom: 1px solid #ccc;
-    width: 26px;
-    height: 26px;
-    line-height: 26px;
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
     display: block;
     text-align: center;
     text-decoration: none;
@@ -339,26 +365,76 @@ path.tsmap-interactive:focus:not(:focus-visible) {
     background-position: 50% 50%;
     background-repeat: no-repeat;
     display: block;
-    &:hover,
-    &:focus {
-      background-color: #f4f4f4;
+    color: #3c4043;
+    transition: background-color 120ms ease;
+
+    &:hover {
+      background-color: #f1f3f4;
+    }
+
+    /* Visible only for keyboard users: a ring on every mouse click is noise,
+       and no ring at all makes the control unusable without a pointer. */
+    &:focus-visible {
+      outline: 2px solid #1a73e8;
+      outline-offset: -2px;
+      background-color: #f1f3f4;
+    }
+
+    /*
+     * Inset seam between stacked buttons.
+     *
+     * A full-width `border-bottom` runs edge to edge and visually cuts the
+     * card in two, so a zoom control reads as two stacked cards rather than
+     * one control with a divider. Every modern map insets this line; drawing
+     * it as a pseudo-element is also what lets the last child simply not have
+     * one, without a border reset.
+     */
+    &:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      right: 8px;
+      bottom: 0;
+      left: 8px;
+      height: 1px;
+      background: rgba(0, 0, 0, 0.12);
     }
 
     &:first-child {
-      border-top-left-radius: 4px;
-      border-top-right-radius: 4px;
+      border-top-left-radius: 8px;
+      border-top-right-radius: 8px;
     }
 
     &:last-child {
-      border-bottom-left-radius: 4px;
-      border-bottom-right-radius: 4px;
-      border-bottom: none;
+      border-bottom-left-radius: 8px;
+      border-bottom-right-radius: 8px;
     }
 
     &.tsmap-disabled {
       cursor: default;
-      background-color: #f4f4f4;
-      color: #bbb;
+      background-color: #fff;
+      color: #bdc1c6;
+    }
+  }
+}
+
+/* Dark basemaps get dark chrome; white cards on a dark map glare. */
+@media (prefers-color-scheme: dark) {
+  .tsmap-dark .tsmap-bar a:not(:last-child)::after {
+    background: rgba(255, 255, 255, 0.14);
+  }
+
+  .tsmap-dark .tsmap-bar a {
+    background-color: #292a2d;
+    color: #e8eaed;
+
+    &:hover,
+    &:focus-visible {
+      background-color: #35363a;
+    }
+
+    &.tsmap-disabled {
+      background-color: #292a2d;
+      color: #5f6368;
     }
   }
 }
@@ -369,39 +445,44 @@ path.tsmap-interactive:focus:not(:focus-visible) {
   display: block;
 }
 
+/*
+ * Touch used to shrink these to 30px with a 2px radius, which is smaller than
+ * the pointer size and the wrong way round — a finger needs a bigger target
+ * than a cursor, not a smaller one. 40px already clears the 44px guideline
+ * once the control's own padding is counted, so both inputs share it.
+ */
 .tsmap-touch .tsmap-bar a {
-  width: 30px;
-  height: 30px;
-  line-height: 30px;
-
-  &:first-child {
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
-  }
-
-  &:last-child {
-    border-bottom-left-radius: 2px;
-    border-bottom-right-radius: 2px;
-  }
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
 }
 
 /* zoom control */
 
-.tsmap-control-zoom-in,
-.tsmap-control-zoom-out {
-  font: bold 18px 'Lucida Console', Monaco, monospace;
-  text-indent: 1px;
-  .tsmap-touch & {
-    font-size: 22px;
-  }
+/* Scoped under .tsmap-bar so it outranks the `.tsmap-bar a` colour above —
+   the zoom glyphs sit a shade lighter than label ink, as they do on every
+   map that draws them as characters rather than icons. */
+.tsmap-bar a.tsmap-control-zoom-in,
+.tsmap-bar a.tsmap-control-zoom-out {
+  color: #5f6368;
+
+  font:
+    400 21px / 40px -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+  text-indent: 0;
 }
 
 /* layers control */
 
 .tsmap-control-layers {
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
+  box-shadow:
+    0 1px 2px rgba(60, 64, 67, 0.3),
+    0 2px 6px 2px rgba(60, 64, 67, 0.15);
   background: #fff;
-  border-radius: 5px;
+  border-radius: 8px;
 
   .tsmap-control-layers-list {
     display: none;
@@ -534,16 +615,21 @@ path.tsmap-interactive:focus:not(:focus-visible) {
   }
 }
 
+/*
+ * Touch controls are the same controls.
+ *
+ * This block used to swap the elevated card for a flat one with a hard
+ * `2px solid rgba(0,0,0,0.2)` border — the Leaflet touch treatment, and the
+ * reason the chrome looked a decade old on exactly the devices most people
+ * open a map on. A shadow is not a pointer affordance; it is how a floating
+ * control reads as floating, on any input. Phones render it fine.
+ *
+ * The touch class still exists and still drives hit-target sizing above; it
+ * just no longer restyles the surface.
+ */
 .tsmap-touch {
-  .tsmap-control-attribution,
-  .tsmap-control-layers,
-  .tsmap-bar {
-    box-shadow: none;
-  }
-
   .tsmap-control-layers,
   .tsmap-bar {
-    border: 2px solid rgba(0, 0, 0, 0.2);
     background-clip: padding-box;
   }
 }
@@ -599,7 +685,9 @@ path.tsmap-interactive:focus:not(:focus-visible) {
 .tsmap-popup-tip {
   background: white;
   color: #333;
-  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
+  box-shadow:
+    0 2px 6px rgba(60, 64, 67, 0.28),
+    0 6px 18px 4px rgba(60, 64, 67, 0.15);
 }
 
 .tsmap-container a.tsmap-popup-close-button {
@@ -723,3 +811,119 @@ path.tsmap-interactive:focus:not(:focus-visible) {
     print-color-adjust: exact;
   }
 }
+
+/* locate control
+   ==========================================================================
+   The crosshair button. Drawn in CSS rather than shipped as an icon file so it
+   inherits colour from the button's state and stays crisp at any pixel ratio —
+   the control has four states and a bitmap would need four assets.
+   ========================================================================== */
+
+.tsmap-control-locate a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.tsmap-locate-icon {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  color: #5f6368;
+
+  /* The ring. */
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 3px;
+    border: 2px solid currentcolor;
+    border-radius: 50%;
+  }
+
+  /* The centre dot, and the four ticks via a cross gradient. */
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+      linear-gradient(currentcolor, currentcolor) 50% 0 / 2px 4px no-repeat,
+      linear-gradient(currentcolor, currentcolor) 50% 100% / 2px 4px no-repeat,
+      linear-gradient(currentcolor, currentcolor) 0 50% / 4px 2px no-repeat,
+      linear-gradient(currentcolor, currentcolor) 100% 50% / 4px 2px no-repeat,
+      radial-gradient(circle at 50% 50%, currentcolor 0 2px, transparent 2px);
+  }
+}
+
+/* Following the device: the crosshair fills in, the way a "you are here"
+   control does everywhere else. */
+a.tsmap-control-locate-active .tsmap-locate-icon {
+  color: #1a73e8;
+}
+
+/* Acquiring a first fix. The pulse is the only thing telling the user that a
+   press did anything at all — a GPS fix can take several seconds. */
+a.tsmap-control-locate-locating .tsmap-locate-icon {
+  color: #1a73e8;
+  animation: tsmap-locate-pulse 1s ease-in-out infinite;
+}
+
+@keyframes tsmap-locate-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+
+/* Denied or unavailable. Struck through rather than merely greyed: grey reads
+   as "disabled, try later" when the real state is "this will not work until
+   you change a browser setting". */
+/*
+ * The state class lands on the <a> itself (see LocateControl._setState), so
+ * these select the anchor rather than a parent. Written as `.tsmap-control-
+ * locate-denied .tsmap-locate-icon` first time round, which silently matched
+ * nothing and left a denied control looking merely idle.
+ */
+a.tsmap-control-locate-denied .tsmap-locate-icon {
+  color: #bdc1c6;
+}
+
+a.tsmap-control-locate-denied::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 22px;
+  height: 2px;
+  border-radius: 1px;
+  /* Cut out from the strike so it reads as a line crossing the glyph rather
+     than a line drawn on top of it. */
+  background: #80868b;
+  box-shadow: 0 -2px 0 #fff;
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+/* The accuracy halo around the reported position. */
+.tsmap-locate-accuracy {
+  fill: #1a73e8;
+  fill-opacity: 0.12;
+  stroke: #1a73e8;
+  stroke-opacity: 0.35;
+  stroke-width: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  a.tsmap-control-locate-locating .tsmap-locate-icon {
+    animation: none;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .tsmap-dark .tsmap-locate-icon {
+    color: #9aa0a6;
+  }
+
+  .tsmap-dark a.tsmap-control-locate-active .tsmap-locate-icon,
+  .tsmap-dark a.tsmap-control-locate-locating .tsmap-locate-icon {
+    color: #8ab4f8;
+  }
+}