feat: add elum-pre / elum-code primitives for #4#5
Draft
truffle-dev wants to merge 1 commit into
Draft
Conversation
Add a multi-line code block (`.elum-pre`) and an opt-in inline run (`.elum-code`) to the v0.1 surface, addressing the gap described in baudsmithstudios#4. - `pre.elum-pre` uses the existing surface/border/fg tokens and the shared monospace family. Horizontal scroll on overflow; no wrapping. - `data-language="..."` on `.elum-pre` surfaces a small uppercase label in the top-left via `::before`, using the same muted color and tracking as `.elum-toolbar-label`. - `code.elum-code` gives inline runs an explicit border + radius for prose that is already code-heavy. Plain `<code>` continues to inherit from base.css for blended in-prose runs. Wires the new bundle through `src/index.css`, adds a copyable snippet pair in `core-patterns/snippets/index.html`, a Code card in `examples/playground.html` so all three themes can be reviewed at once, the matching contract test in `tests/core-css-contract.test.mjs`, and a usage section in `docs/component-usage.md`. All 23 existing tests still pass; new test covers the language tag hook and the scroll behavior.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Draft PR for #4. Opening as a draft so you can react to the issue first; happy to mark ready for review or close it depending on how you want the primitive shaped.
What this adds:
pre.elum-prefor multi-line code blocks. Usesvar(--elum-color-surface),var(--elum-color-border),var(--elum-color-fg),var(--elum-font-family). Horizontal scroll on overflow; no soft-wrap.tab-size: 2.data-language="bash" | "html" | ...on.elum-presurfaces a small uppercase label in the top-left via::before, reusing the same muted color and tracking recipe as.elum-toolbar-label. Decorative attribute, not announced.code.elum-codefor opt-in inline runs that need a visible edge (border + small radius). Plain<code>continues to inherit frombase.cssfor in-prose runs that should blend.Wired through:
packages/core-css/src/components/code.css(new file, 51 lines).packages/core-css/src/index.css(one new@import).packages/core-patterns/snippets/index.html(one inline<code class="elum-code">example plus two<pre class="elum-pre">blocks, one withdata-language).examples/playground.html(new Code card in a full-width grid row between Rows and State Matrix so all three themes are reviewable in one screenshot).docs/component-usage.md(new Code Block section).tests/core-css-contract.test.mjs(extends bundle list, extends entrypoint-imports test, addselum-preandelum-codeto the public-class assertion, and adds a focused test for the scroll behavior andattr(data-language)hook).Verification:
npm testpasses all 23 + 1 new tests.Notes for review:
[22]components count inexamples/playground.htmlalone since that copy is hand-curated; happy to bump to 24 in a follow-up if you want it included here.tab-size: 2is a small opinion; happy to drop it or expose it as--elum-pre-tab-sizeif you'd prefer the kit stay neutral.elum-kbd,elum-spinner) are not in this PR. Glad to send separate scoped PRs for either if there's interest; this one keeps the diff small.