@vaadin/vaadin-lumo-styles
Version:
Lumo is a design system foundation for modern web applications, used by Vaadin components
120 lines (113 loc) • 6.31 kB
JavaScript
/**
* @license
* Copyright (c) 2017 - 2025 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import './version.js';
import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { addLumoGlobalStyles } from './global.js';
const style = css`
:host {
/* Border radius */
--lumo-border-radius-s: 0.25em; /* Checkbox, badge, date-picker year indicator, etc */
--lumo-border-radius-m: var(--lumo-border-radius, 0.25em); /* Button, text field, menu overlay, etc */
--lumo-border-radius-l: 0.5em; /* Dialog, notification, etc */
/* Shadow */
--lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-50pct);
--lumo-box-shadow-s: 0 2px 4px -1px var(--lumo-shade-20pct), 0 3px 12px -1px var(--lumo-shade-30pct);
--lumo-box-shadow-m: 0 2px 6px -1px var(--lumo-shade-20pct), 0 8px 24px -4px var(--lumo-shade-40pct);
--lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);
--lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);
/* Clickable element cursor */
--lumo-clickable-cursor: default;
}
`;
/**
* Default values for component-specific custom properties.
*/
const globals = css`
html {
/* Button */
--vaadin-button-background: var(--lumo-contrast-5pct);
--vaadin-button-border: none;
--vaadin-button-border-radius: var(--lumo-border-radius-m);
--vaadin-button-font-size: var(--lumo-font-size-m);
--vaadin-button-font-weight: 500;
--vaadin-button-height: var(--lumo-size-m);
--vaadin-button-margin: var(--lumo-space-xs) 0;
--vaadin-button-min-width: calc(var(--vaadin-button-height) * 2);
--vaadin-button-padding: 0 calc(var(--vaadin-button-height) / 3 + var(--lumo-border-radius-m) / 2);
--vaadin-button-text-color: var(--lumo-primary-text-color);
--vaadin-button-primary-background: var(--lumo-primary-color);
--vaadin-button-primary-border: none;
--vaadin-button-primary-font-weight: 600;
--vaadin-button-primary-text-color: var(--lumo-primary-contrast-color);
--vaadin-button-tertiary-background: transparent ;
--vaadin-button-tertiary-text-color: var(--lumo-primary-text-color);
--vaadin-button-tertiary-font-weight: 500;
--vaadin-button-tertiary-padding: 0 calc(var(--vaadin-button-height) / 6);
/* Checkbox */
--vaadin-checkbox-background: var(--lumo-contrast-20pct);
--vaadin-checkbox-background-hover: var(--lumo-contrast-30pct);
--vaadin-checkbox-border-radius: var(--lumo-border-radius-s);
--vaadin-checkbox-checkmark-char: var(--lumo-icons-checkmark);
--vaadin-checkbox-checkmark-char-indeterminate: '';
--vaadin-checkbox-checkmark-color: var(--lumo-primary-contrast-color);
--vaadin-checkbox-checkmark-size: calc(var(--vaadin-checkbox-size) + 2px);
--vaadin-checkbox-label-color: var(--lumo-body-text-color);
--vaadin-checkbox-label-font-size: var(--lumo-font-size-m);
--vaadin-checkbox-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs);
--vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
--vaadin-checkbox-disabled-checkmark-color: var(--lumo-contrast-30pct);
--vaadin-checkbox-disabled-background: var(--lumo-contrast-10pct);
/* Radio button */
--vaadin-radio-button-background: var(--lumo-contrast-20pct);
--vaadin-radio-button-background-hover: var(--lumo-contrast-30pct);
--vaadin-radio-button-dot-color: var(--lumo-primary-contrast-color);
--vaadin-radio-button-dot-size: 3px;
--vaadin-radio-button-label-color: var(--lumo-body-text-color);
--vaadin-radio-button-label-font-size: var(--lumo-font-size-m);
--vaadin-radio-button-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs)
var(--lumo-space-xs);
--vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
--vaadin-radio-button-disabled-background: var(--lumo-contrast-10pct);
--vaadin-radio-button-disabled-dot-color: var(--lumo-contrast-30pct);
--vaadin-selection-color: var(--lumo-primary-color);
--vaadin-selection-color-text: var(--lumo-primary-text-color);
--vaadin-input-field-border-radius: var(--lumo-border-radius-m);
--vaadin-focus-ring-color: var(--lumo-primary-color-50pct);
--vaadin-focus-ring-width: 2px;
/* Label */
--vaadin-input-field-label-color: var(--lumo-secondary-text-color);
--vaadin-input-field-focused-label-color: var(--lumo-primary-text-color);
--vaadin-input-field-hovered-label-color: var(--lumo-body-text-color);
--vaadin-input-field-label-font-size: var(--lumo-font-size-s);
--vaadin-input-field-label-font-weight: 500;
/* Helper */
--vaadin-input-field-helper-color: var(--lumo-secondary-text-color);
--vaadin-input-field-helper-font-size: var(--lumo-font-size-xs);
--vaadin-input-field-helper-font-weight: 400;
--vaadin-input-field-helper-spacing: 0.4em;
/* Error message */
--vaadin-input-field-error-color: var(--lumo-error-text-color);
--vaadin-input-field-error-font-size: var(--lumo-font-size-xs);
--vaadin-input-field-error-font-weight: 400;
/* Input field */
--vaadin-input-field-background: var(--lumo-contrast-10pct);
--vaadin-input-field-icon-color: var(--lumo-contrast-60pct);
--vaadin-input-field-icon-size: var(--lumo-icon-size-m);
--vaadin-input-field-invalid-background: var(--lumo-error-color-10pct);
--vaadin-input-field-invalid-hover-highlight: var(--lumo-error-color-50pct);
--vaadin-input-field-disabled-background: var(--lumo-contrast-5pct);
--vaadin-input-field-disabled-value-color: var(--lumo-disabled-text-color);
--vaadin-input-field-height: var(--lumo-size-m);
--vaadin-input-field-hover-highlight: var(--lumo-contrast-50pct);
--vaadin-input-field-placeholder-color: var(--lumo-secondary-text-color);
--vaadin-input-field-readonly-border: 1px dashed var(--lumo-contrast-30pct);
--vaadin-input-field-value-color: var(--lumo-body-text-color);
--vaadin-input-field-value-font-size: var(--lumo-font-size-m);
--vaadin-input-field-value-font-weight: 500;
}
`;
addLumoGlobalStyles('style-props', style);
export { globals, style };