+
+ CDN
+ npm
+ Self-Hosted
+
+
+{% markdown %}
+{% if palette.isPro %}
+
+
+ This palette can only be used on teams with a Pro subscription.
+
+
+{% else %}
+**For projects on Free teams:**
+1. Head over to your project's **Settings**.
+2. Find **Color Palette**. Select **{{ palette.name | capitalize }}**.
+3. Save your theme to immediately update anywhere you're using your project.
+{% endif %}
+
+**For projects on Pro teams:**
+1. Head over to your project's **Settings**.
+2. Press **Edit Your Theme** to open the Theme Builder.
+3. Open **Colors** and select **{{ palette.name | capitalize }}**.
+4. Save your theme to immediately update anywhere you're using your project.
+{% endmarkdown %}
+
+
+
+{% markdown %}
+To use this theme, import the theme's stylesheet:
+
+```js
+import '@awesome.me/webawesome/dist/styles/themes/{{ palette.filename }}';
+```
+
+Then apply the following class to the `` element:
+
+```html
+
+```
+{% endmarkdown %}
+
+
+
+{% markdown %}
+To use this theme, include the theme's stylesheet:
+
+```html
+
+```
+
+Then apply the following class to the `` element:
+
+```html
+
+```
+{% endmarkdown %}
+
+
+
{% endfor %}
@@ -121,6 +178,7 @@ layout: page
display: flex;
flex-direction: row;
flex-wrap: wrap;
+ gap: var(--wa-space-m);
}
&::part(form-control-label) {
@@ -133,7 +191,11 @@ layout: page
overflow: hidden;
white-space: nowrap;
padding: 0;
- }
+ }
+
+ wa-radio {
+ margin-inline: 0;
+ }
}
.palette-card {
diff --git a/packages/webawesome/docs/docs/components/include.md b/packages/webawesome/docs/docs/components/include.md
index 67b2229b2..7341c0ac3 100644
--- a/packages/webawesome/docs/docs/components/include.md
+++ b/packages/webawesome/docs/docs/components/include.md
@@ -19,7 +19,7 @@ The included content will be inserted into the `` element's default
When an include file loads successfully, the `wa-load` event will be emitted. You can listen for this event to add custom loading logic to your includes.
-If the request fails, the `wa-error` event will be emitted. In this case, `event.detail.status` will contain the resulting HTTP status code of the request, e.g. 404 (not found).
+If the request fails, the `wa-include-error` event will be emitted. In this case, `event.detail.status` will contain the resulting HTTP status code of the request, e.g. 404 (not found).
```html
@@ -33,7 +33,7 @@ If the request fails, the `wa-error` event will be emitted. In this case, `event
}
});
- include.addEventListener('wa-error', event => {
+ include.addEventListener('wa-include-error', event => {
if (event.eventPhase === Event.AT_TARGET) {
console.log('Error', event.detail.status);
}
diff --git a/packages/webawesome/docs/docs/customizing.md b/packages/webawesome/docs/docs/customizing.md
index 92a415ce7..e0ef31a4d 100644
--- a/packages/webawesome/docs/docs/customizing.md
+++ b/packages/webawesome/docs/docs/customizing.md
@@ -10,27 +10,32 @@ You can customize the look and feel of Web Awesome at a high level with themes.
Web Awesome uses [themes](/docs/themes) to apply a cohesive look and feel across the entire library. Themes are built with a collection of predefined CSS custom properties, which we call [design tokens](/docs/tokens), and there are many premade themes you can choose from.
-To use a theme, simply add a link to the theme's stylesheet to the `` of your page. For example, you can add this snippet alongside th [installation code](/docs/#quick-start-autoloading-via-cdn) to use the _Awesome_ theme:
+{% raw %}
+
+ To use a pre-built theme {%- if currentUser.hasPro -%} or build your own{%- endif -%},
+ {%- if not session.isLoggedIn -%}
+ sign up or log in to create a project.
+ {%- else -%}
+ head over to your teams and open up the project you'd like to use.
+ {%- endif -%}
+ In your project's Settings,
+ {%- if not currentUser.hasPro -%}
+ select a Theme and a Color Palette to use, save your changes, and bask in the glory of your new theme.
+ {%- else -%}
+ Edit Your Theme to open the Theme Builder and select a pre-built theme or customize your colors, fonts, icons, and more.
+ {%- endif -%}
+
+{% endraw %}
-```html
-
-```
-
-You can customize any theme just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries and your own custom properties. Simply override any design token in your own stylesheet by scoping your styles to `:root`, the class for the specific theme you want to override (if needed), and the class for the relevant color scheme (if needed). Here's an example that changes the default brand color to purple in light mode:
+For even more customizations, you can off-road and override any theme just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries and your own custom properties. Simply style any design token in your own stylesheet by scoping your styles to `:root` and the class for the relevant color scheme (if needed). Here's an example that uses tinted surface colors in light mode:
```css
:root,
.wa-light,
.wa-dark .wa-invert {
- --wa-color-brand-fill-quiet: var(--wa-color-purple-95);
- --wa-color-brand-fill-normal: var(--wa-color-purple-90);
- --wa-color-brand-fill-loud: var(--wa-color-purple-50);
- --wa-color-brand-border-quiet: var(--wa-color-purple-90);
- --wa-color-brand-border-normal: var(--wa-color-purple-80);
- --wa-color-brand-border-loud: var(--wa-color-purple-60);
- --wa-color-brand-on-quiet: var(--wa-color-purple-40);
- --wa-color-brand-on-normal: var(--wa-color-purple-30);
- --wa-color-brand-on-loud: white;
+ --wa-color-surface-raised: var(--wa-color-neutral-95);
+ --wa-color-surface-default: var(--wa-color-neutral-90);
+ --wa-color-surface-lowered: var(--wa-color-neutral-80);
}
```
@@ -155,4 +160,4 @@ For example, we can give `` the same custom styles as `
-```
\ No newline at end of file
+```
diff --git a/packages/webawesome/docs/docs/experimental/ssr.md b/packages/webawesome/docs/docs/experimental/ssr.md
index b80f19217..641e77b9b 100644
--- a/packages/webawesome/docs/docs/experimental/ssr.md
+++ b/packages/webawesome/docs/docs/experimental/ssr.md
@@ -16,8 +16,8 @@ SSR in Web Awesome is experimental! There are some known bugs and timing issues.
If you're using the `webawesome.loader.js` file which automatically loads, make sure to change it to `webawesome.ssr-loader.js`.
```diff
--
-+
+-
++
```
If you're using a bundler, make sure it comes _before_ any components are imported.
@@ -43,7 +43,10 @@ import litPlugin from '@lit-labs/eleventy-plugin-lit';
eleventyConfig.addPlugin(litPlugin, {
mode: 'worker',
- componentModules: ['@awesome.me/webawesome/dist/components/button/button.js', '@awesome.me/webawesome/dist/components/input/input.js'],
+ componentModules: [
+ '@awesome.me/webawesome/dist/components/button/button.js',
+ '@awesome.me/webawesome/dist/components/input/input.js',
+ ],
});
```
@@ -114,4 +117,4 @@ Here are some known issues and things we're still working on.
- `@shoelace-style/localize` (our localization library) has no way to set a language currently so it always falls back to `en`.
- `` has no fallback if there's no JS besides a blank `