Repository navigation
Styles not fully adapted to Aura and dark mode #75
Description
While reviewing #73, which picked up some extra styling commits (message input and demo colors for Aura), I checked the styling for both Lumo and Aura on Vaadin 25. These two spots are outside that PR's changes:
1. Demo: small class has no effect under Aura
In chat-assistant-styles-demo.css:26, font-size: var(--lumo-font-size-xxs) has no fallback. Aura does not define that variable, so the Lazy Loading demo's small class does not shrink the messages there. Suggested fix:
animated-fab.small vaadin-message {
font-size: var(--lumo-font-size-xxs, var(--aura-font-size-xs, 0.75rem));
}2. Typing indicator color is hardcoded
In fc-chat-message-styles.css:22, .lds-ellipsis uses #1c4c5b, which is barely visible in dark mode under both Lumo and Aura. Using a theme token with the current value as the fallback, like the rest of that file does:
.lds-ellipsis {
color: var(--lumo-secondary-text-color, var(--vaadin-text-color-secondary, #1c4c5b));
}
Activity
Totremont commentedon Oct 15, 2026
Fixed in #76. Besides the two spots described here, it covers other styles that were not adapted to Aura, the base styles or dark mode:
--aura-base-radius, which is unitless.--aura-accent-yellow,--aura-border-color), so they used fixed colors. The arrows were nearly invisible in dark mode.smallclass is nowcompact, so it is not mistaken forFabVariant.SMALL.The PR description has the details.