From 6085b9698c301162d0bced1a70196b4e574bc1c3 Mon Sep 17 00:00:00 2001 From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com> Date: Mon, 28 Jul 2025 12:30:42 -0400 Subject: [PATCH] Add tokens to style tooltip borders (#1234) * add tooltip border tokens * target the correct part * target the correct part (for real) --- .../docs/docs/resources/changelog.md | 4 +--- .../docs/docs/tokens/component-groups.md | 22 +++++++++++-------- .../src/components/tooltip/tooltip.css | 6 +++++ .../webawesome/src/styles/themes/awesome.css | 3 +++ .../webawesome/src/styles/themes/default.css | 3 +++ .../webawesome/src/styles/themes/shoelace.css | 3 +++ 6 files changed, 29 insertions(+), 12 deletions(-) diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index 0f8d995c5..6b185656f 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -14,13 +14,11 @@ Components with the Experimental badge sh - Added the `icon-position` attribute to `` [discuss:1099] - Added the `animating` custom state to `` +- 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 `` that caused the content to overflow the container when animating [issue:1149] - -### Bug Fixes and Improvements {data-no-outline} - - Fixed a bug in `` and `` that prevented the header from showing when the label was missing [issue:1209] ## 3.0.0-beta.3 diff --git a/packages/webawesome/docs/docs/tokens/component-groups.md b/packages/webawesome/docs/docs/tokens/component-groups.md index 3cf963990..a438c0d10 100644 --- a/packages/webawesome/docs/docs/tokens/component-groups.md +++ b/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` (6px) | -| `--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` (6px) | +| `--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} diff --git a/packages/webawesome/src/components/tooltip/tooltip.css b/packages/webawesome/src/components/tooltip/tooltip.css index da122d150..6dc3d2ebc 100644 --- a/packages/webawesome/src/components/tooltip/tooltip.css +++ b/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); +} diff --git a/packages/webawesome/src/styles/themes/awesome.css b/packages/webawesome/src/styles/themes/awesome.css index 746566cdc..7e6bd1cc5 100644 --- a/packages/webawesome/src/styles/themes/awesome.css +++ b/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); diff --git a/packages/webawesome/src/styles/themes/default.css b/packages/webawesome/src/styles/themes/default.css index 0be28d86a..350aaefaf 100644 --- a/packages/webawesome/src/styles/themes/default.css +++ b/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); diff --git a/packages/webawesome/src/styles/themes/shoelace.css b/packages/webawesome/src/styles/themes/shoelace.css index 5f5e327c5..1fb80d1f7 100644 --- a/packages/webawesome/src/styles/themes/shoelace.css +++ b/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);