@loidolt/theme-styles 0.5.0 → 0.7.0

package/src/components/surfaces.css

@@ -72,6 +72,15 @@
  * size class the badge keeps its compact inline metrics, which is what table cells and running
  * copy want.
  */
+/* Same colour as the text, so the variant's ink carries it without a second colour rule. */
+.ldt-badge__dot {
+  width: 0.45rem;
+  height: 0.45rem;
+  flex: none;
+  margin-inline-end: 0.35rem;
+  border-radius: var(--loidolt-border-radius-pill);
+  background: currentColor;
+}
 .ldt-badge--sm {
   min-height: var(--loidolt-size-control-sm);
   padding: 0.38rem 0.7rem;
@@ -114,6 +123,7 @@
 }
 /* A framed media box: fixed ratio, sunken or paper surface, contained content. */
 .ldt-thumbnail {
+  position: relative;
   display: grid;
   place-items: center;
   margin: 0;
@@ -133,6 +143,29 @@
 .ldt-thumbnail--cover .ldt-thumbnail__image {
   object-fit: cover;
 }
+/* While loading, the recessed surface shimmers so the frame reads as pending, not empty. */
+.ldt-thumbnail[data-status='loading'] {
+  background: linear-gradient(
+      90deg,
+      var(--loidolt-surface-sunken),
+      var(--loidolt-surface-alt),
+      var(--loidolt-surface-sunken)
+    )
+    0 0 / 200% 100%;
+  animation: ldt-shimmer 1.5s linear infinite;
+}
+.ldt-thumbnail__overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: var(--loidolt-space-2);
+  pointer-events: none;
+}
+.ldt-thumbnail__overlay > * {
+  pointer-events: auto;
+}
 /* A dashboard tile: one hero number over a utility label; the link form invites a click. */
 .ldt-stat {
   display: block;
@@ -171,3 +204,33 @@ a.ldt-stat:hover {
   min-height: 1em;
   align-self: stretch;
 }
+/* A person or account, as a photo or initials. Square, like every other surface. */
+.ldt-avatar {
+  position: relative;
+  width: var(--loidolt-size-control);
+  height: var(--loidolt-size-control);
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  overflow: hidden;
+  border: var(--loidolt-border-width) solid var(--loidolt-border);
+  color: var(--loidolt-text-muted);
+  background: var(--loidolt-surface-sunken);
+  font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
+  letter-spacing: 0.06em;
+}
+.ldt-avatar--sm {
+  width: var(--loidolt-size-control-sm);
+  height: var(--loidolt-size-control-sm);
+  font-size: var(--loidolt-font-size-xs);
+}
+.ldt-avatar--lg {
+  width: var(--loidolt-size-control-lg);
+  height: var(--loidolt-size-control-lg);
+  font-size: var(--loidolt-font-size-base);
+}
+.ldt-avatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

package/src/components.css

@@ -6,4 +6,8 @@
 @import './components/overlays.css';
 @import './components/selection.css';
 @import './components/layout.css';
+@import './components/media.css';
+@import './components/charts.css';
+@import './components/maps.css';
 @import './components/prose.css';
+@import './components/docs.css';

package/src/index.css

@@ -8,9 +8,14 @@
  * `loidolt.a11y` is last so the focus ring and the reduced-motion overrides beat component
  * styles by layer order alone — no `!important` needed, which keeps app CSS able to override
  * them (unlayered styles outrank every layer for normal declarations).
+ *
+ * `loidolt.vendor` holds third-party stylesheets a loidolt package ships with — MapLibre's, for
+ * `@loidolt/theme-maps`. Vendor CSS left unlayered would outrank every layer here; slotted after
+ * `base` and before `components`, our resets cannot break it and our component styles can
+ * restyle it, whichever order the two stylesheets are imported in.
  */
-@layer loidolt.tokens, loidolt.reset, loidolt.base, loidolt.components, loidolt.utilities,
-  loidolt.a11y;
+@layer loidolt.tokens, loidolt.reset, loidolt.base, loidolt.vendor, loidolt.components,
+  loidolt.utilities, loidolt.a11y;
 
 @import '@loidolt/theme-tokens/css' layer(loidolt.tokens);
 @import './fonts.css' layer(loidolt.base);

package/src/utilities.css

@@ -48,6 +48,14 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* Truncates after `--ldt-lines` lines (default 2) with an ellipsis. */
+.ldt-line-clamp {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--ldt-lines, 2);
+  line-clamp: var(--ldt-lines, 2);
+}
 .ldt-scrollbar {
   scrollbar-width: thin;
   scrollbar-color: var(--loidolt-border) transparent;
@@ -66,8 +74,16 @@
   text-transform: uppercase;
 }
 
+/* Print-only content — a URL written out after a link, a signature line. The counterpart to
+   `.ldt-print-hidden`. */
+.ldt-print-visible {
+  display: none !important;
+}
 @media print {
   .ldt-print-hidden {
     display: none !important;
   }
+  .ldt-print-visible {
+    display: revert !important;
+  }
 }