@ponchia/ui 0.2.0

package/css/forms.css

@@ -0,0 +1,194 @@
+/* ==========================================================================
+   forms — inputs and controls, monochrome with red focus
+   ========================================================================== */
+
+.ui-field {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.ui-label {
+  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-input,
+.ui-select,
+.ui-textarea {
+  background: var(--bg-elevated);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: var(--text-sm);
+  padding: 0.6rem 0.7rem;
+  transition:
+    border-color var(--duration-fast) var(--ease-standard),
+    background-color var(--duration-fast) var(--ease-standard);
+  width: 100%;
+}
+
+.ui-input::placeholder,
+.ui-textarea::placeholder {
+  color: var(--text-dim);
+}
+
+.ui-textarea {
+  min-height: 6rem;
+  resize: vertical;
+}
+
+.ui-select {
+  appearance: none;
+  background-image: radial-gradient(var(--text-dim) 1.5px, transparent 1.5px);
+  background-position: right 0.75rem center;
+  background-repeat: no-repeat;
+  background-size: 5px 5px;
+  padding-right: 1.8rem;
+}
+
+.ui-input:focus,
+.ui-select:focus,
+.ui-textarea:focus {
+  border-color: var(--accent);
+  outline: none;
+}
+
+.ui-input:focus-visible,
+.ui-select:focus-visible,
+.ui-textarea:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.ui-input:disabled,
+.ui-select:disabled,
+.ui-textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.ui-input[aria-invalid='true'],
+.ui-select[aria-invalid='true'],
+.ui-textarea[aria-invalid='true'] {
+  border-color: var(--danger);
+}
+
+.ui-hint {
+  color: var(--text-dim);
+  font-size: var(--text-2xs);
+}
+
+.ui-hint--error {
+  color: var(--danger);
+}
+
+/* Search field with leading dot. */
+.ui-search {
+  align-items: center;
+  background: var(--bg-elevated);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  display: flex;
+  gap: 0.5rem;
+  padding: 0 0.7rem;
+}
+
+.ui-search::before {
+  background: var(--text-dim);
+  border-radius: 50%;
+  content: '';
+  flex: 0 0 auto;
+  height: 0.42rem;
+  width: 0.42rem;
+}
+
+.ui-search:focus-within {
+  border-color: var(--accent);
+}
+
+.ui-search:focus-within::before {
+  background: var(--accent);
+}
+
+.ui-search input {
+  background: transparent;
+  border: 0;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: var(--text-sm);
+  outline: none;
+  padding: 0.6rem 0;
+  width: 100%;
+}
+
+/* Toggle switch — square Nothing-style track. */
+.ui-switch {
+  align-items: center;
+  cursor: pointer;
+  display: inline-flex;
+  gap: 0.6rem;
+}
+
+.ui-switch input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ui-switch__track {
+  background: var(--panel-soft);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-pill);
+  display: inline-flex;
+  height: 1.05rem;
+  padding: 2px;
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    border-color var(--duration-fast) var(--ease-standard);
+  width: 1.95rem;
+}
+
+.ui-switch__thumb {
+  background: var(--text-dim);
+  border-radius: 50%;
+  height: 100%;
+  transition:
+    transform var(--duration-fast) var(--ease-spring),
+    background-color var(--duration-fast) var(--ease-standard);
+  width: 0.78rem;
+}
+
+.ui-switch input:checked + .ui-switch__track {
+  background: var(--accent-soft);
+  border-color: var(--accent);
+}
+
+.ui-switch input:checked + .ui-switch__track .ui-switch__thumb {
+  background: var(--accent);
+  transform: translateX(0.9rem);
+}
+
+.ui-switch input:focus-visible + .ui-switch__track {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Checkbox / radio — square accent. */
+.ui-check {
+  align-items: center;
+  cursor: pointer;
+  display: inline-flex;
+  gap: 0.5rem;
+  font-size: var(--text-sm);
+}
+
+.ui-check input {
+  accent-color: var(--accent);
+  height: 1rem;
+  width: 1rem;
+}

package/css/index.css

@@ -0,0 +1,5 @@
+/* @ponchia/ui — full bundle: core + responsive breakpoint overrides.
+   responsive.css joins the same `bronto` layer and, being imported last,
+   wins the within-layer cascade over the base rules it overrides. */
+@import url('./core.css');
+@import url('./responsive.css') layer(bronto);

package/css/layout.css

@@ -0,0 +1,219 @@
+.site-background {
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  position: fixed;
+  z-index: 0;
+}
+
+.site-background__grid {
+  position: absolute;
+  display: none;
+}
+
+.site-shell {
+  margin: 0 auto;
+  max-width: 1320px;
+  padding: 0.9rem;
+  position: relative;
+  z-index: 1;
+}
+
+.site-header,
+.site-footer,
+.hero,
+.page-head,
+.project-card,
+.post-card,
+.post-shell,
+.focus-panel,
+.surface-card,
+.essay-card,
+.metric-tile,
+.principle-card,
+.archive-note,
+.signal-panel,
+.problem-panel,
+.callout,
+.aside-block,
+.quote-block,
+.timeline,
+.worklog-summary,
+.project-teaser,
+.misc-card {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow);
+}
+
+.site-header {
+  align-items: center;
+  background: var(--panel);
+  border-radius: var(--radius-lg);
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  margin: 0 auto 0.9rem;
+  padding: 0.55rem 0.65rem;
+  position: sticky;
+  top: 0.65rem;
+  z-index: 10;
+}
+
+.site-header__actions {
+  align-items: center;
+  display: flex;
+  gap: 0.7rem;
+}
+
+.site-mark {
+  align-items: center;
+  display: inline-flex;
+  font-family: var(--display);
+  font-size: 0.9rem;
+  gap: 0.35rem;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.site-mark__primary {
+  color: var(--text);
+}
+
+.site-main {
+  display: grid;
+  gap: 1.35rem;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.site-footer {
+  align-items: center;
+  border-radius: var(--radius-lg);
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  margin-top: 1rem;
+  padding: 0.85rem 1rem;
+}
+
+.site-footer p {
+  font-size: 0.9rem;
+  margin: 0;
+}
+
+.site-footer__copy {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.site-footer__links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.7rem;
+  justify-content: flex-end;
+}
+
+.site-footer__links a {
+  color: var(--text);
+  font-size: 0.86rem;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent);
+  text-underline-offset: 0.2rem;
+  transition:
+    color var(--duration-fast) var(--ease-standard),
+    text-decoration-color var(--duration-fast) var(--ease-standard);
+}
+
+.site-footer__links a:hover {
+  color: var(--accent-strong);
+  text-decoration-color: var(--accent-strong);
+}
+
+.hero,
+.page-head,
+.post-shell {
+  border-radius: var(--radius-xl);
+  max-width: 100%;
+  overflow: hidden;
+  padding: 1.35rem;
+  position: relative;
+  width: 100%;
+}
+
+.hero {
+  display: grid;
+  gap: 1.6rem;
+  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.95fr);
+}
+
+.hero::before,
+.page-head::before,
+.post-shell::before {
+  display: none;
+}
+
+.hero > *,
+.page-head > *,
+.post-shell > * {
+  position: relative;
+  z-index: 1;
+}
+
+.hero__copy,
+.hero__panel,
+.panel-stack,
+.card-stack,
+.home-section,
+.page-section {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.hero__panel {
+  align-self: start;
+}
+
+.home-section,
+.page-section {
+  padding-block: 0.2rem;
+}
+
+.profile-grid,
+.project-teaser-grid,
+.project-detail-grid,
+.project-grid,
+.home-grid,
+.essay-grid,
+.principle-grid,
+.project-detail-layout,
+.misc-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.profile-grid,
+.project-detail-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.project-detail-layout {
+  align-items: start;
+  gap: 1.6rem;
+  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
+}
+
+.project-grid,
+.project-teaser-grid,
+.home-grid,
+.essay-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.principle-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.misc-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}

package/css/motion.css

@@ -0,0 +1,268 @@
+/* ==========================================================================
+   motion — keyframes + animation utilities
+   Restrained, dot-flavoured. Everything collapses under reduced-motion.
+   Keyframes from the legacy responsive layer live here so consumers that
+   import only core.css keep their existing animations.
+   ========================================================================== */
+
+@keyframes pulseDot {
+  0%,
+  100% {
+    opacity: 0.35;
+    transform: scale(0.84);
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes scan {
+  0% {
+    transform: translateY(-120%);
+  }
+
+  100% {
+    transform: translateY(320%);
+  }
+}
+
+@keyframes growBar {
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes drawLine {
+  from {
+    opacity: 0;
+    stroke-dasharray: 0 999;
+  }
+
+  to {
+    opacity: 1;
+    stroke-dasharray: 999 0;
+  }
+}
+
+@keyframes pulseNode {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.08);
+  }
+}
+
+@keyframes pulseRing {
+  0% {
+    opacity: 0.7;
+    transform: scale(0.7);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(1.3);
+  }
+}
+
+/* --- Framework motifs --- */
+
+@keyframes uiFadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes uiRise {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes uiDotIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale(1.15);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes uiSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes uiBlink {
+  0%,
+  45% {
+    opacity: 1;
+  }
+
+  55%,
+  100% {
+    opacity: 0.2;
+  }
+}
+
+@keyframes uiShimmer {
+  from {
+    background-position: 200% 0;
+  }
+
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes uiMatrixReveal {
+  from {
+    clip-path: inset(0 100% 0 0);
+  }
+
+  to {
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+/* --- Utilities --- */
+
+.ui-animate-in {
+  animation: uiRise var(--duration-slow) var(--ease-spring) both;
+}
+
+.ui-animate-fade {
+  animation: uiFadeIn var(--duration-base) var(--ease-standard) both;
+}
+
+.ui-animate-dot {
+  animation: uiDotIn var(--duration-base) var(--ease-spring) both;
+}
+
+.ui-animate-matrix {
+  animation: uiMatrixReveal var(--duration-slow) var(--ease-out) both;
+}
+
+/* Stagger children: set --i on each child (or use nth-child cap). */
+.ui-stagger > * {
+  animation: uiRise var(--duration-slow) var(--ease-spring) both;
+  animation-delay: calc(var(--i, 0) * 60ms);
+}
+
+.ui-stagger--auto > *:nth-child(1) {
+  animation-delay: 0ms;
+}
+
+.ui-stagger--auto > *:nth-child(2) {
+  animation-delay: 60ms;
+}
+
+.ui-stagger--auto > *:nth-child(3) {
+  animation-delay: 120ms;
+}
+
+.ui-stagger--auto > *:nth-child(4) {
+  animation-delay: 180ms;
+}
+
+.ui-stagger--auto > *:nth-child(5) {
+  animation-delay: 240ms;
+}
+
+.ui-stagger--auto > *:nth-child(6) {
+  animation-delay: 300ms;
+}
+
+.ui-stagger--auto > *:nth-child(n + 7) {
+  animation-delay: 360ms;
+}
+
+/* Reveal-on-scroll: add .ui-reveal, toggle .is-visible via IntersectionObserver.
+   Degrades to visible with no JS. */
+@media (prefers-reduced-motion: no-preference) {
+  .ui-reveal {
+    opacity: 0;
+    transform: translateY(14px);
+    transition:
+      opacity var(--duration-slow) var(--ease-out),
+      transform var(--duration-slow) var(--ease-out);
+  }
+
+  .ui-reveal.is-visible {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.ui-skeleton {
+  background:
+    linear-gradient(
+      90deg,
+      var(--panel-soft) 25%,
+      color-mix(in srgb, var(--panel-soft) 55%, var(--line-strong)) 50%,
+      var(--panel-soft) 75%
+    );
+  background-size: 200% 100%;
+  animation: uiShimmer 1.4s linear infinite;
+  border-radius: var(--radius-sm);
+  color: transparent;
+  min-height: 0.8em;
+}
+
+.ui-spinner {
+  animation: uiSpin 0.7s linear infinite;
+  border: 2px solid var(--line);
+  border-radius: 50%;
+  border-top-color: var(--accent);
+  display: inline-block;
+  height: 1.1rem;
+  width: 1.1rem;
+}
+
+.ui-caret::after {
+  animation: uiBlink 1.1s steps(1) infinite;
+  content: '▮';
+  margin-left: 0.1em;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .ui-reveal {
+    opacity: 1 !important;
+    transform: none !important;
+  }
+}