finalize component group properties and docs

2026-01-12 12:09:26 +00:00 · 2024-06-05 16:57:06 -04:00
parent db092bbf52
commit d1a9793fec
6 changed files with 50 additions and 34 deletions
--- a/docs/_includes/sidebar.njk
+++ b/docs/_includes/sidebar.njk
@@ -261,6 +261,6 @@
    <a href="/docs/theming/z-index">Z-index</a>
  </li>
  <li>
-    <a href="/docs/theming/groups">Component Groups</a>
+    <a href="/docs/theming/component-groups">Component Groups</a>
  </li>
 </ul>
--- a/docs/docs/theming/component-groups.md
+++ b/docs/docs/theming/component-groups.md
@@ -79,7 +79,7 @@ Panels consist of components with larger, contained surface areas like [callout]
 | `--wa-panel-border-radius` | `var(--wa-border-radius-m)` |

 ```html {.example}
-<form class="wa-block-spacing-l">
+<div class="wa-block-spacing-l">
  <wa-callout>
    <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
    This is a simple callout with an icon.
@@ -88,7 +88,7 @@ Panels consist of components with larger, contained surface areas like [callout]
  <wa-details summary="Details">
    <code>wa-details</code>, at your service.
  </wa-details>
-</form>
+</div>

 <style>
  .wa-block-spacing-l > * + * {
@@ -96,4 +96,25 @@ Panels consist of components with larger, contained surface areas like [callout]
    margin-block-start: var(--wa-space-l);
  }
 </style>
+```
+
+## Tooltips
+
+Tooltip styles are shared between the [tooltip](/docs/components/tooltip) component and the tooltip implementation in [range](/docs/components/range).
+
+| Custom Property              |  Default Value                      |
+| ---------------------------- | ----------------------------------- |
+| `--wa-tooltip-arrow-size`    | `0.375rem`                          |
+| `--wa-tooltip-background`    | `var(--wa-color-neutral-fill-loud)` |
+| `--wa-tooltip-border-radius` | `var(--wa-border-radius-s)`         |
+| `--wa-tooltip-content-color`         | `var(--wa-color-neutral-on-loud)`   |
+| `--wa-tooltip-font-size`     | `var(--wa-font-size-s)`             |
+| `--wa-tooltip-line-height`   | `var(--wa-line-height-normal)`      |
+
+```html {.example}
+<wa-tooltip content="This is a tooltip" open trigger="manual">
+  <wa-icon name="bullseye" style="color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-xl);"></wa-icon>
+</wa-tooltip>
+<br />
+<wa-range label="Range" help-text="Move the slider to take a gander at the tooltip."></wa-range>
 ```
--- a/src/components/range/range.styles.ts
+++ b/src/components/range/range.styles.ts
@@ -152,11 +152,11 @@ export default css`
    border-radius: var(--wa-tooltip-border-radius);
    background-color: var(--wa-tooltip-background);
    font-family: inherit;
-    font-size: var(--wa-tooltip-content-font-size);
-    line-height: var(--wa-tooltip-content-line-height);
+    font-size: var(--wa-tooltip-font-size);
+    line-height: var(--wa-tooltip-line-height);
    color: var(--wa-tooltip-content-color);
    opacity: 0;
-    padding: var(--wa-tooltip-padding);
+    padding: var(--wa-space-2xs) var(--wa-space-xs);
    transition: var(--wa-transition-normal) opacity;
    pointer-events: none;
  }
--- a/src/components/tooltip/tooltip.styles.ts
+++ b/src/components/tooltip/tooltip.styles.ts
@@ -5,7 +5,8 @@ export default css`
    --background: var(--wa-tooltip-background);
    --border-radius: var(--wa-tooltip-border-radius);
    --content-color: var(--wa-tooltip-content-color);
-    --max-width: 20rem;
+    --max-width: 30ch;
+    --padding: var(--wa-space-2xs) var(--wa-space-xs);

    display: contents;
  }
@@ -42,12 +43,12 @@ export default css`
    border-radius: var(--border-radius);
    background: var(--background);
    font-family: inherit;
-    font-size: var(--wa-tooltip-content-font-size);
-    line-height: var(--wa-tooltip-content-line-height);
+    font-size: var(--wa-tooltip-font-size);
+    line-height: var(--wa-tooltip-line-height);
    text-align: start;
    white-space: normal;
    color: var(--content-color);
-    padding: var(--wa-tooltip-padding);
+    padding: var(--padding);
    user-select: none;
    -webkit-user-select: none;
  }
--- a/src/components/tooltip/tooltip.ts
+++ b/src/components/tooltip/tooltip.ts
@@ -35,7 +35,11 @@ import type { CSSResultGroup } from 'lit';
 * @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
 * @csspart body - The tooltip's body where its content is rendered.
 *
+ * @cssproperty --background - The tooltip's background styles.
+ * @cssproperty --border-radius - The radius of the tooltip's corners.
+ * @cssproperty --content-color - The color of the tooltip's content.
 * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
+ * @cssproperty --padding - The padding within the tooltip.
 * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
 * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
 */
--- a/src/themes/default.css
+++ b/src/themes/default.css
@@ -163,19 +163,13 @@

  /**
   * Semantic Colors
-   * Five semantic groups help reinforce a component's message, intended usage, or expected results through meaningful hues -
-   *  *  Brand for your brand color
-   *  *  Success for validity or confirmation
-   *  *  Neutral for ordinary or inactive content
-   *  *  Warning for caution or uncertainty
-   *  *  Danger for errors or risk
+   * Five semantic groups - brand, success, neutral, warning, and danger - help reinforce a component's message, intended usage, or expected results.
   * Within these groups, each color specifies a role -
   *  *  Fill for background colors or areas larger than a few pixels
   *  *  Border for borders, dividers, and other stroke-like elements
   *  *  On for content displayed on a fill with the corresponding attention
   * Each role has three options for attention - quiet, normal, and loud - where quiet draws the least attention and loud draws the most.
  */
-
  --wa-color-brand-fill-quiet: var(--wa-color-primary-95);
  --wa-color-brand-fill-normal: var(--wa-color-primary-90);
  --wa-color-brand-fill-loud: var(--wa-color-primary-50);
@@ -237,7 +231,7 @@
  /* The default type scale is roughly based on the Major Second scale (x1.125), 
   * with each value rounded to the nearest whole pixel based on a 16px root font size.
   * For larger font sizes, every other step on the scale is skipped in order to maximize variation. 
-   * A multiplier is provided to increase or decrease all font sizes at once. */
+   * A multiplier is provided to uniformly increase or decrease all font sizes. */
  --wa-font-size-multiplier: 1;
  --wa-font-size-2xs: calc(0.6875rem * var(--wa-font-size-multiplier)); /* 11px */
  --wa-font-size-xs: calc(0.75rem * var(--wa-font-size-multiplier)); /* 12px */
@@ -267,10 +261,9 @@

  /**
   * Spacing
-   * Space properties help create predictable rhythm and meaningful proximity.
   */
-  /* Space is designed to scale according to a single base value.
-   * The base value is intended for calculations and is not used by components directly. */
+
+  /* A multiplier is provided to uniformly increase or decrease all spacing. */
  --wa-space-multiplier: 1;
  --wa-space-3xs: calc(var(--wa-space-multiplier) * 0.125rem); /* 2px */
  --wa-space-2xs: calc(var(--wa-space-multiplier) * 0.25rem); /* 4px */
@@ -287,15 +280,13 @@
   */
  --wa-border-style: solid;

-  /* Border width is designed to scale according to a single base value.
-     * The base value is intended for calculations and is not used by components directly. */
+  /* A multiplier is provided to uniformly increase or decrease all border widths. */
  --wa-border-width-multiplier: 0.0625;
  --wa-border-width-s: calc(var(--wa-border-width-multiplier) * 1rem);
  --wa-border-width-m: calc(var(--wa-border-width-multiplier) * 2rem);
  --wa-border-width-l: calc(var(--wa-border-width-multiplier) * 3rem);

-  /* Border radius is designed to scale according to a single base value.
-   * The base value is intended for calculations and is not used by components directly. */
+  /* A multiplier is provided to uniformly increase or decrease all border radii. */
  --wa-border-radius-multiplier: 0.375;
  --wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 0.5rem);
  --wa-border-radius-s: calc(var(--wa-border-radius-multiplier) * 1rem);
@@ -330,8 +321,10 @@
  --wa-z-index-tooltip: 1000;

  /**
-   * Component groups
+   * Component Groups
   */
+
+  /* Form controls */
  --wa-form-control-background: var(--wa-color-surface-default);

  --wa-form-control-border-style: var(--wa-border-style);
@@ -343,7 +336,7 @@

  --wa-form-control-label-color: var(--wa-color-text-normal);
  --wa-form-control-label-font-weight: var(--wa-font-weight-normal);
-  --wa-form-control-label-line-height: var(--wa-line-height-normal);
+  --wa-form-control-label-line-height: var(--wa-line-height-condensed);

  --wa-form-control-value-color: var(--wa-color-text-normal);
  --wa-form-control-value-font-weight: var(--wa-font-weight-body);
@@ -365,15 +358,14 @@
  --wa-form-control-required-content-color: inherit;
  --wa-form-control-required-content-offset: -0.1em;

+  /* Panels */
  --wa-panel-border-style: var(--wa-border-style);
  --wa-panel-border-width: var(--wa-border-width-s);
  --wa-panel-border-radius: var(--wa-border-radius-m);

  --wa-flow-spacing: var(--wa-space-2xl);

-  /**
-   * From 2.x
-   */
+  /* Tooltips */
  --wa-tooltip-arrow-size: 0.375rem;

  --wa-tooltip-background: var(--wa-color-neutral-fill-loud);
@@ -381,10 +373,8 @@
  --wa-tooltip-border-radius: var(--wa-border-radius-s);

  --wa-tooltip-content-color: var(--wa-color-neutral-on-loud);
-  --wa-tooltip-content-font-size: var(--wa-font-size-s);
-  --wa-tooltip-content-line-height: var(--wa-line-height-normal);
-
-  --wa-tooltip-padding: var(--wa-space-2xs) var(--wa-space-xs);
+  --wa-tooltip-font-size: var(--wa-font-size-s);
+  --wa-tooltip-line-height: var(--wa-line-height-normal);
 }

 .wa-theme-default-dark,