From 3dd3e17fd14975c3ba2b520d47be17cd46308ada Mon Sep 17 00:00:00 2001 From: Justin Tadlock Date: Sat, 1 Jun 2024 21:46:29 -0500 Subject: [PATCH] Move Fill Post Terms style to `theme.json`. Continued work on https://github.com/x3p0-dev/x3p0-ideas/issues/8 --- public/css/blocks/core/post-terms.asset.php | 2 +- public/css/blocks/core/post-terms.css | 2 +- resources/scss/blocks/core/post-terms.scss | 23 -------- styles/chestnut-rose.json | 31 +++++++--- styles/extant.json | 28 ++++++--- styles/thunderbird.json | 27 ++++++--- styles/unravel.json | 33 ++++++++--- theme.json | 64 ++++++++++++++++----- 8 files changed, 139 insertions(+), 71 deletions(-) diff --git a/public/css/blocks/core/post-terms.asset.php b/public/css/blocks/core/post-terms.asset.php index 0690fa0f..216a3cd1 100644 --- a/public/css/blocks/core/post-terms.asset.php +++ b/public/css/blocks/core/post-terms.asset.php @@ -1 +1 @@ - array(), 'version' => 'd6f3c391418e78d753c6'); + array(), 'version' => 'b03f3fcfeba45f0443b1'); diff --git a/public/css/blocks/core/post-terms.css b/public/css/blocks/core/post-terms.css index eb24104d..09c2fa2b 100644 --- a/public/css/blocks/core/post-terms.css +++ b/public/css/blocks/core/post-terms.css @@ -1 +1 @@ -.wp-block-post-terms{align-items:center;display:flex;flex-wrap:wrap;gap:var(--wp--custom--gap,var(--wp--preset--spacing--minus-3))}.wp-block-post-terms__separator{margin-left:calc(var(--wp--custom--gap, var(--wp--preset--spacing--minus-3))*-1)}.wp-block-post-terms.is-style-fill{--wp--custom--gap:var(--wp--preset--spacing--minus-1);font-family:var(--wp--custom--fill--font-family,inherit);font-size:var(--wp--custom--fill--font-size,inherit);font-style:var(--wp--custom--fill--font-style,inherit);font-weight:var(--wp--custom--fill--font-weight,inherit)}.wp-block-post-terms.is-style-fill .wp-block-post-terms__separator{display:none}.wp-block-post-terms.is-style-fill a{background:var(--wp--custom--fill--background,transparent);border-color:var(--wp--custom--fill--border-color,currentColor);border-radius:var(--wp--custom--fill--border-radius,0);border-style:var(--wp--custom--fill--border-style,solid);border-width:var(--wp--custom--fill--border-width,0);box-shadow:var(--wp--custom--fill--shadow,none);color:var(--wp--custom--fill--color,inherit)!important;display:inline-block;padding:var(--wp--preset--spacing--minus-2) var(--wp--preset--spacing--base);text-decoration:none}.wp-block-post-terms.is-style-fill a:focus,.wp-block-post-terms.is-style-fill a:hover{background:var(--wp--custom--fill--hover-background,transparent);color:var(--wp--custom--fill--hover-color,inherit)!important;text-decoration:underline}.wp-block-post-terms.is-style-icon:before{background:currentColor;content:"";display:inline-block;height:1em;-webkit-mask:no-repeat 50% 50% url("data:image/svg+xml;charset=utf-8,");mask:no-repeat 50% 50% url("data:image/svg+xml;charset=utf-8,");-webkit-mask-size:cover;mask-size:cover;width:1em}.wp-block-post-terms.is-style-icon.taxonomy-post_tag:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,");mask-image:url("data:image/svg+xml;charset=utf-8,")} +.wp-block-post-terms{align-items:center;display:flex;flex-wrap:wrap;gap:var(--wp--custom--gap,var(--wp--preset--spacing--minus-3))}.wp-block-post-terms__separator{margin-left:calc(var(--wp--custom--gap, var(--wp--preset--spacing--minus-3))*-1)}.wp-block-post-terms.is-style-fill{--wp--custom--gap:var(--wp--preset--spacing--minus-1)}.wp-block-post-terms.is-style-fill .wp-block-post-terms__separator{display:none}.wp-block-post-terms.is-style-fill a{display:inline-block}.wp-block-post-terms.is-style-icon:before{background:currentColor;content:"";display:inline-block;height:1em;-webkit-mask:no-repeat 50% 50% url("data:image/svg+xml;charset=utf-8,");mask:no-repeat 50% 50% url("data:image/svg+xml;charset=utf-8,");-webkit-mask-size:cover;mask-size:cover;width:1em}.wp-block-post-terms.is-style-icon.taxonomy-post_tag:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,");mask-image:url("data:image/svg+xml;charset=utf-8,")} diff --git a/resources/scss/blocks/core/post-terms.scss b/resources/scss/blocks/core/post-terms.scss index 753eff6b..d636a8d3 100644 --- a/resources/scss/blocks/core/post-terms.scss +++ b/resources/scss/blocks/core/post-terms.scss @@ -48,33 +48,10 @@ .wp-block-post-terms.is-style-fill { --wp--custom--gap: var(--wp--preset--spacing--minus-1); - font-family: var(--wp--custom--fill--font-family, inherit); - font-size: var(--wp--custom--fill--font-size, inherit); - font-style: var(--wp--custom--fill--font-style, inherit); - font-weight: var(--wp--custom--fill--font-weight, inherit); - .wp-block-post-terms__separator { display: none; } a { display: inline-block; - text-decoration: none; - padding: var( --wp--preset--spacing--minus-2 ) var( --wp--preset--spacing--base ); - - color: var(--wp--custom--fill--color, inherit) !important; - background: var(--wp--custom--fill--background, transparent); - border-width: var(--wp--custom--fill--border-width, 0); - border-style: var(--wp--custom--fill--border-style, solid); - border-color: var(--wp--custom--fill--border-color, currentColor); - border-radius: var(--wp--custom--fill--border-radius, 0); - box-shadow: var(--wp--custom--fill--shadow, none); - - &:hover, - &:focus { - text-decoration: underline; - - color: var(--wp--custom--fill--hover-color, inherit) !important; - background: var(--wp--custom--fill--hover-background, transparent); - } } } diff --git a/styles/chestnut-rose.json b/styles/chestnut-rose.json index 9390bd8f..7870e4cd 100644 --- a/styles/chestnut-rose.json +++ b/styles/chestnut-rose.json @@ -28,14 +28,6 @@ "lineHeight": "var:preset|line-height|xs" } } - }, - "core/post-terms": { - "custom": { - "fill": { - "fontWeight": "300", - "hoverBackground": "var:preset|color|primary-500" - } - } } }, "color": { @@ -337,6 +329,29 @@ }, "css": "& .wp-block-navigation-item:hover, .wp-block-navigation-item:focus {\n\tcolor: var(--wp--preset--color--700);\n\tbackground: var(--wp--preset--color--neutral-100);\n}" }, + "core/post-terms": { + "variations": { + "fill": { + "typography": { + "fontWeight": "300" + }, + "elements": { + "link": { + ":focus": { + "color": { + "background": "var:preset|color|primary-500" + } + }, + ":hover": { + "color": { + "background": "var:preset|color|primary-500" + } + } + } + } + } + } + }, "core/separator": { "color": { "text": "var:preset|color|primary-500" diff --git a/styles/extant.json b/styles/extant.json index b4bca5e9..c37f6592 100644 --- a/styles/extant.json +++ b/styles/extant.json @@ -45,14 +45,6 @@ "lineHeight": "var:preset|line-height|xs" } } - }, - "core/post-terms": { - "custom": { - "fill": { - "hoverColor": "var:preset|color|base", - "hoverBackground": "var:preset|color|contrast" - } - } } }, "custom": { @@ -635,6 +627,26 @@ } } } + }, + "variations": { + "fill": { + "elements": { + "link": { + ":focus": { + "color": { + "background": "var:preset|color|contrast", + "text": "var:preset|color|base" + } + }, + ":hover": { + "color": { + "background": "var:preset|color|contrast", + "text": "var:preset|color|base" + } + } + } + } + } } }, "core/pullquote": { diff --git a/styles/thunderbird.json b/styles/thunderbird.json index 9caea0bc..1ec635ee 100644 --- a/styles/thunderbird.json +++ b/styles/thunderbird.json @@ -44,13 +44,6 @@ } } }, - "core/post-terms": { - "custom": { - "fill": { - "hoverBackground": "var:preset|color|neutral-950" - } - } - }, "core/table": { "custom": { "stripes": { @@ -381,6 +374,26 @@ } } }, + "core/post-terms": { + "variations": { + "fill": { + "elements": { + "link": { + ":focus": { + "color": { + "background": "var:preset|color|neutral-950" + } + }, + ":hover": { + "color": { + "background": "var:preset|color|neutral-950" + } + } + } + } + } + } + }, "core/pullquote": { "typography": { "fontFamily": "var:preset|font-family|primary", diff --git a/styles/unravel.json b/styles/unravel.json index 448a0564..a946fb48 100644 --- a/styles/unravel.json +++ b/styles/unravel.json @@ -34,15 +34,6 @@ "fontFamily": "var:preset|font-family|primary" } } - }, - "core/post-terms": { - "custom": { - "fill": { - "color": "var:preset|color|primary-950", - "background": "var:preset|color|primary-100", - "hoverBackground": "var:preset|color|primary-300" - } - } } }, "color": { @@ -507,6 +498,30 @@ } } }, + "core/post-terms": { + "variations": { + "fill": { + "elements": { + "link": { + "color": { + "background": "var:preset|color|primary-100", + "text": "var:preset|color|primary-950" + }, + ":focus": { + "color": { + "background": "var:preset|color|primary-300" + } + }, + ":hover": { + "color": { + "background": "var:preset|color|primary-300" + } + } + } + } + } + } + }, "core/site-title": { "typography": { "fontSize": "var:preset|font-size|xl", diff --git a/theme.json b/theme.json index 81a6b4ba..80ffaf59 100644 --- a/theme.json +++ b/theme.json @@ -75,19 +75,6 @@ } } }, - "core/post-terms": { - "custom": { - "fill": { - "fontSize": "var:preset|font-size|xs", - "lineHeight": "var:custom|line-height|xs", - "color": "var:preset|color|base", - "background": "var:preset|color|primary-700", - "borderRadius": "var:custom|global|border-radius", - "shadow": "var:preset|shadow|md", - "hoverBackground": "var:preset|color|primary-950" - } - } - }, "core/separator": { "color": { "customGradient": false @@ -1485,7 +1472,7 @@ "radius": "var:custom|global|border-radius" }, "color": { - "text": "var:preset|color|contrast", + "text": "red", "background": "var:preset|color|base" }, "shadow": "var:preset|shadow|md", @@ -1631,6 +1618,55 @@ "lineHeight": "var:custom|line-height|sm" } }, + "core/post-terms": { + "variations": { + "fill": { + "typography": { + "fontSize": "var:preset|font-size|xs", + "lineHeight": "var:custom|line-height|xs" + }, + "elements": { + "link": { + "border": { + "radius": "var:custom|global|border-radius" + }, + "color": { + "text": "var:preset|color|base", + "background": "var:preset|color|primary-700" + }, + "shadow": "var:preset|shadow|md", + "spacing": { + "padding": { + "top": "var:preset|spacing|minus-2", + "bottom": "var:preset|spacing|minus-2", + "left": "var:preset|spacing|base", + "right": "var:preset|spacing|base" + } + }, + "typography": { + "textDecoration": "none" + }, + ":focus": { + "color": { + "background": "var:preset|color|primary-950" + }, + "typography": { + "textDecoration": "underline" + } + }, + ":hover": { + "color": { + "background": "var:preset|color|primary-950" + }, + "typography": { + "textDecoration": "underline" + } + } + } + } + } + } + }, "core/quote": { "border": { "color": {