fix sl prefixes

docs/docs/customizing.md

@@ -12,24 +12,24 @@ Web Awesome makes use of several design tokens to provide a consistent appearanc
 
 Design tokens offer a high-level way to customize the library with minimal effort. There are no component-specific variables, however, as design tokens are intended to be generic and highly reusable. To customize an individual component, refer to the section entitled [CSS Parts](#css-parts).
 
-Design tokens are accessed through CSS custom properties that are defined in your theme. Because design tokens live at the page level, they're prefixed with `--sl-` to avoid collisions with other libraries.
+Design tokens are accessed through CSS custom properties that are defined in your theme. Because design tokens live at the page level, they're prefixed with `--wa-` to avoid collisions with other libraries.
 
 To customize a design token, simply override it in your stylesheet using a `:root` block. Here's an example that changes the primary theme to purple based on existing [color primitives](/tokens/color#primitives).
 
 ```css
 :root {
   /* Changes the primary theme color to purple using primitives */
-  --sl-color-primary-50: var(--sl-color-purple-50);
-  --sl-color-primary-100: var(--sl-color-purple-100);
-  --sl-color-primary-200: var(--sl-color-purple-200);
-  --sl-color-primary-300: var(--sl-color-purple-300);
-  --sl-color-primary-400: var(--sl-color-purple-400);
-  --sl-color-primary-500: var(--sl-color-purple-500);
-  --sl-color-primary-600: var(--sl-color-purple-600);
-  --sl-color-primary-700: var(--sl-color-purple-700);
-  --sl-color-primary-800: var(--sl-color-purple-800);
-  --sl-color-primary-900: var(--sl-color-purple-900);
-  --sl-color-primary-950: var(--sl-color-purple-950);
+  --wa-color-primary-50: var(--wa-color-purple-50);
+  --wa-color-primary-100: var(--wa-color-purple-100);
+  --wa-color-primary-200: var(--wa-color-purple-200);
+  --wa-color-primary-300: var(--wa-color-purple-300);
+  --wa-color-primary-400: var(--wa-color-purple-400);
+  --wa-color-primary-500: var(--wa-color-purple-500);
+  --wa-color-primary-600: var(--wa-color-purple-600);
+  --wa-color-primary-700: var(--wa-color-purple-700);
+  --wa-color-primary-800: var(--wa-color-purple-800);
+  --wa-color-primary-900: var(--wa-color-purple-900);
+  --wa-color-primary-950: var(--wa-color-purple-950);
 }
 ```
 
@@ -48,7 +48,7 @@ Here's an example that modifies buttons with the `tomato-button` class.
 
 <style>
   .tomato-button::part(base) {
-    background: var(--sl-color-neutral-0);
+    background: var(--wa-color-neutral-0);
     border: solid 1px tomato;
   }
 
@@ -82,7 +82,7 @@ Most (but not all) components expose parts. You can find them in each component'
 
 ## Custom Properties
 
-For convenience, some components expose CSS custom properties you can override. These are not design tokens, nor do they have the same `--sl-` prefix since they're scoped to a component.
+For convenience, some components expose CSS custom properties you can override. These are not design tokens, nor do they have the same `--wa-` prefix since they're scoped to a component.
 
 You can set custom properties on a component in your stylesheet.
 

docs/docs/themes.md

@@ -14,7 +14,7 @@ For component developers, built-in themes are also available as JavaScript modul
 
 ## Theme Basics
 
-All themes are scoped to classes using the `sl-theme-{name}` convention, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use `wa-theme-default-light` and `wa-theme-default-dark`, respectively. A custom theme called "Purple Power", for example, would use a class called `sl-theme-purple-power`
+All themes are scoped to classes using the `wa-theme-{name}` convention, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use `wa-theme-default-light` and `wa-theme-default-dark`, respectively. A custom theme called "Purple Power", for example, would use a class called `wa-theme-purple-power`
 
 All selectors must be scoped to the theme's class to ensure interoperability with other themes. You should also scope them to `:host` so they can be imported and applied to custom element shadow roots.
 

src/components/color-picker/color-picker.test.ts

@@ -32,7 +32,7 @@ describe('<wa-color-picker>', async () => {
       await aTimeout(200); // wait for the dropdown to open
       await el.updateComplete;
 
-      // Simulate a drag event. "sl-change" should not fire until we stop dragging.
+      // Simulate a drag event. "wa-change" should not fire until we stop dragging.
       await dragElement(grid, 2, 0, {
         afterMouseDown: () => {
           expect(changeHandler).to.have.not.been.called;

src/components/menu-item/menu-item.styles.ts

@@ -145,7 +145,7 @@ export default css`
     }
   }
 
-  ::slotted(sl-menu) {
+  ::slotted(wa-menu) {
     max-width: var(--auto-size-available-width) !important;
     max-height: var(--auto-size-available-height) !important;
   }

src/components/popup/popup.styles.ts

@@ -48,7 +48,7 @@ export default css`
 
   .popup-hover-bridge {
     position: fixed;
-    z-index: calc(var(--sl-z-index-dropdown) - 1);
+    z-index: calc(var(--wa-z-index-dropdown) - 1);
     top: 0;
     right: 0;
     bottom: 0;

src/components/select/select.styles.ts

@@ -85,7 +85,7 @@ export default css`
   }
 
   .select__display-input::placeholder {
-    color: var(--sl-input-placeholder-color);
+    color: var(--wa-form-controls-placeholder-color);
   }
 
   /* Visually hide the display input when multiple is enabled */

src/components/tree/tree.test.ts

@@ -758,7 +758,7 @@ describe('<wa-tree>', () => {
       <wa-tree>
         <wa-tree-item>
           Item 1
-          <sl-icon name="1-circle" slot="expand-icon"></sl-icon>
+          <wa-icon name="1-circle" slot="expand-icon"></wa-icon>
           <wa-tree-item> Item A </wa-tree-item>
         </wa-tree-item>
         <wa-tree-item>