@ponchia/ui 0.2.1 → 0.2.2

package/css/base.css

@@ -24,7 +24,7 @@ body {
   background: var(--bg);
   color: var(--text);
   margin: 0;
-  min-height: 100vh;
+  min-block-size: 100vh;
   position: relative;
 }
 
@@ -58,7 +58,7 @@ textarea {
 img,
 svg {
   display: block;
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 
 p,
@@ -134,13 +134,13 @@ pre code {
 
 hr {
   border: 0;
-  border-top: 1px solid var(--line);
+  border-block-start: 1px solid var(--line);
   margin: var(--space-lg) 0;
 }
 
 ::-webkit-scrollbar {
-  height: 10px;
-  width: 10px;
+  block-size: 10px;
+  inline-size: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -170,15 +170,15 @@ textarea:focus-visible,
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-md);
   color: var(--text);
-  left: 1rem;
+  inset-inline-start: 1rem;
   padding: 0.7rem 1rem;
   position: fixed;
-  top: -4rem;
+  inset-block-start: -4rem;
   z-index: 40;
 }
 
 .skip-link:focus {
-  top: 1rem;
+  inset-block-start: 1rem;
 }
 
 /* Small global helpers reused across apps. */
@@ -198,9 +198,129 @@ textarea:focus-visible,
 .ui-visually-hidden {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  height: 1px;
+  block-size: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
-  width: 1px;
+  inline-size: 1px;
+}
+
+/* --------------------------------------------------------------------------
+   Forced colors (Windows High Contrast). The OS replaces the palette and
+   strips backgrounds/shadows, so any state signalled only by a fill goes
+   invisible. Re-assert those with system colors so meaning survives.
+   -------------------------------------------------------------------------- */
+@media (forced-colors: active) {
+  .ui-progress__bar,
+  .ui-dotbar i.is-on,
+  .ui-dotspinner i {
+    background: Highlight;
+  }
+
+  .ui-dot,
+  .ui-dot--accent,
+  .ui-dot--success,
+  .ui-dot--warning,
+  .ui-dot--danger,
+  .ui-switch__thumb {
+    background: CanvasText;
+  }
+
+  .ui-dot--live::after {
+    border-color: CanvasText;
+  }
+
+  .ui-switch input:checked + .ui-switch__track,
+  .ui-segmented__option:has(input:checked) {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+
+  /* Keyboard focus must never depend on a colour that gets overridden. */
+  a:focus-visible,
+  button:focus-visible,
+  summary:focus-visible,
+  input:focus-visible,
+  select:focus-visible,
+  textarea:focus-visible,
+  [tabindex]:focus-visible {
+    outline: 2px solid Highlight;
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Print — ink on white, no chrome, no page-break scars. The framework
+   dresses content sites too, so a clean printout / PDF matters.
+   -------------------------------------------------------------------------- */
+@media print {
+  html,
+  body {
+    background: #fff;
+    color: #000;
+  }
+
+  /* Decorative / interactive chrome never prints. */
+  .ui-dotfield,
+  .ui-toast-stack,
+  .app-rail,
+  .app-topbar,
+  .site-nav,
+  .theme-toggle__button,
+  .site-menu,
+  .ui-spinner,
+  .ui-dotloader,
+  .ui-dotspinner,
+  dialog.ui-modal::backdrop {
+    display: none !important;
+  }
+
+  /* Flat ink: drop shadows/fills, keep hairlines as real rules. */
+  *,
+  *::before,
+  *::after {
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  .ui-card,
+  .ui-panel,
+  .ui-surface,
+  .ui-alert,
+  .ui-table-wrap {
+    border: 1px solid #999;
+  }
+
+  /* Scroll containers must spill on paper, not clip. */
+  .ui-table-wrap,
+  .ui-prose table,
+  .ui-tabs__list,
+  pre {
+    overflow: visible !important;
+  }
+
+  /* Do not split atomic blocks across pages. */
+  .ui-card,
+  .ui-panel,
+  .ui-alert,
+  figure,
+  blockquote,
+  pre,
+  tr {
+    break-inside: avoid;
+  }
+
+  :is(h1, h2, h3, h4, h5, h6) {
+    break-after: avoid;
+  }
+
+  /* Long-form: surface link targets when printed. */
+  .ui-prose a[href^="http"]::after {
+    content: " (" attr(href) ")";
+    font-size: 0.85em;
+    word-break: break-all;
+  }
+
+  @page {
+    margin: 18mm;
+  }
 }

package/css/cards.css

@@ -39,7 +39,7 @@
   font-family: var(--display);
   font-size: 1.85rem;
   letter-spacing: 0;
-  margin-top: 0.35rem;
+  margin-block-start: 0.35rem;
 }
 
 .metric-tile p,
@@ -58,8 +58,8 @@
 
 .notes-strip {
   align-items: center;
-  border-bottom: 1px solid var(--line);
-  border-top: 1px solid var(--line);
+  border-block-end: 1px solid var(--line);
+  border-block-start: 1px solid var(--line);
   display: grid;
   gap: 1.2rem;
   grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
@@ -77,11 +77,11 @@
 }
 
 .notes-strip__latest {
-  border-left: 1px solid var(--line);
+  border-inline-start: 1px solid var(--line);
   display: grid;
   gap: 0.45rem;
-  min-width: 0;
-  padding-left: 1.2rem;
+  min-inline-size: 0;
+  padding-inline-start: 1.2rem;
 }
 
 .notes-strip__topline {
@@ -106,7 +106,7 @@
 
 .section-head p {
   margin: 0;
-  max-width: 60ch;
+  max-inline-size: 60ch;
 }
 
 .section-head--stacked {
@@ -116,7 +116,7 @@
 
 .project-card__category {
   color: var(--text-dim);
-  margin-top: 0.15rem;
+  margin-block-start: 0.15rem;
 }
 
 .project-category-label {
@@ -129,12 +129,12 @@
   display: inline-block;
   fill: none;
   flex: 0 0 auto;
-  height: 1em;
+  block-size: 1em;
   stroke: currentColor;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 2;
-  width: 1em;
+  inline-size: 1em;
 }
 
 .project-card__summary,
@@ -167,10 +167,10 @@
 }
 
 .misc-card__boundary {
-  border-top: 1px solid var(--line);
+  border-block-start: 1px solid var(--line);
   display: grid;
   gap: 0.35rem;
-  padding-top: 0.85rem;
+  padding-block-start: 0.85rem;
 }
 
 .misc-card__boundary p {
@@ -186,7 +186,7 @@
 
 .post-card h3 {
   font-size: 1.45rem;
-  margin-top: 0.35rem;
+  margin-block-start: 0.35rem;
 }
 
 .post-card p {
@@ -194,7 +194,7 @@
 }
 
 .contact-stub-card {
-  max-width: 48rem;
+  max-inline-size: 48rem;
 }
 
 .project-pager {
@@ -215,9 +215,9 @@
   border: 1px solid var(--line);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow);
-  min-height: 6rem;
+  min-block-size: 6rem;
   padding: 1rem 1.05rem;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .project-pager__link strong {
@@ -226,7 +226,7 @@
 }
 
 .project-pager__link--next {
-  text-align: right;
+  text-align: end;
 }
 
 @media (hover: hover) {
@@ -297,11 +297,11 @@
   display: grid;
   gap: 0.75rem;
   margin: 0;
-  padding-left: 1.1rem;
+  padding-inline-start: 1.1rem;
 }
 
 .focus-list--dense {
-  margin-top: 0.2rem;
+  margin-block-start: 0.2rem;
 }
 
 .focus-list li,
@@ -316,10 +316,10 @@
 }
 
 .profile-link-list div {
-  border-top: 1px solid var(--line);
+  border-block-start: 1px solid var(--line);
   display: grid;
   gap: 0.25rem;
-  padding-top: 0.75rem;
+  padding-block-start: 0.75rem;
 }
 
 .profile-link-list dd {

package/css/content.css

@@ -0,0 +1,289 @@
+/* ==========================================================================
+   content — .ui-prose: long-form rich text, zero per-element classes.
+
+   Wrap the raw HTML a Markdown renderer emits in a single `.ui-prose`
+   and the document is styled in the Nothing aesthetic while the markup
+   stays semantic and machine-readable (no class-soup). Everything here
+   is an element selector scoped under `.ui-prose`, so it never leaks
+   into app UI.
+   ========================================================================== */
+
+.ui-prose {
+  color: var(--text-soft);
+  font-size: var(--text-base);
+  line-height: 1.7;
+
+  /* Readable measure; the container can still be wider for tables/media. */
+  --prose-measure: 72ch;
+}
+
+.ui-prose > * {
+  margin-block: 0;
+  max-inline-size: var(--prose-measure);
+}
+
+/* Flow rhythm — space comes from the following element. */
+.ui-prose > * + * {
+  margin-block-start: var(--space-md);
+}
+
+.ui-prose > * + :is(h1, h2, h3, h4, h5, h6) {
+  margin-block-start: var(--space-2xl);
+}
+
+/* Full-bleed-ish elements opt out of the text measure. */
+.ui-prose > :is(figure, pre, table, hr, .ui-dotrule) {
+  max-inline-size: none;
+}
+
+/* --- Headings — brand display face; only the top two shout --- */
+
+.ui-prose :is(h1, h2, h3, h4, h5, h6) {
+  color: var(--text);
+  font-family: var(--display);
+  line-height: 1.12;
+  text-wrap: balance;
+}
+
+.ui-prose h1 {
+  font-size: var(--text-xl);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-prose h2 {
+  font-size: var(--text-lg);
+  letter-spacing: var(--tracking-wide);
+  padding-block-end: 0.3rem;
+  border-block-end: 1px solid var(--line);
+  text-transform: uppercase;
+}
+
+.ui-prose h3 {
+  font-size: var(--text-lg);
+}
+
+.ui-prose :is(h4, h5, h6) {
+  font-size: var(--text-base);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-prose :is(h5, h6) {
+  color: var(--text-dim);
+}
+
+/* Anchored headings clear a sticky chrome and expose a dot on hover. */
+.ui-prose :is(h1, h2, h3, h4, h5, h6)[id] {
+  scroll-margin-block-start: 6rem;
+}
+
+/* --- Text-level --- */
+
+.ui-prose :is(p, ul, ol, dl, blockquote, figure, pre, table) {
+  font-size: inherit;
+}
+
+.ui-prose a {
+  color: var(--text);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.22rem;
+  transition:
+    color var(--duration-fast) var(--ease-standard),
+    text-decoration-color var(--duration-fast) var(--ease-standard);
+}
+
+.ui-prose strong {
+  color: var(--text);
+}
+
+.ui-prose mark {
+  background: var(--accent-soft);
+  color: var(--text);
+  padding: 0.02em 0.22em;
+}
+
+.ui-prose small {
+  font-size: var(--text-xs);
+}
+
+.ui-prose abbr[title] {
+  text-decoration: underline dotted;
+  text-underline-offset: 0.2rem;
+}
+
+.ui-prose :is(sub, sup) {
+  font-size: 0.72em;
+}
+
+@media (hover: hover) {
+  .ui-prose a:hover {
+    color: var(--accent);
+    text-decoration-color: var(--accent);
+  }
+}
+
+/* --- Lists — the Nothing dot/square marker --- */
+
+.ui-prose :is(ul, ol) {
+  padding-inline-start: 1.4rem;
+}
+
+.ui-prose li + li {
+  margin-block-start: 0.4rem;
+}
+
+.ui-prose li::marker {
+  color: var(--accent);
+}
+
+.ui-prose ul {
+  list-style: square;
+}
+
+.ui-prose :is(ul, ol) :is(ul, ol) {
+  margin-block-start: 0.4rem;
+}
+
+/* GitHub task lists stay semantic; just align them. */
+.ui-prose li:has(> input[type='checkbox']) {
+  list-style: none;
+  margin-inline-start: -1.4rem;
+}
+
+.ui-prose li > input[type='checkbox'] {
+  accent-color: var(--accent);
+  margin-inline-end: 0.4rem;
+}
+
+/* --- Quote --- */
+
+.ui-prose blockquote {
+  border-inline-start: 2px solid var(--accent);
+  color: var(--text-dim);
+  font-style: normal;
+  padding-inline-start: var(--space-md);
+}
+
+.ui-prose blockquote > * + * {
+  margin-block-start: var(--space-xs);
+}
+
+/* --- Definition list --- */
+
+.ui-prose dt {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  font-weight: 700;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-prose dd {
+  margin-inline-start: 0;
+  padding-block: 0.16rem 0.6rem;
+}
+
+.ui-prose dd + dt {
+  border-block-start: 1px solid var(--line);
+  padding-block-start: 0.6rem;
+}
+
+/* --- Code --- */
+
+.ui-prose :not(pre) > code {
+  font-size: 0.88em;
+}
+
+.ui-prose pre {
+  font-size: var(--text-sm);
+  line-height: 1.6;
+  overflow-x: auto;
+}
+
+/* --- Rule — reuse the dot-matrix divider look --- */
+
+.ui-prose hr {
+  background-image: radial-gradient(var(--line-strong) 1.4px, transparent 1.4px);
+  background-position: 0 50%;
+  background-size: 9px 9px;
+  block-size: 3px;
+  border: 0;
+  margin-block: var(--space-xl);
+}
+
+/* --- Media --- */
+
+.ui-prose :is(img, video, svg) {
+  block-size: auto;
+  border-radius: var(--radius-sm);
+  max-inline-size: 100%;
+}
+
+.ui-prose figure {
+  display: grid;
+  gap: 0.5rem;
+  justify-items: start;
+}
+
+.ui-prose figcaption {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+/* --- Table — raw Markdown tables look like ui-table --- */
+
+.ui-prose table {
+  border: 1px solid var(--line);
+  border-collapse: collapse;
+  border-radius: var(--radius-md);
+  display: block;
+  font-family: var(--mono);
+  font-size: var(--text-sm);
+  inline-size: 100%;
+  overflow-x: auto;
+}
+
+.ui-prose :is(th, td) {
+  border-block-end: 1px solid var(--line);
+  padding: 0.6rem 0.8rem;
+  text-align: start;
+  vertical-align: top;
+}
+
+.ui-prose th {
+  background: var(--panel);
+  color: var(--text-dim);
+  font-size: var(--text-2xs);
+  font-weight: 700;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-prose td {
+  color: var(--text-soft);
+}
+
+.ui-prose tbody tr:last-child :is(th, td) {
+  border-block-end: 0;
+}
+
+/* --- Compact variant — tighter rhythm for dense docs --- */
+
+.ui-prose--compact {
+  line-height: 1.55;
+}
+
+.ui-prose--compact > * + * {
+  margin-block-start: var(--space-sm);
+}
+
+.ui-prose--compact > * + :is(h1, h2, h3, h4, h5, h6) {
+  margin-block-start: var(--space-lg);
+}

package/css/core.css

@@ -15,8 +15,12 @@
 @import url('./layout.css') layer(bronto);
 @import url('./navigation.css') layer(bronto);
 @import url('./typography.css') layer(bronto);
+@import url('./content.css') layer(bronto);
 @import url('./primitives.css') layer(bronto);
 @import url('./forms.css') layer(bronto);
+@import url('./feedback.css') layer(bronto);
+@import url('./overlay.css') layer(bronto);
+@import url('./disclosure.css') layer(bronto);
 @import url('./table.css') layer(bronto);
 @import url('./cards.css') layer(bronto);
 @import url('./app.css') layer(bronto);