@call-me-sensei/toonlab 0.2.0 → 0.3.0

package/docs/docs.css

@@ -0,0 +1,589 @@
+/* ToonLab OSS docs — matches the labs home look (tokens duplicated per page,
+   same convention as home.css / settings.css). */
+
+:root {
+  --tl-bg-0: #0b0c0f;
+  --tl-bg-1: #111318;
+  --tl-bg-2: #191b21;
+  --tl-line: rgb(242 240 233 / 0.09);
+  --tl-line-bright: rgb(242 240 233 / 0.18);
+  --tl-ink-1: #f2f0e9;
+  --tl-ink-2: #a6a5a1;
+  --tl-ink-3: #62636b;
+  --tl-accent: #e8332e;
+  --tl-accent-hot: #ff4a42;
+  --tl-accent-deep: #b3201f;
+  --tl-ao: #3d7eff;
+  --tl-gold: #c9a24b;
+  --tl-font-display: "M PLUS 1", "Zen Kaku Gothic New", "Inter", system-ui, sans-serif;
+  --tl-font-jp: "Zen Kaku Gothic New", "M PLUS 1", sans-serif;
+  --tl-font-ui: "Inter", "M PLUS 1", system-ui, -apple-system, sans-serif;
+  --tl-font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --tl-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --tl-dur-1: 120ms;
+  --tl-dur-2: 220ms;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background: var(--tl-bg-0);
+  color: var(--tl-ink-1);
+  font-family: var(--tl-font-ui);
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* ---- Header (mirrors home-header) ---- */
+
+.docs-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 28px;
+  border-bottom: 1px solid var(--tl-line);
+}
+
+.docs-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.docs-brand-mark {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  background: var(--tl-accent);
+  color: #fff;
+  font-family: var(--tl-font-jp);
+  font-weight: 900;
+  font-size: 17px;
+  clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%);
+}
+
+.docs-brand-word {
+  font-family: var(--tl-font-display);
+  font-weight: 800;
+  letter-spacing: 0.16em;
+  font-size: 15px;
+}
+
+.docs-brand-tag {
+  font-family: var(--tl-font-mono);
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--tl-ink-3);
+  border: 1px solid var(--tl-line-bright);
+  padding: 3px 7px;
+  border-radius: 2px;
+}
+
+.docs-topnav {
+  display: flex;
+  align-items: center;
+  gap: 26px;
+}
+
+.docs-topnav a {
+  font-family: var(--tl-font-display);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--tl-ink-2);
+  transition: color var(--tl-dur-1) var(--tl-ease);
+}
+
+.docs-topnav a:hover,
+.docs-topnav a[aria-current="page"] {
+  color: var(--tl-ink-1);
+}
+
+/* ---- Frame ---- */
+
+.docs-frame {
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+  gap: 48px;
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 48px 24px 96px;
+}
+
+.docs-side {
+  position: sticky;
+  top: 24px;
+  align-self: start;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.docs-side-label {
+  font-family: var(--tl-font-mono);
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--tl-accent);
+}
+
+.docs-nav {
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--tl-line);
+}
+
+.docs-nav a {
+  padding: 8px 14px;
+  font-size: 14px;
+  color: var(--tl-ink-2);
+  border-left: 2px solid transparent;
+  margin-left: -1px;
+  transition: color var(--tl-dur-1) var(--tl-ease);
+}
+
+.docs-nav a:hover {
+  color: var(--tl-ink-1);
+}
+
+.docs-nav a.active {
+  color: var(--tl-ink-1);
+  border-left-color: var(--tl-accent);
+}
+
+.docs-side-foot {
+  display: flex;
+  gap: 14px;
+  padding-top: 6px;
+}
+
+.docs-side-foot a {
+  font-size: 12px;
+  color: var(--tl-ink-3);
+}
+
+.docs-side-foot a:hover {
+  color: var(--tl-ink-1);
+}
+
+/* ---- Content ---- */
+
+.docs-main {
+  min-width: 0;
+  max-width: 720px;
+}
+
+.docs-eyebrow {
+  font-family: var(--tl-font-mono);
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--tl-accent);
+  margin-bottom: 14px;
+}
+
+.docs-main h1 {
+  font-family: var(--tl-font-display);
+  font-size: clamp(28px, 4vw, 38px);
+  font-weight: 800;
+  letter-spacing: -0.01em;
+  line-height: 1.15;
+  margin: 0 0 14px;
+}
+
+.docs-lede {
+  font-size: 16px;
+  line-height: 1.65;
+  color: var(--tl-ink-2);
+  margin: 0 0 36px;
+  max-width: 60ch;
+}
+
+.docs-main h2 {
+  font-family: var(--tl-font-display);
+  font-size: 21px;
+  font-weight: 700;
+  margin: 48px 0 12px;
+  padding-top: 24px;
+  border-top: 1px solid var(--tl-line);
+}
+
+.docs-main h3 {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 28px 0 8px;
+}
+
+.docs-main p {
+  font-size: 14.5px;
+  line-height: 1.7;
+  color: var(--tl-ink-2);
+  margin: 0 0 14px;
+  max-width: 65ch;
+}
+
+.docs-main p strong,
+.docs-main li strong {
+  color: var(--tl-ink-1);
+}
+
+.docs-main a:not(.docs-card) {
+  /* Lightened from --tl-ao: the UI-link blue is too dim for 14.5px body
+     text on --tl-bg-0 (~4:1); this holds ~8:1 in dense paragraphs. */
+  color: #8fb3ff;
+}
+
+.docs-main a:not(.docs-card):hover {
+  text-decoration: underline;
+}
+
+.docs-main ul,
+.docs-main ol {
+  margin: 0 0 14px;
+  padding-left: 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.docs-main li {
+  font-size: 14.5px;
+  line-height: 1.65;
+  color: var(--tl-ink-2);
+}
+
+.docs-main code {
+  font-family: var(--tl-font-mono);
+  font-size: 0.92em;
+  background: var(--tl-bg-2);
+  border: 1px solid var(--tl-line);
+  border-radius: 2px;
+  padding: 1px 5px;
+}
+
+/* ---- Pro badge ---- */
+
+.docs-pro {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--tl-font-mono);
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--tl-gold);
+  border: 1px solid rgb(201 162 75 / 0.45);
+  background: rgb(201 162 75 / 0.08);
+  padding: 2px 7px;
+  border-radius: 2px;
+  vertical-align: 2px;
+  margin-left: 8px;
+  white-space: nowrap;
+}
+
+/* ---- Code + prompt blocks ---- */
+
+.docs-codeblock {
+  position: relative;
+  margin: 16px 0 20px;
+  border: 1px solid var(--tl-line);
+  border-radius: 4px;
+  background: var(--tl-bg-1);
+  overflow: hidden;
+}
+
+.docs-codeblock-label {
+  font-family: var(--tl-font-mono);
+  font-size: 10.5px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--tl-ink-3);
+  padding: 8px 14px 0;
+}
+
+.docs-codeblock pre {
+  margin: 0;
+  padding: 14px;
+  overflow-x: auto;
+}
+
+.docs-codeblock code {
+  font-family: var(--tl-font-mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+  color: var(--tl-ink-1);
+  background: none;
+  border: none;
+  padding: 0;
+  white-space: pre;
+}
+
+.docs-codeblock-copy {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--tl-font-ui);
+  font-size: 11px;
+  padding: 4px 10px;
+  color: var(--tl-ink-2);
+  background: var(--tl-bg-2);
+  border: 1px solid var(--tl-line-bright);
+  border-radius: 3px;
+  cursor: pointer;
+  transition: color var(--tl-dur-1) var(--tl-ease), border-color var(--tl-dur-1) var(--tl-ease);
+}
+
+.docs-codeblock-copy:hover {
+  color: var(--tl-ink-1);
+  border-color: var(--tl-ink-3);
+}
+
+.docs-promptblock {
+  margin: 20px 0 28px;
+}
+
+.docs-promptblock-title {
+  font-weight: 600;
+  font-size: 14.5px;
+  color: var(--tl-ink-1);
+}
+
+.docs-promptblock .docs-codeblock {
+  margin-top: 10px;
+  margin-bottom: 8px;
+}
+
+.docs-promptblock .docs-codeblock code {
+  white-space: pre-wrap;
+  color: var(--tl-ink-2);
+}
+
+.docs-promptblock-note {
+  font-size: 13px;
+  color: var(--tl-ink-3);
+  margin: 0;
+}
+
+/* ---- Cards, callouts, tables ---- */
+
+.docs-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 14px;
+  margin: 20px 0 8px;
+}
+
+.docs-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 18px;
+  border: 1px solid var(--tl-line);
+  border-radius: 4px;
+  background: var(--tl-bg-1);
+  transition: border-color var(--tl-dur-1) var(--tl-ease);
+}
+
+.docs-card:hover {
+  border-color: var(--tl-line-bright);
+}
+
+.docs-card strong {
+  color: var(--tl-ink-1);
+  font-size: 15px;
+}
+
+.docs-card span {
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--tl-ink-2);
+}
+
+.docs-card svg {
+  color: var(--tl-accent);
+}
+
+.docs-callout {
+  display: flex;
+  gap: 12px;
+  padding: 14px 16px;
+  margin: 16px 0 20px;
+  border: 1px solid var(--tl-line);
+  border-left: 2px solid var(--tl-accent);
+  border-radius: 4px;
+  background: linear-gradient(120deg, rgb(232 51 46 / 0.12), rgb(232 51 46 / 0.03));
+  font-size: 13.5px;
+  line-height: 1.6;
+  color: var(--tl-ink-2);
+}
+
+.docs-callout--pro {
+  border-left-color: var(--tl-gold);
+  background: linear-gradient(120deg, rgb(201 162 75 / 0.1), rgb(201 162 75 / 0.02));
+}
+
+.docs-callout svg {
+  flex-shrink: 0;
+  margin-top: 2px;
+  color: var(--tl-accent);
+}
+
+.docs-callout--pro svg {
+  color: var(--tl-gold);
+}
+
+.docs-table-wrap {
+  overflow-x: auto;
+  margin: 16px 0 20px;
+  border: 1px solid var(--tl-line);
+  border-radius: 4px;
+}
+
+.docs-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13.5px;
+}
+
+.docs-table th {
+  text-align: left;
+  font-family: var(--tl-font-mono);
+  font-size: 10.5px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--tl-ink-3);
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--tl-line);
+  background: var(--tl-bg-1);
+}
+
+.docs-table td {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--tl-line);
+  color: var(--tl-ink-2);
+  vertical-align: top;
+  line-height: 1.55;
+}
+
+.docs-table tr:last-child td {
+  border-bottom: none;
+}
+
+.docs-table td:first-child {
+  font-family: var(--tl-font-mono);
+  font-size: 12.5px;
+  color: var(--tl-ink-1);
+  white-space: nowrap;
+}
+
+.docs-step-label {
+  display: inline-block;
+  font-family: var(--tl-font-mono);
+  font-size: 11px;
+  color: var(--tl-accent);
+  margin-right: 8px;
+}
+
+/* ---- Rendered markdown (settings reference) ---- */
+
+.docs-md table {
+  display: block;
+  overflow-x: auto;
+  border-collapse: collapse;
+  font-size: 13px;
+  margin: 14px 0 22px;
+  border: 1px solid var(--tl-line);
+  border-radius: 4px;
+}
+
+.docs-md th {
+  text-align: left;
+  font-family: var(--tl-font-mono);
+  font-size: 10.5px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--tl-ink-3);
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--tl-line);
+  background: var(--tl-bg-1);
+  white-space: nowrap;
+}
+
+.docs-md td {
+  padding: 7px 12px;
+  border-bottom: 1px solid var(--tl-line);
+  color: var(--tl-ink-2);
+  vertical-align: top;
+  line-height: 1.5;
+  min-width: 60px;
+}
+
+.docs-md tr:last-child td {
+  border-bottom: none;
+}
+
+.docs-md td:first-child code {
+  color: var(--tl-ink-1);
+}
+
+.docs-md h2,
+.docs-md h3 {
+  scroll-margin-top: 24px;
+}
+
+.docs-md h3 {
+  font-family: var(--tl-font-mono);
+  font-size: 13px;
+  letter-spacing: 0.04em;
+  color: var(--tl-ink-1);
+}
+
+/* ---- Responsive ---- */
+
+@media (max-width: 860px) {
+  .docs-frame {
+    grid-template-columns: 1fr;
+    gap: 24px;
+    padding-top: 28px;
+  }
+
+  .docs-side {
+    position: static;
+  }
+
+  .docs-nav {
+    flex-direction: row;
+    flex-wrap: wrap;
+    border-left: none;
+    border-bottom: 1px solid var(--tl-line);
+    gap: 2px;
+  }
+
+  .docs-nav a {
+    border-left: none;
+    border-bottom: 2px solid transparent;
+    margin-left: 0;
+    margin-bottom: -1px;
+  }
+
+  .docs-nav a.active {
+    border-bottom-color: var(--tl-accent);
+  }
+}