@sethlivingston/cathode 0.1.0

package/fonts/LICENSE.txt

@@ -0,0 +1,4 @@
+The IBM Plex font files in this directory (IBM Plex Sans, IBM Plex Mono)
+are copyright IBM Corp. and licensed under the SIL Open Font License 1.1.
+Full license text: https://github.com/IBM/plex/blob/master/LICENSE.txt
+Files sourced via Fontsource (https://fontsource.org), latin subset, woff2.

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@sethlivingston/cathode",
+  "version": "0.1.0",
+  "description": "Dark-only CSS design system: inky surfaces, hairline borders, mono for data, arcade semantic color. Built to be driven by AI agents.",
+  "license": "MIT",
+  "author": "Seth Livingston",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sethlivingston/cathode.git"
+  },
+  "keywords": [
+    "css",
+    "design-system",
+    "design-tokens",
+    "dark-theme",
+    "ai-agents"
+  ],
+  "style": "dist/cathode.css",
+  "exports": {
+    ".": "./dist/cathode.css",
+    "./tokens": "./src/tokens.css",
+    "./agents": "./AGENTS.md",
+    "./fonts/*": "./fonts/*",
+    "./src/*": "./src/*"
+  },
+  "files": [
+    "dist",
+    "src",
+    "fonts",
+    "AGENTS.md"
+  ],
+  "scripts": {
+    "build": "node build.mjs"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/base.css

@@ -0,0 +1,166 @@
+/* cathode/base.css — element defaults on the dark base */
+
+html {
+  background: var(--ct-bg-0);
+}
+
+body {
+  font-family: var(--ct-font-sans);
+  font-size: var(--ct-text-md);
+  line-height: var(--ct-leading);
+  color: var(--ct-text);
+  background: var(--ct-bg-0);
+  -webkit-font-smoothing: antialiased;
+}
+
+::selection {
+  background: var(--ct-accent);
+  color: var(--ct-on-accent);
+}
+
+/* Headings — tight, confident, no decoration */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0 0 var(--ct-space-3);
+  line-height: var(--ct-leading-tight);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+h1 { font-size: var(--ct-text-3xl); }
+h2 { font-size: var(--ct-text-2xl); }
+h3 { font-size: var(--ct-text-xl); }
+h4 { font-size: var(--ct-text-lg); }
+h5,
+h6 { font-size: var(--ct-text-md); }
+
+p {
+  margin: 0 0 var(--ct-space-3);
+}
+
+p:last-child {
+  margin-bottom: 0;
+}
+
+a {
+  color: var(--ct-accent);
+  text-decoration: none;
+  transition: color var(--ct-quick) var(--ct-ease);
+}
+
+a:hover {
+  color: var(--ct-accent-bright);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid var(--ct-border);
+  margin: var(--ct-space-5) 0;
+}
+
+ul,
+ol {
+  margin: 0 0 var(--ct-space-3);
+  padding-left: var(--ct-space-5);
+}
+
+blockquote {
+  margin: 0 0 var(--ct-space-3);
+  padding: var(--ct-space-2) var(--ct-space-4);
+  border-left: 2px solid var(--ct-accent);
+  color: var(--ct-text-dim);
+}
+
+/* Code & data — the mono wink */
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-sm);
+}
+
+code,
+samp {
+  background: var(--ct-bg-2);
+  border: 1px solid var(--ct-border);
+  border-radius: var(--ct-radius);
+  padding: 1px 5px;
+}
+
+pre {
+  background: var(--ct-bg-1);
+  border: 1px solid var(--ct-border);
+  border-radius: var(--ct-radius);
+  padding: var(--ct-space-4);
+  overflow-x: auto;
+  margin: 0 0 var(--ct-space-3);
+}
+
+pre code {
+  background: none;
+  border: 0;
+  padding: 0;
+}
+
+kbd {
+  background: var(--ct-bg-3);
+  border: 1px solid var(--ct-border-bright);
+  border-bottom-width: 2px;
+  border-radius: var(--ct-radius);
+  padding: 1px 6px;
+  font-size: var(--ct-text-xs);
+}
+
+/* .ct-data — apply to any inline run of IDs, counts, timestamps */
+.ct-data {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-sm);
+  font-variant-numeric: tabular-nums;
+}
+
+/* .ct-label-mono — uppercase mono micro-label (section headers, table heads) */
+.ct-label-mono {
+  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);
+}
+
+/* Muted text helpers */
+.ct-dim { color: var(--ct-text-dim); }
+.ct-faint { color: var(--ct-text-faint); }
+
+/* Focus — one ring to rule them all */
+:focus-visible {
+  outline: 2px solid var(--ct-accent-glow);
+  outline-offset: 1px;
+}
+
+/* Scrollbars — quiet, square */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--ct-border-bright) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--ct-border-bright);
+  border: 2px solid var(--ct-bg-0);
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}

package/src/components/badge.css

@@ -0,0 +1,59 @@
+/* cathode/badge.css — the arcade tag. Always mono, always meaningful.
+   Status variants have fixed meanings; categorical variants are free.
+   Custom hue: <span class="ct-badge" style="--badge-hue: var(--ct-pink)"> */
+
+.ct-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ct-space-1);
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-xs);
+  font-weight: 600;
+  letter-spacing: var(--ct-tracking-mono);
+  text-transform: uppercase;
+  line-height: 1;
+  border-radius: var(--ct-radius);
+  padding: 3px var(--ct-space-2);
+  --badge-hue: var(--ct-text-dim);
+  color: var(--badge-hue);
+  background: color-mix(in srgb, var(--badge-hue) 13%, transparent);
+  border: 1px solid color-mix(in srgb, var(--badge-hue) 35%, transparent);
+  white-space: nowrap;
+}
+
+/* Status — fixed meanings */
+.ct-badge--success { --badge-hue: var(--ct-green); }
+.ct-badge--danger  { --badge-hue: var(--ct-red); }
+.ct-badge--warning { --badge-hue: var(--ct-amber); }
+.ct-badge--info    { --badge-hue: var(--ct-cyan); }
+.ct-badge--accent  { --badge-hue: var(--ct-accent); }
+
+/* Categorical — free for tags/series */
+.ct-badge--orange  { --badge-hue: var(--ct-orange); }
+.ct-badge--lime    { --badge-hue: var(--ct-lime); }
+.ct-badge--pink    { --badge-hue: var(--ct-pink); }
+.ct-badge--indigo  { --badge-hue: var(--ct-indigo); }
+
+/* Solid variant — louder, for counts and hero stats */
+.ct-badge--solid {
+  color: var(--ct-bg-0);
+  background: var(--badge-hue);
+  border-color: var(--badge-hue);
+}
+
+/* Status dot — minimal presence indicator */
+.ct-dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  --dot-hue: var(--ct-text-faint);
+  background: var(--dot-hue);
+  box-shadow: 0 0 6px color-mix(in srgb, var(--dot-hue) 60%, transparent);
+}
+
+.ct-dot--success { --dot-hue: var(--ct-green); }
+.ct-dot--danger  { --dot-hue: var(--ct-red); }
+.ct-dot--warning { --dot-hue: var(--ct-amber); }
+.ct-dot--info    { --dot-hue: var(--ct-cyan); }
+.ct-dot--accent  { --dot-hue: var(--ct-accent); }

package/src/components/button.css

@@ -0,0 +1,107 @@
+/* cathode/button.css */
+
+.ct-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ct-space-2);
+  font-family: var(--ct-font-sans);
+  font-size: var(--ct-text-md);
+  font-weight: 500;
+  line-height: 1;
+  color: var(--ct-text);
+  background: var(--ct-bg-2);
+  border: 1px solid var(--ct-border);
+  border-radius: var(--ct-radius);
+  padding: var(--ct-space-2) var(--ct-space-4);
+  min-height: 36px;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  transition:
+    border-color var(--ct-quick) var(--ct-ease),
+    background var(--ct-quick) var(--ct-ease),
+    color var(--ct-quick) var(--ct-ease);
+}
+
+.ct-button:hover {
+  border-color: var(--ct-border-bright);
+  background: var(--ct-bg-3);
+}
+
+.ct-button:active {
+  transform: translateY(1px);
+}
+
+.ct-button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Primary — the one magenta action per view */
+.ct-button--primary {
+  background: var(--ct-accent);
+  border-color: var(--ct-accent);
+  color: var(--ct-on-accent);
+  font-weight: 600;
+}
+
+.ct-button--primary:hover {
+  background: var(--ct-accent-bright);
+  border-color: var(--ct-accent-bright);
+}
+
+/* Danger — destructive actions only */
+.ct-button--danger {
+  color: var(--ct-red);
+  border-color: color-mix(in srgb, var(--ct-red) 40%, transparent);
+}
+
+.ct-button--danger:hover {
+  background: color-mix(in srgb, var(--ct-red) 12%, transparent);
+  border-color: var(--ct-red);
+}
+
+/* Ghost — toolbar/inline actions, no box until hover */
+.ct-button--ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--ct-text-dim);
+}
+
+.ct-button--ghost:hover {
+  background: var(--ct-bg-2);
+  border-color: var(--ct-border);
+  color: var(--ct-text);
+}
+
+/* Sizes */
+.ct-button--sm {
+  font-size: var(--ct-text-sm);
+  padding: var(--ct-space-1) var(--ct-space-3);
+  min-height: 28px;
+}
+
+.ct-button--lg {
+  font-size: var(--ct-text-lg);
+  padding: var(--ct-space-3) var(--ct-space-5);
+  min-height: 44px;
+}
+
+/* Icon-only — square */
+.ct-button--icon {
+  padding: var(--ct-space-2);
+  width: 36px;
+}
+
+.ct-button--icon.ct-button--sm {
+  width: 28px;
+  padding: var(--ct-space-1);
+}
+
+/* Button row */
+.ct-button-group {
+  display: inline-flex;
+  gap: var(--ct-space-2);
+}

package/src/components/card.css

@@ -0,0 +1,68 @@
+/* cathode/card.css — the 1px-ruled box. Elevation = border brightness. */
+
+.ct-card {
+  background: var(--ct-bg-1);
+  border: 1px solid var(--ct-border);
+  border-radius: var(--ct-radius);
+}
+
+.ct-card--interactive {
+  cursor: pointer;
+  transition: border-color var(--ct-quick) var(--ct-ease);
+}
+
+.ct-card--interactive:hover {
+  border-color: var(--ct-border-bright);
+}
+
+.ct-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ct-space-3);
+  padding: var(--ct-space-3) var(--ct-space-4);
+  border-bottom: 1px solid var(--ct-border);
+}
+
+.ct-card__title {
+  font-size: var(--ct-text-md);
+  font-weight: 600;
+  margin: 0;
+}
+
+.ct-card__body {
+  padding: var(--ct-space-4);
+}
+
+.ct-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--ct-space-2);
+  padding: var(--ct-space-3) var(--ct-space-4);
+  border-top: 1px solid var(--ct-border);
+}
+
+/* Stat card — hero number in mono */
+.ct-stat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ct-space-1);
+  padding: var(--ct-space-4);
+}
+
+.ct-stat__value {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-2xl);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: var(--ct-leading-tight);
+}
+
+.ct-stat__delta {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-sm);
+}
+
+.ct-stat__delta--up { color: var(--ct-green); }
+.ct-stat__delta--down { color: var(--ct-red); }

package/src/components/feedback.css

@@ -0,0 +1,115 @@
+/* cathode/feedback.css — progress, meter, spinner, empty state, alert */
+
+/* Progress bar — smooth fill. Set width on the fill span. */
+.ct-progress {
+  height: 6px;
+  background: var(--ct-bg-3);
+  border: 1px solid var(--ct-border);
+  border-radius: var(--ct-radius);
+  overflow: hidden;
+}
+
+.ct-progress__fill {
+  display: block;
+  height: 100%;
+  background: var(--progress-hue, var(--ct-accent));
+  transition: width var(--ct-slow) var(--ct-ease);
+}
+
+.ct-progress--success { --progress-hue: var(--ct-green); }
+.ct-progress--danger  { --progress-hue: var(--ct-red); }
+.ct-progress--warning { --progress-hue: var(--ct-amber); }
+
+/* Meter — the cell variant. Visible segments, the one louder wink. */
+.ct-meter {
+  height: 10px;
+  background: var(--ct-bg-3);
+  border: 1px solid var(--ct-border);
+  border-radius: var(--ct-radius);
+  overflow: hidden;
+}
+
+.ct-meter__fill {
+  display: block;
+  height: 100%;
+  background: var(--progress-hue, var(--ct-accent));
+  -webkit-mask: repeating-linear-gradient(
+    to right,
+    #000 0 6px,
+    transparent 6px 8px
+  );
+  mask: repeating-linear-gradient(to right, #000 0 6px, transparent 6px 8px);
+  transition: width var(--ct-slow) var(--ct-ease);
+}
+
+/* Spinner — a rotating square, naturally */
+.ct-spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--ct-border-bright);
+  border-top-color: var(--ct-accent);
+  border-radius: var(--ct-radius);
+  animation: ct-spin 0.7s linear infinite;
+}
+
+@keyframes ct-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Empty state */
+.ct-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ct-space-2);
+  padding: var(--ct-space-7) var(--ct-space-4);
+  text-align: center;
+  border: 1px dashed var(--ct-border-bright);
+  border-radius: var(--ct-radius);
+  color: var(--ct-text-dim);
+}
+
+.ct-empty__glyph {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-2xl);
+  color: var(--ct-text-faint);
+  line-height: 1;
+}
+
+.ct-empty__title {
+  font-weight: 600;
+  color: var(--ct-text);
+}
+
+.ct-empty__hint {
+  font-size: var(--ct-text-sm);
+  color: var(--ct-text-faint);
+  max-width: 360px;
+}
+
+/* Alert — inline callout */
+.ct-alert {
+  display: flex;
+  gap: var(--ct-space-3);
+  padding: var(--ct-space-3) var(--ct-space-4);
+  font-size: var(--ct-text-md);
+  border: 1px solid color-mix(in srgb, var(--alert-hue, var(--ct-cyan)) 35%, transparent);
+  border-left-width: 2px;
+  border-left-color: var(--alert-hue, var(--ct-cyan));
+  border-radius: var(--ct-radius);
+  background: color-mix(in srgb, var(--alert-hue, var(--ct-cyan)) 7%, transparent);
+}
+
+.ct-alert--success { --alert-hue: var(--ct-green); }
+.ct-alert--danger  { --alert-hue: var(--ct-red); }
+.ct-alert--warning { --alert-hue: var(--ct-amber); }
+.ct-alert--info    { --alert-hue: var(--ct-cyan); }
+
+.ct-alert__title {
+  font-weight: 600;
+  margin: 0 0 var(--ct-space-1);
+}