From 9c17d27af4b320b4dc3d5e5b08768a2547ebff60 Mon Sep 17 00:00:00 2001 From: Lea Verou Date: Fri, 13 Dec 2024 13:45:33 -0500 Subject: [PATCH] Big CSS Reorg Part 1 (#304) --- docs/_includes/base-wide.njk | 8 +++--- docs/_includes/base.njk | 12 ++++----- docs/_layouts/blank.njk | 10 +++---- docs/assets/scripts/code-examples.js | 8 +++--- docs/assets/scripts/preset-theme.js | 2 +- docs/docs/components/code-demo.md | 2 +- docs/docs/customizing.md | 4 +-- docs/docs/experimental/themer.md | 22 ++++++++-------- docs/docs/installation.md | 4 +-- docs/docs/themes.md | 8 +++--- scripts/build.js | 26 ++++++++++++------- src/{themes => styles}/applied.css | 0 .../color/anodized.css} | 0 .../color/bright.css} | 0 .../color/classic.css} | 0 .../color/elegant.css} | 0 .../color/natural.css} | 0 .../color/rudimentary.css} | 0 .../color/standard.css} | 0 .../depth/0_flat.css} | 0 .../depth/1_semiflat.css} | 0 .../depth/2_chunky.css} | 0 .../depth/3_punchy.css} | 0 .../depth/4_glossy.css} | 0 src/{themes => styles}/forms.css | 0 src/{ => styles}/themes/active.css | 2 +- src/{ => styles}/themes/brutalist.css | 2 +- src/{ => styles}/themes/classic.css | 0 .../themes/classic_components.css | 0 src/{ => styles}/themes/default.css | 0 src/{ => styles}/themes/fa.css | 2 +- src/{ => styles}/themes/glassy.css | 2 +- src/{ => styles}/themes/mellow.css | 2 +- src/{ => styles}/themes/migration.css | 2 +- src/{ => styles}/themes/playful.css | 2 +- src/{ => styles}/themes/premium.css | 2 +- .../index.css => styles/utilities.css} | 1 + .../utilities/align-items.css | 0 .../utilities/border-radius.css | 0 src/{themes => styles}/utilities/gap.css | 0 src/{themes => styles/utilities}/layout.css | 0 .../utilities/scroll-lock.css | 0 src/{themes => styles}/utilities/text.css | 0 web-test-runner.config.js | 2 +- 44 files changed, 67 insertions(+), 58 deletions(-) rename src/{themes => styles}/applied.css (100%) rename src/{themes/color_anodized.css => styles/color/anodized.css} (100%) rename src/{themes/color_bright.css => styles/color/bright.css} (100%) rename src/{themes/color_classic.css => styles/color/classic.css} (100%) rename src/{themes/color_elegant.css => styles/color/elegant.css} (100%) rename src/{themes/color_natural.css => styles/color/natural.css} (100%) rename src/{themes/color_rudimentary.css => styles/color/rudimentary.css} (100%) rename src/{themes/color_standard.css => styles/color/standard.css} (100%) rename src/{themes/depth_0_flat.css => styles/depth/0_flat.css} (100%) rename src/{themes/depth_1_semiflat.css => styles/depth/1_semiflat.css} (100%) rename src/{themes/depth_2_chunky.css => styles/depth/2_chunky.css} (100%) rename src/{themes/depth_3_punchy.css => styles/depth/3_punchy.css} (100%) rename src/{themes/depth_4_glossy.css => styles/depth/4_glossy.css} (100%) rename src/{themes => styles}/forms.css (100%) rename src/{ => styles}/themes/active.css (99%) rename src/{ => styles}/themes/brutalist.css (99%) rename src/{ => styles}/themes/classic.css (100%) rename src/{ => styles}/themes/classic_components.css (100%) rename src/{ => styles}/themes/default.css (100%) rename src/{ => styles}/themes/fa.css (99%) rename src/{ => styles}/themes/glassy.css (99%) rename src/{ => styles}/themes/mellow.css (99%) rename src/{ => styles}/themes/migration.css (99%) rename src/{ => styles}/themes/playful.css (99%) rename src/{ => styles}/themes/premium.css (99%) rename src/{themes/utilities/index.css => styles/utilities.css} (84%) rename src/{themes => styles}/utilities/align-items.css (100%) rename src/{themes => styles}/utilities/border-radius.css (100%) rename src/{themes => styles}/utilities/gap.css (100%) rename src/{themes => styles/utilities}/layout.css (100%) rename src/{themes => styles}/utilities/scroll-lock.css (100%) rename src/{themes => styles}/utilities/text.css (100%) 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
-
+