feat(instantsearch.css): add experimental Nova theme#6949
Conversation
More templates
algoliasearch-helper
instantsearch-ui-components
instantsearch.css
instantsearch.js
react-instantsearch
react-instantsearch-core
react-instantsearch-nextjs
react-instantsearch-router-nextjs
vue-instantsearch
commit: |
Up to standards ✅🟢 Issues
|
| Metric | Results |
|---|---|
| Complexity | 0 |
| Duplication | 0 |
TIP This summary will be updated as you push new changes. Give us feedback
Haroenv
changed the title
There was a problem hiding this comment.
Pull request overview
Adds a new Nova theme to instantsearch.css, including widget-level styling for core widgets, shared Nova utilities (focus-visible, reduced-motion behavior, dark mode), and build/bundlesize registration so the new theme ships as nova.css / nova-min.css.
Changes:
- Introduce
src/themes/nova.scssand a set of new Nova widget styles undersrc/widgets/. - Add Nova-shared styling via
src/shared/_nova-common.scssand extend shared variables with new custom properties (shadows, icons, hit grid sizing). - Update reset styles, reduced-motion handling, build scripts, devtools variables config, and bundlesize budgets to include Nova outputs.
Reviewed changes
Copilot reviewed 36 out of 36 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/instantsearch.css/src/widgets/_toggle-refinement.scss | Nova widget styling for ToggleRefinement. |
| packages/instantsearch.css/src/widgets/_searchbox.scss | Nova widget styling for SearchBox (flex layout, loading indicator handling). |
| packages/instantsearch.css/src/widgets/_relevant-sort.scss | Nova widget styling for RelevantSort. |
| packages/instantsearch.css/src/widgets/_refinement-list.scss | Nova widget styling for RefinementList (list, selected/hover states, checkbox base styling). |
| packages/instantsearch.css/src/widgets/_rating-menu.scss | Nova widget styling for RatingMenu (selected/hover, star fill behavior). |
| packages/instantsearch.css/src/widgets/_range-input.scss | Nova widget styling for RangeInput (inputs + submit). |
| packages/instantsearch.css/src/widgets/_powered-by.scss | Nova widget styling for PoweredBy logo coloring. |
| packages/instantsearch.css/src/widgets/_panel.scss | Nova widget styling for Panel header/footer and collapse button. |
| packages/instantsearch.css/src/widgets/_pagination.scss | Nova widget styling for Pagination (segmented control look). |
| packages/instantsearch.css/src/widgets/_numeric-menu.scss | Nova widget styling for NumericMenu (radio styling and selection behavior). |
| packages/instantsearch.css/src/widgets/_menu.scss | Nova widget styling for Menu (selected/hover states). |
| packages/instantsearch.css/src/widgets/_infinite-hits.scss | Nova widget styling for InfiniteHits load more/previous buttons. |
| packages/instantsearch.css/src/widgets/_hits.scss | Nova widget styling for Hits/InfiniteHits grid and hit cards. |
| packages/instantsearch.css/src/widgets/_highlight.scss | Nova highlight styling for Highlight/Snippet and plain <mark>. |
| packages/instantsearch.css/src/widgets/_hierarchical-menu.scss | Nova widget styling for HierarchicalMenu (chevron icons, nesting). |
| packages/instantsearch.css/src/widgets/_geo-search.scss | Nova widget styling for GeoSearch controls (redo/reset, checkbox). |
| packages/instantsearch.css/src/widgets/_current-refinements.scss | Nova widget styling for CurrentRefinements (pill layout + delete). |
| packages/instantsearch.css/src/widgets/_breadcrumb.scss | Nova widget styling for Breadcrumb (responsive layout, link styles). |
| packages/instantsearch.css/src/themes/reset.scss | Extend base reset to cover links/selects/checkbox margins and RelevantSort button reset. |
| packages/instantsearch.css/src/themes/nova.scss | New Nova theme entrypoint wiring shared + widget styles. |
| packages/instantsearch.css/src/shared/_variables.scss | Add new CSS custom properties (shadow-xs, icons, hit min width) + dark icon overrides. |
| packages/instantsearch.css/src/shared/_nova-common.scss | New Nova-wide utilities: auto dark mode, focus-visible, shared buttons, select chevrons, checkbox checked styling. |
| packages/instantsearch.css/src/shared/_common.scss | Add global reduced-motion rule to disable transitions/animations under prefers-reduced-motion: reduce. |
| packages/instantsearch.css/src/components/filter-suggestions.scss | Remove no-preference gate so animation is globally disabled via reduced-motion rule. |
| packages/instantsearch.css/src/components/chat/_chat-toggle-button.scss | Remove no-preference gate for transitions (rely on global reduced-motion). |
| packages/instantsearch.css/src/components/chat/_chat-prompt.scss | Remove no-preference gate for transitions (rely on global reduced-motion). |
| packages/instantsearch.css/src/components/chat/_chat-overlay-layout.scss | Remove no-preference gates for transitions (rely on global reduced-motion). |
| packages/instantsearch.css/src/components/chat/_chat-messages.scss | Remove no-preference gates for transitions (rely on global reduced-motion). |
| packages/instantsearch.css/src/components/chat/_chat-message.scss | Remove no-preference gates for transition/animation (rely on global reduced-motion). |
| packages/instantsearch.css/src/components/chat/_chat-message-loader.scss | Remove no-preference gates for loader animations (rely on global reduced-motion). |
| packages/instantsearch.css/src/components/chat/_chat-carousel.scss | Remove no-preference gates for transitions (rely on global reduced-motion). |
| packages/instantsearch.css/src/components/button.scss | Remove no-preference gate for transitions (rely on global reduced-motion). |
| packages/instantsearch.css/src/components/autocomplete.scss | Remove no-preference gates for transitions and adjust some spacing calculations. |
| packages/instantsearch.css/package.json | Add Nova to styles:minify build output. |
| packages/instantsearch.css/devtools/index.js | Register --ais-hit-min-width in variables configurator. |
| bundlesize.config.json | Add bundlesize entries for Nova CSS outputs and adjust size limits. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
FabienMotte
requested review from
a team,
Haroenv and
shaejaz
and removed request for
a team
There was a problem hiding this comment.
if these are widget styles specific to the new theme, should these be moved a more explicit nova dir?
not sure what the right approach is, to me if these are not generic then it seems confusing to have these in just a widgets folder.
There was a problem hiding this comment.
maybe they're generic and should be used by future different themes as well that set different variables?
There was a problem hiding this comment.
yes that could also be a possibility, but I saw a lot of styles that seemed to be tied to the theme itself (such as borders, box-shadows, padding etc). perhaps those can be extracted out for the theme specific widget styles?
There was a problem hiding this comment.
Good idea, should we just change the folder name to nova-widgets to show that those styles are part of the new theme?
I think trying to split each widget file into "generic part" vs "nova-specific part" would be dificult to maintain, WDYT?
There was a problem hiding this comment.
let's for now only make the new theme widgets, and if we need to make another theme, do the split then, or maybe if another team needs it, they can do it?
…rgba colors, remove redundant reduced-motion queries
FabienMotte
force-pushed
the
feat/nova-theme
branch
from
83446e7 to
e5e9e4f
Compare
Haroenv
left a comment
Haroenv
left a comment
There was a problem hiding this comment.
I think it's easier for now to consider al the widgets the "nova-version". If we'd want the other themes to use this too, they could later, of we can refactor this to have a "base" and "nova" version of the styles later too. For now as we only have the nova styles, I'm ok to commit to this version
|
Really cool @FabienMotte! I saw in the ticket that the theme is supposed to be experimental. Does it mean we accept breaking changes in minor versions? I'd love to align on design tokens based on the work we've done in |
|
As long as we're not documenting it in the docs yet (or put experimental there) yes we can still make changes @sarahdayan |
Thank you @sarahdayan! I think it makes sense to allow breaking changes while the theme is still experimental. Once it becomes stable, we can deprecate the two old themes. Aligning the design tokens in follow-up PRs also sounds good to me. |
FabienMotte
changed the title
Summary
Add a new experimental Nova theme for
instantsearch.css. This is based on the work done with @sarahdayan and @thomasbritton.This theme provides widget-level styles for all core widgets (
SearchBox,Hits,InfiniteHits,RefinementList,HierarchicalMenu,Menu,MenuSelect,Pagination,Breadcrumb,CurrentRefinements,NumericMenu,RangeInput,RatingMenu,ToggleRefinement,HitsPerPage,SortBy,GeoSearch,Panel,Highlight,RelevantSort,PoweredBy) along with shared utilities extracted into_nova-common.scss:prefers-reduced-motionhandling (single rule disabling all transitions/animations)focus-visibleoutlines for interactive elementsprefers-color-scheme: darkNew CSS custom properties:
--ais-shadow-xs,--ais-hit-min-width,--ais-chevron-icon,--ais-selected-chevron-icon,--ais-check-icon(with dark-mode variants for icon colors).Additional changes:
text-decoration: none), selects (appearance: none), checkboxes (margin: 0), and.ais-RelevantSort-buttonprefers-reduced-motionmedia queries out of autocomplete, chat, button, and filter-suggestions — transitions are now declared unconditionally and cancelled globally by_nova-commonstyles:minifyscript and registerednova.css/nova-min.cssin bundlesize configFX-3750
Result
The Nova theme compiles to ~10.5 kB unminified / ~9.75 kB minified. All existing themes (Algolia, Satellite) continue to build and pass bundlesize checks with their updated limits.