feat: added context api for changing colors on components

Author: tareq1988

README.md

@@ -14,7 +14,9 @@ yarn add @wedevs/tail-react
 
 ## Usage
 
-On your `tailwind.config.js` file, update the content entry:
+### Tailwind CSS v3
+
+If you're using Tailwind CSS v3, update your `tailwind.config.js` file:
 
 ```diff
 /** @type {import('tailwindcss').Config} */
@@ -33,6 +35,75 @@ export default {
 }
 ```
 
+### Tailwind CSS v4
+
+For Tailwind CSS v4, configuration is done in your CSS file:
+
+```css
+@import 'tailwindcss';
+
+/* Import tail-react components */
+@source "node_modules/@wedevs/tail-react/dist/index.js";
+
+@theme {
+  /* Your theme customizations */
+}
+```
+
+### Customizing the theme color
+
+By default, the component library uses `indigo` as the primary color. You can customize this using the `TailReactBaseColorProvider`:
+
+```jsx
+import { TailReactBaseColorProvider, Button } from '@wedevs/tail-react';
+
+function App() {
+  return (
+    <TailReactBaseColorProvider color="blue">
+      {/* All components inside will use blue as the primary color */}
+      <Button variant="primary">Primary Blue Button</Button>
+    </TailReactBaseColorProvider>
+  );
+}
+```
+
+Available color options include all Tailwind CSS colors:
+
+- `slate`, `gray`, `zinc`, `neutral`, `stone`
+- `red`, `orange`, `amber`, `yellow`, `lime`
+- `green`, `emerald`, `teal`, `cyan`, `sky`
+- `blue`, `indigo` (default), `violet`, `purple`, `fuchsia`
+- `pink`, `rose`
+
+#### Important: Prevent color classes from being purged
+
+##### Tailwind CSS v3
+
+When using dynamic color classes with TailReactBaseColor context in Tailwind CSS v3, you need to safelist these classes in your Tailwind config to prevent them from being purged in production:
+
+```js
+// tailwind.config.js
+module.exports = {
+  // ... your existing config
+  safelist: [
+    // Safelist color variants that you plan to use dynamically
+    {
+      pattern: /bg-(red|blue|green|purple|indigo|etc)-(500|600|700)/,
+    },
+    {
+      pattern: /text-(red|blue|green|purple|indigo|etc)-(500|600)/,
+    },
+    {
+      pattern: /ring-(red|blue|green|purple|indigo|etc)-(400|500|600)/,
+    },
+    // Add other patterns based on which color utilities you use
+  ],
+  // ... rest of your config
+};
+```
+
+This approach allows you to safelist utility classes using patterns, which is much more concise than listing each class individually.
+
 ## Development
 
 To get started with development:

src/Components/Button/Button.tsx

@@ -1,6 +1,7 @@
 import { ArrowPathIcon } from '@heroicons/react/24/outline';
 import React from 'react';
 import { twMerge } from 'tailwind-merge';
+import { getColorClasses } from '../../utils/colorUtils';
 
 interface ButtonProps {
   children: React.ReactNode;
@@ -18,23 +19,6 @@ interface ButtonProps {
   rel?: string;
 }
 
-const Styles = {
-  'primary:fill':
-    'bg-indigo-600 dark:bg-indigo-500 text-white shadow-sm hover:bg-indigo-700 dark:hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600',
-  'primary:outline':
-    'bg-white dark:bg-transparent ring-1 ring-inset ring-indigo-600 dark:ring-indigo-400 text-indigo-600 dark:text-indigo-400 hover:bg-indigo-600 dark:hover:bg-indigo-400 hover:text-white dark:hover:text-indigo-700 shadow-sm',
-  'primary:link': 'text-indigo-600 dark:text-indigo-400 hover:text-indigo-500',
-  'secondary:fill':
-    'bg-white dark:bg-white/10 ring-1 ring-inset ring-gray-300 dark:ring-white/10 hover:bg-gray-50 hover:bg-white/5 text-gray-900 dark:text-white shadow-sm',
-  'secondary:outline':
-    'bg-white dark:bg-transparent dark:ring-1 dark:ring-gray-400 hover:bg-gray-50 text-gray-900 dark:text-gray-400 shadow-sm',
-  'secondary:link': 'text-gray-900 dark:text-gray-400 hover:text-gray-500',
-  'danger:fill': 'bg-red-600 dark:bg-red-500 hover:bg-red-500 text-white',
-  'danger:outline':
-    'bg-white ring-1 ring-inset ring-red-600 hover:bg-red-600 text-red-600 hover:text-white shadow-sm',
-  'danger:link': 'text-red-600 dark:text-red-500 hover:text-red-500 dark:hover:text-red-400',
-};
-
 const Button: React.FC<ButtonProps> = ({
   children,
   variant = 'primary',
@@ -50,6 +34,50 @@ const Button: React.FC<ButtonProps> = ({
   rel,
   size = 'medium',
 }) => {
+  const getStyleClasses = () => {
+    if (variant === 'primary') {
+      if (style === 'fill') {
+        return twMerge(
+          getColorClasses({
+            bg: '600',
+            'dark:bg': '500',
+            'hover:bg': '700',
+            'dark:hover:bg': '400',
+            'focus-visible:outline': '',
+            'focus-visible:outline-offset': '',
+            'focus-visible:outline-2': '',
+            'focus-visible:outline-': '600',
+          }),
+          'text-white shadow-sm'
+        );
+      } else if (style === 'outline') {
+        return twMerge(
+          getColorClasses({
+            ring: '600',
+            'dark:ring': '400',
+            text: '600',
+            'dark:text': '400',
+            'hover:bg': '600',
+            'dark:hover:bg': '400',
+            'dark:hover:text': '700',
+          }),
+          'bg-white dark:bg-transparent ring-1 ring-inset hover:text-white shadow-sm'
+        );
+      } else if (style === 'link') {
+        return twMerge(
+          getColorClasses({
+            text: '600',
+            'dark:text': '400',
+            'hover:text': '500',
+          })
+        );
+      }
+    }
+
+    // If not primary or a different variant, use the existing styles
+    return Styles[`${variant}:${style}`];
+  };
+
   const getSizeStyles = () => {
     switch (size) {
       case 'small':
@@ -77,19 +105,14 @@ const Button: React.FC<ButtonProps> = ({
   const renderButton = () => {
     const commonStyles = 'font-semibold focus:outline-none';
     const sizeStyles = getSizeStyles();
+    const styleClasses = getStyleClasses();
 
     const disabledStyles = disabled ? 'opacity-50 cursor-not-allowed' : '';
 
     return React.createElement(
       as,
       {
-        className: twMerge(
-          commonStyles,
-          Styles[`${variant}:${style}`],
-          sizeStyles,
-          disabledStyles,
-          className
-        ),
+        className: twMerge(commonStyles, styleClasses, sizeStyles, disabledStyles, className),
         type,
         disabled: disabled,
         onClick: handleClick,
@@ -105,4 +128,22 @@ const Button: React.FC<ButtonProps> = ({
   return renderButton();
 };
 
+// Keep the original Styles object for secondary and danger variants
+const Styles = {
+  'primary:fill':
+    'bg-indigo-600 dark:bg-indigo-500 text-white shadow-sm hover:bg-indigo-700 dark:hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600',
+  'primary:outline':
+    'bg-white dark:bg-transparent ring-1 ring-inset ring-indigo-600 dark:ring-indigo-400 text-indigo-600 dark:text-indigo-400 hover:bg-indigo-600 dark:hover:bg-indigo-400 hover:text-white dark:hover:text-indigo-700 shadow-sm',
+  'primary:link': 'text-indigo-600 dark:text-indigo-400 hover:text-indigo-500',
+  'secondary:fill':
+    'bg-white dark:bg-white/10 ring-1 ring-inset ring-gray-300 dark:ring-white/10 hover:bg-gray-50 hover:bg-white/5 text-gray-900 dark:text-white shadow-sm',
+  'secondary:outline':
+    'bg-white dark:bg-transparent dark:ring-1 dark:ring-gray-400 hover:bg-gray-50 text-gray-900 dark:text-gray-400 shadow-sm',
+  'secondary:link': 'text-gray-900 dark:text-gray-400 hover:text-gray-500',
+  'danger:fill': 'bg-red-600 dark:bg-red-500 hover:bg-red-500 text-white',
+  'danger:outline':
+    'bg-white ring-1 ring-inset ring-red-600 hover:bg-red-600 text-red-600 hover:text-white shadow-sm',
+  'danger:link': 'text-red-600 dark:text-red-500 hover:text-red-500 dark:hover:text-red-400',
+};
+
 export { Button };

src/Components/Checkbox/Checkbox.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { twMerge } from 'tailwind-merge';
+import { getColorClass } from '../../utils/colorUtils';
 
 interface CheckboxProps {
   label: string;
@@ -22,6 +23,11 @@ const Checkbox: React.FC<CheckboxProps> = ({
 }) => {
   const id = `input-${Math.random().toString(36).substr(2, 9)}`;
 
+  // Get color classes
+  const textColor = getColorClass('text', '600');
+  const darkTextColor = getColorClass('dark:text', '500');
+  const focusRingColor = getColorClass('focus:ring', '600');
+
   return (
     <div className="relative flex gap-x-3 mb-4">
       <div className="flex h-6 items-center">
@@ -32,7 +38,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
           disabled={disabled}
           {...props}
           className={twMerge(
-            'h-4 w-4 rounded form-checkbox border-gray-300 text-indigo-600 dark:text-indigo-500 focus:ring-indigo-600',
+            `h-4 w-4 rounded form-checkbox border-gray-300 ${textColor} ${darkTextColor} ${focusRingColor}`,
             className,
             disabled && 'disabled:opacity-50 cursor-not-allowed'
           )}

src/Components/RadioGroup/RadioGroup.tsx

@@ -1,4 +1,5 @@
 import { twMerge } from 'tailwind-merge';
+import { getColorClass } from '../../utils/colorUtils';
 
 interface Option {
   key: string;
@@ -22,6 +23,10 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
   help,
   ...props
 }) => {
+  // Get color classes
+  const textColor = getColorClass('text', '600');
+  const focusRingColor = getColorClass('focus:ring', '600');
+
   return (
     <div className="mb-4">
       {props.label && (
@@ -48,7 +53,7 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
                 value={option.key}
                 checked={value === option.key}
                 onChange={() => onChange(option.key)}
-                className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                className={`h-4 w-4 border-gray-300 ${textColor} ${focusRingColor}`}
               />
             </div>
 

src/Components/SelectCard/SelectCard.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import classNames from 'classnames';
 import { twMerge } from 'tailwind-merge';
 import { CheckCircleIcon } from '@heroicons/react/24/solid';
+import { getColorClass } from '../../utils/colorUtils';
 
 interface Option {
   key: string;
@@ -41,6 +42,12 @@ const SelectCard = ({
     return options.find((option: { key: string }) => option.key === selectedKey) || options[0];
   });
 
+  // Get color classes
+  const borderColor = getColorClass('border', '600');
+  const darkBorderColor = getColorClass('dark:border', '300');
+  const textColor = getColorClass('text', '600');
+  const darkTextColor = getColorClass('dark:text', '400');
+
   const handleChange = (option: Option) => {
     if (option.disabled) {
       return;
@@ -71,7 +78,7 @@ const SelectCard = ({
             key={index}
             className={twMerge(
               selectedOption.key === option.key
-                ? 'border-indigo-600 dark:border-indigo-300'
+                ? `${borderColor} ${darkBorderColor}`
                 : 'border-gray-200 dark:border-gray-600',
               'relative flex cursor-pointer text-center rounded-lg border-2 p-4 bg-white dark:bg-white/10 dark:text-gray-200 focus:outline-none',
               option.disabled ? 'opacity-75 cursor-not-allowed grayscale' : ''
@@ -83,9 +90,7 @@ const SelectCard = ({
             <div
               className={classNames(
                 'absolute top-0 right-0 p-1 rounded-full',
-                selectedOption.key === option.key
-                  ? ' text-indigo-600 dark:text-indigo-400'
-                  : 'invisible'
+                selectedOption.key === option.key ? `${textColor} ${darkTextColor}` : 'invisible'
               )}
             >
               <CheckCircleIcon className="h-5 w-5" />

src/Components/SelectInput/SelectInput.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { getColorClass } from '../../utils/colorUtils';
 
 interface Option {
   key: string;
@@ -45,6 +46,9 @@ const SelectInput: React.FC<SelectProps> = ({
 
   const id = `input-${Math.random().toString(36).substr(2, 9)}`;
 
+  // Get color classes
+  const focusRingColor = getColorClass('focus:ring', '600');
+
   const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const selectedOption = options.find((option) => option.key == event.target.value);
 
@@ -71,7 +75,7 @@ const SelectInput: React.FC<SelectProps> = ({
       )}
       <select
         className={twMerge(
-          'block w-full dark:bg-white/5 rounded-md border-0 py-1.5 px-2 text-gray-900 dark:text-gray-300 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-500 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 outline-none',
+          `block w-full dark:bg-white/5 rounded-md border-0 py-1.5 px-2 text-gray-900 dark:text-gray-300 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-500 focus:ring-2 focus:ring-inset ${focusRingColor} sm:text-sm sm:leading-6 outline-none`,
           className,
           error && 'ring-red-300 text-red-900  placeholder:text-red-300 focus:ring-red-500'
         )}

src/Components/SwitchInput/SwitchInput.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, ReactNode } from 'react';
 import { Switch } from '@headlessui/react';
 import classNames from 'classnames';
 import { twMerge } from 'tailwind-merge';
+import { getColorClass } from '../../utils/colorUtils';
 
 type Props = {
   label: string;
@@ -37,15 +38,20 @@ const SwitchInput = ({
     }
   };
 
+  // Get color classes
+  const bgColor = getColorClass('bg', '600');
+  const darkBgColor = getColorClass('dark:bg', '500');
+  const focusRingColor = getColorClass('focus:ring', '500');
+
   return (
     <Switch.Group as="div" className={twMerge('relative flex items-start mb-4', className)}>
       <Switch
         checked={enabled}
         disabled={disabled}
         onChange={toggleInput}
         className={classNames(
-          enabled ? 'bg-indigo-600 dark:bg-indigo-500' : 'bg-gray-200 dark:bg-gray-600',
-          'relative mt-1 inline-flex h-5 w-10 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2',
+          enabled ? `${bgColor} ${darkBgColor}` : 'bg-gray-200 dark:bg-gray-600',
+          `relative mt-1 inline-flex h-5 w-10 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 ${focusRingColor} focus:ring-offset-2`,
           disabled ? 'cursor-not-allowed opacity-50' : ''
         )}
       >