js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add tokens to style tooltip borders (#1234)

Browse Source 
* add tooltip border tokens

* target the correct part

* target the correct part (for real)
This commit is contained in:
Lindsay M
2025-07-28 12:30:42 -04:00
committed by GitHub
parent 17ee36175b
commit 6085b9698c
6 changed files with 29 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/webawesome/docs/docs/resources/changelog.md
View File

@@ -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

22
packages/webawesome/docs/docs/tokens/component-groups.md
View File

@@ -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">

6
packages/webawesome/src/components/tooltip/tooltip.css
View File

@@ -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);
}

3
packages/webawesome/src/styles/themes/awesome.css
View File

@@ -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);

3
packages/webawesome/src/styles/themes/default.css
View File

@@ -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);

3
packages/webawesome/src/styles/themes/shoelace.css
View File

@@ -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);