@goodbones/browser 0.1.0-beta.1

package/src/app/styles/theme.css

@@ -0,0 +1,993 @@
+/*
+  Bone & Ink, as the docs site wears it: warm paper and ink neutrals, one accent (marrow), and
+  colour spent on the thing under the pointer and nowhere else. Dark by default; `data-theme`
+  on the root switches, set before paint from the stored preference or the system's.
+*/
+
+:root {
+  --bg: #141311;
+  --bg-2: #1f1d1a;
+  --bg-3: #2a2723;
+  --ink: #f6f2ea;
+  --ink-2: #d6d0c4;
+  --muted: #9a9488;
+  --faint: #5c574f;
+  --hair: #34302b;
+  --accent: #e0714a;
+  --accent-low: #3a1d12;
+  --accent-high: #f3b49a;
+  --red: #e5654f;
+  --red-low: #3b1a15;
+  --green: #7fbf7a;
+  --green-low: #17301a;
+  --orange: #e0a04a;
+  --orange-low: #3a2a12;
+  --blue: #7aa6d6;
+  --blue-low: #16232f;
+  --radius: 6px;
+  --font:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  color-scheme: dark;
+}
+
+:root[data-theme="light"] {
+  --bg: #faf8f4;
+  --bg-2: #f4f1ea;
+  --bg-3: #eeeae1;
+  --ink: #1a1815;
+  --ink-2: #34302a;
+  --muted: #6b665d;
+  --faint: #9c9588;
+  --hair: #ddd7cb;
+  --accent: #b4411e;
+  --accent-low: #f6e2d8;
+  --accent-high: #7a2a12;
+  --red: #b83a2a;
+  --red-low: #f8e0dc;
+  --green: #2f7d3a;
+  --green-low: #dff0e0;
+  --orange: #a86a12;
+  --orange-low: #f7e8cf;
+  --blue: #2f5f95;
+  --blue-low: #dde8f5;
+  color-scheme: light;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+  background: var(--bg);
+  color: var(--ink-2);
+  font-family: var(--font);
+  font-size: 14px;
+  line-height: 1.45;
+}
+
+button {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.mono {
+  font-family: var(--mono);
+  font-size: 0.92em;
+}
+
+.muted {
+  color: var(--muted);
+}
+.small {
+  font-size: 12px;
+}
+.good {
+  color: var(--green);
+}
+.bad {
+  color: var(--red);
+}
+.warn {
+  color: var(--orange);
+}
+
+/* the page ------------------------------------------------------------- */
+
+.page {
+  height: 100vh;
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+}
+
+.bar {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  padding: 0 16px;
+  height: 46px;
+  border-bottom: 1px solid var(--hair);
+  background: var(--bg);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 700;
+  color: var(--ink);
+}
+.brand .mark {
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+  background: var(--accent);
+}
+.brand .repo {
+  font-family: var(--mono);
+  font-weight: 400;
+  color: var(--muted);
+}
+.brand .repo::before {
+  content: "/ ";
+}
+
+.tabs {
+  display: flex;
+  gap: 4px;
+}
+.tab {
+  padding: 6px 12px;
+  border-radius: var(--radius);
+  color: var(--muted);
+}
+.tab:hover {
+  color: var(--ink);
+  background: var(--bg-2);
+}
+.tab.active {
+  color: var(--ink);
+  background: var(--bg-3);
+}
+.tab .count,
+.tab .pct {
+  margin-left: 8px;
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.status {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  font-size: 12px;
+  color: var(--muted);
+}
+.live {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.live .dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--faint);
+}
+.live.on .dot {
+  background: var(--green);
+  box-shadow: 0 0 0 3px var(--green-low);
+}
+.theme {
+  font-size: 16px;
+  padding: 2px 6px;
+  border-radius: var(--radius);
+}
+.theme:hover {
+  background: var(--bg-2);
+}
+
+.banner {
+  padding: 8px 16px;
+  font-size: 12px;
+  background: var(--bg-2);
+  border-bottom: 1px solid var(--hair);
+  color: var(--muted);
+}
+.banner.error {
+  background: var(--red-low);
+  color: var(--ink);
+}
+
+.body {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.placeholder {
+  padding: 48px;
+  color: var(--muted);
+  text-align: center;
+}
+
+/* panes ---------------------------------------------------------------- */
+
+.arch,
+.camp {
+  height: 100%;
+  display: grid;
+  min-height: 0;
+}
+.arch {
+  grid-template-columns: minmax(420px, 1.15fr) minmax(360px, 1fr) minmax(320px, 0.95fr);
+}
+.camp {
+  grid-template-columns: minmax(520px, 1.6fr) minmax(340px, 1fr);
+}
+@media (max-width: 1100px) {
+  .arch {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+  }
+  .arch .detail-pane {
+    grid-column: 1 / -1;
+  }
+  .camp {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+  }
+}
+
+.pane {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--hair);
+  overflow: hidden;
+}
+.pane:last-child {
+  border-right: none;
+}
+.pane-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--hair);
+  min-height: 40px;
+  flex: none;
+}
+.eyebrow {
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  font-weight: 600;
+  color: var(--muted);
+}
+.hint {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--faint);
+}
+button.small {
+  font-size: 11px;
+  padding: 3px 8px;
+  border: 1px solid var(--hair);
+  border-radius: var(--radius);
+  color: var(--muted);
+}
+button.small:hover {
+  color: var(--ink);
+  border-color: var(--muted);
+}
+.pane-head button.small:last-child {
+  margin-left: auto;
+}
+.filter {
+  flex: 1;
+  min-width: 0;
+  font: inherit;
+  font-size: 12px;
+  padding: 4px 8px;
+  border: 1px solid var(--hair);
+  border-radius: var(--radius);
+  background: var(--bg-2);
+  color: var(--ink);
+}
+.filter:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+.tabs-row {
+  gap: 2px;
+  overflow-x: auto;
+}
+.tabs-row .tab {
+  font-size: 12px;
+  padding: 4px 10px;
+  white-space: nowrap;
+}
+
+.legend {
+  flex: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 14px;
+  padding: 6px 12px;
+  border-top: 1px solid var(--hair);
+  font-size: 11px;
+  color: var(--muted);
+}
+.legend .key::before {
+  content: "";
+  display: inline-block;
+  width: 14px;
+  height: 3px;
+  border-radius: 2px;
+  margin-right: 6px;
+  vertical-align: middle;
+  background: var(--faint);
+}
+.legend .key.out::before {
+  background: var(--accent);
+}
+.legend .key.in::before {
+  background: var(--blue);
+}
+.legend .key.refused::before {
+  background: var(--red);
+}
+.legend .key.sibling::before {
+  background: var(--green);
+}
+.legend .key.governed::before {
+  background: var(--orange);
+}
+.legend .key.defined::before,
+.legend .key.open::before,
+.legend .key.sector::before,
+.legend .key.legacy::before,
+.legend .key.done::before,
+.legend .key.nudged::before {
+  width: 12px;
+  height: 10px;
+  border-radius: 3px;
+  border: 1px solid var(--faint);
+  background: transparent;
+}
+.legend .key.defined::before {
+  background: var(--accent-low);
+  border-color: var(--accent);
+}
+.legend .key.open::before {
+  border-style: dashed;
+  border-color: var(--orange);
+}
+.legend .key.legacy::before {
+  background: var(--orange-low);
+  border-color: var(--orange);
+  border-style: dashed;
+}
+.legend .key.done::before {
+  background: var(--green-low);
+  border-color: var(--green);
+}
+.legend .key.nudged::before {
+  border-color: var(--blue);
+  box-shadow: 0 0 0 2px var(--blue-low);
+}
+
+/* the tree ------------------------------------------------------------- */
+
+.tree {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  display: grid;
+  grid-template-columns: 1fr 150px;
+  align-items: start;
+}
+.rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-family: var(--mono);
+  font-size: 12.5px;
+}
+.row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding-right: 8px;
+  white-space: nowrap;
+  color: var(--ink-2);
+  cursor: pointer;
+  border-left: 3px solid transparent;
+}
+.row:hover {
+  background: var(--bg-2);
+}
+.row.folder .name {
+  color: var(--ink);
+  font-weight: 600;
+}
+.row .name.outside {
+  color: var(--muted);
+  font-style: italic;
+}
+.row .chevron {
+  width: 16px;
+  flex: none;
+  color: var(--muted);
+  padding: 0;
+  text-align: center;
+}
+.row .chevron.spacer {
+  display: inline-block;
+}
+.row .meta {
+  margin-left: auto;
+  color: var(--faint);
+  font-size: 11px;
+}
+.row .node-mark {
+  color: var(--accent);
+  font-size: 11px;
+  margin-left: 4px;
+}
+.badge {
+  margin-left: 6px;
+  font-size: 10px;
+  padding: 0 5px;
+  border-radius: 8px;
+  background: var(--red-low);
+  color: var(--red);
+}
+.row.focus {
+  background: var(--bg-3);
+  border-left-color: var(--ink);
+}
+.row.selected {
+  border-left-color: var(--accent);
+}
+.row.dep {
+  background: var(--accent-low);
+}
+.row.dep .name {
+  color: var(--accent-high);
+}
+.row.importer {
+  background: var(--blue-low);
+}
+.row.importer .name {
+  color: var(--blue);
+}
+.row.within {
+  background: var(--bg-2);
+}
+.row.sibling {
+  background: var(--green-low);
+}
+.row.sibling .name {
+  color: var(--green);
+}
+.row.governed .name {
+  text-decoration: underline;
+  text-decoration-color: var(--orange);
+  text-underline-offset: 3px;
+}
+.row.governed {
+  box-shadow: inset 0 0 0 1px var(--orange-low);
+}
+
+.arcs {
+  display: block;
+  overflow: visible;
+}
+.arc {
+  fill: none;
+  stroke-width: 1.25;
+  stroke: var(--faint);
+  opacity: 0.45;
+  transition: opacity 120ms ease;
+}
+.arc.out {
+  stroke: var(--accent);
+  stroke-width: 2;
+  opacity: 1;
+}
+.arc.in {
+  stroke: var(--blue);
+  stroke-width: 2;
+  opacity: 1;
+}
+.arc.within {
+  stroke: var(--muted);
+  opacity: 0.8;
+}
+.arc.refused {
+  stroke-dasharray: 4 3;
+}
+.arc.refused.out,
+.arc.refused.in,
+.arc.refused.within {
+  stroke: var(--red);
+}
+.head {
+  fill: var(--faint);
+}
+.head.out {
+  fill: var(--accent);
+}
+.head.in {
+  fill: var(--blue);
+}
+.head.within {
+  fill: var(--muted);
+}
+.head.refused {
+  fill: var(--red);
+}
+
+/* the manifest --------------------------------------------------------- */
+
+.manifest {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.source {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  list-style: none;
+  margin: 0;
+  padding: 8px 0;
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.5;
+}
+.line {
+  display: flex;
+  align-items: baseline;
+  padding: 0 12px 0 0;
+  white-space: pre;
+  color: var(--ink-2);
+  border-left: 3px solid transparent;
+}
+.line .ln {
+  flex: none;
+  width: 40px;
+  text-align: right;
+  padding-right: 12px;
+  color: var(--faint);
+  user-select: none;
+}
+.line .code {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.line .node-tag {
+  flex: none;
+  margin-left: 12px;
+  font-size: 10px;
+  color: var(--accent);
+  opacity: 0.7;
+}
+.line:hover {
+  background: var(--bg-2);
+  cursor: pointer;
+}
+.line.anchor .code {
+  color: var(--ink);
+  font-weight: 600;
+}
+.line.own {
+  background: var(--bg-2);
+  border-left-color: var(--orange);
+}
+.line.chain {
+  border-left-color: var(--accent);
+}
+.line.selected {
+  background: var(--accent-low);
+}
+.line.slack .code {
+  text-decoration: line-through;
+  text-decoration-color: var(--red);
+  color: var(--muted);
+}
+
+/* the detail ----------------------------------------------------------- */
+
+.detail {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 0 14px 24px;
+}
+.detail .pane-head {
+  margin: 0 -14px;
+}
+.detail h2 {
+  font-size: 15px;
+  margin: 14px 0 4px;
+  color: var(--ink);
+  word-break: break-all;
+}
+.detail h2.path {
+  font-size: 13px;
+}
+.detail h3 {
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin: 18px 0 6px;
+  font-weight: 600;
+}
+.detail p {
+  margin: 4px 0;
+}
+.message {
+  color: var(--ink-2);
+  border-left: 2px solid var(--accent);
+  padding-left: 10px;
+  font-size: 13px;
+}
+.crumbs {
+  font-size: 12px;
+  margin: 2px 0 8px;
+}
+.link {
+  color: var(--accent);
+  padding: 0;
+  text-align: left;
+  word-break: break-all;
+}
+.link:hover {
+  text-decoration: underline;
+}
+.facts {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 2px 14px;
+  margin: 8px 0;
+  font-size: 12.5px;
+}
+.facts dt {
+  color: var(--muted);
+}
+.facts dd {
+  margin: 0;
+  word-break: break-all;
+}
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.list li {
+  padding: 3px 0;
+  border-bottom: 1px solid var(--hair);
+  word-break: break-all;
+}
+.list.compact li {
+  padding: 1px 0;
+  border-bottom: none;
+}
+.list li:last-child {
+  border-bottom: none;
+}
+.chips {
+  list-style: none;
+  margin: 4px 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.chip {
+  font-family: var(--mono);
+  font-size: 11px;
+  padding: 1px 8px;
+  border-radius: 10px;
+  background: var(--bg-3);
+  color: var(--ink-2);
+  border: 1px solid transparent;
+}
+.chip.external {
+  background: var(--blue-low);
+  color: var(--blue);
+}
+.chip.allow {
+  background: var(--accent-low);
+  color: var(--accent-high);
+}
+.chip.deny {
+  background: var(--red-low);
+  color: var(--red);
+}
+.chip.rule {
+  background: transparent;
+  border-color: var(--hair);
+  color: var(--muted);
+}
+.chip.slack {
+  text-decoration: line-through;
+  opacity: 0.7;
+  border-color: var(--red);
+}
+.allowlist {
+  margin: 6px 0 10px;
+}
+.verdict {
+  display: inline-block;
+  width: 16px;
+  font-weight: 700;
+}
+.verdict.allowed {
+  color: var(--green);
+}
+.verdict.refused {
+  color: var(--red);
+}
+.verdict.ungoverned {
+  color: var(--muted);
+}
+.edge-row.refused {
+  color: var(--ink);
+}
+.family {
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--accent);
+  font-weight: 600;
+}
+.violation.baselined {
+  color: var(--muted);
+}
+.flag {
+  display: inline-block;
+  margin-left: 8px;
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 1px 6px;
+  border-radius: 8px;
+  background: var(--bg-3);
+  vertical-align: middle;
+  font-weight: 600;
+}
+.flag.good {
+  background: var(--green-low);
+  color: var(--green);
+}
+.flag.bad {
+  background: var(--red-low);
+  color: var(--red);
+}
+.flag.warn {
+  background: var(--orange-low);
+  color: var(--orange);
+}
+.progress {
+  height: 6px;
+  border-radius: 3px;
+  background: var(--bg-3);
+  margin: 8px 0;
+  overflow: hidden;
+}
+.progress-bar {
+  height: 100%;
+  background: var(--accent);
+}
+details summary {
+  cursor: pointer;
+  margin: 6px 0;
+}
+.sector-block {
+  margin: 8px 0 12px;
+}
+.declared {
+  margin: 6px 0;
+}
+
+/* the ladder ----------------------------------------------------------- */
+
+.camp-head {
+  padding: 10px 14px 6px;
+  border-bottom: 1px solid var(--hair);
+  flex: none;
+}
+.camp-head h2 {
+  margin: 0;
+  font-size: 16px;
+  color: var(--ink);
+}
+.ladder-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 8px;
+}
+.ladder {
+  display: block;
+  font-family: var(--font);
+}
+.ladder text {
+  fill: var(--ink-2);
+  font-size: 12px;
+}
+.ladder .eyebrow {
+  font-size: 9.5px;
+  letter-spacing: 0.08em;
+  font-weight: 600;
+  fill: var(--muted);
+}
+.ladder .phase-name {
+  font-size: 13px;
+  font-weight: 600;
+  fill: var(--ink);
+}
+.ladder .phase-count {
+  font-size: 12px;
+  font-weight: 600;
+  fill: var(--muted);
+}
+.ladder .phase {
+  fill: var(--bg-2);
+  stroke: var(--hair);
+}
+.ladder .phase-box.defined .phase {
+  fill: var(--accent-low);
+  stroke: var(--accent);
+}
+.ladder .phase-box.defined .eyebrow {
+  fill: var(--accent-high);
+}
+.ladder .phase-box.open .phase {
+  fill: var(--bg);
+  stroke: var(--orange);
+  stroke-width: 1.5;
+  stroke-dasharray: 5 4;
+}
+.ladder .phase-box.open .eyebrow,
+.ladder .phase-box.open .phase-name {
+  fill: var(--orange);
+}
+.ladder .phase-box.standing .phase {
+  fill: var(--bg-2);
+  stroke: var(--faint);
+  stroke-dasharray: 2 3;
+}
+.ladder .phase.end {
+  fill: var(--green-low);
+  stroke: var(--green);
+}
+.ladder .end-text {
+  fill: var(--green);
+}
+.ladder .intent {
+  font-size: 11px;
+  font-style: italic;
+  fill: var(--muted);
+}
+.ladder .connector {
+  stroke: var(--faint);
+  stroke-width: 1.5;
+}
+.ladder .arrowhead {
+  fill: var(--faint);
+}
+.ladder .rule {
+  stroke: var(--hair);
+  stroke-dasharray: 2 4;
+}
+.ladder .label {
+  font-size: 12px;
+  font-weight: 600;
+  fill: var(--ink);
+}
+.ladder .lane {
+  fill: none;
+  stroke: var(--hair);
+  stroke-dasharray: 3 3;
+}
+.ladder .chip {
+  fill: var(--accent-low);
+}
+.ladder .chip-text {
+  font-size: 11px;
+  fill: var(--accent-high);
+}
+.ladder .chip-count {
+  font-size: 11px;
+  font-weight: 600;
+  fill: var(--accent-high);
+}
+.ladder .chip-box.complete .chip {
+  fill: var(--green-low);
+}
+.ladder .chip-box.complete .chip-text,
+.ladder .chip-box.complete .chip-count {
+  fill: var(--green);
+}
+.ladder .chip-box.unledgered .chip {
+  stroke: var(--red);
+  stroke-dasharray: 3 2;
+}
+.ladder .sector {
+  fill: var(--bg);
+  stroke: var(--muted);
+}
+.ladder .sector-name {
+  font-size: 12px;
+  fill: var(--ink);
+}
+.ladder .sector-count {
+  font-size: 12px;
+  font-weight: 600;
+  fill: var(--ink-2);
+}
+.ladder .sector-box.legacy .sector {
+  fill: var(--orange-low);
+  stroke: var(--orange);
+  stroke-dasharray: 4 3;
+}
+.ladder .sector-box.legacy .sector-name,
+.ladder .sector-box.legacy .sector-count {
+  fill: var(--orange);
+}
+.ladder .sector-box.done .sector {
+  fill: var(--green-low);
+  stroke: var(--green);
+}
+.ladder .sector-box.done .sector-name,
+.ladder .sector-box.done .sector-count {
+  fill: var(--green);
+}
+.ladder .sector-box.stalled .sector-count {
+  fill: var(--red);
+}
+.ladder .sector-box.nudged .sector {
+  stroke: var(--blue);
+  stroke-width: 2;
+}
+.ladder .phase-box,
+.ladder .chip-box,
+.ladder .sector-box {
+  cursor: pointer;
+  transition: opacity 120ms ease;
+}
+.ladder.focused .phase-box:not(.lit),
+.ladder.focused .chip-box:not(.lit),
+.ladder.focused .sector-box:not(.lit) {
+  opacity: 0.35;
+}
+.ladder.focused .column.lit .phase-box,
+.ladder.focused .phase-box.lit,
+.ladder.focused .chip-box.lit,
+.ladder.focused .sector-box.lit {
+  opacity: 1;
+}
+.ladder .phase-box.selected .phase,
+.ladder .chip-box.selected .chip,
+.ladder .sector-box.selected .sector {
+  stroke: var(--ink);
+  stroke-width: 2;
+}
+.ladder .column.lit .phase {
+  stroke-width: 2;
+}