@loidolt/theme-styles 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loidolt/theme-styles",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Base styles, fonts, accessibility helpers, and utilities for Loidolt applications",
   "license": "MIT",
   "type": "module",
@@ -28,7 +28,7 @@
     "build": "node -e \"console.log('theme-styles: source CSS is publish-ready')\""
   },
   "dependencies": {
-    "@loidolt/theme-tokens": "^0.4.0"
+    "@loidolt/theme-tokens": "^0.5.0"
   },
   "publishConfig": {
     "access": "public",

package/src/accessibility.css

@@ -24,6 +24,8 @@
   )
   :where(:focus-visible) {
   outline-offset: -2px;
+  /* Follow the control's accessible foreground pairing so inset focus stays visible on fills. */
+  outline-color: currentColor;
 }
 
 .ldt-visually-hidden,

package/src/components/actions.css

@@ -1,6 +1,8 @@
 /* Deep slice: assumes the token custom properties are already loaded.
    Import '@loidolt/theme-styles/tokens' (or the whole '@loidolt/theme-styles') first. */
 .ldt-button {
+  max-width: 100%;
+  min-width: 0;
   min-height: var(--loidolt-size-control);
   display: inline-flex;
   align-items: center;
@@ -13,10 +15,12 @@
   background: transparent;
   font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
   letter-spacing: 0.08em;
-  line-height: 1;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+  text-align: center;
   text-decoration: none;
   text-transform: uppercase;
-  white-space: nowrap;
+  white-space: normal;
 }
 .ldt-button:hover:not(:disabled, [aria-disabled='true']) {
   color: var(--loidolt-text-inverse);

package/src/components/layout.css

@@ -11,10 +11,10 @@
   color: var(--loidolt-text);
   background: var(--loidolt-background);
 }
-.ldt-app-shell > :where(header, main, footer) {
+.ldt-app-shell > :where(header, main, footer, .ldt-app-shell__main) {
   min-width: 0;
 }
-.ldt-app-shell > main,
+.ldt-app-shell > :where(main, .ldt-app-shell__main),
 .ldt-workspace-container {
   /* Workspace normally sits directly in AppShell's main row. Naming that row as an inline-size
      container lets the same compact layout work when the shell itself is embedded or split. The
@@ -289,7 +289,10 @@
     gap: 0.15rem;
   }
   .ldt-contextbar__detail {
-    display: none;
+    overflow: visible;
+    text-overflow: clip;
+    white-space: normal;
+    overflow-wrap: anywhere;
   }
   .ldt-workspace,
   .ldt-workspace--sidebar,

package/src/components/prose.css

@@ -0,0 +1,233 @@
+/*
+ * Long-form content: rendered Markdown, documentation, help text — any HTML the application does
+ * not author element by element. Wrap it in `.ldt-prose`; mark islands of ordinary UI inside it
+ * with `.ldt-not-prose`.
+ *
+ * Every descendant selector is wrapped in `:where()` and filtered with `:not(:where(...))`, so the
+ * whole rule weighs (0,0,0). A component class placed inside prose (`.ldt-button`, `.ldt-table`,
+ * `.ldt-card`) therefore always beats these element styles by specificity alone, and the opt-out
+ * class is only needed for bare elements that should look like UI rather than content.
+ *
+ * `--ldt-prose-size` scales the body text; everything else is relative to it.
+ */
+.ldt-prose {
+  max-width: var(--ldt-prose-width, none);
+  color: var(--loidolt-text);
+  font-size: var(--ldt-prose-size, var(--loidolt-font-size-md));
+  line-height: var(--loidolt-font-line-height-relaxed);
+  overflow-wrap: break-word;
+}
+
+/* --- Flow ---------------------------------------------------------------------------------- */
+
+:where(.ldt-prose :is(p, ul, ol, dl, blockquote, pre, table, figure, hr, details)):not(
+  :where(.ldt-not-prose, .ldt-not-prose *)
+) {
+  margin-block: 0 1.1em;
+}
+:where(.ldt-prose > :first-child) {
+  margin-block-start: 0;
+}
+:where(.ldt-prose > :last-child) {
+  margin-block-end: 0;
+}
+
+/* --- Headings ------------------------------------------------------------------------------ */
+
+:where(.ldt-prose :is(h1, h2, h3, h4, h5, h6)):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  margin-block: 1.8em 0.6em;
+  color: var(--loidolt-text);
+  font-family: var(--loidolt-font-display);
+  font-weight: 500;
+  line-height: var(--loidolt-font-line-height-tight);
+  /* Clears a sticky top bar when a heading is the target of an in-page link. */
+  scroll-margin-top: calc(var(--loidolt-size-topbar) + var(--loidolt-space-4));
+}
+:where(.ldt-prose h1):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  margin-block-start: 0;
+  font-size: 2em;
+}
+:where(.ldt-prose h2):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  padding-block-end: 0.3em;
+  border-bottom: var(--loidolt-border-width) solid var(--loidolt-border-soft);
+  font-size: 1.5em;
+}
+:where(.ldt-prose h3):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  font-size: 1.25em;
+}
+:where(.ldt-prose h4):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  font-size: 1.05em;
+}
+/* The two smallest levels switch to the utility face so they stay distinct from body text. */
+:where(.ldt-prose :is(h5, h6)):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  color: var(--loidolt-text-muted);
+  font-family: var(--loidolt-font-utility);
+  font-size: 0.8em;
+  letter-spacing: var(--loidolt-font-tracking-utility);
+  text-transform: uppercase;
+}
+/* A heading directly after another heading sits closer to it. */
+:where(.ldt-prose :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6)):not(
+  :where(.ldt-not-prose, .ldt-not-prose *)
+) {
+  margin-block-start: 0.6em;
+}
+
+/* --- Inline -------------------------------------------------------------------------------- */
+
+:where(.ldt-prose a):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  color: var(--loidolt-text-accent);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.18em;
+}
+:where(.ldt-prose a:hover):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  text-decoration-thickness: 2px;
+}
+/* Only one weight per family ships, so bold is synthesized; colour keeps it legible. */
+:where(.ldt-prose :is(strong, b)):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  color: var(--loidolt-text);
+  font-weight: 700;
+}
+:where(.ldt-prose :not(pre) > code):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  padding: 0.12em 0.35em;
+  border: var(--loidolt-border-width) solid var(--loidolt-border-soft);
+  color: var(--loidolt-text);
+  background: var(--loidolt-surface-sunken);
+  font-size: 0.875em;
+}
+:where(.ldt-prose kbd):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  padding: 0.05em 0.4em;
+  border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
+  border-bottom-width: 2px;
+  background: var(--loidolt-surface);
+  font-size: 0.85em;
+}
+:where(.ldt-prose mark):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  color: var(--loidolt-text);
+  background: color-mix(in srgb, var(--loidolt-accent) 22%, transparent);
+}
+
+/* --- Lists --------------------------------------------------------------------------------- */
+
+:where(.ldt-prose :is(ul, ol)):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  padding-inline-start: 1.5em;
+}
+:where(.ldt-prose li):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  margin-block: 0.3em;
+}
+:where(.ldt-prose li)::marker {
+  color: var(--loidolt-text-muted);
+}
+:where(.ldt-prose li > :is(ul, ol)):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  margin-block: 0.3em 0;
+}
+/* GFM task lists: the checkbox is the marker. */
+:where(.ldt-prose li:has(> input[type='checkbox'])):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  list-style: none;
+}
+:where(.ldt-prose li > input[type='checkbox']):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  margin: 0 0.5em 0 -1.4em;
+  vertical-align: -0.1em;
+  accent-color: var(--loidolt-accent);
+}
+:where(.ldt-prose dt):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  font-weight: 700;
+}
+:where(.ldt-prose dd):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  margin: 0 0 0.6em 1.5em;
+}
+
+/* --- Blocks -------------------------------------------------------------------------------- */
+
+:where(.ldt-prose blockquote):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  margin-inline: 0;
+  padding: 0.7em 1em;
+  border-inline-start: 3px solid var(--loidolt-accent);
+  color: var(--loidolt-text);
+  background: var(--loidolt-surface-alt);
+}
+:where(.ldt-prose blockquote > :last-child):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  margin-block-end: 0;
+}
+:where(.ldt-prose hr):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  margin-block: 2em;
+  border: 0;
+  border-top: var(--loidolt-border-width) solid var(--loidolt-border);
+}
+:where(.ldt-prose :is(img, video)):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  height: auto;
+}
+:where(.ldt-prose figcaption):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  margin-block-start: 0.5em;
+  color: var(--loidolt-text-muted);
+  font-size: 0.875em;
+}
+/*
+ * Code blocks. The background is set without `!important`: syntax highlighters that write an
+ * inline background (Shiki, Prism themes) keep their own, and plain `<pre>` gets the inverse
+ * surface so it reads as code in both colour schemes.
+ */
+:where(.ldt-prose pre):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  padding: 0.9em 1.1em;
+  overflow-x: auto;
+  border: var(--loidolt-border-width) solid var(--loidolt-border);
+  color: var(--loidolt-text-inverse);
+  background: var(--loidolt-surface-inverse);
+  font-size: 0.85em;
+  line-height: var(--loidolt-font-line-height-normal);
+  tab-size: 2;
+}
+:where(.ldt-prose pre code):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  padding: 0;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  font-size: inherit;
+}
+
+/* --- Tables -------------------------------------------------------------------------------- */
+
+/*
+ * `display: block` + `overflow-x: auto` lets a wide Markdown table scroll on its own instead of
+ * widening the page; there is no wrapper element to hang the overflow on.
+ */
+:where(.ldt-prose table):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+  font-size: 0.9em;
+}
+:where(.ldt-prose :is(th, td)):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  padding: 0.5em 0.8em;
+  border: var(--loidolt-border-width) solid var(--loidolt-border);
+  text-align: start;
+  vertical-align: top;
+}
+:where(.ldt-prose th):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  background: var(--loidolt-surface-alt);
+  font-weight: 700;
+}
+:where(.ldt-prose td):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  background: var(--loidolt-surface);
+}
+:where(.ldt-prose :is(th, td)[align='center']):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  text-align: center;
+}
+:where(.ldt-prose :is(th, td)[align='right']):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  text-align: end;
+}
+
+/* --- Disclosure ---------------------------------------------------------------------------- */
+
+:where(.ldt-prose details):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  padding: 0.5em 0.9em;
+  border: var(--loidolt-border-width) solid var(--loidolt-border);
+  background: var(--loidolt-surface);
+}
+:where(.ldt-prose summary):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  font-weight: 700;
+}
+:where(.ldt-prose details[open] > summary):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
+  margin-block-end: 0.5em;
+}

package/src/components/selection.css

@@ -187,7 +187,6 @@
 }
 .ldt-segmented-nav__hint {
   color: inherit;
-  opacity: 0.7;
   font-size: var(--loidolt-font-size-xs);
 }
 /* A selectable rail of thumbnails: listbox semantics, scroll-into-view, compact flip. */

package/src/components.css

@@ -6,3 +6,4 @@
 @import './components/overlays.css';
 @import './components/selection.css';
 @import './components/layout.css';
+@import './components/prose.css';