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

remove outdated Customizing > Style Utilities example

Browse Source
This commit is contained in:
lindsaym-fa
2025-10-23 14:08:39 -04:00
parent b14624b60a
commit cbd82ab79a
1 changed files with 1 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/webawesome/docs/docs/customizing.md
View File

@@ -155,27 +155,4 @@ For example, we can give `<input type="checkbox">` the same custom styles as `<w
color: lavenderblush;
}
</style>
```
## Style Utilities
Similarly, if you're using [style utilities](/docs/utilities), any custom styles added for a specific attribute variation of a component — such as `appearance`, `variant`, or `size` — should also target the corresponding style utility class. This ensures that the attribute and its utility class counterpart work interchangeably.
For example, we can give all outlined callouts a thick left border, regardless of whether they are styled with `appearance="outlined"` or `class="wa-outlined"`:
```html {.example}
<wa-callout appearance="filled-outlined">
<wa-icon slot="icon" name="circle-star"></wa-icon>
Here's a callout with <code>appearance="outlined"</code>
</wa-callout>
<wa-callout class="wa-outlined wa-filled">
<wa-icon slot="icon" name="circle-star"></wa-icon>
Here's a callout with <code>class="wa-outlined"</code>
</wa-callout>
<style>
wa-callout:is([appearance~='outlined']) {
border-left-width: var(--wa-panel-border-radius);
}
</style>
```
```