From 3a40ffe58a0d6c11bd93347207e7c4ae6bf7db60 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 27 Jun 2025 10:26:46 -0400 Subject: [PATCH] Themer rework (#1048) * remove experimental pages * typo * untying the knots * whitespace * fix input bubbling * refactor * reimplement color scheme selector * rename * fix comments * revert premature abstraction * host vars * rework theme selector * feed themes from global data * add back component headers * reimplement component index * make headings optional * add back color palette page sans instructions * fix selector * fix search list with turbo * always dispatch after update * add back theme preview page * fix * fix errors * fix theme selector * fix themes * improve * make transition smooth * revert * revert * skip * fix borders * fix fade in * remove unused blocks * we know this guy * fix event timing * remove header * remove unused styles * add better nunjucks extension * update header * fix layout * add theme linke * fix autocomplete bug * correct description * consistency between palettes and tokens docs * better extension * add colorPalettes data * typo * typos * fix progress bar height * remove due to errors; works without * move pro palettes to pro * consolidate themer data * themer data * add font packs * reorg * restructure theme data * add word * detect the reference slot instead of requiring with-references * Remove `:root` selector and `@import` rules from themes (#1061) * remove `:root` selector and imports from themes * re-add `base.css` to free * update how themes are assigned * update showcase location * update * fix palettes * add font href * fix theme page in turbo * fix color palettes * remove rose * fix shadow * update docs * update docs * rename eyedropper to fix spelling * rename eyedropper * disable turbo * remove unused import * update themer data * add get/set icon family * revert example * fix color palette data * add brand color to theme data * fix sharp duotone name * fix typo * update changelog for merged branch * update changelog * allow default theme to inherit color scheme when nested * make font packs more exciting * update serif typeface * add examples * update font weights * set initial selection instantly * set brand and palette with theme in theme selector * add palette stylesheets * fix icon slot * fix theme descriptions * minor style touch up * tweak example button text * group callout examples * add 'create theme' button * tweak spacing, fix sneaky plain card background * prettier * ultra tiny tweak to showcase example * show usage instructions * prevent error when theme selector isn't present --------- Co-authored-by: lindsaym-fa Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com> --- .vscode/extensions.json | 3 +- cspell.json | 15 + packages/webawesome/docs/.eleventy.js | 118 +- .../webawesome/docs/_data/componentList.js | 78 - packages/webawesome/docs/_data/components.js | 3 - packages/webawesome/docs/_data/hueRanges.js | 1 - packages/webawesome/docs/_data/hues.json | 1 - packages/webawesome/docs/_data/palettes.js | 1 - packages/webawesome/docs/_data/themer.js | 735 +++++ packages/webawesome/docs/_data/themes.js | 62 - packages/webawesome/docs/_includes/base.njk | 34 +- .../webawesome/docs/_includes/breadcrumbs.njk | 13 - .../docs/_includes/color-scheme-selector.njk | 8 +- .../docs/_includes/contrast-table.njk | 52 - .../docs/_includes/grouped-pages.njk | 18 - packages/webawesome/docs/_includes/head.njk | 46 +- .../_includes/import-stylesheet-code.md.njk | 18 - .../webawesome/docs/_includes/page-card.njk | 13 - .../webawesome/docs/_includes/page-demo.njk | 25 - .../docs/_includes/preset-theme-selector.njk | 9 - .../webawesome/docs/_includes/sidebar.njk | 97 +- packages/webawesome/docs/_includes/status.njk | 20 - .../docs/_includes/svgs/palette.njk | 20 - .../docs/_includes/svgs/theme-color.njk | 24 - .../docs/_includes/svgs/theme-typography.njk | 16 - .../webawesome/docs/_includes/svgs/theme.njk | 29 - .../docs/_includes/theme-selector.njk | 41 + .../docs/_includes/theme-showcase.njk | 347 --- packages/webawesome/docs/_layouts/blank.njk | 12 +- packages/webawesome/docs/_layouts/block.njk | 38 - .../webawesome/docs/_layouts/component.njk | 21 +- packages/webawesome/docs/_layouts/element.njk | 32 - .../webawesome/docs/_layouts/overview.njk | 26 - packages/webawesome/docs/_layouts/palette.njk | 313 -- .../webawesome/docs/_layouts/patterns.njk | 1 - packages/webawesome/docs/_layouts/theme.njk | 185 -- packages/webawesome/docs/_layouts/utility.njk | 19 - packages/webawesome/docs/_utils/filters.js | 410 --- packages/webawesome/docs/_utils/manifest.js | 71 + .../docs/assets/components/scoped.js | 172 -- .../webawesome/docs/assets/data/colors.js | 47 - packages/webawesome/docs/assets/data/fonts.js | 65 - packages/webawesome/docs/assets/data/icons.js | 7 - packages/webawesome/docs/assets/data/index.js | 6 - .../docs/assets/data/palettes.js.njk | 57 - .../webawesome/docs/assets/data/themes.js.njk | 27 - .../webawesome/docs/assets/data/theming.js | 100 - .../docs/assets/examples/page/demo-1.html | 289 -- .../docs/assets/examples/page/demo-2.html | 484 ---- .../docs/assets/scripts/color-scheme.js | 38 + .../webawesome/docs/assets/scripts/filter.js | 35 - .../docs/assets/scripts/hydration-errors.js | 2 +- packages/webawesome/docs/assets/scripts/my.js | 172 -- .../assets/scripts/preset-theme-picker.js | 52 - .../docs/assets/scripts/prism-downloaded.js | 9 - .../webawesome/docs/assets/scripts/prism.js | 8 - .../docs/assets/scripts/search-list.js | 82 + .../docs/assets/scripts/sidebar-tweaks.js | 122 - .../docs/assets/scripts/sync-iframe-height.js | 37 - .../docs/assets/scripts/theme-picker.js | 139 - .../webawesome/docs/assets/scripts/theme.js | 81 + .../webawesome/docs/assets/scripts/tweak.js | 6 - .../docs/assets/scripts/tweak/code.js | 91 - .../docs/assets/scripts/tweak/util.js | 36 - .../docs/assets/scripts/util/array.js | 17 - .../docs/assets/scripts/util/deep.js | 180 -- .../docs/assets/scripts/util/dom-change.js | 39 - .../docs/assets/scripts/util/string.js | 42 - .../docs/assets/scripts/view-transitions.js | 27 + .../webawesome/docs/assets/styles/docs.css | 94 +- .../assets/vue/components/color-select.js | 78 - .../assets/vue/components/editable-text.js | 90 - .../docs/assets/vue/components/fonts-card.js | 132 - .../docs/assets/vue/components/icons-card.js | 176 -- .../docs/assets/vue/components/index.js | 13 - .../docs/assets/vue/components/info-tip.js | 39 - .../docs/assets/vue/components/page-card.js | 83 - .../assets/vue/components/palette-card.js | 63 - .../docs/assets/vue/components/panel.css | 167 -- .../docs/assets/vue/components/scrollable.css | 89 - .../assets/vue/components/swatch-select.js | 54 - .../docs/assets/vue/components/theme-card.js | 119 - .../vue/components/ui-panel-container.js | 120 - .../docs/assets/vue/components/ui-panel.js | 73 - .../assets/vue/components/ui-scrollable.js | 77 - .../docs/assets/vue/components/ui-slider.css | 46 - .../docs/assets/vue/components/ui-slider.js | 88 - .../docs/assets/vue/directives/content.js | 22 - .../docs/assets/vue/mixins/input.js | 32 - .../docs/assets/vue/mixins/saved.js | 110 - .../webawesome/docs/docs/color-palettes.njk | 256 ++ .../docs/docs/components/animated-image.md | 4 +- .../docs/docs/components/animation.md | 18 +- .../webawesome/docs/docs/components/avatar.md | 4 +- .../webawesome/docs/docs/components/badge.md | 4 +- .../docs/docs/components/breadcrumb-item.md | 4 +- .../docs/docs/components/breadcrumb.md | 4 +- .../docs/docs/components/button-group.md | 4 +- .../webawesome/docs/docs/components/button.md | 5 +- .../docs/docs/components/callout.md | 6 +- .../webawesome/docs/docs/components/card.md | 46 +- .../docs/docs/components/carousel-item.md | 5 +- .../docs/docs/components/carousel.md | 12 +- .../docs/docs/components/checkbox.md | 5 +- .../docs/docs/components/color-picker.md | 5 +- .../docs/docs/components/comparison.md | 4 +- .../docs/docs/components/components.json | 11 - .../docs/docs/components/copy-button.md | 8 +- .../docs/docs/components/details.md | 51 +- .../webawesome/docs/docs/components/dialog.md | 24 +- .../docs/docs/components/divider.md | 4 +- .../webawesome/docs/docs/components/drawer.md | 28 +- .../docs/docs/components/dropdown-item.md | 1 + .../docs/docs/components/dropdown.md | 4 +- .../docs/docs/components/format-bytes.md | 4 +- .../docs/docs/components/format-date.md | 4 +- .../docs/docs/components/format-number.md | 4 +- .../webawesome/docs/docs/components/icon.md | 75 +- .../docs/docs/components/include.md | 4 +- .../webawesome/docs/docs/components/index.njk | 46 +- .../webawesome/docs/docs/components/input.md | 9 +- .../docs/docs/components/mutation-observer.md | 4 +- .../webawesome/docs/docs/components/option.md | 5 +- .../docs/docs/components/popover.md | 26 +- .../webawesome/docs/docs/components/popup.md | 35 +- .../docs/docs/components/progress-bar.md | 6 +- .../docs/docs/components/progress-ring.md | 4 +- .../docs/docs/components/qr-code.md | 4 +- .../docs/docs/components/radio-group.md | 4 +- .../webawesome/docs/docs/components/radio.md | 6 +- .../webawesome/docs/docs/components/rating.md | 16 +- .../docs/docs/components/relative-time.md | 4 +- .../docs/docs/components/resize-observer.md | 4 +- .../docs/docs/components/scroller.md | 104 +- .../webawesome/docs/docs/components/select.md | 5 +- .../docs/docs/components/skeleton.md | 4 +- .../webawesome/docs/docs/components/slider.md | 14 +- .../docs/docs/components/spinner.md | 5 +- .../docs/docs/components/split-panel.md | 4 +- .../webawesome/docs/docs/components/switch.md | 5 +- .../docs/docs/components/tab-group.md | 11 +- .../docs/docs/components/tab-panel.md | 5 +- .../webawesome/docs/docs/components/tab.md | 5 +- .../webawesome/docs/docs/components/tag.md | 73 +- .../docs/docs/components/textarea.md | 5 +- .../docs/docs/components/tooltip.md | 9 +- .../docs/docs/components/tree-item.md | 4 +- .../webawesome/docs/docs/components/tree.md | 4 +- .../docs/docs/components/zoomable-frame.md | 32 +- .../webawesome/docs/docs/docs.11tydata.js | 108 - .../docs/experimental/default-page-spacing.md | 100 - .../docs/docs/experimental/form-validation.md | 50 - .../docs/docs/experimental/inherit.md | 84 - .../webawesome/docs/docs/experimental/size.md | 78 - .../webawesome/docs/docs/experimental/ssr.md | 18 +- .../docs/docs/experimental/themer.md | 2549 ----------------- packages/webawesome/docs/docs/layout.njk | 5 +- .../webawesome/docs/docs/palettes/bright.md | 3 - .../webawesome/docs/docs/palettes/default.md | 5 - .../webawesome/docs/docs/palettes/index.njk | 10 - .../docs/docs/palettes/palettes.json | 10 - .../webawesome/docs/docs/palettes/shoelace.md | 4 - .../webawesome/docs/docs/palettes/tweak.css | 172 -- .../webawesome/docs/docs/palettes/tweak.js | 498 ---- .../docs/docs/resources/changelog.md | 157 +- .../docs/docs/resources/visual-tests.md | 6 +- packages/webawesome/docs/docs/themes.njk | 263 ++ .../webawesome/docs/docs/themes/app/index.js | 0 .../webawesome/docs/docs/themes/awesome.md | 8 - .../webawesome/docs/docs/themes/creating.md | 60 - .../webawesome/docs/docs/themes/default.md | 9 - .../webawesome/docs/docs/themes/demo/index.js | 69 - .../docs/docs/themes/demo/index.njk | 47 - .../webawesome/docs/docs/themes/edit/index.js | 361 --- .../docs/docs/themes/edit/index.njk | 243 -- .../docs/docs/themes/edit/style.css | 240 -- .../webawesome/docs/docs/themes/index.njk | 58 - .../docs/docs/themes/preview/app.css | 39 - .../docs/docs/themes/preview/app.njk | 20 - .../docs/docs/themes/preview/content.css | 342 --- .../docs/docs/themes/preview/content.njk | 147 - .../docs/docs/themes/preview/preview.js | 276 -- .../webawesome/docs/docs/themes/remix.css | 74 - .../webawesome/docs/docs/themes/shoelace.md | 5 - .../webawesome/docs/docs/themes/showcase.css | 67 - .../webawesome/docs/docs/themes/themes.json | 10 - packages/webawesome/docs/docs/tokens/color.md | 40 +- packages/webawesome/docs/docs/tokens/index.md | 7 + .../webawesome/docs/docs/tokens/index.njk | 7 - .../webawesome/docs/docs/tokens/tokens.json | 7 - .../docs/docs/utilities/align-items.md | 6 +- .../webawesome/docs/docs/utilities/cluster.md | 6 +- .../webawesome/docs/docs/utilities/color.md | 13 +- .../webawesome/docs/docs/utilities/flank.md | 36 +- .../webawesome/docs/docs/utilities/fouce.md | 5 +- .../webawesome/docs/docs/utilities/frame.md | 7 +- .../webawesome/docs/docs/utilities/gap.md | 4 +- .../webawesome/docs/docs/utilities/grid.md | 5 +- .../docs/utilities/{index.njk => index.md} | 9 +- .../webawesome/docs/docs/utilities/native.md | 118 +- .../docs/docs/utilities/rounding.md | 5 +- .../webawesome/docs/docs/utilities/split.md | 12 +- .../webawesome/docs/docs/utilities/stack.md | 17 +- .../webawesome/docs/docs/utilities/text.md | 33 +- .../docs/docs/utilities/utilities.json | 4 - .../docs/docs/utilities/visually-hidden.md | 67 +- .../docs/examples/themes/showcase.njk | 624 ++++ packages/webawesome/package.json | 4 +- .../scripts/color-palette-contrast-test.js | 71 - packages/webawesome/scripts/docs.js | 1 - .../animated-image/animated-image.test.ts | 2 +- .../src/components/carousel/carousel.test.ts | 2 +- .../src/components/checkbox/checkbox.test.ts | 2 +- .../color-picker/color-picker.test.ts | 2 +- .../components/color-picker/color-picker.ts | 28 +- .../src/components/comparison/comparison.css | 2 +- .../components/comparison/comparison.test.ts | 3 +- .../src/components/dialog/dialog.test.ts | 2 +- .../src/components/drawer/drawer.test.ts | 2 +- .../webawesome/src/components/icon/icon.ts | 13 +- .../src/components/icon/library.system.ts | 2 +- .../webawesome/src/components/icon/library.ts | 14 + .../src/components/input/input.test.ts | 2 +- .../src/components/popover/popover.css | 2 +- .../src/components/rating/rating.test.ts | 2 +- .../src/components/select/select.test.ts | 2 +- .../src/components/slider/slider.test.ts | 2 +- .../src/components/slider/slider.ts | 6 +- .../split-panel/split-panel.test.ts | 2 +- .../components/tab-group/tab-group.test.ts | 2 +- .../src/components/tooltip/tooltip.ts | 6 +- .../src/components/tree/tree.test.ts | 2 +- .../src/internal/active-elements.ts | 2 +- packages/webawesome/src/internal/form.test.ts | 2 +- .../internal/test/form-control-base-tests.ts | 2 +- .../{test.ts => test/pointer-utilities.ts} | 0 packages/webawesome/src/styles/brand/blue.css | 21 - packages/webawesome/src/styles/brand/cyan.css | 21 - packages/webawesome/src/styles/brand/gray.css | 21 - .../webawesome/src/styles/brand/green.css | 21 - .../webawesome/src/styles/brand/indigo.css | 21 - .../webawesome/src/styles/brand/orange.css | 21 - packages/webawesome/src/styles/brand/pink.css | 21 - .../webawesome/src/styles/brand/purple.css | 21 - packages/webawesome/src/styles/brand/red.css | 21 - .../webawesome/src/styles/brand/yellow.css | 21 - .../webawesome/src/styles/color/anodized.css | 148 - packages/webawesome/src/styles/color/base.css | 44 - .../webawesome/src/styles/color/elegant.css | 148 - packages/webawesome/src/styles/color/mild.css | 148 - .../webawesome/src/styles/color/natural.css | 148 - .../src/styles/color/palettes/base.css | 40 + .../styles/color/{ => palettes}/bright.css | 5 +- .../styles/color/{ => palettes}/default.css | 4 +- .../styles/color/{ => palettes}/shoelace.css | 8 +- .../src/styles/color/rudimentary.css | 148 - .../styles/color/scripts/palettes-analyzed.js | 70 - .../src/styles/color/scripts/palettes.js | 82 - .../src/styles/color/scripts/postprocess.js | 162 -- .../src/styles/color/scripts/ranges.js | 207 -- .../src/styles/color/scripts/util.js | 106 - .../src/styles/color/variants/brand.css | 162 ++ .../src/styles/color/variants/danger.css | 162 ++ .../src/styles/color/variants/neutral.css | 162 ++ .../src/styles/color/variants/success.css | 162 ++ .../src/styles/color/variants/warning.css | 162 ++ .../webawesome/src/styles/color/vogue.css | 148 - .../webawesome/src/styles/danger/blue.css | 21 - .../webawesome/src/styles/danger/cyan.css | 21 - .../webawesome/src/styles/danger/gray.css | 21 - .../webawesome/src/styles/danger/green.css | 21 - .../webawesome/src/styles/danger/indigo.css | 21 - .../webawesome/src/styles/danger/orange.css | 21 - .../webawesome/src/styles/danger/pink.css | 21 - .../webawesome/src/styles/danger/purple.css | 21 - packages/webawesome/src/styles/danger/red.css | 21 - .../webawesome/src/styles/danger/yellow.css | 21 - .../src/styles/dimension/blocky.css | 107 - .../webawesome/src/styles/dimension/flat.css | 5 - .../src/styles/dimension/glossy.css | 121 - .../src/styles/dimension/smooth.css | 129 - .../src/styles/dimension/subtle.css | 65 - .../webawesome/src/styles/neutral/blue.css | 21 - .../webawesome/src/styles/neutral/cyan.css | 21 - .../webawesome/src/styles/neutral/gray.css | 21 - .../webawesome/src/styles/neutral/green.css | 21 - .../webawesome/src/styles/neutral/indigo.css | 21 - .../webawesome/src/styles/neutral/orange.css | 21 - .../webawesome/src/styles/neutral/pink.css | 21 - .../webawesome/src/styles/neutral/purple.css | 21 - .../webawesome/src/styles/neutral/red.css | 21 - .../webawesome/src/styles/neutral/yellow.css | 21 - .../webawesome/src/styles/success/blue.css | 21 - .../webawesome/src/styles/success/cyan.css | 21 - .../webawesome/src/styles/success/gray.css | 21 - .../webawesome/src/styles/success/green.css | 21 - .../webawesome/src/styles/success/indigo.css | 21 - .../webawesome/src/styles/success/orange.css | 21 - .../webawesome/src/styles/success/pink.css | 21 - .../webawesome/src/styles/success/purple.css | 21 - .../webawesome/src/styles/success/red.css | 21 - .../webawesome/src/styles/success/yellow.css | 21 - .../webawesome/src/styles/themes/awesome.css | 162 +- .../webawesome/src/styles/themes/default.css | 25 +- .../webawesome/src/styles/themes/shoelace.css | 50 +- .../webawesome/src/styles/warning/blue.css | 21 - .../webawesome/src/styles/warning/cyan.css | 21 - .../webawesome/src/styles/warning/gray.css | 21 - .../webawesome/src/styles/warning/green.css | 21 - .../webawesome/src/styles/warning/indigo.css | 21 - .../webawesome/src/styles/warning/orange.css | 21 - .../webawesome/src/styles/warning/pink.css | 21 - .../webawesome/src/styles/warning/purple.css | 21 - .../webawesome/src/styles/warning/red.css | 21 - .../webawesome/src/styles/warning/yellow.css | 21 - packages/webawesome/src/styles/webawesome.css | 16 +- .../src/utilities/animation-registry.ts | 74 - packages/webawesome/src/webawesome.ts | 7 +- packages/webawesome/web-test-runner.config.js | 2 +- 319 files changed, 4293 insertions(+), 15636 deletions(-) delete mode 100644 packages/webawesome/docs/_data/componentList.js delete mode 100644 packages/webawesome/docs/_data/components.js delete mode 100644 packages/webawesome/docs/_data/hueRanges.js delete mode 100644 packages/webawesome/docs/_data/hues.json delete mode 100644 packages/webawesome/docs/_data/palettes.js create mode 100644 packages/webawesome/docs/_data/themer.js delete mode 100644 packages/webawesome/docs/_data/themes.js delete mode 100644 packages/webawesome/docs/_includes/breadcrumbs.njk delete mode 100644 packages/webawesome/docs/_includes/contrast-table.njk delete mode 100644 packages/webawesome/docs/_includes/grouped-pages.njk delete mode 100644 packages/webawesome/docs/_includes/import-stylesheet-code.md.njk delete mode 100644 packages/webawesome/docs/_includes/page-card.njk delete mode 100644 packages/webawesome/docs/_includes/page-demo.njk delete mode 100644 packages/webawesome/docs/_includes/preset-theme-selector.njk delete mode 100644 packages/webawesome/docs/_includes/status.njk delete mode 100644 packages/webawesome/docs/_includes/svgs/palette.njk delete mode 100644 packages/webawesome/docs/_includes/svgs/theme-color.njk delete mode 100644 packages/webawesome/docs/_includes/svgs/theme-typography.njk delete mode 100644 packages/webawesome/docs/_includes/svgs/theme.njk create mode 100644 packages/webawesome/docs/_includes/theme-selector.njk delete mode 100644 packages/webawesome/docs/_includes/theme-showcase.njk delete mode 100644 packages/webawesome/docs/_layouts/block.njk delete mode 100644 packages/webawesome/docs/_layouts/element.njk delete mode 100644 packages/webawesome/docs/_layouts/overview.njk delete mode 100644 packages/webawesome/docs/_layouts/palette.njk delete mode 100644 packages/webawesome/docs/_layouts/patterns.njk delete mode 100644 packages/webawesome/docs/_layouts/theme.njk delete mode 100644 packages/webawesome/docs/_layouts/utility.njk delete mode 100644 packages/webawesome/docs/_utils/filters.js create mode 100644 packages/webawesome/docs/_utils/manifest.js delete mode 100644 packages/webawesome/docs/assets/components/scoped.js delete mode 100644 packages/webawesome/docs/assets/data/colors.js delete mode 100644 packages/webawesome/docs/assets/data/fonts.js delete mode 100644 packages/webawesome/docs/assets/data/icons.js delete mode 100644 packages/webawesome/docs/assets/data/index.js delete mode 100644 packages/webawesome/docs/assets/data/palettes.js.njk delete mode 100644 packages/webawesome/docs/assets/data/themes.js.njk delete mode 100644 packages/webawesome/docs/assets/data/theming.js delete mode 100644 packages/webawesome/docs/assets/examples/page/demo-1.html delete mode 100644 packages/webawesome/docs/assets/examples/page/demo-2.html create mode 100644 packages/webawesome/docs/assets/scripts/color-scheme.js delete mode 100644 packages/webawesome/docs/assets/scripts/filter.js delete mode 100644 packages/webawesome/docs/assets/scripts/my.js delete mode 100644 packages/webawesome/docs/assets/scripts/preset-theme-picker.js delete mode 100644 packages/webawesome/docs/assets/scripts/prism-downloaded.js delete mode 100644 packages/webawesome/docs/assets/scripts/prism.js create mode 100644 packages/webawesome/docs/assets/scripts/search-list.js delete mode 100644 packages/webawesome/docs/assets/scripts/sidebar-tweaks.js delete mode 100644 packages/webawesome/docs/assets/scripts/sync-iframe-height.js delete mode 100644 packages/webawesome/docs/assets/scripts/theme-picker.js create mode 100644 packages/webawesome/docs/assets/scripts/theme.js delete mode 100644 packages/webawesome/docs/assets/scripts/tweak.js delete mode 100644 packages/webawesome/docs/assets/scripts/tweak/code.js delete mode 100644 packages/webawesome/docs/assets/scripts/tweak/util.js delete mode 100644 packages/webawesome/docs/assets/scripts/util/array.js delete mode 100644 packages/webawesome/docs/assets/scripts/util/deep.js delete mode 100644 packages/webawesome/docs/assets/scripts/util/dom-change.js delete mode 100644 packages/webawesome/docs/assets/scripts/util/string.js create mode 100644 packages/webawesome/docs/assets/scripts/view-transitions.js delete mode 100644 packages/webawesome/docs/assets/vue/components/color-select.js delete mode 100644 packages/webawesome/docs/assets/vue/components/editable-text.js delete mode 100644 packages/webawesome/docs/assets/vue/components/fonts-card.js delete mode 100644 packages/webawesome/docs/assets/vue/components/icons-card.js delete mode 100644 packages/webawesome/docs/assets/vue/components/index.js delete mode 100644 packages/webawesome/docs/assets/vue/components/info-tip.js delete mode 100644 packages/webawesome/docs/assets/vue/components/page-card.js delete mode 100644 packages/webawesome/docs/assets/vue/components/palette-card.js delete mode 100644 packages/webawesome/docs/assets/vue/components/panel.css delete mode 100644 packages/webawesome/docs/assets/vue/components/scrollable.css delete mode 100644 packages/webawesome/docs/assets/vue/components/swatch-select.js delete mode 100644 packages/webawesome/docs/assets/vue/components/theme-card.js delete mode 100644 packages/webawesome/docs/assets/vue/components/ui-panel-container.js delete mode 100644 packages/webawesome/docs/assets/vue/components/ui-panel.js delete mode 100644 packages/webawesome/docs/assets/vue/components/ui-scrollable.js delete mode 100644 packages/webawesome/docs/assets/vue/components/ui-slider.css delete mode 100644 packages/webawesome/docs/assets/vue/components/ui-slider.js delete mode 100644 packages/webawesome/docs/assets/vue/directives/content.js delete mode 100644 packages/webawesome/docs/assets/vue/mixins/input.js delete mode 100644 packages/webawesome/docs/assets/vue/mixins/saved.js create mode 100644 packages/webawesome/docs/docs/color-palettes.njk delete mode 100644 packages/webawesome/docs/docs/components/components.json delete mode 100644 packages/webawesome/docs/docs/docs.11tydata.js delete mode 100644 packages/webawesome/docs/docs/experimental/default-page-spacing.md delete mode 100644 packages/webawesome/docs/docs/experimental/form-validation.md delete mode 100644 packages/webawesome/docs/docs/experimental/inherit.md delete mode 100644 packages/webawesome/docs/docs/experimental/size.md delete mode 100644 packages/webawesome/docs/docs/experimental/themer.md delete mode 100644 packages/webawesome/docs/docs/palettes/bright.md delete mode 100644 packages/webawesome/docs/docs/palettes/default.md delete mode 100644 packages/webawesome/docs/docs/palettes/index.njk delete mode 100644 packages/webawesome/docs/docs/palettes/palettes.json delete mode 100644 packages/webawesome/docs/docs/palettes/shoelace.md delete mode 100644 packages/webawesome/docs/docs/palettes/tweak.css delete mode 100644 packages/webawesome/docs/docs/palettes/tweak.js create mode 100644 packages/webawesome/docs/docs/themes.njk delete mode 100644 packages/webawesome/docs/docs/themes/app/index.js delete mode 100644 packages/webawesome/docs/docs/themes/awesome.md delete mode 100644 packages/webawesome/docs/docs/themes/creating.md delete mode 100644 packages/webawesome/docs/docs/themes/default.md delete mode 100644 packages/webawesome/docs/docs/themes/demo/index.js delete mode 100644 packages/webawesome/docs/docs/themes/demo/index.njk delete mode 100644 packages/webawesome/docs/docs/themes/edit/index.js delete mode 100644 packages/webawesome/docs/docs/themes/edit/index.njk delete mode 100644 packages/webawesome/docs/docs/themes/edit/style.css delete mode 100644 packages/webawesome/docs/docs/themes/index.njk delete mode 100644 packages/webawesome/docs/docs/themes/preview/app.css delete mode 100644 packages/webawesome/docs/docs/themes/preview/app.njk delete mode 100644 packages/webawesome/docs/docs/themes/preview/content.css delete mode 100644 packages/webawesome/docs/docs/themes/preview/content.njk delete mode 100644 packages/webawesome/docs/docs/themes/preview/preview.js delete mode 100644 packages/webawesome/docs/docs/themes/remix.css delete mode 100644 packages/webawesome/docs/docs/themes/shoelace.md delete mode 100644 packages/webawesome/docs/docs/themes/showcase.css delete mode 100644 packages/webawesome/docs/docs/themes/themes.json create mode 100644 packages/webawesome/docs/docs/tokens/index.md delete mode 100644 packages/webawesome/docs/docs/tokens/index.njk delete mode 100644 packages/webawesome/docs/docs/tokens/tokens.json rename packages/webawesome/docs/docs/utilities/{index.njk => index.md} (68%) delete mode 100644 packages/webawesome/docs/docs/utilities/utilities.json create mode 100644 packages/webawesome/docs/examples/themes/showcase.njk delete mode 100644 packages/webawesome/scripts/color-palette-contrast-test.js rename packages/webawesome/src/internal/{test.ts => test/pointer-utilities.ts} (100%) delete mode 100644 packages/webawesome/src/styles/brand/blue.css delete mode 100644 packages/webawesome/src/styles/brand/cyan.css delete mode 100644 packages/webawesome/src/styles/brand/gray.css delete mode 100644 packages/webawesome/src/styles/brand/green.css delete mode 100644 packages/webawesome/src/styles/brand/indigo.css delete mode 100644 packages/webawesome/src/styles/brand/orange.css delete mode 100644 packages/webawesome/src/styles/brand/pink.css delete mode 100644 packages/webawesome/src/styles/brand/purple.css delete mode 100644 packages/webawesome/src/styles/brand/red.css delete mode 100644 packages/webawesome/src/styles/brand/yellow.css delete mode 100644 packages/webawesome/src/styles/color/anodized.css delete mode 100644 packages/webawesome/src/styles/color/base.css delete mode 100644 packages/webawesome/src/styles/color/elegant.css delete mode 100644 packages/webawesome/src/styles/color/mild.css delete mode 100644 packages/webawesome/src/styles/color/natural.css create mode 100644 packages/webawesome/src/styles/color/palettes/base.css rename packages/webawesome/src/styles/color/{ => palettes}/bright.css (98%) rename packages/webawesome/src/styles/color/{ => palettes}/default.css (99%) rename packages/webawesome/src/styles/color/{ => palettes}/shoelace.css (98%) delete mode 100644 packages/webawesome/src/styles/color/rudimentary.css delete mode 100644 packages/webawesome/src/styles/color/scripts/palettes-analyzed.js delete mode 100644 packages/webawesome/src/styles/color/scripts/palettes.js delete mode 100644 packages/webawesome/src/styles/color/scripts/postprocess.js delete mode 100644 packages/webawesome/src/styles/color/scripts/ranges.js delete mode 100644 packages/webawesome/src/styles/color/scripts/util.js create mode 100644 packages/webawesome/src/styles/color/variants/brand.css create mode 100644 packages/webawesome/src/styles/color/variants/danger.css create mode 100644 packages/webawesome/src/styles/color/variants/neutral.css create mode 100644 packages/webawesome/src/styles/color/variants/success.css create mode 100644 packages/webawesome/src/styles/color/variants/warning.css delete mode 100644 packages/webawesome/src/styles/color/vogue.css delete mode 100644 packages/webawesome/src/styles/danger/blue.css delete mode 100644 packages/webawesome/src/styles/danger/cyan.css delete mode 100644 packages/webawesome/src/styles/danger/gray.css delete mode 100644 packages/webawesome/src/styles/danger/green.css delete mode 100644 packages/webawesome/src/styles/danger/indigo.css delete mode 100644 packages/webawesome/src/styles/danger/orange.css delete mode 100644 packages/webawesome/src/styles/danger/pink.css delete mode 100644 packages/webawesome/src/styles/danger/purple.css delete mode 100644 packages/webawesome/src/styles/danger/red.css delete mode 100644 packages/webawesome/src/styles/danger/yellow.css delete mode 100644 packages/webawesome/src/styles/dimension/blocky.css delete mode 100644 packages/webawesome/src/styles/dimension/flat.css delete mode 100644 packages/webawesome/src/styles/dimension/glossy.css delete mode 100644 packages/webawesome/src/styles/dimension/smooth.css delete mode 100644 packages/webawesome/src/styles/dimension/subtle.css delete mode 100644 packages/webawesome/src/styles/neutral/blue.css delete mode 100644 packages/webawesome/src/styles/neutral/cyan.css delete mode 100644 packages/webawesome/src/styles/neutral/gray.css delete mode 100644 packages/webawesome/src/styles/neutral/green.css delete mode 100644 packages/webawesome/src/styles/neutral/indigo.css delete mode 100644 packages/webawesome/src/styles/neutral/orange.css delete mode 100644 packages/webawesome/src/styles/neutral/pink.css delete mode 100644 packages/webawesome/src/styles/neutral/purple.css delete mode 100644 packages/webawesome/src/styles/neutral/red.css delete mode 100644 packages/webawesome/src/styles/neutral/yellow.css delete mode 100644 packages/webawesome/src/styles/success/blue.css delete mode 100644 packages/webawesome/src/styles/success/cyan.css delete mode 100644 packages/webawesome/src/styles/success/gray.css delete mode 100644 packages/webawesome/src/styles/success/green.css delete mode 100644 packages/webawesome/src/styles/success/indigo.css delete mode 100644 packages/webawesome/src/styles/success/orange.css delete mode 100644 packages/webawesome/src/styles/success/pink.css delete mode 100644 packages/webawesome/src/styles/success/purple.css delete mode 100644 packages/webawesome/src/styles/success/red.css delete mode 100644 packages/webawesome/src/styles/success/yellow.css delete mode 100644 packages/webawesome/src/styles/warning/blue.css delete mode 100644 packages/webawesome/src/styles/warning/cyan.css delete mode 100644 packages/webawesome/src/styles/warning/gray.css delete mode 100644 packages/webawesome/src/styles/warning/green.css delete mode 100644 packages/webawesome/src/styles/warning/indigo.css delete mode 100644 packages/webawesome/src/styles/warning/orange.css delete mode 100644 packages/webawesome/src/styles/warning/pink.css delete mode 100644 packages/webawesome/src/styles/warning/purple.css delete mode 100644 packages/webawesome/src/styles/warning/red.css delete mode 100644 packages/webawesome/src/styles/warning/yellow.css delete mode 100644 packages/webawesome/src/utilities/animation-registry.ts diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 480ad4982..77de2d839 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -3,6 +3,7 @@ "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "bierner.lit-html", - "streetsidesoftware.code-spell-checker" + "streetsidesoftware.code-spell-checker", + "ronnidc.nunjucks" ] } diff --git a/cspell.json b/cspell.json index f6f397bb8..b9dbf3e9a 100644 --- a/cspell.json +++ b/cspell.json @@ -8,8 +8,10 @@ "APG", "apos", "atrule", + "autocapitalize", "autocorrect", "autofix", + "autofocus", "autoload", "autoloader", "autoloading", @@ -43,16 +45,22 @@ "csspart", "cssproperty", "cssstate", + "datalist", "datetime", "describedby", + "dictsort", "Docsify", "dogfood", "dropdowns", "easings", "ecommerce", + "eleventy", + "elif", "endfor", + "endmarkdown", "endraw", "endregion", + "endset", "enterkeyhint", "eqeqeq", "erroneou", @@ -60,6 +68,7 @@ "esbuild", "exportmaps", "exportparts", + "fetchpriority", "fieldsets", "focusin", "focusout", @@ -78,6 +87,7 @@ "giga", "globby", "Grayscale", + "groupby", "haspopup", "heroicons", "hexa", @@ -88,6 +98,7 @@ "inputmode", "ionicon", "ionicons", + "jank", "jsDelivr", "jsfiddle", "keydown", @@ -123,7 +134,9 @@ "noindex", "noopener", "noreferrer", + "noscript", "novalidate", + "nowrap", "Numberish", "nums", "oklab", @@ -159,6 +172,7 @@ "scroller", "Scrollers", "Segoe", + "selectattr", "semibold", "shadowrootmode", "Shortcode", @@ -192,6 +206,7 @@ "typeof", "unbundles", "unbundling", + "Uncategorized", "unicons", "unsanitized", "unsupportive", diff --git a/packages/webawesome/docs/.eleventy.js b/packages/webawesome/docs/.eleventy.js index 48b2361c1..90e035288 100644 --- a/packages/webawesome/docs/.eleventy.js +++ b/packages/webawesome/docs/.eleventy.js @@ -1,66 +1,98 @@ import * as fs from 'node:fs'; import * as path from 'node:path'; +import { parse } from 'path'; import { anchorHeadingsPlugin } from './_utils/anchor-headings.js'; import { codeExamplesPlugin } from './_utils/code-examples.js'; import { copyCodePlugin } from './_utils/copy-code.js'; import { currentLink } from './_utils/current-link.js'; import { highlightCodePlugin } from './_utils/highlight-code.js'; +import { getComponents } from './_utils/manifest.js'; import { markdown } from './_utils/markdown.js'; // import { formatCodePlugin } from './_utils/format-code.js'; // import litPlugin from '@lit-labs/eleventy-plugin-lit'; import { readFile } from 'fs/promises'; import nunjucks from 'nunjucks'; -// import componentList from './_data/componentList.js'; -import * as filters from './_utils/filters.js'; +import process from 'process'; +import * as url from 'url'; import { outlinePlugin } from './_utils/outline.js'; import { replaceTextPlugin } from './_utils/replace-text.js'; import { searchPlugin } from './_utils/search.js'; - -import process from 'process'; - -import * as url from 'url'; const __dirname = url.fileURLToPath(new URL('.', import.meta.url)); - -const packageData = JSON.parse(await readFile(path.join(__dirname, '..', 'package.json'), 'utf-8')); const isDev = process.argv.includes('--develop'); +const packageData = JSON.parse(await readFile(path.join(__dirname, '..', 'package.json'), 'utf-8')); +const docsDir = path.join(process.env.BASE_DIR || '.', 'docs'); +const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4']; +const allComponents = getComponents(); -const globalData = { - package: packageData, - layout: 'page.njk', - server: { +/** + * If you plan to add or remove any of these extensions, make sure to let either Konnor or Cory know as these + * passthrough extensions will also need to be updated in the Web Awesome App. + */ +const passThrough = [...passThroughExtensions.map(ext => path.join(docsDir, '**/*.' + ext))]; + +/** + * This is the guard we use for now to make sure our final built files don't need a 2nd pass by the server. This keeps + * us able to still deploy the bare HTML files on Vercel until the app is ready. + */ +const serverBuild = process.env.WEBAWESOME_SERVER === 'true'; + +export default async function (eleventyConfig) { + // + // Set all global template data here + // + eleventyConfig.addGlobalData('package', packageData); + eleventyConfig.addGlobalData('layout', 'page.njk'); + eleventyConfig.addGlobalData('server', { head: '', loginOrAvatar: '', flashes: '', - }, -}; - -export default async function (eleventyConfig) { - /** - * If you plan to add or remove any of these extensions, make sure to let either Konnor or Cory know as these passthrough extensions - * will also need to be updated in the Web Awesome App. - */ - const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4']; - - const docsDir = path.join(process.env.BASE_DIR || '.', 'docs'); - const passThrough = [...passThroughExtensions.map(ext => path.join(docsDir, '**/*.' + ext))]; - - /** - * This is the guard we use for now to make sure our final built files dont need a 2nd pass by the server. This keeps us able to still deploy the bare HTML files on Vercel until the app is ready. - */ - const serverBuild = process.env.WEBAWESOME_SERVER === 'true'; - - // Add template data - for (let name in globalData) { - eleventyConfig.addGlobalData(name, globalData[name]); - } + }); // Template filters - {{ content | filter }} eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || '')); eleventyConfig.addFilter('markdown', content => markdown.render(content || '')); + eleventyConfig.addFilter('stripExtension', string => parse(string + '').name); + eleventyConfig.addFilter('stripPrefix', content => content.replace(/^wa-/, '')); + // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited. + // With Prettier 3, this means a leading pipe will exist be present when the line wraps. + eleventyConfig.addFilter('trimPipes', content => { + return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content; + }); - for (let name in filters) { - eleventyConfig.addFilter(name, filters[name]); - } + // Custom filter to sort with a priority item first, e.g. + // {{ collection | sortWithFirst('fileSlug', 'default') }} => the item with the fileSlug of 'default' will be first + eleventyConfig.addFilter('sortWithFirst', function (collection, property, firstValue) { + const items = [...collection]; // Create a copy to avoid mutating original + return items.sort((a, b) => { + const aValue = property ? a[property] : a; + const bValue = property ? b[property] : b; + if (aValue === firstValue) return -1; + if (bValue === firstValue) return 1; + return 0; + }); + }); + + // + // Add the componentPages collection + // + eleventyConfig.addCollection('componentPages', function (collectionApi) { + const componentPages = collectionApi.getFilteredByGlob( + path.join(eleventyConfig.directories.input, 'docs/components/**/*.md'), + ); + + return componentPages.map(page => { + const componentName = path.basename(page.inputPath, '.md'); + const tagName = `wa-${componentName}`; + const component = allComponents.find(c => c.tagName === tagName); + + // Add component to the page's data + if (component) { + page.data.component = component; + } + + return page; + }); + }); // Shortcodes - {% shortCode arg1, arg2 %} eleventyConfig.addShortcode('cdnUrl', location => { @@ -102,6 +134,15 @@ export default async function (eleventyConfig) { eleventyConfig.addPairedShortcode('markdown', content => markdown.render(content || '')); // Helpers + eleventyConfig.addNunjucksGlobal('getComponent', tagName => { + const component = allComponents.find(c => c.tagName === tagName); + if (!component) { + throw new Error( + `Unable to find "<${tagName}>". Make sure the file name is the same as the tag name (without prefix).`, + ); + } + return component; + }); // Use our own markdown instance eleventyConfig.setLibrary('md', markdown); @@ -184,7 +225,8 @@ export default async function (eleventyConfig) { } // // SSR plugin - // // Make sure this is the last thing, we don't want to run the risk of accidentally transforming shadow roots with the nunjucks 2nd transform. + // // Make sure this is the last thing, we don't want to run the risk of accidentally transforming shadow roots with + // // the nunjucks 2nd transform. // if (!isDev) { // // // // Problematic components in SSR land: diff --git a/packages/webawesome/docs/_data/componentList.js b/packages/webawesome/docs/_data/componentList.js deleted file mode 100644 index b212e5738..000000000 --- a/packages/webawesome/docs/_data/componentList.js +++ /dev/null @@ -1,78 +0,0 @@ -/** - * @module components Fetches components from custom-elements.json and exposes them in a saner format. - */ -import { readFileSync } from 'fs'; -import { dirname, join, resolve } from 'path'; -import { fileURLToPath } from 'url'; - -const __dirname = dirname(fileURLToPath(import.meta.url)); -const customElementsJSON = process.env.DIST_DIR - ? join(process.env.DIST_DIR, 'custom-elements.json') - : resolve(__dirname, '../../dist/custom-elements.json'); - -const manifest = JSON.parse(readFileSync(customElementsJSON), 'utf-8'); - -const components = manifest.modules.flatMap(module => { - return module.declarations - .filter(c => c?.customElement) - .map(declaration => { - // Generate the dist path based on the src path and attach it to the component - declaration.path = module.path.replace(/^src\//, 'dist/').replace(/\.ts$/, '.js'); - - // Remove private members and those that lack a description - const members = declaration.members?.filter(member => member.description && member.privacy !== 'private'); - - const methods = members?.filter(prop => prop.kind === 'method' && prop.privacy !== 'private'); - const attributes = declaration.attributes ?? []; - const properties = members?.filter(prop => { - // Look for a corresponding attribute - const attribute = attributes?.find(attr => attr.fieldName === prop.name); - if (attribute) { - prop.attribute = attribute.name || attribute.fieldName; - } - - return prop.kind === 'field' && prop.privacy !== 'private'; - }); - - return { - ...declaration, - slug: declaration.tagName.replace(/^wa-/, ''), - methods, - attributes, - properties, - }; - }); -}); - -// Build dependency graphs -components.forEach(component => { - const dependencies = []; - - // Recursively fetch sub-dependencies - function getDependencies(tag) { - const cmp = components.find(c => c.tagName === tag); - if (!cmp || !Array.isArray(component.dependencies)) { - return; - } - - cmp.dependencies?.forEach(dependentTag => { - if (!dependencies.includes(dependentTag)) { - dependencies.push(dependentTag); - } - getDependencies(dependentTag); - }); - } - - getDependencies(component.tagName); - - component.dependencies = dependencies.sort(); -}); - -// Sort by name -components.sort((a, b) => { - if (a.name < b.name) return -1; - if (a.name > b.name) return 1; - return 0; -}); - -export default components; diff --git a/packages/webawesome/docs/_data/components.js b/packages/webawesome/docs/_data/components.js deleted file mode 100644 index 1dab4c111..000000000 --- a/packages/webawesome/docs/_data/components.js +++ /dev/null @@ -1,3 +0,0 @@ -import componentList from './componentList.js'; - -export default Object.fromEntries(componentList.map(component => [component.slug, component])); diff --git a/packages/webawesome/docs/_data/hueRanges.js b/packages/webawesome/docs/_data/hueRanges.js deleted file mode 100644 index 63d7400a6..000000000 --- a/packages/webawesome/docs/_data/hueRanges.js +++ /dev/null @@ -1 +0,0 @@ -export { hueRanges as default } from '../assets/data/index.js'; diff --git a/packages/webawesome/docs/_data/hues.json b/packages/webawesome/docs/_data/hues.json deleted file mode 100644 index 2e68ebe4b..000000000 --- a/packages/webawesome/docs/_data/hues.json +++ /dev/null @@ -1 +0,0 @@ -["red", "orange", "yellow", "green", "cyan", "blue", "indigo", "purple", "pink", "gray"] diff --git a/packages/webawesome/docs/_data/palettes.js b/packages/webawesome/docs/_data/palettes.js deleted file mode 100644 index 3ce705beb..000000000 --- a/packages/webawesome/docs/_data/palettes.js +++ /dev/null @@ -1 +0,0 @@ -export { default as default } from '../../src/styles/color/scripts/palettes-analyzed.js'; diff --git a/packages/webawesome/docs/_data/themer.js b/packages/webawesome/docs/_data/themer.js new file mode 100644 index 000000000..582822f04 --- /dev/null +++ b/packages/webawesome/docs/_data/themer.js @@ -0,0 +1,735 @@ +/** + * All themes used in the themer. + */ +export const themes = [ + { + // + // #region Default + // + name: 'Default', + description: 'Your trusty companion, like a perfectly broken-in pair of jeans.', + filename: 'default.css', + isPro: false, + fonts: { + body: { + name: 'OS Default', + css: 'ui-sans-serif, system-ui, sans-serif', + href: null, + }, + heading: { + name: 'OS Default', + css: 'ui-sans-serif, system-ui, sans-serif', + href: null, + }, + code: { + name: 'OS Default', + css: 'ui-monospace, monospace', + href: null, + }, + longform: { + name: 'OS Default', + css: 'ui-serif, serif', + href: null, + }, + }, + icons: { + family: 'classic', + weight: 1, + }, + palette: { + name: 'Default', + filename: 'default.css', + }, + colorBrand: { + color: 'blue', + }, + tokens: { + // Fonts + '--wa-font-family-body': 'ui-sans-serif, system-ui, sans-serif', + '--wa-font-family-heading': 'var(--wa-font-family-body)', + '--wa-font-family-code': 'ui-monospace, monospace', + '--wa-font-family-longform': 'ui-serif, serif', + '--wa-font-weight-body': 400, + '--wa-font-weight-heading': 600, + '--wa-font-weight-code': 400, + '--wa-font-weight-longform': 400, + + // Elements + '--wa-border-radius-scale': 1, + '--wa-space-scale': 1, + '--wa-border-width-scale': 1, + }, + }, + // #endregion + + // + // #region Awesome + // + { + name: 'Awesome', + description: 'Punchy and vibrant, the rock star of themes.', + filename: 'awesome.css', + isPro: false, + fonts: { + body: { + name: 'Quicksand', + css: 'Quicksand, sans-serif', + href: 'https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap', + }, + heading: { + name: 'Quicksand', + css: 'Quicksand, sans-serif', + href: 'https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap', + }, + code: { + name: 'OS Default', + css: 'ui-monospace, monospace', + href: null, + }, + longform: { + name: 'Crimson Pro', + css: '"Crimson Pro", serif', + href: 'https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap', + }, + }, + icons: { + family: 'classic', + weight: 2, + }, + palette: { + name: 'Bright', + filename: 'bright.css', + }, + colorBrand: { + color: 'blue', + }, + tokens: { + // Fonts + '--wa-font-family-body': 'Quicksand, sans-serif', + '--wa-font-family-heading': 'var(--wa-font-family-body)', + '--wa-font-family-code': 'ui-monospace, monospace', + '--wa-font-family-longform': '"Crimson Pro", serif', + '--wa-font-weight-body': 500, + '--wa-font-weight-heading': 700, + '--wa-font-weight-code': 500, + '--wa-font-weight-longform': 500, + + // Elements + '--wa-border-radius-scale': 1.5, + '--wa-space-scale': 1, + '--wa-border-width-scale': 2, + }, + }, + // #endregion + + // + // #region Shoelace + // + { + name: 'Shoelace', + description: 'The original, familiar look you know and love from Shoelace.', + filename: 'shoelace.css', + isPro: false, + fonts: { + body: { + name: 'OS Default', + css: 'ui-sans-serif, system-ui, sans-serif', + href: null, + }, + heading: { + name: 'OS Default', + css: 'ui-sans-serif, system-ui, sans-serif', + href: null, + }, + code: { + name: 'OS Default', + css: 'ui-monospace, monospace', + href: null, + }, + longform: { + name: 'OS Default', + css: 'ui-serif, serif', + href: null, + }, + }, + icons: { + family: 'classic', + weight: 1, + }, + palette: { + name: 'Shoelace', + filename: 'shoelace.css', + }, + colorBrand: { + color: 'blue', + }, + tokens: { + // Fonts + '--wa-font-family-body': 'ui-sans-serif, system-ui, sans-serif', + '--wa-font-family-heading': 'var(--wa-font-family-body)', + '--wa-font-family-code': 'ui-monospace, monospace', + '--wa-font-family-longform': 'ui-serif, serif', + '--wa-font-weight-body': 400, + '--wa-font-weight-heading': 600, + '--wa-font-weight-code': 400, + '--wa-font-weight-longform': 400, + + // Elements + '--wa-border-radius-scale': 0.7, + '--wa-space-scale': 1, + '--wa-border-width-scale': 1, + }, + }, + // #endregion + + // + // #region Active + // + { + name: 'Active', + description: 'Energetic and tactile, always in motion.', + filename: 'active.css', + isPro: true, + fonts: { + body: { + name: 'Inter', + css: 'Inter, sans-serif', + href: 'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap', + }, + heading: { + name: 'Inter', + css: 'Inter, sans-serif', + href: 'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap', + }, + code: { + name: 'Geist Mono', + css: '"Geist Mono", monospace', + href: 'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap', + }, + longform: { + name: 'Aleo', + css: 'Aleo, serif', + href: 'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap', + }, + }, + icons: { + family: 'classic', + weight: 1, + }, + palette: { + name: 'Rudimentary', + filename: 'rudimentary.css', + }, + colorBrand: { + color: 'green', + }, + tokens: { + // Fonts + '--wa-font-family-body': 'Inter, sans-serif', + '--wa-font-family-heading': 'var(--wa-font-family-body)', + '--wa-font-family-code': '"Geist Mono", monospace', + '--wa-font-family-longform': 'Aleo, serif', + '--wa-font-weight-body': 400, + '--wa-font-weight-heading': 650, + '--wa-font-weight-code': 400, + '--wa-font-weight-longform': 400, + + // Elements + '--wa-border-radius-scale': 1.75, + '--wa-space-scale': 1, + '--wa-border-width-scale': 1, + }, + }, + // #endregion + + // + // #region Brutalist + // + { + name: 'Brutalist', + description: 'Sharp, square, and unapologetically bold.', + filename: 'brutalist.css', + isPro: true, + fonts: { + body: { + name: 'Space Grotesk', + css: '"Space Grotesk", sans-serif', + href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Podkova:wght@400..800&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap', + }, + heading: { + name: 'IBM Plex Sans Condensed', + css: '"IBM Plex Sans Condensed", sans-serif', + href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Podkova:wght@400..800&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap', + }, + code: { + name: 'Space Mono', + css: '"Space Mono", monospace', + href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Podkova:wght@400..800&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap', + }, + longform: { + name: 'Podkova', + css: 'Podkova, serif', + href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Podkova:wght@400..800&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap', + }, + }, + icons: { + family: 'classic', + weight: 2, + }, + palette: { + name: 'Default', + filename: 'default.css', + }, + colorBrand: { + color: 'blue', + }, + tokens: { + // Fonts + '--wa-font-family-body': 'Space Grotesk, sans-serif', + '--wa-font-family-heading': 'IBM Plex Sans Condensed, sans-serif', + '--wa-font-family-code': 'Space Mono, monospace', + '--wa-font-family-longform': 'Podkova, serif', + '--wa-font-weight-body': 400, + '--wa-font-weight-heading': 500, + '--wa-font-weight-code': 400, + '--wa-font-weight-longform': 400, + + // Elements + '--wa-border-radius-scale': 0, + '--wa-space-scale': 1.125, + '--wa-border-width-scale': 2, + }, + }, + // #endregion + + // + // #region Glossy + // + { + name: 'Glossy', + description: 'Bustling with plenty of luster and shine.', + filename: 'glossy.css', + isPro: true, + fonts: { + body: { + name: 'Figtree', + css: 'Figtree, sans-serif', + href: 'https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap', + }, + heading: { + name: 'Figtree', + css: 'Figtree, sans-serif', + href: 'https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap', + }, + code: { + name: 'Chivo Mono', + css: '"Chivo Mono", monospace', + href: 'https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap', + }, + longform: { + name: 'Fraunces', + css: 'Fraunces, serif', + href: 'https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap', + }, + }, + icons: { + family: 'classic', + weight: 1, + }, + palette: { + name: 'Elegant', + filename: 'elegant.css', + }, + colorBrand: { + color: 'indigo', + }, + tokens: { + // Fonts + '--wa-font-family-body': 'Figtree, sans-serif', + '--wa-font-family-heading': 'var(--wa-font-family-body)', + '--wa-font-family-code': '"Chivo Mono", monospace', + '--wa-font-family-longform': 'Fraunces, serif', + '--wa-font-weight-body': 400, + '--wa-font-weight-heading': 800, + '--wa-font-weight-code': 400, + '--wa-font-weight-longform': 350, + + // Elements + '--wa-border-radius-scale': 1.33, + '--wa-space-scale': 1.125, + '--wa-border-width-scale': 1, + }, + }, + // #endregion + + // + // #region Matter + // + { + name: 'Matter', + description: 'Digital design inspired by the real world.', + filename: 'matter.css', + isPro: true, + fonts: { + body: { + name: 'Wix Madefor Text', + css: '"Wix Madefor Text", sans-serif', + href: 'https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap', + }, + heading: { + name: 'Wix Madefor Text', + css: '"Wix Madefor Text", sans-serif', + href: 'https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap', + }, + code: { + name: 'Roboto Mono', + css: '"Roboto Mono", monospace', + href: 'https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap', + }, + longform: { + name: 'Roboto Serif', + css: '"Roboto Serif", serif', + href: 'https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap', + }, + }, + icons: { + family: 'classic', + weight: 1, + }, + palette: { + name: 'Mild', + filename: 'mild.css', + }, + colorBrand: { + color: 'purple', + }, + tokens: { + // Fonts + '--wa-font-family-body': 'Wix Madefor Text, sans-serif', + '--wa-font-family-heading': 'var(--wa-font-family-body)', + '--wa-font-family-code': 'Roboto Mono, monospace', + '--wa-font-family-longform': 'Roboto Serif, serif', + '--wa-font-weight-body': 400, + '--wa-font-weight-heading': 500, + '--wa-font-weight-code': 400, + '--wa-font-weight-longform': 400, + + // Elements + '--wa-border-radius-scale': 1.33, + '--wa-space-scale': 1, + '--wa-border-width-scale': 1, + }, + }, + // #endregion + + // + // #region Mellow + // + { + name: 'Mellow', + description: 'Soft and soothing, like a lazy Sunday morning.', + filename: 'mellow.css', + isPro: true, + fonts: { + body: { + name: 'Mulish', + css: 'Mulish, sans-serif', + href: 'https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap', + }, + heading: { + name: 'Lora', + css: 'Lora, serif', + href: 'https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap', + }, + code: { + name: 'OS Default', + css: 'ui-monospace, monospace', + href: null, + }, + longform: { + name: 'Lora', + css: 'Lora, serif', + href: 'https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap', + }, + }, + icons: { + family: 'classic', + weight: 1.5, + }, + palette: { + name: 'Natural', + filename: 'natural.css', + }, + colorBrand: { + color: 'blue', + }, + tokens: { + // Fonts + '--wa-font-family-body': 'Mulish, sans-serif', + '--wa-font-family-heading': 'Lora, serif', + '--wa-font-family-code': 'ui-monospace, monospace', + '--wa-font-family-longform': 'Lora, serif', + '--wa-font-weight-body': 400, + '--wa-font-weight-heading': 700, + '--wa-font-weight-code': 400, + '--wa-font-weight-longform': 400, + + // Elements + '--wa-border-radius-scale': 1, + '--wa-space-scale': 1.125, + '--wa-border-width-scale': 1.5, + }, + }, + // #endregion + + // + // #region Playful + // + { + name: 'Playful', + description: 'Cheerful and engaging, like a playground on screen.', + filename: 'playful.css', + isPro: true, + fonts: { + body: { + name: 'Nunito', + css: 'Nunito, sans-serif', + href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap', + }, + heading: { + name: 'Fredoka', + css: 'Fredoka, sans-serif', + href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap', + }, + code: { + name: 'Azeret Mono', + css: '"Azeret Mono", monospace', + href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap', + }, + longform: { + name: 'BioRhyme', + css: 'BioRhyme, serif', + href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap', + }, + }, + icons: { + family: 'classic', + weight: 3, + }, + palette: { + name: 'Rudimentary', + filename: 'rudimentary.css', + }, + colorBrand: { + color: 'purple', + }, + tokens: { + // Fonts + '--wa-font-family-body': 'Nunito, sans-serif', + '--wa-font-family-heading': 'Fredoka, sans-serif', + '--wa-font-family-code': 'Azeret Mono, monospace', + '--wa-font-family-longform': 'BioRhyme, serif', + '--wa-font-weight-body': 500, + '--wa-font-weight-heading': 600, + '--wa-font-weight-code': 400, + '--wa-font-weight-longform': 400, + + // Elements + '--wa-border-radius-scale': 2, + '--wa-space-scale': 1, + '--wa-border-width-scale': 3, + }, + }, + // #endregion + + // + // #region Premium + // + { + name: 'Premium', + description: 'The ultimate in sophistication and style.', + filename: 'premium.css', + isPro: true, + fonts: { + body: { + name: 'DM Sans', + css: '"DM Sans", sans-serif', + href: 'https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap', + }, + heading: { + name: 'Playfair Display', + css: '"Playfair Display", serif', + href: 'https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap', + }, + code: { + name: 'OS Default', + css: 'ui-monospace, monospace', + href: null, + }, + longform: { + name: 'Playfair', + css: 'Playfair, serif', + href: 'https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap', + }, + }, + icons: { + family: 'classic', + weight: 1.5, + }, + palette: { + name: 'Anodized', + filename: 'anodized.css', + }, + colorBrand: { + color: 'cyan', + }, + tokens: { + // Fonts + '--wa-font-family-body': 'DM Sans, sans-serif', + '--wa-font-family-heading': 'Playfair Display, serif', + '--wa-font-family-code': 'ui-monospace, monospace', + '--wa-font-family-longform': 'Playfair, serif', + '--wa-font-weight-body': 400, + '--wa-font-weight-heading': 500, + '--wa-font-weight-code': 400, + '--wa-font-weight-longform': 400, + + // Elements + '--wa-border-radius-scale': 0.5, + '--wa-space-scale': 1, + '--wa-border-width-scale': 1.5, + }, + }, + // #endregion + + // + // #region Tailspin + // + { + name: 'Tailspin', + description: 'Like a bird in flight, guiding you from there to here.', + filename: 'tailspin.css', + isPro: true, + fonts: { + body: { + name: 'Inter', + css: 'Inter, sans-serif', + href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap', + }, + heading: { + name: 'Inter', + css: 'Inter, sans-serif', + href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap', + }, + code: { + name: 'OS Default', + css: 'ui-monospace, monospace', + href: null, + }, + longform: { + name: 'OS Default', + css: 'ui-serif, serif', + href: null, + }, + }, + icons: { + family: 'classic', + weight: 1, + }, + palette: { + name: 'Vogue', + filename: 'vogue.css', + }, + colorBrand: { + color: 'indigo', + }, + tokens: { + // Fonts + '--wa-font-family-body': 'Inter, sans-serif', + '--wa-font-family-heading': 'var(--wa-font-family-body)', + '--wa-font-family-code': 'ui-monospace, monospace', + '--wa-font-family-longform': 'ui-serif, serif', + '--wa-font-weight-body': 400, + '--wa-font-weight-heading': 700, + '--wa-font-weight-code': 400, + '--wa-font-weight-longform': 400, + + // Elements + '--wa-border-radius-scale': 1, + '--wa-space-scale': 0.875, + '--wa-border-width-scale': 1, + }, + }, + // #endregion +]; + +/** + * All fonts used by themes, collected from the four font categories. + */ +export const fonts = themes + .flatMap(theme => [theme.fonts.body, theme.fonts.heading, theme.fonts.code, theme.fonts.longform]) + .filter( + (font, index, array) => + array.findIndex(f => f.name === font.name && f.css === font.css && f.href === font.href) === index, + ); + +/** + * Font presets derived from themes, with unique font names in order: heading > body > code > longform + */ +export const fontPresets = themes + .map(theme => { + const fontNames = [ + theme.fonts.heading.name, + theme.fonts.body.name, + theme.fonts.code.name, + theme.fonts.longform.name, + ]; + const uniqueFonts = fontNames.filter((name, index) => fontNames.indexOf(name) === index); + + return { + name: theme.name, + displayName: uniqueFonts.join(' · '), + fontFamilyBody: theme.fonts.body.css, + fontFamilyHeading: theme.fonts.heading.css, + fontFamilyCode: theme.fonts.code.css, + fontFamilyLongform: theme.fonts.longform.css, + fontWeightBody: theme.tokens['--wa-font-weight-body'], + fontWeightHeading: theme.tokens['--wa-font-weight-heading'], + fontWeightCode: theme.tokens['--wa-font-weight-code'], + fontWeightLongform: theme.tokens['--wa-font-weight-longform'], + }; + }) + .filter((preset, index, array) => array.findIndex(p => p.displayName === preset.displayName) === index); + +/** + * Element presets derived from themes. + */ +export const elementPresets = themes.map(theme => ({ + name: theme.name, + borderRadiusScale: theme.tokens['--wa-border-radius-scale'], + spaceScale: theme.tokens['--wa-space-scale'], + borderWidthScale: theme.tokens['--wa-border-width-scale'], +})); + +/** + * All palettes used by themes in a simple array. + */ +export const palettes = themes + .map(theme => theme.palette) + .filter( + (palette, index, array) => + array.findIndex(p => p.name === palette.name && p.filename === palette.filename) === index, + ); + +/** + * Available icons. + */ +export const icons = [ + { name: 'Classic', libraryName: 'classic' }, + { name: 'Sharp', libraryName: 'sharp' }, + { name: 'Duotone', libraryName: 'duotone' }, + { name: 'Sharp Duotone', libraryName: 'sharp-duotone' }, +]; + +export const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray']; +export const tints = ['95', '90', '80', '70', '60', '50', '40', '30', '20', '10', '05']; diff --git a/packages/webawesome/docs/_data/themes.js b/packages/webawesome/docs/_data/themes.js deleted file mode 100644 index 52ea04b20..000000000 --- a/packages/webawesome/docs/_data/themes.js +++ /dev/null @@ -1,62 +0,0 @@ -import fs from 'fs'; -import path from 'path'; -// import { inlined } from '../../dist/components/icon/library.wa.js'; -const distDirectory = process.env.UNBUNDLED_DIST_DIRECTORY || path.join(path.resolve(), 'dist'); - -const THEME_DIR = path.join(distDirectory, 'styles', 'themes'); - -const themeFiles = fs.readdirSync(THEME_DIR).filter(file => file.endsWith('.css') && !file.endsWith('base.css')); - -const declarationRegex = /^\s*--wa-(?[a-z-]+)?:\s*(?.+?)\s*(\/\*.+?\*\/)?\s*;$/gm; -const importRegex = /^\s*@import\s+url\(['"](?.+?)['"]\);$/gm; -const themes = {}; - -for (const file of themeFiles) { - const id = file.replace('.css', ''); - const { imports, declarations } = readCSSFile(file); - let theme = { palette: 'default', declarations, imports }; - - for (const url of imports) { - if (url.endsWith('/color.css')) { - // Color settings - const color = readCSSFile(url); - for (const colorUrl of color.imports) { - if (colorUrl.startsWith('../../color/')) { - // Color palette - theme.palette = getFileSlug(colorUrl); - } else if (colorUrl.startsWith('../../brand/')) { - // Brand color - theme.brand = getFileSlug(colorUrl); - } - } - } else if (url.endsWith('/dimension.css')) { - theme.dimension = true; - } - } - - let icon = {}; - icon.family = theme.declarations['icon-family'] ?? theme.default?.iconFamily ?? 'classic'; - icon.variant = theme.declarations['icon-variant'] ?? theme.default?.iconVariant ?? 'solid'; - theme.icons = icon; - - theme.rounding = Number(theme.declarations['border-radius-scale'] ?? theme.default?.rounding ?? 1); - theme.spacing = Number(theme.declarations['space-scale'] ?? theme.default?.spacing ?? 1); - theme.borderWidth = Number(theme.declarations['border-width-scale'] ?? theme.default?.borderWidth ?? 1); - - themes[id] = theme; -} - -export default themes; - -function readCSSFile(url) { - const contents = fs.readFileSync(path.join(THEME_DIR, url), 'utf8'); - const imports = [...contents.matchAll(importRegex)].map(match => match.groups.path); - const declarations = Object.fromEntries( - [...contents.matchAll(declarationRegex)].map(match => [match.groups.property, match.groups.value]), - ); - return { imports, declarations }; -} - -function getFileSlug(url) { - return url.split('/').pop().replace('.css', ''); -} diff --git a/packages/webawesome/docs/_includes/base.njk b/packages/webawesome/docs/_includes/base.njk index c4421e3a2..5e8d0af79 100644 --- a/packages/webawesome/docs/_includes/base.njk +++ b/packages/webawesome/docs/_includes/base.njk @@ -8,15 +8,39 @@ + + + {% if hasSidebar %}{% endif %} - {% if hasSidebar %}{% endif %} {# Docs styles #} {% block head %}{% endblock %} + + + + @@ -40,7 +64,7 @@