Merge pull request #722 from WordPress/fix/border-colors

Resolve border colors in variations
WordPress · Nov 6, 2023 · df92472 · df92472
2 parents 6d13887 + 8c8afc3
commit df92472
Show file tree

Hide file tree

Showing 13 changed files with 34 additions and 71 deletions.
diff --git a/README.md b/README.md
@@ -38,7 +38,6 @@ As a default WordPress theme, it is important to leverage the existing design sy
 |------------|-----------------------------|-----------|------|--------|----------------------------------------------------------|
 | `Base/One` | `--wp--preset--color--base` | `#f9f9f9` | Base | `base` | ![](https://placehold.co/15x15/f9f9f9/f9f9f9.png) |
 | `Base/Two` | `--wp--preset--color--base-2` | `#ffffff` | Base / Two | `base-2` | ![](https://placehold.co/15x15/ffffff/ffffff.png) |
-| `Base/Three` | `--wp--preset--color--base-3` | `#00000025` | Base / Three | `base-3` | ![](https://placehold.co/15x15/00000025/00000025.png) |
 | `Contrast/One` | `--wp--preset--color--contrast` | `#111111` | Contrast | `contrast` | ![](https://placehold.co/15x15/111111/111111.png) |
 | `Contrast/Two` | `--wp--preset--color--contrast-2` | `#636363` | Contrast / Two | `contrast-2` | ![](https://placehold.co/15x15/636363/636363.png) |
 | `Contrast/Three` | `--wp--preset--color--contrast-3` | `#a4a4a4` | Contrast / Three | `contrast-3` | ![](https://placehold.co/15x15/a4a4a4/a4a4a4.png) |

diff --git a/functions.php b/functions.php
@@ -33,7 +33,6 @@ function twentytwentyfour_block_styles() {
 				.is-style-arrow-icon-details {
 					padding-top: var(--wp--preset--spacing--10);
 					padding-bottom: var(--wp--preset--spacing--10);
-					border-bottom: 1px solid var(--wp--preset--color--contrast-2, currentColor);
 				}
 
 				.is-style-arrow-icon-details summary {

diff --git a/patterns/cta-pricing.php b/patterns/cta-pricing.php
@@ -29,8 +29,8 @@
 
 		<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"var:preset|spacing|20"}}}} -->
 		<div class="wp-block-columns alignwide">
-			<!-- wp:column {"style":{"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30","top":"var:preset|spacing|30","bottom":"var:preset|spacing|10"}},"border":{"top":{"color":"var:preset|color|base-3","width":"1px"}}}} -->
-			<div class="wp-block-column" style="border-top-color:var(--wp--preset--color--base-3);border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--30)">
+			<!-- wp:column {"style":{"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30","top":"var:preset|spacing|30","bottom":"var:preset|spacing|10"}},"border":{"top":{"color":"var:preset|color|contrast-3","width":"1px"}}}} -->
+			<div class="wp-block-column" style="border-top-color:var(--wp--preset--color--contrast-3);border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--30)">
 				<!-- wp:heading {"textAlign":"center","level":4,"style":{"spacing":{"padding":{"top":"1px"}}},"fontSize":"medium"} -->
 				<h4 class="wp-block-heading has-text-align-center has-medium-font-size" style="padding-top:1px">
 					<em><?php echo esc_html_x( 'Free', 'Sample heading for the first pricing level', 'twentytwentyfour' ); ?></em>
@@ -52,8 +52,8 @@
 					<p class="has-text-align-center"><?php echo wp_kses_post( _x( 'Access to 5 exclusive <em>Études Articles</em> per month.', 'Feature for pricing level', 'twentytwentyfour' ) ); ?></p>
 					<!-- /wp:paragraph -->
 
-					<!-- wp:separator {"backgroundColor":"base-3"} -->
-					<hr class="wp-block-separator has-text-color has-base-3-color has-alpha-channel-opacity has-base-3-background-color has-background is-style-wide" />
+					<!-- wp:separator {"backgroundColor":"contrast-3"} -->
+					<hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background is-style-wide" />
 					<!-- /wp:separator -->
 
 					<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast-2"}}}},"textColor":"contrast-2"} -->
@@ -62,8 +62,8 @@
 					</p>
 					<!-- /wp:paragraph -->
 
-					<!-- wp:separator {"backgroundColor":"base-3"} -->
-					<hr class="wp-block-separator has-text-color has-base-3-color has-alpha-channel-opacity has-base-3-background-color has-background is-style-wide" />
+					<!-- wp:separator {"backgroundColor":"contrast-3"} -->
+					<hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background is-style-wide" />
 					<!-- /wp:separator -->
 
 					<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast-2"}}}},"textColor":"contrast-2"} -->
@@ -114,16 +114,16 @@
 					<p class="has-text-align-center"><?php echo wp_kses_post( _x( 'Access to 20 exclusive <em>Études Articles</em> per month.', 'Feature for pricing level', 'twentytwentyfour' ) ); ?></p>
 					<!-- /wp:paragraph -->
 
-					<!-- wp:separator {"backgroundColor":"base-3"} -->
-					<hr class="wp-block-separator has-text-color has-base-3-color has-alpha-channel-opacity has-base-3-background-color has-background is-style-wide" />
+					<!-- wp:separator {"backgroundColor":"contrast-3"} -->
+					<hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background is-style-wide" />
 					<!-- /wp:separator -->
 
 					<!-- wp:paragraph {"align":"center"} -->
 					<p class="has-text-align-center"><?php echo esc_html_x( 'Weekly print edition.', 'Feature for pricing level', 'twentytwentyfour' ); ?></p>
 					<!-- /wp:paragraph -->
 
-					<!-- wp:separator {"backgroundColor":"base-3"} -->
-					<hr class="wp-block-separator has-text-color has-base-3-color has-alpha-channel-opacity has-base-3-background-color has-background is-style-wide" />
+					<!-- wp:separator {"backgroundColor":"contrast-3"} -->
+					<hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background is-style-wide" />
 					<!-- /wp:separator -->
 
 					<!-- wp:paragraph {"align":"center"} -->
@@ -149,8 +149,8 @@
 			</div>
 			<!-- /wp:column -->
 
-			<!-- wp:column {"style":{"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30","top":"var:preset|spacing|30","bottom":"var:preset|spacing|10"}},"border":{"top":{"color":"var:preset|color|base-3","width":"1px"}}}} -->
-			<div class="wp-block-column" style="border-top-color:var(--wp--preset--color--base-3);border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--30)">
+			<!-- wp:column {"style":{"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30","top":"var:preset|spacing|30","bottom":"var:preset|spacing|10"}},"border":{"top":{"color":"var:preset|color|contrast-3","width":"1px"}}}} -->
+			<div class="wp-block-column" style="border-top-color:var(--wp--preset--color--contrast-3);border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--30)">
 				<!-- wp:heading {"textAlign":"center","level":4,"style":{"spacing":{"padding":{"top":"1px"}}},"fontSize":"medium"} -->
 				<h4 class="wp-block-heading has-text-align-center has-medium-font-size" style="padding-top:1px">
 					<em><?php echo esc_html_x( 'Expert', 'Sample heading for the third pricing level', 'twentytwentyfour' ); ?></em>
@@ -172,16 +172,16 @@
 					<p class="has-text-align-center"><?php echo wp_kses_post( _x( 'Exclusive, unlimited access to <em>Études Articles</em>.', 'Feature for pricing level', 'twentytwentyfour' ) ); ?></p>
 					<!-- /wp:paragraph -->
 
-					<!-- wp:separator {"backgroundColor":"base-3"} -->
-					<hr class="wp-block-separator has-text-color has-base-3-color has-alpha-channel-opacity has-base-3-background-color has-background is-style-wide" />
+					<!-- wp:separator {"backgroundColor":"contrast-3"} -->
+					<hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background is-style-wide" />
 					<!-- /wp:separator -->
 
 					<!-- wp:paragraph {"align":"center"} -->
 					<p class="has-text-align-center"><?php echo esc_html_x( 'Weekly print edition.', 'Feature for pricing level', 'twentytwentyfour' ); ?></p>
 					<!-- /wp:paragraph -->
 
-					<!-- wp:separator {"backgroundColor":"base-3"} -->
-					<hr class="wp-block-separator has-text-color has-base-3-color has-alpha-channel-opacity has-base-3-background-color has-background is-style-wide" />
+					<!-- wp:separator {"backgroundColor":"contrast-3"} -->
+					<hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background is-style-wide" />
 					<!-- /wp:separator -->
 
 					<!-- wp:paragraph {"align":"center"} -->

diff --git a/patterns/hidden-sidebar.php b/patterns/hidden-sidebar.php
@@ -23,8 +23,8 @@
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:separator {"backgroundColor":"base-3","className":"is-style-wide"} -->
-	<hr class="wp-block-separator has-text-color has-base-3-color has-alpha-channel-opacity has-base-3-background-color has-background is-style-wide" />
+	<!-- wp:separator {"backgroundColor":"contrast","className":"is-style-wide"} -->
+	<hr class="wp-block-separator has-text-color has-contrast-color has-alpha-channel-opacity has-contrast-background-color has-background is-style-wide"/>
 	<!-- /wp:separator -->
 
 	<!-- wp:group {"style":{"spacing":{"blockGap":"16px"}},"layout":{"type":"constrained"}} -->
@@ -37,8 +37,8 @@
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:separator {"backgroundColor":"base-3","className":"is-style-wide"} -->
-	<hr class="wp-block-separator has-text-color has-base-3-color has-alpha-channel-opacity has-base-3-background-color has-background is-style-wide" />
+	<!-- wp:separator {"backgroundColor":"contrast","className":"is-style-wide"} -->
+	<hr class="wp-block-separator has-text-color has-contrast-color has-alpha-channel-opacity has-contrast-background-color has-background is-style-wide"/>
 	<!-- /wp:separator -->
 
 	<!-- wp:group {"style":{"spacing":{"blockGap":"26px"}},"layout":{"type":"constrained"}} -->
@@ -62,8 +62,8 @@
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:separator {"backgroundColor":"base-3","className":"is-style-wide"} -->
-	<hr class="wp-block-separator has-text-color has-base-3-color has-alpha-channel-opacity has-base-3-background-color has-background is-style-wide" />
+	<!-- wp:separator {"backgroundColor":"contrast","className":"is-style-wide"} -->
+	<hr class="wp-block-separator has-text-color has-contrast-color has-alpha-channel-opacity has-contrast-background-color has-background is-style-wide"/>
 	<!-- /wp:separator -->
 
 	<!-- wp:group {"style":{"spacing":{"blockGap":"16px"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->

diff --git a/patterns/text-faq.php b/patterns/text-faq.php
@@ -16,39 +16,39 @@
 
 	<!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
 	<div class="wp-block-group alignwide">
-		<!-- wp:separator {"backgroundColor":"contrast-2","className":"is-style-wide"} -->
-		<hr class="wp-block-separator has-text-color has-contrast-2-color has-alpha-channel-opacity has-contrast-2-background-color has-background is-style-wide"/>
+		<!-- wp:separator {"backgroundColor":"base","className":"is-style-wide"} -->
+		<hr class="wp-block-separator has-text-color has-base-color has-alpha-channel-opacity has-base-background-color has-background is-style-wide"/>
 		<!-- /wp:separator -->
 
-		<!-- wp:details {"style":{"spacing":{"margin":{"top":"0"}}},"className":"is-style-arrow-icon-details","fontSize":"medium"} -->
-		<details class="wp-block-details is-style-arrow-icon-details has-medium-font-size" style="margin-top:0">
+		<!-- wp:details {"style":{"spacing":{"margin":{"top":"0"}},"border":{"top":{"width":"0px","style":"none"},"right":{"width":"0px","style":"none"},"bottom":{"color":"var:preset|color|base","style":"solid","width":"1px"},"left":{"width":"0px","style":"none"}}},"className":"is-style-arrow-icon-details","fontSize":"medium"} -->
+		<details class="wp-block-details is-style-arrow-icon-details has-medium-font-size" style="border-top-style:none;border-top-width:0px;border-right-style:none;border-right-width:0px;border-bottom-color:var(--wp--preset--color--base);border-bottom-style:solid;border-bottom-width:1px;border-left-style:none;border-left-width:0px;margin-top:0">
 			<summary><?php echo esc_html_x( 'What is your process working in smaller projects?', 'Question on the details block', 'twentytwentyfour' ); ?></summary>
 			<!-- wp:paragraph {"placeholder":"Type / to add a hidden block","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast-1"}}}},"textColor":"contrast-1"} -->
 			<p class="has-contrast-1-color has-text-color has-link-color"><?php echo esc_html_x( 'Études offers comprehensive consulting, management, design, and research solutions. Our vision is to be at the forefront of architectural innovation, fostering a global community of architects and enthusiasts united by a passion for creating spaces. Every architectural endeavor is an opportunity to shape the future.', 'Hidden answer on the details block', 'twentytwentyfour' ); ?></p>
 			<!-- /wp:paragraph -->
 		</details>
 		<!-- /wp:details -->
 
-		<!-- wp:details {"style":{"spacing":{"margin":{"top":"0"}}},"className":"is-style-arrow-icon-details","fontSize":"medium"} -->
-		<details class="wp-block-details is-style-arrow-icon-details has-medium-font-size" style="margin-top:0">
+		<!-- wp:details {"style":{"spacing":{"margin":{"top":"0"}},"border":{"top":{"width":"0px","style":"none"},"right":{"width":"0px","style":"none"},"bottom":{"color":"var:preset|color|base","style":"solid","width":"1px"},"left":{"width":"0px","style":"none"}}},"className":"is-style-arrow-icon-details","fontSize":"medium"} -->
+		<details class="wp-block-details is-style-arrow-icon-details has-medium-font-size" style="border-top-style:none;border-top-width:0px;border-right-style:none;border-right-width:0px;border-bottom-color:var(--wp--preset--color--base);border-bottom-style:solid;border-bottom-width:1px;border-left-style:none;border-left-width:0px;margin-top:0">
 			<summary><?php echo esc_html_x( 'Who is behind Études?', 'Question on the details block', 'twentytwentyfour' ); ?></summary>
 			<!-- wp:paragraph {"placeholder":"Type / to add a hidden block","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast-1"}}}},"textColor":"contrast-1"} -->
 			<p class="has-contrast-1-color has-text-color has-link-color"><?php echo esc_html_x( 'Études offers comprehensive consulting, management, design, and research solutions. Our vision is to be at the forefront of architectural innovation, fostering a global community of architects and enthusiasts united by a passion for creating spaces. Every architectural endeavor is an opportunity to shape the future.', 'Hidden answer on the details block', 'twentytwentyfour' ); ?></p>
 			<!-- /wp:paragraph -->
 		</details>
 		<!-- /wp:details -->
 
-		<!-- wp:details {"style":{"spacing":{"margin":{"top":"0"}}},"className":"is-style-arrow-icon-details","fontSize":"medium"} -->
-		<details class="wp-block-details is-style-arrow-icon-details has-medium-font-size" style="margin-top:0">
+		<!-- wp:details {"style":{"spacing":{"margin":{"top":"0"}},"border":{"top":{"width":"0px","style":"none"},"right":{"width":"0px","style":"none"},"bottom":{"color":"var:preset|color|base","style":"solid","width":"1px"},"left":{"width":"0px","style":"none"}}},"className":"is-style-arrow-icon-details","fontSize":"medium"} -->
+		<details class="wp-block-details is-style-arrow-icon-details has-medium-font-size" style="border-top-style:none;border-top-width:0px;border-right-style:none;border-right-width:0px;border-bottom-color:var(--wp--preset--color--base);border-bottom-style:solid;border-bottom-width:1px;border-left-style:none;border-left-width:0px;margin-top:0">
 			<summary><?php echo esc_html_x( 'I\'d like to get to meet fellow architects, how can I do that?', 'Question on the details block', 'twentytwentyfour' ); ?></summary>
 			<!-- wp:paragraph {"placeholder":"Type / to add a hidden block","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast-1"}}}},"textColor":"contrast-1"} -->
 			<p class="has-contrast-1-color has-text-color has-link-color"><?php echo esc_html_x( 'Études offers comprehensive consulting, management, design, and research solutions. Our vision is to be at the forefront of architectural innovation, fostering a global community of architects and enthusiasts united by a passion for creating spaces. Every architectural endeavor is an opportunity to shape the future.', 'Hidden answer on the details block', 'twentytwentyfour' ); ?></p>
 			<!-- /wp:paragraph -->
 		</details>
 		<!-- /wp:details -->
 
-		<!-- wp:details {"style":{"spacing":{"margin":{"top":"0"}}},"className":"is-style-arrow-icon-details","fontSize":"medium"} -->
-		<details class="wp-block-details is-style-arrow-icon-details has-medium-font-size" style="margin-top:0">
+		<!-- wp:details {"style":{"spacing":{"margin":{"top":"0"}},"border":{"top":{"width":"0px","style":"none"},"right":{"width":"0px","style":"none"},"bottom":{"color":"var:preset|color|base","style":"solid","width":"1px"},"left":{"width":"0px","style":"none"}}},"className":"is-style-arrow-icon-details","fontSize":"medium"} -->
+		<details class="wp-block-details is-style-arrow-icon-details has-medium-font-size" style="border-top-style:none;border-top-width:0px;border-right-style:none;border-right-width:0px;border-bottom-color:var(--wp--preset--color--base);border-bottom-style:solid;border-bottom-width:1px;border-left-style:none;border-left-width:0px;margin-top:0">
 			<summary><?php echo esc_html_x( 'Can I apply to be a part of the team or work as a contractor?', 'Question on the details block', 'twentytwentyfour' ); ?></summary>
 			<!-- wp:paragraph {"placeholder":"Type / to add a hidden block","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast-1"}}}},"textColor":"contrast-1"} -->
 			<p class="has-contrast-1-color has-text-color has-link-color"><?php echo esc_html_x( 'Études offers comprehensive consulting, management, design, and research solutions. Our vision is to be at the forefront of architectural innovation, fostering a global community of architects and enthusiasts united by a passion for creating spaces. Every architectural endeavor is an opportunity to shape the future.', 'Hidden answer on the details block', 'twentytwentyfour' ); ?></p>

diff --git a/styles/ember.json b/styles/ember.json
@@ -96,11 +96,6 @@
 					"color": "#f6decd",
 					"name": "Base / Two",
 					"slug": "base-2"
-				},
-				{
-					"color": "#FF3C0025",
-					"name": "Base / Three",
-					"slug": "base-3"
 				}
 			]
 		},

diff --git a/styles/fossil.json b/styles/fossil.json
@@ -77,11 +77,6 @@
 					"name": "Base / Two",
 					"slug": "base-2"
 				},
-				{
-					"color": "#1A151425",
-					"name": "Base / Three",
-					"slug": "base-3"
-				},
 				{
 					"color": "#1A1514",
 					"name": "Contrast",

diff --git a/styles/ice.json b/styles/ice.json
@@ -77,11 +77,6 @@
 					"name": "Base / Two",
 					"slug": "base-2"
 				},
-				{
-					"color": "#ecf1f4",
-					"name": "Base / Three",
-					"slug": "base-3"
-				},
 				{
 					"color": "#1C2930",
 					"name": "Contrast",

diff --git a/styles/maelstrom.json b/styles/maelstrom.json
@@ -15,11 +15,6 @@
 					"name": "Base / Two",
 					"slug": "base-2"
 				},
-				{
-					"color": "#FFFFFF25",
-					"name": "Base / Three",
-					"slug": "base-3"
-				},
 				{
 					"color": "#FFFFFFA1",
 					"name": "Contrast / 2",

diff --git a/styles/mint.json b/styles/mint.json
@@ -15,11 +15,6 @@
 					"name": "Base / Two",
 					"slug": "base-2"
 				},
-				{
-					"color": "#00000025",
-					"name": "Base / Three",
-					"slug": "base-3"
-				},
 				{
 					"color": "#000000",
 					"name": "Contrast",

diff --git a/styles/onyx.json b/styles/onyx.json
@@ -119,11 +119,6 @@
 					"name": "Base / Two",
 					"slug": "base-2"
 				},
-				{
-					"color": "#ffffff26",
-					"name": "Base / Three",
-					"slug": "base-3"
-				},
 				{
 					"color": "#f9f9f9",
 					"name": "Contrast",