@sethlivingston/cathode 0.1.0

package/src/components/forms.css

@@ -0,0 +1,206 @@
+/* cathode/forms.css — fields, inputs, selects, checks, switch */
+
+.ct-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ct-space-2);
+  margin-bottom: var(--ct-space-4);
+}
+
+.ct-label {
+  font-size: var(--ct-text-sm);
+  font-weight: 500;
+  color: var(--ct-text-dim);
+}
+
+.ct-label--required::after {
+  content: " *";
+  color: var(--ct-red);
+}
+
+.ct-input,
+.ct-select,
+.ct-textarea {
+  font-family: var(--ct-font-sans);
+  font-size: var(--ct-text-md);
+  color: var(--ct-text);
+  background: var(--ct-bg-1);
+  border: 1px solid var(--ct-border);
+  border-radius: var(--ct-radius);
+  padding: var(--ct-space-2) var(--ct-space-3);
+  min-height: 36px;
+  width: 100%;
+  transition: border-color var(--ct-quick) var(--ct-ease);
+}
+
+.ct-input:hover,
+.ct-select:hover,
+.ct-textarea:hover {
+  border-color: var(--ct-border-bright);
+}
+
+.ct-input:focus,
+.ct-select:focus,
+.ct-textarea:focus {
+  outline: none;
+  border-color: var(--ct-accent);
+  box-shadow: 0 0 0 2px var(--ct-accent-glow);
+}
+
+.ct-input::placeholder,
+.ct-textarea::placeholder {
+  color: var(--ct-text-faint);
+}
+
+/* Mono input — for IDs, tokens, code-like values */
+.ct-input--mono {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-sm);
+}
+
+.ct-textarea {
+  min-height: 96px;
+  resize: vertical;
+  line-height: var(--ct-leading);
+}
+
+.ct-select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23a2a2b3' stroke-width='1.5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--ct-space-3) center;
+  padding-right: var(--ct-space-6);
+  cursor: pointer;
+}
+
+/* Validation */
+.ct-input[aria-invalid="true"],
+.ct-select[aria-invalid="true"],
+.ct-textarea[aria-invalid="true"] {
+  border-color: var(--ct-red);
+}
+
+.ct-input[aria-invalid="true"]:focus,
+.ct-textarea[aria-invalid="true"]:focus {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ct-red) 40%, transparent);
+}
+
+.ct-help {
+  font-size: var(--ct-text-sm);
+  color: var(--ct-text-faint);
+}
+
+.ct-error {
+  font-size: var(--ct-text-sm);
+  color: var(--ct-red);
+}
+
+/* Checkbox & radio — square pixels, round dots */
+.ct-check,
+.ct-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ct-space-2);
+  font-size: var(--ct-text-md);
+  cursor: pointer;
+  user-select: none;
+}
+
+.ct-check input,
+.ct-radio input {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  background: var(--ct-bg-1);
+  border: 1px solid var(--ct-border-bright);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition:
+    background var(--ct-quick) var(--ct-ease),
+    border-color var(--ct-quick) var(--ct-ease);
+}
+
+.ct-check input {
+  border-radius: var(--ct-radius);
+}
+
+.ct-radio input {
+  border-radius: 50%;
+}
+
+.ct-check input:checked,
+.ct-radio input:checked {
+  background: var(--ct-accent);
+  border-color: var(--ct-accent);
+}
+
+.ct-check input:checked {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.5l2.5 2.5 4.5-5.5' fill='none' stroke='%23150420' stroke-width='2'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.ct-radio input:checked {
+  box-shadow: inset 0 0 0 3px var(--ct-bg-1);
+}
+
+/* Switch */
+.ct-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ct-space-2);
+  font-size: var(--ct-text-md);
+  cursor: pointer;
+  user-select: none;
+}
+
+.ct-switch input {
+  appearance: none;
+  width: 32px;
+  height: 18px;
+  margin: 0;
+  background: var(--ct-bg-3);
+  border: 1px solid var(--ct-border-bright);
+  border-radius: var(--ct-radius);
+  position: relative;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background var(--ct-quick) var(--ct-ease);
+}
+
+.ct-switch input::before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 12px;
+  height: 12px;
+  background: var(--ct-text-dim);
+  border-radius: var(--ct-radius);
+  transition:
+    translate var(--ct-quick) var(--ct-ease),
+    background var(--ct-quick) var(--ct-ease);
+}
+
+.ct-switch input:checked {
+  background: var(--ct-accent);
+  border-color: var(--ct-accent);
+}
+
+.ct-switch input:checked::before {
+  translate: 14px 0;
+  background: var(--ct-on-accent);
+}
+
+/* Inline form row */
+.ct-form-row {
+  display: flex;
+  gap: var(--ct-space-3);
+  align-items: flex-end;
+}
+
+.ct-form-row .ct-field {
+  flex: 1;
+  margin-bottom: 0;
+}

package/src/components/layout.css

@@ -0,0 +1,76 @@
+/* cathode/layout.css — app shell and composition helpers */
+
+/* App shell: navbar on top, sidebar + main below
+   <body class="ct-shell">
+     <nav class="ct-navbar">…</nav>
+     <aside class="ct-sidebar">…</aside>
+     <main class="ct-main">…</main>
+   </body> */
+.ct-shell {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
+  grid-template-areas:
+    "nav nav"
+    "side main";
+  min-height: 100vh;
+}
+
+.ct-shell > .ct-navbar { grid-area: nav; }
+.ct-shell > .ct-sidebar { grid-area: side; }
+.ct-shell > .ct-main { grid-area: main; }
+
+.ct-main {
+  padding: var(--ct-space-5);
+  overflow-y: auto;
+  min-width: 0;
+}
+
+/* Centered content page (docs, marketing, settings) */
+.ct-container {
+  width: min(720px, 100% - var(--ct-space-6));
+  margin-inline: auto;
+}
+
+.ct-container--wide {
+  width: min(1100px, 100% - var(--ct-space-6));
+}
+
+/* Vertical rhythm */
+.ct-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ct-space-4);
+}
+
+.ct-stack--tight { gap: var(--ct-space-2); }
+.ct-stack--loose { gap: var(--ct-space-6); }
+
+/* Horizontal cluster, wraps */
+.ct-cluster {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ct-space-2);
+}
+
+/* Responsive card grid */
+.ct-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: var(--ct-space-4);
+}
+
+/* Mobile: sidebar collapses under navbar */
+@media (max-width: 720px) {
+  .ct-shell {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "nav"
+      "main";
+  }
+
+  .ct-shell > .ct-sidebar {
+    display: none;
+  }
+}

package/src/components/nav.css

@@ -0,0 +1,151 @@
+/* cathode/nav.css — navbar, sidebar, tabs, breadcrumb */
+
+/* Top navbar */
+.ct-navbar {
+  display: flex;
+  align-items: center;
+  gap: var(--ct-space-4);
+  padding: 0 var(--ct-space-4);
+  height: 52px;
+  background: var(--ct-bg-1);
+  border-bottom: 1px solid var(--ct-border);
+  position: sticky;
+  top: 0;
+  z-index: var(--ct-z-nav);
+}
+
+.ct-navbar__brand {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-md);
+  font-weight: 600;
+  letter-spacing: var(--ct-tracking-mono);
+  text-transform: uppercase;
+  color: var(--ct-text);
+}
+
+.ct-navbar__spacer {
+  flex: 1;
+}
+
+/* Sidebar */
+.ct-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ct-space-1);
+  width: 220px;
+  padding: var(--ct-space-3);
+  background: var(--ct-bg-1);
+  border-right: 1px solid var(--ct-border);
+  overflow-y: auto;
+}
+
+.ct-sidebar__section {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-xs);
+  font-weight: 600;
+  letter-spacing: var(--ct-tracking-mono);
+  text-transform: uppercase;
+  color: var(--ct-text-faint);
+  padding: var(--ct-space-3) var(--ct-space-2) var(--ct-space-1);
+}
+
+.ct-nav-item {
+  display: flex;
+  align-items: center;
+  gap: var(--ct-space-2);
+  font-size: var(--ct-text-md);
+  color: var(--ct-text-dim);
+  padding: var(--ct-space-2) var(--ct-space-3);
+  border: 1px solid transparent;
+  border-radius: var(--ct-radius);
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    color var(--ct-quick) var(--ct-ease),
+    background var(--ct-quick) var(--ct-ease);
+}
+
+.ct-nav-item:hover {
+  color: var(--ct-text);
+  background: var(--ct-bg-2);
+  text-decoration: none;
+}
+
+.ct-nav-item[aria-current="page"],
+.ct-nav-item--active {
+  color: var(--ct-text);
+  background: var(--ct-bg-2);
+  border-color: var(--ct-border);
+}
+
+.ct-nav-item[aria-current="page"]::before,
+.ct-nav-item--active::before {
+  content: "";
+  width: 2px;
+  align-self: stretch;
+  margin: 2px 0;
+  background: var(--ct-accent);
+}
+
+/* Tabs */
+.ct-tabs {
+  display: flex;
+  gap: var(--ct-space-1);
+  border-bottom: 1px solid var(--ct-border);
+}
+
+.ct-tab {
+  font-family: var(--ct-font-sans);
+  font-size: var(--ct-text-md);
+  font-weight: 500;
+  color: var(--ct-text-dim);
+  background: none;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  padding: var(--ct-space-2) var(--ct-space-3);
+  margin-bottom: -1px;
+  cursor: pointer;
+  transition: color var(--ct-quick) var(--ct-ease);
+}
+
+.ct-tab:hover {
+  color: var(--ct-text);
+}
+
+.ct-tab[aria-selected="true"],
+.ct-tab--active {
+  color: var(--ct-text);
+  border-bottom-color: var(--ct-accent);
+}
+
+/* Breadcrumb — mono path, like a filesystem */
+.ct-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: var(--ct-space-2);
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-sm);
+  color: var(--ct-text-faint);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ct-breadcrumb li {
+  display: flex;
+  align-items: center;
+  gap: var(--ct-space-2);
+}
+
+.ct-breadcrumb li + li::before {
+  content: "/";
+  color: var(--ct-text-faint);
+}
+
+.ct-breadcrumb a {
+  color: var(--ct-text-dim);
+}
+
+.ct-breadcrumb li:last-child {
+  color: var(--ct-text);
+}

package/src/components/overlay.css

@@ -0,0 +1,126 @@
+/* cathode/overlay.css — modal (native <dialog>), toast, tooltip */
+
+/* Modal — use <dialog class="ct-modal"> with .showModal() */
+.ct-modal {
+  background: var(--ct-bg-1);
+  color: var(--ct-text);
+  border: 1px solid var(--ct-border-bright);
+  border-radius: var(--ct-radius);
+  padding: 0;
+  width: min(480px, calc(100vw - var(--ct-space-6)));
+  max-height: calc(100vh - var(--ct-space-8));
+}
+
+.ct-modal::backdrop {
+  background: rgba(5, 5, 8, 0.7);
+}
+
+.ct-modal[open] {
+  animation: ct-modal-in var(--ct-slow) var(--ct-ease);
+}
+
+@keyframes ct-modal-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+.ct-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--ct-space-4);
+  border-bottom: 1px solid var(--ct-border);
+}
+
+.ct-modal__title {
+  font-size: var(--ct-text-lg);
+  font-weight: 600;
+  margin: 0;
+}
+
+.ct-modal__body {
+  padding: var(--ct-space-4);
+  overflow-y: auto;
+}
+
+.ct-modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--ct-space-2);
+  padding: var(--ct-space-4);
+  border-top: 1px solid var(--ct-border);
+}
+
+/* Toasts — fixed stack, bottom right */
+.ct-toasts {
+  position: fixed;
+  bottom: var(--ct-space-4);
+  right: var(--ct-space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ct-space-2);
+  z-index: var(--ct-z-toast);
+}
+
+.ct-toast {
+  display: flex;
+  align-items: center;
+  gap: var(--ct-space-3);
+  background: var(--ct-bg-2);
+  border: 1px solid var(--ct-border-bright);
+  border-left: 2px solid var(--toast-hue, var(--ct-border-bright));
+  border-radius: var(--ct-radius);
+  padding: var(--ct-space-3) var(--ct-space-4);
+  min-width: 280px;
+  max-width: 400px;
+  font-size: var(--ct-text-md);
+  animation: ct-toast-in var(--ct-slow) var(--ct-ease);
+}
+
+@keyframes ct-toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+}
+
+.ct-toast--success { --toast-hue: var(--ct-green); }
+.ct-toast--danger  { --toast-hue: var(--ct-red); }
+.ct-toast--warning { --toast-hue: var(--ct-amber); }
+.ct-toast--info    { --toast-hue: var(--ct-cyan); }
+
+.ct-toast__title {
+  font-weight: 600;
+}
+
+/* Tooltip — CSS-only: <button data-ct-tip="Copied!"> */
+[data-ct-tip] {
+  position: relative;
+}
+
+[data-ct-tip]::after {
+  content: attr(data-ct-tip);
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--ct-bg-3);
+  color: var(--ct-text);
+  border: 1px solid var(--ct-border-bright);
+  border-radius: var(--ct-radius);
+  padding: var(--ct-space-1) var(--ct-space-2);
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-xs);
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--ct-quick) var(--ct-ease);
+  z-index: var(--ct-z-tooltip);
+}
+
+[data-ct-tip]:hover::after,
+[data-ct-tip]:focus-visible::after {
+  opacity: 1;
+}

package/src/components/table.css

@@ -0,0 +1,57 @@
+/* cathode/table.css — data tables. Numerics get .ct-num (mono, right-aligned). */
+
+.ct-table {
+  width: 100%;
+  font-size: var(--ct-text-md);
+  border: 1px solid var(--ct-border);
+  border-radius: var(--ct-radius);
+}
+
+.ct-table th {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-xs);
+  font-weight: 600;
+  letter-spacing: var(--ct-tracking-mono);
+  text-transform: uppercase;
+  color: var(--ct-text-faint);
+  text-align: left;
+  padding: var(--ct-space-2) var(--ct-space-3);
+  border-bottom: 1px solid var(--ct-border);
+  background: var(--ct-bg-1);
+}
+
+.ct-table td {
+  padding: var(--ct-space-2) var(--ct-space-3);
+  border-bottom: 1px solid var(--ct-border);
+}
+
+.ct-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.ct-table tbody tr {
+  transition: background var(--ct-quick) var(--ct-ease);
+}
+
+.ct-table tbody tr:hover {
+  background: var(--ct-bg-1);
+}
+
+.ct-table tbody tr[aria-selected="true"] {
+  background: color-mix(in srgb, var(--ct-accent) 8%, transparent);
+}
+
+/* Numeric/data cells */
+.ct-table .ct-num,
+.ct-table th.ct-num {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-sm);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+/* Compact variant for dense dashboards */
+.ct-table--compact th,
+.ct-table--compact td {
+  padding: var(--ct-space-1) var(--ct-space-2);
+}

package/src/fonts.css

@@ -0,0 +1,65 @@
+/* cathode/fonts.css — self-hosted IBM Plex (OFL-1.1), latin subset */
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
+}