Color Palette Shortcode

// Output Color Palette shortcode
function color_palette_shortcode() {
    $colors = array(
        '--dark' => '#1E1B15',
        '--dark-hover' => '#3b3a3a',
        '--gray' => '#665750',
        '--gray-light' => '#9b9995',
        '--gray-lighter' => '#dfdfdf',
        '--gray-lightest' => '#f6f6f6',
        '--orange' => '#CE6028',
        '--green' => '#34bf30',
        '--green-hover' => '#279423',
        '--white' => '#FFFFFF',
        '--red' => '#cc1818',
    );

    // Output the color palette styles
    $output = '<style>
        .color-palette {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 40px;
            text-align: center;
        }

        .color-palette .shape {
            height: 200px;
            border-radius: 6px;
            box-shadow: 1px 1px 20px 4px rgb(0 0 0 / 14%);
        }

        .color-palette .hex {
            font-size: 18px;
            margin: 25px 0 7px;
            text-transform: uppercase;
            font-weight: 700;
        }

        .color-palette .label {
            font-size: 16px;
        }
    </style>';

    // Output the color palette HTML
    $output .= '<h1 class="margin-bottom-40"><strong>Color Palette</strong></h1> <div class="color-palette">';

    // Go through each color
    foreach ($colors as $label => $hex) {
        $output .=
            '<div class="color">
                <div class="shape" style="background-color:' . $hex . ';"></div>
                <div class="hex">' . $hex . '</div>
                <div class="label">' . $label . '</div>
            </div>';
    }

    $output .= '</div>';

    return $output;
}
add_shortcode('color_palette', 'color_palette_shortcode');