feat: omg it kinda makes sense now

THEMES.md

@@ -16,7 +16,13 @@ The general structure:
 
 `[entity]-color-[fill/complement]-[state]`
 
-Here the optional `entity` field (as denoted by `[]`) can be replaced by with something called `text` for text colors. The semi-optional `complement` is used only for background colors and is intended to enrich an otherwise monotone feel. The optional `state` qualifier is intended to denote entity state and shouldn't be used where entity is not provided. An example of fully leveraging this.
+Here the optional `entity` field (as denoted by `[]`) can be replaced by with something called `text` for text colors. The semi-optional `complement` is used only for background colors and is intended to enrich an otherwise monotone feel. The optional `state` qualifier is intended to denote entity state and shouldn't be used where entity is not provided. An example of fully leveraging this might look like:
+
+`primary-fill`
+
+OR
+
+`text-primary-hover`
 
 **Colors:**
 
@@ -35,11 +41,12 @@ Here the optional `entity` field (as denoted by `[]`) can be replaced by with so
 *Base Text*
 
 - Text Primary:
-    - CSS Variable Name(s): [`text-primary`, `text-primary-hover`, `text-primary-disabled`]
+    - CSS Variable Name(s): [`text-primary`, `text-primary-hover`, `text-primary-disabled`, `text-primary-complement`]
     - The `text-primary` text color is intended for use in the base site. This color will be the main text color your user sees so it should appear clearly on your `primary-fill` and possibly your `secondary-fill` depending on how different the two are in your use case (not all pallettes have primary and secondary color that shift the text color too dramatically). The variations here (`hover` and `disabled`) are obvious, **but I will address them here and nowhere else so no one can say they were left unexplained**. The `hover` modifier is the text color you'd like your primary text color to change to in the event it is hovered over by a mouse and `disabled` is the color you'd like it changed to in the event that it is disabled and unusable.
+    - The `text-primary-complement` like the `primary-complement` intended to enrich text on a primary base. It is decorative and at this time will not be getting state based modifications to keep the pallette smaller.
 
 - Text Secondary:
-    - CSS Variable Name(s): [`text-secondary`, `text-secondary-hover`, `text-secondary-disabled`]
+    - CSS Variable Name(s): [`text-secondary`, `text-secondary-hover`, `text-secondary-disabled`, `text-primary-complement`]
     - The `text-secondary` text color is intended for use in the base site. This color will be the secondary text color your user sees so it should appear clearly on your `secondary-fill` and possibly your `primary-fill`.
 
 ### Primary Pallette Example
@@ -51,6 +58,7 @@ Here the optional `entity` field (as denoted by `[]`) can be replaced by with so
 - `text-primary`
 - `text-primary-hover`
 - `text-primary-disabled`
+- `text-primary-complement`
 - `text-secondary`
 - `text-secondary-hover`
 - `text-secondary-disabled`

tailwind.config.js

@@ -1,3 +1,78 @@
+const backgroundColors = {
+  "primary-fill": "var(--primary-fill)",
+  "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)",
+
+  "btn-primary-fill": "var(--btn-primary-fill)",
+  "btn-primary-fill-hover": "var(--btn-primary-fill)",
+  "btn-primary-fill-disabled": "var(--btn-primary-fill)",
+  "btn-secondary-fill": "var(--btn-secondary-fill)",
+  "btn-secondary-fill-hover": "var(--btn-secondary-fill)",
+  "btn-secondary-fill-disabled": "var(--btn-secondary-fill)",
+  "btn-emphasis-fill": "var(--btn-emphasis-fill)",
+  "btn-emphasis-fill-hover": "var(--btn-emphasis-fill)",
+  "btn-emphasis-fill-disabled": "var(--btn-emphasis-fill)",
+
+  "comp-primary-fill": "var(--comp-primary-fill)",
+  "comp-secondary-fill": "var(--comp-secondary-fill)",
+  "comp-emphasis-fill": "var(--comp-emphasis-fill)",
+}
+
+const borderColors = {
+  "primary-complement": "var(--primary-complement)",
+  "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)",
+
+  "btn-primary-complement": "var(--btn-primary-complement)",
+  "btn-primary-complement-hover": "var(--btn-primary-complement)",
+  "btn-primary-complement-disabled": "var(--btn-primary-complement)",
+  "btn-secondary-complement": "var(--btn-secondary-complement)",
+  "btn-secondary-complement-hover": "var(--btn-secondary-complement)",
+  "btn-secondary-complement-disabled": "var(--btn-secondary-complement)",
+  "btn-emphasis-complement": "var(--btn-emphasis-complement)",
+  "btn-emphasis-complement-hover": "var(--btn-emphasis-complement)",
+  "btn-emphasis-complement-disabled": "var(--btn-emphasis-complement)",
+
+  "comp-primary-complement": "var(--color-component-complement)",
+  "comp-secondary-complement": "var(--color-component-complement)",
+  "comp-emphasis-complement": "var(--color-component-complement)",
+}
+
+const textColors = {
+  "primary": "var(--text-primary)",
+  "secondary": "var(--text-secondary)",
+  "muted": "var(--text-muted)",
+  "emphasis": "var(--text-emphasis)",
+
+  "input-primary": "var(--primary-fill)",
+  "input-secondary": "var(--secondary-fill)",
+  "input-emphasis": "var(--secondary-fill)",
+
+  "btn-primary": "var(--btn-text-primary)",
+  "btn-primary-hover": "var(--btn-text-primary)",
+  "btn-primary-disabled": "var(--btn-text-primary)",
+  "btn-secondary": "var(--btn-text-secondary)",
+  "btn-secondary-hover": "var(--btn-text-secondary)",
+  "btn-secondary-disabled": "var(--btn-text-secondary)",
+  "btn-emphasis": "var(--btn-text-emphasis)",
+  "btn-emphasis-hover": "var(--btn-text-emphasis)",
+  "btn-emphasis-disabled": "var(--btn-text-emphasis)",
+
+  "comp-primary": "var(--comp-text-primary)",
+  "comp-secondary": "var(--comp-text-secondary)",
+  "comp-muted": "var(--comp-text-muted)",
+  "comp-emphasis": "var(--comp-text-emphasis)",
+}
+
+
 module.exports = {
   purge: [
     'utilities_for_me/web_app/static/**/*.js'
@@ -8,47 +83,10 @@ module.exports = {
       center: true
     },
     extend: {
-      textColor: {
-        skin: {
-          "primary": "var(--text-primary)",
-          "secondary": "var(--color-text-base-secondary)",
-          "muted": "var(--color-text-base-muted)",
-          "emphasis": "var(--color-text-base-emphasis)",
-          "component-primary": "var(--color-text-component-primary)",
-          "component-secondary": "var(--color-text-component-secondary)",
-          "component-muted": "var(--color-text-component-muted)",
-          "component-emphasis": "var(--color-text-component-emphasis)",
-          "button-primary": "var(--color-button-text-base)",
-          "button-primary-active": "var(--color-button-text-base-active)",
-        }
-      },
-      backgroundColor: {
-        skin: {
-          "primary-fill": "var(--primary-fill)",
-          "secondary-fill": "var(--color-secondary-fill)",
-          "component-fill": "var(--color-component-fill)",
-          "button-fill": "var(--color-button-base-fill)",
-          "button-active-fill": "var(--color-button-base-fill-active)"
-        }
-      },
-      borderColor: {
-        skin: {
-          "primary-fill": "var(--primary-fill)",
-          "secondary-fill": "var(--color-secondary-fill)",
-          "component-fill": "var(--color-component-fill)",
-          "emphasis-fill": "var(--color-emphasis-fill)",
-          "emphasis-component-fill": "var(--color-component-emphasis-fill)",
-        }
-      },
-      ringColor: {
-        skin: {
-          "primary-fill": "var(--primary-fill)",
-          "secondary-fill": "var(--color-secondary-fill)",
-          "component-fill": "var(--color-component-fill)",
-          "emphasis-fill": "var(--color-emphasis-fill)",
-          "emphasis-component-fill": "var(--color-component-emphasis-fill)",
-        }
-      }
+      backgroundColor: { theme: backgroundColors }, // bg-theme-[key], 
+      borderColor: { theme: borderColors }, 
+      ringColor: { theme: borderColors },
+      textColor: { theme: textColors },
     }
   },
   variants: {
@@ -60,33 +98,3 @@ module.exports = {
   plugins: []
 }
 
-// --color-button-base-fill: var(--grey-200);
-// --color-button-base-outline: var(--gray-600);
-// --color-button-text-base: var(--gray-600);
-// --color-button-base-fill-active: var(--grey-400);
-// --color-button-base-outline-active: var(--grey-800);
-// --color-button-text-base-active: var(--grey-800);
-
-
-// /* Base Colors */
-// --color-base-fill: var(--white);
-// --color-secondary-fill: var(--very-light-gray);
-// --color-text-base-primary: var(--very-dark-gray);
-// --color-text-base-secondary: var(--black);
-// --color-text-base-muted: var(--black);
-// --color-text-base-emphasis: var(--black);
-
-// /* Buttons Colors */
-// --color-button-base-fill: var(--black);
-// --color-button-base-outline: var(--black);
-// --color-button-text-base: var(--black);
-// --color-button-base-fill-active: var(--black);
-// --color-button-base-outline-active: var(--black);
-// --color-button-text-base-active: var(--black);
-
-// /* Card/Pill Colors */
-// --color-component-fill: var(--very-dark-gray);
-// --color-text-component-primary: var(--very-dark-gray);
-// --color-text-component-secondary: var(--black);
-// --color-text-component-muted: var(--black);
-// --color-text-component-emphasis: var(--black);

utilities_for_me/web_app/client/react/App.jsx

@@ -19,7 +19,7 @@ import Footer from './Footer'
 
 function App () {
   const cookieTheme = getCookie("theme")
-  let defaultTheme = "theme-light"
+  let defaultTheme = "theme-green"
   const [theme, setTheme] = useState(cookieTheme ? cookieTheme : defaultTheme)
 
   useEffect(() => {
@@ -38,7 +38,7 @@ function App () {
   }, [theme]);
 
   return (
-      <main id="app" className={`${theme} flex flex-col h-screen bg-skin-primary-fill`}>
+      <main id="app" className={`${theme} flex flex-col h-screen bg-theme-primary-fill text-theme-primary`}>
         <Navbar currentTheme={theme} setTheme={setTheme} />
         <div className='container mx-auto flex-1'>
           <Switch>

utilities_for_me/web_app/client/react/Footer.jsx

@@ -6,7 +6,7 @@ function Footer ({currentTheme, setTheme}) {
   const handleThemeToggle = (e) => setTheme(e.target.value)
 
   return (
-    <div className='mt-6 bg-skin-secondary-fill border-t-2 border-skin-emphasis-fill'>
+    <div className='mt-6 bg-theme-secondary-fill border-t-2 border-theme-secondary-complement'>
       <div className='flex items-center justify-center h-16'>
         <span className='text-xl text-skin-primary hover:text-skin-emphasis mr-3'>
           <button value="theme-light" className="focus:outline-none" onClick={handleThemeToggle}>🤍</button>
@@ -15,7 +15,19 @@ function Footer ({currentTheme, setTheme}) {
           <button value="theme-dark" className="focus:outline-none" onClick={handleThemeToggle}>🖤</button>
         </span>
         <span className='text-xl text-skin-primary hover:text-skin-emphasis mr-3'>
-          <button value="theme-ocean" className="focus:outline-none" onClick={handleThemeToggle}>💙</button>
+          <button value="theme-blue" className="focus:outline-none" onClick={handleThemeToggle}>💙</button>
+        </span>
+        <span className='text-xl text-skin-primary hover:text-skin-emphasis mr-3'>
+          <button value="theme-green" className="focus:outline-none" onClick={handleThemeToggle}>💚</button>
+        </span>
+        <span className='text-xl text-skin-primary hover:text-skin-emphasis mr-3'>
+          <button value="theme-orange" className="focus:outline-none" onClick={handleThemeToggle}>🧡</button>
+        </span>
+        <span className='text-xl text-skin-primary hover:text-skin-emphasis mr-3'>
+          <button value="theme-purple" className="focus:outline-none" onClick={handleThemeToggle}>💜</button>
+        </span>
+        <span className='text-xl text-skin-primary hover:text-skin-emphasis mr-3'>
+          <button value="theme-pink" className="focus:outline-none" onClick={handleThemeToggle}>💖</button>
         </span>
       </div>
     </div>

utilities_for_me/web_app/client/react/Home.jsx

@@ -4,30 +4,30 @@ import { Link } from 'react-router-dom'
 
 const WelcomePane = () => {
   return (
-    <section className='md:flex bg-skin-component-fill rounded-xl p-8 lg:p-0 mb-3 lg:mb-0 lg:mr-3 shadow-inner'>
+    <section className='md:flex bg-theme-comp-primary-fill rounded-xl p-8 lg:p-0 mb-3 lg:mb-0 lg:mr-3 shadow-inner'>
       <div className='pt-6 md:p-8 space-y-1'>
-        <div className='text-2xl text-skin-component-primary font-semibold mb-4'>What is Utilities For Me?</div>
-        <div className='text-center text-skin-component-primary md:text-left leading-relaxed'> Utilities for me (<i className='text-skin-emphasis'>utilitiesfor.me</i>) is a collection of simple and fun utilities I find myself needing reasonably regularly and needing to go to sites that I neither know nor trust to get it done! I have written my own version and also made the source available so you can deploy it yourself if you are worried!</div>
+        <div className='text-2xl text-theme-comp-primary font-semibold mb-4'>What is Utilities For Me?</div>
+        <div className='text-center text-theme-comp-primary md:text-left leading-relaxed'> Utilities for me (<i className='text-theme-comp-emphasis'>utilitiesfor.me</i>) is a collection of simple and fun utilities I find myself needing reasonably regularly and needing to go to sites that I neither know nor trust to get it done! I have written my own version and also made the source available so you can deploy it yourself if you are worried!</div>
       </div>
     </section>
   )
 }
 
 const TestimonialPane = () => {
   return (
-    <section className='md:flex bg-skin-component-fill rounded-xl p-8 md:p-2 shadow-inner'>
+    <section className='md:flex bg-theme-comp-primary-fill rounded-xl p-8 md:p-2 shadow-inner'>
       <img className='w-32 h-32 self-center mx-auto' src={`${window.staticRoot}/static/images/face-circle-sm.png`} alt='' width='384' height='512' />
-      <div className='pt-6 md:p-8 text-skin-component-primary text-center md:text-left space-y-1'>
+      <div className='pt-6 md:p-8 text-theme-comp-primary text-center md:text-left space-y-1'>
         <blockquote>
           <p className='font-light'>
             “Since I started using Utilities For Me my life has improved beyond my wildest dreams! I own a unicorn as a house trained pet. I got a million dollars, and <span className='font-semibold'>BOTH</span> of my parents said they were proud of me!”
           </p>
         </blockquote>
         <figcaption className='font-medium'>
-          <div className='text-skin-emphasis'>
+          <div className='text-theme-comp-emphasis'>
             Matthew Cale
           </div>
-          <div className='text-skin-secondary'>
+          <div className='text-theme-comp-secondary'>
             A Regular Dude -- Austin, TX
           </div>
         </figcaption>
@@ -38,10 +38,10 @@ const TestimonialPane = () => {
 
 const UtilityPane = ({ link, title, description }) => {
   return (
-        <section className='md:flex bg-skin-component-fill rounded-xl p-6 md:p-2 shadow-inner'>
+        <section className='md:flex bg-theme-comp-primary-fill rounded-xl p-6 md:p-2 shadow-inner'>
         <div className='pt-2 md:p-4 text-center md:text-left'>
-          <div className='text-skin-component-primary hover:text-skin-component-emphasis text-2xl font-semibold mb-2'><Link to={link}>{title}</Link> </div>
-          <div className='text-skin-component-secondary text-center md:text-left leading-relaxed text-lg'>{description}</div>
+          <div className='text-theme-comp-primary text-2xl font-semibold mb-2'>  <span className="hover:text-theme-comp-emphasis"><Link to={link}>{title}</Link></span></div>
+          <div className='text-theme-comp-secondary text-center md:text-left leading-relaxed text-lg'>{description}</div>
         </div>
       </section>
   )

utilities_for_me/web_app/client/react/Navbar.jsx

@@ -5,15 +5,15 @@ function Navbar ({currentTheme, setTheme}) {
 
 
   return (
-    <nav className='bg-skin-secondary-fill border-b-2 border-skin-emphasis-fill'>
+    <nav className='bg-theme-secondary-fill border-b-2 border-theme-secondary-complement'>
       <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-skin-primary hover:text-skin-emphasis' href='/'>
+            <a className='text-xl text-theme-primary hover:text-theme-emphasis' href='/'>
               <span>UtilitiesFor.me</span>
             </a>
           </div>
-          <div className='text-xl text-skin-primary hover:text-skin-emphasis'>
+          <div className='text-xl text-theme-primary 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/index.jsx

@@ -3,6 +3,6 @@ import ReactDOM from 'react-dom'
 import { BrowserRouter } from 'react-router-dom'
 import App from './App'
 
-import './index.css'
+import './styles/index.css'
 
 ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'))