@activecollab/components/dist/esm/components/PortableText/Styles.js

ActiveCollab Components

import styled from "styled-components";
import { SPACE } from "../LayoutTokens";

/** The default `code` mark: a quiet inline chip that keeps the line intact. */
export const StyledCode = styled.code.withConfig({
  displayName: "Styles__StyledCode",
  componentId: "sc-1fss4z4-0"
})(["padding:0 ", ";border-radius:", ";background-color:var(--color-theme-300);font-family:\"SFMono-Regular\",Menlo,Consolas,\"Liberation Mono\",monospace;font-size:0.85em;"], "0.25rem", "0.25rem");
StyledCode.displayName = "StyledCode";

/** The default `link` mark: an inline text link inside flowing content. */
export const StyledLink = styled.a.withConfig({
  displayName: "Styles__StyledLink",
  componentId: "sc-1fss4z4-1"
})(["color:var(--color-primary);text-decoration:underline var(--color-primary);text-underline-offset:3px;&:hover{text-decoration:none;}"]);
StyledLink.displayName = "StyledLink";

/**
 * The default `code-block`: quiet preformatted content. It stays a bare
 * `<pre><code>` on purpose — article surfaces inject a Copy button onto
 * every `<pre>` they render.
 */
export const StyledCodeBlock = styled.pre.withConfig({
  displayName: "Styles__StyledCodeBlock",
  componentId: "sc-1fss4z4-2"
})(["margin:0;padding:", ";border-radius:", ";background-color:var(--color-theme-200);overflow-x:auto;code{font-family:\"SFMono-Regular\",Menlo,Consolas,\"Liberation Mono\",monospace;font-size:", ";color:var(--color-theme-900);}"], SPACE.md, "0.5rem", "0.875rem");
StyledCodeBlock.displayName = "StyledCodeBlock";

/**
 * The default `table` block wrapper: Table ships page-level chrome (outer
 * margins) that flowing content does not want — the PortableText Stack owns
 * the vertical rhythm here.
 */
export const StyledTableBlock = styled.div.withConfig({
  displayName: "Styles__StyledTableBlock",
  componentId: "sc-1fss4z4-3"
})([".c-table__wrap{margin:0;}"]);
StyledTableBlock.displayName = "StyledTableBlock";

/** The default `divider` block: a themed horizontal rule. */
export const StyledDivider = styled.hr.withConfig({
  displayName: "Styles__StyledDivider",
  componentId: "sc-1fss4z4-4"
})(["margin:0;border:none;border-top:1px solid var(--border-primary);"]);
StyledDivider.displayName = "StyledDivider";

/**
 * The default `list` block; rendered as ul or ol through the `as` prop, and
 * tagged `data-portable-list` so the depth rules below scope to design-system
 * lists — a stray `<ul>`/`<ol>` from an injected renderer is left untouched.
 *
 * Nesting works structurally: each level is its own StyledList inside a parent
 * `<li>`, so it re-applies its own `padding-left` (indentation compounds) and,
 * for ordered levels, restarts numbering. A nested list carries no vertical
 * margin, so it hugs the item it belongs to.
 *
 * Both bullet and numbered levels change their marker by nesting depth, so
 * levels stay distinct even where the two interleave:
 *   bullets   disc → circle → square → (disc)
 *   numbers   decimal → lower-alpha → lower-roman → (upper-alpha)
 * Depth is counted from the list ancestors themselves (not per-tag), so an
 * intervening `<ol>` never throws off a `<ul>`'s depth and vice-versa. The
 * rules are ordered shallow-to-deep; a deeper rule is more specific, so it
 * wins the cascade for the levels it applies to.
 */
export const StyledList = styled.ul.withConfig({
  displayName: "Styles__StyledList",
  componentId: "sc-1fss4z4-5"
})(["margin:0;padding-left:", ";list-style:", " outside;li + li{margin-top:", ";}& ul[data-portable-list]{list-style-type:circle;}& ol[data-portable-list]{list-style-type:lower-alpha;}& [data-portable-list] ul[data-portable-list]{list-style-type:square;}& [data-portable-list] ol[data-portable-list]{list-style-type:lower-roman;}& [data-portable-list] [data-portable-list] ul[data-portable-list]{list-style-type:disc;}& [data-portable-list] [data-portable-list] ol[data-portable-list]{list-style-type:upper-alpha;}"], "1.25rem", _ref => {
  let $ordered = _ref.$ordered;
  return $ordered ? "decimal" : "disc";
}, SPACE.xs);
StyledList.displayName = "StyledList";
//# sourceMappingURL=Styles.js.map