@ponchia/ui 0.2.0

package/css/cards.css

@@ -0,0 +1,336 @@
+.metric-grid {
+  display: grid;
+  gap: 0.9rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.metric-tile,
+.principle-card,
+.surface-card,
+.archive-note,
+.project-card,
+.post-card,
+.essay-card,
+.project-teaser,
+.misc-card {
+  border-radius: var(--radius-lg);
+  padding: 0.9rem;
+}
+
+.metric-tile,
+.principle-card,
+.surface-card,
+.archive-note,
+.project-card,
+.post-card,
+.essay-card,
+.project-teaser,
+.misc-card,
+.project-pager__link {
+  transition:
+    background-color var(--duration-base) var(--ease-standard),
+    border-color var(--duration-base) var(--ease-standard),
+    box-shadow var(--duration-base) var(--ease-standard),
+    transform var(--duration-base) var(--ease-standard);
+}
+
+.metric-tile strong {
+  display: block;
+  font-family: var(--display);
+  font-size: 1.85rem;
+  letter-spacing: 0;
+  margin-top: 0.35rem;
+}
+
+.metric-tile p,
+.principle-card p,
+.surface-card p,
+.archive-note p {
+  margin: 0.55rem 0 0;
+}
+
+.project-card,
+.project-teaser,
+.misc-card {
+  display: grid;
+  gap: 0.9rem;
+}
+
+.notes-strip {
+  align-items: center;
+  border-bottom: 1px solid var(--line);
+  border-top: 1px solid var(--line);
+  display: grid;
+  gap: 1.2rem;
+  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
+  padding: 1rem 0;
+}
+
+.notes-strip__copy h2,
+.notes-strip__latest h3 {
+  margin: 0;
+}
+
+.notes-strip__copy p,
+.notes-strip__latest p {
+  margin: 0.45rem 0 0;
+}
+
+.notes-strip__latest {
+  border-left: 1px solid var(--line);
+  display: grid;
+  gap: 0.45rem;
+  min-width: 0;
+  padding-left: 1.2rem;
+}
+
+.notes-strip__topline {
+  align-items: center;
+  display: flex;
+  gap: 0.7rem;
+  justify-content: space-between;
+}
+
+.project-card__header,
+.section-head,
+.post-card__meta,
+.post-header__meta,
+.project-teaser__topline,
+.project-page__headline,
+.misc-card__header {
+  align-items: flex-start;
+  display: flex;
+  gap: 0.7rem;
+  justify-content: space-between;
+}
+
+.section-head p {
+  margin: 0;
+  max-width: 60ch;
+}
+
+.section-head--stacked {
+  display: grid;
+  gap: 0.6rem;
+}
+
+.project-card__category {
+  color: var(--text-dim);
+  margin-top: 0.15rem;
+}
+
+.project-category-label {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.36rem;
+}
+
+.project-category-label__icon {
+  display: inline-block;
+  fill: none;
+  flex: 0 0 auto;
+  height: 1em;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+  width: 1em;
+}
+
+.project-card__summary,
+.project-card__detail,
+.project-teaser__summary,
+.misc-card__summary,
+.post-header__summary {
+  margin: 0;
+}
+
+.misc-card {
+  align-content: start;
+}
+
+.misc-card__header h2 {
+  font-size: 1.45rem;
+}
+
+.misc-card__status {
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  color: var(--text);
+  flex: 0 0 auto;
+  font-size: 0.72rem;
+  font-weight: 700;
+  line-height: 1;
+  padding: 0.45rem 0.62rem;
+  text-transform: uppercase;
+}
+
+.misc-card__boundary {
+  border-top: 1px solid var(--line);
+  display: grid;
+  gap: 0.35rem;
+  padding-top: 0.85rem;
+}
+
+.misc-card__boundary p {
+  margin: 0;
+}
+
+.post-card__meta,
+.post-header__meta {
+  color: var(--text-dim);
+  flex-wrap: wrap;
+  font-size: 0.88rem;
+}
+
+.post-card h3 {
+  font-size: 1.45rem;
+  margin-top: 0.35rem;
+}
+
+.post-card p {
+  margin: 0.55rem 0 0;
+}
+
+.contact-stub-card {
+  max-width: 48rem;
+}
+
+.project-pager {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.project-pager--single {
+  grid-template-columns: minmax(0, 1fr);
+  justify-items: end;
+}
+
+.project-pager__link {
+  display: grid;
+  gap: 0.45rem;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  min-height: 6rem;
+  padding: 1rem 1.05rem;
+  width: 100%;
+}
+
+.project-pager__link strong {
+  color: var(--text);
+  font-size: 1.2rem;
+}
+
+.project-pager__link--next {
+  text-align: right;
+}
+
+@media (hover: hover) {
+  .project-card:has(a:hover),
+  .post-card:has(a:hover),
+  .essay-card:has(a:hover),
+  .project-teaser:has(a:hover),
+  .misc-card:has(a:hover),
+  .project-pager__link:hover {
+    border-color: var(--line-strong);
+    box-shadow: var(--shadow-raised);
+    transform: translateY(-2px);
+  }
+}
+
+.project-card:focus-within,
+.post-card:focus-within,
+.essay-card:focus-within,
+.project-teaser:focus-within,
+.misc-card:focus-within,
+.project-pager__link:focus-visible {
+  border-color: var(--line-strong);
+}
+
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.tag-list li {
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  color: var(--text-soft);
+  font-size: 0.8rem;
+  padding: 0.32rem 0.62rem;
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    border-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard);
+}
+
+.tag-list--project li {
+  color: var(--text);
+}
+
+.tag-list--compact {
+  gap: 0.38rem;
+}
+
+.tag-list--compact li {
+  font-size: 0.72rem;
+  padding: 0.25rem 0.5rem;
+}
+
+.tag-list--compact li:first-child {
+  background: var(--accent-soft);
+  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
+  color: var(--accent);
+}
+
+.focus-list,
+.link-list {
+  display: grid;
+  gap: 0.75rem;
+  margin: 0;
+  padding-left: 1.1rem;
+}
+
+.focus-list--dense {
+  margin-top: 0.2rem;
+}
+
+.focus-list li,
+.link-list li {
+  color: var(--text-soft);
+}
+
+.profile-link-list {
+  display: grid;
+  gap: 0.75rem;
+  margin: 1rem 0 0;
+}
+
+.profile-link-list div {
+  border-top: 1px solid var(--line);
+  display: grid;
+  gap: 0.25rem;
+  padding-top: 0.75rem;
+}
+
+.profile-link-list dd {
+  color: var(--text);
+  margin: 0;
+}
+
+.profile-link-list a,
+.link-list a {
+  color: var(--text);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
+  text-underline-offset: 0.22rem;
+}

package/css/core.css

@@ -0,0 +1,22 @@
+/* @ponchia/ui — core bundle (no breakpoint overrides).
+   Consumers that manage their own responsive layer import this.
+
+   Everything ships inside the `bronto` cascade layer. Any un-layered CSS
+   in the consuming app therefore wins over the framework without a
+   specificity fight — override by writing normal rules, no !important.
+   Declared file order below is the within-layer cascade order. */
+@layer bronto;
+
+@import url('./tokens.css') layer(bronto);
+@import url('./fonts.css') layer(bronto);
+@import url('./base.css') layer(bronto);
+@import url('./motion.css') layer(bronto);
+@import url('./dots.css') layer(bronto);
+@import url('./layout.css') layer(bronto);
+@import url('./navigation.css') layer(bronto);
+@import url('./typography.css') layer(bronto);
+@import url('./primitives.css') layer(bronto);
+@import url('./forms.css') layer(bronto);
+@import url('./table.css') layer(bronto);
+@import url('./cards.css') layer(bronto);
+@import url('./app.css') layer(bronto);

package/css/dots.css

@@ -0,0 +1,159 @@
+/* ==========================================================================
+   dots — the Nothing signature: dot-matrix surfaces, dividers, indicators
+   ========================================================================== */
+
+/* Dot-grid background. Apply to any element; pairs well with .ui-surface.
+   Use --dot-color / --dot-gap / --dot-size to tune density. */
+.ui-dotgrid {
+  --_dot: var(--dot-color, var(--field-dot));
+
+  background-image: radial-gradient(var(--_dot) var(--dot-size), transparent var(--dot-size));
+  background-position: 0 0;
+  background-size: var(--dot-gap) var(--dot-gap);
+}
+
+.ui-dotgrid--accent {
+  --dot-color: var(--field-dot-accent);
+}
+
+.ui-dotgrid--dense {
+  --dot-gap: 8px;
+}
+
+/* Fixed full-bleed backdrop layer (sits behind a relative shell). */
+.ui-dotfield {
+  --_dot: var(--dot-color, var(--field-dot));
+
+  background-image: radial-gradient(var(--_dot) var(--dot-size), transparent var(--dot-size));
+  background-size: var(--dot-gap) var(--dot-gap);
+  inset: 0;
+  mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 78%);
+  pointer-events: none;
+  position: fixed;
+  z-index: 0;
+}
+
+/* Dotted divider — replaces a plain rule. */
+.ui-dotrule {
+  background-image: radial-gradient(var(--line-strong) 1.4px, transparent 1.4px);
+  background-position: 0 50%;
+  background-size: 9px 9px;
+  border: 0;
+  height: 3px;
+  margin: var(--space-md) 0;
+  width: 100%;
+}
+
+/* Status dot — the glyph-style state indicator. */
+.ui-dot {
+  background: var(--text-dim);
+  border-radius: 50%;
+  display: inline-block;
+  flex: 0 0 auto;
+  height: 0.55rem;
+  width: 0.55rem;
+}
+
+.ui-dot--accent {
+  background: var(--accent);
+}
+
+.ui-dot--success {
+  background: var(--success);
+}
+
+.ui-dot--warning {
+  background: var(--warning);
+}
+
+.ui-dot--danger {
+  background: var(--danger);
+}
+
+.ui-dot--live {
+  background: var(--success);
+  box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 70%, transparent);
+  position: relative;
+}
+
+.ui-dot--live::after {
+  animation: pulseRing 1.8s var(--ease-out) infinite;
+  border: 1px solid var(--success);
+  border-radius: 50%;
+  content: '';
+  inset: -3px;
+  position: absolute;
+}
+
+/* Status line: dot + label, the canonical state row. */
+.ui-status {
+  align-items: center;
+  color: var(--text-soft);
+  display: inline-flex;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  gap: 0.45rem;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+/* Dot loader — three blinking dots. */
+.ui-dotloader {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.32rem;
+}
+
+.ui-dotloader span {
+  animation: pulseDot 1s var(--ease-standard) infinite;
+  background: var(--accent);
+  border-radius: 50%;
+  height: 0.42rem;
+  width: 0.42rem;
+}
+
+.ui-dotloader span:nth-child(2) {
+  animation-delay: 0.16s;
+}
+
+.ui-dotloader span:nth-child(3) {
+  animation-delay: 0.32s;
+}
+
+/* Dot progress meter — segmented LED bar. */
+.ui-dotbar {
+  display: flex;
+  gap: 3px;
+}
+
+.ui-dotbar i {
+  background: var(--field-dot);
+  border-radius: 1px;
+  flex: 1;
+  height: 0.5rem;
+}
+
+.ui-dotbar i.is-on {
+  background: var(--accent);
+}
+
+/* Matrix-reveal wrapper — content wipes in left→right on .is-in. */
+.ui-matrix {
+  clip-path: inset(0 100% 0 0);
+  transition: clip-path var(--duration-slow) var(--ease-out);
+}
+
+.ui-matrix.is-in {
+  clip-path: inset(0 0 0 0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-dot--live::after,
+  .ui-dotloader span {
+    animation: none;
+  }
+
+  .ui-matrix {
+    clip-path: none;
+  }
+}

package/css/fonts.css

@@ -0,0 +1,60 @@
+/* ==========================================================================
+   @ponchia/ui — Doto webfont (dot-matrix display face)
+
+   URLs are relative to this file. When the package is consumed through a
+   bundler (Vite/astro/webpack) the `../fonts/*.ttf` references are rewritten
+   and the files emitted automatically. When served statically, ship the
+   package's `fonts/` directory next to `css/` and it resolves as-is.
+
+   This file is optional: it is bundled into core.css/index.css, but a
+   consumer that hosts Doto itself (or overrides `--display` / `--dot-font`)
+   can import the rest of the framework without it.
+   ========================================================================== */
+
+@font-face {
+  font-family: Doto;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/doto-400.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Doto;
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/doto-500.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Doto;
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/doto-600.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Doto;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/doto-700.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Doto;
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/doto-800.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Doto;
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url('../fonts/doto-900.ttf') format('truetype');
+}