@vvedantb/ui 0.17.1 → 0.18.0

package/tokens/src/css/markdown.css

@@ -0,0 +1,318 @@
+/*
+ * @vvedantb/ui/tokens/css/markdown.css: typography, code blocks, callouts,
+ * links and tables for <Markdown/>. Opt-in: neither tokens.css nor index.css
+ * imports it.
+ *
+ *   @import "@vvedantb/ui/tokens/css/markdown.css";
+ *
+ * Reads the shadcn channel variables as `rgb(var(--name))`: --foreground,
+ * --muted-foreground, --border, --primary, --success, --warning,
+ * --destructive, and --radius, --font-mono and --motion-fast (150ms when
+ * unset). The app (or compat-shadcn-rgb.css) must define them as space
+ * separated RGB channels. Code block and table panels fill with
+ * `var(--color-surface-secondary)`, which tokens.css and compat-shadcn-rgb.css
+ * both define (the compat file maps it to the app's `--muted`).
+ *
+ * Set on :root, `.markdown` or any ancestor to change (default shown):
+ *   --markdown-alert-important: var(--primary)   (RGB channels)
+ *
+ * Typography is owned here rather than by `prose`: headings stay compact so a
+ * chat reply reads as a reply, not a document. Sizes are in `em` so the scale
+ * follows whatever text size the surface sets (`text-sm` in chat, `text-xs`
+ * in compact rows). Everything sits in `components`, so a surface's own
+ * utilities (`[&_h3]:text-xs`) still win.
+ *
+ * Code blocks, inline code and callouts are tone surfaces, never hairlines.
+ */
+
+@layer components {
+  .markdown {
+    line-height: 1.625;
+    overflow-wrap: anywhere;
+  }
+  .markdown > :first-child {
+    margin-top: 0;
+  }
+  .markdown > :last-child {
+    margin-bottom: 0;
+  }
+
+  .markdown :is(p, ul, ol, blockquote, table, .markdown-code, .markdown-alert, .katex-display) {
+    margin-block: 0.65rem;
+  }
+  .markdown [data-streamdown="table-wrapper"],
+  .markdown [data-streamdown="mermaid-block"] {
+    margin-block: 0.75rem;
+  }
+
+  /* Headings — compact scale, 1em = the surface's body size. */
+  .markdown :is(h1, h2, h3, h4, h5, h6) {
+    margin: 1.25rem 0 0.5rem;
+    font-weight: 600;
+    line-height: 1.3;
+    color: rgb(var(--foreground));
+    letter-spacing: -0.01em;
+  }
+  .markdown h1 {
+    font-size: 1.43em;
+  }
+  .markdown h2 {
+    font-size: 1.29em;
+  }
+  .markdown h3 {
+    font-size: 1.14em;
+  }
+  .markdown :is(h4, h5, h6) {
+    font-size: 1em;
+  }
+  .markdown h6 {
+    color: rgb(var(--muted-foreground));
+  }
+  .markdown :is(h1, h2, h3, h4, h5, h6) + * {
+    margin-top: 0;
+  }
+
+  .markdown strong {
+    font-weight: 600;
+  }
+
+  .markdown hr {
+    margin-block: 1.25rem;
+    border: 0;
+    border-top: 1px solid rgb(var(--border));
+  }
+
+  /* Lists */
+  .markdown :is(ul, ol) {
+    padding-left: 1.25rem;
+  }
+  .markdown ul {
+    list-style: disc;
+  }
+  .markdown ul ul {
+    list-style: circle;
+  }
+  .markdown ul ul ul {
+    list-style: square;
+  }
+  .markdown ol {
+    list-style: decimal;
+  }
+  .markdown ol ol {
+    list-style: lower-alpha;
+  }
+  .markdown ol ol ol {
+    list-style: lower-roman;
+  }
+  .markdown li::marker {
+    color: rgb(var(--muted-foreground));
+    font-variant-numeric: tabular-nums;
+  }
+  .markdown li + li {
+    margin-top: 0.25rem;
+  }
+  .markdown li > :is(ul, ol) {
+    margin-block: 0.25rem;
+  }
+  .markdown li > p {
+    margin-block: 0.25rem;
+  }
+  /* GFM marks the whole list `contains-task-list` if any item is a task, so
+   * only task items drop their marker; the checkbox hangs in the gutter. */
+  .markdown li.task-list-item {
+    list-style: none;
+  }
+  .markdown .task-list-item > input[type="checkbox"] {
+    margin: 0 0.45em 0.15em -1.25rem;
+    vertical-align: middle;
+    accent-color: rgb(var(--primary));
+  }
+
+  /* Quotes and GitHub alerts */
+  .markdown blockquote {
+    padding-left: 0.8rem;
+    border-left: 2px solid rgb(var(--border));
+    color: rgb(var(--muted-foreground));
+  }
+  .markdown-alert {
+    --alert: var(--foreground);
+    padding: 0.6rem 0.8rem;
+    border-radius: clamp(0.75rem, var(--radius), 1rem);
+    background: rgb(var(--alert) / 0.06);
+  }
+  .markdown-alert[data-alert="tip"] {
+    --alert: var(--success);
+  }
+  .markdown-alert[data-alert="important"] {
+    --alert: var(--markdown-alert-important, var(--primary));
+  }
+  .markdown-alert[data-alert="warning"] {
+    --alert: var(--warning);
+  }
+  .markdown-alert[data-alert="caution"] {
+    --alert: var(--destructive);
+  }
+  .markdown-alert > :nth-child(2) {
+    margin-top: 0.25rem;
+  }
+  .markdown-alert > :last-child {
+    margin-bottom: 0;
+  }
+  .markdown .markdown-alert-title {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin: 0;
+    font-weight: 600;
+    color: rgb(var(--alert));
+  }
+  .markdown-alert-title svg {
+    width: 1.1em;
+    height: 1.1em;
+    flex-shrink: 0;
+  }
+
+  /* Links */
+  .markdown-link {
+    color: rgb(var(--primary));
+    font-weight: 500;
+    text-decoration: underline;
+    text-decoration-color: rgb(var(--primary) / 0.3);
+    text-underline-offset: 0.2em;
+    transition: text-decoration-color var(--motion-fast, 150ms) ease-out;
+  }
+  .markdown-link:hover {
+    text-decoration-color: currentColor;
+  }
+  .markdown-link-icon {
+    display: inline-block;
+    width: 0.95em;
+    height: 0.95em;
+    margin-right: 0.3em;
+    vertical-align: -0.12em;
+    border-radius: 0.2em;
+    color: rgb(var(--muted-foreground));
+  }
+  .markdown-link-icon[data-failed] {
+    display: none;
+  }
+
+  /* Inline code */
+  .markdown-inline-code {
+    padding: 0.1em 0.35em;
+    border-radius: 0.375rem;
+    /* Foreground-relative, so it still reads inside muted tables and callouts. */
+    background: rgb(var(--foreground) / 0.06);
+    font-family: var(--font-mono), ui-monospace, monospace;
+    font-size: 0.86em;
+    overflow-wrap: anywhere;
+  }
+  .markdown-inline-code[data-file] svg {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    margin-right: 0.25em;
+    vertical-align: -0.15em;
+    color: rgb(var(--muted-foreground));
+  }
+
+  /* Code blocks */
+  .markdown-code {
+    overflow: hidden;
+    border-radius: clamp(0.75rem, var(--radius), 1rem);
+    background: var(--color-surface-secondary);
+    content-visibility: auto;
+    contain-intrinsic-size: auto 120px;
+  }
+  .markdown-code-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.25rem 0.3rem 0 0.9rem;
+    font-family: var(--font-mono), ui-monospace, monospace;
+    font-size: 0.75rem;
+    line-height: 1.75rem;
+    color: rgb(var(--muted-foreground));
+  }
+  .markdown-code-label {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: 0.35rem;
+  }
+  .markdown-code-label svg {
+    width: 0.9rem;
+    height: 0.9rem;
+    flex-shrink: 0;
+  }
+  .markdown-code-actions {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 0.125rem;
+  }
+  .markdown-code pre {
+    margin: 0;
+    padding: 0.25rem 0.9rem 0.8rem;
+    overflow-x: auto;
+    background: transparent;
+    font-family: var(--font-mono), ui-monospace, monospace;
+    font-size: 0.8125rem;
+    line-height: 1.55;
+    white-space: pre;
+    overflow-wrap: normal;
+    tab-size: 2;
+    scrollbar-width: thin;
+  }
+  .markdown-code[data-wrap] pre {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  .markdown-code-line span[style] {
+    color: var(--md-c, inherit);
+  }
+  .dark .markdown-code-line span[style] {
+    color: var(--shiki-dark, var(--md-c, inherit));
+  }
+
+  /* Tables — cells size to their words, never split them mid-word. */
+  .markdown table {
+    font-size: 0.93em;
+    overflow-wrap: normal;
+    line-height: 1.5;
+  }
+  .markdown :is(th, td) {
+    padding: 0.45rem 0.75rem;
+    text-align: left;
+    vertical-align: top;
+  }
+  .markdown th {
+    font-weight: 600;
+    white-space: nowrap;
+  }
+  .markdown tbody tr + tr {
+    border-top: 1px solid rgb(var(--border) / 0.7);
+  }
+
+  .markdown .katex-display {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+}
+
+/* Unlayered: Streamdown's table wrapper carries border / background / radius
+ * utilities, which outrank anything in `components`. Restyled to match code
+ * blocks — one surface-secondary tone, controls in its header row, no hairlines. */
+.markdown [data-streamdown="table-wrapper"] {
+  gap: 0;
+  padding: 0.25rem 0.3rem 0.4rem;
+  border: 0;
+  border-radius: clamp(0.75rem, var(--radius), 1rem);
+  background: var(--color-surface-secondary);
+}
+.markdown [data-streamdown="table-wrapper"] > div:has([data-streamdown="table"]) {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}