Skip to content

feat(instantsearch.css): add experimental Nova theme #6949

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
FabienMotte merged 9 commits into from
Apr 9, 2026
Merged

feat(instantsearch.css): add experimental Nova theme #6949

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
cef8c6e
feat(instantsearch.css): add Nova theme with widget styles and shared…
FabienMotte Apr 3, 2026
bb34159
refactor(instantsearch.css): move Nova-specific common styles to _nov…
FabienMotte Apr 7, 2026
dde78f5
fix(instantsearch.css): review fixes for Nova theme
FabienMotte Apr 7, 2026
2b3e995
chore: bump bundlesize limits for chat, algolia theme, and dev bundle
FabienMotte Apr 7, 2026
ec1fb73
fix(instantsearch.css): address Nova theme review findings
FabienMotte Apr 7, 2026
30fe21b
chore: bump chat.css bundlesize limit to 6 kB
FabienMotte Apr 7, 2026
0d7f470
fix(instantsearch.css): fix hierarchical menu chevron orientation and…
FabienMotte Apr 7, 2026
e5e9e4f
fix(instantsearch.css): add cursor pointer to labels, use consistent …
FabienMotte Apr 7, 2026
963dcca
chore: bump CSS theme bundle size budgets
FabienMotte Apr 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 17 additions & 9 deletions bundlesize.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,43 +42,51 @@
},
{
"path": "./packages/instantsearch.css/themes/algolia.css",
"maxSize": "10.25 kB"
"maxSize": "10.5 kB"
},
{
"path": "./packages/instantsearch.css/themes/algolia-min.css",
"maxSize": "9.5 kB"
"maxSize": "10 kB"
},
{
"path": "./packages/instantsearch.css/themes/reset.css",
"maxSize": "1.5 kB"
},
{
"path": "./packages/instantsearch.css/themes/reset-min.css",
"maxSize": "1.25 kB"
"maxSize": "1.5 kB"
},
{
"path": "./packages/instantsearch.css/themes/nova.css",
"maxSize": "10.5 kB"
},
{
"path": "./packages/instantsearch.css/themes/nova-min.css",
"maxSize": "9.75 kB"
},
{
"path": "./packages/instantsearch.css/themes/satellite.css",
"maxSize": "11.25 kB"
"maxSize": "11.5 kB"
},
{
"path": "./packages/instantsearch.css/themes/satellite-min.css",
"maxSize": "10.5 kB"
"maxSize": "10.75 kB"
},
{
"path": "./packages/instantsearch.css/components/chat.css",
"maxSize": "5.5 kB"
"maxSize": "6 kB"
},
{
"path": "./packages/instantsearch.css/components/chat-min.css",
"maxSize": "5.25 kB"
"maxSize": "5.5 kB"
},
{
"path": "./packages/instantsearch.css/components/autocomplete.css",
"maxSize": "4.25 kB"
"maxSize": "4.75 kB"
},
{
"path": "./packages/instantsearch.css/components/autocomplete-min.css",
"maxSize": "4 kB"
"maxSize": "4.25 kB"
}
]
}
13 changes: 13 additions & 0 deletions packages/instantsearch.css/devtools/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -411,6 +411,19 @@ const variablesConfig = {
unit: 'rem',
},
},
{
name: '--ais-hit-min-width',
type: 'dimension-px',
themeVariable: false,
category: 'Other',
control: {
label: 'Hit Min Width',
min: 100,
max: 800,
step: 10,
unit: 'px',
},
},
{
name: '--ais-autocomplete-search-input-height',
type: 'dimension-px',
Expand Down
2 changes: 1 addition & 1 deletion packages/instantsearch.css/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
"scripts": {
"build": "rm -rf themes components && yarn styles:build && yarn styles:minify && yarn styles:autoprefixer && yarn generate-variables-config",
"styles:autoprefixer": "postcss themes/ components/ --use autoprefixer --replace --no-map",
"styles:minify": "sass src/themes/algolia.scss:themes/algolia-min.css src/themes/satellite.scss:themes/satellite-min.css src/themes/reset.scss:themes/reset-min.css src/components/chat.scss:components/chat-min.css src/components/autocomplete.scss:components/autocomplete-min.css --no-source-map --style compressed",
"styles:minify": "sass src/themes/algolia.scss:themes/algolia-min.css src/themes/satellite.scss:themes/satellite-min.css src/themes/nova.scss:themes/nova-min.css src/themes/reset.scss:themes/reset-min.css src/components/chat.scss:components/chat-min.css src/components/autocomplete.scss:components/autocomplete-min.css --no-source-map --style compressed",
"styles:build": "sass src/themes:themes src/components:components --no-source-map",
"watch": "sass src/themes:themes src/components:components --no-source-map --watch",
"prepare": "yarn build",
Expand Down
67 changes: 27 additions & 40 deletions packages/instantsearch.css/src/components/autocomplete.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,12 @@
position: relative;
width: 100%;

@media (prefers-reduced-motion: no-preference) {
transition: border-color var(--ais-transition-duration)
var(--ais-transition-timing-function),
box-shadow var(--ais-transition-duration)
var(--ais-transition-timing-function),
outline-color var(--ais-transition-duration)
var(--ais-transition-timing-function);
}
transition: border-color var(--ais-transition-duration)
var(--ais-transition-timing-function),
box-shadow var(--ais-transition-duration)
var(--ais-transition-timing-function),
outline-color var(--ais-transition-duration)
var(--ais-transition-timing-function);

&:focus-within {
border-color: rgba(var(--ais-primary-color-rgb), 1);
Expand Down Expand Up @@ -77,11 +75,12 @@
.ais-AutocompleteLoadingIndicator {
height: 100%;
padding-left: calc(var(--ais-spacing) * 0.75 - 1px);
padding-right: calc(var(--ais-spacing) / 2);
width: calc(var(--ais-spacing) * 1.75 + var(--ais-icon-size) - 1px);
padding-right: calc(var(--ais-spacing) * 0.75 - 1px);
width: calc(var(--ais-spacing) * 1.5 + var(--ais-icon-size) - 2px);
@media (hover: none) and (pointer: coarse) {
padding-left: calc(calc(var(--ais-spacing) / 2) / 2 - 1px);
width: calc(var(--ais-icon-size) + (var(--ais-spacing) * 1.25) - 1px);
padding-left: calc(var(--ais-spacing) * 0.625);
padding-right: calc(var(--ais-spacing) * 0.625);
width: calc(var(--ais-icon-size) + var(--ais-spacing) * 1.25);
}
}
@at-root .ais-AutocompleteSubmitButton {
Expand Down Expand Up @@ -149,10 +148,8 @@
margin: 0;
padding: 0 calc(var(--ais-spacing) * (5 / 6) - 0.5px);

@media (prefers-reduced-motion: no-preference) {
transition: color var(--ais-transition-duration)
var(--ais-transition-timing-function);
}
transition: color var(--ais-transition-duration)
var(--ais-transition-timing-function);

@media (hover: none) and (pointer: coarse) {
padding: 0 calc(var(--ais-spacing) * (2 / 3) - 0.5px);
Expand Down Expand Up @@ -203,12 +200,10 @@
transform-origin: top center;
transform: scale(0.95) translateY(calc(var(--ais-spacing) * -1));

@media (prefers-reduced-motion: no-preference) {
transition: opacity var(--ais-transition-duration)
var(--ais-transition-timing-function),
transform var(--ais-transition-duration)
var(--ais-transition-timing-function);
}
transition: opacity var(--ais-transition-duration)
var(--ais-transition-timing-function),
transform var(--ais-transition-duration)
var(--ais-transition-timing-function);

&--open {
opacity: 1;
Expand Down Expand Up @@ -308,10 +303,8 @@
min-height: calc(var(--ais-spacing) * 2.5);
padding: calc(calc(var(--ais-spacing) / 2) / 2);

@media (prefers-reduced-motion: no-preference) {
transition: background-color var(--ais-transition-duration)
var(--ais-transition-timing-function);
}
transition: background-color var(--ais-transition-duration)
var(--ais-transition-timing-function);

// When the result is active, either by hover or keyboard navigation
@media (hover: hover) {
Expand Down Expand Up @@ -387,10 +380,8 @@
flex-shrink: 0;
padding: 0;

@media (prefers-reduced-motion: no-preference) {
transition: color var(--ais-transition-duration)
var(--ais-transition-timing-function);
}
transition: color var(--ais-transition-duration)
var(--ais-transition-timing-function);

&:hover,
&:focus {
Expand Down Expand Up @@ -562,12 +553,10 @@ body.ais-Autocomplete--detached {
text-align: left;
width: 100%;

@media (prefers-reduced-motion: no-preference) {
transition: border-color var(--ais-transition-duration)
var(--ais-transition-timing-function),
box-shadow var(--ais-transition-duration)
var(--ais-transition-timing-function);
}
transition: border-color var(--ais-transition-duration)
var(--ais-transition-timing-function),
box-shadow var(--ais-transition-duration)
var(--ais-transition-timing-function);
}

.ais-AutocompleteDetachedSearchButtonIcon {
Expand Down Expand Up @@ -616,10 +605,8 @@ body.ais-Autocomplete--detached {
margin-left: auto;
padding: 0 calc(var(--ais-spacing) * 0.5);

@media (prefers-reduced-motion: no-preference) {
transition: color var(--ais-transition-duration)
var(--ais-transition-timing-function);
}
transition: color var(--ais-transition-duration)
var(--ais-transition-timing-function);

@media (hover: hover) {
&:hover {
Expand Down
8 changes: 3 additions & 5 deletions packages/instantsearch.css/src/components/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,9 @@
cursor: not-allowed;
}

@media (prefers-reduced-motion: no-preference) {
transition: background-color var(--ais-transition-duration)
var(--ais-transition-timing-function),
color var(--ais-transition-duration) var(--ais-transition-timing-function);
}
transition: background-color var(--ais-transition-duration)
var(--ais-transition-timing-function),
color var(--ais-transition-duration) var(--ais-transition-timing-function);
}

// Button sizes
Expand Down
12 changes: 4 additions & 8 deletions packages/instantsearch.css/src/components/chat/_chat-carousel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,10 +122,8 @@
z-index: -1;
transform: scale(0.95);

@media (prefers-reduced-motion: no-preference) {
transition: all var(--ais-transition-duration)
var(--ais-transition-timing-function);
}
transition: all var(--ais-transition-duration)
var(--ais-transition-timing-function);
}

@media (hover: hover) {
Expand Down Expand Up @@ -181,10 +179,8 @@
overflow: hidden;

img {
@media (prefers-reduced-motion: no-preference) {
Comment thread
FabienMotte marked this conversation as resolved.
transition: transform var(--ais-transition-duration)
var(--ais-transition-timing-function);
}
transition: transform var(--ais-transition-duration)
var(--ais-transition-timing-function);
}
}

Expand Down
18 changes: 6 additions & 12 deletions packages/instantsearch.css/src/components/chat/_chat-message-loader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,7 @@
height: calc(var(--ais-spacing) * 1.5);
color: rgba(var(--ais-primary-color-rgb), var(--ais-primary-color-alpha));

@media (prefers-reduced-motion: no-preference) {
animation: ais-chat-loader-spinner 1.4s linear infinite;
}
animation: ais-chat-loader-spinner 1.4s linear infinite;
}

.ais-ChatMessageLoader-text {
Expand All @@ -39,12 +37,10 @@
background-position: -100% 0;
font-weight: var(--ais-font-weight-medium);

@media (prefers-reduced-motion: no-preference) {
animation-delay: 0.5s;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: ais-chat-loader-text;
}
animation-delay: 0.5s;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: ais-chat-loader-text;
}

.ais-ChatMessageLoader-skeletonWrapper {
Expand All @@ -58,9 +54,7 @@
background-color: rgba(var(--ais-muted-color-rgb), 0.2);
border-radius: var(--ais-border-radius-sm);

@media (prefers-reduced-motion: no-preference) {
animation: ais-chat-loader-skeleton 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
animation: ais-chat-loader-skeleton 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

&:nth-child(2) {
width: 40%;
Expand Down
10 changes: 3 additions & 7 deletions packages/instantsearch.css/src/components/chat/_chat-message.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,10 +77,8 @@
.ais-ChatMessage--auto-hide-actions .ais-ChatMessage-actions {
opacity: 0;

@media (prefers-reduced-motion: no-preference) {
transition: opacity var(--ais-transition-duration)
var(--ais-transition-timing-function);
}
transition: opacity var(--ais-transition-duration)
var(--ais-transition-timing-function);
}

.ais-ChatMessage-feedbackSpinner svg,
Expand All @@ -89,9 +87,7 @@
}

.ais-ChatMessage-feedbackSpinner svg {
@media (prefers-reduced-motion: no-preference) {
animation: ais-chat-loader-spinner 1.4s linear infinite;
}
animation: ais-chat-loader-spinner 1.4s linear infinite;
}

.ais-ChatMessage-feedbackCheck {
Expand Down
24 changes: 10 additions & 14 deletions packages/instantsearch.css/src/components/chat/_chat-messages.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,10 @@
gap: calc(var(--ais-spacing) * 1.5);
width: 100%;

@media (prefers-reduced-motion: no-preference) {
transition: opacity var(--ais-transition-duration)
var(--ais-transition-timing-function),
filter var(--ais-transition-duration)
var(--ais-transition-timing-function);
}
transition: opacity var(--ais-transition-duration)
var(--ais-transition-timing-function),
filter var(--ais-transition-duration)
var(--ais-transition-timing-function);
}

.ais-ChatMessages-content--clearing {
Expand All @@ -45,14 +43,12 @@
height: calc(var(--ais-spacing) * 1.5);
border-radius: var(--ais-border-radius-full);

@media (prefers-reduced-motion: no-preference) {
transition: background-color var(--ais-transition-duration)
var(--ais-transition-timing-function),
transform var(--ais-transition-duration)
var(--ais-transition-timing-function),
opacity var(--ais-transition-duration)
var(--ais-transition-timing-function);
}
transition: background-color var(--ais-transition-duration)
var(--ais-transition-timing-function),
transform var(--ais-transition-duration)
var(--ais-transition-timing-function),
opacity var(--ais-transition-duration)
var(--ais-transition-timing-function);
}

.ais-ChatMessages-scrollToBottom--hidden {
Expand Down
20 changes: 8 additions & 12 deletions packages/instantsearch.css/src/components/chat/_chat-overlay-layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,10 @@
z-index: var(--ais-z-index-chat);
pointer-events: none;

@media (prefers-reduced-motion: no-preference) {
transition: width var(--ais-transition-duration)
var(--ais-transition-timing-function),
height var(--ais-transition-duration)
var(--ais-transition-timing-function);
}
transition: width var(--ais-transition-duration)
var(--ais-transition-timing-function),
height var(--ais-transition-duration)
var(--ais-transition-timing-function);

&--maximized {
width: var(--ais-chat-maximized-width);
Expand All @@ -32,12 +30,10 @@
transform-origin: bottom right;
transform: scale(0.95) translateY(var(--ais-spacing));

@media (prefers-reduced-motion: no-preference) {
transition: opacity var(--ais-transition-duration)
var(--ais-transition-timing-function),
transform var(--ais-transition-duration)
var(--ais-transition-timing-function);
}
transition: opacity var(--ais-transition-duration)
var(--ais-transition-timing-function),
transform var(--ais-transition-duration)
var(--ais-transition-timing-function);
}

.ais-Chat-container--open {
Expand Down
Loading
Loading