Skip to content

Instantly share code, notes, and snippets.

@Haprog
Created August 27, 2020 14:56
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Haprog/5fa62ad0cb4adaba2e024bb51d2744f0 to your computer and use it in GitHub Desktop.
vaadin-lumo-styles CSS custom property declarations
/**
* This file is intended as a workaround for IDEs (e.g. IntelliJ IDEA) to be
* able to detect the CSS custom properties (variables) declared by
* https://github.com/vaadin/vaadin-lumo-styles/ so that the IDE won't
* complain about unresolved custom properties and you get autocompletion
* for them.
*
* Usage:
* Save this file somewhere in your project where your IDE will find it.
*
* See issue: https://github.com/vaadin/vaadin-lumo-styles/issues/91
*/
html {
/*=============*/
/*=== color ===*/
/*=============*/
/* Base (background) */
--lumo-base-color: #FFF;
/* Tint */
--lumo-tint-5pct: hsla(0, 0%, 100%, 0.3);
--lumo-tint-10pct: hsla(0, 0%, 100%, 0.37);
--lumo-tint-20pct: hsla(0, 0%, 100%, 0.44);
--lumo-tint-30pct: hsla(0, 0%, 100%, 0.5);
--lumo-tint-40pct: hsla(0, 0%, 100%, 0.57);
--lumo-tint-50pct: hsla(0, 0%, 100%, 0.64);
--lumo-tint-60pct: hsla(0, 0%, 100%, 0.7);
--lumo-tint-70pct: hsla(0, 0%, 100%, 0.77);
--lumo-tint-80pct: hsla(0, 0%, 100%, 0.84);
--lumo-tint-90pct: hsla(0, 0%, 100%, 0.9);
--lumo-tint: #FFF;
/* Shade */
--lumo-shade-5pct: hsla(214, 61%, 25%, 0.05);
--lumo-shade-10pct: hsla(214, 57%, 24%, 0.1);
--lumo-shade-20pct: hsla(214, 53%, 23%, 0.16);
--lumo-shade-30pct: hsla(214, 50%, 22%, 0.26);
--lumo-shade-40pct: hsla(214, 47%, 21%, 0.38);
--lumo-shade-50pct: hsla(214, 45%, 20%, 0.5);
--lumo-shade-60pct: hsla(214, 43%, 19%, 0.61);
--lumo-shade-70pct: hsla(214, 42%, 18%, 0.72);
--lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);
--lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);
--lumo-shade: hsl(214, 35%, 15%);
/* Contrast */
--lumo-contrast-5pct: var(--lumo-shade-5pct);
--lumo-contrast-10pct: var(--lumo-shade-10pct);
--lumo-contrast-20pct: var(--lumo-shade-20pct);
--lumo-contrast-30pct: var(--lumo-shade-30pct);
--lumo-contrast-40pct: var(--lumo-shade-40pct);
--lumo-contrast-50pct: var(--lumo-shade-50pct);
--lumo-contrast-60pct: var(--lumo-shade-60pct);
--lumo-contrast-70pct: var(--lumo-shade-70pct);
--lumo-contrast-80pct: var(--lumo-shade-80pct);
--lumo-contrast-90pct: var(--lumo-shade-90pct);
--lumo-contrast: var(--lumo-shade);
/* Text */
--lumo-header-text-color: var(--lumo-contrast);
--lumo-body-text-color: var(--lumo-contrast-90pct);
--lumo-secondary-text-color: var(--lumo-contrast-70pct);
--lumo-tertiary-text-color: var(--lumo-contrast-50pct);
--lumo-disabled-text-color: var(--lumo-contrast-30pct);
/* Primary */
--lumo-primary-color: hsl(214, 90%, 52%);
--lumo-primary-color-50pct: hsla(214, 90%, 52%, 0.5);
--lumo-primary-color-10pct: hsla(214, 90%, 52%, 0.1);
--lumo-primary-text-color: var(--lumo-primary-color);
--lumo-primary-contrast-color: #FFF;
/* Error */
--lumo-error-color: hsl(3, 100%, 61%);
--lumo-error-color-50pct: hsla(3, 100%, 60%, 0.5);
--lumo-error-color-10pct: hsla(3, 100%, 60%, 0.1);
--lumo-error-text-color: hsl(3, 92%, 53%);
--lumo-error-contrast-color: #FFF;
/* Success */
--lumo-success-color: hsl(145, 80%, 42%); /* hsl(144,82%,37%); */
--lumo-success-color-50pct: hsla(145, 76%, 44%, 0.55);
--lumo-success-color-10pct: hsla(145, 76%, 44%, 0.12);
--lumo-success-text-color: hsl(145, 100%, 32%);
--lumo-success-contrast-color: #FFF;
/*==================*/
/*=== font-icons ===*/
/*==================*/
--lumo-icons-align-center: "\ea01";
--lumo-icons-align-left: "\ea02";
--lumo-icons-align-right: "\ea03";
--lumo-icons-angle-down: "\ea04";
--lumo-icons-angle-left: "\ea05";
--lumo-icons-angle-right: "\ea06";
--lumo-icons-angle-up: "\ea07";
--lumo-icons-arrow-down: "\ea08";
--lumo-icons-arrow-left: "\ea09";
--lumo-icons-arrow-right: "\ea0a";
--lumo-icons-arrow-up: "\ea0b";
--lumo-icons-bar-chart: "\ea0c";
--lumo-icons-bell: "\ea0d";
--lumo-icons-calendar: "\ea0e";
--lumo-icons-checkmark: "\ea0f";
--lumo-icons-chevron-down: "\ea10";
--lumo-icons-chevron-left: "\ea11";
--lumo-icons-chevron-right: "\ea12";
--lumo-icons-chevron-up: "\ea13";
--lumo-icons-clock: "\ea14";
--lumo-icons-cog: "\ea15";
--lumo-icons-cross: "\ea16";
--lumo-icons-download: "\ea17";
--lumo-icons-dropdown: "\ea18";
--lumo-icons-edit: "\ea19";
--lumo-icons-error: "\ea1a";
--lumo-icons-eye: "\ea1b";
--lumo-icons-eye-disabled: "\ea1c";
--lumo-icons-menu: "\ea1d";
--lumo-icons-minus: "\ea1e";
--lumo-icons-ordered-list: "\ea1f";
--lumo-icons-phone: "\ea20";
--lumo-icons-photo: "\ea21";
--lumo-icons-play: "\ea22";
--lumo-icons-plus: "\ea23";
--lumo-icons-redo: "\ea24";
--lumo-icons-reload: "\ea25";
--lumo-icons-search: "\ea26";
--lumo-icons-undo: "\ea27";
--lumo-icons-unordered-list: "\ea28";
--lumo-icons-upload: "\ea29";
--lumo-icons-user: "\ea2a";
/*==============*/
/*=== sizing ===*/
/*==============*/
--lumo-size-xs: 1.625rem;
--lumo-size-s: 1.875rem;
--lumo-size-m: 2.25rem;
--lumo-size-l: 2.75rem;
--lumo-size-xl: 3.5rem;
/* Icons */
--lumo-icon-size-s: 1.25em;
--lumo-icon-size-m: 1.5em;
--lumo-icon-size-l: 2.25em;
/* For backwards compatibility */
--lumo-icon-size: var(--lumo-icon-size-m);
/*===============*/
/*=== spacing ===*/
/*===============*/
/* Square */
--lumo-space-xs: 0.25rem;
--lumo-space-s: 0.5rem;
--lumo-space-m: 1rem;
--lumo-space-l: 1.5rem;
--lumo-space-xl: 2.5rem;
/* Wide */
--lumo-space-wide-xs: calc(var(--lumo-space-xs) / 2) var(--lumo-space-xs);
--lumo-space-wide-s: calc(var(--lumo-space-s) / 2) var(--lumo-space-s);
--lumo-space-wide-m: calc(var(--lumo-space-m) / 2) var(--lumo-space-m);
--lumo-space-wide-l: calc(var(--lumo-space-l) / 2) var(--lumo-space-l);
--lumo-space-wide-xl: calc(var(--lumo-space-xl) / 2) var(--lumo-space-xl);
/* Tall */
--lumo-space-tall-xs: var(--lumo-space-xs) calc(var(--lumo-space-xs) / 2);
--lumo-space-tall-s: var(--lumo-space-s) calc(var(--lumo-space-s) / 2);
--lumo-space-tall-m: var(--lumo-space-m) calc(var(--lumo-space-m) / 2);
--lumo-space-tall-l: var(--lumo-space-l) calc(var(--lumo-space-l) / 2);
--lumo-space-tall-xl: var(--lumo-space-xl) calc(var(--lumo-space-xl) / 2);
/*=============*/
/*=== style ===*/
/*=============*/
/* 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 */
--lumo-border-radius: 0.25em; /* Deprecated */
/* 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;
/*==================*/
/*=== typography ===*/
/*==================*/
/* Font families */
--lumo-font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
/* Font sizes */
--lumo-font-size-xxs: .75rem;
--lumo-font-size-xs: .8125rem;
--lumo-font-size-s: .875rem;
--lumo-font-size-m: 1rem;
--lumo-font-size-l: 1.125rem;
--lumo-font-size-xl: 1.375rem;
--lumo-font-size-xxl: 1.75rem;
--lumo-font-size-xxxl: 2.5rem;
/* Line heights */
--lumo-line-height-xs: 1.25;
--lumo-line-height-s: 1.375;
--lumo-line-height-m: 1.625;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment