Home Plugin documentation Hooks and functions Filters pip/tailwind/native_colors

 

 

Here we go!

 

pip/tailwind/native_colors

Heads up!

This article contains PHP code and is intended for developers. We offer this code as a courtesy, but don’t provide support for code customizations or 3rd party development.

This filter allows you to customize TailwindCSS Native colors dropdown

<?php

add_filter( 'pip/tailwind/native_colors', function( $colors ) {
    return array(
        // Gray
        'gray'   => array(
            array(
                'name'  => '50',
                'label' => __( 'Gray 50', 'pilopress' ),
                'value' => '#f9fafb',
            ),
            array(
                'name'  => '100',
                'label' => __( 'Gray 100', 'pilopress' ),
                'value' => '#f3f4f6',
            ),
            array(
                'name'  => '200',
                'label' => __( 'Gray 200', 'pilopress' ),
                'value' => '#e5e7eb',
            ),
            array(
                'name'  => '300',
                'label' => __( 'Gray 300', 'pilopress' ),
                'value' => '#d1d5db',
            ),
            array(
                'name'  => '400',
                'label' => __( 'Gray 400', 'pilopress' ),
                'value' => '#9ca3af',
            ),
            array(
                'name'  => '500',
                'label' => __( 'Gray 500', 'pilopress' ),
                'value' => '#6b7280',
            ),
            array(
                'name'  => '600',
                'label' => __( 'Gray 600', 'pilopress' ),
                'value' => '#4b5563',
            ),
            array(
                'name'  => '700',
                'label' => __( 'Gray 700', 'pilopress' ),
                'value' => '#374151',
            ),
            array(
                'name'  => '800',
                'label' => __( 'Gray 800', 'pilopress' ),
                'value' => '#1f2937',
            ),
            array(
                'name'  => '900',
                'label' => __( 'Gray 900', 'pilopress' ),
                'value' => '#111827',
            ),
        ),

        // Red
        'red'    => array(
            array(
                'name'  => '50',
                'label' => __( 'Red 50', 'pilopress' ),
                'value' => '#fef2f2',
            ),
            array(
                'name'  => '100',
                'label' => __( 'Red 100', 'pilopress' ),
                'value' => '#fee2e2',
            ),
            array(
                'name'  => '200',
                'label' => __( 'Red 200', 'pilopress' ),
                'value' => '#fecaca',
            ),
            array(
                'name'  => '300',
                'label' => __( 'Red 300', 'pilopress' ),
                'value' => '#fca5a5',
            ),
            array(
                'name'  => '400',
                'label' => __( 'Red 400', 'pilopress' ),
                'value' => '#f87171',
            ),
            array(
                'name'  => '500',
                'label' => __( 'Red 500', 'pilopress' ),
                'value' => '#ef4444',
            ),
            array(
                'name'  => '600',
                'label' => __( 'Red 600', 'pilopress' ),
                'value' => '#dc2626',
            ),
            array(
                'name'  => '700',
                'label' => __( 'Red 700', 'pilopress' ),
                'value' => '#b91c1c',
            ),
            array(
                'name'  => '800',
                'label' => __( 'Red 800', 'pilopress' ),
                'value' => '#991b1b',
            ),
            array(
                'name'  => '900',
                'label' => __( 'Red 900', 'pilopress' ),
                'value' => '#7f1d1d',
            ),
        ),

        // Yellow
        'yellow' => array(
            array(
                'name'  => '50',
                'label' => __( 'Yellow 50', 'pilopress' ),
                'value' => '#fffbeb',
            ),
            array(
                'name'  => '100',
                'label' => __( 'Yellow 100', 'pilopress' ),
                'value' => '#fef3c7',
            ),
            array(
                'name'  => '200',
                'label' => __( 'Yellow 200', 'pilopress' ),
                'value' => '#fde68a',
            ),
            array(
                'name'  => '300',
                'label' => __( 'Yellow 300', 'pilopress' ),
                'value' => '#fcd34d',
            ),
            array(
                'name'  => '400',
                'label' => __( 'Yellow 400', 'pilopress' ),
                'value' => '#fbbf24',
            ),
            array(
                'name'  => '500',
                'label' => __( 'Yellow 500', 'pilopress' ),
                'value' => '#f59e0b',
            ),
            array(
                'name'  => '600',
                'label' => __( 'Yellow 600', 'pilopress' ),
                'value' => '#d97706',
            ),
            array(
                'name'  => '700',
                'label' => __( 'Yellow 700', 'pilopress' ),
                'value' => '#b45309',
            ),
            array(
                'name'  => '800',
                'label' => __( 'Yellow 800', 'pilopress' ),
                'value' => '#92400e',
            ),
            array(
                'name'  => '900',
                'label' => __( 'Yellow 900', 'pilopress' ),
                'value' => '#78350f',
            ),
        ),

        // Green
        'green'  => array(
            array(
                'name'  => '50',
                'label' => __( 'Green 50', 'pilopress' ),
                'value' => '#ecfdf5',
            ),
            array(
                'name'  => '100',
                'label' => __( 'Green 100', 'pilopress' ),
                'value' => '#d1fae5',
            ),
            array(
                'name'  => '200',
                'label' => __( 'Green 200', 'pilopress' ),
                'value' => '#a7f3d0',
            ),
            array(
                'name'  => '300',
                'label' => __( 'Green 300', 'pilopress' ),
                'value' => '#ee7b7',
            ),
            array(
                'name'  => '400',
                'label' => __( 'Green 400', 'pilopress' ),
                'value' => '#34d399',
            ),
            array(
                'name'  => '500',
                'label' => __( 'Green 500', 'pilopress' ),
                'value' => '#10b981',
            ),
            array(
                'name'  => '600',
                'label' => __( 'Green 600', 'pilopress' ),
                'value' => '#059669',
            ),
            array(
                'name'  => '700',
                'label' => __( 'Green 700', 'pilopress' ),
                'value' => '#047857',
            ),
            array(
                'name'  => '800',
                'label' => __( 'Green 800', 'pilopress' ),
                'value' => '#065f46',
            ),
            array(
                'name'  => '900',
                'label' => __( 'Green 900', 'pilopress' ),
                'value' => '#064e3b',
            ),
        ),

        // Blue
        'blue'   => array(
            array(
                'name'  => '50',
                'label' => __( 'Blue 50', 'pilopress' ),
                'value' => '#eff6ff',
            ),
            array(
                'name'  => '100',
                'label' => __( 'Blue 100', 'pilopress' ),
                'value' => '#dbeafe',
            ),
            array(
                'name'  => '200',
                'label' => __( 'Blue 200', 'pilopress' ),
                'value' => '#bfdbfe',
            ),
            array(
                'name'  => '300',
                'label' => __( 'Blue 300', 'pilopress' ),
                'value' => '#93c5fd',
            ),
            array(
                'name'  => '400',
                'label' => __( 'Blue 400', 'pilopress' ),
                'value' => '#60a5fa',
            ),
            array(
                'name'  => '500',
                'label' => __( 'Blue 500', 'pilopress' ),
                'value' => '#3b82f6',
            ),
            array(
                'name'  => '600',
                'label' => __( 'Blue 600', 'pilopress' ),
                'value' => '#2563eb',
            ),
            array(
                'name'  => '700',
                'label' => __( 'Blue 700', 'pilopress' ),
                'value' => '#1d4ed8',
            ),
            array(
                'name'  => '800',
                'label' => __( 'Blue 800', 'pilopress' ),
                'value' => '#1e40af',
            ),
            array(
                'name'  => '900',
                'label' => __( 'Blue 900', 'pilopress' ),
                'value' => '#1e3a8a',
            ),
        ),

        // Indigo
        'indigo' => array(
            array(
                'name'  => '50',
                'label' => __( 'Indigo 50', 'pilopress' ),
                'value' => '#eef2ff',
            ),
            array(
                'name'  => '100',
                'label' => __( 'Indigo 100', 'pilopress' ),
                'value' => '#e0e7ff',
            ),
            array(
                'name'  => '200',
                'label' => __( 'Indigo 200', 'pilopress' ),
                'value' => '#c7d2fe',
            ),
            array(
                'name'  => '300',
                'label' => __( 'Indigo 300', 'pilopress' ),
                'value' => '#a5b4fc',
            ),
            array(
                'name'  => '400',
                'label' => __( 'Indigo 400', 'pilopress' ),
                'value' => '#818cf8',
            ),
            array(
                'name'  => '500',
                'label' => __( 'Indigo 500', 'pilopress' ),
                'value' => '#6366f1',
            ),
            array(
                'name'  => '600',
                'label' => __( 'Indigo 600', 'pilopress' ),
                'value' => '#4f46e5',
            ),
            array(
                'name'  => '700',
                'label' => __( 'Indigo 700', 'pilopress' ),
                'value' => '#4338ca',
            ),
            array(
                'name'  => '800',
                'label' => __( 'Indigo 800', 'pilopress' ),
                'value' => '#3730a3',
            ),
            array(
                'name'  => '900',
                'label' => __( 'Indigo 900', 'pilopress' ),
                'value' => '#312e81',
            ),
        ),

        // Purple
        'purple' => array(
            array(
                'name'  => '50',
                'label' => __( 'Purple 50', 'pilopress' ),
                'value' => '#f5f3ff',
            ),
            array(
                'name'  => '100',
                'label' => __( 'Purple 100', 'pilopress' ),
                'value' => '#ede9fe',
            ),
            array(
                'name'  => '200',
                'label' => __( 'Purple 200', 'pilopress' ),
                'value' => '#ddd6fe',
            ),
            array(
                'name'  => '300',
                'label' => __( 'Purple 300', 'pilopress' ),
                'value' => '#c4b5fd',
            ),
            array(
                'name'  => '400',
                'label' => __( 'Purple 400', 'pilopress' ),
                'value' => '#a78bfa',
            ),
            array(
                'name'  => '500',
                'label' => __( 'Purple 500', 'pilopress' ),
                'value' => '#8b5cf6',
            ),
            array(
                'name'  => '600',
                'label' => __( 'Purple 600', 'pilopress' ),
                'value' => '#7c3aed',
            ),
            array(
                'name'  => '700',
                'label' => __( 'Purple 700', 'pilopress' ),
                'value' => '#6d28d9',
            ),
            array(
                'name'  => '800',
                'label' => __( 'Purple 800', 'pilopress' ),
                'value' => '#5b21b6',
            ),
            array(
                'name'  => '900',
                'label' => __( 'Purple 900', 'pilopress' ),
                'value' => '#4c1d95',
            ),
        ),

        // Pink
        'pink'   => array(
            array(
                'name'  => '50',
                'label' => __( 'Pink 50', 'pilopress' ),
                'value' => '#fdf2f8',
            ),
            array(
                'name'  => '100',
                'label' => __( 'Pink 100', 'pilopress' ),
                'value' => '#fce7f3',
            ),
            array(
                'name'  => '200',
                'label' => __( 'Pink 200', 'pilopress' ),
                'value' => '#fbcfe8',
            ),
            array(
                'name'  => '300',
                'label' => __( 'Pink 300', 'pilopress' ),
                'value' => '#f9a8d4',
            ),
            array(
                'name'  => '400',
                'label' => __( 'Pink 400', 'pilopress' ),
                'value' => '#f472b6',
            ),
            array(
                'name'  => '500',
                'label' => __( 'Pink 500', 'pilopress' ),
                'value' => '#ec4899',
            ),
            array(
                'name'  => '600',
                'label' => __( 'Pink 600', 'pilopress' ),
                'value' => '#db2777',
            ),
            array(
                'name'  => '700',
                'label' => __( 'Pink 700', 'pilopress' ),
                'value' => '#be185d',
            ),
            array(
                'name'  => '800',
                'label' => __( 'Pink 800', 'pilopress' ),
                'value' => '#9d174d',
            ),
            array(
                'name'  => '900',
                'label' => __( 'Pink 900', 'pilopress' ),
                'value' => '#831843',
            ),
        ),
    );
} );

You didn’t find the answer you were looking for?

or you think a specific topic deserve more informations?

 

Wave to bottom