[N/A] Remove accentColor feature (#158)

wp-content/themes/wp-starter/README.md

@@ -67,16 +67,16 @@ To adjust the spacing you can edit them in `tailwind.config.js` under `spacing >
 ### Buttons
 WordPress button styles are normally built in the `theme.json` but because there is a limitations on hover/focus for button variants all the buttons style are build in Tailwind.
 
-The Tailwind button plugin is in `plugins-tailwind/buttons.js` and has `contained`, `outline`, and both light and dark version. In that file (`buttons.js`) is where you will update and style all of the buttons on the site. Those button styles are getting applied to the HTML in `/src/styles/core-blocks/buttons.css`. 
+The Tailwind button plugin is in `plugins-tailwind/buttons.js` and has `default`, `outline`, and both light and dark version. In that file (`buttons.js`) is where you will update and style all of the buttons on the site. Those button styles are getting applied to the HTML in `/src/styles/core-blocks/buttons.css`. 
 If you have need to apply the buttons style to the mark up you can add one of these button classes.
-| Button Class | Button Sizes |
-|--------------|--------------
-| `.btn-contained` | `.btn-sm` |
-| `.btn-contained-light` | `.btn-lg` |
-| `.btn-outlined` |
-| `.btn-outlined-light` |
-| `.btn-subtle` |
-| `.btn-text` |
+
+| Button Classes       |
+|----------------------|
+| `.btn-default`       |
+| `.btn-default-light` |
+| `.btn-outline`       |
+| `.btn-outline-light` |
+| `.btn-text`          |
 
 
 ### Navigation

wp-content/themes/wp-starter/blocks/accordion/style.css

@@ -7,15 +7,15 @@
 				@apply relative my-12 flex cursor-pointer justify-between py-12 pr-24 text-base font-bold;
 				@apply marker:content-none focus:outline-none;
 				@apply after:absolute after:bottom-0 after:right-0 after:top-0 after:flex after:items-center after:font-mono after:text-lg after:content-['\002B'];
-				@apply hover:text-gray-600 hover:after:text-gray-600;
-				@apply focus:text-gray-600 focus:outline-gray-600 focus:after:text-gray-600;
+				@apply hover:text-black hover:after:text-black;
+				@apply focus:text-black focus:outline-black focus:after:text-black;
 			}
 
 			&[open] {
 				@apply pb-24;
 
 				> summary {
-					@apply after:text-gray-600 after:content-['\2212'];
+					@apply after:text-black after:content-['\2212'];
 				}
 			}
 		}

wp-content/themes/wp-starter/blocks/alert-banner/style.css

@@ -6,17 +6,17 @@
 			@apply m-auto flex w-full flex-col items-start gap-24 text-sm sm:flex-wrap md:flex-row md:items-center md:py-0 lg:items-center lg:gap-48;
 
 			.wp-block-button .wp-block-button__link {
-				@apply border-gray-900 text-sm text-gray-900;
-				@apply hover:bg-gray-900 hover:text-white;
+				@apply border-black text-sm text-black;
+				@apply hover:bg-black hover:text-white;
 			}
 		}
 
 		&.is-style-dismissible {
 			@apply relative;
 
 			.dismiss {
-				@apply z-10 m-auto size-24 cursor-pointer border border-none border-gray-900 bg-transparent md:inset-y-0 lg:absolute lg:right-16;
-				@apply after:flex after:items-center after:justify-center after:text-gray-900 after:content-['\2715'];
+				@apply z-10 m-auto size-24 cursor-pointer border border-none border-black bg-transparent md:inset-y-0 lg:absolute lg:right-16;
+				@apply after:flex after:items-center after:justify-center after:text-black after:content-['\2715'];
 			}
 		}
 
@@ -34,11 +34,11 @@
 		&[class*='has-dark'] {
 			.wp-block-button .wp-block-button__link {
 				@apply border-white text-white;
-				@apply hover:bg-white hover:text-gray-900;
+				@apply hover:bg-white hover:text-black;
 			}
 			.dismiss {
 				@apply border-white after:text-white;
-				@apply hover:after:bg-white hover:after:text-gray-900;
+				@apply hover:after:bg-white hover:after:text-black;
 			}
 		}
 	}

wp-content/themes/wp-starter/blocks/breadcrumbs/style.css

@@ -6,7 +6,7 @@
 		}
 
 		a {
-			@apply text-gray-700 underline hover:no-underline focus:no-underline;
+			@apply text-black underline hover:no-underline focus:no-underline;
 		}
 	}
 
@@ -22,15 +22,15 @@
 			}
 
 			.wp-block-button__link.wp-element-button {
-				@apply !m-0 bg-transparent !p-0 text-gray-700 underline hover:bg-transparent hover:no-underline focus:bg-transparent focus:no-underline;
+				@apply !m-0 bg-transparent !p-0 text-black underline hover:bg-transparent hover:no-underline focus:bg-transparent focus:no-underline;
 			}
 		}
 	}
 }
 
 /** Breadcrumb Block Style */
 :root
-	.wp-block-buttons.is-style-breadcrumbs
+	.wp-block-buttons.is-style-breadcrumbs,
 	.wp-block-button__link:not(.btn-text) {
 	padding: 0;
 	color: var(--wp--preset--color--black);
@@ -41,7 +41,7 @@
 	.wp-block-buttons.is-style-breadcrumbs
 	.wp-block-button:last-child
 	.wp-block-button__link:not(.btn-text) {
-	color: var(--wp--preset--color--accent);
+	color: var(--wp--preset--color--black);
 	text-decoration: underline;
 }
 

wp-content/themes/wp-starter/blocks/navigation-container/render.php

@@ -36,7 +36,7 @@
 		<?php if ( ! is_admin() ) : ?>
 			@click="menuIsOpen = !menuIsOpen"
 			x-cloak
-			class="absolute inset-y-0 right-0 flex items-center justify-center w-32 h-32 text-gray-900 md:hidden dark:text-white"
+			class="absolute inset-y-0 right-0 flex items-center justify-center w-32 h-32 text-black md:hidden dark:text-white"
 		<?php else : ?>
 			class="hidden"
 		<?php endif; ?>

wp-content/themes/wp-starter/blocks/navigation-container/render.twig

@@ -32,7 +32,7 @@
 		{% if function('is_admin') == false %}
 			@click="menuIsOpen = !menuIsOpen"
 			x-cloak
-			class="absolute inset-y-0 right-0 flex items-center justify-center w-32 h-32 text-gray-900 md:hidden dark:text-white"
+			class="absolute inset-y-0 right-0 flex items-center justify-center w-32 h-32 text-black md:hidden dark:text-white"
 		{% else %}
 			class="hidden"
 		{% endif %}

wp-content/themes/wp-starter/blocks/page-header/block.json

@@ -19,7 +19,7 @@
       "type": "object",
       "default": {
         "color": {
-          "background": "var(--wp--preset--color--gray-100)"
+          "background": "var(--wp--preset--color--white)"
         },
         "spacing": {
           "padding": {

wp-content/themes/wp-starter/parts/footer-stacked-navigation.html

@@ -1,5 +1,5 @@
-<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}}},"backgroundColor":"gray-100","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"top"}} -->
-<div class="wp-block-group has-gray-100-background-color has-background" style="padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--10)"><!-- wp:site-logo {"shouldSyncIcon":true} /-->
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}}},"backgroundColor":"white","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"top"}} -->
+<div class="wp-block-group has-white-background-color has-background" style="padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--10)"><!-- wp:site-logo {"shouldSyncIcon":true} /-->
 
 <!-- wp:spacer {"width":"0px","style":{"layout":{"flexSize":"100px","selfStretch":"fixed"}}} -->
 <div style="height:100px;width:0px" aria-hidden="true" class="wp-block-spacer"></div>

wp-content/themes/wp-starter/parts/footer.html

@@ -1,5 +1,5 @@
-<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}}},"backgroundColor":"gray-100","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
-<div class="wp-block-group has-gray-100-background-color has-background" style="padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--10)"><!-- wp:site-logo {"shouldSyncIcon":true} /-->
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}}},"backgroundColor":"white","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+<div class="wp-block-group has-white-background-color has-background" style="padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--10)"><!-- wp:site-logo {"shouldSyncIcon":true} /-->
 
 <!-- wp:spacer {"width":"0px","style":{"layout":{"flexSize":"100px","selfStretch":"fixed"}}} -->
 <div style="height:100px;width:0px" aria-hidden="true" class="wp-block-spacer"></div>

wp-content/themes/wp-starter/src/plugins-tailwind/buttons.js

@@ -2,8 +2,6 @@ const plugin = require("tailwindcss/plugin")
 
 module.exports = plugin.withOptions(function (options = {}) {
 	return function({ addComponents }) {
-		const accentColor = options.accentColor ?? 'sky'
-
 		// Base Styles
 		const base = {
 			// core
@@ -25,81 +23,52 @@ module.exports = plugin.withOptions(function (options = {}) {
 
 		const buttons = {
 			// Button Variants
-			'.btn-contained': {
+			'.btn-default': {
 				...base,
 				[`@apply
-				bg-${accentColor}-700 text-white
-				hover:bg-${accentColor}-800
-				active:bg-${accentColor}-800
-				focus-visible:bg-${accentColor}-700 focus-visible:ring-${accentColor}-600/50`]: {},
+				bg-black text-white
+				hover:bg-black/90
+				active:bg-black/80
+				focus-visible:bg-black focus-visible:ring-black/50`]: {},
 			},
 
-			'.btn-contained-light': {
+			'.btn-default-light': {
 				...base,
 				[`@apply
-				bg-${accentColor}-200 text-${accentColor}-900
-				hover:bg-${accentColor}-50
-				active:bg-${accentColor}-100
-				focus-visible:bg-${accentColor}-50 focus-visible:ring-white/50`]: {},
+				bg-black text-white
+				hover:bg-black/90
+				active:bg-black/80
+				focus-visible:bg-black focus-visible:ring-white/50`]: {},
 			},
 
-			'.btn-outlined': {
+			'.btn-outline': {
 				...base,
 				[`@apply
-				border border-current bg-transparent text-${accentColor}-900
-				hover:bg-${accentColor}-100 hover:border-${accentColor}-700 hover:text-${accentColor}-700
-				active:bg-${accentColor}-200/80 active:text-${accentColor}-800
-				focus-visible:bg-${accentColor}-100 focus-visible:border-${accentColor}-700 focus-visible:ring-${accentColor}-600/50`]: {},
+				border border-current bg-transparent text-black
+				hover:border-black/90 hover:border-black hover:text-black
+				active:border-black/80 active:text-black
+				focus-visible:border-black/90 focus-visible:ring-black/50`]: {},
 			},
 
-			'.btn-outlined-light': {
+			'.btn-outline-light': {
 				...base,
 				[`@apply
 				border-current text-white bg-transparent
 				hover:bg-white/25
 				active:bg-white/30
-				focus-visible:bg-${accentColor}-100/30 focus-visible:ring-white/50`]: {},
-			},
-
-			'.btn-subtle': {
-				...base,
-				[`@apply
-				bg-transparent bg-transparent text-${accentColor}-600
-				hover:bg-${accentColor}-100 hover:text-${accentColor}-700
-				active:bg-${accentColor}-200/80 active:text-${accentColor}-800
-				focus-visible:bg-${accentColor}-100 focus-visible:border-${accentColor}-700 focus-visible:ring-${accentColor}-600/50`]: {},
+				focus-visible:bg-black/30 focus-visible:ring-white/50`]: {},
 			},
 
 			'.btn-text': {
 				...base,
 				[`@apply
-				bg-transparent text-${accentColor}-600
-				hover:text-${accentColor}-700 hover:underline
-				active:text-${accentColor}-800
-				focus-visible:bg-${accentColor}-100 focus-visible:ring-${accentColor}-600/50`]:
+				bg-transparent text-black
+				hover:text-black/90 hover:underline
+				active:text-black/80
+				focus-visible:bg-black focus-visible:ring-black/50`]:
 				{},
 			},
 
-			// Button Sizes
-			'.btn-sm': {
-				'@apply text-sm gap-8': {},
-				'& svg': {
-				'@apply size-16': {},
-				},
-				'&:not(.btn-text)': {
-				'@apply px-16 min-h-32': {},
-				},
-			},
-			'.btn-lg': {
-				'@apply text-xl gap-12': {},
-				'& svg': {
-				'@apply size-24': {},
-				},
-				'&:not(.btn-text)': {
-				'@apply px-32 min-h-56': {},
-				},
-			},
-
 			// Button Icon/Sizes
 			'.btn-icon': {
 				fontSize: '0 !important',

wp-content/themes/wp-starter/src/styles/core-blocks/buttons.css

@@ -1,12 +1,12 @@
 @layer components {
 	.wp-block-button {
 		.wp-block-button__link {
-			@apply btn-contained;
+			@apply btn-default;
 		}
 
 		&.is-style-outline {
 			.wp-block-button__link {
-				@apply btn-outlined;
+				@apply btn-outline;
 			}
 		}
 	}
@@ -15,12 +15,12 @@
 	[class*='has-dark'] {
 		.wp-block-button {
 			.wp-block-button__link {
-				@apply btn-contained-light;
+				@apply btn-default-light;
 			}
 
 			&.is-style-outline {
 				.wp-block-button__link {
-					@apply btn-outlined-light;
+					@apply btn-outline-light;
 				}
 			}
 		}

wp-content/themes/wp-starter/src/styles/core-blocks/navigation.css

@@ -1,7 +1,7 @@
 /** Navigation colors need to be updated to match your theme colors */
 @layer components {
 	.header-navigation {
-		@apply bg-gray-100 dark:bg-gray-800;
+		@apply bg-white dark:bg-black;
 
 		.wp-block-page-list {
 			@apply flex flex-col md:flex-row;
@@ -28,30 +28,30 @@
 				/* Menu Links */
 				.wp-block-navigation-item__content,
 				.wp-block-pages-list__item__link {
-					@apply mx-2 my-4 text-gray-800 dark:text-white;
+					@apply mx-2 my-4 text-black dark:text-white;
 
 					&:hover,
 					&:focus {
-						@apply text-gray-700 underline decoration-2 underline-offset-8 dark:text-gray-200;
+						@apply text-black underline decoration-2 underline-offset-8 dark:text-white;
 					}
 				}
 
 				.wp-block-navigation-submenu__toggle {
 					@apply relative;
-					@apply after:absolute after:inset-y-0 after:right-0 after:m-auto after:inline-block after:h-6 after:w-6 after:-rotate-45 after:border-b after:border-l after:border-solid after:border-gray-900 dark:after:border-white;
+					@apply after:absolute after:inset-y-0 after:right-0 after:m-auto after:inline-block after:h-6 after:w-6 after:-rotate-45 after:border-b after:border-l after:border-solid after:border-black dark:after:border-white;
 				}
 
 				/* Submenu */
 				.wp-block-navigation__submenu-container {
-					@apply relative flex flex-col border-2 p-0 dark:border-gray-800;
+					@apply relative flex flex-col border-2 p-0 dark:border-black;
 					@apply md:absolute;
 
 					.wp-block-navigation-item__content {
-						@apply text-gray-800 dark:text-gray-800;
+						@apply text-black dark:text-black;
 
 						&:hover,
 						&:focus {
-							@apply text-gray-700 underline decoration-2 underline-offset-8 dark:text-gray-700;
+							@apply text-black underline decoration-2 underline-offset-8 dark:text-black;
 						}
 					}
 				}

wp-content/themes/wp-starter/src/styles/core-blocks/quote.css

@@ -1,5 +1,5 @@
 @layer components {
 	blockquote.wp-block-quote-is-layout-flow {
-		@apply border-l border-solid border-gray-800;
+		@apply border-l border-solid border-black;
 	}
 }

wp-content/themes/wp-starter/src/theme-json/styles/blocks.js

@@ -25,7 +25,7 @@ const blocks = {
 	'core/code': {
 		color: {
 			background: 'var(--wp--preset--color--white)',
-			text: 'var(--wp--preset--color--gray-500)',
+			text: 'var(--wp--preset--color--black)',
 		},
 		spacing: {
 			padding: {