From 0780b672fee1a3df91f20254f7c94429a06b8a0f Mon Sep 17 00:00:00 2001 From: Lokesh Dhakar Date: Mon, 24 Aug 2026 22:15:31 -0700 Subject: [PATCH 1/4] Add the 17 lucide icons the legacy-icon audit calls for Staged ahead of the replacement work so the sprite already carries them when each legacy image swap lands. No references yet; the sprite build auto-discovers everything under static/icons/src/. Claude-Session: https://claude.ai/code/session_01RtTEd3rAHJYz3zKi3zUWwD --- static/icons/src/lucide/bell.svg | 1 + static/icons/src/lucide/book-open.svg | 1 + static/icons/src/lucide/circle-help.svg | 1 + static/icons/src/lucide/download.svg | 1 + static/icons/src/lucide/git-merge.svg | 1 + static/icons/src/lucide/grip-vertical.svg | 1 + static/icons/src/lucide/headphones.svg | 1 + static/icons/src/lucide/heart.svg | 1 + static/icons/src/lucide/info.svg | 1 + static/icons/src/lucide/lock.svg | 1 + static/icons/src/lucide/map-pin.svg | 1 + static/icons/src/lucide/octagon-x.svg | 1 + static/icons/src/lucide/plus.svg | 1 + static/icons/src/lucide/shopping-cart.svg | 1 + static/icons/src/lucide/square-arrow-out-up-right.svg | 1 + static/icons/src/lucide/star.svg | 1 + static/icons/src/lucide/triangle-alert.svg | 1 + 17 files changed, 17 insertions(+) create mode 100644 static/icons/src/lucide/bell.svg create mode 100644 static/icons/src/lucide/book-open.svg create mode 100644 static/icons/src/lucide/circle-help.svg create mode 100644 static/icons/src/lucide/download.svg create mode 100644 static/icons/src/lucide/git-merge.svg create mode 100644 static/icons/src/lucide/grip-vertical.svg create mode 100644 static/icons/src/lucide/headphones.svg create mode 100644 static/icons/src/lucide/heart.svg create mode 100644 static/icons/src/lucide/info.svg create mode 100644 static/icons/src/lucide/lock.svg create mode 100644 static/icons/src/lucide/map-pin.svg create mode 100644 static/icons/src/lucide/octagon-x.svg create mode 100644 static/icons/src/lucide/plus.svg create mode 100644 static/icons/src/lucide/shopping-cart.svg create mode 100644 static/icons/src/lucide/square-arrow-out-up-right.svg create mode 100644 static/icons/src/lucide/star.svg create mode 100644 static/icons/src/lucide/triangle-alert.svg diff --git a/static/icons/src/lucide/bell.svg b/static/icons/src/lucide/bell.svg new file mode 100644 index 00000000000..8c4ebe63b94 --- /dev/null +++ b/static/icons/src/lucide/bell.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/book-open.svg b/static/icons/src/lucide/book-open.svg new file mode 100644 index 00000000000..cb150d286c4 --- /dev/null +++ b/static/icons/src/lucide/book-open.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/circle-help.svg b/static/icons/src/lucide/circle-help.svg new file mode 100644 index 00000000000..7eb6a60cc72 --- /dev/null +++ b/static/icons/src/lucide/circle-help.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/download.svg b/static/icons/src/lucide/download.svg new file mode 100644 index 00000000000..fb3bf3e7668 --- /dev/null +++ b/static/icons/src/lucide/download.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/git-merge.svg b/static/icons/src/lucide/git-merge.svg new file mode 100644 index 00000000000..d880fdfce61 --- /dev/null +++ b/static/icons/src/lucide/git-merge.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/grip-vertical.svg b/static/icons/src/lucide/grip-vertical.svg new file mode 100644 index 00000000000..3ae3918a7ab --- /dev/null +++ b/static/icons/src/lucide/grip-vertical.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/headphones.svg b/static/icons/src/lucide/headphones.svg new file mode 100644 index 00000000000..1a5ead33d5c --- /dev/null +++ b/static/icons/src/lucide/headphones.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/heart.svg b/static/icons/src/lucide/heart.svg new file mode 100644 index 00000000000..c6993192756 --- /dev/null +++ b/static/icons/src/lucide/heart.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/info.svg b/static/icons/src/lucide/info.svg new file mode 100644 index 00000000000..ba4ac9b4fb6 --- /dev/null +++ b/static/icons/src/lucide/info.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/lock.svg b/static/icons/src/lucide/lock.svg new file mode 100644 index 00000000000..eaba4d523c5 --- /dev/null +++ b/static/icons/src/lucide/lock.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/map-pin.svg b/static/icons/src/lucide/map-pin.svg new file mode 100644 index 00000000000..e06167c2c43 --- /dev/null +++ b/static/icons/src/lucide/map-pin.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/octagon-x.svg b/static/icons/src/lucide/octagon-x.svg new file mode 100644 index 00000000000..34b10158c98 --- /dev/null +++ b/static/icons/src/lucide/octagon-x.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/plus.svg b/static/icons/src/lucide/plus.svg new file mode 100644 index 00000000000..537d4440a05 --- /dev/null +++ b/static/icons/src/lucide/plus.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/shopping-cart.svg b/static/icons/src/lucide/shopping-cart.svg new file mode 100644 index 00000000000..17fe399871a --- /dev/null +++ b/static/icons/src/lucide/shopping-cart.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/square-arrow-out-up-right.svg b/static/icons/src/lucide/square-arrow-out-up-right.svg new file mode 100644 index 00000000000..3ff2ee3cace --- /dev/null +++ b/static/icons/src/lucide/square-arrow-out-up-right.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/star.svg b/static/icons/src/lucide/star.svg new file mode 100644 index 00000000000..cad494c2e90 --- /dev/null +++ b/static/icons/src/lucide/star.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/triangle-alert.svg b/static/icons/src/lucide/triangle-alert.svg new file mode 100644 index 00000000000..f78657a19fd --- /dev/null +++ b/static/icons/src/lucide/triangle-alert.svg @@ -0,0 +1 @@ + From 3f06b3e28e4d14f88d3193a8bb3b85081efdbe6e Mon Sep 17 00:00:00 2001 From: Lokesh Dhakar Date: Mon, 24 Aug 2026 22:56:13 -0700 Subject: [PATCH 2/4] Drop the seven icons with no consumer in this PR lock, octagon-x, and plus targeted CSS rules that turn out to be dead (page-plain message boxes, .addAnother); star belongs to the rating-widget rewrite; bell, download, and shopping-cart belong to the PNG sprite-sheet teardown. Each lands with the PR that wires it up. Claude-Session: https://claude.ai/code/session_01RtTEd3rAHJYz3zKi3zUWwD --- static/icons/src/lucide/bell.svg | 1 - static/icons/src/lucide/download.svg | 1 - static/icons/src/lucide/lock.svg | 1 - static/icons/src/lucide/octagon-x.svg | 1 - static/icons/src/lucide/plus.svg | 1 - static/icons/src/lucide/shopping-cart.svg | 1 - static/icons/src/lucide/star.svg | 1 - 7 files changed, 7 deletions(-) delete mode 100644 static/icons/src/lucide/bell.svg delete mode 100644 static/icons/src/lucide/download.svg delete mode 100644 static/icons/src/lucide/lock.svg delete mode 100644 static/icons/src/lucide/octagon-x.svg delete mode 100644 static/icons/src/lucide/plus.svg delete mode 100644 static/icons/src/lucide/shopping-cart.svg delete mode 100644 static/icons/src/lucide/star.svg diff --git a/static/icons/src/lucide/bell.svg b/static/icons/src/lucide/bell.svg deleted file mode 100644 index 8c4ebe63b94..00000000000 --- a/static/icons/src/lucide/bell.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/static/icons/src/lucide/download.svg b/static/icons/src/lucide/download.svg deleted file mode 100644 index fb3bf3e7668..00000000000 --- a/static/icons/src/lucide/download.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/static/icons/src/lucide/lock.svg b/static/icons/src/lucide/lock.svg deleted file mode 100644 index eaba4d523c5..00000000000 --- a/static/icons/src/lucide/lock.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/static/icons/src/lucide/octagon-x.svg b/static/icons/src/lucide/octagon-x.svg deleted file mode 100644 index 34b10158c98..00000000000 --- a/static/icons/src/lucide/octagon-x.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/static/icons/src/lucide/plus.svg b/static/icons/src/lucide/plus.svg deleted file mode 100644 index 537d4440a05..00000000000 --- a/static/icons/src/lucide/plus.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/static/icons/src/lucide/shopping-cart.svg b/static/icons/src/lucide/shopping-cart.svg deleted file mode 100644 index 17fe399871a..00000000000 --- a/static/icons/src/lucide/shopping-cart.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/static/icons/src/lucide/star.svg b/static/icons/src/lucide/star.svg deleted file mode 100644 index cad494c2e90..00000000000 --- a/static/icons/src/lucide/star.svg +++ /dev/null @@ -1 +0,0 @@ - From 5130646b55cc09fd465b6bbf473a8daf34b2d1b7 Mon Sep 17 00:00:00 2001 From: Lokesh Dhakar Date: Mon, 24 Aug 2026 22:59:52 -0700 Subject: [PATCH 3/4] Delete dead icon CSS the audit's line numbers pointed at page-plain's message/alert/stop/info boxes serve only the DAISY page, which uses none of them; div.verify came from a template that no longer exists; button.addAnother has no consumer anywhere. Claude-Session: https://claude.ai/code/session_01RtTEd3rAHJYz3zKi3zUWwD --- static/css/components/buttonsAndLinks.css | 14 --------- static/css/legacy.css | 21 ------------- static/css/page-plain.css | 38 ----------------------- 3 files changed, 73 deletions(-) diff --git a/static/css/components/buttonsAndLinks.css b/static/css/components/buttonsAndLinks.css index 2983090b2a8..74a669e734a 100644 --- a/static/css/components/buttonsAndLinks.css +++ b/static/css/components/buttonsAndLinks.css @@ -84,17 +84,3 @@ button.plain { button.plain:hover { color: var(--color-success-fg); } -button.addAnother { - width: 32px; - height: 32px; - border: none; - vertical-align: middle; - cursor: pointer; - background-image: url(/static/images/icons/icon_add.png); - background-position: 0 0; - background-color: transparent; - display: none; -} -button.addAnother:hover { - background-position: -32px 0; -} diff --git a/static/css/legacy.css b/static/css/legacy.css index a9c2d51e581..fbfe6689c23 100644 --- a/static/css/legacy.css +++ b/static/css/legacy.css @@ -767,27 +767,6 @@ div#revertNotice { } /* MESSAGING */ -div.alert span, -div.verify span { - margin: 0 auto; - min-height: 25px; - padding: var(--spacing-inset-xs) 0 var(--spacing-inset-xs) 32px; -} - -div.alert, -div.verify { - font: 1.25em var(--font-family-body); -} - -/* openlibrary/templates/account/verify/failed.html */ -div.alert span { - background: url(/static/images/icons/icon_alert.png) no-repeat; -} - -div.verify span { - background: url(/static/images/icons/icon_check.png) no-repeat; -} - /* openlibrary/templates/account/email/forgot-ia.html */ .defaultstyling { font-family: var(--font-family-body); diff --git a/static/css/page-plain.css b/static/css/page-plain.css index 6f6e4e2e46e..ff692594b28 100644 --- a/static/css/page-plain.css +++ b/static/css/page-plain.css @@ -70,26 +70,6 @@ div.nav { font-size: 1.125em; } -div.message { - padding: var(--spacing-inset-lg) var(--spacing-inset-lg) - var(--spacing-inset-lg) 55px; - margin-bottom: 50px; - background: var(--light-yellow) url(/static/images/icons/icon_lock-msg.png) - no-repeat 15px 50%; -} -div.message h2 { - font-weight: normal; - font-size: 18px; - color: var(--black); - margin: 0; - padding: 0; -} -div.message p { - font-size: 0.75em; - padding: 0; - margin: 0; -} - ul.link { margin-bottom: 50px; } @@ -111,24 +91,6 @@ ul.link li { p.help { font-size: var(--font-size-label-large); } -div.alert { - background: var(--light-yellow) url(/static/images/icons/icon_alert-gold.png) - no-repeat 15px 50% !important; - margin-bottom: var(--spacing-stack-sm); - margin-top: 20px; -} -div.stop { - background: var(--light-yellow) url(/static/images/icons/icon_stop.png) - no-repeat 15px 50% !important; - margin-bottom: 45px; - margin-top: 20px; -} -div.info { - background: var(--light-yellow) url(/static/images/icons/icon_info.png) - no-repeat 17px 50% !important; - margin-bottom: 45px; - margin-top: 20px; -} h1 { font-size: 1.5em; margin: 0 0 var(--spacing-stack-md); From b2cee0eb565cffdfe6cddd783fe55ca8ac30fe8f Mon Sep 17 00:00:00 2001 From: Lokesh Dhakar Date: Mon, 24 Aug 2026 23:15:21 -0700 Subject: [PATCH 4/4] Replace every legacy image consumer of the new icon set Flash messages, edit-page alerts, and the not-logged notice render type-mapped sprite icons in markup; merge surfaces (author banners, authors-search prompt, facet head) use git-merge; the author-edit help img, lists CTA heart, covers trash/saved, dropper listen, audiobook button, and team-page links move to macros.icon or ol-icon; external CTAs get a trailing square-arrow-out-up-right glyph. Three sites keep CSS-drawn glyphs as masked pseudo-elements because no template owns their markup: jQuery UI dialog paragraphs, the preview button's book, and the cover-sort drag affordance. The legacy images themselves stay on disk so patch deploys keep working (binary deletions break git apply on the .diff endpoint); a follow-up chore deletes them once this lands. Claude-Session: https://claude.ai/code/session_01RtTEd3rAHJYz3zKi3zUWwD --- openlibrary/macros/LocateButton.html | 4 +- openlibrary/macros/ReadButton.html | 2 +- openlibrary/plugins/openlibrary/js/team.js | 18 ++++---- openlibrary/templates/account/create.html | 1 + .../templates/book_providers/read_button.html | 7 +-- openlibrary/templates/books/edit.html | 4 +- openlibrary/templates/covers/add.html | 1 + openlibrary/templates/covers/manage.html | 2 +- openlibrary/templates/covers/saved.html | 2 +- openlibrary/templates/lib/not_logged.html | 1 + openlibrary/templates/lists/home.html | 1 + openlibrary/templates/login.html | 2 + openlibrary/templates/search/authors.html | 2 +- .../templates/search/work_search_facets.html | 11 ++--- openlibrary/templates/site/body.html | 3 +- openlibrary/templates/type/author/edit.html | 2 +- openlibrary/templates/type/author/view.html | 6 +-- static/css/base/headings.css | 8 ++-- static/css/components/buttonCta.css | 19 +++----- static/css/components/flash-messages.css | 13 ++---- static/css/components/generic-dropper.css | 17 -------- static/css/components/lists-page-cta.css | 21 ++++++--- static/css/components/read-panel.css | 10 ++++- static/css/components/search-result-item.css | 10 ++++- static/css/components/team.css | 6 +-- static/css/components/ui-dialog.css | 23 +++++++++- static/css/legacy.css | 43 ++++++------------- static/css/page-form.css | 41 ++++++++++++++---- 28 files changed, 152 insertions(+), 128 deletions(-) diff --git a/openlibrary/macros/LocateButton.html b/openlibrary/macros/LocateButton.html index 7c98ea84fd6..dda89b8cbac 100644 --- a/openlibrary/macros/LocateButton.html +++ b/openlibrary/macros/LocateButton.html @@ -6,9 +6,9 @@ - + $:macros.icon("map-pin", size="sm", extra_class="btn-icon") $_("Locate") $else: $_('Locate') + data-ol-link-track="CTAClick|Locate">$_('Locate')$:macros.icon("square-arrow-out-up-right", size="sm", extra_class="cta-btn__external-icon") diff --git a/openlibrary/macros/ReadButton.html b/openlibrary/macros/ReadButton.html index 86d40379438..ab57e2d688c 100644 --- a/openlibrary/macros/ReadButton.html +++ b/openlibrary/macros/ReadButton.html @@ -41,7 +41,7 @@ title="$title using Read Aloud" $:analytics_attr(action.capitalize() + 'Listen') class="cta-btn cta-btn--available cta-btn--w-icon"> - + $:macros.icon("headphones", size="sm", extra_class="btn-icon") $_("Listen") diff --git a/openlibrary/plugins/openlibrary/js/team.js b/openlibrary/plugins/openlibrary/js/team.js index ba1084a76df..510079e066d 100644 --- a/openlibrary/plugins/openlibrary/js/team.js +++ b/openlibrary/plugins/openlibrary/js/team.js @@ -5,8 +5,6 @@ export function initTeamFilter() { // Photos const default_profile_image = '../../../static/images/openlibrary-180x180.png'; - const bookUrlIcon = '../../../static/images/icons/icon_book-lg.png'; - const personalUrlIcon = '../../../static/images/globe-solid.svg'; const initialSearchParams = new URL(window.location.href).searchParams; const initialRole = initialSearchParams.get('role') || 'All'; const initialDepartment = initialSearchParams.get('department') || 'All'; @@ -137,25 +135,25 @@ export function initTeamFilter() { descriptionLinks.classList = 'description__links'; if (member.personal_url) { const memberPersonalA = document.createElement('a'); - const memberPersonalImg = document.createElement('img'); + const memberPersonalIcon = document.createElement('ol-icon'); memberPersonalA.href = `${member.personal_url}`; - memberPersonalImg.src = personalUrlIcon; - memberPersonalImg.classList = 'links__site'; + memberPersonalIcon.setAttribute('name', 'globe'); + memberPersonalIcon.classList = 'links__site'; - memberPersonalA.append(memberPersonalImg); + memberPersonalA.append(memberPersonalIcon); descriptionLinks.append(memberPersonalA); } if (member.favorite_book_url) { const memberBookA = document.createElement('a'); - const memberBookImg = document.createElement('img'); + const memberBookIcon = document.createElement('ol-icon'); memberBookA.href = `${member.favorite_book_url}`; - memberBookImg.src = bookUrlIcon; - memberBookImg.classList = 'links__book'; + memberBookIcon.setAttribute('name', 'book-open'); + memberBookIcon.classList = 'links__book'; - memberBookA.append(memberBookImg); + memberBookA.append(memberBookIcon); descriptionLinks.append(memberBookA); } diff --git a/openlibrary/templates/account/create.html b/openlibrary/templates/account/create.html index b81aee5012e..cb1e590fd21 100644 --- a/openlibrary/templates/account/create.html +++ b/openlibrary/templates/account/create.html @@ -66,6 +66,7 @@

$_("Sign Up")

diff --git a/openlibrary/templates/book_providers/read_button.html b/openlibrary/templates/book_providers/read_button.html index 1d154184f80..8edad84c83f 100644 --- a/openlibrary/templates/book_providers/read_button.html +++ b/openlibrary/templates/book_providers/read_button.html @@ -13,8 +13,9 @@ target="_blank" rel="noopener noreferrer" $:analytics_attr('Listen') > - + $:macros.icon("headphones", size="sm", extra_class="btn-icon") $_("Audiobook") + $:macros.icon("square-arrow-out-up-right", size="sm", extra_class="cta-btn__external-icon") $else: $_('Read') + >$_('Read')$:macros.icon("square-arrow-out-up-right", size="sm", extra_class="cta-btn__external-icon")
$elif acquisition.access == 'sample':
@@ -31,5 +32,5 @@ data-ol-link-track="CTAClick|Preview" target="_blank" rel="noopener noreferrer" $:analytics_attr('Preview') - >$_('Preview') + >$_('Preview')$:macros.icon("square-arrow-out-up-right", size="sm", extra_class="cta-btn__external-icon")
diff --git a/openlibrary/templates/books/edit.html b/openlibrary/templates/books/edit.html index 757984250a6..7887c8bece6 100644 --- a/openlibrary/templates/books/edit.html +++ b/openlibrary/templates/books/edit.html @@ -51,7 +51,7 @@

$:title

$if not ctx.user: $:render_template("lib/not_logged") $if alert_message: -

$:alert_message

+

$:macros.icon("circle-check" if alert_class == "thanks" else "info", size="sm")$:alert_message

@@ -102,7 +102,7 @@

diff --git a/openlibrary/templates/covers/add.html b/openlibrary/templates/covers/add.html index fb60091105b..d1c878af339 100644 --- a/openlibrary/templates/covers/add.html +++ b/openlibrary/templates/covers/add.html @@ -14,6 +14,7 @@ $ guideline = _("Cover Guidelines")
+$:macros.icon("triangle-alert", size="sm") $if status: $if status.code == 1: $_("Please provide a valid image.") $elif status.code == 2: $_("Please provide an image URL.") diff --git a/openlibrary/templates/covers/manage.html b/openlibrary/templates/covers/manage.html index cd9fd8e73b1..43b349932dd 100644 --- a/openlibrary/templates/covers/manage.html +++ b/openlibrary/templates/covers/manage.html @@ -37,7 +37,7 @@
-
+
$:macros.icon("trash", size="lg")
diff --git a/openlibrary/templates/covers/saved.html b/openlibrary/templates/covers/saved.html index 85d3ed7cee5..c08982a07d3 100644 --- a/openlibrary/templates/covers/saved.html +++ b/openlibrary/templates/covers/saved.html @@ -10,7 +10,7 @@
-
$_("Saved!")
+
$:macros.icon("circle-check", extra_class="saved__icon")$_("Saved!")
$if showinfo: $_("Notes:")
diff --git a/openlibrary/templates/lib/not_logged.html b/openlibrary/templates/lib/not_logged.html index a2708efc2c3..b1ddefe6407 100644 --- a/openlibrary/templates/lib/not_logged.html +++ b/openlibrary/templates/lib/not_logged.html @@ -1,3 +1,4 @@
+ $:macros.icon("info", extra_class="noLogin__icon")

$:_('You are not logged in. Open Library will record your IP address and include it in this page\'s publicly accessible edit history. If you create an account, your IP address is concealed and you can more easily keep track of all your edits and additions.')

diff --git a/openlibrary/templates/lists/home.html b/openlibrary/templates/lists/home.html index 19c8686c52c..9aed1e2fc5b 100644 --- a/openlibrary/templates/lists/home.html +++ b/openlibrary/templates/lists/home.html @@ -9,6 +9,7 @@

$_('Lists')

+ $:macros.icon("heart", extra_class="lists-page-cta__icon")

$_('Create a list of any Subjects, Authors, Works or specific Editions.')

$:_('Once you\'ve made a list, you can watch for updates or export all the editions in a list as HTML, BibTeX or JSON. See all your lists and any activity using the "Lists" link on your Account page.') $_('Enjoy!') diff --git a/openlibrary/templates/login.html b/openlibrary/templates/login.html index a3ec09ca6a5..656e3701a94 100644 --- a/openlibrary/templates/login.html +++ b/openlibrary/templates/login.html @@ -12,6 +12,7 @@

-
$_("Identifiers") $_('Author Identifiers Purpose')
+
$_("Identifiers") $:macros.icon("circle-help", size="sm", label=_('Author Identifiers Purpose'))
diff --git a/openlibrary/templates/type/author/view.html b/openlibrary/templates/type/author/view.html index dcce7676d91..a13109c612a 100644 --- a/openlibrary/templates/type/author/view.html +++ b/openlibrary/templates/type/author/view.html @@ -75,7 +75,7 @@

diff --git a/static/css/base/headings.css b/static/css/base/headings.css index fc22dd705a3..a1929792026 100644 --- a/static/css/base/headings.css +++ b/static/css/base/headings.css @@ -107,10 +107,10 @@ h4.facetHead span.merge { font-size: var(--font-size-label-small); font-weight: normal !important; text-transform: none !important; - /* Not tokenized: must exceed the 16px icon width to avoid text overlap */ - padding-left: 22px; - background: url(/static/images/icons/icon_merge-sm.png) no-repeat 0 0; - min-height: 16px; +} + +h4.facetHead span.merge .ol-icon { + margin-right: var(--spacing-inline-xs); } h5 { diff --git a/static/css/components/buttonCta.css b/static/css/components/buttonCta.css index 5d2efd9234c..aae6d966865 100644 --- a/static/css/components/buttonCta.css +++ b/static/css/components/buttonCta.css @@ -33,16 +33,6 @@ a.cta-btn .btn-icon { flex-shrink: 0; } -/* stylelint-disable selector-max-specificity */ -.cta-btn .btn-icon.read-aloud, -a.cta-btn .btn-icon.read-aloud { - background-image: url(/static/images/icons/read%20aloud.svg); - background-repeat: no-repeat; - background-size: contain; - background-position: center; -} -/* stylelint-enable selector-max-specificity */ - .cta-btn .btn-label, a.cta-btn .btn-label { padding: var(--spacing-inset-sm); @@ -93,13 +83,14 @@ a.cta-btn--primary:disabled { .cta-btn--external, a.cta-btn--external { - background-image: url(/static/images/icons/octicon-link-external-24.svg); - background-repeat: no-repeat; - background-size: 20px; - background-position: center right 8px; justify-content: center; } +.cta-btn--external .cta-btn__external-icon, +a.cta-btn--external .cta-btn__external-icon { + margin-left: var(--spacing-inline-xs); +} + .cta-btn--unavailable, a.cta-btn--unavailable { background-color: var(--color-primary); diff --git a/static/css/components/flash-messages.css b/static/css/components/flash-messages.css index 16f11cf0de3..fb5930c7a3e 100644 --- a/static/css/components/flash-messages.css +++ b/static/css/components/flash-messages.css @@ -10,15 +10,10 @@ } .flash-messages span { - display: block; + display: flex; + align-items: center; + gap: var(--spacing-inline-sm); background-color: var(--light-yellow); - background-position: 10px 50%; - background-repeat: no-repeat; - padding: var(--spacing-inset-md) 52px; + padding: var(--spacing-inset-md); text-align: left; - background-image: url(/static/images/icons/icon_check.png); -} - -.flash-messages .error span { - background-image: url(/static/images/icons/icon_alert.png); } diff --git a/static/css/components/generic-dropper.css b/static/css/components/generic-dropper.css index a42859da35d..5caf4455af5 100644 --- a/static/css/components/generic-dropper.css +++ b/static/css/components/generic-dropper.css @@ -195,24 +195,7 @@ .dropper-menu .btn-icon { display: inline-block; - filter: invert(1); margin-right: var(--spacing-inline-sm); width: 1.25em; height: 1.25em; } - -/* icons */ -.dropper-menu .listen { - background-image: url(/static/images/icons/icon_listen.png); -} - -.dropper-menu .map { - background-image: url(/static/images/icons/icon_map.png); -} - -.dropper-menu .listen, -.dropper-menu .map { - background-repeat: no-repeat; - background-size: contain; - background-position: center; -} diff --git a/static/css/components/lists-page-cta.css b/static/css/components/lists-page-cta.css index d65d6557bd8..e6a0f5d0923 100644 --- a/static/css/components/lists-page-cta.css +++ b/static/css/components/lists-page-cta.css @@ -1,8 +1,13 @@ .lists-page-cta { - background-repeat: no-repeat; - background-image: url(/static/images/icons/icon_fav-big.png); - padding-top: 70px; - background-position: center 0; + position: relative; +} + +.lists-page-cta .lists-page-cta__icon { + display: block; + width: 52px; + height: 52px; + margin: 0 auto var(--spacing-stack-sm); + color: var(--red); } .lists-page-cta h2 { font-size: 1.5em; @@ -18,8 +23,14 @@ /* @width-breakpoint-desktop */ @media all and (min-width: 960px) { .lists-page-cta { - background-position: 35px 35px; padding-left: 130px; padding-right: 60px; } + + .lists-page-cta .lists-page-cta__icon { + position: absolute; + top: 35px; + left: 35px; + margin: 0; + } } diff --git a/static/css/components/read-panel.css b/static/css/components/read-panel.css index 92e80d9737d..fde6302bc9c 100644 --- a/static/css/components/read-panel.css +++ b/static/css/components/read-panel.css @@ -68,8 +68,14 @@ /* Setting pseudo-element content to book icon; mask is used to allow for a 'fill' color */ content: ""; - -webkit-mask: url(/static/images/icons/open-book.svg); - mask: url(/static/images/icons/open-book.svg); + -webkit-mask: url( + data:image/svg + xml, + %3Csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"%3E%3Cpathd="M12 5v16"/%3E%3Cpathd="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"/%3E%3C/svg%3E + ); + mask: url( + data:image/svg + xml, + %3Csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"%3E%3Cpathd="M12 5v16"/%3E%3Cpathd="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"/%3E%3C/svg%3E + ); -webkit-mask-size: cover; mask-size: cover; background-color: var(--color-primary); diff --git a/static/css/components/search-result-item.css b/static/css/components/search-result-item.css index 3c3388be5d5..e2cbbee6d8d 100644 --- a/static/css/components/search-result-item.css +++ b/static/css/components/search-result-item.css @@ -35,8 +35,14 @@ /* Setting pseudo-element content to book icon; mask is used to allow for a 'fill' color */ content: ""; - -webkit-mask: url(/static/images/icons/open-book.svg); - mask: url(/static/images/icons/open-book.svg); + -webkit-mask: url( + data:image/svg + xml, + %3Csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"%3E%3Cpathd="M12 5v16"/%3E%3Cpathd="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"/%3E%3C/svg%3E + ); + mask: url( + data:image/svg + xml, + %3Csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"%3E%3Cpathd="M12 5v16"/%3E%3Cpathd="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"/%3E%3C/svg%3E + ); -webkit-mask-size: cover; mask-size: cover; background-color: var(--color-primary); diff --git a/static/css/components/team.css b/static/css/components/team.css index 937e9339015..187aff5be5f 100644 --- a/static/css/components/team.css +++ b/static/css/components/team.css @@ -130,9 +130,7 @@ } .links__site, .links__book { + width: 35px; height: 35px; -} -.links__site { - filter: invert(32%) sepia(89%) saturate(5319%) hue-rotate(186deg) - brightness(96%) contrast(97%); + color: var(--color-primary); } diff --git a/static/css/components/ui-dialog.css b/static/css/components/ui-dialog.css index 61a170aff3b..fe0b65ac925 100644 --- a/static/css/components/ui-dialog.css +++ b/static/css/components/ui-dialog.css @@ -36,8 +36,29 @@ .ui-dialog .ui-dialog-content p { min-height: 28px; padding: 6px 33px 0; - background: url(/static/images/icons/icon_alert.png) no-repeat 0 0; margin: 0; + position: relative; +} +/* jQuery UI generates this markup, so the alert glyph has no template to + live in; a masked pseudo-element stands in for $:macros.icon(). */ +.ui-dialog .ui-dialog-content p::before { + content: ""; + position: absolute; + top: 4px; + left: 2px; + width: 24px; + height: 24px; + background-color: var(--color-text); + -webkit-mask: url( + data:image/svg + xml, + %3Csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"%3E%3Cpathd="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/%3E%3Cpathd="M12 9v4"/%3E%3Cpathd="M12 17h.01"/%3E%3C/svg%3E + ) + no-repeat center / contain; + mask: url( + data:image/svg + xml, + %3Csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"%3E%3Cpathd="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/%3E%3Cpathd="M12 9v4"/%3E%3Cpathd="M12 17h.01"/%3E%3C/svg%3E + ) + no-repeat center / contain; } .ui-dialog .ui-dialog-buttonpane { text-align: center; diff --git a/static/css/legacy.css b/static/css/legacy.css index fbfe6689c23..2dea3adc596 100644 --- a/static/css/legacy.css +++ b/static/css/legacy.css @@ -396,18 +396,12 @@ p.alert { font-size: 0.875em; color: var(--brown); background-color: var(--light-yellow); - background-position: 10px 50%; - background-repeat: no-repeat; margin: var(--spacing-stack-sm) auto 0; - padding: var(--spacing-inset-md) 52px; -} - -p.info { - background-image: url(/static/images/icons/icon_info.png); + padding: var(--spacing-inset-md); } -p.thanks { - background-image: url(/static/images/icons/icon_check.png); +p.alert .ol-icon { + margin-right: var(--spacing-inline-xs); } input[type="text"], @@ -536,37 +530,26 @@ div.note { /* openlibrary/templates/lib/not_logged.html */ div#noLogin { margin-top: var(--spacing-stack-sm); - background: var(--light-yellow) url(/static/images/icons/icon_info.png) - no-repeat 10px 50%; - padding: var(--spacing-inset-sm) var(--spacing-inset-sm) - var(--spacing-inset-sm) 44px; + display: flex; + align-items: center; + gap: var(--spacing-inline-sm); + background: var(--light-yellow); + padding: var(--spacing-inset-sm); } /* openlibrary/templates/type/author/view.html */ div#preMerge { - min-height: 32px; - padding: var(--spacing-inset-sm) var(--spacing-inset-sm) - var(--spacing-inset-sm) 52px; - background: transparent url(/static/images/icons/icon_merge.png) no-repeat - 10px 10px; + padding: var(--spacing-inset-sm); } /* openlibrary/templates/type/author/view.html */ div#postMerge { - min-height: 32px; - padding: var(--spacing-inset-sm) var(--spacing-inset-sm) - var(--spacing-inset-sm) 52px; - background: transparent url(/static/images/icons/icon_check.png) no-repeat - 10px 10px; + padding: var(--spacing-inset-sm); } /* openlibrary/templates/type/author/view.html */ div#errorMerge { - min-height: 32px; - padding: var(--spacing-inset-sm) var(--spacing-inset-sm) - var(--spacing-inset-sm) 52px; - background: transparent url(/static/images/icons/icon_alert.png) no-repeat - 10px 10px; + padding: var(--spacing-inset-sm); } /* FORMS */ @@ -1534,7 +1517,6 @@ div.popAlert { width: 550px; padding: var(--spacing-inset-sm) var(--spacing-inset-md); margin-bottom: var(--spacing-stack-md); - background: url(/static/images/icons/icon_alert.png) no-repeat; font-size: 1.25em; color: var(--red); text-align: center; @@ -1598,9 +1580,8 @@ div.popAlert { /* openlibrary/templates/search/authors.html */ div.mergeThis { display: inline; - padding: var(--spacing-inset-md) 0 0 45px; + padding: var(--spacing-inset-md) 0 0; margin-left: 15px; - background: url(/static/images/icons/icon_merge.png) no-repeat 0 0; } /* openlibrary/templates/recentchanges/default/view.html */ diff --git a/static/css/page-form.css b/static/css/page-form.css index ba38b198f90..fc530b31c37 100644 --- a/static/css/page-form.css +++ b/static/css/page-form.css @@ -35,8 +35,28 @@ div#revertLink, .column { min-height: 90px; margin: 10px; - background-image: url(/static/images/back_sortable.png); - background-repeat: no-repeat; + position: relative; +} +/* Portlets are injected over this area, so the drag affordance has no + markup of its own; a masked pseudo-element stands in for the sprite. */ +.column::before { + content: ""; + position: absolute; + top: 10px; + left: 10px; + width: 24px; + height: 24px; + background-color: var(--color-text-secondary); + -webkit-mask: url( + data:image/svg + xml, + %3Csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"%3E%3Ccirclecx="9"cy="12"r="1"/%3E%3Ccirclecx="9"cy="5"r="1"/%3E%3Ccirclecx="9"cy="19"r="1"/%3E%3Ccirclecx="15"cy="12"r="1"/%3E%3Ccirclecx="15"cy="5"r="1"/%3E%3Ccirclecx="15"cy="19"r="1"/%3E%3C/svg%3E + ) + no-repeat center / contain; + mask: url( + data:image/svg + xml, + %3Csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"%3E%3Ccirclecx="9"cy="12"r="1"/%3E%3Ccirclecx="9"cy="5"r="1"/%3E%3Ccirclecx="9"cy="19"r="1"/%3E%3Ccirclecx="15"cy="12"r="1"/%3E%3Ccirclecx="15"cy="5"r="1"/%3E%3Ccirclecx="15"cy="19"r="1"/%3E%3C/svg%3E + ) + no-repeat center / contain; } .trashCan { position: absolute; @@ -44,9 +64,10 @@ div#revertLink, right: 32px; width: 32px; height: 42px; - background-image: url(/static/images/back_sort-trash.png); - background-repeat: no-repeat; - background-position: 0 0; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-text-secondary); cursor: pointer; } .trashPosition { @@ -54,7 +75,7 @@ div#revertLink, height: 90px; } .trashPosition:hover .trashCan { - background-position: -32px 0; + color: var(--red); } .trash { height: 90px; @@ -100,14 +121,18 @@ div#revertLink, text-decoration: none; } .saved { - background: url(/static/images/icons/icon_saved.png) no-repeat; + display: flex; + align-items: center; + gap: var(--spacing-inline-sm); font-size: 1.5em; font-weight: 700; color: var(--black); - padding: var(--spacing-inset-xs) 0 0 40px; min-height: 30px; margin: var(--spacing-stack-lg) 0 var(--spacing-stack-md); } +.saved .saved__icon { + color: var(--color-success-fg); +} .saved-image-container { display: flex; }