From cbd82ab79adeda6917b71aef4a20557f725fb4c7 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Thu, 23 Oct 2025 14:08:39 -0400
Subject: [PATCH] remove outdated Customizing > Style Utilities example

---
 packages/webawesome/docs/docs/customizing.md | 25 +-------------------
 1 file changed, 1 insertion(+), 24 deletions(-)

diff --git a/packages/webawesome/docs/docs/customizing.md b/packages/webawesome/docs/docs/customizing.md
index 5e7146850..92a415ce7 100644
--- a/packages/webawesome/docs/docs/customizing.md
+++ b/packages/webawesome/docs/docs/customizing.md
@@ -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>
-```
+```
\ No newline at end of file