refactor: override base properties in avatar Lumo, add JSDoc (#10519)

Author: web-padawan

packages/avatar/src/vaadin-avatar.d.ts

@@ -18,13 +18,25 @@ export { AvatarI18n } from './vaadin-avatar-mixin.js';
  *
  * ### Styling
  *
- * The following shadow DOM parts are exposed for styling:
+ * The following shadow DOM parts are available for styling:
  *
  * Part name | Description
  * --------- | ---------------
  * `abbr`    | The abbreviation element
  * `icon`    | The icon element
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property            | Description
+ * -------------------------------|-------------
+ * `--vaadin-avatar-background`   | Background color of the avatar
+ * `--vaadin-avatar-border-color` | Border color of the avatar
+ * `--vaadin-avatar-border-width` | Border width of the avatar
+ * `--vaadin-avatar-font-size`    | Font size of the avatar
+ * `--vaadin-avatar-font-weight`  | Font weight of the avatar
+ * `--vaadin-avatar-size`         | Size of the avatar
+ * `--vaadin-avatar-text-color`   | Text color of the avatar
+ *
  * The following state attributes are available for styling:
  *
  * Attribute         | Description

packages/avatar/src/vaadin-avatar.js

@@ -24,13 +24,25 @@ import { AvatarMixin } from './vaadin-avatar-mixin.js';
  *
  * ### Styling
  *
- * The following shadow DOM parts are exposed for styling:
+ * The following shadow DOM parts are available for styling:
  *
  * Part name | Description
  * --------- | ---------------
  * `abbr`    | The abbreviation element
  * `icon`    | The icon element
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property            | Description
+ * -------------------------------|-------------
+ * `--vaadin-avatar-background`   | Background color of the avatar
+ * `--vaadin-avatar-border-color` | Border color of the avatar
+ * `--vaadin-avatar-border-width` | Border width of the avatar
+ * `--vaadin-avatar-font-size`    | Font size of the avatar
+ * `--vaadin-avatar-font-weight`  | Font weight of the avatar
+ * `--vaadin-avatar-size`         | Size of the avatar
+ * `--vaadin-avatar-text-color`   | Text color of the avatar
+ *
  * The following state attributes are available for styling:
  *
  * Attribute         | Description

packages/vaadin-lumo-styles/src/components/avatar.css

@@ -8,8 +8,8 @@
     --vaadin-avatar-outline-width: var(--vaadin-focus-ring-width, 2px);
     border: var(--vaadin-avatar-outline-width) solid transparent;
     margin: calc(var(--vaadin-avatar-outline-width) * -1);
-    color: var(--lumo-secondary-text-color);
-    background-color: var(--lumo-contrast-10pct);
+    color: var(--vaadin-avatar-text-color, var(--lumo-secondary-text-color));
+    background-color: var(--vaadin-avatar-background, var(--lumo-contrast-10pct));
     outline: none;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;