Themer 2nd slice: Look & Feel (#920)

* Exclude Create link from sidebar, for reals this time

* Fix bug

* Very rough prototype of look & feel

* a11y

* Clean up data files

* Automatically generate theme metadata

* Read look & feel params straight from theme

* First stab at dimensionality icons

* Fix rounding 0 bug

* Add border width slider

* [Image-comparer] Expose wrapper as part

* [Comparer] `pointer-events: none` while dragging

* Dark mode slider

* Adjust increments and ranges for look + feel sliders

* Fix preview

* Fix bug where dark mode was not inverted

* Ability to select panel from URL

* Create mixin for Vue form controls and use it in `<swatch-select>`

* Prototype of slider min/max icon buttons

* Nx tooltip

* Icons

* Prevent failed request

* info-tip: Support passing text as prop

* Clearable

* [Brutalist] Match `--wa-shadow-offset-x-scale` to `--wa-shadow-offset-y-scale`

* Add 'Blocky' dimension (derived from Awesome theme)

* Only show Reset button when `clearable` is set

* Remove `clearable` from Look & Feel sliders

* Add tooltips to min/max buttons

* Remove superfluous `aria-label`

* Do not assume that all hyphens in URLs mean nesting, make it explicit

* Formatting

* Fix bug where styles were not applied on page load

* Update Subtle dimension to maximize compatibility

* `<wa-scoped>`: Do not allow non-template children

* Workaround for card not updating

* Update Glossy dimension to maximize compatibility

* Sync scrolling between regular and inverted preview

* Fix bug

* Make changing the base theme reset customizations

* Fix palette page

* Remove cancel button from editable text

* Don't error in theme pages

* Update Playful dimension to maximize compatibility

* Rename 'Look and Feel' to 'Elements' for better parallel structure

* Hide dimensionality controls

* Make back icon motion more subtle

* Expand spacing slider bounds

* Add `tabindex="-1"` where missing in theme showcase

* Remove extraneous gap from theme headers

* fix edit button bug

* rename comparer => comparison; fix aria-controls

* Always save theme name on blur

* Add changelog for themer and new patterns category

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>
Co-authored-by: Cory LaViska <cory@abeautifulsite.net>

docs/assets/scripts/permalink.js

@@ -1,4 +1,5 @@
 import { deepEach, deepGet, deepSet } from './util/deep.js';
+import { camelCase, kebabCase } from './util/string.js';
 
 export default class Permalink extends URLSearchParams {
   /** Params changed since last URL I/O */
@@ -22,15 +23,16 @@ export default class Permalink extends URLSearchParams {
   setAll(values, defaults) {
     deepEach(values, (value, key, parent, path) => {
       let fullPath = [...path, key];
-      let param = fullPath.join('-');
-      let defaultValue = deepGet(defaults, fullPath);
+      let param = fullPath.map(kebabCase).join('-');
 
       if (typeof value === 'object') {
         // We'll handle this when we descend into it
         return;
       }
 
-      if (!value || value === defaultValue) {
+      let defaultValue = deepGet(defaults, fullPath);
+
+      if (equals(value, defaultValue)) {
         // Remove the param from the URL
         this.delete(param);
         return;
@@ -40,17 +42,36 @@ export default class Permalink extends URLSearchParams {
     });
   }
 
-  getAll(...args) {
-    if (args.length > 0) {
-      return super.getAll(...args);
-    }
+  /**
+   * Convert the URL params to a (potentially nested) object.
+   * @param {object} options - Options object.
+   * @param {(key: string, value: string) => string[]} options.getPath - Function to get the path of a param.
+   * @returns {object} The nested object.
+   */
+  toObject(options = {}) {
+    // Default getPath() assumes hyphens always mean nesting
+    let { ignoreKeys = [], getPath = param => param.split('-') } = options;
 
     // Get all values as a nested object
-    // Assumes that hyphens always mean nesting
+
     let obj = {};
 
     for (let [key, value] of this.entries()) {
-      let path = key.split('-');
+      let path = getPath(key, value);
+
+      if (path === null || ignoreKeys.includes(key)) {
+        // Skip this param
+        continue;
+      }
+
+      // Default to key if `getPath()` returns undefined
+      path ??= key;
+
+      path = Array.isArray(path) ? path : [path];
+
+      // Camel case any remaining hyphens
+      path = path.map(camelCase);
+
       deepSet(obj, path, value);
     }
 

docs/assets/scripts/tweak/code.js

@@ -45,7 +45,7 @@ export function getThemeCode(theme, options = {}) {
 
     let value = deepGet(theme, [...path, aspect]);
 
-    if (!value) {
+    if (!value && value !== 0) {
       return;
     }
 
@@ -64,8 +64,8 @@ export function getThemeCode(theme, options = {}) {
   if (declarations.length > 0) {
     let cssCode = cssRule(selectors.theme(id), declarations, options);
 
-    let faKitAttribute = ` data-fa-kit-code="${theme.icon.kit}"`;
-    if (theme.icon.kit) {
+    if (theme.icon?.kit) {
+      let faKitAttribute = ` data-fa-kit-code="${theme.icon.kit}"`;
       options.attributes ??= '';
       options.attributes += faKitAttribute;
       cssCode =

docs/assets/scripts/util/string.js

@@ -22,3 +22,21 @@ export function slugify(str) {
     .replace(/\s+/g, '-') // Convert whitespace to hyphens
     .toLowerCase();
 }
+
+/**
+ * Convert a string to camel case.
+ * @param {string} str - The string to convert.
+ * @returns {string} The camel case string.
+ */
+export function camelCase(str) {
+  return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+
+/**
+ * Convert a string to kebab case.
+ * @param {string} str - The string to convert.
+ * @returns {string} The kebab case string.
+ */
+export function kebabCase(str) {
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase();
+}