mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-19 07:29:14 +00:00
Compare commits
1 Commits
konnorroge
...
carousel-f
| Author | SHA1 | Date | |
|---|---|---|---|
|
4c7aa3f164 |
14
package-lock.json
generated
14
package-lock.json
generated
@@ -589,10 +589,6 @@
|
||||
"node": ">=12.17"
|
||||
}
|
||||
},
|
||||
"node_modules/@awesome.me/webawesome": {
|
||||
"resolved": "packages/webawesome",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
"version": "7.23.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
|
||||
@@ -2488,6 +2484,10 @@
|
||||
"resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-3.2.1.tgz",
|
||||
"integrity": "sha512-r4C9C/5kSfMBIr0D9imvpRdCNXtUNgyYThc4YlS6K5Hchv1UyxNQ9mxwj+BTRH2i1Neits260sR3OjKMnplsFA=="
|
||||
},
|
||||
"node_modules/@shoelace-style/webawesome": {
|
||||
"resolved": "packages/webawesome",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/@shoelace-style/webawesome-pro": {
|
||||
"resolved": "packages/webawesome-pro",
|
||||
"link": true
|
||||
@@ -13974,8 +13974,8 @@
|
||||
}
|
||||
},
|
||||
"packages/webawesome": {
|
||||
"name": "@awesome.me/webawesome",
|
||||
"version": "3.0.0-beta.1",
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"version": "3.0.0-alpha.13",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^4.1.0",
|
||||
@@ -13994,7 +13994,7 @@
|
||||
},
|
||||
"packages/webawesome-pro": {
|
||||
"name": "@shoelace-style/webawesome-pro",
|
||||
"version": "3.0.0-beta.1",
|
||||
"version": "3.0.0-alpha.13",
|
||||
"license": "TODO",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^4.1.0",
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
Visit our documentation! <https://webawesome.com>
|
||||
@@ -123,9 +123,6 @@ export default async function (eleventyConfig) {
|
||||
/** This largely mimics what an app would do and just stubs out what we don't care about. */
|
||||
return nunjucks.renderString(content, {
|
||||
// Stub the server EJS shortcodes.
|
||||
currentUser: {
|
||||
hasPro: false,
|
||||
},
|
||||
server: {
|
||||
head: '',
|
||||
loginOrAvatar: '',
|
||||
|
||||
@@ -715,10 +715,7 @@ export const elementPresets = themes.map(theme => ({
|
||||
* All palettes used by themes in a simple array.
|
||||
*/
|
||||
export const palettes = themes
|
||||
.map(theme => ({
|
||||
...theme.palette,
|
||||
isPro: theme.isPro,
|
||||
}))
|
||||
.map(theme => theme.palette)
|
||||
.filter(
|
||||
(palette, index, array) =>
|
||||
array.findIndex(p => p.name === palette.name && p.filename === palette.filename) === index,
|
||||
|
||||
@@ -12,7 +12,6 @@
|
||||
<h2>Resources</h2>
|
||||
<ul>
|
||||
<li><a href="https://github.com/shoelace-style/webawesome/discussions" target="_blank">Help & Support</a></li>
|
||||
<li><a href="https://github.com/shoelace-style/webawesome/">Source Code</a></li>
|
||||
<li><a href="/docs/resources/community">Community</a></li>
|
||||
<li><a href="/docs/resources/accessibility">Accessibility</a></li>
|
||||
<li><a href="/docs/resources/browser-support">Browser Support</a></li>
|
||||
@@ -316,15 +315,12 @@
|
||||
</ul>
|
||||
</wa-details>
|
||||
|
||||
<!-- Theming -->
|
||||
<h2>Theming</h2>
|
||||
<!-- Color Palettes & Themes -->
|
||||
<h2>Color Palettes & Themes</h2>
|
||||
<ul>
|
||||
<li><a href="/docs/color-palettes">Color Palettes</a></li>
|
||||
<li><a href="/docs/themes">Themes</a></li>
|
||||
<li>
|
||||
<a href="/themer" data-turbo="false">Theme Builder</a>
|
||||
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
|
||||
</li>
|
||||
<li><a href="/themer" data-turbo="false">Theme Builder</a></li>
|
||||
</ul>
|
||||
|
||||
<!-- Design tokens -->
|
||||
|
||||
@@ -99,7 +99,7 @@ wa-page > header {
|
||||
#sidebar,
|
||||
#outline {
|
||||
h2 {
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-size: var(--wa-font-size-m);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -108,16 +108,7 @@ wa-page > header {
|
||||
}
|
||||
|
||||
wa-details {
|
||||
--spacing: 0;
|
||||
|
||||
&::part(header) {
|
||||
padding: 0;
|
||||
padding-block-start: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
&::part(content) {
|
||||
padding-block-start: var(--wa-space-m);
|
||||
}
|
||||
--spacing: var(--wa-space-xs);
|
||||
|
||||
&::part(base) {
|
||||
border: none;
|
||||
@@ -180,7 +171,6 @@ wa-page > header {
|
||||
|
||||
/* Pro badges */
|
||||
wa-badge.pro {
|
||||
color: white;
|
||||
background-color: var(--wa-brand-orange);
|
||||
border-color: var(--wa-brand-orange);
|
||||
}
|
||||
@@ -415,7 +405,6 @@ wa-page > main:has(> .search-list) {
|
||||
|
||||
wa-card {
|
||||
--spacing: var(--wa-space-m);
|
||||
box-shadow: none;
|
||||
|
||||
[slot='header'] {
|
||||
display: flex;
|
||||
@@ -428,11 +417,6 @@ wa-page > main:has(> .search-list) {
|
||||
justify-content: center;
|
||||
min-block-size: calc(6rem + var(--spacing));
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--wa-color-brand-border-loud);
|
||||
box-shadow: 0 0 0 0.0625rem var(--wa-color-brand-border-loud);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Color Palettes
|
||||
description: 'Color palettes give you a full spectrum of colors to add life to your project.'
|
||||
layout: page
|
||||
isPro: true
|
||||
---
|
||||
|
||||
<p>Color palettes give you a full spectrum of colors to add life to your project.</p>
|
||||
@@ -13,36 +14,9 @@ layout: page
|
||||
{% endfor %}
|
||||
|
||||
<div id="color-palettes">
|
||||
{% raw %}
|
||||
{% if not currentUser.hasPro %}
|
||||
<p>
|
||||
Additional palettes are available to pro users. Please <a href="/login">login to view pro palettes</a>.
|
||||
</p>
|
||||
{% endif %}
|
||||
{% endraw %}
|
||||
<wa-radio-group id="palette-picker" label="Color Palette" value="default" orientation="horizontal">
|
||||
{% for palette in themer.palettes %}
|
||||
{% if not palette.isPro %}
|
||||
<wa-radio
|
||||
class="palette-card"
|
||||
value="{{ palette.name | lower }}"
|
||||
>
|
||||
{{ palette.name }}
|
||||
</wa-radio>
|
||||
{% else %}
|
||||
{% raw %}
|
||||
{% if currentUser.hasPro %}
|
||||
{% endraw %}
|
||||
<wa-radio
|
||||
class="palette-card"
|
||||
value="{{ palette.name | lower }}"
|
||||
>
|
||||
{{ palette.name }}
|
||||
</wa-radio>
|
||||
{% raw %}
|
||||
{% endif %}
|
||||
{% endraw %}
|
||||
{% endif %}
|
||||
<wa-radio class="palette-card" value="{{ palette.name | lower }}">{{ palette.name }}</wa-radio>
|
||||
{% endfor %}
|
||||
</wa-radio-group>
|
||||
|
||||
@@ -150,16 +124,13 @@ layout: page
|
||||
border: 1px solid var(--wa-color-surface-border);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-align: center;
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.palette-card:not(:state(disabled)) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.palette-card:state(checked) {
|
||||
border-color: var(--wa-color-brand-border-loud);
|
||||
background-color: var(--wa-color-brand-fill-quiet);
|
||||
|
||||
@@ -26,8 +26,8 @@ If you're using a bundler, make sure it comes _before_ any components are import
|
||||
// Make sure this import is first.
|
||||
import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
|
||||
|
||||
import '@awesome.me/webawesome/dist/components/button/button.js';
|
||||
import '@awesome.me/webawesome/dist/components/input/input.js';
|
||||
import 'webawesome/dist/components/button/button.js';
|
||||
import 'webawesome/dist/components/input/input.js';
|
||||
```
|
||||
|
||||
## Enable Server Rendering
|
||||
@@ -43,7 +43,7 @@ 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: ['webawesome/dist/components/button/button.js', 'webawesome/dist/components/input/input.js'],
|
||||
});
|
||||
```
|
||||
|
||||
@@ -114,4 +114,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`.
|
||||
- `<wa-icon>` has no fallback if there's no JS besides a blank `<svg>`. There's perhaps some backend mechanisms we can use to fetch. But requires altering APIs. Should also have a way to set height / widths, but we don't want to increase pain for SSR users.
|
||||
- `<wa-qr-code>` QR Code will not error on the backend and will render a blank canvas at the appropriate size, but will not render the canvas until the client component connects.
|
||||
- `setBasePath` and `kit codes` may need reconfiguring to work with SSR.
|
||||
- `setBasePath` and `kit codes` may need reconfiguring to work with SSR.
|
||||
|
||||
@@ -14,7 +14,9 @@ Thank you so much for backing us!
|
||||
- [Get help / ask a question](https://github.com/shoelace-style/webawesome/discussions)
|
||||
- [See what's new since the last version](/docs/resources/changelog)
|
||||
|
||||
Welcome to Web Awesome beta! [Learn more](https://webawesome.com/) about this project and [how to contribute to it.](https://webawesome.com/docs/resources/contributing)
|
||||
:::warning
|
||||
As a Web Awesome backer, this beta release is _just for you_. Please refrain from sharing it for the time being!
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
@@ -58,7 +60,11 @@ Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You
|
||||
|
||||
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
|
||||
### Installing via npm
|
||||
|
||||
An npm package isn't yet available, but we'll have one soon! For now, please enjoy [Web Awesome from the CDN](#quick-start-autoloading-via-cdn).
|
||||
|
||||
### Cherry Picking
|
||||
|
||||
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. You'll still need to include the default theme (`styles/themes/default.css`) or another theme to style any imported components.
|
||||
|
||||
@@ -80,32 +86,6 @@ You can copy and paste the code to import a component from the "Importing" secti
|
||||
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.
|
||||
:::
|
||||
|
||||
### Installing via npm
|
||||
|
||||
```bash
|
||||
npm install @awesome.me/webawesome
|
||||
```
|
||||
|
||||
And then in your JavaScript files, import the components you need.
|
||||
|
||||
:::warning
|
||||
Web Awesome does not a provide a single import with all Web Awesome components. Instead, you must "cherry pick" the components you want to use.
|
||||
:::
|
||||
|
||||
```js
|
||||
// import the Web Awesome base stylesheet
|
||||
import "@awesome.me/webawesome/dist/styles/webawesome.css"
|
||||
|
||||
// import the default "theme"
|
||||
import "@awesome.me/webawesome/dist/styles/themes/default.css"
|
||||
|
||||
// <wa-button>
|
||||
import "@awesome.me/webawesome/dist/components/button/button.js"
|
||||
// <wa-input>
|
||||
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.
|
||||
|
||||
### Setting the Base Path
|
||||
|
||||
@@ -115,12 +95,12 @@ Some components rely on assets (icons, images, etc.) and Web Awesome needs to kn
|
||||
|
||||
```html
|
||||
<!-- Option 1: the data-webawesome attribute -->
|
||||
<script src="bundle.js" data-webawesome="/path/to/webawesome/dist"></script>
|
||||
<script src="bundle.js" data-webawesome="/path/to/web-awesome/dist"></script>
|
||||
|
||||
<!-- Option 2: the setBasePath() method -->
|
||||
<script type="module">
|
||||
import { setBasePath } from '/path/to/webawesome/dist/webawesome.js';
|
||||
setBasePath('/path/to/webawesome/dist');
|
||||
import { setBasePath } from '/path/to/web-awesome/dist/webawesome.js';
|
||||
setBasePath('/path/to/web-awesome/dist');
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -130,7 +110,7 @@ Most of the magic behind assets is handled internally by Web Awesome, but if you
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
import { getBasePath, setBasePath } from '/path/to/webawesome/dist/webawesome.js';
|
||||
import { getBasePath, setBasePath } from '/path/to/web-awesome/dist/webawesome.js';
|
||||
|
||||
setBasePath('/path/to/assets');
|
||||
|
||||
@@ -143,14 +123,3 @@ Most of the magic behind assets is handled internally by Web Awesome, but if you
|
||||
const assetPath = getBasePath('file.ext');
|
||||
</script>
|
||||
```
|
||||
|
||||
## The difference between `/dist` and `/dist-cdn`
|
||||
|
||||
If you have Web Awesome installed locally via NPM, you'll notice 2 directories. `/dist-cdn` and `/cdn`.
|
||||
|
||||
The `/dist-cdn` files are bundled differently than the `/dist` files. The `/dist-cdn` files come pre-bundled, which means all dependencies are "inlined" so there are no "bare" references like `import "lit"`. The `/dist` files **DO NOT** come pre-bundled, allowing your bundler of choice to more efficiently de-duplicate dependencies, resulting in smaller bundles and optimal code sharing.
|
||||
|
||||
TLDR:
|
||||
|
||||
- `@awesome.me/webawesome/dist-cdn` is for CDNs or people not using a bundler.
|
||||
- `@awesome.me/webawesome/dist` is for bundlers or importmaps.
|
||||
@@ -4,46 +4,6 @@ description: Layout components and utility classes help you organize content tha
|
||||
layout: docs
|
||||
---
|
||||
|
||||
<p>
|
||||
{% markdown %}
|
||||
{{ description }}
|
||||
{% endmarkdown %}
|
||||
</p>
|
||||
|
||||
<div class="search-list">
|
||||
<wa-input class="search-list-input" type="search" placeholder="Search layout utilities" autofocus>
|
||||
<wa-icon name="search" slot="start"></wa-icon>
|
||||
</wa-input>
|
||||
|
||||
<section class="search-list-grid">
|
||||
{% for page in collections.layoutUtilities | sort(false, false, 'data.title') %}
|
||||
<a href="{{ page.url }}">
|
||||
<wa-card with-header="" appearance="outlined">
|
||||
<div slot="header">
|
||||
{# Look for an icon based on the page name #}
|
||||
{% set iconPath = "svgs/layout/" + page.fileSlug + ".njk" %}
|
||||
{% set iconContent %}{% include iconPath ignore missing %}{% endset %}
|
||||
{% if iconContent.trim() %}
|
||||
{# An icon exists! Show it #}
|
||||
{{ iconContent | safe }}
|
||||
{% else %}
|
||||
{# Fallback to the placeholder #}
|
||||
{% include 'svgs/thumbnail-placeholder.njk' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<span class="page-name">{{ page.data.title }}</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</section>
|
||||
<div class="search-list-empty" hidden>
|
||||
No results found
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<wa-divider style="--spacing: var(--wa-space-3xl);"></wa-divider>
|
||||
|
||||
<div class="max-line-length">
|
||||
{% markdown %}
|
||||
## Installation
|
||||
|
||||
@@ -61,4 +21,3 @@ Or, you can choose to import _only_ the utilities:
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
|
||||
```
|
||||
{% endmarkdown %}
|
||||
</div>
|
||||
|
||||
@@ -25,12 +25,11 @@ Many of these changes and improvements were the direct result of feedback from u
|
||||
- Removed `.wa-button`, `.wa-callout` classes
|
||||
- Removed `themes/native/*.css` files; use `native.css` to opt into native styles
|
||||
- Clarified which utilities classes can be applied to which native elements
|
||||
- Renamed the `classic` theme to `shoelace`
|
||||
- Removed `:root` selector from all theme, color palette, and semantic color stylesheets except for the default theme and colors. All of these styles are now solely scoped to classes, such as `.wa-theme-awesome`, `.wa-palette-bright`, and `.wa-brand-orange`.
|
||||
- Removed most custom properties from components that can otherwise be styled with `::part()` selectors and standard CSS properties.
|
||||
- Renamed `pulse` attribute in `<wa-badge>` to `attention="pulse"` and added `attention="bounce"` [issue:#940]
|
||||
- Renamed the `vertical` attribute to `orientation="vertical"` in `<wa-split-panel>` and `<wa-divider>` to align with other components and the platform [issue:674]
|
||||
- Renamed certain boolean attributes to be consistent using the `with-*` and `without-*` pattern:
|
||||
- 🚨 BREAKING: Removed the extra dash in the `<wa-carousel>` CSS part name `pagination-item--active` => `pagination-item-active`
|
||||
- 🚨 BREAKING: Renamed the `classic` theme to `shoelace`
|
||||
- 🚨 BREAKING: Renamed `pulse` attribute in `<wa-badge>` to `attention="pulse"` and added `attention="bounce"` [issue:#940]
|
||||
- 🚨 BREAKING: Renamed the `vertical` attribute to `orientation="vertical"` in `<wa-split-panel>` and `<wa-divider>` to align with other components and the platform [issue:674]
|
||||
- 🚨 BREAKING: Renamed certain boolean attributes to be consistent using the `with-*` and `without-*` pattern:
|
||||
- `<wa-button caret>` => `<wa-button with-caret>`
|
||||
- `<wa-color-picker no-format-toggle>` => `<wa-color-picker without-format-toggle>`
|
||||
- `<wa-format-number no-grouping>` => `<wa-format-number without-grouping>`
|
||||
|
||||
@@ -45,4 +45,4 @@ Follow [@webawesomer](https://twitter.com/webawesomer) on Twitter for general up
|
||||
<wa-button variant="brand" href="https://twitter.com/webawesomer" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
|
||||
<wa-icon name="twitter" family="brands" slot="start"></wa-icon>
|
||||
Follow on Twitter
|
||||
</wa-button>
|
||||
</wa-button>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Themes
|
||||
description: Themes galore
|
||||
layout: page
|
||||
isPro: true
|
||||
---
|
||||
|
||||
<div class="wa-stack wa-gap-3xl">
|
||||
@@ -15,43 +16,17 @@ layout: page
|
||||
</div>
|
||||
|
||||
<div id="theme-viewer">
|
||||
{% raw %}
|
||||
{% if not currentUser.hasPro %}
|
||||
<p>
|
||||
Additional themes are available to pro users. Please <a href="/login">login to view pro themes</a>.
|
||||
</p>
|
||||
{% endif %}
|
||||
{% endraw %}
|
||||
|
||||
<wa-radio-group id="theme-picker" label="Theme Selector" value="default" orientation="horizontal">
|
||||
{% for theme in themer.themes %}
|
||||
{% if not theme.isPro %}
|
||||
<wa-radio
|
||||
class="theme-card"
|
||||
value="{{ theme.filename | stripExtension }}"
|
||||
data-description="{{ theme.description }}"
|
||||
data-title="{{ theme.name }}"
|
||||
{% if theme.isPro %}data-is-pro{% endif %}
|
||||
>
|
||||
{{ theme.name }}
|
||||
</wa-radio>
|
||||
{% else %}
|
||||
{% raw %}
|
||||
{% if currentUser.hasPro %}
|
||||
{% endraw %}
|
||||
<wa-radio
|
||||
class="theme-card"
|
||||
value="{{ theme.filename | stripExtension }}"
|
||||
data-description="{{ theme.description }}"
|
||||
data-title="{{ theme.name }}"
|
||||
{% if theme.isPro %}data-is-pro{% endif %}
|
||||
>
|
||||
{{ theme.name }}
|
||||
</wa-radio>
|
||||
{% raw %}
|
||||
{% endif %}
|
||||
{% endraw %}
|
||||
{% endif %}
|
||||
<wa-radio
|
||||
class="theme-card"
|
||||
value="{{ theme.filename | stripExtension }}"
|
||||
data-description="{{ theme.description }}"
|
||||
data-title="{{ theme.name }}"
|
||||
{% if theme.isPro %}data-is-pro{% endif %}
|
||||
>
|
||||
{{ theme.name }}
|
||||
</wa-radio>
|
||||
{% endfor %}
|
||||
</wa-radio-group>
|
||||
</div>
|
||||
@@ -243,15 +218,12 @@ layout: page
|
||||
border: 1px solid var(--wa-color-surface-border);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-align: center;
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
text-transform: capitalize;
|
||||
|
||||
&:not(:state(disabled)) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:state(checked) {
|
||||
border-color: var(--wa-color-brand-border-loud);
|
||||
background-color: var(--wa-color-brand-fill-quiet);
|
||||
|
||||
7
packages/webawesome/docs/docs/tokens/index.md
Normal file
7
packages/webawesome/docs/docs/tokens/index.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Design Tokens
|
||||
description: These custom properties thread through all of Web Awesome's components, giving things a consistent look and feel.
|
||||
layout: docs
|
||||
---
|
||||
|
||||
TODO
|
||||
@@ -1,43 +0,0 @@
|
||||
---
|
||||
title: Design Tokens
|
||||
description: These custom properties thread through all of Web Awesome's components, giving things a consistent look and feel.
|
||||
layout: docs
|
||||
override:tags: []
|
||||
---
|
||||
|
||||
<p>
|
||||
{% markdown %}
|
||||
{{ description }}
|
||||
{% endmarkdown %}
|
||||
</p>
|
||||
|
||||
<div class="search-list">
|
||||
<wa-input class="search-list-input" type="search" placeholder="Search design tokens" autofocus>
|
||||
<wa-icon name="search" slot="start"></wa-icon>
|
||||
</wa-input>
|
||||
|
||||
<section class="search-list-grid">
|
||||
{% for page in collections.tokens | sort(false, false, 'data.title') %}
|
||||
<a href="{{ page.url }}">
|
||||
<wa-card with-header="" appearance="outlined">
|
||||
<div slot="header">
|
||||
{# Look for an icon based on the page name #}
|
||||
{% set iconPath = "svgs/tokens/" + page.fileSlug + ".njk" %}
|
||||
{% set iconContent %}{% include iconPath ignore missing %}{% endset %}
|
||||
{% if iconContent.trim() %}
|
||||
{# An icon exists! Show it #}
|
||||
{{ iconContent | safe }}
|
||||
{% else %}
|
||||
{# Fallback to the placeholder #}
|
||||
{% include 'svgs/thumbnail-placeholder.njk' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<span class="page-name">{{ page.data.title }}</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</section>
|
||||
<div class="search-list-empty" hidden>
|
||||
No results found
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"tags": ["tokens"]
|
||||
}
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Align Items
|
||||
description: Align items utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Cluster
|
||||
description: 'Use the `wa-cluster` class to arrange elements inline with even spacing, allowing items to wrap when space is limited.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Color Variants
|
||||
description: Color utilities allow you to apply the brand, neutral, success, warning, and danger colors from your theme to any element.
|
||||
layout: docs
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
Some Web Awesome components, like `<wa-button>`, allow you to change the color by using a `variant` attribute:
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Flank
|
||||
description: 'Use the `wa-flank` class to position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Reducing FOUCE
|
||||
description: Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.
|
||||
layout: docs
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
Often, components are shown before their logic and styles have had a chance to load, also known as a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/).
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Frame
|
||||
description: 'Use the `wa-frame` class to create a responsive container with consistent proportions to enclose content.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Gap
|
||||
description: Gap utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Grid
|
||||
description: 'Use the `wa-grid` class to arrange elements into rows and columns that automatically adapt to the available space.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
21
packages/webawesome/docs/docs/utilities/index.md
Normal file
21
packages/webawesome/docs/docs/utilities/index.md
Normal file
@@ -0,0 +1,21 @@
|
||||
---
|
||||
title: Style Utilities
|
||||
description:
|
||||
Style utilities are preset rules that let you efficiently customize styles for components and native elements alike.
|
||||
See the [installation instructions](#installation) to use style utilities in your project.
|
||||
layout: docs
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
To use all Web Awesome page styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
```
|
||||
|
||||
Or, to _only_ include utilities:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
|
||||
```
|
||||
@@ -1,66 +0,0 @@
|
||||
---
|
||||
title: Style Utilities
|
||||
description:
|
||||
Style utilities are preset rules that let you efficiently customize styles for components and native elements alike.
|
||||
See the [installation instructions](#installation) to use style utilities in your project.
|
||||
layout: docs
|
||||
---
|
||||
|
||||
<p>
|
||||
{% markdown %}
|
||||
{{ description }}
|
||||
{% endmarkdown %}
|
||||
</p>
|
||||
|
||||
<div class="search-list">
|
||||
<wa-input class="search-list-input" type="search" placeholder="Search style utilities" autofocus>
|
||||
<wa-icon name="search" slot="start"></wa-icon>
|
||||
</wa-input>
|
||||
|
||||
<section class="search-list-grid">
|
||||
{% for page in collections.styleUtilities | sort(false, false, 'data.title') %}
|
||||
<a href="{{ page.url }}">
|
||||
<wa-card with-header="" appearance="outlined">
|
||||
<div slot="header">
|
||||
{# Look for an icon based on the page name #}
|
||||
{% set iconPath = "svgs/tokens/" + page.fileSlug + ".njk" %}
|
||||
{% set iconContent %}{% include iconPath ignore missing %}{% endset %}
|
||||
{% if iconContent.trim() %}
|
||||
{# An icon exists! Show it #}
|
||||
{{ iconContent | safe }}
|
||||
{% else %}
|
||||
{# Fallback to the placeholder #}
|
||||
{% include 'svgs/thumbnail-placeholder.njk' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<span class="page-name">{{ page.data.title }}</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</section>
|
||||
<div class="search-list-empty" hidden>
|
||||
No results found
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<wa-divider style="--spacing: var(--wa-space-3xl);"></wa-divider>
|
||||
|
||||
<div class="max-line-length">
|
||||
{% markdown %}
|
||||
## Installation
|
||||
|
||||
To use all Web Awesome page styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
```
|
||||
|
||||
Or, to _only_ include utilities:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
|
||||
```
|
||||
|
||||
{% endmarkdown %}
|
||||
|
||||
</div>
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Native Styles
|
||||
description: Native styles apply your theme to native HTML elements so they match the look and feel of Web Awesome components.
|
||||
layout: page-outline
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
Web Awesome provides optional Native Styles that make native HTML elements look good so you can continue using what you know and gradually adopt Web Awesome as you see fit.
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Rounding Utilities
|
||||
description: Border radius utilities set an element's border radius property.
|
||||
layout: docs
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Split
|
||||
description: 'Use the `wa-split` class to distribute two or more items evenly across available space, either in a row or a column.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Stack
|
||||
description: 'Use `wa-stack` to arrange elements in the block direction with even spacing.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Text
|
||||
description: Text utility classes combine custom properties from your Web Awesome theme to conveniently style text content.
|
||||
layout: docs
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
Web Awesome includes classes to set multiple text properties at once to style body text, headings, and captions.
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Visually Hidden
|
||||
description: The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
|
||||
layout: docs
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
> "There are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field's label as a common magnifying glass icon is used in its stead."
|
||||
|
||||
@@ -100,7 +100,7 @@ layout: false
|
||||
<div class="wa-flank">
|
||||
<wa-avatar
|
||||
shape="rounded"
|
||||
style="background-color: var(--wa-color-green-60); color: var(--wa-color-green-95)"
|
||||
style="--background-color: var(--wa-color-green-60); --text-color: var(--wa-color-green-95)"
|
||||
>
|
||||
<wa-icon slot="icon" name="sword-laser"></wa-icon>
|
||||
</wa-avatar>
|
||||
@@ -119,7 +119,7 @@ layout: false
|
||||
<div class="wa-flank">
|
||||
<wa-avatar
|
||||
shape="rounded"
|
||||
style="background-color: var(--wa-color-cyan-60); color: var(--wa-color-cyan-95)"
|
||||
style="--background-color: var(--wa-color-cyan-60); --text-color: var(--wa-color-cyan-95)"
|
||||
>
|
||||
<wa-icon slot="icon" name="robot-astromech"></wa-icon>
|
||||
</wa-avatar>
|
||||
@@ -403,7 +403,7 @@ layout: false
|
||||
<a href="" class="wa-flank wa-link-plain" tabindex="-1">
|
||||
<wa-avatar
|
||||
shape="rounded"
|
||||
style="background-color: var(--wa-color-yellow-90); color: var(--wa-color-yellow-50)"
|
||||
style="--background-color: var(--wa-color-yellow-90); --text-color: var(--wa-color-yellow-50)"
|
||||
>
|
||||
<wa-icon slot="icon" name="egg-fried"></wa-icon>
|
||||
</wa-avatar>
|
||||
@@ -435,7 +435,7 @@ layout: false
|
||||
<a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
|
||||
<wa-avatar
|
||||
shape="rounded"
|
||||
style="background-color: var(--wa-color-blue-90); color: var(--wa-color-blue-50)"
|
||||
style="--background-color: var(--wa-color-blue-90); color: var(--wa-color-blue-50)"
|
||||
>
|
||||
<wa-icon slot="icon" name="shield"></wa-icon>
|
||||
</wa-avatar>
|
||||
@@ -449,7 +449,7 @@ layout: false
|
||||
<a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
|
||||
<wa-avatar
|
||||
shape="rounded"
|
||||
style="background-color: var(--wa-color-green-90); color: var(--wa-color-green-50)"
|
||||
style="--background-color: var(--wa-color-green-90); color: var(--wa-color-green-50)"
|
||||
>
|
||||
<wa-icon slot="icon" name="chevrons-up"></wa-icon>
|
||||
</wa-avatar>
|
||||
@@ -463,7 +463,7 @@ layout: false
|
||||
<a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
|
||||
<wa-avatar
|
||||
shape="rounded"
|
||||
style="background-color: var(--wa-color-red-90); color: var(--wa-color-red-50)"
|
||||
style="--background-color: var(--wa-color-red-90); color: var(--wa-color-red-50)"
|
||||
>
|
||||
<wa-icon slot="icon" name="explosion"></wa-icon>
|
||||
</wa-avatar>
|
||||
@@ -477,7 +477,7 @@ layout: false
|
||||
<a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
|
||||
<wa-avatar
|
||||
shape="rounded"
|
||||
style="background-color: var(--wa-color-yellow-90); color: var(--wa-color-yellow-50)"
|
||||
style="--background-color: var(--wa-color-yellow-90); color: var(--wa-color-yellow-50)"
|
||||
>
|
||||
<wa-icon slot="icon" name="moon-stars"></wa-icon>
|
||||
</wa-avatar>
|
||||
|
||||
@@ -266,17 +266,11 @@ layout: page
|
||||
</div>
|
||||
<h1 class="brand-font">Make something <span class="emphasis">awesome</span> with open-source web components</h1>
|
||||
<div class="hero-cta">
|
||||
{%- raw -%}
|
||||
{% if currentUser.hasPro %}
|
||||
<span style="text-align: center; width: 100%; font-size: var(--wa-font-size-l);">Thanks for being a Web Awesome Pro subscriber!</span>
|
||||
{% else %}
|
||||
<span><em>Psst!</em> You can pre-order Web Awesome Pro at a low, guaranteed-for-life price — but not for long. Get in while the gettin’s good.</span>
|
||||
<wa-button class="wa-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
|
||||
<wa-icon slot="start" name="person-running"></wa-icon>
|
||||
Pre-order WA Pro
|
||||
</wa-button>
|
||||
{% endif %}
|
||||
{% endraw %}
|
||||
<span><em>Psst!</em> You can pre-order Web Awesome Pro at a low, guaranteed-for-life price — but not for long. Get in while the gettin’s good.</span>
|
||||
<wa-button class="wa-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
|
||||
<wa-icon slot="start" name="person-running"></wa-icon>
|
||||
Pre-order WA Pro
|
||||
</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
{
|
||||
"name": "@awesome.me/webawesome",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"description": "A forward-thinking library of web components.",
|
||||
"version": "3.0.0-beta.1",
|
||||
"version": "3.0.0-alpha.13",
|
||||
"homepage": "https://webawesome.com/",
|
||||
"author": "Web Awesome",
|
||||
"license": "MIT",
|
||||
@@ -31,9 +28,8 @@
|
||||
"./dist/translations/*": "./dist/translations/*"
|
||||
},
|
||||
"files": [
|
||||
"README.md",
|
||||
"dist",
|
||||
"dist-cdn"
|
||||
"cdn"
|
||||
],
|
||||
"keywords": [
|
||||
"web components",
|
||||
@@ -62,10 +58,7 @@
|
||||
"spellcheck": "cspell \"**/*.{js,ts,json,html,css,md}\" --no-progress --config=\"../../cspell.json\"",
|
||||
"verify": "npm run prettier && npm run build && npm run test",
|
||||
"prepublishOnly": "npm run verify",
|
||||
"check-updates": "npx npm-check-updates --interactive --format group",
|
||||
"print-version": "echo $npm_package_version",
|
||||
"tag-version": "git tag -a \"v$(npm run print-version | tail -n1)\" -m \"tag v$(npm run print-version | tail -n1)\"",
|
||||
"postversion": "npm run tag-version"
|
||||
"check-updates": "npx npm-check-updates --interactive --format group"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.17.0"
|
||||
|
||||
Reference in New Issue
Block a user