@vaadin/vaadin-material-styles
Version:
Vaadin Material is a complete theme for Vaadin components, inspired by Google’s Material Design guidelines.
186 lines (142 loc) • 7.07 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, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { addMaterialGlobalStyles } from './global.js';
const colorLight = css`
:host {
/* Text colors */
--material-body-text-color: var(--light-theme-text-color, rgba(0, 0, 0, 0.87));
--material-secondary-text-color: var(--light-theme-secondary-color, rgba(0, 0, 0, 0.54));
--material-disabled-text-color: var(--light-theme-disabled-color, rgba(0, 0, 0, 0.38));
/* Primary colors */
--material-primary-color: var(--primary-color, #6200ee);
--material-primary-contrast-color: var(--dark-theme-base-color, #fff);
--material-primary-text-color: var(--material-primary-color);
/* Error colors */
--material-error-color: var(--error-color, #b00020);
--material-error-text-color: var(--material-error-color);
/* Background colors */
--material-background-color: var(--light-theme-background-color, #fff);
--material-secondary-background-color: var(--light-theme-secondary-background-color, #f5f5f5);
--material-disabled-color: rgba(0, 0, 0, 0.26);
/* Divider colors */
--material-divider-color: rgba(0, 0, 0, 0.12);
/* Undocumented internal properties (prefixed with three dashes) */
/* Text field tweaks */
--_material-text-field-input-line-background-color: initial;
--_material-text-field-input-line-opacity: initial;
--_material-text-field-input-line-hover-opacity: initial;
--_material-text-field-focused-label-opacity: initial;
/* Button tweaks */
--_material-button-raised-background-color: initial;
--_material-button-outline-color: initial;
/* Grid tweaks */
--_material-grid-row-hover-background-color: initial;
/* Split layout tweaks */
--_material-split-layout-splitter-background-color: initial;
background-color: var(--material-background-color);
color: var(--material-body-text-color);
}
[theme~='dark'] {
/* Text colors */
--material-body-text-color: var(--dark-theme-text-color, rgba(255, 255, 255, 1));
--material-secondary-text-color: var(--dark-theme-secondary-color, rgba(255, 255, 255, 0.7));
--material-disabled-text-color: var(--dark-theme-disabled-color, rgba(255, 255, 255, 0.5));
/* Primary colors */
--material-primary-color: var(--light-primary-color, #7e3ff2);
--material-primary-text-color: #b794f6;
/* Error colors */
--material-error-color: var(--error-color, #de2839);
--material-error-text-color: var(--material-error-color);
/* Background colors */
--material-background-color: var(--dark-theme-background-color, #303030);
--material-secondary-background-color: var(--dark-theme-secondary-background-color, #3b3b3b);
--material-disabled-color: rgba(255, 255, 255, 0.3);
/* Divider colors */
--material-divider-color: rgba(255, 255, 255, 0.12);
/* Undocumented internal properties (prefixed with three dashes) */
/* Text field tweaks */
--_material-text-field-input-line-background-color: #fff;
--_material-text-field-input-line-opacity: 0.7;
--_material-text-field-input-line-hover-opacity: 1;
--_material-text-field-focused-label-opacity: 1;
/* Button tweaks */
--_material-button-raised-background-color: rgba(255, 255, 255, 0.08);
--_material-button-outline-color: rgba(255, 255, 255, 0.2);
/* Grid tweaks */
--_material-grid-row-hover-background-color: rgba(255, 255, 255, 0.08);
--_material-grid-row-selected-overlay-opacity: 0.16;
/* Split layout tweaks */
--_material-split-layout-splitter-background-color: rgba(255, 255, 255, 0.8);
background-color: var(--material-background-color);
color: var(--material-body-text-color);
}
a {
color: inherit;
}
`;
registerStyles('', colorLight, { moduleId: 'material-color-light' });
const colorDark = css`
:host {
/* Text colors */
--material-body-text-color: var(--dark-theme-text-color, rgba(255, 255, 255, 1));
--material-secondary-text-color: var(--dark-theme-secondary-color, rgba(255, 255, 255, 0.7));
--material-disabled-text-color: var(--dark-theme-disabled-color, rgba(255, 255, 255, 0.5));
/* Primary colors */
--material-primary-color: var(--light-primary-color, #7e3ff2);
--material-primary-text-color: #b794f6;
/* Error colors */
--material-error-color: var(--error-color, #de2839);
--material-error-text-color: var(--material-error-color);
/* Background colors */
--material-background-color: var(--dark-theme-background-color, #303030);
--material-secondary-background-color: var(--dark-theme-secondary-background-color, #3b3b3b);
--material-disabled-color: rgba(255, 255, 255, 0.3);
/* Divider colors */
--material-divider-color: rgba(255, 255, 255, 0.12);
/* Undocumented internal properties (prefixed with three dashes) */
/* Text field tweaks */
--_material-text-field-input-line-background-color: #fff;
--_material-text-field-input-line-opacity: 0.7;
--_material-text-field-input-line-hover-opacity: 1;
--_material-text-field-focused-label-opacity: 1;
/* Button tweaks */
--_material-button-raised-background-color: rgba(255, 255, 255, 0.08);
--_material-button-outline-color: rgba(255, 255, 255, 0.2);
/* Grid tweaks */
--_material-grid-row-hover-background-color: rgba(255, 255, 255, 0.08);
--_material-grid-row-selected-overlay-opacity: 0.16;
/* Split layout tweaks */
--_material-split-layout-splitter-background-color: rgba(255, 255, 255, 0.8);
background-color: var(--material-background-color);
color: var(--material-body-text-color);
}
`;
registerStyles('', colorDark, { moduleId: 'material-color-dark' });
const colorBase = css`
:host {
/* Text colors */
--material-body-text-color: var(--light-theme-text-color, rgba(0, 0, 0, 0.87));
--material-secondary-text-color: var(--light-theme-secondary-color, rgba(0, 0, 0, 0.54));
--material-disabled-text-color: var(--light-theme-disabled-color, rgba(0, 0, 0, 0.38));
/* Primary colors */
--material-primary-color: var(--primary-color, #6200ee);
--material-primary-contrast-color: var(--dark-theme-base-color, #fff);
--material-primary-text-color: var(--material-primary-color);
/* Error colors */
--material-error-color: var(--error-color, #b00020);
--material-error-text-color: var(--material-error-color);
/* Background colors */
--material-background-color: var(--light-theme-background-color, #fff);
--material-secondary-background-color: var(--light-theme-secondary-background-color, #f5f5f5);
--material-disabled-color: rgba(0, 0, 0, 0.26);
/* Divider colors */
--material-divider-color: rgba(0, 0, 0, 0.12);
}
`;
addMaterialGlobalStyles('color-base', colorBase);
export { colorBase, colorDark, colorLight };