docs: document popover and tooltip base styles properties (#10617)

Author: web-padawan

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

@@ -51,16 +51,23 @@ export type PopoverEventMap = HTMLElementEventMap & PopoverCustomEventMap;
  * -----------------|----------------------------------------
  * `position`       | Reflects the `position` property value.
  *
- * ### Custom CSS Properties
- *
  * The following custom CSS properties are available for styling:
  *
- * Custom CSS property              | Description
- * ---------------------------------|-------------
- * `--vaadin-popover-offset-top`    | Used as an offset when the popover is aligned vertically below the target
- * `--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target
- * `--vaadin-popover-offset-start`  | Used as an offset when the popover is aligned horizontally after the target
- * `--vaadin-popover-offset-end`    | Used as an offset when the popover is aligned horizontally before the target
+ * Custom CSS property                      |
+ * :----------------------------------------|
+ * |`--vaadin-overlay-backdrop-background`  |
+ * |`--vaadin-popover-arrow-border-radius`  |
+ * |`--vaadin-popover-arrow-size`           |
+ * |`--vaadin-popover-background`           |
+ * |`--vaadin-popover-border-color`         |
+ * |`--vaadin-popover-border-radius`        |
+ * |`--vaadin-popover-border-width`         |
+ * |`--vaadin-popover-offset-bottom`        |
+ * |`--vaadin-popover-offset-end`           |
+ * |`--vaadin-popover-offset-start`         |
+ * |`--vaadin-popover-offset-top`           |
+ * |`--vaadin-popover-padding`              |
+ * |`--vaadin-popover-shadow`               |
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

packages/popover/src/vaadin-popover.js

@@ -186,16 +186,23 @@ const isLastOverlay = (overlay) => {
  * -----------------|----------------------------------------
  * `position`       | Reflects the `position` property value.
  *
- * ### Custom CSS Properties
- *
  * The following custom CSS properties are available for styling:
  *
- * Custom CSS property              | Description
- * ---------------------------------|-------------
- * `--vaadin-popover-offset-top`    | Used as an offset when the popover is aligned vertically below the target
- * `--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target
- * `--vaadin-popover-offset-start`  | Used as an offset when the popover is aligned horizontally after the target
- * `--vaadin-popover-offset-end`    | Used as an offset when the popover is aligned horizontally before the target
+ * Custom CSS property                      |
+ * :----------------------------------------|
+ * |`--vaadin-overlay-backdrop-background`  |
+ * |`--vaadin-popover-arrow-border-radius`  |
+ * |`--vaadin-popover-arrow-size`           |
+ * |`--vaadin-popover-background`           |
+ * |`--vaadin-popover-border-color`         |
+ * |`--vaadin-popover-border-radius`        |
+ * |`--vaadin-popover-border-width`         |
+ * |`--vaadin-popover-offset-bottom`        |
+ * |`--vaadin-popover-offset-end`           |
+ * |`--vaadin-popover-offset-start`         |
+ * |`--vaadin-popover-offset-top`           |
+ * |`--vaadin-popover-padding`              |
+ * |`--vaadin-popover-shadow`               |
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

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

@@ -57,16 +57,25 @@ export interface TooltipEventMap extends HTMLElementEventMap, TooltipCustomEvent
  * `markdown`       | Reflects the `markdown` property value.
  * `position`       | Reflects the `position` property value.
  *
- * ### Custom CSS Properties
- *
  * The following custom CSS properties are available for styling:
  *
- * Custom CSS property              | Description
- * ---------------------------------|-------------
- * `--vaadin-tooltip-offset-top`    | Used as an offset when the tooltip is aligned vertically below the target
- * `--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target
- * `--vaadin-tooltip-offset-start`  | Used as an offset when the tooltip is aligned horizontally after the target
- * `--vaadin-tooltip-offset-end`    | Used as an offset when the tooltip is aligned horizontally before the target
+ * Custom CSS property                |
+ * :----------------------------------|
+ * | `--vaadin-tooltip-background`    |
+ * | `--vaadin-tooltip-border-color`  |
+ * | `--vaadin-tooltip-border-radius` |
+ * | `--vaadin-tooltip-border-width`  |
+ * | `--vaadin-tooltip-font-size`     |
+ * | `--vaadin-tooltip-font-weight`   |
+ * | `--vaadin-tooltip-line-height`   |
+ * | `--vaadin-tooltip-max-width`     |
+ * | `--vaadin-tooltip-offset-bottom` |
+ * | `--vaadin-tooltip-offset-end`    |
+ * | `--vaadin-tooltip-offset-start`  |
+ * | `--vaadin-tooltip-offset-top`    |
+ * | `--vaadin-tooltip-padding`       |
+ * | `--vaadin-tooltip-shadow`        |
+ * | `--vaadin-tooltip-text-color`    |
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

packages/tooltip/src/vaadin-tooltip.js

@@ -49,16 +49,25 @@ import { TooltipMixin } from './vaadin-tooltip-mixin.js';
  * `markdown`       | Reflects the `markdown` property value.
  * `position`       | Reflects the `position` property value.
  *
- * ### Custom CSS Properties
- *
  * The following custom CSS properties are available for styling:
  *
- * Custom CSS property              | Description
- * ---------------------------------|-------------
- * `--vaadin-tooltip-offset-top`    | Used as an offset when the tooltip is aligned vertically below the target
- * `--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target
- * `--vaadin-tooltip-offset-start`  | Used as an offset when the tooltip is aligned horizontally after the target
- * `--vaadin-tooltip-offset-end`    | Used as an offset when the tooltip is aligned horizontally before the target
+ * Custom CSS property                |
+ * :----------------------------------|
+ * | `--vaadin-tooltip-background`    |
+ * | `--vaadin-tooltip-border-color`  |
+ * | `--vaadin-tooltip-border-radius` |
+ * | `--vaadin-tooltip-border-width`  |
+ * | `--vaadin-tooltip-font-size`     |
+ * | `--vaadin-tooltip-font-weight`   |
+ * | `--vaadin-tooltip-line-height`   |
+ * | `--vaadin-tooltip-max-width`     |
+ * | `--vaadin-tooltip-offset-bottom` |
+ * | `--vaadin-tooltip-offset-end`    |
+ * | `--vaadin-tooltip-offset-start`  |
+ * | `--vaadin-tooltip-offset-top`    |
+ * | `--vaadin-tooltip-padding`       |
+ * | `--vaadin-tooltip-shadow`        |
+ * | `--vaadin-tooltip-text-color`    |
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *