Make theming easier without Lumo

Author: sissbruecker

src/vcf-anchor-nav-section.js

@@ -17,6 +17,11 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin';
  * ----------------|-------------|-------------
  * `--anchor-nav-section-border-width` | `border-width` of section. | `0`
  * `--anchor-nav-section-border-color` | `border-color` of section. | `var(--lumo-contrast-10pct)`
+ * `--anchor-nav-section-header-padding` | `padding` of the "header" part. | `var(--lumo-space-m)`
+ * `--anchor-nav-section-content-padding` | `padding` of the "content" part. | `var(--lumo-space-m)`
+ *
+ * Some of the custom properties rely on Lumo design tokens for colors and spacing. When not using the Lumo theme, those
+ * need to be re-defined in order to ensure a proper look and feel.
  *
  * The following shadow DOM parts are available for styling:
  *
@@ -43,6 +48,8 @@ class AnchorNavSectionElement extends ElementMixin(LitElement) {
       :host {
         --anchor-nav-section-border-width: 0;
         --anchor-nav-section-border-color: var(--lumo-contrast-10pct);
+        --anchor-nav-section-header-padding: var(--lumo-space-m);
+        --anchor-nav-section-content-padding: var(--lumo-space-m);
         outline: none;
       }
 
@@ -52,11 +59,11 @@ class AnchorNavSectionElement extends ElementMixin(LitElement) {
 
       ::slotted([slot='header']) {
         margin: 0;
-        padding: var(--lumo-space-m);
+        padding: var(--anchor-nav-section-header-padding);
       }
 
       #content {
-        padding: var(--lumo-space-m);
+        padding: var(--anchor-nav-section-content-padding);
       }
     `;
   }

src/vcf-anchor-nav.js

@@ -27,9 +27,14 @@ import '@vaadin/tabs/vaadin-tab';
  * Custom property | Description | Default
  * ----------------|-------------|-------------
  * `--anchor-nav-inner-max-width` | `max-width` of "container" part. | `auto`
- * `--anchor-nav-inner-background` | `background` of "container" part. | `#ffffff`
+ * `--anchor-nav-inner-background` | `background` of "container" part. | `var(--lumo-base-color)`
  * `--anchor-nav-inner-padding` | `padding` of "container" part. | `0 0 20vh 0`
+ * `--anchor-nav-tabs-background` | `background` of "tabs" part. | `var(--lumo-base-color)`
  * `--anchor-nav-tabs-stuck-box-shadow` | `box-shadow` of "tabs" part when stuck to top of viewport. | `0 4px 5px -6px rgba(0, 0, 0, 0.4)`
+ * `--anchor-nav-header-padding` | `padding` of "header" part. | `0 var(--lumo-space-m)`
+ *
+ * Some of the custom properties rely on Lumo design tokens for colors and spacing. When not using the Lumo theme, those
+ * need to be re-defined in order to ensure a proper look and feel.
  *
  * The following shadow DOM parts are available for styling:
  *
@@ -56,7 +61,9 @@ export class AnchorNavElement extends ElementMixin(LitElement) {
         --anchor-nav-inner-max-width: auto;
         --anchor-nav-inner-background: var(--lumo-base-color);
         --anchor-nav-inner-padding: 0;
+        --anchor-nav-tabs-background: var(--lumo-base-color);
         --anchor-nav-tabs-stuck-box-shadow: 0 4px 5px -6px rgba(0, 0, 0, 0.4);
+        --anchor-nav-header-padding: 0 var(--lumo-space-m);
         /*
          * Chrome scrollbar z-index bugfix
          * https://github.com/PolymerElements/iron-list/issues/137#issuecomment-176457768
@@ -90,7 +97,7 @@ export class AnchorNavElement extends ElementMixin(LitElement) {
         position: -webkit-sticky;
         position: sticky;
         top: 0 !important;
-        background: var(--lumo-base-color);
+        background: var(--anchor-nav-tabs-background);
         z-index: 2;
       }
 
@@ -112,7 +119,7 @@ export class AnchorNavElement extends ElementMixin(LitElement) {
       }
 
       ::slotted([slot='header']) {
-        padding: 0 var(--lumo-space-m);
+        padding: var(--anchor-nav-header-padding);
       }
 
       :host([theme~='expand-last']) ::slotted(vcf-anchor-nav-section:last-of-type) {