Commit Graph

196 Commits

Author SHA1 Message Date
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
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
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
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
Cory LaViska
513a1e35a9 Dialog fixes (#790)
* revert structure and styles to fix WA-A #123

* fix WA-A #201

* update changelog

* fix search dialog position so it doesn't jump around

* remove close watcher; fix dialog/drawer backdrop animations
2025-03-27 12:14:35 -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
lindsaym-fa
fd287edd56 Change balance of color swatches 2025-03-26 18:31:08 -04:00
Lea Verou
8424b49646 Theme icons, take 1 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
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
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
Lea Verou
17eeccbc5d Better infrastructure for core colors, show core colors in docs, closes #668 2025-02-05 11:24:13 -05:00
Lea Verou
099edc5186 Implement wide page-level data 2025-01-22 13:25:29 -05:00
Lea Verou
7258c001a7 Demo for mixing and matching (#565) 2025-01-17 10:38:03 -05:00
lindsaym-fa
3974aa5130 Decrease line height on swatches 2025-01-16 10:15:16 -05:00
Lea Verou
7d089bbe2f Palette Docs 2025-01-16 10:15:16 -05:00
Lea Verou
89c0667e9c Improve maintainability of color docs 2025-01-14 14:44:30 -05:00
Lindsay M
17146698db Finalize Premium theme, closes #489 (#510)
* Finalize Premium theme

* Improve theme compatibility of dark mode shadows

* Improve theme compatibility of code examples

* Add comments

* Revert dark mode shadow color changes (to be addressed separately)

* Revert dark mode shadow color change

* Clean up redundant `wa-dark` properties
2025-01-14 11:56:30 -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
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
Lea Verou
1ad963f5ad wa-card styling fixes 2025-01-08 15:36:12 -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
06e432589f change migration => tailspin (#463) 2025-01-08 13:59:27 -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
ef7d47e2b9 [Docs] Move commonalities across blocks to a single base layout (#424) 2025-01-06 17:01:29 -05:00
Lea Verou
ac7437894a Automate all overviews, fix bugs with filtering 2025-01-03 20:17:19 -05:00
lindsaym-fa
ed3e7014e3 Simplify border radius scale 2025-01-02 15:37:09 -05:00
Lea Verou
08f327c224 [docs.css] Remove duplicate code, use CSS nesting for .index.grid 2024-12-23 01:58:10 -05:00
Cory LaViska
c33d17b4a2 fix search styles 2024-12-20 12:59:58 -05:00
Lea Verou
1a1847eeb5 Update search dialog styles to new simpler structure, closes #331 2024-12-19 19:48:38 -05:00
Lea Verou
107f074f99 Page utils & native styles 2024-12-19 17:34:32 -05:00
lindsaym-fa
ad467f0691 Add native details styles and share with <wa-details> 2024-12-18 17:02:25 -05:00
Lea Verou
5a82b7ad99 Remove BEM-style namespaces on class names (#316) 2024-12-17 13:46:39 -05:00
lindsaym-fa
9c4e4a2280 Use appearance for alpha badge 😁 2024-12-17 11:57:32 -05:00
Lea Verou
1e1877c954 --content-color ➡️ --text-color
Harmonize with other properties for the same thing
2024-12-17 10:41:51 -05:00
Lea Verou
2136fed4cb --label-color ➡️ --text-color
As we move towards using these helpers more widely, `--label-color` doesn't quite make sense
2024-12-17 10:39:47 -05:00
Lea Verou
afde497a1a [Docs] Collapse "Components" by default, except when viewing a page in /components/ 2024-12-16 11:14:18 -05:00
lindsaym-fa
b25e58b24b reinstate content flow rule 2024-12-12 16:13:39 -05:00
Cory LaViska
1a61bd9583 fix outline spacing 2024-12-10 09:35:08 -05:00
lindsaym-fa
48fc9d9779 touch up header and sidebar spacing 2024-12-09 22:31:44 -05:00
Konnor Rogers
65ced601e9 fix various page issues (#286)
* fix dialog issues

* fix various page issues

* prettier
2024-12-09 19:00:16 -05:00
Cory LaViska
b8f4a38c80 Merge branch 'next' of https://github.com/shoelace-style/webawesome into next 2024-12-09 12:15:41 -05:00
Cory LaViska
a86acc9717 remove pro/dev stuff from alpha release 2024-12-09 12:13:32 -05:00
Lea Verou
0a5e4ab99c Make sidebar headings links whenever an overview is available (#241) 2024-12-09 11:33:04 -05:00
Lindsay M
c2d240b393 Layout utilities (#169)
* initial progress

* testing progress

* play with naming, utility classes

* more tweaking and testing

* progress on 12 column grid

* add layout index, start documenting

* documentation progress

* cleanup and doc progress

* more doc progress

* more progress

* final progress hurdle and cleanup

* refining and editing

* remove sandbox

* refactor extra utility classes

* layout index improvements

* change gap modifiers to utility classes

* change align modifiers to utility classes

* move layout examples above fold

* reduce demo markup

* use standard aspect ratio property for wa-frame

* change border-radius modifier to utility class

* rename wa-grid's 'min-inline-size' to 'min-column-size'

* clean up comments

* rename wa-align-* to wa-align-items-*

* break out style utilities from layout

* clean up
2024-11-21 14:07:12 -05:00
Lindsay M
43c5c009f0 Add Shoelace theme (#173)
* initial progress

* touch up classic theme

* finalize theming index

* revise themes doc

---------

Co-authored-by: konnorrogers <konnor5456@gmail.com>
2024-09-18 12:01:44 -04:00