import propsStyles from '@vaadin/vaadin-lumo-styles/src/props/index.css?inline';
import colorScheme from '@vaadin/vaadin-lumo-styles/src/global/color-scheme.css?inline';
import utilityStyles from '@vaadin/vaadin-lumo-styles/utility.css?inline';
import { addStylesheet } from 'Frontend/demo/theme';
// Extract dark theme properties. Exclude non-custom properties, so that we don't override docs
// styles (color, background) with Lumo styles.
// eslint-disable-next-line @typescript-eslint/no-base-to-string
const darkThemeProps = colorScheme
.toString()
.split('\n')
.filter((line) => line.trim().startsWith('--'));
const darkThemeStyles = `
[theme~='dark'] {
${darkThemeProps.join('\n')}
}
`;
// Include styles in the page
addStylesheet(propsStyles);
addStylesheet(utilityStyles);
addStylesheet(darkThemeStyles);
// Notify DSP CustomPropertyPreview React component after custom properties have been loaded
window.dispatchEvent(new CustomEvent('custom-properties-changed'));
// Dummy element so that this module can be included as a rendered example in a docs page
export default class LumoTokens extends HTMLElement {}
lumo-tokens.ts
Elevation is used to signify elements which are stacked on top of other elements in the UI. This page lists Lumo elevation-related style properties, which you can use to create visually consistent elevation styles.
Lumo includes different levels of elevation that are applied using box-shadow.
Description
CSS Custom Property
Extra Large
Elements highest in the stacking order, for example notifications, which should be above all other content.
--lumo-box-shadow-xl:
Large
Elements that rise above most elements in the UI, for example dialogs.
--lumo-box-shadow-l:
Medium
Contextual overlays, for components such as Select and Menu Bar.
--lumo-box-shadow-m:
Small
Tooltips, etc.
--lumo-box-shadow-s:
Extra Small
Elements closest to the application background, for example cards.