diff --git a/docs/_includes/base-wide.njk b/docs/_includes/base-wide.njk
index 58811216a..33c4f9bce 100644
--- a/docs/_includes/base-wide.njk
+++ b/docs/_includes/base-wide.njk
@@ -22,10 +22,10 @@
{# Web Awesome #}
-
-
-
-
+
+
+
+
{# Docs styles #}
diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk
index d0d1bc253..8db9e3c37 100644
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -31,11 +31,11 @@
{# Web Awesome #}
-
-
-
-
-
+
+
+
+
+
{# Docs styles #}
@@ -63,7 +63,7 @@
const newStylesheet = document.createElement("link")
let preset = getPresetTheme()
- newStylesheet.href = `/dist/themes/${preset}.css`
+ newStylesheet.href = `/dist/styles/themes/${preset}.css`
newStylesheet.rel = "preload"
newStylesheet.as = "style"
diff --git a/docs/_layouts/blank.njk b/docs/_layouts/blank.njk
index 38efb0f00..a0fc8f088 100644
--- a/docs/_layouts/blank.njk
+++ b/docs/_layouts/blank.njk
@@ -21,10 +21,10 @@
{# Web Awesome #}
-
-
-
-
+
+
+
+
{# Set the theme to prevent flashing #}
\n` +
- `\n` +
- `\n` +
- `\n` +
- `\n\n` +
+ `\n` +
+ `\n` +
+ `\n` +
+ `\n\n` +
`${code.textContent}`;
const css = 'html > body {\n font: 16px sans-serif;\n padding: 2rem;\n}';
const js = '';
diff --git a/docs/assets/scripts/preset-theme.js b/docs/assets/scripts/preset-theme.js
index 5be7d3c43..be36cce80 100644
--- a/docs/assets/scripts/preset-theme.js
+++ b/docs/assets/scripts/preset-theme.js
@@ -9,7 +9,7 @@
const stylesheet = document.getElementById('theme-stylesheet');
const newStylesheet = Object.assign(document.createElement('link'), {
- href: `/dist/themes/${presetTheme}.css`,
+ href: `/dist/styles/themes/${presetTheme}.css`,
rel: 'preload',
as: 'style'
});
diff --git a/docs/docs/components/code-demo.md b/docs/docs/components/code-demo.md
index c89ce76ef..6407aef97 100644
--- a/docs/docs/components/code-demo.md
+++ b/docs/docs/components/code-demo.md
@@ -81,7 +81,7 @@ There are certain types of elements that are handled specially:
This is useful for including resources in your demo that you don't want rendered outside the demo.
The following example shows both methods.
-It includes all stylesheets on this page whose URLs start with `/dist/themes/`,
+It includes all stylesheets on this page whose URLs start with `/dist/styles/themes/`,
plus any other elements with the class `.demo-import`, plus a CSS file with the class `wa-code-demo-include`:
```html {.example}
diff --git a/docs/docs/customizing.md b/docs/docs/customizing.md
index bcddae924..aef789784 100644
--- a/docs/docs/customizing.md
+++ b/docs/docs/customizing.md
@@ -31,11 +31,11 @@ To customize a theme, simply override any of these custom properties in your own
}
```
-For more examples and further guidance, refer to [Themes](/docs/themes) and the Theming section of this documentation. For a complete list of all custom properties used for theming, refer to `src/themes/default.css` in the project's source code.
+For more examples and further guidance, refer to [Themes](/docs/themes) and the Theming section of this documentation. For a complete list of all custom properties used for theming, refer to `src/styles/themes/default.css` in the project's source code.
## Components
-Whereas a theme offers a high-level way to customize the library, components offer different hooks as a low-level way to customize them individually.
+Whereas a theme offers a high-level way to customize the library, components offer different hooks as a low-level way to customize them individually.
Web Awesome components use a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate their styles and behaviors. As a result, you can't simply target their internals with the usual CSS selectors. Instead, components expose a set of custom properties and CSS parts that can be targeted to customize their appearance.
diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md
index 380cfb630..5e6e37b0b 100644
--- a/docs/docs/experimental/themer.md
+++ b/docs/docs/experimental/themer.md
@@ -903,7 +903,7 @@ hasOutline: false
default:
colorPalette = 'standard';
}
- colorStylesheet.href = `/dist/themes/color_${colorPalette}.css`;
+ colorStylesheet.href = `/dist/styles/color/${colorPalette}.css`;
colorSelect.value = colorPalette;
}
@@ -951,11 +951,11 @@ hasOutline: false
// Depth slider and settings
const depthNames = {
- 0: "depth_0_flat.css",
- 1: "depth_1_semiflat.css",
- 2: "depth_2_chunky.css",
- 3: "depth_3_punchy.css",
- 4: "depth_4_glossy.css",
+ 0: "depth/0_flat.css",
+ 1: "depth/1_semiflat.css",
+ 2: "depth/2_chunky.css",
+ 3: "depth/3_punchy.css",
+ 4: "depth/4_glossy.css",
}
function resetDepthValue() {
@@ -1018,7 +1018,7 @@ hasOutline: false
media: "print",
rel: "stylesheet",
type: "text/css",
- href: `/dist/themes/${depthName}`,
+ href: `/dist/styles/themes/${depthName}`,
})
// This prevents the typical flash and reflow you see if you replace the old stylesheet
@@ -1101,7 +1101,7 @@ hasOutline: false
media: "print",
rel: "stylesheet",
type: "text/css",
- href: `/dist/themes/${theme}.css`,
+ href: `/dist/styles/themes/${theme}.css`,
})
// This prevents the typical flash and reflow you see if you replace the old stylesheet
@@ -1141,7 +1141,7 @@ hasOutline: false
colorSelect.addEventListener('wa-change', event => {
const colorPalette = event.target.value;
- colorStylesheet.href = `/dist/themes/color_${colorPalette}.css`;
+ colorStylesheet.href = `/dist/styles/themes/color/${colorPalette}.css`;
});
// Brand Color
@@ -2131,7 +2131,7 @@ hasOutline: false
<html class="wa-theme-default-dark">
<head>
- <link rel="stylesheet" href="path/to/webawesome/dist/themes/dark.css" />
+ <link rel="stylesheet" href="path/to/webawesome/dist/styles/themes/dark.css" />
</head>
<body>
...
@@ -2524,4 +2524,4 @@ hasOutline: false
-
\ No newline at end of file
+
diff --git a/docs/docs/installation.md b/docs/docs/installation.md
index b9c7049e5..51c210292 100644
--- a/docs/docs/installation.md
+++ b/docs/docs/installation.md
@@ -27,7 +27,7 @@ As a Web Awesome backer, this early alpha release is _just for you_. Please refr
The autoloader is the easiest way to use Web Awesome. A lightweight script watches the DOM for unregistered Web Awesome elements and lazy loads them for you — even if they're added dynamically.
```html
-
+
```
@@ -96,7 +96,7 @@ Cherry picking will only load the components you need up front, while limiting t
Here's an example that loads only the button component.
```html
-
+