arieare ds

components / blog

blog prose

BlogProse wraps markdown-like content in the blog reading contract, wires inline images into the shared lightbox, and keeps longform spacing, link, and list styling on the package's editorial aliases.

field value
group blog
import @arieare/ds-blog/BlogProse.astro
source packages/ds-blog/src/BlogProse.astro
packages/ds-blog/src/blog.css

Longform copy stays on the shared mono stack, but the blog package renames its editorial tiers so prose is easier to reason about in code.

Quiet hierarchy still needs texture

Inline images can stay in flow: Layered archive drawer with pinned scraps. and still opt into the shared lightbox behavior.

  • Semantic prose aliases keep the editorial system readable.
  • Shared DS utilities still drive links, cards, and dialogs.
  1. Ordered lists can give the number itself the same quiet locale-pill treatment.
  2. Nested steps keep the number badge readable.
    1. Secondary levels inherit the same subtle badge background.

component tokens

token source description
--blog-type-article-title / --blog-type-prose-* @arieare/ds-blog/tokens.css Semantic aliases for article titles and editorial prose tiers.
--blog-prose-list-* @arieare/ds-blog/tokens.css Controls editorial list indentation, gap rhythm, unordered markers, and ordered-number badge styling.
--blog-inline-image-* / --blog-link-* @arieare/ds-blog/tokens.css Styles inline image sizing and link decoration inside longform content.
--lightbox-backdrop / --lightbox-surface-bg / --lightbox-surface-border @arieare/ds/tokens.css Sets the dialog backdrop, viewer surface fill, and surface border.
--lightbox-surface-radius / --lightbox-surface-shadow @arieare/ds/tokens.css Controls the dialog surface rounding and elevation.
--lightbox-button-* @arieare/ds/tokens.css Provides the viewer navigation and close-button button tokens.

props

prop type default description
dialogLabel string "article images" Accessible label for the shared inline-image lightbox dialog.
class / className string "" Extra class names appended to the prose section.
...section attributes Record<string, unknown> — Additional attributes forwarded to the prose section root.