Summary
Follow up on the remaining gaps called out during review of #73 so Storybook behavior matches main component behavior more closely and related component defaults stay consistent.
Requested by @saiy2k.
Problem statement
1) Theme build + theme type parity
The shared Theme type includes six values:
light
dark
ocean-glass
holographic
neo-matrix
bitcoin-orange
However, runtime support is currently incomplete:
scripts/build-themes.js and src/themes.css only ship light and dark
- extended themes live in
stories/common/themes.ts, which is Storybook-only
src/common/utils.ts parseTheme() accepts only light / dark, so other valid Theme values fall back to light
src/base/base-component/nostr-base-component.ts reads data-theme through parseTheme(), so main components cannot use the extended Storybook themes even though the type allows them
2) Cross-component consistency gaps
There are still a few places where components diverge from the follow-button cleanup work:
src/nostr-zap-button/render.ts still hardcodes getSuccessAnimation('light')
src/nostr-zap-button/style.ts still defaults --nostrc-zap-btn-horizontal-alignment to left
src/nostr-like-button/style.ts still defaults --nostrc-like-btn-horizontal-alignment to left
src/nostr-livestream/nostr-livestream.ts uses mixed boolean-attribute semantics:
auto-play uses parseBooleanAttribute(...)
show-participants and show-participant-count use opt-out logic (getAttribute(...) !== 'false') with default-true behavior
Affected areas
scripts/build-themes.js
src/themes.css
src/common/types.ts
src/common/utils.ts
src/base/base-component/nostr-base-component.ts
stories/common/themes.ts
src/nostr-zap-button/render.ts
src/nostr-zap-button/style.ts
src/nostr-like-button/style.ts
src/nostr-livestream/nostr-livestream.ts
Proposed follow-up work
- Make the runtime theming pipeline support the same theme variants exposed in Storybook, or narrow the public theme surface so types, parsing, and shipped CSS all agree.
- Align zap-button success animation theming with follow-button behavior.
- Align like-button and zap-button horizontal alignment defaults with the newer
flex-start convention.
- Decide on a single documented boolean-attribute strategy for livestream options:
- either standardize
show-participants / show-participant-count with the shared boolean parsing helper
- or explicitly document that they intentionally use opt-out default-true semantics
Acceptance criteria
- The public runtime theme contract is internally consistent across type definitions, parsing, and shipped CSS/assets.
- A component using
data-theme does not silently downgrade supported theme values to light.
- Zap button success animation respects the active theme instead of hardcoding
light.
- Zap and like button horizontal alignment defaults are consistent with the follow-button cleanup.
- Livestream boolean attribute behavior is either standardized or clearly documented, especially for the default-true participant flags.
Backlinks
Summary
Follow up on the remaining gaps called out during review of #73 so Storybook behavior matches main component behavior more closely and related component defaults stay consistent.
Requested by @saiy2k.
Problem statement
1) Theme build + theme type parity
The shared
Themetype includes six values:lightdarkocean-glassholographicneo-matrixbitcoin-orangeHowever, runtime support is currently incomplete:
scripts/build-themes.jsandsrc/themes.cssonly shiplightanddarkstories/common/themes.ts, which is Storybook-onlysrc/common/utils.tsparseTheme()accepts onlylight/dark, so other validThemevalues fall back tolightsrc/base/base-component/nostr-base-component.tsreadsdata-themethroughparseTheme(), so main components cannot use the extended Storybook themes even though the type allows them2) Cross-component consistency gaps
There are still a few places where components diverge from the follow-button cleanup work:
src/nostr-zap-button/render.tsstill hardcodesgetSuccessAnimation('light')src/nostr-zap-button/style.tsstill defaults--nostrc-zap-btn-horizontal-alignmenttoleftsrc/nostr-like-button/style.tsstill defaults--nostrc-like-btn-horizontal-alignmenttoleftsrc/nostr-livestream/nostr-livestream.tsuses mixed boolean-attribute semantics:auto-playusesparseBooleanAttribute(...)show-participantsandshow-participant-countuse opt-out logic (getAttribute(...) !== 'false') with default-true behaviorAffected areas
scripts/build-themes.jssrc/themes.csssrc/common/types.tssrc/common/utils.tssrc/base/base-component/nostr-base-component.tsstories/common/themes.tssrc/nostr-zap-button/render.tssrc/nostr-zap-button/style.tssrc/nostr-like-button/style.tssrc/nostr-livestream/nostr-livestream.tsProposed follow-up work
flex-startconvention.show-participants/show-participant-countwith the shared boolean parsing helperAcceptance criteria
data-themedoes not silently downgrade supported theme values tolight.light.Backlinks