From ca0ffc7cf962fa43ee3cfd3a8bf67c7addc698c4 Mon Sep 17 00:00:00 2001
From: Kevin Batdorf <kbat82@gmail.com>
Date: Mon, 30 Sep 2024 01:03:02 +0700
Subject: [PATCH] wip

---
 .prettierrc.js     |  3 ++-
 tailwind.config.js | 20 +++++++++++---------
 webpack.config.js  | 14 +++++++++++---
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/.prettierrc.js b/.prettierrc.js
index eca853a..ef24f08 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1,4 +1,5 @@
-export default {
+// eslint-disable-next-line no-undef
+module.exports = {
     trailingComma: 'all',
     tabWidth: 4,
     semi: true,
diff --git a/tailwind.config.js b/tailwind.config.js
index 71b088e..121baf7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
-import { colors } from 'tailwindcss/colors';
-
+/* eslint-disable @typescript-eslint/no-require-imports */
+// eslint-disable-next-line no-undef
+const colors = require('tailwindcss/colors');
 delete colors['lightBlue'];
 delete colors['warmGray'];
 delete colors['trueGray'];
@@ -7,7 +8,8 @@ delete colors['coolGray'];
 delete colors['blueGray'];
 
 // See postcss.config.js for more parsing options.
-export default {
+// eslint-disable-next-line no-undef
+module.exports = {
     // Tnis should match the namespace you use in your css styles.
     important: '.code-block-pro',
     theme: {
@@ -47,20 +49,20 @@ export default {
             gray: {
                 50: '#fbfbfb',
                 100: '#f0f0f0',
-                150: '#eaeaea',
-                200: '#e0e0e0',
-                300: '#dddddd',
+                150: '#eaeaea', // This wasn't a variable but I saw it on buttons
+                200: '#e0e0e0', // Used sparingly for light borders.
+                300: '#dddddd', // Used for most borders.
                 400: '#cccccc',
                 500: '#cccccc',
-                600: '#949494',
-                700: '#757575',
+                600: '#949494', // Meets 3:1 UI or large text contrast against white.
+                700: '#757575', // Meets 4.6:1 text contrast against white.
                 900: '#1e1e1e',
             },
         },
         extend: {
             zIndex: {
                 high: '99999',
-                max: '2147483647',
+                max: '2147483647', // max int values - don't block WP re-auth modal
             },
             ringWidth: {
                 wp: 'var(--wp-admin-border-width-focus)',
diff --git a/webpack.config.js b/webpack.config.js
index fd0b0e9..63f3314 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,8 +1,16 @@
-import defaultConfig from '@wordpress/scripts/config/webpack.config';
-import CopyPlugin from 'copy-webpack-plugin';
+/* eslint @typescript-eslint/no-require-imports: 0 */
+// eslint-disable-next-line no-undef
+const defaultConfig = require('@wordpress/scripts/config/webpack.config');
+// eslint-disable-next-line no-undef
+const CopyPlugin = require('copy-webpack-plugin');
 
-export default {
+// eslint-disable-next-line no-undef
+module.exports = {
     ...defaultConfig,
+    devServer: {
+        ...defaultConfig.devServer,
+        host: 'wordpress.test',
+    },
     plugins: [
         ...defaultConfig.plugins,
         new CopyPlugin({