Add tokens to style tooltip borders

packages/webawesome/docs/docs/resources/changelog.md

@@ -14,13 +14,11 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 
 - Added the `icon-position` attribute to `<wa-details>` [discuss:1099]
 - Added the `animating` custom state to `<wa-details>`
+- Added `--wa-tooltip-border-color`, `--wa-tooltip-border-style`, and `--wa-tooltip-border-width` tokens [issue:1224]
 
 ### Bug Fixes and Improvements {data-no-outline}
 
 - Fixed a bug in `<wa-details>` that caused the content to overflow the container when animating [issue:1149]
-
-### Bug Fixes and Improvements {data-no-outline}
-
 - Fixed a bug in `<wa-dialog>` and `<wa-drawer>` that prevented the header from showing when the label was missing [issue:1209]
 
 ## 3.0.0-beta.3

packages/webawesome/docs/docs/tokens/component-groups.md

@@ -2,6 +2,7 @@
 title: Component Groups
 description: Style groups of components that share similar qualities with these Web Awesome custom properties.
 order: 9999
+layout: page-outline
 ---
 
 For components that share similar qualities, Web Awesome includes custom properties to change the appearance of these related components all at once.
@@ -84,16 +85,19 @@ Panels consist of components with larger, contained surface areas like [callout]
 
 ## Tooltips
 
-Tooltip styles are shared between the [tooltip](/docs/components/tooltip) component and the tooltip implementation in [range](/docs/components/range).
+Tooltip styles are shared between the [tooltip](/docs/components/tooltip) component and the tooltips in [slider](/docs/components/slider) and [copy button](/docs/components/copy-button).
 
-| Custom Property              | Default Value                       |
-| ---------------------------- | ----------------------------------- |
-| `--wa-tooltip-arrow-size`    | `0.375rem` <small>(6px)</small>     |
-| `--wa-tooltip-background-color`    | `var(--wa-color-neutral-fill-loud)` |
-| `--wa-tooltip-border-radius` | `var(--wa-border-radius-m)`         |
-| `--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)`      |
+| Custom Property                 | Default Value                        |
+| ------------------------------- | ------------------------------------ |
+| `--wa-tooltip-arrow-size`       | `0.375rem` <small>(6px)</small>      |
+| `--wa-tooltip-background-color` | `var(--wa-color-neutral-fill-loud)`  |
+| `--wa-tooltip-border-color`     | `var(--wa-tooltip-background-color)` |
+| `--wa-tooltip-border-style`     | `var(--wa-border-style)`             |
+| `--wa-tooltip-border-width`     | `var(--wa-border-width-s)`           |
+| `--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-button id="bullseye-example" appearance="plain">

packages/webawesome/src/components/tooltip/tooltip.css

@@ -44,7 +44,13 @@
   max-width: var(--max-width);
   border-radius: var(--wa-tooltip-border-radius);
   background-color: var(--wa-tooltip-background-color);
+  border: var(--wa-tooltip-border-width) var(--wa-tooltip-border-style) var(--wa-tooltip-border-color);
   padding: 0.25em 0.5em;
   user-select: none;
   -webkit-user-select: none;
 }
+
+.tooltip::part(arrow) {
+  border-bottom: var(--wa-tooltip-border-width) var(--wa-tooltip-border-style) var(--wa-tooltip-border-color);
+  border-right: var(--wa-tooltip-border-width) var(--wa-tooltip-border-style) var(--wa-tooltip-border-color);
+}

packages/webawesome/src/styles/themes/awesome.css

@@ -351,6 +351,9 @@
 
     --wa-tooltip-background-color: var(--wa-color-text-normal);
 
+    --wa-tooltip-border-color: var(--wa-tooltip-background-color);
+    --wa-tooltip-border-style: var(--wa-border-style);
+    --wa-tooltip-border-width: var(--wa-border-width-s);
     --wa-tooltip-border-radius: var(--wa-border-radius-s);
 
     --wa-tooltip-content-color: var(--wa-color-surface-default);

packages/webawesome/src/styles/themes/default.css

@@ -347,6 +347,9 @@
 
     --wa-tooltip-background-color: var(--wa-color-text-normal);
 
+    --wa-tooltip-border-color: var(--wa-tooltip-background-color);
+    --wa-tooltip-border-style: var(--wa-border-style);
+    --wa-tooltip-border-width: var(--wa-border-width-s);
     --wa-tooltip-border-radius: var(--wa-border-radius-s);
 
     --wa-tooltip-content-color: var(--wa-color-surface-default);

packages/webawesome/src/styles/themes/shoelace.css

@@ -350,6 +350,9 @@
 
     --wa-tooltip-background-color: var(--wa-color-text-normal);
 
+    --wa-tooltip-border-color: var(--wa-tooltip-background-color);
+    --wa-tooltip-border-style: var(--wa-border-style);
+    --wa-tooltip-border-width: var(--wa-border-width-s);
     --wa-tooltip-border-radius: var(--wa-border-radius-s);
 
     --wa-tooltip-content-color: var(--wa-color-surface-default);