executable-stories-formatters 0.17.0 → 1.0.0

package/templates/astro-starlight/src/pages/explorer/explorer.css

@@ -1,729 +0,0 @@
-.es-tool {
-  --es-content-max: 1100px;
-  --es-topbar-h: 48px;
-  background: var(--es-bg);
-  color: var(--es-text);
-  font-family: var(--sl-font, ui-sans-serif, system-ui, sans-serif);
-}
-
-.es-tool * {
-  box-sizing: border-box;
-}
-
-.es-tool button,
-.es-tool input,
-.es-tool select {
-  font: inherit;
-}
-
-/* ---- Top bar (keeps the Explorer tied to the docs) ----------------- */
-.topbar {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  height: var(--es-topbar-h);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0 16px;
-  border-bottom: 1px solid var(--es-line);
-  background: var(--es-surface);
-  font-size: 13px;
-}
-.topbar__home {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  color: var(--es-text);
-  text-decoration: none;
-  font-weight: 650;
-  padding: 5px 9px;
-  border-radius: var(--es-radius-sm);
-  transition: background-color 120ms ease;
-}
-.topbar__home:hover {
-  background: var(--es-surface-2);
-}
-.topbar__home::before {
-  content: "←";
-  color: var(--es-text-muted);
-}
-.topbar__sep {
-  color: var(--es-line-strong);
-}
-.topbar__here {
-  color: var(--es-text-muted);
-  font-family: var(--es-mono);
-  font-size: 12px;
-}
-
-.shell {
-  display: grid;
-  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
-  min-height: calc(100vh - var(--es-topbar-h));
-}
-
-/* ---- Sidebar ------------------------------------------------------- */
-.sidebar {
-  border-right: 1px solid var(--es-line);
-  background: var(--es-surface);
-  padding: 18px 16px;
-  position: sticky;
-  top: var(--es-topbar-h);
-  height: calc(100vh - var(--es-topbar-h));
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
-.brand {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.brand h1 {
-  font-size: 14px;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-  margin: 0;
-  color: var(--es-text);
-}
-
-.meta {
-  color: var(--es-text-muted);
-  font-size: 11px;
-  font-family: var(--es-mono);
-  white-space: nowrap;
-}
-
-.controls {
-  display: grid;
-  gap: 8px;
-}
-
-.search,
-.select {
-  width: 100%;
-  border: 1px solid var(--es-line);
-  border-radius: var(--es-radius-sm);
-  background: var(--es-bg);
-  color: var(--es-text);
-  padding: 9px 11px;
-}
-.search:focus,
-.select:focus {
-  outline: 2px solid var(--es-accent);
-  outline-offset: 1px;
-}
-
-.summary {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 6px;
-}
-
-.metric {
-  border: 1px solid var(--es-line);
-  border-radius: var(--es-radius-sm);
-  padding: 7px 9px;
-  background: var(--es-bg);
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-}
-.metric strong {
-  font-size: 16px;
-  line-height: 1;
-  font-variant-numeric: tabular-nums;
-}
-.metric span {
-  color: var(--es-text-muted);
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-}
-.metric--passed strong {
-  color: var(--es-passed);
-}
-.metric--failed strong {
-  color: var(--es-failed);
-}
-.metric--skipped strong {
-  color: var(--es-skipped);
-}
-.metric--pending strong {
-  color: var(--es-pending);
-}
-
-.scenario-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-top: 2px;
-}
-
-.scenario-button {
-  width: 100%;
-  border: 1px solid transparent;
-  border-radius: var(--es-radius-sm);
-  background: none;
-  color: var(--es-text);
-  cursor: pointer;
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  column-gap: 9px;
-  row-gap: 2px;
-  padding: 8px 9px;
-  text-align: left;
-  transition: background-color 120ms ease, border-color 120ms ease;
-}
-.scenario-button:hover {
-  background: var(--es-surface-2);
-}
-.scenario-button[aria-current="true"] {
-  border-color: var(--es-accent);
-  background: var(--es-accent-soft);
-}
-
-.row-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  margin-top: 5px;
-  background: var(--dot, var(--es-text-muted));
-}
-.dot-passed {
-  --dot: var(--es-passed);
-}
-.dot-failed {
-  --dot: var(--es-failed);
-}
-.dot-skipped {
-  --dot: var(--es-skipped);
-}
-.dot-pending {
-  --dot: var(--es-pending);
-}
-
-.scenario-title {
-  font-size: 13px;
-  font-weight: 550;
-  line-height: 1.35;
-}
-
-.scenario-context-flag {
-  justify-self: end;
-  align-self: start;
-  background: var(--es-accent-soft);
-  color: var(--es-accent);
-  border: 1px solid color-mix(in oklab, var(--es-accent) 24%, var(--es-line));
-  border-radius: var(--es-radius-pill);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  padding: 2px 7px;
-  text-transform: uppercase;
-}
-
-.scenario-source {
-  grid-column: 2 / span 2;
-  color: var(--es-text-muted);
-  font-family: var(--es-mono);
-  font-size: 11px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* ---- Content ------------------------------------------------------- */
-.content {
-  padding: 28px 32px;
-  min-width: 0;
-}
-
-.scenario-card {
-  max-width: var(--es-content-max);
-  margin: 0 auto;
-}
-
-.status {
-  align-items: center;
-  border-radius: var(--es-radius-pill);
-  display: inline-flex;
-  font-size: 11px;
-  font-weight: 700;
-  gap: 6px;
-  letter-spacing: 0.06em;
-  padding: 4px 10px;
-  text-transform: uppercase;
-  border: 1px solid currentcolor;
-}
-.status::before {
-  content: "";
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: currentcolor;
-}
-.status-passed {
-  color: var(--es-passed);
-  background: var(--es-passed-soft);
-}
-.status-failed {
-  color: var(--es-failed);
-  background: var(--es-failed-soft);
-}
-.status-skipped {
-  color: var(--es-skipped);
-  background: var(--es-skipped-soft);
-}
-.status-pending {
-  color: var(--es-pending);
-  background: var(--es-pending-soft);
-}
-
-.scenario-heading {
-  position: sticky;
-  top: var(--es-topbar-h);
-  z-index: 2;
-  background: linear-gradient(var(--es-bg) 78%, transparent);
-  padding: 6px 0 16px;
-  display: grid;
-  gap: 11px;
-  margin-bottom: 8px;
-}
-.scenario-heading h2 {
-  font-size: clamp(24px, 3vw, 36px);
-  line-height: 1.08;
-  letter-spacing: -0.02em;
-  margin: 0;
-  color: var(--es-text);
-}
-
-.feature-line {
-  color: var(--es-text-muted);
-  font-size: 13px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-}
-.feature-line .sep {
-  opacity: 0.5;
-}
-.source-link {
-  color: var(--es-accent);
-  text-decoration: none;
-  font-family: var(--es-mono);
-  font-size: 12px;
-  border-bottom: 1px solid color-mix(in oklab, var(--es-accent) 40%, transparent);
-}
-.source-link:hover {
-  border-bottom-color: var(--es-accent);
-}
-.source-text {
-  font-family: var(--es-mono);
-  font-size: 12px;
-  color: var(--es-text-muted);
-}
-
-.context-row {
-  display: flex;
-  align-items: center;
-}
-
-.context-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--es-accent);
-  font-size: 12px;
-  font-weight: 600;
-  text-decoration: none;
-}
-
-.context-link:hover {
-  text-decoration: underline;
-}
-
-.tag-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-.pill {
-  background: var(--es-surface);
-  border: 1px solid var(--es-line);
-  border-radius: var(--es-radius-pill);
-  color: var(--es-text-muted);
-  font-size: 12px;
-  padding: 3px 9px;
-  font-family: var(--es-mono);
-}
-
-.covers-row {
-  color: var(--es-text-muted);
-  font-size: 13px;
-}
-.covers-path {
-  background: var(--es-surface);
-  border: 1px solid var(--es-line);
-  border-radius: 4px;
-  font-family: var(--es-mono);
-  font-size: 12px;
-  padding: 2px 6px;
-}
-
-.section {
-  border-top: 1px solid var(--es-line);
-  padding-top: 20px;
-  margin-top: 22px;
-}
-.section > h3 {
-  font-size: 12px;
-  letter-spacing: 0.08em;
-  margin: 0 0 14px;
-  text-transform: uppercase;
-  color: var(--es-text-muted);
-}
-
-/* ---- Steps --------------------------------------------------------- */
-.steps {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  counter-reset: step;
-}
-.step {
-  align-items: center;
-  background: var(--es-surface);
-  border: 1px solid var(--es-line);
-  border-left: 3px solid var(--step-accent, var(--es-line-strong));
-  border-radius: var(--es-radius-sm);
-  display: grid;
-  gap: 12px;
-  grid-template-columns: 64px minmax(0, 1fr) auto;
-  list-style: none;
-  padding: 9px 12px;
-}
-.step--passed {
-  --step-accent: var(--es-passed);
-}
-.step--failed {
-  --step-accent: var(--es-failed);
-}
-.step--skipped {
-  --step-accent: var(--es-skipped);
-}
-.step--pending {
-  --step-accent: var(--es-pending);
-}
-.keyword {
-  color: var(--es-accent);
-  font-weight: 700;
-  font-size: 13px;
-}
-.step-text {
-  font-size: 14px;
-  line-height: 1.45;
-}
-.step-status {
-  font-family: var(--es-mono);
-  font-size: 11px;
-  text-transform: lowercase;
-  color: var(--step-accent, var(--es-text-muted));
-}
-
-/* ---- Docs ---------------------------------------------------------- */
-.doc-grid {
-  display: grid;
-  gap: 12px;
-}
-.doc-entry {
-  border: 1px solid var(--es-line);
-  border-radius: var(--es-radius);
-  background: var(--es-surface);
-  overflow: hidden;
-}
-.doc-entry__label {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--es-text-muted);
-  padding: 9px 12px;
-  border-bottom: 1px solid var(--es-line);
-  background: var(--es-surface-2);
-}
-.doc-entry__body {
-  padding: 12px;
-}
-
-.doc-note {
-  padding: 12px 14px;
-  border-left: 3px solid var(--es-accent);
-  color: var(--es-text-soft);
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-.doc-kv {
-  display: flex;
-  gap: 8px;
-  padding: 10px 12px;
-  font-size: 13px;
-}
-.doc-kv__label {
-  color: var(--es-text-muted);
-  font-weight: 600;
-}
-.doc-kv__value {
-  font-family: var(--es-mono);
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.doc-link-a {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 11px 14px;
-  color: var(--es-accent);
-  text-decoration: none;
-  font-weight: 550;
-}
-.doc-link-a:hover {
-  text-decoration: underline;
-}
-.doc-link-a::after {
-  content: "↗";
-  font-size: 0.85em;
-  opacity: 0.7;
-}
-
-.doc-entry pre {
-  margin: 0;
-  overflow: auto;
-  font-family: var(--es-mono);
-  font-size: 12.5px;
-  line-height: 1.6;
-}
-.doc-entry pre code {
-  font-family: inherit;
-}
-/* highlight.js — token-based theme so code colours adapt to light/dark
-   from the same --es-* palette (no CDN stylesheet needed, works offline). */
-.hljs-comment,
-.hljs-quote {
-  color: var(--es-text-muted);
-  font-style: italic;
-}
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-literal,
-.hljs-section,
-.hljs-doctag,
-.hljs-name {
-  color: var(--es-method-patch);
-}
-.hljs-string,
-.hljs-attr,
-.hljs-template-tag,
-.hljs-addition {
-  color: var(--es-passed);
-}
-.hljs-number,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-meta {
-  color: var(--es-method-put);
-}
-.hljs-title,
-.hljs-built_in,
-.hljs-class .hljs-title,
-.hljs-function .hljs-title,
-.hljs-attribute {
-  color: var(--es-method-post);
-}
-.hljs-type,
-.hljs-tag,
-.hljs-deletion,
-.hljs-variable {
-  color: var(--es-failed);
-}
-.doc-entry__body table {
-  border-collapse: collapse;
-  width: 100%;
-  font-size: 13px;
-}
-.doc-entry__body th,
-.doc-entry__body td {
-  border: 1px solid var(--es-line);
-  padding: 6px 10px;
-  text-align: left;
-}
-.doc-entry__body th {
-  background: var(--es-surface-2);
-  font-weight: 600;
-  text-transform: uppercase;
-  font-size: 11px;
-  letter-spacing: 0.04em;
-  color: var(--es-text-muted);
-}
-
-.doc-section-content {
-  font-size: 14px;
-  line-height: 1.6;
-}
-.doc-section-content > :first-child {
-  margin-top: 0;
-}
-.doc-section-content > :last-child {
-  margin-bottom: 0;
-}
-
-.doc-media {
-  display: grid;
-  gap: 8px;
-}
-.doc-media img,
-.doc-media video {
-  display: block;
-  width: 100%;
-  max-height: 70vh;
-  border-radius: var(--es-radius-sm);
-  background: #000;
-}
-.doc-media img {
-  background: var(--es-surface-2);
-  object-fit: contain;
-}
-.doc-media__caption {
-  font-size: 12px;
-  color: var(--es-text-muted);
-}
-.doc-media--broken {
-  padding: 16px;
-  border: 1px dashed var(--es-line-strong);
-  border-radius: var(--es-radius-sm);
-  text-align: center;
-  color: var(--es-text-muted);
-  font-size: 13px;
-}
-.doc-media--broken code {
-  display: block;
-  margin-top: 6px;
-  font-family: var(--es-mono);
-  font-size: 11px;
-  word-break: break-all;
-}
-
-.mermaid {
-  margin: 0;
-  text-align: center;
-}
-
-.doc-visual-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  gap: 10px;
-}
-.doc-visual-item {
-  display: grid;
-  gap: 6px;
-}
-.doc-visual-item .doc-visual-label {
-  font-size: 11px;
-  color: var(--es-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-.doc-visual-item img {
-  width: 100%;
-  border-radius: var(--es-radius-sm);
-  border: 1px solid var(--es-line);
-}
-
-.doc-children {
-  margin-top: 10px;
-  padding-left: 12px;
-  border-left: 2px solid var(--es-line);
-  display: grid;
-  gap: 10px;
-}
-
-.empty {
-  color: var(--es-text-muted);
-  display: grid;
-  min-height: 60vh;
-  place-items: center;
-  text-align: center;
-  font-size: 14px;
-}
-.error {
-  color: var(--es-failed);
-  white-space: pre-wrap;
-  font-family: var(--es-mono);
-  font-size: 13px;
-  background: var(--es-failed-soft);
-  border: 1px solid color-mix(in oklab, var(--es-failed) 30%, var(--es-line));
-  border-radius: var(--es-radius-sm);
-  padding: 12px 14px;
-  margin: 0;
-}
-
-@media (max-width: 880px) {
-  .shell {
-    display: block;
-  }
-  .sidebar {
-    /* Cap the list so the detail pane is reachable without scrolling past
-       every scenario; the list scrolls within this panel. */
-    max-height: 45vh;
-    height: auto;
-    position: sticky;
-    top: var(--es-topbar-h);
-    z-index: 5;
-    box-shadow: 0 6px 12px -8px rgb(0 0 0 / 0.3);
-  }
-  .content {
-    padding: 18px;
-  }
-  .step {
-    grid-template-columns: 1fr;
-    gap: 4px;
-  }
-}
-
-/* ---- Accessibility -------------------------------------------------------- */
-
-/* Visible keyboard focus on every interactive element. */
-.scenario-button:focus-visible,
-.topbar__home:focus-visible,
-.source-link:focus-visible,
-.doc-link-a:focus-visible,
-.search:focus-visible,
-.select:focus-visible,
-.doc-media video:focus-visible {
-  outline: 2px solid var(--es-accent);
-  outline-offset: 2px;
-  border-radius: var(--es-radius-sm);
-}
-
-/* Respect users who prefer reduced motion: no transitions, transforms, or
-   smooth scrolling. */
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}