@loidolt/theme-styles 0.5.0 → 0.6.0

package/src/components/selection.css

@@ -237,3 +237,40 @@
     width: 4.5rem;
   }
 }
+/*
+ * A removable value — a chosen option, an active filter. Square, because it is pressable; the
+ * pill silhouette is reserved for badges, which are not.
+ */
+.ldt-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  min-height: 1.5rem;
+  max-width: 100%;
+  border: var(--loidolt-border-width) solid var(--loidolt-border-control);
+  padding-inline-start: 0.45rem;
+  color: var(--loidolt-text);
+  background: var(--loidolt-surface-alt);
+  font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
+  letter-spacing: 0.04em;
+}
+.ldt-chip > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ldt-chip__remove {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 1.5rem;
+  min-height: 1.5rem;
+  border: 0;
+  padding: 0;
+  color: var(--loidolt-text-muted);
+  background: transparent;
+}
+.ldt-chip__remove:hover:not(:disabled) {
+  color: var(--loidolt-text-inverse);
+  background: var(--loidolt-surface-inverse);
+}

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,5 @@
 @import './components/overlays.css';
 @import './components/selection.css';
 @import './components/layout.css';
+@import './components/media.css';
 @import './components/prose.css';

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;
+  }
 }