Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vivre: move link pseudo states to theme.json #6150

Merged
merged 5 commits into from
Jul 12, 2022
Merged

Vivre: move link pseudo states to theme.json #6150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b5b1e15
add link hover and active states to theme.json
madhusudhand Jun 30, 2022
f351982
update navigation and post link state styles in theme.json
madhusudhand Jun 30, 2022
be0f08a
fix text decoration issues
madhusudhand Jul 7, 2022
2b787d7
Invert the default link styles+hover state to match the design.
jffng Jul 11, 2022
e54f764
Remove unneeded comments.
jffng Jul 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 10 additions & 37 deletions curator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ body {
background: var(--wp--preset--color--foreground);
border-color: var(--wp--preset--color--foreground);
color: var(--wp--preset--color--background);
text-decoration: none;
}
.wp-block-button__link.wp-block-button__link:active {
color: var(--wp--preset--color--primary);
Expand Down Expand Up @@ -84,20 +85,12 @@ body {
text-decoration: underline;
}

/*
* Search and File Block button styles.
* Necessary until the following issues are resolved in Gutenberg:
* https://github.com/WordPress/gutenberg/issues/36444
* https://github.com/WordPress/gutenberg/issues/27760
*/



/*
* Search input styles
* Needed until this is resolved in Gutenberg:
* https://github.com/WordPress/gutenberg/issues/34198
*/

.wp-block-search__input {
border-color: var(--wp--preset--color--foreground);
}
Expand All @@ -106,19 +99,17 @@ body {
* Link Styles
*/

.wp-block-site-title a {
padding: .4rem 0;
text-decoration: inherit; /* Needed so the link styles will be inherited correctly from theme.json */
text-underline-offset: .1rem;
}

a:not(
.wp-block-search__button,
.wp-block-button__link
):hover,
) {
text-underline-offset: .1rem;
}

.wp-block-site-title a:hover {
text-decoration: underline;
.wp-block-site-title a {
padding: .4rem 0;
text-decoration: inherit; /* Needed so the link styles will be inherited correctly from theme.json */
text-underline-offset: .1rem;
}

a:not(
Expand All @@ -129,11 +120,6 @@ a:not(
text-decoration-style: dotted;
}

.wp-block-site-title a:active {
text-decoration: none;
background-color: var(--wp--preset--color--tertiary);
}

/*
* Navigation and Other Link Styles
*/
Expand All @@ -144,11 +130,6 @@ a:not(

:is(
.wp-block-pages-list__item .wp-block-pages-list__item__link,
.wp-block-navigation-link__content,
.wp-block-navigation-item__content,
.wp-block-site-title a,
.wp-block-post-navigation-link a,
.wp-block-post-terms a
):hover {
text-decoration: underline;
}
Expand All @@ -166,20 +147,12 @@ a:not(
}

:is(
.wp-block-pages-list__item .wp-block-pages-list__item__link,
.wp-block-navigation-link__content,
.wp-block-navigation-item__content,
.wp-block-site-title a,
.wp-block-post-navigation-link a,
.wp-block-post-terms a
.wp-block-pages-list__item .wp-block-pages-list__item__link
):active {
text-decoration: underline;
}

.wp-block-post-title a:hover {
color: var(--wp--preset--color--primary);
text-decoration-line: underline;
text-decoration-thickness: 0.25rem;
text-underline-offset: 0.25rem;
}

Expand Down
104 changes: 103 additions & 1 deletion curator/theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,25 @@
"core/navigation": {
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)"
},
"elements": {
"link": {
":hover": {
"typography": {
"textDecoration": "underline"
}
},
":focus": {
"typography": {
"textDecoration": "underline"
}
},
":active": {
"typography": {
"textDecoration": "underline"
}
}
}
}
},
"core/post-terms": {
Expand All @@ -262,6 +281,21 @@
"fontWeight":"700",
"lineHeight": "0.8",
"letterSpacing": "-0.03em"
},
":hover": {
"typography": {
"textDecoration": "underline"
}
},
":focus": {
"typography": {
"textDecoration": "underline"
}
},
":active": {
"typography": {
"textDecoration": "underline"
}
}
}
}
Expand Down Expand Up @@ -311,8 +345,40 @@
"color": {
"text": "var(--wp--preset--color--foreground)"
},
"typography": {
"textDecoration": "none 0.25rem"
},
":hover": {
"color": {
"text": "var(--wp--preset--color--primary)"
},
"typography": {
"textDecoration": "underline 0.25rem"
}
}
}
}
},
"core/post-navigation-link": {
"elements": {
"link": {
"typography": {
"textDecoration": "none"
},
":hover": {
"typography": {
"textDecoration": "underline"
}
},
":focus": {
"typography": {
"textDecoration": "underline"
}
},
":active": {
"typography": {
"textDecoration": "underline"
}
}
}
}
Expand All @@ -330,6 +396,11 @@
},
"color": {
"text": "var(--wp--preset--color--foreground)"
},
":hover": {
"typography": {
"textDecoration": "underline"
}
}
}
}
Expand Down Expand Up @@ -443,6 +514,19 @@
"link":{
"typography":{
"textDecoration": "none"
},
":hover": {
"typography": {
"textDecoration": "underline"
}
},
":active": {
"color": {
"background": "var(--wp--preset--color--tertiary)"
},
"typography": {
"textDecoration": "underline"
}
}
}
}
Expand Down Expand Up @@ -554,7 +638,25 @@
"text": "var(--wp--preset--color--primary)"
},
"typography": {
"textDecoration": "none"
"textDecoration": "underline"
},
":hover": {
"typography": {
"textDecoration": "none"
}
},
":active": {
"color": {
"background": "var(--wp--preset--color--tertiary)"
},
"typography": {
"textDecoration": "none"
}
},
":focus": {
"typography": {
"textDecoration": "underline"
}
}
}
},
Expand Down