diff --git a/docs/_data/hueRanges.js b/docs/_data/hueRanges.js index 1f022b31b..63d7400a6 100644 --- a/docs/_data/hueRanges.js +++ b/docs/_data/hueRanges.js @@ -1 +1 @@ -export { hueRanges as default } from '../assets/scripts/tweak/data.js'; +export { hueRanges as default } from '../assets/data/index.js'; diff --git a/docs/_includes/head.njk b/docs/_includes/head.njk index c6bd79be7..215699f92 100644 --- a/docs/_includes/head.njk +++ b/docs/_includes/head.njk @@ -32,7 +32,8 @@ {# Preset Theme #} -{% if forceTheme %} +{% if noTheme %} +{% elif forceTheme %} {% else %} diff --git a/docs/_includes/page-card.njk b/docs/_includes/page-card.njk index b684a3487..d1111fcf0 100644 --- a/docs/_includes/page-card.njk +++ b/docs/_includes/page-card.njk @@ -1,5 +1,5 @@ {%- if not page.data.unlisted -%} - +{% if page.url %}{% endif %}
{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" ignore missing %} @@ -9,5 +9,5 @@ {%- endif %} - +{% if page.url %}{% endif %} {% endif %} diff --git a/docs/_includes/theme-showcase.njk b/docs/_includes/theme-showcase.njk index ff4450985..66bfa4e2f 100644 --- a/docs/_includes/theme-showcase.njk +++ b/docs/_includes/theme-showcase.njk @@ -7,8 +7,8 @@
- - + + diff --git a/docs/_layouts/blank.njk b/docs/_layouts/blank.njk index b02206d95..74bf2477c 100644 --- a/docs/_layouts/blank.njk +++ b/docs/_layouts/blank.njk @@ -2,6 +2,7 @@ {% include 'head.njk' %} + {% block head %}{% endblock %} diff --git a/docs/_layouts/palette.njk b/docs/_layouts/palette.njk index b86bb8bf7..08b7fffe4 100644 --- a/docs/_layouts/palette.njk +++ b/docs/_layouts/palette.njk @@ -122,19 +122,8 @@
{% if hue === 'gray' %} - - {% for h in hues -%} - {%- if h !== 'gray' -%} - - - {{ h | capitalize }} - - {%- endif -%} - {%- endfor -%} -
- Gray undertone -
- + +
-globalThis.wa_data ??= {}; -wa_data.baseTheme = "{{ page.fileSlug }}"; -wa_data.themes = { - {% for theme in collections.theme -%} - "{{ theme.fileSlug }}": { - "title": "{{ theme.data.title }}", - "palette": "{{ theme.data.palette }}", - "brand": "{{ theme.data.brand }}" - }, - {% endfor %} -}; -wa_data.palettes = { - {% for palette in collections.palette -%} - "{{ palette.fileSlug }}": { - "title": "{{ palette.data.title }}", - }, - {% endfor %} -}; - - - + + {% endblock %} {% block header %} + +
- + -
{# end theme app #} {% endmarkdown %} {% endblock %} diff --git a/docs/assets/scripts/tweak/data.js b/docs/assets/data/colors.js similarity index 56% rename from docs/assets/scripts/tweak/data.js rename to docs/assets/data/colors.js index 24c768d6a..2073f902d 100644 --- a/docs/assets/scripts/tweak/data.js +++ b/docs/assets/data/colors.js @@ -1,21 +1,9 @@ /** - * Data related to theme remixing and palette tweaking + * Data related to palettes and colors. * Must work in both browser and Node.js */ -export const cdnUrl = globalThis.document ? document.documentElement.dataset.cdnUrl : '/dist/'; -export const urls = { - theme: id => `styles/themes/${id}.css`, - colors: id => `styles/themes/${id}/color.css`, - palette: id => `styles/color/${id}.css`, - brand: id => `styles/brand/${id}.css`, - typography: id => `styles/themes/${id}/typography.css`, -}; - -export const selectors = { - palette: id => - [':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${id}`].join(',\n'), -}; +export const tints = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95']; export const hueRanges = { red: { min: 5, max: 35 }, // 30 @@ -29,6 +17,9 @@ export const hueRanges = { pink: { min: 320, max: 365 }, // 45 }; +export const hues = Object.keys(hueRanges); +export const allHues = [...hues, 'gray']; + export const moreHue = { red: 'Redder', orange: 'More orange', // https://www.reddit.com/r/grammar/comments/u9n0uo/is_it_oranger_or_more_orange/ @@ -54,20 +45,3 @@ export const maxGrayChroma = { purple: 0.3, pink: 0.25, }; - -export const docsURLs = { - colors: '/docs/themes/', - palette: '/docs/palettes/', - typography: '/docs/themes/', -}; - -export const icons = { - colors: 'palette', - palette: 'swatchbook', - brand: 'droplet', - typography: 'font-case', -}; - -export const hues = Object.keys(hueRanges); - -export const tints = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95']; diff --git a/docs/assets/data/fonts.js b/docs/assets/data/fonts.js new file mode 100644 index 000000000..263e9cab8 --- /dev/null +++ b/docs/assets/data/fonts.js @@ -0,0 +1,65 @@ +import { deepEntries } from '../scripts/util/deep.js'; +import { themeConfig } from './theming.js'; +import themes from '/assets/data/themes.js'; + +/** + * Map of font pairings (body + heading) to the first theme that uses them. + */ +export const pairings = {}; + +// NOTE Do not use Symbols, we want these to be enumerable when used as keys +export const sameAs = { body: '$body' }; + +export const fontNames = { + 'system-ui': 'OS Default', + 'ui-serif': 'OS Default Serif', + 'ui-sans-serif': 'OS Default Sans Serif', + 'ui-monospace': 'OS Default Code Font', + 'ui-monospace': 'OS Default Code Font', +}; + +export function defaultTitle(fonts) { + let { body, heading = sameAs.body } = fonts; + let names = [body]; + + if (heading !== sameAs.body) { + names.unshift(heading); + } + + return names.map(name => fontNames[name] ?? name).join(' • '); +} + +for (let id in themes) { + let theme = themes[id]; + let { fonts } = theme; + + if (fonts) { + let { body, heading = sameAs.body } = fonts; + + pairings[body] ??= {}; + pairings[body][heading] ??= { + id, // First theme that uses this pairing + ids: new Set([id]), // All themes that use this pairing + url: themeConfig.typography.url(id), // Stylesheet URL + fonts, + get title() { + return defaultTitle(this.fonts); + }, + }; + pairings[body][heading].ids.add(id); + } +} + +export const pairingsEntries = deepEntries(pairings, { + descend(value, key, parent, path) { + if (value?.fonts) { + return false; // Don't recurse into pairing objects + } + }, + filter(value, key, parent, path) { + // Only keep 2 levels (body → heading → pairing) + return path.length === 1; + }, +}); + +export const pairingsList = pairingsEntries.map(arg => arg.at(-1)); diff --git a/docs/assets/data/icons.js b/docs/assets/data/icons.js new file mode 100644 index 000000000..61a78295c --- /dev/null +++ b/docs/assets/data/icons.js @@ -0,0 +1,7 @@ +export const iconLibraries = { + default: { + title: 'Font Awesome', + family: ['classic', 'sharp', 'duotone', 'sharp-duotone'], + style: ['solid', 'regular', 'light', 'thin'], + }, +}; diff --git a/docs/assets/data/index.js b/docs/assets/data/index.js new file mode 100644 index 000000000..f544aeb11 --- /dev/null +++ b/docs/assets/data/index.js @@ -0,0 +1,6 @@ +export * from './colors.js'; +// export * from './fonts.js'; +export * from './icons.js'; +export * from './theming.js'; + +export const cdnUrl = globalThis.document ? document.documentElement.dataset.cdnUrl : '/dist/'; diff --git a/docs/assets/data/palettes.js.njk b/docs/assets/data/palettes.js.njk new file mode 100644 index 000000000..2cbcaa039 --- /dev/null +++ b/docs/assets/data/palettes.js.njk @@ -0,0 +1,32 @@ +--- +layout: null +permalink: '/assets/data/palettes.js' +eleventyExcludeFromCollections: true +--- +export default { +{%- for palette in collections.palette | sort %} +{%- if not palette.data.unlisted %} + {% set paletteId = palette.fileSlug -%} + {%- set colors = palettes[paletteId] -%} + '{{ paletteId }}': { + id: '{{ paletteId }}', + title: '{{ palette.data.title }}', + colors: { + {% for hue, tints in colors -%} + '{{ hue }}': { + {% for tint, value in tints -%} + {%- if tint != '05' -%} + '{{ '05' if tint == '5' else tint }}': '{{ value | safe }}', + {%- endif %} + {% endfor %} + + get key() { + return this[this.maxChromaTint]; + } + }, + {% endfor -%} // end colors + } + }, // end palette +{%- endif -%} +{% endfor %} +}; diff --git a/docs/assets/data/themes.js.njk b/docs/assets/data/themes.js.njk new file mode 100644 index 000000000..4f8715d1a --- /dev/null +++ b/docs/assets/data/themes.js.njk @@ -0,0 +1,22 @@ +--- +layout: null +permalink: '/assets/data/themes.js' +eleventyExcludeFromCollections: true +--- +export default { +{%- for theme in collections.theme | sort %} +{%- if not theme.data.unlisted %} + {% set themeId = theme.fileSlug -%} + {%- set colors = themes[themeId] -%} + '{{ themeId }}': { + id: '{{ themeId }}', + title: '{{ theme.data.title }}', + palette: '{{ theme.data.palette }}', + brand: '{{ theme.data.brand }}', + isPro: {{ theme.data.isPro or 'pro' in theme.data.tags }}, + fonts: {{ (theme.data.fonts | dump or 'null') | safe }}, + icons: {{ (theme.data.icons | dump or 'null') | safe }}, + }, +{%- endif %} +{% endfor %} +}; diff --git a/docs/assets/data/theming.js b/docs/assets/data/theming.js new file mode 100644 index 000000000..d10edb668 --- /dev/null +++ b/docs/assets/data/theming.js @@ -0,0 +1,82 @@ +import { deepEach, isPlainObject } from '../scripts/util/deep.js'; + +/** + * Data related to themes, theme remixing + * Must work in both browser and Node.js + */ +export const cdnUrl = globalThis.document ? document.documentElement.dataset.cdnUrl : '/dist/'; + +// This should eventually replace all uses of `urls` and `themeParams` +export const themeConfig = { + base: { url: id => `styles/themes/${id}.css`, default: 'default' }, + colors: { + url: id => `styles/themes/${id}/color.css`, + docs: '/docs/themes/', + icon: 'palette', + default() { + return this.base; + }, + }, + palette: { + url: id => `styles/color/${id}.css`, + docs: '/docs/palette/', + icon: 'swatchbook', + default(baseTheme) { + return baseTheme?.palette; + }, + }, + brand: { + url: id => `styles/brand/${id}.css`, + icon: 'droplet', + default(baseTheme) { + return baseTheme?.brand; + }, + }, + typography: { + url: id => `styles/themes/${id}/typography.css`, + docs: '/docs/themes/', + icon: 'font-case', + default() { + return this.base; + }, + }, + icon: { + library: { cssProperty: '--wa-icon-library', default: 'default' }, + family: { + cssProperty: '--wa-icon-family', + default(baseTheme) { + return baseTheme?.icon?.family ?? 'classic'; + }, + }, + style: { + cssProperty: '--wa-icon-variant', + default(baseTheme) { + return baseTheme?.icon?.style ?? 'solid'; + }, + }, + }, +}; + +// Shallow remixing params in correct order +// base must be first. brand needs to come after palette, which needs to come after colors. +export const themeParams = Object.keys(themeConfig).filter(aspect => themeConfig[aspect].url); + +export const urls = themeParams.reduce((acc, aspect) => { + acc[aspect] = themeConfig[aspect].url; + return acc; +}, {}); + +export const themeDefaults = { ...themeConfig }; + +deepEach(themeDefaults, (value, key, parent, path) => { + if (isPlainObject(value)) { + // Replace w/ default value or shallow clone + return value.default ?? { ...value }; + } +}); + +export const selectors = { + palette: id => + [':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${id}`].join(',\n'), + theme: id => [':where(:root)', ':host', `.wa-theme-${id}`].join(',\n'), +}; diff --git a/docs/assets/scripts/my.js b/docs/assets/scripts/my.js index e06d89568..25793113d 100644 --- a/docs/assets/scripts/my.js +++ b/docs/assets/scripts/my.js @@ -165,3 +165,8 @@ my.palettes = new SavedEntities({ key: 'savedPalettes', type: 'palette', }); + +my.themes = new SavedEntities({ + key: 'savedThemes', + type: 'theme', +}); diff --git a/docs/assets/scripts/tweak/permalink.js b/docs/assets/scripts/permalink.js similarity index 66% rename from docs/assets/scripts/tweak/permalink.js rename to docs/assets/scripts/permalink.js index 3d98b709e..07283493b 100644 --- a/docs/assets/scripts/tweak/permalink.js +++ b/docs/assets/scripts/permalink.js @@ -1,4 +1,4 @@ -const IDENTITY = x => x; +import { deepEach, deepGet, deepSet } from './util/deep.js'; export default class Permalink extends URLSearchParams { /** Params changed since last URL I/O */ @@ -13,6 +13,59 @@ export default class Permalink extends URLSearchParams { return Object.fromEntries(this.entries()); } + /** + * Set multiple values from an object. Nested values will be joined with a hyphen. + * @param {object} values - The object containing the values to set. + * @param {object} defaults - The object containing the default values. + * + */ + setAll(values, defaults) { + deepEach(values, (value, key, parent, path) => { + let fullPath = [...path, key]; + let param = fullPath.join('-'); + let defaultValue = deepGet(defaults, fullPath); + + if (typeof value === 'object') { + // We'll handle this when we descend into it + return; + } + + if (!value || value === defaultValue) { + // Remove the param from the URL + this.delete(param); + return; + } + + this.set(param, value); + }); + } + + getAll(...args) { + if (args.length > 0) { + return super.getAll(...args); + } + + // 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('-'); + deepSet(obj, path, value); + } + + return obj; + } + + delete(key, value) { + let hadValue = this.has(key); + super.delete(key, value); + + if (hadValue) { + this.changed = true; + } + } + set(key, value, defaultValue) { if (equals(value, defaultValue) || equals(value, '')) { value = null; diff --git a/docs/assets/scripts/sidebar-tweaks.js b/docs/assets/scripts/sidebar-tweaks.js index 9383e6736..168004c53 100644 --- a/docs/assets/scripts/sidebar-tweaks.js +++ b/docs/assets/scripts/sidebar-tweaks.js @@ -74,7 +74,8 @@ const sidebar = { a = sidebar.addChild(a, parentA); // This is mainly to port Pro badges - let badges = Array.from(parentLi.querySelectorAll('wa-badge'), badge => badge.cloneNode(true)); + let badges = Array.from(parentLi.querySelectorAll(':scope > wa-badge'), badge => badge.cloneNode(true)); + let append = [...badges]; if (entity.delete) { diff --git a/docs/assets/scripts/tweak.js b/docs/assets/scripts/tweak.js index 764eafab7..47f1f5702 100644 --- a/docs/assets/scripts/tweak.js +++ b/docs/assets/scripts/tweak.js @@ -1,6 +1,6 @@ /** * Get import code for remixed themes and tweaked palettes. */ +export { cdnUrl, hueRanges, hues, selectors, tints, urls } from '../data/index.js'; +export { default as Permalink } from './permalink.js'; export { getThemeCode } from './tweak/code.js'; -export { cdnUrl, hueRanges, hues, selectors, tints, urls } from './tweak/data.js'; -export { default as Permalink } from './tweak/permalink.js'; diff --git a/docs/assets/scripts/tweak/code.js b/docs/assets/scripts/tweak/code.js index 8f2ca3405..b2f206223 100644 --- a/docs/assets/scripts/tweak/code.js +++ b/docs/assets/scripts/tweak/code.js @@ -1,7 +1,8 @@ /** * Get import code for remixed themes and tweaked palettes. */ -import { urls } from './data.js'; +import { selectors, themeConfig } from '../../data/theming.js'; +import { deepEach, deepGet } from '/assets/scripts/util/deep.js'; export function cssImport(url, options = {}) { let { language = 'html', cdnUrl = '/dist/', attributes } = options; @@ -21,29 +22,65 @@ export function cssLiteral(value, options = {}) { if (language === 'css') { return value; } else { - return ``; + return `\n${value}\n`; } } -// Params in correct order -export const themeParams = ['colors', 'palette', 'brand', 'typography']; +/** + * Get code for a theme, including tweaks + * @param {*} theme + * @param {*} options + * @returns + */ +export function getThemeCode(theme, options = {}) { + let urls = []; + let declarations = []; + let id = options.id ?? theme.base ?? 'default'; -export function getThemeCode(base, params, options) { - let ret = []; + deepEach(themeConfig, (config, aspect, obj, path) => { + if (!config?.default) { + // We're not in a config object + return; + } - if (base) { - ret.push(urls.theme(base)); - } + let value = deepGet(theme, [...path, aspect]); - for (let aspect of themeParams) { - let value = params[aspect]; + if (!value) { + return; + } - if (value) { - ret.push(urls[aspect](value)); + if (config.url) { + // This is implemented by pulling in different CSS files + urls.push(config.url(value)); + } else { + if (config.cssProperty) { + declarations.push(`${config.cssProperty}: ${value};`); + } + } + }); + + let ret = urls.map(url => cssImport(url, options)).join('\n'); + + 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) { + options.attributes ??= ''; + options.attributes += faKitAttribute; + cssCode = + `/* Note: To use Font Awesome Pro icons,\n set ${faKitAttribute} on the (or any other) element */\n\n` + + cssCode; + } + + cssCode = cssLiteral(cssCode, options); + + if (ret) { + ret += '\n\n' + cssCode; } } - return ret.map(url => cssImport(url, options)).join('\n'); + return ret; } export function cssRule(selector, declarations, { indent = ' ' } = {}) { diff --git a/docs/assets/scripts/util/array.js b/docs/assets/scripts/util/array.js new file mode 100644 index 000000000..6eff57b6d --- /dev/null +++ b/docs/assets/scripts/util/array.js @@ -0,0 +1,17 @@ +/** + * Picks a random element from an array. + * @param {any[]} arr + */ +export function sample(arr) { + if (!Array.isArray(arr)) { + return arr; + } + + if (arr.length < 2) { + return arr[0]; + } + + let index = Math.floor(Math.random() * arr.length); + + return arr[index]; +} diff --git a/docs/assets/scripts/util/deep.js b/docs/assets/scripts/util/deep.js new file mode 100644 index 000000000..4bfcfd5d7 --- /dev/null +++ b/docs/assets/scripts/util/deep.js @@ -0,0 +1,180 @@ +/** + * @typedef { string | number | Symbol } Property + * @typedef { (value: any, key: Property, parent: object, path: Property[]) => any } EachCallback + */ + +export function isPlainObject(obj) { + return isObject(obj, 'Object'); +} + +export function isObject(obj, type) { + if (!obj || typeof obj !== 'object') { + return false; + } + + let proto = Object.getPrototypeOf(obj); + return proto.constructor?.name === type; +} + +export function deepMerge(target, source, options = {}) { + let { + emptyValues = [undefined], + containers = ['Object', 'EventTarget'], + isContainer = value => containers.some(type => isObject(value, type)), + } = options; + + if (isContainer(target) && isContainer(source)) { + for (let key in source) { + if (key in target && isContainer(target[key]) && isContainer(source[key])) { + target[key] = deepMerge(target[key], source[key], options); + } else if (!emptyValues.includes(source[key])) { + target[key] = source[key]; + } + } + + return target; + } + + return target ?? source; +} + +/** + * Iterate over a deep array, recursively for plain objects + * @param { any } obj The object to iterate over. Can be an array or a plain object, or even a primitive value. + * @param { EachCallback } callback. value is === parent[key] + * @param { object } [parentObj] The parent object of the current value Mainly used internally to facilitate recursion. + * @param { Property } [key] The key of the current value. Mainly used internally to facilitate recursion. + * @param { Property[] } [path] Any existing path (not including the key). Mainly used internally to facilitate recursion. + */ +export function deepEach(obj, callback, parentObj, key, path = []) { + if (key !== undefined) { + let ret = callback(obj, key, parentObj, path); + + if (ret !== undefined) { + if (ret === false) { + // Do not descend further + return; + } + + // Overwrite value + parentObj[key] = ret; + obj = ret; + } + } + + let newPath = key !== undefined ? [...path, key] : path; + + if (Array.isArray(obj)) { + for (let i = 0; i < obj.length; i++) { + deepEach(obj[i], callback, obj, i, newPath); + } + } else if (isPlainObject(obj)) { + for (let key in obj) { + deepEach(obj[key], callback, obj, key, newPath); + } + } +} + +/** + * Get a value from a deeply nested object + * @param {*} obj + * @param {PropertyPath} path + * @returns + */ +export function deepGet(obj, path) { + if (path.length === 0) { + return obj; + } + + let ret = obj; + + for (let key of path) { + if (ret === undefined) { + return undefined; + } + + ret = ret[key]; + } + + return ret; +} + +/** + * Set a value in a deep object, creating object literals as needed + * @param { * } obj + * @param { Property[] } path + * @param { any } value + */ +export function deepSet(obj, path, value) { + if (path.length === 0) { + return; + } + + let key = path.pop(); + + let ret = path.reduce((acc, property) => { + if (acc[property] === undefined) { + acc[property] = {}; + } + + return acc[property]; + }, obj); + + ret[key] = value; +} + +export function deepClone(obj) { + if (!obj) { + return obj; + } + + let ret = obj; + + if (Array.isArray(obj)) { + ret = obj.map(item => deepClone(item)); + } else if (isPlainObject(obj)) { + ret = { ...obj }; + + for (let key in obj) { + ret[key] = deepClone(obj[key]); + } + } + + return ret; +} + +/** + * Like Object.entries, but for deeply nested objects. + * For shallow objects the output is the same as Object.entries. + * @param {*} obj + * @param { object } options + * @param { EachCallback } each - If this returns false, the entry is not added to the result and the recursion is stopped. + * @param { EachCallback } filter - If this returns false, the entry is not added to the result. + * @param { EachCallback } descend - If this returns false, recursion is stopped. + * @returns {any[][]} + */ +export function deepEntries(obj, options = {}) { + let { each, filter, descend } = options; + let entries = []; + + deepEach(obj, (value, key, parent, path) => { + let ret = each?.(value, key, parent, path); + + if (ret !== false) { + let included = filter?.(value, key, parent, path) ?? true; + + if (included) { + entries.push([...path, key, value]); + } + + let descendRet = descend?.(value, key, parent, path); + if (descendRet === false) { + return false; // Stop recursion + } + } + + return ret; + }); + + return entries; +} diff --git a/docs/assets/scripts/util/dom-change.js b/docs/assets/scripts/util/dom-change.js index 48b939e1e..f01a3d13c 100644 --- a/docs/assets/scripts/util/dom-change.js +++ b/docs/assets/scripts/util/dom-change.js @@ -35,3 +35,5 @@ export function domChange(fn, { behavior = 'smooth', ignoreInitialLoad = true } return null; } } + +export default domChange; diff --git a/docs/assets/scripts/util/string.js b/docs/assets/scripts/util/string.js new file mode 100644 index 000000000..214940f3f --- /dev/null +++ b/docs/assets/scripts/util/string.js @@ -0,0 +1,24 @@ +/** + * Make the first letter of a string uppercase + * @param {*} str + * @returns + */ +export function capitalize(str) { + str += ''; + return str[0].toUpperCase() + str.slice(1); +} + +/** + * Convert a readable string to a slug. + * @param {*} str - Input string. If argument is not a string, it will be stringified. + * @returns {string} - The slugified string + */ +export function slugify(str) { + return (str + '') + .normalize('NFD') + .replace(/[\u0300-\u036f]/g, '') // Convert accented letters to ASCII + .replace(/[^\w\s-]/g, '') // Remove remaining non-ASCII characters + .trim() + .replace(/\s+/g, '-') // Convert whitespace to hyphens + .toLowerCase(); +} diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index a21899c62..8bd5b1391 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -256,15 +256,6 @@ wa-page > main { } h1.title { - wa-icon-button { - font-size: var(--wa-font-size-l); - color: var(--wa-color-text-quiet); - - &:not(:hover, :focus) { - opacity: 0.5; - } - } - wa-badge { vertical-align: middle; font-size: 1.5rem; @@ -392,19 +383,7 @@ wa-page > main:has(> .index-grid) { } wa-card { - box-shadow: none; --spacing: var(--wa-space-m); - inline-size: 100%; - - &:hover { - --border-color: var(--wa-color-brand-border-loud); - border-color: var(--border-color); - box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color); - - .page-name { - color: var(--wa-color-brand-on-quiet); - } - } [slot='header'] { display: flex; @@ -418,11 +397,11 @@ wa-page > main:has(> .index-grid) { min-block-size: calc(6rem + var(--spacing)); } } +} - .page-name { - font-size: var(--wa-font-size-s); - font-weight: var(--wa-font-weight-action); - } +wa-card .page-name { + font-size: var(--wa-font-size-s); + font-weight: var(--wa-font-weight-action); } .index-category { @@ -431,6 +410,146 @@ wa-page > main:has(> .index-grid) { margin-block-start: var(--wa-space-2xl); } +/* Interactive cards */ +wa-card[role='button'][tabindex='0'], +button, +a[href], +wa-option, +wa-radio, +wa-checkbox { + /* Disabled state */ + &:is(:disabled, [disabled], [aria-disabled='true']) { + &:is(wa-card, :has(> wa-card)) { + opacity: 60%; + cursor: not-allowed; + } + } + + &:where(:not(:disabled, [disabled], [aria-disabled='true'])) { + &:has(> wa-card) { + /* Parents only (not interactive ) */ + margin: calc(var(--wa-border-width-m) + 1px); + padding: 0; + + /* Hover state */ + &:hover, + &:state(hover), + &:state(current) { + /* Do not change the parent background as a hover effect (we style the card instead) */ + background: transparent !important; + } + + &::part(control), + &:is(wa-option)::part(checked-icon) { + --background-color-checked: var(--wa-color-brand-fill-loud); + --checked-icon-scale: 0.5; + --offset: var(--wa-space-2xs); + + position: absolute; + inset: calc(var(--offset) + var(--wa-border-width-m)); + inset-block-end: auto; + inset-inline-start: auto; + z-index: 1; + margin: 0; + background: var(--wa-color-brand-fill-loud); + color: var(--wa-color-brand-on-loud); + } + + &::part(checked-icon) { + color: var(--wa-color-brand-on-loud); + } + + &:is(wa-option)::part(checked-icon) { + inset-block-start: calc(var(--wa-space-smaller) - 0.5em); + inset-inline-end: calc(var(--wa-space-smaller) - 0.5em); + width: 1em; + height: 1em; + line-height: 1em; + padding: 0.4em; + border-radius: var(--wa-border-radius-circle); + text-align: center; + font-size: var(--wa-font-size-xs); + } + } + + /* Hover state */ + &:hover, + &:state(hover), + &:state(current) { + &:is(wa-card), + > wa-card { + --border-color: var(--wa-color-brand-border-loud); + border-color: var(--border-color); + box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color); + } + } + + &:is(wa-card, :has(> wa-card)) { + /* Interactive card parent */ + position: relative; + cursor: pointer; + + /* Unselected state */ + &:where(:not(:state(checked), :state(selected), [aria-checked='true'], [aria-selected='true'])) { + &::part(checked-icon), + &::part(control) { + display: none; + } + } + } + + &:is(wa-card), + > wa-card { + /* The card itself */ + box-shadow: none; + } + } +} + +/* Selected cards */ +:state(selected), +:state(checked), +[aria-checked='true'], +[aria-selected='true'] { + &:is(wa-card, :has(> wa-card)) { + background: transparent; + } + + &:is(wa-card), + > wa-card { + --border-color: var(--wa-color-brand-border-loud); + box-shadow: 0 0 0 var(--wa-border-width-m) var(--border-color); + + &::part(body) { + background: var(--wa-color-brand-fill-quiet); + } + } +} + +wa-select:has(> wa-option > wa-card) { + &::part(listbox) { + --column-width: 1fr; + --columns: 1; + --gap: var(--wa-space-smaller); + + display: grid; + grid-template-columns: repeat(auto-fill, minmax(var(--column-width), 1fr)); + width: calc(var(--columns) * var(--column-width) + (var(--columns) - 1) * var(--gap) + 2 * var(--wa-space)); + max-width: var(--auto-size-available-width, 90vw); + gap: var(--gap); + padding: var(--wa-space-smaller) var(--wa-space); + } + + > wa-option > wa-card { + --spacing: var(--wa-space-s); + } +} + +wa-radio:has(> wa-card) { + grid-template-columns: 1fr; + width: auto; +} + /* Swatches */ .swatch { position: relative; diff --git a/docs/assets/styles/search.css b/docs/assets/styles/search.css index eaa085c3c..8e0f37771 100644 --- a/docs/assets/styles/search.css +++ b/docs/assets/styles/search.css @@ -41,9 +41,9 @@ } /* Header */ -header { +#site-search-container header { flex: 0 0 auto; - align-items: middle; + align-items: center; /* Fixes an iOS Safari 16.4 bug that draws the parent element's border radius incorrectly when showing/hiding results */ border-radius: var(--wa-border-radius-l); } diff --git a/docs/assets/styles/theme-icons.css b/docs/assets/styles/theme-icons.css index d3e3bfe23..f98c7f053 100644 --- a/docs/assets/styles/theme-icons.css +++ b/docs/assets/styles/theme-icons.css @@ -1,4 +1,9 @@ -wa-card:has(> .theme-icon-host, > [slot='header'] > .theme-icon-host) { +wa-card:has( + > .theme-icon-host, + > [slot='header'] > .theme-icon-host, + > .fonts-icon-host, + > [slot='header'] > .fonts-icon-host + ) { &::part(header) { /* We want to add a background color, so any spacing needs to go on .theme-icon */ flex: 1; @@ -12,6 +17,7 @@ wa-card:has(> .theme-icon-host, > [slot='header'] > .theme-icon-host) { } .theme-icon-host, +.fonts-icon-host, .palette-icon-host { flex: 1; border-radius: inherit; @@ -23,12 +29,17 @@ wa-card:has(> .theme-icon-host, > [slot='header'] > .theme-icon-host) { } } +.theme-icon:not(.theme-color-icon), +.palette-icon, +.icons-icon { + min-height: 5.5rem; +} + .palette-icon { display: grid; grid-template-columns: repeat(var(--hues, 9), 1fr); gap: var(--wa-space-3xs); min-width: 20ch; - min-height: 9ch; align-content: center; .swatch { @@ -42,7 +53,8 @@ wa-card:has(> .theme-icon-host, > [slot='header'] > .theme-icon-host) { } } -.theme-icon { +.theme-icon, +.fonts-icon { min-width: 18ch; padding: var(--wa-space-xs) var(--wa-space-m); border-radius: inherit; @@ -57,11 +69,18 @@ wa-card:has(> .theme-icon-host, > [slot='header'] > .theme-icon-host) { } .theme-color-icon { - display: grid; + display: flex; gap: var(--wa-space-xs); - grid-template-columns: repeat(4, auto); + min-width: 15ch; + background: var(--wa-color-surface-lowered); + + & + & { + border-start-start-radius: 0; + border-start-end-radius: 0; + } div { + flex: 1; display: flex; align-items: center; justify-content: center; @@ -72,26 +91,17 @@ wa-card:has(> .theme-icon-host, > [slot='header'] > .theme-icon-host) { padding: var(--wa-space-2xs) var(--wa-space-xs); color: var(--text-color); font-weight: var(--wa-font-weight-semibold); - - &.plain { - font-weight: var(--wa-font-weight-bold); - } } } -.theme-typography-icon { - display: flex; - flex-direction: column; - gap: var(--wa-space-xs); -} - -.theme-overall-icon { +.theme-icon.theme-overall-icon, +.fonts-icon { display: flex; flex-flow: column; - gap: var(--wa-space-xs); + gap: var(--wa-space-2xs); justify-content: center; width: 100%; - min-height: 7.5rem; + min-height: 6.75rem; box-sizing: border-box; background: var(--wa-color-surface-lowered); @@ -130,3 +140,50 @@ wa-card:has(> .theme-icon-host, > [slot='header'] > .theme-icon-host) { } } } + +.fonts-icon { + font-family: var(--wa-font-family-body); + padding-block: var(--wa-space-s); + overflow: hidden; + position: relative; + + & h2, + & p { + white-space: nowrap; + } + + &::after { + content: ''; + position: absolute; + right: 0; + width: 50%; + height: 100%; + background-image: linear-gradient(to left, var(--wa-color-surface-lowered), 20%, transparent); + } +} + +.icons-icon { + display: grid; + grid-template-columns: repeat(var(--columns, 5), auto); + gap: var(--wa-space-xs); + place-items: center; + place-content: center; + + & wa-icon { + font-size: 1.25em; + } +} + +.page-card { + wa-badge { + margin-inline: var(--wa-space-3xs); + } +} + +:is(.theme-card, .icons-card)::part(header) { + background: var(--wa-color-surface-lowered); +} + +.icons-card::part(header) { + color: var(--wa-color-neutral-on-quiet); +} diff --git a/docs/assets/styles/ui.css b/docs/assets/styles/ui.css new file mode 100644 index 000000000..9ee09916c --- /dev/null +++ b/docs/assets/styles/ui.css @@ -0,0 +1,145 @@ +/* App UI, for themer, palette tweaking etc */ + +:root { + --fa-sliders-simple: '\f1de'; +} + +.title { + wa-icon-button { + font-size: var(--wa-font-size-l); + color: var(--wa-color-text-quiet); + + &:not(:hover, :focus) { + opacity: 0.5; + } + } +} + +.popup { + background: var(--wa-color-surface-default); + border: 1px solid var(--wa-color-surface-border); + padding: var(--wa-space-xl); + border-radius: var(--wa-border-radius-m); + max-height: 90dvh; + overflow: auto; + + code { + white-space: nowrap; + } +} + +.color-select { + &.default::part(display-input) { + opacity: 0.6; + font-style: italic; + } + + > small { + margin-inline-start: var(--wa-space-xs); + padding-block: 0 var(--wa-space-xs); + } + + &::part(combobox)::before, + wa-option::before { + content: ''; + display: inline-block; + width: 1.2em; + aspect-ratio: 1; + margin-inline-end: var(--wa-space-xs); + flex: none; + border-radius: var(--wa-border-radius-m); + background: var(--color); + border: 1px solid var(--wa-color-surface-default); + } + + wa-option { + white-space: nowrap; + + &::before { + width: 1em; + margin-inline: var(--wa-space-xs); + } + + &::part(checked-icon) { + order: 2; + } + } + + .default-badge { + opacity: 0.6; + margin-inline-start: var(--wa-space-xs); + } +} + +.swatch-select { + padding: 2px; + + wa-radio-button { + --swatch-border-color: color-mix(in oklab, canvastext, transparent 80%); + + &::part(base) { + /* a