@veluai/velu 0.1.0

package/runtime/velu-ui/components/code-block.css

@@ -0,0 +1,263 @@
+/* CodeBlock — single block (with optional filename) or tabbed CodeGroup.
+   All values are tokens; light/dark via [data-theme]. Syntax token
+   colors live in --syntax-* vars below so prism's emitted .token.<type>
+   class names style cleanly without inline-style themes. */
+
+.velu-code-block {
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  color: var(--text-color);
+}
+
+/* Header row: outer flex that holds optional left/right scroll nav
+   buttons (group mode, when tabs overflow) and the tabs themselves. In
+   filename mode there's only one tab and nothing scrolls. */
+.velu-code-block__header {
+  display: flex;
+  align-items: flex-end;
+  padding: var(--s-2) var(--s-2) 0;
+}
+
+/* Inner scrollable strip — only this overflows horizontally; the nav
+   buttons stay pinned at the edges. min-inline-size: 0 lets the strip
+   shrink below its content size (default flex behavior would prevent
+   overflow from ever triggering). The scrollbar is hidden — users
+   either drag the tabs or click the nav arrows. */
+.velu-code-block__tabs {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--s-3);
+  flex: 1;
+  min-inline-size: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  scroll-behavior: smooth;
+}
+.velu-code-block__tabs::-webkit-scrollbar {
+  display: none;
+}
+
+/* Nav arrow — only rendered when the strip can scroll further in that
+   direction (see useScrollEdges in CodeBlock.jsx). */
+.velu-code-block__nav {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.5em;
+  block-size: 1.75em;
+  margin-block-end: var(--s-3);
+  padding: 0;
+  background: transparent;
+  border: 0;
+  color: var(--muted-color);
+  cursor: pointer;
+}
+.velu-code-block__nav:hover {
+  color: var(--text-color);
+}
+
+.velu-code-block__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding: var(--s-2) var(--s0);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+  color: var(--muted-color);
+  font: inherit;
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.velu-code-block__tab:hover:not(.velu-code-block__tab--active) {
+  color: var(--text-color);
+}
+.velu-code-block__tab--active {
+  background: var(--page-bg);
+  color: var(--text-color);
+  cursor: default;
+}
+
+.velu-code-block__tab-icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Subtle vertical divider between adjacent inactive tabs in a group. */
+.velu-code-block--group
+  .velu-code-block__tab:not(.velu-code-block__tab--active)
+  + .velu-code-block__tab:not(.velu-code-block__tab--active) {
+  position: relative;
+}
+.velu-code-block--group
+  .velu-code-block__tab:not(.velu-code-block__tab--active)
+  + .velu-code-block__tab:not(.velu-code-block__tab--active)::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: calc(var(--s-3) * -1);
+  inset-block: 25%;
+  inline-size: var(--border-width);
+  background: var(--border-color);
+}
+
+/* Body: the code area, monospace, horizontally scrollable for long lines.
+   Positioned so the copy button can absolutely anchor to its top-left. */
+.velu-code-block__body {
+  position: relative;
+  background: var(--page-bg);
+  padding: var(--s0);
+  overflow-x: auto;
+}
+
+/* Copy button — always visible. Frosted background so it remains
+   legible over whatever code sits beneath it. */
+.velu-code-block__copy {
+  position: absolute;
+  inset-block-start: var(--s-2);
+  inset-inline-end: var(--s-2);
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.75em;
+  block-size: 1.75em;
+  padding: 0;
+  background: color-mix(in srgb, var(--surface-color) 75%, transparent);
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  color: var(--muted-color);
+  cursor: pointer;
+}
+.velu-code-block__copy:hover {
+  color: var(--text-color);
+}
+
+.velu-code-block__pre {
+  margin: 0;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+  color: var(--text-color);
+}
+
+.velu-code-block__line {
+  display: flex;
+  align-items: baseline;
+  gap: var(--s0);
+}
+
+/* Highlighted-line stripe. Negative inline margin + matching padding
+   makes the highlight bleed to the body's edges (past the body padding)
+   so the stripe spans the full width like in VS Code, without shifting
+   the code text. The bg is a subtle accent tint — works in both
+   light + dark via [data-theme] color-mix. */
+.velu-code-block__line--highlight {
+  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
+  box-shadow: inset 2px 0 0 0 var(--accent-color);
+  margin-inline: calc(var(--s0) * -1);
+  padding-inline: var(--s0);
+}
+
+.velu-code-block__line-number {
+  user-select: none;
+  text-align: end;
+  inline-size: 2ch;
+  color: var(--muted-color);
+  flex: none;
+}
+
+.velu-code-block__line-code {
+  white-space: pre;
+  min-inline-size: 0;
+}
+
+/* ── Syntax token colors ────────────────────────────────────────────────── */
+/* Github-light-ish in light mode, github-dark-ish in dark mode.
+   Token classes come from prism-react-renderer's getTokenProps. */
+:root {
+  --syntax-comment: #6a737d;
+  --syntax-string:  #032f62;
+  --syntax-keyword: #d73a49;
+  --syntax-function: #6f42c1;
+  --syntax-number:  #005cc5;
+  --syntax-punctuation: var(--text-color);
+  --syntax-tag:     #22863a;
+}
+:root[data-theme='dark'] {
+  --syntax-comment: #8b949e;
+  --syntax-string:  #a5d6ff;
+  --syntax-keyword: #ff7b72;
+  --syntax-function: #d2a8ff;
+  --syntax-number:  #79c0ff;
+  --syntax-punctuation: var(--text-color);
+  --syntax-tag:     #7ee787;
+}
+
+.velu-code-block__pre .token.comment,
+.velu-code-block__pre .token.prolog,
+.velu-code-block__pre .token.cdata,
+.velu-code-block__pre .token.doctype {
+  color: var(--syntax-comment);
+  font-style: italic;
+}
+
+.velu-code-block__pre .token.string,
+.velu-code-block__pre .token.attr-value,
+.velu-code-block__pre .token.template-string,
+.velu-code-block__pre .token.template-punctuation,
+.velu-code-block__pre .token.char {
+  color: var(--syntax-string);
+}
+
+.velu-code-block__pre .token.keyword,
+.velu-code-block__pre .token.atrule,
+.velu-code-block__pre .token.attr-name,
+.velu-code-block__pre .token.selector,
+.velu-code-block__pre .token.important {
+  color: var(--syntax-keyword);
+}
+
+.velu-code-block__pre .token.function,
+.velu-code-block__pre .token.function-variable,
+.velu-code-block__pre .token.class-name,
+.velu-code-block__pre .token.maybe-class-name {
+  color: var(--syntax-function);
+}
+
+.velu-code-block__pre .token.number,
+.velu-code-block__pre .token.boolean,
+.velu-code-block__pre .token.constant,
+.velu-code-block__pre .token.builtin,
+.velu-code-block__pre .token.symbol,
+.velu-code-block__pre .token.variable,
+.velu-code-block__pre .token.property,
+.velu-code-block__pre .token.regex,
+.velu-code-block__pre .token.url,
+.velu-code-block__pre .token.entity {
+  color: var(--syntax-number);
+}
+
+.velu-code-block__pre .token.punctuation,
+.velu-code-block__pre .token.operator {
+  color: var(--syntax-punctuation);
+}
+
+.velu-code-block__pre .token.tag,
+.velu-code-block__pre .token.namespace {
+  color: var(--syntax-tag);
+}
+
+.velu-code-block__pre .token.inserted {
+  color: var(--syntax-tag);
+}
+.velu-code-block__pre .token.deleted {
+  color: var(--syntax-keyword);
+}