document calculated css properties

vaadin · Oct 2, 2024 · e808f23 · e808f23
1 parent 1dbb20f
commit e808f23
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/packages/dashboard/src/vaadin-dashboard-styles.js b/packages/dashboard/src/vaadin-dashboard-styles.js
@@ -9,6 +9,8 @@ export const hasWidgetWrappers = css`
 export const dashboardWidgetAndSectionStyles = css`
  :host {
  box-sizing: border-box;
+ /* Calculates the offset by which mode buttons that by default overflow the widget edges
+ should be shifted inwards based on a custom --vaadin-dashboard-spacing value */
  --_mode-button-spacing-offset: calc(
  max(0px, var(--_vaadin-dashboard-default-spacing) - var(--_vaadin-dashboard-spacing))
  );

diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
@@ -16,6 +16,8 @@ const dashboardWidgetAndSection = css`
  --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
  --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
  --_focus-ring-spacing-max-offset: 0px;
+ /* Calculates the offset by which the focus ring should be shifted inwards based on a custom --vaadin-dashboard-spacing value.
+ Effectively keeps the focus ring visible if --vaadin-dashboard-spacing is set to 0px */
  --_focus-ring-spacing-offset: min(
  max(calc(var(--_focus-ring-width) * -1), var(--_vaadin-dashboard-spacing) - var(--_focus-ring-width)),
  var(--_focus-ring-spacing-max-offset, 0px)