feat: enable direct CSS theme overrides [NOVUS-392]#4
Open
tolson wants to merge 3 commits into
Open
Conversation
…ctor [NOVUS-392] - Wrap all visual default styles in :where() for zero specificity so theme CSS (even simple selectors) can override them - Refactor pendo-button to render directly on custom element instead of creating inner <button> with all:unset that blocked theme CSS - Same refactor for pendo-close-button - Add role="button", tabindex="0", and keyboard handlers for a11y - Backward compat: .pendo-button--primary class aliases still work Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Before: nested elements (.pendo-nps__score, .pendo-number-scale__item, .pendo-open-text__input) used var(--pendo-bg) and var(--pendo-text) with hardcoded light-mode fallbacks. A theme that set a dark background directly on pendo-guide without setting the CSS variables would produce illegible results — white buttons on dark modals; dark text in a white textarea embedded in a dark dialog. - Split each nested element's rule into a structural block (kept at full specificity) and a :where()-wrapped visual block. Visual properties now use currentColor-derived values (color: inherit; background and border via color-mix) so the surface always contrasts slightly with the guide's own text color, regardless of which tokens the theme sets. - :where(.pendo-nps__label) and :where(.pendo-number-scale__label) use color: inherit + opacity: 0.7 instead of var(--pendo-text-muted), so dark themes that only set a cascaded color stay readable without needing a separate --pendo-text-muted override. - --pendo-text-muted fallback now derives from --pendo-text via color-mix (previously hardcoded #666666), so elements that still use this token — pendo-text, .pendo-open-text__counter, .pendo-input__field placeholder, etc. — get a sensible faded variant automatically on dark themes. - --pendo-bg fallback stays at #ffffff (the earlier iteration had tried transparent but that broke the no-theme default modal render). Hover/selected/focus states on scale buttons still use --pendo-primary and keep their stronger specificity, so the active indication reads clearly regardless of these baseline changes. Theme CSS with simple selectors (pendo-guide, pendo-button, etc.) now produces readable output with no additional overrides required.
…round Caret now picks up whatever color the theme paints on pendo-guide, including themes that set `background` directly instead of `--pendo-bg`. Adds `isolation: isolate` to keep the caret's negative z-index scoped to the tooltip. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
1 participant
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.
Summary
:where()for zero specificity — any theme CSS can now override defaultspendo-buttonto render directly on custom element (no inner<button>withall: unset)pendo-close-buttonrole="button",tabindex="0", keyboard handlers for accessibility.pendo-button--primaryclass aliases still workWhy
Theme CSS like
pendo-guide pendo-button { background: green }was blocked by.pendo-button--primary(higher specificity) and the inner<button>element (separate DOM node). This enables Novus-generated CSS themes to fully control guide styling.Test plan
yarn harness— verify buttons render, keyboard Enter/Space works, close button works<style>pendo-guide pendo-button { background: green }</style>to demo — verify it overrides default red🤖 Generated with Claude Code