diff --git a/src/component/bookmark/index.css b/src/component/bookmark/index.css index 39dffb29..de45c4bc 100644 --- a/src/component/bookmark/index.css +++ b/src/component/bookmark/index.css @@ -2,7 +2,7 @@ --bookmark-color: var(--theme-primary-020); --bookmark-color-focus-hover: var(--theme-primary-030); --bookmark-display-visual-color: var(--theme-accent); - --bookmark-display-visual-color-focus-hover: var(--theme-accent-text); + --bookmark-display-visual-color-focus-hover: var(--theme-primary-text-030); --bookmark-display-name-color: var(--theme-primary-text-020); --bookmark-display-name-color-focus-hover: var(--theme-primary-text-030); } @@ -557,7 +557,7 @@ .bookmark:focus .bookmark-display-visual, .bookmark:hover .bookmark-display-visual, .bookmark:focus-within .bookmark-display-visual { - color: rgb(var(--bookmark-display-visual-color-focus-hover)); + color: hsl(var(--bookmark-display-visual-color-focus-hover)); } .bookmark-display-visual-letter { diff --git a/src/component/bookmarkTile/index.js b/src/component/bookmarkTile/index.js index 680c6a6f..458dd7e2 100644 --- a/src/component/bookmarkTile/index.js +++ b/src/component/bookmarkTile/index.js @@ -329,8 +329,6 @@ const BookmarkTile = function({ this.element.bookmark.style.setProperty('--bookmark-display-visual-color', 'var(--theme-accent)'); - this.element.bookmark.style.setProperty('--bookmark-display-visual-color-focus-hover', 'var(--theme-accent-text)'); - }; if (bookmarkData.link.display.visual.shadow.size > 0) { @@ -395,6 +393,8 @@ const BookmarkTile = function({ this.element.bookmark.style.setProperty('--bookmark-color-focus-hover', 'var(--theme-color)'); + this.element.bookmark.style.setProperty('--bookmark-display-visual-color-focus-hover', 'var(--theme-color-text)'); + this.element.bookmark.style.setProperty('--bookmark-display-name-color', 'var(--theme-color-text)'); this.element.bookmark.style.setProperty('--bookmark-display-name-color-focus-hover', 'var(--theme-color-text)');