- The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
+ Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
@@ -273,10 +273,8 @@
React
- To manually import this component from the CDN, use the following code.
+ Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.
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/index.md b/packages/webawesome/docs/docs/index.md
index 498a7f331..c7df09c86 100644
--- a/packages/webawesome/docs/docs/index.md
+++ b/packages/webawesome/docs/docs/index.md
@@ -12,42 +12,27 @@ Welcome to Web Awesome! [Learn more](https://webawesome.com/) about this project
---
-## Quick Start (Autoloading via CDN)
+## π Using a Project
-To get everything included in Web Awesome, add the following code to the `` of your site:
+A project gives you your own, personal CDN to use Web Awesome on your site. Each project uses a single line of code to install your preferred version, theme, Font Awesome kit...the works! And, when you update your project's settings, your project code pulls in all of the right stuff automatically β no need to update your own code or redeploy your site.
-```html
-
-
-```
+One line of code from us. The entire Web Awesome library for you.
-This snippet adds:
+To use a project:
-- **Web Awesome styles**, a collection of stylesheets including essential default theme styles, optional [styles for native elements](/docs/utilities/native) and optional [utility classes](/docs/utilities)
-- **The autoloader**, a lightweight script watches the DOM for unregistered Web Awesome elements and lazy loads them for you βΒ even if they're added dynamically
-
-Now you can [start using Web Awesome!](/docs/usage)
-
----
-
-## Using Font Awesome Kit Codes
-
-Font Awesome users can provide their kit code to unlock premium icon packs. You can provide yours by adding the `data-fa-kit-code` attribute to any element on the page, or by calling the `setKitCode()` method.
-
-```html
-
-
-
-
-
-```
-
-:::info
-Not a Font Awesome user yet? [Learn more about premium icon packs](https://fontawesome.com/) and sign up for an account to unlock them!
-:::
+{% raw %}
+
+
+ {% if not session.isLoggedIn %}
+ Sign up or log in to create a project.
+ {% else %}
+ Head over to your favorite team and open up the project you'd like to use.
+ {% endif %}
+
+
Copy and paste your unique project code into the <head> of each page on your site.
+
+{% endraw %}
---
@@ -63,31 +48,9 @@ Not a Font Awesome user yet? [Learn more about premium icon packs](https://fonta
{% endraw %}
-## Advanced Setup
+## π οΈ Advanced Setup
-The autoloader is the easiest way to use Web Awesome, but different projects (or your own preferences!) may require different installation methods.
-
-### Cherry Picking from CDN
-
-Cherry picking will only load the components you need up front, while limiting the number of files the browser has to download. The disadvantage is that you need to import each individual component on each page it's used. Additionally, you must include the default theme (`styles/themes/default.css`) to style any imported components. To use a different theme, include your preferred theme _in addition to_ the default theme.
-
-Here's an example that loads only the button component.
-
-```html
-
-
-
-```
-
-You can copy and paste the code to import a component from the "Importing" section of the component's documentation. Note that some components have dependencies that are automatically imported when you cherry pick. If a component has dependencies, they will be listed in the "Dependencies" section of its docs.
-
-:::warning
-You will see files named `chunk.[hash].js` in the `chunks` directory. Never import these files directly, as they are generated and change from version to version.
-:::
+Projects are our favorite way to use Web Awesome, but different environments (or your own preferences!) may require different installation methods. If you're self-hosting Web Awesome or using npm, refer to the instructions in this section.
### Installing via npm
@@ -116,11 +79,48 @@ import '@awesome.me/webawesome/dist/components/input/input.js';
Once they've been imported, you can use them in your HTML normally. Component imports are located in the "Importing" section of each component's documentation.
+
+### The Difference Between `/dist` & `/dist-cdn`
+
+If you have Web Awesome installed locally via npm, you'll notice the following directories in the project's root:
+
+```
+dist/
+dist-cdn/
+```
+
+The `dist-cdn` files come with everything bundled together, so you can use them directly without a build tool. The dist files keep dependencies separate, which lets your bundler optimize and share code more efficiently.
+
+Use `dist-cdn` if you're loading directly in the browser or from a CDN. Use `dist` if you're using a bundler like Webpack or Vite.
+
+### Referencing Necessary Styles
+
+If you're self-hosting Web Awesome, you'll need to set up your pages to reference any necessary styles. You can do so by referencing `webawesome.css`, or you can pick and choose specific stylesheets you'd like to use.
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+If you choose to use a theme other than the default theme, be sure to add the corresponding class (e.g. `.wa-theme-awesome`) to your `` element so that the class is applied.
+
### Setting the Base Path
Some components rely on assets (icons, images, etc.) and Web Awesome needs to know where they're located. For convenience, Web Awesome will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `webawesome.loader.js` and will "just work" for most users.
-==If you're using the CDN, you can skip this section.== However, if you're [cherry picking](#cherry-picking-from-cdn) or bundling Web Awesome, you'll need to set the base path. You can do this one of two ways.
+==If you're using a Web Awesome project, you can skip this section.== However, if you're [cherry picking](#cherry-picking-from-cdn) or bundling Web Awesome, you'll need to set the base path. You can do this one of two ways.
```html
@@ -153,18 +153,26 @@ Most of the magic behind assets is handled internally by Web Awesome, but if you
```
-### The Difference Between `/dist` & `/dist-cdn`
+### Using Font Awesome Pro and Pro+
-If you have Web Awesome installed locally via npm, you'll notice the following directories in the project's root:
+Font Awesome users can provide their kit code to unlock Pro and Pro+ icon packs. If you're using a project, simply add your Font Awesome Kit Code in your project's settings, and boom! Done.
-```
-dist/
-dist-cdn/
+If you're using Web Awesome through other methods like npm, you can provide yours by adding the `data-fa-kit-code` attribute to any element on the page, or by calling the `setKitCode()` method.
+
+```html
+
+
+
+
+
```
-The `dist-cdn` files come with everything bundled together, so you can use them directly without a build tool. The dist files keep dependencies separate, which lets your bundler optimize and share code more efficiently.
-
-Use `dist-cdn` if you're loading directly in the browser or from a CDN. Use `dist` if you're using a bundler like Webpack or Vite.
+:::info
+Not a Font Awesome user yet? [Learn more about Font Awesome icon packs](https://fontawesome.com/) and sign up for an account to unlock them!
+:::
## React Users
diff --git a/packages/webawesome/docs/docs/layout.njk b/packages/webawesome/docs/docs/layout.njk
index 7f5ee2f18..d24e66be5 100644
--- a/packages/webawesome/docs/docs/layout.njk
+++ b/packages/webawesome/docs/docs/layout.njk
@@ -52,13 +52,13 @@ Layout components are included in Web Awesome's [autoloader](/docs/#quick-start-
Layout utilities are bundled with all [style utilities](/docs/utilities). You can import all Web Awesome page styles (including [native styles](/docs/utilities/native/)) by including the following stylesheet in your project:
```html
-
+
```
Or, you can choose to import _only_ the utilities:
```html
-
+
```
{% endmarkdown %}
diff --git a/packages/webawesome/docs/docs/localization.md b/packages/webawesome/docs/docs/localization.md
index 3a4323229..61b82f5a0 100644
--- a/packages/webawesome/docs/docs/localization.md
+++ b/packages/webawesome/docs/docs/localization.md
@@ -27,7 +27,7 @@ Web Awesome ships with [a number of translations](https://github.com/shoelace-st
You can import translations using the following syntax, where `` is replaced with any language code shown above.
```js
-import '{% cdnUrl "translations/.js" %}';
+import '/dist/translations/.js';
```
You do not need to load translations up front. You can import them dynamically even after updating the `lang` attribute. Once a translation is registered, localized components will update automatically.
@@ -37,7 +37,7 @@ You do not need to load translations up front. You can import them dynamically e
document.documentElement.lang = 'de';
// Import the translation
-import('{% cdnUrl "translations/.js" %}');
+import('/translations/.js');
```
### Translation Resolution
diff --git a/packages/webawesome/docs/docs/themes.njk b/packages/webawesome/docs/docs/themes.njk
index 54f012862..289e2104c 100644
--- a/packages/webawesome/docs/docs/themes.njk
+++ b/packages/webawesome/docs/docs/themes.njk
@@ -86,16 +86,50 @@ to create a project with any one of these themes.
Using This Theme
+
{% for theme in themer.themes %}
-
-
- To import this theme, apply the following classes to the <html> element and import the theme's stylesheet.
-
+ In your project's Settings, Edit Your Theme to open the Theme Builder. Select {{ theme.filename | stripExtension | capitalize }} as your Starting Theme.
+
+
For Free Projects:
+
+ In your project's Settings, set your Theme to {{ theme.filename | stripExtension | capitalize }} and your Color Palette to {{ theme.palette.filename | stripExtension | capitalize }}.
+
+
Save your theme and watch it come to life anywhere you're using your project.
+
+
+
+
+ To use this theme, import the theme's stylesheet:
+
diff --git a/packages/webawesome/docs/docs/usage.md b/packages/webawesome/docs/docs/usage.md
index b21fcc455..5091881a7 100644
--- a/packages/webawesome/docs/docs/usage.md
+++ b/packages/webawesome/docs/docs/usage.md
@@ -40,6 +40,7 @@ await allDefined();
By default, `allDefined()` will wait for all `wa-` prefixed custom elements within the current `document` to be registered.
You can customize this behavior by passing in options:
+
- `root` allows you to pass in a different element to search within, or a different document entirely (defaults to `document`).
- `match` allows you to specify a custom function to determine which elements to wait for. This function should return `true` for elements you want to wait for and `false` for those you don't.
- `additionalElements` allows you to wait for custom elements to be defined that may not be present in the DOM at the time `allDefined()` is called. This can be useful for elements that are loaded dynamically via JS.
@@ -52,7 +53,7 @@ import { allDefined } from '/dist/webawesome.js';
await allDefined({
match: tagName => tagName.startsWith('wa-') || tagName === 'my-component',
root: document.getElementById('sidebar'),
- additionalElements: ['wa-slider', 'other-slider']
+ additionalElements: ['wa-slider', 'other-slider'],
});
```
@@ -194,12 +195,11 @@ Web Awesome ships with a file called `vscode.html-custom-data.json` that can be
If `settings.json` already exists, simply add the above line to the root of the object. Note that you may need to restart VS Code for the changes to take effect.
-If you are using WebAwesome through the [CDN](/docs/#quick-start-autoloading-via-cdn) you can manually [download the file]({% cdnUrl 'vscode.html-custom-data.json' %}]({% cdnUrl 'vscode.html-custom-data.json' %}) instead.
-
### JetBrains IDEs
-If you are using a [JetBrains IDE](https://www.jetbrains.com/) and you are installing Web Awesome from NPM, the editor will automatically detect the web-types.json file from the package and you should immediately see component information in your editor.
-If you are installing from the CDN, you can [download a local copy]({% cdnUrl 'web-types.json' %}) and add it to the root of your project. Be sure to add a reference to the web-types.json file in your package.json in order for your editor to properly detect it.
+If you are using a [JetBrains IDE](https://www.jetbrains.com/) and you are installing Web Awesome from NPM, the editor will automatically detect the `web-types.json` file from the package and you should immediately see component information in your editor.
+
+Be sure to add a reference to the `web-types.json` file in your `package.json` in order for your editor to properly detect it.
```json
{
diff --git a/packages/webawesome/docs/docs/utilities/index.njk b/packages/webawesome/docs/docs/utilities/index.njk
index 0ff7e2ee2..abbc7aa26 100644
--- a/packages/webawesome/docs/docs/utilities/index.njk
+++ b/packages/webawesome/docs/docs/utilities/index.njk
@@ -52,13 +52,13 @@ layout: docs
To use all Web Awesome page styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project:
```html
-
+
```
Or, to _only_ include utilities:
```html
-
+
```
{% endmarkdown %}
diff --git a/packages/webawesome/docs/docs/utilities/native.md b/packages/webawesome/docs/docs/utilities/native.md
index 00d825c44..4f80edcac 100644
--- a/packages/webawesome/docs/docs/utilities/native.md
+++ b/packages/webawesome/docs/docs/utilities/native.md
@@ -12,14 +12,14 @@ Native styles use design tokens to spruce up native HTML elements so that they m
To use all Web Awesome styles (including [utilities](/docs/utilities/)), include the following stylesheet in your project:
```html
-
+
```
Or, if you only want styles for native elements, include the default theme and native styles individually:
```html
-
-
+
+
```
You can additionally include any pre-made [theme](/docs/themes/) or [color palette](/docs/color-palettes/) to change the look of native elements.
@@ -30,10 +30,18 @@ Native styles set default space between many block-level HTML elements using the
```html {.example}
Curabitur odio ligula
-
Fusce mollis quam lorem, et gravida arcu laoreet ut. Pellentesque et malesuada mi. Morbi faucibus nisl nec nulla porta, ac scelerisque elit finibus.
-
The Road goes ever on and on
-Out from the door where it began.
-
Donec varius, ipsum sit amet lobortis tristique, quam arcu pellentesque turpis, non porta lacus arcu non arcu. Morbi luctus at nisl sit amet faucibus.
+
+ Fusce mollis quam lorem, et gravida arcu laoreet ut. Pellentesque et malesuada mi. Morbi faucibus nisl nec nulla
+ porta, ac scelerisque elit finibus.
+
+
+ The Road goes ever on and on
+ Out from the door where it began.
+
+
+ Donec varius, ipsum sit amet lobortis tristique, quam arcu pellentesque turpis, non porta lacus arcu non arcu. Morbi
+ luctus at nisl sit amet faucibus.
+