[n/a] Moving to theme colors vars (#89)

* [n/a] Making the accent color dynamic

* [n/a] Updating colors to be gray

* [n/a] Adding info about typography

* [n/a] Fixing var in button.js

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

@@ -1,108 +1,114 @@
 const plugin = require("tailwindcss/plugin")
 
-module.exports = plugin(({ addComponents }) => {
-	// Base Styles
-	const base = {
-		// core
-		'@apply inline-flex items-center rounded transition text-base gap-12':
-		{},
-		// focus
-		'@apply focus:outline-none focus-visible:ring-4': {},
-		// disabled
-		'@apply disabled:opacity-20 disabled:pointer-events-none': {},
-		// icon
-		'& svg': {
-		'@apply size-20': {},
-		},
-		// text exempt
-		'&:not(.btn-text)': {
-		'@apply px-20 min-h-40': {},
-		},
-	}
+module.exports = plugin.withOptions(function (options = {}) {
+	return function({ addComponents }) {
+		const accentColor = options.accentColor ?? 'sky'
 
-	const buttons = {
-		// Button Variants
-		'.btn-contained': {
-			...base,
-			[`@apply
-			bg-sky-700 text-white
-			hover:bg-sky-700
-			active:bg-sky-800
-			focus-visible:bg-sky-700 focus-visible:ring-sky-600/50`]: {},
-		},
+		// Base Styles
+		const base = {
+			// core
+			'@apply inline-flex items-center rounded transition text-base gap-12':
+			{},
+			// focus
+			'@apply focus:outline-none focus-visible:ring-4': {},
+			// disabled
+			'@apply disabled:opacity-20 disabled:pointer-events-none': {},
+			// icon
+			'& svg': {
+			'@apply size-20': {},
+			},
+			// text exempt
+			'&:not(.btn-text)': {
+			'@apply px-20 min-h-40': {},
+			},
+		}
 
-		'.btn-contained-light': {
-			...base,
-			[`@apply
-			bg-sky-200 text-sky-900
-			hover:bg-sky-50
-			active:bg-sky-100
-			focus-visible:bg-sky-50 focus-visible:ring-white/50`]: {},
-		},
+		const buttons = {
+			// Button Variants
+			'.btn-contained': {
+				...base,
+				[`@apply
+				bg-${accentColor}-700 text-white
+				hover:bg-${accentColor}-700
+				active:bg-${accentColor}-800
+				focus-visible:bg-${accentColor}-700 focus-visible:ring-${accentColor}-600/50`]: {},
+			},
 
-		'.btn-outlined': {
-			...base,
-			[`@apply
-			border border-sky-900 bg-transparent text-sky-900
-			hover:bg-sky-100 hover:border-sky-700 hover:text-sky-700
-			active:bg-sky-200/80 active:text-sky-800
-			focus-visible:bg-sky-100 focus-visible:border-sky-700 focus-visible:ring-sky-600/50`]: {},
-		},
+			'.btn-contained-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`]: {},
+			},
 
-		'.btn-outlined-light': {
-			...base,
-			[`@apply
-			border-white text-white
-			hover:bg-white/25
-			active:bg-white/30
-			focus-visible:bg-sky-100/30 focus-visible:ring-white/50`]: {},
-		},
+			'.btn-outlined': {
+				...base,
+				[`@apply
+				border border-${accentColor}-900 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`]: {},
+			},
 
-		'.btn-subtle': {
-			...base,
-			[`@apply
-			bg-transparent bg-transparent text-sky-600
-			hover:bg-sky-100 hover:text-sky-700
-			active:bg-sky-200/80 active:text-sky-800
-			focus-visible:bg-sky-100 focus-visible:border-sky-700 focus-visible:ring-sky-600/50`]: {},
-		},
+			'.btn-outlined-light': {
+				...base,
+				[`@apply
+				border-white text-white
+				hover:bg-white/25
+				active:bg-white/30
+				focus-visible:bg-${accentColor}-100/30 focus-visible:ring-white/50`]: {},
+			},
 
-		'.btn-text': {
-			...base,
-			[`@apply
-			bg-transparent text-sky-600
-			hover:text-sky-700 hover:underline
-			active:text-sky-800
-			focus-visible:bg-sky-100 focus-visible:ring-sky-600/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`]: {},
+			},
 
-		// Button Sizes
-		'.btn-sm': {
-			'@apply text-sm gap-8': {},
-			'& svg': {
-			'@apply size-16': {},
+			'.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`]:
+				{},
 			},
-			'&:not(.btn-text)': {
-			'@apply px-16 min-h-32': {},
+
+			// 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': {},
+			'.btn-lg': {
+				'@apply text-xl gap-12': {},
+				'& svg': {
+				'@apply size-24': {},
+				},
+				'&:not(.btn-text)': {
+				'@apply px-32 min-h-56': {},
+				},
 			},
-			'&:not(.btn-text)': {
-			'@apply px-32 min-h-56': {},
+
+			// Button Icon/Sizes
+			'.btn-icon': {
+				fontSize: '0 !important',
+				lineHeight: '0 !important',
+				'@apply !p-0 !gap-0 aspect-square justify-center items-center': {},
 			},
-		},
+		}
 
-		// Button Icon/Sizes
-		'.btn-icon': {
-			fontSize: '0 !important',
-			lineHeight: '0 !important',
-			'@apply !p-0 !gap-0 aspect-square justify-center items-center': {},
-		},
-	}
-	addComponents(buttons)
+		addComponents(buttons)
+	  }
 })
+

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

@@ -1,3 +1,4 @@
+/** Navigation colors need to be updated to match your theme colors */
 @layer components {
 	.header-navigation {
 		@apply bg-gray-100 dark:bg-gray-800;
@@ -31,7 +32,7 @@
 
 					&:hover,
 					&:focus {
-						@apply text-sky-700 underline decoration-2 underline-offset-8 dark:text-sky-200;
+						@apply text-gray-700 underline decoration-2 underline-offset-8 dark:text-gray-200;
 					}
 				}
 
@@ -50,7 +51,7 @@
 
 						&:hover,
 						&:focus {
-							@apply text-sky-700 underline decoration-2 underline-offset-8 dark:text-sky-700;
+							@apply text-gray-700 underline decoration-2 underline-offset-8 dark:text-gray-700;
 						}
 					}
 				}

wp-content/themes/wp-starter/src/styles/custom-blocks/accordion.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-sky-600 hover:after:text-sky-600;
-				@apply focus:text-sky-600 focus:outline-sky-600 focus:after:text-sky-600;
+				@apply hover:text-gray-600 hover:after:text-gray-600;
+				@apply focus:text-gray-600 focus:outline-gray-600 focus:after:text-gray-600;
 			}
 
 			&[open] {
 				@apply pb-24;
 
 				> summary {
-					@apply after:text-sky-600 after:content-['\2212'];
+					@apply after:text-gray-600 after:content-['\2212'];
 				}
 			}
 		}

wp-content/themes/wp-starter/src/styles/custom-blocks/breadcrumbs.css

@@ -6,7 +6,7 @@
 		}
 
 		a {
-			@apply text-sky-700 underline hover:no-underline focus:no-underline;
+			@apply text-gray-700 underline hover:no-underline focus:no-underline;
 		}
 	}
 
@@ -22,7 +22,7 @@
 			}
 
 			.wp-block-button__link.wp-element-button {
-				@apply !m-0 bg-transparent !p-0 text-sky-700 underline hover:bg-transparent hover:no-underline focus:bg-transparent focus:no-underline;
+				@apply !m-0 bg-transparent !p-0 text-gray-700 underline hover:bg-transparent hover:no-underline focus:bg-transparent focus:no-underline;
 			}
 		}
 	}

wp-content/themes/wp-starter/src/theme-json/settings/color.js

@@ -30,7 +30,7 @@ export default {
 			slug: 'dark-black',
 		},
 		{
-			color: theme.colors.sky[800],
+			color: theme.colors[theme.accentColor][800],
 			name: 'Accent',
 			slug: 'dark-accent',
 		},

wp-content/themes/wp-starter/src/theme-json/settings/typography.js

@@ -8,9 +8,10 @@ export default {
 	fontFamilies: [
 		// For more info about loading fonts see https://fullsiteediting.com/lessons/theme-json-typography-options/
 		{
+			//Set this to be your body font family
 			fontFamily: 'Roboto Condensed',
 			name: 'Roboto Condensed',
-			slug: 'heading',
+			slug: 'body',
 			fontFace: [
 				{
 					fontFamily: 'Roboto Condensed',
@@ -32,6 +33,22 @@ export default {
 				},
 			],
 		},
+		{
+			//Set this to be your heading font family
+			fontFamily: 'Roboto Condensed',
+			name: 'Roboto Condensed',
+			slug: 'heading',
+			/* Load custom fonts with fontFace
+			fontFace: [
+				{
+					fontFamily: 'FONT_FAMILY_HERE',
+					fontStretch: 'normal',
+					fontStyle: 'normal',
+					fontWeight: '300 900',
+					src: ['file:./src/fonts/FONT_NAME_HERE.woff2'],
+				},
+			*/
+		},
 		{
 			fontFamily:
 				'-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif',

wp-content/themes/wp-starter/tailwind.config.js

@@ -4,6 +4,12 @@ const { remPair, rem } = require('@viget/tailwindcss-plugins/utilities/fns')
 // Breakpoints and content widths for the site
 const minBreakpoint = 640;
 const maxBreakpoint = 1440;
+/*
+* This sets the accent color name which is used in theme-json/settings/color.js and plugins-tailwind/buttons.js
+* Preferable use lowercase and one word. Use - for spaces and don't use capital letters or numbers.
+* Any colors set in CSS will need to be manually updated.
+*/
+const accentColor = 'your-accent-color-name';
 
 const fluidSize = (
 	minSize,
@@ -30,6 +36,7 @@ module.exports = {
 	theme: {
 		contentSmall: minBreakpoint.toString(),
 		contentBase: maxBreakpoint.toString(),
+		accentColor: accentColor,
 		extend: {
 			aspectRatio: {
 				'5/3': '5/3',
@@ -44,6 +51,20 @@ module.exports = {
 					500: "#737373",
 					900: "#0a0a0a",
 				},
+				//This pulls in the accentColor as the color name
+				[accentColor]: {
+					50: "#f0f9ff",
+					100: "#e0f2fe",
+					200: "#bae6fd",
+					300: "#7dd3fc",
+					400: "#38bdf8",
+					500: "#0ea5e9",
+					600: "#0284c7",
+					700: "#0369a1",
+					800: "#075985",
+					900: "#0c4a6e",
+					950: "#082f49",
+				},
 			},
 			flexBasis: {
 				'1/2-gap': 'calc((100%/2) - var(--wp--style--block-gap))',
@@ -102,7 +123,9 @@ module.exports = {
 		},
 	},
 	plugins: [
-		require('./plugins-tailwind/buttons.js'),
+		require('./plugins-tailwind/buttons.js')({
+			accentColor: accentColor,
+		}),
 	],
 }