Commit Graph

209 Commits

Author SHA1 Message Date
Cory LaViska
4130246833 add browser + screen reader support policy; fixes #146 (#958) 2025-05-21 13:31:25 -04:00
Lea Verou
0b4c1a5934 Themer 2nd slice: Look & Feel (#920)
* Exclude Create link from sidebar, for reals this time

* Fix bug

* Very rough prototype of look & feel

* a11y

* Clean up data files

* Automatically generate theme metadata

* Read look & feel params straight from theme

* First stab at dimensionality icons

* Fix rounding 0 bug

* Add border width slider

* [Image-comparer] Expose wrapper as part

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

* Dark mode slider

* Adjust increments and ranges for look + feel sliders

* Fix preview

* Fix bug where dark mode was not inverted

* Ability to select panel from URL

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

* Prototype of slider min/max icon buttons

* Nx tooltip

* Icons

* Prevent failed request

* info-tip: Support passing text as prop

* Clearable

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

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

* Only show Reset button when `clearable` is set

* Remove `clearable` from Look & Feel sliders

* Add tooltips to min/max buttons

* Remove superfluous `aria-label`

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

* Formatting

* Fix bug where styles were not applied on page load

* Update Subtle dimension to maximize compatibility

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

* Workaround for card not updating

* Update Glossy dimension to maximize compatibility

* Sync scrolling between regular and inverted preview

* Fix bug

* Make changing the base theme reset customizations

* Fix palette page

* Remove cancel button from editable text

* Don't error in theme pages

* Update Playful dimension to maximize compatibility

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

* Hide dimensionality controls

* Make back icon motion more subtle

* Expand spacing slider bounds

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

* Remove extraneous gap from theme headers

* fix edit button bug

* rename comparer => comparison; fix aria-controls

* Always save theme name on blur

* Add changelog for themer and new patterns category

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>
Co-authored-by: Cory LaViska <cory@abeautifulsite.net>
2025-05-20 10:16:49 -04:00
Kelsey Jackson
8b17b3d3e0 Kj/blog news patterns (#916)
* initial commit to this pr

* updated patterns

* category lists

* post headers

* WIP

* made some content updates

* deleted rogue file

* updated descriptions

* ran prettier

* updated padding

* updated prettierignore

* updated element

* swtiched to token

* updated with category list feedback

* updated with category list feedback

* updated with feedback for featurd post

* updated with feedback for footer

* updated with newsletter feedback'

* updated with feedback to the paywall

* updated with updates for post footer

* more footer updates

* updated with feedback for the post header

* updated with feedback for post list

* updated social share

* updated sign up and login

* added logic to elements to prevent them from closing on escape

* Fix typo (incomplete `<h2>` tag)

* Add missing input labels, fix capitalization and punctuation

* Add description to Blog & News index

* ran prettier on markdown files

* ignored the post list file

* changed hierarchy

---------

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>
Co-authored-by: lindsaym-fa <dev@lindsaym.design>
2025-05-19 10:32:13 -05:00
Cory LaViska
f5d1b74e00 Scroller component (#907)
* add term

* add scroller component

* update color in docs

* prettier

* add vertical example

* use CSS

* add word

* rework shadows and add opt outs

* add examples

* update docs

* Add missing closing tag in 'Adding Content' example

* fix jsdoc

* fix safari pixels

* add changelog entry

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>
2025-05-15 20:12:36 +00:00
Cory LaViska
403927687e add slot detection back to dialog; fixes #926 (#927) 2025-05-14 17:53:48 -04:00
Konnor Rogers
a5b2fffb7a add unlisted and unpublished support (#919)
* add unlisted and excludeFromSearch filters

* rename unlisted to unreleased, rename excludeFromSearch to unlisted

* add notes for unlisted and unpublished

* prettier

* make unused patterns unpublished

* unreleased -> unpublished

* unreleased -> unpublished

* update contributing
2025-05-12 15:44:25 -04:00
Cory LaViska
6afc6e928c remove ssr attributes since we're not using ssr (#917) 2025-05-12 10:51:49 -04:00
Lea Verou
bdd25571a8 Themer first slice (#857)
* Basic scaffolding

* Generate theme & palette data.js that other JS can import

* Make it possible to include page-card without links

* WIP

* Add `appearance` to details, closes #569

Except `accent` as that's a) far less useful and b) trickier due to the icon color

* Fix broken link

* WIP

* WIP

* Icons icon

* Unify styles for interactive cards

* Prevent focusing inside theme icons

* Fixes

* Action page cards

* Panel scrollables

* scrollable

* Scroll shadows

* Add renaming UI

* UI

* Move styling of heading icons to `ui.css`

* Support permalinks & CRUD

* Make clickable cards more accessible

* Style cards a little better

* Default to styles panel if theme is selected

* Update theme-icons.css

* Custom themes should be saved under Custom

* Get theme code

* Bigger title

* Fixes

* Use theme Vue app for remixing too

* Fix preview jank and make preview script more flexible

* Make radio groups scrollable

* Add affordance to button cards

* Sticky

* `<color-select>`

* Fix theme remixing

* Improve previewing logic

* Fix preview

* Move `domChange()` to separate module

`theme-picker.js` includes side-effects, which may not always be desirable everywhere we may want to import `domChange()`

* Update preview.js

* Panel animation

* Hide Save button if no changes and not saved

* Do not show blank code when no selection has been made

* Use theme slug in filename

* Remove unused component

* Better UI for editing title (and any other text)

* Tweak UI of renaming

* Better indicate default selection

* Fix preview reverting bug

* Fill out app preview with more examples

* Remove `zoom` from theme showcase (yields unexpected/painful results Safari), improve display in wider viewports

* Pending delete

* Make styles panel cards scrollable

* Fix some of the Safari issues

* Update search.css

* Update panel.css

* Select preview UI

* Fix typo

* Frame colors setting as color contrast

* Show dark mode in color mappings

* Brand color

* Swatch styling

* Fix caret icon

* Move Starting theme to the same level as other controls

* Rename typography to Fonts

* Fix bug: Swatch select should show swatches from the selected palette

* Move capitalize to shared utils

* Add utils for handling nested objects

* Icons panel

* Update code.js

* Move utils around

* Add fit and finish to sidebar panels

* Theme card: Move icons to separate data structure

* Move data to dedicated folder since we now have a lot more of it

* Add default icon families and variants to themes

* Data

* Add `deepEntries()`

* Add Duotone

* Spruce up icons preview

* Use theme's icon family in showcase

* Font cards

* Font cards

* Add `max-inline-size` to preview container

* Remove alternate preview options

* Remove theme subtitle

* Support FA kit codes

* Remove Pro badges from theme cards

* Use panagram preview for Fonts

* Consistent heading and label capitalization

* Classes for different icons-card types

* Update data.js.njk

* Variable style on icon family cards

* Fix Sharp Duotone

* Clean up FA kit code hint

* Hide non-functional Icon Library field

* Fix theme icon heights

* icon variant -> style in theme metadata

* Fix bug with icons defaults not being shown

* More convenient theme defaults

* Fix bug with non updating URL

* Fix bug

* Fix multiplying badges

* Custom docs pages

* Add Duotone icons to Mellow theme

* Fix 404

* Remove "Create" from sidebar

* Fix bug

* Move vue components to `/assets/`, move their CSS with them

* Safari/FF compatibility

* Make panels scrollable again

* Fix extra spacing

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>
2025-05-09 17:04:06 -04:00
Cory LaViska
22298781c5 Remove alpha flags (#913)
* remove alpha flags

* revert isPro flag

* update scripts
2025-05-08 13:58:26 -04:00
Cory LaViska
9ee3fb5d28 Remove old code util; fix color scheme shortcut; fix initial examples (#905)
* fix color scheme shortcut

* remove old unused examples script and styles

* don't open the first example's code _sometimes_
2025-05-01 20:17:27 +00:00
Lea Verou
e813440315 [Image-comparer] Several fixes + rename to comparer (#883)
Co-authored-by: Cory LaViska <cory@abeautifulsite.net>
2025-04-28 16:58:24 -04:00
Konnor Rogers
b75d3b615c fix login media query and leaking variables with Turbo (#867)
* fix media queries to use wa-desktop-only

* fix errors in remix.js when changing pages

* prettier
2025-04-14 11:11:08 -04:00
Kelsey Jackson
9d1c47449e Kj/first pattern launch (#861)
* dividing up e-commerce patterns

* started invoice table

* building out the filter

* Initial Commit

* switching machines

* switching machines

* started split image pattern:

* commiting to merge in next

* commiting to switch machines

* upated the product detail patterns

* updated product list patterns

* updated some patterns

* filter work

* added utilities to order history

* added utilities to order-summary

* updated width of container

* switching machines

* switching machines

* fixing conflicts

* editing descriptions

* updated descriptions

* adding some polish

* more filter work

* updated prouct preview

* Revisions to "Product Features"

* "Category Filters" revisions + `wa-placeholder` utility

* cleaned up product list

* tweaked product overview

* tweaked order history

* tweak category preview

* "Checkout Form" revisions

* Re-add `navigation` to "Product Features" carousel

* cleaned up shopping cart

* tweaked order summary

* Add missing file extension

* Fix typo in file name

* Revert checkout form changes in attempt to improve diff

* Reimplement checkout form revisions

* cleaned up checkout form

* Add "What's a Pattern?" and "Using Patterns" to index

* Update category descriptions and headings

* Add docs layout for patterns with stylesheet

* tweaked customer review

* Add checkout form example

* a little more polish

* more tweaks

* switching branches to merge

* created e-commerce index

* unlisted links

* updtated content

* updated content for category preview

* updated order history

* committing to bring branches up to next

* inital commit

* Reorganize app patterns into separate pages

* switching machines

* Add link style utilities

* Refactor product list patterns

* more polish

* Refactor product overview patterns

* switching machines

* Refactor shopping cart patterns

* committing to pull down changes

* updated product preview

* updated image

* updated incentives

* Clean up utility usage and code formatting for category previews

* started updating with style utilities

* Clean up utilities and formatting, replace placeholder text in order history

* updated incentive images

* updated reviews

* added review variant

* more polish

* some heavy duty updates

* removed store navigation

* switching machines
:

* Clean up utility usage and code formatting for order summaries

* Clean up utility usage and code formatting for product previews

* big switchover

* removed old file

* working on sidebar

* updated sidebar

* created info category

* splitting up the old blog page

* a little cleanup and adding detail

* got three done

* updated social share

* Quick formatting adjustment

* initial paywalls

* Use overviews in pattern subcategories (#826)

* Do not error if no pages

* Automatically set parents and tags for patterns

* Update overview.njk

* [WIP] Use overview pages for pattern listings

* Remove explicit parents

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>

* some newsletter signups

* added login patterns

* reworked feeds'

* a few more

* added a few more

* add more app patterns

* App pattern tweaks (#827)

* Fix `patterns.css` reference

* Tweaks to action panel patterns

* Tweaks to comments patterns

* Progress on data display patterns

* Progress on empty state patterns

* Use email-related data from recent update in `pattern-main` (altered slightly)

* Tweaks to data display patterns

* Tweaks to empty state patterns

* Tweaks to FAQ patterns

* Tweaks to feed patterns

* Tweaks to grid patterns

* Tweaks to pagination patterns

* Tweaks to pricing patterns

* Tweaks to description list patterns

* Tweaks to leaderboard patterns

* Add and update names and descriptions

* Ensure comments fields have labels

* Tweak recent additions

* switching machines

* catching up with next

* added permissions pattern

* switching machines

* added post articles

* having local browset issues

* a few more app patterns

* took out info patterns

* spiffed up the action panels

* gave the action panels a once over

* added content to data display

* updated a few patterns

* clean up a few e-commerce patterns

* added time componen to reviews

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>
Co-authored-by: Lea Verou <lea@verou.me>
Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
2025-04-14 11:10:54 -04:00
Lea Verou
2cfd651d2f Prevent theme icons from getting focus when tabbing
Looks like `tabindex="-1"` didn't work, need to file a separate issue for that
2025-03-28 13:27:08 -04:00
Lea Verou
b4240fd321 Move /docs/installation to /docs/, fix parent URL logic, closes #585 (#846)
* Fix: Parent URL should be undefined if parent is falsy

* Document `docs.11tydata.js` better

* Move `docs/installation.md` to `docs/`, fixes #585

* Just in case
2025-03-28 12:12:42 -04:00
Lea Verou
8a26afc334 Fix for theme icons + easier to generate palette icons (#841)
* Make sure components that only appear within page icons are still detected

* Palette icons

* Update theme-icons.css

* Reduce whitespace between swatches

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>
2025-03-27 14:25:52 -04:00
Lea Verou
09f668fc99 Workaround for dark mode 2025-03-26 18:31:08 -04:00
Lea Verou
d451ba98e5 Fix web fonts in theme icons
Instead of raw DSD, use a component that pulls in a child template and then goes over the CSS and extracts font-related rules into the document, just once per rule.
This also fixes theme icons in Vue.
2025-03-26 18:31:08 -04:00
Lea Verou
8424b49646 Theme icons, take 1 2025-03-26 18:31:08 -04:00
Lea Verou
8214ff6b2d Several fixes around overviews, outlines etc (#825)
* Fix outline for headings that have links

Previously produced blank items because it assumed any link in a heading is an anchor

* Filter unlisted items from overviews

Previously they were filtered only when the card was rendered, so their heading was still shown

* [Overview] Add id to group headings

* Hide headings from empty groups

Should never happen but you never know

* [Overview] Ensure "Other" is always last even when no sorting
2025-03-25 11:39:04 -04:00
Cory LaViska
fcfe2bde7d Add FOUCE utilities (#686)
* add fouce utilities

* add comment

* Update docs/docs/installation.md

Co-authored-by: Lea Verou <lea@verou.me>

* commit PR suggestion

* rename wa-reduce-fouce to wa-cloak

* remove class as requested

* add cloak class

* wait a cycle

* move turbo to same file

* reduce fade

* disable SSR and add Turbo FOUCE helper

* disable SSR

* fix test suite

* workflow dispatch

* update fouce util

* no need to remove cloak class

* simplify fouce util

* add allDefined util

* update changelog

---------

Co-authored-by: Lea Verou <lea@verou.me>
Co-authored-by: konnorrogers <konnor5456@gmail.com>
2025-03-24 20:33:24 +00:00
Lea Verou
59dcaaff83 Content hierarchy bugfixes & improvements (#821)
- Sidebar, overview listings, breadcrumbs now based on actual parent-child relationships, rather than increasingly outdated heuristics
- parent properties are now generated automatically from the URL structure, and need only be specified to override that default
- Ability to group by page hierarchy in overview pages, where pages that have >= 2 children become categories

Smaller improvements:
- More flexible syntax for specifying the params of overview pages
- [Overviews] Hide group heading if only one group is present
- parentItem and parentUrl properties that can be used on any page
- Alias a collection as the children of a page (useful for "virtual" parents like Layout)
- Do not error if a page card icon is missing
2025-03-21 16:30:06 -04:00
Konnor Rogers
79bafc513a 11ty for webawesome-app (#803)
* working on integration

* 11ty for webawesome + app

* add flashes

* additional changes

* prettier

* add note about nunjucks

* prettier
2025-03-18 13:04:24 -04:00
Lea Verou
4921d1c32e Save palette MVP, fixes #746 (#755) 2025-02-18 16:11:40 -05:00
Lea Verou
d6a91919e0 Code block improvements
- Add ids, use ids to link copy button. No need for client-side script or updating the copy button manually for dynamic code snippets.
- Add button to link to code block
- Slight refactor on copy plugin to use the 11ty API properly
2025-02-14 15:09:02 -05:00
Lea Verou
726dc73e2a Hue tweaking & chroma scaling, closes #669 #670 (#747)
- General infrastructure to support palette tweaking
- Hue shifts per color scale (UI, permalinks, dynamic code snippets)
- Scale overall chroma up/down (UI, permalinks, dynamic code snippets)
- Update contrast ratio tables (styling for contrast up/down/fail could use improvement, but it's a starting point)
- Make sure it works with Turbo (i.e. things don't break when we navigate to another page)
2025-02-13 19:28:20 -05:00
Lea Verou
99ad0abdd3 Palette icons, take 4 2025-02-13 10:52:40 -05:00
Lea Verou
ffda52a7cf Theme remixing: Dynamic code snippets (#729) 2025-02-07 23:03:34 -05:00
Lea Verou
c30f3c4b09 Improve theme remixing UI (#724)
Co-authored-by: lindsaym-fa <dev@lindsaym.design>
Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
2025-02-07 11:35:12 -05:00
lindsaym-fa
3394a95057 Remove visual test failure markers 2025-02-06 10:57:33 -05:00
Lindsay M
6080a85035 Replace teal with cyan, fixes #659 (#671)
Co-authored-by: Lea Verou <lea@verou.me>
2025-02-03 19:01:23 -05:00
lindsaym-fa
f7e088c8df Rename violet to purple, fixes #656 2025-02-03 18:47:03 -05:00
Lea Verou
404d59d9d6 Improve FOUCE reduction utility, docs fixes, :state(wa-defined) (#643)
* Utility layout

* Split out, improve & document FOUCE utility
2025-01-31 11:19:30 -05:00
Lea Verou
74ecc52a15 Inheritable size (#593)
Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Co-authored-by: lindsaym-fa <dev@lindsaym.design>
2025-01-30 15:56:32 -08:00
Lindsay M
d8881c0b1e Add Visual Test Suite (#617)
* Initial progress on visual test suite

* Additional tests and descriptions

* Add native callout, add dividers between tables

* Indicate test failures, improve alignment tests

* Split tests into separate files

* Add table scrolling

* Remove irrelevant icon test cases

* Add test failures

* Shorten "Inline Code" > "Code" to prevent wrapping

* Add horizontal orientation to radio button tests
2025-01-28 18:45:19 -05:00
Lea Verou
099edc5186 Implement wide page-level data 2025-01-22 13:25:29 -05:00
Lea Verou
da32015f27 Basic mixing and matching docs (#560) 2025-01-16 16:31:24 -05:00
Lea Verou
df51149d0a Show contrast ratios in contrast pair tables 2025-01-16 13:18:26 -05:00
Lea Verou
d464714d7b Rudimentary palette icons 2025-01-16 10:15:16 -05:00
Lea Verou
7d089bbe2f Palette Docs 2025-01-16 10:15:16 -05:00
Lea Verou
1738c6345b Fix #514 for reals this time 2025-01-14 13:02:37 -05:00
Lea Verou
0ac7916a1b Attempt to fix #514 2025-01-14 13:02:37 -05:00
Lea Verou
07f70098f8 Theming -> Design Tokens 2025-01-14 12:31:24 -05:00
Lea Verou
bf852b1296 Fix #515 2025-01-14 11:29:36 -05:00
Lea Verou
e367c0ef29 Open sidebar group on overview pages, fixes #507 2025-01-14 10:20:04 -05:00
Lea Verou
a07f6280a3 Themes category in docs (#477)
Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Co-authored-by: lindsaym-fa <dev@lindsaym.design>
2025-01-13 13:14:12 -05:00
Lea Verou
6822b25772 Rewrite color scheme logic (#481)
- Minimize needless swaps
- Centralize logic
- Use an actual `<wa-select>` rather than hacking it with `<wa-dropdown>`
- Move shared includes to shared template
- Rewrite critical theme JS
- Refactor of theme picker code
- Utilize view transitions better and use them for color scheme too
- Do not store default value in localStorage
- Removed unused `*-wide` templates
- Fixed #482
2025-01-10 15:32:28 -05:00
Lea Verou
eb07dc1410 Use passthrough copy (#474) 2025-01-09 17:24:18 -05:00
Lindsay M
5bfeb8044e Theme showcase improvements (#480)
* Presentation improvements

* Change `-webkit-text-size-adjust` to supported value (`none` isn't a supported keyword on iOS)

* Try using `text-size-adjust`

* Throwing caution to the wind

* Give up on `text-size-adjust` and add 1-column view
2025-01-09 13:31:31 -05:00
Lea Verou
419f0610e4 Template-tweaks
- Move breadcrumbs to separate template
- Rename `beforeContent` to `header`
- Move breadcrumbs inside header
2025-01-09 02:26:01 -05:00