Commit Graph

13 Commits

Author SHA1 Message Date
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
Lea Verou
58ed88bc5a Add orange to list of hues 2025-03-05 22:27:11 -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
Lindsay M
a91fd07ed7 Add pink, closes #658 (#742) 2025-02-11 10:52:51 -05:00
Lea Verou
d25f3748c4 Analyze color components (#732)
Also refactored existing color scripts (moved to separate directory, extracted utils to separate file)
2025-02-10 13:54:54 -05:00
Lea Verou
17eeccbc5d Better infrastructure for core colors, show core colors in docs, closes #668 2025-02-05 11:24:13 -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
df51149d0a Show contrast ratios in contrast pair tables 2025-01-16 13:18:26 -05:00
Lea Verou
52c24fc3b7 Add color palette to theme pages 2025-01-16 10:15:16 -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
Lea Verou
dd7b673328 Run Prettier on repo
Turns out `prettier-plugin-organize-imports` sorts imports differently than the old one so this will prevent spreading the change across multiple commits whenever we touch a file (and potentially introducing conflicts)
2024-12-14 17:01:35 -05:00
Lea Verou
bd35c23784 Indices of components by attribute, slot, part, etc. (#240)
* Simplify how list of components is exposed to 11ty

No need for functions or computing multiple times, that's what data is for!

* Add attributes to component data

* Cleanup

* Add slug (tagName without wa-)

* Add component reference / cheatsheet
2024-11-24 21:19:50 -05:00