fix: poor secondary colors

tailwind.config.js

@@ -3,9 +3,9 @@ const backgroundColors = {
   'secondary-fill': 'var(--secondary-fill)',
   'emphasis-fill': 'var(--emphasis-fill)',
 
-  'input-primary-fill': 'var(--primary-fill)',
-  'input-secondary-fill': 'var(--secondary-fill)',
-  'input-emphasis-fill': 'var(--secondary-fill)',
+  'input-primary-fill': 'var(--input-primary-fill)',
+  'input-secondary-fill': 'var(--input-secondary-fill)',
+  'input-emphasis-fill': 'var(--input-emphasis-fill)',
 
   'btn-primary-fill': 'var(--btn-primary-fill)',
   'btn-primary-fill-hover': 'var(--btn-primary-fill)',
@@ -27,9 +27,9 @@ const borderColors = {
   'secondary-complement': 'var(--secondary-complement)',
   'emphasis-complement': 'var(--emphasis-complement)',
 
-  'input-primary-complement': 'var(--primary-complement)',
-  'input-secondary-complement': 'var(--secondary-complement)',
-  'input-emphasis-complement': 'var(--secondary-complement)',
+  'input-primary-complement': 'var(--input-primary-complement)',
+  'input-secondary-complement': 'var(--input-secondary-complement)',
+  'input-emphasis-complement': 'var(--input-secondary-complement)',
 
   'btn-primary-complement': 'var(--btn-primary-complement)',
   'btn-primary-complement-hover': 'var(--btn-primary-complement)',
@@ -52,9 +52,9 @@ const textColors = {
   muted: 'var(--text-muted)',
   emphasis: 'var(--text-emphasis)',
 
-  'input-primary': 'var(--primary-fill)',
-  'input-secondary': 'var(--secondary-fill)',
-  'input-emphasis': 'var(--secondary-fill)',
+  'input-primary': 'var(--input-text-primary)',
+  'input-secondary': 'var(--input-text-secondary)',
+  'input-emphasis': 'var(--input-text-emphasis)',
 
   'btn-primary': 'var(--btn-text-primary)',
   'btn-primary-hover': 'var(--btn-text-primary)',
@@ -85,7 +85,8 @@ module.exports = {
       backgroundColor: { theme: backgroundColors }, // bg-theme-[key],
       borderColor: { theme: borderColors },
       ringColor: { theme: borderColors },
-      textColor: { theme: textColors }
+      textColor: { theme: textColors },
+      placeholderColor: { theme: textColors }
     }
   },
   variants: {

utilities_for_me/web_app/client/react/CalculatePercent.jsx

@@ -53,6 +53,9 @@ const PercentOf = ({
   handlePercentOfSubmit,
   percentOfResult
 }) => {
+  const textClasses = 'text-theme-input-primary placeholder-theme-input-primary'
+  const borderClasses = 'rounded-md border-2 border-theme-input-primary-complement focus:border-theme-emphasis-fill focus:outline-none focus:ring-1 focus:ring-skin-emphasis-fill'
+
   const percentOf_Percent = percentOf.percent
   const percentOf_Of = percentOf.of
 
@@ -62,7 +65,7 @@ const PercentOf = ({
       <div>What is</div>
       <input
         type='number'
-        className='w-24 p-2 m-3 border-2 rounded border-gray-700 bg-skin-secondary-fill text-skin-secondary'
+        className={`w-24 p-2 m-3 border-2 rounded bg-theme-input-primary-fill ${textClasses} ${borderClasses}`}
         name='percent'
         value={percentOf_Percent}
         onChange={handlePercentOfChange}
@@ -71,7 +74,7 @@ const PercentOf = ({
       <div>
         <input
           type='number'
-          className='w-24 p-2 m-3 border-2 rounded border-gray-700 bg-skin-secondary-fill text-skin-secondary'
+          className={`w-24 p-2 m-3 border-2 rounded bg-theme-input-primary-fill ${textClasses} ${borderClasses}`}
           name='of'
           value={percentOf_Of}
           onChange={handlePercentOfChange}
@@ -94,6 +97,9 @@ const NumIsWhatPercentOf = ({
   numIsWhatPercentOfResult,
   handleNumIsWhatPercentOfSubmit
 }) => {
+  const textClasses = 'text-theme-input-primary placeholder-theme-input-primary'
+  const borderClasses = 'rounded-md border-2 border-theme-input-primary-complement focus:border-theme-emphasis-fill focus:outline-none focus:ring-1 focus:ring-skin-emphasis-fill'
+
   const numIsWhatPercentOf_Num = numIsWhatPercentOf.num
   const numIsWhatPercentOf_Of = numIsWhatPercentOf.of
 
@@ -102,15 +108,15 @@ const NumIsWhatPercentOf = ({
       <div className='font-semibold mr-3'>X is what percent of Y?</div>
       <input
         type='number'
-        className='w-24 m-3 p-2 border-2 rounded border-gray-700 bg-skin-secondary-fill text-skin-secondary'
+        className={`w-24 m-3 p-2 border-2 rounded bg-theme-input-primary-fill ${textClasses} ${borderClasses}`}
         name='num'
         value={numIsWhatPercentOf_Num}
         onChange={handleNumIsWhatPercentOfChange}
       />
       <div>is what percent of</div>
       <input
         type='number'
-        className='w-24 m-3 p-2 border-2 rounded border-gray-700 bg-skin-secondary-fill text-skin-secondary'
+        className={`w-24 m-3 p-2 border-2 rounded bg-theme-input-primary-fill ${textClasses} ${borderClasses}`}
         name='of'
         value={numIsWhatPercentOf_Of}
         onChange={handleNumIsWhatPercentOfChange}

utilities_for_me/web_app/client/react/EncryptDecrypt.jsx

@@ -99,6 +99,9 @@ const DecryptBody = ({
   handleKeyChange,
   handleClick
 }) => {
+  const textClasses = 'text-theme-input-primary placeholder-theme-input-primary'
+  const borderClasses = 'rounded-md border-2 border-theme-input-primary-complement focus:border-theme-emphasis-fill focus:outline-none focus:ring-1 focus:ring-skin-emphasis-fill'
+
   return (
     <div className='w-full md:w-6/12'>
       <div>Message To Decrypt</div>
@@ -108,7 +111,7 @@ const DecryptBody = ({
         handleChange={handleMessageChange}
       />
       <input
-        className='w-full p-2 rounded-md border-2 border-skin-emphasis-fill focus:border-skin-emphasis-fill focus:outline-none focus:ring-1 focus:ring-skin-emphasis-fill bg-skin-secondary-fill text-skin-secondary'
+        className={`w-full p-2 bg-theme-input-primary-fill ${textClasses} ${borderClasses}`}
         placeholder='Key for decryption...'
         value={decryptionKey}
         onChange={handleKeyChange}

utilities_for_me/web_app/client/react/GenerateRandomString.jsx

@@ -51,13 +51,16 @@ const GenerateRandomStringOptions = ({ length, selectedCategories, setSelectedCa
     }
   }
 
+  const textClasses = 'text-theme-input-primary placeholder-theme-input-primary'
+  const borderClasses = 'rounded-md border-2 border-theme-input-primary-complement focus:border-theme-emphasis-fill focus:outline-none focus:ring-1 focus:ring-skin-emphasis-fill'
+
   return (
     <div className='p-2'>
       <div className='text-xl font-semibold'>Options</div>
       <input
         required
         type='number'
-        className='p-2 mt-3 mb-1 w-full md:w-6/12 border-2 rounded border-gray-700 bg-skin-secondary-fill text-skin-secondary'
+        className={`p-2 mt-3 mb-1 w-full md:w-6/12 border-2 bg-theme-input-primary-fill ${textClasses} ${borderClasses}`}
         placeholder='Length...'
         value={length}
         onChange={handleChange}

utilities_for_me/web_app/client/react/Home.jsx

@@ -27,7 +27,7 @@ const TestimonialPane = ({ theme }) => {
         </blockquote>
         <figcaption className='font-medium'>
           <div className='text-theme-comp-emphasis'>
-            Matthew Cale
+            <a href='http://matthewcale.com/'>Matthew Cale</a>
           </div>
           <div className='text-theme-comp-secondary'>
             A Regular Dude -- Austin, TX

utilities_for_me/web_app/client/react/Navbar.jsx

@@ -6,11 +6,11 @@ function Navbar ({ currentTheme, setTheme }) {
       <div className='max-w-8xl mx-auto px-2 sm:px-6 lg:px-8'>
         <div className='relative flex items-center justify-between h-16'>
           <div>
-            <a className='text-xl text-theme-primary hover:text-theme-emphasis' href='/'>
+            <a className='text-xl text-theme-secondary hover:text-theme-emphasis' href='/'>
               <span>UtilitiesFor.me</span>
             </a>
           </div>
-          <div className='text-xl text-theme-primary hover:text-theme-emphasis'>
+          <div className='text-xl text-theme-secondary hover:text-theme-emphasis'>
             <a href='https://github.com/mattc41190/utilitiesforme'><i className='bi bi-github' /></a>
           </div>
         </div>

utilities_for_me/web_app/client/react/common/Textarea.jsx

@@ -1,11 +1,14 @@
 import React from 'react'
 
 const Textarea = ({ handleChange, placeholder, value }) => {
+  const textClasses = 'text-theme-input-primary placeholder-theme-input-primary'
+  const borderClasses = 'rounded-md border-2 border-theme-input-primary-complement focus:border-theme-emphasis-fill focus:outline-none focus:ring-1 focus:ring-skin-emphasis-fill'
+
   return (
     <textarea
       required
       rows='8'
-      className='w-full bg-skin-secondary-fill text-skin-secondary my-3 p-3 rounded-md border-2 border-skin-emphasis-fill focus:border-skin-emphasis-fill focus:outline-none focus:ring-1 focus:ring-skin-emphasis-fill'
+      className={`w-full my-3 p-3 bg-theme-input-primary-fill ${textClasses} ${borderClasses}`}
       placeholder={placeholder}
       value={value}
       onChange={handleChange}

utilities_for_me/web_app/client/react/styles/blue-theme.css

@@ -16,13 +16,19 @@
   --text-emphasis: var(--amber-600);
 
   /* Inputs */
-  --input-primary-fill: var(--grey-100);
-  --input-primary-complement: var(--grey-100);
+  --input-primary-fill: var(--blue-600);
+  --input-primary-complement: var(--blue-300);
   --input-secondary-fill: var(--grey-200);
   --input-secondary-complement: var(--grey-200);
   --input-emphasis-fill: var(--grey-300);
   --input-emphasis-complement: var(--grey-200);
 
+  /* Input Texts */
+  --input-text-primary: var(--grey-200);
+  --input-text-secondary: var(--grey-400);
+  --input-text-muted: var(--grey-100);
+  --input-text-emphasis: var(--pink-600);
+
   /* Buttons */
   --btn-primary-fill: var(--grey-200);
   --btn-primary-complement: var(--gray-600);

utilities_for_me/web_app/client/react/styles/dark-theme.css

@@ -15,14 +15,20 @@
   --text-muted: var(--grey-100);
   --text-emphasis: var(--pink-600);
 
-  /* Input Fill Colors */
-  --input-primary-fill: var(--grey-100);
-  --input-primary-complement: var(--grey-100);
+  /* Inputs */
+  --input-primary-fill: var(--grey-900);
+  --input-primary-complement: var(--grey-600);
   --input-secondary-fill: var(--grey-200);
   --input-secondary-complement: var(--grey-200);
   --input-emphasis-fill: var(--grey-300);
   --input-emphasis-complement: var(--grey-200);
 
+  /* Input Texts */
+  --input-text-primary: var(--grey-100);
+  --input-text-secondary: var(--grey-400);
+  --input-text-muted: var(--grey-100);
+  --input-text-emphasis: var(--pink-600);
+
   /* Buttons */
   --btn-primary-fill: var(--grey-200);
   --btn-primary-complement: var(--gray-600);

utilities_for_me/web_app/client/react/styles/green-theme.css

@@ -11,39 +11,45 @@
 
     /* Base Text */
     --text-primary: var(--green-50);
-    --text-secondary: var(--grey-500);
+    --text-secondary: var(--grey-300);
     --text-muted: var(--grey-300);
     --text-emphasis: var(--brown-500);
 
-    /* Inputs */
-    --input-primary-fill: var(--grey-100);
-    --input-primary-complement: var(--grey-100);
-    --input-secondary-fill: var(--grey-200);
-    --input-secondary-complement: var(--grey-200);
-    --input-emphasis-fill: var(--grey-300);
-    --input-emphasis-complement: var(--grey-200);
+  /* Inputs */
+  --input-primary-fill: var(--green-600);
+  --input-primary-complement: var(--green-300);
+  --input-secondary-fill: var(--grey-200);
+  --input-secondary-complement: var(--grey-200);
+  --input-emphasis-fill: var(--grey-300);
+  --input-emphasis-complement: var(--grey-200);
 
-    /* Buttons */
-    --btn-primary-fill: var(--grey-200);
-    --btn-primary-complement: var(--gray-600);
-    --btn-primary-fill-hover: var(--grey-200);
-    --btn-primary-complement-hover: var(--gray-600);
-    --btn-primary-fill-disabled: var(--grey-200);
-    --btn-primary-complement-disabled: var(--gray-600);
+  /* Input Texts */
+  --input-text-primary: var(--grey-100);
+  --input-text-secondary: var(--grey-400);
+  --input-text-muted: var(--grey-100);
+  --input-text-emphasis: var(--pink-600);
 
-    --btn-secondary-fill: var(--grey-200);
-    --btn-secondary-complement: var(--gray-600);
-    --btn-secondary-fill-hover: var(--grey-200);
-    --btn-secondary-complement-hover: var(--gray-600);
-    --btn-secondary-fill-disabled: var(--grey-200);
-    --btn-secondary-complement-disabled: var(--gray-600);
+  /* Buttons */
+  --btn-primary-fill: var(--grey-200);
+  --btn-primary-complement: var(--gray-600);
+  --btn-primary-fill-hover: var(--grey-200);
+  --btn-primary-complement-hover: var(--gray-600);
+  --btn-primary-fill-disabled: var(--grey-200);
+  --btn-primary-complement-disabled: var(--gray-600);
 
-    --btn-emphasis-fill: var(--grey-200);
-    --btn-emphasis-complement: var(--gray-600);
-    --btn-emphasis-fill-hover: var(--grey-200);
-    --btn-emphasis-complement-hover: var(--gray-600);
-    --btn-emphasis-fill-disabled: var(--grey-200);
-    --btn-emphasis-complement-disabled: var(--gray-600);
+  --btn-secondary-fill: var(--grey-200);
+  --btn-secondary-complement: var(--gray-600);
+  --btn-secondary-fill-hover: var(--grey-200);
+  --btn-secondary-complement-hover: var(--gray-600);
+  --btn-secondary-fill-disabled: var(--grey-200);
+  --btn-secondary-complement-disabled: var(--gray-600);
+
+  --btn-emphasis-fill: var(--grey-200);
+  --btn-emphasis-complement: var(--gray-600);
+  --btn-emphasis-fill-hover: var(--grey-200);
+  --btn-emphasis-complement-hover: var(--gray-600);
+  --btn-emphasis-fill-disabled: var(--grey-200);
+  --btn-emphasis-complement-disabled: var(--gray-600);
 
     /* Button Texts */
     --btn-text-primary: var(--gray-600);

utilities_for_me/web_app/client/react/styles/light-theme.css

@@ -15,14 +15,20 @@
     --text-muted: var(--grey-300);
     --text-emphasis: var(--pink-600);
 
-    /* Input Fill Colors */
-    --input-primary-fill: var(--grey-100);
-    --input-primary-complement: var(--grey-100);
+    /* Inputs */
+    --input-primary-fill: var(--grey-200);
+    --input-primary-complement: var(--grey-300);
     --input-secondary-fill: var(--grey-200);
     --input-secondary-complement: var(--grey-200);
     --input-emphasis-fill: var(--grey-300);
     --input-emphasis-complement: var(--grey-200);
 
+    /* Input Texts */
+    --input-text-primary: var(--grey-900);
+    --input-text-secondary: var(--grey-400);
+    --input-text-muted: var(--grey-100);
+    --input-text-emphasis: var(--pink-600);
+
     /* Buttons */
     --btn-primary-fill: var(--grey-200);
     --btn-primary-complement: var(--gray-600);

utilities_for_me/web_app/client/react/styles/orange-theme.css

@@ -16,13 +16,19 @@
     --text-emphasis: var(--pink-700);
 
     /* Inputs */
-    --input-primary-fill: var(--grey-100);
-    --input-primary-complement: var(--grey-100);
+    --input-primary-fill: var(--orange-500);
+    --input-primary-complement: var(--orange-600);
     --input-secondary-fill: var(--grey-200);
     --input-secondary-complement: var(--grey-200);
     --input-emphasis-fill: var(--grey-300);
     --input-emphasis-complement: var(--grey-200);
 
+    /* Input Texts */
+    --input-text-primary: var(--grey-100);
+    --input-text-secondary: var(--grey-400);
+    --input-text-muted: var(--grey-100);
+    --input-text-emphasis: var(--pink-600);
+
     /* Buttons */
     --btn-primary-fill: var(--grey-200);
     --btn-primary-complement: var(--gray-600);

utilities_for_me/web_app/client/react/styles/pink-theme.css

@@ -10,19 +10,25 @@
     --emphasis-complement: var(--green-200);
 
     /* Base Text */
-    --text-primary: var(--pink-500);
-    --text-secondary: var(--grey-300);
+    --text-primary: var(--grey-100);
+    --text-secondary: var(--pink-600);
     --text-muted: var(--grey-300);
     --text-emphasis: var(--red-300);
 
     /* Inputs */
-    --input-primary-fill: var(--grey-100);
-    --input-primary-complement: var(--grey-100);
+    --input-primary-fill: var(--pink-100);
+    --input-primary-complement: var(--pink-300);
     --input-secondary-fill: var(--grey-200);
     --input-secondary-complement: var(--grey-200);
     --input-emphasis-fill: var(--grey-300);
     --input-emphasis-complement: var(--grey-200);
 
+    /* Input Texts */
+    --input-text-primary: var(--pink-500);
+    --input-text-secondary: var(--grey-400);
+    --input-text-muted: var(--grey-100);
+    --input-text-emphasis: var(--pink-600);
+
     /* Buttons */
     --btn-primary-fill: var(--grey-200);
     --btn-primary-complement: var(--gray-600);

utilities_for_me/web_app/client/react/styles/purple-theme.css

@@ -16,13 +16,19 @@
     --text-emphasis: var(--amber-500);
 
     /* Inputs */
-    --input-primary-fill: var(--grey-100);
-    --input-primary-complement: var(--grey-100);
+    --input-primary-fill: var(--purple-700);
+    --input-primary-complement: var(--purple-300);
     --input-secondary-fill: var(--grey-200);
     --input-secondary-complement: var(--grey-200);
     --input-emphasis-fill: var(--grey-300);
     --input-emphasis-complement: var(--grey-200);
 
+    /* Input Texts */
+    --input-text-primary: var(--grey-100);
+    --input-text-secondary: var(--grey-400);
+    --input-text-muted: var(--grey-100);
+    --input-text-emphasis: var(--pink-600);
+
     /* Buttons */
     --btn-primary-fill: var(--grey-200);
     --btn-primary-complement: var(--gray-600);