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

update usage instructions (#1667)

Browse Source
This commit is contained in:
Lindsay M
2025-10-27 21:19:48 -04:00
committed by GitHub
parent e4a4d2eb18
commit 14bd0459df
5 changed files with 212 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
packages/webawesome/docs/docs/color-palettes.njk
View File

@@ -71,42 +71,63 @@ layout: page
{% for palette in themer.palettes %}
<div class="palette-instructions" data-palette="{{ palette.name | lower }}" {% if not loop.first %}hidden{% endif %}>
<wa-tab-group>
<wa-tab panel="projects"><wa-icon name="briefcase" variant="regular"></wa-icon> Projects</wa-tab>
<wa-tab panel="cdn"><wa-icon name="rocket-launch" variant="regular"></wa-icon> CDN</wa-tab>
<wa-tab panel="npm"><wa-icon name="box-open" variant="regular"></wa-icon> npm</wa-tab>
<wa-tab panel="self-hosted"><wa-icon name="file-zipper" variant="regular"></wa-icon> Self-Hosted</wa-tab>
<wa-tab panel="self-hosted"><wa-icon name="arrow-down-to-line" variant="regular"></wa-icon> Self-Hosted</wa-tab>
<wa-tab-panel name="projects">
<h3 class="wa-heading-m">For Pro Projects:</h3>
<p>
In your project's <wa-icon name="gear" variant="regular"></wa-icon> Settings, <wa-icon name="paintbrush" variant="regular"></wa-icon> Edit Your Theme to open the Theme Builder. Select <strong>{{ palette.name | capitalize }}</strong> as your Color Palette.
</p>
<h3 class="wa-heading-m">For Free Projects:</h3>
<p>
In your project's <wa-icon name="gear" variant="regular"></wa-icon> Settings, set your Color Palette to <wa-icon name="swatchbook" variant="regular"></wa-icon> <strong>{{ palette.name | capitalize }}</strong>.
</p>
<p>Save your palette and watch it come to life anywhere you're using your project.</p>
<wa-tab-panel name="cdn">
{% markdown %}
{% if palette.isPro %}
<wa-callout variant="neutral" size="small">
<wa-icon name="info-circle" variant="regular"></wa-icon>
This palette can only be used on teams with a Pro subscription.
</wa-callout>
<br />
{% else %}
**For projects on Free teams:**
1. Head over to your project's <wa-icon name="gear" variant="regular"></wa-icon> **Settings**.
2. Find **Color Palette**. Select <wa-icon name="swatchbook" variant="regular"></wa-icon> **{{ 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 <wa-icon name="gear" variant="regular"></wa-icon> **Settings**.
2. Press <wa-icon name="paintbrush" variant="regular"></wa-icon> **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 %}
</wa-tab-panel>
<wa-tab-panel name="npm">
<p>
To use this theme, import the theme's stylesheet:
</p>
<pre><code class="language-js">import &apos;@awesome.me/webawesome/dist/styles/themes/{{ palette.filename }}&apos;;</code></pre>
<p>
Then apply the following class to the <code>&lt;html&gt;</code> element:
</p>
<pre><code class="language-html">&lt;html class=&quot;wa-palette-{{ palette.name | lower }}&quot;&gt;</code></pre>
{% 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 `<html>` element:
```html
<html class="wa-palette-{{ palette.name | lower }}">
```
{% endmarkdown %}
</wa-tab-panel>
<wa-tab-panel name="self-hosted">
<p>
To use this theme, import the theme's stylesheet:
</p>
<pre><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;/dist/styles/themes/{{ palette.filename }}&quot; /&gt;</code></pre>
<p>
Then apply the following class to the <code>&lt;html&gt;</code> element:
</p>
<pre><code class="language-html">&lt;html class=&quot;wa-palette-{{ palette.name | lower }}&quot;&gt;</code></pre>
{% markdown %}
To use this theme, include the theme's stylesheet:
```html
<link rel="stylesheet" href="/dist/styles/themes/{{ palette.filename }}" />
```
Then apply the following class to the `<html>` element:
```html
<html class="wa-palette-{{ palette.name | lower }}">
```
{% endmarkdown %}
</wa-tab-panel>
</wa-tab-group>
</div>

46
packages/webawesome/docs/docs/layout.njk
View File

@@ -43,22 +43,56 @@ layout: docs
<wa-divider style="--spacing: var(--wa-space-3xl);"></wa-divider>
<div class="max-line-length">
{% markdown %}
## Installation
## Using Layout Utilities
Layout components are included in Web Awesome's [autoloader](/docs/#quick-start-autoloading-via-cdn). You can also import them individually via [cherry picking](/docs/#cherry-picking).
Layout utility classes are bundled with Web Awesome's [style utilities](/docs/utilities). By including style utilities in your project, you'll have access to layout utilities like `.wa-grid` and `.wa-stack`.
{% endmarkdown %}
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:
<wa-tab-group>
<wa-tab panel="cdn"><wa-icon name="rocket-launch" variant="regular"></wa-icon> CDN</wa-tab>
<wa-tab panel="npm"><wa-icon name="box-open" variant="regular"></wa-icon> npm</wa-tab>
<wa-tab panel="self-hosted"><wa-icon name="arrow-down-to-line" variant="regular"></wa-icon> Self-Hosted</wa-tab>
<wa-tab-panel name="cdn">
{% markdown %}
1. Head over to your project's <wa-icon name="gear" variant="regular"></wa-icon> **Settings**.
2. Next to **Features**, select the **CSS utilities** checkbox.
3. **Save Changes** to immediately update anywhere you're using your project.
{% endmarkdown %}
</wa-tab-panel>
<wa-tab-panel name="npm">
{% markdown %}
To use all Web Awesome styles (including [native styles](/docs/utilities/native/)), import the following stylesheet in your project:
```js
import '@awesome.me/webawesome/dist/styles/webawesome.css';
```
Or, if you only want CSS utility classes, import a theme and the utilities individually:
```js
import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/styles/utilities.css';
```
{% endmarkdown %}
</wa-tab-panel>
<wa-tab-panel name="self-hosted">
{% markdown %}
To use all Web Awesome styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project:
```html
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
```
Or, you can choose to import _only_ the utilities:
Or, if you only want CSS utility classes, include a theme and the utilities individually:
```html
<link rel="stylesheet" href="/dist/styles/themes/default.css" />
<link rel="stylesheet" href="/dist/styles/utilities.css" />
```
{% endmarkdown %}
</div>
</wa-tab-panel>
</wa-tab-group>

76
packages/webawesome/docs/docs/themes.njk
View File

@@ -91,42 +91,62 @@ to create a project with any one of these themes.
{% for theme in themer.themes %}
<div class="theme-instructions" data-theme="{{ theme.filename | stripExtension }}" {% if not loop.first %}hidden{% endif %}>
<wa-tab-group>
<wa-tab panel="projects"><wa-icon name="briefcase" variant="regular"></wa-icon> Projects</wa-tab>
<wa-tab panel="cdn"><wa-icon name="rocket-launch" variant="regular"></wa-icon> CDN</wa-tab>
<wa-tab panel="npm"><wa-icon name="box-open" variant="regular"></wa-icon> npm</wa-tab>
<wa-tab panel="self-hosted"><wa-icon name="file-zipper" variant="regular"></wa-icon> Self-Hosted</wa-tab>
<wa-tab panel="self-hosted"><wa-icon name="arrow-down-to-line" variant="regular"></wa-icon> Self-Hosted</wa-tab>
<wa-tab-panel name="projects">
<h3 class="wa-heading-m">For Pro Projects:</h3>
<p>
In your project's <wa-icon name="gear" variant="regular"></wa-icon> Settings, <wa-icon name="paintbrush" variant="regular"></wa-icon> Edit Your Theme to open the Theme Builder. Select <strong>{{ theme.filename | stripExtension | capitalize }}</strong> as your Starting Theme.
</p>
<h3 class="wa-heading-m">For Free Projects:</h3>
<p>
In your project's <wa-icon name="gear" variant="regular"></wa-icon> Settings, set your Theme to <wa-icon name="paintbrush" variant="regular"></wa-icon> <strong>{{ theme.filename | stripExtension | capitalize }}</strong> and your Color Palette to <wa-icon name="swatchbook" variant="regular"></wa-icon> <strong>{{ theme.palette.filename | stripExtension | capitalize }}</strong>.
</p>
<p>Save your theme and watch it come to life anywhere you're using your project.</p>
<wa-tab-panel name="cdn">
{% markdown %}
{% if theme.isPro %}
<wa-callout variant="neutral" size="small">
<wa-icon name="info-circle" variant="regular"></wa-icon>
This theme can only be used on teams with a Pro subscription.
</wa-callout>
<br />
{% else %}
**For projects on Free teams:**
1. Head over to your project's <wa-icon name="gear" variant="regular"></wa-icon> **Settings**.
2. For your **Theme**, select <wa-icon name="paintbrush" variant="regular"></wa-icon> **{{ theme.filename | stripExtension | capitalize }}**.
3. For your **Color Palette**, select <wa-icon name="swatchbook" variant="regular"></wa-icon> **{{ theme.palette.filename | stripExtension | capitalize }}**.
4. Press **Save Changes** to immediately update anywhere you're using your project.
{% endif %}
**For projects on Pro teams:**
1. Head over to your project's <wa-icon name="gear" variant="regular"></wa-icon> **Settings**.
2. Press <wa-icon name="paintbrush" variant="regular"></wa-icon> **Edit Your Theme** to open the Theme Builder.
3. Open **Theme** and select **{{ theme.filename | stripExtension | capitalize }}**.
4. Press **Save Theme** to immediately update anywhere you're using your project.
{% endmarkdown %}
</wa-tab-panel>
<wa-tab-panel name="npm">
<p>
To use this theme, import the theme's stylesheet:
</p>
<pre><code class="language-js">import &apos;@awesome.me/webawesome/dist/styles/themes/{{ theme.filename }}&apos;;</code></pre>
<p>
Then apply the following classes to the <code>&lt;html&gt;</code> element:
</p>
<pre><code class="language-html">&lt;html class=&quot;wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}&quot;&gt;</code></pre>
{% markdown %}
To use this theme, import the theme's stylesheet:
```js
import '@awesome.me/webawesome/dist/styles/themes/{{ theme.filename }}';
```
Then apply the following classes to the `<html>` element:
```html
<html class="wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}">
```
{% endmarkdown %}
</wa-tab-panel>
<wa-tab-panel name="self-hosted">
<p>
To use this theme, import the theme's stylesheet:
</p>
<pre><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;/dist/styles/themes/{{ theme.filename }}&quot; /&gt;</code></pre>
<p>
Then apply the following classes to the <code>&lt;html&gt;</code> element:
</p>
<pre><code class="language-html">&lt;html class=&quot;wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}&quot;&gt;</code></pre>
{% markdown %}
To use this theme, include the theme's stylesheet:
```html
<link rel="stylesheet" href="/dist/styles/themes/{{ theme.filename }}" />
```
Then apply the following classes to the `<html>` element:
```html
<html class="wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}">
```
{% endmarkdown %}
</wa-tab-panel>
</wa-tab-group>
</div>

46
packages/webawesome/docs/docs/utilities/index.njk
View File

@@ -45,22 +45,54 @@ layout: docs
<wa-divider style="--spacing: var(--wa-space-3xl);"></wa-divider>
<div class="max-line-length">
{% markdown %}
## Installation
## Using {{ title }}
{% endmarkdown %}
To use all Web Awesome page styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project:
<wa-tab-group>
<wa-tab panel="cdn"><wa-icon name="rocket-launch" variant="regular"></wa-icon> CDN</wa-tab>
<wa-tab panel="npm"><wa-icon name="box-open" variant="regular"></wa-icon> npm</wa-tab>
<wa-tab panel="self-hosted"><wa-icon name="arrow-down-to-line" variant="regular"></wa-icon> Self-Hosted</wa-tab>
<wa-tab-panel name="cdn">
{% markdown %}
1. Head over to your project's <wa-icon name="gear" variant="regular"></wa-icon> **Settings**.
2. Next to **Features**, select the **CSS utilities** checkbox.
3. **Save Changes** to immediately update anywhere you're using your project.
{% endmarkdown %}
</wa-tab-panel>
<wa-tab-panel name="npm">
{% markdown %}
To use all Web Awesome styles (including [native styles](/docs/utilities/native/)), import the following stylesheet in your project:
```js
import '@awesome.me/webawesome/dist/styles/webawesome.css';
```
Or, if you only want CSS utility classes, import a theme and the utilities individually:
```js
import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/styles/utilities.css';
```
{% endmarkdown %}
</wa-tab-panel>
<wa-tab-panel name="self-hosted">
{% markdown %}
To use all Web Awesome styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project:
```html
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
```
Or, to _only_ include utilities:
Or, if you only want CSS utility classes, include a theme and the utilities individually:
```html
<link rel="stylesheet" href="/dist/styles/themes/default.css" />
<link rel="stylesheet" href="/dist/styles/utilities.css" />
```
{% endmarkdown %}
</div>
</wa-tab-panel>
</wa-tab-group>

37
packages/webawesome/docs/docs/utilities/native.md
View File

@@ -9,18 +9,53 @@ Native styles use design tokens to spruce up native HTML elements so that they m
## Using native styles
<wa-tab-group>
<wa-tab panel="cdn"><wa-icon name="rocket-launch" variant="regular"></wa-icon> CDN</wa-tab>
<wa-tab panel="npm"><wa-icon name="box-open" variant="regular"></wa-icon> npm</wa-tab>
<wa-tab panel="self-hosted"><wa-icon name="arrow-down-to-line" variant="regular"></wa-icon> Self-Hosted</wa-tab>
<wa-tab-panel name="cdn">
{% markdown %}
1. Head over to your project's <wa-icon name="gear" variant="regular"></wa-icon> **Settings**.
2. Next to **Features**, select the **Native styles** checkbox.
3. **Save Changes** to immediately update anywhere you're using your project.
{% endmarkdown %}
</wa-tab-panel>
<wa-tab-panel name="npm">
{% markdown %}
To use all Web Awesome styles (including [utilities](/docs/utilities/)), import the following stylesheet in your project:
```js
import '@awesome.me/webawesome/dist/styles/webawesome.css';
```
Or, if you only want styles for native elements, import a theme and native styles individually:
```js
import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/styles/native.css';
```
{% endmarkdown %}
</wa-tab-panel>
<wa-tab-panel name="self-hosted">
{% markdown %}
To use all Web Awesome styles (including [utilities](/docs/utilities/)), include the following stylesheet in your project:
```html
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
```
Or, if you only want styles for native elements, include the default theme and native styles individually:
Or, if you only want styles for native elements, include a theme and native styles individually:
```html
<link rel="stylesheet" href="/dist/styles/themes/default.css" />
<link rel="stylesheet" href="/dist/styles/native.css" />
```
{% endmarkdown %}
</wa-tab-panel>
</wa-tab-group>
You can additionally include any pre-made [theme](/docs/themes/) or [color palette](/docs/color-palettes/) to change the look of native elements.