Commit Graph

83 Commits

Author SHA1 Message Date
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
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
971200cc88 Move domChange() to separate module (#868) 2025-04-14 12:52:00 -04:00
Lea Verou
ff3b3d6558 Remove current class from existing sidebar link before adding it to new one 2025-04-02 14:16:03 -04:00
Lea Verou
6b3edb8a56 Tiny fix in saving mixin 2025-04-02 14:16:03 -04:00
Lea Verou
6162b8b115 Move v-content directive to separate file 2025-04-02 11:51:12 -04:00
Lea Verou
cff752b600 Move CRUD logic from palette app to Vue mixin 2025-04-02 11:51:12 -04:00
Lea Verou
7892a94b9b Rewrite and generalize CRUD logic for customizable entities (palettes, themes) (#854)
* Generalize CRUD logic to more easily support themes (and other types of entities)
* Decouple data structures managing saved entities (palettes, themes), sidebar update logic, and palette app (and soon themer) by using events
* Simplify logic (a lot of it carried complexity back from the time we did not use uids and/or was overly general)
* `PersistedArray` class to encapsulate arrays persisted in localStorage
* Remove unused `palette.equals()` function
2025-04-01 16:26:25 -04:00
Lea Verou
0f2950c4cc Import CRUD parts from #828 2025-03-31 17:53:33 -04:00
Cory LaViska
8eba1e5003 Various bug fixes (#839)
* add default icon spacing in tab; fixes #779

* fix radio button pill styles; fixes #759

* remove redundant styles

* fixes #840

* fix focus ring in Safari; fixes #745

* improve details styles; fixes #685

* update examples

* Revert "improve details styles; fixes #685"

This reverts commit 8151872d22.

* revert

* revert

* fix dropdown alignment in button group; closes #374

* fix progress animation in Safari; closes #356

* fix native checkbox indeterminate icon; closes #386

* add comment

* stop running SSR tests locally

* update test

* add FA kit code for codepen 🤞🏻

* remove wa-cloak after components load

* fix whitespace

* update display labels when changed; fixes #702

* fix radio labels (ALPHA-211)

* revert example

* add option as a dep of select

* remove outdated section
2025-03-28 10:57:01 -04:00
Lea Verou
404c15b303 Fix race condition, closes #843 2025-03-27 16:14:24 -04:00
Lea Verou
09f668fc99 Workaround for dark mode 2025-03-26 18:31:08 -04:00
Cory LaViska
1bba87c66d Improve search lists (#837)
* add debounce to search so it feels more natural

* improve search grid styles
2025-03-26 16:07:09 +00:00
Cory LaViska
0db9ca12e3 Remove unused SSR module and remove first load fade (#835)
* disable SSR module in 11ty

* remove first load fade
2025-03-26 14:45:29 +00:00
Cory LaViska
c9979e15f8 adds a hard coded delay to drastically reduce theme picker jank (#829) 2025-03-24 20:49:08 +00: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
71e7227763 Theme remixing fix: Order of params should not matter (#772)
Also renamed the `theme` export to `getThemeCode` since it was being renamed everywhere it was imported.
2025-02-21 14:03:55 -05:00
Lea Verou
132dbfabcc Gray tweaks prototype (#761)
Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
2025-02-20 12:10:43 -05: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
ffda52a7cf Theme remixing: Dynamic code snippets (#729) 2025-02-07 23:03:34 -05:00
Cory LaViska
e1bf5471bf Use native events when possible (#590)
* fix filename

* <wa-input> input + change (change not working)

* compose that horribly misleading change event

* use native blur/focus events

* update checkbox

* update color picker events

* update color picker events

* update radio group events

* update button events

* remove event options

* update select events

* update image comparer events

* update icon button events

* update slider events

* update rating events

* update radio events

* update switch event

* update textarea events

* update radio button events

* remove unused events

* cleanup

* fix react wrappers

* fix react events for real this time

* update changelog

* add note

* Update src/components/input/input.ts

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

* delete unused close event

* use same event type

* fix tests

* remove wa- from events in docs and examples

* fix comment

* Update docs/docs/resources/changelog.md

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

---------

Co-authored-by: Lea Verou <lea@verou.me>
2025-01-23 17:52:41 -05:00
Lea Verou
15344c2a2a Appease Turbo for the color scheme picker too, fixes #520 2025-01-16 10:15:52 -05:00
Lea Verou
0ac7916a1b Attempt to fix #514 2025-01-14 13:02:37 -05:00
Lea Verou
01210ef364 Implement .wa-invert, closes #497 (#508) 2025-01-14 10:04:27 -05:00
Cory LaViska
ab67ecfad3 add native icon to search (#498) 2025-01-13 14:48:51 -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
6d31db57f6 Revise and add showcase to Themes doc (#456)
* Initial progress

* Make responsive

* quick fix to show theme name/description

* Small styling tweaks

* Documentation updates

* Revisions and improvements

* Avoid using static URLs 'cause that's ridiculous

---------

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>
2025-01-08 17:33:09 -05:00
Lindsay M
fa66f4262d Fix mobile theme selector; fixes #440 (#446)
* Fix styling

* Fix mobile theme selector label
2025-01-08 15:01:20 -05:00
Cory LaViska
b4c4074ae1 fix mobile color picker bug (#462) 2025-01-08 13:49:57 -05:00
Lea Verou
19042fcca4 Decouple dark mode & theme, fixes #445 closes #385 (#457)
Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
2025-01-08 12:50:29 -05:00
Lindsay M
e046015ed5 Theme cleanup (#414)
* formatting, docs tweaks

* FA theme cleanup

* Revert removal of `--wa-form-control-height-*`

* Classic theme cleanup

* Use consistent selectors for dark mode

* Clean slate for additional themes

* Retire depth stylesheets

* Move header styles for themer out of themes

* Missed instance of dark mode selector

* Migration theme cleanup

* Brutalist theme cleanup

* Changelog for new themes

* Playful theme cleanup

* Formatting

* Default theme update

* Add tests for form theming

* Fix test typo

* Change misnamed `multiplier` properties to `scale`

* Active theme cleanup

* Mellow theme cleanup

* Cleanup unused FA styles

* Glassy theme progress

* Add checked styles to glassy

* Fix typo

* Final FA theme cleanup

* Rename FA theme to 'Awesome', allow in alpha

* Final brutalist theme cleanup

* A few more brutalist tweaks

* One last brutalist tweak

* Final mellow theme cleanup

* Final Tailwind theme cleanup

* Final active theme cleanup

* Some classic theme cleanup

* Remove unused `--wa-form-control-height-*`

* Rename `--wa-form-control-resting-color` to `border-color`

* Touch up callout `appearance` styles

* Add more themes to alpha

* Add changelog for removal of `--wa-form-control-height-*`

* Clean up colors

* Final classic theme cleanup

* Add new themes to alpha build

* Re-add teal (used by Awesome theme)

* sync mobile/desktop theme pickers and don't dup IDs

* Remove `color/standard.css` (duplicates `/themes/default/color.css`)

* add view transition

* Add premium theme for later cleanup

* Accommodate new tag `appearance` styles

* Revise `--wa-form-control-height-*` changelog entry

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

* Improve `--wa-border-width-scale` description

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

* Better border docs

* Premium tweaks

---------

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>
Co-authored-by: Lea Verou <lea@verou.me>
2025-01-07 15:41:57 -05:00
Lea Verou
ac7437894a Automate all overviews, fix bugs with filtering 2025-01-03 20:17:19 -05:00
Cory LaViska
e2acfd106f fix padding in codepen examples 2024-12-20 15:39:30 -05:00
Lea Verou
83fb761d41 Rename applied.css to docs and add some docs on usage 2024-12-20 14:01:14 -05:00
Cory LaViska
9979028d7e fix smooth scroll bug 2024-12-17 12:09:45 -05:00
Lea Verou
b0c4c7263b Allow Prettier default for trailing commas, run Prettier on repo
per convo with @claviska
2024-12-14 17:10:26 -05:00
lindsaym-fa
28ebab868b remove busted links to old layout.css location 2024-12-13 15:03:25 -05:00
Lea Verou
9c17d27af4 Big CSS Reorg Part 1 (#304) 2024-12-13 13:45:33 -05:00
Lea Verou
ea25de8040 Split CSS utility regions into separate files 2024-12-13 04:25:58 -05:00
Cory LaViska
1ea76cc08a fix padding and newlines 2024-12-06 10:45:13 -05:00
Cory LaViska
786b3c3da2 add layout and utilities to codepen 2024-12-06 10:36:30 -05:00
Lea Verou
6cc3b05fb7 Move cheatsheet JS to separate file 2024-12-03 12:36:51 -05:00
Kelsey Jackson
6c0c8843c8 ran linter to pass tests 2024-11-14 12:19:54 -06:00
Kelsey Jackson
1cb0dba351 updated code example 2024-11-14 02:58:39 -06:00
konnorrogers
735e713ef6 add a preset theme switcher 2024-10-22 12:27:43 -04:00