diff --git a/demo/frontend/themes/componentsample/styles.css b/demo/frontend/themes/componentsample/styles.css index 223dea3..ab66f4c 100644 --- a/demo/frontend/themes/componentsample/styles.css +++ b/demo/frontend/themes/componentsample/styles.css @@ -2,6 +2,10 @@ html { background-color: var(--lumo-contrast-5pct); } +#outlet { + overflow: auto; +} + .components-view { padding: var(--lumo-space-l); } diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/accordion.css b/theme/src/main/resources/META-INF/resources/themes/starpass/accordion.css new file mode 100644 index 0000000..f24b527 --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/accordion.css @@ -0,0 +1,23 @@ +:is(vaadin-details, vaadin-accordion-panel) { + display: grid; + grid-template-rows: min-content 0fr; + transition: grid-template-rows 300ms; +} + +:is(vaadin-details, vaadin-accordion-panel)[opened] { + grid-template-rows: min-content 1fr; +} + +:is(vaadin-details, vaadin-accordion-panel)::part(content) { + display: block; + overflow: hidden; + min-height: 0; + padding: 0; /* TODO the actual content within should define the white space it needs */ + transition: visibility 300ms, opacity 300ms; +} + +:is(vaadin-details, vaadin-accordion-panel):not([opened])::part(content) { + visibility: hidden; + pointer-events: none; + opacity: 0; +} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/apex-logo.svg b/theme/src/main/resources/META-INF/resources/themes/starpass/apex-logo.svg new file mode 100644 index 0000000..5159919 --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/apex-logo.svg @@ -0,0 +1,11 @@ + + + + + diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/badge.css b/theme/src/main/resources/META-INF/resources/themes/starpass/badge.css new file mode 100644 index 0000000..4280153 --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/badge.css @@ -0,0 +1,73 @@ + +[theme~=badge] { + padding: var(--lumo-space-xs) calc(var(--lumo-space-xs) * 1.5); + font-size: var(--lumo-font-size-xs); + font-weight: 620; + color: var(--lumo-secondary-text-color); +} + +[theme~=badge][theme~=small] { + font-size: var(--lumo-font-size-xxs); + font-weight: 660; +} + +[theme~=badge][theme~=accent] { + background-color: var(--accent-10pct); + color: var(--accent-text); +} + +[theme~=badge][theme~=accent][theme~=primary] { + background-color: var(--accent); + color: var(--accent-contrast); +} + +[theme~=badge][theme~=dimmed] { + background: transparent; + color: var(--lumo-contrast-60pct); +} + +/* Empty badges (dots) are too big by default */ +[theme~=badge]:not([icon]):empty, +[theme~=badge][theme~=dot] { + font-size: 0; + padding: 0.25rem; + width: 0; + height: 0; + border-radius: 100%; +} + +[theme~=badge][theme~=small]:not([icon]):empty, +[theme~=badge][theme~=small][theme~=dot] { + padding: 0.1875rem; +} + +[theme~=badge][theme~=dot]::before { + font-size: var(--lumo-font-size-xs); +} + +[theme~=badge][theme~=small][theme~=dot]::before { + font-size: var(--lumo-font-size-xxs); +} + +[theme~=badge] vaadin-icon { + width: var(--lumo-icon-size-s); + height: var(--lumo-icon-size-s); +} + +[theme~=badge] vaadin-icon, +[theme~=badge]::before { + margin: calc(var(--lumo-space-xs) * -1) 0; +} + +[theme~=badge][theme~=small] vaadin-icon { + width: calc(var(--lumo-icon-size-s) * 0.8); + height: calc(var(--lumo-icon-size-s) * 0.8); +} + +[theme~=badge] vaadin-icon:first-child { + margin-inline-start: calc(var(--lumo-space-xs) * -1.5); +} + +[theme~=badge] vaadin-icon:last-child { + margin-inline-end: calc(var(--lumo-space-xs) * -1.5); +} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/bg.png b/theme/src/main/resources/META-INF/resources/themes/starpass/bg.png new file mode 100644 index 0000000..02a41ec Binary files /dev/null and b/theme/src/main/resources/META-INF/resources/themes/starpass/bg.png differ diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/button.css b/theme/src/main/resources/META-INF/resources/themes/starpass/button.css new file mode 100644 index 0000000..e0caea7 --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/button.css @@ -0,0 +1,123 @@ +:is(vaadin-button, vaadin-menu-bar-button) { + --vaadin-button-background: transparent; + --vaadin-button-border: var(--vaadin-button-border-width) solid var(--lumo-contrast-20pct); + --vaadin-button-padding: 0 calc(var(--_button-size) / 4 + var(--lumo-border-radius-m) / 2); + --vaadin-button-tertiary-padding: var(--vaadin-button-padding); + margin: 0; + font-weight: 630; + box-shadow: 0 1px 1px 0 var(--lumo-shade-2pct); +} + +/* TODO missing from Lumo */ +:is(vaadin-button, vaadin-menu-bar-button)::before { + inset: calc(var(--vaadin-button-border-width) * -1); +} + +:is(vaadin-button, vaadin-menu-bar-button)::after { + display: none; +} + +@media (any-hover: hover) { + :is(vaadin-button, vaadin-menu-bar-button):hover::before { + background-color: currentColor; + opacity: 0.04; + } +} + +:is(vaadin-button, vaadin-menu-bar-button):is(:active, [active])::before { + opacity: 0.08; +} + +:is(vaadin-button, vaadin-menu-bar-button):is(:active, [active])[theme~=primary]::before { + background-color: black; +} + +/* TODO seems like an issue in Lumo */ +:is(vaadin-button, vaadin-menu-bar-button)[theme*=tertiary] { + --vaadin-button-border-width: 0px; + box-shadow: none; +} + +:is(vaadin-button, vaadin-menu-bar-button)[theme~=primary] { + font-weight: 680; + min-width: initial; + background-image: linear-gradient(170deg, hsl(0 0% 100% / 0.05), hsl(0 0% 0% / 0.05)); + background-blend-mode: overlay; +} + +/* TODO issue in Lumo, not using the focus-ring-color custom property for primary buttons */ +:is(vaadin-button, vaadin-menu-bar-button)[focus-ring] { + box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--vaadin-focus-ring-width, 2px) + 1px) var(--vaadin-focus-ring-color); +} + +:is(vaadin-button, vaadin-menu-bar-button)[theme~=accent]:not([theme~=primary]) { + color: var(--accent-text); +} + +:is(vaadin-button, vaadin-menu-bar-button)[theme~=accent][theme~=primary] { + background-color: var(--accent); + color: var(--accent-contrast); +} + +:is(vaadin-button, vaadin-menu-bar-button) vaadin-icon[slot$=fix], +:is(vaadin-button, vaadin-menu-bar-button)[theme~=icon] vaadin-icon { + /* TODO bug in Lumo, icon is not vertically centered */ + vertical-align: top; +} + +:is(vaadin-button, vaadin-menu-bar-button):not([theme~=icon]) vaadin-icon[slot=prefix] { + margin-inline-end: var(--lumo-space-xs); +} + +:is(vaadin-button, vaadin-menu-bar-button):not([theme~=icon]) vaadin-icon[slot=suffix] { + margin-inline-start: var(--lumo-space-xs); +} + +:is(vaadin-button, vaadin-menu-bar-button)[theme~=tertiary-inline] { + padding: 0; + cursor: pointer; +} + +@media (any-hover: hover) { + :is(vaadin-button, vaadin-menu-bar-button)[theme~=tertiary-inline]:hover { + opacity: 0.85; + } +} + +/* TODO missing from Lumo, icons end up outside the button boundaries */ +:is(vaadin-button, vaadin-menu-bar-button)[theme~=tertiary-inline]::part(prefix) { + margin-inline-start: 0; +} +:is(vaadin-button, vaadin-menu-bar-button)[theme~=tertiary-inline]::part(suffix) { + margin-inline-end: 0; +} + +:where(vaadin-button, vaadin-menu-bar-button):not([theme~=primary], [theme~=success], [theme~=error]) vaadin-icon, +:where(vaadin-menu-bar-overlay vaadin-menu-bar-item):not([theme~=primary], [theme~=success], [theme~=error]) vaadin-icon { + opacity: 0.7; +} + +/* Ensure icon buttons are square */ +:is(vaadin-button, vaadin-menu-bar-button)[theme~=icon] { + width: var(--lumo-button-size); + min-width: 0; + height: var(--lumo-button-size); + padding: 0; +} + +:is(vaadin-button, vaadin-menu-bar-button)[theme~=pill] { + border-radius: var(--lumo-button-size); + padding-inline-start: 0.75em; + padding-inline-end: 0.75em; +} + +/* TODO check why these exist in Lumo */ +vaadin-menu-bar-button > vaadin-menu-bar-item { + margin: 0; + padding: 0; +} + +vaadin-button [theme~=badge][slot$=fix] { + /* Fixes vertical alignment */ + vertical-align: top; +} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/checkbox.css b/theme/src/main/resources/META-INF/resources/themes/starpass/checkbox.css new file mode 100644 index 0000000..19f4842 --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/checkbox.css @@ -0,0 +1,4 @@ +vaadin-checkbox { + --vaadin-checkbox-background: transparent; + --vaadin-input-field-border-color: var(--lumo-contrast-30pct); +} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/badge.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/badge.css deleted file mode 100644 index 5763333..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/badge.css +++ /dev/null @@ -1,50 +0,0 @@ -[theme~='badge'] { - -} - -/* Colors */ -[theme~='badge'][theme~='success'] { - color: var(--lumo-success-text-color); - background-color: var(--lumo-success-color-10pct); -} - -[theme~='badge'][theme~='error'] { - color: var(--lumo-error-text-color); - background-color: var(--lumo-error-color-10pct); -} - -[theme~='badge'][theme~='warning'] { - color: var(--lumo-warning-text-color); - background-color: var(--lumo-warning-color-10pct); -} - -[theme~='badge'][theme~='contrast'] { - color: var(--lumo-contrast-80pct); - background-color: var(--lumo-contrast-5pct); -} - -/* Primary */ -[theme~='badge'][theme~='primary'] { - color: var(--lumo-primary-contrast-color); - background-color: var(--lumo-primary-color); -} - -[theme~='badge'][theme~='success'][theme~='primary'] { - color: var(--lumo-success-contrast-color); - background-color: var(--lumo-success-color); -} - -[theme~='badge'][theme~='error'][theme~='primary'] { - color: var(--lumo-error-contrast-color); - background-color: var(--lumo-error-color); -} - -[theme~='badge'][theme~='warning'][theme~='primary'] { - color: var(--lumo-warning-contrast-color); - background-color: var(--lumo-warning-color); -} - -[theme~='badge'][theme~='contrast'][theme~='primary'] { - color: var(--lumo-base-color); - background-color: var(--lumo-contrast); -} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-accordion.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-accordion.css deleted file mode 100644 index d1f85e7..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-accordion.css +++ /dev/null @@ -1,11 +0,0 @@ -vaadin-accordion { - -} - -vaadin-accordion-panel { - -} - -vaadin-accordion-heading { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-app-layout.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-app-layout.css deleted file mode 100644 index 7e22481..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-app-layout.css +++ /dev/null @@ -1,3 +0,0 @@ -vaadin-app-layout { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-avatar.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-avatar.css deleted file mode 100644 index 0ca8391..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-avatar.css +++ /dev/null @@ -1,11 +0,0 @@ -vaadin-avatar { - -} - -vaadin-avatar-group { - -} - -vaadin-avatar-group-overlay { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-button.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-button.css deleted file mode 100644 index 77c7dc8..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-button.css +++ /dev/null @@ -1,3 +0,0 @@ -vaadin-button { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-checkbox.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-checkbox.css deleted file mode 100644 index 7cd218f..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-checkbox.css +++ /dev/null @@ -1,7 +0,0 @@ -vaadin-checkbox { - -} - -vaadin-checkbox-group { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-combo-box.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-combo-box.css deleted file mode 100644 index e6531e0..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-combo-box.css +++ /dev/null @@ -1,11 +0,0 @@ -vaadin-combo-box { - -} - -vaadin-combo-box-overlay { - -} - -vaadin-combo-box-item { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-confirm-dialog.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-confirm-dialog.css deleted file mode 100644 index 753ce2e..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-confirm-dialog.css +++ /dev/null @@ -1,3 +0,0 @@ -vaadin-confirm-dialog-overlay { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-context-menu.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-context-menu.css deleted file mode 100644 index 98d2d41..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-context-menu.css +++ /dev/null @@ -1,7 +0,0 @@ -vaadin-context-menu-overlay { - -} - -vaadin-context-menu-item { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-crud.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-crud.css deleted file mode 100644 index a527376..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-crud.css +++ /dev/null @@ -1,7 +0,0 @@ -vaadin-crud { - -} - -vaadin-crud-dialog-overlay { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-custom-field.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-custom-field.css deleted file mode 100644 index fc3159e..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-custom-field.css +++ /dev/null @@ -1,3 +0,0 @@ -vaadin-custom-field { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-date-picker.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-date-picker.css deleted file mode 100644 index c581877..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-date-picker.css +++ /dev/null @@ -1,15 +0,0 @@ -vaadin-date-picker { - -} - -vaadin-date-picker-overlay { - -} - -vaadin-date-picker-overlay-content { - -} - -vaadin-month-calendar { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-date-time-picker.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-date-time-picker.css deleted file mode 100644 index 393e8e8..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-date-time-picker.css +++ /dev/null @@ -1,3 +0,0 @@ -vaadin-date-time-picker { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-details.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-details.css deleted file mode 100644 index aef7375..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-details.css +++ /dev/null @@ -1,7 +0,0 @@ -vaadin-details { - -} - -vaadin-details-summary { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-dialog.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-dialog.css deleted file mode 100644 index 2dcde61..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-dialog.css +++ /dev/null @@ -1,3 +0,0 @@ -vaadin-dialog-overlay { - -} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-email-field.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-email-field.css deleted file mode 100644 index 755eb33..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-email-field.css +++ /dev/null @@ -1,3 +0,0 @@ -vaadin-email-field { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-grid-pro.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-grid-pro.css deleted file mode 100644 index b8c0f14..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-grid-pro.css +++ /dev/null @@ -1,3 +0,0 @@ -vaadin-grid-pro { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-grid.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-grid.css deleted file mode 100644 index 0d7b60c..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-grid.css +++ /dev/null @@ -1,7 +0,0 @@ -vaadin-grid { - -} - -vaadin-grid-sorter { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-list-box.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-list-box.css deleted file mode 100644 index e6988f1..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-list-box.css +++ /dev/null @@ -1,7 +0,0 @@ -vaadin-list-box { - -} - -vaadin-item { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-login-form.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-login-form.css deleted file mode 100644 index f2d0349..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-login-form.css +++ /dev/null @@ -1,7 +0,0 @@ -vaadin-login-form { - -} - -vaadin-login-form-wrapper { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-menu-bar.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-menu-bar.css deleted file mode 100644 index 5a93505..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-menu-bar.css +++ /dev/null @@ -1,15 +0,0 @@ -vaadin-menu-bar { - -} - -vaadin-menu-bar-button { - -} - -vaadin-menu-bar-overlay { - -} - -vaadin-menu-bar-item { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-message-input.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-message-input.css deleted file mode 100644 index 8d50217..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-message-input.css +++ /dev/null @@ -1,3 +0,0 @@ -vaadin-message-input { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-message-list.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-message-list.css deleted file mode 100644 index ed77206..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-message-list.css +++ /dev/null @@ -1,7 +0,0 @@ -vaadin-message-list { - -} - -vaadin-message { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-multi-select-combo-box.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-multi-select-combo-box.css deleted file mode 100644 index 061ce32..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-multi-select-combo-box.css +++ /dev/null @@ -1,15 +0,0 @@ -vaadin-multi-select-combo-box { - -} - -vaadin-multi-select-combo-box-chip { - -} - -vaadin-multi-select-combo-box-overlay { - -} - -vaadin-multi-select-combo-box-item { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-notification.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-notification.css deleted file mode 100644 index 2c0c340..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-notification.css +++ /dev/null @@ -1,3 +0,0 @@ -vaadin-notification-card { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-number-field.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-number-field.css deleted file mode 100644 index fcea8e1..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-number-field.css +++ /dev/null @@ -1,3 +0,0 @@ -vaadin-number-field { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-password-field.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-password-field.css deleted file mode 100644 index 118a2c0..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-password-field.css +++ /dev/null @@ -1,3 +0,0 @@ -vaadin-password-field { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-progress-bar.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-progress-bar.css deleted file mode 100644 index 7f4edd8..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-progress-bar.css +++ /dev/null @@ -1,3 +0,0 @@ -vaadin-progress-bar { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-radio-button.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-radio-button.css deleted file mode 100644 index 6b6d215..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-radio-button.css +++ /dev/null @@ -1,7 +0,0 @@ -vaadin-radio-group { - -} - -vaadin-radio-button { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-rich-text-editor.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-rich-text-editor.css deleted file mode 100644 index 77d7a87..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-rich-text-editor.css +++ /dev/null @@ -1,3 +0,0 @@ -vaadin-rich-text-editor { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-scroller.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-scroller.css deleted file mode 100644 index 07986d7..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-scroller.css +++ /dev/null @@ -1,3 +0,0 @@ -vaadin-scroller { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-select.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-select.css deleted file mode 100644 index bdf775e..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-select.css +++ /dev/null @@ -1,11 +0,0 @@ -vaadin-select { - -} - -vaadin-select-overlay { - -} - -vaadin-select-item { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-tabs.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-tabs.css deleted file mode 100644 index 699c544..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-tabs.css +++ /dev/null @@ -1,11 +0,0 @@ -vaadin-tabs { - -} - -vaadin-tab { - -} - -vaadin-tabsheet { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-text-area.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-text-area.css deleted file mode 100644 index c7a232d..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-text-area.css +++ /dev/null @@ -1,3 +0,0 @@ -vaadin-text-area { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-text-field.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-text-field.css deleted file mode 100644 index 699456b..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-text-field.css +++ /dev/null @@ -1,3 +0,0 @@ -vaadin-text-field { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-time-picker.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-time-picker.css deleted file mode 100644 index 57a7ab5..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-time-picker.css +++ /dev/null @@ -1,3 +0,0 @@ -vaadin-time-picker { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-tooltip.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-tooltip.css deleted file mode 100644 index a909e60..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-tooltip.css +++ /dev/null @@ -1,3 +0,0 @@ -vaadin-tooltip { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-tree-grid.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-tree-grid.css deleted file mode 100644 index 503ef03..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-tree-grid.css +++ /dev/null @@ -1,5 +0,0 @@ -/* Use vaadin-grid.css for styling the grid */ - -vaadin-grid-tree-toggle { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-upload.css b/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-upload.css deleted file mode 100644 index 2611933..0000000 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/component-styles/vaadin-upload.css +++ /dev/null @@ -1,11 +0,0 @@ -vaadin-upload { - -} - -vaadin-upload-file-list { - -} - -vaadin-upload-file { - -} \ No newline at end of file diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/components/vaadin-button.css b/theme/src/main/resources/META-INF/resources/themes/starpass/components/vaadin-button.css new file mode 100644 index 0000000..fe7a797 --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/components/vaadin-button.css @@ -0,0 +1,11 @@ +:host { + justify-content: center; + text-align: center; +} + +.vaadin-button-container { + /* TODO these (and the above that they inherit) should be in Lumo, so that alignment can be overridden from app styles */ + justify-content: inherit; + text-align: inherit; + min-height: auto; /* TODO having the min-height inherit doesn't allow for borders to be used on the host (the height will be incorrect for this element in that case) */ +} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/components/vaadin-grid.css b/theme/src/main/resources/META-INF/resources/themes/starpass/components/vaadin-grid.css new file mode 100644 index 0000000..86e5499 --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/components/vaadin-grid.css @@ -0,0 +1,5 @@ +#table { + /* TODO should probably be included in Grid core styles (restores scroll-rubberbanding on iOS) */ + /* TODO only apply this if the grid covers the whole viewport, as it prevents the user from getting past the grid */ + /* overscroll-behavior: contain; */ +} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/components/vaadin-side-nav-item.css b/theme/src/main/resources/META-INF/resources/themes/starpass/components/vaadin-side-nav-item.css new file mode 100644 index 0000000..46c7dd1 --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/components/vaadin-side-nav-item.css @@ -0,0 +1,4 @@ +[part="children"] { + /* TODO part=children has [hidden] with "display: none !important" in shadow DOM which we want to override (to be able to transition the opening/closing of children) */ + display: var(--vaadin-side-nav-item-children-display) !important; +} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/confirm-dialog.css b/theme/src/main/resources/META-INF/resources/themes/starpass/confirm-dialog.css new file mode 100644 index 0000000..4c27557 --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/confirm-dialog.css @@ -0,0 +1,30 @@ + +vaadin-confirm-dialog-overlay::part(header), +vaadin-confirm-dialog-overlay::part(footer) { + background: transparent; +} + +vaadin-confirm-dialog-overlay::part(footer) { + padding: var(--lumo-space-m); +} + +vaadin-confirm-dialog-overlay h3 { + line-height: var(--lumo-line-height-m); +} + +vaadin-confirm-dialog-overlay::part(content) { + padding-bottom: var(--lumo-space-s); +} + +vaadin-confirm-dialog-overlay vaadin-button[theme~=tertiary] { + padding: var(--vaadin-button-tertiary-padding); +} + +vaadin-confirm-dialog-overlay::part(reject-button) { + order: -1; + flex-grow: 1; +} + +vaadin-confirm-dialog-overlay::part(cancel-button) { + flex-grow: 0; +} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/date-picker.css b/theme/src/main/resources/META-INF/resources/themes/starpass/date-picker.css new file mode 100644 index 0000000..0f01de1 --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/date-picker.css @@ -0,0 +1,9 @@ +vaadin-date-picker-overlay-content, +vaadin-date-picker-month-scroller, +vaadin-date-picker-overlay-content::part(toolbar) { + background: transparent; +} + +vaadin-date-picker-year-scroller { + background: var(--lumo-shade-10pct); +} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/fonts/Satoshi.css b/theme/src/main/resources/META-INF/resources/themes/starpass/fonts/Satoshi.css new file mode 100644 index 0000000..03e84ba --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/fonts/Satoshi.css @@ -0,0 +1,7 @@ +@font-face { + font-family: 'Satoshi'; + src: url('./Satoshi-Variable.woff2') format('woff2'); + font-weight: 300 900; + font-display: swap; + font-style: normal; +} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/grid.css b/theme/src/main/resources/META-INF/resources/themes/starpass/grid.css new file mode 100644 index 0000000..63a0aee --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/grid.css @@ -0,0 +1,29 @@ +vaadin-grid::part(header-cell) { + min-height: var(--lumo-size-m); +} + +vaadin-grid.transparent-body { + background: transparent; + --vaadin-grid-cell-background: transparent; +} + +vaadin-grid.transparent-body::part(header-cell) { + --vaadin-grid-cell-background: var(--lumo-base-color); +} + +vaadin-grid.no-header::part(header-cell) { + height: 0; + min-height: 0; + overflow: hidden; + border-bottom-color: transparent; + --vaadin-grid-cell-background: transparent; +} + +vaadin-grid.no-header[overflow~=top]::part(header-cell) { + border-bottom-color: var(--lumo-contrast-10pct); +} + +/* Missing from Lumo */ +vaadin-grid::part(body-cell)::before { + border-radius: inherit; +} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/menu-bar.css b/theme/src/main/resources/META-INF/resources/themes/starpass/menu-bar.css new file mode 100644 index 0000000..5dd39e5 --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/menu-bar.css @@ -0,0 +1,56 @@ +vaadin-menu-bar::part(container) { + /* Space for focus outline */ + padding: calc(var(--vaadin-focus-ring-width, 2px) + 1px); + margin: calc(var(--vaadin-focus-ring-width, 2px) * -1 - 1px); +} + +vaadin-menu-bar vaadin-menu-bar-button[aria-haspopup]::part(suffix)::after { + content: var(--lumo-icons-dropdown); + font-family: lumo-icons; + opacity: 0.7; +} + +vaadin-menu-bar vaadin-menu-bar-button[aria-haspopup][theme~=icon]::part(suffix)::after { + position: absolute; + z-index: 1; + bottom: 0; + right: 0; + transition: opacity 120ms; +} + +vaadin-menu-bar vaadin-menu-bar-button[theme~=icon]:not(:hover, [active])::part(suffix)::after { + opacity: 0; +} + +@media (pointer: fine) { + vaadin-menu-bar-item { + font-size: var(--lumo-font-size-s); + min-height: auto; + } +} + +vaadin-menu-bar-item::part(checkmark)::before { + font-size: var(--lumo-icon-size-s); +} + +vaadin-menu-bar-item[theme~=error] { + color: var(--lumo-error-text-color); +} + +vaadin-menu-bar-item[theme~=error]:hover { + background-color: var(--lumo-error-color-10pct); +} + +vaadin-menu-bar-item > [theme~=badge]:last-child { + margin-inline-start: auto; + margin-inline-end: calc(var(--lumo-space-m) * -1); +} + +/* Separated buttons */ +vaadin-menu-bar.separate-buttons::part(container) { + gap: var(--lumo-space-xs); +} + +vaadin-menu-bar.separate-buttons vaadin-menu-bar-button { + border-radius: var(--lumo-border-radius-m); +} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/message-input.css b/theme/src/main/resources/META-INF/resources/themes/starpass/message-input.css new file mode 100644 index 0000000..970328a --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/message-input.css @@ -0,0 +1,50 @@ +vaadin-message-input { + padding: 0; + margin: 0; + overflow: visible; +} + +vaadin-message-input vaadin-text-area { + margin-inline-end: 0; +} + +vaadin-message-input vaadin-button[theme] { + width: var(--lumo-size-m); + background: transparent; + padding: 0; + margin-inline-start: calc(var(--lumo-size-m) * -1); + align-self: end; + color: var(--lumo-secondary-text-color); +} + +vaadin-message-input vaadin-button:hover { + color: var(--lumo-body-text-color); +} + +vaadin-message-input vaadin-button[theme]::before { + display: none; +} + +vaadin-message-input vaadin-button::part(label) { + text-overflow: clip; + padding: 0; + font-size: 0; +} + +vaadin-message-input vaadin-button::part(label)::before { + content: ""; + display: inline-block; + width: var(--lumo-size-m); + height: var(--lumo-size-m); + background: currentColor; + --mask-image: url('data:image/svg+xml;utf8,'); + -webkit-mask-image: var(--mask-image); + mask-image: var(--mask-image); + -webkit-mask-size: 50%; + mask-size: 50%; + -webkit-mask-position: 50%; + mask-position: 50%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + vertical-align: top; +} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/message-list.css b/theme/src/main/resources/META-INF/resources/themes/starpass/message-list.css new file mode 100644 index 0000000..b8c5b96 --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/message-list.css @@ -0,0 +1,130 @@ +vaadin-message { + padding: var(--lumo-space-s) var(--lumo-space-l); + cursor: default; + gap: var(--lumo-space-m); +} + +vaadin-message::part(name) { + font-weight: 700; + line-height: var(--lumo-line-height-xs); +} + +vaadin-message::part(time) { + font-size: var(--lumo-font-size-xs); + line-height: var(--lumo-line-height-xs); +} + +vaadin-message vaadin-avatar { + margin: 0; +} + +vaadin-message-list { + /* min-height: 100%; */ + display: flex; + flex-direction: column; + justify-content: end; +} + +vaadin-message-list::part(list) { + display: flex; + flex-direction: column; + justify-content: end; +} + +vaadin-message-list.one-to-one { + background: linear-gradient(transparent, var(--lumo-shade-2pct) 100px, var(--lumo-shade-2pct) calc(100% - 100px), transparent); +} + +vaadin-message-list.one-to-one vaadin-message::part(content) { + max-width: 80%; + flex-grow: 0; + width: fit-content; + gap: var(--lumo-space-xs); +} + +vaadin-message-list.one-to-one vaadin-message::part(message) { + padding: var(--lumo-space-s) var(--lumo-space-m); + border-radius: var(--lumo-border-radius-l); + background: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct)) var(--lumo-base-color); + box-shadow: inset 0 0 0 1px var(--lumo-contrast-20pct), 0 1px 3px -1px var(--lumo-shade-10pct); +} + +vaadin-message-list.one-to-one vaadin-message:not(.me)::part(message) { + border-end-start-radius: 0; +} + +vaadin-message-list.one-to-one vaadin-message.me::part(message) { + border-end-end-radius: 0; +} + + +vaadin-message-list.one-to-one vaadin-message vaadin-avatar { + align-self: end; + margin-bottom: var(--lumo-space-xs); + display: none; +} + +vaadin-message-list.one-to-one vaadin-message::part(name) { + font-size: var(--lumo-font-size-xs); + font-weight: 500; + margin: 0; + display: none; +} + +vaadin-message-list.one-to-one vaadin-message::part(header) { + order: 1; + min-height: 0; + gap: var(--lumo-space-s); +} + +vaadin-message-list.one-to-one vaadin-message.me { + flex-direction: row-reverse; +} + +vaadin-message-list.one-to-one vaadin-message.me::part(header) { + justify-content: end; + flex-direction: row-reverse; +} + +vaadin-message-list.one-to-one vaadin-message.me::part(message) { + background: var(--accent-10pct); + box-shadow: inset 0 0 0 1px var(--lumo-contrast-10pct), 0 1px 3px -1px var(--lumo-shade-10pct); +} + +vaadin-message-list vaadin-message.new-messages { + padding-inline-start: 0; + margin-inline-start: -1000%; +} + +vaadin-message-list vaadin-message.new-messages::part(header), +vaadin-message-list vaadin-message.new-messages > vaadin-avatar { + display: none; +} + +vaadin-message-list vaadin-message.new-messages::part(content) { + flex-direction: row; + align-items: center; + width: 100%; + max-width: none; +} + +vaadin-message-list vaadin-message.new-messages::part(content)::before { + content: ""; + flex: auto; + display: block; + height: 1px; + width: 100%; + background: var(--lumo-error-color-50pct); +} + +vaadin-message-list vaadin-message.new-messages::part(message) { + background: transparent; + padding: 0; + border-radius: 0; + border: 0; + box-shadow: none; + color: var(--lumo-error-text-color); + font-size: var(--lumo-font-size-s); + font-weight: 600; + line-height: 1; +} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/progress-bar.css b/theme/src/main/resources/META-INF/resources/themes/starpass/progress-bar.css new file mode 100644 index 0000000..c56ec8d --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/progress-bar.css @@ -0,0 +1,14 @@ +vaadin-progress-bar { + height: 12px; +} + +vaadin-progress-bar::part(bar) { + border: 1px solid var(--lumo-contrast-30pct); + padding: 2px; + background: transparent; + box-sizing: border-box; +} + +vaadin-progress-bar[theme~=accent]::part(value) { + background-color: var(--accent); +} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/radio-button.css b/theme/src/main/resources/META-INF/resources/themes/starpass/radio-button.css new file mode 100644 index 0000000..2984352 --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/radio-button.css @@ -0,0 +1,4 @@ +vaadin-radio-button { + --vaadin-radio-button-background: transparent; + --vaadin-input-field-border-color: var(--lumo-contrast-30pct); +} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/select.css b/theme/src/main/resources/META-INF/resources/themes/starpass/select.css new file mode 100644 index 0000000..5471dd2 --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/select.css @@ -0,0 +1,27 @@ +vaadin-select vaadin-item::part(content) { + /* TODO seems like a missing property in Lumo */ + min-width: 0; +} + +vaadin-select.autosize { + --vaadin-field-default-width: auto; +} + +vaadin-select.autosize vaadin-select-value-button { + width: auto; +} + +vaadin-select.icon-only vaadin-item > :not(vaadin-icon) { + display: none; +} + +vaadin-select.borderless { + --vaadin-input-field-border-width: 0px; + --vaadin-input-field-background: transparent; +} + +vaadin-select.borderless::part(input-field), +vaadin-select.borderless vaadin-select-value-button, +vaadin-select.borderless vaadin-item { + padding: 0; +} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/side-nav.css b/theme/src/main/resources/META-INF/resources/themes/starpass/side-nav.css new file mode 100644 index 0000000..49299d1 --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/side-nav.css @@ -0,0 +1,129 @@ +vaadin-side-nav, +vaadin-side-nav-item { + display: grid; + grid-template-rows: min-content 1fr; + --transition-duration: 260ms; + transition: grid-template-rows var(--transition-duration); + line-height: var(--lumo-line-height-xs); /* Only set on vaadin-side-nav in Lumo, but we are using vaadin-side-nav-item as a standalone element as well */ +} + +vaadin-side-nav[collapsed], +vaadin-side-nav-item:not([expanded]) { + grid-template-rows: min-content 0fr; +} + +vaadin-side-nav::part(label) { + font-weight: 600; + min-width: 0; /* TODO missing from core styles, allow the items to shrink */ + padding-inline-start: var(--_child-indent, 0px); +} + +/* TODO missing from core styles, allow the items to shrink */ +vaadin-side-nav > [slot=label] { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + margin: 0; + padding: var(--lumo-space-s); + margin-bottom: var(--lumo-space-xs); +} + +vaadin-side-nav::part(children), +vaadin-side-nav-item::part(children) { + /* TODO part=children has [hidden] with "display: none !important" in shadow DOM which overrides this */ + display: flex; + flex-direction: column; + gap: var(--lumo-space-xs); + min-height: 0; + transition: visibility var(--transition-duration), opacity var(--transition-duration); +} + +vaadin-side-nav[collapsed]::part(children), +vaadin-side-nav-item:not([expanded])::part(children) { + visibility: hidden; + opacity: 0; +} + +vaadin-side-nav::part(toggle-button) { + font-size: var(--lumo-font-size-s); + font-weight: normal; /* TODO seems to be missing from Lumo */ +} + +vaadin-side-nav-item::part(link) { + font-weight: 600; + min-height: 0; + overflow: hidden; + box-sizing: border-box; + gap: 0; + /* Same padding as for buttons */ + padding: calc((var(--lumo-size-m) - var(--lumo-icon-size-s)) / 2 - var(--view-border-width)); + padding-inline-start: calc((var(--lumo-size-m) - var(--lumo-icon-size-s)) / 2 - var(--view-border-width) + var(--_child-indent, 0px)); +} + +vaadin-side-nav-item::part(content) { + border-style: solid; + border-width: var(--view-border-width); + border-color: transparent; + border-radius: var(--lumo-border-radius-m); + color: var(--lumo-contrast-80pct); + box-sizing: border-box; + min-height: var(--lumo-size-m); + min-width: 0; /* TODO missing from core styles, allow the items to shrink */ + position: relative; /* Allow absolute positioning of badges. The backdrop-filter applied on :hover and :active does the same as well */ + transition: background-color 200ms, backdrop-filter 200ms, -webkit-backdrop-filter 200ms; +} + +vaadin-side-nav-item::part(content):hover { + background: var(--lumo-tint-5pct); + -webkit-backdrop-filter: brightness(1.02); + backdrop-filter: brightness(1.02); +} + +/* TODO this seems like incorrect styles in Lumo */ +vaadin-side-nav-item::part(link):active:focus { + background-color: transparent; +} +/* Should be this instead */ +vaadin-side-nav-item::part(content):active { + background: var(--lumo-tint-10pct); +} + +vaadin-side-nav-item[current]::part(content) { + color: var(--lumo-header-text-color); + /* background: var(--lumo-contrast-10pct); + border-color: var(--lumo-contrast-5pct); */ + background: var(--lumo-tint-5pct); + border-color: var(--lumo-contrast-10pct); + background-clip: var(--view-background-clip); + -webkit-backdrop-filter: brightness(1.04); + backdrop-filter: brightness(1.04); +} + +vaadin-side-nav-item[has-children]::part(content) { + padding-inline-end: 0; +} + +vaadin-side-nav-item::part(toggle-button) { + margin-inline-end: 0; +} + +vaadin-side-nav-item vaadin-icon { + color: inherit; + opacity: 0.7; + /* TODO slightly problematic default in Lumo, with 0.1em padding */ + padding: 0; + width: var(--lumo-icon-size-s); + height: var(--lumo-icon-size-s); +} + +vaadin-side-nav vaadin-side-nav-item:is([current], :hover) vaadin-icon { + opacity: 0.8; +} + +:is(vaadin-side-nav, vaadin-side-nav-item).small { + font-size: var(--lumo-font-size-s); +} + +vaadin-side-nav + vaadin-side-nav { + margin-top: var(--lumo-space-s); +} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/styles.css b/theme/src/main/resources/META-INF/resources/themes/starpass/styles.css index c7310fe..764f3be 100644 --- a/theme/src/main/resources/META-INF/resources/themes/starpass/styles.css +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/styles.css @@ -1,205 +1,274 @@ -@import "typography.css"; -@import "component-styles/badge.css"; -@import "component-styles/vaadin-accordion.css"; -@import "component-styles/vaadin-app-layout.css"; -@import "component-styles/vaadin-avatar.css"; -@import "component-styles/vaadin-button.css"; -@import "component-styles/vaadin-checkbox.css"; -@import "component-styles/vaadin-combo-box.css"; -@import "component-styles/vaadin-confirm-dialog.css"; -@import "component-styles/vaadin-context-menu.css"; -@import "component-styles/vaadin-crud.css"; -@import "component-styles/vaadin-custom-field.css"; -@import "component-styles/vaadin-date-picker.css"; -@import "component-styles/vaadin-date-time-picker.css"; -@import "component-styles/vaadin-details.css"; -@import "component-styles/vaadin-dialog.css"; -@import "component-styles/vaadin-email-field.css"; -@import "component-styles/vaadin-grid.css"; -@import "component-styles/vaadin-grid-pro.css"; -@import "component-styles/vaadin-list-box.css"; -@import "component-styles/vaadin-login-form.css"; -@import "component-styles/vaadin-menu-bar.css"; -@import "component-styles/vaadin-message-input.css"; -@import "component-styles/vaadin-message-list.css"; -@import "component-styles/vaadin-multi-select-combo-box.css"; -@import "component-styles/vaadin-notification.css"; -@import "component-styles/vaadin-number-field.css"; -@import "component-styles/vaadin-password-field.css"; -@import "component-styles/vaadin-progress-bar.css"; -@import "component-styles/vaadin-radio-button.css"; -@import "component-styles/vaadin-rich-text-editor.css"; -@import "component-styles/vaadin-scroller.css"; -@import "component-styles/vaadin-select.css"; -@import "component-styles/vaadin-tabs.css"; -@import "component-styles/vaadin-text-area.css"; -@import "component-styles/vaadin-text-field.css"; -@import "component-styles/vaadin-time-picker.css"; -@import "component-styles/vaadin-tooltip.css"; -@import "component-styles/vaadin-tree-grid.css"; -@import "component-styles/vaadin-upload.css"; - -@font-face { - font-family: 'Satoshi'; - src: url('./fonts/Satoshi-Variable.woff2') format('woff2'); - font-weight: 300 900; - font-display: swap; - font-style: normal; -} - -html, -html[theme] { - --primary-h: 226; - --primary-s: 70%; - --primary-l: 50%; - --primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l)); - --lumo-primary-color: var(--primary); - --lumo-primary-color-50pct: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / .75); - --lumo-primary-color-10pct: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / .13); - --lumo-primary-text-color: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) - 3%)); - - --primary-alt: hsl(calc(var(--primary-h) - 30) var(--primary-s) var(--primary-l)); - - --base-l: 100%; - --base: hsl(0 0% var(--base-l) / 1); - --base-trans: hsl(0 0% var(--base-l) / .8); - --main-grad: linear-gradient(to bottom right, var(--base), var(--primary) 50%, var(--primary-alt) 100%); - - --bg: - radial-gradient(83% 132% at 76% 20%, transparent 84%, var(--base-trans) 100%), - linear-gradient(var(--base-trans), var(--base-trans)), - radial-gradient(62% 100% at 25% 80%, var(--primary) 0%, transparent 100%), - var(--main-grad); - - --blend: color-burn; - background-blend-mode: normal, normal, var(--blend), normal; - background: var(--bg); - - --lumo-shade-5pct: hsla(var(--primary-h), 61%, 25%, 0.05); - --lumo-shade-10pct: hsla(var(--primary-h), 57%, 24%, 0.1); - --lumo-shade-20pct: hsla(var(--primary-h), 53%, 23%, 0.16); - --lumo-shade-30pct: hsla(var(--primary-h), 50%, 22%, 0.26); - --lumo-shade-40pct: hsla(var(--primary-h), 47%, 21%, 0.38); - --lumo-shade-50pct: hsla(var(--primary-h), 45%, 20%, 0.52); - --lumo-shade-60pct: hsla(var(--primary-h), 43%, 19%, 0.6); - --lumo-shade-70pct: hsla(var(--primary-h), 42%, 18%, 0.69); - --lumo-shade-80pct: hsla(var(--primary-h), 41%, 17%, 0.83); - --lumo-shade-90pct: hsla(var(--primary-h), 40%, 16%, 0.94); - --lumo-shade: hsl(var(--primary-h), 35%, 15%); - - --lumo-font-family: Satoshi, system-ui, ui-sans-serif, sans-serif; - - --vaadin-input-field-background: var(--lumo-contrast-5pct); - --vaadin-input-field-border-width: 1px; - --vaadin-input-field-border-color: var(--lumo-contrast-20pct); - - --lumo-border-radius-s: 5px; - --lumo-border-radius-m: 7px; - --lumo-border-radius-l: 12px; - - --lumo-icon-size-s: 16px; - --lumo-icon-size-m: 20px; - --lumo-icon-size-l: 24px; -} - -html[theme~=dark] { - --base-l: 0%; - --main-grad: linear-gradient(to bottom right, var(--primary-alt), var(--primary) 50%, var(--base) 100%); - --blend: color-dodge; - --lumo-primary-text-color: hsl(var(--primary-h) calc(var(--primary-s) + 30%) calc(var(--primary-l) + 30%)); - --lumo-base-color: hsl(var(--primary-h) calc(var(--primary-s) / 6) 10%); - - --lumo-shade-5pct: hsla(var(--primary-h), 0%, 0%, 0.07); - --lumo-shade-10pct: hsla(var(--primary-h), 4%, 2%, 0.15); - --lumo-shade-20pct: hsla(var(--primary-h), 8%, 4%, 0.23); - --lumo-shade-30pct: hsla(var(--primary-h), 12%, 6%, 0.32); - --lumo-shade-40pct: hsla(var(--primary-h), 16%, 8%, 0.41); - --lumo-shade-50pct: hsla(var(--primary-h), 20%, 10%, 0.5); - --lumo-shade-60pct: hsla(var(--primary-h), 24%, 12%, 0.6); - --lumo-shade-70pct: hsla(var(--primary-h), 28%, 13%, 0.7); - --lumo-shade-80pct: hsla(var(--primary-h), 32%, 13%, 0.8); - --lumo-shade-90pct: hsla(var(--primary-h), 33%, 13%, 0.9); - --lumo-shade: hsl(var(--primary-h), 33%, 13%); - - --lumo-tint-5pct: hsla(var(--primary-h), 65%, 85%, 0.06); - --lumo-tint-10pct: hsla(var(--primary-h), 60%, 80%, 0.14); - --lumo-tint-20pct: hsla(var(--primary-h), 64%, 82%, 0.23); - --lumo-tint-30pct: hsla(var(--primary-h), 69%, 84%, 0.32); - --lumo-tint-40pct: hsla(var(--primary-h), 73%, 86%, 0.41); - --lumo-tint-50pct: hsla(var(--primary-h), 78%, 88%, 0.5); - --lumo-tint-60pct: hsla(var(--primary-h), 82%, 90%, 0.58); - --lumo-tint-70pct: hsla(var(--primary-h), 87%, 92%, 0.69); - --lumo-tint-80pct: hsla(var(--primary-h), 91%, 94%, 0.8); - --lumo-tint-90pct: hsla(var(--primary-h), 96%, 96%, 0.9); - --lumo-tint: hsl(var(--primary-h), 100%, 98%); +@import "./fonts/Satoshi.css"; +@import "./tokens.css"; +@import "./accordion.css"; +@import "./badge.css"; +@import "./button.css"; +@import "./checkbox.css"; +@import "./confirm-dialog.css"; +@import "./date-picker.css"; +@import "./grid.css"; +@import "./menu-bar.css"; +@import "./message-input.css"; +@import "./message-list.css"; +@import "./progress-bar.css"; +@import "./radio-button.css"; +@import "./select.css"; +@import "./side-nav.css"; +@import "./tabs.css"; +@import "./text-input.css"; + +html { + background: var(--bg); + /* background: url(bg.png), hsl(var(--base-h) var(--base-s) var(--base-l)); + background-blend-mode: overlay; + background-size: cover; + overflow: hidden; */ +} + +:focus-visible { + outline-color: var(--vaadin-focus-ring-color); + outline-width: var(--vaadin-focus-ring-width); } -#outlet { - display: flex; - perspective: 1000px;; +/* TODO seems like a bug in Flow */ +vaadin-connection-indicator:not([offline]) { + pointer-events: none; } -:not(vaadin-button)::part(label) { - color: var(--lumo-body-text-color); +.v-status-message { + box-sizing: border-box; } -:not(vaadin-button)[focused]::part(label) { - color: var(--lumo-header-text-color); +/* TODO this is mainly intended for field labels */ +:not(vaadin-button, vaadin-menu-bar-button, vaadin-select-value-button)::part(label) { + color: inherit; } -vaadin-button { - font-weight: 600; +:is(h1, h2, h3, h4, h5, h6) { + text-wrap: balance; } -vaadin-button[theme~=primary] { - font-weight: 700; +h1 { + font-weight: 850; + line-height: var(--lumo-line-height-xl); } -vaadin-grid { - background-color: transparent; +:is(h2, h3) { + font-weight: 800; + line-height: var(--lumo-line-height-l); } -vaadin-grid::part(body-cell) { - background-color: transparent; +h4 { + font-weight: 650; + line-height: var(--lumo-line-height-m); } -vaadin-grid::part(header-cell) { - background-color: var(--lumo-tint-10pct); + +:is(h5, h6) { + font-weight: 600; + line-height: var(--lumo-line-height-s); } ::part(overlay) { - background: radial-gradient(circle at 25% 0%, hsl(0 0% 100% / 0.9), transparent 50%), hsl(0 0% 98% / 0.7); - background-origin: border-box; - box-shadow: inset 0 0 0 1px hsl(0 0% 100% / 0.06), 0 0 0 1px hsl(0 0% 0% / 0.06), var(--lumo-box-shadow-l); - -webkit-backdrop-filter: blur(8px); - backdrop-filter: blur(8px); + background: var(--view-glow), hsl(var(--base-h) var(--base-s) max(calc(var(--base-l) + 7%), 8%)); + box-shadow: inset 0 0.5px 0 0 var(--lumo-tint-5pct), inset 0 0 0 0.5px var(--lumo-tint-10pct), 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-l); + -webkit-backdrop-filter: blur(var(--blur-radius)); + backdrop-filter: blur(var(--blur-radius)); + font-weight: inherit; } -[theme~=dark] ::part(overlay) { - background: radial-gradient(circle at 25% 0%, hsl(0 0% 100% / 0.05), transparent 50%), hsl(var(--primary-h) calc(var(--primary-s) / 5) 20% / 0.5); - background-origin: border-box; +vaadin-notification-card[theme~=contrast]::part(overlay) { + background: var(--lumo-contrast); } vaadin-item::part(content), -vaadin-menu-bar-item::part(content) { - display: flex; - align-items: center; - gap: var(--lumo-space-s); - font-weight: 500; +vaadin-menu-bar-item::part(content), +vaadin-context-menu-item::part(content), +vaadin-select-item::part(content), +vaadin-combo-box-item::part(content), +vaadin-multi-select-combo-box-item::part(content) { + display: flex; + align-items: center; + gap: 0.75rem; + font-weight: 550; +} + +vaadin-menu-bar-item { + border-radius: var(--lumo-border-radius-s); +} + +vaadin-menu-bar-item .hint { + color: var(--lumo-secondary-text-color); + margin-inline-start: auto; + font-weight: 450; + display: flex; + align-items: center; + gap: var(--lumo-space-xs); +} + +vaadin-menu-bar-item.uncheckable { + padding-inline-start: var(--lumo-space-s); +} + +vaadin-menu-bar-item.uncheckable::part(checkmark) { + display: none; } vaadin-select.minimal { - --vaadin-input-field-border-width: 0px; - --vaadin-input-field-background: transparent; + --vaadin-input-field-border-width: 0px; + --vaadin-input-field-background: transparent; +} + +vaadin-menu-bar.icon-only vaadin-menu-bar-item> :not(vaadin-icon) { + display: none; +} + +vaadin-avatar::part(abbr) { + font-weight: 650; +} + +vaadin-dialog-overlay::part(header), +vaadin-dialog-overlay::part(footer) { + background: transparent; } -vaadin-drawer-toggle { - color: var(--lumo-tertiary-text-color); +/* :is(vaadin-select-overlay, vaadin-context-menu-overlay, vaadin-menu-bar-overlay, vaadin-combo-box-overlay, vaadin-multi-select-combo-box-overlay, vaadin-time-picker-overlay) :is([role=menuitem], [role=option]):is(:hover, [expanded]), +vaadin-item:hover { + background-color: var(--lumo-contrast-10pct); +} */ + +vaadin-month-calendar::part(date), +vaadin-month-calendar::part(weekday), +vaadin-date-picker-year::part(year-number) { + font-weight: 480; } -vaadin-menu-bar.icon-only vaadin-menu-bar-item > :not(vaadin-icon) { - display: none; +vaadin-month-calendar::part(month-header) { + font-size: var(--lumo-font-size-m); + font-weight: 600; +} + +/* TODO would need a dedicated custom property to control the hover background color */ +/* vaadin-month-calendar::part(date)::before { + --lumo-primary-color-10pct: var(--lumo-contrast-10pct); +} */ + +@media (prefers-reduced-motion) { + + :is([opening], [closing]), + :is([opening], [closing])::part(overlay) { + animation: none; + } + + vaadin-dialog-overlay:is([opening], [closing]), + vaadin-dialog-overlay:is([opening], [closing])::part(overlay) { + animation: none; + } +} + +vaadin-tooltip-overlay { + /* TODO should probably be the default style. Without this, tooltips close to the viewport edge can get scrollbars. */ + inset: 0; } vaadin-tooltip-overlay::part(overlay) { - font-weight: 500; + font-weight: 500; +} + +vaadin-icon.small { + width: var(--lumo-icon-size-s); + height: var(--lumo-icon-size-s); +} + +@media (max-width: 420px), (max-height: 420px) { + :is(vaadin-context-menu-overlay, vaadin-menu-bar-overlay, vaadin-select-overlay)::part(overlay) { + max-height: 80vh; + } +} + +vaadin-grid:not([theme~=no-border]), +vaadin-rich-text-editor:not([theme~=no-border]) { + border-radius: var(--lumo-border-radius-m); + overflow: hidden; + border-color: var(--lumo-contrast-10pct); +} + +vaadin-context-menu { + display: contents; +} + +vaadin-date-time-picker vaadin-date-picker { + margin-inline-end: calc(var(--vaadin-input-field-border-width) * -1); + position: relative; +} + +vaadin-date-time-picker vaadin-date-picker::after { + content: ""; + position: absolute; + height: 100%; + width: var(--vaadin-input-field-border-width); + background: var(--lumo-base-color); + inset-inline-end: 0; +} + +/* TODO tab key travels through dev-tools even though it's hidden */ +vaadin-dev-tools { + display: none; +} + +.star-filled { + color: rgb(224, 190, 0) !important; +} + +hr { + margin: 0; +} + +:is(vaadin-menu-bar-overlay, vaadin-context-menu-overlay, vaadin-select-overlay) hr { + margin: var(--lumo-space-s) var(--lumo-space-xs); +} + +a:where(:any-link) { + color: var(--accent-text); +} + +.boxed-icon { + padding: var(--lumo-space-m); + box-sizing: content-box; + background-color: var(--lumo-contrast-10pct); + border-radius: var(--lumo-border-radius-s); +} + +vaadin-notification-card[theme~=about-dialog-hint]::part(overlay) { + margin-inline-start: var(--lumo-size-xl); +} + +nav.sidebar { + padding: 0 var(--lumo-space-xs); +} + +nav.sidebar>header, +nav.sidebar>header>span { + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + min-width: 0; +} + +nav.sidebar>header { + font-weight: 700; + font-size: var(--lumo-font-size-l); + min-height: var(--lumo-size-m); + display: flex; + align-items: center; + justify-content: space-between; + padding: 4px; /* Room for focus outlines on buttons */ + padding-bottom: var(--lumo-space-s); + padding-inline-start: var(--lumo-space-s); + margin-top: -4px; + margin-inline-end: -4px; +} + +nav.sidebar>vaadin-side-nav { + margin-bottom: var(--lumo-space-s); } diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/tabs.css b/theme/src/main/resources/META-INF/resources/themes/starpass/tabs.css new file mode 100644 index 0000000..7786977 --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/tabs.css @@ -0,0 +1,79 @@ +vaadin-tabs { + background: var(--lumo-contrast-10pct); + border-radius: calc(var(--lumo-border-radius-s) + 3px); + min-height: var(--lumo-size-m); + box-shadow: none; +} + +vaadin-tabs::part(tabs) { + padding: 3px; + margin: 0; + min-height: inherit; + box-sizing: border-box; +} + +/* TODO seems like a missing style in Lumo */ +vaadin-tabsheet { + box-sizing: border-box; +} + +vaadin-tabsheet::part(tabs-container) { + box-shadow: none; + padding: var(--lumo-space-m); +} + +vaadin-tabsheet::part(content) { + padding: 0; +} + +vaadin-tabsheet > vaadin-tabs { + margin: 0; +} + +vaadin-tabsheet[theme~=bordered] { + border-color: var(--lumo-contrast-10pct); + border-top-left-radius: calc(var(--lumo-border-radius-s) + var(--lumo-space-s)); + border-top-right-radius: calc(var(--lumo-border-radius-s) + var(--lumo-space-s)); +} + +vaadin-tabsheet[overflow~=top]::part(content) { + border-top: 1px solid var(--lumo-contrast-10pct); +} + +vaadin-tabsheet:not([theme~=bordered])[overflow~=bottom]::part(content) { + border-bottom: 1px solid var(--lumo-contrast-10pct); +} + +vaadin-tab::before, +vaadin-tab::after { + display: none; +} + +vaadin-tab { + font-weight: 600; + border-radius: var(--lumo-border-radius-s); + transition: + color 160ms, + background-color 160ms, + box-shadow 60ms, + transform 200ms, + -webkit-backdrop-filter 200ms, + backdrop-filter 200ms; + padding: var(--lumo-space-xs) var(--lumo-space-m); +} + +vaadin-tab[selected] { + color: var(--lumo-header-text-color); + background-color: var(--lumo-tint-30pct); + -webkit-backdrop-filter: brightness(1.06); + backdrop-filter: brightness(1.06); +} + +vaadin-tab[active] { + transform: scale(0.98); + transition-duration: 50ms; +} + +vaadin-tab[selected]:not([focus-ring]) { + box-shadow: 0 0 0 1px var(--lumo-shade-5pct), 0 1px 1px 0 var(--lumo-shade-5pct); +} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/text-input.css b/theme/src/main/resources/META-INF/resources/themes/starpass/text-input.css new file mode 100644 index 0000000..26a0ba4 --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/text-input.css @@ -0,0 +1,18 @@ +html { + --vaadin-input-field-background: var(--lumo-contrast-5pct); + --vaadin-input-field-border-width: 1px; + --vaadin-input-field-border-color: var(--lumo-contrast-30pct); +} + +:is(vaadin-text-field, vaadin-password-field, vaadin-combo-box, vaadin-date-picker, vaadin-time-picker, vaadin-select, vaadin-number-field, vaadin-email-field, vaadin-text-area) { + padding: 0; +} + +:is(vaadin-text-field, vaadin-password-field, vaadin-combo-box, vaadin-date-picker, vaadin-time-picker, vaadin-select, vaadin-number-field, vaadin-email-field, vaadin-text-area)[focused]::part(input-field) { + box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); +} + +vaadin-text-area::part(input-field) { + padding-top: calc((var(--lumo-text-field-size) - var(--lumo-line-height-s)) / 2); + padding-bottom: calc((var(--lumo-text-field-size) - var(--lumo-line-height-s)) / 2); +} diff --git a/theme/src/main/resources/META-INF/resources/themes/starpass/tokens.css b/theme/src/main/resources/META-INF/resources/themes/starpass/tokens.css new file mode 100644 index 0000000..187ecc1 --- /dev/null +++ b/theme/src/main/resources/META-INF/resources/themes/starpass/tokens.css @@ -0,0 +1,224 @@ +html, +html[theme] { + --base-h: 220; + --base-s: 35%; + --base-l: 90%; + + --accent-h: 218; + --accent-s: 80%; + --accent-l: 47%; + --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l)); + --accent-10pct: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.12); + --accent-text: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 3%)); + --accent-contrast: hsl(0 0% calc(100% - 100 * clamp(0%, var(--accent-l) - 50%, 1%))); + accent-color: var(--accent); + + --grad1: linear-gradient(to bottom right, + hsl(var(--base-h) calc(var(--base-s) * 1.5) calc(var(--base-l) + 6%)) 20%, + hsl(var(--base-h) var(--base-s) var(--base-l)) 50%, + hsl(calc(var(--base-h) - 30) var(--base-s) calc(33% + var(--base-l) / 1.5)) 100%); + --grad2: radial-gradient(50% 80% at 25% 70%, + hsl(calc(var(--base-h) - 5) calc(var(--base-s) * 1.5) calc(var(--base-l) - 10%) / 0.4) 0%, + transparent 100%); + --grad3: radial-gradient(83% 132% at 76% 20%, + transparent 84%, + hsl(var(--base-h) var(--base-s) calc(var(--base-l) + 10%) / 0.8) 100%); + --bg: var(--grad3), var(--grad2), var(--grad1), hsl(var(--base-h) var(--base-s) var(--base-l)); + + --lumo-base-color: hsl(var(--base-h) var(--base-s) 100%); + --lumo-base-color-90pct: hsl(var(--base-h) var(--base-s) 100% / 0.9); + --lumo-base-color-80pct: hsl(var(--base-h) var(--base-s) 100% / 0.8); + --lumo-base-color-70pct: hsl(var(--base-h) var(--base-s) 99% / 0.7); + --lumo-base-color-60pct: hsl(var(--base-h) var(--base-s) 99% / 0.6); + + --lumo-disabled-text-color: var(--lumo-contrast-40pct); + + --lumo-primary-contrast-color: var(--lumo-base-color); + --lumo-primary-color: var(--lumo-contrast-90pct); + --lumo-primary-color-50pct: var(--lumo-contrast-70pct); + --lumo-primary-color-10pct: var(--lumo-contrast-10pct); + --lumo-primary-text-color: var(--lumo-body-text-color); + + --vaadin-focus-ring-color: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / .75); + + --lumo-error-text-color: hsl(342 70% 43%); + --lumo-error-color: hsl(342 68% 51%); + --lumo-error-color-10pct: hsl(342 68% 51% / 0.13); + --lumo-error-color-50pct: hsl(342 68% 51% / 0.6); + + --lumo-success-text-color: hsl(160 98% 22%); + --lumo-success-color: hsl(160 88% 27%); + --lumo-success-color-10pct: hsl(160 88% 27% / 0.14); + --lumo-success-color-50pct: hsl(160 88% 27% / 0.6); + + --lumo-tint-5pct: hsla(0, 0%, 100%, 0.19); + --lumo-tint-10pct: hsla(0, 0%, 100%, 0.29); + --lumo-tint-20pct: hsla(0, 0%, 100%, 0.38); + --lumo-tint-30pct: hsla(0, 0%, 100%, 0.45); + --lumo-tint-40pct: hsla(0, 0%, 100%, 0.51); + --lumo-tint-50pct: hsla(0, 0%, 100%, 0.57); + --lumo-tint-60pct: hsla(0, 0%, 100%, 0.66); + --lumo-tint-70pct: hsla(0, 0%, 100%, 0.74); + --lumo-tint-80pct: hsla(0, 0%, 100%, 0.82); + --lumo-tint-90pct: hsla(0, 0%, 100%, 0.9); + --lumo-tint: #fff; + + --lumo-shade-2pct: hsl(var(--base-h) min(calc(var(--base-s) * 1.2), 35%) 41% / 0.04); + --lumo-shade-5pct: hsl(var(--base-h) min(calc(var(--base-s) * 1.12), 35%) 40% / 0.06); + --lumo-shade-10pct: hsl(var(--base-h) min(calc(var(--base-s) * 1.08), 35%) 39% / 0.09); + --lumo-shade-20pct: hsl(var(--base-h) min(calc(var(--base-s) * 1.04), 35%) 37% / 0.15); + --lumo-shade-30pct: hsl(var(--base-h) min(calc(var(--base-s) * 1), 35%) 34% / 0.22); + --lumo-shade-40pct: hsl(var(--base-h) min(calc(var(--base-s) * 0.96), 35%) 31% / 0.38); + --lumo-shade-50pct: hsl(var(--base-h) min(calc(var(--base-s) * 0.92), 35%) 28% / 0.55); + --lumo-shade-60pct: hsl(var(--base-h) min(calc(var(--base-s) * 0.9), 35%) 25% / 0.68); + --lumo-shade-70pct: hsl(var(--base-h) min(calc(var(--base-s) * 0.9), 35%) 22% / 0.8); + --lumo-shade-80pct: hsl(var(--base-h) min(calc(var(--base-s) * 0.8), 35%) 19% / 0.91); + --lumo-shade-90pct: hsl(var(--base-h) min(calc(var(--base-s) * 0.8), 35%) 16% / 0.98); + --lumo-shade: hsl(var(--base-h) min(calc(var(--base-s) * 0.8), 35%) 12%); + + --lumo-font-family: Satoshi, system-ui, ui-sans-serif, sans-serif; + font-weight: 430; + + --lumo-font-size-xxxl: 2rem; + --lumo-font-size-xxl: 1.5rem; + --lumo-font-size-xl: 1.25rem; + --lumo-font-size-l: 1.0625rem; + --lumo-font-size-m: 0.9375rem; + --lumo-font-size-s: 0.875rem; + --lumo-font-size-xs: 0.75rem; + --lumo-font-size-xxs: 0.625rem; + + --lumo-line-height-xl: 2rem; + --lumo-line-height-l: 1.75rem; + --lumo-line-height-m: 1.625rem; + --lumo-line-height-s: 1.375rem; + --lumo-line-height-xs: 1.125rem; + + --lumo-border-radius-l: 12px; + --lumo-border-radius-m: 7px; + --lumo-border-radius-s: 5px; + + --lumo-size-xl: 3rem; + --lumo-size-l: 2.5rem; + --lumo-size-m: 2.125rem; + --lumo-size-s: 1.875rem; + --lumo-size-xs: 1.625rem; + + /* TODO 1lh would be the natural choice for all of these, but it's harder to use with calc() */ + --lumo-icon-size-l: var(--lumo-line-height-m); + --lumo-icon-size-m: var(--lumo-line-height-s); + --lumo-icon-size-s: var(--lumo-line-height-xs); + + --view-glow: radial-gradient(circle at 25% 0%, hsl(0 0% 100% / 0.3), transparent 50%); + --view-background: var(--view-glow), hsl(var(--base-h) var(--base-s) max(calc(var(--base-l) + 10%), 90%) / 0.8); + --view-background-clip: padding-box; + --view-border-width: 1px; + --view-border-color: var(--lumo-contrast-10pct) var(--lumo-contrast-10pct) var(--lumo-contrast-20pct); + --view-box-shadow: 0 1px 1px 0 var(--lumo-shade-10pct); + --view-inset: 1vmax; + + --vaadin-button-border-width: 1px; + + --blur-radius: 20px; +} + +@media (pointer: coarse) { + html, + html[theme] { + --lumo-font-size-xxxl: 2rem; + --lumo-font-size-xxl: 1.75rem; + --lumo-font-size-xl: 1.5rem; + --lumo-font-size-l: 1.25rem; + --lumo-font-size-m: 1.0625rem; + --lumo-font-size-s: 0.9375rem; + --lumo-font-size-xs: 0.875rem; + --lumo-font-size-xxs: 0.75rem; + + --lumo-line-height-xl: 2rem; + --lumo-line-height-l: 1.75rem; + --lumo-line-height-m: 1.5rem; + --lumo-line-height-s: 1.375rem; + --lumo-line-height-xs: 1.25rem; + + --lumo-size-xl: 3.75rem; + --lumo-size-l: 3.125rem; + --lumo-size-m: 2.75rem; + --lumo-size-s: 2.25rem; + --lumo-size-xs: 1.75rem; + } +} + +[theme~=dark], +html[theme~=dark] { + --base-l: 6%; + --base-s: 22%; + + --grad1: linear-gradient(to bottom right, + hsl(var(--base-h) var(--base-s) calc(var(--base-l) + 3%)) 20%, + hsl(var(--base-h) var(--base-s) calc(var(--base-l) + 0%)) 50%, + hsl(calc(var(--base-h) - 10) calc(var(--base-s) * 1.2) var(--base-l)) 100%); + --grad2: radial-gradient(50% 80% at 25% 70%, + hsl(calc(var(--base-h) - 10) calc(var(--base-s) * 1.5) calc(var(--base-l) + 10%) / 0.4) 0%, + transparent 100%); + --grad3: radial-gradient(83% 132% at 76% 20%, + transparent 84%, + hsl(var(--base-h) var(--base-s) calc(var(--base-l) - 6%) / 0.8) 100%); + + --lumo-base-color: hsl(var(--base-h) var(--base-s) max(calc(var(--base-l) + 5%), 8%) / 1); + --lumo-base-color-90pct: hsl(var(--base-h) var(--base-s) max(calc(var(--base-l) + 5%), 8%) / 0.9); + --lumo-base-color-80pct: hsl(var(--base-h) var(--base-s) max(calc(var(--base-l) + 5%), 8%) / 0.8); + --lumo-base-color-70pct: hsl(var(--base-h) var(--base-s) max(calc(var(--base-l) + 5%), 8%) / 0.7); + --lumo-base-color-60pct: hsl(var(--base-h) var(--base-s) max(calc(var(--base-l) + 5%), 8%) / 0.6); + + --accent-h: 210; + --accent-10pct: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.18); + --accent-text: hsl(calc(var(--accent-h) - 3) calc(var(--accent-s) * 1.25) calc(var(--accent-l) * 1.3)); + + --vaadin-focus-ring-color: hsl(var(--accent-h) calc(var(--accent-s) * 1.25) calc(var(--accent-l) * 1.3) / .65); + + --lumo-primary-contrast-color: var(--lumo-base-color); + --lumo-primary-color: var(--lumo-contrast-90pct); + --lumo-primary-color-50pct: var(--lumo-contrast-70pct); + --lumo-primary-color-10pct: var(--lumo-contrast-10pct); + --lumo-primary-text-color: var(--lumo-body-text-color); + + --lumo-error-text-color: hsl(342 85% 70%); + --lumo-error-color: hsl(342 68% 51%); + --lumo-error-color-10pct: hsl(342 68% 61% / 0.16); + --lumo-error-color-50pct: hsl(342 68% 61% / 0.65); + + --lumo-success-text-color: hsl(160 88% 52%); + --lumo-success-color: hsl(160 78% 31%); + --lumo-success-color-10pct: hsl(160 78% 37% / 0.18); + --lumo-success-color-50pct: hsl(160 78% 37% / 0.65); + + --lumo-shade-2pct: hsl(var(--base-h) calc(var(--base-s) * 0.1) 0% / 0.08); + --lumo-shade-5pct: hsl(var(--base-h) calc(var(--base-s) * 0.1) 0% / 0.1); + --lumo-shade-10pct: hsl(var(--base-h) calc(var(--base-s) * 0.1) 1% / 0.2); + --lumo-shade-20pct: hsl(var(--base-h) calc(var(--base-s) * 0.1) 1% / 0.3); + --lumo-shade-30pct: hsl(var(--base-h) calc(var(--base-s) * 0.1) 3% / 0.4); + --lumo-shade-40pct: hsl(var(--base-h) calc(var(--base-s) * 0.1) 4% / 0.5); + --lumo-shade-50pct: hsl(var(--base-h) calc(var(--base-s) * 0.1) 5% / 0.6); + --lumo-shade-60pct: hsl(var(--base-h) calc(var(--base-s) * 0.1) 5% / 0.7); + --lumo-shade-70pct: hsl(var(--base-h) calc(var(--base-s) * 0.11) 5% / 0.8); + --lumo-shade-80pct: hsl(var(--base-h) calc(var(--base-s) * 0.12) 5% / 0.9); + --lumo-shade-90pct: hsl(var(--base-h) calc(var(--base-s) * 0.13) 5% / 0.95); + --lumo-shade: hsl(var(--base-h) calc(var(--base-s) * 0.1) 5%); + + --lumo-tint-5pct: hsl(var(--base-h) calc(var(--base-s) / 2) 65% / 0.06); + --lumo-tint-10pct: hsl(var(--base-h) calc(var(--base-s) / 2) 66% / 0.12); + --lumo-tint-20pct: hsl(var(--base-h) calc(var(--base-s) / 2) 67% / 0.18); + --lumo-tint-30pct: hsl(var(--base-h) calc(var(--base-s) / 2) 69% / 0.29); + --lumo-tint-40pct: hsl(var(--base-h) calc(var(--base-s) / 2) 71% / 0.4); + --lumo-tint-50pct: hsl(var(--base-h) calc(var(--base-s) / 2) 74% / 0.51); + --lumo-tint-60pct: hsl(var(--base-h) calc(var(--base-s) / 2) 80% / 0.62); + --lumo-tint-70pct: hsl(var(--base-h) calc(var(--base-s) / 2) 83% / 0.75); + --lumo-tint-80pct: hsl(var(--base-h) calc(var(--base-s) / 2) 87% / 0.9); + --lumo-tint-90pct: hsl(var(--base-h) calc(var(--base-s) / 2) 94% / 0.96); + --lumo-tint: hsl(var(--base-h) calc(var(--base-s) / 2) 99%); + + --view-glow: radial-gradient(circle at 25% 0%, hsl(0 0% calc(30% + var(--base-l) * 4) / 0.1), transparent 50%); + --view-background: var(--view-glow), hsl(var(--base-h) var(--base-s) max(calc(var(--base-l) + 7%), 8%) / 0.7); + --view-background-clip: border-box; + --view-border-color: var(--lumo-contrast-10pct) var(--lumo-contrast-5pct) var(--lumo-contrast-5pct); +}